/* Varve OS — vensterlaag voor de tegelhub.
   Alleen bureaublad: de laag zet zichzelf uit op smalle schermen en op aanraking.
   Tokens komen uit varve.css; elke var() heeft een fallback, zodat dit bestand
   ook los te bekijken is. Niets hierin raakt de bestaande hub-CSS aan:
   alle klassen beginnen met os-. */

/* De vensterlaag ligt óp het blad, niet erboven. Absoluut in het document dus,
   en niet vast aan de viewport zoals eerst.

   Dat verschil is de hele voorwaarde voor tegels die om een venster heen lopen.
   Hing een venster aan het scherm, dan schoven de tegels er bij elke scrollstap
   onderdoor en moest het raster zich telkens opnieuw om hetzelfde gat vouwen —
   onrustig, en het gat hoorde nergens bij. Nu is een venster een ding dat ergens
   op het blad ligt: je scrollt eroverheen zoals je over een tegel scrollt, en de
   ruimte die het inneemt ligt stil.

   height:0 zodat de laag zelf geen ruimte inneemt; de vensters erin steken eruit. */
.os-root {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  overflow: visible;
  z-index: 60;
  pointer-events: none; /* alleen de vensters zelf vangen muis */
}

/* ---------- venster ---------- */
.os-win {
  position: absolute;
  display: flex;
  flex-direction: column;
  /* border-box, anders telt de rand bij elke muisbeweging opnieuw bij de breedte
     op en groeit het venster tijdens het slepen. */
  box-sizing: border-box;
  pointer-events: auto;
  background: var(--surface-card, #ffffff);
  border: var(--border-block, 2px solid #0a0a0a);
  box-shadow: var(--shadow-hard, 4px 4px 0 #0a0a0a);
  /* in rem, zodat de bezoeker met een grotere tekstinstelling ook grotere
     vensters krijgt — hetzelfde getal als minMaat() in varve-os.js */
  min-width: 22rem;
  min-height: 14rem;
  overflow: hidden;
}
.os-win.is-focus {
  box-shadow: var(--shadow-hard-accent, 4px 4px 0 #a82020);
}
/* Gevuld: de maat komt uit vlak() in varve-os.js, want inset werkt hier niet
   meer — de laag is nul hoog en een venster zou tot niets samenvallen. */
.os-win.is-max { box-shadow: var(--shadow-hard-accent, 4px 4px 0 #a82020); }
.os-win[hidden] { display: none; }

/* titelbalk — sleepvlak */
.os-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: 8px 10px 8px 12px;
  border-bottom: var(--border-hair, 1px solid #c9c7c2);
  background: var(--surface-page, #f8f7f3);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.os-win.is-drag .os-bar { cursor: grabbing; }
.os-bar-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.os-title {
  font: var(--type-label, 500 11px/1.3 ui-monospace, monospace);
  letter-spacing: var(--tracking-label, .08em);
  text-transform: uppercase;
  color: var(--text-primary, #0a0a0a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.os-adres {
  font: var(--type-label, 400 11px/1.3 ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--text-secondary, #333);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.os-acts { margin-left: auto; display: flex; gap: 4px; flex: 0 0 auto; }
.os-btn {
  appearance: none;
  width: 26px;
  height: 22px;
  display: grid;
  place-items: center;
  border: var(--border-hair, 1px solid #c9c7c2);
  background: var(--surface-card, #fff);
  color: var(--text-primary, #0a0a0a);
  font: var(--type-label, 500 11px/1 ui-monospace, monospace);
  cursor: pointer;
  padding: 0;
}
.os-btn:hover { background: var(--surface-hover, #f2f0ea); }
.os-btn:focus-visible { outline: 2px solid var(--red-600, #a82020); outline-offset: 1px; }
.os-btn--sluit:hover { background: var(--red-600, #a82020); color: #fff; border-color: var(--red-600, #a82020); }

/* inhoud */
.os-body { position: relative; flex: 1 1 auto; background: var(--surface-sunken, #f2f0ea); }
.os-body iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }

.os-laad, .os-stuk {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--space-3, 12px);
  justify-items: center;
  text-align: center;
  padding: var(--space-5, 24px);
  background: var(--surface-page, #f8f7f3);
  font: var(--type-label, 500 11px/1.5 ui-monospace, monospace);
  letter-spacing: var(--tracking-label, .08em);
  text-transform: uppercase;
  color: var(--text-secondary, #333);
}
.os-stuk p {
  margin: 0;
  max-width: 34ch;
  text-transform: none;
  letter-spacing: 0;
  font: var(--type-body-sm, 400 13px/1.5 system-ui, sans-serif);
}
.os-stuk a {
  border: var(--border-hair, 1px solid #c9c7c2);
  padding: 8px 12px;
  color: var(--text-primary, #0a0a0a);
  text-decoration: none;
}
.os-stuk a:hover { background: var(--surface-hover, #f2f0ea); }
.os-balkje { width: 120px; height: 2px; background: var(--border-hairline, #c9c7c2); overflow: hidden; }
.os-balkje i { display: block; width: 40%; height: 100%; background: var(--red-600, #a82020); animation: os-schuif 1.1s linear infinite; }
@keyframes os-schuif { from { transform: translateX(-100%); } to { transform: translateX(350%); } }

/* greep om te schalen */
.os-greep { position: absolute; pointer-events: auto; }
.os-greep--o { top: 8px; right: 0; bottom: 14px; width: 6px; cursor: ew-resize; }
.os-greep--z { left: 8px; right: 14px; bottom: 0; height: 6px; cursor: ns-resize; }
.os-greep--hoek { right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; }
.os-greep--hoek::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--border-hairline, #c9c7c2);
  border-bottom: 2px solid var(--border-hairline, #c9c7c2);
}
.os-win.is-max .os-greep { display: none; }

/* schild: houdt de muis uit de iframes tijdens slepen */
.os-schild { position: fixed; inset: 0; z-index: 90; cursor: inherit; pointer-events: auto; }

/* schaduwvlak dat laat zien waar het venster landt */
.os-geest {
  position: fixed;
  z-index: 55;
  pointer-events: none;
  border: 2px dashed var(--red-600, #a82020);
  background: rgba(168, 32, 32, .06);
}
.os-geest[hidden] { display: none; }

/* ---------- dock ---------- */
.os-dock {
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 70;
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 6px;
  max-width: calc(100vw - 32px);
  overflow-x: auto;
  pointer-events: auto;
  background: var(--surface-card, #fff);
  border: var(--border-block, 2px solid #0a0a0a);
  box-shadow: var(--shadow-hard, 4px 4px 0 #0a0a0a);
}
.os-dock[hidden] { display: none; }
.os-dock-merk {
  display: grid;
  place-items: center;
  padding: 0 10px;
  border-right: var(--border-hair, 1px solid #c9c7c2);
  font: var(--type-label, 500 11px/1 ui-monospace, monospace);
  letter-spacing: .18em;
  color: var(--text-accent, #a82020);
  flex: 0 0 auto;
}
.os-dock-item {
  appearance: none;
  flex: 0 0 auto;
  max-width: 190px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: var(--border-hair, 1px solid #c9c7c2);
  background: var(--surface-card, #fff);
  color: var(--text-primary, #0a0a0a);
  font: var(--type-label, 500 11px/1 ui-monospace, monospace);
  letter-spacing: var(--tracking-label, .08em);
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.os-dock-item:hover { background: var(--surface-hover, #f2f0ea); }
.os-dock-item.is-focus { border-color: var(--red-600, #a82020); box-shadow: inset 0 -2px 0 var(--red-600, #a82020); }
.os-dock-item.is-min { color: var(--text-secondary, #333); }
.os-dock-item i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  background: var(--red-600, #a82020);
  font-style: normal;
}
.os-dock-item.is-min i { background: var(--border-hairline, #c9c7c2); }
.os-dock-alles {
  appearance: none;
  flex: 0 0 auto;
  border: 0;
  border-left: var(--border-hair, 1px solid #c9c7c2);
  background: transparent;
  color: var(--text-secondary, #333);
  font: var(--type-label, 500 11px/1 ui-monospace, monospace);
  letter-spacing: var(--tracking-label, .08em);
  text-transform: uppercase;
  padding: 0 10px;
  cursor: pointer;
}
.os-dock-alles:hover { color: var(--red-600, #a82020); }

/* tegels krijgen een andere aanwijzing zodra de laag aan staat */
body.os-aan .v-tile { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .os-balkje i { animation: none; width: 100%; }
}

/* ---------- twee deuren op de kaart ---------- */
/* Alleen zichtbaar als de laag aan staat; zonder de laag verandert er niets aan
   de tegels. Het pijltje dat er al stond wordt de tabblad-deur. */
body.os-aan .v-tile .v-arrow {
  padding: 2px 6px;
  margin: -2px -6px;
  border-radius: 2px;
  cursor: alias;
}
body.os-aan .v-tile .v-arrow:hover {
  background: var(--red-600, #a82020);
  color: var(--paper-000, #fbfaf7);
}
body.os-aan .v-tile .v-shot { position: relative; }
.os-hint {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  padding: 2px 7px;
  background: rgba(10, 10, 10, .78);
  color: var(--paper-000, #fbfaf7);
  font: var(--type-label, 500 11px/1.4 ui-monospace, monospace);
  letter-spacing: var(--tracking-label, .08em);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .12s;
  pointer-events: none;
}
body.os-aan .v-tile:hover .os-hint,
body.os-aan .v-tile:focus-visible .os-hint { opacity: 1; }

/* ---------- melding ---------- */
.os-melding {
  position: fixed;
  left: 50%;
  bottom: 74px;
  transform: translateX(-50%);
  z-index: 80;
  max-width: min(520px, 90vw);
  padding: 9px 14px;
  background: var(--ink-900, #0a0a0a);
  color: var(--paper-000, #fbfaf7);
  border: var(--border-block, 2px solid #0a0a0a);
  font: var(--type-label, 500 11px/1.4 ui-monospace, monospace);
  letter-spacing: var(--tracking-label, .08em);
  text-transform: uppercase;
  text-align: center;
  overflow-wrap: anywhere;
}
.os-melding[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .os-hint { transition: none; }
}

/* ---------- sjabloonpaneel ---------- */
.os-paneel {
  position: fixed;
  left: 50%;
  bottom: 4.5rem;
  transform: translateX(-50%);
  z-index: 75;
  width: min(46rem, calc(100vw - 2rem));
  max-height: min(34rem, calc(100vh - 8rem));
  overflow-y: auto;
  padding: 0 0 0.75rem;
  background: var(--surface-card, #fff);
  border: var(--border-block, 2px solid #0a0a0a);
  box-shadow: var(--shadow-hard, 4px 4px 0 #0a0a0a);
}
.os-paneel[hidden] { display: none; }
.os-paneel-kop {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.9rem;
  border-bottom: var(--border-hair, 1px solid #c9c7c2);
  background: var(--surface-page, #f8f7f3);
  font: var(--type-label, 500 11px/1 ui-monospace, monospace);
  letter-spacing: var(--tracking-label, .08em);
  text-transform: uppercase;
}
.os-paneel-dicht {
  appearance: none;
  border: 0;
  background: none;
  color: var(--text-secondary, #333);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  padding: 0 0.2rem;
}
.os-paneel-dicht:hover { color: var(--red-600, #a82020); }
.os-paneel-titel {
  padding: 0.85rem 0.9rem 0.35rem;
  font: var(--type-label, 500 11px/1 ui-monospace, monospace);
  letter-spacing: var(--tracking-label, .08em);
  text-transform: uppercase;
  color: var(--text-secondary, #333);
}
.os-paneel-lijst {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.4rem;
  padding: 0.6rem 0.9rem 0;
}
.os-kaart {
  position: relative;
  appearance: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0.6rem 0.7rem;
  border: var(--border-hair, 1px solid #c9c7c2);
  background: var(--surface-card, #fff);
  color: var(--text-primary, #0a0a0a);
  cursor: pointer;
}
.os-kaart:hover { background: var(--surface-hover, #f2f0ea); }
.os-kaart.is-aan { border-color: var(--red-600, #a82020); box-shadow: inset 2px 0 0 var(--red-600, #a82020); }
.os-kaart b {
  font: var(--type-label, 500 11px/1.2 ui-monospace, monospace);
  letter-spacing: var(--tracking-label, .08em);
  text-transform: uppercase;
}
.os-kaart span {
  font: var(--type-body-sm, 400 13px/1.35 system-ui, sans-serif);
  font-size: 0.78rem;
  color: var(--text-secondary, #333);
}
.os-kaart-weg {
  position: absolute;
  top: 4px;
  right: 5px;
  font-style: normal;
  font-size: 0.7rem;
  color: var(--text-secondary, #333);
  padding: 2px 4px;
}
.os-kaart-weg:hover { color: var(--red-600, #a82020); }
.os-paneel-knoppen, .os-paneel-bewaar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.35rem 0.9rem 0;
}
.os-paneel-bewaar input {
  flex: 1 1 12rem;
  min-width: 0;
  border: var(--border-hair, 1px solid #c9c7c2);
  background: var(--surface-page, #f8f7f3);
  color: var(--text-primary, #0a0a0a);
  font: var(--type-body-sm, 400 13px/1.4 system-ui, sans-serif);
  padding: 0.45rem 0.6rem;
}
.os-knopje {
  appearance: none;
  border: var(--border-hair, 1px solid #c9c7c2);
  background: var(--surface-card, #fff);
  color: var(--text-primary, #0a0a0a);
  font: var(--type-label, 500 11px/1 ui-monospace, monospace);
  letter-spacing: var(--tracking-label, .08em);
  text-transform: uppercase;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
}
.os-knopje:hover { background: var(--surface-hover, #f2f0ea); }
.os-knopje.is-aan { border-color: var(--red-600, #a82020); color: var(--text-accent, #a82020); }
.os-knopje b { font: inherit; }

/* ---------- bureaublad ----------
   De body krijgt het kader van de vrije ruimte. De laag zelf staat op
   position:fixed en hangt aan de viewport, dus vensters, dock en paneel merken
   hier niets van. Er wordt geen element verplaatst; dit is puur opmaak. */
/* Het bureaublad kroop vroeger in het grootste lege vak tussen de vensters: body
   kreeg position:fixed met een eigen left/top/width/height. Daarmee werden de
   tegels opzij geduwd in plaats van dat ze om een venster heen liepen, en dat is
   precies wat eraf moest. De body is nu gewoon de pagina; wat een venster bedekt
   slaat het tegelraster over (pakOmVensters in varve-os.js). */
body.os-bureau {
  margin: 0;
  min-height: 0;
  min-width: 0;
  max-width: none;
  position: relative;   /* ankerpunt voor .os-root */
  /* Eén scrollvlak, en dat is de pagina zelf. De hub zet op de body
     overflow-x:hidden met overflow-y:visible, en die combinatie rekent de
     browser om naar auto — waarmee de body een eigen scrollvlak wordt náást het
     document. Gemeten gevolg: je scrolde naar 900, verzette een venster, en de
     pagina sprong terug naar 0. clip klemt de breedte zonder dat de hoogte in
     een scrollvlak verandert. */
  /* Niets klemmen: het blad mag voorbij de rechterrand doorlopen. Een venster
     dat je daarheen sleept rekt de pagina op, en html.os-bureau hieronder laat
     je er dan naartoe scrollen. Zo is het blad groter dan het scherm zonder dat
     er een tweede scrollvlak bij komt. */
  overflow-x: visible;
  overflow-y: visible;
  /* Geen scroll-anchoring. De browser houdt normaal de inhoud stil die je ziet
     door mee te scrollen als er bóven het beeld iets van hoogte verandert — heel
     nuttig, maar hier verkeerd: het herschikken van de tegels is dan aanleiding
     om de pagina te verzetten, en omdat een venster op het blad staat springt
     dat venster mee onder je muis vandaan. Gemeten: scroll 900 werd 386 zodra je
     een venster naar beneden sleepte. Liever de tegels laten schuiven dan jou. */
  overflow-anchor: none;
}
/* De hub zet op html overflow-x:hidden, en dat blijft zo tot er werkelijk iets
   rechts van het scherm staat. Zomaar op auto zetten gaf een blijvende
   horizontale balk: de pagina is van zichzelf twee pixels breder dan het venster,
   en daar was die hidden nu juist voor. varve-os.js zet os-breed erbij zodra een
   venster voorbij de rand staat. */
html.os-bureau.os-breed { overflow-x: auto; }
/* Pannen: spatie ingedrukt of de middelste muisknop. Dezelfde greep als in elk
   tekenprogramma, en het is de enige manier om je op een blad dat groter is dan
   je scherm niet verdwaald te voelen. */
html.os-bureau.os-grijp,
html.os-bureau.os-grijp * { cursor: grab !important; }
html.os-bureau.os-pant,
html.os-bureau.os-pant * { cursor: grabbing !important; user-select: none !important; }
/* Wat zichzelf in het midden hield, mag nu de hele breedte pakken. */
body.os-bureau .wrap,
body.os-bureau .v-page,
body.os-bureau .v-main,
body.os-bureau main {
  max-width: none !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.os-bureau .wrap { padding: 1.25rem 1.25rem 6rem !important; }

/* Krappe ruimte: de kaart houdt zijn beeld en zijn naam, de rest gaat eraf. */
body.os-krap .v-desc { display: none; }
body.os-krap .v-body { padding: 0.55rem 0.65rem; gap: 2px; }
body.os-krap .v-title { font-size: 0.95rem; }
body.os-heelkrap .v-meta { display: none; }
body.os-heelkrap .v-shot { aspect-ratio: 2 / 1; }



/* Vensters bedekken alles: dan is er geen bureaublad om te tonen. */

/* Geen gaten in de laatste rij. Het raster blijft een grid — dat is wat de pagina
   zelf gebruikt en het houdt de kaarten netjes even breed. Het aantal kolommen is
   zo gekozen dat de banden vol lopen; blijft er toch een rest over, dan rekken de
   kaarten van die laatste rij met een kolomspan op tot de rij vol is. */
body.os-bureau .v-grid {
  grid-template-columns: repeat(var(--os-kol, 3), minmax(0, 1fr)) !important;
}

/* ---------- briefje (proef) ---------- */
.os-notitie {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  resize: none;
  padding: 0.9rem 1rem;
  background: var(--surface-card, #fff);
  color: var(--text-primary, #0a0a0a);
  font: var(--type-body-sm, 400 13px/1.55 system-ui, sans-serif);
  font-size: 0.95rem;
}
.os-notitie:focus { outline: 2px solid var(--red-600, #a82020); outline-offset: -2px; }
.os-notitie::placeholder { color: var(--text-secondary, #666); }
.os-btn--link:hover { background: var(--red-600, #a82020); color: #fff; border-color: var(--red-600, #a82020); }

/* Het briefje vertelt onderin wat het is en hoe vol het zit. */
.os-notitie { bottom: 2rem; height: auto; }
.os-notitie-voet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2rem;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  border-top: var(--border-hair, 1px solid #c9c7c2);
  background: var(--surface-page, #f8f7f3);
  color: var(--text-secondary, #333);
  font: var(--type-label, 500 11px/1 ui-monospace, monospace);
  letter-spacing: var(--tracking-label, .08em);
  text-transform: uppercase;
}
.os-notitie-voet.is-vol { color: var(--red-600, #a82020); }

/* Stills die niet het hele beeld vullen of juist fel wit zijn, vallen in het
   donker uit de toon. Ze staan nu iets gedempt en lichten op als je erover gaat —
   dan is de tegel rustig in rust, en helder als je hem aankijkt. */
[data-theme="dark"] .v-shot img { filter: brightness(.9) saturate(.95); transition: filter .15s; }
[data-theme="dark"] .v-tile:hover .v-shot img,
[data-theme="dark"] .v-tile:focus-visible .v-shot img { filter: none; }
/* En een haarlijn binnen het beeld, zodat een lichte schermafbeelding niet
   naadloos in de kaart overloopt. */
[data-theme="dark"] .v-shot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

/* ---------- menu op het bureaublad ---------- */
.os-bmenu {
  position: fixed;
  z-index: 85;
  min-width: 13rem;
  padding: 4px;
  display: flex;
  flex-direction: column;
  background: var(--surface-card, #fff);
  border: var(--border-block, 2px solid #0a0a0a);
  box-shadow: var(--shadow-hard, 4px 4px 0 #0a0a0a);
}
.os-bmenu[hidden] { display: none; }
.os-bmenu button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-primary, #0a0a0a);
  font: var(--type-label, 500 11px/1 ui-monospace, monospace);
  letter-spacing: var(--tracking-label, .08em);
  text-transform: uppercase;
  text-align: left;
  padding: 0.6rem 0.7rem;
  cursor: pointer;
}
.os-bmenu button:hover { background: var(--surface-hover, #f2f0ea); color: var(--text-accent, #a82020); }

/* ---------- tekstvlak onder de tegel ----------
   Half doorzichtig, met een waas erachter: het veld op de achtergrond blijft
   zichtbaar zonder dat de tekst eronder lijdt. De waas is het verschil — zonder
   backdrop-filter wordt dunne tekst op een bewegend veld onrustig.

   Let op de eerste regel: de kaart zelf heeft een dichte achtergrond. Zolang
   die er staat kijk je door het tekstvlak heen naar exact dezelfde kleur en
   zie je niets. De kaart moet dus open, en de beeldstrook houdt zijn eigen
   ondergrond zodat een tegel zonder afbeelding niet doorvalt. */
body.os-labels .v-tile,
body.os-labels .ig-tegel { background: transparent; }
body.os-labels .v-tile .v-shot,
body.os-labels .ig-tegel .ig-beeld { background: var(--surface-sunken, #eceae4); }

/* De kaarten in een rij zijn even hoog, maar hun teksten niet. Met een dichte
   kaart viel dat niet op; nu de kaart open staat bleef er onder de kortste
   tekst een strook over die als een tweede balk las. Het tekstvlak rekt dus
   mee tot de onderrand. */
body.os-labels .v-tile .v-body { flex: 1 1 auto; }

body.os-labels .v-tile .v-body,
body.os-labels .ig-tegel .v-body {
  /* Eerst de dichte kleur: een browser die color-mix niet kent negeert de regel
     erna en houdt een leesbare ondergrond, in plaats van tekst op een bewegend
     veld. */
  background: var(--surface-card, #fff);
  background: color-mix(in srgb, var(--surface-card) 62%, transparent);
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
}
body.os-labels .v-tile:hover .v-body,
body.os-labels .v-tile:focus-visible .v-body,
body.os-labels .ig-tegel:hover .v-body,
body.os-labels .ig-tegel:focus-visible .v-body {
  /* lezen gaat voor kijken: onder de muis loopt het vlak weer dicht */
  background: var(--surface-card, #fff);
  background: color-mix(in srgb, var(--surface-card) 93%, transparent);
}
@supports not (backdrop-filter: blur(1px)) {
  /* geen waas beschikbaar: dan liever iets minder doorzichtig */
  body.os-labels .v-tile .v-body,
  body.os-labels .ig-tegel .v-body { background: color-mix(in srgb, var(--surface-card) 84%, transparent); }
}

/* ---------- kop boven een band ----------
   --text-muted blijft in het donker op ink-500 staan: dezelfde grijstint als in
   het licht, en op een bijna zwarte pagina leest die niet meer. Alleen hier
   opgehaald, zodat de rest van de site zijn eigen schaal houdt. */
[data-theme="dark"] .v-band-title { color: var(--ink-300, #a3a3a3); }

/* ---------- soort als label ----------
   In het donker was de metaregel te flauw: ink-300 op ink-800 leest niet. Het
   label heeft nu een eigen rand en een stip in de familiekleur. */
body.os-labels .v-meta { color: var(--text-secondary); }
[data-theme="dark"] body.os-labels .v-meta { color: var(--ink-200); }

body.os-labels .os-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.15em 0.5em;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 999px;
  line-height: 1.5;
  color: var(--os-tagkleur, var(--text-secondary));
}
body.os-labels .os-tag::before {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--os-tagkleur, currentColor);
}
body.os-labels .os-tag[data-familie="klank"]      { --os-tagkleur: var(--signal-cyan, #14c8f0); }
body.os-labels .os-tag[data-familie="beeld"]      { --os-tagkleur: var(--signal-magenta, #f5137f); }
body.os-labels .os-tag[data-familie="instrument"] { --os-tagkleur: var(--red-500, #c43535); }
body.os-labels .os-tag[data-familie="spel"]       { --os-tagkleur: var(--signal-acid, #c8e600); }
body.os-labels .os-tag[data-familie="app"]        { --os-tagkleur: var(--signal-blue, #2b2be0); }
body.os-labels .os-tag[data-familie="tekst"]      { --os-tagkleur: var(--ink-300, #a3a3a3); }
body.os-labels .os-tag[data-familie="extern"]     { --os-tagkleur: var(--ink-400, #7a7a7a); }
[data-theme="dark"] body.os-labels .os-tag[data-familie="app"] { --os-tagkleur: #6b6bff; }
[data-theme="dark"] body.os-labels .os-tag[data-familie="tekst"] { --os-tagkleur: var(--ink-200, #c9c7c2); }

/* ---------- filterbalk ---------- */
/* ---------- verbergen ----------
   `hidden` is geen wet maar een gewone stijlregel van de browser, met de laagste
   voorrang die er is. De pagina zelf zegt `.v-tile { display: flex }` en die
   regel wint. Het filter zette dus netjes hidden op zeventien tegels en er
   verdween er geen één. Hier zetten we dat recht — voor de kaart, voor het
   raster en voor de band, want alle drie hebben ze een eigen display. */
.v-tile[hidden],
.v-grid[hidden],
.v-band[hidden] { display: none !important; }

.os-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 var(--space-4, 1rem);
}
.os-filter-kop {
  font: var(--type-label, 500 11px/1 ui-monospace, monospace);
  letter-spacing: var(--tracking-label, .08em);
  text-transform: uppercase;
  color: var(--text-secondary, #333);
  margin-right: 0.3rem;
}
.os-filter-knop {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.38rem 0.7rem;
  border: var(--border-hair, 1px solid #c9c7c2);
  background: transparent;
  color: var(--text-secondary, #333);
  font: var(--type-label, 500 11px/1 ui-monospace, monospace);
  letter-spacing: var(--tracking-label, .08em);
  text-transform: uppercase;
  cursor: pointer;
}
.os-filter-knop i {
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--os-tagkleur, currentColor);
}
.os-filter-knop em { font-style: normal; opacity: .55; }
.os-filter-knop:hover { color: var(--text-primary, #0a0a0a); border-color: currentColor; }
.os-filter-knop.is-aan {
  color: var(--text-primary, #0a0a0a);
  border-color: var(--os-tagkleur, var(--red-600, #a82020));
  box-shadow: inset 0 -2px 0 var(--os-tagkleur, var(--red-600, #a82020));
}
.os-filter-knop[data-familie="klank"]      { --os-tagkleur: var(--signal-cyan, #14c8f0); }
.os-filter-knop[data-familie="beeld"]      { --os-tagkleur: var(--signal-magenta, #f5137f); }
.os-filter-knop[data-familie="instrument"] { --os-tagkleur: var(--red-500, #c43535); }
.os-filter-knop[data-familie="spel"]       { --os-tagkleur: var(--signal-acid, #c8e600); }
.os-filter-knop[data-familie="app"]        { --os-tagkleur: var(--signal-blue, #2b2be0); }
.os-filter-knop[data-familie="tekst"]      { --os-tagkleur: var(--ink-300, #a3a3a3); }
.os-filter-knop[data-familie="extern"]     { --os-tagkleur: var(--ink-400, #7a7a7a); }
[data-theme="dark"] .os-filter-knop[data-familie="app"] { --os-tagkleur: #6b6bff; }
body.os-labels .os-tag { cursor: pointer; }
body.os-labels .os-tag:hover { border-color: currentColor; }