/* Zonder dit vergroot iOS bij het draaien de letters, en dat blijft staan
   als je het toestel terugdraait. De app is bedoeld staand: het manifest
   vraagt om staand, en dit vangt op wat daar doorheen glipt. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

:root {
  --papier: #FFFFFF; --inkt: #14181F; --grijs: #5D6673; --stil: #8A93A1;
  --lijn: #EBEDF1; --vlak: #EFF0F3; --blauw: #12385E; --accent: #D6451B;
  --boven: env(safe-area-inset-top); --onder: env(safe-area-inset-bottom);
  /* Voorbehoud bij een onbevestigde melding: opvallend genoeg om te zien,
     niet zo alarmerend dat het de briefing overstemt. */
  --oker: #B4791F; --tint: rgba(180, 121, 31, 0.08);
  /* Hoogte van de strook bovenin op het beginscherm, en tegelijk de ruimte die
     kop en terugbalk vrijhouden. Een getal, zodat de strook nooit over de
     inhoud heen kan vallen doordat er ergens een andere waarde staat. */
  --lucht-boven: 22px;
}
/* Donker volgt het toestel, tenzij je in het menu zelf kiest. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --papier: #14181F; --inkt: #ECEEF2; --grijs: #A2AAB6; --stil: #78818E;
    --lijn: #262C36; --vlak: #1D232C; --blauw: #7FA8D4;
    --oker: #D8A249; --tint: rgba(216, 162, 73, 0.12);
  }
}
:root[data-thema="donker"] {
    --papier: #14181F; --inkt: #ECEEF2; --grijs: #A2AAB6; --stil: #78818E;
    --lijn: #262C36; --vlak: #1D232C; --blauw: #7FA8D4;
    --oker: #D8A249; --tint: rgba(216, 162, 73, 0.12);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* De bediening voelt als een app, dus daar valt niets te selecteren. De tekst
   van een briefing juist wel: die wil je kunnen kopieren. */
button, .tabs, .kop, .balk, .merk, .rubriek, .mono, label, .melding,
.leeg, .leeg p, .leeg strong, .blad-menu, .greep, .keuzerij, .draaitop, .merkje {
  user-select: none; -webkit-user-select: none; }
.blad p, .blad h2, .item, .item p, .bronnen, .regel .titel, .regel .romp,
.bubbel, .voorstel dd { user-select: text; -webkit-user-select: text; }
input, textarea { user-select: text; -webkit-user-select: text; }
html, body { height: 100%; overscroll-behavior: none; }
/* De app staat vast in het venster. Zonder dit veert de hele pagina mee zodra
   je ergens sleept, ook aan de kop, en dat voelt als een los vel papier. */
#app { position: fixed; top: 0; right: 0; bottom: 0; left: 0; }
body {
  margin: 0; background: var(--papier); color: var(--inkt);
  font-family: -apple-system, "SF Pro Text", system-ui, "Helvetica Neue", sans-serif;
  font-size: 15px; overscroll-behavior-y: none;
}
button, input, textarea { font: inherit; color: inherit; }
#app { display: flex; flex-direction: column; height: 100%; }

/* iOS tekent de statusbalk over de pagina heen. Een eigen strook in dezelfde
   kleur eronder houdt logo en tekst vrij. */
.veiligboven { position: fixed; top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top, 0px); background: var(--papier); z-index: 20; }

/* Kop en terugbalk liggen boven die strook. De strook moet wegvangen wat er
   onder de statusbalk door scrollt, maar hij mag nooit over de kop zelf heen
   vallen: dan snijdt hij de bovenkant van een knop af. */
.kop, .balk { position: relative; z-index: 21; }
.kop { flex-shrink: 0; padding: calc(env(safe-area-inset-top, 0px) + 12px) 22px 12px; }
/* Aan de kop en de terugbalk valt niets te slepen: knoppen blijven werken,
   maar een veegbeweging doet er niets. */
.kop, .balk { touch-action: none; }

