/*
  PropRev Atelier - huisstijl.
  Tokens zijn overgenomen uit ../../proprev-site/DESIGN.md (frontmatter) en
  ../../proprev-site/src/style.css regel 3 en 5. Geen eigen kleurnummers
  verzinnen: wat hier niet staat, bestaat niet.
*/

@font-face{font-family:Instrument;src:url('/fonts/InstrumentSerif-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('/fonts/Manrope-Variable.ttf') format('truetype');font-style:normal;font-weight:200 800;font-display:swap}
[hidden]{display:none!important}

:root{
  /* kleuren, letterlijk uit proprev-site */
  --ink:#0b1d30;
  --muted:#48576a;
  --blue:#075cf2;
  --blue-hover:#0344bc;
  --paper:#fff;
  --soft:#f4f5f5;
  --line:#d9dfe5;
  --navy:#0b2239;
  --action-soft:#eef0f2;
  --action-soft-hover:#dfe5ec;
  --field-stroke:#b5c0ca;
  --error-stroke:#ad263a;
  --error-text:#952336;
  --fineprint:#596577;
  --inverse-body:#cad7e4;
  --mark-blue:#0063FF;
  --mark-facet:#0848C7;
  --wordmark:#09142A;

  /* statuskleuren voor de datalagen: hetzelfde palet, donkerder uitgevoerd */
  --ok:#0a6b4a;
  --ok-soft:#e7f2ec;
  --waarschuwing:#8a5a00;
  --waarschuwing-soft:#fbf1de;
  --fout:#952336;
  --fout-soft:#fbecef;

  /* typografie */
  --serif:Instrument,Georgia,serif;
  --sans:Manrope,sans-serif;

  /* vorm */
  --radius:12px;
  --radius-inset:4px;
  --radius-field:6px;
  --radius-selector:7px;
  --radius-image:8px;
  --radius-button:9px;
  --ease:cubic-bezier(.16,1,.3,1);
  --page-gutter:clamp(16px,2.4vw,32px);
  --schaduw:0 8px 36px #0b1d3026;

  /* meting */
  --kop-h:56px;
  --rail-breedte:340px;
  /* Maten uit het raster, gemeten uit de PNG's met Pillow: navigatie 210 px
     op een beeld van 1586 px, kop 56 px. Vast in px, want de mockups schalen
     die kolommen niet mee met de breedte; het werkgebied is het vloeiende deel. */
  --nav-breedte:210px;
  --actief-soft:#eaf1ff;
}

.pa-auth{display:grid;place-items:center;padding:32px;min-height:70vh}
.pa-auth__form{display:flex;flex-direction:column;gap:20px;max-width:420px;width:100%;padding:32px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
.pa-auth__form h1{font:600 26px/1.25 var(--sans)}
.pa-auth__form label{display:grid;gap:6px;font-weight:600}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--ink);
  background:var(--soft);-webkit-font-smoothing:antialiased;
}
h1,h2{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.018em;text-wrap:balance;margin:0}
h3{font-family:var(--sans);font-size:20px;font-weight:600;line-height:1.35;letter-spacing:-.02em;margin:0}
h4{font-family:var(--sans);font-size:16px;font-weight:600;line-height:1.35;letter-spacing:-.015em;margin:0}
p{margin:0 0 10px}
a{color:var(--blue);text-decoration:none;text-underline-offset:4px}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:var(--radius-inset)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,select,textarea{
  font:inherit;color:var(--ink);width:100%;min-width:0;
  border:1px solid var(--field-stroke);border-radius:var(--radius-field);
  padding:10px 12px;background:var(--paper);line-height:1.5;
}
input:focus,select:focus,textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px #075cf21f}
input[aria-invalid="true"]{border-color:var(--error-stroke)}
code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
pre{background:#f3f5f7;border-radius:var(--radius-image);padding:12px;overflow:auto;font-size:12px}

/* ---------- basiscomponenten, namen zoals de modules ze gebruiken ---------- */

.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:38px;padding:9px 15px;background:var(--blue);color:#fff;
  font-size:14px;font-weight:600;line-height:1.35;border-radius:var(--radius-button);
  transition:background .18s var(--ease),transform .18s var(--ease);
  text-align:center;white-space:nowrap;
}
.knop:hover{background:var(--blue-hover);text-decoration:none;color:#fff}
.knop:active{transform:translateY(1px)}
.knop[disabled]{background:var(--action-soft-hover);color:var(--muted);cursor:not-allowed}
.knop.secundair{background:var(--action-soft);color:var(--ink)}
.knop.secundair:hover{background:var(--action-soft-hover)}
.knop.stil{background:none;color:var(--muted);padding:8px 10px;min-height:34px;text-decoration:underline;text-underline-offset:4px}
.knop.stil:hover{color:var(--ink);background:var(--action-soft)}
.knop.gevaarlijk{background:var(--error-text)}
.knop.klein{min-height:31px;padding:6px 11px;font-size:13px}

.kaart{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;
}
.kaart + .kaart{margin-top:14px}
.kaart.zondervulling{padding:0;overflow:hidden}
.kaart.navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.kaart.navy p{color:var(--inverse-body)}
.kaart.navy a{color:#a8c9ff}

.label{
  display:block;font-size:12px;font-weight:600;line-height:1.5;color:var(--muted);
  letter-spacing:.01em;margin-bottom:6px;
}
.regel{display:flex;align-items:center;gap:10px}
.regel.tussen{justify-content:space-between}
.regel.eind{justify-content:flex-end}
.regel.wrap{flex-wrap:wrap}
.stapel{display:flex;flex-direction:column;gap:12px}
.fijn{font-size:12px;line-height:1.6;color:var(--fineprint)}
.uitgelicht{color:var(--ink);font-weight:600}
.cijfer{font-variant-numeric:tabular-nums}
.verdoken{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* statuspillen voor de lagen */
.pil{
  display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;
  font-size:11.5px;font-weight:600;line-height:1.5;letter-spacing:.01em;
}
.pil::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pil.ok{background:var(--ok-soft);color:var(--ok)}
.pil.leeg{background:var(--action-soft);color:var(--muted)}
.pil.fout{background:var(--fout-soft);color:var(--fout)}
.pil.onbeschikbaar{background:var(--waarschuwing-soft);color:var(--waarschuwing)}
.pil.vereist_api_key{background:var(--waarschuwing-soft);color:var(--waarschuwing)}

/* tabel-achtige rijen, geen <table> nodig voor twee kolommen */
.rij{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);align-items:baseline}
.rij:last-child{border-bottom:0}
.rij dt{font-size:13px;color:var(--muted)}
.rij dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;font-size:13px}

/* ---------- shell ---------- */

.kop{
  height:var(--kop-h);background:var(--paper);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:20px;padding:0 var(--page-gutter);
  position:relative;z-index:20;
}
.kop .merk img{display:block;width:150px;height:44px;object-fit:contain}
.kop .merk{display:flex;align-items:center;gap:10px}
.kop .slogan{font-size:12px;color:var(--fineprint);border-left:1px solid var(--line);padding-left:12px}
.kop .ruimte{flex:1}

.tabs{display:flex;gap:2px;align-items:stretch;height:100%;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  position:relative;display:inline-flex;align-items:center;gap:7px;padding:0 14px;
  font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap;
  transition:color .18s var(--ease);
}
.tab:hover{color:var(--ink);text-decoration:none}
.tab[aria-selected="true"]{color:var(--blue)}
.tab[aria-selected="true"]::after{
  content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--blue);
}
.tab .teller{
  font-size:11px;font-weight:700;padding:1px 6px;border-radius:999px;
  background:var(--action-soft);color:var(--muted);font-variant-numeric:tabular-nums;
}
.tab[aria-selected="true"] .teller{background:#075cf21a;color:var(--blue)}

/* werkgebied: links rail met context, rechts het tabblad */
.werk{display:grid;grid-template-columns:var(--rail-breedte) minmax(0,1fr);height:calc(100% - var(--kop-h));background:var(--paper)}
.rail{border-right:1px solid var(--line);overflow:auto;background:var(--paper);padding:16px}
.paneel{position:relative;overflow:auto;background:var(--soft)}
.paneel.vol{padding:0}
.paneel.binnen{padding:22px var(--page-gutter);max-width:1180px}

@media (max-width:1080px){
  :root{--rail-breedte:290px}
}
@media (max-width:820px){
  .werk{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .rail{border-right:0;border-bottom:1px solid var(--line);max-height:38vh}
  .kop{gap:12px}
  .kop .slogan{display:none}
}

/* de rail: zoekblok en gekozen perceel */
.zoek{position:relative}
.suggesties{
  position:absolute;z-index:30;top:calc(100% + 4px);left:0;right:0;max-height:320px;overflow:auto;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--schaduw);
  list-style:none;margin:0;padding:4px;
}
.suggesties li{padding:0}
.suggesties button{display:block;width:100%;text-align:left;padding:9px 10px;border-radius:var(--radius-inset);font-size:13px;line-height:1.4}
.suggesties button:hover,.suggesties button[aria-current="true"]{background:var(--action-soft)}
.suggesties .sub{display:block;color:var(--muted);font-size:12px}

/* kaart */
.kaart-canvas{position:absolute;inset:0;background:#e9edf1}
.kaart-canvas .leaflet-container{position:absolute;inset:0;background:#e9edf1;font-family:var(--sans)}
.perceel-gekozen{stroke:var(--blue);stroke-width:3;fill:#075cf21f}
.legenda{
  position:absolute;z-index:15;right:12px;bottom:12px;max-width:290px;max-height:44vh;overflow:auto;
  background:#ffffffef;border:1px solid var(--line);border-radius:var(--radius);padding:12px 13px;
  backdrop-filter:blur(3px);
}
.legenda h4{margin-bottom:8px}
.laag-rij{display:flex;align-items:flex-start;gap:8px;padding:6px 0;border-top:1px solid var(--line)}
.laag-rij:first-of-type{border-top:0}
.laag-rij input[type=checkbox]{width:auto;margin:3px 0 0;flex:0 0 auto;accent-color:var(--blue)}
.laag-rij .naam{font-size:12.5px;font-weight:600;line-height:1.35}
.laag-rij .sub{font-size:11.5px;color:var(--fineprint);line-height:1.45}
.laag-rij .pil{margin-left:auto;flex:0 0 auto}

/* flyout met perceelgegevens */
.flyout{
  position:absolute;z-index:16;top:12px;left:12px;width:min(370px,calc(100% - 24px));
  max-height:calc(100% - 24px);overflow:auto;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--schaduw);padding:16px;
}
.flyout[hidden]{display:none}

/* ---------- atlas: de kaart met het chat-dock ernaast ----------
   De split leeft binnen #paneel: main.js wist het paneel bij elke tabwisseling,
   dus het dock hangt bewust in de Atlas-container en niet ernaast (atlas.js).
   Alleen bestaande tokens, geen eigen kleurnummers. */
.pa-atlas__split{display:flex;align-items:stretch;height:100%;min-height:0;background:var(--soft)}
.pa-atlas__kaart{position:relative;flex:1 1 auto;min-width:0;height:100%}
.pa-atlas__dock{
  flex:0 0 380px;width:380px;display:flex;flex-direction:column;min-height:0;
  background:var(--paper);border-left:1px solid var(--line);
}
.pa-atlas__dock-kop{
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex:0 0 auto;
  padding:10px 12px;border-bottom:1px solid var(--line);
}
.pa-atlas__dock-titel{font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--ink)}
.pa-atlas__dock-titel[hidden]{display:none}
.pa-atlas__dock-lijf{
  display:flex;flex-direction:column;gap:12px;flex:1 1 auto;min-height:0;
  padding:12px;overflow:hidden;background:var(--soft);
}
.pa-atlas__dock-lijf[hidden]{display:none}
/* de dock-kop noemt het al Assistent; de kopregel van de chat zelf is dan dubbel */
.pa-atlas__dock .chat-kop>.label{display:none}
/* de berichten rolt binnen het dock, de invoer blijft onderaan staan */
.pa-atlas__dock .pa-chat__lijst{flex:1 1 auto;min-height:80px;overflow-y:auto;overflow-x:hidden;padding:14px}
.pa-atlas__dock .chat-suggesties{flex-wrap:wrap;max-height:104px;overflow-y:auto}
.pa-atlas__dock .chat-tekst,.pa-atlas__dock .chat-bron-link,.pa-atlas__dock .chat-bron-naam{overflow-wrap:anywhere}
.pa-atlas__dock .chat-bronnen-lijst{margin:0;padding-left:2px;font-size:12px;color:var(--fineprint)}
/* één compacte regel per bron. De complete url staat in href en title van de
   linkjes (public/app/chat.js), op scherm staan alleen naam, status, datum en
   een korte url: een PDOK-query van 466 tekens vulde anders het hele dock van
   380 px. Alleen bestaande tokens, geen eigen kleurnummers. */
.chat-bron{position:relative;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;padding:1px 0;min-width:0;line-height:1.25}
.chat-bron .label{margin-bottom:0}
/* de kop staat boven de lijst, niet ernaast: de lijst krijgt zo de volle
   breedte van het dock en een bronregel behoeft minder regels. De bolletjes
   van de lijst zijn er niet meer (de stip doet dat werk), dus ook geen indent */
.chat-bronnen{flex-wrap:wrap}
.chat-bronnen>.label{flex:1 0 100%}
.chat-bronnen-lijst{flex:1 1 auto;min-width:0;margin:0;padding-left:2px;list-style:none}
/* het stipje hangt buiten de regel (afgekeken van de li-marker), anders kost
   het 13 px van de smalle kolom en moet een lange bronnaam een extra regel */
.chat-bron-stip{position:absolute;left:-11px;top:.42em;width:7px;height:7px;border-radius:50%;background:var(--field-stroke)}
.chat-bron-stip.is-ok{background:var(--ok)}
.chat-bron-stip.is-leeg{background:var(--muted)}
.chat-bron-stip.is-fout{background:var(--fout)}
.chat-bron-stip.is-onbeschikbaar,.chat-bron-stip.is-vereist_api_key{background:var(--waarschuwing)}
.chat-bron-link{flex:0 1 auto;min-width:0;overflow-wrap:anywhere}
.chat-bron-datum{flex:0 0 auto;font-size:11px;color:var(--fineprint);font-variant-numeric:tabular-nums;white-space:nowrap}
/* de korte url naast de datum: max-width houdt hem in dezelfde regel als de
   datum (die is gemeten 158 px), de lange rest breekt binnen eigen breedte */
.chat-bron-url{flex:0 1 auto;min-width:0;max-width:calc(100% - 166px);font-size:11px;color:var(--fineprint);overflow-wrap:anywhere}
/* ingeklapt: een smalle verticale knop die het dock terughaalt */
.pa-atlas__dock.is-gesloten{flex-basis:44px;width:44px}
.pa-atlas__dock.is-gesloten .pa-atlas__dock-kop{flex-direction:column;justify-content:flex-start;height:100%;padding:10px 6px;border-bottom:0}
.pa-atlas__dock.is-gesloten .pa-atlas__dock-klap{writing-mode:vertical-rl;min-height:0;padding:14px 7px;letter-spacing:.04em}

@media (max-width:960px){
  .pa-atlas__dock{flex-basis:300px;width:300px}
}

@media (max-width:760px){
  /* geen zijaane-aan-zij: het dock schuift over het kaartvlak heen en de kaart
     houdt de volle breedte; uitgeklapt verdwijnt het helemaal */
  .pa-atlas__split{position:relative}
  .pa-atlas__kaart{flex:1 1 auto;width:100%}
  .pa-atlas__dock{
    position:absolute;z-index:600;left:8px;right:8px;bottom:8px;top:auto;height:56%;
    width:auto;flex:none;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--schaduw);
  }
  .pa-atlas__dock.is-gesloten{
    left:auto;top:auto;right:8px;bottom:8px;width:auto;height:auto;
    border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--schaduw);
  }
  .pa-atlas__dock.is-gesloten .pa-atlas__dock-kop{height:auto;padding:8px}
}

/* bronnenlijst */
.bron{display:flex;gap:9px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line)}
.bron:first-child{border-top:0}
.bron .url{font-size:11.5px;color:var(--fineprint);word-break:break-all;line-height:1.45}

