/* Shared by every story page (public/stories/*.html).
   Layout: one continuous zoomable canvas (the machine room), with a caption strip,
   and a sidebar holding the incident clock, live readouts and kubectl evidence. */
:root {
  color-scheme: dark;
  --soot: #171613;
  --iron: #2e2c28;
  --iron-hi: #45423c;
  --bone: #e9e2d2;
  --bone-dim: #a39d90;
  --hazard: #f2a900;
  --alarm: #d9432c;
  --patina: #86a98f;
  --panel: rgba(23, 22, 19, 0.92);
  --stencil: "Barlow Condensed", "Arial Narrow", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
}
html, body { height: 100%; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--soot); color: var(--bone); font-family: var(--sans); overflow: hidden; }
#app > * { min-width: 0; }
#app { height: 100%; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 32vw, 480px); grid-template-rows: minmax(0, 1fr) auto auto; }
#scene { position: relative; grid-column: 1; grid-row: 1; min-height: 0; overflow: hidden; }
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.eyebrow { font-family: var(--stencil); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; color: var(--bone-dim); }
#chap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#chapTitle { margin: 0; font-family: var(--stencil); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(22px, 2.2vw, 30px); line-height: 1; text-wrap: balance; }

#caption { grid-column: 1; grid-row: 2; padding: 10px 16px 12px; border-top: 1px solid var(--iron); min-height: 5.6em; }
#capText { margin: 0; max-width: 68ch; border-left: 3px solid var(--hazard); padding: 2px 0 2px 14px; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.5; }
#capText code { font-family: var(--mono); font-size: 0.9em; color: var(--hazard); }

#side { grid-column: 2; grid-row: 1 / span 2; border-left: 1px solid var(--iron); padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; min-width: 0; overflow-y: auto; }
#clock { font-family: var(--mono); display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--iron); padding-top: 10px; }
#clockVal { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
#clockRate { font-size: 11px; color: var(--bone-dim); }
#clockRate.slow, #clockRate.fast { color: var(--hazard); }

#readouts { border-top: 1px solid var(--iron); padding-top: 10px; font-family: var(--mono); font-size: 12px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
#readouts .eyebrow { grid-column: 1 / -1; margin-bottom: 2px; }
#readouts .k { color: var(--bone-dim); }
#readouts .v { text-align: right; font-variant-numeric: tabular-nums; }
.bad { color: var(--alarm); }
.warn { color: var(--hazard); }
.ok { color: var(--patina); }

#panel { border-top: 1px solid var(--iron); padding-top: 10px; min-width: 0; }
#panel pre { margin: 6px 0 0; font-family: var(--mono); font-size: 10.5px; line-height: 1.5; overflow-x: auto; white-space: pre; padding-bottom: 6px; }
#panelNote { margin: 8px 0 0; font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--bone); white-space: pre-wrap; overflow-wrap: anywhere; border-left: 2px solid var(--alarm); padding-left: 8px; }
#alert { background: var(--alarm); color: var(--soot); font-family: var(--mono); font-size: 12px; font-weight: 600; padding: 8px 10px; line-height: 1.4; }
#legend { margin-top: auto; border-top: 1px solid var(--iron); padding-top: 10px; display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; align-items: center; font-size: 12px; color: var(--bone-dim); }
#legend i { display: inline-block; width: 10px; height: 10px; }

#controls { grid-column: 1 / -1; grid-row: 3; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--iron); background: var(--soot); display: flex; align-items: center; gap: 10px; }
#controls button { background: var(--iron); color: var(--bone); border: 1px solid var(--iron-hi); font-family: var(--stencil); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 14px; height: 36px; min-width: 40px; padding: 0 10px; cursor: pointer; }
#controls button:hover { border-color: var(--bone-dim); }
#controls button:focus-visible, #menuBtn:focus-visible, #menuList a:focus-visible, #scrub:focus-visible, #startBtn:focus-visible { outline: 2px solid var(--hazard); outline-offset: 2px; }
#play { min-width: 76px !important; background: var(--hazard) !important; color: var(--soot) !important; border-color: var(--hazard) !important; }
#track { position: relative; flex: 1; min-width: 0; height: 36px; display: flex; align-items: center; }
#scrub { width: 100%; accent-color: var(--hazard); margin: 0; }
#ticks { position: absolute; left: 0; right: 0; top: 2px; height: 8px; pointer-events: none; }
#ticks span { position: absolute; top: 0; width: 1px; height: 8px; background: var(--bone-dim); }
#time { font-family: var(--mono); font-size: 12px; color: var(--bone-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }

#intro { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(23, 22, 19, 0.78); }
#introCard { width: min(1040px, 100%); max-height: 100%; overflow-y: auto; background: var(--soot); border: 1px solid var(--iron-hi); border-top: 4px solid var(--hazard); padding: 22px 26px 20px; display: flex; flex-direction: column; gap: 14px; }
#introCard h2 { margin: 0; font-family: var(--stencil); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(26px, 3.6vw, 40px); line-height: 0.95; text-wrap: balance; }
#introCard p { margin: 0; line-height: 1.5; max-width: 60ch; font-size: 15px; }
#introCard .lede { color: var(--bone); }
#introCard .lede + p { color: var(--bone-dim); }
.introBody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 32px; align-items: start; }
.introBody > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#introCard h3 { margin: 0 0 2px; font-family: var(--stencil); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 13px; color: var(--hazard); }
#introCard ol { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 6px; line-height: 1.45; font-size: 15px; }
#introCard ol li::marker { font-family: var(--mono); color: var(--bone-dim); }
#introCard code { font-family: var(--mono); font-size: 0.9em; color: var(--hazard); }
.howto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.howto div { border-top: 1px solid var(--iron-hi); padding-top: 8px; font-size: 13px; line-height: 1.45; color: var(--bone-dim); }
.howto b { display: block; font-family: var(--stencil); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px; color: var(--bone); margin-bottom: 2px; }
.introFoot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
#startBtn { background: var(--hazard); color: var(--soot); border: 0; font-family: var(--stencil); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 18px; padding: 10px 24px; cursor: pointer; }
.introFoot .keys { font-family: var(--mono); font-size: 11px; color: var(--bone-dim); }
@media (max-width: 820px) { .introBody { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .howto { grid-template-columns: minmax(0, 1fr); } #introCard { padding: 18px 18px; } }
@media (max-height: 640px) { #introCard { gap: 10px; padding-block: 16px; } #introCard p, #introCard ol { font-size: 14px; } .howto div { font-size: 12px; } }

#menu { position: relative; z-index: 5; flex: none; }
.sideHead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
#menuBtn { background: var(--iron); color: var(--bone); border: 1px solid var(--iron-hi); font-family: var(--stencil); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 14px; height: 34px; padding: 0 12px; cursor: pointer; }
#menuBtn:hover { border-color: var(--bone-dim); }
#menuList { position: absolute; right: 0; top: 40px; width: min(320px, calc(100vw - 32px)); background: var(--iron); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
#menuList h3 { margin: 10px 6px 4px; font-family: var(--stencil); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; color: var(--bone-dim); }
#menuList h3:first-child { margin-top: 4px; }
#menuList a, #menuList .here { display: flex; flex-direction: column; gap: 2px; padding: 7px 8px; color: var(--bone); text-decoration: none; font-family: var(--mono); font-size: 13px; }
#menuList a:hover { background: rgba(0, 0, 0, 0.25); }
#menuList em { font-style: normal; color: var(--bone-dim); font-size: 11px; line-height: 1.4; }
#menuList .here { background: rgba(0, 0, 0, 0.25); }
.menuError { padding: 7px 8px; color: var(--alarm); font-size: 12px; }

@media (max-width: 900px) {
  #app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto minmax(0, 32vh) auto; }
  #caption { grid-row: 2; min-height: 0; }
  #side { grid-column: 1; grid-row: 3; border-left: 0; border-top: 1px solid var(--iron); gap: 10px; }
  #legend { display: none; }
  #menu { position: fixed; top: 12px; right: 16px; }
  #clockVal { font-size: 17px; }
  #controls { grid-row: 4; }
  #time, #speed { display: none; }
}