/* iOS legt onder de statusbalk nog een vervagende rand over de pagina, iets
   lager dan de veilige zone zelf. Daarom op het beginscherm wat extra lucht:
   genoeg om het logo daaronder vandaan te houden, niet zoveel dat de kop
   zichtbaar wegzakt. De strook erboven blijft ondoorzichtig, zodat er niets
   doorheen schemert om te vervagen. */
.opbeginscherm .kop  { padding-top: calc(env(safe-area-inset-top, 0px) + var(--lucht-boven)); }
.opbeginscherm .balk { padding-top: calc(env(safe-area-inset-top, 0px) + var(--lucht-boven)); }

/* Die rand vervaagt wat erachter ligt. Ligt daar een egale strook in de
   papierkleur, dan valt er niets te vervagen en zie je hem niet meer. */
.opbeginscherm .veiligboven { height: calc(env(safe-area-inset-top, 0px) + var(--lucht-boven)); }
.merk { display: flex; align-items: center; gap: 10px; }
.merk .vlag {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(170deg, #123A63 0%, #2B2438 62%, #43221C 100%);
  display: flex; align-items: center; justify-content: center;
}
.merk h1 { flex-grow: 1; margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.8px; }
.mono { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 10.5px; color: var(--stil); }

.tabsrij { display: flex; align-items: stretch; gap: 6px; margin-top: 12px; }
.tabs { display: flex; gap: 6px; padding: 3px; border-radius: 9px; background: var(--vlak);
  overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 10px; border-radius: 7px; border: none; background: transparent;
  font-size: 12.5px; font-weight: 500; color: var(--grijs); cursor: pointer; white-space: nowrap;
}
.tabs button[aria-selected="true"] { background: var(--papier); box-shadow: 0 1px 2px rgba(20,24,31,.12); font-weight: 600; color: var(--blauw); }
.tabs .telling { padding: 1px 6px; border-radius: 7px; background: var(--accent); color: #FFF;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; }
/* Buiten de schuivende rij, dus met een eigen achtergrond en een vaste plek. */
.tabsrij .plus { flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 9px; background: var(--vlak); color: var(--stil); cursor: pointer; }

.lijst { flex-grow: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 0 22px calc(env(safe-area-inset-bottom, 0px) + 24px); }
.regel { display: flex; flex-direction: column; gap: 5px; padding: 14px 0; border-top: 1px solid var(--lijn);
  width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer; }
.regel .meta { display: flex; align-items: center; gap: 7px; }
.bol { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.vink { width: 12px; }
.stip { width: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.regel .titel { font-size: 15px; line-height: 1.32; letter-spacing: -.25px; }
.regel[data-gelezen="1"] .titel { font-weight: 400; color: var(--grijs); }
.regel[data-gelezen="0"] .titel { font-weight: 600; color: var(--inkt); }
.regel .romp { font-size: 13px; line-height: 1.45; color: var(--grijs);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.balk { flex-shrink: 0; display: flex; align-items: center; gap: 4px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 18px 10px;
  border-bottom: 1px solid var(--lijn); background: var(--papier); }
.balk .terug { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px 5px 4px; border: none; background: none; color: var(--blauw); font-size: 15px; cursor: pointer; }
.balk .midden { flex-grow: 1; text-align: center; font-size: 14px; font-weight: 600; color: var(--grijs); margin-left: -12px; }
.balk .rond { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: none; background: none; padding: 0; cursor: pointer; }

.blad { flex-grow: 1; min-height: 0; overflow-y: auto; padding: 18px 22px calc(var(--onder) + 30px); display: flex; flex-direction: column; gap: 11px; }
.blad h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.6px; line-height: 1.22; }
.streep { height: 1px; background: var(--lijn); margin: 3px 0; }
.rubriek { font-size: 9.5px; font-weight: 700; letter-spacing: .8px; color: var(--accent); margin-top: 4px; }
.item { display: flex; flex-direction: column; gap: 4px; }
.item .ikop { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.item p { margin: 0; font-size: 14px; line-height: 1.58; color: var(--inkt); }
.merkje { display: inline-block; padding: 1px 6px; border-radius: 5px; background: var(--vlak); color: var(--grijs);
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: .4px; }
.bronnen { display: flex; flex-wrap: wrap; gap: 6px; }
.bronnen a { font-size: 11.5px; color: var(--blauw); text-decoration: none; border-bottom: 1px solid var(--lijn); }

.leeg { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 30px 34px calc(var(--onder) + 40px); text-align: center; }
.leeg p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--grijs); }
.knop { padding: 10px 18px; border-radius: 9px; border: 1px solid #0E2D4C; background: var(--blauw); color: #FFF; font-size: 14px; font-weight: 600; cursor: pointer; }
.knop.stil { background: transparent; border-color: var(--lijn); color: var(--grijs); font-weight: 500; }

.veld { width: 100%; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--lijn); background: var(--papier); font-size: 15px; }
.formulier { display: flex; flex-direction: column; gap: 12px; padding: 24px 22px; margin: auto; width: 100%; max-width: 360px; }

.gesprek { flex-grow: 1; min-height: 0; overflow-y: auto; padding: 16px 22px; display: flex; flex-direction: column; gap: 12px; }
.bubbel { max-width: 84%; padding: 10px 13px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; }
.bubbel.ik { align-self: flex-end; background: var(--blauw); color: #FFF; border-bottom-right-radius: 5px; }
.bubbel.claude { align-self: flex-start; background: var(--vlak); border-bottom-left-radius: 5px; }
.voorstel { border: 1px solid var(--lijn); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.voorstel dt { font-size: 9.5px; font-weight: 700; letter-spacing: .7px; color: var(--stil); }
.voorstel dd { margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; }
.invoerbalk { flex-shrink: 0; display: flex; gap: 8px; padding: 10px 18px calc(var(--onder) + 12px); border-top: 1px solid var(--lijn); }
.invoerbalk .veld { flex-grow: 1; }

.draaitop { margin: 22px 0 0; text-align: center; font-size: 10.5px; font-weight: 400;
  letter-spacing: .2px; color: var(--stil); opacity: .72; }

/* Uitklapmenu achter het logo. */
.merkknop { display: flex; align-items: center; gap: 10px; flex-grow: 1; padding: 0; border: 0;
  background: none; cursor: pointer; text-align: left; }
.merkknop h1 { flex-grow: 0; }
.merkknop .pijl { width: 11px; height: 11px; flex-shrink: 0; opacity: .45; margin-left: -3px;
  transition: transform .18s; }
.merkknop[aria-expanded="true"] .pijl { transform: rotate(180deg); }
.sluier { position: fixed; inset: 0; background: rgba(10, 14, 20, .35); z-index: 30; }
.blad-menu { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; background: var(--papier);
  border-radius: 18px 18px 0 0; padding: 10px 0 calc(var(--onder) + 14px);
  box-shadow: 0 -8px 40px rgba(8, 14, 22, .3); animation: omhoog .22s ease-out; }
@keyframes omhoog { from { transform: translateY(100%); } }
.blad-menu .greep { width: 38px; height: 4px; border-radius: 2px; background: var(--lijn); margin: 4px auto 10px; }
.blad-menu button, .blad-menu .regelkop { display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 24px; border: 0; background: none; font-size: 15.5px; color: var(--inkt);
  text-align: left; cursor: pointer; }
.blad-menu button:active { background: var(--vlak); }
.blad-menu .regelkop { font-size: 10.5px; letter-spacing: .8px; color: var(--stil); padding-bottom: 4px;
  font-family: "IBM Plex Mono", ui-monospace, monospace; }
.blad-menu .rechts { margin-left: auto; font-size: 13px; color: var(--stil); }
.blad-menu .scheiding { height: 1px; background: var(--lijn); margin: 6px 24px; }
.keuzerij { display: flex; gap: 6px; padding: 4px 24px 8px; }
.keuzerij button { flex: 1; justify-content: center; padding: 9px 4px; border: 1px solid var(--lijn);
  border-radius: 9px; font-size: 13.5px; }
.keuzerij button[aria-pressed="true"] { border-color: var(--blauw); color: var(--blauw); font-weight: 600; }

/* De melding onderin. Was een zwarte pil: die sprong eruit omdat de rest van
   de app licht en rustig is. Nu papierkleur met een rand en een zachte schaduw,
   zodat hij boven de inhoud zweeft zonder te schreeuwen. */
.melding {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--onder) + 22px); max-width: calc(100% - 44px);
  background: var(--papier); color: var(--inkt);
  border: 1px solid var(--lijn); border-radius: 12px;
  box-shadow: 0 6px 22px rgba(20, 24, 31, .13), 0 1px 3px rgba(20, 24, 31, .08);
  padding: 10px 15px; font-size: 13px; line-height: 1.45; text-align: center;
  z-index: 9;
}
.draait { display: inline-block; width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: tol .7s linear infinite; vertical-align: -2px; }
@keyframes tol { to { transform: rotate(360deg); } }

/* De melding tijdens het ophalen: een rondje en een regel, verder niets. Er
   stonden eerst ook een balk en een klok bij, en dat was drie keer hetzelfde
   zeggen. */
.melding.bezig { display: flex; align-items: center; gap: 9px; text-align: left; }
.melding.bezig .fase { flex: 1; }

/* Voorbehoud bij een onbevestigde melding. Zichtbaar genoeg om te lezen voor
   je op de bron klikt, rustig genoeg om de briefing niet te overstemmen. */
.voorbehoud {
  margin: 8px 0 0; padding: 7px 10px;
  border-left: 2px solid var(--oker);
  background: var(--tint);
  border-radius: 0 6px 6px 0;
  font-size: 12.5px; line-height: 1.45; color: var(--grijs);
}

/* Naar beneden slepen om te verversen. De lijst schuift mee, de melder ligt
   eronder en komt tevoorschijn zodra er ruimte is. */
.verversbaar { position: relative; flex-grow: 1; min-height: 0; display: flex; overflow: hidden; }
.verversbaar > .lijst { flex-grow: 1; will-change: transform; }
.verversbaar > .lijst.terug { transition: transform .26s cubic-bezier(.22,.61,.36,1); }
/* Tijdens het trekken staat er niets: dat de lijst meegeeft zegt genoeg.
   Pas als hij echt ophaalt verschijnt het cirkeltje met de tekst. */
.verversmelder {
  position: absolute; top: 0; left: 0; right: 0; height: 58px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 12.5px; color: var(--stil); pointer-events: none;
  opacity: 0; transition: opacity .18s ease;
}
.verversmelder[data-bezig="1"] { opacity: 1; }
/* Tijdens het trekken volgt de melder je vinger, dus daar mag geen vertraging
   op zitten: die hoort alleen bij het wegvallen erna. */
.verversmelder.volgt { transition: none; }
.verversmelder .ring {
  width: 15px; height: 15px; border-radius: 50%;
  border: 1.8px solid var(--lijn); border-top-color: var(--blauw);
}
.verversmelder[data-bezig="1"] .ring { animation: draai .7s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }

/* Tegels: zoveel naast elkaar als er passen, twee op een telefoon en meer op
   een breed scherm. Een raster in plaats van een rij, anders rekt een tegel
   die alleen op zijn regel overblijft uit over de volle breedte. */
.tegels {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.tegel {
  display: flex; flex-direction: column; gap: 9px;
  padding: 13px 14px 14px; border: 1px solid var(--lijn); border-radius: 13px;
  background: var(--papier); cursor: pointer; text-align: left;
}
.tegel:active { background: var(--vlak); }
.tegel .streep { width: 26px; height: 3px; border-radius: 2px; }
.tegel .naam { font-size: 14.5px; font-weight: 600; line-height: 1.3; letter-spacing: -.2px; }

/* Rubrieknamen op het detailscherm: kleine labels, geen opsomming. Die lopen
   met de tekst mee en horen dus niet in het raster van de tegels. */
.etiketten { display: flex; flex-wrap: wrap; gap: 7px; }
.etiket {
  padding: 5px 10px; border-radius: 999px; background: var(--vlak);
  font-size: 12px; color: var(--grijs); white-space: nowrap;
}

/* De knop rechtsboven in de balk, naast Terug. */
.balk-doen {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  padding: 5px 10px 5px 8px; border: none; border-radius: 8px;
  background: var(--blauw); color: #fff; font-size: 13.5px; font-weight: 600;
  cursor: pointer;
}
.balk-doen:disabled { opacity: .5; }

/* Balk boven het overzicht zolang er een inhaalslag loopt. Zonder dit zie je
   niets gebeuren en denk je dat er niets gebeurt. */
.bezigbalk {
  display: flex; align-items: center; gap: 9px;
  margin: 12px 0 4px; padding: 10px 12px; border-radius: 10px;
  background: var(--vlak); font-size: 13px; color: var(--grijs);
}
.bezigbalk .ring {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  border: 1.8px solid var(--lijn); border-top-color: var(--blauw);
  animation: draai .7s linear infinite;
}

/* Een eigen thema in de gallerij, met het potlood ernaast. De rij is de knop
   naar het thema; het potlood is een knop op zichzelf. */
.themarij { display: flex; align-items: stretch; gap: 4px; border-top: 1px solid var(--lijn); }
.penknop {
  flex-shrink: 0; width: 38px; display: flex; align-items: center; justify-content: center;
  border: none; background: none; color: var(--stil); cursor: pointer; padding: 0;
}
.penknop:active { color: var(--blauw); }
.penknop.gevaar:active { color: var(--accent); }
.penknop { width: 30px; }

/* De dagkiezer klapt onder de themarij open. Zeven knopjes naast elkaar, zodat
   je in een oogopslag ziet op welke dagen hij draait. */
.dagkiezer {
  display: flex; gap: 6px; padding: 10px 0 12px;
  border-top: 1px dashed var(--lijn);
}
.dagknop {
  flex: 1 1 0; padding: 8px 0; border-radius: 8px;
  border: 1px solid var(--lijn); background: var(--papier);
  font-size: 12.5px; color: var(--stil); cursor: pointer;
}
.dagknop[aria-pressed="true"] {
  background: var(--blauw); border-color: var(--blauw); color: #fff; font-weight: 600;
}

/* Een dag waarop er wel gekeken is maar niets te melden viel. Rustiger dan een
   briefingregel, maar wel zichtbaar: anders weet je niet of er niets was of
   dat er niets is gedraaid. */
/* Een dag zonder nieuws leest als een briefingregel: datum boven, tekst
   eronder. Alleen rustiger, zodat je bij het scrollen meteen ziet wat wel en
   niet iets te melden had. De lege stip houdt de tekst op dezelfde lijn als
   die van een briefing. */
.legedag {
  display: flex; flex-direction: column; gap: 5px;
  padding: 14px 0; border-top: 1px solid var(--lijn);
}
.legedag .meta { display: flex; align-items: center; gap: 7px; }
/* Bewust GEEN eigen maat: de lege dag gebruikt hetzelfde vakje als een
   briefingregel, anders staat het icoon niet op dezelfde as als het bolletje
   en het vinkje, en loopt de datumkolom scheef. Een eigen maat hier drukte
   het vergrootglas plat, hoe groot het ook getekend werd. */
.legedag .titel { font-size: 14px; color: var(--stil); }

/* Onderaan het overzicht terwijl de volgende briefings binnenkomen. */
.bijladen {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 16px 0 6px; font-size: 12.5px; color: var(--stil);
}
.bijladen .ring {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.8px solid var(--lijn); border-top-color: var(--blauw);
  animation: draai .7s linear infinite;
}

/* Weekkop tussen de regels. Een tint van het papier, niet een eigen kleur:
   hij moet de lijst indelen zonder de aandacht te trekken. */
.weekkop {
  margin: 4px -22px 0; padding: 7px 22px;
  background: var(--vlak); color: var(--stil);
  font-size: 11px; letter-spacing: .7px; text-transform: uppercase;
  position: sticky; top: 0; z-index: 2;
}
.weekkop span {
  margin-left: 7px; padding: 1px 6px; border-radius: 4px;
  background: var(--papier); color: var(--blauw); letter-spacing: .4px;
}

/* Naar links vegen legt de knop bloot om een briefing op gelezen of ongelezen
   te zetten. De knop ligt eronder; de regel schuift eroverheen weg. */
.regelhouder { position: relative; overflow: hidden; }
.regelhouder .regel {
  position: relative; z-index: 1; background: var(--papier);
  transition: transform .22s cubic-bezier(.22,.61,.36,1);
}
.regelhouder.raakt .regelactie { filter: brightness(1.12); }
.regelactie.terugzetten { background: var(--accent); }
.regelactie {
  position: absolute; top: 1px; right: 0; bottom: 0; width: 76px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: var(--blauw); color: #fff;
  pointer-events: none; transition: filter .15s ease;
}

/* De naam van het geopende thema, onder de tabs. Klein en rustig: de tab zegt
   al welk thema je hebt, dit is de plek om hem te veranderen. */
.themanaam {
  display: flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: 13px; color: var(--grijs);
}
.themanaam span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.themanaam button {
  flex-shrink: 0; border: none; background: none; padding: 2px;
  color: var(--stil); cursor: pointer; line-height: 0;
}
.themanaam button:active { color: var(--blauw); }

/* De naam in het voorstel, met het potlood erachter. */
.voorstel .metpen { display: flex; align-items: center; gap: 6px; }
.voorstel .metpen span { flex: 1 1 auto; }
.voorstel .metpen .penknop { flex: 0 0 auto; border: none; background: none; padding: 2px;
  color: var(--stil); cursor: pointer; line-height: 0; }

/* Wijzers aan de randen van de themarij. Ze liggen over de rij heen in plaats
   van ernaast, zodat de rij zelf niet smaller wordt als ze verschijnen. */
.tabsrij { position: relative; }
.schuifwijzer {
  position: absolute; top: 0; bottom: 0; width: 20px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  color: var(--stil); opacity: 0; transition: opacity .15s ease; pointer-events: none;
}
.schuifwijzer.aan { opacity: 1; }
.schuifwijzer.naarlinks { left: 0; transform: scaleX(-1);
  background: linear-gradient(to left, transparent, var(--vlak) 62%); border-radius: 9px 0 0 9px; }
.schuifwijzer.naarrechts { right: 44px;
  background: linear-gradient(to right, transparent, var(--vlak) 62%); border-radius: 0 9px 9px 0; }

/* De ophaalknop onder de thema's: volle breedte, rustig, altijd op dezelfde
   plek zodat je hem niet hoeft te zoeken. */
.knop.aanbod { display: block; width: 100%; margin: 10px 0 0; padding: 9px 14px; font-size: 13.5px; }


/* Een dagknop die niet te kiezen valt: zichtbaar, maar duidelijk buiten
   bereik. Weglaten zou de vraag oproepen op welke dagen je iets krijgt. */
.dagknop.vast { opacity: .42; cursor: default; }

/* Een vraag in de huisstijl, in plaats van het venster van de browser. */
.overlaag {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(20, 24, 31, .38); padding: 16px;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
}
.vraagblad {
  width: 100%; max-width: 360px; background: var(--papier); color: var(--inkt);
  border: 1px solid var(--lijn); border-radius: 14px; padding: 16px 18px 14px;
  box-shadow: 0 10px 30px rgba(20, 24, 31, .2);
}
.vraagblad h3 { margin: 0 0 6px; font-size: 14px; letter-spacing: -.2px; }
.vraagblad p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--grijs); }
.vraagknoppen { display: flex; gap: 8px; margin-top: 14px; }
.vraagknoppen .knop { flex: 1 1 0; padding: 9px 12px; font-size: 13px; }
.knop.gevaar { background: var(--accent); border-color: var(--accent); }

/* De markeerstift over wat er sinds de vorige ronde bij is gekomen. */
.item mark {
  background: rgba(232, 200, 62, .48); color: inherit;
  padding: 0 1px; border-radius: 2px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) .item mark { background: rgba(232, 200, 62, .26); }
}
:root[data-thema="donker"] .item mark { background: rgba(232, 200, 62, .26); }


/* De loop van een zaak. Links de dag, rechts wat er die dag bij kwam, zodat je
   verticaal de lijn leest in plaats van losse berichten. */
.vraagblad.verhaal { max-width: 440px; text-align: left; }
.vraagblad.verhaal .loop { max-height: 55vh; overflow-y: auto; margin: 6px 0 4px; }
.vraagblad.verhaal .stap { display: flex; gap: 11px; padding: 11px 0; border-top: 1px solid var(--lijn); }
.vraagblad.verhaal .stap:first-child { border-top: 0; }
.vraagblad.verhaal .wanneer { flex: 0 0 52px; font-size: 12px; opacity: .55; padding-top: 2px; }
.vraagblad.verhaal .wat { flex: 1; min-width: 0; }
.vraagblad.verhaal .wat strong { display: block; font-size: 14px; margin-bottom: 3px; }
.vraagblad.verhaal .wat p { margin: 0; font-size: 13.5px; line-height: 1.5; }

/* Twee merkjes die een gebeurtenis markeren in plaats van een eigenschap:
   een signaal dat hard is geworden, en een bericht dat iets rechtzet. */
.merkje.bevestigd { background: color-mix(in srgb, var(--blauw) 12%, transparent); color: var(--blauw); }
.merkje.klopt-niet { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-weight: 600; }
.merkje.recht { background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); }

