/* ════════════════════════════════════════════════════════════════════════
   Shared simulator theme.

   The simulators are iframes, so they cannot inherit the site's design tokens
   through the cascade. This file restates them and maps them onto the variable
   names the 47 simulator pages already use, so the panels inside an iframe
   match the page around it without rewriting each simulator.

   Linked after each page's inline <style>, so it wins on equal specificity.
   ════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600;700&family=JetBrains+Mono:wght@400;600&family=Rajdhani:wght@600;700&family=Share+Tech+Mono&display=swap');

:root {
  /* Site tokens, restated for the iframe. */
  --tm-bg: #05080d;
  --tm-surface-1: #080d13;
  --tm-surface-2: #0b1118;
  --tm-surface-3: #0d151e;
  --tm-text-strong: #effbff;
  --tm-text: rgba(221, 241, 249, 0.82);
  --tm-text-muted: rgba(203, 230, 241, 0.5);
  --tm-accent: #22d3ee;
  --tm-blue: #38bdf8;
  --tm-success: #4ade80;
  --tm-warn: #fbbf24;
  --tm-danger: #f87171;
  --tm-border: rgba(34, 211, 238, 0.16);
  --tm-border-quiet: rgba(156, 175, 194, 0.18);
  --tm-r-sm: 8px;
  --tm-r-md: 12px;

  /* Remap the simulators' own names onto the tokens. */
  --bg: var(--tm-bg);
  --panel: var(--tm-surface-2);
  --panel-2: var(--tm-surface-1);
  --text: var(--tm-text-strong);
  --accent: var(--tm-blue);
  --accent-2: var(--tm-accent);
  --border: var(--tm-border);
  --orange: var(--tm-accent);
  --good: var(--tm-success);
  --warn: var(--tm-warn);
  --danger: var(--tm-danger);
}

body {
  font-family: 'Exo 2', 'Segoe UI', sans-serif;
  color: var(--tm-text);
}

/* Panel chrome, brought in line with the site's cards. */
#left-panel { background: var(--tm-surface-1); }

.panel-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--tm-border);
  background: var(--tm-bg);
}

.panel-header-title {
  color: var(--tm-text-strong);
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.panel-header-sub {
  color: var(--tm-text-muted);
  font-size: 0.8rem;
}

.challenge-card {
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-r-md);
  background: var(--tm-surface-2);
}

.challenge-header {
  background: var(--tm-surface-3);
  color: var(--tm-accent);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.challenge-body { color: var(--tm-text); }

.challenge-body .task {
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-r-sm);
  background: var(--tm-bg);
  color: var(--tm-text);
  font-family: 'JetBrains Mono', monospace;
}

/* Requirement checks read as state, in the site's semantic colours. */
.req .check.pass {
  background: rgba(74, 222, 128, 0.14);
  color: var(--tm-success);
}

.req .check.fail {
  background: rgba(156, 175, 194, 0.12);
  color: var(--tm-text-muted);
}

.success-banner {
  border: 1px solid rgba(74, 222, 128, 0.45);
  border-radius: var(--tm-r-md);
  background: rgba(74, 222, 128, 0.1);
  color: var(--tm-success);
}

/* Buttons match the site's control vocabulary. */
button,
.btn {
  border-radius: var(--tm-r-sm);
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 0.05em;
  transition: background 0.18s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scrollbars, thinned and neutralised as on the site. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--tm-border-quiet) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }

*::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: var(--tm-border-quiet);
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--tm-text-muted);
  background-clip: content-box;
}

/* Focus, consistent with the site. */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--tm-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  button, .btn { transition: none; }
}

/* ── Run controls ────────────────────────────────────────────────────────
   The transport buttons were saturated fills. Kept semantic, since run and
   stop genuinely are, but moved onto the site's softer pair and given the
   outline treatment used elsewhere, so they read as controls not alarms. */
.btn-run, .btn-stop, .btn-reset {
  border: 1px solid transparent;
  font-weight: 600;
  white-space: nowrap;
}

.btn-run {
  border-color: rgba(74, 222, 128, 0.5);
  background: rgba(74, 222, 128, 0.16);
  color: var(--tm-success);
}

.btn-run:hover { background: rgba(74, 222, 128, 0.26); }

.btn-stop {
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.14);
  color: var(--tm-danger);
}

.btn-stop:hover { background: rgba(248, 113, 113, 0.24); }

.btn-reset {
  border-color: var(--tm-border-quiet);
  background: transparent;
  color: var(--tm-text-muted);
}

.btn-reset:hover { border-color: var(--tm-border); color: var(--tm-text-strong); }