/* ==========================================================================
   KodeTalent — "Instrument Lab" design system (2026-07-24 full redesign)
   Source of truth: DESIGN.md. Structure chosen screen-by-screen by Ritesh;
   one skin everywhere: off-white / graphite / signal orange, JetBrains Mono
   display + Inter body. The interview room (C2) is the ONE dark surface.
   Webfonts load via Google Fonts (see each page head) with full system
   fallbacks below, so nothing breaks if the CDN is blocked.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --bg: #F4F4F2;
  --card: #FFFFFF;
  --ink: #191B1A;
  --muted: #5C605E;
  --line: #D9D9D5;
  --chip-bg: #EDEDE9;
  --chip-bg-2: #E4E4E0;
  --accent: #E8531F;
  --accent-dark: #C64517;

  --ok-ink: #1E6B4F;   --ok-bg: #E3EDE7;   --ok-border: #C9DCD2;
  --mid-ink: #8A6B2C;  --mid-bg: #F8F1E2;  --mid-border: #E8D9B8;
  --bad-ink: #A0433A;  --bad-bg: #F9EBE8;  --bad-border: #ECD2CC;

  --room: #2B2E31;
  --room-deep: #101214;
  --room-card: #1D1F21;
  --room-text: #E8EAEC;
  --room-line: #3A3E41;
  --room-mute: #B9BEC2;

  --font-mono: 'JetBrains Mono', Consolas, 'Cascadia Code', ui-monospace, 'Roboto Mono', monospace;
  --font-body: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-sans: var(--font-body); /* legacy alias */

  --r-sm: 5px;
  --r-md: 8px;

  /* legacy aliases so any var() reference in JS/HTML still resolves */
  --surface: var(--card);
  --border: var(--line);
  --border-soft: var(--chip-bg);
  --accent-ink: var(--accent-dark);
  --accent-tint: var(--chip-bg);
  --accent-tint-border: var(--line);
  --warn-ink: var(--mid-ink);
  --warn-bg: var(--mid-bg);
  --warn-border: var(--mid-border);
  --green: var(--ok-ink);
  --blue: var(--ink);
  --amber: var(--mid-ink);
  --red: var(--bad-ink);
  --radius: var(--r-md);
  --radius-sm: var(--r-sm);
  --shadow: 0 1px 2px rgba(25, 27, 26, 0.04), 0 1px 3px rgba(25, 27, 26, 0.05);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
::selection { background: var(--accent); color: #fff; }
[hidden] { display: none !important; }

/* ---------- Layout ---------- */
.wrap { max-width: 960px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 640px; margin: 0 auto; padding: 0 24px; }
.wrap-report, .container { max-width: 860px; margin: 0 auto; padding: 0 24px 60px; }
.center-col {
  min-height: calc(100vh - 130px);
  display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 720px) {
  .wrap, .wrap-narrow, .wrap-report, .container { padding-left: 16px; padding-right: 16px; }
}

/* ---------- App bar ---------- */
.appbar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  max-width: 960px; margin: 0 auto; padding: 14px 24px;
}
.appbar-bordered { border-bottom: 1px solid var(--line); background: var(--card); max-width: none; padding: 0; }
.appbar-bordered .appbar-inner {
  max-width: 960px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 24px;
}
.brand { font-family: var(--font-mono); font-weight: 700; font-size: 15px; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; margin: 0; }
.brand span { color: var(--accent); }
.appbar-user { display: flex; gap: 14px; align-items: center; }
@media (max-width: 720px) {
  .appbar { padding: 12px 16px; }
  .appbar-bordered .appbar-inner { padding: 12px 16px; }
}

