/* 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;
  /* Ronde 6, spoor huiswijnen: de kleur van een wijn bij zijn LWIN-nummer
     (.lwin-stip in ui.css). Een kopie met opzet, zoals de blokken hierboven: de
     pagina laadt tokens.css niet. Dezelfde waarden als tokens.css, en de toets in
     paginas.test.mjs vergelijkt ze. */
  --wijn-rood: #7a2434;
  --wijn-wit: #e3c76b;
  --wijn-gemengd: #c39aa6;
  --staal-rand: rgba(0, 0, 0, 0.15);

  --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);
  /* Ronde 6, spoor jaargangen: de strook en de tabel van de jaargangen op de
     dorpspagina (pagina-jaargangen.mjs). */
  --jaar-k2: #3f6fa3;
  --jaar-k1: #9dbbd9;
  --jaar-gewoon: #e6dfd2;
  --jaar-w1: #e8a582;
  --jaar-w2: #b8452f;
  --water: #2f7fb6;
  --droog: #9a6326;

  /* 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);
    --jaar-k2: #7fb0e3;
    --jaar-k1: #4d77a3;
    --jaar-gewoon: #3d3934;
    --jaar-w1: #b26548;
    --jaar-w2: #ef8a70;
    --water: #6fb3e0;
    --droog: #d49a5a;
    --accent-gebied: color-mix(in srgb, var(--gebied-kleur, var(--accent)) 70%, white);
    /* Ronde 6, spoor huiswijnen: het stipje van een rode wijn haalde op dit papier
       1,8 op 1 en viel weg; met een derde wit erbij 3,9, zoals --accent-gebied; wit en
       rosé stonden al licht genoeg. */
    --wijn-rood: #a26671;
  }
}

* { 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; } }
}

/* Ronde 6, spoor jaargangen: op de pagina is de strook een plaatje en geen knop
   (ui.css zet een handje voor de app, waar een tik een jaar kiest). */
.jaargangen-pagina .jaargangen-strook { cursor: default; }
.jaargangen-pagina .jaarblad-tabel { max-width: 560px; }

/* 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; }

/* ---- spoor proefkaart3b, ronde 3b (18 september 2026): één fles in één tik -------
   Het plusje in de trefferlijst bovenin, het zoekveld en de suggesties in de
   proefkaart, de bevestiging op de kaart na een lange druk, en de eenmalige tip.
   Alles leunt op tokens (--accent, --paper-solid, --vlak-2, --line), die in
   tokens.css en style.css hun donkere stand al hebben. */

/* Het plusje: rechts in de rij, 44 bij 44 om te raken, met een cirkel van 30 als
   teken. De rij houdt rechts ruimte vrij, zodat een lange onderregel ("Chambolle-
   Musigny · Premier Cru · 5,3 ha") er niet onder doorloopt. Gevuld met een vinkje
   zodra de wijngaard op de proefkaart staat, zoals de knop Op proefkaart in het
   paneel (.is-proef in style.css wisselt plus en vinkje). */
#results li.heeft-plus { position: relative; padding-right: 54px; }
/* Op een breed scherm liep de bovenbalk onder het paneel door: met een wijngaard
   open lag de rechterkant van het zoekvak en van de trefferlijst onder het paneel
   (z-index 20 tegen 5). Dat viel niet op zolang daar alleen witruimte stond; nu
   staat daar het plusje, en dat was dan niet te raken (gezien op de foto van
   1280 breed). De balk houdt nu rechts de ruimte van het paneel vrij, zoals de
   kaartknoppen (--panel-offset in style.css). */
/* En zolang er gezocht wordt ligt de lijst boven de kaartknoppen (3D, Hier, Proef,
   Menu; z-index 5, net als de balk, maar later in de pagina en dus erboven): die
   hangen rechts, precies waar de plusjes staan. Op een telefoon regelt style.css
   dat al (26, in het blok voor smalle schermen). */
@media (min-width: 721px) {
  #topbar { right: calc(10px + var(--panel-offset)); transition: right 0.18s ease; }
  #app.is-searching #topbar { z-index: 7; }
}
.treffer-plus { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--accent); cursor: pointer; }
.treffer-plus svg { width: 30px; height: 30px; padding: 7px; box-sizing: border-box; border: 1.5px solid currentColor; border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.treffer-plus:hover svg { background: var(--vlak-2); }
.treffer-plus[aria-pressed="true"] svg { background: var(--accent); border-color: var(--accent); stroke: var(--paper-solid); }
.treffer-plus:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Het zoekveld bovenaan de proefkaart. 16 punten letter: kleiner, en Safari op
   iOS zoomt de hele pagina in zodra het veld de focus krijgt. Omlijnd in de
   huiskleur met een plusje ervoor, want het is de hoofdingang van de proefkaart
   en geen gewoon zoekvak. De treffers staan in de stroom eronder en niet
   zwevend (panel.js, proefVeld, zegt waarom). */
.proef-veld { margin: 0 0 var(--ruimte-1); }
.proef-veld-rij { position: relative; }
.proef-veld-teken { position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; pointer-events: none; }
.proef-veld-invoer { width: 100%; box-sizing: border-box; min-height: 46px; padding: 10px 12px 10px 38px; border: 1.5px solid var(--accent); border-radius: var(--radius); background: var(--paper-solid); color: var(--ink); font: inherit; font-size: 16px; }
.proef-veld-invoer::placeholder { color: var(--ink-soft); }
.proef-veld-invoer:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.proef-treffers { list-style: none; margin: 6px 0 0; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-solid); box-shadow: var(--diepte-2); }
.proef-treffers li { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 9px 10px; border-radius: 9px; cursor: pointer; }
.proef-treffers li:hover { background: var(--rij-hover); }
.proef-treffers li.is-active { background: var(--vlak-2); box-shadow: inset 3px 0 0 var(--accent); }
.proef-treffers li.result-note { display: flex; flex-direction: column; gap: 1px; cursor: default; pointer-events: none; }
.proef-treffer-teken { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px; display: grid; place-items: center; box-sizing: border-box; border: 1.5px solid var(--accent); border-radius: 50%; color: var(--accent); }
.proef-treffer-teken svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.proef-treffers li[data-erop] .proef-treffer-teken { background: var(--accent); color: var(--paper-solid); }
.proef-treffer-tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.proef-plakregel { margin: 4px 0 0; font-size: var(--trap-klein); }
.proef-plakregel .link-button { min-height: 32px; text-decoration: none; }
.proef-plakregel .link-button:hover { text-decoration: underline; text-underline-offset: 2px; }
.proef-leeg { padding-top: var(--ruimte-1); }

