/* ==========================================================================
   PasswordRadar design system: site.css
   "An instrument, not a billboard." Shared tokens, fonts, layout and every
   shared component. Page-only styles live in their own file (home.css, ...).
   Cheat sheet with markup for every pattern: DESIGN-SYSTEM.md.

    0  Fonts               8  Forms
    1  Tokens              9  Tags, state dots, checklists, steps
    2  Base               10  Panels, notes, "to confirm" marks
    3  Typography         11  Code
    4  Layout             12  Tables, key-value lists, readouts
    5  Header + nav       13  FAQ, dialog
    6  Reference pages    14  Status rows
    7  Buttons, links     15  Footer
                          16  Utilities, motion, print
                          17  Brand (from brand/snippets/brand.css)
   ========================================================================== */


/* 0  Fonts ================================================================
   Archivo (variable): wght 100-900, wdth 100-125. Condensed widths were cut
   from the file on purpose; display type uses the expanded end.
   Martian Mono (variable): wght 400-800, a single width (87.5%, baked in).
   latin-ext files hold only Central European letters (CS SK PL DE HU HR RO)
   and download only when a page contains one of them.                       */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0102, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0300-0304, U+0308-0309, U+0323, 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: "Archivo";
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0103-0107, U+010C-0111, U+0118-011B, U+0139-013A, U+013D-013E,
    U+0141-0144, U+0147-0148, U+0150-0151, U+0154-0155, U+0158-015B, U+0160-0161,
    U+0164-0165, U+016E-0171, U+0179-017E, U+0218-021B, U+1E9E;
}
@font-face {
  font-family: "Martian Mono";
  src: url("../fonts/martian-mono-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0102, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0300-0304, U+0308-0309, U+0323, 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: "Martian Mono";
  src: url("../fonts/martian-mono-latin-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0103-0107, U+010C-0111, U+0118-011B, U+0139-013A, U+013D-013E,
    U+0141-0144, U+0147-0148, U+0150-0151, U+0154-0155, U+0158-015B, U+0160-0161,
    U+0164-0165, U+016E-0171, U+0179-017E, U+0218-021B, U+1E9E;
}

/* Metric-matched local fallbacks, shown only until the web fonts arrive.
   size-adjust = average advance of real site text (Archivo / fallback);
   the overrides reproduce Archivo's ascent 0.878 and descent 0.210.        */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans"), local("Arimo");
  font-weight: 100 549;
  size-adjust: 98.34%;
  ascent-override: 89.28%;
  descent-override: 21.35%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"),
    local("Liberation Sans Bold"), local("Arimo Bold");
  font-weight: 550 900;
  size-adjust: 96.62%;
  ascent-override: 90.87%;
  descent-override: 21.74%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback Android";
  src: local("Roboto"), local("Roboto-Regular");
  font-weight: 100 549;
  size-adjust: 98.89%;
  ascent-override: 88.78%;
  descent-override: 21.24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback Android";
  src: local("Roboto Bold"), local("Roboto-Bold");
  font-weight: 550 900;
  size-adjust: 102.7%;
  ascent-override: 85.49%;
  descent-override: 20.45%;
  line-gap-override: 0%;
}
/* display headings: Archivo 125% / 780 against Arial Bold */
@font-face {
  font-family: "Archivo Wide Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"),
    local("Liberation Sans Bold"), local("Arimo Bold");
  font-weight: 100 900;
  size-adjust: 128.06%;
  ascent-override: 68.56%;
  descent-override: 16.4%;
  line-gap-override: 0%;
}
/* every listed mono fallback has a 0.600 em advance; Martian Mono has 0.650 */
@font-face {
  font-family: "Martian Mono Fallback";
  src: local("Menlo"), local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono"),
    local("Cousine"), local("DejaVu Sans Mono"), local("Droid Sans Mono");
  size-adjust: 108.32%;
  ascent-override: 92.32%;
  descent-override: 18.46%;
  line-gap-override: 0%;
}


/* 1  Tokens ===============================================================
   Theme model: <html data-theme="light|dark"> exists only after an explicit
   choice (localStorage "pr-theme"). Without it the OS preference decides.
   .theme-light / .theme-dark force a theme on a subtree; .theme-scope turns a
   subtree into an always-dark instrument panel (same in both themes).       */

:root {
  /* palette: fixed by the brief, contrast verified (see DESIGN-SYSTEM.md) */
  --scope: #071218;
  --scope-2: #0C1B23;
  --scope-grid: #1A3240;
  --scope-text: #CFE0E6;
  --scope-dim: #7F97A2;
  --scope-signal: #FFB224;
  --on-signal: #0E1B22;          /* text on amber fills, both themes: 9.7:1 */

  /* syntax colours: only inside scope panels (all >= 8:1 on --scope) */
  --tok-comment: #7F97A2;
  --tok-keyword: #8CC4E3;
  --tok-string: #FFC45C;
  --tok-function: #EAF4F7;
  --tok-number: #F4A17D;

  /* type */
  --font-sans: "Archivo", "Archivo Fallback", "Archivo Fallback Android", system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --font-display: "Archivo", "Archivo Wide Fallback", "Archivo Fallback Android", system-ui,
    -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Martian Mono", "Martian Mono Fallback", ui-monospace, "SFMono-Regular", Menlo,
    Consolas, monospace;

  /* 1.25 scale anchored on the 17px body; 15 and 13 are the UI sizes */
  --text-xs: 0.8125rem;   /* 13 */
  --text-sm: 0.9375rem;   /* 15 */
  --text-md: 1.0625rem;   /* 17 */
  --text-lg: 1.3125rem;   /* 21 */
  --text-xl: 1.625rem;    /* 26 */
  --text-2xl: 2.0625rem;  /* 33 */
  --text-3xl: 2.625rem;   /* 42 */
  --text-4xl: 3.25rem;    /* 52 */
  --text-5xl: 4.0625rem;  /* 65 */
  --text-6xl: 5.0625rem;  /* 81 */
  --display-xl: clamp(2.625rem, 1.35rem + 5.1vw, 5.0625rem);  /* 42 -> 81 */
  --display-l: clamp(2.125rem, 1.45rem + 2.8vw, 3.25rem);     /* 34 -> 52 */
  --display-m: clamp(1.625rem, 1.3rem + 1.35vw, 2.0625rem);   /* 26 -> 33 */
  --display-s: clamp(1.1875rem, 1.05rem + 0.55vw, 1.3125rem); /* 19 -> 21 */

  /* space (4px base) */
  --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;
  --space-9: 6rem;
  --space-10: 8rem;

  /* radius hierarchy: marks < tags < controls < panels; dots and the scope are circles */
  --r-xs: 3px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 12px;

  /* layout */
  --container: 75rem;                              /* 1200px */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);     /* 16px on phones, 32px wide */
  --measure: 34.5rem;                              /* ~74 characters of 17px body */
  --measure-wide: 52rem;                           /* tables, code, panels in prose */
  --header-h: 3.5rem;
  --section-pad: clamp(3.5rem, 2.5rem + 4vw, 6rem);

  /* light theme (default) */
  color-scheme: light;
  --paper: #F3F5F6;
  --paper-2: #E8EDEF;
  --surface: #FFFFFF;
  --ink: #0E1B22;
  --ink-2: #4B5B63;
  --ink-3: #5C6B72;
  --line: #D9E0E3;
  --line-2: #B9C5CA;
  --field: #7F8F96;
  --signal: #FFB224;
  --signal-hover: #F5A30A;
  --signal-ink: #8F5B00;
  --signal-wash: #FFF1D8;
  --alert: #C9361F;
  --alert-wash: #FBEFED;
  --clear: #1B7560;
  --clear-wash: #E8F2EF;
  --focus: #0E1B22;
  --link-line: #8F5B00;
  --code-bg: rgba(14, 27, 34, 0.06);
  --shadow-pop: 0 1px 2px rgba(14, 27, 34, 0.06), 0 16px 32px -16px rgba(14, 27, 34, 0.28);
  --shadow-modal: 0 28px 72px -24px rgba(7, 18, 24, 0.55), 0 2px 6px rgba(7, 18, 24, 0.12);
  --backdrop: rgba(7, 18, 24, 0.62);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.25l4 4 4-4' fill='none' stroke='%234B5B63' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* icons for CSS masks (drawn in currentColor through background-color) */
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.75 8.5l3.5 3.5 7-7.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
  --icon-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E");
  --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.25' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M10 9v5' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='10' cy='6.2' r='1.1'/%3E%3C/svg%3E");
  --icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.25' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M10 5.5v5.5' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='10' cy='14' r='1.1'/%3E%3C/svg%3E");
  --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.5v11M2.5 8h11' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");
  --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h11' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");
}

