/* TactiScene — gedeelde editor-shell stylesheet (M2, Presentatie → Bewerken als leidende
   authoringomgeving). ÉÉN bron voor de rijke veldeditor die speelwijze.html én presentatie.html
   delen: app-grid, kopbalk, linker-/rechterpaneel, tabrail, veld (pitch), tokens, lijnen,
   handles/grepen/+, waypoints, pass-greep, Acties-band, tijdlijn, Focus/Fullscreen, DEV-paneel.
   Laadvolgorde in beide shells: presentation-theme.css → editor-shell.css → (alleen shell-
   specifieke regels inline, bv. presentatie.html .dia-*). Verplaats hier alléén regels die
   werkelijk door beide shells gedeeld worden; shell-specifieke styling blijft in de shell. */

:root{
  /* Stijl C (PO-akkoord): app-chroom in de rustige Spelers-taal van de centrale shell — vlak
     nachtblauw, koele lijnen. Alleen chroom: Stage/veld/teams/lijnen/zones, dia-achtergronden en
     Presenteren lezen hun eigen --theme-* tokens en veranderen niet.
     Rustiger kleur (PO 2026-10-28): het bedieningsaccent (knoppen, tabs, selectie, focus) is rustig
     blauw — hetzelfde blauw als spelerselectie (--theme-selection) — en draagt geen betekenis. Groen
     blijft alleen voor het merkteken (--brand-*) en voor inhoud op de Stage (--content-accent). */
  --bg:#0b0e13; --raised:#0f141b; --card:#121821; --input:#0c1214;
  --panel:rgba(150,166,186,.06); --brd:rgba(90,120,160,.30); --brd-2:rgba(110,140,180,.38);
  --ink:#eef1f6; --ink-dim:#9aa6b6; --ink-faint:rgba(238,241,246,.42);
  --accent:#84b9ef; --accent-ink:#cfe0f5; --accent-soft:rgba(132,185,239,.10); --accent-line:#556f93; --accent-hover:rgba(132,185,239,.16);
  --brand-ink:#8fe9c1; --brand-soft:rgba(72,213,151,.12); --brand-line:#2f7d5b;
  --content-accent:#48d597; /* opgeslagen inhoud (tekstkolom "accent") behoudt haar kleur */
  /* Betekenisvol amber (geen chroom): wijziging/opslaan bezig, waarschuwing/ontbrekend,
     uitzondering, en de bewerkingshulpen die IN het veld getekend worden (padconcept/-vervolg,
     stapverschil). Bewust niet mee naar groen. */
  --amber:#f2b03e;
  --tech:#5ec6c0; --good:#7bd88f; --bad:#e0764f;
  --f-ui:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  /* Motion (v0.65.111, motion.mjs): vier duren en twee curves — de hele UI-motiontaal. Geen
     effectcatalogus. Tactische animatie (ADR-0035) heeft haar eigen tijd en gebruikt deze niet. */
  --motion-micro:140ms; --motion-small:220ms; --motion-medium:360ms; --motion-large:600ms;
  --motion-ease:cubic-bezier(.4,0,.2,1); --motion-ease-out:cubic-bezier(.2,0,0,1);
}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);overflow:hidden}
/* §1/§5 ROOT CAUSE: 100vh is the LARGE viewport on Android (excludes retractable browser chrome),
   so the app was taller than the visible area and the bottom timeline fell below the fold / behind
   the system bar. Use the ACTUAL visible height: --app-h (set from window.visualViewport by JS) with
   a 100dvh fallback and 100vh last resort. safe-area-inset-bottom keeps content above the system bar. */
.app{display:grid;grid-template-rows:auto 1fr;min-height:0;height:100vh;height:100dvh;height:var(--app-h,100dvh);
  padding-bottom:env(safe-area-inset-bottom,0px)}
.top{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--brd);background:var(--raised)}
.brand{display:flex;align-items:center;gap:9px;font-weight:800}
/* Appbrede versie-indicator (één canonieke bron): compact en niet-storend in de kopbalk. */
.app-version{margin-left:8px;align-self:center;flex:0 0 auto;font-size:.7rem;font-weight:600;color:var(--muted,#9aa6b6);opacity:.82;font-variant-numeric:tabular-nums;letter-spacing:.02em}
a.brand{color:inherit;text-decoration:none;cursor:pointer}
.brand .b{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--brand-soft);border:1px solid var(--brand-line);color:var(--brand-ink);font-weight:800}
.naam{font-size:13px;color:var(--ink-dim)}
.status{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-dim);background:var(--panel);border:1px solid var(--brd);border-radius:999px;padding:6px 12px}
.status .dot{width:8px;height:8px;border-radius:50%;background:var(--good)}
.status.dirty .dot{background:var(--amber)}.status.error .dot{background:var(--bad)}
.offline{font-size:11px;font-weight:600;color:var(--good);border:1px solid rgba(123,216,143,.4);background:rgba(123,216,143,.1);border-radius:999px;padding:6px 11px}
.offline[hidden]{display:none}
.top button{font:inherit;font-size:12px;font-weight:600;color:var(--ink);background:transparent;border:1px solid var(--brd);border-radius:9px;padding:10px 13px;min-height:40px;cursor:pointer;touch-action:manipulation}
.top button:hover{color:var(--ink);border-color:var(--brd-2);background:var(--panel)}
/* Stijl C: één zichtbare focusring voor het chroom (0-specificiteit: bestaande ringen blijven winnen). */
:where(button,a,select,summary):focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* §4 HARD INVARIANT: the field always keeps a real, non-zero track. Collapsing a side
   panel only changes its TRACK WIDTH (a CSS var) — we never display:none a grid item,
   because removing an item shifts the field onto a neighbouring (possibly 0px) track.
   The field track is minmax(0,1fr) so it absorbs slack and never causes horizontal
   overflow. */
.body{display:grid;grid-template-columns:var(--left-w,210px) minmax(0,1fr) var(--right-w,300px);min-height:0}
@media (max-width:1100px){.body{--left-w:184px;--right-w:268px}}
.col{min-height:0;overflow:auto}
.col.left{border-right:1px solid var(--brd);padding:8px}
.stage{padding:12px;min-width:0}
/* §2/§6: right column = narrow vertical tabrail + collapsible content panel. */
.col.right{border-left:1px solid var(--brd);padding:0;overflow:hidden}
#workspace{display:flex;flex-direction:row}
/* §6/§15: collapse via track width only; the panel stays a grid item (clipped at 0). */
.body.left-collapsed{--left-w:0px}
.body.left-collapsed .col.left{overflow:hidden;border:0;padding:0}
.body.right-collapsed{--right-w:48px}
.body.right-collapsed .tabpanel{display:none}
/* Tablet/narrow safety: shrink the side tracks a bit so the field keeps room; the field
   track (minmax 0,1fr) still absorbs the rest and never overflows. */
@media (max-width:900px){.body{--left-w:168px;--right-w:236px}.body.left-collapsed{--left-w:0px}.body.right-collapsed{--right-w:48px}}


/* Tablet in portret blijft ondersteund: de dia's blijven naast het veld zichtbaar; alleen het
   diepere gereedschap schuift tijdelijk over de Stage. Zo hoeft de veldkolom niet onder zijn
   bruikbare minimum te krimpen en ontstaat geen horizontale pagina-scroll. */
@media (orientation:portrait) and (min-width:768px) and (max-width:820px){
  body.presentation-host .top{gap:8px;padding:6px 10px;min-width:0}
  body.presentation-host .top .naam,body.presentation-host .top .status,body.presentation-host .top .offline,
  body.presentation-host .top #selectAllBtn{display:none}
  body.presentation-host .top #presentBtn{margin-left:auto}
  body.presentation-host .top button{min-width:44px;min-height:44px;padding:7px 10px}
  body.presentation-host .body{position:relative;grid-template-columns:160px minmax(0,1fr);overflow:hidden}
  body.presentation-host .body.left-collapsed{grid-template-columns:0 minmax(0,1fr)}
  body.presentation-host .col.stage{grid-column:2;grid-row:1;padding:8px;overflow:hidden}
  body.presentation-host .body.left-collapsed .col.stage{grid-column:2}
  body.presentation-host #workspace{display:flex;position:fixed;z-index:45;right:max(0px,env(safe-area-inset-right,0px));top:57px;bottom:env(safe-area-inset-bottom,0px);
    width:min(78vw,340px);background:var(--card);border:1px solid var(--brd-2);border-right:0;box-shadow:-14px 0 34px rgba(0,0,0,.5);
    transform:translateX(0);transition:transform var(--motion-small) var(--motion-ease-out)}
  body.presentation-host .body.right-collapsed #workspace{display:flex;width:min(78vw,340px);transform:translateX(calc(100% - 48px));box-shadow:none}
  body.presentation-host .body.right-collapsed #workspace .tabpanel{display:none}
  body.presentation-host .tabbtn{min-height:44px}
  body.presentation-host .tabrail .tab-collapse:is(button){min-height:44px}
}

#leftToggle{font-size:16px;line-height:1;padding:9px 12px}
#leftToggle[aria-pressed="false"]{color:var(--accent-ink);border-color:var(--accent-line);background:var(--accent-soft)}
/* §8/§46: compacte topbar-icoonknoppen (undo/import/export). */
.topicon{font:inherit;font-size:16px;line-height:1;color:var(--ink);background:transparent;border:1px solid var(--brd);border-radius:8px;padding:0;width:40px;min-height:40px;cursor:pointer;touch-action:manipulation}
.topicon:hover:not(:disabled){color:var(--ink);border-color:var(--brd-2);background:var(--panel)}
.topicon:disabled{opacity:.35;cursor:default}

/* ---- §2 verticale tabrail + inhoudspaneel ---- */
.tabrail{flex:0 0 48px;display:flex;flex-direction:column;gap:4px;padding:8px 6px;border-right:1px solid var(--brd);background:var(--raised)}
.tabbtn{display:flex;flex-direction:column;align-items:center;gap:2px;font:inherit;font-size:9px;font-weight:600;color:var(--ink-faint);background:transparent;border:1px solid transparent;border-radius:9px;padding:8px 2px;min-height:48px;cursor:pointer;touch-action:manipulation}
.tabbtn .ti{font-size:16px;line-height:1}
.tabbtn:hover{color:var(--ink-dim);background:var(--panel)}
.tabbtn[aria-pressed="true"]{color:var(--ink);background:var(--accent-soft);border-color:transparent;box-shadow:inset 0 -2px 0 var(--accent)}
/* Fase 3A: weergave-/venstercontext (Focus + Volledig scherm) gegroepeerd onderaan de rechter rail. */
/* Fase 3A: Focus + Volledig scherm sluiten als compacte subgroep DIRECT aan op de menu-items
   (geen margin-top:auto — geen los zwevend blok onderaan); alleen de paneel-collapse zakt omlaag. */
/* Fase 3A: Focus + Volledig scherm gecentreerd met ademruimte binnen de smalle rail —
   ruimere onderlinge gap + wat lucht boven de groep, iets smaller en niet strak tegen de railrand. */
.tabrail-view{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--brd)}
/* Compacte rail: icoon-only view-controls — geen lange labels die buiten de smalle rail lopen;
   de volledige tekst (Focus / Uit focus / Volledig scherm) blijft in title + aria-label. */
.tabrail-view .viewbtn{width:40px;min-height:44px;padding:8px 0;justify-content:center}
.tabrail-view .viewbtn .tl{display:none}
/* Neutraal in rust (zoals de tabs); actief = rustig herkenbaar (accent-icoon + dunne rand),
   geen zwaar oranje CTA-vlak. */
.tabrail-view .viewbtn[aria-pressed="true"]{color:var(--accent);background:transparent;border-color:var(--accent-line)}
/* Toegankelijke maar subtiele toetsenbord-focusring i.p.v. de zware UA-default witte rand. */
.tabrail .tabbtn:focus-visible,.tabrail .tab-collapse:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px}

/* Mobiel kent Werken ↔ Presenteren; geen derde Focus-/vensterlaag. Deze override staat na het
   gedeelde railcontract, zodat de desktopuitlijning ook als eerste canonieke regel leesbaar blijft. */
@media (orientation:landscape) and (max-width:950px) and (max-height:600px){
  body.presentation-host .tabrail-view{display:none}
}
.tab-collapse{margin-top:auto;font:inherit;font-size:14px;color:var(--ink-faint);background:transparent;border:1px solid var(--brd);border-radius:8px;min-height:36px;cursor:pointer}
.tab-collapse:hover{color:var(--ink)}
.body.right-collapsed .tab-collapse{transform:scaleX(-1)}
.tabpanel{flex:1 1 auto;min-width:0;overflow:auto;padding:12px 12px 20px}
.tabsec[hidden]{display:none}
.sub-title{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;margin:12px 0 6px}
/* §9: compacte tekenbediening — lagere knoppen, ruime hitarea via padding. */
.seg-mode{display:flex;background:var(--panel);border:1px solid var(--brd);border-radius:9px;padding:3px;gap:2px}
.seg-mode button{flex:1;font:inherit;font-size:12px;font-weight:600;color:var(--ink-dim);background:transparent;border:0;border-radius:7px;padding:8px 6px;min-height:38px;cursor:pointer;touch-action:manipulation}
.seg-mode button[aria-pressed="true"]{background:var(--accent-soft);color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.draw-sub{margin-top:4px}
.chipseg{display:flex;gap:5px;flex-wrap:wrap}
.chipseg button{font:inherit;font-size:11.5px;font-weight:600;color:var(--ink-dim);background:var(--panel);border:1px solid var(--brd);border-radius:7px;padding:6px 9px;min-height:30px;cursor:pointer;touch-action:manipulation}
.chipseg button[aria-pressed="true"]{color:var(--accent-ink);border-color:var(--accent-line);background:var(--accent-soft)}
#lineControls .lbl,#playerControls .lbl{display:block;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;margin-bottom:5px;width:100%}
#lineControls{display:flex;flex-direction:column;gap:6px;align-items:flex-start;margin-top:10px}
#playerControls{margin-top:10px}
#deleteLine{align-self:flex-start}

/* ---- §11-14 linker voetbalhiërarchie ---- */
.tree-group>.tree-head{display:flex;align-items:center;gap:6px;width:100%;font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-dim);background:none;border:0;padding:8px 4px;cursor:pointer;touch-action:manipulation}
.tree-group>.tree-head:hover{color:var(--ink)}
.tree-head .tw{font-size:9px;color:var(--ink-faint);width:10px;display:inline-block;transition:transform var(--motion-micro) var(--motion-ease)}
.tree-group.open>.tree-head .tw{transform:rotate(90deg)}
.tree-children{display:none;padding-left:6px}
.tree-group.open>.tree-children{display:block}
.tree-row>.tree-head{font-size:11.5px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink-faint);padding:6px 4px}
.tree-row.open>.tree-head{color:var(--ink-dim)}
.tree-leaf{display:block;width:100%;text-align:left;font:inherit;font-size:12px;color:var(--ink-dim);background:transparent;border:1px solid transparent;border-radius:7px;padding:7px 9px;cursor:pointer;margin:2px 0 2px 14px;touch-action:manipulation}
.tree-leaf:hover{background:var(--panel);color:var(--ink)}
/* §14: actieve situatie subtiel — dun oranje accent, geen groot vlak. */
.tree-leaf[aria-current="true"]{color:var(--accent-ink);font-weight:700;background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent)}
.tree-quick{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 8px 14px}
.tree-quick button{font:inherit;font-size:11px;color:var(--ink-dim);background:none;border:1px dashed var(--brd);border-radius:7px;padding:6px 8px;min-height:30px;cursor:pointer}
/* §5 Scène-paneel + zonebediening */
.scene-row{font-size:12px;color:var(--ink-dim);margin-bottom:6px}.scene-row b{color:var(--ink)}
.scene-actions{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.scene-btn{font:inherit;font-size:11.5px;font-weight:600;color:var(--ink-dim);background:var(--panel);border:1px solid var(--brd);border-radius:8px;padding:8px 10px;min-height:36px;cursor:pointer;touch-action:manipulation}
.scene-btn[aria-pressed="true"]{color:var(--accent-ink);border-color:var(--accent-line);background:var(--accent-soft)}
.eyebrow{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;margin:14px 0 7px}
.eyebrow:first-child{margin-top:0}
.sit{display:block;width:100%;text-align:left;font:inherit;font-size:12.5px;color:var(--ink-dim);background:transparent;border:1px solid transparent;border-radius:8px;padding:10px 10px;cursor:pointer;margin-bottom:3px;touch-action:manipulation}
.sit:hover{background:var(--panel);color:var(--ink)}
.sit[aria-current="true"]{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink)}
.sit .z{font-size:10px;color:var(--ink-faint)}

