/* ---------------------------------------------------------------------------
   Shared chrome: design tokens, base elements, nav, buttons and the theme
   switch. Loaded by every page (home + legal) so they cannot drift apart -
   this file previously existed as a copy inside legal.css, which is how the
   legal pages ended up with a square theme switch.
   --------------------------------------------------------------------------- */

:root{
  --ink:#1a2238; --ink-2:#33405e;
  --paper:#ffffff; --paper-2:#ffffff; --card:#ffffff; --card-2:#eef0f7;
  --line:#c1c4d9; --line-strong:#a6abc6;
  --muted:#5c6480; --dim:#838aa1;
  /* brand accent for site chrome. NOTE: inside .appdemo this is re-declared
     back to the app's green - in the product, seal/amber/flag mean
     clear/review/flag, and a navy "clear" badge would lose that meaning. */
  --seal:#0010a1; --seal-soft:#dfe3ff;
  --amber:#a9781f; --amber-soft:#efe3c9;
  --flag:#c1413d; --flag-soft:#f1d6d4;
  --indigo:#5a5fc4;

  /* site-only derivations */
  --logo-fill:#0010a1;
  --nav-bg:rgba(255,255,255,.86);
  --well:#dfe2f0;            /* recessed panels (replay text, event line) */
  --well-ink:#12463b;
  --shadow:0 24px 60px rgba(26,34,56,.13);
  --orb-opacity:.55;
  --btn-seal-ink:#ffffff;
  --knob:#ffffff; --knob-line:#a6abc6;

  --display:'DM Sans','Inter',-apple-system,sans-serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  color-scheme:light;
}
:root[data-theme='dark']{
  --ink:#e7eaf3; --ink-2:#c3c9da;
  --paper:#0c1322; --paper-2:#0a1020; --card:#121b2d; --card-2:#18233a;
  --line:#1f2b44; --line-strong:#2d3c5e;
  --muted:#8b95a6; --dim:#606b7c;
  --seal:#ffca16; --seal-soft:#33280a;
  --amber:#dba04a; --amber-soft:#2f2513;
  --flag:#dd6060; --flag-soft:#331717;
  --indigo:#8a8fdd;

  --logo-fill:#d2d4e5;
  --nav-bg:rgba(12,19,34,.78);
  --well:#060b16;
  --well-ink:#cfe9e2;
  --shadow:0 30px 80px rgba(4,8,18,.6);
  --orb-opacity:.5;
  --btn-seal-ink:#1a1400;
  --knob:#e8e8f2; --knob-line:#c1c3d9;
  color-scheme:dark;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img,svg{max-width:100%;display:block}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}
:focus-visible{outline:2px solid var(--seal);outline-offset:3px;}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;backdrop-filter:blur(14px);background:var(--nav-bg);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;height:64px}
.logo{height:22px;width:auto;fill:var(--logo-fill)}
.nav nav{display:flex;gap:26px;align-items:center;font-size:14px;font-weight:500;color:var(--muted);margin-left:auto}
.nav nav a:hover{color:var(--ink)}
.navright{display:flex;align-items:center;gap:14px}
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;font-weight:600;font-size:14.5px;transition:transform .1s,box-shadow .2s,border-color .2s,color .2s}
.btn:active{transform:translateY(1px)}
.btn.seal{background:var(--seal);color:var(--btn-seal-ink)}
.btn.seal:hover{box-shadow:0 6px 24px rgba(23,138,114,.30)}
.btn.ghost{border:1px solid var(--line-strong);color:var(--ink)}
.btn.ghost:hover{border-color:var(--seal);color:var(--seal)}
.nav .btn{padding:9px 16px;font-size:13.5px}

/* sun | moon switch - the knob sits over the ACTIVE mode's icon (as in the app) */
.themeswitch{position:relative;display:flex;align-items:center;justify-content:space-between;
  width:72px;height:32px;padding:0 8px;background:var(--card);border:1px solid var(--line);
  cursor:pointer;transition:border-color .12s;flex-shrink:0}
.themeswitch:hover{border-color:var(--line-strong)}
.tsicon{display:inline-flex;color:var(--muted);z-index:0}
.knob{position:absolute;top:3px;left:42px;width:24px;height:24px;
  background:var(--knob);border:1px solid var(--knob-line);
  transition:left .5s cubic-bezier(.39,.575,.565,1);z-index:1}
:root[data-theme='dark'] .knob{left:3px}
@media(max-width:900px){.nav nav a{display:none}}
@media(max-width:520px){.nav .btn.seal{display:none}}

/* Square corners are the house style; these are round because they are pills
   and knobs rather than containers. */
.themeswitch{border-radius:999px}
.knob{border-radius:50%}