@media (min-width: 64em) {
  :root { --header-h: 4rem; }
}

/* explicit dark choice, and forced-dark subtrees */
:root[data-theme="dark"],
.theme-dark {
  color-scheme: dark;
  --paper: #0B1419;
  --paper-2: #0F1D24;
  --surface: #10202A;
  --ink: #E7EEF0;
  --ink-2: #9FB0B7;
  --ink-3: #83959D;
  --line: #1E323D;
  --line-2: #2E4855;
  --field: #58767F;
  --signal: #FFB224;
  --signal-hover: #FFC14D;
  --signal-ink: #FFC45C;
  --signal-wash: #302A19;
  --alert: #FF6B57;
  --alert-wash: #2B1A1A;
  --clear: #4CCFAA;
  --clear-wash: #10292A;
  --focus: #FFB224;
  --link-line: #FFB224;
  --code-bg: rgba(231, 238, 240, 0.08);
  --shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 32px -16px rgba(0, 0, 0, 0.6);
  --shadow-modal: 0 28px 72px -24px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(231, 238, 240, 0.04);
  --backdrop: rgba(3, 9, 12, 0.72);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.25l4 4 4-4' fill='none' stroke='%239FB0B7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* no explicit choice: follow the OS (same values as above) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0B1419;
    --paper-2: #0F1D24;
    --surface: #10202A;
    --ink: #E7EEF0;
    --ink-2: #9FB0B7;
    --ink-3: #83959D;
    --line: #1E323D;
    --line-2: #2E4855;
    --field: #58767F;
    --signal: #FFB224;
    --signal-hover: #FFC14D;
    --signal-ink: #FFC45C;
    --signal-wash: #302A19;
    --alert: #FF6B57;
    --alert-wash: #2B1A1A;
    --clear: #4CCFAA;
    --clear-wash: #10292A;
    --focus: #FFB224;
    --link-line: #FFB224;
    --code-bg: rgba(231, 238, 240, 0.08);
    --shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 32px -16px rgba(0, 0, 0, 0.6);
    --shadow-modal: 0 28px 72px -24px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(231, 238, 240, 0.04);
    --backdrop: rgba(3, 9, 12, 0.72);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.25l4 4 4-4' fill='none' stroke='%239FB0B7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

/* forced light subtree (for specimens; the page itself never needs it) */
.theme-light {
  color-scheme: light;
  --paper: #F3F5F6;
  --paper-2: #E8EDEF;
  --surface: #FFFFFF;
  --ink: #0E1B22;
  --ink-2: #4B5B63;
  --ink-3: #5C6B72;
  --line: #D9E0E3;
  --line-2: #B9C5CA;
  --field: #7F8F96;
  --signal: #FFB224;
  --signal-hover: #F5A30A;
  --signal-ink: #8F5B00;
  --signal-wash: #FFF1D8;
  --alert: #C9361F;
  --alert-wash: #FBEFED;
  --clear: #1B7560;
  --clear-wash: #E8F2EF;
  --focus: #0E1B22;
  --link-line: #8F5B00;
  --code-bg: rgba(14, 27, 34, 0.06);
  --shadow-pop: 0 1px 2px rgba(14, 27, 34, 0.06), 0 16px 32px -16px rgba(14, 27, 34, 0.28);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.25l4 4 4-4' fill='none' stroke='%234B5B63' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* always-dark instrument surface: scope bands, terminal and demo panels.
   Code blocks and scope panels get the same token set, so a tag, state dot or
   button placed inside them renders for the dark surface. */
.theme-scope,
.code-block,
.scope-panel {
  color-scheme: dark;
  --paper: var(--scope);
  --paper-2: var(--scope-2);
  --surface: #0D1D26;
  --ink: #E7EEF0;
  --ink-2: #A9BDC5;
  --ink-3: var(--scope-dim);
  --line: var(--scope-grid);
  --line-2: #2A4757;
  --field: #58767F;
  --signal: var(--scope-signal);
  --signal-hover: #FFC14D;
  --signal-ink: #FFC45C;
  --signal-wash: #29241A;
  --alert: #FF6B57;
  --alert-wash: #2B1A1A;
  --clear: #4CCFAA;
  --clear-wash: #10292A;
  --focus: #FFB224;
  --link-line: #FFB224;
  --code-bg: rgba(207, 224, 230, 0.09);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.25l4 4 4-4' fill='none' stroke='%23A9BDC5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* 2  Base ================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* keeps focused elements and anchor targets clear of the sticky header */
  scroll-padding-top: calc(var(--header-h) + 0.75rem);
}

/* smooth only for in-page jumps once the page has loaded (site.js adds .is-loaded),
   so a deep link lands at once instead of animating from the top */
@media (prefers-reduced-motion: no-preference) {
  html.is-loaded { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1.6;
  font-kerning: normal;
  overflow-wrap: break-word;
}

body > main,
body > .doc {
  flex: 1 0 auto;
}

:root[data-theme="dark"] body,
.theme-dark,
.theme-scope {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

svg:not([fill]):not(.icon) {
  fill: currentColor;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--signal);
  color: var(--on-signal);
}

/* anchors land below the sticky header (html scroll-padding does the rest) */
[id] {
  scroll-margin-top: 0.75rem;
}

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

a:focus-visible {
  border-radius: 2px;
}

main:focus,
main:focus-visible {
  outline: none;
}

hr {
  height: 0;
  margin: var(--space-7) 0;
  border: 0;
  border-top: 1px solid var(--line);
}


/* 3  Typography ============================================================
   Width axis = voice: display type is expanded (112-125%) and heavy, body
   is normal width. Mono (Martian Mono) only for literal machine values.     */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  text-wrap: balance;
}

h1,
.display-l {
  font-size: var(--display-l);
  font-weight: 760;
  font-stretch: 125%;
  line-height: 1.04;
  letter-spacing: -0.022em;
}

h2,
.display-m {
  font-size: var(--display-m);
  font-weight: 720;
  font-stretch: 118%;
  line-height: 1.1;
  letter-spacing: -0.018em;
}

h3,
.display-s {
  font-size: var(--display-s);
  font-weight: 660;
  font-stretch: 110%;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h4 {
  font-size: var(--text-md);
  font-weight: 650;
  font-stretch: 104%;
  line-height: 1.35;
}

h5,
h6 {
  font-size: var(--text-sm);
  font-weight: 650;
  line-height: 1.4;
}

/* landing hero headline */
.display-xl {
  font-family: var(--font-display);
  font-size: var(--display-xl);
  font-weight: 780;
  font-stretch: 125%;
  line-height: 1;
  letter-spacing: -0.028em;
}

/* narrow phones: pull the width in so long words still fit at 320px */
@media not all and (min-width: 30em) {
  h1,
  .display-l,
  .display-xl {
    font-stretch: 114%;
  }
}

p {
  margin: 0;
  text-wrap: pretty;
}

.lede {
  max-width: 32em;
  color: var(--ink-2);
  font-size: var(--text-lg);
  line-height: 1.45;
}

.small {
  font-size: var(--text-sm);
  line-height: 1.55;
}

.fine {
  color: var(--ink-3);
  font-size: var(--text-xs);
  line-height: 1.5;
}

strong,
b {
  font-weight: 650;
}

em,
i,
cite {
  font-style: italic; /* no italic file is shipped: browsers slant the upright, fine for the rare use */
}

small {
  font-size: var(--text-xs);
}

sup,
sub {
  position: relative;
  font-size: 0.72em;
  line-height: 0;
  vertical-align: baseline;
}

sup { top: -0.5em; }
sub { bottom: -0.25em; }

abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
}

blockquote {
  margin: 0;
  padding-left: var(--space-5);
  border-left: 2px solid var(--line-2);
  color: var(--ink);
  font-size: var(--text-lg);
  line-height: 1.5;
}

/* mono voice for literal machine values: hashes, prefixes, paths, keys, codes */
.mono,
code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-weight: 400;
  font-variant-ligatures: none;
}

.num {
  font-variant-numeric: tabular-nums;
}


/* 4  Layout ================================================================ */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-pad);
}

