/* Eyefly Dataportaal — de viewer.
 *
 * De componenten zelf (ey-werkruimte, ey-paneel, ey-podium, ey-gereedschapsbalk,
 * ey-popover, ey-hud, ey-bevinding, ey-opname-*, ey-strip) staan in
 * componenten.css en horen bij het ontwerpsysteem. Dit bestand is wat het
 * systeem nog niet levert: de plaatsing in DEZE viewer, de lagenlijst met zijn
 * sublijsten, en het gedrag bij smalle schermen.
 *
 * Dezelfde regels als de rest: alleen tokens, geen losse kleur, maat of hoek.
 * Prefix vw-. Responsieve regels staan bij het component.
 *
 * De grens loopt bij het beeld (ontwerp/merkboek.md): wat OP het model ligt
 * gebruikt chrome-*, stage en shadow-raised, die in beide thema's dezelfde
 * waarde houden. Het werkblad en het contextpaneel staan ernaast en volgen het
 * thema. Gebruik boven het model nooit ink, surface of critical-ink.
 *
 * Klassen die viewer.js zelf zet: split (contextpaneel open) en lc (werkblad
 * ingeklapt) op #vwrap, on op #lagenpop.
 */

/* ── het 3D-venster ────────────────────────────────────── */

/* Het venster zelf vult het podium. Cesium zet hier zijn eigen canvas in. Het
   canvas is absoluut gepositioneerd en draagt dus geen hoogte bij: het podium
   moet een eigen hoogte hebben (flex in .ey-werkruimte), anders is het canvas
   800 breed en 0 hoog terwijl de tegels gewoon geladen zijn. */
#cesium { position: absolute; inset: 0; }
#cesium .cesium-widget-credits { display: none; }
.vw-podium canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  cursor: crosshair; touch-action: none;
}
.vw-podium.grab canvas { cursor: grab; }

/* ── werkblad ──────────────────────────────────────────── */

.ey-werkblad { min-height: 0; }
.ey-werkblad .ey-sectiekop { align-items: center; }
.ey-werkblad .ey-sectiekop h2 { margin: 0; color: var(--ink-subtle); }
.vw-bevlijst { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* Een bevinding is twee knoppen naast elkaar: de bevinding en een wisknop. */
.vw-bevrij { position: relative; }
.vw-bevrij + .vw-bevrij { margin-top: var(--space-2); }
.vw-bevrij .ey-bevinding {
  width: 100%; padding-right: calc(var(--space-3) + 32px);
  text-align: left; color: inherit; cursor: pointer;
}
.vw-bevrij .ey-bevinding__regel { justify-content: flex-start; }
.vw-wis {
  position: absolute; top: var(--space-2); right: var(--space-2);
  width: 28px; height: 28px; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: var(--radius-sm);
  color: var(--ink-subtle); cursor: pointer;
}
.vw-wis:hover { background: var(--critical-surface); color: var(--critical-ink); }

/* Een knop voor het paneel zelf: inklappen, sluiten. Het paneel volgt het thema,
   dus dit is GEEN chrome-knop (ey-icoonknop is dat wel). */
.vw-paneelknop {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line-control); border-radius: var(--radius-sm);
  color: var(--ink-muted); cursor: pointer;
}
.vw-paneelknop:hover { background: var(--surface-sunken); color: var(--ink); }

.vw-bevform { padding: var(--space-4); }
.vw-bevform > * + * { margin-top: var(--space-3); }
.vw-formacties { display: flex; gap: var(--space-2); }
.vw-formacties .ey-knop { min-height: 36px; }

/* Ingeklapt: alleen de knop om hem weer open te zetten. */
.vwrap.lc .ey-werkblad { width: 56px; padding: var(--space-3) var(--space-2); align-items: center; }
.vwrap.lc .ey-werkblad > :not(.ey-sectiekop) { display: none; }
.vwrap.lc .ey-werkblad .ey-sectiekop > :not(.vw-paneelknop) { display: none; }
.vwrap.lc .ey-werkblad .ey-sectiekop > .vw-paneelknop { margin: 0; transform: rotate(180deg); }

