/* ==========================================================================
   PEEKWELL DESIGN SYSTEM · COMPONENT LIBRARY  v1.1
   Prefix: pw-   ·   Depends on tokens.css (+ peekwell.js for the gliding nav)
   ========================================================================== */

/* ---- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: var(--fs-md); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; font-optical-sizing: auto; }
img, svg { display: block; max-width: 100%; }
a { color: var(--text-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--peeky-700); }
:focus-visible { outline: none; box-shadow: var(--lens); border-radius: var(--r-xs); }
::selection { background: var(--brass-200); color: var(--ink-900); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-8) 0; }

/* ---- Typography --------------------------------------------------------- */
.pw-display, .pw-h1, .pw-h2, .pw-h3 { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144; font-weight: 600; letter-spacing: var(--tr-tight); line-height: var(--lh-tight); color: var(--text); margin: 0; }
.pw-display { font-size: clamp(2.5rem, 6vw, var(--fs-6xl)); font-weight: 700; }
.pw-h1 { font-size: clamp(2rem, 4.5vw, var(--fs-4xl)); }
.pw-h2 { font-size: var(--fs-2xl); line-height: var(--lh-snug); }
.pw-h3 { font-size: var(--fs-xl); line-height: var(--lh-snug); font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 48; }
.pw-h4 { font-family: var(--font-ui); font-size: var(--fs-lg); font-weight: 600; line-height: var(--lh-snug); margin: 0; }
.pw-lead { font-size: var(--fs-lg); line-height: var(--lh-loose); color: var(--text-2); max-width: var(--measure); }
.pw-body { font-size: var(--fs-md); line-height: var(--lh-loose); max-width: var(--measure); }
.pw-small { font-size: var(--fs-sm); color: var(--text-2); }
.pw-caption { font-size: var(--fs-xs); color: var(--text-3); }
.pw-hand { font-family: var(--font-hand); font-size: 1.15em; line-height: 1.35; color: var(--ink-700); }
.pw-mono { font-family: var(--font-mono); font-size: 0.92em; }
.pw-muted { color: var(--text-3); }
.pw-em { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; }

/* ---- Buttons · rounded rectangles, mint = action ------------------------- */
.pw-btn {
  --btn-bg: var(--action); --btn-fg: var(--action-text); --btn-line: transparent; --btn-hover: var(--action-hover);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 46px; padding: 0 20px;
  border-radius: var(--r-md); border: 1.5px solid var(--btn-line);
  background: var(--btn-bg); color: var(--btn-fg);
  font: 600 var(--fs-sm)/1 var(--font-ui); letter-spacing: 0.005em; white-space: nowrap;
  cursor: pointer; text-decoration: none; user-select: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 1px 2px rgba(51,57,69,0.08);
  transition: transform var(--t-fast) var(--ease-soft), background var(--t-fast) var(--ease-soft), box-shadow var(--t-fast) var(--ease-soft), color var(--t-fast), border-color var(--t-fast);
}
.pw-btn:hover { background: var(--btn-hover); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 4px 10px -4px rgba(51,57,69,0.25); }
/* A link that is a button keeps its label colour on hover: the blue of a:hover cannot be read on a tinted or slate
   fill. :where() keeps this as weak as a:hover, so a variant's own hover colour (ghost) still wins. */
a:where(.pw-btn):hover { color: var(--btn-fg); }
.pw-btn:active { transform: translateY(0) scale(0.985); box-shadow: inset 0 1px 2px rgba(31,36,48,0.12); }
.pw-btn:focus-visible { box-shadow: var(--lens-glow); }
.pw-btn:disabled, .pw-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.pw-btn .ph { font-size: 1.2em; }
.pw-btn--ink     { --btn-bg: var(--ink-800); --btn-fg: var(--paper-50); --btn-hover: var(--ink-900); }
.pw-btn--brand   { --btn-bg: var(--peeky-300); --btn-fg: var(--ink-900); --btn-hover: var(--peeky-400); }
.pw-btn--accent  { --btn-bg: var(--brass-400); --btn-fg: var(--ink-900); --btn-hover: var(--brass-300); }
.pw-btn--outline { --btn-bg: var(--bg-sheet); --btn-fg: var(--text); --btn-line: var(--line-strong); --btn-hover: var(--paper-100); box-shadow: 0 1px 2px rgba(51,57,69,0.05); }
.pw-btn--outline:hover { border-color: var(--ink-500); }
.pw-btn--ghost   { --btn-bg: transparent; --btn-fg: var(--text-2); --btn-hover: rgba(51,57,69,0.06); box-shadow: none; }
.pw-btn--ghost:hover { color: var(--text); transform: none; box-shadow: none; }
:root[data-theme="dark"] .pw-btn--ghost { --btn-hover: var(--line); }   /* ink at 6% does not show on slate */
.pw-btn--danger  { --btn-bg: var(--brick-100); --btn-fg: var(--brick-700); --btn-line: var(--brick-200); --btn-hover: var(--brick-200); }
:root[data-theme="dark"] .pw-btn--danger { --btn-bg: var(--sev-critical-bg); --btn-fg: var(--sev-critical-text); --btn-line: color-mix(in srgb, var(--brick-500) 50%, transparent); --btn-hover: color-mix(in srgb, var(--brick-500) 32%, transparent); }
.pw-btn--info    { --btn-bg: var(--peeky-100); --btn-fg: var(--peeky-700); --btn-line: var(--peeky-200); --btn-hover: var(--peeky-200); }
.pw-btn--note    { --btn-bg: var(--butter-100); --btn-fg: var(--butter-700); --btn-line: var(--butter-300); --btn-hover: var(--butter-200); }
:root[data-theme="dark"] .pw-btn--info { --btn-bg: var(--sev-info-bg); --btn-fg: var(--sev-info-text); --btn-line: color-mix(in srgb, var(--peeky-500) 50%, transparent); --btn-hover: color-mix(in srgb, var(--peeky-500) 32%, transparent); }
:root[data-theme="dark"] .pw-btn--note { --btn-bg: var(--sev-medium-bg); --btn-fg: var(--sev-medium-text); --btn-line: color-mix(in srgb, var(--butter-500) 45%, transparent); --btn-hover: color-mix(in srgb, var(--butter-500) 28%, transparent); }
.pw-btn--sm { min-height: 36px; padding: 0 14px; font-size: var(--fs-xs); border-radius: var(--r-sm); }
.pw-btn--lg { min-height: 54px; padding: 0 26px; font-size: var(--fs-md); border-radius: var(--r-lg); }
.pw-btn--icon { width: 42px; min-height: 42px; padding: 0; }
.pw-btn--icon.pw-btn--sm { width: 34px; min-height: 34px; }
.pw-btn__lens { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: -8px; border-radius: 8px; background: rgba(31,36,48,0.10); font-size: 14px; transition: transform var(--t-base) var(--ease-peek), background var(--t-fast); }
.pw-btn--ink .pw-btn__lens { background: rgba(255,255,255,0.14); }
.pw-btn:hover .pw-btn__lens { transform: translateX(3px) rotate(-12deg); }

