/* ============================================================================
   Night Room — DEMO v2 stylesheet (synthesis-first depth delta)
   ----------------------------------------------------------------------------
   Demo-only component styles layered ON TOP of the mirrored design system
   (css/theme.css + css/desktop.css). The v1 demo-chrome (banner, explain-card,
   empty-state, sub-card) stays INLINE in each page's <style> and is untouched;
   this file adds ONLY the new v2 surfaces:
     · weather-reactive ambient sky + legibility scrim + weather label
     · the synthesis hero (usable output + converging input-chips)
     · the determination sub-block ("how it's determined")
     · cross-domain fusion cards
     · the governance-view toggle + per-surface control badges (Act 2)
     · the refusal card (无为)
     · the 正名 etymology popover
     · the 节气 solar-term ribbon + 子午流注 organ-hour ticker
   Every class is new (no collision with the inline chrome). All colors come
   from theme.css tokens via rgba(var(--nr-*-rgb), a) — no foreign palette.
   Every animation has a prefers-reduced-motion fallback (see the block at end).
   Spec: Build/QueuedBuilds/PRD_nightroom-stripped-demo.md (§ v2 Depth Delta)
   ========================================================================== */

/* ── Weather-reactive ambient sky ───────────────────────────────────────────
   demo-weather.js paints #demo-sky (a fixed full-viewport canvas) with the
   real app's SKIES gradient values, cycling through sample conditions on a
   local timer (ZERO network). #demo-scrim keeps body text legible: the sky
   reads strongest behind the header/hero up top, then settles onto near-solid
   espresso lower down where the explain-cards live. */
#demo-sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
  opacity: 0;                 /* demo-weather.js fades this to 1 once painted */
  transition: opacity 900ms ease-out;
}
#demo-scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(var(--nr-bg-rgb), 0.32) 0%,
    rgba(var(--nr-bg-rgb), 0.78) 42%,
    rgba(var(--nr-bg-rgb), 0.90) 68%,
    rgba(var(--nr-bg-rgb), 0.94) 100%
  );
}
/* The weather label sits with the banner as an honest caption for the sky. */
.demo-weather-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(var(--nr-text-rgb), 0.45);
  white-space: nowrap;
}
.demo-weather-label .dwl-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(var(--nr-accent-rgb), 0.7);
  flex-shrink: 0;
  box-shadow: 0 0 6px 1px rgba(var(--nr-accent-rgb), 0.4);
}
.demo-weather-label .dwl-cond { color: rgba(var(--nr-accent-rgb), 0.8); font-weight: 500; }

/* ── The synthesis hero ─────────────────────────────────────────────────────
   The Act-1 centerpiece: one genuinely usable output with its named inputs
   visibly converging into it. Sample values, real architecture. */
.demo-hero {
  position: relative;
  border-radius: 16px;
  padding: 22px 22px 18px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(var(--nr-accent-rgb), 0.07), transparent 70%),
    rgba(var(--nr-surface-rgb), 0.55);
  border: 1px solid rgba(var(--nr-accent-rgb), 0.22);
  box-shadow: 0 10px 40px -12px rgba(var(--nr-overlay-rgb), 0.35);
  overflow: hidden;
}
.demo-hero-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.demo-hero-eyebrow .heb-title {
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: rgba(var(--nr-accent-rgb), 0.85);
}
.demo-hero-eyebrow .heb-tag {
  font-family: 'Alegreya', serif;
  font-style: italic;
  font-size: 12px;
  color: rgba(var(--nr-text-rgb), 0.42);
}
.demo-hero-output {
  font-family: 'Alegreya', serif;
  font-size: 21px;
  line-height: 1.42;
  color: rgba(var(--nr-accent-rgb), 0.92);
  margin-bottom: 18px;
}
.demo-hero-output em { font-style: italic; color: rgba(var(--nr-text-rgb), 0.9); }
.demo-hero-output .hero-strong { font-style: normal; font-weight: 600; color: rgba(var(--nr-accent-rgb), 1); }

