/* PomoDock Web: the mission desk and the widgets that live on the canvas. Shell, palette and
   controls are in pomodock.css; this file only adds what each window and board draws. */

/* ------------------------------------------------------------------ shared pieces */

.caption { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.muted { color: var(--muted); }
.quiet {
  border: 0; background: transparent; color: var(--muted); font: 600 11.5px var(--sans);
  padding: 4px 8px; margin: 0; cursor: pointer; text-align: left;
}
.quiet:hover { opacity: .78; }
.quiet.ink-text { color: var(--ink); }
.field.select { margin: 0 8px 0 0; padding: 7px 9px; font-size: 12px; min-height: 34px; border-width: 1.5px; }
.tick { display: inline-flex; margin-right: 9px; cursor: pointer; flex: none; }
.tick input { position: absolute; opacity: 0; width: 0; height: 0; }
.tick span { width: 17px; height: 17px; border: 1.5px solid var(--edge); background: var(--surface); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.tick input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tick input:checked + span::after { content: "✓"; }
.tick input:focus-visible + span { outline: 2px solid var(--line); outline-offset: 2px; }
.tag { border: 1px solid var(--edge); padding: 0 6px 1px; margin-right: 10px; font-size: 11px; }
.empty { font-size: 12.5px; color: var(--muted); margin: 10px 0; }

/* ------------------------------------------------------------------ the mission desk */

.tasks { width: 720px; height: 740px; }
.tasks-body { padding: 15px 18px 14px; display: flex; flex-direction: column; }
.tasks-intro { display: flex; align-items: flex-start; gap: 12px; }
.tasks-intro > div { flex: 1; }
.mission {
  display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 12px 12px 14px;
  background: var(--ink); color: var(--paper); border: 2px solid var(--ink);
}
.mission > div { flex: 1; min-width: 0; }
.mission-label { font-size: 10.5px; font-weight: 700; opacity: .75; margin-bottom: 4px; }
.mission-title { font-size: 18px; font-weight: 900; overflow-wrap: anywhere; }
.mission-project { font-size: 12px; opacity: .8; margin-top: 3px; }
.mission-go { background: var(--paper); color: var(--ink); border-color: var(--paper); padding: 10px 18px; font-size: 14px; font-weight: 700; margin: 0; }
.tasks-bar { display: grid; grid-template-columns: auto auto minmax(0, 1fr) 170px; align-items: center; margin-top: 12px; }
.field.search { margin: 0; font-size: 14px; padding: 7px 10px; }
.tasks-create { margin-top: 8px; padding: 10px; background: var(--raised); border: 1px solid var(--ink); }
.tasks-line { display: flex; }
.tasks-line .field { flex: 1; }
.field-line { display: flex; align-items: center; }
.field-line .select { flex: 1; margin-right: 0; }
.counter { display: inline-flex; }
.counter .btn { padding: 4px 11px; margin: 0; font-size: 14px; }
.counter input {
  width: 46px; text-align: center; border: 0; border-top: 1.5px solid var(--edge); border-bottom: 1.5px solid var(--edge);
  background: var(--surface); color: var(--ink); font: 13px var(--sans);
}
.chips { display: flex; overflow-x: auto; padding-bottom: 2px; }
.chip { display: inline-flex; border: 1.5px solid var(--edge); background: var(--surface); margin: 0 6px 6px 0; white-space: nowrap; }
.pick {
  display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; margin-bottom: 8px;
  background: var(--raised); border: 1.5px solid var(--edge); cursor: pointer;
}
.pick > div { flex: 1; min-width: 0; }
.pick .btn { margin: 0; }
.pick-name { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.meta { display: flex; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.progress { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 600; }
.progress-track { width: 42px; height: 7px; margin-right: 7px; background: var(--line); overflow: hidden; }
.progress-track i { display: block; height: 100%; background: var(--ink); }
:root[data-theme="dark"] .progress-track { background: var(--edge); }
.tasks-list { margin-top: 8px; flex: 1; min-height: 80px; }
.task-row { display: flex; align-items: center; padding: 8px 3px 8px 10px; border-bottom: 1px solid var(--edge); }
.task-row:hover, .task-row.active { background: var(--raised); }
.task-row.active { border-left: 3px solid var(--ink); padding-left: 7px; }
.task-words { flex: 1; min-width: 0; }
.task-words.done { opacity: .6; }
.task-words.done .task-name { text-decoration: line-through; }
.task-name { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.task-actions { display: flex; align-items: center; margin-left: 6px; }
.task-actions .btn { margin: 0; }
.badge { background: var(--ink); color: var(--paper); font-size: 10.5px; font-weight: 700; padding: 5px 8px; margin-right: 4px; }
.task-editor { padding: 12px 14px 14px; margin: 4px 0 6px; background: var(--raised); border: 1.5px solid var(--line); }
.editor-buttons { display: flex; flex-wrap: wrap; row-gap: 6px; margin-top: 14px; }
.tasks-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 9px; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.tasks-footer .muted { font-weight: 400; font-size: 11px; }

@media (max-width: 640px) {
  .tasks-bar { grid-template-columns: auto auto minmax(0, 1fr); row-gap: 8px; }
  .tasks-bar .field.search { grid-column: 1 / -1; }
  .tasks-footer .muted { display: none; }
}

/* ------------------------------------------------------------------ focus metrics */

.focus-card { height: 100%; display: flex; flex-direction: column; }
.focus-card.compact { justify-content: center; }
.focus-headline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metric-tile { background: var(--raised); border: 1px solid var(--edge); color: var(--ink); min-width: 0; overflow: hidden; }
.metric-tile.inverse { background: var(--chrome); border-color: var(--chrome); color: var(--chrome-ink); }
.metric-row { display: flex; align-items: center; justify-content: center; min-width: 0; }
.metric-icon { flex: none; display: grid; background: var(--accent); color: var(--accent-ink); border: 1px solid var(--edge); }
.metric-tile.inverse .metric-icon { background: var(--surface); color: var(--ink); border-color: var(--chrome-ink); }
.metric-icon svg { width: 100%; height: 100%; display: block; }
.metric-number { flex: 1; text-align: center; font-family: var(--mono); font-weight: 900; line-height: 1; white-space: nowrap; }
.metric-caption { text-align: center; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; }
.metric-tile.inverse .metric-caption { color: var(--chrome-ink); opacity: .78; }
.meter { background: var(--raised); }
.meter i { display: block; height: 100%; background: var(--ink); }
.focus-caption { margin: 6px 0 0 1px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.focus-week { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 12px; }
.focus-day { display: flex; flex-direction: column; margin: 0 3px; min-height: 0; }
.focus-day.future { opacity: .35; }
.focus-bar { flex: 1; min-height: 30px; background: var(--raised); display: flex; align-items: flex-end; }
.focus-bar i { display: block; width: 100%; background: var(--ink); }
.focus-day > span { margin-top: 4px; padding: 2px 0; text-align: center; font-weight: 700; color: var(--muted); }
.focus-day > span.today { background: var(--ink); color: var(--paper); }
.focus-footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 9px; font-family: var(--mono); color: var(--muted); white-space: nowrap; }

/* ------------------------------------------------------------------ notes and post-its */

.notes { height: 100%; display: grid; grid-template-rows: auto 1fr auto; color: var(--note-ink); }
.notes-tools { display: flex; flex-wrap: wrap; margin: 0 0 6px; padding-bottom: 2px; border-bottom: 1px solid var(--note-line); }
.note-tool {
  width: 28px; height: 28px; margin: 0 4px 4px 0; padding: 0; display: inline-grid; place-items: center;
  background: var(--note-chrome); color: var(--note-ink); border: 1.5px solid var(--note-line);
  font: 600 12px var(--sans); cursor: pointer;
}
.note-tool.wide { width: 32px; }
.note-tool:hover { opacity: .78; }
.note-tool:active { transform: translate(2px, 2px); }
.note-paper { min-height: 0; background: var(--note-paper); border: 1px solid var(--note-line); }
.rich {
  min-height: 100%; padding: 12px 14px; outline: none; color: var(--note-ink); caret-color: var(--note-ink);
  font: 14px/1.38 var(--sans); overflow-wrap: anywhere;
}
.rich::selection, .rich *::selection { background: var(--note-selection); }
.rich p { margin: 0; }
.rich ul, .rich ol { margin: 0; padding-left: 26px; }
/* The checklist box lives in the line's left padding, drawn in the note's ink. */
.rich p.check { position: relative; padding-left: 23px; }
.rich p.check::before {
  content: ""; position: absolute; left: 0; top: .22em; width: 16px; height: 16px; box-sizing: border-box;
  border: 1.5px solid var(--note-ink); cursor: pointer;
}
.rich p.check[data-checked="true"] { color: var(--note-muted); text-decoration: line-through; }
.rich p.check[data-checked="true"]::before { background: var(--note-ink); }
.rich p.check[data-checked="true"]::after {
  content: "\2713"; position: absolute; left: 0; top: .22em; width: 16px; height: 16px; line-height: 16px; text-align: center;
  color: var(--note-paper); font: 900 11px var(--symbol); text-decoration: none; cursor: pointer;
}
.notes-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 6px 1px 0; }
.notes-status { font: 9px var(--mono); color: var(--note-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swatches { display: inline-flex; flex: none; }
.swatch-dot {
  width: 18px; height: 18px; margin-left: 3px; padding: 0; border: 1px solid var(--note-line, var(--line));
  background: transparent; color: var(--note-ink, var(--ink)); font: 700 12px var(--sans); cursor: pointer; line-height: 1;
}
.swatch-dot.selected { border-width: 2.5px; }

.float-note {
  position: fixed; width: 380px; height: 460px; min-width: 280px; min-height: 240px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px);
  display: grid; grid-template-rows: 42px 1fr auto; resize: both; overflow: hidden;
  background: var(--note-paper); border: 1px solid var(--note-line); color: var(--note-ink);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .2);
}
.float-note-head { display: flex; align-items: center; background: var(--note-chrome); cursor: move; touch-action: none; user-select: none; }
.float-note-head strong { flex: 1; min-width: 0; margin-left: 16px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.float-note-head .chrome-btn { font-size: 18px; padding: 2px 14px; color: var(--note-ink); }
.float-note .note-paper { border-left: 0; border-right: 0; }
.float-note-foot { display: flex; justify-content: flex-end; margin: 8px 12px 10px; }

.color-preview { padding: 14px 16px; margin-bottom: 16px; background: var(--note-paper); border: 1.5px solid var(--note-line); color: var(--note-ink); }
.color-preview strong { font-size: 14px; font-weight: 900; }
.color-preview p { font-size: 12px; margin: 6px 0 10px; }
.color-preview div { display: flex; align-items: center; }
.color-preview small { font: 10px var(--mono); color: var(--note-muted); margin-left: 10px; }
.hex-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.hex-row span { font: 700 11px var(--mono); }
.hex-row .field { width: 120px; margin: 0; padding: 6px 8px; font: 13px var(--mono); }
.shade-grid > div { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
.shade-cell { width: 46px; height: 30px; padding: 0; border: 1px solid var(--line); cursor: pointer; }
.shade-cell:hover { opacity: .78; }
.shade-presets { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 12px; }
.shade-presets .btn { height: 28px; padding: 0 10px; font-size: 9px; font-weight: 700; margin: 0; border-color: var(--line); }

.history { width: 580px; height: 660px; }
.history-body { padding: 18px 22px; display: flex; flex-direction: column; }
.history-list { flex: 1; min-height: 120px; border: 1px solid var(--edge); padding: 6px; background: var(--surface); }
.history-row {
  display: flex; width: 100%; text-align: left; padding: 9px 10px; margin-bottom: 6px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-70); color: var(--ink); font: inherit;
}
.history-row.closed { opacity: .85; }
.history-row.selected { background: var(--accent); border-color: var(--ink); color: var(--accent-ink); }
.history-row > i { width: 12px; flex: none; margin-right: 11px; border: 1px solid var(--edge); }
.history-row > span { min-width: 0; display: grid; }
.history-row strong { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-row small { font-size: 11px; color: var(--muted); margin-top: 2px; max-height: 32px; overflow: hidden; }
.history-row em { font: normal 700 9px var(--mono); color: var(--muted); margin-top: 5px; }
.history-row em.open { color: inherit; }
.history-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.history-foot .btn { font-size: 11px; padding: 8px 12px; }

/* ------------------------------------------------------------------ to do */

.todo { height: 100%; display: flex; flex-direction: column; margin: 6px 4px 2px; }
.todo-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.todo-counter { font: 700 13px var(--mono); }
.todo-meta { font-size: 10px; color: var(--muted); white-space: nowrap; }
.todo-meta.overdue { color: #B5493C; font-weight: 700; }
.todo-progress { height: 6px; margin: 8px 0; background: var(--line-45); }
.todo-progress i { display: block; height: 100%; background: var(--ink); }
.todo-add { display: flex; margin-bottom: 6px; }
.todo-add .field { flex: 1; min-width: 0; height: 32px; margin: 0 6px 0 0; padding: 0 9px; font-size: 12px; }
.todo-add .btn { height: 32px; font-size: 10px; padding: 6px 10px; }
.todo-hint { font-size: 9.5px; color: var(--muted); margin: -2px 0 6px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.todo-bar { display: flex; justify-content: space-between; gap: 4px; margin-bottom: 6px; }
.todo-bar > div { display: flex; flex-wrap: wrap; gap: 4px 0; }
.chip-btn { font-size: 9px; padding: 5px 7px; margin-right: 4px; }
.todo-list { flex: 1; min-height: 0; }
.todo-row {
  display: grid; grid-template-columns: 4px auto auto minmax(0, 1fr) auto auto; align-items: center;
  border: 1px solid var(--line-70); background: var(--surface); margin-bottom: 5px; cursor: pointer; user-select: none;
}
:root[data-theme="dark"] .todo-row { border-color: var(--edge); }
.todo-row.done { opacity: .6; }
.todo-row.lifted { opacity: .45; }
.todo-priority-bar { align-self: stretch; }
.todo-check {
  width: 26px; height: 26px; margin: 5px 6px 5px 5px; padding: 0; border: 1.5px solid var(--edge);
  font-size: 12px; cursor: pointer; display: grid; place-items: center;
}
.todo-bang { width: 20px; height: 26px; margin: 5px 4px 5px 0; padding: 0; border: 0; background: transparent; font: 900 13px var(--sans); cursor: pointer; }
.todo-title { font-size: 12px; margin: 8px 4px 8px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.todo-row.done .todo-title { text-decoration: line-through; color: var(--muted); }
.todo-due {
  margin: 5px 3px 5px 0; padding: 4px 5px; border: 0; background: transparent; color: inherit;
  font: 11px var(--sans); opacity: .3; cursor: pointer; white-space: nowrap;
}
.todo-due.set { opacity: 1; border: 1px solid var(--edge); font-size: 9px; padding: 4px 6px; }
.todo-due.overdue { background: rgba(181, 73, 60, .15); color: #B5493C; font-weight: 700; }
.todo-more { width: 22px; height: 26px; margin: 5px 4px 5px 0; padding: 0; border: 0; background: transparent; color: inherit; font-size: 13px; cursor: pointer; }
.drop-line { height: 3px; background: var(--ink); margin: 0 0 2px; }

/* ------------------------------------------------------------------ habits */

.mono { font-family: var(--mono); }
.habits { height: 100%; display: flex; flex-direction: column; padding: 8px 10px; }
.habits.strip { padding: 4px 6px; justify-content: center; }
.habits-strip-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.habits-strip-row { display: flex; align-items: center; min-height: 0; }
.habits-summary { font: 700 12.5px var(--mono); }
.habits-chips { display: flex; overflow-x: auto; }
.habit-chip {
  flex: none; padding: 0; margin-right: 3px; font-weight: 700; cursor: pointer;
  background: var(--surface); color: var(--muted); border: 1px solid var(--muted);
}
.habit-chip.due { color: var(--ink); border: 1.4px solid var(--line); }
.habit-chip.done { background: var(--ink); color: var(--paper); border-color: var(--line); }
.habit-award {
  display: flex; align-items: center; gap: 7px; padding: 5px 8px; margin-bottom: 6px; border: 0; cursor: pointer;
  background: var(--ink); color: var(--paper); font: 700 9.5px var(--sans); text-align: left;
}
.habit-award b { font-size: 11px; }
.habit-stats { margin-bottom: 8px; }
.habit-stats-head { display: flex; justify-content: space-between; align-items: flex-end; }
.habit-stats-head b.mono { font-size: 19px; font-weight: 900; }
.habit-stats-head small { font-size: 9px; font-weight: 700; color: var(--muted); margin: 0 0 3px 7px; }
.habit-level { display: grid; justify-items: end; }
.habit-level b { font-size: 11px; font-weight: 900; }
.habit-level small { margin: 0 !important; }
.habit-meter { background: var(--raised); }
.habit-meter i { display: block; height: 100%; background: var(--ink); }
.habit-blocks { display: flex; gap: 2px; height: 7px; margin-top: 8px; }
.habit-blocks i { flex: 1; background: var(--raised); }
.habit-blocks i.on { background: var(--ink); }
.habit-xp { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-top: 6px; }
.habit-xp span { font-size: 8.5px; white-space: nowrap; }
.habit-week { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; margin-bottom: 6px; }
.habit-week > span { font-size: 9.5px; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.habit-chip-btn {
  width: 24px; height: 22px; padding: 0; margin-left: 3px; font: 700 9.5px var(--sans); cursor: pointer;
  background: var(--surface); color: var(--ink); border: 1.5px solid var(--edge);
}
.habit-chip-btn:first-child { margin-left: 0; }
.habit-chip-btn:disabled { opacity: .4; cursor: default; }
.habit-track { display: grid; align-items: center; }
.habit-track.header { margin-bottom: 3px; padding-right: 9px; }
.habit-col-title { font-size: 8.5px; font-weight: 700; color: var(--muted); margin: 0 4px 0 2px; }
.habit-col-title.center { text-align: center; margin: 0; font-size: 8px; }
.habit-day { display: grid; justify-items: center; padding: 2px 0; margin: 0 1px; color: var(--muted); }
.habit-day.today { background: var(--ink); color: var(--paper); }
.habit-day b { font-weight: 700; line-height: 1.2; }
.habit-day small { line-height: 1.2; }
.habit-list { flex: 1; min-height: 0; }
.habit-row { border-bottom: 1px solid var(--muted); }
.habit-row:hover { background: var(--paper); }
.habit-name {
  display: flex; align-items: center; min-width: 0; margin: 0 4px 0 2px; padding: 0; border: 0; background: transparent;
  color: var(--ink); cursor: pointer; text-align: left; font: 600 12px var(--sans);
}
.habit-name span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.habit-name small { flex: none; margin: 1px 0 0 6px; color: var(--muted); }
.habit-cell-slot { display: grid; place-items: center; }
.habit-cell {
  padding: 0; margin: 0 1px; display: grid; place-items: center; cursor: pointer;
  background: var(--surface); border: 1px solid var(--muted);
}
.habit-cell.due { border-color: var(--line); border-width: 1.2px; }
.habit-cell.today { background: var(--paper); border-width: 2px; }
.habit-cell.done { background: var(--ink); }
.habit-cell:disabled { cursor: default; }
.gauge { display: flex; align-items: flex-end; }
.gauge i { display: block; width: 100%; background: var(--ink); }
.habit-number { text-align: center; font: 700 12px var(--mono); }
.habit-number.light { font-weight: 400; }
.habit-menu { width: 22px; margin-left: 2px; padding: 0; border: 0; background: transparent; color: inherit; font-size: 13px; cursor: pointer; }
.habit-empty { margin: 12px 2px 10px; }
.habit-empty strong { font-size: 13px; font-weight: 900; }
.habit-empty p { font-size: 10.5px; color: var(--muted); margin: 6px 0 0; }
.habit-empty small { display: block; font-size: 8.5px; font-weight: 700; color: var(--muted); margin-top: 12px; }
.habit-map { margin-top: 10px; }
.habit-map-body { display: flex; margin-top: 5px; overflow: hidden; }
.habit-map-body i { display: flex; align-items: flex-end; justify-content: center; box-sizing: border-box; border: .8px solid var(--muted); background: var(--surface); }
.habit-map-body i.full { background: var(--ink); }
.habit-map-body i.today { border: 1.4px solid var(--line); }
.habit-composer { display: flex; margin-top: 8px; }
.habit-composer .field { flex: 1; min-width: 0; margin: 0 6px 0 0; padding: 0 8px 0 9px; font-size: 12px; }
.habit-composer .btn { font-size: 11px; }
.habit-footer { margin-top: 8px; }
.habit-awards { display: flex; flex-wrap: wrap; }
.habit-awards span { padding: 2px 5px; margin: 0 4px 4px 0; border: 1px solid var(--muted); font-size: 8px; font-weight: 700; color: var(--muted); }
.habit-awards em { font-style: normal; font-size: 8.5px; color: var(--muted); }
.habit-total { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; font-size: 8.5px; color: var(--muted); }
.habit-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.habit-tiles > div { border: 1.5px solid var(--edge); padding: 10px 12px; display: grid; }
.habit-tiles b { font-size: 22px; font-weight: 900; }
.habit-tiles small { font-size: 8.5px; font-weight: 700; color: var(--muted); }
.cadence-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 4px 0 6px; }
.cadence-days .btn { margin: 0; padding: 8px 0; font-size: 12px; }
.cadence-times { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; }
.cadence-times .btn { width: 40px; margin: 0; padding: 6px 0; }
.cadence-times b { font-size: 15px; font-weight: 900; }
.heatmap { overflow-x: auto; }
.heatmap-months { display: flex; margin-bottom: 3px; }
.heatmap-months span { flex: none; font-size: 7.5px; font-weight: 700; color: var(--muted); }
.heatmap-months span:first-child { width: 16px; }
.heatmap-body { display: flex; }
.heatmap-letters { display: grid; margin-right: 6px; width: 10px; }
.heatmap-letters span { font-size: 8px; color: var(--muted); text-align: right; }
.heat-cell { padding: 0; display: flex; align-items: flex-end; justify-content: center; background: var(--surface); border: 1px solid var(--muted); cursor: pointer; }
.heat-cell.due { border-color: var(--line); }
.heat-cell.done { background: var(--ink); }
.heat-cell.today { border-width: 2px; }
.heat-cell:disabled { cursor: default; }

/* ------------------------------------------------------------------ calendar */
/* --s scales content with the card; --c scales chrome more slowly, as CalendarWidget.C does. */

.calendar { height: 100%; display: flex; flex-direction: column; margin: 4px 4px 2px; min-width: 0; }
.cal-toolbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; margin: 2px 0 6px; }
.cal-nav, .cal-views { display: flex; align-items: center; }
.cal-small { font-size: calc(var(--c) * 10px); padding: calc(var(--c) * 5px) calc(var(--c) * 8px); min-width: calc(var(--c) * 28px); margin: 0 calc(var(--c) * 4px) 0 0; }
.cal-period { font: 900 calc(var(--c) * 12px) var(--mono); margin: 0 calc(var(--c) * 8px) 0 calc(var(--c) * 10px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-view { font-size: calc(var(--c) * 9px); padding: calc(var(--c) * 6px) calc(var(--c) * 8px); margin: 0 calc(var(--c) * 4px) 0 0; }
.cal-view:last-child { margin-right: 0; }
.cal-summary { font: 700 calc(var(--c) * 9px) var(--mono); color: var(--muted); margin-bottom: calc(var(--c) * 6px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-quick { display: flex; margin-bottom: calc(var(--s) * 6px); }
.cal-quick .field { flex: 1; min-width: 0; margin: 0 6px 0 0; height: calc(var(--c) * 32px); padding: 0 calc(var(--c) * 9px); font-size: calc(var(--c) * 12px); }
.cal-plus, .cal-more { width: calc(var(--c) * 34px); height: calc(var(--c) * 32px); padding: 0; }
.cal-plus { font-size: calc(var(--c) * 16px); margin-right: calc(var(--c) * 5px); }
.cal-more { font-size: calc(var(--c) * 14px); }
.cal-hint { font-size: calc(var(--c) * 9px); color: var(--muted); margin: 0 0 5px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-surface { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cal-month { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-bottom: calc(var(--s) * 3px); }
.cal-weekdays span { text-align: center; font: 700 calc(var(--s) * 9px) var(--mono); color: var(--muted); }
.cal-grid { flex: 1; min-height: 60px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); }
.cal-cell { border-right: 1px solid var(--line-45); border-bottom: 1px solid var(--line-45); padding: calc(var(--s) * 2px) calc(var(--s) * 3px); overflow: hidden; cursor: pointer; min-width: 0; }
.cal-cell.picked { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.cal-number { display: flex; justify-content: space-between; align-items: center; }
.cal-number b { font: 700 calc(var(--s) * 11px) var(--mono); padding: calc(var(--s) * 1px) calc(var(--s) * 3px); }
.cal-number b.today { background: var(--ink); color: var(--paper); }
.cal-number small { font: calc(var(--s) * 8px) var(--mono); color: var(--muted); }
.cal-chip {
  margin-top: calc(var(--s) * 2px); padding: calc(var(--s) * 1px) calc(var(--s) * 2px) calc(var(--s) * 1px) calc(var(--s) * 3px);
  border-left: calc(var(--s) * 2.5px) solid; font-size: calc(var(--s) * 9px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.cal-chip.done { color: var(--muted); text-decoration: line-through; }
.cal-more-count { font-size: calc(var(--s) * 8px); color: var(--muted); margin: calc(var(--s) * 1px) 0 0 calc(var(--s) * 3px); }
.cal-dots { display: flex; flex-wrap: wrap; gap: calc(var(--s) * 3px); margin: calc(var(--s) * 3px) 0 0 calc(var(--s) * 2px); }
.cal-dots i { width: calc(var(--s) * 5px); height: calc(var(--s) * 5px); border-radius: 50%; }
.cal-panel { margin-top: calc(var(--s) * 8px); }
.cal-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cal-panel-head span { font: 900 calc(var(--s) * 10px) var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-panel-head .btn { font-size: calc(var(--s) * 9px); padding: calc(var(--s) * 5px) calc(var(--s) * 8px); }
.cal-empty { font-size: calc(var(--s) * 11px); color: var(--muted); margin: calc(var(--s) * 6px) 0 calc(var(--s) * 4px) calc(var(--s) * 2px); }
.cal-day-heading { font: 900 calc(var(--s) * 10px) var(--mono); color: var(--muted); margin-bottom: calc(var(--s) * 5px); }
.cal-day-heading.today { color: var(--ink); }
.cal-row {
  display: grid; grid-template-columns: calc(var(--s) * 4px) calc(var(--s) * 64px) minmax(0, 1fr) auto; align-items: center;
  border: 1px solid var(--line-70); background: var(--surface); margin-bottom: calc(var(--s) * 5px); cursor: pointer;
}
.cal-row.running { border-color: var(--line); }
.cal-row > i { align-self: stretch; }
.cal-row-clock { display: grid; margin: calc(var(--s) * 6px) calc(var(--s) * 4px) calc(var(--s) * 6px) calc(var(--s) * 7px); }
.cal-row-clock b { font: 700 calc(var(--s) * 12px) var(--mono); }
.cal-row-clock small { font-size: calc(var(--s) * 8px); color: var(--muted); }
.cal-row-text { display: grid; min-width: 0; margin: calc(var(--s) * 6px) calc(var(--s) * 6px) calc(var(--s) * 6px) calc(var(--s) * 2px); }
.cal-row-text b { font-size: calc(var(--s) * 12px); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-row-text b.done { text-decoration: line-through; }
.cal-row-text small { font-size: calc(var(--s) * 9px); color: var(--muted); margin-top: calc(var(--s) * 2px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-row-actions { display: flex; align-items: center; margin-right: calc(var(--s) * 4px); }
.cal-check, .cal-drop { width: calc(var(--s) * 26px); height: calc(var(--s) * 26px); padding: 0; cursor: pointer; }
.cal-check { margin-right: calc(var(--s) * 3px); font-size: calc(var(--s) * 12px); background: var(--surface); color: var(--muted); border: 1.5px solid var(--edge); }
.cal-check.done { background: var(--ink); color: var(--paper); }
.cal-drop { font-size: calc(var(--s) * 14px); border: 0; background: transparent; color: var(--ink); }
.cal-week { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cal-week-head, .cal-week-allday, .cal-week-grid { display: grid; }
.cal-week-day {
  margin: 0 calc(var(--s) * 1px) calc(var(--s) * 3px); padding: calc(var(--s) * 3px) 0; border: 0; background: transparent; color: var(--ink);
  font: 700 calc(var(--s) * 10px) var(--mono); cursor: pointer; white-space: nowrap; overflow: hidden;
}
.cal-week-day.today { background: var(--ink); color: var(--paper); }
.cal-week-allday { margin-bottom: calc(var(--s) * 3px); }
.cal-week-allday > span { font: calc(var(--s) * 8px) var(--mono); color: var(--muted); align-self: center; }
.cal-week-allday > div { margin: 0 calc(var(--s) * 1px); min-width: 0; }
.cal-week-scroll { flex: 1; min-height: 0; }
.cal-hours { position: relative; overflow: hidden; }
.cal-hours span { position: absolute; left: 0; right: calc(var(--s) * 7px); text-align: right; font: calc(var(--s) * 9px) var(--mono); color: var(--muted); }
.cal-column {
  position: relative; overflow: hidden; min-width: 0;
  background-image: linear-gradient(to bottom, var(--line-45) 1px, transparent 1px);
}
.cal-column.today { background-color: color-mix(in srgb, var(--accent) 16%, transparent); }
.cal-block {
  position: absolute; overflow: hidden; border-left: calc(var(--s) * 3px) solid; cursor: pointer;
  padding: calc(var(--s) * 2px) calc(var(--s) * 3px) calc(var(--s) * 2px) calc(var(--s) * 4px); display: grid; align-content: start;
}
.cal-block b { font-size: calc(var(--s) * 10px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-block.done b { color: var(--muted); text-decoration: line-through; }
.cal-block small { font: calc(var(--s) * 9px) var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-now { position: absolute; left: 0; right: 0; height: calc(var(--s) * 2px); background: #B5493C; z-index: 40; }
.cal-agenda { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cal-agenda-tools { display: flex; margin-bottom: calc(var(--s) * 6px); }
.cal-agenda-tools .field { flex: 1; min-width: 0; margin: 0 calc(var(--s) * 6px) 0 0; height: calc(var(--s) * 28px); padding: 0 calc(var(--s) * 8px); font-size: calc(var(--s) * 11px); }
.cal-agenda-tools .btn { font-size: calc(var(--s) * 9px); padding: calc(var(--s) * 5px) calc(var(--s) * 8px); }
.cal-agenda-list { flex: 1; min-height: 0; }

.agenda-editor { width: 560px; height: 780px; }
.agenda-editor-body { min-height: 0; display: flex; flex-direction: column; }
.agenda-form { flex: 1; min-height: 0; padding: 20px 24px 16px; }
.agenda-form .field { margin: 4px 0 6px; font-size: 13px; padding: 7px 9px; }
.form-label { font: 700 9px var(--mono); color: var(--muted); margin-top: 8px; }
.form-row { display: flex; align-items: center; margin-bottom: 8px; }
.form-row.wrap { flex-wrap: wrap; margin-bottom: 4px; }
.form-times { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 4px; }
.form-times > span { font-size: 11px; margin-bottom: 12px; }
.form-check { display: flex; align-items: center; gap: 9px; font-size: 12px; margin: 2px 0 6px; cursor: pointer; }
.form-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.form-check span { width: 17px; height: 17px; border: 1.5px solid var(--edge); background: var(--surface); display: grid; place-items: center; font: 700 11px var(--sans); }
.form-check input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.form-check input:checked + span::after { content: "\2713"; }
.agenda-swatch { width: 38px; height: 28px; padding: 0; margin: 0 6px 0 0; border: 1px solid var(--ink); color: #fff; font-size: 13px; }
.agenda-swatch.chosen { border-width: 3.5px; }
.agenda-preview { font: 700 11px var(--mono); margin: 6px 0 0; }
.agenda-footer { display: flex; align-items: center; padding: 0 24px 20px; }

/* ------------------------------------------------------------------ report */

.report { width: 820px; height: min(880px, 70vh); min-height: min(540px, calc(100vh - 32px)); border-width: 2px; }
.report-body { min-height: 0; display: flex; flex-direction: column; padding: 18px; }
.report-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.report-title h2 { font-size: 23px; font-weight: 900; margin: 0; }
.report-title small { font-size: 9px; }
.report-actions { display: flex; flex-wrap: wrap; gap: 4px 0; }
.report-actions .btn { font-size: 10px; padding: 7px 10px; }
.report-nav { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.report-tabs, .report-periods { display: grid; grid-auto-flow: column; }
.report-tabs { grid-auto-columns: 150px; }
.report-periods { grid-auto-columns: 80px; }
.report-nav .btn { font-size: 10px; padding: 8px 10px; margin-right: 5px; }
.report-periods .btn.last { margin-right: 0; }
.report-status { font: 10px var(--mono); color: var(--muted); margin: -8px 0 10px; }
.report-content { flex: 1; min-height: 0; padding-right: 4px; }
.report-period { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; margin: 4px 0 2px; }
.report-period b { text-align: center; font-size: 14px; }
.report-period .btn { font-size: 10px; padding: 8px 10px; }
.report-hero { background: var(--chrome); color: var(--chrome-ink); padding: 18px 22px; margin: 10px 0 12px; display: grid; }
.report-hero > small { font-size: 10px; font-weight: 700; opacity: .65; }
.report-hero > b { font-size: clamp(30px, 7vw, 52px); font-weight: 900; margin-top: 2px; white-space: nowrap; overflow: hidden; line-height: 1.1; }
.report-hero > p { font-size: 12px; opacity: .7; margin: 8px 0 0; }
.report-rank { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.report-rank > span { display: flex; align-items: center; min-width: 0; }
.report-rank em { font-style: normal; background: var(--accent); color: var(--accent-ink); padding: 5px 10px; font-size: 11px; font-weight: 900; white-space: nowrap; }
.report-rank small { font-size: 9px; opacity: .55; margin-left: 9px; white-space: nowrap; }
.report-rank > small { font-size: 10px; opacity: .7; overflow: hidden; text-overflow: ellipsis; }
.report-rank-track { height: 6px; margin-top: 10px; background: rgba(240, 240, 235, .24); }
.report-rank-track i { display: block; height: 100%; background: var(--accent); }
.report-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 4px; }
.report-tile { display: grid; padding: 11px 13px; background: var(--surface); border: 1px solid var(--line-70); min-width: 0; }
.report-tile.accent { border: 1.5px solid var(--line); }
.report-tile b { font-size: 26px; font-weight: 900; white-space: nowrap; overflow: hidden; }
.report-tile small { font-size: 8.5px; font-weight: 700; color: var(--muted); margin-top: 5px; }
.report-tile em { font-style: normal; font-size: 8.5px; color: var(--muted); opacity: .8; margin-top: 2px; white-space: nowrap; }
.report-section { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 10px 0 8px; }
.report-section b { font-size: 15px; font-weight: 900; }
.report-section small { font-size: 9px; text-align: right; }
.report-rhythm { display: grid; grid-template-columns: minmax(0, 1fr) 214px; gap: 12px; }
.report-mini { font: 700 8.5px var(--mono); color: var(--muted); margin: 8px 0 5px; }
.report-profile { display: block; width: 100%; }
.report-profile .track { fill: var(--line-45); }
.report-profile .bar { fill: var(--ink); opacity: .41; }
.report-profile .peak { fill: var(--ink); }
.report-profile-labels { display: grid; margin-top: -13px; height: 13px; }
.report-profile-labels span { text-align: center; font: 700 8px var(--mono); color: var(--muted); white-space: nowrap; }
.report-callout { display: grid; padding: 9px 12px; margin-bottom: 6px; background: var(--raised); }
.report-callout small { font-size: 8.5px; font-weight: 700; color: var(--muted); }
.report-callout b { font-size: 19px; font-weight: 900; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report-chart { background: var(--surface); border: 1px solid var(--line-45); padding: 12px 12px 8px 10px; margin: 10px 0; }
.report-empty { height: 176px; display: grid; place-content: center; text-align: center; gap: 6px; }
.report-empty b { font-size: 13px; }
.report-empty small { font-size: 11px; color: var(--muted); }
.report-bars { display: grid; grid-template-columns: 44px minmax(0, 1fr); height: 210px; }
.report-axis { display: grid; grid-template-rows: 22px repeat(4, 1fr) 0 34px; font: 9px var(--mono); color: var(--muted); }
.report-axis span { line-height: 0; }
.report-axis span:first-child { line-height: 1; font-weight: 700; }
.report-plot { position: relative; display: flex; margin: 22px 0 34px; }
.report-gridline { position: absolute; left: 0; right: 0; height: 0; border-top: .7px solid rgba(102, 105, 94, .27); }
.report-bucket { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; cursor: default; }
.report-stack { width: 62%; max-width: 46px; height: 100%; display: flex; flex-direction: column-reverse; }
.report-stack i { display: block; width: 100%; outline: .45px solid var(--ink); }
.report-bucket > span { position: absolute; bottom: -26px; left: 0; font: 8px var(--mono); color: var(--muted); white-space: nowrap; }
.report-hover {
  position: absolute; bottom: 60%; left: 60%; z-index: 5; min-width: 160px; max-width: 245px; display: grid; gap: 2px;
  padding: 10px 12px; background: var(--surface); border: 1.5px solid var(--ink); font-size: 10px; font-weight: 700; pointer-events: none;
}
.report-hover.left { left: auto; right: 60%; }
.report-hover span { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report-range { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 18px; }
.report-range b { font-size: 30px; font-weight: 900; }
.report-range small { font-size: 9px; font-weight: 700; color: var(--muted); margin: 0 0 7px 9px; }
.report-range > span:last-child { font-size: 11px; margin-bottom: 7px; }
.report-project { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; margin-bottom: 4px; padding: 0 11px; background: rgba(23, 25, 22, .09); }
:root[data-theme="dark"] .report-project { background: rgba(138, 144, 128, .09); }
.report-project .fill { position: absolute; left: 0; top: 0; bottom: 0; opacity: .32; }
.report-project .edge { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.report-project b { position: relative; flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report-project span { position: relative; font-size: 13px; font-weight: 700; }
.report-project .share { min-width: 44px; text-align: right; font-weight: 900; }
.report-filters { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 8px; margin: 12px 0 10px; }
.report-filters .field { margin: 0; min-height: 38px; }
.report-day { font-size: 11px; font-weight: 700; margin-bottom: 6px; }
.report-session { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto auto; align-items: center; min-height: 62px; margin-bottom: 5px; background: var(--surface); }
.report-session > b { text-align: center; }
.report-session > div { display: grid; margin: 7px 8px; min-width: 0; }
.report-session strong { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report-session small { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report-session > span { font-weight: 700; margin: 0 8px 0 4px; }

@media (max-width: 640px) {
  .report-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-rhythm { grid-template-columns: 1fr; }
  .report-tabs { grid-auto-columns: auto; }
  .report-periods { grid-auto-columns: auto; }
  .report-filters { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ memento mori */

.memento { height: 100%; display: flex; flex-direction: column; font-family: var(--mono); min-width: 0; }
.memento.setup { justify-content: center; }
.memento.setup small, .memento-head > small { font-weight: 700; color: var(--muted); font-size: 11px; }
.memento.setup b { font-weight: 900; margin: 4px 0 6px; }
.memento.setup p { color: var(--muted); margin: 0; }
.memento.compact { justify-content: center; }
.memento-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.memento-strip { display: flex; align-items: center; gap: 8px; }
.memento-strip span { display: grid; min-width: 0; }
.memento-strip small { color: var(--muted); font-weight: 700; }
.memento-side { display: flex; gap: 10px; align-items: flex-start; margin-top: 2px; }
.memento-primary { flex: 1; min-width: 0; display: grid; }
.memento-primary b { font-weight: 900; line-height: 1.1; white-space: nowrap; overflow: hidden; }
.memento-primary small { font-weight: 700; color: var(--muted); }
.memento-primary em { font-style: normal; font-weight: 700; margin-top: 4px; }
.memento-head p { font-size: 10px; color: var(--muted); margin: 4px 0 0; }
.memento-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; flex: none; }
.memento-tile { display: grid; background: var(--raised); border: 1.5px solid var(--edge); min-width: 0; }
.memento-tile.mini { border-width: 1px; padding: 3px 5px; }
.memento-tile b { font-weight: 900; white-space: nowrap; overflow: hidden; line-height: 1.15; }
.memento-tile small { font-weight: 700; color: var(--muted); margin-top: 2px; }
.memento-board { flex: 1; min-height: 0; position: relative; cursor: pointer; }
.memento-board canvas { position: absolute; inset: 0; display: block; }
.memento-foot { margin: 8px 0 0; color: var(--muted); font-weight: 600; overflow: hidden; }

/* ------------------------------------------------------------------ finance */

.finance { height: 100%; display: flex; flex-direction: column; margin-top: 4px; font-family: var(--mono); min-width: 0; }
.fin-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; min-height: 36px; margin-top: 2px; }
.fin-nav { width: 30px; height: 30px; padding: 0; border: 2px solid transparent; background: transparent; color: var(--ink); font: 600 16px var(--mono); cursor: pointer; }
.fin-nav:hover { border-color: var(--ink); }
.fin-month { font-size: 13px; font-weight: 900; margin: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-head-net { font-weight: 600; margin-right: 6px; white-space: nowrap; }
.fin-header > .fin-segment { margin-right: 4px; }
.fin-segment { display: inline-flex; }
.fin-segment button {
  margin: 0 1px; min-height: 26px; border: 2px solid var(--ink); background: var(--surface); color: var(--ink);
  font-family: var(--mono); font-weight: 500; cursor: pointer; white-space: nowrap;
}
.fin-segment button.on { background: var(--ink); color: var(--paper); font-weight: 600; }
.fin-toolbar { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 4px 0 2px; }
.fin-toolbar.split { justify-content: space-between; }
.fin-pills { display: inline-flex; border: 2px solid var(--ink); background: var(--surface); padding: 2px; }
.fin-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.finance.wide .fin-main { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.15fr); }
.fin-side { flex: none; }
.finance:not(.wide) .fin-side { overflow: visible; }
.finance.wide .fin-side { min-height: 0; }
.fin-ledger { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.finance.wide .fin-ledger { border-left: 1px solid var(--ink); padding-left: 12px; }
.fin-list { flex: 1; min-height: 0; }
.fin-plate { background: var(--surface); border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: 10px 12px 12px; margin: 8px 4px 6px 0; }
.fin-plate-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); }
.fin-plate-top em { font-style: normal; margin-left: 8px; }
.fin-rate { display: inline-flex; align-items: center; white-space: nowrap; }
.fin-link { border: 0; background: transparent; color: var(--muted); font: 12px var(--mono); cursor: pointer; padding: 0; }
.fin-refresh { width: 22px; height: 22px; margin-left: 2px; padding: 0; border: 2px solid var(--ink); background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
.fin-net { display: flex; align-items: flex-end; gap: 8px; margin: 2px 0; min-width: 0; }
.fin-net b { font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; }
.fin-net small { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 3px; }
.fin-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.fin-chip { border: 2px solid var(--ink); padding: 6px 8px; display: grid; min-width: 0; overflow: hidden; }
.fin-chip small { font-size: 11px; font-weight: 500; margin-bottom: 2px; }
.fin-chip b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-track { height: 8px; margin-top: 12px; background: var(--expense); overflow: hidden; }
.fin-track i { display: block; height: 100%; background: var(--income); }
.fin-line { font-size: 12px; color: var(--muted); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 3px; font-size: 12px; color: var(--muted); }
.fin-foot span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-unpaid { border: 2px solid var(--ink); padding: 3px 8px; font: 600 11px var(--mono); cursor: pointer; white-space: nowrap; }
.fin-chart { margin: 10px 0 2px; display: flex; flex-direction: column; }
.fin-chart-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.fin-chart-head > b { font-size: 12px; font-weight: 900; }
.fin-chart-body { display: grid; gap: 8px; }
.fin-chart-body.beside { grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.fin-pie path, .fin-pie circle { stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: miter; }
.fin-legend { display: grid; gap: 5px; min-width: 0; }
.fin-legend > small { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 1px; }
.fin-legend > b { font-size: 12px; font-weight: 900; }
.fin-legend div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; font-size: 12px; }
.fin-legend i { width: 12px; height: 12px; border: 2px solid var(--ink); margin-right: 8px; }
.fin-legend span { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-legend div b { font-weight: 900; margin: 0 8px; }
.fin-legend em { font-style: normal; font-weight: 700; color: var(--muted); }
.fin-empty { font: 12px var(--sans); color: var(--muted); margin: 10px 0 8px; }
.fin-day { font-size: 12px; font-weight: 600; color: var(--muted); margin: 10px 0 2px; }
.fin-day.first { margin-top: 4px; }
.fin-row { display: flex; align-items: center; gap: 4px; padding: 7px 0; border-bottom: 1.5px solid var(--ink); cursor: pointer; }
.fin-row.recurring { align-items: stretch; }
.fin-row-text { flex: 1; min-width: 0; display: grid; margin-right: 8px; }
.fin-row-text b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-row-text small { font-size: 12px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-row-side { display: grid; justify-items: end; gap: 2px; }
.fin-row-side > span { display: flex; align-items: center; font-size: 11px; color: var(--muted); }
.fin-amount { border: 2px solid var(--ink); padding: 1px 6px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.fin-x { width: 22px; height: 22px; margin-left: 4px; padding: 0; border: 0; background: transparent; color: var(--muted); font: 14px var(--mono); cursor: pointer; }
.fin-paid { border: 2px solid var(--ink); padding: 3px 8px; font: 900 11px var(--mono); cursor: pointer; }
.fin-composer { margin: 4px 0 2px; }
.fin-entry { display: flex; align-items: center; background: var(--surface); border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: 4px; margin: 0 4px 4px 0; }
.fin-code { min-width: 52px; height: 32px; padding: 0 10px; border: 2px solid var(--ink); background: var(--surface); color: var(--ink); font: 600 12px var(--mono); cursor: pointer; }
.fin-entry input { flex: 1; min-width: 0; height: 36px; margin: 0 4px 0 2px; padding: 0 8px; border: 0; background: transparent; color: var(--ink); font: 14px var(--mono); outline: none; }
.fin-add { width: 36px; height: 36px; padding: 0; border: 2px solid var(--ink); background: var(--ink); color: var(--paper); font: 600 20px var(--mono); cursor: pointer; }
.fin-hint { font-size: 12px; color: var(--muted); margin: 4px 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-editor { display: grid; gap: 8px; font-family: var(--mono); }
.fin-editor .field { margin: 0; font-family: var(--mono); }
.fin-editor-row { display: flex; gap: 6px; align-items: center; }
.fin-editor-row .field { flex: 1; }
.fin-editor-row .btn, .fin-editor-cats .btn { font: 700 11px var(--mono); padding: 6px 10px; margin: 0; }
.fin-editor-cats { display: flex; flex-wrap: wrap; gap: 6px; }

/* ------------------------------------------------------------------ mancuernas */
.workout { position: absolute; inset: 0; display: flex; flex-direction: column; background: #000; color: #fff; overflow: hidden; font-size: var(--w-body); }
.workout button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.workout .w-dim { color: #b3b3b3; }
.workout .w-header { flex: none; height: var(--w-nav); display: grid; grid-template-columns: var(--w-nav) 1fr var(--w-nav); align-items: center; }
.workout .w-header > span { display: flex; justify-content: center; }
.workout .w-titles { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.workout .w-titles b { font-size: var(--w-sub); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.workout .w-titles small { font-size: var(--w-small); color: #b3b3b3; margin-top: 2px; }
.workout .w-icon { width: calc(var(--w-icon) * 1.7); height: calc(var(--w-icon) * 1.7); border-radius: 50%; font-size: var(--w-icon); line-height: 1; display: grid; place-items: center; }
.workout .w-icon:hover { background: rgba(255,255,255,.12); }
.workout .w-icon.tiny { width: 30px; height: 30px; font-size: 18px; border: 1px solid #444; }
.workout .w-icon.blue { color: #0a84ff; }
.workout .w-tabs { flex: none; order: 9; height: var(--w-tab); display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid #1c1c1c; }
.workout .w-tabs button { font-size: calc(var(--w-icon) * .8); color: #6b6b6b; }
.workout .w-tabs button.on { color: #fff; }
.workout .w-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.workout .w-photo { position: relative; flex: none; width: 100%; overflow: hidden; background: #111; }
.workout .w-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.workout .w-photo > i { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.72)); }
.workout .w-card { cursor: pointer; border-bottom: 2px solid #000; }
.workout .w-card:hover img { filter: brightness(1.12); }
.workout .w-card-text { position: absolute; left: var(--w-pad); right: var(--w-pad); bottom: calc(var(--w-pad) * .8); display: flex; flex-direction: column; }
.workout .w-card-text b { font-size: var(--w-title); font-weight: 400; line-height: 1.1; }
.workout .w-card-text small { font-size: var(--w-small); color: #d0d0d0; margin-top: 4px; }
.workout .w-center { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--w-sub); }
.workout .w-banner { display: grid; place-items: center; align-content: center; gap: 8px; background: #111; cursor: pointer; border-bottom: 1px solid #1c1c1c; }
.workout .w-banner i { font-style: normal; font-size: calc(var(--w-icon) * 1.6); }
.workout .w-banner b { font-size: var(--w-sub); font-weight: 600; }
.workout .w-banner:hover { background: #181818; }
.workout .w-total { font-size: var(--w-title); padding: var(--w-pad); }
.workout .w-day { font-size: var(--w-small); padding: 12px var(--w-pad) 6px; text-transform: capitalize; }
.workout .w-log, .workout .w-move { display: flex; align-items: center; gap: 12px; padding: 8px var(--w-pad); }
.workout .w-move.pick { cursor: pointer; }
.workout .w-move.pick:hover { background: #121212; }
.workout .w-thumb { flex: none; border-radius: 8px; overflow: hidden; display: block; }
.workout .w-thumb .w-photo > i { display: none; }
.workout .w-move-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.workout .w-move-text b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workout .w-move-text small { font-size: var(--w-small); color: #b3b3b3; margin-top: 2px; }
.workout .w-move-kg { flex: none; font-size: var(--w-small); font-weight: 500; }
.workout .w-log-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-size: var(--w-small); }
.workout .w-log-right small { color: #b3b3b3; }
.workout .w-progress { padding: var(--w-pad); display: flex; flex-direction: column; gap: 12px; }
.workout .w-bars { display: grid; grid-template-columns: repeat(8, 1fr); align-items: end; gap: 6px; }
.workout .w-bars i { display: block; background: #fff; border-radius: 3px 3px 0 0; }
.workout .w-metric { display: flex; align-items: baseline; gap: 8px; border-top: 1px solid #1c1c1c; padding-top: 10px; }
.workout .w-metric b { font-size: var(--w-title); font-weight: 300; }
.workout .w-metric small { color: #b3b3b3; }
.workout .w-settings, .workout .w-form { padding: 0 var(--w-pad) var(--w-pad); display: flex; flex-direction: column; gap: 10px; }
.workout .w-settings > small, .workout .w-form > small { margin-top: 10px; font-size: var(--w-small); }
.workout .w-setting, .workout .w-serie { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.workout .w-setting > span:last-child, .workout .w-serie > span:last-child { display: flex; align-items: center; gap: 10px; }
.workout .w-setting b, .workout .w-serie b { min-width: 52px; text-align: center; font-weight: 500; }
.workout input[type="range"] { accent-color: #fff; width: 100%; }
.workout .w-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.workout .w-check input { accent-color: #0a84ff; width: 18px; height: 18px; }
.workout .w-units { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #333; border-radius: 10px; overflow: hidden; }
.workout .w-units button { padding: 10px; color: #b3b3b3; }
.workout .w-units button.on { background: #fff; color: #000; font-weight: 600; }
.workout .w-stats { flex: none; display: flex; justify-content: space-around; padding: 12px var(--w-pad); font-size: var(--w-small); }
.workout button.w-start { flex: none; margin: 0 var(--w-pad); background: #fff; color: #000; font-weight: 700; letter-spacing: .04em; border-radius: 4px; font-size: var(--w-small); }
.workout button.w-start:hover { filter: brightness(.9); }
.workout .w-daynav { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--w-pad); }
.workout .w-name { background: #111; color: #fff; border: 1px solid #333; border-radius: 8px; padding: 10px 12px; font: inherit; outline: none; }
.workout .w-name:focus { border-color: #0a84ff; }
.workout .w-edit-move { border: 1px solid #222; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.workout .w-edit-head { display: flex; align-items: center; gap: 10px; }
.workout .w-edit-head b { flex: 1; min-width: 0; font-weight: 500; }
.workout button.w-kg { align-self: flex-start; border: 1px solid #444; border-radius: 999px; padding: 6px 14px; }
.workout button.w-ghost { padding: 10px; border: 1px solid #333; border-radius: 8px; font-size: var(--w-small); letter-spacing: .04em; }
.workout .w-edit-head button.w-ghost { padding: 4px 10px; border: 0; color: #b3b3b3; }
.workout button.w-ghost:hover { background: #151515; }
.workout .w-done { flex: 1; min-height: 0; }
.workout .w-done .w-photo { height: 100% !important; }
.workout .w-done-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: var(--w-pad); }
.workout .w-title-text { font-size: var(--w-title); }
.workout button.w-check-big { flex: none; height: var(--w-nav); font-size: calc(var(--w-icon) * 1.3); color: #0a84ff; border-top: 1px solid #1c1c1c; }

/* The player: the desktop's WebView page, drawn natively over the looping demo. */
.workout .w-player { position: absolute; inset: 0; overflow: hidden; container-type: size; background: #000; user-select: none; }
.workout .w-player video { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transform: translate(-50%, -50%) scale(1.4); background: #000; }
.workout .w-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.18) 36%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.86) 100%); }
.workout .w-ui { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 3.2cqmin 4.2cqmin 3.6cqmin; }
.workout .w-top { width: 100%; display: flex; align-items: center; justify-content: center; position: relative; min-height: 8cqmin; margin-bottom: 1cqmin; }
.workout button.w-back { position: absolute; left: 0; width: min(9cqmin, 48px); height: min(9cqmin, 48px); border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.4); font-size: min(5.5cqmin, 28px); display: grid; place-items: center; }
.workout .w-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.workout .w-head b { font-size: clamp(14px, 3.4cqmin, 20px); font-weight: 600; letter-spacing: .02em; }
.workout .w-head small { font-size: clamp(11px, 2.6cqmin, 15px); opacity: .7; margin-top: 2px; }
.workout .w-ptitle { margin-top: 2.4cqmin; font-size: clamp(26px, 6.4cqmin, 44px); text-align: center; line-height: 1.15; }
.workout .w-psub { margin-top: 1.2cqmin; font-size: clamp(15px, 3.6cqmin, 22px); opacity: .88; }
.workout .w-phint { margin-top: 1.4cqmin; font-size: clamp(16px, 4cqmin, 24px); opacity: .92; }
.workout .w-grow { flex: 1; min-height: 8px; }
.workout button.w-ring { width: min(46cqmin, 240px); height: min(46cqmin, 240px); flex: none; border-radius: 50%; border: 2px solid #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.workout .w-ring small { font-size: clamp(13px, 3.2cqmin, 18px); opacity: .9; }
.workout .w-ring b { font-size: clamp(52px, 16cqmin, 92px); font-weight: 200; line-height: 1; margin: 1cqmin 0; }
.workout .w-ring span { font-size: clamp(14px, 3.6cqmin, 20px); opacity: .88; }
.workout button.w-ring:hover { background: rgba(255,255,255,.08); }
.workout .w-adj { width: 100%; display: flex; justify-content: space-between; padding: 2cqmin 8cqmin 0; }
.workout .w-adj button { font-size: clamp(26px, 7cqmin, 40px); font-weight: 200; opacity: .85; width: 12cqmin; }
.workout .w-next { margin-top: 3cqmin; display: flex; flex-direction: column; align-items: center; text-align: center; }
.workout .w-next small { font-size: clamp(12px, 2.8cqmin, 16px); opacity: .55; }
.workout .w-next b { font-weight: 400; font-size: clamp(14px, 3.4cqmin, 20px); margin-top: 4px; opacity: .95; }
.workout .w-dots { display: flex; gap: 2.4cqmin; margin-top: 2.4cqmin; }
.workout .w-dots i { font-style: normal; opacity: .75; font-size: clamp(12px, 3cqmin, 18px); }

/* ------------------------------------------------------------------ agent */

/* The chat floats over every page: the layer lets clicks through everywhere but on the card. */
.agent-layer { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.agent-layer > .card { pointer-events: auto; }

.agent { position: absolute; inset: 4px 2px 2px; display: grid; grid-template-rows: auto 1fr auto; min-width: 0; min-height: 0; }
.agent-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; min-width: 0; }
.agent-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-left: 2px; }
.agent-titles b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-titles small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.agent-tools { display: flex; flex: none; }
.agent-icon { width: 32px; height: 32px; margin-left: 2px; border: 0; background: transparent; color: var(--ink); font: 14px var(--symbol); cursor: pointer; display: grid; place-items: center; }
.agent-icon:hover { background: var(--line-45); }
.agent-icon.on { background: var(--ink); color: var(--paper); }
.agent-icon:disabled { opacity: .4; cursor: default; }

.agent-stage { position: relative; min-height: 72px; overflow: hidden; }
.agent-room { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; }
.agent-setup { flex: none; border: 1px solid var(--edge); background: var(--surface); padding: 10px; margin-bottom: 8px; }
.agent-setup b { font-size: 12px; font-weight: 600; }
.agent-setup p { font-size: 12px; color: var(--muted); margin: 4px 0 8px; line-height: 1.35; }
.agent-setup .field { margin: 0 0 8px; font-size: 13px; }
.agent-setup .btn { width: 100%; margin: 0; }
.agent-feed { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 2px 8px; scrollbar-width: thin; scrollbar-color: var(--raised) transparent; }
.agent-empty { font-size: 14px; color: var(--muted); margin: 28px 8px 16px; }

.agent-bubble { display: flex; margin: 0 40px 10px 0; }
.agent-bubble.mine { justify-content: flex-end; margin: 0 0 10px 40px; }
.agent-card { max-width: 100%; border: 1px solid var(--edge); background: var(--surface); padding: 9px 12px; min-width: 0; }
.agent-bubble.mine .agent-card { border: 0; background: var(--ink); color: var(--paper); }
.agent-body { font-size: 13px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.agent-body.grid { font: 11px/1.35 var(--mono); white-space: pre; overflow-x: auto; }
.agent-time { font-size: 10px; opacity: .55; margin-top: 5px; color: var(--muted); }
.agent-bubble.mine .agent-time { text-align: right; color: var(--paper); }
.agent-label { display: block; font: 700 8px var(--mono); color: var(--muted); margin: 10px 0 2px; opacity: .75; letter-spacing: .04em; }
.agent-receipt { display: flex; align-items: flex-start; gap: 8px; margin-top: 4px; font-size: 11px; }
.agent-receipt span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.agent-receipt .btn { font-size: 8px; padding: 3px 8px; margin: 0; }

.agent-plan, .agent-error { border: 2px solid var(--edge); background: var(--surface); padding: 12px 14px; margin: 0 48px 12px 0; }
.agent-error { padding: 10px 13px 11px; margin-right: 56px; }
.agent-plan > small, .agent-error > small { display: block; font: 700 8px var(--mono); color: var(--muted); margin: 8px 0 2px; }
.agent-plan > small:first-child, .agent-error > small:first-child { margin-top: 0; }
.agent-plan p { font-size: 13px; margin: 2px 0 10px; }
.agent-error p { font-size: 13px; margin: 6px 0 8px; overflow-wrap: anywhere; }
.agent-step { font-size: 12px; margin-top: 2px; }
.agent-changes { font: 9px var(--mono); color: var(--muted); margin-top: 10px; }
.agent-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.agent-actions .btn { margin: 0; }
.agent-error .agent-actions { margin-top: 0; }
.agent-error .agent-actions .btn { font-size: 8px; padding: 5px 10px; }
.agent-details { width: 100%; height: 140px; font: 10px var(--mono); margin: 0 0 8px; background: var(--paper); color: var(--ink); border: 1px solid var(--edge); resize: vertical; }

.agent-history { position: absolute; inset: 0; background: var(--paper); display: flex; flex-direction: column; padding-top: 4px; }
.agent-history-head { font-size: 11px; font-weight: 700; color: var(--muted); margin: 0 0 8px 2px; }
.agent-history .field { margin: 0 0 8px; font-size: 13px; }
.agent-threads { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.agent-thread { display: flex; align-items: center; padding: 9px 8px 9px 10px; margin-bottom: 2px; cursor: pointer; }
.agent-thread:hover { background: var(--line-45); }
.agent-thread.on { background: var(--ink); color: var(--paper); }
.agent-thread > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.agent-thread b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-thread small { font-size: 11px; color: var(--muted); margin-top: 2px; }
.agent-thread.on small { color: var(--paper); opacity: .7; }
.agent-forget { border: 0; background: transparent; color: inherit; opacity: .6; font-size: 14px; padding: 0 8px; cursor: pointer; }

.agent-composer { margin-top: 6px; }
.agent-mic-strip { border: 2px solid var(--edge); background: var(--surface); padding: 8px 10px; margin-bottom: 6px; display: flex; flex-direction: column; gap: 3px; }
.agent-mic-strip b { font: 700 11px var(--mono); color: var(--alert); }
.agent-mic-strip span { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.agent-line { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 2px; border: 1.5px solid var(--edge); background: var(--surface); padding: 2px 4px; }
.agent-line textarea { min-height: 40px; max-height: 110px; resize: none; border: 0; background: transparent; color: var(--ink); caret-color: var(--ink); padding: 10px 4px 8px 8px; font: 13px var(--sans); outline: none; field-sizing: content; }
.agent-send { width: 36px; height: 36px; border: 0; background: var(--ink); color: var(--paper); font: 14px var(--symbol); cursor: pointer; display: grid; place-items: center; }
.agent-send.busy { background: var(--surface); color: var(--ink); border: 1.5px solid var(--edge); }
.agent-line .agent-icon { width: 36px; height: 36px; touch-action: none; }