/* ---- Inputs · floating label, oversized ---------------------------------- */
.pw-field { display: grid; gap: var(--s-2); }
.pw-control { position: relative; }
.pw-input, .pw-select, .pw-textarea {
  width: 100%; min-height: 60px; padding: 26px 18px 10px;
  background: var(--bg-sheet); color: var(--text);
  border: 1.5px solid var(--line); border-radius: var(--r-lg);
  font: 500 var(--fs-md)/1.3 var(--font-ui);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  appearance: none;
}
.pw-input::placeholder, .pw-textarea::placeholder { color: transparent; }
.pw-input:hover, .pw-select:hover, .pw-textarea:hover { border-color: var(--line-strong); }
.pw-input:focus, .pw-select:focus, .pw-textarea:focus { outline: none; border-color: var(--brass-500); box-shadow: var(--lens); }
.pw-float { position: absolute; left: 19px; top: 50%; transform: translateY(-50%); font: 500 var(--fs-md)/1 var(--font-ui); color: var(--text-3); pointer-events: none; transform-origin: left top; transition: transform var(--t-fast) var(--ease-settle), color var(--t-fast), top var(--t-fast) var(--ease-settle); }
.pw-input:focus ~ .pw-float, .pw-input:not(:placeholder-shown) ~ .pw-float,
.pw-textarea:focus ~ .pw-float, .pw-textarea:not(:placeholder-shown) ~ .pw-float,
.pw-select ~ .pw-float { top: 12px; transform: translateY(0) scale(0.78); color: var(--text-2); }
.pw-input:focus ~ .pw-float, .pw-textarea:focus ~ .pw-float, .pw-select:focus ~ .pw-float { color: var(--brass-600); }
.pw-textarea { min-height: 132px; resize: vertical; padding-top: 30px; }
.pw-textarea ~ .pw-float { top: 30px; transform: translateY(-50%); }
.pw-textarea:focus ~ .pw-float, .pw-textarea:not(:placeholder-shown) ~ .pw-float { top: 12px; transform: translateY(0) scale(0.78); }
.pw-select { padding-right: 46px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256' fill='%23545A67'><path d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80A8 8 0 0 1 53.66 90.34L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/></svg>"); background-repeat: no-repeat; background-position: right 18px center; }
.pw-input--url { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 400; }
.pw-input[aria-invalid="true"], .pw-input.is-error { border-color: var(--brick-500); }
.pw-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(184,87,63,0.22); }
.pw-input[aria-invalid="true"] ~ .pw-float { color: var(--brick-600); }
/* browser autofill: the label floats and the field keeps its own paper, as if the value were typed. A value
   Chrome fills on page load is not exposed until the visitor interacts, so :placeholder-shown still matches.
   The selectors stay in separate rules: a browser that does not know one pseudo-class drops the whole rule. */
.pw-input:autofill ~ .pw-float { top: 12px; transform: translateY(0) scale(0.78); color: var(--text-2); }
.pw-input:-webkit-autofill ~ .pw-float { top: 12px; transform: translateY(0) scale(0.78); color: var(--text-2); }
.pw-input:-webkit-autofill { -webkit-text-fill-color: var(--text); caret-color: var(--text); box-shadow: inset 0 0 0 100px var(--bg-sheet); }
.pw-input:-webkit-autofill:focus { box-shadow: inset 0 0 0 100px var(--bg-sheet), var(--lens); }
.pw-input:disabled { background: var(--paper-150); color: var(--text-disabled); cursor: not-allowed; }
.pw-hint { font-size: var(--fs-xs); color: var(--text-3); padding-left: 4px; }
.pw-error { font-size: var(--fs-xs); color: var(--brick-600); display: flex; gap: 6px; align-items: center; padding-left: 4px; }
.pw-control--icon .ph { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: 20px; pointer-events: none; }
.pw-control--icon .pw-input { padding-right: 50px; }
.pw-input-group { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2); align-items: stretch; }
.pw-input-group .pw-btn { min-height: 60px; border-radius: var(--r-lg); padding: 0 24px; }
/* compact variant for dense app forms: static label above, 46px field */
.pw-field--compact .pw-input, .pw-field--compact .pw-select { min-height: 46px; padding: 10px 16px; border-radius: var(--r-md); }
.pw-field--compact .pw-select { padding-right: 42px; }
.pw-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.pw-label small { font-weight: 400; color: var(--text-3); margin-left: var(--s-1); }
.pw-field--compact .pw-input::placeholder { color: var(--text-3); }

/* Checkbox · radio · switch */
.pw-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--fs-sm); position: relative; }
.pw-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.pw-check__box { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-strong); background: var(--bg-sheet); display: grid; place-items: center; flex-shrink: 0; transition: background var(--t-fast), border-color var(--t-fast); }
.pw-check__box::after { content: ""; width: 10px; height: 6px; border: 2.5px solid var(--ink-900); border-top: 0; border-right: 0; transform: rotate(-45deg) scale(0); transition: transform var(--t-base) var(--ease-peek); margin-top: -2px; }
.pw-check input:checked ~ .pw-check__box { background: var(--action); border-color: var(--action); }
.pw-check input:checked ~ .pw-check__box::after { transform: rotate(-45deg) scale(1); }
.pw-check input:focus-visible ~ .pw-check__box { box-shadow: var(--lens); }
.pw-check--radio .pw-check__box { border-radius: 50%; }
.pw-check--radio .pw-check__box::after { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--ink-900); transform: scale(0); margin: 0; }
.pw-check--radio input:checked ~ .pw-check__box::after { transform: scale(1); }
.pw-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--fs-sm); position: relative; }
.pw-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.pw-switch__track { width: 46px; height: 28px; border-radius: var(--r-round); background: var(--paper-400); position: relative; transition: background var(--t-base); flex-shrink: 0; }
.pw-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--paper-0); box-shadow: var(--shadow-1); transition: transform var(--t-base) var(--ease-peek); }
.pw-switch input:checked ~ .pw-switch__track { background: var(--mint-500); }
.pw-switch input:checked ~ .pw-switch__track::after { transform: translateX(18px); }
.pw-switch input:focus-visible ~ .pw-switch__track { box-shadow: var(--lens); }

/* ---- Chips, tags, severity, stamp -------------------------------------- */
.pw-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--r-sm); border: 1.5px solid var(--line); background: var(--bg-sheet); font: 500 var(--fs-xs)/1 var(--font-ui); color: var(--text-2); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.pw-chip:hover { border-color: var(--line-strong); color: var(--text); }
.pw-chip.is-selected { background: var(--ink-800); color: var(--paper-50); border-color: var(--ink-800); }
.pw-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--r-xs); background: var(--paper-200); color: var(--text-2); font: 500 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.01em; }
.pw-tag--mono { font-family: var(--font-mono); font-weight: 400; }
/* Jurisdiction flags: a small marker before the written name of a regime (EU, UK, US), never in place of it,
   so the span is hidden from assistive tech. The SVGs are flag-icons 7.5.0 (MIT), vendored unchanged in
   img/flags/. It sizes with the text around it; in a page or card title it steps down to read as a marker. */
.pw-flag { display: inline-block; flex: none; width: 1.3333em; height: 1em; margin-right: 0.45em; border-radius: 2px; background: center / cover no-repeat; box-shadow: 0 0 0 1px var(--line-strong); vertical-align: -0.12em; }
.pw-flag--eu { background-image: url("../img/flags/eu.2eba7797bc85.svg"); }
.pw-flag--uk { background-image: url("../img/flags/uk.6dcadf691676.svg"); }
.pw-flag--us { background-image: url("../img/flags/us.1d23b9509d0a.svg"); }
.pw-display .pw-flag, .pw-h1 .pw-flag, .pw-h2 .pw-flag { font-size: 0.62em; vertical-align: 0.06em; }
.pw-sev { --sev: var(--sev-info); --sev-bg: var(--sev-info-bg); --sev-fg: var(--sev-info-text); display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 9px; border-radius: 8px; background: var(--sev-bg); color: var(--sev-fg); font: 600 var(--fs-xs)/1 var(--font-ui); }
.pw-sev::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, var(--perf-core) 0 2.6px, var(--sev) 3px); }
.pw-sev--critical { --sev: var(--sev-critical); --sev-bg: var(--sev-critical-bg); --sev-fg: var(--sev-critical-text); }
.pw-sev--high     { --sev: var(--sev-high);     --sev-bg: var(--sev-high-bg);     --sev-fg: var(--sev-high-text); }
.pw-sev--medium   { --sev: var(--sev-medium);   --sev-bg: var(--sev-medium-bg);   --sev-fg: var(--sev-medium-text); }
.pw-sev--low      { --sev: var(--sev-low);      --sev-bg: var(--sev-low-bg);      --sev-fg: var(--sev-low-text); }
.pw-sev--info     { --sev: var(--sev-info);     --sev-bg: var(--sev-info-bg);     --sev-fg: var(--sev-info-text); }
.pw-sev--pass     { --sev: var(--sev-pass);     --sev-bg: var(--sev-pass-bg);     --sev-fg: var(--sev-pass-text); }
.pw-sev--watch    { --sev: var(--sev-watch);    --sev-bg: var(--sev-watch-bg);    --sev-fg: var(--sev-watch-text); }
.pw-stamp { display: inline-block; padding: 5px 10px; border: 2px solid var(--brick-500); border-radius: var(--r-xs); color: var(--brick-600); font: 700 var(--fs-xs)/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; transform: rotate(-4deg); opacity: 0.88; box-shadow: inset 0 0 0 1.5px var(--paper-0), inset 0 0 0 2.5px var(--brick-300); background: repeating-linear-gradient(135deg, transparent 0 3px, rgba(184,87,63,0.06) 3px 4px); }
.pw-tag, .pw-sev, .pw-chip, .pw-stamp { justify-self: start; }

