/* ========================================================================
   Prospect Simulator — launcher
   The Closer HUD's sibling: same slate instrument panel, same disciplined
   amber reserved for action, same live green. Two things are its own:
   the openness LADDER (the live view's spine) and the paper report card
   (the one artifact that leaves the screen — white, serif, printable).
   System faces only: this page may not make a single network request.
   ======================================================================== */

:root {
  /* Surfaces + type — lifted verbatim from the HUD so the two apps read
     as one product family. */
  --bg:        #0b0d12;
  --panel:     #12151d;
  --panel-2:   #161a24;
  --border:    #242a36;
  --border-hi: #313847;
  --text:      #d4d9e2;
  --text-hi:   #f4f6fa;
  --muted:     #6f7888;
  --faint:     #4c5363;
  --accent:    #f0a93b;    /* amber — action only */
  --accent-hi: #ffc463;
  --live:      #3fdc8a;    /* green — live pulse */
  --alarm:     #ff7a5c;    /* ember — failures, END */
  --alarm-deep:#e0593c;

  /* Heat scale — the HUD's four level colors, reused with intent:
     difficulty (Beginner cool → Challenger hot) and ladder rungs
     (rung 1 locked/red → rung 4 open/green). Nightmare pushes the
     difficulty row one step meaner — past ember into crimson — while
     the ladder keeps its four. */
  --heat-1: #3fd587;
  --heat-2: #bcc94a;
  --heat-3: #ef8a3c;
  --heat-4: #e5563a;
  --heat-5: #d8333f;

  /* The report card is paper even on screen. */
  --paper:     #f5f6f8;
  --ink:       #16181d;
  --ink-soft:  #4a4f59;
  --paper-line:#d9dce2;

  /* Faces — Avenir Next Condensed ships with macOS and plays the role
     Archivo Narrow plays in the HUD. */
  --display: "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --body:    -apple-system, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  --serif:   ui-serif, "New York", Georgia, serif;
  --mono:    ui-monospace, "SF Mono", Menlo, monospace;

  --radius: 12px;
  --card-shadow: 0 10px 26px -12px rgba(0, 0, 0, .85);
}

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

html { color-scheme: dark; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button { cursor: pointer; font-family: inherit; }
button:disabled { cursor: default; }

[hidden] { display: none !important; }

.shell {
  max-width: 960px;
  margin: 0 auto;
  padding: 18px 20px 60px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- Header ----------------------------------------------------------- */

.app-header {
  max-width: 960px;
  margin: 0 auto;
  padding: 18px 20px 2px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 2.4px;
  color: var(--text-hi);
}
.wordmark i { font-style: normal; color: var(--accent); }

.tagline {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---- Two-door nav (unified shell) ---------------------------------------
   One login, two apps. Logged in, the wordmark's DOJO half hands over to
   these doors — same condensed face, baseline-aligned with CLOSER, active
   door in the brand amber the wordmark's DOJO always wore. */

.door-nav { display: flex; gap: 5px; }
.door {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 2.2px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 3px 11px 4px;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.door:hover { color: var(--text-hi); }
.door[aria-current="true"] {
  color: var(--accent-hi);
  background: rgba(240, 169, 59, .08);
  border-color: rgba(240, 169, 59, .3);
}

.spend {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.spend-text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.spend-track {
  width: 120px;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}
.spend-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--live);
  transition: width .4s ease;
}
.spend.warm .spend-fill { background: var(--accent); }
.spend.hot  .spend-fill { background: var(--alarm-deep); }
.spend.hot  .spend-text { color: var(--alarm); }

.who {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--muted);
  text-transform: capitalize;
}
.logout-btn { flex: none; align-self: center; }

/* ---- Landing + login (closerhud.com front door) ------------------------
   Doubles as the landing page until a hero page exists. Same slate desk and
   amber-for-action as the rest of the suite; the one bold move is the FOUR
   LEVELS OF PAIN drawn as a climbing ladder — the app's live spine and the
   whole game — tied to the amber "four" in the headline. Logged out, the thin
   app-header steps aside (body[data-auth="out"]) so this stands alone. */

body[data-auth="out"] .app-header { display: none; }
body[data-auth="out"] .shell { max-width: none; padding: 0; }
body[data-auth="out"] { overflow-x: hidden; }   /* the landing never scrolls sideways */

.landing {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(28px, 5vh, 56px) 24px 56px;
  overflow-x: hidden;   /* belt-and-suspenders: no sideways scroll on any width */
}
.landing-inner {
  width: 100%;
  max-width: 1040px;
  min-width: 0;   /* it's a flex item of .landing — let it shrink to the viewport */
  animation: landing-rise .7s cubic-bezier(.16, .84, .44, 1) both;
}

.landing-brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 2.6px;
  color: var(--text-hi);
  display: flex;
  align-items: center;
  gap: 10px;
}
.landing-brand i { font-style: normal; color: var(--accent); }
.brand-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 0 rgba(63, 220, 138, .5);
  animation: brand-pulse 2.6s ease-out infinite;
}

