/* Eigen opmaak van deze site. De gedeelde regels staan in css/base.css, css/les.css, css/kaarten.css,
   css/intel-drone.css (bron: shared/files/, verspreid met node shared/sync.mjs); die laden vóór dit bestand. */
/* ============================================================
   Intel Academy — "intel ops" thema
   Donker leisteenblauw met steel-blue/amber accenten
   Gebaseerd op het designsysteem van de VKS/EW-academies
   ============================================================ */

:root {
  --bg:          #0a0d12;
  --bg-panel:    #11161e;
  --bg-raised:   #171f2a;
  --bg-hover:    #1d2735;
  --border:      #283546;
  --border-soft: #1c2632;
  --text:        #dbe3ec;
  --text-dim:    #93a1b3;
  --text-faint:  #61708a;
  --accent:      #4da3ff;   /* steel blue */
  --accent-dim:  #2f77c2;
  --accent-bg:   rgba(77, 163, 255, 0.09);
  --amber:       #e8b04a;
  --amber-bg:    rgba(232, 176, 74, 0.09);
  --steel:       #46c188;   /* groen voor kernpunten */
  --danger:      #ff6b6b;
  --ok:          #4ac98a;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --topbar-h: 56px;
  --sidebar-w: 320px;
}

body {
  margin: 0;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 60% at 75% -10%, rgba(77, 163, 255, 0.06), transparent),
    radial-gradient(ellipse 60% 50% at 10% 0%, rgba(70, 193, 136, 0.04), transparent);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
}

/* Notitie / waarschuwing / voorbeeld / kernpunt */
.note { background: var(--accent-bg); border: 1px solid rgba(77,163,255,0.25); }

/* ============================================================
   IPB-PROCESSCHEMA (interactieve SVG)
   ============================================================ */

.flow-modebar { display: flex; margin-bottom: 12px; }
.flow-mode-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.flow-mode-btn { background: var(--bg-panel); border: none; border-right: 1px solid var(--border); color: var(--text-dim); padding: 8px 16px; cursor: pointer; font-size: 13px; font-family: var(--sans); }
.flow-mode-btn:last-child { border-right: none; }
.flow-mode-btn:hover { background: var(--bg-hover); color: var(--text); }
.flow-mode-btn.active { background: var(--accent-bg); color: var(--accent); font-weight: 600; }

.flow-arrow-web { stroke: var(--steel); stroke-width: 1.6; fill: none; opacity: 0.75; }
.flow-arrow-break { stroke: var(--danger); stroke-width: 2; stroke-dasharray: 4 4; fill: none; }
.flow-break-mark { fill: var(--danger); font-size: 15px; font-weight: 700; }
.flow-break-note { fill: var(--danger); font-family: var(--mono); font-size: 10.5px; }
.flow-web-note { fill: var(--steel); font-family: var(--mono); font-size: 10.5px; }

/* ============================================================
   ENGAGEMENT-ZONE-WIDGET (§5.1.4)
   ============================================================ */
.ez-controls { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 12px; }
.ez-ctrl-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ez-ctrl-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.ez-stage { max-width: 900px; }
.ez-band { stroke-width: 1.5; }
.ez-band-fez { fill: rgba(77,163,255,0.14); stroke: var(--accent-dim); }
.ez-band-himez { fill: rgba(232,176,74,0.14); stroke: var(--amber); }
.ez-band-lomez { fill: rgba(232,176,74,0.08); stroke: rgba(232,176,74,0.5); }
.ez-band-shoradez { fill: rgba(255,107,107,0.14); stroke: var(--danger); }
.ez-band-label { fill: var(--text); font-family: var(--mono); font-size: 12.5px; font-weight: 600; }
.ez-boundary { stroke: var(--danger); stroke-width: 2; stroke-dasharray: 6 4; }
.ez-gap-label { fill: var(--danger); font-family: var(--mono); font-size: 10.5px; }
.ez-jez-overlay { fill: rgba(70,193,136,0.12); stroke: var(--steel); stroke-width: 1.8; }
.ez-jez-label { fill: var(--steel); font-family: var(--mono); font-size: 10.5px; }
.ez-ground { stroke: var(--border-soft); stroke-width: 2; }
.ez-asset { fill: none; stroke: var(--text-dim); stroke-width: 2; }
.ez-asset-label { fill: var(--text-faint); font-family: var(--mono); font-size: 10.5px; }
.ez-checklist { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 12px; padding: 12px 16px; background: var(--accent-bg); border: 1px solid var(--accent-dim); border-radius: 10px; }
.ez-check-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.ez-check-mark { color: var(--steel); font-weight: 700; }

