/* Wise Paper core — generated by scripts/build.mjs from the wise-paper repo. Do not edit. */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("fonts/newsreader-latin-f94a697b16502ea4c1ea76b541b93b30.woff2?vsn=d") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 300 500; font-display: swap; src: url("fonts/newsreader-italic-latin-e97067eb043bb07b715605f43c3ecdb3.woff2?vsn=d") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-79936b18df9f734fb6b0a256b20d36b4.woff2?vsn=d") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("fonts/ibm-plex-sans-latin-d28498895ed7050c37c94ddd026a4670.woff2?vsn=d") format("woff2"); }

:root, [data-theme="day"] { color-scheme: light;
  --paper: #f7f5f1;
  --glow-sky: #e3ecff;
  --glow-sand: #f3ebdf;
  --surface: #fdfbf7;
  --tint: #ebe7da;
  --hairline: #e0d9cc;
  --field: #8a8478;
  --muted: #6e6a60;
  --ink-2: #3c3930;
  --ink: #1a1815;
  --accent-soft: #e3e9f0;
  --accent: #5a7289;
  --accent-hover: #4d6479;
  --on-accent: var(--paper);
  --orange-soft: #f6e9d5;
  --orange: #ff8205;
  --orange-deep: #a65300;
  --on-orange: #1a1815;
  --red-soft: #f5dde1;
  --red: #a72144;
}
@media screen {
[data-theme="night"] { color-scheme: dark;
  --paper: #171614;
  --glow-sky: #1a212c;
  --glow-sand: #231f1a;
  --surface: #201e1b;
  --tint: #2b2925;
  --hairline: #33302b;
  --field: #716b61;
  --muted: #a29b8e;
  --ink-2: #d3ccbe;
  --ink: #efe9dd;
  --accent-soft: #1e2934;
  --accent: #95abc7;
  --accent-hover: #a8bcd4;
  --orange-soft: #3a2a18;
  --orange: #ff8205;
  --orange-deep: #ff8205;
  --on-orange: #171614;
  --red-soft: #3d1d24;
  --red: #ec7a8c;
}
}
:root {
  --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --measure: 38rem;
  --width-page: 72rem;
  --control: 36px;
  --control-sm: 28px;
  --bp-sm: 40rem;
  --bp-lg: 64rem;
  --flash-width: 24rem;
  --width-focus: 24rem;
}

/* Wise Paper core — plain CSS on the token variables, which the build writes at the top of dist/wise-paper.css.
   Themes: the tokens switch on [data-theme]; set it on <html> (see README, Day and night).
   Breakpoints repeat bp-sm (40rem) and bp-lg (64rem): media queries can't read variables.
   Product extensions (WiseDrive, Website, Chat) load after this file and never redefine it. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background-color: var(--paper); color: var(--ink-2); font-family: var(--font-serif); font-size: 18px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
body {
  min-height: 100vh;
  background-image:
    radial-gradient(1200px 600px at 10% -10%, var(--glow-sky) 0%, transparent 55%),
    radial-gradient(900px 500px at 100% 0%, var(--glow-sand) 0%, transparent 50%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}
::selection { background: var(--accent-soft); color: var(--ink); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--ink); font-weight: 400; margin: 0; text-wrap: balance; }
a { color: inherit; text-decoration: none; transition: color 140ms cubic-bezier(0.25, 1, 0.5, 1), text-decoration-color 140ms cubic-bezier(0.25, 1, 0.5, 1); }
code, pre, kbd, samp { font-family: var(--font-mono); }
mark { background: var(--orange-soft); color: inherit; border-radius: var(--radius-xs); padding-inline: 0.1em; }

/* ---- page ---- */
.ww-page { max-width: var(--width-page); margin-inline: auto; padding-inline: var(--space-5); }


/* Logo: two lockup files, swapped by data-theme only (same switch as the colours). The mark works on both. */
.ww-logo { display: block; height: 28px; width: auto; }
.ww-logo-night { display: none; }
/* Screen only, like the night colours: print is always day, so it takes the day lockup. */
@media screen { [data-theme="night"] .ww-logo-day { display: none; } [data-theme="night"] .ww-logo-night { display: block; } }
.ww-mark { display: block; width: 24px; height: 24px; }
.ww-mark-sm { display: none; }
/* Below bp-sm, a logo link that also holds an img.ww-mark.ww-mark-sm shows only the mark. */

