/* ============================================================
   AIpraatplaat — deelnemerskant (leerling)
   Telefoon-eerst, schaalt mee naar laptop. Volgt het ontwerpsysteem:
   papier, inkt, coral als enige accent, serif-koppen, zachte vormen.
   ============================================================ */

* , *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; min-height: 100%; height: 100%;
  background: var(--paper, #faf6ef);
  font-family: var(--font-sans, "Manrope", system-ui, sans-serif);
  font-feature-settings: "ss01", "ss02";
  color: var(--ink, #2b2722);
  -webkit-font-smoothing: antialiased;
}

/* ---- join/lobby als volledig-scherm overlay boven de plaat ---- */
.pt-app.pt-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column;
  max-width: none; margin: 0; padding: 0 22px;
  background: var(--paper, #faf6ef);
  transition: opacity 280ms var(--ease-soft, ease), transform 320ms var(--ease-soft, ease);
}
.pt-app.pt-overlay > * { width: 100%; max-width: 520px; margin-left: auto; margin-right: auto; }
.pt-app.pp-gone { opacity: 0; transform: translateY(-8px); pointer-events: none; }

/* warme bovenrand zodat het op een telefoon niet kaal oogt */
.pt-app {
  flex: 1 1 auto; width: 100%;
  display: flex; flex-direction: column;
  max-width: 520px; margin: 0 auto; padding: 0 22px;
}

/* ---- topbar met logo + sessiestatus ---- */
.pt-bar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 16px 2px 14px; gap: 12px;
}
.pt-logo { height: 30px; width: auto; }
.pt-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-muted, #8a8377);
}
.pt-status .sdot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ink-muted, #8a8377);
}
.pt-status.live .sdot { background: var(--accent-green, #4f7a4e); box-shadow: 0 0 0 3px rgba(79,122,78,0.18); animation: ptPulse 2.2s ease-in-out infinite; }
@keyframes ptPulse { 0%,100% { box-shadow: 0 0 0 3px rgba(79,122,78,0.18); } 50% { box-shadow: 0 0 0 6px rgba(79,122,78,0.04); } }
@media (prefers-reduced-motion: reduce) { .pt-status.live .sdot { animation: none; } }

/* ---- schermen ---- */
/* #ptScreens vult de ruimte tussen balk en voet en scrollt als de inhoud
   niet past (korte schermen: desktop-wachtruimte, liggende telefoon). */
#ptScreens {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column;
}
.pt-screen {
  flex: 1 0 auto; display: none; flex-direction: column; min-height: 0;
  padding-bottom: 28px;
}
.pt-screen.show { display: flex; }
.pt-center { justify-content: center; }

.pt-eyebrow {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-coral-hex, #d97757); font-weight: 600; margin: 0 0 9px;
}
.pt-h1 {
  font-family: var(--font-serif, "Newsreader", Georgia, serif); font-weight: 400;
  font-size: clamp(28px, 8vw, 38px); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--ink, #2b2722); margin: 0 0 6px; text-wrap: balance;
}
.pt-h1 .it { font-style: italic; color: var(--accent-coral-hex, #d97757); }
.pt-sub { font-size: 15.5px; line-height: 1.55; color: var(--ink-soft, #5c574e); margin: 0 0 26px; text-wrap: pretty; }

/* ---- velden ---- */
.pt-field { margin-bottom: 16px; }
.pt-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft, #5c574e); margin: 0 0 7px; }
.pt-input {
  width: 100%; appearance: none; border: 1.5px solid rgba(43,39,34,0.16);
  background: #fff; border-radius: var(--r-lg, 14px); padding: 15px 16px;
  font-family: inherit; font-size: 17px; color: var(--ink, #2b2722);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.pt-input:focus { outline: none; border-color: var(--accent-coral-hex, #d97757); box-shadow: 0 0 0 4px rgba(217,119,87,0.12); }
.pt-input.code {
  font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 26px; font-weight: 700;
  letter-spacing: 0.14em; text-align: center; text-transform: uppercase;
}
.pt-input::placeholder { color: rgba(43,39,34,0.32); letter-spacing: normal; }

/* ---- knoppen ---- */
.pt-btn {
  width: 100%; appearance: none; cursor: pointer; border: none;
  border-radius: var(--r-pill, 999px); padding: 16px 20px;
  font-family: inherit; font-size: 16.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  transition: transform 140ms ease, background 140ms ease, opacity 140ms ease;
}
.pt-btn.primary { background: var(--accent-coral-hex, #d97757); color: #fff; }
.pt-btn.primary:hover { transform: translateY(-1px); }
.pt-btn.primary:active { transform: translateY(0); }
.pt-btn.ghost { background: transparent; border: 1.5px solid var(--ink, #2b2722); color: var(--ink, #2b2722); }
.pt-btn.ghost:hover { background: rgba(43,39,34,0.05); }
.pt-btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.pt-btn svg { width: 19px; height: 19px; }

/* ---- wachtruimte / idle kaart ---- */
.pt-rest { text-align: center; }
.pt-welcome { margin: 4px 0 0; }
.pt-rest .pt-name-chip + .pt-sub-wait { margin-top: 16px; margin-bottom: 0; }
/* illustratie: leerlingen die wachten met hun telefoon */
.pt-illo {
  display: block; width: 100%; max-width: 460px; height: auto;
  margin: 18px auto 20px; border-radius: var(--r-lg, 14px);
  animation: ptIlloIn 480ms var(--ease-soft, ease) both;
}
@keyframes ptIlloIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .pt-illo { animation: none; } }
.pt-bigdot {
  width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(217,119,87,0.12); color: var(--accent-coral-hex, #d97757);
}
.pt-bigdot svg { width: 30px; height: 30px; }
.pt-rest.live .pt-bigdot { background: rgba(79,122,78,0.14); color: var(--accent-green, #4f7a4e); animation: ptBreath 2.8s ease-in-out infinite; }
@keyframes ptBreath { 0%,100% { box-shadow: 0 0 0 0 rgba(79,122,78,0); } 50% { box-shadow: 0 0 0 12px rgba(79,122,78,0.07); } }
@media (prefers-reduced-motion: reduce) { .pt-rest.live .pt-bigdot { animation: none; } }

.pt-name-chip {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  padding: 8px 15px; border-radius: var(--r-pill, 999px);
  background: var(--paper-warm, #f5ecdb); border: 1px solid rgba(43,39,34,0.08);
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft, #5c574e);
}
.pt-name-lead { margin: 18px 0 0; font-size: 13px; color: var(--ink-muted, #8a8377); }
.pt-name-lead + .pt-name-chip { margin-top: 8px; }
.pt-name-chip .av {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-coral-hex, #d97757); color: #fff;
  font-family: var(--font-serif, serif); font-size: 13px; line-height: 1;
}

/* ---- tool-kop ---- */
/* herkomst-pil: 'Scène N · Titel' boven de toolkop — tikbaar om naar het venster te gaan */
.pt-tool-origin {
  display: flex; width: fit-content; max-width: 100%;
  align-items: center; gap: 9px; margin: 0 0 11px;
  padding: 6px 11px 6px 9px; border: 1px solid rgba(43,39,34,0.12);
  border-radius: var(--r-pill, 999px); background: var(--paper, #faf6ef);
  cursor: pointer; text-align: left;
  transition: background 140ms var(--ease-soft, ease), border-color 140ms var(--ease-soft, ease), transform 120ms var(--ease-soft, ease);
}
.pt-tool-origin:hover { background: var(--paper-warm, #f5ecdb); border-color: rgba(43,39,34,0.22); }
.pt-tool-origin:active { transform: translateY(1px); }
/* zonekleur als achtergrond van de herkomst-pil */
.pt-tool-origin.zone-green  { background: var(--plaat-sage, #d8e2cc); border-color: rgba(95,122,78,0.34); }
.pt-tool-origin.zone-cream  { background: var(--plaat-cream, #f4e6d2); border-color: rgba(200,150,80,0.34); }
.pt-tool-origin.zone-blue   { background: var(--plaat-sky, #e3ecf0); border-color: rgba(63,111,147,0.30); }
.pt-tool-origin.zone-lilac,
.pt-tool-origin.zone-purple { background: var(--plaat-lilac, #e2d7e8); border-color: rgba(122,95,158,0.30); }
.pt-tool-origin[class*="zone-"]:hover { background: var(--plaat-sage); filter: brightness(0.965); }
.pt-tool-origin.zone-cream:hover  { background: var(--plaat-cream); }
.pt-tool-origin.zone-blue:hover   { background: var(--plaat-sky); }
.pt-tool-origin.zone-lilac:hover,
.pt-tool-origin.zone-purple:hover { background: var(--plaat-lilac); }
.pto-nr {
  flex: 0 0 auto; font-family: var(--font-serif, "Newsreader", Georgia, serif); font-style: italic;
  font-size: 18px; line-height: 1; color: var(--accent-coral-hex, #d97757);
}
.pto-title {
  flex: 0 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink-soft, #5c574e);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pto-go { flex: 0 0 auto; display: grid; place-items: center; color: var(--ink-muted, #8a8377); }
.pto-go svg { width: 16px; height: 16px; }
.pt-toolkind {
  display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 14px;
  padding: 6px 13px 6px 10px; border-radius: var(--r-pill, 999px);
  background: var(--paper-warm, #f5ecdb);
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-soft, #5c574e);
}
.pt-toolkind svg { width: 16px; height: 16px; }
.pt-question {
  font-family: var(--font-serif, "Newsreader", Georgia, serif); font-weight: 400;
  font-size: clamp(23px, 6.5vw, 30px); line-height: 1.18; letter-spacing: -0.015em;
  color: var(--ink, #2b2722); margin: 0 0 22px; text-wrap: pretty;
}
.pt-question.empty { color: var(--ink-muted, #8a8377); font-style: italic; }

/* ---- woordwolk-invoer ---- */
.pt-sendrow { display: flex; gap: 9px; align-items: stretch; }
.pt-sendrow .pt-input { flex: 1 1 auto; }
.pt-sendrow .pt-send {
  flex: 0 0 auto; width: 54px; border-radius: var(--r-lg, 14px); border: none; cursor: pointer;
  background: var(--accent-coral-hex, #d97757); color: #fff; display: grid; place-items: center;
  transition: transform 120ms ease, opacity 120ms ease;
}
.pt-sendrow .pt-send:hover { transform: translateY(-1px); }
.pt-sendrow .pt-send:disabled { opacity: 0.4; cursor: default; transform: none; }
.pt-sendrow .pt-send svg { width: 20px; height: 20px; }

.pt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pt-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: var(--r-pill, 999px);
  background: rgba(79,122,78,0.10); color: var(--accent-green, #4f7a4e);
  font-size: 13.5px; font-weight: 600;
}
.pt-chip svg { width: 14px; height: 14px; }
.pt-hint-sent { margin-top: 16px; font-size: 13.5px; color: var(--ink-muted, #8a8377); }

/* ---- poll ---- */
.pt-opts { display: flex; flex-direction: column; gap: 11px; }
.pt-opt {
  width: 100%; text-align: left; appearance: none; cursor: pointer;
  display: flex; align-items: center; gap: 13px;
  padding: 16px 17px; border-radius: var(--r-lg, 15px);
  border: 1.5px solid rgba(43,39,34,0.16); background: #fff;
  font-family: inherit; font-size: 16.5px; font-weight: 600; color: var(--ink, #2b2722);
  transition: border-color 140ms ease, background 140ms ease, transform 120ms ease;
}
.pt-opt:hover:not(:disabled) { border-color: var(--accent-coral-hex, #d97757); transform: translateY(-1px); }
.pt-opt .pt-optkey {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center; background: var(--paper-warm, #f5ecdb);
  font-family: var(--font-serif, serif); font-size: 16px; color: var(--ink, #2b2722);
}
.pt-opt.chosen { border-color: var(--accent-coral-hex, #d97757); background: rgba(217,119,87,0.10); }
.pt-opt.chosen .pt-optkey { background: var(--accent-coral-hex, #d97757); color: #fff; }
.pt-opt:disabled { cursor: default; opacity: 0.55; }
.pt-opt.chosen:disabled { opacity: 1; }

/* ---- kort antwoord ---- */
.pt-textarea {
  width: 100%; min-height: 130px; resize: vertical; appearance: none;
  border: 1.5px solid rgba(43,39,34,0.16); background: #fff; border-radius: var(--r-lg, 14px);
  padding: 15px 16px; font-family: inherit; font-size: 16.5px; line-height: 1.5; color: var(--ink, #2b2722);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.pt-textarea:focus { outline: none; border-color: var(--accent-coral-hex, #d97757); box-shadow: 0 0 0 4px rgba(217,119,87,0.12); }
.pt-textarea::placeholder { color: rgba(43,39,34,0.32); }
.pt-spacer { flex: 1 1 auto; min-height: 16px; }

/* ---- verstuurd-bevestiging (kort antwoord) ---- */
.pt-sent-card { text-align: center; padding: 8px 0; }
.pt-sent-ic {
  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(79,122,78,0.14); color: var(--accent-green, #4f7a4e);
}
.pt-sent-ic svg { width: 28px; height: 28px; }
.pt-sent-card h3 { font-family: var(--font-serif, serif); font-weight: 400; font-size: 24px; margin: 0 0 8px; color: var(--ink, #2b2722); }
.pt-answer-echo {
  margin: 0 0 22px; padding: 15px 17px; border-radius: var(--r-lg, 14px);
  background: var(--paper-warm, #f5ecdb); border-left: 3px solid var(--accent-coral-hex, #d97757);
  font-size: 16px; line-height: 1.5; color: var(--ink-soft, #5c574e); text-align: left; text-wrap: pretty;
}
.pt-locked-note {
  display: flex; align-items: center; gap: 9px; margin-top: 18px;
  padding: 13px 15px; border-radius: var(--r-lg, 14px);
  background: rgba(43,39,34,0.05); color: var(--ink-soft, #5c574e); font-size: 14px;
}
.pt-locked-note svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* ---- mini-toast ---- */
.pt-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(12px);
  background: var(--ink, #2b2722); color: var(--paper, #faf6ef);
  padding: 11px 18px; border-radius: var(--r-pill, 999px); font-size: 14px; font-weight: 600;
  box-shadow: 0 12px 30px rgba(33,30,26,0.28); opacity: 0; pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease; z-index: 50;
}
.pt-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- voet ---- */
.pt-foot { flex: 0 0 auto; padding: 14px 2px 20px; font-size: 12px; color: var(--ink-muted, #8a8377); text-align: center; }
.pt-leave {
  appearance: none; border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink-muted, #8a8377);
  text-decoration: underline; text-underline-offset: 3px;
}
.pt-leave:hover { color: var(--ink-soft, #5c574e); }

/* op grotere schermen iets ruimer ademen */
@media (min-width: 640px) {
  .pt-app { padding: 0 32px; }
  .pt-bar { padding-top: 26px; }
}

/* ============================================================
   LIVE-CHROME OVER DE PRAATPLAAT
   ============================================================ */

/* De praatplaat vult op de deelnemerskant het HELE scherm — geen 16:9-
   strookje meer op de telefoon. Daardoor krijgen ook de overlays
   (hotspotvenster, bril, bottomsheet) de volle schermhoogte en blijft
   alles binnen beeld + navigeerbaar. (participant.css laadt alleen hier,
   dus dit raakt de host-presentatie niet.) */
.stage { background: #232019; }
/* TELEFOON (portret): de plaat vult het hele scherm — anders wordt 16:9 een strookje.
   LAPTOP / landschap: géén override → de plaat houdt 16:9 met letterboxing, exact
   dezelfde afmetingen als de docentweergave (alleen zonder toolbar). */
@media (orientation: portrait) {
  .stage > .plaat {
    aspect-ratio: auto !important;
    width: 100% !important; height: 100% !important;
  }
}

/* bovenbalk: status · bril · verlaten */
.pp-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top));
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(250,246,239,0.92) 0%, rgba(250,246,239,0.66) 55%, rgba(250,246,239,0) 100%);
}
.pp-top > * { pointer-events: auto; }
.pp-top-logo { display: none; }
.pp-top-status {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0; background: transparent; border: none;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-muted, #8a8377);
}
.pp-top-status .sdot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-muted, #8a8377); }
.pp-top-status.live .sdot { background: var(--accent-green, #4f7a4e); box-shadow: 0 0 0 3px rgba(79,122,78,0.18); animation: ppPulse 2.2s ease-in-out infinite; }
@keyframes ppPulse { 0%,100% { box-shadow: 0 0 0 3px rgba(79,122,78,0.18); } 50% { box-shadow: 0 0 0 5px rgba(79,122,78,0.05); } }
@media (prefers-reduced-motion: reduce) { .pp-top-status.live .sdot { animation: none; } }
.pp-top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* eigen anonieme identiteit in de bovenbalk */
.pp-top-id { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 3px; background: rgba(43,39,34,0.05); border-radius: 999px; }
.pp-top-id-name { font-family: var(--font-sans, sans-serif); font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 440px) { .pp-top-id-name { display: none; } }
/* join-scherm: door het systeem toegewezen identiteit */
.pt-idcard {
  display: flex; align-items: center; gap: 13px; margin-top: 8px;
  padding: 12px 15px; border-radius: var(--r-lg, 14px);
  background: var(--paper-warm, #f5ecdb); border: 1px solid rgba(43,39,34,0.10);
}
.pt-idcard-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pt-idname { display: block; font-family: var(--font-serif, Georgia, serif); font-size: 18px; color: var(--ink); line-height: 1.2; }
.pt-idsub { display: block; font-family: var(--font-sans, sans-serif); font-size: 12px; color: var(--ink-muted, #8a8377); }

.pp-leave-mini {
  width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; cursor: pointer;
  border: none; background: transparent; color: var(--ink-muted, #8a8377);
  transition: color 140ms ease;
}
.pp-leave-mini:hover { background: transparent; color: var(--ink, #2b2722); }
.pp-leave-mini svg { width: 18px; height: 18px; }

/* ---- tool-bottomsheet ---- */
.pp-sheet-layer { position: absolute; inset: 0; z-index: 120; display: none; }
.pp-sheet-layer.show { display: block; }
.pp-sheet-back {
  position: absolute; inset: 0; background: rgba(33,30,26,0.30); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity var(--dur-base, 240ms) var(--ease-soft);
}
.pp-sheet-layer.show .pp-sheet-back { opacity: 1; }
.pp-sheet {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) translateY(102%);
  width: min(560px, 100%); max-height: 82%;
  display: flex; flex-direction: column;
  background: var(--paper, #faf6ef);
  border-radius: var(--r-2xl, 22px) var(--r-2xl, 22px) 0 0;
  box-shadow: 0 -18px 50px rgba(33,30,26,0.28);
  padding: 10px 22px max(22px, env(safe-area-inset-bottom));
  transition: transform var(--dur-base, 320ms) var(--ease-soft);
}
.pp-sheet-layer.show .pp-sheet { transform: translateX(-50%) translateY(0); }
.pp-sheet-grip { flex: 0 0 auto; width: 42px; height: 5px; border-radius: 99px; background: rgba(43,39,34,0.18); margin: 2px auto 8px; }
.pp-sheet-close {
  position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; display: grid; place-items: center;
  appearance: none; cursor: pointer; border-radius: var(--r-md, 11px); border: none;
  background: rgba(43,39,34,0.05); color: var(--ink-soft, #5c574e);
}
.pp-sheet-close:hover { background: rgba(43,39,34,0.1); color: var(--ink, #2b2722); }
.pp-sheet-close svg { width: 17px; height: 17px; }
.pp-sheet-body { flex: 1 1 auto; overflow-y: auto; padding: 6px 0 2px; }

/* DESKTOP / landschap: de push-notificatie is een compactere zwevende kaart
   (smaller dan de telefoon-bottomsheet die full-width van onderaan komt). */
@media (orientation: landscape) {
  .pp-sheet {
    width: min(380px, 46%); max-height: 76%; bottom: 18px;
    border-radius: var(--r-2xl, 20px);
    padding: 16px 22px 20px;
    box-shadow: 0 18px 50px rgba(33,30,26,0.30);
    transform: translateX(-50%) translateY(130%);
  }
  .pp-sheet-grip { display: none; }
  .pp-sheet-body { padding-top: 2px; }
  .pp-sheet .pt-question { font-size: clamp(19px, 2.4vw, 23px); margin-bottom: 16px; }
  .pp-sheet .pt-toolkind { margin-top: 0; }
}

/* ---- bril-kaart ---- */
.pp-bril-layer { position: absolute; inset: 0; z-index: 240; display: none; align-items: center; justify-content: center; padding: 24px; }
.pp-bril-layer.show { display: flex; }
.pp-bril-back { position: absolute; inset: 0; background: rgba(33,30,26,0.42); backdrop-filter: blur(3px); }
.pp-bril-card {
  position: relative; width: min(420px, 100%);
  max-height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper, #faf6ef); border-radius: var(--r-2xl, 22px);
  box-shadow: 0 30px 80px rgba(33,30,26,0.38); padding: 30px 26px 26px;
  transform: translateY(10px) scale(0.98); opacity: 0;
  transition: transform var(--dur-base, 240ms) var(--ease-soft), opacity var(--dur-base, 240ms) var(--ease-soft);
}
/* de inhoud zit in .pp-bril-card-body en scrolt binnenin; de sluit-knop blijft
   staan, zodat de kaart nooit buiten het staande scherm valt — ook bij 3 brillen. */
.pp-bril-card-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.pp-bril-layer.show .pp-bril-card { transform: none; opacity: 1; }
.pp-bril-x {
  position: absolute; top: 13px; right: 13px; width: 32px; height: 32px; display: grid; place-items: center;
  appearance: none; cursor: pointer; border-radius: var(--r-md, 10px); border: none;
  background: rgba(43,39,34,0.05); color: var(--ink-soft, #5c574e);
}
.pp-bril-x:hover { background: rgba(43,39,34,0.1); color: var(--ink, #2b2722); }
.pp-bril-x svg { width: 17px; height: 17px; }
.pp-bril-big { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: #fff; margin-bottom: 16px; }
.pp-bril-big svg { width: 30px; height: 30px; }
.pp-bril-eye { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-coral-hex, #d97757); font-weight: 600; margin: 0 0 6px; }
.pp-bril-title { font-family: var(--font-serif, "Newsreader", Georgia, serif); font-weight: 400; font-size: 28px; line-height: 1.12; color: var(--ink, #2b2722); margin: 0 0 12px; }
.pp-bril-text { font-size: 16px; line-height: 1.55; color: var(--ink-soft, #5c574e); margin: 0 0 18px; text-wrap: pretty; }
.pp-bril-tip {
  display: flex; gap: 9px; padding: 14px 16px; border-radius: var(--r-lg, 14px);
  background: var(--paper-warm, #f5ecdb); border-left: 3px solid var(--accent-coral-hex, #d97757);
  font-size: 13.5px; line-height: 1.5; color: var(--ink-soft, #5c574e);
}
/* meerdere brillen in de kaart */
.pp-bril-title { text-wrap: balance; }
.pp-bril-stack { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; }
.pp-bril-one {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 13px; border-radius: var(--r-lg, 13px);
  background: #fff; border: 1px solid rgba(43,39,34,0.08); border-left: 3px solid var(--c, #7a5f9e);
}
.pp-bril-chip { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--c, #7a5f9e); color: #fff; }
.pp-bril-chip svg { width: 17px; height: 17px; }
.pp-bril-one-name { font-family: var(--font-serif, "Newsreader", Georgia, serif); font-size: 18px; color: var(--ink, #2b2722); line-height: 1.15; }
.pp-bril-one-grp { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c, #7a5f9e); font-weight: 700; margin-top: 2px; }
.pp-bril-one-text { font-size: 14px; line-height: 1.5; color: var(--ink-soft, #5c574e); margin-top: 5px; text-wrap: pretty; }
/* op laptop staat de telling al in de pil-tekst → badge verbergen */
@media (orientation: landscape) { .pp-bril-count { display: none !important; } }

/* ============================================================
   GEPUSHTE MEMO'S — sticky-kaartjes linksboven op de plaat
   ============================================================ */
.pp-memos {
  position: absolute; top: max(56px, calc(env(safe-area-inset-top) + 52px)); left: 12px; z-index: 44;
  display: flex; flex-direction: column; gap: 10px; width: min(230px, 62%);
  pointer-events: none;
}
.pp-memo {
  pointer-events: auto;
  border-radius: 4px 4px 12px 4px; padding: 11px 13px 13px;
  box-shadow: 0 8px 20px rgba(33,30,26,0.22), 0 1px 3px rgba(33,30,26,0.14);
  color: #2b2722; max-height: 240px; overflow-y: auto;
  animation: ppMemoIn 280ms var(--ease-soft, ease) both;
}
@keyframes ppMemoIn { from { opacity: 0; transform: translateY(-6px) rotate(-1deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pp-memo { animation: none; } }
.pp-memo-title {
  font-family: var(--font-serif, "Newsreader", Georgia, serif); font-weight: 500; font-size: 16px;
  line-height: 1.2; margin-bottom: 4px; color: #2b2722;
}
.pp-memo-text { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; color: rgba(43,39,34,0.85); }

/* ============================================================
   ZOEKOPDRACHT — banner bovenin + uitklapbare kaart
   ============================================================ */
.pp-search {
  position: absolute; top: max(54px, calc(env(safe-area-inset-top) + 50px)); left: 50%; transform: translateX(-50%);
  z-index: 45; max-width: min(560px, calc(100% - 24px));
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px 8px 10px; border-radius: var(--r-pill, 999px);
  border: none; cursor: pointer; appearance: none;
  background: var(--ink, #2b2722); color: var(--paper, #faf6ef);
  box-shadow: 0 8px 22px rgba(33,30,26,0.26);
  font-family: inherit; transition: transform 140ms ease, box-shadow 140ms ease;
}
.pp-search[hidden] { display: none; }
.pp-search:hover { transform: translateX(-50%) translateY(-1px); }
.pp-search-ic {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-coral-hex, #d97757); color: #fff;
}
.pp-search-ic svg { width: 15px; height: 15px; }
.pp-search-text {
  font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pp-search-timer {
  flex: 0 0 auto; font-family: var(--font-mono, monospace); font-size: 12.5px; font-weight: 700;
  padding: 3px 9px; border-radius: var(--r-pill, 999px); background: rgba(250,246,239,0.16); color: var(--paper, #faf6ef);
}
.pp-search-timer[hidden] { display: none; }
.pp-search-timer.done { background: var(--accent-coral-hex, #d97757); color: #fff; }
.pp-search.pp-search-pulse { animation: ppSearchPulse 1.7s var(--ease-soft, ease) 2; }
@keyframes ppSearchPulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(33,30,26,0.26), 0 0 0 0 rgba(217,119,87,0); }
  50% { box-shadow: 0 8px 22px rgba(33,30,26,0.26), 0 0 0 9px rgba(217,119,87,0.18); }
}
@media (prefers-reduced-motion: reduce) { .pp-search.pp-search-pulse { animation: none; } }

/* uitklapkaart */
.pp-search-layer { position: absolute; inset: 0; z-index: 230; display: none; align-items: center; justify-content: center; padding: 24px; }
.pp-search-layer.show { display: flex; }
.pp-search-back { position: absolute; inset: 0; background: rgba(33,30,26,0.42); backdrop-filter: blur(3px); }
.pp-search-card {
  position: relative; width: min(440px, 100%);
  max-height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper, #faf6ef); border-radius: var(--r-2xl, 22px);
  box-shadow: 0 30px 80px rgba(33,30,26,0.38); padding: 30px 26px 26px;
  transform: translateY(10px) scale(0.98); opacity: 0;
  transition: transform var(--dur-base, 240ms) var(--ease-soft), opacity var(--dur-base, 240ms) var(--ease-soft);
}
/* inhoud scrolt binnenin; de sluit-knop blijft staan — nooit buiten het scherm. */
.pp-search-card-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.pp-search-layer.show .pp-search-card { transform: none; opacity: 1; }
.pp-search-x {
  position: absolute; top: 13px; right: 13px; width: 32px; height: 32px; display: grid; place-items: center;
  appearance: none; cursor: pointer; border-radius: var(--r-md, 10px); border: none;
  background: rgba(43,39,34,0.05); color: var(--ink-soft, #5c574e);
}
.pp-search-x:hover { background: rgba(43,39,34,0.1); color: var(--ink, #2b2722); }
.pp-search-x svg { width: 17px; height: 17px; }
.pp-search-big { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--accent-coral-hex, #d97757); margin-bottom: 16px; }
.pp-search-big svg { width: 28px; height: 28px; }
.pp-search-eye { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-coral-hex, #d97757); font-weight: 600; margin: 0 0 6px; }
.pp-search-title { font-family: var(--font-serif, "Newsreader", Georgia, serif); font-weight: 400; font-size: 26px; line-height: 1.18; color: var(--ink, #2b2722); margin: 0 0 14px; text-wrap: pretty; }
.pp-search-bigtimer {
  display: inline-block; font-family: var(--font-mono, monospace); font-size: 15px; font-weight: 700;
  padding: 6px 14px; border-radius: var(--r-pill, 999px); margin: 0 0 16px;
  background: var(--paper-warm, #f5ecdb); color: var(--ink, #2b2722);
}
.pp-search-bigtimer.done { background: var(--accent-coral-hex, #d97757); color: #fff; }
.pp-search-memo { text-align: left; width: 100%; max-width: 360px; margin: 0 auto 18px; background: var(--mc, #f4e4a3); border-radius: 6px 6px 16px 6px; padding: 15px 17px; box-shadow: 0 6px 18px rgba(33,30,26,0.14); }
.pp-search-memo-title { font-family: var(--font-serif, "Newsreader", Georgia, serif); font-size: 18px; font-weight: 500; color: #2b2722; margin-bottom: 6px; }
.pp-search-memo-body { font-size: 14.5px; line-height: 1.5; color: rgba(43,39,34,0.88); white-space: pre-wrap; word-break: break-word; }
.pp-search-memo-body b, .pp-search-memo-body strong { font-weight: 700; }
.pp-search-tip {
  display: flex; gap: 9px; padding: 14px 16px; border-radius: var(--r-lg, 14px);
  background: var(--paper-warm, #f5ecdb); border-left: 3px solid var(--accent-coral-hex, #d97757);
  font-size: 13.5px; line-height: 1.5; color: var(--ink-soft, #5c574e);
}

/* ============================================================
   NOTIFICATIE-DOCK — midden-onderaan, alléén iconen
   Vier mogelijke pillen: Memo's · Push · Brillen · Zoekopdracht.
   Schuift horizontaal (carousel) als het scherm te smal is.
   ============================================================ */
/* dock-iconen op app-icoon-formaat: op desktop ≈ een werkbalk-vierkant van de
   host (46px); op een telefoon rekenen we met vier app-iconen per rij, zoals
   op een homescreen (breedte − marges, gedeeld door vier). */
.stage { --dock-s: calc(48px * var(--pp-dock-scale, 1)); }
@media (max-width: 600px) {
  .stage { --dock-s: calc(clamp(54px, calc((100vw - 70px) / 4), 76px) * var(--pp-dock-scale, 1)); }
}
.pp-dock {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px)); z-index: 90;
  display: flex; align-items: center; gap: 10px;
  max-width: calc(100% - 24px); padding: 8px 8px;
  overflow-x: auto; scroll-snap-type: x proximity;
  -ms-overflow-style: none; scrollbar-width: none;
}
.pp-dock::-webkit-scrollbar { display: none; }
.stage.pp-sheet-open .pp-dock { display: none; }   /* tool-sheet bedekt de onderkant */

.pp-dock-btn {
  --dock-c: var(--accent-coral-hex, #d97757);
  position: relative; flex: 0 0 auto; scroll-snap-align: center;
  width: var(--dock-s, 48px); height: var(--dock-s, 48px); display: grid; place-items: center;
  border: none; cursor: pointer; border-radius: 50%;
  background: var(--paper, #faf6ef); color: var(--ink, #2b2722);
  box-shadow: 0 7px 20px rgba(33,30,26,0.20), 0 2px 6px rgba(33,30,26,0.16);
  transition: transform 140ms var(--ease-soft, ease), box-shadow 140ms var(--ease-soft, ease);
}
.pp-dock-btn[hidden] { display: none; }
.pp-dock-btn:hover { transform: translateY(-2px); }
.pp-dock-ic { display: grid; place-items: center; }
.pp-dock-ic svg { width: calc(var(--dock-s, 48px) * 0.46); height: calc(var(--dock-s, 48px) * 0.46); }
.pp-dock-btn.is-push { background: var(--accent-coral-hex, #d97757); color: #fff; box-shadow: 0 7px 20px rgba(217,119,87,0.36), 0 2px 6px rgba(33,30,26,0.18); }
.pp-dock-btn.is-search { background: var(--ink, #2b2722); color: var(--paper, #faf6ef); }
.pp-dock-btn.is-memo { background: var(--dock-c); color: #2b2722; }
.pp-dock-badge {
  position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--ink, #2b2722); color: var(--paper, #faf6ef);
  font-size: 10.5px; font-weight: 700; line-height: 1; border: 2px solid var(--paper, #faf6ef);
}
.pp-dock-badge[hidden] { display: none; }
.pp-dock-btn.is-search .pp-dock-badge { background: var(--accent-coral-hex, #d97757); border-color: var(--ink, #2b2722); }
.pp-dock-btn.pp-dock-pulse { animation: ppDockPulse 1.6s var(--ease-soft, ease) 2; }
@keyframes ppDockPulse {
  0%,100% { box-shadow: 0 7px 20px rgba(33,30,26,0.20), 0 0 0 0 color-mix(in srgb, var(--dock-c) 55%, transparent); }
  50% { box-shadow: 0 7px 20px rgba(33,30,26,0.20), 0 0 0 11px color-mix(in srgb, var(--dock-c) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .pp-dock-btn.pp-dock-pulse { animation: none; } }

/* “er is iets nieuws”: blijvende gloed (ring + zachte ademhaling) tot een klik */
.pp-dock-btn.pp-dock-glow::after {
  content: ""; position: absolute; inset: -3px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dock-c) 75%, transparent), 0 0 18px 5px color-mix(in srgb, var(--dock-c) 42%, transparent);
  animation: ppDockGlow 1.9s var(--ease-soft, ease) infinite;
}
@keyframes ppDockGlow { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .pp-dock-btn.pp-dock-glow::after { animation: none; } }
/* de identiteitsbadge gloeit in coral (heeft zelf geen --dock-c-achtergrond) */
.pp-dock-btn.is-id.pp-dock-glow::after { border-radius: 50%; }

/* gekoppelde memo (bij een zoekopdracht) licht continu op in het dock */
.pp-dock-btn.is-memo.pp-dock-hl { box-shadow: 0 7px 20px rgba(33,30,26,0.20), 0 0 0 3px var(--accent-coral-hex, #d97757); animation: ppMemoHl 1.8s var(--ease-soft, ease) infinite; }
@keyframes ppMemoHl {
  0%,100% { box-shadow: 0 7px 20px rgba(33,30,26,0.20), 0 0 0 0 rgba(217,119,87,0.45); }
  50% { box-shadow: 0 7px 20px rgba(33,30,26,0.20), 0 0 0 7px rgba(217,119,87,0); }
}
@media (prefers-reduced-motion: reduce) { .pp-dock-btn.is-memo.pp-dock-hl { animation: none; } }

/* memo-uitklapbalkje boven het dock */
.pp-memo-pop {
  position: absolute; left: 50%; transform: translateX(-50%) translateY(8px);
  bottom: max(calc(var(--dock-s, 48px) + 42px), calc(env(safe-area-inset-bottom) + var(--dock-s, 48px) + 38px)); z-index: 92;
  width: min(300px, calc(100% - 28px));
  display: none; flex-direction: column; gap: 8px;
  padding: 12px; border-radius: var(--r-xl, 18px);
  background: var(--paper, #faf6ef);
  box-shadow: 0 18px 44px rgba(33,30,26,0.28); opacity: 0;
  transition: opacity 200ms var(--ease-soft, ease), transform 200ms var(--ease-soft, ease);
}
.pp-memo-pop.show { display: flex; opacity: 1; transform: translateX(-50%) translateY(0); }
.stage.pp-sheet-open .pp-memo-pop { display: none; }
.pp-memo-pop-head { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted, #8a8377); font-weight: 700; padding: 2px 4px 4px; }
.pp-memo-pill {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  appearance: none; cursor: pointer;
  padding: 11px 13px; border-radius: var(--r-lg, 12px);
  background: #fff; border: 1px solid rgba(43,39,34,0.08); border-left: 4px solid var(--c, #f4e4a3);
  font-family: inherit; transition: transform 120ms ease, background 120ms ease;
}
.pp-memo-pill:hover { transform: translateX(2px); background: var(--paper-warm, #f5ecdb); }
.pp-memo-pill.hl { background: rgba(217,119,87,0.12); box-shadow: inset 0 0 0 1.5px var(--accent-coral-hex, #d97757); }
.pp-memo-pill-dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 4px; background: var(--c, #f4e4a3); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }
.pp-memo-pill-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pp-memo-pill-title { font-family: var(--font-serif, "Newsreader", Georgia, serif); font-size: 16px; color: var(--ink, #2b2722); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* compacte herkomst in het overzichtsmenu: scènetitel, kleur zit in de dot */
.pp-memo-pill-scene { font-family: var(--font-sans, sans-serif); font-size: 11px; font-weight: 600; color: var(--ink-soft, #5c574e); line-height: 1.25; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* memo-kaart (volledige memo) */
.pp-memo-layer { position: absolute; inset: 0; z-index: 250; display: none; align-items: center; justify-content: center; padding: 24px; }
.pp-memo-layer.show { display: flex; }
.pp-memo-back { position: absolute; inset: 0; background: rgba(33,30,26,0.42); backdrop-filter: blur(3px); }
.pp-memo-card {
  position: relative; width: min(420px, 100%);
  transform: translateY(10px) scale(0.98); opacity: 0;
  transition: transform var(--dur-base, 240ms) var(--ease-soft), opacity var(--dur-base, 240ms) var(--ease-soft);
}
.pp-memo-layer.show .pp-memo-card { transform: none; opacity: 1; }
.pp-memo-x {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 32px; height: 32px; display: grid; place-items: center;
  appearance: none; cursor: pointer; border-radius: var(--r-md, 10px); border: none;
  background: rgba(0,0,0,0.08); color: rgba(43,39,34,0.7);
}
.pp-memo-x:hover { background: rgba(0,0,0,0.16); color: #2b2722; }
.pp-memo-x svg { width: 17px; height: 17px; }
.pp-memo-big { border-radius: 6px 6px 18px 6px; padding: 26px 24px 24px; box-shadow: 0 30px 80px rgba(33,30,26,0.4); color: #2b2722; max-height: 70vh; overflow-y: auto; }
.pp-memo-big-title { font-family: var(--font-serif, "Newsreader", Georgia, serif); font-weight: 500; font-size: 23px; line-height: 1.2; margin: 0 0 12px; padding-right: 32px; }
.pp-memo-big-text { font-size: 16px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; color: rgba(43,39,34,0.9); text-wrap: pretty; }
.pp-memo-big-text b, .pp-memo-big-text strong { font-weight: 700; }

/* sessie-verlaten-waarschuwing */
.pp-leave-layer { position: absolute; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; padding: 24px; }
.pp-leave-layer.show { display: flex; }
.pp-leave-back { position: absolute; inset: 0; background: rgba(33,30,26,0.46); backdrop-filter: blur(3px); }
.pp-leave-card {
  position: relative; width: min(400px, 100%);
  background: var(--paper, #faf6ef); border-radius: var(--r-2xl, 20px);
  box-shadow: 0 30px 80px rgba(33,30,26,0.4); padding: 28px 26px 24px;
  transform: translateY(10px) scale(0.98); opacity: 0;
  transition: transform var(--dur-base, 240ms) var(--ease-soft), opacity var(--dur-base, 240ms) var(--ease-soft);
}
.pp-leave-layer.show .pp-leave-card { transform: none; opacity: 1; }
.pp-leave-eye { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-coral-hex, #d97757); font-weight: 700; margin: 0 0 8px; }
.pp-leave-title { font-family: var(--font-serif, "Newsreader", Georgia, serif); font-weight: 400; font-size: 26px; line-height: 1.15; color: var(--ink, #2b2722); margin: 0 0 10px; }
.pp-leave-text { font-size: 15px; line-height: 1.55; color: var(--ink-soft, #5c574e); margin: 0 0 22px; text-wrap: pretty; }
.pp-leave-acts { display: flex; gap: 10px; }
.pp-leave-btn {
  flex: 1 1 auto; appearance: none; cursor: pointer; border-radius: var(--r-pill, 999px);
  padding: 13px 18px; font-family: inherit; font-size: 15px; font-weight: 700;
  border: 1.5px solid transparent; transition: transform 120ms ease, background 120ms ease;
}
.pp-leave-btn.ghost { background: transparent; border-color: rgba(43,39,34,0.2); color: var(--ink, #2b2722); }
.pp-leave-btn.ghost:hover { background: rgba(43,39,34,0.05); }
.pp-leave-btn.danger { background: #b4502f; color: #fff; }
.pp-leave-btn.danger:hover { background: #9d4429; transform: translateY(-1px); }

/* ============================================================
   DEELNEMERSPIN (zoekopdracht met pin-invoer)
   ============================================================ */
/* dockingstation rechtsonder, boven de notificaties */
.ppin-dock {
  position: absolute; right: max(14px, env(safe-area-inset-right)); z-index: 88;
  bottom: max(calc(var(--dock-s, 48px) + 46px), calc(env(safe-area-inset-bottom) + var(--dock-s, 48px) + 40px));
  display: none; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 9px 6px; border-radius: var(--r-lg, 14px);
  background: var(--paper, #faf6ef); box-shadow: 0 10px 30px rgba(33,30,26,0.22);
}
.ppin-dock.show { display: flex; }
.ppin-dockpin svg { display: block; width: 22px; height: auto; }
.ppin-dock-cap { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted, #8a8377); }
.ppin-dockpin {
  appearance: none; border: none; background: transparent; cursor: grab; padding: 2px;
  touch-action: none; filter: drop-shadow(0 3px 4px rgba(33,30,26,0.3));
  transition: transform 130ms var(--ease-soft, ease);
  animation: ppinBob 2.6s ease-in-out infinite;
}
.ppin-dockpin:active { cursor: grabbing; transform: scale(1.12); }
@keyframes ppinBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.ppin-dock-hint { font-size: 9.5px; color: var(--ink-muted, #8a8377); }
/* als de pin geplaatst is: dock toont 'leeg' staat */
.ppin-dock.ppin-dock-empty .ppin-dockpin { opacity: 0.25; filter: grayscale(1); animation: none; pointer-events: none; }
.ppin-dock.ppin-dock-empty .ppin-dock-hint { color: var(--accent-green, #5f7a4e); }
.ppin-dock.ppin-dock-empty .ppin-dock-hint::after { content: " · geplaatst"; }

/* tijdens het plaatsen: bullseye-cursor */
.plaat.pp-pinmode, .plaat.pp-pinmode * { cursor: none !important; }
.stage.ppin-dragging { cursor: none; }

/* ============ GEDEELDE LINKS — kaart met domein-tussenstap ============ */
/* de linkkaart krijgt een eigen papieren venster: memo's hebben hun gekleurde
   sticky als achtergrond, maar de linklijst had anders niets achter zich */
.pp-link-layer .pp-memo-card {
  background: var(--paper, #faf6ef);
  border: 1px solid rgba(43,39,34,0.10);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(33,30,26,0.30);
  padding: 20px 18px 18px;
}
.pp-link-layer .pp-link-eye { padding-right: 36px; } /* ruimte voor het sluitkruis */
.pp-link-eye { margin: 0 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted, #7a7064); }
.pp-link-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 12px; margin: 0 0 8px; border: 1px solid rgba(43,39,34,0.12); border-radius: 13px; background: var(--paper, #faf6ef); cursor: pointer; font: inherit; text-align: left; }
.pp-link-row-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--plaat-sky, #e3ecf0); color: var(--ink, #2b2722); }
.pp-link-row-ic svg { width: 17px; height: 17px; }
.pp-link-row-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.pp-link-row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 14.5px; color: var(--ink, #2b2722); }
.pp-link-row-host { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink-muted, #7a7064); }
.pp-link-row-go { flex: 0 0 auto; color: var(--ink-soft, #4a433a); }
.pp-link-row-go svg { width: 16px; height: 16px; }
.pp-link-title { margin: 0 0 9px; font-family: var(--font-serif, serif); font-weight: 500; font-size: 21px; line-height: 1.2; color: var(--ink, #2b2722); overflow-wrap: anywhere; }
.pp-link-url { padding: 9px 11px; border-radius: 10px; background: rgba(43,39,34,0.05); font-family: var(--font-mono, monospace); font-size: 12px; line-height: 1.45; color: var(--ink-soft, #4a433a); word-break: break-all; max-height: 76px; overflow: hidden; }
.pp-link-warn { margin: 10px 0 14px; font-size: 13px; line-height: 1.45; color: var(--ink-soft, #4a433a); }
.pp-link-acts { display: flex; gap: 9px; flex-wrap: wrap; }
.pp-link-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 16px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer; text-decoration: none; }
.pp-link-btn.ghost { background: none; border: 1.5px solid var(--ink, #2b2722); color: var(--ink, #2b2722); }
.pp-link-btn.go { flex: 1 1 auto; background: var(--ink, #2b2722); border: 1.5px solid var(--ink, #2b2722); color: var(--paper, #faf6ef); }
.pp-link-btn.go svg { width: 16px; height: 16px; flex: 0 0 auto; }
.pp-link-btn.go span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* zwevende bullseye */
.ppin-reticle { position: fixed; z-index: 200; width: 64px; height: 64px; margin: -32px 0 0 -32px; pointer-events: none; display: none; }
.ppin-reticle.show { display: block; }
.ppin-reticle svg { filter: drop-shadow(0 2px 4px rgba(33,30,26,0.45)); }
.ppin-reticle-pin { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); filter: drop-shadow(0 3px 4px rgba(33,30,26,0.4)); }

/* geplaatste pin (OSD-overlay) */
.ppin-placed { position: relative; width: 26px; height: 32px; cursor: pointer; touch-action: none; filter: drop-shadow(0 2px 3px rgba(33,30,26,0.4)); transform-origin: 50% 100%; transition: transform 120ms var(--ease-soft, ease); }
.ppin-placed:hover { transform: scale(1.12); }
.ppin-placed-note { position: absolute; top: -4px; right: -7px; width: 15px; height: 15px; display: grid; place-items: center; background: var(--ink, #2b2722); color: #fff; border-radius: 50%; border: 1.5px solid #fff; }
.ppin-placed-note svg { width: 9px; height: 9px; }

/* notitie-/verwijder-popover */
.ppin-pop { position: absolute; z-index: 210; display: none; width: min(280px, calc(100vw - 28px)); background: var(--paper, #faf6ef); border-radius: var(--r-xl, 18px); box-shadow: 0 16px 44px rgba(33,30,26,0.28); padding: 14px; }
.ppin-pop.show { display: block; }
.ppin-pop-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--ink, #2b2722); margin-bottom: 10px; }
.ppin-pop-dot { width: 11px; height: 11px; border-radius: 4px; }
.ppin-pop-x { margin-left: auto; width: 24px; height: 24px; display: grid; place-items: center; border: none; background: transparent; border-radius: 7px; cursor: pointer; color: var(--ink-muted, #8a8377); }
.ppin-pop-x svg { width: 14px; height: 14px; }
.ppin-pop-x:hover { background: rgba(43,39,34,0.06); color: var(--ink); }
.ppin-pop-ta { width: 100%; resize: none; border: 1px solid var(--line-soft, rgba(43,39,34,0.16)); border-radius: 11px; padding: 10px 12px; font-family: var(--font-sans); font-size: 14px; line-height: 1.4; color: var(--ink); background: #fff; }
.ppin-pop-ta:focus { outline: none; border-color: var(--accent-coral-hex, #d97757); }
.ppin-pop-note { font-size: 14px; line-height: 1.45; color: var(--ink); word-break: break-word; }
.ppin-pop-empty { font-size: 13px; font-style: italic; color: var(--ink-muted); }
.ppin-pop-acts { display: flex; align-items: center; gap: 8px; margin-top: 11px; }
.ppin-pop-del { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: #b4502f; background: rgba(180,80,47,0.08); border: none; border-radius: 9px; padding: 9px 13px; cursor: pointer; }
.ppin-pop-del:hover { background: rgba(180,80,47,0.16); }
.ppin-pop-ok { margin-left: auto; font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: #fff; background: var(--ink, #2b2722); border: none; border-radius: 9px; padding: 9px 16px; cursor: pointer; }
.ppin-pop-ok:hover { background: #000; }
@media (prefers-reduced-motion: reduce) { .ppin-dockpin { animation: none; } }

/* ============================================================
   LANDSCHAP (laag scherm): chrome schaalt mee zodat de icoontjes niet
   te groot ogen t.o.v. de geringe hoogte (in portret vult de plaat het
   hele scherm, in landschap is 'ie 16:9-letterboxed en dus lager).
   ============================================================ */
@media (orientation: landscape) and (max-height: 600px) {
  .pp-top { padding: 6px 10px; padding-top: max(6px, env(safe-area-inset-top)); }
  .pp-top-status { font-size: 11px; }
  .pp-leave-mini { width: 28px; height: 28px; }
  .pp-leave-mini svg { width: 16px; height: 16px; }
  .stage { --dock-s: calc(40px * var(--pp-dock-scale, 1)); }
  .pp-dock { bottom: max(8px, calc(env(safe-area-inset-bottom) + 6px)); gap: 8px; padding: 6px; }
  .pp-dock-badge { min-width: 14px; height: 14px; font-size: 9px; }
  /* pin-dockingstation compacter; bottoms volgen --dock-s automatisch */
  .ppin-dock { padding: 7px 10px 6px; }
}

/* ============================================================
   LAADBALK — praatplaat wordt geladen (read-only viewer)
   ============================================================ */
.pp-loader {
  position: absolute; inset: 0; z-index: 130;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: var(--paper, #faf6ef);
  transition: opacity 420ms var(--ease-soft, ease);
}
.pp-loader.done { opacity: 0; pointer-events: none; }
.pp-loader-logo { height: 42px; width: auto; opacity: 0.92; }
.pp-loader-bar { width: min(240px, 58%); height: 5px; border-radius: 999px; background: rgba(43,39,34,0.10); overflow: hidden; }
.pp-loader-bar i { display: block; height: 100%; width: 32%; border-radius: 999px; background: var(--accent-coral-hex, #d97757); transform: translateX(-120%); animation: ppLoad 1.25s var(--ease-soft, ease-in-out) infinite; }
@keyframes ppLoad { 0% { transform: translateX(-120%); } 100% { transform: translateX(420%); } }
.pp-loader-txt { font-family: var(--font-sans, sans-serif); font-size: 13px; color: var(--ink-muted, #7a7064); letter-spacing: 0.01em; }
@media (prefers-reduced-motion: reduce) { .pp-loader-bar i { animation-duration: 2.2s; } }

/* ============================================================
   ALLEEN-KIJKEN — host zet deelnemer op inactief (alleen zoom/pan)
   ============================================================ */
/* alle notificaties uit, behalve de eigen badge — die blijft in het dock staan
   (vervaagd) zodat de deelnemer 'm kan aantikken voor de uitleg. */
.stage.pp-inactive .pp-dock-btn:not(.is-id),
.stage.pp-inactive .pp-memo-pop,
.stage.pp-inactive .pp-sheet-layer,
.stage.pp-inactive .pp-search-layer,
.stage.pp-inactive .pp-bril-layer,
.stage.pp-inactive .pp-memo-layer,
.stage.pp-inactive .pp-idpop,
.stage.pp-inactive .ppin-dock { display: none !important; }
/* badge krijgt dezelfde vervaagde kleur als in 'deelnemers beheren' (hostkant) */
.stage.pp-inactive .pp-dock-btn.is-id .idb { opacity: 0.5; filter: grayscale(0.5); }
.pp-inactive-note {
  position: absolute; left: 50%; bottom: max(calc(var(--dock-s, 48px) + 42px), calc(env(safe-area-inset-bottom) + var(--dock-s, 48px) + 38px)); transform: translateX(-50%);
  z-index: 80; display: flex; align-items: center; gap: 9px;
  max-width: min(420px, calc(100% - 28px)); padding: 9px 15px;
  background: rgba(33,30,26,0.86); color: #faf6ef; backdrop-filter: blur(8px);
  border-radius: 999px; box-shadow: 0 8px 24px rgba(33,30,26,0.28);
  font-family: var(--font-sans, sans-serif); font-size: 12.5px; line-height: 1.35; text-wrap: pretty;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 300ms var(--ease-soft, ease), visibility 300ms var(--ease-soft, ease);
}
.pp-inactive-note.show { opacity: 1; visibility: visible; }
.pp-inactive-note svg { width: 16px; height: 16px; flex: 0 0 auto; opacity: 0.9; }

/* venster met de alleen-kijken-boodschap (tik op de badge tijdens inactief) */
.pp-inactive-layer { position: absolute; inset: 0; z-index: 260; display: none; align-items: center; justify-content: center; padding: 24px; }
.pp-inactive-layer.show { display: flex; }
.pp-inactive-back { position: absolute; inset: 0; background: rgba(33,30,26,0.42); backdrop-filter: blur(3px); }
.pp-inactive-card {
  position: relative; width: min(400px, 100%);
  background: var(--paper, #faf6ef); border-radius: var(--r-2xl, 22px);
  box-shadow: 0 30px 80px rgba(33,30,26,0.38); padding: 30px 26px 26px;
  transform: translateY(10px) scale(0.98); opacity: 0;
  transition: transform var(--dur-base, 240ms) var(--ease-soft), opacity var(--dur-base, 240ms) var(--ease-soft);
}
.pp-inactive-layer.show .pp-inactive-card { transform: none; opacity: 1; }
.pp-inactive-x {
  position: absolute; top: 13px; right: 13px; width: 32px; height: 32px; display: grid; place-items: center;
  appearance: none; cursor: pointer; border-radius: var(--r-md, 10px); border: none;
  background: rgba(43,39,34,0.05); color: var(--ink-soft, #5c574e);
}
.pp-inactive-x:hover { background: rgba(43,39,34,0.1); color: var(--ink, #2b2722); }
.pp-inactive-x svg { width: 17px; height: 17px; }
.pp-inactive-big { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-soft, #5c574e); background: var(--paper-warm, #f5ecdb); margin-bottom: 16px; }
.pp-inactive-big svg { width: 28px; height: 28px; }
.pp-inactive-eye { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-coral-hex, #d97757); font-weight: 600; margin: 0 0 6px; }
.pp-inactive-title { font-family: var(--font-serif, "Newsreader", Georgia, serif); font-weight: 400; font-size: 26px; line-height: 1.15; color: var(--ink, #2b2722); margin: 0 0 12px; }
.pp-inactive-text { font-size: 15.5px; line-height: 1.55; color: var(--ink-soft, #5c574e); margin: 0; text-wrap: pretty; }

/* ============================================================
   GEEN ZOOM-KNOPPEN OP DE TELEFOON (pinch-zoom blijft werken),
   eigen identiteit linksonder met uitklap "Jij bent …"
   ============================================================ */
.zoom-ctrls { display: none !important; }

/* ---- eigen identiteit als dock-knop (eerste "notificatie") ---- */
.pp-dock-btn.is-id { background: transparent; box-shadow: none; padding: 0; overflow: visible; }
.pp-dock-btn.is-id .idb {
  width: 100% !important; height: 100% !important;
  box-shadow: 0 7px 20px rgba(33,30,26,0.20), 0 2px 6px rgba(33,30,26,0.16), inset 0 0 0 2px rgba(255,255,255,0.85);
}
.pp-dock-btn.is-id:active { transform: scale(0.94); }

/* "Jij bent …" + bijdragen-overzicht (verschijnt boven het dock) */
.pp-idpop {
  position: absolute; left: 50%; transform: translateX(-50%) translateY(8px);
  bottom: max(calc(var(--dock-s, 48px) + 42px), calc(env(safe-area-inset-bottom) + var(--dock-s, 48px) + 38px)); z-index: 92;
  display: none; flex-direction: column;
  width: min(330px, calc(100vw - 28px));
  max-height: min(54vh, 440px);
  padding: 13px 13px 9px; border-radius: var(--r-lg, 16px);
  background: var(--paper, #faf6ef); border: 1px solid rgba(43,39,34,0.12);
  box-shadow: 0 14px 38px rgba(33,30,26,0.24);
  opacity: 0; transition: opacity 200ms var(--ease-soft, ease), transform 200ms var(--ease-soft, ease);
}
.pp-idpop.show { display: flex; opacity: 1; transform: translateX(-50%) translateY(0); }
.pp-idpop-head { display: flex; align-items: center; gap: 9px; padding: 0 2px; }
.pp-idpop-name { flex: 1 1 auto; min-width: 0; font-family: var(--font-serif, Georgia, serif); font-size: 16px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-idpop-name-in { display: inline-block; }
/* lange naam: schuift één keer heen en weer bij het openen van het venstertje */
.pp-idpop-name.marquee { text-overflow: clip; }
.pp-idpop-name.marquee .pp-idpop-name-in { animation: ppIdNameScroll var(--marq-dur, 4s) ease-in-out 0.5s 1 both; }
@keyframes ppIdNameScroll {
  0% { transform: translateX(0); }
  40% { transform: translateX(var(--marq-x, 0)); }
  60% { transform: translateX(var(--marq-x, 0)); }
  100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .pp-idpop-name.marquee .pp-idpop-name-in { animation: none; }
}

/* lijst met bril + bijdragen */
.pp-idpop-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 6px; margin-top: 9px; padding-bottom: 4px;
}
.pp-idpop-empty { margin: 4px 2px 8px; font-size: 13px; color: var(--ink-muted, #8a8377); }
.pp-idpop-row {
  display: flex; align-items: center; gap: 10px; width: 100%; flex: 0 0 auto;
  padding: 8px 10px; border-radius: var(--r-md, 12px); border: 1px solid rgba(43,39,34,0.1);
  background: rgba(43,39,34,0.025); appearance: none; text-align: left;
  font-family: var(--font-sans, sans-serif); color: var(--ink, #2b2722);
}
button.pp-idpop-row { cursor: pointer; }
button.pp-idpop-row:hover { background: rgba(43,39,34,0.06); }
.pp-idpop-row.is-static { opacity: 0.62; }
.pp-idpop-row.is-bril { border: 1.5px solid var(--c, #7a5f9e); }
.pp-idpop-row-ic {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(43,39,34,0.07); color: var(--ink-soft, #5c574e);
}
.pp-idpop-row.is-bril .pp-idpop-row-ic,
.pp-idpop-row.is-pin .pp-idpop-row-ic { background: var(--c, #7a5f9e); color: #fff; }
.pp-idpop-row-ic svg { width: 16px; height: 16px; }
.pp-idpop-row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pp-idpop-row-kind { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-muted, #8a8377); }
.pp-idpop-row-txt {
  font-size: 13px; line-height: 1.35; color: var(--ink, #2b2722);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pp-idpop-row-sub { font-size: 11px; color: var(--ink-muted, #8a8377); }
.pp-idpop-row-go { flex: 0 0 auto; color: var(--ink-muted, #8a8377); display: grid; place-items: center; }
.pp-idpop-row-go svg { width: 14px; height: 14px; }


/* gekoppelde link bij de zoekopdracht-kaart en de vraag-bottomsheet */
.pp-search-linkrow, .pt-tool-linkrow { margin-top: 12px; }


/* ============ INVENTARIS in het scènevenster (gespiegeld door de host) ============ */
/* het inventaris-uitklapmenu krijgt dezelfde pilvorm + kleur als bij de host */
.acc-inv {
  border-bottom: none; margin: 12px 14px 16px; overflow: hidden;
  border-radius: var(--r-lg, 16px);
  background: rgba(225,184,120,0.14);
  border: 1px solid rgba(200,150,80,0.30);
}
.acc-inv > .acc-head { padding: 13px 15px; color: var(--ink); font-weight: 700; }
.acc-inv > .acc-head:hover { background: rgba(200,150,80,0.12); }
.acc-inv .lbl { flex: 1 1 auto; }
.acc-inv .inv-ct {
  flex: 0 0 auto; font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: #fff; background: var(--accent-coral-hex, #d97757);
  border-radius: 999px; padding: 2px 9px; min-width: 23px; text-align: center;
}
.acc-inv > .acc-head .chev { color: #b07a2e; }
.acc-inv.open > .acc-head .chev { color: var(--accent-coral-hex, #d97757); }
.acc-inv .acc-inner { padding: 2px 14px 14px; }

/* alleen-lezen lijst met items */
.pinv-list { display: flex; flex-direction: column; gap: 9px; }
.pinv-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px;
  border: 1px solid rgba(43,39,34,0.10); border-radius: 12px; background: rgba(255,253,249,0.8);
}
.pinv-ic { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--ink, #2b2722); }
.pinv-ic svg { width: 16px; height: 16px; }
.pinv-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pinv-l { font-weight: 700; font-size: 13.5px; color: var(--ink, #2b2722); }
.pinv-s { font-size: 12.5px; color: var(--ink-soft, #4a433a); line-height: 1.45; overflow-wrap: anywhere; }
.pinv-open {
  flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center;
  border: none; border-radius: 8px; background: rgba(43,39,34,0.06); color: var(--ink-soft, #4a433a); cursor: pointer;
}
.pinv-open:hover { background: rgba(43,39,34,0.12); }
.pinv-open svg { width: 14px; height: 14px; }

/* ============================================================
   WEERGAVE-INSTELLINGEN (in het badge-menu) + afgeleide effecten
   ============================================================ */
/* tandwiel/terug-knop in de kop van het badge-menu */
.pp-idpop-gear {
  flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center;
  border: none; border-radius: 8px; background: rgba(43,39,34,0.06); color: var(--ink-soft, #4a433a); cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.pp-idpop-gear:hover { background: rgba(43,39,34,0.12); color: var(--ink, #2b2722); }
.pp-idpop-gear svg { width: 17px; height: 17px; }
/* instellingenpaneel */
.pp-set { display: flex; flex-direction: column; gap: 15px; padding: 14px 2px 6px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.pp-set-sec { display: flex; flex-direction: column; gap: 8px; }
.pp-set-lbl { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted, #7a7064); }
.pp-set-seg { display: flex; gap: 5px; background: rgba(43,39,34,0.05); border-radius: 12px; padding: 4px; }
.pp-set-opt {
  flex: 1 1 0; min-width: 0; appearance: none; border: none; cursor: pointer;
  padding: 10px 7px; border-radius: 9px; background: transparent;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft, #4a433a);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.pp-set-opt:hover { color: var(--ink, #2b2722); }
.pp-set-opt.on { background: var(--paper, #faf6ef); color: var(--ink, #2b2722); box-shadow: 0 1px 3px rgba(33,30,26,0.14); }
/* niveau-bolletjes in de instellingen (1/2/3) */
.pp-lv-opt { display: flex; align-items: center; justify-content: center; }
.pp-lv-dots { display: inline-flex; align-items: center; gap: 4px; line-height: 0; }
.pp-lv-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: block; }

/* ---- tekst-schaal: schaalt ALLEEN leestekst, niet de layout ----
   Standaard (--pp-text-scale: 1) verandert er niets; "groot" = 1.5, "extra groot" = 2.
   Elke regel herhaalt exact de basisgrootte × de schaal. */
.stage .lp-text { font-size: calc(16px * var(--pp-text-scale, 1)); }
.stage .lp-lead { font-size: calc(16.5px * var(--pp-text-scale, 1)); }
.stage .stelling .st-text { font-size: calc(22px * var(--pp-text-scale, 1)); }
.stage .kv-list li { font-size: calc(15.5px * var(--pp-text-scale, 1)); }
.stage .kv-list li .kv-n { font-size: calc(19px * var(--pp-text-scale, 1)); }
.stage .callout p { font-size: calc(15.5px * var(--pp-text-scale, 1)); }
.stage .pt-question { font-size: calc(clamp(23px, 6.5vw, 30px) * var(--pp-text-scale, 1)); }
.stage .pp-sheet .pt-question { font-size: calc(clamp(19px, 2.4vw, 23px) * var(--pp-text-scale, 1)); }
.stage .pt-input { font-size: calc(17px * var(--pp-text-scale, 1)); }
.stage .pt-opt { font-size: calc(16.5px * var(--pp-text-scale, 1)); }
.stage .pt-textarea { font-size: calc(16.5px * var(--pp-text-scale, 1)); }
.stage .pt-answer-echo { font-size: calc(16px * var(--pp-text-scale, 1)); }
.stage .pt-sub { font-size: calc(15.5px * var(--pp-text-scale, 1)); }
.stage .pp-bril-text { font-size: calc(16px * var(--pp-text-scale, 1)); }
.stage .pp-bril-one-text { font-size: calc(14px * var(--pp-text-scale, 1)); }
.stage .pp-search-memo-body { font-size: calc(14px * var(--pp-text-scale, 1)); }
.stage .pp-link-title { font-size: calc(21px * var(--pp-text-scale, 1)); }

/* ============================================================
   NOTIFICATIES — verenigd dock (memo's + links), 3 icoonstanden
   ============================================================ */
/* type-icoon in de uitklappil (memo · memo+link · link) */
.pp-memo-pill-ic {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; background: var(--c, #f4e4a3); color: #2b2722;
}
.pp-memo-pill-ic svg { width: 16px; height: 16px; }
.pp-memo-pill-scene:empty { display: none; }
/* gekoppelde link onder de memokaart */
.pp-memo-linkrow { margin-top: 12px; }

/* ---- scroll-aanwijzing: subtiele rand-fade + pijltje als er meer bollen zijn ---- */
.pp-dock.can-l {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30px);
          mask-image: linear-gradient(to right, transparent 0, #000 30px);
}
.pp-dock.can-r {
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 30px);
          mask-image: linear-gradient(to left, transparent 0, #000 30px);
}
.pp-dock.can-l.can-r {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
}
.pp-dock-cue {
  position: absolute; z-index: 91; pointer-events: none;
  transform: translate(-50%, -50%);
  display: none; place-items: center;
  border: none; background: none; padding: 0;
  color: var(--paper, #faf6ef);
  filter: drop-shadow(0 1px 2px rgba(33,30,26,0.55));
  opacity: 0; transition: opacity 200ms var(--ease-soft, ease);
}
.pp-dock-cue.show { display: grid; opacity: 0.62; }
.pp-dock-cue svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .pp-dock-cue { transition: none; } }