/* ==========================================================================
   QualiMundi — de schil van het reizigersportaal

   Bouwt op admin.css: dezelfde kaarten, knoppen, labels en --a-*-tokens.
   Wat hier bijkomt is alleen wat een portaal een portaal maakt — een vaste
   balk, een navigatie, een actielijst en een voet. Bewust geen tweede
   ontwerptaal: een reiziger en een medewerker kijken naar hetzelfde systeem,
   en twee losse stijlen betekent twee keer onderhoud.
   ========================================================================== */

body.portaal {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /*
   * Niet --a-vlak-zacht (#EFEBE3): daarop haalt --a-ink-3 nog 4,41:1, onder
   * de 4,5 die gewone tekst nodig heeft. Het beheer mat dit al en maakte er
   * #F2EFE8 voor (4,57:1); het verschil zie je niet, de leesbaarheid wel.
   * Zie de toelichting bij --a-vlak-aanwijs in admin.css.
   */
  --a-portaal-papier: #F2EFE8;
  background: var(--a-portaal-papier);
}

/* --- De balk bovenaan ---------------------------------------------------- */

.portaal-balk {
  background: var(--a-diep);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 20;
}

.portaal-balk__binnen {
  max-width: 66rem;
  margin: 0 auto;
  padding: .7rem clamp(1rem, 3vw, 2rem);
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}

.portaal-merk {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

/* Het logo staat op een donkere balk, dus de witte versie. De hoogte staat
   vast en de breedte volgt; het bronbestand is 1200 breed en zou zonder deze
   regel de halve balk innemen. */
.portaal-merk__logo,
.portaal-merk__logo picture { display: block; line-height: 0; }

.portaal-merk__logo img {
  height: 1.9rem;
  width: auto;
  max-width: 12rem;
}

/* Terugval wanneer het logobestand er niet is: dan geeft logo() losse
   letters terug, en die moeten er nog altijd als een merknaam uitzien. */
.portaal-merk__naam,
.portaal-merk__logo.logo--tekst {
  font-family: var(--a-serif, var(--a-sans));
  font-size: 1.12rem;
  letter-spacing: .02em;
}

.portaal-merk__rol {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  opacity: .62;
}

/* --- De navigatie -------------------------------------------------------- */

.portaal-nav {
  display: flex;
  gap: .2rem;
  flex-wrap: wrap;
  margin-right: auto;
}

.portaal-nav__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .7rem;
  border-radius: var(--a-radius);
  font-size: .86rem;
  color: rgba(255, 255, 255, .74);
  transition: background .2s var(--a-ease), color .2s var(--a-ease);
}

.portaal-nav__link:hover { color: #fff; background: rgba(255, 255, 255, .09); }

.portaal-nav__link.is-actief {
  color: #fff;
  background: rgba(255, 255, 255, .14);
}

/*
 * Alles in de donkere portaalbalk krijgt een witte focusring.
 *
 * De algemene regel uit tokens.css tekent hem in --qm-blauw (#3D6E9E), en dat
 * is op --a-diep (#152231) net 3:1 — en minder zodra er een lichter vlak
 * achter zit, zoals bij het actieve navigatie-item met zijn 14% wit. Het
 * belletje deed dit al met currentColor; nu doet de rest van de balk het ook.
 */
.portaal-balk a:focus-visible,
.portaal-balk button:focus-visible,
.portaal-balk summary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.portaal-nav__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .32rem;
  border-radius: 999px;
  background: var(--a-accent);
  /*
   * Dit stond op --a-diep, en dat is op --a-accent 3,16 - voor een getal van
   * elf pixels te weinig. Wit haalt 5,10 op dezelfde achtergrond, dus de
   * accentkleur blijft wat ze is; alleen het cijfer erin wisselt van kant.
   * Dat is meteen hetzelfde paar als de telling in de zijbalk en op het
   * belletje, die allebei al wit op accent zijn.
   */
  color: #fff;
  font-size: .68rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/*
 * Dezelfde badge, maar met een woord erin in plaats van een getal.
 *
 * reiziger/onderdelen/kop.php zet deze klasse erbij wanneer er badge_tekst is
 * — bij Betalingen is dat het openstaande bedrag, en bij meer dan één valuta
 * staat er iets als "1.250,00 EUR + 800,00 USD" in. De rondje-vorm hierboven
 * is gemaakt voor één of twee cijfers: 1,25rem hoog, .32rem lucht opzij. Een
 * zin daarin wordt een lange dunne pil die tegen zijn eigen randen aan staat,
 * en die bij een grotere lettergrootte in het besturingssysteem uit zijn
 * hoogte loopt. De modifier stond er al; de regel ontbrak, dus gebeurde er
 * niets.
 *
 * Wat hier verandert: lucht opzij, een hoogte die meegroeit met de tekst, een
 * hoek in plaats van een cirkel, en geen tabelcijfers meer — die zetten letters
 * uit elkaar zonder dat er iets uit te lijnen valt.
 */
.portaal-nav__badge--tekst {
  min-width: 0;
  height: auto;
  padding: .1rem .45rem;
  border-radius: var(--a-radius, 8px);
  font-variant-numeric: normal;
  letter-spacing: .01em;
}

.portaal-ik {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: .82rem;
}

/* De uitgang naar de publieke site. Ze staat links van de naam en niet
   tussen de portaalpagina's: dit is geen deel van het portaal maar de
   deur eruit, en dat verschil hoort ook te zien te zijn. */
.portaal-ik__site {
  padding: .3rem .6rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--a-radius);
  color: rgba(255, 255, 255, .82);
  white-space: nowrap;
  transition: background .2s var(--a-ease), border-color .2s var(--a-ease), color .2s var(--a-ease);
}

