/* ==========================================================================
   Babka — design system, translated from the Babka.dc.html canvas.

   Three typefaces doing three jobs, and they do not trade places:
     Newsreader     the coach's prose. Anything Babka says about you.
     Instrument Sans  interface labels and task titles.
     IBM Plex Mono    every number, every piece of metadata.

   Colour is almost entirely ink-on-paper. The single rust accent means
   "this is the thing that is wrong" and is never used for decoration.
   ========================================================================== */

:root {
  /* Dark is a preference now, not a device (#161).

     One token list rather than a duplicated dark block, using light-dark():
     `color-scheme` decides which half of each pair applies, so an explicit
     choice is one line rather than forty that can drift apart from the light
     ones. The board used to be the only dark screen, on purpose — see the note
     on .board for what says "a different kind of looking" now that dark is
     something a founder chose. */
  color-scheme: light dark;

  --serif: Newsreader, Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", system-ui, Helvetica, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --canvas:      light-dark(oklch(0.94 0.004 85),  oklch(0.15 0.008 70));
  --surface:     light-dark(oklch(0.985 0.005 85), oklch(0.19 0.008 70));
  --ink:         light-dark(oklch(0.24 0.012 65),  oklch(0.93 0.008 85));
  --ink-soft:    light-dark(oklch(0.30 0.012 65),  oklch(0.86 0.008 85));
  --prose:       light-dark(oklch(0.42 0.012 65),  oklch(0.78 0.008 85));
  --prose-soft:  light-dark(oklch(0.45 0.012 65),  oklch(0.70 0.01 70));
  --prose-faint: light-dark(oklch(0.52 0.012 65),  oklch(0.62 0.01 70));
  --muted:       light-dark(oklch(0.48 0.01 70),   oklch(0.62 0.01 70));
  --muted-2:     light-dark(oklch(0.50 0.01 70),   oklch(0.66 0.01 70));
  --muted-3:     light-dark(oklch(0.52 0.01 70),   oklch(0.68 0.01 70));
  --placeholder: light-dark(oklch(0.72 0.008 70),  oklch(0.50 0.008 70));
  --label:       light-dark(oklch(0.44 0.01 70),   oklch(0.66 0.01 70));
  --rule:        light-dark(oklch(0.90 0.008 80),  oklch(0.28 0.008 70));
  --rule-soft:   light-dark(oklch(0.93 0.008 80),  oklch(0.24 0.008 70));
  --border:      light-dark(oklch(0.87 0.008 80),  oklch(0.30 0.008 70));
  --border-2:    light-dark(oklch(0.88 0.008 80),  oklch(0.36 0.008 70));
  --accent:      light-dark(oklch(0.52 0.13 45),   oklch(0.68 0.13 45));
  --accent-ink:  light-dark(oklch(0.44 0.13 45),   oklch(0.68 0.13 45));
  --accent-hover: light-dark(oklch(0.42 0.14 45),  oklch(0.78 0.12 45));

  /* Values that used to be written into the rules that needed them. Left as
     their own tokens rather than folded into the ones above, so the light
     appearance is byte-for-byte what it was before this change. */
  --read:        light-dark(oklch(0.26 0.012 65),  oklch(0.91 0.008 85));
  --strike:      light-dark(oklch(0.78 0.01 70),   oklch(0.42 0.008 70));
  --sub:         light-dark(oklch(0.36 0.012 65),  oklch(0.82 0.008 85));
  --meta:        light-dark(oklch(0.38 0.012 65),  oklch(0.76 0.008 85));
  --drop:        light-dark(oklch(0.88 0.012 80),  oklch(0.26 0.012 65));
  --cooling:     light-dark(oklch(0.52 0.008 75),  oklch(0.66 0.008 75));
  --kill:        light-dark(oklch(0.50 0.008 75),  oklch(0.62 0.008 75));
  --kill-border: light-dark(oklch(0.80 0.008 70),  oklch(0.34 0.008 70));
  --history:     light-dark(oklch(0.75 0.01 75),   oklch(0.34 0.01 75));
  --dot:         light-dark(oklch(0.70 0.01 70),   oklch(0.46 0.01 70));

  /* The rot ramp reads fresh → spent. It has to keep that direction against
     either background, so it is not simply lightness-flipped. */
  --rot-fresh:   light-dark(oklch(0.34 0.008 70),  oklch(0.46 0.008 70));
  --rot-warm:    light-dark(oklch(0.44 0.04 58),   oklch(0.58 0.06 58));
  --rot-hot:     light-dark(oklch(0.55 0.10 50),   oklch(0.66 0.12 50));
  --rot-spent:   light-dark(oklch(0.60 0.13 45),   oklch(0.72 0.15 45));
}

/* An explicit choice is one property. Everything above follows it.

   Not scoped to :root, deliberately. color-scheme inherits and light-dark()
   resolves at the point of use, so any subtree can be themed by stamping this
   on a wrapper — which is what lets the design canvas put a light and a dark
   artboard of the same screen side by side, and what a component preview needs.
   In the application itself only <html> ever carries it. */
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"]  { color-scheme: dark; }

/* The operator's side runs dark whatever the founder chose. It is a different
   application looking at the same data, and it should not be mistakable for the
   one customers use. Twenty declarations became one. */
.theme-dark { color-scheme: dark; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

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

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Hidden from sight, still reachable by keyboard and screen reader. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* The small uppercase mono label that titles nearly every region. */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
}
.eyebrow--sm { font-size: 11px; }
.eyebrow--faint { color: var(--muted-2); }

/* A label that titles a region has to be readable at arm's length or it is
   just texture. Nouns stay quiet mono; the qualification questions are the
   content of their block, so they are set as questions, in ink. */
.aside-block > .eyebrow { display: block; color: var(--ink-soft); }
.aside-block:has(.signer) > .eyebrow {
  font-family: var(--serif); font-size: 20px; line-height: 1.3;
  letter-spacing: -0.012em; text-transform: none; color: var(--ink);
  max-width: 26ch; margin-bottom: 4px; text-wrap: pretty;
}

/* Babka's voice. Serif, generous measure, never used for UI chrome. */
.prose {
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--prose);
  text-wrap: pretty;
  margin: 0;
  max-width: 62ch;
}
.prose--lead { font-size: 29px; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); max-width: 660px; }
.prose--read { font-size: 18px; line-height: 1.6; color: var(--read); }
.prose--sm { font-size: 15.5px; }

.accent { color: var(--accent-ink); }

/* Ghost buttons: a hairline box and mono text. No fills anywhere. */
.btn {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--label);
  border: 1px solid var(--border);
  background: none;
  padding: 4px 8px;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { border-color: var(--muted); color: var(--ink); }
.btn--quiet { border-color: var(--rule); }
/* There is deliberately no accent variant. A button that shouts is the app
   deciding for you which of the things on the page matters, and it was wrong
   about that often enough to be worth removing: the accent sat on "Mark lost"
   on two different pages, so the loudest control on a deal was the one that
   killed it. What is urgent is said in the sentence above the button — the
   coach writes those words, and they carry it. */
/* Selected, not urgent. The usage screen's time windows are a set of choices
   with one of them on, which is the only thing the accent was ever really
   doing here. */
.btn--on { border-color: var(--muted); color: var(--ink); }
/* The action a form exists for. This was `padding: 5px 9px` against the base
   button's `4px 8px` — one pixel, at the same 11px mono — so "Start" at the end
   of nine setup questions rendered exactly like "Sign out" in the topbar, and
   every form in the product ended in a control nothing pointed at (#247, #248). */
