/* ==========================================================================
   TaskFlow — dark terminal, board and notes
   The same system as WealthFlow, and deliberately so: same tokens, same
   hairlines, same tight radii, same tabular figures. One hue carries a new
   meaning — c5 means "a note", and nothing else in the app uses it.
   ========================================================================== */

:root {
  --bg:      oklch(0.175 0.010 255);
  --panel:   oklch(0.215 0.011 255);
  --panel2:  oklch(0.245 0.012 255);
  --raise:   oklch(0.285 0.013 255);
  --line:    oklch(0.295 0.012 255);
  --line2:   oklch(0.375 0.014 255);
  --tx:      oklch(0.955 0.004 255);
  --tx2:     oklch(0.740 0.011 255);
  --tx3:     oklch(0.585 0.013 255);

  --pos:     oklch(0.760 0.130 168);
  --neg:     oklch(0.700 0.150 25);
  --pos-dim: color-mix(in oklab, var(--pos) 16%, transparent);
  --neg-dim: color-mix(in oklab, var(--neg) 16%, transparent);
  --pos-ink: oklch(0.20 0.03 168);

  /* Categorical ramp: one lightness, one chroma, hue only. No category shouts. */
  --c1: oklch(0.70 0.11 255);
  --c2: oklch(0.70 0.11 60);
  --c3: oklch(0.70 0.11 300);
  --c4: oklch(0.70 0.11 330);
  --c5: oklch(0.70 0.11 205);
  --c6: oklch(0.70 0.11 140);
  --c7: oklch(0.70 0.11 25);
  --c8: oklch(0.70 0.11 90);

  --r1: 4px;
  --r2: 8px;
  --r3: 12px;

  /* Type scale, in px. Lifted ~18% off WealthFlow's density on 09.09.2026
     because it read too small in practice; the ratios between steps are
     unchanged, so it is still one scale rather than a pile of exceptions:
       10.5 · 12 · 12.5 · 13 · 13.5 · 14 · 15 · 15.5 · 16.5 · 17.5 · 22.5 · 25 · 28
     Body is 16.5. Control heights and row rhythm were grown to match — a size
     change on its own clips ascenders and breaks the hairline grid. */
  --font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Only for genuine code tokens — cookie names, shell commands, hosts. The
     system stack, so it matches whatever terminal the reader already knows. */
  --code: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --rail: 240px;
  --page-max: 1720px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--font);
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
}

body {
  background:
    radial-gradient(900px 420px at 22% -8%, color-mix(in oklab, var(--pos) 6%, transparent), transparent 70%),
    var(--bg);
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
input, select, textarea { background: none; border: 0; outline: none; min-width: 0; }
a { color: var(--pos); text-decoration: none; }
a:hover { color: color-mix(in oklab, var(--pos) 75%, white); }

::selection { background: var(--pos-dim); }

/* Focus is indicated once, by whichever element owns the visible box.
   Note: no border-radius here — an outline already follows the element's own
   radius, and forcing one would square off the corners of focused buttons. */
:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--pos) 75%, transparent);
  outline-offset: 2px;
}

/* A control wrapped in .field-box must not draw its own ring: the input is
   inset from the wrapper horizontally but full-height vertically, so an offset
   outline lands outside the box top and bottom and inside it left and right.
   The wrapper's own border is the indicator, and it matches the real corner
   radius by construction. */
.field-box :is(input, select, textarea):focus-visible { outline: none; }

/* Controls sitting inside an overflow-hidden shell would have an offset ring
   clipped away, so theirs is drawn just inside the element instead. */
.segmented .seg:focus-visible,
.stepper .ghost-icon:focus-visible,
.popover .pop-item:focus-visible { outline-offset: -2px; }

/* ------------------------------------------------------------- primitives */

/* Figures line up in columns without setting them in a monospace: tabular
   figures give every digit the same advance width in the body face. */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -0.005em; }
.code { font-family: var(--code); font-variant-numeric: tabular-nums; font-size: 0.94em; letter-spacing: 0; }
.muted { color: var(--tx3); }
.tiny { font-size: 12.5px; }
.strong { font-weight: 600; }
.right { text-align: right; justify-self: end; }
.center { text-align: center; justify-self: center; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.spacer { flex: 1; }
.ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.lbl {
  font-size: 12px; font-weight: 600; letter-spacing: 0.055em;
  text-transform: uppercase; color: var(--tx3);
}
.lbl.right { text-align: right; }
.lbl.center { text-align: center; }

.dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.dot.round { border-radius: 999px; }
.dot.live { background: var(--pos); }
.dot.idle { background: var(--line2); }
.dot.warn { background: var(--c8); }

.tag {
  font-family: var(--code); font-size: 12px; color: var(--tx3);
  border: 1px solid var(--line); border-radius: var(--r1); padding: 3px 7px;
}
.tag-mini { margin-left: auto; font-size: 10.5px; letter-spacing: 0.08em; }
.count {
  margin-left: auto; font-size: 12px; color: var(--tx3);
  border: 1px solid var(--line); border-radius: var(--r1); padding: 1px 5px;
}

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r3); min-width: 0; }
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 13px 16px 12px; border-bottom: 1px solid var(--line);
}
.panel-head h3 { margin: 0; font-size: 15.5px; font-weight: 600; letter-spacing: -0.005em; }
.panel-sub { font-size: 13px; color: var(--tx3); text-align: right; }
.panel-body { padding: 14px 16px; }
.panel-body.flush { padding: 0; }
.panel-pad { padding: 0 16px 14px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px;
  border-radius: var(--r1); background: var(--panel2); border: 1px solid var(--line);
  font-size: 13px; font-weight: 500; color: var(--tx2); max-width: 100%;
}
.chip.strong { font-weight: 600; height: 26px; }
.chip.warn  { border-color: color-mix(in oklab, var(--c8) 46%, transparent); background: color-mix(in oklab, var(--c8) 12%, transparent); color: var(--c8); }
.chip.c5    { border-color: color-mix(in oklab, var(--c5) 46%, transparent); background: color-mix(in oklab, var(--c5) 12%, transparent); color: var(--c5); }
.chip.bad   { border-color: color-mix(in oklab, var(--neg) 46%, transparent); background: var(--neg-dim); color: var(--neg); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px; border-radius: var(--r2);
  border: 1px solid var(--line2); background: var(--panel2);
  font-size: 14px; font-weight: 600; white-space: nowrap;
}
.btn:hover { background: var(--raise); }
.btn.pri { background: var(--pos); border-color: var(--pos); color: var(--pos-ink); }
.btn.pri:hover { background: color-mix(in oklab, var(--pos) 88%, white); }
.btn.lg { height: 44px; border-radius: 9px; font-size: 15.5px; }
.btn.full { width: 100%; }
.btn[disabled] { opacity: 0.42; cursor: not-allowed; }
.btn-row { display: flex; gap: 8px; align-items: center; }

