/* De opmaak van de statische pagina's (pipeline/src/build-pages.mjs kopieert dit
   bestand naar web/public/pagina-<hash>.css). Sober: één kolom, de cijfers in een
   tabel, één knop. Geen JavaScript, dus ook geen data-theme: licht of donker
   volgt het apparaat.

   De variabelen hieronder dragen dezelfde namen en dezelfde waarden als in
   style.css (de inkt en het papier) en tokens.css (de ladder en de niveaus).
   Importeren kan niet: die bestanden gaan door Vite en deze pagina's niet.
   pipeline/test/paginas.test.mjs vergelijkt de waarden, zodat een grand cru op de
   pagina nooit een ander rood krijgt dan op de kaart zonder dat een toets omvalt. */
:root {
  --ink: #211f1b;
  --ink-soft: #5f5a51;
  --paper: #faf8f3;
  --paper-solid: #ffffff;
  --line: #ddd8cd;
  --accent: #7b1e3a;

  --ruimte-1: 4px;
  --ruimte-2: 8px;
  --ruimte-3: 12px;
  --ruimte-4: 16px;
  --ruimte-6: 24px;
  --ruimte-7: 32px;
  --ruimte-8: 48px;

  --schreef: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --trap-bovenregel: 11px;
  --trap-label: 12px;
  --trap-klein: 13px;
  --trap-tekst: 15px;
  --trap-lead: 17px;
  --trap-cijfer: 22px;
  --trap-groot: 34px;
  --spatie-bovenregel: 0.1em;
  --spatie-titel: -0.012em;
  --hoek-1: 8px;
  --hoek-2: 14px;

  --niveau-gc: #701b32;
  --niveau-1er: #b05038;
  --niveau-village: #cf9a5a;
  --niveau-regionaal: #7d8898;
  --niveau-champagne: #a8b3c2;

  --vlak-1: rgba(33, 31, 27, 0.035);
  --lijn-zacht: rgba(33, 31, 27, 0.08);

  /* Ronde 3: wat de getekende tekens en de bouwstenen uit ui.css nog vragen
     (build-pages.mjs zet ui.css achter dit bestand). Dezelfde waarden als
     tokens.css, en de toets vergelijkt ze net zo. */
  --ruimte-5: 20px;
  --trap-titel: 28px;
  --hoek-3: 20px;
  --diepte-1: 0 1px 2px rgba(33, 31, 27, 0.06);
  --vlak-2: rgba(33, 31, 27, 0.07);
  --raster: rgba(33, 31, 27, 0.1);
  --kou: rgba(86, 140, 190, 0.38);
  --kou-vol: #5b8fbd;
  --zon-goud: #f2b53c;
  --zon-heuvel: rgba(33, 31, 27, 0.42);

  /* Het accent volgt de streek, net als in de app (zetGebiedskleur): de pagina
     zet --gebied-kleur op de wortel, en een derde inkt erbij houdt het leesbaar. */
  --accent-gebied: color-mix(in srgb, var(--gebied-kleur, var(--accent)) 66%, var(--ink));
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ece8e0;
    --ink-soft: #a49d91;
    --paper: #1a1917;
    --paper-solid: #232120;
    --line: #3a3733;
    --accent: #d4738c;
    --niveau-gc: #b8455f;
    --niveau-1er: #d97b57;
    --niveau-village: #e0b478;
    --niveau-regionaal: #94a1b3;
    --niveau-champagne: #b9c4d3;
    --vlak-1: rgba(255, 255, 255, 0.045);
    --lijn-zacht: rgba(255, 255, 255, 0.1);
    --diepte-1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --vlak-2: rgba(255, 255, 255, 0.09);
    --raster: rgba(255, 255, 255, 0.12);
    --kou: rgba(120, 175, 225, 0.4);
    --kou-vol: #7fb2dd;
    --zon-heuvel: rgba(236, 232, 224, 0.26);
    --accent-gebied: color-mix(in srgb, var(--gebied-kleur, var(--accent)) 70%, white);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: var(--trap-tekst);
  line-height: 1.5;
}
a { color: var(--accent-gebied); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

/* De balk bovenaan: het merk, waar je bent, en de andere taal. Op een telefoon
   breken de kruimels naar een eigen regel in plaats van het merk weg te duwen. */
.balk {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ruimte-2) var(--ruimte-4);
  max-width: 760px; margin: 0 auto; padding: var(--ruimte-4) var(--ruimte-4) var(--ruimte-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--trap-klein);
}
.merk { font-family: var(--schreef); font-size: var(--trap-lead); font-weight: 600; color: var(--ink); text-decoration: none; letter-spacing: var(--spatie-titel); }
.kruimels { flex: 1 1 auto; color: var(--ink-soft); }
.kruimels a { color: var(--ink-soft); }
.talen { margin-left: auto; display: flex; gap: var(--ruimte-3); }

main, footer { max-width: 760px; margin: 0 auto; padding: 0 var(--ruimte-4); }
main { padding-top: var(--ruimte-7); }
.bovenregel {
  margin: 0 0 var(--ruimte-2); font-size: var(--trap-bovenregel); font-weight: 600;
  letter-spacing: var(--spatie-bovenregel); text-transform: uppercase; color: var(--ink-soft);
}
h1 { margin: 0 0 var(--ruimte-3); font-family: var(--schreef); font-size: var(--trap-groot); font-weight: 600; line-height: 1.1; letter-spacing: var(--spatie-titel); text-wrap: balance; }
.lead { margin: 0 0 var(--ruimte-6); font-size: var(--trap-lead); line-height: 1.45; max-width: 60ch; }

/* De ene daad van de pagina. */
.daad { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2) var(--ruimte-4); margin: 0 0 var(--ruimte-7); }
.knop {
  display: inline-block; padding: var(--ruimte-3) var(--ruimte-6); border-radius: var(--hoek-2);
  background: var(--accent-gebied); color: var(--paper-solid); font-weight: 600; text-decoration: none;
}
/* In het donker is het accent licht, dus de tekst erop donker: het papier zelf.
   Hier stond de kleurcode los, en de toets die de waarden met de app vergelijkt
   ziet alleen variabelen. */
@media (prefers-color-scheme: dark) { .knop { color: var(--paper); } }
.knop:hover { filter: brightness(1.08); }

section { margin: 0 0 var(--ruimte-7); }
h2 { margin: 0 0 var(--ruimte-3); font-family: var(--schreef); font-size: var(--trap-cijfer); font-weight: 600; line-height: 1.2; letter-spacing: var(--spatie-titel); }
h2 a { color: inherit; }
h3 { margin: var(--ruimte-4) 0 var(--ruimte-2); font-size: var(--trap-label); font-weight: 600; letter-spacing: var(--spatie-bovenregel); text-transform: uppercase; color: var(--ink-soft); }

.cijfers { width: 100%; border-collapse: collapse; background: var(--paper-solid); border: 1px solid var(--line); border-radius: var(--hoek-2); border-spacing: 0; overflow: hidden; }
.cijfers th, .cijfers td { padding: var(--ruimte-3) var(--ruimte-4); text-align: left; vertical-align: top; border-top: 1px solid var(--lijn-zacht); }
.cijfers tr:first-child th, .cijfers tr:first-child td { border-top: 0; }
.cijfers th { width: 38%; font-weight: 400; color: var(--ink-soft); }
.cijfers td { font-weight: 600; font-variant-numeric: tabular-nums; }
.zacht { font-weight: 400; color: var(--ink-soft); }
/* De bron hoort bij het getal en niet in een voetnoot: klein, eronder. */
.bron { display: block; margin-top: 2px; font-size: var(--trap-label); font-weight: 400; color: var(--ink-soft); overflow-wrap: anywhere; }
.noot { margin: var(--ruimte-3) 0 0; font-size: var(--trap-klein); color: var(--ink-soft); max-width: 70ch; }

