/* ═══════════════════════════════════════════════════════════════════════════
   T-SkiLL — pre-launch mockups, shared base.

   A PORT OF THE LIVE SITE, not a redesign. Every token here is lifted from
   tskill-website/src/index.css + variations.css (the Field variation that
   shipped). The purple, the grain, the flat hard offsets, the two cuts of
   Stack Sans — all pinned to what is already live at tskill.co.uk.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Stack Sans Notch';
  src: url('/fonts/StackSansNotch-var.woff2') format('woff2');
  font-weight: 1 1000;
  font-display: swap;
}
@font-face {
  font-family: 'Stack Sans Text';
  src: url('/fonts/StackSansText-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Stack Sans Text';
  src: url('/fonts/StackSansText-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Stack Sans Text';
  src: url('/fonts/StackSansText-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* The field — the live site's ground. */
  --page:      #5C438D;
  --page-deep: #4C3878;

  --ink:        #FFFFFF;
  --ink-muted:  rgba(255, 255, 255, 0.72);
  --ink-faint:  rgba(255, 255, 255, 0.70);
  --ink-invert: #2A1F45;

  --border:        rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.28);
  --track:         rgba(255, 255, 255, 0.15);

  /* Success is a FILL that never carries light text on the purple. */
  --success:      #0E7A38;
  --success-fill: #22c55e;
  --success-lift: #34d17a;   /* the green that reads AS TEXT on the purple */
  --danger:       #E05A4A;

  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px;
  --r-pill: 999px;

  /* Depth on the field: flat hard offsets tinted to the purple, never black,
     never blurred. The one exception is the floating glass bar. */
  --shadow-card:  0 6px 0 rgba(34, 21, 62, 0.34);
  --shadow-deep:  0 10px 0 rgba(34, 21, 62, 0.34);

  --display: 'Stack Sans Notch', system-ui, -apple-system, sans-serif;
  --text:    'Stack Sans Text', system-ui, -apple-system, sans-serif;

  --hero: clamp(36px, 5.4vw, 74px);

  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-cine: cubic-bezier(0.16, 1, 0.3, 1);

  /* Light specks for the dark ground — the live site's chalk grain. */
  --grain: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='0.4 0.9' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23g)'/></svg>");
  --grain-opacity: 0.13;

  --focus: #FFFFFF;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body { min-height: 100svh; }

/* Selection takes the marker green rather than a grey wash: the site already
   has a highlighter and this is the same gesture, so selecting text looks
   like part of the design instead of the browser's default showing through. */
::selection { background: rgba(34, 197, 94, 0.32); color: #fff; }

:focus-visible {
  outline: 2px solid var(--focus, #fff);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Paragraph rag: let the browser avoid the short last line. Headings already
   balance; this is the same courtesy for body copy, and it is the difference
   between type that has been set and type that has been poured. */
p, li, figcaption, blockquote { text-wrap: pretty; }
/* Any figure a reader might compare against another lines up on the digit. */
.eyebrow, .step-no, .sec-count, .hc, time { font-variant-numeric: tabular-nums; }

/* Grain between the ground and the ink, exactly as live. */
.stage {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px));
}
.stage::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: var(--grain);
  background-size: 200px 200px;
  transform: translateZ(0);
}
.stage > main { position: relative; z-index: 1; }

/* ── Shared type ────────────────────────────────────────────────────────── */
.hero-type {
  font-family: var(--display);
  font-weight: 200;
  font-size: var(--hero);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 13em;
  text-wrap: balance;
  padding-top: 0.6em;
  margin-top: -0.6em;
}
@media (max-width: 620px) {
  :root { --hero: 30px; }
  .hero-type { font-weight: 350; }
}

.eyebrow {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}

.lede {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0;
  max-width: 30rem;
}

/* ── Word reveal (the live entrance) ────────────────────────────────────── */
.rv-mask {
  display: inline-block;
  overflow: hidden;
  position: relative;
  vertical-align: bottom;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
  padding-right: 0.26em;
}
.rv-mask.is-swap { overflow: visible; clip-path: inset(-2.6em 0 0 0); }
/* --lead: how much of the opening pre-roll to skip. Zero on a fresh load. A
   page arriving through a handover (broadsheet) sets it, so the choreography
   is the same one, started sooner, because the wash has already been holding
   an empty ground for most of a second. max() so nothing ever starts
   mid-animation. */
.rv-w {
  display: inline-block;
  animation: rv-word 0.72s var(--ease-cine) both;
  animation-delay: max(0ms, calc(var(--d, 0ms) - var(--lead, 0ms)));
}
@keyframes rv-word {
  from { transform: translateY(108%); }
  to   { transform: translateY(0); }
}

