/* ═══════════════════════════════════════════════════════════════════════
   Strategie-dag deck — runtime styling.
   The slide markup itself is inline-styled (from the design); this file only
   handles the stage, scaling, HUD/controls, live boards and animations.
   ═══════════════════════════════════════════════════════════════════════ */

/* Alias the design's 'droid-serif' to Google's "Droid Serif". */
@font-face { font-family: 'droid-serif'; font-weight: 400; src: local('Droid Serif'); }
@font-face { font-family: 'droid-serif'; font-weight: 700; src: local('Droid Serif'); }

:root {
  --navy:#262A4A; --blue:#1876E6; --lblue:#D5E8FE; --xlblue:#E7F1FF;
  --grey:#6B7086; --grey2:#9AA0B4; --magenta:#C64FA0; --teal:#00A88F; --purple:#806EDB;
  --stage-bg:#0C0E1C;
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin:0; height:100%; background:var(--stage-bg); overflow:hidden;
  font-family:'Poppins','Helvetica Neue',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.cursor-hidden, body.cursor-hidden * { cursor:none !important; }

/* ── Stage & scaling ─────────────────────────────────────────────────── */
#stage { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; }
#canvas {
  position:relative; width:1920px; height:1080px; flex:none;
  transform-origin:center center; will-change:transform;
  box-shadow:0 40px 120px rgba(0,0,0,.55);
}
#canvas > section {
  position:absolute; inset:0; width:1920px; height:1080px;
  opacity:0; visibility:hidden; z-index:0;
  transition:opacity .45s ease; pointer-events:none;
  overflow:hidden;
}
#canvas > section.is-active { opacity:1; visibility:visible; z-index:2; pointer-events:auto; }
/* overview (grid of thumbnails) */
body.overview #stage { align-items:flex-start; justify-content:flex-start; overflow:auto; padding:0; }
body.overview #canvas { transform:none !important; width:100%; height:auto; min-height:100%;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; padding:28px; box-shadow:none; background:var(--stage-bg); }
body.overview #canvas > section {
  position:relative; inset:auto; opacity:1; visibility:visible; pointer-events:auto;
  width:480px; height:270px; transform:scale(1); transition:none; cursor:pointer;
  border-radius:10px; outline:2px solid transparent; box-shadow:0 8px 30px rgba(0,0,0,.4);
}
/* scale slide contents down inside the thumbnail box */
body.overview #canvas > section > * { transform-origin:top left; }
body.overview #canvas > section::after {
  content:attr(data-idx-human); position:absolute; left:10px; top:8px; z-index:5;
  background:rgba(12,14,28,.72); color:#fff; font-size:22px; padding:3px 12px; border-radius:20px;
}
body.overview #canvas > section:hover { outline-color:var(--blue); }

/* ── Clean stream feed: no clock, no controls, no notes, no cursor ────── */
body.mode-clean #hud,
body.mode-clean #controls,
body.mode-clean #notes,
body.mode-clean #join-modal,
body.mode-clean #mode-tag { display:none !important; }
body.mode-clean, body.mode-clean * { cursor:none !important; }
/* The stream feed is display-only: no add inputs (editable fields are already
   non-editable on clean). Only /admin can type. */
body.mode-clean .live-add { display:none !important; }

/* ── Presenter tag (admin only) ──────────────────────────────────────── */
#mode-tag {
  position:fixed; left:26px; bottom:26px; z-index:40;
  background:rgba(24,118,230,.92); color:#fff; font-size:14px; font-weight:500;
  padding:7px 13px; border-radius:11px; letter-spacing:.02em;
  box-shadow:0 8px 24px rgba(0,0,0,.25); transition:opacity .4s;
}
body.idle #mode-tag { opacity:0; }

