/* De telefoonapp op scan.dzhtransport.nl (28 september 2026, spec 2026-09-28-telefoonapp-design.md §7).

   Leroy: "net zo overzichtelijk als de admin omgeving op de website. (Alleen dan aangepast aan mobiel formaat,
   dus NIET ellenlange pagina's of brede pagina's)". Dit bestand ligt bovenop paneel.css en gebruikt alleen diens
   tokens (--pnl-*); eigen tokens staan hieronder in .tel en zijn rgb(a), nooit een los hexgetal.

   Vaste maten, en waarom:
   - letters in invoervelden 16px: kleiner en iOS zoomt in bij het aantikken;
   - elk tikvlak minstens 44px hoog (Apple's minimum voor een duim);
   - min-width: 0 op kinderen van rasters en flexrijen: anders duwt één lange naam de pagina breder dan het
     scherm (de les van 7 augustus), en overflow-wrap: anywhere laat een lang e-mailadres afbreken;
   - de onderbalk en de onderbladen tellen de veilige zone van de iPhone mee (env(safe-area-inset-bottom)). */

.tel {
  /* 9 oktober 2026 (Leroy): letters en menu 15 % groter. */
  --tel-schaal: 1.15;
  --tel-waas: rgba(27, 22, 38, 0.45);
  --tel-schaduw: 0 12px 32px rgba(27, 22, 38, 0.25);
  --tel-balk: 62px;
  /* De kantlijn van kop en lijf; een rij die van rand tot rand schuift (.tel-filters) rekent ermee. */
  --tel-rand: 16px;
  background: var(--pnl-grond);
  color: var(--pnl-inkt);
  -webkit-text-size-adjust: 100%;
  overflow-wrap: anywhere;
}

body.tel {
  margin: 0;
}

/* Een klasse met display: verslaat de browserregel [hidden] {display:none}; zonder deze regel staat een verborgen
   blok gewoon in beeld (gemeten op de handheld, 9 september 2026). */
.tel [hidden] {
  display: none !important;
}

.tel-verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- de kop en het lijf ------------------------------------------------------------------------------ */

.tel-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 6px;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
}

.tel-kop > * {
  min-width: 0;
}

.tel-kop__terug {
  flex-basis: 100%;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  color: var(--pnl-accent);
  font-size: calc(16px * var(--tel-schaal, 1));
  font-weight: 700;
  text-decoration: none;
}

.tel-kop__titel {
  flex: 1 1 auto;
  margin: 0;
  font-size: calc(28px * var(--tel-schaal, 1));
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.tel-kop__onder {
  flex-basis: 100%;
  margin: 0;
  font-size: calc(15px * var(--tel-schaal, 1));
  color: var(--pnl-inkt-3);
}

/* 12 oktober 2026: de knoppen rechts in de kop (Annuleren naast ⋯ op een zending); past de titel er niet naast, dan
   staan ze samen op de volgende regel, rechts. */
.tel-kop__rechts {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.tel-lijf {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: 8px var(--tel-rand) calc(var(--tel-balk) + env(safe-area-inset-bottom, 0px) + 28px);
}

.tel-lijf > * {
  min-width: 0;
}

.tel-sectie {
  margin: 6px 0 0;
  font-size: calc(17px * var(--tel-schaal, 1));
  font-weight: 800;
}

.tel-uitleg {
  margin: 0;
  font-size: calc(14px * var(--tel-schaal, 1));
  line-height: 1.5;
  color: var(--pnl-inkt-3);
}

/* Een bureauscherm dat (nog) geen telefoonversie heeft, opent in deze schil. Een brede tabel mag dan binnen
   zijn eigen vak scrollen; de pagina zelf nooit. */
.tel-app table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* --- de onderbalk ------------------------------------------------------------------------------------ */

.tel-balk {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--pnl-vlak);
  border-top: 1px solid var(--pnl-lijn);
}

.tel-balk > * {
  min-width: 0;
}

.tel-balk__knop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 50px;
  color: var(--pnl-inkt-3);
  font-size: calc(12px * var(--tel-schaal, 1));
  font-weight: 700;
  text-decoration: none;
}

.tel-balk__knop[aria-current="page"] {
  color: var(--pnl-accent);
  font-weight: 800;
}

.tel-balk__plus {
  width: 54px;
  height: 44px;
  border-radius: 14px;
  background: var(--pnl-accent);
  color: var(--pnl-vlak);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tel-balk__teller {
  position: absolute;
  top: 1px;
  left: 50%;
  margin-left: 5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--pnl-fout);
  color: var(--pnl-vlak);
  font-size: calc(11px * var(--tel-schaal, 1));
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tel-icoon {
  flex: 0 0 auto;
}

/* --- kaarten, regels en de volgende stap --------------------------------------------------------------- */

.tel-kaart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--pnl-vlak);
  border: 1px solid var(--pnl-lijn);
  border-radius: 14px;
}

.tel-kaart > * {
  min-width: 0;
}

/* Een alinea in een kaart of een vak: de tussenruimte komt van de `gap`, niet ook nog van de browsermarge. Ook achter
   *Meer ▾* (24 oktober 2026: de regel Magazijn van een verzoek op het app-pakket staat daar nu). */
.tel-kaart > p,
.tel-vak__inhoud > p,
.tel-anders__lijf > p {
  margin: 0;
}

.tel-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tel-regel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 14px;
  background: var(--pnl-vlak);
  border: 1px solid var(--pnl-lijn);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
}

.tel-regel > * {
  min-width: 0;
}

.tel-regel__tekst {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tel-regel__titel {
  font-size: calc(16px * var(--tel-schaal, 1));
  font-weight: 700;
  line-height: 1.3;
}

.tel-regel__sub {
  font-size: calc(14px * var(--tel-schaal, 1));
  color: var(--pnl-inkt-3);
}

.tel-regel__code {
  font-size: calc(13px * var(--tel-schaal, 1));
  font-weight: 600;
  color: var(--pnl-inkt-3);
  /* 13 oktober 2026 (ontwerp app-alles §5.4b, W5; meting taak 4a): een klantcode breekt nooit op zijn streepje. */
  white-space: nowrap;
}

.tel-regel__rechts {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 12 oktober 2026: een regel met twee knoppen (de hoofdknop en een stille *Annuleren*): de tekst bovenaan, de knoppen
   eronder als gelijke vakken (`.tel-acties`, twee kolommen) over de volle breedte. */
.tel-regel--twee {
  flex-wrap: wrap;
}

.tel-regel__knoppen {
  flex: 1 1 100%;
}

/* 23 oktober 2026: *Later:* 2 dagen · 4 dagen onder een melding (beheer/dempen.py). */
.tel-demp {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
}

.tel-demp__woord {
  color: var(--pnl-inkt-3);
}

.tel-demp button {
  font: inherit;
  font-size: 13px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--pnl-lijn);
  border-radius: 8px;
  background: transparent;
  color: inherit;
}

/* 13 oktober 2026 (review taak 4d, regel R9): een regel met rechts iets dat niet krimpt — de omzet in het
   klantenbestand, *Antwoorden* op Berichten, *Aanmelden* op Inkomend › Klanten. Zonder vouw kneep dat de naam tot ±115 px
   en brak hij midden in een woord ("Bartholomeu|s" op 360 px); `overflow-wrap: normal` op de titel helpt dan niet, want
   de kolom is smaller dan het woord. Nu vouwt de regel: zou de tekst smaller worden dan 10rem, dan schuift het bedrag of
   de knop eronder, rechts uitgelijnd. Is er ruimte genoeg, dan blijft alles op één regel. */
.tel-regel--plooi {
  flex-wrap: wrap;
}

.tel-regel--plooi > .tel-regel__tekst {
  flex-basis: 10rem;
}

.tel-regel--plooi > .tel-regel__rechts {
  margin-inline-start: auto;
}

/* Elk bedrag minstens even breed: dan vouwen op één scherm alle regels van een lijst, of geen enkele — anders sprong
   een groot bedrag naar beneden en bleef een klein bedrag ernaast staan (oneffen vakken). */
.tel-regel--plooi > .tel-geldregel__bedrag {
  min-width: 6.5rem;
  margin-inline-start: auto;
  text-align: right;
}

.tel-soort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: calc(13px * var(--tel-schaal, 1));
  font-weight: 700;
}

