/* purepure v2. One immutable stylesheet for every public v2 page, including
   /gpt (its CSP forbids inline styles); the URL carries the file's own
   content hash (search/ui_v2.py). "@bundle" lines mark its parts: base
   (until the first mark: every page), serp, access and pages. The static
   front gives the home page and the results page only the parts they use, in
   this order (ui_v2.CSS_BUNDLES); everything else gets the whole file.
   The look is the purepure design system (docs/branding/purepure: brand
   book, tokens.json, components, mockups): ink on off-white, water blue only
   in the wordmark's u's and the focus ring, pill controls, borders instead
   of shadows. The token names below are the system's own; the few values it
   does not define (visited links, highlights, the ranking bars' negative
   tone, the paid-content label) are marked as product additions.
   Type: DM Sans 700 for the wordmark and headings, Public Sans for
   everything else. Both are self-hosted (no third-party request sees a
   query) and swap in over metric-matched local fallbacks.
   The SERP: filter chips above a 640px results column and a 360px source
   panel, the column aligned with the header's search field. Phones: result
   cards on the sunken ground, the source details in a bottom sheet.
   Hard rule kept from v1: no horizontal scroll at any viewport. */

/* fonts: variable, limited to the weights the design uses; Latin preloaded
   (_shell_head.html), Latin Extended on demand. File names carry the
   content hash (tests/test_ui_v2.py). DM Sans keeps its optical-size axis
   (9-40), so the 116px wordmark and 22px headings each get their cut. */
@font-face {
  font-family: "Public Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("fonts/public-sans-latin.f9454fc3.woff2") format("woff2");
  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: "Public Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("fonts/public-sans-latin-ext.d349d2ab.woff2") format("woff2");
  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;
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/dm-sans-latin.4f7589ff.woff2") format("woff2");
  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: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/dm-sans-latin-ext.e04b9c61.woff2") format("woff2");
  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;
}
/* Local fallbacks scaled to the web fonts' widths and heights (Arimo and
   Liberation are the metric twins of Arial). Public Sans: measured on SERP
   text (speed review 2026-09-25). DM Sans: its advance widths over heading
   text at optical sizes 24-30 against Liberation Sans Bold (99%), and its
   ascent 992 and descent 310 per 1000. Android has neither Arial nor
   Liberation, so Roboto gets its own face. */
@font-face {
  font-family: "Public Sans fb"; font-weight: 100 549;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
  size-adjust: 105.17%; ascent-override: 90.33%; descent-override: 21.39%; line-gap-override: 0%;
}
@font-face {
  font-family: "Public Sans fb"; font-weight: 550 900;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
  size-adjust: 99.21%; ascent-override: 95.76%; descent-override: 22.68%; line-gap-override: 0%;
}
@font-face {
  font-family: "Public Sans fb2"; src: local("Roboto"), local("Roboto-Regular");
  size-adjust: 105.71%; ascent-override: 89.87%; descent-override: 21.29%; line-gap-override: 0%;
}
@font-face {
  font-family: "DM Sans fb"; font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
  size-adjust: 99%; ascent-override: 100.2%; descent-override: 31.31%; line-gap-override: 0%;
}

/* tokens: docs/branding/purepure/tokens.json, exact values */
:root {
  color-scheme: light dark;
  --surface: #fbfcfd;
  --surface-raised: #ffffff;
  --surface-sunken: #f4f6f8;
  --line: #e1e6eb;
  --line-strong: #86909b;
  --ink: #14181c;
  --ink-muted: #58616a;
  --on-ink: #ffffff;
  --link: #1b4f8f;
  --water: #2f7fd6;
  --water-soft: #e3effb;
  --scrim: rgba(20, 24, 28, 0.45);
  --tag-public-bg: #e3efe7; --tag-public-ink: #1e5a3a;
  --tag-research-bg: #e6ecf7; --tag-research-ink: #23427a;
  --tag-media-bg: #ede8f3; --tag-media-ink: #4b2f72;
  --tag-org-bg: #dff0ee; --tag-org-ink: #175a54;
  --tag-business-bg: #f4ead8; --tag-business-ink: #6b4a12;
  --tag-person-bg: #f7e5eb; --tag-person-ink: #7b2c47;
  --shadow-dialog: 0 8px 28px rgba(20, 24, 28, 0.14);
  /* product additions (not in the design system) */
  --visited: #5c3d86;
  --mark: #fff1b8;
  --neg: #9a4a2e;
  --tag-paid-bg: #f8e3da; --tag-paid-ink: #7a2e0e;
  /* type, space, radius */
  --font-display: "DM Sans", "DM Sans fb", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Public Sans", "Public Sans fb", "Public Sans fb2", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px;
  /* geometry */
  --gutter: max(1rem, env(safe-area-inset-left, 0px));
  --gutter-end: max(1rem, env(safe-area-inset-right, 0px));
  --col: 40rem;
  --panel: 22.5rem;
  --inset: var(--gutter);
  /* the sticky results header's real height: field 46px, padding, border */
  --header-h: calc(4.375rem + 1px + env(safe-area-inset-top, 0px));
  --chips-h: 3.25rem;
}
@media screen and (prefers-color-scheme: dark) {
  :root {
    --surface: #0f1317; --surface-raised: #171c21; --surface-sunken: #0b0e11;
    --line: #273039; --line-strong: #6b7682;
    --ink: #e8edf2; --ink-muted: #a3adb7; --on-ink: #0f1317;
    --link: #8fbbf0; --water: #5aa0ea; --water-soft: #1c3450;
    --scrim: rgba(0, 0, 0, 0.6);
    --tag-public-bg: #16301f; --tag-public-ink: #9fd4b1;
    --tag-research-bg: #18233a; --tag-research-ink: #a9c1ee;
    --tag-media-bg: #261d33; --tag-media-ink: #c8b3ea;
    --tag-org-bg: #12302d; --tag-org-ink: #8fd3cb;
    --tag-business-bg: #33270f; --tag-business-ink: #e6c98a;
    --tag-person-bg: #351a24; --tag-person-ink: #eeaac1;
    --shadow-dialog: 0 8px 28px rgba(0, 0, 0, 0.5);
    --visited: #c3a9ea; --mark: #5c4d12; --neg: #e39a7f;
    --tag-paid-bg: #3f2219; --tag-paid-ink: #f2b59c;
  }
}
@media (min-width: 48rem) {
  :root { --gutter: max(2rem, env(safe-area-inset-left, 0px)); --gutter-end: max(2rem, env(safe-area-inset-right, 0px)); --header-h: calc(5.375rem + 1px + env(safe-area-inset-top, 0px)); }
}
@media (min-width: 64rem) {
  :root { --gutter: max(2.5rem, env(safe-area-inset-left, 0px)); --gutter-end: max(2.5rem, env(safe-area-inset-right, 0px)); }
}
/* Wide screens (mockup Results): the results column starts under the
   header's search field, about 190px in; the wordmark's slot fills the rest. */
