/**
 * BISP — shadcn/ui design language, hand-authored.
 *
 * shadcn/ui is React + Tailwind + Radix and needs a build step. This platform
 * is one HTML file served off cPanel with no bundler, so the components cannot
 * be used directly. What is portable is the design language, and that is what
 * this file implements: the same token model (background/foreground pairs,
 * one --radius scale, ring-based focus), the same restraint (flat fills, 1px
 * borders, near-invisible shadows, 500/600 weights) and the same neutral base
 * carrying a single brand accent.
 *
 * Loaded AFTER the platform's own <style> block, so equal-specificity rules win
 * on order and almost nothing here needs !important.
 *
 * Colours are OKLCH — perceptually uniform, so a lightness step looks like the
 * same step at every hue. That is what keeps the greys neutral in dark mode
 * instead of drifting blue, and it is what shadcn itself switched to.
 */

/* ========================================================================
   1. Tokens
   ======================================================================== */

:root {
  /* -- surfaces ------------------------------------------------------- */
  --background:         oklch(0.988 0.002 264);
  --foreground:         oklch(0.208 0.028 264);
  --card:               oklch(1 0 0);
  --card-foreground:    oklch(0.208 0.028 264);
  --popover:            oklch(1 0 0);

  /* shadcn calls this --muted. The platform already owns that name for its
     muted *text* colour (`color:var(--muted)` appears throughout its inline
     styles), so taking it would repaint every caption near-white. Renamed. */
  --muted-surface:      oklch(0.968 0.004 264);
  --accent-surface:     oklch(0.958 0.005 264);   /* hover / pressed */

  /* -- brand ---------------------------------------------------------- */
  /* Oracle red #c74634 — BISP's identity, kept as the single accent. */
  --primary:            oklch(0.552 0.153 32);
  --primary-hover:      oklch(0.492 0.150 32);
  --primary-foreground: oklch(0.985 0 0);
  --primary-soft:       oklch(0.962 0.020 32);
  --primary-soft-line:  oklch(0.885 0.055 32);

  /* -- semantic ------------------------------------------------------- */
  --success:            oklch(0.585 0.128 162);
  --success-soft:       oklch(0.960 0.032 162);
  --success-line:       oklch(0.868 0.070 162);
  --warning:            oklch(0.688 0.152 68);
  --warning-soft:       oklch(0.966 0.048 82);
  --warning-line:       oklch(0.878 0.098 78);
  --destructive:        oklch(0.577 0.213 27);
  --info:               oklch(0.548 0.196 262);
  --info-soft:          oklch(0.965 0.022 262);
  --info-line:          oklch(0.882 0.055 262);

  /* -- lines & focus -------------------------------------------------- */
  --border:             oklch(0.922 0.006 264);
  --border-strong:      oklch(0.878 0.010 264);
  --ring:               oklch(0.552 0.153 32 / 0.45);

  /* -- sidebar (shadcn treats it as its own surface) ------------------- */
  --sidebar:            oklch(0.978 0.003 264);
  --sidebar-foreground: oklch(0.372 0.024 264);
  --sidebar-accent:     oklch(0.932 0.006 264);
  --sidebar-active:     oklch(0.208 0.028 264);
  --sidebar-border:     oklch(0.918 0.006 264);

  /* -- geometry ------------------------------------------------------- */
  --radius:    0.625rem;                    /* 10px — the shadcn default    */
  --radius-sm: calc(var(--radius) - 4px);   /*  6px */
  --radius-md: calc(var(--radius) - 2px);   /*  8px */
  --radius-lg: var(--radius);               /* 10px */
  --radius-xl: calc(var(--radius) + 4px);   /* 14px */

  /* Shadows you have to look for. The old theme used 0 14px 34px, which
     reads as 2016 material — depth now comes from the border, not the blur. */
  --shadow-xs: 0 1px 2px 0 oklch(0.208 0.028 264 / 0.05);
  --shadow-sm: 0 1px 3px 0 oklch(0.208 0.028 264 / 0.08),
               0 1px 2px -1px oklch(0.208 0.028 264 / 0.06);
  --shadow-md: 0 4px 12px -2px oklch(0.208 0.028 264 / 0.10),
               0 2px 4px -2px oklch(0.208 0.028 264 / 0.05);
  --shadow-lg: 0 16px 32px -8px oklch(0.208 0.028 264 / 0.18),
               0 4px 10px -4px oklch(0.208 0.028 264 / 0.08);

  /* -- legacy aliases -------------------------------------------------
     The platform writes var(--surface), var(--line) etc. directly into
     JS-generated inline styles. Re-pointing them at the tokens above is what
     restyles all of that generated markup without touching a line of its JS. */
  --bg:      var(--background);
  --surface: var(--card);
  --surface2:var(--muted-surface);
  /* Literal, deliberately NOT var(--foreground): the competency radar paints
     its axis labels with
         getComputedStyle(document.body).getPropertyValue("--text")
     and getPropertyValue does not resolve var() — it hands back the raw token
     text. An aliased --text returns the string "var(--foreground)", canvas
     rejects it as a fillStyle, and the labels silently vanish. Keep in step
     with --foreground above. */
  --text:    oklch(0.208 0.028 264);
  --muted:   oklch(0.548 0.020 264);   /* muted *text*, per the platform */
  --line:    var(--border);
  --shadow:  var(--shadow-sm);
  --oracle:  var(--primary);
  --oracle2: var(--primary-hover);
  --navy:    var(--foreground);
  --navy2:   oklch(0.278 0.030 264);
  --blue:    var(--info);
  --green:   var(--success);
  --amber:   var(--warning);
  --red:     var(--destructive);
  --purple:  oklch(0.556 0.220 292);

  color-scheme: light;
}