.tel-soort::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
}

.tel-soort--fout {
  color: var(--pnl-fout-inkt);
}

.tel-soort--wacht {
  color: var(--pnl-wacht-inkt);
}

.tel-soort--info {
  color: var(--pnl-accent-fel);
}

.tel-soort--ok {
  color: var(--pnl-ok-inkt);
}

.tel-soort--stil {
  color: var(--pnl-stil-inkt);
}

.tel-stap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--pnl-vlak);
  border: 2px solid var(--pnl-accent-rand);
  border-radius: 16px;
}

.tel-stap > * {
  min-width: 0;
}

.tel-stap__label {
  font-size: calc(13px * var(--tel-schaal, 1));
  font-weight: 800;
  color: var(--pnl-accent-fel);
}

.tel-stap__titel {
  margin: 0;
  font-size: calc(21px * var(--tel-schaal, 1));
  font-weight: 800;
}

.tel-melding {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--pnl-wacht-vlak);
  color: var(--pnl-wacht-inkt);
  font-size: calc(15px * var(--tel-schaal, 1));
  line-height: 1.5;
}

.tel-melding--ok {
  background: var(--pnl-ok-vlak);
  color: var(--pnl-ok-inkt);
}

.tel-melding--fout {
  background: var(--pnl-fout-vlak);
  color: var(--pnl-fout-inkt);
}

.tel-avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--pnl-accent-zacht);
  color: var(--pnl-accent-fel);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(15px * var(--tel-schaal, 1));
  font-weight: 800;
}

/* --- tellers en zoeken ------------------------------------------------------------------------------- */

/* 13 oktober 2026 (spec app-alles taak 4e): vier tegels sinds *Wacht op klant* erbij kwam, dus twee gelijke kolommen. */
.tel-tellers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tel-tellers > * {
  min-width: 0;
}

.tel-teller {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--pnl-vlak);
  border: 1px solid var(--pnl-lijn);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
}

.tel-teller__getal {
  font-size: calc(19px * var(--tel-schaal, 1));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tel-teller__naam {
  font-size: calc(13px * var(--tel-schaal, 1));
  font-weight: 600;
  color: var(--pnl-inkt-3);
}

.tel-zoek {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
  background: var(--pnl-vlak);
  border: 1px solid var(--pnl-lijn-veld);
  border-radius: 12px;
  color: var(--pnl-inkt-3);
  font-size: calc(16px * var(--tel-schaal, 1));
  text-decoration: none;
}

.tel-zoek > * {
  min-width: 0;
}

.tel-zoek input {
  flex: 1 1 auto;
  /* Het hele vak is aantikbaar, niet alleen de middelste strook van 28 px (opmaak-audit 12 oktober 2026, A1). */
  align-self: stretch;
  min-height: 46px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--pnl-inkt);
  font: inherit;
  font-size: calc(16px * var(--tel-schaal, 1));
}

/* Filterchips: één rij die horizontaal schuift, van rand tot rand, in plaats van rafelige rijen van 2 + 2 + 1
   (opmaak-audit 12 oktober 2026, L1-L3; Geld kreeg vandaag vijf tabbladen). */
.tel-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--tel-rand));
  padding-inline: var(--tel-rand);
  scroll-padding-inline: var(--tel-rand);
}

.tel-filter {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--pnl-lijn-veld);
  border-radius: 999px;
  background: var(--pnl-vlak);
  color: var(--pnl-inkt-2);
  font-size: calc(14px * var(--tel-schaal, 1));
  font-weight: 700;
  text-decoration: none;
}

.tel-filter[aria-current="page"] {
  border-color: var(--pnl-accent);
  background: var(--pnl-accent);
  color: var(--pnl-vlak);
}

/* --- schuifjes (18 oktober 2026) ---------------------------------------------------------------------- */
/* Leroy: pilvormig, groen schuifje naar rechts = aan, grijs naar links = uit. Een <button role="switch"> in een
   piepklein formulier (`_tel.html`, macro schuif): één tik post het omgekeerde. 46×28 is groter dan Apple's schuifje
   maar nog klein genoeg naast een regel; het tikvlak is de hele rij-hoogte. */
.tel-schuifvorm {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.tel-schuif {
  position: relative;
  width: 46px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--pnl-inkt-5);
  cursor: pointer;
  transition: background 0.15s;
}

.tel-schuif::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--pnl-vlak);
  box-shadow: 0 1px 3px rgba(27, 22, 38, 0.35);
  transition: left 0.15s;
}

.tel-schuif[aria-checked="true"] {
  background: var(--pnl-ok);
}

.tel-schuif[aria-checked="true"]::after {
  left: 21px;
}

.tel-schuif:focus-visible {
  outline: 3px solid var(--pnl-accent-rand);
  outline-offset: 2px;
}

/* Een instellingenrij: de tekst links, het schuifje of de waarde rechts; de rijen in één kaart zonder eigen rand. */
.tel-regel--instel {
  border: 0;
  border-top: 1px solid var(--pnl-lijn-zacht);
  border-radius: 0;
  padding-inline: 0;
}

.tel-regel--instel:first-of-type {
  border-top: 0;
}

.tel-zoek {
  display: flex;
  gap: 8px;
}

.tel-zoek input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  font: inherit;
  font-size: calc(16px * var(--tel-schaal, 1));
  border: 1px solid var(--pnl-lijn-veld);
  border-radius: 12px;
  background: var(--pnl-vlak);
}

.tel-groepkop {
  margin: 6px 0 0;
  font-size: calc(12px * var(--tel-schaal, 1));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pnl-inkt-3);
}

/* Een getal of bedrag naast zijn label, de eenheid erachter; op een smal scherm vouwt het veld eronder. */
.tel-veld--rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.tel-veld--rij > .tel-regel__tekst {
  flex: 1 1 11rem;
}

.tel-veld__eenheid,
.tel-veld__paar {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--pnl-inkt-3);
  font-size: calc(14px * var(--tel-schaal, 1));
}