.btn--lg { font-size: 13px; padding: 10px 18px; letter-spacing: 0.01em; }
.btn--lg.btn--quiet { border-color: var(--border); color: var(--muted-2); }
.btn--lg.btn--quiet:hover { color: var(--ink); border-color: var(--muted); }

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

.screen {
  max-width: 1360px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--surface);
  color: var(--ink);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

/* The measure that suits prose does not suit seven columns side by side, so the
   board opts out rather than every other screen giving up its margins. Must come
   after .screen — same specificity, so order decides it. */
.screen--wide { max-width: none; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 40px;
  border-bottom: 1px solid var(--rule);
}
.topbar__left { display: flex; align-items: baseline; gap: 28px; }
.wordmark {
  font-family: var(--mono); font-size: 13px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
  text-decoration: none;
}
/* It is a link on the signed-out screens now, and a link nobody can tell is one
   is not a way out (#111). */
a.wordmark:hover { color: var(--accent); }
.nav { display: flex; gap: 20px; font-size: 14px; }
.nav a { color: var(--muted); }
.nav a:hover { color: var(--ink); }
.nav a.is-current {
  color: var(--ink); font-weight: 500;
  border-bottom: 2px solid var(--accent); padding-bottom: 2px;
}
.topbar__right {
  /* Clear of the last nav item. A long status ("4 people · 24 with nobody on
     them") was touching Settings — the narrow-viewport rule below resets this
     block's layout, so nothing there changes (#258). */
  display: flex; align-items: center; gap: 14px; margin-left: 32px;
  font-family: var(--mono); font-size: 12px; color: var(--muted);
}

/* Grouped forms (#257). A flat column of twelve fields — mono labels, hairline
   inputs and grey hints all in one texture — meant nothing separated a field
   from its label from the guidance about it.
   Scoped: every other form in the product keeps hairline underlines. */
.formx { display: block; margin-top: 26px; }
.formx__group {
  display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 44px;
  padding: 28px 0; border-top: 1px solid var(--rule);
}
.formx__group:first-of-type { border-top: none; padding-top: 10px; }
/* lead-kind hides the buyer-only groups by setting el.hidden. An author
   `display` rule beats the user agent's [hidden] { display: none } whatever the
   specificity, so without this the attribute is set and nothing moves — which
   is how the connector form would have gone on asking for an amount. */
.formx__group[hidden] { display: none; }
/* The left column is why, in one sentence. Everything that used to be a
   .form__hint under a field lives here; anything that was really an example is
   the input's placeholder now. */
.formx__legend { border-left: 2px solid var(--rule); padding-left: 18px; }
.formx__legend p { margin: 8px 0 0; }
.formx__fields { display: flex; flex-direction: column; gap: 18px; }
.formx__fields .form__row { gap: 18px; }
.formx .form__label { gap: 8px; letter-spacing: 0.1em; }
.formx .form__input {
  background: var(--surface); border: 1px solid var(--border);
  padding: 10px 12px; font-size: 15px;
}
.formx .form__input:focus { outline: none; border-color: var(--accent); }
.formx .form__hint { margin-top: 2px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.formx__actions {
  display: flex; align-items: center; gap: 12px;
  margin-top: 4px; padding-top: 24px; border-top: 1px solid var(--border-2);
}
/* The status line, pushed right: what is still missing from this record. */
.formx__actions .prose { margin: 0 0 0 auto; }
@media (max-width: 900px) {
  .formx__group { grid-template-columns: 1fr; gap: 18px; }
}

/* Add a contact without leaving the deal (#256). Native dialog, like the rating
   one — focus trapping and Escape come free, and there is no second modal
   pattern in the product. */
.cmodal {
  border: 1px solid var(--border); border-top: 3px solid var(--accent);
  background: var(--surface); color: var(--ink);
  padding: 24px 28px 26px; width: min(440px, calc(100vw - 40px));
}
.cmodal::backdrop { background: color-mix(in oklch, var(--ink) 40%, transparent); }
.cmodal .form { margin-top: 16px; }
.cmodal__x {
  border: none; background: none; cursor: pointer; padding: 0;
  font-family: var(--mono); font-size: 15px; line-height: 1; color: var(--muted);
}
.cmodal__x:hover { color: var(--ink); }

/* --- the three things you can write on a channel (#255) -------------------- */
/* All three sat below a long run of prose and were never seen, on the one page
   whose whole argument is that asking is the only move that is yours. */
.move {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--rule); padding: 20px 24px 22px; margin-top: 14px;
}
/* The ask is the move the product exists to push, so it is open and it is the
   one with the accent. The accent is on the card, not on a control in it. */
.move--open { border-left-color: var(--accent); }
.move__head { display: flex; align-items: baseline; gap: 12px; }
/* margin-left:auto rather than justify-content:space-between —
   .paste__toggle::before renders the "+" as a flex item, and space-between
   strands the title in the middle of the row. */
.move__hint { margin-left: auto; }
.move > .form, .move > .paste { margin-top: 14px; }
/* The card is already a fenced block, so the submit does not need the standing
   margin that separates a full-page form from what follows it. */
.move .form__actions { margin-top: 6px; }
summary.move__head { cursor: pointer; list-style: none; }
summary.move__head::-webkit-details-marker { display: none; }

/* --- People, and the loose ends behind it (#253, #254) --------------------- */
/* Full bleed with its own padding, rather than .form-page: this is a table and
   a table needs the width. */
.ppl { padding: 40px 44px 52px; }
.ppl__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ppl__title { margin: 0; font-family: var(--serif); font-size: 38px; font-weight: 400; letter-spacing: -0.02em; }
.ppl__tally { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.ppl-find { display: flex; gap: 10px; margin-top: 24px; }
.ppl-find__input {
  flex: 1; background: var(--surface); border: 1px solid var(--border);
  padding: 13px 16px; font: inherit; font-size: 15px; color: var(--ink);
}
.ppl-find__input::placeholder { color: var(--placeholder); }
.ppl-find__input:focus { outline: none; border-color: var(--muted); }
.ppl-scopes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ppl-scope {
  display: flex; gap: 8px; align-items: baseline; border: 1px solid var(--border-2);
  padding: 5px 10px; text-decoration: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.ppl-scope:hover { border-color: var(--muted); color: var(--ink); }
/* Selected, not urgent — the same neutral treatment as .btn--on. A scope chip
   is a choice with one of them on, and no button in this product shouts. */
.ppl-scope.is-on { border-color: var(--muted); color: var(--ink); }
.ppl-scope__n { font-variant-numeric: tabular-nums; color: var(--muted-3); }
.ppl-scope.is-on .ppl-scope__n { color: var(--ink); }
.ppl-table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.ppl-table th {
  text-align: left; font-family: var(--mono); font-size: 10.5px; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--label);
  padding: 0 14px 8px 0; border-bottom: 1px solid var(--border-2);
}
.ppl-table td {
  padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule-soft);
  font-size: 14px; vertical-align: baseline;
}
.ppl-table tr:hover td { background: var(--surface); }
/* The accent marks the row, not a control on it: what is missing is the thing
   worth seeing down a long list. */