body.dark {
  --background:         oklch(0.148 0.012 264);
  --foreground:         oklch(0.962 0.004 264);
  --card:               oklch(0.196 0.014 264);
  --card-foreground:    oklch(0.962 0.004 264);
  --popover:            oklch(0.208 0.015 264);

  --muted-surface:      oklch(0.248 0.016 264);
  --accent-surface:     oklch(0.278 0.018 264);

  --primary:            oklch(0.628 0.158 32);
  --primary-hover:      oklch(0.678 0.158 32);
  --primary-foreground: oklch(0.155 0.020 32);
  --primary-soft:       oklch(0.288 0.062 32);
  --primary-soft-line:  oklch(0.382 0.092 32);

  --success:            oklch(0.712 0.128 162);
  --success-soft:       oklch(0.288 0.058 162);
  --success-line:       oklch(0.382 0.078 162);
  --warning:            oklch(0.792 0.140 78);
  --warning-soft:       oklch(0.302 0.062 68);
  --warning-line:       oklch(0.402 0.082 68);
  --destructive:        oklch(0.658 0.192 25);
  --info:               oklch(0.672 0.158 262);
  --info-soft:          oklch(0.282 0.070 262);
  --info-line:          oklch(0.378 0.098 262);

  --border:             oklch(1 0 0 / 0.11);
  --border-strong:      oklch(1 0 0 / 0.18);
  --ring:               oklch(0.628 0.158 32 / 0.55);

  --sidebar:            oklch(0.176 0.013 264);
  --sidebar-foreground: oklch(0.782 0.012 264);
  --sidebar-accent:     oklch(0.258 0.016 264);
  --sidebar-active:     oklch(0.968 0.004 264);
  --sidebar-border:     oklch(1 0 0 / 0.09);

  --text:    oklch(0.962 0.004 264);   /* literal — see the note in :root */
  --muted:   oklch(0.702 0.016 264);

  --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.30);
  --shadow-sm: 0 1px 3px 0 oklch(0 0 0 / 0.40), 0 1px 2px -1px oklch(0 0 0 / 0.30);
  --shadow-md: 0 4px 12px -2px oklch(0 0 0 / 0.45), 0 2px 4px -2px oklch(0 0 0 / 0.30);
  --shadow-lg: 0 16px 32px -8px oklch(0 0 0 / 0.55), 0 4px 10px -4px oklch(0 0 0 / 0.35);

  color-scheme: dark;
}

