/*
 * app.css — de stijl.
 *
 * De variabelen zijn semantisch benoemd (--rand, --zacht, --vlak) en niet als
 * grijstinten, zodat licht en donker met één blok te wisselen zijn.
 *
 * DRIE SOORTEN VARIABELE
 * `--kleur`, en daar gaan de schema's over. `--vorm-*` is maatwerk: hoekstraal,
 * railbreedte, schaduw. Die horen niet bij een schema — een schema dat de
 * dichtheid verzet is geen kleurenschema maar een tweede interface. En
 * `--regel` en `--knop` zijn de dichtheid: hier is een rij 32px omdat er een
 * muis op moet en er veertig regels tegelijk in beeld horen, waar de
 * Productie-app 64px heeft omdat er een duim op moet.
 *
 * De invoervelden blijven expres altijd licht, ook in donkere modus: maximaal
 * contrast waar je typt.
 *
 * DE VORM VAN HET RAAM
 * Een zijbalk links en het werk rechts. Zie `pagina.py` voor waarom: achttien
 * modules op een rij passen niet, en een rij die niet past schuift de hele
 * pagina zijwaarts mee.
 *
 * ZIJDE, LICHT EN DONKER
 * Er is één schema, met een lichte en een donkere kant. Het waren er vijf,
 * vier uit één foto van een aanrecht (varen, borstelbak-turquoise,
 * theedoek-koraal, tegelwit) plus een blauw standaardschema. Maar elk van die
 * vijf zette alleen `--accent` en tinten ervan, zodat de kleuren van de foto
 * nooit samen op het scherm stonden -- en wie koos, koos één kleur uit een
 * foto die juist mooi was door de vier samen. Nu staan ze in één stel: roze als
 * accent, turquoise als tweede kleur, de gloed van de ondergrond in mint en
 * roze (ontwerp kleur, kaart 7).
 *
 * Welke kant je krijgt volgt het systeem, tenzij `data-thema` op de wortel
 * `licht` of `donker` zegt. De donkere waarden staan daarom twee keer in dit
 * bestand: één keer onder de mediaquery en één keer voor wie donker vastzet.
 * CSS kent geen manier om één blok onder twee voorwaarden te laten gelden,
 * en `light-dark()` rekent per element: in een knop of veld, die expres
 * `color-scheme: light` hebben, gaf dat de lichte kant midden in een donker
 * scherm. `test_uiterlijk.py` houdt de twee kopieën gelijk.
 */

/* De letter: Nunito, meegeleverd (ontwerp kleur, kaart 5).
 *
 * Rond en open, en dat is waar het ontwerp om vroeg: een app die er vrolijker
 * uitziet zonder dat hij minder leesbaar wordt bij veertig regels onder elkaar.
 * De bestanden staan in `statisch/letter`, met de licentie (SIL Open Font
 * License) ernaast. Van internet halen mag niet: deze app draait achter een
 * proxy en in een add-on zonder uitgaande verbinding, en een stijlblad dat
 * een letter importeert is een app die er bij de buurman anders uitziet.
 *
 * Drie gewichten, elk voor een bereik. De app vraagt ook om 550 en 650 (van
 * vóór deze letter); zonder bereik kiest de browser dan 800, en wordt elke
 * tussenkop een schreeuw. `swap`: tot de letter er is staat de tekst er in
 * de systeemletter, en niet onzichtbaar.
 *
 * Het terreinplan (`tekening.py`) en de printset hebben hun eigen letter en
 * laden dit stijlblad niet. */