/* De suggesties: knoppen met de naam en een plusje, links het streepje in de
   kleur van het niveau, zoals de rij in de lijst erboven (--rij-kleur). */
.proef-suggesties { margin: var(--ruimte-2) 0 var(--ruimte-4); padding-top: var(--ruimte-3); border-top: 1px solid var(--line); }
.proef-leeg .proef-suggesties { border-top: 0; padding-top: 0; }
.proef-suggestie-groep + .proef-suggestie-groep { margin-top: var(--ruimte-3); }
.proef-suggestie-kop { margin: 0 0 6px; font-size: var(--trap-bovenregel); letter-spacing: var(--spatie-bovenregel); text-transform: uppercase; color: var(--ink-soft); }
.proef-suggestie-knoppen { display: flex; flex-wrap: wrap; gap: 6px; }
.proef-suggestie { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 36px; box-sizing: border-box; padding: 6px 12px 6px 9px; border: 1px solid var(--line); border-left: 3px solid var(--rij-kleur, var(--line)); border-radius: var(--hoek-1); background: var(--paper-solid); color: var(--ink); font: inherit; font-size: 14px; line-height: 1.2; text-align: left; cursor: pointer; }
.proef-suggestie span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proef-suggestie:hover { border-color: var(--accent); border-left-color: var(--rij-kleur, var(--accent)); }
.proef-suggestie:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.proef-suggestie-plus { flex: 0 0 14px; width: 14px; height: 14px; fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; }
.proef-suggestie-noot { margin: var(--ruimte-2) 0 0; }
@media (pointer: coarse) {
  .proef-suggestie { min-height: 44px; }
  .proef-plakregel .link-button { min-height: 44px; }
}
/* Op papier. Afdrukken met één wijngaard drukt de lijst af en niet de
   vergelijking (main.js, printCompare), en dan stonden het zoekveld, de regel over
   plakken en de suggesties met hun noot in de pdf: knoppen om de lijst te vullen,
   niets om te lezen. De regel voor de rest van de proefkaart staat in style.css. */
@media print { body.is-printing .proef-veld, body.is-printing .proef-suggesties { display: none !important; } }

/* De bevestiging op de kaart na een lange druk (main.js, toonBevestiging): een pil
   boven de plek, anderhalve tel. De marker zelf staat stil (MapLibre zet zijn
   transform); alleen de pil erin beweegt. */
.kaart-bevestiging { pointer-events: none; }
/* Hooguit twee regels: een lange naam ("Les Amoureuses op de proefkaart (5)") liep
   op één regel van 250 punten af in een beletselteken, en dan stond er niet meer
   wat er gebeurd was. */
.kaart-bevestiging-pil { display: inline-flex; align-items: center; gap: 8px; max-width: min(260px, 70vw); padding: 7px 14px 7px 8px; border: 1.5px solid var(--accent); border-radius: var(--hoek-3); background: var(--paper-solid); color: var(--ink); box-shadow: var(--diepte-3); font-size: 13px; font-weight: 600; line-height: 1.25; animation: bevestiging-in 0.18s ease-out; transition: opacity 0.3s ease; }
.kaart-bevestiging:not(:has(.kaart-bevestiging-teken)) .kaart-bevestiging-pil { padding-left: 13px; }
.kaart-bevestiging.is-weg .kaart-bevestiging-pil { opacity: 0; }
.kaart-bevestiging-teken { flex: 0 0 20px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--paper-solid); }
.kaart-bevestiging-teken svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.kaart-bevestiging-teken .proef-plus { display: none; }
.kaart-bevestiging-tekst { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
@keyframes bevestiging-in { from { opacity: 0; transform: translateY(6px) scale(0.96); } }
@media (prefers-reduced-motion: reduce) { .kaart-bevestiging-pil { animation: none; transition: none; } }
/* Lang drukken op de kaart: geen vergrootglas en geen menu van Safari erover. */
.maplibregl-canvas-container { -webkit-touch-callout: none; }

/* De eenmalige tip, als wolkje boven de wijngaard die net opende (main.js,
   toonDrukTip), met een puntje naar die wijngaard. Stil en klein: hij hoort bij
   de kaart en niet bij het paneel. */
.kaart-tip { pointer-events: none; }
.kaart-tip-pil { position: relative; max-width: min(240px, 62vw); padding: 8px 12px; border: 1.5px solid var(--accent); border-radius: var(--hoek-2); background: var(--paper-solid); color: var(--ink); box-shadow: var(--diepte-3); font-size: 13px; line-height: 1.35; text-align: center; animation: bevestiging-in 0.25s ease-out; transition: opacity 0.3s ease; }
.kaart-tip-pil::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; margin-left: -6px; box-sizing: border-box; border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); background: var(--paper-solid); transform: rotate(45deg); }
.kaart-tip.is-weg .kaart-tip-pil { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .kaart-tip-pil { animation: none; transition: none; } }
/* ---- einde spoor proefkaart3b ---- */

/* ---- spoor lwin-ui (18 september 2026): de wijnen uit LWIN ----------------------
   Het blok Wijnen (LWIN) op Overzicht, in het dorp en in een streek (lwinblok.js).
   Een rij is een wijn: een stipje voor de kleur (alleen als de lijst er twee kent,
   lwinlijst.js zegt wanneer), het huis met wat de wijnnaam toevoegt, het nummer in
   een vaste letter, en het plusje van 44 bij 44, zoals in de trefferlijst. De
   tweede wijn van een huis springt in en noemt het huis niet opnieuw. */