.ghost-icon {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border-radius: var(--r2); color: var(--tx3);
}
.ghost-icon:hover { background: var(--panel2); color: var(--tx); }

.link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13.5px; font-weight: 600; color: var(--pos);
}
.link:hover { color: color-mix(in oklab, var(--pos) 75%, white); }

.delta { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.delta.good { color: var(--pos); }
.delta.bad  { color: var(--neg); }
.delta.flat { color: var(--tx3); }
.mark { flex: none; }

.bar { height: 6px; border-radius: 3px; background: var(--panel2); overflow: hidden; display: block; }
.bar.tall { height: 8px; }
.bar.thin { height: 4px; }
.bar-fill { display: block; height: 100%; border-radius: 3px; }

.banner {
  display: flex; gap: 9px; padding: 10px 12px; border-radius: var(--r2);
  border: 1px solid var(--line); background: var(--panel2);
  font-size: 13.5px; line-height: 1.5; color: var(--tx2);
}
.banner svg { flex: none; margin-top: 1px; }
.banner.info { color: var(--tx2); }
.banner.warn { border-color: color-mix(in oklab, var(--c8) 40%, var(--line)); background: color-mix(in oklab, var(--c8) 7%, transparent); }
.banner.warn svg { color: var(--c8); }
.banner.bad  { border-color: color-mix(in oklab, var(--neg) 42%, var(--line)); background: color-mix(in oklab, var(--neg) 8%, transparent); }
.banner.bad svg { color: var(--neg); }
.banner.good { border-color: color-mix(in oklab, var(--pos) 40%, var(--line)); background: color-mix(in oklab, var(--pos) 7%, transparent); }
.banner.good svg { color: var(--pos); }

.empty { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 34px 20px; text-align: center; }
.empty-title { font-size: 16.5px; font-weight: 600; }
.empty-body { font-size: 15px; color: var(--tx3); max-width: 460px; line-height: 1.55; text-wrap: pretty; }
.empty-action { margin-top: 8px; }
.empty-inline { padding: 22px 16px; font-size: 15px; color: var(--tx3); text-align: center; }

/* -------------------------------------------------------------- svg labels */

.axis { font-size: 12px; fill: var(--tx3); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.axis.axis-pos { fill: var(--pos); }
.axis.strong { font-weight: 500; font-size: 12.5px; }
.axis.strong-ink { fill: var(--tx2); font-size: 13px; font-weight: 600; }
.axis.on-c3 { fill: oklch(0.19 0.03 300); font-weight: 600; font-size: 10.5px; }
.chart-empty { padding: 40px 16px; text-align: center; font-size: 15px; color: var(--tx3); }

/* -------------------------------------------------------------- app shell */

.boot {
  min-height: 100vh; display: grid; place-items: center; gap: 12px;
  grid-auto-flow: row; color: var(--tx3); font-size: 15px;
}
.boot-mark { color: var(--pos); }

.app { display: flex; min-height: 100vh; }

.rail {
  width: var(--rail); flex: none; display: flex; flex-direction: column; gap: 22px;
  padding: 18px 14px; border-right: 1px solid var(--line);
  background: color-mix(in oklab, var(--panel) 55%, transparent);
  position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: 9px; padding: 0 4px; font-size: 16.5px; font-weight: 700; letter-spacing: -0.02em; }
.brand-mark { color: var(--pos); }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 11px;
  border-radius: var(--r2); color: var(--tx2); font-size: 15.5px; font-weight: 500; text-align: left;
}
.nav-item svg { flex: none; }
.nav-item:hover { background: color-mix(in oklab, var(--panel2) 70%, transparent); color: var(--tx); }
.nav-item.on { background: var(--panel2); color: var(--tx); box-shadow: inset 0 0 0 1px var(--line); }
.nav-item.muted-item { opacity: 0.58; }
.nav-item.muted-item.on { opacity: 1; }


.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  height: 62px; flex: none; display: flex; align-items: center; gap: 12px;
  padding: 0 24px; border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
}
.stepper {
  display: flex; align-items: center; border: 1px solid var(--line);
  border-radius: var(--r2); background: var(--panel); overflow: hidden;
}
.stepper .ghost-icon { border-radius: 0; width: 30px; height: 30px; }
.stepper-label {
  font-size: 14px; font-weight: 500; padding: 0 12px;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}
