/* Strature GPS phase 1, the strait hubs /gps/chokepoints/<slug>/ (sitebuild/hubs/strait.py, WP5). On top of
   pages-hub.css; site tokens only (site.css :root). Phone first (W-115): one column at 375 px, nothing wider than the
   screen (tables scroll inside their own box), tap targets at least 44 px. Copied into www/ only with
   site.config.json phase1.hubs on. */

.hs-sub{font-weight:400;color:var(--graphite);font-size:12.5px}
.hs-h3{font-size:17px;line-height:1.3;margin:18px 0 8px}
.hs-fc .fl-forecasts{padding-top:10px}
.hs-fc .fl-forecasts h2{font-size:22px;line-height:1.25}

/* the first phone screen (W-115): the top block kept tight so the first card's headline (the forecast box) shows */
.hb[data-hub-kind="strait"] .hb-top{padding-bottom:4px}
.hb[data-hub-kind="strait"] .hb-take .hs-sl{font-size:12px;line-height:1.4;margin-top:4px}
.hb[data-hub-kind="strait"] .hb-status{gap:6px;margin-top:10px}
.hb[data-hub-kind="strait"] .hb-chip{min-height:30px;padding:3px 8px;font-size:12.5px}
.hb[data-hub-kind="strait"] .hb-near{font-size:11.5px}
.hb[data-hub-kind="strait"] .hb-acts{margin-top:6px}
.hb[data-hub-kind="strait"] .hb-layers{margin-top:6px}
/* the folded "Using this page" line takes the breadcrumb row's right end on a phone (howto.js): the type label yields */
.gn-crumb.ht-crumb .hb-type{display:none}

/* S5 the strait in figures */
.hs-figs{display:grid;gap:10px;margin:0 0 12px}
.hs-fig{border-top:1px solid var(--hair);padding-top:8px}
.hs-fig dt{font-family:var(--sans);font-size:13px;color:var(--graphite)}
.hs-fig dd{margin:2px 0 0;font-family:var(--sans);font-size:20px;font-weight:600;line-height:1.3;color:var(--ink);
  overflow-wrap:anywhere}
.hs-fig dd .hs-sub{display:block;font-size:13px}
.hs-fig dd .hb-fig{white-space:normal}

/* the EU (27) switch: a checkbox that shows the bloc's rows; no script (WS-232 (3)) */
.hs-eusw{position:absolute;opacity:0;width:1px;height:1px}
.hs-eul{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:600 14px/1.2 var(--sans);color:var(--navy);
  cursor:pointer}
.hs-eul::before{content:"";width:18px;height:18px;border:1.5px solid var(--navy);background:var(--knockout)}
.hs-eusw:checked + .hs-eul::before{background:var(--navy);box-shadow:inset 0 0 0 3px var(--knockout)}
.hs-eusw:focus-visible + .hs-eul{outline:2px solid var(--navy);outline-offset:2px}
.hs-eu{display:none}
.hs-eusw:checked ~ * .hs-eu,.hs-eusw:checked ~ .hs-eu{display:revert}
.hs-in{display:block;font-family:var(--sans);font-size:12px;color:var(--graphite)}

/* S6 who depends */
.hs-rank,.hs-exp{display:grid;gap:2px;margin:0;padding:0;list-style:none;counter-reset:hs}
.hs-rank li,.hs-exp li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:8px 0;
  border-bottom:1px solid var(--hair);font-family:var(--sans);font-size:15px}