/* De verwijzing naar de rest van het verhaal. Geen knop die om aandacht
   vraagt: een regel die er staat voor wie hem nodig heeft. */
.verhaallijn {
  display: block; margin-top: 9px; padding: 0; border: 0; background: none;
  font: inherit; font-size: 12.5px; color: var(--grijs); opacity: .8;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.verhaallijn:hover { opacity: 1; }


/* De tekst van een fout: klein, met vaste letterbreedte, en afbreekbaar. Hij
   moet over te nemen zijn, niet mooi zijn. */
.foutregel { font-size: 12px; line-height: 1.5; text-align: left; word-break: break-word;
  background: var(--vlak); border-radius: 8px; padding: 10px 12px; margin: 4px 0 2px; }


/* De kostenregel in het menu is een gewone menuregel; alleen de prognose
   eronder is nieuw. Uitgelijnd met de tekst erboven, dus voorbij het icoon. */
.blad-menu .menu-onder { padding: 0 24px 11px 53px; margin-top: -9px;
  font-size: 12.5px; color: var(--stil); }

/* De verdeling per thema. */
.vraagblad.kosten { max-width: 420px; text-align: left; }
.kostenkop { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 2px 0 10px; }
.kostenkop span { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kostenkop small { color: var(--grijs); font-size: 12.5px; }
.kostenlijst { border-top: 1px solid var(--lijn); }
.kostenrij { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
  padding: 10px 0; border-bottom: 1px solid var(--lijn); }
.kostenrij .naam { font-size: 14.5px; }
.kostenrij .bedrag { font-size: 14.5px; font-variant-numeric: tabular-nums; grid-row: 1 / 3;
  align-self: center; }
.kostenrij .detail { grid-column: 1; font-size: 12px; color: var(--grijs); }
.uitlegje { font-size: 12.5px; color: var(--grijs); line-height: 1.5; margin: 12px 0 0; }



/* De kern bovenaan een briefing: iets groter en rustiger dan de items, met een
   lijn ernaast zodat je ziet dat het een oordeel is en geen bericht. */
.kern {
  margin: 14px 0 4px; padding: 2px 0 2px 14px;
  border-left: 2px solid color-mix(in srgb, var(--blauw) 35%, transparent);
  font-size: 15.5px; line-height: 1.62; color: var(--inkt);
}