/* ---- Perforation rail · the notepad edge (core pattern) ------------------
   Two concentric circles per hole: ink centre, severity-coloured ring.
   background-repeat: space guarantees whole dots only, never a cut circle.
   Set --perf to any colour. Use .pw-perf--left (vertical) or .pw-perf--top. */
.pw-perf {
  --perf: var(--sev-info); --perf-dot: 12px; --perf-rail: 22px; --perf-gap: 32px; --perf-pad: 14px;
  position: relative; flex: none;
  background-image: radial-gradient(circle at center, var(--perf-core) 0 3.3px, var(--perf) 3.8px calc(var(--perf-dot) / 2 - 0.4px), transparent calc(var(--perf-dot) / 2 + 0.2px));
  background-origin: content-box; background-clip: content-box;
}
.pw-perf--left { width: var(--perf-rail); padding: var(--perf-pad) 0; background-position: center; background-size: var(--perf-rail) var(--perf-gap); background-repeat: no-repeat space; }
.pw-perf--top  { height: var(--perf-rail); padding: 0 var(--perf-pad); background-position: center; background-size: var(--perf-gap) var(--perf-rail); background-repeat: space no-repeat; }
.pw-perf--critical { --perf: var(--sev-critical); } .pw-perf--high { --perf: var(--sev-high); }
.pw-perf--medium { --perf: var(--sev-medium); }     .pw-perf--low { --perf: var(--sev-low); }
.pw-perf--info { --perf: var(--sev-info); }         .pw-perf--pass { --perf: var(--sev-pass); }
.pw-perf--watch { --perf: var(--sev-watch); }       .pw-perf--brass { --perf: var(--brass-500); }

/* ---- Surfaces ----------------------------------------------------------- */
.pw-card { position: relative; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s-6); box-shadow: var(--shadow-1); }
.pw-card--sheet { background: var(--bg-sheet); box-shadow: var(--shadow-2); }
.pw-card--flat { box-shadow: none; }
.pw-card--recessed { background: var(--bg-recessed); border-color: transparent; box-shadow: none; }
.pw-card--interactive { cursor: pointer; transition: transform var(--t-base) var(--ease-soft), box-shadow var(--t-base) var(--ease-soft), border-color var(--t-base); }
.pw-card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.pw-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); }
.pw-card__title { font: 600 var(--fs-md)/1.3 var(--font-ui); margin: 0; }
/* notepad card: perforated top edge */
.pw-card--pad { padding: 0; overflow: hidden; }
.pw-card--pad > .pw-perf--top { border-bottom: 1px solid var(--line-soft); }
.pw-card--pad > .pw-card__body { padding: var(--s-5) var(--s-6) var(--s-6); }

/* Sticker (alpha art on a haloed sheet) · stage (art on a tinted page) */
.pw-sticker { display: inline-block; background: var(--paper-0); border-radius: var(--r-2xl); padding: var(--s-3); box-shadow: var(--shadow-sticker); transform: rotate(-2deg); }
.pw-sticker--right { transform: rotate(2.5deg); }
.pw-stage { position: relative; overflow: hidden; border-radius: var(--r-2xl); background: var(--paper-100); display: grid; place-items: center; }
/* Art is centred against the stage box, so a height like 84% resolves against the stage and tall cut-outs never spill */
.pw-stage > img:not(.pw-char) { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; }
/* Character art never distorts: when a layout hands it a box of another shape, the art fits inside the box instead of stretching */
img[src*="/img/alpha/"], img[src*="/img/gen/"], .pw-stage > img, .pw-char { object-fit: contain; }
.pw-stage--butter { background: var(--butter-100); } .pw-stage--blue { background: var(--peeky-100); }
.pw-stage--mint { background: var(--mint-100); }     .pw-stage--lavender { background: var(--lavender-100); }
:root[data-theme="dark"] .pw-stage--butter { background: #3A3A2C; } :root[data-theme="dark"] .pw-stage--blue { background: #2A3544; }
:root[data-theme="dark"] .pw-stage--mint { background: #2B3A2C; }   :root[data-theme="dark"] .pw-stage--lavender { background: #352F45; }

/* Comic strip · storyboards (the one place the cream-paper crops still live) */
.pw-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); }
.pw-panel { background: var(--bg-sheet); border: 1.5px solid var(--ink-800); border-radius: var(--r-xl); padding: var(--s-3); display: grid; gap: var(--s-3); box-shadow: 3px 3px 0 var(--ink-800); }
.pw-panel .pw-stage { aspect-ratio: 4/3; }
.pw-panel__caption { font-family: var(--font-hand); font-size: 1.05rem; line-height: 1.3; color: var(--ink-700); padding: 0 var(--s-1) var(--s-1); }

/* ---- Characters on the page (alpha art) ---------------------------------
   .pw-char is an absolutely positioned figure; the host gets .pw-host plus a
   placement modifier that reserves room so content never hides under a foot.
   Every pose is measured, not eyeballed. For each image:
     aspect  = height / width of the trimmed PNG
     edge    = the row (as a fraction of height) that must sit exactly on the
               component edge: the seat line for a sitter, the belly line for a
               lier, the straight cut for a pop-up / peek / lean-in
   Placement rule: translateY(-edge) puts that row on the edge. The host pads by
   (1 - edge) * aspect * width (the part inside the card) plus a small gap, and
   gets margin-top edge * aspect * width for the part outside (sitters, liers).
   Measure a new pose with the guide script on the Illustration page. */
.pw-host { position: relative; --char-w: calc(var(--char-base, 110px) * var(--char-scale, 1)); }
.pw-char { position: absolute; pointer-events: none; z-index: 2; width: var(--char-w, 110px); filter: drop-shadow(0 6px 10px rgba(31,36,48,0.18)); }
/* Sizing across breakpoints: set the desktop size once with --char-base on the host; every reserve is a
   function of --char-w, and --char-scale shrinks it on smaller screens. Characters are never hidden, only scaled. */
:root { --char-scale: 1; }
@media (max-width: 900px) { :root { --char-scale: 0.85; } }
@media (max-width: 640px) { :root { --char-scale: 0.72; } }
/* peeky-sitting-edge · 364x640 · aspect 1.758 · seat row 0.795 */
.pw-char--sit-tl { left: 22px; top: 0; transform: translateY(-79.5%); }
.pw-char--sit-tr { right: 22px; top: 0; transform: translateY(-79.5%); }
.pw-host--sit-tl, .pw-host--sit-tr { padding-top: calc(var(--char-w, 110px) * 0.36 + 12px); margin-top: calc(var(--char-w, 110px) * 1.4); }
/* cheeky-cheer-pop · 640x543 · aspect 0.848 · cut row 1.0 (bottom edge is the cut) */
.pw-char--pop-tl { left: 18px; bottom: calc(100% - 1px); }
.pw-char--pop-tr { right: 18px; bottom: calc(100% - 1px); }
.pw-host--pop { margin-top: calc(var(--char-w, 110px) * 0.9 + 8px); }
/* peeky-peek-up and peeky-peek-up-dark · one 640x554 canvas · aspect 0.866 · body line 0.951 sits on the edge;
   the hands (and the lantern) hang the last 4.9% over it, so the image moves down by that much of its own height */