.rijen { margin: 0; padding: 0; list-style: none; }
.rijen li { padding: var(--ruimte-2) 0; border-top: 1px solid var(--lijn-zacht); break-inside: avoid; }
.rijen li:first-child { border-top: 0; }
.kolommen { columns: 2; column-gap: var(--ruimte-7); }
.kolommen li:first-child { border-top: 1px solid var(--lijn-zacht); }
@media (max-width: 560px) { .kolommen { columns: 1; } .cijfers th { width: 42%; } h1 { font-size: 28px; } }

.stip { display: inline-block; width: 10px; height: 10px; margin-right: var(--ruimte-2); border-radius: 50%; background: var(--line); vertical-align: baseline; }
.stip-grand-cru { background: var(--niveau-gc); }
.stip-premier-cru { background: var(--niveau-1er); }
.stip-village { background: var(--niveau-village); }
.stip-regional { background: var(--niveau-regionaal); }
.stip-champagne { background: var(--niveau-champagne); }

.herkomst { margin: 0; font-size: var(--trap-klein); }
.herkomst dt { margin-top: var(--ruimte-3); font-weight: 600; }
.herkomst dd { margin: 0; color: var(--ink-soft); max-width: 70ch; }
.letop { display: block; margin-top: var(--ruimte-1); font-style: italic; }

footer { margin-top: var(--ruimte-8); padding-top: var(--ruimte-4); padding-bottom: var(--ruimte-8); border-top: 1px solid var(--line); font-size: var(--trap-klein); color: var(--ink-soft); }
footer p { margin: 0 0 var(--ruimte-2); max-width: 70ch; }

/* ---- Ronde 3 (spoor vindbaar): de blokken van het terroir, eigendom, prijs ----
   De tekens en de bouwstenen dragen de klassen van de app (ui.css komt achter
   dit bestand mee); hier alleen wat in de app in style.css staat, of wat een
   pagina anders nodig heeft dan een paneel van 400 pixels. */
.u-kerngetallen { margin: 0 0 var(--ruimte-6); }
/* Drie grote cijfers naast elkaar op een telefoon: in de grootste trap brak
   "5,27 ha" over twee regels. Een trap kleiner past. Met de klasse van de rij
   ervoor, want ui.css komt achter dit bestand en won met dezelfde regel. */
@media (max-width: 560px) { .u-kerngetallen .u-kerngetal-waarde { font-size: var(--trap-titel); } }
/* En "1 016,0 ha" (Meursault) past ook in die trap niet in een derde van een
   telefoon: het getal breekt nooit, en een kolom is zo breed als haar getal. */
.u-kerngetallen .u-kerngetal-waarde { white-space: nowrap; }
main .u-kerngetallen[data-n="3"] { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: var(--ruimte-7); }
@media (max-width: 560px) { main .u-kerngetallen[data-n="3"] { column-gap: var(--ruimte-5); } }
.tblok .cijfers { margin-top: var(--ruimte-3); }
.tblok > p { max-width: 70ch; }
.rangcellen .rangcel { cursor: default; }

ul.geology { list-style: none; margin: 0; padding: 0; }
ul.geology li { display: grid; grid-template-columns: 14px 44px 1fr; gap: var(--ruimte-2); align-items: baseline; padding: var(--ruimte-1) 0; border-bottom: 1px solid var(--line); font-size: var(--trap-klein); }
.geo-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--lijn-zacht); }
.geo-share { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.geo-descr { color: var(--ink-soft); line-height: 1.35; }
.geo-descr strong { color: var(--ink); font-weight: 600; }
.geo-age { font-size: var(--trap-label); }
.geo-story { margin-top: var(--ruimte-3); padding: var(--ruimte-3) var(--ruimte-4); background: var(--paper-solid); border: 1px solid var(--line); border-radius: var(--hoek-1); }
.geo-story p { margin: 0 0 var(--ruimte-2); max-width: 70ch; }
.geo-story p:last-child { margin-bottom: 0; }

.climate-chart { display: block; width: 100%; max-width: 520px; height: auto; margin: var(--ruimte-1) 0 var(--ruimte-2); }
.climate-line { fill: none; stroke: var(--accent-gebied); stroke-width: 1.6; stroke-linejoin: round; }
.climate-normal { stroke: var(--ink-soft); stroke-width: 1.2; stroke-dasharray: 4 3; }
.climate-tick { font-size: 9px; fill: var(--ink-soft); }

.zon-tabel { margin-top: var(--ruimte-3); }
.zon-tabel th, .zon-tabel td { width: auto; }
details.meer { margin: var(--ruimte-3) 0 0; }
details.meer > summary { cursor: pointer; color: var(--accent-gebied); font-size: var(--trap-klein); }
details.meer[open] > summary { margin-bottom: var(--ruimte-2); }

/* Een regel per eigenaar of per plek: de hectares in een vaste kolom, dan de naam. */
.eigenaren li { display: grid; grid-template-columns: 5.5em 1fr; column-gap: var(--ruimte-3); align-items: baseline; }
.eigenaren li > .ha { grid-row: span 2; }
.eigenaren li > .zacht { grid-column: 2; font-size: var(--trap-klein); }
.eigenaren li > .stip { display: none; }
.ha { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: var(--trap-klein); white-space: nowrap; }
.recht { display: inline-flex; vertical-align: middle; color: var(--ink-soft); }
.naamdelen { margin: 0; }
.naamdelen dt { margin-top: var(--ruimte-2); font-weight: 600; }
.naamdelen dd { margin: 0; max-width: 70ch; }
.niveaubalk { display: flex; gap: 2px; height: 12px; margin: 0 0 var(--ruimte-3); border-radius: var(--hoek-1); overflow: hidden; }
.niveaubalk-deel { display: block; min-width: 3px; }
.prijs { margin: 0 0 var(--ruimte-2); }
.prijs-bedrag { font-family: var(--schreef); font-size: var(--trap-groot); font-weight: 600; letter-spacing: var(--spatie-titel); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .prijs-bedrag { font-size: var(--trap-titel); } .eigenaren li { grid-template-columns: 4.6em 1fr; } }

/* Op papier valt er niets aan te klikken: de knop naar de kaart, de kruimels en
   de taalwissel blijven weg, en het papier is wit in plaats van gebroken wit
   (dat drukt een printer als een grijs waas). De cijfers en hun bronnen blijven,
   want daar print iemand de pagina voor. */
@media print {
  body { background: #fff; }
  .daad, .kruimels, .taal, .talen { display: none; }
  a { color: inherit; text-decoration: none; }
  h2, h3 { break-after: avoid; }
  tr, li { break-inside: avoid; }
}
/* Wat achter een uitklapper staat, hoort op papier gewoon in de lijst: de
   eigenaren na de vijftiende, de drie ijkdagen van de zon, de lieux-dits na de
   dertigste. Hier stond details.meer > * { display: block }, maar Chrome verbergt
   de inhoud van een dichte <details> in een eigen vak (::details-content) en niet
   via de kinderen: op papier stond alleen "Nog 282 tonen". Een eigen regel,
   want een browser die het pseudo-element niet kent gooit de hele regel weg; de
   knop verdwijnt alleen waar de inhoud dan ook echt verschijnt (@supports). Een
   browser zonder ::details-content drukt de knop af en niet de lijst, zoals
   voorheen; openzetten met JavaScript kan niet, de pagina's hebben er geen. */
@media print {
  details.meer::details-content { content-visibility: visible; }
}
@supports selector(::details-content) {
  @media print { details.meer > summary { display: none; } }
}

/* De opmaak bij ui.js. Eén klasse per bouwsteen, allemaal met u- ervoor zodat
   ze niet botsen met wat er in style.css al staat.

   Alles hier rekent in de variabelen van tokens.css. Komt er in een bouwsteen
   een los getal of een losse kleur te staan, dan is dat een fout: dan hoort er
   een trap bij te komen in tokens.css. */

/* ------------------------------------------------------------------ kop ---- */

.u-bovenregel {
  margin: 0 0 var(--ruimte-1);
  font-size: var(--trap-bovenregel);
  line-height: 1.3;
  letter-spacing: var(--spatie-bovenregel);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.u-bovenregel-onder { margin: var(--ruimte-1) 0 0; }

.u-bladkop {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: start;
  gap: var(--ruimte-3);
  padding: var(--ruimte-2) 0 var(--ruimte-4);
}
.u-bladkop-titel { text-align: center; min-width: 0; }
/* De schreefletter is hier de hele reden dat deze kop anders voelt dan de
   vorige. Alleen hier en bij de kerngetallen; gegevens blijven schreefloos. */
.u-bladkop-titel h2 {
  margin: 0;
  font-family: var(--schreef);
  font-size: var(--trap-titel);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: var(--spatie-titel);
  color: var(--ink);
}
.u-bladkop-acties { display: flex; gap: var(--ruimte-2); justify-content: flex-end; }

.u-rondknop {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--lijn-zacht);
  border-radius: 50%;
  background: var(--vlak-1);
  color: var(--ink);
  cursor: pointer;
}
.u-rondknop svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.u-bewaar svg { fill: none; }
.u-bewaar.is-active svg { fill: currentColor; }
.u-rondknop.is-leeg { border: 0; background: none; }
.u-rondknop:hover { background: var(--vlak-2); }

.u-sectiekop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ruimte-3);
  margin: var(--ruimte-7) 0 var(--ruimte-3);
}
.u-sectiekop h3 {
  margin: 0;
  font-family: var(--schreef);
  font-size: var(--trap-cijfer);
  font-weight: 600;
  letter-spacing: var(--spatie-titel);
  text-transform: none;
  color: var(--ink);
}
/* Rechts staat waar je naar kijkt. Zonder deze regel weet niemand meer dat de
   bereikknop de cijfers eronder herschaald heeft. */
