/* Computerversie (IMP-047, IMP-060): vanaf 1024 px breed. In rust alleen de kaart (volledig) en de balk in het
   midden. Op verzoek een zwevend paneel: kaartje of Mijn huizen links, de advertentie symmetrisch rechts; zelfde
   breedte, zelfde marge rondom. Maten alleen afgeleid van tokens.css. Onder 1024 px verandert er niets. */
:root {
  --paneel-marge: var(--ruimte-kaartrand);
  /* IMP-199 herstel 19d: de panelen (kaartje, Mijn huizen, aanbodpagina) blijven boven de licentieregel (MapLibre, 20 px
     hoog, rechtsonder): onderkant = licentieregel + 4 px, maar nooit minder dan de gewone marge. */
  --licentie-hoogte: 20px;
  --paneel-onder: max(var(--paneel-marge), calc(var(--licentie-hoogte) + 4px));
  /* --paneel-breedte staat in tokens.css (IMP-143: 360 px, één breedte voor kaartje, Mijn huizen, advertentie en vellen). */
  --paneel-ruimte: calc(var(--paneel-breedte) + 2 * var(--paneel-marge)); /* paneel + marge aan beide kanten */
  --popover-schaduw: 0 12px 40px rgba(31, 20, 23, .22), 0 0 0 1px rgba(31, 20, 23, .06);
  --tip-bg: rgba(31, 20, 23, .92);
}
/* Plek (left/top) zet computer.js met tipPlek(): boven het rondje, of eronder als het boven tegen de balk zou komen (IMP-122). */
#tip {
  position: fixed; z-index: 7; padding: var(--ruimte-2) var(--ruimte-3);
  border-radius: var(--hoek-middel); background: var(--tip-bg); color: #fff; font: 500 14px/1.35 var(--letter); white-space: nowrap; pointer-events: none;
}
#tip b { font-weight: var(--gewicht-vet); margin-right: var(--ruimte-1); }

