/* ==========================================================================
   console.css. The founder console: paper, deep navy, and one brass accent.

   Replaces the dark eight-token system of 2026-08-04. That earlier sheet's
   rules (four font sizes, one filled gold element per screen, a 44px floor on
   every control) are SUPERSEDED, not violated. They are recorded as decisions
   in PROJECT_STATE.md and the entry for this pass says so, because otherwise a
   future session reads the old rule and "fixes" this design back into the dark.

   COLOUR MEANS EXACTLY THREE THINGS AND NOTHING ELSE:
     clay   this wants you now
     brass  a number you set, not one that was measured
     moss   fine, leave it alone
   Deep navy is structure, not meaning: rules, fills on the primary action, the
   active marker in the rail. Everything else is paper and ink. If a colour ever
   appears for decoration the system stops being readable at a glance, which is
   the whole reason it is this restrained.
   ========================================================================== */

/* Self-hosted. The prototype pulled these from fonts.googleapis.com, which is a
   third-party dependency in a folder with no build step and hands Google a
   record of every console page load. These are the latin and latin-ext subsets
   only, deduplicated: Fraunces and Inter Tight are variable fonts, so Google
   serves one identical file per subset across every weight. Noto Serif Hebrew
   carries the hebrew subset alone, because it renders exactly one word. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('/fonts/Fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('/fonts/Fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/InterTight-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/InterTight-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Serif Hebrew';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/NotoSerifHebrew-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

:root {
  /* Paper */
  --paper: #faf7f0;
  --leaf:  #ffffff;
  --tint:  #f2ede2;
  --rule:  #e2dacb;
  /* Ink */
  --ink:   #1c1a17;
  --soft:  #6b6459;
  --dim:   #9a9184;
  /* Structure */
  --deep:  #2c3a52;
  --deep-lift: #1f2b3f;
  /* The three meanings */
  --brass: #a67c33;
  --clay:  #b5533f;
  --moss:  #4c7358;

  --disp: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --heb:  'Noto Serif Hebrew', 'Fraunces', Georgia, serif;

  /* The scale. Nine steps, consolidated from the prototype's 29: values within
     a pixel of each other were doing the same job under different names. */
  --t-micro: 12px;   /* eyebrows, keys, uppercase labels */
  --t-meta:  13px;   /* metadata under a heading */
  --t-nav:   14px;   /* rail items, table cells */
  --t-note:  15px;   /* notes, secondary prose */
  --t-body:  16px;   /* body */
  --t-sub:   20px;   /* small card headings */
  --t-card:  24px;   /* card headings */
  --t-fig:   30px;   /* a figure inside a row */
  --t-big:   40px;   /* the figure on a stat tile */

  --rail: 262px;
  --gut: 18px;
}

