/* GEMINA for Talents — wireframe prototype.
   Greyscale only, but properly designed: real hierarchy, real spacing.
   All styling lives in this file. Never put styles in a screen. */

/* The handoff specifies Hanken Grotesk from Google Fonts — a deliberate
   deviation from the earlier no-CDN rule, decided 2026-08-11. Offline it
   falls back to system-ui and nothing breaks. */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  /* B&W restyle, 2026-08-11, tokens from docs/design-handoff-bw-restyle.md:
     the screen itself is a soft grey and everything that used to be a bordered
     or filled panel is a white card on it. --fill is white on purpose — every
     component that filled itself grey (callout, field, factbar, chip) becomes
     a white card without touching its selector. */
  --paper: #ffffff;
  --page: #e8e9ea;
  --screen: #f4f4f5;
  --ink: #111111;
  --ink-soft: #55555a;
  --ink-faint: #8a8a8e;
  --line: #ececec;
  --line-mid: #d4d4d8;
  --line-strong: #a8a8ad;
  --fill: #ffffff;
  --fill-mid: #ececec;
  --fill-dark: #d4d4d8;
  --accent: #111111;
  --shadow: 0 1px 3px rgba(0,0,0,.05);   /* a whisper, nothing heavier */

  --r: 24px;      /* corner radius — cards */
  --r-sm: 18px;   /* fields, options, small cards and rows */
  --r-pill: 999px;

  /* Vertical rhythm. Four steps, nothing in between — the spacing was twelve
     different values before, which is what made screens feel arbitrary.
       xs  things that belong to each other: chips, picks, bars, a field and its label
       sm  items stacked in a list: buttons, option cards, suggestions
       card  a card or a line of fine print, sitting under what it belongs to
       md  the default gap between two distinct blocks
       lg  before a section label, where a new section starts */
  --gap-xs: 8px;
  --gap-sm: 10px;
  --gap-card: 14px;
  --gap-md: 20px;
  --gap-lg: 30px;
  --tap: 52px;
  --top: 52px;
  --bottom: 70px;
  --pad: 22px;
}

* { box-sizing: border-box; }

/* Any class that sets `display` beats the browser's own [hidden] rule, so a
   hidden .ctl or .chip keeps rendering. Make hidden mean hidden. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 500 15.5px/1.5 'Hanken Grotesk', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); }
h1, h2, h3 { margin: 0 0 10px; line-height: 1.2; letter-spacing: -0.015em; }
h1 { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 18px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 650; }
p { margin: 0 0 14px; }
strong { font-weight: 620; }

.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.small { font-size: 14px; }
.tiny { font-size: 12.5px; }

/* ---------- the screen canvas ---------- */

.screen {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  padding: calc(var(--top) + 26px) var(--pad) calc(var(--bottom) + 40px);
  background: var(--screen);
}

/* screens with a pinned action bar need room for it */
.screen.has-bar { padding-bottom: 132px; }

/* On a tab screen the action bar is lifted clear of the tabs, so the screen
   has to clear both. Without this the last block hides behind the bar —
   onboarding and reviews never caught it, being bare, where the bar sits at 0. */
body:not([data-shell="bare"]) .screen.has-bar { padding-bottom: calc(132px + var(--bottom)); }

/* ---------- shared shell (injected by assets/shell.js) ---------- */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--top);
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 430px;
  margin: 0 auto;
  padding: 0 16px;
  background: var(--screen);
  z-index: 5;
}

.topbar-title { font-size: 14px; font-weight: 650; flex: 1; letter-spacing: -0.01em; }
.topbar a { color: var(--ink-faint); font-size: 13px; text-decoration: none; }
.topbar a:hover { color: var(--ink); }

.tabs {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--bottom);
  display: flex;
  max-width: 430px;
  margin: 0 auto;
  background: var(--screen);
  border-top: 1px solid var(--line);
  z-index: 5;
}

.tabs a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  opacity: 0.38;
  text-decoration: none;
}

.tabs .tab-i { display: flex; width: 22px; height: 22px; }
.tabs .tab-i svg { width: 100%; height: 100%; }

.tabs a[aria-current="page"] { opacity: 1; }

/* ---------- pinned action bar ---------- */
/* The primary action lives here, never directly under the last input. */

.actionbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  max-width: 430px;
  margin: 0 auto;
  padding: 14px var(--pad) 22px;
  background: var(--screen);
  border-top: 1px solid var(--line);
  z-index: 4;
}

body:not([data-shell="bare"]) .actionbar { bottom: var(--bottom); }
.actionbar .btn:last-child { margin-bottom: 0; }
.actionbar .quiet-link { display: block; text-align: center; margin: 12px 0 0; font-size: 14px; }

/* ---------- controls ---------- */

.btn {
  display: block;
  width: 100%;
  min-height: var(--tap);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  padding: 13px 34px;
  margin: 0 0 var(--gap-sm);
  cursor: pointer;
}

.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.screen > h1 + .btn { margin-top: 24px; }  /* breathing room when a button follows the heading */
.btn-quiet { border-color: var(--line-mid); color: var(--ink-soft); font-weight: 500; }

.quiet-link { color: var(--ink-soft); font-size: 14px; }

.field {
  background: var(--fill);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 14px 15px;
  min-height: var(--tap);
  color: var(--ink);
  font-size: 16px;
  margin: 0 0 var(--gap-card);
  display: flex;
  align-items: center;
}

