/* =====================================================================
   interview.ohms.app — OHMS Industries brand surface
   ---------------------------------------------------------------------
   Void + cyan. Cyan is the single signal — the mark, the active state,
   the primary action, the "good" reading. Everything else is void / deep
   / lume / dim / hairline. Two operational hues (warn, alert) are kept
   muted and rare so cyan always stays the star.

   Type: Michroma (display / wordmark) · Chakra Petch (body, UI, headings)
         · JetBrains Mono (labels, scores, telemetry, captions).
   ===================================================================== */
:root {
    /* Surfaces — void → deep → lifted panel */
    --void:    #05080A;
    --deep:    #0A0F13;
    --panel:   #0E1519;

    /* Foreground */
    --lume:    #E6F8FB;
    --dim:     rgba(220, 245, 250, 0.55);

    /* Signal — cyan stands alone */
    --cyan:     #00E5FF;
    --cyan-dim: #0AA3B8;

    /* Hairlines (cyan at low alpha) */
    --line:        rgba(0, 229, 255, 0.18);
    --line-strong: rgba(0, 229, 255, 0.35);

    /* Operational status — muted, subordinate to cyan, used sparingly */
    --warn:  #E0B341;  /* in-progress / ingesting */
    --alert: #FF5C6A;  /* failed / error / low score */
    --ok:    var(--cyan); /* ready / online / high score == the signal */

    /* Type + shape */
    --display: 'Michroma', system-ui, sans-serif;
    --sans:    'Chakra Petch', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono:    'JetBrains Mono', 'Berkeley Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --radius: 12px;
    --radius-sm: 10px;

    /* The Ohms drop-shadow glow — for the mark on dark surfaces only */
    --glow:
        drop-shadow(0 0 6px rgba(0, 229, 255, 0.5))
        drop-shadow(0 0 14px rgba(0, 229, 255, 0.25));

    /* The dark gradient that opens every Ohms surface */
    --bg-gradient:
        radial-gradient(120% 80% at 50% 0%, #0A0F13 0%, #05080A 70%, #020306 100%);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100vh;
    background: var(--void);
    background-image: var(--bg-gradient);
    background-attachment: fixed;
    color: var(--lume);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--cyan); color: var(--void); }

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.5rem; margin: 0 0 0.2rem; letter-spacing: 0; font-weight: 600; }
h2 { font-size: 1.12rem; margin: 0 0 0.6rem; font-weight: 600; }
h3 { font-size: 1rem; margin: 0; font-weight: 600; }
p  { margin: 0.35rem 0; }

.muted { color: var(--dim); font-size: 0.86rem; }

/* ---------- Shell ---------- */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.85rem 1.6rem;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--deep) 78%, transparent);
    backdrop-filter: blur(10px);
    position: sticky; top: 0; z-index: 10;
}

/* ---------- App-bar lockup: pixel-Ω · 1px cyan divider · wordmark ---------- */
.brand { display: flex; align-items: center; gap: 0.7rem; color: var(--lume); }
.brand:hover { text-decoration: none; }
.brand__mark {
    width: 30px; height: 30px; color: var(--cyan); flex-shrink: 0;
    filter: drop-shadow(0 0 7px rgba(0, 229, 255, 0.4));
}
.brand__divider {
    width: 1px; height: 22px; background: var(--line-strong); flex-shrink: 0;
}
.brand__word { display: flex; flex-direction: column; line-height: 1; }
.brand__primary {
    font-family: var(--display); font-size: 0.8rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--lume);
}
.brand__sub {
    font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.34em;
    text-transform: uppercase; color: var(--dim); margin-top: 4px;
}

.topnav { display: flex; align-items: center; gap: 0.5rem; }
.topnav__link {
    font-family: var(--mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--dim); padding: 0.45rem 0.75rem; border-radius: var(--radius-sm);
    border: 1px solid transparent; transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.topnav__link:hover { color: var(--lume); text-decoration: none; }
.topnav__link.active { color: var(--cyan); box-shadow: inset 0 -2px 0 var(--cyan); border-radius: 0; }
.topnav__link--cta { border-color: var(--line-strong); color: var(--lume); }
.topnav__link--cta:hover { background: var(--cyan); border-color: var(--cyan); color: var(--void); }

.app-main { flex: 1; }
.app-main__inner { max-width: 980px; margin: 0 auto; padding: 1.8rem 1.6rem 4rem; }

/* ---------- Page head ---------- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
/* Wrap rather than overflow off-screen when the bar is busy; wrapped rows stay right-aligned under
   the title. The grouped Export/Practice menus keep it to one row at normal widths. */
.page-head__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
.back { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--dim); }
.back:hover { color: var(--cyan); }

/* ---------- Buttons ---------- */
.btn {
    font-family: var(--mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--lume); background: var(--deep); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 0.65rem 1rem; cursor: pointer;
    transition: border-color 0.16s ease, transform 0.16s ease, opacity 0.16s ease, background 0.16s ease;
    display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap;
}
.btn:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--cyan); transform: translateY(-1px); text-decoration: none; }
/* [aria-disabled] covers the non-button export links (TRACK-009b "Download PDF" <a>), which can't use
   the native :disabled state but must read identically to a disabled button. */
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.btn--primary {
    background: var(--cyan); border-color: var(--cyan); color: var(--void); font-weight: 600;
}
.btn--primary:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 0 14px rgba(0, 229, 255, 0.4); }
.btn--sm { padding: 0.42rem 0.7rem; font-size: 0.72rem; }
/* Destructive actions (TRACK-005): a muted outline that flushes to alert-red on hover, so a delete
   never competes with the primary CTA but reads unmistakably destructive once you reach for it. */
