/* ==========================================================================
   Sudokubord — kleursysteem en componentstijl
   Leeft naast styles.css en botst er niet mee: alles hieronder begint met
   .sud. De huistokens (--paper, --ink, --green, …) komen uit styles.css en
   worden hier alleen gelezen, nooit overschreven.
   ==========================================================================

   HET SYSTEEM IN ÉÉN ALINEA
   De structuur van het rooster komt van de RANDEN, niet van de kleur. Elke cel
   draagt Marcs 4-bits randmasker (boven=1 rechts=2 onder=4 links=8); een dikke
   rand is een gebiedsgrens. Dat doet het zware werk. Kleur is een fluistering
   eroverheen: twee wisselende wassingen van een paar procent verzadiging, zodat
   je de blokken als vlakken ziet zonder dat het rooster een kleurenkaart wordt.

   WAAR KLEUR WÉL BETEKENIS DRAAGT (krullen K10, HV6, HV8, D632, D9x9: daar is
   de vulling het enige verschil tussen twee gebieden) geldt de regel: kleur
   draagt nooit alleen. Elke betekenisdragende vulling krijgt óók een patroon
   (--sud-fam-*-patroon) én de gebiedsnaam in de toegankelijke naam van de cel.
   Zie tools/check-kleur.mjs; die controle draait op deze tokens.

   DONKERE MODUS bestaat niet op deze site. Alles staat toch in variabelen, dus
   één [data-thema="donker"]-blok volstaat later.
   ========================================================================== */

:root {
  /* --- het rooster ------------------------------------------------------ */
  --sud-vak: #ffffff;       /* lege cel, tint a */
  --sud-vak-2: #f6f2e7;     /* lege cel, tint b — wisselt per gebied */
  --sud-lijn: #ded8ca;      /* dunne cellijn, binnen een gebied */
  --sud-rand: #6f7c74;      /* gebiedsgrens */
  --sud-kader: #4a5751;     /* buitenkader van het bord */

  /* --- celtoestanden, in oplopende nadruk ------------------------------- */
  /* 1 leeg          = --sud-vak / --sud-vak-2
     2 gegeven cijfer                                                        */
  --sud-gegeven: #1d2320;
  /* 3 zelf ingevuld                                                        */
  --sud-eigen: #2f5d50;
  /* 4 buur: zelfde rij, kolom of gebied als de selectie                    */
  --sud-buur: #edf3ee;
  /* 5 echo: zelfde cijfer als de selectie — was + gouden balk onderaan,
        zodat het ook zonder kleur te zien is                               */
  --sud-echo: #f7efd9;
  --sud-echo-balk: #8a6a12;
  /* 6 de geselecteerde cel — was + ring                                    */
  --sud-keuze: #caded4;
  --sud-keuze-ring: #2f5d50;
  /* 7 conflict na controleren — was + donkere roest + golflijn             */
  --sud-fout: #f8e1d9;
  --sud-fout-ink: #8f3720;

  /* --- kleurfamilies voor gebieden waar de vulling betekenis draagt ----- */
  /* Vijf families, elk met een eigen patroon. De vullingen zijn opzettelijk
     bijna even licht: zonder patroon zijn ze in grijstinten niet uit elkaar te
     houden, en dat is precies waarom het patroon er is. */
  --sud-fam-spar: #e8efe9;
  --sud-fam-klei: #f4ece0;
  --sud-fam-roest: #f8e9e3;
  --sud-fam-oker: #f6f0da;
  --sud-fam-lei: #e9eef1;
  --sud-patroon: rgba(29, 35, 32, .17);

  /* --- maatvoering ------------------------------------------------------ */
  --sud-dun: 1px;
  --sud-dik: 2px;
  --sud-bord: min(520px, 100%);

  /* Een cel wordt nooit breder dan dit. Zonder deze grens krijgt een 4x4 op
     een breed scherm vakjes van 140px, alleen omdat er plaats is; een rooster
     hoort te schalen met het aantal vakjes, niet met het venster. */
  --sud-cel-max: 56px;
}

/* --------------------------------------------------------------- opzet -- */

.sud {
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr);
  gap: 40px;
  align-items: start;
}

.sud__kolom { min-width: 0; }

/* ------------------------------------------------------------- rooster -- */

