/* ===========================================================================
   BILLIONERD — application design system
   Luxury, minimal, editorial. Cream / off-black / gold.
   Shared by every app + auth page. Mobile-first.
   =========================================================================== */

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

:root {
  --cream:      #F0EDE8;
  --paper:      #FBFAF8;
  --sand:       #E8E2D6;
  --ink:        #0D0D0D;
  --ink-soft:   #1C1C1A;
  --gold:       #B8960C;
  --gold-light: #D4AF37;
  /* Darker gold for small text on cream — the base gold fails contrast at label sizes. */
  --gold-deep:  #8A6F14;
  --mid:        #6B6B6B;
  --faint:      #9A958C;
  --line:       rgba(13,13,13,0.10);
  --line-2:     rgba(13,13,13,0.06);
  --good:       #3E7D52;
  --warn:       #B8960C;
  --radius:     14px;
  --radius-sm:  9px;
  --shadow:     0 1px 2px rgba(13,13,13,.04), 0 8px 30px rgba(13,13,13,.05);
  --shadow-sm:  0 1px 2px rgba(13,13,13,.05), 0 4px 14px rgba(13,13,13,.05);
  --shadow-lg:  0 24px 70px rgba(13,13,13,.16);
  --sidebar-w:  264px;
  --mono: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
  --display: 'Space Grotesk', sans-serif;
}

html { min-height: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  min-height: 100%;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.drawer-open { overflow: hidden; overscroll-behavior: none; }

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--cream); }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}
.mono { font-family: var(--mono); }
.muted { color: var(--mid); }
.faint { color: var(--faint); }
.serif-num { font-family: var(--mono); font-feature-settings: "tnum"; }

