/* tasks.css — the entire stylesheet for the personal task system.
   Contracts: docs/ARCHITECTURE.md (tokens, behavioral must-holds),
   design/specs/*.md (pixels). Quiet, calm, typographic.
   No counters, badges, progress bars, charts, red states, celebrations.
   No shadows deeper than a hairline; no gradients. */

/* ---------------------------------------------------------------- tokens */
/* Pinned verbatim from design/handoff/00-FOUNDATIONS.md §2 — eleven roles,
   no other colours. --fg3 lifted and --cb/--pane added for AA contrast. */
:root, [data-theme=light] {
  --bg:#FFFFFF; --pane:#EFEBE2; --surface:#FFFFFF;
  --fg:#191814; --fg2:#514E48; --fg3:#6E6A62;
  --bd:#DCD8CF; --bd2:#CFCABF; --cb:#87837A;
  --accent:#0F6E56;          /* deep teal (settled — SPEC §16a) */
  --cbr:50%;                 /* checkbox radius (ring) */
  --anchorbl:0 solid transparent; --anchorpl:0;
}
[data-theme=dark] {
  --bg:#141312; --pane:#1A1918; --surface:#1C1B19;
  --fg:#ECEAE5; --fg2:#9E9C96; --fg3:#8A8780;
  --bd:#2A2926; --bd2:#3B3A37; --cb:#6A6862;
  --accent:#45B394;
}

