/* Shared overlay skin. The colours below are neutral fallbacks: brand-identity.js sets the workspace's own on :root. */
:root {
  --accent: #a0a7b4;
  --accent-deep: #6b7280;
  --ink: #0c0e13;
  --bg: #101114;
  --bg-lift: #1a1c22;
  --text: #e8eaee;
  --muted: #8b8f9a;

  /* 0.93, not 0.82. The overlay has to hold up over a WHITE browser window on a
     screen-share, not just over the dark brand background — at 0.82 the socials
     bar washed out to unreadable grey the moment a light page was on screen. */
  --panel: color-mix(in srgb, var(--bg) 93%, transparent);
  --hairline: color-mix(in srgb, var(--accent) 34%, transparent);
  --radius: 18px;

  /* The system stacks: the brand's `system-*` fonts, and the fallback while a
     catalogue font (fonts/catalogue.css) loads. No other webfont: one that fails
     to load mid-stream would reflow the overlay on air. See docs/overlays.md. */
  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  --mono: 'SF Mono', ui-monospace, Menlo, monospace;
  /* Titles: the brand's display face (brand-identity.js); the body face until one is set. */
  --display: var(--sans);
}

/* Held, unseen, while the brand's faces load, so text never reflows on air
   (brand-identity.js sets it, and clears it once they are ready). */
html[data-fonts-loading] body { visibility: hidden; }

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

html, body {
  width: 100%;
  height: 100%;
  /* Transparent: OBS composites the page over the scene beneath it. Never set a
     background colour on body or you get an opaque black box over your stream. */
  background: transparent;
  font-family: var(--sans);
  color: var(--text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
}

/* The LIVE dot. `prefers-reduced-motion` is deliberately NOT honoured here —
   this renders in OBS, not for a human with motion sensitivity settings. */
.dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: #ff4d4d;
  box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.7);
  animation: pulse 2s infinite;
  flex: none;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.65); }
  70%  { box-shadow: 0 0 0 14px rgba(255, 77, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); }
}

/* Entrance. Overlays are re-created whenever OBS shows the source, so this
   plays on every scene entry rather than only once per stream. */
.rise { animation: rise 520ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ?fxdebug=1 — see fxDebugMarker in _shared.js. A diagnostic, not a look:
   four pages in step draw one continuous bar across the composited frame. */
.fx-debug-sweep {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, transparent, #34d07f, transparent);
  transform: translateX(-100%);
  animation: fx-debug-sweep 1200ms linear forwards;
  pointer-events: none;
  z-index: 99999;
}
@keyframes fx-debug-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}