.sud__rooster {
  /* Twee losse declaraties in plaats van een geneste min(): de breedte volgt
     het aantal kolommen, de max-width houdt hem binnen het paneel en het
     venster. Een 4x4 kreeg anders vakjes van 142px omdat er plaats was. */
  width: calc(var(--sud-kolommen, 9) * var(--sud-cel-max));
  max-width: min(var(--sud-bord), 100%);
  display: flex;
  flex-direction: column;
  background: var(--sud-vak);
  border: var(--sud-dik) solid var(--sud-kader);
  border-radius: 6px;
  overflow: hidden;
  /* Geen tekstselectie bij dubbelklikken, en geen 300ms-tik op mobiel. */
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.sud__rij {
  display: grid;
  grid-template-columns: repeat(var(--sud-kolommen, 9), minmax(0, 1fr));
}

/* --------------------------------------------------------------- cel ---- */

.sud__cel {
  position: relative;
  /* Eigen stapelcontext, zodat het gebiedspatroon (::before, z-index -1) boven
     de vulling maar onder het cijfer valt. */
  isolation: isolate;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--mono);
  font-size: clamp(15px, 3.6vw, 21px);
  line-height: 1;
  font-weight: 400;
  color: var(--sud-eigen);
  background: var(--sud-vak);
  /* Elke cel tekent alleen haar rechter- en onderlijn; de linker- en bovenlijn
     van een cel is de rechter- en onderlijn van haar buur. Zo staat er nooit
     een dubbele lijn, en het buitenkader zit op .sud__rooster. */
  border: 0;
  border-right: var(--sud-dun) solid var(--sud-lijn);
  border-bottom: var(--sud-dun) solid var(--sud-lijn);
  transition: background-color .1s ease;
}

.sud__cel[data-was="b"] { background: var(--sud-vak-2); }

/* De randen. Bit 2 = rechts, bit 4 = onder — de twee die deze cel tekent. */
.sud__cel[data-rechts] { border-right: var(--sud-dik) solid var(--sud-rand); }
.sud__cel[data-onder] { border-bottom: var(--sud-dik) solid var(--sud-rand); }

/* De laatste kolom en de laatste rij lopen tegen het buitenkader aan. */
.sud__rij > .sud__cel:last-child { border-right: 0; }
.sud__rij:last-child > .sud__cel { border-bottom: 0; }

/* --------------------------------------------------- celtoestand 2 & 3 -- */

.sud__cel[data-gegeven] {
  color: var(--sud-gegeven);
  font-weight: 600;
  cursor: default;
}

/* Zelf ingevuld: groen en lichter van gewicht. Het gewichtsverschil is het
   deel dat ook op een zwart-witafdruk overeind blijft. */
.sud__cel[data-eigen] {
  color: var(--sud-eigen);
  font-weight: 400;
}

/* De vullingen staan hier VÓÓR de celtoestanden hieronder: bij gelijke
   specificiteit wint de laatste regel, en een geselecteerde of foute cel moet
   haar toestandskleur houden. Het patroon (::before) blijft in alle gevallen
   staan, dus het gebied blijft afleesbaar ook als de vulling wegvalt. */

/* ---------------------------------------------------- kleurfamilies ----- */

/* Zowel het speelbord als de gebiedskaart tekenen ze, dus staan ze hier één
   keer voor allebei. `:is()` houdt de specificiteit gelijk aan die van de
   celtoestanden hieronder — en die staan later in het bestand, dus die winnen.
   Dat is precies de bedoeling: een geselecteerde of foute cel houdt haar
   toestandskleur, en het patroon blijft er dwars doorheen staan. */

:is(.sud__rooster, .sud-kaart) [data-fam="spar"] { background: var(--sud-fam-spar); }
:is(.sud__rooster, .sud-kaart) [data-fam="klei"] { background: var(--sud-fam-klei); }
:is(.sud__rooster, .sud-kaart) [data-fam="roest"] { background: var(--sud-fam-roest); }
:is(.sud__rooster, .sud-kaart) [data-fam="oker"] { background: var(--sud-fam-oker); }
:is(.sud__rooster, .sud-kaart) [data-fam="lei"] { background: var(--sud-fam-lei); }