.u-sectiekop-bereik { font-size: var(--trap-klein); color: var(--ink-soft); white-space: nowrap; }

/* --------------------------------------------------------------- kaarten ---- */

.u-kaart { border-radius: var(--hoek-3); padding: var(--ruimte-4); }
.u-kaart-1 { background: var(--vlak-1); }
.u-kaart-2 { background: var(--vlak-2); border-radius: var(--hoek-2); }
.u-kaart + .u-kaart { margin-top: var(--ruimte-3); }

/* --------------------------------------------------------------- cijfers ---- */

.u-kerngetallen { display: grid; gap: var(--ruimte-4) var(--ruimte-3); }
.u-kerngetallen[data-n="2"] { grid-template-columns: 1fr 1fr; }
.u-kerngetallen[data-n="3"] { grid-template-columns: repeat(3, 1fr); }
.u-kerngetallen[data-n="4"] { grid-template-columns: repeat(4, 1fr); }
.u-kerngetal-waarde {
  margin: 0;
  font-family: var(--schreef);
  font-size: var(--trap-groot);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--spatie-titel);
  font-variant-numeric: tabular-nums;
}
.u-kerngetal-label { margin: var(--ruimte-1) 0 0; font-size: var(--trap-label); line-height: 1.3; color: var(--ink-soft); }
/* Het oordeelwoord onder een kerngetal: in de kleur van het gebied als het getal
   afwijkt, zacht als het gewoon is. Dan zie je in één blik welk van de drie
   getallen het verhaal draagt. */
.u-kerngetal-oordeel { margin: 2px 0 0; font-size: var(--trap-label); line-height: 1.3; font-weight: 640; color: var(--accent-gebied); }
.u-kerngetal-oordeel.is-gewoon { font-weight: 400; color: var(--ink-soft); }

/* ---------------------------------------------------------------- tekens ---- */

/* Een rij tekens met een getal (tekenrij in ui.js, de tekens uit tekens.js). De
   cellen staan links uitgelijnd zoals de kerngetallen, want ze staan er vaak
   recht onder. */
