/* Theme tokens are set on :root by theme.js. Defaults here are the dark base so
   first paint is correct before JS runs. Skins (later) just override these vars. */
:root {
  --nw-bg: #04100a;
  --nw-fg: #3dff70;
  --nw-accent: #ffd24a;
  --nw-glow: rgba(60,255,100,0.55);
  --nw-dim: 0;            /* brightness overlay opacity: 0 = full bright */
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: var(--nw-bg); color: var(--nw-fg);
  font-family: "Helvetica Neue", Arial, sans-serif;
  -webkit-user-select: none; user-select: none;
  overflow: hidden;
}
/* Dim overlay driven by brightness (separate axis from mode). */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: #000; opacity: var(--nw-dim); transition: opacity 0.2s; z-index: 50;
}
#nw-app { height: 100%; display: flex; flex-direction: column; }
#nw-home {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4vmin;
}
#clock {
  font-variant-numeric: tabular-nums; line-height: 1;
  font-size: 26vmin; font-weight: 300; letter-spacing: 0.02em;
  display: flex; align-items: baseline;
  color: var(--nw-fg);
  text-shadow: 0 0 0.07em var(--nw-glow), 0 0 0.02em var(--nw-glow); /* CRT glow, scales with size */
}
#clock-stage { display: flex; align-items: center; justify-content: center; }
.nw-clock.nw-hidden { display: none !important; } /* beat the #clock id-selector display:flex */
#clock-analog { width: 70vmin; max-width: 92vw; }
.nw-analog-svg { width: 100%; height: auto; display: block; font-weight: 300; }
.nw-suffix { font-size: 6vmin; margin-left: 2vmin; color: var(--nw-accent); align-self: flex-start; }
.nw-colon { color: var(--nw-fg); cursor: pointer; animation: nw-blink 2s steps(1, end) infinite; }
.nw-colon.nw-colon-steady { animation: none; opacity: 1; }
@keyframes nw-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0.25; } }
#nw-controls { display: flex; gap: 3vmin; align-items: center; }
.nw-btn {
  background: transparent; color: var(--nw-accent);
  font-family: 'Cinzel', 'Palatino Linotype', serif; letter-spacing: 0.08em;
  border: 1px solid color-mix(in srgb, var(--nw-accent) 35%, transparent);
  border-radius: 999px; padding: 1.2vmin 3vmin; font-size: 2.4vmin;
  cursor: pointer;
}
.nw-btn:hover { filter: brightness(1.25); border-color: var(--nw-accent); text-shadow: 0 0 6px var(--nw-accent); }
#brightness { width: 30vmin; accent-color: var(--nw-accent); }