/* ---------- atlas: who buys space in Europe (21 oktober 2026) ----------
   Eén roestaccent: het gekozen land. Petrol voor alle data. Geen kaartbibliotheek;
   de landvormen zijn vooraf geprojecteerd in assets/atlas-data.js. */
.atlas{padding-block:clamp(8px,2vw,20px) clamp(36px,5vw,64px)}
.atlas-controls{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:flex-end;margin-bottom:14px}
.atlas-controls label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--grey)}
.atlas-controls select{font:inherit;font-size:14.5px;color:var(--ink);background:var(--field);border:1px solid var(--field-border);border-radius:0;padding:8px 32px 8px 10px;min-width:12rem;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--brand) 50%),linear-gradient(135deg,var(--brand) 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.atlas-controls select:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.atlas-summary{font-size:15.5px;color:var(--soft);max-width:72ch;margin-bottom:18px;min-height:1.65em}
.atlas-wrap{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(22px,3.5vw,48px);align-items:start;border-top:2px solid var(--rule-strong);padding-top:18px}
.atlas-figure{margin:0}
#atlas-map{display:block;width:100%;height:auto;background:var(--field)}
.atlas-land path{fill:#e6dfd2;stroke:var(--bg);stroke-width:.6;stroke-linejoin:round;transition:fill .2s}
.atlas-land path.l1{fill:#c8d6d3}
.atlas-land path.l2{fill:#8fb0ad}
.atlas-land path.l3{fill:#4f7d7f}
.atlas-land path.l4{fill:var(--brand)}
.atlas-land path.buyer{cursor:pointer}
.atlas-land path.buyer:hover{fill-opacity:.82}
.atlas-land path.buyer:focus{outline:none}
.atlas-land path.buyer:focus-visible{stroke:var(--ink);stroke-width:1.6}
.atlas-land path.sel{stroke:var(--accent);stroke-width:2.2;paint-order:stroke}
.atlas-flows path{fill:none;stroke:var(--brand-deep);stroke-opacity:.42;stroke-linecap:round;pointer-events:stroke}
.atlas-flows path.in{stroke-opacity:.72}
.atlas-flows path:hover{stroke-opacity:.9}
.atlas-figure figcaption{font-size:12.5px;line-height:1.6;color:var(--grey);margin-top:10px;max-width:70ch}
.atlas-panel{font-size:14.5px;line-height:1.55}
.atlas-panel-head h2{font-size:clamp(24px,2.4vw,30px);line-height:1.15;color:var(--brand);margin-bottom:6px}
.atlas-panel-head p{color:var(--soft);margin:6px 0 4px}
.atlas-clear{font:inherit;font-size:13px;color:var(--brand);background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.atlas-block{border-top:1px dotted var(--dot);padding-top:12px;margin-top:14px}
.atlas-block h3{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--brand);margin-bottom:8px}
.atlas-list{list-style:none;margin:0;padding:0}
.atlas-list li{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.atlas-list .nm{min-width:0;overflow-wrap:anywhere}
.atlas-list small{color:var(--grey);font-size:12.5px}
.atlas-list .n,.atlas-bar .n{font-variant-numeric:tabular-nums;color:var(--soft);flex-shrink:0}
.atlas-bars{display:flex;flex-direction:column;gap:6px}
.atlas-bar{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 2.6em;gap:10px;align-items:center}
.atlas-bar .lbl{font-size:13px;color:var(--soft)}
.atlas-bar .tr{height:8px;background:#e6dfd2}
.atlas-bar .fl{display:block;height:100%;background:var(--brand)}
.atlas-bar .n{text-align:right;font-size:13px}
.atlas-recent{list-style:none;margin:0;padding:0}
.atlas-recent li{padding:7px 0;border-bottom:1px dotted var(--dot)}
.atlas-recent li:last-child{border-bottom:0}
.atlas-recent a{display:block;color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.atlas-recent a:hover{text-decoration-color:var(--brand)}
.atlas-recent .who,.atlas-recent .meta{display:block;font-size:12.5px;color:var(--grey)}
.atlas-noscript{color:var(--soft)}
@media (max-width:900px){
  .atlas-wrap{grid-template-columns:1fr}
  .atlas-controls select{min-width:0;width:100%}
  .atlas-controls label{flex:1 1 9rem}
}
.atlas-all{margin-top:8px}
.atlas-all summary{cursor:pointer;font-size:13px;color:var(--brand);text-decoration:underline;text-underline-offset:3px;padding:4px 0}
.atlas-all[open] summary{margin-bottom:4px}
