/* Reelify, ontwerpsysteem.

   Uitgangspunt: het scherm staat vol met de kleuren van de makelaar, dus het
   chassis blijft neutraal en rustig. Eén eigen accent: messing. Warm, niet de
   standaard SaaS-blauw, en het past bij een verlichte etalage.

   Ritme: 4px-raster, type-schaal 12/13/15/17/20/26/34/46, strakke tracking op
   koppen, hairline-randen in plaats van slagschaduwen. */

:root {
  color-scheme: light;

  --bg:         #F7F7F5;
  --surface:    #FFFFFF;
  --surface-2:  #F1F1EE;
  --surface-3:  #E8E8E4;
  --fg:         #0B0C0E;
  --fg-2:       #4B4E55;
  --fg-3:       #6B6F77;
  --line:       #E3E3DE;
  --line-2:     #D3D3CC;
  /* Iets donkerder dan #797D85: dat haalde net geen 4,5:1 op wit (WCAG AA). */

  --brass:      #A97C2F;
  --brass-soft: #F3EADA;
  --brass-line: #E0CBA4;

  --btn:        #101215;
  --btn-fg:     #FFFFFF;
  --btn-hover:  #24272C;

  --ok:         #17694B;
  --ok-bg:      #E4F1EA;
  --warn:       #8A5312;
  --warn-bg:    #F6EDE0;
  --bad:        #9B2440;
  --bad-bg:     #F8E5E9;

  --sh-1: 0 1px 2px rgba(11,12,14,.04), 0 14px 32px -20px rgba(11,12,14,.16);
  --sh-2: 0 1px 2px rgba(11,12,14,.05), 0 12px 28px -18px rgba(11,12,14,.30);
  --sh-3: 0 2px 4px rgba(11,12,14,.06), 0 24px 60px -28px rgba(11,12,14,.42);

  --r-sm: 7px;
  --r:    11px;
  --r-lg: 16px;

  --nav-h: 62px;

  /* Het pijltje van elke keuzelijst. Als los token, want een data-uri kan geen
     currentColor lezen en moet dus per thema een eigen kleur meekrijgen. */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.25 6 7.75l3.5-3.5' fill='none' stroke='%234B4E55' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Bewust geen donker thema. Reelify staat vol met de kleuren en het logo van
   de makelaar; die zijn aangeleverd voor een lichte ondergrond. Een donkere
   modus zou de huisstijl op een achtergrond zetten waar hij niet voor bedoeld
   is. `color-scheme: light` hierboven zorgt dat ook de systeem-UI (velden,
   scrollbars, de telefoon zelf) licht blijft, ook als het toestel 's avonds
   naar donker schakelt. */

/* ================================================================== letter

   Inter, hier zelf gehost en niet bij Google opgehaald.

   De layout-editor laadt de Remotion-speler, en die trekt Inter binnen van
   fonts.gstatic.com. Op dát scherm stond de hele interface dus ineens in Inter
   terwijl elk ander scherm terugviel op Segoe UI: zelfde ingestelde maat,
   bredere letters, en daardoor een navigatiebalk die groter leek. Nu staat het
   overal gelijk.

   Twee redenen om het niet van Google te halen: een bezoeker hoort geen
   verzoek naar een Amerikaanse server te doen omdat wij een lettertype willen,
   en een render mag niet afhangen van een CDN die net traag is.

   Variabel gewicht 100-900, dus dit ene bestand dekt de hele schaal. De
   latin-ext-snede haalt de browser alleen op als er een letter op de pagina
   staat die erin zit. Inter is SIL OFL 1.1: zelf hosten mag. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*, *::before, *::after { box-sizing: border-box; }

/* clip in plaats van hidden: hidden maakt van <html> een scrollcontainer en
   daar valt de plakkende navigatiebalk uit. Dit is een vangnet, geen excuus:
   wat zijwaarts uitsteekt hoort ter plekke opgelost te worden. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

img, video, svg, canvas { max-width: 100%; }

/* De inhoud tussen kop en voettekst groeit mee, zodat de footer naar onderen
   wordt geduwd op korte pagina's (bijv. het proef-resultaat). */
.paginahoofd { flex: 1 0 auto; }

/* De navigatiebalk plakt bovenaan, dus een sprong naar #prijs zette de kop
   er precies achter. Elk element met een id houdt daarom die hoogte vrij. */
[id] { scroll-margin-top: calc(var(--nav-h) + 14px); }

body {
  margin: 0;
  /* Sticky footer: de inhoud vult minstens het scherm, zodat de voettekst op een
     korte pagina onderaan blijft staan in plaats van halverwege te zweven. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  font-feature-settings: "cv02", "cv03", "cv04", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mono, code, .num, .tnum {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: normal;
}
/* Cijfers horen rechts, dan lopen ze in een kolom netjes op elkaar. */
td.num, th.num { text-align: right; }

a { color: inherit; text-decoration: none; }
a.link { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-2);
         text-underline-offset: 3px; }
a.link:hover { text-decoration-color: var(--brass); }
/* Uitloggen gaat via een mini-formulier (POST), maar moet eruitzien als de link
   die het verving. */
.uitlogform { display: inline; margin: 0; }
.uitlogform button { all: unset; cursor: pointer; }
.uitlogform button.link { text-decoration: underline; text-decoration-color: var(--line-2); }
.uitlogform button.link:hover { text-decoration-color: var(--brass); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ============================================================== merkmerk */

.mark { display: block; flex-shrink: 0; }
.wordmark {
  font-size: 17px; font-weight: 640; letter-spacing: -.028em;
  color: var(--fg);
}
.brandlink { display: inline-flex; align-items: center; gap: 9px; }

/* ================================================================ shell */

.nav {
  position: sticky; top: 0; z-index: 40;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 8px;
  padding: 0 20px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav .sep { width: 1px; height: 20px; background: var(--line-2); margin: 0 8px; }
.nav .spacer { flex: 1; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  position: relative; padding: 8px 10px;
  font-size: 14px; font-weight: 490; color: var(--fg-2);
  transition: color .14s ease;
}
.nav-links a:hover { color: var(--fg); }
.nav-links a.on { color: var(--fg); font-weight: 560; }
/* Een fijne messing-onderstreping: subtiel bij hover, vol op de actieve
   pagina. Rustiger en premiumer dan een grijs pil-vlakje. */
.nav-links a::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--brass);
  opacity: 0; transition: opacity .14s ease;
}
.nav-links a:hover::after { opacity: .5; }
.nav-links a.on::after { opacity: 1; }

.chipmenu {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 6px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 13px; color: var(--fg-2);
}
.chipmenu .dot { width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0; }
/* Het logo op ware verhouding: een breed woordmerk moet niet in een vierkant
   geperst worden. De chip zelf is al wit, dus het logo staat al op wit. */
.chipmenu .chiplogo { display: inline-flex; align-items: center; flex-shrink: 0; }
.chipmenu .chiplogo img { height: 16px; width: auto; max-width: 150px;
                          object-fit: contain; display: block; }
/* Zegt het logo de naam al (breed woordmerk), dan de losse naam weg. */
.chipmenu.breedlogo .chipnaam { display: none; }

/* Het kantoor als vaste regel onder een formulier: logo op de hoofdkleur, de
   uitleg ernaast. nowrap op de rij en niet op de tekst, zodat lange tekst
   binnen zijn eigen kolom vouwt in plaats van onder het logo te schieten. */
.merkregel { display: flex; gap: 10px; align-items: center;
             flex-wrap: nowrap; margin-top: 18px; }
.merkregel .dot { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 6px;
                  overflow: hidden; display: grid; place-items: center;
                  margin-top: 1px; }
.merkregel .dot img { width: 100%; height: 100%; object-fit: contain;
                      padding: 2px; display: block; }
.merkregel .merklogo { flex: 0 0 auto; display: inline-flex; align-items: center;
                       height: 24px; padding: 0 6px; background: #fff;
                       border: 1px solid var(--line-2); border-radius: 6px; }
.merkregel .merklogo img { height: 15px; width: auto; max-width: 120px;
                           object-fit: contain; display: block; }
.merkregel .hint { min-width: 0; }

/* Avatar met het kantoorlogo erin, op de eigen hoofdkleur. Afgeronde hoeken en
   geen cirkel: logo's zijn vierkant aangeleverd en een cirkel snijdt ze aan. */
.avatar.merk { border-radius: 9px; overflow: hidden; padding: 0; }
.avatar.merk img { width: 100%; height: 100%; object-fit: contain; padding: 3px;
                   display: block; }
.avatar.groot.merk { border-radius: 14px; }
.avatar.groot.merk img { padding: 8px; }

.navacties { display: inline-flex; align-items: center; gap: 6px; }

/* ---- navigatie op een telefoon --------------------------------------

   Onder 860px passen de links niet meer naast het merk. Ze bleven staan,
   dus schoof de laatste knop buiten beeld en scrollde de hele pagina
   zijwaarts mee. Nu klapt er een paneel uit met rijen van 48px, want dat
   is de maat die een duim raakt zonder mikken. */

.navknop {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; margin-left: 4px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); color: var(--fg); cursor: pointer;
}
.navknop > span { position: relative; display: block; width: 17px; height: 1.6px;
                  background: currentColor; border-radius: 2px; }
.navknop > span::before, .navknop > span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.6px;
  background: currentColor; border-radius: 2px;
  transition: transform .17s ease;
}
.navknop > span::before { top: -5.5px; }
.navknop > span::after  { top: 5.5px; }
.navknop[aria-expanded="true"] > span { background: transparent; }
.navknop[aria-expanded="true"] > span::before { transform: translateY(5.5px) rotate(45deg); }
.navknop[aria-expanded="true"] > span::after  { transform: translateY(-5.5px) rotate(-45deg); }

.navpaneel { display: none; }
.navpaneel-links { display: flex; flex-direction: column; }
.navpaneel-links a {
  display: block; padding: 13px 2px; font-size: 16px; font-weight: 500;
  color: var(--fg); border-bottom: 1px solid var(--line);
}
.navpaneel-links a.on { color: var(--brass); }
.navpaneel-knoppen { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.navpaneel-knoppen .btn { width: 100%; }

/* ---- app-indeling: zijbalk voor beheer, gecentreerd voor de klant ---- */

.app { display: grid; grid-template-columns: 216px 1fr; min-height: calc(100vh - var(--nav-h)); }
.side {
  border-right: 1px solid var(--line);
  padding: 22px 14px;
  position: sticky; top: var(--nav-h); align-self: start;
  height: calc(100vh - var(--nav-h)); overflow-y: auto;
}
.side h6 {
  margin: 18px 0 7px 10px; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-3); font-weight: 600;
}
.side h6:first-child { margin-top: 0; }
.side a {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: var(--r-sm);
  font-size: 14px; color: var(--fg-2); font-weight: 470;
}
.side a:hover { background: var(--surface-2); color: var(--fg); }
.side a.on { background: var(--surface-2); color: var(--fg); font-weight: 570; }
.side a.on::before {
  content: ""; width: 3px; height: 15px; border-radius: 2px;
  background: var(--brass); margin-left: -13px; margin-right: 1px;
}
.side a:not(.on)::before { content: ""; width: 3px; margin-left: -13px; margin-right: 1px; }

.main { min-width: 0; padding: 32px 34px 90px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 44px 24px 96px; }
.wrap.narrow { max-width: 720px; }

/* ================================================================= type */

h1 { font-size: 34px; line-height: 1.1; letter-spacing: -.032em; font-weight: 660; margin: 0 0 10px; }
h2 { font-size: 20px; line-height: 1.25; letter-spacing: -.02em; font-weight: 600; margin: 0 0 4px; }
h3 { font-size: 15px; line-height: 1.4; letter-spacing: -.01em; font-weight: 600; margin: 0 0 4px; }
/* Kaartkoppen zijn rustiger dan sectiekoppen: 16px/640, zoals account en plan.
   Zonder dit kreeg elke kaart-h2 de zwaardere 20px en oogde het rommelig. */
.card h2 { font-size: 16px; font-weight: 640; letter-spacing: -.012em; margin: 0 0 14px; }
p { margin: 0 0 13px; }
.lede { font-size: 16.5px; line-height: 1.6; color: var(--fg-2); max-width: 60ch; }
.hint { font-size: 13px; color: var(--fg-3); line-height: 1.5; }
.crumb {
  font-size: 13px; color: var(--fg-3); margin: 0 0 6px;
}

/* Bron van de woning: twee handelingen naast elkaar, geen tekstveld. */
.bronrij { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.bronlink {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 99px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--fg-2);
  background: var(--surface); border: 1px solid var(--line-2);
  transition: border-color .13s ease, color .13s ease, background .13s ease;
}
.bronlink:hover { border-color: var(--fg-3); color: var(--fg);
                  background: var(--surface-2); }
.bronlink svg { flex-shrink: 0; opacity: .7; }
.bronlink[disabled] { color: var(--ok); border-color: var(--ok); opacity: 1; }
.crumb b { color: var(--fg-2); font-weight: 550; }

.pagehead { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between;
            flex-wrap: wrap; margin-bottom: 28px; }
.sectionhead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin: 42px 0 16px; padding-bottom: 11px; border-bottom: 1px solid var(--line);
}
.sectionhead .count { font-size: 13px; color: var(--fg-3); }
/* Een <details>-kop (bv. de proefkantoren op /admin/brands): geen systeem-
   driehoekje (flex verbergt 'm toch), wel een eigen chevron die meedraait. */
summary.sectionhead { cursor: pointer; list-style: none; }
summary.sectionhead::-webkit-details-marker { display: none; }
summary.sectionhead::after {
  content: ""; flex: none; width: 13px; height: 13px; align-self: center;
  background: var(--chevron) center / 13px 13px no-repeat;
  transition: transform .15s ease;
}
details[open] > summary.sectionhead::after { transform: rotate(180deg); }

