/* Discovery Wall — Shell: the minimum styling the Shell-owned screens need.
 *
 * This file is NOT the design language. It exists only because the pairing and calm
 * screens must render before any theme is known. Themes bring their own styling from M3.
 * DESIGN-LANGUAGE.md governs the display visuals; nothing here should grow toward it.
 *
 * TVs: no scrollbars, no text selection, no cursor, no overscroll. A display is glass,
 * not a web page.
 */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  cursor: none;
  overscroll-behavior: none;
}

/* The two layers. #dw-system sits above #dw-theme because a broadcast is a takeover
 * (DW-10). It is pointer/paint-inert when empty, so the normal case — which is almost
 * always the case — costs nothing. */
#shell-root { height: 100%; position: relative; }

#dw-theme {
  position: absolute;
  inset: 0;
}

#dw-system {
  position: absolute;
  inset: 0;
  z-index: 10;
}

#dw-system:empty { display: none; }

/* ── The calm state (DW-65) ───────────────────────────────────────────────────────────────
 * The resting surface — quiet, never blank-looking, never an error. A DESIGNED surface that
 * belongs to the Shell, beneath themes (a theme is a pure function of a feed; where there is no
 * feed there is no theme). This is the one designed treatment sanctioned in this file (DW-65);
 * nothing else here should grow toward the design language.
 *
 * The Shell's OWN voice: a FLAT neutral near-black — NO gradient. A radial vignette/glow over
 * near-black posterises into concentric rings on an 8-bit TV panel, and the TV's dynamic-contrast
 * processing then lifts them into a bright grey wash (observed on a Sony Bravia, 31 Jul 2026).
 * Warmth lives in the hex, not a gradient. system-ui only (body), so it needs no font asset and
 * no network and can hold for months. */
.dw-calm {
  position: absolute; inset: 0;
  background: #0c0b0a;                 /* whisper-warm near-black, flat — nothing to band */
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}

/* The centred column, and the burn-in-drift target (static by default). */
.dw-calm__stack { display: flex; flex-direction: column; align-items: center; padding: 6vw; }

.dw-calm__identity { display: flex; flex-direction: column; align-items: center; gap: 2.6vh; }

/* Crest: soft calm ink (currentColor). Holds a logo <img> or the initials-shield fallback. */
.dw-calm__crest { height: clamp(84px, 12vh, 148px); color: rgba(255,255,255,.90); }
.dw-calm__crest img, .dw-calm__crest svg { height: 100%; width: auto; display: block; }

.dw-calm__name {
  font-size: clamp(1.5rem, 2.5vw, 2.7rem);
  font-weight: 400; letter-spacing: .005em; line-height: 1.12;
  color: rgba(255,255,255,.90); max-width: 22ch;
}

/* Bare: the Discovery Wall lockup alone, as a MASK filled with a calm soft tone — the same
   monochrome-watermark treatment as the classroom footer, so it reads as the product's own
   quiet mark rather than a colour PNG. The lockup is a SHELL-OWNED copy beside this file
   (display/shell/dw-lockup.png): the calm state must not depend on a theme's assets. */
.dw-calm__lockup {
  width: clamp(300px, 34vw, 560px);
  aspect-ratio: 1360 / 632;
  background: rgba(244,244,248,.44);
  -webkit-mask: url("./dw-lockup.png") no-repeat center / contain;
          mask: url("./dw-lockup.png") no-repeat center / contain;
}

/* Clock: present, quiet, thin. Minute precision, tabular so it never shifts width. */
.dw-calm__clock {
  margin-top: 7.5vh;
  font-size: clamp(2rem, 5.4vw, 4.6rem);
  font-weight: 200; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.66);
}

/* Burn-in drift — OFF by default (static); enabled per panel with ?drift=on (screens.js). Not
   decoration: a slow pixel-shift so no pixel is lit identically for months on an OLED/plasma
   panel. Transform-only (GPU-cheap), imperceptible frame to frame. */
.dw-calm__stack[data-drift="on"] { animation: dw-calm-drift 240s ease-in-out infinite; }
@keyframes dw-calm-drift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(14px, -10px); }
  50%  { transform: translate(-8px, 12px); }
  75%  { transform: translate(-14px, -6px); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .dw-calm__stack[data-drift="on"] { animation: none; } }

/* ── The Broadcast Layer (DW-10) ────────────────────────────────────────────────────────
 * Shell-owned: identical on every surface, under every theme. DELIBERATELY PLAIN — the
 * tiers are semantic (DW-10 fixes them and their behaviour), not designed. The real
 * treatment, including the celebration grammar, is DESIGN-LANGUAGE.md's job, not a
 * milestone about state. Nothing here knows which theme is underneath, and nothing here
 * may ever need to. */
.dw-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3vh;
  text-align: center;
  padding: 6vw;
  background: #111;
}

.dw-overlay[data-tier="emergency"]   { background: #7f1d1d; }
.dw-overlay[data-tier="notice"]      { background: #78350f; }
.dw-overlay[data-tier="celebration"] { background: #713f12; }

.dw-overlay__title {
  font-size: clamp(2rem, 6vw, 6rem);
  font-weight: 600;
  line-height: 1.1;
}

.dw-overlay__message {
  font-size: clamp(1rem, 2.4vw, 2.5rem);
  opacity: 0.85;
  max-width: 30ch;
  line-height: 1.4;
}

.dw-overlay__names {
  font-size: clamp(1rem, 2.6vw, 2.75rem);
  opacity: 0.9;
  max-width: 34ch;
  line-height: 1.4;
}

.dw-overlay__countdown {
  font-size: clamp(2.5rem, 9vw, 8rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  opacity: 0.95;
}

/* Pairing — read across a room, typed into a phone. Scales with the viewport because a
   Shell screen cannot know whether it is on a 15" panel or an 85" TV. */
.dw-pairing {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4vh;
  text-align: center;
  padding: 4vw;
}

.dw-pairing__lead {
  font-size: clamp(1rem, 2.2vw, 2rem);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  opacity: 0.55;
}

.dw-pairing__code {
  font-size: clamp(3rem, 14vw, 12rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  /* Tabular figures stop the code shifting width between renders. */
  font-variant-numeric: tabular-nums;
  text-indent: 0.16em; /* compensate trailing letter-spacing so the code reads centred */
}

.dw-pairing__hint {
  font-size: clamp(0.9rem, 1.6vw, 1.5rem);
  opacity: 0.5;
  max-width: 28ch;
  line-height: 1.5;
}

/* M1 placeholder only — removed when the theme mounts at M3. */
.dw-stub {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5vh;
  text-align: center;
  padding: 4vw;
  font-size: clamp(1rem, 2vw, 2rem);
}

.dw-stub__note { opacity: 0.4; font-size: 0.7em; margin-top: 2vh; }