/* Self-hosted rather than from Google Fonts: a font request would hand every
   visitor's address to a third party before they have read a word. Both are
   under the SIL Open Font License; see public/fonts/README. */
@font-face {
  font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(/fonts/schibsted-grotesk.woff2) format("woff2");
}
@font-face {
  font-family: "Schibsted Grotesk"; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url(/fonts/schibsted-grotesk-italic.woff2) format("woff2");
}
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/fonts/newsreader.woff2) format("woff2");
}
@font-face {
  font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url(/fonts/newsreader-italic.woff2) format("woff2");
}

/* Blue Almond Studio's navy and blues, on dark. --you is kept for the
   subject's own mark -- a score, a dot on a curve, a line on the rose -- and
   for nothing else, so it always means the same thing. */
:root {
  color-scheme: dark;
  --ink: #eaf1fb;
  --ink-soft: #a9bcd9;
  --ink-faint: #7086ab;
  --paper: #0b1a36;
  --card: #11244a;
  --line: #22396a;
  --line-strong: #33507f;
  --accent: #6f9be0;
  --accent-bright: #95b6ea;
  --on-accent: #081a3a;
  --you: #e6cfa7;
  --high: #7fcbae;
  --low: #e8ad74;
  --neutral: #a9bcd9;
  /* Red for left and blue for right, the convention in most of the world.
     The United States runs the other way; its parties' colours are the
     exception, and it is not in the MFQ-2's sample. */
  --side-left: #e0604f;
  --side-right: #4e84cc;
  --side-middle: #5b6a86; /* what the side colours fade into at the centre */
  --hairline: #4a5d82;    /* a quiet rule inside a chart */
  --shadow: rgb(0 0 0 / 45%);
  --font-sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Newsreader", ui-serif, Georgia, serif;
  --radius: 10px;
  --measure: 46rem;
  --measure-page: 80rem;   /* the canvas every page aligns to */
  --header-height: 4rem;   /* the sticky bar; anchors must clear it */
  --filter-height: 10.5rem; /* .filter-bar, which the rose's sticky top clears; measured by bar_height_controller.js */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 var(--font-sans);
  /* Schibsted Grotesk sets figures tabular by default, which spaces out
     "1,009,226"; tables opt back in with .numeric. */
  font-variant-numeric: proportional-nums;
}

a { color: var(--accent-bright); text-underline-offset: .2em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--you); outline-offset: 3px; }

main { max-width: var(--measure-page); margin: 0 auto; padding: 2.5rem 2rem 5rem; }

.site-header {
  /* Sticky so navigation is reachable from anywhere on a long page. Anything
     an anchor can jump to has to allow for it -- see --header-height. */
  position: sticky; top: 0; z-index: 10;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
}
.site-header-inner {
  /* The same canvas as main, so the wordmark lines up with the page content. */
  max-width: var(--measure-page); margin: 0 auto; padding: 0 2rem;
  min-height: var(--header-height);
  /* Tighter than the rest of the page: some languages' nav labels run
     half as long again as English's, and the account links should not
     wrap onto a second row at desktop width. */
  display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap;
}
.wordmark {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .75rem 0;
  font-size: 1.2rem; font-weight: 500; letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark:hover { color: var(--ink); }
.wordmark svg { flex: none; }
.wordmark-tld { color: var(--ink-faint); }
.site-footer a { color: inherit; }

h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); line-height: 1.08; letter-spacing: -.03em; font-weight: 600; margin: 0 0 .75rem; }
h2 { font-size: 1.35rem; line-height: 1.25; letter-spacing: -.015em; font-weight: 600; margin: 0; }
.lede { color: var(--ink-soft); margin-top: 0; font-size: 1.15rem; line-height: 1.55; max-width: 38em; }
.muted { color: var(--ink-soft); }
.small { font-size: .875rem; }

.flash { padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1.5rem; }
.flash-alert { background: color-mix(in srgb, var(--low) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--low) 45%, transparent); }
.flash-notice { background: color-mix(in srgb, var(--accent) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
/* A translated legal page's first line: the English is the version that applies. */
.translation-notice {
  padding: .75rem 1rem; border-radius: var(--radius); margin: 0 0 1.5rem;
  background: var(--card); border: 1px solid var(--line-strong);
  font-size: .9375rem; color: var(--ink-soft);
}

/* --- start form --- */
.start-form fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; }
.start-form legend { font-weight: 600; margin-bottom: .5rem; }
.option-card {
  display: flex; gap: .75rem; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem; margin-bottom: .75rem; cursor: pointer;
}
.option-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.option-body { display: flex; flex-direction: column; }
.option-body .meta { font-size: .85rem; color: var(--ink-soft); }
.option-body .muted { font-size: .8rem; }

/* --- Site navigation ------------------------------------------------------ */

/* Beside the wordmark; the account controls take the free side. */
.site-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.site-account {
  display: flex; align-items: center; gap: 1rem;
  font-size: .9375rem;
}
/* Pushes itself and the account links to the end of the header. */
.language-picker { margin-inline-start: auto; }
.language-picker select {
  font: inherit; font-size: .875rem; color: var(--ink-soft);
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: 4px; padding: .2rem .4rem; max-width: 11rem;
}
/* :not(.button), or this wins over the button's own colour and leaves dark
   text on the accent fill. */
.site-account a:not(.button) { color: var(--ink-soft); text-decoration: none; }
.site-account a:not(.button):hover { color: var(--ink); }
.site-account-email { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-account form { margin: 0; }
.link-button {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--ink-soft); text-decoration: underline;
}
.link-button:hover { color: var(--ink); }
.site-nav a {
  font-size: .9375rem; color: var(--ink-soft); text-decoration: none;
  padding: .2rem 0; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

/* --- Accounts ------------------------------------------------------------- */

/* Native <dialog>: focus trapping, Esc to close and the backdrop come from the
   browser rather than from us. The trigger links point at the real pages, so
   this degrades to ordinary navigation. */
.auth-dialog {
  width: min(26rem, calc(100vw - 2rem));
  padding: 1.5rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); color: var(--ink);
  box-shadow: 0 16px 48px var(--shadow);
}
.auth-dialog::backdrop { background: rgb(4 10 24 / 70%); }
.auth-dialog h2 { font-size: 1.15rem; margin: 0 0 .25rem; }
.auth-dialog > p.muted { margin-top: 0; }
.auth-dialog .auth-form { margin-top: 1rem; }
.auth-dialog .auth-links { margin-top: 1rem; text-align: center; }

.auth-dialog-close { position: absolute; top: .5rem; right: .5rem; margin: 0; }
.auth-dialog-close button {
  background: none; border: 0; cursor: pointer;
  font-size: 1.4rem; line-height: 1; padding: .25rem .5rem;
  color: var(--ink-soft);
}
.auth-dialog-close button:hover { color: var(--ink); }



.auth-panel {
  max-width: 24rem; padding: 1.25rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.auth-form .field { margin-bottom: 1rem; }
/* The signup honeypot (devise/shared/_honeypot): off-screen, not display:none, which some bots check for. */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.auth-form .field-inline { display: flex; align-items: center; gap: .5rem; }
.auth-form .field-inline span { display: inline; font-weight: 400; margin: 0; }
.auth-divider {
  display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0 1rem;
}
.auth-divider hr { flex: 1 1 auto; border: 0; border-top: 1px solid var(--line); margin: 0; }
.auth-divider span { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.auth-divider-note { margin-top: 1.25rem; }
.consent-line { margin-top: 1rem; }
.auth-panel form + .consent-line { margin-top: .75rem; }
.auth-links { display: flex; flex-direction: column; gap: .35rem; margin-top: 1.25rem; font-size: .85rem; }

.claim-prompt, .keep-prompt {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  justify-content: space-between;
  background: var(--card); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 1rem; margin-bottom: 1.5rem;
}
.keep-prompt h2 { font-size: 1rem; margin: 0 0 .25rem; }
.keep-prompt p { margin: 0; }
.keep-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.placement-offer form { display: grid; gap: .6rem; justify-items: start; }
.placement-offer .consent { margin: 0; }

.result-list { list-style: none; margin: 0; padding: 0; }
.result-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1rem; margin-bottom: .5rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.result-row .muted { display: block; }
.result-actions { display: flex; align-items: center; gap: .35rem; flex: none; }
.delete-form { margin: 0; display: inline-flex; }
.icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0; border-radius: 6px;
  background: none; border: 1px solid transparent; color: var(--ink-soft); cursor: pointer;
}
.icon-button:hover, .icon-button:focus-visible { color: var(--low); border-color: var(--line); background: var(--paper); }
/* The label is the only thing telling two passes of one series apart, so it
   sits next to the inventory name rather than down in the metadata line. */
.result-row .subject-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem; color: var(--ink-soft);
}
.pill-webhook { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-bright); text-transform: none; }
.run-stopped { color: var(--low); }

