@charset "UTF-8";

/* ==========================================================================
   ctianalyst.com — "Briefing Room"

   The site is built to read like an intelligence product an analyst would
   actually circulate: hairline rules, a monospace metadata rail, functional
   classification tags, and type that carries the structure. Not a SaaS page.

   Two surfaces, one token set:
     default            Briefing Room — light, for reference/SEO reading
     [data-surface=focus]  Watch Floor — dark, for the live interview session

   Only the surface tokens invert. Spacing, type scale and component rules are
   shared, so the session screen is the same product in a different light.

   Deliberate exclusions: no gradients, no glassmorphism, no large radii, no
   drop shadows on content, no decorative emoji, no three-equal-card row.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — self-hosted IBM Plex (SIL OFL 1.1). See assets/fonts/LICENSE.
   Plex is an engineering typeface with real institutional character; the
   condensed cut does display duty so headings have weight without a serif.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Condensed";
  src: url("../fonts/ibm-plex-sans-condensed-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Condensed";
  src: url("../fonts/ibm-plex-sans-condensed-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Briefing Room palette — six committed values. */
  --ink: #101723;      /* text, rules at full strength */
  --paper: #f4f5f7;    /* page ground: cool neutral, deliberately not cream */
  --surface: #ffffff;  /* panels lifted off the ground */
  --rule: #dce0e6;     /* hairlines */
  --brand: #0f5257;    /* the only brand colour */
  --signal: #c2620f;   /* functional only: severity, low scores, warnings */
  --dim: #5a6472;      /* metadata, mono labels, secondary text */

  /* Derived surfaces. Kept as tokens so focus mode can retune them. */
  --surface-sunk: #eceef2;
  --brand-wash: #e7efef;
  --signal-wash: #f8ece1;
  --rule-strong: #b9c0ca;
  --selection: #cfe3e2;

  /* Score scale — the one place a third hue is allowed, because a five-step
     performance ramp genuinely needs to be readable at a glance. */
  --score-low: #b3401c;
  --score-mid: #b07d16;
  --score-high: #1c6b52;

  /* Type */
  --font-body: "Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Plex Condensed", "Plex Sans", "Segoe UI", sans-serif;
  --font-mono: "Plex Mono", ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

  --step--2: 0.75rem;
  --step--1: 0.8125rem;
  --step-0: 1.0625rem;
  --step-1: 1.1875rem;
  --step-2: 1.375rem;
  --step-3: clamp(1.6rem, 1.36rem + 1.05vw, 2.05rem);
  --step-4: clamp(2rem, 1.55rem + 2vw, 2.9rem);
  --step-5: clamp(2.4rem, 1.7rem + 3.1vw, 3.7rem);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-body: 1.62;

  /* Spacing — 4px base, named by use not by number. */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 6.5rem;

  --measure: 68ch;          /* prose line length */
  --shell: 74rem;           /* max content width */
  --shell-wide: 84rem;

  --radius: 2px;            /* documents have corners, not pills */
  --hair: 1px;

  --ease: cubic-bezier(0.2, 0, 0.15, 1);
  --dur: 160ms;
}

/* Watch Floor — the live session surface. Same tokens, inverted ground.
   Brand and signal are lightened so both clear AA against the dark panel. */
[data-surface="focus"] {
  --ink: #dfe5ed;
  --paper: #12151a;
  --surface: #1a1f27;
  --rule: #2b323d;
  --brand: #5cb0ac;
  --signal: #dd8f36;
  --dim: #8b95a4;

  --surface-sunk: #0e1116;
  --brand-wash: #16302f;
  --signal-wash: #2e2317;
  --rule-strong: #3c4552;
  --selection: #24403f;

  --score-low: #e0745a;
  --score-mid: #d8a83f;
  --score-high: #58b98f;

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   3. Reset + base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The UA stylesheet implements [hidden] as display:none, but any author rule
   that sets display — .session__meta{display:flex}, .btn{display:inline-flex} —
   beats it, and the element stays visible. Without this, every JS-toggled
   region on the session screen renders before a session exists. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--selection);
  color: var(--ink);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.005em;
  text-wrap: balance;
}