.ppl-table tr.is-flagged td:first-child { box-shadow: inset 2px 0 var(--accent); padding-left: 14px; }
.ppl-table td:last-child, .ppl-table th:last-child { padding-right: 0; text-align: right; }
.ppl-sub { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--muted-3); margin-top: 3px; }
.ppl-flag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--accent-ink); }
.ppl-none { font-family: var(--mono); font-size: 11.5px; color: var(--muted-3); }
.ppl-inline { display: flex; gap: 8px; }
.ppl-inline .form__input { padding: 7px 10px; font-size: 13px; }

.lend { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; padding: 26px 0 30px; border-bottom: 1px solid var(--rule); }
.lend:last-of-type { border-bottom: none; }
.lend__rule { border-left: 2px solid var(--rule); padding-left: 18px; }
.lend--open .lend__rule { border-left-color: var(--accent); }
.lend__count { display: block; margin-top: 8px; font-family: var(--mono); font-size: 26px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.lend--open .lend__count { color: var(--accent-ink); }
.lend__what { font-family: var(--serif); font-size: 19px; line-height: 1.35; margin: 6px 0 0; }
.lend__rows { display: flex; flex-direction: column; }
.lend__row {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 24px;
  align-items: center; padding: 13px 0; border-top: 1px solid var(--rule-soft);
}
.lend__row:first-child { border-top: none; }
.lend__row:hover { background: var(--surface); }
.lend__who { font-size: 14.5px; }
.lend__why { font-family: var(--mono); font-size: 11.5px; color: var(--muted-3); }
.lend__do { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.lend__do .form__input { min-width: 190px; }
.lend__strip {
  display: flex; flex-wrap: wrap; gap: 26px; margin-top: 22px; padding: 16px 0;
  border-top: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2);
}
.lend__stat { display: flex; flex-direction: column; gap: 4px; }
.lend__stat b { font-family: var(--mono); font-size: 19px; font-weight: 400; font-variant-numeric: tabular-nums; }

/* --- sign in ------------------------------------------------------------- */

.auth { max-width: 380px; margin: 0 auto; padding: 96px 24px; display: flex; flex-direction: column; gap: 6px; }
.auth__title { font-family: var(--serif); font-size: 34px; font-weight: 400; letter-spacing: -0.02em; margin: 18px 0 22px; }
.auth__form { display: flex; flex-direction: column; gap: 18px; }
.auth__label { display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--label); }
.auth__input {
  font-family: var(--sans); font-size: 16px; color: var(--ink);
  border: none; border-bottom: 1px solid var(--border); background: none; padding: 6px 0;
}
.auth__input:focus { outline: none; border-bottom-color: var(--accent); }
.auth__alert { font-family: var(--serif); font-size: 16px; color: var(--accent-ink); margin: 0; }
.auth__notice { font-family: var(--serif); font-size: 16px; color: var(--prose); margin: 0; }
.auth__aside { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 22px; }

/* Messages from the signed-in app. Ruled rather than boxed — it is a sentence,
   not a badge. */
.app-flash {
  padding: 12px 40px; border-bottom: 1px solid var(--rule);
  font-family: var(--serif); font-size: 16px; color: var(--ink);
  background: var(--surface);
}
.app-flash--alert { color: var(--accent-ink); border-bottom-color: var(--accent); }

/* A win, marked. Accent-ruled rather than confetti — the design does not have
   a celebratory register and inventing one would make everything else read as
   marketing. */
.celebration {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 22px 40px; background: var(--surface);
  border-bottom: 1px solid var(--rule); border-left: 3px solid var(--accent);
}
.celebration__body { display: flex; flex-direction: column; gap: 6px; }
.celebration__eyebrow { color: var(--accent-ink); }
.celebration__headline {
  font-family: var(--serif); font-size: 26px; line-height: 1.25;
  letter-spacing: -0.015em; color: var(--ink); margin: 2px 0 0;
}
.celebration__brag {
  font-family: var(--sans); font-size: 14.5px; line-height: 1.5;
  color: var(--ink-soft); margin: 6px 0 0; padding-left: 14px;
  border-left: 2px solid var(--border); max-width: 60ch;
}
@media (max-width: 720px) { .celebration { padding: 18px 20px; flex-direction: column; } }

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

.today { display: grid; grid-template-columns: 1fr 300px; flex: 1; }
.today__main { padding: 40px 48px 48px; border-right: 1px solid var(--rule); }
.today__aside { padding: 40px 28px; }

/* The stat strip. Numbers only, ruled top and bottom, no cards. */
.stats {
  display: flex; flex-wrap: wrap; gap: 44px;
  margin: 32px 0 40px; padding: 14px 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
}
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat__label {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2);
}
.stat__value { font-size: 17px; font-variant-numeric: tabular-nums; }
.stat__value--alarm { color: var(--accent); }
.stat--lg .stat__value { font-size: 22px; }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 6px;
}

/* --- tasks ---------------------------------------------------------------- */

.tasks { display: flex; flex-direction: column; }
.task {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 16px;
  padding: 22px 0; border-top: 1px solid var(--rule);
}
.tasks > .task:last-child { border-bottom: 1px solid var(--rule); }
.task__box {
  width: 17px; height: 17px; border: 1.5px solid var(--muted-3);
  margin-top: 4px; background: none; padding: 0; cursor: pointer;
}
.task__box:hover { border-color: var(--accent); }
.task__body { display: flex; flex-direction: column; gap: 8px; }
.task__title { font-size: 18px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink); }
/* The practical instruction. Set apart from the argument above it, and marked
   with a rule rather than a label — it is the part they act on. */
.task__how {
  margin: 2px 0 0; padding-left: 14px; border-left: 2px solid var(--border);
  font-family: var(--sans); font-size: 14.5px; line-height: 1.5;
  color: var(--ink-soft); max-width: 60ch;
}

.task__meta {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
}
.task__meta .is-strong { color: var(--ink-soft); }
.task__meta .is-alarm { color: var(--accent); }
.task__actions { display: flex; gap: 8px; align-self: start; margin-top: 2px; }
.task__boxform { display: inline; margin: 0; }

/* A finished task recedes but stays on the page — crossing it off is the
   point, and a list that empties as you work reads as if nothing happened. */
.task--done { color: var(--muted-2); }
.task--done .task__title { text-decoration: line-through; text-decoration-color: var(--strike); font-weight: 400; }
.task--done .prose { color: var(--muted-2); }
.task__box--done {
  border-color: var(--accent); color: var(--accent-ink);
  font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center;
}

/* "Left out on purpose" — a claim about what is *not* here, so it is ruled
   off rather than tucked away. */
.aside-note {
  margin-top: 26px; padding-left: 42px; border-left: 2px solid var(--rule);
}

