/* Paneel 'Op de kaart' (inklapbaar) en tooltips met sluitknop; gedrag in paneel.js. Na kaart.css en drie_d.css. */

/* ------------------------------------------------------------ kop met in/uitklapknop */
.lg-kop { margin: 0; gap: 6px; }
.lg-klap {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 2px; margin: 0;
  font: 700 12px/1.2 var(--font); color: var(--nh-white); background: none; border: 0; border-radius: 6px;
  cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent;
}
.lg-klap:focus-visible { outline: 2px solid var(--nh-green); outline-offset: 1px; }
.lg-klap .lg-titel { flex: 1; }
/* kop-extra's voor het open paneel op een smal scherm (paneel.js); breed alleen de titel */
.lg-kopinfo { flex: 1; min-width: 0; display: flex; }
.lg-titelblok { flex: 1; min-width: 0; display: flex; }
.lg-kopsub, .lg-kopvul { display: none; }
/* regel bovenaan het blad (paneel.js, ronde 8): alleen op een telefoon (hieronder) */
.lg-info { display: none; }
.lg-klap .lg-pil, .lg-klap .lg-teller { display: none; }
.lg-teller {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; align-items: center; justify-content: center;
  font: 700 11px/1 var(--font); background: var(--nh-green); color: var(--nh-on-green);
}
.lg-chevron { flex: none; width: 14px; height: 14px; transition: transform var(--transition); transform: rotate(180deg); }
.lg-klap:hover .lg-chevron { color: var(--nh-green); }
.lg-inhoud { padding-top: 2px; }

/* ingeklapt: een pil 'Maten' met de teller */
.legenda.dicht { width: auto; padding: 0; border-radius: 18px; overflow: hidden; }
.legenda.dicht .lg-kop { margin: 0; }
.legenda.dicht .lg-klap { min-height: 36px; padding: 0 12px 0 14px; }
.legenda.dicht .lg-titel, .legenda.dicht .lg-standaard { display: none; }
.legenda.dicht .lg-pil { display: inline; }
.legenda.dicht .lg-teller { display: inline-flex; }
.legenda.dicht .lg-chevron { transform: none; }
.legenda.dicht .lg-klap:hover { background: rgba(255,255,255,.08); }