/* ---- Hero ---- */
.landing-hero { margin-top: clamp(30px, 6vh, 60px); }
.landing-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.landing-headline {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(48px, 9vw, 108px);
  line-height: .94;
  letter-spacing: -0.5px;
  color: var(--text-hi);
}
.landing-headline em {
  font-style: normal;
  color: var(--accent);
}
.landing-lede {
  margin-top: 22px;
  /* cap against the VIEWPORT, not the container, so the line can never run
     off-screen even if an ancestor is momentarily wider */
  max-width: min(46ch, calc(100vw - 48px));
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.6;
  color: var(--muted);
}

/* ---- Body: the levels ladder + the login card ---- */
.landing-body {
  margin-top: clamp(34px, 6vh, 56px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px 56px;
}

/* The signature: four levels of pain as a climbing ladder. A gradient spine
   runs up the left; each level is a node on it. Level 4 (the breaking point,
   the goal) is lit amber, echoing the headline. Levels reveal bottom-to-top
   on load — you climb. */
.levels {
  list-style: none;
  position: relative;
  flex: 0 1 320px;
  min-width: 0;            /* shrink below basis so a narrow row wraps, not overflows */
  align-self: center;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.levels::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  border-radius: 2px;
  /* a continuous rail, dim at the base and lit amber at the peak — the climb */
  background: linear-gradient(to top,
    #454d5e 0%, rgba(240,169,59,.35) 62%, var(--accent) 100%);
}
.level {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  animation: level-climb .55s cubic-bezier(.16,.84,.44,1) both;
}
.level[data-l="1"] { animation-delay: .10s; }
.level[data-l="2"] { animation-delay: .22s; }
.level[data-l="3"] { animation-delay: .34s; }
.level[data-l="4"] { animation-delay: .46s; }
.level-n {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  color: var(--muted);
  background: var(--panel-2);
  border: 1.5px solid var(--border-hi);
  position: relative;
  z-index: 1;
}
.level-name {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .2px;
  color: var(--text);
}
/* the climb: dimmer at the base, full at the top */
.level[data-l="1"] { opacity: .62; }
.level[data-l="2"] { opacity: .74; }
.level[data-l="3"] { opacity: .88; }
.level[data-l="4"] .level-n {
  color: #1a1204;
  background: var(--accent);
  border-color: var(--accent-hi);
  box-shadow: 0 0 22px -4px rgba(240,169,59,.7);
}
.level[data-l="4"] .level-name { color: var(--text-hi); font-weight: 600; }

/* ---- Login card ---- */
.login-card {
  flex: 0 1 384px;
  min-width: 0;            /* shrink below basis so a narrow row wraps, not overflows */
  margin-left: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 26px 26px 28px;
}
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: .5px;
  line-height: 1.1;
  color: var(--text-hi);
}
.login-sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: -8px;
}
.login-btn {
  width: 100%;
  font-size: 15px;
  letter-spacing: 2.2px;
  padding: 12px 20px;
  margin-top: 4px;
}

.landing-foot {
  margin-top: clamp(36px, 7vh, 64px);
  font-size: 12px;
  letter-spacing: .3px;
  color: var(--faint);
}

@keyframes landing-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes level-climb {
  from { opacity: 0; transform: translateY(10px); }
}
@keyframes brand-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(63,220,138,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(63,220,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(63,220,138,0); }
}