/* ---- shell: the bar at the top of every product ---- */
/* header.ww-shell > a.ww-skip + .ww-page > .ww-shell-brand (logo link, optional context chip, optional nav.ww-crumbs),
   optional nav.ww-nav, then .ww-shell-end (optional actions, the theme toggle, optional account). Regions are left out,
   never reordered, so the theme toggle and the account sit in the same corner in every product. */
.ww-shell { position: relative; font: 400 14px/20px var(--font-sans); color: var(--muted); }
.ww-shell-ruled { border-bottom: 1px solid var(--hairline); }
.ww-shell > .ww-page { display: flex; align-items: center; gap: var(--space-3) var(--space-5); padding-block: var(--space-4); }
.ww-shell-brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.ww-shell-brand > a:first-child { flex: none; }
.ww-shell-end { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; flex: none; }
.ww-nav + .ww-shell-end { margin-left: 0; }
.ww-shell a:not(.ww-btn, .ww-chip):hover { color: var(--ink); }
.ww-skip { position: absolute; left: var(--space-4); top: var(--space-2); z-index: 60; padding: var(--space-1) var(--space-3); border: 1px solid var(--field); border-radius: var(--radius-xs); background: var(--surface); font: 500 14px/20px var(--font-sans); color: var(--ink); }
.ww-skip:not(:focus) { width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Breadcrumb: nav.ww-crumbs > ol > li, the last one aria-current. The separators are drawn, so markup holds only names. */
.ww-crumbs { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; white-space: nowrap; }
.ww-crumbs::before, .ww-crumbs li + li::before { content: "/"; color: var(--field); }
.ww-crumbs li + li::before { margin-right: var(--space-2); }
.ww-crumbs ol { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; list-style: none; }
.ww-crumbs li { flex: none; }
.ww-crumbs li:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ww-crumbs [aria-current] { color: var(--ink); font-weight: 500; }
/* Page links: the current page (or its section) is marked by weight and an accent line as well as colour. */
.ww-nav { display: flex; align-items: center; gap: var(--space-5); margin-left: auto; white-space: nowrap; }
.ww-nav a[aria-current] { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* Account: signed out, a plain "Sign in" link; signed in, button.ww-account (initials) opening div.ww-menu[popover]. No script. */
.ww-account { display: inline-grid; place-items: center; flex: none; width: var(--control-sm); height: var(--control-sm); padding: 0; border: 0; border-radius: var(--radius-xs); background: var(--accent-soft); color: var(--ink); font: 500 12px/16px var(--font-sans); letter-spacing: 0.04em; cursor: pointer; anchor-name: --ww-account; }
.ww-account:hover { background: var(--accent); color: var(--on-accent); }
.ww-menu { position: fixed; inset: auto var(--space-4) auto auto; top: calc(var(--control) + var(--space-5)); min-width: 14rem; max-width: calc(100vw - 2 * var(--space-4)); margin: 0; padding: var(--space-2) 0; border: 1px solid var(--field); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-2); font: 400 14px/20px var(--font-sans); }
@supports (position-anchor: --ww-account) { .ww-menu { position-anchor: --ww-account; top: anchor(bottom); right: anchor(right); left: auto; margin-top: var(--space-2); } }
.ww-menu-head { display: grid; padding: var(--space-2) var(--space-4) var(--space-3); border-bottom: 1px solid var(--hairline); margin-bottom: var(--space-2); }
.ww-menu-head strong { color: var(--ink); font-weight: 500; }
.ww-menu-head span { color: var(--muted); overflow-wrap: anywhere; }
.ww-menu :is(a, button) { display: block; width: 100%; padding: var(--space-2) var(--space-4); border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ww-menu :is(a, button):hover { background: var(--tint); color: var(--ink); }
.ww-menu [aria-current] { color: var(--ink); font-weight: 500; }
.ww-menu form { margin: 0; }
.ww-menu hr { margin: var(--space-2) 0; border: 0; border-top: 1px solid var(--hairline); }
/* Focus layout: sign-in, sign-out, errors. No shell header: the mark, one narrow column, and a foot with the theme toggle. */
.ww-focus { max-width: var(--width-focus); margin-inline: auto; padding: var(--space-9) var(--space-4) var(--space-7); }
.ww-focus > a:first-child { display: inline-block; margin-bottom: var(--space-6); }
.ww-focus > a:first-child .ww-mark { width: 34px; height: 34px; }
.ww-focus .ww-lede { margin-top: var(--space-3); font-size: 18px; }
.ww-focus .ww-form { margin-top: var(--space-6); }
.ww-focus-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-4); padding: var(--space-5) var(--space-4); font: 400 14px/20px var(--font-sans); color: var(--muted); }
.ww-focus-foot a:hover { color: var(--ink); }