/* ── op het model: lagenknop, popover, hint, HUD ───────── */

.vw-lagenknop { position: absolute; left: var(--space-4); top: var(--space-4); z-index: 4; }
.vw-lagenknop[aria-expanded="true"] { background: var(--chrome-accent); color: var(--stage); border-color: transparent; }
.ey-gereedschapsbalk { z-index: 4; }
.ey-hint { z-index: 4; max-width: calc(100% - var(--space-6)); }
.ey-hud { z-index: 4; display: grid; gap: 2px; }
.vw-crs { color: var(--chrome-accent); }
.ey-hud #vwstatus { color: var(--chrome-ink-muted); }
.ey-hud #vwstatus:empty { display: none; }

/* De lagenpopover is er alleen als hij open staat (klasse on, gezet door
   viewer.js) en blijft binnen het venster: de lijst kan lang worden. */
.vw-lagen {
  display: none; z-index: 5; box-sizing: border-box;
  left: var(--space-4); top: calc(var(--space-4) + 40px + var(--space-2));
  width: 296px; max-height: calc(100% - 88px); overflow-y: auto;
  padding: var(--space-4);
}
.vw-lagen.on { display: block; }
.vw-kop { margin: 0 0 var(--space-2); color: var(--chrome-ink-subtle); }
.vw-weergave-kop { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--chrome-line); }
.ey-popover .ey-knop[data-soort="tweede"] { border-color: var(--chrome-line); color: var(--chrome-ink); }
.ey-popover .ey-knop[data-soort="tweede"]:hover { background: var(--chrome-hover); }
.vw-herstel { width: 100%; margin-top: var(--space-4); }

/* Een laag: een schakelaar met een naam. Het blijft een checkbox (viewer.js
   luistert op change en de toetsen schakelen via het vinkje), maar oogt als de
   schakelaar van ey-laag: 32 bij 18, met een knop die naar rechts schuift. */
.vw-laag {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 36px; padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm); color: var(--chrome-ink); cursor: pointer;
}
.vw-laag:hover { background: var(--chrome-hover); }
.vw-laag input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  position: relative; flex: none; margin: 0; cursor: pointer;
  width: 32px; height: 18px;
  border: 1px solid var(--chrome-line); border-radius: var(--radius-pill);
}
.vw-laag input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: var(--radius-pill);
  background: var(--chrome-ink-subtle);
  transition: transform 160ms ease, background-color 160ms ease;
}
.vw-laag input[type="checkbox"]:checked { border-color: var(--chrome-accent); }
.vw-laag input[type="checkbox"]:checked::after { background: var(--chrome-accent); transform: translateX(14px); }
.vw-laag input[type="checkbox"]:focus-visible { outline: 2px solid var(--chrome-accent); outline-offset: 2px; }
.vw-laag input[type="checkbox"]:disabled { opacity: .45; cursor: not-allowed; }

.vw-rij { display: flex; align-items: center; gap: var(--space-1); }
.vw-rij .vw-laag { flex: 1; min-width: 0; }
/* 28 px en niet 22: WCAG 2.2 vraagt minstens 24 bij 24 voor een aanwijsdoel
   (docs/beslissingen.md, Toegankelijkheid). Het icoon blijft even groot. */
.vw-uitklap {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: var(--radius-sm);
  color: var(--chrome-ink-subtle); cursor: pointer;
}
.vw-uitklap:hover { background: var(--chrome-hover); color: var(--chrome-ink); }
.vw-uitklap:focus-visible { outline: 2px solid var(--chrome-accent); outline-offset: 2px; }
.vw-uitklap .ey-icoon { transform: rotate(-90deg); transition: transform 160ms ease; }
.vw-uitklap[aria-expanded="true"] .ey-icoon { transform: rotate(90deg); }