.avatar {
  width: 34px; height: 34px; flex: none; border-radius: var(--r2);
  background: var(--panel2); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--tx2);
}
.avatar:hover { color: var(--tx); background: var(--raise); }

.page {
  padding: 20px 24px 40px; display: flex; flex-direction: column; gap: 14px;
  /* Centred, not left-aligned: past the cap the leftover width used to sit as
     dead space on one side. */
  width: 100%; max-width: var(--page-max); margin-inline: auto;
}
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.page-head h1 { margin: 0 0 3px; font-size: 25px; font-weight: 600; letter-spacing: -0.025em; }
.page-head p { margin: 0; font-size: 15px; color: var(--tx3); max-width: 72ch; text-wrap: pretty; }
.head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.popover {
  position: absolute; top: 28px; left: 0; z-index: 40; width: 288px;
  background: var(--raise); border: 1px solid var(--line2); border-radius: 10px;
  box-shadow: 0 22px 48px oklch(0.10 0.01 255 / 0.66); overflow: hidden;
}
.pop-head { padding: 9px 11px; border-bottom: 1px solid var(--line); }
.pop-body { max-height: 320px; overflow-y: auto; padding: 7px 6px; }
.pop-section { display: flex; flex-direction: column; }
.pop-section .lbl { padding: 5px 8px; }
.pop-item {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 9px;
  border-radius: var(--r2); font-size: 15px; color: var(--tx2); text-align: left;
}
.pop-item:hover { background: var(--panel2); color: var(--tx); }
.pop-item.on { background: var(--pos-dim); color: var(--pos); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--pos) 40%, transparent); }
.pop-item svg { margin-left: auto; flex: none; }
.pop-empty { padding: 2px 8px 6px; font-size: 13.5px; color: var(--tx3); }
.pop-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 10px; border-top: 1px solid var(--line); background: var(--panel2);
}
.pop-foot .btn { height: 26px; font-size: 13.5px; }
/* -------------------------------------------------------------------- forms */

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-box {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r2); background: var(--panel2);
  font-size: 15px; color: var(--tx); min-width: 0;
}
.field-box.grow { flex: 1; min-width: 200px; }
.field-box.tight { height: 34px; padding: 0 10px; }
.field-box svg { flex: none; color: var(--tx3); }
.field-box input, .field-box select { flex: 1; min-width: 0; height: 100%; }
.field-box input::placeholder { color: var(--tx3); }
.field-box:focus-within { border-color: var(--pos); box-shadow: 0 0 0 3px var(--pos-dim); }
.field-box.muted-box { color: var(--tx3); opacity: 0.7; }
.field.bad .field-box,
.field-box.bad-box { border-color: color-mix(in oklab, var(--neg) 60%, var(--line)); box-shadow: 0 0 0 3px var(--neg-dim); }
.field-tail { display: flex; align-items: center; color: var(--tx3); flex: none; }
.field-hint { font-size: 12.5px; color: var(--tx3); line-height: 1.45; }
.select-box { position: relative; }
.select-box select { appearance: none; cursor: pointer; padding-right: 4px; }
.select-box option { background: var(--panel); color: var(--tx); }
input[disabled], select[disabled] { color: var(--tx3); cursor: not-allowed; }

.form-col { display: flex; flex-direction: column; gap: 14px; }
.form-message { margin: 0; font-size: 13.5px; color: var(--tx3); min-height: 14px; }
.form-message.good { color: var(--pos); }
.form-message.bad { color: var(--neg); }
.form-message.warn { color: var(--c8); }

.segmented { display: flex; height: 38px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--panel); overflow: hidden; }
.seg { flex: 1; display: grid; place-items: center; padding: 0 12px; font-size: 14px; color: var(--tx3); white-space: nowrap; }
.seg + .seg { border-left: 1px solid var(--line); }
.seg:hover { color: var(--tx2); }
.seg.on { background: var(--pos-dim); color: var(--pos); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--pos) 36%, transparent); }

.switch {
  width: 26px; height: 15px; border-radius: 999px; flex: none;
  background: var(--raise); box-shadow: inset 0 0 0 1px var(--line2);
  display: inline-flex; align-items: center; padding: 2px; transition: background 120ms ease;
}
.switch .knob { width: 11px; height: 11px; border-radius: 999px; background: var(--tx3); transition: transform 120ms ease, background 120ms ease; }
.switch.on { background: var(--pos); box-shadow: none; }
.switch.on .knob { transform: translateX(11px); background: var(--pos-ink); }

.box {
  width: 16px; height: 16px; flex: none; border-radius: var(--r1);
  border: 1px solid var(--line2); background: var(--panel2);
  display: grid; place-items: center; color: var(--pos-ink);
}
.box.on { background: var(--pos); border-color: var(--pos); }
.check-row { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tx2); text-align: left; }
.check-row:hover { color: var(--tx); }

.icon-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.icon-swatch {
  width: 34px; height: 32px; border-radius: 7px; display: grid; place-items: center;
  background: var(--panel2); box-shadow: inset 0 0 0 1px var(--line); color: var(--tx2);
}
.icon-swatch:hover { color: var(--tx); box-shadow: inset 0 0 0 1px var(--line2); }
.icon-swatch.on { background: var(--pos-dim); box-shadow: inset 0 0 0 1px var(--pos); color: var(--pos); }
.colour-picker { display: flex; gap: 8px; align-items: center; height: 32px; }
.colour-swatch { width: 22px; height: 22px; border-radius: 6px; }
.colour-swatch.on { box-shadow: 0 0 0 1px var(--panel), 0 0 0 2.5px currentColor; }