p, ul, ol, dl, figure, table, pre, blockquote {
  margin: 0;
}

img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}

a:hover {
  color: var(--brand);
  text-decoration-color: currentColor;
}

/* One focus treatment everywhere, always visible, never removed. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius);
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

hr {
  border: 0;
  border-top: var(--hair) solid var(--rule);
  margin: var(--sp-6) 0;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

.shell--wide { max-width: var(--shell-wide); }
.shell--narrow { max-width: 46rem; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--brand);
  color: #fff;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

.skip-link:focus {
  left: var(--sp-4);
  top: var(--sp-4);
}

/*  The dossier grid: a narrow monospace metadata rail beside the content.
    This is the layout signature of the site — it appears on question pages,
    learn articles and the session screen, and it always carries real fields. */
.dossier {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
}

@media (min-width: 62rem) {
  .dossier {
    grid-template-columns: 15.5rem minmax(0, 1fr);
    gap: var(--sp-7);
    align-items: start;
  }

  .dossier__rail {
    position: sticky;
    top: var(--sp-5);
  }
}

.dossier--reverse { direction: rtl; }
.dossier--reverse > * { direction: ltr; }

/* --------------------------------------------------------------------------
   5. Metadata rail — mono key/value pairs. Never decorative: every row is a
   field the reader can act on (role, difficulty, topic, handling).
   -------------------------------------------------------------------------- */

.rail {
  border-top: 2px solid var(--ink);
  padding-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.5;
}

.rail__title {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: var(--sp-3);
}

.rail__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-2);
}

.rail__row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--sp-2);
  padding-block: var(--sp-1);
  border-bottom: var(--hair) solid var(--rule);
}

.rail__key {
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--step--2);
  padding-top: 0.15em;
}

.rail__val {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.rail__val a { text-decoration-color: var(--rule-strong); }

/* --------------------------------------------------------------------------
   6. Tags — functional classification marks, used only where they mean
   something. A TLP tag states real handling guidance; a difficulty tag states
   the bank's rating. Neither is ornament.
   -------------------------------------------------------------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2em 0.55em;
  border: var(--hair) solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--dim);
  white-space: nowrap;
}

.tag--brand {
  color: var(--brand);
  border-color: var(--brand);
  background: var(--brand-wash);
}

.tag--signal {
  color: var(--signal);
  border-color: var(--signal);
  background: var(--signal-wash);
}

.tag--solid {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* TLP marks follow the FIRST standard colours because they are a real
   convention analysts read at a glance — this is the one place the palette
   defers to an external standard. */
.tlp {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.15em 0.5em;
  border: var(--hair) solid currentColor;
  border-radius: var(--radius);
}

.tlp--clear { color: var(--dim); }
.tlp--green { color: #1c6b52; }

[data-surface="focus"] .tlp--green { color: #58b98f; }

.taglist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* --------------------------------------------------------------------------
   7. Eyebrow + section headings
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--dim);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.eyebrow::after {
  content: "";
  flex: 1;
  height: var(--hair);
  background: var(--rule);
}

.eyebrow--plain::after { display: none; }

.section {
  padding-block: var(--sp-8);
  border-top: var(--hair) solid var(--rule);
}

.section--flush { border-top: 0; }

.section__head {
  max-width: var(--measure);
  margin-bottom: var(--sp-6);
}

.section__head h2 {
  font-size: var(--step-3);
  margin-bottom: var(--sp-3);
}

.section__head p {
  color: var(--dim);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
}

/* --------------------------------------------------------------------------
   8. Panels — the dossier container. Flat, ruled, with a brand tab on the
   leading edge. No shadow, no blur, no oversized radius.
   -------------------------------------------------------------------------- */

.panel {
  background: var(--surface);
  border: var(--hair) solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp-5);
}

.panel--tabbed {
  border-left: 3px solid var(--brand);
}

.panel--signal {
  border-left: 3px solid var(--signal);
}

.panel--sunk {
  background: var(--surface-sunk);
  border-color: transparent;
}

.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
  border-bottom: var(--hair) solid var(--rule);
}

