/* helpmevote — single stylesheet, no build step.
   Direction "1c Spectrum": data-forward and transparent. Every answer and
   position is drawn on its −2…+2 axis. Cool neutral greys with one teal
   accent that only ever stands for "you", never for a party.
   No party colours, no images, no external fonts: font files live in /fonts. */

@layer reset, tokens, base, layout, components, utilities;

/* Self-hosted, OFL-licensed (Google Fonts), latin subset only. */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/schibsted-grotesk-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
}

/* ---------- reset ---------- */
@layer reset {
  [hidden] { display: none !important; }
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote, fieldset { margin: 0; }
  fieldset { padding: 0; border: 0; min-inline-size: 0; }
  ol, ul { padding: 0; }
  button, input, select, textarea { font: inherit; color: inherit; }
}

/* ---------- design tokens ---------- */
@layer tokens {
  :root {
    color-scheme: light dark;

    /* Light theme (contrast vs --bg noted; text tokens are all ≥ 4.5:1) */
    --bg: oklch(0.975 0.004 240);
    --surface: #ffffff;
    --surface-2: oklch(0.94 0.006 250);
    --text: oklch(0.22 0.02 250);           /* ~15:1 */
    --text-muted: oklch(0.45 0.02 250);     /* ~7.4:1, body copy */
    --text-meta: oklch(0.5 0.02 250);       /* ~6:1, mono labels */
    --border: oklch(0.9 0.006 250);
    --border-strong: oklch(0.8 0.01 250);   /* track ticks */
    --accent: oklch(0.58 0.11 190);         /* "you": dots and bars only */
    --accent-text: oklch(0.45 0.11 190);    /* ~6.4:1, teal text */
    --accent-tint: color-mix(in oklch, var(--accent) 12%, var(--surface));
    --ink: var(--text);                     /* primary buttons, party bars */
    --on-ink: #ffffff;
    --ink-hover: oklch(0.3 0.02 250);
    --focus: var(--accent-text);

    /* Older aliases still used by some components */
    --accent-strong: var(--accent-text);
    --on-accent: #ffffff;
    --bar-track: var(--surface-2);

    --font-sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto,
      "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
    --font-serif: ui-serif, Georgia, "Times New Roman", serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    /* Fluid type scale: 320px → 1280px */
    --step--2: 0.75rem;
    --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
    --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
    --step-1: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
    --step-2: clamp(1.5rem, 1.33rem + 0.8vw, 2rem);
    --step-3: clamp(2rem, 1.6rem + 2vw, 3.25rem);
    --step-4: clamp(2.625rem, 1.9rem + 3.6vw, 4.5rem);

    /* Shared scale: 4 / 8 / 12 / 16 / 22 / 28 / 40 / 64 */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.375rem;
    --space-6: 1.75rem;
    --space-7: 2.5rem;
    --space-8: 4rem;

    --radius-sm: 0.5rem;
    --radius: 0.875rem;     /* buttons, answer cards */
    --radius-lg: 1.25rem;   /* cards */
    --shadow: 0 8px 24px -12px rgb(20 30 50 / 0.2);
    --shadow-lg: 0 24px 48px -28px rgb(20 30 50 / 0.3);
    --measure: 68ch;
    --wrap: 80rem;
    --gutter: clamp(1.25rem, 0.3rem + 4.7vw, 3.5rem);
    --ease: 180ms ease-out;
    --ease-slow: 450ms ease-out;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg: oklch(0.17 0.01 250);
      --surface: oklch(0.22 0.012 250);
      --surface-2: oklch(0.27 0.012 250);
      --text: oklch(0.95 0.005 250);         /* ~16:1 */
      --text-muted: oklch(0.75 0.01 250);    /* ~8.5:1 */
      --text-meta: oklch(0.72 0.01 250);     /* ~7.8:1 */
      --border: oklch(0.3 0.012 250);
      --border-strong: oklch(0.45 0.012 250);
      --accent: oklch(0.75 0.1 190);
      --accent-text: oklch(0.8 0.1 190);     /* ~10:1 */
      --accent-tint: color-mix(in oklch, var(--accent) 16%, var(--surface));
      --on-ink: oklch(0.17 0.01 250);
      --ink-hover: oklch(0.85 0.005 250);
      --on-accent: oklch(0.17 0.01 250);
      --shadow: 0 8px 24px -12px rgb(0 0 0 / 0.6);
      --shadow-lg: 0 24px 48px -28px rgb(0 0 0 / 0.7);
    }
  }
}