/* Supplementary tokens from design/specs (sel, ring, scrim, selacc) */
:root, [data-theme=light] {
  --sel:rgba(20,18,14,.055);
  --ring:rgba(15,110,86,.14);
  --scrim:rgba(28,26,22,.34);
  --selacc:rgba(15,110,86,.10);
  color-scheme:light;
}
[data-theme=dark] {
  --sel:rgba(255,255,255,.06);
  --ring:rgba(69,179,148,.20);
  --scrim:rgba(0,0,0,.5);
  --selacc:rgba(69,179,148,.16);
  color-scheme:dark;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
html, body { margin:0; padding:0; }
body {
  font-family:'Geist','Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  color:var(--fg);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { margin:0; font-weight:500; font-size:inherit; }
p { margin:0; }
b, strong { font-weight:500; }
a { color:inherit; text-decoration:none; }
button {
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
  color:inherit;
  background:none;
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
  text-align:inherit;
}
input, textarea, select { font-family:inherit; font-size:inherit; color:inherit; }
[hidden] { display:none !important; }

::selection { background:var(--selacc); }

:focus { outline:none; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.mono { font-family:'Geist Mono',monospace; }
.tnum { font-variant-numeric:tabular-nums; }

/* -------------------------------------------------------------- app frame */
#app { display:flex; min-height:100dvh; align-items:stretch; }

/* Desktop rail (>=900px): the three tab names as text, plus the quiet hint.
   Nothing else — no counts, no extra links (design/handoff/01 §6). */
.tabs {
  order:-1;
  flex:none;
  width:150px;
  background:var(--bg);
  border-right:1px solid var(--bd);
  padding:26px 18px;
  display:flex;
  flex-direction:column;
  gap:2px;
  position:sticky;
  top:0;
  height:100dvh;
}
.tab {
  display:block;
  font-size:15px;
  padding:7px 10px;
  color:var(--fg2);
  font-weight:400;
}
.tab:hover { color:var(--fg); }
.tab.active { color:var(--fg); font-weight:500; }
.tabs-hint { margin-top:auto; font-size:12px; color:var(--fg3); padding:0 10px; }

/* Main column — centered, max 680px */
.main {
  flex:1;
  min-width:0;
  display:flex;
  justify-content:center;
  background:var(--bg);
  padding:44px 40px 56px;
}
.view { width:100%; max-width:680px; }

/* ------------------------------------------------------------- typography */
.view-title, .view h1 {
  font-size:22px;
  font-weight:500;
  color:var(--fg);
  letter-spacing:-.01em;
}
.view-sub, .subtitle, .forecast {
  font-size:15px;
  color:var(--fg2);
  line-height:1.6;
  margin-top:8px;
  text-wrap:pretty;
}
/* Whisper heading: 12px fg3, .05em — section micro-headings everywhere */
.whisper, .section-label, .eyebrow, .pool-heading {
  font-size:12px;
  color:var(--fg3);
  letter-spacing:.05em;
  font-weight:400;
}
.divider, .view hr {
  height:1px;
  background:var(--bd);
  border:0;
  margin:26px 0;
}
/* Quiet one-sentence lines (counts live inside sentences, never as pills) */
.quiet-line, .count-line {
  font-size:13px;
  color:var(--fg3);
}
.empty {
  min-height:280px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  font-size:16px;
  color:var(--fg3);
}

/* --------------------------------------------------------------- buttons */
.btn, .btn-primary {
  display:inline-block;
  font-size:15px;
  font-weight:500;
  color:#fff;
  background:var(--accent);
  border:none;
  border-radius:8px;
  padding:12px 24px;
  cursor:pointer;
  text-align:center;
}
.btn:hover, .btn-primary:hover { opacity:.92; }
.btn-full { width:100%; padding:14px; border-radius:10px; }
/* Quiet text actions */
.accept, .link-accent {
  font-size:14px;
  color:var(--accent);
  font-weight:500;
  cursor:pointer;
}
.link-quiet, .edit-link, .dismiss {
  font-size:14px;
  color:var(--fg2);
  cursor:pointer;
}
.link-quiet:hover, .edit-link:hover, .dismiss:hover { color:var(--fg); }

/* -------------------------------------------------------------- task rows */
/* Generic row: checkbox · title · right meta. Comfortable density. */
.row {
  display:flex;
  gap:13px;
  align-items:flex-start;
  padding:9px 0;
}
.cb {
  flex:none;
  width:19px;
  height:19px;
  margin-top:1px;
  border:1.5px solid var(--bd2);
  border-radius:var(--cbr);
  background:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  line-height:1;
  color:var(--fg3);
  position:relative;
  cursor:pointer;
  padding:0;
}
.cb:hover { border-color:var(--fg3); }
.row-title {
  flex:1;
  min-width:0;
  font-size:15px;
  font-weight:400;
  color:var(--fg);
  line-height:1.45;
  text-wrap:pretty;
}
.row-meta {
  flex:none;
  display:flex;
  align-items:center;
  gap:9px;
  padding-top:2px;
  font-size:12px;
  color:var(--fg3);
}
.size-letter { letter-spacing:.03em; }
.goal-dot { flex:none; width:7px; height:7px; border-radius:50%; }
.goal-dot.filled { background:var(--fg3); }
.goal-dot.ring { border:1.5px solid var(--fg3); box-sizing:border-box; }

/* Anchor rows: 16.5px/500, honoring the anchor-rule hooks */
.anchor .row-title, .row.anchor .row-title {
  font-size:16.5px;
  font-weight:500;
}
.row.anchor, .anchor > .row, .anchor > .spine-body {
  border-left:var(--anchorbl);
  padding-left:var(--anchorpl);
}

/* Completed: softly struck, faded to .42; check is fg3, never accent */
.row.done, .spine-row.done, .done > .row {
  opacity:.42;
}
.row.done .cb, .spine-row.done .cb, .done .cb, .cb.checked {
  border-color:var(--fg3);
  color:var(--fg3);
}
.row.done .row-title, .spine-row.done .row-title, .done .row-title {
  text-decoration:line-through;
  text-decoration-thickness:1px;
}
/* Reconcile's pre-checked circles: outline + quiet check, no strikethrough */
.cb.checked { color:var(--fg2); }

/* Focusable rows get the standard focus ring (global :focus-visible). */
.row[tabindex] { border-radius:4px; }

/* -------------------------------------------------------------- plan spine */
/* Every spine row: fixed 104px right-aligned time gutter + content. */
.spine { margin-top:8px; }
.spine-row { display:flex; gap:16px; padding:8px 0; }
.spine-time {
  flex:none;
  width:104px;
  text-align:right;
  padding-right:2px;
  font-size:13.5px;
  color:var(--fg3);
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}
.spine-body { flex:1; min-width:0; }
/* A .row nested inside a spine row must not double its padding */
.spine-row .row, .spine-body.row { padding-top:0; padding-bottom:0; }

/* Calendar event: quiet gray, no checkbox — events are not completable */
.spine-row.cal-block { padding:9px 0; align-items:baseline; }
.cal-block .spine-body {
  font-size:15.5px;
  color:var(--fg2);
  line-height:1.5;
  font-weight:400;
}

/* Anchor task rows in the spine */
.spine-row.anchor { padding:11px 0; }
.spine-row.anchor .spine-body { display:flex; gap:13px; align-items:flex-start; }

/* Pool task rows keep the default 8px 0 */
.spine-row.pool .spine-body { display:flex; gap:13px; align-items:flex-start; }

/* Pool heading row */
.spine-row.pool-heading { padding:24px 0 2px; }
.pool-heading .spine-body {
  font-size:12px;
  color:var(--fg3);
  letter-spacing:.05em;
}

/* Now marker — accent (per plan-spine spec the marker uses accent, not amber) */
.spine-row.now-marker { padding:6px 0 8px; align-items:center; }
.now-marker .spine-time {
  font-size:12px;
  color:var(--accent);
}
.now-marker .spine-body {
  display:flex;
  align-items:center;
  gap:8px;
}
.now-dot {
  flex:none;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
}
.now-line {
  flex:1;
  height:1.5px;
  background:var(--accent);
  opacity:.5;
}
.now-label {
  flex:none;
  font-size:11px;
  color:var(--accent);
  opacity:.85;
  font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------------- inbox capture */
.capture, .capture-bar {
  margin-top:24px;
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid var(--bd2);
  border-radius:9px;
  padding:14px 16px;
  background:var(--surface);
}
.capture:focus-within, .capture-bar:focus-within {
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--ring);
}
.capture input, .capture-bar input {
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:none;
  padding:0;
  font-size:16px;
  color:var(--fg);
  caret-color:var(--accent);
}
.capture input::placeholder, .capture-bar input::placeholder { color:var(--fg3); }
.key-chip, .kbd {
  flex:none;
  font-family:'Geist Mono',monospace;
  font-size:11px;
  color:var(--fg3);
  border:1px solid var(--bd2);
  border-radius:5px;
  padding:3px 7px;
}

/* Inbox rows: bare — no meta, no dots */
.inbox-row {
  display:flex;
  gap:14px;
  align-items:center;
  padding:13px 0;
  border-bottom:1px solid var(--bd);
  font-size:16px;
  color:var(--fg);
}
.inbox-row:last-child { border-bottom:0; }
.inbox-row .cb { width:18px; height:18px; margin-top:0; }
.inbox-row .row-title { font-size:16px; }

/* --------------------------------------------------------------- reconcile */
.raw-capture { font-size:14px; color:var(--fg3); line-height:1.5; }
.sharpened {
  display:flex;
  gap:10px;
  align-items:baseline;
  margin-top:8px;
}
.sharpened .arrow { flex:none; font-size:14px; color:var(--accent); }
.sharpened-text { flex:1; font-size:15.5px; color:var(--fg); line-height:1.5; }
.inline-actions {
  display:flex;
  align-items:center;
  gap:22px;
  margin-top:12px;
  padding-left:20px;
}
.sorted-row { font-size:15px; line-height:1.55; color:var(--fg); }
.sorted-note { color:var(--fg2); }
.deferred-title { font-size:14.5px; color:var(--fg); line-height:1.5; margin-top:12px; }
.defer-prompt { font-size:13px; color:var(--fg3); margin-top:6px; }
.cta-row {
  margin-top:40px;
  display:flex;
  align-items:center;
  gap:20px;
}

/* Reason chips — selection is darker text + darker border only, no fill */
.chips { display:flex; flex-wrap:wrap; gap:9px; margin-top:12px; }
.chip {
  font-size:13px;
  border-radius:999px;
  padding:6px 14px;
  border:1px solid var(--bd);
  color:var(--fg2);
  background:transparent;
  cursor:pointer;
}
.chip:hover { border-color:var(--bd2); }
.chip.selected, .chip[aria-pressed="true"] {
  color:var(--fg);
  border-color:var(--bd2);
}

/* ------------------------------------------------------------ stalled card */
.stall-card {
  width:100%;
  max-width:496px;
  margin:0 auto;
  border:1px solid var(--bd2);
  border-radius:12px;
  padding:34px 36px;
  background:var(--surface);
}
.stall-title {
  font-size:20px;
  font-weight:500;
  color:var(--fg);
  line-height:1.4;
  margin-top:12px;
  text-wrap:pretty;
}
.stall-history { font-size:14.5px; color:var(--fg2); margin-top:8px; }
.draft {
  margin-top:22px;
  border-left:2px solid var(--bd2);
  padding:2px 0 2px 16px;
}
.draft-disclose {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--fg3);
  cursor:pointer;
}
.draft-disclose .caret { font-size:10px; }
.draft-quote, .draft p {
  font-family:'Source Serif 4',Georgia,serif;
  font-size:15.5px;
  line-height:1.65;
  color:var(--fg2);
  font-style:italic;
  margin:10px 0 0;
}
/* The four exits — the ONLY affordances; all equal weight, none accented */
.stall-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:28px;
}
.stall-grid button {
  font-size:14.5px;
  color:var(--fg);
  border:1px solid var(--bd2);
  border-radius:8px;
  padding:13px 14px;
  text-align:center;
  background:transparent;
}
.stall-grid button:hover { background:var(--sel); }

/* ----------------------------------------------------------- weekly review */
.review-title {
  font-family:'Source Serif 4',Georgia,serif;
  font-size:25px;
  font-weight:500;
  color:var(--fg);
  letter-spacing:-.01em;
  margin:14px 0 0;
}
.narrative {
  font-family:'Source Serif 4',Georgia,serif;
  font-size:18.5px;
  line-height:1.75;
  color:var(--fg);
  margin-top:26px;
}
.narrative p { margin:0; text-wrap:pretty; }
.narrative p + p { margin-top:20px; }
.review .divider, .review hr { margin:34px 0; }
.decision-line {
  font-family:'Source Serif 4',Georgia,serif;
  font-size:18px;
  line-height:1.7;
  color:var(--fg2);
  font-style:italic;
  margin:14px 0 0;
}
/* Carry-forward action row: accent left rule */
.carry {
  margin-top:14px;
  display:flex;
  gap:13px;
  align-items:flex-start;
  border-left:2px solid var(--accent);
  padding-left:16px;
}
.carry .row-title { font-size:16px; font-weight:500; line-height:1.45; }
.carry .accept { flex:none; padding-top:2px; }

/* ------------------------------------------------------------------- goals */
.goal-cards {
  margin-top:32px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.goal-card {
  border:1px solid var(--bd2);
  border-radius:10px;
  padding:26px 28px;
  background:var(--surface);
}
.goal-head { display:flex; align-items:baseline; gap:12px; }
.goal-name { flex:1; font-size:17.5px; font-weight:500; color:var(--fg); }
.goal-type { flex:none; font-size:12px; font-weight:400; color:var(--fg3); }
.goal-body {
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
  font-size:15px;
  line-height:1.6;
}
.goal-label { color:var(--fg3); }
.goal-note {
  margin-top:20px;
  font-size:15px;
  line-height:1.6;
  color:var(--fg2);
}
.goal-foot { margin-top:20px; font-size:14px; color:var(--fg3); }

/* ---------------------------------------------------------------- grouping */
.lede {
  font-size:16px;
  color:var(--fg);
  line-height:1.6;
  margin-top:12px;
  text-wrap:pretty;
}
.group { margin-top:26px; }
.group:first-of-type { margin-top:32px; }
.group-name { font-size:13.5px; font-weight:500; color:var(--fg); }
.group-list { margin-top:8px; display:flex; flex-direction:column; }
/* Readable diff rows — no checkboxes; "from Anytime" annotations */
.diff-row {
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:9px 0;
  border-bottom:1px solid var(--bd);
}
.diff-row:last-child { border-bottom:0; }
.diff-title { flex:1; font-size:15px; color:var(--fg); }
.diff-meta { flex:none; font-size:12px; color:var(--fg3); }

/* ---------------------------------------------------------------- contexts */
/* Anytime · Someday · Incubator — three columns >=1000px, stacked below */
.contexts { display:grid; grid-template-columns:1fr; }
.context-col { padding:28px 0; border-bottom:1px solid var(--bd); }
.context-col:last-child { border-bottom:0; }
.context-col.someday { background:var(--bg); padding:28px 20px; border-radius:10px; }
@media (min-width:1000px) {
  .contexts { grid-template-columns:1fr 1fr 1fr; }
  .context-col { padding:36px 30px; border-bottom:0; border-right:1px solid var(--bd); }
  .context-col:last-child { border-right:0; }
  .context-col.someday { border-radius:0; padding:36px 30px; }
}
.context-title, .context-col h2 { font-size:17px; font-weight:500; color:var(--fg); }
.context-col.someday .context-title, .context-col.someday h2 { color:var(--fg2); }
.context-sub { font-size:12.5px; color:var(--fg3); margin-top:4px; }
.context-list { margin-top:22px; display:flex; flex-direction:column; }
.context-list .row { gap:11px; }
.context-list .cb { width:17px; height:17px; }
.context-list .row-title { line-height:1.4; }
.context-list .goal-dot { width:6px; height:6px; margin-top:6px; }
/* Someday rests at .62 list opacity */
.context-col.someday .context-list, .someday-list { opacity:.62; }
/* Incubator: prose thoughts, no checkboxes */
.incubator-list { margin-top:24px; display:flex; flex-direction:column; gap:20px; }
.incubator-list p, .thought {
  font-size:15.5px;
  color:var(--fg2);
  line-height:1.6;
  text-wrap:pretty;
}

/* ------------------------------------------------------- overlays: palette */
.palette-backdrop, .overlay-backdrop {
  position:fixed;
  inset:0;
  background:var(--scrim);
  z-index:70;
}
.palette, .quickadd {
  position:fixed;
  left:50%;
  top:82px;
  transform:translateX(-50%);
  width:min(520px, calc(100vw - 32px));
  background:var(--surface);
  border:1px solid var(--bd2);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
  z-index:71;
}
.palette-input {
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 20px;
  border-bottom:1px solid var(--bd);
}
.palette-prompt { flex:none; font-size:15px; color:var(--fg3); }
.palette-input input {
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:none;
  padding:0;
  font-size:16px;
  color:var(--fg);
  caret-color:var(--accent);
}
.palette-input input::placeholder { color:var(--fg3); }
.palette-list {
  padding:8px;
  max-height:min(420px, 60dvh);
  overflow-y:auto;
}
.palette-group {
  font-size:11px;
  color:var(--fg3);
  letter-spacing:.05em;
  padding:8px 12px 4px;
}
.palette-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  padding:11px 12px;
  font-size:15px;
  color:var(--fg);
  border-radius:8px;
  text-align:left;
}
.palette-item:hover { background:var(--sel); }
.palette-item.active, .palette-item.selected, .palette-item[aria-selected="true"] {
  background:var(--selacc);
}
.palette-item .kbd, .palette-item .key-hint {
  font-family:'Geist Mono',monospace;
  font-size:11px;
  color:var(--fg3);
  border:0;
  padding:0;
}
.palette-empty { padding:18px 12px; font-size:14px; color:var(--fg3); }

/* Quick-add overlay reuses the capture field inside the panel */
.quickadd .capture, .quickadd .capture-bar {
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:16px 20px;
}
.quickadd .capture:focus-within, .quickadd .capture-bar:focus-within {
  border:0;
  box-shadow:none;
}

/* ----------------------------------------------------------- defer popover */
.popover {
  position:absolute;
  z-index:50;
  min-width:264px;
  background:var(--surface);
  border:1px solid var(--bd2);
  border-radius:10px;
  padding:16px;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.popover-label { font-size:13px; color:var(--fg3); }
.popover input[type="date"], .popover input[type="text"] {
  width:100%;
  margin-top:10px;
  font-size:14px;
  color:var(--fg);
  background:var(--surface);
  border:1px solid var(--bd2);
  border-radius:7px;
  padding:7px 10px;
}
.popover input:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--ring);
  outline:none;
}
.popover .chips { margin-top:12px; }
.popover .popover-actions {
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:14px;
}