/* ========================================================================
   2. Base
   ======================================================================== */

body {
  /* No webfont: the CSP is default-src 'self', so fonts.googleapis.com is
     blocked outright and self-hosting Inter would add ~100KB per visit.
     The variable system UI face is what shadcn falls back to anyway. */
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  transition: none;
}

/* Tight tracking on large text is most of what separates a 2026 interface
   from a 2018 one. It has to scale with size — the same -0.02em that looks
   crisp at 36px looks broken at 14px. */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
h2 { letter-spacing: -0.022em; }
.hero h2 { letter-spacing: -0.032em; }

strong, b { font-weight: 600; }

::selection { background: var(--primary); color: var(--primary-foreground); }

:where(a) { color: var(--primary); text-underline-offset: 3px; }

/* One focus treatment for the whole app: a ring, never an outline jump.
   :focus-visible means the mouse never sees it but the keyboard always does. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
  border-radius: var(--radius-md);
}

* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* ========================================================================
   3. Shell — topbar, sidebar, main
   ======================================================================== */

.topbar {
  height: 60px;
  padding: 0 20px;
  background: color-mix(in oklab, var(--card) 80%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.brand { gap: 10px; }

/* The mark was a gradient tile with a "B" in it. The real logo now exists and
   is 15KB, so use it. font-size:0 hides the letter without touching the HTML.

   No tile behind it any more. The white card, its border and its shadow were
   there when the mark was a square badge; once the artwork became the mark
   itself, the box was a frame around a logo that already has its own edges.
   Dropping it also frees the height the frame was eating — the logo is 52px
   tall now against 44 before, in the same 60px topbar.

   The size is driven by height, and width follows the artwork: bispnew.png is
   256x171, so a fixed square would letterbox it. `contain` keeps it whole
   whatever ratio a replacement file has. */
.brandmark {
  width: 150px; height: 50px;
  background: url("/images/logo1.jpg") center / contain no-repeat;
  font-size: 0;
  flex: none;

  /* Reset, not omission. The page's own inline rule still sets a 13px radius
     and `box-shadow: 0 9px 25px rgba(199,70,52,.28)` — a red glow drawn for
     the gradient badge this used to be. Leaving those unset does not clear
     them; this stylesheet only wins where it says something. */
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* The artwork is dark ink on transparency, which disappears against the dark
   topbar. Inverting the whole mark is wrong — it would recolour the logo — so
   it keeps a light plate of its own, shaped to the logo rather than drawn as
   a card: no border, no shadow, no visible corner. */
body.dark .brandmark {
  background-color: oklch(1 0 0 / 0.92);
  border-radius: 6px;
  padding: 2px 4px;
  background-origin: content-box;
}

.brand h1 { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.brand small { font-size: 11.5px; color: var(--muted); letter-spacing: -0.005em; }

.layout { grid-template-columns: 252px 1fr; min-height: calc(100vh - 60px); }

.sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--sidebar-border);
  color: var(--sidebar-foreground);
  padding: 12px 10px;
  top: 60px;
  height: calc(100vh - 60px);
}

.nav-title {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--muted); text-transform: uppercase;
  margin: 16px 10px 6px; opacity: 0.85;
}

.nav-btn {
  color: var(--sidebar-foreground);
  padding: 8px 10px;
  border-radius: var(--radius-md);
  font-size: 13.5px; font-weight: 500;
  gap: 10px; margin: 1px 0;
  transition: background-color .12s ease, color .12s ease;
}
.nav-btn:hover { background: var(--sidebar-accent); color: var(--sidebar-active); }
.nav-btn.active {
  background: var(--sidebar-accent);
  color: var(--sidebar-active);
  font-weight: 600;
}
.nav-icon { width: 18px; font-size: 14px; opacity: .8; }
.nav-btn.active .nav-icon { opacity: 1; }


.main { padding: 22px 24px 40px; }

/* ========================================================================
   4. Primitives
   ======================================================================== */

/* --- button ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 15px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 13.5px; font-weight: 500; line-height: 1;
  white-space: nowrap;
  /* An <a class="btn"> is a button, not a link — the underline and the link
     colour both have to go, or a download action reads as body text. */
  text-decoration: none;
  color: inherit;
  transition: background-color .12s ease, border-color .12s ease, opacity .12s ease;
}
.btn:active { transform: translateY(0.5px); }

