/* ─────────────────────────────────────────────────────────────────────────
   "45 days" visual story (/stories/45-days) — page-isolated styles.
   Loaded ONLY by story_delays.html. Uses theme.css tokens so both themes
   work. Pixel font is for word-only labels; every numeral renders in Anton
   or IBM Plex Mono (Press Start 2P digits are ambiguous — see index.html).
   All measured geometry is in CSS px set server-side, so browser zoom and
   orientation changes scale every length together.
   ──────────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.st{background:var(--page-bg);background-color:var(--bg);color:var(--fg);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:15px;line-height:1.6;
  -webkit-text-size-adjust:100%}
.st a{color:var(--red);text-underline-offset:3px}
.st a:focus-visible,.st button:focus-visible,.st summary:focus-visible,
.tl-scroll:focus-visible,.tl-end:focus-visible,.tl-canvas:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.st-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.st-skip{position:absolute;left:8px;top:-60px;background:var(--red);color:var(--on-red)!important;
  padding:8px 12px;z-index:10;font-weight:700;text-decoration:none}
.st-skip:focus{top:8px}

.st-head{display:flex;justify-content:space-between;align-items:center;max-width:860px;
  margin:0 auto;padding:14px 18px;border-bottom:2px solid var(--px-edge)}
.st-brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--fg)!important;
  font-family:var(--pixel-font);font-size:11px;letter-spacing:.04em}
.st-brand img{image-rendering:pixelated}

.st-main{max-width:860px;margin:0 auto;padding:0 18px 40px}
.st-hero{padding:34px 0 10px}
.st-kicker,.st-chkick,.st-ex-tag,.scene-h,.rule-h,.st-figcap,.st-key-label,.tl-mini-label{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-muted);font-weight:600;margin:0 0 8px}
.st-kicker{font-family:var(--pixel-font);font-size:10px;letter-spacing:.08em;color:var(--gold)}
.st-title{font-family:"Archivo",system-ui,sans-serif;font-weight:800;font-size:clamp(28px,6.4vw,50px);
  line-height:1.05;letter-spacing:-.01em;margin:0 0 16px}
.st-num,.st-chkick .n,.st-chapters .n,.st-glance dd,.st-ex-big b{font-family:"Anton",Impact,sans-serif;font-weight:400;letter-spacing:.02em}
.st-num{color:var(--red);font-size:1.15em}
.st-deck{font-size:16px;color:var(--fg-dim);max-width:68ch;margin:0 0 20px}

.st-chapters ol{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.st-chapters a{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;min-height:40px;
  border:2px solid var(--line-strong);box-shadow:2px 2px 0 var(--px-shadow);
  color:var(--fg)!important;text-decoration:none;font-size:13px;font-weight:600}
.st-chapters a:hover{border-color:var(--red)}
.st-chapters .n{color:var(--red);font-size:17px}

.st-glance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
@media(min-width:760px){.st-glance{grid-template-columns:repeat(4,minmax(0,1fr))}}
.st-glance div{border:2px solid var(--px-edge);background:var(--surface-2);padding:10px 12px;
  box-shadow:3px 3px 0 var(--px-shadow)}
.st-glance dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted);font-weight:600}
.st-glance dd{margin:4px 0 0;font-size:28px;line-height:1.1;color:var(--fg)}
.st-glance small{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--fg-muted)}

.st-chapter{padding:44px 0 8px;border-top:2px dashed var(--px-edge);margin-top:34px;scroll-margin-top:12px}
.st-chkick{display:flex;align-items:center;gap:10px}
.st-chkick .n{font-size:26px;color:var(--red);letter-spacing:0}
.st-h2{font-family:"Archivo",system-ui,sans-serif;font-weight:800;font-size:clamp(22px,4.4vw,32px);
  line-height:1.15;margin:0 0 14px}
.st-h3{font-family:"Archivo",system-ui,sans-serif;font-weight:800;font-size:18px;margin:0 0 10px}
.st-chapter p{max-width:70ch}
.st-note{color:var(--fg-muted);font-size:13.5px}
.st-suppressed{align-self:start;border-left:4px solid var(--amber);padding:8px 12px;background:var(--surface-2);font-size:14px}

.st-key{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:18px 0 6px}
.st-key-label{margin:0}
.st-key-bar{display:inline-block;height:14px;background:var(--fg-faint);border:1px solid var(--px-dark)}
.st-key-text{font-size:13px;color:var(--fg-dim)}

/* ---- example cards ---- */
.st-examples{display:grid;gap:14px;margin:18px 0}
@media(min-width:760px){.st-examples{grid-template-columns:1fr 1fr}}
.st-ex{border:2px solid var(--px-edge);background:var(--surface-2);padding:14px 16px;box-shadow:4px 4px 0 var(--px-shadow)}
.st-ex-max{border-color:var(--red)}
.st-ex-max .st-ex-tag{color:var(--red)}
.st-ex-name{font-family:"Archivo",system-ui,sans-serif;font-size:19px;margin:0 0 6px}
.st-ex-meta{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--fg-muted);font-weight:500}
.st-ex-big{margin:0 0 8px}
.st-ex-big b{font-size:34px;color:var(--red);margin-right:4px}
.st-ex-sub{color:var(--fg-muted);font-size:13px}
.st-ex-dl{margin:0 0 8px;font-size:13px}
.st-ex-dl div{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:4px 0}
.st-ex-dl dt{color:var(--fg-muted)}
.st-ex-dl dd{margin:0;text-align:right;font-weight:600}
.st-ex-note{font-size:12.5px;color:var(--fg-muted)}
.st-ex-src{font-size:13px;margin:6px 0 0}