.panel__title {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   9. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.7em 1.3em;
  border: var(--hair) solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.btn:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.btn--primary:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

[data-surface="focus"] .btn--primary {
  color: #06201f;
}

.btn--quiet {
  border-color: var(--rule-strong);
  color: var(--dim);
}

.btn--quiet:hover {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
}

.btn--lg { font-size: var(--step-0); padding: 0.8em 1.6em; }
.btn--block { width: 100%; }

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* --------------------------------------------------------------------------
   10. Prose — Learn articles and expert answers
   -------------------------------------------------------------------------- */

.prose {
  max-width: var(--measure);
}

.prose > * + * { margin-top: var(--sp-4); }

.prose h2 {
  font-size: var(--step-3);
  margin-top: var(--sp-7);
  padding-top: var(--sp-3);
  border-top: 2px solid var(--ink);
}

.prose h3 {
  font-size: var(--step-2);
  margin-top: var(--sp-6);
}

.prose h4 {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: var(--sp-5);
}

.prose ul, .prose ol {
  padding-left: 1.15rem;
}

.prose li + li { margin-top: var(--sp-2); }

.prose li::marker { color: var(--dim); }

.prose a {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent);
}

.prose a:hover { text-decoration-color: currentColor; }

.prose strong { font-weight: 600; }

.prose code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--surface-sunk);
  border: var(--hair) solid var(--rule);
  border-radius: var(--radius);
  padding: 0.1em 0.35em;
}

.prose blockquote {
  border-left: 3px solid var(--rule-strong);
  padding-left: var(--sp-4);
  color: var(--dim);
}

/* A callout that states something an analyst must not get wrong. */
.callout {
  border: var(--hair) solid var(--rule);
  border-left: 3px solid var(--signal);
  background: var(--surface);
  padding: var(--sp-4);
  border-radius: var(--radius);
}

.callout__label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--signal);
  display: block;
  margin-bottom: var(--sp-2);
}

/* --------------------------------------------------------------------------
   11. Tables — salary data and comparisons. Dense, mono figures, right-aligned
   numerics with tabular lining so columns actually line up.
   -------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  border: var(--hair) solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}

.table th,
.table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: var(--hair) solid var(--rule);
  vertical-align: top;
}

.table thead th {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}

.table tbody tr:last-child td { border-bottom: 0; }

.table .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
  white-space: nowrap;
}

.table caption {
  caption-side: bottom;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--step--1);
  color: var(--dim);
  text-align: left;
  border-top: var(--hair) solid var(--rule);
}

/* --------------------------------------------------------------------------
   12. Score bars — the readout used in feedback and the end report.
   Value is always printed as a numeral too; colour never carries meaning
   on its own.
   -------------------------------------------------------------------------- */

.scores {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
}

.score {
  display: grid;
  grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr) 2.6rem;
  align-items: center;
  gap: var(--sp-3);
}

.score__label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dim);
}

.score__track {
  height: 0.55rem;
  background: var(--surface-sunk);
  border: var(--hair) solid var(--rule);
  border-radius: 1px;
  overflow: hidden;
}

.score__fill {
  /* Must be block. This is a <span> inside the track, so it is not a grid
     item and would otherwise stay inline — and an inline box ignores both
     width and height, leaving every bar empty. */
  display: block;
  height: 100%;
  background: var(--score-high);
  transition: width 420ms var(--ease);
}

.score__fill[data-band="low"] { background: var(--score-low); }
.score__fill[data-band="mid"] { background: var(--score-mid); }
.score__fill[data-band="high"] { background: var(--score-high); }

.score__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--step--1);
  text-align: right;
}

/* Overall readiness figure — the one big number in the report. */
.readiness {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}

.readiness__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
  font-size: var(--step-5);
  line-height: 1;
  letter-spacing: -0.02em;
}