/* ---------- base ---------- */
@layer base {
  html { scroll-padding-block-start: var(--space-5); }

  body {
    min-block-size: 100vh;
    min-block-size: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.55;
    overflow-wrap: break-word;
  }

  h1, h2, h3 { line-height: 1.1; text-wrap: balance; font-weight: 600; }
  h1 { font-size: var(--step-3); letter-spacing: -0.035em; margin-block-end: var(--space-5); }
  h2 { font-size: var(--step-2); letter-spacing: -0.025em; margin-block: var(--space-7) var(--space-4); }
  h3 { font-size: var(--step-1); letter-spacing: -0.02em; }

  p { max-inline-size: var(--measure); text-wrap: pretty; }
  p + p, p + form, form + p { margin-block-start: var(--space-4); }
  main p { color: var(--text-muted); }

  a {
    color: var(--accent-text);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color var(--ease), text-decoration-thickness var(--ease);
  }
  a:hover { color: var(--text); text-decoration-thickness: 2px; }

  :focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
    border-radius: 2px;
  }

  blockquote {
    margin-block: var(--space-3);
    padding-inline-start: var(--space-4);
    border-inline-start: 2px solid var(--accent);
    color: var(--text);
    font-size: var(--step-0);
    line-height: 1.5;
  }

  details > summary { cursor: pointer; }

  table { border-collapse: collapse; inline-size: 100%; }
  th, td { padding: var(--space-2) var(--space-3); border-block-end: 1px solid var(--border); text-align: start; }
}

/* ---------- layout ---------- */
@layer layout {
  .wrap {
    inline-size: min(100% - 2 * var(--gutter), var(--wrap));
    margin-inline: auto;
  }

  main {
    flex: 1;
    padding-block: var(--space-6) var(--space-8);
  }
  main:focus { outline: none; }

  /* Header: brand left; nav inline on wide screens, a <details> menu sheet
     on narrow ones so it needs no JS. */
  .site-header {
    position: relative;
    border-block-end: 1px solid var(--border);
  }
  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    min-block-size: 4rem;
  }

  .brand { margin: 0; font-weight: 700; font-size: var(--step-1); letter-spacing: -0.02em; }
  .brand a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: 44px;
    color: var(--text);
    text-decoration: none;
  }
  /* The mark: a line with a teal dot on it. */
  .brand__mark {
    position: relative;
    inline-size: 1.625rem;
    block-size: 0.8125rem;
    flex: none;
  }
  .brand__mark::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(50% - 1px);
    block-size: 2px;
    background: currentColor;
  }
  .brand__mark::after {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    inset-block: 0;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--accent);
  }

  /* Countdown sits after the brand and pushes the nav to the far end. */
  .countdown {
    margin: 0 0 0 auto;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--text-muted);
    line-height: 1.3;
    text-align: end;
    max-inline-size: 12ch;
  }
  @media (max-width: 47.99rem) {
    .site-header__inner { gap: var(--space-3); }
  }
  @media (min-width: 48rem) {
    .countdown { max-inline-size: none; white-space: nowrap; }
  }

  .site-nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); }
  .site-nav .sep { display: none; }
  .site-nav a {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    color: var(--text);
    font-weight: 500;
    text-decoration: none;
  }
  .site-nav a:hover { color: var(--accent-text); }

  .site-menu > summary {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding-inline: var(--space-2);
    margin-inline-end: calc(-1 * var(--space-2));
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 500;
    list-style: none;
  }
  .site-menu > summary::-webkit-details-marker { display: none; }
  .site-menu[open] > summary { color: var(--accent-text); }
  .site-menu .site-nav {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    z-index: 5;
    flex-direction: column;
    gap: 0;
    padding: var(--space-2) var(--gutter) var(--space-4);
    background: var(--surface);
    border-block-end: 1px solid var(--border);
    box-shadow: var(--shadow);
  }
  .site-menu .site-nav a { min-block-size: 52px; border-block-end: 1px solid var(--border); }
  .site-menu .site-nav a:last-child { border-block-end: 0; }

  .site-nav--inline { display: none; }
  @media (min-width: 48rem) {
    .site-menu { display: none; }
    .site-nav--inline { display: flex; }
  }

  .site-footer {
    border-block-start: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--step--1);
    padding-block: var(--space-7);
  }
  .site-footer p { max-inline-size: 80ch; }
  .site-footer strong { color: var(--text); }
  .site-footer .disclaimer strong { display: block; font-size: var(--step-0); margin-block-end: var(--space-1); }
}

