/* ═══════════════════════════════════════════════════════════════════
   PROJECT CATALYST — Mission Control
   Meridian Global Bank · AI Enablement Office
   Design DNA: Cowork-for-SMBs workshop app — light zinc + orange,
   fixed dark sidebar, white cards. Hand-written CSS, no frameworks.
   ═══════════════════════════════════════════════════════════════════ */

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

:root {
  /* zinc */
  --z950: #09090b;
  --z900: #18181b;
  --z800: #27272a;
  --z700: #3f3f46;
  --z600: #52525b;
  --z500: #71717a;
  --z400: #a1a1aa;
  --z300: #d4d4d8;
  --z200: #e4e4e7;
  --z100: #f4f4f5;
  --z50:  #fafafa;
  /* orange */
  --o700: #c2410c;
  --o600: #ea580c;
  --o500: #f97316;
  --o400: #fb923c;
  --o300: #fdba74;
  --o200: #fed7aa;
  --o100: #ffedd5;
  --o50:  #fff7ed;
  /* emerald / red / amber */
  --e800: #065f46;
  --e700: #047857;
  --e600: #059669;
  --e500: #10b981;
  --e400: #34d399;
  --e200: #a7f3d0;
  --e100: #d1fae5;
  --e50:  #ecfdf5;
  --r700: #b91c1c;
  --r600: #dc2626;
  --r500: #ef4444;
  --r400: #f87171;
  --r200: #fecaca;
  --r100: #fee2e2;
  --r50:  #fef2f2;
  --a200: #fde68a;
  --a50:  #fffbeb;
  --clay: #d97757; /* Anthropic starburst */

  /* legacy aliases referenced from inline styles in app.js */
  --accent: var(--o600);
  --text-muted: var(--z500);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --sidebar-w: 288px;
  --radius: 12px;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --ease: cubic-bezier(0.25, 0.6, 0.3, 1);
}

html { height: 100%; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--z50);
  color: var(--z900);
  min-height: 100%;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--o100); color: #7c2d12; }

* { scrollbar-width: thin; scrollbar-color: var(--z300) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--z300); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }
.sidebar, #join-screen, #facilitator-screen.fac-gate {
  scrollbar-color: var(--z700) transparent;
}
.sidebar *, #join-screen *, #facilitator-screen.fac-gate * { scrollbar-color: var(--z700) transparent; }

[hidden] { display: none !important; }

.noscript { padding: 40px; text-align: center; color: var(--z500); font-size: 16px; }

/* ── Focus, buttons, inputs ──────────────────────────────────────── */

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--o500);
  outline-offset: 2px;
  border-radius: 4px;
}

button {
  font-family: inherit;
  font-size: 14px;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  border: 1px solid var(--z300);
  background: #fff;
  color: var(--z700);
  transition: background 160ms var(--ease), border-color 160ms var(--ease),
              color 160ms var(--ease), box-shadow 160ms var(--ease), transform 120ms var(--ease);
}
.btn:hover:not(:disabled) { background: var(--z50); border-color: var(--z400); color: var(--z900); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Primary = dark (reference submit buttons) */
.btn-primary {
  background: var(--z900);
  border-color: var(--z900);
  color: #fff;
}
.btn-primary:hover:not(:disabled) { background: var(--z800); border-color: var(--z800); color: #fff; }
.btn-primary:disabled {
  background: var(--z200);
  border-color: var(--z200);
  color: var(--z400);
  opacity: 1;
}

/* Accent = orange (join) */
.btn-accent {
  background: var(--o500);
  border-color: var(--o500);
  color: #fff;
}
.btn-accent:hover:not(:disabled) { background: var(--o600); border-color: var(--o600); color: #fff; }

.btn-danger {
  background: var(--r50);
  border-color: var(--r200);
  color: var(--r700);
}
.btn-danger:hover:not(:disabled) { background: var(--r100); border-color: var(--r400); color: var(--r700); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--z500); }
.btn-ghost:hover:not(:disabled) { background: var(--z100); border-color: transparent; color: var(--z800); }

.btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 10px; }
.btn-block { width: 100%; }

input[type="text"], input[type="password"], textarea {
  font-family: inherit;
  font-size: 15px;
  color: var(--z900);
  background: #fff;
  border: 1px solid var(--z300);
  border-radius: 12px;
  padding: 12px 16px;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
input:focus, textarea:focus {
  border-color: rgba(249, 115, 22, 0.6);
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.4);
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--z400); }

/* ═══ JOIN SCREEN (dark gate) ════════════════════════════════════ */

#join-screen,
#facilitator-screen.fac-gate {
  min-height: 100vh;
  max-width: none;
  background: var(--z950);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  position: relative;
  overflow: hidden;
}
#join-screen::before,
#facilitator-screen.fac-gate::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.6;
  background-image:
    radial-gradient(ellipse 100% 70% at 50% -10%, rgba(217, 119, 87, 0.12), transparent 55%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(217, 119, 87, 0.08), transparent 55%);
}

.join-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  animation: joinIn 500ms var(--ease) both;
}
@keyframes joinIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.join-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 32px;
}
.join-mark { width: 56px; height: 56px; margin-bottom: 20px; }

.join-title {
  font-size: 28px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.join-sub {
  margin-top: 8px;
  font-size: 14px;
  color: var(--z400);
  line-height: 1.6;
  max-width: 40ch;
}

.join-card {
  background: rgba(24, 24, 27, 0.7);
  border: 1px solid var(--z800);
  border-radius: 16px;
  padding: 32px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(4px);
}
.join-card h2 {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 20px;
}

.join-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--z400);
  margin-bottom: 8px;
}

.join-form { display: flex; flex-direction: column; }
.join-form input {
  width: 100%;
  background: rgba(9, 9, 11, 0.6);
  border-color: var(--z800);
  color: #fff;
  margin-bottom: 14px;
}
.join-form input::placeholder { color: var(--z600); }
.join-form .btn { margin-top: 8px; padding-top: 12px; padding-bottom: 12px; }
.join-form .join-label { margin-top: 2px; }

.table-picker {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 6px;
}
.table-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  border: 1px solid var(--z800);
  border-radius: 12px;
  background: rgba(9, 9, 11, 0.45);
  color: var(--z200);
  font-size: 13px;
  font-weight: 600;
  transition: border-color 160ms var(--ease), background 160ms var(--ease), color 160ms;
}
.table-pick:hover:not(:disabled) {
  background: var(--z900);
  border-color: var(--z700);
}
.table-pick.selected {
  border-color: var(--o500);
  background: rgba(249, 115, 22, 0.12);
  color: #fff;
}
.table-pick:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.table-pick-name { letter-spacing: 0.01em; }
.table-pick-count {
  font-size: 10px;
  font-weight: 500;
  color: var(--z500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.table-pick.selected .table-pick-count { color: var(--o400); }

.rejoin-meta {
  color: var(--z500);
  font-weight: 400;
  font-size: 12px;
}

@media (max-width: 520px) {
  .table-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.join-error {
  color: var(--r400);
  font-size: 13px;
  min-height: 18px;
  margin-top: 10px;
}

.join-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--z500);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 18px 0 14px;
}
.join-divider::before, .join-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--z800);
}

.rejoin-list { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; }

.rejoin-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--z800);
  border-radius: 12px;
  background: transparent;
  color: var(--z200);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}
.rejoin-btn:hover { background: var(--z900); border-color: var(--z700); }
.rejoin-btn .rejoin-arrow { color: var(--z500); transition: color 160ms, transform 160ms var(--ease); }
.rejoin-btn:hover .rejoin-arrow { color: var(--o400); transform: translateX(3px); }

.rejoin-empty { color: var(--z500); font-size: 13px; text-align: center; padding: 8px 0; }

.join-foot {
  margin-top: 24px;
  text-align: center;
  font-size: 11px;
  color: var(--z600);
  letter-spacing: 0.02em;
}

/* ── Roster chip editor (join gate + roster modal) ───────────────── */


.chip-editor { display: flex; flex-direction: column; gap: 8px; }

.chip-box { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* input + Add wrap together as one unit */
.chip-box .chip-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 200px;
}
.chip-box .chip-input {
  width: auto;
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  font-size: 14px;
  border-radius: 10px;
}
.chip-box .btn.chip-add { margin-top: 0; padding: 8px 14px; flex: none; }

.member-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  font-size: 13px;
  font-weight: 500;
  padding: 5px 6px 5px 12px;
  border-radius: 999px;
  background: var(--z100);
  border: 1px solid var(--z200);
  color: var(--z700);
  animation: chipIn 240ms var(--ease) both;
}
.member-chip .chip-name {
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip-x {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  color: var(--z400);
  transition: color 140ms, background 140ms;
}
.chip-x:hover { color: var(--z800); background: var(--z200); }
.chip-x-svg { width: 11px; height: 11px; }

.chip-meta { display: flex; align-items: baseline; gap: 12px; min-height: 16px; }
.chip-count {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--z400);
  font-variant-numeric: tabular-nums;
}
.chip-err { font-size: 12px; color: var(--r500); }

/* dark variant — join gate (zinc-800 chips, zinc-200 text) */
.chip-dark .member-chip { background: var(--z800); border-color: var(--z700); color: var(--z200); }
.chip-dark .chip-x { color: var(--z500); }
.chip-dark .chip-x:hover { color: var(--z100); background: var(--z700); }
.chip-dark .chip-box .chip-input {
  background: rgba(9, 9, 11, 0.6);
  border-color: var(--z800);
  color: #fff;
}
.chip-dark .chip-box .chip-input::placeholder { color: var(--z600); }
.chip-dark .btn.chip-add { background: transparent; border-color: var(--z700); color: var(--z300); }
.chip-dark .btn.chip-add:hover:not(:disabled) { background: var(--z900); border-color: var(--z600); color: #fff; }
.chip-dark .btn.chip-add:disabled { background: transparent; border-color: var(--z800); color: var(--z600); opacity: 1; }
.chip-dark .chip-count { color: var(--z500); }
.chip-dark .chip-err { color: var(--r400); }

.roster-box .chip-editor { margin-top: 16px; }

/* table-name announcement — the server names your table, and this dialog is where
   the room finds out which one it is. The number is the message, so it's set at
   display size: the rest of the table has to read it off a laptop from a seat away. */
.table-name-box { max-width: 420px; text-align: center; }
.table-name {
  font-size: 40px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--o500);
  line-height: 1.1;
  margin: 6px 0 14px;
}

/* ═══ APP SHELL: fixed dark sidebar + light main ═════════════════ */

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--sidebar-w);
  background: var(--z950);
  color: var(--z300);
  border-right: 1px solid var(--z900);
  display: flex;
  flex-direction: column;
  z-index: 40;
}