.readiness__den {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  color: var(--dim);
}

/* --------------------------------------------------------------------------
   13. Forms
   -------------------------------------------------------------------------- */

.field { display: grid; gap: var(--sp-2); }

.field + .field { margin-top: var(--sp-4); }

.field__label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

.field__hint {
  font-size: var(--step--1);
  color: var(--dim);
}

.input,
.select,
.textarea {
  width: 100%;
  background: var(--surface);
  border: var(--hair) solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.65em 0.8em;
  font-size: var(--step-0);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.textarea {
  min-height: 9rem;
  resize: vertical;
  line-height: var(--leading-body);
  font-family: var(--font-body);
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--brand);
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.05rem center, right 0.75rem center;
  background-size: 0.32rem 0.32rem, 0.32rem 0.32rem;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}

/* Honeypot: present for bots, unreachable for people and screen readers. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Segmented option group — used for interview setup choices. */
.options {
  display: grid;
  gap: var(--sp-2);
  /* Side-by-side fieldsets hold different numbers of options; without this the
     shorter column stretches its rows to match the taller one. */
  align-content: start;
  border: 0;
  padding: 0;
  margin: 0;
}

.options legend {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 0;
  margin-bottom: var(--sp-3);
}

.option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-3) var(--sp-4);
  border: var(--hair) solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.option:hover { border-color: var(--rule-strong); }

.option:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-wash);
}

.option:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.option__name {
  font-weight: 600;
  display: block;
}

.option__note {
  display: block;
  font-size: var(--step--1);
  color: var(--dim);
  line-height: var(--leading-snug);
}

/* --------------------------------------------------------------------------
   14. Header / footer
   -------------------------------------------------------------------------- */

.masthead {
  border-bottom: var(--hair) solid var(--rule);
  background: var(--surface);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 4rem;
}

.wordmark {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  white-space: nowrap;
}

.wordmark__mark {
  width: 0.6rem;
  height: 0.6rem;
  background: var(--brand);
  border-radius: 1px;
  flex: none;
}

.wordmark:hover { color: var(--ink); }

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
}

.nav a:hover { border-bottom-color: var(--rule-strong); }

.nav a[aria-current="page"] {
  border-bottom-color: var(--brand);
  color: var(--brand);
}

.masthead__toggle {
  display: none;
  background: transparent;
  border: var(--hair) solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.45rem 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 52rem) {
  .masthead__toggle { display: inline-flex; }

  .masthead__nav {
    display: none;
    width: 100%;
  }

  .masthead__nav[data-open="true"] { display: block; }

  .masthead__inner { flex-wrap: wrap; padding-block: var(--sp-3); }

  .nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: var(--sp-3);
  }

  .nav li { border-top: var(--hair) solid var(--rule); }

  .nav a { display: block; padding: var(--sp-3) 0; border-bottom: 0; }
}

.colophon {
  border-top: 2px solid var(--ink);
  margin-top: var(--sp-8);
  padding-block: var(--sp-6) var(--sp-7);
  font-size: var(--step--1);
}

.colophon__grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.colophon h2 {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: var(--sp-3);
}

.colophon ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.colophon a { text-decoration: none; }
.colophon a:hover { text-decoration: underline; }

.colophon__legal {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: var(--hair) solid var(--rule);
  color: var(--dim);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--step--2);
}

/* --------------------------------------------------------------------------
   15. Index lists — question library, learn hub. A ruled register, not cards.
   -------------------------------------------------------------------------- */

.register {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: var(--hair) solid var(--rule);
}

.register__item {
  border-bottom: var(--hair) solid var(--rule);
}

.register__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
  padding: var(--sp-4) 0;
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}

.register__link:hover {
  background: var(--surface);
  box-shadow: 0 0 0 var(--sp-4) var(--surface);
}

.register__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}

/* Both are spans nested inside a wrapper span, so neither is a grid item.
   Without display:block they run together on one line and max-width is
   ignored. */
.register__title {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step-1);
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: 0;
}

