/* TIVO Regie: intern dashboard in het TIVO-designsysteem.
   Vlak, architecturaal, hairlines, koper gedoseerd. Geen schaduwen. */

:root {
  --ink: #0F1D2B;
  --ink-soft: #2C3E57;
  --mist: #8795AD;
  --copper: #C26D27;
  --surface: #FFFFFF;
  --surface-warm: #F7F5F1;
  --line: #E6E4DE;
  --groen: #2E7D5B;
  --radius: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Het hidden-attribuut wint van een eigen display-regel. Zonder deze regel doet
   `el.hidden = true` niets bij alles wat hieronder op flex of inline-flex staat
   (.demo-toggle, .pl-vink, .pl-schakelaar), en dat is een val die je pas ziet
   als je zo'n element voor het eerst wilt verbergen. */
[hidden] { display: none !important; }

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--surface);
}

h1, h2, h3 { font-family: 'Manrope', sans-serif; color: var(--ink); letter-spacing: -0.02em; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }

/* ------------------------------------------------------------- topbar */
.topbar { background: linear-gradient(135deg, #0F1D2B, #2C3E57); color: #fff; }
.topbar-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 40px; height: 64px;
}
.merk { display: flex; align-items: baseline; gap: 10px; }
.merk-naam { font-family: 'Manrope'; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
.merk-sub {
  font-size: 12px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--copper);
}
.tabs { display: flex; gap: 4px; height: 100%; }
.tab {
  background: none; border: none; color: rgba(255, 255, 255, .65);
  padding: 0 18px; height: 100%; font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.tab:hover { color: #fff; }
.tab.actief { color: #fff; border-bottom-color: var(--copper); }
.topbar-rechts { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.datum { font-size: 13px; color: rgba(255, 255, 255, .55); }
/* Nu bijwerken: /api/sync bestond al, maar geen enkele knop riep hem aan. 44 px
   hoog, want dit is ook de knop die op de bouw wordt aangetikt. */
.sync-knop {
  min-height: 44px; padding: 0 14px; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .8);
  border: 1px solid rgba(255, 255, 255, .16); font: inherit; font-size: 13px;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.sync-knop:hover:not(:disabled) { background: rgba(255, 255, 255, .16); color: #fff; }
.sync-knop:disabled { opacity: .55; cursor: default; }

/* ------------------------------------------------------------- layout */
.container { max-width: 1240px; margin: 0 auto; padding: 48px 24px 96px; }
.pagina-kop { margin-bottom: 40px; max-width: 640px; }
.pagina-kop h1 { font-size: clamp(28px, 4vw, 38px); font-weight: 800; margin: 10px 0 8px; }
.intro { color: var(--mist); }

.eyebrow {
  font-size: 12px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--copper);
  display: flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--copper); }
.sectie-kop { margin: 48px 0 4px; }

/* ------------------------------------------------------------- faseband (signatuur) */
.faseband {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--surface);
}
.fase {
  padding: 18px 20px 16px; position: relative;
  border-left: 1px solid var(--line);
  background: var(--surface);
}
.fase:first-child { border-left: none; }
.fase::before {
  content: ""; position: absolute; top: 0; left: 20px; right: 20px;
  height: 2px; background: var(--line);
}
.fase.heeft-deals::before { background: var(--copper); }
.fase-label {
  font-size: 12px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--mist);
}
.fase-aantal {
  font-family: 'Manrope'; font-weight: 800; font-size: 28px;
  color: var(--ink); line-height: 1.3;
}
.fase.leeg-fase .fase-aantal { color: var(--line); }
.fase-waarde { font-size: 13px; color: var(--mist); }

/* ------------------------------------------------------------- opvolgen */
.opvolgen {
  margin-top: 32px; padding: 20px 24px;
  background: var(--surface-warm); border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.opvolgen ul { list-style: none; margin-top: 10px; }
.opvolgen li { display: flex; gap: 12px; padding: 8px 0; align-items: baseline; }
.opvolgen li + li { border-top: 1px solid var(--line); }
.opvolgen .wie { font-weight: 600; color: var(--ink); white-space: nowrap; }
/* Welk document het is, achter de naam: zachter en niet vet, want de naam is
   waar je op zoekt en dit is de precisering erbij. */
.opvolgen .doc { font-weight: 400; color: var(--ink-soft); font-size: 13px; }
.opvolgen .wat { color: var(--ink-soft); }
.opvolgen button.link { margin-left: auto; }

/* ------------------------------------------------------------- deal-lijst */
.deal-lijst { list-style: none; }
.deal-rij {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) 1fr auto auto auto;
  gap: 24px; align-items: center;
  padding: 18px 8px; border-bottom: 1px solid var(--line);
  cursor: pointer; transition: background .15s var(--ease);
}
/* Alleen waar een muis is: op touch blijft de hover-staat na een tik hangen en
   lijkt de laatst aangetikte deal geselecteerd. */
@media (hover: hover) {
  .deal-rij:hover { background: var(--surface-warm); }
}
.deal-naam { font-weight: 600; color: var(--ink); }
.deal-project { font-size: 13px; color: var(--mist); }
.deal-bedrag { font-family: 'Manrope'; font-weight: 700; color: var(--ink); text-align: right; }
.deal-bedrag .btw { font-family: 'Inter'; font-weight: 400; font-size: 12px; color: var(--mist); }
.deal-meta { font-size: 13px; color: var(--mist); text-align: right; }
.geopend-meta { color: var(--copper); }
.uitkomst .deal-rij { opacity: .65; }

.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500; border: 1px solid var(--line);
  color: var(--ink); background: var(--surface-warm); white-space: nowrap;
}
.badge.verstuurd    { background: #EAEFF6; border-color: #D4DEEC; }
.badge.geopend      { background: #EAEFF6; border-color: #D4DEEC; color: var(--ink-soft); }
.badge.gereageerd   { background: #FCF3EA; border-color: #EED9C4; color: var(--copper); }
.badge.geaccepteerd { background: var(--copper); border-color: var(--copper); color: #fff; }
.badge.verlopen     { background: #8B8B85; border-color: #8B8B85; color: #fff; }
.badge.afgewezen    { background: var(--ink); border-color: var(--ink); color: #fff; }
.badge.betaald, .badge.opgeleverd { background: var(--groen); border-color: var(--groen); color: #fff; }
.badge.concept      { background: #F3F1EC; border-color: #E3DFD6; }
.badge.demo         { background: #F5F5F3; border-color: #E6E6E2; color: #5C6B84; }
.versie-chip {
  font-size: 12px; color: var(--mist); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1px 6px; white-space: nowrap;
}
.versie-chip.nieuw { color: var(--copper); border-color: var(--copper); }

.leeg { margin-top: 48px; color: var(--mist); }
.leeg code { font-size: 13px; background: var(--surface-warm); padding: 2px 6px; border-radius: var(--radius); }

/* ------------------------------------------------------------- klussen */
.demo-toggle { display: inline-flex; gap: 8px; align-items: center; margin-top: 16px; font-size: 13px; color: var(--mist); }
.klus-kaart {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  margin-bottom: 32px; overflow: hidden;
}
.klus-kop {
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline;
  padding: 22px 24px; background: var(--surface-warm);
  border-bottom: 1px solid var(--line);
}
.klus-kop h2 { font-size: 20px; font-weight: 700; }
.klus-kop .project { color: var(--mist); font-size: 14px; }
.klus-kop .rechts { margin-left: auto; display: flex; gap: 16px; align-items: center; font-size: 13px; }
.klus-groepen { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.klus-groep { padding: 18px 24px; border-left: 1px solid var(--line); min-height: 110px; }
.klus-groep:first-child { border-left: none; }
.klus-groep h3 {
  font-family: 'Inter'; font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--mist);
  margin-bottom: 10px;
}
.klus-doc { display: flex; gap: 10px; align-items: center; padding: 6px 0; }
.klus-doc a { color: var(--ink); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--line); }
.klus-doc a:hover { border-bottom-color: var(--copper); color: var(--copper); }
.klus-doc.placeholder { color: var(--mist); font-size: 13px; }
.klus-voet { padding: 14px 24px; border-top: 1px solid var(--line); display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
/* betalingstermijnen op de klus-kaart (invoer; termijn-styling uit analytics.css) */
.klus-termijnen { padding: 16px 24px; border-top: 1px solid var(--line); }
.klus-termijnen .an-termijn-kop { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.klus-termijnen .an-termijn-kop .rechts { margin-left: auto; text-transform: none; letter-spacing: normal; font-size: 13px; color: var(--ink-soft); }
.klus-termijnen .an-termijn-vorm { max-width: 560px; }

/* ------------------------------------------------------------- knoppen */
button.link {
  background: none; border: none; color: var(--copper); font-weight: 500;
  padding: 0; border-bottom: 1px solid transparent;
}
button.link:hover { border-bottom-color: var(--copper); }
.knop {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--radius-md); padding: 8px 14px; font-weight: 500;
  color: var(--ink); transition: border-color .2s var(--ease), color .2s var(--ease);
}
.knop:hover { border-color: var(--copper); color: var(--copper); }
.knop.primair { background: var(--copper); border-color: var(--copper); color: #fff; }
.knop.primair:hover { background: #A85A1E; color: #fff; }

/* ------------------------------------------------------------- detailpaneel */
.paneel-achtergrond {
  position: fixed; inset: 0; background: rgba(15, 29, 43, .35); z-index: 40;
}
.paneel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw);
  background: var(--surface); z-index: 50; overflow-y: auto;
  border-left: 1px solid var(--line); padding: 32px 32px 48px;
  /* Hier stond een transform: translateX(0) met een transition erop. Er is geen
     enkele regel die die transform ooit verandert — het paneel gaat open met
     [hidden], en display: none animeert niet — dus het bewoog nergens. Wat het
     wél deed: een transform maakt van dit paneel het referentiekader voor alles
     wat erbinnen position: fixed is. Daardoor scrolde de sluitknop met de
     inhoud weg en centreerde de afwijskeuze zich op het paneel in plaats van op
     het scherm. */
  /* Scrollen in het paneel mag niet doorslaan naar de pagina eronder, en een
     zijwaartse veeg op een schermvullend paneel is op een telefoon 'ga terug' --
     die bracht Lauren uit het CRM in plaats van terug naar de lijst. */
  overscroll-behavior: contain;
}
/* Zolang het paneel openstaat scrollt de pagina eronder niet mee. Op een
   telefoon vult het paneel het scherm, en dan is meescrollende achtergrond de
   reden dat je na sluiten ergens anders staat dan waar je was. */
body.paneel-open { overflow: hidden; }
.paneel h2 { font-size: 24px; font-weight: 800; margin: 4px 0 2px; }
.paneel .project { color: var(--mist); margin-bottom: 16px; }
/* 44 bij 44: dit was een raakvlak van 22 pixels, en dat is op een telefoon een
   knop die je twee keer mist. De × blijft optisch even groot; alleen het
   aanraakgebied eromheen groeit. */
.paneel-sluit {
  position: absolute; top: 12px; right: 16px; background: none; border: none;
  font-size: 22px; color: var(--mist); line-height: 1;
  min-width: 44px; min-height: 44px; display: inline-flex;
  align-items: center; justify-content: center;
}
.paneel-sluit:hover { color: var(--ink); }
.paneel .bedrag-groot { font-family: 'Manrope'; font-weight: 800; font-size: 26px; color: var(--ink); }
.paneel .bedrag-groot .btw { font-family: 'Inter'; font-weight: 400; font-size: 13px; color: var(--mist); }
.paneel-feiten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 20px 0; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feit .k { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--mist); }
.feit .w { color: var(--ink); font-weight: 500; }
.paneel-acties { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }

/* tijdlijn: dezelfde rail als de faseplanning in de offertes */
.tijdlijn { list-style: none; margin: 12px 0 24px; position: relative; padding-left: 22px; }
.tijdlijn::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.tijdlijn li { position: relative; padding: 6px 0; }
.tijdlijn li::before {
  content: ""; position: absolute; left: -21px; top: 13px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface); border: 1.5px solid var(--mist);
}
.tijdlijn li.k-geaccepteerd::before, .tijdlijn li.k-reactie::before,
.tijdlijn li.k-versie::before { border-color: var(--copper); background: var(--copper); }
.tijdlijn li.k-afgewezen::before, .tijdlijn li.k-verlopen::before { border-color: var(--ink); background: var(--ink); }
.tijdlijn .t-datum { font-size: 12px; color: var(--mist); }
.tijdlijn .t-tekst { color: var(--ink); }
.tijdlijn button.weg { background: none; border: none; color: var(--mist); font-size: 12px; margin-left: 8px; }
.tijdlijn button.weg:hover { color: var(--ink); }

/* openingslog: per dag alle tijdstippen waarop de offerte bekeken is */
.open-log { list-style: none; margin: 12px 0 24px; }
.open-log li {
  display: flex; gap: 12px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.open-log .log-dag { min-width: 105px; color: var(--ink); font-weight: 500; }
.open-log .log-soort { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mist); min-width: 92px; }
.open-log .log-geopend .log-soort,
.open-log li.log-geopend .log-soort { color: var(--copper); }
.open-log .log-tijden { font-family: 'Manrope'; font-weight: 600; color: var(--ink); }
.open-log li.log-bezocht .log-tijden { color: var(--mist); font-weight: 400; }

.notitie-vorm { display: flex; gap: 8px; margin-top: 8px; }
.notitie-vorm input[type=text] {
  flex: 1; border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 8px 12px; font: inherit; color: var(--ink);
}
.notitie-vorm input:focus-visible { outline: 2px solid var(--copper); outline-offset: 0; border-color: var(--copper); }

.contact-regel { font-size: 13px; color: var(--mist); margin-top: 4px; }
.contact-regel .waarde { color: var(--ink); }

/* ------------------------------------------------------------- klein scherm */
/* 760 en niet 720: planning.css kantelt de tijdlijn op dezelfde grens. Stonden
   die twee uit elkaar, dan kreeg je tussen 721 en 760 pixels (een iPad mini
   staand op 744, een telefoon liggend) de laptoptekening op een telefoonlayout. */
@media (max-width: 760px) {
  /* De topbar had 456 pixels nodig op een scherm van 375, en dat duwde de hele
     pagina zijwaarts: het tabblad Analytics stond half buiten beeld, en een
     zijwaartse veeg schoof de tijdlijn weg terwijl de plakkende maandschaal
     meebewoog. Nu: minder padding, en als het dan nog niet past schuift alleen
     de tabstrook zelf -- niet de pagina eronder. */
  .topbar-inner { gap: 12px; padding: 0 16px; }
  /* En daarna bleef er van die strook 129 pixels over voor drie tabs die samen
     315 nodig hebben: 'Lopende klussen' en 'Analytics' stonden achter een
     zijwaartse veeg die je niet ziet, terwijl Lopende klussen juist hét scherm
     is dat Lauren op de bouw opent. Op een telefoon dus twee regels: merk en
     Bijwerken boven, de tabs daaronder over de volle breedte. */
  .topbar-inner {
    flex-wrap: wrap; height: auto; row-gap: 0;
    padding-top: 10px; align-items: center;
  }
  .merk { order: 1; }
  .topbar-rechts { order: 2; }
  .tabs {
    order: 3; width: 100%; min-width: 0; height: 46px; margin-top: 8px;
    overflow-x: auto; scrollbar-width: none; justify-content: space-between;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 0 12px; white-space: nowrap; }
  .container { padding: 28px 16px 64px; }
  /* De intro onder de paginakop legt uit wat je op een breed scherm al ziet. Op
     een telefoon kost hij twee tot vier regels boven het werk zelf. */
  .pagina-kop { margin-bottom: 22px; }
  .pagina-kop .intro { display: none; }
  .datum { display: none; }
  .faseband { grid-template-columns: repeat(2, 1fr); }
  .fase:nth-child(3) { border-left: none; }
  .fase { border-top: 1px solid var(--line); }
  .fase:nth-child(-n+2) { border-top: none; }
  .deal-rij { grid-template-columns: 1fr auto; grid-auto-flow: dense; gap: 6px 16px; }
  .deal-meta { text-align: left; }
  .paneel { padding: 24px 20px 40px; }
  /* De opvolgregel is een flexrij met een naam die niet mag breken; op 375
     pixels hield het advies daardoor ~90 pixels over en brak het per woord af,
     één klant per schermhoogte. Zelfde greep als .deal-rij: naam en knop naast
     elkaar, het advies voluit op de regel eronder. */
  .opvolgen li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
  .opvolgen .wie { white-space: normal; grid-column: 1; grid-row: 1; }
  /* De knop naast de naam, niet onder het advies: zo staat op elke regel de
     klant en de weg naar zijn deal op ooghoogte, en leest het advies eronder
     over de volle breedte. */
  .opvolgen button.link { grid-column: 2; grid-row: 1; }
  .opvolgen .wat { grid-column: 1 / -1; grid-row: 2; }
}

/* keuzelijst-overlay (afwijsredenen in het dealpaneel) */
.keuze-box {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px 28px; z-index: 60;
  width: min(380px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 8px;
}
.keuze-box h3 { font-size: 17px; margin-bottom: 6px; }
.keuze-box .knop { text-align: left; }
.keuze-box input[type=text] {
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 8px 12px; font: inherit; color: var(--ink); margin-top: 4px;
}
.keuze-box .keuze-voet { display: flex; justify-content: flex-end; margin-top: 6px; }
.keuze-box button.link { padding: 4px 0; }

/* ---------------------------------------------------- online spiegel/login */
/* Alleen zichtbaar via de online spiegel (/crm); lokaal blijven deze
   elementen verborgen omdat de server geen 401 of _spiegel-info geeft. */
.spiegel-banner {
  background: var(--surface-warm); border-bottom: 1px solid var(--line);
  color: var(--mist); font-size: 13px; text-align: center; padding: 6px 24px;
}
.wachtrij-chip { color: var(--copper); font-size: 12px; white-space: nowrap; }
/* Let-op-balk: online invoer die niet verwerkt kon worden, en (blok 6) de
   gezondheidswaarschuwingen. Bewust opvallender dan de spiegel-balk: hier is
   iets aan de hand dat aandacht vraagt. */
.let-op-banner {
  background: #FBF0E6; border-bottom: 1px solid var(--copper);
  color: #7A4212; font-size: 13px; padding: 8px 24px; text-align: center;
}
/* Verbindingsproblemen: boven de bestaande UI, nooit in plaats daarvan. */
.fout-banner {
  background: #F6E7E7; border-bottom: 1px solid #C25151;
  color: #7A1F1F; font-size: 13px; padding: 8px 24px; text-align: center;
}
.let-op-banner ul { list-style: none; margin: 0; padding: 0; }
.let-op-banner li + li { margin-top: 2px; }
.let-op-banner .let-op-weg {
  margin-top: 6px; color: #7A4212; font-size: 12px; text-decoration: underline;
}
.let-op-banner .let-op-weg[disabled] { opacity: .5; text-decoration: none; }
/* Conflict-regels (gelijktijdig gewijzigd) vallen op in tijdlijn en klus-kaart. */
.tijdlijn li.k-conflict::before { border-color: var(--copper); background: var(--surface); }
.tijdlijn li.k-conflict .t-tekst { color: #7A4212; }
.klus-meldingen {
  margin-top: 8px; padding: 8px 10px; border: 1px solid var(--copper);
  border-radius: var(--radius); background: #FBF0E6; color: #7A4212; font-size: 13px;
}
.klus-meldingen p + p { margin-top: 4px; }
.login-scherm {
  position: fixed; inset: 0; z-index: 60;
  background: linear-gradient(135deg, #0F1D2B, #2C3E57);
  display: flex; align-items: center; justify-content: center;
}
.login-box {
  background: var(--surface); border-radius: var(--radius-lg);
  padding: 36px 32px; width: min(90vw, 360px);
  display: flex; flex-direction: column; gap: 14px;
}
.login-box h2 { font-size: 20px; }
.login-box input {
  font: inherit; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--radius); letter-spacing: 2px; color: var(--ink);
}
.login-fout { color: #B4432F; font-size: 13px; }

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

/* ------------------------------------------------ klein scherm, deel 2 */
/* Staat bewust onderaan: deze regels moeten winnen van basisregels die verderop
   in dit bestand staan (de banners), en cascade gaat op volgorde. */
@media (max-width: 760px) {
  /* Een gecentreerde melding van drie regels leest op een telefoon als een
     affiche in plaats van als een mededeling, en kost een halve regel hoogte. */
  .let-op-banner, .fout-banner, .spiegel-banner {
    padding: 7px 16px; text-align: left; line-height: 1.45;
  }
  /* iOS Safari zoomt de pagina in bij focus op elk veld met letters onder 16
     pixels, en zoomt na het typen niet terug. Op de telefoon dus overal 16.
     De specifiekere selectors staan erbij omdat de basisregels anders van de
     kale winnen. */
  input[type=text], input[type=number], input[type=date], select, textarea,
  .notitie-vorm input[type=text], .keuze-box input[type=text],
  .login-box input { font-size: 16px; }
  /* De sluitknop stond absoluut in de scrollende container en scrolde dus uit
     beeld; op een telefoon is er geen zichtbare achtergrond, geen Escape en
     geen terugveeg, dus was een lang paneel alleen met terugscrollen te
     sluiten. Vast aan het venster (het paneel is hier schermvullend), met een
     vlakje eronder om boven de inhoud leesbaar te blijven. */
  .paneel-sluit {
    position: fixed; z-index: 5; background: var(--surface);
    border-radius: 50%; box-shadow: 0 0 0 1px var(--line);
  }
}