/* edison.css — the Open Line skin: Pearl Street, 1882 × Tokyo, 2082.
   Walnut-black ground, amber filament light, brass, thin gold circuit lines, film grain.
   Shared by the switchboard, the front page and the owner's console. Presentation only:
   it never touches the channel, the wallet or a charge. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700;9..144,900&family=IBM+Plex+Mono:wght@400;600&family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@300;500&display=swap');

:root {
  --e-night: #07050A;      /* page ground */
  --e-walnut: #12100E;     /* panels */
  --e-walnut-2: #1A1612;   /* raised panels */
  --e-brass: #B8914E;      /* rules, frames */
  --e-brass-dim: rgba(184,145,78,.32);
  --e-amber: #E8A845;      /* the light */
  --e-amber-hot: #FFD08A;  /* filament */
  --e-glow: rgba(232,168,69,.55);
  --e-ink: #F1E6D2;        /* paper-white text */
  --e-ink-2: #B9AA92;
  --e-ink-3: #7A6F5E;
  --e-dead: #3A332B;       /* an unlit filament */
  --e-go: #E8A845;
  --e-stop: #C9553D;
  --e-warn: #D9A441;
  --e-serif: Fraunces, "Iowan Old Style", Georgia, serif;
  --e-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --e-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --e-jp: "Noto Sans JP", sans-serif;
  color-scheme: dark;

  /* the pages' own tokens, so their existing rules pick up the skin */
  --bg: var(--e-night); --card: var(--e-walnut); --ink: var(--e-ink); --mute: var(--e-ink-2); --line: var(--e-brass-dim);
  --brand: var(--e-amber); --go: var(--e-go); --stop: var(--e-stop); --warn: var(--e-warn); --glow: rgba(232,168,69,.10);
}

/* the renders, per mode */
:root { --e-backdrop: url('/img/backdrop.webp'); --e-band-exchange: url('/img/exchange.webp'); --e-band-street: url('/img/street.webp'); }
@media (max-width: 720px) { :root { --e-backdrop: url('/img/backdrop-m.webp'); } }