.section--surface {
  background-color: var(--surface);
  border-block: 1px solid var(--line);
}

.section-head {
  max-width: 44rem;
}

.section-head > * + * {
  margin-top: var(--space-4);
}

/* vertical rhythm: every child after the first gets the same gap */
.flow > * + * {
  margin-top: var(--flow-space, 1em);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-4));
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-3));
}

/* 12-column grid; spans apply from 64em (1024px), stacked below */
.grid-12 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6) var(--gutter);
}

@media (min-width: 64em) {
  .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .span-3 { grid-column: span 3; }
  .span-4 { grid-column: span 4; }
  .span-5 { grid-column: span 5; }
  .span-6 { grid-column: span 6; }
  .span-7 { grid-column: span 7; }
  .span-8 { grid-column: span 8; }
  .span-9 { grid-column: span 9; }
  .span-12 { grid-column: 1 / -1; }
  .start-2 { grid-column-start: 2; }
  .start-6 { grid-column-start: 6; }
  .start-7 { grid-column-start: 7; }
  .start-8 { grid-column-start: 8; }
}

/* equal columns: 1 on phones, 2 from 40em, 3/4 from 64em */
.cols-2,
.cols-3,
.cols-4 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cols-gap, var(--space-5));
}

@media (min-width: 40em) {
  .cols-2,
  .cols-3,
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
  .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* 5  Header + navigation =================================================== */

.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 100;
  padding: 0.625rem 1rem;
  border-radius: var(--r-md);
  background: var(--signal);
  color: var(--on-signal);
  font-weight: 650;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  outline: 2px solid var(--on-signal);
  outline-offset: 2px;
}

/* separate rules: an engine without :focus-visible drops a whole selector list that names it */
.skip-link:focus-visible {
  transform: none;
  outline: 2px solid var(--on-signal);
  outline-offset: 2px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--paper);
  border-bottom: 1px solid var(--line);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--header-h);
}

.site-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__list a {
  display: flex;
  align-items: center;
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-weight: 520;
  text-decoration: none;
}

.site-nav__list a:hover,
.site-nav__list a[aria-current] {
  color: var(--ink);
}

.site-header__tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

/* square icon buttons: theme toggle, menu, dialog close */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink-2);
  transition: background-color 0.12s ease, color 0.12s ease;
}

.icon-btn:hover {
  background-color: var(--paper-2);
  color: var(--ink);
}

.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* theme toggle: moon while the effective theme is light, sun while dark */
.theme-toggle .icon--sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon--sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon--moon { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon--sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon--moon { display: none; }
}

/* controls that need JS stay out of the no-JS page (theme follows the OS there) */
:root:not(.has-js) .theme-toggle,
:root:not(.has-js) .menu-toggle {
  display: none;
}

/* in the DOM the button precedes the panel it controls (Tab and screen-reader order);
   order moves it to the right edge of the bar */
.menu-toggle {
  order: 10;
  padding-inline: var(--space-3);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
}

.menu-toggle .icon--close { display: none; }
.menu-toggle[aria-expanded="true"] .icon--menu { display: none; }
.menu-toggle[aria-expanded="true"] .icon--close { display: block; }

.site-nav__extra {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

/* desktop: inline nav (gaps tighten between 1024 and 1200 so everything fits) */
@media (min-width: 64em) {
  .site-header__bar { gap: clamp(1.5rem, -4rem + 7.4vw, 3rem); }
  .site-nav__list { display: flex; gap: clamp(1.125rem, -0.5rem + 2.6vw, 2rem); }
  .site-nav__list a {
    position: relative;
    min-height: var(--header-h);
  }
  .site-nav__list a[aria-current]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: var(--signal);
  }
  /* links fill the bar height; the focus ring hugs the label instead */
  .site-nav__list a:focus-visible { outline: none; }
  .site-nav__list a:focus-visible::before {
    content: "";
    position: absolute;
    inset: 0.9rem -0.4rem;
    border: 2px solid var(--focus);
    border-radius: var(--r-sm);
  }
  .site-nav__extra,
  .menu-toggle { display: none !important; }
}