.pw-char--peek-bl { left: 8px; bottom: 0; transform: translateY(4.9%); }
.pw-char--peek-br { right: 8px; bottom: 0; transform: translateY(4.9%); }
.pw-char--peek-bl.pw-char--flip, .pw-char--peek-br.pw-char--flip { transform: translateY(4.9%) scaleX(-1); }
/* a day and night pair drawn on one canvas: under the dark theme the night drawing takes the day one's place */
.pw-char--night { display: none; }
:root[data-theme="dark"] .pw-char--day { display: none; }
:root[data-theme="dark"] .pw-char--night { display: block; }
.pw-host--peek-r { padding-right: calc(var(--char-w, 110px) + 24px); }
.pw-host--peek-l { padding-left: calc(var(--char-w, 110px) + 24px); }
/* officer-lean-in · 397x640 · aspect 1.612 · cuts on the right and bottom edges */
.pw-char--lean-r { right: 0; bottom: 0; width: auto; height: min(100%, calc(var(--char-w, 110px) * 1.61)); }
.pw-host--lean-r { padding-right: calc(var(--char-w, 110px) + 20px); overflow: hidden; }
/* peeky-lying-reading · 640x347 · aspect 0.542 · belly row 0.977 (side view, legs flat) */
.pw-char--lie-top { left: 50%; top: 0; transform: translate(-50%, -97.7%); }
.pw-host--lie-top { padding-top: 12px; margin-top: calc(var(--char-w, 110px) * 0.54); }
.pw-char--flip { transform: scaleX(-1); }
.pw-char--sit-tl.pw-char--flip, .pw-char--sit-tr.pw-char--flip { transform: translateY(-79.5%) scaleX(-1); }
.pw-host--peek-r, .pw-host--peek-l, .pw-host--sit-tl, .pw-host--sit-tr, .pw-host--pop, .pw-host--lie-top { overflow: visible; }
/* the sidebar-foot Peeky keeps a fixed pixel width, so scale does not apply to it */
.pw-sidebar__foot .pw-char { --char-scale: 1; }

/* Peeky's notes · three tones, two shapes */
.pw-note {
  --note-bg: var(--butter-100); --note-disc: var(--butter-300); --note-portrait: url("../img/alpha/peeky-notes.545ef939ff23.webp");
  position: relative; padding: var(--s-5) var(--s-6) var(--s-5) 84px;
  background: var(--note-bg); border: 1.5px solid var(--ink-800); border-radius: var(--r-hand);
  font-family: var(--font-hand); font-size: 1.15rem; line-height: 1.4; color: var(--ink-800);
  box-shadow: 2px 3px 0 rgba(31,36,48,0.10);
}
.pw-note::before { content: ""; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; background: var(--note-portrait) center 22% / auto 88% no-repeat, var(--note-disc); box-shadow: 0 0 0 2px var(--paper-0), 0 0 0 3.5px var(--ink-800); }
.pw-note strong { font-weight: 400; text-decoration: underline; text-decoration-color: var(--brass-500); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pw-note--good  { --note-bg: var(--peeky-100); --note-disc: var(--peeky-300); --note-portrait: url("../img/alpha/peeky-delighted.5dc3250c2d7e.webp"); }
.pw-note--alert { --note-bg: var(--brick-100); --note-disc: var(--lavender-300); --note-portrait: url("../img/alpha/officer-stern.65f52addfe59.webp"); }
.pw-note--alert strong { text-decoration-color: var(--brick-500); }
.pw-note--compact { padding: 14px 18px 14px 66px; font-size: 1.05rem; line-height: 1.3; border-radius: 14px 12px 16px 12px / 12px 16px 12px 14px; max-width: 300px; }
.pw-note--compact::before { width: 40px; height: 40px; left: 14px; }
.pw-note--plain { padding-left: var(--s-6); }
.pw-note--plain::before { display: none; }
:root[data-theme="dark"] .pw-note { color: var(--ink-900); border-color: var(--ink-600); box-shadow: 2px 3px 0 rgba(0,0,0,0.35); }
:root[data-theme="dark"] .pw-note { --note-bg: #3B3A2A; }
:root[data-theme="dark"] .pw-note--good { --note-bg: #2A3544; }
:root[data-theme="dark"] .pw-note--alert { --note-bg: #45302B; }

/* ---- Findings · a notepad page with a perforated spine ------------------- */
.pw-finding { display: grid; grid-template-columns: auto 1fr; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-1); }
.pw-finding > .pw-perf { border-right: 1px solid var(--line-soft); }
.pw-finding--critical > .pw-perf { --perf: var(--sev-critical); } .pw-finding--high > .pw-perf { --perf: var(--sev-high); }
.pw-finding--medium > .pw-perf { --perf: var(--sev-medium); }     .pw-finding--low > .pw-perf { --perf: var(--sev-low); }
.pw-finding--pass > .pw-perf { --perf: var(--sev-pass); }         .pw-finding--info > .pw-perf { --perf: var(--sev-info); }
.pw-finding__body { padding: var(--s-5) var(--s-6); display: grid; gap: var(--s-3); min-width: 0; }
.pw-finding__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.pw-finding__title { font: 600 var(--fs-lg)/1.3 var(--font-ui); margin: 0; }
.pw-finding__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-left: auto; }
.pw-finding__text { color: var(--text-2); max-width: 70ch; margin: 0; }
.pw-evidence { background: var(--bg-recessed); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-700); overflow-x: auto; white-space: pre; }
.pw-evidence b { color: var(--brick-600); font-weight: 500; background: var(--brick-100); border-radius: 3px; padding: 0 3px; }
.pw-evidence i { font-style: normal; color: var(--text-3); }
.pw-finding__fix { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; padding-top: var(--s-2); }
.pw-finding__fix .ph { color: var(--brass-600); font-size: 20px; margin-top: 2px; }
.pw-finding__fix p { margin: 0; }
/* wiki link · one line under the description: what this is, who has been fined for it */
.pw-finding__wiki { display: inline-flex; align-items: center; gap: 7px; justify-self: start; font-size: var(--fs-sm); font-weight: 500; color: var(--text-link); text-decoration: none; }
.pw-finding__wiki .ph { font-size: 17px; color: var(--sev-watch); }
.pw-finding__wiki span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pw-finding__wiki:hover span { color: var(--peeky-700); }
/* plain-words brief · optional; Peeky explains it to someone who does not run the website */
.pw-finding__plain { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: start; padding: var(--s-4) var(--s-5); background: var(--peeky-100); border-radius: var(--r-lg); }
.pw-finding__plain::before { content: ""; width: 44px; height: 44px; border-radius: 50%; background: url("../img/alpha/peeky-curious.0367c2167cb5.webp") center 22% / auto 88% no-repeat, var(--peeky-300); box-shadow: 0 0 0 2px var(--paper-0), 0 0 0 3.5px var(--ink-800); margin-top: 2px; }
.pw-finding__plain > div { display: grid; gap: 6px; min-width: 0; }
.pw-finding__plain b { font: 600 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--peeky-700); }
.pw-finding__plain p { margin: 0; color: var(--text); font-size: var(--fs-sm); line-height: var(--lh-loose); max-width: 66ch; }
:root[data-theme="dark"] .pw-finding__plain { background: #2A3544; }
:root[data-theme="dark"] .pw-finding__plain b { color: var(--peeky-300); }

/* ---- Gauges & stats ------------------------------------------------------ */
/* Arc gauge: 240° track with round caps, SVG stroke driven by --v (0..100).
   <div class="pw-gauge pw-gauge--warn" style="--v:58"><svg viewBox="0 0 120 84">…</svg><div class="pw-gauge__value">58</div><div class="pw-gauge__label">score</div></div> */
.pw-gauge { --v: 0; --g: var(--graph-good); --g-soft: var(--mint-100); position: relative; width: 168px; display: grid; justify-items: center; }
.pw-gauge svg { width: 100%; height: auto; overflow: visible; }
.pw-gauge .track { fill: none; stroke: var(--paper-300); stroke-width: 9; stroke-linecap: round; }
.pw-gauge .glow  { fill: none; stroke: var(--g); stroke-width: 9; stroke-linecap: round; opacity: 0.18; filter: blur(4px); }
.pw-gauge .fill  { fill: none; stroke: var(--g); stroke-width: 9; stroke-linecap: round; stroke-dasharray: var(--v) 100; transition: stroke-dasharray var(--t-slow) var(--ease-soft); }
.pw-gauge .tick  { stroke: var(--paper-400); stroke-width: 1.5; stroke-linecap: round; }
.pw-gauge__value { position: absolute; top: 43%; font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 72; font-size: 2.6rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.pw-gauge__label { position: absolute; top: calc(43% + 2.7rem); font-size: var(--fs-xs); color: var(--text-3); letter-spacing: 0.02em; }
.pw-gauge--warn { --g: var(--graph-warn); --g-soft: var(--brass-100); }
.pw-gauge--bad  { --g: var(--graph-bad);  --g-soft: var(--brick-100); }
.pw-gauge--sm { width: 110px; } .pw-gauge--sm .pw-gauge__value { font-size: 1.7rem; } .pw-gauge--sm .pw-gauge__label { top: calc(43% + 1.8rem); font-size: var(--fs-2xs); }
/* Ring: compact circular progress for tables and cards */
.pw-ring { --v: 0; --g: var(--graph-good); position: relative; width: 44px; height: 44px; display: grid; place-items: center; }
.pw-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pw-ring .track { fill: none; stroke: var(--paper-300); stroke-width: 4; }
.pw-ring .fill { fill: none; stroke: var(--g); stroke-width: 4; stroke-linecap: round; stroke-dasharray: var(--v) 100; transition: stroke-dasharray var(--t-slow) var(--ease-soft); }
.pw-ring span { font: 600 var(--fs-xs)/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.pw-ring--warn { --g: var(--graph-warn); } .pw-ring--bad { --g: var(--graph-bad); }
/* Segmented bar: one cell per severity, Stripe-style */
.pw-segbar { display: flex; gap: 3px; height: 10px; border-radius: 5px; overflow: hidden; }
.pw-segbar > i { display: block; height: 100%; border-radius: 3px; background: var(--seg, var(--paper-300)); min-width: 6px; }
.pw-segbar__legend { display: flex; gap: var(--s-4); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-2); margin-top: 8px; }
.pw-segbar__legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--seg); margin-right: 6px; vertical-align: 1px; }
.pw-stat { display: grid; gap: 2px; }
.pw-stat__value { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 72; font-size: var(--fs-3xl); font-weight: 600; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.pw-stat__label { font-size: var(--fs-sm); color: var(--text-2); }
.pw-stat__delta { font: 600 var(--fs-xs)/1 var(--font-ui); color: var(--mint-700); display: inline-flex; align-items: center; gap: 3px; }
.pw-stat__delta.is-down { color: var(--brick-600); }
.pw-stat__delta.is-flat { color: var(--text-2); }
/* Small text, so each tone keeps 4.5:1 on a card; the light steps of mint and brick are too dark on slate. */
:root[data-theme="dark"] .pw-stat__delta { color: var(--mint-400); }
:root[data-theme="dark"] .pw-stat__delta.is-down { color: var(--brick-300); }
:root[data-theme="dark"] .pw-stat__delta.is-flat { color: var(--text-2); }
.pw-progress { height: 8px; border-radius: 4px; background: var(--paper-300); overflow: hidden; }
.pw-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--ink-800); transition: width var(--t-slow) var(--ease-soft); }
.pw-progress--brass > span { background: var(--brass-500); }
.pw-progress--mint > span { background: var(--mint-500); }