/* brand block */
.sb-brand {
  padding: 28px 24px 20px;
  border-bottom: 1px solid rgba(24, 24, 27, 0.5);
}
.sb-brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.sb-mark {
  width: 32px; height: 32px;
  flex: none;
  border-radius: 10px;
  background: rgba(249, 115, 22, 0.1);
  border: 1px solid rgba(249, 115, 22, 0.2);
  display: flex; align-items: center; justify-content: center;
}
.sb-mark svg { width: 20px; height: 20px; display: block; }
.sb-title {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--z50);
  white-space: nowrap;
}
.sb-kicker {
  padding-left: 44px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(249, 115, 22, 0.8);
}
.sb-presented {
  padding-left: 44px;
  margin-top: 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.025em;
  line-height: 1.5;
  color: var(--z500);
}

/* nav */
.sb-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
}
.tab-bar-steps { display: flex; flex-direction: column; gap: 4px; }

.tab {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--z400);
  text-align: left;
  white-space: nowrap;
  transition: background 150ms var(--ease), color 150ms var(--ease);
}
.tab:hover:not(.is-active) { background: var(--z900); color: var(--z50); }
.tab.is-active { background: var(--z800); color: var(--z50); }

.tab .tab-num {
  flex: none;
  width: 18px;
  font-size: 11px;
  font-weight: 500;
  color: var(--z600);
  font-variant-numeric: tabular-nums;
}
.tab.is-active .tab-num { color: var(--o500); }

/* tab-txt stacks the title over its pillar; it takes the flex the title used to */
.tab .tab-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tab .tab-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Deploy · Adopt · Value on the nav — the arc is readable on arrival, because the
   running order doesn't teach it.
   Deliberately NOT hue-coded per pillar: this palette is zinc + orange as THE
   brand accent + green meaning *earned*. Three new hues would fight both and
   re-create the wash the boardroom review already cleaned up. Weight and tone
   carry it; the active step gets the one accent it has earned. */
.tab .tab-pillar {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--z600);
  transition: color 150ms var(--ease);
}
.tab.is-active .tab-pillar { color: var(--o500); }

.tab .tab-check { flex: none; display: flex; align-items: center; color: var(--e400); }
.tab-check-svg { width: 14px; height: 14px; }

/* passive pace readout on the currently-viewed step */
.tab .tab-elapsed {
  flex: none;
  font-size: 11px;
  color: var(--z500);
  font-variant-numeric: tabular-nums;
}

/* Utility destinations (Leaderboard / Resources) — icon sits in the number column */
.tab-util .tab-num.tab-util-icon { display: flex; align-items: center; color: var(--z500); }
.tab-util.is-active .tab-num.tab-util-icon { color: var(--o500); }
.tab-util-svg { width: 15px; height: 15px; }
.tab .tab-dot {
  flex: none;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--o500);
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.6);
  animation: pulseDot 1.1s ease-in-out infinite;
}
@keyframes pulseDot { 50% { opacity: 0.3; transform: scale(0.75); } }

.tab .tab-end { flex: none; display: flex; align-items: center; }

.nav-divider { border-top: 1px solid var(--z900); margin: 12px 0; }

/* team block */
.sb-team {
  border-top: 1px solid var(--z900);
  padding: 20px 24px;
}
.sb-team-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sb-avatar {
  width: 32px; height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--z800);
  border: 1px solid var(--z700);
  color: var(--z200);
  font-size: 14px;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
}
.sb-team-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--z50);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conn-dot {
  flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--e500);
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}
.conn-dot.off { background: var(--r500); box-shadow: 0 0 6px rgba(239, 68, 68, 0.6); animation: connBlink 1s ease infinite; }
@keyframes connBlink { 50% { opacity: 0.35; } }

.sb-points {
  flex: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--z500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color 250ms var(--ease);
}
.sb-points.bump { color: var(--o400); }

/* roster line — muted member count + edit affordance */
.sb-roster {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin-top: 12px;
  padding: 0;
  font-size: 11px;
  color: var(--z500);
  text-align: left;
  transition: color 150ms;
}
.sb-roster:hover { color: var(--z300); }
.sb-roster-icon { width: 13px; height: 13px; flex: none; }
.sb-roster-count { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-roster-edit { flex: none; color: var(--z600); transition: color 150ms; }
.sb-roster:hover .sb-roster-edit { color: var(--o400); }

.sb-switch {
  display: block;
  margin-top: 10px;
  padding: 0;
  font-size: 11px;
  color: var(--z500);
  transition: color 150ms;
}
.sb-switch:hover { color: var(--o400); }

/* Shared by .member-chip (the roster chip editor). The badge chips that were the
   other caller are gone with the mechanic. */
@keyframes chipIn { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }

/* ── Monograms (persona avatars — initials, no imagery) ──────────── */

.monogram {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--z100);
  border: 1px solid var(--z200);
  color: var(--z600);
  font-weight: 600;
  letter-spacing: 0.02em;
  user-select: none;
  position: relative;   /* the portrait pins to this */
  overflow: hidden;     /* clips the portrait to the circle */
}
/* The portrait covers the initials rather than replacing them, so the initials are a
   live fallback: onerror strips this img and AR/MW is already sitting underneath. inset:0
   makes it fill whatever size class the call site chose, 20 through 48, no per-size rule. */
.mono-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.mono-20 { width: 20px; height: 20px; font-size: 9px; }
.mono-24 { width: 24px; height: 24px; font-size: 9px; }
.mono-26 { width: 26px; height: 26px; font-size: 10px; }
.mono-28 { width: 28px; height: 28px; font-size: 10px; }
.mono-36 { width: 36px; height: 36px; font-size: 12.5px; }
.mono-48 { width: 48px; height: 48px; font-size: 15px; }

/* ── Inline icon sizing ──────────────────────────────────────────── */

.icon-16 { width: 16px; height: 16px; flex: none; }
.icon-36 { width: 36px; height: 36px; }
.btn-icon { width: 15px; height: 15px; flex: none; }
.btn-icon-sm { width: 13px; height: 13px; flex: none; margin-right: 5px; }
.notice-icon.spin .icon-36 { animation: iconSpin 1s linear infinite; }
@keyframes iconSpin { to { transform: rotate(360deg); } }

/* main column */
.main {
  margin-left: var(--sidebar-w);
  padding: 40px 48px 90px;
  min-height: 100vh;
}
.main > * { max-width: 1320px; margin-left: auto; margin-right: auto; }

/* ═══ STEP VIEW — white card ═════════════════════════════════════ */

.step-view { animation: viewIn 240ms var(--ease) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.step-card {
  background: #fff;
  border: 1px solid var(--z200);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  /* No overflow:hidden — it traps position:sticky descendants (.doc-pane,
     .scenario-board, .objections-pane) so they scroll away with the card
     instead of staying in the viewport. Corners still clip via the radius
     on an opaque background; children don't paint outside the box. */
}

.step-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 32px 0;
}

/* Tagline + crew get the card's full width instead of competing with the
   meta pills for a flex row. Indented to align under the title rather than the
   status dot (20px dot + 14px gap). */
.step-head-sub {
  padding: 8px 32px 18px calc(32px + 20px + 14px);
}
.step-head-sub .step-tagline { margin-top: 0; }

/* flex:1 — the meta is flex:none, so without this the title, tagline and crew
   strip all wrap early against a header that has room to spare. */
.step-head-main { display: flex; align-items: flex-start; gap: 14px; flex: 1; min-width: 0; }

.step-status {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid var(--z300);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: transparent;
}
.step-status.done {
  border-color: var(--e500);
  background: var(--e500);
  color: #fff;
}

.step-head-txt { flex: 1; min-width: 0; }  /* kicker + title only now */
.step-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--o600);
  margin-bottom: 4px;
}
.step-head-txt h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--z900);
}
.step-tagline { color: var(--z500); font-size: 15px; line-height: 1.6; margin-top: 4px; }

/* Just "Step 3" now. The .pillar-badge chip that sat beside it is gone: the
   sidebar carries the pillar under each step title, which is where the
   Deploy/Adopt/Value arc is actually read. */
.step-kicker { display: flex; align-items: center; gap: 9px; }

.step-head-meta { display: flex; align-items: center; gap: 7px; flex: none; padding-top: 2px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--z200);
  background: #fff;
  color: var(--z500);
  white-space: nowrap;
}
.pill.pill-pts { color: var(--o700); border-color: var(--o200); background: var(--o50); }
/* Cleared reads on the tick, not on a green-filled pill. This was --e50/--e200/--e700
   and, stacked next to the pace pill doing the same thing, put three green fills in the
   header of a step you'd already finished. The step tab carries its own ✓; this pill is
   here for the number. */
.pill.pill-passed { color: var(--z600); border-color: var(--z200); background: #fff; }
.pill-tick { color: var(--e600); font-weight: 700; }

/* passive pace pill — informational only, no motion */
.pill.pill-pace {
  background: var(--z100);
  border-color: var(--z100);
  color: var(--z600);
  font-variant-numeric: tabular-nums;
}
/* No .is-over: the clock is never amber. It reports, it doesn't scold.
   No green on .is-cleared either: an elapsed time is a fact, not an award, and the
   ✓ beside it already says the step is done. */
.pill.pill-pace.is-cleared { background: var(--z100); border-color: var(--z100); color: var(--z600); }
.pace-icon { width: 12px; height: 12px; flex: none; }

.panel-avatars { display: flex; gap: 5px; }
.panel-avatars .monogram {
  cursor: default;
  transition: transform 160ms var(--ease), border-color 160ms;
}
.panel-avatars .monogram:hover { transform: translateY(-2px); border-color: var(--o300); }

/* ── Sub-tabs (Learn/Implement pattern) ──────────────────────────── */

.subtabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--z200);
  padding: 0 32px;
}

.subtab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--z500);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 150ms var(--ease), border-color 150ms var(--ease);
}
.subtab:hover:not(.is-active) { color: var(--z800); }
.subtab.is-active {
  font-weight: 600;
  color: var(--o600);
  border-bottom-color: var(--o500);
}
.subtab-icon { width: 16px; height: 16px; flex: none; }
.subtab .subtab-count {
  font-size: 12px;
  color: var(--z400);
  font-variant-numeric: tabular-nums;
}
.subtab.is-active .subtab-count { color: var(--o400); }
.subtab .subtab-alert { color: var(--r500); font-size: 10px; }

.subtab-panel { padding: 32px; animation: viewIn 200ms var(--ease) both; }

/* ── Scenario / Gate panels — one full-width reading surface ─────── */

.card {
  background: #fff;
  border: 1px solid var(--z200);
  border-radius: 12px;
  padding: 22px 26px;
}

.card-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--z500);
  margin-bottom: 12px;
}

/* Reading measure inside sub-tabs: prose capped at ~92ch, forms full width. */
/* position:relative so .term-pop can anchor to this rather than escaping to the page. */
.prose-measure { max-width: 92ch; position: relative; }