.register__excerpt {
  display: block;
  margin-top: var(--sp-2);
  color: var(--dim);
  font-size: var(--step--1);
  line-height: var(--leading-snug);
  max-width: var(--measure);
}

@media (min-width: 48rem) {
  .register__link {
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: start;
  }

  .register__meta { flex-direction: column; gap: var(--sp-1); }
}

/* --------------------------------------------------------------------------
   16. Pagination
   -------------------------------------------------------------------------- */

.pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: var(--hair) solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

.pager a,
.pager span {
  padding: 0.4em 0.75em;
  border: var(--hair) solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  min-width: 2.4em;
  text-align: center;
}

.pager a:hover { border-color: var(--ink); }

.pager [aria-current="page"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.pager__gap { border: 0 !important; color: var(--dim); }

/* --------------------------------------------------------------------------
   17. Breadcrumbs + page heads
   -------------------------------------------------------------------------- */

.crumbs {
  padding-block: var(--sp-4) 0;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dim);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.crumbs li + li::before {
  content: "/";
  margin-right: var(--sp-2);
  color: var(--rule-strong);
}

.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink); }

.page-head {
  padding-block: var(--sp-6) var(--sp-6);
  max-width: 52rem;
}

.page-head h1 {
  font-size: var(--step-4);
  margin-bottom: var(--sp-4);
}

.page-head .lede { margin-bottom: var(--sp-3); }

/* --------------------------------------------------------------------------
   18. Home — the hero is a working question, not a slogan. The layout is
   asymmetric on purpose: intro left, live panel right, no centred pitch.
   -------------------------------------------------------------------------- */

.hero {
  border-bottom: var(--hair) solid var(--rule);
  padding-block: var(--sp-7) var(--sp-8);
}

.hero__grid {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
}

@media (min-width: 62rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--sp-7);
  }
}

.hero__title {
  font-size: var(--step-5);
  margin-bottom: var(--sp-4);
  max-width: 18ch;
}

.proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  list-style: none;
  padding: var(--sp-4) 0 0;
  margin: var(--sp-5) 0 0;
  border-top: var(--hair) solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--dim);
}

.proof__n {
  display: block;
  font-size: var(--step-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
  line-height: 1.1;
}

/* The live taste panel. */
.taste__prompt {
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  margin-bottom: var(--sp-5);
  text-wrap: pretty;
}

.taste__form .btn-row { margin-top: var(--sp-4); }

.taste__privacy {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: var(--hair) solid var(--rule);
  font-size: var(--step--2);
  line-height: var(--leading-snug);
}

.taste__result { margin-top: var(--sp-5); }

.taste__result[hidden] { display: none; }

/* Track list — a ruled two-column index, not a card grid. */
.tracks {
  display: grid;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: var(--hair) solid var(--rule);
}

@media (min-width: 48rem) {
  .tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-6); }
}

.tracks__item { border-bottom: var(--hair) solid var(--rule); }

.tracks__item a {
  display: block;
  padding: var(--sp-4) 0;
  text-decoration: none;
}

.tracks__name {
  display: block;
  font-weight: 600;
  font-size: var(--step-1);
  margin-bottom: var(--sp-2);
}

.tracks__item a:hover .tracks__name { color: var(--brand); }

.tracks__summary {
  display: block;
  color: var(--dim);
  font-size: var(--step--1);
  line-height: var(--leading-snug);
}

/* --------------------------------------------------------------------------
   19. Interview setup form. Rendered on the light hub and role pages and on
   the dark session screen, so it lives here rather than in session.css.
   -------------------------------------------------------------------------- */

.setup__row {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}