.preview-row {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 60px; gap: 10px; align-items: center;
  height: 34px; padding: 0 12px; border: 1px dashed var(--line2); border-radius: var(--r2); background: var(--panel2);
}

/* ------------------------------------------------------------------- modal */

/* The backdrop. Without this the scrim div is a zero-height static element:
   no dim, and every "click outside to close" is dead. */
.modal-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: oklch(0.12 0.008 255 / 0.66); backdrop-filter: blur(3px);
}

/* Name on the left, value on the right, baselines aligned — the read-only
   rows in "This workspace" and "Keyboard". */
.rule-list { display: flex; flex-direction: column; gap: 11px; }
.rule {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 14px; color: var(--tx2);
}
.rule-note {
  margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--tx3); line-height: 1.55; text-wrap: pretty;
}


.modal {
  position: fixed; z-index: 70; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line2); border-radius: 14px;
  box-shadow: 0 40px 90px oklch(0.08 0.01 255 / 0.7); overflow: hidden;
}
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 16px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0 0 3px; font-size: 17.5px; font-weight: 600; letter-spacing: -0.01em; }
.modal-head p { margin: 0; font-size: 14px; color: var(--tx3); max-width: 62ch; text-wrap: pretty; }
.modal-body { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.modal-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.modal-foot {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px; border-top: 1px solid var(--line); background: var(--panel2); flex-wrap: wrap;
}
.modal-error { margin: 0; padding: 0 20px 14px; font-size: 13.5px; color: var(--neg); background: var(--panel2); }

/* -------------------------------------------------------------------- auth */

.auth { position: relative; min-height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.auth-dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(oklch(0.40 0.012 255) 1px, transparent 1px);
  background-size: 32px 32px; opacity: 0.26;
  mask-image: radial-gradient(920px 520px at 50% 38%, black, transparent 76%);
  -webkit-mask-image: radial-gradient(920px 520px at 50% 38%, black, transparent 76%);
}
.auth-bar {
  position: relative; z-index: 2; height: 52px; flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 24px; border-bottom: 1px solid var(--line);
}
.auth-status { display: flex; align-items: center; gap: 9px; }
.auth-status-text { font-size: 13.5px; color: var(--tx2); }
.auth-main { position: relative; z-index: 2; flex: 1; display: grid; place-items: center; padding: 24px; }
.auth-col { width: min(396px, 100%); display: flex; flex-direction: column; gap: 20px; }
.auth-intro { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.auth-intro h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.03em; }
.auth-intro p { margin: 0; font-size: 15.5px; color: var(--tx2); line-height: 1.55; text-wrap: pretty; }
.auth-card { padding: 20px; display: flex; flex-direction: column; gap: 15px; }
.auth-card .field-box { height: 38px; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth-note { margin: 0; font-size: 13.5px; color: var(--tx3); line-height: 1.55; text-wrap: pretty; }
.auth-note.bordered { padding-top: 12px; border-top: 1px solid var(--line); }
.auth-actions { display: flex; flex-direction: column; gap: 8px; }
.auth-offline { gap: 16px; }
.offline-head { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 10px 0 4px; }
.offline-icon { color: var(--c8); }
.offline-title { font-size: 16.5px; font-weight: 600; margin-bottom: 4px; }
.offline-head p { margin: 0; font-size: 14px; color: var(--tx2); line-height: 1.55; }
.auth-foot {
  position: relative; z-index: 2; flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 13px 24px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--tx3);
}

/* ------------------------------------------------------------------ confirm */

.ask-scrim {
  position: fixed; inset: 0; z-index: 100;
  background: oklch(0.10 0.008 255 / 0.72); backdrop-filter: blur(3px);
}
.ask {
  position: fixed; z-index: 101; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(460px, calc(100vw - 28px));
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line2); border-radius: 13px;
  box-shadow: 0 34px 80px oklch(0.06 0.01 255 / 0.72); overflow: hidden;
}
/* A hairline of the tone across the top, so the stakes read before the words do. */
.ask::before { content: ""; height: 2px; flex: none; }
.ask-danger::before { background: var(--neg); }
.ask-warn::before { background: var(--c8); }
.ask-neutral::before { background: var(--pos); }

.ask-head { display: flex; gap: 12px; padding: 17px 19px 13px; }
.ask-icon { flex: none; margin-top: 1px; }
.ask-danger .ask-icon { color: var(--neg); }
.ask-warn .ask-icon { color: var(--c8); }
.ask-neutral .ask-icon { color: var(--pos); }
.ask-heading { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ask-heading h2 { margin: 0; font-size: 17.5px; font-weight: 600; letter-spacing: -0.01em; }
.ask-op { color: var(--tx3); font-size: 12.5px; overflow-wrap: anywhere; }

.ask-body { padding: 0 19px 15px; display: flex; flex-direction: column; gap: 13px; }
.ask-body p { margin: 0; font-size: 15px; color: var(--tx2); line-height: 1.55; text-wrap: pretty; }
.ask-note { font-size: 13px !important; color: var(--tx3) !important; }
.ask-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden;
}
.ask-facts > div { display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; background: var(--panel2); }
.ask-facts .num { font-size: 15.5px; font-weight: 500; }