/* ---- timeline ---- */
.tl{margin:22px 0 0}
.tl-mini{position:relative;border:2px solid var(--px-edge);padding:8px 8px 6px;margin:0 0 10px;background:var(--surface-3)}
.tl-mini-label{display:block;font-size:10px;margin:0 0 6px}
.tl-mini-row{display:flex;height:6px;margin:0 0 4px}
.tl-mini-ok{background:var(--fg-faint)}
.tl-mini-late{background:var(--red)}
.tl-mini-win{display:none}
.js .tl-mini-win[hidden]{display:none}
.js .tl-mini-win{display:block;position:absolute;top:24px;bottom:4px;left:0;width:10%;
  border:2px solid var(--gold);pointer-events:none}

.tl-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 8px}
.tl-readout{font-size:13px;color:var(--fg-dim);font-variant-numeric:tabular-nums}
.st-btn{display:inline-flex;align-items:center;min-height:42px;padding:8px 14px;
  border:2px solid var(--line-strong);box-shadow:3px 3px 0 var(--px-shadow);
  color:var(--fg)!important;text-decoration:none;font-weight:700;font-size:14px;background:var(--surface-2)}
.st-btn:hover{border-color:var(--red)}
.st-btn-primary{background:var(--red);border-color:var(--px-dark);color:var(--on-red)!important}

.tl-scroll{overflow-x:auto;overflow-y:hidden;border:2px solid var(--px-edge);background:var(--bg);
  overscroll-behavior-x:contain;scroll-behavior:auto;padding:0 0 6px}
.tl-canvas{position:relative;margin:0 24px 0 16px;padding:40px 0 30px;min-height:100px}
.tl-canvas:focus{outline:none}
.tl-ruler{position:absolute;left:0;right:0;top:0;height:30px;
  background-image:
    linear-gradient(to right,var(--fg-muted) 0 1px,transparent 1px),
    linear-gradient(to right,var(--fg-faint) 0 1px,transparent 1px);
  background-size:var(--step) 12px,var(--minor) 6px;
  background-repeat:repeat-x;background-position:0 100%,0 100%;
  border-bottom:1px solid var(--fg-muted)}