/* below 64em: the nav becomes a drop-down panel (JS) or a wrapped row (no JS) */
@media not all and (min-width: 64em) {
  .site-header { --panel-pad: var(--gutter); }
  .site-header__bar { position: relative; flex-wrap: wrap; column-gap: var(--space-3); }
  .site-header__tools { gap: var(--space-1); }

  .has-js .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 1px;
    padding: var(--space-2) var(--panel-pad) var(--space-6);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    background-color: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-pop);
  }
  .has-js .site-header.is-open .site-nav { display: block; }
  .has-js .site-nav__list a {
    min-height: 3.25rem;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: var(--text-md);
    font-weight: 560;
  }

  :root:not(.has-js) .site-nav {
    order: 20;
    flex-basis: 100%;
    padding-bottom: var(--space-3);
  }
  :root:not(.has-js) .site-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-5);
  }
  :root:not(.has-js) .site-nav__list a { min-height: 2.75rem; }

  .has-js .site-nav__list a[aria-current] {
    box-shadow: inset 3px 0 var(--signal);
    padding-left: var(--space-3);
  }
  /* scrim under the open panel; a click on it lands on the header, which site.js treats as outside */
  .has-js .site-header.is-open::after {
    content: "";
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: -1;
    background-color: var(--backdrop);
  }
}

/* below 40em the CTA lives in the menu panel, so the bar stays one row (with the "Menu"
   label back from 30em it would wrap between 480 and 560px); doubled class beats .btn's display */
@media not all and (min-width: 40em) {
  .site-header__cta.site-header__cta { display: none; }
}

@media not all and (min-width: 30em) {
  .menu-toggle { padding-inline: 0; }
  /* icon-only on narrow phones; the label stays as the accessible name */
  .menu-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}


/* 6  Reference pages: layout, section nav, page head =======================
   <div class="doc container"> <nav class="refnav"> + <main class="doc__main">  */

.doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-6);
  padding-top: var(--space-5);
  padding-bottom: var(--space-9);
}

.doc__main {
  min-width: 0;
}

.refnav__title {
  margin: 0 0 var(--space-2);
  color: var(--ink-3);
  font-size: var(--text-xs);
  font-weight: 600;
}

.refnav__list,
.refnav__toc {
  margin: 0;
  padding: 0;
  list-style: none;
}

.refnav a {
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-weight: 520;
  text-decoration: none;
}

.refnav a:hover {
  color: var(--ink);
}

.refnav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 650;
}

/* the rail scrolls, so its rings are drawn inside the link box */
.refnav a:focus-visible {
  outline-offset: -2px;
  border-radius: var(--r-sm);
}

/* phones and tablets: a wrapped row; the current page carries an amber pointer */
@media not all and (min-width: 64em) {
  .refnav {
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--line);
  }
  .refnav__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .refnav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-5);
  }
  .refnav__list > li > a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    min-width: 2.75rem;
    position: relative;
  }
  .refnav__list > li > a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.3rem;
    height: 3px;
    background: var(--signal);
  }
  .refnav__toc { display: none; }
}

/* desktop: a sticky rail drawn as an instrument tape: ticks on a scale line,
   the current page marked by the amber pointer */
@media (min-width: 64em) {
  .doc {
    grid-template-columns: 12.5rem minmax(0, 1fr);
    column-gap: clamp(3rem, 1rem + 5vw, 6.5rem);
    padding-top: var(--space-8);
    padding-bottom: var(--space-9);
  }
  .refnav {
    position: sticky;
    top: calc(var(--header-h) + var(--space-8));
    align-self: start;
    max-height: calc(100vh - var(--header-h) - var(--space-9));
    overflow-y: auto;
    padding-top: 0.25rem;
  }
  .refnav__title { margin-bottom: var(--space-3); }
  .refnav__list { border-left: 1px solid var(--line-2); }
  .refnav__list > li > a {
    position: relative;
    display: block;
    padding: 0.4375rem 0 0.4375rem 1.125rem;
    line-height: 1.35;
  }
  .refnav__list > li > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 0.4375rem;
    height: 1px;
    background: var(--line-2);
  }
  .refnav__list > li > a[aria-current="page"]::before {
    left: -2px;
    width: 0.875rem;
    height: 3px;
    margin-top: -1px;
    background: var(--signal);
  }
  .refnav__toc {
    margin: 0 0 var(--space-2);
    padding-left: 1.125rem;
  }
  .refnav__toc a {
    display: block;
    padding: 0.25rem 0;
    color: var(--ink-3);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.4;
  }
  .refnav__toc a:hover { color: var(--ink); }
}

.page-head {
  max-width: var(--measure-wide);
  margin-bottom: var(--space-7);
}

.page-head > .lede {
  margin-top: var(--space-4);
}

@media (min-width: 64em) {
  .page-head { margin-bottom: var(--space-8); }
  .page-head > .lede { margin-top: var(--space-5); }
}

/* prose: running text at the reading measure; code, tables and panels may run wider */
.prose {
  max-width: var(--measure-wide);
}

.prose > * + *,
.prose > section > * + * {
  margin-top: var(--space-4);
}

.prose > * + section,
.prose > section + *,
.prose > * + h2 {
  margin-top: var(--space-8);
}

/* the section-scoped selectors restate each rule so it outranks ".prose > section > * + *" */
.prose :where(h2, h3, h4) + *,
.prose > section > :where(h2, h3, h4) + * {
  margin-top: var(--space-3);
}

.prose :where(* + h3),
.prose > section > * + h3 {
  margin-top: var(--space-6);
}

.prose :where(* + h4),
.prose > section > * + h4 {
  margin-top: var(--space-5);
}

.prose :where(p, ul, ol, dl:not(.kv):not(.readout), blockquote, h2, h3, h4) {
  max-width: var(--measure);
}

/* plain lists only: component lists (.checklist, .steps, .status-list ...) keep their own spacing */
.prose :where(ul:not([class]), ol:not([class])) {
  padding-left: 1.25rem;
}

.prose :where(ul:not([class]), ol:not([class])) > li + li {
  margin-top: var(--space-2);
}

.prose :where(li)::marker {
  color: var(--ink-3);
}

.prose :where(ol > li)::marker {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.prose :where(li) > :where(ul, ol) {
  margin-top: var(--space-2);
}

/* a heading reached through its anchor gets the same amber pointer as the rail */
@media (min-width: 64em) {
  .prose :where(h2, h3):target {
    position: relative;
  }
  .prose :where(h2, h3):target::before {
    content: "";
    position: absolute;
    left: -1.75rem;
    top: 0.55em;
    width: 0.875rem;
    height: 3px;
    background: var(--signal);
  }
}


/* 7  Buttons + links ======================================================= */

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--link-line);
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* a quiet link: underline appears on hover (use for secondary UI links only) */
.link-quiet {
  color: var(--ink-2);
  text-decoration-color: transparent;
}

.link-quiet:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0.5rem 1.125rem;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 620;
  font-stretch: 104%;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.btn:active {
  transform: translateY(1px);
}