.lwin { margin-top: var(--ruimte-5); }
.lwin-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-bottom: 2px; }
.lwin-kop .count { font-weight: 400; font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; }
.lwin-bron { margin: 0 0 var(--ruimte-2); font-size: var(--trap-label); color: var(--ink-soft); }
.lwin-bron a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.lwin .u-bronregel { margin: var(--ruimte-1) 0 var(--ruimte-2); }
.lwin-lijst { list-style: none; margin: 0; padding: 0; }
.lwin-rij { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto 44px; align-items: center; column-gap: 8px; min-height: 44px; border-top: 1px solid var(--lijn-zacht); }
.lwin-lijst > .lwin-rij:first-child, .lwin-rij.is-vervolg { border-top: 0; }
.lwin-stip { width: 8px; height: 8px; border-radius: 50%; }
.lwin-stip.is-red { background: var(--wijn-rood); }
.lwin-stip.is-white { background: var(--wijn-wit); box-shadow: inset 0 0 0 1px var(--staal-rand); }
.lwin-stip.is-rose { background: var(--wijn-gemengd); }
.lwin-wie { min-width: 0; padding: 5px 0; font-size: var(--trap-klein); line-height: 1.3; overflow-wrap: anywhere; }
.lwin-huis { color: var(--ink); }
.lwin-wat { color: var(--ink-soft); }
.lwin-rij.is-vervolg .lwin-wie { padding-left: 10px; box-shadow: inset 2px 0 0 var(--lijn-zacht); }
.lwin-reden { display: inline-block; padding: 0 6px; border: 1px solid var(--line); border-radius: 999px; font-size: var(--trap-bovenregel); line-height: 1.5; color: var(--ink-soft); white-space: nowrap; }
.lwin-code { font-family: var(--vast); font-size: var(--trap-bovenregel); color: var(--ink-soft); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; -webkit-user-select: all; user-select: all; }
.lwin-plus { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--accent); cursor: pointer; }
.lwin-plus svg { width: 26px; height: 26px; padding: 6px; box-sizing: border-box; border: 1.5px solid currentColor; border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lwin-plus:hover svg { background: var(--vlak-2); }
.lwin-plus[aria-pressed="true"] svg { background: var(--accent); border-color: var(--accent); stroke: var(--paper-solid); }
.lwin-plus:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lwin-plus:disabled { opacity: 0.5; cursor: progress; }
.lwin-plus.is-leeg { cursor: default; }
.lwin-grond { display: inline-flex; margin-right: 4px; vertical-align: -2px; color: var(--accent); }
.lwin-legenda { display: flex; align-items: center; gap: 4px; margin: var(--ruimte-2) 0 0; font-size: var(--trap-label); color: var(--ink-soft); }
.lwin-elders, .lwin-streek-regel { margin: var(--ruimte-1) 0 var(--ruimte-2); font-size: var(--trap-klein); color: var(--ink-soft); }
.lwin-streek-regel { color: var(--ink); }
/* De trefferlijst en het zoekveld van de proefkaart: de regel met het nummer. */
.result-lwin { font-variant-numeric: tabular-nums; }
@media print { .lwin-plus { display: none; } .lwin-rij { grid-template-columns: 8px minmax(0, 1fr) auto; } }
/* ---- einde spoor lwin-ui ---- */
/* ------------------------------------------------ ronde 4: spoor bodem ---- */
/* Het blok Bodem (bodem.js): links de bodemkolom in centimeters, rechts de balk
   met de families. Twee kolommen naast elkaar in het tabblad (de grondkolom erboven
   is aandeel van het oppervlak, deze is diepte), elk met een eigen woord eronder,
   zodat niemand de een als de ander leest. */
.bodem-kop { display: flex; gap: var(--ruimte-4); align-items: flex-start; margin: var(--ruimte-2) 0 var(--ruimte-2); }
.bodem-rechts { flex: 1; min-width: 0; }
.bodem-kolom { margin: var(--ruimte-1) 0 0; flex: 0 0 auto; line-height: 0; }
.bodem-diepte { margin: var(--ruimte-2) 0 0; }
.t-bodemkolom { color: var(--ink-soft); }
.t-bodem-rand { fill: none; stroke: color-mix(in srgb, var(--ink) 22%, transparent); stroke-width: 1; }
.t-bodem-as { stroke: var(--ink-soft); stroke-width: 1; }
.t-bodem-getal { font-size: 9px; fill: var(--ink-soft); font-variant-numeric: tabular-nums; }
.t-bodem-grens { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 3 2; }
.t-gesteente { fill: var(--vlak-2); }
.t-gesteente-voeg { stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: 0.8; }
.bodem-uitleg { margin: var(--ruimte-3) 0 0; font-size: var(--trap-klein); }
/* De emmer: het water per dorp, met de spreiding lichter. */
.bodem-emmer { display: flex; gap: var(--ruimte-3); align-items: center; margin: var(--ruimte-3) 0 var(--ruimte-2); }
.bodem-emmer-teken { flex: 0 0 auto; color: var(--ink-soft); }
.bodem-emmer-zin { margin: 0 0 var(--ruimte-1); font-size: var(--trap-klein); }
.bodem-emmer p.muted { margin: 0; }
/* Zonder getal alleen de regel die dat zegt, op dezelfde afstand als de emmer. */
.bodem-emmer-geen { margin: var(--ruimte-3) 0 var(--ruimte-2); }
.t-emmer-water { fill: var(--bodem-water); }
.t-emmer-band { fill: color-mix(in srgb, var(--bodem-water) 35%, transparent); }
.t-emmer-rand { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
/* De regel onder de grondkolom: hoe het gesteente water houdt (BD LISA). */
.bodem-water { display: flex; gap: var(--ruimte-2); align-items: flex-start; margin: var(--ruimte-1) 0 var(--ruimte-3); font-size: var(--trap-klein); }
.bodem-water[hidden] { display: none; }
.bodem-water-teken { flex: 0 0 auto; color: var(--ink-soft); line-height: 0; }
.bodem-geen { margin: var(--ruimte-1) 0 0; }
/* De legenda van de kaartlagen Bodemkaart en Muren (main.js, renderLegend). */
/* Een eigen regel, en daarin een kolom van hooguit 62 tekens: breed liep de regel van
   de muren onder het paneel door, want de legenda meet haar breedte aan de hele
   kaart. Een max-width op het vak zelf haalde het terug naast de kleuren, dus de
   ruimte rechts is opvulling. */
.legend-laag { flex-basis: 100%; padding-right: max(0px, calc(100% - 62ch)); box-sizing: border-box; }
.legend-item i.legend-muur { width: 14px; height: 3px; border-radius: 2px; margin: 0 2px 0 4px; }
.legend-muur.is-osm { background: var(--muur-osm); }
/* De bodemkaart van de appellatie Pouilly-Fuissé boven de grove kaart, met wat
   lucht ertussen: twee balken vlak onder elkaar lazen als één verdeling. */
.bodem-pf { margin: var(--ruimte-2) 0 var(--ruimte-5); padding-bottom: var(--ruimte-3); border-bottom: 1px solid var(--lijn-zacht); }
.bodem-pf .u-bronregel a { white-space: nowrap; color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.bodem-pf-weinig { margin: var(--ruimte-2) 0 var(--ruimte-3); }
/* ======================================================= ronde 4: spoor klimaat ====
   De derde thermometer (rond 2050), de jaargangenstrook met het blok Weer, de
   vorstnacht op drie hoogtes, en het klimaat door de eeuwen (tekens.js,
   jaargangen.js, eeuwen.js). Kleuren uit tokens.css. */

/* Drie thermometers: breder dan twee, en de derde is een model. Zijn kwik is licht
   tot de ondergrens van de modellen, gearceerd tot de bovengrens, met een streep op
   de mediaan; het verschil ernaast in het rood van de klimaatlijn, maar zachter. */
.t-thermo.is-drie { width: 330px; }
.t-thermo-kwik.is-straks { fill: color-mix(in srgb, var(--rood) 38%, transparent); }
.t-thermo-band { fill: color-mix(in srgb, var(--rood) 14%, transparent); }
.t-thermo-arcering { fill: none; stroke: var(--rood); stroke-width: 1; opacity: 0.8; }
.t-thermo-mediaan { stroke: var(--rood); stroke-width: 2; stroke-linecap: round; }
.t-thermo-verschil.is-straks { opacity: 0.75; }
.climate .u-tekenrij { margin-top: var(--ruimte-3); }
.climate-eeuwen { margin: var(--ruimte-3) 0 var(--ruimte-1); }
.climate-eeuwen .link-button { font-size: var(--trap-klein); }

/* De laatste vorst per jaar: doorgetrokken waar gehomogeniseerd, gestippeld waar
   ruw (eeuwenDiagram met twee reeksen). */
.vorst-lijn { margin: var(--ruimte-2) 0 var(--ruimte-1); }
.vorst-lijn .t-eeuwen { width: 100%; height: auto; }
.t-eeuw-lijn.is-ruw { stroke: var(--kou-vol); stroke-width: 1.2; stroke-dasharray: 3 2.5; fill: none; }
.t-eeuw-lijn.is-gehomogeniseerd { stroke: var(--kou-vol); stroke-width: 1.8; fill: none; }

/* De strook: een vakje per jaar. Leeg is een rand zonder vulling. */
.jaargangen-strook { margin: var(--ruimte-2) 0 var(--ruimte-1); cursor: pointer; border-radius: 4px; }
.jaargangen-strook:focus-visible { outline: 2px solid var(--accent-gebied); outline-offset: 3px; }
.t-strook { width: 100%; max-width: 420px; height: auto; }
.t-jaar { stroke: none; }
.t-jaar.is-k2 { fill: var(--jaar-k2); }
.t-jaar.is-k1 { fill: var(--jaar-k1); }
.t-jaar.is-0 { fill: var(--jaar-gewoon); }
.t-jaar.is-w1 { fill: var(--jaar-w1); }
.t-jaar.is-w2 { fill: var(--jaar-w2); }
.t-jaar.is-leeg { fill: none; stroke: var(--raster); stroke-width: 1; }
.t-jaar-keuze { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.t-jaar-vorst { fill: none; stroke: var(--kou-vol); stroke-width: 1.3; stroke-linecap: round; }
.t-jaar-nat { fill: var(--water); }
.t-jaar-droog { fill: none; stroke: var(--droog); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.t-jaar-tik { stroke: var(--ink-soft); stroke-width: 1; }
.t-jaar-getal { font-size: 10px; fill: var(--ink-soft); font-variant-numeric: tabular-nums; }
.t-strook-legenda { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0 0 var(--ruimte-2); font-size: var(--trap-label); color: var(--ink-soft); }
.t-strook-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.t-strook-item .t-teken { display: inline-block; }
.jaargangen-kies { margin: 0 0 var(--ruimte-2); }

/* Het blok Weer <jaar> onder de strook, en de pijlen naar het vorige en volgende
   jaar: links en rechts, zodat ze onder hun kant van de strook staan. */
.weer { margin: var(--ruimte-3) 0 var(--ruimte-2); padding: var(--ruimte-3); border-radius: var(--hoek-1); background: var(--vlak-1); }
.weer .u-sectiekop { margin-top: 0; }
.weer-leeg { margin: var(--ruimte-2) 0; }
.weer-vorst { margin-top: var(--ruimte-4); }
.weer-vorst .u-maat-label { margin: 0 0 var(--ruimte-1); }
.weer-vorst-tekening .t-vorstnacht { width: 200px; max-width: 100%; height: auto; }
.weer-nav { display: flex; justify-content: space-between; margin: 0 0 var(--ruimte-2); }
.t-vorst-nul { stroke: var(--kou-vol); stroke-width: 1; stroke-dasharray: 3 3; }
.t-vorst-streep { stroke: var(--kou-vol); stroke-width: 2.4; stroke-linecap: round; }
.t-vorst-leider { fill: none; stroke: var(--ink-soft); stroke-width: 0.8; }

/* Klimaat door de eeuwen. */
.eeuwen-deel { margin-top: var(--ruimte-5); }
.eeuwen-tekening .t-eeuwen { width: 100%; height: auto; }
.t-eeuw-raster { stroke: var(--raster); stroke-width: 1; }
.t-eeuw-tik { font-size: 9px; fill: var(--ink-soft); font-variant-numeric: tabular-nums; }
.t-eeuw-band.is-band { fill: color-mix(in srgb, var(--rood) 10%, transparent); stroke: none; }
.t-eeuw-lijn { fill: none; stroke-linejoin: round; }
.t-eeuw-lijn.is-jaar { stroke: color-mix(in srgb, var(--rood) 45%, transparent); stroke-width: 0.7; }
.t-eeuw-lijn.is-gemiddeld { stroke: var(--rood); stroke-width: 2; }
.t-eeuw-lijn.is-parijs { stroke: var(--ink-soft); stroke-width: 1.4; stroke-dasharray: 4 2.5; }
.t-eeuw-lijn.is-oogst.is-gemiddeld { stroke: var(--accent-gebied); }
.eeuwen-oogst .t-eeuw-lijn.is-jaar { stroke: color-mix(in srgb, var(--ink-soft) 55%, transparent); }
.t-eeuw-niveau { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 5 3; }
.eeuwen-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: var(--ruimte-1) 0 var(--ruimte-2); }
.eeuwen-streep { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--rood); vertical-align: middle; }
.eeuwen-streep.is-jaar { border-top: 1px solid color-mix(in srgb, var(--rood) 45%, transparent); }
.eeuwen-streep.is-parijs { border-top: 1.5px dashed var(--ink-soft); }
.eeuwen-oogst { margin: var(--ruimte-3) 0 0; }
.eeuwen-oogst-naam { margin: 0; font-size: var(--trap-klein); font-weight: 600; }
.eeuwen-oogst.is-eigen .eeuwen-oogst-naam { color: var(--accent-gebied); }

/* De vorstnacht in het blad Meer, Lagen: de keuze van de nacht, de schaal van de
   kleuren (dezelfde stappen als build-klimaat-vorstnacht.mjs) en het voorbehoud. */
.vorstnacht-blok { margin: var(--ruimte-1) 0 var(--ruimte-3) 26px; }
.vorstnacht-blok select { max-width: 100%; font: inherit; font-size: var(--trap-klein); }
.vorstnacht-legenda { margin: var(--ruimte-2) 0 0; font-size: var(--trap-label); color: var(--ink-soft); }
/* De schaal loopt lineair van -8 tot +3 graden, zoals de kleurstappen van het
   plaatje: -4 op 36 %, 0 op 73 %, doorzichtig vanaf 3. De eerste versie zette 0 °C
   in het midden van de balk, en daar stond in de kleur -3. */
.vorstnacht-schaal { display: block; height: 8px; border-radius: 99px; max-width: 220px; background: linear-gradient(90deg, var(--vorstkaart-8), var(--vorstkaart-4) 36%, var(--vorstkaart-0) 73%, transparent); border: 1px solid var(--lijn-zacht); }
.vorstnacht-schaal-woorden { position: relative; display: block; max-width: 220px; height: 1.4em; font-variant-numeric: tabular-nums; }
.vorstnacht-schaal-woorden span { position: absolute; left: 0; white-space: nowrap; }
.vorstnacht-schaal-woorden .is-nul { left: 73%; transform: translateX(-50%); }
.vorstnacht-schaal-woorden .is-twee { left: 91%; transform: translateX(-50%); }
.vorstnacht-noot { margin: var(--ruimte-1) 0 0; font-size: var(--trap-label); color: var(--ink-soft); }
/* Dezelfde schaal in de legenda op de kaart, op een eigen regel onder die van de
   kleurstand, zolang de laag aan staat (state.vorstnachtLegenda in main.js). */
.legend-vorstnacht { flex-basis: 100%; display: grid; gap: 2px; max-width: 240px; }
.legend-vorstnacht .vorstnacht-schaal-woorden { color: var(--ink-soft); }
.legend-vorstnacht .legend-note { color: var(--ink-soft); }
/* De vorstnacht had op een telefoon een eigen uitzondering, toen de legenda daar
   nog uit stond; sinds 18 september staat ze er altijd (blok hieronder). */
/* ---- spoor geld, ronde 4 (18 september 2026): het rendement per jaar, de
   grondprijs volgens de staat, de foto van een dorp en het HVE-teken (geld.js,
   geldtekens.js). Alleen tokens; de wijnkleuren zijn de rode en de gouden inkt
   van de schil, die elk een donkere stand hebben. ---- */
.geld-blok { margin-top: var(--ruimte-5); }
/* Het getal eerst, in de schreefletter van de kerngetallen, met het oordeel
   eronder in de accentkleur (UI-ROADMAP 7.3). */
.geld-kern { margin: 0 0 var(--ruimte-2); font-size: var(--trap-klein); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.geld-kern b { font-family: var(--schreef); font-size: var(--trap-cijfer); font-weight: 600; color: var(--ink); letter-spacing: var(--spatie-titel); }
.geld-oordeel { display: block; margin-top: 2px; color: var(--accent-gebied); font-weight: 600; font-size: var(--trap-label); }
.geld-teken { margin: var(--ruimte-1) 0 0; }
.geld-teken .g-teken { display: block; width: 100%; max-width: 420px; height: auto; overflow: visible; }
.g-raster { stroke: var(--raster); stroke-width: 1; }
.g-as, .g-jaar { fill: var(--ink-soft); font-size: 9px; font-variant-numeric: tabular-nums; }
.g-staaf.is-red { fill: var(--rood); }
.g-staaf.is-white { fill: var(--zon-inkt); }
.g-staaf.is-rose { fill: var(--wijn-gemengd); }
.g-ster { fill: var(--ink-soft); font-size: 10px; font-weight: 700; }
.g-geheim { fill: none; stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 2 2; opacity: 0.8; }
.g-geheim-woord { fill: var(--ink-soft); font-size: 8px; letter-spacing: var(--spatie-bovenregel); }
.g-wet { stroke: var(--ink); stroke-width: 1; opacity: 0.75; }
.g-wet.is-plafond { stroke-dasharray: 3 3; opacity: 0.55; }
.g-staven .g-wet.is-white { stroke: color-mix(in srgb, var(--zon-inkt) 60%, var(--ink)); }
.g-prijs { fill: none; stroke: var(--accent-gebied); stroke-width: 1.8; stroke-linejoin: round; }
.g-prijs-punt { fill: var(--accent-gebied); }
.g-band { fill: none; stroke: var(--ink-soft); stroke-width: 1.2; stroke-linecap: round; opacity: 0.7; }
.g-eigen { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.geld-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--ruimte-3); margin: var(--ruimte-1) 0 var(--ruimte-2); font-size: var(--trap-label); }
.geld-legenda-deel { display: inline-flex; align-items: center; gap: 5px; }
.geld-legenda-teken { display: inline-block; flex: 0 0 auto; width: 14px; height: 0; border-top: 1.5px solid var(--ink); }
.geld-legenda-teken.is-staaf { width: 9px; height: 9px; border: 0; border-radius: 2px; }
.geld-legenda-teken.is-staaf.is-red { background: var(--rood); }
.geld-legenda-teken.is-staaf.is-white { background: var(--zon-inkt); }
.geld-legenda-teken.is-staaf.is-rose { background: var(--wijn-gemengd); }
.geld-legenda-teken.is-plafond { border-top-style: dashed; opacity: 0.7; }
.geld-legenda-teken.is-geheim { width: 9px; height: 9px; border: 1px dashed var(--ink-soft); border-radius: 2px; }
.geld-legenda-teken.is-prijs { border-top: 2px solid var(--accent-gebied); }
.geld-legenda-teken.is-band { width: 0; height: 11px; border-top: 0; border-left: 1.5px solid var(--ink-soft); }
.geld-legenda-teken.is-eigen { border-top: 3px solid var(--ink); border-radius: 2px; }
.geld-legenda-ster { font-weight: 700; color: var(--ink-soft); }
.geld-prijs .u-maat { margin: var(--ruimte-2) 0 var(--ruimte-3); }
/* De foto van een dorp: nooit bijgesneden (de licentie van een foto volgt hem
   niet als hij heel blijft, en een uitsnede is een bewerking), dus contain in
   een vak dat niet hoger wordt dan een derde scherm. Een staande foto krijgt een
   smaller vak in plaats van twee lege stroken opzij. */
.geld-foto { margin: 0 0 var(--ruimte-4); }
.geld-foto img { display: block; width: auto; max-width: 100%; height: auto; max-height: 220px; margin: 0 auto; object-fit: contain; border-radius: var(--hoek-1); }
.geld-foto.is-staand img { max-height: 280px; }
.geld-foto figcaption { text-align: center; }
.geld-foto figcaption { margin-top: var(--ruimte-1); font-size: var(--trap-bovenregel); line-height: 1.4; color: var(--ink-soft); overflow-wrap: anywhere; }
.geld-foto figcaption a, .geld-links a { color: inherit; }
.geld-links { margin: 0; font-size: var(--trap-klein); }
/* HVE naast het bio-teken: dezelfde maat, maar alleen een rand, want het is een
   vermelding in een annuaire en geen keurmerk dat de atlas zelf nagaat. */
.badge.geld-hve { background: transparent; color: var(--groen); border: 1px solid currentColor; font-size: 10px; padding: 1px 6px; margin-left: 3px; vertical-align: 1px; }
.geld-bedrijven-hve { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 0 0 var(--ruimte-2); }
.geld-bedrijven-hve .badge.geld-hve { margin-left: 0; }
/* ---- einde spoor geld ---- */
/* ---- spoor geld, vervolg: het werelderfgoed als één regel met een merk ervoor
   (het woord, niet het embleem: dat is beschermd). ---- */
.geld-erfgoed { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--ruimte-2); margin: 0 0 var(--ruimte-3); font-size: var(--trap-klein); line-height: 1.4; }
.geld-erfgoed-merk { flex: 0 0 auto; padding: 1px 6px; border: 1px solid currentColor; border-radius: var(--hoek-1); color: var(--accent-gebied); font-size: var(--trap-bovenregel); font-weight: 700; letter-spacing: var(--spatie-bovenregel); }
.geld-erfgoed-knop { font-size: var(--trap-klein); }
.geld-proeflijst { list-style: none; margin: 0 0 var(--ruimte-2); padding: 0; columns: 2; column-gap: var(--ruimte-4); font-size: var(--trap-klein); }
.geld-proeflijst li { break-inside: avoid; padding: 2px 0; }
.geld-proeflijst a { color: inherit; }
@media (max-width: 380px) { .geld-proeflijst { columns: 1; } }
/* ---- spoor geld, herstel: de naamsvermelding van de lagen van het bezoek onder
   op de kaart (geldlagen.js, kaartbron). Rechtsonder, want linksonder staat de
   schaalstok en rechts erboven de kaartknoppen. Klein en zacht, zoals elk
   voorbehoud, maar in beeld: de ODbL vraagt het zolang de wijnroutes er staan. */
.geld-kaartbron {
  position: absolute; right: 10px; bottom: calc(10px + var(--safe-bottom, 0px)); z-index: 3;
  max-width: min(420px, calc(100% - 130px)); margin: 0; padding: 4px 8px;
  display: flex; flex-direction: column; gap: 1px;
  font-size: 11px; line-height: 14px; color: var(--ink-soft);
  background: var(--panel-glass); border: 1px solid var(--line); border-radius: 8px;
}
.geld-kaartbron a { color: inherit; }
.geld-kaartbron-noot { font-style: italic; }
/* ---- einde spoor geld, herstel ---- */
/* ---- ronde 4, spoor klassen: de ladder door de tijd ----
   De rails en sporten zijn het raster van de tekening en eisen niets op; de
   stippen van de oude klassen in inkt, want een klasse van 1861 is geen niveau
   van nu en mag er niet in de kleur van een grand cru uitzien. Alleen de laatste
   kolom, de rang van nu, draagt de kleur van haar niveau. Breder dan het paneel
   (vijf kolommen en meer op een telefoon) schuift de tekening en niet het blad. */
/* Op een telefoon passen vier kolommen met de woorden aan de as op ware grootte;
   bij vijf en meer krimpt de tekening mee met het paneel (de eerste foto liet de
   laatste kolom half buiten beeld vallen, "Grand C"). */
.tijdladder { margin: var(--ruimte-2) 0 var(--ruimte-1); }
.t-tijdladder { display: block; width: 100%; height: auto; margin: 0; }
.t-tijd-rail { stroke: var(--raster); stroke-width: 1; }
.t-tijd-sport { stroke: var(--raster); stroke-width: 1.4; stroke-linecap: round; }
.t-tijd-lijn { fill: none; stroke: var(--ink-soft); stroke-width: 1.2; stroke-dasharray: 2 3; }
.t-tijd-span { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.t-tijd-stip { fill: var(--ink); stroke: var(--paper-solid); stroke-width: 1.5; }
.t-tijd-stip.is-dorp { fill: var(--paper-solid); stroke: var(--ink); stroke-width: 1.6; }
.t-tijd-stip.is-nu { fill: var(--niveau-regionaal); }
.t-tijd-stip.is-nu.is-gc { fill: var(--niveau-gc); }
.t-tijd-stip.is-nu.is-1er { fill: var(--niveau-1er); }
.t-tijd-stip.is-nu.is-village { fill: var(--niveau-village); }
.t-tijd-stip.is-nu.is-champagne { fill: var(--niveau-champagne); }
.t-tijd-label { font-size: 13px; font-weight: 600; fill: var(--ink); font-variant-numeric: tabular-nums; }
.t-tijd-sub { font-size: 11px; fill: var(--ink-soft); }
.t-tijd-as { font-size: 10px; fill: var(--ink-soft); letter-spacing: var(--spatie-bovenregel); text-transform: uppercase; }
.tijd-regels a { color: var(--accent-gebied); }
.tijd-regels { list-style: none; margin: var(--ruimte-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--ruimte-2); font-size: var(--trap-klein); line-height: 1.45; }
.tijd-regels li { display: grid; grid-template-columns: minmax(3.4em, max-content) 1fr; column-gap: var(--ruimte-2); }
.tijd-regels li > .muted { grid-column: 2; font-size: var(--trap-label); }
.tijd-jaar { font-weight: 600; font-variant-numeric: tabular-nums; }
.tijd-bron { margin-top: var(--ruimte-1); }
/* De vlucht onder de balk "wijngaard in 1950", in Aanleg. */
.vlucht-1950 { margin: var(--ruimte-1) 0 0; }
/* ---- einde spoor klassen ---- */
/* ---- spoor aanplant, ronde 4 (18 september 2026): het blok Herplant
   (herplantblok.js) en zijn tijdbalk (herplantTijdlijn in tekens.js). ---- */
/* Het veld met de balken, de as met de vluchten eronder, de jaartallen daaronder.
   Links en rechts een halve stip lucht, anders valt de eerste en de laatste stip
   half buiten het paneel. Boven het veld ruimte voor het getal op de hoogste balk,
   die tot de rand mag reiken. */
.t-herplant { margin: calc(var(--ruimte-3) + 14px) 6px var(--ruimte-2); }
.t-herplant-veld { position: relative; height: 64px; border-bottom: 1px solid var(--lijn-zacht); }
.t-herplant-balk { position: absolute; bottom: 0; min-height: 3px; margin: 0 2px; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--ink-soft) 38%, transparent); }
.t-herplant-balk.is-druk { background: var(--accent-gebied); }
.t-herplant-etiket { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 2px; font-size: var(--trap-label); font-weight: 640; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-soft); }
.t-herplant-balk.is-druk .t-herplant-etiket { color: var(--accent-gebied); }
/* De ruis: een stippellijn over het hele veld, achter de balken. */
.t-herplant-ruis { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--ink-soft); opacity: 0.7; }
.t-herplant-as { position: relative; height: 12px; }
.t-herplant-vlucht { position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-soft); transform: translate(-50%, -50%); }
.t-herplant-jaren { position: relative; height: 14px; font-size: var(--trap-label); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.t-herplant-jaren.is-krap { height: 28px; }
.t-herplant-jaren span { position: absolute; top: 0; transform: translateX(-50%); line-height: 14px; white-space: nowrap; }
.t-herplant-jaren span.is-laag { top: 14px; }
.t-herplant-jaren span:first-child { transform: translateX(-20%); }
.t-herplant-jaren span:last-child { transform: translateX(-80%); }
.herplant-legenda { margin: 0 0 var(--ruimte-2); }
.herplant-dorp-in-plaats { margin: 0 0 var(--ruimte-2); font-size: var(--trap-klein); color: var(--ink-soft); }
.herplant-uitleg p { margin: var(--ruimte-2) 0 0; font-size: var(--trap-klein); line-height: 1.5; }
/* De kaartlaag in het blad Meer: een streepje met het verloop onder het vinkje,
   in dezelfde twee kleuren als de laag (HERPLANT_KLEUREN in map.js). */
.laag-legenda { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--ruimte-2) 26px; font-size: var(--trap-label); color: var(--ink-soft); }
.laag-legenda i { display: inline-block; width: 64px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--kaart-herplant-weinig), var(--kaart-herplant-veel)); }