@media (min-width: 44rem) {
  .setup__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.setup__privacy {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: var(--hair) solid var(--rule);
  font-size: var(--step--2);
  line-height: var(--leading-snug);
}

/* --------------------------------------------------------------------------
   20. Feedback dossier — the signature element.

   This is where the design spends its boldness: a ruled brief with monospace
   score bars, an explicit gaps block, and the interviewer's follow-up rendered
   as a fresh turn rather than a footnote. Everything else on the site stays
   quiet so this reads as the product.
   -------------------------------------------------------------------------- */

.feedback {
  border-top: 2px solid var(--ink);
  padding-top: var(--sp-4);
}

.feedback > * + * { margin-top: var(--sp-5); }

.feedback__pending {
  font-size: var(--step--1);
  padding-block: var(--sp-3);
}

/* Reveal is the one piece of motion the design allows itself. */
@media (prefers-reduced-motion: no-preference) {
  .feedback { animation: feedback-in 260ms var(--ease) both; }

  @keyframes feedback-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
  }
}

.feedback__block h4,
.feedback__followup h4 {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: var(--sp-2);
}

.feedback__block ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.feedback__block li {
  padding-left: 1.1rem;
  position: relative;
  font-size: var(--step--1);
  line-height: var(--leading-snug);
}

.feedback__block li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  color: var(--score-high);
  font-weight: 600;
}

.feedback__block--gaps li::before {
  content: "\2212"; /* minus sign */
  color: var(--signal);
}

.feedback__block p {
  font-size: var(--step--1);
  line-height: var(--leading-body);
}

.feedback__block p + p { margin-top: var(--sp-3); }

/* The follow-up is the moment that makes it feel like a real interviewer. */
.feedback__followup {
  border-left: 3px solid var(--brand);
  background: var(--brand-wash);
  padding: var(--sp-4);
  border-radius: var(--radius);
}

.feedback__followup p {
  font-size: var(--step-0);
  line-height: var(--leading-snug);
  text-wrap: pretty;
}

.feedback__notice {
  border-left: 3px solid var(--signal);
  background: var(--signal-wash);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  font-size: var(--step--1);
  line-height: var(--leading-snug);
}

.feedback__cta {
  padding-top: var(--sp-4);
  border-top: var(--hair) solid var(--rule);
}

/* --------------------------------------------------------------------------
   21. Question pages, filters and report details
   -------------------------------------------------------------------------- */

/* The question itself is set in the body face, not the display face — it is a
   sentence someone says out loud, not a headline. */
.question__prompt {
  font-family: var(--font-body);
  font-size: var(--step-3);
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: 0;
  margin-bottom: var(--sp-4);
  text-wrap: pretty;
}

.filters .field + .field { margin-top: var(--sp-4); }

.report__answer {
  border-top: var(--hair) solid var(--rule);
  border-bottom: var(--hair) solid var(--rule);
  padding-block: var(--sp-3);
}

.report__answer summary {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
  cursor: pointer;
}

.report__answer summary:hover { color: var(--ink); }

.report__answer p {
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  line-height: var(--leading-body);
  color: var(--dim);
}

.report__email { max-width: 34rem; }

/* Certification checkboxes on the salary survey. */
.certs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--sp-2);
}

.cert {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: var(--hair) solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.cert:hover { border-color: var(--rule-strong); }

.cert:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-wash);
}

.cert:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   22. Utilities
   -------------------------------------------------------------------------- */

.mono { font-family: var(--font-mono); }
.dim { color: var(--dim); }
.num { font-variant-numeric: tabular-nums lining-nums; }
.stack { display: grid; gap: var(--sp-4); }
.stack--tight { gap: var(--sp-2); }
.stack--loose { gap: var(--sp-6); }
.flow > * + * { margin-top: var(--sp-4); }
.measure { max-width: var(--measure); }
.center-text { text-align: center; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lede {
  font-size: var(--step-2);
  line-height: var(--leading-snug);
  color: var(--dim);
  max-width: 54ch;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   23. Motion — restrained by default, absent when the OS asks.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   24. Print — a report the user can actually hand over.
   -------------------------------------------------------------------------- */

@media print {
  :root { --paper: #fff; --surface: #fff; }

  .masthead, .colophon, .btn, .skip-link, .pager { display: none !important; }

  body { font-size: 11pt; }

  .panel { border: 1pt solid #999; break-inside: avoid; }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }
}