/* =======================================================
   POCG-PHOSPHOR.CSS — Phase 1 of the 2027 redesign
   =======================================================
   Loads AFTER pocg-custom.css (see the enqueue in
   pocg-setup.php, gated by pocg_phosphor_active()).
   GENERATED FILE — edit scripts/build_phosphor_css.py and
   regenerate; do not hand-edit below the token block.

   Design rules (mockups/redesign-2027, round 2):
   - Same token names, Phosphor values. Nothing renames.
   - NO text glow anywhere (cut after reader feedback for
     readability). Glow only on non-text elements.
   - Zero radius, system fonts, tier colors unchanged.
   ======================================================= */

:root {
  /* ground: green-black CRT, replacing the neutral grays */
  --pocg-bg:              #0A0C0B;
  --pocg-surface:         #101413;
  --pocg-surface-alt:     #0D1110;
  --pocg-surface-mid:     #161B1A;
  --pocg-surface-raised:  #141918;
  --pocg-header-bg:       #070908;
  --pocg-divider:         #1E2725;
  --pocg-border-subtle:   #1E2725;
  --pocg-line:            #26332F;
  --pocg-line-strong:     #3C514B;
  --pocg-focus:           #FFD166;
  --pocg-shadow:          rgba(0, 0, 0, 0.35);
  --pocg-reading-width:   760px;
  --pocg-orange-wash:     rgba(232, 130, 30, 0.09);

  /* teal: unchanged base, new hot display tier */
  --pocg-teal-hi:         #3FE8D2;
  /* chrome fill darkened from #008A76: near-white ink on it measured
     4.13:1, just under AA. 4.9:1 now. */
  --pocg-teal-dark:       #007260;

  /* the mono stack: NOT Courier New. Actual Courier New (what
     Windows/macOS browsers render) is a typewriter face with
     spindly strokes that reads thin, small, and frankly goofy at
     display sizes — flagged by Adam on the deployed preview. The
     Linux render farm had silently substituted a sturdy mono,
     which is why screenshots looked fine. Modern system monos
     only: Consolas (Win), Menlo/SF Mono (mac), DejaVu (Linux). */
  --pocg-font-mono:       ui-monospace, Consolas, 'Cascadia Mono', Menlo, 'SF Mono', 'DejaVu Sans Mono', 'Courier New', monospace;

  /* text: slightly green-shifted for the new ground (AA holds) */
  --pocg-text:            #D8EAE6;
  --pocg-text-heading:    #EFFFFB;

  /* semantic surface / ink tokens: the one-off grounds and on-accent
     inks the value-map tokenizer could not fold. Retinted to the
     green-black ground so no surface stays neutral-gray under the skin
     (and so Phosphor Light has a single place to flip them). */
  --pocg-art-bg:          #070908;
  --pocg-hero-tint:       #0F1918;
  --pocg-scrim-start:     rgba(6, 9, 8, 0.86);
  --pocg-scrim-end:       rgba(6, 9, 8, 0.94);
  --pocg-ink-on-teal:     #04201C;
  --pocg-surface-deep:    #070908;
  --pocg-surface-tint:    #0F1413;
  /* accent-chip inks: nudged toward the hot display tier so chips read
     as crisply as the rest of the skin. Tier reds are LAW and keep
     their classic values — a Broken red must not drift per skin. */
  --pocg-ink-teal:        #B4F5EA;
  --pocg-text-on-teal:    #EAFFFC;
  /* image-overlay copy must stay light in both page themes */
  --pocg-hero-image-ink:  #FFFFFF;
  --pocg-hero-image-soft: #DFF0ED;
  --pocg-hero-image-muted:#AABDB9;
}

/* hot display tier as a utility — a COLOR, never a shadow */
.pocg-hot { color: var(--pocg-teal-hi); }




/* -------------------------------------------------------
   TYPE FLOOR SWEEP — generated. Every top-level selector
   in pocg-custom.css declaring a sub-12px font-size,
   pinned to the readability scale in one pass
   (7-9px -> 11px, 10-11px -> 12px; 146 selectors).
   Kills the per-page small-text whack-a-mole; the hand
   blocks below refine individual cases and win by order.
   ------------------------------------------------------- */
