/*
 * Grasrotsporet – data storytelling layer on top of Designsystemet.
 * Plan 003. Designsystemet (vendor/) gives the familiar public-sector base;
 * theme/grasrot.css is our own theme; this file adds the story components.
 * Everything here uses --ds-* tokens so light/dark and sizing follow the theme.
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../vendor/inter-5.2.6/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../vendor/inter-5.2.6/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------------
 * Story tokens: what each colour *means* in the data (plan 003 §3)
 */
:root {
  color-scheme: light; /* light only, decided in plan 003 §3 */
  --gs-received: var(--ds-color-accent-base-default);       /* money to the club */
  --gs-received-text: var(--ds-color-accent-text-subtle);
  --gs-lost: var(--ds-color-loss-base-default);             /* money lost by donors */
  --gs-lost-text: var(--ds-color-loss-text-subtle);
  --gs-lost-tint: var(--ds-color-loss-surface-tinted);
  --gs-other: var(--ds-color-neutral-border-subtle);        /* everyone else / context */
  --gs-measure: 40rem;                                      /* reading width */
  --gs-gutter: var(--ds-size-4);
  --gs-tabular: tabular-nums lining-nums;
}

/* ---------------------------------------------------------------------------
 * Type scale (plan 003 §10). The ONLY place text sizes, weights and case are set
 * for page text. One style per role, one role per style. Roles map onto
 * Designsystemet's sizes; interface components (buttons, chips, tags, sheets)
 * keep their own. Colour is separate: it carries tone (received / lost / subtle).
 *
 *   title       h1                                   heading lg, 500
 *   chapter     chapter h2, the lead figure          heading md, 500
 *   subheading  help box, «Om», search label         heading sm, 600
 *   body        every sentence and paragraph         body lg, 400
 *   strong      emphasis within body, card titles    body lg, 600
 *   caption     ranges, meta, caveats, sources       body sm, 400, subtle
 *   label       chapter labels (kickers)             body xs, 600, uppercase
 *   data        table cells (th 600)                 body xs, 400
 */
:root {
  --gs-type-title: var(--ds-heading-lg-font-size);
  --gs-type-chapter: var(--ds-heading-md-font-size);
  --gs-type-subheading: var(--ds-heading-sm-font-size);
  --gs-type-body: var(--ds-body-lg-font-size);
  --gs-type-caption: var(--ds-body-sm-font-size);
  --gs-type-label: var(--ds-body-xs-font-size);
  --gs-type-data: var(--ds-body-xs-font-size);
  --gs-weight-heading: 500;
  --gs-weight-strong: 600;
}

/* title */
main h1.ds-heading { font-size: var(--gs-type-title); font-weight: var(--gs-weight-heading); line-height: 1.15; }

/* chapter */
.gs-chapter > h2.ds-heading { font-size: var(--gs-type-chapter); font-weight: var(--gs-weight-heading); line-height: 1.2; letter-spacing: -0.01em; }
.gs-chapter > h2.ds-heading strong { font-weight: inherit; color: var(--gs-lost-text); } /* the lead figure: colour alone marks the number */

/* subheading */
.gs-help h2.ds-heading,
.gs-about h2.ds-heading,
.gs-about h3.ds-heading,
.gs-search .ds-label { font-size: var(--gs-type-subheading); font-weight: var(--gs-weight-strong); line-height: 1.25; }

/* body */
main .ds-paragraph,
.gs-figure-statement,
.gs-lede p,
.gs-next-list,
.gs-debate,
.gs-assumption .ds-card__block > p { font-size: var(--gs-type-body); font-weight: 400; line-height: 1.5; }
.gs-assumption-title { font-size: var(--gs-type-body); line-height: 1.35; }

/* strong */
main strong,
.gs-assumption-value,
.gs-assumption-title,
.gs-result-name { font-weight: var(--gs-weight-strong); }