/* NEON: PaiyBit blue, 2082. html.neon (mode.js) */
html.neon {
  --e-night: #05070F; --e-walnut: #0B1220; --e-walnut-2: #101A2C;
  --e-brass: #29A8E0; --e-brass-dim: rgba(41,168,224,.30);
  --e-amber: #29A8E0; --e-amber-hot: #7DD8F8; --e-glow: rgba(41,168,224,.60);
  --e-ink: #E9EEF6; --e-ink-2: #93AEC4; --e-ink-3: #5E7996; --e-dead: #1E2A3D;
  --e-go: #29A8E0; --e-stop: #E0705A; --e-warn: #7DD8F8;
  --e-backdrop: url('/img/neon/backdrop.webp'); --e-band-exchange: url('/img/neon/exchange.webp'); --e-band-street: url('/img/neon/street.webp');
}
@media (max-width: 720px) { html.neon { --e-backdrop: url('/img/neon/backdrop-m.webp'); } }
html.neon body.edison::after {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(41,168,224,.12), transparent 55%),
    radial-gradient(140% 120% at 50% 100%, rgba(0,0,0,.85), rgba(0,0,0,.35) 60%, transparent),
    linear-gradient(rgba(5,7,15,.35), rgba(5,7,15,.35)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .6 0 0 0 0 .85 0 0 0 0 1 0 0 0 .07 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
html.neon .edison button, html.neon .edison a.cta, html.neon .edison button.go { color: #04121F; }
/* outlined buttons keep light text in both modes */
.edison a.cta.ghost, .edison button.ghost, html.neon .edison a.cta.ghost, html.neon .edison button.ghost { color: var(--e-amber-hot); }
html.neon .edison button.chip { color: var(--e-ink); } html.neon .edison button.chip.on { color: var(--e-amber); }
html.neon .edison .kicker .jp { color: var(--e-amber-hot); }

html { background: var(--e-night); }
.edison [hidden] { display: none !important; }
body.edison {
  margin: 0; color: var(--e-ink); font: 15px/1.55 var(--e-sans);
  background: var(--e-night);
  min-height: 100vh; position: relative; isolation: isolate;
}
/* the backdrop: a Grok render of the station, darkened, with a vignette and film grain over it */
body.edison::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: var(--e-backdrop, none) center 20% / cover no-repeat, var(--e-night);
  opacity: .9;
}
body.edison::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(232,168,69,.10), transparent 55%),
    radial-gradient(140% 120% at 50% 100%, rgba(0,0,0,.85), rgba(0,0,0,.35) 60%, transparent),
    linear-gradient(rgba(7,5,10,.35), rgba(7,5,10,.35)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .7 0 0 0 .07 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
@media (prefers-reduced-motion: no-preference) { body.edison::after { animation: e-grain 1.6s steps(3) infinite; } }
@keyframes e-grain { 0% { background-position: 0 0, 0 0, 0 0, 0 0; } 50% { background-position: 0 0, 0 0, 0 0, 40px 60px; } 100% { background-position: 0 0, 0 0, 0 0, -30px 20px; } }

/* type */
.edison h1 { font: 700 clamp(30px, 6vw, 58px)/1.02 var(--e-serif); letter-spacing: -.012em; margin: 0; text-wrap: balance; color: var(--e-ink); }
.edison h2 { font: 700 17px/1.25 var(--e-serif); margin: 0; color: var(--e-ink); }
.edison .kicker { font: 600 11px/1 var(--e-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--e-amber); display: flex; align-items: center; gap: 10px; }
.edison .kicker .jp { font: 300 14px/1 var(--e-jp); letter-spacing: .3em; color: var(--e-brass); }
.edison .lede, .edison .sub { color: var(--e-ink-2); max-width: 60ch; margin: 6px 0 0; font-size: 15px; }
.edison .k, .edison .note { color: var(--e-ink-2); font-size: 13px; }
.edison .note.bad { color: #F0846C; } .edison .note.warn { color: var(--e-warn); } .edison .note.good { color: var(--e-amber); }
.edison a { color: var(--e-amber); text-decoration-color: rgba(232,168,69,.4); }
.edison .mono, .edison code { font-family: var(--e-mono); }

/* brass rule: a thin gold line with a dot, like the render's circuit traces */
.edison .rule { height: 1px; background: linear-gradient(90deg, transparent, var(--e-brass) 12%, var(--e-brass) 88%, transparent); position: relative; margin: 6px 0; }
.edison .rule::after { content: ""; position: absolute; left: 50%; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--e-amber); box-shadow: 0 0 10px var(--e-glow); transform: translateX(-50%); }

/* panels */
.edison .card, .edison .panel {
  background: linear-gradient(180deg, rgba(26,22,18,.92), rgba(18,16,14,.94));
  border: 1px solid var(--e-brass-dim); border-radius: 14px; padding: 18px;
  box-shadow: 0 1px 0 rgba(255,220,160,.05) inset, 0 30px 60px -40px rgba(0,0,0,.9);
  display: flex; flex-direction: column; gap: 10px;
}
.edison .card { color: var(--e-ink); }

/* controls */
.edison input, .edison textarea {
  font: inherit; color: var(--e-ink); background: rgba(7,5,10,.6); border: 1px solid var(--e-brass-dim); border-radius: 10px; padding: 11px 12px;
}
.edison input:focus, .edison textarea:focus { outline: none; border-color: var(--e-amber); box-shadow: 0 0 0 3px rgba(232,168,69,.15); }
.edison input::placeholder, .edison textarea::placeholder { color: var(--e-ink-3); }
.edison button, .edison a.cta {
  font: 700 15px/1 var(--e-sans); border: 0; border-radius: 10px; padding: 12px 16px; cursor: pointer;
  background: linear-gradient(180deg, var(--e-amber-hot), var(--e-amber)); color: #1A1206;
  box-shadow: 0 0 0 1px rgba(255,208,138,.25) inset, 0 8px 24px -10px var(--e-glow);
}
.edison button.go { background: linear-gradient(180deg, var(--e-amber-hot), var(--e-amber)); color: #1A1206; }
.edison button.stop { background: linear-gradient(180deg, #E0705A, var(--e-stop)); color: #fff; box-shadow: none; }
.edison button.ghost { background: transparent; color: var(--e-amber); border: 1px solid var(--e-brass-dim); box-shadow: none; }
.edison button.chip { background: transparent; color: var(--e-ink); border: 1px solid var(--e-brass-dim); font-weight: 600; padding: 8px 12px; box-shadow: none; }
.edison button.chip.on { border-color: var(--e-amber); color: var(--e-amber); }
.edison button:disabled { opacity: .45; cursor: default; }
.edison .pill { font: 700 11px/1 var(--e-mono); letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--e-brass-dim); border-radius: 999px; padding: 5px 10px; color: var(--e-ink-2); }
.edison .pill.live { color: var(--e-amber); border-color: var(--e-amber); box-shadow: 0 0 14px -4px var(--e-glow); }
.edison .pill.dark { color: var(--e-warn); border-color: var(--e-warn); }
.edison .who { font: 700 18px/1.25 var(--e-serif); }
.edison .big { font: 600 30px/1 var(--e-mono); font-variant-numeric: tabular-nums; color: var(--e-amber-hot); text-shadow: 0 0 22px var(--e-glow); }
.edison .words span { border-color: var(--e-brass-dim); background: rgba(7,5,10,.5); font-family: var(--e-mono); }
.edison .mono { border-color: var(--e-brass-dim); background: rgba(7,5,10,.5); }
.edison .qr { background: #fff; }
.edison .ring { border-color: var(--e-amber); box-shadow: 0 0 40px -10px var(--e-glow); }
.edison .calls div { border-color: var(--e-brass-dim); }

/* the bulb: the Grok render (dark or lit) on a black card, blended into the ground */
.edison .bulb-wrap { position: relative; aspect-ratio: 5 / 8; width: 100%; }
.edison .bulb-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .8s ease; }
.edison .bulb-wrap::before { content: ""; position: absolute; inset: 10% 15% 25%; border-radius: 50%; background: radial-gradient(closest-side, var(--e-glow), transparent 70%); opacity: 0; transition: opacity .8s ease; }
.edison .is-lit .bulb-wrap::before { opacity: 1; }
.edison .bulb-wrap .lit { opacity: 0; }
.edison .is-lit .bulb-wrap .lit { opacity: 1; }
.edison .is-lit .bulb-wrap { filter: drop-shadow(0 0 28px var(--e-glow)); }

/* a header band with a render behind it (the console: the brass exchange; the front page: the street) */
.edison .band { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--e-brass-dim); min-height: 220px; display: flex; align-items: flex-end; padding: 18px; }
.edison .band::before { content: ""; position: absolute; inset: 0; background: var(--e-band) center 30% / cover no-repeat; opacity: .85; }
.edison .band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,5,10,0) 0%, rgba(7,5,10,.55) 45%, rgba(7,5,10,.96) 100%); }
.edison .band > * { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; }
.edison .band h1 { text-shadow: 0 2px 18px rgba(0,0,0,.8); }