@media (max-width: 640px) {
  .landing-body { flex-direction: column; align-items: stretch; gap: 34px; }
  .levels { flex: none; align-self: stretch; }
  .login-card { flex: none; margin-left: 0; width: 100%; }
  .landing-eyebrow { font-size: 11px; letter-spacing: 1.8px; }
  .landing-headline { font-size: clamp(40px, 13vw, 60px); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-inner, .level { animation: none; }
  .brand-dot { animation: none; }
}

/* ---- Banner ----------------------------------------------------------- */

.banner {
  max-width: 960px;
  margin: 12px auto 0;
  width: calc(100% - 40px);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
  border: 1px solid rgba(224, 89, 60, .38);
  background: rgba(224, 89, 60, .1);
  color: var(--alarm);
}
.banner.notice {
  border-color: rgba(63, 220, 138, .32);
  background: rgba(63, 220, 138, .07);
  color: var(--live);
}
.banner span { flex: 1; overflow-wrap: anywhere; user-select: text; }
.banner-x {
  flex: none;
  width: 20px; height: 20px;
  padding: 3px;
  background: none; border: 0; border-radius: 6px;
  color: inherit;
}
.banner-x svg { width: 12px; height: 12px; display: block; }
.banner-x:hover { background: rgba(255, 255, 255, .08); }

/* ---- Cards + labels --------------------------------------------------- */

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.field { display: flex; flex-direction: column; gap: 7px; }
.field.grow { flex: 1; min-width: 0; }

.field-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  color: var(--muted);
}
/* Section labels (the choosers, not the input labels) carry a hairline
   rule to the card's edge — the label owns its band instead of floating. */
.field-label.sect { display: flex; align-items: center; gap: 12px; }
.field-label.sect::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.field-row { display: flex; gap: 12px; align-items: flex-start; }
.field-student { width: 150px; flex: none; }
.field-student input { color: var(--muted); }
.field-student input:focus { color: var(--text); }

input[type="url"], input[type="text"] {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 9px 11px;
  font-family: inherit;
  font-size: 13px;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder { color: var(--faint); }
input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(240, 169, 59, .12);
}
input.invalid { border-color: rgba(224, 89, 60, .55); }
input.invalid:focus { box-shadow: 0 0 0 3px rgba(224, 89, 60, .12); }

.field-error { font-size: 12px; color: var(--alarm); }

/* ---- Drill cards ------------------------------------------------------ */

.drill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 9px;
}
.drill-loading { font-size: 12px; color: var(--faint); }

.drill-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 88px;
  padding: 11px 12px;
  text-align: left;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  transition: border-color .15s ease, background .15s ease;
}
.drill-card:hover { border-color: var(--border-hi); }
.drill-card[aria-checked="true"] {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(240, 169, 59, .09), rgba(240, 169, 59, .02));
}

.drill-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: .4px;
  color: var(--text-hi);
}
.drill-card[aria-checked="true"] .drill-title { color: var(--accent-hi); }

.drill-foot { margin-top: auto; display: flex; align-items: center; gap: 6px; }
.drill-min {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
}
.drill-dojo {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--accent);
  border: 1px solid rgba(240, 169, 59, .4);
  border-radius: 4px;
  padding: 2px 6px;
}

/* ---- Drill select: the full call is the product ------------------------
   Two tiers by decree: the full-length call leads, segment drills are
   practice cuts of it behind a quiet disclosure. The hero's presence is
   scale — the one big display title on this card — not a louder color;
   selection keeps the same amber the small cards use. */

.drill-select { display: flex; flex-direction: column; gap: 10px; }

.hero-card {
  position: relative;         /* anchors the minutes chip in the top corner */
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  padding: 15px 18px 14px;
  text-align: left;
  background: var(--panel-2);
  border: 1px solid var(--border-hi);
  border-radius: 10px;
  color: var(--text);
  transition: border-color .15s ease, background .15s ease;
}
.hero-card:hover { border-color: var(--faint); }
.hero-card[aria-checked="true"] {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(240, 169, 59, .1), rgba(240, 169, 59, .02));
}
.hero-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: .6px;
  color: var(--text-hi);
}
.hero-card[aria-checked="true"] .hero-title { color: var(--accent-hi); }
.hero-sub {
  font-size: 13.5px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--text) 55%, var(--muted));
  max-width: 62ch;
}
/* The minutes chip rides the top corner — the hero keeps no empty foot band. */
.hero-card .drill-foot {
  position: absolute;
  top: 16px;
  right: 16px;
  margin-top: 0;
}

