/*
 * Leermodules van de Academie: radar lezen, orkaanlab, waarom-ladder, stormspotter-cursus,
 * soundings, frontenjacht, pluim, scenario-atlas, woordenlijst. Apart van style.css zodat
 * andere branches die onderaan style.css toevoegen niet botsen. Geladen via bh_leren_css().
 */

/* ------------------------------------------------------------------
   Radar lezen: velocity (includes/radar-velocity.php)
   ------------------------------------------------------------------ */
.bh-rv-steps { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.bh-rv-stepbtn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  border: 1px solid var(--bh-gray); border-radius: 999px; padding: 0.25rem 0.75rem 0.25rem 0.3rem;
  background: none; color: var(--bh-fog); font-size: 0.85rem;
}
.bh-rv-stepbtn:hover { color: var(--bh-white); border-color: var(--bh-gray-light); }
.bh-rv-stepnum {
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background-color: var(--bh-charcoal-2); color: var(--bh-white); font-weight: 700; font-size: 0.78rem;
}
.bh-rv-stepbtn.is-active { color: var(--bh-accent); border-color: var(--bh-accent); font-weight: 600; }
.bh-rv-stepbtn.is-active .bh-rv-stepnum { background-color: var(--bh-accent); color: var(--bh-on-accent); }

.bh-rv-stage { position: relative; }
.bh-rv-canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 0.75rem; touch-action: none; cursor: crosshair; }
.bh-rv-canvas:focus-visible { outline: 2px solid var(--bh-accent); outline-offset: 2px; }
.bh-rv-pause {
  position: absolute; top: 0.5rem; right: 0.5rem; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 1px solid rgba(245, 245, 246, 0.35); background-color: rgba(10, 10, 12, 0.6); color: #f5f5f6;
}
.bh-rv-scale {
  position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem;
  color: #f5f5f6; font-size: 0.72rem; text-shadow: 0 0 3px #000;
}
.bh-rv-scale i {
  flex: 1; height: 0.5rem; border-radius: 0.25rem;
  background: linear-gradient(90deg, #78ff78, #02fc02, #009600, #465f4b, #696969, #644848, #7d0f0f, #dc0000, #ff8c8c);
}
.bh-rv-controls { margin-top: 0.75rem; }
.bh-rv-controls [hidden] { display: none !important; }
.bh-rv-control { display: block; color: var(--bh-fog); font-size: 0.9rem; }
.bh-rv-control output { color: var(--bh-accent); font-weight: 600; margin-left: 0.3rem; }
.bh-rv-control input { display: block; width: 100%; margin-top: 0.3rem; accent-color: var(--bh-accent); }

.bh-rv-try { display: flex; gap: 0.5rem; color: var(--bh-white); }
.bh-rv-try .bi { color: var(--bh-accent); }
.bh-rv-trick {
  display: flex; gap: 0.6rem; padding: 0.75rem 0.9rem; border-radius: 0.6rem;
  border-left: 4px solid var(--bh-accent); background-color: var(--map-accent-soft, rgba(224, 167, 46, 0.12)); color: var(--bh-white);
}
.bh-rv-trick > .bi { color: var(--bh-accent); font-size: 1.1rem; }
.bh-rv-trick-label { display: block; color: var(--bh-accent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.bh-rv-nav { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--bh-gray); }

.bh-rv-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; margin-bottom: 0.6rem; }
.bh-rv-answer {
  border: 1px solid var(--bh-gray); border-radius: 0.5rem; padding: 0.5rem 0.7rem; text-align: left;
  background-color: var(--bh-charcoal); color: var(--bh-white); font-size: 0.9rem;
}
.bh-rv-answer:hover:not(:disabled) { border-color: var(--bh-accent); }
.bh-rv-answer.is-right { border-color: #3fae5a; background-color: rgba(63, 174, 90, 0.18); }
.bh-rv-answer.is-wrong { border-color: #e4572e; background-color: rgba(228, 87, 46, 0.16); }
.bh-rv-feedback { margin: 0 0 0.6rem; color: var(--bh-fog); }
.bh-rv-feedback.is-right::first-line, .bh-rv-feedback.is-wrong::first-line { font-weight: 600; }

.bh-rv-wheel { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0 0; }
.bh-rv-wheel canvas { width: 110px; height: 110px; flex: none; border-radius: 50%; background-color: #0f151d; }
.bh-rv-wheel figcaption { color: var(--bh-fog); font-size: 0.88rem; }
.bh-rv-cheat { margin-top: 1rem; border: 1px solid var(--bh-gray); border-radius: 0.75rem; padding: 0.75rem 1rem; }
.bh-rv-cheat summary { color: var(--bh-accent); font-weight: 600; cursor: pointer; }
.bh-rv-cheat ol { margin: 0.75rem 0 0; padding-left: 1.2rem; color: var(--bh-fog); }
.bh-rv-cheat li { margin-bottom: 0.5rem; }
.bh-rv-cheat-label { display: block; color: var(--bh-white); font-weight: 600; }
@media (max-width: 575.98px) {
  .bh-rv-answers { grid-template-columns: 1fr; }
  .bh-rv-steplabel { display: none; }
  .bh-rv-stepbtn { padding: 0.2rem; }
  .bh-rv-stepbtn.is-active .bh-rv-steplabel { display: inline; padding-right: 0.5rem; }
}

/* Radar lezen: Z, V en CC (includes/radar-casus.php) */
.bh-rc-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.bh-rc-prods { display: inline-flex; gap: 2px; padding: 2px; border-radius: 0.55rem; background-color: var(--bh-charcoal-2); }
.bh-rc-prod { border: 0; border-radius: 0.45rem; padding: 0.35rem 0.8rem; background: none; color: var(--bh-fog); font-weight: 700; font-size: 0.9rem; }
.bh-rc-prod.is-on { background-color: var(--bh-accent); color: var(--bh-on-accent); }
.bh-rc-grid { display: grid; gap: 0.6rem; }
.bh-rc-grid:not([data-view="all"]) .bh-rc-panel { display: none; }
.bh-rc-grid[data-view="Z"] [data-rc-panel="Z"], .bh-rc-grid[data-view="V"] [data-rc-panel="V"], .bh-rc-grid[data-view="CC"] [data-rc-panel="CC"] { display: block; }
.bh-rc-grid[data-view="all"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bh-rc-panel { margin: 0; }
.bh-rc-panel canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 0.6rem; touch-action: none; cursor: crosshair; }
.bh-rc-panel figcaption { margin-top: 0.3rem; color: var(--bh-fog); font-size: 0.82rem; }
.bh-rc-legend { display: flex; margin-top: 0.25rem; border-radius: 0.3rem; overflow: hidden; }
.bh-rc-legend span { flex: 1; padding: 0.1rem 0; font-size: 0.6rem; text-align: center; color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.bh-rc-grid[data-view="all"] .bh-rc-legend span:nth-child(even) { color: transparent; text-shadow: none; }
.bh-rc-quiz { margin-top: 1rem; }
.bh-rc-prodlist div { margin-bottom: 0.6rem; }
.bh-rc-prodlist dt { color: var(--bh-white); }
.bh-rc-prodlist dd { margin: 0; color: var(--bh-fog); font-size: 0.9rem; }
@media (max-width: 767.98px) {
  .bh-rc-grid[data-view="all"] { grid-template-columns: 1fr; }
  .bh-rc-grid[data-view="all"] .bh-rc-legend span:nth-child(even) { color: #fff; text-shadow: 0 0 3px #000; }
}

/* Waarom-ladder (includes/waarom.php) */
.bh-why { border: 1px solid var(--bh-gray); border-radius: 0.75rem; padding: 0.9rem 1rem; background-color: var(--bh-charcoal); }
.bh-why-claim { margin: 0 0 0.5rem; color: var(--bh-white); font-size: 1.02rem; }
.bh-why-steps { list-style: none; margin: 0; padding: 0 0 0 0.9rem; border-left: 3px solid var(--bh-accent); }
.bh-why-steps > li { position: relative; margin: 0 0 0.7rem; padding-left: 0.4rem; color: var(--bh-fog); }
.bh-why-steps > li.is-new { animation: bh-why-in 0.35s ease-out; }
@keyframes bh-why-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bh-why-steps > li.is-new { animation: none; } }
.bh-why-q { display: block; color: var(--bh-accent); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.bh-why-a { color: var(--bh-white); }
.bh-why-basis { margin-top: 0.35rem; font-size: 0.88rem; }
.bh-why-basis summary { color: var(--bh-accent); cursor: pointer; }
.bh-why-basis p { margin: 0.35rem 0 0; padding: 0.55rem 0.7rem; border-radius: 0.5rem; background-color: var(--bh-charcoal-2); color: var(--bh-fog); }
.bh-why-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.bh-why-btn { border: 0; border-radius: 999px; padding: 0.4rem 0.9rem; background-color: var(--bh-accent); color: var(--bh-on-accent); font-weight: 700; }
.bh-why-btn small { font-weight: 400; opacity: 0.8; margin-left: 0.25rem; }
.bh-why-all, .bh-why-reset { border: 0; background: none; color: var(--bh-gray-light); font-size: 0.85rem; text-decoration: underline; }
.bh-why-end { color: #3fae5a; font-weight: 600; }
.bh-why-more { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px dashed var(--bh-gray); color: var(--bh-gray-light); font-size: 0.85rem; }
.bh-why-ask { border: 1px solid var(--bh-accent); border-radius: 999px; padding: 0.2rem 0.7rem; background: none; color: var(--bh-accent); font-size: 0.85rem; }
.bh-why-ask:hover { background-color: var(--map-accent-soft, rgba(224, 167, 46, 0.12)); }
.bh-why.is-flash { box-shadow: 0 0 0 3px var(--bh-accent); transition: box-shadow 0.3s; }

/* Orkaanlab (includes/hurricane-lab.php) */
.bh-hl-views { display: grid; grid-template-columns: 420fr 520fr; gap: 0.6rem; }
.bh-hl-view { margin: 0; }
.bh-hl-view canvas { display: block; width: 100%; height: auto; border-radius: 0.6rem; background-color: #0f151d; }
.bh-hl-view figcaption { margin-top: 0.3rem; color: var(--bh-fog); font-size: 0.8rem; }
.bh-hl-key { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 0.2rem; vertical-align: -0.1rem; }
.bh-hl-key-warm { background-color: #e4572e; }
.bh-hl-key-dry { background-color: #d6a050; }
.bh-hl-key-down { background-color: #5aa8ff; }
.bh-hl-status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.75rem; }
.bh-hl-status div { padding: 0.45rem 0.6rem; border-radius: 0.5rem; background-color: var(--bh-charcoal-2); }
.bh-hl-status span { display: block; color: var(--bh-gray-light); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.bh-hl-status strong { color: var(--bh-white); font-size: 0.95rem; }
.bh-hl-graph { display: block; width: 100%; height: auto; margin-top: 0.6rem; border-radius: 0.5rem; }
.bh-hl-chains { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 0.75rem; }
.bh-hl-chain[hidden] { display: none; }
.bh-hl-chain-when { display: inline-block; margin-bottom: 0.35rem; color: var(--bh-accent); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 767.98px) {
  .bh-hl-views { grid-template-columns: 1fr; }
  .bh-hl-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Orkaanlab deel 2: fasen (includes/hurricane-phases.php) */
.bh-hp-canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 0.6rem; background-color: #0f151d; }
.bh-hp-chance { margin-top: 0.6rem; color: var(--bh-fog); font-size: 0.88rem; }
.bh-hp-bar { height: 0.6rem; margin-top: 0.3rem; border-radius: 0.3rem; background-color: var(--bh-charcoal-2); overflow: hidden; }
.bh-hp-bar i { display: block; height: 100%; width: 0; background-color: var(--bh-accent); transition: width 0.6s ease; }
.bh-hp-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.bh-hp-check li { color: var(--bh-white); }
.bh-hp-check .is-ok .bi { color: #3fae5a; }
.bh-hp-check .is-no .bi { color: #e4572e; }
.bh-hp-check .is-maybe .bi { color: #f0d43a; }

/* Orkaanlab deel 3: baan (includes/hurricane-track.php) */
.bh-ht-canvas { display: block; width: 100%; height: auto; aspect-ratio: 85 / 50; border-radius: 0.6rem; cursor: crosshair; touch-action: manipulation; }

/* Stormspotter-cursus (spottercursus.php) */
.bh-sp-lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.bh-sp-lesson { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto auto; align-items: center; gap: 0.75rem; padding: 0.75rem 0.9rem; border: 1px solid var(--bh-gray); border-radius: 0.75rem; background-color: var(--bh-charcoal); }
.bh-sp-lesson.is-done { border-color: #3fae5a; }
.bh-sp-lesson.is-soon { opacity: 0.55; }
.bh-sp-num { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background-color: var(--bh-charcoal-2); color: var(--bh-white); font-weight: 700; }
.bh-sp-lesson.is-done .bh-sp-num { background-color: #3fae5a; color: #0a0a0c; }
.bh-sp-title { color: var(--bh-white); font-weight: 600; text-decoration: none; }
a.bh-sp-title:hover { color: var(--bh-accent); }
.bh-sp-text { display: block; color: var(--bh-fog); font-size: 0.88rem; }
.bh-sp-min { color: var(--bh-gray-light); font-size: 0.82rem; white-space: nowrap; }
.bh-sp-badge { background-color: var(--bh-charcoal-2); color: var(--bh-gray-light); font-weight: 500; }
.bh-sp-done { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--bh-fog); font-size: 0.85rem; cursor: pointer; }
.bh-sp-done input { accent-color: #3fae5a; --bh-check: #3fae5a; width: 1.05rem; height: 1.05rem; }
.bh-sp-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--bh-gray); }
.bh-sp-done-big { font-size: 1rem; color: var(--bh-white); }
@media (max-width: 575.98px) {
  .bh-sp-lesson { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .bh-sp-min, .bh-sp-done { grid-column: 2; }
}
/* Gevaren, kies je weg, echt of nep */
.bh-hz-timer { padding: 0.9rem 1rem; border: 1px solid var(--bh-gray); border-radius: 0.75rem; }
.bh-hz-out.is-danger { color: #ff8a6a; font-weight: 600; }
.bh-hz-hail-svg, .bh-hz-map, .bh-cw-map { display: block; width: 100%; height: auto; border-radius: 0.6rem; background-color: #0f151d; }
.bh-hz-hail-svg text, .bh-hz-map text { fill: #f5f5f6; font-size: 11px; font-family: system-ui, sans-serif; }
.bh-hz-canvas, .bh-lk-canvas { display: block; width: 100%; height: auto; border-radius: 0.6rem; }
.bh-hz-do { margin: 0; padding-left: 1.1rem; color: var(--bh-white); }
.bh-hz-do li { margin-bottom: 0.45rem; }
.bh-cw-meter { display: flex; align-items: center; gap: 0.6rem; color: var(--bh-fog); font-size: 0.88rem; }
.bh-cw-meter .bh-hp-bar { flex: 1; margin: 0; }
.bh-cw-choices { grid-template-columns: 1fr; }

/* Soundings lezen (includes/sounding-lab.php) */
.bh-sl-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.36fr); gap: 0.5rem; }
.bh-sl-stage:not([data-step="ballon"]) { grid-template-columns: minmax(0, 1fr); }
.bh-sl-stage:not([data-step="ballon"]) .bh-sl-sky { display: none; }
.bh-sl-skewt, .bh-sl-sky { display: block; width: 100%; height: auto; border-radius: 0.6rem; touch-action: none; }
.bh-sl-stage:not([data-step="ballon"]) .bh-sl-skewt { max-width: 620px; }
.bh-sl-controls { margin-top: 0.75rem; }
.bh-sl-controls [hidden] { display: none !important; }
.bh-sl-controls .bh-rv-answers { grid-template-columns: 1fr; }
.bh-sl-sonde { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 1rem; align-items: center; }
.bh-sl-sonde[hidden] { display: none; }
.bh-sl-sonde-svg { display: block; width: 100%; height: auto; border-radius: 0.6rem; }
.bh-sl-part { cursor: pointer; }
.bh-sl-part:hover, .bh-sl-part:focus-visible, .bh-sl-part.is-active { filter: drop-shadow(0 0 6px #e0a72e); outline: none; }
.bh-sl-part-info { padding: 1rem; border: 1px solid var(--bh-gray); border-radius: 0.75rem; min-height: 8rem; }
.bh-sl-pattern { padding: 0.8rem 0.9rem; border: 1px solid var(--bh-gray); border-radius: 0.6rem; }
.bh-sl-tag { display: block; color: var(--bh-accent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 575.98px) { .bh-sl-sonde { grid-template-columns: 1fr; } }

/* Frontenjacht (includes/front-hunt.php) */
.bh-fh-canvas { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 0.6rem; cursor: crosshair; touch-action: manipulation; }
.bh-fh .bh-rv-answer { padding: 0.3rem 0.7rem; }

/* De pluim (includes/ensemble-lab.php) */
.bh-en-canvas { display: block; width: 100%; height: auto; border-radius: 0.6rem; }
.bh-en-controls [hidden] { display: none !important; }

/* Goed melden (includes/reporting.php) */
.bh-mr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.6rem; }
.bh-mr-card { display: grid; gap: 0.25rem; padding: 0.8rem 0.9rem; border: 1px solid var(--bh-gray); border-left-width: 4px; border-radius: 0.6rem; background-color: var(--bh-charcoal); }
.bh-mr-card .bi { font-size: 1.3rem; }
.bh-mr-card strong { color: var(--bh-white); }
.bh-mr-card span { color: var(--bh-fog); font-size: 0.88rem; }
.bh-mr-card.is-yes { border-left-color: #3fae5a; } .bh-mr-card.is-yes .bi { color: #3fae5a; }
.bh-mr-card.is-team { border-left-color: var(--bh-accent); } .bh-mr-card.is-team .bi { color: var(--bh-accent); }
.bh-mr-card.is-no { border-left-color: #e4572e; } .bh-mr-card.is-no .bi { color: #e4572e; }
.bh-mr-scene { padding: 0.9rem 1rem; border: 1px solid var(--bh-gray); border-radius: 0.75rem; }
.bh-mr-form { display: grid; gap: 0.6rem; }
.bh-mr-form label { display: grid; gap: 0.2rem; color: var(--bh-fog); font-size: 0.88rem; }
.bh-mr-form select, .bh-mr-form input { padding: 0.4rem 0.55rem; border: 1px solid var(--bh-gray); border-radius: 0.45rem; background-color: var(--bh-charcoal); color: var(--bh-white); }
.bh-mr-form [hidden] { display: none; }
.bh-mr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.bh-mr-report { padding: 0.7rem 0.8rem; border-radius: 0.5rem; background-color: var(--bh-charcoal-2); color: var(--bh-white); font-style: italic; }
.bh-mr-checks { list-style: none; padding: 0; margin: 0.6rem 0; display: grid; gap: 0.4rem; }
.bh-mr-checks .is-ok .bi { color: #3fae5a; } .bh-mr-checks .is-no .bi { color: #e4572e; }
.bh-mr-checks li { color: var(--bh-white); font-size: 0.92rem; }
.bh-mr-sum { color: var(--bh-accent) !important; font-weight: 600; }
.bh-mr-quote { margin: 0 0 0.8rem; padding: 0.8rem 1rem; border-left: 4px solid var(--bh-accent); background-color: var(--bh-charcoal); color: var(--bh-white); font-size: 1.05rem; }
.bh-mr-utc { font-size: 1.2rem; color: var(--bh-white); }

/* Als het misgaat (includes/chase-trouble.php) */
.bh-am-plan { list-style: none; padding: 0; margin: 0 0 0.8rem; display: grid; gap: 0.45rem; }
.bh-am-plan li { padding: 0.55rem 0.75rem; border: 1px solid var(--bh-gray); border-radius: 0.55rem; background-color: var(--bh-charcoal); }
.bh-am-plan label { display: flex; gap: 0.55rem; align-items: center; color: var(--bh-white); cursor: pointer; }
.bh-am-plan input { width: 1.1rem; height: 1.1rem; accent-color: #3fae5a; --bh-check: #3fae5a; flex: none; }
.bh-am-plan details { margin: 0.25rem 0 0 1.65rem; font-size: 0.86rem; }
.bh-am-plan summary { color: var(--bh-accent); cursor: pointer; }
.bh-am-plan details p { margin: 0.25rem 0 0; color: var(--bh-fog); }
.bh-am-rules { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.bh-am-rules li { display: flex; gap: 0.55rem; color: var(--bh-white); }
.bh-am-rules .is-good .bi { color: #3fae5a; } .bh-am-rules .is-bad .bi { color: #e4572e; }
.bh-am-verdict { padding: 0.75rem 0.9rem; border-radius: 0.6rem; background-color: var(--bh-charcoal-2); color: var(--bh-white); font-weight: 600; }
.bh-am-verdict.is-stop { background-color: rgba(228, 87, 46, 0.22); border-left: 4px solid #e4572e; }
.bh-am-verdict.is-doubt { background-color: rgba(240, 212, 58, 0.15); border-left: 4px solid #f0d43a; }
.bh-am-cheat { padding: 1rem 1.1rem; border: 2px solid var(--bh-accent); border-radius: 0.75rem; }
.bh-am-cheat li { margin-bottom: 0.3rem; color: var(--bh-white); }
@media print {
  body.bh-print-cheat * { visibility: hidden !important; }
  body.bh-print-cheat .bh-am-cheat, body.bh-print-cheat .bh-am-cheat * { visibility: visible !important; color: #000 !important; }
  html:has(body.bh-print-cheat), body.bh-print-cheat { background: #fff !important; }
  body.bh-print-cheat .bh-am-cheat { position: fixed; top: 0; left: 0; right: 0; border-color: #000; background: #fff !important; }
  body.bh-print-cheat .bh-am-noprint { display: none !important; }
}

/* Scenario-atlas (includes/scenario-atlas.php) */
.bh-sa-canvas { display: block; width: 100%; height: auto; border-radius: 0.6rem; cursor: crosshair; }
.bh-sa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 767.98px) { .bh-sa-grid { grid-template-columns: 1fr; } }
.bh-sa-box { padding: 0.9rem 1rem; border: 1px solid var(--bh-gray); border-radius: 0.75rem; background-color: var(--bh-charcoal); color: var(--bh-white); }
.bh-sa-box ul { padding-left: 1.1rem; color: var(--bh-fog); }
.bh-sa-box li { margin-bottom: 0.3rem; }
.bh-sa-meter { display: grid; grid-template-columns: 8.5rem 1fr; align-items: center; gap: 0.5rem; margin-top: 0.35rem; font-size: 0.86rem; color: var(--bh-fog); }
.bh-sa-meter i { height: 0.55rem; border-radius: 0.3rem; background-color: var(--bh-charcoal-2); overflow: hidden; }
.bh-sa-meter b { display: block; height: 100%; background: linear-gradient(90deg, #36a271, #f0d43a, #e4572e); }
.bh-sa-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; margin-top: 0.4rem; }
.bh-sa-months span { padding: 0.2rem 0; text-align: center; border-radius: 0.25rem; background-color: var(--bh-charcoal-2); color: var(--bh-gray-light); font-size: 0.75rem; font-weight: 700; }
.bh-sa-months span.is-on { background-color: var(--bh-accent); color: var(--bh-on-accent); }
.bh-sa-hz { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.bh-sa-hz span { padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.8rem; border: 1px solid var(--bh-gray); color: var(--bh-gray-light); }
.bh-sa-hz .lv-1 { color: #f0d43a; border-color: #f0d43a; }
.bh-sa-hz .lv-2 { color: #f39c34; border-color: #f39c34; }
.bh-sa-hz .lv-3 { color: #fff; border-color: #e4572e; background-color: rgba(228, 87, 46, 0.35); }

/* Woordenlijst (includes/glossary.php, woordenlijst.php, assets/js/glossary.js) */
.bh-gl-term {
  display: inline; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit;
  text-decoration: underline dotted var(--bh-accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; cursor: help;
}
.bh-gl-term:hover, .bh-gl-term[aria-expanded="true"] { color: var(--bh-accent); }
.bh-gl-term:focus-visible { outline: 2px solid var(--bh-accent); outline-offset: 2px; border-radius: 2px; }
.bh-gl-pop {
  position: absolute; z-index: 2000; padding: 0.85rem 2.2rem 0.85rem 0.95rem; border: 1px solid var(--bh-accent); border-radius: 0.7rem;
  background-color: var(--bh-charcoal); color: var(--bh-white); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); font-size: 0.92rem; line-height: 1.45;
}
.bh-gl-pop[hidden] { display: none; }
.bh-gl-pop p { margin: 0.3rem 0 0; color: var(--bh-fog); }
.bh-gl-title { color: var(--bh-white); font-size: 1rem; }
.bh-gl-trick { color: var(--bh-white) !important; }
.bh-gl-trick .bi { color: var(--bh-accent); }
.bh-gl-links { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin-top: 0.55rem; font-size: 0.85rem; }
.bh-gl-links a { color: var(--bh-accent); }
.bh-gl-close { position: absolute; top: 0.4rem; right: 0.45rem; border: 0; background: none; color: var(--bh-gray-light); }
.bh-gl-search { display: flex; align-items: center; gap: 0.6rem; max-width: 34rem; padding: 0.5rem 0.8rem; border: 1px solid var(--bh-gray); border-radius: 0.6rem; background-color: var(--bh-charcoal); }
.bh-gl-search input { flex: 1; border: 0; background: none; color: var(--bh-white); outline: none; }
.bh-gl-letters { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.bh-gl-letters a { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 0.4rem; background-color: var(--bh-charcoal-2); color: var(--bh-white); font-weight: 700; text-decoration: none; }
.bh-gl-letters a:hover { background-color: var(--bh-accent); color: var(--bh-on-accent); }
.bh-gl-group[hidden], .bh-gl-item[hidden] { display: none; }
.bh-gl-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 0.6rem; margin: 0 0 2rem; }
.bh-gl-item { padding: 0.8rem 0.95rem; border: 1px solid var(--bh-gray); border-radius: 0.65rem; background-color: var(--bh-charcoal); scroll-margin-top: 6rem; }
.bh-gl-item.is-target { border-color: var(--bh-accent); box-shadow: 0 0 0 2px var(--bh-accent); }
.bh-gl-item dt { color: var(--bh-white); font-weight: 700; }
.bh-gl-item dd { margin: 0.25rem 0 0; color: var(--bh-fog); font-size: 0.92rem; }

/* Waarschuwingen begrijpen (includes/warnings-lab.php) */
.bh-wl-codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.6rem; }
.bh-wl-code { padding: 0.8rem 0.9rem; border: 1px solid var(--bh-gray); border-top: 6px solid var(--wl-c); border-radius: 0.6rem; background-color: var(--bh-charcoal); }
.bh-wl-code strong { color: var(--bh-white); font-size: 1.05rem; }
.bh-wl-code p { margin: 0.4rem 0 0; color: var(--bh-fog); font-size: 0.9rem; }
.bh-wl-slogan { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.45rem; border-radius: 1rem; background-color: var(--wl-c); color: #111; font-size: 0.78rem; font-weight: 700; }
.bh-wl-matrix { display: grid; grid-template-columns: minmax(5.5rem, auto) repeat(3, 1fr); gap: 0.35rem; align-items: stretch; }
.bh-wl-mx-h, .bh-wl-mx-corner { display: flex; align-items: center; justify-content: center; color: var(--bh-fog); font-size: 0.82rem; text-align: center; }
.bh-wl-mx-corner { font-size: 0.72rem; }
.bh-wl-mx-cell { min-height: 3.2rem; border: 2px solid transparent; border-radius: 0.5rem; background-color: var(--wl-c); color: #111; font-weight: 700; text-transform: capitalize; opacity: 0.8; }
.bh-wl-mx-cell:hover, .bh-wl-mx-cell:focus-visible { opacity: 1; }
.bh-wl-mx-cell.is-on { opacity: 1; border-color: var(--bh-white); box-shadow: 0 0 0 2px #0a0a0c inset; }
.bh-wl-same { margin-top: 0.6rem; padding: 0.8rem 0.9rem; border: 1px solid var(--bh-gray); border-left: 6px solid var(--wl-c); border-radius: 0.6rem; color: var(--bh-fog); }
.bh-wl-badge { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 1rem; background-color: var(--wl-c); color: #111; font-weight: 700; font-size: 0.85rem; }
.bh-wl-time { display: grid; gap: 0.3rem; padding: 0.7rem; border: 1px solid var(--bh-gray); border-radius: 0.6rem; }
.bh-wl-time-axis { display: flex; justify-content: space-between; color: var(--bh-fog); font-size: 0.75rem; }
.bh-wl-time-bar { margin-left: var(--wl-from); padding: 0.15rem 0.5rem; border-radius: 0.35rem; background-color: var(--wl-c); color: #111; font-size: 0.8rem; font-weight: 700; }
.bh-wl-canvas { display: block; width: 100%; height: auto; border-radius: 0.6rem; }
.bh-wl-tally { list-style: none; padding: 0; margin: 0 0 0.8rem; font-size: 0.88rem; color: var(--bh-fog); }
.bh-wl-tally li { padding: 0.15rem 0; }
.bh-wl-tally .bh-wl-tally-sum { color: var(--bh-white); font-weight: 600; margin-bottom: 0.25rem; }
.bh-wl-tally .is-me { color: #f2d43a; font-weight: 600; }
.bh-wl-three { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.6rem; }
.bh-wl-dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 0.3rem; max-width: 20rem; margin-top: 0.6rem; }
.bh-wl-dots i, .bh-wl-key { display: inline-block; aspect-ratio: 1; border-radius: 50%; background-color: var(--bh-gray); }
.bh-wl-key { width: 0.7rem; vertical-align: -0.05rem; }
.bh-wl-dots i.is-sev, .bh-wl-key.is-sev { background-color: #dd7a1e; }
.bh-wl-dots i.is-ext, .bh-wl-key.is-ext { background-color: #9c3fb5; }
@media (prefers-reduced-motion: no-preference) { .bh-wl-dots i { transition: background-color 0.25s; } }
.bh-wl-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.5rem; }
.bh-wl-level { display: grid; gap: 0.2rem; padding: 0.6rem 0.75rem; border: 1px solid var(--bh-gray); border-left: 6px solid var(--wl-c); border-radius: 0.5rem; font-size: 0.88rem; color: var(--bh-fog); }
.bh-wl-level strong { color: var(--bh-white); }

/* Welk model wanneer? (includes/model-guide.php) */
.bh-mg-canvas { display: block; width: 100%; height: auto; border-radius: 0.6rem; }
.bh-mg-bars { display: grid; gap: 0.25rem; font-size: 0.8rem; }
.bh-mg-bar, .bh-mg-bar-axis { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.5rem; align-items: center; }
.bh-mg-bar-l { color: var(--bh-fog); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-mg-bar-t { position: relative; height: 0.7rem; border-radius: 0.35rem; background-color: var(--bh-charcoal); }
.bh-mg-bar-t i { position: absolute; inset: 0 auto 0 0; border-radius: 0.35rem; background-color: #3d7fe0; }
.bh-mg-bar.is-out .bh-mg-bar-l { opacity: 0.45; } .bh-mg-bar.is-out .bh-mg-bar-t i { background-color: var(--bh-gray); }
.bh-mg-bar.is-rec .bh-mg-bar-l { color: var(--bh-accent); font-weight: 700; } .bh-mg-bar.is-rec .bh-mg-bar-t i { background-color: var(--bh-accent); }
.bh-mg-bar-axis .bh-mg-bar-t { height: 1.4rem; background: none; }
.bh-mg-bar-axis em { white-space: nowrap; position: absolute; top: 0.2rem; transform: translateX(-50%); color: var(--bh-fog); font-style: normal; font-size: 0.72rem; }
.bh-mg-bar-axis b { position: absolute; bottom: 1.5rem; width: 2px; height: 16rem; max-height: 100vh; background-color: var(--bh-white); pointer-events: none; }
.bh-mg-bars { position: relative; overflow: hidden; }
.bh-mg-chip { display: inline-block; margin: 0.1rem 0.15rem 0.1rem 0; padding: 0.05rem 0.5rem; border-radius: 1rem; background-color: var(--bh-accent); color: #111; font-weight: 600; font-size: 0.82rem; }
.bh-mg-traps { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.6rem; }
.bh-mg-traps summary { cursor: pointer; }
.bh-mg-traps p { margin: 0.5rem 0 0; color: var(--bh-fog); font-size: 0.9rem; }

/* Red sprites en TLE's (includes/sprites-lab.php) */
.bh-tle-canvas { display: block; width: 100%; height: auto; border-radius: 0.6rem; }
.bh-tle-facts { list-style: none; padding: 0; margin: 0 0 0.8rem; font-size: 0.88rem; color: var(--bh-fog); }
.bh-tle-facts li { padding: 0.15rem 0; }
.bh-tle-facts strong { color: var(--bh-white); }
.bh-tle-check { display: grid; gap: 0.45rem; }
.bh-tle-check label { display: flex; gap: 0.5rem; align-items: flex-start; color: var(--bh-fog); font-size: 0.92rem; }
.bh-tle-check input { margin-top: 0.25rem; accent-color: var(--bh-accent); }
.bh-tle-meter { height: 0.7rem; border-radius: 0.35rem; background-color: var(--bh-charcoal); overflow: hidden; }
.bh-tle-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8a7dff, #ff3b5c); }
@media (prefers-reduced-motion: no-preference) { .bh-tle-meter i { transition: width 0.3s; } }

/* Radarvormen + één radar (includes/radar-shapes.php) */
.bh-rf-canvas { display: block; width: 100%; height: auto; border-radius: 0.6rem; cursor: default; }
[data-rf-canvas="radar"] { cursor: crosshair; }
.bh-rf-scale { height: 0.45rem; margin-top: 0.35rem; border-radius: 0.25rem; }
.bh-rf-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.6rem 1rem; margin-top: 0.7rem; align-items: end; }
.bh-rf-facts { list-style: none; padding: 0; margin: 0 0 0.8rem; font-size: 0.88rem; color: var(--bh-fog); }
.bh-rf-facts li { padding: 0.15rem 0; }
.bh-rf-facts strong { color: var(--bh-white); }

/* Satelliet lezen (includes/satellite-lab.php) */
.bh-sat-canvas { display: block; width: 100%; height: auto; border-radius: 0.6rem; }
.bh-sat-controls { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin-top: 0.6rem; }
.bh-sat-legend { position: relative; height: 0.5rem; margin: 1.4rem 0 0.4rem; border-radius: 0.25rem; }
.bh-sat-legend::before, .bh-sat-legend::after { position: absolute; top: -1.2rem; color: var(--bh-fog); font-size: 0.75rem; }
.bh-sat-legend::before { content: attr(data-left); left: 0; }
.bh-sat-legend::after { content: attr(data-right); right: 0; }
.bh-sat-feat { padding-left: 1.1rem; color: var(--bh-fog); }
.bh-sat-feat strong { color: var(--bh-white); }
.bh-sat-signs { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.6rem; }
.bh-sat-real { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 0.8rem; }
/* Vind de tops (satelliet) */
.bh-sat-ot-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.5rem; }
.bh-sat-ot-wrap { overflow: auto; border-radius: 0.6rem; background-color: #000; max-height: 75vh; }
.bh-sat-ot-stage { position: relative; width: 100%; cursor: crosshair; user-select: none; touch-action: manipulation; }
.bh-sat-ot-wrap.is-zoom .bh-sat-ot-stage { width: 220%; }
.bh-sat-ot-stage img { display: block; width: 100%; height: auto; }
.bh-sat-ot-marks { position: absolute; inset: 0; pointer-events: none; }
.bh-sat-ot-mark { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 3px solid; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7); }
.bh-sat-ot-mark b { position: absolute; left: 30px; top: 2px; white-space: nowrap; color: #fff; font-size: 0.72rem; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.bh-sat-ot-mark.is-hit { border-color: #3fae5a; }
.bh-sat-ot-mark.is-extra { border-color: #5aa8ff; width: 18px; height: 18px; margin: -9px 0 0 -9px; }
.bh-sat-ot-mark.is-miss { border-color: #e4572e; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 3px; transform: rotate(45deg); }
.bh-sat-ot-mark.is-missed { border-color: #f2d43a; border-style: dashed; }
.bh-sat-ot-mark.is-cold { border-color: #fff; width: 38px; height: 38px; margin: -19px 0 0 -19px; }
.bh-sat-ot-log { list-style: none; padding: 0; margin: 0 0 0.6rem; }
.bh-sat-ot-log li { padding: 0.2rem 0; color: var(--bh-fog); }
.bh-sat-ot-log li:first-child { color: var(--bh-white); font-weight: 600; }
.bh-sat-ot-log li.is-hit:first-child { color: #6fd08a; } .bh-sat-ot-log li.is-miss:first-child { color: #ff8a6a; } .bh-sat-ot-log li.is-extra:first-child { color: #8cc4ff; }
.bh-sat-ot-mark.is-cold b { left: 50%; top: -20px; transform: translateX(-50%); }

/* De weg zelf (includes/road-safety.php) */
.bh-rs-canvas { display: block; width: 100%; height: auto; border-radius: 0.6rem; }
.bh-rs-status { list-style: none; padding: 0; margin: 0.4rem 0 0.8rem; }
.bh-rs-status li { padding: 0.35rem 0.6rem; margin-bottom: 0.3rem; border-left: 4px solid var(--bh-gray); border-radius: 0.35rem; background-color: rgba(255, 255, 255, 0.03); color: var(--bh-fog); font-size: 0.9rem; }
.bh-rs-status li.is-ok { border-left-color: #3fae5a; } .bh-rs-status li.is-warn { border-left-color: #f2d43a; } .bh-rs-status li.is-bad { border-left-color: #e4572e; color: var(--bh-white); }
.bh-rs-status li.is-info { border-left-color: var(--bh-accent); color: var(--bh-accent); font-weight: 700; }
.bh-rs-big { font-size: 1.05rem; color: var(--bh-white); }
.bh-rs-tired { display: grid; gap: 0.4rem; }
.bh-rs-tired label { display: flex; gap: 0.5rem; color: var(--bh-fog); font-size: 0.92rem; }
.bh-rs-tired input { accent-color: var(--bh-accent); margin-top: 0.25rem; }

/* Hoe laat is de bui hier? (includes/storm-eta.php) */
.bh-eta-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.bh-eta-clock { color: var(--bh-white); font-weight: 700; font-variant-numeric: tabular-nums; }
.bh-eta-stage { position: relative; cursor: crosshair; border-radius: 0.6rem; overflow: hidden; user-select: none; }
.bh-eta-stage img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.bh-eta-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Buiten bij onweer (includes/outdoor-storm.php) */
.bh-out-places { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.45rem; }
.bh-out-place { display: grid; justify-items: center; gap: 0.2rem; padding: 0.6rem 0.4rem; border: 1px solid var(--bh-gray); border-radius: 0.6rem; background-color: var(--bh-charcoal); color: var(--bh-fog); font-size: 0.85rem; }
.bh-out-place .bi { font-size: 1.4rem; color: var(--bh-accent); }
.bh-out-place.is-active, .bh-out-place:hover { border-color: var(--bh-accent); color: var(--bh-white); }
.bh-out-done { padding-left: 1.2rem; color: var(--bh-fog); font-size: 0.9rem; }
.bh-out-done li { margin-bottom: 0.4rem; } .bh-out-done strong { color: var(--bh-white); display: block; }
.bh-out-done li.is-after { list-style: none; margin-left: -1.2rem; padding: 0.4rem 0.6rem; border-left: 3px solid var(--bh-accent); background-color: rgba(224, 167, 46, 0.08); border-radius: 0.35rem; }

/* Na de storm, nachtchasen, drones (includes/practice-more.php) */
.bh-after-scene { position: relative; cursor: crosshair; border-radius: 0.6rem; overflow: hidden; user-select: none; }
.bh-after-svg { display: block; width: 100%; height: auto; }
.bh-after-marks { position: absolute; inset: 0; pointer-events: none; }
.bh-after-list { padding-left: 1.1rem; color: var(--bh-fog); }
.bh-after-list li { margin-bottom: 0.4rem; } .bh-after-list strong { color: var(--bh-white); }
.bh-after-list li.is-done { list-style: none; margin-left: -1.1rem; color: #6fd08a; font-weight: 600; }

/* Echte radar (includes/radar-real.php) */
.bh-real-grid { display: grid; gap: 0.4rem; }
.bh-real-grid.is-all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bh-real-fig { position: relative; border-radius: 0.5rem; overflow: hidden; cursor: crosshair; user-select: none; }
.bh-real-fig img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.bh-real-lab { position: absolute; left: 0.4rem; top: 0.3rem; padding: 0.05rem 0.4rem; border-radius: 0.3rem; background-color: rgba(10, 10, 12, 0.7); color: var(--bh-white); font-size: 0.75rem; font-weight: 700; }
.bh-real-read { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2rem 0.8rem; color: var(--bh-fog); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.bh-real-read b { color: var(--bh-white); }

/* /academie/interactief: kaarten per groep */
.bh-ia-group { margin-bottom: 3rem; scroll-margin-top: 5rem; }
.bh-ia-card-eyebrow { display: block; margin-bottom: 0.15rem; color: var(--bh-accent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.bh-ia-card-meta { display: block; margin-top: 0.5rem; color: var(--bh-gray-light); font-size: 0.8rem; opacity: 0.85; }
@media (max-width: 575.98px) {
  .bh-ia-jump { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.3rem; margin-inline: -0.75rem; padding-inline: 0.75rem; scrollbar-width: thin; }
  .bh-ia-jump .bh-pub-filter { flex-shrink: 0; }
}