.dropped { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; color: var(--prose-faint); }
.dropped__row { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.dropped__title {
  font-size: 15px; font-weight: 500;
  text-decoration: line-through; text-decoration-color: var(--strike);
}
.dropped__why { font-family: var(--serif); font-size: 15px; line-height: 1.5; }

/* --- pipeline summary (Today's right rail) -------------------------------- */

.summary { display: flex; flex-direction: column; margin-top: 16px; font-family: var(--mono); font-size: 12px; }
.summary__row {
  display: flex; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid var(--rule-soft);
}
.summary__row span:first-child { color: var(--label); }
.summary__row span:last-child { font-variant-numeric: tabular-nums; }

/* A URL somebody has to get out of the page: the offers in Cinnamon and a
   founder's referral link. The URL wraps and the button does not, so the button
   is pushed to its own baseline rather than left to break mid-word. */
.copyable {
  display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap; word-break: break-all;
}
.copyable__btn { flex: none; font-size: 11px; padding: 2px 9px; }

/* A prompt, dumped for reading (#226). Wraps rather than scrolls sideways —
   fifteen thousand tokens of it, and the interesting line is never the first. */
/* The thumb on something the coach wrote (#233). Quiet: it sits beside advice,
   and a loud rating widget next to a paragraph about a dying deal reads as
   though the application cares more about itself than about the deal. */
.rating { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; }
.rating__form { display: inline-flex; gap: 2px; margin: 0; }
.rating__thumb {
  display: inline-flex; align-items: center; line-height: 1;
  padding: 3px 5px; cursor: pointer;
  border: 1px solid transparent; background: none; color: var(--muted-3);
}
/* One path, mirrored, so up and down are exactly each other. The down thumb
   also nudges up a pixel: flipping it leaves the cuff sitting low against the
   text baseline it shares with the meta line. */
.thumb { width: 13px; height: 13px; display: block; }
.thumb--down { transform: scaleY(-1) translateY(1px); }
.rating__thumb:hover { color: var(--ink); border-color: var(--border); }
.rating__thumb.is-on { color: var(--accent); border-color: var(--accent); }
.rating__done {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted-3);
}
.rating__dialog {
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  padding: 26px 28px; max-width: 46ch; width: calc(100vw - 40px);
}
.rating__dialog::backdrop { background: color-mix(in oklch, var(--ink) 40%, transparent); }
.rating__dialog .form__input--area { margin-top: 14px; }

.written-by {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted-3); margin-left: 8px;
}
.written-by:hover { color: var(--accent); }

.prompt-dump {
  margin: 14px 0 0; padding: 16px; max-height: 60vh; overflow: auto;
  border: 1px solid var(--border-2); background: var(--canvas);
  font-family: var(--mono); font-size: 11.5px; line-height: 1.6; color: var(--ink-soft);
  white-space: pre-wrap; word-break: break-word;
}

.synced {
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 9px;
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
}

/* --- thin-pipeline briefing ----------------------------------------------- */

.thin__head { padding: 64px 48px 40px; max-width: 900px; }
/* The wait before the first briefing (#103) — same gutter as the head above it. */
.thin__body { padding: 0 48px 56px; max-width: 900px; }
.thin__headline {
  margin: 0; font-family: var(--serif); font-size: 44px; line-height: 1.2;
  letter-spacing: -0.02em; max-width: 19ch; font-weight: 400; color: var(--ink);
}
.thin__sub {
  margin: 20px 0 0; max-width: 64ch; font-family: var(--serif);
  font-size: 20px; line-height: 1.6; color: var(--sub); text-wrap: pretty;
}
.thin__stats {
  margin: 0 48px; padding: 20px 0;
  border-top: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2);
  display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-end; font-family: var(--mono);
}
.thin__arithmetic {
  padding-left: 56px; border-left: 1px solid var(--rule);
  font-size: 13.5px; line-height: 1.5; color: var(--meta);
}
.thin__tasks { padding: 36px 48px 0; }
.thin__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 36px 48px 48px; }
.grace { padding-left: 36px; border-left: 2px solid var(--accent); }
.grace p {
  margin: 0; max-width: 46ch; font-family: var(--serif);
  font-size: 18px; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty;
}

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

.board__note { padding: 16px 32px 12px; border-bottom: 1px solid var(--rule); }
/* The board used to be the only dark screen, which was the whole of "a
   different kind of looking" — and dark is a founder's choice now (#161). What
   carries it instead is what was always doing most of the work: full bleed
   where every other screen is a reading measure, and columns laid on the rule
   colour so the grid itself is the surface rather than sitting on one. */
.board {
  display: grid; grid-template-columns: repeat(7, minmax(190px, 1fr));
  gap: 1px; background: var(--rule); flex: 1;
}
@media (max-width: 1500px) {
  .board { grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); grid-template-columns: none; overflow-x: auto; }
}
/* The ladder has five columns to the pipeline's seven, so it gets the room. */
.board--ladder { grid-template-columns: repeat(5, minmax(240px, 1fr)); }
@media (max-width: 1200px) {
  .board--ladder { grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); grid-template-columns: none; overflow-x: auto; }
}
.column__note {
  margin: 0; padding: 14px 16px; font-family: var(--serif); font-size: 14px;
  line-height: 1.5; color: var(--muted); font-style: italic; max-width: 30ch;
}
.column { background: var(--surface); padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.column__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  /* 0.1em is the eyebrow tracking used everywhere else, but a seven-column board
     leaves the longest stage name about ten pixels short of its own total. This
     buys those pixels back so neither half has to be cut. */
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--label);
  padding-bottom: 10px; border-bottom: 1px solid var(--rule);
}
/* space-between alone leaves no gap once the total is wide, so the count ran
   into the label — "PROSPECTING7 · 42,030" — and the amount wrapped under it.
   The figure is the part that must stay whole and legible, so it never wraps
   and never shrinks; the stage name gives way first. */
.column__head > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.column__head > span:last-child { flex-shrink: 0; white-space: nowrap; }
.column__note { margin: 6px 0 0; font-family: var(--serif); font-size: 14px; line-height: 1.5; color: var(--prose-faint); font-style: italic; }
.column__foot {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  display: flex; flex-direction: column; gap: 6px;
}

.column__cards { display: flex; flex-direction: column; gap: 12px; min-height: 60px; }
/* Was a near-black wash left over from when the board itself was dark. */
.column--over { background: var(--drop); }
.card--dragging { opacity: 0.4; }

.card {
  display: block; border: 1px solid var(--border); cursor: grab;
  padding: 12px; display: flex; flex-direction: column; gap: 8px;
  color: var(--ink);
}
.card:hover { border-color: var(--muted); color: var(--ink); }
.card__name { font-size: 14.5px; font-weight: 500; }
.card__detail { font-family: var(--mono); font-size: 11.5px; color: var(--muted-3); }
.card__status { font-family: var(--mono); font-size: 11px; color: var(--muted-3); }
.card__coach {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  border-top: 1px solid var(--border); padding-top: 8px; color: var(--ink-soft);
}

/* A deal the coach has given up on recedes; a deal it is challenging does not. */
.card--cooling { color: var(--cooling); border-color: var(--rule); }
.card--kill { color: var(--kill); border-color: var(--kill-border); }
.card--cooling .card__name, .card--kill .card__name { font-weight: 400; }
.card--cooling .card__detail, .card--kill .card__detail { color: inherit; }
.card--challenge { border-color: var(--accent-ink); }
.card--kill .card__status, .card--cooling .card__status { color: var(--accent); }

/* Rot, as a bar. Length is time-in-stage against what that stage can bear;
   colour only leaves neutral once the deal is genuinely in trouble. */
.rot { height: 2px; background: var(--rot-fresh); }
.rot--fresh { background: var(--rot-fresh); }
.rot--warm  { background: var(--rot-warm); }
.rot--hot   { background: var(--rot-hot); }
.rot--spent { background: var(--rot-spent); }

/* --- outreach drafts ------------------------------------------------------ */

.script { display: grid; grid-template-columns: 1fr 340px; flex: 1; }
.script__main { padding: 48px 44px; border-right: 1px solid var(--rule); }
.script__aside { padding: 48px 30px; display: flex; flex-direction: column; gap: 28px; }
@media (max-width: 1100px) { .script { grid-template-columns: 1fr; } .script__main { border-right: none; } }