@media (min-width: 821px) { :root { --gut: 44px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Nothing is hidden behind script. Focus is always visible. */
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 4px; }

[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Frame: a left rail and a page
   -------------------------------------------------------------------------- */

.frame { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; }

.rail {
  background: var(--tint);
  border-right: 1px solid var(--rule);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 24px 0 40px;
}

.rhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 20px 22px; }

/* The wordmark is bilingual. dir="rtl" plus unicode-bidi:isolate on the Hebrew
   keeps the nikud attached to their letters; without the isolate the vowel
   points drift off the consonants when they sit beside Latin text. */
.mk { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; text-decoration: none; }
.mk .lat { font-family: var(--disp); font-size: 23px; font-weight: 400; letter-spacing: -.01em; color: var(--ink); }
.mk .heb {
  font-family: var(--heb);
  font-size: 26px;
  font-weight: 400;
  color: var(--brass);
  direction: rtl;
  unicode-bidi: isolate;
  line-height: 1.35;
  padding-bottom: 2px;
}

/* The phone's menu button. There is deliberately no desktop collapse toggle:
   it was not earning its place. */
.fold {
  display: none;
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 22px; border: 1px solid var(--rule);
  background: var(--leaf); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.fold span { display: block; width: 18px; height: 1.5px; background: var(--ink); border-radius: 1px; transition: transform .2s, opacity .2s; }
.fold[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.fold[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.fold[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Categories are native disclosure elements, OPEN BY DEFAULT. The prototype
   animated max-height from script, which is content hidden behind JavaScript
   and is prohibited by name (commit dbe22f5). A details element collapses the
   same way, works with no script at all, and is keyboard operable for free. */
.cat { border: 0; }
.cat > summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 16px 20px 7px;
  cursor: pointer;
  font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--dim);
}
.cat > summary::-webkit-details-marker { display: none; }
.cat > summary:hover { color: var(--soft); }
.cat > summary .ar { font-size: 10px; transition: transform .2s; }
.cat:not([open]) > summary .ar { transform: rotate(-90deg); }

.t {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 14.5px; color: var(--soft);
  padding: 9px 20px;
  text-decoration: none;
  white-space: nowrap;
  border-left: 3px solid transparent;
  transition: background .16s, color .16s, border-color .16s;
}
.t:hover { background: var(--leaf); color: var(--ink); }
.t[aria-current="page"] { background: var(--leaf); color: var(--ink); border-left-color: var(--deep); font-weight: 500; }
.t .c { font-size: var(--t-meta); color: var(--dim); font-variant-numeric: tabular-nums; }
.t[aria-current="page"] .c { color: var(--brass); }

.pg { max-width: 1180px; padding: 52px var(--gut) 110px; }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.eyebrow { font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-bottom: 14px; }

h1 {
  font-family: var(--disp);
  font-size: clamp(30px, 5vw, 54px);
  font-weight: 300; line-height: 1.08; letter-spacing: -.02em;
  max-width: 19ch;
}
h1 em { font-style: italic; color: var(--brass); }

.say { font-family: var(--disp); font-size: clamp(20px, 2.4vw, 27px); font-weight: 300; line-height: 1.45; color: var(--soft); margin-top: 22px; max-width: 34ch; }
.say b { color: var(--ink); font-weight: 400; }

.exp { font-size: var(--t-note); color: var(--soft); margin-top: 18px; max-width: 62ch; border-left: 2px solid var(--brass); padding-left: 16px; }

h2 { font-family: var(--disp); font-size: var(--t-note); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); margin: 58px 0 4px; }

.note { font-size: 14.5px; color: var(--dim); margin-top: 22px; max-width: 64ch; }
.num { font-variant-numeric: tabular-nums; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; color: var(--soft); }

/* --------------------------------------------------------------------------
   Stat tiles
   -------------------------------------------------------------------------- */

.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; margin-top: 42px; }
.f { background: var(--leaf); border: 1px solid var(--rule); border-radius: 14px; padding: 22px 24px; }
.f .k { font-size: 12.5px; color: var(--soft); }
.f .v { font-family: var(--disp); font-size: var(--t-big); font-weight: 300; line-height: 1; margin-top: 12px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
/* "none yet" is a fact, not a figure, so it is not set as one. */
.f .v.none { font-size: 19px; color: var(--dim); padding: 12px 0 9px; font-family: var(--body); }
.f .v.neg { color: var(--clay); }
.f .v.pos { color: var(--moss); }

/* --------------------------------------------------------------------------
   Cases: the row that carries a pair and how long it has sat still
   -------------------------------------------------------------------------- */

.case {
  background: var(--leaf); border: 1px solid var(--rule); border-radius: 14px;
  padding: 24px 26px; margin-top: 14px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center;
  transition: border-color .2s;
}
a.case { text-decoration: none; color: inherit; }
a.case:hover { border-color: var(--deep); }
.case h3 { font-family: var(--disp); font-size: 25px; font-weight: 400; letter-spacing: -.01em; }
.case p { font-size: var(--t-note); color: var(--soft); margin-top: 5px; }

.since { text-align: right; white-space: nowrap; }
.since .d { font-family: var(--disp); font-size: 31px; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.since .l { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-top: 5px; }
.since.hot .d { color: var(--clay); }
.since.warm .d { color: var(--brass); }
.since.calm .d { color: var(--moss); }
.since .word { font-size: 19px; color: var(--dim); padding-top: 6px; font-family: var(--body); }

.track { grid-column: 1/-1; display: flex; gap: 4px; margin-top: 6px; }
.track s { flex: 1; height: 4px; border-radius: 3px; background: var(--rule); text-decoration: none; }
.track s.f1 { background: var(--deep); }
.track s.f2 { background: var(--brass); }
.track s.f3 { background: var(--clay); }
.stage { grid-column: 1/-1; display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-top: 8px; }
.stage b { font-weight: 400; color: var(--ink); }

/* Moved since you last looked. */
.moved { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brass); margin-left: 9px; vertical-align: 3px; }

/* --------------------------------------------------------------------------
   Panels, arguments, tallies
   -------------------------------------------------------------------------- */

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.p { background: var(--leaf); border: 1px solid var(--rule); border-radius: 14px; padding: 26px 28px; }
.p h3 { font-family: var(--disp); font-size: 28px; font-weight: 400; letter-spacing: -.01em; }
.p .m { font-size: var(--t-meta); color: var(--dim); margin: 3px 0 20px; }
.r { padding: 11px 0; border-bottom: 1px solid var(--rule); }
.r:last-child { border: 0; }
.r .k { font-size: 11.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--dim); }
.r .v { font-size: var(--t-note); margin-top: 3px; }

.argue { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.arg { border-radius: 14px; padding: 26px 28px; border: 1px solid var(--rule); background: var(--leaf); }
.arg.for { border-left: 3px solid var(--moss); }
.arg.ag { border-left: 3px solid var(--clay); }
.arg .k { font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 11px; }
.arg.for .k { color: var(--moss); }
.arg.ag .k { color: var(--clay); }
.arg p { font-size: var(--t-body); line-height: 1.62; }
.arg p + p { margin-top: 12px; }

.tally { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.ti { background: var(--tint); border-radius: 14px; padding: 22px 26px; }
.ti .k { font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--soft); margin-bottom: 12px; }
.ti ul { list-style: none; }
.ti li { font-size: var(--t-note); padding: 8px 0 8px 22px; position: relative; border-bottom: 1px solid var(--rule); }
.ti li:last-child { border: 0; }
.ti li::before { position: absolute; left: 0; top: 8px; font-family: var(--disp); font-size: var(--t-note); }
.ti.pro li::before { content: "+"; color: var(--moss); }
.ti.con li::before { content: "\2212"; color: var(--clay); }

/* --------------------------------------------------------------------------
   Flags: the three that carry meaning, and the one that carries none
   -------------------------------------------------------------------------- */

.warn { border-radius: 14px; padding: 22px 26px; margin-top: 14px; background: var(--leaf); border: 1px solid var(--rule); border-left: 3px solid var(--clay); }
.warn .k { font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--clay); margin-bottom: 8px; }
.warn p { font-size: var(--t-note); color: var(--soft); max-width: 66ch; }
.warn p + p { margin-top: 10px; }

.lock { background: var(--tint); border-radius: 14px; padding: 20px 26px; margin-top: 16px; font-size: var(--t-note); color: var(--soft); max-width: 74ch; }
.lock b { color: var(--ink); font-weight: 500; }

.shut { background: var(--leaf); border: 1px dashed var(--rule); border-radius: 14px; padding: 24px 28px; margin-top: 14px; }
.shut .k { font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--clay); margin-bottom: 9px; }
.shut p { font-size: var(--t-note); color: var(--soft); max-width: 66ch; }

