/* ============================================================================
   format.css — HET gedeelde bwired-paginaformat (STANDARD-FORMAT.md als code).
   Gloed-achtergrond, uniforme kop (icoon op 220 · titel 1.6rem · top 46) en de
   twee glas-varianten. Was per pagina gekopieerd (zon/ems/uitleg/records);
   hier staat het één keer. Pagina's houden alleen hun eigen accentkleur,
   afwijkende marges/align en paddings.

   Nieuwe pagina toevoegen:
     1. tint-vars hieronder + de ::before-selector aan de lijst;
     2. eigen headbar/title-selector aan de kop-lijsten;
     3. accent + marges in de pagina-css.

   Laadvolgorde (page.html): NA menu.css, VÓÓR de pagina-css — zodat een
   pagina gericht kan overriden. NB: de EMS-glas-cards houden hun eigen
   !important-blok in menu.css (die override't het ingebedde 3090-dashboard).
   ========================================================================== */

/* ── 1) Gloed-tinten per pagina (alleen de kleuren; skelet staat eronder) ── */
body[data-page="zon"],
body[data-page="ems"],
body[data-page="ems-rapport"] {
  --glow-top: oklch(36% 0.080 240); --glow-corner: oklch(28% 0.090 280); --glow-corner-x: 80%;
}
body[data-page="uitleg"]  { --glow-top: oklch(36% 0.070 220); --glow-corner: oklch(28% 0.080 260); --glow-corner-x: 85%; }
body[data-page="records"] { --glow-top: oklch(34% 0.060 75);  --glow-corner: oklch(27% 0.070 260); --glow-corner-x: 85%; }

/* ── 2) Gloed-skelet: éénmalig, náást de rail ── */
body[data-page="zon"]::before,
body[data-page="ems"]::before,
body[data-page="ems-rapport"]::before,
body[data-page="uitleg"]::before,
body[data-page="records"]::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%, var(--glow-top) 0%, transparent 55%),
    radial-gradient(80% 60% at var(--glow-corner-x) 100%, var(--glow-corner) 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="zon"]::before,
  body[data-page="ems"]::before,
  body[data-page="ems-rapport"]::before,
  body[data-page="uitleg"]::before,
  body[data-page="records"]::before { left: 0; }
}

/* ── 3) Uniforme kop (pagina houdt alleen align-items, onder-marge en kleur) ── */
.zon-headbar, .ems-embed .ems-headbar, .uitleg-headbar, .records-headbar {
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: 10px 16px; padding: 0 0 8px;
}
.zon-hero-title, .ems-embed .ems-headbar h1.ems-hero-title, .uitleg-title, .records-title {
  margin: 0; font-size: 1.6rem; font-weight: 600; line-height: 1.2;
  display: inline-flex; align-items: center; gap: 9px;
}
/* Titel-icoon: vaste breedte 1.5rem + gap 9px → de titeltekst start op elke
   pagina op exact dezelfde x (Davis-referentie: icoon 220, tekst 253). */
.head-ico { flex: none; width: 1.5rem; text-align: center; font-size: 1.3rem; line-height: 1; }

/* ── 4) Glas-varianten ── */
/* a) 'Davis'-cards (zon-pagina) */
.zon-card, .zon-chart, .zon-panelsnow {
  background: oklch(20% 0.020 240 / 0.62); border: 1px solid oklch(70% 0.020 240 / 0.18);
  border-radius: 14px; padding: 18px; min-width: 0;
  backdrop-filter: blur(14px) saturate(135%); -webkit-backdrop-filter: blur(14px) saturate(135%);
}
/* b) Sectie-panelen (uitleg/records; padding blijft per pagina) */
.uitleg-section, .rec-section {
  background: oklch(20% 0.020 240 / 0.55); border: 1px solid oklch(70% 0.020 240 / 0.16);
  border-radius: 16px; margin-bottom: 18px; min-width: 0;
  backdrop-filter: blur(14px) saturate(135%); -webkit-backdrop-filter: blur(14px) saturate(135%);
}