/* ============================================================
   INFERENCE ARCADE — "night water" theme core
   Tokens, base, titlebar, boot screen, lamps, scanlines, focus.
   Component styles live in styles.css (index page) or inline
   (marquee.html). This file is shared by both pages.
   ============================================================ */

/* Self-hosted fonts (latin subset). The kiosk must not depend on
   Google Fonts being reachable; non-latin glyphs fall through the
   unicode-range to the system fallback stacks. */
@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/silkscreen-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/silkscreen-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 700; /* variable font */
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* raw palette — night water */
  --abyss: #08110e;          /* page background */
  --deck: #0d1c16;           /* panel surface */
  --deck-raised: #12251d;    /* hover / raised surface */
  --well: #050b09;           /* inset: canvas bezel, printer paper, inputs */
  --mint: #7befc3;           /* accent: borders, lamps, active */
  --mint-bright: #b2ffdf;    /* hover text / lit phosphor */
  --mint-dim: #2e5d4c;       /* quiet borders, dividers */
  --mint-faint: rgba(123, 239, 195, 0.12);
  --foam: #e4fbf0;           /* primary text */
  --foam-dim: #8fb3a5;       /* secondary text */
  --brass: #e0b25a;          /* slow / warning */
  --buoy: #c4524a;           /* timeout / error / danger */
  --surf: #5ab0e0;           /* companion room lamp: language / water-blue */

  /* semantic aliases (component CSS reads these) */
  --arcade-bg: var(--abyss);
  --arcade-panel: var(--deck);
  --arcade-panel-strong: var(--deck-raised);
  --arcade-well: var(--well);
  --arcade-accent: var(--mint);
  --arcade-accent-bright: var(--mint-bright);
  --arcade-accent-dim: var(--mint-dim);
  --arcade-accent-faint: var(--mint-faint);
  --arcade-warning: var(--brass);
  --arcade-danger: var(--buoy);
  --arcade-success: var(--mint);
  --arcade-text: var(--foam);
  --arcade-text-secondary: var(--foam-dim);
  --arcade-text-dim: #5f7a6e;
  --arcade-border: var(--mint-dim);
  --arcade-border-soft: rgba(123, 239, 195, 0.16);

  /* spacing (8-point grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* type */
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', 'SF Mono', Consolas, monospace;
  --font-display: var(--font-mono);
  --font-body: var(--font-mono);

  /* modular type scale — 16px base, 1.25 ratio (major third).
     Every font-size in the app references one of these tokens. */
  --text-2xs: 0.625rem;   /* 10px  — micro labels, badges, pins */
  --text-xs:  0.688rem;   /* 11px  — tiny meta, timestamps, kickers */
  --text-sm:  0.75rem;    /* 12px  — secondary labels, form text */
  --text-md:  0.875rem;   /* 14px  — body text, controls, card text */
  --text-lg:  1rem;       /* 16px  — primary headings, status values */
  --text-xl:  1.25rem;    /* 20px  — section headings */
  --text-2xl: 1.5rem;     /* 24px  — page titles, companion headings */
  --text-3xl: 1.875rem;   /* 30px  — display, setup-game */
  --text-4xl: 2rem;       /* 32px  — hero display */

  /* shape & motion — square panels, quick machine transitions */
  --radius-sm: 0;
  --radius-md: 2px;
  --radius-lg: 3px;
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;

  /* glow */
  --lamp-glow: 0 0 8px rgba(123, 239, 195, 0.55);
  --shadow-glow: 0 0 0 1px rgba(123, 239, 195, 0.08);
  --shadow-hover: 0 0 14px rgba(123, 239, 195, 0.18);
}

/* ---------- base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  background-color: var(--abyss);
  /* still water at night: a faint moonlit sheen, nothing busier */
  background-image: radial-gradient(
    ellipse 120% 60% at 50% -10%,
    rgba(123, 239, 195, 0.05),
    transparent 60%
  );
  background-attachment: fixed;
  color: var(--foam);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--mint);
  color: var(--abyss);
}

:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

/* mint phosphor scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--mint-dim) transparent;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--mint-dim);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--mint);
}

/* ---------- utilities ---------- */

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* CRT glass: apply to the element that should carry scanlines.
   Painted as an ::after so content stays clean underneath. */