/* Het patroon. Dit is de laag die de betekenis draagt zodra kleur wegvalt:
   in grijstinten, bij kleurenblindheid, op een zwart-witafdruk. Elke familie
   heeft er precies één, en geen twee families delen er een.

   z-index -1 met isolation:isolate op de cel: zo ligt het patroon boven de
   vulling maar onder het cijfer, en blijft het cijfer scherp. */
:is(.sud__rooster, .sud-kaart) [data-fam]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
:is(.sud__rooster, .sud-kaart) [data-fam="spar"]::before {
  background: repeating-linear-gradient(45deg,
    var(--sud-patroon) 0 1px, transparent 1px 6px);
}
:is(.sud__rooster, .sud-kaart) [data-fam="roest"]::before {
  background: repeating-linear-gradient(-45deg,
    var(--sud-patroon) 0 1px, transparent 1px 6px);
}
:is(.sud__rooster, .sud-kaart) [data-fam="oker"]::before {
  background: repeating-linear-gradient(90deg,
    var(--sud-patroon) 0 1px, transparent 1px 6px);
}
:is(.sud__rooster, .sud-kaart) [data-fam="lei"]::before {
  background:
    repeating-linear-gradient(45deg, var(--sud-patroon) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, var(--sud-patroon) 0 1px, transparent 1px 7px);
}
:is(.sud__rooster, .sud-kaart) [data-fam="klei"]::before {
  background-image: radial-gradient(var(--sud-patroon) 1px, transparent 1.2px);
  background-size: 6px 6px;
}

/* --------------------------------------------------- celtoestand 4 t/m 7 */

/* Volgorde = nadruk. Buur is de zachtste, de selectie de sterkste; een cel kan
   tegelijk buur, echo en fout zijn, dus staan ze hier in oplopende volgorde. */

.sud__cel[data-buur] { background: var(--sud-buur); }

.sud__cel[data-echo] { background: var(--sud-echo); }
.sud__cel[data-echo]::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 8%;
  height: 3px;
  border-radius: 2px;
  background: var(--sud-echo-balk);
}

.sud__cel[data-fout] {
  background: var(--sud-fout);
  color: var(--sud-fout-ink);
  text-decoration: underline wavy var(--sud-fout-ink);
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}

.sud__cel[aria-selected="true"] {
  background: var(--sud-keuze);
  box-shadow: inset 0 0 0 var(--sud-dik) var(--sud-keuze-ring);
}

/* Toetsenbordfocus blijft zichtbaar bovenop alles. */
.sud__cel:focus-visible {
  outline: 3px solid var(--sud-keuze-ring);
  outline-offset: -3px;
  z-index: 1;
}

@media (hover: hover) {
  .sud__cel:not([data-gegeven]):hover { background: var(--sud-buur); }
}

/* -------------------------------------------------------- tekenpaneel --- */

.sud__paneel {
  width: var(--sud-bord);
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--sud-paneel-kolommen, 5), minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}

.sud__teken {
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--line-3);
  border-radius: 8px;
  background: var(--paper-3);
  color: var(--green);
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.sud__teken:hover { background: var(--green-soft); border-color: var(--green); }
.sud__teken[aria-pressed="true"] { background: var(--green-soft); border-color: var(--green); }
.sud__teken[data-wis] { color: var(--ink-3); }
.sud__teken[disabled] { opacity: .45; cursor: default; }

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

.sud__acties {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}

/* --------------------------------------------------------- meldingen ---- */

.sud__melding {
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.6;
  padding: 14px 16px;
  border-radius: 9px;
  background: var(--paper-2);
  color: var(--ink-2);
  border-left: 3px solid var(--line-3);
  margin: 0 0 16px;
}
.sud__melding[data-toon="goed"] {
  background: var(--green-soft);
  color: #21463c;
  border-left-color: var(--green);
}
.sud__melding[data-toon="fout"] {
  background: var(--sud-fout);
  color: var(--sud-fout-ink);
  border-left-color: var(--rust);
}
.sud__melding[data-toon="tip"] {
  background: #f7efd9;
  color: #6b4e00;
  border-left-color: var(--gold);
}

.sud__cijfers {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-4);
  margin: 18px 0 0;
}

/* ------------------------------------------------------- gebiedskaart --- */