/* caption */
.gs-caption,
.gs-page-meta,
.gs-range,
.gs-caveat,
.gs-dots-scale,
.gs-legend,
.gs-set-version,
.gs-source-list,
.gs-technical,
.gs-assumption .ds-card__block > p.gs-rationale,
.gs-assumption .ds-card__block > p.gs-technical,
.gs-copy-status,
.gs-search-hint,
.gs-search-status,
.gs-result-meta,
.gs-loading { font-size: var(--gs-type-caption); font-weight: 400; line-height: 1.5; color: var(--ds-color-neutral-text-subtle); }

/* label */
.gs-sources-title,
.gs-kicker { font-size: var(--gs-type-label); font-weight: var(--gs-weight-strong); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-color-neutral-text-subtle); }

/* data */
.gs-table :is(th, td) { font-size: var(--gs-type-data); }
.gs-table th { font-weight: var(--gs-weight-strong); }
.gs-table-note { font-size: inherit; color: var(--ds-color-neutral-text-subtle); }

/* ---------------------------------------------------------------------------
 * Page frame
 */
body {
  margin: 0;
  overflow-wrap: break-word;
  background: var(--ds-color-neutral-background-default);
  color: var(--ds-color-neutral-text-default);
  font-family: var(--ds-font-family), system-ui, sans-serif;
}

.gs-wrap {
  max-width: var(--gs-measure);
  margin-inline: auto;
  padding-inline: var(--gs-gutter);
}

/* Own wordmark; deliberately no crest, no service menu, no login (plan 003 §2). */
.gs-site-header {
  background: var(--ds-color-neutral-background-default);
  box-shadow: 0 1px 0 var(--ds-color-neutral-border-subtle);
}
.gs-site-header .gs-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-size-4);
  min-height: var(--ds-size-18);
}
.gs-wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-size-2);
  font-weight: 500;
  font-size: var(--ds-heading-sm-font-size);
  color: var(--ds-color-neutral-text-default);
  text-decoration: none;
  letter-spacing: -0.015em;
}
.gs-wordmark img { width: 2rem; height: 2rem; }

.gs-site-footer {
  margin-block-start: var(--ds-size-18);
  padding-block: var(--ds-size-8);
  background: var(--ds-color-neutral-background-tinted);
  border-block-start: 1px solid var(--ds-color-neutral-border-subtle);
  font-size: var(--ds-body-sm-font-size);
  color: var(--ds-color-neutral-text-subtle);
}
.gs-site-footer p { margin-block: var(--ds-size-2); }
.gs-help-line { color: var(--ds-color-neutral-text-default); }

/* ---------------------------------------------------------------------------
 * Story structure: chapters with a kicker, a headline and a body
 */
/* Chapters: a rule, then label and heading. More space between chapters than within. */
.gs-chapter {
  margin-block-start: var(--ds-size-12);
  padding-block-start: var(--ds-size-8);
  border-block-start: 1px solid var(--ds-color-neutral-border-subtle);
}
.gs-chapter .gs-figure { margin-block: var(--ds-size-5); }
.gs-chapter .gs-figure:last-child { margin-block-end: 0; }
/* Boxed chapters have their box instead of the rule. */
.gs-next.gs-chapter { border-block-start: 0; padding-block-start: var(--ds-size-6); }
.gs-kicker {
  display: block;
  margin-block-end: var(--ds-size-2);
}
.gs-chapter > .ds-heading { margin-block: 0 var(--ds-size-5); }


/* Page head on the result page. */
.gs-page-kicker { margin-block-start: var(--ds-size-10); }
.gs-page-meta { margin: var(--ds-size-1) 0 0; }
.gs-banner { margin-block-start: var(--ds-size-4); }
.gs-banner p { margin: 0; }
.gs-loading { margin-block: var(--ds-size-14); color: var(--ds-color-neutral-text-subtle); }
main:focus { outline: none; }

/* Messages (errors, empty states) and the manual-entry form. */
.gs-message .gs-next-actions { margin-block-start: var(--ds-size-5); }
.gs-manual { display: grid; gap: var(--ds-size-4); max-width: 22rem; margin-block-start: var(--ds-size-10); padding-block-start: var(--ds-size-6); border-block-start: 1px solid var(--ds-color-neutral-border-subtle); }
.gs-manual .ds-paragraph { margin: 0; }
.gs-field { display: grid; gap: var(--ds-size-1); }
.gs-manual .ds-button { justify-self: start; }