.btn--danger { color: var(--alert); border-color: color-mix(in srgb, var(--alert) 40%, transparent); }
.btn--danger:hover:not(:disabled) { border-color: var(--alert); background: color-mix(in srgb, var(--alert) 14%, transparent); }

/* ---------- Action-bar dropdown menu (native <details>; closed by menu.js) ---------- */
/* Groups related actions (Export, Practice) under one button so the bar doesn't run off-screen. The
   <summary> wears .btn so it matches the bar; a chevron marks it as a disclosure. */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: "\25BE"; font-size: 0.7em; opacity: 0.75; margin-left: 0.15rem; }
.menu[open] > summary { border-color: var(--cyan); }
.menu__list {
    position: absolute; top: calc(100% + 0.35rem); right: 0; z-index: 50;
    display: grid; gap: 0.3rem; min-width: 12.5rem; padding: 0.4rem;
    background: var(--deep); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
}
/* Items fill the menu and read as a left-aligned list, not a row of pills. */
.menu__list .btn { width: 100%; justify-content: flex-start; white-space: nowrap; }

/* ---------- Badges / tags / chips ---------- */
.badge {
    font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em;
    padding: 0.18rem 0.5rem; border-radius: 999px; border: 1px solid var(--line); color: var(--dim);
}
.badge--ready     { color: var(--cyan);  border-color: var(--line-strong); }
.badge--ingesting { color: var(--warn);  border-color: color-mix(in srgb, var(--warn) 45%, transparent); animation: pulse 1.6s ease-in-out infinite; }
.badge--draft     { color: var(--dim); }
.badge--failed    { color: var(--alert); border-color: color-mix(in srgb, var(--alert) 45%, transparent); }
/* Prep-language badge (TRACK-090): shown on a position header when the prep language is not English. */
.badge--lang      { color: var(--cyan); border-color: var(--line-strong); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.tag {
    font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.09em;
    padding: 0.14rem 0.45rem; border-radius: 6px; border: 1px solid var(--line); color: var(--dim);
}
.tag--technical    { color: var(--cyan); border-color: var(--line-strong); }
.tag--behavioural  { color: var(--lume); }
.tag--situational  { color: var(--cyan-dim); border-color: color-mix(in srgb, var(--cyan-dim) 45%, transparent); }
.tag--motivational { color: var(--dim); }
.tag--background   { color: var(--dim); opacity: 0.8; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
    font-size: 0.8rem; padding: 0.3rem 0.6rem; border-radius: 999px;
    background: var(--panel); border: 1px solid var(--line); color: var(--lume);
    display: inline-flex; align-items: center; gap: 0.4rem;
}
.chip__w { font-family: var(--mono); font-size: 0.66rem; color: var(--cyan); }
.chip--on { border-color: var(--cyan); color: var(--cyan); cursor: pointer; }
.chip[type="button"], button.chip { cursor: pointer; }

/* ---------- Question bank suggest (TRACK-050) ---------- */
.qbank__filters { margin-bottom: 0.8rem; align-items: center; }
.qbank__list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.qbank__row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel);
}
.qbank__row--picked { border-color: var(--cyan); }
.qbank__pick { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 60%; cursor: pointer; }
.qbank__qtext { color: var(--lume); }
.qbank__probe { flex-basis: 100%; font-size: 0.78rem; }
.qbank__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ---------- Cards (positions list) ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.9rem; }
.card {
    background: var(--deep); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.1rem; transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.card--link:hover { border-color: var(--cyan); transform: translateY(-2px); text-decoration: none; box-shadow: 0 0 0 1px var(--line-strong), 0 8px 30px rgba(0, 0, 0, 0.45); }
.card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.card__top h3 { color: var(--lume); }
.card__sub { color: var(--dim); font-size: 0.9rem; margin: 0.3rem 0 0; }
.card__meta { display: flex; gap: 0.9rem; margin-top: 0.8rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; }

/* ---------- Panels ---------- */
.panel {
    background: var(--deep); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.1rem 1.2rem; margin-bottom: 1.1rem;
}
.panel__title { font-size: 1rem; margin: 0 0 0.7rem; cursor: default; font-weight: 600; }
details.panel > summary.panel__title { cursor: pointer; list-style: none; }
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary::before { content: "\25B8 "; color: var(--cyan); }
details.panel[open] > summary::before { content: "\25BE "; }

/* ---------- Evidence ---------- */
.evidence { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.evidence li { padding: 0.5rem 0.7rem; background: var(--panel); border-radius: var(--radius-sm); border: 1px solid var(--line); font-size: 0.88rem; }
/* Deletable evidence row (TRACK-005): body grows, the ✕ delete button sits flush right. */
.evidence__row { display: flex; align-items: flex-start; gap: 0.6rem; }
.evidence__body { flex: 1; min-width: 0; }
.evidence__result { color: var(--cyan); }
.evidence__tags { display: block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--dim); margin-top: 0.2rem; }
/* Edit + delete controls (TRACK-006): sit flush right next to each other. */
.evidence__actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
/* Origin / edited markers (TRACK-006): small monospace pills next to the title. */
.evidence__badge {
    display: inline-block; margin-left: 0.45rem; padding: 0.05rem 0.4rem;
    font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
    border-radius: var(--radius-sm); border: 1px solid var(--line); vertical-align: middle;
}
.evidence__badge--manual { color: var(--cyan); border-color: var(--line-strong); }
.evidence__badge--distilled { color: var(--dim); }
.evidence__badge--edited { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
/* Inline editor for one evidence item (TRACK-006): reuses the page's .field / .form layout. */
.evidence-editor { flex: 1; min-width: 0; display: grid; gap: 0.6rem; }
.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; }
.panel__note { font-size: 0.78rem; margin: 0 0 0.7rem; }
/* Expanded source text (TRACK-110): the extracted text a source contributes, shown on "View". */
.source__text {
    white-space: pre-wrap; word-break: break-word;
    max-height: 16rem; overflow: auto;
    margin: 0.5rem 0 0; padding: 0.6rem 0.7rem;
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.02);
    font-family: var(--mono); font-size: 0.76rem; line-height: 1.5; color: var(--dim);
}