/* Scenario tab: briefing left, board roster right (every step). */
.scenario-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 36px 48px;
  align-items: start;
}
.scenario-brief { min-width: 0; max-width: none; }
.scenario-board {
  position: sticky;
  top: 24px;
  min-width: 0;
  padding: 4px 0 0;
}
.scenario-board-lede {
  margin: -4px 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--z500);
}
.board-roster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.board-member {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-top: 1px solid var(--z100);
}
.board-member:first-child { border-top: none; padding-top: 2px; }
.board-member .monogram { margin-top: 2px; }
.board-member-txt { min-width: 0; flex: 1; }
.board-member-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--z900);
  line-height: 1.3;
}
.board-member-role {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--z500);
  line-height: 1.4;
}
.board-member-bio {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--z600);
}

/* The Gauntlet — attributed challenges */
.challenges { margin-top: 32px; border-top: 1px solid var(--z200); padding-top: 24px; }
.challenge-row { display: flex; gap: 14px; padding: 14px 0; }
.challenge-row + .challenge-row { border-top: 1px solid var(--z100); }
.challenge-row .monogram { margin-top: 2px; }
.challenge-body { flex: 1; min-width: 0; }
.challenge-who { font-size: 13px; font-weight: 600; color: var(--z900); }
.challenge-role { font-weight: 400; font-size: 12px; color: var(--z500); margin-left: 8px; }
.challenge-text { margin-top: 6px; font-size: 15px; line-height: 1.65; color: var(--z600); }

/* Response reviewer footer */

.gate-foot { border-top: 1px solid var(--z200); padding-top: 20px; margin-top: 8px; }
.gate-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 40px;
  align-items: start;
  margin-top: 20px;
}
.gate-col { min-width: 0; }
.gate-col-who { border-left: 1px solid var(--z100); padding-left: 28px; }
.gate-majority {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--z100);
  font-size: 12px;
  color: var(--z500);
  line-height: 1.5;
}

/* .gate-list / .gate-item / .gate-marker / .gate-empty are gone with the "What you
   must show" column they styled. That list was a duplicate of the ask's checklist and
   moved to sit directly above the box. */

/* Only "Who reviews this" lives in this header now, so it stops being a 260px sidebar
   pinned beside a column that no longer exists. Without this it would land in the grid's
   1fr track and stretch, still wearing the divider that used to separate it from the
   list. */
.gate-cols.gate-cols-who-only { grid-template-columns: minmax(0, 1fr); gap: 0; }
.gate-cols-who-only .gate-col-who { border-left: 0; padding-left: 0; }
/* With the full width available the reviewers read as a row rather than a stack. */
.gate-cols-who-only .reviewer-row { display: inline-flex; margin-right: 22px; }
.gate-cols-who-only .gate-majority { margin-top: 10px; }

.reviewer-row { display: flex; align-items: center; gap: 11px; padding: 6px 0; }
.reviewer-txt { min-width: 0; }
.reviewer-name { display: block; font-size: 13.5px; font-weight: 500; color: var(--z900); }
.reviewer-role { display: block; font-size: 12px; color: var(--z500); line-height: 1.4; }

/* markdown output — light editorial */
.md { font-size: 15px; line-height: 1.7; color: var(--z600); }
.md > *:first-child { margin-top: 0; }
.md h1 { font-size: 18px; font-weight: 600; margin: 24px 0 10px; letter-spacing: -0.01em; color: var(--z900); }
.md h2 { font-size: 15px; font-weight: 600; margin: 20px 0 8px; color: var(--z900); }
.md h3 {
  font-size: 12px; font-weight: 600; margin: 18px 0 6px;
  color: var(--z500); text-transform: uppercase; letter-spacing: 0.08em;
}
.md p { margin: 10px 0; }
.md ul, .md ol { margin: 10px 0 10px 22px; }
.md li { margin: 5px 0; }
.md strong { font-weight: 600; color: var(--z900); }
.md em { color: var(--z700); }
.md code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--z100);
  border: 1px solid var(--z200);
  border-radius: 6px;
  padding: 1.5px 6px;
  color: var(--z800);
}
.md a {
  color: var(--o600);
  text-decoration: none;
  border-bottom: 1px solid var(--o200);
}
.md a:hover { border-bottom-color: var(--o600); }
.md-pre {
  margin: 12px 0;
  padding: 12px 14px;
  background: var(--z900);
  border: 1px solid var(--z800);
  border-radius: 10px;
  overflow-x: auto;
}
.md-pre code {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  color: var(--z100);
  white-space: pre;
}
.md hr { border: none; border-top: 1px solid var(--z200); margin: 18px 0; }
.md blockquote {
  border-left: 3px solid var(--o200);
  background: rgba(255, 247, 237, 0.5);
  border-radius: 0 8px 8px 0;
  padding: 8px 14px;
  margin: 12px 0;
  color: var(--z600);
}
.md-table-wrap { overflow-x: auto; margin: 14px 0; border: 1px solid var(--z200); border-radius: 10px; }
.md table { width: 100%; border-collapse: collapse; font-size: 13px; }
.md th {
  background: var(--z50);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--z500);
  padding: 9px 12px; text-align: left; white-space: nowrap;
}
.md td { padding: 8px 12px; border-top: 1px solid var(--z200); vertical-align: top; color: var(--z700); }
.md tr:hover td { background: var(--z50); }

/* ── Evidence panel ──────────────────────────────────────────────── */

.evidence-note {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--o50);
  border: 1px solid var(--o200);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--z600);
  margin-bottom: 20px;
}
.evidence-note strong { color: var(--o700); font-weight: 600; }
.evidence-note .note-icon { width: 16px; height: 16px; flex: none; color: var(--o600); }
.evidence-note > span { flex: 1; min-width: 0; }
.evidence-dl-all { flex: none; margin-top: 0; display: inline-flex; align-items: center; white-space: nowrap; }

/* ── Learn sub-tab ─────────────────────────────────────────────────────── */

/* "Deploy → Adopt → Value" with the current one lit. The arc runs Adopt before
   Deploy (so the regulator can ambush a real plan), so this is where a team
   actually learns where they are. */
.pillar-pos {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--z200);
  margin-bottom: 20px;
}
.pp-step {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--z400);
}
.pp-step.is-on {
  color: var(--o700);
  background: var(--o50);
  border: 1px solid var(--o200);
  border-radius: 999px;
  padding: 3px 10px;
}
.pp-arrow { color: var(--z300); font-size: 11px; }
.pp-note { font-size: 12px; color: var(--z500); font-style: italic; }

/* ── The step's anchor number (Scenario, above the briefing) ────────
   One quiet line, not a hero block: a 34px version got cut in review. */
.stat-note {
  border-left: 3px solid var(--o400);
  padding: 4px 0 4px 12px;
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.55;
}
.stat-note-value { color: var(--o700); font-weight: 750; white-space: nowrap; }
.stat-note-caption { color: var(--z700); }

/* ── Guess first, as a table (predict → reveal) ────────────────────── */
.predict {
  border: 1px solid var(--z200);
  border-radius: 10px;
  padding: 15px 18px 16px;
  margin: 20px 0;
  background: #fff;
}
.predict-q { font-size: 14.5px; font-weight: 650; color: var(--z900); line-height: 1.5; margin-bottom: 10px; }
.predict-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.predict-opt {
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  color: var(--z800);
  background: var(--z50);
  border: 1px solid var(--z200);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
}
.predict-opt:hover:not(:disabled) { border-color: var(--o400); color: var(--o700); background: #fff; }
.predict-opt.is-locked { cursor: default; opacity: .55; }
.predict-opt.is-answer { opacity: 1; background: var(--e100); border-color: var(--e500); color: var(--e800); font-weight: 700; }
.predict-opt.is-miss { opacity: 1; background: #fff; border-color: var(--z300); text-decoration: line-through; }
.predict-hint { margin-top: 10px; font-size: 12px; color: var(--z500); font-style: italic; }
.predict-reveal {
  margin-top: 12px;
  border-top: 1px dashed var(--z200);
  padding-top: 12px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--z800);
}

/* ── Terms of art, defined on the word ─────────────────────────────────────
   Replaces a "Words used here, in plain words" block of <details> chips at the foot of the
   scenario. The word in the sentence carries its own definition now.

   A dotted underline, not a button and not a link: it has to read as prose an exec can
   ignore, because most of the room knows what SIEM means and the ones who do not are not
   going to ask. Inherits font and colour from the paragraph on purpose. */
.term-word {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: help;
  border-bottom: 1px dashed var(--z400);
  transition: border-color 150ms var(--ease), color 150ms var(--ease);
}
.term-word:hover { color: var(--o700); border-bottom-color: var(--o500); }
.term-word:focus-visible { outline: 2px solid var(--o400); outline-offset: 2px; border-radius: 2px; }
/* Absolute against .prose-measure so it travels with the text on scroll instead of
   stranding itself. Above the predict card, below any modal. */
.term-pop {
  position: absolute;
  z-index: 20;
  max-width: 34ch;
  background: var(--z900);
  color: var(--z50);
  font-size: 12.5px;
  line-height: 1.5;
  padding: 8px 11px;
  border-radius: 8px;
  box-shadow: var(--card-shadow);
}
.term-pop[hidden] { display: none; }

/* ── Post-verdict teaching: the 10/10 checklist, the lesson, the share-out ── */
.model-answer {
  border: 1px solid var(--o200);
  border-left: 4px solid var(--o500);
  border-radius: 10px;
  background: var(--o50);
  padding: 15px 18px 13px;
  margin: 18px 0 14px;
}
.model-answer .card-label { display: flex; align-items: center; gap: 7px; }
.ma-icon { width: 14px; height: 14px; color: var(--o600); }
.ma-list { margin: 10px 0 0; padding-left: 20px; }
.ma-list li { font-size: 13.5px; line-height: 1.6; color: var(--z800); margin-bottom: 6px; }
.ma-note { margin-top: 8px; font-size: 12px; color: var(--z600); font-style: italic; }

.step-debrief {
  margin: 18px 0 14px;
  padding: 16px 18px 14px;
  border: 1px solid var(--z200);
  border-radius: 12px;
  background: var(--z50);
}
.step-debrief .card-label { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.db-section-label {
  margin: 14px 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--z500);
}
.bp-list li { color: var(--z800); }
.bp-list .bp-item { list-style: disc; margin-bottom: 12px; }
.bp-practice {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--z800);
}
.discuss-prompts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 22px;
}
.discuss-prompts-lede,
.discuss-insights-lede {
  margin: -4px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--z600);
}
.discuss-prompt-list {
  margin: 4px 0 0;
  padding-left: 20px;
}
.discuss-prompt-list li {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--z800);
  font-style: italic;
  margin-bottom: 8px;
}
.discuss-prompt-list li:last-child { margin-bottom: 0; }
.discuss-insights {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 22px;
}
.discuss-share {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  border: none;
  background: transparent;
}
.discuss-share-callout {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(249, 115, 22, 0.28);
  background: rgba(249, 115, 22, 0.06);
}
.discuss-share .card-label { margin-bottom: 0; }
.discuss-share-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--z800);
  font-weight: 550;
}
.discuss-notes {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 96px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--z200);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--z900);
}
.discuss-notes:focus {
  outline: none;
  border-color: rgba(249, 115, 22, 0.55);
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.35);
}
.discuss-notes-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}
.discuss-notes-status {
  font-size: 12.5px;
  color: var(--z500);
  min-height: 1em;
}
#discuss-notes-save.is-saved {
  background: var(--z100);
  color: var(--z600);
  border-color: var(--z200);
  cursor: default;
}
.fac-discuss {
  margin: 24px 18px 8px;
  padding: 18px 20px;
  border: 1px solid var(--z200);
  border-radius: 14px;
  background: #fff;
}
.fac-discuss .card-label { margin-bottom: 10px; }
.fac-discuss-team {
  padding: 14px 0;
  border-top: 1px solid var(--z100);
}
.fac-discuss-team:first-of-type { border-top: none; padding-top: 4px; }
.fac-discuss-team-name {
  font-size: 14px;
  font-weight: 650;
  color: var(--z900);
  margin-bottom: 8px;
}
.fac-discuss-step { margin: 0 0 14px 0; }
.fac-discuss-step-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--z500);
  margin-bottom: 8px;
}
/* .fac-discuss-share is gone: notes render as hairline-divided list rows now
   (.fac-discuss-list / .fac-discuss-row below), not as stacked cards. */