.segments {
  border: 1px solid var(--border);
  border-radius: 10px;
}
.segments-summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 9px;
  list-style: none;             /* the chevron below replaces the UA marker */
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--text);
  transition: color .15s ease;
}
.segments-summary::-webkit-details-marker { display: none; }
.segments-summary:hover { color: var(--text-hi); }
.seg-chevron {
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--muted);
  transition: transform .15s ease;
}
.segments[open] .seg-chevron { transform: rotate(90deg); }
.seg-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.segments .drill-grid {
  padding: 12px;
  border-top: 1px solid var(--border);
}

/* Fallback: an API without full_call reverts to the old flat menu —
   no hero, no summary row, nothing collapsed. */
.segments.flat { border: 0; }
.segments.flat > .segments-summary { display: none; }
.segments.flat .drill-grid { padding: 0; border-top: 0; }

/* ---- Difficulty — the on-ramp ------------------------------------------
   Beginner → Challenger is one connected control: each segment's baseline
   bar steps up in height and heat color, and the bars light left-to-right
   up to the selection — the same climb grammar as the live ladder.
   Nightmare is not the fifth step: it sits apart, smaller, in the crimson
   the training ramp never uses. It's the bonus round for veterans. */

.diff-row {
  display: flex;
  align-items: stretch;
  gap: 14px;
}
.diff-ramp {
  flex: 1;
  min-width: 0;
  display: flex;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.diff-seg {
  --heat: var(--muted);
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 10px 6px 16px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .15s ease, background .15s ease;
}
.diff-seg + .diff-seg { border-left: 1px solid var(--border); }
.diff-seg:first-child { border-radius: 9px 0 0 9px; }
.diff-seg:last-child  { border-radius: 0 9px 9px 0; }
.diff-seg:hover { color: var(--text); }
.diff-seg:focus-visible { z-index: 1; }   /* the outline clears its neighbors */
/* The ramp itself: taller bar = hotter prospect. Dim until the heat
   reaches it (.heat-lit fills every step up to the selection). */
.diff-seg::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--step, 3px);
  background: var(--heat);
  opacity: .28;
  transition: opacity .15s ease;
}
.diff-seg:first-child::after { border-bottom-left-radius: 9px; }
.diff-seg:last-child::after  { border-bottom-right-radius: 9px; }
.diff-seg[data-heat="1"] { --heat: var(--heat-1); --step: 3px; }
.diff-seg[data-heat="2"] { --heat: var(--heat-2); --step: 6px; }
.diff-seg[data-heat="3"] { --heat: var(--heat-3); --step: 9px; }
.diff-seg[data-heat="4"] { --heat: var(--heat-4); --step: 12px; }
.diff-seg.heat-lit::after { opacity: .85; }
.diff-seg[aria-checked="true"] {
  color: var(--text-hi);
  background: color-mix(in srgb, var(--heat) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--heat) 45%, transparent);
}
.diff-seg[aria-checked="true"]::after { opacity: 1; }

.diff-night {
  flex: none;
  padding: 0 18px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--heat-5) 30%, var(--border));
  border-radius: 10px;
  color: var(--muted);
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.diff-night:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--heat-5) 55%, var(--border));
}
.diff-night[aria-checked="true"] {
  color: var(--text-hi);
  background: rgba(216, 51, 63, .12);
  border-color: var(--heat-5);
}

/* One quiet line that names the mode just picked ("Easy — the lay-down"). */
.diff-caption {
  min-height: 18px;
  font-size: 12px;
  color: var(--faint);
}
.diff-caption b { font-weight: 700; color: var(--heat, var(--muted)); }
.diff-caption[data-heat="1"] { --heat: var(--heat-1); }
.diff-caption[data-heat="2"] { --heat: var(--heat-2); }
.diff-caption[data-heat="3"] { --heat: var(--heat-3); }
.diff-caption[data-heat="4"] { --heat: var(--heat-4); }
.diff-caption[data-heat="5"] { --heat: var(--heat-5); }

