/*
 * Bridge for retained dark-generation pages (v3 and April legacy templates).
 * Their body markup and words stay as they are; their design variables are remapped onto the
 * site tokens so they adopt the new palette, type and header/footer. html:root outranks the
 * pages' own :root blocks regardless of load order. Mapping was chosen from measured usage
 * (for example --gold-dim is a background in 19 of 28 uses).
 */
html:root{
  --bg:var(--site-paper);--bg2:var(--site-soft);--bg3:var(--site-soft);
  --surface:var(--site-white);--surface-light:var(--site-soft);--elevated:var(--site-white);
  --bg-elevated:var(--site-white);--bg-surface:var(--site-white);--bg-card:var(--site-white);--bg-card-hover:var(--site-soft);
  --card:var(--site-white);
  --white:var(--site-ink);--text:var(--site-ink);--text-primary:var(--site-ink);
  --body:var(--site-body);--text-secondary:var(--site-body);
  --muted:var(--site-muted);--dim:var(--site-muted);--text-tertiary:var(--site-muted);--text-quaternary:var(--site-muted);--text-muted:var(--site-muted);
  --gold:var(--site-accent);--gold-dim:var(--site-soft);--gold-faint:var(--site-soft);--gold-subtle:var(--site-soft);--gold-glow:var(--site-soft);
  --gold-muted:var(--site-accent);--gold-outline:var(--site-accent);--border-gold:var(--site-line);--border-gold-hover:var(--site-accent);
  --border:var(--site-line);--border-hover:var(--site-muted);--outline:var(--site-line);
  --green:var(--site-success);--green-bright:var(--site-success);--success:var(--site-success);
  --red:var(--site-danger);--danger:var(--site-danger);--orange:var(--site-warn);--amber:var(--site-warn);
  --blue:var(--site-accent);--blue-glow:var(--site-soft);
  --serif:var(--site-heading);--font-heading:var(--site-heading);--font-serif:var(--site-heading);
  --sans:var(--site-text);--font-body:var(--site-text);--font:var(--site-text);
  --user-bubble:var(--site-soft);--assistant-bubble:var(--site-white);--bot-bubble:var(--site-white);
  --heading-weight:var(--site-heading-weight);--lh-heading:1.16;
  --h1:clamp(38px,4.55vw,64px);--h2:clamp(29px,3.1vw,42px);--h3:26px;--h4:21px;
  --nav-height:0px;
  --as-bg:var(--site-paper);--as-bg-card:var(--site-white);--as-border:var(--site-line);--as-text:var(--site-body);
  --as-text-muted:var(--site-muted);--as-text-dim:var(--site-muted);--as-white:var(--site-ink);--as-accent:var(--site-accent);--as-gold:var(--site-accent);
}
html body{background:var(--site-paper);color:var(--site-body)}
/* Film-grain overlay and scroll-reveal hiding from the dark design are not part of the new system. */
html body::after{display:none!important}
html .gs{opacity:1!important;transform:none!important;animation:none!important}
html ::selection{background:var(--site-soft);color:var(--site-ink)}
/* Buttons that used gold with dark text become accent with light text. */
html .btn--gold,html .btn-gold,html .nav__cta{background:var(--site-accent)!important;color:var(--site-accent-ink)!important;border-color:var(--site-accent)!important}
html .btn--outline,html .btn--gold-outline{color:var(--site-accent)!important;border-color:var(--site-accent)!important;background:transparent!important}
/* Retained body headings adopt the shared heading face. */
html body h1,html body h2,html body h3{font-family:var(--site-heading);letter-spacing:var(--site-heading-track)}
/* Old navigation and footer markup that some legacy bodies still carry. */
html .old-nav,html .old-footer,html body > nav.nav,html body > footer.footer,html .mega-menu,html .reading-progress{display:none!important}

/* Inline style attributes that hard-code the dark palette (measured across all templates:
   #07070B, #0D0D12, #111118, #121219 backgrounds; #F5F2EC, #FAFAFA, #D5D2CC light text;
   #A09E98, #706E68 muted text; #C9A96E gold). Only these exact legacy values are remapped. */