.field-empty { color: var(--ink-faint); }
.label { font-size: 13px; font-weight: 560; color: var(--ink-soft); margin: 0 0 6px; }

.check { display: flex; gap: 12px; align-items: flex-start; margin: var(--gap-md) 0; font-size: 14px; color: var(--ink-soft); }
.check .tick {
  width: 20px; height: 20px;
  flex: none;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--ink);
}
.check .tick-off { border-color: var(--line-strong); color: transparent; }

.or { display: flex; align-items: center; gap: 12px; color: var(--ink-faint); font-size: 13px; margin: var(--gap-md) 0; }
.or::before, .or::after { content: ""; height: 1px; background: var(--line); flex: 1; }

.terms { text-decoration: underline; }  /* no Terms screen in the prototype, so not a link */

/* selectable option card */
.option {
  border: 1px solid var(--line-mid);
  border-radius: var(--r-sm);
  padding: 15px;
  margin: 0 0 var(--gap-sm);
  display: block;
  text-decoration: none;
}
.option-on { border-color: var(--ink); border-width: 1.5px; background: var(--fill); }
.option .opt-note { display: block; color: var(--ink-soft); font-size: 13.5px; margin-top: 3px; }

/* ---------- content blocks ---------- */

.lede { color: var(--ink-soft); font-size: 16.5px; margin: 0 0 var(--gap-md); }
.section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: var(--gap-lg) 0 12px;
}

/* a label that opens the screen starts flush — the 30px is for mid-screen use only */
.screen > .section-label:first-child { margin-top: 0; }

.card { background: var(--paper); border-radius: var(--r); padding: 20px; margin: 0 0 var(--gap-card); box-shadow: var(--shadow); }

/* every white card carries the same whisper shadow. The three pieces of the
   Insights record card each carry it too — the .05 alpha vanishes where the
   next white piece paints over it, so only the outer edge reads. */
.checkin-card, .review-card, .marklist li, .act, .mn, .jump,
.rows, .entries, .factpanel, .callout, .field, .textarea, .numberfield,
.option, .pick, .suggestion, .write-in,
.screen > .mk, .act-c, .weeks { box-shadow: var(--shadow); }
.entries .weeks { box-shadow: none; }

.callout {
  background: var(--fill);
  border-radius: var(--r);
  padding: 18px 20px;
  margin: 0 0 var(--gap-md);
  font-size: 14.5px;
  color: var(--ink-soft);
}
.callout strong { color: var(--ink); display: block; margin-bottom: 4px; font-size: 13px; letter-spacing: 0.02em; }

.note { border-left: 2px solid var(--line-strong); padding: 2px 0 2px 16px; color: var(--ink-soft); font-size: 15px; margin: 0 0 var(--gap-md); }

.box {
  background: var(--fill);
  border-radius: var(--r-sm);
  min-height: 76px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint);
  font-size: 12.5px;
  margin: 0 0 var(--gap-md);
}

/* A list draws a rule only *between* its items. Ruling the outside as well made
   every list a closed box, and a screen of closed boxes is what read as busy —
   the section label above already says where the list starts. */
.rows { list-style: none; background: var(--paper); border-radius: var(--r); margin: 0 0 var(--gap-md); padding: 4px 20px; }
.rows li { padding: 15px 0; }
.rows li + li { border-top: 1px solid var(--line); }

.chip {
  display: inline-block;
  border: 0;
  border-radius: 100px;
  background: var(--fill-mid);
  padding: 9px 16px;
  margin: 0 7px 8px 0;
  font-size: 14px;
}
.chip-on { background: var(--ink); color: var(--paper); }

.facts { background: var(--paper); border-radius: var(--r); padding: 20px; margin: 0 0 var(--gap-md); box-shadow: var(--shadow); }
.stack > * + * { margin-top: 16px; }
.link { color: var(--ink); }
.actions { margin-top: 26px; }

.fine { font-size: 13px; color: var(--ink-faint); margin: 0 0 var(--gap-card); }

/* one-sentence rows: the fact, then a quiet tail. Never a left/right split —
   two-column rows broke the moment the left side wrapped. */
.rows .tail { font-style: normal; color: var(--ink-faint); }

/* controls on an editable row — bordered, so they read as tappable, not as metadata */
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* low-contrast chips (2nd handoff): a fill, never a stroke. On = inverted. */
.ctl {
  display: inline-block;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--fill-mid);
  padding: 9px 16px;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  /* a control's label never breaks mid-phrase — "Keep next week" on two lines
     reads as a broken button. It wraps to the next row whole, or not at all. */
  white-space: nowrap;
}

.ctl-on { background: var(--ink); color: var(--paper); font-weight: 600; }
.ctl-on .g, .ctl-primary .g { color: inherit; }

.add-action {
  display: block;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm);
  padding: 14px;
  text-align: center;
  font-size: 14.5px;
  color: var(--ink-soft);
  text-decoration: none;
  margin: var(--gap-card) 0 0;
}

/* widths for bars — no inline styles anywhere in this prototype */
.w0 { width: 0; } .w15 { width: 15%; } .w20 { width: 20%; } .w25 { width: 25%; }
.w30 { width: 30%; } .w35 { width: 35%; } .w40 { width: 40%; }
.w50 { width: 50%; } .w65 { width: 65%; } .w75 { width: 75%; }
.w80 { width: 80%; } .w100 { width: 100%; }

/* ---------- progress, without any streak ---------- */