/* ---- headings and labels ---- */
.ww-eyebrow { margin: 0 0 var(--space-2); font: 500 12px/16px var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ww-meta { font: 400 12px/16px var(--font-mono); letter-spacing: 0.04em; color: var(--muted); }
.ww-title, .ww-prose h1 { font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; }
/* The type scale's heading styles as classes, for headings outside .ww-prose (prose sizes its own). */
.ww-h2, .ww-prose h2 { font-size: 28px; line-height: 1.2; letter-spacing: -0.015em; }
.ww-h3, .ww-prose h3 { font-size: 22px; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; }
.ww-h4, .ww-prose h4 { font-size: 18px; line-height: 1.4; font-weight: 500; }
.ww-lede { margin: var(--space-4) 0 0; font-size: 22px; line-height: 1.45; color: var(--muted); }

/* ---- prose ---- */
.ww-prose { hyphens: auto; overflow-wrap: break-word; }
/* The measure caps each block, not the prose, so a table can use the whole column when it needs to. */
.ww-prose > * { max-width: var(--measure); }
/* hyphens only work when the page sets lang ("nl", "en"); Dutch compounds need them at this measure. Headings never break. */
.ww-prose :is(h1, h2, h3, h4) { hyphens: manual; }
/* Nor does code: a hyphen inside a path or command changes what it says, and copies wrong. */
.ww-prose :is(code, pre, kbd) { hyphens: manual; }
.ww-prose :is(p, li) { text-wrap: pretty; }
.ww-prose > * { margin: 0; }
.ww-prose > * + * { margin-top: 1em; }
.ww-prose h2 { margin-top: var(--space-7); }
.ww-prose h3 { margin-top: var(--space-6); }
.ww-prose h4 { margin-top: var(--space-5); }
.ww-prose :is(h1, h2, h3, h4) + * { margin-top: var(--space-3); }
.ww-prose h1 + * { margin-top: var(--space-5); }
/* Components that are links (a.ww-btn, a.ww-chip) keep their own styles inside prose. */
.ww-prose a:not(.ww-btn, .ww-chip) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--muted); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.ww-prose a:not(.ww-btn, .ww-chip):hover { color: var(--accent); text-decoration-color: var(--accent); }
.ww-prose strong { color: var(--ink); font-weight: 600; }
.ww-prose ul, .ww-prose ol { padding-left: 1.3em; }
.ww-prose li + li { margin-top: 0.3em; }
.ww-prose li::marker { color: var(--muted); }
/* Task lists: GitHub's classes, or a renderer's plain <li><input type="checkbox"> (goldmark) with none. */
.ww-prose :is(ul.contains-task-list, ul:has(> li > input[type="checkbox"]:first-child, > li > p:first-child > input[type="checkbox"]:first-child)) { list-style: none; padding-left: 0; }
.ww-prose li > :is(input, p:first-child > input)[type="checkbox"]:first-child { accent-color: var(--accent); width: 1em; height: 1em; margin: 0 var(--space-2) 0 0; vertical-align: -0.1em; }
.ww-prose blockquote { margin-inline: 0; padding-left: var(--space-4); border-left: 2px solid var(--hairline); color: var(--muted); font-style: italic; }
.ww-prose code { font-size: 0.85em; padding: 0.1em 0.3em; border-radius: var(--radius-xs); background: var(--tint); color: var(--ink); }
.ww-prose kbd { font-size: 0.8em; padding: 0.1em 0.4em; border: 1px solid var(--field); border-bottom-width: 2px; border-radius: var(--radius-xs); color: var(--ink); }
.ww-prose pre { padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); background: var(--tint); font-size: 16px; line-height: 1.55; overflow-x: auto; }
.ww-prose pre code { padding: 0; background: none; font-size: inherit; }
.ww-prose hr { border: 0; border-top: 1px solid var(--hairline); margin-block: var(--space-7); }
.ww-prose img { max-width: 100%; height: auto; }
.ww-prose > img, .ww-prose figure, .ww-prose pre.mermaid { display: block; padding: var(--space-4); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-sm); }
.ww-prose figure { margin-inline: 0; overflow-x: auto; }
.ww-prose figure img, .ww-prose figure svg, .ww-prose pre.mermaid svg { display: block; max-width: 100%; height: auto; margin-inline: auto; }
.ww-prose figcaption { margin-top: var(--space-3); font: 400 14px/20px var(--font-sans); color: var(--muted); }
.ww-prose pre.mermaid { font-family: var(--font-sans); overflow-x: auto; }
/* A table is as wide as its content needs, from the measure up to the whole column, and scrolls beyond that. */
.ww-prose > .ww-table { max-width: 100%; width: fit-content; min-width: min(100%, var(--measure)); }
.ww-prose .ww-table { overflow-x: auto; }
.ww-prose table { width: 100%; border-collapse: collapse; font: 400 14px/20px var(--font-sans); font-variant-numeric: tabular-nums; }
.ww-prose th { text-align: left; font-weight: 500; color: var(--ink); padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--field); }
.ww-prose td { padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.ww-prose :is(th, td) { hyphens: manual; }
.ww-prose td code { white-space: nowrap; }

/* ---- buttons ---- */
.ww-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control); padding: 0 var(--space-4); border-radius: var(--radius-xs); border: 1px solid var(--field); background: transparent; color: var(--ink); font: 500 14px/20px var(--font-sans); cursor: pointer; white-space: nowrap; transition: background-color 140ms cubic-bezier(0.25, 1, 0.5, 1), border-color 140ms cubic-bezier(0.25, 1, 0.5, 1), color 140ms cubic-bezier(0.25, 1, 0.5, 1); }
.ww-btn:hover { background: var(--surface); border-color: var(--ink-2); }
.ww-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ww-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.ww-btn-quiet { border-color: transparent; color: var(--muted); padding-inline: var(--space-2); }
.ww-btn-quiet:hover { background: transparent; border-color: transparent; color: var(--ink); }
.ww-btn-sm { height: var(--control-sm); padding: 0 var(--space-3); }
.ww-btn:disabled, .ww-btn[aria-disabled="true"] { background: transparent; border-color: var(--hairline); color: var(--muted); cursor: not-allowed; }
/* Theme toggle: a square quiet button holding both glyphs; it shows the theme it switches to, swapped by data-theme like the logo.
   wise-paper.js gives it its label and click. The Shell holds it, second from the right. */