.u-tekenrij { display: grid; gap: var(--ruimte-3) var(--ruimte-2); margin: var(--ruimte-2) 0 var(--ruimte-3); }
.u-tekenrij[data-n="1"] { grid-template-columns: 1fr; }
.u-tekenrij[data-n="2"] { grid-template-columns: 1fr 1fr; }
.u-tekenrij[data-n="3"] { grid-template-columns: repeat(3, 1fr); }
.u-tekenrij[data-n="4"] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 340px) { .u-tekenrij[data-n="4"] { grid-template-columns: 1fr 1fr; } }
.u-tekencel { min-width: 0; }
.u-tekencel-teken { display: flex; align-items: flex-end; height: 36px; color: var(--ink-soft); }
.u-tekencel-waarde {
  margin: var(--ruimte-1) 0 0;
  font-family: var(--schreef);
  font-size: var(--trap-lead);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: var(--spatie-titel);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.u-tekencel-woord { margin: 2px 0 0; font-size: var(--trap-label); line-height: 1.3; color: var(--ink-soft); }

/* De getekende tekens. Alles in currentColor of in een tint van de inkt, zodat
   licht en donker vanzelf meegaan; alleen de stip draagt de kleur van het gebied
   en de koude lucht haar eigen blauw (het ene nieuwe kleurtoken van deel 7). */
.t-teken { display: block; overflow: visible; }
.t-grond { fill: var(--vlak-2); stroke: none; }
.t-rand { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.t-stip { fill: var(--accent-gebied); stroke: var(--paper-solid); stroke-width: 1.5; }
.t-wig { fill: var(--accent-gebied); stroke: none; }
.t-kou { fill: var(--kou); }
.t-stap { fill: var(--vlak-2); }
.t-stap.is-vol { fill: var(--kou-vol); }
.t-rij line { stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.t-pijl { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.6; }
.t-balk { display: block; width: 56px; height: 8px; border-radius: 999px; background: var(--vlak-2); overflow: hidden; }
.t-balk > span { display: block; height: 100%; border-radius: 999px; background: var(--accent-gebied); }

/* Het antwoord bovenaan een blad. */
.u-antwoord { margin: 0 0 var(--ruimte-4); font-family: var(--schreef); font-size: var(--trap-lead); line-height: 1.35; letter-spacing: var(--spatie-titel); color: var(--ink); }

/* Meer wijngaarden op één as (de proefkaart). De baan is een dunne lijn, de
   stippen dragen het nummer uit de lijst erboven. */
.u-meerpunt { margin: var(--ruimte-2) 0 0; }
.u-meerpunt-baan { position: relative; margin: 0 11px; background: linear-gradient(var(--lijn-zacht), var(--lijn-zacht)) 0 10px / 100% 2px no-repeat; }
.u-meerpunt-stip {
  position: absolute;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  border-radius: 50%;
  background: var(--accent-gebied);
  color: var(--paper-solid);
  font-size: var(--trap-bovenregel);
  font-weight: 640;
  font-variant-numeric: tabular-nums;
}

/* De plaats in de rij, als knop naar de ranglijst. */
.u-rang { margin: var(--ruimte-2) 0 0; }
.u-rang-knop { border: 0; background: none; padding: 0; font: inherit; font-size: var(--trap-label); color: var(--accent-gebied); cursor: pointer; text-align: left; }
.u-rang-knop:hover { text-decoration: underline; }

.u-cijferrij { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ruimte-3); }
.u-cijfer-label {
  display: flex;
  align-items: center;
  gap: var(--ruimte-1);
  margin: 0 0 var(--ruimte-1);
  font-size: var(--trap-bovenregel);
  color: var(--ink-soft);
}
.u-cijfer-waarde { margin: 0; font-size: var(--trap-tekst); font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; }
.u-teken { opacity: 0.7; font-size: 0.95em; }

/* De samenstellingsbalk. Eén balk, geen gaten ertussen: het is één geheel dat
   verdeeld is, en een gat zou suggereren dat er grond tussenuit valt. */
.u-samenstelling-totaal { margin: 0 0 var(--ruimte-2); font-size: var(--trap-label); color: var(--ink-soft); }
.u-balk { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--vlak-2); }
.u-balk-deel { display: block; min-width: 2px; }
.u-legenda { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ruimte-1) var(--ruimte-3); margin: var(--ruimte-3) 0 0; padding: 0; list-style: none; }
.u-legenda-item { display: flex; align-items: baseline; gap: var(--ruimte-1); font-size: var(--trap-label); min-width: 0; }
.u-legenda-naam { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-legenda-waarde { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.u-legenda-ha { color: var(--ink-soft); }
.u-stip { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; align-self: center; }
.u-stip-alles { background: var(--ink-soft); opacity: 0.5; }

/* ------------------------------------------------------ de echte doorsnede ---- */

/* Deze sectie staat hier, na de tekens waar ze bij hoort, en niet onderaan: in
   ronde 1 hingen twee sporen hun sectie tegelijk onderaan het bestand, en dat gaf
   bij het samenvoegen een botsing over niets. */

/* De gemeten doorsnede in het blok Ligging (doorsnede.js). De grond en de lijn in
   tinten van de inkt zoals de kleine tekens; de stukken in de niveaukleuren uit
   tokens.css, die in donker hun eigen lichtere waarde hebben. De eigen wijngaard
   is dikker en dekkend, de buren dunner en iets terug. */
.doorsnede { margin: var(--ruimte-2) 0 var(--ruimte-3); }
.doorsnede-bron { margin: var(--ruimte-1) 0 0; }
.t-echte-doorsnede { display: block; width: 100%; height: auto; overflow: visible; color: var(--ink-soft); }
.t-echte-doorsnede .d-raster { stroke: var(--raster); stroke-width: 1; stroke-dasharray: 2 3; }
.t-echte-doorsnede .d-grond { fill: var(--vlak-2); stroke: none; }
.t-echte-doorsnede .d-lijn { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.t-echte-doorsnede .d-stuk { fill: none; stroke-width: 4.5; stroke-linejoin: round; stroke-linecap: butt; opacity: 0.85; }
.t-echte-doorsnede .d-stuk.is-eigen { stroke-width: 7; opacity: 1; }
.t-echte-doorsnede .d-zuil { stroke: none; opacity: 0.16; }
.t-echte-doorsnede .d-niveau-gc { stroke: var(--niveau-gc); }
.t-echte-doorsnede .d-niveau-1er { stroke: var(--niveau-1er); }
.t-echte-doorsnede .d-niveau-village { stroke: var(--niveau-village); }
.t-echte-doorsnede .d-niveau-regionaal { stroke: var(--niveau-regionaal); }
.t-echte-doorsnede .d-niveau-champagne { stroke: var(--niveau-champagne); }
.t-echte-doorsnede .d-niveau-geen { stroke: var(--ink-soft); }
.t-echte-doorsnede .d-zuil.d-niveau-gc { fill: var(--niveau-gc); }
.t-echte-doorsnede .d-zuil.d-niveau-1er { fill: var(--niveau-1er); }
.t-echte-doorsnede .d-zuil.d-niveau-village { fill: var(--niveau-village); }
.t-echte-doorsnede .d-zuil.d-niveau-regionaal { fill: var(--niveau-regionaal); }
.t-echte-doorsnede .d-zuil.d-niveau-champagne { fill: var(--niveau-champagne); }
.t-echte-doorsnede .d-zuil.d-niveau-geen { fill: var(--ink-soft); }
.t-echte-doorsnede .d-grens { stroke: var(--paper-solid); stroke-width: 1.2; }
.t-echte-doorsnede .d-draad { stroke: currentColor; stroke-width: 0.8; opacity: 0.55; }
.t-echte-doorsnede .d-maat { fill: none; stroke: currentColor; stroke-width: 1; }
.t-echte-doorsnede text { font-family: inherit; fill: currentColor; stroke: none; }
.t-echte-doorsnede .d-as { font-size: 9.5px; font-variant-numeric: tabular-nums; }
.t-echte-doorsnede .d-naam { font-size: 10.5px; fill: var(--ink); }
.t-echte-doorsnede .d-naam.is-eigen { font-weight: 700; }

/* Het pijltje op het kaartje in de kop (valpijl in doorsnede.js): een rand in de
   kleur van het blad en een lijn in de inkt, zodat hij op elke niveaukleur staat
   en in donker vanzelf omkeert. De eerste versie droeg twee losse kleurcodes in
   de tekst van de svg. */
.minikaart-pijl { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.minikaart-pijl-rand { stroke: var(--paper-solid); stroke-width: 4.2; opacity: 0.9; }
.minikaart-pijl-lijn { stroke: var(--ink); stroke-width: 1.8; }

/* --------------------------------------------------------------- knoppen ---- */

.u-hoofdrij { display: flex; align-items: center; gap: var(--ruimte-2); margin-top: var(--ruimte-4); }
.u-hoofdknop {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-2);
  padding: var(--ruimte-3) var(--ruimte-4);
  border: 1px solid var(--accent-gebied);
  border-radius: var(--hoek-2);
  background: color-mix(in srgb, var(--accent-gebied) 8%, transparent);
  color: var(--accent-gebied);
  font: inherit;
  font-size: var(--trap-tekst);
  font-weight: 600;
  cursor: pointer;
}
.u-hoofdknop svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.u-hoofdknop:hover { background: color-mix(in srgb, var(--accent-gebied) 16%, transparent); }

/* Het bereik scrollt liggend als het niet past, want vijf niveaus plus monopole
   halen de breedte van een telefoon niet. Liever schuiven dan afbreken: een
   tweede regel chips leest als een tweede groep. */
.u-bereik {
  display: flex;
  gap: var(--ruimte-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--ruimte-1);
  margin: 0 calc(var(--ruimte-4) * -1);
  padding-inline: var(--ruimte-4);
  /* De laatste chip loopt tegen de rand aan zodra er meer zijn dan er passen.
     Hard afgeknipt leest dat als een fout; vervaagd leest het als "hier kun je
     schuiven". Past alles wel, dan valt de vervaging op lege ruimte en zie je
     er niets van. */
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.u-bereik::-webkit-scrollbar { display: none; }
.u-bereik-knop {
  display: flex;
  align-items: center;
  gap: var(--ruimte-2);
  flex: 0 0 auto;
  padding: var(--ruimte-2) var(--ruimte-3);
  border: 1px solid var(--lijn-zacht);
  border-radius: 99px;
  background: var(--vlak-1);
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--trap-klein);
  cursor: pointer;
  white-space: nowrap;
}
.u-bereik-knop.is-active { border-color: var(--ink-soft); background: var(--vlak-2); color: var(--ink); font-weight: 600; }
.u-bereik-aantal { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.u-bereik-knop.is-active .u-bereik-aantal { color: var(--ink); opacity: 0.6; }

.u-schakelaar { display: flex; gap: 2px; padding: 3px; border-radius: var(--hoek-2); background: var(--vlak-2); }
.u-schakel-knop {
  flex: 1;
  padding: var(--ruimte-2) var(--ruimte-3);
  border: 1px solid transparent;
  border-radius: calc(var(--hoek-2) - 4px);
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--trap-klein);
  cursor: pointer;
}
.u-schakel-knop.is-active { background: var(--paper-solid); border-color: var(--lijn-zacht); color: var(--ink); font-weight: 600; box-shadow: var(--diepte-1); }

/* ------------------------------------------------------------- verdeling ---- */

.u-verdeling-rij { display: grid; grid-template-columns: 96px 1fr 68px; align-items: center; gap: var(--ruimte-3); padding: var(--ruimte-2) 0; }
.u-verdeling-naam { margin: 0; font-size: var(--trap-label); line-height: 1.25; color: var(--ink-soft); }
.u-verdeling-rij.is-eigen .u-verdeling-naam { color: var(--ink); font-weight: 600; }
.u-verdeling-waarde { margin: 0; text-align: right; font-size: var(--trap-tekst); font-weight: 600; font-variant-numeric: tabular-nums; }
.u-verdeling { display: block; width: 100%; height: 46px; overflow: visible; }

/* De gekozene krijgt de accentkleur, de buren liggen er grijs achter. Zo weet
   je zonder legenda welke kromme van jou is. */
.u-verdeling-reeks.is-eigen .u-verdeling-vlak { fill: color-mix(in srgb, var(--accent-gebied) 35%, transparent); }
.u-verdeling-reeks.is-eigen .u-verdeling-mediaan { stroke: var(--accent-gebied); }
.u-verdeling-reeks.is-buur .u-verdeling-vlak { fill: var(--vlak-2); }
.u-verdeling-reeks.is-buur .u-verdeling-mediaan { stroke: var(--ink-soft); }
.u-verdeling-mediaan { stroke-width: 1.5; stroke-dasharray: none; }
.u-verdeling-band { fill: color-mix(in srgb, var(--accent-gebied) 12%, transparent); }
.u-verdeling-as { display: flex; justify-content: space-between; font-size: var(--trap-bovenregel); color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ roos ---- */

.u-roosrij { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ruimte-3); }
.u-roos-vak { margin: 0; text-align: center; }
.u-roos { display: block; width: 100%; height: auto; max-width: 96px; margin: 0 auto; }
.u-roos-ring { fill: none; stroke: var(--raster); stroke-width: 1; }
.u-roos-ring.is-half { stroke-dasharray: 2 3; }
.u-roos-wig { fill: var(--ink-soft); opacity: 0.35; }
.u-roos-vak.is-eigen .u-roos-wig { fill: var(--accent-gebied); opacity: 0.75; }
.u-roos-letter { font-size: 8px; fill: var(--ink-soft); text-anchor: middle; dominant-baseline: middle; }
.u-roos-vak figcaption { display: grid; gap: 1px; margin-top: var(--ruimte-1); }
.u-roos-naam { font-size: var(--trap-bovenregel); color: var(--ink-soft); }
.u-roos-waarde { font-size: var(--trap-klein); font-weight: 600; }

/* ------------------------------------------------------------ schuifmaat ---- */

.u-maat + .u-maat { margin-top: var(--ruimte-4); }
.u-maat-kop { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ruimte-3); margin-bottom: var(--ruimte-2); }
.u-maat-label { display: flex; align-items: center; gap: var(--ruimte-1); font-size: var(--trap-klein); color: var(--ink-soft); }
.u-maat-waarde { font-size: var(--trap-klein); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Het oordeel in de accentkleur: dat is het woord dat blijft hangen, niet het
   getal ervoor. */
.u-maat-oordeel { margin-left: var(--ruimte-2); color: var(--accent-gebied); font-weight: 600; }
.u-maat-spoor { position: relative; height: 4px; border-radius: 99px; background: var(--vlak-2); }
.u-maat-gewoon { position: absolute; top: 0; bottom: 0; background: var(--ink-soft); opacity: 0.25; border-radius: 99px; }
.u-maat-stip { position: absolute; top: 50%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--accent-gebied); transform: translateY(-50%); }
.u-maat-as { display: flex; justify-content: space-between; margin-top: var(--ruimte-2); font-size: var(--trap-bovenregel); color: var(--ink-soft); }

/* --------------------------------------------------------------- oordeel ---- */

.u-oordeel { margin: var(--ruimte-3) 0 0; font-size: var(--trap-klein); line-height: 1.45; color: var(--ink); }
.u-oordeel span { color: var(--ink-soft); margin: 0 var(--ruimte-1); }
.u-waarom, .u-bronregel {
  display: flex;
  gap: var(--ruimte-2);
  margin: var(--ruimte-2) 0 0;
  font-size: var(--trap-label);
  line-height: 1.45;
  color: var(--ink-soft);
}
.u-bronregel { margin-top: var(--ruimte-3); }

/* ----------------------------------------------------------------- rijen ---- */

.u-lijstkop { margin: 0 0 var(--ruimte-2); font-size: var(--trap-bovenregel); letter-spacing: var(--spatie-bovenregel); text-transform: uppercase; color: var(--ink-soft); }
.u-lijst { display: grid; gap: var(--ruimte-2); margin: 0; padding: 0; list-style: none; }
.u-lijstrij {
  display: flex;
  align-items: center;
  gap: var(--ruimte-3);
  padding: var(--ruimte-3);
  padding-left: var(--ruimte-4);
  border-radius: var(--hoek-2);
  background: var(--vlak-1);
  position: relative;
  overflow: hidden;
}
/* Het streepje draagt het niveau. Daardoor hoeft de lijst niet per niveau op te
   breken als je liever op naam sorteert. */
.u-lijstrij::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rij-kleur, transparent); }
.u-lijstrij-tekst { min-width: 0; flex: 1; }
.u-lijstrij-naam { margin: 0; font-family: var(--schreef); font-size: var(--trap-lead); font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-lijstrij-onder { margin: 2px 0 0; font-size: var(--trap-label); color: var(--ink-soft); }
.u-lijstrij-waarde { font-size: var(--trap-klein); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.u-lijstrij.is-klikbaar { cursor: pointer; }
.u-lijstrij.is-klikbaar:hover { background: var(--vlak-2); }
.u-lijstrij-knop { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; }
.u-lijstrij-knop svg { width: 15px; height: 15px; }

@media (max-width: 380px) {
  .u-legenda { grid-template-columns: 1fr; }
  .u-verdeling-rij { grid-template-columns: 82px 1fr 58px; gap: var(--ruimte-2); }
}

/* De rest van een lijst achter een uitklap. Een <details> en geen eigen knop,
   zoals de knoppenrij in panel.js: dan hoeft er niets aan de klikafhandeling in
   main.js te veranderen. */
.u-meer { margin-top: var(--ruimte-2); }
.u-meer > summary {
  padding: var(--ruimte-2) var(--ruimte-3);
  border-radius: var(--hoek-2);
  background: var(--vlak-1);
  color: var(--ink-soft);
  font-size: var(--trap-klein);
  cursor: pointer;
  list-style: none;
  text-align: center;
}
.u-meer > summary::-webkit-details-marker { display: none; }
.u-meer > summary:hover { background: var(--vlak-2); color: var(--ink); }
.u-meer[open] > summary { margin-bottom: var(--ruimte-2); }

/* Eén meting op de gedeelde as: een streepje, geen kromme. Zie verdelingRij. */
.u-punt { overflow: visible; }
.u-punt-as { stroke: var(--raster); stroke-width: 1; }
.u-punt-merk { stroke: var(--accent-gebied); stroke-width: 2.5; stroke-linecap: round; }

/* ===================================================== ronde 1: spoor paneel ====
   De bouwstenen en tekens van 17 september 2026 (UI-ROADMAP deel 7): de
   eigendomsbalk, de ladder, de zonnebanden, de grondkolom, proza met "Lees
   verder". Eén blok onderaan, zodat het samenvoegen van de sporen geen puzzel
   wordt. */

/* Een getekend teken in een regel tekst (waarom, bron, cijferrij, schuifmaat).
   .u-teken was op een Unicode-teken gemaakt en regelde alleen de lettergrootte;
   een svg heeft een eigen maat nodig en hangt in een flex-regel anders aan de
   bovenrand in plaats van op de eerste regel. */
.u-teken { display: inline-flex; flex: 0 0 auto; }
.u-teken svg { width: 1.25em; height: 1.25em; }
.u-waarom .u-teken, .u-bronregel .u-teken { margin-top: 0.1em; }

/* De aandelenbalk. Hoger dan de balk van de niveaus (14 tegen 8 punten): dit is
   het ene beeld van het tabblad Eigendom, geen bijschrift bij een getal. */
.u-aandelenbalk { display: flex; gap: 2px; height: 14px; border-radius: var(--hoek-1); overflow: hidden; }
.u-aandeel { display: block; min-width: 3px; }
.u-aandeel-staal { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; margin-top: 0.25em; }
/* Vijf trappen van de gebiedskleur, van vol naar licht. Geen vijf kleuren: de
   niveaukleuren betekenen al iets (grand cru tot regionaal) en een regenboog van
   eigenaren zou daarmee botsen. De kier tussen de delen doet het onderscheid. */
.is-rang-1 { background: var(--accent-gebied); }
.is-rang-2 { background: color-mix(in srgb, var(--accent-gebied) 78%, var(--paper-solid)); }
.is-rang-3 { background: color-mix(in srgb, var(--accent-gebied) 58%, var(--paper-solid)); }
.is-rang-4 { background: color-mix(in srgb, var(--accent-gebied) 42%, var(--paper-solid)); }
.is-rang-5 { background: color-mix(in srgb, var(--accent-gebied) 28%, var(--paper-solid)); }
.u-aandeel.is-rest, .u-aandeel-staal.is-rest { background: color-mix(in srgb, var(--ink-soft) 45%, transparent); }
/* Onbekend is gearceerd en niet effen: het is geen partij maar een gat in wat
   openbaar is, en dat moet je in de balk zelf zien. */
.u-aandeel.is-onbekend, .u-aandeel-staal.is-onbekend {
  background: repeating-linear-gradient(135deg, var(--vlak-2) 0 3px, color-mix(in srgb, var(--ink-soft) 30%, transparent) 3px 4.5px);
}
.u-aandelen-legenda { display: grid; gap: var(--ruimte-1); margin: var(--ruimte-3) 0 0; padding: 0; list-style: none; }
/* Boven uitgelijnd en niet op de grondlijn: de naam is een knop, en de grondlijn
   van een knop van drie regels is zijn laatste regel, dus het procent en het
   staaltje zakten bij een lange naam naar onderen. */
.u-aandelen-item { display: flex; align-items: flex-start; gap: var(--ruimte-2); font-size: var(--trap-klein); line-height: 1.3; min-width: 0; }
/* De naam breekt af op een nieuwe regel en wordt niet afgekapt: een afgekapte
   naam is geen naam meer. */
.u-aandelen-naam { min-width: 0; flex: 1; overflow-wrap: anywhere; color: var(--ink); }
.u-aandelen-naam .link-button { font-size: inherit; text-align: left; }
.u-aandelen-item:has(.is-rest) .u-aandelen-naam, .u-aandelen-item:has(.is-onbekend) .u-aandelen-naam { color: var(--ink-soft); }
.u-aandelen-waarde { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.eigendom-blok > ul.owners { margin-top: var(--ruimte-4); }

/* Proza met "Lees verder": dezelfde uitklapper, maar als een regel tekst en niet
   als een grijs vlak over de volle breedte. Hij hoort bij de alinea erboven. */
.u-proza { margin-top: 0; }
.u-proza > summary { display: inline-block; padding: 0; background: none; color: var(--accent-gebied); font-size: var(--trap-label); text-align: left; }
.u-proza > summary:hover { background: none; color: var(--accent-gebied); text-decoration: underline; }
.u-proza .u-proza-open { display: none; }
.u-proza[open] .u-proza-dicht { display: none; }
.u-proza[open] .u-proza-open { display: inline; }
.bron-proza { margin-top: var(--ruimte-3); }
.bron-proza + .bron-proza { margin-top: var(--ruimte-2); }

/* De ladder: de plaats in de rij. De sporten in de tint van de inkt, de eigen
   sport in de kleur van het gebied en dikker. */
.t-ladder { width: 120px; max-width: 100%; height: 16px; }
.t-sport { stroke: color-mix(in srgb, var(--ink-soft) 55%, transparent); stroke-width: 1.4; stroke-linecap: round; }
.t-sport.is-eigen { stroke: var(--accent-gebied); stroke-width: 3; }
.t-sport-rail { fill: var(--vlak-2); stroke: none; }
.rangblok { margin: 0 0 var(--ruimte-5); }
.rangblok .rangregel { margin: 0 0 var(--ruimte-2); }
.rangcellen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ruimte-3) var(--ruimte-4); }
.rangcel { display: grid; gap: 3px; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; min-width: 0; }
.rangcel-tekst { font-size: var(--trap-label); line-height: 1.3; }
.rangcel:hover .rangcel-tekst { text-decoration: underline; text-underline-offset: 2px; }

/* De zonnebanden. De baan is de klok, het grijze stuk de dag bij een vlakke
   horizon, het gouden stuk de zon op de wijngaard. Beide kleuren zijn tokens
   (tokens.css): het goud is dat van de zonnebaan erboven, en het grijs heeft een
   eigen donkere stand. Het was een tint van de inkt en heette in het bijschrift
   "donker"; in het donkere thema is de inkt licht, dus daar was juist dat stuk
   het lichtste van de band. Het bijschrift zegt nu "grijs", en dat is het in
   beide standen. */
.t-zonbanden { display: grid; gap: 5px; margin: var(--ruimte-3) 0 var(--ruimte-1); }
.t-zonband-rij { display: grid; grid-template-columns: 78px 1fr 46px; align-items: center; gap: var(--ruimte-2); font-size: var(--trap-bovenregel); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.t-zonband-baan { position: relative; height: 12px; border-radius: 99px; background: var(--vlak-1); overflow: hidden; }
.t-zonband-dagdeel, .t-zonband-zon { position: absolute; top: 0; bottom: 0; }
.t-zonband-dagdeel { background: var(--zon-heuvel); border-radius: 99px; }
.t-zonband-zon { background: var(--zon-goud); }
.t-zonband-uren { text-align: right; color: var(--ink); font-weight: 600; }
.t-zonband-as { position: relative; height: 12px; }
.t-zonband-as span { position: absolute; transform: translateX(-50%); font-size: 10px; }
.zonband-noot { margin: 0 0 var(--ruimte-2); }

/* De grondkolom: staand, zo hoog als de lijst ernaast. */
.geo-kolom { display: flex; gap: var(--ruimte-3); align-items: stretch; }
.geo-kolom > ul.geology { flex: 1; min-width: 0; }
.geo-kolom-beeld { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 0 0 auto; }
.geo-kolom-woord { font-size: 10px; letter-spacing: var(--spatie-bovenregel); text-transform: uppercase; color: var(--ink-soft); }
.t-kolom { display: flex; flex-direction: column; gap: 1px; flex: 1; width: 26px; min-height: 84px; border-radius: 5px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.t-kolom-laag { display: block; min-height: 5px; background: var(--c); }
/* Wat geen leesbare ouderdom heeft hangt los onder de stapel, gearceerd in de
   eigen kleur: het is een gat in wat we weten (zoals "onbekend" in de
   eigendomsbalk) en geen laag met een plaats. Het staaltje in de lijst ernaast
   draagt dezelfde arcering, zodat je ziet welke regel erbij hoort. */
.geo-swatch { background: var(--c); }
.t-kolom.is-los { min-height: 12px; border-style: dashed; }
.t-kolom.is-los .t-kolom-laag, .geo-swatch.is-los { background: repeating-linear-gradient(135deg, var(--c) 0 3px, transparent 3px 5px); }
.geo-kolom-noot { margin: var(--ruimte-2) 0 var(--ruimte-3); }

/* Het beeld van het perceelpaneel: de delen van een geknipt perceel in de kleur
   van hun niveau, het eigen deel vol en de rest flets, en het beplante aandeel
   als balkje voor zijn zin. Een deel buiten elke afbakening is gearceerd. */
.perceel-beeld { margin: 0 0 var(--ruimte-4); }
.perceel-delen { display: flex; gap: 2px; height: 14px; border-radius: var(--hoek-1); overflow: hidden; margin: 0 0 var(--ruimte-2); }
.perceel-deel { display: block; min-width: 4px; background: var(--c); opacity: 0.35; }
.perceel-deel.is-eigen { opacity: 1; }
.perceel-deel.is-geen { background: repeating-linear-gradient(135deg, var(--vlak-2) 0 3px, color-mix(in srgb, var(--ink-soft) 30%, transparent) 3px 4.5px); }
.perceel-beplant { display: flex; align-items: baseline; gap: var(--ruimte-2); }
.perceel-beplant .t-balk { flex: 0 0 auto; }

/* Op de fiche gaan alle uitklappers open voor het drukken (fiche.js); het etiket
   van een uitklapper is op papier een knop waar niemand op kan tikken. */
.fiche details > summary { display: none; }
/* Behalve het grondverhaal. Dat bleef op papier altijd al dicht (drie alinea's
   over de grootste formatie, de fiche is een blad en geen boek), en toen alles
   openging stond het er ineens, zonder kopje, want het etiket is hierboven
   verborgen. Het voorbehoud van de kaart in dezelfde uitklapper drukt wel af:
   dat is één regel en hoort in beeld. */
.fiche .geo-story { display: none; }

/* Spoor bundel (ronde 2): het paneel kwam niet binnen (geen bereik en nog niet
   bewaard). Eén regel in plaats van een klik waarop niets gebeurt. */
.stuk-mislukt { margin: 0; padding: var(--ruimte-6) var(--ruimte-4); color: var(--ink-soft); }
/* ---- spoor zoeken, ronde 2: de trefferlijst met het toetsenbord ----------------
   De actieve rij: de rij die Enter kiest (main.js, zetActieveRij). Er was alleen
   :hover, in style.css, met twee donkere kopieën van dezelfde kleur. Deze regel
   leunt op --vlak-2 en --accent, die in tokens.css zelf hun donkere stand hebben,
   dus hier staat hij één keer. De streep links is er omdat een vlak van zeven
   procent op papier voor wie slecht ziet geen teken is: de actieve rij moet ook
   zonder kleurverschil aan te wijzen zijn. Geen outline, want de focus staat in
   het vak en niet op de rij. */
#results li.is-active { background: var(--vlak-2); box-shadow: inset 3px 0 0 var(--accent); }
/* De regel in een lege lijst ("niets gevonden", "de zoekindex komt eraan") is geen
   treffer: geen handje, geen hover, geen klik. pointer-events in plaats van een
   eigen :hover, want de donkere hover in style.css weegt zwaarder dan wat hier
   kan staan zonder zijn kleur te herhalen. */
#results li.result-note { cursor: default; pointer-events: none; }
#results li.result-note .result-label { font-weight: 560; overflow-wrap: anywhere; }

/* ---- spoor zoeken, ronde 2: het huis van een wijn op de proefkaart --------------
   Onder een wijngaard in de lijst: het huis dat de geplakte regel noemde, en wat
   het kadaster van die wijngaard daarover zegt (panel.js, renderProeflijst). De
   rij is een flex-regel van de knop en het kruisje; deze regel breekt eronder af
   en springt in tot onder de naam (11 voor de streep zit al in de rij, 22 voor het
   nummer en 10 tussenruimte). Het vlakje draagt de kleur van de eigenarenlaag op
   de kaart, uit map.js, zodat paars hier en paars daar hetzelfde paars is. */
.proef-lijst.is-rijen .proef-rij { flex-wrap: wrap; }
/* Met het afbreken erbij moet de knop zijn breedte zelf kennen. Hij was flex: 1 1
   auto, en een lange zin ("Een gewone ligging voor Puligny-Montrachet: ...") wil
   dan de hele regel: het kruisje viel naar de volgende regel, links onder de
   wijngaard. De basis is wat er naast het kruisje (44) en de tussenruimte (2)
   over is; gezien op de eerste foto van deze ronde. */
.proef-lijst.is-rijen .proef-open { flex: 1 1 calc(100% - 46px); }
.proef-huis { flex: 1 0 100%; display: flex; align-items: baseline; gap: var(--ruimte-2); margin: -4px 0 0; padding: 0 44px 10px 32px; font-size: var(--trap-klein); line-height: 1.35; text-align: left; overflow-wrap: anywhere; }
button.proef-huis { min-height: 32px; border: 0; background: transparent; color: var(--ink); font-family: inherit; cursor: pointer; text-decoration: none; }
button.proef-huis:hover span:last-child { text-decoration: underline; text-underline-offset: 2px; }
button.proef-huis:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--hoek-1); }
.proef-huis-vlak { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 2px; background: var(--c); opacity: 0.8; transform: translateY(1px); }
.proef-huis-noot { margin: 0 0 var(--ruimte-3); }
/* Het vlakje in de noot is de legenda: in Vergelijk en Plakken staat er geen
   huisregel met een vlakje erboven. Op papier is er geen kaart en dus geen paars. */
.proef-huis-noot .proef-huis-vlak { display: inline-block; margin-right: var(--ruimte-1); }
@media print { body.is-printing .proef-huis-noot { display: none !important; } }
@media (pointer: coarse) { button.proef-huis { min-height: 44px; } }
/* Spoor afwerking, ronde 2 (18 september 2026). De bronregel onder de gemeten
   doorsnede is zelf de knop naar de rest van de bron: geen tweede kop "Bron" en
   geen grijze balk onder een tekening, want dan kost de knop meer plek dan de
   tekst die hij verbergt. Een klein driehoekje zegt dat er meer is; de regel zelf
   blijft gewone kleine grijze tekst. */
details.doorsnede-bron > summary { list-style: none; cursor: pointer; display: block; }
details.doorsnede-bron > summary::-webkit-details-marker { display: none; }
details.doorsnede-bron > summary::after { content: ''; display: inline-block; width: 0; height: 0; margin-left: 6px; vertical-align: middle; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0.7; }
details.doorsnede-bron[open] > summary::after { transform: rotate(180deg); }
details.doorsnede-bron > p { margin: var(--ruimte-1) 0 0; }
.doorsnede-voorbehoud { margin: var(--ruimte-1) 0 0; }

/* Het soort recht als teken (UI-ROADMAP 7.4, ronde 2): achter de naam van de
   eigenaar, op de maat van de regel, in de zachte inkt zodat het de naam niet
   verdringt. De legenda eronder noemt alleen de tekens van de regels die in beeld
   staan: één onder de open regels, en één in de uitklapper voor wat daar staat. */
.recht-teken { display: inline-block; vertical-align: -3px; margin-right: 4px; color: var(--ink-soft); }
.recht-teken .t-teken, .recht-legenda .t-teken { display: inline-block; }
.recht-legenda { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: var(--ruimte-1) 0 var(--ruimte-2); }
.recht-legenda-deel { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

/* ===================================================== ronde 3: spoor tekeningen ====
   De thermometers, de piramide en het glas (tekens.js). Geen nieuwe kleuren: de
   kwik van nu is het rood van de klimaatlijn eronder, de kwik van toen de zachte
   inkt van de gestreepte normalen, zodat de thermometers en de grafiek dezelfde
   taal spreken; de treden dragen de kleur van hun niveau. */
.thermo-rij { margin: var(--ruimte-2) 0 0; }
.t-thermo { width: 240px; max-width: 100%; height: auto; margin: 0 auto; }
.t-thermo-glas { fill: var(--paper-solid); stroke: var(--ink-soft); stroke-width: 1.2; }
.t-thermo-streep { fill: none; stroke: var(--ink-soft); stroke-width: 1; opacity: 0.7; }
.t-thermo-kwik.is-oud { fill: var(--ink-soft); }
.t-thermo-kwik.is-nieuw { fill: var(--rood); }
.t-thermo-peil { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 3 3; }
.t-thermo-waarde { font-size: 13px; font-weight: 600; fill: var(--ink); font-variant-numeric: tabular-nums; }
.t-thermo-label { font-size: 11px; fill: var(--ink-soft); font-variant-numeric: tabular-nums; }
.t-thermo-verschil { font-size: 15px; font-weight: 700; fill: var(--rood); font-variant-numeric: tabular-nums; }
.thermo-noot { text-align: center; margin: 2px 0 var(--ruimte-2); }

/* De piramide: gecentreerde treden, de bovenste het smalst. Een trede is één
   regel: de naam links, de hectares rechts. */
.t-piramide { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: var(--ruimte-2) 0 var(--ruimte-1); }
.t-trede { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ruimte-2); box-sizing: border-box; min-width: 0; padding: 5px 10px; border-radius: 4px; font-size: var(--trap-label); line-height: 1.25; font-variant-numeric: tabular-nums; color: var(--vast-inkt); }
.t-trede-naam { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.t-trede-ha { white-space: nowrap; }
.t-trede.is-gc { background: var(--niveau-gc); color: var(--wit); }
.t-trede.is-1er { background: var(--niveau-1er); color: var(--wit); }
.t-trede.is-village { background: var(--niveau-village); }
.t-trede.is-champagne { background: var(--niveau-champagne); }
.t-trede.is-regionaal { background: var(--niveau-regionaal); }
/* In het donker is premier cru lichter gezet (tokens.css) en haalt wit er geen
   leesbare verhouding meer op; dan de vaste donkere inkt, zoals village. */
:root[data-theme="dark"] .t-trede.is-1er { color: var(--vast-inkt); }
/* Bij een wijngaard: alleen de eigen trede in kleur, de andere als vlak. */
.t-piramide.heeft-eigen .t-trede:not(.is-eigen) { background: var(--vlak-2); color: var(--ink-soft); }
.treden-noot { margin: var(--ruimte-1) 0 0; }

/* Het glas: twee korte assen onder "In het glas". Het etiket, het linkereind, de
   baan, het rechtereind. */
.geo-glas-assen { margin: var(--ruimte-2) 0 var(--ruimte-2); }
/* Vaste kolommen voor de twee eindwoorden, zodat de twee banen onder elkaar
   beginnen en eindigen; justify-content: start, anders verdeelde het raster de
   ruimte die over was over de kolommen en stond "vroeg" een duim van zijn baan. */
.t-glas { display: grid; grid-template-columns: max-content max-content minmax(60px, 132px) max-content; justify-content: start; align-items: center; gap: 6px var(--ruimte-2); font-size: var(--trap-label); color: var(--ink-soft); }
.t-glas-rij { display: contents; }
.t-glas-as { color: var(--ink); font-weight: 600; padding-right: var(--ruimte-2); }
.t-glas-rij > .t-glas-eind:nth-child(2) { text-align: right; }
.t-glas-baan { position: relative; height: 4px; border-radius: 99px; background: var(--vlak-2); }
.t-glas-stip { position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%; background: var(--accent-gebied); border: 1.5px solid var(--paper-solid); transform: translate(-50%, -50%); }
.geo-glas-noot { margin: var(--ruimte-1) 0 0; }
/* ---- spoor proefkaart, ronde 3 (18 september 2026): het web en de grond naast
   elkaar in Vergelijk (proefblok.js, spinnenweb in tekens.js). ---- */
/* Het web links en de legenda ernaast op een breed paneel, onder elkaar op een
   telefoon: de tekening krimpt mee tot de breedte van het paneel en niet verder
   dan 280 punten, want groter wordt een web een affiche. */
.proef-web { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2) var(--ruimte-4); }
.proef-web .t-web { flex: 0 1 280px; max-width: 100%; height: auto; overflow: visible; }
.t-web-ring { fill: none; stroke: var(--raster); stroke-width: 1; }
.t-web-spaak { stroke: var(--raster); stroke-width: 1; }
/* De vlakken doorschijnend, zodat een kleine veelhoek onder een grote zichtbaar
   blijft; de rand draagt de kleur. */
.t-web-vlak { fill: color-mix(in srgb, var(--c) 14%, transparent); stroke: var(--c); stroke-width: 2.2; stroke-linejoin: round; }
.t-web-as { fill: var(--ink-soft); font-size: 13px; letter-spacing: 0.02em; }
.proef-web + p { margin-top: var(--ruimte-3); }
.proef-web-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; flex: 1 1 140px; min-width: 0; font-size: var(--trap-klein); }
.proef-web-legenda li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.proef-web-legenda li > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proef-web-staal { flex: 0 0 auto; width: 16px; height: 0; border-top: 3px solid var(--c); border-radius: 2px; }
.proef-web-legenda .proef-nr { width: 18px; height: 18px; font-size: 10px; }