/* ---------- App shell ---------- */
.shell { display: flex; min-height: 100vh; min-height: 100dvh; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--ink);
  color: var(--cream);
  padding: calc(26px + env(safe-area-inset-top, 0px)) 18px calc(26px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
}
.sidebar .brand {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .22em;
  color: var(--cream);
  padding: 6px 12px 26px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar .brand .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-light); }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(240,237,232,.35);
  padding: 18px 12px 8px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: rgba(240,237,232,.66);
  font-size: 14px;
  font-weight: 450;
  transition: background .18s, color .18s;
}
.nav-item svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .85; }
.nav-item:hover { background: rgba(240,237,232,.06); color: var(--cream); }
.nav-item.active { background: var(--cream); color: var(--ink); font-weight: 550; }
.nav-item.active svg { opacity: 1; }
.sidebar .spacer { flex: 1; }
.side-user {
  border-top: 1px solid rgba(240,237,232,.12);
  padding-top: 14px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--ink);
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}
.avatar svg { width: 18px; height: 18px; stroke: var(--ink); }
.avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.side-user .meta { overflow: hidden; }
.side-user .meta .n { font-size: 13px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user .meta .e { font-size: 11px; color: rgba(240,237,232,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user button {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: rgba(240,237,232,.5); padding: 6px; border-radius: 6px; transition: color .15s, background .15s;
}
.side-user button svg { width: 17px; height: 17px; flex-shrink: 0; }
.side-user button:hover { color: var(--cream); background: rgba(240,237,232,.08); }

.content { flex: 1; margin-left: var(--sidebar-w); min-width: 0; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 66px;
  padding: 10px 34px;
  background: rgba(248,246,241,.92);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
  position: sticky; top: 0; z-index: 55;
}
.topbar .brand { display: none; font-family: var(--mono); font-weight: 700; letter-spacing: .2em; font-size: 15px; }
.topbar .menu-btn { display: none; background: none; border: none; color: inherit; cursor: pointer; padding: 4px; }
.account-menu-wrap { position: relative; }
.account-trigger {
  display: flex; align-items: center; gap: 10px; min-width: 180px;
  padding: 6px 8px 6px 6px; border: 1px solid transparent; border-radius: 999px;
  background: transparent; cursor: pointer; text-align: left;
  transition: background .18s, border-color .18s;
}
.account-trigger:hover, .account-trigger[aria-expanded="true"] { background: var(--paper); border-color: var(--line); }
.account-trigger .avatar { width: 36px; height: 36px; font-size: 12px; }
.account-trigger-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.account-trigger-copy strong { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.account-trigger-copy span { color: var(--mid); font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.account-chevron { width: 14px; height: 14px; margin-left: auto; transform: rotate(90deg); transition: transform .18s; }
.account-trigger[aria-expanded="true"] .account-chevron { transform: rotate(-90deg); }
.account-menu {
  position: absolute; top: calc(100% + 10px); right: 0; width: min(330px, calc(100vw - 24px));
  overflow: hidden; border: 1px solid rgba(13,13,13,.12); border-radius: 16px;
  background: var(--paper); box-shadow: 0 24px 70px rgba(13,13,13,.2);
  opacity: 0; transform: translateY(-6px) scale(.985); transform-origin: top right;
  max-height: min(620px, calc(100dvh - 92px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.account-menu.show { animation: account-menu-in .18s cubic-bezier(.2,.8,.2,1) forwards; }
.account-menu-head { display: flex; align-items: center; gap: 12px; padding: 18px; background: var(--ink); color: var(--cream); }
.account-menu-head .avatar { width: 42px; height: 42px; }
.account-menu-head div { min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.account-menu-head strong, .account-menu-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-head strong { font-size: 14px; }
.account-menu-head span { color: rgba(240,237,232,.58); font-size: 11px; }
.account-menu-items { padding: 8px; }
.account-menu-items a, .account-signout {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 11px;
  border: 0; border-radius: 9px; background: transparent; color: var(--ink);
  cursor: pointer; font-size: 13px; font-weight: 500; text-align: left;
  transition: background .15s, color .15s;
}
.account-menu-items a:hover, .account-signout:hover { background: var(--sand); }
.account-menu-items svg, .account-signout svg { width: 17px; height: 17px; color: var(--mid); flex-shrink: 0; }
.account-signout { border-top: 1px solid var(--line); border-radius: 0; padding: 14px 19px; color: #8a2b2b; }
.account-signout svg { color: currentColor; }
.account-signout.is-signing-out { opacity: .65; cursor: wait; }
@keyframes account-menu-in { to { opacity: 1; transform: none; } }
.scrim { display: none; position: fixed; inset: 0; background: rgba(13,13,13,.5); z-index: 58; }

.page { max-width: 1080px; margin: 0 auto; padding: 46px 40px 80px; }
.page-head { margin-bottom: 34px; }
.page-head h1 {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -.01em;
  margin-top: 8px;
}
.page-head p { color: var(--mid); margin-top: 8px; max-width: 60ch; }

/* ---------- Cards ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card.pad { padding: 24px; }
.card-ink { background: var(--ink); color: var(--cream); border-color: transparent; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.card-head h3 { font-family: var(--mono); font-weight: 600; font-size: 14px; letter-spacing: .02em; }
.dashboard-actionable {
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dashboard-actionable:hover { transform: translateY(-3px); border-color: rgba(13,13,13,.24); box-shadow: 0 18px 46px rgba(13,13,13,.12); }
.dashboard-actionable.card-ink:hover, .dashboard-actionable.next-move:hover { border-color: rgba(202,168,75,.72); }
.dashboard-actionable:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.dashboard-informational { box-shadow: none; }
.card-next { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); font-family: var(--mono); font-size: 11px; font-weight: 600; }
.card-next svg { width: 14px; height: 14px; }

.grid { display: grid; gap: 20px; }
.cols-2 { grid-template-columns: 1.4fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; /* touch-target floor; specific buttons below raise it */
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--ink); color: var(--cream);
  font-size: 14px; font-weight: 500; cursor: pointer;
  transition: transform .12s ease, background .2s, color .2s, border-color .2s;
}
.btn:hover { background: var(--gold); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-light); }
.btn-danger { background: #8a2b2b; border-color: #8a2b2b; color: #fff; }
.btn-danger:hover { background: #6f2020; border-color: #6f2020; }
.btn-sm { min-height: 36px; padding: 8px 14px; font-size: 13px; }
.btn-block { width: 100%; }

/* ---------- Forms ---------- */
.field { margin-bottom: 18px; }
.field label {
  display: block; font-size: 12px; font-weight: 500; letter-spacing: .02em;
  color: var(--mid); margin-bottom: 7px;
}
.input, textarea.input, select.input {
  width: 100%;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .18s, box-shadow .18s;
  outline: none;
}
.input:focus, textarea.input:focus, select.input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(184,150,12,.12);
}
textarea.input { resize: vertical; min-height: 110px; line-height: 1.6; }
/* iOS Safari rescales the whole page when a focused field is smaller than 16px.
   Lift form controls to 16px on phone widths so focusing one never zooms. */
@media (max-width: 760px) {
  .input, textarea.input, select.input { font-size: 16px; }
}
.form-error {
  background: rgba(160,40,40,.07);
  border: 1px solid rgba(160,40,40,.25);
  color: #8a2b2b;
  padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px;
  margin-bottom: 16px; display: none;
}
.form-error.show { display: block; }
.form-note { font-size: 13px; color: var(--mid); }

/* ---------- Badges / tags ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 100px;
  background: var(--sand); color: var(--ink-soft);
}
.badge.idea { background: #efe6c9; color: #6b560a; }
.badge.lesson { background: #dfe7df; color: #2f5238; }
.badge.decision { background: #e6ddf0; color: #4a3a6b; }
.badge.note { background: var(--sand); color: #4a463d; }
.lifecycle-badge { border: 1px solid transparent; white-space: nowrap; }
.lifecycle-question { background: #eee8dc; color: #5e5547; border-color: #d8cdbc; }
.lifecycle-exploring { background: #e8edf1; color: #405664; border-color: #cad5dc; }
.lifecycle-active_decision { background: #efe6c9; color: #6b560a; border-color: #ddcd97; }
.lifecycle-decided { background: #e6ddf0; color: #4a3a6b; border-color: #cfc0df; }
.lifecycle-executing { background: #dce9e2; color: #2f5b42; border-color: #bed4c5; }
.lifecycle-reviewed { background: #e6e3dc; color: #4f4a41; border-color: #d0cbc0; }
.lifecycle-learned { background: #dfe7df; color: #2f5238; border-color: #bfd0c1; }
.lifecycle-archived { background: #ecebea; color: #77716a; border-color: #d7d4d0; }
.lifecycle-control { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 0 16px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.lifecycle-control label { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mid); }
.lifecycle-control select { width: auto; min-width: 170px; padding: 7px 34px 7px 10px; }
.tag {
  display: inline-flex; font-size: 12px; color: var(--mid);
  padding: 3px 10px; border: 1px solid var(--line); border-radius: 100px;
  background: var(--paper); cursor: pointer; transition: all .15s;
}
.tag:hover, .tag.active { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* ---------- Score ring + bars ---------- */
.ring-wrap { position: relative; width: 184px; height: 184px; }
.ring-wrap svg { transform: rotate(-90deg); }
.ring-wrap .ring-center {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
}
.ring-center .val { font-family: var(--mono); font-weight: 700; font-size: 50px; line-height: 1; }
.ring-center .out { font-size: 12px; color: var(--faint); margin-top: 2px; }
.bar-row { margin-bottom: 14px; }
.bar-row .bl { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.bar-row .bl .bn { color: var(--ink-soft); }
.bar-row .bl .bv { font-family: var(--mono); color: var(--mid); }
.bar { height: 6px; background: var(--sand); border-radius: 100px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 100px; transition: width 1s cubic-bezier(.2,.7,.2,1); }

/* ---------- Trend chart ---------- */
.chart { width: 100%; height: 200px; display: block; }
.chart .area { fill: url(#goldfade); }
.chart .line { fill: none; stroke: var(--gold); stroke-width: 2.5; }
.chart .dot { fill: var(--ink); }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart text { font-family: var(--mono); font-size: 10px; fill: var(--faint); }

/* ---------- Lists / timeline ---------- */
.list-item {
  display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line-2);
}
.list-item:last-child { border-bottom: none; }
.priority {
  display: flex; gap: 13px; padding: 14px 0; border-bottom: 1px solid var(--line-2);
}
.priority:last-child { border-bottom: none; }
.priority .num {
  font-family: var(--mono); font-weight: 700; color: var(--gold);
  font-size: 13px; width: 22px; flex-shrink: 0;
}
.priority .pt { font-weight: 550; font-size: 14.5px; }
.priority .pw { font-size: 13px; color: var(--mid); margin-top: 3px; }

.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.tl-item { position: relative; padding: 0 0 26px; }
.tl-item::before {
  content: ""; position: absolute; left: -23px; top: 6px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--paper);
  border: 2px solid var(--gold);
}
.tl-date { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--faint); text-transform: uppercase; }

/* ---------- Checkbox habit ---------- */
.habit { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 0; border: 0; border-bottom: 1px solid var(--line-2); background: transparent; color: inherit; cursor: pointer; font: inherit; text-align: left; }
.habit:last-child { border-bottom: none; }
.habit:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--radius-sm); }
.habit:disabled { cursor: wait; opacity: .65; }
.check {
  width: 21px; height: 21px; border-radius: 6px; border: 1.5px solid var(--line);
  display: grid; place-items: center; flex-shrink: 0; transition: all .18s; background: var(--paper);
}
.check svg { width: 13px; height: 13px; stroke: var(--cream); opacity: 0; transition: opacity .15s; }
.habit.done .check { background: var(--ink); border-color: var(--ink); }
.habit.done .check svg { opacity: 1; }
.habit.done .hn { color: var(--faint); text-decoration: line-through; }
.hn { font-size: 14px; }
.habit-empty strong { display: block; margin-bottom: 7px; font-family: var(--mono); font-size: 14px; }
.habit-empty p { margin-bottom: 15px; color: var(--mid); font-size: 13px; line-height: 1.55; }

/* ---------- Habits page ---------- */
.habits-overview { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .7fr); gap: 20px; align-items: start; }
.habit-progress { display: flex; align-items: center; gap: 18px; padding: 18px; margin-bottom: 10px; border-radius: var(--radius-sm); background: var(--sand); }
.habit-progress-value { min-width: 76px; font-family: var(--display); font-size: 38px; line-height: 1; }
.habit-progress-copy strong { display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 13px; }
.habit-progress-copy span { color: var(--mid); font-size: 13px; }
.habit-tracker .habit { padding: 16px 4px; }
.habit-tracker .check { width: 25px; height: 25px; }
.habit-tracker .hn { font-size: 15px; }
.habit-onboarding { padding: 44px 28px; text-align: center; }
.habit-onboarding-mark { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 20px; border-radius: 18px; background: var(--ink); color: var(--gold-light); }
.habit-onboarding-mark svg { width: 27px; height: 27px; }
.habit-onboarding h2 { margin-bottom: 10px; font-family: var(--display); font-size: 28px; }
.habit-onboarding > p { max-width: 500px; margin: 0 auto 24px; color: var(--mid); line-height: 1.65; }
.habit-create { position: sticky; top: 88px; }
.habit-create h2 { margin: 6px 0 8px; font-family: var(--display); font-size: 22px; }
.habit-create .input { margin: 18px 0 12px; }
.habit-create .btn { width: 100%; }
@media (max-width: 760px) {
  .habits-overview { grid-template-columns: 1fr; }
  .habit-create { position: static; }
}

/* ---------- Quick actions ---------- */
.qa-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.qa {
  display: flex; flex-direction: column; gap: 10px; padding: 16px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper);
  transition: transform .14s, border-color .18s, background .18s;
}
.qa:hover { transform: translateY(-2px); border-color: var(--ink); }
.qa svg { width: 20px; height: 20px; color: var(--gold); }
.qa .qt { font-weight: 550; font-size: 14px; }
.qa .qd { font-size: 12px; color: var(--mid); }

/* ---------- Chat (FitBot) ---------- */
/* The chat page is a fixed-height column so the thread scrolls inside itself
   and the composer stays pinned to the bottom. dvh is what keeps the composer
   above Safari's collapsing toolbar; 100vh alone pushes it off-screen on iOS. */
.content-chat { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.content-chat > header { flex: 0 0 auto; }
.chat-wrap { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.chat-stream { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 36px 0 24px; }
.chat-composer { flex: 0 0 auto; }
.chat-inner { max-width: 760px; margin: 0 auto; padding: 0 24px; }
/* Two fixed columns: the speaker mark and the message text. A grid (not flex)
   guarantees the text column starts after the mark on every engine, and the
   mark clips its own label so a long name can never bleed onto the message. */
.msg { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; margin-bottom: 26px; align-items: start; }
.msg .who {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  overflow: hidden; font-family: var(--mono); font-weight: 700; font-size: 11px;
  line-height: 1; letter-spacing: 0; text-align: center; white-space: nowrap;
}
.msg.assistant .who { background: var(--ink); color: var(--gold-light); }
.msg.user .who { background: var(--sand); color: var(--ink); font-size: 9px; }
.msg .msg-body { min-width: 0; }
.msg .msg-author { display: block; margin-bottom: 3px; color: var(--faint); font: 600 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.msg .bubble { font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.msg .bubble p { margin-bottom: 12px; }
.msg .bubble p:last-child { margin-bottom: 0; }
.msg .bubble pre { max-width: 100%; overflow-x: auto; }
.msg.user .bubble { color: var(--ink-soft); }
.msg .thinking-line { display: inline-flex; align-items: center; gap: 9px; color: var(--mid); }
.msg .thinking-line em { font-size: 13.5px; font-style: normal; }
.chat-composer { border-top: 1px solid var(--line); background: var(--cream); padding: 16px 24px 22px; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
.composer-inner { max-width: 760px; margin: 0 auto; display: flex; gap: 10px; align-items: flex-end; }
.composer-inner textarea {
  flex: 1; min-width: 0; resize: none; max-height: 160px; min-height: 50px;
  padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper);
  outline: none; line-height: 1.5; font-size: 16px; /* 16px keeps iOS Safari from zooming the viewport on focus */
}
.composer-inner textarea:focus { border-color: var(--ink); }
.composer-send { min-width: 92px; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding-inline: 16px; white-space: nowrap; }
.composer-send svg { width: 16px; height: 16px; }
.composer-foot { display: flex; gap: 10px 16px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; max-width: 760px; margin: 11px auto 0; }
.composer-foot:empty { display: none; }
.composer-foot .cf-note { min-width: 0; color: var(--faint); font: 500 11px/1.5 var(--mono); letter-spacing: .03em; }
.composer-foot .cf-finish { flex: 0 0 auto; padding: 0; border: 0; border-bottom: 1px solid rgba(184,145,66,.5); background: none; color: var(--gold-deep, #8a6f14); font: 600 11px/1.5 var(--mono); letter-spacing: .03em; cursor: pointer; }
.composer-foot .cf-finish:hover { color: var(--ink); border-bottom-color: var(--ink); }
.suggest { display: flex; gap: 8px; flex-wrap: wrap; max-width: 760px; margin: 0 auto 12px; }
.suggest:empty { display: none; }
.chip {
  font-size: 13px; padding: 7px 13px; border-radius: 100px; border: 1px solid var(--line);
  background: var(--paper); cursor: pointer; color: var(--mid); transition: all .15s;
}
.chip:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.typing span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); margin-right: 3px; animation: blink 1.2s infinite; }
.typing span:nth-child(2){ animation-delay:.2s } .typing span:nth-child(3){ animation-delay:.4s }
@keyframes blink { 0%,60%,100%{opacity:.25} 30%{opacity:1} }

.decision-detect { margin: -8px 0 26px 44px; border: 1px solid rgba(184,145,66,.45); background: linear-gradient(135deg, #fffdf7, var(--paper)); border-radius: var(--radius); padding: 17px 18px; box-shadow: var(--shadow-sm); }
.decision-detect .decision-summary { font-family: var(--display); font-size: 18px; line-height: 1.35; margin: 6px 0 14px; }
.decision-detect .decision-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.decision-detect.saved { border-color: rgba(58,113,77,.35); background: #f5faf6; }
.decision-detect .decision-goal { font-size: 13px; color: var(--mid); margin: -6px 0 14px; }

.capture-confirmation {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  margin: -8px 0 22px 44px; padding: 11px 13px; border: 1px solid rgba(62,125,82,.24);
  border-radius: var(--radius-sm); background: rgba(251,250,248,.82); box-shadow: var(--shadow-sm);
  transition: opacity .18s ease, transform .18s ease;
}
.capture-confirmation.capture-removed { opacity: 0; transform: translateY(-4px); }
.capture-check { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(62,125,82,.12); color: var(--good); }
.capture-check svg { width: 14px; height: 14px; }
.capture-copy { min-width: 0; }
.capture-copy strong { display: block; font-family: var(--mono); font-size: 12px; font-weight: 600; }
.capture-copy span { display: block; overflow: hidden; color: var(--mid); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.capture-actions { display: flex; gap: 9px; align-items: center; }
.capture-actions a, .capture-actions button { padding: 2px 0; border: 0; background: none; color: var(--mid); cursor: pointer; font-size: 12px; }
.capture-actions a:hover, .capture-actions button:hover { color: var(--ink); }

/* Persistent decision threads — banner shown when a message continues an open decision. */
.active-decision { margin: -8px 0 26px 44px; border: 1px solid rgba(58,113,77,.4); border-left: 3px solid var(--gold); background: linear-gradient(135deg, #f7faf6, var(--paper)); border-radius: var(--radius); padding: 17px 18px; box-shadow: var(--shadow-sm); }
.active-decision .decision-summary { font-family: var(--display); font-size: 18px; line-height: 1.35; margin: 6px 0 10px; }
.active-decision .decision-progress { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 12px; }
.active-decision .decision-progress span { font-size: 12px; font-family: var(--mono, monospace); color: var(--mid); background: rgba(184,145,66,.12); border-radius: 999px; padding: 3px 10px; }
.active-decision .decision-prior { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 12px; }
.active-decision .decision-prior .k { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mid); margin-bottom: 4px; }
.active-decision .decision-prior ul { margin: 0; padding-left: 18px; }
.active-decision .decision-prior li { margin-bottom: 4px; }
.decision-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.decision-edit-grid .wide { grid-column: 1 / -1; }
@media (max-width: 620px) {
  .decision-detect, .active-decision, .capture-confirmation { margin-left: 0; }
  .capture-confirmation { grid-template-columns: 28px minmax(0, 1fr); }
  .capture-actions { grid-column: 2; }
  .decision-edit-grid { grid-template-columns: 1fr; }
  .decision-edit-grid .wide { grid-column: auto; }
}

/* ---------- Decision detail + current-decision metrics ---------- */
.dd-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; }
.dd-metrics .mv { font-family: var(--display); font-size: 20px; line-height: 1.15; color: var(--ink); }
.dd-metrics .ml { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-top: 3px; }
.conf-seq { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.conf-step { font-family: var(--display); font-size: 20px; color: var(--ink); background: var(--sand); border-radius: 8px; padding: 4px 10px; }
.conf-arrow { color: var(--gold); display: inline-flex; width: 16px; }
.conf-arrow svg { width: 16px; height: 16px; }
.current-decision { border-left: 3px solid var(--gold); }
.current-decision .cd-title { font-family: var(--display); font-size: 19px; line-height: 1.3; margin: 4px 0 12px; }
.review-callout { border: 1px solid rgba(184,145,66,.5); background: linear-gradient(135deg, #fffdf7, var(--paper)); border-radius: var(--radius); padding: 18px 20px; margin-top: 20px; box-shadow: var(--shadow-sm); }
.review-callout .rc-item { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.review-callout .rc-item:first-of-type { border-top: none; }
@media (max-width: 620px) { .dd-metrics { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Modal ---------- */
.modal-scrim { position: fixed; inset: 0; background: rgba(13,13,13,.45); backdrop-filter: blur(3px); z-index: 90; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-scrim.show { display: flex; animation: fade .2s; }
.modal {
  background: var(--paper); border-radius: var(--radius); width: 100%; max-width: 560px;
  box-shadow: var(--shadow-lg); max-height: 90vh; overflow-y: auto; animation: pop .24s cubic-bezier(.2,.8,.2,1);
}
.modal .m-head { padding: 22px 24px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.modal .m-head h3 { font-family: var(--mono); font-weight: 600; font-size: 17px; }
.modal .m-body { padding: 24px; }
.modal .m-foot { padding: 16px 24px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; }
.x-btn { background: none; border: none; cursor: pointer; color: var(--mid); padding: 4px; }
.x-btn:hover { color: var(--ink); }

/* ---------- Toast ---------- */
.toast-host { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); left: 50%; width: min(420px, calc(100vw - 32px)); transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.toast {
  background: var(--ink); color: var(--cream); padding: 12px 20px; border-radius: 100px;
  font-size: 13.5px; box-shadow: var(--shadow-lg); animation: toastin .3s cubic-bezier(.2,.8,.2,1);
}
.toast-error { background: #7a2922; }
/* A page under a fixed panel keeps room for it at the foot, so nothing the
   panel covers is out of reach while it is up. `--overlay-clearance` is set to
   the panel's measured height when it mounts and removed when it goes. */
.has-overlay-panel .page { padding-bottom: calc(var(--overlay-clearance, 0px) + 32px + env(safe-area-inset-bottom, 0px)); }
@keyframes toastin { from { opacity: 0; transform: translateY(12px); } }

.goal-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: center; margin-bottom: 20px; }
.goal-card .goal-copy { font-family: var(--display); font-size: clamp(20px, 2.4vw, 29px); line-height: 1.25; margin-top: 8px; }
.goal-card .goal-empty { color: var(--mid); font-size: 15px; margin-top: 7px; }
.goal-editor-input { min-height: 116px; resize: vertical; line-height: 1.55; }
.goal-timeline { margin-top: 22px; border-top: 1px solid var(--line-2); padding-top: 18px; }
.goal-timeline-item { position: relative; padding: 0 0 18px 22px; border-left: 1px solid var(--line); margin-left: 5px; }
.goal-timeline-item:last-child { padding-bottom: 0; }
.goal-timeline-item::before { content: ""; position: absolute; left: -5px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 2px solid var(--gold); }
.goal-timeline-item:first-child::before { background: var(--gold); }
.goal-timeline-item .goal-date { color: var(--faint); font-size: 11px; margin-bottom: 4px; }
.goal-timeline-item .goal-text { font-size: 14px; line-height: 1.5; }

@media (max-width: 620px) {
  .goal-card { grid-template-columns: 1fr; }
  .goal-card .btn { width: 100%; }
}

/* ---------- North Star card: the goal plus the decisions linked to it ---------- */
.north-star-card { margin-bottom: 20px; }
.north-star-card .ns-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: center; }
.north-star-card .goal-copy { font-family: var(--display); font-size: clamp(20px, 2.4vw, 29px); line-height: 1.25; margin-top: 8px; }
.north-star-card .goal-empty { color: var(--mid); font-size: 15px; margin-top: 7px; }
.ns-meta { color: var(--faint); font-size: 12px; margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.ns-decisions { margin-top: 20px; border-top: 1px solid var(--line-2); padding-top: 16px; }
.ns-decisions-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.ns-sort { display: flex; align-items: center; gap: 8px; color: var(--mid); font-size: 12px; white-space: nowrap; }
.ns-sort .input { width: auto; padding: 6px 10px; font-size: 12.5px; }
.ns-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.ns-item:last-child { border-bottom: none; padding-bottom: 0; }
.ns-item-flagged { background: var(--sand); border-radius: var(--radius-sm); padding: 12px 14px; border-bottom: none; margin-bottom: 6px; }
.ns-item-main { min-width: 0; }
.ns-item-title { display: block; font-weight: 550; font-size: 14px; line-height: 1.4; color: inherit; text-decoration: none; }
.ns-item-title:hover { color: var(--gold-deep, #8a6f14); }
.ns-item-meta { color: var(--faint); font-size: 12px; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.ns-item-side { display: flex; align-items: center; gap: 8px; }
.ns-priority-sel { width: auto; padding: 6px 9px; font-size: 12px; }
.ns-chip { display: inline-block; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; padding: 2px 7px; border-radius: 100px; border: 1px solid var(--line); color: var(--mid); }
.ns-p-high { border-color: rgba(160,60,45,.35); color: #8f3325; background: rgba(160,60,45,.07); }
.ns-p-medium { border-color: rgba(212,175,55,.45); color: #7d6318; background: rgba(212,175,55,.1); }
.ns-p-low { color: var(--faint); }
.ns-stale { border-color: rgba(212,175,55,.5); color: #7d6318; background: rgba(212,175,55,.12); }
.ns-empty { color: var(--mid); font-size: 13.5px; line-height: 1.55; }
.ns-unlinked { margin-top: 16px; }

/* ---------- Decision detail: the goal this decision serves ---------- */
.dg-title { display: block; font-family: var(--display); font-size: 20px; line-height: 1.3; color: inherit; text-decoration: none; }
.dg-title:hover { color: var(--gold-deep, #8a6f14); }
.dg-meta { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dg-controls { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.dg-controls label > span { display: block; font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--mid); margin-bottom: 7px; }

/* ---------- Settings: goals management ---------- */
.goal-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.goal-row:first-child { padding-top: 0; }
.goal-row-muted { opacity: .6; }
.goal-row-main { min-width: 0; }
.goal-row-title { font-weight: 550; font-size: 14.5px; line-height: 1.4; }
.goal-row-meta { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 5px 8px; align-items: center; font-size: 12px; }
.goal-row-meta a { text-decoration: none; }
.goal-row-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.goal-add { display: grid; grid-template-columns: minmax(0, 1fr) 160px auto; gap: 12px; align-items: end; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.goal-add label > span { display: block; font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--mid); margin-bottom: 7px; }

/* ---------- Goal → decision reconciliation prompts ---------- */
.goal-review-callout {
  background: var(--paper); border: 1px solid rgba(212,175,55,.55); border-left: 3px solid var(--gold);
  border-radius: var(--radius); padding: 20px 22px; margin-bottom: 20px; box-shadow: var(--shadow);
}
.goal-review { padding: 14px 0; border-top: 1px solid var(--line); }
.goal-review:first-of-type { border-top: none; padding-top: 8px; }
.gr-decision { font-weight: 550; font-size: 14px; line-height: 1.4; }
.gr-decision a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-2); }
.gr-diff { margin: 10px 0 12px; display: grid; gap: 6px; }
.gr-k { color: var(--faint); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; margin-right: 8px; }
.gr-v { font-size: 13.5px; line-height: 1.5; }
.gr-was .gr-v, .gr-v.gr-was { color: var(--mid); text-decoration: line-through; text-decoration-color: var(--line-2); }
.gr-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.modal-wide { max-width: 680px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 620px) {
  .north-star-card .ns-head { grid-template-columns: 1fr; }
  .north-star-card .ns-head .btn { width: 100%; }
  .ns-item { grid-template-columns: 1fr; }
  .ns-item-side { justify-content: flex-start; }
  .dg-controls { grid-template-columns: 1fr; }
  .goal-row { grid-template-columns: 1fr; }
  .goal-row-actions { justify-content: flex-start; }
  .goal-add { grid-template-columns: 1fr; }
  .goal-add .btn { width: 100%; }
}

/* ---------- Skeleton ---------- */
.skel { background: linear-gradient(90deg, var(--sand) 25%, #efe9df 50%, var(--sand) 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: 6px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 60px 24px; color: var(--mid); }
.empty .ei { width: 46px; height: 46px; color: var(--faint); margin: 0 auto 16px; }
.empty h3 { font-family: var(--mono); font-weight: 600; color: var(--ink); margin-bottom: 8px; }

/* ---------- Auth pages ---------- */
.auth {
  min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr;
}
.auth-aside {
  background: var(--ink); color: var(--cream); padding: 48px 56px;
  display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
}
.auth-aside::after {
  content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(212,175,55,.16), transparent 70%);
}
.auth-aside .brand { font-family: var(--mono); font-weight: 700; letter-spacing: .24em; font-size: 17px; z-index: 2; }
.auth-aside .pitch { z-index: 2; }
.auth-aside .pitch h2 { font-family: var(--mono); font-weight: 500; font-size: 34px; line-height: 1.18; letter-spacing: -.01em; max-width: 14ch; }
.auth-aside .pitch p { color: rgba(240,237,232,.6); margin-top: 18px; max-width: 38ch; }
.auth-aside .quote { font-size: 13px; color: rgba(240,237,232,.5); z-index: 2; border-left: 2px solid var(--gold); padding-left: 14px; }
.auth-main { display: grid; place-items: center; padding: 40px 24px; }
.auth-card { width: 100%; max-width: 380px; }
.auth-card .eyebrow { margin-bottom: 14px; }
.auth-card h1 { font-family: var(--mono); font-weight: 600; font-size: 26px; margin-bottom: 8px; }
.auth-card .sub { color: var(--mid); margin-bottom: 28px; font-size: 14px; }
.auth-alt { margin-top: 22px; text-align: center; font-size: 13.5px; color: var(--mid); }
.auth-alt a { color: var(--ink); font-weight: 550; border-bottom: 1px solid var(--gold); }
.divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--faint); font-size: 12px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- Onboarding ---------- */
.ob { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; }
.ob-card { width: 100%; max-width: 600px; }
.ob-steps { display: flex; gap: 8px; margin-bottom: 30px; }
.ob-steps .s { flex: 1; height: 3px; border-radius: 100px; background: var(--sand); }
.ob-steps .s.on { background: var(--gold); }
.choice-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.choice {
  padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper);
  cursor: pointer; transition: all .16s; display: flex; gap: 12px; align-items: center;
}
.choice:hover { border-color: var(--ink); }
.choice.sel { border-color: var(--ink); background: var(--ink); color: var(--cream); }
.choice .ct { font-weight: 550; font-size: 14px; }
.choice .cd { font-size: 12px; color: var(--mid); }
.choice.sel .cd { color: rgba(240,237,232,.6); }

@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.97) translateY(8px); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .5s cubic-bezier(.2,.7,.2,1) both; }
.rise-2 { animation-delay: .06s; } .rise-3 { animation-delay: .12s; } .rise-4 { animation-delay: .18s; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
}
@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); width: 260px; }
  .sidebar.open { transform: none; }
  .content { margin-left: 0; }
  .topbar { justify-content: space-between; min-height: calc(62px + env(safe-area-inset-top, 0px)); padding: calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); background: rgba(13,13,13,.96); color: var(--cream); border-bottom: 0; }
  .topbar .brand, .topbar .menu-btn { display: block; }
  .topbar .menu-btn { width: 44px; height: 44px; margin: -3px 0; }
  .account-trigger { min-width: auto; padding: 2px; border: 0; }
  .account-trigger:hover, .account-trigger[aria-expanded="true"] { background: transparent; border-color: transparent; }
  .account-trigger .avatar { width: 34px; height: 34px; }
  .account-trigger-copy, .account-chevron { display: none; }
  .account-menu { right: -4px; }
  .scrim.show { display: block; }
  .page { padding: 28px max(20px, env(safe-area-inset-right, 0px)) calc(70px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); }
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .page-head h1 { font-size: 25px; }
  .qa-grid { grid-template-columns: 1fr; }
  .choice-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .ring-wrap { width: 160px; height: 160px; }
}

/* ---------- Accessibility ---------- */
/* A single visible keyboard-focus ring for every interactive control. Uses
   :focus-visible so it only shows for keyboard/AT users, never on mouse click. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.nav-item:focus-visible,
.chip:focus-visible,
.tag:focus-visible,
.qa:focus-visible,
.choice:focus-visible,
.switch:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* On the dark sidebar the gold ring can read low-contrast; lift it to gold-light. */
.sidebar a:focus-visible,
.sidebar button:focus-visible,
.topbar button:focus-visible { outline-color: var(--gold-light); }

/* Touch targets. Several controls sit around 32-39px, which is under the 44px
   minimum and hard to hit reliably on a phone. Only grown for coarse pointers
   so desktop density is unchanged. */
@media (pointer: coarse) {
  .btn-sm { min-height: 44px; }
  .chip { padding: 10px 15px; }
  .x-btn { display: grid; place-items: center; width: 44px; height: 44px; margin: -8px -10px -8px 0; padding: 0; }
  .capture-actions a, .capture-actions button { padding: 9px 0; }
  .composer-foot .cf-finish { padding-block: 7px; }
  .context-panel .cp-toggle { padding: 8px 0; }
  .dd-toggle { min-height: 52px; }
  /* Editing a section of the Decision Brief has to be as reachable on a phone as
     reading it, so the row's controls get real height rather than the compact
     desktop hit area. */
  .dd-edit { min-height: 40px; padding-inline: 13px; }
  .dd-form-foot .btn { min-height: 44px; }
}

/* Respect users who ask for less motion: neutralize the shimmer/entrance/toast
   animations and smooth scrolling rather than removing the elements. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Conversation-first zero-data experience ---------- */
.fitbot-first-run { background: #f1eee6; }
.fitbot-first-run .shell { min-height: 100vh; min-height: 100dvh; background: radial-gradient(circle at 72% 8%, rgba(184,145,66,.16), transparent 28%), #f1eee6; }
.fitbot-first-run #sidebar, .fitbot-first-run .scrim { display: none; }
.fitbot-first-run .content { margin-left: 0; }
.fitbot-first-run #topbar { min-height: 66px; padding: 0 clamp(20px, 4vw, 58px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(13,13,13,.16); background: rgba(241,238,230,.88); backdrop-filter: blur(18px); }
.first-run-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font: 700 12px/1 var(--mono); letter-spacing: .16em; }
.first-run-brand span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--ink); font-family: "Newsreader", Georgia, serif; font-size: 17px; letter-spacing: 0; }
.first-run-time { color: var(--mid); font: 500 10px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.first-run-session-user { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--mid); font: 600 11px/1 var(--mono); letter-spacing: .03em; }
.first-run-session-user .frs-name { overflow: hidden; max-width: 26vw; text-overflow: ellipsis; white-space: nowrap; }
.first-run-session-user .avatar { flex: 0 0 auto; width: 34px; height: 34px; font-size: 11px; }
/* No padding on the scroll container itself: the sticky phase rail anchors to
   the scrollport's padding edge, so any padding here would leave a gap where
   message text scrolls past above the rail. The spacing lives on the intro. */
.fitbot-first-run .chat-stream { padding-top: 0; }
.fitbot-first-run .chat-inner, .fitbot-first-run .composer-inner, .fitbot-first-run .suggest { max-width: 880px; }
/* The intro spans the full content column so its rule aligns with the phase
   rail and the Decision Brief below it. Line lengths are capped on the text
   itself instead, which keeps the measure readable without breaking alignment. */
.first-run-intro { margin: clamp(22px, 4.5vh, 46px) 0 28px; padding-bottom: 26px; border-bottom: 1px solid rgba(13,13,13,.14); }
.first-run-intro .eyebrow { color: var(--gold-deep); }
.first-run-intro h1 { max-width: 640px; margin: 15px 0 0; font: 400 clamp(38px, 5.6vw, 62px)/1.01 "Newsreader", Georgia, serif; letter-spacing: -.04em; text-wrap: balance; }
.first-run-lede { max-width: 58ch; margin: 18px 0 0; color: var(--mid); font-size: 15.5px; line-height: 1.65; }
.first-run-expectation { margin: 20px 0 0; color: var(--faint); font: 500 11px/1.6 var(--mono); letter-spacing: .06em; }
.first-run-expectation strong { color: var(--gold-deep); font-weight: 700; }
/* Once BILLIONERD has captured the outcome the heading carries the operator's
   own words. It is longer than a question and no longer the loudest element on
   the page, so it steps down a size and the setup copy retires entirely. */
.first-run-intro.is-live { margin-bottom: 24px; padding-bottom: 22px; }
.first-run-intro.is-live h1 { max-width: 720px; font-size: clamp(24px, 3vw, 34px); line-height: 1.2; letter-spacing: -.02em; }
.fitbot-first-run .msg { margin-bottom: 22px; }
.fitbot-first-run .msg.assistant .who { background: var(--ink); box-shadow: 0 0 0 5px rgba(184,145,66,.12); }
/* The ring on the assistant mark is drawn outside the box; the chat container's
   own gutter absorbs it, so no extra inset is needed and the thread stays
   aligned with the heading above it. */
.fitbot-first-run .msg.msg-opening .bubble { color: var(--ink-soft); font-size: 16px; line-height: 1.72; }
.fitbot-first-run .msg.msg-opening .bubble strong { color: var(--ink); font-weight: 600; }
.fitbot-first-run .chat-composer { padding-bottom: 28px; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); border-top-color: rgba(13,13,13,.2); background: rgba(241,238,230,.94); backdrop-filter: blur(18px); }
.fitbot-first-run .composer-inner textarea { border-color: rgba(13,13,13,.42); border-radius: 0; background: #fbf9f3; box-shadow: 5px 5px 0 rgba(13,13,13,.08); }
.fitbot-first-run .composer-inner textarea:disabled { background: rgba(251,249,243,.5); box-shadow: none; color: var(--faint); }
.fitbot-first-run .composer-send { min-width: 190px; min-height: 54px; border-radius: 0; }
.fitbot-first-run .composer-foot { max-width: 880px; }
.fitbot-first-run .suggest { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.fitbot-first-run .suggest::-webkit-scrollbar { display: none; }
.fitbot-first-run .chip { flex: 0 0 auto; border-radius: 0; background: transparent; color: var(--ink-soft); }
.workspace-ready { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: 18px; align-items: center; margin: 12px 0 34px 44px; padding: 22px; border: 1px solid var(--ink); background: var(--ink); color: var(--cream); box-shadow: 10px 10px 0 rgba(184,145,66,.24); animation: rise .45s cubic-bezier(.2,.7,.2,1) both; }
.workspace-ready-mark { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(212,175,55,.55); color: var(--gold-light); }
.workspace-ready-mark svg { width: 22px; height: 22px; }
.workspace-ready h2 { margin: 5px 0 5px; font: 400 28px/1.05 "Newsreader", Georgia, serif; }
.workspace-ready p { color: rgba(240,237,232,.68); font-size: 12px; line-height: 1.55; }
.workspace-ready .eyebrow { color: var(--gold-light); }

/* ---------------------------------------------------------------------------
   Guided decision workshop — the phase rail and the live Decision Brief.
   The rail sticks to the top of the scroll container so the operator always
   knows which phase they are in. z-index 5 keeps it above message content but
   well below the modal scrim (90) and the toast host (120); the composer is a
   sibling of the scroll container, so the two can never collide.
   --------------------------------------------------------------------------- */
.workshop-header { position: sticky; top: 0; z-index: 5; margin: 0 -24px 26px; padding: 2px 24px 0; background: #f1eee6; }
/* Once the session has produced its recommendation the brief is a finished
   record, not live progress: it releases the top of the viewport so the
   Decision Report has the screen to itself. */
/* Once the session has produced its recommendation the document leaves the
   sticky rail entirely (the script moves it into the thread), so the rail that
   described work in progress fades out rather than holding the viewport. */
.workshop-header.is-retiring { opacity: 0; transform: translateY(-8px); transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.workflow-rail { display: flex; gap: 6px; align-items: center; margin: 0; padding: 0 0 12px; list-style: none; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.workflow-rail::-webkit-scrollbar { display: none; }
.wr-step { position: relative; display: inline-flex; flex: 0 0 auto; gap: 7px; align-items: center; padding: 5px 11px 5px 5px; border: 1px solid transparent; }
/* The phase marks are accents on a line of labels, not buttons: small enough
   that the document below them stays the largest thing in the header. */
.wr-dot { display: grid; flex: 0 0 auto; width: 16px; height: 16px; place-items: center; overflow: hidden; border: 1px solid rgba(13,13,13,.2); border-radius: 50%; color: var(--faint); font: 700 8.5px/1 var(--mono); }
.wr-dot svg { width: 9px; height: 9px; }
.wr-dot i { font-style: normal; }
.wr-label { color: var(--faint); font: 600 10px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; white-space: nowrap; }
.wr-done .wr-dot { border-color: rgba(184,145,66,.55); background: rgba(184,145,66,.16); color: var(--gold-deep, #8a6f14); }
.wr-done .wr-label { color: var(--mid); }
.wr-active { border-color: rgba(13,13,13,.16); background: #fbf9f3; }
.wr-active .wr-dot { border-color: var(--ink); background: var(--ink); color: var(--gold-light); }
.wr-active .wr-label { color: var(--ink); }
/* ---------------------------------------------------------------------------
   The Decision Brief document. One element, two states: a live brief that
   fills in as the operator answers, and — without being rebuilt — the finished
   Decision Report. Motion is transform/opacity wherever it can be, so a phone
   composites it off the main thread while the conversation is scrolling; the
   collapses are the exception and animate grid-template-rows instead.
   --------------------------------------------------------------------------- */
.decision-doc { border: 1px solid rgba(13,13,13,.16); background: #fbf9f3; transition: border-color .4s ease, box-shadow .4s ease; }
.dd-toggle { display: flex; gap: 14px; align-items: center; width: 100%; padding: 12px 16px; border: 0; background: none; cursor: pointer; text-align: left; }
.dd-heading { display: grid; flex: 1 1 auto; gap: 3px; min-width: 0; }
.dd-eyebrow { color: var(--ink); font: 700 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
/* The subject line is the decision itself once it is known. Clamped to one line
   so a long decision cannot push the conversation off a small screen. */
.dd-title { overflow: hidden; color: var(--mid); font-size: 12.5px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.dd-count { flex: 0 0 auto; color: var(--faint); font: 500 10.5px/1 var(--mono); letter-spacing: .04em; }
.dd-chevron { display: inline-flex; flex: 0 0 auto; color: var(--mid); }
.dd-chevron svg { width: 15px; height: 15px; transition: transform .28s cubic-bezier(.2,.7,.2,1); }
.decision-doc:not(.is-open) .dd-chevron svg { transform: rotate(-90deg); }
.dd-tags { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 14px; }
/* Author `display` beats the UA rule for [hidden] regardless of specificity, so
   the hidden state has to be restated here or the tags show during the session. */
.dd-tags[hidden] { display: none; }
.dd-tags .dr-stance, .dd-tags .dr-conf { padding: 5px 11px; border: 1px solid rgba(13,13,13,.2); font: 600 10px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.dd-tags .dr-stance { border-color: var(--ink); background: var(--ink); color: var(--gold-light); }
.dd-tags .dr-conf { color: var(--mid); }
/* Progress stays visible whether the document is expanded or not, so the
   operator can see it being written without having to open anything. */
.dd-meter { height: 2px; margin: 0 16px 12px; background: rgba(13,13,13,.1); }
.dd-meter i { display: block; height: 100%; background: var(--gold-deep, #8a6f14); transition: width .5s cubic-bezier(.2,.7,.2,1); }

/* Collapse animates grid-template-rows rather than max-height so the open state
   is the content's real height — no measurement in script, no guessed cap. The
   inner element keeps its own scroll cap for long documents. */
.dd-drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s cubic-bezier(.2,.7,.2,1); }
.decision-doc.is-open .dd-drawer { grid-template-rows: 1fr; }
.dd-body { position: relative; overflow: hidden; padding: 0 16px; }
.decision-doc.is-open .dd-body { max-height: min(40vh, 360px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
/* ---------------------------------------------------------------------------
   The running summary — sections captured, how much confidence a
   recommendation could carry, and how much session is left. Three facts, always
   on screen, so the operator can read the state of the document without opening
   it. It sits above the sections because it describes all of them.
   --------------------------------------------------------------------------- */
.dd-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid rgba(13,13,13,.08); }
.dd-sum { min-width: 0; padding: 9px 16px 10px; }
.dd-sum + .dd-sum { border-left: 1px solid rgba(13,13,13,.08); }
.dd-sum dt { color: var(--faint); font: 600 8.5px/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.dd-sum dd { display: flex; gap: 7px; align-items: center; margin: 3px 0 0; min-width: 0; color: var(--ink); font: 600 12px/1.35 var(--mono); letter-spacing: .01em; }
.dd-sum dd > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The confidence ladder. It reveals a tier at a time so the case for a
   recommendation can be seen strengthening without the recommendation itself
   being handed over early. */
.dd-ladder { display: inline-flex; flex: 0 0 auto; gap: 2px; align-items: flex-end; }
.dd-ladder i { display: block; width: 3px; height: 5px; background: rgba(13,13,13,.14); transition: background-color .45s ease; }
.dd-ladder i:nth-child(2) { height: 8px; }
.dd-ladder i:nth-child(3) { height: 11px; }
.dd-ladder[data-level="1"] i:nth-child(1),
.dd-ladder[data-level="2"] i:nth-child(-n+2),
.dd-ladder[data-level="3"] i { background: var(--gold-deep, #8a6f14); }

/* ---------------------------------------------------------------------------
   The sticky summary card. A document that keeps growing would eventually own
   the viewport, so once the operator scrolls into the conversation the header
   condenses: the rail, the strip and the sections give way to outcome, decision
   and progress. Enough to never lose the thread of what is being decided.
   --------------------------------------------------------------------------- */
.dd-pin { display: none; gap: 7px; padding: 2px 16px 12px; }
.workshop-header.is-pinned .dd-pin { display: grid; animation: ddPinIn .26s cubic-bezier(.2,.7,.2,1) both; }
.workshop-header.is-pinned .workflow-rail,
.workshop-header.is-pinned .dd-summary,
.workshop-header.is-pinned .dd-drawer { display: none; }
.workshop-header.is-pinned .decision-doc { box-shadow: 0 12px 26px -20px rgba(13,13,13,.7); }
.workshop-header.is-pinned .dd-toggle { padding-bottom: 8px; }
@keyframes ddPinIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dd-pin-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; align-items: baseline; min-width: 0; }
.dd-pin-row i { color: var(--faint); font: 600 8.5px/1.6 var(--mono); font-style: normal; letter-spacing: .13em; text-transform: uppercase; }
.dd-pin-row b { overflow: hidden; color: var(--ink); font: 400 13px/1.45 var(--display); text-overflow: ellipsis; white-space: nowrap; }
.dd-pin-progress { display: flex; gap: 9px; align-items: center; justify-content: space-between; padding-top: 8px; border-top: 1px solid rgba(13,13,13,.08); }
.dd-pin-progress b { color: var(--ink); font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.dd-pin-progress i { color: var(--gold-deep, #8a6f14); font: 600 10px/1 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }

/* One section of the document. The captured insight is the point of a section,
   so it carries the strongest type on the row: the title above it is a small
   mono label, the one-line description beneath it is quieter still, and the
   accent in the margin is a mark — a ring, a half-filled ring, a check — never
   an illustration. */
.dd-row { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 11px; align-items: start; padding: 9px 0; border-top: 1px solid rgba(13,13,13,.07); }
.dd-row:first-child { border-top: 0; }
.dd-mark { position: relative; display: grid; height: 18px; place-items: center; }
/* The three marks stack in one grid cell rather than being positioned, so they
   share a centre and only opacity and scale change between states. */
.dd-mark i { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity .28s ease, transform .28s cubic-bezier(.2,.9,.3,1); }
/* ○ not explored — an empty ring. */
.dd-ring { width: 9px; height: 9px; border: 1px solid rgba(13,13,13,.3); border-radius: 50%; }
/* ◐ in progress — the same ring, half inked, so the state reads at a glance
   without a second colour or a spinner. */
.dd-half { width: 9px; height: 9px; overflow: hidden; border: 1px solid var(--gold-deep, #8a6f14); border-radius: 50%; background: linear-gradient(to right, var(--gold-deep, #8a6f14) 50%, transparent 50%); opacity: 0; transform: scale(.6); }
/* ✓ complete. */
.dd-tick { color: var(--gold-deep, #8a6f14); opacity: 0; transform: scale(.5); }
.dd-tick svg { width: 12px; height: 12px; }
.dd-row.is-active .dd-ring, .dd-row.is-filled .dd-ring { opacity: 0; transform: scale(.4); }
.dd-row.is-active .dd-half { opacity: 1; transform: scale(1); }
.dd-row.is-filled .dd-tick { opacity: 1; transform: scale(1); }
.dd-main { min-width: 0; }
/* Title and state on one line: what the section is, and where it stands. */
.dd-label { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; min-width: 0; }
.dd-label b { color: var(--mid); font: 600 9.5px/1.5 var(--mono); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; transition: color .3s ease; overflow-wrap: anywhere; }
.dd-state { flex: 0 0 auto; color: var(--faint); font: 500 8.5px/1.5 var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; transition: color .3s ease; }
.dd-row.is-active .dd-label b, .dd-row.is-filled .dd-label b { color: var(--ink); }
.dd-row.is-active .dd-state { color: var(--gold-deep, #8a6f14); }
.dd-row.is-filled .dd-state { color: rgba(13,13,13,.32); }
/* Collapse animates grid-template-rows, the same technique as the document's
   own drawer, so an opening section ends at its content's real height. */
.dd-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s cubic-bezier(.2,.7,.2,1); }
.dd-fold-in { min-height: 0; overflow: hidden; }
/* The explanatory sentence: what this section is for, in the operator's terms.
   It is scaffolding for a section that has nothing in it yet, so once the
   insight is captured the explanation retires rather than repeating itself
   above the answer. */
.dd-hint { margin: 3px 0 0; color: var(--faint); font-size: 11.5px; line-height: 1.5; }
.dd-row.is-filled:not(.is-editing) .dd-hint { display: none; }
/* The captured insight — the document's strongest text. */
.dd-v { min-width: 0; margin-top: 4px; color: var(--ink); font-family: var(--display); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.dd-v:empty { display: none; }
.dd-cap { display: block; margin-bottom: 3px; color: var(--faint); font: 600 8.5px/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.dd-v p { margin: 0; }
.dd-v ul { margin: 0; padding-left: 16px; }
.dd-v li { margin-bottom: 4px; }
.dd-v li:last-child { margin-bottom: 0; }
.dd-void { color: var(--faint); font-size: 13px; font-style: italic; }
/* Progressive completion: every section is on the page from the first turn, but
   only the one being worked on and the ones already captured are open. The rest
   stay a title and a state on a line, so eight sections of framework fit on
   screen without the conversation being pushed away. */
.dd-row.is-filled .dd-fold, .dd-row.is-active .dd-fold, .dd-row.is-editing .dd-fold { grid-template-rows: 1fr; }

/* Correcting a section after the fact. The edit happens in the row it belongs
   to — no modal, no second copy of the document to reconcile. */
.dd-row-actions { margin-top: 7px; }
.dd-row-actions[hidden], .dd-form[hidden] { display: none; }
.dd-row.is-editing .dd-row-actions, .dd-row.is-editing .dd-v { display: none; }
.dd-edit { display: inline-flex; gap: 5px; align-items: center; padding: 4px 9px; border: 1px solid rgba(13,13,13,.16); background: none; color: var(--mid); font: 600 9px/1.4 var(--mono); letter-spacing: .11em; text-transform: uppercase; cursor: pointer; transition: border-color .2s ease, color .2s ease, background-color .2s ease; }
.dd-edit:hover { border-color: var(--ink); background: rgba(13,13,13,.04); color: var(--ink); }
.dd-edit svg { width: 11px; height: 11px; }
.dd-form { margin-top: 7px; }
.dd-form-hint { display: block; margin-bottom: 5px; color: var(--faint); font-size: 11.5px; line-height: 1.5; }
.dd-input { width: 100%; font-family: var(--body); font-size: 13.5px; line-height: 1.6; resize: vertical; }
.dd-form-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.dd-form-foot .btn { border-radius: 0; }

/* A section landing: a faint gold wash crossing the row once, the opened
   content settling up into place, and the check springing in just behind it.
   Delay is set per row in script so several sections arriving on one turn read
   as a sequence rather than one flash. */
.dd-row.dd-just { animation: ddLand .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--dd-delay, 0ms); }
.dd-row.dd-just .dd-fold-in { animation: ddValueIn .48s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--dd-delay, 0ms); }
.dd-row.dd-just .dd-tick { animation: ddTick .5s cubic-bezier(.2,1.5,.3,1) both; animation-delay: calc(var(--dd-delay, 0ms) + 120ms); }
@keyframes ddLand {
  0% { background: rgba(184,145,66,.16); box-shadow: inset 2px 0 0 rgba(184,145,66,.7); }
  70% { background: rgba(184,145,66,.06); box-shadow: inset 2px 0 0 rgba(184,145,66,.35); }
  100% { background: transparent; box-shadow: inset 0 0 0 transparent; }
}
@keyframes ddValueIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes ddTick { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
/* A section the coach revised rather than filled for the first time: the same
   gesture, quieter, so a correction is visible without claiming to be new. */
.dd-row.dd-amend { animation: ddAmend .5s ease both; animation-delay: var(--dd-delay, 0ms); }
@keyframes ddAmend { 0% { background: rgba(13,13,13,.05); } 100% { background: transparent; } }

/* ---------------------------------------------------------------------------
   Decision Report — not a second card, but the state the Decision Brief above
   enters when the session completes. The document keeps its identity (same
   element, same sections, same collapse control) and gains the framing of a
   filed record: an inked border, a seal, and the recommendation beneath the
   framing it was built on.
   --------------------------------------------------------------------------- */
.decision-doc.is-report { margin: 6px 0 34px; border-color: var(--ink); box-shadow: 10px 10px 0 rgba(184,145,66,.2); animation: ddSeal .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ddSeal { from { opacity: .55; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.decision-doc.is-report .dd-toggle { padding: 24px 28px 18px; }
.decision-doc.is-report .dd-eyebrow { color: var(--gold-deep, #8a6f14); }
.decision-doc.is-report .dd-heading { gap: 10px; }
/* The report's subject is the headline of a record, so it stops being a clamped
   one-line status and becomes display type that is allowed to wrap. */
.decision-doc.is-report .dd-title { color: var(--ink); font: 400 clamp(24px, 3.8vw, 34px)/1.1 "Newsreader", Georgia, serif; letter-spacing: -.03em; white-space: normal; text-wrap: balance; overflow: visible; overflow-wrap: anywhere; }
.decision-doc.is-report .dd-tags { padding: 0 28px 16px; }
.decision-doc.is-report .dd-meter { margin: 0 28px 0; }
.decision-doc.is-report .dd-meter i { background: var(--ink); }
.decision-doc.is-report .dd-body { padding: 0 28px; }
/* The finished document is read end to end rather than monitored, so the
   framing releases its scroll cap and prints in full. */
.decision-doc.is-report.is-open .dd-body { max-height: none; overflow: visible; padding-bottom: 4px; }
.decision-doc.is-report .dd-row { grid-template-columns: 17px minmax(0, 1fr); gap: 13px; padding: 12px 0; }
/* Nothing is collapsed in a filed record: it is read end to end, so every
   section prints with its description and its value. */
.decision-doc.is-report .dd-fold { grid-template-rows: 1fr; }
.decision-doc.is-report .dd-summary { padding-inline: 12px; border-bottom: 1px solid rgba(13,13,13,.08); }
.decision-doc.is-report .dd-mark { height: 20px; }
.decision-doc.is-report .dd-v { font-size: 15px; line-height: 1.6; }

.dd-report { border-top: 1px solid rgba(13,13,13,.14); animation: ddReportIn .5s cubic-bezier(.2,.7,.2,1) .12s both; }
@keyframes ddReportIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dd-report .dr-block { padding: 20px 28px; border-top: 1px solid rgba(13,13,13,.09); min-width: 0; }
.dd-report > .dr-block:first-child { border-top: 0; }
.dd-report .dr-k { display: block; margin-bottom: 8px; color: var(--faint); font: 600 9.5px/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.dd-report p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.7; overflow-wrap: anywhere; }
.dd-report ul { margin: 9px 0 0; padding-left: 18px; }
.dd-report li { margin-bottom: 6px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.6; overflow-wrap: anywhere; }
.dd-report li:last-child { margin-bottom: 0; }
.dd-report .dr-empty { color: var(--faint); font-size: 13px; font-style: italic; }
.dd-report .dr-primary p { color: var(--ink); font-family: var(--display); font-size: 17px; line-height: 1.55; }
.dd-report .dr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dd-report .dr-grid > .dr-block + .dr-block { border-left: 1px solid rgba(13,13,13,.09); }
.dd-report .dr-action { background: rgba(184,145,66,.09); }
.dd-report .dr-action strong { display: block; color: var(--ink); font-family: var(--display); font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.dd-report .dr-action p { margin-top: 7px; font-size: 13px; }
.dd-report .dr-saved { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 12px; align-items: start; padding: 20px 28px; border-top: 1px solid rgba(13,13,13,.14); background: var(--ink); color: var(--cream); }
/* An accent, not a badge: the mark confirms the filing without competing with
   the line of text that explains it. */
.dd-report .dr-saved-mark { display: grid; height: 19px; place-items: center; color: var(--gold-light); }
.dd-report .dr-saved-mark svg { width: 14px; height: 14px; }
.dd-report .dr-saved strong { display: block; margin-bottom: 5px; font: 600 13px/1.35 var(--mono); letter-spacing: .04em; }
/* The filing is a place, so name it as one and let the operator go there. */
.dd-report .dr-saved a { color: var(--gold-light); text-decoration: underline; text-decoration-color: rgba(226,199,132,.45); text-underline-offset: 3px; }
.dd-report .dr-saved a:hover { text-decoration-color: var(--gold-light); }
.dd-report .dr-saved span { display: block; color: rgba(240,237,232,.68); font-size: 12.5px; line-height: 1.6; }
.dd-report .dr-actions { display: flex; gap: 10px; flex-wrap: wrap; padding: 20px 28px; border-top: 1px solid rgba(13,13,13,.14); }
.dd-report .dr-actions .btn { border-radius: 0; }
@media (max-width: 700px) {
  .decision-doc.is-report { margin-right: 0; box-shadow: 6px 6px 0 rgba(184,145,66,.2); }
  .decision-doc.is-report .dd-toggle { padding: 20px 20px 16px; }
  .decision-doc.is-report .dd-tags, .decision-doc.is-report .dd-body { padding-inline: 20px; }
  .decision-doc.is-report .dd-meter { margin-inline: 20px; }
  .decision-doc.is-report .dd-summary { padding-inline: 6px; }
  .dd-report .dr-block, .dd-report .dr-saved, .dd-report .dr-actions { padding: 18px 20px; }
  .dd-report .dr-grid { grid-template-columns: 1fr; }
  .dd-report .dr-grid > .dr-block + .dr-block { border-left: 0; border-top: 1px solid rgba(13,13,13,.09); }
  .dd-report .dr-actions .btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
   The same document, reopened from MindVault. There is no session around it
   here: nothing is collapsing, nothing is landing, and there is no toggle — the
   record simply prints, and every section can be corrected in place.
   --------------------------------------------------------------------------- */
.decision-doc.is-record { border-color: rgba(13,13,13,.16); background: #fbf9f3; }
/* Nested inside the record card, the document needs air around it so it reads
   as the brief rather than as another field in the panel. */
.card .decision-doc.is-record { margin: 18px 0; }
.decision-doc.is-record .dd-body { padding: 4px 22px 14px; max-height: none; overflow: visible; }
.decision-doc.is-record .dd-fold { grid-template-rows: 1fr; }
.decision-doc.is-record .dd-row { padding: 13px 0; }
.decision-doc.is-record .dd-v { font-size: 14.5px; }
@media (max-width: 700px) {
  .decision-doc.is-record .dd-body { padding-inline: 16px; }
}
@media (max-width: 700px) {
  .fitbot-first-run #topbar { padding-inline: 18px; }
  .first-run-time { display: none; }
  .first-run-session-user .frs-name { display: none; }
  .fitbot-first-run .chat-inner { padding-inline: 18px; }
  .first-run-intro { margin-block: 24px 22px; padding-bottom: 22px; }
  .first-run-intro h1 { max-width: none; font-size: clamp(33px, 10vw, 48px); }
  .first-run-intro.is-live h1 { font-size: 23px; line-height: 1.25; }
  .first-run-lede { margin-top: 15px; font-size: 15px; }
  .first-run-expectation { margin-top: 16px; }
  .fitbot-first-run .composer-inner { align-items: stretch; flex-direction: column; }
  .fitbot-first-run .composer-send { width: 100%; min-width: 0; }
  .workspace-ready { grid-template-columns: 42px 1fr; margin-left: 0; }
  .workspace-ready .btn { grid-column: 1 / -1; width: 100%; }
  .workshop-header { margin: 0 -18px 22px; padding-inline: 18px; }
  .workflow-rail { gap: 4px; padding-bottom: 10px; }
  .wr-step { padding: 5px 9px 5px 5px; }
  .wr-label { font-size: 9.5px; letter-spacing: .08em; }
  .dd-toggle { gap: 10px; padding: 14px; }
  .dd-count { font-size: 9.5px; }
  .dd-meter { margin-inline: 14px; }
  .dd-body { padding-inline: 14px; }
  /* Three facts in three columns is a wrap waiting to happen on a phone, so the
     strip becomes three lines — label left, value right — which stays legible
     at any width and keeps the whole strip under 90px. */
  .dd-summary { grid-template-columns: 1fr; }
  .dd-sum { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; padding: 7px 14px; }
  .dd-sum + .dd-sum { border-top: 1px solid rgba(13,13,13,.07); border-left: 0; }
  .dd-sum dd { justify-content: flex-end; }
  .dd-pin { padding-inline: 14px; }
  .dd-pin-row { grid-template-columns: 56px minmax(0, 1fr); gap: 8px; }
  /* Shorter cap on a phone: the document shares the viewport with the keyboard
     and the composer, so it takes a third of the screen rather than half. */
  .decision-doc.is-open .dd-body { max-height: 34vh; }
  /* The accent column costs 25px, so the title and its description keep nearly
     the full width at any size — no need to restack. */
  .dd-row { gap: 10px; padding: 8px 0; }
  .dd-v { font-size: 13.5px; }
}
/* The narrowest phones: the section title and its state stop sharing a line, so
   neither has to be truncated to fit beside the other. */
@media (max-width: 460px) {
  .dd-label { display: grid; gap: 1px; justify-content: start; }
  .dd-state { justify-self: start; }
}
/* Narrow phones cannot fit five labelled steps; keep the marks and label only
   the phase the operator is currently in, so the rail never scrolls sideways. */
@media (max-width: 460px) {
  .workflow-rail { gap: 2px; overflow-x: visible; }
  .wr-step { flex: 0 0 auto; padding: 5px 6px; }
  .wr-step:not(.wr-active) .wr-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .wr-active { flex: 1 1 auto; min-width: 0; }
  .wr-active .wr-label { overflow: hidden; text-overflow: ellipsis; }
}

/* ===========================================================================
   FitBot memory panel — "what BILLIONERD already knows". Surfaces the shared
   operator context at the top of a conversation so it is visible that FitBot
   is not starting from a blank slate.
   =========================================================================== */
.context-panel {
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  background: linear-gradient(135deg, #fffdf7, var(--paper));
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}
.context-panel .cp-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; cursor: pointer; user-select: none;
}
.context-panel .cp-head .eyebrow { color: var(--gold); }
.context-panel .cp-toggle {
  background: none; border: none; color: var(--mid); font-family: var(--mono);
  font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
}
.context-panel .cp-toggle svg { width: 15px; height: 15px; transition: transform .2s; }
.context-panel.collapsed .cp-toggle svg { transform: rotate(-90deg); }
.context-panel.collapsed .cp-body { display: none; }
.context-panel .cp-body { margin-top: 14px; display: grid; gap: 14px; }
.context-panel .cp-row { display: grid; grid-template-columns: 118px 1fr; gap: 12px; align-items: start; }
.context-panel .cp-k {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); padding-top: 2px;
}
.context-panel .cp-v { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); min-width: 0; }
.context-panel .cp-v .cp-strong { font-weight: 600; color: var(--ink); }
.context-panel .cp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.context-panel .cp-chip {
  font-size: 12px; background: rgba(184,145,66,.12); color: var(--ink-soft);
  border-radius: 999px; padding: 3px 10px;
}
.context-panel .cp-v ul { margin: 0; padding-left: 16px; }
.context-panel .cp-v li { margin-bottom: 3px; }
.context-panel .cp-empty { color: var(--faint); font-size: 13px; }
@media (max-width: 620px) {
  .context-panel .cp-row { grid-template-columns: 1fr; gap: 4px; }
}

/* Confidence "Why?" — the rationale behind the current confidence level,
   shown on the dashboard current-decision card and the decision detail trend. */
.conf-why {
  margin-top: 12px; font-size: 13px; line-height: 1.55;
  color: var(--mid); border-top: 1px solid var(--line); padding-top: 12px;
}
.conf-why .cw-k { font-weight: 600; color: var(--ink); }
.conf-rationales { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.conf-rationales li { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; color: var(--ink-soft); }
.conf-rationales .cr-pct { font-family: var(--display); font-size: 15px; color: var(--gold); min-width: 44px; }
.confidence-trend-label {
  display: inline-flex; margin-top: 10px; padding: 4px 9px; border: 1px solid rgba(240,237,232,.16);
  border-radius: 999px; color: rgba(240,237,232,.76); font-family: var(--mono); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase;
}
.confidence-analysis-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--line); }
.confidence-analysis-head > div { padding: 14px 16px; background: var(--paper); }
.confidence-analysis-head span { display: block; margin-bottom: 4px; color: var(--mid); font-family: var(--mono); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
.confidence-analysis-head strong { font-family: var(--display); font-size: 22px; font-weight: 600; }
.confidence-brief { margin-top: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.confidence-evidence-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.confidence-evidence { min-width: 0; padding: 22px; border-right: 1px solid var(--line); }
.confidence-evidence:last-child { border-right: 0; }
.confidence-evidence .label { display: flex; gap: 8px; align-items: center; margin-bottom: 9px; }
.confidence-evidence .label::before { width: 8px; height: 8px; border-radius: 50%; background: var(--mid); content: ""; flex: 0 0 auto; }
.confidence-evidence.evidence-for .label::before { background: #476c4f; }
.confidence-evidence.evidence-against .label::before { background: #9a4c42; }
.confidence-evidence.evidence-unknown .label::before { background: var(--gold); }
.confidence-evidence ul { margin-bottom: 0 !important; }
.confidence-action { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 22px; border-top: 1px solid rgba(240,237,232,.12); background: var(--ink); color: var(--cream); }
.confidence-action .eyebrow { display: block; margin-bottom: 7px; color: var(--gold-light); }
.confidence-action strong { display: block; font-size: 16px; }
.confidence-action p { max-width: 68ch; margin-top: 5px; color: rgba(240,237,232,.66); font-size: 13px; line-height: 1.55; }
.confidence-projection { display: grid; grid-template-columns: auto auto; gap: 1px 12px; align-items: baseline; min-width: 170px; margin-top: 16px; }
.confidence-action .confidence-projection { margin-top: 0; }
.confidence-projection span { grid-column: 1 / -1; color: rgba(240,237,232,.6); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.confidence-projection strong { color: var(--gold-light); font-family: var(--display); font-size: 30px; line-height: 1; }
.confidence-projection small { color: rgba(240,237,232,.68); font-family: var(--mono); font-size: 10px; }
@media (max-width: 760px) {
  .confidence-analysis-head { grid-template-columns: 1fr; }
  .confidence-evidence-grid { grid-template-columns: 1fr; }
  .confidence-evidence { border-right: 0; border-bottom: 1px solid var(--line); }
  .confidence-evidence:last-child { border-bottom: 0; }
  .confidence-action { grid-template-columns: 1fr; }
}

/* Inline lifecycle control on the dashboard current-decision card. */
.cd-stage { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.cd-stage label {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mid);
}
.cd-stage select { width: auto; min-width: 160px; padding: 7px 30px 7px 10px; }

/* Weekly Reflection card. */
.reflect-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 22px; margin-top: 14px; }
.reflect-grid .rg-k {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 6px;
}
.reflect-grid ul { margin: 0; padding-left: 17px; }
.reflect-grid li { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 5px; }
.reflect-grid .rg-empty { font-size: 13px; color: var(--faint); }
@media (max-width: 620px) { .reflect-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   MindVault — the thinking history. One list of one kind of thing, so the page
   is a stack of records rather than a grid of tiles: each card is a decision,
   its recommendation, where it stands, and when it gets scored. Everything on a
   card is there because it helps decide whether to reopen this one.

   Two ways to read the same records, and the default is the moving one: the feed
   reads them along the time axis, the list reads them as an archive. A rule with
   the live tab underlined — not a pill, not a segmented control — because these
   are two readings of one page, not two pages.
   --------------------------------------------------------------------------- */
.mv-tabs { display: flex; gap: 24px; margin: 0 0 18px; border-bottom: 1px solid var(--line); }
.mv-tab { position: relative; padding: 13px 0 12px; border: none; background: none; color: var(--faint); font: 700 9.5px/1.3 var(--mono); letter-spacing: .17em; text-transform: uppercase; cursor: pointer; }
.mv-tab::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: transparent; }
.mv-tab:hover { color: var(--ink-soft); }
.mv-tab.is-on { color: var(--ink); }
.mv-tab.is-on::after { background: var(--gold); }
.mv-count { margin: 0 0 14px; color: var(--faint); font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.mv-list { display: grid; gap: 12px; }
.mv-card { display: block; padding: 18px 20px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: inherit; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.mv-card:hover { border-color: rgba(13,13,13,.28); box-shadow: var(--shadow); transform: translateY(-2px); }
.mv-top { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.mv-when { color: var(--faint); font-family: var(--mono); font-size: 10.5px; white-space: nowrap; }
.mv-title { margin: 0 0 12px; font-family: var(--display); font-size: 19px; font-weight: 400; line-height: 1.3; letter-spacing: -.01em; overflow-wrap: anywhere; }
.mv-rec > span { display: block; margin-bottom: 4px; color: var(--faint); font: 600 9px/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
/* Clamped rather than truncated at the character: the recommendation is a
   sentence, and three lines of it is enough to recognise the decision. */
.mv-rec p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--ink); font-size: 14.5px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow-wrap: anywhere; }
.mv-rec p.mv-open { color: var(--faint); font-style: italic; }
.mv-foot { display: flex; gap: 14px; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.mv-review { color: var(--mid); font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; }
.mv-review.is-due { color: var(--gold); font-weight: 600; }
.mv-open-link { display: inline-flex; gap: 7px; align-items: center; color: var(--gold); font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.mv-open-link svg { width: 13px; }
@media (max-width: 520px) {
  .mv-card { padding: 16px; }
  .mv-title { font-size: 17.5px; }
  /* Two mono lines side by side is the first thing to wrap on a narrow phone,
     so the footer stacks instead of breaking mid-label. */
  .mv-foot { align-items: flex-start; flex-direction: column; gap: 8px; }
}

/* ---------------------------------------------------------------------------
   The Decision Feed
   ---------------------------------------------------------------------------
   MindVault's list answers "what have I decided". The feed answers the question
   that actually brings someone back: "is my thinking getting better?" So it is
   set as a ledger of events rather than a set of cards — a summary of the window
   at the top, then one continuous rule with every movement punched onto it,
   grouped by day so the shape of a week is visible without reading a word. A
   decision that sat still all month appears nowhere, because nothing moved.

   It borrows the memo's materials — mono eyebrow, hairline, gold accent, the
   rotated square on the rule — so the two pages read as one instrument. --------- */
.df-wrap { display: grid; gap: 20px; }

/* The window, summarised. Ink, because it is the one part of the page that makes
   a claim about the operator rather than reporting an event. */
.df-summary { padding: clamp(18px,2.2vw,24px) clamp(18px,2.6vw,28px) clamp(17px,2vw,22px); border: 1px solid var(--ink); background: var(--ink); color: var(--cream); box-shadow: 8px 8px 0 rgba(184,145,66,.13); }
.df-eyebrow { display: block; color: var(--gold-light); font: 700 9px/1.3 var(--mono); letter-spacing: .19em; text-transform: uppercase; }
.df-summary-head p { max-width: 62ch; margin: 10px 0 0; color: var(--cream); font: 500 clamp(17px,2vw,22px)/1.34 var(--display); letter-spacing: -.022em; text-wrap: pretty; }
/* Only the readings that moved are printed, so this row is never a scoreboard of
   zeroes. Hairline-divided, mono, tabular — a terminal, not a dashboard. */
.df-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(112px,1fr)); margin: clamp(16px,1.9vw,20px) 0 0; padding-top: clamp(14px,1.7vw,17px); border-top: 1px solid rgba(240,237,232,.16); }
.df-stats > div { min-width: 0; padding: 0 14px; border-left: 1px solid rgba(240,237,232,.16); }
.df-stats > div:first-child { padding-left: 0; border-left: none; }
.df-stats dt { color: rgba(240,237,232,.5); font: 700 8px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.df-stats dd { margin: 7px 0 0; color: var(--cream); font: 500 clamp(19px,2.2vw,24px)/1 var(--display); letter-spacing: -.03em; font-feature-settings: "tnum"; }
.df-stats dd.is-up { color: var(--gold-light); }
.df-stats dd.is-down { color: #d98d7c; }

/* --- The ledger ----------------------------------------------------------- */
.df-timeline { display: grid; gap: clamp(18px,2.2vw,26px); }
.df-day { position: sticky; top: 66px; z-index: 3; margin: 0 0 10px; padding: 6px 0 7px; background: var(--cream); color: var(--faint); font: 700 9px/1.3 var(--mono); font-weight: 700; letter-spacing: .19em; text-transform: uppercase; }
.df-list { list-style: none; display: grid; margin: 0; padding: 0; }
/* One rule down the icons, so a run of activity reads as a run. */
.df-item { position: relative; display: grid; grid-template-columns: 30px minmax(0,1fr); gap: clamp(12px,1.5vw,16px); padding: 0 0 clamp(15px,1.8vw,19px); }
.df-item::before { content: ""; position: absolute; top: 30px; bottom: 0; left: 14px; width: 1px; background: var(--line); }
.df-item:last-child::before { display: none; }
.df-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid var(--line); background: var(--paper); color: var(--faint); }
.df-dot svg { width: 14px; height: 14px; }
.df-item.is-ok .df-dot { border-color: var(--good); color: #2f5238; }
.df-item.is-bad .df-dot { border-color: #a03c2d; color: #8a2b2b; }
.df-item.is-warn .df-dot { border-color: var(--gold-deep); color: #6E5809; }
.df-item.is-mark .df-dot { border-color: var(--ink); background: var(--ink); color: var(--gold-light); }
.df-body { min-width: 0; padding-top: 4px; }
.df-meta { display: flex; flex-wrap: wrap; gap: 3px 12px; align-items: baseline; }
.df-label { color: var(--gold-deep); font: 700 8.5px/1.4 var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.df-item.is-ok .df-label { color: #2f5238; }
.df-item.is-bad .df-label { color: #8a2b2b; }
.df-item.is-warn .df-label { color: #8a6d0a; }
.df-item.is-mark .df-label { color: var(--ink); }
.df-when { color: var(--faint); font: 400 10.5px/1.45 var(--mono); letter-spacing: .04em; }
.df-title { max-width: 76ch; margin: 6px 0 0; color: var(--ink); font: 500 clamp(14.5px,1.5vw,16.5px)/1.38 var(--display); letter-spacing: -.014em; text-wrap: pretty; }
.df-note { max-width: 78ch; margin: 5px 0 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.58; text-wrap: pretty; }
.df-foot { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 9px; }
/* The move itself, in the one place a number belongs: beside the event that
   caused it, with the direction stated twice — arrow and sign — so it survives
   being read at a glance. */
.df-conf { display: inline-flex; gap: 6px; align-items: baseline; padding: 3px 8px; background: var(--sand); color: var(--ink-soft); font: 600 10.5px/1.4 var(--mono); letter-spacing: .04em; font-feature-settings: "tnum"; }
.df-conf.is-up { color: #2f5238; }
.df-conf.is-down { color: #8a2b2b; }
.df-conf-arrow { font-size: 8px; }
.df-conf-delta { font-weight: 700; }
.df-link { display: inline-flex; gap: 6px; align-items: center; min-width: 0; color: var(--mid); font: 400 11.5px/1.45 var(--body); }
.df-link svg { flex: 0 0 auto; width: 12px; height: 12px; }
.df-link:hover { color: var(--gold-deep); }
.df-more { display: block; width: 100%; min-height: 48px; padding: 0; border: none; border-top: 1px solid var(--line); background: none; color: var(--gold-deep); font: 700 9px/1.3 var(--mono); letter-spacing: .19em; text-transform: uppercase; text-align: left; cursor: pointer; }
.df-more::after { content: " \2193"; }
.df-more:hover { color: var(--ink); }

@media (max-width: 860px) { .df-day { top: 62px; } }
@media (max-width: 520px) {
  .df-summary { padding: 16px 16px 17px; box-shadow: 5px 5px 0 rgba(184,145,66,.14); }
  .df-summary-head p { max-width: none; font-size: 17px; }
  .df-stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 0; }
  .df-stats > div:nth-child(2n+1) { padding-left: 0; border-left: none; }
  .df-item { grid-template-columns: 24px minmax(0,1fr); gap: 11px; }
  .df-item::before { top: 25px; left: 11px; }
  .df-dot { width: 23px; height: 23px; }
  .df-dot svg { width: 12px; height: 12px; }
  .df-body { padding-top: 1px; }
  .df-title { font-size: 15px; }
}

/* MVP polish: weekly review and next-action hierarchy. */
.next-move { display: flex; justify-content: space-between; gap: 28px; align-items: center; background: var(--ink); color: var(--cream); }
.next-move h3 { margin: 5px 0; font-family: var(--display); font-size: 22px; }
.next-move p { max-width: 68ch; color: rgba(240,237,232,.68); font-size: 14px; }
.next-move .btn { flex-shrink: 0; }
.dashboard-repository { display: block; }
.dashboard-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 10px 0 14px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--line); }
.dashboard-stats > div { padding: 15px; background: var(--paper); }
.dashboard-stats strong { display: block; font-family: var(--display); font-size: 25px; }
.dashboard-stats span { display: block; color: var(--mid); font-size: 11px; }
.weekly-metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin: 10px 0 18px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--line); }
.weekly-metrics > div { padding: 13px; background: var(--paper); }
.weekly-metrics strong { display: block; font-family: var(--display); font-size: 23px; }
.weekly-metrics span { display: block; color: var(--mid); font-size: 10px; line-height: 1.35; }
.breadcrumb { display: flex; gap: 8px; align-items: center; margin-bottom: 20px; color: var(--faint); font-family: var(--mono); font-size: 11px; }
.breadcrumb a:hover { color: var(--ink); }
.decision-timeline .tl-item { padding-bottom: 24px; }
.decision-timeline .tl-item::before { box-shadow: 0 0 0 5px var(--paper); }
@media (max-width: 760px) {
  .next-move { align-items: stretch; flex-direction: column; }
  .next-move .btn { width: 100%; }
  .weekly-metrics { grid-template-columns: repeat(2, 1fr); }
  .weekly-metrics > div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .dashboard-stats { grid-template-columns: 1fr; }
}

/* Adaptive Decision Coach */
.coach-heading { display: flex; justify-content: space-between; gap: 28px; align-items: flex-end; }
.coach-heading .btn { flex: 0 0 auto; }
.coach-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); gap: 20px; align-items: start; }
.coach-conversation { min-height: 680px; padding: 0; overflow: hidden; }
.coach-topline { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; padding: 24px 26px 20px; border-bottom: 1px solid var(--line); }
.coach-topline h2 { max-width: 680px; margin-top: 5px; font-family: var(--display); font-size: clamp(22px, 3vw, 32px); line-height: 1.15; }
.coach-start { display: grid; place-items: center; min-height: 570px; padding: 48px 28px; text-align: center; }
.coach-start h3 { margin: 24px 0 8px; font-family: var(--display); font-size: 24px; }
.coach-start > p { max-width: 520px; color: var(--mid); font-size: 14px; line-height: 1.65; }
.coach-start form { width: min(620px, 100%); margin-top: 28px; }
.coach-start .coach-input { min-height: 126px; margin-bottom: 12px; padding: 18px; font-size: 16px; line-height: 1.6; }
.coach-orbit { position: relative; display: grid; width: 92px; height: 92px; place-items: center; border: 1px solid rgba(177,132,31,.3); border-radius: 50%; }
.coach-orbit::before, .coach-orbit::after { position: absolute; border: 1px solid rgba(177,132,31,.16); border-radius: 50%; content: ""; }
.coach-orbit::before { inset: -10px; }
.coach-orbit::after { inset: 13px; background: var(--ink); }
.coach-orbit b { position: relative; z-index: 2; color: var(--gold-light); font-family: var(--display); font-size: 31px; }
.coach-orbit span { position: absolute; z-index: 3; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--paper); }
.coach-orbit span:nth-child(1) { top: -3px; left: 42px; }
.coach-orbit span:nth-child(2) { right: 5px; bottom: 14px; }
.coach-orbit span:nth-child(3) { bottom: 13px; left: 5px; }
.coach-messages { display: flex; min-height: 430px; max-height: 540px; padding: 26px; overflow-y: auto; flex-direction: column; gap: 22px; background: linear-gradient(180deg, rgba(239,235,225,.45), transparent 28%); }
.coach-message { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 11px; align-items: flex-start; }
.coach-message.user { width: min(82%, 680px); margin-left: auto; grid-template-columns: minmax(0, 1fr) 34px; }
.coach-message.user > div:nth-child(2) { grid-column: 1; grid-row: 1; }
.coach-message.user .coach-avatar { grid-column: 2; }
.coach-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--ink); color: var(--gold-light); font-family: var(--mono); font-size: 10px; font-weight: 700; }
.coach-message.user .coach-avatar { background: var(--sand); color: var(--mid); font-size: 8px; }
.coach-bubble { padding: 15px 17px; border: 1px solid var(--line); border-radius: 4px 16px 16px 16px; background: var(--paper); color: var(--ink-soft); font-size: 14.5px; line-height: 1.7; box-shadow: 0 5px 18px rgba(13,13,13,.035); }
.coach-message.user .coach-bubble { border-color: var(--ink); border-radius: 16px 4px 16px 16px; background: var(--ink); color: var(--cream); }
.coach-gap { display: inline-block; margin: 7px 0 0 4px; color: var(--gold); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.coach-quick { display: flex; gap: 8px; padding: 0 26px 12px 71px; flex-wrap: wrap; }
.coach-chip { padding: 8px 11px; border: 1px solid rgba(177,132,31,.36); border-radius: 99px; background: rgba(231,192,87,.08); color: #745d20; cursor: pointer; font-family: var(--mono); font-size: 10px; transition: .18s ease; }
.coach-chip:hover { border-color: var(--gold); background: rgba(231,192,87,.16); }
.coach-composer { padding: 18px 26px 22px; border-top: 1px solid var(--line); background: var(--paper); }
.coach-composer textarea { min-height: 90px; resize: vertical; }
.coach-actions { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-top: 11px; }
.coach-actions > div { display: flex; gap: 8px; }
.coach-side { display: grid; gap: 20px; }
.stage-rail { display: grid; gap: 0; margin: 2px 0 22px; }
.stage-step { position: relative; display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; min-height: 39px; color: var(--faint); }
.stage-step:not(:last-child)::after { position: absolute; top: 26px; bottom: -5px; left: 12px; width: 1px; background: var(--line); content: ""; }
.stage-step span { z-index: 1; display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); font-family: var(--mono); font-size: 9px; }
.stage-step b { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.stage-step.active { color: var(--ink); }
.stage-step.active span { border-color: var(--gold); background: var(--gold); color: #fff; box-shadow: 0 0 0 4px rgba(177,132,31,.12); }
.stage-step.done { color: #476c4f; }
.stage-step.done span { border-color: #476c4f; color: #476c4f; }
.thinking-snapshot { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--line); }
.thinking-snapshot > div { padding: 11px 12px; background: var(--paper); }
.thinking-snapshot span { display: block; margin-bottom: 3px; color: var(--faint); font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.thinking-snapshot strong { display: block; font-size: 12.5px; line-height: 1.45; }
.thinking-snapshot > p { padding: 12px; background: var(--paper); }
.dna-card { background: var(--ink); color: var(--cream); }
.dna-card .muted, .dna-summary { color: rgba(240,237,232,.62); }
.dna-summary { margin-bottom: 14px; font-size: 13px; line-height: 1.6; }
.dna-pattern { padding: 13px 0; border-top: 1px solid rgba(240,237,232,.12); }
.dna-pattern > span { color: var(--gold-light); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.dna-pattern strong { display: block; margin-top: 5px; font-size: 13px; line-height: 1.45; }
.dna-pattern p { margin-top: 5px; color: rgba(240,237,232,.56); font-size: 11px; line-height: 1.5; }
.coach-complete { padding: 28px; }
.brief-seal { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.brief-seal span, .brief-summary span, .brief-grid span, .brief-calibration span, .brief-next > span { color: var(--gold); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.brief-seal b { font-family: var(--display); font-size: 22px; }
.brief-summary { padding: 24px 0; }
.brief-summary p { margin-top: 8px; font-family: var(--display); font-size: 21px; line-height: 1.45; }
.brief-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--line); }
/* An odd number of cells would leave the hairline background showing through the
   empty half of the last row, which reads as a missing panel. The last cell takes
   the whole row instead. */
.brief-grid > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.brief-grid > div { min-height: 150px; padding: 18px; background: var(--paper); }
.brief-grid ul { margin: 10px 0 0; padding-left: 17px; }
.brief-grid li { margin-bottom: 7px; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.brief-calibration { display: grid; grid-template-columns: 1fr auto; gap: 26px; margin-top: 18px; padding: 18px; border-radius: var(--radius-sm); background: var(--sand); }
.brief-calibration strong { display: block; margin-top: 5px; font-size: 14px; }
.brief-calibration > div:last-child strong { font-family: var(--display); font-size: 25px; }
.brief-next { margin-top: 18px; padding: 22px; border-radius: var(--radius-sm); background: var(--ink); color: var(--cream); }
.brief-next h3 { margin: 7px 0 4px; font-family: var(--display); font-size: 20px; }
.brief-next p { color: rgba(240,237,232,.62); font-size: 13px; }
.decision-brief-row { display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center; padding: 18px 2px; border-top: 1px solid var(--line); }
.decision-brief-row:first-child { border-top: 0; }
.decision-brief-row h3 { margin: 5px 0; font-family: var(--display); font-size: 18px; }
.decision-brief-row p { display: -webkit-box; max-width: 760px; overflow: hidden; color: var(--mid); font-size: 13px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.brief-row-meta { display: grid; gap: 7px; justify-items: end; color: var(--faint); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
@media (max-width: 980px) {
  .coach-layout { grid-template-columns: 1fr; }
  .coach-side { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .coach-heading { align-items: flex-start; flex-direction: column; }
  .coach-heading .btn { width: 100%; }
  .coach-topline { padding: 20px; }
  .coach-messages { padding: 20px; }
  .coach-message.user { width: 92%; }
  .coach-quick { padding-left: 20px; }
  .coach-composer { padding: 16px 20px 20px; }
  .coach-actions { align-items: stretch; flex-direction: column; }
  .coach-actions > div { display: grid; grid-template-columns: 1fr 1fr; }
  .coach-side, .brief-grid { grid-template-columns: 1fr; }
  .brief-calibration, .decision-brief-row { grid-template-columns: 1fr; }
  .brief-row-meta { justify-items: start; }
}

/* ---------------------------------------------------------------------------
   Founding member access — application, invite, waitlist, admin
   The gate is the first thing a prospective member sees, so it is held to the
   same restraint as the rest of the product: no gradients that shout, no
   countdown urgency. Scarcity is stated once, quietly, and left alone.
   --------------------------------------------------------------------------- */

/* Founding Member badge. Two variants because the mark appears on the cream
   page and on the dark sidebar, where a gold-on-cream chip would disappear. */
.founder-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 8px;
  border: 1px solid rgba(184,150,12,.34); border-radius: 100px;
  background: rgba(184,150,12,.09); color: #8a6f08;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  white-space: nowrap;
}
.founder-badge svg { width: 12px; height: 12px; flex-shrink: 0; }
.founder-badge .seat { padding-left: 7px; border-left: 1px solid rgba(184,150,12,.3); font-feature-settings: "tnum"; letter-spacing: .06em; }
.founder-badge.on-ink { border-color: rgba(212,175,55,.32); background: rgba(212,175,55,.14); color: var(--gold-light); }
.founder-badge.on-ink .seat { border-left-color: rgba(212,175,55,.28); }
.side-user .meta .founder-badge { margin-top: 4px; padding: 2px 7px; font-size: 8.5px; }

/* Access pages reuse .auth but need room for a real form. */
.auth-card.auth-wide { max-width: 560px; }
.auth-card.auth-mid { max-width: 460px; }
.auth-aside .roster { z-index: 2; display: grid; gap: 12px; }
.auth-aside .roster div { display: flex; gap: 11px; align-items: flex-start; color: rgba(240,237,232,.62); font-size: 13.5px; line-height: 1.5; }
.auth-aside .roster div::before { content: ""; margin-top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }

/* Cohort identity replaces a public capacity counter: the constraint is the
   quality of onboarding and feedback, not a number racing to zero. */
.cohort-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 22px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
.cohort-line b { color: var(--ink); font-size: 11px; letter-spacing: .04em; text-align: right; }
.application-rationale { margin: 0 0 28px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sand); }
.application-rationale .eyebrow { color: var(--ink); }
.application-rationale ul { display: grid; gap: 9px; margin: 14px 0 0; padding: 0; list-style: none; }
.application-rationale li { display: flex; gap: 10px; color: var(--mid); font-size: 13.5px; line-height: 1.5; }
.application-rationale li::before { content: ""; width: 4px; height: 4px; margin-top: 8px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }

/* The two doors: apply, or redeem an invitation. */
.access-paths { display: grid; gap: 12px; }
.access-path {
  display: grid; grid-template-columns: 38px 1fr 16px; gap: 15px; align-items: center;
  padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
  transition: border-color .16s, transform .16s, box-shadow .16s;
}
.access-path:hover { transform: translateY(-2px); border-color: rgba(13,13,13,.24); box-shadow: var(--shadow-sm); }
.access-path:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.access-path .mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--ink); color: var(--gold-light); }
.access-path .mark svg { width: 18px; height: 18px; }
.access-path strong { display: block; font-family: var(--mono); font-size: 14.5px; font-weight: 600; }
.access-path span { display: block; margin-top: 3px; color: var(--mid); font-size: 13px; line-height: 1.5; }
.access-path .go { width: 16px; height: 16px; color: var(--faint); }
.access-path.is-muted { pointer-events: none; opacity: .5; }

/* Invite code entry. Wide tracking so a code read off an email is easy to
   check character by character. */
.code-input {
  font-family: var(--mono); font-size: 19px; font-weight: 600; letter-spacing: .16em;
  text-align: center; text-transform: uppercase;
}
.code-input::placeholder { letter-spacing: .16em; color: var(--faint); font-weight: 400; }
.code-ok {
  display: none; align-items: center; gap: 11px; margin-bottom: 20px; padding: 15px 17px;
  border: 1px solid rgba(62,125,82,.32); border-radius: var(--radius-sm); background: #f5faf6;
}
.code-ok.show { display: flex; }
.code-ok svg { width: 17px; height: 17px; color: var(--good); flex-shrink: 0; }
.code-ok div { min-width: 0; }
.code-ok strong { display: block; font-family: var(--mono); font-size: 12.5px; }
.code-ok span { display: block; color: var(--mid); font-size: 12.5px; }

/* Waitlist. Shown when applications are paused or the cohort is full. It has to
   read as a considered decision rather than an outage, so it keeps the same
   typography as the rest of the gate and offers a real next step. */
.waitlist { max-width: 520px; }
.waitlist-mark { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 24px; border-radius: 17px; background: var(--ink); color: var(--gold-light); }
.waitlist-mark svg { width: 25px; height: 25px; }
.waitlist h1 { font-family: var(--display); font-weight: 500; font-size: 32px; line-height: 1.2; letter-spacing: -.015em; margin-bottom: 14px; }
.waitlist > p { color: var(--mid); font-size: 15px; line-height: 1.7; margin-bottom: 16px; }
.waitlist-facts { display: grid; gap: 1px; margin: 28px 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--line); }
.waitlist-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 15px 18px; background: var(--paper); }
.waitlist-facts dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.waitlist-facts dd { font-family: var(--mono); font-size: 14px; font-feature-settings: "tnum"; }

/* Admin dashboard */
.admin-shell { min-height: 100vh; }
.admin-top {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 40px; border-bottom: 1px solid var(--line); background: var(--paper);
  position: sticky; top: 0; z-index: 20;
}
.admin-top .brand { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 700; letter-spacing: .2em; font-size: 14px; }
.admin-top .brand em { padding: 3px 8px; border-radius: 100px; background: var(--ink); color: var(--gold-light); font-family: var(--mono); font-size: 9px; font-style: normal; letter-spacing: .14em; text-transform: uppercase; }
.admin-top .who { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--mid); }

.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.metric { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.metric .k { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); }
.metric .v { margin-top: 10px; font-family: var(--display); font-size: 33px; line-height: 1; font-feature-settings: "tnum"; }
.metric .v small { font-size: 17px; color: var(--mid); }
.metric .d { margin-top: 7px; color: var(--mid); font-size: 12.5px; }
.metric.metric-ink { background: var(--ink); color: var(--cream); border-color: transparent; }
.metric.metric-ink .k { color: var(--gold-light); }
.metric.metric-ink .d { color: rgba(240,237,232,.58); }

.admin-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.admin-tab {
  padding: 11px 15px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
}
.admin-tab:hover { color: var(--ink); }
.admin-tab.on { color: var(--ink); border-bottom-color: var(--gold); }
.admin-tab .n { margin-left: 7px; padding: 1px 7px; border-radius: 100px; background: var(--sand); color: var(--ink); font-size: 10px; font-feature-settings: "tnum"; }
.admin-panel { display: none; }
.admin-panel.on { display: block; }

/* Founder analytics */
.analytics-toolbar {
  display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; gap: 22px; align-items: end;
  margin-bottom: 24px; padding: 18px 20px; position: sticky; top: 78px; z-index: 10;
  border-color: var(--line-2); background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(12px);
}
.analytics-toolbar > div:first-child strong { display: block; margin-top: 5px; font-family: var(--display); font-size: 18px; font-weight: 550; }
.analytics-presets { display: flex; gap: 5px; }
.range-chip { padding: 8px 11px; border: 1px solid var(--line); border-radius: 100px; background: var(--cream-2); color: var(--mid); cursor: pointer; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.range-chip:hover, .range-chip.on { border-color: var(--ink); background: var(--ink); color: var(--gold-light); }
.analytics-dates { display: flex; gap: 8px; align-items: end; }
.analytics-dates label { display: grid; gap: 5px; color: var(--faint); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.analytics-dates .input { width: 142px; min-height: 36px; padding: 7px 9px; font-family: var(--mono); font-size: 11px; }
.analytics-dashboard { display: grid; gap: 34px; }
.analytics-context { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -8px; }
.analytics-context span { padding: 6px 9px; border: 1px solid var(--line); border-radius: 100px; color: var(--mid); font-size: 11px; }
.analytics-section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.analytics-section-head h2 { margin-top: 5px; font-family: var(--display); font-size: clamp(19px, 2vw, 25px); font-weight: 520; letter-spacing: -.025em; }
.analytics-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.analytics-metric-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.analytics-metric { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); box-shadow: 0 8px 24px rgba(27,30,29,.025); }
.analytics-metric > span { display: block; min-height: 24px; color: var(--faint); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .1em; line-height: 1.35; text-transform: uppercase; }
.analytics-metric strong { display: block; margin-top: 7px; font-family: var(--display); font-size: clamp(25px, 2.5vw, 34px); font-weight: 520; letter-spacing: -.04em; line-height: 1; font-feature-settings: "tnum"; }
.analytics-metric strong small { margin-left: 2px; color: var(--mid); font-size: .5em; }
.analytics-metric p { min-height: 32px; margin-top: 8px; color: var(--mid); font-size: 11.5px; line-height: 1.45; }
.analytics-metric-ink { border-color: var(--ink); background: var(--ink); color: var(--cream); }
.analytics-metric-ink > span { color: var(--gold-light); }
.analytics-metric-ink p { color: rgba(240,237,232,.62); }
.analytics-metric-alert { border-color: rgba(168,93,76,.35); background: #fbf5f1; }
.analytics-metric-alert strong { color: #8e493a; }
.analytics-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.analytics-chart-card { min-width: 0; padding: 20px; overflow: hidden; }
.chart-scroll { min-width: 0; overflow-x: auto; }
.analytics-chart { display: block; width: 100%; min-width: 540px; height: auto; overflow: visible; }
.analytics-chart line { stroke: var(--line); stroke-width: 1; }
.analytics-chart text { fill: var(--faint); font-family: var(--mono); font-size: 9px; text-anchor: end; }
.analytics-chart .x-label { text-anchor: middle; }
.analytics-chart polyline { fill: none; stroke: var(--series); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--mid); font-family: var(--mono); font-size: 9.5px; }
.chart-legend i { width: 18px; height: 2px; border-radius: 2px; background: var(--series); }
.analytics-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 18px; align-items: stretch; }
.analytics-panel { padding: 20px; }
.feature-rank { display: grid; }
.feature-rank > div { display: grid; grid-template-columns: 26px minmax(120px, .7fr) minmax(100px, 1fr) 42px; gap: 10px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.feature-rank > div:first-child { border-top: 0; }
.feature-position { color: var(--faint); font-family: var(--mono); font-size: 10px; }
.feature-name { font-size: 13px; font-weight: 550; }
.feature-name small { display: block; margin-top: 2px; color: var(--faint); font-family: var(--mono); font-size: 9px; font-weight: 500; }
.feature-track { height: 5px; overflow: hidden; border-radius: 100px; background: var(--sand); }
.feature-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.feature-rank strong { text-align: right; font-family: var(--mono); font-size: 11px; }
.analytics-retention-grid { height: calc(100% - 52px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.analytics-empty { padding: 46px; text-align: center; }
.analytics-empty h3 { margin: 10px 0 8px; font-family: var(--display); font-size: 25px; font-weight: 520; }
.analytics-empty p { max-width: 580px; margin: 0 auto; color: var(--mid); line-height: 1.6; }
.analytics-empty .btn { margin-top: 18px; }
.analytics-skeleton { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.analytics-skeleton i { height: 118px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: linear-gradient(100deg, var(--paper) 20%, var(--cream-2) 40%, var(--paper) 60%); background-size: 220% 100%; animation: analytics-shimmer 1.4s ease-in-out infinite; }
.analytics-skeleton i:nth-child(2) { animation-delay: .08s; }
.analytics-skeleton i:nth-child(3) { animation-delay: .16s; }
.analytics-skeleton i:nth-child(4) { animation-delay: .24s; }
@keyframes analytics-shimmer { to { background-position: -220% 0; } }

@media (max-width: 1100px) {
  .analytics-toolbar { grid-template-columns: 1fr auto; }
  .analytics-dates { grid-column: 1 / -1; }
  .analytics-metric-grid, .analytics-metric-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .analytics-chart-grid, .analytics-split { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  .analytics-toolbar { position: static; grid-template-columns: 1fr; align-items: start; }
  .analytics-dates { grid-column: auto; flex-wrap: wrap; }
  .analytics-dates label { flex: 1; }
  .analytics-dates .input { width: 100%; }
  .analytics-metric-grid, .analytics-metric-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-skeleton { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .analytics-metric-grid, .analytics-metric-grid-5, .analytics-retention-grid { grid-template-columns: 1fr; }
  .analytics-metric > span, .analytics-metric p { min-height: 0; }
  .feature-rank > div { grid-template-columns: 24px minmax(0, 1fr) 36px; }
  .feature-track { display: none; }
}

/* One application, presented as something to read and judge — the challenge
   they wrote is the point, so it is the largest thing in the row. */
.review { padding: 22px 0; border-top: 1px solid var(--line); }
.review:first-child { border-top: 0; padding-top: 4px; }
.review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.review-who strong { display: block; font-family: var(--mono); font-size: 15px; font-weight: 600; }
.review-who span { display: block; margin-top: 3px; color: var(--mid); font-size: 12.5px; }
.review-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.review-q { margin: 15px 0 0; padding: 15px 17px; border-radius: var(--radius-sm); background: var(--sand); font-size: 14.5px; line-height: 1.65; }
.review-q b { display: block; margin-bottom: 6px; font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--mid); }
.review-src { margin-top: 11px; color: var(--mid); font-size: 12.5px; }
.review-actions { display: flex; gap: 9px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.review-actions .input { flex: 1; min-width: 200px; padding: 9px 12px; font-size: 13px; }
.review-note { margin-top: 12px; padding: 12px 15px; border-left: 2px solid var(--gold); background: var(--paper); color: var(--mid); font-size: 13px; }

.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 100px; font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.status-pending { background: #efe6c9; color: #6b560a; }
.status-approved { background: #dfe7df; color: #2f5238; }
.status-declined { background: #ecebea; color: #77716a; }
.status-active { background: #dfe7df; color: #2f5238; }
.status-redeemed { background: #e6ddf0; color: #4a3a6b; }
.status-reserved { background: #e8edf1; color: #405664; }
.status-revoked { background: #f0e3e3; color: #8a2b2b; }

/* Codes are read aloud and typed by hand, so they get monospace and room. */
.code-chip {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 11px;
  border: 1px dashed rgba(13,13,13,.2); border-radius: var(--radius-sm); background: var(--paper);
  font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .07em;
}
.code-chip button { border: 0; background: none; color: var(--mid); cursor: pointer; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.code-chip button:hover { color: var(--ink); }

.admin-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.admin-table th {
  padding: 0 14px 11px 0; border-bottom: 1px solid var(--line); text-align: left;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--faint);
}
.admin-table td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table .num { font-family: var(--mono); font-feature-settings: "tnum"; color: var(--mid); }

.setting { display: grid; grid-template-columns: 1fr 200px; gap: 20px; align-items: center; padding: 19px 0; border-top: 1px solid var(--line); }
.setting:first-of-type { border-top: 0; }
.setting strong { display: block; font-family: var(--mono); font-size: 13.5px; font-weight: 600; }
.setting p { margin-top: 4px; color: var(--mid); font-size: 13px; line-height: 1.55; }
.setting .field { margin: 0; }
.setting-wide { grid-template-columns: 1fr; }

/* Toggle. A switch reads as a decision; a checkbox reads as a preference.
   Namespaced because /settings ships its own, differently-built `.switch`. */
.access-switch { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; justify-self: end; }
.access-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.access-switch .track { position: relative; width: 46px; height: 26px; border-radius: 100px; background: var(--sand); border: 1px solid var(--line); transition: background .18s; flex-shrink: 0; }
.access-switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); box-shadow: var(--shadow-sm); transition: transform .18s; }
.access-switch input:checked + .track { background: var(--good); border-color: transparent; }
.access-switch input:checked + .track::after { transform: translateX(20px); }
.access-switch input:focus-visible + .track { outline: 2px solid var(--gold); outline-offset: 3px; }
.access-switch .state { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mid); }

/* Eight-week application volume. Bars, because the count matters more than the
   shape of the curve at this scale. */
.spark { display: flex; align-items: flex-end; gap: 7px; height: 96px; margin-top: 6px; }
.spark div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.spark i { display: block; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--gold-light), var(--gold)); min-height: 2px; }
.spark span { margin-top: 7px; text-align: center; font-family: var(--mono); font-size: 9px; color: var(--faint); }

@media (max-width: 900px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-top { padding: 14px 20px; }
  .admin-top .who span { display: none; }
}
@media (max-width: 620px) {
  .metric-grid { grid-template-columns: 1fr; }
  .setting { grid-template-columns: 1fr; }
  .access-switch { justify-self: start; }
  .waitlist h1 { font-size: 26px; }
  .admin-tabs { overflow-x: auto; }
  .access-path { grid-template-columns: 34px 1fr; }
  .access-path .go { display: none; }
}
.account-menu-head .founder-badge { align-self: flex-start; margin-top: 6px; }

/* Closed-beta membership, progress, and feedback */
.membership-card{overflow:hidden}.membership-hero{display:flex;justify-content:space-between;gap:28px;padding:34px;background:var(--ink);color:var(--cream)}.membership-hero h2{font-size:34px;margin:8px 0}.membership-hero p{color:var(--gold-light);font-weight:600}.membership-status{min-width:210px;padding:20px;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);display:grid;gap:7px}.membership-status svg{width:25px;color:var(--gold-light)}.membership-status span{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.58)}.membership-status strong{font-size:18px}.membership-stats{display:grid;grid-template-columns:repeat(4,1fr);padding:10px 28px 28px}.membership-stats div{padding:22px 16px;border-bottom:1px solid var(--line-2)}.membership-stats span{display:block;color:var(--mid);font-size:12px;margin-bottom:7px}.membership-stats strong{font-family:"Space Grotesk";font-size:24px}.membership-note{margin:0 34px 34px;padding:18px;border-left:3px solid var(--gold);background:var(--cream-2);color:var(--mid);line-height:1.65}.feedback-form{max-width:720px}.feedback-context{display:flex;justify-content:space-between;gap:16px;padding:14px 0 22px;color:var(--mid);font-size:12px}.feedback-context strong{color:var(--ink);font-weight:500}.feedback-prompt{position:fixed;right:24px;bottom:24px;z-index:80;width:min(390px,calc(100vw - 32px));padding:22px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 18px 50px rgba(0,0,0,.16);display:grid;gap:14px;animation:account-menu-in .2s ease forwards}.feedback-prompt strong{font:600 17px/1.45 "Space Grotesk"}.feedback-prompt>div{display:flex;gap:8px}.feedback-dismiss{position:absolute;right:10px;top:10px;border:0;background:transparent;color:var(--mid);cursor:pointer}.feedback-dismiss svg{width:17px}.progress-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden}.progress-stat{background:var(--paper);padding:20px}.progress-stat span{display:block;color:var(--mid);font-size:12px;line-height:1.4}.progress-stat strong{display:block;font:600 26px "Space Grotesk";margin-top:8px}.baseline-bar{height:6px;background:var(--sand);border-radius:10px;margin-top:12px;overflow:hidden}.baseline-bar i{display:block;height:100%;background:var(--gold);border-radius:inherit}.weekly-review-empty{padding:22px;background:var(--cream-2);border-radius:var(--radius-sm);color:var(--mid)}
@media(max-width:800px){.membership-hero{display:grid;padding:24px}.membership-status{min-width:0}.membership-stats,.progress-grid{grid-template-columns:repeat(2,1fr)}.membership-note{margin:0 22px 22px}.feedback-context{display:grid}.feedback-prompt{right:16px;bottom:16px}.account-menu{max-height:calc(100vh - 84px);overflow:auto}}

/* ========================================================================== 
   Decision-first MVP
   The primary experience is intentionally sparse: one North Star, one active
   decision, and one next action. Supporting intelligence stays behind details.
   ========================================================================== */
.workspace-state-loading { min-height: 100vh; display: grid; align-content: center; justify-items: center; gap: 14px; background: var(--cream); }
.workspace-loading-mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(13,13,13,.22); color: var(--ink); font: 500 22px/1 "Newsreader", Georgia, serif; animation: workspace-pulse 1.2s ease-in-out infinite alternate; }
.workspace-loading-copy { color: var(--faint); font: 600 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
@keyframes workspace-pulse { to { opacity: .38; transform: scale(.94); } }
.startup-shell { background: var(--cream); }
.startup-sidebar { pointer-events: none; }
.startup-brand, .startup-nav { display: grid; gap: 14px; }
.startup-brand { grid-template-columns: 12px 108px; align-items: center; margin-bottom: 42px; }
.startup-brand span { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.startup-brand i, .startup-nav i, .startup-topbar i, .startup-heading i, .startup-focus i, .decision-room-loading-grid i { display: block; overflow: hidden; background: rgba(240,237,232,.1); }
.startup-brand i { height: 11px; }
.startup-nav i { width: 72%; height: 10px; }
.startup-nav i:nth-child(2) { width: 58%; }
.startup-nav i:nth-child(3) { width: 66%; }
.startup-topbar { display: flex; align-items: center; justify-content: space-between; }
.startup-topbar i { width: 96px; height: 11px; background: var(--cream-2); }
.startup-topbar i:last-child { width: 34px; height: 34px; border-radius: 50%; }
.startup-workspace { position: relative; }
.startup-heading { display: grid; gap: 13px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.startup-heading i { height: 10px; width: 120px; background: var(--cream-2); }
.startup-heading i:nth-child(2) { width: min(680px, 82%); height: clamp(42px, 6vw, 68px); }
.startup-heading i:nth-child(3) { width: min(430px, 55%); height: 16px; }
.startup-focus { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1px; min-height: 350px; margin-top: 42px; border: 1px solid var(--ink); background: var(--line); box-shadow: 12px 12px 0 rgba(184,145,66,.12); }
.startup-focus i { background: var(--ink); }
.startup-focus i:nth-child(2) { opacity: .94; }
.startup-focus i:nth-child(3), .startup-focus i:nth-child(4) { display: none; }
.startup-progress { position: fixed; right: clamp(20px, 4vw, 48px); bottom: clamp(20px, 4vw, 42px); z-index: 12; width: min(320px, calc(100vw - 40px)); padding: 15px 17px; border: 1px solid var(--line); background: rgba(251,250,248,.94); box-shadow: 0 14px 38px rgba(13,13,13,.1); backdrop-filter: blur(14px); }
.startup-progress strong { display: block; margin-top: 9px; color: var(--mid); font: 600 9px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.startup-progress-bar { display: block; height: 2px; overflow: hidden; background: var(--cream-2); }
.startup-progress-bar i { display: block; width: 42%; height: 100%; background: var(--gold-deep, #8a6f14); animation: startup-progress 1.45s ease-in-out infinite; }
@keyframes startup-progress { from { transform: translateX(-105%); } to { transform: translateX(340%); } }
.decision-room-loading { min-height: 430px; padding: clamp(28px, 4vw, 48px); border: 1px solid var(--ink); background: var(--ink); color: var(--cream); box-shadow: 12px 12px 0 rgba(184,145,66,.15); }
.decision-room-loading-copy span { display: block; color: var(--gold-light); font: 700 9px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.decision-room-loading-copy strong { display: block; max-width: 660px; margin-top: 17px; font: 400 clamp(36px, 5vw, 64px)/1 "Newsreader", Georgia, serif; letter-spacing: -.04em; }
.decision-room-loading-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; margin-top: 72px; }
.decision-room-loading-grid i { height: 12px; background: rgba(240,237,232,.1); animation: workspace-pulse 1.1s ease-in-out infinite alternate; }
.decision-room-loading-grid i:nth-child(2) { width: 72%; animation-delay: .12s; }
.decision-room-loading-grid i:nth-child(3) { width: 84%; animation-delay: .24s; }
.decision-room-loading-grid i:nth-child(4) { width: 56%; animation-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
  .startup-progress-bar i, .decision-room-loading-grid i { animation: none; }
  .startup-progress-bar i { width: 70%; }
}
.empty-workspace { min-height: 100vh; overflow-x: hidden; background: #ece7dc; }
.first-run-gateway { position: relative; min-height: 100vh; isolation: isolate; overflow: hidden; background: radial-gradient(circle at 84% 18%, rgba(184,145,66,.18), transparent 24%), #ece7dc; }
.first-run-gateway::before { content: ""; position: fixed; inset: 0; z-index: -1; opacity: .22; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); }
.first-run-gateway-head { min-height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(24px, 4vw, 64px); border-bottom: 1px solid rgba(24,23,20,.16); }
.first-run-gateway-head > span { color: rgba(24,23,20,.56); font: 600 9px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.first-run-gateway-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); font: 700 12px/1 var(--mono); letter-spacing: .16em; }
.first-run-gateway-brand span { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--ink); font: 500 18px/1 "Newsreader", Georgia, serif; letter-spacing: 0; }
.first-run-account { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.first-run-account-copy { display: flex; align-items: flex-end; flex-direction: column; gap: 4px; }
.first-run-account-copy strong { max-width: 220px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.first-run-account-copy small { color: rgba(24,23,20,.52); font: 600 8px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.first-run-account .avatar { width: 36px; height: 36px; font-size: 11px; }
.first-run-gateway-main { min-height: calc(100vh - 76px); display: grid; place-items: center; }
.first-run-gateway-copy { width: min(820px, calc(100% - 48px)); padding: clamp(42px, 7vw, 84px) 0; animation: first-run-enter .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes first-run-enter { from { opacity: 0; transform: translateY(18px); } }
.first-run-gateway-copy h1 { max-width: 760px; margin: 18px 0 20px; font: 400 clamp(56px, 8vw, 104px)/.89 "Newsreader", Georgia, serif; letter-spacing: -.06em; text-wrap: balance; }
.first-run-gateway-copy > p { max-width: 620px; margin: 0 0 clamp(28px, 5vw, 46px); color: rgba(24,23,20,.68); font-size: 16px; line-height: 1.72; }
.session-outcomes { max-width: 700px; margin: 0 0 26px; padding: 18px 0 16px; border-top: 1px solid rgba(24,23,20,.18); border-bottom: 1px solid rgba(24,23,20,.18); }
.session-outcomes > span { display: block; margin-bottom: 13px; color: var(--gold-deep, #8a6f14); font: 700 9px/1 var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.session-outcomes ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; margin: 0; padding: 0; list-style: none; }
.session-outcomes li { position: relative; padding-left: 19px; color: rgba(24,23,20,.72); font-size: 12px; line-height: 1.5; }
.session-outcomes li::before { content: "✓"; position: absolute; top: .05em; left: 0; color: var(--gold-deep, #8a6f14); font-weight: 700; }
.session-expectation { margin: 14px 0 0; color: rgba(24,23,20,.58); font: 600 10px/1.4 var(--mono); letter-spacing: .06em; }
.first-run-gateway-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; width: 100%; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--ink); background: var(--ink); color: var(--cream); box-shadow: 12px 12px 0 rgba(184,145,66,.28); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.first-run-gateway-action strong { max-width: 590px; font: 500 clamp(18px, 2.4vw, 28px)/1.3 var(--display); }
.first-run-gateway-action > span:last-child { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(212,175,55,.58); color: var(--gold-light); }
.gateway-action-copy { display: flex; align-items: flex-start; flex-direction: column; gap: 7px; }
.gateway-action-copy small { color: rgba(240,237,232,.58); font-size: 11px; line-height: 1.5; }
.first-run-gateway-action svg { width: 20px; }
.first-run-gateway-action:hover { transform: translate(-3px, -3px); box-shadow: 16px 16px 0 rgba(184,145,66,.34); background: #1d1c19; }
.first-run-gateway-action:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
.decision-home { max-width: 1160px; padding-top: clamp(38px, 6vw, 72px); }
.decision-home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: clamp(24px, 4vw, 42px); padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.decision-home-head h1 { max-width: 780px; margin: 12px 0 0; font: 400 clamp(38px, 5vw, 66px)/.98 "Newsreader", Georgia, serif; letter-spacing: -.045em; text-wrap: balance; }
.workspace-status { flex: 0 0 auto; color: var(--mid); font: 600 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.north-star-context { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding: 24px 0 30px; }
.north-star-context h2 { max-width: 840px; margin: 10px 0 0; font: 400 clamp(27px, 3.5vw, 44px)/1.08 "Newsreader", Georgia, serif; letter-spacing: -.03em; }
.priority-decision { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 1px; border: 1px solid var(--ink); background: rgba(240,237,232,.18); box-shadow: 12px 12px 0 rgba(184,145,66,.18); }
.priority-decision-main, .priority-recommendation { padding: clamp(28px, 4vw, 48px); background: var(--ink); color: var(--cream); }
.priority-decision-main h2 { max-width: 720px; margin: 14px 0 18px; font: 400 clamp(38px, 5.5vw, 70px)/.98 "Newsreader", Georgia, serif; letter-spacing: -.045em; text-wrap: balance; }
.priority-decision-main p { max-width: 650px; color: rgba(240,237,232,.65); font-size: 14px; line-height: 1.7; }
.priority-recommendation { border-left: 1px solid rgba(240,237,232,.16); }
.priority-recommendation > span { display: block; color: var(--gold-light); font: 700 9px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.priority-recommendation p { margin: 14px 0 22px; font: 500 clamp(19px, 2.4vw, 28px)/1.35 var(--display); }
.priority-recommendation small { display: block; padding-top: 18px; border-top: 1px solid rgba(240,237,232,.16); color: rgba(240,237,232,.58); font-size: 11px; line-height: 1.6; }
.priority-decision .thinking-session { grid-column: 1 / -1; width: 100%; border-top: 1px solid var(--ink); border-left: 0; background: #f7f3e9; color: var(--ink); }
.priority-decision .thinking-session small { color: var(--mid); }
.priority-decision .session-kicker { color: var(--gold-deep, #8a6f14); }
.begin-decision { padding: clamp(32px, 6vw, 70px); border: 1px solid var(--ink); background: var(--paper); box-shadow: 12px 12px 0 rgba(184,145,66,.18); }
.begin-decision h2 { max-width: 850px; margin: 15px 0 18px; font: 400 clamp(38px, 5vw, 64px)/1 "Newsreader", Georgia, serif; letter-spacing: -.045em; text-wrap: balance; }
.begin-decision > p { max-width: 680px; margin-bottom: 28px; color: var(--mid); font-size: 15px; line-height: 1.7; }
.begin-decision .first-run-gateway-action { box-shadow: none; }
.decision-room-skeleton { min-height: 520px; border-radius: 4px; }
.coaching-path { border-top: 1px solid var(--ink); }
.coaching-step { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(180px, auto); gap: clamp(20px, 4vw, 54px); align-items: start; padding: clamp(30px, 5vw, 58px) 0; border-bottom: 1px solid var(--line); }
.step-number { padding-top: 4px; color: var(--faint); font: 500 11px/1 var(--mono); letter-spacing: .14em; }
.step-copy { max-width: 840px; }
.step-copy h2 { margin: 12px 0 0; font: 400 clamp(30px, 4.4vw, 56px)/1.08 "Newsreader", Georgia, serif; letter-spacing: -.035em; text-wrap: balance; }
.step-copy > p { max-width: 720px; margin-top: 20px; color: var(--mid); font-size: 15px; line-height: 1.75; }
.direction-step { align-items: end; }
.direction-step .step-copy h2 { font-size: clamp(28px, 3.7vw, 48px); }
.question-label { display: block; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--gold-deep, #8a6f14); }
.question-label.on-dark { color: var(--gold-light); }
.quiet-action { padding: 7px 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--mid); font: 600 12px var(--mono); letter-spacing: .05em; cursor: pointer; transition: color .18s, border-color .18s; }
.quiet-action:hover { color: var(--ink); }
.decision-step { min-height: 310px; background: linear-gradient(90deg, rgba(251,250,248,.62), rgba(251,250,248,0)); }
.focus-marker { justify-self: end; margin-top: 1px; padding: 8px 11px; border: 1px solid rgba(138,111,20,.28); border-radius: 999px; color: var(--gold-deep, #8a6f14); font: 600 9px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.next-step { grid-template-columns: 72px minmax(0, 1fr) minmax(290px, 360px); margin-top: clamp(18px, 3vw, 32px); padding: clamp(34px, 5vw, 58px); border: 0; background: var(--ink-soft); color: var(--cream); overflow: hidden; }
.next-step::after { content: ""; position: absolute; right: -110px; bottom: -180px; width: 360px; height: 360px; border: 1px solid rgba(212,175,55,.18); border-radius: 50%; box-shadow: 0 0 0 52px rgba(212,175,55,.035), 0 0 0 104px rgba(212,175,55,.02); pointer-events: none; }
.next-step .step-number { color: rgba(240,237,232,.4); }
.next-move-copy { position: relative; z-index: 1; }
.next-move-copy h2 { color: var(--cream); font-size: clamp(28px, 3.5vw, 46px); }
.recommendation-logic { display: grid; gap: 14px; max-width: 760px; margin-top: 28px; }
.recommendation-logic div { padding-top: 13px; border-top: 1px solid rgba(240,237,232,.14); }
.recommendation-logic span { display: block; margin-bottom: 5px; color: var(--gold-light); font: 600 9px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.recommendation-logic p { margin: 0; color: rgba(240,237,232,.72); font-size: 13px; line-height: 1.65; }
.thinking-session { position: relative; z-index: 1; align-self: stretch; display: grid; grid-template-columns: 1fr auto; align-content: end; gap: 7px 18px; padding: 24px; border: 1px solid rgba(212,175,55,.55); background: rgba(240,237,232,.04); transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.thinking-session:hover { transform: translateY(-3px); border-color: var(--gold-light); background: rgba(212,175,55,.08); }
.thinking-session:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }
.session-kicker { grid-column: 1 / -1; color: var(--gold-light); font: 600 9px/1.2 var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.thinking-session strong { font: 500 18px/1.35 var(--display); }
.thinking-session small { grid-column: 1 / -1; max-width: 250px; color: rgba(240,237,232,.58); font-size: 11px; line-height: 1.55; }
.session-arrow { grid-column: 2; grid-row: 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: var(--ink); }
.session-arrow svg { width: 17px; }
.decision-home-foot { display: flex; justify-content: flex-end; padding: 20px 2px 0; font-size: 12px; }
.decision-home-foot a { color: var(--mid); border-bottom: 1px solid var(--line); transition: color .18s, border-color .18s; }
.decision-home-foot a:hover { color: var(--ink); border-color: var(--ink); }
.decision-room-error { padding: 42px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); }
.decision-room-error h2 { margin: 12px 0 8px; }
.decision-room-error p { margin-bottom: 22px; color: var(--mid); }
.guided-session { margin: 8px 0 22px; border: 1px solid rgba(184,145,66,.42); background: var(--paper); box-shadow: 0 20px 60px rgba(13,13,13,.08); }
.guided-session-intro { padding: 28px 30px 24px; border-bottom: 1px solid var(--line); }
.guided-session-intro h1 { margin: 9px 0 10px; font: 400 clamp(30px, 4vw, 46px)/1.08 "Newsreader", Georgia, serif; letter-spacing: -.035em; }
.guided-session-intro p { max-width: 680px; color: var(--mid); font-size: 14px; line-height: 1.65; }
.guided-session-brief { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.guided-session-brief div { padding: 20px 22px; border-right: 1px solid var(--line); }
.guided-session-brief div:last-child { border-right: 0; }
.guided-session-brief span, .guided-session-opening span { display: block; margin-bottom: 7px; color: var(--gold-deep, #8a6f14); font: 600 9px/1.35 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.guided-session-brief p { margin: 0; color: var(--mid); font-size: 12px; line-height: 1.6; }
.guided-session-opening { padding: 20px 30px; background: var(--ink-soft); color: var(--cream); }
.guided-session-opening span { color: var(--gold-light); }
.guided-session-opening strong { display: block; max-width: 780px; font: 500 16px/1.5 var(--display); }

.decision-coach-page { max-width: 1120px; }
.coach-heading { align-items: end; }
.coach-heading h1 { font-size: clamp(42px, 5vw, 68px); line-height: 1; letter-spacing: -.05em; }
.coach-heading p { max-width: 650px; font-size: 17px; }
.fitbot-memory { margin: -12px 0 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fitbot-memory summary, .fitbot-secondary summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 2px; list-style: none; color: var(--mid); font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.fitbot-memory summary::-webkit-details-marker, .fitbot-secondary summary::-webkit-details-marker { display: none; }
.fitbot-memory summary span { color: var(--faint); font-weight: 500; }
.fitbot-memory[open] summary span { font-size: 0; }
.fitbot-memory[open] summary span::after { content: "Hide context"; font-size: 11px; }
#memorySummary { padding: 4px 2px 18px; color: var(--mid); font-size: 13px; }
#memorySummary > p { margin-top: 10px; }
.fitbot-memory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fitbot-memory-grid div { padding: 14px 16px; border-radius: 10px; background: var(--paper); }
.fitbot-memory-grid span { display: block; margin-bottom: 4px; color: var(--faint); font: 600 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.fitbot-memory-grid strong { display: block; font-size: 13px; line-height: 1.45; }
.coach-layout-focused { grid-template-columns: minmax(0, 1.7fr) minmax(230px, .55fr); align-items: stretch; }
.coach-conversation { overflow: hidden; border-color: rgba(184,145,66,.45); box-shadow: 0 22px 70px rgba(13,13,13,.1); }
.coach-topline { background: var(--ink); color: var(--cream); }
.coach-topline h2 { color: var(--cream); }
.coach-mode { max-width: 130px; color: rgba(240,237,232,.55); font: 500 10px/1.45 var(--mono); letter-spacing: .06em; text-align: right; text-transform: uppercase; }
.coach-promise { height: 100%; padding: 30px 26px; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; }
.coach-promise ol { margin: 26px 0 0; padding: 0; list-style: none; counter-reset: promise; }
.coach-promise li { position: relative; padding: 0 0 28px 38px; counter-increment: promise; }
.coach-promise li:not(:last-child)::after { content: ""; position: absolute; left: 12px; top: 28px; bottom: 6px; width: 1px; background: var(--line); }
.coach-promise li::before { content: counter(promise); position: absolute; left: 0; top: -3px; width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-deep, #8a6f14); font: 700 10px var(--mono); }
.coach-promise b, .coach-promise span { display: block; }
.coach-promise b { margin-bottom: 5px; font: 600 14px/1.4 var(--display); }
.coach-promise span { color: var(--mid); font-size: 12px; line-height: 1.55; }
.fitbot-secondary { margin-top: 16px; border-bottom: 1px solid var(--line); }
.fitbot-secondary summary { padding: 18px 2px; color: var(--ink); text-transform: none; letter-spacing: .02em; }
.fitbot-secondary-body { padding: 4px 0 24px; }
.fitbot-secondary .reasoning-map { box-shadow: none; }
.archive-dna { margin-top: 20px; padding: 24px; border-top: 1px solid var(--line); }

@media (max-width: 980px) {
  .priority-decision { grid-template-columns: 1fr; }
  .priority-recommendation { border-top: 1px solid rgba(240,237,232,.16); border-left: 0; }
  .coaching-step { grid-template-columns: 52px minmax(0, 1fr); }
  .coaching-step > :last-child { grid-column: 2; justify-self: start; }
  .next-step { grid-template-columns: 52px minmax(0, 1fr); }
  .thinking-session { width: min(100%, 460px); margin-top: 6px; }
  .coach-layout-focused { grid-template-columns: 1fr; }
  .coach-promise { display: none; }
}
@media (max-width: 620px) {
  .startup-sidebar { display: none; }
  .startup-focus { grid-template-columns: 1fr; min-height: 390px; margin-top: 28px; }
  .startup-focus i:nth-child(2) { display: none; }
  .startup-progress { right: 20px; bottom: 20px; }
  .decision-room-loading { min-height: 390px; }
  .decision-room-loading-grid { grid-template-columns: 1fr; margin-top: 54px; }
  .first-run-gateway { background: radial-gradient(circle at 92% 10%, rgba(184,145,66,.2), transparent 26%), #ece7dc; }
  .first-run-gateway-head { min-height: 66px; padding-inline: 20px; }
  .first-run-account-copy { display: none; }
  .first-run-gateway-main { min-height: calc(100vh - 66px); place-items: start center; }
  .first-run-gateway-copy { position: relative; width: 100%; margin: 0; padding: 48px 22px 42px; }
  .first-run-gateway-copy h1 { max-width: 500px; margin-top: 14px; font-size: clamp(48px, 15vw, 68px); line-height: .92; }
  .first-run-gateway-copy > p { font-size: 15px; line-height: 1.65; }
  .first-run-gateway-action { gap: 16px; min-height: 88px; padding: 20px; box-shadow: 7px 7px 0 rgba(184,145,66,.28); }
  .first-run-gateway-action strong { font-size: 18px; }
  .first-run-gateway-action > span:last-child { width: 42px; height: 42px; }
  .decision-home { padding-top: 32px; }
  .decision-home-head { align-items: flex-start; flex-direction: column; }
  .decision-home-head h1 { font-size: 36px; }
  .north-star-context { align-items: flex-start; flex-direction: column; }
  .priority-decision-main, .priority-recommendation { padding: 28px 24px; }
  .priority-decision-main h2 { font-size: 42px; }
  .session-outcomes ul { grid-template-columns: 1fr; gap: 9px; }
  .begin-decision { padding: 34px 24px; }
  .begin-decision h2 { font-size: 42px; }
  .coaching-step { grid-template-columns: 1fr; gap: 14px; padding: 32px 0; }
  .coaching-step > :last-child { grid-column: 1; }
  .step-number { padding: 0; }
  .step-copy h2 { font-size: 34px; }
  .quiet-action { justify-self: start; }
  .next-step { grid-template-columns: 1fr; margin-inline: -20px; padding: 34px 24px; }
  .next-step .step-number, .next-step .step-copy, .next-step .thinking-session { grid-column: 1; }
  .next-move-copy h2 { font-size: 32px; }
  .thinking-session { width: 100%; margin-top: 8px; }
  .guided-session-intro { padding: 24px 22px 20px; }
  .guided-session-brief { grid-template-columns: 1fr; }
  .guided-session-brief div { border-right: 0; border-bottom: 1px solid var(--line); }
  .guided-session-brief div:last-child { border-bottom: 0; }
  .guided-session-opening { padding: 20px 22px; }
  .decision-home-foot { justify-content: flex-start; }
  .fitbot-memory-grid { grid-template-columns: 1fr; }
  .coach-heading { align-items: start; }
  .coach-mode { display: none; }
}

/* ---------------------------------------------------------------------------
   Decision intelligence — the dashboard's ranking surface.
   Shared vocabulary: goal impact, decision health, actionable confidence, and
   dependency links. Used by the dashboard and the decision record.
   --------------------------------------------------------------------------- */

/* Section key + empty state, used outside .reflect-grid too. */
.rg-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.rg-empty { font-size: 13px; color: var(--faint); }

/* North Star history */
.ns-detail { margin-top: 8px; max-width: 72ch; color: var(--mid); font-size: 14px; line-height: 1.6; }
.goal-progress { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.goal-progress .gp-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mid); }
.goal-progress .gp-head strong { font-family: var(--display); font-size: 17px; color: var(--ink); letter-spacing: 0; }
.goal-progress .gp-note { margin-top: 8px; color: var(--mid); font-size: 13px; line-height: 1.55; }
.goal-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin-top: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--line); }
.goal-stats > div { padding: 13px; background: var(--paper); }
.goal-stats strong { display: block; font-family: var(--display); font-size: 22px; }
.goal-stats span { display: block; color: var(--mid); font-size: 10.5px; line-height: 1.35; }
.goal-history { margin-top: 16px; }
.goal-history summary { cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mid); }
.goal-history summary:hover { color: var(--ink); }
.ns-timeline { list-style: none; margin: 14px 0 0; padding: 0 0 0 16px; border-left: 1px solid var(--line-2); display: grid; gap: 14px; }
.ns-timeline .tl-item { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
.ns-timeline .tl-item::before { content: ""; position: absolute; left: -21px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--sand); border: 1px solid var(--line); }
.ns-timeline .tl-sharpened::before, .ns-timeline .tl-changed::before { background: var(--gold); border-color: var(--gold); }
.ns-timeline .tl-when { color: var(--faint); font-family: var(--mono); font-size: 10.5px; padding-top: 2px; }
.ns-timeline .tl-body strong { display: block; font-size: 13.5px; font-weight: 550; line-height: 1.45; }
.ns-timeline .tl-body em { display: block; margin-top: 3px; color: var(--mid); font-size: 12.5px; font-style: normal; line-height: 1.5; }

/* Goal impact */
.impact-chip { display: inline-block; padding: 2px 8px; border: 1px solid var(--line); border-radius: 100px; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--mid); }
.impact-high { border-color: rgba(160,60,45,.35); background: rgba(160,60,45,.07); color: #8f3325; }
.impact-medium { border-color: rgba(212,175,55,.45); background: rgba(212,175,55,.1); color: #7d6318; }
.impact-low { color: var(--faint); }

/* Today's highest-leverage decision */
.today-card { border-color: rgba(184,145,66,.55); box-shadow: var(--shadow); }
.today-card .td-title { display: block; margin: 6px 0 8px; font-family: var(--display); font-size: clamp(20px, 2.2vw, 26px); line-height: 1.28; color: inherit; text-decoration: none; }
.today-card .td-title:hover { color: var(--gold-deep, #8a6f14); }
.today-card .td-why { max-width: 78ch; color: var(--ink-soft); font-size: 14.5px; line-height: 1.65; }
.today-card .td-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 12px; color: var(--faint); font-size: 12px; }
.today-card .td-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 22px; margin-top: 18px; }
.today-card .td-block p { color: var(--ink-soft); font-size: 13.5px; line-height: 1.6; }
.today-card .td-impact { margin-top: 16px; }
.today-card .td-foot { display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.today-card .cd-stage { margin-top: 0; }

/* Decision health — how well the decision has been thought through. */
.health { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--cream-2); }
.health-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.health-head .hk, .conf-head .hk { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mid); }
.health-head strong, .conf-head strong { font-family: var(--display); font-size: 21px; line-height: 1; }
.health-head strong span { font-size: 12px; color: var(--faint); }
.health-head .hb, .conf-head .hb { font-size: 12px; color: var(--mid); }
.health-bar { height: 6px; margin-top: 10px; border-radius: 10px; background: var(--sand); overflow: hidden; }
.health-bar i { display: block; height: 100%; border-radius: inherit; background: var(--gold); }
.health-under_examined .health-bar i { background: #a03c2d; }
.health-developing .health-bar i { background: #c08a2a; }
.health-well_examined .health-bar i { background: var(--good, #3f7d52); }
.health-sum { margin-top: 10px; color: var(--mid); font-size: 13px; line-height: 1.55; }
.health-checks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.health-checks li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 9px; font-size: 13px; line-height: 1.5; }
.health-checks .hc-mark { display: flex; justify-content: center; align-items: center; width: 16px; height: 16px; margin-top: 2px; border: 1px solid var(--line); border-radius: 50%; }
.health-checks .hc-mark svg { width: 11px; color: var(--good, #3f7d52); }
.health-checks .hc-met { color: var(--mid); }
.health-checks .hc-met .hc-mark { border-color: rgba(63,125,82,.5); }
.health-checks .hc-gap strong { color: var(--ink); font-weight: 550; }
.health-checks em { display: block; margin-top: 2px; color: var(--mid); font-style: normal; }

/* Confidence, with the reasons behind it and the actions that move it. */
.conf-block { margin-top: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.conf-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.conf-reach { color: var(--gold-deep, #8a6f14); font-family: var(--mono); font-size: 11px; }
.conf-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 22px; margin-top: 14px; }
.conf-cols ul { margin: 0; padding-left: 17px; }
.conf-cols li { margin-bottom: 5px; color: var(--ink-soft); font-size: 13px; line-height: 1.55; }

/* Dependencies between decisions. */
.dep-line { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-top: 10px; color: var(--mid); font-size: 12.5px; }
.dep-line svg { width: 14px; flex: 0 0 auto; }
.dep-line a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 2px; }
.dep-blocked { color: #8f3325; }
.dep-blocked a { color: #8f3325; }

/* Other active decisions */
.other-decisions .ns-decisions-head { margin-bottom: 4px; }
.dcard { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 16px 0; border-top: 1px solid var(--line); }
.dcard:first-of-type { border-top: none; }
.dcard-flagged { background: var(--sand); border-top: none; border-radius: var(--radius-sm); padding: 16px; margin-top: 6px; }
.dcard-title { display: block; font-size: 15px; font-weight: 550; line-height: 1.4; color: inherit; text-decoration: none; }
.dcard-title:hover { color: var(--gold-deep, #8a6f14); }
.dcard-why { margin-top: 4px; max-width: 76ch; color: var(--mid); font-size: 13px; line-height: 1.55; }
.dcard-meta { display: flex; flex-wrap: wrap; gap: 5px 9px; align-items: center; margin-top: 9px; color: var(--faint); font-size: 12px; }
.dcard-next { margin-top: 9px; padding-left: 11px; border-left: 2px solid var(--gold); color: var(--ink-soft); font-size: 12.5px; line-height: 1.5; }

/* Recent insights */
.ins-list { display: grid; gap: 1px; margin-top: 4px; }
.ins-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 13px 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.ins-item:first-child { border-top: none; }
.ins-item strong { font-size: 14px; font-weight: 550; }
.ins-item p { margin-top: 3px; color: var(--mid); font-size: 13px; line-height: 1.55; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ins-item:hover strong { color: var(--gold-deep, #8a6f14); }
.ins-item > .faint { font-family: var(--mono); font-size: 11px; white-space: nowrap; }

/* Weekly Executive Brief */
.executive-brief .weekly-metrics { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.executive-brief .xb-north { padding: 14px 16px; margin-top: 6px; border-left: 3px solid var(--gold); background: var(--cream-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.executive-brief .xb-north strong { display: block; font-family: var(--display); font-size: 17px; line-height: 1.35; }
.executive-brief .xb-north .faint { display: block; margin-top: 4px; font-size: 12px; }
.executive-brief .xb-progress { margin-top: 18px; }
.executive-brief .xb-progress p { max-width: 78ch; color: var(--ink-soft); font-size: 14px; line-height: 1.65; margin-bottom: 12px; }
.executive-brief .xb-cols { margin-top: 18px; align-items: start; }
.executive-brief .xb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.executive-brief .xb-list li { font-size: 13.5px; line-height: 1.5; }
.executive-brief .xb-list a { font-weight: 550; color: var(--ink); }
.executive-brief .xb-list a:hover { color: var(--gold-deep, #8a6f14); }
.executive-brief .xb-list em { display: block; margin-top: 2px; color: var(--mid); font-size: 12.5px; font-style: normal; line-height: 1.5; }
.executive-brief .xb-risk p, .executive-brief .xb-opp p { font-size: 13.5px; line-height: 1.6; }
.executive-brief .xb-risk p + p, .executive-brief .xb-opp p + p { margin-top: 5px; }
.executive-brief .xb-focus { margin-top: 20px; padding: 18px; border-radius: var(--radius-sm); background: var(--ink); color: var(--cream); }
.executive-brief .xb-focus .rg-k { color: var(--gold-light); }
.executive-brief .xb-focus strong { display: block; font-family: var(--display); font-size: 19px; line-height: 1.35; }
.executive-brief .xb-focus p { margin-top: 6px; max-width: 74ch; color: rgba(240,237,232,.7); font-size: 13.5px; line-height: 1.6; }
.executive-brief .xb-focus .btn { margin-top: 14px; }

@media (max-width: 800px) {
  .goal-stats { grid-template-columns: repeat(2, 1fr); }
  .today-card .td-cols, .conf-cols { grid-template-columns: 1fr; }
  .dcard { grid-template-columns: 1fr; }
  .ns-timeline .tl-item { grid-template-columns: 1fr; gap: 2px; }
}

/* Decision record — why it matters, confidence rationale, relationships. */
.record-why { margin-top: 12px; max-width: 78ch; }
.conf-reasons { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); text-align: left; }
.conf-reasons > span { display: block; color: var(--gold-light); font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; }
.conf-reasons ul { margin: 7px 0 0; padding-left: 17px; }
.conf-reasons li { margin-bottom: 4px; color: rgba(240,237,232,.74); font-size: 12.5px; line-height: 1.55; }
.rel-group + .rel-group { margin-top: 18px; }
.rel-item { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.rel-group .rel-item:first-of-type { border-top: none; }
.rel-item a { font-size: 14px; font-weight: 550; color: var(--ink); }
.rel-item a:hover { color: var(--gold-deep, #8a6f14); }
.rel-done a { color: var(--mid); }
.rel-add { display: flex; gap: 12px; align-items: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-2); }
@media (max-width: 620px) { .rel-add { flex-direction: column; align-items: stretch; } }
/* Nothing linked. A card explaining an absence is the clearest case of the brief
   spending a screen on machinery, so an unlinked decision says so in one row and
   keeps the means of linking one tap behind it. */
.rel-none { padding: 14px 18px; }
.rel-none-line { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 0; }
.rel-none-line span { font: 600 9.5px/1.5 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--mid); }
.rel-none-line strong { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.rel-none-add > summary { margin-top: 8px; font-size: 12px; color: var(--mid); cursor: pointer; }
.rel-none-add > summary:hover { color: var(--ink); }

/* An outcome that is not due yet. The scheduled date is worth a line; the form
   behind it is worth a tap, and only a deliberate one — a review answered before
   there is anything to review is fiction the ledger would then have to carry. */
.outcome-upcoming { padding: 14px 18px; }
.outcome-early > summary { margin-top: 10px; color: var(--gold-deep); font: 600 12.5px/1.4 var(--body); cursor: pointer; }
.outcome-early > summary:hover { color: var(--ink); }
.outcome-early > form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

/* Secondary record cards. Options once a call has been made, and the session
   count: both are worth keeping and neither is worth a heading, a hint line and
   a bulleted list of two. One row, and the way in on the same row. */
.compact-fold { padding: 14px 18px; }
.compact-fold > details > summary { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; cursor: pointer; list-style: none; }
.compact-fold > details > summary::-webkit-details-marker { display: none; }
.compact-fold > details > summary span { font: 600 9.5px/1.5 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--mid); }
.compact-fold > details > summary strong { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.compact-fold > details > summary::after { content: "View"; margin-left: auto; color: var(--gold-deep); font: 600 11.5px/1.5 var(--body); }
.compact-fold > details[open] > summary::after { content: "Hide"; }
.compact-fold > details[open] > summary { margin-bottom: 10px; }
.compact-fold-go { margin-left: auto; color: var(--gold-deep); font: 600 11.5px/1.5 var(--body); text-decoration: none; }
.compact-fold-go:hover { color: var(--ink); }
.rel-none-add .rel-add { margin-top: 12px; padding-top: 12px; }

/* MVP polish — the Decision Brief is the primary product artifact. */
.session-transcript-toggle { display: grid; gap: 3px; width: 100%; margin: 8px 0 14px; padding: 13px 16px; border: 1px solid var(--line); background: rgba(251,249,243,.8); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .2s ease, transform .2s ease, background .2s ease; }
.session-transcript-toggle:hover { border-color: rgba(13,13,13,.3); background: #fbf9f3; transform: translateY(-1px); }
.session-transcript-toggle span { color: var(--faint); font: 700 9px/1.3 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.session-transcript-toggle strong { font-size: 12.5px; font-weight: 550; }
.msg.is-session-collapsed { display: none; }
.decision-doc.is-complete-document .dd-row { padding-block: 10px; }
.decision-doc.is-complete-document .dd-v { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dd-report .dr-briefing { display: grid; }
.dd-report .dr-confidence { display: grid; grid-template-columns: minmax(150px,.55fr) minmax(0,1.45fr); border-top: 1px solid rgba(13,13,13,.09); background: #f4f0e5; }
.dd-report .dr-confidence > div { padding: 20px 28px; }
.dd-report .dr-confidence > div + div { border-left: 1px solid rgba(13,13,13,.09); }
.dd-report .dr-confidence strong { display: block; font: 500 28px/1 var(--display); }
.dd-report .dr-grid-brief strong { display: block; font: 500 17px/1.45 var(--display); }

.unfinished-brief { display: block; margin-bottom: 20px; padding: clamp(20px,3vw,30px); border: 1px solid rgba(184,145,66,.5); background: #fbf9f3; color: var(--ink); box-shadow: 8px 8px 0 rgba(184,145,66,.12); transition: transform .2s ease, box-shadow .2s ease; }
.unfinished-brief:hover { transform: translateY(-2px); box-shadow: 10px 10px 0 rgba(184,145,66,.16); }
.unfinished-brief-head, .unfinished-brief-action { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.unfinished-brief-head > span:last-child { color: var(--faint); font: 500 10px/1 var(--mono); }
.unfinished-brief h2 { margin: 14px 0 18px; font: 400 clamp(25px,3.8vw,40px)/1.08 "Newsreader", Georgia, serif; letter-spacing: -.03em; }
.unfinished-brief-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.unfinished-brief-meta span { padding: 7px 10px; border: 1px solid var(--line); color: var(--mid); font-size: 11px; }
.unfinished-brief-meta b { color: var(--ink); }
.unfinished-brief-action { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--gold-deep,#8a6f14); }
.unfinished-brief-action svg { width: 17px; }

.mv-field > span, .mv-facts dt { display: block; margin-bottom: 4px; color: var(--faint); font: 600 9px/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.mv-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin: 16px 0 0; border: 1px solid var(--line); background: var(--line); }
.mv-facts div { min-width: 0; padding: 10px 11px; background: #fbf9f3; }
.mv-facts dd { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }

.confidence-label { margin: 12px 0 7px; color: var(--cream); font: 500 clamp(38px,5vw,54px)/1 var(--display); }
.record-brief-progress { display: flex; justify-content: space-between; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: rgba(184,145,66,.08); }
/* Set on a gold tint and pinned under the topbar for the whole scroll, so it
   carries a darker key than the app's `--faint` — 4.2:1 on this ground. */
.record-brief-progress span { color: #6B6459; font: 600 9px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.record-brief-progress strong { font-size: 12px; }
.brief-calibration small { display: block; margin-top: 4px; color: var(--faint); font-size: 11px; font-weight: 400; line-height: 1.45; }

@media (max-width: 700px) {
  .dd-report .dr-confidence { grid-template-columns: 1fr; }
  .dd-report .dr-confidence > div { padding: 18px 20px; }
  .dd-report .dr-confidence > div + div { border-left: 0; border-top: 1px solid rgba(13,13,13,.09); }
  .unfinished-brief { margin-top: -4px; box-shadow: 5px 5px 0 rgba(184,145,66,.12); }
  .unfinished-brief-head { align-items: flex-start; }
  .unfinished-brief-meta { display: grid; grid-template-columns: 1fr 1fr; }
  .unfinished-brief-meta span:last-child { grid-column: 1 / -1; }
  .mv-card { padding: 16px; }
  .mv-facts { grid-template-columns: 1fr; }
  .mv-foot { align-items: flex-start; }
  .mv-open-link { white-space: normal; text-align: right; }
  .record-summary-grid { grid-template-columns: 1fr; }
  /* Sticky under something already sticky. The app's topbar holds the top of the
     viewport at 62px plus whatever the notch takes, so a progress row pinned at
     top:0 spends the whole scroll underneath it — visible only as a strip
     bleeding out either side. It pins below the bar instead, which is the line
     it was always meant to sit on. */
  .record-brief-progress { position: sticky; top: calc(62px + env(safe-area-inset-top, 0px)); z-index: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .unfinished-brief, .session-transcript-toggle, .mv-card { transition: none; }
  .decision-doc.is-report, .dd-report { animation: none; }
}

/* ---------------------------------------------------------------------------
   Decision Intelligence Brief — executive decision memo
   The first screen opens on the call itself and reads top to bottom the way a
   partner would argue it: status, the recommendation as a directive, the one line
   that justifies it, then a snapshot strip that sticks to the top of the viewport
   and carries the four readings that decide whether to act on it — confidence,
   risk, next review, staleness. Below that, in order: what has changed since the
   operator last looked, the assumptions still waiting on them, the move the call
   implies, the two slower health signals, and the whole argument folded away.
   The question that started the decision drops to a subject line and every
   long-form explanation sits behind a fold, so the screen can be read in a glance
   and audited only when asked for. Each reading is printed in exactly one place.
   --------------------------------------------------------------------------- */
.decision-memo-page { max-width: 1040px; padding: 26px 40px 72px; }
/* Contrast on the brief's own tokens. `--faint` is set for decoration elsewhere
   in the app and reads at 2.9:1 on paper — below AA at any size. Everything it
   colours here is decision-critical: the tally under a folded section, the key
   of a health reading, how many observations an assumption rests on. Those are
   read, not glanced at, so the brief carries its own step-down of the token
   rather than leaving the rest of the app to inherit a change it did not ask
   for. The fold strip is set on sand, a darker ground than paper, so it needs
   one further step to clear 4.5:1 there. */
.decision-memo-page { --faint: #78726A; }
.decision-memo-page .memo-optional { --faint: #6A6459; --mid: #55504A; }
/* Two bands sit above everything on this page — the topbar and the snapshot — and
   almost every section here is arrived at by being scrolled to from somewhere
   else. Every such target reserves their combined stuck height, so a jump never
   lands the thing the operator asked for underneath them. */
.decision-memo-page .memo-card,
.decision-memo-page .memo-fold,
.decision-memo-page .memo-index,
.decision-memo-page .ws-wrap > section,
.decision-memo-page .ws-col,
.decision-memo-page .ws-timeline,
.decision-memo-page #outcomeSlot { scroll-margin-top: 140px; }
/* No `overflow: hidden` here, deliberately: the snapshot strip inside is
   `position: sticky`, and any non-visible overflow on an ancestor makes that
   ancestor the scrollport the strip sticks to — which, since the memo itself never
   scrolls, would leave the strip sitting still in the flow. Nothing in the memo
   overhangs its own box, so there is nothing to clip. */
.executive-memo { margin: 0 0 20px; border: 1px solid var(--ink); border-radius: 0; background: var(--paper); box-shadow: 14px 14px 0 rgba(184,145,66,.13); }

/* Hero: the status badge, the subject line, then the call. The decision's own
   question is printed once on this page and this is it — small, dimmed, above the
   recommendation so it reads as the subject of a memo rather than as its point. */
.memo-hero { position: relative; padding: clamp(20px,2.6vw,30px) clamp(24px,4vw,52px) clamp(22px,2.8vw,30px); background: var(--ink); color: var(--cream); }
.memo-hero::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--gold-light) 0 24%, rgba(212,175,55,.13) 24%); }
.memo-topline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; align-items: center; }
.memo-status { gap: 7px; padding: 5px 12px; font-size: 9.5px; letter-spacing: .16em; }
.memo-status i { flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.memo-doctype { color: rgba(240,237,232,.55); font: 600 9px/1.4 var(--mono); letter-spacing: .19em; text-transform: uppercase; }
/* The subject is the question the brief answers. It wraps rather than clamps:
   a decision named "Whether to move the Q3 launch to founders-only" is not the
   same decision as "Whether to move the Q3 launch to…", and the reader has no
   way to recover the difference from a surface with no expand on it. */
.memo-subject { max-width: 56ch; margin-top: clamp(13px,1.5vw,17px); color: rgba(240,237,232,.6); font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.memo-hero .memo-section-index { margin-top: clamp(14px,1.7vw,18px); color: var(--gold-light); }
.memo-hero h1 { max-width: 30ch; margin-top: 10px; color: var(--cream); font: 500 clamp(26px,3.4vw,41px)/1.09 var(--display); letter-spacing: -.035em; text-wrap: balance; }
/* The conclusion never travels alone: one line of rationale sits directly under
   it, close enough to be read in the same movement of the eye. */
.memo-rationale { max-width: 58ch; margin-top: clamp(11px,1.3vw,15px); color: rgba(240,237,232,.76); font: 400 clamp(14px,1.3vw,16px)/1.6 var(--body); text-wrap: pretty; }
.memo-why-now { max-width: 66ch; margin: 12px 0 0; color: rgba(240,237,232,.62); font-size: 12.5px; line-height: 1.6; text-wrap: pretty; }
.memo-why-now strong { color: var(--gold-light); font: 700 9px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
/* The Top Blocker callout. It is composed beside the hero, but it is printed
   inside the opened "Why" fold — and an open fold's background is paper. So the
   one box on the brief whose whole job is to carry the thing standing in the
   way was wearing the dark band's palette on a light surface: cream on a gold
   tint over paper measures about 1.05:1, which is not dim, it is absent. On a
   phone that box is most of the fold's first screen.
   Same box, same size, same spacing — the palette of the surface it actually
   sits on. The tint costs the label some of its own contrast back, so the band
   steps its gold down the way `.memo-next` does inside its tint, and the
   reading clears AA inside the box rather than only outside it. */
.memo-blocker { --gold-deep: #6E5809; display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 13px; max-width: 70ch; margin-top: clamp(15px,1.8vw,20px); padding: 14px 16px 15px; border: 1px solid rgba(138,111,20,.34); background: rgba(184,145,66,.11); }
.memo-blocker .memo-section-index { margin-top: 0; color: var(--gold-deep); }
.memo-blocker-mark { position: relative; width: 18px; height: 18px; margin-top: 2px; border: 1px solid var(--gold-deep); }
.memo-blocker-mark::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 8px; width: 1px; background: var(--gold-deep); }
.memo-blocker-mark::after { content: ""; position: absolute; bottom: 3px; left: 7px; width: 3px; height: 3px; background: var(--gold-deep); }
.memo-blocker p { margin: 6px 0 0; color: var(--ink); font: 500 14px/1.45 var(--display); text-wrap: pretty; overflow-wrap: anywhere; }
/* The blocker's detail is secondary, and secondary on this page means later in
   the reading order — not fainter than the reading order can carry. */
.memo-blocker small { display: block; margin-top: 5px; color: var(--ink-soft); font-size: 11.5px; line-height: 1.5; overflow-wrap: anywhere; }

/* Confidence tone. The band decides the colour of the reading wherever it is
   printed, so a "Limited" in the hero and a "Limited" in the record cannot be
   two different shades of the same word. */
.mb-bad { --tone: #e6a08f; }
.mb-warn { --tone: var(--gold-light); }
.mb-mid { --tone: var(--gold-light); }
.mb-ok { --tone: #9ed2ac; }
/* The detailed reasoning: everything the hero used to say in full, one tap down.
   Kept inside the dark band so opening it reads as more of the same document
   rather than as a section of its own. */
.memo-hero-more { margin-top: clamp(13px,1.5vw,17px); }
.memo-hero-more > summary { width: fit-content; color: var(--gold-light); font: 700 9px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; list-style: none; }
.memo-hero-more > summary::-webkit-details-marker { display: none; }
.memo-hero-more > summary::after { content: " +"; }
.memo-hero-more[open] > summary::after { content: " –"; }
.memo-hero-more > summary:hover { color: var(--cream); }
.memo-hero-detail { animation: decision-change-in .4s cubic-bezier(.22,1,.36,1) both; }
.memo-hero-detail .memo-rationale { margin-top: clamp(12px,1.4vw,15px); }
.memo-hero-math { max-width: 66ch; margin: 10px 0 0; color: rgba(240,237,232,.6); font: 400 11.5px/1.55 var(--mono); font-feature-settings: "tnum"; text-wrap: pretty; }

.memo-maturity-value { display: block; margin-top: 5px; color: var(--ink); font: 500 clamp(24px,2.7vw,34px)/1 var(--display); letter-spacing: -.04em; font-feature-settings: "tnum"; }
.memo-maturity-explain { display: block; max-width: 58ch; margin-top: 7px; color: var(--mid); font: 400 11.5px/1.5 var(--body); text-wrap: pretty; }
/* The definition behind a metric, not the reading of it. Permanently printed it
   costs three lines under every card on every screen that shows one, and it is
   the same three lines every time — so it sits behind its own affordance and
   the card keeps the sentence that is actually about this decision. */
.memo-metric-info { margin-top: 6px; }
.memo-metric-info > summary { display: inline-flex; align-items: center; min-height: 32px; color: var(--gold-deep); font: 700 8.5px/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; cursor: pointer; list-style: none; }
.memo-metric-info > summary::-webkit-details-marker { display: none; }
.memo-metric-info > summary::after { content: " ?"; margin-left: 5px; }
.memo-metric-info[open] > summary::after { content: " ↑"; }
.memo-metric-info > p { max-width: 58ch; margin: 4px 0 2px; color: var(--mid); font: 400 11.5px/1.55 var(--body); text-wrap: pretty; }
.memo-maturity-meter { display: block; height: 7px; margin-top: 12px; overflow: hidden; background: var(--sand); }
.memo-maturity-meter i { display: block; min-width: 3px; height: 100%; background: linear-gradient(90deg,var(--gold-deep),var(--gold)); transition: width 1s cubic-bezier(.22,1,.36,1); }
.memo-health-more { margin-top: 14px; border-top: 1px solid var(--line); }
.memo-health-more > summary, .memo-delta-detail > summary { width: fit-content; padding: 11px 0 0; color: var(--gold-deep); font: 700 9px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.memo-health-grid-extra { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 4px; }
.memo-health-grid-extra .mh-cell:nth-child(1) { padding-left: 0; border-left: none; }
.memo-next-explain { margin: 8px 0 0; color: var(--mid); font-size: 12px; line-height: 1.5; }
.memo-advanced-dots { margin-right: 7px; color: var(--gold-deep); letter-spacing: .08em; }


/* ---- What's new -----------------------------------------------------------
   The account behind the delta card above it, for the operator who wants the lines
   rather than the readings. Set on sand with a gold rail when something moved, a red
   one when the movement needs acting on — a band with nothing to itemise is not
   printed at all, so the presence of this band is itself the news. */
.memo-new { position: relative; padding: clamp(16px,1.9vw,22px) clamp(24px,4vw,52px) clamp(17px,2vw,23px); border-bottom: 1px solid var(--line); background: rgba(13,13,13,.022); }
.memo-new::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--line); }
.memo-new.is-live::before { background: var(--gold); }
.memo-new.is-due::before { background: #a03c2d; }
.memo-new-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3px 18px; align-items: baseline; }
.memo-new-when { color: var(--faint); font: 400 11px/1.45 var(--body); }
.memo-new-headline { max-width: 66ch; margin: 9px 0 0; color: var(--ink); font: 500 clamp(15.5px,1.6vw,18px)/1.36 var(--display); letter-spacing: -.018em; text-wrap: pretty; }
.memo-new-due { max-width: 66ch; margin: 9px 0 0; color: #8a2b2b; font: 400 12.5px/1.55 var(--body); }
.memo-new-list { list-style: none; display: grid; gap: 6px; margin: 11px 0 0; padding: 0; }
.memo-new-list li { position: relative; max-width: 74ch; padding-left: 17px; color: var(--ink-soft); font-size: 12.5px; line-height: 1.55; }
.memo-new-list li::before { content: ""; position: absolute; top: .66em; left: 0; width: 8px; height: 1px; background: var(--gold-deep); }
.memo-new-do { display: flex; flex-wrap: wrap; gap: 9px; margin-top: clamp(13px,1.5vw,17px); }
.memo-new-do .btn { min-height: 42px; border-radius: 0; padding: 10px 18px; font-family: var(--display); font-size: 13px; }
.memo-new-do .btn-ghost { border-color: rgba(13,13,13,.17); }
/* The same word, used twice: on a bullet inside a fold that arrived since the
   last review, and on a timeline entry. Small, gold, unmissable, never a colour
   the rest of the type uses. */
.memo-new-flag, .ws-tl-new {
  display: inline-block; margin-right: 8px; padding: 2px 6px;
  background: var(--gold); color: var(--ink);
  font: 700 8.5px/1.4 var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase;
  vertical-align: 2px;
}
.memo-bullets li.is-new::before { border-color: var(--gold); background: var(--gold); }

/* ---- Decision momentum ----------------------------------------------------
   One arrow, one label, and the confidence figure with its arithmetic attached.
   It sits directly under the hero because direction is the first thing an
   operator wants after the call itself: a decision at 37% and climbing is a
   different object from one at 37% and decaying, and the number alone cannot
   tell them apart. The strip is a reading, not a section — no controls, no
   folds, four lines at most. */
.memo-momentum { position: relative; padding: clamp(13px,1.5vw,17px) clamp(24px,4vw,52px) clamp(14px,1.6vw,18px); border-bottom: 1px solid var(--line); background: var(--paper); }
.memo-momentum::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--tone,var(--sand)); }
.mm-t-ok { --tone: var(--good); }
.mm-t-warn { --tone: var(--gold-deep); }
.mm-t-bad { --tone: #a03c2d; }
/* Sand is a surface, not a reading. It carried the flat state until the arrow
   it colours was measured at 1.2:1 on paper — a direction marker nobody could
   see, which reads as "no momentum recorded" rather than "momentum is flat".
   Mid is the neutral that survives being printed as a glyph. */
.mm-t-flat { --tone: var(--mid); }
.mm-read { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.mm-arrow { color: var(--tone,var(--mid)); font: 600 17px/1 var(--display); }
.mm-label { color: var(--ink); font: 700 9px/1.4 var(--mono); letter-spacing: .15em; text-transform: uppercase; }
/* The figure and its reason share one line, so "37%" is never printed without
   the count that produced it. */
.mm-math { color: var(--ink); font: 500 clamp(14px,1.5vw,16.5px)/1.4 var(--display); letter-spacing: -.016em; font-feature-settings: "tnum"; }
.mm-why { max-width: 68ch; margin: 7px 0 0; color: var(--ink-soft); font: 400 12.5px/1.55 var(--body); text-wrap: pretty; }
.mm-drivers { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.mm-drivers span { padding: 4px 8px; border: 1px solid rgba(13,13,13,.14); color: var(--mid); font: 600 8.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; font-feature-settings: "tnum"; }
/* Freshness, stated rather than implied. A recommendation is only as current as
   the last thing measured under it, and the number on screen does not decay on
   its own — so when the record goes quiet the page has to say so. */
.mm-stale { max-width: 70ch; margin: 10px 0 0; padding: 8px 11px; border-left: 2px solid #a03c2d; background: rgba(160,60,45,.07); color: var(--ink-soft); font: 400 12px/1.55 var(--body); text-wrap: pretty; }
.mm-stale strong { color: #8a2b2b; font-weight: 600; }
.memo-momentum:not(.is-stale) .mm-stale { border-left-color: var(--gold-deep); background: rgba(212,175,55,.09); }
.memo-momentum:not(.is-stale) .mm-stale strong { color: var(--gold-deep); }
/* One answer behind: the reading was computed before the result just logged, so it
   is set apart and says so until the reload folds the answer in.
   It recedes by losing its colour rather than its contrast. Dimming the block
   with `opacity` was the old device and it cannot be made safe — the faintest
   member of this strip is a 8.5px mono key, and at any opacity low enough to
   read as "receded" that key falls under 3:1. `grayscale` is luminance-
   preserving, so every reading here keeps the contrast it has at rest while the
   strip still visibly steps back from the live one beside it. */
.memo-momentum.is-behind .mm-read, .memo-momentum.is-behind .mm-drivers { filter: grayscale(1); }
.mm-behind { max-width: 70ch; margin: 8px 0 0; color: var(--gold-deep); font: 400 11.5px/1.5 var(--body); font-style: italic; }

/* ---- Decision delta -------------------------------------------------------
   What a returning operator checks first, and the reason nobody has to hunt for what
   moved: four readings measured against their last review, and one sentence about
   the decision rather than about its contents. Deliberately shorter than the band
   below it — this is the glance, that is the account. */
.memo-delta { position: relative; padding: clamp(15px,1.8vw,20px) clamp(24px,4vw,52px) clamp(16px,1.9vw,21px); border-bottom: 1px solid var(--line); background: var(--paper); }
.memo-delta::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--line); }
.memo-delta.is-live::before { background: var(--gold); }
.memo-delta-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3px 18px; align-items: baseline; }
.memo-delta-when { color: var(--faint); font: 400 11px/1.45 var(--body); font-feature-settings: "tnum"; }
/* The pulse. The only line on the page written about the state of the decision
   itself — "this recommendation has strengthened", "nothing has moved since your
   last review" — so it gets display type at reading size and nothing in this band
   competes with it. */
.memo-delta-pulse { max-width: 62ch; margin: 9px 0 0; color: var(--ink); font: 500 clamp(14.5px,1.5vw,16.5px)/1.42 var(--display); letter-spacing: -.016em; text-wrap: pretty; }
.memo-delta-rows { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: clamp(11px,1.3vw,14px) 0 0; border-top: 1px solid var(--line); }
.md-row { --tone: var(--faint); min-width: 0; padding: 11px 12px 12px; border-left: 1px solid var(--line); }
.memo-delta-rows .md-row:first-child { padding-left: 0; border-left: none; }
.md-ok { --tone: var(--good); }
.md-warn { --tone: var(--gold-deep); }
.md-bad { --tone: #a03c2d; }
.md-row dt { color: var(--faint); font: 700 8.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.md-row dd { margin: 6px 0 0; color: var(--ink); font: 500 clamp(13.5px,1.35vw,15.5px)/1.2 var(--display); letter-spacing: -.02em; font-feature-settings: "tnum"; overflow-wrap: anywhere; }
.md-bad dd { color: #8a2b2b; }
/* "unchanged" is the commonest value in this table and the least worth reading, so
   it recedes: the row that actually moved is the one the eye should land on. Each
   value carries a short tone rule under it, the same device the health cells use. */
.md-flat dd { color: var(--faint); font-weight: 400; }
.md-row dd::after { content: ""; display: block; width: 15px; height: 2px; margin-top: 9px; background: var(--tone); }
.md-flat dd::after { background: var(--sand); }
/* Printed only after an in-place re-analysis, when the readings above were computed
   before the answer that has just been recorded. Saying so — and letting the rows
   recede while it is true — is cheaper than a reload that would throw away the
   report the operator is reading. */
.memo-delta.is-stale::before { background: var(--sand); }
/* Same rule as the momentum strip: superseded readings step back chromatically,
   never by dropping their contrast. The line under them says so in words. */
.memo-delta.is-stale .memo-delta-rows { filter: grayscale(1); }
.memo-delta-stale { max-width: 62ch; margin: 10px 0 0; color: #8a2b2b; font: 400 11.5px/1.5 var(--body); font-style: italic; }
.memo-delta-do { display: flex; flex-wrap: wrap; gap: 9px; margin-top: clamp(12px,1.4vw,15px); }
.memo-delta-do .btn { border-radius: 0; padding-inline: 15px; font-family: var(--display); }
.memo-delta-detail { margin-top: 10px; }
.memo-delta-detail ul { display: grid; gap: 5px; margin: 9px 0 0; padding: 0; list-style: none; }
.memo-delta-detail li { position: relative; padding-left: 16px; color: var(--mid); font-size: 12px; line-height: 1.5; }
.memo-delta-detail li::before { content: ""; position: absolute; top: .65em; left: 0; width: 7px; height: 1px; background: var(--gold-deep); }
.memo-delta.is-live .memo-delta-pulse { animation: decision-change-in .45s cubic-bezier(.22,1,.36,1) both; }
.memo-delta.is-live .md-row { animation: decision-change-in .42s cubic-bezier(.22,1,.36,1) both; }
.memo-delta.is-live .md-row:nth-child(2) { animation-delay: .06s; }
.memo-delta.is-live .md-row:nth-child(3) { animation-delay: .12s; }
.memo-delta.is-live .md-row:nth-child(4) { animation-delay: .18s; }
@keyframes decision-change-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

/* ---- History, as an answer rather than an archive --------------------------
   Opening History used to render the whole timeline, which answers "how did this
   get here?" — a question nobody opens a brief on a phone to ask. What they are
   asking is "what changed?", and that has four short answers: how many entries
   the record holds, where confidence has travelled, how many changes landed in
   the window, and the latest delta. The timeline itself is one further tap and
   still holds every entry it ever did; this is a change to what is displayed,
   not to what is kept. */
.memo-history-digest { padding: clamp(14px,1.6vw,18px) clamp(24px,4vw,52px) 0; }
.memo-history-rows { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: clamp(10px,1.4vw,16px); margin: 0; }
.memo-history-rows > div { display: grid; gap: 4px; align-content: start; }
.memo-history-rows dt { color: var(--mid); font: 700 8.5px/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.memo-history-rows dd { margin: 0; color: var(--ink); font: 500 clamp(13px,1.3vw,15px)/1.3 var(--display); font-feature-settings: "tnum"; }
.memo-history-latest { max-width: 72ch; margin: clamp(11px,1.3vw,14px) 0 0; color: var(--ink-soft); font: 400 12.5px/1.55 var(--body); text-wrap: pretty; }
.memo-history-full { margin: 0 clamp(24px,4vw,52px); border-top: 1px solid rgba(13,13,13,.14); }
.memo-history-full > summary { display: flex; gap: 12px; align-items: center; justify-content: space-between; min-height: 46px; cursor: pointer; list-style: none; }
.memo-history-full > summary::-webkit-details-marker { display: none; }
.memo-history-full > summary .memo-card-label { display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: baseline; }
.memo-history-full > summary .memo-section-index { margin: 0; }
.memo-history-full #timelineSlot { padding-bottom: clamp(12px,1.5vw,16px); }

/* ---- What you said you would do -------------------------------------------
   The only band on the page that asks a question instead of reporting a state,
   so it is the only one drawn as an interruption: full-width gold rule, the
   promise in the operator's own words, how long it has been, and three answers.
   It sits directly under the call because a decision waiting on work its owner
   promised is not blocked by uncertainty — it is blocked by them. */
.memo-promise { position: relative; padding: clamp(15px,1.8vw,20px) clamp(24px,4vw,52px) clamp(16px,1.9vw,21px); border-bottom: 1px solid var(--line); background: rgba(184,145,66,.09); }
.memo-promise::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--gold-deep); }
.memo-promise.is-overdue { background: rgba(160,60,45,.07); }
.memo-promise.is-overdue::before { background: #a03c2d; }
.mpr-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3px 18px; align-items: baseline; }
.mpr-late { color: #8a2b2b; font: 700 9px/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.mpr-said { max-width: 62ch; margin: 9px 0 0; color: var(--ink); font: 500 clamp(15px,1.6vw,18px)/1.36 var(--display); letter-spacing: -.02em; text-wrap: pretty; }
.mpr-when { max-width: 68ch; margin: 7px 0 0; color: var(--mid); font: 400 12px/1.55 var(--body); font-feature-settings: "tnum"; text-wrap: pretty; }
/* The question, marked off by a rule: everything above it is the record, this is
   the brief speaking to the operator. */
.mpr-q { max-width: 60ch; margin: 11px 0 0; padding-left: 12px; border-left: 3px solid var(--gold-deep); color: var(--ink); font: 500 clamp(14px,1.5vw,16.5px)/1.42 var(--display); letter-spacing: -.016em; text-wrap: pretty; }
.memo-promise.is-overdue .mpr-q { border-left-color: #a03c2d; }
.mpr-do { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(12px,1.4vw,15px); }
.mpr-do .btn { border-radius: 0; padding-inline: 15px; font-family: var(--display); }
.mpr-do .btn-ghost { border-color: rgba(13,13,13,.17); }

.memo-section-index { display: block; color: var(--gold-deep); font: 700 9px/1.3 var(--mono); letter-spacing: .19em; text-transform: uppercase; }
.memo-bullets { list-style: none; display: grid; gap: 11px; margin: 0; padding: 0; max-width: 74ch; }
.memo-bullets li { position: relative; padding-left: 21px; color: var(--ink-soft); font-size: 14px; line-height: 1.62; }
.memo-bullets li::before { content: ""; position: absolute; top: .72em; left: 1px; width: 6px; height: 6px; border: 1px solid var(--gold-deep); background: var(--paper); transform: rotate(45deg); }
.memo-bullets li b { display: block; margin-bottom: 2px; color: var(--faint); font: 700 8.5px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
/* Evidence against the call keeps the same weight as evidence for it and gains
   the only colour on the list, so the two sides separate down the margin. */
.memo-bullets li b.is-against { color: #8a2b2b; }
.memo-bullets li:has(b.is-against)::before { border-color: #a03c2d; }
/* The loop-closing half of an outcome — expected against actual, whether the
   call itself worked, which assumptions held, what the next decision inherits.
   Ruled off from the narrative answers above it because these are read from the
   record rather than written by the operator, and the two should not blend. */
.outcome-loop { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
/* Generated prose can contain a URL, a metric name, or an identifier with no
   space in it. On a 390px screen one unbreakable token is a horizontal scrollbar
   across the entire brief, so every surface that prints model-written text is
   allowed to break inside a word when there is no other way to fit it. */
.memo-signal-call h1, .memo-signal-blocker p, .memo-signal-next > p,
.memo-signal-why p, .memo-signal-guard p, .memo-signal-whymatters p,
.memo-signal-confidence .memo-confidence-uncertainty, .memo-card-title,
.memo-task-text, .memo-metric-info > p, .mcl-rows dd,
.ws-row-text, .ws-tl-title, .ws-tl-text,
.memo-bullets li, .memo-void, .memo-flag, .ws-reading dd { overflow-wrap: break-word; }
/* A section whose only content was already printed above, or which has nothing
   in it at all. Set apart from a finding so an empty slot never reads as one. */
.memo-void { max-width: 66ch; color: var(--faint); font: 400 13px/1.6 var(--body); font-style: italic; }
/* A gap the brief is asking the operator to close before evidence is worth
   collecting — currently only the success metric, which is the one field where
   leaving it vague guarantees every later result can be read as a pass. */
.memo-flag {
  max-width: 66ch; margin-top: 9px; padding: 9px 12px;
  border-left: 2px solid var(--gold); background: var(--sand-soft, rgba(0,0,0,.03));
  color: var(--ink-soft); font: 400 12.5px/1.6 var(--body);
}

/* Decision health keeps the four signals needed to act in view. Still-holds and
   reversibility remain available one tap deeper rather than competing by default. */
.memo-health { padding: clamp(15px,1.8vw,20px) clamp(24px,4vw,52px) clamp(15px,1.8vw,20px); border-bottom: 1px solid var(--line); background: rgba(13,13,13,.022); }
.memo-health-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 18px; align-items: baseline; }
.memo-health-verdict { color: var(--mid); font: 400 11.5px/1.45 var(--body); }
.memo-health-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: clamp(11px,1.3vw,14px); border-top: 1px solid var(--line); }
.mh-cell { --tone: var(--faint); min-width: 0; padding: 13px 14px 2px; border-left: 1px solid var(--line); }
.memo-health-grid .mh-cell:first-child { padding-left: 0; border-left: none; }
.mh-ok { --tone: var(--good); }
/* Warning tones on a light ground use the deep gold, never the base one: at
   2.7:1 on paper and 2.2:1 on sand, `--gold` is invisible as a state rail. The
   type already takes this step-down; the indicators take it too, so a warning
   never reads as an absent one. */
.mh-mid { --tone: var(--gold-deep); }
.mh-warn { --tone: var(--gold-deep); }
.mh-bad { --tone: #a03c2d; }
.mh-k { display: block; color: var(--faint); font: 700 8.5px/1.4 var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.mh-v { display: flex; flex-wrap: wrap; gap: 1px 7px; align-items: baseline; margin-top: 8px; color: var(--ink); font: 500 clamp(15px,1.5vw,17px)/1.2 var(--display); letter-spacing: -.022em; font-feature-settings: "tnum"; overflow-wrap: anywhere; }
.mh-v em { color: var(--mid); font: 600 9px/1.5 var(--mono); font-style: normal; letter-spacing: .13em; text-transform: uppercase; }
/* One 3px rule per cell. For confidence it is a reading; everywhere else it is
   the state, which is why only the confidence rule is partly filled. */
.mh-rule { display: block; height: 3px; margin-top: 11px; background: var(--sand); }
.mh-rule i { display: block; width: 100%; height: 100%; background: var(--tone); }
.mh-rule.is-meter i { min-width: 3px; }
.mh-n { display: block; margin-top: 9px; color: var(--mid); font-size: 11.5px; line-height: 1.45; }
.mh-bad .mh-v, .mh-bad .mh-v em, .mh-bad .mh-n { color: #8a2b2b; }

/* ---- Raise confidence -----------------------------------------------------
   The assumptions, as work. "This assumption hasn't been validated" is a sentence
   the operator can only nod at; every row here is a box that opens one field, and
   the answer runs through the same evidence engine as the workspace form — so
   ticking one moves the number and the assumption's status rather than marking
   itself done. The points a row is worth are printed on its right, which is what
   makes this a route to a better number rather than a list of chores. */
.memo-tasks { padding: clamp(15px,1.8vw,20px) clamp(24px,4vw,52px) clamp(14px,1.6vw,18px); border-bottom: 1px solid var(--line); }
.memo-tasks-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3px 18px; align-items: baseline; list-style: none; cursor: pointer; }
.memo-tasks-head::-webkit-details-marker { display: none; }
.memo-tasks-head .memo-card-toggle { align-self: center; }
.memo-tasks[open] .memo-tasks-head .memo-card-toggle::after { transform: translate(-50%,-50%) rotate(0); }
.memo-tasks-when { color: var(--faint); font: 400 11px/1.45 var(--body); font-feature-settings: "tnum"; }
.memo-task-list { list-style: none; margin: clamp(10px,1.2vw,13px) 0 0; padding: 0; border-top: 1px solid var(--line); }
.memo-task { border-bottom: 1px solid var(--line); }
.memo-task:last-child { border-bottom: none; }
.memo-task-more { list-style: none; border-bottom: 1px solid var(--line); }
.memo-task-more > details > summary { display: flex; align-items: center; min-height: 44px; color: var(--gold-deep); font: 700 9.5px/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; cursor: pointer; }
.memo-task-more .memo-task-list { margin-top: 0; border-top: 1px solid var(--line); }
.memo-task-box { display: grid; grid-template-columns: 15px minmax(0,1fr) auto; gap: 13px; align-items: start; width: 100%; min-height: 50px; padding: 13px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.memo-task.is-done .memo-task-box { cursor: default; }
/* The box is the whole affordance: nothing else on this list says "you can do
   something about this", so it is drawn rather than implied, and it fills in for
   real when the assumption behind it moves. */
.memo-task-tick { position: relative; width: 15px; height: 15px; margin-top: 3px; border: 1px solid rgba(13,13,13,.34); background: var(--paper); transition: border-color .16s ease, background .16s ease; }
.memo-task-box:hover .memo-task-tick { border-color: var(--gold-deep); }
.memo-task.is-open .memo-task-tick { border-color: var(--gold-deep); background: var(--gold); }
.memo-task.is-done .memo-task-tick::after { position: absolute; inset: 0; display: grid; place-items: center; color: var(--paper); font: 700 10px/1 var(--mono); }
.memo-task.is-kept .memo-task-tick { border-color: var(--good); background: var(--good); }
.memo-task.is-kept .memo-task-tick::after { content: "\2713"; }
.memo-task.is-broken .memo-task-tick { border-color: #a03c2d; background: #a03c2d; }
.memo-task.is-broken .memo-task-tick::after { content: "\2715"; }
.memo-task-text { min-width: 0; color: var(--ink); font: 500 clamp(13.5px,1.4vw,15px)/1.45 var(--display); letter-spacing: -.014em; text-wrap: pretty; }
.memo-task.is-done .memo-task-text { color: var(--mid); text-decoration: line-through; text-decoration-color: rgba(13,13,13,.26); }
.memo-task-lift { padding-top: 2px; color: var(--gold-deep); font: 700 9.5px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.memo-task.is-kept .memo-task-lift { color: var(--good); }
.memo-task.is-broken .memo-task-lift { color: #8a2b2b; }
/* One field, indented to the width of the box that opened it, and two answers rather
   than a stance picker — "it holds up" and "it doesn't" are the only two things an
   operator ever comes back with, and either one is enough for the engine. */
.memo-task-form { padding: 0 0 15px 28px; }
.memo-task-why { max-width: 62ch; margin: 0; color: var(--mid); font: 400 12px/1.55 var(--body); }
.memo-task-measure { max-width: 62ch; margin-top: 9px; color: var(--ink-soft); font-size: 11.5px; line-height: 1.5; }
.memo-task-measure strong, .memo-task-outcome strong { color: var(--gold-deep); font: 700 8.5px/1.4 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.memo-task-measure ul { display: flex; flex-wrap: wrap; gap: 5px 14px; margin: 5px 0 0; padding: 0; list-style: none; }
.memo-task-measure li::before { content: "—"; margin-right: 5px; color: var(--gold-deep); }
.memo-task-outcome { max-width: 66ch; margin: 8px 0 0; color: var(--mid); font-size: 11.5px; line-height: 1.55; text-wrap: pretty; }
textarea.memo-task-in { min-height: 66px; margin-top: 9px; border-radius: 0; border-color: rgba(13,13,13,.2); }
.memo-task-do { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.memo-task-do .btn { border-radius: 0; padding-inline: 14px; font-family: var(--display); }
.record-lifecycle-control { margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); border-bottom: 0; }
.record-lifecycle-control .form-note { flex: 1 1 260px; margin: 0; }
/* Held while it saves, not faded out: the task text is the next action, and a
   half-contrast next action is one that cannot be read at the moment it most
   needs to be. Grayscale drops the band's gold without touching luminance. */
.memo-task.is-saving { filter: grayscale(1); pointer-events: none; }

/* The next action gets its own band — second in the hierarchy, the only thing on
   the page that asks to be done rather than read, and the one place the primary
   move sits, so a thumb finds it without a scroll. */
.memo-next { position: relative; padding: clamp(19px,2.3vw,27px) clamp(24px,4vw,52px) clamp(20px,2.4vw,28px); border-bottom: 1px solid var(--ink); background: rgba(184,145,66,.1); }
/* The band is tinted, so every token printed on it is reading against a ground
   a shade darker than paper: `--gold-deep` falls to 4.2:1 here and the brief's
   own `--faint` to 4.2:1, both under AA on the one section that carries the
   move being asked for. The band takes its own step-down of both, which keeps
   the "MEASURE" keys, the ranking line and the outcome note at 5:1 or better
   without changing what the section looks like. */
.memo-next { --gold-deep: #6E5809; --faint: #6B6459; }
.memo-next::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--gold); }
.memo-next-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 9px 18px; align-items: center; }
.memo-experiment-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.memo-experiment-meta span { padding: 5px 8px; border: 1px solid rgba(13,13,13,.16); background: rgba(255,255,255,.38); color: var(--ink-soft); font: 700 8.5px/1.2 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.memo-experiment-meta .impact-high { border-color: rgba(138,43,43,.28); color: #8a2b2b; }
.memo-experiment-meta .impact-medium { border-color: rgba(138,111,20,.3); color: var(--gold-deep); }
.memo-experiment-meta .impact-low { border-color: rgba(47,107,75,.25); color: var(--good); }
/* The reading that decides the ranking: whether the result changes the call or
   only the number. Marked apart from the estimates because it is the one figure
   that can justify running an expensive test over a cheap one. */
.memo-experiment-meta .meta-flip { border-color: rgba(13,13,13,.3); background: var(--ink); color: var(--cream); }
/* The experiment's own title, set at display size. A model-written task can
   carry a metric key or an identifier with no space in it, and one of those in
   24px type is a horizontal scrollbar across the whole brief on a phone. */
.memo-next-text { max-width: 54ch; margin-top: 10px; color: var(--ink); font: 500 clamp(18px,2vw,24px)/1.32 var(--display); letter-spacing: -.022em; text-wrap: pretty; overflow-wrap: anywhere; }
/* The disclosure carrying the experiment as it was recorded, where the title
   above it had to be shortened to a whole clause. Same control as the one on
   the first screen; the band it opens in is light, so it is coloured for it. */
.memo-next .memo-signal-full > summary { color: var(--gold-deep); }
.memo-next .memo-signal-full > summary:hover { color: var(--ink); }
.memo-next .memo-signal-full p { max-width: 68ch; color: var(--ink-soft); }
.memo-next-why { max-width: 68ch; margin: 10px 0 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.55; text-wrap: pretty; }
.memo-next-why strong { color: var(--gold-deep); }
/* Why this experiment and not one of the others. Printed rather than implied,
   because a ranked list of one is only trustworthy if the ranking is visible. */
.memo-next-rank { max-width: 70ch; margin: 8px 0 0; color: var(--mid); font-size: 12px; line-height: 1.55; text-wrap: pretty; font-feature-settings: "tnum"; }
.memo-next-rank strong { color: var(--gold-deep); font-weight: 600; }
.memo-next-measure { max-width: 68ch; margin-top: 12px; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.memo-next-measure strong, .memo-next-outcome strong { color: var(--gold-deep); font: 700 8.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.memo-next-measure ul { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 6px 0 0; padding: 0; list-style: none; }
.memo-next-measure li::before { content: "—"; margin-right: 6px; color: var(--gold-deep); }
.memo-next-outcome { max-width: 70ch; margin: 9px 0 0; color: var(--mid); font-size: 11.5px; line-height: 1.55; text-wrap: pretty; }
/* The primary control, with the escape hatch beside it rather than under it: the
   button asks one question in place, the link is for the operator who wants to
   re-argue the whole decision from the beginning in a full session. */
.memo-next-do { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: clamp(14px,1.6vw,18px); }
.memo-next-do .btn-gold { min-height: 48px; border-radius: 0; padding: 13px 28px; font-family: var(--display); font-size: 13.5px; }
.memo-next-alt { border-bottom: 1px solid rgba(13,13,13,.22); color: var(--ink-soft); font: 400 12.5px/1.5 var(--body); text-decoration: none; }
.memo-next-alt:hover { border-bottom-color: var(--ink); color: var(--ink); }
/* Promising to run the experiment is a separate gesture from running it, and it
   is offered quietly: a second control under the primary one, with the forecast
   it attaches spelled out, because a promise the operator did not understand
   they were making is one the brief has no right to chase. */
.memo-next-commit { margin-top: clamp(11px,1.3vw,14px); padding-top: 12px; border-top: 1px solid rgba(13,13,13,.12); }
.memo-next-commit .btn { border-radius: 0; padding-inline: 15px; border-color: rgba(13,13,13,.2); font-family: var(--display); }
.memo-next-commit small { display: block; max-width: 70ch; margin-top: 8px; color: var(--mid); font: 400 11.5px/1.5 var(--body); font-feature-settings: "tnum"; text-wrap: pretty; }

/* ---- The one question -----------------------------------------------------
   "Continue Analysis" used to be a door out of the brief into a fresh coaching
   session, which made the operator re-explain a decision the record already holds.
   It opens here instead: the single question the engine ranks highest, one field,
   and the report of what moved printed in the same place the question was asked.
   Set on paper inside the gold band so the form reads as a form rather than as
   more of the memo. */
.memo-ask { margin-top: clamp(14px,1.6vw,18px); border: 1px solid rgba(13,13,13,.16); padding: clamp(14px,1.6vw,18px) clamp(15px,1.7vw,20px) clamp(15px,1.7vw,19px); background: var(--paper); }
.memo-ask-q { max-width: 54ch; margin: 8px 0 0; color: var(--ink); font: 500 clamp(15.5px,1.7vw,18.5px)/1.34 var(--display); letter-spacing: -.02em; text-wrap: pretty; }
.memo-ask-why { max-width: 62ch; margin: 7px 0 0; color: var(--mid); font: 400 12px/1.5 var(--body); }
textarea.memo-ask-in { min-height: 84px; margin-top: 12px; border-radius: 0; border-color: rgba(13,13,13,.2); }
.memo-ask-do { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 11px; }
.memo-ask-do .btn { border-radius: 0; padding-inline: 15px; font-family: var(--display); }
/* The report back. Verdict, the move in the number, the lines behind it, one sentence
   of how the analysis now reads — the same shape as the delta card above, so what
   comes back is recognisably the instrument the operator was already reading rather
   than a second opinion arriving from somewhere else. */
.memo-ask-out { margin-top: clamp(14px,1.6vw,17px); padding-top: 13px; border-top: 1px solid var(--line); }
.memo-ask-working { margin: 0; color: var(--mid); font: 400 12.5px/1.55 var(--body); font-style: italic; }
.memo-ask-verdict { max-width: 54ch; margin: 8px 0 0; padding-left: 12px; border-left: 3px solid var(--tone,var(--line)); color: var(--ink); font: 500 clamp(15px,1.6vw,17.5px)/1.34 var(--display); letter-spacing: -.02em; text-wrap: pretty; }
.memo-ask-strengthened { --tone: var(--good); }
.memo-ask-weakened { --tone: var(--gold-deep); }
.memo-ask-revisit { --tone: #a03c2d; color: #8a2b2b; }
/* Same reason as the flat momentum arrow: the rail beside an unchanged verdict
   is the one that says the analysis held, and in sand it was invisible against
   the page. Faint is the quietest tone that is still a visible edge. */
.memo-ask-unchanged { --tone: var(--faint); }
.memo-ask-move { margin: 9px 0 0; color: var(--mid); font: 400 12px/1.5 var(--mono); font-feature-settings: "tnum"; }
.memo-ask-move b { color: var(--ink); font-weight: 600; }
.memo-ask-lines { list-style: none; display: grid; gap: 5px; margin: 10px 0 0; padding: 0; }
.memo-ask-lines li { position: relative; max-width: 70ch; padding-left: 17px; color: var(--ink-soft); font-size: 12.5px; line-height: 1.55; }
.memo-ask-lines li::before { content: ""; position: absolute; top: .66em; left: 0; width: 8px; height: 1px; background: var(--gold-deep); }
.memo-ask-reading { max-width: 64ch; margin: 11px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.6; text-wrap: pretty; }
.memo-ask-out .btn { min-height: 40px; margin-top: clamp(13px,1.5vw,16px); border-radius: 0; padding: 10px 18px; font-family: var(--display); font-size: 13px; }

/* The case for the call. Three claims of three different kinds — what carries it,
   what argues against it, and the assumption it rests on — so each is given its
   own treatment instead of becoming the third bullet in a list. The reader should
   be able to tell which side of the argument they are reading without reading it. */
.memo-why-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(212px,1fr)); gap: clamp(12px,1.4vw,18px); }
.why-block { min-width: 0; padding: 14px 16px 15px; border: 1px solid transparent; }
.why-head { display: flex; gap: 9px; align-items: center; }
.why-mark { flex: 0 0 auto; display: grid; place-items: center; width: 17px; height: 17px; font: 600 11px/1 var(--mono); }
.why-label { font: 700 8.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.why-text { margin-top: 10px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.6; text-wrap: pretty; }
.why-tail { margin-top: 9px; color: var(--mid); font: 400 11.5px/1.45 var(--body); }
/* On the record: a solid rule and a filled mark. */
.why-for { border-left: 3px solid var(--good); background: rgba(62,125,82,.055); }
.why-for .why-mark { background: var(--good); color: var(--paper); }
.why-for .why-label { color: #2f5238; }
/* The same weight in the opposite colour — a counter-argument is not a footnote. */
.why-against { border-left: 3px solid #a03c2d; background: rgba(160,60,45,.05); }
.why-against .why-mark { background: #a03c2d; color: var(--paper); }
.why-against .why-label, .why-against .why-tail { color: #8a2b2b; }
/* Not evidence at all — the thing not yet known to be true. Dashed on all four
   sides and unfilled, so it reads as provisional rather than as a third finding. */
.why-assumption { border: 1px dashed rgba(138,111,20,.5); background: rgba(184,145,66,.05); }
.why-assumption .why-mark { border: 1px dashed rgba(138,111,20,.6); color: var(--gold-deep); }
.why-assumption .why-label { color: var(--gold-deep); }
.why-assumption .why-tail { color: var(--gold-deep); font-weight: 500; }
/* The one way out of the summary and into the whole argument. A rule and a word,
   not a button — it belongs to the document. */
.memo-more { display: block; width: 100%; min-height: 48px; margin-top: 16px; padding: 0; border: none; border-top: 1px solid var(--line); background: none; color: var(--gold-deep); font: 700 9px/1.3 var(--mono); letter-spacing: .19em; text-transform: uppercase; text-align: left; cursor: pointer; }
.memo-more::after { content: " \2192"; }
.memo-more:hover { color: var(--ink); }

/* A percentage on its own is a feeling. Beside it sits the gap that holds it down
   and the work that would move it — two short columns, so confidence arrives with
   a path rather than as a verdict. */
.memo-case { display: grid; grid-template-columns: repeat(auto-fit,minmax(236px,1fr)); gap: clamp(16px,2vw,36px); }
.memo-case > div { min-width: 0; }
.memo-case .memo-section-index { color: var(--faint); }
/* The gap is stated plainly; the upside is the only part worth a gold label. */
.memo-case > div:last-child .memo-section-index { color: var(--gold-deep); }
.memo-case-list { list-style: none; display: grid; gap: 8px; margin: 11px 0 0; padding: 0; }
.memo-case-list li { position: relative; padding-left: 19px; color: var(--ink-soft); font-size: 12.5px; line-height: 1.55; }
.memo-case-list li::before { content: ""; position: absolute; top: .68em; left: 0; width: 9px; height: 1px; background: var(--faint); }
.memo-case-list.is-lift li::before { top: .18em; left: 1px; width: auto; height: auto; background: none; color: var(--gold-deep); content: "\2191"; font: 600 11px/1.45 var(--mono); }

/* The two administrative moves, kept off the primary line. */
.memo-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: clamp(15px,1.7vw,19px) clamp(24px,4vw,52px) clamp(16px,1.8vw,20px); }
.memo-actions .btn { min-height: 46px; padding: 12px 20px; border-radius: 0; font-family: var(--display); font-size: 13.5px; }
.memo-actions .btn-ghost { border-color: rgba(13,13,13,.17); }
/* ---- The last word --------------------------------------------------------
   What survives of it. "What changed", "what still matters" and "what to do
   tomorrow" each have a canonical home higher up — the change summary, the
   blocker, and the next action — so this band prints only the rows that say
   something those three do not, and renders as nothing at all when none of them
   do. That is the usual case, and it is the correct amount of prose to put
   underneath a readiness dashboard. */
.memo-closing { padding: clamp(17px,2vw,23px) 0 clamp(17px,2vw,23px); border-top: 1px solid var(--ink); background: var(--ink); color: var(--cream); }
.memo-closing .memo-section-index { padding: 0 clamp(24px,4vw,52px); color: var(--gold-light); }
.mcl-rows { display: grid; gap: clamp(10px,1.2vw,13px); margin: clamp(12px,1.4vw,15px) 0 0; padding: 0 clamp(24px,4vw,52px); }
.mcl-rows > div { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 4px 20px; align-items: baseline; }
.mcl-rows dt { color: rgba(240,237,232,.5); font: 700 8.5px/1.5 var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.mcl-rows dd { max-width: 64ch; margin: 0; color: rgba(240,237,232,.8); font: 400 13px/1.6 var(--body); text-wrap: pretty; }
/* The engine's own scorecard. Printed last, in the same band as the summary,
   because a system that keeps forecasts has to show what they were worth. */
.mcl-calibration { max-width: 70ch; margin: 0; padding: 0 clamp(24px,4vw,52px) clamp(17px,2vw,22px); color: rgba(240,237,232,.55); font: 400 11.5px/1.55 var(--mono); font-feature-settings: "tnum"; text-wrap: pretty; }
/* ---- Experiment implications ---------------------------------------------
   What a result would mean, folded into the experiment it belongs to. This was
   once a pair of essay columns headed "what happens if you're right" and "what
   happens if you're wrong", printed under the readiness dashboard where the
   operator met the consequences of a test before they had met the test. Both
   questions only have answers beside the experiment, and both answers fit in a
   line: what a supporting result buys, what a challenging one costs, and where
   the experiment stands right now. */
.memo-implications { margin-top: clamp(13px,1.5vw,17px); border-top: 1px solid rgba(13,13,13,.14); }
.memo-implications > summary { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 11px 0 0; cursor: pointer; list-style: none; }
.memo-implications > summary::-webkit-details-marker { display: none; }
.memo-implications > summary .memo-section-index { margin: 0; }
.memo-implication-rows { display: grid; gap: 8px; margin: 11px 0 0; }
.mi-row { display: grid; grid-template-columns: minmax(0,15em) minmax(0,1fr); gap: 3px 16px; align-items: baseline; }
.mi-row dt { color: var(--gold-deep); font: 700 8.5px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.mi-row dd { max-width: 68ch; margin: 0; color: var(--ink-soft); font: 400 12.5px/1.55 var(--body); text-wrap: pretty; }
/* A result that would overturn the call rather than only move the number is the
   reading that decides whether the experiment is worth running at all. */
.mi-challenges.is-flip dt, .mi-challenges.is-flip dd { color: var(--gold-deep); }
.mi-basis { display: block; max-width: 70ch; margin-top: 10px; color: var(--mid); font: 400 11px/1.55 var(--mono); font-feature-settings: "tnum"; }

/* The index of everything that explains the call: six numbered folds, flat, one
   tap each, nothing nested inside another fold. This is the whole of the brief
   below the first screen, and it is deliberately readable as a list of titles. */
.memo-sections { padding: 0 clamp(24px,4vw,52px) clamp(13px,1.5vw,19px); border-top: 1px solid var(--line); }
.memo-card { border-top: 1px solid var(--line); background: transparent; }
.memo-card:first-child { border-top: none; }
.memo-card:last-child { border-bottom: 1px solid var(--line); }
.memo-card summary, .memo-fold > summary { display: grid; grid-template-columns: 30px minmax(0,1fr) 20px; gap: 13px; align-items: center; min-height: 58px; cursor: pointer; list-style: none; transition: color .18s ease, padding .18s ease; }
.memo-card summary::-webkit-details-marker, .memo-fold > summary::-webkit-details-marker { display: none; }
.memo-card summary:hover, .memo-fold > summary:hover { color: var(--gold-deep); }
.memo-card-number { color: var(--faint); font: 600 9.5px/1 var(--mono); letter-spacing: .06em; }
.memo-card-label { min-width: 0; }
.memo-card-title { display: block; font: 500 clamp(16px,1.7vw,19px)/1.25 var(--display); letter-spacing: -.015em; }
/* How many things are inside, on the row that hides them. A folded section that
   shows only a title asks to be opened before it can be judged worth opening;
   on a phone, where folding everything is the only way the brief fits, the
   count and the tally under it are what keep "collapsed" from meaning
   "hidden". */
.memo-card-count {
  display: inline-block; margin-left: 8px; padding: 1px 6px;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--mid); font: 600 10px/1.5 var(--mono); letter-spacing: .04em; vertical-align: 2px;
}
.memo-card-tally { display: block; margin-top: 4px; color: var(--faint); font: 400 11px/1.5 var(--mono); letter-spacing: .02em; text-transform: none; overflow-wrap: anywhere; text-wrap: pretty; }
.memo-card[open] .memo-card-tally, .memo-fold[open] .memo-card-tally { display: none; }
/* A fold's live status. There is deliberately no "unchanged" badge — absence is
   the signal, so a badge on a title always means "look in here". Three states:
   something arrived, something is due, something needs acting on. */
.memo-live {
  display: inline-block; margin-left: 9px; padding: 2px 7px;
  border: 1px solid currentColor; color: var(--gold-deep);
  font: 700 8.5px/1.5 var(--mono); font-style: normal; letter-spacing: .11em; text-transform: uppercase;
  vertical-align: 3px;
}
.memo-live-live { border-color: transparent; background: var(--gold); color: var(--ink); }
.memo-live-warn { color: #8a6d0a; }
.memo-live-bad { border-color: transparent; background: #a03c2d; color: var(--paper); }
/* The quiet form. One change usually touches several sections at once, and a
   full badge on each of them turns one event into what reads as six. The record
   keeps the loud badge, because that is where the change is explained; the
   sections it also touched get a dot that says "this moved" without competing
   with the recommendation above them. Same colours, no box, no word — and no
   opacity: at .75 the gold dot measured 2.96:1, which is a marker saying "this
   moved" to nobody. Its quietness is its size, not its contrast. */
.memo-live-quiet {
  margin-left: 7px; padding: 0; border: 0; background: none;
  font-size: 9px; letter-spacing: 0; vertical-align: 2px;
}
.memo-live-quiet.memo-live-live { color: var(--gold-deep); }
.memo-live-quiet.memo-live-bad { color: #a03c2d; }
/* One line of the strongest thing on record, so the fold can be judged without
   being opened. The line is composed short at source — `condense` returns the
   first whole sentence or clause rather than a character count — so there is
   nothing left here for a clamp to cut. It wraps to three lines at most and
   prints what it prints in full; on a phone a peek that ends in an ellipsis is
   the same sentence with the informative half removed, and the reader has no
   way to tell what was cut from what was said. Anything longer is the body,
   one tap away. */
.memo-card-peek { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: 4px; color: var(--mid); font: 400 12px/1.5 var(--body); letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; text-wrap: pretty; }
/* The peek is a quotation from the body. Once the body is open it would be the
   same sentence twice, so it goes. */
.memo-card[open] .memo-card-peek, .memo-fold[open] .memo-card-peek { display: none; }
.memo-card-toggle { position: relative; flex: 0 0 auto; width: 18px; height: 18px; }
.memo-card-toggle::before, .memo-card-toggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1px; background: currentColor; transform: translate(-50%,-50%); transition: transform .2s ease; }
.memo-card-toggle::after { transform: translate(-50%,-50%) rotate(90deg); }
.memo-card[open] .memo-card-toggle::after, .memo-fold[open] .memo-card-toggle::after, .memo-index[open] .memo-card-toggle::after { transform: translate(-50%,-50%) rotate(0); }
.memo-card-body { display: grid; gap: clamp(16px,1.9vw,22px); padding: 2px 4px 24px 43px; }
.memo-card[open] { background: rgba(184,145,66,.05); }
.memo-card[open] summary { padding-inline: 5px; color: var(--ink); }
.memo-block { display: grid; gap: 10px; }

/* ---- Progressive disclosure ------------------------------------------------
   On a first read the six reasoning folds are themselves folded, behind one line.
   A first-time operator shown the whole index reads none of it; from the second
   read the index is open and only the sections stay folded. What is never hidden
   is that something moved — the peek carries the count, so this layer cannot bury
   news. */
.memo-index { border-top: 1px solid var(--line); }
.memo-index > summary { display: grid; grid-template-columns: minmax(0,1fr) 20px; gap: 13px; align-items: center; min-height: 62px; padding: 0 clamp(24px,4vw,52px); cursor: pointer; list-style: none; }
.memo-index > summary::-webkit-details-marker { display: none; }
.memo-index > summary:hover { color: var(--gold-deep); }
.memo-index[open] > summary { border-bottom: 1px solid var(--line); }
.memo-index[open] .memo-card-peek { display: none; }
.memo-index .memo-sections { border-top: none; }
/* Why the brief is showing what it is showing, said plainly, with the way out of
   it beside the explanation. A footnote, not a banner. */
.memo-stage { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 0; padding: 13px clamp(24px,4vw,52px) clamp(16px,1.8vw,20px); border-top: 1px solid var(--line); color: var(--faint); font: 400 11.5px/1.5 var(--body); }
.memo-stage-all { padding: 0; border: none; background: none; color: var(--gold-deep); font: 700 9px/1.3 var(--mono); letter-spacing: .17em; text-transform: uppercase; cursor: pointer; }
.memo-stage-all::after { content: " \2193"; }
.memo-stage-all:hover { color: var(--ink); }

/* The last two folds stand outside the argument but inside the sheet: the part of
   the decision that keeps moving, and the permanent record. Same numbering, same
   tap target, set on a sand band under an ink rule so the boundary between "the
   brief" and "the optional deeper layer" is visible without a heading. They are
   printed inside the sheet rather than after it because the snapshot above is
   sticky, and sticky only reaches as far as its parent's box. */
.memo-folds { display: grid; gap: 12px; padding: clamp(16px,1.9vw,22px) clamp(24px,4vw,52px) clamp(20px,2.3vw,28px); border-top: 1px solid var(--ink); background: rgba(232,226,214,.4); }
.memo-fold { position: relative; border: 1px solid var(--line); background: var(--paper); }
.memo-fold > summary { padding: 14px 20px; }
.memo-fold::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: transparent; }
.memo-fold-live::before { background: var(--gold); }
.memo-fold-bad::before { background: #a03c2d; }
.memo-fold-bad .memo-card-peek { color: #8a2b2b; }
.memo-fold-body { padding: 0 20px 24px; border-top: 1px solid var(--line); }
.record-context-strip { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 22px; }

/* Narrative turned to bullets keeps its host's voice — including on ink. */
.brief-summary .memo-bullets { margin-top: 10px; gap: 9px; }
.brief-summary .memo-bullets li { color: var(--ink); font: 500 17px/1.5 var(--display); }
.brief-next .memo-bullets, .confidence-action .memo-bullets { margin-top: 8px; }
.brief-next .memo-bullets li, .confidence-action .memo-bullets li { color: rgba(240,237,232,.64); font-size: 13px; }
.brief-next .memo-bullets li::before, .confidence-action .memo-bullets li::before { border-color: var(--gold-light); background: transparent; }
.mobile-progressive { display: none; }

/* ---------------------------------------------------------------------------
   The living decision workspace
   ---------------------------------------------------------------------------
   Everything below the memo. The memo is set as a printed document — ink hero,
   hairline cells, folded index. This is the part of the same page that moves, so
   it keeps the document's materials (paper, sand, hairline, the mono eyebrow,
   the gold accent) and changes only what it does with them: full-bleed bands
   instead of cards, one accent rail per band, and controls that sit inside the
   type rather than floating on top of it. Nothing here is a widget. */

.ws-wrap { display: grid; gap: 20px; margin-top: 20px; }
.ws-wrap > section { position: relative; border: 1px solid var(--line); background: var(--paper); box-shadow: 6px 6px 0 rgba(184,145,66,.09); }
.ws-wrap .memo-section-index { color: var(--gold-deep); }

/* Shared: the head of a band. Label left, count right, hairline under both. */
.ws-col-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 18px; align-items: baseline; padding: clamp(15px,1.7vw,19px) clamp(18px,2.6vw,28px) 12px; border-bottom: 1px solid var(--line); }
.ws-col-count { color: var(--mid); font: 400 11.5px/1.45 var(--body); font-feature-settings: "tnum"; }

/* --- Since your last review ---------------------------------------------- */
/* The only thing on the page that can tell the operator their picture of this
   decision is out of date, so it is the first band and it carries the rail. */
.ws-review { padding: clamp(19px,2.2vw,26px) clamp(18px,2.6vw,28px) clamp(17px,2vw,22px); }
.ws-review::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--faint); }
.ws-review-live::before { background: var(--gold); }
.ws-review-bad::before { background: #a03c2d; }
.ws-review-calm::before { background: var(--good); }
.ws-review-live { background: rgba(184,145,66,.05); }
.ws-review-bad { background: rgba(160,60,45,.045); }
.ws-review-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 18px; align-items: baseline; }
.ws-review-when { color: var(--mid); font: 400 11.5px/1.45 var(--body); }
.ws-review-lead { max-width: 40ch; margin-top: 10px; color: var(--ink); font: 500 clamp(19px,2.2vw,26px)/1.22 var(--display); letter-spacing: -.026em; text-wrap: balance; }
.ws-review-bad .ws-review-lead { color: #8a2b2b; }
/* Each change on its own line, marked with a rule rather than a bullet — this is
   a diff, not an argument. */
.ws-review-lines { list-style: none; display: grid; gap: 7px; max-width: 78ch; margin: clamp(12px,1.4vw,15px) 0 0; padding: 0; }
.ws-review-lines li { position: relative; padding-left: 20px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.56; }
.ws-review-lines li::before { content: ""; position: absolute; top: .66em; left: 0; width: 11px; height: 1px; background: var(--gold-deep); }
.ws-review-quiet { max-width: 74ch; margin-top: clamp(11px,1.3vw,14px); color: var(--ink-soft); font-size: 13.5px; line-height: 1.6; text-wrap: pretty; }
/* Five readings in a row, sharing the memo strip's grammar so the two read as
   one instrument at different scales. */
.ws-review-stats { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); margin-top: clamp(15px,1.8vw,20px); border-top: 1px solid var(--line); }
.ws-stat { min-width: 0; padding: 12px 14px 0; border-left: 1px solid var(--line); }
.ws-stat:first-child { padding-left: 0; border-left: none; }
.ws-stat-v { display: block; color: var(--ink); font: 500 clamp(16px,1.7vw,20px)/1.15 var(--display); letter-spacing: -.026em; font-feature-settings: "tnum"; }
.ws-stat-up .ws-stat-v { color: var(--good); }
.ws-stat-down .ws-stat-v { color: #8a2b2b; }
.ws-stat-k { display: block; margin-top: 7px; color: var(--faint); font: 700 8.5px/1.4 var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.ws-stat-n { display: block; margin-top: 6px; color: var(--mid); font-size: 11px; line-height: 1.45; }
.ws-review-actions { display: flex; flex-wrap: wrap; gap: 9px 12px; align-items: center; margin-top: clamp(15px,1.8vw,20px); }
.ws-review-hint { color: var(--faint); font: 400 11.5px/1.45 var(--body); }

/* --- The monitor -------------------------------------------------------- */
/* Three columns that keep the recommendation honest: what would break it, what
   it rests on, and what would settle it. Equal width on purpose — none of the
   three is the footnote of the other two. */
.ws-monitor-head { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: clamp(14px,2vw,32px); align-items: start; padding: clamp(18px,2.1vw,24px) clamp(18px,2.6vw,28px) clamp(16px,1.9vw,21px); border-bottom: 1px solid var(--line); background: rgba(13,13,13,.022); }
.ws-monitor-verdict { display: flex; gap: 10px; align-items: baseline; margin-top: 10px; color: var(--ink); font: 500 clamp(19px,2.1vw,25px)/1.2 var(--display); letter-spacing: -.026em; }
.ws-monitor-verdict i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.ws-verdict-ok i { background: var(--good); }
.ws-verdict-warn i { background: var(--gold); }
.ws-verdict-bad i { background: #a03c2d; }
.ws-verdict-bad { color: #8a2b2b; }
.ws-monitor-note { max-width: 52ch; margin-top: 9px; color: var(--ink-soft); font-size: 13px; line-height: 1.58; text-wrap: pretty; }
/* The one-sentence account of how the thinking has actually moved. Set as a
   pull quote so it is read as narration, not as another status field. */
.ws-monitor-narrative { padding-left: clamp(14px,1.6vw,20px); border-left: 1px solid var(--gold-deep); color: var(--ink-soft); font: 400 clamp(13.5px,1.35vw,15.5px)/1.62 var(--body); font-style: italic; text-wrap: pretty; }
.ws-monitor-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.ws-col { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--line); }
.ws-col:first-child { border-left: none; }
.ws-monitor-grid .ws-col-head { padding: clamp(14px,1.6vw,17px) clamp(15px,1.8vw,19px) 11px; }
.ws-monitor-grid .ws-col-count { font-size: 11px; }

.ws-list { list-style: none; display: grid; margin: 0; padding: 0; }
.ws-row { padding: 13px clamp(15px,1.8vw,19px) 14px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; }
.ws-row-text { color: var(--ink); font-size: 13.5px; line-height: 1.52; text-wrap: pretty; }
.ws-row-ok { border-left-color: var(--good); }
.ws-row-warn { border-left-color: var(--gold); }
.ws-row-bad { border-left-color: #a03c2d; background: rgba(160,60,45,.04); }
.ws-row-mid { border-left-color: var(--faint); }
/* An evidence request is not a finding — dashed, unfilled, in the coach's gold. */
.ws-row-ask { border-left: 3px dashed rgba(138,111,20,.45); }
.ws-row-ask.is-priority { border-left-style: solid; border-left-color: var(--gold-deep); background: rgba(184,145,66,.08); }
.ws-priority-label { display: inline-block; margin-bottom: 7px; color: var(--gold-deep); font: 700 8.5px/1.35 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.ws-more-experiments > details > summary { display: flex; align-items: center; min-height: 46px; padding: 12px clamp(15px,1.8vw,19px); color: var(--gold-deep); font: 700 9px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
/* The same control inside the evidence ledger keeps the ledger's own gutter, so
   "View all 14 entries" starts on the line the entries above it start on. */
.ws-ev-list > .ws-more-experiments > details > summary { padding-inline: clamp(18px,2.6vw,28px); border-bottom: 1px solid var(--line); }
.ws-more-experiments .ws-list { border-top: 1px solid var(--line); }
.ws-row.is-due { background: rgba(184,145,66,.06); }
.ws-row-meta { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 9px; }
.ws-row-note { margin-top: 8px; color: var(--mid); font-size: 11.5px; line-height: 1.5; }
/* What the experiment's result would mean, committed to before it is run. An
   experiment nobody has agreed how to read in advance can be narrated as
   confirmation whatever comes back, which is how a decision collects activity
   instead of evidence. */
.ws-reading { margin-top: 9px; display: grid; gap: 8px; }
.ws-reading div { display: grid; gap: 2px; }
.ws-reading dt { color: var(--faint); font: 700 8.5px/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.ws-reading dd { margin: 0; color: var(--mid); font: 400 11.5px/1.55 var(--body); }
.ws-row-note.is-due { color: var(--gold-deep); font-weight: 500; }
/* Why this experiment outranked the rest, on the row that won. */
.ws-row-note.is-rank { color: var(--ink-soft); font-style: italic; font-feature-settings: "tnum"; }
.ws-row-when { color: var(--faint); font-size: 11px; line-height: 1.45; }
.ws-row-do { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 10px; }
/* The ranking arithmetic, the readings to take and what happens after them: real
   working, but not what the operator needs to decide whether to run the test. */
.ws-row-more { margin-top: 9px; }
.ws-row-more > summary { color: var(--faint); font: 700 8.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; list-style: none; }
.ws-row-more > summary::-webkit-details-marker { display: none; }
.ws-row-more > summary:hover { color: var(--gold-deep); }
.ws-row-more[open] > summary { margin-bottom: 2px; color: var(--gold-deep); }
.ws-inline-label { color: var(--faint); font: 700 8.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
/* The status control on an assumption row. On desktop this is the native select
   exactly as it has always been and the chip face is not rendered at all; the
   phone treatment further down turns the pair into a compact tappable tag. */
.ws-status { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.ws-status-face { display: none; }
.ws-empty { padding: 15px clamp(15px,1.8vw,19px) 17px; border-bottom: 1px solid var(--line); color: var(--mid); font-size: 12.5px; line-height: 1.56; text-wrap: pretty; }

/* One-word state markers. Squared, mono, hairline — the memo's vocabulary, not
   a pill from another design system. */
.ws-tag { display: inline-flex; align-items: center; padding: 3px 7px; border: 1px solid var(--line); color: var(--mid); font: 700 8.5px/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; }
/* Which rung of the uncertainty hierarchy an experiment resolves — the reason it
   is ranked where it is, so it leads the row rather than sitting among the costs. */
.ws-tag-class { border-color: var(--gold); color: var(--gold-deep); }
.ws-tag-ok { border-color: rgba(62,125,82,.42); color: #2f5238; background: rgba(62,125,82,.07); }
/* Gold on a gold tint is the one tag that cannot borrow the page token: at
   4.3:1 the status of an untested assumption reads as decoration. */
.ws-tag-warn { border-color: rgba(184,145,66,.5); color: #6E5809; background: rgba(184,145,66,.09); }
.ws-tag-bad { border-color: rgba(160,60,45,.42); color: #8a2b2b; background: rgba(160,60,45,.07); }
.ws-tag-mid { border-color: var(--line); color: var(--mid); }
.ws-tag-lift { border-style: dashed; border-color: rgba(138,111,20,.5); color: var(--gold-deep); }
/* Whether the result changes the call or only the number — the reading that
   settles which experiment is worth running first. */
.ws-tag-flip { border-color: rgba(13,13,13,.3); background: var(--ink); color: var(--cream); }

/* The add row at the foot of a column. It sits flush in the column, pushed to
   the bottom so all three columns end on the same line. */
.ws-add { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding: 12px clamp(15px,1.8vw,19px) 14px; border-top: 1px solid var(--line); background: rgba(13,13,13,.018); }
.ws-add .input { flex: 1 1 130px; min-width: 0; min-height: 36px; padding: 8px 10px; border-radius: 0; font-size: 12.5px; }
.ws-add .btn { flex: 0 0 auto; }

/* Small controls. Defined here because the workspace is the only surface dense
   enough to need them, and they inherit the app's button and input treatment. */
.btn-xs { min-height: 30px; padding: 6px 10px; gap: 5px; border-radius: 0; font-size: 11.5px; }
.btn-xs svg { width: 13px; height: 13px; }
.input-xs { min-height: 30px; padding: 5px 8px; border-radius: 0; font-size: 11.5px; }

/* --- The evidence ledger ------------------------------------------------- */
/* Logging evidence is the one action that makes the brief move, so the composer
   is the top of the band rather than a form hidden under a toggle. */
.ws-compose { padding: clamp(15px,1.7vw,19px) clamp(18px,2.6vw,28px) clamp(14px,1.6vw,18px); border-bottom: 1px solid var(--line); background: rgba(184,145,66,.045); }
.ws-compose textarea.input { border-radius: 0; font-size: 14px; line-height: 1.55; resize: vertical; }
.ws-compose-row { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; margin-top: 11px; }
.ws-field { flex: 1 1 160px; min-width: 0; margin: 0; }
.ws-field-narrow { flex: 0 1 106px; }
.ws-field > span { display: block; margin-bottom: 5px; color: var(--faint); font: 700 8.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.ws-compose .input { min-height: 40px; border-radius: 0; font-size: 13px; }
.ws-compose .btn-gold { flex: 0 0 auto; min-height: 40px; border-radius: 0; padding-inline: 22px; font-family: var(--display); font-size: 13.5px; }
.ws-compose-hint { margin-top: 10px; color: var(--mid); font: 400 11.5px/1.5 var(--body); }

/* The default composer asks one question. Everything that used to sit on the
   surface — stance, weight, what it bears on, the confidence override — is the
   same machinery one fold down, because operating the reasoning engine by hand
   should be available without being the price of logging what happened. */
.ws-compose-go { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 11px; }
.ws-compose-go .ws-compose-hint { flex: 1 1 220px; margin: 0; }
.ws-compose-advanced { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.ws-compose-advanced > summary { color: var(--mid); font: 600 11.5px/1.4 var(--body); cursor: pointer; list-style: none; }
.ws-compose-advanced > summary::-webkit-details-marker { display: none; }
.ws-compose-advanced > summary::before { content: "+ "; color: var(--gold-deep); }
.ws-compose-advanced[open] > summary::before { content: "− "; }
.ws-compose-advanced > summary:hover { color: var(--ink); }
.ws-compose-advanced .ws-compose-row { margin-top: 12px; }

/* The reading, shown before anything is written. One sentence of what BILLIONERD
   made of the description, what it attaches to, and what it would do to
   confidence — then confirm or correct. Nothing important changes silently. */
.ws-reading-slot:empty { display: none; }
.ws-reading { padding: 14px clamp(18px,2.6vw,28px) 16px; border-bottom: 1px solid var(--line); border-left: 4px solid var(--gold); background: rgba(184,145,66,.06); }
.ws-reading-label { display: block; color: var(--faint); font: 700 8.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.ws-reading-lead { margin-top: 7px; color: var(--ink); font: 500 14.5px/1.5 var(--display); }
.ws-reading-on { margin-top: 6px; color: var(--mid); font-size: 12.5px; line-height: 1.55; }
.ws-reading-on span { color: var(--faint); font: 700 8.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.ws-reading-conf { margin-top: 6px; color: var(--mid); font-size: 12.5px; line-height: 1.55; }
.ws-reading-caveat { margin-top: 6px; color: var(--mid); font-size: 12px; font-style: italic; line-height: 1.55; }
.ws-reading-do { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 12px; }

/* The change report. The answer to "so what?" — printed the moment the evidence
   lands, in the tone of what it did to the recommendation. */
.ws-change-slot:empty { display: none; }
.ws-change { position: relative; padding: 14px clamp(18px,2.6vw,28px) 16px; border-bottom: 1px solid var(--line); border-left: 4px solid var(--faint); }
.ws-change-ok { border-left-color: var(--good); background: rgba(62,125,82,.05); }
.ws-change-warn { border-left-color: var(--gold); background: rgba(184,145,66,.06); }
.ws-change-bad { border-left-color: #a03c2d; background: rgba(160,60,45,.05); }
.ws-change-mid { border-left-color: var(--faint); background: rgba(13,13,13,.02); }
.ws-change-head { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.ws-change-move { color: var(--mid); font: 600 11px/1.4 var(--mono); letter-spacing: .06em; font-feature-settings: "tnum"; }
.ws-change-x { margin-left: auto; min-height: 26px; padding: 4px 6px; border-color: transparent; }
.ws-change-lead { max-width: 46ch; margin-top: 10px; color: var(--ink); font: 500 clamp(16px,1.7vw,20px)/1.25 var(--display); letter-spacing: -.022em; }
.ws-change-bad .ws-change-lead { color: #8a2b2b; }
.ws-change-impact { max-width: 72ch; margin-top: 9px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.58; text-wrap: pretty; }
.ws-change-lines { list-style: none; display: grid; gap: 5px; margin: 10px 0 0; padding: 0; }
.ws-change-lines li { position: relative; padding-left: 18px; color: var(--mid); font-size: 12px; line-height: 1.5; }
.ws-change-lines li::before { content: ""; position: absolute; top: .64em; left: 0; width: 10px; height: 1px; background: var(--faint); }
.ws-change-call { max-width: 62ch; margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(160,60,45,.22); color: #8a2b2b; font-size: 12.5px; font-weight: 500; line-height: 1.55; }

.ws-ev-list { list-style: none; display: grid; margin: 0; padding: 0; }
.ws-ev { padding: 13px clamp(18px,2.6vw,28px) 15px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; }
.ws-ev:last-child { border-bottom: none; }
.ws-ev-ok { border-left-color: var(--good); }
.ws-ev-bad { border-left-color: #a03c2d; }
.ws-ev-mid { border-left-color: var(--faint); }
/* Recorded, but not observed. A question or a risk sits on the ledger without
   the visual weight of something that actually happened. */
.ws-ev-noted { border-left-style: dashed; }
.ws-ev-noted .ws-ev-text { color: var(--mid); }
.ws-ev-head { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.ws-ev-when { margin-left: auto; color: var(--faint); font: 600 10px/1.4 var(--mono); letter-spacing: .09em; }
.ws-ev-text { max-width: 78ch; margin-top: 9px; color: var(--ink); font-size: 13.5px; line-height: 1.56; text-wrap: pretty; }
/* What it changed, set apart from what it said. */
.ws-ev-impact { max-width: 74ch; margin-top: 7px; color: var(--mid); font-size: 12px; font-style: italic; line-height: 1.55; }
/* The engine's reading of an entry is the deeper explanation, not the entry, so
   it opens from the row rather than doubling the height of every one of them.
   The control is a real touch target at the row's own left edge. */
.ws-ev-why > summary { display: inline-flex; align-items: center; min-height: 32px; margin-top: 2px; color: var(--gold-deep); font: 700 8.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.ws-ev-why > summary::after { content: " +"; margin-left: 5px; }
.ws-ev-why[open] > summary::after { content: " –"; }
.ws-ev-why .ws-ev-impact { margin-top: 0; padding-bottom: 3px; }

/* --- The timeline -------------------------------------------------------- */
/* How the thinking evolved, in order, on one continuous rule. The date column is
   fixed so the entries align down the page like a ledger. */
.ws-spark-wrap { padding: clamp(14px,1.6vw,18px) clamp(18px,2.6vw,28px) 4px; }
.ws-spark { display: block; width: 100%; height: clamp(52px,6vw,66px); }
.ws-tl { list-style: none; display: grid; margin: 0; padding: clamp(6px,.8vw,10px) clamp(18px,2.6vw,28px) clamp(18px,2vw,24px); }
.ws-tl-item { position: relative; display: grid; grid-template-columns: 116px minmax(0,1fr); gap: clamp(12px,1.6vw,22px); padding: 13px 0 15px 0; }
/* The rule runs through the whole list; each entry punches a mark onto it. */
.ws-tl-item::before { content: ""; position: absolute; top: 0; bottom: 0; left: 126px; width: 1px; background: var(--line); }
.ws-tl-item:first-child::before { top: 20px; }
.ws-tl-item:last-child::before { bottom: auto; height: 20px; }
.ws-tl-item::after { content: ""; position: absolute; top: 18px; left: 122px; width: 9px; height: 9px; border: 1px solid var(--gold-deep); background: var(--paper); transform: rotate(45deg); }
.ws-tone-ok::after { border-color: var(--good); background: var(--good); }
.ws-tone-bad::after { border-color: #a03c2d; background: #a03c2d; }
.ws-tone-mark::after { border-color: var(--ink); background: var(--ink); }
.ws-tl-when { padding-top: 2px; text-align: right; }
.ws-tl-date { display: block; color: var(--ink-soft); font: 600 11px/1.5 var(--mono); letter-spacing: .05em; font-feature-settings: "tnum"; }
.ws-tl-ago { display: block; margin-top: 3px; color: var(--faint); font-size: 10.5px; line-height: 1.45; }
.ws-tl-body { min-width: 0; padding-left: clamp(4px,.6vw,8px); }
.ws-tl-label { display: block; color: var(--gold-deep); font: 700 8.5px/1.4 var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.ws-tone-bad .ws-tl-label { color: #8a2b2b; }
.ws-tone-ok .ws-tl-label { color: #2f5238; }
.ws-tone-mark .ws-tl-label { color: var(--ink); }
.ws-tl-title { max-width: 74ch; margin-top: 7px; color: var(--ink); font: 500 clamp(14.5px,1.5vw,16.5px)/1.38 var(--display); letter-spacing: -.014em; text-wrap: pretty; }
.ws-tl-text { max-width: 76ch; margin-top: 6px; color: var(--ink-soft); font-size: 12.5px; line-height: 1.58; text-wrap: pretty; }
/* The two entries that are events rather than notes — the brief being read, and
   the outcome landing — are set on sand so they punctuate the run. */
.ws-tl-mark .ws-tl-body, .ws-tl-outcome .ws-tl-body { padding: 11px 14px 12px; border-left: 3px solid var(--ink); background: var(--sand); }
/* Everything that arrived since the last review is marked on the rule itself, so
   the eye can find the new stretch of the timeline without reading any of it. */
.ws-tl-item.is-new::after { border-color: var(--gold); background: var(--gold); }
.ws-tl-item.is-new .ws-tl-title { color: var(--ink); }
/* ---- The story of this decision -------------------------------------------
   The timeline is a section of the brief now, not a panel inside the monitoring
   fold: created, assumed, tested, moved, decided, reviewed — one continuous run
   the operator can read as a story. It keeps the timeline's own type and rule but
   takes the memo's gutters, because it is printed on the same sheet as everything
   above it. */
.executive-memo .ws-timeline { border-bottom: 1px solid var(--line); background: var(--paper); }
.executive-memo .ws-timeline .ws-col-head { padding: clamp(15px,1.8vw,20px) clamp(24px,4vw,52px) 11px; border-bottom: none; }
.executive-memo .ws-timeline .ws-col-head .memo-section-index { margin: 0; }
.executive-memo .ws-timeline .ws-spark-wrap { padding: 0 clamp(24px,4vw,52px) 4px; }
.executive-memo .ws-timeline .ws-tl { padding: 4px clamp(24px,4vw,52px) clamp(15px,1.8vw,20px); }
/* Everything older than the last few entries sits behind one line, so a decision
   that has been running for a year does not push the rest of the brief off the
   page — and the line says how far back it goes rather than just "more". */
.ws-tl-earlier { padding: 0 clamp(24px,4vw,52px); }
.ws-tl-earlier > summary { width: fit-content; padding: 9px 0; color: var(--gold-deep); font: 700 9px/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; cursor: pointer; list-style: none; }
.ws-tl-earlier > summary::-webkit-details-marker { display: none; }
.ws-tl-earlier > summary:hover { color: var(--ink); }
.executive-memo .ws-tl-earlier .ws-tl { padding-inline: 0; padding-bottom: 4px; }
.executive-memo .ws-tl-earlier + .ws-tl { border-top: 1px solid var(--line); padding-top: 10px; }
/* A promise is the one entry that refers back to another: the day it was made is
   printed under the day it was closed, because "kept" means nothing without the
   distance it was kept over. */
.ws-tl-promise .ws-tl-body { padding-left: 12px; border-left: 3px solid var(--gold-deep); }
.ws-tl-promise.ws-tone-bad .ws-tl-body { border-left-color: #a03c2d; }
.ws-tl-promise.ws-tone-ok .ws-tl-body { border-left-color: var(--good); }
.ws-tl-from { margin: 6px 0 0; color: var(--faint); font: 400 11px/1.5 var(--mono); font-feature-settings: "tnum"; }

@media (max-width: 900px) {
  /* The monitor's three columns cannot survive a tablet — they become three
     stacked bands, each keeping its own hairline head and add row. */
  .ws-monitor-head { grid-template-columns: minmax(0,1fr); }
  .ws-monitor-narrative { padding-left: 0; padding-top: 12px; border-left: none; border-top: 1px solid var(--line); }
  .ws-monitor-grid { grid-template-columns: minmax(0,1fr); }
  .ws-col { border-left: none; border-top: 1px solid var(--line); }
  .ws-col:first-child { border-top: none; }
  .ws-review-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .ws-stat { padding-left: 14px; border-left: 1px solid var(--line); }
  .ws-stat:nth-child(3n+1) { padding-left: 0; border-left: none; }
  .ws-stat:nth-child(n+4) { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
}

@media (max-width: 768px) {
  /* `.page` sets the shell's safe-area padding; this page overrides the whole
     shorthand, which used to drop it. On a phone with a home indicator that put
     the last card of the brief — and the last line inside it — under the gesture
     bar, and in landscape put the first character of every line under the notch.
     The insets are restored here, and the bottom keeps enough room for the toast
     host that floats above it. */
  .decision-memo-page {
    padding: 18px max(14px, env(safe-area-inset-right, 0px))
             calc(84px + env(safe-area-inset-bottom, 0px))
             max(14px, env(safe-area-inset-left, 0px));
  }
  /* A toast is ~45px tall and floats 24px above the inset, so it reaches 69px
     into the page. 56px of clearance left the last line of the brief under it;
     84px clears the tallest toast with room to spare. */
  .has-overlay-panel .decision-memo-page {
    padding-bottom: calc(var(--overlay-clearance, 0px) + 32px + env(safe-area-inset-bottom, 0px));
  }
  .decision-memo-page .memo-card,
  .decision-memo-page .memo-fold,
  .decision-memo-page .memo-index,
  .decision-memo-page .ws-wrap > section,
  .decision-memo-page .ws-col,
  .decision-memo-page .ws-timeline,
  .decision-memo-page #outcomeSlot { scroll-margin-top: calc(126px + env(safe-area-inset-top, 0px)); }
  /* The one floating panel that mounts on this page: the beta question that
     appears after a result is recorded. It is fixed to `bottom: 24px` with no
     inset of its own, so on a phone with a home indicator its three answer
     buttons sit in the gesture strip — a control the reader can see and cannot
     reliably press. Given the full width of a phone it also stops being a
     390px card offset 24px from one edge and becomes a sheet, which is what a
     panel covering the bottom of the screen already is. */
  .feedback-prompt {
    right: max(14px, env(safe-area-inset-right, 0px));
    left: max(14px, env(safe-area-inset-left, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: auto;
    padding: 18px;
  }
  .decision-memo-page .breadcrumb { margin-bottom: 14px; font-size: 10px; }
  .executive-memo { box-shadow: 6px 6px 0 rgba(184,145,66,.14); }
  /* The whole point of the phone layout: recommendation, health and the next
     action all land inside the first screen, so every band here is trimmed to the
     smallest padding that still reads as a printed document. */
  .memo-hero { padding: 17px 20px 20px; }
  .memo-topline { justify-content: flex-start; gap: 8px 14px; }
  .memo-doctype { font-size: 9px; letter-spacing: .14em; }
  .memo-subject { max-width: none; margin-top: 12px; font-size: 12.5px; }
  .memo-hero .memo-section-index { margin-top: 13px; }
  .memo-hero h1 { max-width: none; margin-top: 8px; font-size: clamp(24px,7vw,31px); line-height: 1.12; }
  .memo-rationale { max-width: none; margin-top: 10px; font-size: 13.5px; line-height: 1.58; }
  .memo-why-now { margin-top: 10px; font-size: 11.5px; }
  .memo-blocker { grid-template-columns: 19px minmax(0,1fr); gap: 10px; margin-top: 13px; padding: 12px 13px 13px; }
  .memo-blocker p { font-size: 13px; }
  .memo-hero-more { margin-top: 13px; }
  .memo-hero-math { max-width: none; font-size: 11px; }
  .memo-promise { padding: 15px 20px 17px; }
  .mpr-said { max-width: none; font-size: 15.5px; }
  .mpr-when, .mpr-q { max-width: none; }
  .mpr-do .btn { flex: 1 1 auto; }
  .memo-next-commit .btn { flex: 1 1 100%; }
  .memo-next-commit small { max-width: none; }
  .memo-health { padding: 14px 20px 15px; }
  .memo-health-verdict { font-size: 11px; }
  /* Health goes two-by-two on a phone so all four readings stay legible. */
  .memo-health-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .memo-health-grid .mh-cell:nth-child(2n+1) { padding-left: 0; border-left: none; }
  .memo-health-grid .mh-cell:nth-child(n+3) { border-top: 1px solid var(--line); }
  .memo-health-grid-extra .mh-cell:nth-child(n+3) { border-top: none; }
  /* The delta readings pair up rather than shrink: "needs revisiting" in a quarter
     of a phone's width is four lines of type nobody reads. */
  .memo-momentum { padding: 13px 20px 15px; }
  .mm-read { gap: 4px 9px; }
  .mm-math { flex: 1 1 100%; font-size: 15px; }
  .mm-why { max-width: none; font-size: 12px; }
  /* The counts wrap to their own lines rather than shrinking below readable. */
  .mm-drivers span { font-size: 9px; letter-spacing: .08em; }
  .mm-stale { max-width: none; font-size: 11.5px; }
  .memo-delta { padding: 15px 20px 17px; }
  .memo-delta-pulse { max-width: none; font-size: 15.5px; }
  .memo-delta-rows { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .memo-delta-rows .md-row { padding: 10px 11px 11px; }
  .memo-delta-rows .md-row:nth-child(2n+1) { padding-left: 0; border-left: none; }
  .memo-delta-rows .md-row:nth-child(n+3) { border-top: 1px solid var(--line); }
  .memo-delta-do .btn { flex: 1 1 auto; }
  .memo-new { padding: 15px 20px 17px; }
  .memo-new-headline { max-width: none; font-size: 16px; }
  .memo-new-do .btn { flex: 1 1 auto; }
  .memo-next { padding: 17px 20px 19px; }
  .memo-next-head { align-items: flex-start; }
  .memo-experiment-meta { gap: 5px; }
  .memo-experiment-meta span { font-size: 9px; letter-spacing: .08em; }
  .memo-next-text { max-width: none; margin-top: 8px; font-size: 18px; line-height: 1.34; }
  .memo-next-why { font-size: 11.8px; }
  .memo-next-rank { font-size: 11.5px; }
  .memo-next-measure ul, .memo-task-measure ul { display: grid; gap: 4px; }
  /* The one control on the first screen takes the full width of it, and the way out
     to a full session sits under the button rather than beside it. */
  .memo-next-do { gap: 11px; margin-top: 15px; }
  .memo-next-do .btn-gold { flex: 1 1 100%; text-align: center; }
  .memo-ask { margin-top: 15px; padding: 14px 15px 16px; }
  .memo-ask-q { max-width: none; font-size: 17px; }
  .memo-ask-why, .memo-ask-reading { max-width: none; }
  .memo-ask-do .btn, .memo-ask-out .btn { flex: 1 1 auto; }
  .memo-ask-verdict { max-width: none; font-size: 16px; }
  /* The task field loses its indent: 28px of alignment is worth less than 28px of
     room to type in on a 375px screen. The box it belongs to is directly above it. */
  .memo-tasks { padding: 15px 20px 16px; }
  .memo-tasks-when { font-size: 10.5px; }
  .memo-task-box { gap: 11px; }
  .memo-task-text { font-size: 14px; }
  .memo-task-form { padding-left: 0; }
  .memo-task-do .btn { flex: 1 1 auto; }
  .memo-why-grid { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .why-block { padding: 13px 14px 14px; }
  .memo-case { gap: 18px; }
  .memo-actions { gap: 8px; padding: 14px 20px 18px; }
  .memo-actions .btn { flex: 1 1 auto; padding-inline: 14px; font-size: 13px; }
  /* The last word keeps its rows but loses their label column, for the same
     reason the triad does. */
  .memo-closing { padding-top: 17px; }
  .memo-closing .memo-section-index, .mcl-rows, .mcl-calibration { padding-inline: 20px; }
  .mcl-rows > div { grid-template-columns: minmax(0,1fr); gap: 3px; }
  .mcl-rows dd { max-width: none; }
  .mcl-calibration { max-width: none; padding-bottom: 18px; font-size: 11px; }
  /* The implication rows lose their label column, for the same reason every
     other two-column reading on this page does: 15em of label on a 375px screen
     is most of the screen. */
  .mi-row { grid-template-columns: minmax(0,1fr); gap: 2px; }
  .mi-row dd { max-width: none; }
  .mi-basis { max-width: none; }
  .memo-sections { padding: 0 20px 12px; }
  .memo-history-digest { padding: 14px 20px 0; }
  .memo-history-rows { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px 14px; }
  .memo-history-full { margin-inline: 20px; }
  .memo-index > summary { min-height: 54px; padding: 0 20px; }
  .memo-stage { padding: 11px 20px 14px; font-size: 11px; }
  .memo-card summary, .memo-fold > summary { grid-template-columns: 26px minmax(0,1fr) 18px; gap: 11px; min-height: 52px; }
  .memo-card-title { font-size: 16px; }
  .memo-card-count { margin-left: 6px; padding: 1px 5px; font-size: 9.5px; }
  .memo-card-tally { font-size: 10.5px; }
  .memo-card-peek { font-size: 11.5px; }
  .memo-card-body { padding: 0 2px 18px 37px; }
  .memo-bullets li { font-size: 13.5px; line-height: 1.5; }
  .memo-flag { font-size: 12px; padding: 8px 10px; }
  /* The permanent record carries the same generated prose as the hero and had
     no phone sizing of its own, so a long summary or next action arrived at
     21px and filled the screen. Same rule as above: generated copy is set to be
     read, not to be a headline. */
  .brief-summary { padding: 18px 0; }
  .brief-summary p { font-size: 16px; line-height: 1.5; }
  .brief-summary .memo-bullets li { font-size: 14.5px; }
  .brief-grid > div { min-height: 0; padding: 15px; }
  .brief-calibration { gap: 14px; margin-top: 14px; padding: 15px; }
  .brief-calibration > div:last-child strong { font-size: 21px; }
  .brief-next { margin-top: 14px; padding: 17px; }
  .brief-next h3 { font-size: 16px; line-height: 1.4; }
  .memo-folds { gap: 10px; padding: 15px 14px 20px; }
  .memo-fold > summary { padding: 12px 16px; }
  .memo-fold-body { padding: 0 14px 20px; }
  .memo-fold-body .card.pad { padding: 18px; }
  /* The workspace loses its side margins and its date column: on a phone the
     timeline reads better as a single left-hand rule with the date above the
     entry, and every band tightens to the same 20px gutter as the memo. */
  .ws-wrap { gap: 16px; margin-top: 16px; }
  .ws-review { padding: 19px 18px 20px; }
  .ws-review-lead { max-width: none; font-size: clamp(19px,5.6vw,23px); }
  .ws-review-actions .btn { flex: 1 1 auto; }
  .ws-review-hint { flex: 1 1 100%; }
  .ws-compose-row { gap: 9px 10px; }
  .ws-field { flex: 1 1 100%; }
  .ws-field-narrow { flex: 1 1 100%; }
  .ws-compose .btn-gold { flex: 1 1 100%; }
  .ws-tl-item { grid-template-columns: minmax(0,1fr); gap: 0; padding: 12px 0 14px 24px; }
  .ws-tl-item::before { left: 4px; }
  .ws-tl-item::after { top: 6px; left: 0; }
  .ws-tl-when { display: flex; gap: 9px; align-items: baseline; padding-top: 0; text-align: left; }
  .ws-tl-ago { margin-top: 0; }
  .ws-tl-body { padding-left: 0; margin-top: 7px; }
  .ws-tl-title { font-size: 15px; }
  .executive-memo .ws-timeline .ws-col-head { padding: 15px 20px 10px; }
  .executive-memo .ws-timeline .ws-spark-wrap { padding: 0 20px 4px; }
  .executive-memo .ws-timeline .ws-tl { padding: 4px 20px 15px; }
  .ws-tl-earlier { padding-inline: 20px; }
  .ws-tl-promise .ws-tl-body { padding-left: 10px; }
}

@media (max-width: 560px) {
  /* The health cells hold their two-by-two shape rather than collapsing into a
     column — four stacked rows would push the folds a screen further down for no
     gain in legibility. So the cells tighten instead: narrower gutters, slightly
     smaller readings. The notes are not clamped: a cell note is a confidence
     reason, a risk reading or a review instruction, and there is no expand on a
     grid cell to recover the half of it a clamp would remove. A long note makes
     its row taller, which is the correct outcome. */
  .mh-cell { padding: 11px 9px 2px; }
  .mh-k { font-size: 9px; letter-spacing: .1em; }
  .mh-v { gap: 1px 5px; margin-top: 7px; font-size: 14px; }
  .mh-v em { font-size: 8.5px; letter-spacing: .08em; }
  .mh-rule { margin-top: 9px; }
  .mh-n { margin-top: 7px; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
  .memo-live { margin-left: 7px; padding: 1px 5px; font-size: 8.5px; letter-spacing: .08em; }
  /* The delta values tighten on the same argument as the health cells. */
  .memo-delta-rows .md-row { padding: 10px 8px 11px; }
  .md-row dt { font-size: 8.5px; letter-spacing: .1em; }
  .md-row dd { font-size: 13px; }
  /* The lift line comes out of the third column. It is `white-space: nowrap` and
     it sits in an `auto` track, so the track never shrinks below its one-line
     width — and "medium setup · several days to evidence · high impact" is wider
     at 8.5px than the whole row is at 375px. The `minmax(0,1fr)` beside it
     collapses toward zero trying to make room, the task text goes with it, and
     what is left still overflows the page. Below 768px the lift wraps onto its
     own line under the task instead, where it has the full column and nothing
     is squeezed to make room for it. */
  .memo-task-box { grid-template-columns: 15px minmax(0,1fr); gap: 4px 10px; padding: 12px 0; }
  .memo-task-lift { grid-column: 2; padding-top: 0; font-size: 8.5px; letter-spacing: .08em; white-space: normal; }
  /* The review readings still wrap — they are below the fold and can afford it. */
  .ws-review-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ws-stat:nth-child(n) { margin-top: 0; padding-left: 14px; padding-top: 12px; border-top: none; border-left: 1px solid var(--line); }
  .ws-stat:nth-child(2n+1) { padding-left: 0; border-left: none; }
  .ws-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  .memo-card summary, .memo-fold > summary, .memo-card-toggle::after { transition: none; }
  /* The confidence bar and the compaction of the sticky strip are both animated
     for a reason — they say "this moved" — but the reason is not worth a
     vestibular cost, and the script jumps the number to its final value under the
     same query. */
  .memo-task-tick, .memo-maturity-meter i { transition: none; }
  .memo-delta.is-live .memo-delta-pulse, .memo-delta.is-live .md-row { animation: none; }
}

/* ---------- Executive Daily Briefing ---------- */
.briefing-page { max-width: 1040px; padding-top: 30px; }
.briefing-page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 18px; }
.briefing-page-head h1 { margin-top: 5px; font-size: 19px; font-weight: 500; color: var(--mid); letter-spacing: 0; }
.briefing-date-separator { margin: 0 7px; color: var(--faint); }
.briefing-refresh { padding: 6px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--mid); font: 600 10px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: color .2s ease, border-color .2s ease; }
.briefing-refresh:hover { color: var(--ink); border-color: var(--ink); }
.briefing-refresh:disabled { opacity: .5; cursor: wait; }
.executive-decision-brief { overflow: hidden; border: 1px solid rgba(13,13,13,.16); background: #fbf9f3; box-shadow: 12px 12px 0 rgba(13,13,13,.055); }
.briefing-recommendation { display: grid; grid-template-columns: minmax(170px,.42fr) minmax(0,1.58fr); gap: 28px; min-height: 190px; padding: clamp(28px,4vw,44px); background: var(--ink); color: var(--cream); }
.briefing-question { color: var(--faint); font: 600 9.5px/1.45 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.briefing-question span { display: inline-block; width: 26px; color: var(--gold-deep); }
.briefing-recommendation .briefing-question { color: rgba(240,237,232,.48); }
.briefing-recommendation .briefing-question span { color: var(--gold-light); }
.briefing-recommendation h2 { align-self: end; max-width: 760px; font: 400 clamp(30px,4.2vw,48px)/1.02 "Newsreader", Georgia, serif; letter-spacing: -.035em; text-wrap: balance; }
.briefing-answer-row { display: grid; grid-template-columns: minmax(170px,.42fr) minmax(0,1.58fr); gap: 28px; align-items: start; padding: 19px clamp(28px,4vw,44px); border-top: 1px solid rgba(13,13,13,.1); }
.briefing-answer-row > p { max-width: 72ch; color: var(--ink-soft); font-size: 13.5px; line-height: 1.55; }
.briefing-confidence { background: rgba(184,150,12,.055); }
.briefing-confidence-answer { display: grid; grid-template-columns: auto 64px minmax(0,1fr); gap: 14px; align-items: center; }
.briefing-confidence-answer strong { font: 500 18px/1 var(--mono); }
.briefing-confidence-answer p { color: var(--mid); font-size: 12.5px; line-height: 1.45; }
.briefing-confidence-bars { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; }
.briefing-confidence-bars i { height: 4px; background: rgba(13,13,13,.12); }
.briefing-confidence-bars i.is-active { background: var(--gold); }
.briefing-next { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 28px; align-items: center; padding: 22px clamp(28px,4vw,44px); border-top: 1px solid rgba(13,13,13,.1); background: #e9e2d3; }
.briefing-next p { margin: 7px 0 0 26px; max-width: 62ch; font: 500 16px/1.4 var(--mono); }
.briefing-primary-action { display: inline-flex; align-items: center; gap: 14px; min-height: 46px; padding: 12px 17px; border: 1px solid var(--ink); background: var(--ink); color: var(--cream); font: 600 11px/1.3 var(--mono); letter-spacing: .04em; transition: background .2s ease, color .2s ease, transform .2s ease; }
.briefing-primary-action svg { width: 15px; }
.briefing-primary-action:hover { background: var(--gold); color: var(--ink); transform: translateY(-2px); }
.briefing-support { margin-top: 44px; }
.briefing-support-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 10px; padding: 0 2px; }
.briefing-support-heading p { color: var(--faint); font-size: 12px; }
.briefing-disclosure { border-top: 1px solid rgba(13,13,13,.16); }
.briefing-disclosure:last-child { border-bottom: 1px solid rgba(13,13,13,.16); }
.briefing-disclosure summary { display: grid; grid-template-columns: minmax(0,1fr) auto 24px; gap: 18px; align-items: center; min-height: 62px; padding: 0 2px; cursor: pointer; list-style: none; }
.briefing-disclosure summary::-webkit-details-marker { display: none; }
.briefing-disclosure summary > span:first-child { font: 500 15px/1.4 var(--mono); }
.briefing-disclosure summary small { color: var(--faint); font: 500 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.briefing-disclosure-icon { display: grid; width: 24px; height: 24px; place-items: center; color: var(--mid); transition: transform .25s ease, color .2s ease; }
.briefing-disclosure-icon svg { width: 15px; }
.briefing-disclosure[open] .briefing-disclosure-icon { color: var(--gold-deep); transform: rotate(45deg); }
.briefing-disclosure-body { padding: 3px 32px 30px 2px; animation: briefing-reveal .25s ease both; }
.briefing-summary-copy { max-width: 72ch; font: 400 20px/1.5 "Newsreader", Georgia, serif; }
.briefing-priority-detail { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 18px; padding: 22px 0; border-top: 1px solid var(--line); }
.briefing-priority-detail:first-child { padding-top: 3px; border-top: 0; }
.briefing-detail-index { color: var(--gold-deep); font: 600 10px/1.5 var(--mono); letter-spacing: .12em; }
.briefing-priority-detail h3 { margin-bottom: 14px; font: 400 23px/1.15 "Newsreader", Georgia, serif; }
.briefing-priority-detail dl { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.briefing-priority-detail dt, .briefing-detail-label { display: block; margin-bottom: 5px; color: var(--faint); font: 600 9px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.briefing-priority-detail dd { color: var(--mid); font-size: 12.5px; line-height: 1.55; }
.briefing-detail-columns { display: grid; grid-template-columns: repeat(2,1fr); gap: 44px; }
.briefing-detail-columns ul { list-style: none; }
.briefing-detail-columns li { padding: 10px 0; border-top: 1px solid var(--line-2); font-size: 13px; line-height: 1.5; }
.briefing-detail-columns li:first-child { border-top: 0; }
.briefing-detail-columns li strong, .briefing-detail-columns li span { display: block; }
.briefing-detail-columns li span { margin-top: 2px; color: var(--mid); font-size: 12px; }
.briefing-insights { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px 32px; padding-left: 22px; }
.briefing-insights li { padding-left: 7px; font: 400 17px/1.5 "Newsreader", Georgia, serif; }
.briefing-action-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.briefing-action-list a { display: flex; justify-content: space-between; gap: 14px; align-items: center; min-height: 72px; padding: 14px 16px; border: 1px solid var(--line); background: var(--paper); font-size: 12.5px; font-weight: 550; transition: border-color .2s ease, transform .2s ease; }
.briefing-action-list a:hover { border-color: var(--ink); transform: translateY(-2px); }
.briefing-action-list svg { flex: 0 0 auto; width: 15px; color: var(--gold-deep); }
.briefing-empty { color: var(--mid); font-size: 13px; }
.briefing-skeleton { overflow: hidden; border: 1px solid var(--line); background: var(--paper); }
.briefing-skeleton-lead { height: 190px; border-radius: 0; }
.briefing-skeleton-row { height: 68px; border-top: 1px solid var(--line); border-radius: 0; }
.briefing-error { padding: clamp(28px,5vw,56px); border: 1px solid var(--line); background: var(--paper); }
.briefing-error h2 { margin-top: 14px; font: 400 clamp(28px,4vw,42px)/1.1 "Newsreader", Georgia, serif; }
.briefing-error p { margin-top: 10px; color: var(--mid); }
@keyframes briefing-reveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

@media (max-width: 800px) {
  .progressive-desktop { display: none; }
  .mobile-progressive { display: block; margin-top: 10px; }
  .mobile-progressive > summary { display: inline-flex; cursor: pointer; color: var(--gold-deep); font: 700 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
  .mobile-progressive[open] > summary { margin-bottom: 8px; }
  .briefing-page { padding-top: 24px; }
  .briefing-page-head { align-items: center; }
  .briefing-page-head h1 { font-size: 16px; }
  .briefing-recommendation, .briefing-answer-row { grid-template-columns: 1fr; gap: 12px; }
  .briefing-recommendation { min-height: 0; padding: 28px 24px 32px; }
  .briefing-recommendation h2 { font-size: clamp(30px,9vw,42px); }
  .briefing-answer-row { padding: 17px 24px 19px; }
  .briefing-confidence-answer { grid-template-columns: auto 64px; }
  .briefing-confidence-answer p { grid-column: 1 / -1; }
  .briefing-next { grid-template-columns: 1fr; padding: 20px 24px 24px; }
  .briefing-next p { margin-left: 0; }
  .briefing-primary-action { width: 100%; justify-content: space-between; }
  .briefing-support { margin-top: 36px; }
  .briefing-priority-detail dl, .briefing-detail-columns, .briefing-insights, .briefing-action-list { grid-template-columns: 1fr; }
  .briefing-priority-detail dl { gap: 12px; }
}

@media (max-width: 520px) {
  .briefing-page-head { align-items: flex-start; }
  .briefing-page-head h1 { max-width: 210px; }
  .briefing-refresh { padding-top: 2px; }
  .briefing-support-heading p, .briefing-disclosure summary small { display: none; }
  .briefing-disclosure summary { grid-template-columns: minmax(0,1fr) 24px; }
  .briefing-disclosure-body { padding-right: 2px; }
  .briefing-priority-detail { grid-template-columns: 32px minmax(0,1fr); gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .briefing-disclosure-body { animation: none; }
}

/* Decision Brief: the default read is a single, ruthless decision surface. */
.decision-memo-page { padding-top: clamp(18px,2.4vw,30px); }
.decision-memo-page .breadcrumb { margin-bottom: clamp(10px,1.4vw,16px); }
.executive-memo { overflow: visible; }
.memo-first-screen {
  display: flex;
  min-height: min(620px, calc(100vh - 150px));
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px,4vw,52px);
}
.memo-first-screen .memo-topline { justify-content: space-between; }
.memo-first-screen .memo-subject {
  max-width: 72ch;
  margin-top: clamp(12px,1.6vw,18px);
  color: rgba(240,237,232,.62);
  font-size: 11px;
}
/* The state line carries the goal this decision serves, printed in full rather
   than cut at a character count — a goal named "Founder-led revenue before the
   Series A" is not the same goal as "Founder-led revenue before the…", and the
   line has no expand to recover the difference from. Printed in full it has to
   wrap, so each cell is allowed to break and none of them can push the row past
   the screen. */
.memo-state-line { display: flex; flex-wrap: wrap; gap: 7px 16px; margin-top: 9px; color: rgba(240,237,232,.72); font: 600 9px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.memo-state-line > span { min-width: 0; overflow-wrap: anywhere; }
.memo-state-line b { color: var(--gold-light); font-weight: 700; }
.memo-decision-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(24px,3.2vw,42px) clamp(32px,5vw,72px);
  margin-top: clamp(18px,2.6vw,30px);
}
.memo-signal {
  min-width: 0;
}
/* Cream at .46 on ink is 4.2:1 — under AA, and these are 8.5px uppercase labels
   with .17em tracking, which is the hardest thing on the screen to read. Every
   label naming a decision-critical answer sits at .62 or above. */
.memo-signal-label {
  display: block;
  margin-bottom: 8px;
  color: rgba(240,237,232,.62);
  font: 700 8.5px/1.4 var(--mono);
  letter-spacing: .17em;
  text-transform: uppercase;
}
.memo-signal-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.memo-signal-heading .memo-signal-label { margin: 0; }
.memo-recommendation-status {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid rgba(240,237,232,.24);
  border-radius: 999px;
  color: rgba(240,237,232,.72);
  font: 700 8.5px/1 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}
.memo-recommendation-status.is-strong { border-color: rgba(128,174,136,.45); color: #b8d5bd; }
.memo-recommendation-status.is-avoid { border-color: rgba(205,132,118,.5); color: #e4b0a6; }
.memo-signal p { margin: 0; color: rgba(240,237,232,.82); text-wrap: pretty; }
.memo-signal-call { grid-column: 1 / -1; padding-block: clamp(18px,2.8vw,30px) clamp(4px,1vw,12px); }
.memo-signal-call h1 {
  max-width: 21ch;
  margin: 0;
  color: var(--cream);
  font: 500 clamp(36px,5.4vw,68px)/.98 var(--display);
  letter-spacing: -.045em;
  text-wrap: balance;
}
/* Display type is a size for a headline, and the recommendation is whatever the
   model wrote — sometimes four words, sometimes a paragraph. The clamp that
   makes a short call land turns a long one into a wall, so the scale steps down
   as the copy grows and long recommendations are set as a hybrid of headline and
   body rather than inheriting a treatment nobody measured them for. */
.memo-signal-call.is-long h1 { max-width: 34ch; font-size: clamp(27px,3.4vw,40px); line-height: 1.06; letter-spacing: -.032em; text-wrap: pretty; }
.memo-signal-call.is-xlong h1 { max-width: 52ch; font-size: clamp(21px,2.3vw,28px); line-height: 1.24; letter-spacing: -.018em; text-wrap: pretty; }
/* Scan order, and why confidence comes before the reason for the call. An
   operator reading a recommendation asks "how sure is this?" before they will
   spend attention on "why?" — a reason read without knowing its weight is just
   assertion. In source the two are Confidence then Why, which is the order a
   phone renders in a single column; on wider screens they sit side by side, the
   measurement in the narrow column and the reasoning in the wide one. */
.memo-signal-confidence { grid-column: 1; }
.memo-signal-why { grid-column: 2; }
.memo-signal-blocker { grid-column: 1 / -1; }
.memo-signal-why p { max-width: 78ch; font: 400 clamp(14px,1.4vw,16px)/1.5 var(--body); }
.memo-signal-confidence > p:first-of-type { display: flex; gap: 8px; align-items: baseline; }
.memo-signal-confidence strong { color: var(--tone,var(--gold-light)); font: 500 clamp(23px,2.5vw,32px)/1 var(--display); letter-spacing: -.04em; }
.memo-signal-confidence > p:first-of-type span { color: rgba(240,237,232,.72); font: 400 clamp(13px,1.3vw,15px)/1.3 var(--body); }
/* The one canonical explanation of the number. It is composed from what the
   record holds rather than from whichever nearby sentence happened to be free,
   so it is the same statement everywhere the brief has to justify the figure. */
.memo-signal-confidence .memo-confidence-because { margin-top: 9px; color: rgba(240,237,232,.82); font: 400 clamp(12.5px,1.2vw,14px)/1.45 var(--body); }
.memo-signal-confidence .memo-confidence-uncertainty { margin-top: 9px; color: rgba(240,237,232,.62); font: 400 12px/1.42 var(--body); }
.memo-signal-blocker p { color: var(--gold-light); font: 500 clamp(13px,1.25vw,15px)/1.45 var(--display); }
/* How sure, and on what. The percentage is a claim about conviction; the
   strength line is a count of what the record actually holds behind it. Two
   decisions can both read 60% with one resting on four corroborating
   observations and the other on an untested assumption, and an operator who
   cannot tell those apart is reading a mood rather than a measurement. */
.memo-signal-confidence .memo-evidence-strength { margin-top: 8px; font: 400 12px/1.42 var(--body); }
.memo-signal-confidence .memo-evidence-strength b { margin-right: 6px; color: rgba(240,237,232,.62); font: 700 8.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.memo-evidence-strength.ms-ok { color: #b8d5bd; }
.memo-evidence-strength.ms-mid { color: rgba(240,237,232,.78); }
.memo-evidence-strength.ms-warn { color: var(--gold-light); }
.memo-evidence-strength.ms-bad { color: #e4b0a6; }
/* The two guardrails: what would reverse this call, and when it comes back.
   Both stay on the first screen at every width and neither is ever folded — a
   recommendation with no stated exit condition and no revisit date is a
   recommendation with no end. Where the record holds neither, the cell names
   what is missing and carries the control that would fix it, because an empty
   guardrail reads as "nothing could change this", which is the one answer no
   decision ever has. */
.memo-signal-guard { padding-top: clamp(12px,1.5vw,16px); border-top: 1px solid rgba(240,237,232,.16); }
.memo-signal-guard::before { content: ""; display: block; width: 22px; height: 2px; margin-bottom: 10px; background: var(--tone,rgba(240,237,232,.3)); }
.memo-signal-change p { font: 400 clamp(12.5px,1.2vw,14px)/1.45 var(--body); }
.memo-signal-change p b { margin-right: 5px; color: var(--gold-light); font: 700 8.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.memo-signal .memo-signal-absent { color: rgba(240,237,232,.6); font-style: italic; }
.memo-signal .memo-signal-note { margin-top: 6px; color: rgba(240,237,232,.58); font: 400 11.5px/1.42 var(--body); }
.memo-signal-review strong { color: var(--tone,var(--gold-light)); font: 500 clamp(17px,1.8vw,22px)/1.1 var(--display); letter-spacing: -.02em; }
.memo-signal-review .btn { margin-top: 10px; }
.memo-signal-next { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0,1fr) auto; gap: 0 18px; align-items: end; }
.memo-signal-next .memo-signal-label { grid-column: 1 / -1; }
.memo-signal-next > p { grid-column: 1; grid-row: 2; font: 500 clamp(14px,1.4vw,17px)/1.4 var(--display); }
.memo-signal-next.is-long > p { font: 400 clamp(13.5px,1.2vw,15px)/1.5 var(--body); }
.memo-signal-next .btn { grid-column: 2; grid-row: 2; min-width: 132px; white-space: nowrap; }
/* Why this action and not the recommendation restated. Folded, because the
   action is what has to be read and the argument for it is what has to be
   available — and because on a phone the primary action has to fit the screen
   it is on. */
.memo-signal-whymatters { grid-column: 1 / -1; grid-row: 4; margin-top: 9px; }
.memo-signal-whymatters > summary { width: fit-content; color: var(--gold-light); font: 700 8.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; list-style: none; }
.memo-signal-whymatters > summary::-webkit-details-marker { display: none; }
.memo-signal-whymatters > summary::after { content: " →"; }
.memo-signal-whymatters[open] > summary::after { content: " ↑"; }
.memo-signal-whymatters p { max-width: 72ch; margin-top: 7px; color: rgba(240,237,232,.66); font: 400 12px/1.5 var(--body); }
/* The recorded wording of a signal whose summary was shortened for a phone.
   It only renders when the two actually differ, and it opens inside the cell
   that raised it rather than sending the reader to another section — the point
   is that the short form is never the only form, not that there is somewhere
   else to go. Set as the same inline disclosure as the reason above, one step
   quieter, because it is the fallback reading and not the headline. */
.memo-signal-full { margin-top: 8px; }
/* The next action is the one cell laid out as a grid, so the disclosure that
   carries the recorded wording is placed rather than left to auto-flow: it
   belongs directly under the action it lengthens and above the argument for
   it, not after both. */
.memo-signal-next > .memo-signal-full { grid-column: 1 / -1; grid-row: 3; }
.memo-signal-full > summary { display: inline-flex; align-items: center; width: fit-content; min-height: 34px; color: rgba(240,237,232,.72); font: 700 8.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; list-style: none; }
.memo-signal-full > summary::-webkit-details-marker { display: none; }
.memo-signal-full > summary::after { content: " +"; }
.memo-signal-full[open] > summary::after { content: " –"; }
.memo-signal-full p { max-width: 72ch; margin-top: 4px; color: rgba(240,237,232,.82); font: 400 12.5px/1.5 var(--body); overflow-wrap: anywhere; }
.memo-inline-result {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(240,237,232,.2);
}
.memo-inline-result[hidden] { display: none; }
.memo-inline-result label { grid-column: 1 / -1; color: var(--cream); font: 500 13px/1.4 var(--display); }
.memo-inline-result .input { min-height: 42px; margin-top: 0; resize: vertical; }
.memo-inline-result-actions { display: flex; gap: 8px; align-items: stretch; }
.memo-inline-result .memo-ask-out { grid-column: 1 / -1; }
.memo-optional { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid var(--ink); background: #e9e2d3; }
.memo-optional .btn-gold { background: transparent; color: var(--ink); border-color: var(--line); }
.memo-optional .btn-gold:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.memo-optional > .memo-primary-fold { border: 0; border-right: 1px solid rgba(13,13,13,.16); background: transparent; }
.memo-optional > .memo-primary-fold:last-child { border-right: 0; }
.memo-primary-fold > summary {
  display: grid;
  grid-template-columns: minmax(0,1fr) 20px;
  gap: 12px;
  align-items: center;
  min-height: 78px;
  padding: 15px 18px;
}
.memo-primary-fold[open] { grid-column: 1 / -1; background: var(--paper); }
.memo-primary-fold[open] > summary { border-bottom: 1px solid var(--line); }
.memo-primary-fold[open] > summary .memo-card-peek { display: none; }
.memo-primary-fold > .memo-fold-body { padding: clamp(18px,2.8vw,34px); }
.memo-primary-fold .memo-sections { padding-inline: 0; }
.memo-primary-fold .memo-hero-detail { max-width: 900px; padding-bottom: 18px; }
.memo-primary-fold .memo-rationale { color: var(--ink); }
.memo-primary-fold .memo-hero-math { color: var(--mid); }
.memo-evidence-section { border-top: 0; }
.memo-evidence-section .memo-card { border-top: 0; }
.memo-workspace-slot:not(:empty) { margin-top: 20px; }
.memo-timeline-body > .memo-momentum,
.memo-timeline-body > .memo-delta,
.memo-timeline-body > #timelineSlot { margin-inline: clamp(-34px,-2.8vw,-18px); }
.memo-next-detail { border-top: 1px solid var(--line); }
.memo-next-detail .memo-next-alt { display: inline-block; }
.memo-primary-fold .memo-health { border: 1px solid var(--line); }
.memo-primary-fold .memo-actions { margin-top: 16px; border: 1px solid var(--line); }

/* ---------------------------------------------------------------------------
   Layer 2 — the Decision Record, disclosed progressively.

   The record used to open as one continuous document: the framing, every
   captured section, the goal, the examination, the dependencies, the whole
   confidence history and the outcome recorder in a single column. On a phone
   that is several screens of scrolling before the operator reaches the part
   they came for. Nothing has been removed — it is the same content cut at its
   own seams, and each seam carries a count of what is inside it so a collapsed
   part reads as folded rather than hidden.

   Which parts start open is decided in JS, because `open` cannot be reached
   from a stylesheet: on a desktop the substantial parts are already open,
   because there is room to read them without a tap, and a manual toggle is
   never overridden afterwards.
   --------------------------------------------------------------------------- */
.memo-record-parts { display: grid; border: 1px solid var(--line); background: var(--paper); }
.memo-record-parts > .memo-record-fold { border: 0; border-bottom: 1px solid var(--line); }
.memo-record-parts > .memo-record-fold:last-child { border-bottom: 0; }
.memo-record-fold > summary { grid-template-columns: minmax(0,1fr) 20px; min-height: 56px; padding: 13px 18px; }
.memo-record-fold[open] > summary { border-bottom: 1px solid var(--line); }
.memo-record-body { padding: 16px 18px 22px; border-top: 0; }
/* The part's own summary row is its heading. A card inside it that repeats the
   title spends a line saying what the reader just read on the way in. */
.memo-record-body > .card > .card-head { display: none; }
.memo-record-body > .card,
.memo-record-body > .decision-doc,
.memo-record-body > .grid { margin-top: 0; }
.memo-record-body > .card + .card { margin-top: 16px; }

/* A fact doing a second job. One line legitimately belongs to several parts of
   the reasoning at once — an assumption the call needs, a risk if it breaks, a
   question nothing has answered — and deleting four of the five would be
   hiding reasoning. So the repeat is printed as what it means in this role plus
   a pointer to where it was first stated, never as the fact argued again. */
.memo-bullets li.memo-echo::before { border-style: dashed; background: transparent; }
.memo-echo-subject { display: block; color: var(--mid); font-size: 13.5px; line-height: 1.5; }
.memo-echo-ref { display: block; margin-top: 3px; color: var(--faint); font: 400 11.5px/1.45 var(--body); font-style: italic; }
.memo-echo-list { margin-top: 11px; }

@media (max-width: 900px) {
  .memo-first-screen { min-height: auto; justify-content: flex-start; }
  .memo-decision-grid { grid-template-columns: .7fr 1fr; }
  .memo-signal-confidence { grid-column: 1; }
  .memo-signal-why { grid-column: 2; }
  .memo-signal-blocker { grid-column: 1 / -1; }
  .memo-signal-change { grid-column: 1; }
  .memo-signal-review { grid-column: 2; }
  .memo-signal-next { grid-column: 1 / -1; }
  .memo-optional { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .memo-optional > .memo-primary-fold:nth-child(2) { border-right: 0; }
  .memo-optional > .memo-primary-fold:nth-child(-n+2) { border-bottom: 1px solid rgba(13,13,13,.16); }
}

@media (max-width: 768px) {
  .decision-memo-page { padding-top: 12px; }
  .memo-first-screen { padding: 12px 14px 14px; }
  .memo-first-screen .memo-topline { align-items: center; }
  /* Nothing on this screen is set below 8.5px. Density here is bought by folding
     and de-duplicating what is on the screen, not by setting the labels smaller
     than they can be read at arm's length — a 7px uppercase label with .14em
     tracking is decoration, and the reader still has to spend a line's worth of
     screen on it. */
  .memo-first-screen .memo-subject { margin-top: 7px; font-size: 11px; line-height: 1.42; }
  .memo-state-line { gap: 5px 12px; margin-top: 7px; font-size: 9.5px; }
  .memo-decision-grid { grid-template-columns: 1fr; gap: 15px; margin-top: 11px; }
  /* One column, so every explicit placement above is reset rather than left to
     open an implicit second track. Source order is the scan order on a phone:
     recommendation, confidence, why, blocker, next, what would change it, when
     it comes back. */
  .memo-decision-grid > .memo-signal { grid-column: 1 / -1; }
  .memo-signal { grid-column: 1; padding: 0; }
  .memo-signal-label { margin-bottom: 4px; font-size: 8.5px; letter-spacing: .11em; }
  .memo-signal-heading { margin-bottom: 6px; }
  .memo-recommendation-status { padding: 4px 7px; font-size: 8.5px; letter-spacing: .09em; }
  .memo-signal-call { padding-block: 9px 6px; }
  /* 9.5vw is a fine size for "Proceed founders-first" and an unreadable one for
     a forty-word call: at 390px it puts six lines of 37px type ahead of the
     confidence reading. Long generated copy steps down to a hybrid size so the
     decision core still fits the first screen whatever the model wrote. */
  .memo-signal-call h1 { max-width: none; font-size: clamp(30px,8.4vw,40px); line-height: 1.02; }
  .memo-signal-call.is-long h1 { font-size: clamp(22px,6vw,27px); line-height: 1.14; letter-spacing: -.028em; }
  .memo-signal-call.is-xlong h1 { font-size: clamp(17px,4.6vw,20px); line-height: 1.34; letter-spacing: -.012em; }
  .memo-signal-why p { font-size: 12px; line-height: 1.36; }
  .memo-signal-confidence > p:first-of-type { gap: 7px; }
  .memo-signal-confidence strong { font-size: 21px; }
  .memo-signal-confidence .memo-confidence-uncertainty { margin-top: 5px; font-size: 11px; line-height: 1.34; }
  .memo-signal-blocker p, .memo-signal-next > p { font-size: 12px; line-height: 1.34; }
  .memo-signal-next.is-long > p { font-size: 12px; line-height: 1.42; }
  /* The action and the button that records it stop sharing a row. Side by side
     at 375px the `auto` button track takes about a third of the screen and the
     action itself — the one line on this card a reader has to act on — is left
     reading 35 characters wide. Stacked, the sentence gets the full column and
     the button gets a target a thumb can actually hit; 30px tall is what
     `padding: 8px` on 10px type comes to, and every other control on this brief
     is held to 44. */
  .memo-signal-next { grid-template-columns: minmax(0,1fr); gap: 10px; }
  /* One column, so every row and column placement made for the two-track
     desktop layout is dropped and source order becomes the stack: label,
     action, why this matters, the button, the capture field. Each placement is
     unset through a selector that matches or outweighs the one that set it —
     `> *` would lose to `.memo-signal-next > p` and to `.memo-signal-next
     .btn`, and the action and the button would end up sharing row 2 with one
     column between them. */
  .memo-signal-next > p,
  .memo-signal-next .memo-signal-whymatters,
  .memo-signal-next .btn,
  .memo-signal-next .memo-inline-result { grid-column: 1; grid-row: auto; }
  .memo-signal-next .btn {
    justify-self: start;
    min-width: 0;
    min-height: 44px;
    padding: 8px 18px;
    font-size: 10px;
  }
  .memo-signal-whymatters { margin-top: 6px; }
  .memo-signal-whymatters > summary { font-size: 9px; letter-spacing: .11em; }
  .memo-signal-whymatters p { margin-top: 5px; font-size: 11px; line-height: 1.4; }
  .memo-inline-result { grid-template-columns: 1fr; margin-top: 10px; padding-top: 10px; }
  .memo-inline-result label, .memo-inline-result .memo-ask-out { grid-column: 1; }
  .memo-inline-result-actions { justify-content: flex-start; }
  .memo-optional { grid-template-columns: 1fr; }
  .memo-optional > .memo-primary-fold { border-right: 0; border-bottom: 1px solid rgba(13,13,13,.16); }
  .memo-optional > .memo-primary-fold:last-child { border-bottom: 0; }
  .memo-primary-fold > summary { min-height: 54px; padding: 10px 16px; }
  /* On a phone a folded row carries its count instead of its description. The
     tally says what is inside; the description only says what it is about, and
     two lines of preamble on every fold is most of a screen spent before the
     first section. Folds with nothing to count keep their description. */
  .memo-card-tally + .memo-card-peek { display: none; }
  .memo-primary-fold > .memo-fold-body { padding: 14px 16px; }
  /* Layer 2 on a phone: every part starts folded, and the row above it carries
     the count that says whether opening it is worth a tap. */
  .memo-record-fold > summary { min-height: 50px; padding: 10px 14px; }
  .memo-record-body { padding: 12px 14px 18px; }
  .memo-echo-subject { font-size: 12.5px; }
  .memo-echo-ref { font-size: 11px; }
  /* The guardrails stay on the first screen at phone width, because what would
     reverse the call and when it comes back are decisions to act, not reasoning
     to audit. They tighten; they do not fold. */
  .memo-signal-guard { padding-top: 10px; }
  .memo-signal-guard::before { margin-bottom: 7px; }
  .memo-signal-change p { font-size: 11.5px; line-height: 1.38; }
  .memo-signal .memo-signal-note { margin-top: 4px; font-size: 11px; line-height: 1.36; }
  .memo-signal-review strong { font-size: 16px; }
  .memo-signal-review .btn { margin-top: 7px; padding: 7px 10px; font-size: 10px; }
  .memo-signal-confidence .memo-evidence-strength { margin-top: 5px; font-size: 11px; line-height: 1.36; }
  .memo-timeline-body > .memo-momentum,
  .memo-timeline-body > .memo-delta,
  .memo-timeline-body > #timelineSlot { margin-inline: -16px; }
}

/* ---------------------------------------------------------------------------
   Opened sections, on a phone.

   Everything above governs what the reader sees before they tap. This governs
   what they see after, and the failure it corrects is the opposite one: a fold
   that opens into desktop spacing turns four bullets into two screens, so the
   reader pays a scroll for detail they could have read in a glance.

   The tightening is spatial only. No type is set smaller here than it is
   anywhere else, no content is clamped, and nothing is dropped — what shrinks is
   the indent that aligns a bullet with a heading it is already under, the gap
   between blocks that a rule already separates, and the padding a section keeps
   for a margin the phone does not have. Touch targets are untouched.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* The card body indents 43px to hang its text off the summary's number
     column. On a 375px screen that column is a ninth of the width spent on
     alignment, and the summary the text belongs to is the line directly above
     it — so the alignment goes and the text takes the room. */
  .memo-card-body { gap: 14px; padding: 2px 2px 16px 0; }
  .memo-block { gap: 8px; }
  /* A bullet list is the densest thing in an opened section and the one most
     worth reading. It keeps its size and its leading; what it loses is the
     air between rows that a diamond marker already separates. */
  .memo-bullets { gap: 9px; }
  .memo-bullets li { padding-left: 18px; }
  .memo-bullets li::before { left: 0; }
  .memo-bullets li b { margin-bottom: 1px; }
  .memo-echo-list { margin-top: 8px; }
  .memo-echo-ref { margin-top: 2px; }
  /* Expand controls sit tight to the list they belong to, but stay full-height
     targets: 44px of tappable row, not 44px of gap plus a small word. */
  .mobile-progressive { margin-top: 6px; }
  .mobile-progressive > summary { align-items: center; min-height: 44px; }
  /* The control that reaches the recorded wording of a shortened signal is the
     one control on the first screen a phone reader most needs to hit, so it is
     a full-height target there even though it reads as an inline word. */
  .memo-signal-full > summary { min-height: 44px; }
  .memo-fold-body { padding-bottom: 18px; }
  .memo-primary-fold > .memo-fold-body { padding: 12px 14px 16px; }
  .memo-record-fold > summary { min-height: 48px; padding: 9px 14px; }
  .memo-record-body { padding: 11px 14px 16px; }
  .memo-record-body > .card + .card { margin-top: 12px; }
  .memo-record-body > .card.pad, .memo-fold-body .card.pad { padding: 14px; }
  .record-context-strip { gap: 7px; padding-top: 14px; }
  .memo-history-digest { padding-bottom: 0; }
  .memo-history-rows { gap: 10px 14px; }
  .memo-history-latest { margin-top: 10px; }
  .memo-history-full > summary { min-height: 46px; }
  /* The living layer's own sections open inside the same folds and inherit the
     same argument: one gutter, no double padding, rows that end where the next
     row starts. */
  .memo-fold-body .ws-col-head { padding: 12px 14px 8px; }
  .memo-fold-body .ws-row { padding: 11px 14px 12px; }
  .memo-fold-body .ws-row-meta { margin-top: 7px; }
  .memo-fold-body .ws-ev { padding: 12px 14px 13px; }
  .memo-fold-body .ws-more-experiments > details > summary { padding-inline: 14px; }
  .memo-fold-body .ws-ev-list > .ws-more-experiments > details > summary { padding-inline: 14px; }
  /* Repeating editable controls, compressed.

     `.input` is full-width by definition, and at phone widths every control is
     lifted to 16px so focusing one does not zoom the page. Together those turn
     the status control on a ledger row into a bar the width of the screen —
     once per assumption. Eight assumptions read as eight forms stacked down the
     page, and the state each one is in is already printed as a tag on the row
     above it.

     So the row states its status once, as a control rather than as a caption:
     the chip carries the state word and a caret at tag size, the repeated
     "Status" label is kept for assistive technology only, and the plain status
     tag in the row's meta line — which said the same word without being
     tappable — steps aside so nothing is printed twice. The native select is
     still the control: it covers the chip exactly, keeps its label, its focus
     ring and the platform picker, and stays at 16px so focusing it cannot zoom
     the page. */
  .ws-row-set .ws-status { flex: 0 0 auto; max-width: 100%; }
  .ws-row-set .ws-status-face {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 7px 12px;
    border: 1px solid var(--line);
    background: rgba(13,13,13,.022);
    color: var(--ink-soft);
    font: 700 10.5px/1.3 var(--mono);
    letter-spacing: .13em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
  }
  .ws-row-set .ws-status-face::after { content: "▾"; font-size: 12px; letter-spacing: 0; }
  /* Tone comes off the row, so the chip and the row it belongs to can never
     disagree about which state the assumption is in. */
  .ws-row-ok .ws-status-face { border-color: rgba(62,125,82,.42); background: rgba(62,125,82,.07); color: #2f5238; }
  .ws-row-warn .ws-status-face { border-color: rgba(184,145,66,.5); background: rgba(184,145,66,.09); color: #6E5809; }
  .ws-row-bad .ws-status-face { border-color: rgba(160,60,45,.42); background: rgba(160,60,45,.07); color: #8a2b2b; }
  .ws-row-set .ws-status > .input-xs {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    font-size: 16px;
  }
  .ws-row-set .ws-status:focus-within .ws-status-face { border-color: var(--ink); outline: 2px solid var(--gold-deep); outline-offset: 1px; }
  .ws-row .ws-tag-status { display: none; }
  .ws-row-set > .ws-inline-label {
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* The status control stops costing a row of its own.

     Compacting the chip itself is not available: it is the only tappable thing
     on the row and 44px is the floor, so shrinking it would buy height with the
     one dimension that must not move. What is available is the line it sits on.
     Stacked under the meta tags the control adds its own 44px plus the margin
     above it to every assumption, and the strip beside the tags — where the
     status tag used to print before the chip took its word — sits empty for the
     whole width of the row.

     So the row becomes a two-track grid and the control moves up beside the
     tags it belongs with. The chip keeps its height, its hit area and its
     label; what goes is the empty half-line next to the tags and the 44px block
     underneath them. Roughly 30px per assumption, once per assumption, on the
     section a phone reader scrolls furthest through. */
  .ws-row:has(> .ws-row-set) {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: start;
    column-gap: 10px;
  }
  .ws-row:has(> .ws-row-set) > .ws-row-text,
  .ws-row:has(> .ws-row-set) > .ws-row-note { grid-column: 1 / -1; }
  .ws-row:has(> .ws-row-set) > .ws-row-meta { grid-column: 1; grid-row: 2; }
  .ws-row:has(> .ws-row-set) > .ws-row-do {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    justify-content: flex-end;
    margin-top: 0;
  }
  /* Sharing a line means the chip's width is the meta line's width, so the chip
     gives back what it does not need: tighter side padding and tracking set for
     a tag rather than for a heading. The type size, the hit area and the tone
     are untouched — "Partly supported" is the longest state on record and it
     still prints on one line, leaving the tags beside it room to sit on theirs
     rather than wrap under it. */
  .ws-row:has(> .ws-row-set) .ws-status-face {
    gap: 5px;
    padding: 7px 10px;
    letter-spacing: .1em;
  }
  /* The vertical rhythm inside a repeated row, tightened by the gaps a rule or a
     change of type already marks. No type is set smaller and nothing is clamped. */
  .memo-fold-body .ws-row { padding: 10px 14px 11px; }
  .ws-row-meta { margin-top: 7px; }
  .ws-row-note { margin-top: 6px; }
  .ws-row-do { margin-top: 7px; }

  /* Repeated reversal conditions: the act stops shouting once per row.

     "This has happened" is offered against every condition on watch, so a
     bordered button prints the same box down the whole column and each one
     reads with the weight of the section's primary act — which it is not. The
     primary act on a reversal row is reading the condition. The control keeps
     its full 44px hit area and its wording; what it loses is the box, so it
     reads as the quiet, repeated, secondary thing it is. */
  .ws-row .ws-row-do > .btn-xs.btn-ghost {
    min-height: 44px;
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: var(--ink-soft);
    font: 700 9.5px/1.4 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(13,13,13,.3);
  }
  /* Two conditions' worth of controls on one line need a gap that reads as a
     separation rather than as a wrap, since neither carries a border now. */
  .ws-row .ws-row-do { gap: 4px 18px; }
  .ws-row .ws-row-do > .btn-xs.btn-ghost:hover,
  .ws-row .ws-row-do > .btn-xs.btn-ghost:focus-visible {
    background: transparent;
    color: var(--ink);
    text-decoration-color: var(--ink);
  }
}

/* ---------------------------------------------------------------------------
   Generating the Decision Brief, and recovering when something fails.
   Shared by the Decision Room (fitbot) and the older interview (decisions).

   Generation is the one moment in the product where the operator can do nothing
   but wait, so it gets a panel rather than a spinner on a button: it names the
   work, shows that the work is still moving, and says what happens next. The
   indicator is deliberately indeterminate — there is no progress event behind
   it, and a percentage we invented would be a claim we cannot keep.
   --------------------------------------------------------------------------- */
.brief-generating {
  display: block; margin: 6px 0 26px; padding: 19px 21px;
  border: 1px solid rgba(184,145,66,.45); border-radius: var(--radius);
  background: linear-gradient(135deg, #fffdf7, var(--paper)); box-shadow: var(--shadow-sm);
}
.brief-generating .bg-eyebrow { display: block; color: var(--gold-deep, #8a6f14); font: 700 9px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.brief-generating .bg-title { display: block; margin-top: 10px; font-family: var(--display); font-size: 18px; line-height: 1.35; font-weight: 400; }
.brief-generating .bg-bar { display: block; height: 2px; margin: 15px 0 0; overflow: hidden; background: var(--cream-2); }
.brief-generating .bg-bar i { display: block; width: 42%; height: 100%; background: var(--gold-deep, #8a6f14); animation: startup-progress 1.45s ease-in-out infinite; }
.brief-generating .bg-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 7px; }
.brief-generating .bg-steps li { position: relative; padding-left: 20px; color: var(--faint); font-size: 13px; line-height: 1.45; transition: color .25s; }
/* The mark in the margin matches the brief's own section marks: an empty ring
   for not started, a filled one for in progress, a check for done. */
.brief-generating .bg-steps li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 8px; height: 8px;
  border: 1px solid var(--line); border-radius: 50%;
}
.brief-generating .bg-steps li.is-active { color: var(--ink); }
.brief-generating .bg-steps li.is-active::before { border-color: var(--gold-deep, #8a6f14); background: var(--gold-deep, #8a6f14); animation: blink 1.4s ease-in-out infinite; }
.brief-generating .bg-steps li.is-done { color: var(--mid); }
.brief-generating .bg-steps li.is-done::before { content: "✓"; border: 0; width: auto; height: auto; top: 0; color: rgba(58,113,77,.9); font-size: 11px; line-height: 1.45; }
.brief-generating .bg-note { display: block; margin-top: 15px; color: var(--faint); font: 500 11px/1.5 var(--mono); letter-spacing: .03em; }

/* A failure inside the panel: the work stopped, so the progress affordances go
   and the recovery takes their place. */
.brief-generating.is-failed { border-color: rgba(160,40,40,.28); background: rgba(160,40,40,.05); }
.brief-generating.is-failed .bg-bar,
.brief-generating.is-failed .bg-steps,
.brief-generating.is-failed .bg-note { display: none; }

/* One shape for every recoverable failure: sanitised copy, and the single
   button that tries the same thing again. */
.coach-failure, #generatingFailure:not(:empty) { display: flex; gap: 12px 16px; align-items: center; flex-wrap: wrap; }
#generatingFailure:not(:empty) { margin-top: 15px; }
.coach-failure p, #generatingFailure p { margin: 0; flex: 1 1 260px; min-width: 0; color: #8a2b2b; font-size: 14px; line-height: 1.5; }
.coach-failure button, #generatingFailure button { flex: 0 0 auto; }
/* The interview's error box grows a retry button, so it stops being a dead end.
   Scoped to that box: every other .form-error on the site still renders as the
   plain block of text it was written to be. */
#coachError.show { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; }
#coachError > span { flex: 1 1 220px; min-width: 0; }
#coachError button { flex: 0 0 auto; }

/* While the brief is generating, nothing in the composer invites input. The
   controls are disabled in script; this makes that legible. */
.is-generating-brief .composer-inner textarea,
.is-turn-busy .composer-inner textarea { opacity: .55; }
.is-turn-busy .chip, .is-turn-busy .coach-chip { opacity: .45; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .brief-generating .bg-bar i { animation: none; width: 70%; }
  .brief-generating .bg-steps li.is-active::before { animation: none; }
}