.tel-veld__eenheid input,
.tel-veld__paar input {
  width: 6.5rem;
  min-height: 44px;
  padding: 0 10px;
  font: inherit;
  font-size: calc(16px * var(--tel-schaal, 1));
  border: 1px solid var(--pnl-lijn-veld);
  border-radius: 10px;
  text-align: right;
}

.tel-veld__paar input {
  width: 5rem;
}

/* --- knoppen en chips -------------------------------------------------------------------------------- */

.tel-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  font: inherit;
  font-size: calc(15px * var(--tel-schaal, 1));
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.tel-knop:focus-visible,
.tel-balk__knop:focus-visible,
.tel-regel:focus-visible {
  outline: 3px solid var(--pnl-accent-rand);
  outline-offset: 2px;
}

.tel-knop--hoofd {
  background: var(--pnl-accent);
  color: var(--pnl-vlak);
}

.tel-knop--zacht {
  background: var(--pnl-accent-zacht);
  color: var(--pnl-accent-fel);
}

.tel-knop--stil {
  background: var(--pnl-vlak);
  border-color: var(--pnl-lijn-veld);
  color: var(--pnl-inkt-2);
}

.tel-knop--gevaar {
  background: var(--pnl-fout);
  color: var(--pnl-vlak);
}

.tel-knop--ok {
  background: var(--pnl-ok-vlak);
  color: var(--pnl-ok-inkt);
}

.tel-knop--breed {
  width: 100%;
  min-height: 50px;
  font-size: calc(16px * var(--tel-schaal, 1));
}

.tel-knop[disabled] {
  background: var(--pnl-vlak-zacht);
  border-color: var(--pnl-lijn-zacht);
  color: var(--pnl-inkt-5);
  cursor: default;
}

.tel-knopvorm {
  margin: 0;
  display: flex;
}

.tel-knopvorm > .tel-knop {
  flex: 1 1 auto;
}

.tel-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tel-knoppen > * {
  flex: 1 1 0;
  min-width: 0;
}

/* 12 oktober 2026 (ontwerp app-alles §5.4b punt 4): in een rij van gelijke vakken minder binnenruimte, zodat een label
   als "Herinneren" of "Offerte maken" op 360 px op één regel past. */
.tel-knoppen .tel-knop,
.tel-acties .tel-knop {
  padding-inline: 10px;
}

.tel-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--pnl-stil-vlak);
  color: var(--pnl-stil-inkt);
  font-size: calc(12px * var(--tel-schaal, 1));
  font-weight: 800;
  white-space: nowrap;
}

.tel-chip--ok {
  background: var(--pnl-ok-vlak);
  color: var(--pnl-ok-inkt);
}

.tel-chip--wacht {
  background: var(--pnl-wacht-vlak);
  color: var(--pnl-wacht-inkt);
}

.tel-chip--info {
  background: var(--pnl-info-vlak);
  color: var(--pnl-info-inkt);
}

.tel-chip--fout {
  background: var(--pnl-fout-vlak);
  color: var(--pnl-fout-inkt);
}

.tel-chip--stil {
  background: var(--pnl-stil-vlak);
  color: var(--pnl-stil-inkt);
}

/* --- ingeklapte vakken (<details>) ------------------------------------------------------------------- */

.tel-vak {
  padding: 0 14px;
  background: var(--pnl-vlak);
  border: 1px solid var(--pnl-lijn);
  border-radius: 14px;
}

.tel-vak > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  font-size: calc(16px * var(--tel-schaal, 1));
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.tel-vak > summary::-webkit-details-marker {
  display: none;
}

.tel-vak__aantal {
  font-size: calc(14px * var(--tel-schaal, 1));
  font-weight: 700;
  color: var(--pnl-inkt-3);
}

.tel-vak__inhoud {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 0 14px;
}

.tel-vak__inhoud > * {
  min-width: 0;
}

/* --- velden ------------------------------------------------------------------------------------------ */

.tel-vorm {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}

.tel-veld {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: calc(14px * var(--tel-schaal, 1));
  font-weight: 700;
  color: var(--pnl-inkt-2);
}

.tel-veld input,
.tel-veld select,
.tel-veld textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--pnl-lijn-veld);
  border-radius: 12px;
  background: var(--pnl-vlak);
  color: var(--pnl-inkt);
  font: inherit;
  font-size: calc(16px * var(--tel-schaal, 1));
  font-weight: 500;
}

.tel-veld textarea {
  min-height: 110px;
  padding: 12px 14px;
  line-height: 1.45;
  resize: vertical;
}

/* Het veld dat een opslag tegenhield (een fout wist niets, 19 september 2026): rood omrand. */
.tel-veld [aria-invalid="true"] {
  border-color: var(--pnl-fout);
  box-shadow: 0 0 0 1px var(--pnl-fout);
}

.tel-veld__hint {
  font-size: calc(13px * var(--tel-schaal, 1));
  font-weight: 600;
  color: var(--pnl-inkt-3);
}

.tel-vink {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  font-size: calc(15px * var(--tel-schaal, 1));
  font-weight: 700;
}

.tel-vink input {
  /* Krimpt niet naast een lange regel (de keuzevakjes van Kiezen op Geld, 13 oktober 2026). */
  flex: none;
  width: 22px;
  height: 22px;
  accent-color: var(--pnl-accent);
}

/* --- onderbladen ------------------------------------------------------------------------------------- */
/* Zonder JavaScript opent een blad met :target (een link naar #id) en sluit het met een link naar #. telefoon.js
   zet in plaats daarvan een klasse, zodat de pagina niet verspringt. */

.tel-blad {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 20;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--tel-waas);
}

.tel-blad:target,
.tel-blad--open {
  display: flex;
}

.tel-blad__achter {
  position: absolute;
  inset: 0;
}

.tel-blad__vel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 10px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  background: var(--pnl-vlak);
  border-radius: 22px 22px 0 0;
}

.tel-blad__vel > * {
  min-width: 0;
}

.tel-blad__greep {
  align-self: center;
  width: 40px;
  height: 5px;
  border-radius: 999px;
  background: var(--pnl-lijn-veld);
}

.tel-blad__titel {
  margin: 0;
  font-size: calc(21px * var(--tel-schaal, 1));
  font-weight: 800;
}

.tel-keuze {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid var(--pnl-lijn);
  border-radius: 16px;
  background: var(--pnl-vlak);
  color: var(--pnl-inkt);
  text-decoration: none;
  text-align: left;
  font: inherit;
}

.tel-keuze > * {
  min-width: 0;
}

.tel-keuze__teken {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--pnl-accent-zacht);
  color: var(--pnl-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tel-keuze__tekst {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: calc(17px * var(--tel-schaal, 1));
  font-weight: 800;
}

.tel-keuze__onder {
  font-size: calc(14px * var(--tel-schaal, 1));
  font-weight: 500;
  color: var(--pnl-inkt-3);
}

.tel-fotos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tel-fotos img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 12px;
  background: var(--pnl-accent-waas);
}

