/* Format Central.
 *
 * The design is the studio mockup Bas chose on 2026-09-08, which MP Lab has
 * clicked through. Tokens and component shapes are lifted from
 * `mockup-studio/index.html` unchanged, because the point of approving a
 * mockup is that the real thing looks like it.
 *
 * Everything here is scoped to the app root the same way the mockup scoped to
 * #fc-studio, so a screenshot comparison is a like-for-like one.
 */

@import url('../fonts/fonts.css');

:root {
  /* De acht die alles dragen. De ondergrond is dieper dan hij was, zodat een
   * witte kaart erop te zien is zonder schaduw. */
  --fc-bg: #dfe7f1;
  --fc-paper: #fff;
  --fc-ink: #12141a;
  --fc-muted: #5c6069;
  --fc-line: #d3dbe5;
  --fc-blue: #00579e;
  --fc-pale: #eef4fb;
  /* De titelbalk van een vouwkaart, en diezelfde balk onder de muis. */
  --fc-kop-hover: #dde9f6;
  --fc-yellow: #fff6d1;
  --fc-radius: 20px;

  /* Afgeleid, niet verzonnen. */
  --fc-line-soft: #e7ecf2;
  --fc-shadow: none;
  --fc-shadow-lift: 0 10px 28px #0a17280f;
  --fc-green: #0b6e4f;
  --fc-amber: #6b4708;
  --fc-red: #b0392c;

  /* De rest, elk met een tegenhanger in het donker. */
  --fc-accent: #3399ff;
  --fc-focus: var(--fc-accent);
  --fc-line-strong: #bcc7d4;
  --fc-on-blue: #fff;
  /* De donkere band onder een titel op een beeld; in beide thema's gelijk. */
  --fc-scrim: linear-gradient(to top, rgb(0 0 0 / 62%), rgb(0 0 0 / 0%));
  --fc-blue-deep: #003366;
  --fc-blue-ink: #003366;
  --fc-avatar: #dbe7f5;
  --fc-cover-bg: #d7dad5;
  --fc-amber-ink: #6b4708;
  --fc-amber-line: #f0dfa0;
  --fc-amber-text: #6b4708;
  --fc-red-soft: #ffeae6;
  --fc-red-line: #f3c9c3;
  --fc-green-soft: #e6f7f0;
  --fc-green-line: #b9e6d4;
  /* Het vlak waarin je typt, en de rand van een getint blad. Deze twee stonden
   * als kale hex in de vormregels van `app-tokens.css`; SCHERMONTWERP.md zegt
   * dat een nieuwe waarde eerst een token wordt, dus hier staan ze. */
  --fc-veld: #f4f7fa;
  /* Deze twee gaan met OPZET niet mee met het thema: ze staan op een witte
   * schijf en op een foto, en die zijn in het donker even wit. */
  --fc-op-wit: #12141a;
  /* Het doek waarop een dia wordt afgespeeld, en de tekst erop. Donker in
   * allebei de thema's: een presentatie staat op zwart, niet op papier. */
  --fc-doek: #0b0d11;
  --fc-op-doek: #e9ebee;
  /* De pijlen en het kruisje op het doek: klein, en stil tot je ze aanraakt. */
  --fc-doekknop: 30px;
  --fc-doekknop-vlak: #0b0d1199;
  --fc-doekknop-rand: #e9ebee40;
  --fc-blue-glow: #00579e4d;
  --fc-pale-line: #cddff2;

  /* NIEUW. Het verloop staat alleen op de knop die de stap vooruit zet, op de
   * voortgangslijn en op het merkvierkantje. Nooit in een kaart. */
  /* De twee stops apart, want de omslag van een format gebruikt ze ook. Ze
   * zijn in het donker HETZELFDE als in het licht, met opzet: op die omslag
   * staat witte tekst die niet meewisselt, en met een verloop dat in het
   * donker oplicht was die tekst niet meer te lezen. */
  --fc-verloop-van: #003366;
  --fc-verloop-mid: #0a4a86;
  --fc-verloop-naar: var(--fc-accent);
  --fc-verloop: linear-gradient(90deg, var(--fc-verloop-van), var(--fc-verloop-naar));
  --fc-radius-pil: 999px;
  /* Basis en Show (BASIS-SHOW-PLAN §2.1): de rand om het werkvlak in de kleur van de kant waar je bent, en de breedte van het paneel van
   * één dia. Geen kleur: die komen van --fc-green (Basis) en --fc-blue-deep (Show). */
  --fc-kant-rand: 3px;
  --fc-kant-ruimte: 14px;
  --fc-kant-radius: 12px;
  --fc-speler-radius: var(--fc-kant-radius);
  --fc-kijker-gap: 12px;
  --fc-kijker-breedte: 1100px;
  --fc-leesbreedte: 64ch;
  --fc-kijker-padding: 24px 16px;
  --fc-speler-hoogte: 80dvh;
  --fc-eigenspeler-hoogte: 60dvh;
  --fc-bs-paneel: 420px;
  /* De smalle zijbalk (alleen pictogrammen): de kaart zelf, en het gezicht onderin. Geen kleur, dus geen tegenhanger in het
   * donker nodig. 72 is de 46 van een pictogramvak plus de 12 aan weerszijden die de balk al had, plus zijn rand. */
  --fc-rail-smal: 72px;
  --fc-rail-gezicht: 40px;

  /* De letter van de scriptpagina van de trailer (TRAILER-SCRIPTPAGINA-PLAN §9.1): een script leest in Courier. Courier Prime
   * staat in web/fonts; Courier New is de terugval. Gaat niet mee met het thema. */
  --fc-script-letter: 'Courier Prime', 'Courier New', Courier, monospace;

  color-scheme: light;
}

/* Dark: the same eight, turned over. Chosen by the toggle top right and kept
 * in this browser; nothing about it travels. */
:root[data-theme='dark'] {
  --fc-bg: #0f1216;
  --fc-paper: #171b21;
  --fc-ink: #e9ebee;
  --fc-muted: #a0a6ad;
  --fc-line: #272c34;
  --fc-blue: #6fb3f5;
  --fc-pale: #142334;
  --fc-kop-hover: #1b2d43;
  --fc-yellow: #3a3212;
  --fc-radius: 20px;

  --fc-line-soft: #1f242b;
  --fc-shadow: none;
  --fc-shadow-lift: 0 10px 28px #00000055;
  --fc-green: #4fc99a;
  --fc-amber: #e0b34a;
  --fc-red: #ff8f82;

  --fc-accent: #3399ff;
  --fc-focus: var(--fc-accent);
  --fc-line-strong: #3a4149;
  --fc-on-blue: #fff;
  --fc-blue-deep: #8ec5ff;
  --fc-blue-ink: #b6d9ff;
  --fc-avatar: #22324a;
  --fc-cover-bg: #222831;
  --fc-amber-ink: #f0d27a;
  --fc-amber-line: #4d4420;
  --fc-amber-text: #f0d27a;
  --fc-red-soft: #3a1d1b;
  --fc-red-line: #5a2c29;
  --fc-green-soft: #12301f;
  --fc-green-line: #234a33;
  --fc-veld: #10141a;
  /* Deze twee gaan met OPZET niet mee met het thema: ze staan op een witte
   * schijf en op een foto, en die zijn in het donker even wit. */
  --fc-op-wit: #12141a;
  --fc-blue-glow: #00579e4d;
  --fc-pale-line: #24405e;

  /* De twee stops apart, want de omslag van een format gebruikt ze ook. Ze
   * zijn in het donker HETZELFDE als in het licht, met opzet: op die omslag
   * staat witte tekst die niet meewisselt, en met een verloop dat in het
   * donker oplicht was die tekst niet meer te lezen. */
  --fc-verloop-van: #003366;
  --fc-verloop-mid: #0a4a86;
  --fc-verloop-naar: var(--fc-accent);
  --fc-verloop: linear-gradient(90deg, var(--fc-verloop-van), var(--fc-verloop-naar));
  --fc-radius-pil: 999px;

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: Manrope, -apple-system, system-ui, 'Segoe UI', sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--fc-ink);
  background: var(--fc-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1,
h2,
h3 {
  font-family: 'Bricolage Grotesque', Manrope, Arial, sans-serif;
  letter-spacing: -0.035em;
  margin: 0;
}
h1 {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.08;
}
h2 {
  font-size: 27px;
  line-height: 1.15;
  font-weight: 600;
}
h3 {
  font-size: 19px;
  line-height: 1.3;
  font-weight: 600;
}
p {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  border: 0;
  background: none;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* GEEN EIGEN RADIUS HIER. Deze regel zette `border-radius: 4px` op alles wat
 * focus kreeg, en een outline volgt de radius van het element - dus sprong
 * elke knop bij het tabben naar bijna vierkant terug. Met de ronde knoppen van
 * 2026-09-20 is dat niet meer subtiel: een pil van 999px werd een blokje. De
 * ring volgt nu de vorm die het element zelf heeft. */
:is(button, input, textarea, select, a):focus-visible {
  outline: 3px solid var(--fc-focus);
  outline-offset: 3px;
}
[hidden] {
  display: none !important;
}

.fc-muted {
  color: var(--fc-muted);
}
.fc-small {
  font-size: 11px;
  line-height: 1.6;
}
.fc-leesmaat {
  max-width: var(--fc-leesbreedte);
}
.fc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.fc-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.fc-gap {
  display: grid;
  gap: 18px;
}

/* --- splash ------------------------------------------------------------
 * Not decoration. The local server takes a few seconds to start, and a
 * branded screen during that wait is the difference between "it is starting"
 * and "nothing happened, click it again". It holds about 1.5 seconds and
 * leaves by itself; there is no way to get stuck on it.
 *
 * The choreography, all transform and opacity so it never reflows: a soft
 * glow breathes behind the mark, the mark settles from slightly large, the
 * name arrives letter by letter, a hairline fills for the length of the
 * hold, and the whole thing lifts away when the app is ready.
 */
#splash {
  position: fixed;
  inset: 0;
  background: var(--fc-bg);
  display: grid;
  place-items: center;
  z-index: 100;
  overflow: clip;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
#splash::before {
  content: '';
  position: absolute;
  width: 62vmax;
  height: 62vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--fc-pale) 0%, transparent 70%);
  animation: fc-glow 2.6s cubic-bezier(0.4, 0, 0.2, 1) both;
  pointer-events: none;
}
#splash[data-leaving='true'] {
  opacity: 0;
  pointer-events: none;
}
#splash[data-leaving='true'] .fc-splash-inner {
  transform: translateY(-8px) scale(1.02);
}
.fc-splash-inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 14px;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* MP Lab's own mark, black line art on the light page. Sized by width; the
 * file is 713 px wide, so it stays sharp on a retina screen at this size. */
.fc-splash-mark {
  width: 132px;
  max-width: 56vw;
  height: auto;
  animation: fc-settle 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.fc-splash-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.035em;
  display: flex;
}
.fc-splash-name > span {
  display: inline-block;
  animation: fc-letter 0.55s cubic-bezier(0.2, 0.9, 0.3, 1) both;
  animation-delay: calc(0.28s + var(--i) * 0.035s);
}
.fc-splash-space {
  width: 0.28em;
}
/* The hairline fills for the length of the hold, so the wait reads as a
 * wait and not as a hang. Scaled, not resized: no layout on the way. */
.fc-splash-line {
  width: 132px;
  height: 2px;
  border-radius: 1px;
  background: var(--fc-ink);
  transform-origin: left;
  animation: fc-fill 1.3s cubic-bezier(0.4, 0, 0.2, 1) 0.25s both;
}
#splash-note {
  animation: fc-rise 0.5s ease 0.75s both;
}
@keyframes fc-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fc-settle {
  from {
    opacity: 0;
    transform: scale(1.12);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fc-letter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fc-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes fc-glow {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  #splash,
  #splash::before,
  .fc-splash-inner,
  .fc-splash-mark,
  .fc-splash-name > span,
  .fc-splash-line,
  #splash-note {
    animation: none;
    transition: opacity 0.15s ease;
    transform: none;
  }
}

/* --- sign in ----------------------------------------------------------- */
.fc-gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.fc-gate-card {
  background: var(--fc-paper);
  border-radius: var(--fc-radius);
  box-shadow: var(--fc-shadow);
  padding: 30px;
  width: min(400px, 100%);
  display: grid;
  gap: 16px;
}
/* A sign-in form is four lines; the pre-flight checks are four findings with a
   repair under each, and they are unreadable at 400px. */
.fc-gate-card[data-breed='true'] {
  width: min(620px, 100%);
}
.fc-field {
  display: grid;
  gap: 6px;
}
.fc-field > label {
  font-size: 11px;
  font-weight: 700;
  color: var(--fc-muted);
  /* Een label draagt vaak twee dingen: de naam links en een teller of een
   * telling rechts. Zonder dit staan die twee tegen elkaar aan geplakt
   * ("Beeld1 gemaakt"), want een label is van zichzelf inline. */
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
/* Een invulveld is een vlak MET een rand, niet alleen een rand: op een witte
 * kaart is anders niet te zien waar je kunt typen. `--fc-veld` heeft zijn
 * eigen waarde in het donker, dus er staat hier geen tweede regel voor. */
.fc-input {
  border: 1px solid var(--fc-line);
  border-radius: 12px;
  padding: 10px 12px;
  min-height: 40px;
  background: var(--fc-veld);
  width: 100%;
}
.fc-input:hover {
  border-color: var(--fc-line-strong);
}
/* Ruimte voor het pijltje: een lange keuze ("Standaard (gesplitst: kop
 * boven, subregel onder)") liep eronder door. Nu breekt hij af met puntjes
 * vóór het pijltje. */
select.fc-input {
  padding-right: 34px;
  text-overflow: ellipsis;
}
textarea.fc-input {
  min-height: 160px;
  resize: vertical;
  line-height: 1.6;
}

/* --- shell -------------------------------------------------------------- */
/* DE ZIJBALK IS EEN EIGEN KAART GEWORDEN (mockup 6a, 2026-09-21), dus de
 * kolom draagt nu ook de marge eromheen. De mockup tekent hem op 276 plus 22
 * aan weerszijden: 320, waar hier 164 stond.
 *
 * MEEBEWEGEND EN NIET VAST, want dat verschil gaat van de kaarten af. Gemeten
 * op Overzicht: met een vaste 320 werd een formatkaart op 1440 nog 345px
 * (vanaf 397), maar op 1280 nog maar 292 - en dat is te smal voor een kaart
 * met zes statusvakjes erin. Met `clamp` houdt hij de maat van de mockup op
 * een breed scherm en geeft hij ruimte terug zodra het scherm smaller is. De
 * kaart erin heeft geen eigen breedte en vult de kolom. */
.fc-shell {
  display: grid;
  grid-template-columns: clamp(250px, 22vw, 320px) minmax(0, 1fr);
  min-height: 100vh;
}
/* Window-tall and sticky, so the signed-in person stays bottom-left instead of
 * sitting at the bottom of a long Overzicht. */
.fc-side {
  background: var(--fc-paper);
  border: 1px solid var(--fc-line);
  border-radius: 24px;
  margin: 22px;
  padding: 18px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  position: sticky;
  top: 22px;
  height: calc(100vh - 44px);
  overflow-y: auto;
}
.fc-brand {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 0 4px;
  text-align: left;
  color: var(--fc-ink);
  text-decoration: none;
}
/* Het merk en, rechts ervan, de knop die de balk smal of breed zet. */
.fc-railkop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
/* Stil naast het merk, zoals de andere knoppen in de balk: geen rand, alleen
 * een vlak onder de muis. 28 en niet 30: het merk is 29,9 hoog, en een
 * hogere knop duwde de hele balk eronder een tiende pixel omlaag. */
.fc-railknop {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--fc-muted);
  display: grid;
  place-items: center;
  padding: 0;
  flex: none;
  cursor: pointer;
  transition:
    background 0.14s ease,
    color 0.14s ease;
}
.fc-railknop:hover {
  background: var(--fc-bg);
  color: var(--fc-ink);
}
.fc-railknop:focus-visible {
  outline: 2px solid var(--fc-blue);
  outline-offset: 2px;
}
.fc-railknop:active {
  background: var(--fc-pale);
  transform: translateY(1px);
}
.fc-railknop:disabled {
  opacity: 0.45;
  cursor: default;
  background: none;
  transform: none;
}
/* De pictogrammen en de korte vorm van de chip bestaan alleen in de smalle
 * balk; breed staat er niets anders dan er altijd stond. */
.fc-railicoon,
.fc-railkort {
  display: none;
  flex: none;
}
/* MP Lab's own mark, where the "FC" monogram used to be. */
.fc-mark {
  width: 38px;
  height: auto;
  flex: none;
}
.fc-monogram {
  width: 33px;
  height: 35px;
  background: var(--fc-blue);
  color: var(--fc-on-blue);
  border-radius: 8px 8px 8px 2px;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -2px;
  padding-right: 2px;
  flex: none;
}
.fc-brandname {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  white-space: pre-line;
}
.fc-nav {
  display: grid;
  gap: 5px;
}
.fc-navbutton {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border-radius: 14px;
  text-align: left;
  font-size: 12.5px;
  font-weight: 600;
  min-height: 39px;
  color: inherit;
  text-decoration: none;
  transition: background 0.12s ease;
}
.fc-navbutton:hover {
  background: var(--fc-bg);
}
.fc-navbutton:active {
  transform: translateY(0.5px);
}
.fc-navbutton[aria-current='page'] {
  color: var(--fc-blue);
  background: var(--fc-pale);
}
/* Een kopje boven een groep in de balk: mono-achtig klein en uit elkaar
 * getrokken, zodat het als label leest en niet als een item dat je kunt
 * aanklikken. */
.fc-sidelabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fc-muted);
  padding: 0 11px;
  margin-bottom: 7px;
}
.fc-projectnav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  text-align: left;
  font-size: 12.5px;
  border-radius: 14px;
  width: 100%;
  color: inherit;
  text-decoration: none;
}
.fc-projectnav:hover {
  background: var(--fc-bg);
}
.fc-projectnav[aria-current='page'] {
  background: var(--fc-pale);
  color: var(--fc-blue);
}
.fc-square {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--fc-blue);
  flex: none;
}
/* A format's own mark in the rail: its cover, or its colour as a dot. */
/* Een vierkantje met ronde hoeken, niet een stip (mockup 6a): op 20px is er
 * plek voor de kleur van het format, en het rijmt op de omslag van diezelfde
 * kaart in Overzicht. */
.fc-formaticon {
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background-size: cover;
  background-position: center;
  background-color: var(--fc-line);
  flex: none;
}
/* Zonder omslag: hetzelfde verloop als de kaart in Overzicht, uit de eigen
 * kleur van het format gemengd met `--fc-ink`. Geen kleur erbij. */
.fc-formaticon[data-dot='true'] {
  background-image: linear-gradient(
    150deg,
    color-mix(in srgb, var(--kaartkleur, var(--fc-line)) 42%, var(--fc-ink)),
    color-mix(in srgb, var(--kaartkleur, var(--fc-line)) 78%, var(--fc-ink))
  );
}
/* De naam en daaronder waar je zit en welke versie draait. `min-width: 0` en
 * de afkapping, want een machinenaam kan langer zijn dan de balk breed is. */
.fc-usertekst {
  display: grid;
  gap: 1px;
  min-width: 0;
  text-align: left;
}
.fc-usertekst > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fc-formatlijst {
  display: grid;
}
/* The twelve colour swatches on a format's page. */
.fc-kleuren {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.fc-kleur {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--fc-paper);
  box-shadow: 0 0 0 1px var(--fc-line);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease;
}
.fc-kleur:hover {
  transform: scale(1.15);
}
.fc-kleur:focus-visible {
  outline: 2px solid var(--fc-blue);
  outline-offset: 2px;
}
.fc-kleur[aria-pressed='true'] {
  box-shadow: 0 0 0 2px var(--fc-ink);
}
.fc-kleur[data-bezet='true'] {
  opacity: 0.45;
}
/* Dragging: the thing in hand goes pale, the line says where it lands. */
.fc-dragging {
  opacity: 0.35;
}
/* Bas, 2026-09-19: "zorg dat het heel duidelijk is waar vakken landen als je
 * sleept." A 3px line with a 2px halo is clear on the rail, where the things
 * being dragged are cards with space around them; between text boxes that sit
 * 6px apart it was a hairline in a stack of hairlines. Wider halo, rounded
 * ends, and it reads as a landing place rather than as another border. */
.fc-dropline {
  position: fixed;
  z-index: 90;
  background: var(--fc-blue);
  border-radius: 999px;
  pointer-events: none;
  box-shadow:
    0 0 0 4px var(--fc-pale),
    0 1px 4px var(--fc-blue-glow);
}
/* One left edge for everything in the bottom of the rail.
 *
 * There were three, measured rather than eyeballed at 1440px: the plain lines
 * (the machine name, the version) started at the rail's own edge, 14px; the
 * two wishlist rows 8px further in, because a row with a hover background
 * needs padding to sit in; and the chip 10px in, because a pill carries a
 * border and padding of its own.
 *
 * The chip's inset is the one that cannot move - `.fc-chip` is also on the
 * format cards and on a session's state - so it sets the edge and everything
 * else is lined up to it. One number, inherited by the rules below. If
 * `.fc-chip`'s own padding ever changes, this is the number that follows it.
 */
.fc-sidebottom {
  margin-top: auto;
  padding-top: 40px;
  --fc-rail-inset: 10px; /* .fc-chip: 9px of padding over a 1px border */
}
.fc-sidebottom > .fc-small {
  padding-left: var(--fc-rail-inset);
}

/* --- the signed-in person, and the account menu -------------------------
 * Bottom-left in the rail, and the avatar in the top bar. Both open the same
 * menu, which is where Instellingen lives.
 */
/* In the rail the name and the role sit under the face, not beside it: the
 * rail is 164px wide, and a column reads calmer there than a cramped row. */
/* Een KOLOM: het gezicht, en de naam, rol en versie eronder (Bas,
 * 2026-09-23). Naast een foto van 90px bleef er te weinig breedte over en
 * werd de onderregel afgekapt. */
.fc-usertrigger {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 9px 8px;
  margin-top: 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: none;
  text-align: center;
  color: var(--fc-ink);
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.fc-usertrigger > .fc-small {
  min-width: 0;
  overflow-wrap: anywhere;
}
.fc-usertrigger b {
  display: block;
  font-size: 11px;
  line-height: 1.3;
}
.fc-usertrigger .fc-muted {
  display: block;
  font-size: 10px;
}
.fc-usertrigger:hover {
  background: var(--fc-bg);
  border-color: var(--fc-line);
}
.fc-usertrigger:focus-visible {
  outline: 2px solid var(--fc-blue);
  outline-offset: 2px;
}
.fc-usertrigger:active {
  background: var(--fc-pale);
}
.fc-usertrigger[aria-expanded='true'] {
  background: var(--fc-bg);
  border-color: var(--fc-line);
}
/* The account menu's way in on a narrow window.
 *
 * It is in the top bar at every width and shown only under 760px, because
 * that is where `.fc-sidebottom` is hidden and takes Instellingen, Kosten, the
 * wishlist and Afmelden with it. Above that the rail carries the same trigger
 * with a name beside it, and two of them was the duplication the light/dark
 * toggle replaced.
 */
.fc-usertrigger-bare {
  flex-direction: row;
  width: auto;
  margin-top: 0;
  padding: 0;
  border-radius: 50%;
  display: none;
}
.fc-usertrigger-bare:hover,
.fc-usertrigger-bare[aria-expanded='true'] {
  background: none;
  border-color: transparent;
}
.fc-usertrigger-bare:hover .fc-user {
  border-color: var(--fc-pale);
}

.fc-usermenu {
  position: fixed;
  z-index: 60;
  width: 244px;
  max-width: calc(100vw - 24px);
  background: var(--fc-paper);
  border: 1px solid var(--fc-line);
  border-radius: 11px;
  box-shadow: var(--fc-shadow-lift);
  overflow: hidden;
}
.fc-usermenu-head {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 13px 14px;
  border-bottom: 1px solid var(--fc-line);
}
/* The text column only: the avatar next to it is a span too, and a blanket
 * span rule here takes its centering away. */
.fc-usermenu-head > div > b {
  display: block;
  font-size: 12px;
}
.fc-usermenu-head > div > span {
  display: block;
  font-size: 10px;
  color: var(--fc-muted);
  margin-top: 2px;
}
.fc-usermenu-item {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  font-weight: 600;
  font-size: 12px;
  color: var(--fc-ink);
  cursor: pointer;
}
.fc-usermenu-item + .fc-usermenu-item {
  border-top: 1px solid var(--fc-line-soft);
}
.fc-usermenu-item:hover {
  background: var(--fc-bg);
}
.fc-usermenu-item:focus-visible {
  outline: 2px solid var(--fc-blue);
  outline-offset: -2px;
}
.fc-usermenu-item:active {
  background: var(--fc-pale);
}
/* Licht/donker in de balk, boven het gezicht en op de rand van de rest. */
.fc-railthema {
  padding-left: var(--fc-rail-inset);
}

/* --- de smalle balk ------------------------------------------------------
 * Bas, 2026-10-20, op de balk zelf: *"Give me a way to collapse this so it
 * becomes smaller in width and it only shows the icons. The avatar can also
 * be reduced. Hovering over an icon will show its description."*
 *
 * De knop naast het merk zet `data-rail="smal"` op <html> en bewaart het in
 * deze browser (localStorage 'fc-rail'); theme.js zet het terug vóór de eerste
 * verf. Op <html> en niet op de balk, want de balk wordt bij elke route opnieuw
 * getekend en <html> niet. Alleen boven 760px: daaronder is de balk een rij
 * bovenaan en blijft hij zoals hij was.
 *
 * Wat verdwijnt is de tekst, niet het element: dezelfde links en knoppen, met
 * de naam in `aria-label` en in de tip (`.fc-railtip`) ernaast. De tekst blijft
 * voor een schermlezer staan, zoals `.fc-verborgen`. De wachtrij wordt alleen
 * het aantal in hetzelfde gele pilletje: wat er wacht is een waarschuwing en
 * mag niet verdwijnen omdat de balk smaller is.
 */
@media not all and (max-width: 760px) {
  :root[data-rail='smal'] .fc-shell {
    /* de kaart plus de 22 marge aan weerszijden die .fc-side al heeft */
    grid-template-columns: calc(var(--fc-rail-smal) + 44px) minmax(0, 1fr);
  }
  :root[data-rail='smal'] .fc-railtekst {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  :root[data-rail='smal'] .fc-brandname,
  :root[data-rail='smal'] .fc-sidelabel,
  :root[data-rail='smal'] .fc-side .fc-kbd,
  :root[data-rail='smal'] .fc-usertekst {
    display: none;
  }
  :root[data-rail='smal'] .fc-railicoon {
    display: block;
  }
  :root[data-rail='smal'] .fc-railkort {
    display: inline;
  }
  /* Het merk boven, de knop eronder: naast elkaar passen ze niet in 46px. */
  :root[data-rail='smal'] .fc-railkop {
    flex-direction: column;
    gap: 10px;
  }
  :root[data-rail='smal'] .fc-brand {
    padding: 0;
  }
  /* Elk vak even breed als de balk, het pictogram in het midden. */
  :root[data-rail='smal'] .fc-navbutton,
  :root[data-rail='smal'] .fc-projectnav {
    justify-content: center;
    padding: 10px 0;
  }
  :root[data-rail='smal'] .fc-wenshint,
  :root[data-rail='smal'] .fc-wenslink {
    display: flex;
    justify-content: center;
    padding: 8px 0;
  }
  :root[data-rail='smal'] .fc-sidebottom > .fc-chip {
    justify-content: center;
    padding: 3px 4px;
    min-width: 0;
  }
  :root[data-rail='smal'] .fc-chip .fc-railicoon {
    width: 12px;
    height: 12px;
  }
  :root[data-rail='smal'] .fc-railthema {
    display: flex;
    justify-content: center;
    padding-left: 0;
  }
  /* 40 + 2 x 2 + de rand = 46, de breedte van de balk: met 3 werd het spoor
   * van de onderkant 48 en schoof alles erin twee pixel uit het midden. */
  :root[data-rail='smal'] .fc-usertrigger {
    align-items: center;
    padding: 2px;
  }
  :root[data-rail='smal'] .fc-usertrigger .fc-user[data-foto='true'] {
    width: var(--fc-rail-gezicht);
    height: var(--fc-rail-gezicht);
  }
}
/* De naam naast een pictogram in de smalle balk, onder de muis of de focus.
 * Eén element buiten #app (zoals het accountmenu), op zijn plek gezet met
 * getBoundingClientRect: een ::after in de balk werd afgesneden, want
 * .fc-side scrolt (overflow-y) en knipt alles wat over zijn rand gaat. */
.fc-railtip {
  position: fixed;
  /* de laag van het accountmenu; de tip staat later in de pagina, dus erboven */
  z-index: 60;
  padding: 6px 10px;
  border: 1px solid var(--fc-line);
  border-radius: 8px;
  background: var(--fc-paper);
  color: var(--fc-ink);
  box-shadow: var(--fc-shadow-lift);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  pointer-events: none;
}
/* Op een breed scherm is er geen topbalk meer (Bas, 2026-09-23: "remove white
 * bar"): de balk links draagt de gebruiker en licht/donker. Onder 760px komt
 * hij terug, want daar is de onderkant van de balk weg en is dit de enige weg
 * naar het accountmenu. */
.fc-topbar {
  display: none;
  padding: 16px 26px;
  background: var(--fc-paper);
  border-bottom: 1px solid var(--fc-line);
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  min-height: 72px;
}
.fc-breadcrumb {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--fc-muted);
  min-width: 0;
}
.fc-user {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--fc-avatar);
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
  border: 2px solid var(--fc-paper);
  flex: none;
}
.fc-content {
  padding: 27px 26px 36px;
  min-width: 0;
}
.fc-heading {
  margin-bottom: 24px;
}
/* The format's cover beside its heading. */
.fc-kopmetbeeld {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.fc-kopbeeld {
  width: 336px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  flex: none;
  box-shadow: var(--fc-shadow);
  position: relative;
}
/* De kop van een format: de omslag met de titel linksonder eroverheen, en
 * rechts de stand. De titel staat op een donkere verloopband, zodat hij op elk
 * beeld leesbaar is. */
.fc-formatkop {
  align-items: flex-end;
  gap: 16px;
}
.fc-kopoverlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 14px 12px;
  border-radius: 0 0 8px 8px;
  background: var(--fc-scrim);
  color: var(--fc-on-blue);
  min-width: 0;
}
.fc-kopoverlay h2 {
  color: var(--fc-on-blue);
}
.fc-kopstand {
  display: grid;
  justify-items: end;
  gap: 8px;
  text-align: right;
}
/* MP Lab's mark is black line art; on the dark page it turns white. */
:root[data-theme='dark'] .fc-mark,
:root[data-theme='dark'] .fc-splash-mark {
  filter: invert(1);
}
/* One supplier in the settings screen: who it is, its key, its model. */
.fc-leverancier {
  display: grid;
  gap: 8px;
  padding: 14px 0;
  border-top: 1px solid var(--fc-line-soft);
}
.fc-leverancier:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.fc-leverancier label {
  cursor: pointer;
}
.fc-leverancier input[type='radio'] {
  accent-color: var(--fc-blue);
  width: 16px;
  height: 16px;
  flex: none;
  cursor: pointer;
}
/* The light/dark switch, top right. */
/* Het potlood naast de titel van een format: dezelfde ronde knop, kleiner. */
.fc-titelvak {
  gap: 8px;
}
.fc-titelvak h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}
.fc-titelknop {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--fc-line);
  background: var(--fc-paper);
  color: var(--fc-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.fc-titelknop:hover {
  background: var(--fc-bg);
  color: var(--fc-ink);
}
.fc-titelknop:active {
  background: var(--fc-pale);
}
.fc-titelknop:focus-visible {
  outline: 2px solid var(--fc-blue);
  outline-offset: 2px;
}
/* Het veld heeft de maat van de titel die het vervangt, zodat niets verspringt. */
.fc-titelveld {
  font: inherit;
  font-family: 'Bricolage Grotesque', Manrope, Arial, sans-serif;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--fc-ink);
  background: var(--fc-paper);
  border: 1px solid var(--fc-line-strong);
  border-radius: 10px;
  padding: 2px 10px;
  width: min(100%, 36ch);
  min-width: 0;
}
.fc-titelveld:focus-visible {
  outline: 2px solid var(--fc-blue);
  outline-offset: 1px;
}
.fc-themetoggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--fc-line);
  background: var(--fc-paper);
  color: var(--fc-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition:
    transform 0.15s ease,
    background 0.15s ease;
}
.fc-themetoggle:hover {
  background: var(--fc-bg);
}
.fc-themetoggle:active {
  transform: translateY(1px);
}
.fc-themetoggle:focus-visible {
  outline: 2px solid var(--fc-blue);
  outline-offset: 2px;
}
/* The icons on the cover: change top right, download bottom right. */
.fc-kopknop {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: rgb(255 255 255 / 92%);
  color: var(--fc-op-wit); /* op zijn eigen witte schijf, in beide themas */
  box-shadow: 0 1px 6px rgb(0 0 0 / 25%);
  transition:
    transform 0.15s ease,
    background 0.15s ease;
}
.fc-kopknop:hover {
  background: var(--fc-paper);
  transform: translateY(-1px);
}
.fc-kopknop:active {
  transform: translateY(0);
}
.fc-kopknop:focus-visible {
  outline: 2px solid var(--fc-blue);
  outline-offset: 2px;
}
.fc-heading p {
  color: var(--fc-muted);
  margin-top: 9px;
  max-width: 54ch;
}
.fc-overline {
  color: var(--fc-muted);
  font-size: 11px;
  margin-bottom: 10px;
}
/* The overline that is not an eyebrow but the heading itself.
 *
 * Everywhere else a quiet grey label sits above a real heading. On Sessies
 * there is nothing under it, so the 11px grey read as a caption for the
 * paragraph below instead of as the title of the screen. */
