/* ────────────────────────────────────────────────────────────────────────────
   page-shell.css
   Shared styles for all FlashChat sub-pages (about, terms, privacy, safety,
   FAQ, content/SEO pages, comparison pages, etc).

   Each page provides its own :root (Editorial dark defaults) and html.light
   (Editorial light) since those are part of the page's design layer. This
   shared file adds:

     1. Neon Arcade / Terminal / Pastel Notebook theme variants — so the
        user's theme picked in the SPA propagates to every sub-page.
     2. Universal :focus-visible baseline — brand-orange ring on keyboard
        focus, consistent across all pages.
     3. Collapsible <details>-based "more links" navigation widget.

   Cascade-safe: html[data-theme="..."] is (0,1,1) which beats :root (0,1,0),
   so theme variants win regardless of which CSS file loads first. The page's
   own :root + html.light still own Editorial; this file owns the rest.
   ──────────────────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════════════
   THEME: Neon Arcade
   ════════════════════════════════════════════════════════════════════════ */
html[data-theme="neon"]{
  --bg:#0A0612;--surface:#14071D;--surface2:#1D0A2A;--border:#2E1248;
  --primary:#00FFE7;--primary-hover:#00D4BF;--primary-soft:#66FFEE;
  --primary-glow:rgba(0,255,231,.22);
  --primary-shadow:rgba(0,255,231,.18);
  --primary-shadow-hi:rgba(0,255,231,.26);
  --primary-fg:#0A0612;
  --text:#F2ECFF;--text-dim:#9787B8;--muted:#3D2860;
  --danger:#FF4D9A;--success:#9DFF58;--warning:#FFD84D;
  --font-display:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
html[data-theme="neon"].light{
  --bg:#F5ECFF;--surface:#FFFFFF;--surface2:#EADEFF;--border:#D4C2F2;
  --text:#14092A;--text-dim:#6B5A8C;--muted:#C5B4E0;
  --primary:#8B2AFF;--primary-hover:#6C1EDB;--primary-soft:#C499FF;
  --primary-glow:rgba(139,42,255,.15);
  --primary-shadow:rgba(139,42,255,.14);
  --primary-shadow-hi:rgba(139,42,255,.22);
  --primary-fg:#FDFAFF;
}
/* CRT scanline overlay — subtle, doesn't interfere with content */
html[data-theme="neon"] body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:repeating-linear-gradient(transparent 0 2px,rgba(0,255,231,.025) 2px 3px);
  mix-blend-mode:screen;
}
html[data-theme="neon"].light body::before{
  background:repeating-linear-gradient(transparent 0 2px,rgba(139,42,255,.02) 2px 3px);
}

/* ════════════════════════════════════════════════════════════════════════
   THEME: Terminal (green-on-black mono)
   ════════════════════════════════════════════════════════════════════════ */
