/* Guidance — airy, warm, minimal. */
:root {
  /* Black & white on beige. Color is semantic only, always muted:
     green = goals/progress/ahead, red = behind pace. */
  --bg: #F5EEE1;
  --bg-rgb: 245,238,225;
  --surface: #FFFDF9;
  --surface-warm: #EBE2D0;
  --ink: #262320;
  --muted: #877E72;
  --faint: #B7AC9C;
  --line: #E3D8C5;
  --terra: #262320;      /* UI accent = near-black (buttons, FAB, flags, tabs) */
  --terra-soft: #D8CDBB;
  --sand: #D8C6A8;
  --peak-fill: #CFC0A2;   /* shaded mountain face */
  --peak-light: #E7DECB;  /* lit mountain face */
  --ahead: #6E8760;      /* muted green — goals, progress, ahead of pace */
  --behind: #AC5A50;     /* muted red — behind pace */
  --shadow: 0 1px 2px rgba(38,35,32,.05), 0 8px 30px rgba(38,35,32,.07);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: Inter, system-ui, sans-serif;
  background: var(--bg); color: var(--ink); font-weight: 400;
  -webkit-font-smoothing: antialiased; letter-spacing: .01em;
  display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden;
}
.serif { font-family: Newsreader, Georgia, serif; }
.muted { color: var(--muted); }
.hidden { display: none !important; }