@font-face {
  font-family: "Nunito";
  src: url("letter/nunito-400.woff2") format("woff2");
  font-weight: 100 499;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("letter/nunito-600.woff2") format("woff2");
  font-weight: 500 720;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("letter/nunito-800.woff2") format("woff2");
  font-weight: 721 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  /* De ondergrond achter de twee panelen: warm wit met een gloed van mint
     linksboven en roze rechtsonder. Een gloed en geen verloop over de hele
     breedte: daar kijk je een werkdag naar. */
  --grond: radial-gradient(55% 65% at 0% 0%, #d6efe9 0%, rgba(214, 239, 233, 0) 70%),
    radial-gradient(55% 65% at 100% 100%, #fcdbe5 0%, rgba(252, 219, 229, 0) 70%),
    #f8f3f4;
  --bg: #ffffff;
  --vlak: #faf2f4;
  --rand: #f1e1e5;
  --rand-sterk: #e3c3cb;
  --tekst: #2a1b21;
  --zacht: #7d636b;
  /* Het pijltje van een keuzelijst: een plaatje, dus geen var() erin; per
     kant een eigen kleur, gelijk aan --zacht. */
  --pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237d636b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* Twee kleuren en niet één: roze waar de app je heen wijst, turquoise voor
     wat aan staat, wat je kiest en waar je naartoe kunt (links, focus, een
     gekozen filter). Met één kleur voor allebei leest een gekozen filter als
     een knop die om aandacht vraagt. */
  --accent: #bc3255;
  --accent-zacht: #fde3ea;
  --accent-2: #12747d;
  --accent-2-zacht: #dcf0f1;
  --op-accent-2: #ffffff;
  --link: #12747d;
  /* Glans op één plek per scherm: de hoofdknop. Alles wat glanst roept, en
     als twee dingen roepen hoor je geen van beide. */
  --glans: linear-gradient(135deg, #d43867, #d14417);
  /* Accent, turquoise, groen en glans zijn bij het samenvoegen een tikje
     dieper gezet dan in het ontwerp (#cf4a6c, #137c86, #1a7f42, #d9517a naar
     #ef8b6b): als tekst haalden ze 4,5:1 niet -- roze op lichtroze 3,6, wit op
     de perzikkant van de hoofdknop 2,5. Dezelfde tint, net donker genoeg;
     `tests/test_uiterlijk.py` rekent het na. */
  --op-glans: #ffffff;
  --glans-schaduw: 0 3px 12px rgba(217, 81, 122, .28);
  --rail-bg: rgba(255, 255, 255, .82);
  --rail-hover: rgba(255, 255, 255, .7);
  --rail-actief: #ffffff;
  --rail-actief-tekst: #b83a5e;
  --paneel-schaduw: 0 1px 2px rgba(120, 40, 70, .05), 0 10px 30px rgba(207, 74, 108, .09);
  --kaart-bg: #ffffff;
  --kaart-schaduw: 0 1px 2px rgba(120, 40, 70, .05), 0 4px 16px rgba(207, 74, 108, .07);
  /* Het rood is dieper dan een gewoon signaalrood: naast een roze accent
     leest dat anders als nog meer roze, en een waarschuwing hoort je niet
     te laten twijfelen of het versiering is. */
  --groen: #19793f;
  --groen-zacht: #e3f2e8;
  --amber: #9a5c00;
  --op-amber: #ffffff;
  --rood: #a8231b;
  --rood-zacht: #fde4e2;
  --melding-ster: #ff9fb8;
  --regel: 32px;
  --knop: 30px;
  --veld-bg: #ffffff;
  --veld-tekst: #16181c;
  --veld-rand: #e3c3cb;

  /* DE SOORTKLEUREN
   *
   * Een eigen stel, buiten de kleurenschema's om, en dat is een besluit met een
   * reden. Ze leenden eerst de kleurtokens van de interface (`--accent`,
   * `--amber`, `--zacht`), waardoor het er vijf waren: een zesde zou in elk van
   * de vier schema's bijgezet moeten worden.
   *
   * Maar een soortkleur is geen interfacekleur, het is een **gegeven**. Hij
   * moet van de andere te onderscheiden zijn; hij hoort niet mee te
   * bewegen met de sfeer van een schema, net zomin als de kleur van een
   * spoorlijn op een kaart meebeweegt met de omslag van de atlas. Dus staan ze
   * hier, één keer licht en één keer donker, buiten de schema's om.
   *
   * Ze heten naar hun nummer, 1 tot en met 19, en de code van elk nummer staat
   * sinds migratie 74 in de database. `zetKleuren` in `app.js` rekent daar de
   * vier tinten uit en zet ze als `--k-1-licht`, `--r-1-donker` enzovoort op
   * de wortel. Wat hier achter de komma staat is de terugval: de tinten van
   * vóór 74, voor een scherm dat tekent voordat de kleuren binnen zijn.
   *
   * `--op` is wat erop staat. Eén tint per kant volstaat: de volle tint heeft
   * voor alle negentien dezelfde helderheid, in het licht donker genoeg voor
   * witte letters en in het donker licht genoeg voor zwarte.
   */
  --op: #ffffff;
  --k-1: var(--k-1-licht, #cf0032);
  --k-2: var(--k-2-licht, #b14c00);
  --k-3: var(--k-3-licht, #8d6800);
  --k-4: var(--k-4-licht, #757300);
  --k-5: var(--k-5-licht, #5e7b00);
  --k-6: var(--k-6-licht, #3d8200);
  --k-7: var(--k-7-licht, #008717);
  --k-8: var(--k-8-licht, #008546);
  --k-9: var(--k-9-licht, #008265);
  --k-10: var(--k-10-licht, #007f80);
  --k-11: var(--k-11-licht, #0079a2);
  --k-12: var(--k-12-licht, #275fec);
  --k-13: var(--k-13-licht, #614fe8);
  --k-14: var(--k-14-licht, #8141db);
  --k-15: var(--k-15-licht, #9b34c5);
  --k-16: var(--k-16-licht, #ac28af);
  --k-17: var(--k-17-licht, #ba1994);
  --k-18: var(--k-18-licht, #c8006a);
  --k-19: var(--k-19-licht, #6f6f6f);

  /* Dezelfde negentien als achtergrond van een hele regel: licht genoeg
     voor de gewone tekst erop. */
  --r-1: var(--r-1-licht, #ff8f8f);
  --r-2: var(--r-2-licht, #ffb48f);
  --r-3: var(--r-3-licht, #ffda8f);
  --r-4: var(--r-4-licht, #ffff8f);
  --r-5: var(--r-5-licht, #daff8f);
  --r-6: var(--r-6-licht, #b4ff8f);
  --r-7: var(--r-7-licht, #8fff8f);
  --r-8: var(--r-8-licht, #8fffb4);
  --r-9: var(--r-9-licht, #8fffda);
  --r-10: var(--r-10-licht, #8fffff);
  --r-11: var(--r-11-licht, #8fdaff);
  --r-12: var(--r-12-licht, #8fb4ff);
  --r-13: var(--r-13-licht, #8f8fff);
  --r-14: var(--r-14-licht, #b48fff);
  --r-15: var(--r-15-licht, #da8fff);
  --r-16: var(--r-16-licht, #ff8fff);
  --r-17: var(--r-17-licht, #ff8fda);
  --r-18: var(--r-18-licht, #ff8fb4);
  --r-19: var(--r-19-licht, #c7c7c7);

  /* Vorm, geen kleur. De donkere kant raakt hier niets aan, op de schaduwen
     na. Zijbalk en werk zijn twee panelen met ruimte eromheen; de rijen
     blijven 32 pixels, want de lucht komt uit het weghalen van kaders en
     lijnen en niet uit hogere regels. */
  --vorm-rond: 16px;
  --vorm-rond-klein: 11px;
  --vorm-knop: 999px;
  --vorm-paneel: 22px;
  --vorm-kier: 12px;
  --vorm-rail: 248px;
  --vorm-schaduw: 0 1px 2px rgba(120, 40, 70, .05);
  --vorm-schaduw-op: 0 4px 14px rgba(120, 40, 70, .10);
}

:root[data-thema="licht"] { color-scheme: light; }

/* De donkere kant, onder het systeem en vastgezet. Twee keer hetzelfde: zie
   bovenaan dit bestand waarom, en test_uiterlijk.py voor wie ze gelijk houdt. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --grond: radial-gradient(55% 65% at 0% 0%, #10302d 0%, rgba(16, 48, 45, 0) 70%),
      radial-gradient(55% 65% at 100% 100%, #3a1728 0%, rgba(58, 23, 40, 0) 70%),
      #151013;
    --bg: #1f171b;
    --vlak: #2a1f25;
    --rand: #3a2a31;
    --rand-sterk: #553b46;
    --tekst: #f7e8ed;
    --zacht: #c0a0aa;
    --pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23c0a0aa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --accent: #ff8aa8;
    --accent-zacht: #45202d;
    --accent-2: #5fd0d6;
    --accent-2-zacht: #143639;
    --op-accent-2: #08282a;
    --link: #6fd6dc;
    --glans: linear-gradient(135deg, #ff8aa8, #ffb08f);
    --op-glans: #2a0f18;
    --glans-schaduw: 0 3px 14px rgba(255, 138, 168, .22);
    --rail-bg: rgba(33, 24, 29, .88);
    --rail-hover: rgba(255, 255, 255, .04);
    --rail-actief: #34222b;
    --rail-actief-tekst: #ff9fb8;
    --paneel-schaduw: 0 10px 30px rgba(0, 0, 0, .45);
    --kaart-bg: #251b20;
    --kaart-schaduw: none;
    --groen: #5bbd80;
    --groen-zacht: #16301f;
    --amber: #d99a2b;
    --op-amber: #1f171b;
    --rood: #ff7a70;
    --rood-zacht: #3f1e1f;
    --melding-ster: #c2375e;
    --vorm-schaduw: 0 1px 2px rgba(0, 0, 0, .40);
    --vorm-schaduw-op: 0 4px 14px rgba(0, 0, 0, .50);

    /* De soortkleuren, donkere kant. Lichter en zachter verzadigd, met bijna
       zwarte letters erop. */
    --op: #12161b;
    --k-1: var(--k-1-donker, #ff7d7f);
    --k-2: var(--k-2-donker, #ff833e);
    --k-3: var(--k-3-donker, #d7a100);
    --k-4: var(--k-4-donker, #b4b200);
    --k-5: var(--k-5-donker, #93bd00);
    --k-6: var(--k-6-donker, #62c701);
    --k-7: var(--k-7-donker, #32cc3f);
    --k-8: var(--k-8-donker, #00cc6e);
    --k-9: var(--k-9-donker, #00c89d);
    --k-10: var(--k-10-donker, #00c3c4);
    --k-11: var(--k-11-donker, #00baf6);
    --k-12: var(--k-12-donker, #7fa9ff);
    --k-13: var(--k-13-donker, #9d9fff);
    --k-14: var(--k-14-donker, #b793ff);
    --k-15: var(--k-15-donker, #d680ff);
    --k-16: var(--k-16-donker, #f06ef1);
    --k-17: var(--k-17-donker, #ff69d2);
    --k-18: var(--k-18-donker, #ff76a7);
    --k-19: var(--k-19-donker, #ababab);

    /* Dezelfde negentien als achtergrond van een hele regel: licht genoeg
       voor de gewone tekst erop. */
    --r-1: var(--r-1-donker, #660000);
    --r-2: var(--r-2-donker, #662200);
    --r-3: var(--r-3-donker, #664400);
    --r-4: var(--r-4-donker, #666600);
    --r-5: var(--r-5-donker, #446600);
    --r-6: var(--r-6-donker, #226600);
    --r-7: var(--r-7-donker, #006600);
    --r-8: var(--r-8-donker, #006622);
    --r-9: var(--r-9-donker, #006644);
    --r-10: var(--r-10-donker, #006666);
    --r-11: var(--r-11-donker, #004466);
    --r-12: var(--r-12-donker, #002266);
    --r-13: var(--r-13-donker, #000066);
    --r-14: var(--r-14-donker, #220066);
    --r-15: var(--r-15-donker, #440066);
    --r-16: var(--r-16-donker, #660066);
    --r-17: var(--r-17-donker, #660044);
    --r-18: var(--r-18-donker, #660022);
    --r-19: var(--r-19-donker, #333333);
  }
}

:root[data-thema="donker"] {
  color-scheme: dark;
  --grond: radial-gradient(55% 65% at 0% 0%, #10302d 0%, rgba(16, 48, 45, 0) 70%),
    radial-gradient(55% 65% at 100% 100%, #3a1728 0%, rgba(58, 23, 40, 0) 70%),
    #151013;
  --bg: #1f171b;
  --vlak: #2a1f25;
  --rand: #3a2a31;
  --rand-sterk: #553b46;
  --tekst: #f7e8ed;
  --zacht: #c0a0aa;
  --pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23c0a0aa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --accent: #ff8aa8;
  --accent-zacht: #45202d;
  --accent-2: #5fd0d6;
  --accent-2-zacht: #143639;
  --op-accent-2: #08282a;
  --link: #6fd6dc;
  --glans: linear-gradient(135deg, #ff8aa8, #ffb08f);
  --op-glans: #2a0f18;
  --glans-schaduw: 0 3px 14px rgba(255, 138, 168, .22);
  --rail-bg: rgba(33, 24, 29, .88);
  --rail-hover: rgba(255, 255, 255, .04);
  --rail-actief: #34222b;
  --rail-actief-tekst: #ff9fb8;
  --paneel-schaduw: 0 10px 30px rgba(0, 0, 0, .45);
  --kaart-bg: #251b20;
  --kaart-schaduw: none;
  --groen: #5bbd80;
  --groen-zacht: #16301f;
  --amber: #d99a2b;
  --op-amber: #1f171b;
  --rood: #ff7a70;
  --rood-zacht: #3f1e1f;
  --melding-ster: #c2375e;
  --vorm-schaduw: 0 1px 2px rgba(0, 0, 0, .40);
  --vorm-schaduw-op: 0 4px 14px rgba(0, 0, 0, .50);

  /* De soortkleuren, donkere kant. Lichter en zachter verzadigd, met bijna
     zwarte letters erop. */
  --op: #12161b;
  --k-1: var(--k-1-donker, #ff7d7f);
  --k-2: var(--k-2-donker, #ff833e);
  --k-3: var(--k-3-donker, #d7a100);
  --k-4: var(--k-4-donker, #b4b200);
  --k-5: var(--k-5-donker, #93bd00);
  --k-6: var(--k-6-donker, #62c701);
  --k-7: var(--k-7-donker, #32cc3f);
  --k-8: var(--k-8-donker, #00cc6e);
  --k-9: var(--k-9-donker, #00c89d);
  --k-10: var(--k-10-donker, #00c3c4);
  --k-11: var(--k-11-donker, #00baf6);
  --k-12: var(--k-12-donker, #7fa9ff);
  --k-13: var(--k-13-donker, #9d9fff);
  --k-14: var(--k-14-donker, #b793ff);
  --k-15: var(--k-15-donker, #d680ff);
  --k-16: var(--k-16-donker, #f06ef1);
  --k-17: var(--k-17-donker, #ff69d2);
  --k-18: var(--k-18-donker, #ff76a7);
  --k-19: var(--k-19-donker, #ababab);

  /* Dezelfde negentien als achtergrond van een hele regel: licht genoeg
     voor de gewone tekst erop. */
  --r-1: var(--r-1-donker, #660000);
  --r-2: var(--r-2-donker, #662200);
  --r-3: var(--r-3-donker, #664400);
  --r-4: var(--r-4-donker, #666600);
  --r-5: var(--r-5-donker, #446600);
  --r-6: var(--r-6-donker, #226600);
  --r-7: var(--r-7-donker, #006600);
  --r-8: var(--r-8-donker, #006622);
  --r-9: var(--r-9-donker, #006644);
  --r-10: var(--r-10-donker, #006666);
  --r-11: var(--r-11-donker, #004466);
  --r-12: var(--r-12-donker, #002266);
  --r-13: var(--r-13-donker, #000066);
  --r-14: var(--r-14-donker, #220066);
  --r-15: var(--r-15-donker, #440066);
  --r-16: var(--r-16-donker, #660066);
  --r-17: var(--r-17-donker, #660044);
  --r-18: var(--r-18-donker, #660022);
  --r-19: var(--r-19-donker, #333333);
}

* { box-sizing: border-box; }

/* Cijfers in een lijst staan onder elkaar: 1.111 en 888 horen even breed te
   lezen als ze zijn. Nunito heeft van zichzelf proportionele cijfers. */
table { font-variant-numeric: tabular-nums; }

body {
  margin: 0;
  background: var(--grond);
  background-attachment: fixed;
  color: var(--tekst);
  font: 14px/1.55 "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.verborgen { display: none !important; }
.rek { flex: 1; }
.zacht { color: var(--zacht); }
.klein { font-size: 12.5px; }

/* -- het raam ------------------------------------------------------------- */

/* Twee zwevende panelen op de gloed van de ondergrond. De ruimte eromheen is
   het enige wat de gloed laat zien; zonder die twaalf pixels is het een app
   met een gekleurde rand. */
#raam {
  display: grid;
  grid-template-columns: var(--vorm-rail) minmax(0, 1fr);
  gap: var(--vorm-kier);
  padding: var(--vorm-kier);
  min-height: 100vh;
}

#werk {
  min-width: 0; display: flex; flex-direction: column; background: var(--bg);
  border-radius: var(--vorm-paneel); box-shadow: var(--paneel-schaduw);
}

/* -- de zijbalk ----------------------------------------------------------- */

/* De inhoudsopgave van de app. Groepjes met een kopje: wie hem nog niet uit
   zijn hoofd kent ziet zo in één blik welke kant van het werk hij voor zich
   heeft, en dat is precies wat een lange rij woorden niet doet. */
#rail {
  position: sticky;
  top: var(--vorm-kier);
  align-self: start;
  max-height: calc(100vh - 2 * var(--vorm-kier));
  display: flex;
  flex-direction: column;
  background: var(--rail-bg);
  border-radius: var(--vorm-paneel);
  box-shadow: var(--paneel-schaduw);
  padding: 14px 10px 10px;
  gap: 10px;
}

/* Ingeklapt: alleen de ikoontjes, en verder houdt alles zijn plek. Niet
   helemaal weg -- een menu dat verdwijnt laat je zoeken naar de knop om het
   terug te halen, en dat is erger dan de vierenvijftig pixels die dit kost.

   De namen gaan weg met `display: none` en niet met een breedte van nul: een
   woord dat wegkrimpt duwt eerst zijn eigen regel uit elkaar. */
#raam.smal { grid-template-columns: 54px minmax(0, 1fr); }
#raam.smal #rail { padding: 12px 6px 8px; overflow: hidden; }
#raam.smal .merk,
#raam.smal .railkiezer > label,
#raam.smal .railkiezer > select,
#raam.smal .afteltekst,
#raam.smal .navgroep,
#raam.smal .navnaam,
#raam.smal #wie,
#raam.smal .railvoet .rek { display: none; }
#raam.smal #nav a { justify-content: center; padding: 6px 0; position: relative; }
#raam.smal .railkop { justify-content: center; padding: 0; }
#raam.smal .railvoet { flex-wrap: wrap; justify-content: center; }
/* De teller blijft staan: dat is het enige wat een ingeklapte balk nog te
   zeggen heeft. Als stip in de hoek van het ikoon in plaats van als getal
   ernaast, want naast past niet meer. */
#raam.smal .navteller {
  position: absolute; top: 3px; right: 7px; margin: 0;
  min-width: 0; width: 8px; height: 8px; padding: 0; border-radius: 99px;
  font-size: 0; line-height: 0; overflow: hidden;
  background: var(--zacht);
}
#raam.smal .navteller.nu { background: var(--rood); }

.railkop { display: flex; align-items: center; gap: 8px; padding: 0 6px; }
.merk { font-weight: 650; letter-spacing: -.01em; }
#raildicht { display: none; }

/* De productie als kaartje (ontwerp kleur, kaart 4): klein waar het over
   gaat, de naam die de keuze opent, en groot hoeveel dagen het nog is. Wit op
   de zijbalk, met een streep in de drie kleuren van de foto erbovenop. Het
   getal is het enige in de zijbalk met glans.

   De kiezer is dezelfde `<select>` als altijd, maar gekleed als tekst met
   een pijltje: een wit vak met een kader bovenin de zijbalk las als een
   formulier dat je nog moest invullen. */
.railkiezer {
  position: relative; overflow: hidden; flex: none;
  display: flex; flex-direction: column; gap: 1px;
  margin: 0 2px; padding: 12px 12px 10px;
  border-radius: var(--vorm-rond); background: var(--kaart-bg);
  box-shadow: var(--kaart-schaduw);
}
.railkiezer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, #d9517a, #ef8b6b 45%, #2aa3a8);
}
.railkiezer label { font-size: 10.5px; font-weight: 600; color: var(--zacht); }
.railkiezer select {
  flex: none; width: 100%; min-height: 22px; padding: 0 16px 0 0;
  border: 0; border-radius: 0; background: transparent; color: var(--tekst);
  color-scheme: inherit; font-weight: 800; font-size: 13.5px;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: var(--pijl);
  background-repeat: no-repeat; background-position: right 2px center;
  text-overflow: ellipsis;
}
/* De lijst die opengaat is van het systeem, en blijft licht. */
.railkiezer select option, .railkiezer select optgroup { color: #16181c; background: #fff; }
.railkiezer select:focus { outline: none; }
.railkiezer select:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.aftel {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  margin-top: 4px; font-size: 11.5px; color: var(--zacht);
}
.aftel:empty { display: none; }
.aftelgetal {
  font-style: normal; font-size: 26px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  background: var(--glans); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* Ingeklapt: alleen het getal, zonder kaart eromheen. */
#raam.smal .railkiezer { margin: 0; padding: 6px 0; background: none; box-shadow: none; align-items: center; }
#raam.smal .railkiezer::before { display: none; }
#raam.smal .aftel { margin: 0; justify-content: center; }
#raam.smal .aftelgetal { font-size: 18px; }

#nav { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }

/* Een kopje boven een groepje. Stil: het is een wegwijzer en geen knop. In
   gewone letters: kleine hoofdletters met spatiëring horen bij een formulier,
   en dit is een inhoudsopgave. */
.navgroep {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--zacht);
  padding: 12px 8px 3px;
}
.navgroep:first-child { padding-top: 2px; }

#nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 9px;
  border-radius: var(--vorm-rond-klein);
  color: var(--tekst);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  transition: background .12s;
}
#nav a:hover { background: var(--rail-hover); }
/* Waar je bent: een witte pil en geen verloop. De glans is voor de hoofdknop,
   en een menu-item dat net zo hard roept als die knop maakt ze allebei stil. */
#nav a.aan {
  background: var(--rail-actief); color: var(--rail-actief-tekst); font-weight: 800;
  box-shadow: var(--vorm-schaduw-op);
}
#nav a.aan .navteken { color: var(--accent); }
#nav a:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }

/* Het tekentje voor de naam. Geen plaatjes en geen lettertype van buiten: een
   app die op een kantoorpc achter een proxy moet draaien hoort niets van het
   net nodig te hebben om zijn eigen menu te tonen. */
.navteken { width: 17px; text-align: center; opacity: .75; font-size: 14px; }
#nav a.aan .navteken { opacity: 1; }

/* Hoeveel er te doen is. Alleen als het iets is: een teller die altijd op nul
   staat leert je over tellers heen kijken. */
.navteller {
  margin-left: auto;
  min-width: 19px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--rand);
  color: var(--zacht);
  font-size: 11px;
  line-height: 17px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.navteller.nu { background: var(--rood); color: #fff; }

.railvoet {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 6px 0;
  border-top: 1px solid var(--rand);
  font-size: 12.5px;
  color: var(--zacht);
}

.ikoonknop {
  min-height: 28px;
  min-width: 28px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--vorm-rond-klein);
  background: none;
  color: var(--zacht);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.ikoonknop:hover { background: var(--rail-hover); color: var(--tekst); }
.ikoonknop:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* -- de balk boven het werk ----------------------------------------------- */

#balk {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border-radius: var(--vorm-paneel) var(--vorm-paneel) 0 0;
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 5;
}

#railopen { display: none; }

/* Waar je bent: klein de productie, groot het scherm (ontwerp kleur, kaart 1).

   Hier stond alleen de festivalnaam, groot; de naam van het scherm stond in
   een eigen kop in het scherm, met een uitlegregel eronder, of -- op Leidraad,
   Dossiers en Contacten -- nergens. Nu staat hij op elk scherm op dezelfde
   plek, en de festivalnaam erboven, met het sterretje dat een van de twee
   plekken is waar de app zich een versiering permitteert.

   Afgekapt in plaats van afbrekend: een festivalnaam van vier woorden hoort
   de balk niet twee regels hoog te maken. De hele naam staat in de
   zweeftekst. De schermnaam is de `h1`: dat is de kop van wat er staat. */
.balktitels { display: flex; flex-direction: column; min-width: 120px; flex: 0 1 auto; }
#nuwerk {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0;
  font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--zacht);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#nuwerk::before { content: "\2726"; color: var(--accent); font-size: 9px; flex: none; }
#nuwerk.leeg { font-weight: 400; }
#schermnaam {
  margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em;
  line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* De knoppen van het scherm, rechts. Zelfde maat als de knoppen die er
   vroeger in de stuurbalk stonden: de balk wordt er niet hoger van. */
.balkknoppen {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 6px; flex-wrap: wrap; min-width: 0;
}
.balkknoppen:empty { display: none; }
/* Een scherm dat zijn rij met een veer in tweeën deelde, deed dat in zijn
   eigen stuurbalk; in de balk staat alles rechts bij elkaar. */
.balkknoppen .rek { display: none; }

@media (max-width: 700px) {
  /* Op een telefoon past de naam en één knop op een regel. De hoofdknop wordt
     een rond plusje naast de naam, en de andere knoppen gaan eronder. De rij
     zelf doet niet mee (`contents`), zodat elke knop een eigen plek in de
     balk krijgt; de lege regel ervoor dwingt de rest naar beneden. */
  #balk { flex-wrap: wrap; row-gap: 8px; padding: 10px 14px; }
  #balk .rek { display: none; }
  .balktitels { flex: 1 1 0; }
  #schermnaam { font-size: 21px; }
  .balkknoppen, .balkknoppen:empty { display: contents; }
  .balkknoppen > * { order: 3; }
  #balk::after { content: ""; flex-basis: 100%; order: 2; height: 0; }
  /* Alleen een knop die iets toevoegt wordt een plusje (`.plus`, gezet door
     `markeerPlusknoppen`): "Hele set afdrukken" als + zegt iets anders dan
     hij doet. */
  .balkknoppen > .hoofd.plus {
    order: 1; flex: none; width: 38px; height: 38px; min-height: 0; padding: 0;
    justify-content: center; border-radius: 50%; font-size: 0; gap: 0;
  }
  .balkknoppen > .hoofd.plus > * { display: none; }
  .balkknoppen > .hoofd.plus::before { content: "+"; font-size: 22px; font-weight: 700; line-height: 1; }
}

/* -- smal scherm ---------------------------------------------------------- */

@media (max-width: 900px) {
  /* Op een telefoon is elke pixel werk: het werk wordt weer het hele scherm,
     en de zijbalk schuift eroverheen. */
  #raam { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; }
  #werk, #balk, .bekijkband { border-radius: 0; box-shadow: none; }
  #rail {
    position: fixed;
    inset: 0 auto 0 0;
    max-height: none;
    border-radius: 0 var(--vorm-paneel) var(--vorm-paneel) 0;
    background: var(--bg);
    width: var(--vorm-rail);
    z-index: 15;
    box-shadow: var(--vorm-schaduw-op);
    transform: translateX(-100%);
    transition: transform .18s;
  }
  #rail.open { transform: none; }
  #raildicht, #railopen { display: inline-flex; align-items: center; justify-content: center; }
  main { padding: 16px 14px 60px; }
}

/* -- basisvormen ---------------------------------------------------------- */

main { padding: 22px 22px 64px; max-width: 1320px; }

/* Een scherm dat het frame vult: geen kop, geen marge, geen maximumbreedte.
   De planning is zo'n scherm -- daar ís de balk het scherm, en elke pixel die
   naar een titel gaat is een pixel minder tijdas. */
#raam.vult { height: 100vh; min-height: 0; }
#raam.vult #werk { min-height: 0; }
main#scherm.vult {
  padding: 0; max-width: none; flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}

h1 { font-size: 23px; margin: 0; font-weight: 650; letter-spacing: -.02em; }
h2 { font-size: 14.5px; margin: 24px 0 9px; font-weight: 650; }

input, select, textarea, button {
  font: inherit;
  color-scheme: light;
}

/* Links in de tweede kleur, met een onderstreping die er is maar niet schreeuwt.
   Zonder dit waren ze browserblauw, ook naast een roze knop. */
a { color: var(--link); text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }

input, select, textarea {
  background: var(--veld-bg);
  color: var(--veld-tekst);
  border: 1px solid var(--veld-rand);
  border-radius: var(--vorm-rond-klein);
  padding: 5px 9px;
  min-height: var(--knop);
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.knop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--knop);
  padding: 5px 13px;
  border: 1px solid transparent;
  border-radius: var(--vorm-knop);
  background: var(--vlak);
  color: var(--tekst);
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}

/* Een tweede knop is zacht gevuld en heeft geen rand: naast de hoofdknop hoort
   hij te zeggen "kan ook", niet "kijk hier". */
.knop:hover { background: color-mix(in srgb, var(--accent) 8%, var(--vlak)); }
.knop:active { transform: translateY(1px); }
.knop:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.knop.hoofd {
  background: var(--glans);
  color: var(--op-glans);
  font-weight: 700;
  box-shadow: var(--glans-schaduw);
}
.knop.hoofd:hover { filter: brightness(1.06); background: var(--glans); }
/* Een knop die iets weghaalt. Niet rood gevuld -- dat leest als "doe dit" --
 * maar met een rode rand en rode letters: te onderscheiden van de knop ernaast
 * zonder dat hij de aandacht opeist. */
.knop.gevaar {
  border-color: color-mix(in srgb, var(--rood) 55%, var(--bg));
  color: var(--rood);
}
.knop.gevaar:hover {
  background: color-mix(in srgb, var(--rood) 10%, var(--bg));
  border-color: var(--rood);
}
/* Een knop die een stand laat zien in plaats van een handeling aankondigt.
 *
 * "Bevestigd" met een vinkje ervoor: stiller dan de hoofdknop, want er valt
 * niets meer te doen, maar wel duidelijk aan. Hij blijft een knop -- klikken
 * haalt de bevestiging weer weg -- en daarom niet zo bleek als een merkje. */
.knop.goed {
  background: color-mix(in srgb, var(--groen) 12%, var(--bg));
  border-color: color-mix(in srgb, var(--groen) 55%, var(--bg));
  color: var(--groen);
  font-weight: 550;
}
.knop.goed:hover {
  background: color-mix(in srgb, var(--groen) 20%, var(--bg));
  border-color: var(--groen);
}
.knop.stil { border-color: transparent; color: var(--zacht); background: none; font-weight: 400; }
.knop.stil:hover { background: var(--vlak); color: var(--tekst); border-color: transparent; }
.knop[disabled] { opacity: .5; cursor: default; }
.knoppenrij { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Het WhatsApp-knopje achter een telefoonnummer. Klein, want het staat in een
 * regel tekst of een tabelcel, en groen uit het schema, zodat het in alle vier
 * de kleurenschema's hetzelfde zegt. Zie `whatsapp.py`.
 *
 * `.uit` is het vakje zonder knop: gestippeld en grijs, met de reden als
 * title. Niets tonen bij een vast nummer las als een vergeten knop. */
.wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: var(--vorm-rond-klein);
  color: var(--groen);
  background: color-mix(in srgb, var(--groen) 12%, var(--bg));
  vertical-align: middle;
  text-decoration: none;
  /* Soms een link, soms een knop (Mailen haalt de tekst eerst op): allebei
   * zonder de rand en de binnenruimte van een knop. */
  border: 0;
  padding: 0;
  cursor: pointer;
}
.wa:hover { background: color-mix(in srgb, var(--groen) 22%, var(--bg)); }
.wa:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wa.uit {
  color: var(--zacht);
  background: none;
  border: 1px dashed var(--rand-sterk);
  cursor: help;
}
/* Een nummer met zijn knopje in een tabelcel: het veld krimpt, het knopje
 * niet. */
.telcel { display: flex; align-items: center; gap: 4px; min-width: 0; }
.telcel > input { flex: 1 1 auto; }
/* Waarom een partij meedoet: de redenen op één regel, afgekapt met de hele
   zin in de titel, en het kruisje erachter als de baan de enige reden is. */
.ktmeedoen { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ktmeedoen > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ktmeedoen > .knop { padding: 0 6px; min-height: 22px; flex: none; }
/* De grote knop in een dialoog: "Via WhatsApp naar 06-...". */
.knop.wa-knop {
  background: var(--groen);
  border-color: var(--groen);
  color: #fff;
  font-weight: 550;
}
.knop.wa-knop:hover { filter: brightness(1.08); background: var(--groen); }
.knop.wa-knop.uit { opacity: .5; cursor: default; filter: none; }
/* Het bericht zoals het aankomt: een ballon, geen invulveld. Zo lees je het
 * als de ontvanger en niet als degene die het typt. */
.wa-voorbeeld {
  max-width: 420px;
  padding: 8px 11px;
  border-radius: var(--vorm-rond) var(--vorm-rond) var(--vorm-rond) 3px;
  background: color-mix(in srgb, var(--groen) 12%, var(--bg));
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.wa-voorbeeld:empty { display: none; }

/* Een kaart zonder rand, met een zachte roze schaduw: hij ligt op het paneel
   en hoeft niet ook nog omlijnd te worden. */
.kaartje {
  border: 1px solid transparent;
  border-radius: var(--vorm-rond);
  padding: 13px 15px;
  background: var(--kaart-bg);
  box-shadow: var(--kaart-schaduw);
}

.veld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 11px; }
.veld label { font-size: 12px; color: var(--zacht); }

/* -- de tabbladen van een scherm ------------------------------------------ */

/* Eén ding met meerdere kanten, en niet vier losse knoppen: de omlijsting zegt
   dat je kiest uit een verzameling, en dat je er altijd precies één van ziet. */
.tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: 16px;
  border: 1px solid var(--rand);
  border-radius: 99px;
  background: var(--vlak);
  flex-wrap: wrap;
}
.tabs button {
  min-height: 27px;
  padding: 3px 14px;
  border: 0;
  border-radius: 99px;
  background: none;
  color: var(--zacht);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.tabs button:hover { color: var(--tekst); }
.tabs button[aria-selected="true"] {
  background: var(--bg);
  color: var(--tekst);
  font-weight: 600;
  box-shadow: var(--vorm-schaduw);
}
.tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* -- een leeg scherm ------------------------------------------------------ */

/* Een leeg scherm is de plek waar iemand zonder werkwijze vastloopt. Dus staat
   er niet "geen resultaten" maar waaróm het leeg is en wat de eerstvolgende
   handeling is — met de knop erbij. */
.leeg { color: var(--zacht); padding: 24px 0; text-align: center; }

.leegvak {
  border: 1px dashed var(--rand-sterk);
  border-radius: var(--vorm-rond);
  padding: 30px 24px;
  text-align: center;
  background: var(--vlak);
}
.leegvak .leegtitel { font-weight: 600; font-size: 15px; margin-bottom: 5px; }
.leegvak p { margin: 0 auto 14px; color: var(--zacht); max-width: 52ch; }
.leegvak .knoppenrij { justify-content: center; }

.merkje {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 99px;
  font-size: 11px;
  background: var(--vlak);
  color: var(--zacht);
  border: 1px solid var(--rand);
}

.merkje.waarschuwing { background: var(--rood-zacht); color: var(--rood); border-color: var(--rood); }
.merkje.goed { background: var(--accent-zacht); color: var(--accent); border-color: var(--accent); }

/* -- het raster ---------------------------------------------------------- */

.rasterbak {
  border: 1px solid var(--rand);
  border-radius: var(--vorm-rond);
  overflow: auto;
  max-height: calc(100vh - 230px);
  background: var(--bg);
  box-shadow: var(--vorm-schaduw);
}

table.raster {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

/* De kop in gewone letters en zonder lijn eronder (ontwerp kleur, kaart 6).
   Kleine hoofdletters met spatiëring passen bij een formulier; "Toegewezen
   aan" in gewoon schrift leest zachter, en de witruimte doet wat de lijn deed. */
table.raster th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg);
  text-align: left;
  font-weight: 700;
  font-size: 11.5px;
  color: var(--zacht);
  padding: 8px 12px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

table.raster th .pijl { color: var(--zacht); font-size: 10px; margin-left: 3px; }

table.raster td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--rand);
  min-height: var(--regel);
  vertical-align: top;
}

table.raster tbody tr:last-child td { border-bottom: 0; }
table.raster tbody tr:hover td { background: var(--vlak); }
table.raster tbody tr.klikbaar { cursor: pointer; }
table.raster td.getal { text-align: right; font-variant-numeric: tabular-nums; }
table.raster td.knip { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

mark { background: var(--accent-zacht); color: inherit; padding: 0 1px; border-radius: 2px; }

/* -- stille velden -------------------------------------------------------
 *
 * Een veld in een lijst is tekst tot je erop wijst (ontwerp kleur, kaart 2).
 * In Dossiers en Contacten was elke cel een wit vak met een kader, en veertig
 * regels vol kaders lezen als een formulier en niet als een lijst: je ziet de
 * vakjes en niet wat erin staat.
 *
 * Wijs je een regel aan, of kom je erin met Tab, dan komen kader en pijltje
 * terug -- zo zie je wat je kunt veranderen voordat je klikt. Sta je in het
 * veld zelf, dan is het wit met een rand in de tweede kleur: de huisregel
 * "invoervelden altijd licht" geldt zodra je typt.
 *
 * Het pijltje van een keuzelijst is een eigen tekening, omdat dat van het
 * systeem niet onzichtbaar te maken is zonder het helemaal weg te halen. Een
 * `data:`-adres, dus niets van buiten.
 *
 * De selectors wegen expres weinig (`:where`): een veld met een eigen vorm,
 * zoals het nummer in de leidraad, houdt die. */
.raster :where(td) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="range"]), select, textarea) {
  border-color: transparent; background: transparent; color: var(--tekst);
  color-scheme: inherit;
}
.raster :where(td) select {
  appearance: none; -webkit-appearance: none; padding-right: 20px;
  background-repeat: no-repeat; background-position: right 6px center;
}
.raster tr:hover :where(td) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="range"]), select, textarea),
.raster tr:focus-within :where(td) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="range"]), select, textarea) {
  border-color: var(--rand-sterk);
}
.raster tr:hover :where(td) select,
.raster tr:focus-within :where(td) select {
  background-image: var(--pijl);
}
.raster tr :where(td) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="range"]), select, textarea):focus {
  background-color: var(--veld-bg); color: var(--veld-tekst); color-scheme: light;
  border-color: var(--accent-2); outline: none;
  box-shadow: 0 0 0 3px var(--accent-2-zacht);
}
@media (prefers-reduced-motion: no-preference) {
  .raster :where(td) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="range"]), select, textarea) { transition: border-color .12s, background-color .12s; }
}

/* -- wat over de pagina heen ligt -----------------------------------------
 *
 * Drie lagen, en ze staan alle drie boven de duizend. Dat is geen ruimte om op
 * te vullen maar een grens: Leaflet nummert zijn kaartlagen tot duizend, en de
 * volgende bibliotheek die meekomt kan net zo goed verder tellen. Een venster
 * van deze app hoort onder geen enkele omstandigheid achter iets te verdwijnen
 * -- het is het enige wat op dat moment op antwoord wacht.
 *
 * Wat bij de pagina hoort blijft laag: de zijbalk, een vastgezette koprij, een
 * tegel die je versleept. Die staan bewust niet in deze schaal.
 */
:root {
  --laag-venster: 1020;
  --laag-melding: 1030;
  --laag-zwevend: 1060;
}

/* -- dialoog ------------------------------------------------------------- */

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--laag-venster);
  padding: 20px;
}

.dialoog {
  background: var(--bg);
  border-radius: 14px;
  border: 1px solid var(--rand);
  box-shadow: 0 18px 50px rgba(16, 24, 40, .22);
  padding: 18px 20px;
  min-width: 320px;
  max-width: 680px;
  max-height: 84vh;
  overflow: auto;
}

/* Een venster met een tabel erin. Niet de standaardbreedte, want een venster
   dat altijd zo breed is leest als een scherm dat per ongeluk in een kader
   staat. */
.dialoog.breed { max-width: min(1040px, 94vw); width: 94vw; }

.dialoog h2 { margin-top: 0; }

/* Knoppen die onderaan een lang venster blijven staan terwijl je scrolt. De
   negatieve marge trekt de balk tot aan de rand van het venster, zodat er
   geen kaartje onderdoor schemert. */
.dialoog .plakbalk {
  position: sticky;
  bottom: -18px;
  margin: 12px -20px -18px;
  padding: 10px 20px 18px;
  background: var(--bg);
  border-top: 1px solid var(--rand);
  z-index: 1;
}

/* De groepen van het invulscherm: een kop die in- en uitklapt. */
.invulgroep {
  display: flex; gap: 8px; align-items: baseline; width: 100%;
  margin: 14px 0 6px; padding: 0; border: 0; background: none;
  font: inherit; color: var(--tekst); text-align: left; cursor: pointer;
}
.invulgroep:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.invulgroep .pijl { color: var(--zacht); font-size: 11px; width: 1em; transition: transform .12s; }
.invulgroep[aria-expanded="false"] .pijl { transform: rotate(-90deg); }
/* De soort als merkje achter de naam, in plaats van een eigen kolom. */
.soortje {
  font-size: 11px; color: var(--zacht); border: 1px solid var(--rand-sterk);
  border-radius: 4px; padding: 0 5px; margin-left: 6px; white-space: nowrap;
}

/* Een link die eruitziet als knop, zoals "Bekijk het formulier". */
a.knop { text-decoration: none; }

/* De standen van de vragen: vier knoppen tegen elkaar aan. */
.invulstanden td { vertical-align: middle; }
.invulstanden th { background: none; }
.standkeuze { display: inline-flex; border: 1px solid var(--rand-sterk); border-radius: var(--vorm-rond-klein); overflow: hidden; }
.standkeuze button {
  font: inherit; font-size: 12px; border: 0; background: var(--bg); color: var(--zacht);
  padding: 3px 8px; cursor: pointer; white-space: nowrap;
}
.standkeuze button + button { border-left: 1px solid var(--rand); }
.standkeuze button[aria-pressed="true"] { background: var(--accent-zacht); color: var(--accent); font-weight: 600; }
.standkeuze button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.standkeuze button[disabled] { cursor: default; }
.afwijkt { color: var(--amber); }

/* Het spoor van een verzoek: een lijn met een stip per moment. */
.invulspoor {
  list-style: none; margin: 10px 0 0; padding: 0 0 0 14px;
  border-left: 2px solid var(--rand); display: grid; gap: 4px; font-size: 13px;
}
.invulspoor li { position: relative; }
.invulspoor li::before {
  content: ""; position: absolute; left: -19px; top: 7px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--groen);
}
.invulspoor .wanneer {
  color: var(--zacht); font-variant-numeric: tabular-nums;
  display: inline-block; min-width: 56px; margin-right: 6px;
}

/* Wat ze erbij zeiden: grijs vlak bovenaan de verschillenlijst, geen vinkje. */
.kaartje.invulinfo { background: var(--vlak); margin-top: 8px; padding: 8px 10px; }
.kaartje.invulinfo p { margin: 4px 0 0; }
.kaartje.invulinfo .citaat { font-size: 13.5px; }

/* De som van de apparaten tegen de aansluiting. */
.invulsom { margin-top: 8px; }
.sombalk { height: 8px; border-radius: 4px; background: var(--vlak); border: 1px solid var(--rand); overflow: hidden; margin-top: 5px; max-width: 360px; }
.sombalk > span { display: block; height: 100%; background: var(--groen); }
.sombalk.over > span { background: var(--rood); }

/* Een regel in de verschillenlijst met een waarschuwing erboven. */
.kaartje.waarschuwt { border-color: color-mix(in srgb, var(--rood) 45%, var(--rand)); }

/* -- de voortgangsbalk ----------------------------------------------------- */
/* Onderin beeld en over alles heen. Hij is er even en daarna niet meer, dus
   hoort hij geen plek in te nemen die daarna leeg blijft. */
.voortgang {
  position: fixed; z-index: var(--laag-zwevend);
  left: 50%; transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: min(420px, calc(100vw - 32px));
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: 12px; padding: 10px 13px 12px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, .18);
}
.voortgangkop {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 12.5px; margin-bottom: 7px;
}
.voortgangkop > span:first-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.voortgangcijfer { font-variant-numeric: tabular-nums; color: var(--zacht); }
.voortgangspoor {
  height: 6px; border-radius: 99px; overflow: hidden;
  background: color-mix(in srgb, var(--zacht) 22%, transparent);
}
.voortgangvulling {
  height: 100%; width: 0; border-radius: 99px; background: var(--accent);
  transition: width .18s linear;
}
/* Geen maat bekend: heen en weer, zodat de balk niet op 100% blijft staan en
   leest als vastgelopen. */
.voortgangspoor.onbekend .voortgangvulling {
  width: 35%; animation: voortgangheen 1.1s ease-in-out infinite alternate;
  transition: none;
}
@keyframes voortgangheen {
  from { margin-left: 0; }
  to { margin-left: 65%; }
}
@media (prefers-reduced-motion: reduce) {
  .voortgangspoor.onbekend .voortgangvulling {
    animation: none; width: 100%; opacity: .5;
  }
}

/* -- melding ------------------------------------------------------------- */

/* Een donkere pil met een roze sterretje: de tweede van de twee plekken waar
   de app zich een versiering permitteert (ontwerp kleur, kaart 6). Een knop
   erin (`meldingMetKnop`) is een lichte pil in dezelfde kleur als de tekst. */
#melding {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  background: var(--tekst);
  color: var(--bg);
  padding: 7px 16px 7px 14px;
  border-radius: var(--vorm-knop);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  z-index: var(--laag-melding);
  font-size: 13px;
  font-weight: 600;
}
#melding::before { content: "\2726"; color: var(--melding-ster); flex: none; }
#melding:has(.meldingknop) { padding-right: 7px; }
.meldingknop {
  flex: none; padding: 2px 11px; border: 0; border-radius: var(--vorm-knop);
  background: color-mix(in srgb, var(--bg) 16%, transparent); color: inherit;
  font: inherit; cursor: pointer;
}
.meldingknop:hover { background: color-mix(in srgb, var(--bg) 26%, transparent); }
.meldingknop:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }
@media (prefers-reduced-motion: no-preference) {
  #melding { animation: meldingverschijnt .25s ease-out; }
}
@keyframes meldingverschijnt {
  from { opacity: 0; transform: translate(-50%, 6px); }
}

/* -- aanmelden ----------------------------------------------------------- */

.aanmeldbak { max-width: 360px; margin: 14vh auto 0; padding: 0 18px; }
.aanmeldbak .kaartje { padding: 22px 24px; }

/* -- voortgang ----------------------------------------------------------- */

.balkje { height: 6px; background: var(--vlak); border-radius: 99px; overflow: hidden; }
.balkje > i { display: block; height: 100%; background: var(--accent); transition: width .3s; }

.cijfers { display: flex; gap: 18px; flex-wrap: wrap; margin: 10px 0; }
.cijfer { font-size: 12px; color: var(--zacht); }
.cijfer b { display: block; font-size: 19px; color: var(--tekst); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Een rijtje knoppen om uit te kiezen -- de tabbladen van een werkblad. */
.keuzerij { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* Bladeren door de schijf: een lijst mappen om aan te wijzen. */

/* -- stukken ------------------------------------------------------------- */

/* Het werkscherm van een stuk. De afdruk zelf heeft een eigen stijl
   (stuk.css); hier gaat het om bewerken, dus blijft alles de dichtheid van de
   app houden. */
.terug { display: inline-block; margin-bottom: 6px; font-size: 13px; color: var(--zacht); text-decoration: none; }
.terug:hover { color: var(--accent); }

.paragraaf { border: 1px solid var(--rand); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--bg); }
.paragraafkop { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.paragraafkop .nummer { font-variant-numeric: tabular-nums; }
.paragraafknoppen { display: inline-flex; gap: 2px; }
.paragraafknoppen .knop { padding: 2px 8px; }

/* Overgeslagen: doorgestreept en met een streepje op de plek van het nummer.
   Niet weg, want dan is overslaan niet te onderscheiden van vergeten. */
.paragraaf.overgeslagen { background: var(--vlak); border-style: dashed; }
.paragraaf.overgeslagen .paragraafkop b { text-decoration: line-through; color: var(--zacht); font-weight: 500; }

/* Wat er boven een schrijfvak staat: een verwijzing invoegen, een tabel. */
.schrijfbalk { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.schrijfbalk select { max-width: 100%; }

/* Een starttekst in de keuzedialoog: de naam, de knoppen, en eronder hoe hij
   in het stuk komt. */
.kaartje.starttekst { margin-bottom: 10px; }
.kaartje.starttekst .voorbeeld { max-height: 260px; overflow-y: auto; }

/* Het organogram op het werkscherm, dezelfde boom als in stuk.css. */
.organogram { margin: 4px 0 8px; overflow-x: auto; }
.organogram ul { list-style: none; margin: 0; padding: 0 0 0 26px; }
.organogram > ul { padding-left: 0; }
.organogram li { position: relative; padding-top: 6px; }
.organogram ul ul > li::before { content: ""; position: absolute; left: -18px; top: 0; bottom: 0; border-left: 1px solid var(--rand-sterk); }
.organogram ul ul > li:last-child::before { bottom: auto; height: 22px; }
.organogram ul ul > li::after { content: ""; position: absolute; left: -18px; top: 22px; width: 18px; border-top: 1px solid var(--rand-sterk); }
.organogram .vak { display: inline-block; min-width: 200px; max-width: 100%; padding: 6px 10px; border: 1px solid var(--rand-sterk); border-radius: 8px; background: var(--vlak); }
.organogram .vak b, .organogram .wie, .organogram .kanaal { display: block; }
.organogram .wie { font-size: 13px; }
.organogram .tel, .organogram .kanaal { color: var(--zacht); font-size: 12px; font-variant-numeric: tabular-nums; }
/* Wie naast een functie staat (ontwerp algemeen, kaart 3): op dezelfde
   hoogte, gestippeld, met een stippellijn ernaartoe en buiten de lijn van wie
   wie aanstuurt. */
.organogram .vakrij { display: flex; align-items: center; flex-wrap: wrap; row-gap: 4px; }
.organogram .naastlijn { width: 18px; border-top: 1px dashed var(--rand-sterk); }
.organogram .vak.naast { border-style: dashed; background: transparent; min-width: 150px; }

/* Algemeen → Functies: onder de lijst het organogram en de bezettingsvormen. */
.functieplek { display: inline-flex; gap: 4px; white-space: nowrap; }
.functieplek select { max-width: 140px; }
.functiekop { font-size: 14.5px; margin: 22px 0 2px; }
.functieboom { margin-bottom: 14px; }
.functievormen > summary { cursor: pointer; color: var(--zacht); font-size: 13px; margin-bottom: 6px; }

/* Een tekening die in het stuk is opgenomen, op het werkscherm. */
.stuktekening { margin: 6px 0 10px; }
.stuktekening img { display: block; max-width: 100%; max-height: 420px; border: 1px solid var(--rand); background: #fff; }
.stuktekening .knoppenrij { margin-top: 6px; }
.stuktekening input { min-width: 0; }

/* Het voorblad op het werkscherm: de tabel zoals hij in het stuk komt, en de
   twee velden die bij het stuk zelf horen. */
.raster.voorbladtabel { width: auto; max-width: 100%; margin-bottom: 8px; }
.raster.voorbladtabel th { text-align: left; font-weight: 500; color: var(--zacht); padding-right: 16px; }
/* Een gat breekt elders nooit af, maar `⟨productie.opdrachtgever⟩` is op een
   telefoon breder dan de kolom ernaast; hier mag hij over twee regels. */
.raster.voorbladtabel td { overflow-wrap: anywhere; }
.raster.voorbladtabel .gat { white-space: normal; }
.voorbladvelden .veld { display: flex; flex-direction: column; gap: 2px; margin: 0; }

/* Welke van de vijf soorten dit is. Het onderscheid telt: wat jij schrijft en
   wat de database levert zien er anders uit en gedragen zich anders. */
.soortmerk { display: inline-block; padding: 1px 7px; border-radius: 99px; font-size: 11px; background: var(--vlak); color: var(--zacht); border: 1px solid var(--rand); }
.soortmerk.tekst { background: var(--accent-zacht); color: var(--accent); border-color: var(--accent); }

.tekstveld { width: 100%; min-height: 70px; resize: vertical; line-height: 1.5; }

/* Hoe het eruit komt te zien: dezelfde tekst met de invulplekken erin. */
.voorbeeld { margin-top: 8px; padding: 8px 10px; border-left: 3px solid var(--rand-sterk); background: var(--vlak); white-space: pre-wrap; line-height: 1.55; }
.voorbeeld.gegeven { white-space: normal; font-variant-numeric: tabular-nums; }
/* Met opmaak: alinea's, lijstjes en tabellen zoals ze in het stuk komen. Dan
   geen pre-wrap meer — de regels zijn al blokken geworden. */
.voorbeeld.opgemaakt { white-space: normal; }
.opgemaakt p { margin: 0 0 6px; }
.opgemaakt p:last-child { margin-bottom: 0; }
.opgemaakt ul, .opgemaakt ol { margin: 0 0 6px; padding-left: 22px; }
.opgemaakt .teksttabel { margin: 4px 0 8px; width: 100%; }
.opgemaakt .teksttabel th { text-align: left; }
/* De som onder het getal, zoals in stuk.css: de voetnoot bij het getal, niet
   het getal zelf. */
.voorbeeld .onderbouwing { margin-top: 2px; font-size: 12px; color: var(--zacht); }

/* Een gat is een gegeven dat de app niet kon invullen. Zichtbaar houden. */
.gat { color: var(--rood); font-weight: 600; white-space: nowrap; }

.kaartje.waarschuwing { border-color: var(--rood); background: var(--rood-zacht); margin-bottom: 12px; }

/* Het bedrag waar het kaartje over gaat: groot genoeg om als antwoord te lezen
   en niet als cel in een tabel. Met tabelcijfers, want een bedrag dat bij elke
   wijziging opschuift leest als een ander bedrag. */
.grootgetal {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  margin: 2px 0 1px;
}
.gatenlijst { margin: 6px 0; padding-left: 20px; font-size: 13px; }
/* De werklijst boven een stuk: wat je hier schrijft, en wat elders ontbreekt.
   De knop naar die andere plek staat in de regel zelf, niet eronder. */
.werklijst .gatenlijst + b { display: block; margin-top: 10px; }
.werklijst .gatenlijst li { margin: 2px 0; }
/* Vijfentwintig kopjes onder elkaar duwen het stuk van het scherm; in kolommen
   blijven ze te overzien. */
.werklijst .gatenlijst.schrijven { columns: 17em; column-gap: 24px; }
.werklijst .gatenlijst .knop { padding: 1px 8px; }

/* "Overgenomen uit het vorige stuk -- nog waar?" */
.overname { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; padding: 6px 10px; border-radius: 8px; background: var(--accent-zacht); color: var(--accent); font-size: 13px; }

/* -- instellingen -------------------------------------------------------- */

/* Een vinkje met zijn tekst ernaast, in plaats van eronder zoals de andere
   velden. Een label boven een checkbox leest als een kop en niet als een keuze. */
/* De kop van het baanpaneel, als keuzelijst.
 *
 * Hij ziet eruit als de kop die hij vervangt -- groot en zwaar -- en niet als
 * een formulierveld tussen andere velden: het is de naam van waar je naar
 * kijkt, en dat hij te wisselen is komt daarna. Het pijltje verraadt het al. */
.paneelkop {
  font-size: 17px; font-weight: 600; width: 100%;
  border-color: transparent; background: none;
  padding-left: 0; margin-bottom: 4px;
}
.paneelkop:hover { border-color: var(--rand); background: var(--vlak); }

/* Een regel in het zijbalkscherm: ikoon, naam, sleutel, knoppen. Hij is
   breder dan een gewone knoppenrij en mag omlopen op een smal scherm. */
.menurij { gap: 6px; margin-bottom: 4px; }
.menurij .navteken { flex: none; }
.menurij .klein { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.vinkregel { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tekst); cursor: pointer; }
.vinkregel input { min-height: 0; width: 16px; height: 16px; }

/* De uitslag van de testmail. Groen of rood, want dat is de hele vraag. */
.goedtekst { color: var(--groen); }
.fouttekst { color: var(--rood); }

/* -- vragen --------------------------------------------------------------- */

/* De kop van een kaartje: een titel met een merkje ernaast. Hij heette naar de
   vraagkaart, maar Vandaag en de leidraad gebruiken hem ook; de vraagkaart is
   sinds het bord weg. */
.vraagkop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

/* Het bord: stapels in kolommen die het frame vullen, één per ontvanger. */
.vrbord { padding: 14px 16px 48px; }
.vrraster {
  display: grid; gap: 14px; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}
.vrstapel {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 12px 12px 10px; border-radius: var(--vorm-paneel);
  background: var(--bg); box-shadow: var(--paneel-schaduw);
}
/* Nog aan niemand: een stapel die nergens heen gaat tot je hem verdeelt. Een
   stippellijn op het vlak, zodat hij niet leest als een ontvanger. */
.vrstapel.niemand {
  background: var(--vlak); box-shadow: none; border: 1.5px dashed var(--rand-sterk);
}
.vrstapelkop {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px;
  align-items: baseline; padding: 0 4px;
}
.vrstapelnaam { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.vrteller { font-size: 12px; font-weight: 650; color: var(--accent); white-space: nowrap; }
.vrwie {
  grid-column: 1 / -1; font-size: 12px; color: var(--zacht); overflow-wrap: anywhere;
}
.vrvragen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.vrvraag {
  display: flex; gap: 9px; align-items: flex-start; padding: 6px 6px;
  border-radius: 10px;
}
/* De stand als stip: roze moet nog weg, turquoise ligt buiten, groen is terug. */
.vrstip {
  flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%;
  background: var(--rand-sterk);
}
.vrvraag.open .vrstip { background: var(--accent); }
.vrvraag.gesteld .vrstip { background: var(--accent-2); }
.vrvraag.beantwoord .vrstip { background: var(--groen); }
.vrvraag.afgehandeld { color: var(--zacht); }
.vrinhoud { flex: 1; min-width: 0; }
.vrtekst { font-size: 13.5px; line-height: 1.4; overflow-wrap: anywhere; }
.vrmeta {
  display: flex; flex-wrap: wrap; gap: 0 6px; margin-top: 2px;
  font-size: 12px; color: var(--zacht);
}
.vrgeopend { color: var(--amber); font-weight: 600; }
.vrantwoord { color: var(--groen); }
.vrdossier {
  padding: 0 7px; border-radius: var(--vorm-knop); background: var(--vlak);
}
.vrstapel.niemand .vrdossier { background: var(--bg); }
.vrstapelvoet {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 6px 4px 0; border-top: 1px solid var(--rand);
}
.vrstand { flex: 1; font-size: 12px; color: var(--zacht); }
/* De regel onder een stapel: een stil veld dat zegt wat het doet. Pas wit met
   een rand als je erin staat, zoals de stille velden elders. */
.vrerbij {
  width: 100%; margin: 0; padding: 5px 8px; min-height: 30px;
  border: 1px solid transparent; border-radius: var(--vorm-rond-klein);
  background: transparent; color: var(--tekst); color-scheme: inherit;
  font: inherit; font-size: 13px;
}
.vrerbij::placeholder { color: var(--zacht); }
.vrerbij:hover { border-color: var(--rand-sterk); }
.vrerbij:focus {
  outline: none; border-color: var(--accent-2);
  background: var(--veld-bg); color: var(--veld-tekst);
}
/* Wie er in het venster gekozen is, boven het zoekveld. */
.vrgekozen { margin-bottom: 6px; font-weight: 600; overflow-wrap: anywhere; }
.vrgekozen.leeg { font-weight: 400; color: var(--zacht); }

/* De vraag die in het paneel openstaat blijft turquoise, zoals een regel die
   aanstaat elders ook. */
.vrvraag { cursor: pointer; }
.vrvraag:hover { background: var(--vlak); }
.vrvraag.gekozen { background: var(--accent-2-zacht); }
.vrvraag:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }

/* Het paneel: de stand als pil met een stip, zoals de status in de tabellen. */
.vrpil {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px;
  border-radius: 999px; font-size: 12px; font-weight: 650;
  background: var(--vlak); color: var(--zacht);
}
.vrpil i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.vrpil.gesteld { background: var(--accent-2-zacht); color: var(--accent-2); }
.vrpil.beantwoord { background: var(--groen-zacht); color: var(--groen); }
.vrpaneelkop { margin: 0; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
/* Stille velden: tekst tot je erop wijst (ontwerp kleur, kaart 2). */
.vrstil {
  width: 100%; margin: 0; padding: 4px 6px; resize: vertical;
  border: 1px solid transparent; border-radius: var(--vorm-rond-klein);
  background: transparent; color: var(--tekst); color-scheme: inherit;
  font: inherit; font-size: 13.5px; line-height: 1.45;
}
select.vrstil { resize: none; }
.vrstil:hover { border-color: var(--rand-sterk); }
.vrstil:focus {
  outline: none; border-color: var(--accent-2);
  background: var(--veld-bg); color: var(--veld-tekst);
}
.vrstil.vrpaneelvraag { font-size: 15px; font-weight: 650; }
.vrstilknop {
  display: block; width: 100%; padding: 4px 6px; text-align: left;
  border: 1px solid transparent; border-radius: var(--vorm-rond-klein);
  background: none; color: var(--tekst); font: inherit; font-size: 13.5px;
  cursor: pointer; overflow-wrap: anywhere;
}
.vrstilknop:hover { border-color: var(--rand-sterk); }
.vrstilknop[hidden] { display: none; }
.vrkiezer .treffers { max-height: 240px; }
/* In het paneel is de kiezer 290 pixels breed: de partij en het adres gaan
   onder de naam in plaats van hem af te kappen. */
.vrkiezer .treffer { flex-wrap: wrap; gap: 0 8px; }
.vrkiezer .treffer .treffernaam { flex: 1 0 auto; }
.vrkiezer .treffer .trefferbij { white-space: normal; overflow-wrap: anywhere; }
.treffer.vrnieuw .treffernaam, .treffer.vrzonder .treffernaam {
  font-weight: 550; color: var(--accent);
}
.vrspoor { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px;
  font-size: 13px; }
.vrspoor li::before { content: "\2022  "; color: var(--accent-2); }
.vrspoor li.vrgeopend::before { color: var(--amber); }
.vrpaneel .antwoordblok { margin-top: 0; }

@media (max-width: 700px) {
  .vrbord { padding: 10px 10px 40px; }
  .vrraster { grid-template-columns: minmax(0, 1fr); }
}

/* Het antwoord komt van buiten de app en hoort er ook zo uit te zien: ingesprongen,
   met de tekst zoals hij is ingetypt -- regeleindes en al. */
.antwoordblok { margin-top: 10px; padding: 8px 12px; border-left: 3px solid var(--groen); background: var(--vlak); border-radius: 0 8px 8px 0; }
.antwoordblok p { margin: 4px 0 0; white-space: pre-wrap; }

/* -- leidraad ------------------------------------------------------------- */

/* De handleiding: fasen als kaarten, stappen als regels eronder. Ruimer dan de
   rasters elders, want dit is een tekst om te lezen en geen lijst om te scannen. */
.fasekaart { margin-bottom: 12px; }
.stapregel { padding: 8px 0 8px 10px; border-left: 2px solid var(--rand); margin-top: 8px; }
.stapkop { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.stapnaam { font-weight: 600; }

/* De week waarin een stap valt, in tabelcijfers zodat de kolom uitlijnt. */
.stapweek { min-width: 52px; font-size: 12px; color: var(--zacht); font-variant-numeric: tabular-nums; }

/* Waaruit de app die week heeft afgeleid. Hier staat waarom het voorstel is
   zoals het is -- en dat is wat corrigeren mogelijk maakt. */
.bewijs { font-size: 12px; color: var(--zacht); font-style: italic; margin-top: 3px; }

/* Hoe ver elke fase is, in één blik boven de takenlijst. */
/* Eén regel chips. De vulling van de chip is de balk, dus er is geen los
   balkje meer -- en een chip is zo breed als zijn tekst, dus er vallen geen
   gaten meer tussen twee korte namen. */
.fasenstrook {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px;
  align-items: center;
}
.fasechip {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 2px 9px; border-radius: 99px;
  border: 1px solid var(--rand); background: var(--bg);
  font-size: 12px; color: var(--zacht);
}
/* Hoe ver het is, als vulling achter de tekst. */
.fasechip > i {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--accent-zacht);
}
/* In de leidraad: gewone letters, en hoe ver het is als een lijntje van twee
   pixels onder de tekst in de kleur van de afdeling (ontwerp kleur, kaart 6).
   Een gevulde achtergrond naast vijf andere gevulde achtergronden las als vijf
   knoppen die aan stonden. De streep eronder is het deel dat nog moet. */
.fasenstrook .fasechip {
  text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600;
  padding: 2px 11px 5px; border: 0; background: var(--kaart-bg);
  box-shadow: var(--kaart-schaduw);
}
.fasenstrook .fasechip::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--rand);
}
.fasenstrook .fasechip > i {
  top: auto; bottom: 2px; left: 11px; height: 2px; z-index: 1;
  max-width: calc(100% - 22px); border-radius: 2px;
  background: var(--k, var(--accent-2));
}
.fasechip > span, .fasechip > b { position: relative; }
.fasechip > b {
  font-weight: 600; color: var(--tekst); font-variant-numeric: tabular-nums;
}
.fasenaam { max-width: 22ch; overflow: hidden; text-overflow: ellipsis;
            white-space: nowrap; }

.mijlpaalkaart { margin-bottom: 8px; }
.mijlpaalkaart.telaat { border-color: var(--rood); }
.telaattekst { color: var(--rood); font-weight: 600; }

/* Volgorde is een waarschuwing en geen slot: dit blokkeert niets, het staat er
   alleen zodat je het ziet voordat je afvinkt. */
.wachtregel { margin-top: 6px; font-size: 13px; color: var(--amber); }

/* -- beginscherm ---------------------------------------------------------- */

/* De kop: de weg naar dag 0. Een regel met de fase en de stand, en de
   mijlpalen als kralen op een lijn op schaal (ontwerp vandaag, 2). */
.vdkop { margin-bottom: 20px; }
.vdwegregel { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; font-size: 14px; }
.vdrood { color: var(--rood); font-weight: 600; }
.vdlijn { position: relative; height: 46px; margin: 8px 7px 2px; }
.vdspoor { position: absolute; left: 0; right: 0; top: 22px; height: 2px; border-radius: 2px; background: var(--rand-sterk); }
/* Groen is gereed, rood is open en over datum, een open rondje komt nog. */
.vdkraal {
  position: absolute; top: 17px; width: 12px; height: 12px; margin-left: -6px; padding: 0;
  border: 2px solid var(--rand-sterk); border-radius: 50%; background: var(--bg); cursor: pointer;
}
.vdkraal.af { background: var(--groen); border-color: var(--groen); }
.vdkraal.laat { background: var(--rood); border-color: var(--rood); }
.vdkraal:hover, .vdkraal:focus-visible { transform: scale(1.35); outline: 2px solid var(--accent); outline-offset: 1px; z-index: 2; }
.vdnu, .vddag0 { position: absolute; top: 12px; height: 22px; width: 0; border-left: 2px solid var(--tekst); }
.vddag0 { border-left-color: var(--accent); border-left-width: 3px; }
.vdnutekst, .vddag0tekst { position: absolute; left: 50%; transform: translateX(-50%); font-size: 11px; white-space: nowrap; }
.vdnutekst { top: -14px; color: var(--tekst); font-weight: 600; }
.vddag0tekst { top: 23px; color: var(--accent); font-weight: 650; }
/* De uitleg bij een kraal. Eén voor de hele lijn, boven de kraal en binnen
   de lijn gehouden (`tekenWeg`), zodat hij niet uit het scherm valt. */
.vduitleg {
  position: absolute; bottom: 36px; z-index: 5; display: flex; flex-direction: column; gap: 1px;
  min-width: 170px; max-width: min(260px, 100%); padding: 7px 10px; border: 1px solid var(--rand);
  border-radius: var(--vorm-rond-klein); background: var(--kaart-bg); box-shadow: var(--vorm-schaduw-op);
  font-size: 13px; pointer-events: none;
}
.vduitleg.links { transform: translateX(-100%); }
/* Eén regel met wat er binnenkwam terwijl je er niet was, onder de lijn. Zacht
   en zonder strook: hij hoort gelezen te worden en dan uit beeld te zijn. */
.sindsdien { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-top: 6px; }

/* Waar jij aan zet bent. Regels en geen kaarten: dit is een stapel om door te
   werken, niet iets om te lezen. */
.ballen { border: 1px solid var(--rand); border-radius: 8px; overflow: hidden; margin-bottom: 18px; }
/* Eén kolom per regel: de naam bovenaan, eronder de soort en wat er gebeurde,
   rechts het pilletje. Naast elkaar brak het op een telefoon in drie smalle
   kolommen (ontwerp vandaag, 3). */
.balregel { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; background: none; border: 0; border-bottom: 1px solid var(--rand); font: inherit; color: var(--tekst); text-align: left; cursor: pointer; }
.balregel:last-child { border-bottom: 0; }
.balregel:hover, .balregel:focus { background: var(--vlak); }
.baltekst { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.balnaam { font-weight: 600; overflow-wrap: anywhere; }
.balonder { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.balsoort { padding: 1px 7px; border-radius: var(--vorm-knop); font-size: 11px; font-weight: 600; letter-spacing: .02em; background: var(--vlak); color: var(--zacht); }
.balsoort.formulier { background: color-mix(in srgb, var(--link) 14%, transparent); color: var(--link); }
.balsoort.vraag { background: var(--groen-zacht); color: var(--groen); }
.balsoort.mijlpaal { background: var(--accent-zacht); color: var(--accent); }
.balsoort.dossier { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber); }
/* Het aantal naast een kop op Vandaag. */
.vdaantal { margin-left: 8px; padding: 1px 8px; border-radius: var(--vorm-knop); background: var(--vlak); color: var(--zacht); font-size: 12px; font-weight: 600; vertical-align: middle; }

/* De komende twee weken: per dag een kop, vandaag in de accentkleur. */
.vdagenda { margin-bottom: 18px; }
.vdagendalijst { display: flex; flex-direction: column; gap: 10px; }
.vdagendakop { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; font-size: 13.5px; }
.vdagendadag.vandaag .vdagendakop b { color: var(--accent); }
.vdagendaregel { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 4px 8px; border: 0; border-radius: var(--vorm-rond-klein); background: none; font: inherit; font-size: 13.5px; color: var(--tekst); text-align: left; cursor: pointer; }
.vdagendaregel:hover, .vdagendaregel:focus-visible { background: var(--vlak); }
.vdagendaregel .balsoort { flex: none; }
.vdagendatekst { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; min-width: 0; }
.vdagendanaam { overflow-wrap: anywhere; }
.vdniemand { color: var(--amber); font-weight: 600; }
.balsoort.planning { background: color-mix(in srgb, var(--tekst) 8%, transparent); color: var(--tekst); }
.vdagendaverder { margin-top: 8px; }

/* Hoe lang het al ligt, als pilletje. Vanaf tien dagen oranje -- dat is het
   getal waar de waarschuwing ook op staat. */
.baldagen { flex: none; padding: 2px 9px; border-radius: var(--vorm-knop); background: var(--vlak); font-size: 12px; color: var(--zacht); font-variant-numeric: tabular-nums; white-space: nowrap; }
.baldagen.lang { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber); font-weight: 600; }

/* Let op: één kaart, per scherm een kopje, per groep een regel die openvouwt
   (ontwerp vandaag, 5). Een waarschuwing draagt zijn ernst in de stip. Twee
   niveaus en niet meer: `let op` is iets wat je hoort te zien, `nu` is iets
   waar vandaag iets mee moet. Een derde niveau levert alleen ruzie op over
   welk niveau iets is. */
.vdletop { margin-bottom: 18px; padding: 6px 8px 8px; }
.vdletopkop { margin: 10px 8px 2px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--zacht); }
.vdletopkop:first-child { margin-top: 4px; }
.vdletopregel { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--vorm-rond-klein); background: none; font: inherit; font-size: 14px; color: var(--tekst); text-align: left; cursor: pointer; }
.vdletopregel:hover, .vdletopregel:focus-visible { background: var(--vlak); }
.vdstip { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.vdstip.nu { background: var(--rood); }
.vdletoptitel { flex: 1; min-width: 0; }
.vdletopgetal { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.vdpijl { flex: none; width: 12px; color: var(--zacht); font-size: 17px; line-height: 1; text-align: center; transition: transform .15s; }
.vdletopgroep.open .vdpijl { transform: rotate(90deg); }
.vdaantal.dringend { background: var(--rood-zacht); color: var(--rood); }
.letoplijst { margin: 2px 0 6px; padding-left: 42px; font-size: 13px; }
.letoplijst li { margin-bottom: 3px; }

/* De stand van elke module in één blik. Alleen modules die bestaan: een tegel
   die altijd op nul staat leert je over tegels heen kijken. */
.tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.tegel {
  padding: 14px 16px;
  border: 1px solid var(--rand);
  border-radius: var(--vorm-rond);
  background: var(--bg);
  box-shadow: var(--vorm-schaduw);
  font: inherit;
  color: var(--tekst);
  text-align: left;
  cursor: pointer;
  transition: box-shadow .14s, border-color .14s, transform .14s;
}
.tegel:hover, .tegel:focus-visible { border-color: var(--rand-sterk); box-shadow: var(--vorm-schaduw-op); transform: translateY(-1px); }
.tegelnaam { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--zacht); }
.tegelgetal { font-size: 30px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.15; letter-spacing: -.02em; margin-top: 2px; }

/* De stand op Vandaag: kleiner, want hij staat onder het werk en niet ervoor
   (ontwerp vandaag, 6). Alleen hier -- Programmering leent `.tegel` ook. */
.vdstand .tegels { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 9px; }
.vdstand .tegel { padding: 10px 12px; }
.vdstand .tegelgetal { font-size: 21px; }
.vdbalk { height: 4px; margin: 5px 0 3px; border-radius: 99px; background: var(--rand); overflow: hidden; }
.vdbalk > i { display: block; height: 100%; background: var(--groen); }

/* Twee kolommen vanaf een breed scherm: links het werk, rechts het overzicht.
   Smaller onder elkaar, het werk eerst. */
@media (min-width: 1100px) {
  .vdkolommen { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
}
.vdwerk > h2:first-child, .vdoverzicht > section:first-child > h2:first-child { margin-top: 0; }

/* -- algemeen ------------------------------------------------------------- */

/* De artikelboom. Inspringen doet het werk: een vast aantal niveaus bestaat
   niet, dus de opmaak mag er ook niet van uitgaan. */
.boom { max-width: 800px; }
.tak { margin-bottom: 6px; padding-left: 10px; border-left: 2px solid var(--rand); }
.takkop { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 4px 0; }
.artikellijst { margin: 2px 0 6px; padding-left: 20px; font-size: 13px; color: var(--zacht); }
.artikellijst li { margin-bottom: 2px; }

/* Een rekenregel toont zijn formule, zijn invoer en zijn uitkomst naast elkaar:
   een getal zonder onderbouwing geloof je de tweede keer niet meer. */
.regelkaart { margin-bottom: 10px; max-width: 800px; }
.sleutelmerk { font-size: 11px; color: var(--zacht); font-family: ui-monospace, Consolas, monospace; }
.regeluitkomst { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.formule { margin: 4px 0; padding: 5px 9px; border-radius: 6px; background: var(--vlak); font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; color: var(--tekst); }
.invoerrij { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.invoerveld { flex: 0 1 190px; margin-bottom: 0; }

/* -- terrein -------------------------------------------------------------- */

/* Een object met zijn behoefteregels eronder. Kaarten en geen raster: het gaat
   om de regels, en die zijn per object een handvol en geen honderd. */
.objectkaart { margin-bottom: 8px; }

/* -- planning ------------------------------------------------------------- */

/* -- de tijdbalk -----------------------------------------------------------
 *
 * Zwembanen met een echte tijdas, en het scherm is niet meer dan dat.
 *
 * DE STUURBALK DRAAGT ALLES
 * Er stond een rij tabbladen boven het scherm en daaronder nog een strook met
 * soortknoppen. Twee rijen navigatie boven een balk die om ruimte verlegen zit,
 * en de soortknoppen werkten alleen op de balk en niet op de dagweergave. Nu
 * zit alles in één balk: welke weergave, welk bereik, welk raster, welke banen,
 * en welke soorten -- en de soorten gelden voor allebei de weergaven.
 */

/* De breedte van de namenkolom. Staat ook in app.js als `TB_NAAMKOLOM`; die
   twee horen bij elkaar, want daar wordt uitgerekend hoeveel ruimte er
   overblijft voor de tijdas. */
:root { --tb-naam: 186px; }

/* Op het paneel zelf en zonder lijn eronder: de chips en knoppen zijn zacht
   gevuld, en op een gevulde strook zouden ze verdwijnen. */
.tijdstuur {
  display: flex; flex-direction: column; gap: 7px; flex: none;
  padding: 4px 16px 8px;
  background: var(--bg);
}
.stuurrij { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.stuurlabel {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--zacht); font-weight: 700;
}
.dagstap { display: inline-flex; align-items: center; gap: 5px; }
.dagstap .nu { min-width: 136px; text-align: center; font-weight: 600; font-size: 13px; }
.tijdstuur .tabs { margin: 0; }
/* Een tabblad van een framevullend scherm dat geen balk is maar een lijst: het
   schuift zelf, zodat de stuurbalk erboven blijft staan. */
.crewvlak { flex: 1; min-width: 0; overflow: auto; padding: 16px 22px 48px;
            background: var(--bg); }

/* -- het overzicht --------------------------------------------------------- */
/* Vier kleine vakjes, elk drie regels: het label, het getal, een toelichting.
   Klein met opzet -- het overzicht per dag eronder is de inhoud. */
.crewtegels { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.crewtegel {
  border: 1px solid var(--rand); border-radius: var(--vorm-rond);
  padding: 6px 12px; min-width: 150px; background: var(--bg);
}
.crewtegel .tegellabel { font-size: 11.5px; color: var(--zacht); }
.crewtegel .tegelgetal { font-size: 18px; font-weight: 650; line-height: 1.35;
                         font-variant-numeric: tabular-nums; }
.crewtegel .tegelonder { font-size: 11.5px; color: var(--zacht); }
.crewtegel .tegelonder .rood { color: var(--rood); }
.crewtegel.tekort .tegelgetal { color: var(--rood); }
.crewtegel.klopt .tegelgetal { color: var(--groen); }
.crewtegel.klikbaar { cursor: pointer; }
.crewtegel.klikbaar:hover { border-color: var(--rand-sterk); }
.crewtegel.klikbaar:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Een dag: een kop die openklapt, en daaronder de tabel per functiegroep. */
.crewdag { margin-bottom: 12px; }
.crewdagkop {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; width: 100%;
  border: 0; border-bottom: 2px solid var(--tekst); background: none;
  color: var(--tekst); padding: 8px 2px 6px; margin-bottom: 8px;
  cursor: pointer; text-align: left; font: inherit;
}
.crewdagkop b { font-size: 15px; }
.crewdagkop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fasechip {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 600; padding: 1px 7px; border-radius: 99px;
  border: 1px solid var(--rand-sterk); color: var(--zacht);
}
.fasechip.event { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--bg)); }
.dagcijfers { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px;
              color: var(--zacht); font-variant-numeric: tabular-nums; }
.dagcijfers b { color: var(--tekst); font-weight: 600; }
.dagcijfers .rood { color: var(--rood); }
table.raster td.groepkop {
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--zacht); font-weight: 700; padding: 5px 12px;
  background: color-mix(in srgb, var(--vlak) 60%, var(--bg));
}
table.raster tr.klik { cursor: pointer; }
table.raster tr.open td { background: var(--accent-zacht); }
table.raster tr.bewerkregel td { background: var(--vlak); }
table.raster tr.gatregel td.rood { color: var(--rood); font-weight: 600; }
.crewvlak .rasterbak { border: 1px solid var(--rand); border-radius: var(--vorm-rond);
                       overflow-x: auto; }

/* De soorten: chips met hun eigen kleur, die aan en uit gaan. Geen aparte
   strook meer, en geen keuzelijst -- je moet in één blik zien welke soorten er
   zijn, hoeveel er van elk zijn, en welke je hebt weggeklikt. */
.soortzeef { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.soortchip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--rand-sterk); border-radius: 99px;
  padding: 1px 10px 1px 8px; font: inherit; font-size: 12.5px; line-height: 1.75;
  background: var(--bg); color: var(--zacht);
}
.soortchip .stip { width: 9px; height: 9px; border-radius: 99px; background: var(--k); flex: none; }
.soortchip[aria-pressed="true"] {
  background: var(--k); border-color: var(--k); color: var(--op); font-weight: 600;
}
.soortchip[aria-pressed="true"] .stip { background: var(--op); }
.soortchip .telling { font-variant-numeric: tabular-nums; opacity: .75; }
.soortchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* -- het werkvlak: de balk of de lijst, met het paneel ernaast ------------- */
.tijdvlak { display: flex; flex: 1; min-height: 0; }
/* Eén regel onder de balk met wat je ermee kunt. Een afspraak die je nergens
   leest bestaat niet -- zeker niet een die omgekeerd is aan wat de browser
   gewoonlijk doet. */
.balkvoet { flex: none; padding: 5px 12px 7px; border-top: 1px solid var(--rand);
  background: var(--vlak); }
.balkbak {
  flex: 1; min-width: 0; overflow: auto; background: var(--bg);
  /* De ruimte voor de schuifbalk blijft altijd staan, ook als hij er niet is:
     anders meet je de breedte vóórdat de banen erin staan en snoept
     de schuifbalk er daarna vijftien pixels af. */
  scrollbar-gutter: stable;
}
.tijdrooster { position: relative; min-width: min-content; }

.tijdkop { display: flex; position: sticky; top: 0; z-index: 3; background: var(--bg); }
.tijdkop.tweede { top: 25px; }
.baankop {
  position: sticky; left: 0; z-index: 4; flex: none; width: var(--tb-naam);
  background: var(--vlak); border-right: 1px solid var(--rand-sterk);
  border-bottom: 1px solid var(--rand); padding: 2px 10px;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 700; color: var(--zacht); display: flex; align-items: center;
}
.dagkop {
  flex: none; border-right: 1px solid var(--rand-sterk);
  border-bottom: 1px solid var(--rand); padding: 2px 8px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  display: flex; align-items: baseline; gap: 7px; overflow: hidden;
}
.dagkopnummer { font-weight: 400; color: var(--zacht); font-size: 11.5px; }
.dagkop.eventdag { background: var(--accent-zacht); }
.celkop {
  flex: none; border-right: 1px solid var(--rand);
  border-bottom: 1px solid var(--rand); font-size: 10.5px; color: var(--zacht);
  text-align: center; padding: 2px 0; white-space: nowrap; overflow: hidden;
}
.celkop.dagrand { border-right-color: var(--rand-sterk); }
.celkop.nacht { background: color-mix(in srgb, var(--zacht) 9%, transparent); }

.tijdbaan { display: flex; border-bottom: 1px solid var(--rand); }
.tijdbaan.middelbaan { background: color-mix(in srgb, var(--k-10) 5%, transparent); }
/* De naamkolom is een knop: hij was het enige stuk van de balk waar niets
   gebeurde, terwijl het de plek is waar een partij als geheel staat. */
.baannaam {
  position: sticky; left: 0; z-index: 2; flex: none; width: var(--tb-naam);
  background: var(--bg); border: 0; border-right: 1px solid var(--rand-sterk);
  padding: 6px 10px; display: flex; flex-direction: column; justify-content: center;
  font: inherit; color: var(--tekst); text-align: left; cursor: pointer;
}
button.baannaam:hover { background: var(--vlak); }
button.baannaam.gekozen { background: var(--accent-zacht); }
button.baannaam:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* De regel onderaan de namenkolom waarmee je er een partij bij zet. Stil, want
   hij hoort er te staan zonder om aandacht te vragen -- je zoekt hem pas als je
   hem nodig hebt. */
.erbijbaan { border-bottom: 0; }
.erbijknop {
  color: var(--zacht); font-size: 13px; font-weight: 550;
  justify-content: center;
}
.erbijknop:hover { color: var(--accent); }
/* De baan waar je net heen sprong. Even, en dan weer gewoon: een baan die
   blijft oplichten leest als gekozen, en dat is hij niet. */
.tijdbaan.oplicht > .baannaam,
.tijdbaan.oplicht > .baanspoor { animation: baanoplicht 1.8s ease-out; }
@keyframes baanoplicht {
  from { background-color: color-mix(in srgb, var(--accent) 24%, var(--bg)); }
}
@media (prefers-reduced-motion: reduce) {
  .tijdbaan.oplicht > .baannaam { animation: none; background: var(--accent-zacht); }
  .tijdbaan.oplicht > .baanspoor { animation: none; }
}

/* Een lege baan: wie meedoet maar nog geen blok heeft. Half zo hoog, en het
   stippelvak blijft links in beeld terwijl de balk zijwaarts schuift. */
.tijdbaan.leegbaan .baannaam { padding-top: 3px; padding-bottom: 3px; }
.tijdbaan.leegbaan .baannaam b { font-size: 13.5px; font-weight: 600; }
.tijdbaan.leegbaan .baanaantal {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Onder `.baanspoor`, en niet los: los overschreef deze regel het gewone
   `.leegvak` hierboven, en dan stonden titel, uitleg en knop van elke lege
   staat op één regel -- op Terrein verdween de knop onder het zijpaneel
   (betatest 34). */
.baanspoor .leegvak {
  position: sticky; left: calc(var(--tb-naam) + 8px); z-index: 1;
  display: inline-flex; align-items: center; gap: 6px; margin: 3px 0 0 8px;
  padding: 2px 10px; border: 1.5px dashed var(--rand-sterk); border-radius: 6px;
  background: var(--bg); color: var(--zacht); font-size: 12px; white-space: nowrap;
}
.leegvakknop {
  border: 0; background: none; padding: 0; font: inherit; color: var(--accent);
  text-decoration: underline; cursor: pointer;
}
.leegvakknop:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Wanneer komen ze: de gekozen partij bovenaan, en knopjes voor de dag en het
   dagdeel. Eventdagen gestippeld, net als hun tint in de balk anders is. */
.gekozenpartij {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  padding: 7px 10px; border: 1px solid var(--rand); border-radius: 8px;
  background: var(--vlak);
}
.gekozenpartij b { flex: 1; min-width: 0; }
.chiplabel { font-size: 12px; color: var(--zacht); margin: 10px 0 4px; }
.chiprij { display: flex; flex-wrap: wrap; gap: 5px; }
.dagchip {
  font: inherit; font-size: 12.5px; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--rand-sterk); background: var(--bg); color: var(--tekst);
  cursor: pointer; font-variant-numeric: tabular-nums;
}
.dagchip:hover { border-color: var(--accent); }
.dagchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dagchip.event { border-style: dashed; }
.dagchip.aan { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Het zoekveld voor een partij: een veld met de treffers eronder, in één
   omlijsting, zodat het leest als één ding en niet als een veld met een
   losse lijst ernaast. */
.partijzoeker {
  border: 1px solid var(--veld-rand); border-radius: var(--vorm-rond-klein);
  background: var(--veld-bg); color: var(--veld-tekst); overflow: hidden;
}
.partijzoeker input {
  border: 0; border-bottom: 1px solid var(--rand); border-radius: 0; width: 100%;
}
.partijzoeker input:focus { outline: none; box-shadow: none; }
.partijzoeker .treffers { max-height: 300px; overflow-y: auto; }
.treffergroep {
  font-size: 10.5px; font-weight: 650; letter-spacing: .08em;
  text-transform: uppercase; color: var(--zacht); padding: 8px 10px 3px;
}
.treffer {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 5px 10px; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.treffer:hover, .treffer.actief { background: var(--accent-zacht); }
.treffer .treffernaam {
  flex: 1; min-width: 0; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.treffer .treffernaam mark {
  background: none; color: var(--accent); text-decoration: underline;
}
.treffer .trefferbij { font-size: 11.5px; color: var(--zacht); white-space: nowrap; }
.treffer.inplanning .treffernaam { font-weight: 500; }
.zoekmerk {
  font-size: 10.5px; font-weight: 650; padding: 0 6px; border-radius: 999px;
  border: 1px solid var(--rand); background: var(--vlak); color: var(--zacht);
  white-space: nowrap;
}
.zoekmerk.let {
  color: var(--rood); background: var(--rood-zacht);
  border-color: color-mix(in srgb, var(--rood) 40%, var(--bg));
}
/* Aanmaken wat je typte, onderaan de treffers. In de accentkleur, want het is
   een handeling en geen partij. */
.treffer.maak { color: var(--accent); font-weight: 600; border-top: 1px solid var(--rand); }
/* Lijkt op een partij die er al is. Amber en niet rood: het is een vraag, geen
   fout -- het kunnen twee bedrijven zijn. */
.lijktop {
  margin: 6px 10px 8px; padding: 7px 9px; border-radius: 6px; font-size: 12.5px;
  background: color-mix(in srgb, var(--amber) 10%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--bg));
  color: var(--tekst);
}
.dialoog > div > .lijktop { margin: 0 0 11px; }
.lijktopknop {
  border: 0; background: none; padding: 0; font: inherit; font-weight: 600;
  color: var(--accent); text-decoration: underline; cursor: pointer;
}
.veldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
/* Een voorlopige partij in het paneel: gestippeld, zoals een schatting in de
   balk, want het is een plek die nog op een echte partij wacht. */
.voorlopigband {
  display: flex; align-items: center; gap: 10px; margin: 6px 0 10px;
  padding: 8px 10px; border-radius: 8px; font-size: 12.5px;
  background: color-mix(in srgb, var(--amber) 9%, var(--bg));
  border: 1px dashed color-mix(in srgb, var(--amber) 55%, var(--bg));
}
.voorlopigband span { flex: 1; min-width: 0; }
@media (max-width: 520px) { .veldpaar { grid-template-columns: 1fr; } }
.zoekmerk.voorlopig {
  color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, var(--bg));
}
.baannaam b {
  font-size: 15px; font-weight: 650; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.baanaantal { font-size: 11px; color: var(--zacht); font-variant-numeric: tabular-nums; }
.baanspoor { position: relative; flex: none; min-height: 40px; }
.baanspoor .kolom { position: absolute; top: 0; bottom: 0; border-right: 1px solid var(--rand); }
.baanspoor .kolom.dagrand { border-right-color: var(--rand-sterk); }
.baanspoor .kolom.nacht { background: color-mix(in srgb, var(--zacht) 9%, transparent); }
.baanspoor .kolom.eventdag { background: color-mix(in srgb, var(--accent-zacht) 55%, transparent); }
.baanspoor.doel { background: color-mix(in srgb, var(--accent) 9%, transparent); }

/* Het blok ís de kleur.
 *
 * Het was de soortkleur voor twintig procent door de achtergrond gemengd, en
 * dat leest als grijs met een zweem. Wie vraagt waarom het er flets uitziet
 * heeft gelijk: er zát bijna geen kleur in. Nu is de vulling de kleur zelf en
 * staat de tekst erop in `--op`.
 */
/* Het blok is een flexrij en knipt niet zelf af.
 *
 * Het had `overflow: hidden` om een lange naam af te kappen, en dat knipte ook
 * de greep weg die over de rand heen hoort te steken -- vandaar dat het handje
 * er nog steeds eerst was. Nu kapt de naam zichzelf af in een eigen span, en
 * mag alles wat erbuiten hoort te steken dat ook echt. */
.tijdblok {
  position: absolute; height: 30px; border-radius: 7px;
  background: var(--k, var(--k-19)); color: var(--op);
  border: 1px solid var(--k, var(--k-19));
  padding: 4px 8px; font-size: 12px; line-height: 1.2; overflow: visible;
  cursor: grab; display: flex; align-items: center; gap: 6px;
  user-select: none; touch-action: none; font-weight: 550;
  font-family: inherit; text-align: left;
}
.tijdblok .bloknaam {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* Nog niet bevestigd: de kleur verbleekt tot een zweem.
 *
 * Dit was ooit het teken voor "geen exacte tijd", en het is daar weggehaald
 * omdat het daar het verkeerde zei -- een dagdeel is een geldig antwoord en
 * geen halve afspraak. Hier zegt het wel wat het laat zien: de partij die dit
 * doet heeft nog geen ja gezegd, en dan hoort het blok niet even stellig in
 * beeld te staan als de rest.
 *
 * De kleur blijft herkenbaar, want welke soort het is verandert er niet door.
 * De tekst gaat terug naar de gewone tekstkleur, want op een bleke vulling is
 * `--op` niet te lezen. */
.tijdblok.onbevestigd {
  background: color-mix(in srgb, var(--k, var(--k-19)) 20%, var(--bg));
  color: var(--tekst);
  border-color: color-mix(in srgb, var(--k, var(--k-19)) 55%, var(--bg));
}
.tijdblok.onbevestigd .middelnr {
  background: color-mix(in srgb, var(--k, var(--k-19)) 30%, transparent);
  color: var(--tekst);
}
/* In de lijst hetzelfde onderscheid, met de middelen die daar zijn: het
   streepje links verbleekt mee en de tekst wordt zachter. */
.dagtabel tbody tr.onbevestigd { color: var(--zacht); }
.dagtabel tbody tr.onbevestigd td:first-child {
  border-left-color: color-mix(in srgb, var(--k, transparent) 35%, var(--bg));
}

/* Zonder tijd weten we het ongeveer en niet precies. Alleen het randje zegt
   dat: de kleur blijft, want die zegt wélke soort het is en dat weet je ook
   zonder tijd. */
.tijdblok.vaag {
  border: 1px dashed color-mix(in srgb, var(--op) 75%, transparent);
}

/* Het nummer van een middel dat bij deze regel hoort. Klein en op het blok
   zelf: in de balk wil je kunnen zien dát er een bakwagen bij hoort zonder
   erop te klikken, en de naam erbij zetten maakt elk blok twee keer zo lang. */
.tijdblok .middelnr {
  flex: none; font-size: 10.5px; font-weight: 700; line-height: 1;
  padding: 2px 5px; border-radius: 4px; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--op) 88%, transparent);
  color: var(--k, var(--k-19));
}
.tijdblok.vaag .middelnr {
  background: color-mix(in srgb, var(--op) 22%, transparent); color: var(--op);
}
.tijdblok.pakt { cursor: grabbing; box-shadow: var(--vorm-schaduw-op); z-index: 6; }
.tijdblok.gekozen { outline: 2px solid var(--tekst); outline-offset: 2px; }
.tijdblok:focus-visible { outline: 2px solid var(--tekst); outline-offset: 2px; }
.tijdblok .bloktijd { opacity: .8; font-size: 11px; margin-left: 6px; font-weight: 400; }
/* De greep loopt over de rand heen en een haartje erbuiten.
 *
 * `right: 0` legt hem tegen de padding-rand, dus binnen de rand van één
 * pixel -- en die pixel gaf het blok zijn eigen cursor. Bij het naar binnen
 * bewegen zag je daardoor eerst een handje, dan de pijlen, dan weer een handje.
 * Met -2px begint de greep net buiten het blok, en is de eerste aanraking
 * meteen de pijlen.
 *
 * Tien pixels en niet zeven: op een balk van drie uur is dat het verschil
 * tussen mikken en pakken. */
.tijdblok .greep {
  position: absolute; top: -1px; bottom: -1px; width: 12px;
  cursor: ew-resize;
}
.tijdblok .greep.links { left: -3px; }
.tijdblok .greep.rechts { right: -3px; }

/* Het gat in een huurvenster: dagen waarop het middel geboekt staat en nergens
   in het schema voorkomt. Daar loopt de teller door terwijl het ding stilstaat,
   en dat is precies wat je wilt zien. */
.tijdblok .gat {
  position: absolute; top: 0; bottom: 0;
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--op) 45%, transparent) 0 3px, transparent 3px 7px);
}

/* De naam naast een te smal blok. Hem erin afkappen leest slechter dan geen
   naam; ernaast liegt niet over de duur. */
.naastnaam {
  position: absolute; font-size: 11.5px; color: var(--zacht);
  white-space: nowrap; pointer-events: none;
}
.sleeplabel {
  position: fixed; z-index: var(--laag-zwevend); pointer-events: none;
  background: var(--tekst); color: var(--bg);
  font-size: 12px; padding: 2px 8px; border-radius: 5px; white-space: nowrap;
}

/* -- de tekstweergave ----------------------------------------------------- */
/* Dezelfde gegevens als de balk, maar om te lezen en af te drukken: per dag een
   kop en daaronder de regels op tijd. Dit was "Per dag" en dat was een tabel
   met alle kolommen; wat je aan een ploeg meegeeft is deze. */
.dagenlijst { flex: 1; min-width: 0; overflow: auto; background: var(--bg); }
.daggroep { border-bottom: 1px solid var(--rand); }
.dagbalk {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: baseline;
  gap: 10px; padding: 6px 14px; background: var(--vlak);
  border-bottom: 1px solid var(--rand);
}
.dagbalk b { font-size: 15px; }
.dagbalk.eventdag { background: var(--accent-zacht); }
.dagregel {
  display: grid; gap: 12px; align-items: baseline; width: 100%; text-align: left;
  grid-template-columns: 104px 6px minmax(180px, 2fr) minmax(120px, 1fr) minmax(90px, 1fr) auto;
  padding: 6px 14px; border: 0; border-bottom: 1px solid var(--rand);
  background: none; font: inherit; color: var(--tekst); cursor: pointer;
}
.dagregel:last-child { border-bottom: 0; }
.dagregel:hover { background: var(--vlak); }
.dagregel.gekozen { background: var(--accent-zacht); }
.dagregel .tijd { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; }
.dagregel .tijd.vaag { font-weight: 400; color: var(--zacht); font-style: italic; }
.dagregel .streep { width: 6px; height: 17px; border-radius: 3px; background: var(--k); align-self: center; }
.dagregel .wat { font-weight: 550; }
.dagregel .wie, .dagregel .waar { color: var(--zacht); font-size: 13px; }
.dagregel .middelnr {
  font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px;
  background: color-mix(in srgb, var(--k-10) 18%, transparent);
  color: var(--k-10); font-variant-numeric: tabular-nums;
}
.baannaam .middelnr {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 0 5px;
  border-radius: 4px; margin-right: 5px; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--k-10) 20%, transparent);
  color: var(--k-10);
}
.dagregel .soortmerk {
  font-size: 11px; padding: 1px 9px; border-radius: 99px;
  background: var(--k); color: var(--op); white-space: nowrap;
}
/* De lijst als tabel, met kolommen die je zelf aan en uit zet.
 *
 * `table-layout: fixed` en breedtes uit een verhouding: welke kolommen aanstaan
 * bepaalt hoe breed ze mogen zijn, en een lange omschrijving mag de tabel niet
 * scheeftrekken. Hij breekt af binnen zijn eigen kolom.
 *
 * De soortkleur staat als streepje aan de linkerkant, zoals het blok in de balk
 * de kleur zelf is. Een hele rij in die kleur zou de tekst onleesbaar maken en
 * de aandacht weghalen bij de kolom die er wel toe doet. */
.tabelrol { overflow-x: auto; }
.dagtabel {
  width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px;
}
.dagtabel th {
  text-align: left; padding: 4px 10px; white-space: nowrap;
  border-bottom: 1px solid var(--rand); color: var(--zacht);
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 700;
}
.dagtabel td {
  padding: 5px 10px; border-bottom: 1px solid var(--rand);
  vertical-align: top; overflow-wrap: anywhere;
}
.dagtabel tbody tr { cursor: pointer; }
.dagtabel tbody tr:hover { background: var(--vlak); }
.dagtabel tbody tr.gekozen { background: var(--accent-zacht); }
.dagtabel tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dagtabel tbody td:first-child { border-left: 4px solid var(--k, transparent); }
.dagtabel th.getal, .dagtabel td.getal {
  text-align: right; font-variant-numeric: tabular-nums;
}
.dagtabel tfoot td {
  font-weight: 650; border-top: 1px solid var(--rand-sterk); border-bottom: 0;
}
.dagtabel .tijd { font-variant-numeric: tabular-nums; font-weight: 600; }
.dagtabel .tijd.vaag { font-weight: 400; color: var(--zacht); font-style: italic; }
.dagtabel .soortmerk {
  display: inline-block; font-size: 11px; padding: 1px 9px; border-radius: 99px;
  background: var(--k); color: var(--op); white-space: nowrap;
}
.dagtabel .middelnr {
  font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px;
  margin-right: 5px; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--k-10) 18%, transparent);
  color: var(--k-10);
}
.dagtabel .let { color: var(--rood); font-size: 12px; }

/* Een vinkje in het zwevende menu, voor de kolomkeuze. */
.zwevendmenu .menuvink {
  display: flex; align-items: center; gap: 8px; padding: 5px 9px;
  border-radius: 6px; cursor: pointer; font-size: 13px;
}
.zwevendmenu .menuvink:hover { background: var(--vlak); }
.zwevendmenu .menuitem.aan { font-weight: 650; }

/* Het balkje bij "9 van de 12 bevestigd". Een getal zegt hoeveel er staan, een
   balkje zegt of je er bijna bent. */
.meter {
  height: 7px; border-radius: 99px; background: var(--rand);
  overflow: hidden; margin: 5px 0 3px;
}
.meter span { display: block; height: 100%; background: var(--groen); }

.dagleeg { padding: 9px 14px; color: var(--zacht); font-size: 13px; }


/* -- de terreinkaart ------------------------------------------------------- */
/* Het beeld komt van tegels uit een pdf; Leaflet zet ze neer, zoomt en schuift.
   Wat hier staat is alleen wat wij eroverheen leggen: de bolletjes, de lade
   onderaan, en de ijkbalk. */
/* Een eigen stapel. Leaflet nummert zijn lagen van honderd tot duizend --
   tegels op 400, zoomknoppen op 1000 -- en `.leaflet-container` maakt daar zelf
   geen stapel van. Zonder deze regel tellen die getallen mee met de hele
   pagina, waar een venster op 20 staat en een melding op 30: dan ligt de
   tekening over de zijbalk en komt het ijkvenster achter de kaart terecht.

   Op dit vak en niet op de kaart zelf, zodat de lade met de ijkbalk -- die op
   500 staat en net zo hard meetelde -- er ook binnen valt. */
.kaartbak {
  position: relative; display: flex; overflow: hidden; isolation: isolate;
}
.kaartvlak { flex: 1; min-width: 0; background: var(--vlak); }
/* Leaflet zet zijn eigen achtergrond; een tekening hoort op wit te staan, ook
   in donkere modus -- een plot is op papier gedacht. */
.kaartvlak .leaflet-container { background: #fff; width: 100%; height: 100%; }

/* Een bolletje. Leaflet hangt hem in een `divIcon`, dus de plaatsing gebeurt
   door Leaflet en de vorm hier. */
/* Aanklikken selecteert, dus een wijzende hand. Er stond een kruis, en dat
   betekent "dit kun je verslepen" -- dat kan alleen met de middelste knop, en
   dan pas verschijnt het kruis. */
.tkpin {
  display: flex; align-items: center; gap: 5px;
  transform: translate(-6px, -6px); white-space: nowrap; cursor: pointer;
}
.tkpin .stip {
  width: 12px; height: 12px; border-radius: 99px; flex: none;
  background: var(--k, var(--accent)); border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.tkpin .naam {
  font-size: 12px; font-weight: 600; color: #16181c;
  background: rgba(255, 255, 255, .82); padding: 0 4px; border-radius: 3px;
}
.tkpin.gekozen .stip { box-shadow: 0 0 0 3px var(--accent); }
/* Aangewezen op een andere tekening: een open bolletje. Geen fout, wel iets om
   te zien voordat je erop vertrouwt. */
.tkpin.elders .stip { background: #fff; border-color: var(--k, var(--accent)); }

/* De lade onderaan: wat nog nergens staat, en de ijking. Over de kaart heen en
   niet ernaast -- hij is er meestal niet. */
.kaartlade {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 500;
  display: flex; flex-direction: column; gap: 1px;
  pointer-events: none;
}
.kaartmelding {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 7px 12px; background: var(--vlak); border-top: 1px solid var(--rand);
  font-size: 13px; pointer-events: auto;
}
.kaartmelding.let { border-top-color: var(--rood); }
.kaartmelding.wijst { background: var(--accent-zacht); }
.losobject {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--k); border-radius: 99px; padding: 1px 10px;
  font: inherit; font-size: 12.5px; line-height: 1.75;
  background: var(--bg); color: var(--tekst);
}
.losobject:hover:not(:disabled) { background: var(--k); color: var(--op); }
.losobject:disabled { cursor: default; opacity: .6; }

/* Een stap die onder een andere valt. Een streep links in plaats van alleen
   witruimte: inspringing alleen verdwijnt zodra er twee niveaus naast elkaar
   staan, en dan zie je niet meer waar een blok begint en eindigt. */
.stapkind { border-left: 2px solid var(--rand); padding-left: 10px; }

/* Naam en driehoekje naast elkaar. Het veld vult op wat er overblijft;
   `min-width: 0` omdat een invoerveld anders zijn eigen breedte afdwingt en de
   hele tabel opblaast. */
.ldnaambak { display: flex; align-items: center; gap: 2px; min-width: 0; }
.ldnaambak > input { flex: 1; min-width: 0; }
.ldnaambak .ldnaam { overflow: hidden; text-overflow: ellipsis; }

/* Het driehoekje voor een kopregel. Geen eigen kolom: die zou op elke regel
   leeg staan behalve op de kopregels, en dan schuift de hele tabel op voor iets
   wat er bij de meeste regels niet is.

   Groot genoeg om aan te wijzen en om te zien. Het was elf pixels en las als
   stof op het scherm; nu is het het enige wat je op een kopregel aanklikt, en
   dan mag het daar ook naar uitzien. */
.ldklap {
  border: 0; background: none; cursor: pointer; flex: none;
  width: 24px; height: 24px; margin-right: 3px; border-radius: 7px;
  color: var(--zacht); line-height: 0;
  display: flex; align-items: center; justify-content: center;
  transition: color .12s, background .12s;
}
.ldklap:hover { color: var(--tekst); background: var(--rand); }
.ldklap:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Het nummer: een kolom per niveau, plus de pijltjes ernaast.

       [  1  ][  2  ][  3  ]
            6
                  1
                       10
                  2
            7

   Vast en niet meegroeiend met de inhoud, want het gaat er juist om dat het
   cijfer van elk niveau altijd op dezelfde plek staat. Punten zijn daarmee
   overbodig: de kolom zegt hetzelfde, zonder dat een plek in een lijst eruit
   gaat zien als een code.

   In welke kolom een cijfer staat zegt de js -- dat hangt af van hoe diep de
   regel hangt, en een vaste kolom per klasse zou dat verdubbelen. */
.ldnrbak {
  display: grid; grid-template-columns: repeat(3, 25px) auto;
  align-items: center; min-width: 0;
}
/* Eén doos voor het bleke cijfer en voor het invulveld. Dezelfde maat, dezelfde
   rand, dezelfde marge: anders staan ze elk een pixel of twee anders en danst
   de kolom alsnog. Met cijfers van gelijke breedte komt zo de nul van 10
   precies onder de 9.

   De selector is zwaarder dan `.ldtabel td input` verderop, want die zet een
   eigen tekstgrootte en marge op elk veld in de tabel -- terecht, maar hier
   zou het de twee dozen weer uit elkaar trekken. */
.ldtabel td .ldnrbak .ldnrvak {
  box-sizing: border-box; width: 100%; min-width: 0;
  text-align: right; padding: 2px 4px 2px 0;
  border: 1px solid transparent; border-radius: 4px; background: none;
  font: inherit; font-size: 12.5px; line-height: 1.4; color: var(--tekst);
  font-variant-numeric: tabular-nums;
}
/* Van je voorouders, dus niet te zetten. Stiller dan je eigen cijfer, zodat te
   zien is welk cijfer van jou is. */
.ldtabel td .ldnrbak .ldvoor { color: var(--zacht); }
.ldtabel td .ldnrbak .ldnr:hover {
  border-color: var(--rand); background: var(--bg);
}
.ldtabel td .ldnrbak .ldnr:focus {
  outline: none; border-color: var(--accent); background: var(--bg);
}
/* Onze eigen pijltjes, naast het veld in plaats van erin. Ze verplaatsen de
   regel; het getal typ je. Smal en stil -- ze staan op elke regel, en iets wat
   overal staat hoort niet op te vallen. */
.ldpijlen {
  grid-column: 4;
  display: flex; flex-direction: column;
  margin-left: 2px; opacity: 0; transition: opacity .12s;
}
.ldrij:hover .ldpijlen, .ldpijlen:focus-within { opacity: 1; }
.ldpijl {
  border: 0; background: none; cursor: pointer; padding: 0 2px;
  font-size: 8px; line-height: 8px; color: var(--zacht);
}
.ldpijl:hover { color: var(--accent); }
.ldpijl:focus-visible { outline: 1px solid var(--accent); }
/* Twee regels met hetzelfde nummer. Een merkje en geen fout: het mag, je moet
   het alleen zien. */
.ldtabel td.ldtwee .ldnr {
  border-color: var(--oranje, var(--rood));
  background: color-mix(in srgb, var(--rood) 8%, var(--bg));
}

/* De eigen kleur staat in zijn eigen kolom en niet als streep over de regel.
   Twee plekken geprobeerd en allebei afgevallen: links zit de dringendheid al,
   en een streep aan de rechterkant scrolt uit beeld zodra de tabel breder is
   dan het scherm. De kolom staat er altijd. */
/* Een kop die niet sorteert is geen knop. Wel dezelfde plek en hetzelfde
   gewicht, zodat de rij koppen niet uit de pas loopt. */
.ldkoptekst {
  display: block; padding: 7px 8px; color: var(--zacht);
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 700;
}

/* Een streepje tussen de woorden en de kleuren in hetzelfde menu. */
.menuscheiding {
  height: 1px; background: var(--rand); margin: 5px 0 1px;
}

/* Het kleurmenu: een raster van vlakjes. Zeven op een rij, drie rijen -- dat
   past onder de muis zonder te scrollen, en je ziet de hele cirkel in een keer
   in plaats van negentien woorden onder elkaar te lezen. */
.kleurraam {
  display: grid; grid-template-columns: repeat(7, 22px); gap: 5px;
  padding: 8px;
}
.kleurvak {
  width: 22px; height: 22px; border-radius: 6px; padding: 0; cursor: pointer;
  background: var(--k); border: 2px solid transparent;
}
.kleurvak.nu { border-color: var(--tekst); }
.kleurvak:hover { transform: scale(1.12); }
.kleurvak:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* -- Algemeen: de kop van elk blad (ontwerp algemeen, kaart 5) ------------- */

/* De naam links, de hoofdknop rechts ernaast, en daaronder de uitleg op één
   regel. Zo staat de knop op elk blad op dezelfde plek, hoe lang de uitleg
   ook is. */
.bladkop {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  min-height: var(--knop); margin: 0 0 2px;
}
.bladkop h2 { flex: 1; margin: 0; font-size: 16px; }
.bladuitleg {
  display: flex; align-items: baseline; gap: 8px;
  margin: 0 0 12px; max-width: 90ch;
}
.bladuitleg .tekst { flex: 1; min-width: 0; }
.bladuitleg.dicht .tekst { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bladmeer {
  flex: none; border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--link);
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent);
}
.bladmeer:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* -- Algemeen: de kolom links (ontwerp algemeen, kaart 1) ------------------ */

/* Links welk onderdeel, rechts het blad. Dit was de kolom van het tabblad
   Lijsten; nu is hij die van heel Algemeen, en de tabbalk erboven is weg. Elf
   tabbladen liepen op een breed scherm over twee regels en op een telefoon
   over vier. */
.lijstenraam {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px;
  align-items: start;
}
/* Soorten plek vult het frame, ook hier: de kolom blijft staan en schuift
   zelf, het werkblad rechts heeft zijn stuurbalk, vlak en voet. */
.lijstenraam.vult {
  flex: 1; min-height: 0; padding: 22px 0 0 22px;
  grid-template-rows: minmax(0, 1fr); align-items: stretch;
}
.lijstenraam.vult > .lijstenlinks { overflow-y: auto; min-height: 0; padding-bottom: 16px; }
.lijstenraam.vult > .lijstenrechts {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
}
/* De kop op dezelfde plek als op elk ander blad: de stuurbalk van het
   werkblad krijgt hier geen eigen inspringing ervoor. */
.lijstenraam.vult .tijdstuur { padding: 0 22px 8px 0; }
.lijstennav { display: flex; flex-direction: column; gap: 1px; }
.lijstennav .groep {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--zacht); padding: 10px 10px 3px;
}
.lijstennav button {
  display: flex; justify-content: space-between; gap: 8px; text-align: left;
  border: 0; background: none; font: inherit; font-size: 13px;
  color: var(--tekst); padding: 5px 10px; border-radius: var(--vorm-rond-klein);
  cursor: pointer;
}
.lijstennav button:hover { background: var(--bg); }
.lijstennav button[aria-current="true"] {
  background: var(--bg); font-weight: 600; box-shadow: var(--vorm-schaduw);
}
.lijstennav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lijstennav .aantal { color: var(--zacht); font-weight: 400; font-variant-numeric: tabular-nums; }
.lijstenkeus { display: none; }
/* Er ontbreekt iets dat de app kent (ontwerp algemeen, kaart 2). */
.lijstennav .aantal.let, .algtegel .aantal.let { color: var(--amber); font-weight: 700; }

/* -- Algemeen: het overzicht (ontwerp algemeen, kaart 2) ------------------- */

/* Een tegel per groep uit de kolom. Klein en zonder uitleg: de namen zijn
   dezelfde als links, en wat ertoe doet zijn het getal en het merkje. */
.algtegels {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px; max-width: 980px;
}
.algtegel {
  display: flex; flex-direction: column; gap: 1px; cursor: pointer;
  border: 1px solid var(--rand); border-radius: var(--vorm-rond);
  background: var(--bg); padding: 8px 8px 10px;
}
.algtegel:hover { border-color: var(--rand-sterk); }
.algtegelkop, .algtegelregel {
  border: 0; background: none; font: inherit; color: var(--tekst);
  text-align: left; cursor: pointer; border-radius: var(--vorm-rond-klein);
}
.algtegelkop {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--zacht); padding: 2px 6px 4px;
}
.algtegelregel {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 13px; padding: 3px 6px;
}
.algtegelregel:hover { background: var(--vlak); }
.algtegelregel .aantal { font-weight: 600; font-variant-numeric: tabular-nums; }
.algtegelkop:focus-visible, .algtegelregel:focus-visible, .algmerk:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.algmerken { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 6px 0; }
.algmerk {
  font: inherit; font-size: 11.5px; line-height: 1.5; padding: 0 8px;
  border-radius: 99px; border: 0; text-align: left;
  background: var(--vlak); color: var(--zacht);
}
button.algmerk { cursor: pointer; }
.algmerk.let { background: color-mix(in srgb, var(--amber) 14%, var(--bg)); color: var(--amber); }
.algmerk.goed { background: var(--groen-zacht); color: var(--groen); }

@media (max-width: 700px) {
  .lijstenraam { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lijstennav { display: none; }
  .lijstenkeus { display: block; width: 100%; }
  .lijstenraam.vult { padding: 12px 0 0; grid-template-rows: auto minmax(0, 1fr); }
  .lijstenraam.vult > .lijstenlinks { padding: 0 12px; overflow: visible; }
}

.lijstraster td { vertical-align: middle; }
/* De telling zo smal als hij is: de naam is wat je leest, en op een telefoon
   werd hij anders afgekapt omdat de kop "In gebruik" de ruimte nam. */
.lijstraster .getal { width: 1%; white-space: nowrap; }
.lijstraster th.getal { white-space: normal; }
.lijstraster .kleurvak { display: block; }

/* Waar de regels heen moeten als je iets weghaalt dat in gebruik is. Onder de
   lijst en niet in een venster: je wilt de andere namen kunnen zien terwijl
   je kiest. */
.lijstweg {
  margin-top: 10px; padding: 11px 13px; font-size: 13px;
  border: 1px solid var(--rand); border-radius: var(--vorm-rond-klein);
  background: var(--bg); box-shadow: var(--vorm-schaduw-op);
}
.lijstweg .knoppenrij { margin-top: 8px; }

/* Een nieuw item vanuit een keuzelijst in een venster: een regel eronder. */
.lijstnieuwregel { margin-top: 6px; flex-wrap: nowrap; }
.lijstnieuwregel input { flex: 1; min-width: 0; }
.lijstweg select { max-width: 240px; }

/* De negentien op een rij, met hun nummer eronder: zo zie je de hele reeks
   voordat je er een aanpast. */
.kleurstrook { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.kleurstrook > span {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 11px; color: var(--zacht); font-variant-numeric: tabular-nums;
}
.kleurstrook .kleurvak { cursor: default; }
.kleurstrook .kleurvak:hover { transform: none; }
.kleurvlak {
  display: inline-block; width: 48px; height: 22px; border-radius: 6px;
  background: var(--k); vertical-align: middle;
}
.kleurcode { white-space: nowrap; }
.kleurcode input[type="color"] {
  width: 30px; height: 26px; padding: 0; border: 1px solid var(--veld-rand);
  border-radius: 6px; background: none; cursor: pointer; vertical-align: middle;
}
.kleurcode .rgbveld {
  width: 96px; margin-left: 6px; min-height: 26px; padding: 2px 8px;
  font-family: ui-monospace, Consolas, monospace; font-size: 12.5px;
}
.kleurenraster td { vertical-align: middle; }

/* Geen kleur: een leeg vakje met een streep erdoor, zoals bij een filter. */
.kleurvak.geen {
  background: var(--bg); border-color: var(--rand-sterk); position: relative;
}
.kleurvak.geen::after {
  content: ""; position: absolute; left: 2px; right: 2px; top: 50%;
  border-top: 1.5px solid var(--rand-sterk); transform: rotate(-45deg);
}

/* De datum in de cel. Een `date`-veld toont de datum zoals de browser hem in
   jouw taal schrijft, en levert hem terug als 2026-07-03 -- dus de opslag
   blijft eenduidig terwijl jij leest wat je gewend bent. */
.lddatum { width: 100%; min-width: 0; font-variant-numeric: tabular-nums; }

/* De knoppen boven de takenlijst. Een ikoon plus een woord: het ikoon om ze
   uit elkaar te houden zonder te lezen, het woord omdat een ikoon alleen een
   raadsel is dat je elke keer opnieuw oplost.

   Eén hoofdknop, en dat is taak erbij -- dat is wat je hier doet. De rest is
   even belangrijk als elkaar en ziet er dus ook hetzelfde uit. */
.ldbalk { gap: 6px; }
.ldknop {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 10px; border-radius: var(--vorm-knop);
  border: 1px solid transparent; background: var(--vlak); color: var(--tekst);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.ldknop svg { color: var(--zacht); flex: none; }
.ldknop:hover { background: color-mix(in srgb, var(--accent) 8%, var(--vlak)); }
.ldknop:hover svg { color: var(--tekst); }
.ldknop:active { transform: translateY(1px); }
.ldknop:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.ldknop.hoofd {
  background: var(--glans); color: var(--op-glans); font-weight: 700;
  box-shadow: var(--glans-schaduw);
}
.ldknop.hoofd svg { color: currentColor; }
.ldknop.hoofd:hover { filter: brightness(1.06); background: var(--glans); }

/* -- de boom in de takenlijst ---------------------------------------------- */
/* Een kopregel is geen taak: hij krijgt geen dringendheidskleur en geen eigen
   vinkje, alleen een teller. Rustiger dan een kleur, en het zegt meer. */
.ldrij.ldkop > td { background: var(--vlak); }
.ldteller {
  display: inline-block; min-width: 40px; text-align: center;
  padding: 1px 7px; border-radius: 99px; font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--bg); border: 1px solid var(--rand); color: var(--zacht);
}
.ldteller.klaar { border-color: var(--groen); color: var(--groen); }

.paneelnaam { margin: 0 0 10px; }
.paneelnaam input { font-size: 15px; font-weight: 600; }

/* Het wattage onder de naam van de stekker, en niet ernaast: `.tkregel` heeft
   drie kolommen -- aantal, wat, weg -- en een vierde element zou de weg-knop
   uit zijn kolom duwen. */
.tkwattrij { margin-top: 3px; }

/* -- een werkblad: een lijst die het frame vult ---------------------------
 *
 * `.rasterbak` gaat uit van de smalle kolom: `max-height: calc(100vh - 230px)`
 * is kop plus tabs plus marges. In een framevullend scherm is er geen kop en
 * geen marge, en dan houdt de tabel honderdvijftig pixels over waar de
 * voetregel al staat.
 *
 * Ook de rand en de schaduw eraf. Die zeggen "hier begint een kaartje"; in een
 * scherm dat helemaal uit deze ene tabel bestaat is er niets om hem van te
 * onderscheiden, en dan is het een lijn om een lijn. */
.wbblad, .wbblad .rasterbak {
  padding: 0; max-height: none;
  border: 0; border-radius: 0; box-shadow: none;
}
/* `raster()` zet `.rasterbak` op de bak die het krijgt, dus dit is meestal
   hetzelfde element. Allebei de vormen staan er omdat het de ene keer de bak
   zelf is en de andere keer een bak erbinnen. */

/* De tabel is dicht: je kijkt naar dertig regels tegelijk en niet naar drie.
   Dezelfde maat als de leidraad, die hetzelfde doet. */
.wbblad table.raster td { padding: 3px 8px; }
.wbblad table.raster th { padding: 6px 8px; }
.wbblad table.raster td input,
.wbblad table.raster td select { min-height: 24px; }

/* Waar de vraag niet gesteld wordt. Een aansluitregel heeft geen artikel, en
   dat is iets anders dan een artikelregel waar het artikel nog leeg is: het
   eerste is geen werk, het tweede wel. Bleek en klein, zodat het een
   afwezigheid blijft en geen mededeling wordt. */
.wbstil { color: var(--zacht); opacity: .45; }

/* Het zoekveld in de stuurbalk, met het vergrootglas ervoor. */
.wbzoek {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--zacht);
}
.wbzoek input { width: 150px; min-width: 0; }

.wbgezeefd { color: var(--zacht); }

/* De controle in de voet van het contactenscherm. Rood en niet grijs: dit is
   geen telling maar iets wat nog moet gebeuren. Afgekapt, want bij twintig
   partijen zou hij de halve balk vullen -- de hele lijst staat in de tooltip
   en in de waarschuwing op het beginscherm. */
.ktmist {
  margin-left: 18px; color: var(--rood);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ktmist b { font-weight: 600; }
/* Als knop: hij laat alleen de lege rijen zien. Hij blijft eruitzien als de
   mededeling die hij was, met een onderstreping die zegt dat je erop kunt
   klikken. */
button.ktmist.knopje {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  max-width: 100%; text-align: left;
}
button.ktmist.knopje b { text-decoration: underline; text-underline-offset: 2px; }
button.ktmist.knopje:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Wat er van een partij in het schema openstaat. Amber als er iets open is,
   en dan een knop naar Planning; groen als alles rond is. */
.ktschema {
  display: inline-block; padding: 1px 9px; border-radius: 99px;
  font: inherit; font-size: 12px; white-space: nowrap;
  font-variant-numeric: tabular-nums; border: 1px solid transparent;
}
.ktschema.rond { color: var(--groen); }
button.ktschema.open {
  color: var(--amber); background: var(--vlak); border-color: var(--rand);
  cursor: pointer;
}
button.ktschema.open:hover { border-color: var(--amber); }
button.ktschema.open:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Een partij die meedoet en niemand heeft: een lege rij bovenaan de lijst,
   in dezelfde tint als de waarschuwing in de voet. */
tr.ktontbreekt > td { background: var(--rood-zacht); }
tr.ktontbreekt input::placeholder { color: var(--rood); opacity: .85; }

/* De ster van het hoofdcontact. Een lege ster is bleek: bij twintig partijen
   staan er twintig, en die hoeven niet allemaal om aandacht te vragen. De
   gevulde is amber, en rood als de groepsmail nergens aankomt. */
.ktster {
  background: none; border: 0; padding: 0 4px; cursor: pointer;
  font: inherit; font-size: 16px; line-height: 1; color: var(--rand-sterk);
}
.ktster:hover:not(:disabled) { color: var(--amber); }
.ktster:disabled { cursor: default; }
.ktster.aan { color: var(--amber); }
.ktster.aan.zonder { color: var(--rood); }
.ktster:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* -- het dossierwerkblad -------------------------------------------------- */

.dstabel td { padding: 3px 8px; vertical-align: middle; }
.dstabel th { padding: 6px 8px; }
.dstabel td input, .dstabel td select { min-height: 24px; }

/* De kolom met het driehoekje. Smal, en geen kop erboven: een naam zou zeggen
   dat er iets te sorteren valt in twintig pixels. */
.dsklapkop {
  width: 46px; min-width: 46px; padding: 0 0 0 4px;
  white-space: nowrap;
}

/* De greep. Bleek tot je erover bent: hij staat in elke regel, en zestig
   greepjes die om aandacht vragen maken van een lijst een gereedschapskist. */
.dsgreep {
  display: inline-block; width: 14px; text-align: center;
  color: var(--zacht); opacity: .35; cursor: grab;
  font-size: 13px; line-height: 1; user-select: none;
}
.dsrij:hover .dsgreep { opacity: .8; }
.dsgreep:active { cursor: grabbing; }

/* De rij die je vasthebt, en de streep waar hij terechtkomt. Zonder die streep
   zie je pas na het loslaten of je boven of onder de regel zat, en dat is een
   keer te laat. */
.dstabel tr.dspakt td { opacity: .45; }
.dstabel tr.dsboven td { box-shadow: inset 0 2px 0 var(--accent); }
.dstabel tr.dsonder td { box-shadow: inset 0 -2px 0 var(--accent); }

/* Een regel die openstaat houdt zijn kleur, ook als je met de muis ergens
   anders bent. Zonder dat raak je kwijt welke regel bij welk blok hoort zodra
   je er twee openzet. */
.dstabel tr.dsrij.open td { background: var(--vlak); }
.dstabel tr.dsrij.open td:first-child { box-shadow: inset 2px 0 0 var(--accent); }

.dsnaambak { display: flex; align-items: center; gap: 6px; }
.dsnaambak input { flex: 1; min-width: 0; }

/* Wat eronder hangt, over de volle breedte. */
.dsdetailrij td { padding: 0; background: var(--vlak); }
.dsdetailbak {
  padding: 12px 14px 14px 36px;
  border-bottom: 1px solid var(--rand);
}
/* Gestapeld en niet naast elkaar. Naast elkaar leverde bij acht bronnen acht
   smalle kolommen op waarin geen naam paste, en je moest er langs kijken om te
   zien wat er onder een dossier hing. Onder elkaar is het een lijst die je
   afloopt, en elke regel zegt wat erin zit. */
.dsvakken { max-width: 900px; }
.dsvak { min-width: 0; border-top: 1px solid var(--rand); }
.dsvak:first-child { border-top: 0; }

/* De kop is de knop. Geen apart driehoekje ernaast: de hele regel is het doel,
   en een doel van zestien pixels naast een regel van zeshonderd is een doel
   dat je mist. */
.dsbronkop {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  border: 0; background: none; padding: 5px 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.dsbronkop:hover { background: var(--bg); }
.dsbronkop svg { flex: none; align-self: center; color: var(--zacht); }
.dsbronnaam { font-size: 13px; font-weight: 600; white-space: nowrap; }

/* Wat erin zit als hij dicht staat. Bleek en afgekapt: het is een aanwijzing
   en geen inhoudsopgave. */
.dsbronsamen {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--zacht);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dsvak.open .dsregel:first-of-type { border-top: 0; }
.dsvak .dsregel { padding-left: 26px; }
.dsregel {
  display: flex; gap: 8px; align-items: baseline; padding: 2px 0;
  border-top: 1px solid var(--rand);
}
.dstitel {
  flex: 1; min-width: 0; font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dsbij { font-size: 11.5px; color: var(--zacht); white-space: nowrap; }
.dsmeer { font-size: 11.5px; color: var(--zacht); padding: 3px 0 0; }

/* Het sleepvlak. Gestippeld, want het is geen knop en geen kaart: het is een
   plek waar iets mag vallen, en dat is wat een gestippelde rand zegt. */
.dssleepvlak {
  margin-top: 12px; padding: 14px 16px;
  border: 1px dashed var(--rand-sterk); border-radius: var(--vorm-rond);
  background: var(--bg);
}
.dssleepkop { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.dssleepuit { font-size: 12.5px; color: var(--zacht); margin-bottom: 9px; }

/* Wat er oplicht zodra je eroverheen bent. Ook op een regel in de tabel: een
   bestand hoort te kunnen vallen waar je het ziet liggen.

   `!important` op de achtergrond van een cel omdat `tr.open td` er al een
   zet, en op het moment dat je iets loslaat telt alleen waar je bent. */
.dssleep { outline: 2px solid var(--accent); outline-offset: -2px; }
.dssleepvlak.dssleep { background: var(--accent-zacht); border-style: solid; }
tr.dsrij.dssleep td { background: var(--accent-zacht) !important; }

/* Zoeken binnen dit dossier, in de opengeklapte regel. */
.dszoek { margin-top: 12px; }
.dszoek .wbzoek input { width: 260px; }
.dszoekuit { margin-top: 6px; max-width: 760px; }
.dszoekregel {
  display: flex; gap: 8px; align-items: baseline; padding: 3px 0;
  border-top: 1px solid var(--rand);
}
/* Waar de treffer vandaan komt. Een document en een opgeborgen mail zien er in
   een lijst hetzelfde uit, en dat is precies het verschil dat je wilt weten. */
.dszoekwat {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--zacht); min-width: 34px;
}
.dszoekwie { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Een optelling is niet te wijzigen -- een uitkomst wordt niet opgeslagen.
   Dat je er niet in kunt typen zie je aan de regels zelf: er staan geen
   invoervelden in. Wel iets meer lucht tussen de regels, want het zijn er
   minder en je leest ze per stuk in plaats van ze af te lopen. */
.wbblad.telt table.raster td { padding: 6px 8px; }

/* Een zeef is een label plus zijn lijst, en die twee horen bij elkaar te
   blijven als de balk afbreekt. */
.wbzeef { display: inline-flex; align-items: center; gap: 6px; }

/* Een zeef als chip (ontwerp kleur, kaart 3; `zeefChip` in app.js). Zacht
   gevuld en zonder rand, zoals een tweede knop. Aan: de tweede kleur, en een
   kruisje dat hem wist. De keuzelijst ligt onzichtbaar over de hele chip, zodat
   een klik erop de lijst van het systeem opent; het kruisje ligt daar weer
   boven. */
.zeefchip {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  min-height: 28px; padding: 3px 12px; border-radius: var(--vorm-knop);
  background: var(--vlak); color: var(--zacht); font-size: 12.5px;
  white-space: nowrap; cursor: pointer;
}
.zeefchip:hover { background: color-mix(in srgb, var(--accent) 8%, var(--vlak)); }
.zeefchip .zeefwaarde { color: var(--tekst); font-weight: 700; }
.zeefchip .zeefpijl { font-size: 10px; opacity: .7; }
.zeefchip > select {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0;
  opacity: 0; cursor: pointer; border: 0; padding: 0;
}
.zeefchip:focus-within { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.zeefchip > select:disabled { cursor: default; }
.zeefchip:has(> select:disabled) { opacity: .55; }
.zeefchip.aan { background: var(--accent-2-zacht); color: var(--accent-2); padding-right: 4px; }
.zeefchip.aan .zeefwaarde { color: inherit; }
.zeefwis {
  position: relative; z-index: 1; display: inline-grid; place-items: center;
  width: 20px; height: 20px; margin-left: 2px; padding: 0; border: 0;
  border-radius: 50%; background: none; color: inherit; font: inherit;
  font-size: 11px; cursor: pointer;
}
.zeefwis:hover { background: color-mix(in srgb, var(--accent-2) 16%, transparent); }
.zeefwis:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 0; }
.zeefwis[hidden] { display: none; }

/* Het zoekveld als pil, vooraan in de stuurbalk. */
.wbzoek.pil {
  min-height: 28px; padding: 0 4px 0 12px; border-radius: var(--vorm-knop);
  background: var(--vlak);
}
.wbzoek.pil input {
  background: none; border: 0; padding: 3px 6px 3px 0; min-height: 26px;
  color: var(--tekst); color-scheme: inherit;
}
.wbzoek.pil:focus-within { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.wbzoek.pil input:focus { outline: none; }

/* De naam van het object is een knop en ziet er niet uit als een knop: hij
   staat in een kolom vol namen, en een rand eromheen zou zeggen dat de rest
   dood is. Wat hij is blijkt uit de aanwijzer en uit het feit dat hij oplicht
   zodra zijn paneel openstaat. */
.wbnaam {
  border: 0; background: none; padding: 0; margin: 0; font: inherit;
  color: inherit; text-align: left; cursor: pointer; width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wbnaam:hover { text-decoration: underline; }
.wbnaam.open { font-weight: 650; color: var(--accent); }
.wbnaam:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* -- de leidraad als werkblad ---------------------------------------------- */
/*
 * De opdracht was "kleurrijk", en de verleiding is dan om overal een tint op te
 * zetten. Kleur die overal ligt zegt niets meer. Drie dingen dragen hier kleur,
 * en alle drie omdat ze een vraag beantwoorden die je bij het kijken stelt:
 * waar hoort dit bij (het onderdeel), hoe staat het ervoor (de status), en moet
 * ik nu iets doen (de tijd). Prioriteit krijgt gewicht in plaats van kleur --
 * twee kleurenstelsels over elkaar leest als een kerstboom.
 */
.ldblad { padding: 0; }
/* Vaste kolommen: de breedtes in `LD_KOLOMMEN` gelden, en wat overblijft is
   voor Taak en Omschrijving, de twee zonder breedte. Met de automatische
   indeling rekte de tabel naar de inhoud, en kregen Afdeling en Status de
   ruimte die de taak nodig had. De ondergrens houdt de taak leesbaar als er
   veel kolommen aan staan (`LD_VRIJE_BREEDTE`); dan schuift de bak opzij. */
.ldtabel { width: 100%; table-layout: fixed; }
.ldtabel th { white-space: nowrap; padding: 0; }
.ldtabel td { padding: 3px 8px; vertical-align: middle; }
.ldtabel td.getal { text-align: right; font-variant-numeric: tabular-nums; }

/* De kop is een knop: sorteren hoort te kunnen zonder dat je zoekt waar. */
.ldsorteer {
  display: flex; align-items: center; gap: 5px; width: 100%;
  background: none; border: 0; cursor: pointer; font: inherit;
  padding: 7px 8px; color: var(--zacht); text-align: left;
  font-size: 11.5px; font-weight: 700;
}
.ldsorteer:hover { color: var(--tekst); background: var(--vlak); }
.ldsorteer .pijl { color: var(--accent); font-size: 11px; }

.ldtabel td input, .ldtabel td select {
  border-color: transparent; background: none; padding: 2px 5px;
  min-height: 0; font-size: 13px;
  /* Het veld vult zijn cel: een invoerveld heeft een eigen breedte van zo'n
     twintig tekens, en die stak buiten een smalle cel of liet een brede leeg. */
  box-sizing: border-box; width: 100%; min-width: 0;
}
/* Aanwijzen en invullen: zie de stille velden bij het raster. */

/* Een taak die zwaar weegt staat vet. Geen kleur: die is al vergeven aan waar
   het bij hoort en aan hoe dringend het is. */
.ldtabel td.zwaar input, .ldtabel td.zwaar { font-weight: 650; }

/* Het onderdeel draagt zijn eigen kleur als streep ervoor -- genoeg om het in
   een oogopslag te groeperen, te weinig om de regel over te nemen. */
.ldonderdeel, .ldmerk {
  border-left: 3px solid var(--k, var(--rand-sterk));
  padding-left: 7px; border-radius: 0 var(--vorm-rond) var(--vorm-rond) 0;
}
.ldmerk { display: inline-block; font-size: 12.5px; }
.ldgetal { width: 58px; }

/* De status als pil zonder rand, met een stip ervoor (ontwerp kleur, kaart 6).
   Nog te doen is grijs: alleen wat iets vraagt krijgt kleur -- turquoise voor
   bezig, groen voor gereed, rood voor wat te laat is. De stip is `currentColor`,
   zodat hij altijd de kleur van de tekst heeft.

   In de tabel is het een keuzelijst, en die kent geen `::before`: daar is de
   stip een achtergrond. De selector weegt zwaarder dan de stille velden, want
   een pil heeft nooit een kader, ook niet als je de regel aanwijst. */
.ldstatus {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; line-height: 22px;
  padding: 0 10px 0 8px; border-radius: var(--vorm-knop);
  background-color: var(--vlak); color: var(--zacht);
}
span.ldstatus::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .8; flex: none;
}
.ldstatus.bezig { background-color: var(--accent-2-zacht); color: var(--accent-2); }
.ldstatus.gereed { background-color: var(--groen-zacht); color: var(--groen); }
.ldstatus.laat { background-color: var(--rood-zacht); color: var(--rood); }
.ldtabel td select.ldstatus,
.raster tr:hover td select.ldstatus,
.raster tr:focus-within td select.ldstatus {
  width: auto; max-width: 100%; min-height: 22px; border: 0;
  padding: 0 10px 0 18px;
  background-image: radial-gradient(circle at 9px 50%, currentColor 0 3px, transparent 3.5px);
  background-position: 0 0; background-repeat: no-repeat;
  color-scheme: inherit;
}
.ldtabel td select.ldstatus:focus { box-shadow: 0 0 0 3px var(--accent-2-zacht); }
/* De grijze pil: in de tabel wist `.ldtabel td select` de achtergrond, en een
   stand die niets vraagt is nog steeds een pil. */
.ldtabel td select.ldstatus:not(.bezig):not(.gereed):not(.laat) { background-color: var(--vlak); }

.ldrij.af td { opacity: .55; }
.ldrij.af td.zwaar, .ldrij.af td.zwaar input { font-weight: 400; }
.ldrij.vervallen td { opacity: .45; text-decoration: line-through; }
/* Over tijd: een stip voor het nummer, en verder niets. De vulling over de
   hele regel is eraf -- die kleurde achtendertig regels roze en liet daarmee
   geen ruimte over voor de kleur die jij zelf kiest. Daarna was het een streep
   langs de rand, en die was harder dan nodig: een rode lijn over acht regels
   onder elkaar leest als een fout in de tabel (ontwerp kleur, kaart 6). Een
   stip zegt hetzelfde en laat de rij aan jou. */
.ldrij.over td:first-child, .ldrij.bijna td:first-child { position: relative; padding-left: 18px; }
.ldrij.over td:first-child::before, .ldrij.bijna td:first-child::before {
  /* Op de hoogte van de eerste regel en niet op de helft van de cel: in een
     rij met een lange omschrijving zakte hij anders onder het nummer. */
  content: ""; position: absolute; left: 6px; top: 16px;
  width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: var(--rood); box-shadow: 0 0 0 3px var(--rood-zacht);
}
.ldrij.bijna td:first-child::before {
  background: var(--amber);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 18%, transparent);
}
.ldrij:hover td { background: var(--vlak); }

/* De kleur die jij aan een regel geeft, over de hele regel. De kleur zelf en
   geen tint ervan: het `--r-`-stel is er precies voor gemaakt, licht genoeg om
   de gewone tekst erop te lezen.

   Na de hover-regel hierboven, anders veegt die hem weg zodra je erover gaat.
   Aanwijzen schuift hem naar de paginakleur toe: in het licht wordt hij dus
   lichter en in het donker donkerder. Allebei is "weg van de tekstkleur", en
   dat is wat je wilt op het moment dat je de regel leest -- donkerder maken in
   een lichte stand haalt juist contrast weg. */
.ldrij.gekleurd td { background: var(--eigen); }
.ldrij.gekleurd:hover td {
  background: color-mix(in srgb, var(--eigen) 62%, var(--bg));
}

/* -- het paneel naast de takenlijst ---------------------------------------- */
/* De regel die open staat. Na de eigen kleur, want welke taak je leest gaat
   voor de kleur die je hem gaf -- zolang het paneel open is. */
.ldrij.gekozen td, .ldrij.gekozen.gekleurd td { background: var(--accent-zacht); }
.ldrij:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Aangewezen van elders: even amber, dan de keuzekleur. Kort genoeg om niet
   te storen, lang genoeg om de regel te vinden in een lijst van veertig. */
.ldrij.flits td { animation: ldflits 1.8s ease-out; }
@keyframes ldflits {
  0%, 35% { background: color-mix(in srgb, var(--amber) 32%, var(--bg)); }
  100% { background: var(--accent-zacht); }
}
@media (prefers-reduced-motion: reduce) { .ldrij.flits td { animation: none; } }
/* Dezelfde amber voor een paragraaf waar het productiescherm je heen stuurde. */
.paragraaf.flits { animation: parflits 1.8s ease-out; border-radius: var(--vorm-rond-klein); }
@keyframes parflits {
  0%, 35% { background: color-mix(in srgb, var(--amber) 22%, var(--bg)); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .paragraaf.flits { animation: none; } }

/* Het knopje achter de naam. Bleek tot je over de regel gaat: veertig
   knopjes op volle sterkte maken van de naamkolom een kolom knopjes. */
.ldopen {
  flex: none; display: inline-grid; place-items: center; width: 24px;
  height: 24px; border: 0; border-radius: var(--vorm-rond-klein);
  background: none; color: var(--zacht); cursor: pointer; opacity: .35;
}
.ldrij:hover .ldopen, .ldrij.gekozen .ldopen, .ldopen:focus-visible { opacity: 1; }
.ldopen:hover { background: var(--bg); color: var(--tekst); }
/* De naam gaat voor: in een smalle kolom krimpt het merkje, niet de taak. */
.ldtabel .ldnaambak > input, .ldtabel .ldnaambak > .ldnaam { min-width: 6em; }
.ldwacht {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  font-size: 11px; white-space: nowrap; color: var(--amber);
  border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
  border-radius: 99px; padding: 0 6px; margin-left: 4px;
}

/* -- op de telefoon: kaarten ----------------------------------------------- */
.ldkaarten { display: flex; flex-direction: column; gap: 7px; padding: 8px; }
.ldkaart {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 10px;
  align-items: start; padding: 10px 12px; border: 1px solid var(--rand);
  border-radius: var(--vorm-rond); background: var(--bg); cursor: pointer;
}
/* Dezelfde streep als links van een regel in de tabel: rood is te laat,
   amber is deze week. */
.ldkaart.over { box-shadow: inset 3px 0 0 var(--rood); }
.ldkaart.bijna { box-shadow: inset 3px 0 0 var(--amber); }
.ldkaart.onder { margin-left: 14px; }
.ldkaart.gekozen { background: var(--accent-zacht); }
.ldkaart.af .ldkaartnaam { text-decoration: line-through; color: var(--zacht); }
.ldkaart.vervallen { opacity: .55; }
.ldkaart.flits { animation: ldflitskaart 1.8s ease-out; }
@keyframes ldflitskaart {
  0%, 35% { background: color-mix(in srgb, var(--amber) 32%, var(--bg)); }
  100% { background: var(--accent-zacht); }
}
/* Het vinkje: groot genoeg voor een duim, en een knop en geen selectievakje
   omdat het meteen opslaat. */
.ldvink {
  width: 26px; height: 26px; border: 2px solid var(--rand-sterk);
  border-radius: 6px; background: var(--bg); color: #fff; font-size: 15px;
  line-height: 1; padding: 0; cursor: pointer; display: grid; place-items: center;
}
.ldvink.aan { background: var(--groen); border-color: var(--groen); }
.ldvink.leeg { border-style: dashed; cursor: default; }
.ldkaartnaam { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.ldkaartmeta { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 12.5px;
  color: var(--zacht); align-items: baseline; }
.ldkaartmeta .ldwacht { margin-left: 0; }
.ldkaartkop {
  display: flex; gap: 8px; align-items: center; justify-content: space-between;
  padding: 7px 12px; margin-top: 4px; border: 0; border-radius: var(--vorm-rond);
  background: var(--vlak); color: var(--tekst); font: inherit; font-weight: 650;
  text-align: left; cursor: pointer;
}
.ldkaartkop.gekozen { background: var(--accent-zacht); }
@media (prefers-reduced-motion: reduce) { .ldkaart.flits { animation: none; } }

@media (max-width: 700px) {
  /* Het paneel over het hele scherm: op een telefoon is een strook van
     320 pixels naast de lijst geen paneel maar een tweede lijst. */
  .ldpaneel.tijdpaneel { width: 100vw; left: 0; margin: 0; border-radius: 0; }
  /* *Taak erbij* wordt een plusje; de chips hebben de breedte nodig. Dat
     doet de balk nu voor elke hoofdknop (zie `#balk` bovenin). */
  .ldbalk { gap: 5px; }
  .ldsnel { padding: 4px 9px; font-size: 12.5px; }
}

/* -- bewaar als leidraad --------------------------------------------------- */
/* De tellingen: het getal rechts uitgelijnd in een eigen kolom, zodat je de
   rij van boven naar beneden leest als een optelsom. */
.ldverschil { list-style: none; margin: 10px 0; padding: 0; display: grid;
  gap: 4px; font-size: 13px; }
.ldverschil li { display: grid; grid-template-columns: 36px 1fr; gap: 8px; }
.ldverschil b { text-align: right; font-variant-numeric: tabular-nums; }

/* -- de stuurbalk van één rij ---------------------------------------------- */
/* De snelzeven: chips met hun aantal, en aan is vol. Een knop en geen vinkje,
   want er staat er maar één tegelijk aan. */
.ldsnel {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 12px; border-radius: var(--vorm-knop); border: 1px solid transparent;
  background: var(--vlak); color: var(--tekst); font: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer; white-space: nowrap;
}
.ldsnel b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--zacht); }
.ldsnel:hover { background: color-mix(in srgb, var(--accent) 8%, var(--vlak)); }
/* Aan is gevuld in de tweede kleur: van een afstand zie je welk filter geldt. */
.ldsnel.aan { background: var(--accent-2); color: var(--op-accent-2); font-weight: 700; }
.ldsnel.aan b { color: inherit; opacity: .85; }
.ldsnel:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }
/* Een zeef die aanstaat terwijl hij dicht is: de knop draagt de kleur. */
.ldknop.aan { background: var(--accent-2-zacht); color: var(--accent-2); }
/* Een onderdeelchip die op zijn onderdeel zeeft. */
button.fasechip { font: inherit; font-size: 12px; cursor: pointer; }
button.fasechip:hover { border-color: var(--rand-sterk); }
.fasechip.aan { border-color: var(--accent); color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent); }
.fasenstrook .fasechip.aan { background: var(--accent-2-zacht); color: var(--accent-2); box-shadow: none; }

.ldpaneel { display: flex; flex-direction: column; gap: 14px; }
.ldpaneelkop { display: flex; gap: 8px; align-items: flex-start; }
.ldpaneelkop h2 { flex: 1; text-wrap: balance; }
.ldpaneelkop .knop { flex: none; min-height: 26px; padding: 0 8px; font-size: 16px; }
.ldblok .kopje { margin-bottom: 5px; }
/* De standen naast elkaar in één zacht gevulde strook; de gekozen is een witte
   pil met tekst in de tweede kleur. Wat aan staat is turquoise, net als een
   zeef of een knop die aan staat. */
.ldstanden {
  display: flex; gap: 2px; padding: 3px;
  border-radius: var(--vorm-knop); background: var(--vlak);
}
.ldstand {
  flex: 1; font: inherit; font-size: 12px; font-weight: 600; padding: 4px 4px;
  border: 0; border-radius: var(--vorm-knop);
  background: none; color: var(--zacht); cursor: pointer;
}
.ldstand:hover { color: var(--tekst); }
.ldstand:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.ldstand.aan {
  background: var(--bg); color: var(--accent-2);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
/* Het geopende taakpaneel als derde zwevend paneel, naast de lijst. */
.ldpaneel.tijdpaneel {
  margin: 0 12px 12px 4px; border: 0; border-radius: var(--vorm-paneel);
  background: var(--bg); box-shadow: var(--paneel-schaduw); padding: 16px 18px;
}
.ldwanneer { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  font-size: 14px; }
.ldwanneerrest { font-size: 12.5px; color: var(--zacht); }
.ldwanneerrest.over { color: var(--rood); font-weight: 600; }
.ldwanneerrest.bijna { color: var(--amber); font-weight: 600; }
/* In de rij: op één regel, en de rest kleiner dan de datum. Afkappen mag, de
   datum staat vooraan. */
.ldtabel .ldwanneer { font-size: 12.5px; gap: 6px; flex-wrap: nowrap;
  white-space: nowrap; overflow: hidden; }
.ldtabel .ldwanneerrest { font-size: 11.5px; }
.ldwanneervelden { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 6px; }
.ldwanneervelden input:not([type]) , .ldwanneervelden input[inputmode] { width: 56px; }
.ldwanneervelden label { display: inline-flex; align-items: center; gap: 2px; }
.ldwachtlijst { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px;
  font-size: 13px; }
.ldwachtlijst li::before { content: "\25cb  "; color: var(--amber); }
.ldwachtlijst li.af { color: var(--zacht); }
.ldwachtlijst li.af::before { content: "\2713  "; color: var(--groen); }
.ldomschrijving { width: 100%; resize: vertical; line-height: 1.5; font: inherit;
  font-size: 13px; }
.ldtoelichting { margin: 0; font-size: 13px; white-space: pre-wrap; }
.ldafdoor { margin: 0; }
/* Het scherm van een stap weet dat hij klaar is (programmering, kaart 8). */
.ldklaar { color: var(--groen); margin-top: 4px; }

/* ==========================================================================
   De dekking in de tijdbalk

   De strook boven een baan, de baan "nog niemand" eronder, en de arcering
   achter een persoonsbaan voor wie gezegd heeft dat hij niet kan. Alle
   klassen zijn nieuw, behalve `.baanaantal.tekort` — dat is een variant op
   een klasse die hierboven staat.
   ========================================================================== */

/* -- de dekkingsstrook ---------------------------------------------------- */

/* Een eigen baan en geen kopregel. De app groepeert banen alleen bij *per
   leverancier* en *per functie*; een strook op een groepskop zou dus op de
   helft van de assen verdwijnen, en juist bij *per plek* en *per object* wil
   je hem het hardst. */
.dekkingbaan { border-bottom: 1px solid var(--rand); }
.dekkingbaan > .baannaam { background: var(--vlak); }
.dekkingnaam b { font-weight: 600; }
.baanspoor.dekkingspoor { min-height: 0; height: 22px; }

/* De kolommen van het raster lopen door, maar bleker: de strook is een
   samenvatting en hoort niet om aandacht te vechten met de banen eronder. */
.dekkingspoor .kolom { border-right-color: color-mix(in srgb, var(--rand) 55%, transparent); }

.dekkingdeel {
  position: absolute; top: 4px; height: 14px; border-radius: 4px;
  background: var(--groen); color: var(--op);
  font-size: 10.5px; line-height: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums; text-align: center;
  overflow: hidden; white-space: nowrap;
}

/* Rood is hier de enige kleur die je aan het werk zet, dus de enige die er
   staat. De groepskleur zit al op de blokken eronder en zou hier meekleuren
   met iets wat niets zegt over of het klopt. */
.dekkingdeel.tekort { background: var(--rood); }

.baanaantal.tekort { color: var(--rood); font-weight: 600; }

/* -- de baan "nog niemand" ------------------------------------------------ */

.gatenbaan > .baannaam { background: color-mix(in srgb, var(--vlak) 55%, var(--bg)); }
.leegnaam { color: var(--zacht); font-weight: 500; }

/* Het gat als blok: dezelfde vorm als een dienst, want dat is wat het wordt
   zodra je er iemand op zet. Gestippeld en hol, want het is er nog niet --
   een vol blok zou zeggen dat het geregeld is. */
.tijdblok.spookblok {
  background: color-mix(in srgb, var(--rood) 9%, var(--bg));
  border: 1px dashed var(--rood);
  color: var(--tekst);
  cursor: default;
  font-weight: 500;
}
.tijdblok.spookblok .bloktijd { opacity: 1; color: var(--zacht); }

/* -- de beschikbaarheid achter een baan ----------------------------------- */

/* Arcering en geen vulling. Een vlak zou de achtergrond van de baan bezetten
   waar de eventdagen en de nacht al iets zeggen; strepen laten die er
   doorheen en blijven toch te zien onder een blok.
 *
 * Alleen wie iets gezegd heeft krijgt strepen. Een lege dag betekent *niets
 * gezegd* en niet *kan*, en dat verschil is het hele punt van de drie
 * standen. */
.nietbeschikbaar {
  position: absolute; top: 0; bottom: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--zacht) 20%, transparent) 0 4px,
    transparent 4px 9px);
}
.nietbeschikbaar.liever_niet {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--amber) 22%, transparent) 0 4px,
    transparent 4px 9px);
}

/* Ingedeeld op een dag dat iemand heeft gezegd dat hij niet kan. Dat is de
   enige melding in deze module met ernst *nu*: de crewlijst klopt, het rooster
   ziet er vol uit, en op zondagochtend staat er niemand bij de entree. Die
   hoort niet alleen op het beginscherm te staan. */
.nietbeschikbaar.botst {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--rood) 22%, transparent) 0 4px,
    transparent 4px 9px);
}
/* *Kan*: een zachte vulling en geen arcering. Arcering zegt "hier niet", en
   dit is juist het antwoord waar je in een rooster naar zoekt. */
.nietbeschikbaar.kan { background: color-mix(in srgb, var(--groen) 10%, transparent); }

/* -- het rooster: een gat kiezen ------------------------------------------ */
/* Een kopregel tussen de blokken: open diensten, ingedeeld, nog niet ingedeeld. */
.sectiebaan { border-bottom: 1px solid var(--rand); }
.sectienaam {
  cursor: default; font-size: 10.5px !important; letter-spacing: .07em;
  text-transform: uppercase; color: var(--zacht); font-weight: 700;
  padding: 9px 10px 3px !important;
}
.baanspoor.sectiespoor { min-height: 0; height: 26px; }
/* Is er een gat gekozen, dan lichten de banen op van wie het kan vullen en
   vervaagt de rest -- die blijft leesbaar, want wie er al staat wil je zien. */
.tijdrooster.kiest .persoonbaan { opacity: .38; transition: opacity .12s; }
.tijdrooster.kiest .persoonbaan.kandidaat,
.tijdrooster.kiest .persoonbaan.zwak { opacity: 1; }
.persoonbaan.kandidaat > .baannaam { background: var(--accent-zacht); }
/* Wie niets heeft gezegd: wel kandidaat, met een stippelrand. Eerst vragen. */
.persoonbaan.zwak > .baannaam { box-shadow: inset 0 0 0 1.5px var(--accent); }
.persoonbaan.doel .baanspoor { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.baanaantal.baanreden { color: var(--accent); }
.zetknop { align-self: flex-start; margin-top: 3px; min-height: 22px;
           padding: 1px 9px; font-size: 12px; }
.tijdblok.spookblok[draggable="true"] { cursor: grab; }
button.tijdblok.spookblok { cursor: pointer; }
.tijdblok.spookblok.gekozen {
  border-style: solid;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rood) 28%, transparent);
}
/* De legenda in de stuurbalk van het rooster: de groepen met hun kleur, en de
   standen van de beschikbaarheid. Chips om te lezen, niet om op te klikken. */
.crewlegenda { display: inline-flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.soortchip.stil { cursor: default; }
.soortchip .staal {
  position: relative; display: inline-block; width: 16px; height: 10px;
  border: 1px solid var(--rand-sterk); border-radius: 3px; flex: none;
}
/* Een dienst buiten het deel dat je bekijkt: grijs, gestippeld, niet te
   pakken. Hij staat er zodat niemand dubbel wordt ingedeeld. */
.tijdblok.elders {
  background: var(--vlak); color: var(--zacht); font-weight: 500;
  border: 1px dashed var(--rand-sterk); cursor: default;
}
/* Compact: één regel per persoon, zodat twintig mensen in beeld passen. */
.tijdrooster.compact .baanspoor { min-height: 28px; }
.tijdrooster.compact .tijdblok { height: 20px; padding: 1px 6px; font-size: 11px; }
.tijdrooster.compact .persoonbaan .baannaam { padding: 3px 10px; }
.tijdrooster.compact .persoonbaan .baannaam b { font-size: 13px; }
.tijdrooster.compact .persoonbaan .baanaantal:not(.baanreden) { display: none; }
/* In het paneel: een kandidaat per regel, met zijn knop rechts. */
.tijdpaneel .kandidaat { display: flex; gap: 8px; align-items: center;
                         padding: 6px 0; border-bottom: 1px solid var(--rand); }
.tijdpaneel .kandidaat .wie { flex: 1; min-width: 0; }
.tijdpaneel .dagregel { display: flex; gap: 4px; align-items: center; padding: 2px 0; }
.tijdpaneel .dagregelnaam { width: 58px; font-size: 12.5px; }
.tijdpaneel .dagregel .knop { min-height: 24px; padding: 1px 8px; }
/* Een knop die aan staat (Te laat, Van mij) is gevuld in de tweede kleur: van
   een afstand zie je welk filter geldt, en het is niet de kleur van de knop
   die je iets laat doen. */
.knop.aan { border-color: transparent; background: var(--accent-2);
            color: var(--op-accent-2); font-weight: 700; }
.knop.aan:hover { background: var(--accent-2); filter: brightness(1.06); }

/* -- het paneel ernaast --------------------------------------------------- */
/* Naast de balk en niet erboven: je ziet wat je verandert terwijl je het
   verandert -- kies je een andere kleur, dan kleuren de blokken meteen mee. */
.tijdpaneel {
  flex: none; width: 320px; border-left: 1px solid var(--rand);
  background: var(--vlak); overflow-y: auto; padding: 13px 15px;
}
.tijdpaneel h2 { font-size: 15px; margin: 0 0 3px; line-height: 1.3; }
.tijdpaneel .kopje {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--zacht); font-weight: 700; margin: 0 0 6px;
}
.tijdpaneel select { width: 100%; margin-bottom: 10px; }
/* De twee ijkpunten. Een ring en geen vol bolletje: ze zeggen iets over de
   tekening en niet over wat er op het terrein staat, en dat verschil hoor je te
   zien zonder erover na te denken. */
.tkijkpin { display: flex; align-items: center; }
.tkijkstip {
  width: 17px; height: 17px; border-radius: 50%; flex: none; position: relative;
  border: 3px solid var(--accent); background: var(--bg);
  box-shadow: 0 0 0 2px var(--bg), 0 1px 5px rgba(0,0,0,.35);
  transform: translate(-8px, -8px);
}
.tkijkstip::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  background: var(--accent);
}
/* In de ijkstand zijn ze te pakken; daarbuiten niet. Een bolletje dat altijd te
   verslepen is, is er een die je een keer per ongeluk verschuift -- en dan
   schuift het hele terrein mee zonder dat iemand het merkt. */
.tkijkpin.ijkend { cursor: grab; }
.tkijkpin.ijkend .tkijkstip {
  box-shadow: 0 0 0 4px var(--accent-zacht), 0 1px 6px rgba(0,0,0,.4);
}

/* -- de artikelkiezer over de tekening -------------------------------------
 *
 * Zwevend en niet ernaast. Een venster dat ruimte inneemt maakt de kaart
 * smaller, en dan verspringt de zoom en het middelpunt zodra je het opent of
 * sluit -- terwijl je juist aan het kijken bent.
 *
 * Hij valt binnen `.kaartbak`, en die isoleert zijn stapel -- daarom mag het
 * getal hier hoog zijn zonder dat het buiten de kaart reikt. Hoog moet ook:
 * Leaflet zet zijn kaartlaag op 400 en zijn knoppen op 1000, en daaronder ligt
 * de kiezer achter de tekening.
 */
.tkzwever {
  position: absolute; right: 13px; top: 13px; z-index: 1100;
  width: 268px; max-width: calc(100% - 26px);
  display: flex; flex-direction: column; max-height: calc(100% - 26px);
  background: var(--bg); border: 1px solid var(--rand);
  border-radius: 11px; box-shadow: var(--vorm-schaduw-op); overflow: hidden;
}
.tkzkop {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 9px 11px; border-bottom: 1px solid var(--rand);
}
.tkzkop h4 { margin: 0; font-size: 12.5px; font-weight: 650; }
.tkzkop .telt { margin-left: auto; color: var(--zacht); font-size: 11.5px; }
.tkzvouw {
  border: 0; background: none; color: var(--zacht); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 3px; border-radius: 5px;
}
.tkzvouw:hover { color: var(--tekst); background: var(--vlak); }
/* Twee tabbladen in het zwevende raam: artikelen en aansluitingen zijn twee
   vragen aan dezelfde tekening. Het getal erop zegt hoeveel er op dat tabblad
   aanstaan -- anders zie je op het ene tabblad niet dat het andere iets
   uitlicht. */
.tkztabs {
  display: flex; gap: 2px; flex: none; padding: 0 9px;
  border-bottom: 1px solid var(--rand);
}
.tkztab {
  display: flex; align-items: center; gap: 6px; padding: 7px 10px;
  border: 1px solid transparent; border-bottom: 0; background: none;
  font: inherit; font-size: 12px; font-weight: 550; color: var(--zacht);
  border-radius: 7px 7px 0 0; cursor: pointer;
}
.tkztab:hover { color: var(--tekst); }
.tkztab.aan {
  background: var(--bg); color: var(--tekst); border-color: var(--rand);
  margin-bottom: -1px;
}
.tkztab .bal {
  background: var(--accent); color: #fff; border-radius: 99px; padding: 0 5px;
  font-size: 10.5px; font-weight: 650;
}

.tkzlijf { flex: 1; min-height: 0; overflow-y: auto; padding: 9px 11px 11px; }

.tkzalles {
  width: 100%; margin-bottom: 8px; padding: 5px 10px; font: inherit;
  font-size: 12.5px; border: 1px solid var(--rand); border-radius: 8px;
  background: var(--bg); color: var(--tekst); cursor: pointer;
}
.tkzalles:hover { background: var(--vlak); border-color: var(--rand-sterk); }

.tkzzoek {
  display: flex; align-items: center; gap: 7px; padding: 5px 9px;
  border: 1px solid var(--rand-sterk); border-radius: 8px; margin-bottom: 6px;
}
.tkzzoek:focus-within { border-color: var(--accent); }
.tkzzoek svg { color: var(--zacht); flex: none; }
.tkzzoek input {
  border: 0; outline: 0; background: none; font: inherit; font-size: 12.5px;
  flex: 1; min-width: 0; padding: 0; color: var(--tekst);
}

.tkzgroep {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--zacht); font-weight: 650; padding: 9px 0 3px;
  border-bottom: 1px solid var(--rand);
}
.tkzrij {
  display: flex; align-items: center; gap: 8px; padding: 5px 0;
  border-bottom: 1px solid var(--rand); font-size: 12.5px; cursor: pointer;
}
.tkzrij:last-child { border-bottom: 0; }
.tkzrij:hover { background: var(--vlak); }
.tkzrij .op {
  margin-left: auto; color: var(--zacht); font-size: 11.5px; flex: none;
  font-variant-numeric: tabular-nums;
}
.tkzrij.aan .tknaam { font-weight: 600; }
/* Een vinkje dat je zelf tekent: een `input` van de browser is in elk stelsel
   net iets anders groot, en hier staat hij naast tekst van 12,5 pixels. */
.tkvink {
  width: 14px; height: 14px; border-radius: 4px; flex: none; position: relative;
  border: 1.5px solid var(--rand-sterk); background: var(--bg);
}
.tkvink.aan { background: var(--accent); border-color: var(--accent); }
.tkvink.aan::after {
  content: ""; position: absolute; left: 3.5px; top: .5px;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

.tkzvoet {
  flex: none; padding: 8px 11px; border-top: 1px solid var(--rand);
  background: var(--vlak); font-size: 12px; display: flex; gap: 6px;
  align-items: baseline;
}
.tkzvoet b { font-size: 15px; font-variant-numeric: tabular-nums; }
.tkzvoet span { color: var(--zacht); }

/* Ingevouwen blijft hij als knop staan, met hoeveel er aanstaan. Helemaal
   verdwijnen zou betekenen dat je de kaart niet meer vertrouwt: je ziet grijze
   bolletjes en weet niet meer waarom. */
.tkzwevknop {
  position: absolute; right: 13px; top: 13px; z-index: 1100;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border: 1px solid var(--rand); border-radius: 9px;
  background: var(--bg); box-shadow: var(--vorm-schaduw-op);
  font: inherit; font-size: 12.5px; color: var(--tekst); cursor: pointer;
}
.tkzwevknop:hover { border-color: var(--rand-sterk); }
.tkzwevknop svg { color: var(--zacht); flex: none; }
.tkzwevknop .bal {
  background: var(--accent); color: #fff; border-radius: 99px;
  padding: 0 6px; font-size: 11px; font-weight: 650;
}

/* De sluier: de tekening naar de achtergrond, de bolletjes ervoor.

   Doorzichtigheid op de tegellaag en geen laag eroverheen. Een laag werkt niet:
   `.leaflet-tile-pane` heeft geen eigen maat -- de tegels erin zijn los
   geplaatst -- dus een vlak met `inset: 0` wordt nul bij nul.

   De bolletjes vervagen niet mee: die zitten in `.leaflet-marker-pane`, een
   laag ernaast. */
.kaartvlak.sluier .leaflet-tile-pane {
  opacity: .16; transition: opacity .18s;
}
.kaartvlak .leaflet-tile-pane { transition: opacity .18s; }

/* Het getal op een bolletje: hoeveel er van de aangevinkte artikelen staan. */
.tkpin .stipbak { position: relative; display: flex; flex: none; }
.tkpin .bel {
  position: absolute; top: -8px; left: 100%; margin-left: -7px;
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px;
  background: var(--tekst); color: var(--bg); font-size: 10.5px;
  line-height: 17px; text-align: center; font-weight: 650;
  font-variant-numeric: tabular-nums;
}
/* Wat niets met je keuze te maken heeft valt terug maar blijft staan --
   weghalen zou betekenen dat je vergeet dat het er is, en dan zet je de tweede
   bar op de plek van de eerste.

   Echt terugdrukken en niet alleen ontkleuren: een object zonder soort is zelf
   al grijs, en dan zie je geen verschil met wat wél meedoet. */
.tkpin.stil { opacity: .3; }
.tkpin.stil .stip {
  background: var(--zacht); width: 10px; height: 10px; border-width: 2px;
  box-shadow: none;
}
.tkpin.stil .naam { background: none; box-shadow: none; font-weight: 400; }

/* En wat wél meedoet wordt groter en voller. Geen ring eromheen: dat is het
   beeld van een ijkpunt, en twee verschillende dingen met hetzelfde beeld lezen
   als een ding. Het verschil met de buren doet het werk -- die staan op dertig
   procent. */
.tkpin.mee .stip {
  width: 17px; height: 17px; box-shadow: 0 2px 7px rgba(0,0,0,.5);
}
.tkpin.mee .naam { font-weight: 650; }

/* -- het terreinpaneel -----------------------------------------------------
 *
 * Het staat er altijd: zonder selectie over het terrein als geheel, met
 * selectie over dat ene object. Een paneel dat verschijnt en verdwijnt maakt de
 * kaart elke keer smaller, en dan verspringt je zoom terwijl je aan het werk
 * bent.
 *
 * De kop met de tabbladen blijft staan en het lijf eronder scrolt. Andersom
 * scrollen de tabbladen weg zodra de lijst langer is dan het scherm, en moet je
 * terug omhoog om van tabblad te wisselen.
 */
.tkpaneel {
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  background: var(--bg);
}
.tkpkop {
  flex: none; padding: 12px 15px 0; border-bottom: 1px solid var(--rand);
  background: var(--bg);
}
.tkpkoprij { display: flex; align-items: flex-start; gap: 9px; }
.tkpstip {
  width: 13px; height: 13px; border-radius: 50%; flex: none; margin-top: 5px;
  background: var(--k, var(--zacht));
}
.tkpmidden { flex: 1; min-width: 0; }
.tkpmidden h2 { font-size: 15px; margin: 0; line-height: 1.3; }
.tkpmidden > input { width: 100%; font-size: 15px; font-weight: 600; }
.tkponder { color: var(--zacht); font-size: 12.5px; margin-top: 2px; }
.tkpdicht {
  flex: none; border: 0; background: none; color: var(--zacht); cursor: pointer;
  font-size: 17px; line-height: 1; padding: 2px 5px; border-radius: 6px;
}
.tkpdicht:hover { color: var(--tekst); background: var(--vlak); }

.tkptabs { display: flex; gap: 2px; margin-top: 11px; }
.tkptab {
  border: 1px solid transparent; border-bottom: 0; background: none;
  font: inherit; font-size: 12.5px; font-weight: 550; color: var(--zacht);
  padding: 7px 12px; border-radius: 8px 8px 0 0; cursor: pointer;
}
.tkptab:hover { color: var(--tekst); }
.tkptab.aan {
  background: var(--bg); color: var(--tekst); border-color: var(--rand);
  margin-bottom: -1px;
}
.tkplijf { flex: 1; min-height: 0; overflow-y: auto; padding: 13px 15px 20px; }

.tkvakkop { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; }
.tkvakkop h3 { margin: 0; font-size: 12.5px; font-weight: 650; }
.tkptelt {
  margin-left: auto; color: var(--zacht); font-size: 12px; text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Kiezen is toevoegen: geen knop ernaast voor iets wat je tien keer per terrein
   doet. */
.tkerbij, .tkkies {
  width: 100%; margin-bottom: 4px; padding: 6px 10px; font: inherit;
  font-size: 13px; border: 1px dashed var(--rand-sterk); border-radius: 8px;
  background: var(--bg); color: var(--accent); cursor: pointer;
  display: flex; align-items: center; gap: 7px; font-weight: 550;
}
.tkerbij:hover, .tkkies:hover { border-color: var(--accent);
                                background: var(--accent-zacht); }

/* De zoekregel waarmee je een artikel toevoegt. Eén veld, en typen zoekt
   meteen -- bij tweeënvijftig artikelen is typen sneller dan kijken. */
.tkzoekbak { position: relative; margin-bottom: 4px; }
.tkzoek {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  border: 1px solid var(--rand-sterk); border-radius: 8px; background: var(--bg);
}
.tkzoek:focus-within, .tkzoek.open {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-zacht);
}
/* De lijst sluit onder het veld aan, dus de onderhoeken gaan eraf zodra hij
   openstaat -- anders zit er een rand tussen het veld en zijn eigen lijst. */
.tkzoek.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.tkzoek svg { color: var(--accent); flex: none; }
.tkzoek input {
  border: 0; outline: 0; background: none; font: inherit; font-size: 13px;
  flex: 1; min-width: 0; padding: 0; color: var(--tekst);
}
.tktoets {
  flex: none; border: 1px solid var(--rand); border-radius: 5px;
  padding: 0 5px; font-size: 11px; color: var(--zacht);
}

.tkkeuzen {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 4;
  background: var(--bg); border: 1px solid var(--accent); border-top: 0;
  border-radius: 0 0 8px 8px; box-shadow: var(--vorm-schaduw-op);
  max-height: 260px; overflow-y: auto;
}
.tkkeuze-rij {
  display: flex; align-items: baseline; gap: 9px; padding: 6px 10px;
  cursor: pointer; border-bottom: 1px solid var(--rand); font-size: 13px;
}
.tkkeuze-rij:last-child { border-bottom: 0; }
/* Aangewezen en niet aangewezen: met de pijltjes loop je erdoor, en dan moet te
   zien zijn welke Enter neemt. */
.tkkeuze-rij.op { background: var(--accent-zacht); }
.tkkeuze-rij.nieuw { color: var(--accent); font-weight: 550; }
.tkknaam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkkbij {
  margin-left: auto; color: var(--zacht); font-size: 11.5px; flex: none;
}

.tkgroepkop {
  display: flex; gap: 7px; padding: 12px 0 3px;
  border-bottom: 1px solid var(--rand);
}
.tkgroepkop span:first-child {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--zacht); font-weight: 650;
}
.tkgroepkop .op {
  margin-left: auto; color: var(--zacht); font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.tkregel {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) 26px; gap: 9px;
  align-items: center; padding: 5px 0; border-bottom: 1px solid var(--rand);
}
.tkregel:last-child { border-bottom: 0; }
.tkregel:hover { background: var(--vlak); }
.tkaantal {
  text-align: right; font-variant-numeric: tabular-nums; font-size: 13px;
}
.tkaantal.let { color: var(--amber); font-weight: 650; }
.tkwat { min-width: 0; }
.tknaam { display: block; overflow: hidden; text-overflow: ellipsis;
          white-space: nowrap; }
.tkvan { color: var(--zacht); font-size: 11.5px; }

/* Wie een regel brengt. Stil zolang het de leverancier van het artikel is; met
   nadruk zodra er is afgeweken, want dan is het een keuze die iemand heeft
   gemaakt en die bepaalt waar het ding na afloop heen terug moet. */
.tklev {
  display: block; width: 100%; border-color: transparent; background: none;
  padding: 1px 2px; font-size: 11.5px; color: var(--zacht); min-height: 0;
  margin-top: 1px;
}
.tklev:hover { border-color: var(--rand); background: var(--bg); }
.tklev:focus { border-color: var(--accent); background: var(--bg); }
.tklev.eigen { color: var(--tekst); font-weight: 600; }
.tkvan.eigen { color: var(--tekst); font-weight: 600; }

.tkkeuzerij { display: flex; gap: 6px; flex-wrap: wrap; }
.tkkeuze {
  padding: 5px 11px; border: 1px solid var(--rand); border-radius: 8px;
  background: var(--bg); font: inherit; font-size: 12.5px; cursor: pointer;
  color: var(--tekst);
}
.tkkeuze:hover:not(:disabled) { border-color: var(--rand-sterk); }
.tkkeuze.aan {
  background: var(--accent); border-color: var(--accent); color: #fff;
  font-weight: 550;
}
.tkkeuze:disabled { cursor: default; opacity: .7; }

/* Een opmerkingveld in het paneel. Twee regels hoog: genoeg voor "de 63A moet
   aan de achterkant liggen" en niet zoveel dat het paneel eruitziet als een
   formulier. Hij groeit niet mee -- dan verspringt alles eronder terwijl je
   typt. */
.tkopmerking {
  width: 100%; font: inherit; font-size: 12.5px; padding: 6px 8px;
  border: 1px solid var(--rand); border-radius: 8px; background: var(--bg);
  color: var(--tekst); resize: vertical; min-height: 44px;
}
.tkopmerking:focus { outline: none; border-color: var(--accent); }
.tkopmerking:disabled { background: var(--vlak); color: var(--zacht); }

/* Een bolletje dat je met de middelste knop verplaatst. Nu pas het kruis: je
   bent aan het slepen, en dat is wat het betekent. */
.tkpin.pakt, .kaartvlak.sleept, .kaartvlak.sleept .tkpin { cursor: move; }
.tkpin.pakt .stip { box-shadow: 0 0 0 4px var(--accent-zacht),
                                0 2px 7px rgba(0,0,0,.45); }

.tkleeg { color: var(--zacht); font-size: 12.5px; margin: 10px 0 0; }

.blokinfo {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: 5px 12px; margin: 0 0 14px;
}
.blokinfo dt { font-size: 12px; color: var(--zacht); padding-top: 1px; }
.blokinfo dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.blokinfo dd a { color: var(--accent); }
.kleurenrij { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 7px; }

/* De rij dagdeelknoppen in het paneel. Vier knopjes naast elkaar, en op een
   smal paneel netjes onder elkaar verder. */
.dagdeelrij { display: flex; gap: 5px; flex-wrap: wrap; margin: 6px 0; }

/* Een groep banen, zoals een map in Cubase -- maar dan als tussenkopje en niet
   als baan.
 *
 * Hij stond er eerst als een baan als alle andere: een naam op vijftien pixels
 * met een grijze vulling en een lege strook ernaast. Twee groepen kostten zo
 * zesenzestig pixels zonder dat er iets in stond, en in een tijdbalk is elke
 * pixel die niet naar de tijdas gaat er een te veel.
 *
 * Nu staat hij in dezelfde kolom als *Wie* en in dezelfde letter als het kopje
 * *Wie* zelf. Dat is geen toeval maar de bedoeling: het is een kop boven een
 * kolom en geen regel in de balk. De knop is de hele naamkolom -- je klikt hem
 * open met het driehoekje of met de naam, en dat is hetzelfde gebaar. */
.groepbaan { border-bottom: 0; }
.groepbaan > .groepnaam {
  flex-direction: row; align-items: center; gap: 5px;
  padding: 3px 10px 2px; background: var(--bg);
  border: 0; border-right: 1px solid var(--rand-sterk);
  cursor: pointer; text-align: left; font: inherit; font-size: 10px;
  letter-spacing: .07em; text-transform: uppercase; font-weight: 700;
  color: var(--zacht);
}
.groepbaan > .groepnaam:hover { color: var(--accent); }
.groepbaan > .groepnaam:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.groepbaan .vouw { font-size: 9px; width: 8px; }
.groepbaan .baanaantal { font-weight: 400; letter-spacing: 0; text-transform: none; }
/* Openstaand is de strook niets: geen roosterlijnen, alleen de hoogte van de
   regel zelf. */
.groepbaan.open > .baanspoor { min-height: 0; height: 19px; }
.groepbaan.open > .baanspoor .kolom { border-right-color: transparent; }
/* De banen van een groep springen in en hangen aan een haarlijntje, zodat je
   ziet waar de groep ophoudt zonder dat er een balk omheen hoeft. */
.tijdbaan.ingesprongen > .baannaam { padding-left: 20px; }
.tijdbaan.ingesprongen > .baannaam::before {
  content: ""; position: absolute; left: 10px; top: 0; bottom: 0;
  border-left: 1px solid var(--rand);
}
.dagdeelrij .knop { padding: 4px 9px; font-size: 13px; }

/* Het menu onder de rechtermuisknop. Hij hangt aan het scherm en niet aan de
   balk, want de balk schuift onder hem door. */
.zwevendmenu {
  position: fixed; z-index: var(--laag-zwevend); min-width: 178px;
  padding: 5px;
  background: var(--bg); border: 1px solid var(--rand); border-radius: 9px;
  box-shadow: 0 8px 26px rgba(0,0,0,.22);
}
.zwevendmenu .menukop {
  padding: 4px 8px 6px; font-size: 12px; color: var(--zacht);
  border-bottom: 1px solid var(--rand); margin-bottom: 4px;
  max-width: 260px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.zwevendmenu .menuitem {
  display: block; width: 100%; text-align: left; padding: 7px 9px;
  background: none; border: 0; border-radius: 6px; cursor: pointer;
  font: inherit; color: var(--tekst);
}
.zwevendmenu .menuitem:hover { background: var(--vlak); }
/* Een regel die er staat maar nu niets doet; de reden staat in de zweeftekst. */
.zwevendmenu .menuitem[disabled] { color: var(--zacht); cursor: default; }
.zwevendmenu .menuitem[disabled]:hover { background: none; }
.zwevendmenu .menuitem.gevaar { color: var(--rood); }
.zwevendmenu .menustreep { border: 0; border-top: 1px solid var(--rand); margin: 4px 2px; }
.zwevendmenu .menukleur { padding: 3px 8px 5px; }
.zwevendmenu .menukleur .kopje { margin-top: 0; }

@media (max-width: 1000px) {
  .tijdpaneel {
    position: fixed; right: 0; top: 0; bottom: 0; width: min(320px, 92vw);
    box-shadow: var(--vorm-schaduw-op); z-index: 40;
  }
  .dagregel { grid-template-columns: 86px 6px minmax(0, 1fr); }
  .dagregel .wie, .dagregel .waar, .dagregel .soortmerk { display: none; }
}

/* Het streepje onder een blok: waar het op de dag valt. Vol als er een tijd
   staat, gestreept als het alleen een dagdeel is -- want dan weten we het
   ongeveer en niet precies. */
.blokspoor { display: block; position: relative; height: 3px; margin-top: 4px; border-radius: 2px; background: var(--rand); }
.blokspoor > i { position: absolute; top: 0; height: 3px; border-radius: 2px; background: var(--rand-sterk); }
.blokspoor > i.vaag { opacity: .45; }
.blokmerk { float: right; color: var(--zacht); font-size: 11px; }

/* De filterknoppen boven de balk. */
.soortzeef { flex-wrap: wrap; margin-bottom: 10px; }

/* Een blok is zacht waar de afspraak vaag is en scherp waar er een tijd staat.
   Alleen tussen twee scherpe blokken is een tijdsbotsing een echte botsing, en
   dat verschil hoort te zien te zijn zonder erop te klikken. */
.blok { display: block; width: 100%; margin-bottom: 4px; padding: 4px 7px; border-radius: 5px; border: 1px solid var(--rand-sterk); background: var(--vlak); font: inherit; font-size: 12px; color: var(--tekst); text-align: left; cursor: pointer; }
.blok:hover { border-color: var(--accent); }
.blok.zacht { border-style: dashed; opacity: .88; }
.blok.scherp { border-style: solid; }
.bloktijd { display: block; font-size: 11px; color: var(--zacht); font-variant-numeric: tabular-nums; }
.blokwat { display: block; }

/* De soort uit de filterkolom van het draaiboek, als kleurrandje links. */
/* De kleur van een soort staat bij de soort en niet hier: sinds de soorten
   zelf te maken zijn, zou een nieuwe soort geen klasse hebben en dus kleurloos
   uit de balk komen. De balk zet hem als stijl op het blok. */

/* De dagweergave: chronologisch, om af te drukken. */
.dagregel { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 5px 0; border-bottom: 1px solid var(--rand); }
.dagtijd { min-width: 90px; font-size: 12px; color: var(--zacht); font-variant-numeric: tabular-nums; }
.dagwat { font-weight: 600; }

/* Het sleepvak voor een mail op een dossier (A5).
   Een gestippelde rand zegt "hier mag iets in" zonder dat er tekst bij hoeft;
   `erover` is de bevestiging dat de browser het bestand werkelijk vasthoudt --
   zonder dat laat je iets los en gebeurt er ogenschijnlijk niets. */
.sleepvak {
  border: 2px dashed var(--rand-sterk);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  background: var(--vlak);
}
.sleepvak.erover {
  border-color: var(--accent);
  background: var(--accent-zacht);
}


/* -- kleine hulpmiddelen -------------------------------------------------- */

/* Een strook cijfers boven een lijst: het antwoord op "hoe sta ik ervoor"
   zonder dat je de lijst hoeft te lezen. */
.kerncijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kerncijfer { padding: 11px 14px; border: 1px solid var(--rand); border-radius: var(--vorm-rond); background: var(--bg); box-shadow: var(--vorm-schaduw); }
.kerncijfer .kop { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--zacht); }
.kerncijfer .waarde { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kerncijfer.let .waarde { color: var(--rood); }

/* Een uitlegregel onder een kop. Kort, en alleen waar het scherm iets doet dat
   je niet aan de knoppen ziet. */
.uitleg { color: var(--zacht); max-width: 70ch; margin: 0 0 14px; }

/* Een staal in de kiezer. Geen tekstlabel met een kleurnaam erin: "turquoise"
   zegt niets over hoe het scherm eruit gaat zien, en een vierkantje wel. */
.staal {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: 6px;
  border: 1px solid var(--rand);
  vertical-align: middle;
}
.staal span { width: 12px; height: 12px; border-radius: 3px; }

/* -- de dagen van een productie ------------------------------------------- */

/* Eén regel per eventdag: hoe hij heet, en hoe laat hij loopt. De naam wordt
   gerekend uit de eerste dag plus het dagnummer, dus hier valt niets te
   typen — alleen de tijden. */
.dagregel { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--rand); }
.dagregel:first-child { border-top: 0; }
.dagnaam { flex: 1; min-width: 150px; }
.tijdvak { display: flex; align-items: center; gap: 6px; }
.tijdvak input { width: 82px; min-width: 0; text-align: center; }
/* De notitie bij een dag, op een eigen regel onder de tijden: ze is langer dan
   een tijd, en naast de tijden werd ze op een telefoon een vak van twee
   letters. */
.dagregel input.dagnotitie { flex-basis: 100%; min-width: 0; font-size: 12.5px; min-height: 26px; padding: 3px 8px; }
/* Opbouw en afbouw: uit de planning, alleen te lezen. Zachter dan een
   eventdag, zodat je ziet dat hier niets te typen valt. */
.dagregel.venster { color: var(--zacht); }
.dagregel.venster b { font-weight: 550; }

/* Deze editie in twee kolommen: wat en voor wie, wanneer en waar. Ze vallen
   onder elkaar zodra er geen 2 × 300px meer past, zonder mediaquery, want de
   ruimte hangt af van de zijbalk en niet alleen van het scherm. */
.kaartje.editieformulier { max-width: 980px; }
.editiekolommen { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 4px 28px; }
.editiekolom { display: flex; flex-direction: column; min-width: 0; }
.editiekolom .kolomkop {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  color: var(--zacht); border-bottom: 1px solid var(--rand); padding-bottom: 3px; margin: 6px 0 10px;
}
/* De ? achter een label: klein, rond, en duidelijk een knop. */
.uitlegvraag {
  font: inherit; font-size: 10.5px; line-height: 1; width: 17px; height: 17px; padding: 0;
  border-radius: 50%; border: 1px solid var(--rand-sterk); background: var(--bg);
  color: var(--zacht); cursor: pointer; margin-left: 5px; vertical-align: 1px;
}
.uitlegvraag[aria-expanded="true"] { background: var(--accent-zacht); color: var(--accent); border-color: var(--accent); }
.uitlegvraag:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Het label van een veld op het productiescherm, met rechts waar het in het
   plan staat. Klein en zacht: het is een wegwijzer, geen tweede knop. */
.veldkop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.naarplan { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.planknop {
  font: inherit; font-size: 11.5px; line-height: 1.5; cursor: pointer;
  color: var(--accent); background: var(--accent-zacht);
  border: 0; border-radius: 5px; padding: 0 7px; white-space: nowrap;
}
.planknop:hover { text-decoration: underline; }
.planknop:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Onder het bezoekersaantal: de rekenregels die erop leunen. Een rooster dat
   op een telefoon naar twee kolommen gaat, en de som klein eronder zoals in
   het plan. */
.getallenrooster { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 8px; }
.rekengetal {
  display: flex; flex-direction: column; gap: 1px; padding: 7px 10px;
  border: 1px solid var(--rand); border-radius: var(--vorm-rond-klein); background: var(--bg);
}
.rekengetal b { font-size: 16px; font-variant-numeric: tabular-nums; }
.rekengetal .som { font-size: 11px; color: var(--zacht); line-height: 1.35; }
.rekengetal.fout { border-color: var(--rood); background: var(--rood-zacht); }
.rekengetal.fout b { color: var(--rood); }
.bezoekmelding { margin-top: 8px; font-size: 12.5px; color: var(--rood); }
.bezoekmelding .planknop { margin-left: 6px; }

/* Bovenaan een afgesloten editie. Grijs en niet rood: er is niets mis, het
   festival is geweest. */
.afgeslotenband {
  display: flex; justify-content: space-between; align-items: center; gap: 8px 12px;
  flex-wrap: wrap; max-width: 620px; margin: 4px 0 14px; padding: 9px 12px;
  border: 1px solid var(--rand-sterk); border-radius: var(--vorm-rond-klein);
  background: var(--vlak); font-size: 13px;
}

/* De kenmerken van een editie: een vraag links, de knoppen rechts. Op een
   telefoon onder elkaar, anders wordt de vraag een kolom van drie letters. */
.kenmerklijst { display: flex; flex-direction: column; gap: 8px; }
.kenmerkregel { display: flex; justify-content: space-between; align-items: center; gap: 6px 12px; flex-wrap: wrap; }

/* Bij een starttekst: past hij bij deze editie? Groen als hij past, zacht als
   hij niet past -- dat is geen fout, alleen minder waarschijnlijk. */
.pastmerk { font-size: 11.5px; border-radius: 999px; padding: 0 8px; white-space: nowrap; font-weight: 500; }
.pastmerk.ja { background: color-mix(in srgb, var(--groen) 14%, var(--bg)); color: var(--groen); }
.pastmerk.nee { background: var(--vlak); color: var(--zacht); }
.kaartje.starttekst.past-niet { opacity: .72; }

/* De vraag voordat dag 0 verzet wordt. Amber en geen rood: er is niets mis,
   maar er gebeurt meer dan je op dit scherm ziet. */
.verzetvraag {
  display: flex; flex-direction: column; gap: 7px; margin-top: 8px;
  padding: 9px 11px; border-radius: var(--vorm-rond-klein);
  border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--rand));
  background: color-mix(in srgb, var(--amber) 9%, var(--bg));
  font-size: 13px;
}
.verzetvraag .vinkregel { font-size: 13px; }
/* `display: flex` hierboven wint van het `hidden`-attribuut; zonder deze
   regel stond er een leeg amber vak onder elke eerste dag. */
.verzetvraag[hidden] { display: none; }

/* -- een cel die een dialoog opent ---------------------------------------- */

/* Sommige waarden zijn geen veld maar een verzameling: op welke dagen een
   kaart geldt, hoe de btw over het kaartje verdeeld is. Die passen niet in
   een invoervak, dus staat er wat het is en klik je erop om het te wijzigen. */
.cellknop {
  max-width: 100%;
  padding: 2px 4px;
  border: 0;
  border-radius: var(--vorm-rond-klein);
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cellknop:hover { background: var(--vlak); text-decoration: underline; }
.cellknop:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Eén regel van de btw-verdeling: welk deel van de kaart tegen welk tarief. */
.btwregel { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 6px 0; }
.btwregel > span:first-child { min-width: 88px; }
span.let { color: var(--rood); }

/* -- een object, opengeklapt ---------------------------------------------- */

/* De gegevens van een object of een soort: twee kolommen waar het past, één
   waar het niet past. Elk veld bewaart zichzelf als je het verlaat. */
.objectvelden { margin: 8px 0 10px; padding: 10px; border-radius: var(--vorm-rond-klein); background: var(--vlak); }
.veldraster { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 16px; }
.veldraster .veld { margin: 0; }
.maatvak { display: flex; align-items: center; gap: 6px; }
.maatvak input { width: 76px; min-width: 0; text-align: right; }

/* Eén behoefteregel, bewerkbaar: aantal, kant, watt, water, afvoer. Wat niet
   past wikkelt naar de volgende regel in plaats van de kaart op te rekken. */
.behoefteregel { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 3px 0; }
.behoefteregel input { min-height: 26px; padding: 2px 6px; text-align: right; }
.behoeftenaam { flex: 1 1 150px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eenheidvak { display: flex; align-items: center; gap: 4px; }
.smalkeuze { width: auto; min-width: 90px; min-height: 26px; padding: 2px 6px; }

/* -- de leidraad in de bewerkstand ---------------------------------------- */

/* Een stap die je naar zijn scherm brengt. Onderstreept bij hover en niet
   altijd: de handleiding is om te lezen, niet om doorheen te klikken. */
.stapheen { color: inherit; text-decoration: none; cursor: pointer; }
.stapheen:hover { color: var(--accent); text-decoration: underline; }

.stapbewerk { padding: 8px; margin: 6px 0; border-radius: var(--vorm-rond-klein); background: var(--vlak); }
.stapbewerk .knoppenrij { gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.stapbewerk input, .stapbewerk textarea { min-height: 28px; padding: 3px 7px; }

/* Eén soort schemaregel: zijn kleur, zijn naam, en hoeveel regels eraan
   hangen. Dat laatste hoor je te weten voordat je hem weghaalt. */
.soortregel { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-top: 1px solid var(--rand); }
.soortregel:first-child { border-top: 0; }
.soortstip { width: 12px; height: 12px; border-radius: 3px; background: var(--rand-sterk); flex: none; }

/* Eén binnengekomen mail, met het vermoeden erbij waar hij bij hoort. */
/* -- het postvak als drie kolommen ---------------------------------------- */

/*
 * Wat je ermee doet, wat er ligt, en wat erin staat.
 *
 * Hier stonden kaarten onder elkaar, met in elke kaart zijn eigen knoppen. Dat
 * leest prettig bij drie mails en het valt uit elkaar bij dertig: de knop
 * Opbergen staat bij de vierde mail ergens anders op het scherm dan bij de
 * eerste, dus je muis zoekt elke keer opnieuw. En er passen er vier in beeld
 * waar een lijst er veertig toont.
 *
 * Drie kolommen dus, zoals elk mailprogramma -- maar de linkerkolom is geen
 * mappenboom. Die plek is hier meer waard voor *wat gebeurt er met deze mail*:
 * dezelfde knoppen, altijd op dezelfde plek, met een letter erbij voor wie zijn
 * hand niet wil verplaatsen.
 */
/* Het postvak vult het frame, net als de planning en de kaart. Geen eigen
   hoogte meer uitrekenen met `calc(100vh - 215px)`: dat getal klopte bij een
   kop van twee regels en bij drie niet meer. */
/* `hidden` doet niets tegen een klasse die zelf `display` zet, zoals `.knop`.
   Binnen het postvak verbergt het scherm knoppen en formulieren met dat
   attribuut, dus hier wint het. Alleen hier: elders in de app kan iets op het
   gewone gedrag leunen. */
.postvenster [hidden] { display: none !important; }

/* Twee kolommen onder een balk: wat je ermee doet bovenaan, daaronder wat er
   ligt en wat erin staat.
 *
 * De handelingen stonden in een eigen kolom links. Dat kostte 212 pixels
 * breedte aan knoppen die maar een paar regels hoog zijn, en de mail kreeg wat
 * overbleef. Als balk staan ze nog steeds op dezelfde plek bij elke mail.
 *
 * DE LIJST SCHUIFT IN ZICHZELF
 * De tweede rij is precies zo hoog als wat er van het frame over is
 * (`minmax(0, 1fr)`). Zonder dat groeide de rij met de lijst mee, werd de
 * pagina zo lang als het aantal mails, en schoof de mail zelf uit beeld. */
.postvenster {
  display: grid;
  grid-template-columns: 316px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  background: var(--bg);
}
.postvenster .postlijst, .postvenster .postlezen { min-height: 0; }

/* De opmaak van een mail, in een afgeschermd venster. Vult het leesvlak en
   schuift binnen zichzelf: zonder scriptrechten kan niemand van buitenaf
   meten hoe hoog de inhoud is, en dat is de prijs die we ervoor betalen. */
.postopmaak {
  width: 100%;
  min-height: 320px;
  flex: 1;
  border: 0;
  background: #fff;
  display: block;
}
.postplaatjes {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 0 0; border-top: 1px solid var(--rand); margin-top: 8px;
}

/* Het tandwiel: een vierkante knop met alleen een ikoon erin. */
.knop.tandwiel { padding: 5px 7px; }
.knop.tandwiel svg { display: block; }

.postdoen {
  grid-column: 1 / -1;
  border-bottom: 1px solid var(--rand);
  padding: 9px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 0;
}
.postdoen h3 {
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--zacht); margin: 0; font-weight: 600; white-space: nowrap;
}
/* Elke groep een eigen vak in de balk: het kopje erboven, de knoppen op één
   regel ernaast, en een streep tussen de groepen. Het kopje staat los boven de
   rij, zodat een groep niet over twee regels breekt. */
.postdoen .groep {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 6px;
  position: relative; padding: 18px 18px 0;
}
.postdoen .groep > h3 { position: absolute; top: 0; left: 18px; }
.postdoen .groep:first-of-type { padding-left: 0; }
.postdoen .groep:first-of-type > h3 { left: 0; }
.postdoen .groep + .groep { border-left: 1px solid var(--rand); }
/* Een uitleg in een groep ("nog niet toegewezen") blijft smal naast de knop. */
.postdoen .groep > .klein { max-width: 230px; line-height: 1.3; }
.postdoen .knop { justify-content: flex-start; }
.postdoen .dossierzoeker { width: 260px; }
/* De treffers hangen onder het zoekveld, over de lijst heen: in een balk zou
   een lijst die meegroeit de hele balk -- en alles eronder -- laten springen. */
.postdoen .dossierzoeker { position: relative; overflow: visible; }
.postdoen .dossierzoeker .treffers {
  position: absolute; left: -1px; right: -1px; top: 100%; z-index: 20;
  background: var(--veld-bg); border: 1px solid var(--veld-rand);
  border-radius: 0 0 var(--vorm-rond-klein) var(--vorm-rond-klein);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .14);
}
/* Waarom de app niets voorstelt: een eigen regel onder de balk. */
.postdoen .postraad { flex-basis: 100%; }
/* De leverancier onder het dossier en niet ernaast: in een kolom van 212 pixels
   drukte hij de naam weg, en de naam is waar je op zoekt. */
.dossierzoeker .treffer { flex-wrap: wrap; gap: 0 8px; }
.dossierzoeker .trefferbij { flex-basis: 100%; overflow: hidden; text-overflow: ellipsis; }

/* De letter naast een knop. Een mailprogramma is snel doordat je hand blijft
   liggen; zonder dat het ergens staat weet niemand dat het kan. */
.toets {
  margin-left: auto; font-size: 10.5px; padding: 0 5px; border-radius: 4px;
  border: 1px solid var(--rand); color: var(--zacht); background: var(--vlak);
}
.knop.hoofd .toets {
  border-color: rgba(255, 255, 255, .45); color: #fff;
  background: rgba(255, 255, 255, .14);
}

.postlijst {
  border-right: 1px solid var(--rand);
  display: flex; flex-direction: column; min-width: 0;
}
.postlijstkop {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  padding: 7px 9px; border-bottom: 1px solid var(--rand); background: var(--vlak);
}
.postlijstkop input[type=search] { width: 100%; }
/* De standen en de twee filters op één rij, die mag omslaan: de kolom is 316
   pixels, en vier standen met twee filters passen daar net niet naast elkaar. */
.poststanden { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.poststanden .tabs button { font-size: 12px; padding: 3px 8px; }
.posttelling { display: flex; align-items: center; gap: 6px; }
.posttelling .toets { margin-left: auto; }
/* Een filter is aan of uit. Gestippeld als hij uit staat, zodat hij leest als
   een mogelijkheid en niet als een knop die al iets doet. */
.postzeef {
  font: inherit; font-size: 11.5px; padding: 1px 9px; border-radius: 999px;
  border: 1px dashed var(--rand-sterk); background: var(--bg);
  color: var(--zacht); cursor: pointer;
}
.postzeef.aan {
  border-style: solid; border-color: var(--accent); color: var(--accent);
  background: var(--accent-zacht);
}
.postzeef:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.postlijstkop .knop { padding: 3px 9px; min-height: 26px; font-size: 12.5px; }
.postregels { overflow-y: auto; flex: 1; }
/* Het kopje boven wat de app vanzelf opborg. Dezelfde vorm als de kopjes in
   een zoekveld: een indeling van de lijst, geen regel. */
.postgroepkop {
  font-size: 10.5px; font-weight: 650; letter-spacing: .08em;
  text-transform: uppercase; color: var(--zacht); padding: 10px 11px 4px;
  border-bottom: 1px solid var(--rand); background: var(--vlak);
}

.postregel {
  display: block; width: 100%; text-align: left; font: inherit;
  color: var(--tekst); background: none; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--rand);
  border-left: 3px solid transparent; padding: 8px 11px;
}
.postregel:hover { background: var(--vlak); }
.postregel.aan { background: var(--accent-zacht); border-left-color: var(--accent); }
.postregel:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.postregel .bovenop { display: flex; gap: 8px; align-items: baseline; }
.postregel .van { font-weight: 600; font-size: 13px; }
.postregel .tijd { margin-left: auto; font-size: 11.5px; color: var(--zacht); white-space: nowrap; }
.postregel .van,
.postregel .onderwerp,
.postregel .staart { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.postregel .onderwerp { font-size: 13px; }
.postregel .staart { font-size: 11.5px; color: var(--zacht); }
/* Afgehandeld: opgeborgen, weggezet of verplaatst. Stiller, niet verborgen. */
.postregel.af .van, .postregel.af .onderwerp { font-weight: 400; color: var(--zacht); }
.postregel .stip { width: 7px; height: 7px; border-radius: 99px; background: var(--accent); flex: none; }
.postregel.af .stip { background: transparent; border: 1px solid var(--rand-sterk); }

.postlezen { display: flex; flex-direction: column; min-width: 0; }
.postkop { padding: 13px 17px 11px; border-bottom: 1px solid var(--rand); }
.postkop h3 { margin: 0 0 5px; font-size: 16px; line-height: 1.35; }
.postadres {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  font-size: 13px; color: var(--zacht);
}
/* Wie het is: een eigen vlakje onder het adres, zodat het leest als wat de
   app erbij weet en niet als nog een kopregel van de mail. */
.postwie {
  margin-top: 8px; padding: 7px 10px; border: 1px solid var(--rand);
  border-radius: var(--vorm-rond-klein); background: var(--vlak);
  font-size: 13px; display: flex; flex-direction: column; gap: 5px;
}
.postwierij { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.postwierij .zacht { color: var(--zacht); }
.postwieform { display: flex; flex-direction: column; gap: 6px; max-width: 360px; }
.postwieform .veld { margin: 0; }
.posttekst {
  padding: 15px 17px; overflow-y: auto; flex: 1;
  white-space: pre-wrap; word-break: break-word;
  font-size: 13.5px; line-height: 1.55;
}
/* Met opmaak erin is dit geen tekstvlak meer maar een kozijn: geen binnenmarge
   en geen `pre-wrap`, want het venster erin brengt zijn eigen opmaak mee. */
.posttekst.metopmaak {
  display: flex; flex-direction: column; padding: 0;
  white-space: normal; overflow: hidden;
}
.posttekst.metopmaak .postplaatjes { padding: 7px 17px; margin: 0; }
.postbijlagen {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 8px 17px; border-top: 1px solid var(--rand);
  background: var(--vlak); font-size: 12.5px; color: var(--zacht);
}
.postantwoord { border-top: 1px solid var(--rand); padding: 10px 17px; background: var(--vlak); }
/* Een fout bij lezen of opbergen, in het leesvlak zelf. Rood omlijnd en niet
   rood gevuld: het is uitleg met een knop, geen alarm. */
.postfout {
  margin: 4px 0; padding: 10px 12px; border: 1px solid var(--rood);
  border-radius: var(--vorm-rond-klein); background: var(--rood-zacht);
  display: flex; flex-direction: column; gap: 6px; white-space: normal;
}
.postantwoord textarea { width: 100%; min-height: 76px; resize: vertical; }
.postantwoord .onder { display: flex; gap: 8px; align-items: center; margin-top: 7px; flex-wrap: wrap; }

/* De mappenkeuze bij de instellingen van een postvak. Een productiemailbox
   heeft er honderden, dus een zoekvak en een eigen schuifbalk. */
.mappenkiezer {
  border: 1px solid var(--rand); border-radius: var(--vorm-rond-klein);
  max-height: 260px; overflow-y: auto; background: var(--bg);
}
.mappenkiezer label {
  display: flex; align-items: center; gap: 8px; padding: 4px 9px;
  font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--rand);
}
.mappenkiezer label:last-child { border-bottom: 0; }
.mappenkiezer label:hover { background: var(--vlak); }
.mappenkiezer input { width: 15px; height: 15px; min-height: 0; flex: none; }
.mappenkiezer .mapnaam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* De terugknop en de balk onderaan bestaan alleen op een smal scherm. */
.postterug, .postonder, .postdoenweg { display: none; }

@media (max-width: 1100px) {
  /* Lijst óf mail.
   *
   * Hier stonden de drie kolommen onder elkaar: eerst de knoppen, die gaan
   * over een mail die je nog niet had gekozen, dan een lijst van 300 pixels,
   * dan de mail. Eén lange pagina met drie schuifvlakken, en op het terrein
   * zoek je welk vlak schuift. Nu is het een lijst, en een mail kiezen opent
   * hem over de hele breedte. De handelingen staan onderaan, onder je duim. */
  .postvenster {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
  .postvenster .postdoen, .postvenster .postlezen { display: none; }
  /* De mail past in het venster en schuift in zichzelf: anders duwen het
     antwoordvak en de kop de balk onderaan uit beeld, en is de duim zijn
     knoppen kwijt. */
  .postvenster.toontmail .postlezen { min-height: 0; overflow: hidden; }
  .postvenster.toontmail .posttekst { min-height: 0; }
  .postvenster.toontmail .postopmaak { min-height: 200px; }
  .postvenster.toontmail .postterug,
  .postvenster.toontmail .postkop,
  .postvenster.toontmail .postantwoord,
  .postvenster.toontmail .postonder { flex: none; }
  /* Het antwoordvak pas als je *Antwoord* tikt. Open nam het de helft van
     een telefoonscherm, en bleef er voor de mail zelf een regel over. */
  .postvenster.toontmail .postantwoord { display: none; }
  .postvenster.toontmail.antwoordt .postantwoord { display: block; }
  /* Tijdens het antwoorden heeft het vak zijn eigen knoppen; de balk zou het
     alleen verder de hoogte in duwen. */
  .postvenster.toontmail.antwoordt .postonder { display: none; }
  .postvenster .postlijst { border-right: 0; }
  .postvenster.toontmail .postlijst { display: none; }
  .postvenster.toontmail .postlezen { display: flex; }
  .postterug {
    display: flex; align-items: center; gap: 6px; padding: 6px 10px;
    border-bottom: 1px solid var(--rand); background: var(--vlak);
  }
  .postonder {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--rand); background: var(--vlak);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .postonder button {
    border: 0; background: none; color: var(--tekst); font: inherit;
    font-size: 12px; padding: 9px 2px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
  }
  .postonder button b { font-size: 16px; line-height: 1; }
  .postonder button:disabled { opacity: .4; cursor: default; }
  /* Opbergen op de telefoon: de knoppenkolom als onderblad, met het zoekveld
     erin. Dezelfde kolom als op een groot scherm, zodat er maar één plek is
     waar opbergen gebeurt. */
  .postvenster.toontdoen .postdoen {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    max-height: 75vh; overflow-y: auto; background: var(--bg);
    border-top: 1px solid var(--rand-sterk);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .18);
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    /* Op een groot scherm is dit een balk; als onderblad weer een kolom. */
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 13px;
  }
  .postvenster.toontdoen .postdoen .groep {
    display: block; padding: 0; border-left: 0;
  }
  .postvenster.toontdoen .postdoen h3 { margin-bottom: 6px; }
  .postvenster.toontdoen .postdoen .groep > h3 { position: static; }
  .postvenster.toontdoen .postdoen .groep > .klein { max-width: none; }
  .postvenster.toontdoen .postdoen .knop { width: 100%; }
  .postvenster.toontdoen .postdoen .knop + .knop { margin-top: 6px; }
  .postvenster.toontdoen .postdoen .dossierzoeker { width: 100%; }
  .postvenster.toontdoen .postdoen .dossierzoeker .treffers {
    position: static; border: 0; box-shadow: none;
  }
  .postvenster.toontdoen .postdoenweg { display: block; align-self: flex-end; }
  /* Op een telefoon is er geen toetsenbord om de letters op te drukken. */
  .posttelling .toets { display: none; }
}
button.knop.let { border-color: var(--rood); }

/* De mappen van een postvak: klikbaar, want overtikken van een naam als
   INBOX.INBOX gaat een keer fout. */
.mappenlijst { flex-wrap: wrap; gap: 5px; margin-top: 6px; max-height: 190px; overflow-y: auto; }
.mappenlijst .knop { font-size: 12px; min-height: 24px; padding: 2px 9px; }


/* De tekst van een binnengekomen mail.
 *
 * `pre-wrap` en niet `pre`: een mail is met de hand geschreven en breekt zijn
 * regels waar de schrijver dat deed, maar een plakregel van tweehonderd tekens
 * mag het scherm niet breed maken. En `word-break` omdat er in een mail altijd
 * een url staat die zelf langer is dan de kolom.
 *
 * De hoogte is begrensd met een eigen schuifbalk: een nieuwsbrief van veertig
 * schermen duwt anders alles wat eronder staat -- de knoppen waar het om gaat
 * -- buiten beeld.
 */
.mailvak {
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--rand);
  border-radius: 8px;
  background: var(--vlak);
}
.mailtekst {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 420px;
  overflow-y: auto;
  font-size: .95em;
  line-height: 1.45;
}


/* -- mailen: de lijst en het werk in één frame ----------------------------- */

/*
 * Links wat er klaarstaat, wat er verstuurd is en de sjablonen; rechts het
 * werk. Het scherm vult het frame, net als Postvak: een voorstel is een lijst
 * van vijfendertig ontvangers met een mail ernaast, en elke regel die naar een
 * titel gaat is een ontvanger minder in beeld. De kop van het scherm staat er
 * wel, want Mailen is niet een scherm waar je de hele dag in zit.
 */
main#scherm.vult.mailenbak { padding: 18px 22px 16px; gap: 10px; }
.mailenbanier { margin: 0; padding: 8px 12px; }
.mailen {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 12px;
}
.mailenlijst, .mailenwerk {
  background: var(--bg); border: 1px solid var(--rand);
  border-radius: var(--vorm-rond); box-shadow: var(--vorm-schaduw);
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
}
.mailenlijstkop { padding: 10px; border-bottom: 1px solid var(--rand); }
.mailenlijstkop .knop { width: 100%; justify-content: center; }
.mailenrol { overflow-y: auto; flex: 1; padding-bottom: 8px; }
.mailensectie {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--zacht); font-weight: 600; padding: 12px 12px 3px;
}
.mailensectie button {
  font: inherit; text-transform: none; letter-spacing: 0; font-size: 12px;
  background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0;
}
.mailenleeg { color: var(--zacht); font-size: 12.5px; padding: 6px 12px; }
.mailenitem {
  display: block; width: 100%; text-align: left; font: inherit;
  background: none; border: 0; border-left: 3px solid transparent;
  padding: 6px 12px 6px 9px; cursor: pointer; color: var(--tekst);
}
.mailenitem:hover { background: var(--vlak); }
.mailenitem.aan { background: var(--accent-zacht); border-left-color: var(--accent); }
.mailenitem:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mailenitem .naam, .mailenitem .meta {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mailenitem .meta { font-size: 11.5px; color: var(--zacht); }
.mailen .amber { color: var(--amber); }
.mailen .groen { color: var(--groen); }
.mailen .rood { color: var(--rood); }

/* Het werkvlak: een kop met de handelingen, en daaronder de ontvangers met de
   mail ernaast. */
.mailenkop {
  padding: 10px 14px; border-bottom: 1px solid var(--rand);
  display: flex; flex-direction: column; gap: 8px;
}
.mailenrij1 { display: flex; gap: 10px; align-items: flex-start; }
.mailentitels { flex: 1; min-width: 0; }
.mailentitel, .mailennaam { font-size: 16px; font-weight: 650; }
.mailennaam {
  width: 100%; border: 1px solid transparent; border-radius: 5px;
  padding: 1px 4px; margin-left: -5px; background: transparent; color: var(--tekst);
  font-family: inherit;
}
.mailennaam:hover, .mailennaam:focus { border-color: var(--rand-sterk); background: var(--veld-bg); color: var(--veld-tekst); }
.mailensub { font-size: 12px; color: var(--zacht); }
.mailensub a { color: var(--accent); text-decoration: none; }
.mailensub a:hover { text-decoration: underline; }
.mailenrij2 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.mailenbijl {
  display: inline-flex; gap: 5px; align-items: center; font-size: 12px;
  border: 1px solid var(--rand); border-radius: 99px; padding: 1px 9px; background: var(--vlak);
}
.mailenbalk {
  border-radius: var(--vorm-rond-klein); padding: 7px 10px; font-size: 12.5px;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.mailenbalk .knoppenrij { margin-left: auto; }
.mailenbalk a { color: inherit; font-weight: 600; }
.mailenbalk.vraag { border: 1px solid var(--accent); background: var(--accent-zacht); }
.mailenbalk.let {
  border: 1px solid color-mix(in srgb, var(--amber) 50%, var(--bg));
  background: color-mix(in srgb, var(--amber) 10%, var(--bg));
}
.mailenbalk.goed {
  border: 1px solid color-mix(in srgb, var(--groen) 50%, var(--bg));
  background: color-mix(in srgb, var(--groen) 10%, var(--bg));
}
.mailenbalk.fout { border: 1px solid color-mix(in srgb, var(--rood) 50%, var(--bg)); background: var(--rood-zacht); }
.mailentellers { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mailenteller {
  font: inherit; font-size: 12px; border-radius: 99px; padding: 1px 10px;
  background: var(--vlak); border: 1px solid var(--rand); color: var(--tekst); cursor: pointer;
}
.mailenteller.groen { color: var(--groen); }
.mailenteller.amber { color: var(--amber); }
.mailenteller.rood { color: var(--rood); }
.mailenteller[aria-pressed="true"] { background: var(--accent-zacht); border-color: var(--accent); }
.maileneigen { display: flex; flex-direction: column; gap: 4px; }
.maileneigen label { font-size: 11.5px; color: var(--zacht); }
.maileneigen textarea { width: 100%; resize: vertical; min-height: 44px; font: inherit; font-size: 13px; }
.maileneigen .knoppenrij { justify-content: flex-end; }
.mailenscheid { width: 1px; height: 16px; background: var(--rand); margin: 0 4px; }
.mailenvak {
  font: inherit; font-size: 11.5px; border: 1px solid var(--rand-sterk);
  border-radius: 5px; padding: 0 7px; background: var(--bg); color: var(--tekst); cursor: pointer;
}
.mailenvak.vol { background: var(--accent); border-color: var(--accent); color: #fff; }
.mailenvak.half { background: var(--accent-zacht); border-color: var(--accent); color: var(--accent); }
.mailenvak[disabled] { opacity: .45; cursor: default; }

.mailensplit { flex: 1; min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr); }
.mailenontv { border-right: 1px solid var(--rand); overflow-y: auto; }
.mailenregel {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 6px 12px; border-bottom: 1px solid var(--rand); cursor: pointer;
}
.mailenregel:hover { background: var(--vlak); }
.mailenregel.aan { background: var(--accent-zacht); }
.mailenregel:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mailenregel input { margin-top: 3px; }
.mailenstand { font-size: 11px; width: 66px; flex: none; margin-top: 2px; }
.mailenwie { flex: 1; min-width: 0; }
.mailenwie .n { display: flex; gap: 6px; align-items: baseline; }
.mailenwie .n b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailenwie .vak { font-size: 11px; color: var(--zacht); margin-left: auto; flex: none; }
.mailenwie .k { display: block; font-size: 11.5px; color: var(--zacht); }
.mailenwie .k.amber { color: var(--amber); }
.mailenwie .k.rood { color: var(--rood); }
.mailenregel.uit .n b { color: var(--zacht); }

.mailenlees { overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mailenkopregels { display: grid; grid-template-columns: 64px 1fr; gap: 2px 8px; font-size: 12.5px; margin: 0; }
.mailenkopregels dt { color: var(--zacht); }
.mailenkopregels dd { margin: 0; overflow-wrap: anywhere; }
/* De mail zoals hij aankomt: de regelovergangen van de tekst, en een lange
   link die de kolom niet breed maakt. */
.mailenbrief {
  border: 1px solid var(--rand); border-radius: var(--vorm-rond-klein);
  padding: 12px 14px; max-width: 76ch; background: var(--bg);
  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; font-size: 13px;
}
.mailenbrief .ond { font-weight: 650; padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid var(--rand); }
.mailenveld { background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 3px; }
.mailengat {
  background: color-mix(in srgb, var(--amber) 14%, var(--bg)); color: var(--amber);
  border-radius: 3px; padding: 0 3px; font-size: 12px;
}
.mailenbijlagen { display: flex; gap: 6px; flex-wrap: wrap; }
.mailenbijlagen span {
  display: inline-flex; gap: 5px; align-items: center; font-size: 12px;
  border: 1px solid var(--rand); border-radius: 6px; padding: 3px 8px; background: var(--vlak);
}

.maileneerder h3 {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--zacht); margin: 4px 0 4px; font-weight: 600;
}
.maileneerder .zacht { font-size: 12.5px; }
.mailenvorige {
  display: flex; gap: 10px; width: 100%; text-align: left; font: inherit; font-size: 12.5px;
  background: none; border: 0; padding: 3px 0; color: var(--tekst); cursor: pointer;
}
.mailenvorige:hover .nm { color: var(--accent); }
.mailenvorige .d { color: var(--zacht); width: 110px; flex: none; font-variant-numeric: tabular-nums; }
.mailenvorige .groen { color: var(--groen); }
.mailenvorige .rood { color: var(--rood); }
.mailenvorige .amber { color: var(--amber); }

/* Een sjabloon: links wat erin staat met het voorbeeld eronder, rechts de
   velden. `hidden` moet winnen van `display: flex` op een balk, anders blijft
   *nog niet bewaard* staan als het al bewaard is. */
.mailenbalk[hidden] { display: none; }
.mailensjabloon { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 260px; }
.mailensjlinks { overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mailensjlinks .veld { position: relative; }
.mailensjlinks .veld .hint { font-size: 11.5px; color: var(--zacht); }
.mailensjlinks input[type=text], .mailensjlinks textarea, .mailensjlinks select { width: 100%; }
.mailensjlinks textarea { resize: vertical; line-height: 1.5; font: inherit; font-size: 13px; }
.mailendrie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mailensjvelden {
  border-left: 1px solid var(--rand); overflow-y: auto; padding: 10px 12px; background: var(--vlak);
}
.mailensjvelden p { font-size: 11.5px; margin: 0 0 6px; }
.mailensjvelden h3 {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--zacht); margin: 12px 0 3px; font-weight: 600;
}
.mailenveldknop {
  display: block; width: 100%; text-align: left; font: inherit; background: none;
  border: 1px solid transparent; border-radius: 5px; padding: 3px 6px; cursor: pointer; color: var(--tekst);
}
.mailenveldknop:hover { background: var(--bg); border-color: var(--rand); }
.mailenveldknop code { color: var(--accent); font-size: 11.5px; }
.mailenveldknop span { display: block; font-size: 11px; color: var(--zacht); line-height: 1.35; }
.mailenveldknop[disabled] { opacity: .45; cursor: default; }
.mailensuggestie {
  position: absolute; z-index: 5; left: 0; top: 100%; margin-top: 2px; min-width: 300px;
  max-height: 230px; overflow-y: auto; padding: 3px; background: var(--bg);
  border: 1px solid var(--rand-sterk); border-radius: 6px; box-shadow: var(--vorm-schaduw-op);
}
.mailensuggestie button {
  display: flex; gap: 8px; width: 100%; text-align: left; font: inherit; font-size: 12px;
  background: none; border: 0; padding: 3px 7px; border-radius: 4px; cursor: pointer; color: var(--tekst);
}
.mailensuggestie button.eerste, .mailensuggestie button:hover { background: var(--accent-zacht); }
.mailensuggestie code { color: var(--accent); }
.mailensuggestie span { color: var(--zacht); }
.mailenvoorbeeldkop { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--zacht); margin-top: 6px; }
.mailenvoorbeeldkop select { width: auto; }
.mailenfout { background: var(--rood-zacht); color: var(--rood); border-radius: 3px; padding: 0 3px; font-size: 12px; }
.mailenplek {
  border: 1px dashed var(--rand-sterk); color: var(--zacht); border-radius: 3px;
  padding: 0 4px; font-size: 12px;
}

/* Nieuwe mail: de sjablonen als kaartjes, met wat ze doen erbij. */
.mailennieuw { padding: 14px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.mailennieuw h2 { margin: 0; }
.mailenkeuzes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.mailenkeuze {
  text-align: left; font: inherit; border: 1px solid var(--rand); border-radius: var(--vorm-rond);
  padding: 9px 11px; background: var(--bg); cursor: pointer; color: var(--tekst);
  display: flex; flex-direction: column; gap: 3px;
}
.mailenkeuze:hover { border-color: var(--rand-sterk); background: var(--vlak); }
.mailenkeuze span { font-size: 11.5px; color: var(--zacht); }

/* Smal: de lijst boven het werk, en het frame schuift als geheel. Mailen doe
   je achter de laptop, maar een blik op de telefoon of hij weg is hoort te
   kunnen. */
@media (max-width: 900px) {
  main#scherm.vult.mailenbak { overflow-y: auto; padding: 12px; }
  .mailen { grid-template-columns: 1fr; flex: none; }
  .mailenlijst { max-height: 260px; }
  .mailensplit { grid-template-columns: 1fr; }
  .mailenontv { border-right: 0; border-bottom: 1px solid var(--rand); max-height: 300px; }
  .mailenwerk { min-height: 70vh; }
  .mailenrij1 { flex-wrap: wrap; }
  .mailentitels { flex-basis: 100%; }
  .mailenrij2 select { max-width: 100%; }
  .mailensjabloon { grid-template-columns: 1fr; }
  .mailensjvelden { border-left: 0; border-top: 1px solid var(--rand); }
  .mailendrie { grid-template-columns: 1fr; }
}

/* -- mensen ---------------------------------------------------------------
   Hoe iemand binnenkomt, als chip. Met link is de gewone toestand en krijgt
   de accentkleur; nog geen link is een klus die open staat; ingetrokken is
   uit, en staat standaard niet eens in beeld. Ontwerp rechten, kaart 1. */
table.mensentabel td { vertical-align: middle; }
table.mensentabel .merkje { white-space: nowrap; }
table.mensentabel tr.uitgezet td { color: var(--zacht); }
.merkje.toegang-link { background: var(--accent-zacht); color: var(--accent); border-color: var(--accent); }
.merkje.toegang-geen_link { color: var(--amber); border-color: var(--amber); }
.merkje.toegang-beheerderscode { font-weight: 600; }
.merkje.toegang-ingetrokken { text-decoration: line-through; }
td.mensacties { white-space: nowrap; text-align: right; }
td.mensacties .knop { margin-left: 4px; }

/* -- toegang van één persoon ---------------------------------------------
   Per onderdeel een knoppenstrook geen / lezen / schrijven, en daaronder bij
   Planning en Crew het bereik als chips. Ontwerp rechten, kaart 2. */
.toegangkop { display: flex; justify-content: space-between; align-items: center;
  gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.toegangstart { display: inline-flex; align-items: center; gap: 6px; }
.toegangstart select { max-width: 220px; }
.toegangmelding { min-height: 18px; margin: 4px 0 8px; padding: 6px 10px;
  border-radius: 6px; background: var(--accent-zacht); color: var(--accent); }
.toegangmelding:empty { display: none; }
.toegangmelding.fout { background: var(--rood-zacht); color: var(--rood); }
.toegangkopje { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--zacht); font-weight: 600; padding-top: 12px; }
.toegangrij, .toegangschakel { display: flex; justify-content: space-between;
  align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--rand); }
.toegangschakel input { width: 16px; height: 16px; flex: none; }
.toegangnaam { min-width: 0; }
.segment { display: inline-flex; border: 1px solid var(--rand-sterk); border-radius: 6px;
  overflow: hidden; flex: none; }
.segknop { font: inherit; font-size: 12px; border: 0; border-left: 1px solid var(--rand);
  background: var(--bg); color: var(--zacht); padding: 3px 9px; cursor: pointer; }
.segknop:first-child { border-left: 0; }
.segknop.aan[data-stand="geen"] { background: var(--vlak); color: var(--tekst); font-weight: 600; }
.segknop.aan[data-stand="lezen"] { background: var(--accent-zacht); color: var(--accent); font-weight: 600; }
.segknop.aan[data-stand="schrijven"] { background: var(--accent); color: #fff; font-weight: 600; }
.segknop:disabled { opacity: .4; cursor: not-allowed; }
.segknop:focus-visible, .bereikchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.toegangbereik { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 4px 0 6px 14px; border-bottom: 1px solid var(--rand); }
.bereikchip { font: inherit; font-size: 11.5px; border-radius: 999px; padding: 1px 9px;
  border: 1px solid var(--rand-sterk); background: var(--bg); color: var(--zacht); cursor: pointer; }
.bereikchip.aan { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.mensenspoorkop { margin: 18px 0 6px; font-size: 14px; }

/* -- bekijk als ------------------------------------------------------------
   Amber, en bovenaan elk scherm: wie de app als een ander bekijkt, moet dat
   bij elke klik zien. Ontwerp rechten, kaart 7. */
.bekijkband { display: flex; justify-content: space-between; align-items: center;
  gap: 8px; flex-wrap: wrap; padding: 6px 14px; background: var(--amber);
  color: var(--op-amber); font-size: 13px;
  /* Bovenaan het werkvlak, dus met zijn ronde hoeken; de balk eronder krijgt
     dan rechte. Wit op het amber van de donkere kant was 2,4:1, vandaar
     `--op-amber`. */
  border-radius: var(--vorm-paneel) var(--vorm-paneel) 0 0; }
.bekijkband + #balk { border-radius: 0; }
.bekijkband .knop { background: rgba(255, 255, 255, .18); color: var(--op-amber);
  border-color: currentColor; }

/* -- plannen in je eigen deel ---------------------------------------------
   Wat buiten je fasen (Planning) of je groepen (Crew) valt, staat er als
   lezen: grijs, gearceerd, niet te pakken. De dagen buiten je fasen zijn in
   de achtergrond gearceerd. Ontwerp rechten, kaart 3 en 4. */
.tijdblok.lees {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--k, var(--k-19)) 30%, var(--bg)) 0 6px,
    color-mix(in srgb, var(--k, var(--k-19)) 14%, var(--bg)) 6px 12px);
  color: var(--tekst); border-color: var(--rand-sterk); cursor: default;
}
.baanspoor .kolom.buitenfase {
  background-image: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--tekst) 7%, transparent) 0 6px, transparent 6px 12px);
}

.bereikmerk { white-space: nowrap; margin-right: 6px; }

/* -- alleen lezen ------------------------------------------------------------
   Wie een onderdeel alleen mag lezen, ziet tekst waar een ander een
   invoerveld ziet, en bovenaan het scherm de chip. Ontwerp rechten, kaart 5. */
.leeswaarde { display: inline-block; min-height: 20px; line-height: 20px; }
.leeswaarde.regels { white-space: pre-wrap; line-height: 1.5; }
.leeschip { display: inline-flex; align-items: center; gap: 8px; margin-left: 12px;
  vertical-align: middle; font-size: 13px; font-weight: 400; }
.leeschip .merkje { font-weight: 600; white-space: nowrap; }
#balk .leeschip { margin: 0 10px 0 0; }
/* Sinds de schermnaam in de balk staat (ontwerp kleur, kaart 1) deelt de chip
   zijn regel met de knoppen, en drukte de uitlegzin de festivalnaam af. In de
   balk dan alleen het merkje; de zin staat in de tooltip. */
@media (max-width: 1400px) { #balk .leeschip .leesuitleg { display: none; } }
@media (max-width: 700px) { .leeschip .leesuitleg { display: none; } }

/* -- wie ben je, onderin de zijbalk -----------------------------------------
   Naam en startpunt onder elkaar, als knop: hij opent wat je mag. Kaart 8. */
.wieknop {
  display: flex; flex-direction: column; align-items: flex-start; min-width: 0;
  border: 0; background: none; color: inherit; font: inherit; text-align: left;
  padding: 2px 6px; border-radius: var(--vorm-rond-klein); cursor: pointer;
}
.wieknop:hover { background: var(--vlak); color: var(--tekst); }
.wieknop:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wieknop .wienaam { color: var(--tekst); font-weight: 500; max-width: 150px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wieknop .wieniveau { font-size: 11px; color: var(--zacht); }
.wieregel { margin: 6px 0; }

/* -- de geldkop (betatest 26) ----------------------------------------------
   Drie vakken naast elkaar -- inkomsten, uitgaven, resultaat -- elk begroot
   groot en verwacht eronder. Op een telefoon onder elkaar. */
.geldkop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 26px; margin-bottom: 8px; }
.geldkopgetal { font-size: 22px; font-variant-numeric: tabular-nums; }
.geldkopvak .klein { font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .geldkop { grid-template-columns: 1fr; } }

/* -- de som onder een getal (ontwerp geld, kaart 1) --------------------------
   Een berekend bedrag is een knop die er als het getal uitziet, met een
   stippellijn eronder: dat is de enige aanwijzing dat er iets achter zit, en
   meer hoeft niet -- een knoprand om elk bedrag maakt van een begroting een
   formulier. De som eronder is een smal blok met de stappen onder elkaar. */
.somknop { background: none; border: 0; padding: 0; margin: 0; font: inherit;
  color: inherit; cursor: pointer; text-decoration: underline dotted;
  text-underline-offset: 3px; text-decoration-color: var(--zacht);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.somknop:hover, .somknop.open { text-decoration-color: var(--accent);
  color: var(--accent); }
.somknop:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.somvak { margin: 4px 0 8px 22px; padding: 6px 10px; border-left: 3px solid
  var(--accent); background: var(--vlak); font-size: 13px;
  font-variant-numeric: tabular-nums; }
.somrij > td { padding: 0 !important; }
.somrij .somvak { margin: 2px 0 6px 12px; }
.somstap { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline;
  padding: 1px 0; }
.somdelen { min-width: 0; }
.somgetal, .somuitkomst { white-space: nowrap; }
.somuitkomst { font-weight: 600; }
.somteken { color: var(--zacht); }
/* Een tarief dat vóór dag 0 verandert (kaart 12): oranje, want het is geen
   fout maar iets dat het getal eronder verschuift. */
.btwmelding { border-color: var(--amber); margin-bottom: 10px; }
.btwkeus { display: inline-flex; gap: 6px; align-items: center; }
/* De besteding per bezoeker (kaart 2): een regel per omzetsoort, met hoeveel
   er verdeeld is erachter. Oranje als dat geen honderd is. */
.bestedingkaart { display: grid; gap: 6px; padding: 8px 12px; }
.bestedingsoort { display: flex; flex-wrap: wrap; gap: 4px 14px;
  align-items: center; }
.bestedingnaam { width: 70px; font-weight: 600; }
.bestedingvak { display: inline-flex; gap: 6px; align-items: center; }
.bestedingverdeeld { font-size: 12px; color: var(--zacht); white-space: nowrap; }
.oranje, .bestedingverdeeld.oranje { color: var(--amber); }
.tkverkoopgetal { display: inline-flex; gap: 4px; align-items: center; }
.tkverkoopgetal .tkgetal { width: 70px; }
/* Een verwachting die nog de begroting is (kaart 3): grijs. */
input.volgensbegroting::placeholder { color: var(--zacht); font-style: italic; }
.postgrondslag { display: grid; gap: 2px; }
.postgrondslag select { font-size: 12px; }
.margeregel .bestedingnaam { width: auto; }
.margeregel { display: flex; flex-wrap: wrap; gap: 4px 12px;
  align-items: baseline; margin: 8px 0 0; padding: 6px 12px; }
/* Een afgezegde opdracht (kaart 7): doorgestreept en zacht, met een rood
   merkje. Hij staat er nog, zodat je ziet dat hij er was. */
tr.afgezegd td { color: var(--zacht); }
tr.afgezegd td s { text-decoration-color: var(--rood); }
.geldrij .merkje, td .merkje { margin-left: 6px; white-space: nowrap; }
.merkje.oranje { color: var(--amber); border-color: var(--amber); }
.kopbegroting { display: flex; flex-wrap: wrap; gap: 4px 10px;
  align-items: center; margin: 2px 0 8px; }
/* Een hoofdgroep (kaart 9) is vet; de koppen erin springen in. */
.hoofdgroep > .geldrij { font-weight: 600; }
.hoofdgroepdetail { padding: 0 0 4px 12px !important; }
.hoofdgroepdetail > div { border-bottom: 0 !important; }
/* Het venster van een rekensom (kaart 8): een regel per invoer. */
.sominvoer { display: grid; gap: 6px; margin: 6px 0; }
.sominvoerrij { display: grid; gap: 6px; align-items: center;
  grid-template-columns: 9em minmax(8em, 1fr) minmax(10em, 1.2fr) 6em 6em auto; }
@media (max-width: 600px) {
  .sominvoerrij { grid-template-columns: 1fr 1fr; }
}
/* De facturen van een opdracht (kaart 11). */
.factuurvak { display: grid; gap: 2px; }
.factuurregel { display: grid; grid-template-columns: 5.5em minmax(0, 1fr) auto;
  gap: 8px; font-size: 13px; padding: 2px 0; border-bottom: 1px solid var(--rand); }
.factuurregel .getal { white-space: nowrap; text-align: right; }
.factuursom { font-weight: 600; border-bottom: 0; }
/* -- Geld op de telefoon (ontwerp geld, kaart 13) ----------------------------
   Onder 600 pixels twee bedragkolommen -- begroot en verwacht, of begroot en
   nu -- zonder euroteken in de cel: de kop zegt het, en anders viel het
   teken los op een eigen regel. Het verschil wordt een merkje achter de
   naam. Een bedrag breekt nooit. Kaartverkoop gebruikt dezelfde opmaak. */
.geldcel, .geldbedrag, table.geldtabel td.getal, .somknop { white-space: nowrap; }
.geldsmal, .geldeuro { display: none; }
.geldmerk { margin-left: 6px; white-space: nowrap; }
@media (max-width: 600px) {
  .geldbreed { display: none !important; }
  span.geldsmal, span.geldeuro { display: inline; }
  td.geldsmal, th.geldsmal { display: table-cell; }
  .euro { display: none; }
  .geldrij { gap: 6px !important; padding-left: 4px !important;
    padding-right: 4px !important; }
  .geldcel { width: auto !important; min-width: 88px; flex: 0 0 auto; }
  /* Een bedragkolom in een tabel zo breed als zijn bedrag, en niet de vaste
     breedte van het brede scherm: anders liep de tabel net rechts weg. */
  table.raster th.geldkolom { width: auto !important; min-width: 0 !important;
    white-space: normal; }
  /* Het merkje met het verschil onder de naam, niet ernaast: een naam in
     een tabel breekt niet, en dan duwt het merkje de bedragen weg. */
  table.raster td.knip span.geldmerk { display: block; margin-left: 0; }
  /* Een opengeklapte kop springt op een telefoon nauwelijks in, en een
     invoerveld voor een bedrag is zo breed als een bedrag. */
  .gelddetail { padding-left: 4px !important; padding-right: 0 !important; }
  table.geldtabel th { white-space: normal; }
  table.geldtabel td.knip { max-width: 32vw; }
  table.geldtabel .veldmetsom { flex-direction: column; align-items: flex-end;
    gap: 0; }
  table.geldtabel td.getal input { width: 72px !important; }
  table.geldtabel td.getal input { min-width: 0; }
  .geldrij > span:first-child + span { min-width: 0; overflow-wrap: anywhere; }
  .geldkopgetal { font-size: 20px; }
}
.somfout { color: var(--rood); margin-top: 6px; }
.veldmetsom { display: inline-flex; gap: 6px; align-items: baseline; }
.veldmetsom > .somknop { font-size: 11px; color: var(--zacht); }
/* In het dossiervenster staat het knopje voor de rekensom onder het veld als
   er naast geen plek is, en niet half afgeknipt. */
.veld .veldmetsom { display: flex; flex-wrap: wrap; }
.veld .veldmetsom > .cellknop { white-space: nowrap; }

/* -- Terrein zonder kaart (betatest 32) -------------------------------------
   De lege staat met daaronder de objecten als chips; een klik opent het
   paneel. Onder elkaar en scrollend, niet naast elkaar zoals kaart en lade. */
.kaartbak.kaartleeg { flex-direction: column; overflow: auto; gap: 14px;
  padding: 16px; }
.tkzonderkaart { display: grid; gap: 6px; }
.tkzonderkaartrij { display: flex; flex-wrap: wrap; gap: 6px; }
.losobject.aan { background: var(--k); color: var(--op); }
/* "12 staan nog nergens" als link naar Wat er staat. */
.tklink { border: 0; background: none; padding: 0; font: inherit;
  color: var(--accent); text-decoration: underline; cursor: pointer;
  text-align: left; max-width: 100%; }

/* -- de zones van een productie (betatest 6) ------------------------------- */
.zonelijst { display: grid; gap: 6px; }
.zoneregel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
  gap: 8px; align-items: center; }
@media (max-width: 520px) {
  .zoneregel { grid-template-columns: minmax(0, 1fr) auto; }
}

/* -- een veld dat niet bewaard kon worden (betatest 88) ---------------------
   Een rode rand, en de reden eronder. Wat je typte blijft staan. */
[aria-invalid="true"] { border-color: var(--rood) !important;
  outline-color: var(--rood); }
.veldfout { color: var(--rood); font-size: 12px; margin-top: 3px;
  line-height: 1.35; }

/* -- een locatie onder Algemeen (betatest 3b) ------------------------------ */
.locatievelden { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 12px; margin: 6px 0 8px; }
@media (max-width: 700px) { .locatievelden { grid-template-columns: 1fr; } }
.puntbreedte { display: inline-flex; align-items: baseline; gap: 2px;
  margin-left: 8px; }

/* -- Het terrein op een smal scherm ----------------------------------------
   Daar ligt het paneel over de hele breedte (`.tijdpaneel` onder 1000px). Het
   krijgt een sluitknop, en een knop in de werkbalk haalt het terug. Op een
   breed scherm staat het ernaast en zijn beide knoppen er niet. */
.alleensmal { display: none; }
@media (max-width: 1000px) {
  .alleensmal { display: inline-flex; }
  .tkpaneel.dicht { display: none; }
}

/* -- programmering --------------------------------------------------------- */
/* De line-up: één regel per act, als raster en niet als tabel. Op een telefoon
   klapt de regel om naar twee: de act met zijn stand erboven, de rest klein
   eronder -- een tabel van zeven kolommen past daar niet, en zijwaarts
   scrollen door een line-up is de verkeerde kant op zoeken. */
.pgchips { margin: 0; }
.pglijst { border: 1px solid var(--rand); border-radius: var(--vorm-rond);
           background: var(--bg); overflow: hidden; }
.pgregel {
  display: grid; width: 100%; align-items: center; gap: 4px 12px;
  grid-template-columns: minmax(110px, 2fr) minmax(0, 1.3fr) minmax(0, 1fr)
                         92px 88px minmax(0, 1.3fr) minmax(0, 1fr);
  padding: 7px 12px; border: 0; border-bottom: 1px solid var(--rand);
  background: none; color: var(--tekst); font: inherit; font-size: 13px;
  text-align: left; cursor: pointer;
}
.pgregel:last-child { border-bottom: 0; }
.pgregel:hover { background: var(--vlak); }
.pgregel.gekozen { background: var(--accent-zacht); }
.pgregel:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pgregel.pgkop { cursor: default; font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--zacht); font-weight: 700;
  background: color-mix(in srgb, var(--vlak) 60%, var(--bg)); }
.pgregel.pgkop:hover { background: color-mix(in srgb, var(--vlak) 60%, var(--bg)); }
.pgregel .getal { text-align: right; font-variant-numeric: tabular-nums; }
.pgcel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Een afgezegde act blijft staan, doorgestreept: "die hadden we toch?" */
.pgregel.afgezegd .c0 b, .pgregel.afgezegd .c1, .pgregel.afgezegd .c2,
.pgregel.afgezegd .c4 { text-decoration: line-through; color: var(--zacht); }
.pgpil {
  display: inline-block; font-size: 11.5px; line-height: 1.6; padding: 0 8px;
  border-radius: 99px; border: 1px solid var(--rand-sterk); color: var(--zacht);
  white-space: nowrap;
}
.pgpil.stand-bod { color: var(--amber); border-color: var(--amber); }
.pgpil.stand-bevestigd { color: var(--accent); border-color: var(--accent); }
.pgpil.stand-contract { background: var(--accent); border-color: var(--accent);
                        color: var(--bg); }
.pgpil.stand-afgezegd { color: var(--rood); border-color: var(--rood);
                        text-decoration: line-through; }
.pgrider { display: inline-flex; align-items: center; gap: 6px; }
.pgbalk { display: inline-block; width: 46px; height: 5px; border-radius: 3px;
          background: var(--rand); overflow: hidden; flex: none; }
.pgbalk i { display: block; height: 100%; background: var(--groen); }
.pgnog { color: var(--amber); font-size: 12px; }
.pgsom { display: flex; gap: 16px; justify-content: flex-end; padding: 8px 12px;
         color: var(--zacht); font-variant-numeric: tabular-nums; }
.pgpaneel .veld { margin-bottom: 8px; }
.pgpaneel .veld input, .pgpaneel .veld select, .pgpaneel .veld textarea { width: 100%; }
.pggeld { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px; }
.pgletop { margin: 8px 0; }

/* Omklappen op de breedte van de lijst en niet van het scherm: met het paneel
   van een act ernaast is de lijst op een groot scherm net zo smal als op een
   telefoon. */
.pglijstvlak { container-type: inline-size; }
@media (max-width: 700px) {
  .pglijstvlak { padding: 10px 10px 40px; }
}
@container (max-width: 620px) {
  /* Twee regels: de act met zijn stand, en daaronder de rest achter elkaar.
     Een lege cel neemt dan geen plek in. */
  .pgregel { display: flex; flex-wrap: wrap; gap: 2px 12px; padding: 8px 10px; }
  .pgregel.pgkop { display: none; }
  .pgregel .c0 { flex: 1 1 calc(100% - 120px); }
  .pgregel .c3 { flex: none; }
  .pgregel .c1, .pgregel .c2, .pgregel .c4, .pgregel .c5, .pgregel .c6 {
    flex: none; font-size: 12px; color: var(--zacht);
  }
  .pgregel .pgcel:empty { display: none; }
}

/* Het schema. Een soundcheck of changeover is licht, met een stippelrand: hij
   hoort bij de avond maar is geen optreden om naar te kijken. */
.tijdblok.licht {
  background: color-mix(in srgb, var(--k, var(--k-19)) 18%, var(--bg));
  color: var(--tekst);
  border: 1px dashed color-mix(in srgb, var(--k, var(--k-19)) 70%, var(--bg));
  font-weight: 450;
}
/* Het einde van het geluid: een rode stippellijn over de baan. */
.pggeluid {
  position: absolute; top: 0; bottom: 0; width: 0; z-index: 3;
  border-left: 2px dotted var(--rood); pointer-events: none;
}
.pgzonder .pgsleepchip { cursor: grab; color: var(--tekst); }
.pgzonder .pgsleepchip[draggable="true"]:active { cursor: grabbing; }
/* De gevraagde speeltijd op de chip: kort, want de chip staat in een rij. */
.pgzonder .pgchipwens { max-width: 16em; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-weight: normal; }
.pgwens { margin: 4px 0; }
/* Wat een act kost (kaart 4). Soort, bedrag en toelichting op één regel; op
   een telefoon breekt de toelichting naar de volgende. */
.pgtegels { margin: 0 0 12px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.pgtegels .tegelgetal { font-size: 20px; white-space: nowrap; }
.pgboven { color: var(--rood); }
.pgkostrij { display: grid; grid-template-columns: minmax(0, 1fr) 7.5em 2em;
  grid-template-areas: "soort bedrag weg" "uitleg uitleg uitleg";
  align-items: center; gap: 4px 8px; margin: 6px 0; }
.pgkostrij .pgkostsoort { grid-area: soort; min-width: 0; }
.pgkostrij .pgkostbedrag { grid-area: bedrag; text-align: right; min-width: 0; }
.pgkostrij .pgkostuitleg { grid-area: uitleg; min-width: 0; }
.pgkostrij > .knop { grid-area: weg; }
.pgkostsamen { border-top: 1px solid var(--rand); padding-top: 4px; }
.pgkostoud { margin-top: 6px; white-space: pre-line; }
/* Nu en straks, op de telefoon (kaart 7): een kaart per podium, met wat nu
   speelt groot en wat straks komt eronder. */
.pgnuvlak { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; }
.pgnukaart h3 { margin: 0 0 6px; font-size: 15px; }
.pgnuregel { display: grid; grid-template-columns: 4.5em 1fr; gap: 0 8px; width: 100%;
  text-align: left; background: none; border: 0; padding: 6px 0; color: var(--tekst);
  font: inherit; cursor: pointer; }
.pgnuregel .pgnuonder { grid-column: 2; }
.pgnunu b { font-size: 18px; }
.pgnuwissel { display: block; padding: 6px 0; color: var(--zacht); }
.pgaangekomen { display: flex; align-items: center; gap: 6px; margin: 8px 0; }
.pggeluidrij .pggeluidvak { display: inline-flex; align-items: center; gap: 4px; }
.pggeluidrij input { width: 62px; min-height: 26px; padding: 1px 6px; }
.pgoptredenvak { border-top: 1px solid var(--rand); padding-top: 6px; margin-top: 6px; }
.pgoptredenvak.gekozen { border-left: 3px solid var(--accent); padding-left: 8px; }
.pgoptreden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }

/* Het riderdeel van het paneel: eerst wat er is, dan de drie stappen. */
.pgeten { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center;
          margin: 4px 0 8px; font-size: 13px; }
.pgstap { border-top: 1px solid var(--rand); padding: 6px 0; }
.pgstap > summary { cursor: pointer; font-weight: 600; font-size: 13px; padding: 2px 0; }
.pgstap .knoppenrij { margin: 6px 0; }
.pgdoc { display: flex; gap: 6px; align-items: flex-start; padding: 3px 0;
         font-size: 12.5px; cursor: pointer; }
.pgdoc input { margin-top: 2px; flex: none; }
.pghint { display: block; color: var(--amber); font-size: 11.5px; }
.pgoud { color: var(--amber); }
.pgplak { width: 100%; font-family: inherit; font-size: 12px; margin: 4px 0; }
.pgwoord { font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
           color: var(--zacht); font-weight: 700; margin: 8px 0 2px; }
.pgvoorstelregel.stand-gelijk { color: var(--zacht); }
.pgvoorstelregel .merkje { margin-left: 4px; }
.pgregelrij { display: flex; gap: 6px; align-items: center; padding: 3px 0;
              font-size: 12.5px; flex-wrap: wrap; }
.pgregelrij .pgwat { flex: 1 1 120px; min-width: 0; }
.pgregelrij.geregeld .pgwat { color: var(--zacht); text-decoration: line-through; }
.pgregelrij .pgwie { width: auto; max-width: 92px; min-height: 24px; padding: 0 4px;
                     font-size: 12px; margin: 0; }
/* In het paneel van 320 breed pasten vinkje, tekst, twee keuzelijsten en het
   kruisje niet op één regel, en brak het op een willekeurige plek af. Nu de
   tekst op de eerste regel en wie het regelt eronder, even breed, ingesprongen
   tot onder de tekst (bij het samenvoegen). */
.pgregelrij .pgwat { flex-basis: calc(100% - 24px); }
.pgregelrij select.pgwie { flex: 1 1 0; max-width: none; }
.pgregelrij select.pgwie:first-of-type { margin-left: 22px; }

/* Materiaal per podium per dag: een tabel met een kolom per act. Een optie of
   een bod staat grijs: hij telt mee, maar hij speelt nog niet. */
.pgmateriaalkeus { margin-bottom: 10px; }
.pgmateriaal th.zacht, .pgmateriaal td.zacht { color: var(--zacht); }
.pgmateriaal td .merkje { margin-right: 4px; }

/* -- drukwerk ----------------------------------------------------------------
 *
 * Een muur van kaartjes, één per uiting (`ontwerp/drukwerk.md`, kaart 1). Het
 * beeld staat bovenaan in een vak van vaste hoogte en past erin zonder te
 * snijden: een steigerbanner van 1 : 2 en een Facebook-omslag van 2 : 1 horen
 * er allebei heel op te staan, en een kaartje dat meegroeit met zijn beeld
 * maakt een muur die niet meer als rij te lezen is. */
.dwvlak { container-type: inline-size; }
.dwmuur { display: grid; gap: 12px;
          grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.dwkaart { display: flex; flex-direction: column; text-align: left; padding: 0;
           border: 1px solid var(--rand); border-radius: var(--vorm-rond);
           background: var(--kaart-bg); box-shadow: var(--kaart-schaduw);
           overflow: hidden; cursor: pointer; font: inherit; color: inherit; }
.dwkaart:hover { border-color: var(--rand-sterk); }
.dwkaart.gekozen { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-zacht); }
.dwbeeld { display: flex; align-items: center; justify-content: center;
           height: 170px; background: var(--vlak);
           border-bottom: 1px solid var(--rand); }
.dwbeeld img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.dwonder { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 9px; }
.dwonder b { font-size: 13.5px; line-height: 1.3; }
.dwvoet { display: flex; gap: 8px; justify-content: space-between; }
.dwmaker { color: var(--accent-2); font-weight: 600; }
/* De vier stappen als streepjes, met de laatste gezette stap erachter in
   woorden: vier bolletjes zonder woord leest niemand. */
.dwstappen { display: flex; gap: 3px; align-items: center; }
.dwstappen i { width: 22px; height: 4px; border-radius: 2px; background: var(--rand); }
.dwstappen i.gezet { background: var(--accent); }
.dwstappen .klein { margin-left: 5px; }
.dwpaneel .veld { margin-bottom: 8px; }
.dwpaneel .veld input, .dwpaneel .veld select, .dwpaneel .veld textarea { width: 100%; }
.dwpaneel .dwstappen { margin: 6px 0 10px; }
.dwmakers { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.dwmakers .knop { min-height: 26px; padding: 2px 9px; font-size: 12.5px; }
@container (max-width: 520px) {
  .dwmuur { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dwbeeld { height: 130px; }
  .dwstappen i { width: 13px; }
}
@media (max-width: 700px) {
  .dwvlak { padding: 10px 10px 40px; }
}

/* De huisstijl (kaart 7): twee kaartjes naast elkaar op een breed scherm,
   onder elkaar op een smal. De stalen zijn een vlakje met de code en de naam
   ernaast, zodat je de kleur ziet terwijl je hem bijstelt. */
.dwhuisstijl { max-width: 620px; margin-bottom: 14px; }
.dwhuisstijl h2 { margin-top: 0; }
.dwhuisstijl .veld { margin-bottom: 10px; }
.dwhuisstijl .veld input, .dwhuisstijl .veld textarea { width: 100%; }
.dwplak { width: 100%; font-family: inherit; font-size: 12.5px; margin: 8px 0; }
.dwstalen { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px;
            align-items: flex-start; }
.dwstaal { display: flex; gap: 6px; align-items: center; width: 100%; }
.dwstaalvlak { width: 26px; height: 26px; border-radius: 7px; flex: none;
               border: 1px solid var(--rand-sterk); }
.dwstaal .dwhex { width: 92px; flex: none; font-family: ui-monospace, monospace; }
.dwstaal .dwkleurnaam { flex: 1; min-width: 0; }
.dwlogo { display: flex; align-items: center; min-height: 60px; margin-bottom: 8px; }
.dwlogo img { max-height: 90px; max-width: 240px; }
.dwsleep { display: flex; flex-direction: column; gap: 6px; padding: 12px;
           border: 1.5px dashed var(--rand-sterk); border-radius: var(--vorm-rond-klein);
           cursor: pointer; margin: 6px 0 10px; }
.dwsleep.boven { border-color: var(--accent); background: var(--accent-zacht); }
.dwsleep input[type="file"] { font-size: 12px; }

/* Het paneel van een uiting: twee tabbladen, en de prompt in een vak dat je
   kunt bewerken. Wat uit de app komt is gemarkeerd, in de zachte tint van de
   tweede kleur: zichtbaar, maar niet schreeuwend, want je leest de zin en
   niet de markering. */
.dwpaneeltabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rand);
                margin: 4px 0 10px; }
.dwpaneeltabs button { border: 0; background: none; padding: 6px 10px; font: inherit;
                       font-size: 13px; color: var(--zacht); cursor: pointer;
                       border-bottom: 2px solid transparent; margin-bottom: -1px; }
.dwpaneeltabs button[aria-selected="true"] { color: var(--tekst); font-weight: 700;
                                             border-bottom-color: var(--accent); }
.dwpaneelblad { margin-bottom: 12px; }
.dwpromptrij { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.dwpromptrij select { width: auto; margin: 0; }
.dwpromptchips { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.dwpromptchips .knop { min-height: 26px; padding: 2px 9px; font-size: 12.5px; }
.dwprompt { white-space: pre-wrap; font-size: 12.5px; line-height: 1.5;
            border: 1px solid var(--veld-rand); border-radius: var(--vorm-rond-klein);
            background: var(--veld-bg); color: var(--veld-tekst); padding: 8px 10px;
            max-height: 340px; overflow-y: auto; margin-bottom: 4px; }
.dwprompt:focus { outline: 2px solid var(--accent-zacht); }
.dwprompt mark { background: var(--accent-2-zacht); color: inherit;
                 border-radius: 3px; padding: 0 1px; }

/* De line-up (kaart 3): een regel per act met zijn vier knoppen. De knoppen
   klein, zodat de naam de regel draagt en niet de keuze. */
.dwlineup { max-width: 620px; margin-bottom: 14px; }
.dwlineup .kopje { margin-top: 12px; }
.dwactrij { display: flex; gap: 8px; align-items: center; padding: 4px 0;
            border-bottom: 1px solid var(--rand); flex-wrap: wrap; }
.dwactnaam { flex: 1 1 140px; min-width: 0; font-weight: 600; }
.dwgewichten { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.dwgewichten .knop { min-height: 24px; padding: 1px 8px; font-size: 12px; }
.dwsignaal { color: var(--amber); font-weight: 600; }

/* Het tabblad Beeld (kaart 4). Het vel staat in zijn eigen verhouding met het
   beeld als achtergrond, bijgesneden zoals de pdf het doet; de snijlijn is een
   gestippelde rand op de afloop, zodat je ziet wat er afvalt. */
.dwbeeldblad .kopje { margin-top: 12px; }
.dwvel { position: relative; width: min(100%, calc(360px * var(--r, 1)));
         aspect-ratio: 1 / 1;
         background: var(--vlak) center / cover no-repeat;
         border-radius: 4px; margin: 4px 0; box-shadow: var(--kaart-schaduw); }
.dwvel .dwsnij { position: absolute; display: none;
                 outline: 1px dashed rgba(255, 255, 255, .95);
                 box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 0 0 999px rgba(0, 0, 0, .28); }
.dwvel.snijlijn { overflow: hidden; }
.dwvel.snijlijn .dwsnij { display: block; }
.dwvoorstellen { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr));
                 margin-bottom: 8px; }
.dwvoorstel { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.dwvoorstel img { width: 100%; height: 120px; object-fit: contain;
                  background: var(--vlak); border-radius: 4px; }
.dwnalopen { display: flex; flex-direction: column; gap: 3px; margin-bottom: 4px; }
.dwnaloopregel { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; }
.dwnaloopregel input { margin-top: 3px; flex: none; }
.dwgoed { color: var(--groen); font-weight: 600; }
.dwfout { color: var(--rood); font-weight: 600; }
.dwscherpte { display: flex; flex-direction: column; font-size: 12.5px; }
.dwscherpregel { display: flex; gap: 8px; justify-content: space-between;
                 align-items: baseline; padding: 4px 0;
                 border-bottom: 1px solid var(--rand); }
.dwscherpregel.eigen > div:first-child > div:first-child { font-weight: 700; }
.dwoordeel { white-space: nowrap; }
a.knop.uit { opacity: .5; pointer-events: none; }

/* De svg plakken (kaart 8): een vak en daaronder de vier controles. */
.dwsvg { margin-bottom: 10px; }
.dwcontroles { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.dwcontrole { font-size: 12.5px; }

/* De formaten (kaart 5): elk vakje in zijn eigen verhouding, even hoog, zodat
   een story smal en een websitekop breed staat en je in één blik ziet welke
   verhouding nog mist. */
.dwformaten { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.dwformaat { display: flex; flex-direction: column; gap: 3px; max-width: 260px;
             align-items: flex-start; }
.dwformaatvlak { width: min(260px, calc(150px * var(--r, 1))); aspect-ratio: 1 / 1;
                 display: flex; align-items: center; justify-content: center;
                 background: var(--vlak) center / cover no-repeat;
                 border: 1px dashed var(--rand-sterk); border-radius: 4px;
                 position: relative; }
.dwformaat.hoofd .dwformaatvlak { border: 2px solid var(--accent); }
.dwhoofdmerk { position: absolute; left: 4px; top: 4px; font-size: 10.5px;
               background: var(--accent); color: #fff; border-radius: 99px;
               padding: 1px 7px; font-weight: 700; }
.dwformaat .knop { align-self: flex-start; min-height: 24px; font-size: 12px; }
@container (max-width: 520px) {
  .dwformaatvlak { width: min(200px, calc(110px * var(--r, 1))); }
}

/* De bestellijst (kaart 6). De som van de bannermaat staat klein onder de
   maat: je wilt hem zien als je twijfelt, niet elke keer lezen. */
.dwdeco td { vertical-align: top; }
.dwbesteldvelden { display: flex; gap: 4px; flex-wrap: wrap; }
.dwbesteldvelden input { min-width: 0; width: 130px; }
.dwbesteldvelden input[type="date"] { width: 140px; }
.tkgetal { width: 120px; }
.pgpaneel .dwgewichten { display: flex; margin-bottom: 10px; }