.pocg-404-eyebrow { font-size: 12px; }
.pocg-404-hs-foot { font-size: 12px; }
.pocg-ad-ant { font-size: 12px; }
.pocg-ad-badge { font-size: 11px; }
.pocg-ad-mon { font-size: 12px; }
.pocg-ad-sub { font-size: 12px; }
.pocg-beige-article .elementor-widget-post-content figcaption { font-size: 12px !important; }
.pocg-card-badge-label { font-size: 11px; }
.pocg-card-devyear { font-size: 12px; }
.pocg-card-platform-badge { font-size: 12px !important; }
.pocg-card-tier { font-size: 12px; }
.pocg-coin-sub { font-size: 12px; }
.pocg-ftr-col-title { font-size: 12px; }
.pocg-ftr-copy { font-size: 12px; }
.pocg-ftr-est { font-size: 12px; }
.pocg-ftr-social-chip { font-size: 12px; }
.pocg-ftr-social-label { font-size: 12px; }
.pocg-ftr-stat-label { font-size: 11px; }
.pocg-ftr-tagline { font-size: 12px; }
.pocg-gp-badge { font-size: 11px; }
.pocg-gp-block-header { font-size: 12px; }
.pocg-gp-block-meta { font-size: 11px; }
.pocg-gp-breadcrumb { font-size: 12px; }
.pocg-gp-btn-primary { font-size: 12px; }
.pocg-gp-btn-secondary { font-size: 12px; }
.pocg-gp-cover-placeholder { font-size: 12px; }
.pocg-gp-ed-exc { font-size: 12px; }
.pocg-gp-ed-meta { font-size: 11px; }
.pocg-gp-htp-guide-link a { font-size: 12px; }
.pocg-gp-htp-label { font-size: 11px; }
.pocg-gp-htp-option-head { font-size: 11px; }
.pocg-gp-htp-subtitle { font-size: 12px; }
.pocg-gp-news-date { font-size: 12px; }
.pocg-gp-news-exc { font-size: 12px; }
.pocg-gp-news-tag { font-size: 11px; }
.pocg-gp-plat-tile { font-size: 11px; }
.pocg-gp-quick-tag { font-size: 11px; }
.pocg-gp-review-footer { font-size: 12px; }
.pocg-gp-review-tier-badge { font-size: 11px; }
.pocg-gp-review-verdict-label { font-size: 11px; }
.pocg-gp-rr-item a { font-size: 12px; }
.pocg-gp-rr-score { font-size: 12px; }
.pocg-gp-sb-header { font-size: 12px; }
.pocg-gp-score-outof { font-size: 12px; }
.pocg-gp-score-tier-badge { font-size: 11px; }
.pocg-gp-score-verdict-label { font-size: 11px; }
.pocg-gp-series-plat { font-size: 11px; }
.pocg-gp-series-score { font-size: 12px; }
.pocg-gp-series-this { font-size: 11px; }
.pocg-gp-stat-label { font-size: 12px; }
.pocg-hdr-est { font-size: 12px; }
.pocg-hdr-nav-caret { font-size: 11px; }
.pocg-hdr-nav-item { font-size: 12px; }
.pocg-hdr-nav-sub-item { font-size: 12px; }
.pocg-hdr-search-label { font-size: 12px; }
.pocg-hdr-sticky-item { font-size: 12px; }
.pocg-hdr-sub { font-size: 12px; }
.pocg-hero-badge { font-size: 11px; }
.pocg-hero-badge-platform { font-size: 12px; }
.pocg-hero-badge-series { font-size: 12px; }
.pocg-hero-sidebar-badge { font-size: 11px; }
.pocg-hero-sidebar-head { font-size: 11px; }
.pocg-hero-sidebar-meta { font-size: 12px; }
.pocg-history-kicker { font-size: 11px; }
.pocg-history-link { font-size: 12px; }
.pocg-history-year-label { font-size: 11px; }
.pocg-lab-chip { font-size: 12px; }
.pocg-lab-filter-label { font-size: 12px; }
.pocg-lab-result-count { font-size: 12px; }
.pocg-le-kicker { font-size: 11px; }
.pocg-le-link { font-size: 12px; }
.pocg-le-year { font-size: 11px; }
.pocg-news-date-day { font-size: 12px; }
.pocg-news-date-year { font-size: 12px; }
.pocg-news-more { font-size: 12px; }
.pocg-news-tag { font-size: 11px; }
.pocg-numbers-kicker { font-size: 11px; }
.pocg-numbers-label { font-size: 11px; }
.pocg-numbers-total-label { font-size: 11px; }
.pocg-numbers-total-sub { font-size: 12px; }
.pocg-pg-fam { font-size: 11px; }
.pocg-pg-tile-count { font-size: 12px; }
.pocg-pod-latest-eyebrow { font-size: 11px; }
.pocg-pod-sub-chip { font-size: 12px; }
.pocg-rp-block-label { font-size: 12px; }
.pocg-rp-card-label { font-size: 12px; }
.pocg-rp-card-link { font-size: 12px; }
.pocg-rp-card-tier { font-size: 12px; }
.pocg-rv-era1-tag { font-size: 12px; }
.pocg-sbx-date { font-size: 11px; }
.pocg-sbx-head { font-size: 12px; }
.pocg-sbx-type { font-size: 11px; }
.pocg-sea-eyebrow { font-size: 11px; }
.pocg-sea-heading { font-size: 12px; }
.pocg-sea-meta { font-size: 12px; }
.pocg-sea-read-link { font-size: 12px; }
.pocg-section-more { font-size: 12px; }
.pocg-series-entry-num { font-size: 12px; }
.pocg-series-mini-meta { font-size: 11px; }
.pocg-series-name { font-size: 11px; }
.pocg-series-read-link { font-size: 12px; }
.pocg-sh-cta { font-size: 12px; }
.pocg-sh-eyebrow { font-size: 12px; }
.pocg-sh-kick { font-size: 11px; }
.pocg-sr-badge { font-size: 11px; }
.pocg-sr-eyebrow { font-size: 12px; }
.pocg-ticker-label { font-size: 12px; }
.pocg-ticker-platform { font-size: 11px; }
.pocg-ticker-score { font-size: 12px; }
.pocg-ticker-title { font-size: 12px; }
.pocg-vault-btn { font-size: 12px; }
.pocg-vault-eyebrow { font-size: 11px; }
.pocg-vault-search { font-size: 12px; }
.pocg-vault-search-input { font-size: 12px; }
.pocg-vault-stat-label { font-size: 11px; }
.pocg-vh-az-note { font-size: 12px; }
.pocg-vh-back-link { font-size: 12px; }
.pocg-vh-card-footer { font-size: 12px; }
.pocg-vh-card-meta { font-size: 12px; }
.pocg-vh-card-plat { font-size: 11px; }
.pocg-vh-dev-count { font-size: 12px; }
.pocg-vh-eyebrow { font-size: 11px; }
.pocg-vh-gcard-badge { font-size: 11px; }
.pocg-vh-gcard-meta { font-size: 12px; }
.pocg-vh-genre-count { font-size: 11px; }
.pocg-vh-genre-name { font-size: 12px; }
.pocg-vh-plat-count { font-size: 11px; }
.pocg-vh-plat-pip { font-size: 11px; }
.pocg-vh-plat-tile { font-size: 11px; }
.pocg-vh-reviewed-badge { font-size: 11px; }
.pocg-vh-search-btn { font-size: 12px; }
.pocg-vh-search-label { font-size: 11px; }
.pocg-vh-section-link { font-size: 12px; }
.pocg-vh-section-sub { font-size: 12px; }
.pocg-vh-section-title { font-size: 12px; }
.pocg-vh-series-desc { font-size: 12px; }
.pocg-vh-series-dev { font-size: 11px; }
.pocg-vh-series-footer { font-size: 11px; }
.pocg-vh-series-score { font-size: 12px; }
.pocg-vh-stat-label { font-size: 11px; }
.pocg-vh-tracked-badge { font-size: 11px; }
.pocg_review .entry-content .wp-caption-text { font-size: 12px !important; }
.rank-math-breadcrumb { font-size: 12px !important; }
.rank-math-breadcrumb .separator { font-size: 12px !important; }
.sidebar-box.news .elementor-post::before { font-size: 12px; }
.wp-block-button__link { font-size: 12px !important; }

/* -------------------------------------------------------
   CHROME — the site-wide Phosphor voice (Phase 1.5)
   The token retune alone is nearly invisible (the ground
   was already near-black), so the signature typography
   moves from the mockups land here: the mono data voice
   on wordmark / nav / section heads / ticker / badges /
   footer, and the hot-teal display tier on section heads.
   Typography and color only — no layout, spacing, or
   size changes, so nothing reflows. Per-surface phases
   absorb these rules into their own sheets later.
   ------------------------------------------------------- */

/* Wordmark: Adam's SVG logo lockup (pocg-logo.svg, inlined by
   pocg_logo_svg() when the skin is active). currentColor + the
   token means the mark retints with the theme. Text fallback rules
   below cover a missing file. */