/* ---------- Type ---------- */
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.015em; font-weight: 700; margin: 0; }
.giant {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.06;
  font-size: clamp(30px, 6vw, 58px);
  text-wrap: balance;
}
.giant-md { font-size: clamp(26px, 4.6vw, 44px); }
.giant-sm { font-size: clamp(22px, 4vw, 34px); }
h2, .h2 { font-family: var(--font-mono); font-size: 22px; letter-spacing: -0.01em; }
h3, .h3 { font-family: var(--font-body); font-weight: 600; font-size: 15px; }
.sub { color: var(--muted); font-size: 15px; max-width: 52ch; margin: 0; }
.kick, .annot {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.meta {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--muted);
  line-height: 1.8;
}
.muted { color: var(--muted); font-size: 14px; }
.error { color: var(--bad-ink); font-size: 13.5px; margin-top: 8px; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: var(--accent); color: #fff;
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  padding: 12px 20px;
  border: 0; border-radius: var(--r-md);
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background 150ms ease;
}
.btn:hover { background: var(--accent-dark); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-ghost {
  display: inline-block;
  background: transparent; color: var(--ink);
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  padding: 11px 18px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  cursor: pointer; text-decoration: none; text-align: center;
  transition: border-color 150ms ease;
}
.btn-ghost:hover { border-color: var(--ink); }
.btn-ghost:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-sm { padding: 7px 12px; font-size: 13px; }
.btn-link {
  background: none; border: 0; padding: 0;
  color: var(--muted); font-size: 13.5px; cursor: pointer; text-decoration: underline;
}
.btn-link:hover { color: var(--ink); }
.btn-block { display: block; width: 100%; }

/* ---------- Chips ---------- */
.chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  padding: 3px 9px; border-radius: 4px;
  background: var(--chip-bg); color: var(--muted);
  white-space: nowrap;
}
.chip b { color: var(--ink); font-weight: 700; }
.chip-dark { background: var(--ink); color: var(--card); }
.chip-ok { background: var(--ok-bg); color: var(--ok-ink); }
.chip-warn, .chip-mid { background: var(--mid-bg); color: var(--mid-ink); }
.chip-bad { background: var(--bad-bg); color: var(--bad-ink); }

/* ---------- Cards, rows, tables ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); }
.card-pad { padding: 16px; }
.rowline {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 16px; font-size: 14px;
  border-top: 1px solid var(--line);
}
.rowline:first-child { border-top: 0; }
.rowline-start { align-items: flex-start; }
.rowline-click { cursor: pointer; }
.rowline-click:hover { background: var(--bg); }
.thead {
  display: flex; gap: 12px;
  background: var(--chip-bg-2);
  padding: 9px 16px;
}

/* ---------- Forms ---------- */
label, .flabel { font-size: 12.5px; font-weight: 600; display: block; margin-bottom: 5px; }
.uinput {
  display: block; width: 100%; max-width: 460px;
  border: 0; border-bottom: 2px solid var(--line); border-radius: 0;
  background: transparent;
  font-family: var(--font-mono); font-size: 20px;
  padding: 10px 2px; color: var(--ink);
}
.uinput:focus { outline: 0; border-bottom-color: var(--accent); }
.uinput::placeholder { color: #B4B8B4; }
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="file"], select {
  width: 100%; height: 42px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink);
  font-family: var(--font-body); font-size: 14px;
  padding: 0 12px;
}
input[type="file"] { padding: 8px 12px; height: auto; }
textarea {
  width: 100%; min-height: 110px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--card); color: var(--ink);
  font-family: var(--font-body); font-size: 14px;
  padding: 12px; resize: vertical;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--ink); outline-offset: 0; }
/* Underline giant-question inputs must beat the generic boxed-input rules
   above (input[type=...] outranks a lone class). */
input.uinput {
  height: auto;
  border: 0; border-bottom: 2px solid var(--line); border-radius: 0;
  background: transparent;
  font-family: var(--font-mono); font-size: 20px;
  padding: 10px 2px;
}
input.uinput:focus { outline: 0; border-bottom-color: var(--accent); }
.field { margin-top: 14px; }
.drop {
  border: 1.5px dashed #B9BCB6; border-radius: var(--r-md);
  background: var(--card);
  padding: 38px 20px; text-align: center;
  color: var(--muted); font-size: 13px;
  cursor: pointer; max-width: 560px;
}
.drop b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.drop.dragover { border-color: var(--accent); }

/* ---------- Giant-question screens (auth, job post, apply steps) ---------- */
.gq-step { display: none; }
.gq-step.on { display: block; }
.gq-actions { margin-top: 22px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }


/* ---------- Newsprint Reborn landing (2026-08-05, Ritesh picked #92 "Newsprint
   Reborn" as the COMPLETE page, with the T3 static stat bar and F6 pull-quote
   variants chosen the same day. Replaces the sheet-on-desk "Exhibit Front"
   layout: full-bleed paper with full-width ink-ruled bands (statbar, fix,
   footer) now provides the desktop presence the sheet was solving. Colors and
   fonts map onto the existing Instrument Lab tokens — no new palette. ---------- */
:root {
  --paper: #FBFAF7;
  --paper-tint: #F5F2EA;
  --paper-line: #C9C6BE;
  --news-ink2: #2A2822;
  --font-serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif;
}
body.newsprint { background: var(--paper); font-family: var(--font-serif); }
body.newsprint h2 { font-family: var(--font-serif); letter-spacing: 0; }