/* ---- Launch band: difficulty + start share the card's last row --------- */

.launch-band {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  padding-top: 2px;
}
.diff-field { flex: 1; min-width: 0; }
.start-col {
  flex: none;
  max-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Optical alignment: the button's top meets the ramp's, not the label's. */
  padding-top: 23px;
}
.start-btn {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 3px;
  color: #1a1205;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  border: 0;
  border-radius: 10px;
  padding: 13px 30px;
  transition: transform .1s ease, filter .15s ease, opacity .15s ease;
}
.start-btn:hover:not(:disabled)  { filter: brightness(1.08); }
.start-btn:active:not(:disabled) { transform: translateY(1px); }
.start-btn:disabled { opacity: .35; filter: saturate(.55); }
.start-hint { font-size: 12px; line-height: 1.45; color: var(--muted); }

/* ---- Live ------------------------------------------------------------- */

.live-card { gap: 12px; }

.live-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--live);
  flex: none;
  animation: ping 2s ease-out infinite;
}
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(63, 220, 138, .5); }
  70%  { box-shadow: 0 0 0 6px rgba(63, 220, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 220, 138, 0); }
}
.live-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--live);
}
/* Once the run exits, the pulse stops and the label cools — no fake LIVE. */
.live-card.ended .live-dot { animation: none; background: var(--faint); }
.live-card.ended .live-label { color: var(--muted); }
.live-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .5px;
  color: var(--text-hi);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-clock {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex: none;
}
/* Past the drill's target length the clock takes the action amber. */
.live-clock.over { color: var(--accent); font-weight: 700; }
.end-btn {
  margin-left: auto;
  flex: none;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--alarm);
  background: rgba(224, 89, 60, .1);
  border: 1px solid rgba(224, 89, 60, .45);
  border-radius: 8px;
  padding: 8px 16px;
  transition: background .15s ease;
}
.end-btn:hover:not(:disabled) { background: rgba(224, 89, 60, .2); }
.end-btn:disabled { opacity: .4; }

/* One calm line under the END button — never a popup, never an auto-end. */
.time-nudge {
  font-size: 12.5px;
  color: var(--accent);
  text-align: right;
}

.live-meeting {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--text);
  padding-left: 12px;
  border-left: 2px solid var(--border-hi);
}

.end-confirm {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--border-hi);
  border-radius: 10px;
  background: var(--panel-2);
}
.end-confirm-text { flex: 1; min-width: 200px; font-size: 13px; color: var(--text-hi); }
.confirm-yes, .confirm-no {
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  padding: 6px 13px;
}
.confirm-yes { background: rgba(224, 91, 91, .85); color: #fff; }
.confirm-yes:hover { background: rgba(224, 91, 91, 1); }
.confirm-no  { background: rgba(47, 180, 120, .85); color: #fff; }
.confirm-no:hover  { background: rgba(47, 180, 120, 1); }

.end-saving {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--accent);
}
.saving-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: saving-pulse .9s ease-in-out infinite;
}
@keyframes saving-pulse {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1.2); }
}

/* ---- Pre-call discovery notes ------------------------------------------
   The briefing for post-discovery drills — a prospect/serif moment, like
   the report paper and the you're-meeting line. These lines are what
   "your" discovery found: they should read like a closer's call-prep
   notepad, not like the telemetry stream below them. */

.notes-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 15px;
  background: var(--panel-2);
  border: 1px solid var(--border-hi);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
}
.notes-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.notes-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent);
}
.notes-read { font-size: 12px; font-style: italic; color: var(--muted); }
.notes-who {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15.5px;
  color: var(--text-hi);
}
.notes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 22px;
  padding-top: 2px;
}
.note { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.note-wide { grid-column: 1 / -1; }
.note-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--muted);
}
.note-text {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  overflow-wrap: anywhere;
}
.note-attempts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.attempt-what { font-weight: 600; color: var(--text-hi); }
/* A subtle divider between the briefing and the live stream below it. */
#notes:not([hidden]) + .live-body {
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.live-body { display: flex; gap: 14px; align-items: stretch; }

