/* ===== The Hub v2 — Quiet Practice tokens + components =====
   Tokens are the ONLY colors code may use (docs/BRAND.md). The :root block is
   verbatim from the v1 hub (+ two named values the handoff asked for: the
   dot-grid and the FAB shadow). tests/web-lint.test.mjs fails on any raw hex
   or rgba outside this block, and on any style="" in web/. */
:root {
  --page: #e7e4dd;
  --screen: #f4f2ec;
  --card: #fbfaf7;
  --white: #ffffff;
  --ink: #211f1b;
  --ink-2: #3a3630;
  --muted: #5c574e;
  --muted-2: #7a746a;
  --faint: #9a948b;
  --faint-2: #a39c91;
  --line: rgba(31, 29, 26, 0.07);
  --line-2: rgba(31, 29, 26, 0.12);

  --sage: #3f6f5b;
  --sage-deep: #2f5546;
  --sage-tint: #e9f0ea;
  --sage-avatar: #e3ece4;
  --sage-avatar-ink: #3a6450;

  --clay: #a8623a;
  --clay-ink: #92591f;
  --clay-dot: #b97e3a;
  --clay-tint: #f3e7da;
  --clay-avatar: #f1e6dd;
  --paper-warm: #f3ede2;

  --slate: #5a6a84;
  --slate-tint: #ece7f0;
  --slate-ink: #6a5d82;

  --paused-ink: #857d72;
  --paused-dot: #a59c8f;
  --paused-tint: #ece9e3;

  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono: 'Spline Sans Mono', ui-monospace, monospace;

  /* named values the canvases used as raw rgba (handoff note, home-brief v2) */
  --dot-grid: rgba(31, 29, 26, 0.028);
  --shadow-fab: 0 8px 24px rgba(31, 29, 26, 0.18);
  --shadow-sheet: 0 -10px 32px rgba(31, 29, 26, 0.14);
  --shadow-pop: 0 14px 36px rgba(31, 29, 26, 0.16);
  --scrim: rgba(31, 29, 26, 0.28);

  --tabbar-h: 76px;
  --sidebar-w: 224px;
  --assistant-w: 300px;
  --content-max: 760px;
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--screen);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: default; opacity: 0.55; }
input, textarea, select { font: inherit; color: inherit; }
a { color: var(--sage); text-decoration: none; }
a:hover { color: var(--sage-deep); }
svg { display: block; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; border: 2px solid var(--screen); }
:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; border-radius: 6px; }

/* ---- type helpers ---- */
.mono { font-family: var(--mono); }
.serif { font-family: var(--serif); }
.num { font-variant-numeric: tabular-nums; }
.eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.eyebrow.is-sage { color: var(--sage); }
.eyebrow.is-slate { color: var(--slate-ink); }
.link-mono { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--sage); }
.link-mono.is-faint { color: var(--faint); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }

/* ---- layout ---- */
.app { min-height: 100dvh; display: flex; flex-direction: column; background: var(--screen); }
.sidebar { display: none; }
.main {
  flex: 1; min-width: 0; min-height: 100dvh;
  padding: 0 0 calc(var(--tabbar-h) + 100px);
  background: var(--screen);
  background-image: radial-gradient(var(--dot-grid) 1px, transparent 1px);
  background-size: 26px 26px;
}
.page { max-width: var(--content-max); margin: 0 auto; }
.section { padding: 22px 18px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; gap: 12px; }
.section-head.is-plain { margin-bottom: 10px; }
.section-head .eyebrow { white-space: nowrap; }
.stack { display: flex; flex-direction: column; gap: 8px; }

/* ---- top bar (phone) ---- */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: max(22px, env(safe-area-inset-top)) 18px 0; }
.topbar-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar-title { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); }
.topbar-sync { font-family: var(--mono); font-size: 10px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-sync.is-failed { color: var(--clay-ink); }
.topbar-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--white); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--sage); flex: 0 0 auto; }
.topbar-btn:active { background: var(--sage-tint); }

/* ---- page header ---- */
.greeting { padding: 14px 18px 0; }
.greeting h1, .page-title { font-family: var(--serif); font-weight: 500; font-size: 32px; letter-spacing: -0.015em; line-height: 1.1; margin: 0; }
.greeting-sub, .page-sub { font-size: 14px; color: var(--muted); margin-top: 6px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 0 18px; }
.page-head .eyebrow { display: none; margin-bottom: 8px; }
.page-head-actions { display: none; gap: 8px; flex: 0 0 auto; }

/* ---- dots ---- */
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); flex: 0 0 auto; display: inline-block; }
.dot.is-paused { background: var(--paused-ink); }
.dot.is-failed { background: var(--clay); }
.dot.is-slate { background: var(--slate); }
.dot.is-clay { background: var(--clay-dot); }

/* ---- card ---- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.card.is-list { display: flex; flex-direction: column; overflow: hidden; }
.card.is-strong { border-color: var(--line-2); }
.card-pad { padding: 16px; }
.card-note { font-size: 13px; color: var(--muted); line-height: 1.45; }
.card-foot { font-family: var(--mono); font-size: 10px; color: var(--faint); text-align: center; margin-top: 8px; }
.card-foot button { font: inherit; color: inherit; }

/* ---- pills / tags / chips ---- */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; line-height: 1.3; }
.pill-sage { background: var(--sage-tint); color: var(--sage-deep); }
.pill-clay { background: var(--clay-tint); color: var(--clay-ink); }
.pill-slate { background: var(--slate-tint); color: var(--slate-ink); }
.pill-neutral { background: var(--screen); color: var(--muted-2); border: 1px solid var(--line-2); }
.pill-paused { background: var(--paused-tint); color: var(--paused-ink); }
.tag { display: inline-block; font-family: var(--mono); font-size: 9px; color: var(--faint-2); background: var(--screen); padding: 3px 6px; border-radius: 5px; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--white); font-size: 12.5px; font-weight: 500; color: var(--ink); }
.chip.on, .chip[aria-pressed="true"] { background: var(--sage-tint); border-color: var(--sage); color: var(--sage-deep); }