/* primary: amber fill, dark ink text (9.7:1 in both themes) */
.btn--primary {
  background: var(--signal);
  color: var(--on-signal);
}

.btn--primary:hover {
  background: var(--signal-hover);
}

/* secondary: solid ink (inverts with the theme) */
.btn--secondary {
  background: var(--ink);
  color: var(--paper);
}

.btn--secondary:hover {
  background: var(--ink-2);
}

/* dark theme: a softer fill (11:1 with its text) so it never outshines the amber primary */
:root[data-theme="dark"] .btn--secondary:not([disabled]):not([aria-disabled="true"]) { background: #BCCAD0; color: #0B1419; }
:root[data-theme="dark"] .btn--secondary:not([disabled]):not([aria-disabled="true"]):hover { background: #D3DDE1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn--secondary:not([disabled]):not([aria-disabled="true"]) { background: #BCCAD0; color: #0B1419; }
  :root:not([data-theme="light"]) .btn--secondary:not([disabled]):not([aria-disabled="true"]):hover { background: #D3DDE1; }
}

/* quiet: outlined, for the third action or on busy surfaces */
.btn--quiet {
  border-color: var(--field);
  color: var(--ink);
}

.btn--quiet:hover {
  border-color: var(--ink);
  background: var(--surface);
}

/* link-styled button: an action that reads as text */
.btn--link {
  min-height: 2.75rem;
  padding-inline: 0;
  color: var(--ink);
  font-weight: 560;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--link-line);
  text-underline-offset: 0.2em;
}

.btn--link:hover {
  text-decoration-thickness: 2px;
}

.btn--sm {
  min-height: 2.5rem;
  padding: 0.375rem 0.875rem;
  font-size: var(--text-sm);
}

.btn--lg {
  min-height: 3.25rem;
  padding: 0.75rem 1.5rem;
  font-size: var(--text-md);
}

.btn--block {
  width: 100%;
}

/* states come after the variants so a variant's :hover cannot repaint them */
/* unavailable: neutral in every variant */
.btn[disabled],
.btn[aria-disabled="true"] {
  border-color: var(--line-2);
  background: var(--paper-2);
  color: var(--ink-3);
  cursor: not-allowed;
  transform: none;
}

/* working (e.g. "Verifying"): keeps its colour, the label says what is happening,
   and it ignores further clicks so a form cannot be sent twice */
.btn[aria-busy="true"] {
  cursor: progress;
  pointer-events: none;
}

@media (pointer: coarse) {
  .btn--sm { min-height: 2.75rem; }
}

/* small mono chips: sample values a visitor can click (demo passwords) */
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.3;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

.chip:hover {
  border-color: var(--ink-3);
}

.chip[aria-pressed="true"] {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

@media (pointer: coarse) {
  .chip { min-height: 2.75rem; }
}


/* 8  Forms ================================================================= */

.field {
  display: grid;
  gap: var(--space-2);
}

.field__label,
label.field__label {
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.35;
}

.field__optional {
  color: var(--ink-3);
  font-weight: 450;
}

.field__hint {
  color: var(--ink-3);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.input,
.select,
.textarea {
  display: block;
  width: 100%;
  min-height: 2.875rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--field);
  border-radius: var(--r-md);
  background-color: var(--surface);
  color: var(--ink);
  font-size: 1rem;            /* 16px: no zoom-on-focus in iOS Safari */
  line-height: 1.4;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--ink-3);
  opacity: 1;
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--ink-2);
}

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  border-color: var(--ink);
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--alert);
  box-shadow: inset 0 0 0 1px var(--alert);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
  background-color: var(--paper-2);
  color: var(--ink-3);
  cursor: not-allowed;
}

.textarea {
  min-height: 7rem;
  resize: vertical;
}

.select {
  padding-right: 2.5rem;
  appearance: none;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
}

/* machine-value input: the demo password field, keys */
.input--mono {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
}

/* one-time code: six digits, mono, spaced like a readout */
.input--code {
  max-width: 15rem;
  padding-inline: 0.75rem 0.25rem;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.45em;
  text-align: center;
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  color: var(--alert);
  font-size: var(--text-sm);
  font-weight: 560;
  line-height: 1.4;
}

.field__error::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.1em;
  background-color: currentColor;
  -webkit-mask: var(--icon-alert) center / contain no-repeat;
  mask: var(--icon-alert) center / contain no-repeat;
}

/* email + button on one row, stacked on phones */
.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: 34rem;
}

.inline-form > .input {
  flex: 1 1 14rem;
  width: auto;
}

.inline-form > .btn {
  flex: 0 0 auto;
}

@media not all and (min-width: 30em) {
  .inline-form > .btn { flex-basis: 100%; }
}


/* 9  Tags, state dots, checklists, steps ===================================
   Capability tags carry a maturity dial: empty (planned), half (in progress),
   three quarters (early access), full (live). Shape, not colour, carries it. */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background-color: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  font-stretch: 104%;
  line-height: 1.45;
  letter-spacing: 0.005em;
  white-space: nowrap;
  vertical-align: 0.1em;
  text-decoration: none;
}

.tag--live,
.tag--early,
.tag--progress,
.tag--planned {
  --dial: 0turn;
  padding-left: 0.375rem;
}

.tag--live::before,
.tag--early::before,
.tag--progress::before,
.tag--planned::before {
  content: "";
  flex: none;
  width: 0.6875rem;
  height: 0.6875rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: conic-gradient(currentColor var(--dial), transparent 0);
}

.tag--live { --dial: 1turn; color: var(--ink); }
.tag--early { --dial: 0.75turn; color: var(--ink); }
.tag--progress { --dial: 0.5turn; color: var(--ink-2); }
.tag--planned { --dial: 0turn; color: var(--ink-3); border-style: dashed; }

/* early access is where design partners come in: the dial runs in amber */
.tag--early::before {
  border-color: var(--signal-ink);
  background: conic-gradient(var(--signal) var(--dial), transparent 0);
}

a.tag:hover {
  border-color: var(--ink-3);
  color: var(--ink);
}

/* state dots: status page and live-probe indicators */
.state {
  display: inline-block;
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: var(--ink-3);
  vertical-align: 0.05em;
}

.state--ok {
  background-color: var(--clear);
  box-shadow: 0 0 0 3px var(--clear-wash);
}

.state--warn {
  background-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-wash);
}

.state--down {
  background-color: var(--alert);
  box-shadow: 0 0 0 3px var(--alert-wash);
}

.state--unknown {
  background-color: transparent;
  border: 1.5px solid var(--ink-3);
}

/* idle: the plain dot (named, so forced colours can tell it from "ok") */
.state--idle { background-color: var(--ink-3); }

/* probing: a quarter sweep, static */
.state--pending {
  border: 1.5px solid var(--ink-3);
  background: conic-gradient(var(--ink-3) 0.25turn, transparent 0);
}

/* checklists: SVG check drawn through a mask (the fonts have no check glyph) */
.checklist {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist > li {
  position: relative;
  padding-left: 1.75rem;
}

.checklist > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  top: calc((1lh - 1rem) / 2);
  width: 1rem;
  height: 1rem;
  background-color: var(--ink);
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
}