/* scroll-reveal: hiding is scoped under html.js so content is never invisible
   when JS fails; reduced-motion shows everything immediately */
html.js .rvl { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
html.js .rvl.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .rvl { opacity: 1; transform: none; transition: none; }
}

/* masthead — structurally a conventional header (brand left, nav + CTA right,
   launch fix 2026-08-04), styled as the paper's nameplate */
.np-mast { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 2px solid var(--ink); }
.np-mast-in { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; }
.np-mast-brand {
  font-family: var(--font-serif); font-weight: 700; letter-spacing: .01em;
  font-size: clamp(17px, 2.4vw, 24px); white-space: nowrap;
  color: var(--ink); text-decoration: none;
}
.np-mast-nav { display: flex; gap: 20px; align-items: center; }
.np-mast-nav a { font-family: var(--font-body); font-size: 13px; color: var(--muted); text-decoration: none; }
.np-mast-nav a:hover { color: var(--ink); }
.np-mast-nav a.btn { color: #fff; }
.np-mast-nav a.btn:hover { color: #fff; }
@media (max-width: 620px) {
  .np-mast-nav { gap: 14px; }
  .np-mast-nav a.np-anchor { display: none; }
}

/* research stat bar (T3, static — chosen 2026-08-05 over a dark scrolling
   ticker). Full-width band directly under the masthead. */
.np-statbar { background: var(--paper-tint); border-bottom: 2px solid var(--ink); }
.np-statbar-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.np-statbar-row a {
  padding: 18px 20px; text-decoration: none; color: inherit;
  border-right: 1px solid var(--paper-line); text-align: left;
  transition: background-color 150ms ease;
}
.np-statbar-row a:last-child { border-right: 0; }
.np-statbar-row a:hover { background: var(--paper); }
.np-statbar-row .n {
  font-family: var(--font-serif); font-weight: 700; font-size: clamp(20px, 2.6vw, 26px);
  color: var(--accent-dark);
}
.np-statbar-row .t { font-family: var(--font-body); font-size: 12.5px; color: var(--ink); margin-top: 3px; line-height: 1.35; }
.np-statbar-row .s {
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; margin-top: 8px;
}
@media (max-width: 620px) {
  .np-statbar-row { grid-template-columns: 1fr; }
  .np-statbar-row a { border-right: 0; border-bottom: 1px solid var(--paper-line); padding: 14px 16px; }
  .np-statbar-row a:last-child { border-bottom: 0; }
}

/* shared text pieces */
.np-kick {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); margin: 0;
}
.np-deck {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(16px, 2vw, 19px); color: var(--muted);
  max-width: 52ch; margin: 20px auto 0;
}
.np-teaser {
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  color: var(--ink); max-width: 54ch; margin: 18px auto 0;
}
.np-cta-row { display: flex; gap: 16px; justify-content: center; align-items: center; margin-top: 28px; flex-wrap: wrap; }
.np-ghost {
  display: inline-block; border-bottom: 2px solid var(--accent); padding: 10px 4px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  color: var(--ink); text-decoration: none; transition: color 150ms ease;
}
.np-ghost:hover { color: var(--accent-dark); }
.np-note {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-top: 18px;
}

/* hero — the problem */
.np-hero { text-align: center; padding: 72px 0 52px; }
.np-hero h1 {
  font-family: var(--font-serif); font-weight: 700; line-height: .98;
  font-size: clamp(38px, 7vw, 88px); letter-spacing: -.015em;
  margin: 18px auto 0; max-width: 16ch; text-wrap: balance;
}

/* evidence — big clickable rows with per-claim Read links (kept from the
   2026-08-04 design review: this section is the page's whole psychological
   premise and must read at near-headline weight, never as a decorative list) */
.np-ev-sec { padding: 24px 0 64px; }
.np-seclab {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink);
  border-top: 3px double var(--ink); border-bottom: 2px solid var(--ink);
  padding: 12px 0 10px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.np-seclab span { color: var(--muted); letter-spacing: .06em; font-size: 9.5px; }
@media (max-width: 620px) { .np-seclab span { display: none; } }
.np-ev a {
  display: flex; gap: 24px; align-items: center;
  padding: 24px 12px; border-bottom: 1px solid var(--paper-line);
  text-decoration: none; color: inherit;
  transition: background-color 150ms ease, transform 150ms ease;
}
.np-ev a:hover { background: var(--paper-tint); transform: translateX(8px); }
.np-ev .n {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(34px, 5vw, 54px); letter-spacing: -.02em;
  color: var(--ink); white-space: nowrap; flex: 0 0 auto; min-width: 160px;
  font-variant-numeric: tabular-nums; transition: color 150ms ease;
}
.np-ev a:hover .n { color: var(--accent-dark); }
.np-ev .t { flex: 1; font-size: clamp(15px, 1.8vw, 18px); color: var(--news-ink2); line-height: 1.4; }
.np-ev .t small {
  display: block; font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-top: 6px;
}
.np-ev .go {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-dark);
  border-bottom: 1px solid var(--accent-dark); white-space: nowrap;
  flex: 0 0 auto; transition: transform 150ms ease;
}
.np-ev a:hover .go { transform: translateX(4px); }
.np-ev-close { font-family: var(--font-serif); font-style: italic; text-align: center; color: var(--muted); font-size: 16px; margin: 26px 0 0; }
@media (prefers-reduced-motion: reduce) {
  .np-ev a, .np-ev .n, .np-ev .go, .np-ghost, .np-statbar-row a, .np-step .no { transition: none; }
}
@media (max-width: 620px) {
  /* phone layout: numeral column left, claim + source + Read stacked right —
     no three-things-on-one-line cramming, no wrap surprises (V4.1 lesson) */
  .np-ev a {
    display: grid; grid-template-columns: auto 1fr;
    column-gap: 14px; row-gap: 8px; padding: 16px 4px;
  }
  .np-ev a:hover { transform: none; }
  .np-ev .n { font-size: 24px; min-width: 0; grid-row: 1; align-self: start; }
  .np-ev .t { grid-column: 2; font-size: 14px; }
  .np-ev .go { grid-column: 2; justify-self: start; }
}

