/* Geography controls borrow Classic's existing surfaces and dimensions. */
#map-context-control { border-bottom:1px solid var(--navy-rule); margin-bottom:10px; padding-bottom:10px; }
#context-toggle { width:100%; min-height:44px; background:var(--navy-surface-raised); border:1px solid var(--navy-rule); border-radius:4px; padding:8px; color:var(--navy-text-strong); font:600 14px/1.4 var(--font-sans); text-align:left; cursor:pointer; }
#context-depth-key { display:flex; flex-wrap:wrap; gap:2px 12px; margin:7px 0 0; color:var(--navy-muted); font-size:11px; line-height:1.5; }
#context-depth-key[hidden] { display:none; }
#context-depth-key > span:first-child { width:100%; }
#context-depth-key i { display:inline-block; width:20px; margin-right:5px; vertical-align:middle; border-top:1px solid #75a5ba; }
#context-depth-key i.depth-dashed { border-top-style:dashed; }
.depth-colour-ramp { position:relative; width:190px; height:10px; overflow:hidden; margin-top:3px; }
.depth-colour-ramp > span { position:absolute; left:190px; top:0; width:10px; height:190px; transform-origin:0 0; transform:rotate(90deg); background-image:url('https://www.gebco.net/sites/default/files/images/gebco_depth_colour_key_vertical.jpg'); background-size:auto 190px; background-position:-2px 0; }
.depth-colour-labels { width:190px; position:relative; height:17px; font-size:10px; }
.depth-colour-labels span { position:absolute; top:0; }
.depth-colour-labels span:nth-child(1) { left:0; }
.depth-colour-labels span:nth-child(2) { left:10%; transform:translateX(-50%); }
.depth-colour-labels span:nth-child(3) { left:30%; transform:translateX(-50%); }
.depth-colour-labels span:nth-child(4) { left:60%; transform:translateX(-50%); }
.depth-colour-labels span:nth-child(5) { right:0; }
#context-depth-key > strong,#context-depth-key > small { width:100%; }
#context-depth-key a { color:var(--navy-focus); }
#context-shipping-key { margin-top:8px; font-size:11px; line-height:1.5; color:var(--navy-muted); }
#context-shipping-key[hidden] { display:none; }
#context-shipping-key strong,#context-shipping-key small { display:block; }
#context-shipping-key a { color:var(--navy-focus); }
.shipping-gradient { height:7px; margin:5px 0; background:linear-gradient(to right,rgba(245,85,35,.05),rgba(245,250,200,.9)); }
/* Compact key lines and the chooser's copy of the full keys are phone-only. */
.context-key-compact,.context-chooser-keys { display:none; }
.context-chooser-keys { border-top:1px solid var(--navy-rule); margin-top:10px; padding-top:10px; }
.context-chooser-key { color:var(--navy-muted); font-size:11px; line-height:1.5; margin-bottom:10px; }
.context-chooser-key strong,.context-chooser-key small { display:block; }
.context-chooser-key a { color:var(--navy-focus); }
.context-chooser-depth { display:flex; flex-wrap:wrap; gap:2px 12px; }
.context-chooser-depth > strong,.context-chooser-depth > small { width:100%; }
.context-shipping { border-top:5px solid #f5b45a; }
#context-count { color:var(--navy-muted); white-space:nowrap; }
#context-load-status { display:block; font-size:11px; line-height:1.5; color:var(--navy-muted); }
#context-load-status:empty { display:none; }
#context-chooser,#context-overview { position:fixed; z-index:1001; color:var(--navy-text); background:var(--navy-canvas); border:1px solid var(--navy-rule); box-shadow:0 8px 30px #0008; box-sizing:border-box; font-size:14px; line-height:1.65; }
#context-chooser[hidden],#context-overview[hidden] { display:none; }
#context-chooser { width:310px; max-height:calc(100dvh - 24px); overflow:auto; border-radius:6px; padding:16px; }
#context-chooser header { display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:12px; padding:0; min-height:44px; background:var(--navy-canvas); border:0; }
#context-chooser h2 { font:600 18px/1.4 var(--font-sans); margin:0; }
#context-chooser button,#context-overview button { min-height:44px; color:var(--navy-text); border:1px solid var(--navy-rule); background:var(--navy-surface-raised); border-radius:4px; padding:8px 12px; font:inherit; cursor:pointer; }
#context-chooser [data-context-close] { font-size:24px; min-width:44px; padding:0; background:none; border:0; }
.context-bulk { display:flex; align-items:center; gap:4px; margin:4px 0; }
#context-chooser .context-bulk button { background:none; border:0; color:var(--navy-focus); }
.context-layers label { display:flex; align-items:center; gap:10px; min-height:56px; padding:4px 0; cursor:pointer; }
.context-layers input { accent-color:var(--navy-focus); width:18px; height:18px; flex-shrink:0; }
.context-layers strong { display:block; font-size:13px; }
.context-layers small { display:block; font-size:11px; color:var(--navy-muted); line-height:1.5; }
.context-sample { display:block; width:22px; flex-shrink:0; color:var(--context-colour); border-top:1px solid currentColor; }
.context-chokepoints { border:0; font-size:24px; line-height:1; }
.context-chains { border-top:2px dotted currentColor; }
.context-corridors { border-top:2px dashed currentColor; }
#context-status { font-size:12px; color:var(--navy-muted); margin:8px 0; }
#context-status:empty { display:none; }
#context-find { border-top:1px solid var(--navy-rule); margin:10px 0; }
#context-find summary { min-height:44px; display:list-item; align-content:center; cursor:pointer; }
#context-feature-list h3 { font-size:12px; margin:12px 0 4px; color:var(--navy-muted); }
#context-feature-list button { display:block; width:100%; text-align:left; border:0; background:none; font-size:13px; }
#context-overview { top:0; right:0; width:360px; max-width:90vw; height:100dvh; overflow:auto; padding:48px 22px 24px; }
#context-overview h2 { font:600 26px/1.2 var(--font-sans); color:var(--navy-text-strong); margin:8px 0 18px; }
.context-category { color:var(--navy-muted); font-size:12px; margin:0; }
#context-overview .close-btn { position:sticky; display:block; top:0; margin-left:auto; margin-top:-36px; padding:0; border:0; width:44px; font-size:26px; background:var(--navy-canvas); z-index:2; }
.context-overview-actions { display:flex; gap:8px; flex-wrap:wrap; margin:20px 0; }
.context-geometry { font-size:12px; color:var(--navy-muted); }
.context-source { font-size:12px; overflow-wrap:anywhere; }
#context-overview a,#context-article a { color:var(--navy-focus); }
#context-overview,#context-article { overflow-wrap:anywhere; }
#context-article-status { font-size:12px; }
.context-map-point { display:grid; place-items:center; color:#e0c493; font-size:25px; text-shadow:0 1px 4px #000; }
.context-map-point.is-selected { color:#fff1cd; font-size:32px; }
.context-map-point:focus-visible { outline:2px solid var(--navy-focus); outline-offset:1px; }
#context-article-backdrop { position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; background:#0009; }
#context-article-backdrop.hidden { display:none; }
#context-article { position:relative; width:min(820px,92vw); max-height:90dvh; overflow:auto; box-sizing:border-box; background:var(--navy-canvas); color:var(--navy-text); border:1px solid var(--navy-rule); padding:12px 64px 52px; border-radius:8px; font-size:16px; line-height:1.8; }
#context-article h1 { color:var(--navy-text-strong); font:600 34px/1.2 var(--font-sans); margin:8px 0 24px; }
#context-article h2 { color:var(--navy-text-strong); font:600 22px/1.3 var(--font-sans); margin:30px 0 12px; }
#context-article p { margin:0 0 18px; }
#context-article .close-btn { position:sticky; display:block; top:0; margin-left:auto; right:0; z-index:2; color:var(--navy-text); background:var(--navy-canvas); min-width:44px; min-height:44px; }
#context-article .context-citation { font-size:12px; white-space:normal; }
#context-article footer { border-top:1px solid var(--navy-rule); margin-top:28px; padding-top:18px; font-size:13px; }
#context-article li { margin-bottom:12px; overflow-wrap:anywhere; }
#context-chooser :focus-visible,#context-overview :focus-visible,#context-article :focus-visible,#context-toggle:focus-visible { outline:2px solid var(--navy-focus); outline-offset:3px; }
@media(max-width:780px) {
  /* Context attribution can wrap to several lines on phones. Keep the filter
     toggle above it so both controls remain reachable with every layer on. */
  #type-filter { bottom:48px; }
  /* The panel docks over the map here, so collapsed it must stay one slim bar.
     The filter toggle and context button share a row; each key shrinks to one
     line and its full form moves into the chooser. Without this the always-open
     context block made the "collapsed" panel cover half a phone-sized map. */
  #type-filter { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; padding:6px 8px; }
  #type-filter.context-covered { visibility:hidden; }
  #map-context-control,#type-filter .filter-header { display:contents; }
  #filter-collapse,#context-toggle { flex:1 1 0; min-width:0; min-height:44px; padding:6px 10px; font-size:14px; line-height:1.3; }
  #filter-collapse { order:1; border:1px solid var(--navy-rule); border-radius:4px; background:var(--navy-surface-raised); color:var(--navy-text-strong); }
  #context-toggle { order:2; width:auto; }
  #context-load-status { order:3; width:100%; }
  #context-depth-key { order:4; width:100%; margin:0; }
  #context-shipping-key { order:5; width:100%; margin:0; }
  #type-filter .filter-actions { order:6; width:100%; text-align:right; }
  #filter-body { order:7; width:100%; }
  #context-depth-key.has-compact > :not(.context-key-compact),#context-shipping-key > :not(.context-key-compact) { display:none; }
  .context-key-compact { display:flex; align-items:center; gap:6px; white-space:nowrap; }
  .context-key-compact .shipping-gradient { flex:1; min-width:40px; margin:0; }
  .context-key-compact .depth-colour-ramp { flex:none; width:120px; height:6px; margin:0; }
  .context-key-compact .depth-colour-ramp > span { left:120px; width:6px; height:120px; background-size:auto 120px; background-position:-1px 0; }
  .context-chooser-keys { display:block; }
  #context-chooser { inset:auto 0 0; width:100%; max-height:50dvh; border-radius:10px 10px 0 0; padding:12px 18px max(16px,env(safe-area-inset-bottom)); }
  #context-chooser header { position:sticky; top:-12px; z-index:1; }
  .context-layers label { min-height:48px; }
  #context-overview { top:auto; bottom:0; left:0; width:100%; max-width:none; height:auto; max-height:45dvh; border-radius:10px 10px 0 0; padding:36px 20px max(16px,env(safe-area-inset-bottom)); }
  #context-overview h2 { font-size:23px; margin:4px 0 12px; }
  #context-overview p { margin-top:8px; }
  #context-article { width:100%; max-height:100dvh; height:100dvh; border-radius:0; padding:8px 22px 28px; }
  #context-article h1 { font-size:28px; }
  #context-article-backdrop { padding:0; }
}