/* The designed empty state. An empty board is the truth, not an error. */
.void { background: var(--leaf); border: 1px dashed var(--rule); border-radius: 14px; padding: 58px 30px; margin-top: 14px; }
.void h4 { font-family: var(--disp); font-size: 26px; font-weight: 300; }
.void p { font-size: var(--t-note); color: var(--soft); margin-top: 9px; max-width: 52ch; }

/* Loading is one plain line. No skeleton, no shimmer, no spinner. */
.loading { color: var(--soft); padding: 24px 0; font-size: var(--t-note); }

/* An error is not an empty board, and must never look like one. */
.err { background: var(--leaf); border: 1px solid var(--rule); border-left: 3px solid var(--clay); border-radius: 14px; padding: 26px 28px; margin-top: 14px; }
.err h4 { font-family: var(--disp); font-size: 24px; font-weight: 300; }
.err p { font-size: var(--t-note); color: var(--soft); margin-top: 8px; max-width: 60ch; }

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */

button, .btn {
  font-family: var(--body); font-size: var(--t-note);
  height: 48px; padding: 0 26px;
  border-radius: 24px; border: 1px solid var(--rule);
  background: var(--leaf); color: var(--ink);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: border-color .18s, background .18s;
}
button:hover, .btn:hover { border-color: var(--deep); }
button.go, .btn.go { background: var(--deep); border-color: var(--deep); color: var(--paper); }
button.go:hover, .btn.go:hover { background: var(--deep-lift); border-color: var(--deep-lift); }
button:disabled { opacity: .45; cursor: default; }
.acts { display: flex; gap: 11px; margin-top: 26px; flex-wrap: wrap; }

input, select {
  font-family: var(--body); font-size: var(--t-note);
  height: 48px; padding: 0 16px;
  border-radius: 24px; border: 1px solid var(--rule);
  background: var(--leaf); color: var(--ink);
  width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--brass); outline-offset: 2px; border-color: var(--brass); }
textarea {
  font-family: var(--body); font-size: var(--t-note); line-height: 1.6;
  width: 100%; min-height: 96px; padding: 14px 18px;
  border-radius: 18px; border: 1px solid var(--rule);
  background: var(--leaf); color: var(--ink); resize: vertical;
}
textarea:focus { outline: 2px solid var(--brass); outline-offset: 2px; border-color: var(--brass); }
label { display: block; font-size: 11.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--dim); margin-bottom: 7px; }

/* Filter and toggle chips. */
.filt { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 22px; align-items: center; }
.chip {
  font-size: var(--t-nav); color: var(--soft);
  padding: 8px 16px; border-radius: 20px;
  border: 1px solid var(--rule); background: var(--leaf);
  cursor: pointer; transition: border-color .16s, color .16s, background .16s;
}
.chip:hover { border-color: var(--deep); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--deep); border-color: var(--deep); color: var(--paper); }
.chip.sep { border: 0; background: transparent; cursor: default; color: var(--dim); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; padding-left: 4px; }
.chip.sep:hover { border: 0; color: var(--dim); }

/* A destructive step asks in a sentence and takes a second tap. Never a red
   fill: clay means "this wants you", and a delete button is not that. */
.confirm { background: var(--tint); border-radius: 14px; padding: 22px 26px; margin-top: 14px; }
.confirm p { font-size: var(--t-note); color: var(--soft); max-width: 62ch; margin-bottom: 14px; }

.saved { font-size: 14.5px; color: var(--soft); margin-top: 12px; min-height: 1.4em; }

/* --------------------------------------------------------------------------
   Tables and lists
   -------------------------------------------------------------------------- */

.mrow {
  display: grid; grid-template-columns: minmax(0, 2.2fr) 62px minmax(0, 1.6fr) 104px 104px 96px;
  gap: 14px; align-items: center;
  padding: 15px 24px; border: 1px solid var(--rule); border-radius: 14px;
  background: var(--leaf); margin-top: 9px; font-size: 14.5px;
  transition: border-color .18s;
}
.mrow.hd { background: transparent; border: 0; padding: 18px 24px 4px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin: 0; }
.mrow h4 { font-family: var(--disp); font-size: var(--t-sub); font-weight: 400; }
.mrow .sm { color: var(--soft); font-size: 13.5px; }
.sex { font-family: var(--disp); font-size: 18px; color: var(--soft); }

/* A person on the People screen: the row, and the panel it opens. */
.person { margin-top: 9px; }
.person .mrow { margin-top: 0; }
.mrow.open { cursor: pointer; }
.mrow.open:hover { border-color: var(--deep); }
.mrow.open[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; }
.detail {
  border: 1px solid var(--rule);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  background: var(--leaf);
  padding: 4px 24px 24px;
}
.detail .p { border: 0; padding: 0; }
@media (max-width: 820px) { .detail { padding: 4px 18px 18px; } }