.ww-theme-toggle { width: var(--control-sm); padding: 0; }
.ww-theme-toggle svg { display: block; width: 14px; height: 14px; }
.ww-theme-toggle .ww-icon-sun, [data-theme="night"] .ww-theme-toggle .ww-icon-moon { display: none; }
[data-theme="night"] .ww-theme-toggle .ww-icon-sun { display: block; }

/* ---- forms ---- */
.ww-form { display: grid; gap: var(--space-5); max-width: var(--measure); }
.ww-field { display: grid; gap: var(--space-2); min-width: 0; }
.ww-label { font: 500 14px/20px var(--font-sans); color: var(--ink); }
.ww-label .ww-optional { font-weight: 400; color: var(--muted); }
.ww-hint { margin: 0; font: 400 14px/20px var(--font-sans); color: var(--muted); }
.ww-error { margin: 0; font: 400 14px/20px var(--font-sans); color: var(--red); }
.ww-input, .ww-textarea, .ww-select select { width: 100%; min-height: var(--control); padding: 0 var(--space-3); border: 1px solid var(--field); border-radius: var(--radius-xs); background: var(--surface); color: var(--ink); font: 400 14px/20px var(--font-sans); transition: border-color 140ms cubic-bezier(0.25, 1, 0.5, 1); }
.ww-textarea { padding-block: var(--space-2); min-height: calc(var(--control) * 3); resize: vertical; font: 400 16px/1.55 var(--font-serif); }
.ww-input::placeholder, .ww-textarea::placeholder { color: var(--muted); opacity: 1; }
.ww-input:hover, .ww-textarea:hover, .ww-select select:hover { border-color: var(--ink-2); }
.ww-input:focus-visible, .ww-textarea:focus-visible, .ww-select select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.ww-input[aria-invalid="true"], .ww-textarea[aria-invalid="true"], .ww-select select[aria-invalid="true"] { border-color: var(--red); }
.ww-input:disabled, .ww-textarea:disabled, .ww-select select:disabled { background: transparent; border-color: var(--hairline); color: var(--muted); cursor: not-allowed; }
.ww-select { position: relative; }
.ww-select select { appearance: none; padding-right: calc(var(--space-3) * 2 + 8px); cursor: pointer; }
.ww-select::after { content: ""; position: absolute; right: var(--space-3); top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.ww-check { display: flex; align-items: flex-start; gap: var(--space-2); font: 400 14px/20px var(--font-sans); color: var(--ink-2); cursor: pointer; }
.ww-check input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.ww-check input:disabled, .ww-check input:disabled + span { cursor: not-allowed; color: var(--muted); }
.ww-fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.ww-fieldset legend { padding: 0; margin-bottom: var(--space-2); font: 500 14px/20px var(--font-sans); color: var(--ink); }
.ww-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---- chip, status, notice, card ---- */
.ww-chip { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); background: var(--tint); color: var(--ink); font: 400 12px/16px var(--font-mono); letter-spacing: 0.04em; }
a.ww-chip:hover { background: var(--accent-soft); }
.ww-status { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); font: 400 12px/16px var(--font-mono); letter-spacing: 0.04em; color: var(--ink-2); }
.ww-status::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--mark); }
.ww-status-current { --mark: var(--accent); background: var(--accent-soft); }
.ww-status-current::before { border-radius: 999px; }
.ww-status-stale { --mark: var(--orange-deep); background: var(--orange-soft); }
.ww-status-stale::before { border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--orange-deep); }
.ww-status-superseded { --mark: var(--muted); background: var(--tint); }
.ww-status-superseded::before { border-radius: 1px; }
.ww-status-disputed { --mark: var(--red); background: var(--red-soft); }
.ww-status-disputed::before { border-radius: 1px; transform: rotate(45deg); }
.ww-status-reaffirmed { --mark: var(--accent); background: var(--accent-soft); }
/* Ringed disc: the content box is the disc, the padding the gap, and the ring an outline, so the box stays the 7px of the other markers and the pill keeps their baseline. */
.ww-status-reaffirmed::before { padding: 2px; border-radius: 999px; background: var(--accent) content-box; outline: 1.5px solid var(--accent); outline-offset: -0.5px; }
.ww-notice { display: flex; gap: var(--space-3); align-items: baseline; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font: 400 14px/20px var(--font-sans); color: var(--ink-2); }
.ww-notice strong { color: var(--ink); font-weight: 500; }
.ww-notice-success { background: var(--accent-soft); }
.ww-notice-warning { background: var(--orange-soft); }
.ww-notice-neutral { background: var(--tint); }
.ww-notice-error { background: var(--red-soft); }
.ww-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); }

