/* Project Moneyball — Performance Radar UI (dark mode, renewal-workshop look & feel).
   Tokens from BRAND-BOOK.md; gold (#FFBE17) = accent / running glow; green = met/exceeded. */
:root {
  --ink: #1e1e1e;
  --bg: #161616;            /* page */
  --panel: #232323;         /* cards */
  --panel-2: #2c2c2c;       /* inputs, raised */
  --header-bg: #111111;
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.22);
  --text: #e2e2e2;
  --muted: #9b9b9b;
  --heading: #ece9e1;       /* soft warm white — avoids the harsh pure-white "glow" */
  --gold: #ffbe17;
  --cream: #fff2d1;
  --green: #34c46a;
  --green-deep: #2a9d57;
  --red: #e0584f;
  --font-display: 'Bebas Neue', system-ui, sans-serif;
  --font-body: 'Open Sans', system-ui, sans-serif;
  --container: 1400px; /* legacy token (no longer caps width — the layout now runs full-bleed) */
  --gutter: 40px;
}
* { box-sizing: border-box; }
/* Larger base type for easier reading; most sizes are rem so they scale from here. */
html { font-size: 18px; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Full-bleed container — header, toolbar, and content span the whole page width (a comfortable
   side gutter only), instead of being capped and centered. */
.container { max-width: none; margin: 0; padding: 0 var(--gutter); width: 100%; }
.band { width: 100%; }

/* ============================ App shell: left side-nav + main region ============================
   Lean, minimalist chrome. The side-nav is semi-black (#1a1a1a) with the same faint PCB texture as
   the page; items are light grey, the selected item is gold. The scorer and the roadmap placeholders
   are `.view` blocks toggled by ui/sidenav.ts (pure show/hide — the scorer DOM is never torn down). */
.app-shell { display: flex; flex-direction: column; min-height: 100vh; }

/* Full-width top header — brand lockup (always visible, survives collapse) on the left, utility nav
   on the right. Sticky + solid bg so it stays pinned across scroll and view changes. */
.app-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 22px; height: 62px; padding: 0 var(--gutter) 0 24px; border-bottom: 1px solid var(--border); background: #2c2c2c; }
.app-brand { display: flex; align-items: center; gap: 12px; flex: none; }
.app-brand .brand-score { font-size: 2rem; }
.brand-logo { height: 34px; width: auto; display: block; }
.app-header-tagline { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .09em; text-transform: uppercase; color: var(--heading); opacity: .78; padding-left: 22px; border-left: 1px solid var(--border); }
@media (max-width: 1200px) { .app-header-tagline { display: none; } }

.app-body { display: flex; align-items: flex-start; flex: 1 1 auto; }

.sidenav {
  flex: 0 0 236px; width: 236px;
  position: sticky; top: 62px; height: calc(100vh - 62px);
  display: flex; flex-direction: column;
  background-color: #2c2c2c;
  border-right: 1px solid var(--border);
  overflow: hidden;
  z-index: 20;
}
.sidenav > * { position: relative; z-index: 1; }

/* Collapse control: a subtle chevron at the top of the rail (no heavy bar/border). It rotates to
   point the other way when collapsed, hinting expand. */
.sidenav-top { display: flex; align-items: center; justify-content: flex-end; padding: 10px 12px 4px; }
.sidenav-toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; transition: background .12s, color .12s, transform .18s; }
.sidenav-toggle svg { width: 17px; height: 17px; }
.sidenav-toggle:hover { background: rgba(255, 255, 255, .06); color: var(--gold); }
.sidenav.is-collapsed .sidenav-toggle svg { transform: rotate(180deg); }

.sidenav-nav { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; flex: 1 1 auto; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: transparent; border: none; border-radius: 8px; padding: 10px 12px;
  font-family: var(--font-body); font-size: .75rem; font-weight: 600;
  color: var(--muted); cursor: pointer; transition: background .12s, color .12s;
}
.nav-item svg { flex: none; width: 20px; height: 20px; }
.nav-item:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
/* Selected page: gold font only — no background fill. */
.nav-item.is-active { color: var(--gold); background: transparent; }

.sidenav-foot { height: 60px; display: flex; flex-direction: column; justify-content: center; padding: 0 10px; border-top: 1px solid var(--border); }
.nav-util { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 8px; color: var(--muted); font-size: .75rem; font-weight: 600; text-decoration: none; transition: background .12s, color .12s; }
.nav-util svg { flex: none; width: 18px; height: 18px; }
.nav-util:hover { background: rgba(255, 255, 255, .05); color: var(--text); }

.app-region { flex: 1 1 auto; min-width: 0; min-height: calc(100vh - 62px); display: flex; flex-direction: column; }

/* ===================== Light working-canvas theme (off-white) =====================
   The content region becomes an off-white surface; the top header and left rail stay dark chrome.
   Framed elements (cards, buttons, the Message Center terminal, the runtime/lifecycle chips, weight
   dropdowns) keep their dark fills and read as intentional modules on the light canvas — only the
   FRAMELESS text and cell outlines are re-coloured dark for contrast. Contrast vs #E8E2DA: #1a1a1a
   13.5:1, #5a5a5a 5.4:1, score states ≥3.6:1 (all AA for their text size). */