.hs-nm{flex:1 1 9em;min-width:0;font-weight:600}
.hs-nm a{display:inline-block;padding:4px 0}
.hs-goods{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.hs-goods li{border-top:1px solid var(--hair);padding-top:8px;font-family:var(--sans);font-size:14.5px}
.hs-g{font-weight:600}
.hs-buyers{display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:4px}
.hs-buyers a{display:inline-block;padding:6px 0}

/* S7 who runs short first: the Stock Clock still */
.hs-clock{margin:8px 0 6px}
.hs-lead{font-family:var(--sans);font-size:15px;font-weight:600;margin-bottom:6px}
.hs-list{display:grid;gap:0;margin:0;padding:0;list-style:none}
.hs-list li{padding:10px 0;border-bottom:1px solid var(--hair)}
.hs-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-family:var(--sans)}
.hs-row .hs-nm{font-size:15px}
.hs-at{flex:0 0 auto;white-space:nowrap}
.hs-k{font-size:13px;color:var(--graphite)}
.hs-day{font-size:17px;font-weight:700;color:var(--ink)}
.hs-lane{display:block;width:100%;max-width:420px;height:14px;margin:6px 0 4px}
.hs-track{fill:var(--hair)}
.hs-clo{fill:var(--graphite);opacity:.55}
.hs-short{fill:#B2401F}
.hs-late{fill:#8A5A10;opacity:.75}
.hs-tick{fill:var(--ink)}
.hs-b{font-family:var(--sans);font-size:12.5px;color:var(--graphite);margin:0}
.hs-sell{display:inline-block;margin-top:4px;padding:2px 8px;border:1px solid var(--navy);font-family:var(--sans);
  font-size:12px;font-weight:600;color:var(--navy)}
.hs-src{font-weight:400}
.hs-more summary,.hs-ch summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font:600 14px/1.3 var(--sans);
  color:var(--navy)}
.hs-norow,.hs-cred,.hs-case{margin-top:8px}

/* S8 who is exposed */
.hs-band{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border:1px solid}
.hs-b-high{color:#B2401F;border-color:#B2401F}
.hs-b-medium{color:#8A5A10;border-color:#8A5A10}
.hs-b-low{color:var(--graphite);border-color:var(--graphite)}
.hs-chans{display:flex;flex-wrap:wrap;gap:4px;flex-basis:100%}
.hs-chan{font-size:12px;color:var(--graphite);border:1px solid var(--hair);padding:1px 6px}

/* S9 watch, review */
.hs-watch,.hs-review{display:grid;gap:8px;margin:0 0 10px;padding:0;list-style:none;max-width:var(--measure)}
.hs-watch li{border-left:3px solid var(--navy);padding-left:10px}
.hs-when{display:block;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--graphite)}
.hs-review li{padding-left:14px;position:relative}
.hs-review li::before{content:"?";position:absolute;left:0;font-family:var(--sans);font-weight:700;color:var(--navy)}

/* S10 the briefing's chapters, S13 scenario cases, S14 tables */
.hs-ch{border-top:1px solid var(--hair)}
.hs-ch summary{flex-wrap:wrap;gap:2px 8px;padding:6px 0;list-style:none}
.hs-ch summary::-webkit-details-marker{display:none}
.hs-ch .lbl{flex-basis:100%}
.hs-ch-h{font-family:var(--serif, inherit);font-size:16px;font-weight:600;color:var(--ink)}
.hs-ch-b{padding:4px 0 14px}
.hs-ch-b p + p{margin-top:8px}
.hs-scns{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.hs-scn{border-top:1px solid var(--hair);padding-top:8px}
.hs-sl{display:block;margin-top:6px;font-size:12.5px;color:var(--graphite)}
.hs-tw{max-width:100%;overflow-x:auto}
.hs-tab{border-collapse:collapse;font-family:var(--sans);font-size:14px;min-width:16em}
.hs-tab th,.hs-tab td{padding:6px 10px 6px 0;border-bottom:1px solid var(--hair);text-align:left;vertical-align:top}
.hs-obs{display:grid;gap:6px;padding-left:18px}

/* S11 the Atlas on tap */
.hs-open{min-height:44px}
.hs-atlas:empty{display:none}
.hs-atlas{margin:12px -16px 0;max-width:100vw}
.hs-atlas .ckp{max-width:100%}

@media (min-width:768px){
  .hs-figs{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px}
  .hs-atlas{margin:12px 0 0}
}
@media print{
  .hs-eul,.hs-open,.hs-atlas{display:none!important}
  .hs-eu{display:revert}
}