/* ---- Lens · brass ring, glass, and the sweep ----------------------------- */
.pw-lens { --lens-size: 120px; --ring: calc(var(--lens-size) * 0.07); position: relative; width: var(--lens-size); height: var(--lens-size); border-radius: 50%; }
/* the brass ring: a conic metal gradient masked to an annulus, so the glass stays see-through */
.pw-lens::before { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 2; pointer-events: none;
  background: conic-gradient(from 210deg, #8F6A22, #E5C878 18%, #B58A34 36%, #F3DFA6 52%, #A87C2C 70%, #E2C070 86%, #8F6A22);
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - var(--ring)), #000 calc(100% - var(--ring) + 0.5px)); mask: radial-gradient(circle closest-side, transparent calc(100% - var(--ring)), #000 calc(100% - var(--ring) + 0.5px));
  box-shadow: 0 10px 24px -8px rgba(31,36,48,0.5); }
.pw-lens::after { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 3; pointer-events: none; box-shadow: inset 0 1px 1px rgba(255,255,255,0.7), inset 0 -1px 2px rgba(60,40,10,0.55), 0 0 0 1px rgba(60,40,10,0.35); }
.pw-lens__glass { position: absolute; inset: var(--ring); border-radius: 50%; overflow: hidden; z-index: 1;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.28) 0, rgba(255,255,255,0.05) 26%, rgba(171,200,223,0.06) 55%, rgba(108,147,184,0.22) 100%);
  backdrop-filter: blur(0.4px) saturate(1.35) contrast(1.18) brightness(1.03); -webkit-backdrop-filter: blur(0.4px) saturate(1.35) contrast(1.18) brightness(1.03);
  box-shadow: inset 0 0 0 1.5px rgba(60,40,10,0.35), inset 0 0 16px rgba(171,200,223,0.35), inset 0 -8px 16px rgba(59,93,130,0.18); }
