/* ============================================================================================
   THE INTERVIEW — first screen every new player sees. Rebuilt on the constitution, 2026-09-19.
   Jon, 19 Sept, on the old screen: "what is this shitty design? you have design rules."
   He was right. It broke four of them: accent on decorative heading text (the orange
   "WHAT IT TAKES?"), a headline set at card-title size (the "still too small" note, ×15 on
   17 Aug), a blue-purple ground that read no theme token, and a progress rail of grey dashes
   floating off-grid. This sheet loads LAST and reads ONLY tokens: --pn-* (pn-system.css),
   --mvc-* (the live theme), --v4-* (pn-design-0817.css's field). No colour is picked here.
   Composition follows the approved rooms (design/approved-rooms-20260817): one huge
   sentence-case headline, mono eyebrow, one loud accent moment (the button), hairline rails.
   ============================================================================================ */

/* ── the ground: the field (film-black anchored top-right, falling off down the right edge)
      over the theme ground, with the halftone motif at whisper opacity. ───────────────────── */
.vc-backdrop{
  background:
    radial-gradient(46% 34% at 104% -6%,  var(--v4-field-deep,#0F1419) 0%, transparent 68%),
    radial-gradient(34% 24% at 106% 32%,  color-mix(in srgb,var(--v4-field-deep,#0F1419) 82%,transparent) 0%, transparent 70%),
    radial-gradient(28% 20% at 106% 62%,  color-mix(in srgb,var(--v4-field-deep,#0F1419) 64%,transparent) 0%, transparent 72%),
    radial-gradient(54% 44% at -6% 12%,   color-mix(in srgb,var(--v4-field-lift,#3E4C5B) 46%,transparent) 0%, transparent 68%),
    linear-gradient(162deg, var(--v4-grouped,#1B242F), var(--mvc-bg,#080d17));
}
.vc-backdrop::before{
  background-image:radial-gradient(color-mix(in srgb,var(--mvc-fg) 9%,transparent) 1px, transparent 1.2px);
  background-size:5px 5px; opacity:.55;
}

/* ── the window: glass on the theme, not a flat tint ───────────────────────────────────── */
.vc-room.pn-window{ border-radius:var(--pn-card-r,18px); border:1px solid var(--mvc-brd-hi); }
.vc-room-panel{
  padding:var(--pn-6,32px) var(--pn-6,32px) var(--pn-5,24px);
  border-left:1px solid var(--mvc-brd);
  background:linear-gradient(160deg,var(--glass-a),var(--glass-b));
  gap:0;
}
@media (max-width:700px){ .vc-room-panel{ padding:var(--pn-5,24px) 20px var(--pn-5,24px); border-left:0; border-top:1px solid var(--mvc-brd); } }

/* ── head row: mono eyebrow (the constitution's one eyebrow treatment) + progress ───────── */
.vc-room-head{ margin-bottom:var(--pn-5,24px); align-items:center; }
.vc-room-kick{
  font-family:var(--pn-mono); font-weight:500; font-size:var(--pn-micro,11px);
  letter-spacing:.24em; text-transform:uppercase; color:var(--p2);
  display:inline-flex; align-items:center; gap:.7em;
}
.vc-room-kick::before{ content:""; width:16px; height:1.5px; background:currentColor; opacity:.7; }
/* progress = information (WCAG 1.4.11) but never orange (design law 2: orange is not structural).
   A hairline rail of eight segments in the ink scale; the live one is full ink and 2× long. */
.vc-dots{ gap:4px; align-items:center; }
.vc-dot{ width:12px; height:2px; border-radius:1px; background:var(--mvc-fg-30); box-shadow:none; transition:background var(--pn-base) var(--pn-ease),width var(--pn-base) var(--pn-ease); }
.vc-dot.done{ background:var(--mvc-fg-70); }
.vc-dot.on{ width:24px; background:var(--mvc-fg); box-shadow:none; }

/* ── the body: space BETWEEN groups ≥ 2× space inside (law 5) ─────────────────────────── */
.vc-room-body{ padding:0; gap:0; }

/* THE HEADLINE. Display face, weight 400, sentence case (17 Aug rooms: "huge, sentence case, not
   the oblique caps the game uses"), scaled by SPAN (this panel is ~half the window), one ink. */
.vc-q--hero,
.vc-q--hero .vc-hl{
  font-family:var(--pn-disp); font-weight:400; font-style:normal; font-synthesis:none;
  text-transform:none; font-size:clamp(38px,4.6vw,64px); line-height:.92; letter-spacing:-.02em;
  color:var(--mvc-fg); text-wrap:balance; margin:0 0 var(--pn-5,24px);
}
.vc-q--hero .vc-hl{ font-size:inherit; display:block; }   /* second line, same ink — no accent on heading text */

/* the questions (Q1–Q8) share the face, one step down */
.vc-q{ font-family:var(--pn-disp); font-weight:400; font-size:var(--pn-h1); line-height:.96; letter-spacing:-.015em; color:var(--mvc-fg); margin:0 0 var(--pn-4,16px); }

/* HER LINE — system body on the 70% ink, upright; the quote marks do the work */
.vc-intro{
  font-family:var(--pn-sans); font-style:normal; font-size:var(--pn-body,16px); line-height:1.55;
  color:var(--mvc-fg-70); max-width:52ch; margin:0 0 var(--pn-6,32px); min-height:5.2em;
}
.vc-beat{ font-family:var(--pn-sans); font-size:var(--pn-small); color:var(--mvc-fg-55); }
.vc-beat b{ color:var(--mvc-fg); }

/* THE ONE ACCENT MOMENT — the primary action, system size lg */
.vc-cta-row{ margin:0 0 var(--pn-4,16px); }
.vc-begin.pn-btn{ --_pad-y:16px; --_pad-x:30px; --_fs:16px; }

/* the fine print — system small on the 55% ink, no theme-blind rgba */
.vc-room-body .vc-fine{ font-family:var(--pn-sans); font-size:var(--pn-small,13.5px); line-height:1.5; color:var(--mvc-fg-55); margin:0; }
.vc-room-body .vc-fine i{ color:var(--mvc-fg-70); font-style:normal; }

/* answers: system tonal buttons (secondary), no theme-blind whites */
.vc-ans{ background:var(--track); border:1px solid var(--mvc-brd-hi); color:var(--mvc-fg) !important; border-radius:var(--pn-btn-r,12px); font-family:var(--pn-sans); }
.vc-ans:hover,.vc-ans:focus-visible{ border-color:var(--p); background:rgba(var(--glow),.1); transform:none; }
.vc-begin:focus-visible,.vc-ans:focus-visible{ outline:2px solid var(--p); outline-offset:2px; }

/* the needle strip: hairline on the theme border token */
.vc-room-meter{ border-top:1px solid var(--mvc-brd); margin-top:var(--pn-5,24px); padding-top:var(--pn-4,16px); }
.vc-room-meter .roommeter .lbl{ color:var(--mvc-fg-55); }
.vc-room-meter .roommeter .lbl span,.vc-room-meter .roomverdict{ color:var(--mvc-fg) !important; }

/* ── MOTION (law 11): every element rises in, staggered; clean fade/rise, nothing deformed ── */
@keyframes vcRise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.vc-room-head, .vc-room-body > *, .vc-room-meter{ animation:vcRise .5s var(--pn-ease) both; }
.vc-room-head{ animation-delay:.05s }
.vc-room-body > :nth-child(1){ animation-delay:.14s }
.vc-room-body > :nth-child(2){ animation-delay:.24s }
.vc-room-body > :nth-child(3){ animation-delay:.34s }
.vc-room-body > :nth-child(4){ animation-delay:.42s }
.vc-room-body > :nth-child(5){ animation-delay:.50s }
.vc-room-meter{ animation-delay:.58s }
@media (prefers-reduced-motion:reduce){ .vc-room-head,.vc-room-body > *,.vc-room-meter{ animation:none } }

/* head row never wraps (the eyebrow broke to two lines at 375): rail yields, eyebrow holds */
.vc-room-head{ flex-wrap:nowrap; }
.vc-room-kick{ white-space:nowrap; flex:0 0 auto; }
.vc-dots{ flex:0 1 auto; min-width:0; overflow:hidden; justify-content:flex-end; }
@media (max-width:420px){ .vc-dot{ width:9px } .vc-dot.on{ width:18px } }

/* ⛔ THE CASCADE BITE (GAME_DESIGN_STATE §5: find the LAST rule with the selector first).
   pn-final-20260820.css sets the hero at `html body .vc-room .vc-q--hero` — (0,2,3)-class
   specificity, 19px, IN 700 — which beat every plain-class rule above, including this sheet's.
   Same selector shape here, loaded last, so the constitution's headline actually PAINTS. */
html body .vc-room .vc-q--hero,
html body .vc-room .vc-q--hero .vc-hl{
  font-family:var(--pn-disp); font-weight:400; font-style:normal; text-transform:none;
  font-size:clamp(38px,4.6vw,64px); line-height:.92; letter-spacing:-.02em;
  color:var(--mvc-fg); max-width:none; margin:0 0 var(--pn-5,24px);
}
html body .vc-room .vc-q--hero .vc-hl{ display:block; margin:0; }
html body .vc-room .vc-q{
  font-family:var(--pn-disp); font-weight:400; font-style:normal; text-transform:none;
  font-size:var(--pn-h1); line-height:.96; letter-spacing:-.015em; color:var(--mvc-fg); max-width:none;
}
html body .vc-room .vc-intro{ font-size:var(--pn-body,16px); }
@media (max-width:700px){
  html body .vc-room .vc-q--hero, html body .vc-room .vc-q--hero .vc-hl{ font-size:clamp(34px,10vw,42px); }
  html body .vc-room .vc-q{ font-size:clamp(24px,7vw,30px); }
}

/* pn-final's F5 rule is !important (it exists so a long QUESTION never pushes the third answer
   under the fold — a real, kept intent). The INTRO hero has no answers beneath it, so it takes
   the display size; the Q1–Q8 question takes one step down (h2 scale) and keeps F5's bottom
   fade + scroll. Same specificity, later sheet, so these win. */
html body .vc-room .vc-q--hero,
html body .vc-room .vc-q--hero .vc-hl{ font-size:clamp(38px,4.6vw,64px) !important; line-height:.92 !important; margin-bottom:var(--pn-5,24px) !important; }
html body .vc-room .vc-q:not(.vc-q--hero){ font-size:var(--pn-h2) !important; line-height:1.06 !important; margin-bottom:var(--pn-4,16px) !important; }
html body .vc-room .vc-intro{ font-size:var(--pn-body,16px) !important; margin-bottom:var(--pn-6,32px) !important; }
@media (max-width:700px){
  html body .vc-room .vc-q--hero, html body .vc-room .vc-q--hero .vc-hl{ font-size:clamp(34px,10vw,42px) !important; }
  html body .vc-room .vc-q:not(.vc-q--hero){ font-size:clamp(22px,6.4vw,28px) !important; }
}

/* ⛔ THE SECOND BITE. pn-type-cabinet-20260912.css (CEO-approved, 12 Sep) is the type authority:
   ONE face (IN/Inter) in three tiers — HERO 900 / SECTION 800 / WINDOW 700. Its generic
   `html body h1` WINDOW sweep catches this h1 too, which is why the first screen of the game was
   set at 17–25px 700 with its second line (a span) drifting to a different weight. The interview
   headline is the HERO tier by the cabinet's own definition ("one big committed statement",
   like .onb-headline / .ww-title) — named here at hero-tier importance, span-scaled for the
   half-width panel. Questions take the SECTION tier. Sentence case per the 17 Aug rooms. */
html body .vc-room .vc-q--hero,
html body .vc-room .vc-q--hero .vc-hl{
  font-family:var(--pn-type-face) !important; font-weight:900 !important;
  font-size:clamp(38px,4.6vw,64px) !important; line-height:var(--pn-type-leading-hero,.9) !important;
  letter-spacing:var(--pn-type-tracking,-.02em) !important; text-transform:none !important; font-style:normal !important;
}
html body .vc-room .vc-q:not(.vc-q--hero){
  font-family:var(--pn-type-face) !important; font-weight:800 !important;
  font-size:var(--pn-type-section) !important; line-height:var(--pn-type-leading-tight,1.03) !important;
  letter-spacing:var(--pn-type-tracking,-.02em) !important; text-transform:none !important;
}
@media (max-width:700px){
  html body .vc-room .vc-q--hero, html body .vc-room .vc-q--hero .vc-hl{ font-size:clamp(34px,10vw,42px) !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   THE INTERVIEW PANEL, 2026-09-22 — CEO: "questions are crashing into each otjher design the
   question section better", "content is hidden in non-scrolling sections".

   The panel is a column: question, then answers, then the meter. The question is `flex:none` and
   set in a display face at up to 50px, so it takes whatever it likes and the answers get the
   remainder. On a laptop that remainder is about two and a half options tall — so the fourth
   answer is sliced through the middle, and a list that is scrollable but shows no scrollbar and
   no cut edge reads as a list that has simply been cut off. He is right that it is hidden; it is
   hidden by a layout that gave the wrong element priority.

   The answers are the only thing on this screen a player can ACT on. They get the space.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* the question states itself and then stops growing */
html body #vc-shell .vc-room-body .vc-q{
  font-size: clamp(19px, 1.9vw, 26px) !important;
  line-height: 1.12 !important;
  margin: 0 0 14px !important;
  max-height: 34vh; overflow: hidden;
}
/* the opening hero line is the one that is MEANT to dominate — it has no answers under it */
html body #vc-shell .vc-room-body .vc-q--hero{
  font-size: clamp(26px, 3.2vw, 40px) !important; max-height: none;
}

/* the answers take the remainder, and say so when there is more below */
html body #vc-shell .vc-answers{
  flex: 1 1 auto !important;
  gap: 12px !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-right: 8px !important;
  scrollbar-width: thin;
  /* a soft cut at the bottom edge, so a clipped option reads as "there is more" rather than as a
     broken card. Only when the list actually overflows — mask-image on a short list is a no-op. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
}
html body #vc-shell .vc-answers::-webkit-scrollbar{ width: 6px; }
html body #vc-shell .vc-answers::-webkit-scrollbar-thumb{
  background: rgba(233,240,251,.30); border-radius: 999px;
}
/* an option is a thing you press, not a paragraph: give it room and a real edge */
html body #vc-shell .vc-ans{
  padding: 13px 16px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  border-color: rgba(233,240,251,.26) !important;
  background: rgba(233,240,251,.07) !important;
}
html body #vc-shell .vc-ans:hover,
html body #vc-shell .vc-ans:focus-visible{ border-color: #FF8A3D !important; }

/* ── "WILL SHE BACK YOU?" — CEO: 'this "will she back you" content is poor'. It said the same
      thing three times: a pill reading NAIL-BITER, a bar with a needle in the middle of it, and a
      sentence reading "Too close to call — she could still walk." Three restatements of one fact
      is not tension, it is padding, and it was taking the bottom sixth of the panel to do it.
      The sentence is the part that carries meaning and voice, so the sentence stays and the label
      row goes quiet behind it. */
html body #vc-shell .vc-room-meter .roommeter .lbl{
  font-size: 10.5px !important; letter-spacing: .14em !important;
  color: rgba(226,236,248,.5) !important; margin-bottom: 4px !important;
}
html body #vc-shell .vc-room-meter .roomverdict{
  font-size: 13.5px !important; color: rgba(237,241,250,.88) !important; margin-top: 6px !important;
}
html body #vc-shell .vc-room-meter{ margin-top: 10px !important; padding-top: 10px !important; }

/* ── the title bar with no traffic lights in it (see script-01.js) still has to sit like a bar */
.mac-titlebar--plain{ justify-content: flex-start; }
.mac-titlebar--plain .mac-tb-title{ margin-left: 0; }