/* ── The correction ─────────────────────────────────────────────────────── */
.swap { position: relative; display: inline-block; white-space: nowrap; }
.swap-old {
  position: relative;
  animation: swap-dim 0.5s var(--ease) both;
  animation-delay: max(0ms, calc(var(--strike, 2980ms) + 120ms - var(--lead, 0ms)));
}
.swap-old::after {
  content: "";
  position: absolute;
  left: -0.04em; right: -0.04em;
  top: 0.716em;
  height: 0.055em;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  animation: strike 0.46s cubic-bezier(0.22, 0.9, 0.24, 1) both;
  animation-delay: max(0ms, calc(var(--strike, 2980ms) - var(--lead, 0ms)));
}
.swap-new {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 0.34em);
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  font-size: 0.4em;
  font-weight: 500;
  letter-spacing: 0.004em;
  line-height: 1.15;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%) rotate(-1.2deg);
  animation: swap-slide 0.62s cubic-bezier(0.22, 0.9, 0.24, 1) both;
  animation-delay: max(0ms, calc(var(--strike, 2980ms) + 60ms - var(--lead, 0ms)));
}
.swap-new-i {
  display: block;
  animation: rv-word 0.52s cubic-bezier(0.22, 0.9, 0.24, 1) both;
  animation-delay: max(0ms, calc(var(--strike, 2980ms) + 60ms - var(--lead, 0ms)));
}
@keyframes strike {
  from { transform: scaleX(0); }
  72%  { transform: scaleX(1.04); }
  to   { transform: scaleX(1); }
}
@keyframes swap-dim { from { opacity: 1; } to { opacity: 0.5; } }
@keyframes swap-slide {
  from { transform: translateX(calc(-50% - 0.66em)) rotate(-1.2deg); }
  to   { transform: translateX(-50%) rotate(-1.2deg); }
}

/* A STATIC correction, for sub-pages: already struck, already annotated. */
.did-swap { position: relative; display: inline-block; white-space: nowrap; }
.did-swap .swap-old { animation: none; opacity: 0.5; }
.did-swap .swap-old::after { animation: none; transform: scaleX(1); }
.did-swap .swap-new { animation: none; }
.did-swap .swap-new-i { animation: none; }

/* Simple arrival for sub-page columns. */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.rise { animation: rise 0.66s var(--ease) both; animation-delay: max(0ms, calc(var(--i, 0) * 90ms - var(--lead, 0ms))); }

/* ── Chrome: corner note ────────────────────────────────────────────────── */
.chrome-corner {
  position: fixed;
  left: calc(clamp(16px, 3vw, 30px) + env(safe-area-inset-left, 0px));
  top: calc(clamp(18px, 2.6vw, 28px) + env(safe-area-inset-top, 0px));
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}
.chrome-note {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--text);
  font-size: 13px;
  color: var(--ink-faint);
}
.chrome-mark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
a.chrome-mark:hover { color: var(--ink); }
.chrome-sep { opacity: 0.5; }

/* ── Chrome: the university link ────────────────────────────────────────── */
.uni-link {
  position: fixed;
  right: calc(clamp(16px, 3vw, 30px) + env(safe-area-inset-right, 0px));
  top: calc(clamp(18px, 2.6vw, 28px) + env(safe-area-inset-top, 0px));
  z-index: 30;
  font-size: 13px;
  color: var(--ink-faint);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.uni-link:hover { color: var(--ink); }

/* ── Chrome: socials, bottom right, monochrome ──────────────────────────── */
.chrome-social {
  position: fixed;
  right: calc(clamp(16px, 3vw, 30px) + env(safe-area-inset-right, 0px) - 7px);
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: flex;
  align-items: center;
}
.chrome-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  color: var(--ink-faint);
  transition: color 160ms ease;
}
.chrome-social svg { width: 17px; height: 17px; display: block; }
.chrome-social a:hover { color: var(--ink); }
@media (max-width: 780px) { .chrome-social { display: none; } }