.btn-primary { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-xs); }
.btn-primary:hover { background: var(--primary-hover); }

.btn-blue  { background: var(--info);    color: #fff; box-shadow: var(--shadow-xs); }
.btn-blue:hover  { background: color-mix(in oklab, var(--info) 86%, black); }
.btn-green { background: var(--success); color: #fff; box-shadow: var(--shadow-xs); }
.btn-green:hover { background: color-mix(in oklab, var(--success) 86%, black); }
.btn-danger{ background: var(--destructive); color: #fff; box-shadow: var(--shadow-xs); }
.btn-danger:hover{ background: color-mix(in oklab, var(--destructive) 86%, black); }

/* shadcn's "outline" variant — the workhorse secondary button. */
.btn-ghost {
  background: var(--card);
  border-color: var(--border);
  color: var(--foreground);
  box-shadow: var(--shadow-xs);
}
.btn-ghost:hover { background: var(--accent-surface); border-color: var(--border-strong); }

.icon-btn {
  width: 36px; height: 36px;
  display: inline-grid; place-items: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow-xs);
  font-size: 14px;
  transition: background-color .12s ease;
}
.icon-btn:hover { background: var(--accent-surface); }

.btn-row { gap: 8px; margin-top: 20px; }

/* --- badge ------------------------------------------------------------- */
.badge {
  height: 24px; padding: 0 9px; gap: 5px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font-size: 11.5px; font-weight: 500;
  white-space: nowrap;
}

.product-chip, .skill-chip, .stage-pill {
  display: inline-flex; align-items: center;
  padding: 3px 9px; margin: 3px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--muted-surface);
  color: var(--muted);
  font-size: 11.5px; font-weight: 500;
}

.skill-chip.detected,
body.dark .skill-chip.detected {
  background: var(--success-soft);
  border-color: var(--success-line);
  color: var(--success);
  font-weight: 500;
}

.stage-pill.active {
  background: var(--primary-soft);
  border-color: var(--primary-soft-line);
  color: var(--primary);
  font-weight: 600;
}

.topic, body.dark .topic {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--info-soft);
  border: 1px solid var(--info-line);
  color: var(--info);
  font-size: 11.5px; font-weight: 500;
}

.mode-tag {
  top: 14px; right: 14px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  border: 1px solid var(--primary-soft-line);
  color: var(--primary);
  font-size: 10px; font-weight: 600; letter-spacing: .02em;
}

/* --- card -------------------------------------------------------------- */
.card, .question-card, .stage-card, .voice-card, .modal-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.card { padding: 18px; }
.question-card, .stage-card { padding: 20px; }
.voice-card { padding: 14px; box-shadow: none; background: var(--muted-surface); }

.card h3, .stage-card h3 { font-size: 15px; }
.card h4 { font-size: 13.5px; }

.kpi small { font-size: 12px; color: var(--muted); font-weight: 500; }
.kpi strong {
  font-size: 28px; font-weight: 600; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; margin-top: 4px;
}
.kpi em { font-size: 11.5px; font-weight: 500; }

.section-title { margin: 26px 0 12px; }
.section-title h2 { font-size: 19px; }
.section-title h3 { font-size: 16px; }
.section-title p { font-size: 13px; color: var(--muted); }

/* --- form -------------------------------------------------------------- */
label { font-size: 13px; font-weight: 500; color: var(--foreground); margin-bottom: 6px; }

input, select, textarea,
body.dark input, body.dark select, body.dark textarea {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--foreground);
  font-size: 13.5px;
  padding: 8px 11px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
