/* SPI, round 7. Palette and licensed type: hai-redesign-s198/spi6/tokens.css.
   The working pages own layout, visibility, density and responsive behavior.
   This final layer translates their existing HSL roles, then dresses components.
   The smaller app scale deliberately preserves the current tool ergonomics. */
@font-face { font-family: "Hammer Display"; src: url('/fonts/hammer-display.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: STIX; src: url('/fonts/stixtwotext.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: Public; src: url('/fonts/publicsans.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --spi-paper: #f4f4f0; --spi-panel: #fefefe; --spi-ink: #262326;
  --spi-muted: #535353; --spi-teal: #066a7a; --spi-green: #1c4747;
  --spi-screen: #e2e2e2; --spi-warm: #ece5dd; --spi-rule: #777;
  --spi-source-stock: #9eb9b9; --spi-input-stock: #c9d277;
  --spi-source-field: #dce1d8; --spi-source-ink: #1e4e57;
  --spi-band: #262326; --spi-band-text: #fefefe;
  --spi-display: "Hammer Display", Georgia, serif;
  --spi-body: STIX, Georgia, serif; --spi-ui: Public, Arial, sans-serif;
  --spi-space-1: 4px; --spi-space-2: 8px; --spi-space-3: 12px;
  --spi-space-4: 16px; --spi-space-5: 24px; --spi-space-6: 32px;
  /* Corner scale shared with the desktop app (Ray, s200, 2026-10-02). */
  --spi-radius-sm: 4px; --spi-radius-md: 8px; --spi-radius-lg: 12px;
  /* Clipped counters: about 13.5% of the counter's short side. */
  --spi-counter-clip: .135;
}
body.spi-page, body.spi-page :is(.hai-page, .wargame-page, .chat-page) {
  --serif: var(--spi-body); --sans: var(--spi-ui);
  /* Exact HSL equivalents of the SPI6 palette, for the legacy components. */
  --background: 60 15.3846% 94.902%; --foreground: 300 4.1096% 14.3137%;
  --card: 0 0% 99.6078%; --card-foreground: 300 4.1096% 14.3137%;
  --popover: 0 0% 99.6078%; --popover-foreground: 300 4.1096% 14.3137%;
  --primary: 188.2759 90.625% 25.098%; --primary-foreground: 0 0% 99.6078%;
  --secondary: 300 4.1096% 14.3137%; --secondary-foreground: 0 0% 99.6078%;
  --accent: 65.934066 50.276243% 64.509804%; --accent-foreground: 300 4.1096% 14.3137%;
  --muted: 0 0% 88.6275%; --muted-foreground: 0 0% 32.549%;
  --border: 0 0% 46.6667%; --border-strong: 0 0% 46.6667%;
  --input: 0 0% 46.6667%; --ring: 188.2759 90.625% 25.098%;
  --destructive: 189.473684 48.717949% 22.941176%; --destructive-foreground: 0 0% 99.6078%;
  --rule: 0 0% 46.6667%; --wg-radius: var(--spi-radius-md);
  background: hsl(var(--background)); color: hsl(var(--foreground));
  font-family: var(--spi-body);
}
body.spi-page :is(.wargame-page, .chat-page) { font-family: var(--spi-ui); }
body.spi-page:has(> .dark),
body.spi-page :is(.hai-page, .wargame-page, .chat-page).dark {
  --background: 300 4.1096% 14.3137%; --foreground: 60 15.3846% 94.902%;
  --card: 0 0% 19.6078%; --card-foreground: 60 15.3846% 94.902%;
  --popover: 0 0% 19.6078%; --popover-foreground: 60 15.3846% 94.902%;
  --primary: 180.000000 16.167665% 67.254902%; --primary-foreground: 300 4.1096% 14.3137%;
  --muted: 0 0% 26.6667%; --muted-foreground: 0 0% 88.6275%;
  --border: 0 0% 65.49%; --border-strong: 0 0% 65.49%;
  --input: 0 0% 65.49%; --ring: 65.934066 50.276243% 64.509804%; --rule: 0 0% 65.49%;
  --destructive: 65.934066 50.276243% 64.509804%; --destructive-foreground: 300 4.1096% 14.3137%;
}
body.spi-page :is(button, input, select, textarea, .wg-topbar, .wg-nav-tab, .wg-btn, .wg-foot, .hai-footer) { font-family: var(--spi-ui); }
body.spi-page :is(.wg-topbar, .topbar) { border-bottom: 3px solid var(--spi-ink); }
/* Corners. sm: controls, chips, badges, tabs. md: cards, panels, notices,
   table containers. lg: dialogs and feature blocks. Bands, the top bar, rules
   and cells inside a rounded container stay square. */
body.spi-page :is(.wg-nav-tab, .wg-btn, .wg-icon-btn, .wg-badge, .wg-subscriber-btn, .wg-cost-pill, .wg-challenge-pill, .hai-tier-badge, .hai-stamp, .hai-cta-stamp, .btn, .token-input, .wg-wt-collapse, .wg-wt-turn-n, .wg-wt-sit-tag, .wg-wt-stamp, .wg-orders-hd-l .stamp, .sb-label, .badge, .wg-rules-pdf, .wg-image-pick, .wg-campaign-picker) { border-radius: var(--spi-radius-sm); box-shadow: none; }
body.spi-page :is(.wg-turncard, .hai-tier, .hai-screenshot, .card, .banner, .wg-wt-sit, .wg-see-board, .wg-mode-toggle, .hai-marshall, .hai-edwards, .hai-hero-ctas, .wg-card, .wg-orders, .wg-session-log, .wg-campaign-list, .wg-footer-note, .ks-empty-hint, .mx-empty-hint, .ks-turn, .mx-turn, .example-panel, .post-toc, .post-disclosure, .related-card, .featured, .drafts, .phase-card, .horizon, .traj, .preview-card, .caveats, .files, .hai-plan-card) { border-radius: var(--spi-radius-md); box-shadow: none; }
body.spi-page :is(.wg-issue-row, .mx-submit-row, .ks-submit-row, .hai-rpg-mech, .wg-wt-sit-text.scroll, .ch-composer) { border-radius: var(--spi-radius-sm); }
body.spi-page :is(.issue, .section-num, .masthead-stamp, .stage, .tag, .stamp, .axis-chip, .phase-stamp, code) { border-radius: var(--spi-radius-sm); }
body.spi-page :is(.wg-wt, .wg-subscriber-dialog, .ch-confirm-dialog) { border-radius: var(--spi-radius-lg); }
/* Rounded containers clip their bands and cells to the corner (clip, not
   hidden: no scroll container, so sticky children keep working). */
body.spi-page :is(.hai-tier, .wg-card, .wg-orders, .wg-wt, .wg-see-board, .wg-wt-sit, .card, .traj, .caveats, .preview-card, .hai-plan-card, .featured) { overflow: clip; }
/* Counters: the brand mark and the turn counter are clipped counters. */
body.spi-page :is(.wg-brand-mark, .wg-tc-num) { border-radius: calc(26px * var(--spi-counter-clip)); box-shadow: none; }
body.spi-page .wg-brand-mark { background: var(--spi-band); color: var(--spi-band-text); border: 1px solid currentColor; outline: 1px solid var(--spi-band); font-family: var(--spi-ui); font-weight: 800; }
body.spi-page .wg-brand-mark::after { background: none; }
body.spi-page .wg-brand-name { font-family: var(--spi-ui); font-weight: 800; letter-spacing: -.035em; }
body.spi-page .wg-nav-tab { padding-inline: 8px; }
body.spi-page :is(.wg-nav-tab.active, .wg-nav-tab[aria-current=page]) { background: var(--spi-source-field); color: var(--spi-source-ink); box-shadow: inset 0 -2px var(--spi-teal); }
body.spi-page :is(.wg-topbar, .topbar) a { text-decoration: none; }

/* Top bar (Ray, s200, 2026-10-02): light mode reads light from the very top.
   Paper stock, ink type, a 3px ink rule; the active tab is an ink chip. The
   ink band is the dark-mode bar only. Values match the desktop app's bar. */
body.spi-page :is(.wg-topbar, .topbar) { background: var(--spi-paper); color: var(--spi-ink); border-bottom: 3px solid var(--spi-ink); backdrop-filter: none; }
body.spi-page :is(.wg-topbar .wg-brand, .wg-topbar .wg-nav-tab, .topbar a, .topbar .brand) { color: var(--spi-ink); }
body.spi-page .wg-topbar .wg-nav-tab { font-weight: 500; border-radius: var(--spi-radius-sm); }
body.spi-page .wg-topbar .wg-nav-tab:hover:not(.active) { background: var(--spi-screen); color: var(--spi-ink); }
body.spi-page .wg-topbar :is(.wg-nav-tab.active, .wg-nav-tab[aria-current=page]) { background: var(--spi-ink); color: var(--spi-paper); box-shadow: none; font-weight: 700; }
body.spi-page .wg-topbar .wg-icon-btn { color: var(--spi-ink); border-color: var(--spi-rule); background: transparent; }
body.spi-page .wg-topbar .wg-icon-btn:hover { background: var(--spi-screen); }
body.spi-page .dark :is(.wg-topbar, .topbar) { background: var(--spi-band); color: var(--spi-band-text); border-bottom-color: hsl(var(--border)); }
body.spi-page .dark :is(.wg-topbar .wg-brand, .wg-topbar .wg-nav-tab, .wg-topbar .wg-icon-btn) { color: var(--spi-band-text); }
body.spi-page .dark .wg-topbar .wg-nav-tab:hover:not(.active) { background: rgb(255 255 255 / .1); color: var(--spi-band-text); }
body.spi-page .dark .wg-topbar :is(.wg-nav-tab.active, .wg-nav-tab[aria-current=page]) { background: var(--spi-paper); color: var(--spi-ink); }
body.spi-page .dark .wg-topbar .wg-icon-btn { border-color: hsl(var(--border)); }
body.spi-page .dark .wg-topbar .wg-icon-btn:hover { background: rgb(255 255 255 / .1); }
body.spi-page .dark .wg-topbar .wg-brand-mark { background: var(--spi-paper); color: var(--spi-ink); outline-color: var(--spi-paper); }
@media (prefers-color-scheme: dark) {
  body.spi-account .topbar { background: var(--spi-band); color: var(--spi-band-text); border-bottom-color: hsl(var(--border)); }
  body.spi-account :is(.topbar a, .topbar .brand) { color: var(--spi-band-text); }
  body.spi-account .topbar .brand::before { background: var(--spi-paper); color: var(--spi-ink); }
}
body.spi-page :is(h1, .hai-h1, .post-title, .ch-empty h1) { font-family: var(--spi-display); font-weight: 400; }
body.spi-page :is(h2, h3, .wg-card-hd, .wg-section-title) { font-family: var(--spi-ui); }
body.spi-page :is(.hai-footer, .wg-foot, .wg-footer-note) { border-top-style: solid; }
body.spi-page :is(.wg-input, .wg-textarea, .wg-subscriber-token-ta, .token-input, .confirm-input, .mx-gate-input, .ks-gate-input) { border-radius: var(--spi-radius-sm); }
body.spi-page :is(input, textarea)::placeholder { color: hsl(var(--muted-foreground)); opacity: 1; }
body.spi-page :is(a, button, input, textarea, select, summary):focus-visible { outline: 3px solid hsl(var(--ring)); outline-offset: 2px; box-shadow: none; }
body.spi-page .wg-btn:disabled { opacity: 1; color: var(--spi-muted); background: var(--spi-screen); border-color: var(--spi-rule); }

/* Working modes. No display/visibility overrides on script-owned state. */
body.spi-page .wargame-page { --dens-pad-card: 12px; --dens-gap: 10px; }
body.spi-page .wg-card-hd { background: var(--spi-source-stock); color: var(--spi-ink); border-bottom: 1px solid var(--spi-ink); padding-block: 8px; }
body.spi-page .wg-card-hd .hd-r { color: var(--spi-ink); }
body.spi-page :is(.wg-orders-hd, .wg-wt-hd) { background: var(--spi-teal); color: var(--spi-band-text); border-bottom-color: var(--spi-ink); }
body.spi-page :is(.wg-orders-hd, .wg-wt-hd)::before { background: none; }
body.spi-page :is(.wg-wt-stamp, .wg-orders-hd-l .stamp) { border-color: var(--spi-band-text); color: var(--spi-band-text); }
body.spi-page :is(.wg-wt-sub, .wg-wt-hd-r a, .wg-orders-hd-l .ohd-sub, .wg-orders-hd-r) { color: var(--spi-band-text); }
body.spi-page .wg-sources .wg-card-hd { background: var(--spi-teal); color: var(--spi-band-text); }
body.spi-page .wg-sources .wg-card-hd :is(.hd-sub, .wg-badge) { color: var(--spi-band-text); }
body.spi-page .wg-sources .wg-card-hd .wg-badge { background: transparent; border-color: var(--spi-band-text); }
body.spi-page .wg-sources .wg-card-bd { background: var(--spi-source-field); color: var(--spi-source-ink); }
body.spi-page .wg-sources :is(.wg-form-label, .wg-form-label b, .wg-rules-status, .wg-image-status, .wg-colour-help, .wg-colour-source, .wg-rules-summary, .dz-sub, .wg-rules-pdf, .wg-image-pick, .wg-image-pick b) { color: var(--spi-source-ink); }
body.spi-page .wg-sources :is(input, textarea, .wg-btn) { background: var(--spi-paper); color: var(--spi-source-ink); border-color: var(--spi-source-ink); }
body.spi-page .wg-sources :is(input, textarea)::placeholder { color: var(--spi-source-ink); }
body.spi-page .wg-sources .wg-rules-pdf b { color: var(--spi-source-ink); }
body.spi-page .wg-sources :is(.wg-rules-pdf, .wg-image-pick) { background: transparent; border-color: var(--spi-source-ink); }
body.spi-page :is(#wargamer-form, .wg-card:has(#arguments-input), .wg-card:has(#orders-input), .wg-card:has(#qa-input)) > .wg-card-hd { background: var(--spi-input-stock); color: var(--spi-ink); border-bottom: 3px double var(--spi-ink); }
body.spi-page #wargamer-form .wg-card-hd .wg-badge { color: var(--spi-ink); }
body.spi-page #wargamer-form .wg-card-hd { background: var(--spi-input-stock); color: var(--spi-ink); border-bottom: 3px double var(--spi-ink); }
body.spi-page #wargamer-form .wg-card-hd .wg-btn { color: var(--spi-ink); }
body.spi-page :is(.wg-issue-row, .mx-submit-row, .ks-submit-row, .ch-composer) { background: var(--spi-band); color: var(--spi-band-text); padding: 8px 12px; border-color: var(--spi-band); }
body.spi-page :is(.wg-issue-row, .mx-submit-row, .ks-submit-row, .ch-composer) :is(.wg-issue-cost, .ic-amt, .ic-bd code, .mx-status, .ks-status, .ch-composer-hint) { color: var(--spi-band-text); }
body.spi-page :is(.wg-issue-row, .mx-submit-row, .ks-submit-row, .ch-composer) .wg-btn-primary:not(:disabled) { background: var(--spi-input-stock); color: var(--spi-ink); border-color: var(--spi-input-stock); }
body.spi-page :is(.wg-issue-row, .mx-submit-row, .ks-submit-row, .ch-composer) :focus-visible { outline-color: var(--spi-input-stock); }
body.spi-page :is(.wg-badge.b-primary, .wg-badge.b-accent, .wg-wt-sit-tag, .sb-label, .sb-unread strong, .wg-tc-intent .tag) { color: var(--spi-source-ink); background: var(--spi-source-field); border-color: var(--spi-source-ink); }
body.spi-page .wg-footer-note a { color: hsl(var(--primary)); }
body.spi-page .wargame-page .wg-see-board .sb-confirm .sb-unread strong { color: var(--spi-source-ink); }
body.spi-page :is(.wg-section-body, .wg-wt-sit-text, .mx-turn-response, .ks-turn-response, .ch-message-body) { font-family: var(--spi-body); }
body.spi-page .wg-tc-num { background: var(--spi-band); color: var(--spi-band-text); border: 1px solid currentColor; font-family: var(--spi-ui); }
body.spi-page :is(.wg-subscriber-dialog, .ch-confirm-dialog) { box-shadow: none; border-top: 3px solid var(--spi-teal); }
body.spi-page :is(.ks-gate-dialog-inner, .mx-gate-dialog-inner) { font-family: var(--spi-ui); font-size: 13.5px; line-height: 1.4; }
body.spi-page .wargame-page .wg-see-board.confirmed { background: var(--spi-source-field); border-color: var(--spi-source-ink); }
body.spi-page .wargame-page .wg-see-board.confirmed :is(.sb-label, .sb-body) { color: var(--spi-source-ink); }
body.spi-page .wg-wt-dot.done { background: var(--spi-source-ink); }
body.spi-page .ch-sidebar { background: var(--spi-source-field); color: var(--spi-source-ink); }
body.spi-page .ch-sidebar :is(.ch-conv-empty, .ch-conv-title, .ch-conv-meta) { color: var(--spi-source-ink); }
body.spi-page .ch-empty h1 { color: hsl(var(--primary)); }

/* Home and pricing retain their existing columns, copy and plan-card generator. */
body.spi-home .hai-page { line-height: 1.48; }
body.spi-home .hai-main { padding-top: 32px; padding-bottom: 48px; }
body.spi-home .hai-h1 { color: var(--spi-teal); font-size: 44px; line-height: 1.1; letter-spacing: -.02em; }
body.spi-home .hai-stamp { color: var(--spi-green); border-color: var(--spi-green); background: var(--spi-source-field); font-family: var(--spi-ui); }
body.spi-home .hai-page h2 { margin-top: 32px; color: hsl(var(--foreground)); }
body.spi-home .hai-page h2::after { background: hsl(var(--rule)); }
body.spi-home .hai-hero-ctas { background: var(--spi-band); padding: 8px; gap: 8px; }
body.spi-home .hai-hero-ctas .wg-btn { background: var(--spi-band); color: var(--spi-band-text); border-color: var(--spi-band-text); }
body.spi-home .hai-hero-ctas .wg-btn-primary { background: var(--spi-band-text); color: var(--spi-band); }
body.spi-home .hai-hero-ctas :focus-visible { outline-color: var(--spi-input-stock); }
body.spi-home .hai-marshall { margin-block: 24px 20px; padding: 16px 20px; border-color: var(--spi-rule); border-left: 3px solid var(--spi-teal); }
body.spi-home .hai-tier-hd { background: var(--spi-source-field); color: var(--spi-ink); border-bottom: 3px double var(--spi-ink); }
body.spi-home .hai-tier:nth-child(2) .hai-tier-hd { background: var(--spi-source-stock); }
body.spi-home .hai-tier:nth-child(3) .hai-tier-hd { background: var(--spi-screen); }
body.spi-home .hai-tier:nth-child(4) .hai-tier-hd { background: var(--spi-input-stock); }
body.spi-home :is(.hai-tier-name, .hai-tier-price-note, .hai-cta-stamp) { color: var(--spi-ink); }
body.spi-home .hai-tier-name { font-family: var(--spi-ui); font-weight: 800; }
body.spi-home .hai-tier-price { font-family: var(--spi-ui); font-weight: 800; font-variant-numeric: tabular-nums; }
body.spi-home .hai-tier-badge { color: var(--spi-ink); background: var(--spi-input-stock); }
body.spi-home .hai-footer { margin-top: 40px; }
body.spi-home .hai-page.dark .hai-h1 { color: var(--spi-source-stock); }
body.spi-home .hai-page.dark .hai-stamp { color: var(--spi-source-ink); border-color: var(--spi-source-ink); }
body.spi-home .hai-page.dark :is(.hai-tier-name, .hai-cta-stamp) { color: var(--spi-ink); }
body.spi-page .wargame-page.dark :is(.wg-badge.b-primary, .wg-see-board .sb-label) { color: var(--spi-source-ink); }
body.spi-page .hai-compare :is(.plan-name, .price), body.spi-page .hai-plan-card :is(.plan-name, .price) { font-family: var(--spi-ui); font-weight: 700; }
body.spi-page :is(.hai-compare, .hai-plan-card) .badge { white-space: normal; }
body.spi-page .hai-compare thead th[data-plan] { background: var(--spi-source-field); color: var(--spi-ink); }
body.spi-page .hai-compare thead th.c-reg { background: var(--spi-source-stock); }
body.spi-page .hai-compare thead th[data-plan=Lifetime] { background: var(--spi-input-stock); }
body.spi-page .hai-compare thead .status { color: var(--spi-muted); }
body.spi-page .hai-compare thead th::before { background: none; }
body.spi-pricing .hai-main { padding-top: 32px; padding-bottom: 48px; }

/* Account remains the same sign-in / management flow. */
body.spi-account .topbar { font-family: var(--spi-ui); padding-block: 8px; }
body.spi-account main { margin-block: 24px; }
body.spi-account .empty { padding: 24px 12px; }
body.spi-account .card { border-top: 3px solid var(--spi-teal); padding: 16px; }
body.spi-account .token-row { min-width: 0; }
body.spi-account .token-input { min-width: 0; }

/* Reading pages inherit type only, including their existing margin notes. */
body.spi-inherit .hai-page { line-height: 1.55; }
body.spi-inherit .post-title { font-size: 2.25rem; }
body.spi-inherit .post-lede { line-height: 1.4; }
body.spi-inherit .masthead h1 { font-size: 2.4rem; line-height: 1.05; }
body.spi-inherit .masthead p { line-height: 1.35; }
body.spi-inherit .post-body { overflow-wrap: anywhere; }
body.spi-inherit :is(.post-eyebrow .sep, .fn-ref, .side-card.footnote h4, .drafts-list .stage) { color: hsl(var(--primary)); }
body.spi-inherit .hai-page.dark .archive-meta .tag { color: hsl(var(--foreground)); }
body.spi-inherit .featured-num { font-size: 52px; }
body.spi-inherit .featured-num small { white-space: normal; }
body.spi-page.spi-inherit .hero-headline { font-size: 40px; }
body.spi-inherit .hai-roadmap-v2 { --serif-rm2: var(--spi-body); --sans-rm2: var(--spi-ui); }

/* The benchmark uses full-colour custom properties rather than HSL triplets. */
body.spi-inherit:has(.wrap) {
  --paper: var(--spi-paper); --paper-2: var(--spi-source-field); --paper-3: var(--spi-screen);
  --ink: var(--spi-ink); --ink-2: var(--spi-green); --ink-mute: var(--spi-muted);
  --rust: var(--spi-teal); --rust-2: var(--spi-green); --gold: var(--spi-green);
  --navy: var(--spi-band); --rule: var(--spi-rule); --rule-2: var(--spi-rule);
  --serif: var(--spi-body); --sans: var(--spi-ui);
}
@media (max-width: 720px) {
  body.spi-home .hai-h1 { font-size: 36px; }
  body.spi-home .hai-main { padding-top: 24px; }
  body.spi-account .topbar { flex-wrap: wrap; padding: 10px 16px; gap: 8px; }
  body.spi-account .topbar > div { display: flex; flex-wrap: wrap; gap: 8px 12px; }
  body.spi-account .topbar a { margin-left: 0; }
  body.spi-account main { padding-inline: 16px; }
  body.spi-account .token-row { flex-wrap: wrap; }
  body.spi-account .token-input { flex: 1 1 150px; }
  body.spi-inherit .post-title { font-size: 1.9rem; }
  body.spi-inherit .wrap { overflow-wrap: break-word; }
  body.spi-page.spi-inherit .hero-headline { font-size: 30px; }
  body.spi-inherit .wrap { line-height: 1.5; }
  body.spi-kriegsspiel .wg-workspace { padding-block: 10px 16px; }
  body.spi-kriegsspiel .wg-card-bd { padding-block: 8px; }
  body.spi-kriegsspiel .wg-card-hd { padding-block: 6px; }
}

/* Round 8: the gate lives beside #root, so its surface must inherit from body. */
body.spi-page :is(.mx-gate-dialog, .ks-gate-dialog, .ks-map-modal):not([hidden]) {
  position: fixed; inset: 0; z-index: 100; display: flex;
  align-items: center; justify-content: center; padding: 16px;
  background: rgb(0 0 0 / .45);
}
body.spi-page :is(.mx-gate-dialog-inner, .ks-gate-dialog-inner, .ks-map-modal-inner) {
  box-sizing: border-box; width: min(540px, 100%); max-height: calc(100dvh - 32px);
  overflow: auto; padding: 16px 20px; border: 1px solid hsl(var(--border)); border-radius: var(--spi-radius-lg);
  border-top: 3px solid hsl(var(--primary)); background: hsl(var(--card));
  color: hsl(var(--foreground));
}
body.spi-page :is(.mx-gate-dialog-inner, .ks-gate-dialog-inner, .ks-map-modal-inner) h2 { margin: 0 0 10px; font-size: 18px; }
body.spi-page :is(.mx-gate-dialog-inner, .ks-gate-dialog-inner, .ks-map-modal-inner) p { margin: 6px 0; }
body.spi-page :is(.mx-gate-dialog-inner, .ks-gate-dialog-inner, .ks-map-modal-inner) ul { margin: 6px 0; padding-left: 20px; }
body.spi-page :is(.mx-gate-dialog-inner, .ks-gate-dialog-inner, .ks-map-modal-inner) a { color: hsl(var(--primary)); }
body.spi-page :is(.mx-gate-input, .ks-gate-input) {
  box-sizing: border-box; width: 100%; min-height: 72px; resize: vertical;
  margin-top: 8px; padding: 8px 10px; border: 1px solid hsl(var(--border));
  background: hsl(var(--background)); color: hsl(var(--foreground));
  font: 13px/1.45 var(--spi-ui);
}
body.spi-page :is(.mx-gate-dialog, .ks-gate-dialog, .ks-map-modal) .wg-btn {
  appearance: none; padding: 7px 11px; border: 1px solid hsl(var(--border));
  background: hsl(var(--card)); color: hsl(var(--foreground));
  font: 500 13px/1.5 var(--spi-ui); cursor: pointer;
}
body.spi-page :is(.mx-gate-dialog, .ks-gate-dialog, .ks-map-modal) .wg-btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }
body.spi-page :is(.mx-gate-dialog, .ks-gate-dialog, .ks-map-modal) :is(.mx-edit-row, .ks-edit-row) { display: flex; gap: 8px; flex-wrap: wrap; }
body.spi-page :is(.mx-gate-err, .ks-gate-err) { color: hsl(var(--destructive)); }
body.spi-page :is(.wargame-page, .chat-page) :is(input, textarea)::placeholder,
body.spi-page :is(.mx-gate-input, .ks-gate-input)::placeholder { color: hsl(var(--muted-foreground)); opacity: 1; }
body.spi-page .wargame-page .wg-sources :is(input, textarea)::placeholder { color: var(--spi-source-ink); }
body.spi-page :is(.wg-subscriber-dialog, .ch-confirm-dialog) { max-height: calc(100dvh - 32px); overflow: auto; }
body.spi-page .chat-page.dark .ch-sidebar { background: hsl(var(--card)); color: hsl(var(--foreground)); }
body.spi-page .chat-page.dark .ch-sidebar :is(.ch-conv-empty, .ch-conv-title, .ch-conv-meta) { color: hsl(var(--muted-foreground)); }
body.spi-page .chat-page.dark .ch-conv-row.active { background: var(--spi-green); color: var(--spi-paper); }
body.spi-page .chat-page.dark .ch-conv-row.active :is(.ch-conv-title, .ch-conv-meta) { color: var(--spi-paper); }

/* Shared chrome: no new icon footprint, consistent borders and ink. */
body.spi-page .wg-topbar .wg-icon-btn { border: 1px solid hsl(var(--border)); }
body.spi-inherit .hai-page .hai-stamp { color: hsl(var(--primary)); border-color: hsl(var(--primary)); background: hsl(var(--primary) / .06); }
body.spi-account { font-family: var(--spi-ui); }
body.spi-account a { color: hsl(var(--primary)); }
body.spi-account .empty { text-align: left; font-size: 14px; line-height: 1.5; }
body.spi-account .brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; }
body.spi-account .brand::before { content: 'hp'; display: inline-grid; place-items: center; width: 26px; height: 26px; background: var(--spi-band); color: var(--spi-band-text); font: 800 12px var(--spi-ui); }
body.spi-page.spi-inherit .hero-headline { font-family: var(--spi-body); line-height: 1.08; }

@media (max-width: 720px) {
  body.spi-account .topbar { padding: 6px 12px; gap: 2px; }
  body.spi-account .topbar > div { gap: 2px 10px; }
  body.spi-account .topbar a { line-height: 22px; }
  body.spi-page.spi-inherit .hero-headline { font-size: 27px; line-height: 1.06; }
}

/* Plan counters (s200). Each lid is a clipped counter: plan stock, a NATO
   unit symbol (Ray: infantry, cavalry, armor, then HQ for Lifetime), the
   capability, and the Wargamer-turns factor. Factors repeat the pricing
   table's Wargamer / month cells (40, 300, 450, 450), not opponent allowances.
   Symbols share one 48 x 38 box so the four frames line up; only HQ uses the
   lower strip, for its staff. Cards in a row share lid heights (subgrid). */
body.spi-home .hai-page .hai-pricing-grid { align-items: stretch; }
body.spi-home .hai-page .hai-tier { border-width: 1px; display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; }
body.spi-home .hai-tier-hd {
  position: relative; box-sizing: border-box; height: auto; min-height: 124px; flex: none;
  padding: 10px 146px 12px 14px; display: grid; grid-template-rows: auto auto 1fr; align-content: start;
}
body.spi-home .hai-tier-name { margin: 0; font-size: 13px; line-height: 20px; letter-spacing: .06em; flex-wrap: wrap; row-gap: 4px; }
body.spi-home .hai-tier-badge { font-size: 12px; padding: 1px 5px; margin-left: 6px; }
body.spi-home .hai-tier-price { margin: 4px 0 0; align-self: start; font-size: 24px; line-height: 30px; }
body.spi-home .hai-tier-price-note { margin: 6px 0 0; align-self: start; padding-right: 0; font-size: 13px; line-height: 1.35; }
body.spi-home #hai-seat-stamp { font-size: 12px !important; letter-spacing: .02em; padding: 2px 5px !important; margin-left: 0; border: 1px solid currentColor; color: var(--spi-ink); }
body.spi-home .hai-tier-hd::before {
  content: var(--spi-capability); position: absolute; top: 10px; right: 8px; width: 130px;
  box-sizing: border-box; padding-top: 42px; text-align: center;
  font: 700 12px/16px var(--spi-ui);
  background: var(--spi-counter-symbol) center top / 48px 38px no-repeat;
}
body.spi-home .hai-tier-hd::after {
  content: var(--spi-turns); position: absolute; top: 72px; right: 8px; width: 130px; text-align: center;
  font: 800 26px/28px var(--spi-ui); font-variant-numeric: tabular-nums;
}
body.spi-home .hai-tier-price::after {
  content: 'Wargamer turns/month'; position: absolute; top: 101px; right: 8px; width: 130px;
  text-align: center; white-space: nowrap; font: 400 12px/14px var(--spi-ui); letter-spacing: -.01em;
}
body.spi-home .hai-tier:nth-child(1) { --spi-turns: "40"; --spi-capability: 'solo-wargaming'; --spi-counter-symbol: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2038%22%20fill%3D%22none%22%20stroke%3D%22%23262326%22%20stroke-width%3D%222.6%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22f%22%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%2244%22%20height%3D%2226%22%20rx%3D%223.5%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%2244%22%20height%3D%2226%22%20rx%3D%223.5%22%2F%3E%3Cpath%20clip-path%3D%22url%28%23f%29%22%20d%3D%22M2%202L46%2028M46%202L2%2028%22%2F%3E%3C%2Fsvg%3E"); }
body.spi-home .hai-tier:nth-child(2) { --spi-turns: "300"; --spi-capability: 'Chat and campaigns'; --spi-counter-symbol: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2038%22%20fill%3D%22none%22%20stroke%3D%22%23262326%22%20stroke-width%3D%222.6%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22f%22%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%2244%22%20height%3D%2226%22%20rx%3D%223.5%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%2244%22%20height%3D%2226%22%20rx%3D%223.5%22%2F%3E%3Cpath%20clip-path%3D%22url%28%23f%29%22%20d%3D%22M2%2028L46%202%22%2F%3E%3C%2Fsvg%3E"); }
body.spi-home .hai-tier:nth-child(3) { --spi-turns: "450"; --spi-capability: 'VASSAL'; --spi-counter-symbol: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2038%22%20fill%3D%22none%22%20stroke%3D%22%23262326%22%20stroke-width%3D%222.6%22%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%2244%22%20height%3D%2226%22%20rx%3D%223.5%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%228.5%22%20width%3D%2224%22%20height%3D%2213%22%20rx%3D%226.5%22%2F%3E%3C%2Fsvg%3E"); }
body.spi-home .hai-tier:nth-child(4) { --spi-turns: "450"; --spi-capability: 'Pay once'; --spi-counter-symbol: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2038%22%20fill%3D%22none%22%20stroke%3D%22%23262326%22%20stroke-width%3D%222.6%22%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%2244%22%20height%3D%2226%22%20rx%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M2%2024.5V37%22%2F%3E%3C%2Fsvg%3E"); }
body.spi-home .hai-page .hai-tier--featured .hai-tier-hd { border-bottom: 3px double var(--spi-ink); }
@media (max-width: 720px) {
  /* Phone: a narrower counter column so the price never wraps under it; the
     caption takes two lines and the lid grows to hold it. */
  body.spi-home .hai-tier-hd { min-height: 140px; padding-right: 132px; }
  body.spi-home .hai-tier-hd::before { width: 120px; right: 6px; white-space: nowrap; }
  body.spi-home .hai-tier-hd::after { width: 120px; right: 6px; }
  body.spi-home .hai-tier-price::after { width: 104px; right: 14px; white-space: normal; line-height: 15px; }
}

body.spi-page .ks-map-modal-inner { width: min(1100px, 100%); }
body.spi-page .ks-map-image { display: block; width: 100%; max-height: 75dvh; object-fit: contain; border: 1px solid hsl(var(--border)); background: hsl(var(--muted)); }
body.spi-page .ks-map-mode-hint { margin: 4px 0 8px; color: hsl(var(--muted-foreground)); }
@media (prefers-color-scheme: dark) {
  body.spi-account {
    --background: 300 4.1096% 14.3137%; --foreground: 60 15.3846% 94.902%;
    --card: 0 0% 19.6078%; --primary: 180 16.167665% 67.254902%;
    --primary-foreground: 300 4.1096% 14.3137%; --muted: 0 0% 26.6667%;
    --muted-foreground: 0 0% 88.6275%; --border: 0 0% 65.49%;
    --border-strong: 0 0% 65.49%; --ring: 65.934066 50.276243% 64.509804%;
  }
  body.spi-account :is(input, textarea) { color: hsl(var(--foreground)); }
}
body.spi-page #wargamer-form .wg-card-hd .wg-btn:hover { background: var(--spi-input-stock); color: var(--spi-ink); }

body.spi-home .hai-tier-bd { padding-block: 12px; }

body.spi-page:is(.spi-matrix, .spi-kriegsspiel) .wg-card-hd { gap: 8px; }
@media (prefers-color-scheme: dark) {
  body.spi-account { --destructive: 65.934066 50.276243% 64.509804%; --destructive-foreground: 300 4.1096% 14.3137%; }
  body.spi-account .btn-danger { color: hsl(var(--destructive-foreground)); }
}

/* Round 9: explanatory values are prose; token/identifier fields retain mono. */
body.spi-account .field-value:not(#acct-email):not(#acct-expires) {
  font-family: var(--spi-ui); text-align: left; word-break: normal;
  overflow-wrap: normal; min-width: 0;
}
body.spi-account .card:has(.field-value .tier-match-name) .field {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: start;
}
body.spi-account .card:has(.field-value .tier-match-name) .field-label { white-space: normal; }
body.spi-account .danger-zone { border: 1px solid hsl(0 70% 42%); border-top: 3px double hsl(0 70% 42%); }
body.spi-account .danger-zone h2 { color: hsl(0 70% 42%); }
body.spi-account .danger-zone .btn-danger { background: hsl(0 70% 42%); color: #fefefe; border-color: hsl(0 70% 42%); }
body.spi-account .danger-zone .btn-danger:disabled { opacity: 1; background: hsl(var(--card)); color: hsl(0 70% 42%); border: 3px double currentColor; padding: 6px 12px; }
@media (prefers-color-scheme: dark) {
  body.spi-account .danger-zone { border-color: var(--spi-input-stock); }
  body.spi-account .danger-zone h2 { color: var(--spi-input-stock); }
  body.spi-account .danger-zone .btn-danger { background: var(--spi-input-stock); color: var(--spi-ink); border-color: var(--spi-input-stock); }
  body.spi-account .danger-zone .btn-danger:disabled { background: hsl(var(--card)); color: var(--spi-input-stock); }
}

/* Fund the shared 10px card gutters from existing internal padding. */
body.spi-kriegsspiel :is(#mode-umpire, #mode-qa) > .wg-card + .wg-card { margin-top: 10px; }
body.spi-kriegsspiel :is(#mode-umpire, #mode-qa) > .wg-card > .wg-card-bd { padding-block: 7px; }
@media (max-width: 720px) {
  body.spi-kriegsspiel :is(#mode-umpire, #mode-qa) > .wg-card > .wg-card-bd { padding-block: 3px; }
}



/* ── Round 11: the phone layer ─────────────────────────────────────────────
   Everything below is inside phone media queries; desktop is untouched.
   One header for every page: a brand row, then a ruled 5 x 2 index of the
   ten destinations (the desktop tab look: plain type, source-field active
   cell, teal underline). The header scrolls away on phones instead of
   holding 90-120px of every screen. */
@media (max-width: 720px) {
  body.spi-page .wg-topbar {
    position: relative; top: auto; z-index: 10;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; gap: 0 8px;
    padding: 4px 12px 0; min-width: 0;
    --spi-cell-rule: color-mix(in srgb, var(--spi-rule) 55%, transparent);
    border-bottom: 3px solid var(--spi-ink);
  }
  body.spi-page .wg-topbar .wg-topbar-l { display: contents; }
  body.spi-page .wg-topbar .wg-topbar-l::after { content: none; }
  body.spi-page .wg-topbar .wg-brand {
    grid-column: 1 / 3; grid-row: 1; justify-self: start;
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 44px; padding-right: 8px; min-width: 0;
    font: 800 17px/1.1 var(--spi-ui); letter-spacing: -.035em;
  }
  body.spi-page .wg-topbar .wg-brand-mark { width: 30px; height: 30px; font-size: 13px; flex: none; border-radius: calc(30px * var(--spi-counter-clip)); }
  body.spi-page .wg-topbar .wg-brand-name { display: inline; font-size: 17px; white-space: nowrap; }
  body.spi-page .wg-topbar .wg-brand-sub { display: none; }
  body.spi-page .wg-topbar .wg-topbar-r {
    grid-column: 3; grid-row: 1; justify-self: end;
    display: flex; align-items: center; gap: 6px; min-width: 0;
  }
  body.spi-page .wg-topbar .wg-icon-btn {
    width: 40px; height: 40px; padding: 0; flex: none;
    border: 1px solid var(--spi-rule);
  }
  body.spi-page .wg-topbar .wg-icon-btn .wg-icon { width: 18px; height: 18px; }
  /* No display here: pages hide some of these on phones (chat) or by script. */
  body.spi-page .wg-topbar-r :is(.wg-btn, .wg-subscriber-btn) {
    min-height: 40px; padding: 0 12px; font-size: 14px; flex: none;
  }

  /* The index: equal ruled cells, full bleed under the brand row. */
  body.spi-page .wg-topbar .wg-nav-tabs {
    grid-column: 1 / -1; grid-row: 2;
    display: grid; grid-template-columns: repeat(5, minmax(max-content, 1fr));
    margin: 4px -12px 0; padding: 0; gap: 0;
    overflow: visible; flex: none; width: auto; min-width: 0;
    border-top: 1px solid var(--spi-cell-rule);
  }
  body.spi-page .wg-topbar .wg-nav-tab {
    display: flex; align-items: center; justify-content: center;
    min-height: 40px; margin: 0; padding: 0 6px; box-sizing: border-box;
    font: 500 13.5px/1.1 var(--spi-ui); letter-spacing: -.01em; white-space: nowrap;
    color: inherit; background: transparent;
    border: 0; box-shadow: none;
    border-radius: 0; /* cells of a ruled grid inside the bar: square */
    border-right: 1px solid var(--spi-cell-rule);
  }
  body.spi-page .wg-topbar .wg-nav-tab:nth-child(5n) { border-right: 0; }
  body.spi-page .wg-topbar .wg-nav-tab:nth-child(-n+5) { border-bottom: 1px solid var(--spi-cell-rule); }
  body.spi-page .wg-topbar :is(.wg-nav-tab.active, .wg-nav-tab[aria-current=page]) {
    background: var(--spi-ink); color: var(--spi-paper); font-weight: 700; box-shadow: none;
  }
  body.spi-page .dark .wg-topbar :is(.wg-nav-tab.active, .wg-nav-tab[aria-current=page]) { background: var(--spi-paper); color: var(--spi-ink); }
  body.spi-page .wg-topbar .wg-nav-tab:focus-visible { outline-offset: -3px; }

  /* Working modes: the tools need the brand row, so the mark stands alone. */
  body.spi-page:is(.spi-wargamer, .spi-matrix, .spi-kriegsspiel, .spi-chat) .wg-topbar .wg-brand-name { display: none; }
  body.spi-page:is(.spi-wargamer, .spi-matrix, .spi-kriegsspiel, .spi-chat) .wg-topbar .wg-brand { grid-column: 1; }
  body.spi-page:is(.spi-wargamer, .spi-matrix, .spi-kriegsspiel, .spi-chat) .wg-topbar .wg-topbar-r { grid-column: 2 / 4; }
  body.spi-page:is(.spi-wargamer, .spi-matrix, .spi-kriegsspiel, .spi-chat) .wg-topbar .wg-brand { min-width: 44px; padding-right: 0; }
  /* Kriegsspiel carries its ruleset picker: it takes its own full row. */
  body.spi-page.spi-kriegsspiel .wg-topbar { grid-template-columns: auto minmax(0, 1fr) repeat(4, auto); column-gap: 6px; }
  body.spi-page.spi-kriegsspiel .wg-topbar .wg-topbar-r { display: contents; }
  body.spi-page.spi-kriegsspiel .wg-topbar #subscribe-btn { grid-row: 1; grid-column: 3; }
  body.spi-page.spi-kriegsspiel .wg-topbar #key-btn { grid-row: 1; grid-column: 4; }
  body.spi-page.spi-kriegsspiel .wg-topbar #reset-btn { grid-row: 1; grid-column: 5; }
  body.spi-page.spi-kriegsspiel .wg-topbar #theme-toggle { grid-row: 1; grid-column: 6; }
  body.spi-page.spi-kriegsspiel .wg-topbar #ruleset-select {
    grid-column: 1 / -1; grid-row: 2; width: 100%; min-height: 40px; margin: 4px 0 6px;
    font-size: 16px;
  }
  body.spi-page.spi-kriegsspiel .wg-topbar .wg-nav-tabs { grid-row: 3; }
  /* Chat: the conversation drawer button leads the row. */
  body.spi-page.spi-chat .wg-topbar #sidebar-toggle { grid-column: 1; grid-row: 1; }
  body.spi-page.spi-chat .wg-topbar .wg-brand { grid-column: 2; }
  body.spi-page.spi-chat .wg-topbar .wg-topbar-r { grid-column: 3; }

  /* Account has its own header markup: the same brand row and ruled index. */
  body.spi-account .topbar {
    --spi-cell-rule: color-mix(in srgb, var(--spi-rule) 55%, transparent);
    display: grid; grid-template-columns: repeat(5, minmax(max-content, 1fr));
    padding: 0; gap: 0; border-bottom: 3px solid var(--spi-ink);
  }
  body.spi-account .topbar > div { display: contents; }
  body.spi-account .topbar .brand {
    grid-column: 1 / -1; min-height: 48px; padding: 0 12px; font-size: 17px;
    border-bottom: 1px solid var(--spi-cell-rule); margin: 0;
  }
  body.spi-account .topbar a {
    display: flex; align-items: center; justify-content: center; min-height: 40px;
    margin: 0; padding: 0 6px; border: 0; font: 500 13.5px/1.1 var(--spi-ui);
    color: hsl(var(--foreground));
    border-right: 1px solid var(--spi-cell-rule);
  }
  body.spi-account .topbar a:nth-of-type(5n) { border-right: 0; }
  body.spi-account .topbar > div:first-child a { border-bottom: 1px solid var(--spi-cell-rule); }
  body.spi-account .topbar > div:first-child a:nth-of-type(n+6) { border-bottom: 0; }
}

/* Phone controls: every working control is at least a 40px square, and the
   small print stops at 12px. Visual weight stays where the desktop set it. */
@media (max-width: 720px) {
  body.spi-page :is(.wargame-page, .chat-page) :is(.wg-btn, .wg-subscriber-btn, .wg-nav-tab) { min-height: 40px; }
  body.spi-page :is(.wargame-page, .chat-page) .wg-btn-sm { padding-inline: 12px; }
  body.spi-page .wargame-page input.wg-input, body.spi-page .wargame-page select.wg-input { min-height: 40px; }
  body.spi-page.spi-account :is(.btn, .token-input) { min-height: 44px; }
  body.spi-page .wargame-page :is(.wg-rules-pdf, .wg-image-pick) { min-height: 44px; box-sizing: border-box; }

  /* Stacked field labels: the name, then its note, never two cramped columns. */
  body.spi-page .wargame-page .wg-form-label { display: block; }
  body.spi-page .wargame-page .wg-form-label > b { display: block; font-size: 14px; }
  body.spi-page .wargame-page .wg-form-label > span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; }

  /* Walkthrough: 40px dots, the same 10px marks inside. */
  body.spi-page .wargame-page .wg-wt-dots { gap: 0; }
  body.spi-page .wargame-page .wg-wt-dot {
    width: 40px; height: 40px; transform: none;
    background: radial-gradient(circle, hsl(var(--border-strong)) 0 4.5px, transparent 5.2px);
  }
  body.spi-page .wargame-page .wg-wt-dot.done { background: radial-gradient(circle, var(--spi-source-ink) 0 4.5px, transparent 5.2px); }
  body.spi-page .wargame-page .wg-wt-dot.active { background: radial-gradient(circle, hsl(var(--primary)) 0 6.5px, transparent 7.2px); }
  body.spi-page .wargame-page .wg-wt:not(.collapsed) .wg-wt-skip { display: inline-flex; align-items: center; min-height: 40px; font-size: 13px; }
  body.spi-page .wargame-page .wg-wt-collapse { min-height: 40px; padding-inline: 14px; }
  body.spi-page .wargame-page :is(.wg-wt-sit-tag, .wg-badge, #order-seq-badge) { font-size: 12px; }
  body.spi-page .wargame-page .wg-wt-sit summary::after { font-size: 12px; }

  /* Short link lines (footers, tables of contents, back links) grow their
     hit area with padding that does not move the line. */
  body.spi-page :is(.hai-footer, .wg-footer-note, .wg-foot) a:not(.hai-x-link),
  body.spi-page .wrap footer a,
  body.spi-inherit footer .foot-inner a { padding-block: 13px; }
  body.spi-page :is(.hai-footer, .wg-foot) a:not(.hai-x-link) { padding-inline: 2px; margin-inline: -2px; }
  body.spi-page :is(.hai-stamp, .hai-tier-badge, .badge, .hai-cta-stamp) { font-size: 12px; }
  body.spi-page sup { font-size: 12px; }
}

/* Reading pages on the phone: the journal index, the entries, the benchmark. */
@media (max-width: 720px) {
  /* Journal index */
  body.spi-inherit .archive-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
  body.spi-inherit .archive-head h2 { white-space: nowrap; }
  body.spi-inherit :is(.archive-num, .featured-num, .rc-num) small { font-size: 12px; }
  body.spi-inherit .featured-foot a { display: inline-flex; align-items: center; min-height: 40px; }
  body.spi-inherit .drafts { padding: 18px 16px; gap: 12px; }
  body.spi-inherit .drafts-list li { grid-template-columns: 1fr; gap: 8px; }
  body.spi-inherit .drafts-list .stage { justify-self: start; }

  /* Entry header: chips, not dangling separators; the index link gets a row. */
  body.spi-inherit .post-eyebrow { gap: 6px 14px; letter-spacing: .1em; }
  body.spi-inherit .post-eyebrow .sep { display: none; }
  body.spi-inherit .post-eyebrow a { flex-basis: 100%; display: flex; align-items: center; min-height: 40px; }
  /* Table of contents: one line of heading, section numbers that never split. */
  body.spi-inherit .post-toc { padding: 16px 16px 8px; }
  body.spi-inherit .post-toc h3 { display: block; line-height: 1.5; letter-spacing: .14em; text-wrap: balance; }
  body.spi-inherit .post-toc-list li { padding: 0; align-items: center; }
  body.spi-inherit .post-toc-list a { display: block; padding: 11px 0; line-height: 1.3; }
  body.spi-inherit .side-card.see-also li { align-items: center; }
  body.spi-inherit .side-card.see-also a { display: block; padding: 11px 0; }
  body.spi-inherit .hai-back { display: inline-flex; align-items: center; min-height: 40px; }
  body.spi-inherit .related-card { min-height: 44px; }

  /* Benchmark trajectory: version, judge, then a bar that actually has room. */
  body.spi-inherit .traj-row { grid-template-columns: max-content max-content minmax(0, 1fr); gap: 6px 12px; }
  body.spi-inherit .traj-row.head > .h-judge { display: block; }
  body.spi-inherit .traj-row.head > :nth-child(5) { display: none; }
  body.spi-inherit .traj-row .traj-bar { min-width: 0; }
  body.spi-inherit .preview-card dd code { display: inline-block; max-width: 100%; overflow-wrap: anywhere; margin: 2px 0; }
  body.spi-inherit .wrap .section-head a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* Home and pricing on the phone. */
@media (max-width: 720px) {
  /* Hero: two full-width orders in the black band, centred, equal height. */
  body.spi-home .hai-hero-ctas { padding: 10px; gap: 10px; }
  body.spi-home .hai-hero-ctas .wg-btn {
    min-height: 52px; padding: 10px 16px; justify-content: center; text-align: center;
    font-size: 15.5px; line-height: 1.3; white-space: normal; text-wrap: balance;
  }
  body.spi-home .hai-edwards summary,
  body.spi-inherit .hai-roadmap-details summary { padding-block: 11px; }
  body.spi-home .hai-edwards details { padding-top: 2px; }
  body.spi-home .hai-rpg-card h3 { text-wrap: balance; }

  body.spi-home .hai-tier-ft .wg-btn { min-height: 48px; }

}
@media (max-width: 640px) {
  /* Phone plan cards share the counters' lids: plan stock above a double rule. */
  body.spi-page .hai-page .hai-plan-cards { gap: 14px; }
  body.spi-page .hai-page .hai-plan-card {
    --lid: var(--spi-source-field);
    padding: 0; border: 1px solid hsl(var(--foreground)); background: var(--lid); color: var(--spi-ink);
  }
  body.spi-page .hai-page .hai-plan-card:nth-child(1) { --lid: var(--spi-panel); }
  body.spi-page .hai-page .hai-plan-card:nth-child(3) { --lid: var(--spi-source-stock); }
  body.spi-page .hai-page .hai-plan-card:nth-child(4) { --lid: var(--spi-screen); }
  body.spi-page .hai-page .hai-plan-card:nth-child(5) { --lid: var(--spi-input-stock); }
  body.spi-page .hai-page .hai-plan-card > :is(.plan-name, .price, .badge, .status) { margin-inline: 12px; color: var(--spi-ink); }
  body.spi-page .hai-page .hai-plan-card .plan-name { padding-top: 10px; font: 800 13px/20px var(--spi-ui); letter-spacing: .06em; text-transform: uppercase; }
  body.spi-page .hai-page .hai-plan-card .price { margin-top: 0; margin-bottom: 10px; font: 800 24px/30px var(--spi-ui); font-variant-numeric: tabular-nums; }
  body.spi-page .hai-page .hai-plan-card .badge { margin-top: -2px; margin-bottom: 10px; font-size: 12px; background: var(--spi-input-stock); color: var(--spi-ink); }
  body.spi-page .hai-page .hai-plan-card .status { margin-top: -6px; margin-bottom: 10px; font-size: 13px; }
  body.spi-page .hai-page .hai-plan-card dl {
    margin: 0; padding: 0 12px; border-top: 3px double var(--spi-ink);
    background: hsl(var(--card)); color: hsl(var(--foreground));
  }
  body.spi-page .hai-page .hai-plan-card .hai-plan-card-row:first-child { border-top: 0; }
  body.spi-page .hai-page .hai-plan-card .hai-plan-card-row { padding: 9px 0; }
  body.spi-page .hai-page .hai-plan-card :is(dt, dd) { color: hsl(var(--foreground)); }
  body.spi-page .hai-page .hai-plan-card dt { font-family: var(--spi-ui); font-size: 13px; }
}

/* The RPG table keeps its immersive phone header (no tab row, as live); its
   two controls reach 40px. */
@media (max-width: 640px) {
  body.spi-rpg .topbar .brand { min-height: 40px; }
  body.spi-rpg .topbar .sign-in { min-height: 40px; }
}

/* Wargamer campaign bar on the phone: the campaign name gets the full first
   row; the picker and turn badge share the second. */
@media (max-width: 720px) {
  body.spi-page .wargame-page .wg-campaign-picker { padding: 0 8px 0 12px; column-gap: 10px; }
  body.spi-page .wargame-page .wg-campaign-picker .cp-name { flex: 1 0 calc(100% - 120px); min-height: 44px; }
  body.spi-page .wargame-page .wg-campaign-picker #campaign-picker-toggle { order: 2; margin-left: -8px; }
  body.spi-page .wargame-page .wg-campaign-picker #turn-badge { order: 2; margin-left: auto; margin-right: 0; }
  body.spi-page .wargame-page .wg-campaign-picker #vassal-open { order: 3; margin-left: -8px; }
  body.spi-page .wargame-page .wg-campaign-picker .cp-meta { order: 4; }
  body.spi-page .wargame-page .wg-campaign-picker :is(#campaign-picker-toggle, #turn-badge) { border-top-color: transparent; }
  /* The help mark keeps its 20px ring inside a 40px target. */
  body.spi-page .wargame-page .wg-mode-help {
    width: 40px; height: 40px; margin: -10px -10px -10px 0; border: 0;
    background: radial-gradient(circle, transparent 0 9px, hsl(var(--border-strong)) 9.3px 10.2px, transparent 10.8px);
  }
}
@media (max-width: 720px) {
  body.spi-inherit .archive-title a { padding-block: 8px; }
  body.spi-inherit .hai-page ol > li > a { padding-block: 12px; }
  body.spi-inherit > main > p:last-child > a:only-child { display: inline-block; padding: 12px 4px; }
}
@media (max-width: 720px) {
  /* Umpire card heads: the note stays beside its title when it fits and takes
     its own line when it does not, instead of a cramped second column. */
  body.spi-page:is(.spi-matrix, .spi-kriegsspiel) .wg-card-hd { flex-wrap: wrap; column-gap: 12px; row-gap: 2px; }
}

/* Decorative corner brackets follow their rounded panel. */
body.spi-inherit .post-toc::before { border-top-left-radius: var(--spi-radius-md); }
body.spi-inherit .post-toc::after { border-bottom-right-radius: var(--spi-radius-md); }

/* ── Round 11 design pass: ergonomics on every width (s200) ───────────────── */
/* Wargamer: field notes sit beside their label, left-aligned, instead of
   short notes pinned far right and long ones folded into a second column. */
body.spi-page .wargame-page .wg-form-label { justify-content: flex-start; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px; }
body.spi-page .wargame-page .wg-form-label > span { flex: 1 1 22em; }
/* Every drop zone spans the field; its status reads underneath. */
body.spi-page .wargame-page .wg-rules-foot { justify-content: flex-start; gap: 6px 12px; }
body.spi-page .wargame-page .wg-rules-pdf { flex: 1 1 100%; box-sizing: border-box; }
/* The campaign name is the bar's main input: it keeps a readable width and
   the challenge toggle moves to its own line instead of crushing it. */
body.spi-page .wargame-page .wg-campaign-bar { flex-wrap: wrap; }
@media (min-width: 721px) {
  body.spi-page .wargame-page .wg-campaign-picker { flex: 1 1 640px; min-width: 0; }
  body.spi-page .wargame-page .wg-campaign-picker .cp-name { flex: 1 1 16em; min-width: 12em; }
  /* Kriegsspiel's ruleset picker sits in the tool row, not on a second line. */
  body.spi-kriegsspiel .wg-topbar .wg-topbar-r { flex-wrap: nowrap; }
  body.spi-kriegsspiel .wg-topbar #ruleset-select { width: 220px; min-height: 32px; }
}
/* The plan comparison is a table container: rounded, its stock header and
   cells clipped square inside it. */
@media (min-width: 641px) {
  body.spi-page .hai-page .hai-compare-wrap { border: 1px solid hsl(var(--foreground)); border-radius: var(--spi-radius-md); overflow: clip; }
  body.spi-page .hai-page .hai-compare thead th { border-top: 0; }
  body.spi-page .hai-page .hai-compare :is(thead th, tbody th):first-child { padding-left: 14px; }
  body.spi-page .hai-page .hai-compare tbody tr:last-child :is(th, td) { border-bottom: 0; }
}
/* Pricing: the closing order list is a ruled column of action rows at every
   width; Regular, the plan the table already marks as recommended, is the
   one filled primary action. */
body.spi-pricing .hai-page .plan-links { list-style: none; padding: 0; margin: 20px 0; max-width: 560px; border-top: 1.5px solid var(--spi-ink); }
body.spi-pricing .hai-page .plan-links li { margin: 0; border-bottom: 1px solid hsl(var(--rule)); font-family: var(--spi-ui); font-size: 15px; line-height: 1.45; }
body.spi-pricing .hai-page .plan-links li:not(:has(> a:only-child)) { padding: 12px 0; }
body.spi-pricing .hai-page .plan-links li > a:only-child {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 50px; font-weight: 600; text-decoration: none; color: hsl(var(--primary));
}
body.spi-pricing .hai-page .plan-links li > a:only-child::after { content: "\2192" / ""; font-weight: 400; }
body.spi-pricing .hai-page .plan-links li > a:only-child:hover { text-decoration: underline; }
body.spi-pricing .hai-page .plan-links li:nth-child(3) { border-bottom: 0; padding: 8px 0; }
body.spi-pricing .hai-page .plan-links li:nth-child(3) > a:only-child {
  padding: 0 16px; border-radius: var(--spi-radius-sm);
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
}
body.spi-pricing .hai-page .plan-links li:nth-child(3) > a:only-child:hover { text-decoration: none; filter: brightness(1.12); }
body.spi-pricing .hai-page .plan-links button:disabled { min-height: 32px; margin-left: 4px; border-radius: var(--spi-radius-sm); }
@media (min-width: 721px) {
  /* One control height in the desktop tool row (was 24 to 36px). */
  body.spi-page .wg-topbar .wg-topbar-r :is(.wg-btn, .wg-subscriber-btn) { min-height: 32px; box-sizing: border-box; }
  body.spi-page .wg-topbar .wg-topbar-r .wg-icon-btn { width: 32px; height: 32px; }
  body.spi-page .wg-topbar .wg-topbar-r select { height: 32px; box-sizing: border-box; }
}

/* Entry contents: section numbers never split ("§" / "3.1"), at any width. */
body.spi-inherit .post-toc-list li { grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 12px; }
body.spi-inherit .post-toc-list .toc-num { white-space: nowrap; }
@media (min-width: 721px) {
  /* Desktop hit targets reach 24px without moving a line: padding grows the
     target, an equal negative margin gives the space back. */
  body.spi-page :is(.hai-footer, .wg-foot, .post-eyebrow, .featured-foot, .post-toc-list, .side-card, .wg-wt-hd-r) a:not(.hai-x-link),
  body.spi-page :is(.wg-wt-skip, .hai-edwards summary),
  body.spi-inherit > main > p > a:only-child,
  body.spi-inherit .hai-page li > a:only-child { padding-block: 4px; margin-block: -4px; }
  body.spi-inherit .hai-back { padding-block: 4px; margin-top: 28px; margin-bottom: -4px; }
  body.spi-account .topbar a { display: inline-block; padding: 5px 4px; margin: -5px -4px -5px 8px; }
  /* Walkthrough turn dots: 24px targets, the same 9px marks inside. */
  body.spi-page .wargame-page .wg-wt-dots { gap: 0; }
  body.spi-page .wargame-page .wg-wt-dot {
    width: 24px; height: 24px; border-radius: var(--spi-radius-sm); transform: none;
    background: radial-gradient(circle, hsl(var(--border-strong)) 0 4.5px, transparent 5.2px);
  }
  body.spi-page .wargame-page .wg-wt-dot.done { background: radial-gradient(circle, var(--spi-source-ink) 0 4.5px, transparent 5.2px); }
  body.spi-page .wargame-page .wg-wt-dot.active { background: radial-gradient(circle, hsl(var(--primary)) 0 6px, transparent 6.7px); }
}