.fc-overline[data-kop] {
  color: var(--fc-ink);
  font-size: 14px;
  font-weight: 700;
}
.fc-sectionhead {
  margin: 28px 0 15px;
}

/* --- buttons ------------------------------------------------------------
 * Eight states on every interactive element: default, hover, focus-visible,
 * active, disabled, loading, error, success.
 */
/* A source label that opens what is behind it: the proposal a section came
   from. A link rather than a button, because it goes somewhere rather than
   doing something. */
.fc-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--fc-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.fc-link:hover,
.fc-link:focus-visible {
  color: var(--fc-ink);
}

.fc-link:focus-visible {
  outline: 2px solid var(--fc-blue);
  outline-offset: 2px;
}

.fc-button {
  text-decoration: none; /* a download link wears the same coat as a button */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--fc-line);
  background: var(--fc-paper);
  /* Rond, en iets ruimer (Bas, 2026-09-20). De pictogramknoppen hieronder
   * zetten hun eigen maat en hun eigen radius terug: die moesten juist
   * VIERKANT worden, en een pilvorm op 34 bij 34 is een rondje. */
  border-radius: var(--fc-radius-pil);
  padding: 12px 18px;
  font-weight: 700;
  font-size: 12px;
  min-height: 38px;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    transform 0.08s ease;
}
.fc-button:hover:not(:disabled) {
  background: var(--fc-bg);
  border-color: var(--fc-line-strong);
}
.fc-button:active:not(:disabled) {
  transform: translateY(1px);
}
/* De knop die de stap vooruit zet draagt het verloop. Nergens anders: niet in
 * een kaart, niet op een rij. */
.fc-button[data-primary] {
  background: var(--fc-verloop);
  border-color: transparent;
  color: var(--fc-on-blue);
}
.fc-button[data-primary]:hover:not(:disabled) {
  /* Een verloop kan niet naar een andere kleur overvloeien, dus wordt hij
   * lichter in plaats van blauwer. */
  background: var(--fc-verloop);
  border-color: transparent;
  filter: brightness(1.08);
}
.fc-button[data-busy='true'] {
  position: relative;
  color: transparent;
  pointer-events: none;
}
.fc-button[data-busy='true']::after {
  content: '';
  position: absolute;
  width: 13px;
  height: 13px;
  border: 2px solid currentcolor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: fc-spin 0.7s linear infinite;
  color: var(--fc-muted);
}
.fc-button[data-primary][data-busy='true']::after {
  color: var(--fc-on-blue);
}
/* Een bezige knop die zegt wat er loopt (Research Alles: "Markt (2 van 4)"): de tekst blijft leesbaar en het draaiwiel
 * staat ervoor in plaats van eroverheen. Bezig is geen uit, dus ook niet half doorzichtig. */
.fc-button[data-busy='true'][data-voortgang] {
  color: inherit;
  opacity: 1;
  padding-left: 40px;
}
.fc-button[data-primary][data-busy='true'][data-voortgang] {
  color: var(--fc-on-blue);
}
.fc-button[data-busy='true'][data-voortgang]::after {
  left: 18px;
}
@keyframes fc-spin {
  to {
    transform: rotate(1turn);
  }
}
.fc-textbutton {
  color: var(--fc-blue);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fc-textbutton:hover {
  text-decoration: underline;
}

/* --- the tabs inside a format ------------------------------------------- */
.fc-workflow {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--fc-line);
  margin: 0 0 23px;
  padding-bottom: 0;
  /* Geen overflow-x: de tabs breken al af naar een tweede regel, en met een
   * scrollvak liep de onderstreping van -1px eronderuit en gaf dat een
   * verticale schuifbalk (Bas, 2026-09-23). */
}
.fc-step {
  background: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 12px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fc-muted);
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color 0.12s ease;
}
.fc-step:hover {
  color: var(--fc-ink);
}
.fc-step[data-actief='true'] {
  color: var(--fc-blue);
  border-bottom-color: var(--fc-blue);
}

/* --- panels, notices, cards --------------------------------------------- */
/* Een kaart is wit met een hairline en zonder schaduw: de diepere ondergrond
 * doet het werk dat de schaduw deed. `--fc-shadow` is sinds 2026-09-20 `none`,
 * dus de token staat er nog en zegt hetzelfde als een harde `none`. */
.fc-panel {
  background: var(--fc-paper);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  padding: 21px;
  min-width: 0;
  box-shadow: var(--fc-shadow);
}
/* Tabblad Logo (idee 13): de foto, Call Bas met nummer en mail eronder. Eén kolom in de volgorde
 * waarin Bas het vroeg, gecentreerd omdat er maar één ding te doen is. */
.fc-logo {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}
.fc-logo-foto {
  width: min(100%, 320px);
  height: auto;
}
.fc-logo-contact {
  display: grid;
  justify-items: center;
  gap: 7px;
}
.fc-notice {
  background: var(--fc-pale);
  padding: 12px 14px;
  border-radius: 7px;
  color: var(--fc-blue-ink);
  font-size: 11px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  /* A notice carries a sentence and sometimes a button beside it. Without
   * wrapping, the sentence is whatever width is left over: on a phone the
   * proposals notice ran two words per line in a 90px column while
   * "Opnieuw proberen" kept its full size beside it. The text takes the row
   * and anything after it drops to the next line. */
  flex-wrap: wrap;
}
.fc-notice > span:first-child {
  flex: 1 1 22ch;
  min-width: 0;
}
.fc-notice[data-tone='waarschuwing'] {
  background: var(--fc-yellow);
  color: var(--fc-amber-ink);
}
.fc-notice[data-tone='fout'] {
  background: var(--fc-red-soft);
  color: var(--fc-red);
}
.fc-notice[data-tone='goed'] {
  background: var(--fc-green-soft);
  color: var(--fc-green);
}

 /* DRIE KOLOMMEN, NIET VIER (mockup 5a, 2026-09-21).
  *
  * Hiervoor stond hier een VASTE kaartbreedte van 280px met `auto-fill`, dus
  * het aantal kolommen hing af van de schermbreedte en de laatste rij liet een
  * gat vallen. De mockup legt drie even brede kaarten naast elkaar op 1240px;
  * met `minmax(0, 1fr)` groeien ze mee in plaats van dat er een vierde bij
  * komt. Onder de 1100 worden het er twee, onder de 900 één - een kaart met
  * zes statusvakjes erin is smaller niet meer te lezen. */
.fc-formatgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px) {
  .fc-formatgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Eén kolom onder de 900. Dat breekpunt stond hier al en is hetzelfde punt
 * waarop de rest van het scherm omklapt; een tweede grens van mijzelf op 760
 * stond er even naast en deed niets, want deze kwam erna en won. */
@media (max-width: 900px) {
  .fc-formatgrid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.fc-formatcard {
  background: var(--fc-paper);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  overflow: hidden;
  min-width: 0;
  box-shadow: var(--fc-shadow);
  transition:
    box-shadow 0.15s ease,
    transform 0.15s ease;
  display: grid;
  grid-template-rows: auto 1fr;
  text-align: left;
  color: inherit;
  text-decoration: none;
}
.fc-formatcard:hover {
  box-shadow: var(--fc-shadow-lift);
}
.fc-formatcard:active {
  transform: translateY(1px);
}
.fc-cover {
  width: 100%;
  height: 168px;
  padding: 18px;
  display: flex;
  align-items: flex-end;
  background-color: var(--fc-cover-bg);
  background-size: cover;
  background-position: center;
  position: relative;
}
/* Never a broken tile: a cover that fails to load falls back to this. */
/* Een format zonder omslag krijgt zijn EIGEN kleur als verloop (mockup 5a).
 * De donkere kant wordt gemengd met `--fc-ink`, dus er komt geen kleurwaarde
 * bij: het verloop is de formatkleur plus een token. Staat er geen kleur, dan
 * valt hij terug op de tekening hieronder. */
.fc-cover[data-placeholder='true'][style*='--kaartkleur'] {
  background-image: linear-gradient(
    150deg,
    color-mix(in srgb, var(--kaartkleur) 42%, var(--fc-ink)),
    color-mix(in srgb, var(--kaartkleur) 78%, var(--fc-ink))
  );
}
.fc-cover[data-placeholder='true'] {
  background-image:
    radial-gradient(120% 90% at 20% 10%, var(--fc-verloop-naar) 0%, transparent 55%),
    radial-gradient(90% 80% at 85% 25%, var(--fc-verloop-van) 0%, transparent 60%),
    linear-gradient(160deg, var(--fc-verloop-van) 0%, var(--fc-verloop-mid) 100%);
}
.fc-covertitle {
  color: var(--fc-on-blue); /* op een foto, in beide themas wit */
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  letter-spacing: -0.035em;
  font-size: 21px;
  line-height: 1.1;
  text-shadow: 0 1px 12px rgb(0 0 0 / 35%);
}
.fc-formatbody {
  padding: 14px 17px 17px;
}
/* De regel onder de omslag: wanneer er voor het laatst aan gewerkt is. */
.fc-cardmeta {
  font-size: 10px;
  color: var(--fc-muted);
  margin-bottom: 12px;
}
/* De zes vakjes: drie onderdelen maal twee talen, altijd alle zes.
 * `align-items: start` en niet `center`, want een cel die over twee regels
 * breekt ("goedgekeurd · verouderd") hoort met zijn eerste regel op één lijn
 * met de cel ernaast te staan, niet gecentreerd te gaan zweven. */
.fc-outgrid {
  display: grid;
  grid-template-columns: 26px repeat(3, minmax(0, 1fr));
  gap: 9px 10px;
  align-items: start;
  font-size: 10.5px;
  line-height: 1.4;
}
.fc-status {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 10.5px;
  line-height: 1.35;
  white-space: nowrap;
  color: var(--fc-muted);
}
/* De stip draagt de kleur van de tekst ernaast (`currentcolor`). De mockup
 * tekent hem een slag lichter dan die tekst (#ffe066 naast #6b4708), maar dat
 * zijn twee kleuren die niet in de tokens staan en er mochten er geen bij. Met
 * `currentcolor` komt hij uit dezelfde token als het woord en blijft hij op
 * zes pixels leesbaar; de pale varianten die er wél zijn (`--fc-amber-line`)
 * zijn randkleuren en vallen op wit weg. */
.fc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentcolor;
  flex: none;
}
.fc-status[data-state='goedgekeurd'] {
  color: var(--fc-green);
}
.fc-status[data-state='in review'] {
  color: var(--fc-blue);
}
.fc-status[data-state='concept'] {
  color: var(--fc-amber);
}
/* Ontbreekt was grijs en staat in de mockup rood: het is het enige vakje dat
 * zegt dat er nog niets is. */
.fc-status[data-state='ontbreekt'] {
  color: var(--fc-red);
}
.fc-status[data-outdated='true'] {
  color: var(--fc-amber);
}
.fc-workline {
  margin-top: 14px;
  border-top: 1px solid var(--fc-line-soft);
  padding-top: 11px;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  color: var(--fc-muted);
}

/* DE TEGEL AAN HET EIND VAN HET RASTER (mockup 5a).
 * Een gestippelde omtrek en verder niets: hij moet als een lege plek lezen
 * waar er nog een kaart bij kan, niet als een vierde format. Daarom geen
 * papier, geen schaduw en de tekst in de gedempte kleur. */
.fc-nieuwtegel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 260px;
  padding: 28px 26px;
  border: 1px dashed var(--fc-line-strong);
  border-radius: var(--fc-radius);
  background: none;
  color: var(--fc-muted);
  text-align: center;
  cursor: pointer;
  font: inherit;
  transition:
    border-color 0.14s ease,
    background 0.14s ease;
}
.fc-nieuwtegel:hover {
  border-color: var(--fc-blue);
  background: var(--fc-pale);
}
.fc-nieuwtegel:active {
  transform: translateY(1px);
}
.fc-nieuwtegel-plus {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--fc-line);
  background: var(--fc-paper);
  color: var(--fc-blue);
  font-size: 20px;
  line-height: 1;
}
.fc-nieuwtegel-kop {
  font-size: 12px;
  font-weight: 700;
  color: var(--fc-ink);
}
.fc-nieuwtegel-uitleg {
  font-size: 11px;
  max-width: 24ch;
  line-height: 1.5;
}

/* De naam van een rij met zijn feiten eronder (mockup 6d). */
.fc-invoernaam {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.fc-invoernaam > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Een rij pillen die naar een gebied op hetzelfde scherm springt (mockup 6g).
 * Geen filter: alles blijft staan, dit is alleen "breng me daarheen". */
.fc-pillen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.fc-pil {
  border: 1px solid var(--fc-line);
  background: var(--fc-paper);
  color: var(--fc-ink);
  border-radius: var(--fc-radius-pil);
  padding: 10px 16px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.fc-pil:hover {
  border-color: var(--fc-line-strong);
  background: var(--fc-bg);
}
.fc-pil[data-actief='true'] {
  background: var(--fc-blue-deep);
  border-color: var(--fc-blue-deep);
  color: var(--fc-on-blue);
}

/* De gebruiksaanwijzing (menu onder je naam): één leeskolom, koppen uit de
 * basisstijl, regels van ± 70 tekens zodat lange tekst leesbaar blijft. */
.fc-handleiding {
  max-width: 760px;
  line-height: 1.6;
}
.fc-handleiding h2 {
  font-size: 22px;
  margin: 30px 0 8px;
  scroll-margin-top: 16px;
}
.fc-handleiding h2:first-child {
  margin-top: 0;
}
.fc-handleiding h3 {
  font-size: 17px;
  margin: 20px 0 6px;
}
.fc-handleiding p,
.fc-handleiding ul {
  margin: 0 0 12px;
  max-width: 68ch;
  overflow-wrap: anywhere;
}
.fc-handleiding ul {
  padding-left: 20px;
}
.fc-handleiding li + li {
  margin-top: 4px;
}
.fc-handleiding a {
  color: var(--fc-blue);
}
.fc-handleiding a:hover {
  color: var(--fc-blue-deep);
}
.fc-handleiding-notitie {
  color: var(--fc-muted);
}
/* Een foto van het scherm: hoogstens de breedte van de kolom, een staande foto niet hoger dan het venster. */
.fc-handleiding-beeld {
  margin: 4px 0 22px;
}
.fc-handleiding-beeld a {
  display: inline-block;
  max-width: 100%;
  border-radius: calc(var(--fc-radius) / 2);
}
.fc-handleiding-beeld img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 70vh;
  border: 1px solid var(--fc-line);
  border-radius: calc(var(--fc-radius) / 2);
}
.fc-handleiding-beeld a:hover img {
  border-color: var(--fc-line-strong);
}
.fc-handleiding-beeld figcaption {
  margin-top: 6px;
  max-width: 68ch;
  font-size: 13px;
  color: var(--fc-muted);
}

/* De kaartjes bovenaan het deckscherm (mockup 4a). */
.fc-statrij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.fc-statkaart {
  display: grid;
  gap: 8px;
  align-content: start;
}
.fc-statgetal {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
/* De balk is een vak met een vulling erin, en de vulling draagt het verloop -
 * dezelfde twee stops als de knop, dus er komt geen kleur bij. */
.fc-statbalk {
  height: 6px;
  border-radius: 999px;
  background: var(--fc-line);
  overflow: hidden;
}
.fc-statbalk > span {
  display: block;
  height: 100%;
  background: var(--fc-verloop);
}
/* De kaart die iets te doen geeft draagt het verloop zelf, zoals 4a hem
 * tekent: dit is de enige plek op dit scherm waar geld uitgegeven wordt. */
.fc-statkaart-actie {
  background: var(--fc-verloop);
  border-color: transparent;
  color: var(--fc-on-blue);
}
.fc-statkaart-actie .fc-small {
  color: color-mix(in srgb, var(--fc-on-blue) 78%, transparent);
}
.fc-statactie {
  font-size: 15px;
  font-weight: 700;
}
.fc-statkaart-actie .fc-button {
  background: var(--fc-paper);
  color: var(--fc-blue-deep);
  border-color: transparent;
  justify-self: start;
}

/* De shotlijst als strook kaarten (mockup 6f). Drie naast elkaar boven 1100,
 * twee daaronder, een op een telefoon. */
.fc-shotstrook {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
@media (max-width: 1100px) {
  .fc-shotstrook {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .fc-shotstrook {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* trailer: kop, script, stem, werk
 *
 * De nieuwe Trailer (09-trailer, voorstel 7b), eerste helft: de kop met de zes stappen, de werkbalk, het Script en de Stem. De
 * tweede helft (draaiboek, muziek, animatic, film) staat aan het einde van dit bestand. Alleen --fc-* tokens; de ene nieuwe waarde
 * (de kleur van een golfbalk) is hieronder een token. Het scherm is een container (`trailer`) en elke kaart is er een (`trkaart`):
 * wat stapelt, stapelt op de breedte van de plek waar het staat, niet van het venster.
 */
.fc-tr {
  --fc-tr-golf: #9fb6cf;
  container: trailer / inline-size;
  min-width: 0;
}
:root[data-theme='dark'] .fc-tr {
  --fc-tr-golf: #46617f;
}
.fc-tr-vak {
  container: trkaart / inline-size;
  min-width: 0;
}

/* de kop en de stappen */
.fc-tr-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 18px;
}
.fc-tr-koptekst {
  min-width: 0;
}
.fc-tr-koptekst h2,
.fc-tr-koptekst .fc-titelveld {
  font-size: 30px;
}
/* de rand en de binnenruimte van het veld vallen buiten de regel van de titel: de meta-regel eronder verspringt niet */
.fc-tr-koptekst .fc-titelveld {
  margin: -3px 0;
}
.fc-tr-meta {
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.fc-tr-stapvak {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.fc-tr-stappen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fc-tr-stap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--fc-line);
  background: var(--fc-paper);
  border-radius: var(--fc-radius-pil);
  padding: 7px 13px 7px 8px;
  min-height: 36px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  color: inherit;
  transition:
    border-color 0.12s ease,
    transform 0.08s ease;
}
.fc-tr-stap:hover {
  border-color: var(--fc-line-strong);
}
.fc-tr-stap:active {
  transform: translateY(1px);
}
.fc-tr-stapteken {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  background: var(--fc-line-soft);
  color: var(--fc-muted);
  flex: none;
}
.fc-tr-stap[data-stand='klaar'] .fc-tr-stapteken {
  background: var(--fc-green);
  color: var(--fc-paper);
}
.fc-tr-stap[data-stand='nu'] {
  border-color: var(--fc-blue);
  color: var(--fc-blue);
}
.fc-tr-stap[data-stand='nu'] .fc-tr-stapteken {
  background: var(--fc-blue);
  color: var(--fc-paper);
}
.fc-tr-stap[data-stand='straks'] {
  color: var(--fc-muted);
}
.fc-tr-stap[data-stand='bezig'] {
  border-color: var(--fc-blue);
}
.fc-tr-stap[data-stand='bezig'] .fc-tr-stapteken::before,
.fc-tr-draai {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border: 2px solid currentcolor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: fc-spin 0.7s linear infinite;
  color: var(--fc-blue);
  flex: none;
}
.fc-tr-staplabel {
  display: none;
  font-weight: 700;
  color: var(--fc-blue);
}
@container trailer (max-width: 519.98px) {
  .fc-tr-stapnaam {
    display: none;
  }
  .fc-tr-stap {
    padding: 7px;
    min-width: 36px;
    justify-content: center;
  }
  .fc-tr-staplabel {
    display: block;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fc-tr-draai,
  .fc-tr-stap[data-stand='bezig'] .fc-tr-stapteken::before {
    animation-duration: 2.4s;
  }
}

/* de werkbalk */
.fc-tr-werk {
  display: grid;
  gap: 8px;
  margin-bottom: 4px;
}
.fc-tr-werkrij {
  align-items: center;
  gap: 8px 14px;
}
.fc-notice.fc-tr-werkrij > .fc-tr-draai:first-child {
  flex: none;
}
.fc-tr-werktekst {
  display: grid;
  gap: 2px;
  flex: 1 1 30ch;
  min-width: 0;
}
.fc-tr-werkacties {
  margin-left: auto;
  gap: 6px 12px;
  align-items: flex-start;
  align-self: center;
}
.fc-tr-voortgangsbalk {
  appearance: none;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: 3px;
  overflow: hidden;
  background: var(--fc-line);
  accent-color: var(--fc-blue);
}
.fc-tr-voortgangsbalk::-webkit-progress-bar {
  background: var(--fc-line);
}
.fc-tr-voortgangsbalk::-webkit-progress-value {
  background: var(--fc-blue);
}
.fc-tr-voortgangsbalk::-moz-progress-bar {
  background: var(--fc-blue);
}

/* het conflict: twee mensen veranderden de trailer tegelijk (de zin, en een knop per versie) */
.fc-tr-conflict {
  margin-bottom: 4px;
  gap: 8px 14px;
}
.fc-tr-conflictzin {
  font-weight: 600;
}
.fc-tr-conflictkoppen {
  flex: 1 1 100%;
  display: grid;
  gap: 10px;
  min-width: 0;
}
.fc-tr-conflictketen {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.fc-tr-conflictnaam {
  color: var(--fc-amber-ink);
}
.fc-tr-conflictknoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fc-tr-conflictknoppen .fc-button {
  max-width: 100%;
  white-space: normal;
  text-align: left;
  display: grid;
  gap: 2px;
  justify-items: start;
}
/* de bezig-ring van de gedeelde knop staat absoluut zonder afstanden: in dit raster zou hij linksboven blijven hangen */
.fc-tr-conflictknoppen .fc-button[data-busy='true']::after {
  inset: 0;
  margin: auto;
}
.fc-tr-conflictwie {
  font-weight: 600;
}
.fc-tr-conflictinhoud {
  font-weight: 400;
  opacity: 0.8;
}

/* knoppen en regels die in alle kaarten terugkomen */
.fc-tr-knopvak {
  display: inline-grid;
  gap: 3px;
  justify-items: start;
  max-width: 100%;
}
.fc-tr-reden {
  max-width: 36ch;
  white-space: normal;
}
.fc-button.fc-tr-klein {
  padding: 7px 13px;
  min-height: 32px;
  font-size: 11.5px;
}
.fc-textbutton.fc-tr-tekstknop {
  min-height: 32px;
  font-size: 12px;
  white-space: nowrap;
}
.fc-textbutton.fc-tr-tekstknop:active:not(:disabled) {
  opacity: 0.7;
}
.fc-textbutton.fc-tr-tekstknop:disabled {
  color: var(--fc-muted);
  text-decoration: none;
  cursor: not-allowed;
}
/* De vakken van de Structuur zo hoog als hun tekst, zonder scrollen (Bas, Agentation 20 okt: "as tall as what is written in it").
 * De minimale hoogte staat op het vak zelf. */
textarea.fc-input.fc-structuurveld {
  field-sizing: content;
}
textarea.fc-input.fc-tr-invoer {
  field-sizing: content;
  min-height: 40px;
  resize: none;
  line-height: 1.5;
}
.fc-tr-wens {
  display: grid;
  gap: 12px;
  background: var(--fc-veld);
  border-radius: 14px;
  padding: 14px;
  min-width: 0;
  align-content: start;
}
.fc-tr-wens .fc-input {
  background: var(--fc-paper);
}

/* de lege staat */
.fc-tr-leeg {
  margin-bottom: 20px;
}
.fc-tr-leeg h3 {
  color: var(--fc-ink);
}
.fc-tr-leeg > p {
  max-width: 64ch;
}
.fc-tr-wens textarea.fc-input.fc-tr-invoer,
.fc-tr-leegkant textarea.fc-input.fc-tr-invoer {
  min-height: 84px;
}
/* Onder de kop de taal van de stem (die geldt voor allebei), dan twee wegen naar een script naast elkaar, even zwaar, met "of"
 * ertussen (Bas, 20 okt). Naast elkaar vanaf 760 px trailerbreedte, dan houdt een kolom ± 300 px; smaller staan ze onder elkaar
 * en ligt "of" er als lijn tussen. Hooguit 1040 px breed: op een breed scherm worden de velden anders lange balken. */
.fc-tr-leegtaal .fc-field {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fc-tr-leegtaal .fc-input {
  width: auto;
}
.fc-tr-leegkeuze {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  width: 100%;
  max-width: 1040px;
  margin-top: 6px;
  text-align: left;
}
.fc-tr-leegkant {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  background: var(--fc-veld);
  border-radius: 14px;
  padding: 18px;
}
.fc-tr-leegkant h4 {
  margin: 0;
  color: var(--fc-ink);
  font-size: 16px;
  font-weight: 700;
}
.fc-tr-leegkant > p {
  margin: 0;
  max-width: 52ch;
}
.fc-tr-leegkant .fc-input {
  background: var(--fc-paper);
}
/* het sleepvak vult de ruimte die de kolom ernaast met zijn velden maakt, zodat de twee knoppen onderaan op één lijn staan */
.fc-tr-leegkant .fc-tr-import {
  flex: 1;
  margin-top: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: stretch;
}
.fc-tr-leegkant .fc-dropzone[data-compact='true'] {
  min-height: 120px;
  align-content: center;
  padding: 22px 18px;
  gap: 6px;
}
.fc-tr-leegkant .fc-dropzone[data-compact='true'] .fc-dropzone-kop {
  font-size: 13px;
}
.fc-tr-leegkant .fc-dropzone-wat {
  max-width: 46ch;
}
.fc-tr-leegkant .fc-tr-importknoppen {
  justify-self: start;
}
.fc-tr-leegactie {
  margin-top: auto;
  padding-top: 4px;
}
.fc-tr-leegof {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--fc-muted);
  font-size: 13px;
  font-weight: 700;
}
.fc-tr-leegof::before,
.fc-tr-leegof::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--fc-line);
}
@container trailer (min-width: 760px) {
  .fc-tr-leegkeuze {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 20px;
  }
  .fc-tr-leegof {
    flex-direction: column;
  }
  .fc-tr-leegof::before,
  .fc-tr-leegof::after {
    border-top: 0;
    border-left: 1px solid var(--fc-line);
  }
}

/* kaart 1, het script */
.fc-tr-scriptraster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
@container trkaart (min-width: 870px) {
  .fc-tr-scriptraster {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  }
}
.fc-tr-tabel {
  container: trtabel / inline-size;
  min-width: 0;
  display: grid;
  gap: 4px;
}
.fc-tr-regelkop,
.fc-tr-regel {
  display: grid;
  grid-template-columns: 18px 26px 66px minmax(0, 1fr) 62px 66px;
  gap: 6px 10px;
  align-items: start;
}
.fc-tr-regelkop {
  font-size: 10px;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--fc-muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--fc-line-soft);
}
.fc-tr-duurkop {
  text-align: right;
}
.fc-tr-regels {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fc-tr-regel {
  padding: 8px 0;
  border-bottom: 1px solid var(--fc-line-soft);
}
.fc-tr-nr {
  font-variant-numeric: tabular-nums;
  color: var(--fc-muted);
  font-weight: 700;
  padding-top: 9px;
}
.fc-tr-soort {
  margin-top: 7px;
  width: 100%;
  min-height: 24px;
  border-radius: var(--fc-radius-pil);
  padding: 3px 0;
  font-size: 10.5px;
  font-weight: 800;
  background: var(--fc-pale);
  color: var(--fc-blue-ink);
  transition:
    filter 0.12s ease,
    transform 0.08s ease;
}
.fc-tr-soort[data-s='titel'] {
  background: var(--fc-doek);
  color: var(--fc-op-doek);
  letter-spacing: 0.04em;
}
.fc-tr-soort[data-s='inbeeld'] {
  background: var(--fc-yellow);
  color: var(--fc-amber-ink);
  box-shadow: inset 0 0 0 1px var(--fc-amber-line);
}
.fc-tr-soort:hover:not(:disabled) {
  filter: brightness(0.95);
}
.fc-tr-soort:active:not(:disabled) {
  transform: translateY(1px);
}
.fc-tr-tekstcel {
  display: grid;
  gap: 6px;
  min-width: 0;
  align-content: start;
}
.fc-tr-regel[data-soort='titel'] .fc-tr-tekstcel > .fc-tr-invoer {
  font-weight: 800;
  letter-spacing: 0.03em;
}
.fc-tr-inbeeld {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px 12px;
  padding: 10px;
  border-radius: 10px;
  background: var(--fc-yellow);
  border: 1px solid var(--fc-amber-line);
  color: var(--fc-amber-ink);
}
.fc-tr-inbeeld .fc-field > label {
  color: var(--fc-amber-ink);
}
.fc-tr-inbeeld .fc-small.fc-muted {
  color: var(--fc-amber-ink);
}
.fc-tr-inbeeld .fc-pillgroep > button {
  padding: 4px 11px;
  min-height: 30px;
  font-size: 12px;
}
@container trtabel (min-width: 760px) {
  .fc-tr-inbeeld {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}
.fc-tr-greep {
  margin-top: 5px;
  width: 18px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 6px;
  color: var(--fc-muted);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -3px;
  line-height: 1;
  cursor: grab;
  transition:
    color 0.12s ease,
    background-color 0.12s ease;
}
.fc-tr-greep:hover:not(:disabled) {
  color: var(--fc-ink);
}
.fc-tr-greep:focus-visible {
  outline: 2px solid var(--fc-blue-ink);
  outline-offset: 1px;
}
.fc-tr-greep:active:not(:disabled) {
  cursor: grabbing;
  background: var(--fc-pale);
}
.fc-tr-regel[data-eind] .fc-tr-greep {
  visibility: hidden;
}
.fc-tr-logocel {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  min-width: 0;
}
.fc-tr-logoduim {
  height: 36px;
  max-width: 96px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--fc-doek);
}
.fc-tr-import {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  justify-items: start;
}
.fc-tr-importknoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: flex-start;
}
.fc-tr-duur {
  font-variant-numeric: tabular-nums;
  color: var(--fc-muted);
  font-size: 11.5px;
  padding-top: 9px;
  text-align: right;
}
.fc-tr-regelknoppen {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  padding-top: 5px;
}
.fc-tr-ikoon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--fc-line);
  background: var(--fc-paper);
  color: var(--fc-muted);
  display: grid;
  place-items: center;
  transition:
    border-color 0.12s ease,
    color 0.12s ease,
    transform 0.08s ease;
}
.fc-tr-ikoon:hover:not(:disabled) {
  border-color: var(--fc-line-strong);
  color: var(--fc-ink);
}
.fc-tr-ikoon[data-doe='weg']:hover:not(:disabled) {
  color: var(--fc-red);
  border-color: var(--fc-red-line);
  background: var(--fc-red-soft);
}
.fc-tr-ikoon:active:not(:disabled) {
  transform: translateY(1px);
}
.fc-tr-regelmelding {
  grid-column: 1 / -1;
  display: grid;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--fc-yellow);
  color: var(--fc-amber-ink);
}
.fc-tr-melding {
  margin: 8px 0;
}
.fc-tr-voet {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 14px;
  margin-top: 12px;
}
.fc-tr-lengteregel {
  margin-left: auto;
  align-self: center;
  min-width: 0;
}
@container trtabel (max-width: 639.98px) {
  .fc-tr-regelkop {
    display: none;
  }
  .fc-tr-regel {
    grid-template-columns: 18px 22px 66px minmax(0, 1fr) auto;
  }
  /* eerst de kop van de regel (nummer, soort, duur, plus en kruis), dan de velden over de volle breedte eronder */
  .fc-tr-greep {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0;
    align-self: center;
  }
  .fc-tr-soort {
    grid-column: 3;
    grid-row: 1;
    margin-top: 0;
    align-self: center;
  }
  .fc-tr-nr {
    grid-column: 2;
    grid-row: 1;
    padding-top: 0;
    align-self: center;
  }
  .fc-tr-duur {
    grid-column: 4;
    grid-row: 1;
    text-align: left;
    padding-top: 0;
    align-self: center;
  }
  .fc-tr-regelknoppen {
    grid-column: 5;
    grid-row: 1;
    padding-top: 0;
  }
  .fc-tr-tekstcel {
    grid-column: 2 / -1;
    grid-row: 2;
  }
  .fc-tr-lengteregel {
    margin-left: 0;
    flex-basis: 100%;
  }
}

/* kaart 1 op een trailer met script: de pagina (TRAILER-SCRIPTPAGINA-PLAN §9.1). Twee groepen in het raster van de kaart: links wat
 * je vraagt (de velden van nu), rechts het vel met zijn twee kantlijnen (de soort van het blok waar je staat; de shots per moment) en
 * daaronder de regel en Maak de shots. De inspringingen zijn procenten van het vel, zoals in een gedrukt script. */
.fc-sp-linkergroep {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}
.fc-sp-groep {
  container: trscript / inline-size;
  display: grid;
  gap: 10px;
  min-width: 0;
}
.fc-sp {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 52px;
  gap: 0 10px;
  min-width: 0;
}
.fc-sp-links,
.fc-sp-rechts {
  position: relative;
  min-width: 0;
}
.fc-sp-vel {
  min-width: 0;
  background: var(--fc-paper);
  border: 1px solid var(--fc-line);
  border-radius: 14px;
  padding: 26px 30px 30px;
}
.fc-sp-vel:focus-within {
  border-color: var(--fc-blue);
}
.fc-sp[data-lezen='true'] .fc-sp-vel {
  background: var(--fc-veld);
}
.fc-sp-tekst {
  font-family: var(--fc-script-letter);
  font-size: 14px;
  line-height: 1.45;
  color: var(--fc-ink);
  min-height: 12em;
  outline: none;
  overflow-wrap: anywhere;
  caret-color: var(--fc-blue);
}
.fc-sp-tekst:empty::before {
  content: 'Begin hier met schrijven.';
  color: var(--fc-muted);
}
.fc-sp-blok {
  white-space: pre-wrap;
  min-height: 1.45em;
  margin: 1.1em 0 0;
}
.fc-sp-blok:first-child {
  margin-top: 0;
}
.fc-sp-blok[data-soort='personage'] {
  margin-left: 38%;
  text-transform: uppercase;
}
.fc-sp-blok[data-soort='aanwijzing'] {
  margin: 0 0 0 30%;
  max-width: 46%;
}
.fc-sp-blok[data-soort='dialoog'] {
  margin: 0 0 0 18%;
  max-width: 60%;
}
.fc-sp-blok:is([data-soort='titel'], [data-soort='geluid'], [data-soort='logo']) {
  text-transform: uppercase;
}
/* het label is opmaak, geen tekst: bewaard wordt wat je typt (§9.1) */
.fc-sp-blok[data-soort='titel']::before {
  content: 'TITLE: ';
}
.fc-sp-blok[data-soort='geluid']::before {
  content: 'SOUND: ';
}
.fc-sp-blok[data-soort='logo']::before {
  content: 'LOGO: ';
}
.fc-sp-blok[data-soort='logo'][data-leeg]::before {
  content: 'LOGO';
}
/* de noten onder een blok: de meldingen van de server en wat de pagina zelf ziet, in de letter van de app */
.fc-sp-blok[data-noot]::after {
  content: attr(data-noot);
  display: block;
  margin-top: 2px;
  white-space: pre-line;
  font-family: Manrope, -apple-system, system-ui, 'Segoe UI', sans-serif;
  font-size: 11px;
  line-height: 1.45;
  text-transform: none;
  color: var(--fc-amber-ink);
}
.fc-sp-blok[data-grijs],
.fc-sp-blok[data-grijs]::after {
  color: var(--fc-muted);
}
.fc-sp-blok[data-fout] {
  background: var(--fc-red-soft);
  outline: 2px solid var(--fc-red-line);
  outline-offset: 2px;
}
.fc-sp-blok[data-gezocht] {
  background: var(--fc-yellow);
}
.fc-sp-soortknop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 2px 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--fc-muted);
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-transform: uppercase;
  text-align: right;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.fc-sp-soortknop:hover {
  color: var(--fc-blue);
  background: var(--fc-pale);
}
.fc-sp-soortknop:focus-visible {
  outline: 2px solid var(--fc-focus);
  outline-offset: 1px;
}
.fc-sp-soortknop:active {
  opacity: 0.7;
}
.fc-sp-soortknop[data-handmatig='true'] {
  color: var(--fc-blue);
}
.fc-sp-menu {
  position: absolute;
  left: 0;
  z-index: 5;
  display: grid;
  min-width: 160px;
  padding: 6px;
  background: var(--fc-paper);
  border: 1px solid var(--fc-line);
  border-radius: 12px;
  box-shadow: var(--fc-shadow-lift);
}
.fc-sp-menu [role='menuitemradio'] {
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fc-ink);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.fc-sp-menu [role='menuitemradio']:hover {
  background: var(--fc-pale);
}
.fc-sp-menu [role='menuitemradio']:focus-visible {
  outline: 2px solid var(--fc-focus);
  outline-offset: -2px;
}
.fc-sp-menu [role='menuitemradio']:active {
  opacity: 0.7;
}
.fc-sp-menu [aria-checked='true'] {
  color: var(--fc-blue);
  font-weight: 700;
}
.fc-sp-menuhint {
  margin: 4px 10px 2px;
  font-size: 10.5px;
  color: var(--fc-muted);
}
.fc-sp-shotnr {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  padding: 1px 6px;
  border: 1px solid var(--fc-pale-line);
  border-radius: var(--fc-radius-pil);
  background: var(--fc-pale);
  color: var(--fc-blue);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.fc-sp-shotnr:hover {
  border-color: var(--fc-blue);
}
.fc-sp-shotnr:focus-visible {
  outline: 2px solid var(--fc-focus);
  outline-offset: 1px;
}
.fc-sp-shotnr:active {
  opacity: 0.7;
}
.fc-sp-shotnr[data-toestand='veranderd'] {
  background: var(--fc-yellow);
  border-color: var(--fc-amber-line);
  color: var(--fc-amber-ink);
}
.fc-sp-teller {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fc-red);
}
.fc-sp-melding,
.fc-sp-onder {
  margin: 0 62px 0 106px;
}
.fc-sp-onder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}
.fc-sp-regel {
  flex: 1 1 24ch;
  min-width: 0;
  margin: 0;
}
@container trscript (max-width: 479.98px) {
  .fc-sp {
    grid-template-columns: 88px minmax(0, 1fr) 40px;
    gap: 0 6px;
  }
  .fc-sp-vel {
    padding: 16px 14px 20px;
  }
  .fc-sp-blok[data-soort='personage'] {
    margin-left: 24%;
  }
  .fc-sp-blok[data-soort='aanwijzing'] {
    margin-left: 16%;
    max-width: 70%;
  }
  .fc-sp-blok[data-soort='dialoog'] {
    margin-left: 8%;
    max-width: 84%;
  }
  .fc-sp-melding,
  .fc-sp-onder {
    margin: 0;
  }
}