/* ---- de legenda per laag (18 september 2026) -----------------------------------
   Elke aangezette laag met kleur krijgt een eigen regel onder die van de stand
   (lagenLegenda in main.js). Lijnen als lijn, stippen als stip, zodat de legenda
   op de kaart lijkt. */
.legend-laag-regel { display: flex; flex-wrap: wrap; gap: 5px 10px; align-items: center; flex-basis: 100%; }
.legend-item i.legend-lijn { width: 16px; height: 0; border-radius: 0; border-top: 3px solid var(--lijn); }
.legend-item i.legend-lijn.is-gestippeld { border-top-style: dashed; }
.legend-item i.legend-stip { width: 9px; height: 9px; border-radius: 50%; }
/* Een boring is een open ring op de kaart, dus ook hier. */
.legend-item i.legend-ring { width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; background: var(--paper-solid); border: 2px solid var(--lijn); }
/* Op een telefoon: klein, boven de schaalstok, hooguit een derde van het scherm,
   en met een tik in te klappen tot de eerste regel (main.js onthoudt dat). */
@media (max-width: 560px) {
  #legend { font-size: 10.5px; gap: 4px 8px; padding: 6px 9px; bottom: calc(40px + var(--safe-bottom)); max-width: calc(100% - 96px); max-height: 32svh; overflow-y: auto; cursor: pointer; }
  #legend .legend-item i { width: 9px; height: 9px; }
  #legend.is-dicht { max-height: none; overflow: hidden; }
  #legend.is-dicht > :not(:first-child) { display: none; }
  #legend.is-dicht > :first-child::after { content: ' +'; font-weight: 700; }
}
/* De naamsvermelding van werelderfgoed en wijnroutes staat in de legenda (main.js,
   lagenLegenda). Het losse blok van geldlagen.js blijft alleen waar de legenda weg
   is: de schone kaart, de focusstand, of een ingeklapte legenda op de telefoon. De
   ODbL vraagt de vermelding bij de kaart. */