/* --- metrics ------------------------------------------------------------- */

.metrics { padding: 48px 48px 64px; max-width: 900px; display: flex; flex-direction: column; gap: 34px; }
.levers { display: flex; flex-direction: column; gap: 0; }
.lever { padding: 18px 0; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6px; }
.lever:last-child { border-bottom: 1px solid var(--rule); }
.lever__label { font-size: 17px; font-weight: 500; letter-spacing: -0.005em; }
.flow { display: flex; flex-direction: column; gap: 4px; }

/* --- forms --------------------------------------------------------------- */

/* Centred, which it never was: max-width with no auto margin put every form in
   the product — settings, edit a deal, edit a person, add leads — in the left
   third of a 1360px shell with two thirds of the screen empty beside it. Setup
   and the join page centre theirs, so the two halves of the same product
   disagreed about where a form goes (#247, #248).

   720 rather than 620: the fields are hairline underlines and 620 made them
   look like a mobile form pinned to a desktop. */
.form-page { padding: 56px 48px; max-width: 720px; margin: 0 auto; }
/* Settings is a form page with a tab bar over it, and five tabs do not fit on
   one line at the form width — a wrapped tab row reads as a mistake rather than
   as a row (#244 added the fifth). */
.form-page:has(.tabs) { max-width: 830px; }
/* A grouped form needs the width for its legend column (#257). Declared after
   .form-page because both are one class: at equal specificity source order is
   the whole of it, and above it this silently lost to max-width: 720px.

   Both selectors, because .form-page:has(.tabs) above is (0,2,0) and every
   Settings page renders tabs — a single-class modifier lost to it and the
   legend column squeezed the fields into 426px (#274). */
.form-page--wide,
.form-page--wide:has(.tabs) { width: 100%; max-width: 1000px; }

/* A run of groups can need its own heading — the three questions are one
   subject in three fields. It keeps the reading measure rather than stretching
   to the grid width, and the group under it keeps its rule. */
.formx__head { padding: 28px 0 0; border-top: 1px solid var(--rule); }
.formx__intro { max-width: 60ch; margin-top: 10px; }
.formx__head + .formx__group { border-top: none; padding-top: 22px; }
.formx__note { margin: 0 0 0 auto; color: var(--muted-3); text-align: right; max-width: 44ch; }
.form-page__title { font-family: var(--serif); font-size: 34px; font-weight: 400; letter-spacing: -0.02em; margin: 0 0 12px; }
.form { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; }
.form__row { display: flex; gap: 24px; flex-wrap: wrap; }
.form__row .form__label { flex: 1 1 200px; }
.form__label { display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--label); }
.form__input {
  font-family: var(--sans); font-size: 16px; color: var(--ink);
  border: none; border-bottom: 1px solid var(--border); background: none; padding: 6px 0; width: 100%;
}
.form__input--area { font-family: var(--mono); font-size: 13px; line-height: 1.6; border: 1px solid var(--border); padding: 12px; }
/* The one number every piece of advice is measured against (#162). */
.form__input--figure { font-family: var(--mono); font-size: 26px; letter-spacing: -0.01em; padding: 8px 0; }

/* Setup (#170). The three questions are what the coach's advice is made of, so
   they are the biggest thing on the page rather than the same size as a
   timezone picker. A wider measure than a form page, because these are
   sentences about a business and two lines of a 60ch column is not enough room
   to write one in. */
.setup { max-width: 760px; margin: 0 auto; padding: 52px 40px 72px; }
.setup__title {
  margin: 0; font-family: var(--serif); font-size: 40px; font-weight: 400;
  letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); text-wrap: balance;
}
.setup__lede {
  margin: 16px 0 0; font-family: var(--serif); font-size: 20px; line-height: 1.55;
  color: var(--prose); max-width: 52ch; text-wrap: pretty;
}
.setup__step { margin-top: 52px; padding-top: 30px; border-top: 1px solid var(--rule); }
.setup__step:first-of-type { border-top: none; }
.setup__count {
  display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-ink); margin-bottom: 14px;
}
/* The three questions are the page. Room to answer them in sentences. */
.setup .w3 + .form__label .form__input,
.setup .form__label + .form__label .form__input { font-size: 17px; }
.setup .form__label { margin-top: 26px; }
.setup .form__label > .form__input { font-size: 17px; padding: 10px 0; }
.setup .form__input--area { font-size: 13.5px; }
.setup .form__hint { font-size: 15px; max-width: 58ch; }
/* The grouped treatment on setup (#269). .screen is a flex column with no
   stretch, so a cap needs a width to size against — without width:100% the page
   shrink-to-fits and every group computes 264px + a field column narrower than
   the guidance beside it. Same bug and same fix as .form-page--wide (#257). */
.setup--wide { width: 100%; max-width: 1000px; }
/* The step's own intro sits above its groups, so it keeps the reading measure
   rather than stretching to the grid width. */
.setup__intro { max-width: 60ch; margin-top: 10px; }
/* .formx__group:first-of-type drops its rule, which is right at the top of a
   form and wrong at the top of each step — there the intro needs separating
   from the fields. */
.setup--wide .setup__step > .formx__group:first-of-type {
  border-top: 1px solid var(--rule); margin-top: 22px;
}
.setup__note { margin: 0 0 0 auto; color: var(--muted-3); }
.setup__actions { margin-top: 46px; }
.setup__rest { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--rule-soft); }

/* A trail back out of a nested page (#171). Sits in the topbar status slot,
   which several pages were already filling with breadcrumb-shaped text that was
   not clickable. */
.crumbs {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 11px 40px; border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 12.5px;
}
.crumbs__sep { color: var(--muted-3); }
.crumbs__link { color: var(--muted); text-decoration: none; }
.crumbs__link:hover { color: var(--ink); }
.crumbs__here { color: var(--ink-soft); }

/* Settings sections (#160). Links, not JavaScript — each tab is a page. */
.tabs { display: flex; gap: 26px; margin-top: 26px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.tabs__tab {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; padding: 0 0 10px; margin-bottom: -1px;
  border-bottom: 1px solid transparent; white-space: nowrap;
}
.tabs__tab:hover { color: var(--ink); }
.tabs__tab.is-on { color: var(--ink); border-bottom-color: var(--accent); }
.settings__section { margin-top: 34px; }
/* One person's fields on a deal, fenced off from the next person's (#248). */
.person-edit {
  display: flex; flex-direction: column; gap: 20px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule-soft);
}
.person-edit__who {
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--ink);
}
.form__input:focus { outline: none; border-bottom-color: var(--accent); }
/* Placeholders are examples, not answers (#145). Left at the browser default
   they rendered darker than the .form__hint explaining them, so the three
   setup questions everything else rests on looked already filled in — and the
   examples describe this product's own customer, which made it more
   convincing. The faintest thing on the form, by some margin. */
.form__input::placeholder, .auth__input::placeholder { color: var(--placeholder); opacity: 1; }
.reasons { display: flex; flex-direction: column; }
.reasons__option {
  display: grid; grid-template-columns: auto 1fr; gap: 0 12px;
  align-items: baseline; padding: 14px 0; border-top: 1px solid var(--rule);
  font-size: 16px; color: var(--ink); cursor: pointer;
}
.reasons__option:last-child { border-bottom: 1px solid var(--rule); }
.reasons__note {
  grid-column: 2; font-family: var(--serif); font-size: 15px; line-height: 1.5;
  color: var(--prose); margin-top: 6px; max-width: 54ch;
}