/* ---------- Questions / answers ---------- */
.questions { display: grid; gap: 1rem; }
.qcard { background: var(--deep); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.qcard__head { display: flex; align-items: flex-start; gap: 0.8rem; }
.qnum {
    font-family: var(--mono); font-size: 0.8rem; color: var(--cyan);
    border: 1px solid var(--line-strong); border-radius: 8px; width: 1.9rem; height: 1.9rem;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.qcard__q { flex: 1; display: flex; flex-direction: column; gap: 0.35rem; }
.qcard__text { font-weight: 500; margin: 0; }
.qcard__rationale { font-size: 0.78rem; }

/* ---------- Question editing (TRACK-007) ---------- */
.qcard__actions { display: flex; align-items: flex-start; gap: 0.4rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.qcard__reorder { display: flex; flex-direction: column; gap: 0.2rem; }
.btn--icon { padding: 0.1rem 0.4rem; line-height: 1; font-size: 0.7rem; }
.qcard__stale { font-size: 0.75rem; color: var(--warn); }

.qcard--add { border-style: dashed; }
.qadd { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.qadd__text { flex: 1; min-width: 14rem; }
.qadd__type { width: auto; }

.qedit { display: flex; flex-direction: column; gap: 0.5rem; }
.qedit__text { width: 100%; resize: vertical; }
.qedit__row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.qedit__type { width: auto; }
.qedit__rationale { flex: 1; min-width: 12rem; }
.qedit__actions { display: flex; gap: 0.4rem; }

.answer { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px dashed var(--line); }
.answer__scorebar { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; }
.answer__iters { margin-left: auto; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; }
.answer__text { white-space: pre-wrap; line-height: 1.6; }

/* ---------- Pin / edit an answer (TRACK-008) ---------- */
.answer__pinned { font-size: 0.72rem; color: var(--lume); letter-spacing: 0.02em; }
.answer__edited { font-size: 0.72rem; color: var(--amber, #d8a24a); font-style: italic; }
.answer-edit { display: flex; flex-direction: column; gap: 0.5rem; }
.answer-edit__text { width: 100%; resize: vertical; line-height: 1.6; }
.answer-edit__actions { display: flex; gap: 0.4rem; }
.history__pinned { margin-left: auto; font-size: 0.72rem; color: var(--lume); white-space: nowrap; }

/* ---------- Guided STAR answer-builder (TRACK-060) ---------- */
.answer__manual { font-size: 0.72rem; color: var(--cyan); letter-spacing: 0.02em; white-space: nowrap; }
.history__manual { font-size: 0.7rem; color: var(--cyan); white-space: nowrap; }
.star-builder {
    display: flex; flex-direction: column; gap: 0.85rem;
    margin-top: 0.75rem; padding: 0.9rem 1rem;
    background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.star-builder__head { display: flex; flex-direction: column; gap: 0.3rem; }
.star-builder__title { font-family: var(--mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--cyan); }
.star-builder__import { gap: 0.3rem; }
.star-builder__import-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.star-builder__import-select { flex: 1; min-width: 14rem; }
.star-builder__fields { display: flex; flex-direction: column; gap: 0.7rem; }
.star-builder__actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.star-builder__saved { color: var(--cyan); }
.star-builder__error { margin-bottom: 0; }

/* ---------- Live streaming surface (TRACK-010) ---------- */
.answer__streaming { border-top-style: solid; border-top-color: var(--line-strong); }
.answer__text--settling { color: var(--dim); }

.pass-indicator { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.55rem;
    font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cyan); }
.pass-indicator__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan);
    box-shadow: 0 0 6px var(--cyan); animation: pulse 1.1s ease-in-out infinite; }
.pass-indicator__label { color: var(--cyan); }

.caret { display: inline-block; width: 0.5ch; margin-left: 1px; color: var(--cyan);
    animation: blink 1s step-end infinite; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }

@media (prefers-reduced-motion: reduce) {
    .caret { animation: none; }
    .pass-indicator__dot { animation: none; }
}

.score {
    font-family: var(--mono); font-weight: 700; font-size: 1.1rem;
    width: 2.6rem; height: 2.6rem; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line);
}
.score--sm { width: 2rem; height: 2rem; font-size: 0.8rem; }
.score--lg { width: 4rem; height: 4rem; font-size: 1.7rem; border-radius: var(--radius); }
.score--high { color: var(--cyan);  border-color: var(--line-strong); background: color-mix(in srgb, var(--cyan) 12%, transparent); }
.score--mid  { color: var(--lume);  border-color: var(--line); background: color-mix(in srgb, var(--lume) 6%, transparent); }
.score--low  { color: var(--alert); border-color: color-mix(in srgb, var(--alert) 55%, transparent); background: color-mix(in srgb, var(--alert) 12%, transparent); }
.verdict { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); }

/* =====================================================================
   Readiness analytics (TRACK-070) — pure CSS/SVG, no chart library.
   Reuses the score bands, dim bars, cards, chips, and ember tokens.
   ===================================================================== */

/* Per-position strip on PositionDetail */
.readiness-strip {
    display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
    background: var(--deep); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 0.7rem 0.9rem; margin-bottom: 1.1rem;
}
.readiness-strip__body { display: flex; flex-direction: column; gap: 0.1rem; }
.readiness-strip__band { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cyan); }
.readiness-strip__weak { margin-left: auto; }

/* Portfolio summary band */
.readiness-summary { display: flex; align-items: center; gap: 1.1rem; }
.readiness-summary__stats { display: flex; flex-direction: column; gap: 0.2rem; }
.readiness-summary__band { font-family: var(--display); font-size: 1.05rem; color: var(--lume); }

.readiness-section-title { font-size: 1rem; font-weight: 600; margin: 1.4rem 0 0.7rem; }

/* Per-position card */
.readiness-card { display: flex; flex-direction: column; gap: 0.5rem; }
.readiness-card__coverage { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.78rem; }
.readiness-card__coverage .dim__bar { height: 6px; }
.readiness-card__empty { font-size: 0.82rem; margin: 0.2rem 0 0; }
.readiness-card__weak { align-items: center; }
.readiness-card__weak-label { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; }

/* Trend sparkline (inline SVG) */
.trend { display: flex; flex-direction: column; gap: 0.4rem; }
.trend__svg { width: 100%; height: 120px; display: block; }
.trend__line { fill: none; stroke: var(--cyan); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.trend__guide { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.trend__dot { fill: var(--cyan); stroke: var(--deep); stroke-width: 1; }
.trend__axis { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.04em; }
.trend__guide-label { color: var(--dim); }
.trend__empty { font-size: 0.86rem; }

/* Weak-axis heatmap */
.heatmap-wrap { overflow-x: auto; }
.heatmap { border-collapse: collapse; font-size: 0.8rem; }
.heatmap th, .heatmap td { padding: 0.35rem 0.5rem; text-align: center; }
.heatmap__corner { text-align: left; color: var(--dim); font-weight: 600; }
.heatmap__axis { text-align: left; color: var(--lume); font-weight: 500; white-space: nowrap; }
.heatmap__pos { font-family: var(--mono); font-size: 0.68rem; color: var(--dim); font-weight: 500; }
.heatmap__pos--all { color: var(--cyan); }
.heatmap__cell {
    font-family: var(--mono); font-weight: 600; min-width: 2.4rem;
    border-radius: 6px; border: 1px solid var(--line);
}
.heatmap__cell--all { border-color: var(--line-strong); }
.heatmap__cell--empty { background: var(--panel); border-style: dashed; color: transparent; }
.heatmap__cell--high { color: var(--cyan);  background: color-mix(in srgb, var(--cyan) 16%, transparent); }
.heatmap__cell--mid  { color: var(--lume);  background: color-mix(in srgb, var(--warn) 16%, transparent); }
.heatmap__cell--low  { color: var(--alert); background: color-mix(in srgb, var(--alert) 18%, transparent); }

/* Auto study plan (TRACK-102) — reuses .panel/.chip/.score/.btn tokens. */
.study-plan__ready { color: var(--cyan); font-size: 0.9rem; margin: 0.3rem 0 0; }
.readiness-plan-role { font-size: 0.92rem; font-weight: 600; margin: 1.1rem 0 0.4rem; }
.study-plan__axis { margin-top: 0.9rem; }
.study-plan__axis-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.study-plan__axis-label { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--lume); }
.study-plan__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; counter-reset: study; }
.study-plan__item {
    display: flex; align-items: center; gap: 0.8rem;
    background: var(--deep); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 0.55rem 0.75rem;
}
.study-plan__item::before {
    counter-increment: study; content: counter(study);
    font-family: var(--mono); font-size: 0.72rem; color: var(--dim);
    flex-shrink: 0; width: 1.1rem; text-align: right;
}
.study-plan__item-body { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; }
.study-plan__q { font-size: 0.86rem; color: var(--lume); }
.study-plan__why { font-size: 0.74rem; }
.study-plan__item-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }

/* Cross-position greatest hits / under-used (TRACK-105) — reuses .panel/.chip/.muted tokens. */
.greatest-hits__sub { font-size: 0.82rem; font-weight: 600; margin: 1rem 0 0.5rem; color: var(--lume); }
.greatest-hits__sub--muted { color: var(--dim); }
.greatest-hits__hint { font-size: 0.78rem; margin: 0 0 0.5rem; }
.greatest-hits__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; counter-reset: hit; }
.greatest-hits__item {
    display: flex; align-items: center; gap: 0.8rem;
    background: var(--deep); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 0.55rem 0.75rem;
}
.greatest-hits__item::before {
    counter-increment: hit; content: counter(hit);
    font-family: var(--mono); font-size: 0.72rem; color: var(--dim);
    flex-shrink: 0; width: 1.1rem; text-align: right;
}
.greatest-hits__body { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; min-width: 0; }
.greatest-hits__title { font-size: 0.86rem; color: var(--lume); }
.greatest-hits__meta { font-size: 0.74rem; }
.greatest-hits__axes { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.1rem; }
.greatest-hits__actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.greatest-hits__underused { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.greatest-hits__underused-item {
    display: flex; align-items: baseline; gap: 0.6rem; justify-content: space-between;
    font-size: 0.82rem; color: var(--dim);
    padding: 0.3rem 0.1rem; border-bottom: 1px solid var(--line);
}
.greatest-hits__underused-item:last-child { border-bottom: none; }

.card__top-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

/* dimension bars */
.dims { display: grid; gap: 0.35rem; margin: 0.8rem 0; }
.dim { display: grid; grid-template-columns: 7.5rem 1fr 2rem; align-items: center; gap: 0.6rem; font-size: 0.78rem; }
.dim__k { font-family: var(--mono); color: var(--dim); }
.dim__bar { height: 6px; background: var(--panel); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.dim__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan-dim), var(--cyan)); }
.dim__v { font-family: var(--mono); text-align: right; color: var(--lume); }

.critique { font-size: 0.86rem; color: var(--lume); background: var(--panel); border-left: 2px solid var(--cyan); border-radius: 6px; padding: 0.55rem 0.75rem; margin: 0.7rem 0; }

.followups { margin-top: 0.8rem; }
.followups__label { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cyan); }
.followups ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.followups li { font-size: 0.86rem; margin: 0.2rem 0; }

