/* wp-mac.css — LOCKED visual contract for the WordPerfect-2.1-for-Mac look (HARDCORE / true-pixel).
   Single source of truth. Sites COMPOSE these classes; they never hand-roll retro styles.
   Change a value HERE and everything inherits. Per-site deviation is what causes drift and "meh".

   FONT: ChiKareGo2 by Giles Booth — a true 16px-grid pixel recreation of Susan Kare's Chicago.
   LICENSE: Creative Commons Attribution (CC BY). Commercial use OK, but you MUST credit
   "Giles Booth" somewhere visible (footer / credits / LICENSE). Do that; it's the license terms.
   Edit the @font-face src to your self-hosted woff2 (literal path — var() does NOT work in
   @font-face). PIXEL-GRID RULE: this font is crisp ONLY at 16px and integer multiples (32, 48).
   Never use 11/12/13/15px — it interpolates to mush. All --wpm-sz* below obey this. */

@font-face{
  font-family:'ChiKareGo2';
  /* Self-hosted; resolves against this stylesheet's URL (repo: fonts/, vendored: /wp-mac/fonts/).
     Attribution: font by Giles Booth (CC BY). */
  src:url('fonts/ChiKareGo2.woff2') format('woff2');
  /* block, not swap: a fallback→ChiKareGo2 swap changes glyph metrics and would
     reflow any fixed-height box (VerifyTrace). Pair with <link rel=preload> so the
     invisibility period is imperceptible. (P70 Gate 1 — no swap may change a box.) */
  font-weight:400 700; font-display:block;
}

:root{
  /* palette — PURE 1-bit. No near-blacks, no soft greys for text. */
  --wpm-ink:#000;              /* all text, all borders */
  --wpm-paper:#fff;            /* all surfaces */
  --wpm-hair:#ccc;             /* row separators only */
  --wpm-mute:#666;             /* "querying…" transient only */
  --wpm-tag:#555;              /* the one small caption line */
  --wpm-fill:#f2f2f2;          /* toolbar/status fill */
  --wpm-dither-a:#b8b8b8;      /* desktop dither */
  --wpm-dither-b:#cfcfcf;

  /* accent — electric blue (P70 Gate 0). Blue is STATE, never decoration.
     Permitted: scan bar, active-row indicator, OBSERVED chip, sig/key-id line,
     focus rings, links. Never on the deep blue-black surface — #fff or #000 only.
     Contrast enforced by scripts/contrast-gate.mjs (build fails <4.5:1 for text). */
  --tm-blue:#0040FF;           /* primary accent on #fff */
  --tm-blue-press:#0030CC;     /* active/pressed on light surfaces */
  --tm-blue-on-dark:#5C8DFF;   /* the ONLY blue permitted on #000 */
  --tm-blue-wash:#E6ECFF;      /* fill behind blue text */

  /* structure — integers only. No sub-pixel, no soft shadows. */
  --wpm-border:2px solid var(--wpm-ink);
  --wpm-hairline:1px solid var(--wpm-ink);
  --wpm-shadow:3px 3px 0 var(--wpm-ink);     /* hard, zero blur */
  --wpm-shadow-sm:2px 2px 0 var(--wpm-ink);
  --wpm-radius-btn:8px;                       /* the ONLY rounded thing */

  /* type — PIXEL GRID. Only these sizes are crisp. Do not introduce off-grid sizes. */
  --wpm-sz:16px;               /* base / body / all UI text (16px floor) */
  --wpm-sz-lg:32px;            /* headings / hero / verdict name (2x) */
  --wpm-lh:1.25;               /* leading may be fractional; only font-size must be on-grid */
  --wpm-font:'ChiKareGo2','ChicagoFLF','Geneva','Chicago',-apple-system,sans-serif;
  --wpm-mono:'Monaco','Courier New',monospace;

  /* reveal timing (static/marketing) */
  --wpm-stagger:760ms;
}

/* FIDELITY RESET — scope everything retro under .wpm; kill inherited softness; force crisp pixels. */
.wpm, .wpm *{box-sizing:border-box; border-radius:0;}
.wpm{font-family:var(--wpm-font); color:var(--wpm-ink); font-size:var(--wpm-sz); line-height:var(--wpm-lh);
  -webkit-font-smoothing:none; -moz-osx-font-smoothing:grayscale; font-smooth:never;}
.wpm-mono{font-family:var(--wpm-mono); font-size:var(--wpm-sz);}
.wpm img, .wpm svg{image-rendering:pixelated;}
/* NOTE: Firefox ignores font-smoothing; crispness there relies on on-grid 16/32px sizing. */

/* window */
.wpm-window{background:var(--wpm-paper); border:var(--wpm-border); box-shadow:var(--wpm-shadow);}
.wpm-titlebar{display:flex; align-items:center; gap:6px; min-height:26px; padding:2px 6px;
  border-bottom:var(--wpm-border);}
.wpm-close{width:12px; height:12px; border:var(--wpm-border); background:var(--wpm-paper); flex:none;}
.wpm-pinstripe{flex:1; height:12px;
  background:repeating-linear-gradient(var(--wpm-ink) 0 1px, var(--wpm-paper) 1px 3px);}
.wpm-title{padding:0 8px; font-size:var(--wpm-sz); white-space:nowrap;}