.fac-discuss-a {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--z800);
  white-space: pre-wrap;
}
/* Step-grouped view: the table's name labels each note, since the heading is now
   the step rather than the table. Sized to be read at arm's length from a laptop
   on a lectern, not scanned on a phone.

   One flat list per step, rows divided by hairlines rather than stacked cards: a
   facilitator scanning five tables mid-step needs them in one eyeful, and card
   padding pushed the fifth table off the screen. */
.fac-discuss-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--z100);
}
.fac-discuss-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 9px 2px;
  border-bottom: 1px solid var(--z100);
}
.fac-discuss-qs {
  margin: 2px 0 8px;
  font-size: 12px;
  color: var(--z500);
}
.fac-discuss-qs summary { cursor: pointer; }
.fac-discuss-qs ul { margin: 6px 0 0 18px; padding: 0; }
.fac-discuss-qs li { margin: 2px 0; font-style: italic; }
.fac-discuss-who {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--o700);
}
@media (max-width: 720px) {
  .fac-discuss-row { grid-template-columns: 1fr; gap: 3px; }
}
.fac-discuss-n {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--z500);
  margin-left: 8px;
}
.fac-discuss-now {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--o600);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 8px;
  vertical-align: 1px;
}
.fac-discuss-sum {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--z500);
  margin-left: 8px;
}
.db-board { display: flex; flex-direction: column; gap: 12px; }
.db-persona {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 8px 0 8px 12px;
  border-left: 3px solid var(--z300);
}
.db-persona.db-cto { border-left-color: #3556d4; }
.db-persona.db-cro { border-left-color: #7c3aed; }
.db-persona.db-ciso { border-left-color: #0f7d84; }
.db-persona.db-cfo { border-left-color: #177245; }
.db-persona.db-staff-eng { border-left-color: #a4620a; }
.db-persona-txt { flex: 1; min-width: 0; }
.ab-claims { margin-top: 8px; }

.pass-lesson {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--z800);
}
.share-out {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--o700);
}
.share-out-icon { width: 15px; height: 15px; flex: none; }

.ruling-upgrade { margin-top: 6px; font-size: 13px; color: var(--z700); }
/* "To make it a 10:" is teaching, not a pass signal, so it takes the same accent as
   the 10/10 checklist it points at. It was --e700, which put deep green on the one
   line whose job is to say the answer fell short. */
.ruling-upgrade-lead { font-weight: 650; color: var(--o700); }
.ruling-upgrade ul { margin: 4px 0 0; padding-left: 18px; }

/* ── Per-question evidence + the bullet cap, on Respond ────────────── */
.field-cap {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--z500);
  background: var(--z50);
  border: 1px solid var(--z200);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}
/* The standalone Evidence row is gone: its label, its chips and its own line sat
   between the ask and the box. The docs are inline in the claim bank's prompt now, so
   only .field-ev-doc survives (restyled where it renders, under .dq-prompt) and it
   keeps the base rule below for anything that still wants a pill. */
.field-ev-doc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 550;
  color: var(--o700);
  background: #fff;
  border: 1px solid var(--z200);
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
}
.field-ev-doc:hover { border-color: var(--o400); }

/* ── Discuss tab (was Learn): 3 ways → talk-about-it questions ─────── */
.discuss-ways,
.discuss-examples { margin-bottom: 24px; }
.way-row { display: flex; gap: 12px; padding: 12px 0; }
.way-row + .way-row { border-top: 1px solid var(--z100); }
.ex-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 12px 0;
}
.ex-row + .ex-row { border-top: 1px solid var(--z100); }
.way-n {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--o50);
  border: 1px solid var(--o200);
  color: var(--o700);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.way-title { font-size: 14.5px; font-weight: 650; color: var(--z900); }
.way-detail { margin-top: 4px; font-size: 13.5px; line-height: 1.6; color: var(--z700); }
.ex-co { font-size: 14.5px; font-weight: 650; color: var(--z900); }
a.ex-co-link {
  color: var(--z900);
  text-decoration: underline;
  text-decoration-color: var(--z300);
  text-underline-offset: 2px;
}
a.ex-co-link:hover {
  color: var(--o700);
  text-decoration-color: var(--o400);
}
.ex-stat {
  font-size: 11.5px;
  line-height: 1.35;
  font-weight: 650;
  color: var(--o700);
  background: var(--o50);
  border-radius: 999px;
  padding: 3px 8px;
}
.ex-detail {
  flex: 1 1 100%;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--z700);
  white-space: pre-wrap;
}

.discuss-q {
  border: 1px solid var(--z200);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
  background: #fff;
}
.field .discuss-q { margin-bottom: 10px; }
.discuss-q.is-home { border-color: var(--o200); background: var(--o50); }
.discuss-q-text { font-size: 15px; font-weight: 650; color: var(--z900); line-height: 1.5; margin-bottom: 8px; }
/* The claim bank. Nine of these sat in bordered 13px cards under a second question and
   a bullet list, and the box you were meant to type in was below the fold. Tightened:
   12px, a flat zinc fill instead of a border (nine outlines read as nine buttons), and
   two columns from the width where the second column stops being a sliver. */
.dq-prompt { font-size: 12px; color: var(--z600); margin: 2px 0 9px; line-height: 1.5; }
/* Single column, deliberately. Two columns saved height but a row-major grid reads
   left-to-right while a list of rival claims wants to be read top-to-bottom, and the
   ragged pairing implied relationships that didn't exist. One column, one voice per
   bank ("We won if..."), and the eye runs straight down the argument. */
.dq-claims {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: grid;
  gap: 4px;
}
.dq-claim {
  font-size: 12px;
  line-height: 1.45;
  color: var(--z800);
  background: var(--z50);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 9px;
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
/* The quiz states. Pickable rows invite the tap; a pick is a quiet accent keyline,
   not a wash. After the check: true claims earn a restrained emerald mark, decoys
   grey out, and a picked decoy keeps a red keyline as the receipt. */
.dq-claim.is-pickable { cursor: pointer; user-select: none; }
.dq-claim.is-pickable:hover { border-color: var(--z300); }
.dq-claim.is-pickable.is-picked {
  border-color: var(--o400);
  background: var(--o50);
}
.dq-mark {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.5px solid var(--z300);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dq-claim.is-pickable.is-picked .dq-mark {
  border-color: var(--o600);
  background: var(--o600);
}
.dq-mark-icon { width: 9px; height: 9px; color: #fff; }
.dq-claim.is-true .dq-mark { border-color: var(--e600); background: var(--e600); }
.dq-claim.is-decoy .dq-mark { border-color: var(--z400); background: var(--z400); }
.dq-claims.is-checked .dq-claim.is-true { background: var(--e50); color: var(--z900); }
.dq-claims.is-checked .dq-claim.is-decoy { color: var(--z500); }
.dq-claims.is-checked .dq-claim.is-decoy.is-picked { border-color: var(--r400); }
.dq-claim-txt { flex: 1; }
.dq-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -4px 0 12px;
  flex-wrap: wrap;
}

/* Keep / Reduce budget lines (Step 4 Q1) */
.kr-bank {
  display: grid;
  gap: 6px;
  margin: 0 0 10px;
}
.kr-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  background: var(--z50);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 10px;
}
.kr-row.has-call { border-color: var(--z200); background: #fff; }
.kr-row.is-true { background: var(--e50); border-color: #bfe3cc; }
.kr-row.is-miss { border-color: var(--r400); }
.kr-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--z900);
  line-height: 1.35;
}
.kr-v1 {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--z500);
  margin-top: 2px;
}
.kr-hint {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--z600);
  margin-top: 3px;
  line-height: 1.35;
}
.kr-toggles { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.kr-toggles.is-stacked {
  flex-direction: column;
  align-items: stretch;
  min-width: min(340px, 46vw);
}
.kr-toggles.is-stacked .kr-btn {
  text-align: left;
  white-space: normal;
  line-height: 1.35;
  padding: 8px 10px;
}
.kr-row.is-approach-row {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
}
@media (max-width: 720px) {
  .kr-row.is-approach-row {
    grid-template-columns: 1fr;
  }
  .kr-toggles.is-stacked { min-width: 0; }
}
.kr-btn {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--z300);
  background: #fff;
  color: var(--z700);
  cursor: pointer;
  white-space: nowrap;
}
.kr-btn:hover:not(:disabled) { border-color: var(--z400); }
.kr-btn.is-on {
  border-color: var(--o600);
  background: var(--o50);
  color: var(--z900);
}
.kr-btn:disabled { opacity: 0.85; cursor: default; }
.kr-toggles.is-locked .kr-btn:not(.is-on) { opacity: 0.45; }
.kr-reveal {
  margin: 8px 0 14px;
  border: 1px solid var(--z200);
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
}
.kr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 6px;
}
.kr-table th,
.kr-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--z100);
  vertical-align: top;
}
.kr-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--z500);
  font-weight: 700;
}
.kr-table tr.is-true td:last-child .kr-call { color: var(--e600); font-weight: 700; }
.kr-table tr.is-miss td:nth-child(4) { color: var(--r500); font-weight: 600; }
.kr-reveal-lede {
  margin: 4px 0 10px;
  font-size: 13px;
  color: var(--z800);
  line-height: 1.5;
}
.kr-call {
  font-weight: 700;
  color: var(--z900);
}
.kr-delta {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--z500);
}
.kr-why {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--z600);
  line-height: 1.4;
}
.kr-table-budget td:last-child {
  min-width: 220px;
}
.kr-reveal-foot {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--z700);
  line-height: 1.45;
}
.dq-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--z900);
  background: #fff;
  border: 1px solid var(--z300);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
}
.dq-check:hover:not(:disabled) { border-color: var(--z400); }
.dq-check:disabled { opacity: 0.45; cursor: default; }
.dq-check .btn-icon-sm { width: 12px; height: 12px; }
.dq-picked-n { font-size: 11.5px; color: var(--z500); }
.dq-result { font-size: 12px; font-weight: 600; color: var(--z700); }
/* Inside the prompt line the doc chips are inline text, not the standalone buttons the
   Evidence row used, so they shed the pill and keep only the accent + underline. */
