/* EmergentRI brand tokens — "gold orb on night" (chosen 2026-10-13).
   One source. Import this before any page CSS. Night-sky world shared with the apps;
   EmergentRI's own accent is warm gold (memory / lamplight), so it reads as the canopy. */
:root{
  /* world — EmergentRI navy (matches the film + the Arena, 2026-10-23) */
  --bg:#081527; --panel:#0f2447; --panel2:#163257; --line:#244063; --line2:#3a5a8f;
  --text:#f4f7ff; --muted:#c3d0e6; --faint:#93a4c4;
  /* form fields — must read as a box even to low-color vision: lighter fill + a border that clears 3:1 */
  --field:#13305a; --fieldline:#4a6ba0; --placeholder:#8396bc;
  /* EmergentRI accent — gold */
  --gold:#f5a623; --gold2:#d4851a; --goldl:#ffd67a; --on-gold:#1a1204;
  --accent:var(--gold); --accent2:var(--gold2);
  /* secondary — electric blue (the reasoning mark) + states */
  --lav:#5a9bff; --lav2:#3f7ae0; --cyan:#7fb4ff;
  --good:#6fd38a; --warn:#ffcf8a; --bad:#ff9aa8;
  /* type */
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  /* the mark */
  --orb:radial-gradient(circle at 38% 32%,#fff7e8,#ffd67a 32%,#f5a623 70%,#7a4a10);
  --orb-glow:0 0 18px rgba(245,166,35,.55);
  --gradient-text:linear-gradient(92deg,var(--gold),var(--goldl));
  --btn-primary:linear-gradient(92deg,var(--gold2),var(--gold));
  --btn-shadow:0 6px 24px rgba(245,166,35,.30);
  /* surfaces that used to be hard-coded night tints */
  --nav-bg:rgba(8,18,36,.72); --pill-bg:rgba(15,36,71,.6); --side-bg:rgba(15,36,71,.5); --overlay:rgba(8,18,36,.8);
  color-scheme:dark;
}
/* Contrast floor (Mark, 2026-10-13 — colorblind-checked): faint ≥ 8:1, muted ≥ 12:1 on bg; every input visibly a box. */
input:not([type=checkbox]):not([type=radio]), textarea, select{background:var(--field);border:1.5px solid var(--fieldline);color:var(--text)}
input::placeholder, textarea::placeholder{color:var(--placeholder);opacity:1}
input:focus, textarea:focus, select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,171,94,.25)}

/* ── LIGHT THEME (Mark 2026-10-14: "we need a theme for the light color version so people like me can read it").
   Same tokens, re-pointed. Warm paper, ink text, gold darkened so links clear 4.5:1; the orb and buttons keep their
   gold (dark text on gold stays readable). Chosen by html[data-theme="light"] (the toggle, remembered per browser),
   or by the system preference when nothing was chosen. */
html[data-theme="light"], html:not([data-theme="dark"]):not([data-theme="night"]).sys-light{
  --bg:#faf7f0; --panel:#ffffff; --panel2:#f1ecdf; --line:#d6cfbc; --line2:#aaa38e;
  --text:#1b1a24; --muted:#3b3950; --faint:#5a5670;
  --field:#ffffff; --fieldline:#8c866f; --placeholder:#7b7790;
  --gold:#8f5a12; --gold2:#6f450c; --goldl:#7d4f0f; --on-gold:#fff7e8;
  --accent:var(--gold); --accent2:var(--gold2);
  --lav:#5a3fd0; --lav2:#4a2fc0; --cyan:#0b6f84;
  --good:#1c7a52; --warn:#7f5200; --bad:#b4233a;
  --orb-glow:0 0 14px rgba(184,112,42,.45);
  --gradient-text:linear-gradient(92deg,#8f5a12,#b8702a);
  --btn-primary:linear-gradient(92deg,#8f5a12,#b8702a);
  --btn-shadow:0 6px 20px rgba(184,112,42,.25);
  --nav-bg:rgba(250,247,240,.82); --pill-bg:rgba(255,255,255,.75); --side-bg:rgba(241,236,223,.6); --overlay:rgba(250,247,240,.9);
  color-scheme:light;
}
html[data-theme="light"] input:focus, html[data-theme="light"] textarea:focus, html[data-theme="light"] select:focus{box-shadow:0 0 0 3px rgba(184,112,42,.22)}
/* the theme toggle (lives in the account chip / nav) */
.theme-toggle{appearance:none;border:1.5px solid var(--line2);background:var(--panel2);color:var(--text);border-radius:999px;width:34px;height:30px;cursor:pointer;font-size:1.05rem;line-height:1;padding:0;vertical-align:middle}
.theme-toggle:hover{border-color:var(--gold);background:var(--panel);color:var(--goldl)}
/* ── UNIFIED NAV — one banner on every page (Mark 2026-10-24: "unify the banner by what they're doing").
   Top-level stays Atelier + Downloads; the rest lives under a hover "Learn" dropdown. Keeps the .navlinks hook
   so theme.js (toggle), deb-float.js (Ask a DEB) and account-chip.js (sign-in/account) still inject. */
.sn-drop{position:relative;display:inline-flex;align-items:center}
.sn-dropbtn{appearance:none;background:none;border:0;color:var(--muted);font:inherit;font-size:.93rem;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:4px}
.sn-drop:hover .sn-dropbtn,.sn-drop:focus-within .sn-dropbtn{color:var(--text)}
.sn-drop::after{content:"";position:absolute;top:100%;left:-10px;right:-10px;height:14px}
.sn-menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(6px);min-width:176px;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:6px;box-shadow:0 20px 54px rgba(0,0,0,.5),0 0 0 1px rgba(124,92,255,.14);opacity:0;visibility:hidden;transition:opacity .14s ease,transform .14s ease;z-index:60}
.sn-drop:hover .sn-menu,.sn-drop:focus-within .sn-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.sn-menu a{display:block;padding:8px 12px;border-radius:9px;color:var(--muted);font-size:.9rem;white-space:nowrap;text-decoration:none}
.sn-menu a:hover{background:var(--panel2);color:var(--text)}
.sn-menu a.cur{color:var(--gold)}
/* the Rabbit Hole doorway — a distinct door to the sister site, set apart from the EmergentRI links (Mark 2026-10-24) */
.sn-door{display:inline-flex;align-items:center;gap:5px;padding:5px 13px;border-radius:999px;border:1px solid var(--line2);background:var(--pill-bg);color:var(--text);font-size:.88rem;font-weight:600;white-space:nowrap;text-decoration:none}
.sn-door:hover{border-color:var(--lav);color:var(--lav);background:rgba(90,155,255,.1)}