#app:not(.is-clean):not(.is-focus):not(:has(#legend.is-dicht)) .geld-kaartbron { display: none; }
.legend-bron { flex-basis: 100%; }
.legend-bron a { color: inherit; }
/* ===================================================== ronde 6: spoor jaargangen ====
   Het blad Jaargangen van een dorp (jaarblad.js): vier rijen vakjes onder elkaar,
   een kolom per jaar, elk met een eigen kleine schaal naast zijn naam. Water gaat
   van de kleur van droog naar die van nat, met gewoon in het midden; de vorst van
   geen vorst (gewoon) via licht naar het volle blauw van de kou. Alles uit tokens.
   De statische pagina van een dorp (pagina-jaargangen.mjs) leest dit bestand ook. */
.t-jaar.is-d2 { fill: var(--droog); }
.t-jaar.is-d1 { fill: color-mix(in srgb, var(--droog) 50%, var(--jaar-gewoon)); }
.t-jaar.is-n1 { fill: color-mix(in srgb, var(--water) 50%, var(--jaar-gewoon)); }
.t-jaar.is-n2 { fill: var(--water); }
.t-jaar.is-vorst2 { fill: var(--kou-vol); }
.t-jaar.is-vorst1 { fill: color-mix(in srgb, var(--kou-vol) 40%, var(--jaar-gewoon)); }
.t-jaar.is-vorstvrij { fill: var(--jaar-gewoon); }
.t-jaar-vorst.is-in { stroke: var(--paper); stroke-width: 1.1; }
.t-jaarrij { display: block; width: 100%; max-width: 560px; height: auto; }
.jaarblad-raster { margin: var(--ruimte-3) 0 var(--ruimte-1); cursor: pointer; border-radius: 4px; }
.jaarblad-raster:focus-visible { outline: 2px solid var(--accent-gebied); outline-offset: 4px; }
.jaarblad-rij + .jaarblad-rij { margin-top: var(--ruimte-2); }
.jaarblad-label { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px var(--ruimte-3); max-width: 560px; margin: 0 0 2px; font-size: var(--trap-label); }
.jaarblad-naam { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--ink); }
.jaarblad-schaal { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.jaarblad-schaal > span:not(.jaarblad-staal) { margin: 0 2px; }
.jaarblad-staal { display: inline-block; width: 7px; height: 11px; border-radius: 1.5px; background: var(--jaar-gewoon); }
.jaarblad-staal.is-k2 { background: var(--jaar-k2); }
.jaarblad-staal.is-k1 { background: var(--jaar-k1); }
.jaarblad-staal.is-w1 { background: var(--jaar-w1); }
.jaarblad-staal.is-w2 { background: var(--jaar-w2); }
.jaarblad-staal.is-d2 { background: var(--droog); }
.jaarblad-staal.is-d1 { background: color-mix(in srgb, var(--droog) 50%, var(--jaar-gewoon)); }
.jaarblad-staal.is-n1 { background: color-mix(in srgb, var(--water) 50%, var(--jaar-gewoon)); }
.jaarblad-staal.is-n2 { background: var(--water); }
.jaarblad-staal.is-vorst2 { background: var(--kou-vol); }
.jaarblad-staal.is-vorst1 { background: color-mix(in srgb, var(--kou-vol) 40%, var(--jaar-gewoon)); }
.jaarblad-tip { margin: var(--ruimte-1) 0 var(--ruimte-2); }
.jaarblad-kop { margin: var(--ruimte-1) 0 var(--ruimte-2); font-size: var(--trap-lead); font-weight: 620; line-height: 1.3; }
.jaarblad-kenmerken { list-style: none; margin: 0 0 var(--ruimte-2); padding: 0; font-size: var(--trap-klein); line-height: 1.45; }
.jaarblad-kenmerken li { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 3px; }
.jaarblad-kenmerken li .t-teken { flex: none; margin-top: 2px; }
.jaarblad-noot { margin: 0 0 var(--ruimte-3); font-size: var(--trap-label); color: var(--ink-soft); font-style: italic; }
.jaarblad-uitleg p { margin: var(--ruimte-2) 0 0; font-size: var(--trap-klein); line-height: 1.5; }
.jaarblad-tabel-wrap { max-width: 100%; overflow-x: auto; }
.jaarblad-tabel { width: 100%; border-collapse: collapse; font-size: var(--trap-label); font-variant-numeric: tabular-nums; }
.jaarblad-tabel th, .jaarblad-tabel td { padding: 3px 6px 3px 0; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--raster); }
.jaarblad-tabel th:first-child { text-align: left; }
.jaarblad-tabel thead th { font-weight: 600; color: var(--ink-soft); vertical-align: bottom; white-space: normal; }
.jaarblad-tabel .zacht { color: var(--ink-soft); }
.jaargangen-open { margin: var(--ruimte-1) 0 var(--ruimte-2); }
.jaargangen-open .link-button { font-size: var(--trap-klein); }
/* Ronde 6, spoor huiswijnen: de wijnen van een huis uit LWIN, op de pagina per
   wijnbedrijf en in het paneel (huiswijnenblok.js). Een rij is het stipje van de
   kleur, de naam (een link naar de plek) en het nummer; dezelfde maat als het
   blok Wijnen (.lwin-rij), zonder plusje, want hier kiest niemand een wijngaard. */