.stage{display:flex;flex-direction:column;min-height:0}
.toolbar{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.toolbar .seg{display:flex;background:var(--panel);border:1px solid var(--brd);border-radius:9px;padding:3px}
.toolbar .seg button{font:inherit;font-size:13px;font-weight:600;color:var(--ink-dim);background:transparent;border:0;border-radius:7px;padding:11px 18px;min-height:44px;cursor:pointer;touch-action:manipulation}
.toolbar .seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.toolbar .chk{font-size:12px;color:var(--ink-dim);display:flex;align-items:center;gap:6px}
.toolbar .muted{font-size:12px;color:var(--ink-faint)}
.linebar{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.linebar[hidden]{display:none}
.linebar .lbl{font-size:11px;color:var(--ink-faint);letter-spacing:.05em;text-transform:uppercase;font-weight:700}
.linebar button{font:inherit;font-size:12px;font-weight:600;color:var(--ink-dim);background:var(--panel);border:1px solid var(--brd);border-radius:8px;padding:10px 14px;min-height:42px;cursor:pointer;touch-action:manipulation}
.linebar button[aria-pressed="true"]{color:var(--accent-ink);border-color:var(--accent-line);background:var(--accent-soft)}
.linebar button.danger{color:var(--bad);border-color:rgba(224,118,79,.4)}
.linebar .pl-input{font:inherit;font-size:15px;font-weight:700;letter-spacing:.04em;text-align:center;color:var(--ink);background:var(--panel);border:1px solid var(--brd);border-radius:8px;padding:8px 10px;min-height:42px;width:76px;touch-action:manipulation}
.linebar .pl-input:focus{outline:none;border-color:var(--accent-line);background:var(--accent-soft)}
/* Properties panel: the situation's controls now live in the right column, above the coachopmerkingen. */
.props{margin-bottom:6px}
.props .eyebrow{margin-top:0}
.props .toolbar{margin-bottom:6px}
.props .seg{flex-wrap:wrap}
.props .seg button{padding:10px 12px;font-size:12.5px;min-height:42px}
.props .undo{font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-dim);background:var(--panel);border:1px solid var(--brd);border-radius:8px;padding:9px 12px;min-height:40px;cursor:pointer;touch-action:manipulation}
.props .undo:hover{color:var(--ink);border-color:var(--brd-2)}
.props .undo:disabled{opacity:.4;cursor:default}

/* ---- Inklapbare bovenbalk + Focusmodus (Canvas Mode): het veld is leidend ---- */
.chip-btn{font:inherit;font-size:13px;font-weight:600;color:var(--ink-dim);background:rgba(16,20,27,.92);border:1px solid var(--brd-2);border-radius:9px;padding:9px 12px;min-height:40px;cursor:pointer;touch-action:manipulation;display:inline-flex;align-items:center;gap:6px}
.chip-btn:hover{color:var(--ink)}
#topExpand,#focusExit{position:fixed;top:8px;z-index:50;display:none}
#topExpand{left:8px}#focusExit{right:8px}
/* Bovenbalk verbergt volledig; alleen een klein uitklap-icoon blijft over. */
body.top-collapsed .top{display:none}
body.top-collapsed:not(.focus) #topExpand{display:inline-flex}
/* §16 Focusmodus: veld maximaal; linkernavigatie weg; smalle werkruimte met tabrail
   + tekengereedschap blijft bereikbaar. */
/* PO-correctieronde 2 — Focus moet MEER werkruimte geven, niet minder.
   `.app` is een grid met rijen `auto 1fr`: rij 1 is de kopbalk, rij 2 de werkruimte. Zodra de
   kopbalk in Focus verdwijnt, schuift `.body` naar de AUTO-rij en krijgt hij dus alleen zijn
   contenthoogte; de 1fr-rij blijft leeg achter. Dat viel niet op zolang de pitch in Focus zijn
   eigen max-height-keten gebruikte, maar de 16:9 Stage heeft een echte hoogte nodig en werd
   daardoor kleiner dan in de normale editor. Eén expliciete rij zet dat recht. */
body.focus .app{grid-template-rows:1fr}
body.focus .top{display:none}
body.focus .col.left{display:none}
body.focus #hint{display:none}
/* §2/§5: the right panel is collapsed on Focus-enter (styling/detail one level deeper via "Meer");
   the field takes 1fr, the right column shrinks to the tabrail (--right-w=48px) unless expanded. */
body.focus .body{grid-template-columns:1fr var(--right-w,300px)}
body.focus .stage{padding:6px 6px 6px 62px}   /* leave room for the fixed left toolstrip */
body.focus #focusExit{display:none}            /* the strip carries "Focus sluiten" (§9) */
/* §4 compacte Focus-toolstrip — vast aan de linker veldrand, alleen in Focus. Visueel compact,
   maar met ruime touch-hitarea (§16: visueel compact != moeilijk aanraakbaar). */
#focusStrip{position:fixed;left:8px;top:50%;transform:translateY(-50%);z-index:55;display:none;
  flex-direction:column;gap:5px;padding:6px;background:rgba(16,20,27,.94);border:1px solid var(--brd-2);
  border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.5)}
body.focus #focusStrip{display:flex}
#focusStrip .fs-btn{font:inherit;font-size:10.5px;font-weight:700;color:var(--ink-dim);background:var(--panel);
  border:1px solid var(--brd);border-radius:9px;width:46px;min-height:40px;padding:2px;cursor:pointer;touch-action:manipulation}
#focusStrip .fs-btn:hover{color:var(--ink);border-color:var(--brd-2)}
#focusStrip .fs-btn:disabled{opacity:.35;cursor:default}
#focusStrip .fs-btn[aria-pressed="true"]{color:var(--accent-ink);border-color:var(--accent-line);background:var(--accent-soft)}
#focusStrip .fs-exit{color:var(--accent-ink);border-color:var(--accent-line)}
/* Adaptief voorstel op tablets / kleine schermen / touch (aanbod, niet opgelegd). */
#focusSuggest{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:50;display:none;align-items:center;gap:8px;background:rgba(16,20,27,.95);border:1px solid var(--accent-line);border-radius:999px;padding:7px 7px 7px 14px;font-size:12.5px;color:var(--ink)}
#focusSuggest.show{display:inline-flex}
#focusSuggest .go{font:inherit;font-weight:700;color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:999px;padding:8px 13px;min-height:36px;cursor:pointer;touch-action:manipulation}
#focusSuggest .x{font:inherit;color:var(--ink-faint);background:none;border:0;font-size:15px;cursor:pointer;padding:4px 8px}
.field-wrap{flex:1;min-height:0;display:grid;place-items:center;padding:2px}
/* ---- Stage S2 — vaste 16:9 Presentation Stage (ADR-0028) + bounded placement (ADR-0057) ----
   Alleen presentatie.html rendert deze markup; in speelwijze.html bestaan de klassen niet, dus
   deze regels zijn daar inert. Dezelfde Fit-vorm als svg.pitch al gebruikt: aspect-ratio met
   max-width/max-height, dus de hele Stage schaalt UNIFORM mee en letterboxt — schermgrootte
   bepaalt alleen de Stage Fit, nooit de compositie (ADR-0028). */
/* Stage Fit: de breedte is de KLEINSTE van de beschikbare breedte en de breedte die bij de
   beschikbare hoogte hoort. aspect-ratio geeft daarna de hoogte, dus de Stage is ALTIJD exact
   16:9 en letterboxt/pillarboxt netjes. Let op: width:100% én height:100% samen maken
   aspect-ratio inert op een gewoon blok — vandaar deze min()-vorm en geen height. */
/* De Fit-container is een EIGEN Stage-wrapper: .field-wrap blijft exact zoals hij was, zodat
   Speelwijze en Focus geen enkele containment-bijwerking krijgen. Zijn hoogte komt van de
   grid-cel (100%), niet van zijn inhoud, dus size-containment is hier volledig veilig. */