.sud-kaart {
  width: min(340px, 100%);
  display: flex;
  flex-direction: column;
  border: var(--sud-dik) solid var(--sud-kader);
  border-radius: 6px;
  overflow: hidden;
}
.sud-kaart__rij { display: grid; grid-template-columns: repeat(var(--sud-kolommen, 9), 1fr); }
.sud-kaart__cel {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
  background: var(--sud-vak);
  border-right: var(--sud-dun) solid var(--sud-lijn);
  border-bottom: var(--sud-dun) solid var(--sud-lijn);
}
.sud-kaart__cel[data-was="b"] { background: var(--sud-vak-2); }
.sud-kaart__cel[data-rechts] { border-right: var(--sud-dik) solid var(--sud-rand); }
.sud-kaart__cel[data-onder] { border-bottom: var(--sud-dik) solid var(--sud-rand); }
.sud-kaart__rij > .sud-kaart__cel:last-child { border-right: 0; }
.sud-kaart__rij:last-child > .sud-kaart__cel { border-bottom: 0; }

.sud-kaart__cel[data-midden] {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}

/* --------------------------------------------------------------- rest --- */

.sud-legenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.sud-legenda li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: center;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.sud-legenda__staal {
  position: relative;
  height: 34px;
  border: 1px solid var(--sud-lijn);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 15px;
  overflow: hidden;
}

@media (max-width: 900px) {
  .sud { grid-template-columns: 1fr; gap: 28px; }
}

@media print {
  .sud__paneel, .sud__acties, .sud__melding { display: none; }
  .sud__cel { color: #000; }
}

/* ==========================================================================
   Paginablokken rond het bord. Zelfde ritme en zelfde maten als de rest van
   de site; alleen de namen zijn nieuw, zodat styles.css onaangeroerd blijft.
   ========================================================================== */

.sud-blok { padding: 0 0 64px; }
.sud-blok--kop { padding-top: 52px; }
.sud-blok--kop h1 { max-width: 13em; }

.sud-lead {
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 38em;
  margin: 0;
}

.sud__titel {
  font-family: var(--display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -.01em;
  margin: 0 0 10px;
}
.sud__intro {
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink-3);
  margin: 0 0 20px;
  max-width: 34em;
}

.sud-tekst { max-width: 62em; }
.sud-tekst h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  margin-bottom: 18px;
}
.sud-tekst p {
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 38em;
  margin: 0 0 18px;
}
.sud-tekst em { color: var(--ink); font-style: italic; }

.sud-tweeluik {
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr);
  gap: 40px;
  align-items: start;
}

.sud-figuur { margin: 0; }
.sud-figuur figcaption {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-4);
  margin-top: 12px;
  max-width: 30em;
}

.sud-redenen {
  list-style: none;
  counter-reset: reden;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 20px;
  max-width: 40em;
}
.sud-redenen li {
  counter-increment: reden;
  border-left: 3px solid var(--line-3);
  padding-left: 18px;
}
.sud-redenen__kop {
  font-family: var(--mono);
  font-size: 15px !important;
  color: var(--ink) !important;
  margin-bottom: 8px !important;
}
.sud-redenen__kop::before {
  content: counter(reden) ". ";
  color: var(--ink-5);
}

.sud-terzijde {
  border-top: 1px solid var(--line-2);
  padding-top: 18px;
  color: var(--ink-3) !important;
  font-size: 16.5px !important;
}

.sud-brug {
  border-top: 1px solid var(--line);
  padding-top: 32px;
  max-width: 40em;
}
.sud-brug p {
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 14px;
}

@media (max-width: 900px) {
  .sud-tweeluik { grid-template-columns: 1fr; gap: 28px; }
}

/* ==========================================================================
   HET OVERZICHT EN DE GROTE ROOSTERS
   Toegevoegd toen het luik van één variantpagina naar achttien ging. Alles
   hieronder is opmaak: er komt geen enkel nieuw kleurtoken bij, en aan het
   kleursysteem hierboven is niets veranderd. De vullingen, de patronen en de
   celtoestanden blijven precies zoals ze waren.
   ========================================================================== */

/* ---------------------------------- twee dingen die smal moeten kunnen -- */

/* 1. Nederlandse koppen. "Tweehonderdzesenvijftig" is één woord van 23 letters;
      in een kop van 38px is dat 440px, en op een telefoon van 390px duwt het de
      hele pagina opzij. De titels zelf zijn kort gehouden, maar dit is een taal
      waarin je woorden aan elkaar plakt, dus staat het vangnet er ook. */