.portaal-ik__site:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .09);
}

.portaal-ik__naam { opacity: .78; }
.portaal-ik__uit { text-decoration: underline; text-underline-offset: .18em; opacity: .78; }
.portaal-ik__uit:hover { opacity: 1; }

/* --- De inhoudskolom ----------------------------------------------------- */

.portaal-inhoud {
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
  padding: 2rem clamp(1rem, 3vw, 2rem) 3rem;
}

.portaal-inhoud--breed { max-width: 66rem; }

.portaal-terug { margin: 0 0 .8rem; font-size: .86rem; }
.portaal-terug a { text-decoration: underline; text-underline-offset: .18em; color: var(--a-ink-3); }

.portaal-kop { margin-bottom: 1.4rem; }
.portaal-kop__onder {
  margin: .35rem 0 0;
  color: var(--a-ink-3);
  font-size: .9rem;
  max-width: 42rem;
}

/* --- De actielijst ------------------------------------------------------- */

.portaal-acties { margin: 0 0 1.6rem; }

.portaal-actie {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: .85rem 1rem;
  background: var(--a-paper);
  border: 1px solid var(--a-rand-zacht);
  border-left: 3px solid var(--a-rand);
  border-radius: var(--a-radius);
}

.portaal-actie + .portaal-actie { margin-top: .5rem; }

.portaal-actie--hoog   { border-left-color: var(--a-fout); }
.portaal-actie--midden { border-left-color: var(--a-accent); }
/* 'laag' houdt bewust de neutrale rand van .portaal-actie zelf, zodat de
   kleur een rangorde leest: rood is dringend, accent is binnenkort, grijs
   staat gewoon open. Zonder deze regel viel dat op hetzelfde uit, maar dan
   bij toeval in plaats van met opzet. */
.portaal-actie--laag   { border-left-color: var(--a-rand); }

.portaal-actie__tekst { flex: 1; min-width: 12rem; }
.portaal-actie__titel { margin: 0; font-weight: 500; font-size: .95rem; }
.portaal-actie__uitleg { margin: .18rem 0 0; font-size: .85rem; color: var(--a-ink-3); }
.portaal-actie .knop { flex-shrink: 0; }

.portaal-rustig {
  padding: 1rem 1.1rem;
  background: var(--a-vlak);
  border: 1px solid var(--a-rand-zacht);
  border-radius: var(--a-radius);
  font-size: .9rem;
  color: var(--a-ink-3);
}

/* --- Kleine bouwstenen die op meerdere portaalpagina's terugkomen -------- */

.portaal-meta {
  margin: 0;
  font-size: .84rem;
  color: var(--a-ink-3);
  line-height: 1.8;
}

.portaal-rij {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
}

/* Gegevens van een reis die op slot zit: geen invoervelden meer, maar een
   definitielijst. Een grijs readonly-vakje ziet er nog altijd uit als iets
   waar je in kan klikken, en dat is precies wat het niet is. */
/* Een lijst gesprekken die als postvak leest: naam van de reis, de laatste
   regel eronder, en rechts wat er nieuw is. Zonder die laatste regel is het
   een rij knoppen en klik je ze alle drie open om te vinden wat je zocht. */