/* The ladder — a four-rung thermometer of how open the prospect is. */
.ladder {
  flex: none;
  width: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.ladder-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--muted);
}
.ladder-rungs {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}
.ladder-rung {
  --rc: var(--faint);
  flex: 1;
  min-height: 34px;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  color: var(--faint);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.ladder-rung[data-r="1"] { --rc: var(--heat-4); }
.ladder-rung[data-r="2"] { --rc: var(--heat-3); }
.ladder-rung[data-r="3"] { --rc: var(--heat-2); }
.ladder-rung[data-r="4"] { --rc: var(--heat-1); }
.ladder-rung.lit {
  color: #0b0d12;
  background: var(--rc);
  border-color: var(--rc);
}
.ladder-rung.now { box-shadow: 0 0 14px color-mix(in srgb, var(--rc) 55%, transparent); }
.ladder-cap {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--faint);
  text-align: center;
}

/* The stream — verdicts are the star; runner progress secondary; the rest
   is quiet monospace. */
.stream {
  flex: 1;
  min-width: 0;
  height: 380px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.v-row {
  --vc: var(--muted);
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--vc) 7%, transparent);
  border-left: 3px solid var(--vc);
  border-radius: 4px;
}
.v-row.v-up   { --vc: var(--live); }
.v-row.v-down { --vc: var(--alarm-deep); }
.v-row.v-hold { --vc: var(--muted); }
.v-chip {
  flex: none;
  min-width: 44px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--vc);
  border: 1px solid color-mix(in srgb, var(--vc) 45%, transparent);
  border-radius: 4px;
  padding: 2px 6px;
}
.v-rung {
  flex: none;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.v-reason { font-size: 13.5px; line-height: 1.45; color: var(--text-hi); overflow-wrap: anywhere; }

.s-line {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--faint);
  overflow-wrap: anywhere;
  user-select: text;
}
.s-line.s-roleplay { color: var(--muted); font-family: var(--body); font-size: 12.5px; }
.s-line.s-roleplay.s-act { color: var(--accent); }        /* "admit the bot" — Blake must act */
.s-line.s-alarm { color: var(--alarm); font-weight: 600; }
.s-line.s-ladder-note { color: var(--faint); font-style: italic; }

.exit-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(224, 89, 60, .38);
  border-radius: 10px;
  background: rgba(224, 89, 60, .06);
}
.exit-title { font-size: 13px; color: var(--alarm); }
.exit-tail {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: text;
  max-height: 220px;
  overflow-y: auto;
}

/* ---- Live HUD (the second door) -----------------------------------------
   The HUD's remote control wears the dojo's own instrument-panel clothes:
   same card, same live-head grammar, same stream. Only the stopped state
   is new — one big door with one plain sentence, nothing to configure. */

.hud-stopped {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 8px 14px;
}
.hud-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: .6px;
  line-height: 1.05;
  color: var(--text-hi);
}
.hud-name i { font-style: normal; color: var(--accent); }
.hud-explain {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 58ch;
  margin-top: -4px;
}
.hud-start-btn { margin-top: 6px; }
.hud-stopped .start-hint { max-width: 52ch; }
/* the early-exit panel reuses the roleplay's alarm clothes; the stopped
   card is align-items:flex-start, so stretch this one block full-width */
.hud-fail { align-self: stretch; }
.hud-fail .back-btn { align-self: flex-start; }

.hud-running { display: flex; flex-direction: column; gap: 12px; }
.hud-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.hud-float-btn { font-size: 15px; letter-spacing: 2.2px; padding: 10px 22px; }
.hud-open-link {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 14px;
  transition: color .15s ease, border-color .15s ease;
}
.hud-open-link:hover { color: var(--text); border-color: var(--border-hi); }
.hud-actions-hint { flex-basis: 100%; font-size: 12px; color: var(--faint); }
.hud-stream { height: 260px; }

/* ---- Sessions --------------------------------------------------------- */

.sessions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ghost-btn {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  transition: color .15s ease, border-color .15s ease;
}
.ghost-btn:hover { color: var(--text); border-color: var(--border-hi); }