/* Package is identity, not status, so it is typographic rather than chromatic.
   The prototype gave each tier its own fill, which is a fourth meaning for
   colour and breaks the three-meaning rule this whole sheet turns on. */
.tier { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 11px; border-radius: 12px; display: inline-block; white-space: nowrap; border: 1px solid var(--rule); color: var(--soft); }
.tier.plat { border-color: var(--deep); color: var(--deep); }

/* Founding is a fact about when somebody joined. Brass, because it is a
   standing you set rather than a number that was measured. */
.fnd { display: inline-block; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--brass); border: 1px solid var(--brass); border-radius: 10px; padding: 1px 8px; margin-left: 8px; vertical-align: 2px; white-space: nowrap; }
.hand { display: inline-block; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--brass); border: 1px solid var(--brass); border-radius: 10px; padding: 1px 8px; margin-left: 9px; vertical-align: 2px; }

.bars { margin-top: 14px; }
.bl { display: grid; grid-template-columns: 150px minmax(0, 1fr) 54px; gap: 16px; align-items: center; padding: 9px 0; font-size: 14.5px; }
.bl .n { color: var(--soft); }
.bl .t3 { height: 8px; background: var(--rule); border-radius: 5px; overflow: hidden; }
.bl .t3 i { display: block; height: 100%; background: var(--deep); }
.bl .c2 { text-align: right; font-variant-numeric: tabular-nums; color: var(--soft); font-size: 13.5px; }