/* --- Home ---------------------------------------------------------------- */

.home-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3.5rem; align-items: center;
  padding: 3.5rem 0 4.5rem;
}
.home-hero h1 { font-size: clamp(2.5rem, 1.5rem + 3.2vw, 3.9rem); letter-spacing: -.035em; line-height: 1.03; margin-bottom: 1.5rem; }
.home-hero .lede { margin-bottom: 1.75rem; }
.home-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; }
.home-hero-actions .start-form { margin: 0; }

.home-curve { margin: 0; }
.home-curve svg { display: block; width: 100%; height: auto; }
.curve-area { fill: var(--accent); fill-opacity: .16; }
.curve-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.curve-base { stroke: var(--line-strong); }
.curve-tick { stroke: var(--ink-faint); }
.curve-tick-label { fill: var(--ink-soft); font-size: 12px; }
.curve-you-line { stroke: var(--you); stroke-width: 1.5; stroke-dasharray: 3 4; }
.curve-you { fill: var(--you); }
.curve-you-label { fill: var(--you); font-size: 15px; }

.inventories { padding-bottom: 2rem; }
.inventories-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 2rem; margin-bottom: 1.5rem; }
.inventories-header h2 { font-size: 1.9rem; letter-spacing: -.02em; }
.inventories-header p { margin: 0; }

/* One grid for the header and every row, so a column is a column. */
.inventory-head, .inventory-row {
  display: grid; align-items: start; gap: .5rem 1.75rem;
  grid-template-columns: minmax(0, 2.4fr) 4.5rem 5.5rem minmax(0, 1.4fr) 6.5rem;
}
.inventory-head { padding: 0 0 .6rem; font-size: .8125rem; color: var(--ink-soft); }
.inventory-rows { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.inventory-row { padding: 1.4rem 0; border-top: 1px solid var(--line); }
.inventory-name h3 { margin: 0; font-size: 1.2rem; font-weight: 500; letter-spacing: -.01em; }
.inventory-name p { margin: .2rem 0 0; }
.inventory-name .inventory-measures { margin-top: .45rem; }
.inventory-figure { margin: 0; font-size: 1.05rem; }
.inventory-figure .muted { display: block; margin-top: .2rem; }
.inventory-figure-label { display: none; }
.inventory-row .start-form { margin: 0; justify-self: end; }
.inventory-row .start-form .button { width: 6.5rem; }
.inventory-row .caveats { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; }

@media (max-width: 56rem) {
  .home-hero { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 1.5rem; }
  .inventory-head { display: none; }
  .inventory-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inventory-name, .inventory-row .start-form { grid-column: 1 / -1; }
  .inventory-row .start-form { justify-self: start; }
  .inventory-figure-label { display: block; font-size: .8125rem; color: var(--ink-soft); }
}

.consent-dialog { width: min(32rem, calc(100vw - 2rem)); }
.consent-dialog p, .consent-page p { line-height: 1.5; }
.consent-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.consent-actions .button { width: auto; }
.consent { display: flex; gap: .45rem; align-items: flex-start; margin-bottom: .5rem; color: var(--ink-soft); line-height: 1.35; }
.consent input { margin-top: .15rem; flex: none; }

/* --- Inventory vital statistics ------------------------------------------ */
/* Every inventory states its shape and its limits before you start, so the
   result is read as a measurement with known properties rather than a verdict. */

.option-body > * + * { margin-top: .5rem; }

.vitals {
  display: grid; gap: .5rem .75rem;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--line);
}
.vital { display: flex; flex-direction: column; font-size: .85rem; }
.vital-label {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-soft); font-weight: 600;
}
.traits { display: block; font-size: .85rem; color: var(--ink-soft); }
.traits .vital-label { display: block; }

.caveats { font-size: .85rem; margin-top: .5rem; }
.caveats > summary { cursor: pointer; color: var(--accent); }
.caveats ul { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--ink-soft); }
.caveats li + li { margin-top: .4rem; }

/* --- What the scores can and cannot say ---------------------------------- */

.limits { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.limits h2 { font-size: 1.1rem; }
.limit-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 1rem 0 1.25rem;
}
.limit-grid h3 { font-size: .9rem; margin: 0 0 .35rem; }
.limit-grid p { margin: 0; font-size: .875rem; color: var(--ink-soft); }

/* --- FAQ ------------------------------------------------------------------ */

/* The FAQ runs wider than the rest of the site because it carries a sidebar;
   the reading column itself stays about the same width as everywhere else. */




.faq-layout {
  display: grid; align-items: start;
  /* The canvas is wide, the reading column is not: 45-75 characters a line is
     the readable range, so the answers keep their own measure and the spare
     width is left empty rather than spent on longer lines. */
  grid-template-columns: 14rem minmax(0, var(--measure));
  gap: 2.5rem;
}

.faq-toc { font-size: .8rem; }
.faq-toc ol {
  list-style: none; margin: 0; padding: 0;
  border-left: 2px solid var(--line);
}
.faq-toc li a {
  display: block; padding: .4rem .75rem;
  color: var(--ink-soft); text-decoration: none;
  border-left: 2px solid transparent; margin-left: -2px;
}
.faq-toc li a:hover { color: var(--ink); border-left-color: var(--line); }
.faq-toc li a:target,
.faq-toc li a:focus-visible { color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  /* Not .faq: smooth scrolling that pane does nothing, and its jumps are
     handled by the faq controller. */
  html { scroll-behavior: smooth; }
}

/* Wide screens: the FAQ is a fixed shell. The header, the title and the list
   of questions all stay put, and only the answers scroll, so jumping to a
   question never scrolls the page furniture away. Heights come from flexbox
   rather than from a measurement, so nothing has to be kept in sync by hand. */
@media (min-width: 54.01rem) {
  body:has(.faq-layout) {
    height: 100vh; overflow: hidden;
    display: flex; flex-direction: column;
  }
  body:has(.faq-layout) main {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    padding-bottom: 0;
    /* As a column flex item, main's auto side margins override `stretch` and
       shrink it to its content -- which pulls the whole page right of the
       wordmark. Fill the canvas explicitly and let the margins centre it. */
    width: 100%;
  }
  body:has(.faq-layout) .hero { flex: 0 0 auto; }

  .faq-layout { flex: 1 1 auto; min-height: 0; align-items: stretch; }
  .faq-toc  { min-height: 0; overflow-y: auto; padding-bottom: 1rem; }
  .faq {
    min-height: 0; overflow-y: auto;
    padding-right: 1rem; padding-bottom: 3rem;
  }
  /* Inside a scroll container the offset is measured from the container's own
     top edge, so the sticky bar is already accounted for. */
  .faq h2 { scroll-margin-top: 1rem; }
}

