/* =====================================================================
   Retro BIOS skin -- opt-in via body[data-skin="bios"], toggled from the
   Setup tab injected by timer-skin.js. Everything in this file is scoped
   under that selector, so with the attribute absent (the default) this
   stylesheet has zero effect. Only ever loaded/applied by index.html --
   remote.html/chair-remote.html/slides-remote.html don't include this
   file or timer-skin.js at all, so they're structurally unreachable by
   any of this.

   Fonts: self-hosted "WebPlus IBM VGA" bitmap ROM font (int10h.org's
   Oldschool PC Font Pack, CC BY-SA 4.0 -- see fonts/bios/ATTRIBUTION.txt).
   One face at every scale (9x16), plus its denser 9x8 sibling for the
   smallest utility text -- real text-mode systems only ever had one
   character grid at a time, so hierarchy here comes from size and
   reverse-video, not from mixing typefaces.
   ===================================================================== */

@font-face {
  font-family: 'BiosVGA';
  src: url('./fonts/bios/WebPlus_IBM_VGA_9x16.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BiosVGASmall';
  src: url('./fonts/bios/WebPlus_IBM_VGA_9x8.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body[data-skin="bios"] {
  /* ---- Palette ("Boot Sequence") ---- */
  --primary-color: #150829;         /* Boot Navy -- page background */
  --primary-font: 'BiosVGA', var(--monospace-font), monospace;
  --monospace-font: 'BiosVGA', monospace;
  --border-color: #8B5CF0;          /* Chrome Violet */
  --hover-bg: #2a1450;
  --focus-outline: #FF3EC9;         /* Signal Magenta */

  --bios-cyan: #5CF4E6;             /* Phosphor Cyan -- primary text/glow */
  --bios-magenta: #FF3EC9;          /* Signal Magenta -- active/selected */
  --bios-violet: #8B5CF0;           /* Chrome Violet -- frames */
  --bios-amber: #FFB000;            /* Alert Amber -- Setup tab, hints */
  --bios-paper: #EAFBFF;            /* CRT Paper -- quiet body text */
  --bios-navy: #150829;

  /* ---- Themable hooks consumed by timer-remote-sync.js /
     timer-remote-shared.js (each already has a var(--x, literal) fallback,
     so these only ever take effect on this page, in this skin). ---- */
  --tr-widget-idle-bg: rgba(21, 8, 41, 0.88);
  --tr-widget-idle-shadow: 0 0 10px rgba(139, 92, 240, 0.55);
  --tr-panel-bg: rgba(16, 6, 32, 0.94);
  --tr-panel-shadow: 0 0 22px rgba(92, 244, 230, 0.25);
  --tr-flash-bg: rgba(16, 6, 32, 0.96);
  --tr-widget-fg: var(--bios-paper);
  --tr-badge-bg: var(--bios-magenta);
  --tr-badge-fg: var(--bios-navy);
  --tr-action-bg: #3d2166;
  --tr-paired-pulse-mid: rgba(92, 244, 230, 0.5);
  --tr-paired-pulse-shadow: rgba(92, 244, 230, 0.65);
  --tr-following-pulse-mid: rgba(255, 176, 0, 0.55);
  --tr-following-pulse-shadow: rgba(255, 176, 0, 0.7);
  --tr-recovery-bg: rgba(58, 6, 20, 0.96);
  --tr-recovery-font: 'BiosVGA', monospace;

  background-color: var(--primary-color);
  color: var(--bios-paper);
}

/* ---- Base text + frames ---- */

body[data-skin="bios"] .quadrant {
  border: 3px double var(--bios-violet);
  box-shadow: inset 0 0 24px rgba(139, 92, 240, 0.12);
}

body[data-skin="bios"] .timer-label,
body[data-skin="bios"] .agenda-prefix-line,
body[data-skin="bios"] label,
body[data-skin="bios"] button {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

body[data-skin="bios"] .timer {
  color: var(--bios-cyan);
  text-shadow: 0 0 6px rgba(92, 244, 230, 0.65), 0 0 16px rgba(92, 244, 230, 0.35);
  animation: bios-phosphor-breathe 6s ease-in-out infinite;
}

@keyframes bios-phosphor-breathe {
  0%, 100% { text-shadow: 0 0 6px rgba(92, 244, 230, 0.65), 0 0 16px rgba(92, 244, 230, 0.35); }
  50% { text-shadow: 0 0 10px rgba(92, 244, 230, 0.9), 0 0 26px rgba(92, 244, 230, 0.5); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-skin="bios"] .timer {
    animation: none;
  }
}

/* ---- Buttons + inputs ---- */

body[data-skin="bios"] button {
  background: var(--bios-navy);
  color: var(--bios-cyan);
  border: 2px solid var(--bios-violet);
  border-radius: 0;
  font-family: 'BiosVGA', monospace;
}

body[data-skin="bios"] button:hover:not(:disabled) {
  background: var(--bios-violet);
  color: var(--bios-navy);
}

body[data-skin="bios"] button:focus {
  outline: 3px solid var(--bios-magenta);
  outline-offset: 1px;
}

body[data-skin="bios"] .play-pause-btn.is-running {
  background: var(--bios-cyan);
  color: var(--bios-navy);
  border-color: var(--bios-cyan);
  box-shadow: 0 0 12px rgba(92, 244, 230, 0.6);
}

body[data-skin="bios"] #slides-fullscreen-btn.active {
  background: var(--bios-amber);
  color: var(--bios-navy);
  border-color: var(--bios-amber);
}

body[data-skin="bios"] .resume-glow {
  background: var(--bios-amber);
  color: var(--bios-navy);
  box-shadow: 0 0 12px rgba(255, 176, 0, 0.7);
}

body[data-skin="bios"] input {
  background: var(--bios-navy);
  color: var(--bios-cyan);
  border: 2px solid var(--bios-violet);
  border-radius: 0;
  font-family: 'BiosVGA', monospace;
}

body[data-skin="bios"] input::placeholder {
  color: rgba(92, 244, 230, 0.45);
}

/* ---- Reverse-video radio selection (replaces the red gradient pill) ---- */

body[data-skin="bios"] input[type="radio"][name="speakerTimerType"]:checked + label,
body[data-skin="bios"] input[type="radio"][name="agendaTimerType"]:checked + label {
  background: var(--bios-cyan);
  color: var(--bios-navy);
  box-shadow: none;
  border-radius: 0;
}

body[data-skin="bios"] input[type="radio"][name="speakerTimerType"] + label:hover,
body[data-skin="bios"] input[type="radio"][name="agendaTimerType"] + label:hover {
  background: var(--bios-violet);
  color: var(--bios-navy);
  border-radius: 0;
}

/* ---- Chair name / decor ---- */

body[data-skin="bios"] .chair-name-display {
  color: var(--bios-amber);
}

/* Duotone CRT tint on the DSA rose/chapter-logo photos so they sit inside
   the palette instead of reading as full-color photos dropped on a
   terminal screen. */
body[data-skin="bios"] .index-decor img {
  filter: grayscale(1) sepia(1) hue-rotate(150deg) saturate(3.5) brightness(0.85);
}

body[data-skin="bios"] .date-time {
  color: var(--bios-paper);
}

/* Connection-lost recovery overlay (timer-remote-shared.js, shared across
   all four pages -- see the var()-with-fallback comment there). Framed
   like the rest of the skin's chrome; stays alarming (dark red, not the
   cyan/magenta palette) since it's still a "something's wrong" screen. */
body[data-skin="bios"] #tr-recovery-overlay {
  border: 6px double var(--bios-amber);
  box-sizing: border-box;
}

/* ---- Scanline atmosphere: one static full-screen overlay, no motion ----
   "Subtle atmosphere" per the design brief -- the only animated element on
   the page is the timer glow-breathe above; this texture itself never
   moves, so it reads as ambient CRT grain rather than an effect. */
body[data-skin="bios"]::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.12) 0px,
    rgba(0, 0, 0, 0.12) 1px,
    transparent 2px,
    transparent 3px
  );
  mix-blend-mode: multiply;
}