/* Persona critics (TRACK-106) — three scored cards under the best answer, reusing the score/
   verdict/.dims/.critique visual language. Ephemeral; shown only while the toggle is open. */
.persona-critiques { margin-top: 0.9rem; display: grid; gap: 0.7rem; }
.persona-critiques__label { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cyan); }
.persona-critiques__error { font-size: 0.84rem; color: var(--lume); background: var(--panel); border-left: 2px solid #d9534f; border-radius: 6px; padding: 0.5rem 0.7rem; margin: 0.7rem 0; }
.persona-card { border: 1px solid var(--line); border-radius: 8px; padding: 0.7rem 0.8rem; background: rgba(255,255,255,0.015); }
.persona-card__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.45rem; }
.persona-card__name { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--lume); }
.persona-card .critique { margin: 0.55rem 0 0; }

/* Inline "?" help affordance (intuitive-help-coaching) — a click-dismissable popover that
   explains one concept. Trigger is a small mono "?" disc; the popover is a left-aligned,
   normal-case card anchored under it, with a fixed transparent backdrop catching outside clicks. */
.helphint { position: relative; display: inline-flex; vertical-align: middle; }
.helphint__trigger {
    width: 1.05rem; height: 1.05rem; padding: 0; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 0.66rem; font-weight: 700;
    color: var(--dim); background: transparent;
    border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.helphint__trigger:hover, .helphint__trigger[aria-expanded="true"] { color: var(--cyan); border-color: var(--cyan); }
.helphint__backdrop { position: fixed; inset: 0; z-index: 60; background: transparent; cursor: default; }
.helphint__pop {
    position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%);
    z-index: 61; width: max-content; max-width: min(300px, 86vw);
    background: var(--deep); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    padding: 0.6rem 0.75rem 0.7rem; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
    text-align: left; text-transform: none; letter-spacing: normal; cursor: default;
}
.helphint__pop-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.4rem; }
.helphint__pop-title { font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cyan); }
.helphint__close { background: transparent; border: 0; color: var(--dim); font-size: 1rem; line-height: 1; padding: 0 0.1rem; cursor: pointer; }
.helphint__close:hover { color: var(--lume); }
.helphint__pop-body { font-family: var(--sans); font-size: 0.8rem; line-height: 1.45; color: var(--lume); }
.helphint__pop-body p { margin: 0 0 0.45rem; }
.helphint__pop-body p:last-child { margin-bottom: 0; }
.helphint__pop-body ul { margin: 0.3rem 0 0.5rem; padding-left: 1.05rem; }
.helphint__pop-body li { margin: 0.15rem 0; }
.helphint__pop-body strong { color: var(--lume); font-weight: 600; }
.helphint__pop-body em { color: var(--dim); font-style: italic; }

/* "Next step" coaching strip (intuitive-help-coaching) — band-aware "why, and what now" panel
   built from the critic's existing output. Reuses the .critique visual language; the left accent
   and heading take the score band's colour (red/amber/cyan). */
.next-step { background: var(--panel); border-left: 2px solid var(--cyan); border-radius: 6px; padding: 0.6rem 0.8rem; margin: 0.7rem 0; }
.next-step--low  { border-left-color: var(--alert); }
.next-step--mid  { border-left-color: var(--warn); }
.next-step--high { border-left-color: var(--cyan); }
.next-step__head { display: flex; align-items: baseline; gap: 0.55rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.next-step__title { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cyan); }
.next-step--low  .next-step__title { color: var(--alert); }
.next-step--mid  .next-step__title { color: var(--warn); }
.next-step__verdict { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--dim); }
.next-step p { font-size: 0.86rem; line-height: 1.5; color: var(--lume); margin: 0.3rem 0 0; }
.next-step__lbl { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--dim); margin-right: 0.25rem; }
.next-step__weak strong { color: var(--lume); }
.next-step__weakscore { font-family: var(--mono); font-size: 0.74rem; color: var(--dim); margin-left: 0.3rem; }
.next-step__weakcomment { color: var(--dim); }
.next-step__do strong { color: var(--cyan); font-weight: 600; }

.history { margin-top: 0.8rem; }
.history > summary { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; cursor: pointer; color: var(--dim); }
.history__row { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0; border-bottom: 1px solid var(--line); }
.history__row--best { color: var(--lume); }
.history__snip { flex: 1; min-width: 0; font-size: 0.8rem; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Evidence-used provenance disclosure (TRACK-002) — mirrors the .history affordance. */
.evidence-used { margin-top: 0.8rem; }
.evidence-used > summary { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; cursor: pointer; color: var(--dim); }
.evidence-used__list { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.evidence-used__list li { display: flex; align-items: baseline; gap: 0.6rem; font-size: 0.86rem; margin: 0.2rem 0; }
.evidence-used__sim { font-family: var(--mono); font-size: 0.72rem; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.1rem; max-width: 760px; }
.form__row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form__actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.4rem; }
.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field__label { font-family: var(--mono); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--lume); }
.field__hint { font-size: 0.78rem; color: var(--dim); }
.input {
    font-family: var(--sans); font-size: 0.92rem; color: var(--lume);
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 0.7rem 0.85rem; width: 100%; resize: vertical;
}
.input::placeholder { color: var(--dim); }
.input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cyan) 25%, transparent); }
.input--area { font-family: var(--mono); font-size: 0.84rem; line-height: 1.5; }