/* Narrow screens: ordinary page scrolling, with the list as a plain index
   above the answers. Locking body scroll on a phone would be a mistake. */
@media (max-width: 54rem) {
  .faq-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .faq h2 { scroll-margin-top: calc(var(--header-height) + 1rem); }
}


/* Columns, not a grid: a grid fills left to right, so an alphabetical list
   reads across the page. Columns fill top to bottom, which is how anyone
   scans one. The count falls to two and then one as the window narrows. */
.glossary dl {
  margin: 1rem 0 0;
  columns: 3 20rem; column-gap: 2.5rem;
}
.glossary dl > div {
  break-inside: avoid;
  margin-bottom: 1.1rem;
}
.glossary dt {
  font-weight: 600; margin-top: 0;
  font-size: .9rem;
}
.glossary dd {
  margin: .25rem 0 0; padding-left: 0;
  font-size: .875rem; color: var(--ink-soft);
}


.faq section + section { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.faq h2 { font-size: 1.05rem; }
.faq ul.plain { list-style: none; padding-left: 0; }
.faq ul.plain li { margin-bottom: .35rem; }

.field { display: block; margin-bottom: 1.5rem; }
.field span { display: block; font-weight: 600; margin-bottom: .35rem; }
input, select, textarea { color: var(--ink); accent-color: var(--accent); }
.field input {
  width: 100%; padding: .6rem .75rem; font: inherit;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--card);
}

/* Pill-shaped and filled for the one thing to do next; outlined for the
   alternatives beside it. */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.75rem; padding: 0 1.35rem; font: inherit; font-weight: 500;
  color: var(--on-accent); background: var(--accent); border: 1px solid var(--accent);
  border-radius: 999px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.button:hover { color: var(--on-accent); background: var(--accent-bright); border-color: var(--accent-bright); }
.button-quiet { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.button-quiet:hover { background: transparent; color: var(--ink); border-color: var(--accent); }
/* Modifiers must follow the base rule, or its background overrides theirs. */
.button-small  { min-height: 2.25rem; padding: 0 .95rem; font-size: .9rem; }
.button-wide   { width: 100%; text-align: center; }
.button-danger { background: var(--low); border-color: var(--low); color: var(--on-accent); }
.button-danger:hover { background: color-mix(in srgb, var(--low) 80%, white); border-color: transparent; }

/* --- api keys --- */
/* A key is shown exactly once, so the box that holds it has to be the most
   obvious thing on the page while it is there. */
.notice-once {
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
  padding: 1rem;
  margin: 1rem 0;
}
.notice-once p { margin: 0 0 .5rem; }
.notice-once p:last-child { margin-bottom: 0; }
/* The key and its copy button share a row; the button keeps its width and
   the key takes the rest, so a long key wraps instead of squeezing it. */
.api-key-token { display: flex; align-items: flex-start; gap: .5rem; }
.api-key-token .button { flex: 0 0 auto; }
.button.is-copied { color: var(--high); border-color: var(--high); }
/* Reserves the line, so confirming a copy does not shift the page under the
   pointer that just clicked. */
.notice-once .copy-status { min-height: 1.2em; margin: .35rem 0 0; }

/* Wraps rather than scrolls: a key half off the edge is a key half copied. */
.api-key-token code {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  padding: .6rem .7rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: .9rem;
  word-break: break-all;
}

.key-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.key-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--line);
}
.key-list li:last-child { border-bottom: 0; }
.key-name { font-weight: 600; }
/* Pushes the revoke button to the far edge, away from anything else clickable. */
.key-list form { margin-left: auto; }

/* --- questions --- */
.progress { height: 4px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; background: var(--accent); transition: width .2s ease; }
.progress-label { font-size: .9375rem; color: var(--ink-soft); margin: .75rem 0 2rem; }
.instruction { font-weight: 600; }
.instructions { margin: 0 0 2.5rem; max-width: 38em; }
.instructions p { margin: 0 0 .6rem; font-family: var(--font-serif); font-size: 1.2rem; line-height: 1.5; color: var(--ink-soft); }

.question-form { max-width: 52rem; }
.questions { list-style: none; padding: 0; margin: 0; }
.question { counter-increment: item; padding: 0 0 2.5rem; }
.statement {
  display: flex; gap: 1rem; align-items: baseline;
  margin: 0 0 1rem; font-family: var(--font-serif); font-size: 1.75rem; line-height: 1.25;
}
.statement::before { content: counter(item); flex: none; width: 1.75rem; font-family: var(--font-sans); font-size: .875rem; color: var(--ink-faint); }

/* The answers are the radios themselves, drawn as buttons: the input stays in
   the label, invisible but focusable, so keyboard and screen readers get a
   radio group and the pointer gets a big target. */
.choices { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; margin-left: 2.75rem; }
.choice { position: relative; display: flex; cursor: pointer; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice span {
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 3.25rem; padding: .5rem .6rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-size: .875rem; line-height: 1.25; color: var(--ink-soft);
  transition: background-color .12s, border-color .12s, color .12s;
}
.choice:hover span { border-color: var(--accent); color: var(--ink); }
.choice input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 500; }
.choice input:focus-visible + span { outline: 2px solid var(--you); outline-offset: 2px; }

.actions { display: flex; gap: .75rem; align-items: center; justify-content: space-between; margin-top: .5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.actions .button:only-child { margin-left: auto; }

/* --- results --- */
/* The chart on the left, held in view while the traits scroll past on the
   right; one column on narrow screens, chart first. */
.result-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 4rem; align-items: start; margin-top: 2.5rem;
}
.result-aside { position: sticky; top: calc(var(--header-height) + 1.5rem); }
/* The reference-group picker, held under the site header across the page. */
.filter-bar {
  position: sticky; top: var(--header-height); z-index: 9;
  margin: 1.5rem -2rem 0; padding: .5rem 2rem .6rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
}
.filter-bar .reference-form .field { flex: 1 1 9rem; }
.filter-bar .reference-form select { max-width: none; padding: .4rem .6rem; }
.filter-bar .reference { margin: .6rem 0 0; padding: .55rem .9rem; }
.filter-bar .reference-form + .reference { margin-top: .6rem; }
.filter-bar .reference:first-child { margin-top: 0; }
.filter-bar .reference p { margin: 0; }
.filter-bar .reference details.blurb { margin-top: .25rem; }
/* Open, the note scrolls inside the bar rather than pushing the page under it. */
.filter-bar .reference details.blurb > p { max-height: 30vh; overflow-y: auto; margin-top: .35rem; }
main:has(.filter-bar) .result-layout { margin-top: 2rem; }
main:has(.filter-bar) .result-aside { top: calc(var(--header-height) + var(--filter-height) + 1.5rem); }
.result-aside .radial:not(.radial-mini) { display: grid; gap: 1.5rem; margin: 0; }
.result-aside .radial:not(.radial-mini) > svg { width: 100%; flex: none; }
.result-aside .radial-legend { max-width: none; }
@media (max-width: 60rem) {
  .result-layout { grid-template-columns: 1fr; gap: 2rem; }
  .result-aside { position: static; max-width: 30rem; }
  /* Four dropdowns wrap to two rows here: too much to hold over the page. */
  .filter-bar { position: static; }
}

