/* ============================================================
   SCRIPT 10 JAAR — verhalen-app
   Drie schermen in één pagina: insturen (#insturen), moderatie
   (#moderatie) en beamer (#beamer). Kleuren, type en maten komen
   uit ds/tokens/; de componentklassen hieronder volgen het Script
   design system (Button, FilterChip, Input, Textarea).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--scr-white);
  color: var(--scr-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
body { min-height: 100vh; min-height: 100dvh; }
a { color: var(--scr-blue); text-decoration: none; }
a:hover { color: var(--scr-blue-600); }
img { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgba(42, 161, 255, 0.4); outline-offset: 2px; }

@keyframes scrFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sent, .slide { animation: none !important; }
}

/* ---- Views: één zichtbaar tegelijk, gestuurd door body[data-view] ---- */
.view { display: none; }
body[data-view="insturen"]  .view--insturen,
body[data-view="moderatie"] .view--moderatie { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body[data-view="beamer"]    .view--beamer { display: block; }
body[data-view="beamer"] { overflow: hidden; }

.page {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 24px 96px;
}
.page > * { width: 100%; min-width: 0; }
.page--narrow > * { max-width: 640px; }
.page--mod       { background: var(--scr-grey-100); }
.page--mod > *   { max-width: 760px; }

/* ---- Typografie ---- */
.eyebrow {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--scr-blue);
}
.eyebrow--muted { color: var(--scr-grey-500); }
.display {
  margin: 0;
  font-size: clamp(36px, 6vw, 56px);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.h2 { margin: 0; font-size: 28px; font-weight: var(--fw-bold); line-height: 1.15; }
.lead {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 18px;
  font-weight: var(--fw-light);
  line-height: 1.7;
  color: var(--scr-ink);
  text-wrap: pretty;
}
.lead--narrow { max-width: 480px; }
.label { font-size: 14px; font-weight: var(--fw-semibold); }
.label__optional { font-weight: var(--fw-regular); color: var(--scr-grey-500); }
.form-error { margin: 0; font-size: 14px; color: var(--scr-error); }

/* ---- Componenten (naar het design system) ---- */

/* Button — pill, Montserrat Medium; primary heeft de blauwe gloed. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--fw-medium);
  line-height: 1;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--scr-blue);
  color: var(--scr-white);
  box-shadow: var(--shadow-brand);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out), filter var(--dur) var(--ease-out);
}
.btn:hover:not(:disabled)  { background: var(--scr-blue-600); }
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn--lg { height: 56px; padding: 0 32px; }
.btn--secondary { background: var(--scr-white); color: var(--scr-blue); box-shadow: var(--shadow-xs); }
.btn--secondary:hover:not(:disabled) { background: var(--scr-white); filter: brightness(0.97); }
.btn--arrow { justify-content: space-between; gap: 16px; padding-right: 6px; }
.btn__disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--scr-white);
  color: var(--scr-blue);
  box-shadow: var(--shadow-sm);
}
.btn--lg .btn__disc { width: 44px; height: 44px; }

/* Knop die er als een tekstlink uitziet (moderatiebalk). */
.linkish { padding: 0; border: none; background: none; font: inherit; color: var(--scr-blue); cursor: pointer; }
.linkish:hover { color: var(--scr-blue-600); }

/* FilterChip — toggle-pill. Actief = blauw, anders lichtblauwe wash. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 18px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  line-height: 1;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--scr-blue-100);
  color: var(--scr-blue);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.chip[aria-pressed="true"] { background: var(--scr-blue); color: var(--scr-white); }

/* Input — wit veld, haarlijn die blauw wordt bij focus. */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 14px; font-weight: var(--fw-semibold); color: var(--scr-ink); }
.field input {
  width: 100%;
  height: 56px;
  padding: 0 20px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--fw-regular);
  color: var(--scr-black);
  background: var(--scr-white);
  border: 1.5px solid var(--scr-border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.field input:focus { border-color: var(--scr-blue); box-shadow: 0 0 0 4px rgba(42, 161, 255, 0.12); }
.field.is-error input { border-color: var(--scr-error); box-shadow: none; }
.field__msg { font-size: 13px; color: var(--scr-error); }

/* Textarea — zelfde taal als Input, ruimere hoek. */
.textarea {
  position: relative;
  padding: 18px;
  background: var(--scr-white);
  border: 1.5px solid var(--scr-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.textarea:focus-within { border-color: var(--scr-blue); box-shadow: 0 0 0 4px rgba(42, 161, 255, 0.12); }
.textarea textarea {
  display: block;
  width: 100%;
  border: none;
  outline: none;
  resize: vertical;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--scr-black);
  background: transparent;
}

/* Select — eigen chevron in Script-blauw. */
.select { position: relative; display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.select select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  padding: 12px 44px 12px 18px;
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--scr-ink);
  background: var(--scr-white);
  border: 1.5px solid var(--scr-border);
  border-radius: var(--radius-sm);
  outline: none;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.select select:focus { border-color: var(--scr-blue); box-shadow: 0 0 0 4px rgba(42, 161, 255, 0.12); }
.select__chevron { position: absolute; right: 16px; color: var(--scr-blue); pointer-events: none; }

/* ============================================================
   INSTUREN
   ============================================================ */
.wordmark { height: 28px; width: auto; align-self: flex-start; }
.wordmark--sm { height: 24px; }
.page--narrow .wordmark { margin-bottom: 32px; }

.story-form { display: flex; flex-direction: column; gap: 32px; }
.intro { display: flex; flex-direction: column; gap: 12px; }
.fields { display: flex; flex-direction: column; gap: 20px; }

.prompt-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.prompt-row__label { font-size: 14px; color: var(--scr-grey-500); }

.story-field { display: flex; flex-direction: column; gap: 8px; }
.counter {
  display: flex;
  justify-content: flex-end;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.counter [data-tone="quiet"] { color: var(--scr-grey-500); }
.counter [data-tone="near"]  { color: var(--scr-grey-700); }
.counter [data-tone="full"]  { color: var(--scr-error); }

.roles { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; border: none; min-width: 0; }
.roles legend { padding: 0; margin-bottom: 10px; }

.submit-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
.submit-row__note { max-width: 320px; font-size: 13px; line-height: 1.5; color: var(--scr-grey-500); }

.sent { display: flex; flex-direction: column; gap: 20px; padding: 40px 0; animation: scrFade 0.3s ease-out; }
.sent__actions { display: flex; margin-top: 8px; }

/* ============================================================
   MODERATIE
   ============================================================ */
.mod-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 28px; }

.mod-notice {
  margin: -12px 0 28px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--scr-ink);
  background: var(--scr-pink-100);
  border-radius: var(--radius-sm);
}

.pin-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 400px;
  padding: 40px;
  background: var(--scr-white);
  border-radius: var(--radius-lg);
}