html[data-theme="terminal"]{
  --bg:#050A05;--surface:#0A140A;--surface2:#0E1D0E;--border:#1F3D1F;
  --primary:#4AFF8F;--primary-hover:#2AEE72;--primary-soft:#8BFFB4;
  --primary-glow:rgba(74,255,143,.22);
  --primary-shadow:rgba(74,255,143,.14);
  --primary-shadow-hi:rgba(74,255,143,.22);
  --primary-fg:#050A05;
  --text:#C4F5C4;--text-dim:#5AA05A;--muted:#1F3D1F;
  --danger:#FF5F5F;--success:#4AFF8F;--warning:#F5B800;
  --font-display:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --font-body:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --font-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
html[data-theme="terminal"].light{
  --bg:#F4F1E8;--surface:#FBF8EE;--surface2:#E8E4D3;--border:#8FA08F;
  --text:#0A2C0A;--text-dim:#4A6B4A;--muted:#B0B8A5;
  --primary:#1F8B3A;--primary-hover:#165A26;--primary-soft:#6FB87F;
  --primary-glow:rgba(31,139,58,.12);
  --primary-shadow:rgba(31,139,58,.10);
  --primary-shadow-hi:rgba(31,139,58,.16);
  --primary-fg:#FBF8EE;
}

/* ════════════════════════════════════════════════════════════════════════
   THEME: Pastel Notebook
   ════════════════════════════════════════════════════════════════════════ */
html[data-theme="pastel"]{
  --bg:#1B1628;--surface:#231B32;--surface2:#2D2440;--border:#3D3253;
  --primary:#E8A5A0;--primary-hover:#D48E89;--primary-soft:#F2C4C0;
  --primary-glow:rgba(232,165,160,.18);
  --primary-shadow:rgba(232,165,160,.20);
  --primary-shadow-hi:rgba(232,165,160,.30);
  --primary-fg:#2C1F2A;
  --text:#F2E8DA;--text-dim:#A89CB5;--muted:#4A4063;
  --danger:#E87878;--success:#A4D4A0;--warning:#E8D48A;
  --font-display:"DM Serif Display",ui-serif,Georgia,serif;
  --font-body:"DM Sans",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"DM Mono",ui-monospace,Consolas,monospace;
}
html[data-theme="pastel"].light{
  --bg:#FBF7F0;--surface:#FFFFFF;--surface2:#F4EDE0;--border:#E8DFCF;
  --text:#2C2922;--text-dim:#8C857C;--muted:#D5CDBD;
  --primary:#E8837D;--primary-hover:#D16862;--primary-soft:#F2B0AC;
  --primary-glow:rgba(232,131,125,.14);
  --primary-shadow:rgba(232,131,125,.10);
  --primary-shadow-hi:rgba(232,131,125,.16);
  /* Coral primary is too light for cream foreground (2.55:1 — fails AA Large).
     Use the dark --text for buttons; lands at ~5.6:1 which clears AA Normal. */
  --primary-fg:#2C2922;
  --danger:#D46C6C;--success:#7BAC78;--warning:#D4A56A;
}

/* ════════════════════════════════════════════════════════════════════════
   FOCUS RING: brand-orange keyboard focus indicator
   Mirrors the global rule from index.html so sub-pages match.
   ════════════════════════════════════════════════════════════════════════ */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:1px}

/* ════════════════════════════════════════════════════════════════════════
   INLINE FOOTER DISCLOSURE (<details>-based)
   Replaces the v1/v2 popover, which on tall content sets ran off-screen
   on phones. The new pattern keeps the most-important links inline and
   visible (About · Privacy · Terms) and tucks the rest behind a small "›"
   chevron. When opened, the hidden links flow inline alongside the
   visible ones — no positioning, no overlap, no off-screen risk.

   Usage:
     <a>About</a> · <a>Privacy</a> · <a>Terms</a>
     · <details class="footer-more">
         <summary aria-label="Show more links">›</summary>
         <span class="footer-more-inner">
            · <a>Safety</a> · <a>FAQ</a> · …
         </span>
       </details>
     · <span>© 2026 FlashChat</span>
   ════════════════════════════════════════════════════════════════════════ */
/* Plain-text toggle that matches the other footer links — no pill, no
   border, no rotation animation. CSS supplies the "More ↓" / "Less ↑"
   label via ::before so the markup stays clean.
   Closed: inline-block keeps <details> atomic so the surrounding inline
   content stays on the same line. With plain `display:inline`, browsers
   insert a soft-wrap opportunity around <details> that forces unwanted
   breaks even when the line fits.
   Open: switch to `display:inline` so the inner secondary links flow
   inline with the primary 3 at parent level. */
.footer-more{display:inline-block}
.footer-more[open]{display:inline}
.footer-more > summary{
  display:inline;cursor:pointer;list-style:none;
  color:var(--text-dim);user-select:none;
  transition:color .15s ease;
}
.footer-more > summary::-webkit-details-marker{display:none}
.footer-more > summary::marker{display:none}
.footer-more > summary::before{content:"More \2193"}
.footer-more[open] > summary::before{content:"Less \2191"}
.footer-more > summary:hover{color:var(--primary)}
/* Hidden links flow inline alongside the primary 3 when expanded — no
   block break, no divider, no max-width. Hierarchy comes from a slight
   opacity dim so the eye still settles on About/Privacy/Terms first.
   nowrap on each anchor prevents mid-text breaks like "Random Video /
   Chat" on narrow viewports. */
.footer-more > .footer-more-inner{display:inline;opacity:.6}
.footer-more > .footer-more-inner a{white-space:nowrap}
.footer-more > .footer-more-inner a:hover{opacity:1}