/* ===== Setup tab + boot menu (injected by timer-skin.js) ===== */

#timer-skin-tab {
  font-family: system-ui, sans-serif;
}

body[data-skin="bios"] #timer-skin-tab {
  font-family: 'BiosVGASmall', monospace;
  background: var(--bios-navy);
  color: var(--bios-amber);
  border: 2px solid var(--bios-amber);
  border-right: none;
  text-shadow: 0 0 4px rgba(255, 176, 0, 0.6);
}

body[data-skin="bios"] #timer-skin-tab:hover {
  background: var(--bios-amber);
  color: var(--bios-navy);
}

#timer-skin-menu {
  font-family: 'BiosVGA', monospace;
}

body[data-skin="bios"] #timer-skin-menu {
  background: var(--bios-navy);
  color: var(--bios-cyan);
  border: 3px double var(--bios-amber);
  box-shadow: 0 0 24px rgba(255, 176, 0, 0.25);
}

#timer-skin-menu .tsm-option {
  cursor: pointer;
}

body[data-skin="bios"] #timer-skin-menu .tsm-option:hover {
  background: var(--bios-violet);
  color: var(--bios-navy);
}

body[data-skin="bios"] #timer-skin-menu .tsm-option.tsm-active {
  background: var(--bios-cyan);
  color: var(--bios-navy);
}

/* Below the mobile breakpoint index.html switches to a scrolling follower
   view with its own compact share bar -- the Setup tab (and the desktop
   pairing widget it stacks with) is hidden there exactly like
   #remote-sync-widget already is, see timer.style.css. */
@media (max-width: 820px) {
  #timer-skin-tab {
    display: none !important;
  }
}