/* The Apollo 11 1202 alarm — Margaret Hamilton's priority executive, made visible.
   During the landing a misconfigured rendezvous radar flooded the guidance computer
   with work it should not have had. A naive scheduler tries to do everything, falls
   behind on the one task that matters, and freezes. Hamilton's software scheduled by
   priority and could restart: under overload it shed the low-priority jobs and kept
   the landing-critical guidance task running. Toggle the scheduler, trigger the
   overload, and watch one fail while the other keeps flying. Vanilla JS, no deps.
   Palette shared with siblings: green = the critical task running / success, cyan =
   the alarm + shed work, neutral otherwise. No red. */

#priority-scheduler {
  --ps-ok: #30d158;
  --ps-alarm: #5ac8fa;
  font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  background: var(--color-bg-elevated, #111111);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px; padding: clamp(16px, 3vw, 26px); margin: 2.5rem 0;
  color: var(--color-text-primary, #ffffff);
}
.ps-title { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
.ps-explain { font-size: 0.9rem; line-height: 1.55; margin: 8px 0 16px; color: var(--color-text-secondary, rgba(255,255,255,0.7)); }

.ps-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 18px; }
.ps-modes { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--color-bg-surface, #1a1a1a); }
.ps-mode { appearance: none; cursor: pointer; font: inherit; font-size: 0.82rem; font-weight: 600; border: 0; background: transparent; color: var(--color-text-secondary, rgba(255,255,255,0.55)); padding: 7px 13px; border-radius: 7px; transition: color 0.18s, background 0.18s; }
.ps-mode:hover { color: #fff; }
.ps-mode.is-on { color: #0b0b0b; background: var(--color-accent, #fff); }
.ps-overload { appearance: none; cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 650; border: 1px solid var(--ps-alarm); background: transparent; color: var(--ps-alarm); padding: 7px 13px; border-radius: 8px; transition: background 0.18s, color 0.18s; }
.ps-overload.on { background: var(--ps-alarm); color: #07121a; }

.ps-cpu-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-tertiary, rgba(255,255,255,0.45)); margin-bottom: 7px; }
.ps-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ps-slot { height: 56px; border-radius: 10px; border: 1px dashed var(--color-border-subtle, rgba(255,255,255,0.14)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: rgba(255,255,255,0.02); }
.ps-slot.filled { border-style: solid; }
.ps-slot.crit { border-color: var(--ps-ok); background: rgba(48,209,88,0.12); }
.ps-slot.norm { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.05); }
.ps-slot.low { border-color: var(--ps-alarm); background: rgba(90,200,250,0.08); }
.ps-job { font-family: var(--font-mono, monospace); font-size: 0.78rem; font-weight: 650; color: #fff; }
.ps-pri { font-size: 0.6rem; color: var(--color-text-tertiary, rgba(255,255,255,0.5)); }

.ps-shed { margin-top: 14px; }
.ps-shed-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ps-chip { font-family: var(--font-mono, monospace); font-size: 0.74rem; padding: 4px 9px; border-radius: 999px; background: var(--color-bg-surface, #1a1a1a); border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.1)); color: var(--color-text-tertiary, rgba(255,255,255,0.5)); }
.ps-chip.dropped-crit { color: var(--ps-alarm); border-color: var(--ps-alarm); }

.ps-banner { margin-top: 16px; padding: 12px 14px; border-radius: 10px; font-size: 0.92rem; font-weight: 600; line-height: 1.45; }
.ps-banner.ok { background: rgba(48,209,88,0.12); border: 1px solid var(--ps-ok); color: var(--ps-ok); }
.ps-banner.alarm { background: rgba(90,200,250,0.10); border: 1px solid var(--ps-alarm); color: var(--ps-alarm); }
.ps-banner.fail { background: rgba(90,200,250,0.06); border: 1px solid var(--ps-alarm); color: #fff; }

.ps-caption { margin-top: 12px; font-size: 0.9rem; line-height: 1.55; color: var(--color-text-secondary, rgba(255,255,255,0.78)); min-height: 2.6em; }
.ps-caption b { color: #fff; }
.ps-caption .ps-hl { color: var(--ps-ok); font-weight: 650; }
.ps-caption .ps-lo { color: var(--ps-alarm); font-weight: 650; }
.ps-noscript { font-size: 0.9rem; color: var(--color-text-secondary, rgba(255,255,255,0.65)); line-height: 1.6; }