/* Can Hypamoon connect to X? (/connect-to en /connect-to/<slug>, scripts/koppelgids.mjs, 1 november 2026).
   Bouwt op dag.css en de lijst van connect-apps.css (wa-*). Volgt licht en donker van het apparaat,
   zoals /connect: dezelfde tokens met light-dark(), kop inbegrepen. */

:root:has(body[data-gids]){
  color-scheme:light dark;
  --dag:light-dark(#e9ecef,#0b0d10); --dag-ink:light-dark(#15191d,#f4f4f2); --dag-mist:light-dark(#565c63,#9ba0a7);
  --dag-lijn:light-dark(rgba(21,25,29,.16),rgba(255,255,255,.1)); --dag-lijn-sterk:light-dark(rgba(21,25,29,.34),rgba(255,255,255,.24));
  --wit:light-dark(#fbfbfc,#121519);
  --kg-groen:light-dark(#1d6f45,#7fdcaa); --kg-amber:light-dark(#7f540a,#f0c879); --kg-rood:light-dark(#a3261c,#ff9a8a);
  scrollbar-color:light-dark(#b9bec4,#2e343c) var(--dag);
}
body.dag[data-gids]{color-scheme:light dark}
body.dag[data-gids] .hm-kop,body.dag[data-gids] .hm-blad{--k-bg:light-dark(rgba(233,236,239,.9),rgba(11,13,16,.86))}

/* het label: maantje plus woord */
.kg-uitkomst{display:inline-flex;align-items:center;gap:8px;font:500 .8rem/1 var(--mono);letter-spacing:.04em;white-space:nowrap;color:var(--dag-ink)}
.kg-uitkomst svg{width:14px;height:14px;flex:none;fill:currentColor}
.kg-uitkomst .rand{fill:none;stroke:currentColor;stroke-width:1.4}
.kg-uitkomst[data-uitkomst="open"]{color:var(--kg-groen)}
.kg-uitkomst[data-uitkomst="mogelijk"]{color:var(--kg-amber)}
.kg-uitkomst[data-uitkomst="gesloten"]{color:var(--kg-rood)}
.kg-uitkomst[data-uitkomst="onbekend"]{color:var(--dag-mist)}
.held .kg-uitkomst{margin-top:22px;font-size:.92rem;padding:9px 14px;border:1px solid currentColor;border-radius:999px}

/* index: legenda, zoeken en de lijst */
.kg-legenda{list-style:none;margin:0 0 clamp(24px,3vw,36px);padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));border-top:1px solid var(--dag-lijn-sterk)}
.kg-legenda li{display:grid;align-content:start;align-items:center;grid-template-columns:1fr auto;gap:6px 12px;padding:16px 18px 16px 0;border-bottom:1px solid var(--dag-lijn)}
.kg-legenda span:not(.kg-uitkomst){grid-column:1/-1;color:var(--dag-mist);font-size:.9rem;line-height:1.45}
.kg-legenda b{grid-row:1;grid-column:2;font:540 1.3rem/1 var(--display);letter-spacing:-.02em}
.kg-zoek{grid-template-columns:minmax(0,360px) minmax(0,260px) minmax(0,260px)}
.kg-zoek .wa-chips{grid-column:1/-1}
.kg-groep select{width:100%;min-height:48px;padding:11px 36px 11px 14px;border:1px solid var(--dag-lijn-sterk);border-radius:0;background:var(--wit);color:var(--dag-ink);font:400 1rem/1.4 var(--tekst);-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer}
.kg-groep select:hover{border-color:var(--dag-ink)}
/* De naam gaat voor: een brede kolom, de meta (rubriek, hosting) altijd op een eigen regel eronder. */
.kg-tabel .kg-naam{width:28%;min-width:13em}
.kg-naam a{overflow-wrap:break-word}
.kg-naam a{color:var(--dag-ink);text-decoration:none}
.kg-naam a:hover{text-decoration:underline}
.kg-naam small{display:block;margin-top:4px;font:400 .82rem/1.3 var(--tekst);letter-spacing:0;color:var(--dag-mist)}
.kg-cel-uitkomst{width:14%;white-space:nowrap}
.kg-cel-wat{color:var(--dag-mist)}
.kg-criteria{margin:0;padding:0;list-style:none;counter-reset:kg;border-top:1px solid var(--dag-lijn-sterk)}
.kg-criteria li{counter-increment:kg;display:grid;grid-template-columns:2.2em 1fr;gap:4px 12px;padding:16px 0;border-bottom:1px solid var(--dag-lijn)}
.kg-criteria li::before{content:counter(kg);grid-row:1/3;font:500 .8rem/1.9 var(--mono);color:var(--dag-mist)}
.kg-criteria b{font-weight:600}
.kg-criteria span{color:var(--dag-mist)}
.kg-noot{margin-top:18px;max-width:66ch;color:var(--dag-mist);font-size:.92rem}

/* toolpagina */
.kg-dl{margin:0;border-top:1px solid var(--dag-lijn-sterk)}
.kg-dl>div{display:grid;grid-template-columns:minmax(0,13em) minmax(0,1fr);gap:6px 24px;padding:16px 0;border-bottom:1px solid var(--dag-lijn)}
.kg-dl dt{font:500 .78rem/1.6 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--dag-mist)}
.kg-dl dd{margin:0;max-width:62ch;overflow-wrap:anywhere}
.kg-dl dd b{font-weight:600}
.kg-dl a,.kg-bronlijst a,.kg-bouwen a,.kg-noot a{color:var(--dag-ink);text-decoration:underline;text-decoration-color:var(--dag-lijn-sterk);text-underline-offset:3px}
.kg-dl a:hover,.kg-bronlijst a:hover,.kg-bouwen a:hover,.kg-noot a:hover{text-decoration-color:currentColor}
.kg-groot{font-size:clamp(1.12rem,1rem + .4vw,1.36rem);line-height:1.45;max-width:40ch}
.kg-bouwen h3{margin-top:28px;font:500 .78rem/1.6 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--dag-mist)}
.kg-weten{margin:10px 0 0;padding:0 0 0 1.1em;max-width:62ch}
.kg-weten li{margin-top:8px}
.kg-bronlijst{margin:0;padding:0;list-style:none;border-top:1px solid var(--dag-lijn-sterk)}
.kg-bronlijst li{padding:12px 0;border-bottom:1px solid var(--dag-lijn);font-size:.92rem;overflow-wrap:anywhere}
.kg-meerlijst{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));border-top:1px solid var(--dag-lijn-sterk)}
.kg-meerlijst a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 16px 16px 0;border-bottom:1px solid var(--dag-lijn);color:var(--dag-ink);text-decoration:none;min-height:48px}
.kg-meerlijst a:hover b{text-decoration:underline}
.kg-meerlijst b{font-weight:560;min-width:0;overflow-wrap:break-word}
.kg-alle{margin-top:20px}

@media (max-width:900px){.kg-zoek{grid-template-columns:1fr}}
@media (max-width:760px){
  .kg-tabel .kg-cel-uitkomst{margin-top:8px}
  .kg-tabel .kg-cel-wat{margin-top:6px}
  /* Telefoon: de naam over de volle breedte, de meta op een regel eronder. */
  .kg-tabel .kg-naam{width:auto;min-width:0}
  .kg-naam small{display:block;margin:4px 0 0}
  .kg-dl>div{grid-template-columns:1fr}
}

/* Een lange docs-URL in de zin mag de kolom niet breder maken. */
body[data-gids] .sectie-raster>div{min-width:0}
body[data-gids] .zeg blockquote p{overflow-wrap:anywhere}