/* ==========================================================================
   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 {
  --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:      oklch(0.94 0.004 85);
  --surface:     oklch(0.985 0.005 85);
  --ink:         oklch(0.24 0.012 65);
  --ink-soft:    oklch(0.30 0.012 65);
  --prose:       oklch(0.42 0.012 65);
  --prose-soft:  oklch(0.45 0.012 65);
  --prose-faint: oklch(0.52 0.012 65);
  --muted:       oklch(0.55 0.01 70);
  --muted-2:     oklch(0.58 0.01 70);
  --muted-3:     oklch(0.62 0.01 70);
  --label:       oklch(0.50 0.01 70);
  --rule:        oklch(0.90 0.008 80);
  --rule-soft:   oklch(0.93 0.008 80);
  --border:      oklch(0.87 0.008 80);
  --border-2:    oklch(0.88 0.008 80);
  --accent:      oklch(0.52 0.13 45);
  --accent-ink:  oklch(0.44 0.13 45);
  --accent-hover: oklch(0.42 0.14 45);
}

/* The board runs dark on purpose — it is a different kind of looking. */
.theme-dark {
  --surface:     oklch(0.19 0.008 70);
  --ink:         oklch(0.93 0.008 85);
  --ink-soft:    oklch(0.86 0.008 85);
  --prose:       oklch(0.78 0.008 85);
  --prose-soft:  oklch(0.70 0.01 70);
  --prose-faint: oklch(0.62 0.01 70);
  --muted:       oklch(0.62 0.01 70);
  --muted-2:     oklch(0.66 0.01 70);
  --muted-3:     oklch(0.68 0.01 70);
  --label:       oklch(0.66 0.01 70);
  --rule:        oklch(0.28 0.008 70);
  --rule-soft:   oklch(0.28 0.008 70);
  --border:      oklch(0.30 0.008 70);
  --border-2:    oklch(0.36 0.008 70);
  --accent:      oklch(0.68 0.13 45);
  --accent-ink:  oklch(0.68 0.13 45);
}

* { 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: 10.5px; }
.eyebrow--faint { color: var(--muted-2); }

/* 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: oklch(0.26 0.012 65); }
.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); }
.btn--urgent { border-color: var(--accent); color: var(--accent-ink); }
.btn--lg { padding: 5px 9px; }

/* --- 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 {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 12px; color: var(--muted);
}

/* --- 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: oklch(0.78 0.01 70); 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: oklch(0.78 0.01 70);
}
.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; }

.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: oklch(0.36 0.012 65); 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: oklch(0.38 0.012 65);
}
.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); }
.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; }
}
.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; }
.column--over { background: oklch(0.22 0.012 65); }
.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: oklch(0.60 0.008 75); border-color: var(--rule); }
.card--kill { color: oklch(0.52 0.008 75); border-color: oklch(0.26 0.008 70); }
.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: oklch(0.42 0.09 48); }
.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: oklch(0.34 0.008 70); }
.rot--fresh { background: oklch(0.34 0.008 70); }
.rot--warm  { background: oklch(0.44 0.04 58); }
.rot--hot   { background: oklch(0.55 0.10 50); }
.rot--spent { background: oklch(0.60 0.13 45); }

/* --- 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 --------------------------------------------------------------- */

.form-page { padding: 56px 48px; max-width: 620px; }
.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; }
.form__input:focus { outline: none; border-bottom-color: var(--accent); }
.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: 12px; flex-wrap: wrap; }

/* --- 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; }

/* 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: oklch(0.75 0.01 75); }
.history__seg--current .history__bar { background: oklch(0.58 0.13 45); }
.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; }

.timeline { display: flex; flex-direction: column; }
.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); }

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

/* 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: 12px; }
.signer__opt {
  display: flex; gap: 10px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--rule-soft);
  font-size: 14px; color: var(--prose); cursor: pointer;
}
.signer__dot { width: 11px; height: 11px; border: 1.5px solid oklch(0.7 0.01 70); 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 oklch(0.52 0.13 45 / 0.25); }
.signer__opt.is-on .signer__dot {
  border-color: var(--accent); background: var(--accent);
  box-shadow: inset 0 0 0 2px var(--surface);
}

.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; }

.deal__foot {
  margin-top: auto; padding-top: 22px; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  display: flex; flex-direction: column; gap: 6px;
}

/* --- 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; }
  .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; }
}

/* ==========================================================================
   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;
}