/* ── Themes ───────────────────────────────────────────────
   Dark is the page as designed and needs nothing here. The other two only
   move tokens where they can; the few rules below them are the places a
   colour was written for a black ground and has to be said again.

   html[data-theme] is set before first paint by a script in <head>, and
   the scene repaints its own ground to match (THEME_LOOKS in index.html).
   Keep each theme's --bg in step with its bg there. */

/* ── Classic: the lab ────────────────────────────────────────
   Graphite and machined metal, the way a precision instrument is finished.
   Nothing glows that would not glow on the bench: green is kept to status
   LEDs the size of the ones on the mark. The richness is in restraint:
   thin type, hairlines, a faint measuring grid, registration marks on the
   plates, and controls in brushed metal rather than colour. */
html[data-theme="classic"]{
  --bg:#1b1e1f;
  --bg-rgb:27,30,31;
  --panel-rgb:34,37,39;
  --autofill:#25292a;
  --fg:#eef0ee;
  --muted:#b9beba;
  --muted-dim:#9da3a0;
  --faint:#8a908d;
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.28);
  --field:rgba(0,0,0,.26);
  --solid-bg:#e4e7e4;
  --solid-bg-hover:#ffffff;
  --solid-fg:#131516;
  --h1-grad:linear-gradient(176deg,#ffffff 0%,#d9dcda 40%,#868c89 100%);
  --r:6px;
  --r-lg:10px;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
/* One accent for both worlds, and a quiet one: the LED green, greyed. */
html[data-theme="classic"] body,
html[data-theme="classic"] body[data-device="jini"]{
  --steel:#a9d9b4;
  --led:#42e05a;
  --led-glow:rgba(66,224,90,.5);
}

/* The bench: light from above, edges falling away, and a measuring grid
   so faint it is felt more than seen. Over the scene, under the page. */
html[data-theme="classic"] body::after{
  content:"";
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(90% 60% at 50% -6%,rgba(255,255,255,.10),transparent 64%),
    radial-gradient(130% 115% at 50% 42%,transparent 54%,rgba(0,0,0,.52) 100%),
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px) 50% 0/96px 96px,
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px) 50% 0/96px 96px;
}
@media (max-width:820px){
  html[data-theme="classic"] body::after{background-size:auto,auto,64px 64px,64px 64px}
}
html[data-theme="classic"] .grain{opacity:.06}
html[data-theme="classic"] .nav::before{
  background:linear-gradient(to bottom,rgba(20,22,23,.94) 0%,rgba(20,22,23,.8) 48%,transparent 100%);
}

/* Type stays thin. Metal on the name, a greyed green on the turned phrase. */
html[data-theme="classic"] h1{font-weight:200;filter:drop-shadow(0 12px 30px rgba(0,0,0,.5))}
html[data-theme="classic"] h2 b{background:linear-gradient(100deg,var(--steel),#e9ece9 70%);-webkit-background-clip:text;background-clip:text}

/* Instrument labels: small, monospaced, each with a status LED. */
html[data-theme="classic"] .eyebrow,
html[data-theme="classic"] .rail button,
html[data-theme="classic"] .moment figcaption,
html[data-theme="classic"] footer nav h4,
html[data-theme="classic"] .foot-base,
html[data-theme="classic"] .note,
html[data-theme="classic"] .hub-core small{font-family:var(--mono);letter-spacing:.18em}
html[data-theme="classic"] .eyebrow{color:var(--muted-dim)}
html[data-theme="classic"] .eyebrow::before{
  opacity:1;width:5px;height:5px;border-radius:50%;
  background:var(--led);box-shadow:0 0 8px 1px var(--led-glow);
}
html[data-theme="classic"] .moment figcaption{color:var(--muted-dim)}

/* Controls: squared, hairlined, and metal where the page asks for a hand. */
html[data-theme="classic"] .pill,
html[data-theme="classic"] .planet-go,
html[data-theme="classic"] .tag-go,
html[data-theme="classic"] .social,
html[data-theme="classic"] .field,
html[data-theme="classic"] .go,
html[data-theme="classic"] .icon,
html[data-theme="classic"] .everyday li,
html[data-theme="classic"] .theme-pick,
html[data-theme="classic"] .theme-pick button{border-radius:var(--r)}
html[data-theme="classic"] .pill:not(.solid),
html[data-theme="classic"] .icon,
html[data-theme="classic"] .social,
html[data-theme="classic"] .field,
html[data-theme="classic"] .everyday li{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
html[data-theme="classic"] .pill.solid,
html[data-theme="classic"] .planet-go,
html[data-theme="classic"] .tag-go,
html[data-theme="classic"] .go{
  background:linear-gradient(180deg,#fbfcfb 0%,#d5d9d6 52%,#b4b9b6 100%);
  color:var(--solid-fg);border-color:transparent;
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.22),0 10px 24px -12px rgba(0,0,0,.8);
}
html[data-theme="classic"] .pill.solid:hover,
html[data-theme="classic"] .planet:hover .planet-go,
html[data-theme="classic"] .planet:focus-visible .planet-go,
html[data-theme="classic"] .go:hover{background:linear-gradient(180deg,#ffffff,#e3e6e4)}
html[data-theme="classic"] .theme-pick button[aria-pressed="true"]{background:var(--solid-bg);color:var(--solid-fg)}

/* Plates: graphite, a lit top edge, and registration marks in two corners
   like the ones on a drawing sheet. */
html[data-theme="classic"] .moment,
html[data-theme="classic"] .tile,
html[data-theme="classic"] .sdk,
html[data-theme="classic"] .tag{
  border-radius:var(--r-lg);
  border-color:rgba(255,255,255,.09);
  background:
    linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)) 9px 9px/9px 1px no-repeat,
    linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)) 9px 9px/1px 9px no-repeat,
    linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)) calc(100% - 9px) calc(100% - 9px)/9px 1px no-repeat,
    linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)) calc(100% - 9px) calc(100% - 9px)/1px 9px no-repeat,
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.012) 40%,rgba(0,0,0,.14)),
    rgba(var(--panel-rgb),.92);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 24px 44px -26px rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