/* ---- attention (orange, rare) ---- */
.ww-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--orange); vertical-align: middle; }
/* Agent: the logo's orange node on its own, marking the agent. Three states: at rest (no class), busy and ready.
   Busy is the one thing that moves by itself; nothing moves under reduced motion. */
.ww-agent { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 999px; background: var(--orange); vertical-align: middle; }
.ww-agent-lg { width: 16px; height: 16px; }
.ww-agent-cursor { width: 0.5em; height: 0.5em; margin-inline-start: 0.2em; vertical-align: baseline; }
.ww-agent-busy { animation: ww-agent-breathe 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
@keyframes ww-agent-breathe { from { transform: scale(1); opacity: 1; } to { transform: scale(0.6); opacity: 0.45; } }
.ww-agent-ready { box-shadow: 0 0 0 3px var(--orange-soft); }
/* On the grid: a large node at rest; busy, it shrinks to a grid point and wanders the mark's 5×5 dots; ready, it is large again over the faded grid. */
.ww-agent-grid { position: relative; width: 32px; height: 32px; border-radius: 0; background: none; }
.ww-agent-grid.ww-agent-busy, .ww-agent-grid.ww-agent-ready { animation: none; box-shadow: none; }
.ww-agent-grid::before { content: ""; position: absolute; inset: 0; background: var(--accent); opacity: 0; transition: opacity 300ms cubic-bezier(0.25, 1, 0.5, 1); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill-opacity='0.4'%3E%3Ccircle cx='3.2' cy='3.2' r='1'/%3E%3Ccircle cx='9.6' cy='3.2' r='1'/%3E%3Ccircle cx='16' cy='3.2' r='1'/%3E%3Ccircle cx='22.4' cy='3.2' r='1'/%3E%3Ccircle cx='28.8' cy='3.2' r='1'/%3E%3Ccircle cx='3.2' cy='9.6' r='1'/%3E%3Ccircle cx='9.6' cy='9.6' r='1'/%3E%3Ccircle cx='16' cy='9.6' r='1'/%3E%3Ccircle cx='22.4' cy='9.6' r='1'/%3E%3Ccircle cx='28.8' cy='9.6' r='1'/%3E%3Ccircle cx='3.2' cy='16' r='1'/%3E%3Ccircle cx='9.6' cy='16' r='1'/%3E%3Ccircle cx='16' cy='16' r='1'/%3E%3Ccircle cx='22.4' cy='16' r='1'/%3E%3Ccircle cx='28.8' cy='16' r='1'/%3E%3Ccircle cx='3.2' cy='22.4' r='1'/%3E%3Ccircle cx='9.6' cy='22.4' r='1'/%3E%3Ccircle cx='16' cy='22.4' r='1'/%3E%3Ccircle cx='22.4' cy='22.4' r='1'/%3E%3Ccircle cx='28.8' cy='22.4' r='1'/%3E%3Ccircle cx='3.2' cy='28.8' r='1'/%3E%3Ccircle cx='9.6' cy='28.8' r='1'/%3E%3Ccircle cx='16' cy='28.8' r='1'/%3E%3Ccircle cx='22.4' cy='28.8' r='1'/%3E%3Ccircle cx='28.8' cy='28.8' r='1'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill-opacity='0.4'%3E%3Ccircle cx='3.2' cy='3.2' r='1'/%3E%3Ccircle cx='9.6' cy='3.2' r='1'/%3E%3Ccircle cx='16' cy='3.2' r='1'/%3E%3Ccircle cx='22.4' cy='3.2' r='1'/%3E%3Ccircle cx='28.8' cy='3.2' r='1'/%3E%3Ccircle cx='3.2' cy='9.6' r='1'/%3E%3Ccircle cx='9.6' cy='9.6' r='1'/%3E%3Ccircle cx='16' cy='9.6' r='1'/%3E%3Ccircle cx='22.4' cy='9.6' r='1'/%3E%3Ccircle cx='28.8' cy='9.6' r='1'/%3E%3Ccircle cx='3.2' cy='16' r='1'/%3E%3Ccircle cx='9.6' cy='16' r='1'/%3E%3Ccircle cx='16' cy='16' r='1'/%3E%3Ccircle cx='22.4' cy='16' r='1'/%3E%3Ccircle cx='28.8' cy='16' r='1'/%3E%3Ccircle cx='3.2' cy='22.4' r='1'/%3E%3Ccircle cx='9.6' cy='22.4' r='1'/%3E%3Ccircle cx='16' cy='22.4' r='1'/%3E%3Ccircle cx='22.4' cy='22.4' r='1'/%3E%3Ccircle cx='28.8' cy='22.4' r='1'/%3E%3Ccircle cx='3.2' cy='28.8' r='1'/%3E%3Ccircle cx='9.6' cy='28.8' r='1'/%3E%3Ccircle cx='16' cy='28.8' r='1'/%3E%3Ccircle cx='22.4' cy='28.8' r='1'/%3E%3Ccircle cx='28.8' cy='28.8' r='1'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100%; }
.ww-agent-grid::after { content: ""; position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; border-radius: 999px; background: var(--orange); transition: scale 300ms cubic-bezier(0.25, 1, 0.5, 1); }
.ww-agent-grid.ww-agent-busy::before { opacity: 1; }
.ww-agent-grid.ww-agent-busy::after { scale: 0.48; animation: ww-agent-wander 5s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.ww-agent-grid.ww-agent-ready::before { opacity: 0.4; }
/* One grid step is 40% of the node. */
@keyframes ww-agent-wander {
  0%, 6%, 100% { translate: 0 0; }
  14%, 20% { translate: 40% -40%; }
  29%, 35% { translate: 80% 0; }
  43%, 49% { translate: 40% 80%; }
  57%, 63% { translate: -40% 40%; }
  71%, 77% { translate: -80% -40%; }
  86%, 92% { translate: -40% -80%; }
}
@media (prefers-reduced-motion: reduce) { .ww-agent-busy, .ww-agent-grid.ww-agent-busy::after { animation: none; } }
.ww-new { display: inline-flex; align-items: center; padding: 2px var(--space-2); border-radius: var(--radius-xs); background: var(--orange); color: var(--on-orange); font: 500 12px/16px var(--font-sans); letter-spacing: 0.02em; vertical-align: 0.1em; }

/* ---- flash messages ---- */
.ww-flash-region { position: fixed; right: var(--space-5); bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); z-index: 50; display: grid; gap: var(--space-2); width: min(var(--flash-width), calc(100vw - 2 * var(--space-4))); }
.ww-flash { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4); border: 1px solid var(--field); border-radius: var(--radius-sm); background: var(--surface); font: 400 14px/20px var(--font-sans); color: var(--ink-2); }
.ww-flash::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 6px; background: var(--mark); }
.ww-flash-success { --mark: var(--accent); }
.ww-flash-success::before { border-radius: 999px; }
.ww-flash-warning { --mark: var(--orange-deep); }
.ww-flash-warning::before { border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--orange-deep); }
.ww-flash-neutral { --mark: var(--muted); }
.ww-flash-neutral::before { border-radius: 1px; }
.ww-flash-error { --mark: var(--red); }
.ww-flash-error::before { border-radius: 1px; transform: rotate(45deg); }
.ww-flash-body { flex: 1; min-width: 0; }
.ww-flash-body strong { color: var(--ink); font-weight: 500; }
.ww-flash .ww-btn { margin-top: calc((20px - var(--control-sm)) / 2); height: var(--control-sm); padding: 0 var(--space-2); }