/* The "fused from" convergence rail */
.demo-fuse {
  position: relative;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--nr-overlay-rgb), 0.10);
}
.demo-fuse-lead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.demo-fuse-lead .dfl-label {
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(var(--nr-text-rgb), 0.32);
}
.demo-fuse-trace {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(var(--nr-accent-rgb), 0.6);
  background: rgba(var(--nr-accent-rgb), 0.06);
  border: 1px solid rgba(var(--nr-accent-rgb), 0.20);
  border-radius: 999px;
  padding: 5px 11px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.demo-fuse-trace:hover { background: rgba(var(--nr-accent-rgb), 0.12); color: rgba(var(--nr-accent-rgb), 0.85); }
.demo-fuse-trace .material-symbols-outlined { font-size: 14px; }

.demo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.demo-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 12px;
  border-radius: 10px;
  background: rgba(var(--nr-overlay-rgb), 0.06);
  border: 1px solid rgba(var(--nr-overlay-rgb), 0.12);
}
.demo-chip .chip-name {
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(var(--nr-accent-rgb), 0.7);
}
.demo-chip .chip-val {
  font-family: 'Alegreya', serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(var(--nr-text-rgb), 0.66);
}
/* Convergence: chips start dispersed + faint, then settle inward on load /
   on replay. demo-synthesis.js adds .demo-fuse-run to (re)fire it. */