.pocg-hdr-logo .pocg-logo-svg--wide {
  display: block;
  height: clamp(46px, 5vw, 64px);
  width: auto;
  color: var(--pocg-teal);
  margin: 4px 0 6px;
}
.pocg-hdr-sticky-brand .pocg-logo-svg--badge {
  display: block;
  height: 30px;
  width: auto;
  color: var(--pocg-teal);
}
/* text fallback (file missing) keeps the color flip */
.pocg-hdr-logo { color: var(--pocg-teal); }
.pocg-hdr-logo span { color: var(--pocg-text-heading); }
.pocg-hdr-est { font-family: var(--pocg-font-mono); }

/* Nav: mono is OFF here — after three size bumps it still read
   small and thin (mono digits/caps run narrow), so the nav goes
   back to Arial bold at a readable size. The mono voice keeps the
   ticker, badges, and section heads, where it works. */
.pocg-hdr-nav-item,
.pocg-hdr-nav-sub-item,
.pocg-hdr-sticky-item {
  font-family: var(--pocg-font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em !important;
}
.pocg-hdr-nav-item.active,
.pocg-hdr-sticky-item.active { color: var(--pocg-teal-hi); }

/* header support lines step up */
.pocg-hdr-sub { font-size: 13px; }
.pocg-hdr-desc { font-size: 14px; }

/* section heads, shared + the homepage per-surface twins:
   the mono + hot-teal signature. Surface accent colors
   (news orange, series blue) are kept — only the lead word
   moves to the hot tier. */
.pocg-section-head,
.pocg-news-head,
.pocg-series-head { border-bottom-color: var(--pocg-teal); }
.pocg-section-title,
.pocg-news-title,
.pocg-series-title {
  font-family: var(--pocg-font-mono);
  font-size: 1.2rem;
  letter-spacing: 0.26em !important;
  color: var(--pocg-teal-hi);
}
.pocg-section-title-accent { color: var(--pocg-text-heading); }
.pocg-section-more { font-family: var(--pocg-font-mono); }

/* Sidebar database headings (Vault / Lab / Podcast) stay Arial 900:
   display-size mono reads as typewriter poster, not data voice —
   the earlier mono rule here was a mistake and is deliberately gone.
   RULE: mono is for SMALL labels, nav, scores, section heads only;
   large display headings never set in mono (wordmark excepted). */

/* verdicts ticker: data voice, sized up from 11px for legibility */
.pocg-ticker-label,
.pocg-ticker-title,
.pocg-ticker-platform,
.pocg-ticker-score {
  font-family: var(--pocg-font-mono);
  font-size: 12px;
  font-weight: 700;
}

/* type badges on hero + cards: data voice */
.pocg-hero-badge,
.pocg-card-badge-label,
.pocg-card-badge-num { font-family: var(--pocg-font-mono); }

/* footer: column titles + brand line join the voice */
.pocg-ftr-col-title,
.pocg-ftr-tagline { font-family: var(--pocg-font-mono); }


/* -------------------------------------------------------
   READABILITY — the aging-eyes / astigmatism pass
   The audience is 40+ and wears glasses; light-on-dark
   halation punishes small and dim text hardest. Rules:
   reading prose is 16px minimum at full text strength
   (never the soft/muted tiers), the base UI size steps
   up, and the dim tiers brighten past bare-AA. Mono
   NEVER sets sentences — labels and data only.
   ------------------------------------------------------- */

/* base UI text: 14px -> 15px site-wide */
body { font-size: 15px; }

/* dim tiers: one step brighter than the classic values
   (soft ~5.9:1 -> ~7.4:1 on bg; muted ~5.3:1 -> ~6.5:1) */
:root {
  --pocg-text-soft:  #8FB3AC;
  --pocg-text-muted: #7EA098;
}

/* review prose: 16 -> 17px (already full-strength color) */
.pocg-review-body p,
.pocg_review .entry-content p {
  font-size: 17px !important;
  line-height: 1.85 !important;
}

/* homepage news rows: headline was 15px, blurb 12px */
.pocg-news-headline { font-size: 18px; }
.pocg-news-blurb { font-size: 15px; line-height: 1.6; }

/* sidebars ran 9-13px, below the floor: Keep Exploring rows,
   plus shared cross-content cards */
.pocg-sbx-title { font-size: 14px; }
.pocg-sbx-type,
.pocg-sbx-date { font-size: 11px; }

/* nav: one more notch (12 -> 13px); flagged as still hard to read.
   If this round doesn't land, the next lever is dropping mono from
   the nav entirely, not more size. */
.pocg-hdr-nav-item,
.pocg-hdr-nav-sub-item,
.pocg-hdr-sticky-item { font-size: 13px; }

/* game-page series box: the "This" marker was 8px absolutely
   positioned in the corner; the sweep grew it into the title.
   Reserve room on the current row and settle the badge. */
.pocg-gp-series-this { top: 10px; right: 10px; padding: 3px 8px; }
.pocg-gp-series-row--current .pocg-gp-series-title {
  display: block;
  padding-right: 64px;
}

/* SCALE PARITY — Adam's reference: the homepage news rows
   (18px headline / 15px excerpt / 12px meta). The teaser and
   cross-link widgets below and beside them were built one to
   two scale steps smaller and now read as fine print next to
   the fixed news. Everything content-like matches the rows. */

/* This Month in Gaming History + latest-editorial teaser */
.pocg-history-headline { font-size: 18px; }
.pocg-history-body { font-size: 15px; line-height: 1.65; }
.pocg-history-link { font-size: 12px; }
.pocg-le-headline { font-size: 18px; }
.pocg-le-tagline { font-size: 15px; }
.pocg-le-body { font-size: 15px; line-height: 1.65; }

/* game-page cross-link widgets: In the News, In Features,
   In Previews (shares the gp-ed classes) */
.pocg-gp-news-title,
.pocg-gp-ed-title { font-size: 16px; color: var(--pocg-text); }
.pocg-gp-news-exc,
.pocg-gp-ed-exc { font-size: 14px; color: var(--pocg-text-soft); line-height: 1.6; }

/* game-page series box rows */
.pocg-gp-series-title { font-size: 15px; color: var(--pocg-text); }
.pocg-gp-series-plat { font-size: 12px; }

/* Latest Editorials widget side entries: titles were 12px with
   9px meta next to an 18px+ hero column */
.pocg-series-mini-title { font-size: 16px; }
.pocg-series-mini-excerpt { font-size: 14px; line-height: 1.6; }
.pocg-series-mini-meta,
.pocg-series-name { font-size: 12px; }

/* This Week in POCG History / archive-dive cards */
.pocg-ad-title { font-size: 16px; }
.pocg-ad-blurb { font-size: 14px; line-height: 1.6; }
.pocg-ad-date { font-size: 12px; }

/* footer steps up to the label floor */
.pocg-ftr-nav-link { font-size: 14px; }
.pocg-ftr-series-name { font-size: 13px; }
.pocg-ftr-desc { font-size: 14px; }
.pocg-ftr-contact-link { font-size: 13px; }


/* -------------------------------------------------------
   SOL DESIGN PASS — production refinement (v1.5 foundation)

   The behavior stays Fable's: real destinations, accessible
   accordions, compact/mobile variants, and the theme switch.
   This layer adopts the Sol study's visual hierarchy: quiet
   hairlines, title-case Arial navigation, compact mono chips,
   a review hero with an adjacent verdict, and a 760px reading
   measure. Color remains token-owned in both themes.
   ------------------------------------------------------- */

/* Keyboard focus should be unmistakable in both modes. */
:focus-visible {
  outline: 3px solid var(--pocg-focus) !important;
  outline-offset: 3px;
}

/* Compact masthead: the Sol site bar, not a miniature copy of the full
   homepage brand moment. The logo is Home, five destinations carry the
   IA, and search expands only when requested. */
.pocg-hdr-outer { border-bottom-width: 1px; }
.pocg-hdr-outer--compact .pocg-hdr-inner {
  min-height: 86px;
  max-width: 1280px;
  gap: 4px 24px;
}
.pocg-hdr-outer--compact .pocg-hdr-logo .pocg-logo-svg--wide {
  width: 218px;
  height: auto;
}
.pocg-hdr-outer--compact .pocg-hdr-nav-item {
  padding-inline: 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--pocg-text-soft);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.015em !important;
  text-transform: none;
}
.pocg-hdr-outer--compact .pocg-hdr-nav-item:hover,
.pocg-hdr-outer--compact .pocg-hdr-nav-item.active {
  border-bottom-color: var(--pocg-teal);
  background: transparent;
  color: var(--pocg-text-heading);
}
.pocg-hdr-nav-sub {
  min-width: 190px;
  border-color: var(--pocg-line);
  border-top-color: var(--pocg-teal);
}
.pocg-hdr-nav-sub-item {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px 14px;
  color: var(--pocg-text-soft);
  font-size: 14px;
  letter-spacing: 0.015em !important;
  text-transform: none;
}
.pocg-hdr-search-wrap,
.pocg-hdr-search-disclosure > summary,
.pocg-theme-toggle,
.pocg-hdr-mbtn { border-color: var(--pocg-line); }
.pocg-hdr-desktop-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.pocg-hdr-mobile-search { display: none; }
.pocg-hdr-search-disclosure { position: relative; }
.pocg-hdr-search-disclosure > summary {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--pocg-line);
  background: var(--pocg-surface);
  color: var(--pocg-text);
  cursor: pointer;
  list-style: none;
}
.pocg-hdr-search-disclosure > summary::-webkit-details-marker { display: none; }
.pocg-hdr-search-disclosure > summary svg {
  width: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.pocg-hdr-search-disclosure[open] > summary,
.pocg-hdr-search-disclosure > summary:hover {
  border-color: var(--pocg-teal);
  color: var(--pocg-teal-hi);
}
.pocg-hdr-search-popover {
  position: absolute;
  z-index: 980;
  top: calc(100% + 10px);
  right: 0;
  width: min(330px, calc(100vw - 40px));
  padding: 10px;
  border: 1px solid var(--pocg-line-strong);
  background: var(--pocg-surface-raised);
  box-shadow: 0 12px 30px var(--pocg-shadow);
}
.pocg-hdr-search-popover .pocg-hdr-search-input { font-size: 16px; }
.pocg-theme-toggle-label { display: none; }
.pocg-theme-toggle { width: 44px; justify-content: center; padding: 0; }
.pocg-hdr-mbtn {
  letter-spacing: 0.015em;
  text-transform: none;
}

/* Footer: one clear information hierarchy instead of three equally loud
   stacks. The brand and sitemap stay in the main grid; social/contact live
   in the full-width utility strip so eight chips no longer make the brand
   column (and therefore the whole footer) unnecessarily tall. */
.pocg-ftr-outer {
  border-top: 1px solid var(--pocg-teal);
  background: var(--pocg-header-bg);
}
.pocg-ftr-inner { max-width: 1280px; }
.pocg-ftr-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(230px, 0.8fr) minmax(0, 1.2fr);
  gap: 44px;
  padding: 26px 0 18px;
}
.pocg-ftr-logo { margin-bottom: 8px; }
.pocg-ftr-logo .pocg-logo-svg--wide {
  width: 218px;
  height: auto;
  color: var(--pocg-teal);
}
.pocg-ftr-tagline {
  margin-bottom: 11px;
  color: var(--pocg-orange);
  font-size: 11px;
}
.site-footer .pocg-ftr-desc {
  max-width: 390px;
  margin-bottom: 14px;
  color: var(--pocg-text-soft);
  font-size: 15px !important;
  line-height: 1.6;
}
.pocg-ftr-stat-num { font-size: 18px; }
.pocg-ftr-stat-label { font-size: 11px; }
.pocg-ftr-col-title {
  margin-bottom: 8px;
  padding-bottom: 8px;
  color: var(--pocg-text-muted);
  font-size: 11px;
}
.pocg-ftr-nav-grid,
.pocg-ftr-proj-list { gap: 1px 18px; }
.pocg-ftr-nav-link {
  min-height: 31px;
  display: flex;
  align-items: center;
  padding: 3px 0;
  color: var(--pocg-text-soft);
  font-size: 14px;
  letter-spacing: 0.045em;
  text-transform: none;
}
.pocg-ftr-series-list { gap: 0 20px; }
.pocg-ftr-series-item {
  min-height: 30px;
  padding: 3px 0;
}
.pocg-ftr-series-name {
  font-size: 13px;
  letter-spacing: 0.035em;
  text-transform: none;
}
.pocg-ftr-col-title--sub { margin-top: 13px; }
.pocg-ftr-utility {
  min-height: 52px;
  padding: 8px 0;
}
.pocg-ftr-social-label { font-size: 11px; }
.pocg-ftr-social-chip {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  color: var(--pocg-text-soft);
  font-size: 12px;
  letter-spacing: 0.035em;
}
.pocg-ftr-contact-email { font-size: 14px; }
.pocg-ftr-bottom { padding: 11px 0; }
.pocg-ftr-copy,
.pocg-ftr-est { font-size: 12px; }