@media (min-width: 80rem) {
  :root { --inset: 11.875rem; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column;
  font-family: var(--font-text); font-size: 1rem; line-height: 1.55;
  color: var(--ink); background: var(--surface); overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
main { flex: 1 0 auto; width: 100%; min-width: 0; padding-inline: var(--gutter) var(--gutter-end); }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: from-font; }
/* focus-ring: a 2px gap in the page colour, then a solid 2px water ring */
:focus-visible { outline: 2px solid var(--water); outline-offset: 2px; border-radius: var(--radius-sm); }
[hidden] { display: none !important; }
::selection { background: var(--water-soft); color: var(--ink); }
.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link, .skip-to {
  position: fixed; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; z-index: 100;
  padding: 0.6rem 0.9rem; border-radius: var(--radius-pill); background: var(--ink); color: var(--on-ink);
  transform: translateY(-160%);
}
.skip-link:focus, .skip-to:focus { transform: none; }
code { font-family: var(--mono); font-size: 0.85em; color: var(--ink-muted); }
button { font: inherit; color: inherit; cursor: pointer; }
strong, b { font-weight: 600; }
mark {
  padding: 0 0.125rem; border-radius: 0.125rem; background: var(--mark); color: inherit;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* the wordmark: live type, water in the two u's. --lvl (0-1) is the water;
   21% of the u's box is the baseline, +44% the x-height (design system,
   Wordmark). The first u holds a little less, as in the component. */
.wordmark {
  --lvl: 0;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.045em; line-height: 1;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.wordmark.is-low { --lvl: 0.35; }
.wm-u {
  --f: var(--lvl);
  background: linear-gradient(to top, var(--water) 0, var(--water) calc(21% + var(--f) * 44%), var(--ink) calc(21% + var(--f) * 44%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wm-u:first-of-type { --f: calc(var(--lvl) * 0.8); }
a.wordmark:hover { color: var(--ink); text-decoration: none; }
a.wordmark:focus-visible { border-radius: var(--radius-md); }

/* buttons (design system, Button): pills; primary is an ink fill */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); flex: none;
  min-height: 2.75rem; padding: 0 1.375rem; border: 1px solid transparent; border-radius: var(--radius-pill);
  font-family: var(--font-text); font-size: 0.9375rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.btn-primary:hover { color: var(--on-ink); opacity: 0.88; }
.btn-secondary { background: var(--surface-raised); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { color: var(--ink); background: var(--surface-sunken); }
.btn-l { min-height: 3.25rem; padding: 0 1.625rem; }
.btn svg { flex: none; }

/* header and footer */
.site-header { flex: none; padding-block-start: env(safe-area-inset-top, 0px); background: var(--surface); }
.site-header-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 1.5rem;
  min-height: 4.25rem; padding-inline: var(--gutter) var(--gutter-end);
}
.site-header .wordmark { display: inline-flex; align-items: center; min-height: 2.75rem; flex: none; font-size: 1.75rem; }
.footer-links a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  color: var(--ink-muted); font-size: 0.875rem; text-decoration: none;
}
.footer-links a:hover { color: var(--ink); text-decoration: underline; }
.footer-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.site-footer {
  flex: none; margin-block-start: 3.5rem;
  padding: 0.75rem var(--gutter-end) max(1rem, env(safe-area-inset-bottom, 0px)) var(--gutter);
  border-block-start: 1px solid var(--line); color: var(--ink-muted); font-size: 0.8125rem;
}
.site-footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1.5rem; }
.site-footer p { margin: 0.5rem 0; text-wrap: pretty; }
.site-footer p a { color: inherit; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.footer-links a { font-size: 0.8125rem; }
.index-count { font-variant-numeric: tabular-nums; }
.footer-timings { order: 1; flex-basis: 100%; font-size: 0.75rem; font-variant-numeric: tabular-nums; }
@media (max-width: 47.99rem) { .site-footer-inner, .footer-links { justify-content: center; text-align: center; } }

/* the search field (design system, SearchField): a pill with the search
   icon; 52px on the front page, 46px in the results header */
.search-form { position: relative; display: flex; align-items: center; gap: 0.625rem; width: 100%; min-width: 0; margin: 0; }
.search-field {
  position: relative; display: flex; align-items: center; gap: var(--space-3); flex: 1 1 auto; min-width: 0;
  block-size: 3.25rem; padding: 0 1.25rem; border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--surface-raised); color: var(--ink-muted);
}
.search-field:focus-within { outline: 2px solid var(--water); outline-offset: 2px; }
.search-field-m { block-size: 2.875rem; padding: 0 1.125rem; }
.search-icon { flex: none; }
.search-field-m .search-icon { inline-size: 1rem; block-size: 1rem; }
.search-combobox { position: relative; flex: 1 1 auto; min-width: 0; align-self: stretch; display: flex; align-items: center; }
input[type="search"] {
  display: block; width: 100%; min-width: 0; block-size: 100%; margin: 0; padding: 0;
  font: inherit; font-size: 1.0625rem; color: var(--ink); background: transparent; border: 0; border-radius: 0;
  appearance: none; -webkit-appearance: none;
}
.search-field-m input[type="search"] { font-size: 1rem; }
input[type="search"]::placeholder { color: var(--ink-muted); opacity: 1; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
input[type="search"]:focus, input[type="search"]:focus-visible { outline: none; }
.suggestions {
  position: absolute; z-index: 50; inset: calc(100% + 0.625rem) -1.25rem auto -2.875rem; margin: 0; padding: 0.375rem;
  list-style: none; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dialog); max-height: 22rem; overflow-y: auto; text-align: start; color: var(--ink);
}
.suggestions [role="option"] {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  min-height: 2.75rem; padding: 0.55rem 0.75rem; border-radius: var(--radius-md); cursor: pointer; overflow-wrap: anywhere;
}
.suggestions [role="option"].is-active, .suggestions [role="option"]:hover { background: var(--surface-sunken); }
.suggestions small { color: var(--ink-muted); font-size: 0.8125rem; white-space: nowrap; }

/* front page: the wordmark and the field centred, space-6 apart, one line
   of promise under the field (mockups Main, MobileHome). Nothing else. */
.home-page main { display: flex; flex-direction: column; justify-content: center; padding-block: 1rem 5rem; }
.home { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); width: 100%; max-width: 40rem; margin: 0 auto; text-align: center; }
.home-mark { margin: 0; font-size: clamp(4rem, 17vw, 7.25rem); }
.home-form { text-align: start; }
.home-promise { margin: calc(-1 * var(--space-3)) 0 0; color: var(--ink-muted); font-size: 0.875rem; }
@media (max-width: 47.99rem) {
  /* Phones submit with the keyboard's search key (mockup MobileHome). */
  .home-go { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; border: 0; }
}

/* @bundle serp */
/* results header (mockups Results, MobileResults): the wordmark with a low,
   still fill, then the 46px field aligned with the results column. */
.results-page { background: var(--surface-raised); }
.results-page .site-header {
  position: sticky; top: 0; z-index: 40; background: var(--surface-raised); border-block-end: 1px solid var(--line);
}
.results-page:has(.serp > .filter-bar) .site-header { border-block-end-color: transparent; }
.results-page .site-header-bar { flex-wrap: nowrap; gap: var(--space-3); min-height: 0; padding-block: 0.75rem; }
.results-page .site-header .wordmark { font-size: 1.375rem; }
.results-page .search-form { flex: 1 1 auto; }
.results-page .suggestions { inset-inline: -2.875rem -1.125rem; }
@media (min-width: 48rem) {
  .results-page .site-header-bar { gap: var(--space-6); padding-block: 1.25rem; }
  .results-page .site-header .wordmark { font-size: 1.75rem; }
  .results-page .search-form { max-width: 37.5rem; }
}
@media (min-width: 64rem) {
  .results-page .site-header { position: static; }
  .results-page:has(.serp > .filter-bar) .site-header { border-block-end-color: var(--line); }
}
@media (min-width: 80rem) {
  .results-page .site-header .wordmark { inline-size: calc(var(--inset) - var(--gutter) - var(--space-6)); }
}
html:has(.results-page) { scroll-padding-top: calc(var(--header-h) + 0.75rem); }
html:has(.results-page .serp > .filter-bar) { scroll-padding-top: calc(var(--header-h) + var(--chips-h) + 0.75rem); }
@media (min-width: 64rem) { html:has(.results-page) { scroll-padding-top: 1rem; } }

/* SERP frame. Phones: cards on the sunken ground. From 48rem: one column
   of rows. From 64rem: the rows and the source panel. From 80rem: the
   design's 640px column and 360px panel, space-8 apart, under the field. */
.results-page main { padding: 0; }
.serp {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "form" "main";
  padding: 0 var(--gutter-end) 0 var(--gutter);
}
.filter-bar { grid-area: bar; }
.serp-main { grid-area: main; min-width: 0; padding-block-start: 1rem; }
.serp-main:focus { outline: none; }
.serp-main[aria-busy="true"] { opacity: 0.55; transition: opacity 150ms ease-out; }
.source-panel { display: none; }
@media (max-width: 47.99rem) {
  .serp-main { padding-block-start: 0.25rem; }
}
@media (min-width: 48rem) {
  .serp-main { max-width: var(--col); padding-block-start: 1.25rem; }
}
@media (min-width: 64rem) {
  .serp { column-gap: var(--space-7); grid-template-columns: minmax(0, var(--col)); justify-content: start; padding-block-start: 1rem; padding-inline-start: var(--inset); }
  .serp.has-panel {
    grid-template-columns: minmax(0, var(--col)) minmax(18rem, var(--panel));
    grid-template-areas: "bar panel" "form panel" "main panel";
    grid-template-rows: auto auto 1fr;
  }
  .serp-main { max-width: none; padding-block-start: 0; }
}
@media (min-width: 80rem) { .serp { column-gap: var(--space-8); } }

/* A streamed search still running (_search_wait.html). Owner decision
   2026-10-07: besides the water, the product's one motion. Invisible for the
   first 300ms, so cached answers never flash it; gone as soon as the results
   follow it in <main>. Not :last-child: Blink and WebKit never match it while
   the parent is still being parsed, which is the whole streamed wait.
   WebKit (Safari, every iOS browser) keeps showing the previous page until
   the new one has over 200 characters of text in loaded fonts or over 32x32px
   of images and fixed-size SVG (LocalFrameView visualCharacterThreshold and
   visualPixelThreshold). The streamed header alone has neither, so Safari
   showed nothing until the results came. The two glyph SVGs are therefore
   fixed 24px boxes (2 x 576px) around the 16px star.
   Reduced motion keeps a still star. */
.search-wait {
  display: flex; align-items: center; gap: var(--space-2); margin: 0;
  padding: 1.25rem var(--gutter-end) 0 var(--gutter);
  color: var(--ink-muted); font-size: 0.9375rem;
  animation: search-wait-in 200ms ease-out 300ms both;
}
.search-wait:has(~ *) { display: none; }
/* The static front's results page (search_shell.html) is complete while its
   search runs; its footer waits for the results, as a streamed page's does
   (owner 2026-10-12: a footer under the wait line looked out of place). */
main:has(> .search-wait:last-child) + .site-footer { display: none; }
.search-wait-glyph { position: relative; flex: none; inline-size: 24px; block-size: 24px; margin: -4px; color: var(--ink); }
.search-wait-glyph svg { position: absolute; inset: 0; width: 24px; height: 24px; }
.search-wait-glyph svg + svg { transform: scale(0.6); }
.search-wait-time { font-variant-numeric: tabular-nums; }
@keyframes search-wait-in { from { opacity: 0; } }
@keyframes search-wait-turn { to { transform: rotate(90deg); } }
@keyframes search-wait-twinkle { from { transform: scale(1); } to { transform: scale(0.45); } }
@media (prefers-reduced-motion: no-preference) {
  .search-wait-glyph { animation: search-wait-turn 2.4s linear infinite; }
  .search-wait-glyph svg { animation: search-wait-twinkle 600ms ease-in-out infinite alternate; }
  .search-wait-glyph svg + svg { animation-delay: -600ms; }
}
@media (min-width: 48rem) { .search-wait { padding-inline-start: calc(var(--gutter) + var(--space-4)); } }
@media (min-width: 64rem) { .search-wait { padding-inline-start: calc(var(--inset) + var(--space-4)); } }

/* notes above the results */
.correction-note { margin: 0 0 1rem; font-size: 1rem; color: var(--ink); }
.correction-note a { font-weight: 600; }
.serp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.625rem; margin: 0 0 0.5rem; }
.meta-line, .page-note { margin: 0; color: var(--ink-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.page-note { margin-block-end: 0.75rem; }
.notice {
  margin: 0 0 1.25rem; padding: 0.875rem 1rem; border-radius: var(--radius-lg);
  background: var(--surface-sunken); color: var(--ink); font-size: 0.9375rem; text-wrap: pretty;
}
.notice p { margin: 0; }
.notice p + p { margin-block-start: 0.375rem; }
@media (min-width: 48rem) { .serp-meta, .correction-note, .notice, .page-note { margin-inline: var(--space-4); } }

/* chips (design system, Chip): 36px pills edged in line-strong; the
   selected one is an ink fill. Each chip holds its screen-reader text, so
   text of a chip scrolled out of the row cannot widen the page. */
.chip { position: relative; display: inline-flex; align-items: center; flex: none; max-width: 100%; color: var(--ink); font-size: 0.84375rem; font-weight: 500; line-height: 1.3; text-decoration: none; }
.chip:hover { color: var(--ink); text-decoration: none; }
.chip-face {
  display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.25rem; max-width: 100%;
  padding: 0.25rem 0.875rem; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface-raised);
}
.chip:hover .chip-face { background: var(--surface-sunken); }
.chip svg { flex: none; }
.chip.is-on, .chip-selected { color: var(--on-ink); }
.chip.is-on:hover, .chip-selected:hover { color: var(--on-ink); }
.chip.is-on .chip-face, .chip-selected .chip-face { background: var(--ink); border-color: var(--ink); }
.chip:focus-visible { outline: none; }
.chip:focus-visible .chip-face { outline: 2px solid var(--water); outline-offset: 2px; }
.chip-count {
  display: inline-grid; place-items: center; min-inline-size: 1.25rem; block-size: 1.25rem; padding-inline: 0.3rem;
  border-radius: var(--radius-pill); background: var(--ink); color: var(--on-ink); font-size: 0.75rem; font-weight: 600;
}
.chip.is-on .chip-count { background: var(--on-ink); color: var(--ink); }
.filter-bar { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.chip-row {
  display: flex; gap: var(--space-2); flex: 1 1 auto; min-width: 0; margin: -0.3125rem 0 -0.3125rem -0.25rem; padding: 0.3125rem 0.25rem; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 0.25rem 2rem;
  scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip-row li { flex: none; scroll-snap-align: start; }
.chip-tail { display: flex; flex: none; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.chip-tail li:last-child { padding-inline-end: var(--gutter-end); }
@media (max-width: 63.99rem) {
  /* The quick filters belong to the sticky header (mockup MobileResults). */
  .serp > .filter-bar {
    position: sticky; top: var(--header-h); z-index: 30;
    margin-inline: calc(-1 * var(--gutter)) calc(-1 * var(--gutter-end)); padding: 0 0 0.75rem var(--gutter);
    background: var(--surface-raised); border-block-end: 1px solid var(--line);
  }
}
@media (max-width: 63.99rem) {
  /* No snapping: WebKit re-snaps the row whenever the toolbar resizes the
     viewport, so the chips slid sideways during vertical scrolls. */
  .chip-row { scroll-snap-type: none; }
}
@media (min-width: 64rem) {
  /* Static beside the panel: one line of source chips. What does not fit
     wraps below the padding box and is clipped (pure.js makes it inert);
     "Filtre", outside the row, opens the rest. */
  .filter-bar { align-items: flex-start; margin: 0 0 1.25rem; }
  .chip-row { flex: 1 1 0%; min-width: 14rem; flex-wrap: wrap; overflow: hidden; row-gap: var(--space-2); block-size: 2.875rem; }
  .chip-tail li:last-child { padding-inline-end: 0; }
}
/* the applied filters ("… resultater fra [Myndigheder ×]") */
.applied { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.625rem; }
.applied-label { color: var(--ink-muted); font-size: 0.8125rem; }
.applied-list { display: contents; list-style: none; }
.applied-list li { display: flex; min-width: 0; max-width: 100%; }
.applied-list .chip { font-size: 0.8125rem; }
.applied-list .chip-face { min-height: 2rem; padding: 0.25rem 0.75rem; white-space: normal; }
.applied-clear { display: inline-flex; align-items: center; min-height: 2rem; color: var(--ink-muted); font-size: 0.8125rem; text-decoration: underline; }
.applied-note { margin: 1.25rem 0 0; color: var(--ink-muted); font-size: 0.75rem; line-height: 1.5; text-wrap: pretty; }
.applied-note a { color: var(--ink-muted); text-decoration: underline; }
/* affiliate comparison pages folded into one line (search/affiliate_fold.py) */
.fold { margin: 0.75rem 0 0; border-block: 1px solid var(--line); }
.fold-summary {
  display: flex; align-items: baseline; gap: var(--space-2); min-height: 2.75rem; padding: 0.625rem 0;
  list-style: none; cursor: pointer; color: var(--ink-muted); font-size: 0.875rem; line-height: 1.45;
}
.fold-summary::-webkit-details-marker { display: none; }
.fold-summary:focus-visible { outline: 2px solid var(--water); outline-offset: 2px; border-radius: var(--radius-sm); }
.fold-open, .fold-close { margin-inline-start: auto; color: var(--link); font-weight: 600; white-space: nowrap; }
.fold-close, .fold[open] .fold-open { display: none; }
.fold[open] .fold-close { display: inline; }
.fold-note { margin: 0 0 0.5rem; color: var(--ink-muted); font-size: 0.75rem; line-height: 1.5; }
@media (min-width: 48rem) { .fold-summary, .fold-note { padding-inline: var(--space-4); } }
/* The quick-filter chip already shows the one selected group. */
.applied-list .is-chip, .applied.is-chip-only { display: none; }
@media (max-width: 47.99rem) {
  /* Phones show what the mockup shows: the count is for screen readers,
     and the list starts right under the quick filters. */
  .serp-meta { margin: 0; padding: 0; }
  .serp-meta:not(:has(> .applied:not(.is-chip-only))) > .meta-line {
    position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .serp-meta:has(> .applied:not(.is-chip-only)) { margin-block-end: 1rem; }
}

/* results (design system, Result): the host and its source label, a title
   in link, one snippet. Phones: one surface, rows split by hairlines (a
   departure from the system's card spec: cards cost 14% of the measure and
   break the column into boxes). From 48rem: rows whose padding exists from
   the start, so selecting one (the water-soft ground) changes only its
   colour. No content-visibility: on iOS it painted rows late while
   momentum scrolling and its size estimate made the page jump. */
ol.results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.result { position: relative; }
.results > .result { padding: 0.875rem 0; border-block-end: 1px solid var(--line); }
.results > .result:last-child { border-block-end: 0; }
@media (max-width: 47.99rem) {
  /* The 44px info button overhangs the text edge; its glyph sits on it. */
  .results > .result .about > summary { inset-inline-end: -0.625rem; }
}
@media (min-width: 48rem) {
  ol.results { gap: var(--space-1); }
  .results > .result { padding-inline: var(--space-4); border-block-end: 0; border-radius: var(--radius-lg); }
}
@media (min-width: 64rem) {
  /* The row the panel describes is the selected result: result 1 (or the
     site box) until the searcher picks another. */
  .serp.has-panel .result.is-selected { background: var(--water-soft); }
  html.panel-off .serp.has-panel .result.is-selected { background: none; }
  html.js .serp.has-panel .result { cursor: pointer; }
  html.js .serp.has-panel .results > .result:not(.is-selected):hover { background: var(--surface-sunken); }
}
.result-source {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem var(--space-2); min-width: 0; min-height: 1.5rem;
  margin: 0; font-size: 0.84375rem; line-height: 1.45; color: var(--ink-muted);
}
.result-source > * { flex: none; }
.result-source > .source-host { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
/* source labels (design system, SourceTag): the word always shows; the
   colour only helps scanning */
.tag {
  display: inline-block; padding: 0.125rem 0.4375rem; border-radius: var(--radius-sm);
  background: var(--surface-sunken); color: var(--ink);
  font-size: 0.6875rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
}
.t-off { background: var(--tag-public-bg); color: var(--tag-public-ink); }
.t-exp { background: var(--tag-research-bg); color: var(--tag-research-ink); }
.t-news { background: var(--tag-media-bg); color: var(--tag-media-ink); }
.t-org { background: var(--tag-org-bg); color: var(--tag-org-ink); }
.t-com { background: var(--tag-business-bg); color: var(--tag-business-ink); }
.t-ppl { background: var(--tag-person-bg); color: var(--tag-person-ink); }
.t-paid { background: var(--tag-paid-bg); color: var(--tag-paid-ink); }
.source-kind { font-weight: 600; }
.source-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.result-heading {
  margin: var(--space-1) 0 0; font-family: var(--font-text); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; text-wrap: pretty;
}
@media (max-width: 47.99rem) {
  /* The clamp's box leaves room for the focus ring (same layout). */
  .result-heading {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
    padding: 0.25rem; margin: 0 -0.25rem -0.25rem;
  }
}
@media (min-width: 48rem) { .result-heading { font-size: 1.1875rem; } }
.result-title { color: var(--link); text-decoration: none; }
.result-title:visited { color: var(--visited); }
.result-title:hover { color: var(--link); text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: 0.16em; }
/* The excerpt, passage or snippet, in one plain style: a table keeps its
   rows, code its font. */
.result-snippet {
  margin: var(--space-1) 0 0; color: var(--ink); font-size: 0.875rem; line-height: 1.5; text-wrap: pretty;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.result-snippet.is-lines { -webkit-line-clamp: 5; line-clamp: 5; }
.result-snippet.is-code { font-family: var(--mono); font-size: 0.8125rem; line-height: 1.6; }
@media (min-width: 48rem) { .result-snippet { font-size: 0.9375rem; line-height: 1.55; } }
/* The page's own picture (og:image) at the end of the title and excerpt, top
   aligned with the title: 4:3, cropped to fill; 136x102 from 48rem, 100x75 on
   phones (smaller below 360px). The source line keeps its row (and the info
   button); what follows the excerpt starts below the picture. A row taller
   than the text grows the last, empty row, never the gap under the title.
   A picture pure.js removes takes the grid with it. */
.result:has(> .result-thumb) {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto 1fr;
  column-gap: var(--space-3);
}
.result:has(> .result-thumb) > * { grid-column: 1 / -1; }
.result:has(> .result-thumb) > :is(.result-heading, .result-snippet) { grid-column: 1; }
.result > .result-thumb {
  grid-column: 2; grid-row: 2 / 5; align-self: start; display: block;
  inline-size: clamp(5rem, 28vw, 6.25rem); aspect-ratio: 4 / 3; margin-block: 0.375rem var(--space-1);
  border-radius: var(--radius-md); overflow: hidden; background: var(--surface-sunken);
}
.result-thumb > img {
  display: block; inline-size: 100%; block-size: 100%; object-fit: cover;
  outline: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); outline-offset: -1px; border-radius: inherit;
}
@media (min-width: 48rem) {
  .result:has(> .result-thumb) { column-gap: var(--space-4); }
  .result > .result-thumb { inline-size: 8.5rem; }
}

/* One quiet info button at the end of the source line (phones, tablets,
   no JS). With JS it opens a bottom sheet (mockup MobileSource); without,
   its panel opens below the excerpt. Beside the panel the row itself is the
   button. */
[data-result] > .result-source { padding-inline-end: 2rem; }
.about > summary {
  position: absolute; inset-block-start: 0.5rem; inset-inline-end: 0.25rem;
  display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.25rem;
  border-radius: var(--radius-pill); color: var(--ink-muted); cursor: pointer; list-style: none;
}
.about > summary::-webkit-details-marker { display: none; }
.about > summary::before {
  content: ""; inline-size: 1.125rem; block-size: 1.125rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='8' stroke-width='1.6'/%3E%3Cpath d='M10 9v5M10 6.2v.1' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='8' stroke-width='1.6'/%3E%3Cpath d='M10 9v5M10 6.2v.1' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.about > summary:hover { color: var(--ink); }
.about[open] > summary { color: var(--ink); }
.about > summary:focus-visible { outline-offset: -0.125rem; border-radius: var(--radius-pill); }
.about-panel {
  display: flex; flex-direction: column; gap: var(--space-4);
  margin: 0.875rem 0 0.25rem; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface-raised); font-size: 0.875rem;
}
.about-head { display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; }
.about-title { margin: 0; font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.about-read { margin: -0.5rem 0 0; }
.read-link { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--link); font-size: 0.875rem; font-weight: 500; }
.about-why { border-block-start: 1px solid var(--line); }
.about-why > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 2.75rem;
  font-size: 0.9375rem; font-weight: 600; line-height: 1.35; cursor: pointer; list-style: none;
}
.about-why > summary::-webkit-details-marker { display: none; }
.about-why > summary::after {
  content: ""; flex: none; inline-size: 0.45rem; block-size: 0.45rem; margin-inline-end: 0.25rem; margin-block-start: -0.2rem;
  border-inline-end: 1.5px solid var(--ink-muted); border-block-end: 1.5px solid var(--ink-muted); transform: rotate(45deg);
}
.about-why[open] > summary::after { transform: rotate(-135deg); margin-block-start: 0.2rem; }
.about-why > .why-body { padding-block: 0.25rem 0.25rem; }
.panel-btn { display: none; }
.site-box > .about > summary { inset-block-start: 0.5rem; inset-inline-end: 0.25rem; }
@media (pointer: fine) { .read-link, .about-why > summary { min-height: 2.25rem; } }
@media (min-width: 64rem) {
  /* html.js is set before first paint, so the panel replaces the info
     button before the page is drawn. The row is the button; "Vis i
     panelet" is its keyboard and screen-reader form, shown on focus. */
  html.js .serp.has-panel .about { display: none; }
  html.js .serp.has-panel .result:has(> .panel-btn:focus-visible) > .result-source { padding-inline-end: 8.75rem; }
  html.js .serp.has-panel .panel-btn {
    position: absolute; inset-block-start: 0.875rem; inset-inline-end: var(--space-4);
    display: inline-flex; align-items: center; gap: 0.375rem; block-size: 1.5rem; padding: 0;
    border: 0; background: none; color: var(--ink-muted); font-size: 0.8125rem; line-height: 1; opacity: 0;
  }
  html.js .serp.has-panel .panel-btn:focus-visible { opacity: 1; }
}

/* the facts, the reference and the actions (design system, SourcePanel),
   in the panel and in the info view */
.facts { margin: 0; display: grid; gap: var(--space-2); font-size: 0.875rem; line-height: 1.45; }
.facts > div { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: var(--space-3); }
.facts dt { color: var(--ink-muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.ref-block { display: flex; flex-direction: column; gap: 0.375rem; }
.ref-label { margin: 0; color: var(--ink-muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.ref-text { margin: 0; padding: 0.625rem 0.75rem; border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--ink); font-size: 0.84375rem; line-height: 1.5; overflow-wrap: anywhere; }
.ref-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ref-actions .btn-primary { flex: 1 1 auto; }

/* what purepure knows about the publisher: descriptions as ruled rows,
   inline and in the panel */
.source-body > :first-child, .why-body > :first-child { margin-block-start: 0; }
.source-body > :last-child, .why-body > :last-child { margin-block-end: 0; }
.dims { margin: 0; }
.dims > div {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.125rem;
  padding-block: 0.625rem; border-block-start: 1px solid var(--line); font-size: 0.875rem; line-height: 1.5;
}
.source-stale { display: block; margin-block-start: 0.25rem; color: var(--ink-muted); font-size: 0.75rem; }
.dims dt { color: var(--ink-muted); font-size: 0.8125rem; }
.dims dd { margin: 0; color: var(--ink); }
.source-scope-note { margin: 0; color: var(--ink-muted); font-size: 0.75rem; line-height: 1.5; text-wrap: pretty; }
.dims + .source-scope-note { margin-block-start: 0.5rem; padding-block-start: 0.625rem; border-block-start: 1px solid var(--line); }
.source-actions { display: flex; flex-wrap: wrap; gap: 0 1.25rem; list-style: none; margin: -0.5rem 0 0; padding: 0; }
.source-actions a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 0.875rem; }
@media (pointer: fine) { .source-actions a { min-height: 2.25rem; } }

/* "Hvorfor dette resultat?": a level word and an 8px bar per signal,
   adjustments first, all bars on one fixed scale */
.why-title { margin: 1rem 0 0.625rem; color: var(--ink-muted); font-size: 0.75rem; font-weight: 600; }
.why-adjust, .why-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.why-adjust li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 0.75rem; font-size: 0.875rem; line-height: 1.4; }
.why-arrow { color: var(--ink-muted); }
.why-effect { color: var(--ink-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.why-bars { gap: 0.875rem; }
.why-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.375rem 0.75rem; align-items: baseline; font-size: 0.875rem; line-height: 1.35; }
.why-level { color: var(--ink-muted); font-size: 0.8125rem; white-space: nowrap; }
.why-track { grid-column: 1 / -1; display: block; block-size: 0.5rem; border-radius: var(--radius-sm); background: var(--surface-sunken); overflow: hidden; }
.why-track::before { content: ""; display: block; inline-size: var(--w, 0%); block-size: 100%; border-radius: var(--radius-sm); background: var(--link); }
.why-bars .is-neg .why-track::before { background: var(--neg); }
.why-caveat { margin: 0.5rem 0 0; color: var(--ink-muted); font-size: 0.75rem; line-height: 1.5; }
.why-math { margin-block-start: 0.875rem; font-size: 0.8125rem; }
.why-math > summary { display: inline-flex; align-items: center; min-height: 2.25rem; color: var(--link); cursor: pointer; list-style: none; }
.why-math > summary::-webkit-details-marker { display: none; }
.why-math > summary:hover { text-decoration: underline; }
.why-n { grid-column: 1 / -1; color: var(--ink-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.why-adjust .why-n { flex-basis: 100%; }
.why-body:not(:has(.why-math[open])) :is(.why-n, .is-extra) { display: none; }
.why-total { margin: 0.5rem 0 0; padding-block-start: 0.375rem; border-block-start: 1px solid var(--line); font-variant-numeric: tabular-nums; }

/* source panel (design system, SourcePanel): 360px, line edge, radius-lg,
   space-5 padding; label, publisher, facts, reference, then the one
   primary action. What purepure knows and why follow below. */
@media (min-width: 64rem) {
  .serp.has-panel .source-panel {
    display: flex; flex-direction: column; gap: var(--space-4); grid-area: panel; align-self: start;
    position: sticky; top: 1rem; max-height: calc(100vh - 2rem); max-height: calc(100svh - 2rem); overflow-y: auto;
    margin-block-start: 1.75rem; padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: var(--surface-raised); font-size: 0.875rem; scrollbar-width: thin; scroll-padding-block: 0.75rem;
  }
  /* A long panel scrolls; its parts never shrink. */
  .serp.has-panel .source-panel > * { flex: none; }
}
.sp-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.sp-id { display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; min-width: 0; }
.sp-tag:empty { display: none; }
.sp-host { margin: 0; font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.sp-host.is-long { font-size: 1.125rem; }
.sp-host:focus { outline: none; }
.sp-host:focus-visible { outline: 2px solid var(--water); outline-offset: 2px; }
.sp-close { display: none; }
html.js .sp-close {
  display: inline-grid; place-items: center; flex: none; margin-inline-start: auto;
  inline-size: 2.75rem; block-size: 2.75rem; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink);
}
html.js .sp-close:hover { background: var(--line); }
@media (pointer: fine) { html.js .sp-close { inline-size: 2.25rem; block-size: 2.25rem; } }
.sp-read { margin: -0.5rem 0 0; }
.sp-read:empty { display: none; }
.sp-read .read-link { display: block; min-height: 0; padding-block: 0.375rem; font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Long model descriptions stay short beside the results; the source page
   ("Alt om …") has them in full. */
.source-panel .dims > div dd { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.sp-back { margin: 0; }
.sp-back button { min-height: 2.25rem; padding: 0; border: 0; background: none; color: var(--link); font-size: 0.8125rem; text-decoration: underline; }
.panel-reopen { display: none; }
@media (min-width: 64rem) {
  html.panel-off .serp.has-panel .source-panel { display: none; }
  html.js.panel-off .serp.has-panel .panel-reopen {
    display: inline-flex; align-items: center; min-height: 2.25rem; margin-inline-start: auto; padding: 0 0.875rem;
    border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--ink); font-size: 0.8125rem;
  }
}
.sp-title { margin: 0 0 0.875rem; font-size: 0.9375rem; font-weight: 600; line-height: 1.35; }
.sp-section { padding-block-start: var(--space-4); border-block-start: 1px solid var(--line); }
.sp-related { display: grid; gap: 0.625rem; list-style: none; margin: 0 0 0.75rem; padding: 0; font-size: 0.875rem; line-height: 1.4; }
.sp-related:not(:has(li)) { display: none; }
.source-panel .source-actions { flex-direction: column; gap: 0.25rem; margin: 0; }
.source-panel .source-actions a { min-height: 2rem; }

/* the info view as a bottom sheet over the scrim (phones and tablets with
   JS; mockup MobileSource). The script copies the result's info into it. */
.info-sheet {
  position: fixed; inset: auto 0 0; inline-size: 100%; max-inline-size: 40rem; max-block-size: min(88dvh, 100%);
  margin: 0 auto; padding: 0.625rem var(--gutter-end) max(1.5rem, env(safe-area-inset-bottom, 0px)) var(--gutter);
  border: 0; border-radius: 20px 20px 0 0; background: var(--surface-raised); color: var(--ink);
  box-shadow: var(--shadow-dialog); overflow-y: auto; overscroll-behavior: contain;
}
.info-sheet::backdrop { background: var(--scrim); }
.info-sheet::before { content: ""; display: block; inline-size: 2.5rem; block-size: 0.25rem; margin: 0 auto 0.625rem; border-radius: 2px; background: var(--line-strong); }
.info-sheet .about-panel { margin: 0; padding: 0; border: 0; border-radius: 0; font-size: 0.90625rem; }
.info-sheet .ref-actions { flex-direction: column; }
.info-sheet .ref-actions .btn { min-height: 3rem; }
.info-close {
  position: absolute; inset-block-start: 1.5rem; inset-inline-end: var(--gutter-end);
  display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; padding: 0;
  border: 0; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink);
}
.info-sheet .about-head { padding-inline-end: 3.25rem; }
html:has(.info-sheet[open]) { overflow: hidden; }

/* filters: one form, a modal <dialog> the script moves it into (a drawer
   from 48rem); without JS, #filtre opens in the flow above the results. */
.facets { display: none; grid-area: form; font-size: 0.9375rem; }
.facets:target {
  display: block; margin: 1rem 0; padding: 0 1rem; border: 1px solid var(--line);
  border-radius: var(--radius-lg); background: var(--surface-raised);
}
.facets-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 0 0 0.5rem; padding-block: 0.75rem; border-block-end: 1px solid var(--line);
}
.facets-head h2 { margin: 0; font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; }
.facets-close {
  display: inline-grid; place-items: center; flex: none; inline-size: 2.75rem; block-size: 2.75rem;
  border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink); text-decoration: none;
}
.facets-close:hover { background: var(--line); color: var(--ink); }
.facet { min-width: 0; margin: 0 0 1.25rem; padding: 0; border: 0; }
.facet legend { margin: 0 0 0.25rem; padding: 0; color: var(--ink); font-size: 0.8125rem; font-weight: 600; }
.check { display: flex; align-items: center; gap: 0.625rem; min-height: 3rem; line-height: 1.35; color: var(--ink); cursor: pointer; }
.check span { overflow-wrap: anywhere; }
.check input { flex: none; inline-size: 1.125rem; block-size: 1.125rem; margin: 0; accent-color: var(--ink); cursor: pointer; }
.check input:disabled + span { color: var(--ink-muted); }
.check:hover span { text-decoration: underline; text-decoration-color: var(--ink-muted); }
.facet-members { padding-inline-start: 1.75rem; }
.facets-note { margin: 0 0 1rem; color: var(--ink-muted); font-size: 0.75rem; line-height: 1.5; text-wrap: pretty; }
.facets-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding-block: 0.75rem; }
.facets-apply {
  flex: 1 1 auto; min-height: 3rem; padding: 0 1.375rem; border: 1px solid var(--ink); border-radius: var(--radius-pill);
  background: var(--ink); color: var(--on-ink); font-weight: 600;
}
.facets-apply:hover { opacity: 0.88; }
.facets-clear { min-height: 2.75rem; padding: 0 0.25rem; border: 0; background: none; color: var(--ink-muted); text-decoration: underline; }
.facets-reset { color: var(--ink-muted); font-size: 0.875rem; white-space: nowrap; text-decoration: underline; }
/* With JS, "Ryd valg" is the form's one clear; "Fjern alle filtre" stays
   above the results. Unapplied choices are said out loud in the sheet. */
html.js .facets-reset { display: none; }
.facets-pending { display: none; flex-basis: 100%; margin: 0; color: var(--ink-muted); font-size: 0.8125rem; }
html.js .facets.is-dirty .facets-pending { display: block; }
.sheet {
  position: fixed; inset: 0; inline-size: auto; block-size: auto; max-inline-size: none; max-block-size: none;
  margin: 0; padding: 0; border: 0; background: var(--surface-raised); color: var(--ink); overscroll-behavior: contain;
}
.sheet::backdrop { background: var(--scrim); }
.sheet .facets { display: flex; flex-direction: column; min-block-size: 100%; padding: 0 var(--gutter-end) 0 var(--gutter); }
.sheet .facets-head, .sheet .facets-actions {
  position: sticky; z-index: 1; margin-inline: calc(-1 * var(--gutter)) calc(-1 * var(--gutter-end));
  padding-inline: var(--gutter) var(--gutter-end); background: var(--surface-raised);
}
.sheet .facets-head { top: 0; padding-block-start: max(0.75rem, env(safe-area-inset-top, 0px)); }
.sheet .facets-actions { bottom: 0; margin-block-start: auto; border-block-start: 1px solid var(--line); padding-block-end: max(0.75rem, env(safe-area-inset-bottom, 0px)); }
.sheet .facets-apply { flex: 1 1 12rem; }
.sheet .facet { margin-block-start: 0.75rem; }
html:has(.sheet[open]) { overflow: hidden; }
@media (min-width: 48rem) {
  .sheet { inset: 0 auto 0 0; inline-size: min(24rem, 100%); border-inline-end: 1px solid var(--line); box-shadow: var(--shadow-dialog); }
  .sheet .facets { padding-inline: max(1.5rem, env(safe-area-inset-left, 0px)) 1.5rem; }
  .sheet .facets-head, .sheet .facets-actions {
    margin-inline: calc(-1 * max(1.5rem, env(safe-area-inset-left, 0px))) -1.5rem;
    padding-inline: max(1.5rem, env(safe-area-inset-left, 0px)) 1.5rem;
  }
}

/* site box: the answer to a navigational query, a card with its shortcuts
   as tiles */
.site-box {
  margin: 0 0 var(--space-2); padding: 0.875rem var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised);
}
.site-box .result-heading { font-size: 1.25rem; }
@media (min-width: 64rem) {
  .serp.has-panel .site-box.is-selected { background: var(--water-soft); border-color: transparent; }
  html.js .serp.has-panel .site-box { cursor: pointer; }
}
.sitelinks { list-style: none; margin: 0.75rem 0 0.25rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--space-2); }
.sitelinks a {
  display: flex; align-items: center; min-height: 3rem; padding: 0.375rem 0.875rem; border-radius: var(--radius-md);
  background: var(--surface-sunken); color: var(--ink); font-size: 0.875rem; font-weight: 500; line-height: 1.3;
  overflow-wrap: anywhere; hyphens: auto;
}
.sitelinks a:hover { background: var(--line); color: var(--ink); text-decoration: none; }
.nav-destination { margin: 0 0 1.25rem; }

/* more results and supplementary results */
.more { margin: 1rem 0 2rem; }
.more-link {
  display: flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.5rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface-raised);
  color: var(--ink); font-weight: 600; font-size: 0.9375rem; text-decoration: none;
}
.more-link:hover { color: var(--ink); text-decoration: none; background: var(--surface-sunken); }
.more-link[aria-busy="true"] { color: var(--ink-muted); pointer-events: none; }
.result-external { margin: 0 0 1.25rem; }
.result-external .result-heading { font-size: 1.0625rem; }
.result-url { color: var(--ink-muted); min-width: 0; overflow-wrap: anywhere; white-space: normal; }
@media (min-width: 48rem) { .external, .more { margin-inline: var(--space-4); } }

/* no results and errors (design system, NoResults): heading-1, one plain
   line, chips for what to try next */
.zero, .error-page { display: flex; flex-direction: column; gap: var(--space-4); margin: 1.5rem 0 2.5rem; max-width: 40rem; }
@media (min-width: 48rem) { .zero { margin: 2.5rem var(--space-4) 3rem; } .error-page { margin-block-start: 3.5rem; } }
.zero-heading, .error-heading {
  margin: 0; font-family: var(--font-display); font-size: 1.625rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; overflow-wrap: anywhere;
}
@media (min-width: 48rem) { .zero-heading, .error-heading { font-size: 1.875rem; } }
.zero-sub, .error-message { margin: 0; color: var(--ink); font-size: 0.9375rem; line-height: 1.6; text-wrap: pretty; }
.zero > .zero-sub:last-child { color: var(--ink-muted); font-size: 0.875rem; }
.zero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.error-page .search-form { margin: 0.5rem 0; }
.error-home { margin: 0; }
/* A streamed search that failed (error_fragment.html). */
.zero > p:first-child:not(.zero-sub) { margin: 0; font-family: var(--font-display); font-size: 1.625rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; }

/* debug banner (?debug=1 only) */
.test-status-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; margin: 0 0 1rem;
  padding: 0.5rem 0.75rem; border-radius: var(--radius-md); background: var(--surface-sunken); font-size: 0.8125rem;
}
.test-status-banner .status-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.test-status-banner .status-badge { font-weight: 600; }
.test-status-banner .status-divider { color: var(--ink-muted); }
.test-status-banner .status-active { font-weight: 600; }
.test-status-banner .status-fallback { font-weight: 600; text-decoration: underline dotted; }
.test-status-banner .status-meta, .test-status-banner .status-inactive { color: var(--ink-muted); }

/* @bundle pages */
/* text pages (crawler, rangering, source) */
.page { max-width: 40rem; margin: 2rem auto 0; line-height: 1.65; }
.page h1 { margin: 0 0 1rem; font-family: var(--font-display); font-size: 1.875rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; }
.page h2 { margin: 2.25rem 0 0.5rem; font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; }
.page h3 { margin: 1.5rem 0 0.4rem; font-size: 1rem; }
.page p, .page li { text-wrap: pretty; }
.weights-list, .stats-list { list-style: none; padding: 0; }
.weights-list li, .stats-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.8rem; padding-block: 0.15rem; font-variant-numeric: tabular-nums; }
/* /kvalitet: result tables and the per-set panels (search/quality_page.py) */
.table-wrap { overflow-x: auto; margin: 1rem 0; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; font-variant-numeric: tabular-nums; line-height: 1.4; }
.data-table caption { caption-side: bottom; text-align: start; padding-block-start: 0.5rem; color: var(--ink-muted); font-size: 0.8125rem; }
.data-table th, .data-table td { padding: 0.45rem 0.6rem; border-block-end: 1px solid var(--line); text-align: end; white-space: nowrap; }
.data-table th[scope="row"], .data-table thead th:first-child { text-align: start; font-weight: 600; white-space: normal; min-width: 7rem; }
@media (max-width: 30rem) { .data-table { font-size: 0.875rem; } .data-table th, .data-table td { padding-inline: 0.35rem; } }
.data-table thead th { color: var(--ink-muted); font-weight: 500; font-size: 0.8125rem; }
.data-table .pure { font-weight: 700; }
.quality-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem 1.5rem; margin: 1rem 0 0; }
.quality-panel { margin: 0; }
.quality-panel h2 { margin: 0 0 0.2rem; font-family: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; }
.quality-panel p { margin: 0.2rem 0 0; color: var(--ink-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.quality-panel svg { display: block; width: 100%; height: auto; color: var(--ink); }
.quality-panel .grid-line { stroke: currentColor; stroke-opacity: 0.15; }
.quality-panel text { fill: var(--ink-muted); font-size: 11px; }
.quality-panel .pure-line { fill: none; stroke: var(--water); stroke-width: 2; stroke-linejoin: round; }
.quality-panel .pure-dot { fill: var(--water); }
.quality-panel .ddg-mark { fill: var(--ink-muted); }
.quality-panel .google-mark { fill: none; stroke: var(--ink-muted); stroke-width: 1.5; }
.quality-legend { margin: 0.75rem 0 0; color: var(--ink-muted); font-size: 0.8125rem; }
.quality-panel .end-label { font-size: 12.5px; }
.quality-panel .end-label.pure { fill: var(--water); font-weight: 700; }
.quality-panel .label-tie { stroke: currentColor; stroke-opacity: 0.3; stroke-width: 0.75; }
.quality-details { margin: 1.25rem 0; }
.quality-details summary { cursor: pointer; font-weight: 600; }
.source-profile { margin-block-start: 1.5rem; border-block-start: 1px solid var(--line); }
.source-dimensions { margin-block: 0.4rem 0.75rem; font-size: 0.875rem; }
.source-dimensions div { display: grid; grid-template-columns: minmax(6rem, 1fr) 2.5fr; gap: 0.75rem; padding-block: 0.2rem; }
.source-dimensions dt { color: var(--ink-muted); }
.source-dimensions dd { margin: 0; }

/* About (mockup About): one statement, three principle cards, two-column
   sections, the schools band in ink */
.about-page { max-width: 68rem; margin: 0 auto; padding-block: var(--space-7) 0; }
.about-hero { display: flex; flex-direction: column; gap: 1.25rem; padding-block-end: var(--space-7); }
.about-statement { margin: 0; max-width: 51rem; font-family: var(--font-display); font-size: clamp(2.25rem, 7vw, 3.75rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.035em; text-wrap: balance; }
.about-lead { margin: 0; max-width: 42.5rem; font-size: 1.125rem; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.about-principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--space-5); padding-block-end: var(--space-7); }
.about-card { display: flex; flex-direction: column; gap: 0.625rem; padding: 1.75rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); scroll-margin-top: 1rem; }
.about-card h2, .about-split h2 { margin: 0; font-family: var(--font-display); font-weight: 700; }
.about-card h2 { font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.02em; }
.about-card p { margin: 0; font-size: 0.9375rem; line-height: 1.6; text-wrap: pretty; }
.about-split { display: grid; gap: var(--space-4) var(--space-8); padding-block-end: var(--space-7); }
.about-split h2 { font-size: 1.875rem; line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; }
.about-prose { display: flex; flex-direction: column; gap: var(--space-4); max-width: 38.75rem; font-size: 1rem; line-height: 1.65; }
.about-prose p { margin: 0; text-wrap: pretty; }
.about-more { display: flex; flex-direction: column; gap: var(--space-3); max-width: 38.75rem; margin: 0; padding: 0; list-style: none; font-size: 1rem; line-height: 1.55; }
.about-more a { font-weight: 600; margin-inline-end: 0.375rem; }
@media (min-width: 64rem) { .about-split { grid-template-columns: 18.75rem minmax(0, 1fr); } }
.about-schools {
  display: grid; gap: var(--space-6); align-items: center; margin-block-end: var(--space-7);
  padding: clamp(2rem, 6vw, 4.5rem) clamp(1.25rem, 6vw, 4.5rem); border-radius: 20px; background: var(--ink); color: var(--on-ink);
}
.about-schools-text { display: flex; flex-direction: column; gap: 1.125rem; }
.about-kicker { margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.about-schools h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.875rem, 5vw, 2.75rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; }
.about-schools-text > p:last-child { margin: 0; max-width: 32.5rem; font-size: 1.0625rem; line-height: 1.6; }
.about-ref { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.375rem; border-radius: var(--radius-lg); background: var(--surface-raised); color: var(--ink); }
@media (min-width: 64rem) { .about-schools { grid-template-columns: minmax(0, 1fr) 26.25rem; gap: var(--space-8); } }

/* @bundle base */
@media (prefers-reduced-motion: no-preference) {
  .btn, .chip-face, .more-link, .search-field, .panel-btn, .result { transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out, opacity 120ms ease-out; }
}
@media (forced-colors: active) {
  .search-field, .chip-face, .more-link, .site-box, .about-panel, .source-panel, .notice, .tag, .btn, .facets-apply, .about-card, .info-sheet { border: 1px solid CanvasText; }
  .wm-u { forced-color-adjust: none; background: none; color: CanvasText; }
  .why-track { forced-color-adjust: none; border: 1px solid CanvasText; background: Canvas; }
  .why-track::before { background: CanvasText; }
  .chip.is-on .chip-face, .chip-selected .chip-face { forced-color-adjust: none; background: SelectedItem; color: SelectedItemText; border-color: SelectedItem; }
  mark { background: Mark; color: MarkText; }
  :focus-visible, .chip:focus-visible .chip-face, .search-field:focus-within { outline-color: Highlight; }
  html.js .serp.has-panel .panel-btn { opacity: 1; }
  html.js .serp.has-panel .result-source { padding-inline-end: 8.75rem; }
  /* The icons are masks over a background colour, which forced colours
     would paint as the page background. */
  .about > summary::before { forced-color-adjust: none; background: ButtonText; }
  .about[open] > summary::before { background: Highlight; }
}
@media (forced-colors: active) and (min-width: 64rem) {
  /* Only beside the panel is a result "selected". */
  html:not(.panel-off) .serp.has-panel .result.is-selected { outline: 2px solid Highlight; }
}
@media print {
  .site-header, .site-footer, .filter-bar, .facets, .source-panel, .applied, .applied-note, .about, .panel-btn, .more, .skip-link, .skip-to { display: none !important; }
  .serp { display: block; margin: 0; max-width: none; padding: 0; }
  .results > .result { margin: 0; padding: 0 0 1rem; border: 0; }
  .result-title::after { content: " – " attr(href); overflow-wrap: anywhere; font-family: var(--font-text); font-size: 0.75rem; color: var(--ink-muted); }
}
/* @bundle serp */
/* Short phones: header and quick filters would take a quarter of the
   screen, so the filters scroll away with the page. */
@media (max-height: 40rem) {
  .serp > .filter-bar { position: static; }
  html:has(.results-page .serp > .filter-bar) { scroll-padding-top: calc(var(--header-h) + 0.75rem); }
}
/* Short viewports (landscape phones, 400 % zoom): sticky chrome would cover
   most of the screen, so everything scrolls as one page. */
@media (max-height: 30rem) {
  .results-page .site-header, .serp > .filter-bar, .sheet .facets-head, .sheet .facets-actions { position: static; }
  .serp.has-panel .source-panel { position: static; max-height: none; overflow: visible; }
  html:has(.results-page), html:has(.results-page .serp > .filter-bar) { scroll-padding-top: 1rem; }
}

/* @bundle pages */
/* purepure ai (templates_v2/gpt.html, puregpt.js): the front page's shape
   until the first question (wordmark with water while typing, the field,
   example questions, a quiet footer); then one document that scrolls, a
   column the width of the results, the field docked at the bottom. No inner
   scroll box and no cards: each answer opens with one quiet line about what
   purepure found (the ink star while it works), then the text with numbered
   citations, its originals as plain numbered lines and two small actions. */
.ai-brand { display: inline-flex; align-items: baseline; gap: 0.3em; min-height: 2.75rem; padding-block: 0.5rem; color: var(--ink); font-size: 1.75rem; text-decoration: none; }
.ai-brand:hover { color: var(--ink); text-decoration: none; }
.ai-suffix { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.045em; line-height: 1; color: var(--ink-muted); }
.ai-header .site-header-bar { flex-wrap: nowrap; }
.ai-nav { display: flex; align-items: center; gap: var(--space-2) var(--space-5); margin-inline-start: auto; font-size: 0.9375rem; white-space: nowrap; }
.ai-nav > a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink-muted); }
.ai-nav > a:hover { color: var(--ink); }
.ai-nav .btn { min-height: 2.5rem; padding-inline: 1.125rem; }
.ai-main { display: flex; flex-direction: column; justify-content: center; padding-block: 1rem 3rem; }
.ai-intro { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-block-end: var(--space-6); text-align: center; }
.ai-title { display: flex; align-items: baseline; justify-content: center; gap: 0.15em; margin: 0; font-size: clamp(3.25rem, 13vw, 6rem); white-space: nowrap; }
.ai-title .ai-suffix { font-size: 0.5em; }
.ai-intro .tagline { margin: 0; color: var(--ink-muted); font-size: 0.9375rem; }
.ai-composer, .ai-landing, #conversation { width: 100%; max-width: var(--col); margin-inline: auto; }
.chat-form { margin: 0; }
.question-box {
  display: flex; align-items: flex-end; gap: var(--space-2); padding: 0.3125rem 0.3125rem 0.3125rem 1.25rem;
  border: 1px solid var(--line-strong); border-radius: 1.625rem; background: var(--surface-raised);
}
.question-box:focus-within { outline: 2px solid var(--water); outline-offset: 2px; }
.question-box textarea {
  display: block; flex: 1 1 auto; min-width: 0; min-height: 2.5rem; max-height: 10rem; margin: 0; padding: 0.5rem 0;
  resize: none; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1.0625rem; line-height: 1.5;
}
.question-box textarea::placeholder { color: var(--ink-muted); opacity: 1; }
.question-box textarea:focus, .question-box textarea:focus-visible { outline: none; } /* the box draws the ring */
.question-box .btn { min-height: 2.5rem; }
.ai-send { inline-size: 2.5rem; padding: 0; }
.ai-send:disabled { cursor: wait; opacity: 0.5; }
#stop-chat { padding-inline: 1.125rem; }
.ai-notice { margin: var(--space-3) 0 0; color: var(--ink-muted); font-size: 0.8125rem; text-align: center; text-wrap: pretty; }
.ai-quota + .ai-notice { margin-block-start: 0; }
#chat-error { margin: var(--space-3) 0 0; font-size: 0.9375rem; }
#chat-error:empty { margin: 0; }
#chat-error:not(:empty), .ai-unavailable { padding-inline-start: var(--space-3); border-inline-start: 2px solid var(--ink); }
.ai-landing { margin-block-start: var(--space-5); color: var(--ink-muted); font-size: 0.875rem; text-align: center; }
.ai-examples { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ai-examples .btn { min-height: 2.25rem; padding-inline: 1rem; font-size: 0.875rem; font-weight: 500; }
.ai-about { margin-block-start: var(--space-4); }
.ai-about summary { display: inline-flex; align-items: center; min-height: 2.75rem; cursor: pointer; }
.ai-about summary:hover { color: var(--ink); }
.ai-about[open] { text-align: start; }
.ai-about[open] p { text-wrap: pretty; }
.ai-footer { margin-block-start: 0; }
/* A conversation: the page scrolls; the field stays docked at the bottom. */
.has-question .ai-header { border-block-end: 1px solid var(--line); }
.has-question .ai-footer { display: none; }
.has-question .ai-main { justify-content: flex-start; padding-block: 0; }
.ai-conversation { flex: 1 0 auto; }
.has-question .ai-composer {
  position: sticky; inset-block-end: 0; z-index: 2;
  padding-block: var(--space-3) max(0.75rem, env(safe-area-inset-bottom, 0px)); background: var(--surface);
}
.has-question .ai-composer::before { content: ""; position: absolute; inset: auto 0 100% 0; block-size: var(--space-5); background: linear-gradient(to bottom, transparent, var(--surface)); pointer-events: none; }
.has-question .ai-notice { margin-block-start: var(--space-2); font-size: 0.75rem; }
.turn { margin: var(--space-6) 0; scroll-margin-top: var(--space-4); }
.turn h2:focus { outline: none; } /* focused by script after an answer, never a control */
.turn.user { width: fit-content; max-width: 85%; margin-inline-start: auto; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--surface-sunken); }
.turn.user p { margin: 0; white-space: pre-wrap; }
.turn.assistant { margin-block-start: var(--space-4); }
/* The grounding line: one line, opens to the searches. */
.grounding { color: var(--ink-muted); font-size: 0.875rem; }
.grounding summary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; cursor: pointer; list-style: none; }
.grounding summary::-webkit-details-marker { display: none; }
.grounding summary::after { content: ""; inline-size: 0.4rem; block-size: 0.4rem; margin-inline-start: 0.125rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); }
.grounding[open] summary::after { transform: rotate(45deg); }
.grounding summary:hover { color: var(--ink); }
.grounding summary .search-wait-glyph { margin: -4px -2px -4px -4px; }
.grounding-log { margin: 0 0 var(--space-4); padding-inline-start: 1.25rem; }
.grounding-log li { margin-block: 0.25rem; text-wrap: pretty; }
.message-text { overflow-wrap: anywhere; font-size: 1rem; line-height: 1.65; }
.message-text:empty { display: none; }
.message-text > :first-child { margin-block-start: 0.25rem; }
.message-text p { margin: 0.75rem 0; white-space: pre-wrap; }
.message-text h3 { margin: 1.5rem 0 0.5rem; font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
.message-text ul, .message-text ol { padding-inline-start: 1.5rem; }
.message-text li { margin-block: 0.375rem; }
.message-text h4 { margin: 1.25rem 0 0.375rem; font-family: var(--font-text); font-size: 1rem; font-weight: 600; }
.message-text li > ul, .message-text li > ol { margin-block: 0.25rem; }
.message-text li > p { margin: 0.375rem 0; }
.message-text blockquote { margin: 0.75rem 0; padding: 0.125rem 0 0.125rem var(--space-4); border-inline-start: 3px solid var(--line-strong); color: var(--ink-muted); }
.message-text blockquote p { margin: 0.375rem 0; }
.message-text hr { margin: var(--space-5) 0; border: 0; border-block-start: 1px solid var(--line); }
.message-text del { color: var(--ink-muted); }
/* Tables scroll inside their own box, never the page. */
.table-wrap { max-width: 100%; margin: 1rem 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.message-text table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; }
.message-text th, .message-text td { padding: 0.5rem 0.75rem; text-align: start; vertical-align: top; overflow-wrap: normal; }
.message-text th { background: var(--surface-sunken); font-weight: 600; white-space: nowrap; }
.message-text tbody tr + tr td { border-block-start: 1px solid var(--line); }
.message-text td { min-width: 6rem; }
.message-text .short { white-space: nowrap; }
.message-text .align-end { text-align: end; font-variant-numeric: tabular-nums; }
.message-text .align-center { text-align: center; }
.message-text pre { overflow-x: auto; padding: 0.75rem 1rem; border-radius: var(--radius-md); background: var(--surface-sunken); font-size: 0.875rem; white-space: pre-wrap; }
.citation { padding: 0 0.125rem; font-size: 0.8125em; font-weight: 600; font-variant-numeric: tabular-nums; vertical-align: 0.15em; line-height: 1; }
/* The originals: numbered lines, title then host and date. */
.originals { margin-block-start: var(--space-4); padding-block-start: var(--space-3); border-block-start: 1px solid var(--line); font-size: 0.9375rem; }
.originals h3 { margin: 0 0 var(--space-2); color: var(--ink-muted); font-family: var(--font-text); font-size: 0.8125rem; font-weight: 600; }
.originals-list { margin: 0; padding: 0; list-style: none; }
.original { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: var(--space-1); padding-block: 0.3125rem; }
.original-n { grid-row: span 2; color: var(--ink-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; line-height: 1.5rem; }
.original-title { overflow: hidden; color: var(--link); font-weight: 500; line-height: 1.5rem; text-overflow: ellipsis; white-space: nowrap; }
.original-title:visited { color: var(--visited); }
.original-meta { color: var(--ink-muted); font-size: 0.8125rem; line-height: 1.35; }
.originals-more { margin-block-start: var(--space-1); }
.originals-more summary { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink-muted); font-size: 0.875rem; cursor: pointer; }
.originals-more summary:hover { color: var(--ink); }
.originals-none, .turn-note { margin: var(--space-3) 0 0; color: var(--ink-muted); font-size: 0.875rem; }
.turn-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-3); }
.turn-action { min-height: 2.25rem; padding-inline: 1rem; font-size: 0.8125rem; font-weight: 500; }
@media (max-width: 47.99rem) {
  .ai-brand { font-size: 1.375rem; }
  .ai-nav { gap: var(--space-2) var(--space-3); font-size: 0.875rem; }
  .has-question .ai-nav-long { display: none; }
  .ai-page:not(.has-question) .ai-main { justify-content: flex-start; padding-block-start: 12svh; }
  .turn.user { max-width: 92%; }
}
.page-lead { font-size: 1.125rem; line-height: 1.55; }
.page pre { overflow-x: auto; padding: 0.75rem 1rem; border-radius: var(--radius-md); background: var(--surface-sunken); font-size: 0.875rem; }

