/* Six selectable maritime chokepoints. All scenario values are explicitly fictional. */
.supply-monitor,.supply-trends { overflow:hidden; border:1px solid var(--line); border-radius:1.2rem; background:#fff; box-shadow:var(--shadow); }
.supply-monitor-bar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.7rem; padding:1rem 1.3rem; border-bottom:1px solid var(--line); }
.supply-monitor-bar>div { display:flex; align-items:center; flex-wrap:wrap; gap:.55rem; }
.supply-monitor-bar b { font-size:0.8125rem; letter-spacing:-.01em; }
.supply-monitor-bar>div>span:last-child { margin-left:.3rem; color:#646e69; font-size:0.8125rem; }
.supply-live-dot { width:6px; height:6px; border-radius:50%; background:#73867b; }
.supply-demo-badge { padding:.25rem .55rem; border:1px solid #e6dabb; border-radius:5px; background:#fcf8ec; color:#7d6839; font-size:0.8125rem; font-weight:650; }
.supply-map-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; }
.supply-map-panel { min-width:0; background:#f6f9f4; }
.supply-map-legend { display:flex; align-items:center; flex-wrap:wrap; gap:1rem; padding:.9rem 1.2rem .3rem; }
.supply-map-legend>span { display:inline-flex; align-items:center; gap:.35rem; color:#636e66; font-size:0.8125rem; }
.supply-map-legend>span:before { content:''; width:6px; height:6px; border-radius:50%; background:var(--supply-color); }
.supply-map-legend b { color:#53615c; font-size:0.8125rem; }
.supply-map-legend small { margin-left:auto; color:#666f68; font-size:0.8125rem; }
.supply-monitor .normal { --supply-color:#2d9c75; }
.supply-monitor .caution { --supply-color:#c19a49; }
.supply-monitor .critical { --supply-color:#cf776f; }
.supply-map-scroll { overflow-x:auto; scrollbar-width:thin; }
.supply-map-canvas { position:relative; width:100%; min-width:690px; aspect-ratio:900/430; isolation:isolate; }
.supply-map-land,.supply-map-routes { position:absolute; inset:0; display:block; width:100%; height:100%; }
.supply-map-routes { pointer-events:none; }
.supply-map-routes polyline { fill:none; stroke:var(--supply-color); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.24; }
.supply-map-routes polyline.critical { stroke-dasharray:4 5; }
.supply-map-routes polyline.caution { stroke-dasharray:2 4; }
.supply-map-routes polyline.selected { stroke-width:2.8; opacity:.85; }
.supply-map-routes line { stroke:#a5b5a9; stroke-width:.8; }
.supply-map-marker { position:absolute; z-index:2; width:26px; height:26px; padding:0; transform:translate(-50%,-50%); border:0; background:none; color:var(--ink); font:inherit; cursor:pointer; }
.supply-map-marker:before { position:absolute; inset:7px; content:''; border:2px solid #fff; border-radius:50%; background:var(--supply-color); box-shadow:0 0 0 3px color-mix(in srgb,var(--supply-color) 14%,transparent); }
.supply-map-marker[aria-pressed=true]:before { box-shadow:0 0 0 6px color-mix(in srgb,var(--supply-color) 15%,transparent); }
.supply-map-marker .supply-map-tag { position:absolute; left:calc(13px + var(--tag-x)); top:calc(13px + var(--tag-y)); display:block; width:max-content; padding:.32rem .5rem; transform:translate(var(--tag-align),-50%); border:1px solid #dce5dc; border-radius:6px; background:rgba(255,255,255,.95); color:#5f6f63; box-shadow:0 3px 8px rgba(24,37,33,.025); font-size:0.8125rem; white-space:nowrap; }
.supply-map-tag i { display:inline-block; width:5px; height:5px; margin-right:.35rem; vertical-align:middle; border-radius:50%; background:var(--supply-color); }
.supply-map-marker[aria-pressed=true] { z-index:3; }
.supply-map-marker[aria-pressed=true] .supply-map-tag { border-color:#344b3e; background:#253c30; color:#fff; box-shadow:0 4px 12px #21382918; }
.supply-map-marker:focus-visible { outline:2px solid #4169e1; outline-offset:4px; border-radius:50%; }
.supply-ocean-label { position:absolute; color:#697169; font-size:0.8125rem; letter-spacing:.19em; pointer-events:none; }
.supply-ocean-label.atlantic { left:27%; top:62%; }
.supply-ocean-label.indian { left:68%; top:75%; }
.supply-ocean-label.pacific { left:2%; top:74%; }
.supply-map-foot { display:flex; justify-content:space-between; gap:.5rem; padding:.25rem 1.2rem .8rem; color:#676f68; font-size:0.8125rem; }
.supply-location { display:flex; flex-direction:column; min-width:0; padding:1.15rem 1.25rem .8rem; border-left:1px solid var(--line); background:#fff; }
.supply-location-top { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.supply-location-top>span:first-child { color:#677069; font-size:0.8125rem; font-variant-numeric:tabular-nums; letter-spacing:.07em; }
.supply-status { display:inline-flex; align-items:center; gap:.3rem; padding:.25rem .5rem; border-radius:999px; background:color-mix(in srgb,var(--supply-color) 9%,white); color:var(--supply-color); font-size:0.8125rem; font-weight:700; }
.supply-status:before { content:''; width:4px; height:4px; border-radius:50%; background:currentColor; }
.supply-location h3 { margin:.9rem 0 .2rem; font-size:1.25rem; line-height:1.5; letter-spacing:-.04em; }
.supply-location-english { color:#667169; font-size:0.8125rem; }
.supply-location>p { margin:.8rem 0 0; color:#656f67; font-size:0.8125rem; line-height:1.8; }
.supply-location-metrics { display:grid; grid-template-columns:1fr 1fr; gap:.8rem .7rem; margin:1rem 0; }
.supply-location-metrics>div { min-width:0; }
.supply-location-metrics dt { color:#667069; font-size:0.8125rem; }
.supply-location-metrics dt small { margin-left:.2rem; font-size:0.8125rem; }
.supply-location-metrics dd { margin:.3rem 0 0; color:#314b3c; font-size:1.5rem; font-weight:700; line-height:1.2; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.supply-location-metrics dd.supply-cargo { padding-top:.25rem; font-size:0.8125rem; line-height:1.6; letter-spacing:0; }
.supply-location>p.supply-location-note { margin-top:auto; padding-top:.7rem; border-top:1px solid #edf1ec; font-size:0.8125rem; color:#666e66; }
.supply-location-tabs { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border-top:1px solid var(--line); background:#fff; }
.supply-location-tabs button { display:flex; align-items:center; justify-content:center; gap:.4rem; min-height:47px; padding:.5rem .2rem; border:0; border-right:1px solid #edf1ec; background:#fff; color:#646e67; font:inherit; font-size:0.8125rem; cursor:pointer; }
.supply-location-tabs button:last-child { border-right:0; }
.supply-location-tabs button>i { flex:none; width:5px; height:5px; border-radius:50%; background:var(--supply-color); }
.supply-location-tabs button[aria-pressed=true] { background:#f1f5f0; color:#314b3c; box-shadow:inset 0 -2px #557c65; font-weight:700; }
.supply-location-tabs button:hover { background:#f6f9f4; }
.supply-trends { margin-top:1rem; padding:1.2rem 1.4rem 1rem; }
.supply-trend-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.supply-trend-header .section-kicker { font-size:0.8125rem; }
.supply-trend-header h3 { margin:.35rem 0; font-size:1.1rem; letter-spacing:-.03em; }
.supply-trend-header p { margin:0; color:#8c998f; font-size:0.8125rem; }
.supply-period { display:flex; flex:none; gap:.2rem; padding:.2rem; border:1px solid var(--line); border-radius:.5rem; background:#f7f9f5; }
.supply-period button { min-width:42px; padding:.4rem; border:0; border-radius:.35rem; background:transparent; color:#656e67; font-size:0.8125rem; cursor:pointer; }
.supply-period button[aria-pressed=true] { background:#fff; color:#314b3c; box-shadow:0 1px 5px #21382910; font-weight:700; }
.supply-commodity-controls { display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; margin:1rem 0 .7rem; }
.supply-commodity-controls>span { margin-right:.3rem; color:#667069; font-size:0.8125rem; }
.supply-commodity-controls button { padding:.35rem .7rem; border:1px solid #e4e9e2; border-radius:999px; background:#fff; color:#646e66; font-size:0.8125rem; cursor:pointer; }
.supply-commodity-controls button[aria-pressed=true] { border-color:#a8d8c2; background:#eff8f2; color:#2b7a5c; font-weight:700; }
.supply-commodity-controls small { margin-left:auto; color:#7c6e4b; font-size:0.8125rem; }
.supply-chart-scroll { overflow-x:auto; scrollbar-width:thin; }
.supply-chart-scroll svg { display:block; width:100%; min-width:640px; height:auto; }
.supply-chart-scroll text { font-family:inherit; font-variant-numeric:tabular-nums; }
.supply-price-line { fill:none; stroke:#2d9c75; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.supply-traffic-bar { fill:#7c9dd6; }
.supply-timeline { margin-top:.6rem; padding:.7rem .9rem; border:1px solid #e8ede6; border-radius:.6rem; background:#fafbf8; }
.supply-timeline-top { display:flex; justify-content:space-between; align-items:center; gap:.5rem; color:#667068; font-size:0.8125rem; }
.supply-timeline output { color:#536c5a; font-size:0.8125rem; font-weight:650; }
.supply-timeline input { width:100%; height:10px; margin:.65rem 0 .5rem; accent-color:#557c65; cursor:pointer; }
.supply-cursor-readout { display:flex; flex-wrap:wrap; gap:.3rem 1.2rem; color:#626f66; font-size:0.8125rem; font-variant-numeric:tabular-nums; }
.supply-cursor-readout b { margin-left:.35rem; font-size:0.8125rem; font-weight:700; color:#526d9b; }
.supply-cursor-readout>span:last-child b { color:#2b7a5c; }
.supply-demo-note { margin:.7rem 0 0; color:#697069; font-size:0.8125rem; line-height:1.8; }
.supply-demo-note b { margin-right:.3rem; color:#786a48; font-weight:600; }
.supply-original { margin-top:1.2rem; }
.supply-original>summary { color:#647067; font-size:0.8125rem; cursor:pointer; }
.supply-original>summary span { margin-left:.5rem; color:#666e65; font-size:0.8125rem; }
.supply-original>p { color:#656e65; font-size:0.8125rem; }
.supply-monitor button:focus-visible,.supply-trends button:focus-visible,.supply-map-scroll:focus-visible,.supply-chart-scroll:focus-visible { outline:2px solid #4169e1; outline-offset:-3px; }
@media(max-width:1100px) {
 .supply-map-layout { grid-template-columns:minmax(0,1fr) 260px; }
 .supply-map-canvas { min-width:630px; }
 .supply-map-legend small { display:none; }
 .supply-location { padding:1rem; }
 .supply-location h3 { font-size:1.21rem; }
}
@media(max-width:800px) {
 .supply-map-layout { grid-template-columns:1fr; }
 .supply-map-canvas { min-width:690px; }
 .supply-location { border-left:0; border-top:1px solid var(--line); padding:1.1rem; }
 .supply-location-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }
 .supply-location>p { max-width:45rem; }
 .supply-location>p.supply-location-note { padding-top:.65rem; }
 .supply-location-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .supply-location-tabs button { border-bottom:1px solid #edf1ec; }
 .supply-location-tabs button:nth-child(3n) { border-right:0; }
}
@media(max-width:520px) {
 .supply-monitor-bar { padding:.85rem 1rem; }
 .supply-monitor-bar>div>span:last-child { display:none; }
 .supply-demo-badge { font-size:0.8125rem; }
 .supply-map-legend { gap:.8rem; padding:.8rem 1rem .3rem; }
 .supply-map-foot { padding:.2rem 1rem .65rem; }
 .supply-location-metrics { grid-template-columns:1fr 1fr; }
 .supply-location-tabs button { font-size:0.8125rem; }
 .supply-trends { padding:1.1rem .95rem .85rem; }
 .supply-trend-header { align-items:flex-start; gap:.5rem; }
 .supply-trend-header h3 { font-size:0.957rem; }
 .supply-trend-header p { line-height:1.6; }
 .supply-period button { min-width:33px; }
 .supply-commodity-controls { gap:.3rem; }
 .supply-commodity-controls button { padding:.35rem .55rem; }
 .supply-commodity-controls>span { flex-basis:100%; margin-bottom:.2rem; }
 .supply-commodity-controls small { font-size:0.8125rem; }
 .supply-timeline { padding:.7rem; }
 .supply-timeline-top { flex-wrap:wrap; }
 .supply-cursor-readout { gap:.3rem .65rem; font-size:0.8125rem; }
 .supply-demo-note { font-size:0.8125rem; }
}