.dq-prompt .field-ev-doc {
  border: 0;
  background: none;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--o700);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.dq-prompt .field-ev-doc:hover { color: var(--o600); }
.discuss-point { margin-top: 10px; }
.dp-lead { font-size: 13px; font-weight: 600; color: var(--z700); }
.dp-options { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dp-opt {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--z800);
  background: var(--z50);
  border: 1px solid var(--z150);
  border-radius: 8px;
  padding: 5px 10px;
}
.discuss-q.is-home .dp-opt { background: #fff; }
.discuss-foot { font-size: 13px; color: var(--z600); font-style: italic; margin-bottom: 20px; }

.helper-box {
  background: var(--z50);
  border: 1px solid var(--z200);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.helper-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 3px 12px;
  font-size: 13px;
  line-height: 1.5;
  padding: 5px 0;
}
.helper-row + .helper-row { border-top: 1px solid var(--z100); }
.helper-amt { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--z800); }
.helper-note { flex: 1 1 100%; font-size: 12px; color: var(--z500); }
.helper-foot { font-size: 12px; color: var(--z600); font-style: italic; margin-top: 8px; margin-bottom: 0; }

/* Kickoff prompt — brief Claude Code once, at the start */
.kickoff {
  border: 1px solid var(--z200);
  border-radius: 12px;
  background: var(--z50);
  padding: 16px 18px;
  margin-bottom: 20px;
}
.kickoff-head { display: flex; align-items: flex-start; gap: 16px; }
.kickoff-txt { flex: 1; min-width: 0; }
.kickoff-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--z900);
}
.kickoff-icon { width: 14px; height: 14px; flex: none; color: var(--o600); }
.kickoff-blurb { font-size: 12.5px; color: var(--z500); line-height: 1.55; margin-top: 4px; max-width: 68ch; }
.kickoff-copy { flex: none; margin-top: 0; display: inline-flex; align-items: center; white-space: nowrap; }
.kickoff-copy.is-copied { background: var(--e600); border-color: var(--e600); }
.kickoff-pre {
  margin-top: 14px;
  max-height: 190px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--z200);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--z600);
  white-space: pre-wrap;
  word-break: break-word;
  user-select: all;
}

.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

.doc-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--z200);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: left;
  width: 100%;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), transform 160ms var(--ease);
}
.doc-card:hover {
  border-color: var(--o300);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}
.doc-card .doc-icon { flex: none; display: flex; color: var(--z400); }
.doc-icon-svg { width: 20px; height: 20px; }
.doc-card { cursor: pointer; }
.doc-txt { flex: 1; min-width: 0; }

/* per-file download — sits inside the card without nesting a button */
.doc-dl {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  color: var(--z400);
  opacity: 0;
  transition: opacity 140ms, color 140ms, background 140ms;
}
.doc-card:hover .doc-dl, .doc-card:focus-within .doc-dl { opacity: 1; }
.doc-dl:hover { color: var(--o600); background: var(--o50); }
.doc-dl:focus-visible { opacity: 1; outline: 2px solid var(--o400); outline-offset: 1px; }
.doc-dl-svg { width: 15px; height: 15px; }
/* touch: no hover, so keep it always visible */
@media (hover: none) { .doc-dl { opacity: 1; } }

.doc-viewer-dl { margin-left: auto; margin-top: 0; display: inline-flex; align-items: center; }
.doc-card:hover .doc-icon { color: var(--o500); }
.doc-card .doc-name { font-weight: 600; font-size: 13.5px; color: var(--z800); word-break: break-word; display: block; }
.doc-card .doc-kind { display: block; font-size: 11px; color: var(--z500); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }

.doc-viewer { background: #fff; border: 1px solid var(--z200); border-radius: 12px; overflow: hidden; }
.doc-viewer-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--z200);
  background: var(--z50);
}
.doc-viewer-name { font-family: var(--mono); font-size: 12.5px; color: var(--z600); flex: 1; word-break: break-all; }
.doc-viewer-body { padding: 24px 28px; max-height: 62vh; overflow: auto; }
.doc-viewer-body .md-table-wrap { overflow: visible; border: none; margin: 0; border-radius: 0; }
.doc-viewer-body th { position: sticky; top: 0; background: var(--z50); box-shadow: 0 1px 0 var(--z200); z-index: 1; }
.doc-viewer-body .csv-note { color: var(--z500); font-size: 12px; margin-top: 12px; font-style: italic; }
.doc-loading { color: var(--z500); font-size: 13px; padding: 30px; text-align: center; }

/* ── Tips — dropdown ladder on the Response page ────────────────────────
   Three tall cards in a grid became three collapsed rows, because they now share
   a page with the form instead of owning a tab. Same shell as .ruling-accordion —
   the house disclosure idiom — with the cost pill riding in the summary so you can
   see the price without opening anything. */

.tips-stack { margin-bottom: 26px; }

.tip-accordion {
  background: var(--z50);
  border: 1px solid var(--z200);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.tip-accordion + .tip-accordion { margin-top: 8px; }
.tip-accordion.is-revealed { background: rgba(255, 247, 237, 0.5); border-color: var(--o200); }
.tip-accordion summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  list-style: none;
  user-select: none;
  transition: background 160ms;
}
.tip-accordion summary:hover { background: var(--z100); }
.tip-accordion.is-revealed summary:hover { background: rgba(255, 237, 213, 0.5); }
.tip-accordion summary::-webkit-details-marker { display: none; }
.tip-accordion summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--z400);
  transition: transform 200ms var(--ease);
}
.tip-accordion[open] summary::after { transform: rotate(180deg); }

.tip-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--z500); }
.tip-cost {
  font-size: 11px; font-weight: 600;
  padding: 2px 9px; border-radius: 999px;
  background: var(--o50); border: 1px solid var(--o200); color: var(--o700);
  white-space: nowrap;
}
.tip-cost.paid { background: var(--o50); border-color: var(--o200); color: var(--o700); }
.tip-cost.free { background: var(--e50); border-color: var(--e200); color: var(--e700); }

.tip-body {
  padding: 2px 16px 14px;
  font-size: 13.5px;
  color: var(--z800);
  line-height: 1.6;
  animation: viewIn 200ms var(--ease) both;
}
.tip-bullets { display: flex; flex-direction: column; gap: 7px; padding-left: 18px; }
.tip-bullets li { list-style: disc; }
.tip-bullets li::marker { color: var(--o400); }

.tip-hidden-lines { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 12px; max-width: 46ch; }
.tip-hidden-lines span {
  display: block; height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, var(--z100), var(--z200));
}
.tip-hidden-lines span:nth-child(2) { width: 85%; }
.tip-hidden-lines span:nth-child(3) { width: 60%; }

.tip-body .btn:hover:not(:disabled) { border-color: var(--o400); color: var(--o600); background: #fff; }

/* ── One-time setup, atop Resources (the 00 hub's two surviving actions) ── */
.setup-block {
  background: var(--o50);
  border: 1px solid var(--o200);
  border-radius: 12px;
  padding: 14px 18px 16px;
  margin-bottom: 22px;
}
.setup-row { display: flex; align-items: flex-start; gap: 14px; padding: 10px 0; }
.setup-row + .setup-row { border-top: 1px solid var(--o200); }
.setup-row-txt { flex: 1; min-width: 0; font-size: 13px; color: var(--z700); line-height: 1.6; }
.setup-row-txt b { color: var(--z900); }
.setup-row .btn { flex: none; white-space: nowrap; }
.setup-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--o700);
  background: #fff;
  border: 1px solid var(--o200);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}
.setup-pre {
  margin-top: 10px;
  background: #fff;
  border: 1px solid var(--z200);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--z700);
  white-space: pre-wrap;
  word-break: break-word;
  user-select: all;
}
.setup-copy { display: inline-flex; align-items: center; }
.setup-copy.is-copied { background: var(--e600); border-color: var(--e600); color: #fff; }

@media (max-width: 640px) {
  .setup-row { flex-direction: column; }
}

/* ── Response panel ──────────────────────────────────────────────── */

.response-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.response-layout.with-objections { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); }
.response-layout.with-doc { grid-template-columns: minmax(0, 1.15fr) minmax(340px, 1fr); }

/* Evidence side pane on Respond — open a named file without leaving the picks. */
.doc-pane {
  background: #fff;
  border: 1px solid var(--z200);
  border-radius: 12px;
  overflow: hidden;
  position: sticky;
  top: 24px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.doc-pane-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--z200);
  background: var(--z50);
  flex: none;
}
.doc-pane-name {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--z700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-pane-dl { margin-top: 0; display: inline-flex; align-items: center; }
.doc-pane-body {
  padding: 18px 20px;
  overflow: auto;
  flex: 1;
  min-height: 0;
}
.doc-pane-body .md-table-wrap { overflow: visible; border: none; margin: 0; border-radius: 0; }
.doc-pane-body th { position: sticky; top: 0; background: var(--z50); box-shadow: 0 1px 0 var(--z200); z-index: 1; }
.doc-pane-body .csv-note { color: var(--z500); font-size: 12px; margin-top: 12px; font-style: italic; }
.field-ev-doc.is-open {
  border-color: var(--o400);
  background: var(--o50);
  color: var(--o700);
}

.response-form { display: flex; flex-direction: column; gap: 20px; }

.field label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--z800);
  margin-bottom: 8px;
}

/* No .char-counter: the per-field count was a progress bar toward minChars, and the
   minimums are gone. #form-total carries the only number left that binds. */

/* The ask, between the label and the box — the points the answer has to cover,
   still on screen at the last keystroke. Borrows .tip-bullets for the list itself. */
.field textarea {
  width: 100%;
  min-height: 130px;
  resize: vertical;
  line-height: 1.6;
  font-size: 15px;
}

.form-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 4px;
}
.form-total { font-size: 12px; color: var(--z400); font-variant-numeric: tabular-nums; }
.form-total.over { color: var(--r600); font-weight: 600; }

.submit-hint { font-size: 12px; color: var(--z400); }

#submit-btn { padding: 12px 20px; }

/* objections side pane */
.objections-pane {
  background: #fff;
  border: 1px solid var(--r200);
  border-radius: 12px;
  padding: 18px 20px;
  position: sticky;
  top: 24px;
  max-height: 80vh;
  overflow-y: auto;
}
.objections-pane .card-label { color: var(--r600); }
.objection-group { padding: 10px 0; border-bottom: 1px solid var(--z100); }
.objection-group:last-child { border-bottom: none; }
.objection-who { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--z900); margin-bottom: 6px; }
.objection-who .who-role { color: var(--z500); font-weight: 400; font-size: 12px; }
.objection-item {
  display: flex; gap: 8px;
  font-size: 13px;
  padding: 4px 0;
  color: var(--z700);
}
.objection-item::before { content: "▸"; color: var(--r500); flex: none; }
.objection-encourage { font-size: 12.5px; color: var(--z500); font-style: italic; margin-top: 5px; }
.objection-satisfied { font-size: 12.5px; color: var(--e700); }