.ask-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 12px 19px; border-top: 1px solid var(--line); background: var(--panel2);
}
.ask-keys { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--tx3); }
.ask-keys-sep { opacity: 0.5; }
kbd {
  font-family: var(--code); font-size: 12px; line-height: 1;
  padding: 4px 6px; border-radius: 4px;
  background: var(--raise); border: 1px solid var(--line2); color: var(--tx2);
}

.btn.danger { background: var(--neg); border-color: var(--neg); color: oklch(0.17 0.03 25); }
.btn.danger:hover { background: color-mix(in oklab, var(--neg) 88%, white); }

@media (max-width: 480px) {
  .ask-facts { grid-template-columns: minmax(0, 1fr); }
  .ask-foot { justify-content: flex-end; }
  .ask-keys { display: none; }
}

/* ------------------------------------------------------------------- toast */

.toast {
  position: fixed; z-index: 90; bottom: 22px; left: 50%; transform: translateX(-50%);
  padding: 10px 16px; border-radius: 10px; font-size: 15px; font-weight: 500;
  background: var(--raise); border: 1px solid var(--line2);
  box-shadow: 0 20px 44px oklch(0.09 0.01 255 / 0.55);
}
.toast.good { border-color: color-mix(in oklab, var(--pos) 45%, var(--line2)); color: var(--pos); }
.toast.bad  { border-color: color-mix(in oklab, var(--neg) 45%, var(--line2)); color: var(--neg); }
.toast.warn { border-color: color-mix(in oklab, var(--c8) 45%, var(--line2)); color: var(--c8); }


/* ------------------------------------------------------------------ layout */

/* Independent panels, tiled. auto-fit rather than a fixed column count, so
   the same markup is one column on a phone and four on a wide desktop without
   a breakpoint per width. `align-items: start` is deliberate: these blocks
   have unrelated heights and stretching them to match invents empty space. */
.panel-grid {
  display: grid;
  /* min() on the floor, not a bare 440px: auto-fit tracks cannot shrink below
     their minimum, so on a 375px phone a bare floor overflows the viewport. */
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: 14px;
  align-items: start;
}

/* A number is three characters wide; the box around it should not be six
   hundred pixels because its panel happens to be. */
.form-col .field:has(input[type="number"]) .field-box { max-width: 170px; }

/* ------------------------------------------------------------------- board */

/* The kpi strip is WealthFlow's, unchanged: one hairline grid, tabular figures,
   nothing shouting. It ties the two apps together at a glance. */
.kpi-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden;
}
.kpi-strip > div { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; background: var(--panel); }
.kpi-strip .num { font-size: 16.5px; font-weight: 500; }
.kpi-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }

.column { display: flex; flex-direction: column; min-width: 0; max-height: calc(100vh - 272px); }
.column.at-limit { border-color: color-mix(in oklab, var(--c8) 26%, var(--line)); }
.column.over-limit { border-color: color-mix(in oklab, var(--neg) 34%, var(--line)); }
.column-head {
  display: flex; align-items: center; gap: 9px; flex: none;
  padding: 13px 14px 12px; border-bottom: 1px solid var(--line);
}
.column-head h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.055em; text-transform: uppercase; color: var(--tx2); }
.column-body { display: flex; flex-direction: column; gap: 8px; padding: 10px 11px; overflow-y: auto; }
.column-foot { flex: none; padding: 9px 12px; border-top: 1px solid var(--line); }

/* The drop target is a real element in the flow, not an outline drawn on the
   card below it: the gap has to open up, or the cards under the cursor jump. */
.drop-slot {
  height: 70px; flex: none; border: 1px dashed var(--line2); border-radius: var(--r2);
  display: grid; place-items: center; font-size: 13.5px; color: var(--tx3);
  background: color-mix(in oklab, var(--panel2) 40%, transparent);
}
.drop-slot.refused { border-color: color-mix(in oklab, var(--neg) 50%, transparent); color: var(--neg); }

.card {
  display: flex; flex-direction: column; gap: 8px; flex: none;
  padding: 12px 13px 13px; border: 1px solid var(--line); border-radius: var(--r2);
  background: var(--panel2); text-align: left; width: 100%;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.card:hover { background: var(--raise); border-color: var(--line2); }
.card.blocked { border-color: color-mix(in oklab, var(--neg) 34%, var(--line)); }
.card.done { background: color-mix(in oklab, var(--panel2) 62%, transparent); }
.card.done .card-title { font-weight: 500; color: var(--tx2); }
.card.dragging { opacity: 0.4; }
.card.lifted { border-color: var(--line2); background: var(--raise); box-shadow: 0 14px 30px oklch(0.09 0.01 255 / 0.6); }

.card-top { display: flex; align-items: center; gap: 7px; }
.card-key { font-size: 12px; color: var(--tx3); }
/* Priority is a 3px rule, not a badge. It has to be readable in the corner of
   the eye while scanning a column, and unmissable nowhere else. */
.card-priority { width: 3px; height: 14px; border-radius: 2px; flex: none; background: var(--line2); }
.card-priority.high { background: var(--c7); }
.card-priority.medium { background: var(--c8); }
.card-title { font-size: 15px; font-weight: 600; line-height: 1.35; }
.card-body {
  margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--tx3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-foot { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.card-progress { display: flex; align-items: center; gap: 5px; }
.card-progress .bar { width: 44px; }
.card-drag { display: grid; place-items: center; color: var(--tx3); opacity: 0.5; cursor: grab; }
.card:hover .card-drag { opacity: 1; }

/* The note link. c5 is the only hue in the app with a meaning attached, and
   this is that meaning: everything a card says about its note is c5. */
.note-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 7px;
  max-width: 100%; border-radius: var(--r1); font-size: 13px; font-weight: 500;
  border: 1px solid color-mix(in oklab, var(--c5) 46%, transparent);
  background: color-mix(in oklab, var(--c5) 12%, transparent); color: var(--c5);
}
.note-chip svg { flex: none; }
.note-chip.ref { border-color: var(--line); background: var(--panel2); color: var(--tx2); }
.note-chip.archived { opacity: 0.6; text-decoration: line-through; }
.note-chip.empty { border-style: dashed; background: none; border-color: var(--line2); color: var(--tx3); }
.note-chip.lg { height: 24px; font-size: 13.5px; }

.due { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--tx3); }
.due svg { flex: none; }
.due.today { color: var(--c8); }
.due.overdue { color: var(--neg); }

/* -------------------------------------------------------------- task sheet */

.task-sheet { width: min(1040px, calc(100vw - 32px)); }
.task-sheet .modal-body { padding: 0; flex-direction: row; gap: 0; }
.task-main {
  flex: 1; min-width: 0; padding: 18px 20px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px; border-right: 1px solid var(--line);
}
.task-meta {
  width: 330px; flex: none; padding: 18px 20px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
  background: color-mix(in oklab, var(--panel2) 45%, transparent);
}
/* Both panes scroll, so every child must keep the height it asks for: the
   default flex-shrink squashed the status control to a 2px sliver as soon as
   the card had enough content to overflow. */
.task-main > *, .task-meta > * { flex: none; }
.task-section { display: flex; flex-direction: column; gap: 9px; }
.task-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.meta-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; }
.meta-rows { display: flex; flex-direction: column; gap: 10px; }
.hairline { height: 1px; background: var(--line); flex: none; }