.portaal-postvak { list-style: none; margin: 0 0 .4rem; padding: 0; display: grid; gap: .5rem; }
.portaal-postvak__regel {
  display: grid;
  gap: .2rem;
  padding: .8rem .95rem;
  border: 1px solid var(--a-rand);
  border-radius: var(--a-radius);
  background: var(--a-vlak);
  color: inherit;
  text-decoration: none;
  position: relative;
}
.portaal-postvak__regel:hover { border-color: var(--a-accent); }
.portaal-postvak__regel.is-open { border-color: var(--a-accent); border-left-width: 3px; }
.portaal-postvak__kop { display: flex; justify-content: space-between; gap: .8rem; align-items: baseline; }
.portaal-postvak__naam { font-weight: 600; }
.portaal-postvak__datum { color: var(--a-ink-3); font-size: .8rem; white-space: nowrap; }
.portaal-postvak__regeltekst {
  color: var(--a-ink-2);
  font-size: .88rem;
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.portaal-postvak__van { color: var(--a-ink-3); }
.portaal-postvak__badge {
  justify-self: start;
  margin-top: .25rem;
  font-size: .75rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: var(--a-accent);
  color: #fff;
}
.portaal-koptekst { margin: 0 0 .7rem; font-size: 1.05rem; }

/* Het standpaneel boven een voorstel: wat er aan de hand is, in gewone taal. */
.voorstel-stand {
  border: 1px solid var(--a-rand-zacht);
  border-left: 3px solid var(--a-rand);
  border-radius: 6px;
  padding: .75rem .9rem;
  margin: 0 0 1rem;
}
.voorstel-stand--let_op  { border-left-color: var(--qm-accent-donker); }
.voorstel-stand--klaar   { border-left-color: var(--qm-goed-donker); }
.voorstel-stand--gestopt { border-left-color: var(--a-ink-3); }
.voorstel-stand__kop { margin: 0 0 .45rem; }
.voorstel-stand__zin { margin: 0; font-size: .95rem; line-height: 1.55; }
.voorstel-stand__feiten { margin-top: .7rem; }
.voorstel-stand__gevolg { margin: .7rem 0 0; }

.portaal-feiten {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: .3rem .9rem;
  margin: .6rem 0 0;
  font-size: .9rem;
}

.portaal-feiten dt { color: var(--a-ink-3); }
.portaal-feiten dd { margin: 0; }

@media (max-width: 40rem) {
  .portaal-feiten { grid-template-columns: 1fr; gap: 0 0; }
  .portaal-feiten dt { margin-top: .5rem; font-size: .82rem; }
}

/* De uitleg waarom er niets meer te wijzigen valt. */
.portaal-vast {
  background: var(--a-vlak);
  border-left: 3px solid var(--a-accent);
  border-radius: 0 var(--a-radius) var(--a-radius) 0;
  padding: .7rem .9rem;
  font-size: .9rem;
  line-height: 1.7;
  margin: .8rem 0 0;
}

.portaal-lijst { list-style: none; margin: 0; padding: 0; }
.portaal-lijst > li + li { margin-top: .55rem; padding-top: .55rem; border-top: 1px solid var(--a-rand-zacht); }

/* --- De voet ------------------------------------------------------------- */

.portaal-voet {
  margin-top: auto;
  border-top: 1px solid var(--a-rand-zacht);
  background: var(--a-paper);
}

.portaal-voet__binnen {
  max-width: 66rem;
  margin: 0 auto;
  padding: 1.1rem clamp(1rem, 3vw, 2rem);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: .82rem;
  color: var(--a-ink-3);
}

.portaal-voet__hulp { margin: 0; }
.portaal-voet__hulp a { text-decoration: underline; text-underline-offset: .18em; }

.portaal-voet__links { margin: 0; display: flex; gap: 1rem; flex-wrap: wrap; }
.portaal-voet__links a { text-decoration: underline; text-underline-offset: .18em; }

/* De titel van een melding is een knop die als link leest; zie
   includes/portaal-notificaties.php. Daar stond padding: 0 in het attribuut,
   en een stijl in een attribuut wint van elke regel in een stylesheet — ook
   van de telefoonregel hieronder die er een aanraakvlak van maakt. Vandaar
   hier, waar hij te overschrijven valt. */
body.portaal .inhoud .knop-link { padding: 0; }

/* --- Op een telefoon ----------------------------------------------------- */

@media (max-width: 700px) {
  /*
   * De balk laten meeschuiven in plaats van blijven staan.
   *
   * Op een breed scherm is de balk één regel hoog en kost sticky niets. Op
   * 375 px staat alles onder elkaar: merk, de rij rechtsboven met taal,
   * uitgang, bel, naam en uitloggen, en daaronder de navigatie op een eigen
   * regel. Gemeten op /reiziger bij 375 bij 812: 196 px, en met de
   * aanraakvlakken hieronder erbij 234 px. Dat is 29 procent van het scherm
   * dat permanent bezet blijft, ook halverwege een reisblad.
   *
   * De navigatie blijft even bereikbaar - één veeg naar boven - en de inhoud
   * krijgt haar scherm terug.
   */
  .portaal-balk { position: static; }
  .portaal-balk__binnen { gap: .7rem; }
  .portaal-merk__logo img { height: 1.6rem; }
  .portaal-nav { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .portaal-nav__link { white-space: nowrap; }
  /*
   * Zeggen dat er meer staat dan er past. Vier van de zeven items vallen hier
   * buiten beeld, waaronder Noodinformatie, en de schuifbalk zelf is op een
   * telefoon onzichtbaar. Dezelfde vier verlopen als op de tabbalk van het
   * beheer: twee die de rand afdekken en meeschuiven (background-attachment
   * local), twee die als sluier blijven staan zolang er iets buiten beeld is.
   * De balk is hier donker, dus de dekkleur is --a-diep en de sluier licht.
   */
  .portaal-nav {
    background-image:
      linear-gradient(to right, var(--a-diep), transparent),
      linear-gradient(to left,  var(--a-diep), transparent),
      linear-gradient(to right, rgba(255, 255, 255, .22), transparent),
      linear-gradient(to left,  rgba(255, 255, 255, .22), transparent);
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 2.2rem 100%, 2.2rem 100%, .9rem 100%, .9rem 100%;
    background-attachment: local, local, scroll, scroll;
  }
  /* De navigatie schuift hier horizontaal, en een overflow-container snijdt af
     in beide richtingen: een ring búiten de link valt weg bij de eerste en de
     laatste. Naar binnen blijft hij heel. */
  .portaal-nav__link:focus-visible { outline-offset: -2px; }
  /* De rij rechtsboven (taal, uitgang naar de site, belletje, naam, uitloggen)
     is samen breder dan een telefoon. Zonder afbreken duwt ze de hele pagina
     opzij en staat "Uitloggen" buiten beeld. */
  .portaal-ik { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  /* De aanraakvlakken zelf staan onderaan dit bestand bij elkaar: die gelden
     tot 900 px, want er wordt ook op een tablet getikt en niet geklikt. */
  /*
   * De twee taalknoppen uit elkaar houden.
   *
   * admin.css geeft elke taalknop onder de 700 px een onzichtbaar vlak van
   * 44 px hoog dat .6rem buiten de letters uitsteekt, en zet in dezelfde regel
   * de tussenruimte op 1.2rem zodat de vlakken elkaar niet raken. Alleen staat
   * die mediaregel (rond regel 1088) vóór de gewone .portaal-taal (rond regel
   * 1804), en bij gelijke gewichten wint de laatste: gemeten gap in de
   * portaalbalk bij 375 px is 1,6 px, niet 19,2. De twee vlakken van 48,9 px
   * overlappen dan zeventien pixels, en dat is precies waar je de verkeerde
   * taal aantikt. Hier met een selector die wél zwaarder weegt; in admin.css
   * zelf blijft het staan zoals het staat - dat bestand hangt ook boven de
   * aanmeldschermen van het beheer.
   */
  .portaal-balk .portaal-taal { gap: 1.2rem; }
  /*
   * Het aanmeldscherm mag het hele scherm gebruiken.
   *
   * includes/portaal-kop.php zet op de <main> een marge van "4rem auto".
   * body.portaal is een flexkolom, en een automatische marge opzij zet daar de
   * uitrekking uit: het blok krimpt naar zijn inhoud in plaats van mee te
   * groeien. Gemeten op /dmc/inloggen bij 375 px: de <main> is 267 breed, de
   * kaart 227 en het e-mailveld 190, met 54 px lege marge aan weerskanten.
   * Op een breed scherm valt dat niet op, want daar is 26rem toch de grens.
   */
  body.portaal > .inhoud--smal { width: 100%; }
  .portaal-actie { flex-direction: column; align-items: stretch; }
  .portaal-actie .knop { align-self: flex-start; }
}

/* --- Het meldingenbelletje ----------------------------------------------- */
/* Een <details>, zodat het paneel ook zonder JavaScript opent en het
   toetsenbord het vanzelf al kan bedienen. Zie includes/portaal-belletje.php. */

.portaal-bel { position: relative; }

.portaal-bel__knop {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  cursor: pointer;
  color: inherit;
  opacity: .78;
  list-style: none;
  transition: opacity .12s ease, background-color .12s ease;
}
.portaal-bel__knop::-webkit-details-marker { display: none; }
.portaal-bel__knop:hover,
.portaal-bel[open] .portaal-bel__knop { opacity: 1; background: rgba(255, 255, 255, .12); }
.portaal-bel__knop:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.portaal-bel__icoon { display: flex; }

.portaal-bel__telling {
  position: absolute;
  top: -.1rem;
  right: -.15rem;
  min-width: 1.05rem;
  padding: 0 .22rem;
  border-radius: .6rem;
  background: var(--a-accent);
  color: #fff;
  font-size: .66rem;
  line-height: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.portaal-bel--dringend .portaal-bel__telling { background: var(--a-fout); }

.portaal-bel__paneel {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 40;
  width: min(22rem, calc(100vw - 2rem));
  max-height: min(26rem, 70vh);
  overflow-y: auto;
  padding: .5rem;
  border: 1px solid var(--a-rand);
  border-radius: .55rem;
  background: var(--a-vlak);
  color: var(--a-ink);
  box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .22);
  text-align: left;
}

.portaal-bel__kop {
  padding: .25rem .45rem .5rem;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--a-ink-3);
}

/*
 * De tweede kop in hetzelfde paneel: "wat er nieuw is", onder "wat op jou
 * wacht".
 *
 * includes/portaal-belletje.php zet deze klasse er al bij en legt in een
 * commentaar uit waarom de twee blokken uit elkaar moeten blijven — anders
 * leest "er staat een document voor je klaar" als iets dat nog gedaan moet
 * worden, tussen de openstaande betalingen. Alleen bestond de regel niet, en
 * kreeg die tweede kop dus exact dezelfde opmaak als de eerste: een grijs
 * regeltje pal onder een lijst, zonder één streep of witruimte ertussen. Het
 * onderscheid stond in de code en niet op het scherm.
 *
 * Een lijn en wat lucht erboven zijn genoeg; een kleur erbij zou van een
 * scheiding een waarschuwing maken.
 */
.portaal-bel__kop--nieuws {
  margin-top: .55rem;
  padding-top: .55rem;
  border-top: 1px solid var(--a-rand);
}

.portaal-bel__leeg { margin: 0; padding: .2rem .45rem .5rem; font-size: .85rem; color: var(--a-ink-3); }

.portaal-bel__lijst { margin: 0; padding: 0; list-style: none; }

.portaal-bel__item {
  padding: .55rem .55rem .6rem;
  border-left: 3px solid var(--a-rand);
  border-radius: .3rem;
}
.portaal-bel__item + .portaal-bel__item { margin-top: .25rem; }
.portaal-bel__item:hover { background: var(--a-vlak-aanwijs, var(--a-vlak-zacht)); }
.portaal-bel__item--hoog   { border-left-color: var(--a-fout); }
.portaal-bel__item--midden { border-left-color: var(--a-accent); }

.portaal-bel__titel  { margin: 0; font-size: .88rem; font-weight: 500; }
.portaal-bel__uitleg { margin: .15rem 0 0; font-size: .8rem; color: var(--a-ink-3); }
.portaal-bel__link   { display: inline-block; margin-top: .3rem; font-size: .8rem; }

@media (max-width: 640px) {
  .portaal-bel__paneel { right: -.5rem; }
}

/* --- Het reiskantoor: tegels, sprongen, filter en paginering ---------
   Het reisbureauportaal was één kolom met een tabel erin. Een kantoor met
   tweehonderd reizen heeft cijfers nodig om te weten waar het moet kijken,
   en een lijst die te doorzoeken en te doorbladeren is. Deze klassen zijn
   niet kantoorspecifiek: het DMC-portaal gebruikt straks dezelfde. */

.portaal-tegels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .7rem;
  margin: 0 0 1.4rem;
}

.portaal-tegel {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .9rem 1rem;
  border: 1px solid var(--a-rand);
  border-radius: var(--a-radius, 8px);
  background: var(--a-vlak);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}

.portaal-tegel:hover { border-color: var(--a-accent); transform: translateY(-1px); }
.portaal-tegel:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; }