/* ── Cleared step: the one-line receipt ──────────────────────────────────
   This was a green-washed card (--e50 on --e200) carrying a 27px "+675". JJ cut
   both: the wash made the whole panel shout, and the score outranked the two
   things that actually teach — the answer and the gap. So the pass collapses to a
   single quiet line with the score as trailing meta, and the surfaces below it
   (answer, ruling, 10/10) carry the weight. Green is now spent only on the ✓ —
   the rule .gate-banner already followed and this panel had broken. */
.gate-cleared {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 0 2px 14px;
  border-bottom: 1px solid var(--z200);
  margin-bottom: 18px;
}
.gate-cleared .gate-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--e600);
  flex: none;
  align-self: center;
}
.gate-check-svg { width: 11px; height: 11px; color: #fff; stroke-width: 3.5; }
.gate-cleared-txt {
  font-size: 15px;
  font-weight: 600;
  color: var(--z900);
  letter-spacing: -0.01em;
}
.gate-cleared-meta {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--z500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── What your table submitted ───────────────────────────────────────────
   The top surface on a cleared step. Their own words, verbatim, so the 10/10
   list below has something to be compared against. Left rule in zinc, not clay:
   this panel is the table's voice, and the accent belongs to the teaching. */
.answer-back { border-left: 3px solid var(--z300); }
.ab-label { display: flex; align-items: center; gap: 7px; }
.ab-icon { width: 14px; height: 14px; color: var(--z500); }
.ab-item + .ab-item { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--z200); }
.ab-item { margin-top: 12px; }
.ab-q {
  font-size: 12px;
  font-weight: 600;
  color: var(--z500);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
/* Their text, at reading size. It is pasted from Claude Code as often as typed, so
   it arrives as markdown and gets the same .md treatment as the briefing. */
.ab-a { font-size: 14px; line-height: 1.65; color: var(--z800); }
.ab-a > :first-child { margin-top: 0; }
.ab-a > :last-child { margin-bottom: 0; }

/* ── Take It Home — the `closer` on the final step ──────────────────────
   Structurally the kickoff panel (head / txt / copy button / pre), scaled up:
   this is the last surface in the session and the only one that leaves the
   room, so it carries the clay top rule and the warm ground rather than the
   quiet zinc a mid-step aside gets. Unscored either way — the green of the
   gate summary above stays the reward; this is the payoff. */
.closer {
  position: relative;
  margin-top: 24px;
  padding: 22px 24px 24px;
  border: 1px solid var(--o200);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--o50) 0%, #fff 62%);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
/* Clay hairline — the Anthropic starburst, spent once, on the last thing they see. */
.closer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--clay), var(--o400));
}
.closer-head { max-width: 68ch; }
.closer-kicker {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--o700);
}
.closer-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--z900);
}
.closer-icon { width: 17px; height: 17px; flex: none; color: var(--clay); }
.closer-blurb { font-size: 13.5px; color: var(--z600); line-height: 1.6; margin-top: 7px; }

/* The four prompts — numbered, because "one decision, one owner…" is a list
   they are meant to answer, not prose they are meant to skim. */
.closer-prompts {
  list-style: none;
  counter-reset: closer;
  margin-top: 18px;
  display: grid;
  gap: 8px;
}
.closer-prompts li {
  counter-increment: closer;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 14px;
  background: #fff;
  border: 1px solid var(--o100);
  border-radius: 9px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--z800);
}
.closer-prompts li::before {
  content: counter(closer);
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--o100);
  color: var(--o700);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* One row per take-home template. Plural because the promise was plural — a
   "toolkit", not a worksheet. */
.closer-docs { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.closer-doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 9px 12px;
  background: rgba(255, 255, 255, .6);
  border: 1px solid var(--o100);
  border-radius: 9px;
}
.closer-doc-btns { display: flex; align-items: center; gap: 8px; flex: none; }
.closer-doc-name {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--z600);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Advisory pointer — same pre + copy affordance as .kickoff-pre. */
.closer-advisory {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--o100);
}
.closer-adv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.closer-adv-label { font-size: 12.5px; font-weight: 600; color: var(--z700); }
.closer-adv-note { margin-top: 9px; font-size: 11.5px; line-height: 1.5; color: var(--z500); }
.closer-copy { flex: none; display: inline-flex; align-items: center; white-space: nowrap; }
.closer-copy.is-copied { background: var(--e600); border-color: var(--e600); color: #fff; }
.closer-pre {
  margin-top: 10px;
  background: var(--z900);
  border-radius: 9px;
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--o300);
  white-space: pre-wrap;
  word-break: break-word;
  user-select: all;
}
@media (max-width: 640px) {
  .closer { padding: 18px 16px 20px; }
  .closer-adv-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* last board ruling accordion */
.ruling-accordion {
  margin-top: 24px;
  background: var(--z50);
  border: 1px solid var(--z200);
  border-radius: 12px;
  overflow: hidden;
}
.ruling-accordion summary {
  cursor: pointer;
  padding: 13px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--z600);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 160ms, color 160ms;
  user-select: none;
}
.ruling-accordion summary:hover { background: var(--z100); color: var(--z900); }
.ruling-accordion summary::-webkit-details-marker { display: none; }
.ruling-accordion summary::after { content: "▾"; margin-left: auto; transition: transform 200ms var(--ease); color: var(--z400); }
.ruling-accordion[open] summary::after { transform: rotate(180deg); }
.ruling-body { padding: 4px 18px 16px; display: grid; gap: 10px; }

.ruling-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--z200);
  border-radius: 10px;
  font-size: 13px;
  color: var(--z700);
}
.ruling-row.satisfied { border-left: 3px solid var(--e500); }
.ruling-row.objects { border-left: 3px solid var(--r400); }
.ruling-row .monogram { margin-top: 1px; }
.ruling-name { font-weight: 600; color: var(--z900); }
.ruling-role {
  color: var(--z500);
  font-size: 11.5px;
  font-weight: 400;
  font-style: italic;
}
.ruling-row .ruling-quote { margin-top: 4px; color: var(--z600); font-style: italic; }
.ruling-row ul { margin: 6px 0 0 18px; color: var(--z700); }

.score-chip {
  margin-left: auto;
  flex: none;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid;
}
/* A score is a magnitude, not a verdict — 6/10 looks the same either way.
   Valence lives on the verdict tag. (Also: an --e50 chip on an --e50 card
   was invisible.) The good/bad classes stay as hooks. */
.score-chip.good,
.score-chip.bad { color: var(--z900); border-color: var(--z200); background: #fff; }

/* full-pane notice — syncing, or a step id we don't recognize */
.notice-view {
  text-align: center;
  padding: 100px 20px;
  color: var(--z500);
  font-size: 15px;
}
.notice-view .notice-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
  color: var(--z300);
}
.notice-view strong { color: var(--z800); }

/* ═══ BOARDROOM REVIEW THEATER (light modal) ═════════════════════ */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(9, 9, 11, 0.6);
  backdrop-filter: blur(4px);
  animation: overlayIn 250ms var(--ease) both;
  overflow-y: auto;
}
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

.theater {
  width: min(880px, 100%);
  background: #fff;
  border: 1px solid var(--z200);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 32px;
  margin: auto;
  animation: theaterIn 320ms var(--ease) both;
}
@keyframes theaterIn { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: none; } }

.theater-head { text-align: center; margin-bottom: 26px; }
.theater-kicker {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--o600);
}
.theater-head h2 { font-size: 22px; font-weight: 600; margin-top: 8px; letter-spacing: -0.01em; color: var(--z900); }
.theater-meta { color: var(--z500); font-size: 13px; margin-top: 5px; }

/* ── The answers, and what is missing from each ───────────────────────────
   The board used to critique an answer the screen never showed: "Q1 says nothing about
   the 30% outcome" is unarguable if you cannot see Q1. Zinc and quiet, because the
   answers are the reference; the objections nested inside carry the colour.

   Deliberately NOT capped. It was max-height:30vh with its own scroll while it held
   only the submission, which was right then and wrong the moment the objections moved
   in: the feedback ended up trapped in a 200px inner scroller under an outcome banner
   telling the table to address it. .overlay already scrolls, so the modal grows and the
   whole review reads in one pass. */
.theater-sub {
  background: var(--z50);
  border: 1px solid var(--z200);
  border-radius: 12px;
  padding: 14px 16px 12px;
  margin-bottom: 18px;
}
.ts-item + .ts-item { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--z200); }
.ts-item { margin-top: 10px; }
.ts-q {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--z500);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.ts-a { font-size: 13px; line-height: 1.6; color: var(--z800); }
.ts-a > :first-child { margin-top: 0; }
.ts-a > :last-child { margin-bottom: 0; }

/* ── The panel, as a strip ───────────────────────────────────────────────
   Was a grid of cards carrying a score, a verdict tag, a testimony paragraph and a
   one-liner each. All of it went: JJ's call is the answer, then what is missing from
   it, and a card grid put the critique in a second place while the answer sat above
   unchallenged. What survives here is only the wait, because the judge takes 20 to 60
   seconds and a table watching nothing happen assumes it broke. */
.panelist-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  margin-bottom: 20px;
}
.pl-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--z500);
  transition: opacity 250ms var(--ease);
}
.pl-name { font-weight: 600; color: var(--z700); }
/* Ruled: the dots stop and the chip recedes. It has said its piece under the answers. */
.pl-chip.is-done { opacity: 0.45; }
.pl-chip.is-done .pl-wait { display: none; }
.pl-wait { display: inline-flex; align-items: center; }
.pl-wait .dots span {
  display: inline-block; width: 4px; height: 4px; margin-left: 3px;
  border-radius: 50%; background: var(--z400);
  animation: dotWave 1.2s ease-in-out infinite;
}
.pl-wait .dots span:nth-child(2) { animation-delay: 0.15s; }
.pl-wait .dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes dotWave { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ── Objections, filed under the answer they are about ───────────────────
   The whole point of the rebuild: "gives no data behind the first wave" sits beneath
   the answer that gives no data, attributed, so a table can check it instead of
   taking it on trust. */
.ts-obj { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; }
.ts-obj-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--z800);
  background: #fff;
  border: 1px solid var(--z200);
  border-left: 3px solid var(--r400);
  border-radius: 8px;
  padding: 7px 10px;
}
.ts-obj-item.flip-in { animation: verdictFlip 420ms var(--ease) both; }
@keyframes verdictFlip {
  0% { opacity: 0; transform: rotateX(-70deg); transform-origin: top; }
  100% { opacity: 1; transform: none; }
}
/* A satisfied panelist below 10 leaves exactly one note: the upgrade, not a complaint.
   Clay, not red, because nothing is wrong. */