.check-list { display: flex; flex-direction: column; gap: 7px; }
.check-item { display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--tx2); text-align: left; width: 100%; }
.check-item.on { color: var(--tx3); }
.check-item.on .check-text { text-decoration: line-through; }
.check-text { flex: 1; min-width: 0; }
.check-item .row-drop { opacity: 0.4; }
.check-item:hover .row-drop { opacity: 1; color: var(--neg); }

/* The home note and its subnotes, as one block. The card has exactly one home
   note, so this reads as a single object rather than a list of two kinds. */
.home-note {
  border: 1px solid color-mix(in oklab, var(--c5) 34%, var(--line));
  border-radius: var(--r2); background: color-mix(in oklab, var(--c5) 6%, transparent);
  overflow: hidden;
}
.home-note-top { display: flex; align-items: center; gap: 9px; padding: 10px 12px; text-align: left; width: 100%; }
.home-note-top svg { flex: none; color: var(--c5); }
.home-note-copy { min-width: 0; flex: 1; }
.home-note-sub { padding: 0 12px 10px; display: flex; flex-direction: column; }
.home-note-sub .sub-row { display: flex; align-items: center; gap: 2px; height: 30px; font-size: 14px; color: var(--tx2); text-align: left; }

.ref-row {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: var(--r2); background: var(--panel2); text-align: left; width: 100%;
}
.ref-row svg { flex: none; color: var(--tx3); }

.column-time { display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: 4px 10px; align-items: center; }
.column-time .bar { grid-column: 1 / -1; }

/* ------------------------------------------------------------------- notes */

.note-layout { display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: 0; flex: 1; min-height: 0; }
.note-doc {
  padding: 22px 28px 28px; display: flex; flex-direction: column; gap: 16px;
  min-width: 0; border-right: 1px solid var(--line);
}
.note-side {
  padding: 22px 20px; display: flex; flex-direction: column; gap: 16px; min-width: 0;
  background: color-mix(in oklab, var(--panel2) 45%, transparent);
}
.crumbs { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--tx3); flex-wrap: wrap; }
.crumbs .sep { opacity: 0.5; }
.crumbs button { color: inherit; font: inherit; }
.crumbs button:hover { color: var(--tx2); }
.crumbs .here { color: var(--tx2); }

