/* Base: reset, page frame, type roles, home grid, prose pages. Tokens only (see tokens.css). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--c-paper); color: var(--c-ink);
  font-family: var(--font-sans); font-size: var(--t-body); line-height: var(--lh-body);
  font-weight: var(--w-sans); font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, p, dl, dd, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--c-ink); text-decoration-thickness: var(--underline-thick); text-underline-offset: var(--underline-offset); }
a:hover { text-decoration-thickness: var(--rule-strong); }
code, pre, kbd { font-family: var(--font-mono); font-size: var(--t-small); }
img, svg { display: block; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }

:focus-visible { outline: var(--focus-ring) solid var(--c-focus); outline-offset: var(--focus-offset); border-radius: var(--r-ctl); }

.sr-only { position: absolute; width: var(--hair); height: var(--hair); padding: 0; margin: calc(-1 * var(--hair)); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Native radio kept in the a11y tree and tab order; its label is the visible control. */
.sr-input { position: absolute; opacity: 0; width: var(--hair); height: var(--hair); margin: 0; pointer-events: none; }
.skip { position: absolute; left: var(--s-4); top: calc(-1 * var(--s-9)); z-index: 10; background: var(--c-ink); color: var(--c-on-ink); padding: var(--s-2) var(--s-4); border-radius: var(--r-ctl); }
.skip:focus { top: var(--s-2); }

/* ---- type roles --------------------------------------------------------------- */
.serif, .brand, .verdict, .title, .doc h2, .doc h3 { font-family: var(--font-serif); }
.title { font-size: var(--t-title); line-height: var(--lh-tight); font-weight: var(--w-serif); letter-spacing: var(--track-verdict); font-variation-settings: "opsz" var(--opsz-display); text-wrap: balance; }
.lede { font-family: var(--font-serif); font-size: var(--t-row); line-height: var(--lh-snug); color: var(--c-ink-2); max-width: var(--w-prose); }
.muted { color: var(--c-ink-2); }

/* ---- page frame ----------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: var(--page-pad); }
.masthead { border-bottom: var(--rule-strong) solid var(--c-rule); }
.masthead__in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand zone end"; align-items: center; column-gap: var(--s-5); padding-block: var(--s-4) var(--s-3); }
.masthead__zone { grid-area: zone; justify-self: center; }
.masthead__zone:empty { display: none; }
.masthead__end { grid-area: end; display: flex; align-items: center; gap: var(--s-5); justify-self: end; }
.brand { grid-area: brand; font-size: var(--t-brand); font-weight: var(--w-serif); line-height: var(--lh-tight); letter-spacing: var(--track-verdict); text-decoration: none; font-variation-settings: "opsz" var(--opsz-display); min-height: var(--target); display: inline-flex; align-items: center; }
@media (max-width: 47.99rem) {
  .masthead__in { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "brand end" "zone zone"; row-gap: var(--s-3); }
  .masthead__zone { justify-self: stretch; }
}

main { padding-block: var(--s-5) var(--s-8); }
.footer { border-top: var(--hair) solid var(--c-rule); margin-top: var(--s-7); padding-block: var(--s-5) var(--s-7); color: var(--c-ink-2); font-size: var(--t-small); }
.footer a { color: inherit; text-underline-offset: var(--underline-offset); }
.footer__in { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); max-width: var(--w-page); align-items: start; }
.footer__status:empty { display: none; }
.footer__src { max-width: var(--w-prose); line-height: var(--lh-snug); text-wrap: pretty; }
.footer__src span { white-space: normal; }
.footer__nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
@media (min-width: 48rem) {
  .footer__in { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-8); row-gap: var(--s-3); grid-template-areas: "status status" "src nav"; }
  .footer__status { grid-area: status; } .footer__src { grid-area: src; }
  .footer__nav { grid-area: nav; flex-direction: column; align-items: flex-end; gap: var(--s-2); text-align: right; }
}

/* ---- home layout -------------------------------------------------------------------- */
.home { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.home > * { min-width: 0; }
.home__notices:empty, .home__basis:empty, .home__window:empty, .home__place:empty, .home__table:empty { display: none; }
.home__chart { margin-inline: calc(-1 * var(--s-1)); }
@media (min-width: 60rem) {
  .home { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); column-gap: var(--s-8); row-gap: var(--s-5); align-items: start;
    grid-template-areas: "verdict verdict" "notices notices" "chart chart" "table basis" "table window" "table place"; }
  .verdict { grid-area: verdict; } .home__notices { grid-area: notices; } .home__chart { grid-area: chart; }
  .home__table { grid-area: table; } .home__basis { grid-area: basis; } .home__window { grid-area: window; }
  .home__place { grid-area: place; }
  .home__table { grid-row-end: span 3; }
}

/* ---- prose pages (metode, api, states) ------------------------------------------------ */
.doc { display: grid; gap: var(--s-6); max-width: var(--w-prose); grid-template-columns: minmax(0, 1fr); }
.doc--wide { max-width: var(--w-page); }
.doc > *, .doc section > * { min-width: 0; }
.doc header { display: grid; gap: var(--s-4); }
.doc h2 { font-size: var(--t-heading); font-weight: var(--w-serif); line-height: var(--lh-snug); padding-top: var(--s-4); border-top: var(--hair) solid var(--c-rule); }
.doc h3 { font-size: var(--t-body); font-weight: var(--w-serif); }
.doc p, .doc li { max-width: var(--w-prose); }
.doc section { display: grid; gap: var(--s-3); }
.doc ul.bullets { list-style: disc; padding-left: var(--s-5); display: grid; gap: var(--s-2); }
.toc { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-family: var(--font-serif); font-style: italic; font-size: var(--t-row); }
.toc a { min-height: var(--target); display: inline-flex; align-items: center; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Theme wipe: the new theme "lights up" from the cord like a lamp: a growing radial mask with a soft edge (JS animates --wipe-r). */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; mask-image: radial-gradient(circle at var(--wipe-x) var(--wipe-y), var(--wipe-solid) calc(var(--wipe-r) * var(--wipe-core)), transparent var(--wipe-r)); }