/* kaart 2, de stem */
.fc-tr-stemraster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
@container trkaart (min-width: 870px) {
  .fc-tr-stemraster {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }
}
.fc-tr-stemkiezen,
.fc-tr-opnamelinks {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
}
.fc-tr-proefzin {
  color: var(--fc-ink);
}
.fc-tr-stemmen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@container trkaart (max-width: 519.98px) {
  .fc-tr-stemmen {
    grid-template-columns: minmax(0, 1fr);
  }
}
.fc-tr-stem {
  position: relative;
  display: grid;
  gap: 8px;
  justify-items: start;
  border: 1px solid var(--fc-line);
  border-radius: 14px;
  padding: 11px 12px;
  background: var(--fc-paper);
  min-width: 0;
  transition:
    border-color 0.12s ease,
    transform 0.08s ease;
}
.fc-tr-stem:hover {
  border-color: var(--fc-line-strong);
}
.fc-tr-stem:active {
  transform: translateY(1px);
}
.fc-tr-stem[data-gekozen='true'] {
  border-color: var(--fc-blue);
  background: var(--fc-pale);
}
.fc-tr-stem:has(.fc-tr-stemkeuze:focus-visible) {
  outline: 3px solid var(--fc-focus);
  outline-offset: 3px;
}
.fc-tr-stemkeuze {
  display: grid;
  gap: 1px;
  text-align: left;
  min-width: 0;
  max-width: 100%;
  padding: 0;
}
.fc-tr-stemkeuze:focus-visible {
  outline: 0;
}
/* de hele kaart is het doel van de klik, behalve Beluister, die erboven staat */
.fc-tr-stemkeuze::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.fc-tr-stemkeuze span {
  font-size: 11px;
  color: var(--fc-muted);
}
.fc-tr-stem .fc-tr-knopvak {
  position: relative;
  z-index: 1;
}
/* de knoppenrij ligt boven het klikvlak van de kaart (het ::after van .fc-tr-stemkeuze) */
.fc-tr-stem .fc-tr-stemknoppen {
  position: relative;
  z-index: 1;
  gap: 8px;
}
.fc-tr-allestemmen {
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--fc-line);
  border-radius: 12px;
  padding: 2px 12px;
  background: var(--fc-paper);
}
/* de acht standaardstemmen staan allemaal in beeld: geen schuifvak (Bas wil ze alle acht zien) */
.fc-tr-standaardlijst {
  max-height: none;
  overflow: visible;
}
.fc-tr-stemrij {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--fc-line-soft);
}
.fc-tr-stemnaam {
  display: grid;
  min-width: 0;
}
.fc-tr-opname {
  background: var(--fc-veld);
  border-radius: 14px;
  padding: 14px;
  display: grid;
  gap: 10px;
  min-width: 0;
  align-content: start;
}
.fc-tr-spelerrij {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fc-tr-speel {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--fc-blue-deep);
  color: var(--fc-on-blue);
  display: grid;
  place-items: center;
  flex: none;
  transition:
    filter 0.12s ease,
    transform 0.08s ease;
}
:root[data-theme='dark'] .fc-tr-speel {
  color: var(--fc-paper);
}
.fc-tr-speel.fc-tr-klein-speel {
  width: 30px;
  height: 30px;
}
.fc-tr-speel:hover:not(:disabled) {
  filter: brightness(1.15);
}
.fc-tr-speel:active:not(:disabled) {
  transform: scale(0.96);
}
.fc-tr-speel[data-speelt='true'] svg {
  display: none;
}
.fc-tr-speel[data-speelt='true']::before {
  content: '';
  width: 12px;
  height: 12px;
  background: currentcolor;
  border-radius: 2px;
}
.fc-tr-golfbalk {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  border-radius: 10px;
  background: var(--fc-paper);
  border: 1px solid var(--fc-line-soft);
  overflow: hidden;
}
.fc-tr-golfbalk::before {
  content: '';
  position: absolute;
  inset: 9px 10px;
  background: repeating-linear-gradient(90deg, var(--fc-tr-golf) 0 2px, transparent 2px 5px);
}
.fc-tr-golfbalk:not([data-bezig])::after {
  display: none;
}
.fc-tr-golfbalk::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--fc-tr-voortgang, 0%);
  background: var(--fc-blue-glow);
  border-right: 2px solid var(--fc-accent);
}
.fc-tr-schuif {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 76px;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: var(--fc-muted);
}
.fc-tr-schuif span:last-child {
  text-align: right;
}
.fc-tr-schuif input {
  width: 100%;
  min-height: 24px;
  accent-color: var(--fc-blue);
}
@container trkaart (max-width: 519.98px) {
  .fc-tr-schuif {
    grid-template-columns: 56px minmax(0, 1fr) 62px;
  }
}
.fc-tr-wissel {
  border-top: 1px solid var(--fc-line);
  padding-top: 10px;
  display: grid;
  gap: 6px;
}
.fc-tr-wissel .fc-row {
  align-items: flex-start;
}
.fc-tr-afwijking {
  border: 1px solid var(--fc-amber-line);
  background: var(--fc-yellow);
  color: var(--fc-amber-ink);
  border-radius: 10px;
  padding: 9px 11px;
  display: grid;
  gap: 6px;
}
.fc-tr-nietgevonden {
  color: var(--fc-red);
}

/* het prijsvenster met een rij per deel (bevestigPrijsRijen in dom.js) */
.fc-tr-prijsvenster {
  width: min(460px, calc(100vw - 32px));
}
.fc-tr-prijsrijen {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 40vh;
  overflow: auto;
  border-top: 1px solid var(--fc-line-soft);
}
.fc-tr-prijsrij {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--fc-line-soft);
}
.fc-tr-prijsnaam {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
}
.fc-tr-prijsrij input[type='checkbox'] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--fc-blue);
}
.fc-tr-prijsvink {
  width: 16px;
  flex: none;
}
.fc-tr-prijsrij[data-uit='true'] .fc-tr-prijsnaam {
  cursor: default;
  color: var(--fc-muted);
}
.fc-tr-prijsbedrag {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.fc-tr-prijsreden {
  grid-column: 1 / -1;
  padding-left: 26px;
}
.fc-shotkaart {
  background: var(--fc-paper);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  overflow: hidden;
  min-width: 0;
}
.fc-shotkader {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--fc-ink);
  display: grid;
  place-items: center;
}
.fc-shotkader[data-leeg='true'] {
  background: var(--fc-bg);
}
.fc-shotkader img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Het nummer en de lengte op het kader zelf, zodat de kaart eronder alleen
 * woorden draagt. */
.fc-shotnr {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 9px;
  border-radius: 7px;
  background: var(--fc-paper);
  color: var(--fc-ink);
  font-family: Consolas, ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
}
.fc-shotlijf {
  display: grid;
  gap: 10px;
  padding: 14px 16px 16px;
  min-width: 0;
}
/* Wat er gezegd wordt, als citaat: een streep ervoor in plaats van
 * aanhalingstekens, zodat het als tweede stem leest en niet als tweede zin. */
.fc-shotcitaat {
  border-left: 2px solid var(--fc-line-strong);
  padding-left: 10px;
}

/* Wat een rij op Input IS: opname, document of tekst (mockup 6b). Drie letters
 * in hetzelfde vak, zodat de kolom niet danst bij een langer woord. */
.fc-soortvlag {
  flex: none;
  width: 42px;
  padding: 5px 0;
  border-radius: 8px;
  background: var(--fc-pale);
  color: var(--fc-blue);
  font-family: Consolas, ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
}

/* De hele tekst als vouwkaart onder de secties (mockup 6c laat hem weg, maar
 * de leesweergave blijft bestaan). Dicht, want je komt hier om te schrijven. */
.fc-vouwtekst > summary {
  cursor: pointer;
  list-style: none;
}
.fc-vouwtekst > summary::-webkit-details-marker {
  display: none;
}
.fc-vouwtekst > summary::before {
  content: '\25b8';
  display: inline-block;
  margin-right: 8px;
  color: var(--fc-muted);
  transition: transform 140ms ease-out;
}
.fc-vouwtekst[open] > summary::before {
  transform: rotate(90deg);
}

/* Het bedrag rechtsboven op Beelden (mockup 5b): een kleine kaart die alleen
 * een getal draagt, dus zonder de volle paneelvulling. */
.fc-totaalkaart {
  flex: none;
  text-align: right;
  padding: 16px 20px;
  display: grid;
  gap: 2px;
}

/* --- Het formatscherm (mockup 4b) ---------------------------------------
 * De actiekaart links is breder dan de kolom ernaast: links staat wat je moet
 * doen, rechts wat er is. */
/* 70/30 (Bas, 2026-09-23, eerst 60/40): links passen dan alle stappen op één
 * rij; de kolom rechts kan krimpen. Met `.fc-tweekolom` ervoor, want die regel
 * staat verderop en won met zijn 50/50: de 60/40 heeft zo nooit gewerkt. */
.fc-tweekolom.fc-tweekolom-breed {
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
}
@media (max-width: 1100px) {
  .fc-tweekolom.fc-tweekolom-breed {
    grid-template-columns: minmax(0, 1fr);
  }
}
.fc-actiekaart {
  display: grid;
  gap: 20px;
}
.fc-actiekop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
}
.fc-actietitel {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.035em;
  margin: 3px 0 8px;
}
.fc-overline[data-blauw='true'] {
  color: var(--fc-blue);
}
/* De omslag in de kop zonder beeld: het verloop van de eigen kleur, hetzelfde
 * vlak als op de kaart in Overzicht. */
.fc-kopbeeld[data-placeholder='true'] {
  background-image: linear-gradient(
    150deg,
    color-mix(in srgb, var(--kaartkleur, var(--fc-line)) 42%, var(--fc-ink)),
    color-mix(in srgb, var(--kaartkleur, var(--fc-line)) 78%, var(--fc-ink))
  );
}
@media (max-width: 640px) {
  .fc-actiekop {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* De tijdlijn: vijf stappen naast elkaar, met de lijn door de stippen heen.
 * De lijn is een rand op het vak zelf en geen apart element, zodat hij nooit
 * los kan raken van de stip waar hij bij hoort. */
.fc-tijdlijn {
  display: grid;
  /* Alle stappen op één rij, hoeveel het er ook zijn (het waren vijf kolommen
   * voor zes stappen, en de Trailer viel eronder). */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--fc-line-soft);
  padding-top: 18px;
}
.fc-stap {
  display: grid;
  gap: 4px;
  align-content: start;
  padding-right: 14px;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.fc-stapstip {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--fc-line-strong);
  background: var(--fc-paper);
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}
/* De lijn tussen twee stippen. Op de laatste stap niet, want daar loopt hij
 * naar niets toe. */
.fc-stap::after {
  content: '';
  position: absolute;
  left: 7px;
  right: 0;
  top: 6px;
  height: 2px;
  background: var(--fc-line-strong);
}
.fc-stap:last-child::after {
  display: none;
}
.fc-stap[data-staat='klaar'] .fc-stapstip {
  background: var(--fc-blue-deep);
  border-color: var(--fc-blue-deep);
}
.fc-stap[data-staat='klaar']::after {
  background: var(--fc-blue-deep);
}
.fc-stap[data-hier='true'] .fc-stapstip {
  border-color: var(--fc-accent);
  border-width: 3px;
}
.fc-stap[data-hier='true'] .fc-stapnaam {
  color: var(--fc-blue);
}
.fc-stapnaam {
  font-weight: 700;
  font-size: 13px;
}
.fc-stap:hover .fc-stapnaam {
  text-decoration: underline;
}
@media (max-width: 760px) {
  .fc-tijdlijn {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .fc-stap::after {
    display: none;
  }
}

/* Twee panelen naast elkaar (mockup 6e), en onder elkaar zodra er geen twee
 * meer naast passen. Hetzelfde breekpunt als de rest van het scherm. */
.fc-tweekolom {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  .fc-tweekolom {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Een kop BINNEN een paneel, waar hiervoor een `fc-sectionhead` boven het
 * paneel stond. In een raster van twee zou zo'n losse kop boven de linker
 * kolom hangen en niet boven de rechter. */
.fc-paneelkop {
  margin: 0;
  font-size: 13px;
}
/* Het bedrag waar dit scherm over gaat: groot genoeg om vanaf de andere kant
 * van de kamer te lezen, want dat is wat je hier komt doen. */
.fc-bedraggroot {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.fc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--fc-line);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 10px;
  color: var(--fc-muted);
  white-space: nowrap;
}
.fc-chip[data-tone='waarschuwing'] {
  background: var(--fc-yellow);
  border-color: var(--fc-amber-line);
  color: var(--fc-amber-text);
}
.fc-chip[data-tone='goed'] {
  background: var(--fc-green-soft);
  border-color: var(--fc-green-line);
  color: var(--fc-green);
}
.fc-chip[data-tone='fout'] {
  background: var(--fc-red-soft);
  border-color: var(--fc-red-line);
  color: var(--fc-red);
}
/* De app zelf, niet het team. De andere chips zeggen hoe iets ervoor staat;
   deze zegt waar het vandaan komt, en dat is nergens. Uit de bestaande tokens,
   zodat het donkere thema hem meeneemt. */
/* Een suggestie van de app, naast de sectie waar hij over gaat. Ingesprongen
   en met een eigen rand, zodat hij bij het tekstvak hoort en er niet in staat. */
.fc-chipkaart {
  margin-top: 10px;
  margin-left: 14px;
  padding: 10px 12px;
  border: 1px solid var(--fc-blue);
  border-left-width: 3px;
  border-radius: 10px;
  background: var(--fc-pale);
}
.fc-button.fc-klein {
  padding: 4px 10px;
  font-size: 12px;
}

.fc-chip[data-tone='ai'] {
  background: var(--fc-pale);
  border-color: var(--fc-blue);
  color: var(--fc-blue-ink);
}

.fc-empty {
  background: var(--fc-paper);
  border: 1px dashed var(--fc-line);
  border-radius: var(--fc-radius);
  padding: 34px;
  text-align: center;
  color: var(--fc-muted);
  display: grid;
  gap: 12px;
  justify-items: center;
}

/* Two ways a brainstorm gets in: the recording, or a transcript somebody
 * already has. They are one pattern because they are one decision, and the
 * dashed border is the app's existing "nothing here yet" language (.fc-empty)
 * rather than a second visual idea for the same thing.
 *
 * The zone IS the button: keyboard reach, focus ring and Enter all come from
 * the element being a real <button>, and the hidden file input is only the
 * mechanism. A div with a click handler would leave anybody on a keyboard
 * with no way in.
 */
.fc-dropzones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 14px;
}
/* One zone does not become a banner. Two sit side by side and fill the width
 * between them; a single one stretched over 1440px reads as a page state
 * rather than as something to drop a file on. */
.fc-dropzones[data-een] {
  max-width: 520px;
}
.fc-dropzone {
  background: var(--fc-paper);
  border: 1px dashed var(--fc-line);
  border-radius: var(--fc-radius);
  padding: 22px 18px;
  min-width: 0;
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
.fc-dropzone:hover {
  border-color: var(--fc-line-strong);
  background: var(--fc-bg);
}
.fc-dropzone:active {
  transform: translateY(1px);
}
/* Dragging a file over it. Same signal as hover, one step louder, and it has
 * to survive the pointer being over a child element. */
.fc-dropzone[data-erover='true'] {
  border-color: var(--fc-blue);
  border-style: solid;
  background: var(--fc-pale);
}
.fc-dropzone[data-bezig='true'] {
  cursor: progress;
  opacity: 0.7;
}
.fc-dropzone:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.fc-dropzone-kop {
  font-weight: 700;
  font-size: 13px;
}
.fc-dropzone-wat {
  font-size: 11px;
  color: var(--fc-muted);
  max-width: 34ch;
}
.fc-dropzone-soorten {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fc-muted);
}

/* A face instead of two letters.
 *
 * The initials stay underneath the picture, so one that will not load leaves
 * a letter rather than a hole.
 */
/* A face, three times the size of the initials it replaces, and out of the
 * circle (Bas, 2026-09-16).
 *
 * These are cut-outs with a transparent background, so a ring around them
 * added a frame to something that was already a shape. Without it the figure
 * sits on the page like a sticker. `contain`, not `cover`, and the whole
 * picture rather than a crop of it: Bas wants the laptop, the television and
 * the Emmys in there, because that is what makes it him and not a passport
 * photo.
 *
 * The initials keep their circle: two letters need one to be anything.
 */
.fc-user[data-foto='true'] {
  width: 90px;
  height: 90px;
  border: none;
  border-radius: 0;
  background: none;
  overflow: visible;
  padding: 0;
  /* The initials are still in there as a fallback for a picture that will not
   * load. With one, they have to be invisible rather than stacked on top of
   * it, which is what a letter above every head was.
   */
  font-size: 0;
  color: transparent;
  /* No negative margin: a picture of 90px needs 90px, and pulling it out of
   * its own row made every figure lean into the next one.
   */
  margin: 0;
}
.fc-user[data-foto='true'] img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.fc-fotoknop {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
}
.fc-fotoknop-hint {
  font-size: 10px;
  color: var(--fc-muted);
  opacity: 0;
  transition: opacity 0.14s ease;
}
.fc-fotoknop:hover .fc-fotoknop-hint,
.fc-fotoknop:focus-visible .fc-fotoknop-hint {
  opacity: 1;
}
.fc-fotoknop:focus-visible {
  outline: 3px solid var(--fc-focus);
  outline-offset: 3px;
}

/* The recording, and the transcript it produced.
 *
 * Both live inside a session card, and both are things you look AT while
 * doing something else (typing a name, checking a claim), so neither may
 * shout. The transcript is a <details> because three of them open at once
 * turns a session into a wall of text.
 */
.fc-speler {
  width: 100%;
  height: 34px;
}
.fc-sprekernr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--fc-pale);
  color: var(--fc-blue-ink);
  font-size: 10px;
  font-weight: 700;
  flex: none;
}
.fc-sprekercitaat {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 34ch;
}

/* Who is who, on one line under the player's own timeline.
 *
 * It used to be a stack of full-height rows with the first thing each voice
 * says printed next to it, and it pushed the transcript below the fold. This
 * is the same information at the size it deserves: a number, a name, and the
 * button that plays that voice. The quote moved into the button's tooltip.
 *
 * It wraps rather than scrolls. Four speakers still fit on a laptop; six on a
 * phone become three lines, which is the right answer.
 */
.fc-sprekersregel {
  display: flex;
  align-items: center;
  gap: 8px 14px;
  flex-wrap: wrap;
}
.fc-sprekers {
  display: grid;
  gap: 7px;
}
.fc-spreker {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.fc-sprekersregel .fc-sprekernr {
  width: 17px;
  height: 17px;
  font-size: 9px;
}
.fc-sprekerveld {
  width: 132px;
  min-height: 28px;
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 6px;
}
.fc-sprekerspeel {
  flex: none;
  border: 1px solid var(--fc-line);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fc-blue);
  background: var(--fc-paper);
  white-space: nowrap;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    transform 0.08s ease;
}
.fc-sprekerspeel:hover {
  background: var(--fc-pale);
  border-color: var(--fc-line-strong);
}
.fc-sprekerspeel:active {
  transform: translateY(1px);
}

/* The triangle in front of a title that opens.
 *
 * `display: flex` on the summary drops the browser's own marker, so three
 * blocks that open and close looked exactly like three blocks that do not.
 * Drawn rather than typed: a glyph sits on the text baseline and jumps a
 * pixel when the block opens. Only `transform` animates.
 */
.fc-transcript > summary,
.fc-samenvatting > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 2px;
  font-weight: 700;
  font-size: 12px;
  border-radius: 7px;
  list-style: none;
}
.fc-transcript > summary::-webkit-details-marker,
.fc-samenvatting > summary::-webkit-details-marker {
  display: none;
}
.fc-transcript > summary::before,
.fc-samenvatting > summary::before {
  content: '';
  flex: none;
  width: 0;
  height: 0;
  margin-right: -2px;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  opacity: 0.55;
  transition: transform 0.15s ease;
}
.fc-transcript[open] > summary::before,
.fc-samenvatting[open] > summary::before {
  transform: rotate(90deg);
}
.fc-transcript > summary:hover::before,
.fc-samenvatting > summary:hover::before {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .fc-transcript > summary::before,
  .fc-samenvatting > summary::before {
    transition: none;
  }
}
.fc-transcript > summary:hover,
.fc-samenvatting > summary:hover {
  color: var(--fc-blue-ink);
}
.fc-transcript > summary:focus-visible,
.fc-samenvatting > summary:focus-visible {
  outline: 3px solid var(--fc-focus);
  outline-offset: 2px;
}
.fc-transcriptlijst {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 340px;
  overflow: auto;
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
}
.fc-transcriptregel {
  display: grid;
  grid-template-columns: 34px 46px minmax(70px, auto) minmax(0, 1fr);
  gap: 8px;
  padding: 6px 10px;
  font-size: 11px;
  line-height: 1.5;
  border-bottom: 1px solid var(--fc-line);
}
.fc-transcriptregel:last-child {
  border-bottom: none;
}
.fc-transcriptregel[data-klikbaar='true'] {
  cursor: pointer;
}
.fc-transcriptregel[data-klikbaar='true']:hover {
  background: var(--fc-pale);
}
.fc-transcriptnr,
.fc-transcripttijd {
  color: var(--fc-muted);
  font-variant-numeric: tabular-nums;
}
.fc-transcriptnaam {
  font-weight: 700;
}
/* An imported original, paragraph by paragraph.
 *
 * Not the transcript's grid: a transcript line is one spoken turn and a
 * paragraph is a paragraph, so the number hangs in its own narrow column and
 * the text runs at a readable measure underneath nothing. Taller than the
 * transcript on purpose - somebody reads this to check a claim.
 */
.fc-alinealijst {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 460px;
  overflow: auto;
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
}
.fc-alinea {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  padding: 7px 12px;
  font-size: 12px;
  line-height: 1.65;
}
.fc-alinea + .fc-alinea {
  border-top: 1px solid var(--fc-line-soft);
}
.fc-alineanr {
  color: var(--fc-muted);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  /* on the first line of the paragraph, not floating beside its middle */
  line-height: 1.8;
}
/* Which slide the paragraphs under it are on. Said once, not per line. */
.fc-alineadia {
  position: sticky;
  top: 0;
  background: var(--fc-pale);
  color: var(--fc-blue-ink);
  padding: 5px 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-top: 1px solid var(--fc-line);
}
.fc-alinealijst > .fc-alineadia:first-child {
  border-top: 0;
}

@media (max-width: 560px) {
  /* The cover goes ABOVE the title instead of beside it.
   *
   * `.fc-kopbeeld` is a fixed 336px with `flex: none`, and at 375px the page
   * has 343px to give: the title column was pushed 128px off the right edge of
   * the body. Nobody saw it because the screenshot tool asked for 375 without
   * `screenWidth`, so Chrome laid the page out at 503 and scaled it down to
   * fit - a page that looks whole and is not. Stacking is the fix; the cover
   * keeps its 16:9 and simply stops being 336px wide. */
  .fc-kopmetbeeld {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .fc-kopbeeld {
    width: 100%;
    max-width: 336px;
  }
  /* Onder de omslag, dus links uitgelijnd en niet tegen de rechterrand. */
  .fc-kopstand {
    justify-items: start;
    text-align: left;
  }
  /* Number, time and name keep one line between them; the sentence gets the
   * full width underneath. It used to have no column of its own and landed in
   * the 30px one, which printed the transcript a word per line. */
  .fc-transcriptregel {
    grid-template-columns: 30px 42px minmax(0, 1fr);
    gap: 4px 8px;
  }
  .fc-transcripttekst {
    grid-column: 1 / -1;
  }
  .fc-alinea {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 8px;
    padding: 7px 10px;
  }
  .fc-sprekercitaat {
    display: none;
  }
  .fc-spreker {
    flex: 1 1 100%;
  }
  .fc-sprekerveld {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* The wishlist.
 *
 * A dialog rather than a div-with-a-backdrop: ::backdrop, Escape, the focus
 * trap and the top layer are all free, and every one of them is a thing that
 * gets forgotten when it is hand-built.
 */
.fc-dialoog {
  border: none;
  border-radius: var(--fc-radius);
  background: var(--fc-paper);
  color: var(--fc-ink);
  padding: 22px;
  width: min(520px, calc(100vw - 32px));
  box-shadow: var(--fc-shadow-lift);
}
.fc-dialoog::backdrop {
  background: rgb(9 16 28 / 45%);
}

/* Een beeld uit de galerij kiezen voor een vak op een dia (Bas, 2026-09-23).
 * Breder dan een vraag: het zijn beelden, en je kiest door te kijken. */
.fc-dialoog.fc-galerijkiezer {
  width: min(980px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
}
.fc-galerijraster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 14px;
}
.fc-galerijkeuze {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 6px;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--fc-paper);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.fc-galerijkeuze img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 6px;
  background: var(--fc-bg);
}
.fc-galerijkeuze:hover:not(:disabled) {
  border-color: var(--fc-green);
}
.fc-galerijkeuze:focus-visible {
  outline: 2px solid var(--fc-focus);
  outline-offset: 2px;
}
.fc-galerijkeuze:active:not(:disabled) {
  transform: scale(0.98);
}
.fc-galerijkeuze:disabled {
  opacity: 0.45;
  cursor: default;
}

/* A question about money, asked by this app.
 *
 * Narrower than the wishlist and tighter, because it is read in two seconds
 * and answered: the amount is the heading, the reason is one grey line under
 * it, and the two buttons sit where a person's hand already is.
 */
.fc-vraag {
  width: min(420px, calc(100vw - 32px));
}
.fc-vraag-inhoud {
  display: grid;
  /* minmax(0, 1fr): een lange naam in de kop of op een knop rekt het venster niet buiten beeld (Bas, 2 okt: een stem met een
   * naam van zestig tekens duwde Beluister half van het scherm) */
  grid-template-columns: minmax(0, 1fr);
  gap: 11px;
}
.fc-vraag-inhoud h3 { overflow-wrap: anywhere; }
.fc-vraag .fc-button { max-width: 100%; white-space: normal; }
/* Kopie maken (Bas, 2 okt): drie knoppen naast elkaar, dus iets breder dan een gewone vraag */
.fc-vraag.fc-pr-kopievenster { width: min(520px, calc(100vw - 32px)); }
.fc-pr-kopieknoppen { justify-content: flex-end; margin-top: 4px; }
/* de aanwijzing bij Opnieuw laten schrijven: vier regels, niet de 160px van textarea.fc-input */
.fc-vraag textarea.fc-input.fc-vraag-tekstvak { min-height: 0; resize: vertical; }
/* Keuzes in een bevestigingsvenster, in plaats van een alinea die uitlegt wat
 * er blijft staan (Bas, 2026-09-19). Ze staan aan; de rode regel eronder komt
 * pas als je er een uitzet, want dan is er iets te vertellen. */
.fc-schakelaars {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  background: var(--fc-bg);
  border-radius: 8px;
}
.fc-schakelrij {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.fc-schakelrij label {
  font-weight: 700;
  cursor: pointer;
}
.fc-schakelrij [data-toon='fout'] {
  padding-left: 25px;
}

.fc-vraaglijst {
  margin: 0;
  padding-left: 17px;
  font-size: 11px;
  line-height: 1.7;
  color: var(--fc-muted);
  max-height: 180px;
  overflow: auto;
}

/* The hint above the version number. Quiet enough to ignore, findable enough
 * to try once. */
.fc-wenshint {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 7px;
  background: none;
  /* less one pixel for the transparent border, so the text lands on the edge
   * and not the box. See --fc-rail-inset. */
  padding: 6px 7px 6px calc(var(--fc-rail-inset, 8px) - 1px);
  font: inherit;
  font-size: 11px;
  color: var(--fc-muted);
  cursor: pointer;
  text-align: left;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.fc-wenshint:hover {
  background: var(--fc-bg);
  border-color: var(--fc-line);
  color: var(--fc-ink);
}
.fc-wenshint:active {
  transform: translateY(1px);
}
.fc-wensblok {
  display: grid;
  gap: 2px;
}
.fc-wenslink {
  display: block;
  border-radius: 7px;
  padding: 5px 8px 5px var(--fc-rail-inset, 8px);
  font-size: 11px;
  color: var(--fc-muted);
  text-decoration: none;
  transition: background 0.14s ease, color 0.14s ease;
}
.fc-wenslink:hover {
  background: var(--fc-bg);
  color: var(--fc-ink);
}
.fc-wenslink[data-current='true'] {
  background: var(--fc-pale);
  color: var(--fc-blue-ink);
  font-weight: 700;
}

.fc-kbd {
  margin-left: auto;
  border: 1px solid var(--fc-line);
  border-bottom-width: 2px;
  border-radius: 5px;
  /* Ruimer, want ⇧⌥W las als één vlek (Bas, 2026-09-23). */
  padding: 2px 7px;
  /* Het systeemlettertype en niet monospace: daarin was de ⇧ half zo groot. */
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  white-space: nowrap;
}

/* Het vinkje van de woordenlijst (Structuur, 20 okt): grijs en open, groen en vol als de term is goedgekeurd. */
.fc-vink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  padding: 0;
  border: 1px solid var(--fc-line-strong);
  border-radius: var(--fc-radius-pil);
  background: var(--fc-paper);
  color: var(--fc-line-strong);
  cursor: pointer;
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease, transform 0.14s ease;
}
.fc-vink:hover:not(:disabled) {
  color: var(--fc-green);
  border-color: var(--fc-green-line);
}
.fc-vink:focus-visible {
  outline: 2px solid var(--fc-focus);
  outline-offset: 2px;
}
.fc-vink:active:not(:disabled) {
  transform: scale(0.94);
}
.fc-vink[data-aan='true'] {
  background: var(--fc-green);
  border-color: var(--fc-green);
  color: var(--fc-paper);
}
.fc-vink:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.fc-vink[data-busy='true'] {
  opacity: 0.7;
  cursor: progress;
}

/* One wish: the heart, then the sentence and who wanted it. */
.fc-wens {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 13px;
  align-items: start;
}
.fc-hart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--fc-line);
  border-radius: 999px;
  background: var(--fc-paper);
  color: var(--fc-muted);
  padding: 0;
  transition: color 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
button.fc-hart {
  cursor: pointer;
}
button.fc-hart:hover {
  color: var(--fc-red);
  border-color: var(--fc-red-line);
}
button.fc-hart:active {
  transform: scale(0.94);
}
.fc-hart[data-gedaan='true'] {
  color: var(--fc-red);
  border-color: var(--fc-red-line);
  background: var(--fc-red-soft);
}
.fc-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--fc-red-soft);
  color: var(--fc-red);
  padding: 2px 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.fc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.fc-table th {
  text-align: left;
  color: var(--fc-muted);
  font-weight: 700;
  padding: 8px 10px;
  border-bottom: 1px solid var(--fc-line);
}
.fc-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--fc-line-soft);
  vertical-align: top;
}
.fc-scroll {
  overflow-x: auto;
}