/* Only text-like fields get the fixed control height — a checkbox forced to
   36px is what stretched the product pills into slabs. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select {
  height: 36px; padding-block: 0;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .75; }

input[type="checkbox"], input[type="radio"] {
  accent-color: var(--primary);
  width: 14px; height: 14px; margin: 0 2px 0 0;
  border: 0; padding: 0; box-shadow: none; background: none;
  vertical-align: -1px;
}

/* Product picker → shadcn ToggleGroup. The pill itself carries the state, so
   the native box is hidden — but only visually: it keeps its size and its
   place in the tab order, and the label passes clicks through to it, so
   keyboard and screen-reader users are unaffected. A CSS-only control. */
.product-chip {
  position: relative;
  cursor: pointer; user-select: none;
  gap: 6px; padding: 5px 12px;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.product-chip:hover { border-color: var(--border-strong); background: var(--accent-surface); }
.product-chip input[type="checkbox"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.product-chip::before {
  content: "✓";
  font-size: 10px; line-height: 1; font-weight: 700;
  opacity: 0; width: 0; margin-right: 0;
  transition: opacity .12s ease, width .12s ease, margin-right .12s ease;
}
.product-chip:has(input:checked) {
  background: var(--primary-soft);
  border-color: var(--primary-soft-line);
  color: var(--primary);
  font-weight: 500;
}
.product-chip:has(input:checked)::before { opacity: 1; width: 10px; margin-right: 2px; }
.product-chip:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--ring); }

input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

textarea { min-height: 110px; line-height: 1.6; }
.answer { min-height: 170px; }

.form-grid { gap: 14px; }

/* --- table ------------------------------------------------------------- */
/* Scores and percentages sit in these tables; proportional digits make a
   column of numbers ripple as the values change. */
.review-table, .data-table { font-variant-numeric: tabular-nums; }

.review-table th, .data-table th {
  font-size: 11.5px; font-weight: 500;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
  padding: 9px 11px;
  border-bottom: 1px solid var(--border);
}
.review-table td, .data-table td {
  font-size: 13px; padding: 11px;
  border-bottom: 1px solid var(--border);
}
.candidate-row { transition: background-color .12s ease; }
.candidate-row:hover { background: var(--accent-surface); }

.avatar {
  width: 28px; height: 28px;
  font-size: 11px; font-weight: 600;
  background: var(--muted-surface);
  border: 1px solid var(--border);
  color: var(--muted);
}

.status-good { color: var(--success); font-weight: 600; }
.status-mid  { color: var(--warning); font-weight: 600; }
.status-low  { color: var(--destructive); font-weight: 600; }

/* --- progress ---------------------------------------------------------- */
/* shadcn's Progress tints the track with the accent (bg-primary/20). With one
   bar that reads as brand; the Live Score panel stacks five of them and the
   page turns pink, so the track stays neutral and the fill carries the colour. */
.progress, .bar, .chart-track {
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--muted-surface);
  box-shadow: inset 0 0 0 1px var(--border);
  overflow: hidden;
}
.progress span, .bar i {
  background: var(--primary);
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}
.chart-track { height: 8px; background: var(--muted-surface); }
.chart-fill { background: var(--primary); border-radius: 999px; }
.chart-row { grid-template-columns: 150px 1fr 46px; font-size: 12.5px; }
.chart-row > :last-child { font-variant-numeric: tabular-nums; text-align: right; color: var(--muted); }

.metric-head { font-size: 12.5px; color: var(--muted); }
.metric-head > :last-child { color: var(--foreground); font-weight: 500; font-variant-numeric: tabular-nums; }