.checklist--cross > li::before {
  background-color: var(--ink-3);
  -webkit-mask-image: var(--icon-cross);
  mask-image: var(--icon-cross);
}

.checklist--inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

/* a real sequence (integration steps, roadmap order): numbered markers */
.steps {
  display: grid;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps > li {
  position: relative;
  padding-left: 3.25rem;
  counter-increment: step;
}

.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border: 1px solid var(--ink);
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 720;
  font-stretch: 118%;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.steps > li > * + * {
  margin-top: var(--space-2);
}


/* 10  Panels, notes, "to confirm" marks ==================================== */

.panel {
  padding: clamp(1.25rem, 0.9rem + 1.2vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background-color: var(--surface);
}

.panel > * + * {
  margin-top: var(--space-3);
}

.panel__label {
  color: var(--ink-3);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
}

/* the page abstract under the h1 ("Short version") */
.summary {
  font-size: 1.125rem;
  line-height: 1.55;
}

.summary strong {
  font-weight: 700;
}

/* side note; --signal for "read this twice", --alert for warnings */
.note {
  display: grid;
  grid-template-columns: 1.125rem minmax(0, 1fr);
  gap: var(--space-3);
  padding: 0.875rem 1.125rem;
  border-radius: var(--r-lg);
  background-color: var(--paper-2);
  color: var(--ink);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.note::before {
  content: "";
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.1em;
  background-color: var(--ink-2);
  -webkit-mask: var(--icon-info) center / contain no-repeat;
  mask: var(--icon-info) center / contain no-repeat;
}

.note > * {
  grid-column: 2;
}

.note > * + * {
  margin-top: var(--space-2);
}

.note--signal {
  background-color: var(--signal-wash);
}

.note--signal::before {
  background-color: var(--signal-ink);
}

.note--alert {
  background-color: var(--alert-wash);
}

.note--alert::before {
  background-color: var(--alert);
  -webkit-mask-image: var(--icon-alert);
  mask-image: var(--icon-alert);
}

/* the owner's placeholders: [confirm], [N], [provider] stay visible until filled */
.tbc {
  padding: 0.05em 0.3em;
  border: 1px dashed var(--signal-ink);
  border-radius: var(--r-xs);
  background-color: var(--signal-wash);
  color: var(--ink);
  font-size: 0.9em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}


/* 11  Code ================================================================
   Code and terminals sit on the always-dark scope surface in both themes.   */

:not(pre) > code {
  padding: 0.1em 0.35em;
  border-radius: var(--r-sm);
  background-color: var(--code-bg);
  color: var(--ink);
  font-size: 0.8125em;         /* Martian Mono is wide and tall; this sits level with Archivo */
  overflow-wrap: break-word;   /* long hashes wrap only when they would overflow */
}

pre {
  margin: 0;
  padding: 1.125rem 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--scope-grid);
  border-radius: var(--r-lg);
  background-color: var(--scope);
  color: var(--scope-text);
  font-size: 0.8125rem;
  line-height: 1.75;
  tab-size: 2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

pre code {
  font-size: inherit;
}

pre:focus-visible {
  outline-color: var(--scope-signal);
  outline-offset: -3px;
}

/* code with a caption strip (file name, request, response) */
.code-block {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--scope-grid);
  border-radius: var(--r-lg);
  background-color: var(--scope);
  color: var(--scope-text);
}

.code-block > pre {
  border: 0;
  border-radius: 0;
}

.code-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  min-height: 2.5rem;
  padding: 0.4375rem 1.25rem;
  border-bottom: 1px solid var(--scope-grid);
  background-color: var(--scope-2);
  color: var(--scope-dim);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.code-block__head .mono,
.code-block__head code {
  color: var(--scope-text);
  font-size: 0.75rem;
  background: none;
  padding: 0;
}

.code-block__meta {
  margin-left: auto;
}

/* any always-dark instrument panel that is not a code block (demo output) */
.scope-panel {
  border: 1px solid var(--scope-grid);
  border-radius: var(--r-lg);
  background-color: var(--scope);
  color: var(--scope-text);
}

/* syntax tokens, only meaningful on scope surfaces */
:where(pre, .code-block, .scope-panel, .theme-scope) .tc { color: var(--tok-comment); }
:where(pre, .code-block, .scope-panel, .theme-scope) .tk { color: var(--tok-keyword); }
:where(pre, .code-block, .scope-panel, .theme-scope) .ts { color: var(--tok-string); }
:where(pre, .code-block, .scope-panel, .theme-scope) .tf { color: var(--tok-function); }
:where(pre, .code-block, .scope-panel, .theme-scope) .tn { color: var(--tok-number); }


/* 12  Tables, key-value lists, readouts ==================================== */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

caption {
  padding-bottom: var(--space-3);
  color: var(--ink-3);
  font-size: var(--text-xs);
  text-align: left;
}

th,
td {
  padding: 0.75rem 1.25rem 0.75rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  text-align: left;
  vertical-align: top;
}

th:last-child,
td:last-child {
  padding-right: 0;
}

thead th {
  padding-top: 0;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  font-size: var(--text-xs);
  font-weight: 650;
  vertical-align: bottom;
}

tbody th,
td:first-child {
  color: var(--ink);
  font-weight: 520;
  white-space: nowrap;
}

tbody th {
  font-size: inherit;
  text-align: left;
}

/* long first-column labels may wrap */
.table--wrap td:first-child,
.table--wrap tbody th {
  min-width: 9rem;
  white-space: normal;
}

td strong {
  color: var(--ink);
}

/* horizontal scroll for tables wider than a phone:
   <div class="table-scroll" role="region" aria-label="..." tabindex="0"><table>...</table></div> */
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll > table {
  min-width: 36rem;
}

.table-scroll:focus-visible {
  outline-offset: 4px;
}

/* key-value list: <dl class="kv"><div><dt/><dd/></div>...</dl> */
.kv {
  margin: 0;
  border-top: 1px solid var(--line);
}

.kv > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1) var(--space-5);
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--line);
}

.kv dt {
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 650;
  line-height: 1.5;
}

.kv dd {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.55;
  overflow-wrap: anywhere;   /* a long address or URL wraps instead of overflowing at 320px */
}

.kv dd > * + * {
  margin-top: var(--space-1);
}

/* the value itself (an address, a handle) reads in ink, the note after it in ink-2 */
.kv__value {
  color: var(--ink);
  font-weight: 560;
}

@media (min-width: 40em) {
  .kv > div { grid-template-columns: 10rem minmax(0, 1fr); }
  .kv--wide > div { grid-template-columns: 14rem minmax(0, 1fr); }
}

/* readout strip: page facts (updated, applies to, base URL) as label over value */
.readout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-7);
  margin: var(--space-6) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--line);
}

.readout > div {
  min-width: 0;
}

.readout dt {
  color: var(--ink-3);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.4;
}