.note-title { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.03em; }
.note-facts { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.note-facts .sep { width: 3px; height: 3px; border-radius: 999px; background: var(--line2); }

/* The rendered note. Deliberately a small vocabulary — heading, paragraph,
   list, quote, code, and the two block types that link to the board. */
.prose { display: flex; flex-direction: column; gap: 12px; max-width: 74ch; }
.prose h2 { margin: 6px 0 0; font-size: 17.5px; font-weight: 600; letter-spacing: -0.015em; }
.prose h3 { margin: 4px 0 0; font-size: 15.5px; font-weight: 600; }
.prose p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--tx2); text-wrap: pretty; }
.prose ul { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.prose li { display: flex; gap: 9px; font-size: 15px; line-height: 1.6; color: var(--tx2); }
.prose li .dot { margin-top: 6px; }
.prose pre {
  margin: 0; padding: 11px 13px; border-radius: var(--r2); overflow-x: auto;
  border: 1px solid var(--line); background: var(--panel2);
  font-family: var(--code); font-size: 14px; line-height: 1.6; color: var(--tx2);
}
.prose blockquote {
  margin: 0; padding: 2px 0 2px 13px; border-left: 2px solid var(--line2);
  font-size: 15px; line-height: 1.6; color: var(--tx3);
}
.prose .note-link {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 6px; border-radius: var(--r1);
  border: 1px solid color-mix(in oklab, var(--c5) 46%, transparent);
  background: color-mix(in oklab, var(--c5) 12%, transparent);
  color: var(--c5); font-size: 14px; font-weight: 500;
}
.prose .note-link.missing { border-color: color-mix(in oklab, var(--neg) 46%, transparent); background: var(--neg-dim); color: var(--neg); }
.prose .task-link {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 6px; border-radius: var(--r1);
  border: 1px solid var(--line2); background: var(--panel2); color: var(--tx2);
  font-size: 14px; font-weight: 500;
}

/* The tasks block: a live query, not a copied list. It is what keeps the note
   and the board from drifting apart. */
.tasks-block { border: 1px solid var(--line); border-radius: var(--r2); background: var(--panel); overflow: hidden; max-width: 74ch; }
.tasks-block-head {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px;
  border-bottom: 1px solid var(--line); background: var(--panel2);
}
.task-row {
  display: grid; grid-template-columns: 16px 66px minmax(0, 1fr) 96px 62px;
  gap: 11px; align-items: center; height: 40px; padding: 0 13px; font-size: 15px;
  text-align: left; width: 100%;
}
.task-row + .task-row { border-top: 1px solid color-mix(in oklab, var(--line) 55%, transparent); }
.task-row:hover { background: color-mix(in oklab, var(--panel2) 55%, transparent); }
.task-row.is-done .task-row-title { color: var(--tx3); text-decoration: line-through; }

.sub-list { display: flex; flex-direction: column; max-width: 74ch; }
.sub-item {
  display: flex; align-items: center; gap: 2px; height: 44px; text-align: left; width: 100%;
  border-top: 1px solid color-mix(in oklab, var(--line) 55%, transparent);
}
.sub-item svg { flex: none; color: var(--tx3); margin: 0 7px 0 3px; }
.sub-copy { min-width: 0; flex: 1; }

/* The tree lives in the rail: it is navigation, not content. */
.tree { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; font-size: 14px; }
.tree-row {
  display: flex; align-items: center; height: 31px; padding-right: 6px;
  border-radius: var(--r1); color: var(--tx2); text-align: left; width: 100%;
}
.tree-row:hover { background: color-mix(in oklab, var(--panel2) 70%, transparent); color: var(--tx); }
.tree-row.on { background: var(--panel2); box-shadow: inset 0 0 0 1px var(--line); color: var(--tx); font-weight: 600; }
.tree-row.root { font-weight: 600; color: var(--tx); padding-left: 6px; gap: 6px; }
.tree-row.drop { background: var(--pos-dim); box-shadow: inset 0 0 0 1px var(--pos); color: var(--pos); }
.tree-row.archived { opacity: 0.55; text-decoration: line-through; }
.tree-label { padding-left: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-twist { display: grid; place-items: center; width: 18px; flex: none; color: var(--tx3); }
/* One hairline per level of nesting, exactly as the category tree draws it. */
.tree-tick { position: relative; width: 16px; align-self: stretch; flex: none; }
.tree-tick::before { content: ""; position: absolute; left: 8px; top: 0; bottom: 0; width: 1px; background: var(--line2); }
.tree-tick.last::before { bottom: 50%; }
.tree-tick::after { content: ""; position: absolute; left: 8px; top: 50%; width: 8px; height: 1px; background: var(--line2); }

/* ------------------------------------------------------------ note editor */

.editor-bar {
  height: 44px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 24px;
  border-bottom: 1px solid var(--line); background: color-mix(in oklab, var(--panel) 40%, transparent);
}
.editor-bar .sep { width: 1px; height: 18px; background: var(--line); }
.editor-canvas { flex: 1; min-height: 0; display: flex; justify-content: center; padding: 24px; overflow-y: auto; }
.editor-col { width: 720px; max-width: 100%; display: flex; flex-direction: column; gap: 12px; }
.editor-title {
  font-size: 28px; font-weight: 600; letter-spacing: -0.03em; color: var(--tx);
  border: 0; background: none; width: 100%; padding: 0;
}
.editor-body {
  width: 100%; min-height: 460px; resize: vertical; padding: 0;
  border: 0; background: none; color: var(--tx2);
  font-family: var(--font); font-size: 15.5px; line-height: 1.7;
}
.editor-hint { font-size: 12.5px; color: var(--tx3); }

/* -------------------------------------------------------- command palette */

.palette-scrim { position: fixed; inset: 0; z-index: 80; background: oklch(0.12 0.008 255 / 0.6); backdrop-filter: blur(3px); }
.palette {
  position: fixed; z-index: 81; top: 14vh; left: 50%; transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px)); max-height: 62vh; display: flex; flex-direction: column;
  background: var(--raise); border: 1px solid var(--line2); border-radius: 12px;
  box-shadow: 0 34px 80px oklch(0.07 0.01 255 / 0.7); overflow: hidden;
}
.palette-field { display: flex; align-items: center; gap: 10px; padding: 0 15px; height: 54px; border-bottom: 1px solid var(--line); }
.palette-field svg { flex: none; color: var(--tx3); }
.palette-field input { flex: 1; height: 100%; font-size: 16.5px; }
.palette-body { flex: 1; overflow-y: auto; padding: 7px 6px; }
.palette-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-top: 1px solid var(--line); background: var(--panel2);
  font-size: 12.5px; color: var(--tx3);
}
.palette-item {
  display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 9px;
  border-radius: var(--r2); font-size: 15px; color: var(--tx2); text-align: left; width: 100%;
}
.palette-item svg { flex: none; }
.palette-item:hover, .palette-item.on {
  background: var(--pos-dim); color: var(--pos);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--pos) 40%, transparent);
}
.palette-item .code { color: inherit; opacity: 0.8; }
.palette-excerpt { font-size: 12.5px; color: var(--tx3); }

/* --------------------------------------------------------------- sync state */