@media (min-width: 1024px) {
  /* IMP-086: de balk heeft één vaste plek, midden bovenaan het scherm, en springt of krimpt nooit (capsules houden hun
     vaste breedte). Panelen beginnen ónder de balk, zodat niets overlapt. De rijen onder de balk (kruimels, melding,
     Prijzen-periode) blijven met een paneel open binnen de vrije strook ertussen en scrollen zo nodig horizontaal.
     De zware selector wint bewust van lijst.css en advertentie.css, die de balk vroeger opzij schoven. */
  :root:root body #boven { top: var(--paneel-marge); left: var(--paneel-marge); right: var(--paneel-marge); max-width: none; align-items: center; }
  #boven .kruimels { align-self: center; }
  body { --links-ruimte: 0px; --rechts-ruimte: 0px; }
  /* IMP-417 (B273, herstel na melding: "ertussen proppen zonder andere locaties aan te passen"): de bronregel staat in elke stand tegen de
     schermrand, in de bestaande marge rechts van een paneel (16 px). Daarom 16 px breed (regelhoogte 16, tekst blijft 12 px). Panelen,
     Steun, Info, 3D en kompas staan precies zoals vóór IMP-417. */
  body .maplibregl-ctrl-bottom-right { right: env(safe-area-inset-right, 0px); }
  body .maplibregl-ctrl.maplibregl-ctrl-attrib { line-height: 16px; }
  body:has(#kaartje:not([hidden])), body.mijnhuizen-open { --links-ruimte: var(--paneel-ruimte); }
  body.advertentie-open { --rechts-ruimte: calc(var(--adv-ruimte, var(--paneel-ruimte)) + var(--greep-b, 0px) / 2); } /* + de greep die half uitsteekt */
  #boven > :not(.balk) { max-width: max(var(--maat), calc(100vw - 2 * max(var(--links-ruimte), var(--rechts-ruimte)))); }
  /* Panelen onder de balk: bovenkant = marge + balk + marge (zie hieronder). */
  /* IMP-376 (besluit opdrachtgever 22-10 15:05, onderdeel 2: "op de computer de knoppen aan de rand, symmetrisch"; herstel na blinde controle):
     de knoppen rechtsonder (Info, Steun, 3D, kompas) staan op dezelfde afstand van rand en onderkant als de panelen: 16 px van de rand van
     het vrije kaartvlak en 24 px van de onderkant (--paneel-onder, boven de licentieregel). Zo spiegelt de rij bij een open huis het kaartje
     links (16 / 24). Altijd zo, ook in rust: openen en sluiten laat niets verspringen. Tussen de knoppen 16 px, zoals in de balk. */
  body { --knoppen-onder: var(--paneel-onder); }
  /* IMP-408 (live controle 23-10: 38 px van de aanbodpagina): de knoppen staan 16 px van de aanbodpagina zelf (--knoppen-rechts =
     paneel + marge), niet van het raakvlak van de greep. Het raakvlak van de greep stopt boven de knoppenkolom (3D + kompas + 16 px),
     zodat een tik op 3D nooit de greep raakt. De bronregel houdt --rechts-ruimte (die staat op halve hoogte, naast de greep). */
  body.advertentie-open { --knoppen-rechts: var(--adv-ruimte, var(--paneel-ruimte)); }
  body.advertentie-open .adv-greep { bottom: calc(2 * var(--maat) + var(--stap-1) + var(--stap-2)); }
  body.advertentie-open .knop-3d { right: max(var(--ruimte-kaartrand), env(safe-area-inset-right), var(--knoppen-rechts)); }
  body.advertentie-open .knop-kompas { right: calc(max(var(--ruimte-kaartrand), env(safe-area-inset-right), var(--knoppen-rechts)) + (var(--maat) - 44px) / 2); }
  .steunrij { gap: var(--stap-2); right: calc(max(var(--ruimte-kaartrand), env(safe-area-inset-right), var(--knoppen-rechts, var(--rechts-ruimte, 0px))) + var(--maat) + var(--stap-2)); }
  .knop-kompas { bottom: calc(var(--knoppen-onder) + var(--maat) + var(--stap-2)); }

  /* Kaartje en Mijn huizen: zwevend paneel links, marge rondom gelijk, alleen als het open is. */
  #kaartje, body #mijnhuizen {
    top: calc(2 * var(--paneel-marge) + var(--capsule-hoogte)); bottom: var(--paneel-onder); left: var(--paneel-marge); right: auto;
    width: var(--paneel-breedte); max-height: none; z-index: 4;
    border-radius: var(--hoek-vel); box-shadow: var(--schaduw-kaartje); border: 0;
  }
  /* IMP-122 (vervangt IMP-072 "zo hoog als de inhoud"): vaste hoogte van onder de balk tot de onderste marge, dezelfde
     boven- en onderkant als de advertentie rechts. De inhoud scrolt erin; bij ←/→ of na het laden van /huis verspringt
     de hoogte niet meer. */
  #kaartje { bottom: var(--paneel-onder); max-height: none; overflow-y: auto; overscroll-behavior: contain; }
  body #mijnhuizen { bottom: var(--paneel-onder); }
  #kaartje { padding: calc(2 * var(--ruimte-4)) calc(1.5 * var(--ruimte-4)); animation: paneel-in var(--veer-open) var(--veer-curve); }
  #kaartje .huis .prijs { font-size: var(--tekst-l); } /* IMP-059: drie lettergroottes (14/17/22) */

  /* Advertentie: hetzelfde paneel, gespiegeld rechts. `body #advertentie` wint van advertentie.css. */
  body #advertentie {
    top: calc(2 * var(--paneel-marge) + var(--capsule-hoogte)); bottom: var(--paneel-onder); right: var(--paneel-marge); left: auto; height: auto;
    width: var(--paneel-breedte); z-index: 4; overflow: hidden;
    border: 0; border-radius: var(--hoek-vel); box-shadow: var(--schaduw-kaartje);
    transform: translateX(calc(100% + var(--paneel-marge)));
  }
  body.advertentie-open #advertentie { transform: none; }
  /* IMP-122: ingeklapt = alleen de greep. Geen strook makelaarspagina, wit vlak of schaduw naast de greep; dat verdwijnt
     pas als het paneel weggeschoven is (zelfde duur als het schuiven), en is bij uitklappen meteen terug. */
  html body.advertentie-open.adv-ingeklapt #advertentie {
    background-color: transparent; box-shadow: none;
    transition: transform var(--veer-dicht) var(--veer-curve), background-color 0s linear var(--veer-dicht), box-shadow 0s linear var(--veer-dicht);
  }
  html body.advertentie-open.adv-ingeklapt #advertentie > :not(.adv-greep) { visibility: hidden; transition: visibility 0s linear var(--veer-dicht); }

  /* Vensters (Plaats, Budget, Filters) onder hun eigen knop; computer.js zet --popover-links. */
  .vel, .vel--boven { z-index: 5; top: calc(2 * var(--paneel-marge) + var(--capsule-hoogte)); left: var(--popover-links, var(--paneel-marge)); } /* boven de panelen */
}
@keyframes paneel-in { from { transform: translateX(calc(-100% - var(--paneel-marge))); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { #kaartje { animation: none !important; } }