/* De rand links maakt zichtbaar dat deze regels bij de laag erboven horen. */
.vw-sub {
  margin: 0 0 var(--space-2) var(--space-5); padding-left: var(--space-3);
  border-left: 1px solid var(--chrome-line);
}
.vw-sublaag { min-height: 32px; }
.vw-kleur { width: 10px; height: 10px; flex: none; border-radius: var(--radius-pill); }
.vw-naam { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.vw-aantal { margin-left: auto; color: var(--chrome-ink-muted); }
.vw-bronregel { margin: var(--space-2) 0 0; color: var(--chrome-ink-subtle); }
.vw-schuif { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); color: var(--chrome-ink-muted); }
.vw-schuif input[type="range"] { flex: 1; min-width: 0; accent-color: var(--chrome-accent); }

/* Drie standen voor de weergave: geen vrije schuif, drie keuzes met uitleg. */
.vw-weergave { display: grid; gap: var(--space-1); }
.vw-weergave-optie {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-2); border-radius: var(--radius-sm); color: var(--chrome-ink); cursor: pointer;
}
.vw-weergave-optie:hover { background: var(--chrome-hover); }
.vw-weergave-optie input { flex: none; margin: 3px 0 0; accent-color: var(--chrome-accent); }
.vw-weergave-tekst b { display: block; font-weight: 500; }
.vw-weergave-tekst small { display: block; color: var(--chrome-ink-muted); }
.vw-weergave-vast .vw-weergave-optie { cursor: not-allowed; opacity: .7; }
.vw-weergave-noot { margin: var(--space-1) 0 0; color: var(--chrome-ink-subtle); }
.vw-weergave-noot:empty { display: none; }

/* ── contextpaneel: opnamen bij een punt ───────────────── */

.vwrap .ey-context { display: none; min-height: 0; }
/* Breed: 46% van het scherm, tussen 440 en 900 px. Het systeem noemt 440 px vast
   (Contextpaneel.md), maar een foto van een scheur of een roestplek beoordeel je niet
   op 408 px breed; met echte opnamen bleek dat te smal. Het werkblad klapt in zolang
   het paneel open staat (zetContext in viewer.js), zodat het model niet verdwijnt.
   Terug te melden aan het ontwerpsysteem. */
.vwrap.split .ey-context { display: flex; width: clamp(440px, 46vw, 900px); }
.ey-context .ey-paneel__kop h2 { flex: 1; min-width: 0; margin: 0; }

.vw-fotovak { display: flex; flex-direction: column; gap: var(--space-3); min-height: 0; }
/* De foto past helemaal in het vak: contain, niet cover. Een opname bijsnijden is
   hier schadelijk, want de aanwijzer staat op een pixelpositie in het VOLLEDIGE
   beeld en wat je wegsnijdt kan precies het detail zijn waar het om ging. Het
   stuk dat zijn eigen vak vult (OpenSeadragon) doet hetzelfde. */
.ey-opname-groot {
  flex: 1 1 auto; min-height: 220px; overflow: hidden;
  border-radius: var(--radius-md);
}
.ey-opname-groot > img,
.ey-opname-groot > #osd {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block;
}
.ey-opname-kaart { z-index: 2; max-width: calc(100% - var(--space-5)); overflow-wrap: anywhere; }
.ey-opname-kaart:empty { display: none; }
/* EEN rij miniaturen die zijwaarts schuift, geen raster dat afbreekt: het zijn
   varianten van hetzelfde beeld, en met tien opnamen op volgorde van perspectief
   is de eerste bijna altijd de goede. */
.ey-strip { flex: none; padding-bottom: var(--space-1); scroll-snap-type: x proximity; scrollbar-width: thin; }
.ey-strip__item { scroll-snap-align: start; }
.ey-strip__item:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* De aanwijzer op de foto: de marker van het systeem, met een rand in de kleur
   van het podium zodat hij ook op een lichte foto zichtbaar blijft. viewer.js
   zet left en top op het MIDDEN; de marge trekt hem er half overheen. Bij
   OpenSeadragon centreert de bibliotheek zelf, dus daar geen marge. */