.stage-fit{width:100%;height:100%;display:grid;place-items:center;container-type:size}
.stage-frame{position:relative;container-type:inline-size;width:min(100cqw, 100cqh * 16 / 9);aspect-ratio:16/9;
  background:var(--theme-stage-surface,#0f131a);outline:1px solid var(--brd);overflow:hidden}
/* Dia-achtergrond (Presentatiestijl, ADR-0031). Hij vult het HELE Stage-frame en staat als eerste
   kind in de DOM, dus hij ligt achter titelzone én veldgebied. Hij kent de veldplacement niet:
   het veld verplaatsen of verkleinen laat de achtergrond per constructie ongemoeid.
   Nooit interactief — de achtergrond is geen Stage-object en mag geen enkel pointerevent
   afvangen dat voor het veld, de Scene of een greep bedoeld is. */
.stage-background{position:absolute;inset:0;overflow:hidden;pointer-events:none}
/* M4 Clublogo: vaste hoek van de Stage (Stage-relatief, geen pixels), het hele logo zichtbaar (contain). */
.stage-club-logo{position:absolute;z-index:2;top:2.5%;height:11%;aspect-ratio:1/1;display:grid;place-items:center;pointer-events:none}
.stage-club-logo[hidden]{display:none}
.stage-club-logo[data-plek="linksboven"]{left:2%}
.stage-club-logo[data-plek="rechtsboven"]{right:2%}
.stage-club-logo-img{width:100%;height:100%;object-fit:contain}
.stage-club-logo-monogram{display:grid;place-items:center;width:100%;height:100%;border-radius:18%;background:#1c2430;border:1px solid rgba(255,255,255,.35);color:#fff;font-weight:800;font-size:3.2cqw;line-height:1}
.stage-background *{pointer-events:none}
.stage-background-layer,.stage-background-colour,.stage-background-image,.stage-background-overlay{position:absolute;inset:0}
/* Vaste titelzone: leest bestaande Sheet-inhoud, geen placement en geen tekstbewerking (slice-grens). */
/* v0.65.152 (PO): de band loopt tot de bovenkant van het getekende veld (--title-band-h, door applyTitleBand
   gemeten; minimaal de oude 10 %); de titelgroep staat er verticaal gecentreerd in. */
.stage-title{position:absolute;left:2.5%;right:2.5%;top:0;height:var(--title-band-h,10%);display:flex;flex-direction:column;
  justify-content:center;gap:2px;padding:0 6px;pointer-events:none;overflow:hidden}
/* v0.65.133 — PO-besluit: titel en ondertitel als één groep GECENTREERD op de Stage (de titelzone
   ligt symmetrisch over de hele Stage, dus ook boven het standaard gecentreerde veld). Een lange
   titel mag op twee regels; daarna afkappen. Vaste zone: geen layoutsprong. */
.stage-title{align-items:center;text-align:center}
/* v0.65.149 (PO 2026-10-12): de PRESENTATIETITEL gebruikt bij voorkeur Bahnschrift SemiBold Condensed (een
   systeemlettertype van Windows; niets gebundeld). Valt terug op Bahnschrift (variabel) en daarna op
   smalle systeemletters; als laatste de gewone UI-letter. De maat wordt altijd gemeten aan de echte
   letters (fitStageTitle), dus andere metrics geven nooit afsnijden of overlap. */
.stage-title h1{font-family:var(--title-font-family,"Bahnschrift SemiBold Condensed","Bahnschrift","Roboto Condensed","Arial Narrow","Helvetica Neue Condensed",var(--f-ui),sans-serif);font-stretch:condensed}
.stage-title h1{margin:0;font-size:max(11px,var(--title-font,2.554cqw));font-weight:600;color:var(--ink);
  max-width:100%;overflow-wrap:anywhere;line-height:1.15}
/* v0.65.143 (PO-handtest: onderstok "g" afgesneden bij 52): de h1 knipt NIET meer. De tekst van het
   lettertype (ascent + descent) is hoger dan de regelhoogte 1,15; een overflow:hidden op de h1 sneed
   daardoor onderstokken en hoge tekens af. Het aantal regels en de maat bepaalt fitStageTitle (gemeten
   aan de echte tekstrechthoeken binnen de titelband); alleen de band zelf knipt nog, als laatste
   redmiddel voorbij de kleinste stand. */
/* v0.65.138: de titelgrootte (24–72, standaard 40) komt Stage-relatief uit presentation-title.mjs
   (--title-font in cqw, --title-lines 1 of 2) en past altijd in de vaste titelzone. */
.stage-title p{margin:0;font-size:clamp(9px,1.25cqw,14px);color:var(--ink-faint);
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
/* v0.65.134 (review A Medium): met een ondertitel past er maar één titelregel netjes in de vaste
   zone; dan één regel met beletselteken in plaats van een half afgesneden tweede regel. */
/* (v0.65.134: één regel met ondertitel — sinds v0.65.138 berekend in titleLayout via --title-lines.) */
.stage-title p:empty{display:none}
/* Deel A (PO 2026-10-27): in Bewerken is de titel direct te bewerken (de rest van de band blijft doorklikbaar).
   Een stippelrand bij aanwijzen; tijdens het bewerken een volle rand. Nooit in Presenteren (klasse alleen in Bewerken). */
.stage-title.is-title-editable h1{pointer-events:auto;cursor:text;border-radius:4px;outline-offset:2px}
.stage-title.is-title-editable h1:hover{outline:1px dashed color-mix(in srgb,var(--ink) 55%,transparent)}
.stage-title.is-title-editing h1,.stage-title.is-title-editable h1:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.stage-title.is-title-editing h1{cursor:text;caret-color:var(--accent)}
/* Het veldgebied: positie/maat komen UITSLUITEND uit de genormaliseerde placement (inline % door
   de editor gezet). De pitch houdt zijn eigen vaste logische viewBox en schaalt uniform binnen dit
   gebied — Stage-resize raakt de voetbalprojectie dus nooit (ADR-0057 §6). */
/* De padding IS het grijpkader: breed genoeg om met muis en vinger te pakken, zonder dat het
   veld merkbaar kleiner wordt. Volledige touch-/toetsenbordergonomie volgt in de interactieslice. */
/* Technische veldweergave: plaatsing en maat, GEEN zichtbaar object. Onselecteerd is er geen
   rand, geen achtergrond en geen kaartvorm — de trainer ziet enkel het voetbalveld. */
.stage-field{position:absolute;display:grid;place-items:center;box-sizing:border-box}
/* B1-04-cursorgrammatica: het veldgebied is een GRIJPBARE container — grijpende hand tijdens
   het slepen, open hand in rust. Nooit de 4-pijlencursor (die is uit de pitch verbannen). */
.stage-field.is-selectable.is-over-surround,.stage-field.is-selectable.is-over-surround #pitch{cursor:grab}
.stage-field.is-dragging,.stage-field.is-dragging *{cursor:grabbing}
.stage-field.is-selected{outline:2px solid var(--theme-selection);outline-offset:2px} /* PO 2026-10-20: subtiel blauw, zelfde als spelerselectie; geen gloed */
/* De greep blijft visueel compact; het interactieve target is via ::before fors ruimer
   (18px zichtbaar, ~40px raakbaar) zodat resizen op desktop en touch makkelijk lukt. */
.stage-handle{position:absolute;width:18px;height:18px;border-radius:4px;background:var(--theme-selection);
  border:1px solid var(--bg);box-shadow:0 1px 4px rgba(0,0,0,.5);touch-action:none}
.stage-handle::before{content:"";position:absolute;inset:-11px}
.stage-field:not(.is-selected) .stage-handle{display:none}
.stage-handle[data-corner="nw"]{left:-9px;top:-9px;cursor:nwse-resize}
.stage-handle[data-corner="ne"]{right:-9px;top:-9px;cursor:nesw-resize}
.stage-handle[data-corner="sw"]{left:-9px;bottom:-9px;cursor:nesw-resize}
.stage-handle[data-corner="se"]{right:-9px;bottom:-9px;cursor:nwse-resize}
/* PO-correctieronde 2 — FOCUS TOONT DEZELFDE DIA, ALLEEN GROTER.

   Root cause van de PO-bevinding "Focusmodus geeft gewoon groot veld dus neemt de wijzigingen niet
   over": hier stond `display:contents` op de hele Stage-keten. Dat liet de pitch in Focus weer een
   direct kind van .field-wrap worden — de lay-out van vóór de Stage — waardoor het veld daar op
   volle grootte verscheen, ongeacht de placement die de trainer net had gekozen. De opgeslagen
   placement werd nooit herschreven; Focus TOONDE simpelweg een andere compositie.

   Focus is geen tweede dia en geen tweede compositiemodel. De Stage blijft daarom staan: dezelfde
   Scene, dezelfde veldweergave, dezelfde placement, dezelfde achtergrond. Focus verbergt alleen de
   editoromgeving (kopbalk, dianavigator, rechterpaneel), en de Stage schaalt via zijn bestaande
   uniforme Fit vanzelf mee naar de vrijgekomen ruimte. Meer werkruimte, zelfde compositie, geen
   tweede opgeslagen layout. */
/* De dia-achtergrond is een STAGE-eigenschap. Focus slaat de Stage bewust over (geen frame, geen
   titelzone, geen grepen), dus de achtergrond hoort daar ook niet. Dat is geen uitzondering die
   voor de achtergrond is bedacht maar exact dezelfde regel als voor de andere Stage-onderdelen —
   en het houdt Focus ongewijzigd pure voetbalbewerkingsruimte. Belangrijk ook technisch: met
   `display:contents` op het frame zou een absoluut gepositioneerde achtergrond zijn
   containing block kwijtraken en het hele veldvlak overdekken. */
/* Alleen het AUTHORING-chroom verdwijnt in Focus: de hoekgrepen zijn bediening, geen dia-inhoud
   (stageAuthoringAvailable() zet Stage-authoring in Focus sowieso uit). Titelzone en
   achtergrond zijn wél dia-inhoud en horen bij dezelfde compositie, dus die blijven staan. */
body.focus .stage-handle{display:none}
/* §18/§20/§23: de primaire Animeer-actie staat prominent BOVENIN het Tekenen-paneel en is sticky,
   zodat hij op desktop én tablet zichtbaar/bereikbaar blijft (niet onder de vouw, niet afgeknipt). */
#makeAnimBtn{position:sticky;top:0;z-index:5;width:100%;margin:0 0 8px;font:inherit;font-size:13px;font-weight:700;
  color:var(--accent-ink);background:linear-gradient(var(--accent-soft),var(--accent-soft)),var(--card);border:1px solid var(--accent-line);border-radius:9px;padding:11px 14px;min-height:42px;
  box-shadow:0 4px 14px rgba(0,0,0,.28);cursor:pointer;touch-action:manipulation}
#makeAnimBtn:hover{background:linear-gradient(var(--accent-hover),var(--accent-hover)),var(--card)}
#makeAnimBtn[hidden]{display:none}
/* v0.65.97: "Animeer en groepeer" — the second intent, directly under the primary Animeer button. */
#makeAnimGroupBtn{width:100%;margin:-2px 0 8px;font:inherit;font-size:12.5px;font-weight:700;color:var(--accent-ink);background:transparent;
  border:1px solid var(--accent-line);border-radius:9px;padding:9px 14px;min-height:38px;cursor:pointer;touch-action:manipulation}
#makeAnimGroupBtn:hover{background:var(--accent-soft)}
#makeAnimGroupBtn[hidden]{display:none}
svg.pitch{
  width:100%;height:100%;max-width:100%;max-height:100%;aspect-ratio:1000/648;
  border-radius:14px;border:1px solid var(--theme-stage-field-border);box-shadow:0 34px 90px -46px #000, inset 0 0 0 1px rgba(255,255,255,.02);
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  /* Only the dia-surround here; the field colour, gradient and halfspaces are
     drawn as SVG within the field boundary (reused TactiScene field-surface). */
  background:radial-gradient(120% 118% at 50% 42%, #1b2330 0%, #12171f 54%, #0a0d12 100%);
}
/* PO-correctie: in de Stage is het veld geen losse kaart. De pitch verliest daar zijn eigen
   ronde hoeken, rand, schaduw en donkere achtergrond; de resterende ruimte hoort bij de dia.
   Buiten de Stage (speelwijze.html) blijft de bestaande dia-surround ongewijzigd. */
.stage-field svg.pitch{border-radius:0;border:0;box-shadow:none;background:none}
/* v0.65.150 — Slim: alleen de niet-herkende spelers van de oude dia, die kort wegvloeien (transient). */
svg.pitch.slim-leave-layer{border-radius:0;border:0;box-shadow:none;background:none;max-width:none;max-height:none;aspect-ratio:auto;overflow:hidden}
svg.pitch.mode-pijl{cursor:crosshair}svg.pitch.mode-koppel{cursor:pointer}
/* B1-04 — cursorgrammatica: wat gebeurt er als ik hier NU handel?
   · wijzende hand (pointer) = bestaand object selecteren/manipuleren
   · grijpende hand (grabbing) = wordt op dit moment daadwerkelijk versleept
   · platte + (crosshair) = nieuwe geometrie tekenen (Pijl/Paden, één +)
   · specifieke systeemcursors (resize/text) blijven waar ze extra info geven. */
svg.pitch.is-dragging,svg.pitch.is-dragging .player,svg.pitch.is-dragging .ball-token,svg.pitch.is-dragging .football-line,svg.pitch.is-dragging .football-line-arrow,svg.pitch.is-dragging .line-handle,svg.pitch.is-dragging .movement-path-hit,svg.pitch.is-dragging .movement-path-handle{cursor:grabbing}
/* Werkspoor D: subtle hint that a selected line's endpoint is directly grabbable. */
svg.pitch.near-endpoint{cursor:pointer}
svg.pitch.near-endpoint.near-line{cursor:pointer}
/* E: in tekenmodus wint de kruiscursor, ook boven speler/bal/lijn (geen handcursor die het doel bedekt). */
svg.pitch.mode-pijl .player-token,svg.pitch.mode-pijl .player,svg.pitch.mode-pijl .ball-token,svg.pitch.mode-pijl .ball,svg.pitch.mode-pijl .football-line-token,svg.pitch.mode-pijl .football-line,svg.pitch.mode-pijl .football-line-arrow{cursor:crosshair}
body.dragging,body.dragging *{user-select:none!important;-webkit-user-select:none!important}
/* Werkspoor L: one fixed-height line so a mode switch never resizes the field.
   No wrapping; overflow is ellipsised. */
.hint{font-size:11.5px;color:var(--ink-faint);margin-top:8px;text-align:center;height:16px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Reused TactiScene field / player / ball / line SVG styling (from styles.css). */
/* PO-correctieronde 2 — de vier strokefamilies die `non-scaling-stroke` in schermpixels vastzet
   (veldbelijning, spelerscontour, balcontour, FootballLine) volgen nu de visuele schaal van de
   veldweergave. Ze blijven non-scaling: de dikte blijft dus een SCHERMmaat (scherp, geen
   sub-pixelruis), maar wel een die met de compositie meebeweegt. De rest van de tekening —
   posities, spelers-/balstraal, pijlpuntgeometrie, zone-randen — is user-unit-geometrie en
   schaalde altijd al mee; die blijft ongemoeid. */
.field-line{fill:none;stroke:var(--theme-field-line);stroke-width:calc(var(--field-line-width,1.5) * var(--visual-scale,1));stroke-opacity:var(--field-line-opacity,1);vector-effect:non-scaling-stroke}
.no-fill{fill:none}.field-mark{fill:var(--theme-field-line)}
/* Reused TactiScene field-surface (BUILD-004 M1 look): two visual layers drawn
   within the field boundary — a smooth radial gradient (light centre -> darker
   outer) and separate halfspace lanes. */
:root{--theme-field-light:#3c709a;--theme-field-dark:#081824;--theme-halfspace:rgba(6,20,14,.15)}
/* §25/§46: field-colour presets — swap only the field-surface stops. The gradient is
   painted into the boundary rect (see insertFieldSurface), so §26 holds: colour never
   leaks past the outer lines. Custom properties set on the SVG cascade to its stops. */
/* §19-§23: frisser, verzadigder echt voetbalgroen naar de PowerPoint-referentie —
   lichter grasgroen in het centrum, donkerder (nog steeds groene) randen voor diepte,
   zeer subtiele halfspace-stroken. Alle kleur blijft binnen de buitenlijnen (§21/§42:
   de gradient wordt in de boundary-rect geschilderd, zie insertFieldSurface). */
/* §4/§7: fris middengroen in het centrum, duidelijk dieper/donkerder groen vanaf de
   buitenlijnen (brede zachte radial-overgang, geen harde band). De dark-stop is
   DEV-afstelbaar via --theme-field-dark (zie applyGreenEdge, §6). */
svg.pitch[data-field="groen"]{--theme-field-light:#49a851;--theme-field-base:#348e3d;--theme-field-dark:#0c3d17;--theme-halfspace:rgba(8,40,16,.13)}
/* Afronding P2 §9: Grijs = neutral dark surface with brighter lines; Transparant = NO surface
   (gradient stops and halfspaces fully transparent, the page shows through) while the field
   lines keep full contrast on the dark page background. Lines stay legible on every preset. */
svg.pitch[data-field="neutraal"]{--theme-field-light:#3a4048;--theme-field-base:#23282e;--theme-field-dark:#0c0f13;--theme-halfspace:rgba(0,0,0,.14);--theme-field-line:rgba(250,252,255,.96)}
svg.pitch[data-field="geen"]{--theme-field-light:transparent;--theme-field-base:transparent;--theme-field-dark:transparent;--theme-halfspace:transparent;--theme-field-line:rgba(250,252,255,.96)}
#field-surface-gradient stop.light{stop-color:var(--theme-field-light)}
#field-surface-gradient stop.base{stop-color:var(--theme-field-base)}
#field-surface-gradient stop.dark{stop-color:var(--theme-field-dark)}
/* Buitenrand (PO 2026-10-26; vervangt het doorlopende kleurverloop van S1/B3): egaal gras buiten de veldlijnen, in de
   randkleur van dezelfde veldpreset. Het kleurverloop en de halfruimtebanen blijven binnen de lijnen. */
.field-view-grass{fill:var(--theme-field-dark);fill:color-mix(in srgb,var(--theme-field-base) 45%,var(--theme-field-dark))}
svg.pitch[data-view-rot] .player-label,svg.pitch[data-view-rot] .zone-overlay text{transform-box:fill-box;transform-origin:center;transform:rotate(var(--view-label-rot,0deg))}
/* M3 Spelersfoto's op de dia: kaart boven het token (foto volledig, `contain`; anders alleen het shirt).
   Het shirt heeft dezelfde rustige standaardkleur als de placeholder op de TeamSeason-pagina (player-photo-ui.mjs
   PLACEHOLDER_NEUTRAL), zodat het op elke teamkleur leesbaar is; clubkleuren volgen met de shirtcatalogus (U6).
   Bij een gedraaide uitsnede draait de kaart om het midden van het token terug, zodat hij rechtop boven de speler blijft. */
.player-photo-frame{fill:#1a2433;stroke:rgba(255,255,255,.7);stroke-width:1}
.player-photo-shirt-body{fill:#5ec6c0;stroke:#0b2b29;stroke-width:.22;stroke-linejoin:round}
.player-photo-shirt-collar{fill:#0b2b29}
svg.pitch[data-view-rot] .player-photo-card{transform-box:view-box;transform-origin:var(--card-ox) var(--card-oy);transform:rotate(var(--view-label-rot,0deg))}
.field-fill-btn{position:absolute;left:50%;top:6px;transform:translateX(-50%);z-index:4;width:48px;height:32px;min-height:0;padding:0;border:0;border-radius:999px;
  background:rgba(16,20,27,.35);color:#fff;opacity:.18;transition:opacity var(--motion-medium) var(--motion-ease);display:grid;place-items:center;cursor:pointer;touch-action:manipulation}
.field-fill-btn::after{content:"";position:absolute;inset:-8px}
.field-fill-btn svg{width:22px;height:22px}
.field-fill-btn[data-side="bottom"]{top:auto;bottom:6px}.field-fill-btn[data-side="bottom"] svg{transform:rotate(180deg)}
.field-fill-btn[data-side="left"]{left:6px;top:50%;transform:translateY(-50%)}.field-fill-btn[data-side="left"] svg{transform:rotate(-90deg)}
.field-fill-btn[data-side="right"]{left:auto;right:6px;top:50%;transform:translateY(-50%)}.field-fill-btn[data-side="right"] svg{transform:rotate(90deg)}
.field-fill-btn:hover,.field-fill-btn:focus-visible,.stage-field:hover .field-fill-btn{opacity:.95}
.field-fill-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (hover:none){.field-fill-btn{opacity:.45}}
body.presenteren .field-fill-btn{display:none}
.field-view-notice{margin:6px 0 4px;padding:6px 8px;border-radius:7px;background:rgba(255,255,255,.04);color:var(--ink-dim);font-size:12px;line-height:1.35}
.field-halfspace{fill:var(--theme-halfspace)}
.player-token.team-1 .player{fill:var(--theme-own-team);stroke:var(--theme-own-team-border)}
.player-token.team-2 .player{fill:var(--theme-opponent);stroke:var(--theme-opponent-border)}
.player{stroke-width:calc(2.5 * var(--visual-scale,1));vector-effect:non-scaling-stroke;cursor:pointer;filter:drop-shadow(0 2px 2px var(--theme-player-shadow))}
.player-token.is-goalkeeper .player{fill:var(--theme-goalkeeper);stroke:var(--theme-goalkeeper-border)}
/* Initialen en rugnummers zijn user-unit-tekst en krimpen dus vanzelf mee met de veldweergave.
   `--label-scale` is de expliciete leesbaarheidsvloer uit presentation-stage.mjs: onder die
   grens groeit de tekst in user units terug, zodat haar SCHERMgrootte nooit onder een vaste
   fractie van de referentie zakt. Een klein veld op een overzichtsdia blijft leesbaar. */
.player-label{fill:var(--theme-text);font-size:calc(8px * var(--label-scale,1));text-anchor:middle;dominant-baseline:central;pointer-events:none}
/* J: gele keepersbol krijgt donkere tekst voor voldoende contrast. */
.player-token.is-goalkeeper .player-label{fill:var(--theme-goalkeeper-label)}
/* Spelerkleuren (v0.65.38): per document instelbaar; de editor zet CSS-variabelen op svg.pitch,
   afwezig = exact de theme-kleur hierboven. Een keeper blijft lid van zijn team (team-1/team-2);
   zijn kleur is een override binnen dat team. Label-contrast volgt de gekozen vulkleur. */
.player-token.team-1 .player{fill:var(--player-fill-team-1,var(--theme-own-team))}
.player-token.team-2 .player{fill:var(--player-fill-team-2,var(--theme-opponent))}
.player-token.team-1.is-goalkeeper .player{fill:var(--player-fill-team-1-gk,var(--theme-goalkeeper))}
.player-token.team-2.is-goalkeeper .player{fill:var(--player-fill-team-2-gk,var(--theme-goalkeeper))}
.player-token.team-1 .player-label{fill:var(--player-label-team-1,var(--theme-text))}
.player-token.team-2 .player-label{fill:var(--player-label-team-2,var(--theme-text))}
.player-token.team-1.is-goalkeeper .player-label{fill:var(--player-label-team-1-gk,var(--theme-goalkeeper-label))}
.player-token.team-2.is-goalkeeper .player-label{fill:var(--player-label-team-2-gk,var(--theme-goalkeeper-label))}
/* Scène-tab › Spelers: kleurkiezer (native input) + laatste kleuren (swatches). */
.pc-group{display:grid;gap:6px;margin:4px 0 8px}
.pc-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-dim)}
.pc-row .pc-team{flex:1 1 auto;font-weight:600;color:var(--ink)}
.pc-pick{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:11px;color:var(--ink-dim);background:var(--panel);border:1px solid var(--brd);border-radius:8px;padding:4px 8px 4px 4px;cursor:pointer;min-height:32px;touch-action:manipulation}
.pc-pick[aria-pressed="true"]{border-color:var(--accent-line);color:var(--ink)}
.pc-pick input[type="color"]{width:26px;height:26px;padding:0;border:1px solid var(--brd-2);border-radius:6px;background:none;cursor:pointer}
.pc-pick input[type="color"]::-webkit-color-swatch-wrapper{padding:2px}
.pc-pick input[type="color"]::-webkit-color-swatch{border:0;border-radius:4px}
.pc-recent{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:2px 0 6px}
.pc-swatch{width:26px;height:26px;border-radius:7px;border:1px solid var(--brd-2);cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);touch-action:manipulation}
.pc-swatch:hover{transform:scale(1.08)}
.pc-recent .muted{font-size:11px}
.player-token:hover .player{stroke-width:calc(3.5 * var(--visual-scale,1))}
.player-token.is-selected .player{stroke:var(--theme-selection);stroke-width:calc(4 * var(--visual-scale,1))}
.ball-token{cursor:pointer}
/* Ball keeps its size but gains a tight dark halo so it is found instantly on the green. */
.ball{fill:var(--theme-ball);stroke:var(--theme-ball-patch);stroke-width:calc(1.8 * var(--visual-scale,1));vector-effect:non-scaling-stroke;filter:drop-shadow(0 1.6px 1.4px rgba(0,0,0,.5)) drop-shadow(0 0 2.4px rgba(3,10,14,.82))}
.ball-patch{fill:var(--theme-ball-patch);pointer-events:none}
.ball-seam{fill:none;stroke:var(--theme-ball-patch);stroke-width:0.8;opacity:0.62;pointer-events:none}
.ball-token.is-selected .ball{stroke-width:calc(2.8 * var(--visual-scale,1));stroke:var(--theme-selection)}
/* One colour source per token (--fl-stroke) drives both the line stroke and the
   explicit arrowhead fill; --fl-width (default 4.5) is set inline from dev-tuning.
   Run dash is applied inline (length-scaled) by the renderer. */
.football-line-token.yellow.pass{--fl-stroke:var(--theme-pass-yellow)}
.football-line-token.yellow.run{--fl-stroke:var(--theme-run-yellow)}
.football-line-token.yellow.dribble{--fl-stroke:var(--theme-dribble-yellow)}
.football-line-token.red{--fl-stroke:var(--theme-pass-red)}
.football-line-token.blue{--fl-stroke:#4aa3f0}
.football-line-token.green{--fl-stroke:#57c46a}
.football-line-token.white{--fl-stroke:#f3f6fa}
/* B1-FIX-02: ONE dark contour around the OUTER silhouette of the whole arrow (steel +
   pijlpunt together), applied at the TOKEN GROUP level. Because the filter sees the union
   of steel and pijlpunt, the internal junction is never outlined — no zwarte naad
   (──────▶, not ──────|▶). The 4-way offset scales with the line width so the contour keeps
   the same subtle weight on thin and thick lines; opacity/DIM/FADE of the children (and
   hence the contour) follow the segment, so steel + pijlpunt behave as one object. */
.football-line-token{filter:drop-shadow(calc(var(--fl-width,4.5) * 0.24px) 0 0 var(--theme-line-contrast)) drop-shadow(calc(var(--fl-width,4.5) * -0.24px) 0 0 var(--theme-line-contrast)) drop-shadow(0 calc(var(--fl-width,4.5) * 0.24px) 0 var(--theme-line-contrast)) drop-shadow(0 calc(var(--fl-width,4.5) * -0.24px) 0 var(--theme-line-contrast))}
.football-line{fill:none;stroke:var(--fl-stroke);stroke-width:calc(var(--fl-width,4.5) * var(--visual-scale,1));stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;cursor:pointer}
.football-line-arrow{fill:var(--fl-stroke);stroke:none;cursor:pointer}
/* Ronde 2 #3: herkomst-looplijn gedimd t.o.v. actieve looplijn (opacity dev-afstelbaar). */
.football-line-token.is-origin .football-line,.football-line-token.is-origin .football-line-arrow{opacity:var(--origin-opacity,0.45)}
/* Verschijnmoment (v0.65.94): a line hidden at the current playhead is not grabbable either — what
   the trainer cannot see cannot be hit. A selected one stays a faint ghost and keeps its handles. */
.football-line-token.is-time-hidden:not(.is-selected){pointer-events:none}
/* S1.1-04: een geselecteerde Football Line krijgt GEEN gloed/schaduw — alleen selectiegrepen
   aan begin/eind (voor elke geselecteerde lijn, ook in multiselect: zie .sel-endpoint).
   Selectie ≠ animatie-indicatie; een eventueel dun lichtblauw animatieaccent hoort in V1. */
/* Editorchroom: zie de toelichting bij --chrome-scale in presentation-stage.mjs. */
.sel-endpoint{fill:var(--theme-selection);stroke:var(--theme-zone-handle-border);stroke-width:calc(1.5 * var(--chrome-scale,1));r:calc(5px * var(--chrome-scale,1));pointer-events:none}
/* §7/§10: never squash — colours WRAP to a new row and always stay perfectly round
   (flex:0 0 auto prevents shrink-to-oval). */
.colors{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.colors button{flex:0 0 auto;width:30px;height:30px;min-height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.16);background:var(--sw);cursor:pointer;padding:0;touch-action:manipulation}
.colors button[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-line)}
/* B1: selectie verandert de tactische lijnstijl NIET — geen tijdelijke verdikking; selectie toont alleen handles. */
/* B2/B3: geen browser-focus-omhulsel (bounding box) rond tactische objecten, op muis én touch. */
.player-token:focus,.player-token:focus-visible,.ball-token:focus,.ball-token:focus-visible,.football-line-token:focus,.football-line-token:focus-visible{outline:none}
.line-handle{fill:var(--theme-selection);stroke:var(--theme-zone-handle-border);stroke-width:calc(2 * var(--chrome-scale,1));r:calc(6px * var(--chrome-scale,1));cursor:pointer}
.line-waypoint{fill:var(--theme-selection);stroke:var(--theme-zone-handle-border);stroke-width:calc(1.5 * var(--chrome-scale,1));r:calc(5px * var(--chrome-scale,1));opacity:.85;cursor:grab}
.line-waypoint.is-active{opacity:1;stroke-width:calc(2.5 * var(--chrome-scale,1));r:calc(6.5px * var(--chrome-scale,1))}
.line-waypoint.is-hover{opacity:.9;pointer-events:none}
.line-bend-candidate{fill:var(--theme-selection);fill-opacity:.35;stroke:var(--theme-selection);stroke-width:calc(1.2 * var(--chrome-scale,1));opacity:.8;pointer-events:none}
.line-hover{pointer-events:none}
svg.pitch.near-line{cursor:grab}
.line-bend-grip{fill:var(--theme-selection);stroke:var(--theme-zone-handle-border);stroke-width:calc(1.5 * var(--chrome-scale,1));r:calc(6px * var(--chrome-scale,1));opacity:.9;cursor:grab}
.line-bend-grip.is-hover{opacity:.95;pointer-events:none}
.route-point-hit{fill:transparent;pointer-events:all;cursor:grab}
.route-point{fill:var(--theme-selection);stroke:var(--theme-zone-handle-border);stroke-width:calc(1.2 * var(--chrome-scale,1));r:calc(4px * var(--chrome-scale,1));opacity:.85;pointer-events:none}
.route-point-token.is-selected .route-point{opacity:1;r:5}
.route-point-token.is-hover .route-point{opacity:1}
.line-move-stem{stroke:var(--theme-selection);stroke-width:1.2;opacity:.5;pointer-events:none}
.line-move-hit{fill:transparent;pointer-events:all;cursor:grab}
.line-move-dot{fill:var(--theme-selection);stroke:var(--theme-zone-handle-border);stroke-width:1.5;opacity:.9;pointer-events:none}
.line-move-icon{stroke:var(--theme-zone-handle-border);stroke-width:1.4;stroke-linecap:round;fill:none;pointer-events:none}
svg.pitch.is-dragging .line-move-hit,svg.pitch.is-dragging .line-waypoint{cursor:grabbing}
.zone-overlay rect{pointer-events:none}
.zone-overlay text{pointer-events:none;font-family:var(--f-ui);font-size:calc(11px * var(--label-scale,1))}
.draw-preview{fill:none;stroke:var(--theme-pass-yellow);stroke-width:4;stroke-dasharray:6 6;opacity:.7;pointer-events:none}
.snap-ring{fill:none;stroke:var(--theme-selection);stroke-width:calc(2.5 * var(--chrome-scale,1));pointer-events:none}
/* ADR-0035 §18: MovementPath-constructiestijl — dun, dashed, teal, transparanter;
   onmiskenbaar géén Football Line. Alleen zichtbaar in Paden-modus of tijdens scrub. */
.movement-path-construct{fill:none;stroke:var(--tech);stroke-width:2;stroke-dasharray:4 5;opacity:.55;vector-effect:non-scaling-stroke;pointer-events:none}
/* VOORACTIE-001: het losmaak-lusje subtieler dan de hoofdroute; het keerpunt V een rustig
   amber handvat (duidelijk geen teal endpoint) met ruime onzichtbare touch-hitarea. */
.movement-path-vooractie-leg{fill:none;stroke:var(--tech);stroke-width:1.6;stroke-dasharray:2 6;opacity:.32;vector-effect:non-scaling-stroke;pointer-events:none}
.movement-path-vooractie{fill:rgba(242,176,62,.28);stroke:#f2b03e;stroke-width:2.5;cursor:grab}
.movement-path-vooractie-hit{fill:transparent;stroke:none;cursor:grab}
.movement-path-construct.is-selected{stroke:var(--amber);opacity:.95;stroke-width:3;stroke-dasharray:none}
/* UXR-09: wide invisible hit-stroke so the path body is easy to tap/click and select. */
.movement-path-hit{fill:none;stroke:transparent;stroke-width:16;vector-effect:non-scaling-stroke;pointer-events:stroke;cursor:pointer}
.movement-path-handle{fill:rgba(94,198,192,.25);stroke:var(--tech);stroke-width:calc(2 * var(--chrome-scale,1));r:calc(8px * var(--chrome-scale,1));cursor:pointer}
.movement-path-handle.is-active{fill:rgba(94,198,192,.5);pointer-events:none}
/* Blok C: the "+" continuation grip on a selected terminal Movement end — a distinct target
   (accent-filled, plus glyph) so it never reads as the plain edit handle. */
.path-continue-stem{stroke:var(--amber);stroke-width:1.5;opacity:.55;pointer-events:none}
.path-continue-hit{fill:transparent;pointer-events:all;cursor:copy}
.path-continue-dot{fill:var(--amber);stroke:#0b0e13;stroke-width:1.5;pointer-events:none;opacity:.95}
.path-continue-plus{stroke:#0b0e13;stroke-width:1.8;stroke-linecap:round;pointer-events:none}
/* A non-primary chain tip's "+" is de-emphasised (still tappable) so the primary tip leads and
   the field is not flooded — the trainer can still continue directly from any existing tip. */
.path-continue-grip.subtle .path-continue-dot{opacity:.4}
.path-continue-grip.subtle .path-continue-stem{opacity:.25}
.path-continue-grip.subtle:hover .path-continue-dot{opacity:.95}
/* Blok C: in-progress point-by-point draft — placed anchors + connecting route. */
.path-draft-line{fill:none;stroke:var(--amber);stroke-width:2.5;stroke-dasharray:2 4;vector-effect:non-scaling-stroke;pointer-events:none;opacity:.9}
.path-draft-point{fill:var(--amber);stroke:#0b0e13;stroke-width:calc(1.5 * var(--chrome-scale,1));pointer-events:none}
svg.pitch.mode-paden{cursor:crosshair}
/* UXR-14: progressive-visibility overlay segments (traversed = dim, remaining = normal). */
.football-line-progress{fill:none;stroke-width:calc(var(--fl-width,4.5) * var(--visual-scale,1));stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}

.ctx-row{font-size:12px;color:var(--ink-dim);margin-bottom:6px}.ctx-row b{color:var(--ink)}
.zones-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.zones-tags span{font-size:10.5px;color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:999px;padding:3px 8px}
.cgroup{margin-bottom:10px}.cgroup .h{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;margin-bottom:5px}
.copm{background:var(--panel);border:1px solid var(--brd);border-left:2px solid var(--tech);border-radius:9px;padding:8px 9px;margin-bottom:5px;font-size:12px}
.copm.excl{border-left-color:var(--amber)}.copm .doel{font-weight:700;color:var(--ink)}
.copm ul{margin:4px 0 0;padding-left:16px;color:var(--ink-dim)}
.copm .tag{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--amber);float:right}
.copm .rm{float:right;margin-left:6px;cursor:pointer;color:var(--ink-faint);border:0;background:none;font-size:12px}
/* Werkspoor F/G/H/I — Coachopmerkingblok read view + inline editor. */
.copm{position:relative;padding-left:26px}
.copm-handle{position:absolute;left:3px;top:6px;width:18px;height:22px;border:0;background:none;color:var(--ink-faint);cursor:grab;font-size:11px;line-height:1;letter-spacing:-2px;padding:0;touch-action:none}
.copm-handle:hover{color:var(--ink-dim)} .copm-handle:active{cursor:grabbing}
.copm-body{cursor:text}
.copm-titel{font-weight:800;color:var(--ink);margin-bottom:3px;font-size:12.5px} /* G: trainer-titel, geen contextlabel */
.copm-ctx{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.ctx-chip{font-size:10px;color:var(--tech);background:rgba(94,198,192,.1);border:1px solid rgba(94,198,192,.32);border-radius:999px;padding:2px 7px}
.ctx-chip i{font-style:normal;color:var(--ink-faint)}
.copm-dragging{opacity:.6;outline:1px dashed var(--accent-line)}
.no-zone{background:none;border:none;color:var(--ink-faint)}
/* E: live opsommingseditor — Enter = nieuwe bullet, Backspace op lege bullet verwijdert. */
.bl-editor{display:flex;flex-direction:column;gap:4px;margin:2px 0}
.bl-row{display:flex;align-items:center;gap:6px}
.bl-dot{color:var(--accent);font-size:14px;line-height:1}
.bl-input{flex:1;font:inherit;font-size:12px;color:var(--ink);background:var(--input);border:1px solid var(--brd);border-radius:7px;padding:8px 9px;min-height:38px}
.bl-input:focus{outline:none;border-color:var(--accent-line)}
.bl-editor.bl-invalid .bl-input{border-color:var(--bad)}
/* I: progressieve, optionele context — nooit negen verplichte dropdowns. */
.ctx-fields{display:flex;flex-direction:column;gap:5px}
.ctx-field{display:flex;flex-direction:column;gap:2px}
.ctx-flabel{font-size:10px;color:var(--ink-faint);letter-spacing:.04em}
.ctx-input,.copm-titel-input,.copm-doel-input{font:inherit;font-size:12px;color:var(--ink);background:var(--input);border:1px solid var(--brd);border-radius:7px;padding:8px 9px;min-height:38px}
.ctx-input:focus,.copm-titel-input:focus,.copm-doel-input:focus{outline:none;border-color:var(--accent-line)}
.copm-titel-input{font-weight:700}
.ctx-fields-title{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;margin:4px 0 2px}
.ctx-toggle{font:inherit;font-size:11.5px;font-weight:600;color:var(--tech);background:none;border:0;padding:4px 0;cursor:pointer;text-align:left}
.ctx-collapsed{display:none}.ctx-collapsed.open{display:block}
.copm-edit{display:flex;flex-direction:column;gap:6px}
/* §7/§8: niveau + uitzondering in trainerstaal, compact. */
.copm-niveau-row{display:flex;flex-direction:column;gap:5px}
.copm-niveau{font:inherit;font-size:12px;color:var(--ink);background:var(--input);border:1px solid var(--brd);border-radius:7px;padding:8px 9px;min-height:38px}
.copm-specifics{display:flex;flex-direction:column;gap:5px}
.copm-uitz{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-dim)}
.copm-edit-foot{display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:wrap}
.copm-edit-actions{display:flex;gap:6px}
/* §42: oranje alleen als accent; bevestiging compact, geen groot vlak. */
.copm-done{font:inherit;font-size:12px;font-weight:700;color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:7px;padding:7px 12px;min-height:34px;cursor:pointer}
.copm-cancel{font:inherit;font-size:12px;font-weight:600;color:var(--ink-dim);background:var(--panel);border:1px solid var(--brd);border-radius:7px;padding:7px 10px;min-height:34px;cursor:pointer}
/* §10: compacte add-actie i.p.v. grote oranje knop. */
.copm-add{font:inherit;font-size:12.5px;font-weight:600;color:var(--accent-ink);background:none;border:1px dashed var(--accent-line);border-radius:8px;padding:9px 10px;min-height:40px;width:100%;cursor:pointer;margin-top:6px;text-align:left;touch-action:manipulation}
.copm-add:hover{background:var(--accent-soft)}
.is-hidden{display:none}
/* §13-§16: live-editable block — flat inline title/bullets (caret-at-click), metadata
   behind a compact context line. No boxes until focused; no full-card expand. */
.copm-titel-live,.copm-doel-live{width:100%;font:inherit;border:0;background:none;padding:3px 4px;margin:-3px 0 1px;border-radius:5px}
.copm-titel-live{font-weight:800;color:var(--ink);font-size:12.5px}
.copm-doel-live{font-weight:700;color:var(--ink);font-size:12px}
.copm-titel-live::placeholder,.copm-doel-live::placeholder{color:var(--ink-faint);font-weight:500}
.copm-titel-live:focus,.copm-doel-live:focus{outline:none;background:rgba(255,255,255,.05)}
.bl-flat{gap:1px;margin:2px 0}
.bl-flat .bl-row{align-items:baseline}
.bl-flat .bl-input{border:0;background:none;min-height:0;padding:3px 4px;font-size:12px;color:var(--ink-dim);border-radius:5px}
.bl-flat .bl-input:focus{outline:none;background:rgba(255,255,255,.05);color:var(--ink)}
.copm-meta-btn{font:inherit;font-size:10.5px;color:var(--tech);background:none;border:0;padding:5px 0 2px;cursor:pointer;text-align:left;letter-spacing:.02em}
.copm-meta-btn:hover{color:var(--ink-dim)}
.copm-meta-pop{margin-top:6px;padding:8px;background:rgba(0,0,0,.22);border:1px solid var(--brd);border-radius:8px;display:flex;flex-direction:column;gap:6px}
form.add{margin-top:8px;display:flex;flex-direction:column;gap:6px;background:var(--panel);border:1px solid var(--brd);border-radius:10px;padding:9px}
form.add select,form.add input,form.add textarea{font:inherit;font-size:12px;color:var(--ink);background:var(--input);border:1px solid var(--brd);border-radius:7px;padding:9px 9px;min-height:40px}
form.add textarea{resize:vertical;min-height:44px}
form.add .row{display:flex;gap:6px}form.add .row>*{flex:1}
form.add button{font:inherit;font-size:13px;font-weight:700;color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:8px;padding:11px;min-height:44px;cursor:pointer;touch-action:manipulation}
.muted{font-size:11px;color:var(--ink-faint)}

/* Dev-only afstelvenster (Werkspoor A). Deliberately loud so it can never be
   mistaken for product UI; only mounted in dev mode. */
.dev-tuning{position:fixed;top:10px;right:10px;z-index:9999;width:270px;max-height:88vh;overflow:auto;background:#1a1206;border:2px solid #ff7a1a;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.55);font-family:ui-monospace,Menlo,Consolas,monospace;color:#ffe9d2}
.dev-tuning-header{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid rgba(255,122,26,.4);position:sticky;top:0;background:#1a1206}
.dev-tuning-badge{font-weight:800;font-size:10px;letter-spacing:.12em;background:#ff7a1a;color:#1a1206;border-radius:4px;padding:2px 6px}
.dev-tuning-title{font-size:12px;font-weight:700;flex:1}
.dev-tuning-collapse{min-height:0;padding:0 8px;line-height:1.6;background:transparent;border:1px solid rgba(255,122,26,.5);color:#ffe9d2;border-radius:6px;cursor:pointer}
/* Werkspoor K: collapsed = a small, subtle orange DEV button only. Hide the title,
   body and collapse glyph; the compact header (just the DEV badge) is the opener. */
.dev-tuning.is-collapsed{width:auto;border-width:1px;border-color:rgba(255,122,26,.55);background:rgba(26,18,6,.82);box-shadow:0 4px 14px rgba(0,0,0,.4)}
.dev-tuning.is-collapsed .dev-tuning-header{padding:5px 8px;border-bottom:0;cursor:pointer;background:transparent}
.dev-tuning.is-collapsed .dev-tuning-header:hover{background:rgba(255,122,26,.12)}
.dev-tuning.is-collapsed .dev-tuning-title,.dev-tuning.is-collapsed .dev-tuning-collapse{display:none}
.dev-tuning.is-collapsed .dev-tuning-badge{font-size:11px;padding:3px 8px}
.dev-tuning.is-collapsed .dev-tuning-body{display:none}
/* Afronding P2 §10: mounted INSIDE the right panel (bottom of #tabpanel) the DEV section is a
   normal collapsible block in the panel flow — no floating window over the field. */
.tabpanel .dev-tuning{position:static;width:auto;max-height:none;margin:18px 0 0;box-shadow:none;border-width:1px}
.tabpanel .dev-tuning.is-collapsed{display:inline-block}
.dev-tuning-body{padding:8px 10px}
.dev-tuning-note{margin:0 0 8px;font-size:10px;color:#ffb98a;line-height:1.4}
.dev-tuning-group{margin-bottom:8px}
.dev-tuning-grouptitle{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#ff9c52;margin-bottom:4px}
.dev-tuning-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 8px;margin-bottom:5px}
.dev-tuning-label{grid-column:1 / -1;font-size:11px;color:#ffe9d2}
.dev-tuning-row input[type=range]{width:100%;accent-color:#ff7a1a}
.dev-tuning-value{font-size:11px;font-variant-numeric:tabular-nums;color:#ffd0a3;min-width:44px;text-align:right}
.dev-tuning-select{width:100%;font:inherit;font-size:11px;color:#ffe9d2;background:#2a1c0a;border:1px solid rgba(255,122,26,.5);border-radius:6px;padding:5px 6px}
.dev-tuning-actions{display:flex;gap:6px;margin-top:6px}
.dev-tuning-actions button{flex:1;min-height:0;padding:6px 8px;font-size:11px;background:#2a1c0a;border:1px solid rgba(255,122,26,.5);color:#ffe9d2;border-radius:6px;cursor:pointer}

/* F1b formaties & bezetting (Scène-tab) — bestaande tokens/controls (chipseg, scene-btn, muted). */
.fm-group{display:grid;gap:8px;margin:4px 0 6px}
.fm-row{display:grid;gap:4px;font-size:12px;color:var(--ink-dim)}
.fm-team{font-weight:600;color:var(--ink);font-size:12px}
.fm-field{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-dim)}
.fm-field>span{flex:0 0 82px}
.fm-select{flex:1 1 auto;min-width:0;width:100%;font:inherit;font-size:12px;color:var(--ink);background:var(--panel);border:1px solid var(--brd);border-radius:7px;padding:6px 8px;min-height:34px}
.fm-switch{display:grid;gap:5px;margin:2px 0 6px}
.fm-lineup-toggle{display:block;width:100%;text-align:left;font:inherit;font-size:11.5px;font-weight:600;color:var(--ink-dim);background:none;border:1px solid var(--brd);border-radius:7px;padding:6px 9px;min-height:32px;cursor:pointer;touch-action:manipulation}
.fm-lineup-toggle:hover{color:var(--ink);border-color:var(--brd-2)}
.fm-lineup{display:grid;gap:4px;margin:4px 0 6px}
.fm-lineup-row{display:flex;gap:4px;align-items:center}
.fm-lineup-row input{font:inherit;font-size:12px;color:var(--ink);background:var(--panel);border:1px solid var(--brd);border-radius:7px;padding:6px 7px;min-height:32px;min-width:0}
.fm-num{flex:0 0 44px;text-align:center}.fm-name{flex:1 1 auto}.fm-lab{flex:0 0 46px;text-align:center;text-transform:uppercase}
.fm-rm{flex:0 0 auto;font:inherit;font-size:14px;color:var(--ink-faint);background:none;border:1px solid transparent;border-radius:7px;min-height:32px;min-width:32px;cursor:pointer;touch-action:manipulation}
.fm-rm:hover{color:var(--ink);background:var(--panel)}
.fm-add{font:inherit;font-size:11.5px;font-weight:700;color:var(--accent-ink);background:var(--accent-soft);border:1px dashed var(--accent-line);border-radius:7px;padding:6px 9px;min-height:32px;cursor:pointer;touch-action:manipulation;text-align:left}
.fm-add:hover{filter:brightness(1.08)}
.fm-assign{display:grid;gap:3px;margin:4px 0 6px}
.fm-assign-row{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;font-size:11.5px;color:var(--ink-dim)}
/* positienummer + Nederlandse benaming op een eigen regel boven de keuze: past in het smalle paneel */
.fm-assign-row .fm-code{flex:1 0 100%;font-weight:700;color:var(--ink);letter-spacing:.02em;line-height:1.25}
.fm-assign-row .fm-select{flex:1 1 auto;min-width:0;min-height:30px;padding:4px 7px}
.fm-dia{display:grid;gap:6px;margin:4px 0 6px}
.fm-dia-row{display:grid;gap:4px;font-size:12px}
.fm-dia-new{outline:1px solid var(--accent-line);border-radius:8px;padding:4px}
.fm-apply{font-weight:700;color:var(--accent-ink);border-color:var(--accent-line);background:var(--accent-soft)}
.fm-apply:disabled{opacity:.45;cursor:default}
.fm-reason{margin-top:1px}

/* F1b-correctie: gedeelde select-leesbaarheid (dark mode). Oorzaak van de PO-bug: een select met een
   TRANSLUCENTE achtergrond (--panel = rgba .06) laat Chromium de geopende optielijst over wit tekenen
   terwijl de tekst de lichte --ink erft → lichtgrijs op wit. Oplossing = één gedeeld thema-patroon
   voor élke select in de editor: opaque donkere achtergrond, color-scheme dark (Chromium/Edge
   tekenen de popup dan donker) en expliciete option-kleuren (Firefox honoreert option-styling). */
select,.fm-select,form.add select{color-scheme:dark;background-color:#161b23;color:var(--ink)}
select option,.fm-select option{background:#161b23;color:var(--ink)}
select option:checked{background:#2a3442}
.fm-select{background:#161b23}
/* Disclosures (Teaminstellingen / Spelers / Posities / Formatie toepassen) — ingeklapt standaard. */
.fm-summary{margin:-2px 0 6px}
.fm-disclosure{display:block;width:100%;text-align:left;font:inherit;font-size:11.5px;font-weight:600;color:var(--ink-dim);background:none;border:1px solid var(--brd);border-radius:7px;padding:6px 9px;min-height:32px;cursor:pointer;touch-action:manipulation;margin:3px 0}
.fm-disclosure:hover{color:var(--ink);border-color:var(--brd-2)}
.fm-disclosure[aria-expanded="true"]{color:var(--ink);border-color:var(--accent-line)}
.fm-config,.fm-apply-box{padding:2px 0 4px 6px;border-left:2px solid var(--accent-line);margin:0 0 6px 2px}

/* F1b UX-correctie: Structuur → Veldhoogte per team (gedeeld blok), + Nieuwe dia als overlay. */
.fm-team-block{display:grid;gap:5px;margin:0;padding:8px 10px;border:1px solid var(--brd);border-radius:10px;min-width:0}
fieldset.fm-team-block{padding:10px 12px 12px}
.fm-team-block legend{padding:0 4px;font-size:12px;font-weight:700;color:var(--ink)}
.fm-team-block>.fm-team{margin-bottom:2px}
.fm-choice-label{display:flex;align-items:baseline;gap:8px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;margin-top:4px}
.fm-choice-label.fm-missing,.fm-choice-hint.fm-missing,.muted.fm-missing{color:var(--amber)}
.fm-suggested{font-size:10.5px;letter-spacing:0;text-transform:none;font-weight:600;color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:999px;padding:1px 7px}
.fm-chips.is-inactive button{opacity:.38;cursor:default}
.fm-chips.is-inactive button:hover{color:var(--ink-dim);border-color:var(--brd)}
.fm-choice-hint{margin-top:-1px}
.fm-feedback{margin-top:2px}
.fm-dia .fm-team-block{padding:6px 8px}
/* Overlay: één tijdelijke interaction layer boven Bewerken (geen pagina/route/store). */
.nd-backdrop{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(6,9,13,.62);backdrop-filter:blur(2px)}
.nd-dialog{width:min(92vw,820px);max-height:min(92vh,720px);overflow:auto;overscroll-behavior:contain;display:grid;gap:12px;padding:20px 22px;background:var(--card);border:1px solid var(--brd-2);border-radius:14px;box-shadow:0 18px 48px rgba(0,0,0,.5);color:var(--ink)}
.nd-title{font-size:16px;font-weight:800;color:var(--ink)}
.nd-intro{font-size:12px}
.nd-field{display:grid;gap:4px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);font-weight:700}
.nd-name{font:inherit;font-size:13px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--ink);background:var(--input);border:1px solid var(--brd);border-radius:8px;padding:9px 11px;min-height:40px;width:100%;min-width:0}
.nd-teams{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-width:0}
@media (max-width:720px){.nd-teams{grid-template-columns:1fr}.nd-dialog{padding:16px}}
.nd-teams .chipseg button{padding:8px 12px;min-height:36px;font-size:12px}
.nd-formation{display:grid;gap:5px;min-width:0}.nd-formation .fm-select{width:100%;min-height:36px;font-size:13px}.nd-formation .fm-select:disabled{opacity:.45}
.nd-feedback{font-size:12px}
/* v0.65.185: "Zelfde spelers als vorige dia" — groot genoeg tikvlak (44px), uitleg eronder. */
.nd-continue{display:grid;row-gap:2px;padding:8px 10px;border:1px solid var(--brd);border-radius:9px;background:var(--panel);font-size:13px;color:var(--ink)}
.nd-continue-label{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.nd-continue input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--accent);cursor:pointer}
.nd-continue-hint{padding-left:30px;font-size:12px}
.nd-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:2px}
.nd-create{flex:1 1 220px;font:inherit;font-size:13px;font-weight:800;color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:9px;padding:10px 14px;min-height:42px;cursor:pointer;touch-action:manipulation}
.nd-create:hover:not(:disabled){background:var(--accent-hover)}
.nd-create:disabled{opacity:.42;cursor:default;filter:none}
.nd-plain{font:inherit;font-size:12px;font-weight:600;color:var(--ink-dim);background:none;border:1px dashed var(--brd-2);border-radius:9px;padding:10px 12px;min-height:42px;cursor:pointer;touch-action:manipulation}
.nd-plain:hover{color:var(--ink);border-color:var(--accent-line)}
.nd-cancel{font:inherit;font-size:12px;color:var(--ink-dim);background:none;border:1px solid var(--brd);border-radius:9px;padding:10px 12px;min-height:42px;cursor:pointer;touch-action:manipulation}

/* ---- M4 — PRESENTEREN (Accepted ADR-0051) -------------------------------------------------
   De presentatieomgeving kent exact twee producttoestanden: Bewerken en Presenteren. Presenteren
   is GEEN tweede editor, geen tweede layout en geen tweede Scene: het is DEZELFDE dia — dezelfde
   16:9 Stage, dezelfde achtergrond, dezelfde placement, dezelfde Presentation View, dezelfde
   Scene — met het bewerkingsgereedschap eraf. Er wordt hier dus niets opnieuw getekend; er wordt
   alleen editor-chroom verborgen.

   Presenteren is ook nadrukkelijk NIET Focus. Focus is een bewerkingshulpmiddel binnen Bewerken;
   die semantiek blijft ongemoeid. De twee sluiten elkaar uit: Presenteren verlaat Focus. */
body.presenteren .top,
body.presenteren #topExpand,
body.presenteren #focusStrip,
body.presenteren #focusSuggest,
body.presenteren .col.left,
/* Het rechterpaneel wordt met een ID gestyled (`#workspace{display:flex}`), en een ID wint van
   een klasse. Daarom hier ook op ID — anders blijft het paneel staan en krijgt de Stage geen
   breedte meer in het grid. */
body.presenteren #workspace,
body.presenteren #hint,
body.presenteren #animationStrip{display:none}
/* Dezelfde grid-correctie als Focus: zonder kopbalk schuift `.body` naar de auto-rij en zou de
   16:9 Stage alleen zijn contenthoogte krijgen. Eén expliciete rij geeft de dia de volle ruimte. */
body.presenteren .app{grid-template-rows:1fr}
body.presenteren .body{grid-template-columns:minmax(0,1fr)}
/* ADR-0028/ADR-0051: Presenteren toont ALTIJD de volledige Stage. De bestaande uniforme Fit doet
   dat al; hier wordt alleen de editor-padding weggehaald zodat de dia zo groot mogelijk staat en
   de pagina zelf nooit gaat scrollen (laptop/digibord). */
body.presenteren .field-wrap{padding:0}
body.presenteren{overflow:hidden}
/* v0.65.143 (PO): in Presenteren is buiten de Presentation Stage geen app-shell/achtergrond zichtbaar.
   De presentatie vult de volle viewport: de effectieve presentatieachtergrond (dezelfde als die van de
   Stage, ADR-0031) ligt als vaste laag achter alles, de app-wrappers zijn transparant en de Stage staat
   zonder buitenmarge in het midden (uniforme Fit, ADR-0028). De interne compositie (titelband, veld-
   placement, Safe Area) verandert niet; alleen de buitenliggende editorachtergrond en -marge verdwijnen. */
.present-viewport-bg{display:none}
body.presenteren .present-viewport-bg{display:block;position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:var(--theme-stage-surface,#0f131a)}
body.presenteren{background:var(--theme-stage-surface,#0f131a)}
body.presenteren .app{position:relative;z-index:1;background:transparent}
body.presenteren .stage{padding:0} /* was 10px: dat liet de app-achtergrond rond de Stage zien */
body.presenteren .col.stage{overflow:hidden}
body.presenteren .stage-frame{outline:none;background:transparent}
/* v0.65.145 (PO-handtest: bij een achtergrondafbeelding stond er een tweede, anders uitgesneden kopie
   rond de Stage): in Presenteren is er precies ÉÉN achtergrondweergave — de viewportlaag. De Stage zelf
   is dan transparant en tekent haar eigen achtergrondlaag niet (ook niet in de overgangskopie), dus geen
   naad, geen tweede crop. Titel en veld blijven binnen de 16:9-compositie. */
body.presenteren .stage-frame > .stage-background{display:none}

/* Geen enkel bewerkingsaffordance in beeld — ook niet bij hover. Dit is de volledige
   editorchroom-lijst uit de veldrenderer; presentatie-inhoud (veld, spelers, bal, lijnen, zones,
   achtergrond, titelzone) blijft juist staan. */
body.presenteren .stage-handle{display:none}
/* ADR-0029 Am. 1 (PO 2026-10-29): de lijn-, koppel- en padgrepen verschijnen in Presenteren ALLEEN zolang de
   trainer bewust bewerkt (body.live-bewerken: Pijl/Paden, een selectie of een open animatiegroep). Daarbuiten
   blijft het beeld exact zo rustig als hiervoor; Stage-grepen blijven altijd verborgen. */
body.presenteren:not(.live-bewerken) .line-handle,
body.presenteren:not(.live-bewerken) .line-waypoint,
body.presenteren:not(.live-bewerken) .line-bend-candidate,
body.presenteren:not(.live-bewerken) .line-bend-grip,
body.presenteren:not(.live-bewerken) .route-point,
body.presenteren:not(.live-bewerken) .sel-endpoint,
body.presenteren:not(.live-bewerken) .line-move-hit,
body.presenteren:not(.live-bewerken) .line-move-stem,
body.presenteren:not(.live-bewerken) .line-move-dot,
body.presenteren:not(.live-bewerken) .line-move-icon,
body.presenteren:not(.live-bewerken) .path-continue-stem,
body.presenteren:not(.live-bewerken) .path-continue-dot,
body.presenteren:not(.live-bewerken) .path-continue-plus,
body.presenteren:not(.live-bewerken) .path-draft-line,
body.presenteren:not(.live-bewerken) .path-draft-point,
body.presenteren:not(.live-bewerken) .draw-preview,
body.presenteren:not(.live-bewerken) .snap-ring,
body.presenteren:not(.live-bewerken) .movement-path-construct,
body.presenteren:not(.live-bewerken) .movement-path-vooractie,
body.presenteren:not(.live-bewerken) .movement-path-vooractie-leg,
body.presenteren:not(.live-bewerken) .movement-path-hit,
/* Fase 1 (landing op main): ook de CONTAINERS en onzichtbare hit-vlakken van dezelfde grepen, zodat
   de invariant "geen editorgrepen in Presenteren" op elke klasse geldt die de renderer uitstoot —
   niet alleen op de zichtbare kinderen. Getest tegen de renderer-bron (presenteren-invariant). */
body.presenteren:not(.live-bewerken) .line-move-grip,
body.presenteren:not(.live-bewerken) .path-continue-grip,
body.presenteren:not(.live-bewerken) .path-continue-hit,
body.presenteren:not(.live-bewerken) .route-point-token,
body.presenteren:not(.live-bewerken) .route-point-hit,
body.presenteren:not(.live-bewerken) .movement-path-vooractie-hit,
body.presenteren:not(.live-bewerken) .movement-path-layer,
body.presenteren:not(.live-bewerken) .movement-path-bend,
body.presenteren:not(.live-bewerken) .movement-path-handle{display:none}
/* Selectie is bewerkingsstaat, geen inhoud: geen ring om het veldgebied, geen accentcontour om
   speler of bal, en geen hover-verdikking die tijdens het presenteren "meebeweegt". */
body.presenteren .stage-field.is-selected{outline:none}
body.presenteren .player-token.is-selected .player{stroke:var(--theme-own-team-border);stroke-width:calc(2.5 * var(--visual-scale,1))}
body.presenteren .player-token.team-2.is-selected .player{stroke:var(--theme-opponent-border)}
body.presenteren .player-token.is-selected.is-goalkeeper .player{stroke:var(--theme-goalkeeper-border)}
body.presenteren .player-token:hover .player{stroke-width:calc(2.5 * var(--visual-scale,1))}
body.presenteren .ball-token.is-selected .ball{stroke:var(--theme-ball-patch);stroke-width:calc(1.8 * var(--visual-scale,1))}
/* De dia is in Presenteren om naar te KIJKEN. Geen pointer op de Scene betekent per constructie
   dat er niets versleept, geselecteerd of gemuteerd kan worden — sterker dan per handler afvangen.
   (De bounded live coach-acties van ADR-0029/ADR-0051 zijn een latere, aparte slice.) */
/* M4-correctie: Presenteren is LIVE COACHEN, geen kijkmodus. De generieke pointer-blokkade is
   weg; speler en bal zijn versleepbaar. Alleen authoringgereedschap blijft verborgen (zie de
   regels hierboven) en de tekencursor hoort hier niet. */
body.presenteren svg.pitch{cursor:default}
body.presenteren .player-token,body.presenteren .ball-token{cursor:grab}
body.presenteren svg.pitch.is-dragging .player-token,body.presenteren svg.pitch.is-dragging .ball-token{cursor:grabbing}

/* De rustige Presenteren-balk: dezelfde compacte, semi-transparante taal als de bestaande
   dia-indicator in Focus. Alleen de twee frequente handelingen (vorige/volgende), afspelen als de
   dia animatie heeft, en de uitgang terug naar Bewerken. Geen presentatieconsole. */
#presentBar{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;z-index:60;display:flex;gap:4px;align-items:center;
  background:rgba(16,20,27,.55);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:3px 5px;
  box-shadow:0 4px 16px rgba(0,0,0,.3);backdrop-filter:blur(3px);opacity:1;transition:opacity var(--motion-large) var(--motion-ease)}
#presentBar button{font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-dim);background:none;border:0;border-radius:999px;
  min-width:38px;min-height:38px;padding:0 10px;cursor:pointer;touch-action:manipulation}
#presentBar button:hover:not(:disabled){color:var(--ink);background:rgba(255,255,255,.06)}
#presentBar button:disabled{opacity:.32;cursor:default}
#presentBar .pb-count{font-size:12px;color:var(--ink-faint);font-variant-numeric:tabular-nums;padding:0 6px;white-space:nowrap}
#presentBar .pb-exit{color:var(--accent-ink)}
/* Het coachmenu (M4/ADR-0051): de herstelacties staan een tik weg, boven de balk, zodat de
   trainer ze vindt zonder dat ze permanent zichtbaar zijn. Een echte popover, geen extra
   knoppenrij in de balk zelf. */
#coachMenu{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;min-width:210px;padding:4px;
  background:var(--panel,#151a22);border:1px solid rgba(255,255,255,.12);border-radius:12px;
  box-shadow:0 10px 28px rgba(0,0,0,.45)}
#coachMenu button{justify-content:flex-start;text-align:left;width:100%;min-height:36px;border-radius:8px;
  padding:0 10px;font-weight:500;display:flex;align-items:center}

/* Scène-tab › Achtergrond (Presentatiestijl, ADR-0031 + Addendum 1 vrije kleur).
   Compact: drie smalle rijen onder de bestaande Veld-bediening, geen apart stijlscherm. */
.bg-scope{margin-bottom:6px}
.bg-presets{margin-bottom:6px}
/* Een snelle kleur is een KLEURKEUZE, geen tekstknop: het bolletje toont waar je voor kiest.
   "Standaard" heeft geen kleur en dus geen bolletje — dat is de terugval, geen zesde kleur. */
.bg-preset{display:inline-flex;align-items:center;gap:6px}
.bg-preset[style*="--bg-swatch"]::before{content:"";width:12px;height:12px;border-radius:4px;background:var(--bg-swatch);border:1px solid var(--brd-2);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
/* Eigen kleur: dezelfde vorm als de bestaande spelerkleurkiezer, zodat er één kleurbediening
   in de app is en geen tweede visuele taal ontstaat. */
.bg-custom{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--ink-dim);background:var(--panel);border:1px solid var(--brd);border-radius:8px;padding:4px 9px 4px 4px;min-height:32px;cursor:pointer;touch-action:manipulation;margin-bottom:6px}
.bg-custom input[type="color"]{width:26px;height:26px;padding:0;border:1px solid var(--brd-2);border-radius:6px;background:none;cursor:pointer}
.bg-custom input[type="color"]::-webkit-color-swatch-wrapper{padding:2px}
.bg-custom input[type="color"]::-webkit-color-swatch{border:0;border-radius:4px}
.bg-image-row{margin-bottom:6px}
.bg-file{display:none}
.bg-overlay-row{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-dim);margin:2px 0 6px}
.bg-overlay-row span{flex:0 0 auto;font-weight:600;color:var(--ink)}
.bg-overlay{flex:1 1 auto;min-width:0;accent-color:var(--accent);cursor:pointer;touch-action:manipulation}
/* v0.65.110 Tekencorrectie — zelfde range-component als de achtergronddemping hierboven, compact
   onder de pijlkleur in het blok "Pijl" (geldt net als de kleur alleen voor nieuwe pijlen). */
.tc-block{margin-top:10px}
.tc-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.tc-title{margin:0 0 4px}
.tc-slider{display:block;width:100%;margin:0;accent-color:var(--accent);cursor:pointer;touch-action:manipulation}
.tc-ends{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;color:var(--ink-faint);margin-top:2px}
.tc-reset{font:inherit;font-size:10.5px;color:var(--accent-ink);background:none;border:0;padding:2px 0;cursor:pointer;touch-action:manipulation}
.tc-reset:disabled{color:var(--ink-faint);cursor:default;opacity:.55}
.bg-feedback{font-size:11px}

/* ---- Motion — product-/UI-laag (v0.65.111) -----------------------------------------------
   Eén rustige taal voor de editor en Presenteren: alleen opacity/transform/kleur, altijd via de
   tokens in :root, nooit blokkerend (pointer-events blijven aan), en nooit op het veld zelf — de
   SVG-inhoud beweegt alleen door tactische animatie (ADR-0035). Elke regel hieronder legt iets
   uit: waar een menu vandaan komt, dat een paneel nieuw in beeld is, dat de modus wisselt. */
@keyframes ts-fade{from{opacity:0}to{opacity:1}}
@keyframes ts-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes ts-pop{from{opacity:0;transform:translateY(4px) scale(.98)}to{opacity:1;transform:none}}
/* Gecentreerde elementen dragen al translateX(-50%); hun keyframe houdt die vast. */
@keyframes ts-pop-centered{from{opacity:0;transform:translate(-50%,4px) scale(.98)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes ts-rise-centered{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* Knoppen: hover/aan/uit verloopt in één micro-tik in plaats van hard te springen. */
button{transition:color var(--motion-micro) var(--motion-ease),background-color var(--motion-micro) var(--motion-ease),
  border-color var(--motion-micro) var(--motion-ease),opacity var(--motion-micro) var(--motion-ease),filter var(--motion-micro) var(--motion-ease)}
.pc-swatch{transition:transform var(--motion-micro) var(--motion-ease)}
/* Menu's en popovers komen zichtbaar uit hun knop: kort, klein, zonder stuiter. */
#coachMenu{animation:ts-pop-centered var(--motion-small) var(--motion-ease-out)}
#focusDiaMenu,.anim-strip .anim-menu,.anim-strip .anim-members{animation:ts-pop var(--motion-small) var(--motion-ease-out)}
/* Een tabwissel in het rechterpaneel: de nieuwe inhoud verschijnt rustig. */
.tabsec:not([hidden]){animation:ts-fade var(--motion-small) var(--motion-ease-out)}
/* Dialoog (nieuwe dia): achtergrond dimt in, het venster komt iets omhoog. */
.nd-backdrop{animation:ts-fade var(--motion-small) var(--motion-ease-out)}
.nd-dialog{animation:ts-rise var(--motion-medium) var(--motion-ease-out)}
/* Bewerken ↔ Presenteren: het chroom verdwijnt in één keer (ADR-0051, geen half-editor), daarna
   komt de dia rustig in beeld en schuift de Presenteren-balk op zijn plek. De klasse staat er
   alleen kort na de wissel (setPresenting), dus een gewone herrender animeert niets. */
body.ts-mode-switch .stage-frame{animation:ts-fade var(--motion-medium) var(--motion-ease-out)}
body.ts-mode-switch #presentBar{animation:ts-rise-centered var(--motion-medium) var(--motion-ease-out)}

/* ---- Stappen (v0.65.112) ---------------------------------------------------------------------
   "+ Volgende stap" (Bewerken): een rustige Klaar/Annuleer-balk boven de strip, en op het veld per
   verplaatst object een schim op de oude plek met een gestippelde lijn naar de nieuwe — TactiScene
   maakt het verschil zichtbaar. Editorhulp, nooit inhoud. */
#stepDraftBar{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:60;display:flex;gap:8px;align-items:center;
  background:rgba(16,20,27,.94);border:1px solid var(--accent-line);border-radius:10px;padding:6px 10px;box-shadow:0 8px 22px rgba(0,0,0,.5);
  animation:ts-rise-centered var(--motion-small) var(--motion-ease-out)}
#stepDraftBar{flex-wrap:wrap;max-width:min(96vw,900px)}
#stepDraftBar .sd-formation{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
#stepDraftBar .sd-formation select{max-width:180px}
#stepDraftBar .sd-label{font-size:12px;color:var(--ink);font-weight:600}
#stepDraftBar .sd-done:not(:disabled){color:var(--accent-ink);background:var(--accent-soft);border-color:var(--accent-line)}
svg.pitch .step-diff-line{stroke:var(--amber);stroke-width:2;stroke-dasharray:6 5;fill:none;opacity:.85;pointer-events:none}
/* v0.65.146 — selectievak (alleen Bewerken): subtiele rand, lichte vulling, nooit inhoud. */
svg.pitch .marquee-rect{fill:rgba(126,200,255,.12);stroke:rgba(126,200,255,.85);stroke-width:1;stroke-dasharray:4 3;pointer-events:none}
/* v0.65.147 EXPERIMENTEEL — Bewegingsweergave (movement-display.mjs): Spoor en Pijl voor eigen bewegingspaden.
   Kleur van de partij (eigen team geel, tegenstander rood; bal: de partij die hem speelt). Nooit inhoud. */
svg.pitch .movement-display{fill:none;stroke:var(--md-stroke,#f3f6fa);stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
svg.pitch .movement-display.trail{stroke-width:calc(3.2px * var(--visual-scale,1));opacity:.9}
svg.pitch .movement-display.trail.soft{opacity:.38;stroke-linecap:butt}
svg.pitch .movement-display.arrow{stroke-width:calc(2.6px * var(--visual-scale,1));opacity:.95}
svg.pitch .movement-display.arrowhead{fill:var(--md-stroke,#f3f6fa);stroke:none;opacity:.95}
svg.pitch .movement-display.yellow{--md-stroke:var(--theme-run-yellow,#f2c94c)}
svg.pitch .movement-display.red{--md-stroke:var(--theme-pass-red,#e5484d)}
svg.pitch .movement-display.blue{--md-stroke:#4aa3f0}
svg.pitch .movement-display.white{--md-stroke:#f3f6fa}
/* v0.65.147 — PO-testroute: zichtbaar label wanneer de proeven via ?lab=1 aan staan (alleen branchpreview/lokaal). */
.lab-badge{position:fixed;left:8px;bottom:8px;z-index:9998;padding:3px 8px;border-radius:6px;font:700 11px/1.3 var(--f-ui);background:#ff7a1a;color:#1a1206;pointer-events:none;opacity:.85}
svg.pitch .step-diff-ghost{fill:none;stroke:var(--amber);stroke-width:1.6;stroke-dasharray:3 3;opacity:.7;pointer-events:none}
/* Dia-overgangen (v0.65.114/116, dia-transitions.mjs): de Stage-wrapper is de overgangsruimte; de
   uitgaande kopie ligt er absoluut in en alles buiten de Stage-ruimte blijft verborgen. */
body.presenteren .stage-fit{position:relative;overflow:hidden}
/* Presenteren: de ene primaire Volgende en een stille stapaanduiding. */
#presentBar .pb-next{color:var(--ink);background:rgba(255,255,255,.08);padding:0 14px;font-weight:700}
#presentBar .pb-next:hover:not(:disabled){background:rgba(255,255,255,.14)}
.motion-warn{color:var(--amber)}
.flash-hint{position:fixed;left:50%;bottom:64px;transform:translateX(-50%);z-index:70;pointer-events:none;max-width:min(92vw,560px);text-align:center;animation:ts-rise-centered var(--motion-small) var(--motion-ease-out)}
/* v0.65.118 — verschijnen/verdwijnen per stap in de lijnbalk. */
.line-reveal{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;width:100%}
/* v0.65.124: in het smalle rechterpaneel nooit afgekapte keuzelijsten — de lijst neemt de rest van
   de regel, de effectknoppen lopen eronder door. */
.line-reveal > .muted{flex:0 0 64px}
.line-reveal select.pl-input{flex:1 1 120px;min-width:0;max-width:none;font-size:12px;min-height:32px;padding:4px 6px}
.line-reveal .reveal-kind{padding:4px 8px;min-height:28px;font-size:11px}
.line-reveal .reveal-kind[aria-pressed="true"]{color:var(--ink);border-color:var(--accent-line);background:var(--accent-soft)}
.exp-note{margin-top:6px}
/* v0.65.120 EXPERIMENTEEL — Weergave (focus/spotlight) in Presenteren. */
#viewMenu{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;min-width:220px;padding:4px;
  background:var(--panel,#151a22);border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.45);animation:ts-pop-centered var(--motion-small) var(--motion-ease-out)}
#viewMenu button{justify-content:flex-start;text-align:left;width:100%;min-height:36px;border-radius:8px;padding:0 10px;font-weight:500;display:flex;align-items:center}
#viewMenu button[aria-pressed="true"]{color:var(--ink);background:rgba(255,255,255,.08)}
#presentBar #viewMenuBtn.is-on{color:var(--accent-ink)}
body.presenteren .stage-field{overflow:hidden}
body.presenteren svg.pitch .spot-dim > *{opacity:var(--spot-dim,.22)}
#presentBar .pb-step{font-size:11.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums;padding:0 6px;white-space:nowrap}
/* v0.65.133 — vaste presentatiebalk (PO-handtest: de navigatie verschoof per dia). Vaste breedte en
   drie zones; alleen het midden mag krimpen of afkappen. Prioriteit bij weinig ruimte: navigatie,
   ▶, ⏮, menu's; de stapaanduiding verdwijnt als eerste. Geen horizontale scrollbalk. */
#presentBar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;width:min(760px,calc(100% - 24px));box-sizing:border-box}
#presentBar .pb-zone{display:flex;align-items:center;gap:4px;min-width:0}
#presentBar .pb-mid{justify-content:center;overflow:hidden}
#presentBar .pb-act{justify-content:flex-end}
#presentBar .pb-count{display:inline-block;min-width:5.2ch;text-align:center}
#presentBar .pb-next{width:112px;flex:none}
#presentBar .pb-step{overflow:hidden;text-overflow:ellipsis;min-width:0}
/* v0.65.134 (review A High): de navigatie- en actiezone krimpen NOOIT onder hun inhoud (anders
   overlapten ◎ en Volgende en verdwenen ▶/⏮ onder 600 px). Bij weinig ruimte verdwijnen minder
   belangrijke onderdelen in deze volgorde (verborgen = ook uit de tabvolgorde):
   ≤ 640 px: stapaanduiding, ↶, ↷;  ≤ 480 px: ook de teller en ◎ (Weergave). Navigatie, ▶, ⏮,
   ••• en Bewerken blijven altijd. */
#presentBar .pb-nav,#presentBar .pb-act{min-width:max-content}
.dia-grip{flex:none;width:16px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-faint);cursor:grab;touch-action:none;user-select:none;font-size:11px;letter-spacing:-2px;opacity:.55}
.dia-row:hover .dia-grip,.dia-row:focus-within .dia-grip{opacity:1}
.dia-row.is-dragging{opacity:.55}
body.dia-dragging,body.dia-dragging *{cursor:grabbing !important}
.dia-drop-line{height:2px;margin:1px 4px;border-radius:2px;background:var(--accent);pointer-events:none}
.dia-more{flex:none;background:none;border:0;color:var(--ink-faint);border-radius:6px;min-width:26px;min-height:26px;cursor:pointer;font:inherit;font-size:14px;line-height:1}
.dia-more:hover,.dia-more[aria-expanded="true"]{color:var(--ink);background:rgba(255,255,255,.06)}
.dia-row-menu{display:flex;flex-direction:column;gap:1px;margin:2px 6px 6px 22px;padding:4px;background:var(--panel-2,var(--card));border:1px solid var(--brd-2,rgba(255,255,255,.12));border-radius:9px;box-shadow:0 10px 26px rgba(0,0,0,.45)}
.dia-row-menu button{font:inherit;font-size:12px;text-align:left;color:var(--ink-dim);background:none;border:0;border-radius:6px;padding:7px 9px;cursor:pointer}
.dia-row-menu button:hover:not(:disabled),.dia-row-menu button:focus-visible{color:var(--ink);background:rgba(255,255,255,.06)}
.dia-row-menu button:disabled{opacity:.4;cursor:default}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:640px){#presentBar .pb-step,#presentBar [data-pb="↶"],#presentBar [data-pb="↷"]{display:none}#presentBar .pb-mid{min-width:max-content}}
@media (max-width:480px){#presentBar{width:calc(100% - 12px)}#presentBar .pb-zone{gap:0}#presentBar button{min-width:34px;padding:0 6px}#presentBar .pb-next{width:92px}#presentBar .pb-count,#presentBar [data-pb="◎"]{display:none}}
/* De menu's openen boven hun eigen knop aan de rechterkant van de balk (de balk is nu vast breed). */
#presentBar #viewMenu,#presentBar #coachMenu{left:auto;right:6px;transform:none;animation-name:ts-pop}

/* v0.65.123 — editorfeedback: een gepakte speler/bal "komt los" (statische schaduw, geen stuiter —
   het veld wordt per beweging opnieuw getekend, dus alleen statische stijl). De tijdlijn komt
   rustig in beeld bij uitklappen. */
svg.pitch.is-dragging .player-token.is-selected .player,svg.pitch.is-dragging .ball-token.is-selected .ball{filter:drop-shadow(0 4px 5px rgba(0,0,0,.45))}
body.presenteren svg.pitch.is-dragging .player-token.is-selected .player{filter:drop-shadow(0 4px 5px rgba(0,0,0,.4))}
.anim-strip:not(.collapsed) .anim-timeline{animation:ts-fade var(--motion-small) var(--motion-ease-out)}

/* Toegankelijkheid: wie beperkte beweging vraagt, krijgt elke UI-overgang als directe wissel. */
/* v0.65.116: de app-voorkeur "Beweging" (motion.mjs) gaat voor de systeeminstelling:
   html[data-motion="full"] toont beweging toch, html[data-motion="reduced"] beperkt altijd. */
@media (prefers-reduced-motion: reduce){
  html:not([data-motion="full"]) *,html:not([data-motion="full"]) *::before,html:not([data-motion="full"]) *::after{animation-duration:1ms !important;animation-iteration-count:1 !important;
    transition-duration:1ms !important;scroll-behavior:auto !important}
}
html[data-motion="reduced"] *,html[data-motion="reduced"] *::before,html[data-motion="reduced"] *::after{animation-duration:1ms !important;animation-iteration-count:1 !important;
  transition-duration:1ms !important;scroll-behavior:auto !important}

/* v0.65.126 — Duur (presentation-timing.mjs): − [2,0] s +, seconden in trainerstaal. */
.dur-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.dur-row .dur-label{flex:1 1 120px;min-width:0;font-size:12px;color:var(--ink-dim)}
.dur-ctl{display:inline-flex;align-items:center;gap:4px}
.dur-ctl .dur-step{font:inherit;font-size:14px;font-weight:700;color:var(--ink);background:var(--panel);border:1px solid var(--brd);border-radius:7px;min-width:30px;min-height:30px;cursor:pointer;touch-action:manipulation}
.dur-ctl .dur-step:disabled{opacity:.4;cursor:default}
.dur-ctl .dur-input{font:inherit;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;text-align:center;color:var(--ink);background:var(--panel);border:1px solid var(--brd);border-radius:7px;width:52px;min-height:30px;padding:2px 4px}
.dur-ctl .dur-unit{font-size:12px;color:var(--ink-dim)}
.dur-ctl .dur-step:focus-visible,.dur-ctl .dur-input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.dur-note{margin-top:6px;font-size:11px}
/* ---- Video V1a/V1b: Analyse-beeld op de dia ------------------------------------------- */
.stage-video{position:absolute;z-index:3;background:#05070a;border-radius:6px;overflow:hidden;container-type:inline-size}
.stage-frame.has-full-video .stage-field,.stage-frame.has-full-video .stage-title{visibility:hidden}
/* PO 2026-10-28 (Deel B): "op de hele dia" laat rondom een bescheiden rand van de dia zien (de plaatsing komt uit
   videoStagePlacement). Geen eigen kader: buiten het beeld is het vak transparant, zodat de dia-achtergrond ook naast
   een smallere bron zichtbaar blijft; alleen bij laden/niet beschikbaar een donkere ondergrond voor de melding. */
.stage-frame.has-full-video .stage-video{border-radius:0}
.stage-frame.has-full-video .stage-video:not(.sv-fullscreen){border-radius:6px}
.stage-frame.has-full-video .stage-video:not(.sv-fullscreen):not(.is-unavailable):not([data-state="loading"]){background:transparent}
.stage-frame.has-full-video .stage-video:not(.sv-fullscreen):not(.is-unavailable):not([data-state="loading"]) video{background:transparent}
/* Clublogo en tekstkolom lagen vroeger onder het volle beeld; met de rand blijven ze verborgen, zoals veld en titel
   (review): in de rand is alleen de dia-achtergrond zichtbaar. */
.stage-frame.has-full-video .stage-club-logo,.stage-frame.has-full-video .stage-text-column{visibility:hidden}
.stage-video .sv-window{position:absolute;inset:0;overflow:hidden}
/* ADR-0069 P1 (B5): uitlegmarkeringen boven het beeld, alleen-lezen; klikken gaan door naar de speler. */
.stage-video .sv-window .sv-uitleg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.stage-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.stage-video.is-cropped .sv-window{inset:auto}
.stage-video.is-cropped video{object-fit:fill}
.stage-video .sv-msg{position:absolute;left:0;right:0;top:0;padding:10px 12px;font-size:13px;color:#e8edf3;background:rgba(0,0,0,.55);pointer-events:none}
.stage-video .sv-msg:empty{display:none}
.stage-video.is-unavailable .sv-msg{top:40%;text-align:center;font-size:15px;background:none}
/* Bronbadge in de editor: beeld uit een andere wedstrijd dan die van de bespreking. */
.stage-video .sv-source{position:absolute;left:8px;top:8px;max-width:calc(100% - 16px);padding:3px 8px;border-radius:6px;background:rgba(0,0,0,.66);color:#ffd98a;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.stage-video .sv-source:empty,.stage-video .sv-source[hidden]{display:none}
/* ADR-0059 Am.11 (5a): "Fragment verschoven" — rustig, links boven (onder het bronlabel als dat er staat). */
.stage-video .sv-shift{position:absolute;left:8px;top:8px;z-index:2;padding:3px 8px;border-radius:6px;background:rgba(0,0,0,.66);color:#e8edf3;font-size:12px;pointer-events:none}
.stage-video .sv-shift[hidden]{display:none}
.stage-video .sv-source:not([hidden]):not(:empty) ~ .sv-shift{top:36px}
/* Tijdelijke reeksoverlay (ADR-0057 Am.3 A3.2 + A3.4): over de rechterzijkant van het beeld, nooit een andere
   videogrootte. ALLE fragmenten in reeksvolgorde; het paneel groeit mee met de reeks tot (bijna) de hele hoogte van het
   videovak en scrolt pas als de reeks daar niet in past. Vaste, leesbare letter die meeschaalt met het videovak (beamer),
   nooit kleiner gemaakt om meer regels te laten passen. Elke regel is een knop. */
.stage-video .sv-peek{position:absolute;top:48px;right:8px;z-index:4;display:flex;flex-direction:column;width:clamp(220px,40%,460px);max-width:calc(100% - 16px);max-height:calc(100% - 56px);box-sizing:border-box;padding:8px 6px 6px 10px;border-radius:10px;background:rgba(10,13,18,.88);border:1px solid rgba(255,255,255,.16);color:#eef2f6;font-size:clamp(14px,1.7cqw,24px);line-height:1.3;pointer-events:none;opacity:0;visibility:hidden;transition:opacity var(--motion-medium) var(--motion-ease),visibility var(--motion-medium) step-end}
.stage-video .sv-peek.is-visible{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--motion-small) var(--motion-ease)}
/* Met de uitgebreide bedieningsbalk open blijft de onderkant vrij voor die balk. */
.stage-video.sv-expanded .sv-peek{max-height:calc(100% - 112px)}
.stage-video .sv-peek-title{flex:0 0 auto;font-weight:700;margin:0 4px 6px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#c9d2dc}
.stage-video .sv-peek-items{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;list-style:none;margin:0;padding:0 4px 0 0;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin}
.stage-video .sv-peek-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;width:100%;box-sizing:border-box;min-height:1.9em;padding:2px 8px;border:0;border-radius:6px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;touch-action:manipulation}
.stage-video .sv-peek-row:not(:disabled):hover{background:rgba(255,255,255,.08)}
.stage-video .sv-peek-row:focus-visible{outline:2px solid #ffd529;outline-offset:-2px}
.stage-video .sv-peek-row:disabled{cursor:default}
.stage-video .sv-peek-n{min-width:1.6em;font-variant-numeric:tabular-nums;color:#9aa6b2}
.stage-video .sv-peek-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage-video .sv-peek-li.is-active .sv-peek-row{background:#211f12;box-shadow:inset 3px 0 0 #ffd529}
.stage-video .sv-peek-li.is-active .sv-peek-n{color:#ffd529;font-weight:700}
.stage-video .sv-peek-li.is-missing .sv-peek-t{opacity:.55}
@media (pointer:coarse){.stage-video .sv-peek-row{min-height:40px}}
.stage-video .sv-peek-btn{position:absolute;top:8px;right:8px;z-index:4;min-width:44px;min-height:32px;padding:3px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.32);color:#fff;font:inherit;font-size:12px;font-variant-numeric:tabular-nums;opacity:.78;cursor:pointer;touch-action:manipulation}
.stage-video .sv-peek-btn:hover,.stage-video .sv-peek-btn:focus-visible{opacity:1}
.stage-video .sv-peek-btn:focus-visible{outline:2px solid #ffd529;outline-offset:2px}
.stage-video .sv-peek-btn[hidden]{display:none}
/* RUSTSTAND: alleen een kleine, transparante play/pauzeknop in de hoek — nooit midden over het beeld. */
.stage-video .sv-rest{position:absolute;left:8px;bottom:8px;width:36px;height:36px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.32);color:#fff;font:inherit;font-size:13px;line-height:1;opacity:.78;cursor:pointer;touch-action:manipulation}
.stage-video .sv-rest:hover,.stage-video .sv-rest:focus-visible{opacity:1}
.stage-video .sv-rest:focus-visible{outline:2px solid #ffd529;outline-offset:2px}
.stage-video .sv-rest:disabled{opacity:.35;cursor:default}
/* ADR-0071 videotekentool: de tekenknop staat naast de rustknop en schuift mee boven de uitgebreide balk; werkbalk en
   tekenpauze liggen boven de balk. Altijd zichtbaar, ook schermvullend en als de rest van de bediening verborgen is. */
.stage-video > .vt-knop{position:absolute;left:52px;bottom:calc(8px + var(--sv-bar-h, 0px));width:36px;height:36px;min-width:36px;font-size:16px;z-index:6}
.stage-video.sv-expanded > .vt-knop{left:8px}
.stage-video > .vt-ui{bottom:calc(10px + var(--sv-bar-h, 0px))}
.stage-video.is-unavailable > .vt-knop,.stage-video[data-state="loading"] > .vt-knop{opacity:.45}
/* UITGEBREID: de rijke balk langs de onderrand; verborgen = onzichtbaar én niet klikbaar. */
.stage-video .sv-bar{position:absolute;left:6px;right:6px;bottom:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 8px;border-radius:10px;background:rgba(10,13,18,.92);border:1px solid rgba(255,255,255,.12);color:#eef2f6;font-size:12.5px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--motion-medium) var(--motion-ease),visibility var(--motion-medium) step-end}
.stage-video.sv-expanded .sv-bar{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--motion-small) var(--motion-ease)}
.stage-video .sv-btn{min-width:36px;min-height:36px;padding:4px 9px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:rgba(255,255,255,.08);color:inherit;font:inherit;cursor:pointer;touch-action:manipulation}
.stage-video .sv-btn[hidden]{display:none}
.stage-video .sv-btn:disabled{opacity:.4;cursor:default}
.stage-video .sv-btn:focus-visible{outline:2px solid #ffd529;outline-offset:1px}
.stage-video .sv-play{background:rgba(255,213,41,.16);border-color:rgba(255,213,41,.5)}
.stage-video .sv-clock{font-variant-numeric:tabular-nums;opacity:.9;min-width:84px}
.stage-video .sv-pos{min-height:32px;padding:2px 10px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.12);color:inherit;font:inherit;font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer;touch-action:manipulation}
.stage-video .sv-pos[aria-expanded="true"]{border-color:#ffd529;color:#ffd529}
.stage-video .sv-pos:focus-visible{outline:2px solid #ffd529;outline-offset:1px}
.stage-video .sv-pos:empty,.stage-video .sv-pos[hidden]{display:none}
.stage-video .sv-label{flex:1 1 120px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.8}
.stage-video .sv-extra{display:flex;gap:6px}
/* V1b.1 — vorig | −5s −2s ▶ +2s +5s | volgend: de tijdsprongen vormen één groep, vorig/volgend staan er los van. */
.stage-video .sv-transport{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.stage-video .sv-jumps{display:flex;align-items:center;gap:4px}
.stage-video .sv-prev:not([hidden]){margin-right:4px}
.stage-video .sv-prev:not([hidden]) + .sv-jumps{padding-left:8px;border-left:1px solid rgba(255,255,255,.22)}
.stage-video .sv-jumps:has(+ .sv-next:not([hidden])){padding-right:8px;border-right:1px solid rgba(255,255,255,.22)}
.stage-video .sv-next:not([hidden]){margin-left:4px}
/* Notitie bij het actieve fragment: een rustige eigen regel bovenin de uitgebreide balk. */
.stage-video .sv-note{flex:1 0 100%;order:-1;max-height:3.2em;overflow:auto;padding:2px 2px 6px;border-bottom:1px solid rgba(255,255,255,.12);font-size:12.5px;line-height:1.4;color:#dfe6ee;white-space:pre-line}
.stage-video .sv-note[hidden]{display:none}
/* Fragmentenrail: een vaste verticale strook NAAST het videovak (rechts), nooit erover. De breedte en de
   ruimte voor het videovak zet de speler (railLayout); alleen de rail scrollt. */
.stage-video .sv-rail{position:absolute;top:0;right:0;bottom:0;z-index:3;display:flex;flex-direction:column;box-sizing:border-box;background:#0d1117;border-left:1px solid #2a313b;color:#eef2f6}
.stage-video .sv-rail[hidden]{display:none}
.stage-video .sv-rail-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 5px 5px 10px;border-bottom:1px solid #2a313b;font-size:12px;font-weight:700;color:#c9d2dc}
.stage-video .sv-rail-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage-video .sv-rail-close{min-width:30px;min-height:30px;padding:2px 6px}
.stage-video .sv-rail-items{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;list-style:none;margin:0;padding:6px;display:flex;flex-direction:column;gap:4px}
.stage-video .sv-tab{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:6px;width:100%;box-sizing:border-box;min-height:36px;padding:5px 8px;border:1px solid #2a313b;border-radius:7px;background:#161b22;color:inherit;font:inherit;font-size:12px;text-align:left;cursor:pointer;touch-action:manipulation}
.stage-video .sv-tab:hover{background:#1f2630}
.stage-video .sv-tab:focus-visible{outline:2px solid #ffd529;outline-offset:1px}
.stage-video .sv-tab-n{min-width:1.4em;font-variant-numeric:tabular-nums;color:#9aa6b2}
.stage-video .sv-tab-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage-video .sv-tab-d{font-variant-numeric:tabular-nums;font-size:11.5px;color:#b5c0cc;white-space:nowrap}
.stage-video .sv-tab-ic{font-size:11px;opacity:.8}
.stage-video .sv-rail-li.is-active .sv-tab{border-color:#ffd529;background:#211f12;box-shadow:inset 3px 0 0 #ffd529}
.stage-video .sv-rail-li.is-active .sv-tab-n{color:#ffd529;font-weight:700}
.stage-video .sv-rail-li.is-viewed .sv-tab-n{color:#7fc79a}
.stage-video .sv-rail-li.is-viewed .sv-tab-t{opacity:.82}
.stage-video .sv-rail-li.is-missing .sv-tab{border-style:dashed;opacity:.55;cursor:default}
.stage-video .sv-tab-note{margin:4px 2px 2px 8px;padding:5px 8px;border-left:2px solid #ffd529;font-size:11.5px;line-height:1.4;color:#dfe6ee;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.stage-video .sv-tab-note[hidden]{display:none}
/* Smalle rail (klein videovak): nummer en verkorte titel; de volledige tekst staat in aria-label/title. */
.stage-video .sv-rail.is-narrow .sv-rail-title{display:none}
.stage-video .sv-rail.is-narrow .sv-rail-head{justify-content:center;padding:4px}
.stage-video .sv-rail.is-narrow .sv-rail-items{padding:4px 3px}
.stage-video .sv-rail.is-narrow .sv-tab{grid-template-columns:minmax(0,1fr);justify-items:center;gap:0;min-height:40px;padding:4px 2px;text-align:center}
.stage-video .sv-rail.is-narrow .sv-tab-n{min-width:0;font-weight:700;color:inherit}
.stage-video .sv-rail.is-narrow .sv-tab-t{max-width:100%;font-size:9.5px;opacity:.85}
.stage-video .sv-rail.is-narrow .sv-tab-d,.stage-video .sv-rail.is-narrow .sv-tab-ic,.stage-video .sv-rail.is-narrow .sv-tab-note{display:none}
body.presenteren .stage-video .sv-extra{display:none}
.stage-video .sv-grip,.stage-video .sv-resize{display:none}
.stage-video.is-ingebed.is-authoring .sv-grip{display:block;position:absolute;left:0;right:0;top:0;height:14px;cursor:grab;background:linear-gradient(rgba(255,255,255,.18),transparent)}
.stage-video.is-ingebed.is-authoring .sv-resize{display:block;position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,rgba(255,255,255,.55) 50%);z-index:4}
/* Tijdelijk schermvullend: de dia blijft eronder bestaan; Esc of dezelfde knop gaat terug. */
.stage-video.sv-fullscreen{position:fixed;inset:0;width:auto!important;height:auto!important;left:0!important;top:0!important;z-index:9000;border-radius:0}
/* Invoegvensters: VOLLEDIG ondoorzichtig — geen tactiekbord of spelers die door de lijst heen schijnen. */
.avd-backdrop{position:fixed;inset:0;z-index:9500;background:rgba(5,7,10,.94);display:flex;align-items:center;justify-content:center;padding:16px}
.avd{width:min(760px,100%);max-height:90vh;display:flex;flex-direction:column;background:#151a21;color:#eef2f6;border:1px solid var(--brd-2);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.avd-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--brd);background:var(--raised);border-radius:14px 14px 0 0}
.avd-head h2{flex:1;margin:0;font-size:18px}
.avd-x{min-width:40px;min-height:40px;border:0;border-radius:8px;background:transparent;color:inherit;font-size:16px;cursor:pointer}
.avd-x:hover{background:#232a34}
.avd-body{padding:16px 18px;display:flex;flex-direction:column;gap:12px;overflow:auto}
.avd-field{display:flex;flex-direction:column;gap:6px}
.avd-field[hidden]{display:none}
.avd-label{font-size:13px;font-weight:700;color:#c9d2dc}
.avd-search,.avd-select{width:100%;box-sizing:border-box;font:inherit;font-size:14px;padding:10px 12px;border-radius:9px;border:1px solid var(--brd-2);background:var(--input);color:inherit}
.avd-search:focus-visible,.avd-select:focus-visible,.avd-list:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.avd-source-note{margin:0;padding:8px 10px;border-radius:8px;background:#2a2312;border:1px solid #6b5520;color:#ffd98a;font-size:13px}
.avd-source-note[hidden]{display:none}
.avd-status{margin:0;font-size:13px;color:#9aa6b2}
.avd-list{display:flex;flex-direction:column;gap:6px;max-height:38vh;overflow:auto;padding:2px;border-radius:10px;background:var(--raised)}
.avd-row{display:grid;grid-template-columns:auto auto 1fr;gap:2px 10px;align-items:baseline;width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--brd);border-radius:10px;background:var(--card);cursor:pointer;min-height:48px}
.avd-row:hover{background:#222a35}
/* ADR-0059 Am.10: vinkje om meer beelden te kiezen (24 px, ook voor touch); cursorregel bij toetsenbord. */
.avd-pick{grid-row:span 2;align-self:center;width:24px;height:24px;margin:0;accent-color:var(--accent);cursor:pointer}
.avd-row.is-cursor{outline:1px dashed var(--accent-line);outline-offset:-3px}
.avd-row[aria-selected="true"]{border-color:var(--accent-line);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.avd-kind{grid-row:span 2;align-self:center;padding:3px 8px;border-radius:999px;background:#2b3442;font-size:11.5px;font-weight:700;letter-spacing:.02em}
.avd-row.is-reeks .avd-kind{background:#203a2a;color:#9fe0b4}
.avd-title{font-size:14.5px}
.avd-meta{font-variant-numeric:tabular-nums;font-size:12.5px;color:#b5c0cc}
.avd-tags{grid-column:3;font-size:12px;color:#8e9aa7}
.avd-choice{display:flex;gap:8px;flex-wrap:wrap}
.avd-opt{flex:1 1 160px;min-height:40px;border:1px solid var(--brd-2);border-radius:9px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.avd-opt[aria-checked="true"]{border-color:var(--accent-line);color:var(--accent-ink);background:var(--accent-soft)}
.avd-opt:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.avd-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px;position:sticky;bottom:0;padding-top:10px;background:#151a21}
.avd-primary,.avd-secondary{min-height:44px;padding:9px 18px;border-radius:9px;font:inherit;font-weight:700;cursor:pointer}
.avd-primary{border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--accent-ink);font-size:15px;padding:10px 22px}
.avd-primary:disabled{opacity:.4;cursor:default}
.avd-secondary{border:1px solid var(--brd-2);background:transparent;color:var(--ink);font-weight:600}
.avd-fragment{margin:0}
.video-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:9600;max-width:min(560px,calc(100% - 32px));padding:10px 14px;border-radius:10px;background:#0d1117;color:#eef2f6;border:1px solid #2a313b;font-size:13.5px;box-shadow:0 10px 30px rgba(0,0,0,.45);pointer-events:none}
/* Kleine schermen: het venster wordt bijna schermvullend. */
@media (max-width: 640px){.avd-backdrop{padding:0}.avd{width:100%;height:100%;max-height:none;border-radius:0}.avd-head{border-radius:0}.avd-list{max-height:none;flex:1 1 auto}}
/* v0.65.181: telefoon (dezelfde grenzen als de mobiele Presentatie-shell, ook liggend). Het venster vult
   het zichtbare scherm en scrolt als geheel; de resultatenlijst krimpt nooit weg; Invoegen blijft onderaan
   staan; alle bediening is minstens 44px; 16px in velden voorkomt inzoomen bij focus. Alleen opmaak. */
@media (orientation:landscape) and (max-width:950px) and (max-height:600px), (orientation:portrait) and (max-width:767px){
  .avd-backdrop{padding:0}
  .avd{width:100%;height:100%;max-height:none;box-sizing:border-box;border:0;border-radius:0;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px)}
  .avd:focus{outline:none}
  .avd-head{border-radius:0;padding:4px 4px 4px 14px;gap:6px}
  .avd-head h2{font-size:16px;line-height:1.25}
  .avd-x{min-width:44px;min-height:44px}
  .avd-body{padding:10px 12px 0;gap:10px;overscroll-behavior:contain;scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .avd-list{flex:none;max-height:none;overflow:visible}
  .avd-search,.avd-select{min-height:44px;font-size:16px}
  .avd-opt{flex:1 1 auto;min-height:44px;padding:0 12px}
  .avd-field-check{gap:0}
  .avd-check{flex:none;margin:0 0 0 10px}
  .avd-check-label{flex:1;display:flex;align-items:center;min-height:44px;padding:0 4px 0 10px}
  .avd-actions{margin-top:0;padding:8px 0 calc(8px + env(safe-area-inset-bottom,0px))}
  .avd-actions .avd-primary{flex:1}
}
@media (prefers-reduced-motion: reduce){.stage-video .sv-bar,.stage-video.sv-expanded .sv-bar{transition:none}}
/* Smalle videovakken: eerst valt het label weg, dan de klok; alle knoppen blijven bereikbaar. */
@container (max-width: 560px){.stage-video .sv-label{display:none}.stage-video .sv-btn{min-width:34px;padding:4px 6px}}
@container (max-width: 380px){.stage-video .sv-clock{display:none}.stage-video .sv-transport{flex:1 0 100%;justify-content:center}.stage-video .sv-btn{min-width:30px;padding:3px 4px}.stage-video .sv-jumps{gap:2px}}
@container (max-width: 300px){.stage-video .sv-prev:not([hidden]) + .sv-jumps,.stage-video .sv-jumps:has(+ .sv-next:not([hidden])){padding:0;border:0}.stage-video .sv-btn{min-width:28px;font-size:11.5px}}
/* Invoegopties: "Notities tonen". */
.avd-field-check{flex-direction:row;align-items:center;gap:10px}
.avd-check{width:20px;height:20px;accent-color:var(--accent)}
.avd-check-label{font-size:13.5px;color:#c9d2dc}
.avd-row.is-reeks .avd-kind-verzameling{background:#26304a;color:#b8c8ff}
/* S2 Tekstkolom naast het veld (ADR-0026 Am.6 / ADR-0031 Add.2 (a)–(e), Accepted voor S2, PO 2026-10-23).
   Rechte tekstvakken onder elkaar; het titelvlak boven de kolom mag afgerond. Dekking alleen op de achtergrond
   (--tv-bg / --tv-title-bg); de tekst blijft volledig dekkend in de themakleur. Zelfde smalle letter als de titel
   (Bahnschrift via font-stretch, terugval zonder lettertypebestand). Maat Stage-relatief (cqw). */
.stage-text-column{position:absolute;display:flex;flex-direction:column;gap:var(--tv-gap,1.6cqw);overflow:hidden;box-sizing:border-box;
  font-family:var(--title-font-family,"Bahnschrift","Roboto Condensed","Arial Narrow","Helvetica Neue Condensed",var(--f-ui),sans-serif);font-stretch:condensed;
  font-size:max(10px,var(--tv-font,1.6cqw));line-height:1.3;color:var(--ink)}
.stage-text-column .tv-box{background:var(--tv-bg,rgb(255 255 255 / .12));border-radius:0;padding:1.1cqw 1.3cqw;flex:0 0 auto}
.stage-text-column .tv-heading{margin:0 0 .5cqw;font-size:1.12em;font-weight:var(--tv-title-weight,700);text-transform:uppercase;letter-spacing:.01em;line-height:1.15}
.stage-text-column .tv-list{margin:0;padding:0 0 0 1.15em;list-style:square}
.stage-text-column .tv-item::marker{color:var(--ink-dim,#c9d2dc)}
.stage-text-column .tv-line{margin:0;font-weight:var(--tv-weight,600);min-height:1.3em;white-space:pre-wrap;overflow-wrap:anywhere}
.stage-text-column .tv-line.is-accent{color:var(--content-accent)}
.stage-text-column .tv-line.is-warning{color:#e2ae19}
.stage-text-column.is-editable [contenteditable]{outline:none;cursor:text}
.stage-text-column.is-editable [contenteditable]:focus-visible{box-shadow:inset 0 -2px 0 var(--accent)}
.stage-text-column.is-editable [contenteditable]:empty::before{content:attr(data-placeholder);color:var(--ink-faint,#8b97a6);font-weight:400}
.stage-text-column.is-overflowing{box-shadow:inset 0 -3px 0 #e2ae19}
body.presenteren .stage-text-column [contenteditable]:empty::before{content:none}
body.presenteren .stage-text-column.is-overflowing{box-shadow:none}
.stage-title.is-text-column{background:var(--tv-title-bg,rgb(255 255 255 / .12));border-radius:.8cqw;padding:0 var(--tv-title-pad,1.4cqw);align-items:flex-start;text-align:left}
.stage-title.is-text-column h1{font-weight:var(--tv-title-weight,700);text-transform:uppercase}
.stage-text-column[hidden]{display:none} /* tekenherstel: display:flex mag `hidden` niet overschrijven (anders blijft een leeg vak over de Stage) */
.stage-divider{position:absolute;width:18px;margin-left:-9px;cursor:col-resize;z-index:5;touch-action:none}
/* Tekenherstel: de actieve tekenstand staat zichtbaar op het veld (alleen Bewerken; nooit klikbaar). */
.stage-mode-badge{position:absolute;left:8px;top:8px;z-index:4;pointer-events:none;max-width:calc(100% - 16px);padding:4px 10px;border-radius:999px;
  background:rgb(10 13 18 / .72);color:#fff;font:600 12px/1.3 var(--f-ui,system-ui,sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 0 0 1px var(--accent)}
.stage-mode-badge[hidden]{display:none}
body.presenteren .stage-mode-badge{display:none}
.stage-divider::after{content:"";position:absolute;left:8px;top:15%;bottom:15%;width:2px;border-radius:2px;background:var(--accent);opacity:.25;transition:opacity var(--motion-medium) var(--motion-ease)}
.stage-divider:hover::after,.stage-divider:focus-visible::after,.stage-divider.is-dragging::after{opacity:.9}
body.presenteren .stage-divider{display:none}
.tc-boxes{display:flex;flex-direction:column;gap:4px;margin:6px 0}
.tc-box-row{display:flex;align-items:center;gap:4px}
.tc-box-row .tc-box-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:var(--ink-dim)}
.tc-box-row .chip-btn{min-width:30px;min-height:30px;padding:0 6px}
.tc-style-row{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(70px,1.2fr);align-items:center;gap:6px;font-size:12.5px;color:var(--ink-dim);margin:4px 0}
.tc-style-row:has(input[type=range]:only-of-type):not(:has(input[type=color])){grid-template-columns:minmax(0,1fr) minmax(70px,1.6fr)}
.tc-style-row input[type=color]{width:34px;height:26px;padding:0;border:1px solid var(--brd-2,#2a313b);border-radius:6px;background:none}
/* S1b-a: spelergrootte en startgrootte per uitsnede (Scène › Uitsnede). */
.fv-size-row{display:grid;grid-template-columns:auto auto 1fr 3.4em;align-items:center;gap:6px;margin:4px 0}
.fv-size-row>span{font-size:12.5px;color:var(--ink-dim)}
.fv-size-range{width:100%;min-width:0}
.fv-size-out{font:600 12px/1 var(--f-ui);text-align:right;color:var(--ink)}
.fv-size-hint{font-size:11.5px;margin:4px 0}
/* PO 2026-10-29 §3 — bochten van een eigen bewegingspad (alleen in Paden) en de kleine vormbalk. */
.movement-path-bend{fill:rgba(255,190,80,.25);stroke:var(--amber);stroke-width:calc(2 * var(--chrome-scale,1));r:calc(7px * var(--chrome-scale,1));cursor:grab}
.movement-path-bend.is-active{fill:var(--amber)}
#pathShapeBar{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:59;display:flex;flex-wrap:wrap;gap:8px;align-items:center;max-width:min(96vw,900px);
  background:rgba(16,20,27,.94);border:1px solid var(--brd-2);border-radius:10px;padding:6px 10px;box-shadow:0 8px 22px rgba(0,0,0,.5)}
#pathShapeBar .sd-label{font-size:12px;color:var(--ink-dim)}
#couplingBar{position:fixed;left:50%;bottom:140px;transform:translateX(-50%);z-index:59;display:flex;gap:8px;align-items:center;
  background:rgba(16,20,27,.94);border:1px solid var(--brd-2);border-radius:10px;padding:6px 10px;box-shadow:0 8px 22px rgba(0,0,0,.5)}
/* ADR-0029 Am. 1 (P6): origineel ↔ presentatieveranderingen in Bewerken. */
#changesBar{position:fixed;left:50%;top:64px;transform:translateX(-50%);z-index:58;display:flex;flex-wrap:wrap;gap:8px;align-items:center;max-width:min(96vw,900px);
  background:rgba(16,20,27,.94);border:1px solid var(--accent-line);border-radius:10px;padding:6px 10px;box-shadow:0 8px 22px rgba(0,0,0,.5)}
#changesBar .sd-label{font-size:12px;color:var(--ink);font-weight:600}
#changesBar .chip-btn.is-on{background:var(--accent-line);color:var(--ink)}
#changesBar .changes-stale{font-size:11.5px;color:var(--amber)}
/* ADR-0029 Am. 1: compacte live werkbalk naast het veld (Presenteren), los van de presenteerbalk. */
#liveTools{position:fixed;left:8px;top:50%;transform:translateY(-50%);z-index:56;display:flex;flex-direction:column;gap:4px;
  background:rgba(16,20,27,.86);border:1px solid var(--brd-2);border-radius:10px;padding:5px;max-width:150px}
#liveTools button{font-size:11.5px;padding:6px 8px;min-height:32px;text-align:left}
#liveTools .is-on{outline:1px solid var(--accent,#37d67a)}
body:not(.presenteren) #liveTools{display:none}
/* ADR-0059 Am.13 — centrale presentaties: laden, nieuwere versie, conflictkeuze. Rustig, geen meldingen bij gewoon opslaan. */
.presentation-loading{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--bg);color:var(--ink-dim);font-size:15px}
.top .status[role="button"]{cursor:pointer}
.cloud-newer{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;display:flex;flex-wrap:wrap;gap:8px;align-items:center;max-width:calc(100vw - 32px);padding:10px 14px;border-radius:12px;background:var(--card);border:1px solid var(--brd-2);box-shadow:0 8px 30px rgba(0,0,0,.4);font-size:14px}
.cloud-conflict-backdrop{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px;background:rgba(5,7,10,.66)}
.cloud-conflict{width:min(540px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--card);border:1px solid var(--brd-2);border-radius:14px;padding:18px;color:var(--ink)}
.cloud-conflict h2{margin:0 0 8px;font-size:18px}
.cloud-conflict p,.cloud-conflict li{font-size:14px;line-height:1.45;color:var(--ink-dim)}
.cloud-conflict ul{padding-left:20px;margin:0 0 12px}
.cloud-conflict-msg{color:var(--bad)!important}
.cloud-conflict-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:12px}
.cloud-conflict-actions button{min-height:44px}