.huiswijn-appellatie { margin: var(--ruimte-3) 0 var(--ruimte-1); font-weight: 600; }
.huiswijnen { list-style: none; margin: 0; padding: 0; }
.huiswijnen > li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: baseline; column-gap: 8px; padding: 2px 0; }
.huiswijnen .lwin-stip { align-self: center; }
.huiswijn-naam { min-width: 0; overflow-wrap: anywhere; }
/* In het paneel: een kopje per niveau, de teller achter een wijnbedrijf in de lijst
   van een dorp, en de lijst die hij onder de rij openklapt. De rijen zijn knoppen
   naar de plek, dus 44 pixels hoog op een telefoon. */
.huiswijn-niveau { margin: var(--ruimte-3) 0 0; font-size: var(--trap-label); font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.huiswijnen-blok .huiswijnen > li, .huiswijnen-onder .huiswijnen > li { min-height: 44px; align-items: center; border-top: 1px solid var(--lijn-zacht); }
.huiswijnen-blok .huiswijn-appellatie, .huiswijnen-onder .huiswijn-appellatie { margin: var(--ruimte-2) 0 0; font-size: var(--trap-klein); }
.huiswijnen-teller { margin-left: 4px; padding: 2px 8px; font-size: var(--trap-label); vertical-align: baseline; }
/* Onder een vinger raakt de teller 44 pixels, zoals de rijen die hij openklapt en
   de chips in de actierij (style.css). Eerst was de chip zelf 44 hoog: dan stond er
   in de lijst van Meursault om de drie namen een dikke bel, en liep het jaar los
   van zijn naam. Nu is de chip 32 hoog en het vlak dat een vinger raakt 44. Met
   een muis blijft hij de smalle chip. */
@media (pointer: coarse) {
  .huiswijnen-teller { position: relative; min-height: 32px; }
  .huiswijnen-teller::after { content: ""; position: absolute; inset: -6px 0; }
}
/* Het stipje van een rode wijn (ook in het blok Wijnen) haalde op donker papier
   1,8 op 1 (nu 3,9). --wijn-rood zelf blijft wat het was, want het is ook de kleur van de
   kaartlaag (tokens.css zegt waarom); alleen op papier een derde wit erbij, zoals
   --accent-gebied en pagina.css in het donker. */
:root[data-theme="dark"] .lwin-stip.is-red { background: color-mix(in srgb, var(--wijn-rood) 70%, var(--wit)); }
.huiswijnen-onder { margin: var(--ruimte-2) 0 var(--ruimte-3); padding-left: var(--ruimte-3); border-left: 2px solid var(--lijn-zacht); }
.lwin-huislink { font: inherit; color: inherit; text-align: left; }
ul.producers.heeft-huiswijnen { columns: 1; }
.huiswijn-naam .link-button { font-size: inherit; text-align: left; }