.sessions-empty { font-size: 13px; color: var(--faint); padding: 6px 0; }

.session-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 4px;
  border-top: 1px solid var(--border);
}
.session-row:first-child { border-top: 0; }
.session-row.just-added { animation: row-in .6s ease-out; }
@keyframes row-in {
  from { background: rgba(63, 220, 138, .1); }
  to   { background: transparent; }
}

.session-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.session-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.session-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .4px;
  color: var(--text-hi);
}
.diff-chip {
  --heat: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--heat);
  border: 1px solid color-mix(in srgb, var(--heat) 40%, transparent);
  border-radius: 4px;
  padding: 2px 6px;
}
.diff-chip[data-heat="1"] { --heat: var(--heat-1); }
.diff-chip[data-heat="2"] { --heat: var(--heat-2); }
.diff-chip[data-heat="3"] { --heat: var(--heat-3); }
.diff-chip[data-heat="4"] { --heat: var(--heat-4); }
.diff-chip[data-heat="5"] { --heat: var(--heat-5); }

.session-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.session-meta .sep { color: var(--faint); }
.outcome { font-weight: 600; }
.outcome.done   { color: var(--live); }
.outcome.undone { color: var(--accent); }
.stall-chip {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  border: 1px solid rgba(240, 169, 59, .35);
  border-radius: 4px;
  padding: 1px 6px;
}

.session-actions { flex: none; display: flex; align-items: center; gap: 8px; }
.grade-btn {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #1a1205;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  border: 0;
  border-radius: 7px;
  padding: 7px 14px;
  transition: filter .15s ease;
}
.grade-btn:hover:not(:disabled) { filter: brightness(1.08); }
.view-btn {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--live);
  background: rgba(63, 220, 138, .08);
  border: 1px solid rgba(63, 220, 138, .35);
  border-radius: 7px;
  padding: 7px 14px;
  transition: background .15s ease;
}
.view-btn:hover { background: rgba(63, 220, 138, .16); }
.regrade-btn {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 9px;
}
.regrade-btn:hover:not(:disabled) { color: var(--text); border-color: var(--border-hi); }

.grading-note {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--accent);
}
.grading-note .saving-dot { background: var(--accent); }

.grade-fail {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(224, 89, 60, .38);
  border-radius: 8px;
  background: rgba(224, 89, 60, .06);
}
.grade-fail p { font-size: 12.5px; color: var(--alarm); }
.grade-fail pre {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: text;
}
.grade-fail .ghost-btn { align-self: flex-start; }
.session-row.has-fail { flex-wrap: wrap; }

/* ---- Report — paper on the dark desk ---------------------------------- */

.report-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.back-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 7px 13px;
  transition: color .15s ease, border-color .15s ease;
}
.back-btn:hover { color: var(--text); border-color: var(--border-hi); }
.print-btn {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  color: #1a1205;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  border: 0;
  border-radius: 8px;
  padding: 9px 20px;
  transition: filter .15s ease;
}
.print-btn:hover { filter: brightness(1.08); }

.report-paper {
  background: var(--paper);
  color: var(--ink);
  border-radius: 6px;
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .9);
  padding: 44px 52px 36px;
}

