/* =============================================================================
   ProducerPoint — command-center design system (approved Gate 3 direction, Option C)
   -----------------------------------------------------------------------------
   Loaded AFTER styles.css. It replaces the token system and every shell,
   dashboard, training, onboarding, tools, and carrier surface. Views that were
   deliberately preserved (Leads, Call Mode, Applications, Business, Knowledge,
   Follow-Ups) inherit the new tokens and primitives.

   Direction: "operations desk," not "admin dashboard."
     · cool ink-tinted canvas so white surfaces actually lift
     · three distinct surface weights — command / panel / tile
     · one repeated device: the semantic icon tile in every panel header
     · dark mode designed separately, not derived by inversion
   Native system font stack only. No bundled fonts, no CDN, no network.
   ============================================================================= */

/* ------------------------------------------------------------------ tokens -- */
:root {
  --ink:        #0b1a33;
  --ink-2:      #47546b;
  /* CONTRAST, 2026-08-04. Was #7b879b, which measured 3.63:1 on white and
     3.30:1 on --canvas-2 — under the 4.5:1 needed for the small text this token
     is used for. Every muted label in the product reads through it, so one
     token carried most of the legibility findings. Now 5.86:1 on white and
     5.04:1 on --canvas-2, measured against the real token values rather than
     assumed ones. Same hue family; nothing about the design changes except
     that it can be read. */
  --ink-3:      #5a657b;
  --canvas:     #f4f6fb;
  --canvas-2:   #eaeef7;
  --surface:    #ffffff;
  --raised:     #ffffff;
  --line:       rgba(17, 38, 74, .10);
  --line-2:     rgba(17, 38, 74, .16);
  --navy:       #12305c;
  --navy-2:     #0d2447;
  --electric:   #2563eb;
  --electric-2: #1d4ed8;
  --wash:       rgba(37, 99, 235, .08);

  --emerald: #0e9f6e;  --emerald-w: rgba(14, 159, 110, .10);
  --amber:   #b45309;  --amber-w:   rgba(180, 83, 9, .10);
  /* CONTRAST, 2026-08-04 — TEXT variants of the two accent hues.
     The fill colours above are unchanged: at fill scale (a map state, a bar,
     a border) they are correct and approved. As 9–12px TEXT on their own 10%
     wash they measured 3.03:1 (emerald) and 4.38:1 (amber). Rather than shift
     the brand hue everywhere, only the text rules use these darker inks —
     5.47:1 and 6.56:1 — so a chip reads while the palette is untouched. */
  --emerald-ink: #08704c;
  --amber-ink:   #8a3f07;
  --rose:    #be123c;  --rose-w:    rgba(190, 18, 60, .10);
  --violet:  #6d28d9;  --violet-w:  rgba(109, 40, 217, .10);
  --teal:    #0e7490;  --teal-w:    rgba(14, 116, 144, .10);

  /* mapped onto the legacy names so preserved views inherit the reset */
  --bg: var(--canvas);
  --surface-sunken: var(--canvas-2);
  --border: var(--line);
  --border-strong: var(--line-2);
  --text: var(--ink);
  --text-muted: var(--ink-2);
  --text-faint: var(--ink-3);
  --accent: var(--navy);
  --accent-hover: var(--navy-2);
  --accent-soft: var(--wash);
  --positive: var(--emerald); --positive-soft: var(--emerald-w);
  /* CONTRAST, 2026-08-04. --caution is used as TEXT on --caution-soft, so it
     takes the text-safe amber ink rather than the fill hue. --caution-line
     keeps the fill hue: it is a border, not text. */
  --caution: var(--amber-ink); --caution-soft: var(--amber-w);  --caution-line: rgba(180,83,9,.28);
  --danger: var(--rose);      --danger-soft: var(--rose-w);

  --r-lg: 16px;  --r: 12px;  --r-sm: 9px;  --r-xs: 7px;
  --radius: var(--r); --radius-sm: var(--r-sm);

  --e1: 0 1px 2px rgba(11, 26, 51, .05);
  --e2: 0 1px 2px rgba(11, 26, 51, .05), 0 8px 22px -8px rgba(11, 26, 51, .14);
  --e3: 0 2px 4px rgba(11, 26, 51, .06), 0 18px 44px -14px rgba(11, 26, 51, .22);
  --shadow-sm: var(--e1); --shadow-md: var(--e2); --shadow-lg: var(--e3);
  --edge: none;

  /* The prototype banner sits above the shell. The shell must subtract it or
     every route overflows the viewport by exactly the banner height. */
  --banner-h: 37px;

  --h: var(--electric);          /* per-panel semantic hue */
  --h-w: var(--wash);
}

[data-theme="dark"] {
  --ink:      #e7edf9;
  --ink-2:    #97a6c0;
  /* Dark theme, same correction. Was #6c7c98 at 4.28:1 / 4.44:1 — just under.
     Now 5.61:1 / 5.82:1. */
  --ink-3:    #8290ab;
  --canvas:   #070b13;
  --canvas-2: #0c121e;
  --surface:  #0f1626;
  --raised:   #141d30;
  --line:     rgba(150, 178, 224, .13);
  --line-2:   rgba(150, 178, 224, .22);
  --navy:     #1b3f74;
  --navy-2:   #16345f;
  --electric: #5b9cff;
  --electric-2: #7db0ff;
  --wash:     rgba(91, 156, 255, .13);

  --emerald: #34d399;  --emerald-w: rgba(52, 211, 153, .13);
  --amber:   #fbbf24;  --amber-w:   rgba(251, 191, 36, .13);
  /* Dark theme: the fill hues are already light enough to read as text on
     their own dark washes, so the ink variants simply alias them. */
  --emerald-ink: var(--emerald);
  --amber-ink:   var(--amber);
  --rose:    #fb7185;  --rose-w:    rgba(251, 113, 133, .13);
  --violet:  #a78bfa;  --violet-w:  rgba(167, 139, 250, .13);
  --teal:    #22d3ee;  --teal-w:    rgba(34, 211, 238, .13);

  --accent: var(--electric); --accent-hover: var(--electric-2);
  --caution-line: rgba(251,191,36,.30);

  --e1: 0 1px 2px rgba(0, 0, 0, .5);
  --e2: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 26px -10px rgba(0, 0, 0, .7);
  --e3: 0 2px 6px rgba(0, 0, 0, .6), 0 24px 56px -16px rgba(0, 0, 0, .8);
  /* the top edge highlight is what makes dark surfaces read as physical */
  --edge: inset 0 1px 0 rgba(255, 255, 255, .045);
}

html, body { background: var(--canvas); color: var(--ink); }
body { font-size: 15px; }
.tnum, .pstat__n, .pkpi__n, .brief__n { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ======================================================== application shell == */
.app {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  min-height: calc(100vh - var(--banner-h));
  align-items: start;
}

/* ---- navigation rail ---- */
.nav {
  position: sticky; top: 0; height: calc(100vh - var(--banner-h));
  display: flex; flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 0 12px 12px;
  box-shadow: var(--edge);
}
[data-theme="dark"] .nav { background: var(--canvas-2); }

.nav__brand {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 8px 16px;
}
.nav__mark {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  background: linear-gradient(150deg, var(--electric), var(--navy) 78%);
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 4px 12px -3px rgba(37, 99, 235, .5);
}
.nav__mark svg { width: 17px; height: 17px; }
.nav__name { font-size: 14.5px; font-weight: 650; letter-spacing: -.012em; line-height: 1.15; }
.nav__org { font-size: 11px; color: var(--ink-3); letter-spacing: .01em; }

.nav__scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding-bottom: 6px; }
.nav__label {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); padding: 14px 10px 6px;
}
.nav__item {
  position: relative;
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 500; color: var(--ink-2); text-align: left;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__item:hover { background: var(--canvas-2); color: var(--ink); }
.nav__ico {
  width: 26px; height: 26px; border-radius: var(--r-xs); flex: none;
  display: grid; place-items: center; color: var(--ink-3);
  background: transparent; transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__ico svg { width: 15px; height: 15px; }
.nav__item:hover .nav__ico { color: var(--ink-2); }
.nav__item[aria-current="page"] {
  background: var(--wash); color: var(--navy); font-weight: 620;
}
[data-theme="dark"] .nav__item[aria-current="page"] { color: var(--electric-2); }
.nav__item[aria-current="page"] .nav__ico { background: var(--electric); color: #fff; }
.nav__item[aria-current="page"]::before {
  content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--electric);
}
.nav__badge {
  margin-left: auto; font-size: 11px; font-weight: 650; color: var(--ink-2);
  background: var(--canvas-2); border-radius: 20px; padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}
.nav__item[aria-current="page"] .nav__badge { background: rgba(255,255,255,.6); color: var(--navy); }
[data-theme="dark"] .nav__item[aria-current="page"] .nav__badge { background: rgba(255,255,255,.1); color: var(--electric-2); }
.nav__sub {
  display: flex; flex-direction: column; gap: 1px; margin: 2px 0 2px 26px;
  padding-left: 12px; border-left: 1px solid var(--line);
}
.nav__sub button {
  text-align: left; font-size: 13px; color: var(--ink-2); padding: 6px 8px;
  border-radius: var(--r-xs);
}
.nav__sub button:hover { background: var(--canvas-2); color: var(--ink); }
.nav__sub button.is-on { color: var(--navy); font-weight: 620; background: var(--wash); }
[data-theme="dark"] .nav__sub button.is-on { color: var(--electric-2); }

.nav__foot {
  border-top: 1px solid var(--line); padding: 12px 10px 4px; margin-top: 6px;
}
.nav__foot h3 { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.nav__meter { height: 4px; border-radius: 4px; background: var(--canvas-2); margin: 8px 0 10px; overflow: hidden; }
.nav__meter span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--electric), var(--navy)); }
.nav__task {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  font-size: 13px; color: var(--ink-2); padding: 5px 2px; border-radius: 6px;
}
.nav__task:hover { color: var(--ink); }
.nav__task .box {
  width: 15px; height: 15px; flex: none; border-radius: 5px; border: 1.5px solid var(--line-2);
  display: grid; place-items: center; font-size: 10px; color: #fff;
}
.nav__task.is-done .box { background: var(--emerald); border-color: var(--emerald); }
.nav__task.is-done { color: var(--ink-3); text-decoration: line-through; }