.w3 { padding-bottom: 6px; }
.w3 .prose { margin-top: 8px; max-width: 60ch; }

.form__hint {
  font-family: var(--serif); font-size: 14.5px; line-height: 1.45;
  letter-spacing: 0; text-transform: none; color: var(--muted);
  margin-top: 4px; max-width: 56ch;
}

.form__actions { display: flex; gap: 10px; align-items: center; margin-top: 22px; flex-wrap: wrap; }
/* Separates the action a form is for from the ones that end the thing it is
   about — Save, and then the two that close a deal (#248). */
.form__actions__gap {
  margin-left: 8px; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em; color: var(--muted);
}
.form__error {
  border-left: 2px solid var(--accent); padding: 10px 14px; margin: 0 0 18px;
  font-family: var(--serif); font-size: 15px; color: var(--accent);
}

/* --- deal detail ---------------------------------------------------------- */

.deal { display: grid; grid-template-columns: 1fr 372px; flex: 1; }
.deal__main { padding: 36px 44px 48px; border-right: 1px solid var(--rule); }
.deal__aside { padding: 36px 30px 44px; display: flex; flex-direction: column; gap: 34px; }
.deal__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.deal__title {
  margin: 0; font-family: var(--serif); font-size: 38px;
  font-weight: 400; letter-spacing: -0.02em; color: var(--ink);
}
.deal__facts { display: flex; flex-wrap: wrap; gap: 14px; font-family: var(--mono); font-size: 12px; color: var(--label); }
.deal__amount { font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }

/* The facts, in the rail rather than strung along under the title (#171). A
   definition list because that is what it is — label and value, scannable down
   the left edge rather than read as a sentence. */
.facts {
  display: grid; grid-template-columns: auto 1fr; gap: 9px 16px;
  margin: 12px 0 0; align-items: baseline;
}
.facts dt {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--label); white-space: nowrap;
}
.facts dd {
  margin: 0; font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.facts__figure { font-size: 17px; color: var(--ink); }

/* Stage history: segment widths are days-in-stage as a share of the whole life
   of the deal, so a deal that went backwards shows it. */
.history { display: flex; gap: 2px; margin-top: 10px; }
.history__seg { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.history__bar { height: 6px; background: var(--history); }
.history__seg--current .history__bar { background: var(--accent); }
.history__label { font-family: var(--mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.history__seg--current .history__label { color: var(--accent); }

.playbook { margin-top: 28px; border-top: 1px solid var(--rule); padding-top: 16px; }
.playbook__toggle {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--label); cursor: pointer; list-style: none;
}
.playbook__toggle::before { content: "+ "; color: var(--accent); }
.playbook[open] .playbook__toggle::before { content: "− "; }
.playbook__toggle:hover { color: var(--ink); }
.playbook__body { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; max-width: 64ch; }
.playbook__body .eyebrow { margin-top: 12px; }
.playbook__list {
  font-family: var(--serif); font-size: 16.5px; line-height: 1.55;
  color: var(--prose); margin: 0; padding-left: 20px;
}
.playbook__list li { margin-bottom: 6px; }

.next-step {
  margin-top: 28px; padding-left: 20px; border-left: 2px solid var(--accent);
}
.next-step__goal { font-size: 11.5px; color: var(--muted); margin: 8px 0 0; }

/* Focus — one task, alone. Deliberately not the briefing: that is a list because
   a morning has several things in it, and this is the one you have decided to
   do. A centred column with a lot of air above it, so nothing else is in view. */
.focus {
  max-width: 760px; margin: 0 auto; padding: 120px 40px 80px;
  display: flex; flex-direction: column; gap: 36px;
}
.focus__chip {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted-3);
}
.focus__head { display: flex; flex-direction: column; gap: 18px; }
.focus__eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted-3);
}
.focus__title { margin: 0; font-size: 40px; line-height: 1.18; letter-spacing: -0.02em; }
.focus__why { margin: 0; font-size: 19px; }
.focus__how { font-size: 17px; }
.focus__facts {
  padding: 14px 0;
  border-top: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2);
}
.focus__log { display: flex; flex-direction: column; gap: 12px; }
.focus__note {
  width: 100%; padding: 14px 16px; font-family: var(--serif); font-size: 17px;
  line-height: 1.5; color: var(--ink); background: transparent;
  border: 1px solid var(--border-2); resize: vertical;
}
.focus__note::placeholder { color: var(--placeholder); opacity: 1; }
.focus__note:focus { outline: none; border-color: var(--accent); }
.focus__submit { display: flex; gap: 10px; align-items: center; }
.focus__rest { display: flex; gap: 10px; align-items: center; padding-top: 8px; }
.focus__key, .focus__count { font-family: var(--mono); font-size: 11px; color: var(--muted-3); }
.focus__count { margin-left: auto; }
@media (max-width: 720px) { .focus { padding: 64px 20px 56px; gap: 28px; } }

.timeline { display: flex; flex-direction: column; }
/* The note field and the paste form sit above the timeline now, so the record
   needs closing off from the two things that write to it — without a rule here
   the first event reads as part of the paste form. */
.paste + .timeline { margin-top: 24px; border-top: 1px solid var(--rule); padding-top: 4px; }
.event {
  display: grid; grid-template-columns: 96px 1fr; gap: 20px;
  padding: 16px 0; border-bottom: 1px solid var(--rule-soft);
}
.event__when { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.event__source { color: var(--muted-3); }
.event__body { display: flex; flex-direction: column; gap: 5px; }
.event__title { font-size: 14.5px; font-weight: 500; }

.inline-form { display: inline; }
.inline-select {
  font-family: var(--mono); font-size: 12px; color: var(--label);
  border: none; background: none; padding: 0; cursor: pointer;
}
.inline-select:focus { outline: none; color: var(--accent-ink); }
.note-form { display: block; }

.note-input {
  margin-top: 14px; padding: 12px 14px; width: 100%;
  border: 1px dashed var(--border); background: none;
  font-family: var(--mono); font-size: 11.5px; color: var(--ink);
}
.note-input::placeholder { color: var(--muted-3); }
.note-input:focus { outline: none; border-color: var(--accent); border-style: solid; }

.paste { margin-top: 22px; border-top: 1px solid var(--rule); padding-top: 16px; }
.paste__toggle {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--label); cursor: pointer; list-style: none;
}
.paste__toggle::before { content: "+ "; color: var(--accent); }
.paste[open] .paste__toggle::before { content: "− "; }
.paste__toggle:hover { color: var(--ink); }
/* The same disclosure in the right rail, where the block above it already has
   a rule of its own and a second one would read as a divider. */
.paste--tight { margin-top: 14px; border-top: none; padding-top: 0; }

.aside-block { padding-top: 26px; border-top: 1px solid var(--rule); }

/* A qualification block is one thing to answer, so it is composed as one: the
   question, then its explanation in small type as a dek, then the answers —
   which are the largest thing in the block, because they are the point. The
   explanation is written after the answers in the markup and moved above them
   here, so the order on screen is the order you read it in.

   While the answer is still "I don't know" the block carries a standing rule in
   the accent; answering it removes the mark. */