/* ---------- Banners / working ---------- */
.banner { border-radius: var(--radius-sm); padding: 0.7rem 1rem; font-size: 0.85rem; margin-bottom: 1rem; border: 1px solid transparent; }
.banner--busy  { background: color-mix(in srgb, var(--warn) 14%, transparent);  border-color: color-mix(in srgb, var(--warn) 35%, transparent);  color: var(--warn); }
.banner--warn  { background: color-mix(in srgb, var(--warn) 14%, transparent);  border-color: color-mix(in srgb, var(--warn) 35%, transparent);  color: var(--warn); }
.banner--error { background: color-mix(in srgb, var(--alert) 14%, transparent); border-color: color-mix(in srgb, var(--alert) 40%, transparent); color: var(--alert); }
.banner--success { background: color-mix(in srgb, var(--ok) 14%, transparent); border-color: color-mix(in srgb, var(--ok) 40%, transparent); color: var(--ok); }

/* ---------- Upload strip (TRACK-001 · file-upload ingestion) ---------- */
.upload { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; }
.upload__strip {
    display: flex; align-items: center; gap: 0.6rem; cursor: pointer;
    background: var(--panel); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
    padding: 0.7rem 0.85rem; font-size: 0.82rem; color: var(--dim);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.upload__strip:hover { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 6%, var(--panel)); }
.upload__strip--busy { cursor: progress; border-style: solid; }
.upload__strip input[type="file"] { font-size: 0.78rem; color: var(--dim); max-width: 16rem; }
.upload__strip input[type="file"]::file-selector-button {
    font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--lume); background: var(--deep); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 0.4rem 0.7rem; margin-right: 0.6rem; cursor: pointer;
}
.upload__strip input[type="file"]::file-selector-button:hover { border-color: var(--cyan); }
.upload__text { flex: 1 1 auto; }
.upload__spinner {
    width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid var(--line); border-top-color: var(--cyan); animation: spin 0.8s linear infinite;
}
.upload__status { font-size: 0.8rem; color: var(--cyan); display: flex; align-items: center; gap: 0.6rem; }
.upload__clear {
    background: none; border: none; color: var(--dim); font-family: var(--mono); font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; padding: 0; text-decoration: underline;
}
.upload__clear:hover { color: var(--lume); }

/* Background-run progress bar (TRACK-011) — inline in the busy banner. */
.run-progress { display: inline-block; vertical-align: middle; width: 120px; height: 6px; margin: 0 0.6rem; background: var(--panel); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.run-progress__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan-dim), var(--cyan)); transition: width 0.4s ease; }

.working { display: flex; align-items: center; gap: 1rem; background: var(--deep); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem; }
.working__spinner {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    border: 3px solid var(--line); border-top-color: var(--cyan); animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 4rem 1rem; }
.empty h1, .empty h2 { font-family: var(--display); font-weight: 400; letter-spacing: 0.04em; font-size: 1.2rem; text-transform: uppercase; }
.empty__omega { display: inline-block; margin-bottom: 0.8rem; line-height: 0; }
.empty__omega svg { width: 72px; height: 72px; color: var(--cyan); filter: var(--glow); }
.empty .btn { margin-top: 1rem; }

@media (max-width: 640px) {
    .page-head { flex-direction: column; }
    .form__row--2 { grid-template-columns: 1fr; }
    .dim { grid-template-columns: 6rem 1fr 1.8rem; }
}

/* =====================================================================
   Blazor runtime chrome — error UI + reconnect modal, on-brand.
   No generic browser banner ever shows. Terse, technical, neutral.
   ===================================================================== */
#blazor-error-ui {
    background: var(--deep) !important;
    border-top: 1px solid var(--line-strong);
    color: var(--lume) !important;
    font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em;
    text-transform: uppercase; padding: 0.8rem 1.4rem !important;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5);
}
#blazor-error-ui::before { content: "● "; color: var(--alert); }
#blazor-error-ui .dismiss { color: var(--dim); cursor: pointer; }

.blazor-error-boundary {
    background: var(--deep); border: 1px solid color-mix(in srgb, var(--alert) 40%, transparent);
    border-radius: var(--radius); color: var(--lume);
    font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.05em;
    padding: 1rem 1.2rem; margin: 1rem 0;
}
.blazor-error-boundary::after { content: "RUNTIME FAULT — component boundary tripped."; }

#components-reconnect-modal {
    font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--lume); background: color-mix(in srgb, var(--void) 88%, transparent);
    backdrop-filter: blur(4px);
}

/* =====================================================================
   Mock interview (TRACK-040) — a chat surface for the adaptive run, built
   from the existing ember theme tokens. Interviewer bubbles sit left with a
   cyan accent; candidate bubbles sit right, neutral, with their elapsed time.
   ===================================================================== */
.mock { display: flex; flex-direction: column; gap: 1rem; }
.mock__transcript { display: flex; flex-direction: column; gap: 0.8rem; }
.mock__row { display: flex; }
.mock__row--interviewer { justify-content: flex-start; }
.mock__row--candidate { justify-content: flex-end; }
.mock__bubble {
    max-width: 80%; padding: 0.7rem 0.9rem; border-radius: var(--radius-sm);
    border: 1px solid var(--line); background: var(--panel);
}
.mock__bubble--interviewer { border-left: 2px solid var(--cyan); }
.mock__bubble--candidate { background: color-mix(in srgb, var(--lume) 5%, transparent); }
.mock__text { margin: 0.2rem 0 0; white-space: pre-wrap; line-height: 1.5; }
.mock__intent { margin-bottom: 0.1rem; }
.mock__intent--probe, .mock__intent--challenge { border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); }
.mock__intent--escalate { border-color: var(--cyan); color: var(--cyan); }
.mock__intent--pivot, .mock__intent--followup { color: var(--dim); }
.mock__intent--closing { color: var(--lume); }
.mock__elapsed { font-family: var(--mono); font-size: 0.66rem; color: var(--dim); }
/* candidate bubble footer: running live score (TRACK-100) + elapsed, right-aligned */
.mock__meta { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; margin-top: 0.3rem; }
.mock__score-pill {
    font-family: var(--mono); font-size: 0.66rem; line-height: 1; padding: 0.15rem 0.4rem;
    border: 1px solid var(--line); border-radius: 999px;
}
.mock__score-pill--high { color: var(--cyan);  border-color: var(--line-strong); background: color-mix(in srgb, var(--cyan) 12%, transparent); }
.mock__score-pill--mid  { color: var(--lume);  border-color: var(--line); background: color-mix(in srgb, var(--lume) 6%, transparent); }
.mock__score-pill--low  { color: var(--alert); border-color: color-mix(in srgb, var(--alert) 55%, transparent); background: color-mix(in srgb, var(--alert) 12%, transparent); }