/* ---- Screens (loading / login) ---- */
.screen { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { width: 100%; max-width: 22rem; text-align: center; }
.login-card h1 { font-family: Newsreader, serif; font-weight: 500; font-size: 30px; }
.login-card h1 .dot { color: var(--terra); }
.login-card p.tag { color: var(--muted); margin: 6px 0 20px; }
#login-form { display: flex; flex-direction: column; gap: 10px; }
#login-form input { font: inherit; font-size: 15px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface); color: var(--ink); text-align: center; }
#login-form input:focus { outline: none; border-color: var(--terra); }
#login-form button { font: inherit; font-size: 15px; font-weight: 500; padding: 13px; border: none;
  border-radius: 12px; background: var(--terra); color: #fff; cursor: pointer; }
#login-msg { color: var(--muted); font-size: 13px; margin-top: 12px; min-height: 18px; }
.warning { color: var(--behind); font-size: 13px; margin-top: 14px; }
code { background: rgba(150,130,100,.15); padding: 0 .3em; border-radius: 5px; font-size: .9em; }

/* ---- Top bar ---- */
header.top { display: flex; align-items: baseline; justify-content: space-between;
  padding: 22px 26px 10px; max-width: 1040px; width: 100%; margin: 0 auto; }
.wordmark { font-family: Newsreader, serif; font-weight: 500; font-size: 20px; letter-spacing: .02em; }
.wordmark .dot { color: var(--terra); }
.wordmark-home { cursor: pointer; }
.wordmark-home:hover { opacity: .68; }
.wordmark-home:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; border-radius: 4px; }
.top-right { display: flex; align-items: center; gap: 14px; }
.today-date { font-size: 12.5px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.menu-btn { background: none; border: none; font-size: 20px; color: var(--muted); cursor: pointer; line-height: 1; padding: 2px 6px; }
.menu-btn:hover { color: var(--terra); }
.menu { position: absolute; right: 22px; top: 58px; z-index: 45; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; min-width: 160px; }
.menu button { display: block; width: 100%; text-align: left; font: inherit; font-size: 14px; padding: 11px 16px;
  background: none; border: none; color: var(--ink); cursor: pointer; }
.menu button:hover { background: var(--surface-warm); }

/* ---- Breadcrumb ---- */
.crumbs { max-width: 1040px; width: 100%; margin: 0 auto; padding: 4px 26px 0;
  display: flex; align-items: center; gap: 8px; min-height: 26px; }
.crumb { background: none; border: none; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; padding: 3px 0; }
.crumb:hover { color: var(--terra); }
.crumb.here { color: var(--ink); }
.crumb-sep { color: var(--faint); font-size: 12px; }

/* ---- Stage / views ---- */
main.stage { flex: 1; max-width: 1040px; width: 100%; margin: 0 auto; padding: 0 20px 150px; position: relative; }
.view { display: none; animation: fade .5s ease; }
.view.active { display: block; }
@keyframes fade { from { opacity: 0; transform: scale(.985) translateY(6px); } to { opacity: 1; transform: none; } }
.view-intro { text-align: center; padding: 18px 0 6px; }
.view-intro h1 { font-family: Newsreader, serif; font-weight: 400; font-size: 27px; letter-spacing: .01em; }
.view-intro p { color: var(--muted); font-size: 14px; margin-top: 6px; }
.empty { text-align: center; color: var(--muted); padding: 40px 0; }
.empty button { margin-top: 14px; font: inherit; font-size: 14px; padding: 10px 18px; border-radius: 22px;
  background: var(--terra); color: #fff; border: none; cursor: pointer; }

/* ---- Range SVG ---- */
.range-wrap { width: 100%; max-width: 560px; margin: 0 auto; }

/* ---- the principles, level 0 (Track 2 · G) ----
   A list, not a landscape: eight principles side by side answer "where is my
   attention going" in one screen, which the staggered range needs four to do. The
   landscape is what one of these opens into. */
/* The one-time offer to add the level above today's domains. Deliberately wordy:
   it says exactly what will be created and exactly what won't move, because an
   offer that hides its mechanics is a leap rather than a choice. */
/* A climb inside a principle, in the capture chips (Track 2 · G). The pip carries the
   principle's colour — a wrapping row can't be indented, but the colour rides with the
   chip wherever the line breaks, and it's the same hue the mountain flies everywhere
   else. Sub chips are quieter so the principle reads as the heading it is. */
.rv-opt.sub { font-size: 13px; color: var(--muted); }
.rv-opt.sub.on { color: inherit; }

.chip-pip { width: 7px; height: 7px; border-radius: 50%; display: inline-block;
  margin-right: 7px; vertical-align: baseline; flex: none; }
.chip-opt.sub { font-size: 12.5px; color: var(--muted); }
.chip-opt.sub[aria-pressed="true"] { color: inherit; }
.cx-menu-item.sub { padding-left: 26px; font-size: 13px; }
.cx-menu-item.sub::before { content: ""; position: absolute; left: 14px; top: 50%;
  width: 5px; height: 1px; background: var(--faint); }
.cx-menu-item { position: relative; }

.sp-offer { border: 1px solid var(--line); border-radius: 16px; padding: 18px 19px;
  margin: 6px 0 18px; background: var(--surface); display: flex; flex-direction: column; gap: 9px; }
.sp-offer h3 { font-size: 20px; font-weight: 500; }
.sp-offer p { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.sp-what b { color: var(--ink); font-weight: 500; }
.sp-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 5px; }
.sp-actions .btn { font: inherit; font-size: 14px; padding: 10px 17px; border-radius: 11px;
  cursor: pointer; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.sp-actions .btn.primary { background: var(--terra); color: #FFFDF9; border-color: var(--terra); }
.sp-actions .btn:disabled { opacity: .55; cursor: default; }

/* The eight, as offered in the new-principle sheet. */
.nd-lead { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 4px 0 14px; }
.nd-princ { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
/* A row is a toggle now: the eight are a proposal to subtract from, not a list to
   accept whole. Kept visually as a row rather than a checkbox list — the ranking is
   the point of the screen, and a column of checkboxes reads as a form. */
.nd-princ-row { display: grid; grid-template-columns: 18px 8px 1fr auto; gap: 10px;
  align-items: baseline; padding: 9px 2px; border-top: 1px solid var(--line);
  width: 100%; text-align: left; background: none; border-left: 0; border-right: 0;
  border-bottom: 0; color: inherit; font: inherit; cursor: pointer;
  transition: opacity .14s ease; }
.nd-princ-row:first-child { border-top: 0; }
.nd-princ-row:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; border-radius: 6px; }
.nd-princ-row.off { opacity: .42; }
.nd-princ-row.off .nd-princ-name { text-decoration: line-through; text-decoration-thickness: 1px; }
.nd-princ-mark { font-size: 13px; color: var(--muted); align-self: center; }
.nd-princ-row.off .nd-princ-mark { color: var(--faint); }
.nd-go[disabled] { opacity: .45; cursor: default; }
.nd-princ-n { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.nd-princ-pip { width: 8px; height: 8px; border-radius: 50%; transform: translateY(-1px); }
.nd-princ-name { font-family: Newsreader, Georgia, serif; font-size: 17px; }
.nd-princ-q { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.nd-princ-why { font-size: 11.5px; color: var(--faint); margin-top: 3px; line-height: 1.5; }
.nd-go { width: 100%; font: inherit; font-size: 15px; font-weight: 500; padding: 13px;
  border: none; border-radius: 12px; background: var(--terra); color: #FFFDF9; cursor: pointer; }
.nd-go:disabled { opacity: .6; cursor: default; }

.pr-list { display: flex; flex-direction: column; padding: 4px 0 8px; }
.pr-row { display: grid; grid-template-columns: minmax(0,1fr) 168px; gap: 16px; align-items: center;
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: none; border: 0; border-top: 1px solid var(--line);
  padding: 15px 10px 15px 4px; border-radius: 10px; }
.pr-row:first-child { border-top: 0; }
.pr-row:hover { background: var(--surface-warm); }
.pr-row:focus-visible { outline: 2px solid var(--terra); outline-offset: -2px; }
.pr-left { min-width: 0; }
.pr-name { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.pr-pip { width: 8px; height: 8px; border-radius: 50%; flex: none; transform: translateY(-1px); }
.pr-title { font-size: 19px; font-weight: 500; }
.pr-count { font-size: 11.5px; color: var(--faint); letter-spacing: .04em; }
.pr-aim { font-size: 12.5px; color: var(--muted); margin-top: 2px;
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pr-right { display: flex; flex-direction: column; align-items: flex-end; }
.pr-range { width: 168px; height: 62px; display: block; }
.pr-flat { stroke: var(--line); stroke-width: 2; fill: none; stroke-linecap: round; }
.pr-dot { stroke: var(--surface); stroke-width: 1.4; }
.pr-share { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums;
  text-align: right; margin-top: 5px; }
.pr-share b { font-family: Newsreader, Georgia, serif; font-size: 15px; color: var(--ink); font-weight: 500; }
.pr-none { color: var(--faint); }
/* What's left of a weekly ceiling, said where attention is already reported —
   the same question, with the answer the user gave. */
.pr-cap { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
  text-align: right; margin-top: 3px; letter-spacing: .02em; }
.pr-cap.full { color: var(--behind); }
.ceil-row { display: flex; align-items: center; gap: 11px; }
.ceil-row input { width: 6.5rem; font: inherit; font-size: 15px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); }
.ceil-row input:focus { outline: none; border-color: var(--terra); }
.ceil-note { font-size: 12px; color: var(--muted); }
@media (max-width: 420px) {
  .pr-row { grid-template-columns: minmax(0,1fr) 118px; gap: 10px; }
  .pr-range { width: 118px; height: 50px; }
  .pr-title { font-size: 17.5px; }
}
.bp-shadow { fill: #2a2318; opacity: .07; }
svg.range { width: 100%; height: auto; display: block; overflow: visible; }
.peak-hit { cursor: pointer; }
.peak-fill { fill: #CFC0A2; transition: fill .3s; }   /* shaded left face */
.peak-hit:hover .peak-fill { fill: #C8B896; }
.peak-light { fill: #E7DECB; }                        /* lighter right face */
.trail { stroke: var(--faint); stroke-width: 2.2; stroke-dasharray: 2.5 7; stroke-linecap: round; fill: none; }
.pace-ring { fill: var(--bg); stroke: var(--muted); stroke-width: 2.4; }
.prog-dot { fill: var(--terra); }
.prog-dot.ahead { fill: var(--ahead); }
.prog-dot.behind { fill: var(--behind); }
/* Milestone camps on the range (OT-11) */
.camp-hit { cursor: pointer; }
.camp-tap { fill: transparent; }
.camp { fill: var(--bg); stroke: var(--muted); stroke-width: 2.4; }
.camp.current { fill: var(--surface-warm); stroke: var(--terra); stroke-width: 3; }
.camp.done { fill: var(--ahead); stroke: var(--ahead); }
.camp-hit:hover .camp { stroke: var(--terra); }
.summit-flag { fill: var(--terra); }
.flag-pole { stroke: var(--terra); stroke-width: 2.6; stroke-linecap: round; }
.dname { font-family: Newsreader, serif; font-size: 22px; fill: var(--ink); text-anchor: middle; }
.dnote { font-family: Inter, sans-serif; font-size: 15px; text-anchor: middle; letter-spacing: .02em; }
.dnote.ahead { fill: var(--ahead); }
.dnote.behind { fill: var(--behind); }
.dpct { font-family: Inter, sans-serif; font-size: 14px; fill: var(--muted); text-anchor: middle; }
.legend { display: flex; gap: 22px; justify-content: center; margin-top: 8px; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.lg-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--terra); display: inline-block; }
.lg-ring { width: 9px; height: 9px; border-radius: 50%; border: 1.6px solid var(--muted); display: inline-block; }
.lg-camp { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-warm); border: 2px solid var(--terra); display: inline-block; }

/* ---- Domain (zoomed) view ---- */
.domain-head { text-align: center; padding: 10px 0 2px; }
.domain-head h2 { font-family: Newsreader, serif; font-weight: 400; font-size: 25px; }
.domain-head .sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.domain-aim { max-width: 42ch; margin: 10px auto 0; color: var(--ink); font-size: 16px; line-height: 1.5;
  font-family: Newsreader, serif; font-style: italic; }
svg.climb { width: 100%; height: auto; display: block; }

/* ---- Domain infinite range (5f) — a vertical, scrollable staggered range ---- */
.climb-panel { position: relative; height: 58vh; min-height: 400px; max-height: 600px;
  max-width: 500px; border-radius: 14px; overflow: hidden; background: var(--bg); margin: 4px auto 0; }
.climb-panel::before, .climb-panel::after { content: ""; position: absolute; left: 0; right: 0;
  pointer-events: none; z-index: 2; }
.climb-panel::before { top: 0; height: 150px;
  background: linear-gradient(to bottom, rgba(var(--bg-rgb),1) 16%, rgba(var(--bg-rgb),0) 100%); }
.climb-panel::after { bottom: 0; height: 60px;
  background: linear-gradient(to top, rgba(var(--bg-rgb),1) 55%, rgba(var(--bg-rgb),0) 100%); }
.climb-sky { position: absolute; top: 12px; left: 0; right: 0; z-index: 3; pointer-events: none;
  text-align: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.climb-scroll { height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--faint) transparent; }
.climb-scroll::-webkit-scrollbar { width: 6px; }
.climb-scroll::-webkit-scrollbar-thumb { background: var(--faint); border-radius: 3px; }
.peak-done { fill: var(--peak-light); opacity: .6; }
.peak-done-face { fill: var(--peak-fill); opacity: .6; }
.peak-outline { fill: none; stroke: var(--faint); stroke-width: 1.7; stroke-dasharray: 5 5; stroke-linejoin: round; }
.prog-shade { fill: var(--ahead); opacity: .13; }
.goal-ring { fill: var(--bg); stroke: var(--terra); stroke-width: 1.8; }
.summit-dot { fill: var(--terra); }
.you { fill: var(--ahead); }
.you-ring { fill: none; stroke: var(--ahead); stroke-width: 2; opacity: .4; }
.range-horizon { stroke: var(--line); stroke-width: 1.2; }
.rng-tag { font-family: Inter, sans-serif; font-size: 6.2px; letter-spacing: .09em; text-transform: uppercase; fill: var(--faint); }
.rng-tag.ahead { fill: var(--ahead); }
.rng-tag.behind { fill: var(--behind); }
.rng-title { font-family: Newsreader, Georgia, serif; font-size: 9.75px; fill: var(--ink); }
.rng-title.next { font-size: 9.1px; font-style: italic; fill: var(--muted); }
.rng-sub { font-family: Inter, sans-serif; font-size: 7.15px; fill: var(--muted); }
.rng-done { font-family: Inter, sans-serif; font-size: 8.1px; fill: var(--ink); }
.waypoint-hit { cursor: pointer; }
.wp-node { fill: var(--surface); stroke: var(--line); stroke-width: 1.4; transition: stroke .25s; }
.waypoint-hit:hover .wp-node { stroke: var(--terra); }
.wp-prog { fill: none; stroke: var(--ahead); stroke-width: 3.2; stroke-linecap: round; }
.wp-tier { font-family: Inter, sans-serif; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; fill: var(--faint); }
.wp-label { font-family: Inter, sans-serif; font-size: 12.5px; fill: var(--ink); }
.wp-sub { font-family: Inter, sans-serif; font-size: 11px; fill: var(--muted); }
.climb-trail { fill: none; stroke: var(--faint); stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; }
.you-marker { fill: var(--ahead); }
.add-sub-btn { display: block; margin: 8px auto 0; font: inherit; font-size: 13px; padding: 9px 18px;
  border-radius: 22px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); cursor: pointer; }
.add-sub-btn:hover { border-color: var(--terra); color: var(--terra); }

/* ---- Detail view ---- */
.detail-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 22px; box-shadow: var(--shadow); margin-top: 14px; }
.detail-card h2 { font-family: Newsreader, serif; font-weight: 400; font-size: 22px; padding-right: 60px; }
.edit-btn { background: none; border: 1px solid var(--line); color: var(--muted); font: inherit; font-size: 12px;
  padding: 4px 12px; border-radius: 20px; cursor: pointer; transition: color .15s, border-color .15s; }
.edit-btn:hover { color: var(--ink); border-color: var(--faint); }
.domain-head .edit-btn { margin-top: 10px; }
.detail-card .edit-btn { position: absolute; top: 18px; right: 18px; }
.btn.danger { color: var(--behind); }
.btn.danger:hover { border-color: var(--behind); }
.btn.danger:disabled { opacity: .45; cursor: default; }

/* Start over. Below the save row and separated by a rule, because it is the only
   button in the app whose whole job is destroying work — it must not sit in the same
   visual group as the one that keeps it. */
.danger-zone { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.linkish { background: none; border: 0; padding: 0; font: inherit; font-size: 13.5px;
  cursor: pointer; text-decoration: underline; color: var(--muted); }
.linkish.danger { color: var(--behind); }
.danger-zone .hint { margin-top: 6px; }
.danger-zone .ob-name { margin-top: 8px; }
.range-add { text-align: center; margin-top: 14px; }
.range-controls { text-align: center; margin-top: 10px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.range-expand { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); background: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 15px; cursor: pointer; }
.range-expand:hover { border-color: var(--terra); color: var(--terra); }
.range-expand.on { border-color: var(--ink); color: var(--ink); }
/* 5g-b: connections drawn on the range */
.conn-path { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: .13; }
.conn-link { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 6 5; stroke-linecap: round; opacity: .8; }
.conn-arrow { fill: var(--muted); opacity: .9; }
.conn-plabel { font-family: Inter, sans-serif; font-size: 12px; fill: var(--muted); }

/* 5h: Mountains <-> Connections mode toggle + the connections timeline */
.rv-toggle { display: flex; width: fit-content; margin: 2px auto 14px; gap: 2px;
  background: var(--surface-warm); border: 1px solid var(--line); border-radius: 11px; padding: 3px; }
.rv-tab { font: inherit; font-size: 13px; font-weight: 500; color: var(--muted);
  background: none; border: none; padding: 6px 16px; border-radius: 8px; cursor: pointer; }
.rv-tab.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(38,35,32,.08); }
.rv-inline { margin: 0; }   /* left-aligned toggle inside a form field (task series scope) */
#view-range.conn-mode .range-wrap,
#view-range.conn-mode #legend,
#view-range.conn-mode .range-mode,
#view-range.conn-mode #seasonHeader,
#view-range.conn-mode #seasonNudge,
#view-range.conn-mode .range-controls,
#view-range.conn-mode #conqueredPill { display: none !important; }
.ct-timeline { display: none; }
#view-range.conn-mode .ct-timeline { display: block; }
.ct-timeline { max-width: 460px; margin: 0 auto; padding: 2px 6px 6px; }
.ct-svg { width: 100%; height: auto; display: block; }
.ct-axis { font-family: Inter, sans-serif; font-size: 9.5px; letter-spacing: 1.4px; fill: var(--faint); }
.ct-spine { stroke: var(--sand); stroke-width: 2.5; stroke-linecap: round; }
.ct-dir { stroke: #B49F76; stroke-width: 2.4; stroke-linecap: round; }
.ct-tip { fill: #B49F76; }
.ct-arc { fill: none; stroke: var(--faint); stroke-width: 1.6; stroke-dasharray: 4 3; }
.ct-card { cursor: pointer; }
.ct-bg { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.ct-dom { font-family: Inter, sans-serif; font-size: 9.5px; letter-spacing: .7px; }
.ct-date { font-family: Inter, sans-serif; font-size: 9.5px; letter-spacing: .5px; fill: var(--muted); }
.ct-title { font-family: Newsreader, serif; font-size: 14px; fill: var(--ink); }
.ct-grip { cursor: grab; touch-action: none; }
.ct-gdot { fill: var(--faint); }
.ct-griphit { fill: transparent; }
.ct-dragging { cursor: grabbing; }
.ct-dragging .ct-bg { stroke: var(--terra); }
.ct-empty { text-align: center; padding: 44px 24px; }
.ct-empty .serif { font-family: Newsreader, serif; font-size: 19px; margin-bottom: 6px; }
.ct-empty .muted { font-size: 13px; line-height: 1.5; max-width: 34ch; margin: 0 auto; }

/* Conquered Mountains (OT-32): compact pill on the range + reflection cards */
.conquered-pill { display: block; margin: 0 auto 6px; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--ahead); background: color-mix(in srgb, var(--ahead) 12%, transparent); border: none;
  border-radius: 999px; padding: 6px 15px; cursor: pointer; }
.conquered-pill:hover { background: color-mix(in srgb, var(--ahead) 20%, transparent); }

/* Season toggle + header on the Mountain tab (5d) */
.range-mode { display: flex; justify-content: center; gap: 0; margin: 2px auto 10px; width: fit-content;
  border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--surface); }
.range-mode-btn { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); background: none;
  border: none; border-radius: 999px; padding: 6px 16px; cursor: pointer; }
.range-mode-btn[aria-pressed="true"] { background: var(--terra); color: var(--bg); }
.season-header { max-width: 460px; margin: 0 auto 8px; text-align: center; }
.season-title { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.season-label { font-family: Newsreader, serif; font-size: 18px; color: var(--ink); }
.season-count { font-size: 12.5px; color: var(--muted); }
.season-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.season-fill { height: 100%; background: var(--ahead); border-radius: 999px; transition: width .3s; }
.peak-hit.faded { opacity: .28; }

/* Season wrap-up + nudge + history (5e-a) */
.season-actions { display: flex; justify-content: center; gap: 16px; margin-top: 10px; }
.season-link { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--terra); background: none; border: none; cursor: pointer; padding: 2px 4px; }
.season-link.ghost { color: var(--muted); }
.season-link:hover { text-decoration: underline; }
.season-nudge { display: flex; align-items: center; gap: 10px; max-width: 460px; margin: 0 auto 10px; padding: 10px 14px;
  background: color-mix(in srgb, var(--terra) 8%, var(--surface)); border: 1px solid var(--line); border-radius: 12px; }
.nudge-text { flex: 1; font-size: 13px; color: var(--ink); }
.nudge-go { flex: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--bg); background: var(--terra); border: none; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.nudge-x { flex: none; background: none; border: none; color: var(--faint); font-size: 13px; cursor: pointer; padding: 2px 6px; }
.nudge-x:hover { color: var(--ink); }
.sw-recap { font-size: 15px; color: var(--ink); margin: 2px 0 8px; }
.sw-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; color: var(--ink); }
.sw-item.done { color: var(--muted); }
.sw-flag { flex: none; }
.sw-roll-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-date { flex: none; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); }
.sw-reflect { width: 100%; font: inherit; font-size: 14px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); resize: vertical; }
.sw-reflect:focus { outline: none; border-color: var(--terra); }
.season-card { padding: 14px 16px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.season-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.season-card-label { font-family: Newsreader, serif; font-size: 17px; color: var(--ink); }
.season-card-stat { font-size: 12.5px; color: var(--muted); }
.season-card-focus { margin: 8px 0 0; font-size: 14px; color: var(--ink); }
.season-card-reflect { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.conq-card { display: flex; align-items: center; gap: 12px; padding: 13px 15px; margin-bottom: 9px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; }
.conq-card:hover { border-color: var(--terra); }
.conq-card.summit { background: color-mix(in srgb, var(--ahead) 8%, var(--surface)); border-color: color-mix(in srgb, var(--ahead) 30%, var(--line)); }
.conq-flag { flex: none; font-size: 19px; line-height: 1; }
.conq-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.conq-title { font-size: 15px; color: var(--ink); font-weight: 500; }
.conq-date { font-size: 12px; color: var(--muted); }
.detail-tier { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 3px; }
.pace-bar-wrap { margin: 16px 0 6px; }
.pace-bar { position: relative; height: 10px; background: var(--surface-warm); border-radius: 20px; }
.pace-fill { position: absolute; inset: 0 auto 0 0; background: var(--ahead); border-radius: 20px; }
.pace-tick { position: absolute; top: -4px; width: 2px; height: 18px; background: var(--muted); border-radius: 2px; }
.pace-legend { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.detail-progress { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.detail-progress input[type=range] { flex: 1; accent-color: var(--ahead); }
.daytracker { margin-top: 16px; }
.daygrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 6px; max-width: 360px; }
.daycell { aspect-ratio: 1; border-radius: 4px; background: #E7DECB; min-width: 0; }
.daycell.blank { background: transparent; }
.daycell.future { background: #F0E9DB; }
.daycell.l0 { background: #E7DECB; }
.daycell.l1 { background: #C3D0B4; }
.daycell.l2 { background: #94AE82; }
.daycell.l3 { background: #6E8760; }
.daycell.is-today { outline: 1.7px solid var(--ink); outline-offset: -1.7px; }
.day-legend { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 11px; color: var(--muted); }
.day-legend .daycell { width: 11px; height: 11px; aspect-ratio: auto; }
.section-label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 22px 0 8px; }

/* 5g: cross-domain connections */
.wait-banner { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0 4px; padding: 10px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--behind) 12%, transparent); font-size: 13px; line-height: 1.45; color: var(--ink); }
.wait-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--behind); margin-top: 4px; }
.conn-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.conn-kind { flex: none; min-width: 66px; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.conn-name { flex: 1; min-width: 0; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conn-x { flex: none; background: none; border: none; color: var(--muted); font-size: 14px; cursor: pointer; padding: 2px 6px; line-height: 1; }
.conn-x:hover { color: var(--behind); }
.conn-seg { display: inline-flex; background: var(--surface-warm); border-radius: 999px; padding: 3px; margin-bottom: 14px; }
.conn-seg-btn { font: inherit; font-size: 13px; border: none; background: none; color: var(--muted); border-radius: 999px; padding: 7px 16px; cursor: pointer; }
.conn-seg-btn.on { background: var(--terra); color: var(--bg); font-weight: 600; }
.conn-help { font-size: 13px; color: var(--muted); line-height: 1.45; margin-bottom: 10px; }
.conn-select, .cn-newpath input { width: 100%; font: inherit; font-size: 15px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
.conn-select:focus, .cn-newpath input:focus { outline: none; border-color: var(--terra); }
.cn-newpath { margin-top: 10px; }
.cn-add { display: block; width: 100%; margin-top: 14px; }
/* 5g-c: AI suggestion review */
.range-suggest { text-align: center; margin-top: 10px; }
.cs-item { display: flex; gap: 11px; align-items: flex-start; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.cs-item > input[type=checkbox] { flex: none; width: 17px; height: 17px; margin-top: 3px; accent-color: var(--ahead); }
.cs-body { flex: 1; min-width: 0; }
.cs-line { font-size: 14.5px; color: var(--ink); }
.cs-note { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
/* Plan my day (6a) */
.pd-schedhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* Outlined in --ink so it carries weight next to the section label, and kept off
   `.btn.ghost` so the two don't fight over color. The descendant selector is
   deliberate: plain `.pd-plan-btn` loses to `.btn { flex: 1 }` further down the
   file, which stretches it across the row instead of letting it sit right. */
.pd-schedhead .pd-plan-btn { margin: 0 !important; flex: none; padding: 7px 15px; border-radius: 20px;
  font-size: 13px; font-weight: 500; background: none; color: var(--ink); border: 1px solid var(--ink); }
.pd-schedhead .pd-plan-btn:hover { background: var(--ink); color: var(--bg); }
/* Empty-slot suggestions (6b). Fixed to the viewport, not the timeline: .day-scroll
   is overflow-y:auto and would clip it. JS sets left/top and flips it above the row
   when there's no room below. */
.slot-pop { position: fixed; z-index: 60; width: 340px; max-width: calc(100vw - 16px);
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 8px;
  box-shadow: 0 6px 28px rgba(38,35,32,.16); }
.slot-pop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 4px 6px 8px; }
.slot-pop-free { color: var(--ink); font-weight: 500; }
.slot-sug { display: flex; gap: 10px; align-items: flex-start; padding: 9px 8px; border-radius: 10px; cursor: pointer; }
.slot-sug:hover { background: var(--surface-warm); }
.slot-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: none; }
.slot-sug-body { flex: 1; min-width: 0; }
.slot-sug-title { font-size: 14px; color: var(--ink); }
.slot-why { font-size: 12px; color: var(--muted); margin-top: 2px; }
.slot-dur { flex: none; font-size: 11px; color: var(--muted); border: 1px solid var(--line);
  border-radius: 20px; padding: 2px 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.slot-else { display: block; width: 100%; text-align: left; font: inherit; font-size: 13px; color: var(--muted);
  background: none; border: 0; border-top: 1px solid var(--line); margin-top: 4px; padding: 10px 8px 4px; cursor: pointer; }
.slot-else:hover { color: var(--ink); }
.slot-none { font-size: 13px; color: var(--muted); padding: 2px 8px 8px; line-height: 1.45; }
.pd-planbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 6px 0 2px; padding: 9px 12px; border-radius: 12px; background: var(--surface-warm);
  border: 1px dashed var(--line); }
.pd-planbar-txt { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.pd-planbar-btns { display: flex; gap: 8px; flex: none; }
.pd-planbar-btns .btn { margin: 0 !important; flex: none; padding: 7px 14px; border-radius: 20px; font-size: 13px; }
.pd-plannote { margin: 6px 0 2px; }
.sg, .task-row { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.sg .sg-title { flex: 1; font-size: 14.5px; }
.sg .mini-bar { width: 82px; height: 5px; background: var(--surface-warm); border-radius: 20px; overflow: hidden; }
.sg .mini-fill { height: 100%; background: var(--ahead); }
.sg .sg-pct { font-size: 11.5px; color: var(--muted); width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.sg .chev { color: var(--faint); font-size: 15px; cursor: pointer; }
.task-row .cbox { width: 18px; height: 18px; border-radius: 50%; border: 1.6px solid var(--faint); flex: none;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.task-row .cbox.on { background: var(--ahead); border-color: var(--ahead); }
.task-row .cbox svg { width: 10px; height: 10px; stroke: #fff; opacity: 0; }
.task-row .cbox.on svg { opacity: 1; }
.task-row .tt { flex: 1; font-size: 14.5px; }
.task-row.done .tt { text-decoration: line-through; color: var(--muted); }
.task-row .q { font-size: 10px; color: var(--muted); background: var(--surface-warm); border-radius: 20px; padding: 2px 8px; }

/* ---- Today strip ---- */
.today { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: rgba(245,238,225,.9); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
.today-inner { max-width: 1040px; margin: 0 auto; padding: 12px 22px calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 16px; }
.today-label { font-family: Newsreader, serif; font-size: 14px; color: var(--terra); white-space: nowrap;
  display: flex; align-items: center; gap: 8px; }
.today-label .badge { font-family: Inter, sans-serif; font-size: 10.5px; color: var(--muted);
  background: var(--surface-warm); border-radius: 20px; padding: 2px 8px; }
.today-tasks { display: flex; gap: 10px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.today-tasks::-webkit-scrollbar { display: none; }
.today-empty { color: var(--muted); font-size: 13px; }
.tchip { display: flex; align-items: center; gap: 9px; white-space: nowrap; background: var(--surface);
  border: 1px solid var(--line); border-radius: 22px; padding: 8px 14px 8px 10px; font-size: 13px; cursor: pointer;
  transition: opacity .4s, transform .4s; }
.tchip .box { width: 17px; height: 17px; border-radius: 50%; border: 1.6px solid var(--faint); flex: none;
  display: inline-flex; align-items: center; justify-content: center; transition: all .3s; }
.tchip .box svg { width: 10px; height: 10px; opacity: 0; transform: scale(.4); transition: all .3s; stroke: #fff; }
.tchip .dom-tag { font-size: 10px; color: var(--muted); background: var(--surface-warm); border-radius: 20px; padding: 1px 7px; }
.tchip.done { opacity: .45; }
.tchip.done .box { background: var(--ahead); border-color: var(--ahead); }
.tchip.done .box svg { opacity: 1; transform: scale(1); }
/* The evening "plan tomorrow?" offer (nd-ui). A chip, not a banner: it rides the
   Today strip like everything else that asks for a moment of the day. */
.nd-chip { border-color: var(--terra); color: var(--terra); }
.nd-chip .nd-x { color: var(--muted); font-size: 11px; padding: 2px 4px; }
.nd-chip .nd-x:hover { color: var(--ink); }
.tchip.done .tt { text-decoration: line-through; }
.tchip.pop { animation: pop .45s ease; }
@keyframes pop { 30% { transform: scale(1.06); } 100% { transform: scale(1); } }
.fab { position: fixed; right: 22px; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 31;
  width: 54px; height: 54px; border-radius: 50%; background: var(--terra); color: #fff; border: none;
  font-size: 26px; font-weight: 300; cursor: pointer; box-shadow: 0 6px 20px rgba(38,35,32,.26);
  display: flex; align-items: center; justify-content: center; transition: transform .2s; }
.fab:hover { transform: scale(1.06) rotate(90deg); }

/* ---- Footer nav (mobile) ----
   Desktop navigates from the header icons, so this is display:none until the
   breakpoint. Mountains · Calendar · (+) · Log · More; Shop takes the More slot
   once it exists. The + is the FAB, moved into the bar rather than floating
   above two stacked bars.

   Opaque on purpose: at .94 with a blur, the day view's hour rules showed
   through as faint gridlines, and iOS drops a backdrop-filtered fixed element
   out of position mid-scroll. Solid background, no filter, no flicker. */
.fnav { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 32;
  align-items: center; padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--line); }
.fnav-btn { flex: 1; min-width: 0; background: none; border: 0; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 4px;
  color: var(--muted); -webkit-tap-highlight-color: transparent; }
.fnav-lbl { font-size: 10px; letter-spacing: .02em; }
.fnav-btn.on { color: var(--ink); }
.fnav-btn.on .fnav-lbl { font-weight: 500; }
.fnav-ico { position: relative; display: block; line-height: 0; }
/* Today is inline on the Mountains view now, so this dot is how you know
   something is waiting while you're on another tab. */
.fnav-dot { position: absolute; top: -1px; right: -8px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--behind); }
.fnav-plus { flex: none; width: 52px; height: 52px; margin: 0 4px; border-radius: 50%; border: 0;
  background: var(--terra); color: #fff; font-size: 26px; font-weight: 300; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(38,35,32,.24);
  -webkit-tap-highlight-color: transparent; }

/* The Today strip, relocated into the Mountains view: a section, not an overlay. */
.today.today-inline { position: static; background: none; backdrop-filter: none; border-top: 0;
  margin: 0 0 18px; }
.today.today-inline .today-inner { max-width: none; margin: 0; padding: 0; display: block; }
.today.today-inline .today-label { margin-bottom: 8px; font-family: Inter, system-ui, sans-serif;
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.today.today-inline .today-label span.txt { display: inline; }

@media (max-width: 760px) {
  .fnav:not(.hidden) { display: flex; }
  /* One bar at the bottom, not two: the floating + lives in the nav now. */
  .fab { display: none; }
  main.stage { padding-bottom: 104px; }
  /* Thumb room. The timeline is its own scroller, so a thumb landing on it moves
     the day rather than the page. Inset it so there's a strip down each side that
     scrolls the page — enough to reach the unscheduled tray below the calendar. */
  .day-scroll { margin-left: 26px; margin-right: 26px; }
  /* The bar covers these three destinations, and duplicating them wrapped the
     header onto three lines at 390px. `⋯` stays put though: an app's overflow menu
     belongs in the top corner, and the footer slot it was holding goes to Share. */
  .top-right .cal-btn { display: none; }
  header.top { align-items: center; padding: 16px 20px 6px; }
  .wordmark { white-space: nowrap; }
  .today-date { white-space: nowrap; font-size: 11px; }
}

/* ---- Capture: one field, and a line of what On Track worked out ----
   The rest of the form is still there, one tap away. Collapsing is a class on
   the sheet rather than a DOM change, so goal mode is untouched and the
   existing show()/hide() calls keep working. */
#sheet.cap-collapsed .cap-opt { display: none; }
.cx { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 0; align-items: center; }
.cx-chip { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12.5px;
  padding: 6px 12px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg);
  color: var(--ink); cursor: pointer; }
.cx-chip:hover { border-color: var(--muted); }
.cx-chip .k { color: var(--faint); font-size: 11px; }
/* Dashed = inferred rather than chosen, so it reads as a suggestion you can take or change. */
.cx-chip.auto { border-style: dashed; color: var(--muted); }
.cx-note { font-size: 11.5px; color: var(--faint); margin: 9px 0 0; line-height: 1.45; }
.cx-more { display: block; margin: 16px 0 0; background: none; border: 0; font: inherit;
  font-size: 13px; color: var(--muted); cursor: pointer; text-decoration: underline; padding: 0; }
.cx-more:hover { color: var(--ink); }
/* Fixed to the viewport, above the sheet: the sheet scrolls and would clip it. */
.cx-menu { position: fixed; z-index: 46; min-width: 160px; max-width: calc(100vw - 16px);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); overflow: hidden; padding: 4px 0; }
.cx-menu-item { display: block; width: 100%; text-align: left; font: inherit; font-size: 14px;
  padding: 10px 16px; background: none; border: 0; color: var(--ink); cursor: pointer; }
.cx-menu-item:hover { background: var(--surface-warm); }
.cx-menu-item.on { font-weight: 500; }
.cx-menu-item.on::after { content: " ✓"; color: var(--muted); }

/* ---- Sheets (guided add + sub-goal) ---- */
.sheet-scrim { position: fixed; inset: 0; background: rgba(46,42,37,.28); z-index: 40; opacity: 0;
  pointer-events: none; transition: opacity .3s; backdrop-filter: blur(2px); }
.sheet-scrim.open { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 100%); width: 100%; max-width: 480px;
  background: var(--surface); border-radius: 22px 22px 0 0; z-index: 41; padding: 8px 22px 30px;
  transition: transform .34s cubic-bezier(.2,.8,.2,1); box-shadow: 0 -10px 40px rgba(60,45,30,.14);
  max-height: 90vh; overflow-y: auto; }
.sheet.open { transform: translate(-50%, 0); }
.grip { width: 38px; height: 4px; background: var(--line); border-radius: 4px; margin: 8px auto 16px; }
.sheet h3 { font-family: Newsreader, serif; font-weight: 400; font-size: 20px; margin-bottom: 4px; }
.sheet .hint { color: var(--muted); font-size: 12.5px; margin-bottom: 16px; }
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 7px; }
.field input[type=text], .field input[type=date] { width: 100%; font: inherit; font-size: 15px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); }
.field input:focus { outline: none; border-color: var(--terra); }
.field textarea { width: 100%; font: inherit; font-size: 15px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--bg); color: var(--ink); resize: vertical; min-height: 68px; line-height: 1.45; }
.field textarea:focus { outline: none; border-color: var(--terra); }
.field textarea::placeholder { color: var(--faint); }
.field-note { font-size: 11.5px; color: var(--faint); margin-top: 6px; }
/* Domain color picker (edit sheet, domains only) */
.swatch-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { width: 30px; height: 30px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid rgba(38,35,32,.10); transition: transform .08s ease; }
.swatch:hover { transform: scale(1.08); }
.swatch:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }
.swatch.sel { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px currentColor; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-opt { font: inherit; font-size: 13px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 20px;
  background: var(--bg); color: var(--ink); cursor: pointer; transition: all .18s; text-align: center; }
.chip-opt[aria-pressed=true] { background: var(--terra); color: #fff; border-color: var(--terra); }
.chip-opt small { display: block; font-size: 10px; opacity: .7; }
/* Domain assignment chips (task sheet, 5.5b) */
.dom-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.domchip { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 7px 13px; cursor: pointer; }
.domchip.on { border-color: var(--terra); background: var(--surface-warm); font-weight: 500; }
.domchip-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
/* Where a mountain sits. Same chip vocabulary as the domain picker — it is the same
   kind of choice — with the note under it carrying the one-line consequence. */
.move-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.move-note { font-size: 12.5px; color: var(--muted); margin-top: 8px; line-height: 1.45; }
/* The gear step. Two buttons per principle, because the question is binary and a
   dropdown would hide half of it. */
.gear-list { display: flex; flex-direction: column; gap: 2px; margin: 18px 0 4px; }
.gear-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 2px; border-top: 1px solid var(--line); }
.gear-row:first-child { border-top: 0; }
.gear-name { font-family: Newsreader, Georgia, serif; font-size: 17px; }
.gear-opts { display: flex; gap: 6px; flex: none; }
.gear-opt { font: inherit; font-size: 12.5px; padding: 6px 12px; border-radius: 18px;
  border: 1px solid var(--line); background: var(--bg); color: var(--muted); cursor: pointer;
  transition: all .14s ease; }
.gear-opt.on { border-color: var(--terra); background: var(--terra); color: var(--surface); font-weight: 500; }
.gear-opt:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }
.gear-count { margin-top: 14px; }
.sheet-actions { display: flex; gap: 12px; margin-top: 22px; }

/* A sheet with its own scrolling body: only the form scrolls, and the actions sit
   outside it. Sticky was tried first and was worse — a sticky bar overlays the
   content it's pinned over, so "More options" ended up underneath Cancel/Add.
   Taking the actions out of the scroll entirely means nothing can hide behind them. */
.sheet.has-body { display: flex; flex-direction: column; padding-bottom: 0; }
.sheet.has-body .sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto;
  margin: 0 -22px; padding: 0 22px 16px; }
.sheet.has-body .sheet-actions { flex: none; margin: 0 -22px; border-top: 1px solid var(--line);
  padding: 14px 22px calc(16px + env(safe-area-inset-bottom)); background: var(--surface); }
.btn { flex: 1; font: inherit; font-size: 15px; padding: 13px; border-radius: 12px; cursor: pointer; border: 1px solid var(--line); }
.btn.ghost { background: var(--bg); color: var(--muted); }
.btn.primary { background: var(--terra); color: #fff; border-color: var(--terra); font-weight: 500; }

/* ---- List views (delegate / archive) ---- */
.list-view h2 { font-family: Newsreader, serif; font-weight: 400; font-size: 24px; margin: 10px 0 4px; }
.list-view .desc { color: var(--muted); font-size: 13px; margin-bottom: 14px; }

/* ---- Toast ---- */
.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translate(-50%, 12px);
  background: var(--ink); color: var(--bg); font-size: 13px; padding: 10px 18px; border-radius: 22px; z-index: 50;
  opacity: 0; pointer-events: none; transition: all .4s; display: flex; align-items: center; gap: 9px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast .spark { color: var(--sand); }
#sync { font-size: 11px; color: var(--faint); }
@media (max-width: 560px) {
  .view-intro h1 { font-size: 23px; }
  .today-label span.txt { display: none; }
}

/* ---- AI breakdown ---- */
.ai-btn { display: block; margin: 14px auto 0; font: inherit; font-size: 13px; font-weight: 500;
  padding: 10px 20px; border: 1px solid var(--ink); border-radius: 22px; background: var(--ink);
  color: var(--bg); cursor: pointer; letter-spacing: .01em; }
.ai-btn:hover { opacity: .9; }
.ai-btn:disabled { opacity: .5; cursor: default; }
.ai-btn.ghost-ai { margin-top: 10px; background: none; color: var(--ink); }
.ai-btn.ghost-ai:hover { border-color: var(--terra); color: var(--terra); opacity: 1; }


/* New-domain chooser: templates + AI suggestions (OT-9) */
.nd-option { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; margin-bottom: 10px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; }
.nd-option:hover { border-color: var(--terra); }
.nd-option-title { font-size: 15px; font-weight: 500; color: var(--ink); }
.nd-option-sub { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.nd-back { background: none; border: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; padding: 2px 0 10px; }
.nd-back:hover { color: var(--terra); }
.nd-card { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; margin-bottom: 10px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; }
.nd-card:hover { border-color: var(--terra); }
.nd-card-name { font-size: 15px; font-weight: 500; color: var(--ink); }
.nd-card-aim { font-size: 13px; color: var(--ink); line-height: 1.45; font-family: Newsreader, serif; font-style: italic; }
.nd-card-meta { font-size: 11.5px; color: var(--muted); }

.ai-sheet { max-width: 520px; }
#aiBody { max-height: 56vh; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
.ai-summary { font-size: 14px; color: var(--ink); line-height: 1.5; margin: 2px 0 6px;
  padding: 12px 14px; background: var(--surface-warm); border-radius: 12px; }
.ai-loading { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; padding: 30px 4px; }

/* Strategize step in Chart the path (OT-24) */
.ai-strategize { display: flex; flex-direction: column; gap: 14px; padding: 6px 0 2px; }
.ai-strat-copy { font-size: 14px; color: var(--muted); line-height: 1.5; margin: 0; }
.ai-desired { width: 100%; font: inherit; font-size: 14px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--bg); color: var(--ink); resize: vertical; min-height: 84px; }
.ai-desired:focus { outline: none; border-color: var(--terra); }
.ai-desired::placeholder { color: var(--faint); }
.ai-strat-go { align-self: flex-start; }
.ai-spin { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--ink);
  border-radius: 50%; animation: aispin .8s linear infinite; }
@keyframes aispin { to { transform: rotate(360deg); } }

.ai-ms-card { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin-bottom: 10px; background: var(--surface); }
.ai-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.ai-item input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--ahead); flex: none; margin: 0; }
.ai-ms { padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.ai-task { padding: 5px 0 5px 6px; }
.ai-tier { font-size: 10px; letter-spacing: .07em; color: var(--muted); flex: none; font-weight: 600; }
.ai-edit { flex: 1; font: inherit; font-size: 14px; color: var(--ink); background: none;
  border: none; border-bottom: 1px solid transparent; padding: 3px 2px; min-width: 0; }
.ai-edit:focus { outline: none; border-bottom-color: var(--line); }
.ai-edit.strong { font-weight: 500; }
.ai-quad { flex: none; font: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .03em;
  padding: 3px 9px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; }
.ai-quad.q-do { color: var(--behind); border-color: var(--behind); }
.ai-quad.q-plan { color: var(--ahead); border-color: var(--ahead); }
.ai-quad.q-delegate { color: var(--muted); border-color: var(--muted); }
.ai-quad.q-drop { color: var(--faint); border-color: var(--faint); }
.ai-date { flex: none; width: 124px; font: inherit; font-size: 12px; color: var(--muted);
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 4px 7px; }
.ai-date:focus { outline: none; border-color: var(--ink); color: var(--ink); }

/* ---- The Big Picture backdrop ---- */
.bp-sun { fill: var(--sand); opacity: .26; }
.bp-sun.warm { fill: #D9B98A; opacity: .32; }   /* dawn / dusk, a touch warmer */
.bp-moon { fill: #E7DECB; opacity: .5; }
.bp-moon-carve { fill: var(--bg); }
.bp-ridge { stroke: none; }
.bp-ridge.far { fill: var(--terra-soft); opacity: .34; }
.bp-ridge.near { fill: var(--sand); opacity: .48; }
.bp-ground { fill: var(--bg); }

/* ---- Calendar ---- */
.cal-btn { background: none; border: none; color: var(--muted); cursor: pointer; padding: 2px 3px; display: flex; align-items: center; }
.cal-btn:hover { color: var(--terra); }
.cal-head { margin-bottom: 16px; }
.cal-toggle { display: flex; gap: 4px; background: var(--surface-warm); border-radius: 12px; padding: 4px; }
.cal-tab { flex: 1; font: inherit; font-size: 13px; padding: 8px 0; border: none; border-radius: 9px; background: none; color: var(--muted); cursor: pointer; }
.cal-tab.on { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: var(--shadow); }
.cal-head-row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.cal-nav { display: flex; align-items: center; gap: 12px; }
.cal-arrow { background: none; border: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 6px; }
.cal-arrow:hover { color: var(--terra); }
.cal-title { font-family: Newsreader, serif; font-size: 18px; min-width: 150px; text-align: center; }
.cal-today { background: none; border: 1px solid var(--line); border-radius: 20px; font: inherit; font-size: 12px; color: var(--muted); padding: 6px 14px; cursor: pointer; }
.cal-today:hover { border-color: var(--terra); color: var(--terra); }

.cal-dow { display: grid; grid-template-columns: repeat(7,1fr); text-align: center; font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.cal-grid.month { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.cal-cell { min-height: 56px; border: 1px solid var(--line); border-radius: 9px; padding: 4px 5px; cursor: pointer; background: var(--surface); display: flex; flex-direction: column; gap: 3px; }
.cal-cell.blank { border: none; background: none; cursor: default; }
.cal-cell.is-today { border-color: var(--ink); }
.cal-cell:not(.blank):hover { border-color: var(--terra); }
.cal-daynum { font-size: 11px; color: var(--muted); }
.cal-cell.is-today .cal-daynum { color: var(--ink); font-weight: 600; }
.cal-marks { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.cal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.cal-dot.q-do { background: var(--behind); }
.cal-dot.q-plan { background: var(--ahead); }
.cal-dot.q-delegate { background: var(--muted); }
.cal-dot.done { opacity: .35; }
.cal-mile { width: 8px; height: 8px; background: var(--ink); transform: rotate(45deg); border-radius: 1px; }
.cal-more { font-size: 9px; color: var(--faint); }

.cal-week .cal-wday { margin-bottom: 4px; }
.cal-wday-head { display: flex; align-items: baseline; gap: 10px; padding: 12px 2px 3px; cursor: pointer; border-bottom: 1px solid var(--line); }
.cal-wday-head .wd-name { font-family: Newsreader, serif; font-size: 15px; }
.cal-wday.is-today .wd-name { color: var(--ahead); }
.cal-wday-head .wd-num { font-size: 12px; color: var(--muted); }
.cal-empty { font-size: 12.5px; color: var(--faint); padding: 9px 2px; }
.cal-mile-row { cursor: pointer; }
.cal-mile-row .mile-ico { flex: none; font-size: 11px; color: var(--ink); }

.cal-year { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.cal-mini-title { font-size: 12.5px; font-weight: 500; margin-bottom: 6px; cursor: pointer; }
.cal-mini-title:hover { color: var(--terra); }
.cal-mini-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.mini-d { aspect-ratio: 1; border-radius: 2px; background: var(--surface-warm); }
.mini-d.blank { background: none; }
.mini-d.has { background: var(--ahead); opacity: .65; }
.mini-d.mile { background: var(--ink); opacity: .8; }
.mini-d.is-today { outline: 1.5px solid var(--ink); outline-offset: -1px; }

.cal-tray { margin-top: 24px; }

/* ---- Calendar follow-ups: badge, tappable rows, milestone pace colors ---- */
.cal-btn { position: relative; }
.cal-badge { position: absolute; top: -4px; right: -4px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 8px; background: var(--behind); color: #fff; font-size: 9.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; line-height: 1; }
.task-row.tappable { cursor: pointer; }
.task-row.tappable:hover { background: var(--surface-warm); border-radius: 8px; }
.cal-mile.ahead { background: var(--ahead); }
.cal-mile.behind { background: var(--behind); }
.cal-mile-row .mile-ico.ahead { color: var(--ahead); }
.cal-mile-row .mile-ico.behind { color: var(--behind); }
.cal-mile-row .q.ahead { color: var(--ahead); background: none; }
.cal-mile-row .q.behind { color: var(--behind); background: none; }
.mini-d:not(.blank) { cursor: pointer; }
.mini-d:not(.blank):hover { outline: 1px solid var(--faint); outline-offset: -1px; }

/* ---- Undo bar (after Break-this-down populate) ---- */
.undobar { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(16px); z-index: 45; display: flex; align-items: center; gap: 14px;
  background: var(--ink); color: var(--bg); padding: 11px 12px 11px 18px; border-radius: 28px;
  box-shadow: var(--shadow); font-size: 13.5px; opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease; max-width: calc(100% - 28px); }
.undobar.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.undobar #undoText { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.undobar button { background: none; border: 1px solid rgba(245,238,225,.35); color: var(--bg); font: inherit;
  font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 5px 13px; border-radius: 20px; flex: none; }
.undobar button:hover { background: rgba(245,238,225,.14); }

/* ================= LANDING PAGE ================= */
.landing { width: 100%; }
.lp-nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; max-width: 1100px; margin: 0 auto; }
.lp-nav-cta { font-size: 14px; color: var(--ink); text-decoration: none; border: 1px solid var(--line); padding: 8px 18px; border-radius: 22px; }
.lp-nav-cta:hover { border-color: var(--terra); }

.btn-lg { display: inline-block; font: inherit; font-size: 15px; font-weight: 500; padding: 14px 26px; border-radius: 26px; text-decoration: none; cursor: pointer; border: 1px solid var(--line); text-align: center; }
.btn-lg.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-lg.primary:hover { opacity: .9; }
.btn-lg.ghost { background: none; color: var(--ink); }
.btn-lg.ghost:hover { border-color: var(--terra); }

.lp-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; max-width: 1100px; margin: 0 auto; padding: 36px 24px 60px; }
.lp-hero-copy h1 { font-family: Newsreader, serif; font-weight: 500; font-size: clamp(30px, 5vw, 52px); line-height: 1.05; letter-spacing: -.01em; }
.lp-hero-copy p { color: var(--muted); font-size: 17px; line-height: 1.6; margin: 20px 0 28px; max-width: 30rem; }
.lp-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.lp-hero-art { display: flex; justify-content: center; }
.lp-scene { width: 100%; max-width: 460px; }
.lp-sun { fill: var(--sand); opacity: .5; }
.lp-hill.far { fill: var(--terra-soft); opacity: .5; }
.lp-hill.near { fill: var(--sand); opacity: .55; }
.lp-face-dark { fill: #CFC0A2; }
.lp-face-light { fill: #E7DECB; }
.lp-trail { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 3 5; stroke-linecap: round; opacity: .7; }
.lp-pole { stroke: var(--ink); stroke-width: 2; }
.lp-flag { fill: var(--ink); }
.lp-dot { fill: var(--ahead); }
.lp-ring { fill: var(--bg); stroke: var(--muted); stroke-width: 1.6; }

.lp-video { max-width: 900px; margin: 0 auto; padding: 10px 24px 56px; }
.lp-video-frame { position: relative; aspect-ratio: 16/9; border-radius: 18px; border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--surface-warm), var(--sand)); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; }
.lp-play { width: 64px; height: 64px; border-radius: 50%; border: none; background: var(--ink); color: var(--bg); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lp-play span { font-size: 20px; margin-left: 4px; }
.lp-video-note { font-size: 13px; color: var(--muted); }

.lp-benefits { max-width: 1000px; margin: 0 auto; padding: 50px 24px; }
.lp-benefits h2, .lp-testimonials h2 { font-family: Newsreader, serif; font-weight: 500; font-size: 30px; text-align: center; margin-bottom: 28px; }
.lp-ben-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lp-ben { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 18px 20px; }
.lp-ben summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; font-size: 16px; gap: 12px; }
.lp-ben summary::-webkit-details-marker { display: none; }
.lp-ben summary span { font-size: 12px; color: var(--muted); flex: none; }
.lp-ben[open] summary span { color: var(--terra); }
.lp-ben p { color: var(--muted); font-size: 14px; line-height: 1.55; margin-top: 12px; }

.lp-feature { max-width: 1000px; margin: 0 auto; padding: 6px 24px 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lp-feat-panel { position: relative; min-height: 300px; border-radius: 18px; overflow: hidden; display: flex; align-items: flex-end; }
.lp-feat-panel.p-a { background: radial-gradient(120% 90% at 30% 12%, var(--sand), var(--surface-warm)); }
.lp-feat-panel.p-b { background: radial-gradient(120% 90% at 70% 12%, var(--terra-soft), var(--surface)); }
.lp-feat-text { padding: 24px; }
.lp-feat-text h3 { font-size: 22px; }
.lp-feat-text p { color: var(--ink); opacity: .8; font-size: 14.5px; line-height: 1.55; margin-top: 8px; max-width: 24rem; }

.lp-testimonials { max-width: 1000px; margin: 0 auto; padding: 50px 24px; }
.lp-testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.lp-testi { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 22px; }
.lp-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(140deg, var(--sand), var(--terra-soft)); margin-bottom: 14px; }
.lp-testi blockquote { font-size: 15px; line-height: 1.55; }
.lp-testi figcaption { font-size: 12.5px; color: var(--muted); margin-top: 14px; }
.lp-note { text-align: center; font-size: 12px; color: var(--faint); margin-top: 18px; }

.lp-pricing { max-width: 560px; margin: 0 auto; padding: 40px 24px; text-align: center; }
.lp-price-card { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); padding: 32px 28px; box-shadow: var(--shadow); }
.lp-price-badge { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ahead); border: 1px solid var(--ahead); border-radius: 20px; padding: 4px 12px; }
.lp-price { font-family: Newsreader, serif; font-size: 44px; margin: 16px 0 6px; }
.lp-price small { display: block; font-family: Inter, sans-serif; font-size: 13px; color: var(--muted); font-weight: 400; }
.lp-price-list { list-style: none; text-align: left; max-width: 18rem; margin: 20px auto 24px; }
.lp-price-list li { font-size: 14.5px; padding: 7px 0 7px 24px; position: relative; }
.lp-price-list li::before { content: "✦"; position: absolute; left: 0; color: var(--ahead); }
.lp-pay { display: flex; gap: 8px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.lp-pay span { font-size: 11px; color: var(--faint); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; }

.lp-signin { max-width: 420px; margin: 0 auto; padding: 40px 24px 20px; }
.lp-signin-card { text-align: center; }
.lp-signin-card h2 { font-family: Newsreader, serif; font-weight: 500; font-size: 26px; }
.lp-signin-card .tag { color: var(--muted); font-size: 14px; margin: 8px 0 22px; }
.btn-google { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; font: inherit; font-size: 15px; font-weight: 500;
  padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); cursor: pointer; }
.btn-google:hover { border-color: var(--terra); }
.btn-google:disabled { opacity: .5; cursor: default; }
.lp-or { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 12px; margin: 16px 0; }
.lp-or::before, .lp-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.lp-footer { display: flex; align-items: center; justify-content: space-between; max-width: 1100px; margin: 40px auto 0; padding: 24px; border-top: 1px solid var(--line); font-size: 13px; }

@media (max-width: 760px) {
  .lp-hero { grid-template-columns: 1fr; text-align: center; }
  .lp-hero-copy p { margin-left: auto; margin-right: auto; }
  .lp-cta-row { justify-content: center; }
  .lp-scene { max-width: 320px; }
  .lp-ben-grid, .lp-feature, .lp-testi-grid { grid-template-columns: 1fr; }
}

/* ---- Task steps (checklist inside a task) ---- */
.step-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.step-row input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--ahead); flex: none; margin: 0; }
.step-input { flex: 1; font: inherit; font-size: 14px; padding: 8px 11px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--bg); color: var(--ink); min-width: 0; }
.step-input:focus { outline: none; border-color: var(--terra); }
.step-del { flex: none; background: none; border: none; color: var(--faint); font-size: 13px; cursor: pointer; padding: 4px 6px; }
.step-del:hover { color: var(--behind); }
.add-step { display: inline-block; margin-top: 2px; font: inherit; font-size: 13px; color: var(--muted);
  background: none; border: 1px dashed var(--line); border-radius: 9px; padding: 7px 14px; cursor: pointer; }
.add-step:hover { border-color: var(--terra); color: var(--terra); }
.steps-chip { color: var(--muted); }

/* Data & training consent toggle (OT-19) */
.toggle-row { display: flex; align-items: flex-start; gap: 14px; margin: 4px 0 18px; cursor: pointer; }
.toggle-copy { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.toggle-title { font-size: 15px; color: var(--ink); font-weight: 500; }
.toggle-sub { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.switch { flex: none; appearance: none; width: 44px; height: 26px; border-radius: 999px; background: var(--line);
  position: relative; cursor: pointer; transition: background .18s; margin-top: 2px; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(38,35,32,.28); transition: transform .18s; }
.switch:checked { background: var(--ahead); }
.switch:checked::after { transform: translateX(18px); }

/* Repeat dropdown + custom weekday picker (OT-27) */
.field select.select { width: 100%; font: inherit; font-size: 15px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--bg); color: var(--ink); appearance: none; cursor: pointer; }
.field select.select:focus { outline: none; border-color: var(--terra); }
.repeat-days { display: flex; gap: 6px; margin-top: 10px; }
.rday { flex: 1; font: inherit; font-size: 13px; padding: 9px 0; border: 1px solid var(--line); border-radius: 9px;
  background: var(--bg); color: var(--muted); cursor: pointer; }
.rday.on { background: var(--terra); color: var(--bg); border-color: var(--terra); }

/* Task links editor (OT-22) */
.link-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.link-label { flex: 0 0 32%; font: inherit; font-size: 14px; padding: 8px 11px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--bg); color: var(--ink); min-width: 0; }
.link-url { flex: 1; font: inherit; font-size: 14px; padding: 8px 11px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--bg); color: var(--ink); min-width: 0; }
.link-label:focus, .link-url:focus { outline: none; border-color: var(--terra); }
.link-open { flex: none; text-decoration: none; color: var(--muted); font-size: 15px; padding: 4px 6px; }
.link-open:hover { color: var(--terra); }
.ai-steps { flex: none; font-size: 10.5px; color: var(--muted); background: var(--surface-warm); border-radius: 20px; padding: 2px 8px; }

/* Week view as a grid of taller day tiles (like the month) */
.cal-grid.week { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.cal-grid.week .cal-cell { min-height: 108px; }

/* ---- Time inputs (sheets) ---- */
.time-row { display: flex; align-items: center; gap: 10px; }
.time-row input[type=time] { flex: 1; font: inherit; font-size: 15px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); }
.time-row input[type=time]:focus { outline: none; border-color: var(--terra); }
.time-row span { color: var(--muted); font-size: 13px; flex: none; }

/* ---- Day timeline (Apple-style) ---- */
/* Deliberately NOT overscroll-behavior: contain. Containing the scroll traps a
   thumb that lands on the timeline — you reach the end of the day and the page
   never takes over, so the tasks below the calendar are unreachable. Chaining
   is the behaviour you want on a phone. */
.day-scroll { max-height: 60vh; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin-top: 4px; }
.day-timeline { position: relative; }
.day-hour { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
/* Four quarter cells per hour. Only the one under the pointer darkens, so the
   highlight is a preview of what you'll get rather than a whole hour lighting up
   for a fifteen-minute intent. :active carries it on touch, where there's no hover. */
.day-quarter { position: relative; height: 25%; cursor: pointer; }
.day-quarter:hover, .day-quarter:active { background: var(--surface-warm); }
/* Faint ticks down the gutter marking :15, :30 and :45. The half hour reads a
   little longer, so a glance can tell top from middle without counting. */
.day-quarter + .day-quarter::before { content: ""; position: absolute; top: 0;
  left: 44px; width: 12px; height: 1px; background: var(--line); opacity: .7; }
.day-quarter:nth-child(3)::before { left: 38px; width: 18px; }
/* The label overhangs the row above it; let taps fall through to the quarter. */
.day-hour-lbl { position: absolute; top: -7px; left: 8px; font-size: 10px; color: var(--faint);
  background: var(--surface); padding: 0 4px; pointer-events: none; }
/* Top-aligned: a two-hour block should read from its start time, not float its
   title in the middle. Short blocks centre instead — see .compact below. */
.day-block { position: absolute; left: 58px; right: 8px; border-radius: 8px; padding: 4px 9px; overflow: hidden;
  background: var(--surface-warm); border-left: 3px solid var(--muted); cursor: pointer; box-shadow: var(--shadow);
  display: flex; align-items: flex-start; gap: 7px; }
/* Same tick-off as the Today strip, on each scheduled block. */
.day-block .box { width: 17px; height: 17px; border-radius: 50%; border: 1.6px solid var(--faint); flex: none;
  display: inline-flex; align-items: center; justify-content: center; transition: all .3s; background: var(--surface); }
.day-block .box svg { width: 10px; height: 10px; opacity: 0; transform: scale(.4); transition: all .3s; stroke: #fff; }
/* The block is draggable, so it carries `grab` — but the circle is a click target,
   not a handle. It also has to sit above .day-block-resize: that strip is 9px of
   the block's bottom edge, which on a 15-minute block swallows the circle whole
   and makes a short task impossible to tick off with a real finger. */
.day-block .box { cursor: pointer; position: relative; z-index: 2; }
.day-block .box:hover { border-color: var(--ahead); }
.day-block.done .box { background: var(--ahead); border-color: var(--ahead); }
.day-block.done .box svg { opacity: 1; transform: scale(1); }
.day-block.pop { animation: pop .45s ease; }
/* A 15-minute block has no room for a 17px target, so shrink rather than drop it —
   a short task you can't tick off is worse than a small circle. */
.day-block.compact .box { width: 13px; height: 13px; }
.day-block.compact .box svg { width: 8px; height: 8px; }
/* Time and title share one line so short blocks don't clip the title (OT-35). */
.day-block .db-time { flex: none; font-size: 10px; color: var(--muted); line-height: 1.2; }
/* A 15-minute block has one line of room. Keep the title, drop the times —
   where it sits on the timeline already says when it is. */
.day-block.compact, .day-ghost.compact { padding: 1px 9px; align-items: center; }
/* the circle is taller than the text line, so nudge it up to sit with it */
.day-block:not(.compact) .box { margin-top: -1px; }
.day-block.compact .db-time, .day-ghost.compact .db-time { display: none; }
.day-block.compact .db-title, .day-ghost.compact .db-title { font-size: 11px; line-height: 1.2; }
.day-block .db-title { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-block.q-do { border-left-color: var(--behind); }
.day-block.q-plan { border-left-color: var(--ahead); }
.day-block.q-delegate { border-left-color: var(--muted); }
.day-block.done { opacity: .55; }
.day-block.done .db-title { text-decoration: line-through; }

/* Proposed blocks (6a): same footprint as a real block, but dashed and unfilled so
   it reads as "not yet yours". Tapping one commits it. */
.day-ghost { position: absolute; left: 58px; right: 8px; border-radius: 8px; padding: 3px 9px; overflow: hidden;
  background: transparent; border: 1px dashed var(--faint); border-left: 3px dashed var(--muted);
  display: flex; align-items: baseline; gap: 7px; cursor: pointer; z-index: 2;
  transition: background .15s, border-color .15s; }
.day-ghost .db-time { flex: none; font-size: 10px; color: var(--faint); line-height: 1.2; }
.day-ghost .db-title { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-ghost:hover { background: var(--surface-warm); border-color: var(--muted); }
.day-ghost:hover .db-title { color: var(--ink); }
.dg-x { position: absolute; top: 2px; right: 3px; width: 20px; height: 20px; padding: 0; border: 0; line-height: 1;
  background: none; color: var(--faint); font-size: 11px; cursor: pointer; border-radius: 50%; opacity: 0; transition: opacity .15s; }
.day-ghost:hover .dg-x { opacity: 1; }
.dg-x:hover { color: var(--ink); background: var(--surface); }
@media (hover: none) { .dg-x { opacity: .8; } }

/* Draggable day blocks */
.day-block { touch-action: none; cursor: grab; }
.day-block.dragging { cursor: grabbing; opacity: .9; box-shadow: 0 4px 16px rgba(38,35,32,.18); user-select: none; z-index: 5; }
.day-block-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 9px; cursor: ns-resize; touch-action: none; }
.day-block-resize::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 22px; height: 3px; transform: translateX(-50%);
  border-radius: 2px; background: var(--faint); opacity: 0; transition: opacity .15s; }
.day-block:hover .day-block-resize::after { opacity: .7; }

/* Current-time marker line in the Day timeline (OT-21) */
.day-now { position: absolute; left: 52px; right: 8px; height: 0; border-top: 2px solid var(--behind); z-index: 4; pointer-events: none; }
.day-now-dot { position: absolute; left: -5px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--behind); }

/* Selected-day agenda under the Month grid (OT-28) */
.cal-cell.is-sel { border-color: var(--terra); box-shadow: inset 0 0 0 1px var(--terra); }
.cal-daypanel { grid-column: 1 / -1; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.cal-daypanel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.cal-daypanel-head .section-label { margin: 0; }
.cal-openday { background: none; border: none; color: var(--terra); font-size: 13px; font-weight: 600; cursor: pointer; padding: 2px 4px; }
.cal-openday:hover { text-decoration: underline; }

/* ---- Landing feature rows (real screenshots) ---- */
.lp-feature { display: block; max-width: 1040px; }
.lp-feat-row { display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: center; margin-bottom: 40px; }
.lp-feat-row.reverse .lp-shot { order: 2; }
.lp-shot { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--bg); }
.lp-shot img { display: block; width: 100%; height: auto; }
.lp-feat-row .lp-feat-text h3 { font-family: Newsreader, serif; font-size: 24px; }
.lp-feat-row .lp-feat-text p { color: var(--muted); opacity: 1; font-size: 15px; line-height: 1.6; margin-top: 10px; max-width: 26rem; }
@media (max-width: 760px) {
  .lp-feat-row, .lp-feat-row.reverse { grid-template-columns: 1fr; gap: 16px; }
  .lp-feat-row.reverse .lp-shot { order: 0; }
}

/* Domain context affordance (OT-5) */
.ctx-chip { display: inline-block; margin: 8px auto 0; font: inherit; font-size: 12px; padding: 5px 13px;
  border-radius: 20px; border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; }
.ctx-chip.add { border-style: dashed; }
.ctx-chip:hover { border-color: var(--terra); color: var(--terra); }
.ctx-chip.has { color: var(--ahead); border-color: var(--ahead); }
.domain-head .ctx-chip { display: block; width: fit-content; margin: 8px auto 0; }
.domain-ctx-text { max-width: 46ch; margin: 8px auto 0; color: var(--muted); font-size: 13px;
  line-height: 1.5; text-align: center; white-space: pre-wrap; cursor: pointer; }
.domain-ctx-text:hover { color: var(--terra); }

/* ============ Onboarding ============ */
.onboard { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column; }
.ob-inner { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 20px 24px 40px; display: flex; flex-direction: column; }
/* The rail has this row to itself now — the exit moved to the bottom, where the season
   screen has always put it. */
.ob-top { display: flex; align-items: center; gap: 16px; padding: 12px 0 24px; }
.ob-progress { flex: 1; min-width: 0; }
/* `.ob-exit` keeps only its identity — the look and the placement now come from
   `.sf-leave`, which the season screen already used. One way out, one shape, one
   position, on every screen of the journey. */
.ob-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 10vh; }
.ob-ack { font-size: 13px; color: var(--faint); margin-bottom: 10px; }
/* Adaptive onboarding: the user's own words threaded back above the next question,
   and an open dot for the stage in progress. */
.ob-thread { font-size: 13px; color: var(--faint); line-height: 1.5; margin-bottom: 14px;
  padding-left: 11px; border-left: 2px solid var(--line); }
.ob-thread b { display: block; font-weight: 400; color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.ob-q { font-size: clamp(21px, 4vw, 29px); line-height: 1.22; margin-bottom: 22px; }
/* Act 2 lives in the same overlay as the conversation, so the list gets a scroll of
   its own rather than pushing the button off a phone screen. */
.ob-princ-lead { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: -10px 0 16px; }
.onboard .nd-princ { max-height: min(46vh, 420px); overflow-y: auto; margin-bottom: 18px; }
/* `flex: none` is the whole fix for a bug that made the pre-frame's button a slab
   about a third of the screen tall. `.btn { flex: 1 }` further up is written for a
   ROW of buttons, where growing means growing sideways. `.ob-body` is a flex COLUMN,
   so the same declaration grows the button downwards into every pixel left over
   between the copy and the bottom of the screen. Nothing about the padding was ever
   wrong. (`styles.css` already carries one warning about this selector winning —
   see the `.pd-plan-btn` note above.) */
.onboard .nd-go { width: 100%; flex: none; }
/* The pre-frame's is the one CTA in the journey that isn't the partner of a text
   field, so it is sized like a thing you press once rather than a bar you fill in:
   the same pill the season screen's Continue already uses, at its own width. */
.ob-cta { align-self: center; width: auto; flex: none; }
/* Answer affordances (Track 2 · F3b). One renderer, shared by onboarding and the
   season flow — see answerUI() in app.js. Sized here for a full-screen conversation;
   the season flow scopes them smaller where it sits inside the Log tab. */
.ans-text { width: 100%; font: inherit; font-size: 16px; padding: 14px 15px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface); color: var(--ink); resize: none; overflow: hidden;
  min-height: 52px; }
.ans-text:focus { outline: none; border-color: var(--ink); }
.ans-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ans-chip { font: inherit; font-size: 15px; padding: 11px 18px; border: 1px solid var(--line);
  border-radius: 24px; background: var(--surface); color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; }
.ans-chip:hover { border-color: var(--ink); }
.ans-chip.on { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.ans-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ans-actions { display: flex; gap: 12px; margin-top: 18px; }
.ans-actions .btn-lg { flex: 1; }

/* The way out of a list the model got wrong. Quiet, and always present. */
.ans-esc { display: block; margin: 14px auto 0; background: none; border: 0; font: inherit;
  font-size: 13px; color: var(--muted); text-decoration: underline; cursor: pointer; padding: 0; }
.ans-esc:hover { color: var(--ink); }

/* Order, by moving rather than dragging — reliable on a phone, and reachable by keyboard. */
.ans-rank { display: flex; flex-direction: column; gap: 7px; }
.ans-rank-row { display: flex; align-items: center; gap: 10px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; font-size: 15px; }
.ans-rank-n { font-family: Newsreader, Georgia, serif; font-size: 16px; color: var(--muted);
  width: 16px; flex: none; font-variant-numeric: tabular-nums; }
.ans-rank-t { flex: 1; }
.ans-rank-b { font: inherit; font-size: 14px; width: 30px; height: 30px; flex: none; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }
.ans-rank-b:hover:not(:disabled) { border-color: var(--ink); }
.ans-rank-b:disabled { opacity: .3; cursor: default; }

.ans-date { display: none; margin-top: 12px; font: inherit; font-size: 15px; padding: 11px 13px;
  border: 1px solid var(--ink); border-radius: 11px; background: var(--surface); color: var(--ink); }
.ans-date.show { display: block; }
.ob-domain { margin-bottom: 6px; }
.ob-name { font-size: 18px; width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg); }
.ob-ctx { width: 100%; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); resize: vertical; margin-top: 4px; }
.ob-help { display: block; width: 100%; margin: 0 0 14px; font: inherit; font-size: 13.5px; padding: 11px; border: 1px dashed var(--line); border-radius: 12px; background: none; color: var(--muted); cursor: pointer; }
.ob-help:hover { border-color: var(--ink); color: var(--ink); }
.empty .ghost-link { background: none; border: none; color: var(--muted); text-decoration: underline; font-size: 13px; padding: 8px; margin-top: 8px; }
.empty .ghost-link:hover { color: var(--ink); }

/* Onboarding: priming header, typing reveal, growing input */
.ob-prime { font-size: 13px; color: var(--muted); line-height: 1.5; max-width: 30rem; margin: 0 auto 4px; text-align: center; }
.ob-q { min-height: 1.2em; }
.ob-q.typing::after { content: "▏"; color: var(--faint); animation: obcaret .7s steps(1) infinite; }
@keyframes obcaret { 50% { opacity: 0; } }
.ob-reveal { opacity: 0; transform: translateY(5px); transition: opacity .3s ease, transform .3s ease; }
.ob-reveal.show { opacity: 1; transform: none; }

/* Unscheduled tray see-more */
.cal-tray-fade { height: 22px; margin-top: -22px; position: relative; pointer-events: none;
  background: linear-gradient(to bottom, rgba(245,238,225,0), var(--bg)); }
.cal-seemore { display: block; margin: 8px auto 0; font: inherit; font-size: 13px; color: var(--muted);
  background: none; border: 1px solid var(--line); border-radius: 20px; padding: 7px 16px; cursor: pointer; }
.cal-seemore:hover { border-color: var(--ink); color: var(--ink); }

/* Season AI re-launch (5e-b) */
.sw-carry-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 4px; }
.sw-carry-head .section-label { margin: 0; }
.sw-ai-btn { flex: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--terra); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; cursor: pointer; }
.sw-ai-btn:hover { border-color: var(--terra); }
.sw-ai { margin: 8px 0; padding: 12px 14px; background: var(--surface-warm); border-radius: 12px; }
.sw-ai-summary { font-size: 14px; color: var(--ink); line-height: 1.5; margin: 0; }
.sw-ai-focus { display: flex; gap: 8px; align-items: baseline; margin-top: 8px; font-size: 13.5px; color: var(--ink); }
.sw-ai-focus-label { flex: none; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--terra); font-weight: 600; }
.sw-roll { padding: 8px 0; border-top: 1px solid var(--line); }
.sw-roll.drop { opacity: .7; }
.sw-roll-top { display: flex; align-items: center; gap: 9px; }
.sw-roll-top input[type=checkbox] { flex: none; width: 17px; height: 17px; accent-color: var(--ahead); margin: 0; }
.sw-dom { flex: none; font-size: 11px; color: var(--muted); }
.sw-roll-input { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); }
.sw-roll-input:focus { outline: none; border-color: var(--terra); }
.sw-drop { flex: none; font-size: 10.5px; font-weight: 600; color: var(--behind); background: color-mix(in srgb, var(--behind) 14%, transparent); border-radius: 999px; padding: 2px 8px; }
.sw-note { margin: 4px 0 0 26px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.sw-calnote { font-size: 11.5px; }

/* Personal log (OT-36). A large quiet page to write on.
   The header stack (crumb › title › blurb › cadences) gets its own spacing —
   #view-log isn't a .list-view, so the global `* { margin: 0 }` reset would
   otherwise jam all four lines together. */
#view-log h2, #view-share h2 { font-size: 24px; font-weight: 400; margin: 14px 0 10px; }
#view-log .desc, #view-share .desc { color: var(--muted); font-size: 13px; line-height: 1.5;
  margin-bottom: 22px; max-width: 46ch; }
/* Log sections: Journal · Gameplan · Review. Heavier than the cadence pills
   below them, because they switch what the page is rather than which slice. */
.log-secs { display: flex; gap: 2px; margin: 4px 0 26px; border-bottom: 1px solid var(--line); }
.log-sec { position: relative; font: inherit; font-size: 13.5px; padding: 9px 15px 10px;
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--muted); cursor: pointer; }
.log-sec:hover { color: var(--ink); }
.log-sec.on { color: var(--ink); border-bottom-color: var(--ink); }
.log-sec-dot { position: absolute; top: 7px; right: 6px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--behind); }

/* ---- The to-do list (Track 2 · todo-swap) ---- */
.todo-add { display: flex; gap: 9px; margin: 0 0 20px; }
.todo-in { flex: 1; font: inherit; font-size: 14px; padding: 10px 13px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 11px; }
.todo-in::placeholder { color: var(--muted); }
.todo-go { font: inherit; font-size: 13.5px; padding: 0 18px; border: none; border-radius: 11px;
  background: var(--terra); color: #fff; cursor: pointer; }
.todo-row { display: flex; align-items: center; gap: 11px; padding: 11px 4px;
  border-bottom: 1px solid var(--line); cursor: pointer; transition: opacity .35s; }
.todo-row .box { width: 18px; height: 18px; border-radius: 50%; border: 1.6px solid var(--faint);
  flex: none; display: inline-flex; align-items: center; justify-content: center; transition: all .3s; }
.todo-row .box svg { width: 10px; height: 10px; opacity: 0; transform: scale(.4); transition: all .3s; stroke: #fff; }
.todo-row.done { opacity: .4; }
.todo-row.done .box { background: var(--ahead); border-color: var(--ahead); }
.todo-row.done .box svg { opacity: 1; transform: scale(1); }
.todo-title { flex: 1; font-size: 14px; }
.todo-due { font-size: 11px; color: var(--muted); background: var(--surface-warm);
  border-radius: 20px; padding: 2px 9px; flex: none; }
.todo-empty { color: var(--muted); font-size: 13.5px; margin: 4px 0 18px; }
.todo-archive { display: block; margin-top: 26px; font: inherit; font-size: 12.5px; color: var(--muted);
  background: none; border: none; border-bottom: 1px dotted var(--faint); padding: 0 0 1px; cursor: pointer; }
.todo-archive:hover { color: var(--ink); }
.todo-archive-back { margin-bottom: 14px; }
.todo-archive-note { color: var(--muted); font-size: 13px; margin: 0 0 22px; max-width: 52ch; }
.jr-archived { cursor: default; }

/* ---- "Find a time" on the capture sheet (Track 2 · E) ---- */
.cx-find { margin: 11px 0 0; }
.findbar { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--bg); border: 1px dashed var(--faint); border-radius: 11px; }
.findbar-t { font-size: 12.5px; color: var(--muted); flex: 1; line-height: 1.4; }
.findbar-go { flex: none; font: inherit; font-size: 12px; padding: 6px 13px; border-radius: 20px;
  border: 0; background: var(--ink); color: var(--bg); cursor: pointer; }
.findbar-none { font-size: 12px; color: var(--muted); line-height: 1.45; margin: 0;
  padding: 10px 12px; background: var(--bg); border-radius: 11px; }
.cx-clear { font: inherit; font-size: 12px; color: var(--muted); background: none; border: 0;
  padding: 0; text-decoration: underline; cursor: pointer; }
.cx-clear:hover { color: var(--ink); }

/* ---- Gameplan proposes blocks (Track 2 · E) ---- */
.gp-prop { background: var(--surface); border-radius: 14px; padding: 13px 14px;
  box-shadow: var(--shadow); margin: 2px 0 10px; }
.gp-prop-h { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-bottom: 10px; }
.gp-gb { display: flex; align-items: center; gap: 9px; padding: 8px 10px 8px 14px; border-radius: 9px;
  margin-bottom: 6px; background: var(--bg); border: 1px dashed var(--faint); position: relative; }
.gp-gb-acc { position: absolute; left: 4px; top: 7px; bottom: 7px; width: 3px; border-radius: 2px; }
.gp-gb-d { font-size: 10.5px; color: var(--muted); width: 54px; flex: none; }
.gp-gb-t { font-size: 10.5px; color: var(--muted); width: 60px; flex: none; }
.gp-gb-i { font-size: 12.5px; flex: 1; }
.gp-gb-x { flex: none; font: inherit; font-size: 15px; line-height: 1; width: 22px; height: 22px;
  border: 0; border-radius: 50%; background: none; color: var(--faint); cursor: pointer; }
.gp-gb-x:hover { color: var(--behind); background: var(--surface-warm); }
.gp-prop-acts { display: flex; gap: 8px; margin-top: 10px; }
.gp-prop-acts .btn { flex: 1; font-size: 12.5px; padding: 8px; }
.gp-prop-note { font-size: 11px; color: var(--faint); margin-top: 9px; line-height: 1.45; }

/* ---- the doors into Gameplan (Track 2 · F2) ---- */
.think-btn { display: block; width: 100%; font: inherit; font-size: 13px; padding: 9px 14px;
  margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; background: none;
  color: var(--muted); cursor: pointer; text-align: center; }
.think-btn:hover { border-color: var(--ink); color: var(--ink); }
/* Inside a proposal card it's the quiet third option, not a third button. */
.jr-prop .think-btn { width: auto; margin: 10px auto 0; border: 0; text-decoration: underline;
  font-size: 12.5px; padding: 0; }

/* What the conversation was opened about. Visible and removable on purpose. */
.gp-att { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 8px 11px;
  background: var(--surface-warm); border-radius: 10px; font-size: 12.5px; }
.gp-att-k { color: var(--muted); flex: none; }
.gp-att-t { color: var(--ink); flex: none; }
.gp-att-d { color: var(--muted); font-size: 11.5px; flex: 1; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.gp-att-x { flex: none; font: inherit; font-size: 15px; line-height: 1; width: 22px; height: 22px;
  border: 0; border-radius: 50%; background: none; color: var(--faint); cursor: pointer; }
.gp-att-x:hover { color: var(--ink); }

/* ---- the season flow (Track 2 · F3b) ---- */
.sf-start { background: var(--surface); border-radius: 14px; padding: 16px 17px; box-shadow: var(--shadow);
  margin-bottom: 22px; display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.sf-start-t { font-family: Newsreader, Georgia, serif; font-size: 18px; }
.sf-start .btn-lg { align-self: stretch; }

.sf { display: flex; flex-direction: column; gap: 0; }
/* One bar per phase. Filled behind you, outlined where you are. */
.sf-where { display: flex; justify-content: space-between; gap: 12px; font-size: 10.5px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }

.sf-q { font-size: clamp(19px, 2.4vw, 24px); font-weight: 400; line-height: 1.3; margin: 0 0 16px;
  text-wrap: balance; }
.sf-note { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 0; }
/* Between questions. Three dots on a staggered rise — quiet enough to sit under a
   serif question, alive enough to read as "still thinking" rather than "stuck". */
.sf-think { display: flex; gap: 7px; margin: 34px 0; align-items: center; }
.sf-think i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint);
  animation: sfthink 1.25s ease-in-out infinite; }
.sf-think i:nth-child(2) { animation-delay: .16s; }
.sf-think i:nth-child(3) { animation-delay: .32s; }
@keyframes sfthink {
  0%, 70%, 100% { opacity: .3; transform: translateY(0); }
  35%           { opacity: 1;  transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .sf-think i { animation: sfpulse 1.6s ease-in-out infinite; }
  @keyframes sfpulse { 0%, 100% { opacity: .3; } 50% { opacity: .85; } }
}
.sf-leave { display: block; margin: 26px auto 0; background: none; border: 0; font: inherit;
  font-size: 12.5px; color: var(--muted); text-decoration: underline; cursor: pointer; padding: 0; }
.sf-leave:hover { color: var(--ink); }

.sf-meter { background: var(--surface); border-radius: 12px; padding: 13px 14px; box-shadow: var(--shadow);
  margin-top: 26px; display: flex; flex-direction: column; gap: 8px; }
.sf-meter-t { display: flex; align-items: baseline; gap: 7px; font-size: 12px; color: var(--muted); }
.sf-meter-t b { font-family: Newsreader, Georgia, serif; font-size: 19px; color: var(--ink);
  font-weight: 400; margin-left: auto; }
.sf-per { font-size: 11px; }
.sf-bar { height: 9px; border-radius: 5px; background: var(--surface-warm); overflow: hidden; }
.sf-bar i { display: block; height: 100%; border-radius: 5px; background: var(--ink); }

/* ---- plan changesets (Track 2 · F3) ---- */
.cs-title { font-family: Newsreader, Georgia, serif; font-size: 17px; margin-bottom: 3px; }
.cs-sum { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.cs-cost { padding: 9px 11px; background: var(--bg); border-radius: 9px; font-size: 12.5px;
  color: var(--muted); margin-bottom: 9px; }
.cs-cost b { font-family: Newsreader, Georgia, serif; font-size: 17px; color: var(--ink); font-weight: 400; }
/* The capacity check (F3). The bar is the same idea as the season meter's, and
   the tone shifts with the verdict rather than with a colour alone — "over" says
   so in words above the row, this only underlines it. */
.cs-cap { padding: 11px 12px; background: var(--bg); border-radius: 9px; margin-top: 8px; }
.cs-cap-t { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; color: var(--muted); }
.cs-cap-t b { font-family: Newsreader, Georgia, serif; font-size: 17px; color: var(--ink); font-weight: 400; }
.cs-cap-bar { height: 7px; border-radius: 4px; background: var(--surface-warm);
  overflow: hidden; margin: 9px 0 8px; }
.cs-cap-bar i { display: block; height: 100%; border-radius: 4px; background: var(--ink); }
.cs-cap-tight .cs-cap-bar i { background: var(--terra); }
.cs-cap-over .cs-cap-bar i { background: var(--behind); }
.cs-cap-n { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 0; }
.cs-cap-over .cs-cap-n { color: var(--behind); }
.cs-cap-n + .cs-cap-n { margin-top: 6px; }

/* Paste a plan (F4). A door, not a lane: closed it is one quiet line under the
   composer, because most plans are built in the conversation above it. */
.gp-import-row { margin-top: 12px; }
.gp-import-open { font: inherit; font-size: 12.5px; color: var(--muted); background: none;
  border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.gp-import-open:hover { color: var(--ink); }
.gp-import { margin-top: 14px; padding: 15px 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; }
.gp-import-h { font-family: Newsreader, Georgia, serif; font-size: 17px; color: var(--ink); }
.gp-import-s { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 5px 0 11px; }
.gp-import-ta { width: 100%; font: inherit; font-size: 13.5px; line-height: 1.55;
  padding: 12px 13px; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px; resize: vertical; }
.gp-import-ta:focus { outline: none; border-color: var(--ink); }
.gp-import-n { font-size: 12.5px; color: var(--behind); line-height: 1.5; margin: 10px 0 0; }
.gp-import-acts { display: flex; justify-content: flex-end; gap: 9px; margin-top: 11px; }

/* What a plan asks for that On Track can only remember (F3 · refusals). Neither a
   warning nor a boast — a plain note that these were kept, and how. */
.cs-refuse { margin-top: 9px; padding: 10px 12px; background: var(--bg);
  border-left: 3px solid var(--faint); border-radius: 8px; }
.cs-refuse-h { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-bottom: 7px; }
.cs-refuse-i { font-size: 12px; line-height: 1.55; color: var(--muted); margin: 0 0 6px; }
.cs-refuse-i:last-child { margin-bottom: 0; }
.cs-refuse-i b { color: var(--ink); font-weight: 500; }

/* What held, in the season wrap (rhythm-telemetry). A row per rhythm, quiet —
   this reports, it does not grade. */
.sw-rhythm { display: flex; align-items: baseline; gap: 10px; padding: 7px 2px;
  border-bottom: 1px solid var(--line); font-size: 13px; }
.sw-rhythm:last-child { border-bottom: 0; }
.sw-rhythm-t { flex: 1; }
.sw-rhythm-n { font-size: 11.5px; color: var(--muted); }
.sw-rhythm-v { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); flex: none; }
.sw-rhythm-kept .sw-rhythm-v { color: var(--ahead); }
.sw-rhythm-stopped .sw-rhythm-v { color: var(--behind); }
.cs-warn { font-size: 11.5px; line-height: 1.5; color: var(--muted); margin: 0 0 8px;
  padding: 9px 11px; background: var(--bg); border-left: 3px solid var(--behind); border-radius: 8px; }

/* ---- Gameplan (Track 2 · D) ---- */
.gp-thread { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow-y: auto;
  padding: 2px 2px 6px; }
.gp-msg { max-width: 82%; font-size: 14px; line-height: 1.5; padding: 11px 14px; border-radius: 14px; }
.gp-msg.assistant { align-self: flex-start; background: var(--surface); box-shadow: var(--shadow);
  border-bottom-left-radius: 5px; }
.gp-msg.user { align-self: flex-end; background: var(--ink); color: var(--bg);
  border-bottom-right-radius: 5px; }
.gp-think { color: var(--faint); font-style: italic; }
.gp-composer { display: flex; gap: 9px; align-items: flex-end; margin: 14px 0 4px; }
.gp-input { flex: 1; font: inherit; font-size: 15px; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface); color: var(--ink); resize: none; }
.gp-input:focus { outline: none; border-color: var(--ink); }
.gp-send { flex: none; }

.gp-know { margin-top: 26px; }
.gp-fact { display: flex; align-items: center; gap: 9px; padding: 9px 4px;
  border-bottom: 1px solid var(--line); font-size: 13px; }
.gp-kind { flex: none; font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); background: var(--surface-warm); border-radius: 20px; padding: 3px 8px; }
.gp-fact-b { flex: 1; color: var(--ink); cursor: text; line-height: 1.45; }
.gp-fact-i { flex: 1; font: inherit; font-size: 13px; padding: 4px 7px; border: 1px solid var(--ink);
  border-radius: 7px; background: var(--bg); color: var(--ink); }
.gp-when { flex: none; font-size: 11px; color: var(--muted); }
.gp-del { flex: none; font: inherit; font-size: 17px; line-height: 1; width: 24px; height: 24px;
  border: 0; border-radius: 50%; background: none; color: var(--faint); cursor: pointer; }
.gp-del:hover { color: var(--behind); background: var(--surface-warm); }

/* ---- the weekly review (Track 2 · C) ---- */
.rv-nav { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
.rv-arrow { font: inherit; font-size: 17px; line-height: 1; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line); background: none; color: var(--ink); cursor: pointer; }
.rv-arrow:hover:not(:disabled) { border-color: var(--ink); }
.rv-arrow:disabled { opacity: .3; cursor: default; }
.rv-week { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.rv-h { font-size: clamp(20px, 2.4vw, 25px); font-weight: 400; margin: 0 0 4px; }
.rv-lede { font-size: 13px; color: var(--muted); margin: 0 0 20px; }
.rv-note { font-size: 11.5px; color: var(--faint); line-height: 1.5; margin: 6px 0 0; }
.rv-foot { font-size: 11.5px; color: var(--faint); line-height: 1.5; margin: 14px 0 0; text-align: center; }

.rv-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; }
.rv-bar-n { width: 74px; flex: none; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-bar-t { flex: 1; height: 8px; border-radius: 5px; background: var(--surface-warm); overflow: hidden; }
.rv-bar-t i { display: block; height: 100%; border-radius: 5px; }
.rv-bar-v { flex: none; min-width: 78px; text-align: right; font-size: 11.5px; color: var(--muted); }

.rv-tally { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.rv-tl { background: var(--surface); border-radius: 10px; padding: 11px 13px; }
.rv-tl-n { font-family: Newsreader, Georgia, serif; font-size: 23px; line-height: 1; }
.rv-tl-k { font-size: 11.5px; color: var(--muted); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.rv-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

.rv-q { background: var(--surface); border-radius: 14px; padding: 15px 16px; box-shadow: var(--shadow); margin-bottom: 11px; }
.rv-q-t { font-size: 14px; line-height: 1.4; }
.rv-q-h { font-size: 11.5px; color: var(--faint); margin: 4px 0 11px; }
.rv-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-opt { font: inherit; font-size: 12.5px; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.rv-opt:hover { border-color: var(--muted); }
.rv-opt.on { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.rv-q-acts { display: flex; gap: 10px; margin-top: 16px; }
.rv-q-acts .btn { flex: 1; }
.rv-redo { display: block; margin: 14px 0 0; background: none; border: 0; font: inherit; font-size: 12.5px;
  color: var(--muted); text-decoration: underline; cursor: pointer; padding: 0; }
.rv-redo:hover { color: var(--ink); }

/* What's left of the journal's styles after todo-retire: the archive reads
   entries, so the card and the way back out survive. The writing surface —
   tabs, the prompt, the textarea and its save bar — went with the feature. */
.jr-reroll { font: inherit; font-size: 12px; color: var(--muted); background: none; border: 0;
  padding: 0; cursor: pointer; text-decoration: underline; flex: none; }
.jr-reroll:hover { color: var(--ink); }
/* Long entries are clamped to a couple of lines on the card. */
.jr-card { border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px;
  background: var(--surface); margin-bottom: 10px; cursor: pointer; }
.jr-card:hover { border-color: var(--muted); }
.jr-card-when { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.jr-card-q { font-family: Newsreader, Georgia, serif; font-size: 15px; color: var(--muted); margin: 4px 0 6px; }
.jr-card-body { font-size: 14px; line-height: 1.55; color: var(--ink); white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jr-prop { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--surface); }
.jr-prop-what { font-size: 15px; color: var(--ink); line-height: 1.45; }
.jr-prop-why { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 8px 0 0; }
.jr-prop-actions { display: flex; gap: 8px; margin-top: 14px; }
.jr-prop-actions .btn { flex: 1; font-size: 14px; padding: 10px; }

/* Sharpen a goal (Track 2). Deliberately no score, no checklist, no acronyms —
   one rewrite, one plain sentence on what changed. */
.gr-row { display: flex; gap: 8px; align-items: center; }
.gr-row input[type=text] { flex: 1; min-width: 0; }
.gr-btn { flex: none; margin: 0 !important; font: inherit; font-size: 13px; font-weight: 500;
  padding: 10px 14px; border-radius: 20px; background: none; color: var(--ink);
  border: 1px solid var(--ink); cursor: pointer; white-space: nowrap; }
.gr-btn:hover { background: var(--ink); color: var(--bg); }
.gr-btn:disabled { opacity: .5; cursor: default; }
.gr-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  background: var(--surface); margin: 10px 0 2px; }
.gr-card .ai-loading { padding: 6px 2px; }
.gr-was { font-size: 12px; color: var(--faint); margin-bottom: 8px; }
.gr-was b { font-weight: 500; color: var(--muted); letter-spacing: .04em;
  text-transform: uppercase; font-size: 10.5px; margin-right: 6px; }
.gr-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-bottom: 4px; }
.gr-input { width: 100%; font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg); color: var(--ink); }
.gr-area { width: 100%; font: inherit; font-size: 13.5px; line-height: 1.5; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); resize: vertical; }
.gr-input:focus, .gr-area:focus { outline: none; border-color: var(--terra); }
.gr-field { margin-top: 10px; }
.gr-why { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 10px; }
.gr-actions { display: flex; gap: 8px; margin-top: 12px; }
.gr-actions .btn { flex: 1; font-size: 14px; padding: 10px; }
.gr-ok { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.5; }
.gr-ok-mark { flex: none; color: var(--ahead); font-size: 14px; line-height: 1.35; }

/* Predict vs actual (Track 2). Green/red follow the existing pace semantics:
   early reads like ahead, late like behind. */
.pv { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface); margin: 4px 0 14px; }
.pv-sub { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; line-height: 1.45; }
.pv-row { display: grid; grid-template-columns: 82px 62px 1fr; align-items: center; gap: 10px; padding: 5px 0; }
.pv-tier { font-size: 13px; color: var(--ink); }
.pv-delta { font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.pv-delta.late { color: var(--behind); }
.pv-delta.early { color: var(--ahead); }
.pv-delta.even { color: var(--muted); }
.pv-read { font-size: 12px; color: var(--muted); }
.pv-raw { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0;
  font-size: 13.5px; color: var(--ink); border-bottom: 1px solid var(--line); }
.pv-raw:last-of-type { border-bottom: 0; }
.pv-foot { font-size: 12px; color: var(--muted); margin-top: 10px; line-height: 1.45; }
.pv-chip { flex: none; font-size: 11px; border-radius: 20px; padding: 2px 8px; border: 1px solid var(--line);
  color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pv-chip.late { color: var(--behind); }
.pv-chip.early { color: var(--ahead); }

/* Task location (Track 3). Free text, shown beside the task — never geocoded,
   never linked out; it's a reminder, not a map. */
.day-block .db-loc { flex: none; font-size: 10.5px; color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 40%; }

/* Plan + AI allowance (Track 5). Shown in Data & training, where the other
   things-about-your-account already live. */
.plan-box { border: 1px solid var(--line); border-radius: 12px; padding: 14px 15px;
  background: var(--bg); margin-bottom: 18px; }
.plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.plan-name { font-size: 14px; font-weight: 500; color: var(--ink); }
.plan-when { font-size: 11.5px; color: var(--muted); }
.plan-meter { height: 7px; border-radius: 6px; background: var(--surface-warm); overflow: hidden; margin: 11px 0 0; }
.plan-meter i { display: block; height: 100%; background: var(--ink); border-radius: 6px; transition: width .4s; }
.plan-meter.spent i { background: var(--behind); }
.plan-row { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 7px; }
.plan-note { font-size: 11.5px; color: var(--faint); line-height: 1.5; margin-top: 11px; }

/* Share (Track 6). Reuses the summit cards from the Summits list — same thing
   being shown, so it should look the same — and the .jr-tab pill for the season
   switcher, for the same reason. */
.share-seasons { display: flex; gap: 6px; margin: 0 0 22px; flex-wrap: wrap; }
.share-head { margin-bottom: 24px; }
.share-head-t { font-family: Newsreader, Georgia, serif; font-size: 21px; color: var(--ink); }
.share-head-s { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
/* The area a run of summits belongs to. Quieter than a section label — it groups
   inside one, rather than starting a new part of the page. */
.share-group { font-size: 12px; color: var(--muted); margin: 16px 0 8px;
  letter-spacing: .04em; text-transform: uppercase; }
.share-att { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.share-att-n { font-size: 13px; width: 26%; min-width: 84px; }
.share-att-p { font-size: 12px; color: var(--muted); width: 34px; text-align: right; flex: none; }
.share-bar { flex: 1; height: 7px; border-radius: 4px; background: var(--surface-warm); overflow: hidden; }
.share-bar i { display: block; height: 100%; background: var(--terra); border-radius: 4px; }
.share-unplaced { font-size: 12px; color: var(--muted); margin: 12px 0 0; }
.share-wrap { font-size: 14px; line-height: 1.6; color: var(--ink); margin: 0 0 10px; }
.share-wrap-own { font-family: Newsreader, Georgia, serif; font-size: 15.5px;
  border-left: 2px solid var(--line); padding-left: 13px; color: var(--ink); }
.share-focus { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.share-count { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }
/* The composer (share-compose). A letter, so it gets a letter's proportions —
   serif body, generous line height — rather than a form field's. */
.share-compose-note { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 0 0 14px; max-width: 58ch; }
.share-subject { width: 100%; font: inherit; font-size: 15px; padding: 11px 14px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 11px; margin-bottom: 10px; }
.share-subject:focus, .share-body:focus { outline: none; border-color: var(--ink); }
.share-body { width: 100%; font-family: Newsreader, Georgia, serif; font-size: 15.5px; line-height: 1.65;
  padding: 16px 15px 24px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; resize: vertical; }
.share-compose-foot { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.share-reset { font: inherit; font-size: 12px; color: var(--muted); background: none; border: 0;
  padding: 0; cursor: pointer; text-decoration: underline; }
.share-reset:hover { color: var(--ink); }
.share-compose-state { font-size: 11.5px; color: var(--faint); margin-left: auto; }
/* "Write it for me" (share-draft-ai). Beside the draft, not in place of it — a
   quieter button than Preview, because the deterministic draft is the default
   and this is the optional upgrade. */
.share-ai-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.share-ai-btn { font: inherit; font-size: 13px; padding: 8px 15px; border-radius: 20px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.share-ai-btn:hover { border-color: var(--terra); color: var(--terra); }
.share-ai-btn:disabled { opacity: .55; cursor: default; }
.share-ai-note { font-size: 12.5px; color: var(--muted); line-height: 1.5; flex: 1; min-width: 180px; }
.share-preview-btn { margin-top: 16px; }
/* The recipient window (share-contacts-ui). One scrolling list, two groups: the
   people you've chosen sit above a divider, everyone else alphabetical below. The
   height is capped so the window is a window — a list that grows without limit
   pushes the Preview button off the screen as the address book fills up. */
.rc { margin-top: 26px; }
.rc-note { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 0; max-width: 58ch; }
.rc-count { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; }
.rc-list { border: 1px solid var(--line); border-radius: 11px; overflow-y: auto;
  max-height: 232px; background: var(--surface); }
.rc-div { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--faint);
  padding: 9px 13px 5px; border-top: 1px solid var(--line); background: var(--surface-warm); }
.rc-div:first-child { border-top: 0; }
.rc-row { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.rc-row:last-child { border-bottom: 0; }
.rc-pick { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px;
  font: inherit; text-align: left; padding: 10px 4px 10px 13px; border: 0; background: none;
  color: var(--ink); cursor: pointer; }
.rc-box { flex: none; align-self: center; width: 17px; height: 17px; border-radius: 5px;
  border: 1.6px solid var(--faint); font-size: 11px; line-height: 15px; text-align: center;
  color: #fff; transition: background .18s, border-color .18s; }
.rc-row.on .rc-box { background: var(--ahead); border-color: var(--ahead); }
.rc-n { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-e { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.rc-edit { flex: none; font: inherit; font-size: 13px; color: var(--faint); background: none;
  border: 0; padding: 10px 13px; cursor: pointer; }
.rc-edit:hover { color: var(--ink); }
.rc-add { font: inherit; font-size: 13px; margin-top: 11px; padding: 8px 15px; border-radius: 20px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.rc-add:hover { border-color: var(--terra); color: var(--terra); }
/* A preference reads like a constraint's window but asks rather than takes, so it
   is the same chip in a lighter hand. */
.gp-prefer { color: var(--muted); font-style: italic; }
/* A rate in the weekly review: a count and how much week is left, never a bar —
   the promise was about how many times, so the report is how many times. */
.rv-rate { display: flex; align-items: baseline; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid var(--line); }
.rv-rate:last-of-type { border-bottom: 0; }
.rv-rate-n { flex: 1; min-width: 0; font-size: 13.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.rv-rate-c { flex: none; font-size: 13px; font-variant-numeric: tabular-nums; }
.rv-rate-t { flex: none; font-size: 11.5px; color: var(--muted); min-width: 76px; text-align: right; }
.rv-met .rv-rate-c { color: var(--ahead); }
.rv-missed .rv-rate-c { color: var(--behind); }
.rv-tight .rv-rate-t { color: var(--behind); }
.rc-adds { display: flex; flex-wrap: wrap; gap: 9px; }
.rc-gimport { color: var(--muted); }
.rc-gerr { font-size: 12.5px; color: var(--behind); line-height: 1.5; margin: 10px 0 0; max-width: 58ch; }
/* The import revision sheet. Everything arrives checked — the user asked for their
   contacts, so dropping the few they don't want is fewer taps than picking the
   many they do. */
.gi-sheet { max-width: 560px; }
.gi-list { border: 1px solid var(--line); border-radius: 11px; overflow-y: auto;
  max-height: 46vh; background: var(--surface); }
.gi-row { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.gi-row:last-child { border-bottom: 0; }
.gi-pick { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px;
  font: inherit; text-align: left; padding: 10px 13px; border: 0; background: none;
  color: var(--ink); cursor: pointer; }
.gi-row.on .rc-box { background: var(--ahead); border-color: var(--ahead); }
.gi-tag { flex: none; margin-left: auto; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--faint); }
.gi-none { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0; }
.gi-note { font-size: 11.5px; color: var(--muted); line-height: 1.6; margin: 12px 0 0; max-width: 62ch; }
.rc-form { margin-top: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface); display: flex; flex-direction: column; gap: 9px; }
.rc-in { font: inherit; font-size: 14px; padding: 9px 12px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px; background: var(--bg); }
.rc-in:focus { outline: none; border-color: var(--ink); }
.rc-err:empty { display: none; }
.rc-err { font-size: 12.5px; color: var(--behind); margin: 0; }
.rc-acts { display: flex; align-items: center; gap: 10px; }
.rc-save { padding: 8px 18px; }
.rc-cancel { font: inherit; font-size: 12.5px; color: var(--muted); background: none;
  border: 0; cursor: pointer; }
.rc-cancel:hover { color: var(--ink); }
.rc-del { font: inherit; font-size: 12.5px; color: var(--behind); background: none;
  border: 0; cursor: pointer; margin-left: auto; }
/* Preview (share-preview). The mail card is meant to read as an email, not as
   another panel of the app — white ground, serif body, a real rule above the
   footer, so what you check looks like what arrives. */
.pv-label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); margin: 16px 0 8px; }
.pv-label:first-child { margin-top: 4px; }
.pv-mail { border: 1px solid var(--line); border-radius: 12px; background: #fff;
  padding: 18px 20px; max-height: 46vh; overflow-y: auto; }
.pv-subject { font-size: 15px; font-weight: 500; color: #1c1a17; margin-bottom: 12px;
  padding-bottom: 11px; border-bottom: 1px solid #ece7dd; }
.pv-html { font-family: Newsreader, Georgia, serif; font-size: 15px; line-height: 1.65; color: #1c1a17; }
.pv-html p { margin: 0 0 12px; }
.pv-html ul { margin: 0 0 12px; padding-left: 20px; }
.pv-html li { margin-bottom: 4px; }
.pv-html hr { border: 0; border-top: 1px solid #ece7dd; margin: 16px 0 12px; }
.pv-html .update-footer { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11.5px; color: #8a8175; line-height: 1.5; }
.pv-to { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.pv-to-row { display: flex; align-items: baseline; gap: 10px; padding: 9px 13px;
  border-bottom: 1px solid var(--line); }
.pv-to-row:last-child { border-bottom: 0; }
.pv-to-n { font-size: 13.5px; }
.pv-to-e { font-size: 11.5px; color: var(--muted); }
.pv-empty { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0; }
.pv-why { font-size: 12.5px; color: var(--behind); margin: 14px 0 0; }
/* What went out (share-send). The result box lives inside the Preview sheet; the
   history lives on the tab under the composer. */
.pv-out { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--ahead);
  border-radius: 11px; background: var(--surface); }
.pv-out.bad { border-color: var(--behind); }
.pv-out-line { font-size: 13.5px; color: var(--ink); }
.pv-out-row { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.pv-out-who { font-size: 12.5px; flex: none; }
.pv-out-why { font-size: 12px; color: var(--muted); line-height: 1.45; }
.pv-retry { font: inherit; font-size: 12.5px; margin-top: 11px; padding: 7px 14px;
  border-radius: 20px; border: 1px solid var(--line); background: var(--bg);
  color: var(--ink); cursor: pointer; }
.pv-retry:hover { border-color: var(--terra); color: var(--terra); }
.sent-list { border: 1px solid var(--line); border-radius: 11px; overflow: hidden;
  background: var(--surface); }
.sent-row { padding: 11px 14px; border-bottom: 1px solid var(--line); }
.sent-row:last-child { border-bottom: 0; }
.sent-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sent-subj { font-size: 13.5px; color: var(--ink); }
.sent-when { font-size: 11.5px; color: var(--muted); flex: none; }
.sent-to { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 4px; }
.share-soon { margin-top: 26px; padding: 15px 16px; border: 1px dashed var(--line);
  border-radius: 12px; background: var(--surface); }
.share-soon-t { font-size: 14px; color: var(--ink); }
.share-soon-s { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-top: 7px; }

/* ---- The pre-frame, and the first journey (Track 2 · Act 3) ----
   Onboarding, the principles and the first season are one flow, so for its length the
   app's furniture goes away: nothing to navigate to, nothing to wander into, no badge
   counting things the user hasn't been shown yet. The way out is always a button
   inside the flow — never the chrome, because chrome you can leave by is chrome that
   says the thing you were doing had finished. */
.ob-beats { list-style: none; margin: 0 0 24px; padding: 0;
  display: flex; flex-direction: column; gap: 14px; counter-reset: beat; }
.ob-beats li { counter-increment: beat; position: relative; padding-left: 30px; }
.ob-beats li::before { content: counter(beat); position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--muted); }
.ob-beats b { display: block; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.ob-beats span { display: block; font-size: 13px; color: var(--muted); line-height: 1.55; margin-top: 2px; }

body.in-journey .fnav,
body.in-journey .fab,
body.in-journey .today,
body.in-journey .crumbs,
body.in-journey .top-right .cal-btn,
body.in-journey .top-right .menu-btn { display: none; }
/* Left in place, because the wordmark is the one thing that should stay — but it is a
   home button the rest of the time, and a home button here is the exit that isn't
   supposed to exist yet. */
body.in-journey .wordmark-home { cursor: default; pointer-events: none; }

/* ---- Act three is the same room as acts one and two ----

   The first two acts happen in a full-screen overlay with a rail at the top, the
   content centred in a narrow column, and one way out at the bottom. The third
   happened inside the app: a wordmark, today's date, a different rail, smaller type
   and a differently-shaped button. Nothing was broken and the seam was obvious —
   crossing into the season read as arriving somewhere else rather than turning a page.

   Only while `in-journey`. A returning user starting their second season is in the
   app, and should be. */
body.in-journey .top { display: none; }
body.in-journey .stage { padding-top: 20px; }
body.in-journey .sf { max-width: 560px; margin: 0 auto; padding: 0 24px;
  min-height: 72vh; display: flex; flex-direction: column; justify-content: center; }
/* The conversation's voice, at the conversation's size. `.sf-q` was two steps smaller
   than `.ob-q` for the same job — asking one question and waiting. */
body.in-journey .sf-q { font-size: clamp(21px, 4vw, 29px); line-height: 1.22; margin-bottom: 22px; }

/* ---- One rail, three acts (jr = journey rail) ----

   Three marks, the one you are in subdivided. Three marks alone stop telling you
   anything inside a long act — which was the complaint about "4 of 8" being the only
   signal on the season screen. Every step of everything, as one row, reads as a chore
   before you have started. This is both: which act, and how far into it.

   The season's five sub-steps are its phases, not its areas, deliberately: areas are
   unknown until the second act finishes, and a rail that jumped from three steps to
   eleven mid-flow would be worse than one that never moved. How many areas are left is
   said in words underneath. */
.jr-rail { display: flex; gap: 14px; align-items: flex-start; width: 100%; }
.jr-act { flex: 1; min-width: 0; }
.jr-steps { display: flex; gap: 3px; }
.jr-step { flex: 1; height: 3px; border-radius: 2px; background: var(--surface-warm); }
.jr-step.on { background: var(--ink); }
/* The act you are in is named; the others are there to be counted, not read. Naming
   all three at full strength turns a progress rail into a table of contents. */
.jr-label { display: block; margin-top: 6px; font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--faint); }
.jr-act.now .jr-label { color: var(--muted); }
.jr-act.done .jr-label { color: var(--faint); }