/* De grond: de kolommen op een rij, even hoog, met jong en oud één keer vooraan.
   Tien wijngaarden passen op een telefoon niet naast elkaar; dan schuift de rij
   en niet het paneel. */
.proef-grond { display: flex; gap: var(--ruimte-2); align-items: stretch; overflow-x: auto; padding-bottom: var(--ruimte-1); }
.proef-grond-woorden { display: flex; flex-direction: column; justify-content: space-between; flex: 0 0 auto; height: 120px; margin-top: 28px; font-size: 10px; letter-spacing: var(--spatie-bovenregel); text-transform: uppercase; color: var(--ink-soft); }
/* De kolommen krimpen tot 36 punten voordat de rij gaat schuiven: in het paneel
   van 400 punten viel de zesde kolom er anders buiten (gezien op de foto), en
   een schuivende rij ziet niemand. Op een telefoon van 393 punten passen er zes;
   vanaf zeven schuift ze (gemeten, 18 september). */
.proef-grond-kolom { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1 1 48px; min-width: 36px; max-width: 64px; margin: 0; }
.proef-grond-beeld { display: flex; flex-direction: column; align-items: center; gap: 3px; height: 120px; }
.proef-grond-beeld .t-kolom { min-height: 0; width: 28px; }
.proef-grond-leeg { display: grid; place-items: center; flex: 1; color: var(--ink-soft); }
.proef-grond-kolom figcaption { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.proef-grond-legenda { list-style: none; margin: var(--ruimte-3) 0 var(--ruimte-2); padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--trap-label); }
.proef-grond-legenda li { display: inline-flex; align-items: center; gap: 5px; }
.proef-grond-kolom .geo-swatch { width: 9px; height: 9px; border-radius: 2px; }