.report-head { border-bottom: 2px solid var(--ink); padding-bottom: 16px; margin-bottom: 22px; }
.report-eyebrow {
  font-family: var(--body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.4px;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.report-student {
  font-family: var(--display);
  font-weight: 700;
  font-size: 34px;
  letter-spacing: .5px;
  line-height: 1.05;
  color: var(--ink);
  text-transform: capitalize;
}
.report-meta {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.report-body { font-family: var(--serif); font-size: 15px; line-height: 1.65; }
.report-body h1 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .4px;
  margin: 22px 0 8px;
  color: var(--ink);
}
.report-body h2 {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-top: 1px solid var(--paper-line);
  padding-top: 16px;
  margin: 22px 0 10px;
}
.report-body h1:first-child, .report-body h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.report-body p { margin: 0 0 9px; }
.report-body p.md-indent { margin-left: 22px; }
.report-body ul { margin: 0 0 12px 20px; }
.report-body li { margin-bottom: 7px; }
.report-body strong { font-family: var(--body); font-size: .92em; letter-spacing: .1px; }

.report-foot {
  margin-top: 28px;
  padding-top: 12px;
  border-top: 1px solid var(--paper-line);
  font-size: 11px;
  color: var(--ink-soft);
}

/* ---- Small screens ---------------------------------------------------- */

/* Below ~900px the launch band can't hold the ramp and the button side by
   side — stack them, and the start row goes back to button-plus-hint. */
@media (max-width: 900px) {
  /* Stacked: align-items must flip to stretch or the column children
     shrink-wrap and the ramp collapses to its ellipsized minimum. */
  .launch-band { flex-direction: column; align-items: stretch; gap: 14px; }
  .start-col {
    max-width: none;
    padding-top: 0;
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }
}

@media (max-width: 640px) {
  .field-row { flex-direction: column; }
  .field-student { width: 100%; }
  .diff-row { flex-wrap: wrap; }
  /* The ramp takes the full row; Nightmare drops to its own line below —
     min-width:0 would otherwise shrink the ramp instead of wrapping it. */
  .diff-ramp { flex-basis: 100%; }
  .diff-seg { font-size: 11.5px; letter-spacing: .8px; padding: 9px 2px 15px; }
  .diff-night { flex: 1; padding: 9px 8px; }
  .start-col { flex-direction: column; align-items: stretch; }
  .start-col .start-btn { width: 100%; }
  .notes-grid { grid-template-columns: 1fr; }
  .live-body { flex-direction: column; }
  .ladder { flex-direction: row; width: 100%; align-items: center; }
  .ladder-rungs { flex-direction: row-reverse; }
  .ladder-rung { min-height: 30px; }
  .stream { height: 300px; }
  .session-row { flex-wrap: wrap; }
  .report-paper { padding: 26px 22px; }
  .tagline { display: none; }
}

/* ---- Motion off ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---- Print: the report card, and only the report card ----------------- */

@media print {
  html { color-scheme: light; }
  body { background: #fff; color: #000; font-size: 12.5pt; }
  .app-header, .banner, .report-toolbar { display: none !important; }
  /* Block, not flex: Safari has a history of clipping flex containers
     after the first printed page, and the portal opens in the default
     browser — whichever one that is. */
  .shell { max-width: none; padding: 0; display: block; }
  /* Only the report card ever prints. Its own [hidden] state still wins, so
     printing from another screen yields a blank page, never a broken one. */
  #view-setup, #view-live, #view-sessions, #view-login, #view-hud { display: none !important; }
  .report-paper {
    background: #fff;
    color: #000;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }
  .report-head { border-bottom-color: #000; }
  .report-eyebrow, .report-meta, .report-foot { color: #333; }
  .report-student, .report-body h1, .report-body h2 { color: #000; }
  .report-body h2 { border-top-color: #bbb; }
  .report-foot { border-top-color: #bbb; }
  /* No heading orphaned at a page's foot, no bullet sawn in half. */
  .report-body h1, .report-body h2 { break-after: avoid; }
  .report-body li { break-inside: avoid; }
  a { color: #000; text-decoration: none; }
}

@page { margin: 18mm 16mm; }

/* --- Logins (admin only) -----------------------------------------------------
   Blake's door-list. Same card grammar as the session log above it; the
   credential card is deliberately the loudest thing in the panel, because
   producing that pasteable block is the whole reason the panel exists. */
.new-login { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.new-login .field-row { align-items: flex-end; }
.new-login-btn { padding: 10px 18px; white-space: nowrap; }

.reset-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
.reset-check input { accent-color: var(--accent); }

.cred-card {
  margin-top: 14px;
  /* The live-green family, not amber: this is a thing that succeeded and is
     ready to send, not an action waiting to be taken. */
  border: 1px solid rgba(63, 220, 138, .35);
  border-radius: 10px;
  padding: 12px 14px;
  background: rgba(63, 220, 138, .06);
}
.cred-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.cred-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--live);
}
.cred-body {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  user-select: all;            /* one click selects the whole block to copy */
}

.student-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: 14px;
}
.student-name { font-weight: 600; }
.student-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 7px;
}
.student-remove { margin-left: auto; }