/* Hormuz 2026: additions to the Black Sea stylesheet (css/app.css, unchanged) */
:root{--cf:#ff4b3a;--sg:#ffb020;--cl:#9aa7b3}
#title h1{font-size:24px}
/* the satellite-pass bar: Watch Jan → Oct (main), date, counts, slider, three key dates */
#hud{position:fixed;left:16px;bottom:calc(var(--credh) + 66px);z-index:7;width:min(520px,calc(100vw - 480px));background:rgba(5,8,12,.86);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#hud.on{display:block}
#hud .hrow{display:flex;align-items:center;gap:12px}
#hud .hd{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#a8d8ff;font-weight:650}
#hud button{border:0;color:var(--ink);cursor:pointer;font-family:inherit}
#hud button.primary{background:#ffd48a;color:#141008;font-weight:700;height:38px;padding:0 18px;border-radius:999px;font-size:14px;box-shadow:0 4px 18px rgba(255,212,138,.25);flex:none}
#hud button.primary:hover{background:#ffe1a8}
#hud .hc{display:flex;gap:16px;flex-wrap:wrap;margin:8px 0 4px}
#hud .hc div{display:flex;flex-direction:column}
#hud .hc b{font-size:22px;font-weight:700;color:#fff;line-height:1.05;font-variant-numeric:tabular-nums}
#hud .hc span{font-size:11px;color:var(--ink2)}
#hud .hc i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:1px}
#hud input{width:100%;accent-color:#7cc4ff;margin:2px 0 6px}
#hud .hk{display:flex;gap:6px;flex-wrap:wrap}
#hud .hk button{background:rgba(255,255,255,.06);height:28px;padding:0 10px;font-size:11.5px;border-radius:999px}
#hud .hk button.on{background:rgba(124,196,255,.3)}
#hud .hmini{display:none}
/* the big date on the map while passes play */
#bigdate{position:fixed;left:calc((100vw - 440px) / 2);top:22%;transform:translateX(-50%);z-index:6;text-align:center;pointer-events:none;opacity:0;transition:opacity .4s}
#bigdate.on{opacity:1}
#bigdate b{display:block;font-size:46px;font-weight:750;color:#fff;letter-spacing:-.01em;text-shadow:0 3px 24px rgba(0,0,0,.85)}
#bigdate span{display:block;font-size:20px;font-weight:650;color:#ffd48a;text-shadow:0 2px 14px rgba(0,0,0,.9)}
/* map tooltip (stop 5 labels show on hover only) */
#tip{position:fixed;z-index:30;display:none;pointer-events:none;background:#0b1118;border:1px solid rgba(160,190,215,.35);border-radius:8px;padding:6px 9px;font-size:12.5px;color:#e8eef3;max-width:260px;line-height:1.4}
/* charts: two small panels, each with its own axis */
.chart{margin:8px 0 4px}
.chart svg{width:100%;height:auto;display:block}
.chart .ct{font-size:11.5px;color:var(--ink);font-weight:600;margin:6px 0 0}
.chart .lg{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:11.5px;color:var(--ink2);margin:2px 0}
.chart .lg span{display:inline-flex;align-items:center;gap:5px}
.chart .lg i{display:inline-block;width:16px;height:3px;border-radius:2px}
.chart .cap{font-size:11px;color:var(--ink3);line-height:1.4;margin-top:2px}
/* big comparisons */
.big{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.big div{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.big b{display:block;font-size:24px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.big span{font-size:11.5px;color:var(--ink2);line-height:1.3;display:block}
.big div.now b{color:#ffd48a}
.hw{font-size:12.5px}
/* who depends */
.dep{padding:8px 0;border-bottom:1px solid var(--line)}
.dep .c{font-weight:650;font-size:13.5px}
.dep .r{display:grid;grid-template-columns:76px 1fr 54px;gap:8px;align-items:center;font-size:11.5px;color:var(--ink2);margin:4px 0}
.dep .t{height:8px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden}
.dep .t span{display:block;height:100%;border-radius:4px;background:#ff9f43}
.dep .t.fe span{background:#c084fc}
.dep .n{text-align:right;color:#fff;font-variant-numeric:tabular-nums}
.dep .x{font-size:11.5px;color:var(--ink2);line-height:1.4;margin-top:3px}
.dep.price .c::after{content:' · price only, no trade data';font-weight:500;color:var(--ink3);font-size:11.5px}
.origin{font-size:12.5px;color:#ffd48a;border:1px solid rgba(255,212,138,.35);border-radius:10px;padding:8px 10px;margin:8px 0;line-height:1.45}
/* events */
.ev.confirmed:before{background:var(--cf)} .ev.single:before{background:var(--sg)} .ev.claim:before{background:var(--cl)}
.evf{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 8px;align-items:center}
.evf .lb{font-size:11px;color:var(--ink3);text-transform:uppercase;letter-spacing:.08em;margin-right:2px}
.evf button{border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink2);border-radius:999px;padding:5px 11px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:inherit}
.evf button i{width:9px;height:9px;border-radius:50%;display:inline-block}
.evf button.on{background:rgba(124,196,255,.18);color:var(--ink);border-color:rgba(124,196,255,.5)}
.evf button[aria-pressed="false"]{opacity:.5}
.limits li{font-size:13px;line-height:1.5;margin:0 0 6px}
.limits{padding-left:18px;margin:6px 0}
#legend .lgi{display:flex;align-items:center;gap:8px;margin:3px 0}
#legend .lgi i{width:10px;height:10px;border-radius:50%;flex:none}
#legend .lgi i.ring{background:transparent!important;border:2px solid}
#legend .lgi i.ghost{background:transparent!important;border:1.8px solid #ff6b8b}
#legend .lgi i.sq{border-radius:2px}
#legend .lgi i.s1{width:5px;height:5px;margin:0 2.5px}
#legend .lgi i.s2{width:8px;height:8px;margin:0 1px}
#legend .lgi i.s3{width:12px;height:12px;margin:0 -1px}
#legend .lh{margin-top:6px}
@media (max-width:820px){
  #title h1{font-size:16px}
  /* the sheet takes at most 40% of the height; the tour buttons live inside it, so nothing sits on the map but the one-line pass bar */
  #panel{height:40vh;bottom:26px}
  #panel .ph{padding:10px 14px 8px}
  #panel .ph h2{font-size:18px}
  #panel .pb{padding:2px 14px 14px}
  #panel #controls{position:static;transform:none;left:auto;bottom:auto;margin-top:8px;background:none;border:0;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;justify-content:flex-start;gap:6px}
  #panel #controls button{height:34px;padding:0 12px}
  #hud{left:8px;right:8px;width:auto;bottom:calc(40vh + 32px);padding:6px 8px;display:none;align-items:center;gap:8px}
  #hud.on{display:flex}
  #hud .hrow{flex:none}
  #hud .hd,#hud .hc,#hud .hk{display:none}
  #hud button.primary{height:34px;padding:0 12px;font-size:12.5px}
  #hud input{flex:1;min-width:0;margin:0}
  #hud .hmini{display:block;flex:none;font-size:11.5px;color:#fff;line-height:1.2;text-align:right;white-space:nowrap}
  #hud .hmini b{font-size:15px}
  #hud .hmini small{display:block;color:var(--ink2);font-size:10px}
  #bigdate{left:50%;top:13vh}
  #bigdate b{font-size:30px}
  #bigdate span{font-size:15px}
  body.notover #title{display:none}
  #undated{top:auto;bottom:calc(40vh + 84px)}
  #swCap{bottom:calc(40vh + 34px)}
  body.keyopen #legend{max-height:40vh}
}
@media (min-width:821px){ #undated{top:auto;bottom:calc(var(--credh) + 70px)} }
#legend .lgn{display:block;color:var(--ink3);font-size:11px;margin-top:6px;line-height:1.35}
.pf{padding:8px 0;border-bottom:1px solid var(--line)}
.pf b{font-size:15px;color:#fff}
.pf .x{font-size:12.5px;color:var(--ink2);line-height:1.4;margin-top:2px}
.pf .s{font-size:11.5px;color:var(--ink3);margin-top:2px}
@media (min-width:821px){ #swipe .lab{top:auto;bottom:calc(var(--credh) + 150px)} }

/* ---- cold open: «the war in 30 seconds» (js/app.js, intro). One column: date, counters, key; they cannot overlap ---- */
#intro{position:fixed;inset:0;z-index:40;pointer-events:auto;cursor:pointer;background:linear-gradient(90deg,rgba(5,8,12,.82) 0,rgba(5,8,12,.55) 26%,rgba(5,8,12,0) 36%)}
#intro[hidden],#vClaim[hidden],#vTitle[hidden],#vEnd[hidden]{display:none}
body.intro #left,body.intro #panel,body.intro #controls,body.intro #hud,body.intro #legend,body.intro #swipe,body.intro #swCap,body.intro #bigdate{display:none!important}
#intro .iCol{position:absolute;left:clamp(16px,3vw,48px);top:50%;transform:translateY(-50%);width:min(30vw,400px);display:flex;flex-direction:column;gap:22px}
#intro .iDate{font-size:clamp(30px,3.6vw,56px);font-weight:750;color:#fff;letter-spacing:-.02em;white-space:nowrap;text-shadow:0 4px 30px rgba(0,0,0,.85);font-variant-numeric:tabular-nums}
#intro .iStats{display:grid;grid-template-columns:1fr;gap:16px}
#intro .iStats b{display:block;font-size:clamp(28px,2.9vw,44px);font-weight:750;color:#ffd48a;line-height:1;font-variant-numeric:tabular-nums}
#intro .iStats span{display:block;font-size:13px;color:#e8eef3;margin-top:4px;line-height:1.3}
#intro .iStats span.s{display:none}
#intro .iStats em,#intro .iStats i{font-style:normal;color:#a9bac8}
#intro .iKey{font-size:12px;color:#cfd8e0;display:flex;flex-direction:column;gap:4px}
#intro .iKey i{width:10px;height:10px;border-radius:50%;display:inline-block;margin:0 3px 0 6px;vertical-align:-1px}
#intro .iKey i:first-child{margin-left:0}
#intro .iKey .c{background:#ff4b3a}#intro .iKey .s{background:#ffb020}#intro .iKey .k{background:#9aa7b3}#intro .iKey .sh{background:#9fe3ff;width:7px;height:7px}
#intro #iSkip{position:absolute;right:16px;top:16px;border:1px solid rgba(255,255,255,.35);background:rgba(5,8,12,.6);color:#fff;font:600 14px var(--font);padding:9px 16px;border-radius:999px;cursor:pointer}
#intro .iCard{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:rgba(5,8,12,.68);opacity:0;pointer-events:none;transition:opacity .9s}
#intro .iCard.on{opacity:1;pointer-events:auto}
#intro .iCard h2,#vClaim h2{margin:0;text-align:center;font-size:clamp(28px,4.6vw,64px);line-height:1.12;font-weight:750;color:#fff;letter-spacing:-.015em;text-shadow:0 4px 30px rgba(0,0,0,.9);padding:0 16px}
#intro #iExplore{border:0;background:#ffd48a;color:#141008;font:700 18px var(--font);padding:14px 28px;border-radius:999px;cursor:pointer;box-shadow:0 6px 30px rgba(255,212,138,.35)}
#intro .iCol{transition:opacity .6s}
#intro.end .iCol{opacity:0}
@media (max-width:820px){
  #intro{background:linear-gradient(180deg,rgba(5,8,12,.85) 0,rgba(5,8,12,.6) 30%,rgba(5,8,12,0) 46%)}
  #intro .iCol{top:58px;transform:none;left:14px;right:14px;width:auto;gap:10px}
  #intro .iDate{font-size:28px}
  #intro .iStats{grid-template-columns:1fr 1fr;gap:8px 12px}
  #intro .iStats b{font-size:26px}
  #intro .iStats span.l{display:none}
  #intro .iStats span.s{display:block;font-size:12px;margin-top:2px}
  #intro .iKey{font-size:11px;gap:2px}
  #intro #iSkip{top:10px;right:10px;padding:7px 14px}
}
/* video recording (?video=1) */
body.video *{transition:none!important}
body.video #left,body.video #panel,body.video #controls,body.video #hud,body.video #legend,body.video #credits,body.video #iSkip,body.video #swipe .k,body.video #tip,body.video #swCap{display:none!important}
body.video #intro{background:linear-gradient(180deg,rgba(5,8,12,.85) 0,rgba(5,8,12,.55) 34%,rgba(5,8,12,0) 46%)}
body.video #intro .iCol{top:44px;left:56px;right:56px;width:auto;transform:none;gap:18px}
body.video #intro .iDate{font-size:96px}
body.video #intro .iStats{grid-template-columns:1fr 1fr;gap:20px 40px}
body.video #intro .iStats b{font-size:76px}
body.video #intro .iStats span.l{display:none}
body.video #intro .iStats span.s{display:block;font-size:30px;margin-top:4px}
body.video #intro .iKey{position:fixed;left:56px;bottom:40px;font-size:24px;flex-direction:row;gap:24px}
body.video #intro .iKey i{width:18px;height:18px}
body.video #intro .iCard h2{font-size:72px}
body.video #intro #iExplore{display:none}
body.video #swipe .lab{top:auto;bottom:70px;font-size:42px;font-weight:750;padding:12px 22px;background:rgba(0,0,0,.72)}
body.video #swipe .h{width:4px}
#vClaim{position:fixed;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;background:rgba(5,8,12,.45)}
#vClaim h2{font-size:84px}
#vTitle{position:fixed;left:0;right:0;top:0;z-index:45;padding:40px 48px 70px;font-size:40px;font-weight:700;color:#fff;background:linear-gradient(180deg,rgba(5,8,12,.85),rgba(5,8,12,0));text-shadow:0 2px 12px #000}
#vEnd{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:140px;background:linear-gradient(180deg,rgba(5,8,12,0) 30%,rgba(5,8,12,.9) 68%)}
#vEnd em{font-style:normal;font-size:76px;font-weight:750;color:#ffd48a;margin-bottom:28px}
#vEnd b{font-size:64px;letter-spacing:.24em;color:#fff;font-weight:750}
#vEnd span{font-size:36px;color:#cfd8e0;margin-top:8px}
#vEnd small{font-size:18px;color:#8ea3b5;margin-top:26px;text-align:center;padding:0 40px}
body.video.vend #swipe .lab,body.video.vend #vTitle{display:none!important}
body.video #swipe .lab{position:fixed}
body.video #swipe .lab.l{left:28px;right:auto}
body.video #swipe .lab.r{right:28px;left:auto}
#vClaim h2{font-size:70px}
#intro .iKey .wl{background:#fff;width:9px;height:9px}
#title .ask{display:inline-block;margin-top:6px;font-size:12.5px;font-weight:600;color:#ffd48a;pointer-events:auto}
#title{pointer-events:auto}
.askcard{background:rgba(255,212,138,.08);border:1px solid rgba(255,212,138,.4);border-radius:12px;padding:14px;margin:8px 0}
.askcard p{margin:0 0 10px}
.askcard a.btn{display:inline-block;background:#ffd48a;color:#141008;font-weight:700;padding:10px 16px;border-radius:999px}
.cp{padding:10px 0;border-bottom:1px solid var(--line)}
.cp .c{font-weight:700;font-size:14px;color:#fff}
.cp .k{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-top:6px}
.cp .x{font-size:12.5px;color:var(--ink);line-height:1.45;margin-top:2px}
.cp .l{font-size:12px;color:#ffd48a;line-height:1.4;margin-top:4px}
.cp .s{font-size:11px;color:var(--ink3);margin-top:2px}
.age{font-size:12px;color:#ffd48a;border:1px solid rgba(255,212,138,.35);border-radius:8px;padding:6px 9px;margin:6px 0 4px}
@media (max-width:820px){ #title .ask{font-size:11.5px;margin-top:3px} body.notover #title{display:block} body.notover #title h1,body.notover #title .kicker{display:none} body.notover #title{padding:4px 9px} }
/* laptop: the map key behind the Key button too, so the map has the room */
@media (min-width:821px){ #controls #bKey{display:inline-flex;align-items:center} body:not(.keyopen) #legend{display:none!important} }
#vClaim{flex-direction:column;gap:30px}
#vClaimSub{font-size:64px;font-weight:750;color:#ffd48a;text-shadow:0 3px 20px rgba(0,0,0,.9)}
#vChart{position:fixed;inset:0;z-index:46;background:#070b10;display:flex;align-items:center;justify-content:center;padding:0 50px}
#vChart[hidden]{display:none}
#vChart .chart{width:100%}
#vChart .ct{font-size:40px;line-height:1.2;margin-bottom:20px}
#vChart .cap{font-size:22px}
#vChart svg text{font-size:11px}
#vEnd em small{display:block;font-size:34px;font-weight:600;color:#cfd8e0;text-align:center;margin-top:6px}
#vEnd em{text-align:center}
#vChart .chart{flex:1;min-width:0}
#intro .pw{display:none;color:#ffd48a}
#intro.prewar .pw{display:inline}
#intro.prewar .iw{display:none}
#intro.wait .iCol{visibility:hidden}
#vClaimSub small{display:block;font-size:28px;font-weight:500;color:#cfd8e0;text-align:center;margin-top:10px}
#vClaimSub{text-align:center}
body.video #intro .iKey{left:0;right:0;bottom:0;padding:14px 56px;background:#05080c;flex-wrap:nowrap;white-space:nowrap;gap:30px}
body.video #intro .iKey span{display:inline-flex;align-items:center;gap:6px}
#scaleBar{position:fixed;left:24px;bottom:calc(var(--credh) + 24px);z-index:7;color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;gap:8px;text-shadow:0 1px 4px #000}
#scaleBar[hidden]{display:none}
#scaleBar i{display:block;height:6px;border:2px solid #fff;border-top:0}
@media (max-width:820px){ #scaleBar{bottom:calc(40vh + 40px);left:12px} }
#cz{gap:12px}
#cz > *{margin-left:4px}
@media (max-width:820px){ #intro .iCol{background:rgba(5,8,12,.82);margin:-8px -6px 0;padding:8px 10px;border-radius:12px} }
.prem div{display:flex;gap:10px;align-items:baseline;padding:3px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.prem b{min-width:70px;color:#ffd48a}
.prem span{color:var(--ink2)}
body.video #intro .iStats span.s em{font-size:22px}
#vClaim h2{font-size:56px}
#intro .vsrc{display:none}
body.video #intro .vsrc{display:inline;font-size:22px}
body.video #loading{display:none!important}
#intro:not([hidden]):not(.wait) ~ #loading{display:none!important}
#vClaimSub{font-size:50px}
body.video #swipe .lab{font-size:34px}
#intro .iStats b small{font-size:45%;font-weight:600;color:#cfd8e0}
#hud .hleg{display:none}
#title .find{display:none}
@media (max-width:820px){
  #hud.on{flex-wrap:wrap;row-gap:4px}
  #hud .hleg{display:flex;flex-basis:100%;align-items:center;gap:6px;font-size:11px;color:var(--ink2)}
  #hud .hleg i{display:inline-block;border-radius:50%}
  #hud .hleg i.n{width:8px;height:8px;background:#fff;box-shadow:-11px 0 0 -2px #9fe3ff;margin-left:11px}
  #hud .hleg i.g{width:9px;height:9px;border:1.5px solid #ff6b8b;margin-left:8px}
  body.notover #title .find{display:block;font-size:12.5px;font-weight:700;color:#fff;margin-bottom:2px}
  #headline:not(.open) .hsum{font-size:11px}
}
#legend .lgi i.ghost{border-color:#ff6b8b}
#hud .hleg{display:none}
#title .find{display:none}
@media (max-width:820px){
  #hud.on{flex-wrap:wrap;row-gap:4px}
  #hud .hleg{display:flex;flex-basis:100%;align-items:center;gap:6px;font-size:11px;color:var(--ink2)}
  #hud .hleg i{display:inline-block;border-radius:50%}
  #hud .hleg i.n{width:8px;height:8px;background:#fff;box-shadow:-11px 0 0 -2px #9fe3ff;margin-left:11px}
  #hud .hleg i.g{width:9px;height:9px;border:1.5px solid #ff6b8b;margin-left:8px}
  body.notover #title .find{display:block;font-size:12.5px;font-weight:700;color:#fff;margin-bottom:2px}
}
#vEnd small{font-size:24px}
@media (max-width:820px){ #cz{flex-wrap:nowrap;gap:8px} #cz img{max-width:62px;height:auto} #credits .cz{margin-left:auto;min-width:0;overflow:hidden} }