/* the fix (F6 pull-quote, chosen 2026-08-05) */
.np-fix { border-top: 3px double var(--ink); padding: 72px 0; text-align: center; }
.np-fix .np-kick { color: var(--accent-dark); }
.np-quote {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(28px, 5vw, 54px); line-height: 1.14; letter-spacing: -.01em;
  margin: 22px auto 0; max-width: 22ch; text-wrap: balance;
}
.np-quote b { font-style: normal; font-weight: 700; color: var(--accent-dark); }
.np-fix .np-teaser { color: var(--news-ink2); max-width: 50ch; margin-top: 20px; }

/* how it works */
.np-how { padding: 64px 0 70px; scroll-margin-top: 72px; }
.np-how h2 {
  font-family: var(--font-serif); font-weight: 700; letter-spacing: -.01em;
  font-size: clamp(26px, 3.6vw, 40px); margin: 12px 0 0;
}
.np-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 32px; border-top: 1px solid var(--paper-line); }
.np-step { padding: 26px 24px 30px; border-right: 1px solid var(--paper-line); }
.np-step:last-child { border-right: 0; }
.np-step .no {
  font-family: var(--font-serif); font-weight: 700; font-size: 52px;
  color: var(--paper-line); line-height: 1; transition: color 150ms ease;
}
.np-step:hover .no { color: var(--accent-dark); }
.np-step h3 { font-family: var(--font-body); font-size: 16px; font-weight: 700; margin: 14px 0 6px; }
.np-step p { font-family: var(--font-body); font-size: 14px; color: var(--muted); margin: 0; line-height: 1.55; }
@media (max-width: 760px) {
  .np-steps { grid-template-columns: 1fr; }
  .np-step { border-right: 0; border-bottom: 1px solid var(--paper-line); }
  .np-step:last-child { border-bottom: 0; }
}

/* closing */
.np-close { border-top: 3px double var(--ink); padding: 64px 0 72px; text-align: center; }
.np-close h2 {
  font-family: var(--font-serif); font-weight: 700; letter-spacing: -.015em;
  font-size: clamp(32px, 5.4vw, 60px); line-height: 1.02; margin: 0;
}
.np-close .np-deck { font-size: 17px; margin-top: 16px; max-width: 44ch; }