.aside-block:has(.signer) { display: flex; flex-direction: column; }
.aside-block:has(.signer) > .eyebrow { order: 1; }
.aside-block:has(.signer) > .prose {
  order: 2; margin: 6px 0 0; font-size: 13.5px; line-height: 1.5;
  color: var(--muted); max-width: 34ch;
}
.aside-block:has(.signer) > .signer { order: 3; }

/* The signer question. Three options, and "I don't know" is a real answer that
   the coach is allowed to hold against you. */
.signer {
  display: flex; flex-direction: column;
  margin-top: 16px; padding-left: 14px; border-left: 2px solid var(--rule);
}
.signer:has(input[value="unknown"]:checked) { border-left-color: var(--accent); }
.signer__opt {
  display: flex; gap: 12px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--rule-soft);
  font-size: 15px; color: var(--prose); cursor: pointer;
}
.signer__opt:hover { color: var(--ink); }
.signer__opt:last-of-type { border-bottom: none; }
.signer__dot { width: 11px; height: 11px; border: 1.5px solid var(--dot); border-radius: 50%; flex: none; }
.signer__opt.is-on { color: var(--ink); font-weight: 500; }
.signer__opt:focus-within .signer__dot { box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 25%, transparent); }
.signer__opt.is-on .signer__dot {
  border-color: var(--accent); background: var(--accent);
  box-shadow: inset 0 0 0 2px var(--surface);
}
/* The name for "Someone else", which the label had promised with a trailing
   colon and never rendered (#243). Only out when that is the answer: on a deal
   where a named person signs it there is nothing to type. */
.signer__name {
  display: none;
  margin: -2px 0 11px 23px; padding: 7px 10px;
  border: 1px solid var(--rule); border-radius: 6px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 14px;
}
.signer:has(input[value="above_champion"]:checked) .signer__name { display: block; }
.signer__name:focus { outline: none; border-color: var(--accent); }
/* The fallback Save, for a browser that did not run the auto-submit. Quiet
   until the block has focus, because it is not the thing to reach for. */
.signer .btn {
  align-self: flex-start; margin-top: 10px;
  font-size: 11px; color: var(--muted-2);
}
.signer:focus-within .btn { color: var(--ink); border-color: var(--accent); }

.contacts { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.contact { display: flex; flex-direction: column; gap: 3px; }
.contact--unknown { color: var(--prose-faint); }
.contact__name { font-size: 14.5px; font-weight: 500; }
.contact--unknown .contact__name { font-weight: 400; }
.contact__meta { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.contact--unknown .contact__meta { color: inherit; }


/* --- narrower screens ------------------------------------------------------
   The founder is at a desk, so this only has to degrade gracefully, not adapt. */
@media (max-width: 1100px) {
  .today, .deal { grid-template-columns: 1fr; }
  .today__main, .deal__main { border-right: none; border-bottom: 1px solid var(--rule); }
  .thin__foot { grid-template-columns: 1fr; }
  .board { grid-auto-flow: column; grid-template-columns: none; overflow-x: auto; }
}
@media (max-width: 720px) {
  .topbar, .today__main, .thin__head, .thin__body, .thin__tasks, .thin__foot, .deal__main { padding-left: 20px; padding-right: 20px; }

  /* The bar was one row of flex with nowhere to go, so on a phone the wordmark
     broke across two lines, the status wrapped mid-figure and the buttons went
     off the side of the screen entirely. It stacks now: identity and navigation
     on one row, actions on the next. */
  .topbar { flex-wrap: wrap; gap: 10px 0; align-items: flex-start; }
  .topbar__left { width: 100%; align-items: center; gap: 16px; flex-wrap: wrap; }
  .topbar__right { width: 100%; justify-content: flex-start; gap: 10px; flex-wrap: wrap; }
  .wordmark { white-space: nowrap; }
  .nav { gap: 14px; flex-wrap: wrap; }

  /* The running figures are the first thing worth dropping — they are on the
     board itself, in bigger type, a few pixels further down. */
  .topbar__right > span:first-child { display: none; }
  .thin__stats { margin: 0 20px; gap: 28px; }
  .thin__arithmetic { padding-left: 0; border-left: none; }
  .task { grid-template-columns: 26px 1fr; }
  .task__actions { grid-column: 2; }
  .prose--lead { font-size: 24px; }
  .thin__headline { font-size: 32px; }

  /* One stage per screen, swiped through (#124). Seven columns squeezed onto a
     phone is seven columns nobody can read; a stage at a time is how the work
     is actually done anyway.

     Scroll snapping rather than a carousel library: the browser already knows
     how to do this, it keeps momentum and the scrollbar honest, and it degrades
     to ordinary scrolling where snapping is unsupported. */
  .board {
    grid-auto-columns: 100vw;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .board::-webkit-scrollbar { display: none; }

  .column {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: 18px 20px;
  }

  /* The stage name has to stay put while the cards under it scroll, or you lose
     track of which page you are on halfway down a long column. */
  .column__head {
    position: sticky; top: 0; z-index: 1;
    background: var(--surface);
    padding-top: 4px;
  }

  /* A hint that there is another column to the right — without it a single
     full-width column reads as the whole board. */
  .board__note::after {
    content: "Swipe for the next stage.";
    display: block; margin-top: 10px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
    color: var(--muted);
  }
}

/* ==========================================================================
   Marketing site. Same type system as the product — the landing page is a
   promise about the tool, so it should look like the tool.
   ========================================================================== */

body.marketing { background: var(--surface); }

.site-head, .site-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  max-width: 940px; margin: 0 auto; padding: 22px 24px; flex-wrap: wrap;
}
.site-head { border-bottom: 1px solid var(--rule); }
.site-foot {
  border-top: 1px solid var(--rule); margin-top: 88px; padding: 28px 24px 64px;
  font-family: var(--mono); font-size: 12px; color: var(--muted);
}
.site-foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.site-flash {
  max-width: 940px; margin: 18px auto 0; padding: 12px 24px;
  font-family: var(--serif); font-size: 16px; color: var(--ink);
  border-left: 2px solid var(--accent);
}
.site-flash--alert { color: var(--accent-ink); }

.hero { max-width: 940px; margin: 0 auto; padding: 88px 24px 56px; }
.hero__title {
  font-family: var(--serif); font-size: clamp(34px, 5.4vw, 56px); line-height: 1.12;
  letter-spacing: -0.025em; font-weight: 400; margin: 0; max-width: 17ch; text-wrap: balance;
}
.hero__sub {
  font-family: var(--serif); font-size: 20px; line-height: 1.6; color: var(--prose);
  max-width: 58ch; margin: 26px 0 34px; text-wrap: pretty;
}
.hero__note { font-size: 11.5px; color: var(--muted-3); margin-top: 14px; letter-spacing: 0.06em; }

.waitlist { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.waitlist__input {
  font-family: var(--sans); font-size: 15px; color: var(--ink); min-width: 260px;
  border: 1px solid var(--border); background: none; padding: 9px 12px;
}
.waitlist__input:focus { outline: none; border-color: var(--accent); }
.waitlist__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The hero visual is the briefing itself, rendered rather than screenshotted,
   so it never goes stale against the real product. */
.shot { max-width: 940px; margin: 0 auto; padding: 0 24px; }
.shot__frame { border: 1px solid var(--border); padding: 34px 32px; background: var(--surface); }
.shot__headline {
  font-family: var(--serif); font-size: 23px; line-height: 1.45; margin: 0 0 26px;
  letter-spacing: -0.01em; text-wrap: pretty;
}
.shot__task { padding: 18px 0; border-top: 1px solid var(--rule); }
.shot__task-title { font-size: 16px; font-weight: 500; }
.shot__task-reason {
  font-family: var(--serif); font-size: 15.5px; line-height: 1.55;
  color: var(--prose); margin: 7px 0 0; max-width: 62ch;
}
.shot__task-how {
  font-family: var(--sans); font-size: 14.5px; line-height: 1.5;
  color: var(--ink-soft); margin: 10px 0 0; padding-left: 14px;
  border-left: 2px solid var(--border); max-width: 60ch;
}
.shot__caption { font-size: 11.5px; color: var(--muted-3); margin-top: 12px; }

.how { max-width: 940px; margin: 0 auto; padding: 80px 24px 0; display: grid; gap: 40px; grid-template-columns: repeat(3, 1fr); }
.how__step h2 { font-family: var(--serif); font-size: 24px; font-weight: 400; letter-spacing: -0.015em; margin: 10px 0 10px; }

.honest, .not-for, .cta, .outgrow { max-width: 940px; margin: 0 auto; padding: 72px 24px 0; }
.outgrow { border-left: 3px solid var(--accent); padding-left: 28px; }
.honest__title { font-family: var(--serif); font-size: 30px; font-weight: 400; letter-spacing: -0.02em; margin: 0 0 22px; }
.honest__list { display: flex; flex-direction: column; margin: 0 0 30px; max-width: 68ch; }
.honest__item { padding: 22px 0; border-top: 1px solid var(--rule); }
.honest__item:last-child { border-bottom: 1px solid var(--rule); }

/* The hard statement leads; the move follows it in the reading voice. */
.honest__truth {
  font-family: var(--sans); font-size: 17px; font-weight: 500;
  letter-spacing: -0.005em; color: var(--ink); margin: 0 0 8px;
}
.honest__close { border-left: 2px solid var(--accent); padding-left: 20px; margin-bottom: 20px; }

.cta__title { font-family: var(--serif); font-size: 34px; font-weight: 400; letter-spacing: -0.02em; margin: 0 0 22px; }

.page { max-width: 780px; margin: 0 auto; padding: 72px 24px 0; }
.page__title { font-family: var(--serif); font-size: 40px; font-weight: 400; letter-spacing: -0.025em; margin: 0 0 20px; }
.page h2 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); margin: 40px 0 12px; }
.page--legal .prose, .prose-list { max-width: 68ch; }
.prose-list { font-family: var(--serif); font-size: 16.5px; line-height: 1.6; color: var(--prose); padding-left: 20px; }
.prose-list li { margin-bottom: 12px; }
.page__stamp { font-size: 11px; color: var(--muted-3); margin-top: 48px; }
.page__aside { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--rule); }