.fun { background: var(--leaf); border: 1px solid var(--rule); border-radius: 14px; padding: 26px 28px; margin-top: 14px; }
.fs { display: grid; grid-template-columns: 210px minmax(0, 1fr) 128px; gap: 18px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.fs:last-child { border: 0; }
.fs .n { font-size: 15.5px; }
.fs .n span { display: block; font-size: var(--t-meta); color: var(--soft); margin-top: 2px; }
.fs .t4 { height: 26px; background: var(--rule); border-radius: 6px; overflow: hidden; }
.fs .t4 i { display: block; height: 100%; background: var(--deep); }
.fs .t4 i.c { background: var(--clay); }
.fs .t4 i.g { background: var(--brass); }
.fs .v2 { text-align: right; font-family: var(--disp); font-size: var(--t-card); font-weight: 300; font-variant-numeric: tabular-nums; }
.fs .v2 span { display: block; font-family: var(--body); font-size: 12.5px; color: var(--soft); }

.cap { display: grid; grid-template-columns: 130px minmax(0, 1fr) 128px; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.cap:last-child { border: 0; }
.cap .nm2 { font-family: var(--disp); font-size: 21px; font-weight: 400; }
.cap .nm2 span { display: block; font-family: var(--body); font-size: 12.5px; color: var(--soft); margin-top: 2px; }
.cap .t6 { height: 20px; background: var(--rule); border-radius: 6px; overflow: hidden; }
.cap .t6 i { display: block; height: 100%; background: var(--deep); }
.cap .rm { text-align: right; font-family: var(--disp); font-size: 22px; font-weight: 300; font-variant-numeric: tabular-nums; }
.cap .rm span { display: block; font-family: var(--body); font-size: var(--t-micro); color: var(--soft); margin-top: 2px; }

.tg { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; margin-top: 14px; }
.tc { border: 1px solid var(--rule); border-radius: 14px; padding: 20px 22px; background: var(--leaf); }
.tc .nm { font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--soft); }
.tc .ct { font-family: var(--disp); font-size: 38px; font-weight: 300; line-height: 1; margin-top: 10px; font-variant-numeric: tabular-nums; }
.tc .pc { font-size: 13.5px; color: var(--dim); margin-top: 6px; }

/* --------------------------------------------------------------------------
   The ratio bar: the single most consequential number on the People screen
   -------------------------------------------------------------------------- */

.ratio { background: var(--leaf); border: 1px solid var(--rule); border-radius: 14px; padding: 26px 28px; margin-top: 22px; }
.rbar { display: flex; height: 44px; border-radius: 8px; overflow: hidden; margin-top: 16px; background: var(--rule); }
.rbar div { display: flex; align-items: center; padding: 0 16px; font-size: var(--t-nav); white-space: nowrap; }
.rbar .w { background: var(--deep); color: var(--paper); }
.rbar .m { background: var(--brass); color: #241a08; }

/* --------------------------------------------------------------------------
   Quotes and the decision log
   -------------------------------------------------------------------------- */

.said { background: var(--tint); border-radius: 14px; padding: 22px 26px; margin-top: 12px; }
.said .who { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); margin-bottom: 8px; }
.said p { font-size: var(--t-body); line-height: 1.6; font-family: var(--disp); font-weight: 300; }

.learn { background: var(--leaf); border: 1px solid var(--rule); border-radius: 14px; padding: 24px 28px; margin-top: 12px; }
.learn .hd2 { display: flex; justify-content: space-between; gap: 18px; align-items: baseline; flex-wrap: wrap; }
.learn h4 { font-family: var(--disp); font-size: 23px; font-weight: 400; }
/* The verdict rides the three meanings and nothing else. */
.vd { font-size: 11.5px; letter-spacing: .11em; text-transform: uppercase; padding: 3px 12px; border-radius: 12px; white-space: nowrap; border: 1px solid var(--rule); color: var(--soft); }
.vd.right { border-color: var(--moss); color: var(--moss); }
.vd.wrong { border-color: var(--clay); color: var(--clay); }
.learn .said2 { font-family: var(--disp); font-size: 17px; font-weight: 300; line-height: 1.55; margin-top: 14px; padding-left: 16px; border-left: 2px solid var(--rule); }
.learn .then { font-size: var(--t-note); color: var(--soft); margin-top: 14px; }
.learn .then b { color: var(--ink); font-weight: 500; }

/* --------------------------------------------------------------------------
   Goals: dials
   -------------------------------------------------------------------------- */

.dials { background: var(--leaf); border: 1px solid var(--rule); border-radius: 14px; padding: 26px 28px; margin-top: 14px; }
.dl { display: grid; grid-template-columns: 238px minmax(0, 1fr) 138px; gap: 18px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.dl:last-child { border: 0; }
.dl .n { font-size: var(--t-note); }
.dl .n span { display: block; font-size: 12.5px; color: var(--soft); margin-top: 2px; }
/* Where a figure came from. Moss: measured. Brass: you set it. */
.src { display: block; font-size: 12.5px; margin-top: 2px; }
.src.ok { color: var(--moss); }
.src.you { color: var(--brass); }

input[type=range] { width: 100%; height: 26px; padding: 0; border: 0; background: transparent; accent-color: var(--deep); }

/* A slider and, under it, the same value in the other unit. A percentage and a
   headcount are the same decision said two ways, and keeping them a mental
   conversion apart is how somebody sets six percent without noticing it is
   twenty four people. */
.dcell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dsub { font-size: var(--t-meta); color: var(--dim); font-variant-numeric: tabular-nums; }
.rd { display: flex; align-items: center; justify-content: flex-end; gap: 1px; }
.numin {
  font-family: var(--disp); font-size: 22px; font-weight: 300;
  font-variant-numeric: tabular-nums; text-align: right;
  width: 100%; height: 38px; padding: 0 6px;
  border: 1px solid transparent; background: transparent; border-radius: 8px; color: var(--ink);
}
.numin:hover { border-color: var(--rule); }
.numin:focus { border-color: var(--brass); background: var(--paper); outline: none; }
.unit { font-style: normal; font-family: var(--disp); font-size: var(--t-sub); font-weight: 300; color: var(--soft); }
.unit.pre { margin-right: -2px; }

/* Rows 5 and 6 are arithmetic, not decisions. They are greyed and there is no
   control in them at all, so there is nothing to type into. */
.dl.derived { color: var(--dim); }
.dl.derived .n { color: var(--dim); }
.dl.derived .mid { font-size: var(--t-note); color: var(--dim); font-variant-numeric: tabular-nums; }
.dl.derived .rd { font-family: var(--disp); font-size: 22px; font-weight: 300; color: var(--dim); font-variant-numeric: tabular-nums; }

.out { background: var(--tint); border-radius: 14px; padding: 28px 30px; margin-top: 22px; }
.out .big { font-family: var(--disp); font-size: clamp(34px, 6vw, 60px); font-weight: 300; line-height: 1.05; letter-spacing: -.02em; }
.out .big em { font-style: italic; color: var(--brass); }
.out p { font-size: 15.5px; color: var(--soft); margin-top: 14px; max-width: 64ch; }

.brk { background: var(--leaf); border: 1px solid var(--rule); border-radius: 14px; padding: 20px 26px; margin-top: 14px; }
.bk { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; }
.bk:last-child { border: 0; font-weight: 500; }
.bk span:first-child { color: var(--soft); }
.bk span:last-child { font-family: var(--disp); font-size: 18px; font-weight: 300; font-variant-numeric: tabular-nums; color: var(--ink); }

/* --------------------------------------------------------------------------
   Spend: profit and loss
   -------------------------------------------------------------------------- */

.pnl { background: var(--leaf); border: 1px solid var(--rule); border-radius: 14px; padding: 8px 28px 22px; margin-top: 14px; }
.pl { display: grid; grid-template-columns: minmax(0, 1fr) 100px 112px; gap: 16px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 15.5px; }
.pl:last-child { border: 0; }
.pl .a, .pl .b { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--disp); font-weight: 300; font-size: 19px; }
.pl .b { color: var(--dim); font-size: var(--t-note); }
.pl.h { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); padding: 14px 0 9px; }
.pl.h .a, .pl.h .b { font-family: var(--body); font-size: 11.5px; letter-spacing: .12em; font-weight: 400; }
.pl.grp { font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--soft); padding-top: 24px; border-bottom: 0; padding-bottom: 2px; }
.pl.sum { border-top: 2px solid var(--ink); border-bottom: 0; margin-top: 8px; padding-top: 15px; }
.pl.sum span:first-child { font-family: var(--disp); font-size: 21px; }
.pl.sum .a { font-size: 28px; }
.sub2 { color: var(--soft); font-size: 13.5px; display: block; margin-top: 2px; }
.neg { color: var(--clay); }
.pos { color: var(--moss); }

.addbox { background: var(--tint); border-radius: 14px; padding: 24px 28px; margin-top: 16px; }
.addbox .k { font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--soft); margin-bottom: 14px; }
.fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) 122px auto; gap: 11px; align-items: center; }