.mod-panel { display: flex; flex-direction: column; gap: 28px; }
.mod-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.mod-links { display: flex; align-items: center; font-size: 13px; font-weight: var(--fw-medium); }
.mod-links .scr-haak-sep { margin: 0 0.6em; }
.mod-empty { margin: 0; font-size: 16px; color: var(--scr-grey-500); }
.mod-list { display: flex; flex-direction: column; gap: 12px; }

.story-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 28px;
  background: var(--scr-white);
  border-radius: var(--radius-md);
}
.story-card__text { margin: 0; font-size: 18px; line-height: 1.6; text-wrap: pretty; white-space: pre-wrap; overflow-wrap: anywhere; }
.story-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.story-card__meta { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--scr-grey-500); }
.story-card__who { font-weight: var(--fw-semibold); color: var(--scr-grey-700); }
.story-card__actions { display: flex; gap: 8px; }

/* ============================================================
   BEAMER — 16:9 projectie; maten in vw zodat alles meeschaalt.
   ============================================================ */
.view--beamer { position: fixed; inset: 0; overflow: hidden; background: var(--scr-white); cursor: none; }
.beamer-stage { position: absolute; inset: 0; }

.slide { position: absolute; inset: 0; animation: scrFade 0.6s ease-out; }
.slide__body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 2.5vw; }
.slide__text {
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: pretty;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.slide__by { font-size: 1.4vw; font-weight: var(--fw-medium); }

/* Leeg: nog geen goedgekeurde verhalen. */
.slide--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 8vw;
  text-align: center;
  background: var(--scr-blue);
  color: var(--scr-white);
}
.slide--empty .wordmark { height: 4vw; margin: 0; }
.slide--empty .slide__title { font-size: 4.5vw; font-weight: var(--fw-bold); line-height: 1.1; color: var(--scr-pink); }
.slide--empty .slide__sub { font-size: 1.6vw; font-weight: var(--fw-light); }