.tel-citaat {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--pnl-grond);
  color: var(--pnl-inkt-2);
  font-size: calc(15px * var(--tel-schaal, 1));
  line-height: 1.55;
}

/* 17 oktober 2026: een lange tekst met regeleinden (de vaste basis van de AI-instructies). */
.tel-wit-pre {
  white-space: pre-line;
}

/* 17 oktober 2026: de samenvatting bovenaan de berichten van een zending. */
.tel-samenvatting {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--pnl-accent-waas);
  font-size: calc(15px * var(--tel-schaal, 1));
  line-height: 1.5;
}

.tel-samenvatting p {
  margin: 0 0 6px;
}

.tel-samenvatting strong {
  display: block;
  font-size: calc(12px * var(--tel-schaal, 1));
  text-transform: uppercase;
}

/* 17 oktober 2026: een bericht met alinea's (`mailtekst.html`) en een ingeklapt doorgestuurd bericht. */
.tel-citaat p {
  margin: 0 0 .55em;
}

.tel-citaat p:last-child {
  margin-bottom: 0;
}

.tel-doorgestuurd {
  margin-top: 8px;
  font-size: calc(14px * var(--tel-schaal, 1));
}

.tel-doorgestuurd > summary {
  cursor: pointer;
  font-weight: 700;
}

/* --- het gesprek (24 oktober 2026, plan lange-schermen taak 2) ----------------------------------------------------
   De macro `gesprek` in scan/_tel.html, op de vorm van werkorders/gesprekvorm.py: de oudere berichten achter één pil
   bovenaan, een dag tussen de dagen, de klant links en DZH rechts, een statusregel klein in het midden. De bubbel is
   een `.tel-citaat` met regeleinden (pre-line) — `.tel-citaat` zelf blijft zoals hij was, want hij draagt ook
   "De klant schreef erbij" en de mail in het Postvak IN. */
.tel-gesprek {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.tel-gesprek__eerder > summary {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 44px;
  margin: 0 auto;
  padding: 0 16px;
  border: 1px solid var(--pnl-lijn);
  border-radius: 999px;
  background: var(--pnl-vlak-zacht);
  color: var(--pnl-inkt-2);
  font-size: calc(14px * var(--tel-schaal, 1));
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.tel-gesprek__eerder > summary::-webkit-details-marker {
  display: none;
}

.tel-gesprek__eerder[open] > summary {
  margin-bottom: 10px;
}

.tel-gesprek__dag {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 0;
  color: var(--pnl-inkt-3);
  font-size: calc(12px * var(--tel-schaal, 1));
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tel-gesprek__dag::before,
.tel-gesprek__dag::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--pnl-lijn-zacht);
}

.tel-gesprek__status {
  margin: 0;
  text-align: center;
  font-size: calc(13px * var(--tel-schaal, 1));
  color: var(--pnl-inkt-3);
}

.tel-gesprek__wacht {
  margin: 0;
}

.tel-bericht {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.tel-bericht--dzh {
  align-items: flex-end;
}

.tel-bericht__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: calc(13px * var(--tel-schaal, 1));
  color: var(--pnl-inkt-3);
}

.tel-bericht__meta strong {
  color: var(--pnl-inkt-2);
}

.tel-bericht__bubbel {
  max-width: 88%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--pnl-lijn);
  border-radius: 4px 14px 14px 14px;
  background: var(--pnl-vlak);
  white-space: pre-line;
}

.tel-bericht--dzh .tel-bericht__bubbel {
  border-color: var(--pnl-accent-zacht);
  border-radius: 14px 4px 14px 14px;
  background: var(--pnl-accent-waas);
}

/* Een antwoord dat niet van het adres van de klant komt (een webshop in de cc): gestippeld rood, net als op de website. */
.tel-bericht--ander .tel-bericht__bubbel {
  border-style: dashed;
  border-color: var(--pnl-fout-inkt);
}

.tel-bericht--eska .tel-bericht__bubbel {
  border-color: var(--pnl-wacht-vlak);
  background: var(--pnl-wacht-vlak);
}

/* Een pdf bij een bericht (Eska, 24 oktober 2026): een eigen regel onder de tekst; een foto is een `tel-eska-foto`. */
.tel-bericht__bijlage {
  display: block;
  margin-top: 6px;
  font-weight: 700;
}

/* Chat zoals WhatsApp (31 oktober 2026, ronde 3): het citaat boven een antwoord, een plaatje, spraak of video, een locatie als
   link, de reactie van de klant (en onze eigen) als emoji onder de bubbel en de rij emoji-knoppen om zelf te reageren. */
.tel-chat-citaat {
  display: block;
  margin: 0 0 6px;
  padding: 6px 10px;
  border-left: 3px solid var(--pnl-accent-fel);
  border-radius: 6px;
  background: var(--pnl-vlak-zacht);
  color: var(--pnl-inkt-2);
  font-size: calc(14px * var(--tel-schaal, 1));
  white-space: normal;
}

.tel-chat-citaat--weg {
  border-left-color: var(--pnl-lijn);
  font-style: italic;
}

.tel-chat-citaat__wie {
  display: block;
  color: var(--pnl-accent-fel);
  font-size: calc(12px * var(--tel-schaal, 1));
}

.tel-chat-citaat__tekst {
  display: block;
  overflow-wrap: anywhere;
}

.tel-chat-plaatje {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: 6px;
  border: 1px solid var(--pnl-lijn);
  border-radius: 10px;
}

.tel-chat-plaatje--sticker {
  max-width: 8rem;
  border: 0;
}

.tel-chat-speler {
  display: block;
  width: 100%;
  margin-top: 6px;
}

.tel-chat-speler--video {
  max-height: 16rem;
  border-radius: 10px;
}

.tel-chat-mist {
  display: block;
  margin-top: 4px;
  color: var(--pnl-fout-inkt);
  font-size: calc(14px * var(--tel-schaal, 1));
}

.tel-chat-locatie {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
}

.tel-chat-locatie__tekst {
  display: block;
  color: var(--pnl-inkt-3);
  font-size: calc(14px * var(--tel-schaal, 1));
}

.tel-chat-reacties {
  display: inline-flex;
  gap: 2px;
  margin: -8px 10px 0;
  padding: 1px 8px;
  border: 1px solid var(--pnl-lijn);
  border-radius: 999px;
  background: var(--pnl-vlak);
  font-size: calc(16px * var(--tel-schaal, 1));
  line-height: 1.5;
}

.tel-chat-reactie {
  display: inline-block;
}

/* De reactie van de klant eerst, de onze erachter, met een streepje ertussen. */
.tel-chat-reactie--klant {
  order: 0;
}

.tel-chat-reactie--dzh {
  order: 1;
  padding-left: 4px;
  border-left: 1px solid var(--pnl-lijn);
}

.tel-chat-reageer {
  min-width: 0;
}

.tel-chat-reageer__knop {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--pnl-inkt-3);
  font-size: calc(14px * var(--tel-schaal, 1));
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.tel-chat-reageer__knop::-webkit-details-marker {
  display: none;
}