.runway { background: var(--tint); border-radius: 14px; padding: 24px 28px; margin-top: 22px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; }
.runway .big { font-family: var(--disp); font-size: 46px; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.runway p { font-size: var(--t-note); color: var(--soft); max-width: 58ch; }

/* --------------------------------------------------------------------------
   Matching: the odds panel
   -------------------------------------------------------------------------- */

.odds { background: var(--leaf); border: 1px solid var(--rule); border-radius: 14px; padding: 26px 28px; margin-top: 22px; }
.odds .top { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.odds .big { font-family: var(--disp); font-size: 52px; font-weight: 300; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.odds .lab { font-size: var(--t-note); color: var(--soft); }
.cal { margin-top: 16px; background: var(--tint); border-radius: 10px; padding: 14px 18px; font-size: var(--t-nav); color: var(--soft); max-width: 70ch; }
.cal b { color: var(--clay); font-weight: 500; }
.comp { margin-top: 20px; }
.cr { display: grid; grid-template-columns: 190px minmax(0, 1fr) 96px; gap: 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; }
.cr:last-child { border: 0; }
.cr .n { color: var(--soft); }
.meter { height: 6px; background: var(--rule); border-radius: 4px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--deep); }
.meter i.w { background: var(--brass); }
.meter i.b { background: var(--clay); }
.cr .pv { text-align: right; font-variant-numeric: tabular-nums; color: var(--soft); font-size: 13.5px; }

.alt { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 18px; align-items: center; background: var(--leaf); border: 1px solid var(--rule); border-radius: 14px; padding: 18px 24px; margin-top: 11px; transition: border-color .18s; }
.alt:hover { border-color: var(--deep); }
.alt .rk { font-family: var(--disp); font-size: 23px; font-weight: 300; color: var(--dim); font-variant-numeric: tabular-nums; }
.alt h4 { font-family: var(--disp); font-size: 21px; font-weight: 400; }
.alt p { font-size: 14.5px; color: var(--soft); margin-top: 3px; }
.alt .sc { text-align: right; white-space: nowrap; font-family: var(--disp); font-size: 23px; font-weight: 300; font-variant-numeric: tabular-nums; color: var(--soft); }

/* --------------------------------------------------------------------------
   The glossary and the colour key
   -------------------------------------------------------------------------- */

.key { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 16px; font-size: var(--t-nav); color: var(--soft); }
.key span { display: flex; align-items: center; gap: 8px; }
.key b { width: 11px; height: 11px; border-radius: 3px; display: block; }

.gl { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 30px; padding: 24px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.gl .t2 { font-family: var(--disp); font-size: var(--t-card); font-weight: 400; }
.gl .o { font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-top: 5px; }
.gl p { font-size: var(--t-body); color: var(--soft); max-width: 60ch; }

.spread { display: flex; gap: 2px; margin-top: 16px; align-items: flex-end; height: 52px; }
.spread i { flex: 1; background: var(--rule); border-radius: 2px 2px 0 0; min-height: 3px; }
.spread i.slow { background: var(--clay); }
.spread i.ok { background: var(--deep); }

.deliver { background: var(--leaf); border: 1px solid var(--rule); border-left: 3px solid var(--clay); border-radius: 14px; padding: 28px 32px; margin-top: 8px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: center; }
.deliver .big { font-family: var(--disp); font-size: 64px; font-weight: 300; line-height: .95; font-variant-numeric: tabular-nums; white-space: nowrap; }
.deliver .big span { display: block; font-family: var(--body); font-size: var(--t-meta); letter-spacing: .11em; text-transform: uppercase; color: var(--soft); margin-top: 10px; }
.deliver .big.none { font-family: var(--body); font-size: 21px; white-space: normal; color: var(--dim); }
.deliver p { font-size: var(--t-body); line-height: 1.6; color: var(--soft); max-width: 56ch; }
.deliver p b { color: var(--ink); font-weight: 500; }

/* --------------------------------------------------------------------------
   Phone
   -------------------------------------------------------------------------- */

@media (max-width: 820px) {
  .frame { grid-template-columns: 1fr; }
  .rail {
    position: sticky; top: 0; z-index: 30;
    height: auto; padding: 0;
    border-right: 0; border-bottom: 1px solid var(--rule);
    background: rgba(242, 237, 226, .97);
    backdrop-filter: blur(8px);
  }
  .rhead { padding: 12px 18px; }
  .fold { display: flex; }
  .menu { max-height: 0; overflow: hidden; transition: max-height .24s ease; }
  .menu.open { max-height: 78vh; overflow-y: auto; padding-bottom: 14px; }
  .cat > summary { padding: 14px 18px 4px; }
  .t { padding: 11px 18px; }
  .pg { padding: 30px var(--gut) 80px; }

  .two, .argue, .tally { grid-template-columns: 1fr; }
  .case { grid-template-columns: minmax(0, 1fr) auto; }
  .deliver { grid-template-columns: 1fr; gap: 16px; }
  .deliver .big { font-size: 48px; }
  .cr { grid-template-columns: 1fr; gap: 5px; }
  .cr .pv { text-align: left; }
  .cap { grid-template-columns: 1fr; gap: 8px; }
  .cap .rm { text-align: left; }
  .fs { grid-template-columns: 1fr; gap: 8px; }
  .fs .v2 { text-align: left; }
  .dl { grid-template-columns: 1fr; gap: 6px; }
  .dl .rd { justify-content: flex-start; }
  .dl.derived .rd { justify-content: flex-start; }
  .fields { grid-template-columns: 1fr; }
  .runway { grid-template-columns: 1fr; gap: 12px; }
  .pl { grid-template-columns: minmax(0, 1fr) 92px; }
  .pl .b { display: none; }
  .mrow { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 16px 18px; }
  .mrow.hd { display: none; }
  .mrow .hide { display: none; }
  .bl { grid-template-columns: 112px minmax(0, 1fr) 44px; }
  .gl { grid-template-columns: 1fr; gap: 8px; }
  .alt { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; padding: 16px 18px; }
  .stage { font-size: 10px; letter-spacing: .04em; }
  .rbar div { padding: 0 10px; font-size: 13px; }
}

/* ==========================================================================
   To do (/founder/tasks)

   The three meanings do the work here and no fourth colour is introduced:
   clay marks the group only you can finish, because that is the one nobody
   else can move; brass marks the group that needs a handoff, because a handoff
   is a decision waiting on somebody; moss marks anything already done. The
   group I can finish alone carries deep navy, which is structure rather than
   meaning, because "I will do this" is not a state that wants your attention.
   ========================================================================== */

.tk-top {
  display: flex;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}

.tk-count { display: flex; flex-direction: column; gap: 2px; }

.tk-fig {
  font-family: var(--disp);
  font-size: 30px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.tk-cap { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }

.tk-filters { margin-left: auto; }

.tk-board { margin-top: 8px; }

.tk-group { margin-top: 38px; }

.tk-ghead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 2px solid var(--deep);
  padding-bottom: 8px;
}

.tk-ghead h2 { font-family: var(--disp); font-weight: 400; font-size: 21px; color: var(--ink); }

.tk-gcount {
  font-size: 12.5px;
  color: var(--soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tk-gblurb { margin-top: 10px; color: var(--soft); font-size: 14.5px; max-width: 46rem; }

.tk-bar {
  height: 4px;
  background: var(--tint);
  border-radius: 999px;
  margin-top: 14px;
  overflow: hidden;
}

.tk-bar span { display: block; height: 100%; width: 0; background: var(--moss); transition: width .2s ease; }

.tk-list { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }

.tk-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 0 14px;
  align-items: start;
  background: var(--leaf);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--deep);
  border-radius: 10px;
  padding: 15px 18px 14px 15px;
}

.tk-group-you .tk-item  { border-left-color: var(--clay); }
.tk-group-both .tk-item { border-left-color: var(--brass); }

.tk-item.is-done { border-left-color: var(--moss); background: var(--tint); }
.tk-item.is-done .tk-title { color: var(--soft); }
.tk-item.is-done .tk-why { color: var(--dim); }

.tk-item.tk-failed { border-color: var(--clay); }

.tk-box {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  border: 1.5px solid var(--dim);
  border-radius: 6px;
  background: var(--paper);
  cursor: pointer;
  display: grid;
  place-content: center;
}

.tk-box:hover { border-color: var(--ink); }
.tk-box:disabled { cursor: default; opacity: .85; }
.tk-box:checked { background: var(--moss); border-color: var(--moss); }

.tk-box:checked::after {
  content: "";
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--leaf);
  border-bottom: 2px solid var(--leaf);
  transform: rotate(-45deg) translate(1px, -1px);
}

.tk-box:focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; }

.tk-body { min-width: 0; }

.tk-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

.tk-title {
  font-family: var(--body);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--ink);
  cursor: pointer;
}