.fc-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: grid;
  gap: 8px;
  max-width: min(380px, calc(100vw - 36px));
}
.fc-toast > div {
  background: var(--fc-ink);
  color: var(--fc-on-blue);
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 11px;
  box-shadow: var(--fc-shadow-lift);
  animation: fc-rise 0.2s ease both;
}
.fc-toast > div[data-tone='fout'] {
  background: var(--fc-red);
}

/* The genre of a format, and the story order it buys.
 *
 * Four cards, one pressed. The pattern is `.fc-kleur`'s: a real button with
 * aria-pressed, not a radio, so the pressed state is one attribute in both the
 * markup and the stylesheet and a screen reader is told the same thing the eye
 * is. Eight states, like every other interactive element here: default, hover,
 * focus-visible, active, pressed, disabled; busy and the two outcomes belong to
 * the button that confirms, not to the choice.
 */
.fc-genres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}
.fc-genrekaart {
  min-width: 0;
  text-align: left;
  display: grid;
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  background: var(--fc-paper);
  color: inherit;
  cursor: pointer;
  overflow-wrap: anywhere;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    transform 0.08s ease;
}
.fc-genrekaart:hover:not(:disabled) {
  background: var(--fc-bg);
  border-color: var(--fc-line-strong);
}
.fc-genrekaart:active:not(:disabled) {
  transform: translateY(1px);
}
.fc-genrekaart[aria-pressed='true'] {
  border-color: var(--fc-blue);
  background: var(--fc-pale);
}
.fc-genrekaart:disabled {
  opacity: 0.55;
  cursor: default;
}
.fc-genrenaam {
  font-weight: 700;
  font-size: 12px;
}
.fc-genrevoorbeeld {
  font-size: 11px;
  color: var(--fc-muted);
}
.fc-genrevraag {
  font-size: 11px;
  color: var(--fc-blue-ink);
}
/* The order itself, wherever it is shown read-only: the deck screen shows the
 * text the next generation will actually send, so nobody has to trust a label. */
.fc-verhaallijn {
  white-space: pre-wrap;
  font-size: 11px;
  line-height: 1.6;
  color: var(--fc-muted);
  margin: 0;
  overflow-wrap: anywhere;
}

/* The number in front of a recording: which brainstorm came first. */
.fc-opnamenr {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 11px;
  color: var(--fc-muted);
  background: var(--fc-bg);
  border: 1px solid var(--fc-line);
  border-radius: 6px;
  padding: 3px 7px;
  flex: none;
}

/* A slide in the deck editor: draggable, with a grip that says so.
 *
 * Bas, 2026-09-19: "ik vind de slides kaarten onduidelijk om te zien waar
 * slide 1 begint en eindigt vanwege weinig ruimte en dezelfde kleur als de
 * achtergrond. Ik zou het liever veel compacter zien ook (zoals breakdown bij
 * Auto Explainer in Mission Control)."
 *
 * Both halves of that are one decision: these are rows in a list, not cards on
 * a page. A white panel inside the white Breakdown panel has nothing to mark
 * its edge but a shadow at 2% - so the edge is a hairline and the fill is the
 * page tint, and the padding drops from a card's 21px to a row's 8/12. A shut
 * slide is then one line tall, and thirty of them fit on a screen.
 */
.fc-diakaart {
  cursor: default;
  gap: 10px;
  padding: 8px 12px;
  /* Een dia is een blad: wit met een hairline eromheen. De linkerrand was een
   * dik kader van 3px; die is nu een streep BINNEN de kaart (`inset`) op de
   * dia die openstaat, zodat een dichte en een open dia dezelfde buitenmaat
   * houden en de rij niet verspringt bij het openklappen. */
  background: var(--fc-paper);
  border: 1px solid var(--fc-line);
  border-radius: 16px;
  min-width: 0;
  /* DE KAART MEET ZICHZELF (2026-09-24). De kolommen en de titelbalk
   * schakelden op de breedte van het VENSTER, maar de zijbalk neemt daar 340
   * pixels van af: op 768 was de kaart 428 breed en stond hij toch in twee
   * kolommen van 191, met zeven van de twintig tekstvakken afgekapt. Nu
   * schakelt alles in de kaart op de breedte van de kaart zelf
   * (`@container dia`), gemeten op 320 tot 1440. */
  container: dia / inline-size;
}
/* De dia waaraan gewerkt wordt is een GETINT blad met een streep langs de
 * linkerkant, in plaats van een wit blad met een dik kader. De velden erop
 * zijn zelf licht (`--fc-veld`), dus ze blijven zichtbaar op die tint. */
.fc-diakaart[data-open='true'] {
  background: var(--fc-pale);
  border-color: var(--fc-pale-line);
  box-shadow: inset 3px 0 0 var(--fc-accent);
}
.fc-diakaart:hover {
  border-color: var(--fc-line-strong);
}
/* De tekstvakken van een slide hoeven de 160px van een longread-vak niet.
 * Een kop is één regel en een beeldonderwerp twee, en met acht van die vakken
 * open is een slide anders twee schermen hoog - precies het tegenovergestelde
 * van "veel compacter". Ze blijven met de hand groter te trekken. */
.fc-diabody textarea.fc-input {
  min-height: 62px;
  /* Zo hoog als de tekst (2026-09-24): een toelichting of "Wat zien we?" van
   * drie regels stond in een vak van twee, en wat eronder viel zag niemand.
   * Een browser zonder `field-sizing` houdt het vak zoals het was: met de
   * hand groter te trekken. */
  field-sizing: content;
  max-height: 420px;
}

/* --- Een open slide in drie kolommen -------------------------------------
 * Bas, 2026-09-19: *"kun je slide cards zo indelen dat er 3 kolommen inzitten?
 * Want het wordt zo lang allemaal en het kan volgens mij veel compacter."*
 *
 * Onder elkaar was Cijfers dertien velden lang, en dat is één slide van twee
 * schermen. `.fc-gap` is al een raster van één kolom, dus dit zet er alleen
 * meer kolommen in - geen tweede opmaakmodel ernaast.
 *
 * `align-items: start` omdat velden niet even hoog zijn: zonder dit rekt een
 * keuzevak zich uit tot de hoogte van het tekstvak ernaast.
 *
 * `minmax(0, 1fr)` en niet `1fr`: een rastercel is standaard zo breed als zijn
 * inhoud, en één lange regel in een tekstvak duwt de hele rij dan de kaart uit.
 *
 * `fc-breed` pakte de volle rij. Sinds 2026-09-20 draagt niets in een
 * slidekaart die klasse meer: de notities staan bij de tekst en de
 * beeldplekken bij het beeld, en beide kolommen dragen ze prima. De regel
 * blijft staan voor wat er later niet in een derde past.
 */
/* Drempels op de binnenmaat van de kaart: drie kolommen vanaf 870 (elke kolom
 * minstens 277), twee vanaf 520 (elke kolom minstens 250), anders één. Op een
 * venster van 1100 waren het drie kolommen van 231; nu twee van 355. */
@container dia (min-width: 870px) {
  .fc-diabody {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 20px;
    align-items: start;
  }
}
@container dia (min-width: 520px) and (max-width: 869.98px) {
  .fc-diabody {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
    align-items: start;
  }
}
@container dia (min-width: 520px) {
  .fc-diabody > .fc-breed {
    grid-column: 1 / -1;
  }
}

/* --- Een open pitchstap in twee groepen (PITCH-PLAN §6) --------------------
 * Links wat de stap IS (kop en doel, onder elkaar), rechts wat er GEZEGD
 * wordt (de alinea's in één vak). De tekst krijgt twee keer de ruimte van de
 * kop: dat is waar het werk zit. `minmax(0, …)` om dezelfde reden als bij de
 * slidekaart: een lange regel duwt anders de rij de kaart uit. Onder 720px
 * staan de twee groepen onder elkaar, in leesvolgorde. */
@media (min-width: 720px) {
  .fc-pitchbody {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 14px 20px;
    align-items: start;
  }
}
.fc-pitchbody textarea.fc-pitchtekst {
  min-height: 180px;
}
/* De kop van een dichte stap staat in de gewone letter, niet gedempt: het is
 * de ene regel waaraan je een stap herkent. Het doel ernaast is gedempt en
 * LOOPT DOOR (Bas, 2026-09-22: "ik wil ook het doel zien in de collapsed
 * state"): een doel is één zin en die is langer dan de helft van de balk, dus
 * afkappen met puntjes laat precies het stuk weg dat je wilde lezen. */
.fc-diaregel.fc-pitchkop {
  color: var(--fc-ink);
  font-weight: 600;
}
.fc-diaregel.fc-pitchdoel {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* --- Splitsen en de AI over één stap (call-29-sep/01-pitch.md) --------------
 * DE GROEPEN, hardop. Drie, in leesvolgorde: (1) wat de stap IS, links; (2) wat er
 * GEZEGD wordt, rechts en twee keer zo breed, met daaronder de knop die op die tekst
 * werkt; (3) "Vraag de AI over deze stap", over de volle breedte eronder. Wat je
 * eerst ziet in een open stap is nog steeds de kop en het verhaal; de AI is het
 * laatste wat je bereikt, met opzet. De balken (wat de AI of het splitsen deed) en
 * de AI-groep pakken allebei de volle rij, anders landen ze in de smalle linkerkolom
 * van het raster hierboven. */
.fc-pitchvraag,
.fc-pitchbalk {
  grid-column: 1 / -1;
}
.fc-pitchbalk {
  align-items: center;
}
.fc-pitchvraagrij {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
/* Het vak mag krimpen tot 240px en dan pas onder de knop: een invoerregel die smaller is dan zijn eigen
 * voorbeeldvraag is geen vraagvak meer. */
.fc-pitchvraagrij > .fc-input {
  flex: 1 1 240px;
  min-width: 0;
}
.fc-pitchvraagrij > .fc-button {
  flex: 0 0 auto;
}
.fc-pitchchips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fc-pitchvraagstand:empty {
  display: none;
}
.fc-pitchsplits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
/* Terwijl de AI schrijft staat alles vast; een sleepgreep is geen knop en krijgt dat niet vanzelf. */
[data-vergrendeld] .fc-diagreep {
  pointer-events: none;
}

/* --- De groepen -----------------------------------------------------------
 * SCHERMONTWERP.md, "Leesvolgorde en groepering": het raster ligt op de
 * GROEPEN en nooit op de losse velden. Een groep is wat je in één handeling
 * verandert, en hij breekt niet over een kolomgrens - past hij niet, dan gaat
 * hij in zijn geheel naar de volgende rij.
 *
 * Geen randen en geen vlakken eromheen: een open slide heeft er al vijf, en
 * vijf kaders in een kaart in een kaart is precies de drukte die Bas op
 * 19 september wegwilde. Een kopje in de rustige mono van dit scherm is genoeg
 * om te zien waar iets begint.
 */
.fc-diagroep {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.fc-groepkop {
  margin: 0;
  font-family: Consolas, ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fc-muted);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--fc-line);
}
.fc-groepvelden {
  display: grid;
  gap: 12px;
  min-width: 0;
}
/* EEN GROEP IS EEN KOLOM (Bas, 2026-09-20).
 *
 * Hiervoor stonden er vijf groepen in een raster van drie, met uitzonderingen
 * per volgnummer: de tekstgroep pakte twee kolommen, de beeldgroep de hele
 * rij. Dat werkt zolang elke dia even veel tekst heeft, en dat is precies wat
 * een dia niet doet - Cijfers heeft dertien velden en een Openingsregel één,
 * dus lag op elke kaart iets anders op dezelfde plek.
 *
 * Nu zijn het er drie, ze zijn even breed, en ze staan in dezelfde volgorde:
 * de woorden, het beeld, de opties. Er is geen uitzondering per volgnummer
 * meer nodig, dus die zijn weg in plaats van bijgesteld. */
@container dia (min-width: 870px) {
  .fc-diabody > .fc-diagroep {
    grid-column: span 1;
  }
}
@container dia (min-width: 520px) and (max-width: 869.98px) {
  /* Twee kolommen: de woorden en het beeld naast elkaar, de opties eronder
   * over de volle breedte, waar hun vinkjes in twee kolommen passen. */
  .fc-diabody > .fc-diagroep:last-of-type {
    grid-column: 1 / -1;
  }
  .fc-diabody > .fc-diagroep:last-of-type > .fc-groepvelden {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}
/* De tekstvelden van een sjabloon.
 *
 * `auto-fit` met een ONDERGRENS, niet een vast aantal kolommen: hoe breed deze
 * groep is hangt af van het schermbreedtepunt én van of hij twee kolommen
 * overspant, en op 768px werd een cijferblok daardoor 111 pixels breed - een
 * toelichting van twee regels in een vak zo smal als het woord "Toelichting".
 * Gemeten, niet geschat. Met een ondergrens van 200px valt hij vanzelf terug
 * naar één kolom zodra er geen twee meer naast elkaar passen, op elk
 * breedtepunt, ook op de punten die er nog niet zijn. */
.fc-diagroep[data-blokken] > .fc-groepvelden {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* Eén blok is geen raster: dan is het gewoon het veld. */
.fc-diagroep[data-blokken='1'] > .fc-groepvelden {
  grid-template-columns: minmax(0, 1fr);
}
/* Een genummerde set blijft bij elkaar: cijfer 2, zijn label en zijn
 * toelichting onder elkaar in één blok, in de volgorde waarin je ze invult. */
/* De voorbeelden van een look (SLIDE-LOOKS-PLAN §2.4): hoogstens drie op een
 * rij, 16:9, klik opent groot. `minmax(0, 1fr)`: een beeld duwt de kolom
 * anders de kaart uit. */
.fc-lookvoorbeelden {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 6px 0;
}
.fc-lookvoorbeelden > p {
  grid-column: 1 / -1;
}
.fc-lookvoorbeeld {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--fc-line-strong);
  border-radius: 6px;
  cursor: zoom-in;
}
.fc-lookvoorbeeld:hover {
  border-color: var(--fc-accent);
}

/* De knoppen onder een beeldvak in een raster van gelijke vakken, niet in een
 * rij die afbreekt waar het uitkomt: "Opnieuw maken" en "Eigen beeld" op één
 * regel en "Uit de galerij" alleen eronder las als drie losse dingen. */
.fc-beeldknoppen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  gap: 8px;
}
.fc-beeldknoppen > .fc-button {
  white-space: nowrap;
  padding-left: 12px;
  padding-right: 12px;
}
.fc-veldblok {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  background: var(--fc-bg);
  border-radius: 7px;
}

/* --- De standregel in de titelbalk ---------------------------------------
 * Vaste maat, want dit is de enige tekst in die balk die per dia van lengte
 * verschilt, en daarmee de reden dat de twee kolommen ernaast op elke kaart
 * op een andere plek begonnen. Wat er niet in past staat in `title`. */
.fc-diastand {
  flex: none;
  /* 176 en niet 124: "beeld gekozen · 1 kandidaat" is de gewone stand en
   * werd op 124 afgekapt. Gemeten, 2026-09-24. */
  width: 176px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* De stand in de kleur van zijn woord, zodat een lijst van dertig dichte
 * slides te scannen is (mockup 4a): groen staat erop, blauw wacht op een
 * keuze, amber is onderweg, rood heeft nog niets. Een slide die zonder beeld
 * mag en er geen heeft blijft grijs: dat is geen werk dat nog moet. */
.fc-diastand[data-soort='klaar'] {
  color: var(--fc-green);
}
.fc-diastand[data-soort='kiezen'] {
  color: var(--fc-blue);
}
.fc-diastand[data-soort='bezig'] {
  color: var(--fc-amber);
}
.fc-diastand[data-soort='leeg'] {
  color: var(--fc-red);
}
@container dia (max-width: 459.98px) {
  .fc-diastand {
    width: auto;
  }
}

/* --- Het beeld bovenaan de tweede kolom ----------------------------------
 * Bas, 2026-09-20: *"In column 2 I want Beeld (black if empty)"*.
 *
 * `aspect-ratio` en niet een hoogte in pixels: de kolom is een derde van de
 * kaart en die breedte verschilt per scherm, dus een vaste hoogte zou het vak
 * op de ene breedte uitrekken en op de andere pletten. Zwart blijft zwart als
 * er niets is, zodat de kolom niet verspringt zodra er een beeld binnenkomt.
 *
 * `minmax(0, 1fr)` op de sporen, anders duwt een breed beeld de hele kolom
 * uit de kaart. */
.fc-diabeelden {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
}
.fc-diabeelden[data-aantal='2'],
.fc-diabeelden[data-aantal='3'],
.fc-diabeelden[data-aantal='4'] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fc-diabeeld {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  min-width: 0;
  border: 1px solid var(--fc-line-strong);
  border-radius: 6px;
  background: var(--fc-ink);
}
img.fc-diabeeld {
  cursor: zoom-in;
}

/* --- Het vel zoals het eruit gaat zien, bij de opties --------------------
 * Bas, 2026-09-20: *"rechts bij opties zou ik willen zien hoe de slide eruit
 * gaat zien inclusief teksten en logos"*.
 *
 * Hetzelfde vel als de miniatuur in de titelbalk en als het grote voorbeeld:
 * 960x540 getekend en daarna geschaald met `--zoom`. De hoogte wordt in JS
 * meegezet, want een geschaald element houdt in de opmaak zijn oude ruimte -
 * zonder dat staat er 540 pixels aan lege plek onder. */
.fc-diavoorbeeld {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--fc-line-strong);
  border-radius: 6px;
  background: var(--fc-ink);
}
.fc-diabeeld[data-leeg='true'] {
  border-style: dashed;
}
.fc-diakaart[data-open='true'] .fc-veldblok {
  background: var(--fc-bg);
}


/* --- De slide zelf, klein, in de titelbalk -------------------------------
 * Bas, 2026-09-19: *"ik zou ook graag al een preview van de slide zien in de
 * topbalk. Als er nog geen plaatje is dan is die zwart met een preview van de
 * teksten."*
 *
 * Het vel wordt op 960x540 getekend (de ene maat waarop een punt een pixel is)
 * en daarna geschaald met `--zoom` - dezelfde schakelaar die het grote
 * voorbeeld gebruikt, en niet een tweede manier ernaast. Schalen en niet
 * kleinere getallen: dan blijft het dezelfde opmaak, en niet een tweede,
 * kleinere versie ervan die op andere plekken afbreekt.
 *
 * De houder heeft een vaste maat en `overflow: hidden`, want een geschaald
 * element houdt in de opmaak zijn oude ruimte: zonder dit staat er 960 bij 540
 * pixels aan lege plek in de titelbalk.
 */
.fc-diaminiatuur {
  flex: none;
  /* 168 en niet 104 (Bas, 2026-09-20: *"The thumbnail can be bigger"*). De
   * naam van het sjabloon stond hiernaast en is weg, dus deze maat kost de
   * balk niets. 16:9 afgerond op de hele pixel. */
  width: 168px;
  height: 95px;
  overflow: hidden;
  border: 1px solid var(--fc-line-strong);
  border-radius: 4px;
  /* De kaderkleur van het format vult het vel zelf; dit is alleen wat er
   * doorheen schemert op de halve pixel aan de rand. */
  background: var(--fc-ink);
}
/* Onder de 560px is de titelbalk al twee regels; een miniatuur erbij maakt er
 * drie van, en dan is het compacter maken juist ongedaan gemaakt. */
@container dia (max-width: 459.98px) {
  .fc-diaminiatuur {
    display: none;
  }
}
.fc-diakaart.fc-dragging {
  opacity: 0.5;
}
/* The number, in the breakdown's own voice: mono, caps, tracked out, so the
 * eye finds the start of a slide without reading it. */
.fc-dianummer {
  flex: none;
  font-family: Consolas, ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--fc-muted);
}
.fc-diakaart[data-open='true'] .fc-dianummer {
  color: var(--fc-ink);
}
.fc-diagreep {
  cursor: grab;
  color: var(--fc-muted);
  font-size: 14px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 5px;
  user-select: none;
}
.fc-diagreep:hover {
  background: var(--fc-bg);
  color: var(--fc-ink);
}
.fc-diagreep:active {
  cursor: grabbing;
}
.fc-diavouw {
  border: 0;
  background: none;
  color: var(--fc-muted);
  cursor: pointer;
  /* 32 bij 32: de pijl was een doel van 17 bij 21. De hele titelbalk klapt
   * ook open (`data-klik`), maar dit blijft de knop voor het toetsenbord. */
  min-width: 32px;
  min-height: 32px;
  justify-content: center;
  padding: 3px 5px;
  border-radius: 5px;
  line-height: 1;
  display: flex;
  align-items: center;
  flex: none;
}
.fc-diavouw:hover {
  background: var(--fc-bg);
  color: var(--fc-ink);
}
.fc-diavouw:focus-visible {
  outline: 2px solid var(--fc-focus);
  outline-offset: 2px;
}
/* --- De titelbalk van een slide -----------------------------------------
 * Bas, 2026-09-19: "de slides moeten zelfs in collapsed state ook de tekst
 * laten zien en de prompt. naast elkaar, niet onder elkaar."
 *
 * Drie blokken: links wat de slide IS (greep, pijl, nummer, sjabloonnaam),
 * rechts wat je ermee DOET (stand, plus, prullenbak), en daartussen de twee
 * kolommen die de balk zijn nut geven. Alleen het middenblok krimpt; de twee
 * buitenblokken houden hun maat, anders is de eerste die wegvalt de knop.
 */
.fc-diakop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 10px;
  min-width: 0;
}
.fc-diakopvast {
  flex: 0 0 auto;
  min-width: 0;
}
/* De titelbalk opent de slide, niet alleen de pijl (2026-09-24): wie een dia
 * zoekt, klikt op wat hij herkent, de miniatuur of de tekst. De knoppen, de
 * greep en de stand doen hun eigen ding. */
.fc-diakop[data-klik] :is(.fc-dianummer, .fc-diaminiatuur, .fc-diasamenvatting) {
  cursor: pointer;
}
.fc-diakop[data-klik]:hover .fc-diasamenvatting .fc-diaregel:first-child:not([data-leeg]) {
  color: var(--fc-ink);
}
.fc-diakop[data-klik]:hover .fc-diaminiatuur {
  border-color: var(--fc-accent);
}
/* De knoppen staan rechts, ook als de regel is afgebroken. */
.fc-diakop > .fc-diakopvast:last-child {
  margin-left: auto;
}
/* `minmax(0, 1fr)` en niet `1fr`: een rastercel is standaard zo breed als zijn
 * inhoud, en een prompt van tachtig woorden duwde de hele rij dan de pagina
 * uit in plaats van af te breken op de punt. */