/* footer */
.np-footer { border-top: 2px solid var(--ink); background: var(--paper-tint); padding: 28px 0 44px; }
.np-footer-in { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: baseline; }
.np-footer b { font-family: var(--font-serif); font-size: 18px; }
.np-footer p { font-family: var(--font-body); font-size: 13px; color: var(--muted); margin: 6px 0 0; max-width: 44ch; }
.np-fnav { display: flex; gap: 20px; flex-wrap: wrap; }
.np-fnav a {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
}
.np-fnav a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Dashboard ---------- */
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 26px; }
.filter-chip {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
  padding: 6px 12px; border-radius: 4px; border: 0;
  background: var(--chip-bg); color: var(--muted); cursor: pointer;
}
.filter-chip:hover { color: var(--ink); }
.filter-chip.active { background: var(--ink); color: var(--card); }
.jobbar {
  margin-top: 12px; padding: 11px 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
}
.cand-table { margin-top: 14px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
  background: var(--chip-bg-2);
  text-align: left; padding: 9px 14px; white-space: nowrap;
}
td { padding: 11px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.cand-name { font-weight: 600; font-size: 14px; }
.cand-sub { margin-top: 2px; }
.chip-group { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.empty-note { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 14px; }

/* ---------- Drawer / overlay panels ---------- */
.panel-overlay { position: fixed; inset: 0; background: rgba(25, 27, 26, 0.35); z-index: 40; }
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 41;
  width: min(560px, 94vw);
  background: var(--card); border-left: 1px solid var(--line);
  padding: 24px; overflow-y: auto;
}

/* ---------- Feedback widget (shared: dashboard + interview) ---------- */
.feedback-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 30;
  background: var(--ink); color: var(--card);
  border: 0; border-radius: 20px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  padding: 10px 16px; cursor: pointer;
}
.feedback-panel {
  position: fixed; right: 18px; bottom: 64px; z-index: 31;
  width: min(340px, 92vw);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px;
  box-shadow: 0 8px 30px rgba(25, 27, 26, 0.12);
}

/* ---------- Report (Expected vs Found) ---------- */
.report-page .card { padding: 16px; margin-top: 14px; }
.report-page h2 { font-size: 20px; }
.report-page h3 { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.01em; margin-bottom: 8px; }
.report-page ul { padding-left: 18px; }
.report-page li { padding: 3px 0; font-size: 14px; }
.report-band { margin-top: 12px; }

/* Verdict badges: same visual family as evidence chips. */
.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  padding: 5px 12px; border-radius: 4px;
  background: var(--chip-bg); color: var(--muted);
  text-transform: uppercase;
}
.badge-strong-recommend, .badge-recommend { background: var(--ok-bg); color: var(--ok-ink); }
.badge-weak { background: var(--mid-bg); color: var(--mid-ink); }
.badge-reject { background: var(--bad-bg); color: var(--bad-ink); }

/* Recruiter decision bar: sticky so recording the real outcome is always
   one glance away (ground truth for verdict quality). A bottom-sticky bar
   that is the last child of a page taller than the viewport is already
   pinned to the viewport bottom on first paint, before any scrolling — on
   a report that means it sits directly over the rationale paragraph, which
   renders near the top of the page. report.js only adds .is-pinned once
   the rationale's card has scrolled out of view (IntersectionObserver), so
   the bar stays plain static flow (i.e. invisible, off-screen) until it can
   no longer cover the one paragraph that matters most. */