.progress { height: 3px; background: var(--fill-mid); border-radius: 100px; overflow: hidden; margin: 0 0 var(--gap-md); }
.progress span { display: block; height: 100%; background: var(--ink); }

.bar { height: 6px; background: var(--fill-mid); border-radius: 3px; overflow: hidden; margin: 0 0 var(--gap-xs); }
.bar span { display: block; height: 100%; background: var(--accent); }

/* step dots are short bars, not a full-width track (2nd handoff) */
.steps { display: flex; gap: 6px; margin: 0 0 var(--gap-md); }
.steps i { width: 24px; height: 4px; flex: none; background: var(--fill-mid); border-radius: 2px; }
.steps i.on { background: var(--ink); }

/* active days over 7 — circles, never a counter of days in a row */
.heat { display: flex; justify-content: space-between; gap: 5px; margin: 0 0 var(--gap-xs); }
.heat span {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  background: var(--fill-mid);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 650; color: var(--ink-faint);
}
.heat span.on { background: var(--ink); color: var(--paper); }
/* today is marked, never scored */
.heat span.heat-today { border: 2px solid var(--ink); background: var(--paper); color: var(--ink); }

/* the five diagnostic axes */
.axes { margin: 0 0 var(--gap-md); }
.axis { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--gap-xs); font-size: 13.5px; color: var(--ink-soft); }
.axis .axis-bar { flex: 1; height: 6px; background: var(--fill-mid); border-radius: 100px; overflow: hidden; }
.axis .axis-bar span { display: block; height: 100%; background: var(--accent); }
.axis .axis-n { width: 34px; text-align: right; color: var(--ink-faint); font-size: 12.5px; }

/* three acts of the plan — every act shows its bar, even an empty one */
.acts { display: flex; flex-direction: column; gap: 10px; margin: 0 0 var(--gap-md); }
.act { background: var(--paper); border-radius: var(--r); padding: 18px 20px; font-size: 14px; }
.act > .bar { margin: 12px 0 6px; }
.act > .fine { margin: 0; }
/* the current act is told by its meta line, never by a stroke — a stroked
   card reads as selected, and nothing here is selectable */
.act-now { }
.act .act-meta { color: var(--ink-faint); font-size: 12.5px; margin-top: 2px; }

/* ---------- not-built placeholder ---------- */

.ph { border: 1px dashed var(--line-strong); border-radius: var(--r); padding: 22px; }
.ph-tag {
  display: inline-block;
  background: var(--fill);
  border-radius: 100px;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 620;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--gap-card);
}
.ph-note { color: var(--ink-soft); font-size: 14.5px; }

/* ---------- display type ---------- */
/* Only for screens that carry one statement: Welcome, axis interstitials,
   the profile's main gap, the strategy card, plan activated. Never on a question. */

.display {
  font-size: 27px;
  line-height: 1.12;
  font-weight: 780;
  letter-spacing: -0.03em;
  margin: 0 0 var(--gap-card);
}

.axis-num {
  font-size: 54px;
  font-weight: 680;
  letter-spacing: -0.05em;
  line-height: 1;
  margin: 0 0 2px;
}

/* ---------- marked slot ---------- */
/* Only where a real image will live. Never filler. */

.slot {
  width: 100%;
  min-height: 120px;
  background: var(--fill);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  margin: 0 0 var(--gap-md);
}

/* ---------- diagnostic question screens ---------- */

.qhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 var(--gap-xs);
}

.qhead .axis-name { font-weight: 620; }

.qdots { display: flex; gap: 5px; margin: 0 0 var(--gap-md); }
.qdots i { height: 3px; flex: 1; background: var(--fill-mid); border-radius: 100px; }
.qdots i.on { background: var(--ink); }

.question {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin: 0 0 var(--gap-md);
}

/* real, typable answer boxes — she can write in every one of them */
.textarea {
  display: block;
  width: 100%;
  background: var(--fill);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 14px 15px;
  min-height: 88px;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  margin: 0 0 var(--gap-xs);
  resize: vertical;
}

.numberfield {
  display: block;
  width: 100%;
  background: var(--fill);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 15px;
  font: inherit;
  font-size: 22px;
  font-weight: 650;
  color: var(--ink);
  margin: 0 0 var(--gap-xs);
}

.textarea::placeholder, .numberfield::placeholder,
.field::placeholder, .write-in::placeholder { color: var(--ink-faint); font-weight: 400; }
.textarea:focus, .numberfield:focus, .field:focus { outline: none; border-color: var(--ink); }

input.field { display: block; width: 100%; font: inherit; font-size: 16px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 var(--gap-xs); }

/* ---------- the assistant ---------- */
/* Point calls only. Marks where AI speaks, so the founders can see where it does not. */

.assist {
  border: 1px solid var(--line-mid);
  border-left: 3px solid var(--ink);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  margin: 0 0 var(--gap-md);
  font-size: 14.5px;
  color: var(--ink-soft);
}

.assist .who {
  display: block;
  font-size: 10.5px;
  font-weight: 620;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 6px;
}

/* ---------- goal by template ---------- */
/* There is no free text field here — the user fills slots in a sentence. */

/* each slot is its own block, so a long outcome can never tear mid-sentence */
.goal-slot {
  display: block;
  background: var(--fill);
  border-bottom: 2px solid var(--ink);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  padding: 13px 15px;
  font-size: 19px;
  font-weight: 640;
  margin: 0 0 var(--gap-md);
}

/* ---------- plan ---------- */