.demo-fuse-run .demo-chip {
  animation: demo-chip-converge 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.demo-fuse-run .demo-chip:nth-child(1) { animation-delay: 40ms; }
.demo-fuse-run .demo-chip:nth-child(2) { animation-delay: 120ms; }
.demo-fuse-run .demo-chip:nth-child(3) { animation-delay: 200ms; }
.demo-fuse-run .demo-chip:nth-child(4) { animation-delay: 280ms; }
.demo-fuse-run .demo-chip:nth-child(5) { animation-delay: 360ms; }
.demo-fuse-run .demo-chip:nth-child(6) { animation-delay: 440ms; }
@keyframes demo-chip-converge {
  0%   { opacity: 0; transform: translateY(10px) scale(0.94); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* When the rail fires, the output briefly warms to signal "this is the result" */
.demo-fuse-run ~ .demo-hero-output,
.demo-hero.demo-fuse-flash .demo-hero-output {
  animation: demo-output-arrive 900ms ease-out both;
}
@keyframes demo-output-arrive {
  0%   { text-shadow: none; }
  45%  { text-shadow: 0 0 22px rgba(var(--nr-accent-rgb), 0.35); }
  100% { text-shadow: none; }
}
.demo-hero-foot {
  margin-top: 14px;
  font-family: 'Alegreya', serif;
  font-style: italic;
  font-size: 12px;
  color: rgba(var(--nr-text-rgb), 0.34);
}

/* ── Determination sub-block ("how it's determined") ─────────────────────────
   Appended inside each existing .demo-explain card, under the "what this does"
   line. Names inputs + logic — the mechanism, never a real value. */
.demo-det {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(var(--nr-accent-rgb), 0.18);
}
.demo-det .det-lbl {
  display: block;
  margin-bottom: 4px;
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(var(--nr-accent-rgb), 0.55);
}
.demo-det .det-txt {
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(var(--nr-text-rgb), 0.55);
}
.demo-det .det-in {
  font-style: italic;
  font-family: 'Alegreya', serif;
  color: rgba(var(--nr-accent-rgb), 0.75);
}

/* ── Cross-domain fusion card ────────────────────────────────────────────────
   A foundation showing its OWN synthesis → usable output (Craft, Table). Same
   language as the hero, one notch quieter. */
.demo-fusion {
  border-radius: 14px;
  padding: 18px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(var(--nr-accent-rgb), 0.05), transparent 72%),
    rgba(var(--nr-overlay-rgb), 0.05);
  border: 1px solid rgba(var(--nr-accent-rgb), 0.16);
}
.demo-fusion-out {
  font-family: 'Alegreya', serif;
  font-size: 17px;
  line-height: 1.42;
  color: rgba(var(--nr-accent-rgb), 0.9);
  margin-bottom: 14px;
}
.demo-fusion-out em { font-style: italic; color: rgba(var(--nr-text-rgb), 0.85); }
.demo-fusion .demo-chips { margin-bottom: 2px; }

/* ── Governance view (Act 2) — toggle pill + per-surface control badges ───────
   A discoverable floating pill (bottom-left, mirroring the real FAB's
   bottom-right). Off by default. When on, body gains .demo-gov-on and each
   card's control badge fades in. */
.demo-gov-toggle {
  position: fixed;
  left: 20px;
  bottom: 96px;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(var(--nr-modal-bg-rgb), 0.92);
  border: 1px solid rgba(var(--nr-accent-rgb), 0.28);
  box-shadow: 0 6px 22px -6px rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s, background 0.15s;
}
.demo-gov-toggle:hover { border-color: rgba(var(--nr-accent-rgb), 0.5); }
.demo-gov-toggle .material-symbols-outlined { font-size: 17px; color: rgba(var(--nr-accent-rgb), 0.7); }
.demo-gov-toggle .dgt-label {
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(var(--nr-text-rgb), 0.55);
}
.demo-gov-toggle .dgt-state {
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: rgba(var(--nr-text-rgb), 0.3);
}
body.demo-gov-on .demo-gov-toggle { border-color: rgba(var(--nr-accent-rgb), 0.6); background: rgba(var(--nr-accent-rgb), 0.14); }
body.demo-gov-on .demo-gov-toggle .dgt-state { color: rgba(var(--nr-accent-rgb), 0.85); }

/* Per-surface control badge — authored via data-gov on each block, rendered by
   demo-synthesis.js. Hidden until governance view is on. */
.demo-gov-badge {
  display: none;
  align-items: flex-start;
  gap: 7px;
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  background: rgba(var(--nr-rust-rgb), 0.09);
  border: 1px solid rgba(var(--nr-rust-rgb), 0.22);
}
body.demo-gov-on .demo-gov-badge { display: flex; animation: demo-badge-in 320ms ease-out both; }
@keyframes demo-badge-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.demo-gov-badge .material-symbols-outlined { font-size: 15px; color: rgba(var(--nr-rust-rgb), 0.8); flex-shrink: 0; margin-top: 1px; }
.demo-gov-badge .dgb-txt {
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(var(--nr-text-rgb), 0.55);
}
.demo-gov-badge .dgb-txt b { color: rgba(var(--nr-rust-rgb), 0.85); font-weight: 600; }

/* ── Refusal card (无为 — what a surface deliberately does NOT do) ─────────── */
.demo-refusal {
  border-radius: 12px;
  padding: 16px 18px;
  background: rgba(var(--nr-void-rgb), 0.5);
  border: 1px solid rgba(var(--nr-overlay-rgb), 0.10);
  border-left: 2px solid rgba(var(--nr-rust-rgb), 0.5);
}
.demo-refusal .dr-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 8px;
}
.demo-refusal .dr-glyph {
  font-family: 'Alegreya', serif;
  font-size: 17px;
  color: rgba(var(--nr-accent-rgb), 0.7);
  line-height: 1;
}
.demo-refusal .dr-title {
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(var(--nr-text-rgb), 0.4);
}
.demo-refusal .dr-body {
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(var(--nr-text-rgb), 0.58);
}
.demo-refusal .dr-body b { color: rgba(var(--nr-accent-rgb), 0.8); font-weight: 600; }

/* ── "This decision needs you" — a needs-you handoff as a waiting state ────── */
.demo-handoff {
  border-radius: 12px;
  padding: 16px 18px;
  background: rgba(var(--nr-accent-rgb), 0.05);
  border: 1px solid rgba(var(--nr-accent-rgb), 0.22);
}
.demo-handoff .dh-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.demo-handoff .dh-head .material-symbols-outlined { font-size: 18px; color: rgba(var(--nr-accent-rgb), 0.75); }
.demo-handoff .dh-title {
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(var(--nr-accent-rgb), 0.8);
}
.demo-handoff .dh-body {
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(var(--nr-text-rgb), 0.58);
}
.demo-handoff .dh-waiting {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(var(--nr-accent-rgb), 0.7);
}
.demo-handoff .dh-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(var(--nr-accent-rgb), 0.85);
  animation: demo-wait-pulse 2.4s ease-in-out infinite;
}
@keyframes demo-wait-pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }

/* ── 正名 etymology — tappable name → popover ────────────────────────────────
   Any element with [data-etymon] gets a hairline underline affordance; tapping
   opens .demo-etym-pop (positioned by demo-synthesis.js). */