.decision-bar {
  position: static;
  margin-top: 18px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--ink); color: var(--card);
  border-radius: var(--r-md);
  padding: 12px 16px;
  box-shadow: 0 8px 30px rgba(25, 27, 26, 0.25);
}
.decision-bar.is-pinned { position: sticky; bottom: 12px; z-index: 20; }
.decision-label { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.decision-btn {
  background: transparent; color: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600; padding: 7px 14px; cursor: pointer;
}
.decision-btn:hover { border-color: #fff; }
.decision-btn.selected { background: var(--accent); border-color: var(--accent); }
.decision-note {
  flex: 1; min-width: 160px; height: 34px;
  background: rgba(255, 255, 255, 0.1); color: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--r-sm);
  font-size: 13px; padding: 0 10px;
}
.decision-note::placeholder { color: rgba(255, 255, 255, 0.55); }
.decision-status { font-size: 12px; color: rgba(255, 255, 255, 0.75); margin: 0; width: 100%; }

.report-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.evf { margin-top: 16px; overflow: hidden; }
.evf-req { flex: 1; min-width: 180px; }
.evf-ev { flex: 1.5; min-width: 240px; }
.evf-quote { font-size: 13px; font-style: italic; color: var(--muted); margin-top: 6px; }
.qchip {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  background: var(--chip-bg); color: var(--muted);
  border: 0; border-radius: 4px; padding: 2px 7px;
  cursor: pointer; text-decoration: none; display: inline-block; margin-top: 6px;
}
.qchip:hover { background: var(--chip-bg-2); color: var(--ink); }
.report-note { margin-top: 14px; }
.transcript-q { font-weight: 600; font-size: 14px; }
.transcript-a { color: var(--muted); font-size: 14px; margin-top: 4px; white-space: pre-wrap; }
.transcript-item { padding: 14px 16px; border-top: 1px solid var(--line); }
.transcript-item:first-child { border-top: 0; }
.transcript-item:target { background: var(--mid-bg); }

/* ---------- Interview room (the ONE dark surface) ---------- */
.room-body { background: var(--room); min-height: 100vh; color: var(--room-text); }
.room-stage { position: relative; min-height: 100vh; display: flex; flex-direction: column; }
.room-main { flex: 1; position: relative; min-height: 380px; }
.room-caption {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  width: min(620px, 88%);
  background: var(--room-card); color: var(--room-text);
  border-radius: 10px; padding: 14px 18px;
  font-size: 14.5px; line-height: 1.5;
}
.room-caption-meta { margin-top: 8px; color: var(--room-mute); }
.room-caption-bottom { top: auto; bottom: 16px; max-height: 120px; overflow-y: auto; }
.orb {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -54%);
  width: 104px; height: 104px; border-radius: 50%;
  background: #5A5F64;
  display: flex; align-items: center; justify-content: center;
}
.orb-core { width: 62px; height: 62px; border-radius: 50%; background: #9AA1A7; }
.orb.on .orb-core, .orb.speaking .orb-core { animation: orb-pulse 1.1s ease-in-out infinite; }
@keyframes orb-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.16); }
}
.pip {
  position: absolute; right: 22px; bottom: 20px;
  width: min(200px, 32vw); aspect-ratio: 16 / 10;
  background: #4A4E52; border-radius: var(--r-md);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: var(--room-text);
  font-family: var(--font-mono); font-size: 11px;
}
.pip video { width: 100%; height: 100%; object-fit: cover; }
.pip-label {
  position: absolute; left: 8px; bottom: 6px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  background: rgba(0, 0, 0, 0.5); color: #fff;
  padding: 2px 6px; border-radius: 3px;
}
.roombar {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--room-line);
}
.roombar .meta { color: var(--room-mute); }
@media (max-width: 720px) {
  /* .feedback-fab is fixed to the same bottom-right corner the roombar's
     last child (KODETALENT wordmark) occupies in flow — reserve clearance
     so the fixed pill never sits on top of it. */
  .roombar { padding-right: 108px; }
}
.roombar-actions { display: flex; gap: 10px; align-items: center; }
.room-chip {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  background: var(--room-line); color: var(--room-text);
  border: 0; border-radius: 4px; padding: 6px 10px; cursor: pointer;
}
.room-chip:hover { background: #4A4E52; }
.btn-endcall {
  background: var(--room-text); color: var(--room-card);
  border: 0; border-radius: var(--r-md);
  font-weight: 600; font-size: 13px; padding: 9px 16px; cursor: pointer;
}
.btn-endcall:hover { background: #fff; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--room-mute); margin-right: 6px; vertical-align: 1px; }
.status-dot.live, .status-dot.on { background: var(--accent); }
/* V3 item 2: the always-visible "you are being recorded" dot. */
.status-dot.rec { background: var(--red); animation: rec-pulse 1.6s ease-in-out infinite; }
@keyframes rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Completion state: the dark room flips back to the light register. */
body.room-done { background: var(--bg); color: var(--ink); }
body.room-done .orb, body.room-done .roombar, body.room-done .feedback-fab { display: none; }
.room-answerbar {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  padding: 12px 20px; border-top: 1px solid var(--room-line);
}
.room-answerbar textarea {
  flex: 1; min-width: 0; min-height: 46px; max-height: 180px;
  background: var(--room-card); color: var(--room-text);
  border: 1px solid var(--room-line); border-radius: var(--r-md);
}
.room-answerbar textarea:focus { outline: 2px solid var(--room-text); }
.room-note { color: var(--room-mute); font-size: 12.5px; }
@media (max-width: 720px) {
  /* A width:100% child (.room-note/.error) on a nowrap flex line forces its
     100% flex-basis onto the whole row, shrinking the textarea alongside it
     down to a sliver once the container is too narrow to absorb the demand.
     flex-wrap above fixes that generally; giving the textarea its own
     full-width row here keeps it usable next to the button row rather than
     sharing a line with Send/End buttons at this width. */
  .room-answerbar textarea { flex-basis: 100%; }
}

/* ---------- Interview setup (light, pre-room) ---------- */
/* V3 item 2: the device-check screen is the LIGHT register (DESIGN.md C2 —
   only the call itself is dark), so the room body flips exactly the way it
   already does for the completion state below. */
body.room-setup { background: var(--bg); color: var(--ink); }
body.room-setup .orb, body.room-setup .roombar { display: none; }
.setup-grid { display: flex; gap: 28px; margin-top: 20px; flex-wrap: wrap; }
.setup-preview { flex: 1.2; min-width: 300px; }
.setup-cam {
  background: var(--room-line); border-radius: 10px; height: 240px;
  display: flex; align-items: center; justify-content: center;
  color: var(--room-text); font-family: var(--font-mono); font-size: 12px;
  overflow: hidden;
}
.setup-cam video { width: 100%; height: 100%; object-fit: cover; }
.setup-devices { display: flex; gap: 18px; margin-top: 12px; flex-wrap: wrap; }
.setup-info { flex: 0.8; min-width: 260px; display: flex; flex-direction: column; }

/* ---------- Shared state helpers ---------- */
.done { color: var(--ok-ink); }
.active { color: var(--ink); font-weight: 600; }

/* ---------- Apply page bits ---------- */
.proof-ask {
  margin-top: 14px; padding: 12px 14px;
  background: var(--chip-bg); border-radius: var(--r-md);
  font-size: 13.5px;
}
.wait-steps li { color: var(--muted); padding: 3px 0; font-size: 14px; }
.wait-steps li.active { color: var(--ink); font-weight: 600; }
.wait-steps li.done { color: var(--ok-ink); }

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

/* ---------- Print (report -> PDF) ---------- */
@media print {
  body { background: #fff; }
  .appbar, .appbar-bordered, .btn, .btn-ghost, .btn-link, .feedback-fab, .feedback-panel,
  .no-print, .print-hide { display: none !important; }
  .card { border-color: #bbb; break-inside: avoid; box-shadow: none; }
  .wrap-report, .container { max-width: none; padding: 0; }
  a { text-decoration: none; color: inherit; }
  .chip-ok, .chip-warn, .chip-mid, .chip-bad, .chip-dark, .chip { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ===== New-job wizard (grafted from design-implementation, job screen only) =====
   Additive: all selectors are .wiz-* / .num / #job-flow scoped; reuses main's
   existing .gq-step step-visibility, .btn/.card/.chip/.error and design tokens.
   No landing / report / candidate-table / token rule is touched. */

/* Shared text-button (both surfaces): a real control that is not a button
   shape — used for Back, Regenerate all, Save & exit, Log out. Never the
   accent fill, so the one-accent-per-screen law holds. */
.wiz-textbtn, .dash-textbtn {
  font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink);
  background: none; border: 0; border-bottom: 1px solid var(--line);
  padding: 0 0 1px; cursor: pointer; text-decoration: none;
}
.wiz-textbtn:hover, .dash-textbtn:hover { border-bottom-color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

/* ----- Job wizard ----- */
.wiz-trackerband { border-bottom: 1px solid var(--line); background: var(--bg); }
.wiz-trackerband-in {
  max-width: 1080px; margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; gap: 16px;
}
.wiz-tracker { flex: 1; min-width: 0; display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.wiz-tracker li { flex: 1; min-width: 0; }
.wiz-step {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 1.3;
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 14px 4px 12px; color: var(--muted); text-align: left; cursor: pointer;
}
.wiz-stepnum { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.wiz-check { display: none; flex: none; }
.wiz-steplabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiz-tracker .is-done .wiz-step { color: var(--ink); }
.wiz-tracker .is-done .wiz-check { display: inline-block; }
.wiz-tracker .is-done .wiz-stepnum { display: none; }
.wiz-tracker .is-done .wiz-step:hover { border-bottom-color: var(--line); }
.wiz-tracker .is-current .wiz-step { color: #A6360F; border-bottom-color: var(--accent); cursor: default; }
.wiz-tracker .is-todo .wiz-step { color: var(--muted); cursor: not-allowed; opacity: 0.65; }
.wiz-trackernote { font-size: 12px; color: var(--muted); white-space: nowrap; }

.wiz-col { max-width: 480px; margin: 0 auto; padding: 40px 32px 72px; }
.wiz-col-wide { max-width: 640px; margin: 0 auto; padding: 40px 32px 72px; }
.wiz-heading {
  font-family: var(--font-mono); font-size: 32px; font-weight: 600;
  line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 8px;
}
.wiz-sub { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }
.wiz-group { margin-top: 32px; }
.wiz-label { font-family: var(--font-mono); font-size: 13px; font-weight: 600; display: block; margin-bottom: 6px; }
.wiz-hint { font-family: var(--font-body); font-size: 12px; line-height: 1.5; color: var(--muted); margin: 6px 0 0; }
input.wiz-input, textarea.wiz-input, select.wiz-input {
  width: 100%; max-width: 100%; height: auto;
  font-family: var(--font-body); font-size: 15px; line-height: 1.4;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px;
}
textarea.wiz-input { min-height: 150px; resize: vertical; }
input.wiz-input::placeholder, textarea.wiz-input::placeholder { color: var(--muted); }
input.wiz-input:focus, textarea.wiz-input:focus, select.wiz-input:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--line);
}
.wiz-actions { display: flex; align-items: center; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
.wiz-actions .btn { margin-left: auto; }

.wiz-toolbar { display: flex; align-items: center; gap: 12px; margin: 24px 0 12px; }
.wiz-count {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted);
}
.wiz-toolbar .wiz-textbtn { margin-left: auto; }
.wiz-reqrow { padding: 14px 16px; border-bottom: 1px solid var(--line); transition: background-color 120ms ease; }
.wiz-reqrow:last-child { border-bottom: 0; }
.wiz-reqrow:hover, .wiz-reqrow.is-editing { background: var(--bg); }
.wiz-reqhead { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.wiz-reqskill { font-family: var(--font-body); font-size: 17px; font-weight: 600; line-height: 1.35; margin: 0; }
.wiz-chips { display: flex; gap: 6px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.wiz-chip {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; line-height: 1.3; white-space: nowrap;
  background: var(--chip-bg); border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--r-sm); padding: 4px 8px; cursor: pointer;
}
.wiz-chip:hover { border-color: var(--muted); }
.wiz-chip.is-soft { color: var(--muted); }
.wiz-chip.is-static { cursor: default; }
.wiz-editbtn {
  border: 1px solid transparent; background: none; border-radius: var(--r-sm);
  padding: 4px; line-height: 0; cursor: pointer; opacity: 0; color: var(--ink);
}
.wiz-reqrow:hover .wiz-editbtn, .wiz-reqrow.is-editing .wiz-editbtn, .wiz-editbtn:focus-visible { opacity: 1; }
.wiz-editbtn:hover { border-color: var(--line); background: var(--card); }
.wiz-fieldrow { margin: 0 0 10px; }
.wiz-fieldrow:last-child { margin-bottom: 0; }
.wiz-fieldlabel {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 2px;
}
.wiz-fieldvalue { font-family: var(--font-body); font-size: 15px; line-height: 1.6; margin: 0; }

.wiz-disclosure { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 12px; }
.wiz-disclosure > summary {
  font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink);
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px;
}
.wiz-disclosure > summary::-webkit-details-marker { display: none; }
.wiz-disclosure > summary::marker { content: ''; }
.wiz-disclosure > summary:hover { color: #A6360F; }
.wiz-disclosure-body { padding: 16px 0 0; }

.wiz-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.wiz-pill {
  font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 1;
  height: 36px; display: inline-flex; align-items: center; padding: 0 14px;
  background: var(--card); border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--r-sm); cursor: pointer; white-space: nowrap;
}
.wiz-pill:hover { border-color: var(--muted); }
.wiz-pill.active { border-color: var(--accent); color: #A6360F; }
.wiz-orderrow { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.wiz-orderrow .wiz-chip { margin-left: auto; }
.wiz-qrow { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.wiz-qrow input { flex: 1; min-width: 0; }

.wiz-recap { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; }
.wiz-recap-title { font-family: var(--font-mono); font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0 0 4px; }
.wiz-recap-meta { font-family: var(--font-body); font-size: 13px; color: var(--muted); margin: 0 0 16px; }
.wiz-recap-line { font-family: var(--font-body); font-size: 13px; color: var(--ink); margin: 16px 0 0; }
.wiz-linkfield {
  display: block; width: 100%;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--muted);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px; word-break: break-all;
}
.wiz-linkfield-live { color: var(--ink); background: var(--card); }

@media (max-width: 720px) {
  .wiz-trackerband-in { padding: 0 16px; gap: 8px; }
  .wiz-tracker { gap: 4px; overflow-x: auto; }
  .wiz-tracker li { flex: none; }
  .wiz-trackernote { display: none; }
  .wiz-col, .wiz-col-wide { padding: 28px 16px 56px; }
  .wiz-heading { font-size: 26px; }
}