.tk-cat {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--soft);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 2px 7px;
  white-space: nowrap;
}

.tk-why { margin-top: 6px; color: var(--soft); font-size: 14.5px; }

.tk-handoff {
  margin-top: 8px;
  font-size: 14px;
  color: var(--brass);
  border-left: 2px solid var(--brass);
  padding-left: 10px;
}

/* What is standing in front of a task. Colour stays inside the three meanings: clay for the ones
   that genuinely cannot move without Ari, brass for the ones waiting on a number or a judgment he
   sets. "approve" is deliberately NOT clay: nothing is blocked, it just does not ship unread. */
.tk-needs {
  margin-top: 10px;
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--tint);
  border-left: 2px solid var(--dim);
}

.tk-needs-input   { border-left-color: var(--clay); }
.tk-needs-answer  { border-left-color: var(--brass); }
.tk-needs-approve { border-left-color: var(--deep); }

.tk-needs-tag {
  display: block;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--soft);
}

.tk-needs-input .tk-needs-tag   { color: var(--clay); }
.tk-needs-answer .tk-needs-tag  { color: var(--brass); }
.tk-needs-approve .tk-needs-tag { color: var(--deep); }

.tk-needs p { font-size: 14px; color: var(--soft); }

.tk-clear { margin-top: 9px; font-size: 13px; color: var(--moss); }

.tk-det { margin-top: 11px; }

.tk-det > summary {
  cursor: pointer;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--deep);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
}

.tk-det > summary::-webkit-details-marker { display: none; }
.tk-det > summary::before { content: "＋"; font-size: 13px; color: var(--dim); }
.tk-det[open] > summary::before { content: "－"; }
.tk-det > summary:focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; }

.tk-steps { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.tk-steps li { font-size: 14px; color: var(--soft); }

.tk-when {
  margin-top: 11px;
  font-size: 14px;
  color: var(--ink);
  background: var(--tint);
  border-radius: 8px;
  padding: 9px 12px;
}

.tk-when strong { font-weight: 600; }

.tk-ev { margin-top: 9px; font-size: 12.5px; color: var(--dim); }

/* Finished work, as distinct from a box Ari ticked. Moss, because it is the third meaning:
   fine, leave it alone. */
.tk-item.tk-shipped { border-left-color: var(--moss); background: var(--tint); }
.tk-item.tk-shipped .tk-title { color: var(--soft); }

.tk-shipped-tag {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--moss);
  border: 1px solid var(--moss);
  border-radius: 5px;
  padding: 2px 7px;
  white-space: nowrap;
}