[data-etymon] {
  cursor: help;
  border-bottom: 1px dashed rgba(var(--nr-accent-rgb), 0.35);
  -webkit-tap-highlight-color: transparent;
}
.demo-etym-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(3px);
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.demo-etym-overlay.open { display: flex; }
.demo-etym-pop {
  width: 100%;
  max-width: 480px;
  border-radius: 16px 16px 0 0;
  padding: 22px 22px calc(22px + env(safe-area-inset-bottom, 0px));
  background: rgb(var(--nr-modal-bg-rgb));
  border: 1px solid rgba(var(--nr-overlay-rgb), 0.15);
  border-bottom: none;
  animation: demo-sheet-up 240ms ease-out;
}
@keyframes demo-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.demo-etym-pop .dep-eyebrow {
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.24em;
  color: rgba(var(--nr-accent-rgb), 0.6);
  margin-bottom: 10px;
}
.demo-etym-pop .dep-term {
  font-family: 'Alegreya', serif;
  font-size: 26px;
  color: rgba(var(--nr-accent-rgb), 0.95);
  margin-bottom: 2px;
}
.demo-etym-pop .dep-gloss {
  font-family: 'Alegreya', serif; font-style: italic;
  font-size: 14px; color: rgba(var(--nr-text-rgb), 0.5);
  margin-bottom: 14px;
}
.demo-etym-pop .dep-body {
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 14px; line-height: 1.62;
  color: rgba(var(--nr-text-rgb), 0.66);
  margin-bottom: 6px;
}
.demo-etym-pop .dep-why {
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 13px; line-height: 1.58;
  color: rgba(var(--nr-text-rgb), 0.5);
}
.demo-etym-pop .dep-why b { color: rgba(var(--nr-accent-rgb), 0.75); font-weight: 600; }
.demo-etym-pop .dep-close {
  display: block; width: 100%; margin-top: 18px;
  padding: 11px; border-radius: 10px;
  background: rgba(var(--nr-overlay-rgb), 0.08);
  border: 1px solid rgba(var(--nr-overlay-rgb), 0.12);
  font-family: 'Alegreya Sans', sans-serif; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: rgba(var(--nr-text-rgb), 0.5);
  cursor: pointer;
}

/* ── 节气 solar-term ribbon + 子午流注 organ-hour ticker ─────────────────────
   Two live "embodied time" ambient elements. Client-side date only. */
.demo-timeband {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.demo-timecard {
  flex: 1 1 200px;
  border-radius: 12px;
  padding: 14px 16px;
  background: rgba(var(--nr-overlay-rgb), 0.04);
  border: 1px solid rgba(var(--nr-overlay-rgb), 0.09);
}
.demo-timecard .tc-eyebrow {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.2em;
  color: rgba(var(--nr-text-rgb), 0.35);
  margin-bottom: 8px;
}
.demo-timecard .tc-eyebrow .material-symbols-outlined { font-size: 14px; color: rgba(var(--nr-accent-rgb), 0.55); }
.demo-timecard .tc-primary {
  font-family: 'Alegreya', serif;
  font-size: 18px;
  color: rgba(var(--nr-accent-rgb), 0.9);
  line-height: 1.2;
}
.demo-timecard .tc-primary .tc-rom {
  font-style: italic; font-size: 13px; color: rgba(var(--nr-text-rgb), 0.45);
}
.demo-timecard .tc-note {
  margin-top: 6px;
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 12px; line-height: 1.5;
  color: rgba(var(--nr-text-rgb), 0.48);
}
.demo-timecard .tc-live {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 8px;
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(var(--nr-accent-rgb), 0.55);
}
.demo-timecard .tc-live-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(var(--nr-accent-rgb), 0.8);
  animation: demo-wait-pulse 2.8s ease-in-out infinite;
}

/* ── Reduced motion — every demo animation opts out ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #demo-sky { transition: none; }
  .demo-fuse-run .demo-chip,
  .demo-fuse-run ~ .demo-hero-output,
  .demo-hero.demo-fuse-flash .demo-hero-output,
  .demo-gov-badge,
  .demo-etym-pop,
  .demo-handoff .dh-pulse,
  .demo-timecard .tc-live-dot {
    animation: none !important;
  }
  .demo-fuse-run .demo-chip { opacity: 1; transform: none; }
}

/* ── Desktop: keep the sky honest under the side nav, place chrome clear ──────
   The mirrored desktop.css offsets content by the 180px side nav. The fixed
   demo chrome (weather label lives in the banner, already offset inline) and
   the governance pill sit clear of that rail. */
@media (hover: hover) and (min-width: 768px) {
  .demo-gov-toggle { left: calc(180px + 20px); bottom: 24px; }
  body.nr-nav-collapsed .demo-gov-toggle { left: calc(56px + 20px); }
  .demo-hero { padding: 26px 26px 20px; }
  .demo-hero-output { font-size: 22px; }
}