.tag {
  display: inline-block;
  border: 1px solid var(--line-mid);
  border-radius: 100px;
  padding: 3px 9px;
  font-size: 11px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.action {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 0;
  font-size: 14.5px;
}

.action + .action { border-top: 1px solid var(--line); }
.action .mark {
  width: 22px; height: 22px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--line-mid);
  border-radius: var(--r-pill);
  margin-top: 0;
  color: transparent;
}
.action .mark svg { width: 12px; height: 12px; }
.action .mark-done { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.action .body { flex: 1; }
.action .meta { display: block; color: var(--ink-faint); font-size: 12px; margin-top: 3px; }

/* ---------- the six parts of the system ---------- */

.parts { list-style: none; margin: 0 0 var(--gap-md); padding: 0; counter-reset: part; }
.parts li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 0;
}
.parts li + li { border-top: 1px solid var(--line); }
.parts li::before {
  counter-increment: part;
  content: counter(part);
  color: var(--ink-faint);
  font-size: 12px;
  width: 14px;
  flex: none;
}
.parts .part-name { flex: 1; font-weight: 600; }
.parts .part-state { color: var(--ink-faint); font-size: 12.5px; white-space: nowrap; }
.parts .now .part-name { color: var(--ink); }
.parts .now .part-state { color: var(--ink); font-weight: 620; }
.parts .inside .part-name { font-weight: 400; color: var(--ink-soft); }

/* ---------- Today ---------- */

.goal-line { font-size: 15px; font-weight: 600; line-height: 1.3; margin: 0 0 var(--gap-md); }
.where { font-size: 12.5px; color: var(--ink-faint); margin: 0 0 var(--gap-md); }

/* words on the left, the pill on the right — the card is one balanced row,
   never a column with a dead right side */
.checkin-card {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 16px;
  align-items: center;
  background: var(--paper);
  border-radius: var(--r);
  padding: 22px;
  margin: 0 0 var(--gap-card);
}
.checkin-card h2 { grid-column: 1; margin: 0 0 4px; font-size: 20px; }
.checkin-card p { grid-column: 1; margin: 0; color: var(--ink-soft); font-size: 14.5px; }
.checkin-card .btn {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  display: inline-block;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 14px 30px;
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.review-card {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 16px;
  align-items: center;
  background: var(--ink);
  border-radius: var(--r);
  padding: 22px;
  margin: 0 0 var(--gap-card);
  color: var(--paper);
}
.review-card h2 { grid-column: 1; margin: 0 0 4px; font-size: 20px; }
.review-card p { grid-column: 1; margin: 0; color: rgba(255,255,255,0.65); font-size: 14.5px; }
.review-card .btn {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  display: inline-block;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 14px 30px;
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

/* a note kept from an action — becomes an Idea, it is not a field on the action */
.kept {
  display: block;
  border-left: 2px solid var(--ink);
  padding: 3px 0 3px 13px;
  margin: var(--gap-sm) 0 0;
  font-size: 14px;
}
.kept .dest {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 6px;
}

.add-note {
  display: inline-block;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--fill-mid);
  padding: 9px 16px;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  margin-top: 10px;
}

/* things you can tap should look and feel tappable */
/* an act is tappable only where it has something to open — the generated plan
   in onboarding uses .act as a plain block, and it must not look tappable */
.chip, .ctl, .option, .pick, .add-note, .act:has(.act-body),
.marklist .m:not(.m-carry) { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* calm 0.2s transitions on the things that toggle — never a celebration */
.marklist .m, .tabs a, .chip, .ctl { transition: background-color .2s ease, border-color .2s ease, opacity .2s ease; }
.chip:active, .ctl:active, .option:active, .pick:active { opacity: 0.65; }

/* picking today's priorities from this week's plan */
.picklist { margin: 0 0 var(--gap-xs); }
/* an action pick is a soft white card; chosen = the card inverts. No border,
   no badge — the inversion is the whole signal (2nd handoff). */
.pick {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--paper);
  box-shadow: var(--shadow);
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
  padding: 15px 16px;
  margin: 0 0 var(--gap-xs);
}
.pick-on { background: var(--ink); color: var(--paper); font-weight: 600; }
.pick-mark { display: none; }
.pick-count { font-size: 13px; color: var(--ink-faint); margin: 0 0 var(--gap-md); }

/* a note you can actually type into */
.note-field textarea {
  display: block;
  width: 100%;
  background: var(--screen);
  border: 1px solid var(--fill-mid);
  border-radius: 12px;
  padding: 12px 13px;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
  min-height: 76px;
  resize: vertical;
  margin: var(--gap-sm) 0 0;
}
.note-field textarea:focus { outline: none; border-color: var(--ink); }
.note-field .dest { display: block; font-size: 12px; color: var(--ink-faint); margin-top: 7px; }

/* while the note is open the button is the way out of it */
.add-note-open { color: var(--ink); font-weight: 600; }

/* free text alongside a pick list */
.write-in {
  display: block;
  width: 100%;
  background: var(--fill);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 13px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  margin: 0 0 var(--gap-xs);
}
.write-in:focus { outline: none; border-color: var(--ink); }

/* the first priority of the day is the one that matters */
/* dropped by the 2nd handoff — the order already says which one is main */
.tag-main { display: none; }

/* ---------- reviews ---------- */
/* The rule: what was planned versus what was done, visible while she answers. */

/* the facts panel is prominent by position and size, not by a stroke — a
   stroked box reads as tappable, and this one only informs */
.factpanel {
  background: var(--paper);
  border-radius: var(--r);
  padding: 16px 20px;
  margin: 0 0 var(--gap-md);
}
.factrow {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding: 9px 0;
  font-size: 14.5px;
}
.factrow:first-of-type { border-top: 0; }
.card > .factrow:first-child { padding-top: 0; }
.card > .factrow:last-child { padding-bottom: 0; }
.factrow b { font-weight: 640; text-align: right; }

/* the condensed strip repeated above every question */
.factbar {
  position: sticky;
  top: var(--top);
  background: var(--fill);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  margin: 0 0 var(--gap-md);
  font-size: 13px;
  color: var(--ink-soft);
  z-index: 3;
}
.factbar b { color: var(--ink); font-weight: 620; }

/* actions with a status mark in the margin.
   ✓ done · → carried into another week · ○ not started yet.
   Text glyphs in the system font — no icon pack, nothing imported.
   Status belongs in the margin, not at the end of a sentence: the point of the
   list is to see what happened at a glance, not to read five lines to find out. */

.marklist { list-style: none; margin: 0 0 var(--gap-md); padding: 0; }
.marklist li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 17px 18px;
  margin: 0 0 var(--gap-sm);
  background: var(--paper);
  border-radius: var(--r);
  font-size: 15px;
}
.marklist li:last-child { margin-bottom: 0; }