html [style*="background:#07070b" i],html [style*="background: #07070b" i],html [style*="background:#0d0d12" i],html [style*="background: #0d0d12" i],
html [style*="background:#0d0d13" i],html [style*="background:#111118" i],html [style*="background: #111118" i],html [style*="background:#121219" i],
html [style*="background:#0c0c12" i]{background-color:var(--site-soft)!important;border-color:var(--site-line)!important}
html [style*="color:#f5f2ec" i],html [style*="color: #f5f2ec" i],html [style*="color:#fafafa" i],html [style*="color: #fafafa" i],html [style*="color:#e8e6e3" i]{color:var(--site-ink)!important}
html [style*="color:#d5d2cc" i],html [style*="color: #d5d2cc" i]{color:var(--site-body)!important}
html [style*="color:#a09e98" i],html [style*="color:#706e68" i],html [style*="color:#787674" i]{color:var(--site-muted)!important}
html [style*="color:#c9a96e" i],html [style*="color: #c9a96e" i]{color:var(--site-accent)!important}
html [style*="background:#c9a96e" i],html [style*="background: #c9a96e" i]{background-color:var(--site-accent)!important;color:var(--site-accent-ink)!important;border-color:var(--site-accent)!important}
html [style*="font-family:'instrument serif'" i]{font-family:var(--site-heading)!important}
html [style*="font-family:'dm sans'" i]{font-family:var(--site-text)!important}

/* Cookie consent bar (cookie-consent.php): same controls, light treatment. Its pre-checked toggles are a consent decision, not changed here. */
html .cc-banner,html .cc-prefs{background:var(--site-white)!important;border-top:1px solid var(--site-line)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:0 -4px 18px rgba(0,0,0,.06)}
html .cc-text,html .cc-pref-label{color:var(--site-body)!important}
html .cc-prefs h3{color:var(--site-ink)!important}
html .cc-text a{color:var(--site-accent)!important}
html .cc-pref-desc,html .cc-pref-required,html .cc-reject{color:var(--site-muted)!important}
html .cc-accept{background:var(--site-accent)!important;color:var(--site-accent-ink)!important}
html .cc-manage{color:var(--site-accent)!important;border-color:var(--site-accent)!important}
html .cc-toggle .slider{background:var(--site-line)!important}
html .cc-toggle input:checked+.slider{background:var(--site-soft)!important}
html .cc-toggle input:checked+.slider:before{background:var(--site-accent)!important}

/* Support chat widget (support-widget.php) variables. Whether the widget stays public is Anthony's decision. */
html #supportWidget{--sw-bg:var(--site-white);--sw-surface:var(--site-soft);--sw-border:var(--site-line);--sw-text:var(--site-body);--sw-muted:var(--site-muted);--sw-gold:var(--site-accent);--sw-gold-dim:var(--site-accent);--sw-font:var(--site-text)}

/* Wide legacy tables scroll inside their own box on small screens instead of widening the page. */
@media(max-width:600px){html body table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}}
/* Cookie bar on very small screens (the live bar also overflows at 320 px). */
@media(max-width:400px){html .cc-text{min-width:0!important}html .cc-buttons{flex-wrap:wrap;flex-shrink:1}html .cc-banner,html .cc-prefs{padding-left:16px!important;padding-right:16px!important}}
/* Embedded Kit forms in retained bodies (consent decision pending): let the row wrap on small screens. */
html form[action*="kit.com"]{flex-wrap:wrap!important;max-width:100%!important}html form[action*="kit.com"] input{min-width:0!important;flex:1 1 180px!important}

/* Full-screen chat pages (/friday/, /support/). The legacy app filled the screen and locked page scrolling
   (body overflow hidden); the shared header now sits in the page flow above it, so autofocus scrolled the
   header and the first message out of reach. The page scrolls normally again and the chat panel fills the
   screen below the header (99px, 85px at 820px and below), with the footer after it. */
html body:has(> .chat-wrap){overflow:visible!important;height:auto!important}
html body > .chat-wrap{height:calc(100vh - 99px)!important;height:calc(100dvh - 99px)!important;min-height:420px}
@media(max-width:820px){html body > .chat-wrap{height:calc(100vh - 85px)!important;height:calc(100dvh - 85px)!important}}