/* Says what the database knows and when it last knew it. There is no push
   button because there is nothing to push — an edit is written the moment it
   is made, and this reports whether that landed. */
.sync {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px;
  border-radius: var(--r2); border: 1px solid transparent;
  color: var(--tx3); background: none;
}
button.sync { cursor: pointer; }
button.sync:hover { color: var(--tx2); border-color: var(--line); background: var(--panel2); }
.sync svg { flex: none; opacity: 0.7; }
.sync.bad { color: var(--neg); border-color: color-mix(in oklab, var(--neg) 42%, transparent); background: var(--neg-dim); }
.sync.warn { color: var(--c8); border-color: color-mix(in oklab, var(--c8) 42%, transparent); background: color-mix(in oklab, var(--c8) 10%, transparent); }
.sync-dot { background: var(--pos); }
.sync-dot.busy { background: var(--c8); animation: sync-pulse 1.1s ease-in-out infinite; }

@keyframes sync-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .sync-dot.busy { animation: none; opacity: 1; }
}

/* ------------------------------------------------------------------ misc */

.row-drop { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r1); color: var(--tx3); }
.row-drop:hover { color: var(--neg); background: var(--panel2); }
.labels { display: flex; flex-wrap: wrap; gap: 6px; }

/* The name sits in its own colour. `--label` is set per instance, so one rule
   covers the whole ramp and a new hue needs no new CSS. */
.label-chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
  border-radius: var(--r1); white-space: nowrap;
  font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em;
  border: 1px solid color-mix(in oklab, var(--label) 46%, transparent);
  background: color-mix(in oklab, var(--label) 14%, transparent);
  color: var(--label);
}
.label-chip.sm { height: 21px; padding: 0 7px; font-size: 12px; font-weight: 500; }
button.label-chip { cursor: pointer; }
button.label-chip:hover { background: color-mix(in oklab, var(--label) 24%, transparent); }
/* Filtered out: still readable, clearly not selected. */
.label-chip.off {
  border-color: var(--line); background: none; color: var(--tx3);
}
button.label-chip.off:hover { border-color: var(--line2); color: var(--tx2); }

/* ------------------------------------------------------------- filter bar */

.filter-bar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 13px;
}
.filter-bar .lbl { flex: none; }
.filter-divider { width: 1px; height: 20px; background: var(--line); flex: none; }
.rail-tree { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1; }
.rail-tree-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.skeleton { border-radius: 3px; background: var(--raise); }

/* -------------------------------------------------------------- responsive */

/* The board gives up three columns before anything else does: a column under
   ~260px cannot hold a card's title, its note path and its footer. */
@media (max-width: 1180px) {
  .board { grid-template-columns: minmax(0, 1fr); }
  .column { max-height: none; }
  .note-layout { grid-template-columns: minmax(0, 1fr); }
  .note-side { border-top: 1px solid var(--line); }
}

@media (max-width: 1080px) {
  .rail { width: 64px; padding: 18px 10px; }
  .rail .brand span, .nav-item span, .nav-item .count, .nav-item .lbl, .rail-tree { display: none; }
  .nav-item { justify-content: center; padding: 0; }
  .page { padding: 16px 14px 32px; }
  .topbar { padding: 0 14px; gap: 8px; }
  .page-head h1 { font-size: 22.5px; }
  .note-doc { padding: 18px 16px 24px; }
}

@media (max-width: 860px) {
  .task-sheet .modal-body { flex-direction: column; }
  .task-main { border-right: 0; border-bottom: 1px solid var(--line); }
  .task-meta { width: auto; }
  .topbar .field-box { display: none; }
  .topbar .btn span { display: none; }
  .topbar .btn { padding: 0 10px; }
  .task-row { grid-template-columns: 16px minmax(0, 1fr) 90px; }
  .task-row > :nth-child(2), .task-row > :nth-child(5) { display: none; }
}

/* Everything a finger has to hit gets 44px, and the three columns collapse into
   a switch rather than a second information architecture. */
@media (max-width: 620px) {
  .board { gap: 10px; }
  .card { padding: 13px; border-radius: 10px; gap: 9px; }
  .card-title { font-size: 16.5px; }
  .note-chip { height: 24px; }
  /* Fingers, not a cursor: nothing tappable drops below 44px, even though the
     desktop density is deliberately tighter than that. */
  .btn { height: 44px; }
  .btn.sm { height: 38px; }
  .segmented { height: 44px; }
  .ghost-icon { width: 44px; height: 44px; }
  .nav-item { height: 44px; }
  .tree-row { height: 40px; }
  .check-row, .check-item { min-height: 36px; }
  .task-row { height: 44px; }
  .sub-item { height: 48px; }
  .sync { height: 44px; }
  .avatar { width: 44px; height: 44px; }
  /* Only the interactive chips grow — a label on a card is decoration and
     should not eat 44px of a phone screen for nothing. */
  .filter-bar button.label-chip,
  .filter-bar .chip { min-height: 44px; padding: 0 13px; }
  .filter-bar { gap: 8px; }
  /* Seven swatches cannot each be 44px across a 375px screen, so they get a
     comfortable size and the row wraps. */
  .colour-picker { height: auto; flex-wrap: wrap; gap: 10px; }
  .colour-swatch { width: 34px; height: 34px; border-radius: 8px; }
  /* The title is the card's own hit area, so it carries the target size — the
     text stays where it is, the tappable box grows around it. */
  .card-title { min-height: 44px; display: flex; align-items: center; }
  .editor-col { width: 100%; }
  .meta-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}