/* the status mark is a circle now: filled black when done, outlined when not.
   The glyph itself stays in the markup (✓ → ○) — done renders white on black,
   the others render as an empty ring. */
.marklist .m {
  width: 22px; height: 22px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  border: 2px solid var(--ink);
  color: transparent;
  font-size: 12px;
  line-height: 1;
  margin-top: 0;
}
.marklist .m-done { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.marklist .m-carry { color: var(--ink-faint); border-color: var(--line-mid); border-style: dashed; }
.marklist .m-todo { color: transparent; }

/* a done action is struck through at half strength — the text fades, the
   filled circle stays full ink. A carried one is only quieter, never struck. */
.marklist li:has(.m-done) > :not(.m) { opacity: 0.5; text-decoration: line-through; }
/* the quiet line under a done action is not struck — an atomic inline escapes
   the line-through that propagates from the row */
.marklist li:has(.m-done) .when,
.marklist li:has(.m-done) .sub { display: inline-block; width: 100%; text-decoration: none; }
.marklist li.carried { color: var(--ink-soft); }
.marklist .when { display: block; font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; }

/* an idea kept during the week, with the action it came from */
.idea {
  border-left: 2px solid var(--ink);
  padding: 3px 0 3px 13px;
  margin: 0 0 var(--gap-md);
  font-size: 15px;
}
.idea .from { display: block; font-size: 12.5px; color: var(--ink-faint); margin-top: 5px; }

/* A sub-action inside a block is never a full-width button — that weight belongs
   to the screen's own action in the pinned bar, and two of them compete. */
.form-actions { display: flex; gap: var(--gap-xs); margin: var(--gap-sm) 0 0; }
.ctl-primary { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 600; }

.link-btn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  text-decoration: underline;
  cursor: pointer;
}

.idea-added {
  border-left: 2px solid var(--ink);
  padding: 3px 0 3px 14px;
  margin: var(--gap-sm) 0 0;
  font-size: 14.5px;
}
.idea-added .added-where { display: block; font-weight: 620; margin-bottom: 4px; }

/* once it is in the plan the control becomes a state, so it cannot fire twice */
.ctl.idea-done { color: var(--ink-faint); cursor: default; }

/* the same class must not render two ways: a <button> must match the <span> */
button.ctl { font: inherit; font-size: 13px; background: var(--fill-mid); }
button.ctl.ctl-on, button.ctl.ctl-primary { background: var(--ink); }
button.pick { font: inherit; }
button.pick.pick-on { background: var(--ink); }

/* an assistant proposal she can accept or ignore */
.suggestion {
  border: 1px solid var(--line-mid);
  border-radius: var(--r-sm);
  padding: 15px;
  margin: 0 0 var(--gap-sm);
}
.suggestion .what { display: block; font-size: 15px; margin-bottom: 4px; }
.suggestion .why { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 11px; }

/* ---------- the plan tab ---------- */
/* Three levels: the acts, one week, one action. Nothing opens until she asks
   for it — a twelve-week plan shown all at once was the screen this replaced. */

.act-head { display: flex; align-items: baseline; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.015em; }
/* an open act is told by its expanded body — the card itself does not change */
.act-body { margin-top: var(--gap-card); }
.chev { flex: none; font-size: 15px; color: var(--ink-faint); }
.act-head .chev { margin-left: auto; }

/* glyphs painted as icons by interactions.js — Lucide outlines on the same
   spec as the tab bar. The element keeps its layout role; only the drawing
   inside changed. */
.chev svg { width: 16px; height: 16px; display: block; }
.m svg { width: 13px; height: 13px; display: block; }
.g svg { width: 13px; height: 13px; display: inline-block; vertical-align: -2px; }

/* a week row inside an open act */
/* No rule above the first week: the act's own border already groups these, and
   a ruled list inside a bordered box draws the same boundary twice. */
.week {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  font-size: 14.5px;
  color: var(--ink);
  text-decoration: none;
}
.week + .week { border-top: 1px solid var(--line); }
.week .wk-n { flex: 1; }
.week .wk-c { color: var(--ink-faint); font-size: 12.5px; white-space: nowrap; }
.week .chev { color: var(--line-strong); }
.week-now .wk-n { font-weight: 640; }

