/* ============================================================================
   uitleg.css — info-/uitlegpagina (/uitleg), bwired-native inline-fragment.
   Twee snelheden: 'Beginner' (verhaal) ⟷ 'Pro' (onder de motorkap). Volgt het
   standaard-format: OKLCH-gloed, glas-cards, en EXACT dezelfde header-uitlijning
   als de andere pagina's (icoon op 220 · titel op 1.6rem · 20px boven).
   Accent: cyaan (info). Alle styling via classes (CSP: geen inline-style).
   ========================================================================== */

body[data-page="uitleg"] { --uitleg: #22d3ee; }

/* ── Gloed-achtergrond náást de rail ── */
body[data-page="uitleg"]::before {
  content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: var(--rail-w);
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, oklch(36% 0.070 220) 0%, transparent 55%),
    radial-gradient(80% 60% at 85% 100%, oklch(28% 0.080 260) 0%, transparent 60%),
    linear-gradient(180deg, oklch(15% 0.020 240) 0%, oklch(10% 0.022 250) 100%);
}
@media (max-width: 640px) { body[data-page="uitleg"]::before { left: 0; } }

.uitleg-embed { padding: 20px 24px 36px; min-width: 0; }

/* ── Header (gelijk format: icoon 1.5rem + titel 1.6rem, info-paneel → schuif rechts) ── */
.uitleg-headbar {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 10px 16px; margin: 0 0 18px; padding: 0 0 8px;
}
.uitleg-title { margin: 0; font-size: 1.6rem; font-weight: 600; line-height: 1.2; color: #e7ecf3; display: inline-flex; align-items: center; gap: 9px; }
.head-ico { flex: none; width: 1.5rem; text-align: center; font-size: 1.3rem; line-height: 1; }

/* Beginner/Pro-schuif */
.uitleg-mode {
  display: inline-flex; background: oklch(20% 0.020 240 / 0.55); border: 1px solid oklch(70% 0.020 240 / 0.18);
  border-radius: 999px; padding: 3px; backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%);
}
.uitleg-mode button {
  appearance: none; border: 0; background: transparent; cursor: pointer; color: #8a93a8;
  font-size: 0.85rem; font-weight: 500; padding: 6px 15px; border-radius: 999px; transition: color .2s, background .2s;
}
@media (max-width: 640px) { .uitleg-mode button { min-height: 32px; } }
.uitleg-mode button.is-on { background: var(--uitleg); color: #06222a; }

/* ── Body: sticky sectie-nav + content ── */
.uitleg-body { display: grid; grid-template-columns: 196px 1fr; gap: 24px; min-width: 0; align-items: start; }

.uitleg-nav { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.uitleg-nav a {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 10px;
  color: #9fb0c3; font-size: 0.84rem; text-decoration: none; transition: background .15s, color .15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.uitleg-nav a:hover { background: oklch(70% 0.02 240 / 0.07); color: #cdd5e1; }
.uitleg-nav a.is-active { background: oklch(70% 0.13 220 / 0.16); color: #bdeaf2; font-weight: 500; }
.un-ico { width: 18px; text-align: center; flex: none; font-size: 0.95rem; }

.uitleg-main { min-width: 0; }
.uitleg-intro { margin: 0 0 22px; color: #c2cde0; line-height: 1.7; font-size: 0.98rem; max-width: 72ch; }
.uitleg-intro b { color: #e7ecf3; }

/* ── Secties ── */
.uitleg-section {
  background: oklch(20% 0.020 240 / 0.55); border: 1px solid oklch(70% 0.020 240 / 0.16);
  border-radius: 16px; padding: 20px 22px; margin-bottom: 18px; min-width: 0;
  backdrop-filter: blur(14px) saturate(135%); -webkit-backdrop-filter: blur(14px) saturate(135%);
  scroll-margin-top: 18px;
}
.us-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.us-ico { font-size: 1.4rem; line-height: 1; flex: none; }
.us-head h3 { margin: 0; font-size: 1.25rem; font-weight: 600; color: #e7ecf3; }
.us-lead { margin: 0 0 16px; color: #c2cde0; line-height: 1.7; max-width: 72ch; }
.us-sub { margin: 4px 0 8px; font-size: 0.82rem; color: #8a93a8; text-transform: uppercase; letter-spacing: 0.04em; }
.us-list { margin: 0 0 16px; padding-left: 20px; color: #b8c2d2; line-height: 1.7; max-width: 74ch; }
.us-list li { margin-bottom: 7px; }
.us-list b, .us-lead b { color: #e7ecf3; }

/* Vergelijk-cards (bv. GoodWe vs Hoymiles) */
.us-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 16px; }
.us-card { background: oklch(24% 0.02 245 / 0.5); border: 1px solid oklch(70% 0.02 240 / 0.14); border-radius: 12px; padding: 13px 15px; min-width: 0; }
.us-card h4 { margin: 0 0 6px; font-size: 0.95rem; font-weight: 600; color: #e7ecf3; display: flex; align-items: center; gap: 7px; }
.us-card .uc-ico { font-size: 1.05rem; flex: none; }
.us-card p { margin: 0; font-size: 0.85rem; color: #aeb9c9; line-height: 1.6; }
.us-card p + p { margin-top: 7px; }
.us-card b { color: #dfe6f0; }
/* Uitgelichte kernregel (links een accent-balk) */
.us-fact { display: flex; align-items: flex-start; gap: 11px; margin: 0 0 16px; padding: 12px 15px;
  background: oklch(70% 0.13 200 / 0.07); border-left: 3px solid var(--uitleg); border-radius: 0 10px 10px 0; }
.us-fact .uf-ico { font-size: 1.15rem; flex: none; line-height: 1.5; }
.us-fact p { margin: 0; font-size: 0.9rem; color: #cdd9e3; line-height: 1.6; }
.us-fact b { color: #e7ecf3; }

/* Live mini-weergave van de ÉCHTE homepage (iframe, zelfde origin). De menubalk wordt via
   JS (uitleg.js) verborgen — CSP-veilig. opacity 0 tot dat klaar is, zodat er geen flits is. */
.us-homewrap {
  border-radius: 12px; border: 1px solid oklch(70% 0.02 240 / 0.16); overflow: hidden;
  margin: 0 0 10px; background: oklch(13% 0.02 245); height: 470px;
}
.us-homeframe { width: 100%; height: 100%; border: 0; display: block; opacity: 0; transition: opacity .35s ease; }
.us-homeframe.is-ready { opacity: 1; }
.us-homecap { margin: 0 0 16px; font-size: 0.86rem; color: #aebacb; line-height: 1.55; }
.us-homecap b { color: #e7ecf3; }
.us-homelink { color: var(--uitleg); text-decoration: none; white-space: nowrap; }
.us-homelink:hover { text-decoration: underline; }

/* Live-regel */
.us-live {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 9px; margin: 0; padding: 11px 14px;
  background: oklch(70% 0.13 200 / 0.08); border: 1px solid oklch(70% 0.13 200 / 0.22); border-radius: 12px;
  color: #cfe3ea; font-size: 0.92rem; line-height: 1.5;
}
.us-live b { color: #fbbf24; font-weight: 600; }
.us-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,0.6); flex: none; }
.us-live-tag { margin-left: auto; font-size: 0.7rem; color: #8da0b8; }

/* ── Onder de motorkap (uitklap) ── */
.motorkap { margin-top: 18px; border-top: 1px solid oklch(70% 0.02 240 / 0.12); }
.mk-head {
  width: 100%; display: flex; align-items: center; gap: 8px; cursor: pointer;
  appearance: none; border: 0; background: transparent; color: #bdeaf2; font-size: 0.92rem; font-weight: 500;
  padding: 14px 0 12px; text-align: left;
}
.mk-ico { font-size: 1rem; }
.mk-sub { color: #7c8aa3; font-weight: 400; font-size: 0.82rem; }
.mk-chev { margin-left: auto; color: #7c8aa3; transition: transform .3s ease; }
.motorkap.is-open .mk-chev { transform: rotate(180deg); }

.mk-body { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .45s ease, opacity .3s ease; }
.motorkap.is-open .mk-body { max-height: 6000px; opacity: 1; }   /* ruim genoeg voor de batterij-sectie (tabellen + voorbeelden) */
.mk-body > * { margin: 0 0 12px; }
.mk-body > *:last-child { margin-bottom: 14px; }

.mk-flow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.mk-step { display: inline-flex; align-items: center; gap: 7px; background: oklch(28% 0.02 245 / 0.7); border: 1px solid oklch(70% 0.02 240 / 0.14); border-radius: 10px; padding: 7px 11px; font-size: 0.78rem; color: #cdd5e1; }
.mk-arr { color: #5a6678; }
.mk-list { margin: 0; padding-left: 20px; color: #aeb9c9; line-height: 1.7; font-size: 0.9rem; max-width: 76ch; }
.mk-list li { margin-bottom: 8px; }
.mk-list b { color: #e7ecf3; }
.mk-sources { color: #aeb9c9; line-height: 1.7; font-size: 0.9rem; max-width: 76ch; }
.mk-sources b { color: #e7ecf3; }
.mk-stack { color: #8da0b8; font-size: 0.82rem; }

/* Links binnen de uitleg-tekst (één tint, subtiel) */
.us-lead a, .us-list a, .mk-p a, .mk-list a, .us-ref a { color: var(--uitleg); text-decoration: none; }
.us-lead a:hover, .us-list a:hover, .mk-p a:hover, .mk-list a:hover, .us-ref a:hover { text-decoration: underline; }

/* ── PRO-bouwstenen: subkop, paragraaf, inline-code, MQTT-voorbeeld, definitie-tabel, verwijzing ── */
.us-subt { margin: 16px 0 8px; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #9fb8c4; }
.us-subt:first-child { margin-top: 0; }
.mk-p { margin: 0 0 12px; color: #aeb9c9; line-height: 1.7; font-size: 0.9rem; max-width: 76ch; }
.mk-p b { color: #e7ecf3; }

/* inline-code / topic-pill — mag afbreken zodat lange topics nooit overlopen */
.uitleg-main code {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace; font-size: 0.84em;
  background: oklch(28% 0.02 245 / 0.7); border: 1px solid oklch(70% 0.02 240 / 0.14); border-radius: 6px;
  padding: 1px 6px; color: #d6e3ee; overflow-wrap: anywhere; word-break: break-word;
}

/* MQTT-voorbeeldblok (topic → payload). Scrollt horizontaal als het te breed wordt. */
.us-mqtt {
  background: oklch(14% 0.02 245 / 0.7); border: 1px solid oklch(70% 0.02 240 / 0.16);
  border-radius: 12px; padding: 11px 13px; margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; overflow-x: auto;
}
.um-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.um-dir { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 5px; flex: none; }
.um-pub { background: oklch(70% 0.13 145 / 0.18); color: #7ee0a3; }
.um-sub { background: oklch(70% 0.13 240 / 0.18); color: #8bc4f0; }
.um-topic, .um-pay { white-space: nowrap; }
.um-pay { background: oklch(30% 0.03 250 / 0.55); }
.um-note { font-size: 0.8rem; color: #8da0b8; }

/* Definitie-tabel (EMS-instellingen / Modbus-registers) */
.us-defs { margin: 0 0 14px; border: 1px solid oklch(70% 0.02 240 / 0.14); border-radius: 12px; overflow: hidden; }
.ud-row { display: grid; grid-template-columns: 210px 1fr; border-top: 1px solid oklch(70% 0.02 240 / 0.10); }
.ud-row:first-child { border-top: 0; }
.ud-row dt { margin: 0; padding: 9px 13px; font-weight: 600; color: #dfe6f0; font-size: 0.85rem; background: oklch(24% 0.02 245 / 0.4); }
.ud-row dd { margin: 0; padding: 9px 13px; color: #aeb9c9; font-size: 0.85rem; line-height: 1.55; }

/* Verwijzing-callout (bv. naar het EMS-rapport) — groen accent ipv cyaan */
.us-ref { display: flex; align-items: flex-start; gap: 11px; margin: 0 0 16px; padding: 12px 15px;
  background: oklch(70% 0.13 145 / 0.07); border: 1px solid oklch(70% 0.13 145 / 0.20); border-radius: 12px; }
.us-ref .ur-ico { font-size: 1.15rem; flex: none; line-height: 1.5; }
.us-ref p { margin: 0; font-size: 0.9rem; color: #cdd9e3; line-height: 1.6; }
.us-ref b { color: #e7ecf3; }
.us-ref a { color: #7ee0a3; }

/* ── Responsive ── */
@media (max-width: 760px) {
  .uitleg-body { grid-template-columns: 1fr; gap: 14px; }
  /* sectie-nav → horizontale chip-balk bovenaan, scrollbaar */
  .uitleg-nav { position: static; flex-direction: row; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
  .uitleg-nav a { background: oklch(20% 0.02 240 / 0.5); border: 1px solid oklch(70% 0.02 240 / 0.14); flex: none; }
}
@media (max-width: 640px) {
  .uitleg-embed { padding-left: 16px; padding-right: 16px; }
  .uitleg-section { padding: 16px; }
  .us-live-tag { display: none; }
  .us-compare { grid-template-columns: 1fr; }
  /* definitie-tabel: term boven omschrijving i.p.v. naast elkaar */
  .ud-row { grid-template-columns: 1fr; }
  .ud-row dt { padding-bottom: 2px; }
  .ud-row dd { padding-top: 4px; }
}
@media (max-width: 760px) { .us-homewrap { height: 380px; } }
@media (max-width: 420px) {
  .uitleg-title { font-size: 1.35rem; }
  .us-head h3 { font-size: 1.1rem; }
  .us-homewrap { height: 340px; }
}