/* ============================================================= controls */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: 14px; font-weight: 550; cursor: pointer;
  padding: 10px 18px; border-radius: var(--r);
  background: var(--btn); color: var(--btn-fg); border: 1px solid transparent;
  transition: background .13s ease, transform .13s ease, box-shadow .13s ease;
  box-shadow: var(--sh-1); white-space: nowrap;
}
.btn:hover { background: var(--btn-hover); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: var(--surface); color: var(--fg); border-color: var(--line-2); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.quiet { background: transparent; color: var(--fg-2); box-shadow: none; border-color: transparent; }
.btn.quiet:hover { background: var(--surface-2); color: var(--fg); }
.btn.brass { background: var(--brass); color: #14100A; }
.btn.brass:hover { filter: brightness(1.06); background: var(--brass); }
.btn.sm { padding: 7px 13px; font-size: 13px; border-radius: var(--r-sm); }
.btn.lg { padding: 13px 24px; font-size: 15px; }
.btn.bad { background: var(--bad); color: #fff; }
.btn.bad:hover { background: color-mix(in srgb, var(--bad) 88%, #000); }
.btn[disabled] { opacity: .42; cursor: not-allowed; transform: none; }

/* Selectiekolom in de reels-tabel: smal, vinkje gecentreerd. */
.selcol { width: 30px; text-align: center; padding-left: 4px; padding-right: 4px; }
.selcol input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--brass); vertical-align: middle; }

label { display: block; font-size: 13px; font-weight: 550; color: var(--fg-2); margin-bottom: 6px; }

/* Uitsluiten in plaats van opsommen. Met een lijst als input[type=text] valt
   <input id="hook" value="..."> buiten de boot: zonder type-attribuut matcht
   die selector niet, en dan staat er een standaard-smal veldje in beeld. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]),
select, textarea {
  font: inherit; font-size: 14.5px; width: 100%; color: var(--fg);
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r); padding: 11px 13px;
  transition: border-color .13s ease, box-shadow .13s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--fg-3); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brass);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 16%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--fg-3); }
textarea { min-height: 92px; resize: vertical; line-height: 1.55; }
/* Keuzelijsten: één strak chevron in plaats van twee gradient-driehoekjes,
   een handcursor, en op een telefoon een volwaardig tikvlak. Het openklappen
   zelf blijft van het systeem - dat hoort zo op een telefoon. */
select { appearance: none; cursor: pointer;
  background-image: var(--chevron);
  background-position: right 13px center;
  background-size: 12px 12px; background-repeat: no-repeat;
  padding-right: 38px; text-overflow: ellipsis; }
select:focus-visible { outline: none; }
@media (max-width: 620px) {
  select { min-height: 46px; padding-top: 10px; padding-bottom: 10px; }
}

.field { display: flex; gap: 9px; align-items: stretch; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; gap: 11px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; gap: 18px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }

/* ================================================================ cards */

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.card.pad { padding: 24px; }

/* Je kantoorgegevens op /instellingen: ingeklapt tot één regel.
   Die gegevens vul je één keer in, de editor eronder is het gereedschap waar je
   voor terugkomt. Uitgeklapt duwde dit formulier de speler twee schermen naar
   beneden, en juist die speler hoort naast je instellingen te staan. */
.gegevensblok {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
  padding: 16px 20px; margin-bottom: 8px;
}
.gegevensblok > summary {
  display: flex; align-items: baseline; gap: 8px 14px; flex-wrap: wrap;
  cursor: pointer; list-style: none;
}
/* Het standaard driehoekje weghalen kost in Safari een eigen regel. */
.gegevensblok > summary::-webkit-details-marker { display: none; }
.gegevensblok .titel { font-weight: 620; }
.gegevensblok .samenvatting { color: var(--fg-2); font-size: 14px; flex: 1 1 auto; }
.gegevensblok .wissel { font-size: 14px; color: var(--fg-2);
                        text-decoration: underline; text-decoration-color: var(--line-2); }
.gegevensblok[open] .samenvatting { display: none; }
.gegevensblok[open] .wissel::after { content: " (inklappen)"; }
/* De ingebedde blokken zijn hierbinnen geen losse kaarten meer: een kaart in
   een kaart met dubbele rand en schaduw op dezelfde ondergrond oogt rommelig. */
.gegevensblok .card { border: none; box-shadow: none; background: transparent; padding: 0; }
.card.raise { box-shadow: var(--sh-2); }

/* Review-kaart: elk stukje huisstijl is een <details>-regel. Dicht = nalezen wat
   we vonden, open = zelf aanvullen. Rustige lijstregels, geen dubbele randen
   (het formulier is al een kaart). */
.merkform { display: flex; flex-direction: column; }
.merkform .veldrij { border-top: 1px solid var(--line); }
.merkform > .veldrij:last-of-type { border-bottom: 1px solid var(--line); }
.merkform .veldrij > summary {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  cursor: pointer; list-style: none; padding: 13px 2px; min-height: 44px;
}
.merkform .veldrij > summary::-webkit-details-marker { display: none; }
.merkform .veldrij .vlabel { font-weight: 560; font-size: 14px;
                             flex: 0 0 auto; min-width: 148px; }
.merkform .veldrij .vwaarde { color: var(--fg-2); font-size: 14px; flex: 1 1 auto;
                              min-width: 0; overflow: hidden; text-overflow: ellipsis;
                              white-space: nowrap; }
.merkform .veldrij .vwijzig { font-size: 13px; color: var(--fg-3); flex: 0 0 auto;
                              text-decoration: underline; text-decoration-color: var(--line-2); }
.merkform .veldrij .vwijzig::after { content: "wijzig"; }
.merkform .veldrij[open] .vwijzig::after { content: "inklappen"; }
.merkform .veldrij[open] > summary { padding-bottom: 4px; }
.merkform .veldrij[open] .vwaarde { display: none; }
.merkform .veldrij[open] .vlabel { color: var(--fg); }
.merkform .veldrij .vveld { padding: 2px 2px 16px; }
.merkform .vswatches .swatch { margin-right: 4px; }
.merkform .vlogo { height: 26px; max-width: 96px; object-fit: contain;
                   vertical-align: middle; border-radius: 4px; }

/* Aanbod: woningen als kaarten met een omslagfoto. De hele kaart is de knop:
   klik op het adres, de foto of "Maak reel" en de woning gaat in de wachtrij. */
.woninggrid { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.woningform { margin: 0; }
.woningkaart {
  display: flex; align-items: center; gap: 15px; width: 100%;
  text-align: left; padding: 11px; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1);
  color: inherit; text-decoration: none;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.woningkaart:hover { border-color: var(--line-2); box-shadow: var(--sh-2);
                     transform: translateY(-1px); }
button.woningkaart { font: inherit; cursor: pointer; }
button.woningkaart:focus-visible { outline: none; border-color: var(--brass);
                                    box-shadow: 0 0 0 3px rgba(169, 124, 47, .25); }
/* Een zacht foto-icoon als plaatshouder: te zien terwijl de thumbnail laadt of
   als er geen foto is, zodat er nooit een leeg grijs vlak staat. */
.wthumb { flex: 0 0 auto; width: 94px; height: 68px; border-radius: 10px;
          overflow: hidden; display: flex; align-items: center; justify-content: center;
          background: var(--surface-2) center / 26px no-repeat
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23C4C4BD' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 20'/%3E%3C/svg%3E"); }
.wthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.winfo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.winfo b { font-size: 15.5px; font-weight: 600;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsub { color: var(--fg-3); font-size: 13px; }
.wactie { flex: 0 0 auto; margin-left: auto; padding-left: 8px; }
.wcta { display: inline-block; font-size: 13px; font-weight: 600; color: #fff;
        background: var(--fg); padding: 8px 15px; border-radius: 999px; white-space: nowrap; }
.woningkaart:hover .wcta { background: #000; }
.wbekijk { display: inline-block; font-size: 13px; font-weight: 600; color: var(--fg-2);
           border: 1px solid var(--line-2); padding: 7px 15px; border-radius: 999px;
           white-space: nowrap; transition: border-color .14s ease, color .14s ease; }
.woningkaart:hover .wbekijk { border-color: var(--fg-3); color: var(--fg); }

/* Rond icoonknopje, bijvoorbeeld verversen. */
.icoonknop { display: inline-flex; align-items: center; justify-content: center;
             width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto;
             border: 1px solid var(--line); background: var(--surface);
             color: var(--fg-2); box-shadow: var(--sh-1);
             transition: color .14s ease, border-color .14s ease; }
.icoonknop:hover { color: var(--brass); border-color: var(--line-2); }

@media (max-width: 560px) {
  .wthumb { width: 72px; height: 54px; }
  .wcta { padding: 7px 13px; }
}

/* Detailpagina van één woning: foto's, kenmerken, omschrijving. Zo zie je de
   woning eerst en maak je de reel pas met de knop. */
.woningkop { display: flex; align-items: flex-start; justify-content: space-between;
             gap: 18px; flex-wrap: wrap; margin: 6px 0 22px; }
.woningactie { flex: 0 0 auto; }
/* Niet paginabreed: op een breed scherm werd een 3:2-hero al gauw 1100px en
   nam die het hele scherm. Compacter leest rustiger en laat de kenmerken sneller
   zien. */
.galerij { margin-bottom: 26px; max-width: 560px; }
.galerij-hero { position: relative; border-radius: var(--r-lg); overflow: hidden;
                aspect-ratio: 3 / 2; box-shadow: var(--sh-1);
                background: var(--surface-2) center / 40px no-repeat
                  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23C4C4BD' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 20'/%3E%3C/svg%3E"); }
.galerij-hero img { width: 100%; height: 100%; object-fit: cover; display: block;
                    transition: opacity .12s ease; }
.galerij-nav { position: absolute; top: 50%; transform: translateY(-50%);
               width: 44px; height: 44px; border-radius: 50%; border: none;
               cursor: pointer; background: rgba(0, 0, 0, .42); color: #fff;
               font-size: 26px; line-height: 1; padding: 0 0 3px;
               display: flex; align-items: center; justify-content: center;
               opacity: .9; transition: opacity .14s ease, background .14s ease; }
.galerij-nav:hover { opacity: 1; background: rgba(0, 0, 0, .62); }
.galerij-nav.vorige { left: 12px; }
.galerij-nav.volgende { right: 12px; }
.galerij-teller { position: absolute; bottom: 12px; right: 12px;
                  background: rgba(0, 0, 0, .55); color: #fff; font-size: 12.5px;
                  font-weight: 600; padding: 4px 11px; border-radius: 99px;
                  font-variant-numeric: tabular-nums; }
.galerij-strip { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto;
                 padding-bottom: 4px; scrollbar-width: thin; }
.galerij-thumb { flex: 0 0 auto; width: 92px; height: 66px; padding: 0; cursor: pointer;
                 border: 2px solid transparent; border-radius: 9px; overflow: hidden;
                 background: var(--surface-2); }
.galerij-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galerij-thumb.actief { border-color: var(--brass); }
.woningdetail { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.kenmerken { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; margin: 6px 0 0; }
.kenmerken > div { display: flex; justify-content: space-between; gap: 12px;
                   padding: 9px 0; border-bottom: 1px solid var(--line); }
.kenmerken dt { color: var(--fg-3); font-size: 13.5px; }
.kenmerken dd { margin: 0; font-weight: 560; font-size: 13.5px; text-align: right; }
.omschrijving { white-space: pre-line; color: var(--fg-2); font-size: 14.5px;
                line-height: 1.65; margin: 6px 0 0; max-height: 360px; overflow-y: auto; }
@media (max-width: 720px) {
  .woningdetail { grid-template-columns: 1fr; }
  .kenmerken { grid-template-columns: 1fr; }
}

/* Verzorgde opsomming met een brass-vinkje i.p.v. kale browser-bolletjes. */
.checklijst { list-style: none; margin: 4px 0 0; padding: 0;
              display: flex; flex-direction: column; gap: 9px; }
.checklijst li { position: relative; padding-left: 26px; font-size: 13.5px;
                 line-height: 1.55; color: var(--fg-2); }
.checklijst li::before { content: ""; position: absolute; left: 3px; top: 4px;
                         width: 9px; height: 5px; transform: rotate(-45deg);
                         border-left: 2px solid var(--brass); border-bottom: 2px solid var(--brass); }

.grid { display: grid; gap: 14px; }
.grid.stats { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.grid.reels { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
.grid.photos { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }

/* Flex-kolom met de waarde onderaan: een label dat over twee regels loopt
   ("Gem. doorlooptijd") duwt zijn getal dan niet lager dan de rest. In een rij
   rekt het raster de kaarten even hoog, dus alle getallen liggen op één lijn. */
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 15px 17px;
  display: flex; flex-direction: column;
}
.stat dt { font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
           color: var(--fg-3); font-weight: 600; margin-bottom: 7px; }
.stat dd { margin: auto 0 0; font-size: 27px; font-weight: 620; letter-spacing: -.03em;
           font-variant-numeric: tabular-nums; line-height: 1.05; }
.stat dd small { font-size: 13px; font-weight: 480; color: var(--fg-3); letter-spacing: 0; }

/* ================================================================= 9:16 */

.reel { display: block; border-radius: var(--r-lg); overflow: hidden;
        border: 1px solid var(--line); background: var(--surface);
        transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.reel:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--line-2); }
.reel .frame { aspect-ratio: 9/16; background: var(--surface-3); position: relative; }
.reel .frame img, .reel .frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel .meta { padding: 11px 13px 12px; border-top: 1px solid var(--line); }
.reel .meta b { display: block; font-size: 14px; font-weight: 580; letter-spacing: -.01em;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reel .meta span { font-size: 12.5px; color: var(--fg-3); }

.reel .badge { position: absolute; top: 8px; left: 8px; padding: 3px 9px;
               border-radius: 99px; font-size: 11px; font-weight: 660;
               letter-spacing: .04em; text-transform: uppercase;
               background: rgba(0,0,0,.72); color: #fff; backdrop-filter: blur(4px); }
.reel .badge.bad { background: var(--bad); }
.reel .badge.live { background: var(--brass); color: #16110A; }

/* ============================================================== cijfers */

.postblok { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px;
            margin-bottom: 12px; background: var(--surface-2); }
.postblok b { margin-right: 8px; }
.postblok .hint { margin-right: 10px; }

.cijferrij { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.cijferrij label { display: flex; flex-direction: column; gap: 4px; margin: 0;
                   font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
                   color: var(--fg-3); flex: 1 1 88px; max-width: 130px; }
.cijferrij input { width: 100%; padding: 8px 10px; font-variant-numeric: tabular-nums; }

/* Kleurveld: de kleur zelf, de code ernaast. Alleen een hexcode tonen betekent
   dat niemand weet welke kleur het is. */
.kleurveld { display: flex; align-items: stretch; gap: 0;
             border: 1px solid var(--line-2); border-radius: var(--r);
             overflow: hidden; background: var(--surface); }
.kleurveld input[type=color] { width: 46px; min-width: 46px; height: auto; padding: 0;
                               border: none; border-right: 1px solid var(--line);
                               border-radius: 0; cursor: pointer; background: none; }
.kleurveld input[type=color]::-webkit-color-swatch-wrapper { padding: 4px; }
/* Een hairline om het staal, anders is wit op een witte kaart geen vlakje maar
   een gat: dan lijkt het veld leeg terwijl er #FFFFFF in staat. */
.kleurveld input[type=color]::-webkit-color-swatch {
  border: 1px solid rgba(0, 0, 0, .16); border-radius: 4px;
}
.kleurveld input[type=text] { border: none; border-radius: 0; flex: 1 1 auto;
                              min-width: 0; font-size: 13px; text-transform: uppercase; }
.kleurveld input[type=text]:focus { box-shadow: none; }
.kleurveld:focus-within { border-color: var(--brass);
                          box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 16%, transparent); }

/* Het kleurvoorbeeld staat in de video over een foto, niet op een vlak in de
   merkkleur. Daarom een donker-neutrale ondergrond: dan zie je de "TE KOOP"-chip
   in de echte merkkleur, precies zoals in beeld. */
.kleurvoorbeeld, .voorbeeldbalk { color: #fff;
  background: linear-gradient(122deg, #3b4048, #22252b); }
.kleurvoorbeeld { margin-top: 16px; border-radius: var(--r); padding: 16px 18px;
                  display: flex; gap: 12px; align-items: center; font-size: 14.5px;
                  font-weight: 520; }
.kleurvoorbeeld .chip { border-radius: 5px; padding: 3px 9px; font-size: 11px;
                        letter-spacing: .08em; font-weight: 700; }

.logogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
            gap: 10px; }
.logokaart { border: 1px solid var(--line); border-radius: var(--r); padding: 8px;
             background: var(--surface); cursor: pointer; font: inherit;
             display: flex; flex-direction: column; gap: 6px; align-items: center; }
.logokaart:hover { border-color: var(--line-2); }
.logokaart.gekozen { border-color: var(--brass); box-shadow: 0 0 0 2px var(--brass-soft); }
/* height plus overflow:hidden op het vak, en de afbeelding vult dat vak met
   object-fit. Alleen max-height werkt niet: een groot PNG rekende zich buiten
   het kaartje en liep over de rand heen. */
.logokaart .vak { width: 100%; height: 56px; display: block;
                  background: var(--surface-2); border-radius: 7px; padding: 5px;
                  overflow: hidden; }
.logokaart img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logokaart .bron { font-size: 11px; color: var(--fg-3); overflow: hidden;
                   text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* =============================================================== account */

.accountkop { display: flex; gap: 18px; align-items: center; margin-bottom: 22px; }
.avatar.groot { flex: 0 0 62px; width: 62px; height: 62px; font-size: 24px; }
.scheiding { height: 1px; background: var(--line); margin: 24px 0; }

/* ============================================== account (premium) */
.accounthero { display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
               padding-bottom: 26px; margin-bottom: 30px;
               border-bottom: 1px solid var(--line); }
/* Donker tegeltje met een warme letter: dezelfde donker-plus-brass sfeer als
   het slotbeeld van elke video, i.p.v. een plat gekleurd cirkeltje. */
.accounthero .initiaal {
  flex: 0 0 66px; width: 66px; height: 66px; border-radius: 19px;
  display: grid; place-items: center;
  font-size: 26px; font-weight: 600; letter-spacing: -.01em; color: #E9D0A0;
  background: radial-gradient(130% 130% at 28% 22%, #262A32, #0B0C0E 68%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07),
              0 8px 20px -10px rgba(11,12,14,.55); }
.accounthero-tekst { min-width: 0; }
.accounthero h1 { margin: 0; font-size: 25px; letter-spacing: -.02em; line-height: 1.1; }
.accounthero .mail { margin: 5px 0 0; color: var(--fg-3); font-size: 14px; }
.accounthero .rol { margin-left: auto; align-self: center; }

.accountgrid { display: grid; align-items: start; gap: 22px;
               grid-template-columns: repeat(auto-fit, minmax(318px, 1fr)); }

/* Iets zachtere, gelaagde schaduw: dit is de pagina waar je even blijft. */
.accountpagina .card { box-shadow: 0 1px 2px rgba(11,12,14,.04),
                                   0 16px 34px -20px rgba(11,12,14,.18); }
.accountpagina .card h2 { font-size: 16px; font-weight: 640;
                          letter-spacing: -.01em; margin: 0 0 16px; }

.kantoornaam { display: block; font-size: 17px; font-weight: 620; letter-spacing: -.01em; }
.kantoormeta { display: flex; flex-direction: column; gap: 2px; margin-top: 5px;
               color: var(--fg-3); font-size: 13.5px; }

.statrij { display: flex; gap: 12px; }
.stategel { flex: 1; border: 1px solid var(--line); border-radius: var(--r);
            padding: 15px 16px; background: var(--surface-2); }
.stategel .getal { display: block; font-size: 27px; font-weight: 640;
                   letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.stategel .wat { display: block; font-size: 12.5px; color: var(--fg-3); margin-top: 6px; }

.accountvoet { display: flex; justify-content: space-between; align-items: center;
               gap: 12px; flex-wrap: wrap; margin-top: 30px; padding-top: 20px;
               border-top: 1px solid var(--line);
               font-size: 13.5px; color: var(--fg-3); }
.accountvoet a { color: var(--fg-2); font-weight: 550; }

/* Het kantoor met het eigen logo op de hoofdkleur: hetzelfde beeld als het
   slotbeeld van de video, dus het logo staat op de ondergrond waarvoor het is
   aangeleverd. */
/* Verticaal: het logo (mogelijk een breed woordmerk) krijgt de volle breedte
   van de kaart, de gegevens eronder. Naast elkaar brak de naam lelijk af. */
.kantoorrij { display: flex; flex-direction: column; align-items: flex-start;
              gap: 14px; margin-top: 14px; }
/* Lichte ondergrond, niet de merkkleur: een magenta logo op een magenta vlak
   verdwijnt. Op wit is elk aangeleverd logo leesbaar, net als op de site van
   de makelaar zelf. */
.logoplate { flex: 0 0 auto; border-radius: var(--r);
             display: inline-flex; align-items: center; justify-content: center;
             padding: 12px 16px; background: #fff; max-width: 100%;
             border: 1px solid var(--line-2); }
/* Vaste hoogte, vrije breedte: een breed woordmerk toont zo op ware verhouding
   i.p.v. piepklein in een vierkant. */
.logoplate img { height: 34px; width: auto; max-width: 240px;
                 object-fit: contain; display: block; }

/* De kop van een kantoorpagina: logo op de hoofdkleur, gegevens ernaast. */
.kantoorkop { display: flex; gap: 18px; align-items: center; margin-top: 6px; }
.kantoorkop .logoplate img { height: 40px; }
@media (max-width: 560px) {
  .kantoorkop { flex-wrap: wrap; }
  .kantoorkop .logoplate img { height: 32px; }
}

/* ============================================================ aanmelden */

.signuprow { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.logovak { flex: 0 0 130px; height: 92px; border: 1px dashed var(--line-2);
           border-radius: var(--r); display: grid; place-items: center;
           background: var(--surface-2); padding: 10px; text-align: center; }
.logovak img { max-width: 100%; max-height: 100%; object-fit: contain; }

.voorbeeldbalk { margin-top: 20px; border-radius: var(--r); padding: 16px 18px;
                 display: flex; gap: 12px; align-items: center; font-size: 14.5px;
                 font-weight: 520; }
.voorbeeldbalk .chip { background: rgba(255,255,255,.22); border-radius: 5px;
                       padding: 3px 9px; font-size: 11px; letter-spacing: .08em;
                       font-weight: 700; }

/* Een link om door te sturen, met de knoppen ernaast.
   Hier stond alleen een regel voor `.invitebox input` met `flex: 1 1 320px`,
   maar de container zelf was nooit een flexbox. Die flex deed dus niets, het
   veld viel terug op width:100% en de knop belandde op een eigen regel: een
   volle balk monospace met een losse knop eronder. */
.invitebox { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
             padding: 7px 8px 7px 12px; border: 1px solid var(--line);
             border-radius: var(--r); background: var(--bg); }
.invitebox input { flex: 1 1 260px; min-width: 0; width: auto;
                   font-family: ui-monospace, Menlo, Consolas, monospace;
                   font-size: 12.5px; color: var(--fg-2);
                   background: transparent; border: 0; padding: 4px 0;
                   text-overflow: ellipsis; }
.invitebox input:hover, .invitebox input:focus {
  border: 0; box-shadow: none; outline: none; color: var(--fg); }
.invitebox .btn { flex: 0 0 auto; }

@media (max-width: 620px) {
  /* Op een telefoon past de url en een knop niet naast elkaar. De link krijgt
     zijn eigen regel en de knoppen delen de tweede. */
  .invitebox input { flex: 1 1 100%; }
  .invitebox .btn { flex: 1 1 auto; }
}

.labelrow { display: flex; align-items: center; justify-content: space-between;
            gap: 12px; margin-top: 12px; }
.labelrow label { margin: 0; }

/* ============================================================== filters */

/* Snelknoppen bij het inplannen: morgen, overmorgen, volgende week. */
.snelkeuze { display: flex; gap: 5px; flex-wrap: wrap; }
.chip { font: inherit; font-size: 12.5px; line-height: 1; cursor: pointer;
        display: inline-flex; align-items: center; min-height: 38px;
        padding: 8px 13px; border-radius: 999px; white-space: nowrap;
        border: 1px solid var(--line-2); background: var(--surface); color: var(--fg-2); }
.chip:hover { border-color: var(--fg-3); color: var(--fg); }
.chip[aria-pressed=true] { background: var(--fg); color: var(--bg);
                           border-color: var(--fg); }
/* Een gekozen chip is zwart met lichte tekst; zonder deze regel maakte de
   algemene hover de tekst weer donker en werd het zwart op zwart. */
.chip[aria-pressed=true]:hover { color: var(--bg); background: var(--btn-hover);
                                 border-color: var(--btn-hover); }

/* Een schakelaar met uitleg ernaast. Het vinkje bovenaan uitlijnen en niet in
   het midden: bij drie regels tekst zweeft hij anders halverwege. */
/* Zelfde reden als in site.css: op een telefoon zijn deze links te laag om
   met je duim te raken. Alleen navigatie en voettekst, niet elke link. */
@media (max-width: 720px) {
  .nav a, .foot a, .side a {
    display: inline-flex; align-items: center; min-height: 40px;
  }
}

.schakel { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }
.schakel input[type=checkbox] { margin-top: 3px; flex: 0 0 auto; }
.schakel > span { display: grid; gap: 3px; }
.schakel .hint { max-width: 62ch; }

.filterbar { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.filterbar input[type=search] { flex: 1 1 260px; }
.filterbar select { flex: 0 1 190px; }

/* Zoekbare kantoorkiezer: een tekstveld met een zwevende trefferlijst eronder.
   Zie kantoorkiezer.js. */
.kkiezer { position: relative; width: 220px; max-width: 100%; }
.filterbar .kkiezer { flex: 0 1 220px; width: auto; }
.kkiezer .kk-zoek { width: 100%; }
.kk-lijst {
  position: absolute; z-index: 60; top: calc(100% + 5px); left: 0; right: 0;
  margin: 0; padding: 6px; list-style: none; max-height: 320px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r); box-shadow: 0 14px 34px rgba(0,0,0,.16);
}
.kk-optie {
  padding: 9px 11px; border-radius: 8px; cursor: pointer; font-size: 14.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kk-optie:hover, .kk-optie.actief { background: var(--surface-2); }
@media (max-width: 620px) {
  .kkiezer, .filterbar .kkiezer { flex: 1 1 100%; }
}

/* Op een telefoon bleven die 190px staan: twee keuzelijsten die elk een eigen
   regel pakten zonder hem te vullen, met de knop half naast de onderste
   geklemd. Drie regels voor wat één rij hoort te zijn. Hier krijgt elk veld de
   volle breedte en delen de knoppen de laatste regel. */
@media (max-width: 620px) {
  .filterbar { gap: 8px; }
  .filterbar input[type=search], .filterbar select { flex: 1 1 100%; }
  .filterbar .btn { flex: 1 1 auto; }
}

/* iOS zoomt in op elk formulierveld met een letter kleiner dan 16px, en komt
   daarna niet vanzelf terug. Je tikt op een keuzelijst en de hele pagina staat
   scheef. Op de desktop blijft 14.5px staan, want daar speelt het niet. */
@media (max-width: 620px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]),
  select, textarea { font-size: 16px; }
}

.pager { display: flex; gap: 14px; align-items: center; justify-content: center;
         margin-top: 30px; }

.player { width: 100%; max-width: 330px; aspect-ratio: 9/16; display: block;
          border-radius: var(--r-lg); border: 1px solid var(--line-2);
          background: #000; box-shadow: var(--sh-3); }

/* =========================================================== voortgang */

.progress { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: 99px;
                background: linear-gradient(90deg, var(--brass), color-mix(in srgb, var(--brass) 60%, #fff));
                transition: width .5s cubic-bezier(.4,0,.2,1); }

.steps { display: flex; flex-direction: column; margin-top: 20px; }
.step { display: flex; align-items: center; gap: 12px; padding: 10px 0;
        font-size: 14px; color: var(--fg-3); border-bottom: 1px solid var(--line); }
.step:last-child { border-bottom: none; }
.step .dot { width: 8px; height: 8px; border-radius: 99px; background: var(--line-2); flex-shrink: 0; }
.step.on { color: var(--fg); font-weight: 540; }
.step.on .dot { background: var(--brass);
                box-shadow: 0 0 0 4px color-mix(in srgb, var(--brass) 22%, transparent); }
.step.done { color: var(--fg-2); }
.step.done .dot { background: var(--ok); }
.step time { margin-left: auto; font-size: 11.5px; color: var(--fg-3);
             font-family: ui-monospace, Menlo, Consolas, monospace; }

/* =============================================================== pills */

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--fg-3);
  white-space: nowrap;
}
/* Geen label maar echte tekst (bv. een songtitel): geen schreeuwerige kapitalen. */
.pill.zacht { text-transform: none; letter-spacing: normal; font-size: 12.5px; color: var(--fg-2); }
.pill.ok   { color: var(--ok);   background: var(--ok-bg);   border-color: transparent; }
.pill.warn { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.pill.bad  { color: var(--bad);  background: var(--bad-bg);  border-color: transparent; }
.pill.live { color: var(--brass); background: var(--brass-soft); border-color: var(--brass-line); }
.pill.live::before {
  content: ""; width: 5px; height: 5px; border-radius: 99px; background: var(--brass);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

.swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block;
          vertical-align: -2px; border: 1px solid rgba(0,0,0,.14); }

/* =============================================================== table */

.tablewrap { overflow-x: auto; min-width: 0; border: 1px solid var(--line);
             border-radius: var(--r-lg);
             background: var(--surface); box-shadow: var(--sh-1); }
table { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 640px; }
th, td { text-align: left; padding: 12px 15px; border-bottom: 1px solid var(--line); }
thead th { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
           color: var(--fg-3); font-weight: 600; background: var(--surface-2); white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .1s ease; }
tbody tr:hover { background: var(--surface-2); }

/* Een tabel die op een telefoon geen scrollende strook is maar een stapel
   kaartjes: kop verdwijnt, elke rij wordt een blok, en elke cel toont zijn
   koptekst ervoor (data-label). Zo blijft het leesbaar zonder zijwaarts
   schuiven. Zet de class `resptabel` op een <table> om dit aan te zetten. */
@media (max-width: 620px) {
  .resptabel { min-width: 0; }
  .resptabel thead { display: none; }
  .resptabel tbody tr { display: block; border: 1px solid var(--line);
                        border-radius: var(--r); margin-bottom: 10px;
                        padding: 4px 14px; background: var(--surface); }
  .resptabel tbody tr:hover { background: var(--surface); }
  .resptabel td { display: flex; align-items: baseline; justify-content: space-between;
                  gap: 14px; padding: 8px 0; text-align: right;
                  border-bottom: 1px solid var(--line); }
  .resptabel tr td:last-child { border-bottom: none; }
  .resptabel td::before { content: attr(data-label); text-align: left;
                          color: var(--fg-3); font-size: 12px; font-weight: 560;
                          white-space: nowrap; flex-shrink: 0; }
  .resptabel td:not([data-label])::before { display: none; }
  /* De knoppen onder elkaar en op volle breedte, niet rechts geklemd. */
  .resptabel td.rowtools { flex-direction: column; align-items: stretch;
                           text-align: left; gap: 8px; padding-top: 12px; }
  .resptabel td.rowtools > form { margin: 0; }
  .resptabel td.rowtools .btn { width: 100%; }
}

/* ==================================================== huisstijlen-beheer */
/* /admin/brands schaalt naar honderden kantoren: één dichte, doorzoekbare
   tabel per groep, en het toevoegen/bewerken in een uitklappaneel zodat de
   lijst het volle scherm krijgt. */
.merkform { border: 1px solid var(--line); border-radius: var(--r-lg);
            background: var(--surface); box-shadow: var(--sh-1); margin: 22px 0 6px; }
.merkform > summary { list-style: none; cursor: pointer; padding: 14px 18px;
                      display: flex; align-items: center; gap: 13px;
                      border-radius: var(--r-lg); transition: background .12s ease; }
.merkform > summary::-webkit-details-marker { display: none; }
.merkform > summary:hover { background: var(--surface-2); }
.merkform[open] > summary { background: transparent;
                            border-radius: var(--r-lg) var(--r-lg) 0 0;
                            border-bottom: 1px solid var(--line); }
/* Een +-teken dat naar een × draait als het paneel openstaat: meteen duidelijk
   dat dit toevoegt én dat je het weer dicht kunt klappen. */
.merkform-icoon { position: relative; flex: none; width: 30px; height: 30px;
                  border-radius: 8px; background: var(--brass-soft); }
.merkform-icoon::before, .merkform-icoon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 2px; border-radius: 2px; background: var(--brass);
  transform: translate(-50%, -50%); transition: transform .18s ease; }
.merkform-icoon::after { transform: translate(-50%, -50%) rotate(90deg); }
.merkform[open] .merkform-icoon::before { transform: translate(-50%, -50%) rotate(45deg); }
.merkform[open] .merkform-icoon::after { transform: translate(-50%, -50%) rotate(-45deg); }
.merkform-tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.merkform-titel { font-weight: 600; font-size: 14.5px; }
.merkform-tekst .hint { font-size: 12.5px; }
.merkform-in { padding: 18px; }

.merkbalk { display: flex; align-items: center; gap: 14px; margin: 24px 0 2px; }
.merkbalk .merkzoek { flex: 1 1 300px; max-width: 420px; }
.merktel { white-space: nowrap; }

.merkgroep { margin-top: 6px; }
details.merkgroep { margin-top: 18px; }
.merkgroep > .sectionhead { margin-top: 22px; }
.merktabel { min-width: 720px; }
.merktabel td { vertical-align: middle; }
.merknaam { display: inline-flex; align-items: center; gap: 11px; color: inherit; min-width: 0; }
.merknaam img { width: 30px; height: 30px; border-radius: 7px; object-fit: contain;
                background: var(--surface-2); flex: none; }
.merknaam img.leeg { visibility: hidden; }
.merknaam-t { min-width: 0; }
.merknaam-t b { font-weight: 560; display: block; }
.merknaam-t .hint { font-size: 11.5px; }
.merknaam:hover b { color: var(--brass); }
.merkmerk { display: inline-flex; align-items: center; gap: 8px; }
.merkacties { text-align: right; white-space: nowrap; }
.merkacties form { display: inline; margin: 0; }
.merkweg { color: var(--fg-3); }
.merkweg:hover { color: var(--bad); border-color: var(--bad); }

/* ======================================================== beeldredactie */

.shot { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
        background: var(--surface); }
.shot .thumb { aspect-ratio: 3/2; background: var(--surface-3); position: relative; }
.shot .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot.out .thumb img { filter: grayscale(1); opacity: .38; }
.shot .thumb .score, .shot .thumb .order {
  position: absolute; top: 7px; border-radius: 5px; padding: 2px 7px;
  font-size: 11.5px; font-weight: 700;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.shot .thumb .score { right: 7px; background: rgba(0,0,0,.7); color: #fff; }
.shot .thumb .order { left: 7px; background: var(--brass); color: #16110A; }
.shot .info { padding: 9px 11px 10px; }
.shot .info b { display: block; font-size: 13px; font-weight: 570; }
.shot .info span { display: block; font-size: 11.5px; color: var(--fg-3); line-height: 1.4; }

/* ========================================================== scenestrip */

.strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; }
.cell { flex: 0 0 134px; border: 1px solid var(--line); border-radius: var(--r);
               overflow: hidden; background: var(--surface); position: relative; }
.cell.off { opacity: .32; }
.cell .frame { aspect-ratio: 9/16; }
.cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cell .cap { padding: 7px 9px 8px; font-size: 11.5px; line-height: 1.35; }
.cell .cap b { display: block; font-weight: 590; }
.cell .cap span { color: var(--fg-3); font-size: 10.5px;
                         font-family: ui-monospace, Menlo, Consolas, monospace; }
.cell .toggle { position: absolute; top: 6px; right: 6px; width: 21px; height: 21px;
                       border: none; border-radius: 6px; cursor: pointer; line-height: 1;
                       font-size: 12px; font-weight: 700; background: rgba(0,0,0,.62); color: #fff; }

/* ============================================================ varianten */

.tabs { display: flex; gap: 3px; padding: 3px; border-radius: var(--r);
        background: var(--surface-2); border: 1px solid var(--line); width: fit-content; }
.tabs button { font: inherit; font-size: 13px; font-weight: 530; cursor: pointer;
               padding: 6px 13px; border-radius: var(--r-sm); border: none;
               background: transparent; color: var(--fg-2); }
.tabs button.on { background: var(--surface); color: var(--fg); box-shadow: var(--sh-1); }

/* =============================================================== overig */

.note { border: 1px solid var(--brass-line); background: var(--brass-soft);
        border-radius: var(--r); padding: 13px 16px; font-size: 13.5px; color: var(--fg-2); }
.note b { color: var(--fg); }
.callout { border-left: 3px solid var(--line-2); padding-left: 14px; color: var(--fg-2); font-size: 14px; }
.caption-box { background: var(--surface-2); border: 1px solid var(--line);
               border-radius: var(--r); padding: 16px 18px; font-size: 14.5px;
               line-height: 1.62; white-space: pre-wrap; }
.tags { margin-top: 9px; color: var(--fg-3); font-size: 13px; }
.empty { text-align: center; padding: 56px 24px; color: var(--fg-3);
         border: 1px dashed var(--line-2); border-radius: var(--r-lg); font-size: 14.5px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 7px 20px; font-size: 14px; }
.kv dt { color: var(--fg-3); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ================================================================ muziek */

.beds { margin-top: 16px; border-top: 1px solid var(--line); }
.bed { display: flex; gap: 14px; align-items: center; justify-content: space-between;
       padding: 11px 0; border-bottom: 1px solid var(--line); }
.bed:last-child { border-bottom: none; }
.bed b { display: block; font-size: 13.5px; font-weight: 560; }
.bed .hint { display: block; }
.bed audio { height: 32px; max-width: 190px; flex: 0 1 190px; }

/* =============================================================== beheer */

.note.ok  { border-color: var(--ok);  background: var(--ok-bg);  }
.note.bad { border-color: var(--bad); background: var(--bad-bg); }
.note.ok, .note.bad { margin-bottom: 18px; }

/* Eén kolom, geen smalle zijbalk.
   Het bewerkscherm is een formulier met velden naast elkaar en een eigen kop;
   dat in 320px persen levert een kolom op waarin niets past. Het staat nu onder
   de lijst, met een anker zodat "Bewerken" er ook echt naartoe springt. */
.userlayout { display: grid; gap: 26px; align-items: start;
              grid-template-columns: minmax(0, 1fr); }
.userlayout .bewerkkaart, .userlayout > form.card { max-width: 720px; }
/* Ruimte onder de kaart, anders kán de pagina niet ver genoeg scrollen om de
   scroll-margin te halen: de sprong naar #bewerk eindigt dan tegen de onderkant
   en de kop van de kaart valt achter de plakkende balk. */
.userlayout { padding-bottom: 34vh; }
/* minmax(0, 1fr) en niet 1fr: een kale 1fr is minmax(auto, 1fr) en weigert
   te krimpen onder de min-content-breedte van zijn inhoud. Met een tabel van
   minimaal 560px erin duwde die kolom de hele pagina zijwaarts, ondanks de
   overflow op .tablewrap. */
@media (max-width: 1180px) { .userlayout { grid-template-columns: minmax(0, 1fr); } }

.who { display: flex; gap: 11px; align-items: center; }
.who b { display: block; font-weight: 570; }
.who .hint { display: block; }

.avatar { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
          display: grid; place-items: center; font-size: 13px; font-weight: 640;
          color: var(--brass); background: var(--brass-soft);
          border: 1px solid var(--brass-line); }

table.users { min-width: 560px; }
table.users th, table.users td { padding: 11px 12px; vertical-align: middle; }
table.users tr.picked { background: var(--brass-soft); }
table.users tr.picked td { border-color: var(--brass-line); }
/* Geen display:flex hier. Dat overschrijft display:table-cell, de cel valt dan
   buiten de rij-indeling en de browser zet er een eigen cel omheen: de knoppen
   staan dan op een wit blok naast de tabel. */
.rowtools { text-align: right; white-space: nowrap; }
.rowtools > * { display: inline-block; vertical-align: middle; }
.rowtools > * + * { margin-left: 4px; }

/* Alle kantoorkaarten even hoog, met de knoppen onderaan op één lijn, ook als
   de ene naam over twee regels loopt en de andere niet. grid-auto-rows:1fr rekt
   elke rij tot de hoogste; de kaart is een flex-kolom met de voet eronder. */
.grid.cards { grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 16px;
              grid-auto-rows: 1fr; }
.brandcard { display: flex; flex-direction: column; height: 100%; }
.brandcard .brandvoet { margin-top: auto; padding-top: 16px; }
.brandcard .who { min-width: 0; }
.brandcard .who > .swatch { flex: 0 0 auto; }
.brandcard .who > span { min-width: 0; }
.brandcard .who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.swatch.big { width: 30px; height: 30px; border-radius: 8px; vertical-align: 0; }

.chip { display: inline-flex; gap: 7px; align-items: center; text-decoration: none;
        font-size: 13px; color: var(--fg-2); padding: 6px 12px; border-radius: 99px;
        border: 1px solid var(--line); background: var(--surface); }
.chip:hover { border-color: var(--line-2); color: var(--fg); }
.chip.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
/* Zelfde valkuil als bij de aria-pressed-chips: een actieve chip mag bij hover
   niet zijn lichte tekst op een donkere achtergrond verliezen. */
.chip.on:hover { color: var(--bg); background: var(--btn-hover);
                 border-color: var(--btn-hover); }

/* Niet aan .brandcard hangen: hetzelfde blokje staat ook op het accountscherm,
   en zonder display:block plakte daar "0" en "reels" aan elkaar. */
.brandnums { display: flex; gap: 22px; margin: 18px 0 14px; flex-wrap: wrap; }
.brandnums .big { display: block; font-size: 21px; font-weight: 620;
                  letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.brandnums .hint { display: block; }

.meter { height: 5px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--brass); border-radius: 99px; }
.meter.near span { background: var(--warn); }
.meter.full span { background: var(--bad); }

.attention { overflow: hidden; }
.attention .line { display: flex; gap: 13px; align-items: center;
                   padding: 11px 17px; border-bottom: 1px solid var(--line); }
.attention .line:last-child { border-bottom: none; }
.attention .line:hover { background: var(--surface-2); }
.attention .mark { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%;
                   background: var(--warn); }
.attention .mark.bad { background: var(--bad); }
.attention .body { min-width: 0; flex: 1; text-decoration: none; color: inherit; }
.attention .body b { display: block; font-size: 14px; font-weight: 560; }
.attention .body .hint { display: block; overflow: hidden; text-overflow: ellipsis;
                         white-space: nowrap; }
.attention .when { white-space: nowrap; }

/* Verloop: kale kolommen, geen assen. Het gaat om de vorm en de uitschieters,
   niet om exacte aantallen; die staan in de tooltip. */
.chart { display: flex; align-items: flex-end; gap: 3px; height: 96px;
         position: relative; }
.chart .col { flex: 1; height: 100%; display: flex; align-items: flex-end;
              position: relative; border-radius: 3px;
              padding: 0; border: none; background: transparent; cursor: pointer; }
.chart .col:hover, .chart .col:focus-visible { background: var(--surface-2); }
.chart .col:hover .bar, .chart .col:focus-visible .bar { filter: brightness(1.12); }

/* De aanwijzing zweeft boven de staven en volgt de muis in de breedte. Een
   vaste plek werkt niet: bij de eerste en de laatste dag van de maand valt hij
   dan buiten de kaart. */
.charttip {
  position: absolute; bottom: calc(100% + 9px); left: 0; z-index: 5;
  pointer-events: none; white-space: nowrap;
  padding: 8px 11px; border-radius: var(--r-sm);
  background: var(--fg); color: var(--bg);
  font-size: 12.5px; line-height: 1.45;
  box-shadow: var(--sh-2);
}
.charttip[hidden] { display: none; }
.charttip b { display: block; font-weight: 600; margin-bottom: 2px; }
.charttip .rij { display: flex; gap: 8px; justify-content: space-between; }
.charttip .rij span:last-child { font-variant-numeric: tabular-nums; }
.charttip .mis { color: var(--bad); }
.charttip::after {
  content: ""; position: absolute; top: 100%; left: var(--pijl, 50%);
  margin-left: -5px; border: 5px solid transparent; border-top-color: var(--fg);
}
/* Een dag zonder reels krijgt een streepje op de nullijn, geen staaf. Anders
   ziet een lege dag eruit als een dag met één reel. */
.chart .col.leeg::after { content: ""; width: 100%; height: 2px; border-radius: 2px;
                          background: var(--line-2); }
.chart .bar { width: 100%; background: var(--brass); border-radius: 3px 3px 0 0;
              align-self: flex-end; }
.chart .bar.fail { position: absolute; left: 0; bottom: 0; background: var(--bad); }
.chartaxis { display: flex; justify-content: space-between; margin-top: 9px;
             font-size: 12px; color: var(--fg-3); }

.timings .tline { display: flex; gap: 14px; align-items: center; padding: 5px 0; }
.timings .name { flex: 0 0 104px; font-size: 13px; color: var(--fg-2); }
.timings .track { flex: 1; height: 7px; border-radius: 99px; background: var(--surface-2); }
.timings .track span { display: block; height: 100%; border-radius: 99px;
                       background: var(--brass-line); }
.timings .val { flex: 0 0 52px; text-align: right; font-size: 12.5px; color: var(--fg-3);
                font-variant-numeric: tabular-nums; }

/* =============================================================== footer */

.foot { border-top: 1px solid var(--line); margin-top: 72px; }
.foot-inner { max-width: 1120px; margin: 0 auto; padding: 20px 24px 26px;
              display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
              font-size: 13px; color: var(--fg-3); }
.foot-inner .spacer { flex: 1; }
.foot-inner a { color: var(--fg-3); }
.foot-inner a:hover { color: var(--fg); }

/* ======================================================= layout-editor */

.editor-grid { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(280px, 386px);
               gap: 28px; align-items: start; }
.preview-col { position: sticky; top: calc(var(--nav-h) + 22px); }

/* De speler paste niet op één scherm.
   Een 9:16-beeld van 386px breed is 686px hoog, en met de balk, de kop en het
   bijschrift erbij stak hij onderaan uit. Je moest helemaal naar beneden
   scrollen om te zien wat je aan het instellen was, terwijl de bediening
   bovenaan staat.

   Daarom is dit vanaf 1000px geen pagina meer die je scrolt maar twee panelen
   naast elkaar: links scrollen de instellingen in hun eigen vak, rechts staat
   de speler stil en in zijn geheel in beeld. Zo blijft wat je verandert en wat
   je ziet altijd tegelijk zichtbaar.

   De verhouding blijft 9:16, dus wat je ziet blijft exact de export. */
@media (min-width: 1001px) {
  /* Alleen de losse layout-pagina (/admin/layout) wordt twee vaste panelen met
     een eigen scrollvak. Ingebed onder Huisstijl niet: daar is een tweede
     scrollgebied middenin de pagina juist waar het "moeilijk scrollen" vandaan
     kwam. Ingebed laten we de pagina gewoon scrollen met de speler die
     meeschuift en blijft plakken. */
  .editor-grid:not(.ingebed) { height: calc(100dvh - var(--nav-h) - 118px); }
  .editor-grid:not(.ingebed) > :first-child { overflow-y: auto; height: 100%;
                                padding-right: 12px; scrollbar-width: thin; }
  .editor-grid:not(.ingebed) .preview-col { position: static; height: 100%; }
}

/* Een vaste hoogte en niet max-height: met alleen een bovengrens blijft de
   hoogte onbepaald, en dan kan `width: auto` met een beeldverhouding niets
   uitrekenen. Het resultaat was een speler van nul bij nul. */
.preview-col #player {
  height: min(686px, calc(100dvh - var(--nav-h) - 168px));
  aspect-ratio: 9 / 16;
  width: auto; max-width: 100%;
  margin: 0 auto;
}
.preview-col #player > * { height: 100% !important; width: auto !important;
                           aspect-ratio: 9 / 16; margin: 0 auto; }

/* De autosave-melding van de layout-editor. Een tekstvlakje, geen knop; alleen
   bij een fout wordt hij aanklikbaar en kleurt hij mee. */
.savestatus { display: inline-flex; align-items: center; gap: 7px;
              padding: 8px 14px; border-radius: 99px; font: inherit;
              font-size: 13px; color: var(--fg-3); background: var(--surface-2);
              border: 1px solid var(--line); cursor: default;
              transition: color .15s ease, background .15s ease, border-color .15s ease; }
.savestatus.ok { color: var(--ok); background: var(--ok-bg); border-color: transparent; }
.savestatus.fout { color: var(--bad); background: var(--bad-bg);
                   border-color: transparent; cursor: pointer; }
.savestatus[disabled] { opacity: 1; }

.ctrl { display: flex; align-items: center; gap: 12px; padding: 9px 0;
        border-bottom: 1px solid var(--line); }
.ctrl:last-child { border-bottom: none; }
.ctrl > span { flex: 0 0 124px; font-size: 13.5px; color: var(--fg-2); }
.ctrl > input[type=range] { flex: 1; accent-color: var(--brass); min-width: 84px; }
.ctrl > input[type=color] { width: 44px; height: 30px; padding: 2px; cursor: pointer;
                            border: 1px solid var(--line-2); border-radius: var(--r-sm);
                            background: var(--surface); }
.ctrl > b { flex: 0 0 40px; text-align: right; font-size: 12.5px; color: var(--fg-3); font-weight: 600; }
.ctrl > input[type=text], .ctrl > select { flex: 1; padding: 8px 11px; font-size: 13.5px; }

label.check { display: flex; align-items: center; gap: 10px; cursor: pointer;
              padding: 9px 0; margin: 0; font-size: 14px; font-weight: 480; color: var(--fg);
              border-bottom: 1px solid var(--line); }
label.check:last-child { border-bottom: none; }
label.check input { accent-color: var(--brass); width: 15px; height: 15px; }

/* ============================================================== schermen */

@media (max-width: 1000px) {
  .app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; border-right: none;
          border-bottom: 1px solid var(--line); display: flex; gap: 4px;
          overflow-x: auto; padding: 10px 14px; }
  .side h6 { display: none; }
  .side a::before, .side a.on::before { display: none; }
  .side a { white-space: nowrap; }
  .main { padding: 24px 18px 70px; }
  .editor-grid { grid-template-columns: 1fr; }
  /* De speler eerst. Onder elkaar gezet stond hij ná alle instellingen, dus
     schoof je aan tien sliders zonder ooit het beeld te zien waar het om
     gaat. */
  .preview-col { position: static; max-width: 330px; order: -1;
                 margin: 0 auto 8px; }
  .foot-inner { grid-template-columns: 1fr 1fr; }
}
/* Vanaf hier gaat de balk over op het uitklappaneel. De grens ligt op de
   breedte waarop merk plus links plus knop elkaar begonnen te verdringen,
   niet op een rond getal. */
@media (max-width: 860px) {
  .navknop { display: inline-flex; }
  .nav .breed, .nav .navacties, .nav .sep { display: none; }
  /* Het hele scherm onder de balk, niet een zwevend blok. Half open hing het
     menu als een strook over de pagina heen en las je hero, links en knoppen
     door elkaar. Nu is het één vlak: links bovenaan, de knoppen onderaan
     vastgezet waar je duim toch al is. */
  .navpaneel:not([hidden]) {
    display: flex; flex-direction: column;
    position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; z-index: 39;
    background: var(--bg);
    padding: 10px 20px calc(18px + env(safe-area-inset-bottom));
    overflow-y: auto;
    animation: paneelin .16s ease-out;
  }
  @keyframes paneelin { from { opacity: 0; transform: translateY(-6px); } }
  @media (prefers-reduced-motion: reduce) {
    .navpaneel:not([hidden]) { animation: none; }
  }
  .navpaneel-knoppen { margin-top: auto; padding-top: 22px; }
  body.menu-open { overflow: hidden; }
  /* Sticky valt terug naar de documentpositie zodra de body overflow:hidden
     krijgt: was je omlaag gescrold, dan verdween de balk (met de sluitknop)
     boven beeld en zag je de pagina eronder aan de bovenkant. Tijdens een open
     menu pinnen we de balk daarom vast, zodat de kruis-knop altijd in beeld is. */
  body.menu-open .nav { position: fixed; top: 0; left: 0; right: 0; }
  /* De zwevende demoknop heeft een hogere laag en prikte dwars door het open
     menu heen. */
  body.menu-open .boekknop { display: none; }
}

@media (max-width: 620px) {
  .wrap { padding: 30px 16px 70px; }
  .nav { padding: 0 14px; }
  h1 { font-size: 27px; }
  .foot-inner { grid-template-columns: 1fr; }

  /* Een rij van invoer plus knop past niet naast elkaar op 390px. Alles op
     eigen regel en op volle breedte; een knop van 90px onder een veld van
     358px leest als een fout, niet als een keuze. */
  .field { gap: 10px; }
  .field > * { flex: 1 1 100% !important; min-width: 0; }
  .field > .btn { width: 100%; }

  /* Duimmaat. 44px is de ondergrens van Apple, 48 die van Material. */
  .btn { min-height: 44px; }
  .btn.sm { min-height: 44px; padding: 10px 14px; }
  .chip, .snelkeuze .chip { min-height: 44px; }
  .tabs button { min-height: 44px; }

  .pagehead { gap: 12px; margin-bottom: 20px; }
  /* Losse actie: volle breedte. Twee acties naast elkaar: elk de helft.
     Twee gestapelde balken van schermbreedte voor bijzaken duwden de video
     een half scherm naar beneden. */
  .pagehead .btn { width: 100%; }
  /* Wrap i.p.v. nowrap: drie knoppen met een lang label (bv. "Goedkeurlink")
     liepen anders zijwaarts uit beeld. */
  .pagehead .row { width: 100%; flex-wrap: wrap; }
  .pagehead .row .btn { width: auto; flex: 1 1 auto; min-width: 0;
                        padding-left: 12px; padding-right: 12px; }

  .empty { padding: 34px 18px; }

  /* Tabellen die niet inklappen (geen .resptabel) hebben min-width:640px en
     duwden zo de hele pagina zijwaarts. Zo scrollt de tabel binnen zijn eigen
     kader en blijft de pagina staan. */
  table:not(.resptabel) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .grid.stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .card.pad { padding: 18px 16px; }
  .sectionhead { margin: 30px 0 12px; }
}

/* Een tabel krimpt niet; die moet in zijn eigen venster kunnen schuiven,
   anders duwt hij de pagina zijwaarts. */
.tabelvenster { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================== plannen

   Een lijst met regels, geen tabel: elke regel is een handeling ("dit gaat
   vandaag online") en geen gegeven om te vergelijken. Het beeld staat erbij
   omdat een makelaar zijn woningen aan de foto herkent en niet aan de
   straatnaam, zeker niet bij tien tegelijk in dezelfde wijk. */

.planrij {
  display: flex; align-items: center; gap: 16px;
  padding: 13px 16px; margin-bottom: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
  transition: box-shadow .14s ease, border-color .14s ease;
}
.planrij:hover { box-shadow: var(--sh-2); border-color: var(--line-2); }
.planrij.laat { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }

/* De geplande post: een kaart met een vaste kopregel en de caption als blok
   eronder. De caption zit bewust búiten de kopregel, zodat openklappen alleen
   naar beneden groeit en het duimpje, het adres en de knoppen op hun plek
   blijven. */
.planpost {
  padding: 14px 16px; margin-bottom: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
  transition: box-shadow .14s ease, border-color .14s ease;
}
.planpost:hover { box-shadow: var(--sh-2); border-color: var(--line-2); }
.planpost.laat { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.planpost-hoofd { display: flex; align-items: center; gap: 16px; }

/* 9:16, net als de video zelf: een platgedrukt duimpje leest als een fout. */
.planbeeld { flex: 0 0 50px; width: 50px; height: 89px; border-radius: 8px;
             overflow: hidden; background: var(--surface-2); display: block; }
.planbeeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.leegbeeld { display: block; width: 100%; height: 100%; background: var(--surface-3); }

.planinfo { flex: 1 1 auto; min-width: 0; }
.planadres { display: block; font-weight: 560; letter-spacing: -.012em;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planadres:hover { text-decoration: underline; text-decoration-color: var(--line-2);
                   text-underline-offset: 3px; }
.planinfo .hint { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
                  margin-top: 3px; }

.plancaption { margin-top: 14px; }
.plancaption summary { cursor: pointer; font-size: 13px; font-weight: 500;
                       color: var(--fg-2); list-style: none; user-select: none;
                       display: inline-flex; align-items: center; gap: 8px; }
.plancaption summary:hover { color: var(--fg); }
.plancaption summary::-webkit-details-marker { display: none; }
/* Een chevron die meedraait i.p.v. een plus/min: dat leest als "uitklappen". */
.plancaption summary::before { content: ""; display: inline-block; width: 6px; height: 6px;
                               border-top: 1.7px solid currentColor;
                               border-right: 1.7px solid currentColor;
                               transform: rotate(45deg); transition: transform .16s ease; }
.plancaption[open] summary::before { transform: rotate(135deg); }
/* De caption als rustig leespaneel, niet als ruwe textarea met resize-handvat. */
.captiontekst { margin-top: 10px; white-space: pre-wrap; word-break: break-word;
                font-size: 13px; line-height: 1.6; color: var(--fg-2);
                background: var(--surface-2); border: 1px solid var(--line);
                border-radius: 10px; padding: 12px 14px;
                max-height: 240px; overflow: auto; }
.plancaption .captionkopie { margin-top: 10px; }

.planacties { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.planacties form { margin: 0; }

/* Twee nette rijen, rechts uitgelijnd: bovenaan wanneer, eronder waar en de
   knop. Alles op één regel was een kluwen van zes losse elementen waarvan
   niemand zag wat bij wat hoorde. */
.planacties.inplannen { flex-direction: column; align-items: flex-end; gap: 8px; }
.inplanrij { display: flex; gap: 7px; align-items: center; justify-content: flex-end;
             flex-wrap: wrap; }
/* max-width en niet width: de algemene invoerregel zet width op 100% en wint
   qua specificiteit van alles; max-width gaat daar altijd overheen. */
.planacties.inplannen select,
.planacties.inplannen input[type=date],
.planacties.inplannen input[type=time] { width: auto; max-width: 160px;
                                         font-size: 13.5px; }
.planacties.inplannen input[type=time] { max-width: 136px; }
/* De rechterruimte is voor het pijltje van de keuzelijst. Zonder dat valt het
   over de laatste letter van "Instagram" heen. */
.planacties.inplannen select { padding: 8px 32px 8px 11px; }
/* Onze eigen kiezers even hoog en even zwaar als de keuzelijst ernaast, zodat
   de rij één balk is en geen verzameling losse knoppen. */
.planacties.inplannen .kiezerknop,
.planacties.inplannen .btn { font-size: 13.5px; padding: 8px 12px; }
.planacties.inplannen .kiezerknop { min-width: 118px; }
.planacties.inplannen .tijdkiezer .kiezerknop { min-width: 90px; }
/* Het paneel hangt buiten de kaart; die mag hem dus niet afknippen. */
.planrij, .planacties, .inplanrij { overflow: visible; }

/* Op de reelpagina staat dezelfde kiezer in een smalle kolom naast de
   keuzelijst; daar mag hij meegroeien in plaats van een vaste breedte houden. */
.field .kiezer { flex: 1 1 150px; }
.field .kiezer .kiezerknop { width: 100%; justify-content: flex-start; }

.stat.alarm { border-color: color-mix(in srgb, var(--bad) 45%, var(--line));
              background: var(--bad-bg); }
.stat.alarm dd { color: var(--bad); }

.gedaanlijst { display: flex; flex-direction: column; gap: 9px; }
.gedaanlijst .row { gap: 10px; font-size: 14px; }

/* ============================================================ aanvragen

   Het tijdstip staat in een eigen kolom links, met een lijn ernaast. Dat leest
   als een agenda: je oog gaat langs de tijden naar beneden en stopt bij die van
   vanmiddag, in plaats van vijf kolommen te moeten scannen. */

.aanvraag {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 15px 17px; margin-bottom: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.aanvraag.nu { border-color: color-mix(in srgb, var(--bad) 42%, var(--line)); }
.aanvraag.af { background: var(--surface-2); box-shadow: none; }
.aanvraag.af .aanvraagwanneer { opacity: .55; }

.aanvraagwanneer {
  flex: 0 0 132px; padding-right: 15px; border-right: 1px solid var(--line);
  align-self: stretch;
}
.aanvraagwanneer b { display: block; font-size: 14px; font-weight: 570;
                     letter-spacing: -.01em; }
.aanvraagwanneer .hint { display: block; font-variant-numeric: tabular-nums; }

.aanvraagwie { flex: 1 1 auto; min-width: 0; }
.aanvraagcontact { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 5px;
                   font-size: 13.5px; }
.aanvraagbericht { margin: 9px 0 0; padding: 9px 11px; border-radius: var(--r-sm);
                   background: var(--surface-2); font-size: 13.5px;
                   color: var(--fg-2); white-space: pre-wrap; }
.aanvraag.af .aanvraagbericht { background: var(--surface); }

/* Twee kolommen: de hoofdactie over de volle breedte, de twee uitzonderingen
   eronder naast elkaar. Drie knoppen onder elkaar maakten de kaart twee keer
   zo hoog als de inhoud erin. */
.aanvraagacties { display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
                  flex-shrink: 0; align-content: start; width: 208px; }
.aanvraagacties form { margin: 0; }
.aanvraagacties .btn { width: 100%; }
.aanvraagacties > :first-child { grid-column: 1 / -1; }
.aanvraagacties > form:only-of-type { grid-column: 1 / -1; }

@media (max-width: 860px) {
  .aanvraag { flex-wrap: wrap; gap: 12px; }
  .aanvraagwanneer { flex: 1 1 100%; padding: 0 0 10px; border-right: none;
                     border-bottom: 1px solid var(--line); }
  .aanvraagwanneer b { display: inline; }
  .aanvraagwanneer .hint { display: inline; margin-left: 8px; }
  .aanvraagacties { width: 100%; }
}

@media (max-width: 720px) {
  /* Op een telefoon is dit geen regel meer maar een kaartje: de knoppen zakken
     eronder en worden breed genoeg voor een duim. */
  .planrij, .planpost-hoofd { flex-wrap: wrap; gap: 12px; }
  .planinfo { flex: 1 1 60%; }
  .planacties { width: 100%; justify-content: stretch; }
  .planacties form { flex: 1 1 0; }
  .planacties .btn { width: 100%; }
  .planacties.inplannen { align-items: stretch; }
  .inplanrij { justify-content: stretch; }
  .planacties.inplannen select,
  .planacties.inplannen input[type=date],
  .planacties.inplannen input[type=time] { flex: 1 1 110px; }
  .planacties.inplannen .snelkeuze { flex: 1 1 100%; }
  .planacties.inplannen .btn { flex: 1 1 auto; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ======================================================= montage-editor

   Een filmstrip die je vastpakt. Slepen is de natuurlijke handeling voor
   volgorde; pijltjesknoppen zijn een omweg die je elke keer opnieuw moet
   uitleggen. De acties staan pas in beeld als je erboven hangt, zodat de
   strook leest als beeld en niet als bedieningspaneel. */

.strip {
  display: flex; gap: 12px; overflow-x: auto;
  padding: 4px 2px 14px;
  /* Bewust geen scroll-snap: de browser snapt dan opnieuw na elke DOM-wijziging,
     en tijdens het herschikken schuift de strook daardoor onder je hand vandaan. */
}
.strip::-webkit-scrollbar { height: 8px; }
.strip::-webkit-scrollbar-track { background: transparent; }
.strip::-webkit-scrollbar-thumb {
  background: var(--line-2); border-radius: 99px; border: 2px solid var(--bg);
}
.strip::-webkit-scrollbar-thumb:hover { background: var(--fg-3); }
.strip { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }

.cell {
  flex: 0 0 148px; margin: 0;
  border-radius: var(--r); overflow: hidden; background: var(--surface);
  border: 1px solid var(--line); cursor: grab;
  transition: box-shadow .14s ease, border-color .14s ease, transform .14s ease;
}
.cell:hover { box-shadow: var(--sh-2); border-color: var(--line-2); }
.cell.dragging { opacity: .35; cursor: grabbing; }
.cell.dropzone { border-color: var(--brass); box-shadow: 0 0 0 3px var(--brass-soft); }

.cell .frame { position: relative; aspect-ratio: 9/16; background: var(--surface-3); }
.cell .frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cell .ord, .cell .dur {
  position: absolute; border-radius: 5px; padding: 2px 6px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
}
.cell .ord { top: 7px; left: 7px; background: rgba(10,11,13,.72); color: #fff; }
.cell .dur { bottom: 7px; right: 7px; background: rgba(10,11,13,.62); color: #fff; }

.cell .acts {
  position: absolute; top: 6px; right: 6px; display: flex; gap: 3px;
  opacity: 0; transform: translateY(-3px); transition: opacity .13s ease, transform .13s ease;
}
.cell:hover .acts, .cell:focus-within .acts { opacity: 1; transform: none; }
/* Op touch bestaat hover niet: dan de knoppen gewoon tonen, anders kun je op
   mobiel geen beeld wisselen of verwijderen. */
@media (hover: none) { .cell .acts { opacity: 1; transform: none; } }
.cell .acts button {
  width: 26px; height: 26px; display: grid; place-items: center;
  border: none; border-radius: 7px; cursor: pointer; color: #fff;
  background: rgba(10,11,13,.66); backdrop-filter: blur(6px);
}
.cell .acts button:hover { background: rgba(10,11,13,.92); }

/* Naar voren / naar achteren met een pijl op de rand van elk beeld: duidelijker
   dan slepen en het werkt op de telefoon. */
.cell .schuif { position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display: grid; place-items: center; border: none;
  border-radius: 50%; cursor: pointer; color: #fff; z-index: 2;
  background: rgba(10, 11, 13, .62); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .13s ease; }
.cell:hover .schuif, .cell:focus-within .schuif { opacity: 1; }
@media (hover: none) { .cell .schuif { opacity: 1; } }
.cell .schuif.eerder { left: 6px; }
.cell .schuif.later { right: 6px; }
.cell .schuif:hover { background: rgba(10, 11, 13, .9); }
.cell .schuif[hidden] { display: none; }

/* Beweging-keuze op de reel-pagina: pannen of rustig, alleen voor deze reel. */
.pankeuze { display: inline-flex; align-items: center; gap: 10px;
            margin: 2px 0 16px; font-size: 14px; color: var(--fg-2); }
.pankeuze select { max-width: 230px; }

.cell figcaption { padding: 8px 9px 10px; border-top: 1px solid var(--line); }
/* Met een id ervoor, anders wint de algemene invoerregel bovenaan dit bestand:
   die telt zes :not()-voorwaarden mee en is daardoor specifieker dan .cell .lbl.
   Het label onder een miniatuur kreeg dan een volwaardig invoerkader met
   randen en ruime marges, terwijl het gewoon als bijschrift hoort te lezen. */
#strip .cell .lbl {
  width: 100%; padding: 3px 5px; font-size: 12.5px; font-weight: 570;
  border: 1px solid transparent; background: transparent; border-radius: 5px;
  color: var(--fg); letter-spacing: -.005em;
}
#strip .cell .lbl:hover { border-color: var(--line-2); background: var(--surface-2); }
#strip .cell .lbl:focus {
  border-color: var(--brass); background: var(--surface); outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 15%, transparent);
}
.cell .meta {
  display: block; padding: 0 5px; margin-top: 3px;
  font-size: 11px; color: var(--fg-3);
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* -------- fotokiezer als paneel over de pagina, niet als blok ertussen ---- */

#picker {
  position: fixed; inset: 0; z-index: 60;
  background: color-mix(in srgb, var(--fg) 42%, transparent);
  backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 5vh 18px;
}
#picker[hidden] { display: none; }
#picker .sheet {
  width: min(940px, 100%); max-height: 90vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-3);
  animation: sheetin .18s cubic-bezier(.32,.72,0,1);
}
@keyframes sheetin { from { transform: translateY(10px) scale(.985); opacity: 0 } }
#picker .sheet-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 22px 14px; border-bottom: 1px solid var(--line);
}
#picker .sheet-body { overflow-y: auto; padding: 18px 22px 26px; }

button.shot.pick {
  padding: 0; cursor: pointer; text-align: left; font: inherit; color: inherit;
  border: 1px solid var(--line); background: var(--surface); position: relative;
  transition: border-color .12s ease, transform .12s ease;
}
button.shot.pick:hover { border-color: var(--brass); transform: translateY(-2px); }
button.shot.pick.inuse { opacity: .34; }
button.shot.pick.inuse::after {
  content: "in gebruik"; position: absolute; top: 8px; left: 8px;
  background: rgba(10,11,13,.78); color: #fff; border-radius: 5px;
  padding: 2px 7px; font-size: 10.5px; font-weight: 600;
}

/* meezwevende kopie tijdens het slepen */
/* De meezwevende kopie hangt in <body>, buiten de strook. Alle celopmaak
   staat daarom op .cell zelf en niet op .strip .cell - anders valt de foto op
   ware grootte uit het kader. flex-basis werkt hier niet, dus breedte en
   hoogte worden bij het oppakken hard meegegeven. */
.cell.dragghost {
  position: fixed; z-index: 80; pointer-events: none; margin: 0;
  flex: none; overflow: hidden;
  box-shadow: var(--sh-3); transform: rotate(1.4deg) scale(1.02);
  opacity: .96;
}
.cell.dragghost .acts { display: none; }
.cell.dragging { opacity: .22; }
.cell:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.cell img { user-select: none; -webkit-user-drag: none; }

/* -------- kop, tijdbalk en inspector ------------------------------------

   De strook laat de volgorde zien, de tijdbalk de lengte en de inspector het
   ene beeld dat je onder handen hebt. Drie dingen, drie plekken - in plaats van
   alle knoppen op elke miniatuur te proppen. */

.ed-kop {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.ed-kopknoppen { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.tijdbalk {
  display: flex; gap: 2px; height: 26px; margin: 0 2px 6px;
  border-radius: 7px; overflow: hidden; background: var(--surface-3);
}
.tijddeel {
  flex: 1 1 0; min-width: 0; border: none; cursor: pointer; padding: 0;
  font: inherit; font-size: 10.5px; font-weight: 640; color: var(--fg-3);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  background: var(--surface-2);
  transition: background .12s ease, color .12s ease;
}
.tijddeel:hover { background: var(--line); color: var(--fg-2); }
.tijddeel.gekozen { background: var(--brass); color: #16110A; }
/* Nog niet getimed: gearceerd, zodat de balk niet doet alsof hij het al weet. */
.tijddeel.onbekend {
  background: repeating-linear-gradient(115deg,
    var(--surface-2) 0 6px, var(--surface-3) 6px 12px);
  color: var(--fg-3);
}
.tijdmeta {
  margin: 0 2px 16px; font-size: 12px; color: var(--fg-3);
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.tijdmeta b { color: var(--fg-2); font-weight: 700; }

/* Merktekens op de miniatuur: welke kant hij op beweegt, en of iemand de duur
   met de hand heeft gezet. Klein gehouden - de foto is de hoofdzaak. */
.cell .beweeg {
  position: absolute; bottom: 7px; left: 7px; min-width: 18px; height: 18px;
  display: grid; place-items: center; border-radius: 5px;
  background: rgba(10,11,13,.62); color: #fff;
  font-size: 9.5px; line-height: 1; padding: 0 4px;
}
.cell .beweeg:empty { display: none; }
.cell .beweeg.vast, .cell .dur.vast { background: var(--brass); color: #16110A; }
.cell.gekozen { border-color: var(--brass); box-shadow: 0 0 0 3px var(--brass-soft); }

.inspect {
  display: grid; grid-template-columns: 168px 1fr; gap: 22px;
  margin-top: 6px; padding: 18px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.inspect[hidden] { display: none; }

.inspect-beeld { display: flex; flex-direction: column; gap: 7px; }
.inspect .kader {
  aspect-ratio: 9/16; border-radius: var(--r); overflow: hidden;
  background: var(--surface-3); border: 1px solid var(--line);
}
.inspect .kader img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform-origin: center center;
}
.inspect .kadernoot {
  font-size: 11px; color: var(--fg-3); text-align: center;
}
.inspect .kader.stilstaand + .kadernoot { opacity: .55; }

.inspect-vorm { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.inspect-kop { display: flex; align-items: center; gap: 10px; }
.inspect-kop .nr {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; font-weight: 700; color: var(--fg-3);
  background: var(--surface-3); border-radius: 6px; padding: 4px 8px;
}
/* Zelfde reden als bij het bijschrift in de strook: id ervoor om boven de
   algemene invoerregel uit te komen. */
#inspect .inspect-kop .titel {
  flex: 1; min-width: 0; font-size: 17px; font-weight: 600;
  letter-spacing: -.01em; color: var(--fg);
  background: transparent; border: 1px solid transparent;
  border-radius: 7px; padding: 5px 8px;
}
#inspect .inspect-kop .titel:hover { border-color: var(--line-2); background: var(--surface); }
#inspect .inspect-kop .titel:focus {
  outline: none; border-color: var(--brass); background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 15%, transparent);
}

.inspect .veld > label {
  display: block; font-size: 11.5px; font-weight: 620; letter-spacing: .02em;
  text-transform: uppercase; color: var(--fg-3); margin-bottom: 7px;
}
.inspect .veld .hint { margin: 7px 0 0; font-size: 12px; max-width: 62ch; }

.knoprij { display: flex; gap: 6px; flex-wrap: wrap; }
.knoprij button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 560;
  color: var(--fg-2); background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.knoprij button:hover:not(:disabled) { border-color: var(--line-2); color: var(--fg); }
.knoprij button.aan {
  background: var(--brass); border-color: var(--brass); color: #16110A;
}
.knoprij button:disabled { opacity: .38; cursor: not-allowed; }
.knoprij button.terug { margin-left: 4px; color: var(--fg-3); }

.stapper { display: inline-flex; align-items: center; gap: 6px; }
.stapper button {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 8px; cursor: pointer; color: var(--fg-2);
}
.stapper button:hover { border-color: var(--line-2); color: var(--fg); }
/* Het veld leest als een uitkomst en werkt als invoer. Met een id ervoor, want
   de algemene invoerregel bovenaan wint anders op specificiteit. */
.stapper .duurveld {
  display: inline-flex; align-items: baseline; gap: 1px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); padding: 0 9px 0 4px;
  transition: border-color .13s ease, box-shadow .13s ease;
}
.stapper .duurveld:hover { border-color: var(--line-2); }
.stapper .duurveld:focus-within {
  border-color: var(--brass);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 15%, transparent);
}
#inspect .stapper .duurveld input {
  width: 48px; text-align: right; padding: 6px 2px;
  border: none; background: transparent; box-shadow: none;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 14px; font-weight: 700; color: var(--fg);
}
#inspect .stapper .duurveld input:focus { outline: none; box-shadow: none; }
.stapper .duurveld b {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; font-weight: 600; color: var(--fg-3);
}
.stapper button.terug {
  width: auto; padding: 0 11px; font: inherit; font-size: 12.5px;
  color: var(--fg-3); margin-left: 4px;
}
.stapper button.terug.aan {
  background: var(--brass); border-color: var(--brass); color: #16110A;
}

.inspect-voet {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-top: 4px; margin-top: auto;
}

/* Op een smal scherm past de kolom met het voorbeeld er niet naast; dan gaat
   hij erboven en blijft hij klein genoeg om de knoppen in beeld te houden. */
@media (max-width: 640px) {
  .inspect { grid-template-columns: 1fr; gap: 16px; padding: 14px; }
  /* Het voorbeeld naast het bijschrift in plaats van erboven, maar wel groot
     genoeg om iets te zien: op 92px is een pan van een paar procent onzichtbaar
     en staat er dus een voorbeeld dat niets voorbeeldt. */
  .inspect-beeld { flex-direction: row; align-items: flex-end; gap: 14px; }
  .inspect .kader { width: min(44vw, 180px); flex: none; }
  .inspect .kadernoot { text-align: left; padding-bottom: 6px; }
  /* Een adres of een lang label past hier niet op één regel; iets kleiner
     scheelt net genoeg om het te kunnen lezen in plaats van te moeten scrollen
     in een invoerveld. */
  #inspect .inspect-kop .titel { font-size: 15px; padding: 5px 6px; }
}

/* ======================================================= reelkaarten

   Er stond alleen een adres, een plaats en een aantal seconden op. Dat is
   precies de vraag die het overzicht níét beantwoordt: je wil weten wat er met
   die reel gebeurd is. Nu draagt de kaart de stand mee. */

.reel { display: flex; flex-direction: column; }
.reel .frame { position: relative; }
/* De witte voet vult de rest: zonder dit eindigt een kaart mét statusregel
   lager dan een kaart zonder, en staat het raster scheef. */
.reel .meta { flex: 1; display: flex; flex-direction: column; }
.reel .meta .kaartstand { margin-top: auto; }

/* Een speelknop over de poster. Zonder dat leest een kaartje als een foto, en
   dan klik je er niet op om te kijken. */
.reel .speel {
  position: absolute; inset: 0; margin: auto;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(10,11,13,.5); backdrop-filter: blur(4px);
  opacity: 0; transform: scale(.9);
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;
}
.reel:hover .speel, .reel:focus-visible .speel { opacity: 1; transform: none; }
.reel .speel svg { margin-left: 2px; }
@media (hover: none) { .reel .speel { opacity: .82; transform: none; } }

.badge.stand {
  background: rgba(10,11,13,.72); color: #fff; backdrop-filter: blur(6px);
  letter-spacing: .01em;
}
.badge.stand.gepland { background: var(--brass); color: #16110A; }
.badge.stand.wacht {
  background: var(--brass-soft); color: #6B4E12;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brass) 50%, transparent);
}
.badge.stand.geplaatst { background: var(--ok); color: #fff; }

.reel .kaartstand {
  display: flex; align-items: center; gap: 8px; margin-top: 7px;
  padding-top: 7px; border-top: 1px solid var(--line);
}
.reel .kaartstand i {
  font-style: normal; font-size: 11.5px; color: var(--fg-3);
}

/* ==================================================== platformmerken

   De merkkleur alleen waar hij iets doet: in een kalendercel en in een lijst
   herken je Instagram aan het roze voordat je het woord gelezen hebt. Op grijze
   achtergronden blijft hij ingetogen; het is een herkenningsteken, geen
   advertentie. */

.platformicoon { flex: none; vertical-align: -2px; }
.pl-instagram { color: #C13584; }
.pl-tiktok    { color: #111214; }
.pl-facebook  { color: #1877F2; }
.pl-linkedin  { color: #0A66C2; }
.pl-youtube   { color: #FF0000; }
.pl-overig    { color: var(--fg-3); }

.platformmerk {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 550; color: var(--fg-2);
}

/* ========================================================== maandagenda

   Een lijst beantwoordt "wat moet er nog", maar niet "hoe ligt het verspreid".
   Drie reels op dezelfde donderdag en de rest van de week leeg zie je alleen in
   een raster. */

.agenda {
  margin-top: 26px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1, 0 1px 2px rgba(16,17,20,.04));
  overflow: hidden;
}

.agendakop {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 18px 14px;
}
.agendatitel { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.agendatitel h2 {
  margin: 0; font-size: 19px; letter-spacing: -.02em;
  text-transform: capitalize;
}
.agendablader { display: flex; gap: 4px; }
.agendablader .blader {
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 9px; color: var(--fg-2); text-decoration: none;
  border: 1px solid var(--line);
  transition: background .12s ease, border-color .12s ease;
}
.agendablader .blader:hover { background: var(--surface-2); border-color: var(--line-2); }

.agendakoppen {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--line); background: var(--surface-2);
}
.agendakoppen span {
  padding: 8px 10px; font-size: 10.5px; font-weight: 660;
  letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3);
}
/* Op een breed scherm staat de hele dagnaam er; op een smal scherm alleen de
   twee letters. Dan hoeft de kolom niet te krimpen tot onleesbaar. */
.agendakoppen span b { display: none; font-weight: inherit; }
.agendakoppen span i { font-style: normal; }

.agendaraster {
  display: grid; grid-template-columns: repeat(7, 1fr);
  /* Hairlines door het raster heen in plaats van randen per cel: dat scheelt
     dubbele lijnen op elke naad. */
  gap: 1px; background: var(--line);
  border-top: 1px solid var(--line);
}
.agendadag {
  background: var(--surface); min-height: 104px; padding: 7px 7px 8px;
  display: flex; flex-direction: column; gap: 3px;
}
.agendadag.buiten { background: var(--surface-2); }
.agendadag.buiten .dagnr { opacity: .4; }
.agendadag.voorbij:not(.nu) .dagnr { color: var(--fg-3); }
.agendadag .dagnr {
  font-size: 12px; font-weight: 600; color: var(--fg-2);
  font-variant-numeric: tabular-nums; padding: 1px 3px 3px;
}
.agendadag.nu .dagnr {
  align-self: flex-start; background: var(--brass); color: #16110A;
  border-radius: 6px; padding: 2px 7px; font-weight: 700;
}

.agendapost {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 6px; border-radius: 7px; text-decoration: none;
  background: var(--surface-2); border-left: 2.5px solid var(--line-2);
  font-size: 11.5px; color: var(--fg-2); min-width: 0;
  transition: background .11s ease, transform .11s ease;
}
.agendapost:hover { background: var(--line); transform: translateX(1px); }
.agendapost .tijd {
  font-variant-numeric: tabular-nums; font-weight: 620; flex: none;
  font-size: 10.5px; color: var(--fg-3);
}
/* Het rijtje merktekens mag niet krimpen: zonder dit schuift het over de tijd
   heen zodra er drie kanalen in één cel staan, en las je "+09:00". */
.agendapost .kanalen { flex: none; gap: 3px; }
.agendapost .wat {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agendapost.s-open   { border-left-color: var(--brass); }
/* Wachten op akkoord onderscheidt zich met een streepjesrand en niet met nóg
   een goudtint: twee tinten uit dezelfde familie naast elkaar zijn in een
   raster van vijfentwintig blokjes niet uit elkaar te houden. Een streepjeslijn
   herken je wel, ook in een oogopslag. */
.agendapost.s-wacht {
  border-left-style: dashed; border-left-color: var(--brass);
  background: var(--brass-soft);
}
.agendapost.s-gedaan { border-left-color: var(--ok); opacity: .68; }

/* Meer dan drie op één dag: de rest inklappen, met een knop die hem opent. Een
   cel die van zes berichten twee keer zo hoog wordt duwt de hele maand scheef. */
.agendadag .agendapost:nth-of-type(n+4) { display: none; }
.agendadag.uitgeklapt .agendapost { display: flex; }
.agendameer {
  align-self: flex-start; padding: 2px 7px; border: none; cursor: pointer;
  background: transparent; border-radius: 6px;
  font: inherit; font-size: 10.5px; font-weight: 600; color: var(--fg-3);
}
.agendameer:hover { background: var(--surface-2); color: var(--fg-2); }

/* Op een dag klikken vult de datum alvast in bij het inplannen. Alleen aanwijzen
   waar dat ook echt iets doet. */
.agendadag[data-iso]:not(.voorbij) { cursor: pointer; }
.agendadag[data-iso]:not(.voorbij):hover { background: var(--surface-2); }
.agendadag.buiten[data-iso]:not(.voorbij):hover { background: var(--line); }
.agendadag.gekozen { box-shadow: inset 0 0 0 2px var(--brass); }
/* Het weekend een tint lichter: dan zie je de weekgrenzen zonder lijnen. */
.agendadag.weekend:not(.buiten) { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }

.agendavoet {
  display: flex; gap: 18px; flex-wrap: wrap;
  padding: 11px 18px; border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.agendavoet .legenda {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--fg-3);
}
.agendavoet .stip { width: 9px; height: 9px; border-radius: 3px; background: var(--line-2); }
.agendavoet .stip.s-open { background: var(--brass); }
.agendavoet .stip.s-wacht {
  background: var(--brass-soft); border: 1.5px dashed var(--brass);
}
.agendavoet .stip.s-gedaan { background: var(--ok, #2E7D4F); }

@media (min-width: 820px) {
  .agendakoppen span b { display: none; }
  .agendadag { min-height: 122px; }
}
/* -------- de dag eronder --------

   Een cel is te klein om alles te tonen, op elk scherm. Tikken opent de dag
   voluit onder het raster: tijd, kanalen, adres. Op een telefoon is dit de
   enige manier om bij de inhoud te komen. */

.dagpanelen:empty { display: none; }
.dagpaneel {
  border-top: 1px solid var(--line); background: var(--surface-2);
  padding: 12px 16px 14px;
}
.dagpaneel[hidden] { display: none; }
.dagpaneelkop {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px;
}
.dagpaneelkop b { font-size: 14px; letter-spacing: -.01em; }
.dagpaneelkop span { font-size: 12px; color: var(--fg-3); }
.dagpaneelkop .dagdicht {
  margin-left: auto; width: 26px; height: 26px; display: grid; place-items: center;
  border: none; background: transparent; border-radius: 7px;
  cursor: pointer; color: var(--fg-3);
}
.dagpaneelkop .dagdicht:hover { background: var(--line); color: var(--fg); }

.dagregel {
  display: flex; align-items: center; gap: 11px; text-decoration: none;
  padding: 9px 11px; border-radius: 9px; margin-bottom: 5px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  font-size: 13.5px; color: var(--fg-2);
}
.dagregel:hover { border-color: var(--line-2); border-left-color: var(--brass); }
.dagregel.s-wacht { border-left-style: dashed; }
.dagregel.s-gedaan { border-left-color: var(--ok); opacity: .7; }
.dagregel .tijd {
  font-variant-numeric: tabular-nums; font-weight: 660; color: var(--fg);
  flex: none; font-size: 13px;
}
.dagregel .wat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Stippen in de cel: alleen op smalle schermen, waar de tekstregels niet
   passen. Vier is genoeg om "druk" van "rustig" te onderscheiden. */
.agendastippen { display: none; gap: 3px; justify-content: center; }
.agendastippen .stip { width: 5px; height: 5px; border-radius: 50%; background: var(--brass); }
.agendastippen .stip.s-wacht { background: transparent; box-shadow: inset 0 0 0 1.5px var(--brass); }
.agendastippen .stip.s-gedaan { background: var(--ok); }

@media (max-width: 700px) {
  .agendakoppen span i { display: none; }
  .agendakoppen span b { display: inline; }
  .agendakoppen span { padding: 7px 4px; text-align: center; font-size: 10px; }
  /* Vierkante vakjes met alleen het dagnummer en stippen. De tekstregels gaan
     eruit: bij vijftig pixels breed leest "09:00 Ruwenb..." als ruis, en de
     hele maand wordt een grijze brei. Tikken opent de dag eronder. */
  .agendadag {
    min-height: 0; aspect-ratio: 1; padding: 4px 2px;
    align-items: center; justify-content: flex-start; gap: 4px;
  }
  .agendadag .dagnr { padding: 2px 0 0; font-size: 12.5px; }
  .agendadag.nu .dagnr { align-self: center; padding: 2px 7px; }
  .agendapost, .agendameer { display: none; }
  .agendastippen { display: flex; flex-wrap: wrap; max-width: 90%; }
  .agendakop { padding: 13px 14px 11px; }
  .agendatitel h2 { font-size: 17px; }
  .agendavoet { gap: 10px; padding: 10px 14px; font-size: 11px; }
  .dagpaneel { padding: 11px 12px 12px; }
}

/* ============================================== het inplanblok, opnieuw

   Was: zes losse elementen rechts uitgelijnd, elk met een eigen rand. Nu één
   kaart met de foto links en het formulier ernaast, in benoemde velden. Je
   leest van boven naar beneden wat er gevraagd wordt in plaats van te raden
   welk vakje bij welke vraag hoort. */

.planner {
  display: flex; gap: 18px; align-items: stretch;
  padding: 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color .14s ease, box-shadow .14s ease;
  overflow: visible;
}
.planner:hover { border-color: var(--line-2); box-shadow: var(--sh-2); }
.planbeeld.groot { width: 88px; flex: none; align-self: flex-start; }

.plannerlijf { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 15px; }
.plannerkop { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plannerkop .planadres { font-size: 16px; }

.plannerveld > label {
  display: block; margin-bottom: 8px;
  font-size: 11px; font-weight: 660; letter-spacing: .05em;
  text-transform: uppercase; color: var(--fg-3);
}
.plannerrij { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* De platformkeuze: aankruisen in plaats van kiezen, want één reel gaat bijna
   altijd naar meer dan één kanaal. */
.platformkeuze { display: flex; gap: 7px; flex-wrap: wrap; }
.platformvak { position: relative; margin: 0; cursor: pointer; }
.platformvak input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.platformvak span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface);
  font-size: 13px; font-weight: 520; color: var(--fg-2);
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.platformvak:hover span { border-color: var(--fg-3); }
.platformvak input:checked + span {
  border-color: var(--fg); background: var(--fg); color: var(--surface);
}
/* Het merkje wordt wit zodra het vak aanstaat: de merkkleur op zwart is niet te
   lezen, en het gaat hier om welke vakjes aanstaan. */
.platformvak input:checked + span .platformicoon { color: currentColor; }
.platformvak input:focus-visible + span {
  outline: 2px solid var(--brass); outline-offset: 2px;
}
/* Een kanaal dat gekoppeld is krijgt een stipje: dan zie je vóór het aanvinken
   al of Reelify het zelf kan plaatsen. */
.platformvak.gekoppeld span::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--brass); flex: none;
}

.plannervoet {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding-top: 3px;
}
.plannervoet .autovink { margin: 0; }

@media (max-width: 640px) {
  .planner { flex-direction: column; gap: 14px; }
  .planbeeld.groot { width: 72px; }
  .plannervoet { flex-direction: column; align-items: stretch; }
  .plannervoet .btn { width: 100%; }
}

/* -------- de regels van ingeplande berichten -------- */

.planmeta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 4px; font-size: 12.5px; color: var(--fg-3);
}
.planmeta .wanneer { font-weight: 560; color: var(--fg-2); }
.planmeta .wanneer.laat { color: var(--bad); }
.planmeta .stad::before { content: "·"; margin-right: 8px; color: var(--line-2); }

.planpost.wacht { border-color: color-mix(in srgb, var(--brass) 45%, var(--line)); }
.planpost.mis { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }

.vanzelf {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: 999px; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  background: var(--brass-soft); color: #6B4E12;
  border: 1px solid color-mix(in srgb, var(--brass) 38%, transparent);
}

.stat.let { border-color: color-mix(in srgb, var(--brass) 50%, var(--line));
            background: var(--brass-soft); }

/* Al ingepland of al geplaatst: eerst zeggen wat er staat, en het formulier
   achter een klik. Dezelfde woning twee keer op Instagram is vrijwel altijd een
   ongelukje. */
.alklaar {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; margin: 4px 0 12px; border-radius: var(--r);
  /* Aandachtskleur en niet groen. Groen met een vinkje leest als "goed zo,
     klaar"; dit is een waarschuwing dat je op het punt staat iets dubbel te
     doen. Dezelfde tint als de andere plekken waar we om aandacht vragen. */
  background: var(--brass-soft);
  border: 1px solid color-mix(in srgb, var(--brass) 38%, transparent);
}
.alklaar svg { color: #6B4E12; flex: none; margin-top: 1px; }
.alklaar b { font-size: 14px; }

/* Een uitklapper die er als knop uitziet en niet als een kaal regeltje met een
   pijltje. Hij hoort ondergeschikt te blijven aan de gewone knoppen - het is
   niet de handeling die je meestal wilt - maar wel aanklikbaar te ogen. */
.nogmaals > summary, .berichteditor > summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 520; color: var(--fg-2);
  background: var(--surface); border: 1px solid var(--line-2);
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.nogmaals > summary::-webkit-details-marker,
.berichteditor > summary::-webkit-details-marker { display: none; }
.nogmaals > summary:hover, .berichteditor > summary:hover {
  border-color: var(--fg-3); color: var(--fg); background: var(--surface-2);
}
.nogmaals > summary svg, .berichteditor > summary svg {
  color: var(--fg-3); flex: none; transition: transform .16s ease;
}
.nogmaals[open] > summary, .berichteditor[open] > summary {
  border-color: var(--fg); color: var(--fg);
}
.nogmaals[open] > summary svg { transform: rotate(45deg); }
.nogmaals > summary:focus-visible, .berichteditor > summary:focus-visible {
  outline: 2px solid var(--brass); outline-offset: 2px;
}
.nogmaals[open] { margin-top: 4px; }
/* De inhoud van een uitklapper plakte tegen zijn eigen knop aan. Een <details>
   zet zelf geen ruimte tussen summary en inhoud, en dat ziet er onaf uit. */
.nogmaals[open] > .miniplanner { margin-top: 14px; }

/* -------- het bewerkpaneel zelf -------- */

.berichteditor { margin-top: 10px; }
.berichteditor .editvorm {
  display: grid; gap: 16px; margin-top: 12px; padding: 16px 18px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-lg);
  animation: editin .14s cubic-bezier(.32,.72,0,1);
}
@keyframes editin { from { opacity: 0; transform: translateY(-4px) } }
.editveld > label {
  display: block; margin-bottom: 8px;
  font-size: 10.5px; font-weight: 660; letter-spacing: .05em;
  text-transform: uppercase; color: var(--fg-3);
}
.editvoet {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-top: 2px;
}
.editvoet .hint { margin: 0; }
.berichteditor .kiezerknop { font-size: 13.5px; padding: 8px 12px; }
.berichteditor .platformvak span { padding: 7px 12px; font-size: 12.5px; }

/* In een planregel staat de editor onder de knoppenrij; daar mag hij niet in
   de volle breedte van de kaart springen. */
.planpost .berichteditor { margin: 10px 0 0; }
.keurlijf .berichteditor { margin: 0; }

.note.waarschuwing {
  background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad) 30%, transparent);
}

/* Tabelrijen die oplichten. Bij zes kolommen met cijfers raak je de regel
   kwijt tussen "Instagram" en het laatste getal; dit houdt hem vast. */
table.lijst tbody tr { transition: background .1s ease; }
table.lijst tbody tr:hover { background: var(--surface-2); }
table.lijst td .platformmerk { font-size: 13.5px; }

/* Vier tegels met een streepje erin zien er kapot uit, niet leeg. Als er nog
   niets gemeten is hoort er één zin te staan die zegt waarom. */
.leegcijfers {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 22px 24px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px dashed var(--line-2);
}
.leegcijfers svg { color: var(--fg-3); flex: none; margin-top: 2px; }
.leegcijfers b { display: block; font-size: 15px; margin-bottom: 3px; }
.leegcijfers p { margin: 0; font-size: 13.5px; color: var(--fg-3); max-width: 64ch; }

/* =================================================== goedkeuren

   Twee benoemde keuzes in plaats van een aan/uit-knop: bij "uit" moet je raden
   wat er gebeurt, bij "Automatisch posten" niet. */

.moduskeuze { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .moduskeuze { grid-template-columns: 1fr; } }
.plaatsblok .moduskaart { background: var(--surface-2); }
.plaatsblok .moduskaart.aan { background: var(--surface); }

.moduskaart {
  position: relative; margin: 0; cursor: pointer; display: block;
  padding: 16px 18px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .13s ease, box-shadow .13s ease;
}
.moduskaart:hover { border-color: var(--line-2); }
.moduskaart.aan {
  border-color: var(--brass);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 14%, transparent);
}
.moduskaart input { position: absolute; opacity: 0; width: 0; height: 0; }
.moduskop {
  display: flex; align-items: center; gap: 9px; margin-bottom: 6px;
  font-size: 15px; letter-spacing: -.01em;
}
.moduskop svg { color: var(--fg-3); flex: none; }
.moduskaart.aan .moduskop svg { color: var(--brass); }
.modusuitleg {
  display: block; font-size: 13px; line-height: 1.55; color: var(--fg-3);
}

/* De melding op het planscherm dat er iets klaarligt. Eén regel, klikbaar,
   met het aantal vooraan - genoeg om te weten dat je ergens heen moet. */
.wachtbalk {
  display: flex; align-items: center; gap: 14px; margin-top: 22px;
  padding: 14px 18px; border-radius: var(--r-lg); text-decoration: none;
  background: var(--brass-soft);
  border: 1px solid color-mix(in srgb, var(--brass) 40%, transparent);
  transition: border-color .13s ease, transform .13s ease;
}
.wachtbalk:hover { border-color: var(--brass); transform: translateY(-1px); }
.wachtbalk b { display: block; font-size: 14px; color: var(--fg); font-weight: 600; }
.wachtbalk small { display: block; font-size: 12.5px; color: var(--fg-2); margin-top: 2px; }
.wachtbalk svg { margin-left: auto; color: var(--fg-3); flex: none; }
.wachtaantal {
  flex: none; min-width: 30px; height: 30px; padding: 0 8px;
  display: grid; place-items: center; border-radius: 9px;
  background: var(--brass); color: #16110A;
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Het telbolletje in de navigatiebalk. */
.navtel {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px;
  padding: 0 5px; margin-left: 5px; border-radius: 999px; vertical-align: 1px;
  background: var(--brass); color: #16110A;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* -------- het beoordeelscherm -------- */

.keurlijst { display: grid; gap: 16px; margin-top: 4px; }
.keurkaart {
  display: flex; gap: 20px; padding: 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.keurbeeld { width: 176px; flex: none; }
.keurbeeld video, .keurbeeld img {
  width: 100%; aspect-ratio: 9/16; object-fit: cover; display: block;
  border-radius: var(--r); background: var(--surface-3);
  border: 1px solid var(--line);
}
.keurlijf { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.keurkop { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.keurkop .planadres { font-size: 17px; }

.keurfeiten { display: flex; gap: 34px; flex-wrap: wrap; margin: 0; }
.keurfeiten dt {
  font-size: 10.5px; font-weight: 660; letter-spacing: .05em;
  text-transform: uppercase; color: var(--fg-3); margin-bottom: 5px;
}
.keurfeiten dd { margin: 0; font-size: 14px; font-weight: 550; color: var(--fg); }
.keurfeiten .kanalen { display: flex; gap: 14px; flex-wrap: wrap; }

.keurcaption > label {
  display: block; margin-bottom: 6px;
  font-size: 10.5px; font-weight: 660; letter-spacing: .05em;
  text-transform: uppercase; color: var(--fg-3);
}
.keurcaption .captiontekst {
  /* Niet meelopen met de kaartbreedte: op een breed scherm werd dit een regel
     van honderddertig tekens, en die lees je niet meer - je scant hem. */
  max-width: 82ch;
  max-height: 132px; overflow-y: auto; white-space: pre-wrap;
  padding: 11px 13px; border-radius: var(--r); font-size: 13px; line-height: 1.6;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--fg-2);
}
.keurcaption .btn { margin-top: 8px; }

.keuracties { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.keuracties .keurweg { margin-left: auto; }

@media (max-width: 640px) {
  .keurkaart { flex-direction: column; }
  .keurbeeld { width: 132px; }
  .keuracties .keurweg { margin-left: 0; }
}

/* Rijtje merktekens: op de planregel, in de kalender en op de reelpagina. */
.kanalen { display: inline-flex; align-items: center; gap: 5px; }
.kanalen b { font-size: 10.5px; font-weight: 700; color: var(--fg-3); }

/* Het kleine inplanblok op de reelpagina. */
.miniplanner { display: flex; flex-direction: column; gap: 12px; }
.miniplanrij { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.miniplanner .platformvak span { padding: 7px 11px; font-size: 12.5px; }
.miniplanner .kiezerknop { font-size: 13.5px; padding: 8px 12px; }

/* ----------------------------------------------------------- accountscherm */

/* Vier cijfers in een strook met haarlijnen ertussen. Vier omrande vakjes in
   een kaart die zelf al een rand heeft is een rand te veel, en ze waren te smal
   voor hun eigen bijschrift. */
/* Twee bij twee en niet vier naast elkaar. Deze kaart staat in een kolom van
   ongeveer driehonderd pixels; vier kolommen laten daar vijfenzeventig pixels
   over en dan wordt "Deze maand" afgekapt tot "Dez…". Liever twee rijen dan een
   cijfer waarvan je niet meer weet waar het over gaat. */
.cijferstrook {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 4px 0 2px;
}
.cijferstrook > div { padding: 14px 18px; min-width: 0; }
.cijferstrook > div:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--line); }
.cijferstrook > div:nth-child(-n+2) { padding-top: 2px; border-bottom: 1px solid var(--line); }
.cijferstrook > div:nth-child(n+3) { padding-bottom: 2px; }
.cijferstrook b {
  display: block; font-size: 30px; font-weight: 620; letter-spacing: -.03em;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.cijferstrook span {
  display: block; margin-top: 7px; font-size: 12.5px; color: var(--fg-3);
  letter-spacing: .01em;
}

.kanaalrij { display: flex; flex-wrap: wrap; gap: 8px; }
.kanaalchip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 13px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 13px; color: var(--fg-2);
}
.kanaalchip b { font-weight: 570; color: var(--fg); }
.kanaalchip > span {
  color: var(--fg-3); font-size: 12px;
  max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Het wachtwoordblok ingeklapt: je komt hier meestal voor je naam. */
.wwblok > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 620; letter-spacing: -.01em; color: var(--fg);
  padding: 4px 0;
}
.wwblok > summary::-webkit-details-marker { display: none; }
.wwblok > summary::before {
  content: ""; width: 6px; height: 6px; flex: none;
  border-right: 1.8px solid var(--fg-3); border-bottom: 1.8px solid var(--fg-3);
  transform: rotate(-45deg); transition: transform .14s ease;
}
.wwblok[open] > summary::before { transform: rotate(45deg); }

/* -------------------------------------------------------- ontwerpgalerij */

/* Twee kolommen met een miniatuur ernaast. Alleen een naam en een zin eronder
   maakte het een lijst: je moest ze stuk voor stuk aanklikken om te zien wat ze
   deden. Nu zie je het verschil voordat je klikt. */
.ontwerpen {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
@media (max-width: 560px) { .ontwerpen { grid-template-columns: 1fr; } }

.ontwerp {
  position: relative; display: grid; gap: 2px 11px; cursor: pointer;
  grid-template-columns: 46px minmax(0, 1fr);
  /* Twee rijen en geen derde die de rest opvult: met een lege derde rij zakte
     de tekst naar boven en bleef er onder elke kaart een gat staan. */
  grid-template-rows: auto auto;
  align-content: center;
  padding: 10px 11px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .13s ease, box-shadow .13s ease, background .13s ease;
}
.ontwerp:hover { border-color: var(--line-2); background: var(--surface-2); }
.ontwerp.aan {
  border-color: var(--brass); background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 14%, transparent);
}
.ontwerp:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.ontwerp .mini {
  grid-row: 1 / -1; width: 46px; height: 82px; border-radius: 5px;
  overflow: hidden; background: var(--surface-2);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.ontwerp .mini svg { display: block; width: 100%; height: 100%; }
.ontwerp b {
  align-self: end; font-size: 13.5px; font-weight: 620; letter-spacing: -.01em;
  color: var(--fg);
}
.ontwerp .wat {
  font-size: 11.5px; line-height: 1.45; color: var(--fg-3);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* De verwijderknop van een eigen ontwerp. Alleen zichtbaar als je erbij bent:
   een kruisje op elke kaart nodigt uit tot wegklikken. */
.ontwerp .weg {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
  display: grid; place-items: center; border-radius: 50%;
  border: 0; background: transparent; color: var(--fg-3);
  font-size: 17px; line-height: 1; cursor: pointer; opacity: 0;
  transition: opacity .12s ease, background .12s ease, color .12s ease;
}
.ontwerp:hover .weg, .ontwerp .weg:focus-visible { opacity: 1; }
.ontwerp .weg:hover { background: var(--surface-2); color: var(--fg); }

.bewaarrij { margin-top: 12px; }
.bewaarform { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bewaarform input { flex: 1 1 180px; min-width: 0; }
#ontwerpmelding.fout { color: var(--bad); }

/* ------------------------------------------------------------ vormkiezers */

/* Twee keer hetzelfde ding: de vorm van het statuslabel en het figuur erachter.
   Allebei een keuze die je moet zien om te kunnen maken. */
.vormkiezer {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 7px;
}
.vormknop {
  display: grid; gap: 6px; justify-items: center; cursor: pointer;
  padding: 9px 6px 8px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line);
  font: inherit; font-size: 11px; color: var(--fg-2); text-align: center;
  transition: border-color .13s ease, background .13s ease, box-shadow .13s ease;
}
.vormknop:hover { border-color: var(--line-2); background: var(--surface-2); }
.vormknop.aan {
  border-color: var(--brass); color: var(--fg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 14%, transparent);
}
.vormknop:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
/* Het vakje waarin de vorm getekend wordt. Een geruite ondergrond zou afleiden;
   een egale toon laat alleen de vorm zien. */
.vormknop .beeld {
  width: 42px; height: 42px; border-radius: 7px; overflow: hidden;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
}
.vormknop .beeld svg { display: block; width: 100%; height: 100%; }

.figuurregels { margin-top: 14px; }

/* De vormen van het label zijn breed en laag; een vierkant vakje eromheen laat
   ze piepklein worden. */
.vormkiezer.breed { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.vormkiezer.breed .beeld { width: 100%; height: 34px; }


/* ================================================ datum- en tijdkiezer

   Een knop met een uitklapper eronder, in plaats van het veld dat de browser
   zelf tekent. Dat laatste is in elke browser anders, toont "dd-mm-jjjj" als
   lege staat en zet er op een Engelstalige machine "AM" achter. */

.kiezer { position: relative; display: inline-flex; }

.kiezerknop {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 13px; border-radius: var(--r); cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 520; color: var(--fg);
  background: var(--surface); border: 1px solid var(--line-2);
  transition: border-color .13s ease, box-shadow .13s ease;
  white-space: nowrap;
}
.kiezerknop svg { color: var(--fg-3); flex: none; }
.kiezerknop:hover { border-color: var(--fg-3); }
.kiezerknop[aria-expanded="true"] {
  border-color: var(--brass);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 16%, transparent);
}
.kiezerknop.leeg { color: var(--fg-3); font-weight: 460; }

.kiezerpaneel {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 40;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-3);
  animation: kiezerin .13s cubic-bezier(.32,.72,0,1);
}
.kiezerpaneel.naarlinks { left: auto; right: 0; }
.kiezerpaneel[hidden] { display: none; }
@keyframes kiezerin { from { transform: translateY(-4px); opacity: 0 } }

/* -------- kalender -------- */

.kalender { width: 272px; padding: 12px; }
.kalenderkop {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.kalenderkop b {
  font-size: 13.5px; font-weight: 620; letter-spacing: -.01em;
  text-transform: capitalize;
}
.kalenderkop .blader {
  width: 28px; height: 28px; display: grid; place-items: center;
  border: none; background: transparent; border-radius: 7px;
  cursor: pointer; color: var(--fg-2);
}
.kalenderkop .blader:hover:not(:disabled) { background: var(--surface-2); color: var(--fg); }
.kalenderkop .blader:disabled { opacity: .25; cursor: default; }

.dagkoppen, .kalender .dagen {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.dagkoppen span {
  text-align: center; padding: 4px 0 6px;
  font-size: 10.5px; font-weight: 640; letter-spacing: .04em;
  text-transform: uppercase; color: var(--fg-3);
}
.kalender .dag {
  aspect-ratio: 1; display: grid; place-items: center;
  border: none; background: transparent; border-radius: 8px;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--fg);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.kalender .dag:hover:not(:disabled):not(.aan) { background: var(--surface-2); }
/* Dagen uit de vorige of volgende maand blijven staan zodat het raster niet
   verspringt, maar ze trekken geen aandacht. */
.kalender .dag.buiten { color: var(--fg-3); opacity: .5; }
.kalender .dag.uit { opacity: .25; cursor: default; }
.kalender .dag.nu { box-shadow: inset 0 0 0 1.5px var(--line-2); font-weight: 680; }
.kalender .dag.aan {
  background: var(--brass); color: #16110A; font-weight: 680; box-shadow: none;
}

.kalendervoet {
  display: flex; gap: 6px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line);
}
.kalendervoet button {
  flex: 1; padding: 7px; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 520; color: var(--fg-2);
  background: var(--surface-2); border: 1px solid transparent;
}
.kalendervoet button:hover { border-color: var(--line-2); color: var(--fg); }

/* -------- tijden -------- */

.tijden { width: 132px; padding: 6px; }
.tijdlijst {
  max-height: 244px; overflow-y: auto; display: grid; gap: 1px;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.tijdlijst::-webkit-scrollbar { width: 7px; }
.tijdlijst::-webkit-scrollbar-thumb {
  background: var(--line-2); border-radius: 99px; border: 2px solid var(--surface);
}
.tijden .tijd {
  padding: 7px 10px; border: none; background: transparent; border-radius: 7px;
  text-align: left; cursor: pointer; font: inherit; font-size: 13px;
  color: var(--fg); font-variant-numeric: tabular-nums;
}
.tijden .tijd:hover:not(.aan) { background: var(--surface-2); }
.tijden .tijd.aan { background: var(--brass); color: #16110A; font-weight: 620; }
.tijden .tijdleeg {
  margin: 0; padding: 10px 12px; font-size: 12.5px; line-height: 1.5;
  color: var(--fg-3);
}
.tijden:has(.tijdleeg) { width: 190px; }

/* -------- de snelkeuzeknoppen ernaast -------- */

/* Aangeklikt blijft aangeklikt: anders zie je na "Morgen" alleen een datum
   veranderen en weet je niet of de knop iets deed. */
.snelkeuze .chip[aria-pressed="true"] {
  background: var(--brass); border-color: var(--brass); color: #16110A;
}

/* ================================================== automatisch plaatsen

   Koppelen is een handeling die je één keer doet, dus het blok mag rustig zijn:
   een lijstje met wat aanstaat en één knop. Geen schakelaars per platform - dat
   gebeurt op de koppelpagina zelf, en twee plekken om hetzelfde te doen is één
   te veel. */

/* Drie blokken naast elkaar: koppelen, wat er standaard aanstaat, en of er
   iemand meekijkt. Dat is de volgorde waarin je het instelt, en samen zijn ze
   het antwoord op één vraag: hoe gaat mijn reel de deur uit. */
.plaatsblokken {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  align-items: start;
}
.plaatsblok {
  padding: 20px 22px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  display: flex; flex-direction: column; gap: 16px; height: 100%;
}
.plaatsblok.breed { grid-column: 1 / -1; }
.plaatskop h3 {
  margin: 0 0 5px; font-size: 15px; letter-spacing: -.01em; font-weight: 620;
}
.plaatskop .hint { margin: 0; max-width: 52ch; }
.plaatsblok form { margin: 0; }
.plaatsblok .accountlijst { margin-top: -2px; }
.voorkeurvorm, .paginakeuze { display: grid; gap: 16px; }
.paginakeuze { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.paginakeuze select { max-width: 100%; }
/* De algemene invoerregel zet elk veld op volle breedte; een tijdveld van
   zeshonderd pixels is onzin. */
.voorkeurvorm .kiezer { max-width: 150px; }
/* Van/tot naast elkaar met "tot" ertussen: dat leest als één venster in plaats
   van twee losse velden waarvan je moet raden wat ze met elkaar te maken
   hebben. */
.tijdvenster { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tijdvenster > span { font-size: 13px; color: var(--fg-3); }
#inspect .tijdvenster input, .tijdvenster input { max-width: 132px; }
.plaatsblok .moduskeuze { width: 100%; }
@media (max-width: 760px) { .plaatsblokken { grid-template-columns: 1fr; } }

.accountlijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.accountlijst li {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 11px; border-radius: 9px; font-size: 13px;
  background: var(--surface-2); color: var(--fg-3);
}
.accountlijst li.aan { background: var(--surface-2); color: var(--fg-2); }
.accountlijst li b { font-weight: 570; color: inherit; }
.accountlijst .vink {
  width: 17px; height: 17px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--line); color: transparent;
}
.accountlijst li.aan .vink { background: var(--brass); color: #16110A; }
.accountlijst .wie {
  margin-left: auto; font-size: 11.5px; color: var(--fg-3);
  max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Het vinkje in het inplanformulier. Staat onder de knop en niet ernaast: het
   hoort bij de handeling die je net deed, niet bij de keuze ervoor. */
.autovink {
  display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 0;
  font-size: 12.5px; color: var(--fg-2); cursor: pointer;
}
.autovink input { width: 15px; height: 15px; margin-top: 2px; flex: none;
                  accent-color: var(--brass); cursor: pointer; }
.autovink small { display: block; color: var(--fg-3); font-size: 11px; }

.pill.auto {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--brass-soft); color: var(--fg-2);
  border: 1px solid color-mix(in srgb, var(--brass) 40%, transparent);
}

/* Een mislukte plaatsing hoort op te vallen zonder het scherm te laten schreeuwen:
   de regel eronder, in de foutkleur, met erbij wat je eraan kunt doen. */
.planfout {
  margin: 8px 0 0; padding: 9px 12px; border-radius: 9px;
  font-size: 12.5px; line-height: 1.5; color: var(--bad);
  background: color-mix(in srgb, var(--bad) 8%, transparent);
}

/* ============================================================ inloggen */

.authwrap { min-height: calc(100vh - var(--nav-h)); display: grid; place-items: center; padding: 40px 18px; }
.authcard {
  width: min(400px, 100%); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 34px 32px 36px; box-shadow: var(--sh-2);
  display: flex; flex-direction: column;
}
.authcard h1 { margin-bottom: 4px; }

/* ------------------------------------------------------- gebruikersmenu */

.usermenu { position: relative; }
.usermenu summary { list-style: none; cursor: pointer; }
.usermenu summary::-webkit-details-marker { display: none; }
.avatar {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 99px; background: var(--fg); color: var(--surface);
  font-size: 12.5px; font-weight: 650;
}
.usermenu[open] .avatar { box-shadow: 0 0 0 3px var(--brass-soft); }
.usermenu .menu {
  position: absolute; right: 0; top: calc(100% + 9px); z-index: 50;
  min-width: 208px; padding: 6px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-3);
  display: flex; flex-direction: column; gap: 1px;
}
.usermenu .menu-head {
  display: flex; flex-direction: column; padding: 10px 11px 12px;
  border-bottom: 1px solid var(--line); margin-bottom: 5px;
}
.usermenu .menu-head b { font-size: 14px; }
.usermenu .menu a {
  padding: 8px 11px; border-radius: var(--r-sm); font-size: 14px; color: var(--fg-2);
}
.usermenu .menu a:hover { background: var(--surface-2); color: var(--fg); }
/* De uitlog-knop in het menu is een <form><button>, maar hoort er als een
   gewone menulink uit te zien - niet als een kaal, links uitlijnend knopje. */
.usermenu .menu .uitlogform { display: block; margin-top: 2px; }
.usermenu .menu .uitlogform button {
  display: block; width: 100%; box-sizing: border-box; text-align: left;
  padding: 8px 11px; border-radius: var(--r-sm); font: inherit; font-size: 14px;
  color: var(--fg-2); cursor: pointer;
}
.usermenu .menu .uitlogform button:hover { background: var(--surface-2); color: var(--fg); }

/* Sorteerbare tabelkoppen. De hele kop is klikbaar, niet alleen een pijltje:
   een doel van tien pixels raak je niet met een muis die haast heeft. */
th .sorteer { display: inline-flex; align-items: center; gap: 5px;
              color: inherit; cursor: pointer; white-space: nowrap; }
th .sorteer:hover { color: var(--fg); }
th .sorteer.actief { color: var(--fg); }
th .sorteer span { font-size: 11px; opacity: .75; }

/* Een inklapbare stapel voor wat af is: geschiedenis hoort niet even zwaar te
   wegen als werkvoorraad, maar mag ook niet verdwijnen. */
.stapel > summary { cursor: pointer; list-style: none; display: flex;
                    align-items: center; gap: 12px; padding: 11px 0;
                    border-bottom: 1px solid var(--line); font-size: 20px;
                    font-weight: 600; letter-spacing: -.02em; }
.stapel > summary::-webkit-details-marker { display: none; }
.stapel > summary::before { content: "›"; display: inline-block; font-size: 22px;
                            color: var(--fg-3); transition: transform .16s ease; }
.stapel[open] > summary::before { transform: rotate(90deg); }
.stapel > summary .count { margin-left: auto; font-size: 13px; font-weight: 400;
                           color: var(--fg-3); }

.filterbar { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 22px; }

/* ========================================================== account bewerken

   Het bewerkscherm was één lange rij velden met daaronder een aparte kaart die
   alleen een kop, een alinea en één knop bevatte. Dat las als een restje.

   Nu één kaart met benoemde delen: wie het is, waar hij bij mag, de limiet van
   zijn kantoor, en hoe hij binnenkomt. Wachtwoord en uitnodiging staan naast
   elkaar, want dat zijn twee antwoorden op dezelfde vraag. */

.bewerkkaart { overflow: hidden; }
.bewerkkop { display: flex; gap: 13px; align-items: flex-start;
             padding: 20px 22px; border-bottom: 1px solid var(--line);
             background: var(--surface-2); }
.bewerkwie { flex: 1 1 auto; min-width: 0; }
.bewerkwie b { display: block; font-size: 15.5px; font-weight: 580;
               letter-spacing: -.015em; }
.bewerkwie .hint { display: block; overflow: hidden; text-overflow: ellipsis; }
.avatar.groot { width: 42px; height: 42px; font-size: 16px; flex-shrink: 0; }

.kaartdeel { padding: 18px 22px; border-bottom: 1px solid var(--line); }
.kaartdeel:last-of-type { border-bottom: none; }
.kaartdeel h3 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
                font-size: 11px; letter-spacing: .11em; text-transform: uppercase;
                color: var(--fg-3); font-weight: 640; margin: 0 0 12px; }
.kaartdeel h3 .hint { margin-left: auto; text-transform: none; letter-spacing: 0;
                      font-size: 12.5px; font-weight: 400; }

.bewerkvoet { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
              padding: 16px 22px; border-top: 1px solid var(--line);
              background: var(--surface-2); }
.bewerkvoet .spacer { flex: 1; }

@media (max-width: 620px) {
  .bewerkkop, .kaartdeel, .bewerkvoet { padding-left: 16px; padding-right: 16px; }
  .bewerkvoet .btn { flex: 1 1 auto; }
}