/* ------------------------------------------------------------------- toast */
/* One quiet sentence, bottom center, fades. */
.toast {
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translate(-50%, 6px);
  z-index:80;
  max-width:calc(100vw - 44px);
  background:var(--surface);
  color:var(--fg2);
  border:1px solid var(--bd2);
  border-radius:999px;
  padding:10px 18px;
  font-size:14px;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.toast.show { opacity:1; transform:translate(-50%, 0); }

/* -------------------------------------------------------------------- gate */
/* Tasks-app language: --surface card, 1px --bd, radius 12. Not the japan card. */
#gate {
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  padding:22px;
}
.gate-card {
  width:min(400px, 100%);
  background:var(--surface);
  border:1px solid var(--bd);
  border-radius:12px;
  padding:40px 36px;
  text-align:center;
}
.gate-lock {
  display:flex;
  justify-content:center;
  color:var(--fg3);
}
.gate-card h1 {
  font-size:19px;
  font-weight:500;
  color:var(--fg);
  letter-spacing:-.01em;
  margin-top:16px;
}
.gate-card p {
  font-size:14.5px;
  color:var(--fg2);
  line-height:1.6;
  margin-top:6px;
}
/* Quiet inline error — never red */
.gate-err {
  color:var(--fg);
  font-size:13.5px;
  margin-top:14px;
}
.gate-card input {
  display:block;
  width:100%;
  margin-top:22px;
  padding:11px 14px;
  font-size:16px;
  color:var(--fg);
  background:var(--surface);
  border:1px solid var(--bd2);
  border-radius:8px;
  caret-color:var(--accent);
  text-align:left;
}
.gate-card input::placeholder { color:var(--fg3); }
.gate-card input:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--ring);
  outline:none;
}
.gate-card button {
  display:block;
  width:100%;
  margin-top:12px;
  font-size:15px;
  font-weight:500;
  color:#fff;
  background:var(--accent);
  border:none;
  border-radius:8px;
  padding:12px 24px;
  text-align:center;
}
.gate-card button:hover { opacity:.92; }