.fc-diasamenvatting {
  /* Basis 0 en niet `auto`. In een flexrij die mag afbreken wordt een regel
   * gevuld met de items op hun EIGEN maat, en de eigen maat van dit blok is
   * twee volle zinnen - dus duwde het de knoppen naar een tweede regel zodra
   * de miniatuur groter werd. Met basis 0 telt het als niets mee bij die
   * beslissing en groeit het daarna in wat er over is: de balk blijft één
   * regel, en dit blok krimpt in plaats van de rest weg te duwen. */
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
/* De prompt staat rechts en is duidelijk het andere ding: een streepje ervoor
 * in plaats van een tweede kolom die als vervolg van de eerste leest. */
.fc-diaprompt {
  border-left: 1px solid var(--fc-line);
  padding-left: 14px;
}
.fc-diaregel[data-leeg='true'] {
  opacity: 0.55;
  font-style: italic;
}
/* De naam van het sjabloon stond hier als pilletje in de titelbalk. Weg sinds
 * 2026-09-20: hij is precies de "opmaak" die Bas daar niet wilde zien, en zijn
 * wisselende lengte was de reden dat de balk per dia van maat verschoot. Het
 * keuzevak heet nu "Vorm" en staat in de derde kolom. */
/* De zin onder het sjabloonkeuzevak. Hij stond al in layouts.js en reisde al
 * mee in het deck; hij werd alleen nooit getoond, en zonder hem zeggen acht
 * namen als "Tekstkader" en "Openingsregel" niets. */
.fc-sjabloonuitleg {
  display: block;
}

/* Een knop die alleen een pictogram draagt. Vierkant, zodat afspelen, plus en
 * prullenbak naast elkaar dezelfde maat houden, en met een echte naam in
 * `aria-label` - een pictogram zonder woord is voor een schermlezer niets.
 *
 * "Vierkant" stond hier al sinds september en was het NIET: er stond alleen
 * een breedte, en de hoogte kwam uit de knopvulling, dus het waren liggende
 * rechthoekjes. Bas, 2026-09-20: *"the frames they're in should be square,
 * not rectangular"*. Nu staan beide maten er, en `box-sizing` is verderop al
 * `border-box`, dus de rand telt mee. */
.fc-iconknop {
  flex: none;
  /* ALLE VIER DE MATEN, WANT `min-height` WINT VAN `height`.
   *
   * Bas, 2026-09-20, na de eerste poging: *"de play icon en + icon hebben nog
   * steeds geen vierkant en zijn nog steeds rechthoekig"*. Klopt: `.fc-button`
   * zet `min-height: 38px`, en een minimum wint van een hoogte. Er stond dus
   * 30 breed naast 38 hoog. Nu staan breedte, hoogte en allebei de minima op
   * hetzelfde getal, en kan geen enkele regel er nog één kant van uitrekken.
   *
   * 34 en niet 30: kleiner dan de 38 die de andere knoppen hebben, maar nog
   * steeds een knop die je met een muis raakt. */
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  /* NIET de pilvorm van `.fc-button`. Op 34 bij 34 is een pil een rondje, en
   * Bas vroeg op 2026-09-20 juist om vierkante kaders om afspelen en plus. */
  border-radius: 10px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}
.fc-iconknop[data-gevaar='true'] {
  color: var(--fc-red);
}
.fc-iconknop[data-gevaar='true']:hover:not(:disabled) {
  border-color: var(--fc-red);
  background: var(--fc-red-soft);
}
/* DE PRULLENBAK WEEGT MINDER DAN DE TWEE ERNAAST (Bas, 2026-09-20: *"the trash
 * can should not have a frame and can be grey and smaller"*). Weggooien is
 * niet wat je op deze kaart komt doen, en een even zware knop als afspelen en
 * plus nodigt uit tot een klik die een venster moet tegenhouden.
 *
 * Grijs in rust, rood zodra je hem aanraakt: de waarschuwing hoort bij het
 * moment dat je erheen gaat, niet bij het scherm in ruststand. `focus-visible`
 * krijgt zijn kader terug, want een knop zonder rand die ook geen zichtbare
 * focus heeft is met het toetsenbord niet te vinden. */
.fc-iconknop[data-kaal='true'] {
  width: 26px;
  min-width: 26px;
  max-width: 26px;
  height: 26px;
  min-height: 26px;
  max-height: 26px;
  border-color: transparent;
  background: transparent;
  color: var(--fc-muted);
}
.fc-iconknop[data-kaal='true'] svg {
  width: 13px;
  height: 13px;
}
.fc-iconknop[data-kaal='true']:hover:not(:disabled) {
  border-color: transparent;
  background: transparent;
  color: var(--fc-red);
}
.fc-iconknop[data-kaal='true']:focus-visible {
  border-color: var(--fc-red);
}

/* Onder de 900px is er geen plek meer voor drie blokken naast elkaar: het
 * blok met de knoppen werd van de kaart geduwd en de tekst erlangs afgesneden.
 * Dan gaat de samenvatting naar zijn eigen regel eronder (`order: 3`, zodat
 * hij ONDER de knoppen komt en niet ertussen), en daar heeft hij de volle
 * breedte voor zijn twee kolommen.
 *
 * Onder de 560px passen ook die twee niet meer naast elkaar zonder dat er van
 * allebei drie woorden overblijven. Pas daar gaan ze onder elkaar, en dan is
 * het streepje ertussen een streep erboven. */
@container dia (max-width: 599.98px) {
  .fc-diasamenvatting {
    order: 3;
    flex: 1 1 100%;
  }
}
@container dia (max-width: 459.98px) {
  .fc-diasamenvatting {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .fc-diaprompt {
    border-left: 0;
    padding-left: 0;
  }
  /* Op een telefoon is een vinger geen muis: 40 bij 40, ook de prullenbak,
   * die daarbij zonder kader blijft en dus niet zwaarder oogt. */
  .fc-diakop .fc-iconknop,
  .fc-diakop .fc-iconknop[data-kaal='true'] {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
  }
}

/* The one line that says which slide this is when it is folded shut. */
.fc-diaregel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .fc-shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .fc-side {
    border-right: 0;
    border-bottom: 1px solid var(--fc-line);
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 14px;
    overflow-x: auto;
    /* A row, not a column: window-tall and sticky would take the whole screen.
     * The person goes with it, which is why the top bar keeps the avatar. */
    position: static;
    height: auto;
    overflow-y: visible;
  }
  .fc-side .fc-sidebottom,
  .fc-side .fc-sidegroup[data-hide-narrow],
  .fc-side .fc-railknop {
    display: none;
  }
  /* ...so the top bar carries the account menu instead. */
  .fc-topbar .fc-usertrigger-bare {
    display: inline-flex;
  }
  .fc-nav {
    grid-auto-flow: column;
    gap: 4px;
  }
  .fc-content {
    padding: 20px 16px 32px;
  }
  .fc-topbar {
    display: flex;
    padding: 14px 16px;
  }
  /* One column rather than two half-width cards: a genre's name and its first
   * question both have to stay readable, and they are what the choice is made
   * on. */
  .fc-genres {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The look of one format: two fonts, five colours, the mark. Two columns where
 * there is room and one where there is not, so the panel works at 320px
 * without a horizontal scrollbar. */
.fc-opmaakgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 12px;
  /* Een vak wordt niet uitgerekt tot de hoogte van zijn buurman: een select
   * van 300px hoog naast de groep hieronder was het eerste wat je zag. */
  align-items: start;
}
/* Eén groep in dat raster: de vier keuzes over hoe de foto's en de dia's
 * eruitzien, als één rastervak over de volle rij, met zijn kop erboven en
 * zijn velden in een eigen rij die op een smal scherm stapelt
 * (SCHERMONTWERP.md: het raster ligt op groepen, nooit op losse velden). */
.fc-opmaakgroep {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
}
.fc-opmaakgroep > .fc-groepkop {
  margin: 0;
}
.fc-opmaakgroepvelden {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 12px;
  align-items: start;
}
/* Een keuzevak is minstens zo breed als zijn langste keuze, en met de looks
 * van SLIDE-LOOKS-PLAN ("Antique Alchemical Etching") liep het daardoor onder
 * het vak ernaast door. Het vak krimpt mee; de tekst breekt af met puntjes. */
.fc-opmaakgroepvelden > * {
  min-width: 0;
}
.fc-opmaakgroepvelden select {
  min-width: 0;
}
.fc-opmaakgroepvelden > .fc-field {
  grid-template-columns: minmax(0, 1fr);
}
.fc-kleurrij {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* The swatch shows what the slide will actually use: the format's own colour,
 * or - dashed, so the difference is visible without reading - the house one. */
.fc-kleurstaal {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 1px solid var(--fc-line-strong);
  border-radius: 6px;
  background: var(--fc-paper);
}
.fc-kleurstaal[data-huisstijl='true'] {
  border-style: dashed;
}
.fc-input[aria-invalid='true'] {
  border-color: var(--fc-red);
}
.fc-small[data-toon='fout'] {
  color: var(--fc-red);
  min-height: 0;
}
.fc-small[data-toon='fout']:empty {
  display: none;
}

/* --- Input: informatie toevoegen, en wat er al binnenkwam ----------------
 * Bas's mockup van 2026-09-18 (SUMMARIES-AND-TRANSCRIPT-PLAN §6.0). Twee
 * koppen in gewone zinsvorm met een dubbele punt, niet de mono-eyebrow die de
 * rest van de app gebruikt: hij heeft ze zo getekend en dit scherm is het
 * eerste dat iemand ziet als hij materiaal komt brengen.
 */
.fc-invoerkop {
  margin: 26px 0 14px;
}
.fc-invoerkop:first-child {
  margin-top: 0;
}
.fc-invoerkop h2 {
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.01em;
}
.fc-invoerkop[data-lijn] {
  border-bottom: 1px solid var(--fc-line);
  padding-bottom: 10px;
}
.fc-invoerlijst {
  display: grid;
  gap: 8px;
}
/* Eén regel per ding dat binnenkwam. Dicht, want de lijst is het overzicht;
 * wat erin zit is een tweede vraag en staat één klik verderop. */
.fc-invoerregel {
  background: var(--fc-paper);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  padding: 12px 16px;
}
.fc-invoerregel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  min-width: 0;
}
.fc-invoerregel > summary::-webkit-details-marker {
  display: none;
}
.fc-invoerregel > summary strong {
  /* break-word, niet anywhere: anywhere hakte "tweede-brainstorm.m4a" op 320px
   * midden in een woord door tot "tweede-brainstor / m.m4a". Breken mag, maar
   * pas als er geen natuurlijke plek meer is. */
  overflow-wrap: break-word;
  min-width: 0;
}
/* Op een telefoon zakt het label onder de naam in plaats van ernaast te
 * blijven duwen: naast een naam van drie regels leest een pil als losse tekst. */
@media (max-width: 560px) {
  .fc-invoerregel > summary {
    flex-wrap: wrap;
  }
  .fc-invoerregel > summary > .fc-row {
    flex: 1 1 100%;
  }
}
.fc-invoerregel > summary:focus-visible {
  outline: 2px solid var(--fc-focus);
  outline-offset: 3px;
  border-radius: 6px;
}
.fc-invoerregel:hover {
  border-color: var(--fc-line-strong);
}
/* Het driehoekje draait mee met open en dicht. Een document heeft niets af te
 * spelen en houdt de ruimte leeg, zodat de nummers onder elkaar blijven staan. */
.fc-invoerdriehoek {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  color: var(--fc-muted);
  transition: transform 140ms var(--fc-ease-out, ease-out);
}
.fc-invoerregel[open] .fc-invoerdriehoek {
  transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
  .fc-invoerdriehoek {
    transition: none;
  }
}
/* Weghalen staat naast het label, niet als eerste ding dat opvalt: het is de
 * uitzondering, niet de handeling. Rood pas als de muis erop staat. */
.fc-textbutton[data-gevaar] {
  color: var(--fc-muted);
}
.fc-textbutton[data-gevaar]:hover,
.fc-textbutton[data-gevaar]:focus-visible {
  color: var(--fc-red);
}

/* --- Deck: vier vouwkaarten ----------------------------------------------
 * Bas, 2026-09-19: "Er zijn inklapbare kaarten. Ik wil dit als de kaarten."
 * Naar het auto-explainer-scherm in Mission Control - de stap waar je mee
 * bezig bent staat open, de stappen die af zijn zijn een titelbalk. Zonder
 * dat is het deckscherm vijf open panelen met veertig diakaarten eronder, en
 * staat het ding dat je moet doen ergens in het midden.
 *
 * De titelbalk is een DIV met een knop erin, nooit één grote knop: een kaart
 * met een eigen actie zou anders een knop in een knop zetten, en geen browser
 * is verplicht daar iets van te maken.
 */
.fc-vouwkaart {
  gap: 0;
  /* De titelbalk loopt van rand tot rand, dus de kaart houdt zijn padding niet
   * zelf vast: de balk en de body zetten hem allebei apart. */
  padding: 0;
  overflow: hidden;
}
/* LUCHT TUSSEN DE KAARTEN (Bas, 2026-09-19: "in het algemeen is er niet genoeg
 * ruimte tussen kaarten, en het voelt als een grote witte klodder"). Het
 * deckscherm hangt zijn kaarten rechtstreeks onder elkaar in een kale div, dus
 * ze raakten elkaar: drie witte vlakken zonder tussenruimte zijn één wit vlak.
 * Een geneste kaart doet hier niet aan mee - die zit al binnen een rand. */
.fc-vouwkaart:not(.fc-vouwgenest) {
  margin-top: 20px;
}
/* DE TITELBALK HEEFT KLEUR, DE BODY BLIJFT WIT (Bas, 2026-09-19: "alle
 * kaartkoppen mogen wat kleur hebben. Gewoon de standaardkleur? (Als ze
 * uitgeklapt zijn moet het deel eronder wel wit blijven.)"). De standaardkleur
 * van deze app is het bleke blauw dat ook de meldingen dragen. */
.fc-vouwkop {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
  background: var(--fc-pale);
  border-bottom: 1px solid var(--fc-line);
  padding: 11px 18px;
}
/* Een dichtgeklapte kaart is alleen die balk, dus dan hoort de rand eronder
 * niet: die zou een lijn zijn met niets eronder. */
.fc-vouwkaart:not([data-open='true']) .fc-vouwkop {
  border-bottom-color: transparent;
}
/* De body staat op papier, met de padding die de kaart eerst zelf had. */
.fc-vouwbody:not([hidden]) {
  background: var(--fc-paper);
  padding: 18px;
}
.fc-vouwknop {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  padding: 3px 4px;
  margin: -3px -4px;
  border-radius: 7px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}
/* De overline is in de rest van de app een eyebrow met iets eronder; hier is
 * hij de kop zelf, dus de marge eronder hoort bij de kaart, niet bij het
 * woord. */
.fc-vouwknop .fc-overline {
  margin-bottom: 0;
  color: var(--fc-ink);
  font-size: 13px;
  font-weight: 700;
  min-width: 0;
  overflow-wrap: anywhere;
}
.fc-vouwknop:hover {
  background: var(--fc-kop-hover);
}
.fc-vouwknop:hover .fc-vouwpijl {
  color: var(--fc-blue-ink);
}
.fc-vouwknop:focus-visible {
  outline: 2px solid var(--fc-focus);
  outline-offset: 2px;
}
.fc-vouwknop:active {
  transform: translateY(1px);
}
/* Bas, 2026-09-19: "de inklap-icoon naast Genre mag groter. Ik kan hem
 * nauwelijks zien. Dit zou voor alle inklapbare kaarten moeten gelden." Van
 * 10px naar 15px, en donkerder: hij is de knop van de kaart, niet een teken
 * ernaast. Eén regel, en elke vouw in de app gebruikt hem - ook die van een
 * dia, sinds die zijn eigen twee tekens inleverde. */
.fc-vouwpijl {
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1;
  color: var(--fc-ink);
  transition: transform 140ms ease;
}
.fc-vouwpijl[data-open='true'] {
  transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
  .fc-vouwpijl {
    transition: none;
  }
  .fc-vouwknop:active {
    transform: none;
  }
}
/* EEN KAART BINNEN EEN KAART IS GEEN KAART (Opmaak, sinds hij onder Look is
 * gaan zitten). Geen papier, geen schaduw, geen tweede blauwe balk: een
 * scheidingslijn en een titel, zodat het blok leesbaar is als een onderdeel
 * van Look in plaats van als een concurrent ervan. */
.fc-vouwgenest {
  margin-top: 4px;
  border-top: 1px solid var(--fc-line);
  border-radius: 0;
  overflow: visible;
}
.fc-vouwgenest .fc-vouwkop {
  background: none;
  border-bottom: 0;
  padding: 12px 0 0;
}
.fc-vouwgenest .fc-vouwbody:not([hidden]) {
  background: none;
  padding: 14px 0 2px;
}
.fc-vouwgenest .fc-vouwknop:hover {
  background: var(--fc-bg);
}

/* Wat de titelbalk zegt als de kaart dicht staat: het genre, hoeveel
 * voorbeelden er liggen, hoeveel dia's er zonder beeld zijn. */
.fc-vouwmeta {
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
/* De acties blijven staan als de kaart dicht is. Een kaart die zichzelf
 * wegvouwt mét de knop die je er juist voor pakt, verstopt precies het ding
 * dat je zoekt op het moment dat de stap af lijkt.
 *
 * `0 1 auto` en `min-width: 0`, niet `0 0 auto`: met twee knoppen erin was dit
 * blok net zo breed als zijn inhoud en duwde het de pagina op 320px naar 335.
 * Nu mag het krimpen, en dan is het de rij erbinnen die afbreekt - wat hij
 * toch al kon. */
.fc-vouwacties {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
}

/* --- Referentietegels: stijlvoorbeelden en gezichten ---------------------
 * Eén rooster voor allebei. Een gevulde plek toont zijn beeld, een lege is
 * een dropzone, en bij de gezichten staat de naam eronder omdat die letterlijk
 * in de prompt komt ("reference 4 is Alice").
 */
.fc-reftegels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr));
  gap: 12px;
  align-items: start;
}
.fc-reftegel {
  display: grid;
  gap: 6px;
  min-width: 0;
}
/* Alleen de verhouding: breedte, bijsnijden en hoeken komen van `miniatuur`,
 * en inline stijl wint toch van een klasse. Twee plekken die hetzelfde zeggen
 * zijn twee plekken die uit elkaar lopen. */
.fc-reftegel img {
  aspect-ratio: 16 / 9;
}
.fc-reftegel[data-conflict='true'] img {
  outline: 2px solid var(--fc-amber);
  outline-offset: 2px;
}
.fc-refnummer {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fc-muted);
}
.fc-refnaam {
  width: 100%;
  min-width: 0;
}
.fc-reftegel .fc-dropzone {
  aspect-ratio: 16 / 9;
  height: 100%;
}
/* Een tegelgrote dropzone: geen alinea, alleen de uitnodiging. De volle
 * variant met zijn twee regels uitleg staat op Input, waar hij de hele
 * breedte heeft. */
.fc-dropzone[data-compact='true'] {
  padding: 12px 10px;
  gap: 3px;
}
.fc-dropzone[data-compact='true'] .fc-dropzone-kop {
  font-size: 11px;
  font-weight: 700;
}

/* --- De cast op een dia: knoppen, geen vinkjes ---------------------------
 * Bas, 2026-09-19: "knoppen voor elke bestaande referentiepersoon". Aangevinkt
 * of niet is hier de vraag die je van een afstand wilt kunnen beantwoorden, en
 * twaalf vinkjes op een rij beantwoorden hem niet.
 */
.fc-castknop {
  border: 1px solid var(--fc-line);
  background: var(--fc-paper);
  color: var(--fc-ink);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  max-width: 100%;
  overflow-wrap: anywhere;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}
.fc-castknop:hover:not(:disabled) {
  border-color: var(--fc-line-strong);
  background: var(--fc-bg);
}
.fc-castknop:focus-visible {
  outline: 2px solid var(--fc-focus);
  outline-offset: 2px;
}
.fc-castknop:active:not(:disabled) {
  transform: translateY(1px);
}
.fc-castknop[aria-pressed='true'] {
  border-color: var(--fc-blue);
  background: var(--fc-pale);
  color: var(--fc-blue-ink);
}
.fc-castknop:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
  .fc-castknop {
    transition: none;
  }
  .fc-castknop:active:not(:disabled) {
    transform: none;
  }
}

/* --- De beeldgalerij van een format -------------------------------------
 * Bas, 2026-09-19: "zullen we er daarom een gallerij pagina bijmaken? Wel per
 * format." Een rooster dat meegroeit met de breedte, met het beeld groot en
 * alles eromheen klein: je komt hier om te KIJKEN, en de regels eronder zijn
 * om te weten wat je ziet.
 */
.fc-beeldrooster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 16px;
  align-items: start;
}
.fc-beeldtegel {
  margin: 0;
  min-width: 0;
  background: var(--fc-paper);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  overflow: hidden;
  display: grid;
  gap: 0;
}
.fc-beeldlink {
  display: block;
  line-height: 0;
  background: var(--fc-bg);
}
.fc-beeldlink img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.fc-beeldlink:focus-visible {
  outline: 2px solid var(--fc-focus);
  outline-offset: -2px;
}
/* Betaald, maar het bestand staat hier niet. Een leeg vlak met de reden erin
 * is eerlijker dan een gebroken plaatje. */
.fc-beeldleeg {
  aspect-ratio: 16 / 9;
  background: var(--fc-bg);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 12px;
}
.fc-beeldbijschrift {
  display: grid;
  gap: 5px;
  padding: 11px 13px 12px;
  min-width: 0;
}
.fc-beeldbijschrift p {
  margin: 0;
}
/* De eerste regel van de slide, op één regel: hij is om te herkennen, niet om
 * te lezen. */
.fc-beeldregel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Staat dit beeld op de slide, ernaast, of nergens meer. */
.fc-beeldmerk {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--fc-muted);
  background: var(--fc-bg);
  border: 1px solid var(--fc-line);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.fc-beeldmerk[data-toon='goed'] {
  color: var(--fc-green);
  border-color: var(--fc-green-line);
  background: var(--fc-green-soft);
}
.fc-beeldmerk[data-toon='waarschuwing'] {
  color: var(--fc-amber-text);
  border-color: var(--fc-amber-line);
  background: var(--fc-yellow);
}
.fc-beeldmerk[data-toon='omslag'] {
  color: var(--fc-blue-ink);
  border-color: var(--fc-blue);
  background: var(--fc-pale);
}
/* De prompt in zijn eigen venster: letterlijk zoals hij verstuurd is, dus met
 * zijn eigen regelafbrekingen. */
.fc-promptregel {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.6;
  max-height: 50vh;
  overflow: auto;
  background: var(--fc-bg);
  border-radius: 8px;
  padding: 12px 14px;
}

/* --- De deckopbouw: één stap, één vak -----------------------------------
 * Bas, 2026-09-19: "zorg dat ik de tekst er in kan aanpassen, maar zorg ook
 * dat elke tekst zijn eigen versleepbare tekstvak is zodat ik de volgorde
 * makkelijk met de hand kan veranderen."
 *
 * Eerst waren dit bulletpoints met een textarea ernaast onder "Aanpassen".
 * Lezen ging goed en veranderen niet: de volgorde omgooien was knippen en
 * plakken in een vak van acht regels. Nu is elke stap een eigen regel die je
 * aanklikt en overtypt, met een greep ervoor - en alleen die greep sleept,
 * anders vecht het slepen met het selecteren van de tekst erin.
 */
.fc-structuurlijst {
  display: grid;
  gap: 6px;
}
.fc-structuurrij {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.fc-structuurrij.fc-dragging {
  opacity: 0.4;
}
/* Even breed voor elk nummer tot 99, anders schuiven de vakken ernaast op bij
 * stap 10 en leest de kolom als twee kolommen. */
.fc-structuurnummer {
  flex: none;
  width: 18px;
  text-align: right;
  font-size: 10px;
  font-weight: 700;
  color: var(--fc-muted);
  font-variant-numeric: tabular-nums;
}
.fc-structuurveld {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 30px;
  padding: 4px 9px;
  font-size: 12px;
}
.fc-structuurgreep {
  cursor: grab;
}

/* --- Het deck bekijken, zonder PowerPoint --------------------------------
 * Bas, 2026-09-19: "we zouden het toch ook zo maken dat ik in de app kon
 * kijken?" Eén vel is altijd precies 960 bij 540 pixels - dat is 72 pixels per
 * inch, en dus één pixel per punt, zodat de maten uit `layouts.js` er zonder
 * omrekening in kunnen. Passend maken gebeurt daarna met een transform, want
 * schalen mag de verhoudingen niet aanraken.
 */
.fc-slidevel {
  position: relative;
  width: 960px;
  height: 540px;
  flex: none;
  overflow: hidden;
  transform: scale(var(--zoom, 1));
  transform-origin: top left;
  /* Geen erfelijke regelafstand of letterkleur van de app: op dit vel gelden
   * alleen de maten van het sjabloon. */
  line-height: 1.15;
  text-align: left;
}
.fc-slidebeeld {
  position: absolute;
  object-fit: cover;
}
.fc-slideleeg {
  position: absolute;
}
/* Een leeg uitsnede-vak (Portret zonder uitsnede): een stippellijn waar de
 * persoon komt te staan, zodat je ziet dat er een vak is en niet denkt dat
 * er niets ontbreekt (DECK-LOOK-PLAN §7). Ingepaste beelden krijgen hun maat
 * inline, uit dezelfde geometrie als de exporteur. */
.fc-slideuitsnede {
  position: absolute;
  box-sizing: border-box;
  border: 2px dashed var(--fc-line-strong);
  opacity: 0.8;
}
/* Een tekstvak van het sjabloon. Flex, omdat een vak zijn tekst verticaal kan
 * uitlijnen (onderaan bij een openingsregel) en `valign` in PowerPoint precies
 * dat doet.
 *
 * NIET AFKNIPPEN (Bas, 2026-09-23). Een openingsregel van drie regels in een
 * vak van twee, onderaan uitgelijnd, verloor zijn bovenste regel: het scherm
 * toonde "BESCHERMING EÉN MENS BLIJFT ACHTER" van "Twintig mensen vinden
 * bescherming...". PowerPoint knipt een tekstvak nooit af maar laat de tekst
 * doorlopen, dus het voorbeeld doet dat nu ook; het vel zelf knipt aan de rand. */
.fc-slidetekst {
  position: absolute;
  display: flex;
  overflow: visible;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.fc-slidetekst > span {
  display: block;
  width: 100%;
}

/* Een invoerveld dat niet de hele breedte hoeft. De negatieve tekst is een
 * handvol woorden ("geen tekst, geen logo's"), en een vak van 1400px breed
 * belooft een alinea. */
.fc-kortveld {
  max-width: 420px;
}

/* Eén beeld, zo groot als het scherm toelaat (Bas, 2026-09-19).
 *
 * Breder dan de gewone dialoog en zonder vulling: het beeld IS de inhoud, en
 * een rand van 22px rond een foto die je aan het beoordelen bent is een rand
 * die meekijkt. De hoogte is begrensd op de viewport, anders valt een staand
 * beeld half buiten het scherm en is er niets om aan te scrollen. */
.fc-dialoog.fc-beeldgroot {
  width: min(1600px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  padding: 10px;
}
.fc-beeldgroot img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 96px);
  object-fit: contain;
  border-radius: calc(var(--fc-radius) - 6px);
  cursor: zoom-out;
}
.fc-beeldgroot p {
  margin: 8px 2px 2px;
}

/* AFSPELEN: één dia beeldvullend (Bas, 2026-09-21: *"I want it to show me
 * that slide in full screen"*). Het venster vult de pagina, of het echte
 * volledige scherm als de browser dat geeft, en het vel staat gecentreerd op
 * het doek. Hetzelfde vel als het voorbeeld en de miniatuur, geschaald naar de
 * krapste kant van de ruimte; `--zoom` komt uit `speelDeckAf`. */
.fc-dialoog.fc-afspelen {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--fc-doek);
  color: var(--fc-op-doek);
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}
.fc-afspeelhouder {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.fc-afspeelhouder:focus-visible {
  outline: 2px solid var(--fc-focus);
  outline-offset: -2px;
}
/* Schalen vanuit de linkerbovenhoek en dan een halve eigen maat terug: zo
 * staat het vel in het midden bij elke zoom (met `translate` vóór `scale` zou
 * de verschuiving niet meeschalen). */
.fc-afspeelhouder > .fc-slidevel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: scale(var(--zoom, 1)) translate(-50%, -50%);
  transform-origin: 0 0;
}
/* Twee pijlen rechtsonder en een kruisje rechtsboven (Bas, 2026-09-23: "rechtsonder
 * twee kleine knoppen next en previous slide, alleen icoontjes"). Op een 16:10-
 * scherm staan ze in de zwarte rand onder de dia; op 16:9 liggen ze erover,
 * dus halfdoorzichtig tot je ze aanraakt. */
.fc-afspeelpijlen {
  position: absolute;
  right: 12px;
  bottom: 8px;
  display: flex;
  gap: 6px;
}
.fc-afspeelsluit {
  position: absolute;
  top: 10px;
  right: 12px;
}
.fc-afspeelknop {
  width: var(--fc-doekknop);
  height: var(--fc-doekknop);
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--fc-doekknop-rand);
  background: var(--fc-doekknop-vlak);
  color: var(--fc-op-doek);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.fc-afspeelknop:hover:not(:disabled),
.fc-afspeelknop:focus-visible {
  opacity: 1;
}
.fc-afspeelknop:focus-visible {
  outline: 2px solid var(--fc-focus);
  outline-offset: 2px;
}
.fc-afspeelknop:active:not(:disabled) {
  transform: scale(0.92);
}
.fc-afspeelknop:disabled {
  opacity: 0.2;
  cursor: default;
}
/* Voor een schermlezer wel, voor het oog niet. */
.fc-verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- De back-up die niet in orde is -------------------------------------
 * Bas, 2026-09-20: *"Het zou beter zijn een modal te hebben in FC die de
 * foutmelding geeft, met een knop om op dat moment een back up te doen."*
 *
 * Boven de topbalk, over de volle breedte, in de rode tint die dit scherm al
 * gebruikt voor iets dat echt mis is. Geen geel: geel is "let op", en dit is
 * "er is geen kopie van jullie werk".
 *
 * De balk blijft staan zolang het stuk is; het venster komt één keer per
 * sessie. Samen omdat een venster dat je weggeklikt hebt weg is, en een balk
 * alleen te makkelijk over het hoofd gezien wordt.
 */
.fc-backuphouder[hidden] {
  display: none;
}
.fc-backupbalk {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 22px;
  background: var(--fc-red-soft);
  border-bottom: 1px solid var(--fc-red);
  color: var(--fc-ink);
  font-size: 13px;
}
.fc-backupbalk-punt {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--fc-red);
}
.fc-backupbalk-tekst {
  flex: 1 1 auto;
  min-width: 0;
}
/* De knop mag op een smal scherm onder de tekst vallen, maar nooit half
 * afgesneden aan de rand blijven hangen. */
.fc-backupbalk > .fc-button {
  flex: none;
}
/* Het onderhoudsvenster (fc-onderhoud): dezelfde balk als de back-up, in de kleur van een waarschuwing in plaats van een fout. */
.fc-onderhoudbalk {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px;
  background: var(--fc-yellow);
  border-bottom: 1px solid var(--fc-amber-line);
  color: var(--fc-ink);
  font-size: 13px;
}
.fc-onderhoudbalk-punt {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--fc-amber);
}
.fc-onderhoudbalk-tekst {
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 560px) {
  .fc-backupbalk,
  .fc-onderhoudbalk {
    padding: 10px 14px;
  }
  .fc-backupbalk > .fc-button {
    width: 100%;
  }
}

/* DE BEELDWERELD (BEELDWERELD-PLAN §4.2). Eén rij is één ding in de wereld:
 * naam en soort op één regel met de prullenbak, de beschrijving eronder over de
 * hele breedte, de bron gedempt eronder. Een blad zoals een dia: wit met een
 * hairline. Op een smal scherm valt de soort onder de naam. */
.fc-bwrij {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--fc-paper);
  border: 1px solid var(--fc-line);
  border-radius: 16px;
}
.fc-bwkop {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fc-bwnaam {
  flex: 1 1 16ch;
  min-width: 0;
}
.fc-bwsoort {
  flex: 0 0 auto;
  width: auto;
}
/* Zo hoog als de tekst: de kaart zet de hoogte bij tekenen en typen. Met
 * `textarea` erbij, anders wint de 160px van `textarea.fc-input`. */
.fc-bwrij textarea.fc-bwbeschrijving {
  width: 100%;
  min-height: 0;
  resize: vertical;
  overflow: hidden;
}
/* Het raster ligt op de rijen, nooit op de velden (SCHERMONTWERP.md): op een
 * breed scherm twee rijen naast elkaar, smaller één. */
.fc-bwrijen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: 12px;
  align-items: start;
}
.fc-bwacties {
  flex-wrap: wrap;
  gap: 10px;
}
.fc-bwacties [data-over='true'] {
  color: var(--fc-red);
}
/* Het beeld van een plek of ding (BEELDWERELD-BEELDEN-PLAN §5): een strook onderaan de rij, want het beeld hoort bij dit
 * ene ding. Het duimpje links (16:9, klik maakt groot), de knoppen ernaast; die breken af naar een volgende regel, nooit
 * binnen zichzelf. Past het duimpje niet naast de knoppen (een smalle rij), dan staan de knoppen eronder. */
.fc-bwbeeld {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 12px;
  padding-top: 8px;
  border-top: 1px dotted var(--fc-line-soft);
  min-width: 0;
}
.fc-bwduim {
  flex: 0 0 128px;
  width: 128px;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid var(--fc-line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--fc-cover-bg);
  display: grid;
  place-items: center;
}
.fc-bwduim img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
button.fc-bwduim {
  cursor: zoom-in;
}
button.fc-bwduim:hover {
  border-color: var(--fc-line-strong);
}
button.fc-bwduim:focus-visible {
  outline: 2px solid var(--fc-focus);
  outline-offset: 2px;
}
button.fc-bwduim:active {
  transform: translateY(1px);
}
.fc-bwduim[data-leeg] {
  background: var(--fc-veld);
  border-style: dashed;
}
.fc-bwduim[data-leeg] span {
  padding: 0 6px;
  text-align: center;
}
.fc-bwduim[data-bezig] {
  background: var(--fc-pale);
  border-color: var(--fc-pale-line);
}
.fc-bwbeeldrechts {
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.fc-bwbeeldknoppen {
  flex-wrap: wrap;
  gap: 6px;
}
.fc-bwbeeldknoppen .fc-button,
.fc-bwbeeldknoppen .fc-textbutton {
  white-space: nowrap;
}
.fc-bwbeeldrechts p {
  margin: 0;
  overflow-wrap: anywhere;
}
.fc-bwbeeldfout {
  color: var(--fc-red);
}
.fc-bwbeeldknoppen .fc-textbutton { min-height: 32px; }
.fc-bwbeeldknoppen .fc-textbutton:hover:not(:disabled) { text-decoration: underline; }
.fc-bwbeeldknoppen .fc-textbutton:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 2px; border-radius: 6px; }
.fc-bwbeeldknoppen .fc-textbutton:active:not(:disabled) { color: var(--fc-blue-deep); }
.fc-bwbeeldknoppen .fc-textbutton:disabled { color: var(--fc-muted); text-decoration: none; cursor: not-allowed; }
/* Een tekstknop die bezig is (withBusy): zichtbaar bezig, niet nog eens te drukken. */
.fc-textbutton[data-busy='true'] {
  opacity: 0.55;
  cursor: progress;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Presentatie (PRESENTATIE-PLAN.md §7, mockup 7a). Het deck linksboven op een
 * vaste bühne, de scène rechts, de lijst onder het deck. Alleen --fc-* tokens.
 * ------------------------------------------------------------------------- */
.fc-pr-bovenrij { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.fc-pr-titel { margin: 0; }
.fc-pr-acties { gap: 10px; align-items: center; flex-wrap: wrap; }
.fc-pr-status { color: var(--fc-green); white-space: nowrap; }
.fc-pr-status[data-soort='fout'] { color: var(--fc-red); white-space: normal; }
.fc-pr-taal { display: inline-flex; background: var(--fc-paper); border: 1px solid var(--fc-line); border-radius: var(--fc-radius-pil); padding: 3px; }
.fc-pr-taal button { border: 0; background: none; font: inherit; font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: var(--fc-radius-pil); color: var(--fc-muted); cursor: pointer; }
.fc-pr-taal button:hover { color: var(--fc-ink); }
.fc-pr-taal button[aria-pressed='true'] { background: var(--fc-blue-deep); color: var(--fc-on-blue); }
.fc-pr-taal button:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 2px; }

/* het slot (fc-presentatie-slot): alles behalve de melding is niet aan te klikken (inert) en lichter, zodat het scherm "even niet" zegt */
.fc-pr-opslot > :not(.fc-notice) { opacity: 0.5; }
.fc-pr-werk {
  display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr);
  grid-template-areas: 'deck paneel' 'lijst paneel'; gap: 16px 20px; align-items: start;
}
.fc-pr-deckvak { grid-area: deck; position: sticky; top: 12px; z-index: 2; padding: 12px; }
.fc-pr-lijst { grid-area: lijst; padding: 6px 0; }
.fc-pr-paneel { grid-area: paneel; position: sticky; top: 12px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 24px); overflow: auto; overflow-x: clip; }
/* een kaart in de kolom krimpt nooit: een vouwkaart heeft overflow hidden, en zou anders in een kolom die scrolt tot twee pixels inzakken (deel 12: Eerdere aanpassingen was zo onzichtbaar) */
.fc-pr-paneel > * { flex-shrink: 0; }

.fc-pr-podium { position: relative; background: var(--fc-doek); border-radius: 12px; overflow: hidden; }
.fc-pr-buhne { position: relative; width: 100%; overflow: hidden; }
.fc-pr-frame { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: var(--fc-doek); }
.fc-pr-frame[data-wacht='true'] { opacity: 0; pointer-events: none; }
.fc-pr-podium[data-volscherm='true'] { display: grid; place-items: center; border-radius: 0; }
.fc-pr-podium[data-volscherm='true'] .fc-pr-buhne { width: min(100vw, calc(100vh * 16 / 9)); }

.fc-pr-stopbalk { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 4px 2px; flex-wrap: wrap; }
.fc-pr-stappen { display: flex; align-items: center; gap: 8px; }
.fc-pr-rond { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--fc-line); background: var(--fc-paper); color: var(--fc-ink); cursor: pointer; font-size: 16px; }
.fc-pr-rond:hover:not(:disabled) { background: var(--fc-pale); }
.fc-pr-rond:active:not(:disabled) { transform: translateY(1px); }
.fc-pr-rond:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 2px; }
.fc-pr-rond:disabled { opacity: .4; cursor: default; }
/* De kaart Logo (Bas, 2 okt): welk logo, en daaronder de hoek, elk als één rij pillen */
.fc-pr-logo { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fc-pr-logo .fc-pillgroep { flex-wrap: wrap; }
.fc-pr-logo .fc-pillgroep.fc-pr-hoeken { display: grid; grid-template-columns: repeat(2, max-content); }
/* De tekst van de stopbalk opent een lijst van alle stops (Bas, 2 okt): een onzichtbare select over het label, het pijltje zegt dat het kan. */
.fc-pr-stopvak { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--fc-radius-pil); white-space: nowrap; }
.fc-pr-stopvak:hover:not(:has(.fc-pr-stopkiezer:disabled)) { background: var(--fc-pale); }
.fc-pr-stopvak:active:not(:has(.fc-pr-stopkiezer:disabled)) { transform: translateY(1px); }
.fc-pr-stopvak:has(.fc-pr-stopkiezer:focus-visible) { outline: 2px solid var(--fc-focus); outline-offset: 2px; }
.fc-pr-stoppijl { font-size: 10px; color: var(--fc-muted); }
.fc-pr-stopvak:has(.fc-pr-stopkiezer:disabled) .fc-pr-stoppijl { display: none; }
.fc-pr-stopkiezer { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font: inherit; }
.fc-pr-stopkiezer:disabled { cursor: default; }
.fc-pr-schakel { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; font: inherit; font-size: 14px; color: var(--fc-ink); cursor: pointer; white-space: nowrap; }
.fc-pr-schakel i { width: 38px; height: 22px; border-radius: var(--fc-radius-pil); background: var(--fc-line-strong); position: relative; flex: none; }
.fc-pr-schakel i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--fc-paper); transition: transform 160ms var(--fc-ease-out, ease-out); }
.fc-pr-schakel[aria-checked='true'] i { background: var(--fc-blue); }
.fc-pr-schakel[aria-checked='true'] i::after { transform: translateX(16px); }
.fc-pr-schakel:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 3px; border-radius: 6px; }