.tk-completed-note { margin-top: 6px; font-size: 14px; color: var(--brass); }

/* Owner, now that phase does the grouping. Deliberately quiet: it answers a second question
   ("who") after the card has already answered the first one ("when"). */
.tk-own {
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--dim);
  white-space: nowrap;
}
.tk-own-me .tk-own { color: var(--deep); }
.tk-own-you .tk-own { color: var(--clay); }
.tk-own-both .tk-own { color: var(--brass); }

body.tk-hide-done .tk-item.is-done { display: none; }

@media (max-width: 720px) {
  .tk-top { gap: 20px; }
  .tk-filters { margin-left: 0; width: 100%; }
  .tk-item { padding: 14px 14px 13px 12px; gap: 0 11px; }
  .tk-fig { font-size: 26px; }
}

/* ------------------------------------------------------------------ rehearsal
   Task 41. Two things on one page: whether the machine can survive the walk,
   and the walk. Read on a PHONE, outside the house, so every measurement below
   is checked at 390px first and the desk is the second case, not the first.

   THE FOUR STATES USE THREE COLOURS, and that is not a shortage. D-18 fixes the
   palette at clay (this wants you now), brass (a number you set) and moss (fine,
   leave it alone). `unknown` is painted clay along with `blocked`, deliberately:
   a check that could not answer is not a check that passed, and the whole reason
   backup reporting fails loud is that "no news" and "no backup" must never look
   the same. There is no fourth colour meaning here. */
.rh-sum { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.rh-sum .rh-tally {
  background: var(--leaf); border: 1px solid var(--rule); border-radius: 12px;
  padding: 13px 18px; font-size: 13px; color: var(--soft);
}
.rh-sum .rh-tally b {
  font-family: var(--disp); font-size: 23px; font-weight: 300; color: var(--ink);
  margin-right: 8px; font-variant-numeric: tabular-nums;
}
.rh-sum .rh-tally.is-blocked b { color: var(--clay); }
.rh-sum .rh-tally.is-watch b { color: var(--brass); }
.rh-sum .rh-tally.is-ready b { color: var(--moss); }

.rh-grp { margin-top: 40px; }
.rh-grp > p { font-size: var(--t-note); color: var(--soft); max-width: 64ch; margin-top: 4px; }

.rh-check {
  display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 0 14px;
  padding: 16px 0; border-bottom: 1px solid var(--rule); align-items: start;
}
.rh-check:last-child { border-bottom: 0; }
.rh-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: var(--dim); }
.rh-blocked .rh-dot, .rh-unknown .rh-dot { background: var(--clay); }
.rh-watch .rh-dot { background: var(--brass); }
.rh-ready .rh-dot { background: var(--moss); }
.rh-check h4 { font-family: var(--disp); font-size: 19px; font-weight: 400; letter-spacing: -.01em; }
.rh-check .rh-says { font-size: 14.5px; color: var(--soft); margin-top: 4px; max-width: 68ch; }
.rh-check .rh-do {
  font-size: 13.5px; color: var(--ink); margin-top: 8px; max-width: 68ch;
  border-left: 2px solid var(--clay); padding-left: 12px;
}
.rh-watch .rh-do { border-left-color: var(--brass); }
.rh-ready .rh-do { border-left-color: var(--moss); }

/* The walk. A checklist that survives a reload, because it is read on a phone in
   the street and a phone in the street backgrounds the browser. */
.rh-step {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0 12px;
  padding: 16px 0; border-bottom: 1px solid var(--rule); align-items: start;
}
.rh-step:last-child { border-bottom: 0; }
.rh-step input { width: 18px; height: 18px; margin-top: 4px; accent-color: var(--deep); }
.rh-step h4 { font-family: var(--disp); font-size: 20px; font-weight: 400; letter-spacing: -.01em; }
.rh-step p { font-size: 14.5px; color: var(--soft); margin-top: 5px; max-width: 66ch; }
.rh-step .rh-look { font-size: 13.5px; color: var(--dim); margin-top: 7px; }
.rh-step .rh-look b { color: var(--soft); font-weight: 500; }
.rh-step.is-done h4, .rh-step.is-done p, .rh-step.is-done .rh-look { opacity: .45; }

@media (max-width: 720px) {
  .rh-check { padding: 14px 0; }
  .rh-check h4, .rh-step h4 { font-size: 18px; }
  .rh-sum .rh-tally { padding: 11px 15px; }
}

/* -------------------------------------------------------------- the cohort
   The invite form. Small enough that it borrows the rehearsal blocks above for
   the rows and only needs its own field styling. */
.co-lab {
  display: block; font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 8px;
}
.co-in, .co-sel {
  display: block; width: 100%; max-width: 420px; margin-bottom: 18px;
  padding: 11px 13px; font: inherit; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 10px;
}
.co-sel { max-width: 220px; }
.co-acts { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; }
.co-link {
  user-select: all; word-break: break-all; font-size: 14px; color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-reduced-motion: reduce) {
  *, .fold span, .menu, .cat > summary .ar { transition: none !important; }
}