/* an action row that opens the action itself.
   The colour is inherited, never set: a carried row is quieter than a finished
   one, and setting --ink here would silently defeat .carried. */
.marklist .go {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex: 1;
  color: inherit;
  text-decoration: none;
}
.marklist .go-body { flex: 1; }
.marklist .go::after {
  content: "";
  width: 15px; height: 15px;
  flex: none;
  align-self: center;
  background-color: var(--line-strong);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 18 6-6-6-6'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 18 6-6-6-6'/></svg>") center / contain no-repeat;
}

/* the quiet sub-line under an action: its direction, and what happened to it */
.marklist .sub { display: block; font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; }

/* execution by direction — the name, then the bar, then the count.
   Never a left/right split: "Rates and negotiation" wraps at 375px. */
.split-row { margin: 0 0 var(--gap-card); }
.split-row .nm { font-size: 14.5px; margin: 0 0 var(--gap-xs); }
.split-row .n { font-size: 12.5px; color: var(--ink-faint); margin: 0; }

/* an action's three attributes as one quiet line, the direction as its own tag —
   the token the plan already uses for a direction everywhere else */
.meta-line {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ink-faint);
  margin: 0 0 var(--gap-md);
}

/* the main gap, drawn as the two halves the diagnostic named.
   Two equal boxes on purpose: emphasising one reads as a chosen option, and
   nothing here is choosable. Which half this action works on is said in words. */
.halves { margin: 0 0 var(--gap-md); }
.half {
  background: var(--paper);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 15px 16px;
  margin: 0 0 var(--gap-sm);
}
.half:last-child { margin-bottom: 0; }

/* The icon tile centres against the text. Both rules below are scoped to
   .card-b on purpose: a bare `.half span` (0,1,1) also matched .tile and .ico
   and beat their own `display: grid` / `inline-flex` (0,1,0), which flattened
   the tile to a block and dropped the icon into its top-left corner. */
.half.card-row { align-items: center; }
.half .card-b b { display: block; font-size: 15px; font-weight: 620; }
.half .card-b span { display: block; font-size: 12.5px; color: var(--ink-faint); margin-top: 5px; }

/* ---------- an explanation folded behind a marker ---------- */
/* Standing explanatory text is what makes a screen long. This keeps the words
   and takes back the height: nothing opens until she asks.
   The label becomes a flex row so the marker sits on the same level as the
   words — no vertical-align nudging, and the line height is untouched.
   A plain letter in a circle, not ⓘ or ℹ: those have emoji twins that iOS
   Safari renders in colour. */

.section-label.has-info { display: flex; align-items: center; gap: var(--gap-xs); }

/* the marker is the Lucide info icon, painted by interactions.js */
.info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: none;
  border: 0;
  background: none;
  padding: 0;
  color: var(--ink-faint);
  cursor: pointer;
}
.info svg { width: 100%; height: 100%; display: block; }

.info[aria-expanded="true"] { color: var(--ink); }
.info-text { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 var(--gap-md); }

/* a glyph inside a control label — never on its own, always beside its word */
.ctl .g { margin-right: 6px; color: var(--ink-soft); }
/* a glyph in a full-size button needs its own air; the colour is inherited so
   it works on both the white and the ink variant */
.btn .g { margin-right: 8px; }

/* fine print that explains the control above it. A .ctl is inline-block, so the
   paragraph after it starts on a new line with no space at all and reads as the
   control's second label. */
.ctl + .fine { margin-top: var(--gap-md); }

/* ---------- the insights tab ---------- */
/* Conclusions is the tab; Ideas is one level down. The row carries its count so
   the queue surfaces without being asked for — an idea kept on Tuesday is lost
   if it is only findable below a scrolling record. */