/* ── Photos (drop-in real files replace the gradient) ────────────────── */
.photo { background-size:cover; background-position:center; background-repeat:no-repeat; background-color:#1A1E38; }
.photo[data-photo="opening-magazijn"]{ background-image:url('../img/opening-magazijn.png'), linear-gradient(135deg,#2C86F0,#1B2140 78%); }
.photo[data-photo="locatie"]{ background-image:url('../img/locatie.jpg'), linear-gradient(140deg,#0FB59B,#1B2140 80%); }
.photo[data-photo="divider-01"]{ background-image:url('../img/divider-01.jpg'), linear-gradient(150deg,#2C86F0,#24014C 85%); }
.photo[data-photo="divider-02"]{ background-image:url('../img/divider-02.jpg'), linear-gradient(150deg,#806EDB,#1B2140 85%); }
.photo[data-photo="divider-03"]{ background-image:url('../img/divider-03.jpg'), linear-gradient(150deg,#C64FA0,#24014C 85%); }

/* ── HUD: live clock + agenda block ──────────────────────────────────── */
#hud {
  position:fixed; top:22px; right:26px; z-index:40;
  display:flex; align-items:stretch; gap:14px;
  font-variant-numeric:tabular-nums; user-select:none;
  transition:opacity .4s; opacity:.92;
}
#hud.dim { opacity:0; }
.hud-clock {
  background:rgba(12,14,28,.62); backdrop-filter:blur(8px);
  color:#fff; border-radius:14px; padding:10px 18px; display:flex; align-items:baseline;
  font-weight:500; letter-spacing:.01em;
}
#hud-time { font-size:34px; }
#hud-seconds { font-size:20px; opacity:.6; margin-left:2px; }
.hud-block {
  background:rgba(12,14,28,.62); backdrop-filter:blur(8px); border-radius:14px;
  padding:8px 18px; color:#fff; display:flex; flex-direction:column; justify-content:center; min-width:190px;
}
#hud-block-name { font-size:16px; opacity:.75; white-space:nowrap; }
.hud-remain { font-size:26px; font-weight:500; }
.hud-remain.warn { color:#FFC24B; }
.hud-remain.over { color:#FF6B6B; }

/* ── Presentation countdown (visible on the stream feed) ─────────────── */
#pres-timer {
  position:fixed; top:22px; left:50%; transform:translateX(-50%); z-index:56;
  display:flex; align-items:center; gap:18px; color:#fff;
  background:rgba(12,14,28,.82); backdrop-filter:blur(10px);
  border-radius:18px; padding:12px 22px; box-shadow:0 12px 40px rgba(0,0,0,.4);
  font-variant-numeric:tabular-nums;
}
#pres-timer[hidden] { display:none; }
#pres-timer .pt-label { font-size:16px; opacity:.72; letter-spacing:.02em; }
#pres-timer .pt-time { font-size:46px; font-weight:600; line-height:1; }
#pres-timer[data-state="idle"] .pt-time { font-size:34px; opacity:.5; }
#pres-timer.warn .pt-time { color:#FFC24B; }
#pres-timer.over { background:#B3261E; }
#pres-timer.paused .pt-time { opacity:.6; }
#pres-timer .pt-ctl { display:flex; gap:8px; }
#pres-timer .pt-ctl button { appearance:none; border:0; background:rgba(255,255,255,.16); color:#fff; font:inherit; font-size:17px; padding:9px 15px; border-radius:12px; cursor:pointer; white-space:nowrap; }
#pres-timer .pt-ctl button:hover { background:rgba(255,255,255,.30); }
#pres-timer .pt-ctl button[hidden] { display:none; }
body.mode-clean #pres-timer .pt-ctl { display:none; }                 /* stream shows number only */
body.mode-admin.notes-docked #pres-timer { left:calc(50% - 220px); } /* centre over the shrunk stage */

/* ── Bottom controls (auto-hide) ─────────────────────────────────────── */
#controls {
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(0);
  z-index:45; display:flex; align-items:center; gap:6px;
  background:rgba(12,14,28,.72); backdrop-filter:blur(10px);
  border-radius:40px; padding:8px 12px; transition:opacity .4s, transform .4s;
  box-shadow:0 10px 40px rgba(0,0,0,.4);
}
body.idle #controls { opacity:0; transform:translateX(-50%) translateY(12px); pointer-events:none; }
#controls:hover { opacity:1 !important; }
.ctl {
  appearance:none; border:0; background:transparent; color:#fff; cursor:pointer;
  font:inherit; font-size:18px; padding:8px 14px; border-radius:24px; line-height:1;
  transition:background .15s; white-space:nowrap;
}
.ctl:hover { background:rgba(255,255,255,.14); }
.ctl:active { background:rgba(255,255,255,.24); }
.ctl-count { color:#fff; font-size:19px; font-variant-numeric:tabular-nums; padding:0 10px; min-width:96px; text-align:center; }
.ctl-sep { width:1px; height:26px; background:rgba(255,255,255,.22); margin:0 4px; }
#ctl-timer.running { background:var(--blue); }

/* ── Speaker notes drawer ────────────────────────────────────────────── */
#notes {
  position:fixed; top:0; right:0; height:100%; width:420px; z-index:60;
  background:#14162B; color:#E7E9F2; box-shadow:-20px 0 60px rgba(0,0,0,.5);
  display:flex; flex-direction:column; transform:translateX(105%); transition:transform .3s;
  padding:22px 24px;
}
#notes[hidden]{ display:flex; }                 /* rendered, positioned via class below */
body.notes-docked #notes { transform:none; }    /* docked open (default in /admin) */
/* Reserve room so the docked notes never cover the slide, clock or controls. */
body.mode-admin.notes-docked #stage    { right:440px; }
body.mode-admin.notes-docked #hud      { right:466px; }
body.mode-admin.notes-docked #controls { left:calc(50% - 220px); }
body.mode-admin.notes-docked #mode-tag { left:26px; }
.notes-head { display:flex; justify-content:space-between; align-items:center; font-size:15px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey2); }
.notes-head button { background:none; border:0; color:#fff; font-size:20px; cursor:pointer; }
#notes-body { flex:1; margin-top:20px; font-size:21px; line-height:1.5; white-space:pre-wrap; overflow:auto; }
.notes-next { border-top:1px solid #2A2D48; padding-top:14px; margin-top:14px; font-size:16px; color:var(--grey2); }
.notes-next span:last-child { color:#fff; }

/* ── Join / QR modal ─────────────────────────────────────────────────── */
#join-modal { position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center; background:rgba(8,10,22,.72); backdrop-filter:blur(6px); }
#join-modal[hidden]{ display:none; }
.join-card { background:#fff; color:var(--navy); border-radius:24px; padding:44px 52px; text-align:center; position:relative; box-shadow:0 30px 90px rgba(0,0,0,.5); }
.join-close { position:absolute; top:16px; right:18px; border:0; background:none; font-size:24px; color:var(--grey2); cursor:pointer; }
.join-kop { font-size:30px; font-weight:500; margin-bottom:24px; }
.join-qr { width:320px; height:320px; margin:0 auto 22px; display:flex; align-items:center; justify-content:center; }
.join-qr svg, .join-qr canvas, .join-qr img { width:100%; height:100%; }
.join-url { font-size:24px; font-weight:500; color:var(--blue); word-break:break-all; }
.join-hint { margin-top:16px; font-size:20px; color:var(--grey); max-width:22em; }
.join-none { font-size:20px; color:var(--grey); max-width:20em; }

/* ── Toast ───────────────────────────────────────────────────────────── */
#toast {
  position:fixed; left:50%; bottom:96px; transform:translateX(-50%) translateY(20px);
  z-index:80; background:var(--navy); color:#fff; padding:14px 26px; border-radius:30px;
  font-size:20px; opacity:0; transition:opacity .25s, transform .25s; pointer-events:none;
  box-shadow:0 12px 40px rgba(0,0,0,.4);
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── Slide enter animation ───────────────────────────────────────────── */
@keyframes enterUp { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:translateY(0); } }
#canvas > section.is-active.animate > .enter { animation:enterUp .55s cubic-bezier(.22,.7,.28,1) both; animation-delay:calc(var(--i,0) * 90ms); }

/* ── Live boards ─────────────────────────────────────────────────────── */
.live-badge {
  position:absolute; right:40px; bottom:34px; z-index:6;
  display:flex; align-items:center; gap:14px;
  background:var(--navy); color:#fff; border-radius:16px; padding:12px 18px;
  box-shadow:0 12px 40px rgba(0,0,0,.22); cursor:pointer;
}
.live-badge.on-dark { background:#fff; color:var(--navy); }
.live-badge .qr { width:78px; height:78px; background:#fff; border-radius:8px; padding:5px; }
.live-badge .qr svg, .live-badge .qr img, .live-badge .qr canvas { width:100%; height:100%; display:block; }
.live-badge .lb-txt { display:flex; flex-direction:column; gap:2px; line-height:1.15; }
.live-badge .lb-txt b { font-size:22px; font-weight:500; }
.live-badge .lb-txt span { font-size:16px; opacity:.7; }
.live-badge .lb-live { display:inline-flex; align-items:center; gap:7px; font-size:15px; opacity:.85; }
.live-badge .dot { width:9px; height:9px; border-radius:50%; background:#3AD07E; animation:pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

.live-stack { display:flex; flex-direction:column; gap:10px; overflow:auto; min-height:0; padding-right:4px;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 16px), transparent); mask-image:linear-gradient(#000 calc(100% - 16px), transparent); }
.live-stack::-webkit-scrollbar { width:8px; }
.live-stack::-webkit-scrollbar-thumb { background:rgba(0,0,0,.14); border-radius:8px; }

.live-card {
  background:#fff; border-radius:12px; padding:14px 16px; font-size:24px; line-height:1.3;
  color:var(--navy); box-shadow:0 3px 12px rgba(38,42,74,.10);
  border-left:5px solid var(--blue); position:relative;
  animation:cardPop .45s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes cardPop { from { opacity:0; transform:translateY(10px) scale(.96); } to { opacity:1; transform:none; } }
.live-card .who { display:block; font-size:15px; color:var(--grey2); margin-top:6px; }
.live-card .tag { display:inline-block; font-size:14px; font-weight:500; color:var(--accent,var(--blue)); text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px; }

/* SWOT quadrant definition line (slide 23) */
.swot-desc { font-size:24px; line-height:1.3; color:var(--grey); flex:none; margin-bottom:4px; }
.swot-note { font-size:19px; line-height:1.3; color:var(--grey2); font-style:italic; margin-top:auto; }

/* Admin right-click menu on SWOT cards */
#card-menu {
  position:fixed; z-index:90; min-width:230px; background:#fff; color:var(--navy);
  border-radius:14px; padding:8px; box-shadow:0 20px 60px rgba(8,10,22,.35); border:1px solid #E2E8F4;
}
#card-menu .cm-title { font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--grey2); padding:10px 12px 4px; }
#card-menu .cm-item { display:block; width:100%; text-align:left; border:0; background:none; font:inherit; font-size:17px; color:var(--navy); padding:9px 12px; border-radius:9px; cursor:pointer; }
#card-menu .cm-item:hover { background:var(--xlblue); }
#card-menu .cm-item.active { color:var(--blue); font-weight:500; cursor:default; }
#card-menu .cm-item.active::before { content:'● '; }
#card-menu .cm-sep { height:1px; background:#E2E8F4; margin:6px 4px; }
.live-card.seed { background:#F3F6FC; box-shadow:none; }
.live-card .del {
  position:absolute; top:6px; right:8px; border:0; background:none; color:var(--grey2);
  font-size:16px; cursor:pointer; opacity:0; transition:opacity .15s; line-height:1;
}
.live-card:hover .del { opacity:1; }
/* quadrant/column accent colours set inline via --accent */
.live-card { border-left-color:var(--accent, var(--blue)); }
.live-empty { font-size:22px; color:var(--grey2); font-style:italic; padding:8px 0; }

/* editable final text (mission/vision) — editable in /admin, display on stream */
.editable { outline:none; cursor:text; border-radius:10px; transition:box-shadow .15s; }
.editable:focus { box-shadow:0 0 0 2px rgba(255,255,255,.45); }
p.ph { opacity:.42; font-weight:400; }

/* presenter quick-add (also the input path in offline demo) */
.live-add {
  flex:none; margin-top:10px; width:100%; border:2px dashed rgba(38,42,74,.18);
  background:transparent; border-radius:10px; padding:10px 14px; font:inherit; font-size:20px;
  color:var(--navy); opacity:.55; transition:opacity .15s, border-color .15s;
}
.live-add::placeholder { color:var(--grey2); }
.live-add:hover { opacity:.85; }
.live-add:focus { outline:none; opacity:1; border-color:var(--blue); border-style:solid; }
/* on dark panels */
section[style*="background:#262A4A"] .live-add,
.live-badge.on-dark ~ * .live-add { color:#fff; border-color:rgba(255,255,255,.25); }
section[style*="background:#262A4A"] .live-add::placeholder { color:rgba(255,255,255,.55); }
section[style*="background:#1876E6"] .live-add { color:#fff; border-color:rgba(255,255,255,.4); }
section[style*="background:#1876E6"] .live-add::placeholder { color:rgba(255,255,255,.7); }

/* dark-slide live cards (Plus/Delta, dividers) */
section[style*="background:#262A4A"] .live-card,
.live-card.on-dark { color:var(--navy); }

/* Plus/Delta results as post-it notes */
.postit-wall { display:flex; flex-wrap:wrap; gap:24px; align-content:flex-start; overflow-y:auto; overflow-x:hidden; min-height:0; padding:12px 6px 6px; }
.postit-wall::-webkit-scrollbar { width:10px; }
.postit-wall::-webkit-scrollbar-thumb { background:rgba(38,42,74,.22); border-radius:8px; }
.postit {
  position:relative; width:272px; min-height:190px; padding:24px 24px 30px; box-sizing:border-box;
  font-size:29px; line-height:1.25; color:#262A4A; border-radius:3px;
  box-shadow:0 12px 26px rgba(38,42,74,.20); transform:rotate(var(--r,0deg));
  display:flex; flex-direction:column; transition:transform .15s;
  animation:cardPop .45s cubic-bezier(.2,.8,.3,1) both;
}
.postit:hover { transform:rotate(0deg) scale(1.03); z-index:2; }
.postit.plus { background:#FFF1B8; }        /* warm yellow */
.postit.delta { background:#CFE6FF; }        /* soft blue */
.postit .who { margin-top:auto; padding-top:10px; font-size:17px; color:rgba(38,42,74,.55); }
.postit .del { position:absolute; top:8px; right:10px; border:0; background:none; color:rgba(38,42,74,.5); font-size:17px; cursor:pointer; opacity:0; transition:opacity .15s; line-height:1; }
.postit:hover .del { opacity:1; }

/* Opdracht wall: cards flow in a responsive column layout */
.live-wall { display:grid; grid-template-columns:repeat(auto-fill, minmax(360px,1fr)); gap:16px; align-content:start; overflow-y:auto; overflow-x:hidden; min-height:0; padding-right:6px; }
.live-wall::-webkit-scrollbar, .live-stack::-webkit-scrollbar { width:10px; }
.live-wall::-webkit-scrollbar-thumb, .live-stack::-webkit-scrollbar-thumb { background:rgba(38,42,74,.22); border-radius:8px; }
.live-wall::-webkit-scrollbar-thumb:hover { background:rgba(38,42,74,.38); }
.live-wall { scrollbar-width:thin; scrollbar-color:rgba(38,42,74,.28) transparent; }

@media (prefers-reduced-motion: reduce) {
  #canvas>section.is-active.animate>.enter, .live-card { animation:none; }
  #canvas>section { transition:none; }
}