/* --- tabs -------------------------------------------------------------- */
/* shadcn Tabs: one inset track, the active tab is a raised chip inside it. */
.interview-tabs {
  display: inline-flex; gap: 3px;
  padding: 3px;
  background: var(--muted-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
}
.interview-tab {
  border: 0; background: transparent;
  color: var(--muted);
  padding: 6px 13px;
  border-radius: var(--radius-md);
  font-size: 13px; font-weight: 500;
  transition: background-color .12s ease, color .12s ease;
}
.interview-tab:hover { color: var(--foreground); }
.interview-tab.active {
  background: var(--card);
  color: var(--foreground);
  border-color: transparent;
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}

/* ========================================================================
   5. Page surfaces
   ======================================================================== */

/* --- hero -------------------------------------------------------------- */
.hero {
  border-radius: var(--radius-xl);
  padding: 30px;
  background: var(--card);          /* the two radial gradients are gone */
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  gap: 28px;
}
.eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: .07em;
  color: var(--primary);
}
.hero h2 { font-size: 36px; line-height: 1.1; margin: 12px 0 12px; font-weight: 600; }
.hero p  { font-size: 14.5px; line-height: 1.65; color: var(--muted); }

/* Kept dark on purpose: it is the one "feature" panel on the page, and the
   logo needs a dark ground to read as a mark rather than as page furniture. */
.ai-console {
  background: oklch(0.208 0.028 264);
  border: 1px solid oklch(1 0 0 / 0.07);
  border-radius: var(--radius-xl);
  padding: 22px;
}
.ai-console h3 { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.console-row {
  padding: 9px 0; font-size: 12.5px;
  border-bottom: 1px solid oklch(1 0 0 / 0.08);
  color: oklch(0.762 0.012 264);
}
.console-row strong { color: oklch(0.985 0 0); font-weight: 500; }
.console-row:last-child { border-bottom: 0; }
.ai-orb { box-shadow: 0 0 40px oklch(0.628 0.158 32 / 0.28); }

/* The KPI row under the hero.
   It was a .grid-4, which carries margin-top:18px in the page's own stylesheet.
   When the Resume Screening tile left with the analyzer the row became a
   .grid-3 — and .grid-3 has no top margin, so the cards ended up sitting flush
   against the hero. Scoped to this one row rather than added to .grid-3
   generally: the other .grid-3 on the page follows a .section-title, which
   already spaces it. */
.hero + .grid-3 { margin-top: 26px; }

/* --- mode cards -------------------------------------------------------- */
.mode-card { transition: border-color .12s ease, box-shadow .12s ease; }
.mode-card:hover { transform: none; border-color: var(--border-strong); box-shadow: var(--shadow-md); }
/* A 2px border on select shifts every neighbour by a pixel. Ring instead. */
.mode-card.selected {
  border: 1px solid var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}
/* Now a monochrome glyph, so it can finally take a colour — supporting
   information until the card is the chosen one, then the brand accent. */
.mode-card .mode-icon { font-size: 20px; line-height: 1.2; margin-bottom: 4px; color: var(--muted); }
.mode-card.selected .mode-icon { color: var(--primary); }
.mode-card p { font-size: 13px; color: var(--muted); }

/* --- interview --------------------------------------------------------- */
.question-head { gap: 12px; }
.question-text { font-size: 19px; line-height: 1.5; font-weight: 500; letter-spacing: -0.015em; margin: 18px 0; }
.timer { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--foreground); }
.question-actions { gap: 8px; margin-top: 16px; }

/**
 * The interviewer and the question it is asking, side by side.
 *
 * They used to be two boxes with a stage summary wedged between them, so the
 * candidate read the question three cards away from the face saying it. Now
 * they sit together — but as two cards with air between them, not one fused
 * block: the dark panel is the product's face and earns its own edges.
 */
.interviewer-stage {
  grid-template-columns: 230px 1fr;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 18px;
}

.avatar-stage {
  background: oklch(0.208 0.028 264);
  border: 1px solid oklch(1 0 0 / 0.07);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  min-height: 0;
  padding: 24px 18px;
  gap: 2px;
}

/* A little smaller than the dashboard's, so the panel does not tower over the
   question beside it — but big enough to still read as the product's face. */
.avatar-stage .ai-avatar { width: 92px; height: 92px; }
.avatar-stage .avatar-name { margin-top: 12px; font-size: 14px; }
.avatar-stage .avatar-role { font-size: 11.5px; }
.avatar-stage .wave { height: 24px; margin: 8px 0 0; }

/* The question — its own card, matching the rest of the page. */
#askingCard {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  background: var(--card);
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