/* ---- command bar ---- */
.cmd {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 28px;
  background: color-mix(in srgb, var(--canvas) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
}
.cmd__title { font-size: 20px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; }
.cmd__sub { font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
.cmd__spacer { flex: 1; }
.cmd__search {
  display: flex; align-items: center; gap: 9px;
  width: 340px; max-width: 34vw; height: 38px; padding: 0 10px 0 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--e1), var(--edge);
}
.cmd__search:focus-within { border-color: var(--electric); box-shadow: 0 0 0 3px var(--wash); }
.cmd__search svg { width: 15px; height: 15px; color: var(--ink-3); flex: none; }
.cmd__search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-size: 13.5px; }
.cmd__search input::placeholder { color: var(--ink-3); }
.cmd__kbd {
  font-size: 10.5px; font-weight: 600; color: var(--ink-3); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 5px; flex: none;
}
.cmd__pill {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
  border-radius: 20px; font-size: 12px; font-weight: 600;
  background: var(--emerald-w); color: var(--emerald-ink);
}
.cmd__pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.themebtn {
  display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 5px;
  border-radius: 20px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--e1), var(--edge);
}
.themebtn i {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  color: var(--ink-3); transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.themebtn i svg { width: 14px; height: 14px; }
.themebtn i.is-on { background: var(--electric); color: #fff; }
.who { display: flex; align-items: center; gap: 9px; }
.who__av {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700; color: #fff;
  background: linear-gradient(150deg, var(--navy), var(--electric) 130%);
  box-shadow: var(--e1);
}
.who__n { font-size: 13px; font-weight: 620; line-height: 1.2; }
.who__r { font-size: 11px; color: var(--ink-3); }

.page { padding: 22px 28px 56px; max-width: 1560px; }

/* ============================================================ panel system == */
.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--e2), var(--edge);
  display: flex; flex-direction: column; min-width: 0;
}
.panel--flat { box-shadow: var(--edge); background: var(--canvas-2); border-color: transparent; }
.panel__hd {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px;
}
.panel__tile {
  width: 30px; height: 30px; border-radius: var(--r-xs); flex: none;
  display: grid; place-items: center; background: var(--h-w); color: var(--h);
}
.panel__tile svg { width: 16px; height: 16px; }
.panel__title { font-size: 14.5px; font-weight: 640; letter-spacing: -.01em; }
.panel__meta { margin-left: auto; font-size: 11.5px; color: var(--ink-3); text-align: right; }
.panel__bd { padding: 0 16px 14px; flex: 1; min-width: 0; }
.panel__ft {
  border-top: 1px solid var(--line); padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.panel--blue   { --h: var(--electric); --h-w: var(--wash); }
.panel--amber  { --h: var(--amber);   --h-w: var(--amber-w); }
.panel--violet { --h: var(--violet);  --h-w: var(--violet-w); }
.panel--teal   { --h: var(--teal);    --h-w: var(--teal-w); }
.panel--rose   { --h: var(--rose);    --h-w: var(--rose-w); }
.panel--green  { --h: var(--emerald); --h-w: var(--emerald-w); }
.panel--navy   { --h: var(--navy);    --h-w: var(--wash); }
[data-theme="dark"] .panel--navy { --h: var(--electric); }

.eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3);
}

/* link-ish footer action */
.act {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--navy); border-radius: 6px;
}
[data-theme="dark"] .act { color: var(--electric); }
.act:hover { color: var(--electric-2); }
.act svg { width: 13px; height: 13px; }

/* ================================================================ dashboard = */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.g2 { grid-column: span 2; } .g3 { grid-column: span 3; } .g4 { grid-column: span 4; }
.g5 { grid-column: span 5; } .g6 { grid-column: span 6; } .g7 { grid-column: span 7; }
.g8 { grid-column: span 8; } .g12 { grid-column: span 12; }
/* WHAT TO DO NEXT, SIZED SO ROW 1 CLOSES. The founder's requirement is that the
   full-width dialing band sits DIRECTLY beneath the blue primary. The band is
   `.g12`, so it always starts a new row - the only way it can land two rows
   down is if row 1 fails to pack to twelve. Hero 4 + next 6 + leads 2 = 12
   here, and the two responsive blocks below restate it for their own spans. */
.d-next { grid-column: span 6; }