.app-region { position: relative; background-color: #F1F2F3; }
.app-region > * { position: relative; z-index: 1; }

/* Frameless headings + labels → dark. */
.app-region .section-h,
.app-region .col-h,
.app-region .pt-h,
.app-region .view-h { color: #1a1a1a; }
.app-region .pt-h.h-weight { color: #5a5a5a; }
.app-region .pt-label { color: #1f1f1f; }
.app-region .view-sub { color: #5a5a5a; }
.app-region [data-view="cross-skill"] .view-sub { color: #1a1a1a; }

/* Call Details (label muted, value was gold → dark). */
.app-region .cd-label { color: #5a5a5a; }
.app-region .cd-value { color: #1a1a1a; }

/* Final Score — meta labels/values + the big number (was gold; re-mapped to dark-enough semantics). */
.app-region .score-meaning-label,
.app-region .score-coverage-label { color: #5a5a5a; }
.app-region .score-meaning,
.app-region .score-coverage { color: #1a1a1a; }
.app-region .score-circle { color: #9a6a00; }
.app-region .score-circle.circle-good { color: #1d7a40; }
.app-region .score-circle.circle-mid { color: #9a6a00; }
.app-region .score-circle.circle-bad { color: #b3433b; }

/* Empty scorecard cell outlines → dark so they read on light (filled Actual/Expected cells keep their
   green/gold fills, which set their own border colour). */
.app-region .seg-cell { border-color: rgba(0, 0, 0, .32); }

/* Lifecycle arrows + the gold dividers, tuned for the light canvas. */
.app-region .lc-arrow { color: #5a5a5a; opacity: .85; }
.app-region .divider { border-top-color: rgba(154, 106, 0, .5); }
.app-region .divider-strong { border-top-color: rgba(154, 106, 0, .9); }

/* Footer now sits on the light canvas. */
.app-region .site-footer { border-top-color: rgba(0, 0, 0, .14); }
.app-region .sf-brand,
.app-region .sf-contact,
.app-region .sf-social { color: #5a5a5a; }
.app-region .sf-contact a { color: #9a6a00; }
.app-region .sf-site { color: #9a6a00; }

/* ---- Header utility buttons (Quick Help, Getting Started, FAQ, …): frameless light-grey text that
   turns gold on hover. ---- */
.topbar-nav .btn,
.topbar-nav .btn:visited { background: transparent; border-color: transparent; color: #dcdcdc; }
.topbar-nav .btn:hover:not(:disabled) { background: transparent; border-color: transparent; color: var(--gold); }

/* ---- Action buttons (toolbar Import/Run/Stop/…, template Reset/Open/Save, and the Copy buttons):
   frameless text — no fill, no border — dark label that turns gold with a soft warm tint on hover.
   A disabled button just fades. ---- */
.toolbar-inner .btn,
.template-actions .btn,
.app-region .copy-btn { background: transparent; border-color: transparent; color: #3a3a3a; }
.toolbar-inner .btn:hover:not(:disabled),
.template-actions .btn:hover:not(:disabled),
.app-region .copy-btn:hover { background: rgba(0, 0, 0, .06); border-color: transparent; color: #1a1a1a; }
.toolbar-inner .btn:disabled,
.template-actions .btn:disabled { background: transparent; border-color: transparent; color: rgba(0, 0, 0, .26); }
.app-region .copy-btn.copied { color: #1d7a40; border-color: transparent; background: transparent; }
/* First toolbar button aligns flush with the page content edge (drop its left padding). */
.toolbar-inner .btn:first-child { padding-left: 0; }
/* Last template button (Save Template) aligns flush with the weights column's right edge. */
.template-actions .btn:last-child { padding-right: 0; }

/* ---- Trust Center link cards: light to match the new theme (were dark panels). ---- */
.app-region .trust-link { background: #fff; border-color: rgba(0, 0, 0, .12); color: #1a1a1a; }
.app-region .trust-link:hover { background: #fff; border-color: rgba(154, 106, 0, .6); color: #1a1a1a; }

/* ---- Anonymize Transcript page: white cards + dark text (were dark panels). ---- */
.app-region .anon-block,
.app-region .anon-note,
.app-region .anon-prompt { background: #fff; border-color: rgba(0, 0, 0, .12); }
.app-region .anon-note { border-left-color: #9a6a00; color: #1a1a1a; }
.app-region .anon-note strong { color: #1a1a1a; }
.app-region .anon-note a { color: #9a6a00; }
.app-region .anon-h { color: #1a1a1a; }
.app-region .anon-list { color: #1a1a1a; }
.app-region .anon-list strong { color: #1a1a1a; }
.app-region .anon-list code { color: #9a6a00; }
.app-region .anon-prompt { color: #1a1a1a; border-color: rgba(0, 0, 0, .15); }
.app-region .anon-prompt:focus { border-color: #9a6a00; }
/* Copy-prompt button: frameless like the other action buttons. The :not(:disabled) / :active / :focus
   qualifiers keep it flat in every state (the base .btn hover/active rules are declared later with equal
   specificity, so we out-specify them here). */
.app-region .anon-copy,
.app-region .anon-copy:hover:not(:disabled),
.app-region .anon-copy:focus,
.app-region .anon-copy:active { background: transparent; border-color: transparent; box-shadow: none; color: #3a3a3a; }
.app-region .anon-copy:hover:not(:disabled) { background: rgba(0, 0, 0, .06); color: #1a1a1a; }
.app-region .anon-copy.copied { background: transparent; border-color: transparent; color: #1d7a40; }

/* ---- Roadmap placeholder cards (Buyer-Side, CRO Dash, …): white to match. ---- */
.app-region .placeholder-card { background: #fff; border-color: rgba(0, 0, 0, .12); }
.app-region .placeholder-h { color: #1a1a1a; }
.app-region .placeholder-sub { color: #5a5a5a; }
.app-region .placeholder-icon { color: #9a6a00; }
.app-region .placeholder-badge { color: #9a6a00; border-color: rgba(154, 106, 0, .4); }
/* Run flicker: keep the gold glow animation, black label (no gold text on the light canvas). */
.toolbar-inner .btn.run-awaiting { color: #1a1a1a; border-color: transparent; }

/* ---- Message Center: a clean white panel with dark, readable text (newest darkest, older faded);
   keeps the ">" DOS prompt and gold accents. ---- */
.app-region .notif-box { background: #fff; border-color: rgba(0, 0, 0, .12); }
.app-region .notif-welcome { color: #1a1a1a; }
.app-region .notif-welcome a,
.app-region .notif-welcome a:visited { color: #9a6a00; }
.app-region .note { color: #555; }
.app-region .note-latest { color: #1a1a1a; }
.app-region .note-warn { color: #9a6a00; }
.app-region .note-error { color: #b3433b; }
.app-region .ai-ack-label { color: #1a1a1a; }
.app-region .ai-disclosure-msg.is-old,
.app-region .ai-disclosure-msg.is-old .notif-welcome,
.app-region .ai-disclosure-msg.is-old .notif-welcome strong,
.app-region .ai-disclosure-msg.is-old .ai-ack-label { color: #777; }
.app-region .ai-disclosure-msg.is-old .notif-welcome a,
.app-region .ai-disclosure-msg.is-old .notif-welcome a:visited { color: #9a6a00; }

/* ---- Lifecycle boxes: white fill + dark text; the identified (active) stage keeps its gold look. ---- */
.app-region .lc-box:not(.lc-active) { background: #fff; color: #1a1a1a; border-color: rgba(0, 0, 0, .15); }

/* ---- Runtime Monitor skill boxes: white fill + dark text; running keeps gold, done/error stay
   distinguishable on the light canvas. ---- */
.app-region .cb-box { background: #fff; color: #1a1a1a; border-color: rgba(0, 0, 0, .15); }
.app-region .cb-done { background: #ececec; color: #4a4a4a; border-color: rgba(0, 0, 0, .12); }
.app-region .cb-running { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.app-region .cb-error { background: rgba(224, 88, 79, .14); color: #a5342c; border-color: rgba(224, 88, 79, .55); }

/* ---- Weights: white fill, dark text, default (skill-label) font size. ---- */
.app-region .pm-weight,
.app-region .pt-weight select { background: #fff; color: #1a1a1a; border-color: rgba(0, 0, 0, .2); font-size: .75rem; }

/* ---- Score Analysis / Recommendations / MEDDPICC: white fill + dark text. ---- */
.app-region .scroll-box { background: #fff; color: #1a1a1a; border-color: rgba(0, 0, 0, .15); }
.app-region .scroll-box ul,
.app-region .scroll-box li { color: #1a1a1a; }
.app-region .analysis-title { color: #1a1a1a; }
.app-region .meddpicc-item { border-bottom-color: rgba(0, 0, 0, .12); }
.app-region .meddpicc-letter { background: #efece6; border-color: rgba(0, 0, 0, .15); color: #1a1a1a; }
.app-region .meddpicc-label { color: #1a1a1a; }
.app-region .meddpicc-note { color: #5a5a5a; }
.app-region .meddpicc-evidence { color: #333; border-left-color: rgba(0, 0, 0, .25); }
.app-region .meddpicc-status-strong { color: #1d7a40; }
.app-region .meddpicc-status-weak { color: #9a6a00; }
.app-region .meddpicc-status-missing { color: #b3433b; }
.app-region .meddpicc-unavailable { background: #f2efe9; border-color: rgba(0, 0, 0, .15); border-left-color: #9a6a00; color: #5a5a5a; }

/* ---- Cross-Skill Diagnostic empty state: no frame, a DOS-style ">" prompt before the message. ---- */
.app-region .cross-skill-box { background: transparent; border: none; padding: 0; color: #1f1f1f; }
.app-region .cross-skill-empty { position: relative; padding-left: 16px; color: #5a5a5a; font-style: normal; font-family: ui-monospace, 'Cascadia Code', 'Courier New', monospace; }
.app-region .cross-skill-empty::before { content: '>'; position: absolute; left: 0; top: 0; color: #9a6a00; font-weight: 700; }

/* Top utility bar (upper menu): page tagline left, help/account links right. Sticky + solid bg so it
   stays pinned at the top on scroll and across view changes; height matches .sidenav-top (62px). */
.topbar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 24px; height: 62px; padding: 0 var(--gutter); border-bottom: 1px solid var(--border); background: var(--bg); }
.topbar-title { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .09em; text-transform: uppercase; color: var(--heading); opacity: .82; }
.topbar-nav { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }

/* Views: only the active one shows. */
.view { display: none; }
.view.is-active { display: block; }
.view-placeholder.is-active { display: flex; align-items: center; justify-content: center; min-height: 62vh; padding: 40px var(--gutter); }
.placeholder-card { text-align: center; max-width: 460px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); padding: 40px 34px; }
.placeholder-icon { color: var(--gold); opacity: .85; margin-bottom: 14px; }
.placeholder-icon svg { width: 42px; height: 42px; }
.placeholder-h { font-family: var(--font-display); font-size: 1.7rem; font-weight: 400; letter-spacing: .05em; color: var(--heading); margin: 0 0 8px; }
.placeholder-sub { color: var(--muted); font-size: .92rem; line-height: 1.55; margin: 0 0 20px; }
.placeholder-badge { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(255, 190, 23, .4); border-radius: 999px; padding: 5px 12px; }

/* Sidenav divider — thin light-grey rule splitting the menu into two halves (below The CRO Lens). */
.nav-sep { flex: 0 0 auto; height: 1px; background: rgba(255, 255, 255, .14); margin: 8px 14px; }

/* ---------- Scorecards page: author one manager scorecard per call type ----------
   Two columns: LEFT = call-type dropdown + Save (kept up top so it never scrolls out of reach);
   RIGHT = per-skill config, System Default minimum beside the editable Custom minimum. No card/frame
   — it sits directly on the workspace. */
.sc-layout { display: grid; grid-template-columns: 360px max-content; gap: 48px; align-items: start; }
.sc-side { display: flex; flex-direction: column; gap: 12px; }
.sc-pick-label { font-family: var(--font-display); font-size: .9rem; letter-spacing: .05em; text-transform: uppercase; color: #1a1a1a; }

/* Custom call-type picker: a button whose option panel opens to the RIGHT of the button (a native
   <select> can't be repositioned, so it's a bespoke listbox). Width ~50% wider than the old select. */
.sc-picker { position: relative; }
.sc-select { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; width: 345px; font-family: var(--font-body); font-size: 13.5px; font-weight: 400; color: #1a1a1a; background: #fff; border: 1px solid rgba(0, 0, 0, .25); border-radius: 8px; padding: 9px 12px; cursor: pointer; text-align: left; }
.sc-select:hover { border-color: rgba(154, 106, 0, .5); }
.sc-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-select-caret { flex: 0 0 auto; color: #8a8a8a; font-size: .7rem; }
.sc-picker-panel { position: absolute; top: 0; left: 100%; margin-left: 10px; z-index: 30; min-width: 320px; overflow-y: auto; background: #fff; border: 1px solid rgba(0, 0, 0, .18); border-radius: 10px; box-shadow: 0 12px 34px rgba(0, 0, 0, .2); padding: 6px; }
.sc-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: transparent; border: none; border-radius: 6px; padding: 8px 10px; font-size: 13.5px; color: #1a1a1a; cursor: pointer; }
.sc-opt:hover { background: rgba(0, 0, 0, .05); }
.sc-opt.is-active { background: rgba(154, 106, 0, .12); color: #8a5a00; font-weight: 600; }
.sc-opt.is-highlighted { box-shadow: inset 0 0 0 2px rgba(154, 106, 0, .5); }
.sc-opt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* CUSTOM tag: bold black text (legible) + a gold sparkle to draw attention. */
.sc-opt-custom { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: .58rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #1a1a1a; }
.sc-opt-spark { width: 12px; height: 12px; fill: #ffbe17; }

.sc-editor-sub { font-size: .8rem; line-height: 1.45; color: #5a5a5a; margin: 2px 0 0; max-width: 340px; }
.sc-actions { display: flex; align-items: center; gap: 16px; margin-top: 6px; }
.sc-save { font-family: var(--font-body); font-size: .8rem; font-weight: 600; border-radius: 6px; padding: 8px 22px; cursor: pointer; background: var(--gold); border: 1px solid var(--gold); color: #1a1a1a; }
.sc-save:hover:not(:disabled) { background: #e0a800; border-color: #e0a800; }
.sc-save:disabled { background: #e4dfd2; border-color: #e4dfd2; color: #9a9a9a; cursor: default; }
.sc-revert { background: transparent; border: none; color: #8a5a00; font-size: .78rem; cursor: pointer; text-decoration: underline; padding: 4px 2px; }
.sc-revert:hover { color: #6a4600; }
.sc-msg { font-size: .78rem; font-weight: 600; min-height: 1em; }
.sc-msg-ok { color: #1d7a40; }
.sc-msg-error { color: #b3433b; }

/* Config grid: two side-by-side sets — [label] · System Default (boxes + weight) · [divider] ·
   Custom (boxes + weight). FIXED column widths so the Custom set never shifts when a different call
   type (with wider default-weight text) is selected. Column 4 is the divider gutter. */
.sc-config-grid { display: grid; grid-template-columns: 195px 108px 78px 44px 108px 100px; align-items: center; row-gap: 5px; column-gap: 22px; }
.sc-ch { font-family: var(--font-display); font-size: .82rem; letter-spacing: .5px; color: #5a5a5a; padding-bottom: 9px; align-self: end; }
.sc-ch-custom { color: #1a1a1a; }
.sc-rowlabel { font-size: .8rem; color: #1a1a1a; padding: 3px 0; }
.sc-bar, .sc-bar-slot { display: inline-flex; gap: 4px; }
/* Read-only default markers read as a solid grey reference (higher contrast than the workspace);
   editable Custom markers use the gold accent. */
.sc-bar-default .seg-cell.seg-expected { background: #6b6b6b; border-color: #555; }
.sc-bar-edit .seg-cell { cursor: pointer; }
.sc-defweight { font-size: 13.5px; color: #8a8a8a; }
.sc-vdivider { width: 1px; justify-self: center; align-self: stretch; background: rgba(0, 0, 0, .14); }
.sc-weight { font-size: 13.5px; padding: 5px 8px; border: 1px solid rgba(0, 0, 0, .2); border-radius: 7px; background: #fff; color: #1a1a1a; cursor: pointer; }
.sc-weight:focus { outline: none; border-color: var(--gold); }

/* Collapsed rail: icon-only strip. Labels + brand text hide; icons centre; state persists (sidenav.ts). */
.sidenav.is-collapsed { flex-basis: 66px; width: 66px; }
.sidenav.is-collapsed .nav-item span,
.sidenav.is-collapsed .nav-util span { display: none; }
.sidenav.is-collapsed .sidenav-top { justify-content: center; padding: 10px 0 4px; }
.sidenav.is-collapsed .nav-item,
.sidenav.is-collapsed .nav-util { justify-content: center; padding: 11px 0; }

/* Page header: the active page's name at the top of the workspace, shared by every view (text set by
   ui/sidenav.ts). Sized a clear step above section headers (.section-h/.col-h/.view-h are 1rem) so the
   page name reads as the top of the hierarchy. Dark ink on the light workspace, like the other
   in-region headings. */
.page-head { padding: 22px var(--gutter) 12px; }
.page-title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; letter-spacing: .04em; color: #1a1a1a; margin: 0; line-height: 1.1; }

/* Document-style views (Cross-Skill Diagnostic, Trust Center). Reduced top padding since the page
   title now lives in the shared .page-head above, not inside the view. */
.view-pad { padding: 6px var(--gutter) 44px; }
/* Doc-view (Cross-Skill, Trust Center) headings + body sized to match the Skill-Based page:
   heading = section-header size (1rem), sub/body = default skill-label size (.75rem). */
.view-h { font-family: var(--font-display); font-size: 1rem; font-weight: 400; letter-spacing: .04em; color: var(--heading); margin: 0 0 6px; }
.view-sub { color: var(--muted); font-size: .75rem; line-height: 1.5; margin: 0 0 22px; max-width: 720px; }
/* AI-use disclosure at the top of the Trust Center page (moved out of the Message Center). */
.trust-ai-note { max-width: 720px; margin: 0 0 20px; padding: 14px 16px; border: 1px solid #e4dcc6; border-left: 3px solid #c8951a; border-radius: 10px; background: #faf6ea; }
.trust-ai-note p { margin: 0; font-size: .8rem; line-height: 1.6; color: #1a1a1a; }
.trust-ai-note a, .trust-ai-note a:visited { color: #9a6a00; font-weight: 500; text-decoration: none; }
.trust-ai-note a:hover { text-decoration: underline; }
.cross-skill-box { padding: 20px 22px; font-size: .75rem; line-height: 1.6; color: var(--text); }
.cross-skill-box .summary-para { margin: 0 0 12px; }
.cross-skill-box .summary-para:last-child { margin-bottom: 0; }
.cross-skill-empty { color: var(--muted); font-style: italic; margin: 0; }
/* Cross-Skill Diagnostic = two stacked rows: the chain visual(s) over a divider over the narrative.
   All content is left-aligned to match the rest of the app; the visual is width-capped so short
   chains don't balloon on an ultrawide row, and the narrative's line length is capped for reading. */
.cs-visual { position: relative; max-width: 1000px; margin: 0; }
.cs-visual .cs-graph-svg { display: block; margin: 0; max-width: 100%; height: auto; }
.cs-graph-block { margin: 0 0 14px; }
.cs-graph-title { font-family: var(--font-body); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 4px; }
.cs-graph-title.cs-graph-lift { color: #1a1a1a; }
.cs-graph-title.cs-graph-drag { color: #1a1a1a; }
.cs-graph-title.cs-graph-muted { color: #1a1a1a; }
/* Causal "nothing lifted" note that fills the What-worked slot (a connection insight, not a list). */
.cs-noliftnote { margin: 0 0 16px; max-width: 620px; }
.cs-nolift-text { margin: 2px 0 0; font-size: 12.5px; font-style: italic; color: #1a1a1a; line-height: 1.5; }
.cross-skill-box .divider { margin: 60px 0; max-width: 1000px; }
.cs-text { max-width: 68ch; }
/* Shared legend below the chains (HTML, not SVG). */
.cs-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 18px 0 0; font-size: 11.5px; color: #1a1a1a; }
.cs-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.cs-legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.cs-legend-hint { display: block; margin: 8px 0 0; font-size: 11.5px; font-style: italic; color: #1a1a1a; }
/* Hover/click detail tooltip (Phase 2). */
.cs-tip { position: absolute; z-index: 10; max-width: 320px; background: #1f1f1f; color: #f1f1f1; padding: 8px 11px; border-radius: 8px; font-size: 12px; line-height: 1.45; box-shadow: 0 6px 18px rgba(0, 0, 0, .28); pointer-events: none; }
/* SVG label typography (fills are set inline per element so they read on the light panel). */
.cs-graph-svg text { font-family: var(--font-body); }
.cs-graph-svg .cs-node-name { font-size: 13px; font-weight: 700; }
.cs-graph-svg .cs-node-band { font-size: 11.5px; font-weight: 600; text-transform: capitalize; }
.cs-graph-svg .cs-badge { font-size: 10px; font-weight: 700; letter-spacing: .6px; }
.cs-graph-svg .cs-tag { font-size: 10px; font-weight: 700; letter-spacing: .2px; }
.cs-graph-svg .cs-caption { font-size: 12px; font-style: italic; }

/* Recent-trend overlay (skill profile vs expected minimum). Lean + frameless: no card, thin strokes;
   the SVG scales to the panel width but is capped so it doesn't sprawl on ultrawide. */
.trend-section .col-h { margin-bottom: 10px; }
.trend-panel { position: relative; max-width: 720px; }
/* Below 1920 the wrapper is a plain block (results row, then trend below). At ≥1920 it becomes two
   columns so the trend chart sits to the RIGHT of the scorecard; the middle divider is hidden.
   Breakpoint is 1900 (not 1920) so a true 1920-wide monitor — whose content width is ~1905 once the
   vertical scrollbar is subtracted — still triggers it; 1600/1680/1792 laptops stay stacked. */
@media (min-width: 1900px) {
  .results-trend-wrap { display: grid; grid-template-columns: minmax(0, max-content) minmax(360px, 700px); justify-content: start; gap: 72px; align-items: start; }
  .results-trend-wrap > .rt-divider { display: none; }
  .results-trend-wrap > .trend-section { margin: 0; }
}
.trend-svg { display: block; width: 100%; max-width: 100%; height: auto; font-family: var(--font-body); }
.trend-svg .trend-axis { font-size: 11px; fill: #8a8a8a; }
/* First-word skill labels, one consistent colour (no per-skill greying). */
.trend-svg .trend-xlabel { font-size: 13.5px; fill: #5a5a5a; }
.trend-svg .trend-legend-t { font-size: 13.5px; fill: #4a4a4a; }
/* Current-call legend entry: bold + dark. */
.trend-svg .trend-leg-b .trend-legend-t { fill: #1a1a1a; font-weight: 700; }
/* A toggled-off call: dim + struck through in the legend (line itself is hidden). */
.trend-svg .trend-leg.is-off { opacity: .4; }
.trend-svg .trend-leg.is-off .trend-legend-t { text-decoration: line-through; }
/* "Click a line to toggle" hint under the header. */
.trend-hint { font-size: 12.5px; color: #6a6a6a; font-style: italic; margin: -2px 0 8px; }
/* Trend "off" disclaimer (shown until the Settings opt-in is enabled). */
.trend-disclaimer { font-size: .8rem; color: #5a5a5a; margin: 4px 0; font-style: italic; }
.trend-settings-link { color: #9a6a00; font-weight: 700; text-decoration: none; font-style: normal; }
.trend-settings-link:hover { text-decoration: underline; }

/* Settings page — frameless (no card background/border), just the control on the page. */
.settings-card { max-width: 640px; }
.settings-row { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; margin: 0; }
.settings-row input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; flex: none; accent-color: var(--gold); cursor: pointer; }
.settings-row-body { display: flex; flex-direction: column; gap: 4px; }
.settings-row-label { font-size: .9rem; font-weight: 700; color: #1a1a1a; }
.settings-row-hint { font-size: .78rem; color: #5a5a5a; line-height: 1.5; }
.settings-row-hint strong { color: #3a3a3a; }
.trust-links { display: flex; flex-direction: column; gap: 6px; max-width: 440px; }
.trust-link { display: flex; align-items: center; gap: 11px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); color: var(--text); text-decoration: none; font-size: .75rem; font-weight: 500; transition: border-color .12s, color .12s, background .12s; }
.trust-link:hover { border-color: var(--gold); color: var(--gold); }
.trust-ico { flex: none; width: 17px; height: 17px; color: #9a6a00; }

/* Anonymize Transcript page — self-serve privacy prompt. */
.anon-note { max-width: 980px; margin: 0 0 18px; padding: 15px 18px; border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 10px; background: var(--panel); font-size: .78rem; line-height: 1.6; color: var(--text); }
.anon-note p { margin: 0 0 9px; }
.anon-note p:last-child { margin: 0; }
.anon-note strong { color: var(--heading); font-weight: 700; }
.anon-note a { color: var(--gold); text-decoration: none; }
.anon-note a:hover { text-decoration: underline; }
.anon-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 980px; margin: 0 0 22px; }
.anon-block { padding: 18px 20px; }
.anon-h { font-family: var(--font-display); font-size: 1rem; font-weight: 400; letter-spacing: .04em; color: var(--heading); margin: 0 0 12px; }
.anon-list { margin: 0; padding-left: 18px; font-size: .75rem; line-height: 1.6; color: var(--text); }
.anon-list li { margin-bottom: 9px; }
.anon-list li:last-child { margin-bottom: 0; }
.anon-list strong { color: var(--heading); font-weight: 700; }
.anon-list code { font-family: ui-monospace, 'Cascadia Code', 'Courier New', monospace; font-size: .92em; color: var(--gold); }
.anon-prompt-wrap { max-width: 980px; }
.anon-prompt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.anon-prompt-head .anon-h { margin: 0; }
.anon-copy.copied { border-color: var(--gold); color: var(--gold); }
.anon-prompt {
  width: 100%; box-sizing: border-box; min-height: 380px; resize: vertical;
  padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--panel); color: var(--text);
  font-family: ui-monospace, 'Cascadia Code', 'Courier New', monospace; font-size: .75rem; line-height: 1.55;
  white-space: pre; overflow: auto;
}
.anon-prompt:focus { outline: none; border-color: var(--gold); }
@media (max-width: 1040px) { .anon-cols { grid-template-columns: 1fr; } }

/* Below the app breakpoint the rail becomes a horizontal top strip (scrolls if needed). */
@media (max-width: 1040px) {
  .app-body { flex-direction: column; align-items: stretch; }
  .sidenav { position: static; width: 100%; height: auto; flex: none; flex-direction: row; align-items: center; border-right: none; border-bottom: 1px solid var(--border); overflow-x: auto; }
  .sidenav-top { height: auto; border-bottom: none; border-right: 1px solid var(--border); padding: 8px 10px; }
  .sidenav-nav { flex-direction: row; flex-wrap: nowrap; padding: 8px; gap: 4px; overflow-y: visible; }
  .nav-item { white-space: nowrap; padding: 9px 11px; }
  .sidenav-foot { border-top: none; border-left: 1px solid var(--border); padding: 8px; flex: none; }
  .app-region { min-height: 0; }
}

/* Header band */
/* Background lives on the centered container, not the full-width band, so the dark header/toolbar
   frame is limited to the page design width (page bg shows on the sides). */
.band-header { background: transparent; }
/* Flex row: brand + tagline sit together on the left (a healthy gap between them so the gold Score
   mark and the quiet tagline don't cannibalize each other), and the nav is pushed to the far right
   with margin-left:auto. */
.header-inner { display: flex; align-items: center; gap: 28px; min-height: 68px; padding-top: 16px; background: var(--bg); }
.brand { display: flex; align-items: center; gap: 14px; }
.logo { height: 32px; width: auto; }
.header-nav { display: flex; gap: 12px; margin-left: auto; }

/* Hero tagline, left-aligned next to the brand. Deliberately NOT gold — the Score mark already owns
   the page's one accent (BRAND-BOOK.md: "gold does the work, everything else stays quiet"), so this
   stays a quiet, confident supporting line rather than competing with it. Hidden below 1420px, where
   it starts crowding the nav buttons into two-line wraps — well above the app's 1040px mobile
   breakpoint, so there's no dead zone where it clips or overlaps. */
.hero-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--heading);
  opacity: 0.82;
  white-space: nowrap;
}
@media (max-width: 1420px) {
  .hero-title { display: none; }
}

/* ---------- Score wordmark: stepped dark bevel + gold vertical gradient + soft gloss, in Bebas
   Neue. Reused as-is across the app header, PDF cover, Getting Started, and FAQ — only font-size
   and the .score-turbo skew ever change per placement. Layers stack on one grid cell so depth/face/
   gloss stay pixel-aligned at any size; shadow offsets are in em so the bevel scales with the mark
   instead of needing a hand-tuned override per context. */
.score-mark { display: inline-grid; font-family: 'Bebas Neue', var(--font-display), sans-serif; text-transform: uppercase; line-height: 1; }
.score-mark > * { grid-area: 1 / 1; }
.score-mark .depth {
  color: #8a5a12;
  text-shadow:
    .01em .01em 0 #7c4f0f, .02em .02em 0 #6e440d, .03em .03em 0 #603a0b,
    .04em .04em 0 #522f09, .05em .05em 0 #442507, .06em .06em 0 #361b05,
    .07em .07em 0 #281303, .08em .08em 0 #1a0b01,
    .09em .1em .03em rgba(0, 0, 0, .55), .12em .16em .2em rgba(0, 0, 0, .5);
}
.score-mark .face {
  color: transparent;
  background: linear-gradient(180deg, #fff8e0 0%, #ffe08a 14%, #ffc93c 32%, #f6a71f 55%, #d98411 76%, #b96a0a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: .015em #2b1600;
  paint-order: stroke fill;
}
.score-mark .gloss {
  color: transparent;
  background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.5) 32%, rgba(255,255,255,0) 58%);
  -webkit-background-clip: text; background-clip: text;
  mix-blend-mode: screen;
}
.score-mark.score-turbo { transform: skewX(-9deg); letter-spacing: -0.01em; }
.brand-score { font-size: 2.2rem; }

/* "By Project Moneyball" endorsement: plain text only, no icon — "By" and "Project Moneyball" at
   the same size/weight/tone (var(--muted) grey), so it reads as one quiet secondary label next to
   the gold Score mark rather than competing with it. .78rem * 1.2. */
.brand-by { display: inline-flex; align-items: center; gap: 8px; }
.brand-by-label,
.brand-by-text { font-family: var(--font-display); font-size: .936rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.brand-by-text { white-space: nowrap; }

/* Toolbar band */
.band-toolbar { background: transparent; }
.toolbar-inner { display: flex; gap: 12px; height: 64px; align-items: center; background: transparent; border: none; border-radius: 0; }
/* Brand block pushed to the right edge of the toolbar (logo lives in the header). */
.toolbar-brand { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.toolbar-contact { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.toolbar-email { font-size: .82rem; color: var(--gold); text-decoration: none; white-space: nowrap; }
.toolbar-email:hover { color: var(--text); text-decoration: underline; }

/* Buttons — renewal-lab style: dark fill (same grey as the notification/cards), gold text. */
.btn { font-family: var(--font-body); font-weight: 300; font-size: 0.75rem; border: 1px solid #3a3a3a; border-radius: 6px; padding: 6px 13px; cursor: pointer; background: var(--panel); color: var(--gold); text-decoration: none; display: inline-flex; align-items: center; transition: background .15s, border-color .15s, color .15s; }
.btn:hover:not(:disabled) { background: var(--panel-2); border-color: var(--gold); }
.btn:disabled { color: rgba(255, 190, 23, 0.34); border-color: #2c2c2c; cursor: not-allowed; }
/* Soft flicker on Run while the app waits for the user to score a freshly-imported call. */
.btn.run-awaiting { border-color: var(--gold); color: var(--gold); animation: run-flicker 1.6s ease-in-out infinite; }
@keyframes run-flicker {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 190, 23, 0); opacity: 1; }
  50% { box-shadow: 0 0 22px rgba(255, 190, 23, 0.95); opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) { .btn.run-awaiting { animation: none; box-shadow: 0 0 10px rgba(255, 190, 23, 0.45); } }

.app-main { padding: 28px var(--gutter) 72px; }
/* AI-use disclosure — the Message Center box's initial content (not a separate banner), styled to
   match its terminal look (the disclosure text reuses .notif-welcome's gold styling). Ticking the
   checkbox behaves like any other new message arriving: this block demotes to the same plain grey an
   older log line falls back to (.is-old, mirroring .note's non-latest colour) rather than disappearing,
   and the normal welcome message is appended below it (see ui/aiConsent.ts + main.ts). */
.ai-ack-label { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-family: var(--font-body); font-size: .82rem; font-weight: 300; color: var(--heading); cursor: pointer; }
.ai-ack-label input { accent-color: var(--gold); width: 15px; height: 15px; cursor: pointer; margin: 0; }
.ai-disclosure-msg.is-old,
.ai-disclosure-msg.is-old .notif-welcome,
.ai-disclosure-msg.is-old .notif-welcome strong,
.ai-disclosure-msg.is-old .ai-ack-label { color: #b9b9b9; }
.ai-disclosure-msg.is-old .notif-welcome a,
.ai-disclosure-msg.is-old .notif-welcome a:visited { color: #b9b9b9; font-weight: 300; text-decoration: none; }
.ai-disclosure-msg.is-old .ai-ack-label input:disabled { opacity: .6; cursor: default; }
.divider { border: none; border-top: 1px solid rgba(255, 190, 23, .6); margin: 14px 0; }
/* Stronger, fully-gold rule — used directly under Call Details. */
.divider-strong { border-top-color: var(--gold); }
/* All section/column labels are identical in size + style (matches the perf-table headers). */
/* All section/column headers are one uniform size (matches "Runtime Monitor"). */
.section-h, .col-h, .pt-h { font-family: var(--font-display); font-size: 1rem; font-weight: 400; letter-spacing: .5px; color: var(--heading); }
.section-h, .col-h { margin: 0 0 14px; }

/* Cards */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }

/* Row 1: Message Center + Runtime Monitor — equal height (box matches the monitor's skill grid). */
.row-top { display: grid; grid-template-columns: 42% 1fr; gap: 28px; align-items: stretch; }
.notif-col, .monitor-col { display: flex; flex-direction: column; }
/* The message box is absolutely positioned inside a flex frame, so its (growing) message list never
   inflates the column. The frame stretches to the Runtime Monitor's height; the box fills it and
   SCROLLS — keeping the box's bottom aligned with where the skill grid ends, at any message count. */
/* Message Center is now a full-width band; the frame holds a fixed height and the box scrolls inside. */
.notif-frame { position: relative; height: 150px; }
.notif-box { position: absolute; inset: 0; padding: 16px 18px; overflow-y: auto; font-size: .75rem; }
.notif-box.drop-active { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset; }
/* DOS / terminal feel: monospace box, each message prefixed with a gold ">" prompt. */
.notif-box { font-family: ui-monospace, 'Cascadia Code', 'Courier New', monospace; }
/* Message Center band = two implicit (border-less) columns: Message Center left, Call Details right.
   Balance is resolution-driven (fr-based, so each side fills its share): 50/50 up to a 1920 viewport,
   60/40 above it — an ultrawide screen gives the Message Center more room. Below 820 the two-up band
   cramps, so it stacks. */
.mc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.mc-left { min-width: 0; }
.mc-right { min-width: 0; }
/* Ultrawide (viewport > 1920): widen the Message Center to 60%, Call Details 40%. */
@media (min-width: 1921px) { .mc-grid { grid-template-columns: 3fr 2fr; } }
/* Narrow (viewport < 820): stack Message Center over Call Details. */
@media (max-width: 820px) { .mc-grid { grid-template-columns: 1fr; gap: 24px; } }
/* Light by default (never bold) — the sole exception is the "How we use AI" link, kept bold + gold
   (not the browser's default purple/visited link colour) so it stands out as the one action here. */
.notif-welcome { color: var(--gold); margin: 0 0 10px; font-weight: 300; }
.notif-welcome strong { font-weight: 300; }
.notif-welcome a, .notif-welcome a:visited { color: var(--gold); font-weight: 700; text-decoration: none; }
.notif-welcome a:hover { text-decoration: underline; }
/* Recency colour: the newest message is gold; older messages fade to light grey (the prompt follows
   the line colour via currentColor). Each new message demotes the previous one in JS. */
.note { position: relative; padding: 0 0 0 16px; margin-bottom: 2px; font-size: .75rem; white-space: pre-wrap; color: #b9b9b9; }
.note-latest { color: var(--gold); }
/* DOS prompt marks the start of each message; the line carries no box, border, or background. */
.note::before { content: '>'; position: absolute; left: 0; top: 0; color: inherit; font-weight: 700; }
/* Severity now rides on the text colour instead of a left border (declared after .note-latest so an
   error/warning stays coloured even when it's the newest line). */
.note-warn { color: var(--gold); }
.note-error { color: var(--red); }

/* Runtime Monitor — a single horizontal row of equal-width skill boxes. */
.control-board { display: flex; flex-wrap: nowrap; gap: 8px; }
/* Runtime Monitor + Lifecycle boxes share one look: same size/weight/colour; light grey when inactive. */
.cb-box, .lc-box { flex: 1 1 0; min-width: 0; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); padding: 10px 6px; min-height: 58px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: .75rem; font-weight: 400; line-height: 1.2; color: #b9b9b9; overflow-wrap: anywhere; hyphens: auto; }
.cb-done { background: #1d1d1d; color: var(--muted); }
.cb-running { border-color: var(--gold); background: var(--gold); color: var(--ink); box-shadow: 0 0 16px rgba(255,190,23,.6); animation: cb-pulse 1.1s ease-in-out infinite; }
@keyframes cb-pulse { 0%,100% { box-shadow: 0 0 8px rgba(255,190,23,.45); } 50% { box-shadow: 0 0 20px rgba(255,190,23,.85); } }
.cb-error { border-color: var(--red); background: rgba(224,88,79,.18); color: var(--red); }
/* Terminal "couldn't score after auto-retries" — muted/dashed, deliberately NOT red (no manual Run prompt). */
.cb-unavailable { border-style: dashed; border-color: var(--border); background: #1d1d1d; color: var(--muted); opacity: .65; }

/* Row 2: Identified Lifecycle Stage journey — kept compact against the rows above and below. */
.row-context { margin: 0; }
.row-context .col-h { margin-bottom: 10px; }

/* Call Details — now beside the Message Center, laid out as two sub-columns of stacked
   "Label: value" fields. Each field is a flex row so the value truncates to the sub-column width. */
.mc-right .col-h { margin-bottom: 14px; }
.cd-cols { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, max-content); column-gap: 44px; row-gap: 14px; align-content: start; }
.cd-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* Field text matches the app's default body size — .75rem (13.5px at the 18px root), same as the
   Message Center notes and Runtime Monitor labels. */
.cd-field { font-size: .75rem; line-height: 1.35; color: var(--text); display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.cd-label { color: #b9b9b9; font-weight: 400; flex: 0 0 auto; white-space: nowrap; }
/* Identified value: gold + bold. Truncated with an ellipsis when long so fields never overlap; the
   full string shows on hover (title set in main.ts). */
.cd-value { color: var(--gold); font-weight: 700; flex: 1 1 auto; min-width: 0; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A Call Details row the classifier couldn't fill reliably (e.g. role with no evidence) is hidden. */
.cd-field.cd-hidden { display: none; }

/* Lifecycle Stage — left-to-right journey; boxes grow to fill the full row width. */
.lifecycle-journey { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 6px; }
.lc-box { transition: all .2s; }
.lc-box.lc-active { border-color: var(--gold); background: var(--gold); color: var(--ink); opacity: 1; box-shadow: 0 0 16px rgba(255,190,23,.55); }
.lc-arrow { flex: 0 0 auto; align-self: center; color: var(--muted); opacity: .5; font-size: 1.1rem; }

/* Row 3: Call Details | Final Score | Performance table | Templates | Quick Help.
   AUTO-REFLOW: the five frames are flex items that flow into as many columns as actually fit at the
   current width (5 → 3+2 → 2 → 1). No fixed-width assumption, so it looks intentional whether the
   browser is 1366, 1536, 1920, or ultrawide — and nothing stretches or overflows. Final Score keeps a
   fixed width; the others grow to fill each wrapped line. */
.row-results { display: flex; flex-wrap: wrap; gap: 18px; align-items: stretch; }
.col-details { flex: 1 1 260px; min-width: 0; }
.col-perf { flex: 1 1 715px; min-width: 0; }
/* Content-width wrapper: keeps the table left-packed and the Reset/Save buttons aligned to the
   Weights column's right edge (not the far edge of a wide, grown column). */
.perf-inner { width: fit-content; max-width: 100%; }
.col-details .cd-value { overflow-wrap: anywhere; }
/* Templates + Quick Help travel together: side-by-side on their own line when wrapped, and they only
   stack onto each other when even the pair is too narrow. */
.results-side { flex: 1 1 540px; display: flex; flex-wrap: wrap; gap: 18px; align-items: stretch; }

/* Final Score — no frame: a big colour-coded number, then Meaning + Evidence Coverage stacked below
   it (left-aligned, compact). Colour follows the score (green ≥100 / gold / red when low or capped). */
.col-score { flex: 0 0 222px; }
.score-circle { font-family: var(--font-display); font-size: 6rem; line-height: 1; color: var(--gold); margin: 2px 0 18px; }
.score-circle.circle-good { color: var(--green); }
.score-circle.circle-mid { color: var(--gold); }
.score-circle.circle-bad { color: var(--red); }
.score-meta { font-size: .75rem; }
.score-meaning-label, .score-coverage-label { color: var(--muted); font-weight: 600; margin-top: 12px; margin-bottom: 3px; }
.score-meaning, .score-coverage { font-weight: 700; color: var(--heading); }

/* Performance table — ONE grid so Actual and Expected rows align exactly. Columns are content-width
   (no 1fr stretch) so the Actual and Desired zones sit close together instead of spreading apart. */
/* Labels take their natural width (one line per skill) when there's room, and only wrap if the frame
   is squeezed. justify-content: start keeps the columns content-sized — the Weights dropdown never
   stretches across leftover space when the frame is wider than the table. */
.perf-grid { display: grid; grid-template-columns: minmax(80px, max-content) auto 60px minmax(80px, max-content) auto 36px auto; justify-content: start; align-items: center; row-gap: 2px; column-gap: 12px; }
.pt-h { padding-bottom: 10px; align-self: end; }
.pt-h.h-act { grid-column: 1 / 3; }
.pt-h.h-gap { grid-column: 3; }
.pt-h.h-exp { grid-column: 4 / 6; line-height: 1.15; }
/* Lowered (smaller bottom padding) so the "Weights" label clears the longer "Scorecard (<template>)"
   header beside it, even when that label wraps to a second line. */
.pt-h.h-weight { grid-column: 7; font-size: .78rem; color: var(--muted); justify-self: end; padding-bottom: 2px; }
.pt-label { font-size: .75rem; color: var(--text); padding: 6px 0; }
.pt-cell { display: inline-flex; gap: 4px; }
.pt-gap { width: 22px; }
/* Weights sit in the last grid column (col 7), pushed off the scorecard cells by the spacer col 6. */
.pt-weight { grid-column: 7; }
.pt-weight select { width: 100%; }

/* Segment cells */
.seg-bar { display: inline-flex; gap: 4px; }
.seg-cell { width: 17px; height: 17px; border: 1px solid var(--border-strong); border-radius: 3px; background: transparent; padding: 0; }
button.seg-cell { cursor: pointer; }
.seg-editable button.seg-cell:hover { border-color: var(--gold); }
.seg-actual { background: var(--green); border-color: var(--green); }
.seg-expected { background: var(--gold); border-color: var(--gold); }
.pm-weight { font-size: .78rem; padding: 5px 7px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel-2); color: var(--text); }
.perf-locked { opacity: .85; }
.template-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* Templates panel — a persistent list of the manager's OWN saved templates (per-user, never shared).
   Single-click selects, double-click opens; the Open template button opens the current selection. */
.col-templates { flex: 1 1 250px; display: flex; flex-direction: column; }
/* Open template lives in the header row, pushed to the right of the label. */
.templates-head { justify-content: space-between; gap: 12px; }
/* Size Open template to match the Copy button (compact) rather than the full toolbar button size. */
#import-template-btn { font-size: .72rem; letter-spacing: .3px; padding: 4px 9px; }
/* Give the Quick Help header the same height as the (button-bearing) Templates header, so the two
   frames below them start and end on the same line. */
.templates-head, .col-help > .col-h { min-height: 38px; }
.col-help > .col-h { display: flex; align-items: center; }
.help-box { flex: 1; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); padding: 14px 16px; font-size: .82rem; line-height: 1.5; color: var(--muted); overflow-y: auto; }
.help-box p { margin: 0 0 12px; }
.help-h { font-family: var(--font-display); font-size: 1rem; font-weight: 400; letter-spacing: .4px; color: var(--gold); margin: 0 0 4px; }
.help-box strong { color: var(--heading); }
.help-box em { color: var(--text); font-style: normal; font-weight: 600; }
.help-note { color: var(--muted); font-style: italic; }
.help-note a { color: var(--gold); }

/* Quick Help modal — opened from the header button; replaces the former always-visible help panel. */
.modal-overlay { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.6); }
.modal-overlay[hidden] { display: none; }
.modal { position: relative; width: min(560px, 100%); max-height: 85vh; overflow-y: auto; background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); padding: 22px 24px; }
.modal-h { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; letter-spacing: .5px; color: var(--heading); margin: 0 0 12px; }
.modal-x { position: absolute; top: 10px; right: 12px; background: transparent; border: none; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.modal-x:hover { color: var(--gold); }
.modal .help-box { border: none; background: transparent; padding: 0; overflow: visible; }
.modal-actions { display: flex; justify-content: flex-end; margin-top: 18px; }

/* Row 4: Score Analysis, Recommendations, MEDDPICC — each stacked full page width. */
.row-analysis { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: stretch; }
.col-head { display: flex; align-items: center; justify-content: flex-start; gap: 14px; margin-bottom: 14px; }
.col-head .col-h { margin: 0; }
.copy-btn { font-family: var(--font-body); font-weight: 300; font-size: .72rem; letter-spacing: .3px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--gold); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.copy-btn:hover { background: var(--panel-2); border-color: var(--gold); }
.copy-btn.copied { color: #34c46a; border-color: #34c46a; }
.copy-btn svg { display: block; }
.scroll-box { padding: 16px 18px; height: 300px; overflow-y: auto; font-size: .75rem; }
.analysis-section { margin-bottom: 14px; }
.analysis-title { font-weight: 700; text-decoration: underline; margin-bottom: 5px; color: var(--heading); }
.scroll-box ul { margin: 0 0 4px; padding-left: 18px; color: var(--text); }
.scroll-box li { margin-bottom: 4px; }
.rec-list { margin: 0; padding-left: 18px; }

/* MEDDPICC qualification box (auxiliary, non-scoring) — lives in row 3 beside Score Analysis
   and Recommendations, sharing their .scroll-box shell. */
.scroll-box .meddpicc-list { list-style: none; margin: 0; padding: 0; }
.meddpicc-item { padding: 9px 0; border-bottom: 1px solid var(--border); }
.scroll-box .meddpicc-item { margin: 0; }
.meddpicc-item:last-child { border-bottom: none; }
.meddpicc-head { display: flex; align-items: center; gap: 8px; }
.meddpicc-letter { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 5px; background: var(--panel-2); border: 1px solid var(--border); color: var(--heading); font-family: var(--font-display); font-size: .82rem; display: inline-flex; align-items: center; justify-content: center; }
.meddpicc-label { flex: 1; font-weight: 700; font-size: .82rem; color: var(--heading); }
.meddpicc-status { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.meddpicc-status-strong { background: rgba(52, 196, 106, .18); color: var(--green); }
.meddpicc-status-weak { background: rgba(255, 190, 23, .18); color: var(--gold); }
.meddpicc-status-missing { background: rgba(224, 88, 79, .18); color: var(--red); }
.meddpicc-note { margin: 4px 0 0 28px; color: var(--muted); font-size: .8rem; }
.meddpicc-evidence { margin: 5px 0 0 28px; padding-left: 10px; border-left: 2px solid var(--border-strong); color: var(--text); font-size: .8rem; font-style: italic; }
.meddpicc-unavailable { margin: 0; padding: 10px 12px; border: 1px solid var(--border-strong); border-left: 3px solid var(--gold); border-radius: 7px; background: var(--panel-2); color: var(--muted); font-size: .82rem; line-height: 1.45; }

/* Brand socials (reused by the toolbar brand block). */
.socials { display: flex; gap: 12px; }
.social { width: 34px; height: 34px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; }
.social-li { background: #0a66c2; }
.social-yt { background: #ff0000; }

@media (max-width: 1040px) {
  .row-top, .row-results, .row-analysis { grid-template-columns: 1fr; }
  .control-board { grid-template-columns: repeat(2, 1fr); }
  /* Stage journey can't fit 9 boxes in one row on a phone — let it wrap. */
  .lifecycle-journey { flex-wrap: wrap; }
  .lc-box { flex: 1 1 28%; }
  .lc-arrow { display: none; }
  .perf-grid { grid-template-columns: minmax(90px, 1fr) auto 44px minmax(90px, 1fr) auto 20px auto; column-gap: 8px; }
  .toolbar-inner { flex-wrap: wrap; height: auto; padding: 10px 0; }
  .toolbar-brand { margin-left: 0; }
}
/* ---------- Print report (Download PDF): a sales-coach's working document ---------- */
/* Body-copy font-size tokens — the single source of truth for the report's running text. Defined on
   the #report container so BOTH the page and the sibling footer inherit them. Every body/paragraph/
   list/table-cell rule below pulls from --rep-body, so a new section (or an element that forgets to
   set a size and inherits the base) can never drift out of scale; --rep-fine is the one deliberate
   step down, reserved for captions/metadata (scores, coverage, glossary defs, footer). */
.report-sheet { display: none; --rep-body: 9.5pt; --rep-fine: 8.3pt; }
.rep-page {
  color: #111;
  font-family: var(--font-body);
  font-size: var(--rep-body);
  line-height: 1.42;
}

/* Masthead: dark branded band (matches the app's header/toolbar look), left-aligned, PCB texture. */
.rep-masthead {
  position: relative;
  overflow: hidden;
  background: var(--header-bg) url('/assets/pcb-bg.svg') center / cover no-repeat;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.rep-masthead::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(17, 17, 17, 0.95), rgba(17, 17, 17, 0.86));
}
.rep-masthead > * { position: relative; z-index: 1; }
.rep-mast-brand { display: flex; align-items: center; gap: 18px; text-align: left; }
.rep-mast-score-lockup { display: flex; align-items: center; gap: 8px; }
.rep-mast-score-lockup .score-mark { font-size: 22pt; }
.rep-mast-score-lockup .brand-by-label { font-size: 6.5pt; color: #cfcfcf; }
.rep-mast-logo { height: 26px; width: auto; }
.rep-mast-title { font-family: var(--font-display); font-size: 23pt; letter-spacing: 0.5px; color: #fdfaf3; line-height: 1.05; }
.rep-mast-right { text-align: right; color: #cfcfcf; }
.rep-mast-date { font-size: 9pt; }
.rep-mast-tag { font-size: 8pt; color: var(--gold); margin-top: 2px; }

/* Call details strip — mirrors the dashboard's Call Details panel. */
.rep-details { display: flex; flex-wrap: wrap; gap: 16px; border-bottom: 1px solid #ddd; padding-bottom: 9px; margin-bottom: 11px; }
.rep-details-field { min-width: 90px; }
.rep-details-label { font-size: 7.5pt; letter-spacing: 0.4px; text-transform: uppercase; color: #888; }
.rep-details-value { font-size: var(--rep-body); font-weight: 700; color: #111; }

.rep-section { margin-bottom: 11px; break-inside: avoid; }
.rep-section--flow { break-inside: auto; }
.rep-h { font-family: var(--font-display); font-size: 11.5pt; letter-spacing: .4px; color: #111; border-left: 3px solid var(--gold); padding-left: 7px; margin: 0 0 5px; }
.rep-quicktake { background: var(--cream); border-radius: 6px; padding: 8px 10px; font-weight: 600; }
.rep-outcome { display: flex; gap: 18px; align-items: flex-start; }
.rep-scorecol { flex: 0 0 132px; text-align: center; border-radius: 8px; padding: 12px 8px; color: #fff; }
.rep-scorecol.rep-good { background: var(--green-deep); }
.rep-scorecol.rep-mid { background: #c79100; }
.rep-scorecol.rep-bad { background: #b3433b; }
.rep-score { font-family: var(--font-display); font-size: 34pt; line-height: 1; color: #fff; }
.rep-meaning { font-weight: 700; font-size: 9.5pt; margin-top: 4px; color: #fff; }
.rep-coverage { font-size: var(--rep-fine); color: rgba(255, 255, 255, 0.85); margin-top: 3px; }
.rep-skills { flex: 1; }
.rep-skill-row { display: grid; grid-template-columns: 1fr 50px 96px 16px; gap: 6px; padding: 2.5px 6px; border-bottom: 1px solid #eee; font-size: var(--rep-body); }
.rep-skill-head { font-weight: 700; background: var(--cream); border-bottom: 1.5px solid #111; border-radius: 4px 4px 0 0; }
.rs-val, .rs-flag { text-align: center; }
.rs-meets { color: var(--green-deep); font-weight: 700; }
.rs-gap { color: #b3433b; font-weight: 700; }
.rep-list { margin: 2px 0 0; padding-left: 16px; font-size: var(--rep-body); }
.rep-list li { margin-bottom: 2.5px; }
.rep-blurb { margin: 0 0 5px; font-size: var(--rep-body); color: #222; }

/* Worked/gap coaching blocks — score line, summary, and a "Coach:"/"Reinforce:" action, so a
   manager can read this straight into a 1:1 instead of paraphrasing a bare bullet. */
.rep-gaplist { display: flex; flex-direction: column; gap: 6px; }
.rep-gap { break-inside: avoid; border-radius: 6px; padding: 6px 9px; border-left: 3px solid #ccc; background: #fafafa; }
.rep-gap.rep-gap-good { border-left-color: var(--green-deep); }
.rep-gap.rep-gap-bad { border-left-color: #b3433b; }
.rep-gap-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rep-gap-name { font-weight: 700; font-size: var(--rep-body); color: #111; }
.rep-gap-score { font-size: var(--rep-fine); color: #555; white-space: nowrap; }
.rep-gap-summary { font-size: var(--rep-body); color: #333; margin-top: 1px; }
.rep-gap-coach { font-size: var(--rep-body); color: #111; margin-top: 3px; }

/* Skill glossary — compact two-column reference so a manager can coach without memorizing 11 defs. */
.rep-glossary { columns: 2; column-gap: 18px; }
.rep-glossary-item { break-inside: avoid; margin-bottom: 7px; }
.rep-glossary-name { font-weight: 700; font-size: var(--rep-body); color: #111; }
.rep-glossary-def { font-size: var(--rep-fine); color: #444; }

/* Closing card: PM pitch + next-step CTAs + signature + QR, as ONE block. break-inside: avoid is
   the template guarantee that this signature can never split across a page again. */
.rep-close {
  break-inside: avoid;
  display: flex;
  gap: 20px;
  border: 1px solid #e3cf94;
  border-top: 3px solid var(--gold);
  background: var(--cream);
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 12px;
}
.rep-close-main { flex: 1; }
.rep-cta-cards { display: flex; gap: 10px; margin-top: 8px; }
.rep-cta-card { flex: 1; background: #fff; border: 1px solid #e6dcc0; border-radius: 6px; padding: 7px 9px; }
.rep-cta-title { font-weight: 700; font-size: 8.8pt; color: #111; margin-bottom: 2px; }
.rep-cta-body { font-size: 8pt; color: #444; }
.rep-close-sign { flex: 0 0 150px; text-align: center; border-left: 1px solid #e3cf94; padding-left: 16px; }
.rep-signname { font-family: var(--font-display); font-size: 13pt; color: #111; }
.rep-signrole { font-size: 8.5pt; color: #444; margin-bottom: 3px; }
.rep-contact { font-size: 8.5pt; color: #111; text-decoration: none; display: block; margin-bottom: 8px; }
.rep-qrblock { text-align: center; }
.rep-qr { width: 74px; height: 74px; }
.rep-cta-caption { font-size: 7.3pt; color: #444; max-width: 140px; margin: 3px auto 0; }

/* Site footer: trust & legal links (dark theme, matches app chrome). */
/* Footer: content centered; height matches the rail's sign-out foot (60px) so their top borders line
   up along the bottom of the page. */
.site-footer { border-top: 1px solid var(--border); margin-top: auto; }
/* Height matched to the sidenav foot (60px incl. its top border) so both bottom rules align. */
.site-footer-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 59px; padding: 0 var(--gutter); text-align: center; }
.sf-line { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 16px; line-height: 1.2; }
.sf-brand { font-size: 0.82rem; color: var(--muted); }
.sf-contact { font-size: 0.8rem; color: var(--muted); }
.sf-contact a { color: var(--gold); text-decoration: none; }
.sf-site { font-size: 0.82rem; font-weight: 500; letter-spacing: .02em; color: var(--gold); text-decoration: none; }
.sf-site:hover { text-decoration: underline; }
.sf-contact a:hover { text-decoration: underline; }
/* Social logos: light grey by default; each reveals its brand colour on hover. */
.sf-socials { display: flex; align-items: center; gap: 14px; }
.sf-social { display: inline-flex; color: var(--muted); transition: color .15s; }
.sf-li:hover { color: #0a66c2; }
.sf-yt:hover { color: #ff0000; }

/* Repeating page footer: a fixed element the print engine repaints on every page. It sits in the
   reserved bottom page-margin band (see @page below) via a negative offset, so it never overlaps the
   flowing report content. Hidden on screen; only laid out inside @media print. */
.rep-footer { display: none; }

@media print {
  /* Extra bottom margin reserves a band for the repeating footer so content never runs under it. */
  @page { size: A4; margin: 13mm 13mm 17mm; }
  html, body { background: #fff !important; }
  /* Allowlist, not denylist: hide the entire app shell and show only the report. This survives any
     future chrome refactor (previously listed stale selectors and let the app UI leak onto page 1). */
  .app-shell { display: none !important; }
  .report-sheet { display: block !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rep-footer {
    display: flex !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: -9mm; /* drop into the reserved 17mm bottom margin, clear of flowing content */
    height: 9mm;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-top: 1px solid #ddd;
    color: #666;
    font-size: var(--rep-fine);
  }
  .rep-footer-mark { font-family: var(--font-display); letter-spacing: 1px; color: #111; }
  .rep-footer-sep { color: #bbb; }
  .rep-footer-link { color: var(--gold); text-decoration: none; }
}

/* High-Level Summary — opening narrative paragraph(s) at the top of Score Analysis. */
.summary-para { margin: 6px 0 10px; line-height: 1.5; }