/* menu bar + button bar */
.wpm-menubar{display:flex; gap:16px; padding:3px 10px; font-size:var(--wpm-sz);
  border-bottom:var(--wpm-hairline);}
.wpm-buttonbar{display:flex; gap:3px; padding:4px 10px; font-size:var(--wpm-sz);
  border-bottom:var(--wpm-hairline); background:var(--wpm-fill);}
.wpm-buttonbar > *{border:var(--wpm-hairline); padding:1px 6px; background:var(--wpm-paper);}

/* buttons — classic rounded rect, hard shadow, invert on press. No synthetic bold (breaks pixels);
   emphasis comes from inversion/size, the authentic Mac way. */
.wpm-btn{font-family:var(--wpm-font); font-size:var(--wpm-sz); padding:5px 16px;
  border:var(--wpm-border); border-radius:var(--wpm-radius-btn); background:var(--wpm-paper);
  box-shadow:var(--wpm-shadow-sm); cursor:pointer; line-height:1.1;}
.wpm-btn:active{background:var(--wpm-ink); color:var(--wpm-paper); box-shadow:none;
  transform:translate(2px,2px);}
.wpm-btn:focus-visible{outline:2px dotted var(--wpm-ink); outline-offset:2px;}
.wpm-btn--default{box-shadow:var(--wpm-shadow-sm), 0 0 0 4px var(--wpm-paper), 0 0 0 6px var(--wpm-ink);}

/* form controls */
.wpm-field{border:var(--wpm-hairline); background:var(--wpm-paper); padding:4px 6px;
  font-family:var(--wpm-mono); font-size:var(--wpm-sz); box-shadow:inset 1px 1px 0 #999;}
.wpm-check{width:16px; height:16px; border:var(--wpm-hairline); background:var(--wpm-paper);
  display:inline-flex; align-items:center; justify-content:center; font-size:var(--wpm-sz);}

/* pills + signature chip (used by VerifyTrace and status UIs) */
.wpm-pill{font-size:var(--wpm-sz); padding:1px 6px; border:var(--wpm-hairline); white-space:nowrap;}
.wpm-pill--bad{background:var(--wpm-ink); color:var(--wpm-paper);}
.wpm-sig{font-size:var(--wpm-sz); border:var(--wpm-hairline); padding:0 5px; white-space:nowrap;}

/* status bar */
.wpm-statusbar{display:flex; justify-content:space-between; font-size:var(--wpm-sz); padding:3px 10px;
  border-top:var(--wpm-hairline); background:var(--wpm-fill);}

/* desktop backdrop (for framed mockups / hero) */
.wpm-desktop{background:repeating-conic-gradient(var(--wpm-dither-a) 0 25%, var(--wpm-dither-b) 0 50%) 0 0 / 6px 6px;
  padding:20px;}

/* progress (barber pole) */
.wpm-bar{height:16px; border:var(--wpm-hairline); background:var(--wpm-paper); overflow:hidden;}
.wpm-bar > i{display:block; height:100%;
  background:repeating-linear-gradient(-45deg, var(--wpm-ink) 0 4px, var(--wpm-paper) 4px 8px);
  animation:wpm-march .5s linear infinite;}
@keyframes wpm-march{to{background-position:16px 0;}}

@media (prefers-reduced-motion:reduce){ .wpm-bar > i{animation:none;} }

/* ── chrome extensions (v0.3.1, additive — no locked value above is altered) ──
   Interactive chrome states the shell needs: nav items, button-bar buttons,
   status-bar cells. Same idiom: inversion is the only emphasis. */
.wpm-menu-item{border:none; background:none; font:inherit; color:var(--wpm-ink);
  padding:1px 6px; cursor:pointer;}
.wpm-menu-item[aria-current="page"]{background:var(--wpm-ink); color:var(--wpm-paper);}
.wpm-menu-item:focus-visible{outline:2px dotted var(--wpm-ink); outline-offset:1px;}
.wpm-bb-btn{font:inherit; color:var(--wpm-ink); cursor:pointer;}
.wpm-bb-btn:active, .wpm-bb-btn[aria-pressed="true"], .wpm-bb-btn[aria-current]{
  background:var(--wpm-ink); color:var(--wpm-paper);}
.wpm-bb-btn:focus-visible{outline:2px dotted var(--wpm-ink); outline-offset:1px;}
.wpm-statusbar{flex-wrap:wrap;}  /* cells wrap rather than force page hscroll at 375 */
.wpm-status-cell{padding:0 8px; border-right:var(--wpm-hairline); white-space:nowrap;}
.wpm-status-cell:first-child{padding-left:0;}
.wpm-status-cell:last-child{border-right:none; padding-right:0;}

/* ── VerifyTrace host geometry (P70 Gate 1 — zero CLS) ──
   Reserve the component's full height in LIGHT DOM, including before the custom
   element upgrades (:not(:defined)), so the page holds the space from first paint
   and nothing shifts when <verify-trace> hydrates. The shadow :host repeats these
   values authoritatively. Height is derived: head 48 + rows 4×64 + rule 16 +
   verdict 96 + foot 32 = 448 (28×16 grid); mobile rows 4×96 + verdict 128 = 608. */
verify-trace, verify-trace:not(:defined){display:block; height:448px; contain:layout style;}
@media (max-width:640px){
  verify-trace, verify-trace:not(:defined){height:608px;}
}