/* ---- avatar ---- */
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--sage-avatar); color: var(--sage-avatar-ink); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: 0 0 auto; }
.avatar.is-clay { background: var(--clay-avatar); color: var(--clay-ink); }
.avatar.is-slate { background: var(--slate-tint); color: var(--slate-ink); }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 12px; font-size: 14px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.btn-primary { background: var(--sage); color: var(--white); border-color: var(--sage); }
.btn-primary:active { background: var(--sage-deep); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:active { background: var(--screen); }
.btn-ink { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn-white { background: var(--white); color: var(--ink); border-color: var(--line-2); }
.btn-bar { height: 38px; padding: 0 14px; border-radius: 11px; font-size: 13px; }
.btn-small { height: 34px; padding: 0 12px; border-radius: 9px; font-size: 12.5px; }
.btn-row { display: flex; gap: 8px; }
.btn-row .btn { flex: 1; }
.btn-row.is-auto .btn { flex: 0 0 auto; }

/* round icon actions (accept / snooze / dismiss) */
.act { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; display: inline-flex; align-items: center; justify-content: center; color: var(--muted-2); flex: 0 0 auto; }
.act:active { background: var(--screen); }
.act-accept { background: var(--sage); border-color: var(--sage); color: var(--white); }
.act-accept:active { background: var(--sage-deep); }
.acts { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

/* ---- checkbox ---- */
.chk { width: 19px; height: 19px; border-radius: 6px; border: 1.6px solid var(--faint-2); flex: 0 0 auto; background: transparent; display: inline-flex; align-items: center; justify-content: center; color: var(--white); }
.chk.is-done, .chk[aria-checked="true"] { background: var(--sage); border-color: var(--sage); }

/* ---- rows ---- */
.row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row-body { flex: 1; min-width: 0; }
.row-title { font-size: 14px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; }
.row-title.is-strong { font-weight: 600; }
.row-sub { font-size: 12px; color: var(--faint); margin-top: 2px; }
.row.is-link { cursor: pointer; }
.row.is-link:active { background: var(--screen); }

/* suggestion row */
.sug { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "pill acts" "body acts"; column-gap: 12px; row-gap: 4px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.sug > .pill { grid-area: pill; justify-self: start; }
.sug > .acts { grid-area: acts; align-self: center; }
.sug:first-child { padding-top: 14px; }
.sug:last-child { border-bottom: 0; }
.sug-body { grid-area: body; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sug-title { font-size: 15px; font-weight: 600; line-height: 1.3; }
.sug-reason { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.sug-reason.is-overdue { color: var(--clay-ink); }
.sug.is-leaving { opacity: 0; transform: translateX(12px); transition: opacity 0.18s ease, transform 0.18s ease; }

/* event row */
.ev-time { font-family: var(--mono); font-size: 11px; color: var(--muted); width: 60px; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.ev-title { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-title.is-strong { font-weight: 600; }

/* task row */
.task { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.task:last-child { border-bottom: 0; }
.task-title { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task.is-done .task-title { color: var(--faint); text-decoration: line-through; }
.task-due { font-family: var(--mono); font-size: 10px; color: var(--muted); flex: 0 0 auto; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-due.is-overdue { color: var(--clay-ink); }

/* prep card */
.prep { padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.prep-head { display: flex; align-items: center; gap: 12px; }
.prep-id { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.prep-name { font-family: var(--serif); font-size: 20px; font-weight: 500; line-height: 1.15; }
.prep-meta { font-size: 12.5px; color: var(--muted); }
.prep-list { display: flex; flex-direction: column; gap: 8px; }
.prep-item { display: flex; align-items: center; gap: 10px; font-size: 14px; }

/* stat tiles */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile { padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; text-align: left; }
.tile .eyebrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-n { font-family: var(--serif); font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile-n.is-good { color: var(--sage-deep); }
.tile-n.is-warn { color: var(--clay-ink); }
.tile-n.is-empty { color: var(--faint-2); }
.tile-sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.tile:active { background: var(--white); }

/* recent */
.recent { display: flex; flex-direction: column; gap: 8px; }
.recent-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.recent-row span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-when { font-family: var(--mono); font-size: 10px; color: var(--faint); flex: 0 0 auto; }

/* ---- states ---- */
.empty { padding: 16px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.empty-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.error-line { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--clay-tint); border: 1px solid var(--line); margin: 18px 18px 0; }
.error-line span { flex: 1; font-size: 13.5px; color: var(--clay-ink); line-height: 1.4; }
.sk { height: 12px; border-radius: 6px; background: var(--paused-tint); }
.sk.is-thin { height: 10px; }
.sk.is-short { height: 8px; }
.sk.is-num { width: 36px; height: 22px; }
.sk-w-40 { width: 40%; } .sk-w-44 { width: 44%; } .sk-w-50 { width: 50%; } .sk-w-56 { width: 56%; } .sk-w-60 { width: 60%; } .sk-w-68 { width: 68%; } .sk-w-78 { width: 78%; } .sk-w-82 { width: 82%; } .sk-w-46px { width: 46px; } .sk-w-52px { width: 52px; }
.sk-row { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-bottom: 1px solid var(--line); }
.sk-row:last-child { border-bottom: 0; }
.sk-line { display: flex; align-items: center; gap: 12px; padding: 14px; border-bottom: 1px solid var(--line); }
.sk-line:last-child { border-bottom: 0; }
.pending { padding: 40px 18px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.5; }
.pending .serif { display: block; font-size: 22px; color: var(--ink); margin-bottom: 8px; }

/* ---- tasks page (docs/design/tasks.md) ---- */
.tasks-head { display: grid; gap: 14px; padding: 0 18px; }
.tasks-head .greeting { padding: 0; }
.tasks-head .eyebrow { display: none; margin-bottom: 8px; }
.kbd-hint { display: none; font-family: var(--mono); font-size: 11px; color: var(--faint); }

/* quick add: + · one sentence · the assistant sparkle */
.qa { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 6px 0 14px; border-radius: 14px; background: var(--white); border: 1px solid var(--line-2); }
.qa:focus-within { border-color: var(--sage); box-shadow: 0 0 0 3px var(--sage-tint); }
.qa .qa-plus { color: var(--faint); flex: 0 0 auto; }
.qa-input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 14px; padding: 12px 0; }
.qa-input::placeholder { color: var(--faint); }
.qa-ask { width: 32px; height: 32px; border-radius: 50%; background: var(--sage-tint); color: var(--sage); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.qa-ask:disabled { background: var(--screen); color: var(--faint-2); }
.qa-ask:not(:disabled):hover { background: var(--sage); color: var(--white); }

/* filter strip: scrolls sideways on the phone, with a fade at the right edge */
.fbar-wrap { position: relative; margin-top: 14px; }
.fbar { display: flex; gap: 8px; overflow-x: auto; padding: 0 18px 2px; scrollbar-width: none; }
.fbar::-webkit-scrollbar { display: none; }
.fbar-fade { position: absolute; top: 0; right: 0; bottom: 0; width: 44px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--screen)); }
.fchip { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--white); font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; flex: 0 0 auto; }
.fchip:hover { color: var(--ink); }
.fchip.is-on { background: var(--ink); border-color: var(--ink); color: var(--white); }
.fchip.is-on:hover { color: var(--white); }
.fchip-caret { display: inline-flex; color: var(--faint); }
.fchip-label { color: inherit; font: inherit; }
.fchip-clear { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--white); flex: 0 0 auto; }
.fchip-clear:hover { background: var(--ink-2); }
.fchip.has-clear { padding-right: 6px; }

/* picker sheet */
.picker-row { width: 100%; }
.picker-row.is-on .row-title { font-weight: 600; }
.picker-count { font-size: 10px; color: var(--faint); flex: 0 0 auto; }
.picker-tick { color: var(--sage); flex: 0 0 auto; }
.picker-extra { margin-bottom: 12px; }

/* groups */
.tgroup + .tgroup { margin-top: 22px; }
.tgroup-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.eyebrow.is-clay { color: var(--clay-ink); }
.card.is-doing { border-color: var(--sage); }
.more-row { display: flex; padding: 11px 14px 12px 43px; font-family: var(--mono); font-size: 10px; color: var(--faint); }
.more-row:hover { color: var(--sage); }
.task-icon { color: var(--faint); flex: 0 0 auto; }
.task.is-selected { background: var(--sage-tint); }
.task-title[tabindex] { cursor: pointer; }

/* done bar */
.done-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 13px 14px; font-size: 14px; color: var(--muted); }
.done-bar .chev { color: var(--faint); flex: 0 0 auto; }
.done-bar.is-open .chev { transform: rotate(180deg); }

/* empty filter */
.empty-filter { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.empty-filter span { font-size: 13.5px; color: var(--muted); }

/* detail — the phone sheet body and the desktop pane share it */
.det { display: flex; flex-direction: column; gap: 12px; }
.det-head { display: flex; align-items: flex-start; gap: 12px; }
.det-head .chk { margin-top: 4px; }
.det-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.det-title { font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1.15; }
.det-detail { font-size: 13px; color: var(--muted); line-height: 1.45; }
.det-detail p { margin: 0 0 6px; }
.det-detail p:last-child { margin-bottom: 0; }
.datechips { display: flex; gap: 6px; flex-wrap: wrap; }
.datechip { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--white); font-family: var(--mono); font-size: 10px; color: var(--muted); white-space: nowrap; }
.datechip:hover { border-color: var(--sage); color: var(--sage); }
.datechip.is-current { background: var(--screen); border-color: var(--line-2); color: var(--ink); }
.datechip.is-on { background: var(--ink); border-color: var(--ink); color: var(--white); }
.datechip.is-overdue { background: var(--clay-tint); border-color: var(--clay-tint); color: var(--clay-ink); }
.det-fields { display: flex; flex-direction: column; }
.det-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 0; border-bottom: 1px solid var(--line); text-align: left; }
.det-row:last-child { border-bottom: 0; }
.det-k { font-size: 12.5px; color: var(--muted); flex: 0 0 auto; }
.det-v { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; min-width: 0; }
.det-v .none { color: var(--muted); font-weight: 500; }
.det-v-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.det-v .chev { color: var(--faint); flex: 0 0 auto; }
button.det-row:hover .det-v-text { color: var(--sage-deep); }
.det-row.is-from .det-v { color: var(--sage); }
.det-status { display: flex; gap: 6px; }
.det-status .pill { cursor: pointer; }
.det-status .pill.is-off { background: var(--white); color: var(--muted); border: 1px solid var(--line); }
.det-actions { display: flex; gap: 8px; align-items: center; }
.det-actions .btn-primary { flex: 1; }
.det-actions .btn-danger { width: 44px; padding: 0; color: var(--clay-ink); background: transparent; border-color: var(--line-2); }
.det-actions .btn-danger:hover { background: var(--clay-tint); }
.det-confirm { font-size: 13px; color: var(--clay-ink); flex: 1; }
.det-pane { display: none; }
.tasks-cols { padding: 0 18px; margin-top: 22px; }

/* first-run card */
.first-run { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.first-run-title { font-size: 15px; font-weight: 600; line-height: 1.3; }

/* ---- areas + projects (docs/design/areas-projects.md) ---- */
.areas-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 18px; }
.areas-head .greeting { padding: 0; min-width: 0; }
.areas-head .eyebrow { display: none; } /* the phone's top bar already says "Areas · synced 6:58" */
.areas-head .btn { flex: 0 0 auto; height: 44px; border-radius: 12px; }
.areas-body { padding-top: 22px; }
.count-right { font-size: 10px; color: var(--faint); }

/* the By area / All projects toggle */
.segmented { display: flex; gap: 3px; margin: 16px 18px 0; padding: 3px; border-radius: 12px; background: var(--white); border: 1px solid var(--line-2); }
.seg-btn { flex: 1; height: 36px; border-radius: 9px; font-size: 13px; color: var(--muted); display: flex; align-items: center; justify-content: center; }
.seg-btn.is-on { background: var(--ink); color: var(--white); font-weight: 600; }

/* area cards */
.area-list { display: flex; flex-direction: column; gap: 10px; padding: 0 18px; }
.card.area { padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.card.area.is-archived { opacity: 0.8; }
.area-open { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; }
.area-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.area-name-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.area-name { font-family: var(--serif); font-size: 20px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.area-sum { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.counts { display: flex; gap: 10px; flex-wrap: wrap; font-family: var(--mono); font-size: 10px; color: var(--muted); }
.counts-n { color: var(--ink); }
.area-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pchip { max-width: 100%; font-size: 11.5px; font-weight: 600; color: var(--ink-2); background: var(--white); border: 1px solid var(--line-2); padding: 4px 8px; border-radius: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pchip:hover { border-color: var(--sage); color: var(--sage-deep); }
.area-chips .tag:hover { color: var(--sage); }
.archived-block { margin: 16px 18px 0; display: flex; flex-direction: column; gap: 10px; }
.archived-block .area-list { padding: 0; }

/* project rows (All projects, and the area page's list) */
.prow { align-items: flex-start; }
.prow-top { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.prow-name { font-size: 14px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow-next { font-size: 12.5px; color: var(--muted); margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow-next.is-note { white-space: normal; display: flex; flex-wrap: wrap; gap: 6px; }
.tag.is-area { color: var(--muted); background: var(--white); border: 1px solid var(--line); max-width: 140px; }
.row-age { font-size: 10px; color: var(--faint); flex: 0 0 auto; align-self: flex-start; padding-top: 2px; }

/* sub-page header (an area, a project) */
.sub-head { padding: 0 18px; display: flex; flex-direction: column; gap: 10px; }
.backbar { display: flex; align-items: center; gap: 8px; color: var(--sage); align-self: flex-start; }
.sub-head .page-title { font-size: 30px; line-height: 1.08; }
.sub-head .page-sub { margin-top: 0; font-size: 13.5px; line-height: 1.45; }
.page-sub.is-editable { cursor: pointer; }
.page-sub.is-editable:hover { color: var(--ink-2); }
.page-sub.is-blank { color: var(--faint); }
.own-page { margin-top: 2px; }
.proj-crumb { display: none; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); align-items: center; gap: 6px; flex-wrap: wrap; }
.crumb { font: inherit; color: var(--faint); }
.crumb.is-sage { color: var(--sage); }
.crumb:hover { color: var(--sage-deep); }
.proj-topline { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.proj-id { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.proj-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pill.is-editable { cursor: pointer; }
.pill-caret { opacity: 0.7; }
.proj-actions { flex-wrap: wrap; }
.proj-actions .btn { flex: 0 0 auto; }
.repo-line { font-size: 11px; color: var(--muted); word-break: break-all; line-height: 1.4; }

/* next */
.next-card { border-color: var(--sage); }
.next-body { font-size: 14.5px; line-height: 1.5; cursor: pointer; }
.next-body p { margin: 0 0 6px; }
.next-body p:last-child { margin-bottom: 0; }
.tap-hint { font-size: 10px; color: var(--faint); margin-top: 8px; }

/* details (typed props) */
.kv-card { padding: 4px 16px; }
.kv-card .det-row:last-child { border-bottom: 0; }
.add-field { margin-top: 8px; }
.add-custom { margin-top: 16px; }
.add-actions { margin-top: 4px; }

/* status from the repo */
.repo-card { display: flex; flex-direction: column; gap: 10px; }
.repo-block { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.repo-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.repo-milestone { font-size: 13.5px; line-height: 1.45; }
.repo-text { font-size: 13px; color: var(--muted); line-height: 1.4; }
.repo-text.is-blank { color: var(--faint); }
.repo-foot { padding-top: 2px; }
/* git facts wrap rather than clip — a hash + date is longer than one column */
.repo-card .det-v { flex: 1; justify-content: flex-end; }
.repo-card .det-v-text { white-space: normal; text-align: right; word-break: break-word; }

/* the Workbench door, disabled until Phase 5 builds it */
.workbench-door { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.soon-note { font-size: 9.5px; letter-spacing: 0.06em; color: var(--faint); text-align: center; }

/* vision / plan */
.prose-body { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.prose-body p { margin: 0 0 8px; }
.prose-body p:last-child { margin-bottom: 0; }

/* project tabs (phone) */
.ptabs-wrap { padding: 22px 18px 0; }
.ptabs { display: flex; gap: 18px; border-bottom: 1px solid var(--line-2); }
.ptab { display: flex; align-items: center; gap: 6px; padding: 0 0 10px; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ptab.is-on { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.ptab-n { font-family: var(--mono); font-size: 10px; color: var(--faint); }

/* schedule rows */
.ev-date { font-size: 11px; color: var(--muted); width: 56px; flex: 0 0 auto; }
.ev-at { font-size: 10px; color: var(--faint); flex: 0 0 auto; }
.avatar.is-small { width: 26px; height: 26px; font-size: 10px; }

/* a doc read in a sheet */
.doc-body { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.doc-body p { margin: 0 0 8px; }
.pending-actions { justify-content: center; margin-top: 16px; }

/* ---- coaching · clients (docs/design/coaching-clients.md) ---- */
.txt-clay { color: var(--clay-ink); }
.txt-sage { color: var(--sage-deep); }
.th { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.th.is-right { text-align: right; }
.avatar.is-paused { background: var(--paused-tint); color: var(--paused-ink); }
.avatar.is-lg { width: 52px; height: 52px; font-size: 17px; }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--white); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); flex: 0 0 auto; }
.icon-btn:hover { border-color: var(--sage); color: var(--sage); }
.tag.is-clay { color: var(--clay-ink); background: var(--clay-tint); }
.more-link { font-weight: 600; color: var(--sage); }
.more-link:hover { color: var(--sage-deep); }
.input-inline { min-height: 34px; padding: 6px 10px; border-radius: 9px; font-size: 13.5px; max-width: 170px; text-align: right; }

/* the list head + filter strip */
.clients-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 18px; }
.clients-head .greeting { padding: 0; min-width: 0; }
.clients-head .eyebrow { display: none; } /* the phone top bar already says "Clients · synced 6:58" */
.clients-head .btn { flex: 0 0 auto; height: 44px; border-radius: 12px; }
.cl-filters { display: flex; align-items: center; gap: 8px; padding: 16px 18px 0; }
.cl-filters .fbar { padding: 0; flex: 1; min-width: 0; }
.cl-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px; background: var(--white); border: 1px solid var(--line-2); width: 132px; flex: 0 0 auto; }
.cl-search:focus-within { border-color: var(--sage); box-shadow: 0 0 0 3px var(--sage-tint); }
.cl-search-input { width: 100%; min-width: 0; border: 0; background: transparent; outline: none; font-size: 13px; }
.cl-search-input::placeholder { color: var(--faint); }

/* up next */
.upnext { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.upnext-card { padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 6px; text-align: left; min-width: 0; }
.upnext-card.is-first { border-color: var(--sage); }
.upnext-card:hover { border-color: var(--sage); }
.upnext-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.upnext-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upnext-when { font-size: 12px; color: var(--muted); }
.upnext-open { font-size: 10px; color: var(--sage); }

/* client rows */
.cl-row { align-items: center; }
.cl-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cl-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cl-name { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-name-row .pill { flex: 0 0 auto; }
.cl-meta { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.cl-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.cl-open { font-size: 10px; color: var(--muted); }
.cl-open.is-warn { color: var(--clay-ink); }
.done-bar .chev { transform: none; }

/* the client page: identity band */
.client-head { gap: 12px; }
.cl-crumb { display: none; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); align-items: center; gap: 6px; flex-wrap: wrap; }
.client-topline { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.client-band { display: flex; align-items: flex-start; gap: 12px; flex: 1; min-width: 0; }
.client-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.client-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.client-name-row .page-title { font-size: 28px; line-height: 1.05; }
.client-alias { font-size: 12.5px; color: var(--muted); }
.client-facts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.client-facts-text { font-size: 12.5px; color: var(--muted); }
.client-edit { align-self: flex-start; margin-top: 4px; }
.client-actions { display: none; }

/* prep */
.cprep { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.cprep-block { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cprep-list { display: flex; flex-direction: column; gap: 8px; }
.cprep-item { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.cprep-item.is-done .cprep-title { color: var(--faint); text-decoration: line-through; }
.cprep-title { flex: 1; min-width: 0; line-height: 1.35; }
.cprep-hw { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); }
.cprep-hw span:nth-child(2) { flex: 1; min-width: 0; line-height: 1.35; }
.cprep-summary { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.cprep-summary p { margin: 0 0 6px; }
.cprep-summary p:last-child { margin-bottom: 0; }
.cprep-actions { margin-top: 2px; }

/* where they’re at */
.obs-row { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.obs-row:last-child { border-bottom: 0; }
.obs-date { font-size: 10px; color: var(--faint); width: 44px; flex: 0 0 auto; padding-top: 2px; }
.obs-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.obs-text { font-size: 13.5px; line-height: 1.45; }

/* score trend */
.sc-card { display: flex; flex-direction: column; gap: 10px; }
.spark { width: 100%; height: 64px; display: block; }
.spark-grid { stroke: var(--line); stroke-width: 1; }
.spark-line { stroke: var(--sage); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark-dot { fill: var(--sage); }
.sc-scale { display: flex; justify-content: space-between; font-size: 10px; color: var(--faint); gap: 4px; }
.sc-scale .is-last { color: var(--sage); }
.sc-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-chip { font-family: var(--mono); font-size: 9px; padding: 3px 6px; border-radius: 5px; background: var(--screen); color: var(--faint-2); }
.sc-chip.is-up { background: var(--sage-tint); color: var(--sage-avatar-ink); }
.sc-chip.is-down { background: var(--clay-tint); color: var(--clay-ink); }

/* values · goals · success */
.vgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.vgs-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vgs-item { font-size: 13px; line-height: 1.35; }

/* follow-ups + sessions */
.hw-dot { margin: 0 6px; }
.st-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.st-date { font-size: 10px; color: var(--faint); flex: 0 0 auto; }
.st-title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-tags { margin-top: 5px; }
.st-score { font-family: var(--serif); font-size: 18px; color: var(--muted); flex: 0 0 auto; }
.st-score.has-score { color: var(--sage-deep); }
.strow { display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.1fr) 60px 24px; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.strow:last-child { border-bottom: 0; }
.strow.is-head { padding: 9px 14px; }
.strow.is-link { cursor: pointer; }
.strow.is-link:hover { background: var(--screen); }
.strow .st-score { font-size: 17px; text-align: right; }
.strow .st-date { font-size: 11px; color: var(--muted); }
.strow .st-title { font-size: 13.5px; }
.alias-add { margin-top: 14px; }

/* ---- coaching · session (docs/design/coaching-session.md) ---- */
.ses-head { gap: 10px; }
.ses-crumb { display: none; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); align-items: center; gap: 6px; flex-wrap: wrap; }
.ses-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ses-when { font-size: 10px; color: var(--muted); }
.ses-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; }
.ses-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ses-head .page-title { font-size: 28px; line-height: 1.08; }
.ses-sub { font-size: 13px; color: var(--muted); }
.ses-badge { width: 56px; height: 56px; border-radius: 14px; background: var(--sage); color: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 auto; }
.ses-badge-n { font-size: 24px; line-height: 1; }
.ses-badge-label { font-size: 8px; letter-spacing: 0.1em; opacity: 0.85; }
.ses-actions { flex-wrap: wrap; align-items: center; }
.ses-actions .btn { flex: 0 0 auto; }

/* processing · failed · unmatched — read from the recording */
.ses-steps { display: flex; flex-direction: column; gap: 12px; }
.ses-steps-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ses-steps-head .mono { font-size: 10px; }
.ses-step-list { display: flex; flex-direction: column; gap: 9px; }
.ses-step { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.ses-step.is-waiting { color: var(--muted); }
.ses-step-label { flex: 1; min-width: 0; }
.ses-dot { width: 16px; height: 16px; border-radius: 50%; border: 1.6px dashed var(--faint-2); display: inline-flex; align-items: center; justify-content: center; color: var(--white); flex: 0 0 auto; }
.ses-dot.is-done { background: var(--sage); border: 0; }
.ses-dot.is-failed { background: var(--clay); border: 0; }
.ses-steps-foot { border-top: 1px solid var(--line); padding-top: 10px; }
.ses-failed { display: flex; flex-direction: column; gap: 10px; }
.ses-failed-head { display: flex; align-items: center; gap: 10px; }
.ses-failed-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--clay-ink); }
.ses-confirm { line-height: 1.5; margin-bottom: 14px; }

/* the words */
.ses-summary-card { display: flex; flex-direction: column; gap: 10px; }
.ses-summary { font-size: 14.5px; line-height: 1.55; }
.ses-summary p { margin: 0 0 8px; }
.ses-summary p:last-child { margin-bottom: 0; }
.ses-summary-tags { margin-top: 2px; }
.ses-obs { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.ses-obs:last-child { border-bottom: 0; }
.ses-obs .pill { flex: 0 0 auto; height: 18px; }
.ses-obs-text { font-size: 13.5px; line-height: 1.45; }
.ses-facing { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.ctabs { display: flex; gap: 16px; border-bottom: 1px solid var(--line-2); }
.ctab { padding: 10px 2px; font-size: 13px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ctab.is-on { color: var(--ink); font-weight: 600; border-bottom-color: var(--sage); }
.ses-facing-text { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.ses-facing-text p { margin: 0 0 8px; }
.ses-facing-text p:last-child { margin-bottom: 0; }
.chk.is-theirs { border-style: dashed; }

/* score — bars are widths in classes, so no page writes a style */
.bar { height: 6px; border-radius: 3px; background: var(--paused-tint); overflow: hidden; flex: 1; min-width: 0; }
.bar-fill { display: block; height: 100%; background: var(--sage); border-radius: 3px; }
.bar-fill.is-clay { background: var(--clay); }
.bar-fill.is-quiet { background: var(--faint-2); }
.bar-w-0 { width: 0; } .bar-w-1 { width: 5%; } .bar-w-2 { width: 10%; } .bar-w-3 { width: 15%; } .bar-w-4 { width: 20%; }
.bar-w-5 { width: 25%; } .bar-w-6 { width: 30%; } .bar-w-7 { width: 35%; } .bar-w-8 { width: 40%; } .bar-w-9 { width: 45%; }
.bar-w-10 { width: 50%; } .bar-w-11 { width: 55%; } .bar-w-12 { width: 60%; } .bar-w-13 { width: 65%; } .bar-w-14 { width: 70%; }
.bar-w-15 { width: 75%; } .bar-w-16 { width: 80%; } .bar-w-17 { width: 85%; } .bar-w-18 { width: 90%; } .bar-w-19 { width: 95%; } .bar-w-20 { width: 100%; }
.ses-score { display: flex; flex-direction: column; gap: 12px; }
.ses-cats { display: flex; flex-direction: column; gap: 4px; }
.ses-cat-block { display: flex; flex-direction: column; gap: 8px; }
.ses-cat { display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 0; }
.ses-cat-name { width: 92px; font-size: 12.5px; font-weight: 600; flex: 0 0 auto; }
.ses-cat-n { font-size: 10px; color: var(--muted); width: 24px; text-align: right; flex: 0 0 auto; }
.ses-subs { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 10px; border-bottom: 1px solid var(--line); }
.ses-subrow { display: flex; align-items: center; gap: 10px; }
.ses-sub-name { width: 92px; font-size: 12px; color: var(--muted); flex: 0 0 auto; }
.ses-score-hint { margin-top: 2px; }
.ses-score-notes { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 12px; }
.ses-score-text { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.ses-score-text p { margin: 0 0 6px; }
.ses-score-text .as-list { margin: 0 0 6px; padding-left: 16px; }
.ses-noscore { display: flex; align-items: center; gap: 12px; }
.ses-noscore-mark { width: 48px; height: 48px; border-radius: 12px; border: 1.6px dashed var(--faint-2); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--faint); flex: 0 0 auto; }
.ses-noscore-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ses-noscore-title { font-size: 14px; font-weight: 600; }
.ses-noscore .btn { flex: 0 0 auto; }

/* group: speakers → members, pillars, member notes */
.ses-speaker { gap: 10px; text-align: left; }
.ses-speaker-label { width: 62px; text-align: center; flex: 0 0 auto; }
.ses-speaker.is-untagged { background: var(--clay-tint); }
.ses-speaker.is-untagged .ses-speaker-label { background: var(--white); }
.ses-speaker-blank { width: 26px; height: 26px; border-radius: 50%; border: 1.6px dashed var(--clay); flex: 0 0 auto; }
.ses-speaker-tag { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; color: var(--clay-ink); }
.ses-speaker .mono { font-size: 10px; }
.avatar.is-coach { background: var(--ink); color: var(--white); font-size: 9px; }
.ses-foot { text-align: left; }
.ses-pillars { display: flex; flex-direction: column; gap: 10px; }
.ses-pillar { display: flex; flex-direction: column; gap: 4px; }
.ses-pillar-row { display: flex; align-items: center; gap: 10px; }
.ses-pillar-name { width: 104px; font-size: 12.5px; font-weight: 600; flex: 0 0 auto; }
.ses-pillar-name.is-quiet { color: var(--muted); font-weight: 500; }
.ses-pillar-n { font-size: 10px; color: var(--muted); width: 88px; text-align: right; white-space: nowrap; flex: 0 0 auto; }
.ses-pillar-note { font-size: 12.5px; color: var(--muted); line-height: 1.4; padding-left: 114px; }
.ses-notes { display: flex; flex-direction: column; gap: 10px; }
.ses-note { display: flex; flex-direction: column; gap: 8px; }
.ses-note-head { display: flex; align-items: center; gap: 8px; }
.ses-note-name { font-size: 14px; font-weight: 600; flex: 1; min-width: 0; }
.ses-note-text { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.ses-note-obs { display: flex; flex-direction: column; gap: 4px; }
.ses-note-ob { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.ses-note-empty { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); }
.card.is-dashed { border-style: dashed; border-color: var(--line-2); background: transparent; }

/* content ideas */
.ses-clip { gap: 10px; }
.ses-clip-title { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; }
.ses-clip.is-quiet .ses-clip-title { color: var(--muted); }

/* the transcript — a sheet on the phone, a drawer on desktop */
.tr { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.tr-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tr-meta { display: flex; gap: 8px; flex: 1; min-width: 0; font-size: 10px; color: var(--faint); }
.tr-hits { color: var(--sage); }
.tr-search { width: 150px; }
.tr-lines { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: auto; }
.tr-line { display: flex; gap: 10px; padding: 8px; border-bottom: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; line-height: 1.5; text-align: left; }
.tr-line:last-child { border-bottom: 0; }
.tr-line.is-on { background: var(--sage-tint); border-bottom-color: transparent; }
.tr-who { width: 62px; flex: 0 0 auto; font-size: 10px; color: var(--muted); padding-top: 3px; }
.tr-line.is-on .tr-who { color: var(--sage); }
.tr-text { flex: 1; min-width: 0; color: var(--ink-2); }
.tr-mark { background: var(--sage-tint); color: var(--ink); padding: 0 2px; border-radius: 3px; }
.tr-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); }
.tr-act { font-family: var(--mono); font-size: 9px; color: var(--faint-2); background: var(--screen); padding: 5px 8px; border-radius: 5px; }
.tr-act.is-sage { background: var(--sage-tint); color: var(--sage-deep); }
.tr-act.is-clay { background: var(--clay-tint); color: var(--clay-ink); }
.tr-empty { padding: 16px 0; }
.sheet.is-transcript { height: 88dvh; }
.sheet.is-transcript .sheet-body { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

/* ---- group (docs/design/group.md) ---- */
.sage { color: var(--sage); }
.num.is-strong { color: var(--ink); font-weight: 600; }
.more-row.is-center { justify-content: center; padding-left: 14px; }
.prose-body.is-plain { cursor: default; }

.group-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 18px; }
.group-head .greeting { padding: 0; min-width: 0; }
.group-head .eyebrow { display: none; } /* the phone top bar already says "Group · synced 6:58" */
.group-actions { flex: 0 0 auto; }

/* next call */
.gcall { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.gcall-when { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gcall-date { font-family: var(--serif); font-size: 20px; font-weight: 500; }
.gcall-block { display: flex; flex-direction: column; gap: 5px; }
.gcall-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gcall-topic { font-size: 15px; font-weight: 600; line-height: 1.35; cursor: pointer; }
.gcall-topic.is-blank { color: var(--faint); font-weight: 500; }
.gcall-guest { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px; background: var(--screen); border: 1px solid var(--line); }
.gcall-guest-name { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcall-q { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.gcall-prep { display: flex; align-items: center; gap: 10px; width: 100%; border-top: 1px solid var(--line); padding-top: 10px; text-align: left; }
.gcall-prep-label { flex: 1; min-width: 0; font-size: 13.5px; }

/* what they're talking about */
.gdigest { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.gchans { display: flex; flex-direction: column; gap: 7px; }
.gchan { display: flex; align-items: center; gap: 10px; }
.gchan-name { width: 84px; font-size: 10.5px; color: var(--muted); flex: 0 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gchan-n { width: 24px; font-size: 10px; color: var(--muted); text-align: right; flex: 0 0 auto; }
.gdigest-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 10px; font-size: 13.5px; color: var(--ink-2); }
.gdigest-threads { border-top: 1px solid var(--line); padding-top: 10px; }
.gposters { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.gposter-row { display: flex; gap: 10px; flex-wrap: wrap; }
.gposter { display: flex; align-items: center; gap: 5px; }
.gposter-n { font-size: 10px; color: var(--muted); }

/* calls: the row, the table, the four pillar bars */
.gc-date { font-family: var(--mono); font-size: 10px; color: var(--muted); width: 44px; flex: 0 0 auto; }
.gc-title { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-title.is-quiet { color: var(--muted); }
.gc-n { font-family: var(--mono); font-size: 10px; color: var(--muted); flex: 0 0 auto; white-space: nowrap; }
.gc-n.is-warn { color: var(--clay-ink); }
.gc-open { font-family: var(--mono); font-size: 10px; color: var(--sage); text-align: right; }
.gmini { display: flex; gap: 2px; width: 44px; flex: 0 0 auto; }
.gmini > span { flex: 1; height: 12px; border-radius: 2px; background: var(--paused-tint); position: relative; overflow: hidden; display: block; }
.gmini > span > i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--sage); display: block; }
.gmini.is-empty { opacity: 0.5; }
.gcov-0 { height: 0; }
.gcov-1 { height: 33%; }
.gcov-2 { height: 66%; }
.gcov-3 { height: 100%; }
.gcrow { display: grid; grid-template-columns: 56px minmax(0, 1fr) 44px 92px 72px 56px; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.gcrow:last-child { border-bottom: 0; }
.gcrow.is-head { padding: 9px 14px; }
.gcrow.is-link { cursor: pointer; }
.gcrow.is-link:hover { background: var(--screen); }
.gcrow .gc-date, .gcrow .gc-n { width: auto; text-align: right; }
.gcrow .gc-date { text-align: left; }
.gpillars { text-align: left; }

/* roster */
.gtabs { display: flex; gap: 16px; padding: 0 14px; border-bottom: 1px solid var(--line-2); overflow-x: auto; scrollbar-width: none; }
.gtabs::-webkit-scrollbar { display: none; }
.gtab { padding: 10px 2px; font-size: 13px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.gtab.is-on { color: var(--ink); font-weight: 600; border-bottom-color: var(--sage); }
.grow-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.grow-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.grow-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grow-meta { font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gfoot { text-align: left; line-height: 1.5; }

/* a member */
.gm-head { gap: 10px; }
.gm-band { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gm-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gm-head .page-title { font-size: 28px; line-height: 1.05; }
.gm-facts { font-size: 12.5px; color: var(--muted); }
.gm-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.gm-actions { flex-wrap: wrap; }
.gm-profile { display: flex; flex-direction: column; gap: 10px; }
.gm-profile-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.gm-notes { display: flex; flex-direction: column; gap: 10px; }
.gm-note { display: flex; flex-direction: column; gap: 8px; }
.gm-note-head { display: flex; align-items: center; gap: 8px; }
.gm-note-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-note-text { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.gm-note-obs { display: flex; flex-direction: column; gap: 4px; }
.gm-note-ob { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.gm-posts { display: flex; flex-direction: column; gap: 8px; }
.gm-posts-line { font-size: 13.5px; line-height: 1.45; }


/* ═══ content (docs/design/content.md) ═════════════════════════════════════ */
.content-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 18px; }
.content-head .greeting { padding: 0; min-width: 0; }
.content-head .eyebrow { display: none; } /* the phone top bar already says "Content · synced 6:58" */
.content-actions { flex: 0 0 auto; }
.content-actions .dot { width: 9px; height: 9px; }

/* kind chips — the one strip that switches the road */
.kchip { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; background: var(--white); color: var(--muted); border: 1px solid var(--line-2); }
.kchip.is-on { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* stage tiles — four groups on the phone, one per stage on a short road */
.tiles-wrap { position: relative; }
.tiles.is-road { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.tiles.is-road::-webkit-scrollbar { display: none; }
.tiles.is-road .tile { flex: 1 0 92px; }
.road-note { font-size: 10px; color: var(--faint); margin-top: 8px; }
.att-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the list, grouped by stage */
.cstage { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 10px 14px 4px; }
.cstage .n { color: var(--faint); }
.cstage-dash { color: var(--faint-2); }
.citem { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); width: 100%; }
.citem:last-child { border-bottom: 0; }
.citem.is-quiet .citem-t { color: var(--muted); }
.citem.is-selected { background: var(--sage-tint); }
.citem-t { font-size: 14px; font-weight: 600; line-height: 1.3; }
.citem-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cstages .more-row { border-bottom: 1px solid var(--line); }

/* idea inbox — a quote, where it came from, and the two things to do with it */
.cidea { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.cidea:last-child { border-bottom: 0; }
.cidea-q { font-family: var(--serif); font-size: 15px; line-height: 1.4; text-align: left; }
.cidea-foot { display: flex; align-items: center; gap: 8px; }
.cidea-acts { display: flex; align-items: center; gap: 6px; margin-left: auto; }

/* studio — the recorder is Phase 6, so the card says so and stays quiet */
.cstudio { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.cstudio-top { display: flex; align-items: center; gap: 12px; }
.cstudio-mark { width: 44px; height: 44px; border-radius: 50%; border: 1.6px dashed var(--faint-2); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.cstudio-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--paused-tint); }
.cstudio-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cstudio-title { font-size: 15px; font-weight: 600; color: var(--muted); }
.cstudio-note { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.cstudio-rows { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.cstudio-rows .row { padding: 10px 0; }

/* one item: the stepper is the primary control, the stage's job comes first */
.citem-detail { display: flex; flex-direction: column; gap: 14px; }
.citem-head { display: flex; flex-direction: column; gap: 8px; }
.citem-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.citem-title { font-family: var(--serif); font-weight: 500; font-size: 24px; letter-spacing: -0.015em; line-height: 1.15; }
.csteps-wrap { position: relative; margin: 0 -18px; }
.csteps { overflow-x: auto; scrollbar-width: none; padding: 2px 18px 0; }
.csteps::-webkit-scrollbar { display: none; }
.cstep-track { display: flex; width: max-content; }
.cstep { position: relative; width: 54px; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cstep::after { content: ''; position: absolute; top: 4px; left: 50%; width: 100%; height: 2px; background: var(--paused-tint); }
.cstep:last-child::after { display: none; }
.cstep.is-done::after { background: var(--sage); }
.cstep-d { position: relative; z-index: 1; width: 10px; height: 10px; border-radius: 50%; background: var(--paused-tint); border: 1.6px solid var(--faint-2); box-sizing: border-box; }
.cstep-l { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.cstep.is-done .cstep-d { background: var(--sage); border-color: var(--sage); }
.cstep.is-done .cstep-l { color: var(--muted); }
.cstep.is-now .cstep-d { width: 14px; height: 14px; background: var(--white); border: 3px solid var(--sage); margin-top: -2px; }
.cstep.is-now .cstep-l { color: var(--ink); font-weight: 500; }
.csteps-fade { position: absolute; top: 0; bottom: 0; width: 30px; pointer-events: none; }
.csteps-fade.is-left { left: 0; background: linear-gradient(90deg, var(--white), transparent); }
.csteps-fade.is-right { right: 0; background: linear-gradient(90deg, transparent, var(--white)); }
.cstage-bar { display: flex; align-items: center; gap: 8px; }
.cstage-when { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cstage-acts { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.cblock { display: flex; flex-direction: column; }
.cblock .section-head { margin-bottom: 8px; }
.cblock .det-fields { margin-top: 0; }
.row.is-quiet .row-title, .row-title.is-quiet { color: var(--muted); }
.det-v-list { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

/* ═══ finance (docs/design/finance.md) ═════════════════════════════════════ */
.fin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 18px; }
.fin-head .greeting { padding: 0; min-width: 0; }
.fin-head .eyebrow { display: none; } /* the phone top bar already carries the sync line */
.fin-head-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.fin-sync, .fin-addline { display: none; }
.fin-month { display: flex; align-items: center; gap: 2px; height: 36px; border-radius: 10px; background: var(--white); border: 1px solid var(--line-2); padding: 0 4px; flex: 0 0 auto; }
.fin-month-arrow { width: 30px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.fin-month-arrow.is-off { opacity: 0.35; }
.fin-month-label { font-size: 11.5px; font-weight: 500; padding: 0 6px; white-space: nowrap; }
.fin-note { font-size: 10px; color: var(--faint); margin-top: 8px; }
.btn-white.is-sage { color: var(--sage-deep); border-color: var(--sage); }

/* connect / empty cards that carry their own actions */
.fin-connect { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.fin-connect-title { font-size: 14px; font-weight: 600; }

/* cash + this-month tiles — three across on the phone, one row on desktop */
.tiles.is-cash { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

/* bars: stream · bar · count · amount */
.fin-bars { display: flex; flex-direction: column; gap: 9px; }
.fin-brow { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; }
.fin-bk { width: 78px; font-size: 12.5px; font-weight: 600; flex: 0 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-bk.is-quiet { color: var(--muted); font-weight: 500; }
.fin-bars.is-out .bar-fill { background: var(--ink); }
.fin-bars.is-out .bar-fill.is-quiet { background: var(--faint-2); }
.fin-bn { font-size: 10px; color: var(--muted); width: 76px; text-align: right; flex: 0 0 auto; }

/* budget table */
.fin-thead { padding-top: 8px; padding-bottom: 8px; }
.fin-thead .eyebrow { white-space: nowrap; }
.fin-thead > .eyebrow:first-child { flex: 1; }
.fin-th { width: 58px; text-align: right; flex: 0 0 auto; }
.fin-brow-b { width: 100%; text-align: left; }
.fin-amt { font-size: 12px; width: 62px; text-align: right; flex: 0 0 auto; white-space: nowrap; }
/* the budget table lives in a column on desktop: three numbers plus a name in
   ~340px only fits if the columns stop claiming phone widths */
.fin-thead .fin-th, .fin-brow-b .fin-amt { width: 54px; }
.fin-thead, .fin-brow-b { gap: 8px; }
.fin-brow-b .row-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-needs-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a count or a "3× usual" is the point of the row — it never gets squeezed out */
.fin-needs-tag { flex: 0 0 auto; max-width: none; }

/* transactions */
.fin-txn-head { margin-bottom: 10px; }
.fin-txn-head .mono { font-size: 10px; color: var(--faint); margin-top: 3px; }
.fin-filters { margin-bottom: 10px; }
.fin-filters .fbar-wrap { margin-top: 0; }
.fin-search { width: 132px; min-height: 32px; height: 32px; border-radius: 999px; font-size: 12.5px; padding: 0 12px; flex: 0 0 auto; }
.fin-txn { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.fin-txn:last-child { border-bottom: 0; }
.fin-txn.is-ask { background: var(--clay-tint); }
.fin-txn.is-pending .fin-name, .fin-txn.is-pending .fin-amt { color: var(--muted); }
.fin-txn-open { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; text-align: left; }
.fin-date { font-family: var(--mono); font-size: 10px; color: var(--muted); width: 44px; flex: 0 0 auto; }
.fin-name { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-stream { flex: 0 0 auto; }
.fin-pill-ask { background: var(--white); color: var(--clay-ink); border: 1px dashed var(--clay); }
.fin-poker { width: 14px; height: 14px; border-radius: 4px; background: var(--clay); color: var(--white); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.fin-txns .more-row { justify-content: center; padding-left: 14px; color: var(--sage); }
.fin-col-poker, .fin-col-status { display: none; }

/* set-asides — a target written down, never a transfer */
.fin-sa { display: flex; flex-direction: column; gap: 10px; }
.fin-sa-row { display: flex; align-items: center; gap: 10px; }
.fin-sa-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-sa-row .mono { flex: 0 0 auto; }
.fin-sa-bar { height: 8px; }
.fin-ledger-row { padding-left: 14px; }

/* one transaction: the sheet */
.fin-sheet { display: flex; flex-direction: column; gap: 14px; }
.fin-sheet-head { display: flex; flex-direction: column; gap: 8px; }
.fin-sheet-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fin-sheet-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.fin-sheet-title .det-title { flex: 1; min-width: 0; }
.fin-sheet-amt { font-family: var(--serif); font-size: 26px; line-height: 1; flex: 0 0 auto; }
.fin-block { display: flex; flex-direction: column; }
.fin-block .section-head { margin-bottom: 8px; }
.fin-opts { display: flex; flex-wrap: wrap; gap: 5px; }
.fin-opt { height: 34px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--white); display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.fin-opt.is-on { background: var(--ink); color: var(--white); border-color: var(--ink); }
.fin-opt.is-suggested { border-color: var(--sage); color: var(--sage-deep); background: var(--sage-tint); }
.fin-suggest { margin-top: 8px; line-height: 1.4; }
.fin-fields { display: flex; flex-direction: column; }
.fin-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); width: 100%; text-align: left; }
.fin-field:last-child { border-bottom: 0; }
.fin-fk { font-size: 13px; color: var(--muted); flex: 0 0 auto; }
.fin-fv { font-size: 13.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.fin-toggle { width: 38px; height: 22px; border-radius: 11px; background: var(--paused-tint); position: relative; flex: 0 0 auto; }
.fin-toggle.is-on { background: var(--sage); }
.fin-toggle-knob { position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); transition: left 0.15s ease; }
.fin-toggle.is-on .fin-toggle-knob { left: 18px; }
.fin-sheet-acts { padding-bottom: 8px; }
.fin-suggest-note { margin-bottom: 10px; }
.fin-suggest-acts { margin-top: 12px; }

/* ---- life (docs/design/life.md) ---- */
.life-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 18px; }
.life-head .greeting { padding: 0; min-width: 0; }
.life-head-actions { flex: 0 0 auto; }

/* today: a filled circle (logged) or a dashed one (tap to log) */
.life-row { gap: 12px; }
.life-mark { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.life-mark.is-done { background: var(--sage); color: var(--white); }
.life-mark.is-done:active { background: var(--sage-deep); }
.life-mark.is-todo { border: 1.6px dashed var(--faint-2); color: var(--faint); }
.life-mark.is-todo:active { background: var(--sage-tint); border-color: var(--sage); color: var(--sage); }
.life-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.life-row-name { font-size: 14.5px; font-weight: 600; }
.life-row-sub { font-size: 10px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* this week: a dot per day, size = value vs target */
.life-wk { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.life-wk:last-child { border-bottom: 0; }
.life-wk-head { padding-top: 8px; padding-bottom: 6px; }
.life-wk-k { width: 84px; flex: 0 0 auto; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.life-dots { flex: 1; display: flex; justify-content: space-between; align-items: center; }
.life-day { font-family: var(--mono); font-size: 9px; color: var(--faint); }
.life-day.is-today { color: var(--ink); font-weight: 500; }
.life-d { width: 14px; height: 14px; border-radius: 50%; background: var(--paused-tint); flex: 0 0 auto; }
.life-d.is-s { width: 9px; height: 9px; background: var(--sage); opacity: 0.55; }
.life-d.is-m { width: 12px; height: 12px; background: var(--sage); opacity: 0.8; }
.life-d.is-l { width: 15px; height: 15px; background: var(--sage); }
.life-d.is-today { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--faint-2); }
.life-d.is-ahead { opacity: 0.4; }

/* the week's totals — one per habit, and the quiet-week line in their place */
.life-totals { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; }
.life-total { flex: 1 0 auto; min-width: 68px; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.life-total .eyebrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.life-total-n { font-family: var(--serif); font-size: 20px; line-height: 1; white-space: nowrap; }
.life-quiet { padding: 12px 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.card.is-totals .life-totals, .card.is-totals .life-quiet { border-top: 0; }

/* reading */
.life-book { display: flex; align-items: center; gap: 12px; }
.life-book-cover { width: 38px; height: 52px; border-radius: 4px; background: var(--slate-tint); border: 1px solid var(--line-2); flex: 0 0 auto; }
.life-book-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.life-book-title { font-size: 16px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.life-book-sub { font-size: 12.5px; color: var(--muted); }
.life-book-add { flex-direction: row; align-items: center; gap: 8px; margin-bottom: 0; }

/* notes written with a log */
.life-note { align-items: flex-start; }
.life-chip { font-size: 9px; color: var(--faint-2); background: var(--screen); padding: 4px 6px; border-radius: 5px; white-space: nowrap; max-width: 96px; overflow: hidden; text-overflow: ellipsis; flex: 0 0 auto; }
.life-note-text { flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; }

/* practice ↔ teaching */
.card.is-practice { background: var(--sage-tint); border-color: var(--sage-tint); }
.life-practice { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.life-practice-text { flex: 1; font-size: 13px; color: var(--sage-deep); line-height: 1.45; }

/* the habits list */
.life-hrow { width: 100%; }
.life-hname { flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.life-hname.is-quiet { color: var(--muted); }
.life-manage-line { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.life-manage-line .eyebrow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.life-start { padding: 18px 16px; display: flex; flex-direction: column; gap: 8px; }
.life-start-title { font-size: 14px; font-weight: 600; }

/* the log sheet */
.life-sheet-day { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.life-sheet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.life-opt { height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--white); display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.life-opt.is-on { background: var(--ink); color: var(--white); border-color: var(--ink); }
.life-opt.is-done { background: var(--sage-tint); border-color: var(--sage-tint); color: var(--sage-deep); }
.life-vals { display: flex; gap: 8px; flex-wrap: wrap; }
.life-val { width: 56px; height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--white); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 14px; }
.life-val.is-other { width: auto; padding: 0 14px; font-family: var(--sans); font-size: 13px; color: var(--muted); }
.life-val.is-on { background: var(--sage); color: var(--white); border-color: var(--sage); }
.life-other { margin-top: 10px; }
.life-say { display: block; width: 100%; text-align: left; font-size: 10px; color: var(--faint); margin-bottom: 14px; }
.life-say:hover { color: var(--sage); }
.life-sheet-acts { padding-bottom: 8px; }

/* ---- inbox (docs/design/inbox.md) ---- */
.ib-head { display: grid; gap: 14px; padding: 0 18px; }
.ib-head .greeting { padding: 0; }
.ib-head .eyebrow { display: none; margin-bottom: 8px; }
.ib-cap-wrap { display: flex; flex-direction: column; gap: 8px; }
/* capture: one field, the recorder (Phase 6), paste, and the ink button */
.ib-cap { display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 8px 0 14px; border-radius: 14px; background: var(--white); border: 1px solid var(--line-2); }
.ib-cap:focus-within { border-color: var(--sage); box-shadow: 0 0 0 3px var(--sage-tint); }
.ib-cap-input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 14.5px; padding: 14px 0; }
.ib-cap-input::placeholder { color: var(--faint); }
.ib-cap-icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); flex: 0 0 auto; }
.ib-cap-icon:hover { background: var(--screen); color: var(--ink); }
.ib-cap-go { flex: 0 0 auto; }
.ib-foot { font-size: 10px; color: var(--faint); line-height: 1.5; }
.ib-list .ib-foot, .ib-head .ib-foot { padding: 0 2px; }
.section .ib-foot { margin-top: 8px; }

/* one untriaged item: the text, where it came from, the line, the chips */
.ib-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.ib-item:last-child { border-bottom: 0; }
.ib-item:hover { background: var(--white); }
.ib-item.is-selected, .ib-item.is-selected:hover { background: var(--sage-tint); }
.ib-item .chk { margin-top: 2px; }
.ib-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ib-text { font-size: 14.5px; line-height: 1.4; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ib-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ib-sug { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--sage-tint); }
.ib-sug-mark { color: var(--sage); flex: 0 0 auto; }
.ib-sug-line { flex: 1; min-width: 0; font-size: 12.5px; color: var(--sage-deep); line-height: 1.4; }
.ib-accept { height: 26px; padding: 0 10px; border-radius: 999px; background: var(--sage); color: var(--white); font-size: 11.5px; font-weight: 600; flex: 0 0 auto; }
.ib-accept:hover { background: var(--sage-deep); }
.ib-none { font-size: 10px; color: var(--faint); line-height: 1.5; }
/* the seven chips: one strip with a fade at the right edge, never a second
   line — clipped to look calm, scrolled sideways so every chip is reachable */
.ib-acts { position: relative; }
.ib-acts-in { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-right: 40px; }
.ib-acts-in::-webkit-scrollbar { display: none; }
.ib-acts-fade { position: absolute; top: 0; right: 0; bottom: 0; width: 44px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--card)); }
.ib-item:hover .ib-acts-fade, .ib-item.is-selected .ib-acts-fade { background: none; }
.ib-act { height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--white); display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; flex: 0 0 auto; }
.ib-act:hover { border-color: var(--sage); color: var(--sage-deep); }
.ib-act.is-on { border-color: var(--sage); color: var(--sage-deep); }
.ib-act.is-quiet { color: var(--faint); }
.ib-zero { padding: 22px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ib-zero-title { font-size: 22px; font-weight: 500; }
.ib-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ib-bulk-note { font-size: 10px; color: var(--faint); }

/* recently triaged · what feeds the inbox */
.ib-tri { gap: 10px; }
.ib-tri-title { flex: 1; min-width: 0; font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-went { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; background: var(--sage-tint); color: var(--sage-deep); font-size: 10.5px; font-weight: 600; white-space: nowrap; flex: 0 0 auto; }
.ib-src-title { flex: 1; min-width: 0; font-size: 14px; }

/* the triage panel — the phone sheet body and the desktop pane share it */
.ib-panel { display: flex; flex-direction: column; gap: 12px; }
.ib-panel-head { display: flex; align-items: center; gap: 8px; }
.ib-panel-head .link-mono { margin-left: auto; }
.ib-panel-text { font-size: 17px; line-height: 1.4; cursor: pointer; overflow-wrap: anywhere; }
.ib-sug.is-panel { padding: 10px 12px; }
.ib-make { display: flex; flex-direction: column; gap: 8px; }
.ib-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ib-opt { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--white); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ib-opt svg { color: var(--muted); flex: 0 0 auto; }
.ib-opt.is-on { border-color: var(--sage); background: var(--sage-tint); color: var(--sage-deep); }
.ib-opt.is-on svg { color: var(--sage-deep); }
.ib-opt-k { margin-left: auto; font-size: 10px; color: var(--faint); font-weight: 400; }
.ib-hint { font-size: 10px; color: var(--faint); line-height: 1.5; }
.ib-fields { display: flex; flex-direction: column; }
.ib-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 0; border-bottom: 1px solid var(--line); text-align: left; }
.ib-f:last-child { border-bottom: 0; }
.ib-f.is-tall { align-items: flex-start; }
.ib-f-k { font-size: 13px; color: var(--muted); flex: 0 0 auto; }
.ib-f-v { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13.5px; font-weight: 600; }
.ib-f-v .chev { color: var(--faint); flex: 0 0 auto; }
.ib-f-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-f-input, .ib-f-area { flex: 1; min-width: 0; margin-left: 12px; border: 0; border-radius: 8px; background: var(--white); padding: 8px 10px; font-size: 13.5px; font-weight: 600; outline: none; }
.ib-f-area { font-weight: 400; resize: vertical; line-height: 1.45; }
.ib-f-input:focus, .ib-f-area:focus { box-shadow: 0 0 0 2px var(--sage-tint); }
.ib-panel-acts { display: flex; gap: 8px; margin-top: 2px; }
.ib-panel-acts .btn:first-child { flex: 1; }
.ib-cols { padding: 0 18px; }
.ib-pane { display: none; }

/* ---- switch (ui/toggle.js) ---- */
.tog { width: 34px; height: 20px; border-radius: 10px; background: var(--paused-tint); position: relative; flex: 0 0 auto; transition: background 0.15s ease; }
.tog.is-on { background: var(--sage); }
.tog-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); transition: transform 0.15s ease; }
.tog.is-on .tog-knob { transform: translateX(14px); }
.tog:disabled { opacity: 0.5; }

/* ---- label · value row (ui/row.js kvRow) ---- */
.kv { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.kv:last-child { border-bottom: 0; }
.kv-k { color: var(--muted); flex: 0 0 auto; }
.kv-v { font-family: var(--mono); font-size: 11px; color: var(--ink); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kv.is-wrap { align-items: flex-start; }
.kv.is-wrap .kv-v { white-space: normal; }

/* ---- settings · sources (docs/design/settings-sources.md) ---- */
.set-head { display: grid; gap: 14px; padding: 0 18px; }
.set-head .greeting { padding: 0; }
.set-head-acts { display: none; gap: 8px; }
.set-legend { white-space: nowrap; }
.set-foot { font-size: 10px; color: var(--faint); line-height: 1.5; margin-top: 8px; padding: 0 2px; }
.set-foot.is-failed { color: var(--clay-ink); }
.set-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin: 16px 0 8px; }
.tag.is-failed { color: var(--clay-ink); background: var(--clay-tint); }

/* one source card: status · what came in · what it writes · the levers */
.set-src { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.set-src:last-child { border-bottom: 0; }
.set-src.is-failed { background: var(--clay-tint); }
.set-src.is-off .set-src-n, .set-src.is-parked .set-src-n { color: var(--muted); }
.set-src-h { display: flex; align-items: center; gap: 8px; }
.set-src-n { font-size: 14.5px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-src-meta { font-size: 10px; color: var(--muted); line-height: 1.6; }
.set-src-meta.is-failed { color: var(--clay-ink); }
.set-src-fix { font-size: 12.5px; color: var(--clay-ink); line-height: 1.45; }
.set-src-what { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.set-src-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.set-src-scope { margin-left: auto; font-size: 10px; color: var(--faint); white-space: nowrap; }

/* the sync log */
.set-run { flex-wrap: wrap; gap: 10px; }
.set-run.is-failed { background: var(--clay-tint); }
.set-run.is-failed .set-run-src { color: var(--clay-ink); }
.set-run-src { flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-run-err { width: 100%; padding-left: 16px; font-size: 10px; color: var(--clay-ink); line-height: 1.5; }
.set-run-err:empty { display: none; }

/* keys & access — a name and a yes/no, never a value */
.set-key { flex-wrap: wrap; }
.set-key-name { flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; }
.set-envrow { gap: 10px; }
.set-env { flex: 1; min-width: 0; font-size: 11px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }

/* registered repos */
.set-repo { flex-wrap: wrap; }
.set-repo-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.set-repo-name { font-size: 13.5px; font-weight: 600; }
.set-repo-path { font-size: 10px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-repo-acts { width: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.set-repo-acts .link-mono { margin-left: 0; }
.set-repo-acts .tag { margin-right: auto; }

/* agent · backups */
.set-posture { font-family: var(--sans); font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.set-kv-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.set-backup { flex: 1; min-width: 0; font-size: 11px; overflow: hidden; text-overflow: ellipsis; }

/* health · about */
.set-doc .mono { font-size: 10px; }

/* brief rules */
.set-rule { align-items: flex-start; }
.set-rule-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.set-rule-name { font-size: 13.5px; }
.set-rule-sub { font-size: 12px; color: var(--faint); line-height: 1.4; }

/* the sheets: connect a bank · Google steps · a key · register a repo · restore */
.set-sheet { display: flex; flex-direction: column; }
.set-sheet-title { font-size: 21px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; margin-bottom: 8px; }
.set-sheet .card-note { margin-bottom: 12px; }
.set-sheet-acts { margin-top: 12px; }
.set-eyebrow-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.set-steps { display: flex; flex-direction: column; gap: 10px; }
.set-step { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.45; }
.set-step-n { width: 18px; height: 18px; border-radius: 50%; background: var(--sage-tint); color: var(--sage-deep); font-size: 10px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-top: 1px; }
.set-code { padding: 10px 12px; border-radius: 10px; background: var(--screen); border: 1px solid var(--line); font-size: 12px; color: var(--ink-2); overflow-x: auto; white-space: nowrap; }
.set-detect { margin-top: 4px; }
.set-pickbtn { width: 100%; justify-content: space-between; }

/* ---- workbench · idle (docs/design/workbench.md) ---- */
.wb-head { display: grid; gap: 14px; padding: 0 18px; }
.wb-head .greeting { padding: 0; }
.wb-head-acts { display: none; gap: 8px; }
.wb-foot { font-size: 10px; color: var(--faint); line-height: 1.5; margin-top: 8px; padding: 0 2px; }

/* the door — what Phase 5 puts here, said in words instead of dead buttons */
.wb-door { display: flex; flex-direction: column; gap: 10px; }
.wb-door-title { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; }
.wb-soon { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.wb-soon-item { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.wb-soon-item .dot { margin-top: 6px; }
.wb-door .wb-foot { margin-top: 2px; }

/* one repo: name · branch · ahead/behind, the path, then how current it is */
.wb-repo { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.wb-repo:last-child { border-bottom: 0; }
.wb-repo.is-off .wb-repo-n { color: var(--muted); }
.wb-repo-h { display: flex; align-items: center; gap: 8px; }
.wb-repo-n { font-size: 14.5px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-repo-p { font-size: 10px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-repo-m { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 10px; color: var(--muted); line-height: 1.5; }
.wb-repo-m .is-clay { color: var(--clay-ink); }
.wb-repo-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---- tab bar (phone) ---- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding: 10px 6px env(safe-area-inset-bottom); background: var(--white); border-top: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-around; z-index: 30; }
.tab { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; color: var(--faint); padding-top: 0; }
.tab-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
.tab.on { color: var(--sage); }

/* ---- FAB ---- */
.fab { position: fixed; right: 18px; bottom: calc(92px + env(safe-area-inset-bottom)); width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--white); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-fab); z-index: 31; }
.fab:active { background: var(--ink-2); }

/* ---- toast ---- */
.toasts { position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; z-index: 60; padding: 0 18px; }
.toast { pointer-events: auto; max-width: 420px; background: var(--ink); color: var(--white); font-size: 13px; padding: 10px 14px; border-radius: 12px; box-shadow: var(--shadow-pop); display: flex; align-items: center; gap: 12px; opacity: 0; transform: translateY(8px); transition: opacity 0.18s ease, transform 0.18s ease; }
.toast.is-in { opacity: 1; transform: none; }
.toast.is-error { background: var(--clay); }
.toast button { color: var(--white); font-weight: 600; font-size: 12.5px; text-decoration: underline; }

/* ---- sheet (phone) / dialog (desktop) ---- */
.sheet-root { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet-root[hidden] { display: none; }
.scrim { position: absolute; inset: 0; background: var(--scrim); }
.sheet { position: relative; width: 100%; max-height: 88dvh; background: var(--white); border-radius: 20px 20px 0 0; box-shadow: var(--shadow-sheet); display: flex; flex-direction: column; overflow: hidden; transform: translateY(100%); transition: transform 0.22s ease; padding-bottom: env(safe-area-inset-bottom); }
.sheet-root.is-in .sheet { transform: none; }
.sheet-grip { width: 36px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 10px auto 0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 10px; }
.sheet-title { font-family: var(--serif); font-size: 20px; font-weight: 500; }
.sheet-body { padding: 0 18px 18px; overflow: auto; }
.sheet-close { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--muted-2); border: 1px solid var(--line-2); }

/* ---- forms ---- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.input, textarea.input { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--white); font-size: 15px; line-height: 1.4; resize: vertical; }
.input:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px var(--sage-tint); }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---- assistant panel ---- */
.assistant { display: none; flex-direction: column; background: var(--white); }
.as-head { display: flex; align-items: center; gap: 10px; padding: 18px 18px 12px; border-bottom: 1px solid var(--line); }
.as-orb { width: 28px; height: 28px; border-radius: 50%; background: var(--sage-tint); color: var(--sage); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.as-title { font-size: 13.5px; font-weight: 600; }
.as-scope { font-family: var(--mono); font-size: 10px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-head-text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.as-iconbtn { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--faint); }
.as-iconbtn:hover { background: var(--screen); color: var(--ink); }
/* the voice orb: idle → connecting (pulse) → live (clay) → speaking (pulse) */
.as-voice.is-connecting { color: var(--clay); animation: pulse 1.2s ease-in-out infinite; }
.as-voice.is-live { background: var(--clay-tint); color: var(--clay-ink); }
.as-voice.is-live:hover { background: var(--clay-tint); color: var(--clay-ink); }
.as-voice.is-speaking { animation: pulse 1.6s ease-in-out infinite; }
.as-body { flex: 1; min-height: 0; overflow: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.as-intro { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.as-chips { display: flex; flex-direction: column; gap: 6px; }
.as-chip { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line-2); font-size: 12.5px; text-align: left; background: var(--white); }
.as-chip:hover { border-color: var(--sage); color: var(--sage-deep); }
.as-msg { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.as-msg.is-user { align-self: flex-end; background: var(--sage-tint); color: var(--sage-deep); padding: 8px 12px; border-radius: 14px 14px 4px 14px; max-width: 88%; }
.as-msg.is-assistant { color: var(--ink-2); }
.as-msg.is-error { color: var(--clay-ink); font-size: 12.5px; }
.as-p { margin: 0 0 8px; }
.as-p:last-child { margin-bottom: 0; }
.as-h { font-family: var(--serif); font-size: 15px; font-weight: 500; margin: 10px 0 4px; color: var(--ink); }
.as-list { margin: 0 0 8px; padding-left: 18px; }
.as-list li { margin: 2px 0; }
.as-code { font-family: var(--mono); font-size: 12px; background: var(--screen); padding: 1px 5px; border-radius: 5px; }
.as-tool { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--faint); padding: 2px 0; }
.as-tool.is-done { color: var(--muted-2); }
.as-tool.is-error { color: var(--clay-ink); }
.as-cost { font-family: var(--mono); font-size: 10px; color: var(--faint); padding-top: 4px; border-top: 1px solid var(--line); }
.as-foot { padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.as-input { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 4px 4px 4px 12px; border-radius: 12px; background: var(--screen); border: 1px solid var(--line); }
.as-input textarea { flex: 1; border: 0; background: transparent; resize: none; font-size: 13px; line-height: 1.4; padding: 6px 0; max-height: 120px; min-height: 22px; outline: none; }
.as-input textarea::placeholder { color: var(--faint); }
.as-send { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--sage); }
.as-send:hover { background: var(--sage-tint); }
.as-busy { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--sage); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
/* phone: the assistant is a sheet */
.assistant.is-sheet { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: 88dvh; border-radius: 20px 20px 0 0; box-shadow: var(--shadow-sheet); z-index: 55; transform: translateY(100%); transition: transform 0.22s ease; }
.assistant.is-sheet.is-open { transform: none; }
.as-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 54; }
.as-scrim[hidden] { display: none; }

/* ---- sidebar nav (desktop) ---- */
.nav { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 9px; font-size: 13px; color: var(--muted); width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav:hover { background: var(--white); color: var(--ink); }
.nav.on { background: var(--white); color: var(--ink); font-weight: 600; border: 1px solid var(--line); }
.nav.is-sub { padding-left: 24px; font-size: 12.5px; }
.nav-count { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--faint); }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group .eyebrow { padding: 0 10px 6px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--sage); color: var(--white); display: flex; align-items: center; justify-content: center; }
.brand-name { font-family: var(--serif); font-size: 18px; font-weight: 500; }

/* ---- desktop ≥ 960 ---- */
@media (min-width: 960px) {
  body { background: var(--page); }
  .app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--assistant-w); min-height: 100dvh; background: var(--page); }
  .app.is-assistant-collapsed { grid-template-columns: var(--sidebar-w) minmax(0, 1fr) 52px; }
  .sidebar { display: flex; flex-direction: column; gap: 18px; padding: 22px 14px; border-right: 1px solid var(--line-2); background: var(--page); position: sticky; top: 0; height: 100dvh; overflow: auto; }
  .sidebar-foot { margin-top: auto; }
  .main { min-height: 100dvh; padding: 26px 28px 60px; }
  .page { max-width: none; }
  .page.is-narrow { max-width: var(--content-max); }
  .topbar { display: none; }
  .greeting { padding: 0; }
  .greeting h1, .page-title { font-size: 34px; line-height: 1.05; }
  .page-head { padding: 0; margin-bottom: 18px; }
  .page-head-actions { display: flex; }
  .page-head .eyebrow { display: block; }
  .section { padding: 0; }
  .section + .section { margin-top: 18px; }
  .section-head { margin-bottom: 8px; }
  .cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
  .col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  .col .section { margin-top: 0; }
  .tabbar, .fab { display: none; }
  .toasts { bottom: 24px; left: var(--sidebar-w); right: var(--assistant-w); }
  .sug { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "pill body acts"; column-gap: 10px; }
  .sug:first-child { padding-top: 12px; }
  .sug-body { gap: 2px; }
  .sug-title { font-size: 14px; }
  .sug-reason { font-size: 12px; }
  .act { width: 30px; height: 30px; }
  .row, .task { padding: 11px 14px; }
  .ev-title, .task-title { font-size: 13.5px; }
  .chk { width: 17px; height: 17px; border-radius: 5px; }
  .prep { padding: 14px 16px; gap: 10px; }
  .prep-name { font-size: 19px; }
  .prep-meta { font-size: 12px; }
  .prep-item { font-size: 13px; }
  .prep .btn { height: 36px; border-radius: 10px; font-size: 12.5px; padding: 0 14px; }
  .prep .btn-row .btn { flex: 0 0 auto; }
  .tile { padding: 12px; }
  .recent-row { font-size: 12.5px; }
  .recent { gap: 7px; }
  .error-line { margin: 0 0 18px; }
  .assistant { display: flex; position: sticky; top: 0; height: 100dvh; border-left: 1px solid var(--line-2); }
  .assistant.is-collapsed { align-items: center; padding-top: 18px; }
  .assistant.is-collapsed > *:not(.as-expand) { display: none; }
  .as-expand { display: none; }
  .assistant.is-collapsed .as-expand { display: flex; width: 28px; height: 28px; border-radius: 50%; background: var(--sage-tint); color: var(--sage); align-items: center; justify-content: center; }
  /* tasks: list left, detail pane right (sticky), the quick add in the head */
  .tasks-head { grid-template-columns: minmax(0, 1fr) 380px; align-items: end; padding: 0; }
  .tasks-head .eyebrow { display: block; }
  .tasks-head .greeting h1 { font-size: 34px; line-height: 1.05; }
  .qa { min-height: 42px; padding: 0 6px 0 14px; border-radius: 12px; }
  .qa-input { font-size: 13px; padding: 9px 0; }
  .qa-ask { width: 28px; height: 28px; }
  .fbar-wrap { margin-top: 14px; }
  .fbar { flex-wrap: wrap; overflow: visible; padding: 0; }
  .fbar-fade { display: none; }
  .kbd-hint { display: block; margin-top: 4px; }
  .tasks-cols { padding: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 16px; align-items: start; margin-top: 14px; }
  .tasks-list { min-width: 0; }
  .det-pane { display: block; position: sticky; top: 26px; padding: 18px 18px 16px; }
  .det-title { font-size: 21px; }
  .det-row { padding: 9px 0; }
  .det-actions .btn { height: 40px; border-radius: 11px; font-size: 13px; }
  .det-actions .btn-danger { width: 40px; }
  .tgroup + .tgroup { margin-top: 14px; }
  .more-row { padding-left: 41px; }

  /* areas: the head sits with the page, the cards form a grid, the crumb replaces the back bar */
  .areas-head { padding: 0; margin-bottom: 4px; }
  .areas-head .eyebrow { display: block; margin-bottom: 8px; }
  .areas-head .greeting h1 { font-size: 34px; line-height: 1.05; }
  .segmented { margin: 16px 0 0; max-width: 320px; }
  .areas-body { padding-top: 18px; }
  .area-list { padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; }
  .archived-block { margin: 18px 0 0; }
  .area-name { font-size: 19px; }
  .sub-head { padding: 0; margin-bottom: 18px; }
  .sub-head .page-title { font-size: 32px; }
  .backbar { display: none; }
  .proj-crumb { display: flex; }
  .proj-topline { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 16px; }
  .proj-id { gap: 8px; }
  .proj-actions { flex: 0 0 auto; flex-wrap: nowrap; }
  .proj-actions .btn { height: 36px; border-radius: 10px; font-size: 12.5px; padding: 0 12px; }
  .ptabs-wrap { display: none; }
  .repo-two { gap: 14px; }
  .prow-name { font-size: 13.5px; }

  /* clients: the head sits with the page, the crumb replaces the back bar,
     the identity band spans the width and carries its own actions */
  .clients-head { padding: 0; margin-bottom: 4px; }
  .clients-head .eyebrow { display: block; margin-bottom: 8px; }
  .clients-head .greeting h1 { font-size: 34px; line-height: 1.05; }
  .cl-filters { padding: 16px 0 0; }
  .cl-search { width: 200px; }
  .upnext { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
  .cl-meta { font-size: 12px; }
  .client-head { padding: 0; margin-bottom: 18px; gap: 10px; }
  .cl-crumb { display: flex; }
  .client-topline { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
  .client-band { align-items: center; }
  .client-name-row .page-title { font-size: 30px; }
  .client-facts { gap: 10px; }
  .client-edit { display: none; }
  .client-actions { display: flex; flex-wrap: wrap; }
  .client-actions .btn { flex: 0 0 auto; }
  .cprep { padding: 14px 16px; gap: 12px; }
  .cprep-item, .cprep-title { font-size: 13.5px; }
  .cprep-hw, .cprep-summary { font-size: 13px; }
  .cprep-actions .btn { height: 36px; border-radius: 10px; font-size: 12.5px; }
  .obs-row { padding: 11px 14px; }
  .obs-text { font-size: 13px; }
  .spark { height: 56px; }
  .vgs { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* session: the head is one band (crumb · pills · title + score · actions),
     then the canvas's two columns — the words left, the numbers right */
  .ses-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "crumb crumb" "meta meta" "title actions"; column-gap: 16px; row-gap: 8px; align-items: end; padding: 0; margin-bottom: 18px; }
  .ses-crumb { display: flex; grid-area: crumb; }
  .ses-meta { grid-area: meta; }
  .ses-topline { grid-area: title; align-items: center; }
  .ses-actions { grid-area: actions; flex-wrap: nowrap; }
  .ses-actions .btn { height: 36px; border-radius: 10px; font-size: 12.5px; padding: 0 12px; }
  .ses-head .page-title { font-size: 32px; }
  .ses-badge { width: 52px; height: 52px; border-radius: 13px; }
  .ses-badge-n { font-size: 22px; }
  .ses-obs { padding: 10px 14px; }
  .ses-obs-text, .ses-facing-text, .ses-note-text { font-size: 13px; }
  .ses-summary { font-size: 13.5px; }
  .ses-cat-name, .ses-sub-name { width: 84px; }
  .ses-pillar-note { padding-left: 0; }

  /* group: next call + talking-about left, roster + guests right, calls full width */
  .group-head { padding: 0; margin-bottom: 4px; }
  .group-head .eyebrow { display: block; margin-bottom: 8px; }
  .group-head .greeting h1 { font-size: 34px; line-height: 1.05; }
  .gcall { padding: 12px 16px; gap: 8px; }
  .gcall-date { font-size: 17px; }
  .gcall-topic { font-size: 14px; }
  .gdigest { padding: 12px 16px; gap: 10px; }
  .gchan-name { width: 72px; }
  .gm-head { padding: 0; margin-bottom: 18px; }
  .gm-head .page-title { font-size: 32px; }
  .gm-note-text { font-size: 13px; }


  /* content: the board on the left (one column per stage, empty stages as
     rails, scrolling sideways), the item pane on the right — the pane is where
     the work happens (canvas v1.1 annotation) */
  .content-head { padding: 0; margin-bottom: 4px; }
  .content-head .eyebrow { display: block; margin-bottom: 8px; }
  .content-head .greeting h1 { font-size: 34px; line-height: 1.05; }
  .road-note { display: none; }
  /* a stage name has to stay readable: the tiles grow to fill a short road and
     scroll when "All" puts a dozen stages in the strip */
  .tiles.is-road .tile { flex: 1 0 120px; max-width: 240px; }
  .tiles-wrap .fbar-fade { display: block; }
  .content-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: stretch; margin-top: 18px; height: max(460px, calc(100dvh - 320px)); }
  /* grid items default to min-height:auto, so a tall column would push past the
     row instead of scrolling inside it — both children have to be allowed to be
     shorter than their content */
  .cb-wrap { position: relative; min-width: 0; min-height: 0; height: 100%; }
  .cb-scroll { height: 100%; min-height: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
  /* max-content so a long road scrolls, min-width 100% so a short one spreads
     across the width instead of huddling on the left */
  .cb-track { display: flex; gap: 12px; width: max-content; min-width: 100%; height: 100%; }
  .cb-col { width: 150px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
  /* the one populated stage on the board: its cards fill the room as a wall */
  .cb-col.is-wall { width: auto; flex: 1 1 auto; max-width: none; }
  .cb-col.is-wall .cb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); align-content: start; }
  .cb-col.is-wall .more-row { grid-column: 1 / -1; }
  .cb-colh { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 0 2px 4px; border-bottom: 1px solid var(--line-2); }
  .cb-colh .n { color: var(--faint); margin-left: auto; }
  .cb-cards { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1 1 0; min-height: 0; padding-bottom: 4px; }
  .cb-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 9px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
  .cb-card:hover { border-color: var(--line-2); }
  .cb-card.is-stuck { border-color: var(--clay); }
  .cb-card.is-selected { background: var(--sage-tint); border-color: var(--sage); }
  .cb-card-t { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
  .cb-card .citem-meta { gap: 4px; }
  .cb-cards .more-row { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 10px; padding: 7px 0; }
  .cb-rail { width: 44px; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .cb-railh { width: 100%; text-align: center; font-family: var(--mono); font-size: 10px; color: var(--faint-2); padding: 0 2px 4px; border-bottom: 1px solid var(--line-2); }
  .cb-raill { writing-mode: vertical-rl; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
  .cb-fade { position: absolute; top: 0; right: 0; bottom: 0; width: 56px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--screen)); display: flex; align-items: flex-end; justify-content: flex-end; padding-bottom: 10px; }
  .cb-fade.is-off { display: none; }
  .cpane { padding: 16px 18px; height: 100%; min-height: 0; overflow: auto; }
  .cpane .citem-title { font-size: 20px; }
  .citem-when { margin-left: auto; white-space: nowrap; }
  .cpane .row { padding: 9px 0; }
  .cpane .card { border: 0; border-radius: 0; background: transparent; }
  .cpane .card.is-list { overflow: visible; }
  .cstudio-rows .row:last-child { border-bottom: 0; }

  /* finance: one tiles row (cash | this month), two columns (income +
     needs-a-look | expenses + budget), the transactions table full width */
  .fin-head { padding: 0; margin-bottom: 4px; }
  .fin-head .eyebrow { display: block; margin-bottom: 8px; }
  .fin-head .greeting h1 { font-size: 34px; line-height: 1.05; }
  .fin-sync, .fin-addline { display: inline-flex; }
  .fin-note { display: none; }
  .tiles.is-row { display: flex; gap: 10px; }
  .tiles.is-row .tile { flex: 1 1 0; }
  /* six tiles in one row: the serif figure has to give a little */
  .tiles.is-row .tile-n { font-size: 22px; }
  .fin-tile-rule { width: 1px; background: var(--line-2); margin: 6px 4px; flex: 0 0 auto; }
  .fin-cols { margin-top: 18px; }
  .fin-bk { width: 88px; }
  .fin-brow-b:hover, .fin-txn-open:hover .fin-name { color: var(--sage-deep); }
  .fin-filters .fbar { flex-wrap: wrap; overflow: visible; padding: 0; }
  .fin-filters .fbar-fade { display: none; }
  .fin-search { width: 180px; }
  .fin-sa-note { display: none; }
  .fin-txn { padding: 9px 14px; }
  .fin-date { width: 52px; }
  .fin-name { font-size: 13.5px; }
  .fin-txn .fin-stream { width: 96px; text-align: left; }
  /* the columns the phone folds into inline tags */
  .fin-col-poker { display: flex; width: 40px; flex: 0 0 auto; align-items: center; justify-content: center; }
  .fin-col-status { display: block; width: 64px; flex: 0 0 auto; font-size: 10px; color: var(--faint); }
  .fin-thead.is-table { padding-top: 6px; padding-bottom: 6px; background: transparent; }
  .fin-thead.is-table .fin-txn-open { cursor: default; }
  .fin-amt { width: 74px; }
  .fin-sheet-amt { font-size: 24px; }

  /* life: the same page, centered at reading width — today beside the week,
     then the totals with the reading card, then notes and the habits line */
  .life-wrap { max-width: 660px; margin: 0 auto; }
  .life-head { padding: 0; margin-bottom: 4px; }
  .life-head .eyebrow { display: block; margin-bottom: 8px; }
  .life-head .greeting h1 { font-size: 34px; line-height: 1.05; }
  .life-cols { margin-top: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .life-strip { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; align-items: start; }
  .life-strip + .section { margin-top: 18px; }
  .life-wk { padding: 9px 14px; }
  .life-wk-k { width: 76px; font-size: 12.5px; }
  .life-row-name { font-size: 13.5px; }
  .life-total-n { font-size: 20px; }
  .life-book-cover { width: 30px; height: 42px; }
  .life-book-title { font-size: 15px; }
  .life-book-sub { font-size: 12px; }
  .life-note-text { font-size: 13.5px; }

  /* inbox: the capture bar joins the header, the list keeps the left column
     and the triage pane sits beside it (the canvas's 300px) */
  .ib-head { grid-template-columns: minmax(0, 1fr) 440px; align-items: flex-end; padding: 0; margin-bottom: 14px; }
  .ib-head .eyebrow { display: block; }
  .ib-head .greeting h1 { font-size: 34px; line-height: 1.05; }
  .ib-head .greeting-sub { display: none; }
  .ib-cap { min-height: 44px; }
  .ib-cap-input { padding: 10px 0; font-size: 13.5px; }
  .ib-cols { padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
  .ib-list { display: flex; flex-direction: column; min-width: 0; }
  .ib-pane { display: block; position: sticky; top: 26px; padding: 16px; max-height: calc(100dvh - 52px); overflow: auto; }
  .ib-item { padding: 12px 14px; }
  .ib-text { font-size: 13.5px; -webkit-line-clamp: 2; }
  .ib-opt { height: 38px; padding: 0 10px; font-size: 12.5px; gap: 6px; }
  .ib-opts { gap: 6px; }
  .ib-panel-text { font-size: 15.5px; }
  .ib-tri-title { font-size: 13px; }

  .sheet-root { align-items: center; }
  .sheet { width: min(520px, calc(100vw - 48px)); max-height: 80vh; border-radius: 18px; box-shadow: var(--shadow-pop); transform: translateY(10px); opacity: 0; transition: transform 0.18s ease, opacity 0.18s ease; }
  .sheet-root.is-in .sheet { transform: none; opacity: 1; }
  .sheet-grip { display: none; }
  /* the transcript slides in over the right column; the assistant stays put */
  .sheet-root.is-transcript { align-items: stretch; justify-content: flex-end; right: var(--assistant-w); }
  .app.is-assistant-collapsed .sheet-root.is-transcript { right: 52px; }
  .sheet.is-transcript { width: min(400px, 42vw); height: 100dvh; max-height: none; border-radius: 16px 0 0 16px; transform: translateX(24px); }
  .tr-search { width: 132px; }

  /* settings: two columns — sources · repos · log on the left, everything that
     is a short list of facts on the right (the canvas's 1.45 / 0.8 budget) */
  .set-head { grid-template-columns: minmax(0, 1fr) auto; align-items: flex-end; padding: 0; margin-bottom: 14px; }
  .set-head .eyebrow { display: block; }
  .set-head .greeting h1 { font-size: 34px; line-height: 1.05; }
  .set-head .greeting-sub { display: none; }
  .set-head-acts { display: flex; }
  .set-cols { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.8fr); gap: 14px; align-items: start; }
  .set-col { display: flex; flex-direction: column; min-width: 0; }
  .set-col .section { padding: 0; }
  .set-col .section + .section { margin-top: 16px; }

  /* one source per line: dot · name · what happened · one button · the switch */
  .set-srow { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); }
  .set-srow:last-child { border-bottom: 0; }
  .set-srow.is-failed { background: var(--clay-tint); }
  .set-srow.is-off .set-src-n { color: var(--muted); }
  .set-srow .set-src-n { flex: 0 0 auto; font-size: 13.5px; max-width: 150px; }
  .set-srow .set-src-meta { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .set-srow .btn { flex: 0 0 auto; }
  .set-key { flex-wrap: nowrap; }
  .set-run { padding: 9px 14px; }
  .set-repo-acts { width: auto; margin-left: auto; }
  .set-repo-acts .tag { margin-right: 0; }
  .set-repo { flex-wrap: nowrap; }
  .set-envrow { padding: 9px 14px; }
  .kv { padding: 9px 14px; }

  /* workbench: the door and the repos on the left, what a session will cost
     and what has run on the right — the settings budget, same idea */
  .wb-head { grid-template-columns: minmax(0, 1fr) auto; align-items: flex-end; padding: 0; margin-bottom: 14px; }
  .wb-head .eyebrow { display: block; }
  .wb-head .greeting h1 { font-size: 34px; line-height: 1.05; }
  .wb-head .greeting-sub { display: none; }
  .wb-head-acts { display: flex; }
  .wb-cols { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.8fr); gap: 14px; align-items: start; }
  .wb-col { display: flex; flex-direction: column; min-width: 0; }
  .wb-col .section { padding: 0; }
  .wb-col .section + .section { margin-top: 16px; }
  .wb-repo { padding: 11px 14px; }
  .wb-repo-m { gap: 4px 12px; }
}

/* ── Login — the cloud front door (docs/design/login.md) ─────────────────── */
.login-body { display: grid; place-items: center; min-height: 100dvh; background: var(--screen); padding: 24px; }
.login { width: 100%; max-width: 360px; }
.login-card { padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; }
.login-title { font-family: var(--serif); font-weight: 500; font-size: 30px; letter-spacing: -0.015em; line-height: 1.1; margin: 0; }
.login-line { font-size: 14px; color: var(--muted); line-height: 1.45; margin: 0 0 6px; min-height: 20px; }
.login-line.is-error { color: var(--clay-ink); }
.login-form { display: flex; flex-direction: column; }
.login-btn { width: 100%; }