.edison footer { color: var(--e-ink-3); font: 12px/1.5 var(--e-mono); }

/* the mode toggle (mode.js) */
.edison .mode-toggle, .mode-toggle { position: fixed; right: 10px; top: calc(10px + env(safe-area-inset-top, 0px)); z-index: 50; font: 600 10px/1 var(--e-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--e-ink-2); background: rgba(7,5,10,.72); border: 1px solid var(--e-brass-dim); border-radius: 999px; padding: 7px 10px; cursor: pointer; backdrop-filter: blur(6px); box-shadow: none; }
@media (max-width: 560px) { .mode-toggle { padding: 6px 8px; font-size: 9px; } }
html.neon .edison .mode-toggle { color: var(--e-ink-2); }
.edison .mode-toggle:hover { color: var(--e-amber); border-color: var(--e-amber); }

/* page specifics */
.edison #launchCard { border-color: rgba(232,168,69,.5); background: linear-gradient(180deg, rgba(232,168,69,.10), rgba(18,16,14,.94)); }
.edison #launchCard .who { color: var(--e-amber-hot); }
.edison .band h1 { font-size: clamp(24px, 4.6vw, 34px); }
.edison .band .sub, .edison .band .lede { color: var(--e-ink-2); }
.edison .w-addr-box { border-color: var(--e-brass-dim); background: rgba(7,5,10,.5); font-family: var(--e-mono); }
.edison #oHello { color: var(--e-amber) !important; }
.edison #oFree { border-color: rgba(232,168,69,.45) !important; background: rgba(232,168,69,.06); }