/* ── Chrome: the glass bar ──────────────────────────────────────────────── */
.bar {
  position: fixed;
  left: 50%;
  bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  padding: 5px;
  border-radius: var(--r-pill);
  max-width: calc(100vw - 32px);
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.34);
  --focus: #0f426e;
}
.bar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: #241A3D;
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.bar-btn::before {
  content: "";
  width: 7px; height: 7px;
  flex: none;
  background: #5C438D;
  transform: rotate(-14deg);
  transition: transform 0.4s var(--ease);
}
.bar-btn:hover { background: rgba(92, 67, 141, 0.12); color: #3B2B63; }
.bar-btn:hover::before { transform: rotate(-104deg); }

.bar-privacy {
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 29;
  margin: 0;
  width: max-content;
  max-width: calc(100vw - 32px);
  text-align: center;
  white-space: nowrap;
  font-size: 11.5px;
  color: var(--ink-faint);
}
.bar-privacy a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.bar-privacy a:hover { color: var(--ink); }
@media (max-width: 560px) { .bar-privacy { font-size: 10.5px; } }

/* ── The phones ─────────────────────────────────────────────────────────── */
.field-phones { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.field-phone {
  position: absolute;
  bottom: clamp(-300px, -28vh, -190px);
  width: clamp(250px, 23vw, 340px);
  opacity: 0;
  animation: phone-rise 1.7s cubic-bezier(0.14, 0.9, 0.2, 1) both;
}
@media (max-width: 1160px) { .field-phone { bottom: clamp(-200px, -17vh, -120px); } }
.field-phone.is-left  { left: clamp(0px, 0.8vw, 16px); animation-delay: max(0ms, calc(3100ms - var(--lead, 0ms))); --tilt: -6deg; }
.field-phone.is-right { right: clamp(0px, 0.8vw, 16px); animation-delay: max(0ms, calc(3360ms - var(--lead, 0ms))); --tilt: 6deg; }
@keyframes phone-rise {
  from { opacity: 0; transform: translateY(260px) rotate(0deg) scale(0.94); }
  30%  { opacity: 1; }
  to   { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)) scale(1); }
}
@media (max-width: 900px) { .field-phones { display: none; } }

.ui-phone {
  width: 100%;
  aspect-ratio: 9 / 19;
  background: #070C15;
  border-radius: 40px;
  padding: 6px;
  box-shadow: 0 10px 0 rgba(34, 21, 62, 0.34);
}
/* The lean, exactly as the live site does it: the script writes a target on
   the .field-phone every frame and the 0.55s ease pulls the phone toward it,
   so it lags and settles like an object rather than tracking the cursor.
   The offset lives on .ui-phone, NOT on .field-phone, because the parent's
   transform is already carrying the entrance (translateY, rotate, scale) and
   writing to it every frame would fight the arrival. Two elements, two
   transforms, no conflict. The variables inherit down from the parent. */
.field-phone .ui-phone {
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(var(--pr, 0deg));
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .field-phone .ui-phone { transition: transform 0.9s var(--ease); }
}
/* The screens cross-fade between themes rather than cutting — the change is
   a colour transition, so every token-driven surface inside has to carry it
   too or the screen would change under a frozen question. */