/* Live confirmation after «Kopier». */
.gs-copy-status { align-self: center; color: var(--ds-color-accent-text-subtle); }
.gs-copy-status:empty { display: none; }

.gs-about .ds-paragraph { max-width: 36rem; }
.gs-about h3 { margin-block: var(--ds-size-8) var(--ds-size-2); }
.gs-debate { margin: 0; padding-inline-start: 1.25em; display: grid; gap: var(--ds-size-3); max-width: 36rem; }
.gs-print-only { display: none; }

/* «Kort fortalt»: the success sentence, first thing on the page. */
.gs-lede {
  margin-block-start: var(--ds-size-8);
  padding: var(--ds-size-6);
  border-inline-start: var(--ds-size-1) solid var(--gs-received);
  background: var(--ds-color-accent-background-tinted);
  border-radius: 0 var(--ds-border-radius-md) var(--ds-border-radius-md) 0;
}
.gs-lede p { margin: 0; }
.gs-lede strong { font-variant-numeric: var(--gs-tabular); white-space: nowrap; }
.gs-lede-actions { margin-block-start: var(--ds-size-4); display: flex; gap: var(--ds-size-3); flex-wrap: wrap; }

/* «Kva no?»: the closing chapter mirrors «Kort fortalt», so the story opens and
 * closes the same way. Suggests a conversation; never tells the club what to decide. */
.gs-next {
  padding: var(--ds-size-6);
  border-inline-start: var(--ds-size-1) solid var(--gs-received);
  background: var(--ds-color-accent-background-tinted);
  border-radius: 0 var(--ds-border-radius-md) var(--ds-border-radius-md) 0;
}
.gs-next > .ds-paragraph { margin-block: 0 var(--ds-size-4); }
.gs-next-list { margin: 0; padding-inline-start: 1.25em; display: grid; gap: var(--ds-size-2); }
.gs-next-actions { margin-block-start: var(--ds-size-5); display: flex; gap: var(--ds-size-3); flex-wrap: wrap; }
.gs-help { margin-block-start: var(--ds-size-8); }
.gs-help > .ds-heading { margin-block: 0 var(--ds-size-2); }
.gs-help > .ds-paragraph { margin: 0; }

/* ---------------------------------------------------------------------------
 * Figure: one number, always with its range line and provenance (plan 001 §4)
 */
.gs-figure { margin-block: var(--ds-size-6); }
.gs-figure-statement { margin: 0; }
.gs-figure-statement strong { font-variant-numeric: var(--gs-tabular); white-space: nowrap; }
.gs-figure--lost .gs-figure-statement strong { color: var(--gs-lost-text); }
.gs-figure--received .gs-figure-statement strong { color: var(--gs-received-text); }

.gs-range { margin: var(--ds-size-1) 0 0; }

/* The lead figure's heading (M1) balances its lines; the units and range follow. */
#kosta { text-wrap: balance; }

/* Unit picture: 1 krone in vs ~7 kroner lost, as two aligned rows so the
 * lengths compare like bars. Decorative; the sentence carries the meaning. */
.gs-units {
  --gs-unit: clamp(1.25rem, 5.5vw, 2rem);
  display: grid;
  gap: var(--ds-size-2);
  margin-block: var(--ds-size-5) var(--ds-size-3);
}
.gs-units-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.gs-unit {
  width: var(--gs-unit);
  height: var(--gs-unit);
  border-radius: var(--ds-border-radius-sm);
  background: var(--gs-lost);
}
.gs-unit--received { background: var(--gs-received); }
.gs-units-label { margin-inline-start: var(--ds-size-2); font-size: var(--gs-type-caption); color: var(--ds-color-neutral-text-subtle); }