.readout dd {
  margin: 0.125rem 0 0;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 560;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

.readout dd code {
  font-size: 0.8125rem;
}


/* 13  FAQ + dialog ========================================================= */

.faq {
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  position: relative;
  display: block;
  padding: 1.125rem 2.75rem 1.125rem 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 620;
  font-stretch: 104%;
  line-height: 1.4;
  letter-spacing: -0.005em;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  position: absolute;
  right: 0.25rem;
  top: 1.4rem;
  width: 1rem;
  height: 1rem;
  background-color: var(--ink-2);
  -webkit-mask: var(--icon-plus) center / contain no-repeat;
  mask: var(--icon-plus) center / contain no-repeat;
}

.faq details[open] > summary::after {
  -webkit-mask-image: var(--icon-minus);
  mask-image: var(--icon-minus);
}

.faq summary:hover::after {
  background-color: var(--ink);
}

.faq summary:focus-visible {
  outline-offset: 4px;
}

.faq__body {
  max-width: var(--measure);
  padding-bottom: var(--space-5);
  color: var(--ink-2);
}

.faq__body > * + * {
  margin-top: var(--space-3);
}

/* native <dialog>: showModal() gives focus trap, Esc and inert background. Engines that know
   <dialog> but keep it behind a flag (Safari before 15.4) have no rule hiding a closed one. */
dialog:not([open]) { display: none; }

.dialog {
  width: min(30rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background-color: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-modal);
}

/* ::backdrop inherits custom properties only in newer engines (Chrome 122, Firefox 120, Safari
   17.4): before that var(--backdrop) is unset there, and the fallback applies */
.dialog::backdrop {
  background-color: var(--backdrop, rgba(7, 18, 24, 0.62));
}

.dialog {
  --dialog-pad: clamp(1.25rem, 0.5rem + 3vw, 2rem);
}

.dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) 0 var(--dialog-pad);
}

.dialog__body {
  padding: var(--space-3) var(--dialog-pad) var(--dialog-pad);
}

.dialog__body > * + * {
  margin-top: var(--space-4);
}

.dialog__title {
  font-size: var(--text-lg);
  font-stretch: 112%;
}

.dialog__close {
  margin-left: auto;
}

:root:has(.dialog[open]) {
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .dialog[open] {
    animation: dialog-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .dialog[open]::backdrop {
    animation: backdrop-in 0.18s ease-out;
  }
}

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(0.5rem) scale(0.985); }
}

@keyframes backdrop-in {
  from { opacity: 0; }
}


/* 14  Status rows ========================================================== */

.status-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

/* an instrument readout, not running text: it takes the wide measure, like tables do */
.prose .status-list {
  max-width: var(--measure-wide);
}

.status-row {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  grid-template-areas:
    "dot name"
    ". host"
    ". state";
  align-items: center;
  gap: 0.125rem var(--space-3);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.status-row > .state { grid-area: dot; justify-self: center; }

.status-row__name {
  grid-area: name;
  color: var(--ink);
  font-weight: 650;
}

.status-row__host {
  grid-area: host;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.status-row__state {
  grid-area: state;
  color: var(--ink-2);
  font-size: var(--text-sm);
}

@media (min-width: 48em) {
  .status-row {
    grid-template-columns: 1.25rem minmax(7rem, 10rem) auto minmax(0, 1fr);
    grid-template-areas: "dot name host state";
    gap: var(--space-4);
  }
  .status-row__host { white-space: nowrap; }
  .status-row__state { text-align: right; }
}


/* 15  Footer =============================================================== */

.site-footer {
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--text-sm);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-7) var(--gutter);
  padding-block: var(--space-8) var(--space-7);
}

.site-footer__about {
  max-width: 24rem;
}

.site-footer__about > * + * {
  margin-top: var(--space-4);
}

.site-footer__about p {
  line-height: 1.55;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--gutter);
}

.site-footer__heading {
  margin-bottom: var(--space-3);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 650;
  font-stretch: 100%;
  letter-spacing: 0;
}

.site-footer ul {
  display: grid;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__nav a,
.site-footer__channels a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  color: var(--ink-2);
  text-decoration-color: transparent;
}

.site-footer__nav a:hover,
.site-footer__channels a:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

.site-footer__channels {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0 var(--space-5) !important;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  padding-block: var(--space-5) var(--space-6);
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: var(--text-xs);
}

@media (min-width: 48em) {
  .site-footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
  .site-footer__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding-block: var(--space-8) var(--space-7);
  }
  .site-footer__about { grid-column: span 4; }
  .site-footer__nav { grid-column: 6 / -1; }
}

@media (pointer: coarse) {
  .site-footer__nav a,
  .site-footer__channels a { min-height: 2.75rem; }
}


/* 16  Utilities, motion, forced colours, print ============================= */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* theme subtrees paint their own paper; last in the file so that
   class="panel theme-scope" or "section theme-scope" takes the theme's paper */
.theme-light,
.theme-dark,
.theme-scope {
  background-color: var(--paper);
  color: var(--ink);
}

.nowrap { white-space: nowrap; }
.ink { color: var(--ink); }
.ink-2 { color: var(--ink-2); }
.ink-3 { color: var(--ink-3); }
.text-alert { color: var(--alert); }
.text-clear { color: var(--clear); }
.text-signal { color: var(--signal-ink); }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    /* none at all, not a 0.01 ms one: a transition of every property (the default "all") draws a
       frame of each change's start state, and a radar tag placed by script then briefly overhangs
       the page, which mobile Chromium keeps as a wider layout */
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .tag::before,
  .state,
  .checklist > li::before,
  .note::before,
  .field__error::before,
  .faq summary::after {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
  .tag--live::before,
  .tag--early::before,
  .tag--progress::before,
  .tag--planned::before {
    background: conic-gradient(CanvasText var(--dial), transparent 0);
    border-color: CanvasText;
  }
  /* the hollow and the probing dot must not turn into the filled one */
  .state--unknown {
    background-color: transparent;
    border-color: CanvasText;
  }
  .state--pending {
    background: conic-gradient(CanvasText 0.25turn, transparent 0);
    border-color: CanvasText;
  }
  .state--idle {
    background-color: transparent;
    border: 1.5px dotted CanvasText;
  }
  /* as specific as the hover rule it replaces */
  .faq summary:hover::after { background-color: CanvasText; }
  .btn--primary,
  .skip-link { border-color: ButtonText; }
}