/* the one dark card on the tab — the queue that must surface */
.jump {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  background: var(--ink);
  border-radius: var(--r);
  padding: 18px 20px;
  margin: 0 0 var(--gap-lg);
  color: var(--paper);
  text-decoration: none;
}
.jump .jp-n { grid-column: 1; font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
.jump .jp-c { grid-column: 1; font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 2px; }
.jump .chev { grid-column: 2; grid-row: 1 / 3; color: rgba(255,255,255,0.6); }

/* The record, grouped by act. An act conclusion is the PARENT of the weeks that
   produced it, not a peer that merely matters more — act 1 is weeks 1-4, and it
   is written at the monthly review once those four weekly conclusions exist.
   The thread this replaced gave both the same size, weight and colour, so an act
   read as a week that happened to sort first. See the stage 5 spec, "The act
   holds its weeks". */

/* the mark above a conclusion, naming the review it came from */
.mk {
  display: block;
  font-size: 11px;
  font-weight: 660;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin: 0 0 4px;
}

/* the act conclusion — the largest text in the record, and the one main thing.
   The act and its weeks read as one white card: the mark opens it, the
   conclusion is its headline, the weeks close it. Three siblings, one card —
   drawn in CSS so the markup stays untouched. */
.screen > .mk {
  background: var(--paper);
  border-radius: var(--r) var(--r) 0 0;
  padding: 20px 20px 0;
  margin: 0;
}
.act-c {
  background: var(--paper);
  font-size: 19px;
  line-height: 1.32;
  font-weight: 700;
  letter-spacing: -0.015em;
  padding: 6px 20px 4px;
  margin: 0;
}

/* the weeks that add up to it — rows inside the card, the mark as a quiet
   left column */
.weeks {
  list-style: none;
  background: var(--paper);
  border-radius: 0 0 var(--r) var(--r);
  margin: 0 0 var(--gap-lg);
  padding: 4px 20px 12px;
}
.weeks li { display: flex; gap: 14px; padding: 14px 0; }
.weeks li + li { border-top: 1px solid var(--line); }
.weeks .mk { flex: none; width: 60px; margin: 2px 0 0; }
.weeks .tx { flex: 1; font-size: 14px; color: var(--ink-soft); }

/* the diagnostic entries. Neither act- nor week-shaped, and the section label
   already contains them, so they carry no rule and no dots. */
.entries { list-style: none; background: var(--paper); border-radius: var(--r); margin: 0 0 var(--gap-lg); padding: 6px 20px; }
.entries li { padding: 14px 0; }
.entries li + li { border-top: 1px solid var(--line); }
.entries .tx { font-size: 15px; }

/* her own words under a diagnostic conclusion */
.said { display: block; font-size: 12.5px; color: var(--ink-faint); margin-top: 5px; }

/* where a kept idea ended up. The source line above it says where it came from;
   this says where it went, and the pair is why a used idea stays in the list. */
.idea .went { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 5px; }

/* ---------- illustration placeholders (2nd handoff) ---------- */
/* Empty white containers where illustrations and the profile scheme will
   live. Clearly marked, deliberately empty — filled later. */

.illus {
  display: grid;
  place-items: center;
  background: var(--paper);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  color: var(--ink-faint);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0 0 var(--gap-md);
}
.illus-96 { height: 96px; }
.illus-140 { height: 140px; }
.illus-180 { height: 180px; }
.illus-340 { height: 340px; }

/* the full profile: one white card per axis, the movement line set off by a
   hairline (2nd handoff) */
.entries-cards { background: none; border-radius: 0; padding: 0; box-shadow: none; }
.entries-cards li {
  background: var(--paper);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  margin: 0 0 var(--gap-sm);
}
.entries-cards li + li { border-top: 0; }
.entries-cards .mv-l-now {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 10px;
  color: var(--ink-soft);
}

/* ---------- dismissible banner ---------- */
/* A promotion, not a gate: one card, one action, and a way to close it.
   No storage — reload brings it back, which is right for a prototype. */

.banner { position: relative; padding-right: 44px; }
.banner .row-actions { margin-top: 10px; }
.banner-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 28px; height: 28px;
  border: 0;
  background: none;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--ink-faint);
  cursor: pointer;
}
.banner-close svg { width: 15px; height: 15px; }

/* ---------- toggle switch ---------- */
/* A reminder is on or off — a switch says it without a word. */

.switch {
  width: 46px; height: 28px;
  flex: none;
  border: 0;
  padding: 2px;
  border-radius: var(--r-pill);
  background: var(--fill-dark);
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background-color .2s ease;
}
.switch i {
  width: 24px; height: 24px;
  border-radius: var(--r-pill);
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  transition: transform .2s ease;
}
.switch-on { background: var(--ink); }
.switch-on i { transform: translateX(18px); }

/* a row that ends in a switch: words left, switch right */
.switch-rows li { display: flex; align-items: center; gap: 12px; }
.switch-rows li > span:first-child { flex: 1; }

/* ---------- icon primitives ---------- */
/* Painted by interactions.js from data-i. A .tile is the icon's seat inside a
   card row; an .iconbtn is a round tappable icon in a header. */

.ico { display: inline-flex; width: 20px; height: 20px; flex: none; }
.ico svg { width: 100%; height: 100%; display: block; }

.tile {
  width: 44px; height: 44px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--fill-mid);
  color: var(--ink);
  display: grid;
  place-items: center;
}

.iconbtn {
  width: 42px; height: 42px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--fill-mid);
  color: var(--ink);
  display: grid;
  place-items: center;
  text-decoration: none;
}

/* a page head with the title on the left and one round icon on the right */
.headrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}
.headrow h1 { margin: 0; }

/* the quiet more-marker on a card — source and date fold behind it */
.more {
  width: 28px; height: 28px;
  flex: none;
  border: 0;
  background: none;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--ink-faint);
  cursor: pointer;
}
.more .ico { width: 18px; height: 18px; }