/* Dot strip: every donor is a dot; the few who carry half the loss are filled. */
.gs-dots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(0.75rem, 1fr));
  gap: 0.3rem;
  max-width: 32rem;
  margin-block: var(--ds-size-4) var(--ds-size-2);
  padding: 0;
  list-style: none;
}
.gs-dot {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid var(--gs-other);
}
.gs-dot--heavy { background: var(--gs-lost); border-color: var(--gs-lost); }
.gs-dots-scale { margin: 0 0 var(--ds-size-2); }
.gs-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-size-2) var(--ds-size-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gs-legend li { display: inline-flex; align-items: center; gap: var(--ds-size-2); }
.gs-legend .gs-dot { width: 0.75rem; }

/* Chapter note (caveat): a caption that applies to the whole chapter. Same style as a
 * range line; it is set apart only by position and space, not by a bar (which reads as a quote). */
.gs-caveat { margin-block: var(--ds-size-5) 0; }

/* ---------------------------------------------------------------------------
 * Provenance chips: small, quiet buttons after a number (plan 002 §5)
 */
.gs-refs { display: inline-flex; gap: 0.2rem; vertical-align: 0.15em; margin-inline-start: 0.2rem; }
.gs-ref {
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.2rem 0.35rem;
  border: 1px solid var(--ds-color-neutral-border-subtle);
  border-radius: var(--ds-border-radius-sm);
  background: var(--ds-color-neutral-background-default);
  color: var(--ds-color-neutral-text-subtle);
  cursor: pointer;
  font-variant-numeric: var(--gs-tabular);
}
.gs-ref:hover { border-color: var(--ds-color-accent-border-default); color: var(--ds-color-accent-text-subtle); }
.gs-ref:focus-visible { outline: 3px solid var(--ds-color-focus-outer, var(--ds-color-accent-base-default)); outline-offset: 2px; }
.gs-ref--source { font-weight: 500; }
.gs-ref--more { border-style: dashed; }

/* "All assumptions" sheet: the drivers first, then the rest as a compact list. */
.gs-sheet-group { margin-block-start: var(--ds-size-4); }
.gs-sheet-group > h4 {
  margin: 0 0 var(--ds-size-2);
  font-size: var(--ds-body-xs-font-size);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-color-neutral-text-subtle);
}
.gs-sheet-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--ds-size-2); }
.gs-sheet-list li { display: flex; gap: var(--ds-size-2); align-items: baseline; }
.gs-sheet-conf { font-size: var(--ds-body-xs-font-size); color: var(--ds-color-neutral-text-subtle); white-space: nowrap; }
.gs-sheet-id {
  flex: none;
  min-width: 2.25rem;
  font-size: var(--ds-body-xs-font-size);
  font-weight: 600;
  color: var(--ds-color-neutral-text-subtle);
  font-variant-numeric: var(--gs-tabular);
}
.gs-sheet-close { position: absolute; inset-block-start: var(--ds-size-3); inset-inline-end: var(--ds-size-3); }
.gs-sheet { position: fixed; }