@media print {
  :root,
  :root[data-theme],
  .theme-dark,
  .theme-scope {
    color-scheme: light;
    --paper: #fff;
    --paper-2: #f2f2f2;
    --surface: #fff;
    --ink: #000;
    --ink-2: #222;
    --ink-3: #444;
    --line: #bbb;
    --line-2: #999;
    --signal-wash: #fff;
    --code-bg: #f0f0f0;
    --scope: #fff;
    --scope-2: #f4f4f4;
    --scope-grid: #999;
    --scope-text: #000;
    --scope-dim: #444;
    --tok-comment: #555;
    --tok-keyword: #000;
    --tok-string: #000;
    --tok-function: #000;
    --tok-number: #000;
  }
  body { font-size: 10.5pt; }
  .site-header,
  .refnav,
  .toc,
  .site-footer__nav,
  .skip-link,
  .theme-toggle,
  .menu-toggle { display: none !important; }
  /* its fill doesn't print, and white text on white paper would be all that's left */
  .btn--secondary { color: var(--ink); border-color: var(--ink); background: none; }
  .doc { display: block; padding: 0; }
  a[href^="http"]:not(.btn)::after {
    content: " (" attr(href) ")";
    color: #444;
    font-size: 0.85em;
    overflow-wrap: anywhere;
  }
  pre { white-space: pre-wrap; }
  table,
  .panel,
  .note { break-inside: avoid; }
  /* a code sample can be longer than a page: it may break, but never away from its caption */
  .code-block__head { break-after: avoid; }
  h2,
  h3 { break-after: avoid; }
}


/* 17  Brand ================================================================
   Merged verbatim from brand/snippets/brand.css (owned by the brand work;
   update it there and paste it here again). Markup: brand/snippets/brand-mark.html */

/* PasswordRadar brand lockup: header and footer.
   Merge into site.css as is. Needs the theme tokens from the brief (--ink, --scope, --scope-signal)
   and the Archivo @font-face (the name inherits the page's font-family, so it only sets the cut).
   Markup: brand/snippets/brand-mark.html. Sizes are the reference lockup: mark 28px, gap 10px, name 20px. */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  flex: none;
  color: var(--ink);
  text-decoration: none;
}

.brand-mark {
  display: block;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
}

/* The scope disc is dark in both themes, like every instrument panel on the site. */
.brand-mark .mark-disc { fill: var(--scope); }
.brand-mark .mark-sweep,
.brand-mark .mark-blip { fill: var(--scope-signal); }
/* Phosphor ramp: the sweep's afterglow, two steps down from --scope-signal. Mark-only colours. */
.brand-mark .mark-trail-near { fill: #A06A14; }
.brand-mark .mark-trail-far { fill: #46310F; }
/* Bezel: invisible on light pages, gives the disc its edge on dark ones. */
.brand-mark .mark-rim { fill: none; stroke: none; stroke-width: 1.25; }

.brand-name {
  font-weight: 700;
  font-stretch: 112.5%;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-mark .mark-rim { stroke: #2B4555; }
}
:root[data-theme="dark"] .brand-mark .mark-rim { stroke: #2B4555; }

/* Narrow phones: keep the lockup inside a 320px header next to the menu button. */
@media (max-width: 22.5em) {
  .brand { gap: 0.5rem; }
  .brand-mark { width: 1.625rem; height: 1.625rem; }
  .brand-name { font-size: 1.125rem; }
}

/* site additions to the lockup: header touch target, the display fallback
   while fonts load, and a smaller lockup so a 320px header stays one row */
.site-header .brand {
  min-height: 2.75rem;
}

.brand-name {
  font-family: var(--font-display);
}

@media (max-width: 23.75em) {
  .site-header .brand { gap: 0.5rem; }
  .site-header .brand-mark { width: 1.5rem; height: 1.5rem; }
  .site-header .brand-name { font-size: 1rem; }
}


/* 20  Additions after the pre-launch reviews ================================= */

/* UX-26: no sideways jump when a dialog locks the page scroll (classic scrollbars) */
html { scrollbar-gutter: stable; }

/* UX-30: under a coarse pointer, standalone links in page heads and the footer brand
   get the 44px floor the design system promises */
@media (pointer: coarse) {
  .readout a,
  .site-footer .brand {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
}

/* UI-03: a wide table that stacks on phones instead of scrolling. Markup:
   <div class="table-scroll" ...><table class="table--stack"> with data-label on each
   body cell after the first ("What it is", "Status", ...). */
@media not all and (min-width: 40em) {
  .table-scroll:has(> .table--stack) { overflow: visible; }
  .table-scroll > .table--stack { min-width: 0; }
  .table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .table--stack,
  .table--stack tbody,
  .table--stack tr { display: block; }
  .table--stack tr {
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--line);
  }
  .table--stack :is(th, td) {
    display: block;
    padding: 0;
    border: 0;
    white-space: normal;
  }
  .table--stack :is(th, td) + :is(th, td) { margin-top: var(--space-2); }
  .table--stack td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--ink-3);
    font-size: var(--text-xs);
    font-weight: 600;
  }
}

/* UX-17: the reference rail's "on this page" list, repeated at the top of main for
   narrow screens. Markup: <details class="toc"><summary>On this page</summary><ul>…</ul></details> */
.toc { display: none; }
@media not all and (min-width: 64em) {
  .toc {
    display: block;
    margin-block: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
  }
  .toc > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 2.75rem;
    padding-inline: var(--space-4);
    cursor: pointer;
    font-weight: 600;
    list-style: none;
  }
  .toc > summary::-webkit-details-marker { display: none; }
  /* display:flex drops the native marker, so draw a chevron that turns when open */
  .toc > summary::after {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
  }
  .toc[open] > summary::after { transform: translateY(25%) rotate(-135deg); }
  .toc ul {
    margin: 0;
    padding: 0 var(--space-4) var(--space-3);
    list-style: none;
  }
  .toc a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
}

/* UI-22: a code block wider than its panel fades at the right edge until scrolled to the end
   (site.js toggles .is-scrollable); the fade lifts while the block has keyboard focus, so the
   ring stays whole */
pre.is-scrollable:not(:focus-visible) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
}

/* 320px with a classic scrollbar leaves 305px: a tighter header keeps the menu button on the
   brand's row (WCAG 1.4.10 reflow at 400% zoom) */
@media (max-width: 21.25em) {
  .site-header__bar { column-gap: var(--space-2); }
  .site-header .brand { gap: 0.375rem; }
  .site-header .brand-mark { width: 1.375rem; height: 1.375rem; }
  .site-header .brand-name { font-size: 0.9375rem; }
}

/* no JS: the nav wraps into rows under the bar, so the header scrolls away instead of sticking,
   and anchor targets need no header allowance */
:root:not(.has-js) { scroll-padding-top: 0.75rem; }
:root:not(.has-js) .site-header { position: relative; }

/* Windows high contrast (forced colours) drops backgrounds and shadows, which is how the current
   page is marked: redraw the markers in system colours */
@media (forced-colors: active) {
  /* the same selectors as the markers they redraw, so these win by coming later */
  .site-nav__list a[aria-current]::after,
  .refnav__list > li > a[aria-current="page"]::before,
  .refnav__list > li > a[aria-current="page"]::after {
    forced-color-adjust: none;
    background: Highlight;
  }
}
/* the open mobile menu marks the current link with a side bar (box-shadow, dropped here) */
@media (forced-colors: active) and (max-width: 63.999em) {
  .has-js .site-nav__list a[aria-current] { border-left: 3px solid Highlight; }
}