.sud-blok--kop h1 {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* 2. De gebiedskaart telde met `1fr` in plaats van `minmax(0, 1fr)`. Het
      verschil is onzichtbaar tot een rij zestien cellen heeft: dan is de
      automatische minimumbreedte van al die cellen samen breder dan de kaart,
      en verdwijnt de laatste kolom onder de `overflow: hidden`. Het speelbord
      hierboven deed het al goed; de kaart nu ook. */
.sud-kaart__rij {
  grid-template-columns: repeat(var(--sud-kolommen, 9), minmax(0, 1fr));
}

/* ------------------------------------- leesbaar op elk formaat ---------- */

/* EERST de breedte van de bordkolom vastleggen, en dat is geen detail.

   Ze stond op `auto`: de kolom werd dus zo breed als het rooster van nature
   wilde zijn. Dat werkte zolang het rooster zelf een natuurlijke breedte hád —
   negen cellen met een lettergrootte erin. Zodra het rooster een container
   wordt (hieronder, voor de cijfergrootte), heeft het die niet meer: een
   container met `inline-size` levert per definitie geen intrinsieke breedte
   meer aan zijn ouder, en dan klapt de kolom in tot een derde van haar maat.

   Dus: de kolom krijgt de breedte die het bord toch al had. Nu is de kolom
   definiet, mag het rooster een container zijn, en kan er niets meer inklappen.
   min(520px, 100%) past ook op het smalste punt waar deze twee kolommen naast
   elkaar staan: 520 + 40 gap + 260 tekst = 820, en onder 900px stapelen ze. */
.sud { grid-template-columns: var(--sud-bord) minmax(260px, 1fr); }

@media (max-width: 900px) {
  .sud { grid-template-columns: 1fr; }
}

/* Het probleem: 16x16 heeft 256 cellen. Een vaste `clamp(15px, 3.6vw, 21px)`
   is op een telefoon 15px in een vakje van 21px — het cijfer valt dan half
   buiten zijn eigen cel, en op een breed scherm blijft het cijfer 21px terwijl
   de cel 40px is.

   De oplossing is de cel zelf laten meten. `container-type: inline-size` maakt
   van het rooster een containerblok, en dan is 1cqw precies één procent van de
   bordbreedte. Eén cel is 100cqw/N breed, dus 52cqw/N is iets meer dan de helft
   van een cel: dat leest goed van 4x4 tot 16x16, en het schaalt mee met het
   bord in plaats van met het venster.

   Een browser die cq-eenheden niet kent, gooit deze hele regel weg en houdt de
   clamp() hierboven. Dat is precies wat je wil: geen kapotte pagina, alleen de
   oude maatvoering. */
.sud__rooster { container-type: inline-size; }

.sud__cel {
  font-size: clamp(11px, calc(52cqw / var(--sud-kolommen, 9)), 21px);
}

/* Op een telefoon mag een breed rooster de kantlijn opeten.

   Bij twaalf en zestien tekens is elk vakje op een scherm van 390px maar 22px
   breed, en dan is de kantlijn van de pagina — 24px links en rechts — meer dan
   een hele cel waard. Voor die roosters loopt het bord dus tot bijna tegen de
   schermrand. Dat scheelt twee pixels per vakje, wat weinig klinkt en op deze
   maat een tiende van de cel is.

   Alleen die roosters: `--sud-uitloop` wordt door de pagina gezet en staat
   overal elders op 0, dus de klassieke negen blijft staan waar ze stond.

   Meer dan 16px mag niet: onder 720px is de kantlijn van .shell 18px, en een
   uitloop die daar overheen gaat, duwt de hele pagina zijwaarts scrollbaar.
   Dat is precies het soort fout dat je op een breed scherm niet ziet.

   NIET gekozen: het bord laten scrollen met grotere vakjes. Bij een sudoku van
   zestien bij zestien moet je het hele rooster kunnen zien om te kunnen
   redeneren; een vakje dat je moet gaan zoeken is erger dan een vakje dat
   klein is. Wie het echt te klein vindt, draait de telefoon dwars — dan is het
   bord 520px en elk vakje 32px. Dat staat ook zo in de tekst op die pagina. */
@media (max-width: 620px) {
  .sud__rooster,
  .sud__paneel {
    width: calc(100% + 2 * var(--sud-uitloop, 0px));
    /* Allebei stonden ze ook op max-width:100%; zonder deze regel kapt die de
       uitloop meteen weer weg. Met uitloop 0 staat er gewoon weer 100%. */
    max-width: calc(100% + 2 * var(--sud-uitloop, 0px));
    margin-inline: calc(-1 * var(--sud-uitloop, 0px));
  }
}

/* ---------------------------------------------- de miniatuurkaart ------- */

/* Dezelfde kaart, maar dan als duimnagel op het overzicht. Alleen de maten
   veranderen: de twee lijndiktes worden op dit element opnieuw gezet, zodat
   een 2px gebiedsgrens een vakje van acht bij acht niet opvreet. */
.sud-kaart--mini {
  --sud-dun: .5px;
  --sud-dik: 1.5px;
  width: 100%;
  border-radius: 4px;
}

/* ------------------------------------------------------- het overzicht -- */

.sud-lead--tweede { margin-top: 16px; }

.sud-ordening {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 38em;
  margin: 26px 0 0;
  border-left: 3px solid var(--line-3);
  padding-left: 16px;
}
.sud-ordening--taal {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--ink-4);
}