/* ---------------------------------------------------------------- settle */
/* The one orchestrated moment: the plan settles in on first open of the day.
   Rows fade/slide in, staggered ~40ms, up to 12 children. */
body.settle .view > * {
  animation:settle .15s ease both;
}
body.settle .view > :nth-child(2)  { animation-delay:40ms; }
body.settle .view > :nth-child(3)  { animation-delay:80ms; }
body.settle .view > :nth-child(4)  { animation-delay:120ms; }
body.settle .view > :nth-child(5)  { animation-delay:160ms; }
body.settle .view > :nth-child(6)  { animation-delay:200ms; }
body.settle .view > :nth-child(7)  { animation-delay:240ms; }
body.settle .view > :nth-child(8)  { animation-delay:280ms; }
body.settle .view > :nth-child(9)  { animation-delay:320ms; }
body.settle .view > :nth-child(10) { animation-delay:360ms; }
body.settle .view > :nth-child(11) { animation-delay:400ms; }
body.settle .view > :nth-child(12) { animation-delay:440ms; }
body.settle .view > :nth-child(n+13) { animation-delay:440ms; }
@keyframes settle {
  from { opacity:0; transform:translateY(4px); }
  to   { opacity:1; transform:none; }
}

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  body.settle .view > * { animation:none; opacity:1; transform:none; }
  .toast { transition:none; }
}