/* A — blauw vlak, roze tekst, uitvergrote haak die uit het kader valt. */
.slide--a { background: var(--scr-blue); color: var(--scr-white); }
.slide--a .slide__haak { position: absolute; left: -12vw; top: -8vw; height: 72vw; width: auto; opacity: 0.18; pointer-events: none; }
.slide--a .slide__body { padding: 6vw 22vw 6vw 10vw; }
.slide--a .slide__text { font-weight: var(--fw-bold); color: var(--scr-pink); line-height: 1.2; }
.slide--a .slide__by { color: var(--scr-white); }

/* B — wit, groot aanhalingsteken, Script-zwarte tekst. */
.slide--b { background: var(--scr-white); }
.slide--b .slide__body { align-items: center; text-align: center; padding: 6vw 14vw 8vw; }
.slide__quote { height: 6vw; font-size: 12vw; line-height: 0.6; font-weight: var(--fw-extrabold); color: var(--scr-blue); }
.slide--b .slide__text { font-weight: var(--fw-semibold); color: var(--scr-black); }
.slide--b .slide__by { display: flex; align-items: center; gap: 1vw; color: var(--scr-blue); }
.slide--b .slide__by img { height: 1.2vw; width: auto; }

/* C — grijs vlak, roze kaart met rol-tag. */
.slide--c { background: var(--scr-grey-100); }
.slide--c .slide__body { align-items: center; padding: 6vw 10vw 8vw; }
.slide__card {
  display: flex;
  flex-direction: column;
  gap: 2.5vw;
  width: 100%;
  max-width: 72vw;
  padding: 5vw 6vw;
  background: var(--scr-pink);
  border-radius: 3vw;
}
.slide__tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  height: 2.4vw;
  padding: 0 1.4vw;
  border-radius: var(--radius-pill);
  background: var(--scr-blue);
  color: var(--scr-white);
  font-size: 1vw;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.slide--c .slide__text { font-weight: var(--fw-semibold); color: var(--scr-black); }
.slide--c .slide__by { color: var(--scr-black); }

/* QR + oproep, rechtsonder. */
.qr-box {
  position: absolute;
  right: 3vw;
  bottom: 3vw;
  display: flex;
  align-items: center;
  gap: 1.4vw;
  padding: 1vw 1.6vw 1vw 1vw;
  background: var(--scr-white);
  border-radius: 1.2vw;
  box-shadow: var(--shadow-md);
}
.qr-box__img { width: 7vw; height: 7vw; }
.qr-box__text { display: flex; flex-direction: column; gap: 0.4vw; max-width: 14vw; }
.qr-box__title { font-size: 1.25vw; font-weight: var(--fw-bold); line-height: 1.2; color: var(--scr-black); text-wrap: pretty; }
.qr-box__sub { font-size: 0.85vw; color: var(--scr-grey-500); }

.beamer-logo { position: absolute; left: 3vw; bottom: 3.4vw; height: 2vw; width: auto; }

/* ---- Klein scherm ---- */
@media (max-width: 480px) {
  .page { padding: 28px 20px 80px; }
  .pin-card { padding: 28px; }
  .story-card { padding: 20px; }
  .story-card__actions { width: 100%; }
  .story-card__actions .btn { flex: 1; }
}