/* ---- the command briefing: the one dominant surface ---- */
.brief {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background:
    radial-gradient(120% 110% at 8% -10%, #2b5ba8 0%, rgba(43,91,168,0) 58%),
    linear-gradient(158deg, #16386b 0%, #0d2145 62%, #0a1a38 100%);
  color: #eaf0fb; padding: 20px 22px;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 44px -20px rgba(13, 33, 69, .75), inset 0 1px 0 rgba(255,255,255,.09);
}
[data-theme="dark"] .brief {
  background:
    radial-gradient(120% 110% at 8% -10%, #2f66bd 0%, rgba(47,102,189,0) 55%),
    linear-gradient(158deg, #16304f 0%, #0d1c33 60%, #0a1424 100%);
  box-shadow: 0 0 0 1px rgba(120,165,255,.14), 0 26px 60px -26px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.07);
}
/* fine diagonal mesh — the light source in the panel */
.brief::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(58deg, rgba(255,255,255,.05) 0 1px, rgba(255,255,255,0) 1px 13px);
  mask-image: radial-gradient(90% 80% at 85% 110%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(90% 80% at 85% 110%, #000 0%, transparent 72%);
}
.brief > * { position: relative; z-index: 1; }
.brief__eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8fb2e8; }
.brief__title { font-size: 23px; font-weight: 660; letter-spacing: -.022em; margin-top: 7px; }
.brief__copy { font-size: 13px; color: #b3c8e8; margin-top: 6px; line-height: 1.5; max-width: 34ch; }
.brief__counts { display: flex; gap: 22px; margin: 16px 0 14px; }
.brief__n { font-size: 27px; font-weight: 640; letter-spacing: -.03em; line-height: 1; }
.brief__nl { font-size: 11px; color: #8fb2e8; margin-top: 4px; }
.brief__next {
  border-top: 1px solid rgba(255,255,255,.14); padding-top: 13px; margin-top: auto;
}
.brief__lead { font-size: 15.5px; font-weight: 620; letter-spacing: -.012em; margin-top: 5px; }
.brief__rec { font-size: 12.5px; color: #cfe0f7; margin-top: 5px; }
.brief__why { font-size: 11.5px; color: #8fb2e8; margin-top: 3px; }
.brief__actions { display: flex; gap: 9px; margin-top: 15px; flex-wrap: wrap; }
.bbtn {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 17px;
  border-radius: 10px; font-size: 13.5px; font-weight: 640; letter-spacing: -.005em;
  background: #fff; color: #0d2145; box-shadow: 0 6px 16px -6px rgba(0,0,0,.5);
  transition: transform var(--dur) var(--ease);
}
.bbtn:hover { transform: translateY(-1px); }
.bbtn svg { width: 14px; height: 14px; }
.bbtn--ghost { background: rgba(255,255,255,.10); color: #eaf0fb; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.bbtn--ghost:hover { background: rgba(255,255,255,.16); }
.bbtn[disabled] { opacity: .5; pointer-events: none; }
.brief__warn {
  display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; padding: 10px 12px;
  border-radius: 10px; background: rgba(251,191,36,.14); box-shadow: inset 0 0 0 1px rgba(251,191,36,.3);
  font-size: 12.5px; color: #f7dfae; line-height: 1.45;
}
.brief__warn svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: #fbbf24; }

/* ---- metric readouts ---- */
.stats { display: flex; gap: 4px; }
.pstat { flex: 1; min-width: 0; }
.pstat__n { font-size: 30px; font-weight: 640; letter-spacing: -.032em; line-height: 1.05; }
.pstat__l { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.pstat__d { font-size: 11px; font-weight: 650; margin-top: 3px; }
.pstat--up .pstat__d { color: var(--emerald); }
.pstat--warn .pstat__n { color: var(--amber); }
.pstat--alert .pstat__n { color: var(--rose); }

.pkpi { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 2px; }
.pkpi__c { padding: 2px 10px 0; border-left: 1px solid var(--line); }
.pkpi__c:first-child { border-left: none; padding-left: 0; }
.pkpi__l { font-size: 11.5px; color: var(--ink-3); }
.pkpi__n { font-size: 26px; font-weight: 640; letter-spacing: -.03em; line-height: 1.15; margin-top: 2px; }
.pkpi svg { display: block; width: 100%; height: 30px; margin-top: 6px; overflow: visible; }

/* status quad used by Applications */
.quad { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quad__c {
  display: flex; align-items: center; gap: 10px; padding: 10px 11px;
  border-radius: var(--r-sm); background: var(--canvas-2);
}
[data-theme="dark"] .quad__c { background: var(--raised); box-shadow: var(--edge); }
.quad__i { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: none; background: var(--h-w); color: var(--h); }
.quad__i svg { width: 14px; height: 14px; }
.quad__l { font-size: 11.5px; color: var(--ink-3); line-height: 1.2; }
.quad__n { font-size: 19px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* hour distribution microchart */
.hours { display: flex; align-items: flex-end; gap: 3px; height: 46px; margin: 10px 0 4px; }
.hours i { flex: 1; border-radius: 3px 3px 1px 1px; background: var(--canvas-2); min-height: 3px; }
.hours i.is-on { background: var(--amber); }
[data-theme="dark"] .hours i:not(.is-on) { background: var(--raised); }
.hours__ax { display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-3); }

/* row list used across panels */
.prows { display: flex; flex-direction: column; }
.prow {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 9px 8px; margin: 0 -8px; border-radius: var(--r-sm);
  border-top: 1px solid var(--line);
}
.prows > .prow:first-child { border-top: none; }
.prow:hover { background: var(--canvas-2); }
.prow__t { font-size: 13.5px; font-weight: 570; letter-spacing: -.008em; display: block; }
.prow__s { font-size: 11.5px; color: var(--ink-3); display: block; margin-top: 1px; }
.prow__r { margin-left: auto; text-align: right; flex: none; }
.prow__time { font-size: 12px; font-weight: 620; font-variant-numeric: tabular-nums; color: var(--ink-2); flex: none; width: 62px; }

.pchip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 620;
  padding: 2px 8px; border-radius: 20px; background: var(--canvas-2); color: var(--ink-2);
  white-space: nowrap;
}
.pchip--blue { background: var(--wash); color: var(--electric); }
.pchip--amber { background: var(--amber-w); color: var(--amber-ink); }
.pchip--green { background: var(--emerald-w); color: var(--emerald-ink); }
.pchip--rose { background: var(--rose-w); color: var(--rose); }
.pchip--violet { background: var(--violet-w); color: var(--violet); }
.pchip--teal { background: var(--teal-w); color: var(--teal); }
.pchip--ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-3); }

/* ---- quick access tiles ---- */
.qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qtile {
  display: flex; align-items: center; gap: 10px; text-align: left; width: 100%;
  padding: 9px 10px; border-radius: var(--r-sm);
  background: var(--canvas-2); border: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
[data-theme="dark"] .qtile { background: var(--raised); box-shadow: var(--edge); }
.qtile:hover { border-color: var(--line-2); transform: translateY(-1px); background: var(--surface); }
.qtile__m {
  width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #fff; letter-spacing: -.02em;
}
.qtile__n { font-size: 13px; font-weight: 600; letter-spacing: -.008em; display: block; line-height: 1.25; }
.qtile__c { font-size: 10.5px; color: var(--ink-3); display: block; }
.qtile__x { margin-left: auto; color: var(--ink-3); flex: none; }
.qtile__x svg { width: 13px; height: 13px; display: block; }

/* ---- licensed states map ---- */
.usmap { width: 100%; height: auto; max-height: 300px; display: block; }
[data-theme="dark"] .legend { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 4px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); }
.legend i { width: 9px; height: 9px; border-radius: 3px; display: block; }

/* =============================================================== video cards = */
/* 268px, not 232px. At 232 a card was 237px wide and its footer needed three
   rows to hold four controls; at 268 the same footer fits Mark watched, Save
   and Edit on one line with the shelf picker beneath. Fewer, wider cards is
   also the denser reading — four posters per row instead of five. */
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px; }
.vgrid--2 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.vcard {
  display: flex; flex-direction: column; text-align: left; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--e1), var(--edge); overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.vcard:hover { transform: translateY(-2px); box-shadow: var(--e3), var(--edge); }
.vcard__poster {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--p1), var(--p2));
}
/* the ghosted module numeral is the poster's subject, not decoration */
.vcard__ghost {
  position: absolute; right: -6px; bottom: -30px; font-size: 108px; font-weight: 800;
  color: rgba(255,255,255,.13); letter-spacing: -.06em; line-height: 1; pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.vcard__mesh {
  position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: repeating-linear-gradient(62deg, rgba(255,255,255,.06) 0 1px, rgba(255,255,255,0) 1px 11px);
}
.vcard__play {
  position: relative; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.94); display: grid; place-items: center;
  box-shadow: 0 8px 22px -6px rgba(0,0,0,.55);
  transition: transform var(--dur) var(--ease);
}
.vcard:hover .vcard__play { transform: scale(1.08); }
.vcard__play svg { width: 17px; height: 17px; color: #0d2145; margin-left: 2px; }
.vcard__yt {
  position: absolute; top: 9px; left: 10px; font-size: 9.5px; font-weight: 800;
  letter-spacing: .1em; color: rgba(255,255,255,.72);
}
.vcard__len {
  position: absolute; bottom: 9px; right: 10px; font-size: 10.5px; font-weight: 600;
  color: rgba(255,255,255,.85); background: rgba(0,0,0,.35); border-radius: 5px; padding: 1px 6px;
}
.vcard__body { padding: 11px 13px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.vcard__coll { font-size: 10.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--h, var(--electric)); }
.vcard__t { font-size: 13.5px; font-weight: 620; letter-spacing: -.012em; line-height: 1.3; }
.vcard__m { font-size: 11.5px; color: var(--ink-3); }
/* The producer's own note about a resource. Two lines on the card; the whole
   thing is in the edit dialog. */
.vcard__d {
  font-size: 11.5px; color: var(--ink-3); line-height: 1.45;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
/* DETERMINISTIC ROWS, EACH WITH AN ESCAPE VALVE.
   The first version of this grid gave the footer three columns on one row —
   `minmax(0,1fr) auto auto` — and then a section `<select>` joined it as a
   third child. Two `auto` tracks sized to their own content overflowed a 206px
   card, the `1fr` track collapsed to zero, and `.check` rendered ON TOP of the
   button beside it. That is the overlap the founder photographed.
   Two columns now, and anything that wants width takes a row of its own. */
/* WRAPPING, NOT COLUMNS — because a column width is a bet on how long a word
   is, and the bet loses in Spanish. The grid version gave "Mark watched" a
   `minmax(0, 1fr)` track: 106px in a 245px card. "Marcar visto" is 118px and
   `.check` does not wrap, so it overflowed its own track by twelve pixels and
   landed on top of Save — the founder's original overlap, reproduced exactly,
   in the other language. Measured at 1440 with sections present.

   A wrapping flex row cannot do that. When the two groups fit they share a
   line; when they do not, the Save/Edit pair takes its own. Nothing is ever
   asked to be narrower than its text. */
.vcard__ft {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  justify-content: space-between;
  margin-top: auto; padding-top: 9px;
}
.vcard__ft .vbtn { flex: 1 1 100%; justify-content: center; }
/* The shelf picker is full-width prose, not a button — it never contests the
   line with one. */
.vcard__ft .vcard__sec { flex: 1 1 100%; }
.vcard__ft .check { flex: 0 1 auto; min-width: 0; }
/* Save and Edit travel together, so the line reads "did I watch it · keep it ·
   fix it" left to right. `space-between` on the row, rather than `margin-left:
   auto` here, is what makes the wrapped case read properly: sharing a line the
   two groups sit at opposite edges, and on separate lines each starts at the
   left instead of one of them hanging alone off the right. */
.vcard__ftend { display: flex; align-items: center; gap: 8px; }
.vbtn {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
  border-radius: 8px; font-size: 12.5px; font-weight: 620;
  background: var(--navy); color: #fff;
}
[data-theme="dark"] .vbtn { background: var(--electric); color: #06101f; }
.vbtn:hover { background: var(--navy-2); }
[data-theme="dark"] .vbtn:hover { background: var(--electric-2); }
.vbtn svg { width: 13px; height: 13px; }
.vbtn--ghost { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.vbtn--ghost:hover { background: var(--canvas-2); color: var(--ink); }
.iconbtn {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2); flex: none;
}
.iconbtn:hover { color: var(--ink); background: var(--canvas-2); }
.iconbtn.is-on { color: var(--amber); background: var(--amber-w); box-shadow: inset 0 0 0 1px var(--caution-line); }
.iconbtn svg { width: 14px; height: 14px; }

/* poster palettes, keyed to collection so a module is recognisable at a glance */
.p-welcome { --p1:#1e3a8a; --p2:#0b1f45; }
.p-mindset { --p1:#5b21b6; --p2:#1e1b4b; }
.p-script  { --p1:#0f766e; --p2:#0a2540; }
.p-past    { --p1:#334155; --p2:#0f172a; }
.p-ext     { --p1:#9f1239; --p2:#3b0a1f; }
.p-blocked { --p1:#3f3f46; --p2:#18181b; }
.p-obj     { --p1:#9a3412; --p2:#2a1206; }

/* ================================================================ tab strip = */
.ptabs {
  display: flex; gap: 2px; overflow-x: auto; padding: 3px;
  background: var(--canvas-2); border-radius: 11px; margin-bottom: 18px;
}
[data-theme="dark"] .ptabs { background: var(--surface); box-shadow: var(--edge); }
.ptab {
  padding: 7px 13px; border-radius: 8px; font-size: 13px; font-weight: 570;
  color: var(--ink-2); white-space: nowrap; flex: none;
}
.ptab:hover { color: var(--ink); }
.ptab.is-on { background: var(--surface); color: var(--navy); font-weight: 640; box-shadow: var(--e1); }
[data-theme="dark"] .ptab.is-on { background: var(--raised); color: var(--electric-2); }
.ptab__n { font-size: 11px; color: var(--ink-3); margin-left: 5px; font-variant-numeric: tabular-nums; }

.sechd { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; }
.sechd:first-child { margin-top: 0; }
.sechd h2 { font-size: 16px; font-weight: 650; letter-spacing: -.018em; }
.sechd p { font-size: 12.5px; color: var(--ink-3); }
.sechd .act { margin-left: auto; }

/* ================================================================ hero band = */
.phero {
  position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 22px 24px;
  background:
    radial-gradient(110% 130% at 92% -20%, rgba(91,156,255,.30) 0%, rgba(91,156,255,0) 60%),
    linear-gradient(140deg, #16386b, #0b1c3a);
  color: #eaf0fb; margin-bottom: 20px;
  box-shadow: 0 18px 40px -22px rgba(13,33,69,.7), inset 0 1px 0 rgba(255,255,255,.09);
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.phero__eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8fb2e8; }
.phero h1 { font-size: 24px; font-weight: 660; letter-spacing: -.024em; margin-top: 6px; }
/* 78ch, matching `.step__d`. At 62ch a 153-character sentence wrapped to three
   lines inside a 527px cap while 900px of band stood empty beside it. */
.phero p { font-size: 13.5px; color: #b3c8e8; margin-top: 6px; max-width: 78ch; line-height: 1.5; }
.phero__side { margin-left: auto; display: flex; gap: 26px; }
.phero__n { font-size: 26px; font-weight: 640; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.phero__nl { font-size: 11px; color: #8fb2e8; margin-top: 3px; }

/* =============================================================== step cards = */
.steps { display: flex; flex-direction: column; gap: 14px; }
.step {
  display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--e1), var(--edge); padding: 16px;
}
.step--blocked { background: var(--canvas-2); box-shadow: var(--edge); }
.step--done { border-color: rgba(14,159,110,.35); }
.step__n {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  font-size: 17px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  background: var(--wash); color: var(--navy);
}
[data-theme="dark"] .step__n { color: var(--electric-2); }
.step--done .step__n { background: var(--emerald); color: #fff; }
.step--blocked .step__n { background: var(--canvas); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.step__hd { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.step__t { font-size: 15.5px; font-weight: 640; letter-spacing: -.016em; }
.step__d { font-size: 13px; color: var(--ink-2); margin-top: 5px; line-height: 1.5; max-width: 78ch; }
.step__actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
/* `min-height`, not `height`: a fixed 30px meant a label that wrapped spilled
   out of the button instead of growing it. `white-space: nowrap` keeps it from
   wrapping in the first place. */
.check {
  display: inline-flex; align-items: center; gap: 8px; min-height: 30px;
  white-space: nowrap; padding: 0 11px 0 8px;
  border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.check:hover { background: var(--canvas-2); color: var(--ink); }
.check .box {
  width: 16px; height: 16px; border-radius: 5px; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1.5px var(--line-2); font-size: 10px; color: #fff;
}
.check.is-on { color: var(--emerald); box-shadow: inset 0 0 0 1px rgba(14,159,110,.4); background: var(--emerald-w); }
/* Saved is not completion, so it does not borrow the emerald tick treatment. */
.check--save { padding: 0 11px; }
.check--save svg { width: 14px; height: 14px; }
.check--save.is-on { color: var(--amber); background: var(--amber-w); box-shadow: inset 0 0 0 1px var(--caution-line); }
.check--save.is-on svg { fill: currentColor; }
.check.is-on .box { background: var(--emerald); box-shadow: none; }

/* =========================================================== spreadsheet UI = */
.sheetwrap {
  border: 1px solid var(--line); border-radius: var(--r); overflow: auto; background: var(--surface);
  box-shadow: var(--e1), var(--edge); max-height: 62vh;
}
.sheet { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.sheet th {
  position: sticky; top: 0; z-index: 2; text-align: left; white-space: nowrap;
  background: var(--canvas-2); color: var(--ink-2); font-size: 11px; font-weight: 700;
  letter-spacing: .045em; text-transform: uppercase; padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}
[data-theme="dark"] .sheet th { background: var(--raised); }
.sheet td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sheet tbody tr:hover td { background: var(--canvas-2); }
.sheet td.num { font-variant-numeric: tabular-nums; }
.sheet .muted { color: var(--ink-3); }
.sheet__blocked { background: repeating-linear-gradient(45deg, var(--rose-w) 0 6px, transparent 6px 12px); }

.pempty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 44px 24px; gap: 10px;
}
.pempty__i {
  width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
  background: var(--h-w); color: var(--h);
}
.pempty__i svg { width: 24px; height: 24px; }
.pempty h3 { font-size: 15.5px; font-weight: 640; letter-spacing: -.015em; }
.pempty p { font-size: 13px; color: var(--ink-2); max-width: 56ch; line-height: 1.55; }
.pempty__actions { display: flex; gap: 9px; margin-top: 6px; flex-wrap: wrap; justify-content: center; }

/* toolbar above tables */
.tbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pfield {
  display: flex; flex-direction: row; align-items: center; gap: 8px; height: 34px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface);
  box-shadow: var(--e1), var(--edge);
}
.pfield:focus-within { border-color: var(--electric); box-shadow: 0 0 0 3px var(--wash); }
.pfield svg { width: 14px; height: 14px; color: var(--ink-3); flex: none; }
.pfield input, .pfield select { border: none; outline: none; background: none; font-size: 13px; min-width: 0; }
.pfield select { cursor: pointer; }

.btn {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px;
  border-radius: 9px; font-size: 13px; font-weight: 600; letter-spacing: -.005em;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  box-shadow: var(--e1), var(--edge);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--canvas-2); border-color: var(--line-2); }
.btn svg { width: 14px; height: 14px; }
.btn--primary { background: var(--navy); color: #fff; border-color: transparent; }
.btn--primary:hover { background: var(--navy-2); }
[data-theme="dark"] .btn--primary { background: var(--electric); color: #06101f; }
[data-theme="dark"] .btn--primary:hover { background: var(--electric-2); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn--sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 7px; }

/* ------------------------------------------------------------ CSV importer -- */
.imp { display: flex; flex-direction: column; gap: 16px; }
.impsteps { display: flex; gap: 6px; flex-wrap: wrap; }
.impstep {
  display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600;
  color: var(--ink-3); padding: 5px 11px; border-radius: 20px; background: var(--canvas-2);
}
.impstep.is-on { background: var(--wash); color: var(--navy); }
[data-theme="dark"] .impstep.is-on { color: var(--electric-2); }
.impstep.is-done { background: var(--emerald-w); color: var(--emerald); }
.impstep b { font-variant-numeric: tabular-nums; }

.drop {
  border: 1.5px dashed var(--line-2); border-radius: var(--r); padding: 30px 22px;
  text-align: center; background: var(--canvas-2);
}
[data-theme="dark"] .drop { background: var(--surface); }
.drop h4 { font-size: 14.5px; font-weight: 640; }
.drop p { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.55; max-width: 62ch; margin-inline: auto; }
.drop__actions { display: flex; gap: 9px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }

.maprow {
  display: grid; grid-template-columns: minmax(0,1fr) 26px minmax(0,1fr) auto; gap: 12px;
  align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 13px;
}
.maprow:last-child { border-bottom: none; }
.maprow--blocked { background: var(--rose-w); }
.maprow__arrow { color: var(--ink-3); text-align: center; }
.maprow code {
  font-size: 12px; background: var(--canvas-2); border-radius: 5px; padding: 2px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
[data-theme="dark"] .maprow code { background: var(--raised); }

.note {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-sm);
  font-size: 12.5px; line-height: 1.55; background: var(--canvas-2); color: var(--ink-2);
}
[data-theme="dark"] .note { background: var(--raised); box-shadow: var(--edge); }
.note svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.note--warn { background: var(--amber-w); color: var(--amber); }
.note--block { background: var(--rose-w); color: var(--rose); }
.note--info { background: var(--wash); color: var(--navy); }
[data-theme="dark"] .note--info { color: var(--electric-2); }
.note b { font-weight: 700; }

.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.summary__c { padding: 12px 14px; border-radius: var(--r-sm); background: var(--canvas-2); }
[data-theme="dark"] .summary__c { background: var(--raised); box-shadow: var(--edge); }
.summary__n { font-size: 23px; font-weight: 650; letter-spacing: -.028em; font-variant-numeric: tabular-nums; }
.summary__l { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* ============================================================= responsive ==== */
@media (max-width: 1400px) {
  .g4 { grid-column: span 5; }
  .g2 { grid-column: span 3; }
  .g3 { grid-column: span 4; }
  /* 5 + 4 + 3 = 12. Before this the row summed to thirteen, Leads Ready wrapped
     alone onto a row that was 9/12 empty, and the band rendered beneath THAT. */
  .d-next { grid-column: span 4; }
  .brief__counts { gap: 16px; }
}
@media (max-width: 1320px) {
  .app { grid-template-columns: 216px minmax(0, 1fr); }
  .page { padding: 20px 20px 48px; }
  .cmd { padding: 12px 20px; }
  .cmd__search { width: 230px; }
  /* Controlled reflow — each panel keeps a deliberate width instead of
     collapsing to full-bleed rows. */
  .d-brief   { grid-column: span 5; }
  .d-leads   { grid-column: span 3; }
  .d-next    { grid-column: span 4; }
  .d-follow  { grid-column: span 4; }
  .d-apps    { grid-column: span 4; }
  /* 8 + 12 = 20, so these two never shared a row anyway — Quick Access simply
     sat at 8/12 with four empty columns beside it for the whole 1081–1320
     band. Both take the full row instead. */
  .d-quick   { grid-column: span 12; }
  .d-biz     { grid-column: span 12; }
  .d-lic     { grid-column: span 5; }
  .d-train   { grid-column: span 3; }
  .d-carrier { grid-column: span 4; }
  .g6 { grid-column: span 12; }
}
@media (max-width: 1080px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .nav { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--line); }
  /* EVERYTHING BUT THE BAND GOES FULL WIDTH. The list form of this rule named
     five span classes and missed `.g4`, and it named no `.d-` class at all - so
     on a phone the blue Open Call Workspace hero and Next Up sat side by side
     at 5/12 each, with two of twelve columns blank. The founder's primary card
     was the narrowest thing on the screen. Stated as a rule rather than a list
     so a new panel class cannot reintroduce it. */
  .grid > *:not(.g12) { grid-column: span 12; }
  .phero__side { margin-left: 0; }
}

/* ------------------------------------------------------------ global search */
.searchwrap { position: relative; }
.searchpop {
  position: absolute; top: calc(100% + 6px); right: 0; width: 380px; max-width: 60vw; z-index: 60;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--e3), var(--edge); padding: 5px; max-height: 60vh; overflow: auto;
}
.searchpop__r {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 9px; border-radius: 8px;
}
.searchpop__r:hover { background: var(--canvas-2); }
.searchpop__r .prow__t { display: block; }
.iconbtn { position: relative; }
.iconbtn__dot {
  position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--rose); box-shadow: 0 0 0 2px var(--canvas);
}

/* --------------------------------------- preserved views inherit the reset -- */
/* Their page headers become section headers so the command bar is the only H1. */
.page-head { margin-bottom: 16px; }
.page-head .page-title { font-size: 17px; font-weight: 650; letter-spacing: -.018em; }
.page-head .page-sub { font-size: 12.5px; color: var(--ink-3); }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--e1), var(--edge);
}
.pill, .tag { font-variant-numeric: tabular-nums; }

/* prototype banner — slimmer, part of the system rather than a black bar */
.proto-banner {
  background: linear-gradient(90deg, #0b1a33, #14315e);
  color: #cddcf3; font-size: 11.5px; letter-spacing: .01em;
  padding: 6px 20px; display: flex; align-items: center; gap: 10px;
}
.proto-banner strong { color: #fff; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 10.5px; }
.proto-banner__dot { width: 6px; height: 6px; border-radius: 50%; background: #5b9cff; }
.proto-banner__text { color: #9db6da; }
.proto-banner__reset {
  margin-left: auto; font-size: 11.5px; font-weight: 600; color: #eaf0fb;
  border-radius: 20px; padding: 3px 11px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.proto-banner__reset:hover { background: rgba(255,255,255,.12); }

/* modal sizing for the importer */
.modal--wide { max-width: 940px; }
.modal__body { max-height: 68vh; overflow: auto; }

/* ---------------------------------------------------------------- fixes ---- */
/* Stacked <span> children need block display or they run together on one line. */
.nav__name, .nav__org, .who__n, .who__r,
.qtile__n, .qtile__c, .quad__l, .quad__n { display: block; }

/* Row 1 panels share the briefing's height — distribute their content rather
   than letting it pile at the top and leave a void. */
.panel__bd--spread { display: flex; flex-direction: column; justify-content: space-evenly; gap: 12px; }
.panel__hd { flex-wrap: wrap; }
.panel__meta { max-width: 52%; }

/* The briefing carries a lot of required content; keep it compact. */
.brief { padding: 18px 20px; }
.brief__title { font-size: 21px; margin-top: 5px; }
.brief__copy { font-size: 12.5px; margin-top: 5px; }
.brief__counts { margin: 13px 0 12px; }
.brief__n { font-size: 25px; }
.brief__next { padding-top: 11px; }
.brief__actions { margin-top: 12px; }
.bbtn { height: 37px; font-size: 13px; }

/* Unlicensed fill is a touch darker so the white state borders read at size. */
/* (`.vcard__ft` is a grid now - the wrap override it used to carry here is
   what produced the ragged bottom edge.) */
.vgrid { align-items: start; }
.pfield { flex-wrap: nowrap; white-space: nowrap; }
.pfield input[type="search"], .pfield input[type="text"] { width: 170px; }
.pfield select { max-width: 150px; }
.tbar .pfield { flex: none; }

/* ===================================================== in-platform player === */
/* The panel wears the same collection gradient as the card poster it came from,
   so card and player read as one object at two sizes. That is the only new
   visual idea here — everything else is the existing system. */
body.has-video { overflow: hidden; }
.vp {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center; padding: 24px;
  background: rgba(6, 11, 21, .74);
  backdrop-filter: saturate(1.2) blur(6px);
  -webkit-backdrop-filter: saturate(1.2) blur(6px);
  animation: vp-in var(--dur) var(--ease);
}
@keyframes vp-in { from { opacity: 0 } to { opacity: 1 } }
.vp__panel {
  width: min(1080px, 94vw); max-height: 92vh;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7), var(--edge);
}
[data-theme="dark"] .vp__panel { box-shadow: 0 0 0 1px var(--line), 0 40px 90px -30px #000, var(--edge); }

/* the plinth — collection gradient, same palette tokens the poster uses */
.vp__hd {
  position: relative; display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 18px; color: #fff;
  background: linear-gradient(135deg, var(--p1), var(--p2));
}
.vp__hd::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(62deg, rgba(255,255,255,.06) 0 1px, rgba(255,255,255,0) 1px 11px);
}
.vp__hd > * { position: relative; z-index: 1; }
.vp__path {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.vp__title { font-size: 18px; font-weight: 640; letter-spacing: -.018em; margin-top: 3px; line-height: 1.25; }
.vp__close {
  margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  transition: background var(--dur) var(--ease);
}
.vp__close:hover { background: rgba(255,255,255,.26); }
.vp__close svg { width: 16px; height: 16px; }

.vp__frame { position: relative; background: #000; aspect-ratio: 16 / 9; min-height: 0; flex: 1; }
.vp__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.vp__ft {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface);
}

@media (max-height: 720px) {
  .vp { padding: 12px; }
  .vp__panel { max-height: 96vh; }
  .vp__title { font-size: 16px; }
}
@media (max-width: 720px) {
  .vp__ft { gap: 8px; }
  .vp__ft .act { margin-left: 0; }
}

/* card affordance: say where the video plays before it is clicked */
.vcard__hint {
  position: absolute; bottom: 9px; left: 10px; font-size: 10.5px; font-weight: 600;
  color: rgba(255,255,255,.85); background: rgba(0,0,0,.35); border-radius: 5px; padding: 1px 6px;
}

/* ============================================================ brand system == */
/* TYPOGRAPHY — founder decision, 2026-08-04.
 *
 *   Space Grotesk   the ProducerPoint wordmark and limited brand headings
 *   Inter           navigation, controls, scripts, tables, and body copy
 *   BLANKA          RETIRED from ProducerPoint
 *
 * Both faces are SIL Open Font License and are served LOCALLY. That is not a
 * preference: the Content-Security-Policy is `default-src 'none'` with
 * `font-src 'self'`, so a webfont from a CDN is not merely discouraged here —
 * it is blocked, and would silently fall back with no error anyone would see.
 *
 * `font-display: swap` means a missing or slow font never blocks the interface,
 * and each fallback stack is chosen to hold similar metrics so a producer
 * reading a script mid-call never sees the layout jump under them.
 */
@font-face {
  font-family: 'Inter';
  src: url('assets/brand/Inter-Variable.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
/* Latin Extended, loaded only when a glyph needs it. Spanish is a standing
   requirement, not a feature request: ñ á é í ó ú ü ¿ ¡ must render in the
   brand face, not in a fallback that shifts the metrics mid-word. */
@font-face {
  font-family: 'Inter';
  src: url('assets/brand/Inter-Variable-latin-ext.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/brand/SpaceGrotesk-Variable.woff2') format('woff2-variations');
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/brand/SpaceGrotesk-Variable-latin-ext.woff2') format('woff2-variations');
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.wordmark {
  font-family: var(--font-brand);
  letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
}


/* ---- sidebar identity: the nameplate ---- */
/* Read as a single machined object: a capsule holding a plaque and a wordmark,
   joined by a hairline seam. The seam is the one deliberate flourish — it makes
   the badge read as assembled rather than arranged, and it encodes the brand
   hierarchy (parent mark | product name) in a single line. */
.brand {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin: 16px 0 14px; padding: 8px 12px 8px 8px;
  border-radius: 15px; text-align: left;
  background: linear-gradient(176deg, var(--surface), var(--canvas-2));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    inset 0 0 0 1px var(--line),
    0 1px 2px rgba(11, 26, 51, .05),
    0 6px 16px -10px rgba(11, 26, 51, .28);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
[data-theme="dark"] .brand {
  background: linear-gradient(176deg, #131c2e, #0d1421);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 0 0 1px rgba(150, 178, 224, .13),
    0 8px 20px -12px #000;
}
.brand:hover { transform: translateY(-1px); }
.brand:hover .brand__plaque { box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 4px 12px -3px rgba(11,26,51,.55); }

/* The plaque is a BEZEL around the founder's supplied mark, not a replacement
   for it: rim light, inner edge, soft drop. The light-mode file carries its own
   dark tile so it fills the bezel; the dark-mode knockout sits on the navy
   field the bezel provides. */
.brand__plaque {
  width: 36px; height: 36px; border-radius: 12px; flex: none;
  display: grid; place-items: center; overflow: hidden; position: relative;
  background: linear-gradient(158deg, #22315a 0%, #0b1a33 78%);
  box-shadow:
    inset 0 0 0 1px rgba(11, 26, 51, .55),
    0 3px 9px -3px rgba(11, 26, 51, .5);
  transition: box-shadow var(--dur) var(--ease);
}
/* the rim light sits above the image, so the bezel reads as glass over metal */
.brand__plaque::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), inset 0 -6px 10px -8px rgba(0, 0, 0, .6);
}
[data-theme="dark"] .brand__plaque {
  background: linear-gradient(158deg, #2b4d8a 0%, #0a1526 78%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 3px 10px -3px #000;
}
[data-theme="dark"] .brand__plaque::after {
  box-shadow: inset 0 1px 0 rgba(140, 185, 255, .40), inset 0 -6px 10px -8px rgba(0, 0, 0, .7);
}
.brand__plaque img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the knockout is transparent art — inset it so it reads on the navy field */
[data-theme="dark"] .brand__plaque img { object-fit: contain; padding: 4px; }
.brand__plaque svg { width: 20px; height: 20px; color: #fff; }

/* the seam */
.brand__seam {
  width: 1px; align-self: stretch; margin: 3px 0; flex: none;
  background: linear-gradient(180deg, transparent, var(--line-2) 22%, var(--line-2) 78%, transparent);
}

.brand__txt { display: flex; flex-direction: column; min-width: 0; }
.brand__name {
  display: block; font-size: 11.5px; line-height: 1.15; color: var(--ink);
  letter-spacing: .1em; transition: color var(--dur) var(--ease);
}
[data-theme="dark"] .brand__name { color: #fff; }
.brand:hover .brand__name { color: var(--electric); }
.brand__by {
  display: block; font-size: 9.5px; letter-spacing: .015em; color: var(--ink-3);
  margin-top: 3px; white-space: nowrap;
}

/* one branded eyebrow per surface — never more */
.beyebrow {
  font-size: 10.5px; color: var(--ink-3); letter-spacing: .16em;
  display: flex; align-items: center; gap: 8px;
}
.beyebrow::after { content: ""; height: 1px; flex: 1; background: var(--line); max-width: 120px; }
.brief .beyebrow, .phero .beyebrow { color: #8fb2e8; }
.brief .beyebrow::after, .phero .beyebrow::after { background: rgba(255,255,255,.22); }

.nav__legal {
  font-size: 10px; color: var(--ink-3); padding: 10px 10px 0; line-height: 1.5;
  border-top: 1px solid var(--line); margin-top: 10px;
}
.nav__legal button { font-size: 10px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.nav__legal button:hover { color: var(--electric); }

/* ---- launch state (visual only — no authentication) ---- */
.launch {
  min-height: 100vh; display: grid; place-items: center; padding: 40px 24px;
  background:
    radial-gradient(90% 70% at 50% -10%, rgba(37,99,235,.28) 0%, rgba(37,99,235,0) 60%),
    linear-gradient(170deg, #0d1f3d 0%, #070d1a 60%, #05080f 100%);
  color: #eaf0fb; text-align: center;
}
.launch__in { max-width: 560px; display: flex; flex-direction: column; align-items: center; }
.launch__mark {
  width: 92px; height: 92px; border-radius: 24px; overflow: hidden; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(150,178,224,.20), 0 24px 50px -20px rgba(0,0,0,.9);
}
.launch__mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.launch__mark svg { width: 54px; height: 54px; color: #fff; }
.launch__name { font-size: 34px; margin-top: 26px; line-height: 1; }
.launch__by { font-size: 13px; color: #8fb2e8; margin-top: 12px; }
.launch__rule { width: 52px; height: 1px; background: rgba(255,255,255,.22); margin: 22px 0; }
.launch__copy { font-size: 14px; color: #b3c8e8; line-height: 1.6; max-width: 46ch; }
.launch__foot { margin-top: 30px; font-size: 11px; color: #6d86ad; line-height: 1.7; }
@media (max-width: 560px) { .launch__name { font-size: 26px; } }

/* Call Companion identity — compact, left of the script label, never inside the
   script surface itself. */
.cm__brand { display: flex; align-items: center; gap: 9px; }
.cm__brandmark {
  width: 22px; height: 22px; border-radius: 7px; flex: none; display: grid; place-items: center;
  background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.cm__brandmark svg { width: 13px; height: 13px; color: #fff; }
.cm__mode.wordmark { font-size: 12.5px; letter-spacing: .12em; }
/* the branded eyebrow sits above the page title without adding height */
.cmd .beyebrow { margin-bottom: 3px; }

/* ================================================= lead field insertion ==== */
/* Inserted lead data must never be mistaken for source wording. Every insert is
   drawn on a tinted chip with a provenance colour; blanks stay visibly blank. */
.mf {
  display: inline; border-radius: 5px; padding: 1px 5px; margin: 0 1px;
  font-weight: 620; text-decoration: none; line-height: inherit;
  box-shadow: inset 0 0 0 1px transparent;
}
button.mf { cursor: pointer; font-size: inherit; font-family: inherit; }
button.mf:hover { box-shadow: inset 0 0 0 1px currentColor; }
.mf--imported   { background: var(--wash);      color: var(--electric); }
.mf--confirmed  { background: var(--emerald-w); color: var(--emerald); }
.mf--collected  { background: var(--violet-w);  color: var(--violet); }
.mf--unverified { background: var(--amber-w);   color: var(--amber); }
.mf--workspace  { background: var(--canvas-2);  color: var(--ink-2); }
.mf--missing {
  background: transparent; color: var(--amber); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--caution-line);
}
.mf--unmapped { background: transparent; color: var(--ink-3); letter-spacing: .04em; }
.mf__ask { font-weight: 500; font-size: .82em; opacity: .85; margin-left: 4px; }
/* on the light script surface inside the soft-dark call shell */
.cm .script__text .mf, .cm .srcblock__close .mf { font-size: inherit; }

.mflegend { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.mflegend span { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-3); }
.mflegend i { width: 9px; height: 9px; border-radius: 3px; display: block; }

/* =================================================== halftone licensing map = */
/* Dot-matrix treatment echoing the halftone world map inside the Nova Point
   mark. Colour comes from the same status system as before; highlighted states
   get a soft bloom so they read as illuminated rather than flat. */
.usmap--dots { width: 100%; height: auto; max-height: 320px; display: block; overflow: visible; }
.usmap__hit { fill: transparent; stroke: none; cursor: pointer; }
.usmap__dots { pointer-events: none; transition: opacity var(--dur) var(--ease); }
.usmap__dots circle { transition: fill var(--dur) var(--ease), r var(--dur) var(--ease); }

/* not applied — quiet grey stipple, no bloom */
.usmap__st.s-none .usmap__dots circle { fill: #aab7cf; }
[data-theme="dark"] .usmap__st.s-none .usmap__dots circle { fill: #2e3a55; }

/* highlighted states carry the bloom */
.usmap__st.s-resident .usmap__dots,
.usmap__st.s-active   .usmap__dots,
.usmap__st.s-applied  .usmap__dots,
.usmap__st.s-pending  .usmap__dots,
.usmap__st.s-expiring .usmap__dots { filter: url(#npGlow); }

.usmap__st.s-resident .usmap__dots circle { fill: #12305c; }
[data-theme="dark"] .usmap__st.s-resident .usmap__dots circle { fill: #6aa4ff; }
.usmap__st.s-active   .usmap__dots circle { fill: var(--emerald); }
/* APPLIED AND PENDING ARE ONE COLOUR, because the legend has one entry for
   them and the licensing table cannot store `applied` at all — its check
   constraint allows active / pending / expired / not_appointed / unknown. A
   pending state was drawn amber against a legend that only explained violet,
   so the two licences the founder had in flight appeared as an unexplained
   colour beside a count of zero. The Today card counts them together; the map
   now draws them together. Their chips and detail still say Pending. */
.usmap__st.s-applied  .usmap__dots circle,
.usmap__st.s-pending  .usmap__dots circle { fill: var(--violet); }
.usmap__st.s-expiring .usmap__dots circle { fill: var(--rose); }

.usmap__st:hover .usmap__dots circle { r: 2.3; }
.usmap__st.s-none:hover .usmap__dots circle { fill: var(--ink-3); }
.usmap__st.is-sel .usmap__dots circle { r: 2.5; }
.usmap__st:focus-visible { outline: none; }
.usmap__st:focus-visible .usmap__dots circle { r: 2.5; }

/* a very slow bloom pulse — only on states that are actually lit */
@keyframes npPulse { 0%, 100% { opacity: .92 } 50% { opacity: 1 } }
.usmap__st.s-resident .usmap__dots,
.usmap__st.s-active   .usmap__dots,
.usmap__st.s-applied  .usmap__dots { animation: npPulse 5.5s ease-in-out infinite; }
.usmap__st.s-active   .usmap__dots { animation-delay: -1.8s; }
.usmap__st.s-applied  .usmap__dots { animation-delay: -3.6s; }
@media (prefers-reduced-motion: reduce) {
  .usmap__st .usmap__dots { animation: none !important; }
}

/* soft shadow behind the map panel */
.panel--teal { position: relative; }

/* ============================================== daily virtual-office band === */
/* A band, not a card: this is the ritual before dialing, so it sits between the
   briefing row and the operational cards and reads as an action, not a readout.
   Contrast comes from the button, so it never competes with the navy briefing. */
.officebar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--e2), var(--edge);
  position: relative; overflow: hidden;
}
.officebar::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--electric), var(--navy));
}
.officebar__i {
  width: 42px; height: 42px; border-radius: 13px; flex: none; display: grid; place-items: center;
  background: var(--wash); color: var(--electric);
}
.officebar__i svg { width: 20px; height: 20px; }
.officebar__txt { min-width: 0; flex: 1; }
.officebar__t {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 15.5px; font-weight: 640; letter-spacing: -.016em;
}
.officebar__s { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.5; }
.officebar__act { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-left: auto; }
@media (max-width: 1080px) { .officebar__act { margin-left: 0; } }

/* Quick Access at a third-width: the name needs the room, so the category moves
   to the tooltip and the tile loses its second line. */
.qgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.qtile--sm { padding: 7px 8px; gap: 8px; align-items: center; }
.qtile--sm .qtile__m { width: 24px; height: 24px; border-radius: 7px; font-size: 10px; }
.qtile--sm .qtile__n {
  font-size: 11.5px; font-weight: 600; line-height: 1.25; min-width: 0; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.qtile--sm .qtile__x svg { width: 11px; height: 11px; }
.qtile__flag {
  flex: none; width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center;
  font-size: 9px; font-weight: 800; background: var(--amber-w); color: var(--amber-ink);
}
@media (max-width: 1320px) { .qgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================================================== profile & settings ===== */
.avatar {
  border-radius: 11px; display: grid; place-items: center; flex: none;
  font-weight: 700; color: #fff; letter-spacing: -.02em; overflow: hidden;
  background: linear-gradient(150deg, var(--navy), var(--electric) 130%);
  box-shadow: var(--e1);
}
.avatar--img { object-fit: cover; }

.who {
  display: flex; align-items: center; gap: 9px; padding: 4px 8px 4px 4px;
  border-radius: 12px; text-align: left;
  transition: background var(--dur) var(--ease);
}
.who:hover { background: var(--canvas-2); }
.who[aria-expanded="true"] { background: var(--canvas-2); }
.who__txt { display: flex; flex-direction: column; min-width: 0; }
.who__chev { color: var(--ink-3); display: grid; place-items: center; }
.who__chev svg { width: 13px; height: 13px; transform: rotate(90deg); }

.pmenu__wrap { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.pmenu {
  position: absolute; top: 62px; right: 24px; width: 274px; pointer-events: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--e3), var(--edge); padding: 6px; overflow: hidden;
}
.pmenu__hd { display: flex; align-items: center; gap: 11px; padding: 10px 10px 12px; }
.pmenu__n { font-size: 14px; font-weight: 640; letter-spacing: -.012em; }
.pmenu__r { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.pmenu__grp { border-top: 1px solid var(--line); padding-top: 5px; }
.pmenu__ft { border-top: 1px solid var(--line); margin-top: 5px; padding-top: 5px; }
.pmenu__i {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 9px; font-size: 13.5px; color: var(--ink-2);
}
.pmenu__i:hover, .pmenu__i:focus-visible { background: var(--canvas-2); color: var(--ink); outline: none; }
.pmenu__i:focus-visible { box-shadow: inset 0 0 0 2px var(--electric); }
.pmenu__ico { width: 22px; display: grid; place-items: center; color: var(--ink-3); flex: none; }
.pmenu__ico svg { width: 15px; height: 15px; }
.pmenu__i:hover .pmenu__ico { color: var(--electric); }

.srows { display: flex; flex-direction: column; }
.srow {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 13px 0; border-top: 1px solid var(--line);
}
.srows > .srow:first-child { border-top: none; }
.srow__t { font-size: 14px; font-weight: 570; letter-spacing: -.008em; }
.srow__s { font-size: 12px; color: var(--ink-3); margin-top: 2px; line-height: 1.5; max-width: 68ch; }
.srow__c { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.srow__v { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sinput { height: 34px; width: 240px; max-width: 46vw; }

.swtch {
  width: 40px; height: 23px; border-radius: 20px; background: var(--line-2); position: relative; flex: none;
  transition: background var(--dur) var(--ease);
}
.swtch.is-on { background: var(--emerald); }
.swtch__k {
  position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform var(--dur) var(--ease);
}
.swtch.is-on .swtch__k { transform: translateX(17px); }

.segs { display: inline-flex; padding: 3px; background: var(--canvas-2); border-radius: 10px; gap: 2px; }
[data-theme="dark"] .segs { background: var(--raised); box-shadow: var(--edge); }
.seg {
  padding: 5px 11px; border-radius: 7px; font-size: 12.5px; font-weight: 570; color: var(--ink-2);
  white-space: nowrap;
}
.seg:hover { color: var(--ink); }
.seg.is-on { background: var(--surface); color: var(--navy); font-weight: 640; box-shadow: var(--e1); }
[data-theme="dark"] .seg.is-on { background: var(--canvas-2); color: var(--electric-2); }

/* an explicit reduced-motion preference, independent of the OS setting */
[data-motion="reduce"] *, [data-motion="reduce"] *::before, [data-motion="reduce"] *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}
@media (max-width: 1080px) { .pmenu { right: 12px; } }

/* --------------------------------------------- collapsible nav groups ----- */
.nav__group { display: flex; flex-direction: column; }
.nav__item--parent { padding-right: 6px; }
.nav__caret {
  margin-left: auto; display: grid; place-items: center; color: var(--ink-3);
  transition: transform var(--dur) var(--ease);
}
.nav__caret svg { width: 13px; height: 13px; }
.nav__caret.is-open { transform: rotate(90deg); }
.nav__item--parent .nav__badge { margin-left: 0; margin-right: 6px; }
.nav__group .nav__sub { margin-top: 2px; margin-bottom: 4px; }

/* ----------------------------------------------- call prep: one screen ----- */
/* A decision screen, not a reading screen: full width, three columns, and no
   vertical scroll at 1440x900. Scripts on the left, the lead data that will
   populate them in the middle, the action on the right. */
.page--wide { max-width: none; padding-bottom: 18px; }
.prep__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.95fr) minmax(260px, 0.8fr);
  gap: 20px; align-items: start; margin-top: 16px;
}
.prep__main, .prep__data, .prep__rail { min-width: 0; }
.prep__go {
  position: sticky; top: 86px; z-index: 2;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--e2), var(--edge); padding: 16px;
  display: flex; flex-direction: column; gap: 3px;
}
.prep__go .prep__summaryname { font-size: 15px; font-weight: 640; letter-spacing: -.016em; margin-top: 4px; }
.prep__go .hint { font-size: 11.5px; }
.prep__start { width: 100%; justify-content: center; margin-top: 13px; }
.prep__cancel { width: 100%; justify-content: center; margin-top: 7px; }
.prep__go .btn[disabled] { opacity: .5; }
.prep__rail .eyebrow, .prep__data .eyebrow { display: block; }

/* denser rows so ten merge fields fit without scrolling */
.prows--tight .prow { padding: 6px 8px; margin: 0 -8px; }
.prows--tight .prow__t { font-size: 12.5px; }
.prows--tight .prow__s { font-size: 11px; }

/* unimported scripts as compact statements rather than full cards */
.scriptrow {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 7px 10px; border-radius: var(--r-sm); background: var(--canvas-2);
  margin-bottom: 6px;
}
[data-theme="dark"] .scriptrow { background: var(--raised); box-shadow: var(--edge); }
.scriptrow__name { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.scriptrow__use { font-size: 11px; color: var(--ink-3); }

@media (max-width: 1500px) {
  .prep__cols { grid-template-columns: minmax(0, 1.15fr) minmax(260px, 1fr) minmax(240px, .85fr); gap: 16px; }
}
@media (max-width: 1240px) {
  .prep__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .prep__rail { grid-column: 1 / -1; order: -1; }
  .prep__go { position: static; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; }
  .prep__start, .prep__cancel { width: auto; margin-top: 0; }
}
@media (max-width: 900px) {
  .prep__cols { grid-template-columns: minmax(0, 1fr); }
  .prep__go { grid-template-columns: 1fr; }
  .prep__start, .prep__cancel { width: 100%; }
}

/* compact lead header — one line, not a stacked block */
.prep--wide .prep__lead { padding: 12px 16px; align-items: center; }
.prep__nameline { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.prep--wide .prep__name { font-size: 21px; }
.prep--wide .prep__meta { font-size: 12.5px; }
.prep--wide .prep__phone { text-align: right; }
.prep--wide .prep__num { font-size: 20px; }
.prep__cols { margin-top: 14px; }

/* long provenance notes collapse rather than occupying the column */
.prep__note {
  margin-top: 10px; border-radius: var(--r-sm); background: var(--amber-w);
  padding: 9px 12px; font-size: 12px; color: var(--amber);
}
.prep__note summary { cursor: pointer; font-weight: 620; }
.prep__notebody { margin-top: 7px; line-height: 1.5; color: var(--ink-2); }

/* the eligible script card and the inbound card, tightened */
.prep--wide .scriptcard { padding: 11px 13px; }
.prep--wide .scriptcard__use { margin-top: 3px; }
.prep--wide .scriptcard__prov { margin-top: 3px; }
.prep--wide .scriptgroup + .scriptgroup { margin-top: 14px; }
.prep__pending {
  margin-top: 9px; font-size: 12px; color: var(--ink-3);
  border-radius: var(--r-sm); background: var(--canvas-2); padding: 8px 11px;
}
[data-theme="dark"] .prep__pending { background: var(--raised); box-shadow: var(--edge); }
.prep__pending summary { cursor: pointer; font-weight: 600; }
.prep__pending .scriptrow { background: var(--surface); }
.prep--wide .recbar { padding: 11px 14px; }
.prows--tight .prow { padding: 4px 8px; }
.prows--tight .prow__s {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.prep__data .panel__bd { padding-bottom: 12px; }

/* final trim so every lead's Call Prep fits one screen at 1440x900 */
.prep__cols { margin-top: 10px; }
.prep--wide .prep__lead { padding: 10px 16px; }
.prep__data .panel__bd { padding-top: 10px; }
.prows--tight .prow { padding: 3px 8px; }
.prep--wide .scriptgroup + .scriptgroup { margin-top: 12px; }
.prep__off {
  margin-top: 12px; border-radius: var(--r-sm); background: var(--canvas-2);
  padding: 9px 12px; font-size: 12.5px;
}
[data-theme="dark"] .prep__off { background: var(--raised); box-shadow: var(--edge); }
.prep__off summary { cursor: pointer; font-weight: 620; color: var(--ink-2); }
.prep__offnote { display: block; font-weight: 400; font-size: 11px; color: var(--ink-3); margin-top: 2px; }

/* 1440 rebalance: the script column needs room for a full title line, and the
   chips belong under it rather than competing with it for width. */
.prep__cols { grid-template-columns: minmax(0, 1.5fr) minmax(250px, 1fr) minmax(240px, .82fr); }
.prep--wide .scriptcard__top { flex-wrap: wrap; row-gap: 6px; }
.prep--wide .scriptcard__name { flex: 1 1 100%; }
.prep--wide .recbar__title { font-size: 13.5px; }
@media (min-width: 1700px) {
  .prep__cols { grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr) minmax(280px, .8fr); }
  .prep--wide .scriptcard__name { flex: 0 1 auto; }
}

/* styles.css caps .prep at 900px for the old single-column layout. Call Prep is
   now a full-width decision screen and must override it — dropping this is what
   put the dead space back on the right. */
.prep--wide { max-width: none; width: 100%; }

/* --------------------------------------------------------- lead notes ----- */
.notes__new { display: flex; flex-direction: column; gap: 9px; }
.notes__input { width: 100%; min-height: 68px; resize: vertical; padding: 9px 11px; line-height: 1.5; }
.notes__row { display: flex; gap: 9px; align-items: center; }
.notes__row select { flex: 1; height: 32px; }
.notes__list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.notes__item {
  border-radius: var(--r-sm); background: var(--canvas-2); padding: 10px 12px;
}
[data-theme="dark"] .notes__item { background: var(--raised); box-shadow: var(--edge); }
.notes__meta { display: flex; align-items: center; gap: 8px; }
.notes__at { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.notes__del {
  margin-left: auto; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
  color: var(--ink-3);
}
.notes__del:hover { color: var(--rose); background: var(--rose-w); }
.notes__del svg { width: 12px; height: 12px; }
.notes__text { font-size: 13.5px; line-height: 1.55; margin-top: 7px; white-space: pre-wrap; }

/* ==================================================== Ask Point capsule === */
/* A quiet, permanent affordance. It never covers the primary task: it sits in
   the bottom-right gutter and steps aside for the docked panel in a live call. */
.capsule {
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  display: flex; align-items: center; gap: 9px; padding: 9px 15px 9px 9px;
  border-radius: 999px;
  background: linear-gradient(176deg, var(--surface), var(--canvas-2));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px var(--line),
    0 2px 6px rgba(11, 26, 51, .07), 0 14px 30px -14px rgba(11, 26, 51, .4);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
[data-theme="dark"] .capsule {
  background: linear-gradient(176deg, #162034, #0d1421);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(150, 178, 224, .16),
    0 16px 34px -16px #000;
}
.capsule:hover { transform: translateY(-1px); }
.capsule.is-on { box-shadow: inset 0 0 0 1px var(--electric), 0 14px 30px -14px rgba(37, 99, 235, .5); }
.capsule__m {
  width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center;
  background: linear-gradient(158deg, #22315a, #0b1a33 78%); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
[data-theme="dark"] .capsule__m { background: linear-gradient(158deg, #2b4d8a, #0a1526 78%); }
.capsule__m svg { width: 15px; height: 15px; }
.capsule__t { font-size: 11.5px; letter-spacing: .11em; color: var(--ink); }
[data-theme="dark"] .capsule__t { color: #fff; }
body.in-call .capsule { right: 22px; bottom: 22px; }

/* ------------------------------------------------------------- the panel --
   ANCHORED AND CONTENT-SIZED, not a full-height slab.
   This was `position: fixed; top: 0; bottom: 0; width: 400px` — a column the
   height of the monitor holding one sentence and an input, on every screen,
   whatever it had to say. It is now anchored above its own capsule in the
   bottom-right corner and takes the height its content needs: `height: auto`
   with a ceiling, so a one-line refusal is a small card and a long document
   passage scrolls inside a panel that never exceeds two-thirds of the viewport
   until the producer expands it.

   Call Mode keeps the dock, and that is deliberate rather than an exception
   left behind: the script gives up the width for it, so nothing is covered, and
   a floating panel over the words being read aloud would be the worse design.
   Both variants share every rule below except position and height. */
.cp {
  position: fixed; z-index: 95;
  display: flex; flex-direction: column;
  background: var(--surface);
  animation: cp-in var(--dur) var(--ease);
}
@keyframes cp-in { from { transform: translateY(8px); opacity: .6 } to { transform: none; opacity: 1 } }

.cp--anchored {
  /* Above the capsule, which sits at right 22 / bottom 22 and is ~44px tall.
     COMPACT MEANS COMPACT: content-sized, and it stops at 300px. The ceiling
     used to be 560px, which is not a quick contextual answer — it is half the
     monitor — and it is also why Expand appeared to do nothing. */
  right: 22px; bottom: 78px; width: 440px; max-width: calc(100vw - 44px);
  height: auto; max-height: min(300px, calc(100vh - 120px));
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 4px 12px rgba(11, 26, 51, .08), 0 28px 60px -28px rgba(11, 26, 51, .55);
}
/* ---- STATE 2: ANSWERED ---------------------------------------------------
   An answer arrived, so the panel grows to fit it — and only then. This is the
   state that was missing: `cp--anchored` carried ONE ceiling for both an empty
   panel and a full one, so a 628px objection response (measured: immediate
   response, reframe, close, provenance) was folded into a 189px scrolling
   window while a deliberate Expand sat unused beside it. A producer reading a
   response aloud should not be scrolling a letterbox.

   Still content-sized: a short answer stays short — the measured refusal
   sentence renders a 203px panel in this state, the same as before. The ceiling
   only decides where growing stops, and it stops meaningfully short of the
   viewport so that FOCUS below remains the one intentionally large mode. Past
   the ceiling the log scrolls inside `.cp__body`; the header, the question
   field and the scope line never move. */
.cp--anchored.cp--answered { max-height: min(520px, calc(100vh - 140px)); }

/* Expanded is still not the whole screen — it is as much of it as a long answer
   can honestly use, and it is a deliberate act rather than the default. */
/* EXPAND HAS TO EXPAND, IN BOTH DIRECTIONS.
   This was `width: 560px; max-height: calc(100vh - 120px)` — 140px of extra
   width and a raised CEILING. The panel is `height: auto`, so raising a maximum
   it was not touching changed nothing at all: pressing Expand made the box
   wider and left it the same height, which is exactly what the founder saw.

   An explicit HEIGHT is the fix. The expanded panel is a working surface for
   reading an answer and its provenance, so it takes the room whether or not the
   content has arrived yet, and long results scroll inside `.cp__body` rather
   than pushing the input off the screen. `min()` against the viewport keeps it
   fully visible without any repositioning logic: it never grows past the space
   between the capsule and the top of the window, and on a narrow screen it
   becomes near-fullscreen because that is what the room allows. */
.cp--anchored.cp--expanded {
  width: min(780px, calc(100vw - 44px));
  height: min(620px, calc(100vh - 120px));
  max-height: 74vh;
}
/* With a real height, the log region is what stretches — so a short answer sits
   under the header and the input stays on the bottom edge instead of floating
   halfway up an empty box. */
.cp--anchored.cp--expanded .cp__body { flex: 1 1 auto; padding: 16px; }
[data-theme="dark"] .cp--anchored {
  border-color: rgba(150, 178, 224, .18);
  box-shadow: 0 28px 60px -24px #000;
}

.cp--docked {
  top: 0; right: 0; bottom: 0; width: 400px; max-width: 92vw;
  border-left: 1px solid var(--line);
  box-shadow: -14px 0 34px -22px rgba(0, 0, 0, .55);
}
[data-theme="dark"] .cp--docked { box-shadow: -18px 0 46px -24px #000; }

.cp__hd {
  display: flex; align-items: center; gap: 8px; padding: 11px 12px 10px;
  border-bottom: 1px solid var(--line); flex: none;
}
/* CONTEXT IN THE HEADER, where it is read BEFORE the question is typed rather
   than in a block above the log. Outside Call Mode it is one line — "which
   record is this about" — and it does not need a panel of its own. */
.cp__ctxchip {
  margin-left: 4px; font-size: 11px; font-weight: 560; color: var(--navy);
  background: var(--wash); border-radius: 999px; padding: 3px 9px;
  max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-theme="dark"] .cp__ctxchip { color: var(--electric-2); }
.cp__grow {
  margin-left: auto; width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center; color: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--line-2); flex: none;
}
.cp__grow:hover { color: var(--ink); background: var(--canvas-2); }
.cp__grow svg { width: 13px; height: 13px; }
.cp__mark {
  width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center;
  background: linear-gradient(158deg, #22315a, #0b1a33 78%); color: #fff;
}
[data-theme="dark"] .cp__mark { background: linear-gradient(158deg, #2b4d8a, #0a1526 78%); }
.cp__mark svg { width: 15px; height: 15px; }
.cp__title { font-size: 12px; letter-spacing: .12em; }
.cp__close {
  width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2); flex: none;
}
/* Docked has no expand control, so the close button takes the slack itself. */
.cp--docked .cp__close { margin-left: auto; }
.cp__close:hover { color: var(--ink); background: var(--canvas-2); }
.cp__close svg { width: 14px; height: 14px; }

/* `flex: 1 1 auto` with `min-height: 0`, not `flex: 1`: the panel is height-auto
   now, so the body has to be free to be SHORT. `flex: 1` on a fixed-height
   parent filled the column; on an auto-height one it would still stretch the
   panel to its max, which is the slab again by another route. */
.cp__body { flex: 0 1 auto; overflow-y: auto; padding: 12px; min-height: 0; }
.cp--docked .cp__body { flex: 1 1 auto; padding: 14px; }
.cp__ctx {
  border-radius: var(--r-sm); background: var(--wash); padding: 10px 12px; margin-bottom: 12px;
}
.cp__ctxlabel { font-size: 13.5px; font-weight: 640; letter-spacing: -.012em; margin-top: 3px; color: var(--navy); }
[data-theme="dark"] .cp__ctxlabel { color: var(--electric-2); }
.cp__ctxnote { font-size: 11px; color: var(--ink-2); margin-top: 5px; line-height: 1.5; }
.cp__quick { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.cp__qa {
  text-align: left; padding: 9px 12px; border-radius: var(--r-sm); font-size: 13px; font-weight: 560;
  color: var(--ink); background: var(--canvas-2); box-shadow: inset 0 0 0 1px transparent;
}
[data-theme="dark"] .cp__qa { background: var(--raised); box-shadow: var(--edge); }
.cp__qa:hover { box-shadow: inset 0 0 0 1px var(--line-2); }

.cp__log { display: flex; flex-direction: column; gap: 14px; }
.cpentry { display: flex; flex-direction: column; gap: 7px; }
.cpq { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.cpa {
  border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface);
  padding: 12px; box-shadow: var(--e1), var(--edge);
}
.cpa--empty { background: var(--amber-w); border-color: var(--caution-line); }
.cpa__t { font-size: 13.5px; font-weight: 650; letter-spacing: -.012em; }
.cpa__formula {
  font-size: 12px; margin-top: 5px; color: var(--ink-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cpa__body { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; margin-top: 7px; }
.cpa__verb { margin-top: 9px; display: flex; flex-direction: column; gap: 9px; }
.cpa__vtext {
  font-size: 13px; line-height: 1.6; margin-top: 3px;
  padding-left: 10px; border-left: 2px solid var(--electric);
}
.cpa__dns { margin-top: 9px; }
.cpa__dns ul { margin: 5px 0 0 16px; font-size: 12px; color: var(--rose); line-height: 1.5; }
.cpa__lines { margin-top: 9px; display: flex; flex-direction: column; }
.cpa__line {
  display: flex; gap: 10px; padding: 4px 0; border-top: 1px solid var(--line); font-size: 12px;
}
.cpa__line:first-child { border-top: none; }
.cpa__k { color: var(--ink-3); flex: none; min-width: 116px; }
.cpa__v { color: var(--ink); font-weight: 560; min-width: 0; }
.cpa__notes { margin-top: 10px; padding: 9px 11px; border-radius: var(--r-xs); background: var(--canvas-2); }
[data-theme="dark"] .cpa__notes { background: var(--raised); }
.cpa__note { font-size: 12px; line-height: 1.5; margin-top: 5px; }
.cpa__meta { font-size: 11.5px; color: var(--ink-3); margin-top: 9px; line-height: 1.5; }
.cpa__auth { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.cpa__src { font-size: 11px; color: var(--ink-3); }
.cpa__acts { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }

.cp__ft { border-top: 1px solid var(--line); padding: 10px 12px; flex: none; }
.cp__input {
  width: 100%; height: 38px; padding: 0 12px; font-size: 13px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--canvas-2); color: var(--ink);
}
[data-theme="dark"] .cp__input { background: var(--raised); }
.cp__input:focus { outline: none; border-color: var(--electric); box-shadow: 0 0 0 3px var(--wash); }

/* MOBILE TAKES THE FULLER TREATMENT, because it genuinely needs it: a 420px
   card anchored in the corner of a 375px screen is the whole screen anyway, and
   pretending otherwise costs the producer the margins. It becomes a sheet from
   the bottom, still not the entire height. */
@media (max-width: 640px) {
  .cp--anchored {
    right: 8px; left: 8px; bottom: 8px; width: auto; max-width: none;
    /* AND STILL COMPACT. The ceiling here was 82vh, so on a phone a compact
       panel holding one long answer stood 666px tall while the EXPANDED one —
       which had a raised maximum and no height — was 620. Compact was bigger
       than expanded, which is the same defect as on desktop wearing a
       different number. */
    max-height: min(340px, 60vh); border-radius: var(--r);
  }
  /* The same three states on a phone, one size down: an answer may take more of
     the sheet than an empty panel, and expanded still takes more than both. */
  .cp--anchored.cp--answered { max-height: min(520px, 68vh); }
  /* Near-fullscreen when expanded, because on a 375px screen that is genuinely
     what the room allows — and an explicit height, so it is the panel that
     grows rather than only its ceiling. */
  .cp--anchored.cp--expanded {
    width: auto; height: 88vh; max-height: 88vh;
  }
}
@media (max-width: 1080px) { .cp--docked { width: 100%; } }

/* Dark: the sidecar recedes and the answers sit on top of it. Sharing one
   surface token flattened the two into a single slab. */
[data-theme="dark"] .cp { background: #10141c; }
[data-theme="dark"] .cp__ft,
[data-theme="dark"] .cp__hd { background: #0c1017; }
[data-theme="dark"] .cpa { background: var(--surface); border-color: rgba(150, 178, 224, .18); }
[data-theme="dark"] .cpa--empty { background: rgba(245, 158, 11, .09); border-color: rgba(245, 158, 11, .3); }
[data-theme="dark"] .cp__qa { background: #161b24; }
[data-theme="dark"] .cpa__notes { background: #12161f; }

/* Docked, not overlaid. Call Mode is a fixed full-screen layer, so the sidecar
   would otherwise sit on top of the script and clip the line the producer is
   reading. Reserving the width makes the script reflow beside it. */
@media (min-width: 1081px) {
  body.cp-docked .cm { right: 400px; }
}

/* ================================================ training: labelled rows == */
/*
   TAB → LABELLED SECTION → RESOURCES.

   A section is a SHELF LABEL, not a container: a thin line with the name and
   the count, and the card grid standing under it. Wrapping each one in a card
   would turn five shelves into five boxes, which is the "oversized sparse
   cards" failure the founder named. The label is quieter than a `.sechd` so
   the tab's own heading stays the largest thing on the page.
*/
.seclabel {
  display: flex; align-items: baseline; gap: 8px;
  margin: 22px 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.seclabel:first-of-type { margin-top: 14px; }
.seclabel__t {
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-2);
}
.seclabel__n {
  font-size: 11px; font-weight: 650; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
/* The unfiled row reads as the exception it is, without shouting. */
.seclabel--none .seclabel__t { color: var(--ink-3); font-weight: 620; }

/* The shelf controls: one quiet line, so "Add resource" stays the one loud
   action on the tab. */
.secbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: -4px 0 14px;
}
/* (`.secbar__hint` is gone — it explained what a section is, which the founder
   ruled out as template talk. It was also the flex spacer, so the actions now
   carry the margin themselves.) */
.secbar__acts { display: flex; gap: 6px; margin-left: auto; }

/* Filing a card into a shelf, inline in its footer. Bounded so it can never
   stretch the card, and it wraps under the buttons rather than squeezing them. */
.vcard__sec {
  min-width: 0; max-width: 100%; height: 26px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--surface);
  color: var(--ink-2); font-size: 11.5px; padding: 0 6px;
}
.vcard__sec:focus-visible { outline: 2px solid var(--electric); outline-offset: 1px; }

/* An empty shelf says so in one line, not in a full-height panel. */
.note--tight { padding: 8px 12px; font-size: 12px; }