.ts-obj-item.is-upgrade { border-left-color: var(--o400); }
.ts-obj-lead { font-weight: 600; color: var(--o700); }
.ts-obj-txt { flex: 1; min-width: 0; }
.ts-obj-item .monogram { flex: none; margin-top: 1px; }
/* Only appears if a panelist objects to the submission as a whole. */
.ts-general .ts-q { color: var(--z600); }

.pc-testimony {
  border-left: 2px solid var(--z200);
  padding: 2px 0 2px 12px;
  margin: 4px 0 8px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--z700);
}

/* theater outcome */
.theater-outcome { margin-top: 24px; }

/* The board never ruled (review died with a restart, or every panelist errored).
   Neutral zinc on purpose: this is "try again", not a rejection, so it borrows
   .gate-banner's shape with none of its verdict colour. */
.theater-notcounted {
  text-align: center;
  border: 1px dashed var(--z300);
  background: var(--z50);
  border-radius: 14px;
  padding: 22px 24px;
}
.theater-notcounted h3 { font-size: 18px; font-weight: 600; color: var(--z800); }
.theater-notcounted p { margin-top: 6px; color: var(--z600); font-size: 13.5px; max-width: 46ch; margin-left: auto; margin-right: auto; }

.gate-banner {
  text-align: center;
  border: 1px solid var(--z200);
  background: var(--z50);
  border-radius: 14px;
  padding: 26px 24px;
  animation: bannerIn 450ms var(--ease) both;
}
@keyframes bannerIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }

.gate-banner h3 {
  font-size: 22px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--z900);
}
/* The one place green is spent in this panel. */
.gate-banner h3 .gate-check { color: var(--e600); }
.gate-banner .gate-sub { color: var(--z600); font-size: 13.5px; margin-top: 4px; }

.pts-breakdown {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  font-size: 12.5px;
}
.pts-part {
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--z200);
  color: var(--z500);
  white-space: nowrap;
}
.pts-part b { color: var(--z900); font-weight: 600; }
.pts-part.pts-final {
  background: var(--z900);
  border-color: var(--z900);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

/* No amber. It was --a50 on --a200, which made the one surface a table reads on a
   failed round glow like a warning strip, on top of a modal that already carries red
   keylines on every objection. Neutral zinc, matching .gate-banner, so the ruling reads
   as a ruling and the colour stays where the substance is. */
.wants-more {
  text-align: center;
  border: 1px solid var(--z200);
  background: var(--z50);
  border-radius: 14px;
  padding: 22px 24px 24px;
  animation: bannerIn 400ms var(--ease) both;
}
/* Three rounds, and the board ruled without them. Same shape as .wants-more, and
   deliberately the same neutral zinc: this is not a win to celebrate and not a failure to
   scold. The ✓ on the cleared line goes clay rather than green, because the gate is
   cleared but nobody approved anything. */
.moved-on {
  text-align: center;
  border: 1px solid var(--z200);
  background: var(--z50);
  border-radius: 14px;
  padding: 22px 24px 24px;
  animation: bannerIn 400ms var(--ease) both;
}
.moved-on h3 { font-size: 20px; font-weight: 600; color: var(--z900); letter-spacing: 0.02em; }
.moved-on p { color: var(--z600); font-size: 13.5px; margin-top: 6px; max-width: 56ch; margin-inline: auto; }
.gate-cleared.is-movedon .gate-check { background: var(--o500); }

/* The panel, above the ruling: who just spoke. */
.wm-panel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin-bottom: 14px;
}
.wm-member { display: inline-flex; align-items: center; gap: 8px; }
.wm-name { font-size: 13px; font-weight: 600; color: var(--z700); }
.wants-more h3 { font-size: 20px; font-weight: 600; color: var(--z900); letter-spacing: 0.02em; }
.wants-more p { color: var(--z600); font-size: 13.5px; margin-top: 6px; max-width: 56ch; margin-inline: auto; }

.theater-actions { display: flex; justify-content: center; gap: 12px; margin-top: 22px; }

/* ═══ CURVEBALL MESSAGE ══════════════════════════════════════════
   This was a full-screen dark takeover, fired the first time a table reached a
   curveball step. Nothing is sealed now, so there is no arrival to ambush — the
   message prints at the top of the Scenario instead. It keeps the orange alert
   accent so it still reads as an interruption rather than briefing prose, but
   loses the flicker and the fade-in: it sits on screen for minutes now, not
   seconds, and a perpetual pulse on something you're trying to read is noise. */

.curveball-msg {
  border: 1px solid var(--o200);
  border-left: 3px solid var(--o500);
  border-radius: 10px;
  background: var(--o50);
  padding: 18px 22px 16px;
  margin-bottom: 26px;
}

.curveball-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--o600);
}
.curveball-tag-icon { width: 14px; height: 14px; flex: none; }

.curveball-speaker {
  margin-top: 12px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--z600);
}
.curveball-speaker::before { content: "FROM: "; color: var(--z500); font-weight: 500; }

.curveball-msg p { margin-top: 8px; font-size: 14.5px; line-height: 1.65; color: var(--z800); }

/* ═══ LEADERBOARD + THE CATALYST WIRE ════════════════════════════ */

.lb-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}
.lb-toolbar h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; color: var(--z900); }
.lb-toolbar-actions { display: flex; align-items: center; gap: 10px; flex: none; }

#presenter-btn { padding: 8px 16px; font-size: 13px; margin-top: 0; }

/* used by the facilitator table */
.name-cell { font-weight: 600; color: var(--z900); }
.pts-cell { font-weight: 600; color: var(--z900); font-variant-numeric: tabular-nums; }
.lb-empty { text-align: center; color: var(--z500); padding: 34px; font-size: 14px; }

/* ── Zone A · THE CATALYST INDEX (session-time step-line chart) ──── */

.index-card {
  background: #fff;
  border: 1px solid var(--z200);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  padding: 20px 24px 14px;
  margin-bottom: 20px;
}
.index-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.index-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--z500);
}
.index-note { font-size: 11px; color: var(--z400); }

.index-chart { position: relative; min-height: 260px; }
.index-svg { display: block; max-width: 100%; }
.index-svg text { font-family: inherit; font-variant-numeric: tabular-nums; }

.index-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--z400);
  pointer-events: none;
}

.chart-tip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background: #fff;
  border: 1px solid var(--z200);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  padding: 8px 12px;
  min-width: 110px;
  max-width: 220px;
}
.chart-tip .tip-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.chart-tip .tip-swatch { flex: none; width: 12px; height: 3px; border-radius: 2px; }
.chart-tip .tip-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--z600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chart-tip .tip-pts { margin-top: 3px; font-size: 14px; font-weight: 600; color: var(--z900); font-variant-numeric: tabular-nums; }
.chart-tip .tip-time { font-size: 11px; color: var(--z400); font-variant-numeric: tabular-nums; }

/* ── Zone B · standings strip (doubles as the chart legend) ──────── */

.lb-summary { font-size: 13px; color: var(--z500); margin: 0 2px 10px; }

.standings-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.strip-empty { font-size: 14px; color: var(--z500); padding: 6px 2px; }

.team-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid var(--z200);
  border-radius: 12px;
  padding: 8px 14px;
  box-shadow: var(--card-shadow);
}
.team-chip .chip-rank { font-size: 13px; font-weight: 600; color: var(--z500); font-variant-numeric: tabular-nums; }
.team-chip .chip-swatch { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.team-chip .chip-name { font-size: 14px; font-weight: 600; color: var(--z900); max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-chip .chip-you {
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--z600); background: var(--z100); border-radius: 999px; padding: 1px 7px;
}
.team-chip .chip-gates { font-size: 13px; color: var(--z500); font-variant-numeric: tabular-nums; }
.team-chip .chip-pts { font-size: 14px; font-weight: 600; color: var(--z900); font-variant-numeric: tabular-nums; }

.team-chip.is-first { background: var(--o50); border-color: var(--o200); }
.team-chip.is-first .chip-rank { color: var(--o600); }
.team-chip.is-own { border: 1.5px solid var(--z900); padding: 7.5px 13.5px; }

/* ── The Catalyst Wire ──────────────────────────────────────────── */

.wire {
  background: #fff;
  border: 1px solid var(--z200);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 56vh;
}

.wire-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--z200);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--z500);
}
.wire-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--o600);
}
.wire-live .live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--o500);
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.6);
  animation: pulseDot 1.2s ease-in-out infinite;
}

.wire-list { overflow-y: auto; flex: 1; }

.wire-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px 12px 13px;
  border-bottom: 1px solid var(--z100);
  border-left: 3px solid var(--z300);
  align-items: flex-start;
}
.wire-item:last-child { border-bottom: none; }
.wire-item .wire-glyph { color: var(--z400); }
.wire-k-gate_passed, .wire-k-finale { border-left-color: var(--e500); }
.wire-k-gate_passed .wire-glyph, .wire-k-finale .wire-glyph { color: var(--e500); }
.wire-k-gate_failed { border-left-color: var(--r400); }
.wire-k-gate_failed .wire-glyph { color: var(--r400); }
.wire-k-lead_change, .wire-k-override { border-left-color: var(--o400); }
.wire-k-lead_change .wire-glyph, .wire-k-override .wire-glyph { color: var(--o500); }

.wire-item.wire-new { animation: wireIn 500ms var(--ease) both; }
@keyframes wireIn {
  0% { opacity: 0; transform: translateY(-14px); background: var(--o50); }
  55% { background: var(--o50); }
  100% { opacity: 1; transform: none; background: transparent; }
}

.wire-icon { flex: none; display: flex; padding-top: 2px; }
.wire-glyph { width: 16px; height: 16px; }
.wire-body { flex: 1; min-width: 0; }
.wire-headline { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--z900); }
.wire-sub { font-size: 12px; color: var(--z500); margin-top: 3px; line-height: 1.45; }
.wire-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.wire-time { font-size: 11px; color: var(--z400); font-variant-numeric: tabular-nums; white-space: nowrap; }