.portaal-tegel__getal {
  font-size: 1.7rem;
  line-height: 1.1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.portaal-tegel__label { font-size: .82rem; color: var(--a-ink-3); }

/* Een tegel die om actie vraagt krijgt kleur, maar alleen wanneer het getal
   niet nul is — anders schreeuwt een lege tegel om aandacht die er niet is. */
.portaal-tegel--let-op { border-color: var(--a-accent); }
.portaal-tegel--let-op .portaal-tegel__getal { color: var(--qm-accent-donker, var(--a-accent)); }

/* De sprongnavigatie bovenaan een dossier. Zonder deze regel is een dossier
   met prijs, betalingen, voorstel, incidenten en gesprek vier schermen ver
   scrollen voor je bij het gesprek bent. */
.portaal-sprong {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1.2rem;
}

.portaal-sprong a {
  padding: .3rem .7rem;
  border: 1px solid var(--a-rand);
  border-radius: 999px;
  font-size: .82rem;
  color: var(--a-ink-3);
  text-decoration: none;
}

.portaal-sprong a:hover { border-color: var(--a-accent); color: var(--a-ink); }

.portaal-filter { margin-bottom: 1rem; }
.portaal-filter .veld--rij { margin-bottom: .4rem; }

.portaal-paginering {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  margin: 1rem 0 0;
  font-size: .85rem;
}

.portaal-paginering a,
.portaal-paginering span {
  padding: .3rem .6rem;
  border: 1px solid var(--a-rand);
  border-radius: var(--a-radius, 8px);
  text-decoration: none;
  color: var(--a-ink-3);
}

.portaal-paginering a:hover { border-color: var(--a-accent); color: var(--a-ink); }
.portaal-paginering .is-actief { background: var(--a-accent); border-color: var(--a-accent); color: #fff; }

/* Het aantal ongelezen berichten in een lijst. admin.css kent .telling alleen
   binnen de zijbalk en de tabbalk, dus in een portaaltabel viel het terug op
   kale tekst tussen haakjes-loze cijfers. */
.portaal-inhoud .telling {
  display: inline-block;
  min-width: 1.25rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: var(--a-accent);
  color: #fff;
  font-size: .72rem;
  line-height: 1.25rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* --- De taalkiezer in de donkere balk -------------------------------------
   Dezelfde bouw als in admin.css, alleen omgekeerd van kleur: de balk is
   donker, dus de huidige taal moet er licht op staan in plaats van donker. */

.portaal-balk .portaal-taal__nu {
  color: #fff;
  background: rgba(255, 255, 255, .16);
}

.portaal-balk .portaal-taal__knop {
  color: rgba(255, 255, 255, .68);
}

.portaal-balk .portaal-taal__knop:hover,
.portaal-balk .portaal-taal__knop:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .12);
}

/* Een afgehandeld gesprek dat ter plekke openklapt. Geen tweede scherm en geen
   JavaScript: <details> doet dit zelf, en de inhoud eronder is dezelfde
   .portaal-chat als bij een lopend gesprek, zodat een gesprek er overal
   hetzelfde uitziet. */
.portaal-vouw {
  border-top: 1px solid var(--a-rand);
  padding: .7rem 0;
}
.portaal-vouw:first-of-type { border-top: 0; }
.portaal-vouw > summary {
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .6rem;
  align-items: baseline;
  /* Een summary op display:flex verliest in Chrome zijn driehoekje, en dan
     staat er een regel die nergens naar uitziet als iets dat opengaat.
     Vandaar een eigen pijltje, dat meedraait bij het openen. */
  list-style: none;
}
.portaal-vouw > summary::-webkit-details-marker { display: none; }
.portaal-vouw > summary::before {
  content: '';
  flex: 0 0 auto;
  width: .42rem;
  height: .42rem;
  margin-right: .1rem;
  border-right: 2px solid var(--a-ink-3);
  border-bottom: 2px solid var(--a-ink-3);
  transform: rotate(-45deg);
  transition: transform .15s ease;
}
.portaal-vouw[open] > summary::before { transform: rotate(45deg); }
.portaal-vouw > summary:focus-visible {
  outline: 2px solid var(--a-accent);
  outline-offset: 3px;
}
.portaal-vouw[open] > summary { margin-bottom: .7rem; }

/* --- Invoervelden die admin.css laat liggen ------------------------------
   Gemeten op /reiziger/gegevens bij 375 px: naast elkaar staan "Land van
   afgifte" (type=text, 42,8 px hoog, met de rand uit --a-rand-veld) en
   "Afgegeven op" (type=date, 29,2 px hoog, met de rand van de browser). De
   lijst selectors bij .veld in admin.css noemt text, email, tel, password,
   number en url — date, datetime-local, time, month, search en file staan er
   niet bij, dus vallen die terug op de standaardopmaak van de browser. Op dat
   scherm staan zevenendertig datumvelden.

   Alleen binnen body.portaal: dezelfde regel in admin.css zou de datumvelden
   van het hele beheer in één keer van vorm doen veranderen, en dat is een
   beslissing van de eigenaar en niet van dit bestand. */
body.portaal .veld input[type=date],
body.portaal .veld input[type=datetime-local],
body.portaal .veld input[type=time],
body.portaal .veld input[type=month],
body.portaal .veld input[type=search],
body.portaal .veld input[type=file] {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--a-rand-veld);
  border-radius: var(--a-radius);
  background: var(--a-vlak);
  font-size: .92rem;
  transition: border-color .2s var(--a-ease), box-shadow .2s var(--a-ease);
}