/* De kop van de lijst (13-toevoegen §1.1): de kop, Scène toevoegen en de hint op één regel, en op een smal scherm onder elkaar. Het grijze woord
   over slepen hoort bij een muis: onder 480 px is het weg. */
.fc-pr-lijstkop { padding: 12px 18px 8px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 4px 16px; }
.fc-pr-lijsthint { margin-left: auto; }
@media (max-width: 480px) { .fc-pr-lijsthint { display: none; } }
/* De regel met Stop toevoegen en Scène toevoegen onder de titel van het paneel (13-toevoegen §1.1): elke knop op één regel, en de drie knoppen van
   dit deel hebben de 32 px die een vinger nodig heeft (de gedeelde .fc-textbutton blijft zoals hij is). */
.fc-pr-toevoegvak { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-top: 6px; }
.fc-pr-toevoegregel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-width: 0; }
.fc-pr-toevoegregel .fc-textbutton, .fc-pr-lijstkop .fc-textbutton { min-height: 32px; font-size: 13px; white-space: nowrap; }
.fc-pr-toevoegregel .fc-textbutton:active:not(:disabled), .fc-pr-lijstkop .fc-textbutton:active:not(:disabled) { opacity: 0.7; }
.fc-pr-toevoegregel .fc-textbutton:focus-visible, .fc-pr-lijstkop .fc-textbutton:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 2px; border-radius: 6px; }
.fc-pr-toevoegregel .fc-textbutton:disabled, .fc-pr-lijstkop .fc-textbutton:disabled { color: var(--fc-muted); text-decoration: none; cursor: not-allowed; }
.fc-pr-toevoegreden { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.fc-pr-lijstkop + .fc-pr-toevoegreden { padding: 0 18px 8px; }
/* Het formulier: één groep met twee velden in een dialog, en het select en het tekstveld over de hele breedte */
.fc-pr-toevoegvenster { overflow-x: clip; }
.fc-pr-toevoeggroep { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fc-pr-toevoeggroep > h4 { margin: 0 0 2px; font-size: 14px; }
.fc-pr-toevoeggroep .fc-field { min-width: 0; }
.fc-pr-toevoeggroep select.fc-input { width: 100%; min-width: 0; }
.fc-pr-toevoegveld { min-height: 84px; resize: vertical; font: inherit; font-size: 14px; }
.fc-pr-toevoegveld[readonly] { opacity: 0.7; }
.fc-pr-toevoeglive { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.fc-pr-toevoegvenster .fc-button[data-busy='true'] { cursor: progress; }
/* Het prijsvenster van een scène of stop heeft tot vijf regels (de plek, een overgang die wegvalt, een live link, de wachtrij, "Klaar?"): de gedeelde
   180 px van .fc-vraaglijst knipte de laatste regel af. Hier groeit de lijst mee tot bijna de helft van het scherm. */
.fc-pr-toevoegprijs .fc-vraaglijst { max-height: min(420px, 55vh); }
/* De prijs in het venster zelf (Bas, 2 okt: "teveel stappen"): de kop in vet, de regels eronder grijs, zoals in het prijsvenster. */
.fc-pr-toevoegkosten { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fc-pr-toevoegkostenkop { margin: 0; font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.fc-pr-toevoegkostenkop:empty { display: none; }
.fc-pr-toevoegkosten .fc-vraaglijst { max-height: min(260px, 40vh); }
.fc-pr-rij { position: relative; display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; width: 100%; padding: 8px 14px 8px 10px; border: 0; border-top: 1px solid var(--fc-line-soft); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.fc-pr-algemeen { grid-template-columns: 22px minmax(0, 1fr); }
.fc-pr-rij:hover { background: var(--fc-pale); }
.fc-pr-rij:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: -2px; }
.fc-pr-rij[aria-current='true'] { background: var(--fc-pale); box-shadow: inset 3px 0 0 var(--fc-blue); }
.fc-pr-rij[data-over='true'] { box-shadow: inset 0 3px 0 var(--fc-blue); }
/* waar een gesleepte stop landt (Bas, 6 okt): de plek in woorden, op de lijn boven de scène waar hij vóór komt; boven zijn eigen scène dat het daar niet kan */
.fc-pr-rij[data-landt]::after { content: attr(data-landt); position: absolute; left: 44px; top: 0; z-index: 2; transform: translateY(-50%); padding: 2px 10px; border-radius: 999px; background: var(--fc-blue); color: var(--fc-on-blue); font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; }
.fc-pr-rij[data-weiger='true']::after { background: var(--fc-muted); }
.fc-pr-rij[data-verborgen='true'] .fc-pr-rijtekst { opacity: .45; }
/* de sleepgreep in de grijs van de bijschriften, niet die van een lijn (Bas, 2 okt: "barely noticeable, needs more contrast"); donker onder de muis */
.fc-pr-greep { color: var(--fc-muted); font-size: 16px; font-weight: 700; letter-spacing: -3px; cursor: grab; text-align: center; }
.fc-pr-rij:hover .fc-pr-greep { color: var(--fc-ink); }
.fc-pr-rij[draggable='false'] .fc-pr-greep { opacity: .35; cursor: default; }
.fc-pr-nr { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; color: var(--fc-muted); }
.fc-pr-rijtekst { min-width: 0; display: flex; flex-direction: column; }
.fc-pr-rijtekst b { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-pr-rijtekst small { font-size: 12px; color: var(--fc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-pr-klein { width: 30px; height: 30px; border-radius: 8px; border: 0; background: none; color: var(--fc-muted); cursor: pointer; display: grid; place-items: center; }
.fc-pr-klein:hover:not(:disabled) { background: var(--fc-kop-hover); color: var(--fc-ink); }
.fc-pr-klein:active:not(:disabled) { transform: translateY(1px); }
.fc-pr-klein:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 1px; }
.fc-pr-klein:disabled { opacity: .35; cursor: default; }
.fc-pr-link { font-size: 12px; color: var(--fc-green); white-space: nowrap; }
.fc-pr-rij[data-verborgen='true'] .fc-pr-link { color: var(--fc-muted); }
.fc-pr-link[data-weg='true'] { color: var(--fc-amber-text); background: var(--fc-yellow); border: 1px solid var(--fc-amber-line); border-radius: var(--fc-radius-pil); padding: 2px 8px; }
/* De stops van een scène (29 sep): onder haar tekstkolom, zonder lijn ertussen, zodat scène en stops één blok zijn;
   het streepje in de nummerkolom houdt ze bij hun scène en wordt blauw bij de stop die het voorbeeld toont. */
.fc-pr-stoprij { position: relative; display: flex; align-items: baseline; gap: 10px; width: 100%; min-width: 0; padding: 4px 14px 4px 80px; border: 0; background: none; font: inherit; color: var(--fc-ink); text-align: left; cursor: pointer; }
.fc-pr-stoprij[data-laatste='true'] { padding-bottom: 10px; }
.fc-pr-stoprij::before { content: ''; position: absolute; left: 55px; top: 0; bottom: 0; width: 2px; background: var(--fc-line); }
.fc-pr-stoprij[data-laatste='true']::before { bottom: 8px; }
.fc-pr-stoprij[data-huidig='true'] { background: var(--fc-pale); box-shadow: inset 3px 0 0 var(--fc-blue); }
.fc-pr-stoprij:hover { background: var(--fc-kop-hover); }
.fc-pr-stoprij:active { background: var(--fc-pale-line); }
.fc-pr-stoprij:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: -2px; }
/* de greep van een stop die je kunt verplaatsen: in de kolom van de greep van een scènerij (padding 10px, 22px breed) */
.fc-pr-stopgreep { position: absolute; left: 10px; top: 50%; width: 22px; transform: translateY(-50%); }
.fc-pr-stoprij:hover .fc-pr-greep { color: var(--fc-ink); }
/* waar een stop binnen zijn eigen scène landt (STOP-VOLGORDE-PLAN): een lijn op de rand van de rij en de plek in woorden, het label van 0.7.225 */
.fc-pr-stoprij[data-plek='voor'] { box-shadow: inset 0 3px 0 var(--fc-blue); }
.fc-pr-stoprij[data-plek='na'] { box-shadow: inset 0 -3px 0 var(--fc-blue); }
.fc-pr-stoprij[data-landt]::after { content: attr(data-landt); position: absolute; left: 80px; z-index: 2; padding: 2px 10px; border-radius: 999px; background: var(--fc-blue); color: var(--fc-on-blue); font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; }
.fc-pr-stoprij[data-plek='voor']::after { top: 0; transform: translateY(-50%); }
.fc-pr-stoprij[data-plek='na']::after { bottom: 0; transform: translateY(50%); }
.fc-pr-stoprij[aria-current='true']::before { background: var(--fc-blue); }
.fc-pr-stoprij[aria-current='true'] .fc-pr-stopkop { font-weight: 600; }
.fc-pr-stoprij[aria-current='true'] .fc-pr-stopnaam { color: var(--fc-blue); }
.fc-pr-stopgetal { color: var(--fc-muted); }
/* min-width en geen vaste breedte: achter een stop met een eigen aftelling staat het getal in dezelfde kolom ("Stop 48 · 100", AFTELLING-PLAN §1.2) */
.fc-pr-stopnaam { flex: none; min-width: 58px; font-size: 12px; color: var(--fc-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fc-pr-stopkop { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Maak hier een eigen scène van (04-eigen-scene 1.1): het laatste kind van een stopkaart, onder een gestreepte lijn; één tekstknop, en alleen een
   reden als hij uit staat. Nieuwe overgang maken (1.2): een regel onder een scène waarvan de overgang wegvalt, ingesprongen zoals de stoprijen, met
   hetzelfde streepje in de nummerkolom zodat scène, kuur en stops één blok blijven. Aan het einde (1.3): een strook na de laatste scène. */
.fc-pr-eigen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--fc-line-soft); min-width: 0; }
.fc-pr-eigenknop, .fc-pr-overgangknop { min-height: 32px; font-size: 13px; white-space: nowrap; }
.fc-pr-eigenknop:active:not(:disabled), .fc-pr-overgangknop:active:not(:disabled) { opacity: 0.7; }
.fc-pr-eigenknop:focus-visible, .fc-pr-overgangknop:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 2px; border-radius: 6px; }
.fc-pr-eigenknop:disabled, .fc-pr-overgangknop:disabled { opacity: 0.55; cursor: default; text-decoration: none; }
.fc-pr-eigenknop[data-busy='true'], .fc-pr-overgangknop[data-busy='true'] { cursor: progress; }
.fc-pr-eigenreden { min-width: 0; overflow-wrap: anywhere; }
.fc-pr-zondertekst { margin: 0; }
/* Losse aftellingen (AFTELLING-PLAN §1.2): bovenaan de scènelijst, op het niveau van de presentatie zoals Algemeen; een regel per aftelling met
   Op een stop zetten en Weghalen eronder. Geel zoals een overgang die wegvalt: er moet iets mee gebeuren. */
.fc-pr-losse { display: flex; flex-direction: column; gap: 10px; margin: 0 18px 10px; padding: 10px 14px; border: 1px solid var(--fc-amber-line); border-radius: 12px; background: var(--fc-yellow); color: var(--fc-amber-ink); min-width: 0; }
.fc-pr-losregel { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fc-pr-losregel p { margin: 0; overflow-wrap: anywhere; }
.fc-pr-losknoppen { flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.fc-pr-losnaar { width: auto; max-width: 100%; min-height: 32px; padding-top: 4px; padding-bottom: 4px; }
.fc-pr-losnaar:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 2px; }
.fc-pr-losnaar:disabled { opacity: 0.55; cursor: not-allowed; }
.fc-pr-losknoppen .fc-textbutton { min-height: 32px; white-space: nowrap; }
.fc-pr-overgangrij { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 2px 14px 4px 80px; min-width: 0; }
.fc-pr-overgangrij::before { content: ''; position: absolute; left: 55px; top: 0; bottom: 0; width: 2px; background: var(--fc-line); }
.fc-pr-overgangrij[data-laatste='true'] { padding-bottom: 10px; }
.fc-pr-overgangrij[data-laatste='true']::before { bottom: 8px; }
.fc-pr-overgangtekst { font-size: 12px; color: var(--fc-amber-text); white-space: nowrap; }
.fc-pr-eindzone { height: 8px; }
.fc-pr-eindzone > span { display: none; }
.fc-pr-lijst[data-sleept='true'] .fc-pr-eindzone { display: grid; place-items: center; height: 32px; margin: 4px 14px 6px; border: 1px dashed var(--fc-line-strong); border-radius: 8px; font-size: 12px; color: var(--fc-muted); }
.fc-pr-lijst[data-sleept='true'] .fc-pr-eindzone > span { display: inline; }
.fc-pr-eindzone[data-over='true'] { box-shadow: inset 0 3px 0 var(--fc-blue); }

.fc-pr-scene { padding: 18px; }
.fc-pr-scenekop { font-size: 18px; }
.fc-pr-groep { border-top: 1px solid var(--fc-line-soft); padding-top: 14px; margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
/* als eerste in een paneel geen scheidslijn erboven: er staat niets om van te scheiden */
.fc-pr-groep:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.fc-pr-groep > h4 { margin: 0 0 4px; font-size: 14px; }
.fc-pr-veld { gap: 4px; }
/* Een tekst verschuiven (revisie 51): het veld en zijn verschuiving zijn één groep; de schuiven dicht achter een knop.
   De stand van opslaan staat in de statusregel boven het deck (Opslaan... / Opgeslagen / de fout), net als bij een kleur. */
.fc-pr-tekstgroep { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* het tekstgereedschap per stop (STOP-DIA-PLAN A): greep, Kop / Tekst en Weghalen op één regel onder het veld */
.fc-pr-tekstgroep { position: relative; }
.fc-pr-tekstgereedschap { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 4px; min-width: 0; }
.fc-pr-tekstgreep { cursor: grab; padding: 2px 4px; border-radius: var(--fc-radius-pil); color: var(--fc-muted); user-select: none; }
.fc-pr-tekstgreep:hover { color: var(--fc-ink); background: var(--fc-pale); }
.fc-pr-tekstgreep:active { cursor: grabbing; }
.fc-pr-vorm > button { padding: 4px 11px; min-height: 30px; font-size: 12px; }
/* de kleur van één tekst (8 okt): een klein select op dezelfde regel, zo hoog als de pillen ernaast */
select.fc-input.fc-pr-kleur { width: auto; min-height: 30px; padding: 2px 30px 2px 10px; font-size: 12px; }
.fc-pr-tekstgroep[data-sleept='true'] { opacity: .5; }
.fc-pr-tekstgroep[data-weg='true'] > .fc-pr-veld .fc-pr-tekst { opacity: .5; }
/* waar een gesleepte tekst landt: een lijn op de rand en de plek in woorden, zoals bij een stop */
.fc-pr-tekstgroep[data-plek='voor'] { box-shadow: 0 -3px 0 var(--fc-blue); }
.fc-pr-tekstgroep[data-plek='na'] { box-shadow: 0 3px 0 var(--fc-blue); }
/* twee teksten die van plek ruilen (TEKST-SLEPEN-OVERAL-PLAN §3): de hele rij waar hij op hangt krijgt de rand, niet een lijn erboven of eronder */
.fc-pr-tekstgroep[data-plek='wissel'] { box-shadow: 0 0 0 2px var(--fc-blue); border-radius: var(--fc-radius); }
.fc-pr-tekstgroep[data-landt]::after { content: attr(data-landt); position: absolute; right: 0; z-index: 2; max-width: 100%; padding: 2px 10px; border-radius: 999px; background: var(--fc-blue); color: var(--fc-on-blue); font-size: 12px; font-weight: 600; pointer-events: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-pr-tekstgroep[data-plek='voor']::after, .fc-pr-tekstgroep[data-plek='niet']::after, .fc-pr-tekstgroep[data-plek='wissel']::after { top: 0; transform: translateY(-50%); }
.fc-pr-tekstgroep[data-plek='na']::after { bottom: 0; transform: translateY(50%); }
.fc-pr-tekstgroep[data-plek='niet']::after { background: var(--fc-line-strong); color: var(--fc-ink); white-space: normal; }
/* Ook op deze dia: teksten van een eerdere stop die hier nog in beeld staan, onder een dunne lijn */
.fc-pr-ook { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--fc-line); }
.fc-pr-ookkop { margin: 0; }
/* + Tekst (STOP-DIA-PLAN B5): een knop, en open een veld met Kop / Tekst, Zet erbij en Annuleren */
.fc-pr-tekstErbij { margin-top: 4px; }
.fc-pr-tekstErbijVorm { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; }
/* één regel, ook met "breder +600 · ↔ -100 · ↕ -100" op 320 px: de puntjes snijden achteraan af (de breedte staat vooraan) */
.fc-pr-schuifknop { display: block; align-self: flex-start; max-width: 100%; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.fc-pr-schuifknop[data-verschoven] { color: var(--fc-blue-ink); }
.fc-pr-schuifknop:active { opacity: 0.7; }
.fc-pr-schuif { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 12px; background: var(--fc-veld); }
.fc-pr-schuif .fc-textbutton { align-self: flex-start; }
.fc-pr-schuif .fc-textbutton:disabled { color: var(--fc-muted); text-decoration: none; cursor: not-allowed; }
.fc-pr-schuifrij { display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr) 3ch; align-items: center; gap: 10px; min-width: 0; }
.fc-pr-schuifbalk { width: 100%; min-width: 0; margin: 0; accent-color: var(--fc-blue); cursor: grab; }
.fc-pr-schuifbalk:hover { accent-color: var(--fc-blue-deep); }
.fc-pr-schuifbalk:active { cursor: grabbing; }
.fc-pr-schuifbalk:focus-visible { outline: 3px solid var(--fc-focus); outline-offset: 3px; }
.fc-pr-schuifbalk:disabled { cursor: not-allowed; opacity: 0.5; }
.fc-pr-schuifgetal { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) {
  .fc-pr-schuifrij { grid-template-columns: minmax(0, 1fr) 3ch; }
  .fc-pr-schuifrij > span { grid-column: 1 / -1; }
}

/* Vraag de AI (PRESENTATIE-PLAN §9.1, §9.4): het veld, de balk met wat er loopt of het voorstel, en het paneel dat
   niets laat wijzigen zolang het voorstel te zien is */
.fc-pr-vraagveld { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; line-height: 1.5; padding: 10px 12px; border: 1px solid var(--fc-line); border-radius: 12px; background: var(--fc-paper); color: var(--fc-ink); resize: vertical; }
.fc-pr-vraagveld:hover { border-color: var(--fc-line-strong); }
.fc-pr-vraagveld:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 1px; border-color: var(--fc-blue); }
.fc-pr-vraag .fc-row { flex-wrap: wrap; gap: 8px 12px; align-items: center; }
/* de kop van een vouwkaart is een klikvlak van minstens 32 px hoog; de gesloten kaart blijft even hoog (6 + 6 + 20 + 6 + 6) */
.fc-pr-deckvraag { padding: 6px 16px; }
.fc-pr-deckvraag[open] { padding-bottom: 12px; }
.fc-pr-deckvraag > summary { cursor: pointer; font-weight: 700; font-size: 14px; padding: 6px 0; }
.fc-pr-deckvraag > summary:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 2px; border-radius: 6px; }
.fc-pr-deckvraag > summary:hover { color: var(--fc-blue-deep); }
.fc-pr-deckvraag[open] > summary { margin-bottom: 8px; }
.fc-pr-werkbalk { display: flex; flex-direction: column; gap: 8px; background: var(--fc-pale); border: 1px solid var(--fc-line); border-radius: var(--fc-radius); padding: 12px 16px; margin-bottom: 14px; }
.fc-pr-werkbalk[hidden] { display: none; }
.fc-pr-werkbalk .fc-row { flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.fc-pr-werkkop { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; min-width: 0; }
.fc-pr-werkkop > span { overflow-wrap: anywhere; min-width: 0; }
.fc-pr-stap { font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.fc-pr-stap::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--fc-blue); animation: fc-pr-puls 1.2s ease-in-out infinite; }
@keyframes fc-pr-puls { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .fc-pr-stap::before { animation: none; } }
.fc-pr-fout { color: var(--fc-red); white-space: pre-wrap; margin: 0; overflow-wrap: anywhere; }
.fc-pr-mislukt { display: flex; flex-direction: column; gap: 2px; }
.fc-pr-mislukt p { margin: 0; overflow-wrap: anywhere; }

/* --- de AI-werkstroom (deel 12): de wachtrij onder de werkbalk, het chipje van Bijsturen, en de kaart Eerdere aanpassingen ---
   Alleen indeling; de kleuren en maten zijn de tokens van de rest van de balk. Klikbare tekst staat op één regel (nowrap), een lange
   vraag wordt met een beletselteken afgekapt in plaats van af te breken. */
.fc-pr-wachtrij { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--fc-line); padding-top: 8px; min-width: 0; }
.fc-pr-wachtrij p { margin: 0; }
.fc-pr-wachtlijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fc-pr-wachtrij-rij { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
.fc-pr-wachtrij-tekst { flex: 1 1 220px; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-pr-wachtrij-rij .fc-small { white-space: nowrap; }
.fc-pr-wachtrij-rij .fc-textbutton { white-space: nowrap; min-height: 32px; }
.fc-pr-wachtrij-noot { flex-basis: 100%; white-space: normal !important; }
.fc-pr-werkbalk .fc-textbutton { white-space: nowrap; }
.fc-pr-werkbalk .fc-textbutton:hover:not(:disabled) { text-decoration: underline; }
.fc-pr-werkbalk .fc-textbutton:active:not(:disabled) { color: var(--fc-blue-deep); }
.fc-pr-werkbalk .fc-textbutton:disabled { color: var(--fc-muted); text-decoration: none; cursor: not-allowed; }
.fc-pr-voet { border-top: 1px solid var(--fc-line); padding-top: 6px; }
.fc-pr-stuurchip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 8px 12px; background: var(--fc-pale); border: 1px solid var(--fc-line); border-radius: 12px; min-width: 0; }
.fc-pr-stuurchip[hidden] { display: none; }
.fc-pr-stuurchip strong { font-size: 13px; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-pr-stuurchip .fc-textbutton { white-space: nowrap; min-height: 32px; }
.fc-pr-geschiedenis { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fc-pr-geschiedenis p { margin: 0; overflow-wrap: anywhere; }
.fc-pr-glijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fc-pr-gitem { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 10px; border-top: 1px solid var(--fc-line); }
.fc-pr-gitem:first-child { border-top: 0; padding-top: 0; }
.fc-pr-gkop { font-size: 13px; overflow-wrap: anywhere; }
.fc-pr-gknoppen { flex-wrap: wrap; gap: 4px 14px; align-items: center; margin-top: 2px; }
.fc-pr-gknop { white-space: nowrap; min-height: 32px; }
.fc-pr-gknop:disabled { color: var(--fc-muted); text-decoration: none; cursor: not-allowed; }
.fc-pr-gknop:active:not(:disabled) { color: var(--fc-blue-deep); }
.fc-pr-schakel { display: inline-flex; background: var(--fc-paper); border: 1px solid var(--fc-line); border-radius: var(--fc-radius-pil); padding: 3px; }
.fc-pr-schakel button { border: 0; background: none; font: inherit; font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: var(--fc-radius-pil); color: var(--fc-muted); cursor: pointer; }
.fc-pr-schakel button:hover:not(:disabled) { color: var(--fc-ink); }
.fc-pr-schakel button[aria-pressed='true'] { background: var(--fc-blue-deep); color: var(--fc-on-blue); }
.fc-pr-schakel button:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 2px; }
.fc-pr-schakel button:disabled { opacity: 0.45; cursor: default; }
.fc-pr-paneel[data-voorstel='true'] > .fc-pr-scene, .fc-pr-paneel[data-voorstel='true'] > div:first-child { opacity: 0.55; pointer-events: none; }

/* de kop boven de kaarten voor delen en opleveren (02-kopie §2.2): gedempt, alleen getekend als er een kaart onder valt */
.fc-pr-groepkop { margin: 8px 0 0; }

/* Versies van een presentatie (02-kopie §1.1): een eigen rij onder de titel, groep A van het scherm. Alleen --fc-* tokens. */
.fc-pr-versiebalk { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; min-width: 0; }
.fc-pr-versielabel { white-space: nowrap; }
.fc-pillgroep { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.fc-pillgroep > button, .fc-pillgroep > a { display: inline-block; box-sizing: border-box; border: 1px solid var(--fc-line); background: var(--fc-paper); border-radius: var(--fc-radius-pil); color: var(--fc-muted); font: inherit; font-weight: 700; font-size: 13px; line-height: 18px; padding: 6px 14px; min-height: 32px; text-align: center; text-decoration: none; cursor: pointer; white-space: nowrap; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; }
.fc-pillgroep > button:hover, .fc-pillgroep > a:hover { color: var(--fc-ink); border-color: var(--fc-line-strong); }
.fc-pillgroep > button:focus-visible, .fc-pillgroep > a:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 2px; }
.fc-pillgroep > button:active, .fc-pillgroep > a:active { background: var(--fc-pale); }
.fc-pillgroep > button[aria-pressed='true'], .fc-pillgroep > a[aria-current='page'], .fc-pillgroep > a[aria-pressed='true'] { background: var(--fc-blue-deep); border-color: var(--fc-blue-deep); color: var(--fc-on-blue); }
.fc-pillgroep > button[aria-invalid='true'] { border-color: var(--fc-red); }
.fc-pillgroep > button[aria-busy='true'] { cursor: progress; opacity: 0.7; }
.fc-pillgroep > button:disabled, .fc-pillgroep > a[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; color: var(--fc-muted); border-color: var(--fc-line); background: var(--fc-paper); }
.fc-pr-versiebalk .fc-textbutton { min-height: 32px; font-size: 13px; white-space: nowrap; }
.fc-pr-versiebalk .fc-textbutton:disabled { opacity: 0.55; cursor: default; text-decoration: none; }
.fc-pr-versiereden { min-width: 0; }
/* Korter maken met de AI (02-kopie §1.6): een vouwkaart onder "Vraag de AI over de hele presentatie" */
.fc-pr-korterinhoud { display: flex; flex-direction: column; }
.fc-pr-doelrij { flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.fc-pr-doelgetal { width: 6.5rem; min-width: 0; }
.fc-pr-korter input.fc-pr-doelgetal:hover, .fc-pr-korter .fc-pr-voorveld:hover, .fc-vraag .fc-input:hover { border-color: var(--fc-ink); }
.fc-pr-korter input.fc-pr-doelgetal:focus-visible, .fc-vraag .fc-input:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 1px; }
.fc-pr-korter input[aria-invalid='true'], .fc-pr-korter textarea[aria-invalid='true'] { border-color: var(--fc-red); }
.fc-pr-korterknop { flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.fc-pr-korterreden { min-width: 0; overflow-wrap: anywhere; }
.fc-pr-nu { margin: 0; }
/* Korte versie (KORTE-VERSIE-PLAN §2): de regel onder het pil-paar, en de strook die na een inkorting de teksten aanbiedt. Alleen --fc-* tokens. */
.fc-pr-korterkeuze { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.fc-pr-strookvak { display: flex; flex-direction: column; min-width: 0; }
.fc-pr-strookvak:empty { display: none; }
.fc-pr-strook { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; margin-bottom: 14px; min-width: 0; border: 1px solid var(--fc-line); border-radius: var(--fc-kant-radius); background: var(--fc-pale); }
.fc-pr-strooktekst { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.fc-pr-waarom > summary { cursor: pointer; font-size: 13px; font-weight: 700; }
.fc-pr-waarom > summary:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 2px; border-radius: 6px; }
.fc-pr-waarom > summary:hover { color: var(--fc-blue-deep); }
/* in het donker is --fc-blue-deep licht: de tekst van een ingedrukte pil wordt dan donker (4,5:1 gehaald) */
:root[data-theme='dark'] .fc-pillgroep > button[aria-pressed='true'], :root[data-theme='dark'] .fc-pillgroep > a[aria-current='page'] { color: var(--fc-paper); }
.fc-pr-waarom ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }

/* Delen met een koper (03-kooplink §1.1, §3): de kaart in de rechterkolom, en de pagina van de koper. Alleen --fc-* tokens. */
/* de rechterkolom scrolt zelf en is een flexkolom: een vouwkaart heeft overflow hidden en zou anders tot een streep krimpen */
.fc-pr-paneel > .fc-vouwkaart { flex: 0 0 auto; margin-top: 0; }
.fc-kp-inhoud { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fc-kp-inhoud p { margin: 0; }
.fc-kp-groep { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fc-kp-groep > h4 { margin: 0; font-size: 14px; }
.fc-kp-lijst { display: flex; flex-direction: column; min-width: 0; }
.fc-kp-lijst > .fc-kp-rij { border-top: 1px solid var(--fc-line-soft); padding: 12px 0; }
.fc-kp-lijst > .fc-kp-rij:first-child { border-top: 0; padding-top: 0; }
.fc-kp-rij { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fc-kp-rij p { margin: 0; }
.fc-kp-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.fc-kp-voor { min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.fc-kp-regel { overflow-wrap: anywhere; }
.fc-kp-nota { margin-top: 2px; column-gap: 12px; row-gap: 2px; }
.fc-kp-adres { font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; user-select: all; color: var(--fc-ink); margin-top: 4px; }
.fc-kp-acties { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 2px; }
.fc-kp-actiesvak .fc-notice { margin-top: 6px; }
.fc-kp-acties .fc-textbutton, .fc-kp-inline .fc-textbutton, .fc-kp-fout .fc-textbutton, .fc-kp-nota .fc-textbutton { white-space: nowrap; min-height: 32px; font-size: 13px; }
.fc-kp-acties .fc-textbutton:active, .fc-kp-inline .fc-textbutton:active, .fc-kp-fout .fc-textbutton:active, .fc-kp-nota .fc-textbutton:active { opacity: 0.7; }
.fc-kp-acties .fc-textbutton:focus-visible, .fc-kp-inline .fc-textbutton:focus-visible, .fc-kp-fout .fc-textbutton:focus-visible, .fc-kp-nota .fc-textbutton:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 2px; border-radius: 6px; }
.fc-kp-acties .fc-textbutton:disabled, .fc-kp-inline .fc-textbutton:disabled { color: var(--fc-muted); text-decoration: none; cursor: not-allowed; }
.fc-kp-inline { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; padding: 12px; border-radius: 12px; background: var(--fc-veld); min-width: 0; }
.fc-kp-fout { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.fc-kp-voet { display: flex; flex-direction: column; gap: 2px; }
/* de kleur van een staat draagt zijn eigen woord: de stip is versiering, het woord staat er altijd */
.fc-kp-staat { display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px; border: 1px solid var(--fc-line); border-radius: var(--fc-radius-pil); font-size: 11px; font-weight: 700; line-height: 18px; white-space: nowrap; }
.fc-kp-staat::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fc-kp-staat[data-staat='actief'] { background: var(--fc-green-soft); color: var(--fc-green); border-color: var(--fc-green-line); }
.fc-kp-staat[data-staat='verlopen'] { background: var(--fc-yellow); color: var(--fc-amber-ink); border-color: var(--fc-amber-line); }
.fc-kp-staat[data-staat='ingetrokken'] { background: var(--fc-line-soft); color: var(--fc-muted); border-color: var(--fc-line); }
/* het formulier: twee groepen onder elkaar, en naast elkaar zodra de kaart er 520 px breed voor is; een groep breekt nooit over de kolomrand */
.fc-kp-nieuw { container: kooplink / inline-size; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.fc-kp-formulier { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fc-kp-velden { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@container kooplink (min-width: 520px) { .fc-kp-velden { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.fc-kp-vgroep { display: flex; flex-direction: column; gap: 12px; min-width: 0; break-inside: avoid; }
.fc-kp-vkop { margin: 0; font-size: 13px; }
.fc-kp-label { font-size: 11px; font-weight: 700; color: var(--fc-muted); }
.fc-kp-uitleg { margin: 0; }
.fc-kp-maakrij { flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.fc-kp-reden { min-width: 0; overflow-wrap: anywhere; }
.fc-kp-succes { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--fc-green-line); border-radius: 12px; background: var(--fc-paper); }
.fc-kp-kopieerrij { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; }
.fc-kp-kopieerrij > .fc-kp-label { grid-column: 1 / -1; }
.fc-kp-kopieerrij > .fc-button { white-space: nowrap; }
/* de pagina van de koper (kooplink-web.js): de melding en het formulier in de kaart van het inlogscherm, en het frame over het hele scherm */
.fc-kp-body { overflow-x: clip; }
.fc-kp-invoer, .fc-kp-melding { gap: 14px; }
.fc-kp-invoer p, .fc-kp-melding p { margin: 0; }
.fc-kp-titel { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.fc-kp-invoer .fc-input[aria-invalid='true'] { border-color: var(--fc-red); }
.fc-kp-deck { position: fixed; inset: 0; width: 100%; height: 100dvh; border: 0; background: var(--fc-ink); }

/* Presentatie maken (PRESENTATIE-PLAN §10): het plan lezen, bouwen, het resultaat */
.fc-pr-maken { display: flex; flex-direction: column; gap: 14px; max-width: 72rem; }
.fc-pr-maken > .fc-row { flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.fc-pr-plan { display: flex; flex-direction: column; gap: 12px; }
.fc-pr-plankop { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.fc-pr-plankop h3 { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.fc-pr-swatches { gap: 6px; }
.fc-pr-swatch { width: 26px; height: 26px; border-radius: 50%; background: var(--kleur); border: 1px solid var(--fc-line-strong); }
.fc-pr-planlijst { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.fc-pr-planlijst > li { border: 1px solid var(--fc-line-soft); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.fc-pr-plandoel { font-weight: 700; font-size: 14px; }
/* de regie van een plan (PRESENTATIE-REGIE-PLAN §3.5): de lijn boven de scènes, en de piek gemarkeerd */
.fc-pr-regieblok { display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px; background: var(--fc-pale); border: 1px solid var(--fc-line-soft); }
.fc-pr-regie { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 10px; align-items: baseline; }
.fc-pr-planlijst > li.fc-pr-piek { border-color: var(--fc-accent); box-shadow: inset 0 0 0 1px var(--fc-accent); }
.fc-pr-planacties { flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 4px; }
/* met textarea erbij, anders wint de 160px van textarea.fc-input */
textarea.fc-pr-tekst { resize: none; field-sizing: content; min-height: 0; line-height: 1.45; }
.fc-pr-tekst[data-kop='true'] { font-weight: 700; }
.fc-pr-telang { color: var(--fc-amber-text); }
.fc-pr-telang:empty { display: none; }
.fc-pr-telang[data-soort='leeg'] { color: var(--fc-muted); }
/* een veld dat de server ongeldig vond: de tekst blijft, de reden staat eronder */
.fc-pr-ongeldig { color: var(--fc-red); }
.fc-pr-ongeldig:empty { display: none; }
textarea.fc-pr-tekst[data-ongeldig] { border-color: var(--fc-red); }
.fc-pr-slot { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-top: 1px dashed var(--fc-line-soft); }
/* de beelden van één stop, in de kaart van die stop, onder haar teksten (STOP-SLEPEN-PLAN B) */
.fc-pr-stopbeelden { display: flex; flex-direction: column; margin-top: 6px; }
.fc-pr-stopbeelden > .fc-pr-beeldkop { margin: 0 0 2px; }
/* De groep Aftelling in de kaart van een stop (AFTELLING-PLAN §1.1), onder Beeld en in de vorm daarvan: een kleine kop, de schakelaar van Tekst
   aanwijzen, de velden onder elkaar, de plek als de hoeken van de kaart Logo met Midden eronder. Een stop die houdt: de velden grijs, zoals een
   weggehaalde tekst. De schakelaar krijgt hier de toestanden die hij bij Tekst aanwijzen nog niet had. */
.fc-pr-aftelling { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; min-width: 0; }
.fc-pr-aftelling p { margin: 0; overflow-wrap: anywhere; }
.fc-pr-aftelling > .fc-pr-schakel { align-self: flex-start; }
.fc-pr-aftelling > .fc-pr-schakel:hover:not(:disabled) i { background: var(--fc-muted); }
.fc-pr-aftelling > .fc-pr-schakel[aria-checked='true']:hover:not(:disabled) i { background: var(--fc-blue-deep); }
.fc-pr-aftelling > .fc-pr-schakel:active:not(:disabled) { transform: translateY(1px); }
.fc-pr-aftelling > .fc-pr-schakel:disabled { opacity: 0.55; cursor: not-allowed; }
.fc-pr-aftelvelden { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fc-pr-aftelling[data-houdt='true'] .fc-pr-aftelvelden { opacity: .5; }
.fc-pr-aftelling .fc-pillgroep.fc-pr-hoeken { display: grid; grid-template-columns: repeat(2, max-content); }
.fc-pr-aftelzinnen { display: flex; flex-direction: column; gap: 4px; }
.fc-pr-duim { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--fc-cover-bg); cursor: crosshair; touch-action: none; display: grid; place-items: center; }
.fc-pr-duim img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-pr-focus { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid var(--fc-on-blue); box-shadow: 0 0 0 2px var(--fc-blue-deep); pointer-events: none; }
.fc-pr-slotinfo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fc-pr-beeldknoppen { gap: 6px; flex-wrap: wrap; }
/* Nieuw beeld en Beeld aanpassen (deel 11): de tweede rij van een beeldvak met zijn paneel, en Vorige versie van dit beeld. De knoppen zijn die van de eerste rij. */
.fc-pr-beeldai { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fc-pr-beeldai p { margin: 0; overflow-wrap: anywhere; }
.fc-pr-beeldpaneel { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--fc-line); border-radius: 12px; background: var(--fc-pale); min-width: 0; }
.fc-pr-beeldpaneel label { display: grid; gap: 4px; }
.fc-pr-beeldpaneel .fc-row { gap: 6px 12px; }
.fc-pr-beeldpaneel .fc-button, .fc-pr-beeldai .fc-textbutton { white-space: nowrap; }
.fc-pr-beeldai .fc-textbutton { min-height: 32px; }
.fc-pr-beeldai > .fc-row:not(.fc-pr-beeldknoppen) { gap: 0 12px; }
.fc-pr-beeldai .fc-textbutton:hover:not(:disabled) { text-decoration: underline; }
.fc-pr-beeldai .fc-textbutton:active:not(:disabled) { color: var(--fc-blue-deep); }
.fc-pr-beeldai .fc-textbutton:disabled { color: var(--fc-muted); text-decoration: none; cursor: not-allowed; }
.fc-pr-beeldveld { width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; }
.fc-pr-beeldpaneel .fc-button { max-width: 100%; }
/* de kolom naast het duimpje is op 320 px maar 150 px breed: het paneel en zijn knoppen krijgen minder rand, zodat niets buiten het paneel valt */
@media (max-width: 420px) {
  .fc-pr-beeldpaneel { padding: 10px 8px; }
  .fc-pr-beeldpaneel .fc-button { padding-left: 12px; padding-right: 12px; }
}
.fc-pr-beeldveld[data-ongeldig] { border-color: var(--fc-red); }
/* Uit de Beeldwereld (BEELDWERELD-BEELDEN-PLAN §4.3): een knop per plek of ding, met een duimpje en de naam op één regel (afgekapt, nooit twee
   regels); ingedrukt is blauw. Ze breken af naar een volgende regel */
.fc-pr-wereldkeuze { display: grid; gap: 4px; min-width: 0; }
.fc-pr-wereldknoppen { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.fc-pr-wereldknop { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 3px 10px 3px 3px; border: 1px solid var(--fc-line); border-radius: var(--fc-radius-pil); background: var(--fc-paper); color: var(--fc-ink); font: inherit; font-size: 13px; cursor: pointer; }
.fc-pr-wereldknop img { width: 36px; height: 24px; border-radius: var(--fc-radius-pil); object-fit: cover; flex: 0 0 auto; }
.fc-pr-wereldknop span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fc-pr-wereldknop:hover { border-color: var(--fc-line-strong); }
.fc-pr-wereldknop:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 2px; }
.fc-pr-wereldknop:active { transform: translateY(1px); }
.fc-pr-wereldknop[aria-pressed='true'] { border-color: var(--fc-blue); background: var(--fc-pale); color: var(--fc-blue-ink); box-shadow: inset 0 0 0 1px var(--fc-blue); }
.fc-pr-wereldknop:disabled { opacity: 0.55; cursor: not-allowed; }
.fc-pr-wereldnoot { margin: 0; }
.fc-pr-beeldveld:disabled { cursor: not-allowed; opacity: 0.6; }
/* het vak waar een beeld voor loopt of wacht: het brandpunt is niet te slepen */
.fc-pr-duim[data-bezig] { cursor: not-allowed; opacity: 0.65; }
.fc-pr-melding { color: var(--fc-amber-text); background: var(--fc-yellow); border: 1px solid var(--fc-amber-line); border-radius: 10px; padding: 6px 10px; }
/* een video van elk beeld (05-video): het blokje Video onder de knoppen van een beeldvak, in dezelfde kolom (SCHERMONTWERP: een groep is wat je in
   één handeling verandert, en de video is een eigenschap van het beeld). Elke knop of tekstknop staat op één regel; de knoppen breken af naar een
   volgende regel, nooit binnen zichzelf. De staten (hover, focus, actief, uit) komen van .fc-button en .fc-textbutton; uit heeft zijn reden eronder */
.fc-pr-film { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px dotted var(--fc-line-soft); min-width: 0; }
.fc-pr-film > h5 { margin: 0; font-weight: 700; }
.fc-pr-film p { margin: 0; overflow-wrap: anywhere; }
.fc-pr-film .fc-button, .fc-pr-film .fc-textbutton { white-space: nowrap; }
.fc-pr-filmknoppen { gap: 6px 12px; flex-wrap: wrap; align-items: center; }
.fc-pr-filmbeweging { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.fc-pr-filmbeweging > label { width: 100%; }
.fc-pr-filmbeweging > label[hidden] { display: none; }
textarea.fc-pr-filmveld { resize: none; field-sizing: content; min-height: 0; line-height: 1.45; width: 100%; }
/* een eigen film en een film die er al is, en Begint bij (EIGEN-FILM-EN-WEGHALEN-PLAN §1.1) */
.fc-pr-filmbegin, .fc-pr-filmeigen { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fc-pr-filmbegin .fc-pillgroep > button { padding: 4px 11px; min-height: 30px; font-size: 12px; }
.fc-pr-filmlijst { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; min-width: 0; border: 1px solid var(--fc-line-soft); border-radius: 8px; padding: 4px; }
.fc-pr-filmrij { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; padding: 4px; border: 1px solid transparent; border-radius: 6px; background: var(--fc-paper); color: var(--fc-ink); font: inherit; text-align: left; cursor: pointer; }
.fc-pr-filmrij:hover { background: var(--fc-pale); border-color: var(--fc-pale-line); }
.fc-pr-filmrij:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 1px; }
.fc-pr-filmrij:active { background: var(--fc-kop-hover); }
.fc-pr-filmrij:disabled { cursor: progress; opacity: 0.6; }
.fc-pr-filmrij > img, .fc-pr-filmduim { width: 64px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; background: var(--fc-cover-bg); display: block; }
.fc-pr-filmrijtekst { display: flex; flex-direction: column; min-width: 0; }
.fc-pr-filmrijtekst > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-pr-kleuren { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 16px; }
.fc-pr-kleur { display: flex; align-items: center; gap: 10px; font-size: 14px; min-width: 0; position: relative; }
.fc-pr-staal { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--fc-line); flex: none; }
.fc-pr-kleurinvoer { position: absolute; left: 0; top: 0; width: 30px; height: 30px; opacity: 0; cursor: pointer; }
.fc-pr-kleur .fc-textbutton { margin-left: auto; }

@media (max-width: 1100px) {
  .fc-pr-werk { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'deck' 'paneel' 'lijst'; }
  .fc-pr-deckvak, .fc-pr-paneel { position: static; max-height: none; }
}
@media (max-width: 767px) {
  /* de wachtrij: de vraag krijgt een eigen regel (met beletselteken), de rest en de knop staan eronder */
  .fc-pr-wachtrij-tekst { flex-basis: 100%; }
  .fc-pr-kleuren { grid-template-columns: minmax(0, 1fr); }
  .fc-pr-slot { grid-template-columns: 88px minmax(0, 1fr); }
  .fc-pr-rij { grid-template-columns: 18px 24px minmax(0, 1fr) auto auto; }
  /* Algemeen heeft twee kolommen, geen vijf: anders valt zijn tekst in de smalle nummerkolom ("Al…") */
  .fc-pr-algemeen { grid-template-columns: 18px minmax(0, 1fr); }
  .fc-pr-rij > .fc-pr-klein:last-child { display: none; }
  .fc-pr-stoprij { padding-left: 72px; }
  .fc-pr-stopgreep { width: 18px; }
  .fc-pr-stoprij::before { left: 49px; }
  .fc-pr-overgangrij { padding-left: 72px; padding-right: 8px; column-gap: 6px; }
  .fc-pr-overgangrij::before { left: 49px; }
  /* op 375 px past "Overgang valt weg." met de knop op één regel; op 320 px breekt hij af naar een tweede regel, elke tekst blijft heel */
  .fc-pr-overgangtekst { font-size: 11px; }
  .fc-pr-overgangknop { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .fc-pr-schakel i::after { transition: none; } }

/* --- Deck weg (06-deck-weg): de schakelaar boven het tabblad, Look en Beeldwereld, de tegels, de kaart PowerPoint ------------ */
.fc-presentatie-schakel { margin: 0 0 calc(var(--fc-kant-ruimte) * 2); }
.fc-presentatie-weergave { min-width: 0; }
.fc-pr-leest { margin: 10px 0 12px; overflow-wrap: anywhere; }
.fc-pr-leest a { color: var(--fc-blue-deep); text-decoration: underline; text-underline-offset: 2px; }
.fc-pr-leest a:hover { color: var(--fc-ink); }
.fc-pr-leest a:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 2px; border-radius: 4px; }

/* Look en Beeldwereld: één container, twee kolommen vanaf 1000 px BINNENbreedte (een zijbalk of een smal venster telt mee) */
.fc-stijlscherm { container: stijlscherm / inline-size; min-width: 0; }
.fc-stijlintro { margin: 0 0 12px; }
.fc-stijlraster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@container stijlscherm (min-width: 1000px) {
  .fc-stijlraster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.fc-stijlraster > * { min-width: 0; }
.fc-stijlwoorden[hidden] { display: none; }

/* De tegels om een look te kiezen */
.fc-looktegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; min-width: 0; }
.fc-looktegels-kop { grid-column: 1 / -1; margin: 8px 0 0; }
.fc-lookkeuze { min-width: 0; }
.fc-looktegel { position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0; box-sizing: border-box; padding: 6px 6px 8px; background: var(--fc-paper); border: 2px solid var(--fc-line-strong); border-radius: 14px; cursor: pointer; }
.fc-looktegel:hover { border-color: var(--fc-accent); }
.fc-looktegel:has(input:focus-visible) { outline: 2px solid var(--fc-focus); outline-offset: 2px; }
/* ingedrukt: de rand blijft, er verschuift niets */
.fc-looktegel:active { border-color: var(--fc-accent); }
.fc-looktegel[data-gekozen='true'] { border-color: var(--fc-accent); }
.fc-looktegels[aria-busy='true'] .fc-looktegel { pointer-events: none; cursor: progress; }
.fc-looktegels[aria-busy='true'] .fc-looktegel:not([data-gekozen='true']) { opacity: 0.6; }
.fc-looktegel-beeld { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 9px; background: var(--fc-pale); }
.fc-looktegel-beeld[data-leeg='true'] { position: relative; display: grid; place-items: center; overflow: hidden; }
.fc-looktegel-balk { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; }
.fc-looktegel-leeg { position: relative; z-index: 1; font-size: 11px; font-weight: 600; padding: 0 6px; text-align: center; }
.fc-looktegel-naam { font-weight: 700; font-size: 13px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.fc-looktegel-stippen { display: flex; gap: 4px; padding: 0 2px; }
.fc-looktegel-stippen i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--fc-line-strong); }
.fc-looktegel-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.fc-looktegel-pil { position: absolute; top: 12px; right: 12px; display: none; min-height: 20px; box-sizing: border-box; padding: 1px 9px; border-radius: var(--fc-radius-pil); background: var(--fc-accent); color: var(--fc-op-wit); font-size: 11px; font-weight: 700; line-height: 18px; white-space: nowrap; }
.fc-looktegel[data-pil='gekozen'] .fc-looktegel-pil, .fc-looktegel[data-pil='voorstel'] .fc-looktegel-pil { display: inline-block; }
/* bezig: een kleine draaiende cirkel op de plek van de pil */
.fc-looktegel[data-pil='bezig'] .fc-looktegel-pil { display: inline-block; width: 20px; padding: 0; border: 2px solid var(--fc-op-wit); border-right-color: transparent; background: var(--fc-accent); animation: fc-looktegel-draai 0.8s linear infinite; }
@keyframes fc-looktegel-draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fc-looktegel[data-pil='bezig'] .fc-looktegel-pil { animation: none; } }
.fc-looktegels-fout { margin: 0; color: var(--fc-red); }
.fc-looktegels-fout[hidden] { display: none; }
.fc-lookdetail { display: grid; gap: 6px; min-width: 0; }
.fc-lookdetail p { margin: 0; }

/* de kaart PowerPoint */
.fc-pr-pptx { min-width: 0; }
.fc-pr-pptx-taal { display: grid; gap: 6px; padding: 10px 0 2px; border-top: 1px dashed var(--fc-line-soft); min-width: 0; }
.fc-pr-pptx-taalkop { font-size: 14px; }
.fc-pr-pptx-regel { margin: 0; overflow-wrap: anywhere; }
.fc-pr-pptx-regel[data-waarschuwing='true'] { color: var(--fc-amber-text); }
.fc-pr-pptx-rij { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.fc-pr-pptx-rij > .fc-button { white-space: nowrap; text-decoration: none; }
.fc-pr-pptx-rij > .fc-textbutton { white-space: nowrap; }
.fc-pr-pptx-reden { margin: 0; }
.fc-pr-pptx p { margin: 0; }
@media (max-width: 480px) {
  /* de knoppen onder de regel, niet ernaast: een knop breekt nooit */
  .fc-pr-pptx-rij { flex-direction: column; align-items: stretch; }
  .fc-pr-pptx-rij > .fc-button { text-align: center; }
}

/* de kaart Vertaling (07-engels): drie groepen, elk één handeling; alleen tokens, en nergens breder dan zijn kolom */
.fc-pr-vertaling { min-width: 0; overflow-x: clip; }
.fc-pr-vertaling p { margin: 0; overflow-wrap: anywhere; }
.fc-pr-vertaling-status { font-weight: 700; font-size: 14px; }
.fc-pr-vertaling-vink { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; cursor: pointer; min-height: 32px; }
.fc-pr-vertaling-vink input { margin-top: 2px; flex: none; accent-color: var(--fc-blue); cursor: pointer; }
.fc-pr-vertaling-vink:hover span { color: var(--fc-blue-deep); }
.fc-pr-vertaling-vink:hover input:not(:disabled) { accent-color: var(--fc-blue-deep); }
.fc-pr-vertaling-vink input:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 2px; }
.fc-pr-vertaling-vink input:disabled { cursor: not-allowed; }
.fc-pr-vertaling .fc-button { align-self: flex-start; white-space: nowrap; }
.fc-pr-vertaling .fc-button:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 2px; }
.fc-pr-vertaling .fc-button:disabled:not([data-busy='true']) { opacity: 0.55; cursor: not-allowed; }
.fc-pr-vertaling-laatste { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; min-width: 0; }
.fc-pr-vertaling-laatste > p { flex: 1 1 220px; min-width: 0; }
.fc-pr-vertaling .fc-textbutton { white-space: nowrap; min-height: 32px; font-size: 13px; }
.fc-pr-vertaling .fc-textbutton:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 2px; border-radius: 6px; }
.fc-pr-vertaling .fc-textbutton:active:not(:disabled) { opacity: 0.7; }
.fc-pr-vertaling .fc-textbutton:disabled { color: var(--fc-muted); text-decoration: none; cursor: not-allowed; }
/* een rij die naar een scène gaat: één regel, met een beletselteken en de hele regel in de title; hover, focus, actief en uit hebben een eigen gedaante */
.fc-pr-telangrij { display: block; width: 100%; min-width: 0; box-sizing: border-box; min-height: 32px; margin: 0; padding: 6px 8px; border: 0; border-radius: 6px; background: none; color: var(--fc-blue); font: inherit; font-size: 13px; font-weight: 600; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.fc-pr-telangrij:hover:not(:disabled) { background: var(--fc-pale); text-decoration: underline; }
.fc-pr-telangrij:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 1px; }
.fc-pr-telangrij:active:not(:disabled) { background: var(--fc-kop-hover); text-decoration: none; }
.fc-pr-telangrij:disabled { color: var(--fc-muted); cursor: not-allowed; text-decoration: none; }
/* de waarschuwing in de kaarten van de koper en de PowerPoint */
.fc-pr-vertaalbezwaar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
.fc-pr-vertaalbezwaar p { margin: 0; overflow-wrap: anywhere; }
.fc-pr-vertaalbezwaar .fc-textbutton, .fc-pr-naarvertaling { white-space: nowrap; min-height: 32px; font-size: 13px; }
.fc-pr-naarvertaling:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 2px; border-radius: 6px; }
.fc-pr-naarvertaling:active { opacity: 0.7; }
@media (max-width: 459px) {
  /* onder 460 px de knop over de hele breedte, en Ongedaan maken onder zijn regel */
  .fc-pr-vertaling .fc-button { align-self: stretch; }
  .fc-pr-vertaling-laatste > p { flex-basis: 100%; }
}

/* Kleuren van de look overnemen (in de kaart Kleuren) */
.fc-pr-overname { padding-bottom: 10px; border-bottom: 1px dashed var(--fc-line-soft); margin-bottom: 4px; }
.fc-pr-overname p { margin: 0; }
.fc-pr-overname-rij { flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.fc-pr-overname-rij > .fc-button, .fc-pr-overname-rij > .fc-textbutton { white-space: nowrap; }
.fc-pr-overname-staal { display: inline-flex; gap: 6px; }
.fc-pr-overname-staal i { display: block; }

/* een kaart die rechtstreeks in het paneel hangt (PowerPoint) krimpt niet weg: zijn overflow: hidden liet hem anders tot 2 px zakken */
.fc-pr-paneel > .fc-vouwkaart { flex: none; }

/* ---- Stijlbestanden: de knoppen van een look, licht en donker (STYLE-FILES-PLAN §6, §6a) ---- */
/* De tegel "Geen look gekozen": grijs, zonder beeld (Bas, 30 sep). */
.fc-looktegel-beeld[data-geen='true'] { background: var(--fc-line-soft); }
.fc-eigenstijl[hidden], .fc-knoppenvak[hidden] { display: none; }
.fc-stijlknoppen[aria-busy='true'] { opacity: 0.6; pointer-events: none; cursor: progress; }
/* Voor alle beelden: elke knop is één groep (label, invoer, uitleg); het raster ligt op de knoppen. */
.fc-stijlknoppen-rij { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px 16px; min-width: 0; }
.fc-stijlknop { min-width: 0; }
.fc-stijlknop label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fc-stijlknop .fc-textbutton { white-space: nowrap; }
.fc-kleurrij { display: flex; gap: 8px; align-items: stretch; min-width: 0; }
.fc-kleurrij .fc-kleurnaam { flex: 1 1 auto; min-width: 0; }
.fc-kleurknop { flex: 0 0 44px; width: 44px; height: auto; align-self: stretch; min-height: 36px; padding: 2px; border: 1px solid var(--fc-line-strong); border-radius: 10px; background: var(--fc-paper); cursor: pointer; }
.fc-kleurknop:hover { border-color: var(--fc-accent); }
.fc-kleurknop:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 2px; }
.fc-kleurknop:active { border-color: var(--fc-blue); }
.fc-kleurknop:disabled { opacity: 0.5; cursor: not-allowed; }
/* Licht en donker: één kaart per variant; het raster ligt op de kaarten, een kaart breekt nooit over een kolom. */
.fc-variantkaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; min-width: 0; }
.fc-variantkaart { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 10px; border: 1px solid var(--fc-line); border-radius: 14px; background: var(--fc-paper); }
.fc-variantkaart[data-los='true'] { border-color: var(--fc-accent); }
/* altijd twee sporen: een variant met één voorbeeld toont het even groot als een met twee */
.fc-variantbeelden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; min-width: 0; }
.fc-variantbeelden img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 9px; background: var(--fc-pale); }
.fc-variantkop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.fc-variantprompt summary { cursor: pointer; font-size: 13px; color: var(--fc-blue); }
.fc-variantprompt summary:hover { text-decoration: underline; }
.fc-variantprompt summary:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 2px; border-radius: 4px; }
.fc-variantprompt pre { margin: 6px 0 0; padding: 8px 10px; max-height: 16rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--fc-veld); border-radius: 8px; }
.fc-variantruw { width: 100%; box-sizing: border-box; min-height: 10rem; resize: vertical; }
/* Nieuw beeld: de toon van het nieuwe beeld (STYLE-FILES-PLAN §5 punt 5). */
.fc-pr-toonkeuze { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fc-pr-toonoptie { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--fc-line-strong); border-radius: var(--fc-radius-pil); background: var(--fc-paper); font-size: 13px; white-space: nowrap; cursor: pointer; }
.fc-pr-toonoptie:hover { border-color: var(--fc-accent); }
.fc-pr-toonoptie:has(input:focus-visible) { outline: 2px solid var(--fc-focus); outline-offset: 2px; }
.fc-pr-toonoptie:has(input:checked) { border-color: var(--fc-accent); background: var(--fc-pale); }
.fc-pr-toonoptie:active { border-color: var(--fc-blue); }
.fc-pr-toonoptie:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.fc-pr-toonnoot[hidden] { display: none; }

/* trailer: draaiboek, muziek, animatic, film
 * De kaarten 3 tot 6 van de nieuwe Trailer (09-trailer.md §2.3 tot §2.6, mockup 7b) en Wat je krijgt (TRAILER-WENSEN-9-OKT-PLAN.md
 * §2.10). Alleen --fc-* tokens; de enige nieuwe waarde is de kleur van de golfjes, hier als token met zijn donkere tegenhanger.
 * De kaartbreedte beslist (container query), niet het scherm: de kaart staat naast een zijbalk. */
:root {
  --fc-golf: #9fb6cf;
}
:root[data-theme='dark'] {
  --fc-golf: #4d6a8a;
}
.fc-tr-lijf { container: trkaart / inline-size; min-width: 0; display: grid; gap: 16px; }
.fc-tr-kaart .fc-textbutton { white-space: nowrap; min-height: 32px; }
.fc-tr-knopreden { display: inline-grid; gap: 4px; justify-items: start; min-width: 0; max-width: 34ch; }
.fc-tr-vinkrij { font-weight: 600; cursor: pointer; }
.fc-tr-vinkrij input { width: 16px; height: 16px; accent-color: var(--fc-blue); }
textarea.fc-input.fc-tr-veld { min-height: 2lh; field-sizing: content; resize: none; }

/* de afspeelknop en de golfbalk */
.fc-tr-speel { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 0; display: inline-grid; place-items: center; cursor: pointer; background: var(--fc-verloop); color: var(--fc-on-blue); transition: filter 0.12s ease, transform 0.08s ease; }
.fc-tr-speel svg { width: 12px; height: 12px; }
.fc-tr-speel-groot { width: 40px; height: 40px; }
.fc-tr-speel:hover:not(:disabled) { filter: brightness(1.15); }
.fc-tr-speel:active:not(:disabled) { transform: scale(0.96); }
.fc-tr-speel[aria-pressed='true'] { box-shadow: 0 0 0 3px var(--fc-blue-glow); }
.fc-tr-speel[aria-pressed='true'] svg path { fill: currentColor; }
.fc-tr-golf { position: relative; height: 46px; border-radius: 10px; background: var(--fc-paper); border: 1px solid var(--fc-line-soft); min-width: 0; }
.fc-tr-golf svg { display: block; width: calc(100% - 20px); height: 100%; margin: 0 10px; }
.fc-tr-golfpad { stroke: var(--fc-golf); stroke-width: 0.55; fill: none; }
.fc-tr-markering { position: absolute; top: -8px; bottom: -8px; left: var(--fc-tr-pos, 0%); width: 2px; background: var(--fc-red); }
.fc-tr-markering > span { position: absolute; top: 100%; left: 4px; margin-top: 2px; font-size: 10px; font-weight: 700; color: var(--fc-red); white-space: nowrap; }
.fc-tr-golf .fc-tr-markering[role='slider'] { cursor: ew-resize; touch-action: none; }
.fc-tr-golf .fc-tr-markering[role='slider']::before { content: ''; position: absolute; inset: 0 -9px; }
.fc-tr-golf .fc-tr-markering[data-sleept] { background: var(--fc-ink); }
.fc-tr-golf:has(.fc-tr-markering) { margin-bottom: 20px; }

/* groepen: wat je in één handeling verandert */
.fc-tr-groep { background: var(--fc-paper); border: 1px solid var(--fc-pale-line); border-radius: 14px; padding: 14px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.fc-tr-groep h4, .fc-tr-goedkeuren h4 { margin: 0; font-size: 14px; }
.fc-tr-veldvlak { background: var(--fc-veld); border-color: var(--fc-line-soft); }
.fc-tr-twee { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.fc-tr-klap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; align-items: end; padding-left: 4px; }
.fc-tr-citaat { background: var(--fc-veld); border-radius: 10px; padding: 9px 11px; font-weight: 600; overflow-wrap: anywhere; }
.fc-tr-citaat span { display: block; font-weight: 500; color: var(--fc-muted); font-size: 11.5px; }
.fc-tr-groepbeeld { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 9px; background: var(--fc-cover-bg); }
.fc-tr-groepbeeld[data-leeg] { display: grid; place-items: center; color: var(--fc-muted); font-size: 11px; }
.fc-tr-voorbeeld { white-space: normal; max-width: 100%; }
.fc-tr-wis { border: 0; background: none; color: inherit; cursor: pointer; font: inherit; font-size: 14px; line-height: 1; padding: 0 2px; border-radius: 50%; }
.fc-tr-wis:hover { color: var(--fc-red); }
.fc-tr-wis:active { opacity: 0.7; }
.fc-tr-logo { display: grid; place-items: center; width: 160px; max-width: 100%; aspect-ratio: 1; border-radius: 12px; background: var(--fc-doek); border: 1px solid var(--fc-line-soft); }
.fc-tr-logo img { max-width: 80%; max-height: 80%; }

/* de takes van een regel en de versies van de muziek */
.fc-tr-takes { display: flex; flex-wrap: wrap; gap: 6px; }
.fc-tr-versies { display: grid; gap: 6px; }
.fc-tr-take { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--fc-line); border-radius: var(--fc-radius-pil); background: var(--fc-paper); padding: 2px 4px 2px 3px; }
.fc-tr-take[data-gekozen='true'], .fc-tr-versie[data-gekozen='true'] { border-color: var(--fc-blue); background: var(--fc-pale); }
.fc-tr-take[data-verouderd='true'] { border-style: dashed; }
.fc-tr-takekeuze { border: 0; background: none; font: inherit; font-weight: 700; font-size: 11px; padding: 5px 8px; border-radius: var(--fc-radius-pil); cursor: pointer; white-space: nowrap; color: inherit; text-align: left; }
.fc-tr-takekeuze:hover { background: var(--fc-bg); }
.fc-tr-takekeuze:active { opacity: 0.7; }
.fc-tr-takekeuze[aria-pressed='true'] { color: var(--fc-blue-ink); cursor: default; }
.fc-tr-versie { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; align-items: center; border: 1px solid var(--fc-line); border-radius: 12px; background: var(--fc-paper); padding: 6px 10px 6px 6px; }
.fc-tr-versie .fc-tr-golf { height: 28px; margin: 0; }

/* de tabel van het draaiboek */
.fc-tr-tabel { display: grid; border-top: 1px solid var(--fc-line-soft); min-width: 0; }
.fc-tr-tabelkop, .fc-tr-beatrij { display: grid; grid-template-columns: 56px 256px minmax(0, 1.25fr) minmax(0, 1.6fr) minmax(0, 0.8fr); gap: 0 16px; align-items: center; }
.fc-tr-tabelkop { font-size: 10px; letter-spacing: 0.1em; font-weight: 700; color: var(--fc-muted); padding: 10px 12px; border-bottom: 1px solid var(--fc-line-soft); }
.fc-tr-beatrij { position: relative; padding: 8px 12px; border-left: 3px solid transparent; border-bottom: 1px solid var(--fc-line-soft); cursor: pointer; background: var(--fc-paper); transition: background 0.12s ease; }
.fc-tr-beatrij:hover { background: var(--fc-veld); }
.fc-tr-beatrij:active { background: var(--fc-pale); }
.fc-tr-beatrij[data-open='true'] { background: var(--fc-pale); }
/* de knop die de beat openklapt ligt als doorzichtig vlak over de rij; de miniatuurknop en de rest van de rij erboven blijven klikbaar */
.fc-tr-openknop { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 0; }
.fc-tr-openknop:focus-visible { outline: 2px solid var(--fc-blue-ink); outline-offset: -2px; }
.fc-tr-beatrij .fc-tr-duimknop, .fc-tr-beatrij .fc-tr-keuzerij, .fc-tr-beatrij .fc-tr-beatplus { position: relative; z-index: 1; }
/* de plus helemaal rechts in elke rij (Bas, 9 okt): een beat erna zonder naar Beat toevoegen bovenaan te scrollen; de vorm van .fc-tr-ikoon, rond.
   Hij deelt de laatste kolom met de chips (.fc-tr-rijeind), zodat de kolommen ervoor geen breedte verliezen */
.fc-tr-rijeind { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fc-tr-rijeind > .fc-tr-geluid { flex: 1 1 auto; }
.fc-tr-beatplus { flex: none; width: 30px; height: 30px; padding: 0; margin-left: auto; border-radius: var(--fc-radius-pil); }
.fc-tr-beatplus:hover:not(:disabled) { border-color: var(--fc-pale-line); background: var(--fc-pale); color: var(--fc-blue-ink); }
.fc-tr-beatplus[data-busy='true'] { cursor: progress; }
.fc-tr-beatplus[data-busy='true'] svg { animation: fc-spin 0.7s linear infinite; }
.fc-tr-beatrij[data-soort='kaart'], .fc-tr-beatrij[data-soort='eindkaart'] { background: var(--fc-veld); }
.fc-tr-beatnr { font-variant-numeric: tabular-nums; }
.fc-tr-beatnr b { display: block; font-size: 13px; }
.fc-tr-beatnr span { font-size: 10.5px; color: var(--fc-muted); white-space: nowrap; }
.fc-tr-duim { width: 256px; max-width: 100%; aspect-ratio: 16 / 9; border-radius: 7px; background: var(--fc-cover-bg); overflow: hidden; }
.fc-tr-duim img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fc-tr-duim[data-kaart], .fc-tr-duim[data-zwart] { background: var(--fc-doek); }
.fc-tr-duim[data-kaart] { color: var(--fc-op-doek); display: grid; place-items: center; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; line-height: 1.2; padding: 8px; overflow-wrap: anywhere; }
.fc-tr-duim[data-kaart] img { width: auto; max-width: 70%; max-height: 80%; object-fit: contain; }
.fc-tr-duimknop { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; border-radius: inherit; cursor: zoom-in; transition: filter 0.12s ease, transform 0.08s ease; }
.fc-tr-groep > .fc-tr-duimknop { height: auto; border-radius: 9px; }
.fc-tr-duimknop:hover { filter: brightness(1.06); }
.fc-tr-duimknop:focus-visible { outline: 2px solid var(--fc-blue-ink); outline-offset: -2px; }
.fc-tr-duimknop:active { transform: scale(0.99); }
.fc-tr-maak { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 14px; margin-bottom: 12px; }
.fc-tr-maak > .fc-small { flex: 1 1 260px; min-width: 0; align-self: center; }
.fc-tr-duim[data-leeg] { display: grid; place-items: center; color: var(--fc-muted); font-size: 10px; }
.fc-tr-hoor { min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.fc-tr-en { font-weight: 600; }
.fc-tr-wie { color: var(--fc-muted); font-weight: 500; }
.fc-tr-sub, .fc-tr-geen { color: var(--fc-muted); font-size: 11.5px; }
.fc-tr-titel { font-weight: 800; letter-spacing: 0.04em; font-size: 12px; }
.fc-tr-beweging { min-width: 0; font-size: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.fc-tr-beweging[data-leeg] { color: var(--fc-muted); }
.fc-tr-bewegingcel { display: grid; gap: 8px; min-width: 0; }
/* camera, Eindbeeld en Referentie op één regel: in de dichte rij, en in de clip-editor van Beeld en film */
.fc-tr-keuzerij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; }
.fc-tr-keuzerij .fc-field { display: flex; align-items: center; gap: 6px; }
.fc-tr-beatrij .fc-tr-keuzerij select.fc-input { width: auto; min-height: 30px; padding: 2px 30px 2px 10px; font-size: 12px; }
/* Eindbeeld en Referentie (beide .fc-tr-eindbeeld): een vinkje dat eruitziet als een radioknop (een schermlezer zegt "selectievakje", en dat klopt: aan of uit) */
.fc-tr-eindbeeld .fc-tr-vinkrij { gap: 6px; }
.fc-tr-eindbeeld input[type='checkbox'] { appearance: none; flex: none; width: 16px; height: 16px; margin: 0; border-radius: 50%; border: 1.5px solid var(--fc-line-strong); background: var(--fc-paper); cursor: pointer; transition: border-color 0.12s ease, transform 0.08s ease; }
.fc-tr-eindbeeld input[type='checkbox']:hover:not(:disabled) { border-color: var(--fc-blue-deep); }
.fc-tr-eindbeeld input[type='checkbox']:checked { background: var(--fc-blue-deep); border-color: var(--fc-blue-deep); box-shadow: inset 0 0 0 3px var(--fc-paper); }
.fc-tr-eindbeeld input[type='checkbox']:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 2px; }
.fc-tr-eindbeeld input[type='checkbox']:active:not(:disabled) { transform: scale(0.94); }
.fc-tr-eindbeeld input[type='checkbox']:disabled { opacity: 0.55; cursor: not-allowed; }
.fc-tr-eindbeeld .fc-tr-vinkrij:has(input:disabled) { cursor: not-allowed; color: var(--fc-muted); }
.fc-tr-geluid { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.fc-tr-vouw { flex-basis: 100%; min-width: 0; }
.fc-tr-vouw > summary { color: var(--fc-blue); font-weight: 700; width: fit-content; min-height: 28px; display: flex; align-items: center; }
.fc-tr-vouw > summary:hover { text-decoration: underline; }
.fc-tr-vouw > summary:active { opacity: 0.7; }
.fc-tr-prompt { margin: 6px 0; background: var(--fc-veld); border: 1px solid var(--fc-line-soft); border-radius: 10px; padding: 10px 12px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; line-height: 1.6; color: var(--fc-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.fc-tr-open { border-left: 3px solid var(--fc-pale-line); border-bottom: 1px solid var(--fc-line-soft); background: var(--fc-pale); padding: 8px 12px 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.fc-tr-open-kop { grid-column: 1 / -1; max-width: 320px; }
.fc-tr-open[data-groepen='1'] { grid-template-columns: minmax(0, 420px); }
@container trkaart (min-width: 520px) {
  .fc-tr-open[data-groepen='3'], .fc-tr-open[data-groepen='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fc-tr-open[data-groepen='3'] > .fc-tr-groep:last-child { grid-column: 1 / -1; }
}
@container trkaart (min-width: 870px) {
  .fc-tr-open[data-groepen='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fc-tr-open[data-groepen='3'] > .fc-tr-groep:last-child { grid-column: auto; }
}
@container trkaart (max-width: 760px) {
  .fc-tr-tabelkop { display: none; }
  .fc-tr-beatrij { grid-template-columns: 66px 176px minmax(0, 1fr); gap: 6px 10px; }
  .fc-tr-duim { width: 176px; }
  .fc-tr-bewegingcel, .fc-tr-rijeind { grid-column: 2 / -1; }
}
@container trkaart (max-width: 420px) {
  .fc-tr-beatrij { grid-template-columns: 176px minmax(0, 1fr); }
  .fc-tr-beatnr { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; }
  .fc-tr-bewegingcel, .fc-tr-rijeind { grid-column: 1 / -1; }
}
@container trkaart (min-width: 760px) {
  .fc-tr-twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* het Draaiboek van een trailer met script (TRAILER-SCRIPTPAGINA-PLAN.md §9.2): een dunne kop boven de shots van elk moment (zijn begin
   grijs op één regel, N shots met − en +, Opnieuw), en onder een rij de melding van een clip die te kort is (§7) */
.fc-tr-momentkop { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 5px 12px; background: var(--fc-veld); border-left: 3px solid var(--fc-line-strong); border-bottom: 1px solid var(--fc-line-soft); font-size: 12px; min-width: 0; }
.fc-tr-momentkop[data-soort] { border-left-color: transparent; }
.fc-tr-momentkop[data-toestand='veranderd'] { border-left-color: var(--fc-amber-line); }
.fc-tr-momentbegin { flex: 1 1 220px; min-width: 0; color: var(--fc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-tr-momentaantal { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.fc-tr-momentaantal b { min-width: 48px; text-align: right; }
.fc-tr-momentknop { width: 26px; height: 26px; padding: 0; border-radius: var(--fc-radius-pil); }
.fc-tr-momentknop:hover:not(:disabled) { border-color: var(--fc-pale-line); background: var(--fc-pale); color: var(--fc-blue-ink); }
.fc-tr-momentknop[data-busy='true'] { cursor: progress; }
.fc-tr-momentknop[data-busy='true'] svg { animation: fc-spin 0.7s linear infinite; }
.fc-tr-beatmelding { padding: 6px 12px 10px 15px; background: var(--fc-paper); border-bottom: 1px solid var(--fc-line-soft); }
.fc-tr-inscript[data-toon='waarschuwing'] { color: var(--fc-amber-text); }
.fc-tr-inscript .fc-textbutton { font-size: inherit; }

/* de animatic */
.fc-tr-boven { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
@container trkaart (min-width: 760px) {
  .fc-tr-boven { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
}
.fc-tr-spelervak { display: grid; gap: 12px; min-width: 0; }
.fc-tr-doek { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--fc-doek); }
.fc-tr-doek video, .fc-tr-doek > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--fc-doek); }
.fc-tr-doek > img { object-fit: cover; opacity: 0.4; }
.fc-tr-doekmelding { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; color: var(--fc-op-doek); font-weight: 600; }
.fc-tr-badge { position: absolute; top: 12px; left: 12px; z-index: 1; pointer-events: none; background: var(--fc-doekknop-vlak); color: var(--fc-op-doek); border: 1px solid var(--fc-doekknop-rand); border-radius: var(--fc-radius-pil); padding: 4px 10px; font-size: 11px; font-weight: 600; }
.fc-tr-bediening { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.fc-tr-banen { --fc-tr-naam: 58px; position: relative; display: grid; grid-template-columns: var(--fc-tr-naam) minmax(0, 1fr); gap: 6px 10px; align-items: center; padding-bottom: 22px; }
.fc-tr-baannaam { font-size: 10.5px; font-weight: 700; color: var(--fc-muted); }
.fc-tr-baan { display: flex; gap: 2px; height: 34px; min-width: 0; position: relative; align-items: center; }
.fc-tr-blok { flex: var(--fc-tr-t, 1) 1 0; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 5px; background: var(--fc-line-soft); position: relative; overflow: hidden; cursor: pointer; transition: filter 0.12s ease; }
.fc-tr-blok:hover { filter: brightness(1.1); }
.fc-tr-blok:active { filter: brightness(0.95); }
.fc-tr-blok img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fc-tr-blok[data-kaart='true'], .fc-tr-blok[data-zwart='true'] { background: var(--fc-doek); color: var(--fc-op-doek); }
.fc-tr-blok[data-kaart='true'] span { display: block; font-size: 8px; font-weight: 800; letter-spacing: 0.06em; line-height: 1.1; padding: 0 2px; overflow: hidden; text-overflow: clip; }
.fc-tr-blok[data-gekozen='true'] { outline: 2px solid var(--fc-accent); outline-offset: 1px; }
.fc-tr-stemblok { flex: var(--fc-tr-t, 1) 1 0; min-width: 0; height: 22px; border-radius: 5px; background: var(--fc-pale); border: 1px solid var(--fc-pale-line); position: relative; overflow: hidden; }
.fc-tr-stemblok::before { content: ''; position: absolute; inset: 5px 4px; background: repeating-linear-gradient(90deg, var(--fc-golf) 0 2px, transparent 2px 4px); }
.fc-tr-stemblok[data-leeg] { background: transparent; border-color: transparent; }
.fc-tr-stemblok[data-leeg]::before { display: none; }
.fc-tr-muziekbalk { height: 22px; width: var(--fc-tr-eind, 100%); border-radius: 5px; background: var(--fc-pale); border: 1px solid var(--fc-pale-line); position: relative; overflow: hidden; }
.fc-tr-muziekbalk::before { content: ''; position: absolute; inset: 5px 4px; background: repeating-linear-gradient(90deg, var(--fc-golf) 0 2px, transparent 2px 5px); }
.fc-tr-baan .fc-tr-markering { top: -6px; bottom: -6px; }
.fc-tr-kopvlak { position: absolute; top: 0; bottom: 22px; left: calc(var(--fc-tr-naam) + 10px); right: 0; pointer-events: none; }
.fc-tr-afspeelkop { position: absolute; top: -4px; bottom: -4px; left: var(--fc-tr-pos, 0%); width: 2px; background: var(--fc-ink); z-index: 2; }
.fc-tr-goedkeuren { display: grid; gap: 12px; min-width: 0; align-content: start; }
.fc-tr-lijstje { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fc-tr-lijstje li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; }
.fc-tr-vink { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--fc-green-soft); color: var(--fc-green); }
.fc-tr-vink[data-nu='true'] { background: var(--fc-verloop); color: var(--fc-on-blue); }
.fc-tr-prijsblok { border-top: 1px solid var(--fc-line-soft); padding-top: 14px; display: grid; gap: 4px; }
.fc-tr-bedrag { font-family: 'Bricolage Grotesque', Manrope, sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.fc-tr-reden { display: block; margin-top: 2px; }
.fc-tr-reden::first-letter { text-transform: uppercase; }
@container trkaart (max-width: 520px) {
  .fc-tr-banen { grid-template-columns: minmax(0, 1fr); --fc-tr-naam: 0px; }
  .fc-tr-baannaam { display: none; }
  .fc-tr-kopvlak { left: 0; }
}

/* beeld en film: één tegel per clip in drie kolommen (Bas, 14 okt: elke clip iets groter; twee in een smalle kaart); de editor van de
   open tegel vult de rij eronder */
.fc-tr-kwaliteit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fc-tr-clips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 14px; }
@container trkaart (max-width: 760px) {
  .fc-tr-clips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fc-tr-clip { display: grid; gap: 6px; align-content: start; min-width: 0; padding: 8px; border: 1px solid var(--fc-line-soft); border-radius: 12px; background: var(--fc-paper); }
.fc-tr-clip[data-open='true'] { border-color: var(--fc-pale-line); background: var(--fc-pale); }
.fc-tr-clipbeeld { aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--fc-doek); }
.fc-tr-clipbeeld video, .fc-tr-clipbeeld img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fc-tr-clipbeeld video { object-fit: contain; }
.fc-tr-clipbeeld[data-leeg] { display: grid; place-items: center; background: var(--fc-cover-bg); color: var(--fc-muted); font-size: 11px; }
.fc-tr-clipkop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; font-size: 12.5px; }
.fc-tr-clipnaam { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.fc-tr-clipknoppen { gap: 2px 12px; }
.fc-tr-cliptake { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
/* alle takes van een shot in de clip-editor (Bas, 14 okt): de hele breedte onder Wat we zien en Hoe het beweegt, nieuwste eerst */
.fc-tr-takes { grid-column: 1 / -1; }
.fc-tr-takelijst { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@container trkaart (max-width: 760px) {
  .fc-tr-takelijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fc-tr-take { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 8px; border: 1px solid var(--fc-line-soft); border-radius: 12px; background: var(--fc-paper); }
.fc-tr-take[data-in-gebruik='true'] { border-color: var(--fc-blue); }
.fc-tr-take video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 8px; background: var(--fc-doek); }
.fc-tr-take p { margin: 0; }
.fc-tr-clipknoppen .fc-textbutton[aria-expanded='true'] { text-decoration: underline; }
.fc-tr-clipopen { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 12px; border-radius: 14px; background: var(--fc-pale); border: 1px solid var(--fc-pale-line); }
@container trkaart (min-width: 760px) {
  .fc-tr-clipopen { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}
.fc-tr-lever { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 8px; }
.fc-tr-leverrij { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; border: 1px solid var(--fc-line-soft); border-radius: 12px; padding: 10px 12px; }
.fc-tr-leverrij b { display: block; font-size: 12.5px; }
.fc-tr-leverrij .fc-small { display: block; }
/* Film maken direct onder de maat van de film, met een lijntje erboven en eronder (Bas, 9 okt) */
.fc-tr-filmmaken { display: grid; gap: 6px; justify-items: start; border-top: 1px solid var(--fc-line-soft); border-bottom: 1px solid var(--fc-line-soft); padding: 12px 0; }
.fc-tr-filmmaken > .fc-row { align-items: center; gap: 6px 14px; }
.fc-tr-redenen { margin: 0; padding-left: 18px; color: var(--fc-muted); }
.fc-tr-keuring { display: grid; gap: 6px; justify-items: start; border-top: 1px solid var(--fc-line-soft); padding-top: 12px; }


/* ---------------------------------------------------------------------------
 * Basis en Show (plannen/BASIS-SHOW-PLAN.md §2, mockups FC UI Mockups/basis-show/). De schakelaar naast NL/EN, de strook met de ene knop,
 * de Basis als dia's per scène, het paneel van één dia, en de stille voorstelling. Basis is groen, Show donkerblauw; alleen --fc-* tokens.
 * ------------------------------------------------------------------------- */
[data-bs-kant] { outline: var(--fc-kant-rand) solid var(--fc-blue-deep); outline-offset: var(--fc-kant-ruimte); border-radius: var(--fc-kant-radius); }
[data-bs-kant='basis'] { outline-color: var(--fc-green); }

.fc-bs-schakelaar { padding: 4px; margin-right: 8px; }
.fc-bs-schakelaar button { font-size: 15px; padding: 9px 22px; }
.fc-bs-schakelaar button[data-kant='basis'][aria-pressed='true'] { background: var(--fc-green); color: var(--fc-on-blue); }
.fc-bs-schakelaar button[data-kant='show'][aria-pressed='true'] { background: var(--fc-blue-deep); color: var(--fc-on-blue); }
.fc-bs-schakelaar button:active { transform: translateY(1px); }

.fc-bs-strook { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin: 18px 0 22px; padding: 14px 18px; border-radius: var(--fc-radius); background: var(--fc-pale); border: 1px solid var(--fc-pale-line); }
.fc-bs-strook[data-kant='basis'] { background: var(--fc-green-soft); border-color: var(--fc-green-line); }
.fc-bs-strooklinks { flex: 1 1 420px; min-width: 0; }
.fc-bs-strookkop { display: block; font-size: 15px; color: var(--fc-blue-deep); }
.fc-bs-strook[data-kant='basis'] .fc-bs-strookkop { color: var(--fc-green); }
.fc-bs-strookuitleg { margin: 3px 0 0; color: var(--fc-muted); font-size: 13px; }
.fc-bs-strookrechts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 1 1 360px; min-width: 0; }
.fc-bs-strookzin { margin: 0; text-align: right; overflow-wrap: anywhere; }
.fc-bs-strookbij { margin: 0; color: var(--fc-green); font-size: 13px; }
.fc-bs-strook .fc-button.fc-bs-showknop { background: var(--fc-blue-deep); }
.fc-bs-strook[data-kant='basis'] .fc-button.fc-bs-showknop { background: var(--fc-green); }
/* de knop houdt de kleur van zijn kant bij hover (anders nam het verloop van een primaire knop het over) */
.fc-bs-strook .fc-button.fc-bs-showknop:hover:not(:disabled) { background: var(--fc-blue-deep); filter: brightness(1.08); }
.fc-bs-strook[data-kant='basis'] .fc-button.fc-bs-showknop:hover:not(:disabled) { background: var(--fc-green); }
.fc-bs-strook .fc-button.fc-bs-showknop:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 2px; }
.fc-bs-strook .fc-button.fc-bs-showknop:disabled { opacity: 0.55; cursor: not-allowed; filter: none; }
.fc-bs-ongedaan { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 18px; border-top: 1px solid var(--fc-green-line); padding-top: 10px; }
.fc-bs-ongedaan .fc-textbutton { min-height: 32px; font-size: 13px; }
.fc-bs-notitie { margin: -8px 0 18px; }

/* de Basis: links de slides per scène, rechts altijd het paneel (KOPPEN-PLAN §9.2). De lijst staat in een vak dat zijn breedte meet en kiest
   daarop één tot vier kolommen; een scène spant zoveel kolommen als ze slides heeft, nooit meer dan er zijn */
.fc-bs-basis { display: grid; grid-template-columns: minmax(0, 1fr) var(--fc-bs-paneel); gap: 22px; align-items: start; }
.fc-bs-lijstvak { container-type: inline-size; min-width: 0; }
.fc-bs-lijst { --bs-kolommen: 1; display: grid; grid-template-columns: repeat(var(--bs-kolommen), minmax(0, 1fr)); gap: 16px; align-items: start; min-width: 0; }
@container (min-width: 360px) { .fc-bs-lijst { --bs-kolommen: 2; } }
@container (min-width: 560px) { .fc-bs-lijst { --bs-kolommen: 3; } }
@container (min-width: 820px) { .fc-bs-lijst { --bs-kolommen: 4; } }
/* een scène is zo breed als haar dia's (tot de hele rij), zodat honderd scènes van één dia samen een rij vullen en niet elk een eigen rij nemen */
.fc-bs-scene { display: flex; flex-direction: column; gap: 8px; min-width: 0; position: relative; border-radius: var(--fc-radius); }
.fc-bs-scene { --bs-span: 1; grid-column: span min(var(--bs-span), var(--bs-kolommen)); }
.fc-bs-scene[data-span='2'] { --bs-span: 2; }
.fc-bs-scene[data-span='3'] { --bs-span: 3; }
.fc-bs-scene[data-span='4'] { --bs-span: 4; }
.fc-bs-dias { display: grid; grid-template-columns: repeat(min(var(--bs-span), var(--bs-kolommen)), minmax(0, 1fr)); gap: 16px; }
/* de kop van een scène is altijd twee regels (de titel, dan haar knoppen), zodat scènes naast elkaar hun dia's op dezelfde hoogte beginnen */
.fc-bs-scenekop { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; min-width: 0; padding: 0 4px; }
.fc-bs-scenegreep { cursor: grab; color: var(--fc-muted); }
.fc-bs-scenegreep:active { cursor: grabbing; }
.fc-bs-scenetitel { flex: 1 1 140px; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-bs-sceneknoppen { display: flex; flex-wrap: wrap; gap: 0 14px; flex-basis: 100%; padding-left: 22px; min-width: 0; }
.fc-bs-sceneknoppen .fc-textbutton, .fc-bs-opbouwknoppen .fc-textbutton { min-height: 32px; font-size: 13px; white-space: nowrap; }
.fc-bs-sceneknoppen .fc-textbutton:focus-visible, .fc-bs-opbouwknoppen .fc-textbutton:focus-visible, .fc-bs-ongedaan .fc-textbutton:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 2px; border-radius: 6px; }
.fc-bs-sceneknoppen .fc-textbutton:disabled, .fc-bs-opbouwknoppen .fc-textbutton:disabled, .fc-bs-ongedaan .fc-textbutton:disabled { color: var(--fc-muted); text-decoration: none; cursor: not-allowed; }
.fc-bs-scenekop > .fc-pr-toevoegreden { flex-basis: 100%; }
.fc-bs-scene[data-verborgen='true'] .fc-bs-scenetitel { color: var(--fc-muted); }
.fc-bs-sceneerbij, .fc-bs-erbij { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px 0 4px; }
.fc-bs-sceneerbij p, .fc-bs-erbij p { margin: 0; }
.fc-bs-erbijknoppen { gap: 8px 14px; align-items: center; }

.fc-bs-dia { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; background: var(--fc-paper); border: 1px solid var(--fc-line); border-radius: var(--fc-radius); cursor: pointer; text-align: left; }
.fc-bs-dia:hover { border-color: var(--fc-line-strong); }
.fc-bs-dia:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 2px; }
.fc-bs-dia:active { transform: translateY(1px); }
.fc-bs-dia[draggable='true'] { cursor: grab; }
.fc-bs-dia[data-veranderd='true'] { border-color: var(--fc-amber-line); }
.fc-bs-dia[aria-current='true'] { outline: var(--fc-kant-rand) solid var(--fc-green); outline-offset: 2px; }
.fc-bs-dia[data-verborgen='true'] { opacity: 0.6; }
.fc-bs-diakopregel { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--fc-muted); }
.fc-bs-diakopregel b { color: var(--fc-ink); }
.fc-bs-chip { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--fc-amber-ink); background: var(--fc-yellow); border-radius: var(--fc-radius-pil); padding: 3px 10px; }
/* Nieuwe kop (KOPPEN-PLAN §2.4): niets mis, dus niet geel */
.fc-bs-chip[data-soort='nieuwe-kop'] { color: var(--fc-blue-deep); background: var(--fc-pale); box-shadow: inset 0 0 0 1px var(--fc-pale-line); }
.fc-bs-waarschuwing { margin: 0; color: var(--fc-amber-text); }
/* slepen: waar een slide of scène landt, als een lijn IN DE RUIMTE vóór of na de kaart (niet op de kaart: die las als "deze slide is gekozen",
   Bas 20 okt) met de plek in woorden aan die kant; de slide die je sleept is doorschijnend; een slide boven een andere scène zegt waarom niet */
.fc-bs-dia[data-gesleept='true'] { opacity: 0.4; border-style: dashed; }
.fc-bs-dia[data-plek]::before, .fc-bs-scene[data-plek]::before { content: ''; position: absolute; top: -4px; bottom: -4px; z-index: 3; width: 4px; border-radius: var(--fc-radius-pil); background: var(--fc-blue); pointer-events: none; }
.fc-bs-dia[data-plek='voor']::before { left: -10px; }
.fc-bs-dia[data-plek='na']::before { right: -10px; }
.fc-bs-scene[data-plek='voor']::before { left: -10px; }
.fc-bs-scene[data-plek='na']::before { right: -10px; }
/* tussen twee rijen: geen staande lijn naast de laatste kaart, maar een liggende in de ruimte onder de kaart waar de wijzer is */
.fc-bs-dia[data-as='tussen'][data-plek]:not([data-rijlijn])::before { display: none; }
.fc-bs-dia[data-rijlijn='onder']::before { content: ''; position: absolute; display: block; top: auto; left: -4px; right: -4px; bottom: -10px; z-index: 3; width: auto; height: 4px; border-radius: var(--fc-radius-pil); background: var(--fc-blue); pointer-events: none; }
/* slides onder elkaar (een smal venster): een liggende lijn in de ruimte boven of onder de kaart */
.fc-bs-dia[data-as='y'][data-plek]::before { left: -4px; right: -4px; width: auto; height: 4px; }
.fc-bs-dia[data-as='y'][data-plek='voor']::before { top: -10px; bottom: auto; }
.fc-bs-dia[data-as='y'][data-plek='na']::before { top: auto; bottom: -10px; }
.fc-bs-dia[data-as='y'][data-plek='na'][data-landt]::after { top: auto; bottom: 0; left: 4px; right: auto; transform: translateY(50%); }
.fc-bs-dia[data-landt]::after, .fc-bs-scene[data-landt]::after { content: attr(data-landt); position: absolute; top: 0; z-index: 4; transform: translateY(-50%); max-width: calc(100% - 16px); padding: 2px 10px; border-radius: var(--fc-radius-pil); background: var(--fc-blue); color: var(--fc-on-blue); font-size: 12px; font-weight: 600; white-space: normal; pointer-events: none; }
.fc-bs-dia[data-plek='voor'][data-landt]::after, .fc-bs-scene[data-plek='voor'][data-landt]::after, .fc-bs-scene[data-weiger][data-landt]::after { left: 4px; }
.fc-bs-dia[data-plek='na'][data-landt]::after, .fc-bs-scene[data-plek='na'][data-landt]::after { right: 4px; }
.fc-bs-scene[data-weiger='true']::after { background: var(--fc-muted); }
.fc-bs-lijst[data-sleept='true'] .fc-bs-dia img { pointer-events: none; }

/* het paneel van één dia (§2.3): kop, de dia zelf, Op deze dia, Voor de Show, de opbouw */
.fc-bs-paneel { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px; padding: 20px; max-height: calc(100vh - 32px); overflow: auto; overflow-x: clip; min-width: 0; }
.fc-bs-paneel > * { flex-shrink: 0; }
.fc-bs-paneelkop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.fc-bs-paneeltitels { min-width: 0; }
.fc-bs-paneeltitels p { margin: 2px 0 0; overflow-wrap: anywhere; }
.fc-bs-paneeltitel { margin: 0; font-size: 20px; }
/* de slide zelf, stil: in de kaart en in het paneel dezelfde opmaak, de maten in procenten van zijn breedte met een ondergrens om te lezen
   (KOPPEN-PLAN §9.3); de kopij staat linksonder, nooit met een schuifbalk */
.fc-bs-stil { container-type: inline-size; position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--fc-doek); }
.fc-bs-stil[data-klein='true'] { border-radius: 10px; }
.fc-bs-stil img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fc-bs-stilkopij { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 1.4cqw; padding: 5cqw 5.5cqw; background: var(--fc-scrim); color: var(--fc-op-doek); overflow: hidden; -webkit-mask-image: linear-gradient(to top, transparent, currentColor 6%); mask-image: linear-gradient(to top, transparent, currentColor 6%); }
.fc-bs-stilkopij p { margin: 0; max-width: 64%; overflow-wrap: anywhere; white-space: pre-line; flex-shrink: 0; }
/* linksonder zolang het past; past het niet, dan begint de kopij bovenaan met de kop en verdwijnt de rest onderaan in de vervaging (Codex 4) */
.fc-bs-stilkopij > p:first-child { margin-top: auto; }
.fc-bs-stil-kop { font-family: 'Bricolage Grotesque', Manrope, Arial, sans-serif; font-weight: 700; font-size: max(12px, 5.6cqw); line-height: 1.05; letter-spacing: -0.02em; }
.fc-bs-stil-tekst { font-size: max(9px, 2.8cqw); line-height: 1.3; }
.fc-bs-stil-label { font-size: max(8px, 2.2cqw); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.fc-bs-stilleeg { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--fc-muted); background: var(--fc-veld); }
/* Koppen maken in de strook (KOPPEN-PLAN §2.2): één regel met zijn knop, zoals Ongedaan maken */
.fc-bs-koppen { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; border-top: 1px solid var(--fc-green-line); padding-top: 10px; }
.fc-bs-koppen .fc-textbutton { min-height: 32px; font-size: 13px; }
.fc-bs-koppen .fc-textbutton:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 2px; border-radius: 6px; }
.fc-bs-koppen .fc-textbutton:disabled { color: var(--fc-muted); text-decoration: none; cursor: not-allowed; }
.fc-bs-groep { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fc-bs-groep > h4, .fc-bs-groepkop { margin: 0; font-size: 15px; font-weight: 700; color: var(--fc-ink); }
.fc-bs-voorshow { display: flex; flex-direction: column; gap: 6px; }
.fc-bs-aanwijzing { min-height: 84px; resize: vertical; font: inherit; font-size: 14px; }
.fc-bs-beeld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fc-bs-duim { cursor: default; }
.fc-bs-geerfd { display: flex; align-items: center; gap: 12px; }
.fc-bs-geerfd img { width: 112px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.fc-bs-beelderbij { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.fc-bs-opbouw { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--fc-line); padding-top: 14px; }
.fc-bs-opbouw p { margin: 0; }
.fc-bs-opbouwknoppen { gap: 0 18px; }
.fc-bs-voet { margin: -6px 0 0; }

/* in de scènelijst van de Show: of de scène bij de Basis hoort (§2.4), op een eigen regel onder de titel */
.fc-bs-scenechip { display: inline-block; align-self: flex-start; width: max-content; max-width: 100%; margin-top: 2px; font-size: 12px; color: var(--fc-muted); white-space: nowrap; }
.fc-bs-scenechip[data-geel='true'] { font-weight: 700; color: var(--fc-amber-ink); background: var(--fc-yellow); border-radius: var(--fc-radius-pil); padding: 2px 9px; }
.fc-bs-vraaguit { margin: 14px 0 0; }

/* Presenteren vanuit de Basis (§2.5): een stille dia over het hele scherm, de teksten linksonder over een scrim */
.fc-bs-doek { position: fixed; inset: 0; z-index: 1000; background: var(--fc-doek); color: var(--fc-op-doek); cursor: pointer; overflow: hidden; }
.fc-bs-doek:focus { outline: none; }
.fc-bs-doekbeeld { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fc-bs-doekscrim { position: absolute; inset: 0; background: var(--fc-scrim); pointer-events: none; }
.fc-bs-doekkopij { position: absolute; left: 6vw; bottom: 8vh; max-width: 60%; display: flex; flex-direction: column; gap: 1.2vh; }
.fc-bs-doekkopij p { margin: 0; overflow-wrap: anywhere; }
.fc-bs-doek-kop { font-family: 'Bricolage Grotesque', Manrope, Arial, sans-serif; font-weight: 700; font-size: clamp(32px, 4.2vw, 84px); line-height: 1.05; letter-spacing: -0.02em; }
.fc-bs-doek-tekst { font-size: clamp(18px, 1.7vw, 34px); line-height: 1.35; }
.fc-bs-doek-label { font-size: clamp(13px, 1vw, 20px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.fc-bs-doekteller { position: absolute; right: 3vw; bottom: 3vh; font-size: 14px; font-weight: 700; color: var(--fc-op-doek); opacity: 0.8; }

@media (max-width: 1100px) {
  .fc-bs-basis { grid-template-columns: minmax(0, 1fr); }
  .fc-bs-basis .fc-bs-paneel { order: -1; position: static; max-height: none; }
  .fc-bs-strookrechts { align-items: flex-start; }
  .fc-bs-strookzin { text-align: left; }
}

/* De pagina van een kijker van een trailerlink (DELEN-EN-EIGEN-TRAILER-PLAN §4.4): de speler vult de breedte, zonder inline stijl (de CSP laat die niet toe) */
.fc-kp-film { display: flex; flex-direction: column; gap: var(--fc-kijker-gap); width: min(100%, var(--fc-kijker-breedte)); margin: 0 auto; padding: var(--fc-kijker-padding); min-width: 0; }
.fc-kp-film p { margin: 0; }
.fc-kp-speler { display: block; width: 100%; max-height: var(--fc-speler-hoogte); border-radius: var(--fc-speler-radius); background: var(--fc-ink); }

/* Het vak Eigen trailer (DELEN-EN-EIGEN-TRAILER-PLAN §3.2): de speler vult de breedte van het vak */
.fc-tr-eigenspeler { display: block; width: 100%; max-height: var(--fc-eigenspeler-hoogte); border-radius: var(--fc-speler-radius); background: var(--fc-ink); }