.pw-lens__glass::after { content: ""; position: absolute; left: 14%; top: 9%; width: 46%; height: 24%; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0)); transform: rotate(-20deg); pointer-events: none; }
.pw-lens__clone { position: absolute !important; left: 0 !important; top: 0 !important; right: auto !important; bottom: auto !important; inset: auto !important; transform-origin: 0 0; pointer-events: none; will-change: transform; opacity: 1 !important; color: var(--ink-700) !important; }
.pw-lens--magnify .pw-lens__glass { backdrop-filter: none; -webkit-backdrop-filter: none; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.22) 0, rgba(255,255,255,0.03) 26%, rgba(171,200,223,0.05) 55%, rgba(108,147,184,0.20) 100%); }
.pw-lens--magnify .pw-lens__clone { filter: saturate(1.15) contrast(1.06); }
.pw-lens__glass::before { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 2; pointer-events: none; background: radial-gradient(circle, rgba(255,255,255,0) 58%, rgba(171,200,223,0.10) 78%, rgba(59,93,130,0.28) 100%); }
.pw-lens__handle { position: absolute; left: 50%; top: 100%; width: calc(var(--lens-size) * 0.17); height: calc(var(--lens-size) * 0.6); margin-left: calc(var(--lens-size) * -0.085); margin-top: calc(var(--lens-size) * -0.06); border-radius: 5px 5px 10px 10px; transform-origin: top center; transform: rotate(-38deg); z-index: 0;
  background: linear-gradient(90deg, #4E3727, #7B5B42 45%, #5B412E); box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 8px 16px -8px rgba(31,36,48,0.5); }
.pw-lens__handle::before { content: ""; position: absolute; left: -2px; right: -2px; top: 0; height: 22%; border-radius: 4px; background: linear-gradient(90deg, #8F6A22, #E5C878 50%, #8F6A22); }
.pw-lens--sweep { animation: pw-lens-sweep 2.6s var(--ease-sweep) infinite alternate; }
.pw-lens--magnify.pw-lens--sweep { animation: none; }   /* the magnifier drives its own sine sweep in JS */

/* ---- Navigation · gliding pill ------------------------------------------ */
.pw-topbar { height: var(--topbar-h); display: flex; align-items: center; gap: var(--s-6); padding: 0 var(--gutter); background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: var(--z-sticky); }
.pw-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.pw-brand img { width: 36px; height: 36px; object-fit: contain; }
.pw-brand__word { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 48; font-weight: 700; font-size: 1.35rem; letter-spacing: -0.01em; }
.pw-nav { position: relative; display: flex; gap: 2px; padding: 3px; border-radius: var(--r-md); }
.pw-nav a { position: relative; z-index: 1; padding: 8px 14px; border-radius: var(--r-sm); color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; transition: color var(--t-fast); }
.pw-nav a:hover { color: var(--text); }
.pw-nav a.is-active, .pw-nav a[aria-current="page"] { color: var(--text); }
.pw-glide { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: var(--r-sm); background: var(--bg-sheet); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line-soft); opacity: 0; pointer-events: none; z-index: 0;
  transition: transform var(--t-base) var(--ease-glide), width var(--t-base) var(--ease-glide), height var(--t-base) var(--ease-glide), opacity var(--t-fast); }
.pw-glide.is-on { opacity: 1; }
.pw-glide--brass { box-shadow: inset 0 0 0 1.5px rgba(194,149,56,0.35), var(--shadow-1); }

.pw-sidebar { position: relative; width: var(--sidebar-w); background: var(--bg-sidebar); border-right: 1px solid var(--line); padding: var(--s-5) var(--s-3); display: flex; flex-direction: column; gap: 2px; }
.pw-sidebar:not(:has(.pw-sidebar__foot)) { border-bottom: 8px solid var(--paper-400); }   /* the rule moves onto the foot when there is one */
.pw-sidebar__group { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); padding: var(--s-4) var(--s-3) var(--s-1); }
.pw-sidebar a { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; transition: color var(--t-fast); }
.pw-sidebar a .ph { font-size: 18px; color: var(--text-3); transition: color var(--t-fast); }
.pw-sidebar a:hover { color: var(--text); }
.pw-sidebar a.is-active { color: var(--text); }
.pw-sidebar a.is-active .ph { color: var(--brass-600); }
.pw-sidebar .pw-glide { border-radius: var(--r-sm); }
.pw-sidebar__count { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-3); }
/* the foot: Peeky's perch, then the wall he peeks over (the sidebar's bottom rule, grown tall enough to hold
   the secondary links). Peeky's body line rests on the wall's 6px top band and his paws hang over its edge. The foot
   and the wall stay unpositioned so the sidebar's glide pill paints over the wall. */
.pw-sidebar__foot { margin: auto calc(var(--s-3) * -1) calc(var(--s-5) * -1); padding-top: var(--s-4); flex: none; }
.pw-sidebar__perch { position: relative; height: 92px; }
.pw-sidebar__foot .pw-char { width: 88px; right: 16px; }
.pw-sidebar__wall { display: flex; flex-direction: column; gap: 2px; background: var(--paper-300); border-top: 6px solid var(--paper-400); padding: var(--s-3) var(--s-3) max(var(--s-5), env(safe-area-inset-bottom)); }
.pw-sidebar__wall a, .pw-sidebar__wall .pw-sidebar__btn { color: var(--text); }
.pw-sidebar__wall a .ph, .pw-sidebar__wall .pw-sidebar__btn .ph { color: var(--ink-700); }
.pw-sidebar__wall .pw-sidebar__ext { margin-left: auto; font-size: 14px; opacity: 0.7; }
.pw-sidebar__wall a:active, .pw-sidebar__wall .pw-sidebar__btn:active { background: var(--line-soft); }   /* press feedback where the glide is off (the drawer) */

.pw-tabs { position: relative; display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line); }
.pw-tabs button, .pw-tabs a { position: relative; z-index: 1; padding: 10px 14px; background: none; border: 0; font: 500 var(--fs-sm)/1 var(--font-ui); color: var(--text-2); cursor: pointer; text-decoration: none; border-radius: var(--r-sm) var(--r-sm) 0 0; transition: color var(--t-fast); }
.pw-tabs button:hover, .pw-tabs a:hover { color: var(--text); }
.pw-tabs .is-active { color: var(--text); }
.pw-tabs .is-active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2.5px; border-radius: 2px; background: var(--brass-500); }
.pw-tabs--pills { border: 0; background: var(--paper-200); padding: 4px; border-radius: var(--r-md); display: inline-flex; }
.pw-tabs--pills button, .pw-tabs--pills a { border-radius: var(--r-sm); }
.pw-tabs--pills .is-active { background: var(--bg-sheet); box-shadow: var(--shadow-1); }
.pw-tabs--pills .is-active::after { display: none; }
.pw-crumbs { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-3); }
.pw-crumbs a { color: var(--text-2); text-decoration: none; } .pw-crumbs a:hover { color: var(--text); }
.pw-crumbs .ph { font-size: 12px; }
.pw-steps { display: flex; gap: var(--s-2); align-items: center; }
.pw-step { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-3); }
.pw-step__dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line-strong); font-size: var(--fs-xs); font-weight: 600; }
.pw-step.is-done { color: var(--text-2); } .pw-step.is-done .pw-step__dot { background: var(--mint-500); border-color: var(--mint-500); color: var(--paper-0); }
.pw-step.is-current { color: var(--text); font-weight: 600; } .pw-step.is-current .pw-step__dot { background: var(--ink-800); border-color: var(--ink-800); color: var(--paper-0); box-shadow: var(--lens); }
.pw-steps__line { flex: 1; height: 1.5px; background: var(--line); min-width: 24px; }

/* ---- Tables ------------------------------------------------------------- */
.pw-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.pw-table th { text-align: left; font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); padding: 10px 14px; background: var(--bg-sidebar); border-bottom: 1px solid var(--line); }
.pw-table th:first-child { border-radius: var(--r-sm) 0 0 0; } .pw-table th:last-child { border-radius: 0 var(--r-sm) 0 0; }
.pw-table td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.pw-table tbody tr:hover td { background: rgba(51,57,69,0.03); }
.pw-table tbody tr:last-child td { border-bottom: 0; }
.pw-table .num { font-family: var(--font-mono); text-align: right; }
/* A header that sorts its column: <th aria-sort="descending"><a class="pw-sort is-on" href="?sort=created">Created<i class="ph ph-caret-down"></i></a></th> */
.pw-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; white-space: nowrap; border-radius: var(--r-xs); }
.pw-sort .ph { font-size: 12px; opacity: 0.45; }
.pw-sort:hover, .pw-sort.is-on { color: var(--text); }
.pw-sort:hover .ph, .pw-sort.is-on .ph { opacity: 1; }
.pw-sort:focus-visible { outline: none; box-shadow: var(--lens); }
/* A moment as a date with its time on the line below: <time class="pw-when" datetime="…"><span class="pw-when__date">13 Oct 2026</span><span class="pw-when__time">14:05:09</span></time>
   PW.when rewrites both in the viewer's own date format and time zone. A .pw-when--short is one line of text inside a tag
   or a sentence: "21 Oct 12:30 UTC", which PW.when turns into "15:30" today and "22 Oct 01:07" on another day. */