.vw-fotomarker, .vw-osdmarker { z-index: 2; pointer-events: none; box-shadow: 0 0 0 2px var(--stage); }
.vw-fotomarker { margin: -8px 0 0 -8px; }
.vw-osdmarker { margin: 0; }

/* De aanwijzer staat maar BIJ BENADERING (de lens is op deze plek van de foto niet
   aan de beelden bewezen): een gestippelde cirkel ter grootte van de gemeten fout.
   De vorm draagt dat, niet de kleur: het ontwerpsysteem kent geen waarschuwing die
   op een willekeurige foto leesbaar blijft. Dezelfde donkere rand aan twee kanten
   als de marker, zodat hij op een lichte en een donkere foto zichtbaar blijft.
   viewer.js zet left, top, width en height (vlakke foto) of geeft hem als Rect aan
   OpenSeadragon, dat hem met het zoomen meeschaalt. */
.vw-fotoring {
  position: absolute; z-index: 2; pointer-events: none; box-sizing: border-box;
  border: 2px dashed var(--chrome-ink); border-radius: var(--radius-pill);
  box-shadow: 0 0 0 2px var(--stage), inset 0 0 0 2px var(--stage);
}

/* ── onder 1180 px: het contextpaneel opent als dialoog ── */

@media (max-width: 1180px) {
  /* componenten.css verbergt het paneel hier altijd; in de viewer hoort het er
     te zijn zodra er iets te tonen is. De scrim is een schaduw met een enorme
     spreiding: geen extra element nodig. */
  .vwrap.split .ey-context {
    display: flex; position: fixed; z-index: 60;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - var(--space-6))); height: min(720px, calc(100dvh - var(--space-6)));
    background: var(--surface-raised);
    box-shadow: 0 0 0 100vmax var(--scrim), var(--shadow-dialog);
    border-radius: var(--radius-lg);
  }
}

/* ── onder 860 px: het werkblad onder het model ────────── */

@media (max-width: 860px) {
  .vwrap .ey-podium { order: -1; flex: 1 1 auto; min-height: 260px; border-radius: 0; }
  .vwrap .ey-werkblad { order: 1; flex: 0 0 auto; max-height: 42%; }
  .vwrap.lc .ey-werkblad { width: auto; flex-direction: row; justify-content: space-between; }
  .vwrap.lc .ey-werkblad .ey-sectiekop > :not(.vw-paneelknop) { display: inline; }
  .vwrap.lc .ey-werkblad .ey-sectiekop > .vw-paneelknop { transform: rotate(-90deg); }

  /* De balk zakt naar de onderkant van het model en houdt alleen het icoon;
     elke knop heeft een aria-label (gereedschap() in viewer.js). */
  .ey-gereedschapsbalk { top: auto; bottom: var(--space-4); }
  .ey-gereedschap { padding: 0 var(--space-3); }
  .vw-tekst {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .ey-hint {
    top: var(--space-4); left: calc(var(--space-4) + 40px + var(--space-2)); right: var(--space-4);
    transform: none; white-space: normal; border-radius: var(--radius-md);
  }
  .ey-hud { bottom: calc(var(--space-4) + 46px + var(--space-3)); }
  .vw-lagen { width: min(296px, calc(100% - var(--space-6))); }
}

@media (pointer: coarse) {
  .vw-paneelknop, .vw-uitklap { width: 44px; height: 44px; }
  .vw-wis { width: 44px; height: 44px; top: 0; right: 0; }
  .vw-laag, .vw-weergave-optie { min-height: 44px; }
  /* Met een vinger is een keuzerondje van 13 px te klein om te raken (WCAG 2.2:
     minstens 24 bij 24). Het hele label is al klikbaar; dit maakt het rondje
     zelf ook een trefvlak. */
  .vw-weergave-optie input { width: 24px; height: 24px; margin: 0; }
  .vw-weergave-optie { align-items: center; }
}