.domain { padding: 2rem 0; border-top: 1px solid var(--line); }
.domain:last-of-type { border-bottom: 1px solid var(--line); }
.domain-header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.domain-header h2, .domain-header h3 { margin: 0; font-size: 1.6rem; letter-spacing: -.02em; }
.domain .summary { font-family: var(--font-serif); font-weight: 400; font-size: 1.15rem; line-height: 1.45; color: var(--ink-soft); margin: 0 0 .75rem; }

/* The reference group's own spread of scores, and the subject on it. */
.distribution-block { margin: 1rem 0 1.1rem; }
.distribution-wrap { position: relative; }
.distribution-hit { fill: transparent; }
.distribution-hit:hover { fill: var(--ink); fill-opacity: .07; }
.distribution-range { fill: none; stroke: var(--you); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
/* Coloured by left-right placement where there is a grid, and taller, so
   the thin layers in the tails can be told apart. */
.distribution-block:has(.distribution-sides) .distribution { height: 8rem; }
.distribution-block:has(.distribution-sides) .distribution-area { display: none; }
.distribution-key { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: .5rem 0 0; color: var(--ink-soft); }
.distribution-key > * { display: inline-flex; align-items: center; gap: .45rem; }
.distribution-key i { display: inline-block; flex: none; }
.distribution-key-you { width: .6rem; height: .6rem; border-radius: 50%; background: var(--you); }
.distribution-key-median { width: 1.5px; height: .8rem; background: var(--ink); opacity: .75; }
.distribution-key-range { width: 1rem; height: .45rem; border: 1.5px solid var(--you); border-top: 0; }
.distribution-legend { margin: .75rem 0 0; color: var(--ink-soft); }
.distribution-legend-title { margin: 0 0 .35rem; }
.distribution-scale { display: flex; align-items: center; gap: 2px; margin: 0; }
.distribution-scale b {
  display: flex; align-items: center; justify-content: center; flex: 0 1 1.6rem; height: 1.4rem;
  border-radius: 3px; font-size: .7rem; font-weight: 600; color: #fff;
}
.distribution-scale-end { white-space: nowrap; }
.distribution-scale-end:first-child { margin-right: .5rem; }
.distribution-scale-end:last-child { margin-left: .5rem; }
.pl1-key { background: color-mix(in srgb, var(--side-left) 100%, var(--side-middle)); }
.pl2-key { background: color-mix(in srgb, var(--side-left) 78%, var(--side-middle)); }
.pl3-key { background: color-mix(in srgb, var(--side-left) 56%, var(--side-middle)); }
.pl4-key { background: color-mix(in srgb, var(--side-left) 34%, var(--side-middle)); }
.pl5-key { background: color-mix(in srgb, var(--side-left) 12%, var(--side-middle)); }
.pl6-key { background: color-mix(in srgb, var(--side-right) 12%, var(--side-middle)); }
.pl7-key { background: color-mix(in srgb, var(--side-right) 34%, var(--side-middle)); }
.pl8-key { background: color-mix(in srgb, var(--side-right) 56%, var(--side-middle)); }
.pl9-key { background: color-mix(in srgb, var(--side-right) 78%, var(--side-middle)); }
.pl10-key { background: color-mix(in srgb, var(--side-right) 100%, var(--side-middle)); }
.distribution { display: block; width: 100%; height: 5rem; overflow: visible; }
.distribution-area { fill: var(--accent); fill-opacity: .22; }
.distribution-line { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.distribution-base { stroke: var(--line-strong); vector-effect: non-scaling-stroke; }
.distribution-median { stroke: var(--ink); stroke-opacity: .75; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.distribution-you-line { stroke: var(--you); stroke-width: 1.5; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.distribution-you {
  position: absolute; width: .8rem; height: .8rem; margin: -.4rem 0 0 -.4rem;
  border-radius: 50%; background: var(--you); box-shadow: 0 0 0 3px var(--paper);
}
.score { margin: 0; text-align: right; }
.domain .percentile { font-size: 1.1rem; }
.level { font-weight: 650; text-transform: capitalize; }
.raw { display: block; font-size: .8rem; color: var(--ink-soft); }
/* A model's score, led by the number. */
.score-lead > span { display: block; }
.score-value { font-size: 1.9rem; font-weight: 700; line-height: 1.05; color: var(--ink); }
.score-max { font-size: .95rem; font-weight: 500; color: var(--ink-soft); }
.score-spread { font-size: .8rem; color: var(--ink-soft); }
.score-rank { font-size: .85rem; margin-top: .15rem; }
.score-rank .percentile-inline { font-weight: 600; }
.level-high .level { color: var(--high); }
.level-low .level { color: var(--low); }
.level-neutral .level { color: var(--neutral); }

.meter { height: 8px; background: var(--line); border-radius: 999px; margin: .75rem 0 1rem; overflow: hidden; }
.meter-fill { height: 100%; background: var(--accent); }
.summary { font-weight: 600; margin: 0 0 .5rem; }
.verdict { margin: 0 0 .5rem; }

details { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: .75rem; }
/* A long explanation folded under a one-line summary, read on request. */
details.blurb { border-top: 0; margin: .5rem 0 0; padding: 0; }
details.blurb > p { margin: .5rem 0 0; }
summary { cursor: pointer; font-weight: 500; font-size: .9375rem; color: var(--accent-bright); }
summary:hover { color: var(--ink); }
/* A facet per row, laid out like its trait's header: what it is on the left,
   the score first and largest on the right, then its rank, then the spread. */
.facet-list { list-style: none; margin: .75rem 0 0; padding: 0; }
.facet {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 2rem;
  padding: .85rem 0; border-bottom: 1px solid var(--line);
}
.facet:last-child { border-bottom: 0; }
.facet h4 { margin: 0; font-size: .95rem; font-weight: 600; }
.facet-description { margin: .2rem 0 0; font-size: .8rem; line-height: 1.45; color: var(--ink-soft); }
.facet-score { margin: 0; text-align: right; white-space: nowrap; }
.facet-score > span { display: block; }
.facet-value { font-size: 1.35rem; font-weight: 700; line-height: 1.1; color: var(--ink); }
.facet-value .score-max { font-size: .8rem; }
.facet-rank { font-size: .8rem; margin-top: .3rem; color: var(--ink-soft); }
.facet-rank .pill { margin-right: .3rem; }
.facet-spread { font-size: .75rem; color: var(--ink-soft); margin-top: .15rem; }
@media (max-width: 30rem) {
  .facet { grid-template-columns: 1fr; }
  .facet-score { text-align: left; }
}
.numeric { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Numbers that stand alone rather than in a column keep the face's own
   spacing: tabular figures leave gaps around a 1 and a point ("95 . 6"). */
.score-value, .score-spread, .facet-value, .facet-spread { font-variant-numeric: proportional-nums; }
.pill { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .75rem; text-transform: capitalize; background: var(--line); }
.pill-high { background: color-mix(in srgb, var(--high) 16%, transparent); color: var(--high); }
.pill-low { background: color-mix(in srgb, var(--low) 16%, transparent); color: var(--low); }

@media (max-width: 46rem) {
  .choices { grid-template-columns: 1fr; margin-left: 0; }
  .choice span { justify-content: flex-start; padding-left: 1rem; min-height: 2.9rem; }
  .statement { font-size: 1.45rem; }
}

@media (max-width: 30rem) {
  .domain-header { flex-direction: column; }
  .score { text-align: left; }
}

/* --- demographics on the start form --- */
.demographics { border: 0; padding: 0; margin: 0 0 1.5rem; }
.demographics legend { font-weight: 600; margin-bottom: .35rem; }
.field-row { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .75rem; }
.field-row .field { flex: 1 1 8rem; margin-bottom: 0; }
.field select, .field input[type="number"] {
  width: 100%; padding: .6rem .75rem; font: inherit;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
}

/* --- reference group panel --- */
.reference {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.15rem; margin-bottom: 1rem;
}
.reference p { margin: 0 0 .5rem; }
.reference-form select {
  padding: .5rem .6rem; font: inherit; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--paper); max-width: 22rem;
}
.percentile { display: block; font-weight: 600; font-size: .85rem; }
.meter { position: relative; }
.meter-mark {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--paper); opacity: .9;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.pill-average { background: var(--line); color: var(--neutral); }

/* two-axis reference picker */
.reference-form { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; }
.reference-form .field { flex: 1 1 10rem; margin-bottom: 0; }
.reference-form .field span { font-size: .8rem; font-weight: 600; }
.reference-form select { width: 100%; }


/* --- Admin ---------------------------------------------------------------- */

/* A different skin on purpose. The panel can disable accounts, and there
   should never be a moment of wondering which side of the service this is. */
body.admin {
  color-scheme: light;
  --ink: #16181d; --ink-soft: #5b616e; --ink-faint: #8a8f99;
  --paper: #fbfaf8; --card: #ffffff; --line: #e4e2dd; --line-strong: #cfccc5;
  --accent: #3f5d9a; --accent-bright: #3f5d9a; --on-accent: #ffffff;
  --high: #2f6f57; --low: #8a5a2b; --neutral: #5b616e;
  --shadow: rgb(22 24 29 / 15%);
  background: #f3f4f6;
}
body.admin .button { border-radius: var(--radius); }
body.admin .button:hover { background: var(--accent); border-color: var(--accent); filter: brightness(1.1); }
body.admin .button-quiet { color: var(--accent); }
.admin-header { background: var(--ink); color: #fff; border-bottom: 0; }
.admin-header-inner {
  max-width: var(--measure-page); margin: 0 auto; padding: 0 1rem;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.admin-header .wordmark { color: #fff; padding: .9rem 0; }
.admin-header .wordmark span { font-weight: 400; opacity: .6; }
.admin-header .site-nav a { color: rgb(255 255 255 / 70%); }
.admin-header .site-nav a:hover,
.admin-header .site-nav a[aria-current="page"] { color: #fff; border-bottom-color: #fff; }
.admin-header .site-account { color: rgb(255 255 255 / 60%); }
.admin-header .site-account a:not(.button),
.admin-header .site-account .link-button,
.admin-header .site-account .muted { color: rgb(255 255 255 / 70%); }
.admin-header .site-account a:not(.button):hover,
.admin-header .site-account .link-button:hover { color: #fff; }

body.admin h1 { font-size: 1.4rem; }
body.admin h2 { font-size: 1rem; margin-top: 2rem; }

.stat-grid {
  display: grid; gap: .75rem; margin: 1rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.stat {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .85rem 1rem;
  display: flex; flex-direction: column; gap: .15rem;
}
.stat-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); font-weight: 600; }
.stat strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }

.admin-table {
  width: 100%; border-collapse: collapse; margin-top: .75rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: .875rem;
}
.admin-table th, .admin-table td { padding: .5rem .75rem; text-align: left; border-bottom: 1px solid var(--line); }
.admin-table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.admin-table tbody tr:last-child th, .admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table .numeric { text-align: right; font-variant-numeric: tabular-nums; }
.admin-detail th { width: 12rem; color: var(--ink-soft); font-weight: 600; }

.admin-filters {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem; margin: 1rem 0;
}
.admin-filters .field { margin: 0; }
.admin-filters fieldset { border: 0; padding: 0; margin: 0; }
.admin-filters legend { font-weight: 600; margin-bottom: .35rem; font-size: 1rem; }
.checkbox-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.checkbox { display: flex; align-items: center; gap: .3rem; font-size: .85rem; font-weight: 400; }
.admin-filter-actions { display: flex; gap: .5rem; }

/* Pagy's page links, in the panel's own colours rather than its stylesheet. */
.pagy.series-nav { display: flex; flex-wrap: wrap; gap: .25rem; margin: 1rem 0; font-size: .85rem; }
.pagy.series-nav a {
  padding: .25rem .6rem; border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--accent); text-decoration: none;
}
.pagy.series-nav a[href]:hover { border-color: var(--accent); }
.pagy.series-nav a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pagy.series-nav a[aria-disabled="true"]:not([aria-current]) { color: var(--ink-faint); }

.admin-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.admin-actions form { margin: 0; }

/* Support message bodies: plain text from strangers, never rendered as HTML. */
.message-body {
  white-space: pre-wrap; word-break: break-word; font-family: inherit;
  background: var(--paper); border-left: 3px solid var(--line);
  padding: .75rem 1rem; margin: .5rem 0; font-size: .95rem;
}
.pill-warn { background: color-mix(in srgb, var(--low) 22%, transparent); color: var(--low); }

/* --- ai assessments --- */
/* The list: a row per model and inventory -- chart, who, traits, link. */
.ai-list [hidden] { display: none !important; }
.ai-list-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.ai-list-search input {
  width: 16rem; max-width: 100%; padding: .5rem .75rem; font: inherit;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink);
}
.ai-list-count { margin: 0; }
/* A checkbox list that opens like a select. */
.multi-select { position: relative; border-top: 0; margin: 0; padding: 0; }
.multi-select summary {
  list-style: none; cursor: pointer; padding: .5rem 2rem .5rem .75rem; font-weight: 400; font-size: 1rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  position: relative; white-space: nowrap;
}
.multi-select summary::-webkit-details-marker { display: none; }
.multi-select summary::after {
  content: ""; position: absolute; right: .8rem; top: 50%; margin-top: -.3rem;
  width: .4rem; height: .4rem; border: solid var(--ink-soft); border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.multi-select[open] summary::after { transform: rotate(-135deg); margin-top: -.1rem; }
.multi-select fieldset {
  position: absolute; z-index: 5; top: calc(100% + .25rem); left: 0; min-width: 100%;
  margin: 0; padding: .4rem 0; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); box-shadow: 0 6px 18px var(--shadow);
}
.multi-select label { display: flex; align-items: center; gap: .5rem; padding: .35rem .85rem; white-space: nowrap; cursor: pointer; }
.multi-select label:hover { background: var(--paper); }

.ai-list-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ai-list-row, .ai-list-head {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr) 7rem 17rem 5rem;
  align-items: center; gap: 1.25rem;
}
.ai-list-row > .button { justify-self: end; }
.ai-list-row { padding: .75rem 0; border-bottom: 1px solid var(--line); }
.ai-list-head { padding: 0 0 .4rem; font-size: .75rem; font-weight: 600; color: var(--ink-soft); }
.ai-list-head .ai-list-traits { align-items: flex-end; }
.ai-list-head .ai-list-traits .muted { font-weight: 400; text-align: right; }
.ai-list-head .sort {
  font: inherit; color: inherit; background: none; border: 0; padding: .15rem 0; cursor: pointer;
  min-width: 2rem; text-align: inherit;
}
/* The arrow hangs off the side so a trait's code stays centred over its
   number. */
.ai-list-traits .sort { text-align: center; position: relative; }
.ai-list-traits .sort::after { position: absolute; left: 100%; }
.ai-list-head .sort:hover, .ai-list-head .sort[aria-pressed="true"] { color: var(--ink); }
.ai-list-head .sort::after { content: "\2195"; opacity: .35; margin-left: .15rem; font-weight: 400; }
.ai-list-head .sort[data-direction="asc"]::after { content: "\2191"; opacity: 1; }
.ai-list-head .sort[data-direction="desc"]::after { content: "\2193"; opacity: 1; }
.ai-list-empty { padding: 1rem 0; }
.ai-list-who h3 { font-size: 1.05rem; margin: 0; }
.ai-list-who h3 a { color: inherit; text-decoration: none; }
.ai-list-who h3 a:hover { text-decoration: underline; }
.ai-list-who p { margin: .15rem 0 0; }
.ai-list-inventory { margin: 0; color: var(--ink-soft); }
.ai-meta code, .ai-list-who code, .hero code { font-size: .85em; }
/* A fixed track, right-aligned: five traits and six foundations end at the
   same edge, so the inventory column lines up down the list. */
.ai-list-traits { display: flex; justify-content: flex-end; gap: .9rem; margin: 0; }
.ai-list-traits div { text-align: center; min-width: 2rem; }
.ai-list-traits dt { font-size: .75rem; font-weight: 600; color: var(--ink-soft); }
.ai-list-traits dd { margin: 0; font-size: 1rem; }
.ai-list-traits .level-high dd { color: var(--high); }
.ai-list-traits .level-low dd { color: var(--low); }
@media (max-width: 44rem) {
  .ai-list-row { grid-template-columns: 6rem minmax(0, 1fr); gap: .5rem 1rem; }
  .ai-list-head { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
  .ai-list-head > span { display: none; }
  .ai-list-row > .radial { grid-row: span 4; align-self: start; }
  .ai-list-inventory, .ai-list-traits, .ai-list-row > .button { grid-column: 2; justify-self: start; }
}

.ai-top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 1.5rem 4rem; align-items: end;
}
.ai-identity h1 { margin-bottom: .35rem; }
.ai-meta { margin: 0; color: var(--ink-soft); }
.ai-meta strong { color: var(--ink); font-weight: 600; }
.ai-note { margin: .35rem 0 0; }
.ai-basis .vitals { margin: 0; padding: 0; border: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.5rem; }
.ai-basis dd { margin: .1rem 0 0; font-size: .9rem; }
.ai-basis p { margin: .75rem 0 0; }
@media (max-width: 60rem) {
  .ai-top { grid-template-columns: 1fr; }
}
.ai-profile { margin-bottom: 2.5rem; }
.ai-profile > h2 { font-size: 1.15rem; margin-bottom: .75rem; }
.ai-basis-box {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); padding: 1rem 1.15rem; margin-bottom: 1rem;
}
.ai-basis-box .vitals { margin: 0; padding-top: 0; border-top: 0; display: flex; flex-wrap: wrap; gap: 1.25rem; }
.ai-basis-box dd { margin: 0; font-size: .9rem; }
.ai-basis-box p { margin: .75rem 0 0; }
.crumb { margin: 0 0 .35rem; }

.ai-framing, .ai-passes { border-top: 1px solid var(--line); }
.ai-framing h4 { font-size: .85rem; margin: 1rem 0 .35rem; }
/* The prompt is shown as it was sent, so it wraps rather than scrolls: a
   line clipped at the edge is a line nobody can check. */
.prompt {
  white-space: pre-wrap;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .7rem .8rem;
  font-size: .85rem;
  margin: 0;
}
.ai-passes table { width: 100%; border-collapse: collapse; margin-top: .75rem; font-size: .9rem; }
.ai-passes th, .ai-passes td { text-align: left; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.ai-passes td.numeric, .ai-passes th.numeric { text-align: right; }
/* The link column sits against a right-aligned number, so it needs the gap
   the alignment takes away -- without it the last score and the link read as
   one word. */
.ai-passes td:last-child, .ai-passes th:last-child { padding-left: 1.25rem; text-align: right; }
.ai-passes tfoot th, .ai-passes tfoot td { font-weight: 600; border-bottom: 0; }

@media (max-width: 30rem) {
  .ai-basis-box .vitals { gap: .75rem 1.25rem; }
}

/* Which framing a profile was collected under, on the card. Coloured because
   it is a caveat on the numbers beside it, not a label. */
.framing-verdict { font-weight: 600; }
.framing-bare { color: var(--high); }
.framing-framed { color: var(--low); }

.ai-conditions { width: 100%; border-collapse: collapse; margin: .75rem 0; font-size: .9rem; }
.ai-conditions th, .ai-conditions td {
  text-align: left; padding: .4rem .5rem .4rem 0; border-bottom: 1px solid var(--line);
  vertical-align: top; font-weight: 400;
}
.ai-conditions thead th { font-weight: 600; }
.ai-conditions td.numeric, .ai-conditions th.numeric { text-align: right; padding-right: 1rem; }
.ai-conditions .is-published { font-weight: 600; }
.ai-conditions .pill { font-weight: 400; margin-left: .35rem; }

/* The subject's own words, which is the whole reason it is quoted rather
   than summarised, so it keeps its line breaks. */
.refusal {
  white-space: pre-wrap;
  margin: 0;
  padding: .7rem .9rem;
  border-left: 3px solid var(--low);
  background: var(--paper);
  font-size: .9rem;
}

/* A profile built mostly from refusals, and the refusal counts themselves.
   Coloured because they qualify the numbers beside them. */
.answer-rate-low { color: var(--low); }
.ai-card-header h2 .pill { vertical-align: middle; margin-left: .35rem; font-size: .7rem; }
.ai-profile > h2 .pill, .ai-meta .pill { vertical-align: middle; margin-left: .35rem; font-size: .7rem; }
.pill.framing-bare { background: color-mix(in srgb, var(--high) 16%, transparent); color: var(--high); text-transform: none; }
.pill.framing-framed { background: color-mix(in srgb, var(--low) 16%, transparent); color: var(--low); text-transform: none; }

/* Left and right, under each MFQ-2 foundation. */
/* Where a chart would be, when the group picked is too narrow to draw it. */
.no-data {
  display: flex; flex-direction: column; justify-content: center; gap: .2rem;
  min-height: 7rem; padding: 1rem 1.25rem; margin: .25rem 0 .5rem;
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  text-align: center;
}
.no-data p { margin: 0; }
.sides-intro { margin: 1.5rem 0 .5rem; }
/* Everyone's own placements, 1 to 10, before any scale is set against them. */
.placements { position: relative; margin: 0 0 1rem; }
.placements-bars { display: flex; align-items: flex-end; gap: 3px; height: 7rem; }
.placements-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.placements-col b { display: block; border-radius: 3px 3px 0 0; min-height: 1px; }
.placements-col:hover b { filter: brightness(1.2); }
.placements-share { font-size: .7rem; color: var(--ink-soft); text-align: center; margin-bottom: .2rem; }
.placements-axis { display: flex; gap: 3px; border-top: 1px solid var(--line-strong); padding-top: .25rem; }
.placements-axis span { flex: 1; text-align: center; font-size: .75rem; color: var(--ink-soft); }
.placements-axis .placements-you { color: var(--you); font-weight: 600; }
.placements-col.placements-you b { box-shadow: 0 0 0 2px var(--you); }
.placements .hist-ends { margin: .25rem 0 0; }
.sides-intro h2 { display: inline; font-size: 1rem; margin: 0; }
.sides-intro p { margin: 0 0 .5rem; }

.politics { margin: 1rem 0 .5rem; }
.politics-modes { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .8rem; margin-bottom: .6rem; }
.politics-modes label { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }

/* One view at a time, chosen by the radio buttons above it. */
.politics .politics-view { display: none; }
.politics:has(.mode-curve:checked) .view-curve { display: block; }
.politics:has(.mode-placed:checked) .view-placed { display: block; }
.politics:has(.mode-trend:checked) .view-trend { display: block; }
.politics:has(.mode-all:checked) .view-grid { display: block; }
/* The question a view answers, above it. */
.view-question { margin: 0 0 .5rem; font-size: .85rem; font-weight: 600; }

.hist-ends { display: flex; justify-content: space-between; margin: .1rem 0 .3rem; }
.key { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; vertical-align: -1px; }

.heat { display: grid; gap: 1px; }
.heat-row { display: grid; grid-template-columns: 3.2rem repeat(10, 1fr) 2.2rem; gap: 1px; align-items: stretch; }
.heat-row i {
  --v: var(--a);
  height: 9px; border-radius: 1px;
  /* A mix rather than opacity, which would fade the outline on the
     subject's own column and cell along with the shade. */
  background: color-mix(in srgb, var(--accent) calc(var(--v) * 100%), transparent);
}
.heat-score, .heat-n { font-size: .65rem; line-height: 9px; color: var(--ink-soft); white-space: nowrap; }
.heat-n { text-align: right; }
.heat-row:not(.heat-you) .heat-n { visibility: hidden; }
/* Where rows or columns are each 100%, every row's or column's size shows:
   a dark cell in a row of two people is half of two people. */
.heat-you { box-shadow: 0 0 0 1px var(--ink); border-radius: 1px; }
.heat-you .heat-score, .heat-you .heat-n { color: var(--ink); font-weight: 700; }
.heat-axis span { font-size: .7rem; line-height: 1.2; text-align: center; color: var(--ink-soft); }
.heat-axis .heat-n { visibility: visible; }
.heat-ends { padding: 0 2.2rem 0 4.4rem; }
/* The score axis named, turned to run up beside the rows. */
.heat-wrap { position: relative; display: flex; align-items: stretch; gap: .2rem; }
.heat-row i:hover { box-shadow: 0 0 0 1px var(--ink); position: relative; z-index: 2; }
.heat-wrap .heat { flex: 1; min-width: 0; }
.heat-ytitle {
  writing-mode: vertical-rl; transform: rotate(180deg); text-align: center;
  font-size: .7rem; color: var(--ink-soft); width: 1rem;
}
.heat-legend { display: flex; align-items: center; flex-wrap: wrap; gap: .2rem .45rem; }
.heat-key { display: inline-block; width: 5rem; height: .6rem; border: 1px solid var(--line); border-radius: 2px;
  background: linear-gradient(to right, transparent, var(--accent)); }

/* The subject's own placement: their column, and the one cell that is both
   their score and their placement. */
.heat-axis .placed { color: var(--ink); font-weight: 700; }
.heat-row i.placed { box-shadow: inset 1.5px 0 0 var(--ink), inset -1.5px 0 0 var(--ink); }
.heat-row i.yours { box-shadow: 0 0 0 2px var(--ink); position: relative; z-index: 1; }
/* Where the subject's row and everyone placed themselves: two bars laid end
   to end from 1 to 10, coloured by placement, and a connector joining each
   boundary. The SVG stretches to the width; strokes do not. */
/* Every score's lean, as a line with its 95% band. */
.trend { position: relative; }
.trend svg { display: block; width: 100%; height: auto; max-width: 46rem; }
.trend-left-half { fill: color-mix(in srgb, var(--side-left) 6%, transparent); }
.trend-right-half { fill: color-mix(in srgb, var(--side-right) 6%, transparent); }
.trend-grid { stroke: var(--line); stroke-width: .75; }
.trend-even { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 4 3; }
.trend-tick { font-size: 10px; fill: var(--ink-soft); }
.trend-tick-you { fill: var(--ink); font-weight: 700; }
.trend-tick-left { fill: var(--side-left); }
.trend-tick-right { fill: var(--side-right); }
.trend-tick .trend-tick-left, .trend-tick .trend-tick-right { font-weight: 600; }
.trend-axis { font-size: 10px; fill: var(--ink-soft); }
.trend-side { font-size: 10px; font-weight: 600; }
.trend-side-left { fill: var(--side-left); }
.trend-side-right { fill: var(--side-right); }
.trend-band { fill: color-mix(in srgb, var(--ink) 22%, transparent); }
.trend-line { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.trend-bridge { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; opacity: .45; }
.trend-bridge-band { fill: color-mix(in srgb, var(--ink) 11%, transparent); }
.trend-point { stroke: var(--card); stroke-width: 1; }
.trend-point.lean-none { fill: var(--ink-soft); }
.trend-point.lean-left { fill: var(--side-left); }
.trend-point.lean-right { fill: var(--side-right); }
.trend-point.trend-you { stroke: var(--ink); stroke-width: 2; }
.trend-hit { fill: transparent; }
.trend-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.1rem; list-style: none; margin: .2rem 0 0; padding: 0; color: var(--ink-soft); }
.trend-legend li { display: inline-flex; align-items: center; gap: .3rem; }
.trend-legend svg { width: .8rem; height: .8rem; overflow: visible; }
.trend-band-key { display: inline-block; width: 1.1rem; height: .6rem; border-radius: 2px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.trend-note { margin: .2rem 0 0; font-size: .75rem; max-width: 46rem; }
/* The summary is about the subject's own score, so it goes with the view
   that compares that score with everyone. The whole-scale trend and the raw
   counts answer other questions. */
.politics .politics-lean { display: none; }
.politics:has(.mode-placed:checked) .politics-lean { display: block; }
.politics-lean { margin: .8rem 0 0; padding-top: .6rem; border-top: 1px solid var(--line); }
.lean-title { margin: 0 0 .35rem; font-weight: 600; }
.lean-line { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; }
.lean-pill {
  display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-weight: 700; font-size: .8rem;
  color: #fff;
}
.lean-left { background: var(--side-left); }
.lean-right { background: var(--side-right); }
.lean-none { background: var(--line); color: var(--ink); }
/* The split as a bar, with a mark at an even split and the likely range of
   the boundary between left and right drawn over it. */
.lean-bar { position: relative; display: flex; width: 9rem; height: .7rem; border-radius: 2px; overflow: visible; }
.lean-bar i { display: block; height: 100%; }
.lean-bar-left { background: var(--side-left); border-radius: 2px 0 0 2px; }
.lean-bar-right { background: var(--side-right); border-radius: 0 2px 2px 0; }
.lean-bar-even { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 0; border-left: 1.5px solid var(--ink); }
.lean-bar-range { position: absolute; top: -3px; bottom: -3px; border: 1.5px solid var(--ink); border-radius: 2px; background: rgb(255 255 255 / .25); }
.lean-stats { color: var(--ink); }
.lean-level { margin: .3rem 0 0; font-size: .75rem; }
.lean-how { margin: .3rem 0 0; font-size: .75rem; max-width: 46rem; }
.placed { position: relative; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0 .5rem; }
.placed-labels { display: flex; flex-direction: column; justify-content: space-between; height: 6.5rem; font-size: .75rem; }
.placed-labels > span { height: 2.25rem; display: flex; align-items: center; gap: .25rem; }
.placed-plot { position: relative; height: 6.5rem; }
.placed-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.placed-plot rect { stroke: var(--card); stroke-width: 1px; }
.pl1 { fill: color-mix(in srgb, var(--side-left) 100%, var(--side-middle)); }
.pl2 { fill: color-mix(in srgb, var(--side-left) 78%, var(--side-middle)); }
.pl3 { fill: color-mix(in srgb, var(--side-left) 56%, var(--side-middle)); }
.pl4 { fill: color-mix(in srgb, var(--side-left) 34%, var(--side-middle)); }
.pl5 { fill: color-mix(in srgb, var(--side-left) 12%, var(--side-middle)); }
.pl6 { fill: color-mix(in srgb, var(--side-right) 12%, var(--side-middle)); }
.pl7 { fill: color-mix(in srgb, var(--side-right) 34%, var(--side-middle)); }
.pl8 { fill: color-mix(in srgb, var(--side-right) 56%, var(--side-middle)); }
.pl9 { fill: color-mix(in srgb, var(--side-right) 78%, var(--side-middle)); }
.pl10 { fill: color-mix(in srgb, var(--side-right) 100%, var(--side-middle)); }
.cut line { stroke: var(--hairline); stroke-width: 1.5px; }
.cut-clear line { stroke: var(--ink); stroke-width: 2px; }
.cut line.cut-hit { stroke: transparent; stroke-width: 10px; }
.placed-num {
  position: absolute; transform: translateY(-50%); pointer-events: none; overflow: hidden;
  display: flex; justify-content: center; font-size: .68rem; font-weight: 600; color: #fff;
}
.placed-num i { font-style: normal; }
.placed-num.unfit { visibility: hidden; }
.placed-top { top: 1.125rem; }
.placed-bottom { top: 5.375rem; }
/* The pale middle placements take dark numbers. */
.pl4-text, .pl5-text, .pl6-text, .pl7-text { color: var(--ink); }
.placed-ends { padding-left: 8rem; }
.radial-tip.placed-tip { white-space: pre; max-width: none; }
.placed-legend { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; list-style: none; margin: .2rem 0 0; padding: 0; color: var(--ink-soft); }
.cut-key { display: inline-block; width: 1.2rem; height: 0; border-top: 1.5px solid var(--hairline); vertical-align: middle; }
.cut-key-clear { border-top: 2px solid var(--ink); }

/* A left-right placement: ten points in a row, and declining on its own line. */
.placement-scale { border: 0; padding: 0; margin: .5rem 0; min-width: 0; }
.placement-row { display: flex; align-items: center; gap: .25rem; flex-wrap: nowrap; }
.placement-end { font-size: .8rem; color: var(--ink-soft); padding: 0 .25rem; }
.placement-point {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center;
  gap: .15rem; font-size: .8rem; cursor: pointer;
}
.placement-none { display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem; font-size: .85rem; cursor: pointer; }
.field-label { font-size: .85rem; font-weight: 600; margin: 1rem 0 0; }

/* Population wedges: a profile's traits against the reference group. */
.radial { margin: 0; position: relative; }
.radial-mini > svg { display: block; width: 100%; overflow: visible; }
.radial-mini .radial-label { font-size: 26px; }
.radial-mini .radial-you { stroke-width: 6; }
.radial-mini .radial-median { stroke-width: 2.5; stroke-dasharray: 6 5; }
.radial:not(.radial-mini) { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem; margin: 1.25rem 0 1.5rem; }
.radial:not(.radial-mini) > svg { display: block; flex: 0 1 22rem; width: 22rem; max-width: 100%; height: auto; overflow: visible; }
.radial-track { fill: var(--line); fill-opacity: .8; stroke: var(--ink-soft); stroke-opacity: .45; stroke-width: .75; }
.radial-whisker { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
.radial-whisker-halo { fill: none; stroke: var(--paper); stroke-width: 4; stroke-linecap: round; }
.radial-median { fill: none; stroke: var(--ink); stroke-width: 1.25; stroke-dasharray: 3 2.5; }
.radial-heat { fill: var(--accent); }
.radial-you { fill: none; stroke: var(--you); stroke-width: 3; stroke-linecap: round; }
.radial-label { font-size: 11px; fill: var(--ink-soft); font-weight: 600; }
.radial-legend { list-style: none; margin: 0; padding: 0; max-width: 24rem; display: grid; gap: .3rem; color: var(--ink-soft); }
.radial-legend li { display: flex; align-items: center; justify-content: flex-start; gap: .6rem; text-align: left; margin: 0; padding: 0; }
.radial-legend svg { flex: none; width: 24px; height: 12px; overflow: visible; }
.radial-tick { font-size: 10px; fill: var(--ink-soft); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }
.radial-whisker-halo, .radial-tick, .radial-label { pointer-events: none; }
.radial-heat:hover { stroke: var(--ink); stroke-width: 1; }
.radial-tip {
  position: absolute; z-index: 5; pointer-events: none; max-width: 16rem;
  padding: .3rem .5rem; border-radius: 6px; background: var(--ink); color: var(--paper);
  font-size: .78rem; line-height: 1.3; box-shadow: 0 2px 8px var(--shadow);
}
.radial-tip[hidden] { display: none; }

/* A badge that explains itself on hover or keyboard focus, at once. */
.pill-tip { position: relative; cursor: help; }
.pill-tip-text {
  position: absolute; z-index: 5; left: 0; top: calc(100% + .4rem); width: 20rem; max-width: 80vw;
  padding: .5rem .65rem; border-radius: 6px; background: var(--ink); color: var(--paper);
  font-size: .8rem; font-weight: 400; line-height: 1.4; text-transform: none; letter-spacing: 0;
  box-shadow: 0 2px 8px var(--shadow);
  visibility: hidden; opacity: 0;
}
.pill-tip:hover .pill-tip-text, .pill-tip:focus .pill-tip-text { visibility: visible; opacity: 1; }

/* The API reference: Scalar draws its own sidebar and columns, and needs the
   page's full width to do it. */
body:has(.api-reference) main { max-width: none; padding: 0; }
/* Scalar has a <main> of its own, and the site's centring margins would
   collapse its column to nothing. */
.api-reference main { margin: 0; }
/* The reference does its own scrolling to a section; smooth scrolling on
   top of it turns the jump into an animation that its own correction for
   the sticky header then cancels. */
html:has(.api-reference) { scroll-behavior: auto; }

/* --- analytics question --- */
/* One card at the foot of the window until answered. The two answers are
   the same button: declining is not the lesser choice. */
.cookie-consent {
  position: fixed; z-index: 20; left: 1rem; right: 1rem; bottom: 1rem;
  max-width: 46rem; margin: 0 auto; padding: 1rem 1.15rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 12px 32px var(--shadow);
}
.cookie-consent p { flex: 1 1 22rem; margin: 0; font-size: .9rem; color: var(--ink-soft); }
.cookie-consent p strong { color: var(--ink); margin-right: .25rem; }
.cookie-consent-actions { display: flex; gap: .5rem; }
@media (max-width: 40rem) {
  .cookie-consent-actions { width: 100%; }
  .cookie-consent-actions .button { flex: 1; }
}

/* Which languages an inventory can be taken in, and whose translation it is. */
.inventory-languages { margin: .25rem 0 0; }

/* An unvalidated translation's warning: an icon, its text on hover or focus. */
.translation-warning {
  position: relative; display: inline-flex; vertical-align: -2px;
  margin-inline-start: .35rem; color: var(--low); cursor: help; border-radius: 3px;
}
.translation-warning:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.translation-warning::after {
  content: attr(data-tip); position: absolute; z-index: 10; inset-block-start: calc(100% + .4rem);
  inset-inline-start: -.5rem; width: max-content; max-width: min(22rem, 80vw);
  padding: .5rem .65rem; border-radius: var(--radius); background: var(--card);
  border: 1px solid var(--line-strong); box-shadow: 0 4px 14px var(--shadow);
  color: var(--ink); font-size: .8125rem; line-height: 1.4; white-space: normal;
  opacity: 0; visibility: hidden; pointer-events: none;
}
.translation-warning:hover::after, .translation-warning:focus::after { opacity: 1; visibility: visible; }