.asking-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.asking-head strong {
  font-size: 12.5px; font-weight: 500; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

#askingCard .progress { margin: 0; }

#askingCard .question-text {
  margin: 0;
  font-size: 21px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.018em;
  /* Long questions must not push the card taller than the avatar beside it. */
  overflow-wrap: anywhere;
}

.asking-status {
  font-size: 12.5px;
  color: var(--muted);
  min-height: 1.2em;   /* reserve the line so nothing jumps when it fills */
}

@media (max-width: 900px) {
  .interviewer-stage { grid-template-columns: 1fr; }
  .avatar-stage { padding: 20px; }
  #askingCard { padding: 20px; }
  #askingCard .question-text { font-size: 18px; }
}
.avatar-stage:before { background: oklch(0.628 0.158 32 / 0.10); }
.avatar-name { font-size: 14px; font-weight: 600; margin-top: 12px; }
.avatar-role { font-size: 11.5px; color: oklch(0.702 0.012 264); }

.palette { gap: 6px; }
.qnum {
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--muted);
  font-size: 12.5px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: background-color .12s ease, border-color .12s ease;
}
.qnum:hover { border-color: var(--border-strong); background: var(--accent-surface); }
.qnum.answered { background: var(--success-soft); border-color: var(--success-line); color: var(--success); }
.qnum.flagged  { background: var(--warning-soft); border-color: var(--warning-line); color: var(--warning); }
.qnum.unanswered { background: var(--card); }
.qnum.current { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 2px var(--ring); }

.legend { font-size: 11px; gap: 12px; }
.dot { width: 8px; height: 8px; border-radius: 2px; }

.feedback {
  border-radius: var(--radius-lg);
  background: var(--muted-surface);
  border: 1px solid var(--border);
  padding: 14px;
  font-size: 13.5px;
}

.analysis-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  padding: 10px 12px;
  font-size: 13px;
}


.transcript-box {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--muted-surface);
  font-size: 13.5px; line-height: 1.65;
  padding: 14px;
}

/* In voice-only mode this box *is* the answer field and is made editable, so
   it has to look like one — the dashed border reads as "output" otherwise, and
   nobody clicks it. Only the editable state changes; the read-only transcript
   elsewhere keeps its original look. */
.transcript-box[contenteditable] {
  border-style: solid;
  border-color: var(--border-strong);
  background: var(--card);
  cursor: text;
}
.transcript-box[contenteditable]:hover { border-color: var(--primary-soft-line); }
.transcript-box[contenteditable]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
  background: var(--card);
}

.code-editor {
  background: oklch(0.178 0.014 264);
  color: oklch(0.902 0.008 264);
  border: 1px solid oklch(1 0 0 / 0.09);
  border-radius: var(--radius-lg);
  font-family: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;
  font-size: 13px; line-height: 1.6;
  tab-size: 2;
}

.mic-button {
  width: 64px; height: 64px;
  background: var(--primary);
  box-shadow: var(--shadow-md);
  font-size: 22px;
}
.mic-button.listening { background: var(--destructive); }
.voice-status, .voice-note { font-size: 12.5px; color: var(--muted); }
.wave i { background: var(--primary); }

.session-banner, body.dark .session-banner {
  background: var(--info-soft);
  border: 1px solid var(--info-line);
  color: var(--info);
  border-radius: var(--radius-lg);
  padding: 11px 14px; font-size: 13px;
}