.ticker-chip {
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.ticker-chip.up { color: var(--e700); background: var(--e50); }
.ticker-chip.down { color: var(--r600); background: var(--r50); }

.wire-empty { padding: 30px 16px; text-align: center; color: var(--z500); font-size: 13px; }

/* ── Presenter mode (sidebar hidden, ~1.35x scale, white bg) ────── */

body.presenter { background: #fff; }
body.presenter #sidebar { display: none; }
body.presenter .main { margin-left: 0; padding: 36px 56px 60px; }
body.presenter .main > * { max-width: none; }

body.presenter .lb-toolbar h2 { font-size: 30px; }
body.presenter .lb-kicker { display: block !important; }

body.presenter .index-card { padding: 26px 30px 18px; }
body.presenter .index-kicker { font-size: 15px; }
body.presenter .index-note { font-size: 14px; }
body.presenter .index-chart { min-height: 340px; }
body.presenter .index-empty { font-size: 19px; }

body.presenter .lb-summary { font-size: 18px; }
body.presenter .standings-strip { gap: 12px; }
body.presenter .team-chip { padding: 11px 18px; gap: 12px; border-radius: 14px; }
body.presenter .team-chip.is-own { padding: 10.5px 17.5px; }
body.presenter .team-chip .chip-rank { font-size: 18px; }
body.presenter .team-chip .chip-swatch { width: 13px; height: 13px; }
body.presenter .team-chip .chip-name { font-size: 19px; }
body.presenter .team-chip .chip-gates { font-size: 17px; }
body.presenter .team-chip .chip-pts { font-size: 19px; }
body.presenter .team-chip .chip-you { font-size: 12px; }

body.presenter .wire-head { font-size: 15px; padding: 16px 20px; }
body.presenter .wire-live { font-size: 13px; }
body.presenter .wire-headline { font-size: 19px; }
body.presenter .wire-sub { font-size: 15px; }
body.presenter .wire-time { font-size: 14px; }
body.presenter .ticker-chip { font-size: 15px; }
body.presenter .wire-glyph { width: 22px; height: 22px; }
body.presenter .wire { max-height: calc(100vh - 560px); min-height: 220px; }

.lb-kicker {
  display: none;
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--o600);
  margin-bottom: 4px;
}

.presenter-exit {
  position: fixed;
  bottom: 18px; right: 18px;
  z-index: 60;
  opacity: 0.35;
  transition: opacity 200ms;
}
.presenter-exit:hover { opacity: 1; }

/* ═══ RESOURCES ══════════════════════════════════════════════════ */

.res-view { animation: viewIn 240ms var(--ease) both; }
/* The closer standing alone on the Take Home tab: no step card above it to
   push off, and a reading width instead of the full pane. */
.takehome-view .closer { margin-top: 0; max-width: 860px; }

.res-head { margin-bottom: 22px; }
.res-kicker {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--z500);
}
.res-head h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; color: var(--z900); margin-top: 4px; }

.res-card {
  background: #fff;
  border: 1px solid var(--z200);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  margin-bottom: 20px;
}
.res-card-head { padding: 20px 24px 14px; }
.res-card-head h3 { font-size: 15px; font-weight: 600; color: var(--z900); }
.res-card-head p { font-size: 13px; color: var(--z500); margin-top: 3px; line-height: 1.55; }

.res-list { border-top: 1px solid var(--z100); }
.res-empty { padding: 18px 24px; font-size: 13px; color: var(--z500); }

.res-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 24px;
  text-align: left;
  border-bottom: 1px solid var(--z100);
  background: #fff;
  transition: background 140ms var(--ease);
}
.res-item:last-child { border-bottom: none; }
button.res-item:hover { background: var(--z50); }
button.res-item:hover .res-chev { color: var(--o500); transform: translateX(2px); }

.res-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.res-title { font-size: 14px; font-weight: 500; color: var(--z900); }
.res-desc { font-size: 13px; color: var(--z500); line-height: 1.5; }

.res-end { flex: none; display: flex; align-items: center; }
.res-chev { width: 16px; height: 16px; color: var(--z400); transition: color 140ms, transform 140ms var(--ease); }

/* Shipped-file rows (Open + Download) rather than doc-viewer rows. */
.res-acts { gap: 8px; }
.res-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--z700);
  text-decoration: none;
  border: 1px solid var(--z300);
  border-radius: 6px;
  padding: 4px 10px;
  background: #fff;
  white-space: nowrap;
}
.res-act:hover { border-color: var(--z400); color: var(--z900); }
.res-act-icon { width: 13px; height: 13px; }

/* ═══ FACILITATOR (light panel; login gate mirrors join) ═════════ */

#facilitator-screen { max-width: 1440px; margin: 0 auto; padding: 28px 36px 60px; }

.fac-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--z200);
  margin-bottom: 22px;
}
.fac-header h1 { font-size: 20px; font-weight: 600; color: var(--z900); }
.fac-header .fac-sub { color: var(--z500); font-size: 12.5px; margin-top: 2px; }
.fac-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Room spend, above the table. Every submission is a paid judge call and the room
   has a ceiling; before this the ceiling was invisible until a table hit a 429
   mid-session. Two meters, glanceable from a standing position at the back. */
.fac-budget {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  margin-bottom: 22px;
}
@media (max-width: 720px) { .fac-budget { grid-template-columns: 1fr; } }

.fac-meter {
  border: 1px solid var(--z200);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--z50);
}
.fac-meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.fac-meter-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--z500); }
.fac-meter-val { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--z900); }

.fac-bar {
  height: 5px;
  border-radius: 3px;
  background: var(--z200);
  overflow: hidden;
  margin: 9px 0 8px;
}
.fac-bar > span { display: block; height: 100%; background: var(--e600); border-radius: 3px; }
.fac-meter-note { font-size: 11.5px; line-height: 1.45; color: var(--z500); }

/* Amber at 70%, red at 90% — early enough to act, since raising the ceiling
   means a redeploy rather than a click. */
.fac-meter.is-warn { border-color: var(--a200); background: var(--a50); }
.fac-meter.is-warn .fac-bar > span { background: #d97706; }
.fac-meter.is-warn .fac-meter-note { color: #92400e; }
.fac-meter.is-crit { border-color: var(--r200); background: var(--r50); }
.fac-meter.is-crit .fac-bar > span { background: var(--r600); }
.fac-meter.is-crit .fac-meter-note { color: #991b1b; font-weight: 500; }

.fac-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 500;
  color: var(--z700);
  padding: 8px 14px;
  border: 1px solid var(--z300);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  user-select: none;
}
.fac-toggle input { accent-color: var(--o500); width: 15px; height: 15px; cursor: pointer; }

.fac-table-wrap {
  background: #fff;
  border: 1px solid var(--z200);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  overflow-x: auto;
}
.fac-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fac-table th {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--z500); background: var(--z50);
  padding: 10px 12px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--z200);
}
.fac-table td { padding: 10px 12px; border-top: 1px solid var(--z100); vertical-align: top; color: var(--z700); }

.fac-step-cell { text-align: center; min-width: 52px; }
.step-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; padding: 3px 7px;
  border-radius: 6px; font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--z200); background: var(--z100); color: var(--z500);
}
.step-chip.st-passed { color: var(--e700); border-color: var(--e200); background: var(--e50); }
.step-chip.st-override { color: var(--o700); border-color: var(--o200); background: var(--o50); }
.step-chip.st-reviewing { color: var(--o600); border-color: var(--o200); background: var(--o50); animation: connBlink 1.1s ease infinite; }
.step-chip.st-unlocked { color: var(--z800); background: #fff; border-color: var(--z300); }
button.step-chip { cursor: pointer; transition: border-color 150ms, color 150ms; }
button.step-chip:hover { border-color: var(--o400); color: var(--o600); }

/* "On current step" pace cell — a neutral readout. It used to go amber past the
   step's suggestedMinutes; the suggestion is now only in the cell's tooltip. */
.fac-elapsed {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--z100);
  border: 1px solid transparent;
  color: var(--z600);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fac-objections { max-width: 320px; font-size: 12px; color: var(--z600); }
.fac-objections li { margin: 2px 0 2px 14px; }
.fac-objections strong { color: var(--z900); }
.fac-muted { color: var(--z500); }
.fac-note { color: var(--z500); font-size: 12px; margin: 12px 2px; }

/* ═══ CONFIRM DIALOG ═════════════════════════════════════════════ */

.confirm-box {
  width: min(440px, 100%);
  margin: auto;
  background: #fff;
  border: 1px solid var(--z200);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 26px 28px;
  animation: theaterIn 250ms var(--ease) both;
}
.confirm-box h3 { font-size: 17px; font-weight: 600; color: var(--z900); margin-bottom: 8px; }
.confirm-box p { color: var(--z500); font-size: 13.5px; }
.confirm-box .confirm-input { width: 100%; margin-top: 14px; font-family: var(--mono); font-size: 13px; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* ═══ TOASTS ═════════════════════════════════════════════════════ */

.toasts {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--z200);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  padding: 12px 18px;
  font-size: 13.5px;
  color: var(--z800);
  max-width: 560px;
  animation: toastIn 280ms var(--ease) both;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.toast.leaving { opacity: 0; transform: translateY(10px); transition: opacity 250ms, transform 250ms; }

.toast.error { border-color: var(--r200); background: var(--r50); color: var(--r700); }
.toast.success { border-color: var(--e200); background: var(--e50); color: var(--e800); }
.toast .toast-action { color: var(--o600); font-weight: 600; white-space: nowrap; }
.toast .toast-action:hover { text-decoration: underline; }
.toast .toast-close { color: var(--z400); font-size: 16px; line-height: 1; padding: 0 2px; }
.toast .toast-close:hover { color: var(--z800); }

/* ═══ CONFETTI ═══════════════════════════════════════════════════ */

.confetti-layer {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  overflow: hidden;
}
.confetti-p {
  position: absolute;
  top: -3vh;
  border-radius: 2px;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(112vh) rotate(660deg); opacity: 0; }
}

/* ═══ REDUCED MOTION / RESPONSIVE ════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .confetti-p { display: none; }
}

@media (max-width: 1200px) {
  .main { padding: 28px 28px 70px; }
}

@media (max-width: 1000px) {
  .response-layout.with-objections { grid-template-columns: 1fr; }
  .response-layout.with-doc { grid-template-columns: 1fr; }
  .doc-pane { position: static; max-height: 60vh; }
  .objections-pane { position: static; max-height: none; }
  /* Reviewers stop being a column and become a row above the objectives. */
  .gate-cols { grid-template-columns: 1fr; gap: 24px; }
  .gate-col-who { border-left: none; padding-left: 0; border-top: 1px solid var(--z100); padding-top: 20px; }
  .setup-step-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .setup-step-head .setup-cta { margin-left: 0; }
  .scenario-split { grid-template-columns: 1fr; gap: 28px; }
  .scenario-board {
    position: static;
    border-top: 1px solid var(--z200);
    padding-top: 20px;
  }
}

@media (max-width: 860px) {
  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--z900);
  }
  .sb-nav { padding: 10px 12px; overflow-x: auto; overflow-y: hidden; }
  .tab-bar-steps { flex-direction: row; gap: 6px; }
  .tab { width: auto; flex: none; padding: 8px 12px; }
  .tab .tab-title { max-width: 140px; }
  .nav-divider { border-top: none; border-left: 1px solid var(--z900); margin: 0 8px; display: inline-block; }
  .sb-nav { display: flex; align-items: center; }
  .tab-util { width: auto; flex: none; }
  .main { margin-left: 0; padding: 24px 16px 60px; }
  .step-card-head { flex-direction: column; gap: 14px; }
  .subtabs { gap: 16px; padding: 0 20px; overflow-x: auto; }
  .subtab-panel { padding: 20px; }
}