.price { margin-top: 34px; padding: 30px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.price__amount { font-size: 46px; letter-spacing: -0.02em; }
.price__unit { font-size: 13px; color: var(--muted); margin-left: 8px; }
.price__list { list-style: none; padding: 0; margin: 22px 0 28px; font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--prose); }
.price__list li { padding: 7px 0; }

.essay-list { margin-top: 40px; }
.essay-row { padding: 26px 0; border-top: 1px solid var(--rule); }
.essay-row:last-child { border-bottom: 1px solid var(--rule); }
.essay-row__title { font-family: var(--serif); font-size: 26px; font-weight: 400; letter-spacing: -0.015em; margin: 0 0 8px; }
.essay-row__title a { color: var(--ink); }
.essay-row__title a:hover { color: var(--accent); }
.essay-row__date { font-size: 11.5px; color: var(--muted-3); display: block; margin-top: 10px; }

.essay { max-width: 680px; margin: 0 auto; padding: 72px 24px 0; }
.essay__title { font-family: var(--serif); font-size: 40px; font-weight: 400; letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 12px; text-wrap: balance; }
.essay__date { font-size: 11.5px; color: var(--muted-3); }
.essay__body { margin-top: 36px; }
.essay__body p { font-family: var(--serif); font-size: 19px; line-height: 1.68; color: var(--ink); margin: 0 0 24px; text-wrap: pretty; }
.essay__body h2 { font-family: var(--serif); font-size: 25px; font-weight: 500; letter-spacing: -0.015em; text-transform: none; color: var(--ink); margin: 44px 0 16px; }
.essay__body blockquote { margin: 32px 0; padding-left: 26px; border-left: 2px solid var(--accent); }
.essay__body blockquote p { font-size: 20px; color: var(--ink-soft); margin: 0; }
.essay__body code { font-family: var(--mono); font-size: 0.88em; }
.essay__cta { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--rule); }

@media (max-width: 800px) {
  .how { grid-template-columns: 1fr; gap: 34px; }
  .hero { padding-top: 56px; }
}

/* --- small beginnings ------------------------------------------------------
   Shown while the first briefing is being written. Set apart from the page's
   own voice, because it is somebody else's story. */

.beginning {
  margin-top: 40px; padding: 20px 24px;
  border-left: 2px solid var(--accent);
  background: var(--raised, transparent);
  max-width: 68ch;
}
.beginning__company {
  font-family: var(--serif); font-size: 19px; margin: 8px 0 6px;
}

.contact__edit { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; }

/* When the briefing was written and when it is replaced (#127). */
.stamp {
  margin: 14px 0 0; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.04em; color: var(--muted); max-width: 62ch;
}

/* The lead/connector choice (#137). */
.form__fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.form__choice { display: block; font-size: 15px; margin-top: 8px; cursor: pointer; }
/* Default radios render in the browser's blue, which is the one colour on the
   page nobody chose. */
.form__choice input { margin-right: 8px; accent-color: var(--accent); }

/* --- networking on Today ---------------------------------------------------
   Beside the tasks, not below everything. It competes with them on purpose. */

.networking { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--rule); }
.networking__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--rule-soft);
  font-family: var(--serif); font-size: 16px; line-height: 1.5;
}
.networking__row:last-child { border-bottom: 0; }
.networking__meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--muted); white-space: nowrap;
}

/* The seven-day picker (#215). A row of choices rather than a list, because
   seven of anything reads as a row — and the off days are the ones that matter,
   so they have to be visible as gaps rather than as unchecked boxes. */
.days {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.days__day {
  /* The checkbox inside is position:absolute (visually-hidden), so this has to
     be its containing block or it escapes to the nearest positioned ancestor. */
  position: relative;
  flex: 1 1 auto;
  min-width: 56px;
  text-align: center;
  padding: 9px 6px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 12.5px;
  color: var(--muted);
  background: var(--surface);
  cursor: pointer;
  user-select: none;
}

.days__day:hover { border-color: var(--border-2); }
/* The hint under the row. Every other hint follows a hairline field, where 4px
   is right; under seven boxed chips it read as stuck to them. */
.days + .form__hint { display: block; margin-top: 12px; }

/* State comes from the checkbox, not from a class the server rendered. These do
   not auto-submit the way the signer and qualification options do — they sit in
   a form with a Save button — so a server-rendered .is-on would stay exactly as
   it was drawn no matter what you clicked, which is what it did (#215). */
.days__day:has(input:checked) {
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 500;
  background: color-mix(in oklch, var(--accent) 8%, var(--surface));
}

/* The input is visually hidden, so the ring has to live on the label or there
   is no way to see where the keyboard is. */
.days__day:focus-within {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 25%, transparent);
}