.tel-chat-reageer__vorm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.tel-chat-emoji {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--pnl-lijn);
  border-radius: 999px;
  background: var(--pnl-vlak);
  font-size: calc(20px * var(--tel-schaal, 1));
  cursor: pointer;
}

.tel-chat-emoji--gekozen {
  border-color: var(--pnl-accent-fel);
  background: var(--pnl-accent-waas);
}

.tel-bericht__hele > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--pnl-accent-fel);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.tel-bericht__hele > summary::-webkit-details-marker {
  display: none;
}

/* Open = de hele tekst; de korte erboven hoeft er dan niet meer. */
.tel-bericht__bubbel:has(> .tel-bericht__hele[open]) > .tel-bericht__kort {
  display: none;
}

/* Het typvak: drie regels die meegroeien, tot een plafond. */
.tel-schrijf textarea {
  field-sizing: content;
  min-height: calc(4.35em + 26px);
  max-height: 16em;
}

/* --- meldingen als toast ----------------------------------------------------------------------------- */

.tel-toasten {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(var(--tel-balk) + env(safe-area-inset-bottom, 0px) + 16px);
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.tel-toast,
.tel-toast--fout {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--pnl-inkt);
  color: var(--pnl-vlak);
  font-size: calc(15px * var(--tel-schaal, 1));
  font-weight: 600;
  line-height: 1.4;
  box-shadow: var(--tel-schaduw);
  animation: tel-toast-weg 4.5s ease-in forwards;
}

.tel-toast--fout {
  background: var(--pnl-fout-inkt);
  animation-duration: 8s;
}

/* 30 oktober 2026: een toast met een link (`beheer/basis.flash`) blijft langer staan en is aan te tikken, ook al staat de
   rij toasten zelf op `pointer-events: none`. */
.tel-toast--link {
  pointer-events: auto;
  animation-duration: 20s;
}

.tel-toast__link {
  display: inline-block;
  padding: 6px 0;
  color: inherit;
  font-weight: 800;
  text-decoration: underline;
}

@keyframes tel-toast-weg {
  0%,
  88% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* Zonder beweging verdwijnt de melding nog steeds, alleen in één keer. */
@keyframes tel-toast-weg-direct {
  to {
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tel-toast,
  .tel-toast--fout {
    animation-name: tel-toast-weg-direct;
    animation-timing-function: steps(1, end);
  }
}

/* --- klant ----------------------------------------------------------------------------------------------- */

.tel-snel {
  display: flex;
  gap: 8px;
}

.tel-snel > * {
  flex: 1 1 0;
  min-width: 0;
}

.tel-snel__knop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 60px;
  border: 1px solid var(--pnl-lijn);
  border-radius: 12px;
  background: var(--pnl-vlak);
  color: var(--pnl-inkt-2);
  font-size: calc(13px * var(--tel-schaal, 1));
  font-weight: 700;
  text-decoration: none;
}

.tel-snel__knop .tel-icoon {
  color: var(--pnl-accent);
}

.tel-kaart--fout {
  background: var(--pnl-fout-vlak);
  border-color: var(--pnl-fout-vlak);
}

/* Een rode chip op een rode kaart (het risicoblok van Personal shopper: „klant geblokkeerd") viel weg in zijn ondergrond;
   wit met rode letters blijft hij een chip (review taak 4a, 13 oktober 2026). */
.tel-kaart--fout .tel-chip--fout {
  background: var(--pnl-vlak);
}

.tel-regel__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.tel-los {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--pnl-lijn-zacht);
}

.tel-los > * {
  min-width: 0;
  margin: 0;
}

.tel-archief {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--pnl-inkt-2);
  font-size: calc(15px * var(--tel-schaal, 1));
  text-decoration: none;
}

/* De labelkolom zo breed als het langste label, hooguit 45 %: met een vaste derde brak „Omschrijv / ing” op elke
   creditnota (review 12 oktober 2026; spec §5.4b(3)). */
.tel-gegevens {
  display: grid;
  grid-template-columns: fit-content(45%) minmax(0, 1fr);
  gap: 8px 12px;
  margin: 0;
  font-size: calc(15px * var(--tel-schaal, 1));
}

.tel-gegevens > * {
  min-width: 0;
  margin: 0;
}

.tel-gegevens dt {
  color: var(--pnl-inkt-3);
  overflow-wrap: normal;
}

.tel-gegevens dd {
  font-weight: 600;
}

/* --- zending --------------------------------------------------------------------------------------------- */

.tel-knop--rond {
  width: 48px;
  padding: 0;
}

.tel-bedragen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: calc(15px * var(--tel-schaal, 1));
}

.tel-bedragen li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.tel-bedragen li > * {
  min-width: 0;
}

.tel-bedragen li > :last-child {
  flex: 0 0 auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tel-tijdlijn {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: calc(15px * var(--tel-schaal, 1));
  color: var(--pnl-inkt-2);
}

.tel-tijdlijn__wanneer {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- geld ------------------------------------------------------------------------------------------------ */

/* Facturen · Offertes · Maand (13 oktober 2026, taak 4b): zoveel gelijke vakken als er knoppen zijn. */
.tel-schakel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--pnl-lijn-zacht);
}

.tel-schakel > * {
  min-width: 0;
}

.tel-schakel__knop {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 9px;
  color: var(--pnl-inkt-3);
  font-size: calc(15px * var(--tel-schaal, 1));
  font-weight: 700;
  text-decoration: none;
}

.tel-schakel__knop[aria-current="page"] {
  background: var(--pnl-vlak);
  color: var(--pnl-inkt);
  box-shadow: var(--tel-schaduw);
}

.tel-totaal__getal {
  font-size: calc(28px * var(--tel-schaal, 1));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.tel-geldregel {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.tel-geldregel > * {
  min-width: 0;
}

.tel-geldregel__rechts {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.tel-geldregel__bedrag {
  /* Ook als los kind van een .tel-regel (de tabbladen van Geld): niet krimpen en niet breken — „€ / 78,6 / 5” op
     320 px (review 12 oktober 2026). */
  flex: none;
  white-space: nowrap;
  font-size: calc(17px * var(--tel-schaal, 1));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ⋯ houdt zijn 48 px, ook naast een lange naam: in de rij knoppen en in de kop van een geldkaart (13 oktober 2026, taak
   4b: ⋯ in de kaartkop op Openstaand). */
.tel-knoppen > .tel-knop--rond,
.tel-geldregel > .tel-knop--rond {
  flex: 0 0 48px;
}

/* De maand op Geld: ‹ September 2026 › — de pijlen even breed, de maand in het midden (13 oktober 2026, taak 4b). */
.tel-maandkop {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 8px;
  text-align: center;
}

/* --- offerte sturen en factuur maken (spec §3.8) ---------------------------------------------------------- */

/* Keuzeknoppen (dienst, taal): radio's met een tikvlak zo hoog als een veld, bruikbaar zonder JavaScript. Het rondje
   zelf is weggeclipt en niet display:none, anders verdwijnt de knop uit de tabvolgorde. Een fieldset krijgt van de
   browser min-width: min-content; min-width: 0 houdt hem binnen het scherm. */
.tel-keuzes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.tel-keuzes__naam {
  padding: 0;
  font-size: calc(14px * var(--tel-schaal, 1));
  font-weight: 700;
  color: var(--pnl-inkt-2);
}

.tel-keuzes__rij {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tel-keuzes__rij > * {
  min-width: 0;
}

.tel-keuzeknop {
  position: relative;
  display: inline-flex;
}

.tel-keuzeknop input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.tel-keuzeknop span {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 16px;
  text-align: center;
  overflow-wrap: normal;
  border: 1px solid var(--pnl-lijn-veld);
  border-radius: 12px;
  background: var(--pnl-vlak);
  color: var(--pnl-inkt-2);
  font-size: calc(15px * var(--tel-schaal, 1));
  font-weight: 700;
  cursor: pointer;
}

.tel-keuzeknop input:checked + span {
  border-color: var(--pnl-accent);
  background: var(--pnl-accent);
  color: var(--pnl-vlak);
}

.tel-keuzeknop input:focus-visible + span {
  outline: 3px solid var(--pnl-accent-rand);
  outline-offset: 2px;
}

.tel-bevestiging {
  background: var(--pnl-ok-vlak);
  border-color: var(--pnl-ok-vlak);
}

/* Een factuurregel: omschrijving en bedrag naast elkaar, zodat vijf regels geen lange pagina worden. */
.tel-factuurregel {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 10px;
}

.tel-factuurregel > * {
  min-width: 0;
}

/* *Nog een regel*: geneste <details>. Dicht is het alleen de knop; open verdwijnt de knop en staat de regel er, met
   eronder de knop voor de volgende. */
.tel-nogeen > summary {
  list-style: none;
}

.tel-nogeen > summary::-webkit-details-marker {
  display: none;
}

.tel-nogeen[open] > summary {
  display: none;
}

/* Binnen een uitgeklapte regel; de bovenste regel staat in .tel-vorm, dat zijn eigen tussenruimte heeft. */
.tel-nogeen > .tel-factuurregel + .tel-nogeen {
  margin-top: 14px;
}

/* --- aanvraag, partners en inbox (spec §2: de telefoonsjablonen die blijven) ------------------------------ */

/* Snelle acties: twee kolommen knoppen, wat er op dit moment kan. Een knop in een formulier vult zijn vak net zo als
   een link (.tel-knopvorm). */
.tel-acties {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.tel-acties > * {
  min-width: 0;
}

.tel-acties__breed {
  grid-column: 1 / -1;
}

/* 13 oktober 2026 (review taak 3): geen kind in een vakkop wordt smaller dan zijn langste woord — anders kreeg de grijze
   toelichting naast een lange titel 0 px en liep ze over de rand. */
.tel-vak > summary > * {
  min-width: min-content;
}

/* 12 oktober 2026 (spec 2026-10-12-app-alles-design §5.4b punt 2, al nodig voor de nieuwe vakken van taak 3): de
   vaktitel breekt nooit midden in een woord ("Afleveradr|es" naast "Adres niet gecontroleerd" op 360 px); de grijze
   toelichting neemt de rest en breekt tussen de woorden. 13 oktober 2026 (review taak 3): geen harde 60 % meer — een
   kop met maar één kind (het factuurscherm) of naast een bedrag kreeg dan 40 % leegte en twee keer zoveel regels. De
   titel neemt zijn eigen breedte en krimpt waar nodig, nooit smaller dan zijn langste woord (regel hierboven). */
.tel-vak > summary > :first-child {
  flex: 0 1 auto;
  overflow-wrap: normal;
}

.tel-vak__sub {
  flex: 1 1 0;
  font-size: calc(14px * var(--tel-schaal, 1));
  font-weight: 500;
  color: var(--pnl-inkt-3);
  text-align: right;
  overflow-wrap: normal;
}

/* Een opsomming binnen een vak: artikelen, bestanden, bijlagen. */
.tel-opsomming {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: calc(15px * var(--tel-schaal, 1));
  line-height: 1.45;
}

.tel-opsomming > li {
  min-width: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--pnl-lijn-zacht);
}

.tel-opsomming > li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.tel-opsomming__meta {
  display: block;
  font-size: calc(14px * var(--tel-schaal, 1));
  color: var(--pnl-inkt-3);
}

/* De tekst van een mail: platte tekst met de regels zoals de afzender ze tikte. */
.tel-mailtekst {
  white-space: pre-wrap;
}

/* 8 oktober 2026: foto bij een bericht van Eska (zending, vak Eska). */
.tel-eska-foto { display: block; max-width: 100%; height: auto; margin: 4px 0 12px; border-radius: 10px; border: 1px solid var(--pnl-lijn); }

/* 9 oktober 2026: de douane op de telefoon — één blok per artikelregel, en de verborgen standaardknop (Enter = opslaan). */
.tel-douaneregel { border-top: 1px solid var(--pnl-lijn); padding-top: 12px; margin-top: 12px; }
.tel-verborgen { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- het factuurscherm (12 oktober 2026, spec 2026-10-12-app-alles-design §2.3) ---------------------------------- */

/* Een factuurregel: de omschrijving over de hele breedte, daaronder Aantal · Prijs · Btw als drie gelijke vakken. */
.tel-regelkaart {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 8px;
}

/* De omschrijving begint op één regel en groeit mee met de tekst (field-sizing; telefoon.js waar dat niet bestaat). */
.tel-regelkaart textarea {
  min-height: 48px;
  padding-block: 11px;
  field-sizing: content;
  resize: none;
}

/* Een bedrag breekt nooit tussen € en het getal ("Marge € / 2,50", opmaak-audit A8), en een datum of factuurnummer
   niet bij zijn streepjes ("26- / 10-2026", "F-2026- / 0003"; review 12 oktober 2026). */
.tel-bedrag {
  /* Ook als vak in een flexrij (de kop van een ingeklapte regel): niet krimpen, anders loopt het bedrag eruit. */
  flex: none;
  white-space: nowrap;
}

/* Onder een verzendregel: wat de klant betaalt, wat het label ons kost en de marge. */
.tel-marge {
  margin: 0;
  font-size: calc(14px * var(--tel-schaal, 1));
  font-weight: 600;
  color: var(--pnl-inkt-3);
  font-variant-numeric: tabular-nums;
}

/* Opslaan en Versturen binnen duimbereik, boven de onderbalk, als gelijke vakken. Het laatste kind van het lijf:
   onderaan de pagina staat hij gewoon op zijn plek en verdwijnt er niets onder. De onderbladen liggen erboven. */
.tel-plakbalk {
  position: sticky;
  bottom: calc(var(--tel-balk) + env(safe-area-inset-bottom, 0px) + 8px);
  z-index: 5;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
  background: var(--pnl-vlak);
  border: 1px solid var(--pnl-lijn);
  border-radius: 16px;
  box-shadow: var(--tel-schaduw);
}

/* De meest gebruikte knoppen van het scherm: 48 px, zoals regel R6 vraagt (review: ze waren 44 px). */
.tel-plakbalk .tel-knop {
  min-height: 48px;
}

/* Een melding na Opslaan schuift boven de plakbalk in plaats van er 4,5 seconde overheen (review: melding 662-734 px,
   balk 680-742 px op 375 px). 86 px = de balk (48 + 2 × 8 + 2 rand) + zijn 8 px afstand + 12 px lucht. */
body:has(.tel-plakbalk) .tel-toasten {
  bottom: calc(var(--tel-balk) + env(safe-area-inset-bottom, 0px) + 86px);
}

/* Aantal · Prijs · Btw: drie smalle vakken. Met 10 px lucht opzij past „149,95” op 320 px (review). */
.tel-regelkaart input,
.tel-regelkaart select {
  padding-inline: 10px;
}

/* De omschrijving van een regel over de hele breedte, de drie vakken eronder. */
.tel-regelkaart > :first-child {
  grid-column: 1 / -1;
}

/* Twee korte velden naast elkaar (btw-nummer en KvK, postcode en huisnummer): gelijke vakken. Een datum of een
   keuzelijst met een lange tekst hoort hier niet in — die staat onder elkaar (review: het jaartal viel eraf). */
.tel-veldrij {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 8px;
  align-items: end;
}

/* Een factuurregel ingeklapt: omschrijving en bedrag op één regel, het formulier achter een tik (regel R7). */
.tel-regelvak > summary .tel-regel__titel {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: normal;
}

/* Op 320 px past „DZH-AAAA-001” op 28 px niet naast ⋯: dan valt ⋯ naar een eigen regel en wordt de kop 204 px hoog
   (review). 24 px houdt ze naast elkaar; het nummer breekt nooit bij zijn streepjes. */
@media (max-width: 21.25rem) {
  .tel-kop__titel {
    font-size: calc(24px * var(--tel-schaal, 1));
  }
}

/* --- de klantreis (12 oktober 2026, spec 2026-10-12-app-alles-design §3 rij 6, `site/scan/_volgstap.html`) -------- */

/* De stappen van de volglink onder elkaar: elke stap is een knop over de volle breedte (één tik = één POST). */
.tel-reis {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.tel-reisstap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 8px 14px;
  border: 1px solid var(--pnl-lijn-veld);
  border-radius: 12px;
  background: var(--pnl-vlak);
  color: var(--pnl-inkt-2);
  font: inherit;
  font-size: calc(15px * var(--tel-schaal, 1));
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  overflow-wrap: normal;
  cursor: pointer;
}

/* De stap die de klant nu leest. */
.tel-reisstap--nu {
  border-color: var(--pnl-accent);
  color: var(--pnl-inkt);
  font-weight: 800;
}

/* Wat nog komt: grijs, maar te tikken (een stap vooruit zetten kan). */
.tel-reisstap--later {
  color: var(--pnl-inkt-3);
}

/* --- een document in de app (13 oktober 2026, Leroy bij V4; review taak 4a) ---------------------------------------- */

/* Het chargeback-dossier is papier voor de bank: het opent in een eigen blad, zonder telefoonschil
   (`site/scan/document.html`). `.tel` zet `overflow-wrap: anywhere` (een e-mailadres moet kunnen afbreken), en in een
   tabel maakt dat elke kolom zo smal als één letter („S/T/A/T/U/S", „€ 279 / ,00" op 320 px). Een document breekt alleen
   een woord dat langer is dan de regel, zoals een link. */
.tel-document {
  overflow-wrap: break-word;
}

/* Het document is een bureausjabloon (pnl-*): zijn knop (*Dispuut afgehandeld*) krijgt de vingermaat van de app. */
.tel-document .pnl-knop {
  min-height: 48px;
}

/* Op een smal scherm wordt elke tabelrij een kaart: de kolomnaam (`data-label`, op elke cel) boven de waarde, en een
   bedrag in één stuk. Een label|waarde-rij staat onder elkaar, zodat een e-mailadres of een versienummer de hele
   breedte heeft in plaats van een halve. */
@media (max-width: 52rem) {
  .tel-document .pnl-tabel thead {
    display: none;
  }

  .tel-document .pnl-tabel,
  .tel-document .pnl-tabel tbody,
  .tel-document .pnl-tabel tr,
  .tel-document .pnl-tabel td {
    display: block;
  }

  .tel-document .pnl-tabel tr {
    padding: 10px 0;
    border-top: 1px solid var(--pnl-lijn-zacht);
  }

  .tel-document .pnl-tabel td {
    padding: 3px 0;
    border-top: 0;
  }

  .tel-document .pnl-tabel td::before {
    content: attr(data-label);
    display: block;
    color: var(--pnl-inkt-5);
    font-size: calc(11px * var(--tel-schaal, 1));
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .tel-document .pnl-tabel .pnl-getal {
    text-align: left;
    white-space: nowrap;
  }

  .tel-document .pnl-koop__kosten--tekst > div {
    flex-direction: column;
    gap: 2px;
  }

  .tel-document .pnl-koop__kosten--tekst dd {
    text-align: left;
    overflow-wrap: break-word;
  }

  /* De factuur en de zending in die rijen: een link die je met een duim raakt. */
  .tel-document .pnl-koop__kosten--tekst dd a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* --- de stappenwijzer (23 oktober 2026, spec 2026-10-23-stappenwijzer-design §3) ------------------------------------
   Gegevens wijzigen als vijf stappen: één regel per stap (nummer of vinkje, naam, stand), alleen de stap van nu open. */

.tel-wijzer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tel-wijzer__stap {
  padding: 0 14px;
  background: var(--pnl-vlak);
  border: 1px solid var(--pnl-lijn);
  border-radius: 14px;
}

.tel-wijzer__stap--nu {
  border-color: var(--pnl-accent);
}

.tel-wijzer__kop {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  font-size: calc(16px * var(--tel-schaal, 1));
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.tel-wijzer__kop::-webkit-details-marker {
  display: none;
}

.tel-wijzer__nr {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--pnl-stil-vlak);
  color: var(--pnl-inkt-3);
  font-size: calc(13px * var(--tel-schaal, 1));
  font-weight: 800;
}

.tel-wijzer__stap--klaar > .tel-wijzer__kop > .tel-wijzer__nr {
  background: var(--pnl-ok-vlak);
  color: var(--pnl-ok-inkt);
}

.tel-wijzer__stap--nu > .tel-wijzer__kop > .tel-wijzer__nr {
  background: var(--pnl-accent);
  color: var(--pnl-vlak);
}

.tel-wijzer__naam {
  flex: 0 0 auto;
}

.tel-wijzer__sub {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  font-size: calc(13px * var(--tel-schaal, 1));
  font-weight: 400;
  color: var(--pnl-inkt-3);
}

.tel-wijzer__lijf {
  padding: 4px 0 14px;
}

/* --- de tijdlijn van Onderweg (23 oktober 2026, spec 2026-10-23-stappenwijzer-design §2.2) -------------------------
   Betaald → Label → (Eska pakt in) → Verzonden → Bezorgd: bolletjes aan een lijn, het bolletje van nu gevuld. */

.tel-spoor {
  list-style: none;
  margin: 0;
  padding: 4px 0 0 2px;
}

.tel-spoor__stap {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 0 0 18px;
}

.tel-spoor__stap::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 20px;
  bottom: 0;
  width: 2px;
  background: var(--pnl-lijn);
}

.tel-spoor__stap:last-child::before {
  display: none;
}

.tel-spoor__bol {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border-radius: 50%;
  border: 2px solid var(--pnl-lijn);
  background: var(--pnl-vlak);
}

.tel-spoor__stap--klaar > .tel-spoor__bol {
  border-color: var(--pnl-ok-inkt);
  background: var(--pnl-ok-vlak);
}

.tel-spoor__stap--nu > .tel-spoor__bol {
  border-color: var(--pnl-accent);
  background: var(--pnl-accent);
}

.tel-spoor__lijf {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tel-spoor__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
  font-size: calc(15px * var(--tel-schaal, 1));
}

.tel-spoor__titel {
  font-weight: 700;
  color: var(--pnl-inkt-2);
}

.tel-spoor__stap--straks .tel-spoor__titel {
  font-weight: 600;
  color: var(--pnl-inkt-3);
}

.tel-spoor__stap--nu .tel-spoor__titel {
  color: var(--pnl-accent-fel);
}

.tel-spoor__tijd,
.tel-spoor__sub {
  font-size: calc(13px * var(--tel-schaal, 1));
  color: var(--pnl-inkt-3);
}

/* Meer ▾: de alternatieven bij het punt van nu, dicht tot je ze nodig hebt. */
.tel-anders {
  padding-top: 6px;
  border-top: 1px dashed var(--pnl-lijn);
}

.tel-anders > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
  font-size: calc(14px * var(--tel-schaal, 1));
  font-weight: 700;
  color: var(--pnl-inkt-3);
}

.tel-anders > summary::-webkit-details-marker {
  display: none;
}

.tel-anders__lijf {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 8px;
}

/* Waar Eska op wacht (4 november 2026): bovenaan het vak Eska op de zending, met het moment en Dossier ophalen. */
.tel-wacht {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--pnl-lijn);
  border-radius: 12px;
  background: var(--pnl-vlak);
}

.tel-wacht__tekst {
  margin: 0;
  font-size: calc(15px * var(--tel-schaal, 1));
  font-weight: 700;
  color: var(--pnl-inkt);
}

.tel-wacht__moment {
  margin: 0;
  font-size: calc(13px * var(--tel-schaal, 1));
  color: var(--pnl-inkt-3);
}

/* De veilingfactuur als plaatjes (24 oktober 2026): elke pagina over de hele breedte, nooit breder dan het scherm. */
.tel-anders__lijf > img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--pnl-lijn);
  border-radius: 12px;
  background: var(--pnl-vlak);
}

/* --- het pakket in de app (24 oktober 2026, plan lange-schermen taak 5; ontwerp "Pakket in de app") ----------------
   Een stap met een chip (werk of fout) toont de chip in plaats van de stand: naast een lange naam als "Verzoeken van de
   klant" bleef er voor de stand op 390 px één letter en een puntje over. De stand staat in de stap zelf. */
.tel-wijzer__kop > .tel-chip {
  flex: 0 0 auto;
  margin-left: auto;
}

.tel-wijzer__kop:has(> .tel-chip) > .tel-wijzer__sub {
  display: none;
}

/* Naast een chip mag de naam over twee regels (tussen de woorden): op 320 px duwde "Verzoeken van de klant" met "1 open"
   de pagina 25 px te breed. */
.tel-wijzer__kop:has(> .tel-chip) > .tel-wijzer__naam {
  flex: 0 1 auto;
  overflow-wrap: normal;
}

/* Een verzoek is één regel (24 oktober 2026, lange schermen ronde 2, K3): de naam, en daaronder de stand met Klaar en
   *Meer ▾* rechts, elk zo breed als zijn woord — niet meer de tekst, het magazijn en twee knoppen over de volle breedte
   (±210 px per verzoek op 390). De naam staat op een eigen regel: naast de knoppen brak "Herverpakken" op 320 px
   midden in het woord, en schoof Meer bij de ene regel wel en bij de andere niet naar onderen. Open valt Meer over de
   volle breedte onder de regel. */
.tel-verzoek__rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.tel-verzoek__naam {
  flex: 1 1 100%;
  margin: 0;
}

.tel-verzoek__stand {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

.tel-verzoek__rij > .tel-knopvorm {
  flex: 0 0 auto;
}

.tel-verzoek__rij > .tel-anders {
  flex: 0 0 auto;
  padding-top: 0;
  border-top: 0;
}

.tel-verzoek__rij > .tel-anders[open] {
  flex-basis: 100%;
}

.tel-verzoek__rij > .tel-anders > summary {
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--pnl-lijn-veld);
  border-radius: 12px;
  background: var(--pnl-vlak);
  color: var(--pnl-inkt-2);
}

.tel-verzoek__rij > .tel-anders[open] > summary {
  display: inline-flex;
}

/* *Over dit pakket*: de regels samen in één kaart met een lijn ertussen (ontwerp), niet tien losse kaarten met lucht
   ertussen. Elke regel blijft een gewone `tel-vak`. */
.tel-regels {
  display: flex;
  flex-direction: column;
  background: var(--pnl-vlak);
  border: 1px solid var(--pnl-lijn);
  border-radius: 14px;
  overflow: hidden;
}

.tel-regels > .tel-vak {
  border: 0;
  border-top: 1px solid var(--pnl-lijn-zacht);
  border-radius: 0;
}

.tel-regels > .tel-vak:first-child {
  border-top: 0;
}

/* Review lange schermen ronde 2 (24 oktober 2026): op de app-zending staan ook de werkvakken en de vakken onder Onderweg
   in zo'n kaart; daar staat het anker `#berichten` (een lege span) soms bovenaan, vóór zijn vak — dan ook geen lijn. */
.tel-regels > :first-child:not(.tel-vak) + .tel-vak {
  border-top: 0;
}

/* --- het lerende systeem (25 oktober 2026) ------------------------------------------------------------------------
   Het blad met de voorstellen uit één bericht van een klant (site/scan/_kans_blad.html): het bericht, de feiten, per
   voorstel een vak met Doen/Niet, en één Leer-vak. Dezelfde velden en knoppen als de rest van de app. */
.tel-kans__bericht {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--pnl-accent-rand);
  border-radius: 10px;
  background: var(--pnl-vlak-zacht);
  color: var(--pnl-inkt-2);
  font-size: calc(14px * var(--tel-schaal, 1));
  white-space: pre-line;
}

.tel-kans__feiten {
  margin: 0;
  padding-left: 20px;
  font-size: calc(15px * var(--tel-schaal, 1));
  font-weight: 600;
}

.tel-kans__voorstel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--pnl-lijn);
  border-radius: 14px;
  background: var(--pnl-vlak);
}

.tel-kans__naam {
  margin: 0;
  font-size: calc(15px * var(--tel-schaal, 1));
  font-weight: 800;
}

.tel-kans__tekst {
  margin: 0;
  color: var(--pnl-inkt-2);
  font-size: calc(14px * var(--tel-schaal, 1));
  white-space: pre-line;
}