/* a long idea clamps to two lines; Show more opens it */
.idea-card .card-tx {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.idea-card .card-tx.tx-open { display: block; overflow: visible; }
.tx-more { display: inline-block; margin: 4px 0 0; color: var(--ink-soft); }

/* week options are quiet text, never pills — pills are the controls, and two
   pill rows on one card read as the same level */
.wk-row { display: flex; gap: 18px; margin: 10px 0 0; }
.wk-opt {
  border: 0;
  background: none;
  padding: 4px 0;
  font: inherit;
  font-size: 13px;
  color: var(--ink-faint);
  cursor: pointer;
}
.wk-opt-on { color: var(--ink); font-weight: 700; }

/* an idea card: the row on top, controls at full card width below —
   never squeezed into the text column */
.idea-card > .row-actions { margin: 12px 0 0; }
.idea-card .wk-row { margin: 10px 0 0; }
.idea-card .idea-added { margin: 12px 0 0; }

/* a chevron inside a chip control sits in the text line */
.ctl .chev { display: inline-flex; width: 14px; height: 14px; vertical-align: -2px; margin-left: 2px; }
.ctl .chev svg { width: 100%; height: 100%; }

/* a card whose content sits beside an icon tile */
.card-row { display: flex; align-items: flex-start; gap: 14px; }
.card-b { flex: 1; min-width: 0; }
.card-tx { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; }
.card-b .from, .card-b .went { display: block; font-size: 12.5px; color: var(--ink-faint); margin-top: 5px; }
.card-b .went { color: var(--ink-soft); }

/* ---------- the me tab ---------- */
/* A menu row: the destination, one line of Maya's actual state, a chevron.
   .jump is the same shape but is the Insights one-off with a right-aligned
   count and a rule above and below; .week belongs to the Plan. Renaming either
   would touch two other stages for nothing. Rules between rows only. */

.mn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 20px;
  margin: 0 0 var(--gap-sm);
  background: var(--paper);
  border-radius: var(--r);
  color: var(--ink);
  text-decoration: none;
}
.mn .mn-b { flex: 1; }
.mn .mn-n { display: block; font-size: 16px; font-weight: 600; }
.mn .mn-s { display: block; font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; }
.mn .chev { color: var(--line-strong); }

/* a row that leads out of the app carries no chevron — a chevron on something
   that cannot open is a control that does not respond */
.mn-out .mn-n { font-weight: 500; }

/* a child list nested inside an .entries item, rather than closing a section:
   Finance inside the goal, Reflection inside the reviews. The parent card
   already draws the surface, so the nested list draws nothing of its own. */
.entries .weeks { background: none; border-radius: 0; padding: 0; margin: var(--gap-card) 0 0; }
/* its labels are phrases, not WEEK-N — they stack, never squeeze into the
   week column */
.entries .weeks li { display: block; }
.entries .weeks .mk { width: auto; margin: 0 0 2px; }

/* ---------- movement along an axis ---------- */
/* Where she was on 11 August, and where she is now. NOT a score: there is no
   scale, no maximum and no end marker, and every axis starts its August mark at
   the same place, so the only thing that varies is the distance travelled.
   Comparing one axis with another is meaningless by construction — which is the
   point, because 01-welcome.html promises we do not rate her talent. */

/* one card holds every axis; each axis is a name, one short value, and its
   track. The track carries the story — no sentences under it. */
.mvs {
  background: var(--paper);
  border-radius: var(--r);
  padding: 6px 20px;
  margin: 0 0 var(--gap-md);
  box-shadow: var(--shadow);
}
.mv { padding: 15px 0 6px; margin: 0; }
.mv-n {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--gap-xs);
}
.mv-n .mv-v { font-weight: 500; font-size: 14.5px; color: var(--ink-faint); text-align: right; }

/* The black line runs from the August mark to the now mark. The grey remainder
   behind it is the track, not a target: it has no end marker and no maximum,
   and every axis starts its August mark at the same place. (The earlier rule
   drew no tail at all; the 2026-08-11 handoff draws the full track, and the
   no-score reading is carried by the absence of any end mark.) The line's
   length comes from a width utility, so there are no inline styles. */

.mv-track { display: flex; align-items: center; height: 16px; margin: 0 0 var(--gap-sm); }
.mv-track i { flex: none; display: block; }

/* the grey remainder after the now-mark — the handoff draws the full track,
   so the distance travelled reads against the line it sits on */
.mv-track::after { content: ""; flex: 1; height: 2px; border-radius: 100px; background: var(--fill-mid); }

.mv-was, .mv-now, .mv-still {
  width: 10px; height: 10px;
  border-radius: 100px;
  box-sizing: border-box;
  z-index: 1;
}
.mv-was { border: 2px solid var(--ink); background: var(--paper); }
.mv-now { border: 2px solid var(--ink); background: var(--ink); }
/* both marks in one place: it has not moved since August */
.mv-still { border: 3.5px solid var(--ink); background: var(--paper); }

.mv-line { height: 2px; background: var(--ink); margin: 0 -1px; }

.mv-l { display: block; font-size: 13.5px; color: var(--ink-faint); margin: 0 0 3px; }
.mv-l b {
  font-size: 11px;
  font-weight: 660;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-right: 7px;
}
.mv-l-now { color: var(--ink); }

/* the same line used inside a paragraph of the long read, where it needs to
   separate from the sentence above rather than sit under a mark */
.tx .mv-l { margin-top: var(--gap-xs); }

/* a quiet way out at the foot of a tab screen, where there is no action bar */
.foot-link {
  display: block;
  text-align: center;
  margin: var(--gap-lg) 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}

/* ---------- index.html — the screen map ---------- */

.map { max-width: 780px; margin: 0 auto; padding: 40px 24px 72px; background: var(--paper); min-height: 100vh; }
.map header { border-bottom: 1px solid var(--ink); padding-bottom: 20px; margin-bottom: 8px; }
.map h2 { margin: 38px 0 4px; padding-top: 20px; border-top: 1px solid var(--line); }
.map .source { color: var(--ink-faint); font-size: 13.5px; margin: 0 0 var(--gap-card); }
.map ol { list-style: none; margin: 0; padding: 0; }
.map ol li { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.map ol li a { flex: 1; }
.map .file { color: var(--ink-faint); font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.map .state {
  font-size: 10.5px;
  font-weight: 620;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--fill);
  border-radius: 100px;
  padding: 4px 10px;
  white-space: nowrap;
}
.map .state-built { background: var(--ink); color: var(--paper); }