/*
 * site-chrome.css · SITE-CHROME BRIDGE for render_navigation(), render_footer(), the shared TPIUpgradeModal and the
 * Prompt Keeper widget on the two tool pages.                                          (docs/09-VISUAL-SPEC.md §2, §3.6)
 *
 * PART 1 is layered (@layer base): the index1.css palette the nav/footer read (tool pages do not load index1.css).
 * PART 2 is UNLAYERED, and it is the only unlayered CSS the tools ship. Reason: the foreign widgets' own CSS is
 * unlayered (nav-shared.css, the nav's inline <style>, upgrade_modal.php's <style>, promptkeeper/widget.css), and an
 * unlayered rule beats every @layer rule whatever its specificity, so a layered override never applies (the WA
 * release-60 lesson). Every Part-2 selector is scoped to a FOREIGN root (lint rule `bridge`):
 *   body.pg-body .pk-root · #tpiUpgradeModal · .pg-sitenav · .pg-sitefoot
 * No raw colours (tokens only), no !important.
 */
@layer base {
  :root {
    --primary-color: var(--site-primary); --secondary-color: var(--site-secondary); --primary-color-dark: var(--site-primary-dark);
    --bg-primary: var(--site-bg); --bg-secondary: var(--site-bg-2);
    --surface-glass: var(--site-glass); --surface-glass-hover: var(--site-glass-hover);
    --glass-background: var(--site-glass); --glass-background-hover: var(--site-glass-hover);
    --text-color: var(--site-text); --text-primary: var(--site-text); --text-secondary: var(--site-text-2); --text-headings: var(--site-text-head);
    --border-glass: var(--site-glass-border); --border-glass-hover: var(--site-glass-border-hover);
    --dropdown-bg: var(--site-bg); --card-bg: var(--site-card);
    --transition-speed: 0.3s; --transition-ease: cubic-bezier(0.4, 0, 0.2, 1); --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem;
  }
}

/* ---------------------------------------------------------------- PART 2 (unlayered, foreign roots only) */

/* Site nav + footer: always the site's dark plane, in both themes (the site has no light chrome). */
.pg-sitenav, .pg-sitefoot { background: var(--site-bg); color: var(--site-text); font-family: var(--font-ui); }
:where(.pg-sitenav, .pg-sitefoot) a { color: inherit; text-decoration: none; }   /* 0,0,1: the site's own link colours (.nav-upgrade amber) still win */
.pg-sitenav .button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem 1.2rem; border: none; border-radius: var(--radius-md); cursor: pointer; font: 500 0.95rem/1.2 var(--font-ui); text-align: center; }
.pg-sitenav .button-primary { background: linear-gradient(135deg, var(--site-primary), var(--site-secondary)); color: var(--site-text); border: 1px solid transparent; }
.pg-sitenav .button-outline { background: transparent; border: 1px solid var(--site-glass-border); color: var(--site-text); }
.pg-sitenav .profile-menu { background-color: var(--site-profile); }
.pg-sitenav :where(a, button, [tabindex]):focus-visible, .pg-sitefoot :where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--site-focus); outline-offset: 2px; }
/* the banner clips its own link's focus ring (overflow:hidden): draw it inside (WA a11y 43 m11) */
.pg-sitenav .banner-container a:focus-visible { outline: 2px solid var(--site-white); outline-offset: -3px; }

/* Prompt Keeper (footer widget). KEPT on these pages (06 §9), but moved INTO the z-scale: below every modal
   (--z-keeper 900 < the upgrade modal's 1000000), so it can never sit on the modal CTA. Position unchanged. */
body.pg-body .pk-root { z-index: var(--z-keeper); }
/* The Keeper launcher never sits on a focusable element, site chrome included, at any scroll position (coordinator r3,
   MJ-2): CLOSED, it sits IN THE PAGE FLOW after the footer at every width, right-aligned on the site's plane; OPEN, the
   chat panel floats exactly as on every other page. A floating launcher over a full-width page always covers
   something at some scroll (round 2 left the footer's Cookie Preferences 100% under it at 1280×720). */
body.pg-body .pk-root .pk-launcher:focus-visible { outline: 2px solid var(--site-focus); outline-offset: 3px; }   /* the widget ships no focus ring; it is in the Tab order on these pages */
body.pg-body .pk-root:not(.pk-is-open) { position: relative; right: auto; bottom: auto; display: flex; justify-content: flex-end; padding: var(--s-3) var(--s-6) var(--s-6); background: var(--site-bg); }



/* The shared upgrade modal inside the tool: font, CTA box, the two greys that were < 4.5:1, 44px close/secondary
   targets, a visible focus ring, and reflow at small heights (same fixes the deployed WA ships, release 60). The card
   follows prefers-color-scheme itself, so each grey has a light-card and a dark-card token. */
#tpiUpgradeModal, #tpiUpgradeModal button { font-family: var(--font-ui); }
#tpiUpgradeModal .tpi-btn-primary { box-sizing: border-box; max-width: 100%; white-space: normal; }
#tpiUpgradeModal .tpi-resets-note, #tpiUpgradeModal .tpi-plan-price small { color: var(--tpi-muted-on-light); }
#tpiUpgradeModal .tpi-btn-secondary { color: var(--tpi-muted-2-on-light); min-height: 44px; }
#tpiUpgradeModal .tpi-modal-close { color: var(--tpi-muted-on-light); min-width: 44px; min-height: 44px; }
#tpiUpgradeModal :focus-visible { outline: 2px solid var(--tpi-focus); outline-offset: 2px; }
#tpiUpgradeModal .tpi-free-ribbon { background: linear-gradient(135deg, var(--tpi-ribbon-1), var(--tpi-ribbon-2) 45%, var(--tpi-ribbon-3)); }
#tpiUpgradeModal .tpi-free-ribbon .tpi-free-code { background: var(--tpi-ribbon-code-bg); }
#tpiUpgradeModal.tpi-modal-overlay { overflow: hidden; }
#tpiUpgradeModal .tpi-modal-card { max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; }
@media (prefers-color-scheme: dark) {
  #tpiUpgradeModal .tpi-plan-name, #tpiUpgradeModal .tpi-benefits li i { color: var(--tpi-plan-on-dark); }
  #tpiUpgradeModal :focus-visible { outline-color: var(--tpi-plan-on-dark); }   /* #5B3DF5 was 2.68:1 on the dark card (focus walk, round 2) */
  #tpiUpgradeModal .tpi-resets-note, #tpiUpgradeModal .tpi-plan-price small { color: var(--tpi-muted-on-dark); }
  #tpiUpgradeModal .tpi-btn-secondary, #tpiUpgradeModal .tpi-modal-close { color: var(--tpi-muted-2-on-dark); }
}