.score-ring {
  width: 96px; height: 96px;
  background: conic-gradient(var(--primary) calc(var(--score) * 1%),
                             var(--muted-surface) 0);
}
.score-ring:before { width: 74px; height: 74px; background: var(--card); }
.score-ring span { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* --- overlays ---------------------------------------------------------- */
.modal {
  background: oklch(0.145 0.015 264 / 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-box {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 24px;
}
.close {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius-md);
  width: 30px; height: 30px; padding: 0;
  color: var(--muted); font-size: 15px; line-height: 1;
}
.close:hover { background: var(--accent-surface); color: var(--foreground); }

/* Sonner-style toast: a popover surface with a real border, not a black slab. */
.toast {
  right: 18px; bottom: 18px;
  background: var(--popover);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 12px 15px;
  font-size: 13px; font-weight: 500;
  max-width: 360px;
}

.footer-note { font-size: 11.5px; color: var(--muted); margin: 32px 0 8px; }

/* The two practice exercises share one card, and ran straight together: the
   Evaluate Scenario button sat directly above the next exercise's topic label,
   so the second one read as part of the first. Separated the way this design
   already separates sections inside a card — a rule and real space, not just a
   margin, because the divider is what says "different exercise". */
#codingPanel {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}

/* An empty feedback box has no height, so the gap above collapsed onto the
   button whenever the candidate had not pressed Evaluate yet. */
#scenarioFeedback:not(:empty),
#codeFeedback:not(:empty) { margin-top: 14px; }

/* What a complete answer covers, listed under each practice exercise. Muted
   and small: it is guidance beside the task, not part of the task. */
.round-asks {
  margin: 12px 0 0; padding-left: 18px;
  color: var(--muted); font-size: 12.5px; line-height: 1.7;
}
.round-asks li { margin: 2px 0; }

/* ========================================================================
   6. Icons
   ======================================================================== */

/* Font Awesome glyphs replaced the colour emoji. Emoji came from the system
   emoji font, so `color` had no effect on them — a yellow bulb stayed yellow
   in dark mode — and each platform drew its own version. These take the
   surrounding colour, which is the point.
   The platform's own thin marks (⌂ ◉ ▤ ▶ ■ ⚑ ☰) are characters and are
   deliberately left as they are. */

/* Optical alignment: a glyph's box is taller than its ink, so it sits low
   against the text baseline without a nudge. */
.fa-solid { vertical-align: -0.055em; }

/* Inside a button the label already supplies a space, and .btn is a flex
   container that would add its gap on top of it. */
.btn > .fa-solid { margin-right: -3px; }

/* Feedback lists: keep the marker from growing with the text it labels. */
.feedback .fa-solid,
.analysis-row .fa-solid { font-size: 0.92em; width: 1.1em; text-align: center; }

/* ========================================================================
   7. Responsive & print
   ======================================================================== */

@media (max-width: 1100px) {
  .hero { padding: 24px; }
  .hero h2 { font-size: 30px; }
}

/* The trigger only exists on small screens; above 820px the sidebar is
   permanent and a toggle would be a button that hides visible navigation.
   Declared before the breakpoint block — media queries carry no extra
   specificity, so an unconditional rule placed after one simply wins. */
#ai-nav-toggle { display: none; margin-right: 2px; }

@media (max-width: 820px) {
  /* Re-asserted, not inherited. The platform collapses .layout to one column
     inside its own max-width:820 block, but a media query adds no specificity
     — so the unconditional `.layout { grid-template-columns: 252px 1fr }`
     further up this file was winning on document order and pushing the page
     into horizontal scroll on every phone. */
  .layout { grid-template-columns: 1fr; }

  .topbar { padding: 0 12px; }
  .main { padding: 14px 14px 32px; }
  .hero { padding: 20px; }
  .hero h2 { font-size: 26px; }
  .interview-tabs { display: flex; width: 100%; overflow-x: auto; }

  /* Mobile navigation. The platform simply hides the sidebar below 820px,
     which leaves a candidate on a phone with no way to reach any other
     section. Same markup, presented as a slide-over sheet. */
  .sidebar {
    display: block;
    position: fixed; left: 0; top: 60px; bottom: 0;
    width: min(280px, 82vw);
    z-index: 60;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
    box-shadow: var(--shadow-lg);
    height: auto;
  }
  body.nav-open .sidebar { transform: none; }

  body.nav-open::before {
    content: ""; position: fixed; inset: 60px 0 0; z-index: 55;
    background: oklch(0.145 0.015 264 / 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  #ai-nav-toggle { display: inline-grid; }
  body.nav-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

@media print {
  .card, .question-card, .stage-card { box-shadow: none; border-color: #ddd; }
  .toast, .modal { display: none !important; }
}