.pw-when { display: inline-grid; gap: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pw-when__time { font-size: var(--fs-xs); color: var(--text-3); }

/* ---- Feedback ----------------------------------------------------------- */
.pw-banner { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4) var(--s-5); border-radius: var(--r-xl); background: var(--peeky-100); border: 1px solid color-mix(in srgb, var(--peeky-500) 30%, transparent); color: var(--peeky-800); font-size: var(--fs-sm); }
.pw-banner .ph { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.pw-banner strong { display: block; margin-bottom: 2px; }
.pw-banner--success { background: var(--mint-100); border-color: color-mix(in srgb, var(--mint-500) 40%, transparent); color: var(--mint-800); }
.pw-banner--warning { background: var(--brass-100); border-color: color-mix(in srgb, var(--brass-500) 40%, transparent); color: var(--brass-700); }
.pw-banner--danger  { background: var(--brick-100); border-color: color-mix(in srgb, var(--brick-500) 40%, transparent); color: var(--brick-700); }
.pw-banner--watch   { background: var(--lavender-100); border-color: color-mix(in srgb, var(--lavender-500) 40%, transparent); color: var(--lavender-800); }
:root[data-theme="dark"] .pw-banner { background: var(--sev-info-bg); color: var(--sev-info-text); }
:root[data-theme="dark"] .pw-banner--success { background: var(--sev-pass-bg); color: var(--sev-pass-text); }
:root[data-theme="dark"] .pw-banner--warning { background: var(--sev-high-bg); color: var(--sev-high-text); }
:root[data-theme="dark"] .pw-banner--danger { background: var(--sev-critical-bg); color: var(--sev-critical-text); }
:root[data-theme="dark"] .pw-banner--watch { background: var(--sev-watch-bg); color: var(--sev-watch-text); }
.pw-toast { display: flex; align-items: center; gap: var(--s-3); padding: 12px 16px 12px 12px; min-width: 280px; max-width: 420px; background: var(--ink-800); color: var(--paper-50); border-radius: var(--r-lg); box-shadow: var(--shadow-3); font-size: var(--fs-sm); }
.pw-toast img { width: 40px; height: 40px; object-fit: contain; }
.pw-toast .ph { font-size: 20px; color: var(--brass-300); }
.pw-toast__action { margin-left: auto; color: var(--brass-300); font-weight: 600; background: none; border: 0; cursor: pointer; font: inherit; }
:root[data-theme="dark"] .pw-toast { background: var(--paper-0); color: var(--ink-800); }
.pw-tooltip { display: inline-block; padding: 6px 10px; border-radius: var(--r-xs); background: var(--ink-800); color: var(--paper-50); font-size: var(--fs-xs); line-height: 1.3; box-shadow: var(--shadow-2); max-width: 260px; }
.pw-modal { width: min(560px, calc(100vw - 32px), 100%); background: var(--bg-sheet); border-radius: var(--r-2xl); box-shadow: var(--shadow-3); padding: var(--s-8); display: grid; gap: var(--s-5); }
.pw-modal__actions { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-2); }
.pw-menu { position: relative; min-width: 220px; background: var(--bg-sheet); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: 6px; display: grid; gap: 2px; }
.pw-menu a, .pw-menu button { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: var(--r-sm); background: none; border: 0; text-align: left; font: 500 var(--fs-sm)/1 var(--font-ui); color: var(--text); text-decoration: none; cursor: pointer; }
.pw-menu .ph { font-size: 18px; color: var(--text-3); }
.pw-menu hr { margin: 4px 0; }
.pw-menu .is-danger { color: var(--brick-600); }
.pw-menu .pw-glide { background: var(--paper-150); box-shadow: none; }
.pw-menu[hidden] { display: none; }
.pw-menu form { display: contents; }
.pw-menu button { width: 100%; }
.pw-menu .is-warn { color: var(--warning); }
.pw-menu .is-danger .ph, .pw-menu .is-warn .ph { color: currentColor; }
.pw-menu :disabled { opacity: 0.55; cursor: not-allowed; }
.pw-menu small { display: block; margin-top: 4px; font-size: var(--fs-xs); font-weight: 400; color: var(--text-3); }
:root[data-theme="dark"] .pw-menu .is-danger { color: var(--sev-critical-text); }
:root[data-theme="dark"] .pw-menu .is-warn { color: var(--sev-high-text); }
:root[data-theme="dark"] .pw-menu .pw-glide { background: var(--line); }
/* More menu: a three-dot button that opens a pw-menu beside it, for the actions of a table row. PW.init wires it.
   <div class="pw-more"><button class="pw-btn pw-btn--ghost pw-btn--icon" aria-haspopup="menu" aria-expanded="false" aria-label="More actions">…</button>
     <div class="pw-menu pw-more__menu" role="menu" hidden>…</div></div> */
.pw-more { position: relative; display: inline-flex; }
.pw-more__menu { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; width: max-content; min-width: 200px; max-width: min(300px, calc(100vw - 32px)); text-align: left; white-space: normal; animation: pw-more-in var(--t-fast) var(--ease-soft); }
.pw-more.is-up .pw-more__menu { top: auto; bottom: calc(100% + 6px); }
.pw-more.is-start .pw-more__menu { right: auto; left: 0; }
.pw-more > .pw-btn--icon.pw-btn--sm { width: 36px; min-height: 36px; }
.pw-more > .pw-btn .ph { font-size: 20px; }
.pw-more > .pw-btn[aria-expanded="true"] { background: var(--btn-hover); color: var(--text); }
@keyframes pw-more-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .pw-more__menu { animation: none; } }

/* Empty state */
.pw-empty { display: grid; justify-items: center; text-align: center; gap: var(--s-3); padding: var(--s-10) var(--s-6) var(--s-8); }
.pw-empty img { width: 130px; filter: drop-shadow(0 6px 10px rgba(31,36,48,0.14)); }
.pw-empty h3 { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 48; font-weight: 600; font-size: var(--fs-xl); margin: var(--s-2) 0 0; }
.pw-empty p { margin: 0; color: var(--text-2); max-width: 38ch; }
.pw-skeleton { border-radius: var(--r-xs); background: linear-gradient(90deg, var(--paper-200) 0%, var(--paper-300) 50%, var(--paper-200) 100%); background-size: 200% 100%; animation: pw-shimmer 1.6s var(--ease-settle) infinite; }
@keyframes pw-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.pw-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--peeky-200); color: var(--peeky-800); font: 600 var(--fs-xs)/1 var(--font-ui); overflow: hidden; }
.pw-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* The Claude mark in a tile: Anthropic's mark on a wash of its own colour, beside a title or in a card head. */
.pw-ico-claude { --claude: #D97757; flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--r-md); display: inline-grid; place-items: center; background: color-mix(in srgb, var(--claude) 14%, var(--bg-sheet)); border: 1px solid color-mix(in srgb, var(--claude) 38%, transparent); }
.pw-ico-claude img { width: 20px; height: 20px; display: block; }
.pw-ico-claude--lg { width: 52px; height: 52px; border-radius: var(--r-lg); }
.pw-ico-claude--lg img { width: 28px; height: 28px; }
.pw-kbd { display: inline-block; padding: 2px 6px; border-radius: 5px; border: 1px solid var(--line-strong); border-bottom-width: 2px; background: var(--bg-sheet); font: 500 var(--fs-2xs)/1.3 var(--font-mono); color: var(--text-2); }
.pw-code { font-family: var(--font-mono); font-size: 0.9em; background: var(--paper-200); padding: 1px 6px; border-radius: 5px; color: var(--ink-700); }

/* ---- Plans · Trial, Plus, Accreditation -----------------------------------
   Plan tags label a company's status. Plan cards show what each step opens and
   what it costs: one line of price, a short list, one action. The step the
   company is on gets .is-current; the next step carries the mint button. */
.pw-tag--plus { background: var(--sev-info-bg); color: var(--sev-info-text); }
.pw-tag--accredited { background: var(--sev-pass-bg); color: var(--sev-pass-text); }
.pw-tag .ph, .pw-tag .ph-fill { font-size: 13px; margin-right: 5px; }
.pw-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); align-items: stretch; }
.pw-plan { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--s-4); min-width: 0; padding: var(--s-6); background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-1); }
.pw-plan.is-current { background: var(--bg-sheet); border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.pw-plan__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.pw-plan__name { font: 600 var(--fs-md)/1.3 var(--font-ui); margin: 0; }
.pw-plan__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0; }
.pw-plan__amount { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 72; font-size: var(--fs-3xl); font-weight: 600; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.pw-plan__term { font-size: var(--fs-sm); color: var(--text-2); }
.pw-plan__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; align-content: start; font-size: var(--fs-sm); color: var(--text); }
.pw-plan__list li { display: flex; gap: 9px; align-items: flex-start; line-height: 1.4; }
.pw-plan__list .ph { font-size: 17px; flex-shrink: 0; margin-top: 1px; color: var(--mint-600); }
.pw-plan__list li.is-off { color: var(--text-3); }
.pw-plan__list li.is-off .ph { color: var(--text-3); }
.pw-plan__foot { display: grid; gap: var(--s-2); }
.pw-plan__foot .pw-btn { width: 100%; }
.pw-plan__foot .pw-caption { margin: 0; }
@media (max-width: 900px) { .pw-plans { grid-template-columns: 1fr; } }