.sud-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

.sud-tegel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 24px;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color .12s ease, background-color .12s ease;
}

/* De hele tegel is klikbaar, maar de LINK is de naam: dat is de tekst die een
   schermlezer in zijn lijst van links zet, en "Speel dit rooster" achttien keer
   op rij zou daar niets betekenen. De ::after legt het klikvlak over de tegel;
   de focusring komt met :has() op de tegel te staan, want anders zou hij om
   drie woorden heen liggen in plaats van om wat je aanklikt. */
.sud-tegel__naam {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.015em;
  margin: 0 0 10px;
}
.sud-tegel__naam a { color: var(--ink); text-decoration: none; }
.sud-tegel__naam a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
}
.sud-tegel:has(a:hover) { border-color: var(--green-light); background: var(--paper-2); }
.sud-tegel:has(a:hover) .sud-tegel__naam a { color: var(--green); }
.sud-tegel:has(a:focus-visible) {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-color: var(--green);
}
.sud-tegel__naam a:focus-visible { outline: none; }

.sud-tegel__kaart { width: min(160px, 56%); margin: 0 0 18px; }

.sud-tegel__maat {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--ink-4);
  margin: 0 0 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 16px;
}
.sud-tegel__tekens { overflow-wrap: anywhere; }

.sud-tegel__uitleg {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 18px;
}

/* Geen knal, alleen een richting. Staat er voor het oog; de naam erboven is
   de echte link, dus dit hoeft niet nog eens voorgelezen te worden. */
.sud-tegel__gaan {
  margin: auto 0 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  color: var(--green);
}

/* ---------------------------------------------------------- komt nog ---- */

.sud-komtnog {
  border-top: 1px solid var(--line);
  padding-top: 40px;
}
.sud-komtnog h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  margin-bottom: 14px;
}
.sud-komtnog > p {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-3);
  max-width: 38em;
  margin: 0 0 28px;
}

.sud-tegel--wachtend {
  background: transparent;
  border-style: dashed;
}
.sud-tegel--wachtend .sud-tegel__naam { color: var(--ink-3); }

/* Geen tekening, want er is niets te tekenen: het rooster is geen vierkant.
   Een gearceerd vlak is eerlijker dan een verzonnen kaart. */
.sud-tegel__kaart--leeg {
  aspect-ratio: 1;
  border: 1.5px dashed var(--line-3);
  border-radius: 4px;
  background: repeating-linear-gradient(45deg,
    var(--line) 0 1px, transparent 1px 9px);
}

.sud-merk {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--line-3);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10.5px;
}

/* --------------------------------------------------------- kruimelpad --- */

.sud-kruimel {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-4);
  margin: 20px 0 0;
}

@media (max-width: 520px) {
  .sud-lijst { grid-template-columns: 1fr; gap: 18px; }
  .sud-tegel { padding: 18px 18px 20px; }
}

@media print {
  .sud-tegel__gaan { display: none; }
}