/* ----------------------------------------------------------------- mobile */
@media (max-width:899px) {
  #app { display:block; min-height:100dvh; }

  /* Bottom tab bar: three equal cells, full-height tap targets, no icons,
     no accent — weight and colour carry the active state (handoff 01 §2). */
  .tabs {
    order:0;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    top:auto;
    z-index:40;
    width:auto;
    height:calc(56px + env(safe-area-inset-bottom));
    padding:0 0 env(safe-area-inset-bottom);
    border-right:0;
    border-top:1px solid var(--bd);
    background:var(--bg);
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:0;
  }
  .tab {
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    font-size:15px;
  }
  .tabs-hint { display:none; }

  /* Content: 22px edge padding, 26px top; room for the fixed tab bar */
  .main {
    padding:26px 22px calc(30px + 56px + env(safe-area-inset-bottom));
  }
  .view-sub, .subtitle, .forecast {
    font-size:14px;
    line-height:1.55;
    margin-top:6px;
  }

  /* Overlays sit above the tab bar; toast clears it */
  .toast { bottom:calc(56px + 20px + env(safe-area-inset-bottom)); }
  .palette, .quickadd { top:64px; }

  /* Touch targets >=44px */
  .cb::before {
    content:"";
    position:absolute;
    inset:-13px;
    border-radius:50%;
  }
  .chip { padding:10px 16px; }
  .palette-item { min-height:44px; }
  .inline-actions .accept, .inline-actions .edit-link { padding:8px 0; }
  .btn, .btn-primary { width:100%; padding:14px; border-radius:10px; }
  .cta-row { flex-direction:column; align-items:flex-start; margin-top:34px; }
}