.mock__composer { display: flex; flex-direction: column; gap: 0.6rem; }
.mock__busy { margin-bottom: 0; }
.mock__input { width: 100%; resize: vertical; }
.mock__composer-actions { display: flex; gap: 0.5rem; }

.mock__timer { font-family: var(--mono); font-size: 1.1rem; color: var(--cyan); letter-spacing: 0.05em; }
.mock__timer--warn { color: var(--warn); }
.mock__timer--alert { color: var(--alert); }

.mock__scorecard-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.8rem; }
.mock__scorecard-meta { display: flex; flex-direction: column; gap: 0.2rem; }
.mock__scorecard-elapsed { font-family: var(--mono); font-size: 0.72rem; }
.mock__again { justify-content: flex-start; margin-top: 1rem; }

/* coverage chip (TRACK-100) — reuses .badge token, tinted cyan like the other "live" chips */
.mock__coverage { color: var(--cyan); border-color: var(--line-strong); }

/* structured per-dimension report (TRACK-100) — collapsible sections + a focus line */
.mock__focus { margin: 1rem 0 0.6rem; }
.mock__report { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.4rem; }
.mock__report-dim { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; }
.mock__report-dim > summary { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; cursor: pointer; list-style: none; }
.mock__report-dim > summary::-webkit-details-marker { display: none; }
.mock__report-judgement { margin: 0.5rem 0 0; line-height: 1.5; }
.mock__report-excerpt-label { margin: 0.5rem 0 0.2rem; font-size: 0.72rem; }
.mock__report-excerpts { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.2rem; }
.mock__report-excerpts li { font-style: italic; color: var(--dim); line-height: 1.45; }

/* mock session-status badges — reuse the ready/ingesting/failed colour language */
.badge--awaitingcandidate { color: var(--cyan); border-color: var(--line-strong); }
.badge--thinking { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); animation: pulse 1.6s ease-in-out infinite; }
.badge--completed { color: var(--cyan); border-color: var(--line-strong); }
.badge--abandoned { color: var(--dim); }
.badge--created { color: var(--dim); }

.mock-history { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.mock-history li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; }

/* =====================================================================
   Voice mock mode (TRACK-003) — the spoken rehearsal loop. Reuses the
   existing .btn/.banner/.score/.dims/.verdict/.followups classes; only
   the mic pill, level meter, and loop layout are new. No new theme tokens.
   ===================================================================== */
.practice-loop { display: flex; flex-direction: column; gap: 1rem; }
.practice-qpick { max-width: 38rem; }
.practice-q { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; }
.practice-q__text { margin: 0; font-weight: 500; flex: 1 1 16rem; }
.practice-mic { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.practice-transcript { max-width: 48rem; }
.practice-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.practice-score { margin-top: 0.4rem; }
.practice-privacy { font-size: 0.78rem; margin: 0 0 1rem; }
.practice-cost { font-family: var(--mono); font-size: 0.74rem; color: var(--cyan); }

/* Multi-question ROUND (TRACK-101): picker, progress, aggregated summary + per-question arc. Reuses
   the .panel/.score/.btn tokens; only the picker list, progress dots and arc rows are new. */
.practice-round { display: flex; flex-direction: column; gap: 0.9rem; }
.practice-round__head { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.practice-round__pick { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; max-width: 44rem; }
.practice-round__pickrow { display: flex; align-items: baseline; gap: 0.55rem; font-size: 0.86rem; cursor: pointer; }
.practice-round__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.round-pill {
    font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
    padding: 0.28rem 0.6rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent); color: var(--cyan);
}
.practice-round__progress { list-style: none; padding: 0; margin: 0; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.practice-round__progress li {
    width: 1.7rem; height: 1.7rem; display: flex; align-items: center; justify-content: center;
    border-radius: 999px; border: 1px solid var(--line); color: var(--dim); font-family: var(--mono); font-size: 0.74rem;
}
.practice-round__progress li.is-active { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 6px color-mix(in srgb, var(--cyan) 40%, transparent); }
.practice-round__progress li.is-done { border-color: color-mix(in srgb, var(--lume) 40%, transparent); color: var(--lume); }
.practice-round__summary { margin-top: 0.3rem; }
.practice-round__arc { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.6rem; }
.practice-round__arcrow { display: flex; align-items: center; gap: 0.6rem; font-size: 0.84rem; }
.practice-round__arcq { flex: 1; }

/* Retry-pair delta (TRACK-101): chips reading "content +6", "pace 145→130", "fillers 3→1". */
.practice-retry-delta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }
.delta {
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em;
    padding: 0.2rem 0.5rem; border-radius: 999px; border: 1px solid var(--line); color: var(--dim);
}
.delta--up { color: var(--lume); border-color: color-mix(in srgb, var(--lume) 45%, transparent); }
.delta--down { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.delta--flat { color: var(--dim); }

.mic-pill {
    font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
    padding: 0.28rem 0.6rem; border-radius: 999px; border: 1px solid var(--line); color: var(--dim);
}
.mic-pill--recording { color: var(--alert); border-color: color-mix(in srgb, var(--alert) 50%, transparent); animation: pulse 1.6s ease-in-out infinite; }
.mic-pill--processing { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.mic-pill--denied, .mic-pill--unsupported { color: var(--alert); border-color: color-mix(in srgb, var(--alert) 45%, transparent); }

.level-meter { width: 8rem; height: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.level-meter__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan-dim), var(--cyan)); transition: width 90ms linear; }
/* Prominent variant for the Settings voice test — a full-width, taller input meter. */
.level-meter--lg { display: block; width: 100%; max-width: 28rem; height: 14px; margin: .15rem 0 .35rem; }

.practice-history { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.practice-history__row { display: flex; align-items: center; gap: 0.7rem; font-size: 0.85rem; }
.practice-history__q { flex: 1; }
.practice-history__meta { font-size: 0.74rem; white-space: nowrap; }

/* =====================================================================
   Spoken-answer delivery analytics (TRACK-030). Delivery is a PEER of the
   content score (ADR-1): two columns side by side, then the flagged
   transcript. Reuses the existing --cyan/--lume/--alert/--warn tokens and
   the .score/.dim/.chip conventions; only the gauge + filler mark are new.
   ===================================================================== */
.score-peer { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; }

.practice-scorecols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 720px) { .practice-scorecols { grid-template-columns: 1fr; } }

.delivery { display: flex; flex-direction: column; gap: 0.5rem; }
.delivery__head { display: flex; align-items: center; gap: 0.6rem; }
.delivery__label { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cyan); }
.delivery__note { font-size: 0.72rem; }
.delivery__row { display: grid; grid-template-columns: 4rem 1fr; align-items: center; gap: 0.6rem; font-size: 0.8rem; }
.delivery__pace { grid-template-columns: 4rem 1fr auto; }
.delivery__k { font-family: var(--mono); color: var(--dim); font-size: 0.74rem; }
.delivery__v { color: var(--lume); }
.delivery__fillers { margin-top: 0.1rem; }