/* ---- phone (bp-sm) ---- */
@media (max-width: 40rem) {
  .ww-page { padding-inline: var(--space-4); }
  .ww-title, .ww-prose h1 { font-size: 32px; line-height: 1.15; }
  :has(> .ww-mark-sm) > .ww-logo, [data-theme="night"] :has(> .ww-mark-sm) > .ww-logo-night { display: none; }
  .ww-mark-sm { display: block; }
  /* The shell keeps brand and end on the first row; page links take a second row and scroll sideways, nothing hidden. */
  .ww-shell > .ww-page { flex-wrap: wrap; }
  /* A zero basis keeps the end beside the brand; the breadcrumb truncates instead of pushing it to a row of its own. */
  .ww-shell-brand { flex: 1 1 0; }
  .ww-shell .ww-nav { order: 3; flex: 1 0 100%; margin-left: 0; gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-1); scrollbar-width: thin; }
  .ww-shell .ww-nav + .ww-shell-end { margin-left: auto; }
  .ww-shell-end { gap: var(--space-3); }
  .ww-focus { padding-top: var(--space-8); }
  .ww-flash-region { right: var(--space-4); left: var(--space-4); width: auto; }
  /* iOS zooms into any focused field set below 16px. */
  .ww-input, .ww-select select { font-size: 16px; }
}