/* chat */
.berichten{display:flex;flex-direction:column;gap:14px}
.bericht{max-width:760px;padding:13px 15px;border-radius:var(--radius);border:1px solid var(--line);background:var(--paper)}
.bericht.gebruiker{background:var(--navy);color:#fff;border-color:var(--navy);align-self:flex-end}
.bericht.gebruiker .fijn{color:var(--inverse-body)}
.bericht .rol{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.bericht.gebruiker .rol{color:var(--inverse-body)}
.bericht .tekst{white-space:pre-wrap}

/* moduskiezer */
.modus{display:inline-flex;gap:4px;padding:3px;background:var(--action-soft);border-radius:var(--radius-selector)}
.modus button{padding:6px 12px;font-size:12.5px;font-weight:600;border-radius:var(--radius-inset);color:var(--muted)}
.modus button[aria-pressed="true"]{background:var(--ink);color:#fff}

/* laad- en foutstatus */
.laad{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.laad::before{content:"";width:12px;height:12px;border:2px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:draai .8s linear infinite}
@keyframes draai{to{transform:rotate(360deg)}}
.melding{padding:11px 13px;border-radius:var(--radius-image);font-size:13px;line-height:1.55;border:1px solid var(--line);background:var(--soft)}
.melding.fout{background:var(--fout-soft);border-color:#e6c2ca;color:var(--error-text)}
.melding.waarschuwing{background:var(--waarschuwing-soft);border-color:#ead9b5;color:var(--waarschuwing)}
.melding.ok{background:var(--ok-soft);border-color:#bfe0cf;color:var(--ok)}

.leeg{padding:34px 20px;text-align:center;color:var(--muted)}
.leeg h3{margin-bottom:6px;color:var(--ink)}

/* raster voor onderzoekskaarten */
.rooster{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px}

/* github-achtige balkje boven een tab */
.werkbalk{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px var(--page-gutter);border-bottom:1px solid var(--line);background:var(--paper);
  position:sticky;top:0;z-index:10;
}

/* Afbeeldingen in het paneel mogen nooit hun container uitlopen. Zonder deze
   regel laat een Blender-render van 1600 px het hele paneel horizontaal
   overlopen en is het onderste deel van het beeld onzichtbaar (gemeten in
   e2e/screenshots/18b). Buiten #paneel gehouden: kaarttegels van Leaflet en
   het logo hebben hun eigen maten en laten die niet afwijken. */
#paneel img{max-width:100%;height:auto}
.pa-3d__plaatje{display:block;border:1px solid var(--line);border-radius:var(--radius-field)}

/* ===== shell uit de mockups =====
   Linker navigatie met de tien bestemmingen plus een kop met project, versie
   en opslagtijd. Zonder deze regels valt de shell uiteen: een svg zonder breedte
   vult dan de hele viewport en de kop wordt zo hoog als zijn inhoud (gemeten
   door de werkers: pictogram 1249 px, kop 340 px). Maten komen uit de raster-
   meting in docs/MOCKUP-VERGELIJKING.md, kleuren uitsluitend uit de tokens. */
.pa-shell{display:grid;grid-template-columns:var(--nav-breedte) minmax(0,1fr);height:100vh;min-height:100vh}

.pa-nav{display:flex;flex-direction:column;gap:4px;min-height:0;overflow:auto;padding:16px 12px 12px;background:var(--paper);border-right:1px solid var(--line)}
.pa-nav__merk{display:flex;align-items:center;padding:2px 4px 12px}
.pa-nav__merk a{display:block}
.pa-nav__merk img{display:block;height:36px;width:auto}

.pa-nav__ruimte{display:block;margin:0 2px 10px}
.pa-nav__ruimte-veld{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-field);background:var(--paper);color:var(--ink);font:600 13px/1.2 var(--sans)}
.pa-nav__ruimte-veld svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pa-nav__ruimte-veld .pijl{margin-left:auto}

.pa-nav__lijst{display:flex;flex:1 1 auto;flex-direction:column;gap:2px}
/* Zonder flex op de lijst is deze kolom content-groot en deelt `margin-top:auto`
   van het gepinde Instellingen-item niets (gemeten: item-onderkant 500 px in een
   nav van 900). De lijst vult nu de navigatie, dus pinnt het item echt onderaan. */
.pa-nav__item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:var(--radius-button);background:none;color:var(--ink);font:600 14px/1.25 var(--sans);text-align:left;cursor:pointer}
.pa-nav__item svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pa-nav__item:hover{background:var(--action-soft)}
.pa-nav__item.is-actief{background:var(--actief-soft);color:var(--blue)}
.pa-nav__item:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.pa-nav__item .teller{margin-left:auto}
/* Instellingen staat in het raster onderaan de navigatie, gescheiden van de lijst. */
.pa-nav__item--oor{margin-top:auto;border-top:1px solid var(--line);border-radius:0;padding-top:12px}

.pa-nav__oor{margin-top:auto;padding:12px 4px 2px}
.pa-nav__model{display:block;color:var(--muted);font-size:12px}

.pa-kolom{display:flex;flex-direction:column;min-width:0;min-height:0}

.pa-kop{flex:none;display:flex;align-items:center;gap:12px;height:var(--kop-h);padding:0 18px;background:var(--paper);border-bottom:1px solid var(--line)}
.pa-kop__project{display:flex;align-items:center;gap:8px;min-width:0}
.pa-kop__kiezer{max-width:260px;padding:6px 8px;border:0;border-radius:var(--radius-field);background:none;color:var(--ink);font:700 15px/1.2 var(--sans);text-overflow:ellipsis;cursor:pointer}
.pa-kop__kiezer:hover:not(:disabled){background:var(--action-soft)}
.pa-kop__kiezer:disabled{color:var(--muted);cursor:default}
.pa-kop__kiezer--versie{color:var(--muted);font-weight:600;font-size:14px}
.pa-kop__scheid{width:1px;height:20px;background:var(--line)}
.pa-kop__opgeslagen{display:inline-flex;align-items:center;gap:6px;color:var(--ok);font:600 13px/1 var(--sans)}
.pa-kop__opgeslagen svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#kop-delen svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* De `.ruimte`-zeem in de kop bestond al in index.html, maar de enige groeiregel
   was `.kop .ruimte` uit de OUDE shell: de rechtergroep (Opgeslagen, Delen)
   bleef links opeengestapeld, 347 px van de rechterrand (gemeten op 1440 px). */
.pa-kop .ruimte{flex:1 1 auto}

.pa-hoofd{flex:1;min-height:0;display:grid;grid-template-columns:var(--rail-breedte) minmax(0,1fr);background:var(--paper)}
.pa-hoofd.geen-rail{grid-template-columns:minmax(0,1fr)}
.pa-rail{overflow:auto;padding:16px;background:var(--paper);border-right:1px solid var(--line)}
.pa-rail[hidden]{display:none}
.pa-hoofd > .paneel{position:relative;overflow:auto;background:var(--soft)}

/* Smal: de navigatie wordt een horizontale strook bovenaan, het werkgebied
   houdt de volle breedte. Dit is de ontworpen leesstand, niet een afgekapte
   desktop: de bestemmingen blijven bereikbaar en er is geen horizontale overloop. */
@media (max-width:900px){
  /* De hoogte blijft hier BEPAALD (100dvh). Zet je dit op auto, dan valt de
     percentageketen weg: `.pa-atlas__split{height:100%}` en de kaart darin
     vinden dan geen oudershoogte en krompen tot een strook van ~130 px
     (gemeten op 390x844). Vertical scrollen gebeurt in het paneel, niet op de
     pagina: geneste scrollbars zijn er niet, want de shell vult de viewport. */
  .pa-shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:100dvh;min-height:100dvh}
  .pa-nav{flex:none;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:8px;padding:8px 10px;border-right:0;border-bottom:1px solid var(--line)}
  .pa-nav__merk{flex:none;padding:0 6px 0 0}
  .pa-nav__merk img{height:26px}
  .pa-nav__ruimte{display:none}
  /* Eén rolbare rij, geen wikkelpakket van tien regels: met wrap werd deze
     strook 337 px hoog (gemeten op 390x844) en hield daarmee de atlas-kaart
     op 130 px. De bestemmingen scrollen zijwaarts, de strook blijft ~44 px. */
  .pa-nav__lijst{flex:1 1 auto;min-width:0;flex-direction:row;flex-wrap:nowrap;gap:2px;overflow-x:auto;scrollbar-width:thin}  .pa-nav__item{flex:none;width:auto;padding:7px 9px;font-size:13px;gap:7px;white-space:nowrap}
  .pa-nav__item svg{width:15px;height:15px}
  .pa-nav__item .teller{display:none}
  .pa-nav__oor{display:none}
  .pa-nav__item--oor{margin-top:0;border-top:0;padding-top:7px;border-left:1px solid var(--line);padding-left:10px}
  .pa-kolom{min-height:0}
  /* Eén kolom, maar met een bepaalde rijverdeling: de rail (waar vorhanden)
     krijgt een plafond, het werkgebied pakt de rest en kan zelf scrollen. */
  .pa-hoofd{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);min-height:0}
  .pa-hoofd.geen-rail{grid-template-rows:minmax(0,1fr)}
  .pa-hoofd .pa-rail{border-right:0;border-bottom:1px solid var(--line);max-height:38vh}
  .pa-hoofd > .paneel{min-height:0}
  .pa-kop{padding:0 12px}
  .pa-kop__kiezer{max-width:150px;font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}