/* ---------- components: shared ---------- */
@layer components {
  .skip-link {
    position: absolute;
    inset-inline-start: var(--space-4);
    inset-block-start: var(--space-2);
    z-index: 10;
    padding: var(--space-2) var(--space-4);
    background: var(--ink);
    color: var(--on-ink);
    border-radius: var(--radius-sm);
    font-weight: 600;
    transform: translateY(-200%);
    transition: transform var(--ease);
  }
  .skip-link:focus { transform: none; color: var(--on-ink); }

  .lede { font-size: var(--step-1); line-height: 1.5; }

  /* Mono labels above headings and on cards */
  .eyebrow {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-meta);
  }
  .eyebrow--accent { color: var(--accent-text); }

  /* "This isn't perfect, just a suggestion" headings */
  .callout {
    max-inline-size: var(--measure);
    margin-block: var(--space-6) var(--space-3);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--border);
    font-size: var(--step-1);
    letter-spacing: -0.015em;
  }

  /* A calm bordered note, not a warning colour. */
  .notice {
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-inline-start: 3px solid var(--border-strong);
    border-radius: var(--radius-sm);
  }
  .notice strong { color: var(--text); }

  .break { overflow-wrap: anywhere; }

  /* Buttons: ink-filled primary, outlined secondary. */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: 52px;
    padding: var(--space-3) var(--space-6);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: var(--step-0);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--ease), border-color var(--ease), color var(--ease), transform var(--ease);
  }
  .button--primary { background: var(--ink); color: var(--on-ink); min-block-size: 56px; font-size: var(--step-1); }
  .button--primary:hover { background: var(--ink-hover); color: var(--on-ink); }
  .button--secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
  .button--secondary:hover { border-color: var(--text); color: var(--text); }
  .button:active { transform: translateY(1px); }

  /* The −2…+2 track. A line with optional quarter ticks and one or two dots
     placed with --at (0%–100%). Decorative: the numbers are always in text. */
  .track {
    position: relative;
    display: block;
    block-size: 0.875rem;
  }
  .track::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(50% - 1px);
    block-size: 2px;
    background: var(--border);
  }
  .track::after {
    content: "";
    position: absolute;
    inset-inline-start: calc(50% - 0.5px);
    inset-block: 15%;
    inline-size: 1px;
    background: var(--border-strong);
  }
  .track--ticks::after {
    inset-inline: 0;
    inline-size: auto;
    inset-block: 20%;
    background: linear-gradient(to right,
      var(--border-strong) 0 2px, transparent 2px calc(25% - 1px),
      var(--border-strong) calc(25% - 1px) calc(25% + 1px), transparent calc(25% + 1px) calc(50% - 1px),
      var(--border-strong) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) calc(75% - 1px),
      var(--border-strong) calc(75% - 1px) calc(75% + 1px), transparent calc(75% + 1px) calc(100% - 2px),
      var(--border-strong) calc(100% - 2px));
  }
  .track__dot {
    --size: 0.75rem;
    position: absolute;
    z-index: 1;
    inset-inline-start: calc(var(--at, 50%) - var(--size) / 2);
    inset-block-start: calc(50% - var(--size) / 2);
    inline-size: var(--size);
    block-size: var(--size);
    border-radius: 50%;
    background: var(--accent);
    transition: inset-inline-start var(--ease-slow);
  }
  /* A party is a hollow ink ring; "you" is the filled teal dot. */
  .track__dot--party { background: var(--surface); border: 2px solid var(--text); }
  /* Smaller and on top, so the ring stays visible when both sit together. */
  .track__dot--you { --size: 0.5rem; z-index: 2; }
  .track__dot--large { --size: 1.25rem; box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 20%, transparent); }

  /* Pole labels under a track */
  .poles {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    max-inline-size: none;
    font-size: var(--step--1);
    color: var(--text-meta);
  }
  .poles > :last-child { text-align: end; }
}

/* ---------- components: pages ---------- */
@layer components {
  /* Home: big heading and CTA, with a decorative preview of the dot plots */
  .hero {
    display: grid;
    gap: var(--space-7);
    align-items: center;
    margin-block-end: var(--space-7);
  }
  .hero h1 {
    font-size: var(--step-4);
    line-height: 1.02;
    letter-spacing: -0.035em;
    text-wrap: balance;
    max-inline-size: 16ch;
  }
  .hero__copy { display: grid; gap: var(--space-5); }
  .hero__copy > * { margin: 0; }
  .hero__stats {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--text-meta);
    max-inline-size: 52ch;
  }
  .hero__preview {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
  }
  /* The preview shows the shape of the answer control, because it used to show
     four rails with dots on them and taught the slider reading before the quiz
     had even started. */
  .hero__preview-label {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-meta);
  }
  .hero__preview-option {
    display: grid;
    grid-template-columns: 1.15rem 1fr;
    gap: var(--space-3);
    align-items: start;
    margin: 0;
    font-size: var(--step-0);
    line-height: 1.35;
  }
  .hero__preview-mark {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    margin-block-start: 0.15rem;
    border: 2px solid var(--border-strong);
    border-radius: 50%;
  }
  .hero__preview-mark--on {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 0.28rem var(--accent);
  }
  @media (min-width: 64rem) {
    .hero { grid-template-columns: 1.2fr 1fr; gap: var(--space-8); }
  }

  .home-detail { max-inline-size: var(--measure); }
  .home-detail > * + * { margin-block-start: var(--space-4); }
  .start .button { inline-size: 100%; }
  @media (min-width: 30rem) { .start .button { inline-size: auto; } }

  /* Quiz */
  .quiz-head {
    display: grid;
    gap: var(--space-3);
    max-inline-size: var(--measure);
    margin-block-end: var(--space-6);
  }
  .quiz-head h1 { margin: 0; letter-spacing: 0.02em; }
  .quiz-progress {
    display: block;
    inline-size: 100%;
    block-size: 2px;
    border: 0;
    background: var(--border);
    color: var(--accent);
    accent-color: var(--accent);
    appearance: none;
    overflow: hidden;
  }
  .quiz-progress::-webkit-progress-bar { background: var(--border); }
  .quiz-progress::-webkit-progress-value { background: var(--accent); transition: inline-size var(--ease-slow); }
  .quiz-progress::-moz-progress-bar { background: var(--accent); }

  .quiz { max-inline-size: var(--measure); }

  .answers { display: grid; gap: var(--space-3); }
  .answers legend {
    display: grid;
    gap: var(--space-3);
    margin-block-end: var(--space-4);
  }
  .answers__question {
    font-size: var(--step-2);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.025em;
    text-wrap: pretty;
  }

  /* Whole card is the label; the radio is transparent but stays focusable
     and clickable, and the card carries its checked and focus states. */
  /* The optional explanation sits between the question and the answers: the
     same disclosure pattern as the results page, tuned quieter. */
  .explain {
    margin-block: 0 var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
  }
  .explain > summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: 44px;
    font-size: var(--step--1);
    font-weight: 600;
    list-style: none;
    user-select: none;
    cursor: pointer;
  }
  .explain > summary::-webkit-details-marker { display: none; }
  .explain > summary::before {
    content: "";
    flex: none;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--ease);
  }
  .explain[open] > summary::before { transform: rotate(45deg); }
  .explain > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .explain p {
    margin: 0 0 var(--space-2);
    font-size: var(--step--1);
    line-height: 1.5;
    color: var(--text-muted);
  }

  .answer {
    position: relative;
    margin: 0;
    max-inline-size: none;
    background: var(--surface);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius);
    transition: border-color var(--ease), background-color var(--ease);
  }
  .answer + .answer { margin-block-start: 0; }
  .answer input[type="radio"] {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }
  .answer label {
    display: grid;
    grid-template-columns: 1.15rem 1fr;
    align-items: start;
    gap: var(--space-3);
    min-block-size: 52px;
    padding: var(--space-3) var(--space-4);
    line-height: 1.4;
    cursor: pointer;
  }
  /* The choice is the radio shape. This used to be a decorative rail with a
     dot on it and a −2…+2 scale underneath, which testers read as a slider and
     tried to drag. The mark is decoration only; the input above it is the
     control. */
  .answer__mark {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    margin-block-start: 0.15rem;
    border: 2px solid var(--border-strong);
    border-radius: 50%;
  }
  .answer:hover { border-color: var(--accent); }
  .answer:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
  .answer:has(input:checked) .answer__mark {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 0.28rem var(--accent);
  }
  .answer:has(input:checked) .answer__text { font-weight: 600; }
  .answer:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }

  .answers__hint {
    margin-block: 0 var(--space-3);
    max-inline-size: var(--measure);
    font-size: var(--step--1);
    color: var(--text-muted);
  }

  /* "Why, axis by axis" has to read as a control: a chevron, a word that
     changes with the state, and a padded hit area that does not move layout. */
  .result details > summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: 44px;
    margin-inline: calc(-1 * var(--space-4));
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    font-weight: 600;
    list-style: none;
    user-select: none;
    cursor: pointer;
  }
  .result details > summary::-webkit-details-marker { display: none; }
  .result details > summary::before {
    content: "";
    flex: none;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--ease);
  }
  .result details[open] > summary::before { transform: rotate(45deg); }
  .result details > summary::after {
    content: " (show)";
    font-weight: 400;
    color: var(--text-meta);
  }
  .result details[open] > summary::after {
    content: " (hide)";
    font-weight: 400;
    color: var(--text-meta);
  }
  .result details > summary:hover { background: var(--surface-2); }
  .result details > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

  .quiz .button { margin-block-start: var(--space-5); inline-size: 100%; }
  @media (min-width: 30rem) { .quiz .button { inline-size: auto; } }
  /* Share block: a read-only field, selectable and copyable without JS. */
  .share {
    max-inline-size: var(--measure);
    margin-block: var(--space-4) var(--space-7);
    padding-block-end: var(--space-5);
    border-block-end: 1px solid var(--border);
  }
  .share h2 {
    margin-block: 0 var(--space-2);
    font-size: var(--step-0);
    letter-spacing: normal;
  }
  .share__url {
    inline-size: 100%;
    margin-block-start: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--step--2);
  }
  .share__also { margin-block: var(--space-3) 0; font-size: var(--step--1); }

  /* The explicit ask, so it is not read as the end of the paragraph above it. */
  .support-ask {
    max-inline-size: var(--measure);
    font-size: var(--step-1);
  }

  .support-appeal {
    margin-block: var(--space-6) var(--space-2);
    padding-block-end: var(--space-4);
    border-block-end: 1px solid var(--border);
    font-size: var(--step--1);
    color: var(--text-meta);
  }

  /* White, not the tinted panel: scanners need a quiet zone around the code
     and a tint eats into it. The padding is that quiet zone. */
  .snapscan {
    margin-block: var(--space-5);
    padding: var(--space-5);
    max-inline-size: 22rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
  }
  .snapscan img { display: block; inline-size: 100%; height: auto; }
  .snapscan figcaption {
    margin-block-start: var(--space-3);
    font-size: var(--step--1);
    color: var(--text-meta);
  }

  /* Running top three: quiet, so it never competes with the question. */
  .quiz-trail {
    display: grid;
    gap: var(--space-2);
    max-inline-size: var(--measure);
    margin-block-end: var(--space-5);
    padding-block-end: var(--space-4);
    border-block-end: 1px solid var(--border);
  }
  .quiz-trail .eyebrow { margin: 0; }
  .quiz-trail ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .quiz-trail li {
    display: flex;
    gap: var(--space-1);
    align-items: baseline;
    font-size: var(--step--1);
  }
  .quiz-trail__pct {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--text-meta);
  }
  .quiz-trail__note {
    margin: 0;
    font-size: var(--step--2);
    color: var(--text-meta);
  }

  /* Back sits under the primary button as a quieter second action. */
  /* Party filter: label above a search field and its submit button. */
  .party-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: stretch;
    margin-block: var(--space-6) var(--space-5);
    max-inline-size: 30rem;
  }
  .party-filter label {
    flex-basis: 100%;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-meta);
  }
  .party-filter input {
    flex: 1 1 12rem;
    min-inline-size: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: var(--step--1);
  }
  .party-filter input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

  .quiz-back { margin-block-start: var(--space-5); }
  .quiz-back .button { font-size: var(--step--1); }

  .quiz-stop { margin-block-start: var(--space-5); font-size: var(--step--1); }

  /* Results: white cards; the top match is a large card with its dot plots
     open, the rest are compact rows with an ink match bar. */
  .results {
    list-style: none;
    counter-reset: rank;
    display: grid;
    gap: var(--space-3);
    margin-block: var(--space-5);
  }
  .result {
    counter-increment: rank;
    container-type: inline-size;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }
  .result__body {
    display: grid;
    grid-template-columns: 2ch 1fr;
    align-items: center;
    column-gap: var(--space-3);
    row-gap: var(--space-2);
    padding: var(--space-4);
  }
  .result__body::before {
    content: counter(rank, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--text-meta);
    font-variant-numeric: tabular-nums;
  }
  .result__body > :not(h3) { grid-column: 1 / -1; }
  .result h3 { font-size: var(--step-0); font-weight: 600; font-variant-numeric: tabular-nums; }
  .result h3 a { color: var(--text); text-decoration: none; }
  .result h3 a:hover { color: var(--accent-text); text-decoration: underline; }

  .match-bar {
    block-size: 5px;
    border-radius: 3px;
    background: var(--surface-2);
    overflow: hidden;
  }
  .match-bar span {
    display: block;
    block-size: 100%;
    inline-size: var(--pct, 0%);
    background: var(--ink);
    border-radius: inherit;
    transition: inline-size var(--ease-slow);
  }
  .result__meta { font-family: var(--font-mono); font-size: var(--step--2); color: var(--text-meta); }

  .result--top { box-shadow: var(--shadow); }
  .result--top .result__body { padding: var(--space-5); row-gap: var(--space-3); }
  .result--top .result__body::before { color: var(--accent-text); }
  .result--top h3 { font-size: var(--step-2); letter-spacing: -0.02em; line-height: 1.15; }
  .result--top .match-bar { block-size: 6px; }
  .result--top .match-bar span { background: var(--accent); }

  @container (min-width: 36rem) {
    .result__body { padding: var(--space-4) var(--space-5); }
    .result--top .result__body { padding: var(--space-6); }
  }

  .result details {
    border-block-start: 1px solid var(--border);
    padding-block-start: var(--space-2);
  }
  .result summary {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    font-weight: 500;
    font-size: var(--step--1);
    color: var(--accent-text);
  }

  /* "You" / party key above the dot plots */
  .legend {
    display: flex;
    gap: var(--space-4);
    margin-block: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--text-meta);
  }
  .legend > span { display: inline-flex; align-items: center; gap: 0.375rem; }
  .legend__dot { inline-size: 0.5625rem; block-size: 0.5625rem; border-radius: 50%; }
  .legend__dot--you { background: var(--accent); }
  .legend__dot--party { border: 2px solid var(--text); }

  /* Positions (results detail + party page) */
  .positions { display: grid; gap: var(--space-3); margin-block-start: var(--space-3); }
  .position {
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
  /* Inside a result the positions are flat rows, not nested cards. */
  .result .positions { gap: 0; margin-block-start: 0; }
  .result .position {
    padding: var(--space-4) 0;
    background: none;
    border: 0;
    border-block-end: 1px solid var(--border);
    border-radius: 0;
  }
  .result .position:last-child { border-block-end: 0; }
  .position--unknown { background: transparent; border-style: dashed; color: var(--text-muted); }
  .position dt { font-weight: 500; margin-block-end: var(--space-2); }
  .position dd { margin: 0; display: grid; gap: var(--space-2); }
  .position dd p { margin: 0; }
  .position .poles { font-size: var(--step--2); line-height: 1.35; }
  .position .poles > * { flex: 1; }
  .position__values { font-family: var(--font-mono); font-size: var(--step--2); color: var(--text-meta); }
  .position--close .position__values { color: var(--accent-text); }
  .source { font-size: var(--step--1); color: var(--text-muted); overflow-wrap: anywhere; }

  @media (min-width: 64rem) {
    main > .positions { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  }

  /* About: axes */
  .axes { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
  .axis {
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
  .axis dt { font-weight: 600; margin-block-end: var(--space-2); }
  .axis dd { margin: 0; display: grid; gap: var(--space-2); }
  .axis dd p { margin: 0; }
  .axis .track { margin-block: var(--space-2); }
  .pole { font-family: var(--font-mono); font-size: var(--step--2); line-height: 1.4; color: var(--text-meta); }

  /* Party list */
  .party-list {
    list-style: none;
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    margin-block: var(--space-4);
  }
  .party-card {
    position: relative;
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-meta);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    transition: border-color var(--ease), box-shadow var(--ease);
  }
  .party-card a {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--step-0);
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    margin-block-end: var(--space-1);
  }
  /* Share of axes with a cited position */
  .coverage {
    display: block;
    block-size: 4px;
    margin-block-start: var(--space-3);
    border-radius: 2px;
    background: linear-gradient(to right, var(--ink) var(--pct, 0%), var(--surface-2) 0);
  }
  .party-list--excluded .coverage { background: linear-gradient(to right, var(--border-strong) var(--pct, 0%), var(--surface-2) 0); }
  /* Whole card is clickable via the link's stretched hit area. */
  .party-card a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .party-card:has(a):hover { border-color: var(--accent); box-shadow: var(--shadow); }
  .party-card:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
  .party-card a:focus-visible { outline: none; }
  .party-list--excluded .party-card { background: transparent; border-style: dashed; }

  .actions-links { margin-block: var(--space-5) var(--space-4); }

  /* Any future data table scrolls inside itself rather than the page. */
  .table-wrap { overflow-x: auto; max-inline-size: 100%; -webkit-overflow-scrolling: touch; }
}

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

  @media (forced-colors: active) {
    .match-bar { border: 1px solid CanvasText; }
    .match-bar span { forced-color-adjust: none; background: CanvasText; }
    .answer:has(input:checked) { outline: 2px solid Highlight; }
  }

  @media print {
    .site-header, .skip-link, form { display: none; }
    .site-footer { background: none; color: inherit; border: 0; }
    .site-footer strong { color: inherit; }
    details > * { display: block; }
  }
}