/* ---- forced colours (Windows High Contrast) ---- */
/* Backgrounds and shadows are dropped here, so markers are redrawn in system colours to keep their shapes. */
@media (forced-colors: active) {
  .ww-status::before, .ww-flash::before, .ww-dot, .ww-agent, .ww-agent-grid::after { forced-color-adjust: none; background: CanvasText; }
  .ww-agent-grid { background: none; }
  .ww-agent-grid::before { forced-color-adjust: none; background: GrayText; }
  .ww-agent-ready { outline: 2px solid CanvasText; outline-offset: 2px; }
  .ww-agent-grid.ww-agent-ready { outline: none; }
  .ww-agent-grid.ww-agent-ready::before { opacity: 1; }
  .ww-status-stale::before, .ww-flash-warning::before { background: transparent; box-shadow: none; border: 1.5px solid CanvasText; }
  .ww-status-reaffirmed::before { background: CanvasText content-box; outline-color: CanvasText; }
  .ww-new { border: 1px solid CanvasText; }
  .ww-btn-primary { border-width: 2px; }
  .ww-account { border: 1px solid ButtonText; }
}

/* ---- print ---- */
@media print {
  @page { margin: 20mm 18mm; @bottom-right { content: counter(page) " / " counter(pages); font: 9pt "IBM Plex Sans", sans-serif; color: #444; } }
  html, body { background: #fff; background-image: none; color: #000; font-size: 11pt; }
  .ww-flash-region, .ww-btn, .ww-shell, .ww-skip, .ww-menu, .ww-focus-foot { display: none !important; }
  .ww-prose > * { max-width: none; }
  .ww-prose a:not(.ww-btn, .ww-chip) { color: inherit; text-decoration: underline; }
  .ww-prose a:not(.ww-btn, .ww-chip)[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #444; }
  /* A type scale for paper, in pt like the body, so headings and code keep their proportion to the 11pt text. */
  .ww-title, .ww-prose h1 { font-size: 20pt; }
  .ww-h2, .ww-prose h2 { font-size: 15pt; }
  .ww-h3, .ww-prose h3 { font-size: 12.5pt; }
  .ww-h4, .ww-prose h4 { font-size: 11pt; }
  .ww-prose h2 { margin-top: 1.6em; }
  .ww-prose h3 { margin-top: 1.4em; }
  .ww-prose h4 { margin-top: 1.2em; }
  .ww-prose :is(h1, h2, h3, h4) + * { margin-top: 0.5em; }
  .ww-prose h1 + * { margin-top: 1em; }
  .ww-prose pre, .ww-prose figure { break-inside: avoid; }
  /* Code is plain on paper: no tint, box or padding, and a code block is set off by one hairline. */
  .ww-prose code { padding: 0; border-radius: 0; background: none; }
  .ww-prose pre { white-space: pre-wrap; padding: 0 0 0 1em; border: 0; border-left: 1px solid #ccc; border-radius: 0; background: none; font-size: 9pt; line-height: 1.45; }
  /* A long table breaks between rows and repeats its header; the sentence that introduces it stays with it. */
  .ww-prose .ww-table { overflow: visible; }
  .ww-prose table { font-size: 9.5pt; line-height: 1.4; }
  .ww-prose thead { display: table-header-group; }
  .ww-prose tr { break-inside: avoid; }
  .ww-prose :is(p, li):has(+ table, + .ww-table) { break-after: avoid; }
  .ww-prose :is(p, li) { orphans: 3; widows: 3; }
  .ww-prose :is(h1, h2, h3, h4) { break-after: avoid; }
  /* Browsers drop backgrounds in print, which would erase the state markers; keep them so the shape prints with the word. */
  .ww-status, .ww-status::before, .ww-dot, .ww-new { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }