/*
 * Look B, Night Shift. An oscilloscope station: phosphor green on black, amber labels.
 * Dark only, so the light and dark switch is hidden in this look.
 */

html[data-skin="night"] {
  --ground: #0A0E0D;
  --surface: #0D1311;
  --surface-2: #070A09;
  --ink: #DCE7E2;
  --muted: #8FA39B;
  --line: #2A3833;
  --accent: #7CF5C4;
  --on-accent: #06110D;
  --deck: #070A09;
  --deck-ink: #F2F7F4;
  --deck-muted: #8FA39B;
  --deck-line: #1E2A26;
  --key: #0D1311;
  --key-ink: #7CF5C4;
  --key-ring: #7CF5C4;
  --mark: #3B4F48;
  --mark-hot: #7CF5C4;
  --radius: 10px;
  --radius-sm: 6px;
  --font-ui: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --backdrop: #050707;
  color-scheme: dark;
}

html[data-skin="night"] #theme-row { display: none; }

html[data-skin="night"] .brand-mark b { background: var(--accent); }
html[data-skin="night"] .brand-mark i { background: #FFB547; }
html[data-skin="night"] .slider span, html[data-skin="night"] .key-label { color: #FFB547; opacity: 1; }
html[data-skin="night"] .mode, html[data-skin="night"] .seg, html[data-skin="night"] .chip, html[data-skin="night"] .act { font-size: 13px; letter-spacing: .02em; }
html[data-skin="night"] .act-main { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; }
html[data-skin="night"] .mode[aria-selected="true"], html[data-skin="night"] .chip[aria-pressed="true"], html[data-skin="night"] .skin-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
html[data-skin="night"] .field { color: #F2F7F4; }
html[data-skin="night"] .result-words[data-revealed="true"] { text-shadow: 0 0 14px rgb(124 245 196 / .5); }

/* The scope is the hero: a 20px grid across the whole deck with the trace on top. */
html[data-skin="night"] .deck {
  background-color: #070A09;
  background-image: linear-gradient(#131C19 1px, transparent 1px), linear-gradient(90deg, #131C19 1px, transparent 1px);
  background-size: 20px 20px; background-position: center;
}
html[data-skin="night"] .tape-wrap { height: 56px; }
html[data-skin="night"] .scope { opacity: 1; }
html[data-skin="night"] .scope path.live { filter: drop-shadow(0 0 5px #7CF5C4); }

/* A square pad with a ring, not a round button. */
html[data-skin="night"] .key, html[data-skin="night"] .key-ring { border-radius: 24px; }
html[data-skin="night"] .key-cap { inset: 5px; border-radius: 20px; border: 1px solid #2A3833; box-shadow: inset 0 0 40px rgb(124 245 196 / .07); }
html[data-skin="night"] .key.is-down .key-cap { box-shadow: inset 0 0 50px rgb(124 245 196 / .3); }
html[data-skin="night"] .deck-mode[aria-pressed="true"] { color: #06110D; }
html[data-skin="night"] .toast { background: var(--accent); color: var(--on-accent); }

@media (prefers-reduced-motion: reduce) {
  html[data-skin="night"] .scope path.live, html[data-skin="night"] .tape i[data-hot] { filter: none; box-shadow: none; }
}