/* ---- Layout helpers ----------------------------------------------------- */
.pw-container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }
.pw-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100dvh; }
.pw-grid { display: grid; gap: var(--s-4); }
.pw-grid--2 { grid-template-columns: repeat(2, 1fr); } .pw-grid--3 { grid-template-columns: repeat(3, 1fr); } .pw-grid--4 { grid-template-columns: repeat(4, 1fr); }
.pw-stack { display: grid; gap: var(--s-3); } .pw-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
@media (max-width: 900px) { .pw-grid--3, .pw-grid--4 { grid-template-columns: repeat(2, 1fr); } .pw-shell { grid-template-columns: 1fr; } }

/* ---- Phones · the sidebar becomes a drawer ---------------------------------
   Under 900px (or always inside .pw-shell--phone) the sidebar slides in from the
   left behind a scrim, opened by the nine-dot button in .pw-mobilebar. The top bar
   keeps only the brand and that button. Peeky stays at the drawer's foot. */
.pw-mobilebar { display: none; height: 56px; align-items: center; gap: var(--s-3); padding: 0 var(--s-4); background: var(--bg-sidebar); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: var(--z-sticky); }
.pw-mobilebar .pw-brand { margin-right: auto; }
.pw-mobilebar .pw-brand img { width: 32px; height: 32px; }
.pw-mobilebar .pw-brand__word { font-size: 1.2rem; }
.pw-menu-btn { width: 44px; height: 44px; border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--bg-sheet); display: grid; place-items: center; font-size: 24px; color: var(--text); cursor: pointer; box-shadow: var(--shadow-1); transition: background var(--t-fast), transform var(--t-fast); }
.pw-menu-btn:active { transform: scale(0.96); }
.pw-menu-btn:focus-visible { box-shadow: var(--lens); }
.pw-scrim { position: fixed; inset: 0; touch-action: none; overscroll-behavior: contain; background: var(--bg-overlay); opacity: 0; pointer-events: none; transition: opacity var(--t-base) var(--ease-soft); z-index: calc(var(--z-modal) - 1); }
.pw-scrim.is-on { opacity: 1; pointer-events: auto; }
.pw-shell--phone { position: relative; overflow: hidden; grid-template-columns: 1fr; }
.pw-shell--phone .pw-scrim { position: absolute; }
.pw-shell--phone .pw-mobilebar, .pw-shell--phone .pw-mobilebar { display: flex; }
@media (max-width: 900px) { .pw-shell .pw-mobilebar { display: flex; } }
.pw-shell--phone .pw-sidebar,
.pw-shell-drawer .pw-sidebar { position: absolute; top: 0; left: 0; bottom: 0; width: min(300px, 84%); height: 100%; z-index: var(--z-modal); box-shadow: var(--shadow-3); transform: translateX(-104%); transition: transform var(--t-slow) var(--ease-soft); overflow-y: auto; }
.pw-shell--phone .pw-sidebar.is-open, .pw-shell-drawer .pw-sidebar.is-open { transform: none; }
@media (max-width: 900px) {
  .pw-shell:not(.pw-shell--phone) .pw-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 84vw); height: auto; overscroll-behavior: contain; z-index: var(--z-modal); box-shadow: var(--shadow-3); transform: translateX(-104%); transition: transform var(--t-slow) var(--ease-soft); overflow-y: auto; }
  .pw-shell:not(.pw-shell--phone) .pw-sidebar.is-open { transform: none; }
  .pw-sidebar .pw-glide { display: none; }   /* no hover on touch: the glide is off in the drawer */
}
.pw-shell--phone .pw-sidebar .pw-glide { display: none; }
.pw-sidebar__close { margin-left: auto; width: 36px; height: 36px; border-radius: var(--r-sm); border: 0; background: transparent; color: var(--text-2); font-size: 20px; display: none; place-items: center; cursor: pointer; }
.pw-sidebar__close:hover { background: rgba(51,57,69,0.06); }
.pw-shell--phone .pw-sidebar__close { display: grid; }
@media (max-width: 900px) { .pw-shell .pw-sidebar__close { display: grid; } }
.pw-sidebar__head { display: flex; align-items: center; gap: var(--s-2); padding: 4px 8px 14px; }
@media (prefers-reduced-motion: reduce) { .pw-sidebar { transition: none !important; } }
@media (max-width: 640px) { .pw-grid--2, .pw-grid--3, .pw-grid--4 { grid-template-columns: 1fr; } .pw-finding__meta { margin-left: 0; } .pw-finding__body { padding: var(--s-4) var(--s-4) var(--s-5); } .pw-card { padding: var(--s-5) var(--s-4); } .pw-finding__plain { display: block; padding: var(--s-4); } .pw-finding__plain::before { float: left; width: 38px; height: 38px; margin: 2px 12px 4px 0; } .pw-finding__plain > div { display: block; } .pw-finding__plain b { display: block; margin: 4px 0 6px; } .pw-input-group { grid-template-columns: 1fr; } .pw-topbar { gap: var(--s-3); } .pw-topbar .pw-nav { display: none; } .pw-topbar .pw-btn--ghost { display: none; } }

/* ---- Motion ------------------------------------------------------------- */
@keyframes pw-peek { from { opacity: 0; transform: translateY(14px) rotate(-3deg); } to { opacity: 1; transform: none; } }
/* the throw: a sheet of paper tossed onto the desk. Enters from below-left, slanted, overshoots a touch and settles flat. */
@keyframes pw-throw {
  0%   { opacity: 0; transform: translate(-28px, 44px) rotate(-5deg) scale(0.97); }
  55%  { opacity: 1; transform: translate(6px, -6px) rotate(1.6deg) scale(1.01); }
  80%  { transform: translate(-2px, 2px) rotate(-0.5deg) scale(1); }
  100% { opacity: 1; transform: none; }
}
@keyframes pw-settle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pw-wobble { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes pw-lens-sweep { from { transform: translateX(-36%) rotate(-6deg); } to { transform: translateX(36%) rotate(6deg); } }
.pw-anim-peek { animation: pw-peek var(--t-story) var(--ease-peek) both; }
.pw-anim-throw { animation: pw-throw 640ms var(--ease-soft) both; transform-origin: 30% 100%; }
.pw-anim-settle { animation: pw-settle var(--t-slow) var(--ease-soft) both; }
.pw-anim-wobble { animation: pw-wobble 1.2s ease-in-out 3; transform-origin: 50% 90%; }
.pw-anim-delay-1 { animation-delay: 80ms; } .pw-anim-delay-2 { animation-delay: 160ms; } .pw-anim-delay-3 { animation-delay: 240ms; }
/* a list of thrown sheets: each child lands 90ms after the previous, up to eight */
.pw-throw-list > * { animation: pw-throw 640ms var(--ease-soft) both; transform-origin: 30% 100%; }
.pw-throw-list > :nth-child(2) { animation-delay: 90ms; }  .pw-throw-list > :nth-child(3) { animation-delay: 180ms; }
.pw-throw-list > :nth-child(4) { animation-delay: 270ms; } .pw-throw-list > :nth-child(5) { animation-delay: 360ms; }
.pw-throw-list > :nth-child(6) { animation-delay: 450ms; } .pw-throw-list > :nth-child(7) { animation-delay: 540ms; }
.pw-throw-list > :nth-child(n+8) { animation-delay: 630ms; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }