/* WEO demo UI — design system v2.0 (Deep Forest / Resilience Green / Water Blue / Risk Orange / AI Mint / Mist).
   One stylesheet for every demo. A page only sets --theme, the colour of its data highlights (pins, key numbers);
   controls and actions are always Resilience Green. */
/* Fonts ship with the site (latin subsets) so the demos also work offline. */
@font-face{ font-family:"Inter"; src:url("fonts/inter.woff2") format("woff2"); font-weight:400 700; font-display:swap; }
@font-face{ font-family:"Manrope"; src:url("fonts/manrope.woff2") format("woff2"); font-weight:600 800; font-display:swap; }
@font-face{ font-family:"IBM Plex Mono"; src:url("fonts/plexmono-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face{ font-family:"IBM Plex Mono"; src:url("fonts/plexmono-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
:root{
  --forest:#0E2A24; --green:#1F7A55; --green-dark:#17603F; --blue:#0E6A88; --orange:#E8833A; --mint:#8FD9B0; --mist:#F4F7F3;
  --high:#9C3A16; --mid-ink:#A3501A;
  --card:#FFFFFF; --line:#DDE5DF; --line-2:#E8EEEA; --ink:#0E2A24; --ink-dim:#3F534D; --ink-faint:#5F716B; --on-dark:#B9CCC4;
  --tint-green:#E3F1E9; --tint-orange:#FCE6D3; --tint-blue:#E2EFF4;
  --theme:var(--green);
  --r-sm:8px; --r:12px; --shadow:0 2px 10px rgba(14,42,36,.12);
  --f-display:'Manrope',sans-serif; --f-body:'Inter',-apple-system,'Segoe UI',sans-serif; --f-mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{ box-sizing:border-box; }
html,body{ margin:0; min-height:100%; }
body{ background:var(--mist); color:var(--ink); font:400 14px/1.45 var(--f-body); -webkit-font-smoothing:antialiased; }
h1,h2,h3,.num{ font-family:var(--f-display); }
button,select,input{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.label,.sidebar h3,.sim h3{ font:500 11px/1.2 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }

/* ---------- hero + demo banner ---------- */
.hero{ background:var(--forest); color:#fff; }
.hero-in{ max-width:1560px; margin:0 auto; padding:22px 24px 24px; display:flex; justify-content:space-between; align-items:flex-end; gap:16px 32px; flex-wrap:wrap; }
.hero .logo{ height:30px; display:block; margin-bottom:20px; }
.embedded .hero .logo{ display:none; }
.eyebrow{ font:500 11.5px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--mint); margin-bottom:10px; }
.hero h1{ font:800 30px/1.1 var(--f-display); letter-spacing:-.015em; margin:0; }
.hero p{ margin:8px 0 0; color:var(--on-dark); font-size:14.5px; max-width:760px; }
.tags{ display:flex; gap:6px; flex-wrap:wrap; }
.tag{ font:500 11px/1 var(--f-mono); letter-spacing:.04em; color:var(--mint); border:1px solid rgba(143,217,176,.45); border-radius:999px; padding:6px 11px; white-space:nowrap; }
.banner{ background:var(--orange); color:var(--forest); font-size:13px; padding:9px 24px; display:flex; gap:10px; align-items:center; justify-content:center; text-align:left; }
.banner svg{ flex:0 0 auto; }
.banner b{ font-weight:700; }

/* ---------- three-column layout ---------- */
/* The three-column row fills the screen below hero + banner (--chrome, measured by weo.js); the side panels scroll
   inside it, so the map keeps a stable size. */
.layout{ display:flex; gap:16px; padding:20px 24px; align-items:stretch; max-width:1560px; margin:0 auto;
  height:max(520px, calc(100vh - var(--chrome, 250px))); height:max(520px, calc(100dvh - var(--chrome, 250px))); }
.panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); }
.sidebar{ width:252px; flex:0 0 252px; padding:18px 16px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.detail{ width:364px; flex:0 0 364px; padding:20px; overflow-y:auto; -webkit-overflow-scrolling:touch; }

/* inside the hub (presenting): compact header so the map gets the screen */
.embedded .hero-in{ padding:12px 20px; align-items:center; }
.embedded .eyebrow{ margin-bottom:4px; font-size:10.5px; }
.embedded .hero h1{ font-size:22px; }
.embedded .hero p{ margin-top:3px; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:62vw; }
.embedded .banner{ font-size:12px; padding:6px 20px; }



/* ---------- sidebar controls ---------- */
.sidebar h3{ margin:22px 0 8px; }
.sidebar > h3:first-child{ margin-top:0; }
.hint{ padding:2px 2px 6px; font-size:12px; color:var(--ink-faint); line-height:1.4; }
.layer-option{ display:flex; align-items:center; gap:10px; min-height:44px; padding:8px 10px; border-radius:var(--r-sm); cursor:pointer; margin-bottom:2px; border:1px solid transparent; font-size:14px; }
.layer-option:hover{ background:var(--mist); }
.layer-option.active{ background:var(--tint-green); border-color:var(--green); font-weight:600; }
.swatch{ width:14px; height:14px; border-radius:4px; flex:0 0 auto; }
.toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; padding:4px 2px; font-size:14px; }
.switch{ position:relative; width:42px; height:24px; flex:0 0 auto; }
.switch input{ opacity:0; width:0; height:0; }
.slider-pill{ position:absolute; inset:0; background:#C9D3CE; border-radius:999px; transition:.15s; cursor:pointer; }
.slider-pill::before{ content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.15s; box-shadow:0 1px 2px rgba(14,42,36,.3); }
.switch input:checked + .slider-pill{ background:var(--green); }
.switch input:checked + .slider-pill::before{ transform:translateX(18px); }
.switch input:focus-visible + .slider-pill{ outline:2px solid var(--blue); outline-offset:2px; }
input[type=range]{ width:100%; accent-color:var(--green); height:28px; }
.opacity-lbl{ padding:6px 2px 0; font-size:13px; color:var(--ink-dim); }
.seg-row,.seg{ display:flex; gap:6px; }
.seg{ margin-bottom:12px; }
.seg-btn,.seg button{ flex:1; min-height:44px; background:var(--card); border:1px solid var(--line); color:var(--ink-dim); font-size:13px; font-weight:500; padding:6px 6px; border-radius:var(--r-sm); cursor:pointer; line-height:1.2; }
.seg-btn:hover,.seg button:hover{ border-color:var(--ink-faint); color:var(--ink); }
.seg-btn.active,.seg button.active{ background:var(--green); border-color:var(--green); color:#fff; font-weight:600; }
.city-btn,.area-btn{ display:block; width:100%; min-height:44px; text-align:left; background:var(--card); border:1px solid var(--line); color:var(--ink); font-size:13.5px; padding:9px 12px; border-radius:var(--r-sm); cursor:pointer; margin-bottom:6px; line-height:1.3; }
.city-btn:hover,.area-btn:hover{ border-color:var(--green); }
.city-btn.active,.area-btn.active{ background:var(--green); border-color:var(--green); color:#fff; font-weight:600; }
select{ width:100%; min-height:44px; appearance:none; -webkit-appearance:none; background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230E2A24' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 12px center; color:var(--ink); border:1px solid #C9D3CE; border-radius:var(--r-sm); padding:8px 34px 8px 12px; font-size:14px; cursor:pointer; }
select:hover{ border-color:var(--ink-faint); }
.locked{ opacity:.4; pointer-events:none; filter:grayscale(.6); }
.lockhint{ font-size:12.5px; color:#6B3412; background:var(--tint-orange); border:1px solid #F2B98C; border-radius:var(--r-sm); padding:8px 10px; margin:8px 0 2px; line-height:1.4; }
.lockhint.hide{ display:none; }

/* ---------- legend ---------- */
.legend{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.legend .title{ font-size:13px; font-weight:600; color:var(--ink); }
.legend .bar{ height:10px; border-radius:3px; margin:8px 0 5px; }
.legend .labels{ display:flex; justify-content:space-between; font:500 11px var(--f-mono); color:var(--ink-faint); }
.legend .cats{ margin-top:8px; display:grid; gap:6px; }
.legend .cat{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-dim); }
.legend .cat i{ width:14px; height:14px; border-radius:3px; display:inline-block; flex:0 0 auto; }
.lampcats{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line-2); }
.lampcats .title{ margin-bottom:2px; }
.lampdot{ border-radius:50%!important; width:12px!important; height:12px!important; border:1.5px solid var(--forest); }
.lampdot.hollow{ border-color:#7D8B86; }
.ringdot{ border-radius:50%!important; width:13px!important; height:13px!important; border:2px dashed var(--orange); background:transparent!important; }
.simnote{ margin-top:10px; font-size:12.5px; color:var(--green); line-height:1.4; }
.simnote:empty{ display:none; }

/* ---------- map ---------- */
.map-wrap{ flex:1 1 520px; min-width:300px; padding:14px; display:flex; flex-direction:column; }
.map-head{ display:flex; justify-content:space-between; align-items:center; margin:0 2px 10px; gap:8px; flex-wrap:wrap; min-height:32px; }
#crumb{ font-size:13.5px; color:var(--ink-dim); }
#crumb b{ color:var(--ink); font-weight:600; }
#crumb a{ color:var(--blue); text-decoration:none; font-weight:500; }
#crumb a:hover{ text-decoration:underline; }
#mapBox{ position:relative; flex:1; min-height:0; }
#map{ position:absolute; inset:0; border-radius:var(--r-sm); background:#DCE3DE; }
#map.bm-osm .leaflet-tile-pane{ filter:grayscale(.55) contrast(.96); }
#map.bm-sat .leaflet-tile-pane{ filter:brightness(.92); }
.px-overlay{ image-rendering:-moz-crisp-edges; image-rendering:crisp-edges; image-rendering:pixelated; }
#pixelInfo{ display:none; position:absolute; z-index:800; left:12px; bottom:12px; background:var(--card); box-shadow:var(--shadow); color:var(--ink-dim); padding:8px 12px; border-radius:var(--r-sm); font-size:12.5px; pointer-events:none; max-width:88%; }
#pixelInfo b{ color:var(--ink); font-weight:600; }
#loading{ display:none; position:absolute; inset:0; z-index:900; align-items:center; justify-content:center; background:rgba(244,247,243,.78); color:var(--ink); font-size:14px; font-weight:500; border-radius:var(--r-sm); }
#tileNote{ display:none; position:absolute; z-index:800; left:12px; bottom:56px; max-width:80%; background:var(--tint-orange); color:#6B3412; border:1px solid #F2B98C; padding:8px 12px; border-radius:var(--r-sm); font-size:12.5px; box-shadow:var(--shadow); }
#mapHint{ display:none; position:absolute; z-index:800; top:12px; left:50%; transform:translateX(-50%); background:var(--forest); color:#fff; padding:9px 14px; border-radius:var(--r-sm); font-size:13px; max-width:80%; text-align:center; pointer-events:none; box-shadow:var(--shadow); }
.leaflet-container{ font-family:var(--f-body); }
.leaflet-control-attribution{ background:rgba(255,255,255,.85)!important; color:var(--ink-faint)!important; font-size:10px; }
.leaflet-control-attribution a{ color:var(--blue)!important; }
.leaflet-bar{ border:1px solid var(--line)!important; box-shadow:var(--shadow)!important; border-radius:var(--r-sm)!important; overflow:hidden; }
.leaflet-bar a{ width:36px!important; height:36px!important; line-height:36px!important; background:var(--card)!important; color:var(--ink)!important; border-color:var(--line)!important; }
.leaflet-bar a:hover{ background:var(--mist)!important; }

/* map markers */
.city-pin-wrap,.pin-wrap,.nb-badge-wrap,.simtag-wrap{ background:none; border:none; }
.city-pin,.pin{ position:relative; display:flex; align-items:center; gap:8px; cursor:pointer; transform:translate(-9px,-9px); white-space:nowrap; }
.city-pin .dot,.pin .dot{ width:18px; height:18px; border-radius:50%; background:var(--theme); border:3px solid #fff; box-shadow:0 0 0 3px rgba(14,42,36,.25),0 2px 6px rgba(14,42,36,.35); flex:0 0 auto; transition:box-shadow .15s; }
.city-pin:hover .dot,.pin:hover .dot{ box-shadow:0 0 0 6px rgba(255,255,255,.45),0 2px 6px rgba(14,42,36,.35); }
.city-pin .lbl,.pin .lbl{ display:flex; flex-direction:column; background:var(--card); color:var(--ink); border-radius:var(--r-sm); padding:5px 10px; line-height:1.25; font-size:13px; font-weight:600; box-shadow:var(--shadow); }
.city-pin .lbl b{ font-size:13px; font-weight:700; }
.city-pin .lbl i{ font:500 10.5px var(--f-mono); color:var(--ink-faint); font-style:normal; letter-spacing:.02em; }
.hotspot-dot{ animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
.nb-badge{ transform:translate(-50%,-50%); width:28px; height:28px; border-radius:50%; background:var(--card); border:3px solid #888; color:var(--ink); font:800 13px var(--f-display); display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(14,42,36,.4); }
.nb-badge.sel{ outline:3px solid var(--mint); outline-offset:1px; }
.simtag{ display:inline-block; transform:translate(-50%,-50%); background:var(--forest); color:var(--mint); border:1px solid var(--mint); border-radius:999px; padding:4px 10px; font:600 13px var(--f-mono); white-space:nowrap; }
.weo-pop .leaflet-popup-content-wrapper{ background:var(--card); color:var(--ink); border-radius:var(--r); box-shadow:var(--shadow); }
.weo-pop .leaflet-popup-tip{ background:var(--card); }
.weo-pop a.leaflet-popup-close-button{ color:var(--ink-faint); }
.pop{ font-size:13px; line-height:1.4; }
.pop span{ color:var(--ink-faint); font-size:12px; }
.pop-btns{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:10px; }
.pop-btns button{ min-height:36px; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-sm); font-size:12px; padding:5px 6px; cursor:pointer; }
.pop-btns button:hover{ border-color:var(--green); }
.pop-btns button.on{ background:var(--green); color:#fff; border-color:var(--green); font-weight:600; }
.pop-btns.three{ grid-template-columns:1fr 1fr 1fr; }
.ptab{ display:grid; gap:4px; margin-top:10px; }
.ptab div{ display:flex; justify-content:space-between; gap:12px; font-size:12.5px; }
.ptab span{ color:var(--ink-faint); }
.ptab b{ font-weight:600; text-align:right; }
.tdot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:0; box-shadow:0 0 0 1px rgba(14,42,36,.35); }

/* per-stretch risk profile (lineside) */
.prof{ display:block; margin-top:8px; cursor:pointer; }
.prof g:hover rect:first-child{ fill:rgba(14,42,36,.06); }
#profInf{ margin-bottom:2px; }

/* ---------- detail panel ---------- */
.detail h2{ font:700 20px/1.2 var(--f-display); margin:0 0 4px; letter-spacing:-.01em; }
.detail .sub{ font-size:13px; color:var(--ink-faint); margin-bottom:16px; }
.detail .hint{ padding:0 0 8px; }
.sim{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.sim h3{ margin:0 0 10px; }
.empty-state,.empty{ color:var(--ink-faint); font-size:13px; line-height:1.5; }
.empty{ padding:8px 2px; }
.note{ font-size:12px; color:var(--ink-faint); margin-top:8px; line-height:1.45; }
.city-row{ display:flex; width:100%; min-height:52px; justify-content:space-between; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 12px; margin-bottom:6px; cursor:pointer; color:var(--ink); text-align:left; transition:border-color .12s; }
.city-row:hover{ border-color:var(--green); }
.city-row b{ display:block; font-size:14px; font-weight:600; }
.city-row i{ display:block; font-size:12px; color:var(--ink-faint); font-style:normal; margin-top:1px; }
.city-row .num{ color:var(--theme); font-weight:700; font-size:16px; }
.stat-row,.srow{ display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--line-2); font-size:13.5px; }
.stat-row .k,.srow{ color:var(--ink-dim); }
.stat-row .num{ color:var(--ink); font-weight:700; }
.srow{ padding:5px 0; font-size:13px; }
.srow:last-child{ border-bottom:none; }
.srow b{ color:var(--ink); font-weight:600; }
.srow b.okc{ color:var(--green); } .srow b.noc{ color:var(--high); }
.srow.both{ border-top:1px solid var(--line); margin-top:4px; padding-top:8px; }
.slider-row{ margin-bottom:10px; }
.slider-row .lbl{ display:flex; justify-content:space-between; font-size:13px; color:var(--ink-dim); margin-bottom:2px; }
.scn-row{ margin-bottom:10px; }
.scn-row label{ display:block; font-size:13px; font-weight:500; color:var(--ink); margin-bottom:4px; }
.simshow{ display:flex; align-items:center; gap:8px; min-height:36px; font-size:13px; color:var(--ink-dim); margin:2px 0 6px; cursor:pointer; }
.simshow input{ accent-color:var(--green); width:18px; height:18px; }
.result{ margin-top:10px; background:var(--mist); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 14px; }
.insight{ margin-top:10px; font-size:12.5px; color:#6B3412; background:var(--tint-orange); border:1px solid #F2B98C; border-radius:var(--r-sm); padding:8px 10px; line-height:1.45; }

/* dark "climate risk indicator" card: the headline number of a view */
.indicator,.kpi.big{ background:var(--forest); border:none; border-radius:var(--r); color:#fff; padding:16px 18px; }
.indicator .big{ font:800 32px/1.1 var(--f-display); color:#fff; letter-spacing:-.01em; }
.indicator .delta{ font:500 12.5px var(--f-mono); color:var(--mint); margin-top:4px; }
.indicator .note{ color:var(--on-dark); }

/* KPI tiles */
.kpis{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:6px; }
.kpis2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:4px; }
.kpi,.kpi2{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; display:flex; flex-direction:column; gap:2px; font-size:12px; color:var(--ink-dim); line-height:1.3; }
.kpi .num,.kpi2 .num{ font-size:22px; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.kpi2 em{ font:500 10.5px var(--f-mono); font-style:normal; color:var(--ink-faint); letter-spacing:.04em; text-transform:uppercase; }
.kpi.big{ grid-column:1 / -1; flex-direction:row; align-items:center; gap:14px; color:var(--on-dark); font-size:13px; }
.kpi.big .num{ font-size:32px; color:#fff; white-space:nowrap; }

/* status badges (design system) */
.verdict,.sres,.chip2{ display:inline-block; font-weight:600; border-radius:999px; line-height:1.2; }
.verdict{ font-size:13px; padding:5px 12px; margin-bottom:10px; }
.sres{ font-size:12.5px; padding:4px 11px; margin-top:8px; }
.chip2{ font-size:11px; padding:3px 9px; }
.verdict.ok,.sres.ok,.chip2.ok{ background:var(--tint-green); color:var(--green); }
.verdict.mid,.sres.mid{ background:var(--tint-orange); color:var(--mid-ink); }
.verdict.no,.sres.no,.chip2.no{ background:var(--high); color:#fff; }
.chip2.info{ background:var(--forest); color:var(--mint); font:500 10.5px var(--f-mono); letter-spacing:.04em; }
.badge{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font:800 13px var(--f-display); flex:0 0 auto; }
.badge.ok{ background:var(--green); color:#fff; } .badge.mid{ background:var(--orange); color:var(--forest); } .badge.no{ background:var(--high); color:#fff; }
.minis{ display:flex; gap:5px; flex:1; justify-content:flex-end; }
.mini{ font:500 11px var(--f-mono); padding:4px 7px; border-radius:6px; border:1px solid var(--line); color:var(--ink-dim); white-space:nowrap; }
.mini b{ color:var(--ink); margin-right:3px; font-weight:600; }
.mini.ok{ border-color:var(--green); background:var(--tint-green); } .mini.no{ border-color:#E3B5A2; background:#FBEDE7; }
.metric{ padding:12px 0; border-bottom:1px solid var(--line-2); }
.mh{ display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:500; color:var(--ink); }
.mv{ display:flex; align-items:baseline; gap:8px; margin:4px 0 6px; }
.mv .num{ font-size:24px; font-weight:800; }
.mv .tgt{ font-size:12px; color:var(--ink-faint); }
.pbar{ position:relative; height:8px; background:#E3E9E5; border-radius:4px; }
.pbar .fill{ height:100%; border-radius:4px; }
.pbar .fill.ok{ background:var(--green); } .pbar .fill.no{ background:var(--high); }
.pbar .tick{ position:absolute; top:-3px; width:2px; height:14px; background:var(--forest); border-radius:1px; }
.mn{ font-size:12px; color:var(--ink-faint); margin-top:6px; }

/* region overview cards and ranking (dark infrastructure) */
.gaps{ display:grid; gap:6px; margin-bottom:6px; }
.gap{ display:flex; gap:10px; align-items:center; background:var(--mist); border-radius:var(--r-sm); padding:9px 12px; font-size:13px; color:var(--ink-dim); }
.gap b{ width:26px; height:26px; border-radius:50%; background:var(--forest); color:var(--mint); display:flex; align-items:center; justify-content:center; font:600 11px var(--f-mono); flex:0 0 auto; }
.area-card{ display:flex; flex-direction:column; gap:3px; width:100%; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 13px; margin-bottom:6px; cursor:pointer; color:var(--ink); }
.area-card:hover{ border-color:var(--green); }
.area-card .an{ font-weight:700; font-size:14px; font-family:var(--f-display); }
.area-card .ab{ font-size:12.5px; color:var(--ink-faint); }
.area-card .am{ font-size:12.5px; color:var(--ink-dim); }
.area-card .am b{ color:var(--ink); }
table.rank{ width:100%; border-collapse:collapse; font-size:12.5px; margin-top:6px; }
table.rank th{ text-align:left; font:500 10.5px var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); padding:4px 5px; }
table.rank td{ padding:7px 5px; border-top:1px solid var(--line-2); color:var(--ink-dim); }
table.rank td em{ display:block; font-style:normal; font-size:11px; color:var(--ink-faint); }
table.rank tr[data-id]{ cursor:pointer; }
table.rank tr[data-id]:hover td{ background:var(--mist); }
table.rank tr.pick td{ color:var(--ink); background:var(--tint-green); }
#rankBody.busy{ opacity:.45; }

/* buttons */
.btnrow{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.link-btn{ min-height:40px; background:var(--card); border:1px solid var(--forest); color:var(--forest); font-size:13px; font-weight:600; padding:8px 14px; border-radius:var(--r-sm); cursor:pointer; }
.link-btn:hover{ background:var(--mist); }
.link-btn.primary{ background:var(--green); border-color:var(--green); color:#fff; }
.link-btn.primary:hover{ background:var(--green-dark); }
#closeZone{ margin-top:0; }

/* ---------- method notes + footer ---------- */
details.method{ max-width:1512px; margin:0 24px 16px; }
@media (min-width:1561px){ details.method{ margin-left:auto; margin-right:auto; } }
details.method summary{ cursor:pointer; min-height:48px; display:flex; align-items:center; font-size:14px; font-weight:600; color:var(--ink); padding:12px 18px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); }
details.method[open] summary{ border-radius:var(--r) var(--r) 0 0; }
.method-body{ background:var(--card); border:1px solid var(--line); border-top:none; border-radius:0 0 var(--r) var(--r); padding:6px 18px 16px; font-size:13.5px; color:var(--ink-dim); line-height:1.6; }
.method-body b{ color:var(--ink); }
footer{ max-width:1560px; margin:0 auto; padding:14px 24px 28px; font:400 11.5px/1.7 var(--f-mono); color:var(--ink-faint); }

/* ---------- iPad / narrow screens (kept last so they override the base rules above) ---------- */
/* iPad landscape / small laptops: slimmer side panels */
@media (max-width:1280px){
  .layout{ gap:12px; padding:12px 14px; }
  .sidebar{ width:224px; flex-basis:224px; padding:14px 12px; }
  .detail{ width:312px; flex-basis:312px; padding:16px; }
  .map-wrap{ padding:10px; }
}
/* iPad portrait and phones: map on top, the two panels side by side underneath (page scrolls) */
@media (max-width:1000px){
  .layout{ flex-wrap:wrap; height:auto; }
  .map-wrap{ order:-1; flex:1 1 100%; }
  #mapBox{ flex:0 0 auto; height:58vh; height:58dvh; }
  .sidebar,.detail{ width:auto; flex:1 1 300px; overflow:visible; }
  .embedded .tags{ display:none; }
  .embedded .hero p{ max-width:none; }
}