.tl-tick{position:absolute;top:2px;transform:translateX(-50%);font-size:11px;color:var(--fg-dim);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.tl-tick:first-child{transform:none}
.tl-unit{position:sticky;left:0;display:none}
.tl-deadline{position:absolute;top:30px;bottom:0;width:0;border-left:2px dashed var(--gold);z-index:1}
.tl-deadline span{position:absolute;left:4px;bottom:2px;font-size:11px;color:var(--gold);white-space:nowrap;font-weight:700}
.tl-lane{position:relative;padding:22px 0 26px}
.tl-lane-label{position:sticky;left:4px;display:inline-block;font-size:12px;font-weight:700;
  background:var(--bg);padding:0 6px;margin:0 0 4px;white-space:nowrap}
.tl-lane-max .tl-lane-label{color:var(--red)}
.tl-bar{display:flex;height:18px}
.tl-ok{background:var(--fg-faint);flex:none}
.tl-late{background:var(--red);flex:none;
  background-image:repeating-linear-gradient(to right,transparent 0 39px,rgba(0,0,0,.18) 39px 40px)}
.tl-trade,.tl-end{position:absolute;bottom:4px;font-size:11px;white-space:nowrap;color:var(--fg-dim)}
.tl-end{transform:translateX(-100%);color:var(--fg);font-weight:700;padding-right:2px}
.tl-end::after{content:"";position:absolute;right:-1px;bottom:18px;height:30px;border-right:2px solid var(--fg)}
.tl-back{position:absolute;bottom:6px;transform:translateX(-100%);font-size:12px;white-space:nowrap}
.tl-lane + .tl-back{margin-top:4px}

/* ---- distribution ---- */
.st-cohort,.st-observed{font-size:14px}
.dist{margin:16px 0 8px}
.dist-svg{width:100%;height:auto;display:block;border:2px solid var(--px-edge);background:var(--surface-3)}
.dist-svg text{font-family:"IBM Plex Mono",monospace;font-size:11px;fill:var(--fg-dim)}
.dist-svg .dist-xtitle,.dist-svg .dist-ytitle{fill:var(--fg-muted)}
.dist-grid{stroke:var(--line);stroke-width:1}
.dist-axis{stroke:var(--fg-muted);stroke-width:1.5}
.dist-bar{fill:var(--red);stroke:var(--px-dark);stroke-width:1}
.dist-present{fill:var(--fg-muted)}
.dist-med{stroke:var(--gold);stroke-width:2;stroke-dasharray:5 3}
.dist-max{stroke:var(--fg);stroke-width:2}
.dist-svg .dist-medlab{fill:var(--gold);font-weight:700}
.dist-svg .dist-maxlab{fill:var(--fg);font-weight:700}
.st-table{margin:8px 0 0;border:2px solid var(--px-edge);padding:8px 12px}
.st-table summary{cursor:pointer;font-weight:700}
.st-table table{border-collapse:collapse;width:100%;margin:8px 0 4px;font-size:13px;font-variant-numeric:tabular-nums}
.st-table th,.st-table td{text-align:left;padding:4px 6px;border-bottom:1px solid var(--line)}
.st-table .num{text-align:right}

/* ---- accumulation ---- */
.st-switch{border:2px solid var(--px-edge);padding:10px 12px;background:var(--surface-2);font-size:14px}
.st-overlap{font-family:"Archivo",system-ui,sans-serif;font-weight:800;font-size:clamp(18px,3.6vw,24px);
  line-height:1.3;border-left:6px solid var(--red);padding:6px 0 6px 14px;margin:20px 0}
.scenes{list-style:none;margin:0;padding:0;display:grid;gap:30px}
.scene{border-top:1px solid var(--line);padding-top:18px}
.st-leader-rank{color:var(--red);font-size:13px;letter-spacing:.08em}
.st-leader-basis{display:block;margin-top:4px;color:var(--fg-muted);font-size:11px}
.st-leader{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:22px;margin:16px 0 20px}
.st-leader-portrait{flex:0 0 120px;width:120px;height:144px;border:2px solid var(--px-edge);
  background:var(--surface-2);box-shadow:4px 4px 0 var(--px-shadow)}
.st-leader-portrait img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.st-leader-no-portrait{height:100%;display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:12px;color:var(--fg-muted)}
.st-leader-portrait [hidden]{display:none}
.st-leader-identity{min-width:0}
.st-leader-name{font-family:"Anton",Impact,sans-serif;font-size:clamp(30px,5.5vw,48px);
  font-weight:400;line-height:1.12;letter-spacing:.02em;text-transform:uppercase;
  overflow-wrap:anywhere;margin:0}
.st-leader-name a{text-decoration:none}
.st-leader-name a:hover{text-decoration:underline;text-decoration-thickness:2px}
.st-leader-meta{font-size:13px;color:var(--fg-muted);margin:8px 0 0}
.st-reaction{grid-column:1/-1;width:240px;max-width:100%;margin:0}
.st-reaction img{display:block;width:100%;height:auto;border:2px solid var(--px-edge);
  box-shadow:3px 3px 0 var(--px-shadow)}
.st-reaction figcaption{font-size:11px;color:var(--fg-muted);margin:7px 0}
.st-reaction .st-reaction-toggle{font:inherit;font-size:12px;min-height:36px;padding:5px 10px;cursor:pointer}
.st-reaction [hidden]{display:none}
@media(min-width:720px){
  .st-leader{grid-template-columns:120px minmax(0,1fr) 240px}
  .st-reaction{grid-column:auto}
}
@media(max-width:480px){
  .st-leader{gap:16px;grid-template-columns:88px minmax(0,1fr)}
  .st-leader-portrait{flex-basis:88px;width:88px;height:106px}
}
.scene-unit{display:flex;gap:14px;align-items:flex-start}
.scene-unit p{margin:0}
.tile-one{flex:none;display:inline-block;background:var(--red);margin-top:6px;outline:6px solid var(--surface-2)}
.tiles-wrap{margin:12px 0;padding:10px;background:var(--bg);border:2px solid var(--px-edge);overflow-x:auto}
.tiles-set-c50{display:none}
@media(min-width:720px){.tiles-set-c25{display:none}.tiles-set-c50{display:block}}
.tiles,.tiles-stack{position:relative}
.tiles-stack .tiles{position:absolute;left:0;top:0}
.tile-blk,.tile-frac{position:absolute}
.tile-blk{background-color:var(--tile-c);
  background-image:linear-gradient(to right,transparent 10px,var(--bg) 10px),
                   linear-gradient(to bottom,transparent 10px,var(--bg) 10px);
  background-size:12px 12px}
.tile-frac{background:var(--tile-c)}
.tiles-base{--tile-c:var(--fg-faint)}
.tiles-hl{--tile-c:var(--red)}
.tiles-legend{font-size:12.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lg{display:inline-block;width:12px;height:12px}
.lg-hl{background:var(--red)}
.lg-base{background:var(--fg-faint);margin-left:8px}
.rule{border:2px dashed var(--px-edge);padding:10px 14px;font-size:14px}
.rule p{margin:0 0 6px}
.scale-change{border:2px solid var(--gold);padding:8px 12px;font-size:14px}

.st-next .st-actions{display:flex;flex-wrap:wrap;gap:12px}
.st-caveats{margin-top:40px;border-top:2px solid var(--px-edge);padding-top:18px;font-size:13px;color:var(--fg-dim)}
.st-caveats ul{padding-left:20px}
.st-caveats li{margin:0 0 6px}
.st-foot{max-width:860px;margin:0 auto;padding:18px;border-top:1px solid var(--line);font-size:12px;color:var(--fg-muted)}
.st-foot a{color:var(--fg-muted)}

/* Light theme contrast tweaks: faint tiles need more ink on cream. */
:root[data-theme="light"] .tiles-base{--tile-c:#9d968a}
:root[data-theme="light"] .tl-ok,:root[data-theme="light"] .st-key-bar,:root[data-theme="light"] .tl-mini-ok{background:#9d968a}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}