/* Pace gauge: a thin bar with the 120–160 ideal zone shaded and a needle at the measured WPM
   (mapped over a 60–220 WPM span). Matches the .dim__bar visual language. */
.pace-gauge { position: relative; height: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; min-width: 6rem; }
.pace-gauge__ideal { position: absolute; top: 0; bottom: 0; left: 37.5%; width: 25%; background: color-mix(in srgb, var(--cyan) 22%, transparent); }
.pace-gauge__needle { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); transform: translateX(-1px); }

/* Live delivery coach (TRACK-107): a real-time pace gauge shown WHILE recording, only on browsers
   that expose Web Speech recognition. Reuses the .pace-gauge needle/zone above so the live read lines
   up with the final DeliveryPanel read. The band tint reuses the same green/amber/red tokens the
   DeliveryScore bands use; "paused"/"listening" stay neutral. Decorative — never the source of truth. */
.live-gauge { display: flex; flex-direction: column; gap: 0.25rem; flex-basis: 100%; margin-top: 0.4rem; }
.live-gauge__head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.live-gauge__label { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cyan); }
.live-gauge__caption { font-size: 0.68rem; }
.live-gauge__row { display: flex; align-items: center; gap: 0.6rem; }
.live-gauge__bar { flex: 1; max-width: 14rem; }
.live-gauge__v { font-size: 0.8rem; color: var(--lume); white-space: nowrap; }
/* Needle tint by band — green inside the ideal zone, amber just outside, red when too fast/slow. */
.live-gauge--ideal .pace-gauge__needle { background: var(--lume); box-shadow: 0 0 6px var(--lume); }
.live-gauge--brisk .pace-gauge__needle { background: var(--warn); box-shadow: 0 0 6px var(--warn); }
.live-gauge--slow .pace-gauge__needle  { background: var(--warn); box-shadow: 0 0 6px var(--warn); }
.live-gauge--fast .pace-gauge__needle  { background: var(--alert); box-shadow: 0 0 6px var(--alert); }
.live-gauge--paused .pace-gauge__needle { background: var(--dim); box-shadow: none; }
.live-gauge .pace-gauge__needle { transition: left 200ms linear; }

/* Inline filler highlight in the spoken transcript — ember-tinted, never structural. */
.practice-transcript-flagged { margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.3rem; }
.transcript { font-size: 0.86rem; line-height: 1.6; color: var(--lume); margin: 0; }
mark.filler { background: color-mix(in srgb, var(--warn) 28%, transparent); color: var(--lume); border-radius: 3px; padding: 0 0.15em; }

@media (prefers-reduced-motion: reduce) {
    .mic-pill--recording { animation: none; }
    .level-meter__fill { transition: none; }
    .live-gauge .pace-gauge__needle { transition: none; }   /* TRACK-107: still show the number, no motion */
}

/* =====================================================================
   Print — the cheat sheet. Strips chrome, switches to Ohms paper stock
   (cream + ink), keeps questions + best answers + follow-ups clean.
   ===================================================================== */
@media print {
    html, body { background: #f6f3ec !important; color: #18181a !important; background-image: none !important; }
    .topbar, .page-head__actions, .btn, .panel, .history, .dims, .answer__iters, .readiness-strip { display: none !important; }
    .app-main__inner { max-width: 100%; padding: 0; }
    body { font-size: 11pt; }
    .qcard { background: none; border: none; border-bottom: 1px solid #ccc; border-radius: 0; padding: 0.4rem 0; break-inside: avoid; }
    .qcard__text, .answer__text { color: #18181a; }
    .qnum { color: #18181a; border-color: #999; }
    .answer { border-top: none; }
    .answer__text { white-space: pre-wrap; }
    .critique, .next-step, .helphint { display: none; }
    .score { border: 1px solid #999; color: #18181a !important; background: none !important; }
    .followups__label { color: #4a4a4d; }
    a { color: #18181a; }
}