/* ------------------------------------------------------------ telefoon: pil in de bovenste rij, blad eronder
   Paneel ronde 7 (critic: 'liggend 844 x 390 met touch krimpt het dak met het paneel open tot 89 x 47 px'): een
   liggende telefoon (aanraaktoestel met een lage kaart, hoogte <= 500 px) krijgt dezelfde opmaak als een staande.
   Paneel ronde 8: dicht een pil links van 2D/3D, open een blad onder de bovenste rij (zie hieronder). */
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) {
  /* Paneel ronde 8 (critic r7: 'de pil springt bij wisselen van weergave' en 'liggend ligt de pil over het kaartje met
     de maten'): op een telefoon staat de pil in 2D en 3D, staand en liggend, op dezelfde plek: in de bovenste rij,
     direct links van de schakelaar 2D/3D (paneel.js P.pilPlek: --lg-piltop, --lg-rechts). Open blijft de pil staan en
     klappen de schakelaars eronder uit als blad (P.blad: --lg-top, --lg-ll, --lg-rr, --lg-max). */
  .legenda {
    position: absolute; left: var(--lg-ll, 12px); right: var(--lg-rr, 12px); top: var(--lg-top, 64px); bottom: auto; z-index: 3;
    width: auto; max-height: 45%; max-height: var(--lg-max, 45%); overflow: visible;
    display: flex; flex-direction: column;
    padding: 0; border-radius: 12px; background: rgba(13,13,13,.96); box-shadow: 0 2px 10px rgba(0,0,0,.3);
  }
  /* de kop is de pil: open en dicht dezelfde maat en plek (open hangt hij boven het blad, in de bovenste rij) */
  .legenda > .lg-kop {
    position: absolute; top: calc(var(--lg-piltop, 12px) - var(--lg-top, 64px)); right: calc(var(--lg-rechts, 104px) - var(--lg-rr, 12px));
    flex: none; margin: 0; padding: 0; border-top: 0; border-radius: 22px; background: rgba(13,13,13,.96); box-shadow: 0 2px 10px rgba(0,0,0,.3);
  }
  .lg-klap { min-height: 44px; padding: 0 14px 0 16px; font-size: 13px; border-radius: 22px; }
  .lg-klap .lg-kopinfo { display: none; }
  .lg-klap .lg-pil { display: inline; }
  .lg-klap .lg-teller { display: inline-flex; }
  .lg-klap:hover { background: rgba(255,255,255,.08); }
  .lg-chevron { transform: rotate(180deg); }          /* open: omhoog (dichtklappen) */
  .legenda.dicht .lg-chevron { transform: none; }     /* dicht: omlaag, het blad klapt naar onder open */
  /* regel bovenaan het blad: lengtes van aangevinkte vlakken, de legenda van de vulling en (alleen als de weergave
     afwijkt) de knop Standaard (paneel.js zet hem hier) */
  .lg-info {
    display: flex; align-items: center; gap: 10px; flex: none; min-height: 26px; padding: 4px 6px 0 10px; box-sizing: border-box;
    font-size: 10.5px; line-height: 13px; font-weight: 500; color: #D9D9D9;
  }
  .lg-info-sub { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #BDBDBD; }
  .lg-info-vul { display: flex; gap: 10px; flex: none; }
  .lg-info-vul span { display: inline-flex; align-items: center; gap: 4px; }
  .lg-info-vul .sw { width: 11px; height: 11px; border-width: 1.5px; }
  .lg-info .lg-standaard { margin-left: 0; }
  /* Paneel ronde 10: 'nog 3' met een pijl omlaag zolang er schakelaars onder de rand van het blad staan (paneel.js meer()) */
  .lg-meerwijzer { flex: none; display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: var(--nh-green); white-space: nowrap; }
  .lg-meerwijzer::after {
    content: ''; width: 5px; height: 5px; margin: -3px 1px 0 2px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg);
  }
  .lg-meerwijzer[hidden] { display: none; }
  .legenda.dicht > .lg-info { display: none; }
  /* paneel ronde 6 (critic: ''Standaard' is 75 x 32 en staat direct naast de chevron, een tik gaat makkelijk mis'):
     raakvlak 44 px hoog, met een scheidslijn en ruimte tot de kop; de rand van de knop zelf blijft klein (::before) */
  .lg-standaard {
    position: relative; z-index: 0; flex: none; min-height: 44px; min-width: 44px; margin: 0 0 0 6px; padding: 0 12px 0 14px;
    border: 0; border-radius: 0; background: none; box-shadow: inset 1px 0 rgba(255,255,255,.18);
  }
  .lg-standaard::before {
    content: ''; position: absolute; inset: 7px 2px 7px 6px; border: 1px solid rgba(136,184,40,.6); border-radius: 4px;
    z-index: -1; transition: background var(--transition);
  }
  .lg-standaard:hover { background: none; color: var(--nh-black); }
  .lg-standaard:hover::before { background: var(--nh-green); }
  /* paneel ronde 6/8: volgorde in het blad gelijk aan de DOM (Tab: pil, Standaard, schakelaars, noot): de regel met de
     legenda bovenaan, dan de schakelaars, de noot onderaan */
  .lg-inhoud {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 4px 10px 6px; font-size: 12px;
  }
  .legenda-randen { display: block; }
  .lg-sub { margin: 4px 0 0; font-size: 10px; }
  .lg-rij { min-height: 44px; padding: 0; gap: 8px; flex-wrap: nowrap; }
  .lg-rij input { width: 17px; height: 17px; }
  .lg-rij .legenda-gz { display: none; }
  .lg-vlak { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
  .lg-vul { margin: 2px 0 4px; font-size: 11px; }
  .legenda-noot { font-size: 10.5px; margin-top: 2px; }
  .legenda.dicht {
    top: var(--lg-piltop, 12px); right: var(--lg-rechts, 104px); left: auto; width: auto; max-height: none;
    border-radius: 22px; overflow: hidden;
  }
  .legenda.dicht > .lg-kop { position: static; box-shadow: none; background: none; }
  .legenda.dicht .lg-klap { min-height: 44px; padding: 0 14px 0 16px; }
  /* drie_d.css zet de pil in 3D op een smal scherm op left: 124px; de plek komt nu uit paneel.js (naast 2D/3D) */
  .kaart-wrap.is-3d #kaart3d:not([hidden]) ~ .legenda.dicht { top: var(--lg-piltop, 12px); bottom: auto; left: auto; }
  /* 3D uitgeklapt: het kaartje met de maten en de kijkrichting bovenin wijken zolang, zodat het dak boven het paneel
     ruimte heeft (paneel.js, vrijBoven); ze komen terug zodra het paneel dicht is */
  .kaart-wrap.is-3d.lg-open .d3-maten, .kaart-wrap.is-3d.lg-open .d3-bediening > .d3-stand { display: none; }

  /* Paneel ronde 4 (critic: 'op een dak met 6 randsoorten past de inhoud niet: 145 px binnenhoogte, een half
     afgesneden rij, de noot krijgt een rij van 0 px'): de schakelaars staan in een raster van cellen van 44 px hoog,
     zo veel kolommen als er passen (minstens 72 px: vier op 390 px), met de naam en de lengte onder elkaar. Het raster
     bevat alleen schakelaars: de kop 'Randlengtes' en 'Per vlak' vallen weg, 'aangevinkte vlakken' en de legenda van
     de vulling staan in de kop van het paneel (paneel.js maakt .lg-kopinfo). Zo passen 10 schakelaars (zes randsoorten,
     'Loopt door' en de drie per vlak) in 3 rijen in 2D, en 13 in 4 rijen in 3D, zoals het lagenblad van Google Maps
     alles tegelijk toont. */
  .lg-inhoud {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); column-gap: 6px; row-gap: 0;
    align-content: start; padding: 0 8px 0 10px; scroll-snap-type: y proximity;
  }
  .lg-inhoud > * { grid-column: 1 / -1; }
  .lg-inhoud > .lg-rij, #legenda-randen > .lg-rij, .lg-vlak > .lg-rij { grid-column: auto; scroll-snap-align: start; }
  #legenda-randen, .lg-vlak { display: contents; }
  .lg-inhoud .lg-sub { display: none; }
  /* blijft voor een schermlezer; zichtbaar in de kop (.lg-kopvul) */
  .lg-inhoud > .lg-vul {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
  .lg-rij {
    min-width: 0; height: 44px; min-height: 44px; display: flex; flex-wrap: wrap; align-content: center; align-items: center;
    column-gap: 4px; row-gap: 1px; padding: 0; overflow: hidden;
  }
  .lg-rij input { width: 16px; height: 16px; }
  .lg-rij .lg-naam {
    flex: 1 1 0; min-width: 0; font-size: 11px; line-height: 13px; font-weight: 600; letter-spacing: -0.02em;
    hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere;
  }
  .lg-rij .lijnsw { order: 3; width: 12px; margin: 0 0 0 20px; }
  .lg-rij .lg-tot { order: 4; flex: 1 1 0; min-width: 0; font-size: 11px; line-height: 13px; font-weight: 600; color: #D9D9D9; white-space: nowrap; }
  .lg-rij input:not(:checked) ~ .lg-tot { color: #9E9E9E; }
  .lg-rij input { order: 1; }
  .lg-rij .lg-naam { order: 2; }
  .lg-rij .lijnsw + .lg-naam { flex-basis: calc(100% - 20px); }   /* randsoort: naam boven, kleur en lengte eronder */
  /* Paneel ronde 10 (critic r9: 'van de rij met de 3D-schakelaars staat 1 px in beeld, vervaagd tot 30%'): onderaan het
     blad staat een kier van 24 px van de volgende rij (paneel.js P.KIER). Een cel zonder lengte (per vlak, 3D) begint
     daarom 5 px onder zijn bovenrand in plaats van in het midden (een regel stond op 14 px: in de kier niet te zien),
     dus de checkbox (5..21) en de eerste regel van de naam staan er heel; een naam van drie regels (liggend 667 px:
     'm² en helling in 3D') past precies (5 + 3 x 13 = 44). Een randsoort (naam en lengte) staat al op 2-8 px en blijft
     in het midden. Het raakvlak blijft de hele cel van 44 px. */
  .lg-rij:not(:has(> .lijnsw)) { align-content: flex-start; align-items: flex-start; padding-top: 5px; box-sizing: border-box; }
  .lg-rij:not(:has(> .lijnsw)) .lg-naam { align-self: center; }
  /* De noot ('5 maten passen hier niet (zoom in)') staat op een smal scherm buiten het raster, onderaan het blad
     (paneel.js zet hem daar): eigen regels van 13 px die niet krimpen en niet wegscrollen (ronde 3 gaf hem in het
     raster een rij van 0 px).
     Paneel ronde 9 (critic r8: 'de noot met · meer is tikbaar, maar het raakvlak is 316 x 13 px'): de hele tekst staat
     er meteen (meestal twee regels), dus er valt niets te tikken: geen raakvlak, geen tabindex, geen verborgen deel. */
  .legenda > .legenda-noot {
    flex: none; min-height: 13px; margin: 0; padding: 0 8px 3px 10px; border-top: 0;
    font-size: 11px; line-height: 13px; font-weight: 600; color: #E6E6E6;
    white-space: normal; overflow-wrap: anywhere; cursor: default;
  }
  .legenda.dicht > .legenda-noot { display: none; }
  /* meer schakelaars dan er passen (smal toestel): de kier van de volgende rij (24 px) blijft leesbaar en vervaagt
     alleen in de onderste 8 px (ronde 9: de laatste 22 px tot 30%, dus de kier toonde niets) */
  .lg-inhoud.lg-meer { -webkit-mask-image: linear-gradient(#000 calc(100% - 8px), rgba(0,0,0,.45)); mask-image: linear-gradient(#000 calc(100% - 8px), rgba(0,0,0,.45)); }
}

/* Paneel ronde 9 (critic r8, grootste gat: '2D op een kleine telefoon met het paneel open houdt het dak 17% van zijn
   oppervlak'): op een staande telefoon (gestapelde opmaak van kaart.css, de 2D-kaart 50vh en minstens 300 px) groeit de
   2D-kaart onderaan met het open blad mee (paneel.js zetGroei: --lg-groei, .lg-groei), zoals een la die opengaat: de
   gegevens eronder schuiven op, het vrije deel boven het dak blijft even hoog, de zoom blijft gelijk. 3D niet (64vh,
   drie_d.css). Alleen een losse '}' hierboven liet in ronde 8 de regel .dd-tip2 vallen (test_paneel_css_haakjes). */
@media (max-width: 820px) {
  .kaart-wrap.lg-groei:not(.is-3d) > #kaart { height: calc(50vh + var(--lg-groei, 0px)); min-height: calc(300px + var(--lg-groei, 0px)); }
}

/* ------------------------------------------------------------ tooltips (2D en 3D) */
/* 2D: dezelfde tooltip als in 3D (.d3-tip in drie_d.css), boven de vlaklabels en knoppen van de kaart */
.dd-tip2 { z-index: 4; }
.d3-tip.sluitbaar { pointer-events: auto; padding-right: 44px; }
.tip-sluit {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 44px; height: 44px; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-sm);
  background: none; color: #D9D9D9; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.tip-sluit:hover { color: var(--nh-green); }
.tip-sluit:focus-visible { outline: 2px solid var(--nh-green); outline-offset: -4px; }
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) {
  /* Paneel ronde 3: ook in 3D staat de tooltip na een tik bij de vinger (DD.tip.plaats, zoals in 2D), nooit meer vast
     linksboven over de hele breedte */
  .d3-tip.vast { left: 0; right: auto; top: 0; max-width: calc(100% - 16px); min-height: 0 !important; white-space: nowrap; padding: 7px 10px; }
  .d3-tip { font-size: 12px; }
  .d3-tip-kop { font-size: 13px; }
}