/* /deltag: a visual explanation, then one platform's installation guide. */
.donor-page { max-width: 62rem; margin-block-start: 3rem; }
.donor-hero { max-width: 42rem; margin-block-end: 2.5rem; }
.donor-hero h1 { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.08; letter-spacing: -0.035em; }
.donor-hero .page-lead { max-width: 37rem; margin-block: 1rem; }
.donor-flow { padding: 1.75rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); }
.donor-flow h2 { margin: 0 0 1.75rem; font-size: 1.125rem; }
.donor-flow-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; list-style: none; margin: 0; padding: 0; }
.donor-flow-steps > li { position: relative; min-width: 0; }
.donor-flow-arrow { position: absolute; inset-inline-start: -2.125rem; top: 2rem; color: var(--ink-muted); font-size: 1.5rem; }
.donor-flow-arrow::before { content: '→'; }
.donor-illustration { display: flex; align-items: center; gap: 1rem; min-height: 5rem; }
.donor-illustration svg { width: 4.5rem; height: 4.5rem; flex-shrink: 0; }
.donor-file { color: var(--ink-muted); font-size: 0.75rem; font-weight: 600; }
.donor-flow-steps h3 { margin: 1rem 0 0.375rem; font-size: 1rem; }
.donor-flow-steps p { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--ink-muted); }
.donor-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; list-style: none; margin: 1.75rem 0 3rem; padding: 0; }
.donor-facts li { display: flex; align-items: flex-start; gap: 0.75rem; color: var(--ink-muted); font-size: 0.875rem; line-height: 1.55; }
.donor-facts svg { width: 1.75rem; height: 1.75rem; flex-shrink: 0; color: var(--ink); }
.donor-facts strong { display: block; color: var(--ink); font-weight: 600; margin-block-end: 0.25rem; }
.donor-setup, .donor-help { max-width: 48rem; }
.donor-setup h2, .donor-help h2 { margin: 0 0 0.5rem; font-size: 1.625rem; scroll-margin-top: 1.5rem; }
.donor-soon { padding: 0.75rem 1rem; border-radius: var(--radius-md); background: var(--water-soft); }
.donor-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 1.5rem; }
.donor-tabs [role="tab"] { min-height: 2.75rem; padding: 0 1.125rem; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface-raised); font-weight: 600; }
.donor-tabs [aria-selected="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.donor-panel h3 { margin-block-start: 0.5rem; }
.donor-enhanced .donor-panel h3, .donor-copy-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.donor-install-steps { list-style: none; margin: 0; padding: 0; }
.donor-install-steps > li { display: flex; align-items: flex-start; gap: 1rem; padding-block: 1.25rem; }
.donor-install-steps > li + li { border-block-start: 1px solid var(--line); }
.donor-step-number { display: grid; place-items: center; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: 0.875rem; font-weight: 600; }
.donor-install-steps > li > div { min-width: 0; flex: 1; }
.donor-install-steps > li > svg { width: 2.75rem; height: 2.75rem; color: var(--ink-muted); flex-shrink: 0; }
.donor-install-steps h4 { margin: 0 0 0.375rem; font-size: 1rem; font-weight: 600; }
.donor-install-steps p { margin: 0; color: var(--ink-muted); font-size: 0.9375rem; }
.donor-page kbd { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.1rem 0.3rem; background: var(--surface-raised); font: 0.8125rem var(--mono); color: var(--ink); }
.donor-panel-link { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; margin-block-start: 0.5rem; font-size: 0.9375rem; }
.donor-command { display: flex; align-items: stretch; gap: 0.5rem; margin-block: 0.75rem 0; }
.donor-command pre { flex: 1; min-width: 0; margin: 0; }
.donor-command code { color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.donor-command .btn { width: 8.5rem; flex-shrink: 0; min-height: 2.75rem; padding: 0 1rem; align-self: flex-start; }
.donor-copy:disabled { opacity: 0.5; cursor: not-allowed; }
.donor-note { color: var(--ink-muted); font-size: 0.9375rem; }
.donor-help { margin-block: 2.5rem 2rem; }
.donor-help details { border-block-end: 1px solid var(--line); }
.donor-help summary { padding-block: 1rem; font-weight: 600; cursor: pointer; }
.donor-help-body { max-width: 43rem; padding-block-end: 1rem; font-size: 0.9375rem; }
.donor-help-body p { margin-block: 0.5rem 0.75rem; }
.donor-help-body code { overflow-wrap: anywhere; }
.donor-live { display: flex; align-items: center; gap: 0.5rem; margin-block: 1.25rem; color: var(--ink-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.donor-live strong { color: var(--ink); }
.donor-online-dot { width: 0.375rem; height: 0.375rem; flex-shrink: 0; border-radius: 50%; background: currentColor; }
@media (max-width: 45rem) {
  .donor-page { margin-block-start: 2rem; }
  .donor-flow { padding: 1.25rem; }
  .donor-flow-steps { grid-template-columns: 1fr; gap: 1.75rem; }
  .donor-flow-steps > li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 0 1rem; }
  .donor-illustration { grid-row: span 2; min-height: 0; }
  .donor-illustration svg { width: 3.5rem; height: 3.5rem; }
  .donor-file { display: none; }
  .donor-flow-steps h3 { margin-block: 0 0.25rem; }
  .donor-flow-arrow { inset-inline-start: 1.5rem; top: -1.6rem; font-size: 1rem; }
  .donor-flow-arrow::before { content: '↓'; }
  .donor-facts { grid-template-columns: 1fr; gap: 1.125rem; margin-block-end: 2.5rem; }
  .donor-command { flex-direction: column; }
  .donor-command .btn { width: 100%; }
  .donor-install-steps > li > svg { display: none; }
}
@media (max-width: 30rem) { .donor-install-steps > li { gap: 0.75rem; } }
/* @bundle serp */
/* The results page's footer on phones (#765). */
@media (max-width: 47.99rem) { .results-page .site-footer { margin-block-start: 0; } }

/* @bundle access */
/* access: plans, sign-in, account and the 429 page (search/access_routes.py) */
.access-page { display: flex; flex-direction: column; gap: var(--space-5); max-width: 42rem; margin: 0 auto; padding: var(--space-7) var(--gutter) var(--space-7) var(--gutter); }
.access-wide { max-width: 56rem; }
.access-page section { display: flex; flex-direction: column; gap: var(--space-3); }
.access-page h2 { margin: var(--space-3) 0 0; font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
.access-page p { margin: 0; line-height: 1.6; text-wrap: pretty; }
.access-heading { margin: 0; font-family: var(--font-display); font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; overflow-wrap: anywhere; }
.access-lead { font-size: 1.0625rem; }
.access-note, .access-optional { color: var(--ink-muted); font-size: 0.875rem; }
.access-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--space-4); }
.access-option { padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); }
.access-option > p:last-child { margin-block-start: auto; }
.access-option h2 { margin: 0; }
.access-table-wrap { overflow-x: auto; }
.access-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.access-table th, .access-table td { padding: var(--space-2) var(--space-3) var(--space-2) 0; border-block-end: 1px solid var(--line); text-align: start; vertical-align: top; }
.access-table thead th { color: var(--ink-muted); font-size: 0.8125rem; font-weight: 600; }
/* Phones: one plan per block, each value labelled, instead of four squeezed columns. */
@media (max-width: 40rem) {
  .access-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .access-table tr { display: block; padding-block: var(--space-3); border-block-end: 1px solid var(--line); }
  .access-table th[scope="row"], .access-table td { padding: 0.125rem 0; border: 0; }
  .access-table th[scope="row"] { display: block; }
  .access-table td { display: grid; grid-template-columns: 7rem 1fr; gap: var(--space-3); }
  .access-table td::before { content: attr(data-label); color: var(--ink-muted); font-size: 0.8125rem; }
}
.access-code { margin: 0; padding: var(--space-4); overflow-x: auto; border-radius: var(--radius-md); background: var(--surface-sunken); }
.access-code code { color: var(--ink); white-space: pre; }
.access-form { display: flex; flex-direction: column; gap: var(--space-2); max-width: 30rem; }
.access-form label { font-weight: 600; font-size: 0.9375rem; }
.access-form input:not([type="radio"], [type="checkbox"]), .access-form textarea {
  min-height: 2.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  background: var(--surface-raised); color: var(--ink); font: inherit; font-size: 1rem;
}
.access-form textarea { min-height: 6rem; resize: vertical; }
.access-form p { margin-block-start: var(--space-2); }
.access-choice { display: flex; flex-direction: column; gap: var(--space-2); margin: 0 0 var(--space-2); padding: 0; border: 0; }
.access-choice legend { margin-block-end: var(--space-2); font-weight: 600; }
.access-choice label, .access-check { display: flex; align-items: flex-start; gap: var(--space-2); font-weight: 400; }
.access-choice input, .access-check input { margin-block-start: 0.3rem; }
.access-inline { flex-direction: row; flex-wrap: wrap; align-items: flex-end; max-width: none; }
.access-inline label { flex-basis: 100%; }
.access-inline input { flex: 1 1 14rem; }
.access-error, .access-success { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); }
.access-error { background: var(--tag-paid-bg); color: var(--tag-paid-ink); }
.access-success { display: flex; flex-direction: column; gap: var(--space-2); background: var(--tag-public-bg); color: var(--tag-public-ink); }
.access-usage { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-7); margin: 0; }
.access-usage dt { color: var(--ink-muted); font-size: 0.8125rem; }
.access-usage dd { margin: 0; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; }
.access-keys { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.access-keys li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding-block: var(--space-2); border-block-end: 1px solid var(--line); }