/* ==========================================================================
   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); }
.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; }
.pw-btn--danger  { --btn-bg: var(--brick-100); --btn-fg: var(--brick-700); --btn-line: var(--brick-200); --btn-hover: var(--brick-200); }
.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); }
.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; }
.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%; }
.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 · 631x603 · aspect 0.956 · cut row 1.0; -3px hides the 2px soft fringe below the outer border */
.pw-char--peek-bl { left: 8px; bottom: -3px; }
.pw-char--peek-br { right: 8px; bottom: -3px; }
.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.6d72be9054eb.png");
  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.4e973dddc124.png"); }
.pw-note--alert { --note-bg: var(--brick-100); --note-disc: var(--lavender-300); --note-portrait: url("../img/alpha/officer-stern.49ead00aed4c.png"); }
.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.b4f8f8a279fb.png") 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-600); display: inline-flex; align-items: center; gap: 3px; }
.pw-stat__delta.is-down { color: var(--brick-600); }
.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: carries the sidebar's 8px bottom rule; Peeky peeks up and overlaps it by 4px */
.pw-sidebar__foot { margin: auto calc(var(--s-3) * -1) calc(var(--s-5) * -1); position: relative; height: 92px; border-bottom: 8px solid var(--paper-400); overflow: visible; flex: none; }
.pw-sidebar__foot .pw-char { width: 88px; right: 16px; bottom: -4px; }

.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 { 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; }

/* ---- 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; }

/* 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; }
.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; } }