/*
 * De invulrij van een tabel, in de portalen.
 *
 * .tabel__invulrij > td staat in admin.css op --a-vlak-zacht (#EFEBE3). Daarop
 * haalt --a-ink-3 (#736B60) 4,41:1, en op /dmc/voorwaarden en /dmc/offerte
 * staan juist dáár de uitleg bij het veld (.a-hint--82, 13,1 px) en — op een
 * smal scherm — de kolomnaam boven de waarde (.tabel__kop, 10,9 px). Allebei
 * gewone tekst, allebei 4,5 nodig.
 *
 * Dezelfde ingreep als bij --a-portaal-papier bovenaan dit bestand: één tint
 * lichter, #F2EFE8, en het paar haalt 4,57. Het verschil met het vlak eromheen
 * blijft even goed te zien, want dat is wit.
 */
body.portaal .tabel__invulrij > td { background: var(--a-vlak-aanwijs, #F2EFE8); }

/*
 * 900 en niet 700, zoals de rest van dit bestand.
 *
 * De regels hieronder verschuiven niets: ze maken alleen een aanraakvlak
 * groter. Onder de 700 pixels breekt de opmaak om naar een telefoon; een
 * tablet in staande stand blijft daarboven (768 of 810 breed) en houdt dus de
 * kolommen die hij heeft — maar er wordt op getikt en niet op geklikt, en een
 * lokale agent leest zijn briefing juist daar. 900 vangt beide.
 */
@media (max-width: 900px) {
  /*
   * Aanraakdoelen: een vinger is dikker dan een muisaanwijzer.
   *
   * Het belletje, de paginering en de sprongbalk volgden deze regel al. De
   * rest van de balk en de voet niet, en dat zijn juist de dingen die een
   * reiziger onderweg met één duim aantikt. Gemeten op /reiziger bij 375 px:
   * de navigatie 35,4 px hoog, de uitgang naar de site 32,2, "Uitloggen" 21,
   * een link in het belletje 20,5 en de links in de voet 21. Het logo staat
   * erbij omdat het de weg terug naar het overzicht is; de taalkiezer niet,
   * want die heeft in admin.css al een eigen vlak van 44.
   *
   * min-height en geen padding: de tekst blijft staan waar hij staat, alleen
   * het vlak eromheen groeit. Voor een link in een lopende zin geldt dit
   * bewust niet - die staat middenin een alinea en zou het lezen breken.
   */
  .portaal-bel__knop,
  .portaal-paginering a,
  .portaal-sprong a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .portaal-merk,
  .portaal-nav__link,
  .portaal-ik__site,
  .portaal-ik__uit,
  .portaal-bel__link,
  .portaal-terug a,
  .portaal-voet__hulp a,
  .portaal-voet__links a,
  body.portaal .inhoud .knop,
  body.portaal .inhoud .knop-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Het logo is een kolom (naam boven rol), dus die richting blijft. */
  .portaal-merk { flex-direction: column; justify-content: center; }
  /*
   * De twee taalknoppen uit elkaar houden, ook op een tablet.
   *
   * admin.css geeft elke taalknop een onzichtbaar vlak van 44 px dat .6rem
   * buiten de letters uitsteekt, en zet de tussenruimte op 1.2rem zodat de
   * vlakken elkaar niet raken. Die regel weegt één klasse. De basisregel van
   * .portaal-taal weegt evenveel en staat verderop in dat bestand, dus in de
   * portaalbalk wint .1rem alsnog: gemeten gap 1,6 px in plaats van 19,2, en
   * dan overlappen de twee vlakken zeventien pixels en tik je de verkeerde
   * taal aan.
   *
   * Vandaar deze regel, met een selector die wél zwaarder weegt. Ze stond al
   * in het 700-blok hierboven; hier staat ze nog eens, omdat het vlak zelf nu
   * tot 900 px loopt en de tussenruimte precies zo ver mee moet.
   */
  .portaal-balk .portaal-taal { gap: 1.2rem; }
  /* Een kort woord is een smal doel. "Privacy" in de voet meet 40,5 breed en
     "Voir" in het belletje 22,2; de tekst blijft links staan, alleen het vlak
     erachter loopt door tot 44. */
  .portaal-bel__link,
  .portaal-voet__links a { min-width: 44px; }
  /*
   * De titel van een melding is een knop die als link leest. Ze staat in
   * includes/portaal-notificaties.php met haar opmaak in het attribuut, en
   * padding: 0 hoort daar niet meer bij - anders wint het attribuut het van
   * deze regel en blijft het aanraakvlak 20,1 px hoog.
   */
  body.portaal .inhoud .knop-link { padding: .5rem 0; }

  /*
   * Elk veld en elke keuzelijst in de inhoudskolom.
   *
   * Een veld binnen .veld haalde 42,8 en een keuzelijst 40,8 - net te weinig.
   * Daarbuiten is het erger: de zoekbalk van /reiskantoor/dossiers meet 29,2,
   * en de keuzelijst "wie volgt dit dossier op" op /reiskantoor/dossier 22,4.
   * Die staan niet in een .veld en krijgen dus geen enkele maat mee.
   *
   * Vinkjes en keuzerondjes staan er bewust niet bij: die tekent de browser op
   * een vaste maat, en hun label eromheen is het echte doel. Gemeten op
   * /reiskantoor/aanmelden: dat label is 306 bij 69.
   */
  body.portaal .inhoud input:not([type=checkbox]):not([type=radio]),
  body.portaal .inhoud select { min-height: 44px; }

  /*
   * Een link die alleen op zijn regel staat is een knop zonder rand.
   *
   * Een telefoonnummer en een e-mailadres in het contactblok van een reisblad
   * meten 20 px hoog, en een documentnaam in een lijst evenveel. Dat is wat je
   * onderweg aantikt: bellen, mailen, een ticket openen. Een link midden in
   * een lopende zin blijft eruit - die staat tussen woorden en zou de regel
   * uit elkaar trekken. Vandaar :only-child: alleen wat in zijn eentje op een
   * regel staat telt hier mee.
   */
  /*
   * De documentlijst valt buiten :only-child, en dat is juist de lijst waar
   * het om gaat.
   *
   * In .portaal-lijst staat achter de bestandsnaam nog een datum, en op
   * /reiskantoor/dossier ook een label ("Van ons" of "Van jullie"). De link is
   * daardoor niet het enige kind van zijn <li> en kreeg van de regel hieronder
   * niets mee. Gemeten bij 375 px, geproefd met elementFromPoint:
   * /dmc/dossier?dossier=269&toewijzing=28 een aanraakvlak van 22 px hoog,
   * /reiskantoor/dossier?dossier=274 20 en 22. Een ticket of een verzekering
   * openen is precies wat er onderweg op een telefoon gebeurt.
   *
   * :first-child en niet elke link: wat er achter de naam staat is tekst, geen
   * bediening.
   */
  body.portaal .inhoud .portaal-lijst > li > a:first-child,
  body.portaal .inhoud a[href^="tel:"],
  body.portaal .inhoud a[href^="mailto:"],
  body.portaal .inhoud li > a:only-child,
  body.portaal .inhoud p > a:only-child,
  body.portaal .inhoud span > a:only-child,
  body.portaal .inhoud h2 > a:only-child,
  body.portaal .inhoud h3 > a:only-child,
  body.portaal .inhoud .tabel--kaarten td > a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /*
   * De invulrij van een tabel. In de kaartweergave is elke cel een eigen
   * regel, en dan is een veld van 28 px hoog te klein om te raken - de
   * standaardmaat van de browser, want deze velden staan buiten .veld.
   * Gemeten op /dmc/voorwaarden bij 375 px: 28 bij 96.
   */
  body.portaal .tabel__invulrij input,
  body.portaal .tabel__invulrij select {
    min-height: 44px;
    padding: .4rem .55rem;
    border: 1px solid var(--a-rand-veld);
    border-radius: var(--a-radius);
    background: var(--a-vlak);
    font-size: .92rem;
  }
  /* Het dagenveld heeft een eigen breedte in het scherm (4,5rem, rechts
     uitgelijnd). Die blijft; alleen de hoogte verandert. */

  /* Een <summary> die als uitklapper dienstdoet is een knop. Gemeten op
     /reiziger/gegevens: 24 px hoog, zeventien keer op één scherm. Padding en
     geen flex: display:flex haalt in Chrome het driehoekje weg, en dan ziet
     niemand meer dat er iets opengaat. */
  body.portaal .inhoud details > summary { padding: .6rem 0; min-height: 44px; }
}

/* --- Op papier ----------------------------------------------------------- */

/* Alleen op papier: het dossiernummer en de naam bovenaan het blad. Zie
   reiziger/reis.php. Op het scherm staat het er niet, want daar voegt het
   niets toe aan een pagina waarop je al in je eigen dossier zit. */
.portaal-afdrukkop { display: none; }

@media print {
  .portaal-afdrukkop {
    display: block;
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid #999;
    font-size: 9.5pt;
  }

  /* Elk gegeven op zijn eigen plek, met een scheiding ertussen die ook in
     zwart-wit leesbaar blijft. */
  .portaal-afdrukkop span + span::before, .portaal-afdrukkop strong + span::before { content: '  ·  '; }


  /* De statuslabels dragen hun betekenis in kleur én in tekst. De kleur mag
     mee, anders drukt de browser ze wit af. */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  body.portaal {
    background: #fff;
    font-size: 10.5pt;
    line-height: 1.5;
  }

  /* Bediening hoort niet op papier: je kunt er niet op klikken. Inhoud blijft
     staan, ook de actielijst en de tegels. */
  .portaal-balk,
  .portaal-nav,
  .portaal-ik,
  .portaal-bel,
  .portaal-voet,
  .portaal-sprong,
  .portaal-filter,
  .portaal-paginering,
  .portaal-terug,
  .knop,
  button,
  input,
  select,
  textarea { display: none !important; }

  .portaal-inhoud { max-width: none; margin: 0; padding: 0; }

  /* Een kaart, een verblijf of een reisdag hoort bijeen te blijven. Een kop
     onderaan het blad met zijn gegevens op het volgende leest als twee losse
     dingen. */
  .kaart,
  .portaal-rij,
  .portaal-tegel { break-inside: avoid; page-break-inside: avoid; }

  .kaart { box-shadow: none; border: 1px solid #ccc; }

  /* Wat dichtgevouwen staat op het scherm hoort open op papier: je kunt een
     samenvouwing niet uitklappen op een blad. */
  details > *:not(summary) { display: block; }

  /* In zwart-wit zien twee labels met alleen een andere achtergrond er
     hetzelfde uit. Een rand houdt het onderscheid overeind. */
  .label { border: 1px solid #999; }

  a { text-decoration: none; color: inherit; }
}