:root{
  --bg:#070b10; --panel:rgba(10,15,22,.86); --panel-solid:#0b1118; --line:rgba(160,190,215,.16);
  --ink:#e8eef3; --ink2:#a9bac8; --ink3:#7d8fa0; --acc:#7cc4ff;
  --dmg:#ff5b3d; --hit:#f4b740; --none:#8ea3b5; --ok:#53c38b;
  --ukr:#f3c64d; --rus:#ff8a65; --pend:#9aa7b3;
  --r:14px; --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow:hidden}
#globe{position:fixed;inset:0}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit}

/* title */
#left{position:fixed;left:16px;top:14px;width:min(560px,calc(100vw - 470px));z-index:5;display:flex;flex-direction:column;gap:10px;align-items:flex-start;pointer-events:none}
#left>*{pointer-events:auto}
#title{background:rgba(5,8,12,.62);padding:10px 14px;border-radius:12px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none}
#title .kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#a8d8ff;font-weight:650}
#title h1{margin:4px 0 4px;font-size:26px;line-height:1.15;font-weight:650;letter-spacing:-.01em;text-shadow:0 2px 18px rgba(0,0,0,.7)}
#title .sub{font-size:13px;color:var(--ink2);text-shadow:0 1px 10px rgba(0,0,0,.8)}