/* ============================================================
   REFERENTIEKAARTEN (galerij + modal)
   ============================================================ */

.t-frame .thr-badge { background: rgba(77,163,255,0.16); color: var(--accent); border-color: rgba(77,163,255,0.3); }

/* kaart-modal */

.t-frame .ts-badge { background: rgba(77,163,255,0.18); color: var(--accent); border: 1px solid var(--accent-dim); }

/* ============================================================
   Speelbaar scenario (ch9 §9.5) — Operatie IJZEREN WIG
   ============================================================ */
.scen-wrap { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 18px 0; }
@media (min-width: 900px) { .scen-wrap { grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); align-items: start; } }
.scen-panel { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; }
.scen-title { margin: 0 0 8px; font-size: 17px; color: var(--accent); }
.scen-meta { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--text-dim); margin-bottom: 8px; }
.scen-step { color: var(--accent); }
.scen-ph-title { margin: 0 0 8px; font-size: 16px; }
.scen-brief { color: var(--text-dim); font-size: 14px; margin: 0 0 12px; }
.scen-q { font-weight: 600; font-size: 15px; margin: 0 0 12px; }
.scen-opts { display: grid; gap: 9px; }
.scen-opt { text-align: left; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: inherit; font-size: 14px; padding: 11px 14px; cursor: pointer; transition: border-color .12s, background .12s; }
.scen-opt:hover:not(:disabled) { border-color: var(--accent-dim); background: var(--bg-hover); }
.scen-opt:disabled { cursor: default; opacity: 0.9; }
.scen-opt.is-best { border-color: var(--ok); background: rgba(74,201,138,0.12); }
.scen-opt.is-chosen { border-color: var(--danger); background: rgba(255,107,107,0.10); }
.scen-fb { margin-top: 14px; font-size: 13.5px; line-height: 1.55; padding: 11px 14px; border-radius: 8px; }
.scen-fb.fb-ok { background: rgba(74,201,138,0.12); color: #a6e6c6; }
.scen-fb.fb-mid { background: var(--amber-bg); color: #f0cd8f; }
.scen-fb.fb-no { background: rgba(255,107,107,0.10); color: #f2a8a8; }
.scen-fb strong { font-family: var(--mono); }
.scen-actions { margin-top: 14px; text-align: right; }
.scen-btn { font-family: var(--mono); font-size: 13px; letter-spacing: 0.03em; background: var(--accent); color: #04121f; border: none; border-radius: 8px; padding: 10px 20px; cursor: pointer; font-weight: 600; }
.scen-btn:hover { background: #6fb6ff; }
.scen-map { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px; padding: 10px; position: sticky; top: 12px; }
.scen-map-cap { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); text-align: center; margin-top: 6px; letter-spacing: 0.03em; }
.scen-svg { width: 100%; height: auto; display: block; }
/* map elements */
.scen-sea { fill: #0c1a26; }
.scen-coast { fill: none; stroke: #2a3f52; stroke-width: 2; }
.scen-land { fill: #12202a; stroke: #24384a; stroke-width: 1.5; }
.scen-border { stroke: #3a5f8a; stroke-width: 1.5; stroke-dasharray: 6 5; }
.scen-passage { fill: rgba(77,163,255,0.08); stroke: var(--accent-dim); stroke-width: 1; stroke-dasharray: 4 4; }
.scen-ai { fill: none; stroke: var(--text-faint); stroke-width: 1.2; stroke-dasharray: 3 6; opacity: 0.7; }
.scen-himez { fill: rgba(255,107,107,0.07); stroke: var(--danger); stroke-width: 1.5; }
.scen-himez-iso { fill: rgba(255,107,107,0.05); stroke-dasharray: 5 4; }
.scen-lomez { fill: rgba(232,176,74,0.09); stroke: var(--amber); stroke-width: 1.3; }
.scen-shorad { fill: rgba(255,107,107,0.14); stroke: #ff9a9a; stroke-width: 1; }
.scen-web { stroke: #6f86a0; stroke-width: 1.4; stroke-dasharray: 4 3; opacity: 0.8; }
.scen-gap { fill: none; stroke: var(--ok); stroke-width: 2.5; stroke-dasharray: 8 5; }
.scen-strike { fill: none; stroke-width: 3; }
.scen-strike-ok { stroke: var(--ok); }
.scen-strike-bad { stroke: var(--danger); stroke-dasharray: 7 5; }
.scen-arrow-ok-fill { fill: var(--ok); }
.scen-arrow-bad-fill { fill: var(--danger); }
.scen-node rect { fill: #2a3f52; stroke: #7fa8d0; stroke-width: 1.5; }
.scen-node polygon { fill: #2f4a3a; stroke: #6fc79a; stroke-width: 1.5; }
.scen-gci circle { fill: #3a2c1a; stroke: var(--amber); stroke-width: 2; }
.scen-gci.scen-hvt circle:first-child { fill: #4a1f1f; stroke: var(--danger); stroke-width: 2.5; }
.scen-hvt-ring { fill: none; stroke: var(--danger); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: 0.85; }
.scen-lbl { fill: var(--text); font-size: 13px; font-family: var(--mono); }
.scen-lbl-dim { fill: var(--text-faint); font-size: 11px; font-family: var(--mono); }
.scen-lbl-himez { fill: #f2a8a8; font-size: 11px; font-family: var(--mono); }
.scen-lbl-jam { fill: var(--ok); font-size: 11px; font-family: var(--mono); }
.scen-lbl-gap { fill: var(--ok); font-size: 11px; font-family: var(--mono); }
.scen-lbl-hvt { fill: var(--danger); font-size: 11.5px; font-family: var(--mono); font-weight: 600; }
.scen-note { fill: var(--amber); font-size: 11px; font-family: var(--mono); }
/* debrief */
.scen-score-big { font-size: 18px; font-weight: 600; color: var(--accent); margin: 6px 0 12px; }
.scen-scats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.scen-scat { background: var(--bg-panel); border-radius: 8px; padding: 8px 12px; flex: 1; min-width: 90px; }
.scen-scat-lbl { display: block; font-size: 11px; color: var(--text-dim); }
.scen-scat-val { display: block; font-size: 17px; font-weight: 600; font-family: var(--mono); }
.scen-verdict { font-size: 14px; color: var(--text); font-weight: 500; }
.scen-debrief-list { font-size: 14px; line-height: 1.6; }
.scen-refs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.scen-ref { font-size: 12.5px; background: var(--accent-bg); color: var(--accent); padding: 5px 11px; border-radius: 20px; text-decoration: none; }
.scen-ref:hover { background: rgba(77,163,255,0.18); }

/* Scenario fase 2 — tegenstander-reacties */
.scen-react { margin-top: 10px; font-size: 13px; line-height: 1.5; padding: 10px 14px; border-radius: 8px; font-weight: 500; }
.scen-react.react-bad { background: rgba(255,107,107,0.12); color: #f2a8a8; border-left: 3px solid var(--danger); }
.scen-react.react-ok { background: rgba(74,201,138,0.12); color: #a6e6c6; border-left: 3px solid var(--ok); }
.scen-lomez.scen-active { fill: rgba(232,176,74,0.18); stroke-width: 2; }
.scen-lbl-alert { fill: var(--danger); font-size: 12px; font-family: var(--mono); font-weight: 600; letter-spacing: 0.05em; }