/* Silver Sun Republic — shared shell: tokens, nav, footer, motion base.
   Loaded FIRST on every page; page styles may extend but never redefine the shell.
   The side switcher (unlit / light / dark) tints AMBIENCE ONLY — the aura variable
   and the starfield. Panels, text, gold identity stay fixed on every side. */
:root{
  --bg:#070a0f; --panel:#0d1219; --panel2:#121924; --line:#1b2430;
  --ink:#e8edf5; --dim:#93a1b5; --faint:#5f6d80;
  --gold:#c9a227; --green:#4fb477; --blue:#6ea8d8; --red:#e2705e;
  --display:"Chakra Petch",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --aura:transparent;            /* unlit */
  --star-hue:52;                 /* starfield tint, degrees */
}
:root{ --aura2:transparent; --grade:transparent; }
:root[data-side="light"]{ --aura:rgba(96,164,224,.40); --aura2:rgba(64,120,200,.25);
  --grade:rgba(58,96,168,.38); --star-hue:210; }
:root[data-side="dark"]{  --aura:rgba(224,84,64,.38);  --aura2:rgba(180,40,40,.25);
  --grade:rgba(150,28,20,.42); --star-hue:6; }

html{color-scheme:dark}
body{background:var(--bg)}
/* the side's presence on every page: one quiet glow bleeding from the top edge */
body::before{content:"";position:fixed;inset:0 0 auto 0;height:42vh;pointer-events:none;
  z-index:0;background:radial-gradient(60% 100% at 50% 0%,var(--aura),transparent 70%);
  transition:background .6s}

/* ---------------- nav ---------------- */
.ssr-nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:26px;
  padding:14px 30px;border-bottom:1px solid var(--line);
  background:rgba(7,10,15,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ssr-nav .brand{font:700 15px/1 var(--display);letter-spacing:.26em;color:var(--ink);
  text-decoration:none}
.ssr-nav .brand:hover{color:var(--gold)}
.ssr-nav .links{display:flex;gap:4px;font-size:13.5px}
.ssr-nav .links a{position:relative;color:var(--dim);text-decoration:none;
  padding:8px 11px;transition:color .15s}
.ssr-nav .links a::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;
  height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.ssr-nav .links a:hover{color:var(--ink)}
.ssr-nav .links a:hover::after,.ssr-nav .links a.here::after{transform:scaleX(1)}
.ssr-nav .links a.here{color:var(--gold)}
.ssr-nav .right{margin-left:auto;display:flex;align-items:center;gap:14px}
.ssr-nav .live{display:flex;align-items:center;gap:8px;font:12px/1 var(--mono);
  color:var(--dim);white-space:nowrap}
.ssr-nav .pip{width:7px;height:7px;border-radius:50%;background:#3d4857;flex:none}
.ssr-nav .live.up .pip{background:var(--green);box-shadow:0 0 9px var(--green);
  animation:ssrPulse 2.4s ease-in-out infinite}
@keyframes ssrPulse{0%,100%{box-shadow:0 0 5px var(--green)}50%{box-shadow:0 0 12px var(--green)}}
.ssr-nav select{background:var(--panel);border:1px solid var(--line);color:var(--ink);
  font:12px var(--mono);padding:6px 8px;cursor:pointer}
.ssr-side{display:flex;gap:7px;align-items:center}
.ssr-side button{width:16px;height:16px;border-radius:50%;cursor:pointer;padding:0;
  border:1px solid var(--line);background:transparent;transition:box-shadow .2s,border-color .2s}
.ssr-side button.unlit{border-color:#4a5568}
.ssr-side button.light{border-color:#3d6a94}
.ssr-side button.dark{border-color:#94493d}
.ssr-side button.on.unlit{background:var(--gold);border-color:var(--gold);box-shadow:0 0 10px rgba(201,162,39,.7)}
.ssr-side button.on.light{background:var(--blue);border-color:var(--blue);box-shadow:0 0 10px rgba(110,168,216,.8)}
.ssr-side button.on.dark{background:var(--red);border-color:var(--red);box-shadow:0 0 10px rgba(226,112,94,.8)}
.ssr-side button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ssr-burger{display:none;background:none;border:1px solid var(--line);color:var(--ink);
  font:16px/1 var(--mono);padding:6px 10px;cursor:pointer}
@media (max-width:900px){
  .ssr-nav{gap:14px;padding:12px 18px;flex-wrap:wrap}
  .ssr-nav .links{display:none;width:100%;order:9;flex-direction:column;gap:0;
    border-top:1px solid var(--line);margin-top:10px;padding-top:6px}
  .ssr-nav .links.open{display:flex}
  .ssr-nav .links a{padding:10px 4px}
  .ssr-burger{display:block}
  .ssr-nav .live span.lbl{display:none}
}

/* ---------------- footer ---------------- */
.ssr-footer{position:relative;z-index:1;border-top:1px solid var(--line);margin-top:80px;
  padding:30px;display:flex;flex-wrap:wrap;gap:12px 30px;align-items:baseline;
  font:12.5px/1.7 var(--body);color:var(--faint)}
.ssr-footer .f-brand{font:700 13px var(--display);letter-spacing:.22em;color:var(--dim)}
.ssr-footer a{color:var(--faint);text-decoration:none}
.ssr-footer a:hover{color:var(--gold)}
.ssr-footer .legal{flex-basis:100%;max-width:72ch}

/* ---------------- motion base ---------------- */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
@view-transition{navigation:auto}