.scanlines {
  position: relative;
}
.scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.22) 0px,
    rgba(0, 0, 0, 0.22) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: multiply;
}

/* ---------- lamps ---------- */

.lamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--foam-dim);
}

.lamp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--arcade-text-dim);
  box-shadow: none;
  transition: background var(--transition-base), box-shadow var(--transition-base);
}

.lamp[data-state="on"] .lamp-dot {
  background: var(--mint);
  box-shadow: var(--lamp-glow);
}

.lamp[data-state="on"] {
  color: var(--mint);
}

.lamp[data-state="warn"] .lamp-dot {
  background: var(--brass);
  box-shadow: 0 0 8px rgba(224, 178, 90, 0.55);
}

.lamp[data-state="err"] .lamp-dot {
  background: var(--buoy);
  box-shadow: 0 0 8px rgba(196, 82, 74, 0.55);
}

/* ---------- arcade titlebar (OS title bar / control deck) ---------- */

.arcade-titlebar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
  min-height: 52px;
  padding: 0 var(--space-5);
  background: linear-gradient(180deg, var(--deck-raised), var(--deck));
  border-bottom: 1px solid var(--mint-dim);
  box-shadow: 0 1px 0 rgba(123, 239, 195, 0.08), 0 8px 24px rgba(0, 0, 0, 0.5);
}

.titlebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.titlebar-brand:hover .titlebar-title,
.titlebar-brand:focus-visible .titlebar-title {
  color: var(--mint-bright);
}

.titlebar-mark {
  color: var(--mint);
  font-size: var(--text-lg);
  text-shadow: var(--lamp-glow);
}

.titlebar-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: 0.12em;
  color: var(--foam);
  white-space: nowrap;
}

.titlebar-sub {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--arcade-text-dim);
  white-space: nowrap;
}

.arcade-titlebar #main-nav {
  display: flex;
  align-items: stretch;
  margin-left: var(--space-5);
  flex: 1;
}

.arcade-titlebar .nav-link {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0 var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--foam-dim);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast),
    box-shadow var(--transition-fast);
}

.arcade-titlebar .nav-link:hover {
  color: var(--mint-bright);
  background: var(--mint-faint);
}

.arcade-titlebar .nav-link.active {
  color: var(--mint);
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--mint);
}

.titlebar-status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

.titlebar-backend {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--foam-dim);
  border: 1px solid var(--arcade-border-soft);
  padding: 2px 8px;
}

.titlebar-clock {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--foam-dim);
}

.titlebar-sound {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--foam-dim);
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: 1;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.titlebar-sound:hover,
.titlebar-sound:focus-visible {
  color: var(--mint-bright);
  background: var(--mint-faint);
}

.titlebar-sound[aria-pressed="true"] {
  color: var(--mint);
}

/* ---------- boot screen ---------- */
/* Ships hidden ([hidden] attribute); shell.js reveals it once per
   session and removes it. Broken shell.js = no boot, working app. */

.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--abyss);
  cursor: pointer;
}

.boot-screen[hidden] {
  display: none;
}

.boot-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-8);
  border: 1px solid var(--mint-dim);
  background: var(--well);
  min-width: min(440px, 86vw);
}

.boot-logo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: 0.16em;
  color: var(--mint);
  text-shadow: var(--lamp-glow);
}

.boot-lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--foam-dim);
}

.boot-lines span {
  opacity: 0;
  animation: boot-line-in 240ms steps(2, end) forwards;
}

.boot-lines span:nth-child(1) { animation-delay: 120ms; }
.boot-lines span:nth-child(2) { animation-delay: 420ms; }
.boot-lines span:nth-child(3) { animation-delay: 760ms; }
.boot-lines span:nth-child(4) { animation-delay: 1150ms; }

.boot-skip {
  appearance: none;
  background: transparent;
  border: 1px solid var(--mint-dim);
  color: var(--foam-dim);
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  letter-spacing: 0.12em;
  padding: 6px 12px;
  cursor: pointer;
  animation: boot-blink 1.2s steps(2, end) infinite;
}

@keyframes boot-line-in {
  to { opacity: 1; }
}

@keyframes boot-blink {
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-lines span {
    animation: none;
    opacity: 1;
  }
  .boot-skip {
    animation: none;
  }
}