/* Popover for an assumption: native [popover], bottom sheet on phones. */
.gs-sheet {
  max-width: min(28rem, calc(100vw - 2 * var(--gs-gutter)));
  padding: var(--ds-size-5);
  border: 1px solid var(--ds-color-neutral-border-subtle);
  border-radius: var(--ds-border-radius-lg);
  background: var(--ds-color-neutral-background-default);
  color: var(--ds-color-neutral-text-default);
  box-shadow: var(--ds-shadow-md);
  max-height: min(36rem, 85dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.gs-sheet::backdrop { background: rgb(0 0 0 / 0.25); }
.gs-sheet h3 { margin: 0 0 var(--ds-size-2); font-size: var(--ds-body-md-font-size); }
.gs-sheet p { margin: var(--ds-size-2) 0; }
@media (max-width: 40rem) {
  .gs-sheet {
    inset: auto 0 0 0;
    max-width: none;
    width: 100%;
    margin: 0;
    border-radius: var(--ds-border-radius-lg) var(--ds-border-radius-lg) 0 0;
    box-sizing: border-box;
  }
}

/* ---------------------------------------------------------------------------
 * Start screen: intro, search, results, example (plan 002 §3)
 */
.gs-intro { margin-block-start: var(--ds-size-12); }
.gs-intro > .ds-heading { margin-block: 0 var(--ds-size-4); text-wrap: balance; }
.gs-intro > .ds-paragraph { margin-block: 0; max-width: 34rem; }

.gs-search { margin-block-start: var(--ds-size-10); }
.gs-search-hint { margin: var(--ds-size-1) 0 var(--ds-size-3); }
.gs-search-row { display: flex; }
.gs-search-row .ds-input {
  flex: 1;
  min-width: 0;
  border: 2px solid var(--ds-color-neutral-text-default);
  border-radius: var(--ds-border-radius-md) 0 0 var(--ds-border-radius-md);
}
.gs-search-row .ds-button {
  border-radius: 0 var(--ds-border-radius-md) var(--ds-border-radius-md) 0;
  margin-inline-start: -2px;
}
.gs-more { margin-block-start: var(--ds-size-2); }
.gs-search-status { margin: var(--ds-size-4) 0 var(--ds-size-2); }

.gs-results { margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--ds-color-neutral-border-subtle); }
.gs-results li { border-block-end: 1px solid var(--ds-color-neutral-border-subtle); }
.gs-result {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 var(--ds-size-3);
  align-items: center;
  padding: var(--ds-size-3) var(--ds-size-2);
  color: inherit;
  text-decoration: none;
}
.gs-result:hover { background: var(--ds-color-accent-background-tinted); }
.gs-result:focus-visible { outline: 3px solid var(--ds-color-focus-outer, var(--gs-received)); outline-offset: -3px; }
.gs-result-name { color: var(--ds-color-accent-text-subtle); text-decoration: underline; text-underline-offset: 0.15em; }
.gs-result-meta { grid-column: 1; }
.gs-result-arrow { grid-row: 1 / span 2; grid-column: 2; color: var(--ds-color-accent-text-subtle); }

/* Outline action, like the large action buttons on public-sector front pages. */
.gs-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-size-3);
  max-width: 26rem;
  margin-block-start: var(--ds-size-8);
  padding: var(--ds-size-4) var(--ds-size-5);
  border: 1px solid var(--ds-color-accent-border-default);
  border-radius: var(--ds-border-radius-md);
  color: var(--ds-color-accent-text-subtle);
  font-weight: 500;
  text-decoration: none;
}
.gs-action:hover { background: var(--ds-color-accent-background-tinted); border-color: var(--gs-received); }
.gs-action svg { flex: none; width: 1.25rem; height: 1.25rem; }

/* Assumption list (<gs-assumptions>), the page's appendix. */
.gs-assumption-list { display: grid; gap: var(--ds-size-4); margin-block: var(--ds-size-5); }
.gs-assumption { scroll-margin-block-start: var(--ds-size-6); }
.gs-assumption summary { align-items: flex-start; }
.gs-assumption-head { display: grid; gap: var(--ds-size-2); }
.gs-assumption-head .gs-meta { margin: 0; }
.gs-assumption .ds-card__block > .ds-paragraph { margin-block: 0 var(--ds-size-2); }
.gs-sources { margin-block-start: var(--ds-size-4); }
.gs-sources-title { margin: 0 0 var(--ds-size-2); }
.gs-assumption .ds-card__block > :last-child { margin-block-end: 0; }
.gs-assumption:target, .gs-assumption:focus { outline: 3px solid var(--gs-received); outline-offset: 2px; }
.gs-assumption-value { margin-block: var(--ds-size-2); font-variant-numeric: var(--gs-tabular); }
.gs-source-list { margin: 0; padding-inline-start: 1.25em; display: grid; gap: var(--ds-size-3); }
.gs-technical { margin: 0; }
.gs-quote { display: block; margin-block-start: var(--ds-size-1); color: var(--ds-color-neutral-text-subtle); }

/* Confidence and verification badges inside the assumption list. */
.gs-meta { display: flex; flex-wrap: wrap; gap: var(--ds-size-2); margin-block: var(--ds-size-2); }

/* Tables: numbers right-aligned and tabular. The wrapper is a safety net:
 * if a table is ever wider than the screen, only the table scrolls, never the page. */