/* side panel */
#panel{position:fixed;right:16px;top:16px;bottom:40px;width:420px;background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;z-index:6;box-shadow:0 18px 50px rgba(0,0,0,.45)}
#panel .ph{padding:16px 18px 12px;border-bottom:1px solid var(--line)}
#panel .ph .step{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
#panel .ph h2{margin:4px 0 2px;font-size:22px;font-weight:650}
#panel .ph .meta{font-size:12.5px;color:var(--ink2)}
#panel .pb{padding:4px 18px 18px;overflow:auto;flex:1;overscroll-behavior:contain}
#panel h3{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin:18px 0 8px;font-weight:650}
#panel p{font-size:13.5px;line-height:1.5;color:var(--ink);margin:6px 0}
#panel .muted{color:var(--ink2)}
#panel .small{font-size:12px;color:var(--ink2);line-height:1.45}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.chip i{width:8px;height:8px;border-radius:50%;display:inline-block}
.chip.damaged i{background:var(--dmg)} .chip.hit i{background:var(--hit)} .chip.none i{background:var(--none)}
.ev{border-left:2px solid var(--line);padding:2px 0 8px 12px;margin:0 0 8px;position:relative}
.ev:before{content:"";position:absolute;left:-5px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--none)}
.ev.damaged:before{background:var(--dmg)} .ev.hit:before{background:var(--hit)}
.ev .d{font-size:12px;font-weight:650;color:var(--ink)}
.ev .f{font-size:12px;color:var(--ink2)}
.ev .w{font-size:13px;line-height:1.45;margin-top:2px}
.ev .s{font-size:11.5px;color:var(--ink3);margin-top:3px}
.ev .v{font-size:11px;color:var(--hit)}
.ev.ship:before{border-radius:2px}
.seg{display:flex;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px;margin:8px 0}
.seg button{flex:1;border:0;background:transparent;color:var(--ink2);padding:7px 8px;border-radius:8px;font-size:12.5px;cursor:pointer}
.seg button.on{background:rgba(124,196,255,.16);color:var(--ink)}
.scene{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:12px;color:var(--ink2);margin:6px 0}
.scene b{color:var(--ink);font-weight:600}
.scene code{font-size:10.5px;color:var(--ink3);word-break:break-all}
.bars{margin:6px 0 2px}
.bar{display:grid;grid-template-columns:118px 1fr 40px;gap:8px;align-items:center;font-size:11.5px;color:var(--ink2);margin:3px 0}
.bar .t{height:7px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden}
.bar .t span{display:block;height:100%;background:#5d7f9c;border-radius:4px}
.bar.strike .t span{background:var(--hit)}
.bar .n{text-align:right;color:var(--ink)}
.grades{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:12px}
.grades span.g{font-weight:650;font-size:11px;padding:1px 7px;border-radius:6px;background:rgba(255,255,255,.06)}
.g.GOOD{color:#7fe0a8}.g.GOOD-ish{color:#a6e0a0}.g.PARTIAL{color:#f4cf6a}.g.WEAK{color:#ffa07a}.g.NONE{color:#ff7b7b}
.kv{font-size:13px;line-height:1.5;margin:4px 0 8px}
.kv b{font-weight:600;color:var(--ink2);font-size:11.5px;display:block;text-transform:uppercase;letter-spacing:.06em}
.note{font-size:11.5px;color:var(--ink3);border-top:1px dashed var(--line);margin-top:10px;padding-top:8px;line-height:1.45}
.flowrow{display:grid;grid-template-columns:1fr auto;gap:2px 8px;font-size:12.5px;padding:6px 0;border-bottom:1px solid var(--line)}
.flowrow .c{font-weight:600}
.flowrow .x{grid-column:1/3;font-size:11.5px;color:var(--ink2)}
.sw{display:inline-block;width:18px;height:4px;border-radius:2px;vertical-align:middle;margin-right:5px}

/* controls */
#controls{position:fixed;left:calc((100vw - 440px) / 2);transform:translateX(-50%);bottom:40px;z-index:9!important;display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:6px;z-index:7;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#controls button{white-space:nowrap;border:0;background:rgba(255,255,255,.06);color:var(--ink);height:36px;min-width:36px;padding:0 14px;border-radius:999px;font-size:13px;cursor:pointer}
#controls button:hover{background:rgba(255,255,255,.12)}
#controls button.on{background:rgba(124,196,255,.22)}
#dots{display:flex;gap:5px;padding:0 6px}
#dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22);cursor:pointer}
#dots i.on{background:var(--acc);box-shadow:0 0 0 3px rgba(124,196,255,.2)}

/* layers */
#layers{position:fixed;left:20px;bottom:96px;width:250px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px 12px;z-index:6;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:none}
#layers.open{display:block}
#layers h4{margin:2px 0 6px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
#layers label{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 0;color:var(--ink);cursor:pointer}
#layers label small{color:var(--ink3);font-size:11px;margin-left:auto}
#layers input{accent-color:#7cc4ff}

/* legend */
#legend{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;z-index:5;font-size:12px;color:var(--ink2);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);max-width:250px}
#legend div{display:flex;align-items:center;gap:8px;margin:3px 0}
#legend i{width:10px;height:10px;border-radius:50%;flex:none}

/* swipe */
#swipe{position:fixed;top:0;bottom:0;width:0;z-index:4;display:none}
#swipe .h{position:absolute;top:0;bottom:0;left:-1px;width:2px;background:rgba(255,255,255,.9);box-shadow:0 0 12px rgba(0,0,0,.6)}
#swipe .k{position:absolute;top:50%;left:-19px;width:38px;height:38px;margin-top:-19px;border-radius:50%;background:#fff;color:#111;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;cursor:ew-resize;box-shadow:0 4px 18px rgba(0,0,0,.5);touch-action:none;user-select:none}
#swipe .lab{position:absolute;top:96px;white-space:nowrap;font-size:12px;font-weight:650;padding:5px 10px;border-radius:8px;background:rgba(0,0,0,.66);color:#fff}
#swipe .lab.l{right:12px} #swipe .lab.r{left:12px}
#swipe .lab small{display:block;font-weight:500;color:#cfd8e0;font-size:10.5px}

/* credits */
#credits{position:fixed;left:0;right:0;bottom:0;height:26px;padding:4px 14px;font-size:10.5px;color:#b9c6d2;background:rgba(5,8,12,.88);z-index:8;
  display:flex;gap:10px;align-items:center;line-height:1.35;overflow:hidden}
#credits .ct{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#credits:hover,#credits:focus-within,#credits:focus{height:auto;flex-wrap:wrap;z-index:15}
#credits:hover .ct,#credits:focus .ct,#credits:focus-within .ct{white-space:normal}
#credits .cz{display:flex;gap:8px;align-items:center;margin-left:auto}
#credits .cz img{height:14px;vertical-align:middle}
#credits a{color:#cfe3f5}

#loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:20;background:var(--bg);transition:opacity .8s}
#loading.gone{opacity:0;pointer-events:none}
#loading .t{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}

body.still #controls,body.still #layers{display:none!important}

@media (max-width:820px){
  #title{max-width:calc(100vw - 32px);left:16px;top:12px}
  #title h1{font-size:17px}
  #title .kicker{font-size:9.5px}
  #title .sub{font-size:12px}
  #legend{display:none}
  #panel{left:8px;right:8px;width:auto;top:auto;bottom:26px;height:46vh;border-radius:14px 14px 10px 10px}
  #controls{bottom:calc(46vh + 34px);transform:translateX(-50%) scale(.92)}
  #dots{display:none}
  #layers{left:8px;right:8px;width:auto;bottom:calc(46vh + 86px)}
  #credits{font-size:9px}
  #swipe .lab{top:120px}
}
body.nopanel #panel{display:none}
body.nolegend #legend{display:none}
#cz,#cz *{position:static!important}
#cz{min-height:16px;flex-wrap:wrap}

/* round-2 additions */
#legend .lh{margin-top:6px;color:var(--ink3);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
#legend i.rg{width:12px;height:12px;border-radius:50%;background:transparent;border:2.5px solid #8ea3b5}
#legend i.rg.st{border-color:#fff;background:linear-gradient(45deg,transparent 44%,#fff 44%,#fff 58%,transparent 58%)}
#legend i.rg.op{border-color:#53c38b}
#legend #legFlows{display:block;margin-top:6px;line-height:1.4;max-width:260px}
#legend .muted{color:var(--ink3)}
#headline{display:flex;gap:8px;flex-wrap:wrap;background:rgba(5,8,12,.72);border:1px solid var(--line);border-radius:12px;padding:10px 12px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#headline .hk,#headline .hs{flex-basis:100%;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#a8d8ff}
#headline .hs{text-transform:none;letter-spacing:0;color:var(--ink3);font-size:11px}
.hn{flex:1 1 150px;display:flex;flex-direction:column;gap:1px;min-width:140px}
.hn b{font-size:20px;font-weight:700;color:#fff;line-height:1.1}
.hn span{font-size:12px;color:var(--ink);line-height:1.3}
.hn small{font-size:11px;color:var(--ink3)}
.hnp{display:flex;flex-wrap:wrap;gap:10px;background:rgba(124,196,255,.07);border:1px solid var(--line);border-radius:10px;padding:10px;margin:10px 0 4px}
.hnp .hs{flex-basis:100%;font-size:11px;color:var(--ink3)}
.hnp.one .hn{flex-basis:100%}
#method{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,calc(100vw - 32px));background:var(--panel-solid);border:1px solid var(--line);border-radius:14px;padding:16px 18px;z-index:30;display:none;font-size:13px;line-height:1.5;box-shadow:0 20px 60px rgba(0,0,0,.6)}
#method button{margin-top:6px;border:0;background:rgba(255,255,255,.1);color:var(--ink);padding:6px 14px;border-radius:8px;cursor:pointer}
#method .muted{color:var(--ink2);font-size:12px}
#undated{position:fixed;left:calc(50% + 120px);transform:translateX(-50%);top:16px;z-index:6;background:rgba(5,8,12,.8);color:#ffd48a;border:1px solid rgba(255,212,138,.4);font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;display:none;max-width:calc(100vw - 32px);text-align:center}
#swCap{position:fixed;left:16px;right:452px;bottom:88px;z-index:6;background:rgba(5,8,12,.82);color:#e8eef3;font-size:13px;line-height:1.45;padding:8px 12px;border-radius:10px;display:none;border:1px solid var(--line)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.chip.now i{background:transparent;border:2px solid #8ea3b5}
.chip.now.STOPPED i{border-color:#fff;background:linear-gradient(45deg,transparent 40%,#fff 40%,#fff 60%,transparent 60%)}
.chip.now.OPERATING i,.chip.now.REDUCED i{border-color:#53c38b}
.chip.now.REDUCED i{border-style:dashed}
.prow{display:grid;grid-template-columns:1fr auto auto;gap:6px;align-items:center;font-size:13px;padding:3px 0}
.ev .tg{font-weight:500;color:var(--ink3)}
.ev .v.ok{color:#7fe0a8}
.kv .s,.ours .s{font-size:11.5px;color:var(--ink3);margin-top:2px}
.ours{font-size:13px;line-height:1.5;padding:8px 10px;border-radius:10px;margin:6px 0 10px;background:rgba(192,132,252,.08);border:1px solid rgba(192,132,252,.25)}
.ours.signal{background:rgba(255,91,61,.08);border-color:rgba(255,91,61,.3)}
.ours.none{background:rgba(142,163,181,.08);border-color:var(--line)}
details summary{cursor:pointer;color:var(--acc);font-size:12.5px;margin:4px 0 8px}
.flowrow .x.cl{color:#cfe3f5}
@media (max-width:820px){
  #left{left:8px;right:8px;width:auto;top:8px;gap:6px}
  #title{padding:7px 10px}
  #title .kicker{font-size:11px}
  #headline{padding:6px 8px;gap:4px}
  #headline .hk{display:block;font-size:9.5px}
  .hn{min-width:0;flex:1 1 30%}
  .hn b{font-size:14px}
  .hn span{font-size:10.5px}
  .hn small{display:block;font-size:9.5px}
  .hn small a{display:none}
  .hn em{display:none}
  #headline .hs{font-size:10px}
  #credits{height:24px;font-size:11px!important}
  #panel{bottom:26px;height:46vh}
  #controls{bottom:calc(46vh + 34px);left:50%}
  #swCap{left:8px;right:8px;bottom:calc(46vh + 84px);font-size:11.5px}
  #undated{top:118px;bottom:auto;left:50%;font-size:10.5px;padding:4px 10px}
}
body.nopanel #swCap{right:16px}

/* damage grades and recovery timeline */
.chip.dg i{border-radius:2px}
/* damage grade = its own single-hue violet ramp, never the red/amber of the evidence colours */
.chip.dg i{border:1px solid #cdbdf5}.chip.dg.g0 i{background:transparent}.chip.dg.g1 i{background:#e3dafb}.chip.dg.g2 i{background:#b9a3f0}.chip.dg.g3 i{background:#8e6be0}.chip.dg.g4 i{background:#5b34b8}.chip.dg.gU i{background:#8ea3b5}
.tl{margin:12px 0 10px;padding:10px 0 4px}
.tlax{position:relative;height:16px;margin-left:120px;margin-right:64px;font-size:10px;color:var(--ink3);border-bottom:1px solid var(--line)}
.tlax span{position:absolute;transform:translateX(-50%)}
.tlr{display:grid;grid-template-columns:116px 1fr 60px;gap:4px;align-items:center;margin:7px 0;font-size:12px}
.tln{color:var(--ink);line-height:1.25}
.tlt{position:relative;height:14px;background:rgba(255,255,255,.04);border-radius:7px}
.tlt .tlb{position:absolute;top:2px;height:10px;border-radius:5px;background:rgba(124,196,255,.28)}
.tlt .tlc{position:absolute;top:2px;height:10px;border-radius:5px;background:#7cc4ff}
.tlv{font-size:11px;color:var(--ink2);text-align:right}
.tlk{font-size:11px;color:var(--ink3);margin-top:6px}
.tlk span{display:inline-block;width:18px;height:8px;border-radius:4px;vertical-align:middle;margin:0 3px}
.tlk .tlb{background:rgba(124,196,255,.28)}.tlk .tlc{background:#7cc4ff}

.tlt .tld{position:absolute;top:0;width:12px;height:12px;margin-left:-6px;margin-top:1px;border-radius:50%;background:#fff;border:2px solid #7cc4ff}
.tlk .tld2{display:inline-block;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid #7cc4ff;vertical-align:middle;margin:0 3px}
.tchart{display:flex;align-items:flex-end;gap:2px;height:120px;margin:8px 0 2px;padding-top:14px}
.tc{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative}
.tc .tb{width:100%;background:#7cc4ff;border-radius:2px 2px 0 0;min-height:1px}
.tc .tb.after{background:#ff5b3d}
.tc .tv{font-size:10px;color:var(--ink2);margin-bottom:1px}
.tc .tm{font-size:11px;color:var(--ink3);height:22px;line-height:1.1;text-align:center;margin-top:2px}
.ev.closure:before{background:#c084fc}.ev.info:before{background:#5d7f9c}

.hn em{font-style:normal;font-size:11.5px;color:#cfe3f5;line-height:1.3}
.tc .tb.part{background:#ff9f43}
@media (max-width:820px){ #swipe .lab{top:104px;bottom:auto} #swCap{font-size:11px} .hn{flex:1 1 45%} }
.tlr.key .tln{font-weight:700;color:#fff}.tlr.key .tlb{background:rgba(124,196,255,.5)!important}
#headline .hn{flex:1 1 46%;min-width:0}
#headline .hn b{font-size:19px}

/* round 3 */
#undated{max-width:calc(100vw - 460px - 32px);white-space:normal}
#headline button.hk{all:unset;flex-basis:100%;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#a8d8ff;cursor:default}
#headline button.hk .tg{display:none}
.mech{font-size:12px;color:#ffd48a;margin:2px 0 4px;line-height:1.35}
.chip.dg.g4 i{background:#3b1f86}.chip.dg.g3 i{background:#7a52d6}.chip.dg.g2 i{background:#b9a3f0}.chip.dg.g1 i{background:#ece6fd}
@media (max-width:820px){
  #headline button.hk{cursor:pointer;font-size:11px}
  #headline button.hk .tg{display:inline}
  #headline:not(.open) .hn, #headline:not(.open) .hs{display:none}
  #headline.open .hk .tg{transform:rotate(90deg);display:inline-block}
  .hn small{font-size:11px}
  .hn small .ml{display:none}
  #title .sub{display:none}
  #undated{max-width:calc(100vw - 32px)}
}

button.info{all:unset;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;border:1px solid #9fc4e4;color:#cfe3f5;font:700 10px/1 Georgia,serif;font-style:italic;cursor:pointer;vertical-align:1px;margin-left:3px}
button.info:hover,button.info:focus-visible{background:#7cc4ff;color:#0b1118;outline:none}
#claimTip{position:fixed;z-index:40;display:none;background:#0b1118;border:1px solid rgba(160,190,215,.35);border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.45;color:#e8eef3;box-shadow:0 12px 40px rgba(0,0,0,.6);text-transform:none;letter-spacing:0;font-weight:400}
#claimTip b{color:#fff}
.cnote{font-size:11.5px;color:var(--ink3);margin-top:2px;line-height:1.35}

/* round 4 */
.prow>span:first-child{white-space:nowrap}
#undated{left:calc((100vw - 440px) / 2)}
#swipe .k{top:62%}
.hsum{display:none}
#legend .legours i{background:#5fd4ff}
@media (max-width:820px){
  #headline:not(.open) .hsum{display:block;flex-basis:100%;font-size:11.5px;color:#fff;line-height:1.35}
  #swipe .k{top:calc(50% - 120px)}
  #swipe .lab.l{right:4px} #swipe .lab.r{left:4px}
  #swipe .lab{max-width:46vw;white-space:normal}
  #undated{left:50%}
}

/* round 5 */
#undated{top:112px}
#north{position:fixed;right:452px;top:120px;z-index:7;width:34px;height:34px;border-radius:50%;background:rgba(5,8,12,.8);color:#fff;font-weight:700;font-size:12px;display:none;align-items:center;justify-content:center;border:1px solid var(--line)}
@media (max-width:820px){
  #swipe .lab{width:max-content;max-width:44vw;white-space:nowrap;font-size:11.5px}
  #swipe .lab small{display:none}
  #north{right:12px;top:150px}
  #undated{top:118px}
}

/* round 10: short laptop screens (720-760 px high): the numbers card folds to its one-line summary (tap to open, as on a phone)
   and the legend drops its import-lines note, so the globe has room between the cards */
@media (min-width:821px) and (max-height:760px){
  #headline button.hk{cursor:pointer}
  #headline button.hk .tg{display:inline}
  #headline:not(.open) .hn, #headline:not(.open) .hs{display:none}
  #headline.open .hk .tg{transform:rotate(90deg);display:inline-block}
  #headline:not(.open) .hsum{display:block;flex-basis:100%;font-size:12px;color:#fff;line-height:1.35}
  #legend #legFlows{display:none!important}
}
@media (min-width:821px){ #swCap{bottom:100px} }   /* round 10: the caption sat 3 px under the tour bar */

/* round 34: the credit line is never cut. Laptop: it wraps (two lines from about 1100 px wide) and everything above it is placed
   from its measured height (--credh, set by app.js). Phone: one short "Sources and credits" button; a tap opens the full text. */
:root{--credh:26px}
#credits{height:auto;min-height:26px;flex-wrap:nowrap;overflow:visible}
#credits .ct{white-space:normal;overflow:visible;text-overflow:clip}
#credits .cb{display:none}
#panel{bottom:calc(var(--credh) + 14px)}
#controls{bottom:calc(var(--credh) + 14px)}
#layers{bottom:calc(var(--credh) + 70px)}
@media (min-width:821px){ #swCap{bottom:calc(var(--credh) + 74px)} }
/* round 34 (laptop): the left column (title, numbers, legend) stops above the tour bar and the credits; if "In numbers" is opened on a
   short screen the legend scrolls inside its card instead of running under the footer */
@media (min-width:821px){
  #left{max-height:calc(100vh - 14px - var(--credh) - 70px)}
  #title,#headline{flex-shrink:0}
  #legend{min-height:0;flex-shrink:1;overflow:auto;overscroll-behavior:contain}
}
@media (max-width:820px){
  #credits{height:auto;min-height:24px;padding:3px 10px;align-items:center}
  #credits .ct{display:none}
  #credits .cb{display:inline-flex;align-items:center;position:relative;flex:none;border:0;background:none;color:#cfe3f5;font:600 11px var(--font);padding:2px 0;text-decoration:underline;cursor:pointer}
  #credits .cb::after{content:'';position:absolute;left:-10px;right:-8px;top:-28px;bottom:-4px}   /* 44 px tall hit area (it rises over the panel's bottom padding) */
  #credits.open{flex-wrap:wrap;z-index:15;max-height:62vh;overflow:auto;padding:8px 12px 6px;background:#05080c;border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(0,0,0,.6)}
  #credits.open .ct{display:block;flex-basis:100%;order:2;font-size:12px;line-height:1.45;margin-top:4px}
  #cz a{display:inline-block;padding:30px 0 4px 8px;margin:-30px 6px -4px -8px}   /* the Cesium logo link: 44 px hit area; no negative right margin, or the logo touches "Data attribution" */
  #panel,#controls{bottom:auto}
  #panel{bottom:26px}
  #controls{bottom:calc(46vh + 34px);transform:translateX(-50%)}
  #layers{bottom:calc(46vh + 86px)}
  /* round 34: every control on the phone has a hit area of at least 44 x 44 px (the drawn button stays 36 px) */
  #controls button{position:relative}
  #controls button::after{content:'';position:absolute;left:-4px;right:-4px;top:-5px;bottom:-5px}
  #headline button.hk{position:relative}
  #headline button.hk::after{content:'';position:absolute;left:-8px;right:-8px;top:-10px;bottom:-10px}
  #swipe .k::after{content:'';position:absolute;inset:-4px;border-radius:50%}
  .seg button{min-height:44px}
  button.info{position:relative}
  button.info::after{content:'';position:absolute;inset:-15px}
  details summary{padding:14px 0;line-height:16px;margin:0}
  #layers label{min-height:44px;padding:0}
  #layers{max-height:calc(54vh - 150px);overflow:auto}
}

/* ---- perf round (16 Oct, late): first paint before the 3D engine ----
   A still of the first view (stills/poster_*.webp, the same camera with no marks on it) sits over the globe until the first flight has
   landed, then fades. The loading notice stays, as a label over the still instead of a black screen. The cards that the script fills
   (panel, numbers, tour bar, layers) and the legend under the numbers stay hidden until they are filled, so nothing paints empty or jumps. */
#poster{position:fixed;inset:0;z-index:1;pointer-events:none;transition:opacity .8s;background:var(--bg)}
#poster img{display:block;width:100%;height:100%;object-fit:cover}
body.globe-on #poster{opacity:0}
#poster.off{display:none}
#loading{background:transparent;pointer-events:none}
#loading .t{background:rgba(5,8,12,.72);padding:9px 16px;border-radius:99px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
body.boot #panel,body.boot #headline,body.boot #legend,body.boot #controls,body.boot #layers,body.boot #swipe,body.boot #swCap,body.boot #undated,body.boot #north,body.boot #method{visibility:hidden}
/* the overview's panel, numbers and legend are written from the data alone, before the 3D engine (js/app.js 'perf'): shown at once */
body.boot.early #panel,body.boot.early #headline,body.boot.early #legend{visibility:visible}
@media (max-width:820px){ #loading{align-items:flex-start;padding-top:32vh} }   /* phone: the notice sits over the map, above the panel */

/* G13 (phone): the map key. The legend is not drawn over the small map; a 'Key' button in the tour bar opens it as a sheet over the
   panel (never over the pins or their names), and a tap anywhere else closes it */
#bKey{display:none}
@media (max-width:820px){
  #controls #bKey{display:inline-flex;align-items:center}
  #controls #bKey[aria-expanded="true"]{background:rgba(124,196,255,.22)}
  body.keyopen #left{z-index:13}   /* the sheet sits in #left: lift it over the panel while open */
  body.keyopen #legend{display:block;position:fixed;left:8px;right:8px;width:auto;max-width:none;bottom:26px;top:auto;max-height:46vh;overflow:auto;z-index:12;font-size:13px;padding:12px 14px;background:#0b1016;box-shadow:0 -10px 30px rgba(0,0,0,.6)}
  body.keyopen #legend #legFlows{max-width:none}
  body.keyopen #legend i{width:12px;height:12px}
}

/* G14: phone, the open 'In numbers' card reaching the tour bar: the bar steps aside while it is open (js/app.js fitHeadline) */
@media (max-width:820px){ body.hlcover #controls{visibility:hidden} }
/* G14: phone, a heading block taller than 55% of the panel: the whole panel scrolls (js/app.js fitPanelHead) */
@media (max-width:820px){ #panel.tallhead{overflow-y:auto;overscroll-behavior:contain} #panel.tallhead .pb{flex:none;overflow:visible} }