/* site/legal.css — shared stylesheet for the standalone legal pages
   (privacy.html / terms.html / security.html). These pages are plain static
   HTML with NO SPA/router dependency, so this is deliberately a small,
   self-contained subset of index.html's <style> block — just the :root
   tokens and rules these three pages actually render — NOT the whole
   index.html stylesheet (which stays untouched).

   Brand SoT: ../../docs/SwitchScan-Brand-Guidelines.md. If a brand token
   changes there, mirror it into index.html, app.html AND this file.
*/

:root {
  --bg:#f5f4f1; --surface:#ffffff;
  --line:#e7e4dd;
  --text:#2b2a27; --text-2:#56544e; --muted:#8a8780;
  --accent:#e08a5a; --accent-press:#853f26;
  --shadow:0 1px 2px rgba(20,18,14,.04), 0 2px 6px rgba(20,18,14,.05);
  /* Added for the test-only notice below — same values as index.html/app.html.
     --cta is the filled-CTA token: white text NEVER sits on --accent
     (brand guidelines section 3, "CTA ramp"). */
  --line-strong:#d9d5cc; --cta:#a34b31;
  /* Added for .legal-status. Same value as index.html/app.html's --accent-soft;
     this stylesheet carries its own token copy because it has no access to
     theirs. Keep the three in step. */
  --accent-soft:#f6ece7;
  --radius-sm:9px; --radius-lg:16px;
  --shadow-lg:0 4px 14px rgba(20,18,14,.08), 0 1px 3px rgba(20,18,14,.06);

  --font-display:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-head:"Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-body:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing:border-box; }

body {
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.55 var(--font-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

h1, h2, h3, h4 { margin:0; font-family:var(--font-head); font-weight:700;
                 letter-spacing:-0.02em; line-height:1.12; }
h1 { font-weight:800; }
a { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid var(--accent-press); outline-offset:2px; border-radius:4px; }

/* ---- Header — an escape hatch back to the main site, not the full app nav ---- */
.legal-topbar { display:flex; align-items:center; padding:16px 26px;
                border-bottom:1px solid var(--line); background:rgba(245,244,241,.82); }
.legal-brand { display:flex; align-items:center; gap:10px; cursor:pointer; }
.legal-brand .mark { width:26px; height:26px; border-radius:8px; flex:none; display:block;
                      box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), var(--shadow); }
.legal-brand .wordmark { font-family:var(--font-display); font-weight:700; font-size:20px;
                          letter-spacing:-0.02em; line-height:1; }
.legal-brand .wordmark .sw { color:var(--accent); }

/* ---- Layout (mirrors index.html's .wrap / .page-head / .legal-body) ---- */
.wrap { max-width:1120px; margin:0 auto; padding:34px 26px 72px; }
@media (max-width:720px){ .wrap { padding:26px 18px 60px; } }

.page-head { margin-bottom:24px; }
.page-head .eyebrow { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body);
                       font-size:12px; text-transform:uppercase; letter-spacing:.1em; font-weight:600;
                       color:var(--text-2); margin-bottom:12px; }
.page-head p { margin:8px 0 0; color:var(--muted); font-size:14.5px; max-width:66ch; }

.legal-body a { color:var(--accent-press); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }

/* ---- Not-released status banner (Dylan, 2026-08-12) --------------------------
   Sits at the TOP of the document on all three legal pages, above the <h1>.
   This is deliberately SEPARATE from, and additional to, the .tnotice modal
   above: that one is dismissible and gone for the rest of the visit, so it
   cannot be the thing that carries "this is not available". This banner never
   goes away and is in the page text, so it is also what a search engine, an AI
   assistant or a printed copy of the page shows.
   ⚠ Its wording is MIRRORED in the three sources under web/docs/research/ and is
   diffed by scripts/gen-legal.py --check — edit the .md and the .html together
   or the check fails. Not --accent as a fill: white/dark text on #e08a5a fails
   contrast (brand guidelines §3), so this is the soft tint + the press ink. */
.legal-status { border:1px solid var(--accent); background:var(--accent-soft);
                border-radius:10px; padding:14px 16px; margin:0 0 22px; max-width:74ch; }
.legal-status b { display:block; font-family:var(--font-head); font-weight:800;
                  font-size:15px; color:var(--accent-press); margin-bottom:4px; }
.legal-status span { display:block; font-size:14px; line-height:1.6; color:var(--text-2); }

/* ---- Footer escape hatch ---- */
.legal-footer { border-top:1px solid var(--line); padding:24px 26px 48px; }
.legal-footer a { color:var(--accent-press); text-decoration:underline; text-underline-offset:2px; }

/* ========================================================================
   TEST-ONLY NOTICE — must be clicked away before the document is readable.
   Mirrors index.html's .tnotice box; the MECHANISM is deliberately different.

   These three pages carry NO JavaScript at all (and no router — there are no
   in-page "#" links to route between), so this is done with a checkbox + the
   sibling combinator rather than a script: nothing to load, nothing for a CSP
   script-src allowlist to cover, and no reason to make the legal pages the
   only static pages on the site that need JS to be readable.

   What that costs, stated plainly, versus index.html's scripted version:
   no Escape-to-dismiss, no focus trap, and no focus restore. The dismiss
   control is therefore FIRST in the body so a keyboard visitor reaches it
   immediately, and role="dialog" carries NO aria-modal — without a trap that
   would be a false claim of modality.

   To remove when the site starts offering services: delete this block, the
   four tokens added to :root for it, and the markup block at the top of
   privacy.html / terms.html / security.html.
======================================================================== */
/* The state lives here. autocomplete="off" in the markup matters: browsers
   restore checkbox state on reload and back/forward, which would otherwise
   let the notice arrive already dismissed. */
.tnotice-flag { position:fixed; top:0; left:0; width:1px; height:1px; opacity:0; margin:0; }
.tnotice-flag:checked ~ .tnotice { display:none; }
.tnotice { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
           padding:24px; }
/* The scrim is a <label>, so clicking away from the box dismisses it too. */
.tnotice-scrim { position:absolute; inset:0; background:rgba(20,18,14,.42); cursor:pointer; }
.tnotice-box { position:relative; background:var(--surface); border:1px solid var(--line-strong);
               border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); max-width:440px; width:100%;
               padding:24px 26px 20px; }
.tnotice-title { font-family:var(--font-head); font-size:16px; font-weight:700; color:var(--text); margin-bottom:8px; }
.tnotice-body { font-size:14px; line-height:1.6; color:var(--text-2); margin:0 0 18px; }
.tnotice-actions { display:flex; justify-content:flex-end; }
.tnotice-btn { display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-body);
               font-size:13.5px; font-weight:600; color:#fff; background:var(--cta);
               border-radius:var(--radius-sm); padding:10px 18px; min-height:44px; cursor:pointer; }
.tnotice-btn:hover { background:var(--accent-press); }
/* The real focusable control is the visually-hidden checkbox, so its focus ring
   has to be drawn on the button it operates. */
.tnotice-flag:focus-visible ~ .tnotice .tnotice-btn { outline:2px solid var(--accent-press); outline-offset:2px; }
/* Scroll lock. Falls back to "the page scrolls behind the scrim" where :has()
   is unsupported — the notice still covers the viewport and still has to be
   clicked away, so nothing about the requirement degrades. */
html:has(.tnotice-flag:not(:checked)) { overflow:hidden; }