.gs-table-wrap { max-width: 100%; overflow-x: auto; }
.gs-table { width: 100%; }
.gs-table-num { text-align: end; font-variant-numeric: var(--gs-tabular); white-space: nowrap; }
.gs-table th { white-space: normal; }
.gs-table-note { display: block; white-space: nowrap; }
.gs-table-note--inline { display: inline; }
.gs-table-break td, .gs-table-break th { border-block-start: 2px solid var(--ds-color-neutral-border-default); }
@media (max-width: 30rem) {
  .gs-table :is(th, td) { padding-inline: var(--ds-size-2); }
}
@media (max-width: 24rem) {
  .gs-table :is(th, td) { padding-inline: var(--ds-size-1); }
}
/* Real histories reach seven digits («1 500 000»); the narrowest phones need smaller text. */
@media (max-width: 21rem) {
  .gs-table :is(th, td) { font-size: 0.875rem; padding-inline: 0.15rem; }
}

/* ---------------------------------------------------------------------------
 * Print: one A4 sheet for the board meeting (plan 002 §9)
 */
@media print {
  @page { size: A4; margin: 14mm 16mm 16mm; }
  /* Scale the whole rem-based system down to print sizes. */
  html { font-size: 11px; }
  body { background: none; }
  .gs-site-header, .gs-lede-actions, .gs-next-actions, .gs-no-print, .ds-skip-link { display: none !important; }
  .gs-next, .gs-help { break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .gs-appendix { break-before: page; margin-block-start: 0; }
  .gs-print-only { display: block; }
  .gs-about, .gs-copy-status, #sheets, .gs-page-kicker ~ .gs-page-meta a { display: none; }
  .gs-page-kicker { margin-block-start: 0; }
  /* Compact appendix (plan 002 §9): two columns, no rationale, no folds. */
  .gs-sources, .gs-technical { display: none; }
  /* Show collapsed cards' content (beforeprint also opens them; this covers print-to-PDF). */
  .gs-assumption .ds-details::details-content { block-size: auto; content-visibility: visible; }
  .gs-assumption summary { padding: 0; background: none; }
  .gs-assumption :is(.ds-details, .ds-card__block) { background: none; border: 0; }
  .gs-assumption summary::before { display: none; }
  .gs-assumption-list { grid-template-columns: 1fr 1fr; gap: var(--ds-size-2) var(--ds-size-4); }
  .gs-assumption { background: none; border: none; border-block-start: 1px solid var(--ds-color-neutral-border-subtle); border-radius: 0; break-inside: avoid; }
  .gs-assumption .ds-card__block { padding: var(--ds-size-2) 0 0; }
  .gs-assumption .gs-rationale { display: none; }
  .gs-assumption .ds-card__block > :is(p, .gs-meta) { font-size: var(--gs-type-caption); margin-block: var(--ds-size-1); }
  .gs-assumption-title { font-size: var(--gs-type-body); }
  body:has(.gs-help) .gs-help-line { display: none; } /* the help box is already on the page */
  .gs-wrap { max-width: none; padding-inline: 0; }

  /* Keep things together at the level of one figure, never whole chapters. */
  .gs-chapter { margin-block-start: var(--ds-size-8); }
  .gs-figure, .gs-lede, .gs-caveat, tr, .ds-card { break-inside: avoid; }
  .gs-kicker, .gs-chapter > .ds-heading { break-after: avoid; }

  /* Colour carries meaning in the story, so it must survive printing. */
  .gs-unit, .gs-dot, .gs-lede, .gs-table tr { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .gs-units { --gs-unit: 1.4rem; }
  .gs-dots { grid-template-columns: repeat(auto-fill, minmax(0.6rem, 1fr)); max-width: 26rem; }

  .gs-ref { border: none; padding: 0; font-size: 0.6rem; vertical-align: super; }
  .gs-ref--more { display: none; }
  a.ds-link { color: inherit; text-decoration: none; }
  .gs-site-footer { margin-block-start: var(--ds-size-8); padding-block: var(--ds-size-4) 0; background: none; break-inside: avoid; }
}

/* Respect reduced motion (nothing animates yet, but keep the rule central). */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}