html[data-theme="classic"] .tile{border-radius:var(--r)}
html[data-theme="classic"] .tag-shot{border-radius:4px}
html[data-theme="classic"] .buy-shot{border-radius:var(--r-lg);border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 30px 60px -30px rgba(0,0,0,.95)}
html[data-theme="classic"] .feature{border-top-color:rgba(255,255,255,.22)}
html[data-theme="classic"] .feature svg{stroke:#dfe3e0}
html[data-theme="classic"] .hub-core{
  background:radial-gradient(circle at 40% 28%,#7f8583,#3d4242 48%,#1a1c1d 100%);
  border-color:rgba(255,255,255,.26);
  box-shadow:0 0 0 6px rgba(255,255,255,.03),0 0 50px -14px var(--led-glow),inset 0 2px 3px rgba(255,255,255,.22),inset 0 -10px 20px rgba(0,0,0,.55);
}

/* ── Light ───────────────────────────────────────────────── */
html[data-theme="light"]{
  --bg:#eef0f2;
  --bg-rgb:238,240,242;
  --ink-rgb:10,14,20;
  --panel-rgb:255,255,255;
  --autofill:#ffffff;
  --fg:#0c0f13;
  --muted:#444b55;
  --muted-dim:#565d67;
  --faint:#646b75;
  --line:rgba(var(--ink-rgb),.16);
  --line-strong:rgba(var(--ink-rgb),.38);
  --field:rgba(var(--ink-rgb),.04);
  --danger:#c0392b;
  --solid-bg:#0c0f13;
  --solid-bg-hover:#252a31;
  --solid-fg:#f4f6f8;
  --h1-grad:linear-gradient(176deg,#0c0f13 0%,#2a3038 46%,#5a626d 100%);
}
html[data-theme="light"] body{--steel:#2d5fd0;--led:#1f9d3a;--led-glow:rgba(31,157,58,.4)}
html[data-theme="light"] body[data-device="jini"]{--steel:#177a45;--led:#1f9d3a;--led-glow:rgba(31,157,58,.4)}

/* Written as white-on-black in the page; said again as ink-on-paper. */
html[data-theme="light"] .label span{color:var(--fg)}
html[data-theme="light"] .label i{box-shadow:none}
html[data-theme="light"] .pill.solid,
html[data-theme="light"] .pill.solid:hover{color:var(--solid-fg)}
html[data-theme="light"] .pill.solid{background:var(--solid-bg)}
html[data-theme="light"] .pill.solid:hover{background:var(--solid-bg-hover)}
html[data-theme="light"] .go{background:var(--solid-bg);color:var(--solid-fg)}
html[data-theme="light"] .go .spinner{border-color:rgba(255,255,255,.3);border-top-color:#fff}
html[data-theme="light"] .done{color:var(--fg)}
html[data-theme="light"] .film-controls .pill[aria-pressed="true"]{color:var(--fg);border-color:var(--steel)}
html[data-theme="light"] #transform-status{color:var(--muted)}
html[data-theme="light"] .grain{opacity:.05}

/* Focus and selection follow the accent in every theme but dark, where
   the page already sets them per world. */
html[data-theme="classic"] :focus-visible,
html[data-theme="light"] :focus-visible,
html[data-theme="classic"] body[data-device] :focus-visible,
html[data-theme="light"] body[data-device] :focus-visible{outline-color:var(--steel)}
html[data-theme="classic"] ::selection,
html[data-theme="classic"] body[data-device] ::selection{background:rgba(169,217,180,.3)}
html[data-theme="light"] ::selection,
html[data-theme="light"] body[data-device] ::selection{background:rgba(45,95,208,.22)}

/* ── The switch ──────────────────────────────────────────── */
.theme-btn{padding:0;font:inherit;cursor:pointer}
.theme-btn:hover{color:var(--fg)}
/* The gate hides the header's other controls; this one stays. */
body.is-gate .nav-end .theme-btn{opacity:1;pointer-events:auto}
.theme-pick{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px}
.theme-pick button{
  min-height:30px;padding:0 13px;border:0;border-radius:999px;background:none;
  color:var(--muted-dim);font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;
  transition:color .3s var(--ease),background .3s var(--ease);
}
.theme-pick button:hover{color:var(--fg)}
.theme-pick button[aria-pressed="true"]{background:rgba(var(--ink-rgb),.12);color:var(--fg)}
@media (max-width:820px){
  /* No room beside the world switch and the call; the footer has it. */
  body:not(.is-gate) .nav .theme-btn{display:none}
  .theme-pick{order:-1;width:100%;justify-content:space-between}
  .theme-pick button{flex:1;min-height:44px}
}