.ui-phone-screen, .ui-phone-screen * {
  transition: background-color 0.9s var(--ease), color 0.9s var(--ease),
              border-color 0.9s var(--ease), box-shadow 0.9s var(--ease),
              fill 0.9s var(--ease), stroke 0.9s var(--ease);
}
.ui-phone-screen {
  height: 100%;
  border-radius: 34px;
  padding: 20px 16px 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
[data-pt='light'] {
  --p-page: #E6EAE6; --p-surface: #FDFEFD;
  --p-ink: #0F1A14; --p-ink-muted: #4A5764; --p-ink-invert: #FFFFFF;
  --p-accent: #765aaf; --p-accent-surface: rgba(118, 90, 175, 0.14);
  --p-success: #0E7A38; --p-success-fill: #22c55e;
  --p-on-verdict: #FFFFFF;
  --p-border: rgba(15, 26, 20, 0.08);
  --p-track: rgba(15, 26, 20, 0.14);
  --p-key-bg: rgba(15, 26, 20, 0.07);
  background: #E6EAE6;
  box-shadow: inset 0 0 0 1px rgba(15, 26, 20, 0.10);
}
[data-pt='dark'] {
  --p-page: #171C19; --p-surface: #1F2521;
  --p-ink: #ECF1EC; --p-ink-muted: #A3B2A8; --p-ink-invert: #0F1A14;
  --p-accent: #9B84D4; --p-accent-surface: rgba(155, 132, 212, 0.14);
  --p-success: #34d17a; --p-success-fill: #34d17a;
  --p-on-verdict: #092616;
  --p-border: rgba(236, 241, 236, 0.10);
  --p-track: rgba(236, 241, 236, 0.14);
  --p-key-bg: rgba(236, 241, 236, 0.09);
  background: #171C19;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

/* The other nine, ported verbatim from the live site's phone-themes.css so the
   phones cycle through exactly the app's theme set, in the app's own order. */
[data-pt='midnight'] {
  --p-page: #1A2027; --p-surface: #232B33;
  --p-ink: #E2ECF5; --p-ink-muted: #9BAAB9; --p-ink-invert: #0F1A14;
  --p-accent: #8E9BE0; --p-accent-surface: rgba(142, 155, 224, 0.14);
  --p-success: #34d17a; --p-success-fill: #34d17a;
  --p-on-verdict: #092616;
  --p-border: rgba(226, 236, 245, 0.10);
  --p-track: rgba(226, 236, 245, 0.14);
  --p-key-bg: rgba(226, 236, 245, 0.09);
  background: #1A2027;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
[data-pt='dusk'] {
  --p-page: #2B2420; --p-surface: #362E29;
  --p-ink: #F5EDE6; --p-ink-muted: #C2B2A6; --p-ink-invert: #2B2420;
  --p-accent: #CE9B6A; --p-accent-surface: rgba(206, 155, 106, 0.14);
  --p-success: #5BB37E; --p-success-fill: #5BB37E;
  --p-on-verdict: #102017;
  --p-border: rgba(245, 237, 230, 0.10);
  --p-track: rgba(245, 237, 230, 0.14);
  --p-key-bg: rgba(245, 237, 230, 0.09);
  background: #2B2420;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
[data-pt='sandstone'] {
  --p-page: #EDE7DD; --p-surface: #FEFDFB;
  --p-ink: #231A12; --p-ink-muted: #5A4B3E; --p-ink-invert: #FFFFFF;
  --p-accent: #9E6237; --p-accent-surface: rgba(158, 98, 55, 0.14);
  --p-success: #1A7A42; --p-success-fill: #1A7A42;
  --p-on-verdict: #FFFFFF;
  --p-border: rgba(38, 28, 16, 0.08);
  --p-track: rgba(35, 26, 18, 0.14);
  --p-key-bg: rgba(38, 28, 16, 0.07);
  background: #EDE7DD;
  box-shadow: inset 0 0 0 1px rgba(15, 26, 20, 0.10);
}
[data-pt='harbour'] {
  --p-page: #E3E8EE; --p-surface: #FDFEFF;
  --p-ink: #0C1622; --p-ink-muted: #47566A; --p-ink-invert: #FFFFFF;
  --p-accent: #4A7C93; --p-accent-surface: rgba(74, 124, 147, 0.14);
  --p-success: #187A50; --p-success-fill: #187A50;
  --p-on-verdict: #FFFFFF;
  --p-border: rgba(12, 22, 34, 0.08);
  --p-track: rgba(12, 22, 34, 0.14);
  --p-key-bg: rgba(12, 22, 34, 0.07);
  background: #E3E8EE;
  box-shadow: inset 0 0 0 1px rgba(15, 26, 20, 0.10);
}
[data-pt='ada'] {
  --p-page: #EAEBEA; --p-surface: #FCFCFC;
  --p-ink: #091408; --p-ink-muted: #4A554A; --p-ink-invert: #091408;
  --p-accent: #774D80; --p-accent-surface: rgba(119, 77, 128, 0.14);
  --p-success: #5C7726; --p-success-fill: #A1C854;
  --p-on-verdict: #FFFFFF;
  --p-border: rgba(9, 20, 8, 0.08);
  --p-track: rgba(9, 20, 8, 0.14);
  --p-key-bg: rgba(9, 20, 8, 0.07);
  background: #EAEBEA;
  box-shadow: inset 0 0 0 1px rgba(15, 26, 20, 0.10);
}
[data-pt='bubblegum'] {
  --p-page: #FFF0F6; --p-surface: #FFFFFF;
  --p-ink: #3D0A26; --p-ink-muted: #7A4460; --p-ink-invert: #FFFFFF;
  --p-accent: #6D28D9; --p-accent-surface: rgba(109, 40, 217, 0.14);
  --p-success: #0E9F6E; --p-success-fill: #0E9F6E;
  --p-on-verdict: #031D14;
  --p-border: rgba(90, 20, 55, 0.10);
  --p-track: rgba(61, 10, 38, 0.14);
  --p-key-bg: rgba(90, 20, 55, 0.07);
  background: #FFF0F6;
  box-shadow: inset 0 0 0 1px rgba(15, 26, 20, 0.10);
}
[data-pt='arcade'] {
  --p-page: #0B0A1F; --p-surface: #181634;
  --p-ink: #EAF6FF; --p-ink-muted: #9FB2D0; --p-ink-invert: #0B0A1F;
  --p-accent: #F472B6; --p-accent-surface: rgba(244, 114, 182, 0.14);
  --p-success: #34D399; --p-success-fill: #34D399;
  --p-on-verdict: #09261C;
  --p-border: rgba(140, 220, 255, 0.16);
  --p-track: rgba(234, 246, 255, 0.14);
  --p-key-bg: rgba(140, 220, 255, 0.09);
  background: #0B0A1F;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
[data-pt='citrus'] {
  --p-page: #FFF8E6; --p-surface: #FFFFFF;
  --p-ink: #3A2606; --p-ink-muted: #7A6034; --p-ink-invert: #FFFFFF;
  --p-accent: #4D9E12; --p-accent-surface: rgba(77, 158, 18, 0.14);
  --p-success: #4D9E12; --p-success-fill: #4D9E12;
  --p-on-verdict: #0E1C03;
  --p-border: rgba(70, 45, 5, 0.10);
  --p-track: rgba(58, 38, 6, 0.14);
  --p-key-bg: rgba(70, 45, 5, 0.07);
  background: #FFF8E6;
  box-shadow: inset 0 0 0 1px rgba(15, 26, 20, 0.10);
}
[data-pt='cosmic'] {
  --p-page: #120B26; --p-surface: #1F1442;
  --p-ink: #F1EBFF; --p-ink-muted: #B5A6D6; --p-ink-invert: #120B26;
  --p-accent: #2DD4BF; --p-accent-surface: rgba(45, 212, 191, 0.14);
  --p-success: #4ADE80; --p-success-fill: #4ADE80;
  --p-on-verdict: #0D2817;
  --p-border: rgba(196, 181, 253, 0.16);
  --p-track: rgba(241, 235, 255, 0.14);
  --p-key-bg: rgba(196, 181, 253, 0.09);
  background: #120B26;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

/* ── The question, at phone scale (the live metrics) ────────────────────── */
.q { display: flex; flex-direction: column; width: 100%; }
.q-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.q-close {
  flex: none; width: 24px; height: 24px;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--p-key-bg);
  color: var(--p-ink);
}
.q-close svg { width: 11px; height: 11px; }
.q-track { flex: 1; height: 5px; border-radius: var(--r-pill); background: var(--p-track); overflow: hidden; }
.q-fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--p-accent); opacity: 0.85; }

.q-stem {
  font-family: var(--text);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.35;
  color: var(--p-ink);
  margin: 0 0 13px;
}
.q-options { display: flex; flex-direction: column; gap: 7px; }
.q-opt {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  text-align: left;
  border: 1.5px solid var(--p-border);
  border-radius: 13px;
  background: var(--p-surface);
  color: var(--p-ink);
  font-family: var(--text);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.3;
}
.q-text { flex: 1; }
.q-key {
  flex: none; width: 21px; height: 21px;
  border-radius: 7px;
  display: grid; place-items: center;
  background: var(--p-key-bg);
  color: var(--p-ink-muted);
  font-family: var(--display);
  font-weight: 700;
  font-size: 10px;
}
.q-opt.is-correct {
  border-color: var(--p-success-fill);
  border-width: 2px;
  background: color-mix(in srgb, var(--p-success-fill) 12%, transparent);
}
.q-opt.is-correct .q-key { background: var(--p-success-fill); color: #06301A; }
.q-opt.is-correct .ui-icon { color: var(--p-success); }
.q-opt.is-dimmed { opacity: 0.45; }
.q-opt.is-selected { border-color: var(--p-accent); border-width: 2px; background: var(--p-accent-surface); }
.q-opt.is-selected .q-key { background: var(--p-accent); color: var(--p-ink-invert); }
.ui-icon { width: 13px; height: 13px; display: block; flex: none; }

.q-feedback {
  margin-top: 13px;
  padding: 12px;
  border-radius: 13px;
  background: var(--p-success);
  color: var(--p-on-verdict);
}
.q-verdict {
  margin: 0 0 4px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.25;
}
.q-explain { margin: 0; font-size: 11.5px; line-height: 1.45; color: currentColor; opacity: 0.88; }

/* ── Cards on the field ─────────────────────────────────────────────────── */
.card {
  background: #FDFEFD;
  color: #0F1A14;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

/* ── Buttons (the app's pressable object) ───────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-md);
  background: #0f426e;
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 4px 0 #0A2E4D;
  transition: transform 0.16s var(--ease), background 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.btn:hover { background: #0c3459; }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 #0A2E4D; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}