@media (max-width: 900px) {
  .pocg-ftr-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}

@media (max-width: 600px) {
  .pocg-ftr-grid {
    grid-template-columns: 1fr;
    gap: 26px;
    padding-top: 24px;
  }
  .pocg-ftr-logo .pocg-logo-svg--wide { width: 190px; }
  .pocg-ftr-nav-link { min-height: 36px; }
  .pocg-ftr-series-item { min-height: 36px; }
  .pocg-ftr-social-chip { min-height: 40px; }
}

/* Chips: compact metadata, outlined rather than painted. The series
   color is still visible in the border and ink. */
.pocg-gp-badges,
.pocg-gp-quick-tags { gap: 7px; }
.pocg-gp-badge,
.pocg-gp-quick-tag {
  padding: 5px 8px;
  background: transparent;
  font-family: var(--pocg-font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.055em;
}
.pocg-gp-badge-orange { background: transparent; color: var(--pocg-orange); }
.pocg-gp-badge-blue { background: transparent; color: var(--pocg-blue-text); }
.pocg-gp-badge-teal { background: transparent; color: var(--pocg-teal-hi); }
.pocg-gp-badge-muted,
.pocg-gp-quick-tag {
  border-color: var(--pocg-line-strong);
  color: var(--pocg-text-soft);
}
.pocg-gp-badge:hover,
.pocg-gp-quick-tag:hover {
  border-color: var(--pocg-teal);
  color: var(--pocg-text-heading);
}

/* Review pages use the warm canvas as the actual page ground. Elementor
   and GeneratePress both paint white containers by default, so the token
   alone is insufficient unless those wrappers are made transparent. */
body.single-pocg_review,
body.single-pocg_review .site,
body.single-pocg_review .site-content,
body.single-pocg_review .elementor-location-single,
body.single-pocg_review .elementor-location-single > .elementor-element,
body.single-pocg_review .elementor-location-single .e-con {
  background: var(--pocg-bg) !important;
}
.pocg-rv-outer {
  max-width: 1280px;
}

/* Review hero: identity and decision only. Reference art, profile links,
   facts, and topic chips begin in the content grid below. */
.pocg-rv-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 50px;
  align-items: end;
  padding: 36px 0 40px;
  border-bottom: 1px solid var(--pocg-line);
}
.pocg-rv-header { margin: 0; }
.pocg-rv-eyebrow {
  color: var(--pocg-teal-hi);
  font-family: var(--pocg-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pocg-rv-header .pocg-gp-title {
  margin: 14px 0 14px !important;
  font-size: clamp(3rem, 5.1vw, 4.5rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.04em !important;
  text-transform: none !important;
}
.pocg-rv-header .pocg-gp-tagline {
  max-width: 760px;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--pocg-text-soft);
  font-size: 19px;
  font-style: normal;
  line-height: 1.5;
}
.pocg-rv-byline {
  margin-top: 16px;
  color: var(--pocg-text-muted);
  font-family: var(--pocg-font-mono);
  font-size: 12px;
  letter-spacing: 0;
}
.pocg-rv-hero .pocg-gp-score-banner {
  display: block;
  padding: 20px;
  border: 1px solid var(--pocg-orange-border);
  background: var(--pocg-orange-wash);
}
.pocg-rv-hero .pocg-gp-score-left {
  min-width: 0;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
}
.pocg-rv-score-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.pocg-rv-hero .pocg-gp-score-num {
  color: var(--pocg-orange);
  font-size: 2.25rem;
  white-space: nowrap;
}
.pocg-rv-score-scale {
  color: inherit;
  font-size: 0.78em;
  text-decoration: none;
}
.pocg-rv-hero .pocg-gp-score-tier-badge {
  margin: 0;
  padding: 0;
  background: transparent;
  font-family: var(--pocg-font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
}
.pocg-rv-hero .pocg-gp-score-tier-badge.tier-essential { color: var(--pocg-gold); }
.pocg-rv-hero .pocg-gp-score-tier-badge.tier-excellent { color: var(--pocg-orange); }
.pocg-rv-hero .pocg-gp-score-tier-badge.tier-good { color: var(--pocg-blue-text); }
.pocg-rv-hero .pocg-gp-score-tier-badge.tier-average { color: var(--pocg-text-muted); }
.pocg-rv-hero .pocg-gp-score-tier-badge.tier-poor { color: var(--pocg-tier-poor-text); }
.pocg-rv-hero .pocg-gp-score-tier-badge.tier-broken { color: var(--pocg-tier-broken-text); }
.pocg-rv-hero .pocg-gp-score-mid {
  gap: 7px;
  padding: 12px 0 0;
  background: transparent;
}
.pocg-rv-hero .pocg-gp-score-verdict-title {
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.02em !important;
}
.pocg-rv-hero .pocg-gp-score-verdict-copy {
  font-family: var(--pocg-font-ui);
  font-size: 16px;
  line-height: 1.5;
}

/* Long-form reading column and quieter reference sidebar. */
.pocg-gp-content-grid {
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 50px;
  margin-top: 34px;
}
.pocg-rv-body {
  max-width: 800px;
  font-size: 19px;
  line-height: 1.72;
}
.pocg-rv-body > p:first-of-type {
  color: var(--pocg-text-heading);
  font-size: 21px;
  line-height: 1.65;
}
.pocg-rv-body figure,
.pocg-rv-body > img {
  margin-top: 34px;
  margin-bottom: 34px;
}
.pocg-rv-body figure + p,
.pocg-rv-body > img + p {
  margin-top: 38px;
}
.pocg-rv-body h2,
.pocg-rv-body h3 {
  text-transform: none;
  letter-spacing: -0.02em !important;
}
.pocg-rv-body h2 { font-size: 30px; }
.pocg-rv-body h3 { font-size: 24px; }
.pocg-rv-lead {
  max-width: 800px;
  padding: 17px 20px;
  border: 0;
  border-left: 3px solid var(--pocg-teal);
  background: var(--pocg-teal-glow);
}
.pocg-gp-sidebar-col,
.pocg-sb-sticky { gap: 18px; }
.pocg-rv-outer .pocg-gp-sb-block,
.pocg-rv-outer .pocg-sbx {
  border: 1px solid var(--pocg-line);
  background: var(--pocg-surface);
}
.pocg-rv-outer .pocg-gp-sb-header,
.pocg-rv-outer .pocg-sbx-head {
  padding: 12px 15px;
  border-bottom: 1px solid var(--pocg-line);
  background: transparent;
  color: var(--pocg-text-muted);
  font-family: var(--pocg-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em !important;
}
.pocg-rv-outer .pocg-gp-sb-header--teal { color: var(--pocg-teal-hi); }
.pocg-rv-outer .pocg-gp-sb-header--orange { color: var(--pocg-orange); }
.pocg-rv-outer .pocg-gp-sb-body { padding: 4px 15px 10px; }
.pocg-rv-outer .pocg-gp-info-table td { padding-block: 10px; }
.pocg-rv-outer .pocg-gp-info-table td:last-child { text-align: right; }
.pocg-rv-topics .pocg-gp-badges { margin: 0; }
.pocg-rv-topics:empty { display: none; }
.pocg-rv-reference-art { padding-top: 4px; }
.pocg-rv-reference-art .pocg-rv-sb-cover {
  width: 100%;
  margin: 0;
  border: 1px solid var(--pocg-line);
  background: var(--pocg-surface);
}
.pocg-rv-profile-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--pocg-teal-hi);
  font-family: var(--pocg-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.pocg-rv-profile-link:hover { color: var(--pocg-text-heading); }
.pocg-rv-tested-rail .pocg-gp-block {
  margin: 0;
  border: 1px solid var(--pocg-line);
  background: var(--pocg-surface);
}
.pocg-rv-tested-rail .pocg-gp-block-header {
  padding: 12px 15px;
  border-bottom: 1px solid var(--pocg-line);
  background: transparent;
}
.pocg-rv-tested-rail .pocg-gp-block-body { padding: 6px 15px 14px; }
.pocg-rv-tested-rail .pocg-hwr-tested-table td:first-child { width: 40%; }
.pocg-rv-tested-rail .pocg-hwr-tested-method a {
  color: var(--pocg-teal-hi);
  line-height: 1.5;
}
.pocg-rv-rail-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 0 4px;
}
.pocg-rv-rail-gallery-link {
  display: block;
  border: 1px solid var(--pocg-line);
  background: var(--pocg-surface-alt);
  overflow: hidden;
}
.pocg-rv-rail-gallery-link:hover { border-color: var(--pocg-teal); }
.pocg-rv-rail-gallery-link img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.pocg-rv-body img[id^="pocg-review-image-"] { scroll-margin-top: 110px; }

/* Final Thoughts is a quiet conclusion card, not another heavy data block. */
.pocg-rv-outer .pocg-gp-block--gold {
  border-color: var(--pocg-line);
  border-left: 3px solid var(--pocg-orange);
  background: var(--pocg-surface);
}
.pocg-rv-outer .pocg-gp-block--gold .pocg-gp-block-header {
  border-bottom: 0;
  padding-bottom: 0;
}
.pocg-rv-outer .pocg-gp-block--gold .pocg-gp-block-body { padding-top: 12px; }
.pocg-rv-outer .pocg-gp-block--gold .pocg-gp-block-body p {
  margin: 0;
  color: var(--pocg-text);
}

/* The shared archive strip relies on its placement container for top spacing.
   Reviews emit it directly after the article grid, so restore a clear section
   break here without changing archive spacing on Elementor-built surfaces. */
.pocg-rv-outer > .pocg-ad-section { margin-top: 48px; }

/* Game record: art and title breathe on the canvas. The surface modifier
   keeps this treatment off the other shortcodes that share pocg-gp-* core. */
.pocg-gp-outer--game .pocg-gp-hero {
  padding: 30px 0;
  border: 0;
  border-bottom: 1px solid var(--pocg-line);
  background: transparent;
}
.pocg-gp-outer--game .pocg-gp-hero-grid {
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 34px;
  align-items: center;
}
.pocg-gp-outer--game .pocg-gp-cover {
  min-height: 0;
  border: 1px solid var(--pocg-line-strong);
  background: var(--pocg-surface);
}
.pocg-gp-outer--game .pocg-gp-hero-body {
  padding: 0;
  gap: 12px;
}
.pocg-gp-outer--game .pocg-gp-title {
  font-size: clamp(2.75rem, 6vw, 4.75rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.045em !important;
  text-transform: none !important;
}
.pocg-gp-outer--game .pocg-gp-tagline {
  max-width: 680px;
  padding: 0;
  border: 0;
  color: var(--pocg-text-soft);
  font-size: 19px;
  font-style: normal;
  line-height: 1.5;
}
.pocg-gp-outer--game .pocg-gp-content-grid {
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 42px;
  margin-top: 30px;
}
.pocg-gp-outer--game .pocg-gp-main-col,
.pocg-gp-outer--game .pocg-gp-sidebar-col { gap: 24px; }

/* The description is the game record's editorial core, not another card. */
.pocg-gp-about {
  max-width: var(--pocg-reading-width);
  color: var(--pocg-text);
  font-family: var(--pocg-font-body);
  font-size: 19px;
  line-height: 1.72;
}
.pocg-gp-about p { margin: 0 0 22px; }
.pocg-gp-about p:last-child { margin-bottom: 0; }
.pocg-gp-about > p:first-child {
  color: var(--pocg-text-heading);
  font-size: 20px;
}

/* Screenshots stay discoverable and lightbox-enabled, but lose the nested
   panel chrome so imagery can punctuate the prose like the Sol study. */
.pocg-gp-outer--game .pocg-shots-block {
  border: 0;
  background: transparent;
}
.pocg-gp-outer--game .pocg-shots-block .pocg-gp-block-header {
  padding: 0 0 12px;
  border-bottom: 1px solid var(--pocg-line);
}
.pocg-gp-outer--game .pocg-shots-block .pocg-gp-block-body { padding: 0; }

/* One review handoff replaces the former hero banner + article card + score
   widget repetition. */
.pocg-gp-review-card {
  padding: 18px;
  border: 1px solid var(--pocg-teal);
  background: var(--pocg-teal-glow);
}
.pocg-gp-review-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.pocg-gp-review-card-label,
.pocg-gp-review-card-score,
.pocg-gp-review-card-meta {
  font-family: var(--pocg-font-mono);
  font-weight: 700;
}
.pocg-gp-review-card-label {
  color: var(--pocg-teal-hi);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pocg-gp-review-card-score { font-size: 18px; }
.pocg-gp-review-card-score.tier-essential { color: var(--pocg-gold); }
.pocg-gp-review-card-score.tier-excellent { color: var(--pocg-orange); }
.pocg-gp-review-card-score.tier-good { color: var(--pocg-blue-text); }
.pocg-gp-review-card-score.tier-average { color: var(--pocg-text-muted); }
.pocg-gp-review-card-score.tier-poor { color: var(--pocg-tier-poor-text); }
.pocg-gp-review-card-score.tier-broken { color: var(--pocg-tier-broken-text); }
.pocg-gp-review-card-title {
  margin-top: 8px;
  color: var(--pocg-text-heading);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}
.pocg-gp-review-card-copy {
  margin: 10px 0 0;
  color: var(--pocg-text-soft);
  font-size: 15px;
  line-height: 1.55;
}
.pocg-gp-review-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin: 13px 0;
  color: var(--pocg-text-muted);
  font-size: 11px;
  line-height: 1.4;
}
.pocg-gp-review-card .pocg-gp-btn-primary {
  box-sizing: border-box;
  width: 100%;
}
.pocg-gp-outer--game .pocg-gp-info-table td:last-child { text-align: right; }
.pocg-gp-outer--game .pocg-gp-sb-header { color: var(--pocg-text-muted); }
.pocg-gp-outer--game .pocg-gp-sb-header--teal { color: var(--pocg-teal-hi); }
.pocg-gp-outer--game .pocg-gp-sb-block { background: var(--pocg-surface); }
.pocg-gp-outer--game .pocg-gp-sb-body { padding: 4px 15px 10px; }
.pocg-gp-outer--game .pocg-gp-info-table td { padding-block: 10px; }
.pocg-gp-outer--game .pocg-gp-breadcrumb { padding-bottom: 18px; }
.pocg-gp-outer--game .pocg-gp-hero { margin-bottom: 0; }
.pocg-gp-outer--game .pocg-gp-cover-img {
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* The guide handoff is an action, not a metadata footnote. Keep the text
   neutral in both themes and let the orange container carry the accent. */
.pocg-gp-htp-guide-link { padding: 14px 0 0; }
.pocg-gp-htp-guide-link a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--pocg-orange-border);
  background: var(--pocg-orange-wash);
  color: var(--pocg-text-heading);
  font-family: var(--pocg-font-ui);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0 !important;
  text-transform: none;
  text-decoration: none;
}
.pocg-gp-htp-guide-link a:hover,
.pocg-gp-htp-guide-link a:focus-visible {
  border-color: var(--pocg-orange);
  background: var(--pocg-orange-wash);
  color: var(--pocg-text-heading);
  text-decoration: none;
}

/* Surface blocks retain their category cue as ink and a hairline,
   instead of a stack of saturated title bars. */
.pocg-gp-block,
.pocg-gp-sb-block { border-width: 1px; }
.pocg-gp-block-header,
.pocg-gp-sb-header {
  padding: 11px 15px;
  border-bottom-width: 1px;
  background: transparent;
  font-family: var(--pocg-font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
}
.pocg-gp-block-header--teal,
.pocg-gp-sb-header--teal { color: var(--pocg-teal-hi); }
.pocg-gp-block-header--blue { color: var(--pocg-blue-text); }
.pocg-gp-block-header--gold { color: var(--pocg-gold); }
.pocg-gp-block-header--orange,
.pocg-gp-sb-header--orange { color: var(--pocg-orange); }
.pocg-gp-block-body { padding: 20px 22px; }
.pocg-gp-block-body p {
  max-width: var(--pocg-reading-width);
  font-size: 17px;
  line-height: 1.78;
}
.pocg-gp-btn-primary,
.pocg-gp-btn-secondary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  border-width: 1px;
  box-shadow: none;
  background: var(--pocg-teal-glow);
  color: var(--pocg-teal-hi);
  font-family: var(--pocg-font-mono);
  font-size: 12px;
  letter-spacing: 0.055em !important;
}
.pocg-gp-btn-primary:hover,
.pocg-gp-btn-secondary:hover {
  border-color: var(--pocg-teal);
  background: var(--pocg-teal);
  color: var(--pocg-ink-on-teal);
}

@media (max-width: 1100px) {
  .pocg-rv-hero,
  .pocg-gp-content-grid { gap: 28px; }
  .pocg-rv-hero { grid-template-columns: minmax(0, 1fr) 300px; }
  .pocg-gp-content-grid { grid-template-columns: minmax(0, 1fr) 290px; }
}

@media (max-width: 900px) {
  .pocg-hdr-desktop-tools { display: none; }
  .pocg-hdr-mobile-search { display: contents; }
  .pocg-hdr-nav-item,
  .pocg-hdr-nav-sub-item {
    letter-spacing: 0.015em !important;
    text-transform: none;
  }
  .pocg-rv-hero,
  .pocg-gp-content-grid { grid-template-columns: 1fr; }
	.pocg-rv-rail-gallery { display: none; }
  .pocg-rv-hero { gap: 24px; padding: 30px 0; }
  .pocg-rv-hero .pocg-gp-score-banner { max-width: 560px; }
  .pocg-gp-outer--game .pocg-gp-hero-grid {
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }
  .pocg-gp-outer--game .pocg-gp-cover { padding: 12px; }
  .pocg-gp-outer--game .pocg-gp-content-grid { grid-template-columns: 1fr; }
  .pocg-gp-outer--game .pocg-gp-info-table td:last-child { text-align: left; }
  .pocg-rv-outer .pocg-gp-info-table td:last-child { text-align: left; }
  .pocg-rv-outer > .pocg-ad-section { margin-top: 36px; }
}

@media (min-width: 901px) {
  .pocg-hdr-outer--compact .pocg-hdr-mcontrols { display: none; }
}

@media (max-width: 600px) {
  .pocg-hdr-outer--compact .pocg-hdr-logo .pocg-logo-svg--wide { width: 176px; }
  .pocg-hdr-mbtn {
    width: 44px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .pocg-hdr-mbtn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .pocg-rv-header .pocg-gp-title { font-size: clamp(2.25rem, 11vw, 3.25rem) !important; }
  .pocg-rv-header .pocg-gp-tagline,
  .pocg-gp-outer--game .pocg-gp-tagline { font-size: 18px; }
  .pocg-rv-body { font-size: 18px; line-height: 1.72; }
  .pocg-rv-body > p:first-of-type { font-size: 19px; }
  .pocg-rv-score-top { align-items: flex-start; }
  .pocg-gp-outer--game .pocg-gp-title { font-size: clamp(2.2rem, 11vw, 3.35rem) !important; }
  .pocg-gp-about { font-size: 18px; }
  .pocg-gp-about > p:first-child { font-size: 19px; }
  .pocg-gp-block-body { padding: 18px; }
}


/* -------------------------------------------------------
   BRIDGE — generated overrides for declarations that
   hardcode the old ground hexes in pocg-custom.css.
   One rule per offending declaration; delete per-surface
   as migrations tokenize the originals.
   ------------------------------------------------------- */


/* -------------------------------------------------------
   PHOSPHOR LIGHT — the reader-selectable light mode.
   White Swirl's palette on Phosphor's geometry: same zero
   radius, same hairline grids, same mono labels. The modes
   must not feel like different sites, only different light.

   Applied by a `data-theme="light"` attribute on <html>,
   stamped before first paint by the inline script in
   pocg_theme_script() (localStorage, falling back to
   prefers-color-scheme). The page cache serves identical
   HTML to everyone, which is exactly why this is a
   client-side attribute and not a PHP branch.

   Every token below is one the dark skin also defines: a
   surface sheet that hardcodes a color cannot flip, which
   is why tokenization was the prerequisite for this phase.
   Tier colors are LAW and are re-tuned only for contrast on
   a light ground, never re-hued.
   ------------------------------------------------------- */
:root[data-theme="light"] {
  /* ground: paper, not white — pure white glares under the
     same astigmatism the dark mode was tuned for */
  --pocg-bg:              #F2F0E9;
  --pocg-surface:         #FBFAF6;
  --pocg-surface-alt:     #E9ECE6;
  --pocg-surface-mid:     #E1E6DF;
  --pocg-surface-raised:  #FFFFFF;
  --pocg-header-bg:       #F2F0E9;
  --pocg-divider:         #D2D6D0;
  --pocg-border-subtle:   #DADDD7;
  --pocg-line:            #C9CEC8;
  --pocg-line-strong:     #95A49E;
  --pocg-focus:           #704F00;
  --pocg-shadow:          rgba(24, 34, 31, 0.16);
  --pocg-orange-wash:     rgba(180, 94, 7, 0.08);

  /* text: near-black with a green cast, mirroring the dark
     mode's green-shifted whites */
  --pocg-text:            #16211F;
  --pocg-text-heading:    #0B1413;
  --pocg-text-soft:       #455854;   /* 7.4:1 on bg */
  --pocg-text-muted:      #556864;

  /* accents: darkened so they pass AA as text on paper */
  --pocg-teal:            #006E5E;
  --pocg-teal-hi:         #006558;
  --pocg-teal-dark:       #00A38D;
  --pocg-teal-dim:        #CDEDE7;
  --pocg-teal-border:     rgba(0, 128, 111, 0.30);
  --pocg-teal-glow:       rgba(0, 128, 111, 0.07);
  --pocg-blue:            #1A5FAD;
  --pocg-blue-text:       #17518F;
  --pocg-blue-dark:       #2C7BD1;
  --pocg-blue-dim:        #DCEAF9;
  --pocg-blue-border:     rgba(26, 95, 173, 0.30);
  --pocg-orange:          #A84C00;
  --pocg-orange-dark:     #D4820F;
  --pocg-orange-dim:      #FBEAD5;
  --pocg-orange-border:   rgba(180, 94, 7, 0.30);
  --pocg-gold:            #8A6F1F;
  --pocg-gold-dim:        #F5EBCD;
  --pocg-gold-border:     rgba(138, 111, 31, 0.30);
  --pocg-purple:          #7A3E96;
  --pocg-purple-text:     #6C3585;
  --pocg-purple-dim:      #F0E2F7;
  --pocg-purple-border:   rgba(122, 62, 150, 0.30);
  --pocg-green:           #1B8A4B;
  --pocg-green-dim:       #D8F2E3;
  --pocg-green-border:    rgba(27, 138, 75, 0.30);
  --pocg-silver:          #5E646C;
  --pocg-silver-dark:     #7C838C;
  --pocg-silver-border:   rgba(94, 100, 108, 0.30);
  --pocg-pink:            #B92C63;
  --pocg-pink-dim:        #FBE0EA;
  --pocg-pink-border:     rgba(185, 44, 99, 0.30);

  /* semantic surfaces + inks: the whole point of the
     tokenization passes — these are what would otherwise
     stay dark on a light page */
  --pocg-media-bg:        #1B1F1E;   /* letterbox stays dark: video is video */
  --pocg-art-bg:          #E4EAE8;
  --pocg-hero-tint:       #E8F2F0;
  --pocg-scrim-start:     rgba(255, 255, 255, 0.80);
  --pocg-scrim-end:       rgba(255, 255, 255, 0.92);
  --pocg-white:           #FFFFFF;
  --pocg-ink-dark:        #0B1413;
  --pocg-ink-on-teal:     #FFFFFF;
  --pocg-text-on-teal:    #06302A;
  --pocg-hero-image-ink:  #FFFFFF;
  --pocg-hero-image-soft: #DFF0ED;
  --pocg-hero-image-muted:#AABDB9;
  --pocg-text-on-orange:  #3A1E00;
  --pocg-text-on-blue:    #08223D;
  --pocg-ink-teal:        #04443B;
  --pocg-ink-blue:        #123B66;
  --pocg-ink-blue-soft:   #0F2F52;
  --pocg-ink-purple-soft: #4A2159;
  --pocg-ink-gold-soft:   #4A3A0C;
  --pocg-ink-gold:        #4A3A0C;
  --pocg-ink-gold-dim:    #55450F;
  --pocg-ink-orange:      #4A2600;
  --pocg-ink-orange-chip: #4A2600;
  --pocg-ink-orange-soft: #5A3208;
  --pocg-ink-purple:      #45215B;
  --pocg-ink-blue-dim:    #16406E;
  --pocg-ink-green:       #0C4A29;
  --pocg-ink-pink:        #5E1234;
  --pocg-ink-silver:      #33383E;
  --pocg-ink-neutral:     #3A3A3A;
  --pocg-red-text:        #B3241F;
  --pocg-tier-poor-text:  #A82520;
  --pocg-tier-poor-bg:    #F7DAD8;
  --pocg-tier-poor-ink:   #5E100D;
  --pocg-tier-broken-text:#8E1C18;
  --pocg-tier-broken-bg:  #F3C9C6;
  --pocg-surface-deep:    #FFFFFF;
  --pocg-surface-tint:    #EDF1F0;
  --pocg-ground-1:        #EFF3F2;
  --pocg-ground-2:        #EDF1F0;
  --pocg-ground-3:        #EAEFED;
  --pocg-ground-4:        #E7ECEB;
  --pocg-ground-5:        #E4EAE8;
  --pocg-ground-6:        #DDE4E2;
  --pocg-ground-teal:     #E3F3F0;
  --pocg-ground-teal-deep:#D7EDE8;
  --pocg-ground-teal-deep2:#D7EDE9;
  --pocg-ground-teal-deep3:#D9EEEA;
  --pocg-ground-green:    #DAF1E4;
  --pocg-ground-green-deep:#E2F4E9;
  --pocg-ground-slate:    #E6ECEC;
  --pocg-ground-blue:     #E2EDF8;
  --pocg-ground-orange:   #FBEEDC;
  --pocg-ground-orange-deep:#FBE8D2;
  --pocg-ground-gold:     #F7EFD8;
}

/* The logo is a currentColor SVG, so it retints with the token. */
:root[data-theme="light"] .pocg-hdr-logo .pocg-logo-svg { color: var(--pocg-teal); }

/* Let form controls and scrollbars follow the mode. */
:root[data-theme="light"] { color-scheme: light; }
:root:not([data-theme="light"]) { color-scheme: dark; }