/* De telefoonlaag (spec 2026-10-12, ronde 5, § 1 en § 2; core/telefoon.py). Alles hier geldt alleen met de klasse `tel`
   op <html>: een telefoon zonder andere keuze, de keuze *telefoon* van dit toestel, of een venster onder 640 px
   (static/js/telefoon.js). De pc-weergave verandert niet. Na corpus.css en fabriek.css; de kleuren zijn de tokens uit
   corpus.css. Klassen van deze laag beginnen met tel-, ob- (onderbalk), tk- (taakkaarten), rk- (de stap als reeks),
   cam- (Camera, in camera.css), lf- (losse foto's), ti- (het tabblad Telefoon in de bouwer), tt- (het toestel daarin)
   en ic- (Beheer › Inlogcodes). */

/* --- Buiten de telefoonlaag: wat alleen op de telefoon hoort, staat er niet --- */
.telmenu, .telmenu-sluit, .onderbalk, .op-laptop, .tel-alleen { display: none; }

/* --- De hoogte van de onderbalk, op één plek (fixgolf ronde 4): 0 zonder onderbalk (buiten de telefoonlaag, of een
   pagina zonder, zoals het inloggen) en als het menu openstaat (dan is hij verborgen). Alles wat vast onderaan staat -
   Ask Hans Boodt, de grote knop van een reeks, Sample goedkeuren, het onderblad - rekent ermee, plus de veilige rand. --- */
:root { --onderbalk-hoogte: 0px; }
html.tel:has(.onderbalk) { --onderbalk-hoogte: 64px; }
html.tel.menu-open { --onderbalk-hoogte: 0px; }

/* --- Het raamwerk: één kolom, de zijbalk achter je naam, de onderbalk onderaan --- */
html.tel body.app { display: block; padding-bottom: calc(var(--onderbalk-hoogte) + env(safe-area-inset-bottom)); }
html.tel .tel-alleen { display: block; }
html.tel a.knop.tel-alleen { display: inline-flex; }   /* Scannen: alleen op de telefoon, een knop blijft een knop */
html.tel .alleen-pc { display: none !important; }
html.tel .op-laptop {
  display: block; margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; background: var(--vlak); color: var(--zacht);
  font-size: 13px;
}
html.tel .topbar {
  position: sticky; top: 0; z-index: 20; height: 52px; padding: 0 12px 0 16px; gap: 10px;
  padding-top: env(safe-area-inset-top); border-bottom: 1px solid var(--rand);
}
/* De bovenbalk plakt: een anker (een QR-scan landt op #sample-controle, #printopdracht …; terug na opslaan) valt er
   anders onder. Review ronde 7, L1: sinds de tracker niet meer plakt, alleen de balk, de inham en wat lucht. */
html.tel { scroll-padding-top: calc(52px + env(safe-area-inset-top) + 8px); }
html.tel .topbar-merk { order: -1; margin-right: auto; text-align: left; font-size: 12px; color: var(--tekst); }
html.tel .topbar-merk span { display: none; }
html.tel .telmenu {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--donker);
  color: #fff; font-size: 14px; font-weight: 500; text-decoration: none;
}
/* De zijbalk: verborgen, tot je op je naam tikt (menu-open, of zonder JavaScript het anker #menu). Dan een paneel van
   rechts over de pagina, met de ingangen onder elkaar en onderaan taal, push en uitloggen. */
html.tel .zijbalk { display: none; }
html.tel.menu-open .zijbalk, html.tel .zijbalk:target {
  display: flex; flex-direction: column; align-items: stretch; gap: 0; position: fixed; z-index: 40; top: 0; right: 0;
  bottom: 0; left: auto;
  width: min(86vw, 320px); height: auto; padding: 20px 14px calc(18px + env(safe-area-inset-bottom));
  overflow-y: auto; border: 0; box-shadow: -12px 0 40px #1d263033;
}
html.tel .zijbalk .woordmerk, html.tel .zijbalk .zijbalk-onder .wie { display: block; }
html.tel .zijbalk .icoon { display: inline-block; }
html.tel .zijbalk .hoofdnav, html.tel .zijbalk .zijbalk-beheer { display: block; }
html.tel .zijbalk .hoofdnav a, html.tel .zijbalk .zijbalk-beheer a { padding: 12px; font-size: 15px; white-space: normal; }
html.tel .zijbalk .zijbalk-beheer { margin: 11px 0 0; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--rand); }
html.tel .zijbalk .zijbalk-onder { display: block; margin: auto 0 0; padding: 16px 12px 0; }
html.tel .zijbalk .zijbalk-onder form { margin: 6px 0; }
html.tel .zijbalk .zijbalk-onder button.link, html.tel .zijbalk .zijbalk-onder a { font-size: 14px; }
html.tel.menu-open .telmenu-sluit, html.tel .zijbalk:target ~ .topbar .telmenu-sluit {
  display: grid; place-items: center; position: fixed; z-index: 41; top: 12px; right: min(86vw, 320px);
  width: 40px; height: 40px; margin-right: 8px; border-radius: 50%; background: var(--pagina); color: var(--tekst);
  text-decoration: none; box-shadow: 0 2px 10px #1d263026;
}
html.tel.menu-open body::after {
  content: ""; position: fixed; inset: 0; z-index: 30; background: rgba(23, 28, 34, .35);
}
html.tel .page { padding: 16px 16px 24px; max-width: none; }
html.tel h1 { font-size: 26px; letter-spacing: -.4px; }
html.tel .panel { padding: 16px; border-radius: var(--hoek); }
html.tel .paginakop { gap: 12px; margin-bottom: 16px; }
html.tel .kaarten { grid-template-columns: minmax(0, 1fr); }
html.tel input[type=email], html.tel input[type=password], html.tel input[type=text]:not(.code-vak),
html.tel input[type=search], html.tel input[type=number], html.tel select, html.tel textarea { font-size: 16px; }
/* Een raster van widgets onder elkaar, in de volgorde van de telefoon (--tel, core/dashboard.py: Blok.tel_volgorde);
   een widget die op de telefoon verborgen is (Op telefoon verbergen in de bouwer) staat er niet.
   Sinds 2026-10-14 (widgets in kolommen) vallen de delen van het raster weg (display: contents): één kolom, en de
   telefoonvolgorde geldt over de kolommen heen; geen gat opvullen (.vult rekt niets op). */
html.tel .raster { display: flex; flex-direction: column; gap: 14px; }
html.tel .raster-kolommen, html.tel .raster-kolom, html.tel .raster-kaarten { display: contents; }
html.tel :is(.raster, .raster-kolom, .raster-kaarten) > .widget { order: var(--tel, 0); width: 100%; flex-grow: 0; }
html.tel :is(.raster, .raster-kolom, .raster-kaarten) > .widget[data-tel-verborgen] { display: none; }
html.tel .knop { min-height: 44px; }

/* --- De onderbalk (spec § 2; _onderbalk.html): vast onderaan, hooguit vier knoppen even breed --- */
html.tel .onderbalk {
  display: grid; grid-template-columns: repeat(var(--ob-n, 4), minmax(0, 1fr)); position: fixed; z-index: 25;
  left: 0; right: 0; bottom: 0; padding: 4px 6px env(safe-area-inset-bottom); background: var(--pagina);
  border-top: 1px solid var(--rand);
}
html.tel .ob-knop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px;
  color: var(--zacht); font-size: 11px; text-decoration: none; border-radius: 10px;
}
html.tel .ob-knop .icoon { width: 22px; height: 22px; }
/* De teller op Productie (spec 2026-10-14): de open acties van de to-do, rechtsboven op het icoon. */
html.tel .ob-knop { position: relative; }
html.tel .ob-teller { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--donker); color: var(--pagina); font-size: 9px; font-style: normal; font-weight: 500; line-height: 16px; text-align: center; }
html.tel .ob-teller[hidden] { display: none; }
html.tel .ob-knop[aria-current="page"] { color: var(--tekst); font-weight: 500; background: var(--actief); }
html.tel.menu-open .onderbalk { visibility: hidden; }
html.tel .zijbalk-telefoon { display: block; margin: 6px 0; }
.zijbalk-telefoon { font-size: 12px; color: var(--zacht); }

/* --- Telefoon en meldingen (telefoon_instellingen.html) --- */
.ti-onderbalk label, .ti-landen label { margin-top: .5rem; }
.ti-weergave { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- Camera: de eigen stijl staat in camera.css (klassen cam-, alleen op /camera/) --- */

/* --- Beheer › Dashboards › tabblad Telefoon: de schakelaar Camera: alle items tonen (één voor heel Corpus) --- */
.ti-camera .vinkje { border-bottom: 0; }

/* --- Mijn taken als kaarten (_taakkaarten.html): de duimnagel, waar, wat en Aan jou; één tik naar de handeling --- */
.tk-lijst { list-style: none; margin: 0; padding: 0; }
html.tel .tk-lijst { display: flex; flex-direction: column; gap: 10px; }
.tk-kaart { border: 1px solid var(--rand); border-radius: var(--hoek); background: var(--pagina); }
.tk-open { display: flex; gap: 12px; align-items: center; padding: 10px; color: inherit; text-decoration: none; }
.tk-beeld { flex: none; width: 64px; height: 64px; border-radius: 8px; background: var(--grijsvlak); overflow: hidden; }
.tk-beeld img { width: 100%; height: 100%; object-fit: contain; }
.tk-tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tk-waar { font-size: 12px; color: var(--zacht); overflow-wrap: anywhere; }
.tk-waar strong { color: var(--tekst); }
.tk-wat { font-size: 15px; font-weight: 500; }
.tk-onder { display: flex; align-items: center; gap: 8px; }
.tk-aan-jou { background: var(--donker); color: #fff; }
.tk-datums { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tk-kaart > .tk-datums { padding: 0 10px 10px 86px; }
/* De bouwer heeft op de telefoon alleen zijn lijst (zoals corpus.css onder 1024 px al doet). */
html.tel .bouwerpagina .bouwer, html.tel .bouwerpagina .bouwer-zonder-js, html.tel .bouwer-smal { display: none; }

/* --- Een stap als korte reeks (static/js/stappenreeks.js): de stappenbalk, één scherm, de grote knop onderaan --- */
html.tel :is(.raster, .raster-kolom, .raster-kaarten) > .widget.rk-weg { display: none; }
.rk-balk {
  display: flex; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none;
}
/* A3 (telefoontest 19 okt 2026): elke tab zo breed als zijn label (de tab was 72 px en kapte "Productie.." af); de balk
   scrolt zijwaarts, met een vervagende rechterrand zolang er nog tabs zijn (.rk-meer, stappenreeks.js). */
.rk-balk li { flex: 0 0 auto; }
.rk-balk.rk-meer { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.rk-balk button {
  min-height: 40px; padding: 8px 12px 10px; border: 0; border-top: 3px solid var(--vlak-2); background: none; font: inherit;
  font-size: 12px; color: var(--zacht); white-space: nowrap; cursor: pointer;
}
.rk-balk li.gedaan button { border-top-color: var(--zacht); }
.rk-balk button[aria-current] { border-top-color: var(--donker); color: var(--tekst); font-weight: 500; }
.rk-voet {
  position: fixed; left: 0; right: 0; bottom: calc(var(--onderbalk-hoogte) + env(safe-area-inset-bottom)); z-index: 24;
  padding: 10px 16px;
  background: var(--pagina); border-top: 1px solid var(--rand); box-shadow: 0 -6px 16px #1d26300d;
}
/* Ruimte onderaan voor de grote knop boven de onderbalk (en de oranje balk erboven als die er is). */
html.rk-aan.tel body.app { padding-bottom: calc(var(--onderbalk-hoogte) + 86px + env(safe-area-inset-bottom)); }
html.rk-aan.tel body.app:has(.rk-voet .zone-ontbreekt:not([hidden])) {
  padding-bottom: calc(var(--onderbalk-hoogte) + 166px + env(safe-area-inset-bottom));
}
.rk-voet .zone-ontbreekt { margin: 0 0 10px; }
.rk-knoppen { display: flex; gap: 8px; }
.rk-knoppen .rk-terug { flex: none; }
.rk-knoppen .rk-volgende, .rk-knoppen .rk-actie { flex: 1; margin: 0; }
.rk-knoppen .rk-actie button[type=submit] { margin-top: 0; min-height: 48px; }
.rk-knoppen .rk-volgende { min-height: 48px; }
html.rk-aan.tel .zone-actie .handeling > p { margin: 0; }

/* --- Het tabblad Telefoon in de bouwer (dashboard_telefoon.html): links het toestel, rechts de keuzes en de volgorde.
   Sinds de fixgolf van ronde 4 een echt toestel (klassen tt-; mockup bijlagen/ronde4-aanpassingen/telefoonkader.html):
   390 × 844, het eiland of het cameragaatje, de statusbalk, de topbalk van Corpus, de widgets die eronder scrollen met
   een dun balkje, de onderbalk doorschijnend vast onderaan en de home-streep. --- */
.bouwertabs { margin-top: 4px; }
.tt-werk { display: grid; grid-template-columns: 404px minmax(0, 1fr); gap: 32px; align-items: start; }
.tt-rechts { display: grid; gap: 18px; min-width: 0; }
.ti-lijst { list-style: none; margin: 0; padding: 0; }
.ti-regel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; margin-bottom: 6px;
  border: 1px solid var(--rand); border-radius: 8px; background: var(--pagina);
}
.ti-regel .greep { cursor: grab; color: var(--zacht); }
.ti-naam { flex: 1 1 10rem; font-weight: 500; }
.ti-plek { display: flex; align-items: center; gap: 6px; margin: 0; }
.ti-plek input { width: 4.5em; }
.ti-plek[hidden] { display: none; }
.ti-verbergen { margin: 0; font-size: 13px; }

.tt-toestel {
  position: relative; box-sizing: border-box; width: 390px; height: 844px; padding: 12px; border-radius: 56px;
  background: #1b1b1a; box-shadow: inset 0 0 0 2px #3a3a38, 0 30px 60px rgba(0, 0, 0, .25), 0 0 0 1px #000;
}
/* De zijknoppen. */
.tt-toestel::before, .tt-toestel::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2c2c2a; }
.tt-toestel::before { left: -3px; top: 150px; height: 60px; }
.tt-toestel::after { right: -3px; top: 200px; height: 90px; }
.tt-scherm {
  position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 44px;
  background: var(--pagina);
}
.tt-eiland { position: absolute; z-index: 3; left: 50%; top: 11px; width: 120px; height: 34px; margin-left: -60px;
  border-radius: 20px; background: #000; }
.tt-status { flex: none; display: flex; justify-content: space-between; align-items: center; height: 50px;
  padding: 0 30px 0 34px; font-size: 15px; font-weight: 500; color: var(--tekst); }
.tt-iconen { display: flex; align-items: center; gap: 6px; }
.tt-bereik { fill: currentColor; }
.tt-batterij { position: relative; width: 24px; height: 12px; box-sizing: border-box; border: 1.5px solid currentColor;
  border-radius: 3px; }
.tt-batterij::after { content: ""; position: absolute; inset: 1.5px 5px 1.5px 1.5px; border-radius: 1px; background: currentColor; }
.tt-topbalk { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 6px 18px 10px;
  border-bottom: 1px solid var(--rand); }
.tt-topbalk b { font-size: 12px; font-weight: 500; letter-spacing: .08em; }
.tt-av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--donker);
  color: #fff; font-size: 12px; }
/* Het scrollgebied: zonder JavaScript een dunne balk, met JavaScript geen balk en het eigen balkje (.tt-balkje). */
.tt-toestel .ti-kader { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 12px 100px; scrollbar-width: thin; }
.tt-toestel.tt-js .ti-kader { scrollbar-width: none; }
.tt-toestel.tt-js .ti-kader::-webkit-scrollbar { display: none; }
.tt-toestel .ti-raster { display: flex; flex-direction: column; gap: 12px; }
.tt-toestel .widget { width: 100%; }
.tt-vak { position: relative; }
.tt-vak[hidden] { display: none; }
.tt-greep { position: absolute; z-index: 2; top: 8px; right: 8px; padding: 2px 6px; border-radius: 6px; background: #ffffffd9;
  color: var(--zacht); font-size: 12px; cursor: grab; }
.tt-balkje { position: absolute; z-index: 3; right: 4px; top: 120px; width: 3px; height: 0; border-radius: 2px;
  background: rgba(0, 0, 0, .28); opacity: 0; transition: opacity .25s; pointer-events: none; }
.tt-balkje.zichtbaar { opacity: 1; }
/* De onderbalk: dezelfde partial en klassen als echt, maar vast onderaan binnen het toestel. */
.tt-onder { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; }
.tt-onder .onderbalk {
  display: grid; grid-template-columns: repeat(var(--ob-n, 4), minmax(0, 1fr)); padding: 6px 12px 26px;
  border-top: 1px solid var(--rand); background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.tt-onder .ob-knop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 52px; color: var(--zacht); font-size: 11px; text-decoration: none; border-radius: 10px; }
.tt-onder .ob-knop .icoon { width: 22px; height: 22px; }
.tt-home { position: absolute; z-index: 3; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px;
  border-radius: 3px; background: #1d1d1b; }
/* Android: rechtere hoeken, een gaatje voor de camera, een streep onderaan. */
.tt-toestel[data-toestel="android"] { border-radius: 30px; padding: 10px; }
.tt-toestel[data-toestel="android"] .tt-scherm { border-radius: 22px; }
.tt-toestel[data-toestel="android"] .tt-eiland { top: 14px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; }
.tt-toestel[data-toestel="android"] .tt-status { height: 40px; padding: 0 22px; font-size: 13px; }
.tt-toestel[data-toestel="android"] .tt-home { width: 110px; height: 4px; margin-left: -55px; background: #5b5b58; }
.tt-verborgen { margin-top: 16px; font-size: 13px; color: var(--zacht); }
.tt-verborgen h3 { margin: 0 0 6px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.tt-verborgen ul { margin: 0; padding-left: 18px; }
/* De keuzes rechts. */
.tt-keuze { padding: 16px 18px; border-radius: var(--hoek); background: var(--pagina); border: 1px solid var(--rand); }
.tt-keuze h3 { margin: 0 0 10px; font-size: 13px; }
.tt-seg { display: inline-flex; gap: 2px; margin: 0 0 12px; padding: 3px; border-radius: 8px; background: var(--vlak); }
.tt-seg[hidden] { display: none; }
.tt-seg a, .tt-seg button { padding: 5px 12px; border: 0; border-radius: 6px; background: none; color: var(--zacht);
  font: inherit; font-size: 12px; text-decoration: none; cursor: pointer; }
.tt-seg .aan { background: var(--pagina); color: var(--tekst); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.tt-persoon { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.tt-persoon label { margin: 0; }
.tt-persoon [hidden] { display: none; }
.tt-noot { margin: 0 0 8px; font-size: 12px; color: var(--zacht); }
/* Per persoon (spec 2026-10-21, mockup E): wat deze persoon ziet en voor wie aanpassen geldt, met de knop Eigen
   dashboard maken; bij een eigen dashboard groen met Terug naar <rol>. Een donkere (of groene) rand links, geen oranje. */
.tt-wie { margin: 4px 0 10px; padding: 12px 14px; border-left: 3px solid var(--donker); border-radius: 4px;
  background: var(--vlak); }
.tt-wie-eigen { border-left-color: var(--goed); background: var(--goed-vlak); }
.tt-wie-zin { margin: 0 0 4px; font-size: 13px; }
.tt-wie-zin b { font-weight: 500; }
.tt-wie-uitleg { padding-top: 8px; border-top: 1px solid var(--rand); }
.tt-wie form { margin: 0; }
@media (max-width: 1100px) { .tt-werk { grid-template-columns: minmax(0, 1fr); } }
/* De Agenda in het toestel en op de telefoon: corpus.css regelt dat op de breedte van het vak (container queries op
   .ag-kader, ronde 6), dus hier niets meer. */
@media (prefers-reduced-motion: reduce) { .tt-balkje { transition: none; } }

/* --- Losse foto's (_uitvoer_telefoon.html op de pagina Uitvoermap; de tegels in de Camera staan in camera.css) --- */
.lf-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0 0 14px;
  padding: 0; list-style: none; }
.lf-tegel { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lf-beeld { display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; overflow: hidden;
  background: var(--grijsvlak); }
.lf-beeld img { width: 100%; height: 100%; object-fit: cover; }
.lf-heic { font-size: 12px; color: var(--zacht); letter-spacing: .1em; }
.lf-kies { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--tekst); }
.lf-download { font-size: 12px; color: var(--zacht); }
.lf-tegel > :is(.lf-kies, .lf-download) { align-self: flex-start; }    /* ronde 6: het klikvlak alleen de tekst */
.lf-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.lf-knoppen button[type=submit] { width: auto; margin-top: 0; }
.lf-alles { display: flex; align-items: center; gap: 8px; min-height: 40px; margin: 0 0 6px; font-size: 13px; }
.lf-alles[hidden], .lf-teller[hidden] { display: none; }
.lf-teller { align-self: center; font-size: 13px; color: var(--zacht); }
html.tel .lf-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* In de reeks staat het model met de foto al in Aanzichten: het grote beeld van zone 2 dan niet nog eens erboven. */
html.rk-met-beeld.tel .zone-item .zone-beeld { display: none; }

/* --- Beheer › Inlogcodes op de telefoon (ronde 6; templates/accounts/inlogcodes.html, static/js/inlogcodes.js). Dezelfde
   tabel, anders gelegd: een geldige code als kaartje (wie en "tot 08:12" bovenaan, de organisatie klein, de code groot in
   tweeën met Kopieer), een dicht account en foute pogingen als regel. Op de computer blijft de tabel; de knop Kopieer en
   de woorden "tot"/"sinds" staan alleen hier (.ic-tel; .ic-pc alleen op de computer). --- */
.ic-tel, .ic-kopieer { display: none; }
html.tel .ic-pc { display: none; }
html.tel .ic-tel { display: inline; }
html.tel .ic-tabel, html.tel .ic-tabel tbody { display: block; }
html.tel .ic-tabel thead { display: none; }
html.tel .ic-tabel tr {
  display: grid; gap: 2px 10px; align-items: center; margin: 0 0 8px; padding: 10px 14px; border-radius: 12px;
  background: var(--pagina);
}
html.tel .ic-tabel tr:last-child { margin-bottom: 0; }
html.tel .melding-rood .ic-tabel { padding: 12px 14px 14px; }    /* het rode paneel heeft zelf geen binnenrand */
html.tel .ic-tabel td { display: block; min-width: 0; padding: 0; border: 0; }
html.tel .ic-wie { grid-area: wie; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
html.tel .ic-org { grid-area: org; font-size: 12px; color: var(--zacht); }
html.tel .ic-kaart { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "wie tot" "org org" "code code"; }
html.tel .ic-tot { grid-area: tot; font-size: 12px; color: var(--zacht); white-space: nowrap; }
html.tel .ic-tabel td.ic-code { grid-area: code; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
html.tel .ic-code .inlogcode {
  padding: 0; background: none; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 26px; font-weight: 500;
  line-height: 1; letter-spacing: .18em;
}
html.tel .ic-code .inlogcode span + span { margin-left: .3em; }
html.tel .ic-kopieer:not([hidden]) { display: inline-flex; flex: none; }
html.tel .ic-regel { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "wie wie actie" "org sinds actie"; }
html.tel .ic-sinds { grid-area: sinds; font-size: 12px; color: var(--zacht); white-space: nowrap; }
html.tel .ic-sinds::before { content: "· "; }
html.tel .ic-actie { grid-area: actie; }
html.tel .ic-regel:has(.ic-fout) { grid-template-areas: "wie wie fout" "org org fout"; }
html.tel .ic-fout { grid-area: fout; color: var(--laat); font-weight: 500; white-space: nowrap; }

/* Ronde 7: projectkaarten met poses (.kp, core/kaartposes.py) twee naast elkaar op de telefoon: dan zijn ze klein (een
   groepje van drie, de witte onderbalk eronder). */
html.tel .kaarten:has(> .kaart.kp) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* Een brede projectkaart (.kp-breed, corpus.css) blijft op de telefoon één kolom breed. */
html.tel :is(.kaarten, .widget-projectkaarten) > .kp-breed { grid-column: auto; }

/* --- Het 3D-model groot op de stap 3D-model (2026-10-14, corpus.css .m3-): op de telefoon één kolom, de vakken zo hoog
   als het scherm het laat, het bestand onder de schakelaar en het sleepvlak lager --- */
html.tel .m3 { --m3-h: 68vh; }
html.tel .m3-vier { grid-template-columns: minmax(0, 1fr); }
html.tel .m3-bestand { margin-left: 0; flex-basis: 100%; }
html.tel .m3-draaivlak { height: 72vh; padding-bottom: 96px; }
html.tel .m3-schuif { width: calc(100% - 24px); }
html.tel .m3-sleep { min-height: 340px; padding-bottom: 24px; }
html.tel .m3-uitvoer { position: static; flex-wrap: wrap; margin-top: 10px; }
html.tel .m3-uitvoer .m3-zet { flex-basis: 100%; }

/* --- De trackerbalk (2026-10-15, mockup tracker-telefoon variant D2; templates/core/_trackerbalk.html, klassen tb-;
   static/js/trackerbalk.js). Alleen als de server de telefoonlaag geeft: alle stappen als rondjes in één breedte op een
   dunne lijn - voltooid donker met een wit vinkje (in CSS, geen teken), de stap van het scherm een bronzen ring met een
   stip, een actieve die je niet bekijkt een donkere ring met stip -; daaronder de buren, Stap n van m, de naam in Gotham
   Light en de rest in kleine kapitalen met spatiëring; een kaart met een zachte schaduw. Uitgeklapt de lijst met datums
   (.tb-lijst) als tweede kaart. --- */
html.tel .tbalk, html.tel .tb-lijst {
  margin: 0 0 10px; background: var(--pagina); border-radius: 14px;
  box-shadow: 0 1px 2px #1d1f210a, 0 6px 22px #1d1f210f;
}
html.tel .tbalk { position: relative; padding: 14px 14px 10px; }
html.tel .zone-waar:has(.tbalk) { margin-bottom: 14px; }
html.tel .tb-rondjes { display: flex; margin: 0; padding: 0; list-style: none; }
html.tel .tb-stap { position: relative; display: flex; flex: 1 1 0; min-width: 0; justify-content: center; }
/* De lijn: per rondje een halve lijn naar links en een naar rechts, achter het rondje; donker tot waar het item is. */
html.tel .tb-stap::before, html.tel .tb-stap::after {
  content: ""; position: absolute; top: 50%; height: 1px; background: #e2e2df;
}
html.tel .tb-stap::before { left: 0; right: 50%; }
html.tel .tb-stap::after { left: 50%; right: 0; }
html.tel .tb-stap:first-child::before, html.tel .tb-stap:last-child::after { display: none; }
html.tel .tb-lijn-vol::before, html.tel .tb-lijn-vol::after, html.tel .tb-lijn-half::before { background: var(--donker); }
html.tel .tb-rondje {
  position: relative; z-index: 1; display: grid; place-items: center; width: 100%; height: 36px; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
html.tel .tb-rondje::before, html.tel .tb-rondje::after { content: ""; grid-area: 1 / 1; box-sizing: border-box; }
html.tel .tb-rondje::before {
  width: 18px; height: 18px; border: 1px solid #d6d6d3; border-radius: 50%; background: var(--pagina);
  transition: box-shadow .15s ease, border-color .15s ease;
}
/* Het vinkje: twee randen van een kleine rechthoek, gedraaid. */
html.tel .tb-voltooid .tb-rondje::before { background: var(--donker); border-color: var(--donker); }
html.tel .tb-voltooid .tb-rondje::after {
  width: 6px; height: 3.2px; border-left: 1.4px solid #fff; border-bottom: 1.4px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
}
html.tel :is(.tb-actief, .tb-kan-starten) .tb-rondje::before { border-color: var(--donker); }
html.tel .tb-actief .tb-rondje::after { width: 6px; height: 6px; border-radius: 50%; background: var(--donker); }
html.tel .tb-vervangen .tb-rondje::before { border-style: dashed; background: var(--vlak); }
html.tel .tb-golden .tb-rondje::before {
  border-color: #b08a2e; background: linear-gradient(135deg, #9c7724, #f0d27e 50%, #9c7724);
}
/* De stap van het scherm (op Overzicht waar het item staat): groter, een bronzen ring met stip en een zachte halo; een
   voltooide houdt zijn vinkje. */
html.tel .tb-hier .tb-rondje::before {
  width: 24px; height: 24px; border-color: var(--let); background: var(--pagina); box-shadow: 0 0 0 5px var(--let-vlak);
}
html.tel .tb-hier .tb-rondje::after {
  width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--let); transform: none;
}
html.tel .tb-hier.tb-voltooid .tb-rondje::before { background: var(--donker); border-color: var(--donker); }
html.tel .tb-hier.tb-voltooid .tb-rondje::after {
  width: 8px; height: 4px; border-radius: 0; background: none; border-left: 1.6px solid #fff;
  border-bottom: 1.6px solid #fff; transform: translateY(-1px) rotate(-45deg);
}
html.tel .tb-rondje.tb-sel::before { border-color: var(--donker); box-shadow: 0 0 0 4px var(--vlak-2); }
html.tel .tb-hier .tb-rondje.tb-sel::before { box-shadow: 0 0 0 5px var(--let-vlak), 0 0 0 6px var(--let); }
html.tel .tb-rondje:focus-visible { outline: none; }
html.tel .tb-rondje:focus-visible::before { outline: 2px solid var(--donker); outline-offset: 3px; }

/* De ballon bij een tik op een rondje (trackerbalk.js zet left, top en --pijl). */
html.tel .tb-ballon {
  position: absolute; z-index: 6; top: 0; left: 0; max-width: calc(100% + 8px); padding: 9px 12px 7px;
  border-radius: 12px; background: var(--donker); color: #fff; font-size: 12px; line-height: 1.35;
  box-shadow: 0 6px 16px #1d1f2133;
}
html.tel .tb-ballon[hidden], html.tel .tb-ballon [hidden] { display: none; }
html.tel .tb-ballon::after {
  content: ""; position: absolute; bottom: -5px; left: calc(var(--pijl, 50%) - 5px); width: 10px; height: 10px;
  background: var(--donker); transform: rotate(45deg);
}
html.tel .tb-ballon.tb-eronder::after { top: -5px; bottom: auto; }
html.tel .tb-ballon b { display: block; font-weight: 400; }
html.tel .tb-ballon .rondelabel { margin-right: 6px; }
html.tel .tb-ballon small { display: block; color: #c9cbcd; font-size: 10.5px; }
html.tel .tb-ballon a {
  display: inline-block; padding: 6px 0 2px; color: #fff; font-size: 10px; letter-spacing: .16em; text-decoration: none;
  text-transform: uppercase;
}

/* Onder de lijn: de buren, Stap n van m, de naam, de stand en de voet. */
html.tel .tb-buren {
  display: flex; justify-content: space-between; gap: 12px; margin: 4px 0 0; font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase;
}
html.tel .tb-buren a {
  display: flex; gap: .4em; max-width: 48%; padding: 4px 0; color: var(--zacht); text-decoration: none; white-space: nowrap;
}
html.tel .tb-buren a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html.tel .tb-nummer {
  margin: 8px 0 0; color: var(--zacht); font-size: 9.5px; letter-spacing: .22em; text-align: center;
  text-transform: uppercase;
}
html.tel .tb-naam {
  margin: 3px 0 0; font-size: 19px; font-weight: 300; letter-spacing: .01em; line-height: 1.25; text-align: center;
  transition: transform .12s ease-out;
}
html.tel .tb-naam .rondelabel { vertical-align: middle; }
html.tel .tb-stand {
  margin: 5px 0 0; color: var(--let); font-size: 9.5px; letter-spacing: .18em; text-align: center;
  text-transform: uppercase;
}
html.tel .tb-teller { margin: 3px 0 0; color: var(--zacht); font-size: 10.5px; text-align: center; }
html.tel .tb-teller b { font-weight: 400; }
html.tel .tb-voet {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; padding-top: 4px;
  border-top: 1px solid var(--vlak); color: var(--zacht); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
}
html.tel .tb-laat { color: var(--laat); }
/* Dicht de gewenste datum van de stap (anders n te laat); open n te laat (anders de gewenste datum). */
html.tel .tb-datum:has(.tb-gewenst) .tb-laat { display: none; }
html.tel .tbalk.is-open .tb-datum .tb-laat { display: inline; }
html.tel .tbalk.is-open .tb-datum:has(.tb-laat) .tb-gewenst { display: none; }
html.tel .tb-pil {
  display: inline-block; padding: 1px 8px; border: 1px solid var(--rand); border-radius: 999px; color: var(--tekst);
  font-size: 10.5px; letter-spacing: 0; text-transform: none; white-space: nowrap;
}
html.tel .tb-pil.laat { border-color: #e8cfcb; color: var(--laat); }
html.tel .tb-alle {
  margin-left: auto; padding: 10px 0 8px 12px; color: var(--tekst); text-decoration: none; white-space: nowrap;
}
html.tel .tb-pijltje {
  display: inline-block; width: 5px; height: 5px; margin: 0 2px 3px 7px; border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor; transform: rotate(45deg); vertical-align: middle; transition: transform .15s ease;
}
html.tel .tbalk.is-open .tb-pijltje { margin-bottom: -1px; transform: rotate(-135deg); }
html.tel .tbalk.is-laden .tb-alle { opacity: .5; }

/* De lijst met datums (_trackerbalk_lijst.html): per stap het rondje, de naam en gewenst → toegezegd. */
html.tel .tb-lijst { padding: 4px 14px; }
html.tel .tb-lijst[hidden] { display: none; }
html.tel .tb-kop { margin: 8px 0 2px; color: var(--zacht); font-size: 11px; }
html.tel .tb-lijst .planning-wijzig { margin: 0 0 4px; font-size: 12px; }
html.tel .tb-regels { margin: 0; padding: 0; list-style: none; }
html.tel .tb-regel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; padding: 9px 0; border-bottom: 1px solid var(--vlak);
  font-size: 12px; font-weight: 300;
}
html.tel .tb-regel:last-child { border-bottom: 0; }
html.tel .tb-onder { flex-basis: 100%; padding-left: 24px; font-size: 10.5px; line-height: 1.35; color: var(--zacht); }   /* spec 2026-10-23: de herkomst */
html.tel .tb-bol {
  display: grid; flex: 0 0 14px; place-items: center; box-sizing: border-box; width: 14px; height: 14px;
  border: 1px solid #d6d6d3; border-radius: 50%;
}
html.tel .tb-bol.tb-voltooid { background: var(--donker); border-color: var(--donker); }
html.tel .tb-bol.tb-voltooid::after {
  content: ""; width: 5px; height: 2.6px; border-left: 1.3px solid #fff; border-bottom: 1.3px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
}
html.tel .tb-bol:is(.tb-actief, .tb-kan-starten) { border-color: var(--donker); }
html.tel .tb-bol.tb-vervangen { border-style: dashed; }
html.tel .tb-bol.tb-golden { border-color: #b08a2e; background: linear-gradient(135deg, #9c7724, #f0d27e 50%, #9c7724); }
html.tel .tb-gemarkeerd .tb-bol:not(.tb-voltooid) { border-color: var(--let); box-shadow: 0 0 0 3px var(--let-vlak); }
html.tel .tb-regelnaam { flex: 1 1 0; min-width: 0; color: var(--tekst); text-decoration: none; }
html.tel .tb-gemarkeerd .tb-regelnaam { color: var(--let); font-weight: 400; }
html.tel .tb-datums {
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; margin-left: auto;
  font-size: 10.5px; white-space: nowrap;
}
html.tel .tb-klaar, html.tel .tb-naar { color: var(--zacht); }
html.tel .tb-datums .dk-pil { padding: 2px 8px 2px 7px; font-size: 10.5px; }
html.tel .tb-datums .dk-icoon { width: 11px; height: 11px; }
@media (prefers-reduced-motion: reduce) {
  html.tel .tb-naam, html.tel .tb-pijltje, html.tel .tb-rondje::before { transition: none; }
}

/* --- Telefoontest 19 okt 2026 (de bevindingen A1-A7, B1-B9 van het rapport): herstel op de telefoonlaag --- */
/* A1 Bestanden: de achterkant van een bestandstegel legde naam, datum en drie links in één rij; de tekst kreeg 0 px en
   brak letter voor letter (de tegel werd 1200 px hoog). De links nu onder de tekst, op een eigen regel en ruim tikbaar. */
html.tel .omdraai-achter.bestandstegel { flex-wrap: wrap; align-items: flex-start; gap: 0 14px; }
html.tel .omdraai-achter.bestandstegel > .tegel-tekst { flex: 1 1 100%; }
html.tel .omdraai-achter.bestandstegel > a {
  display: inline-flex; align-items: center; min-height: 40px; margin: 0; font-size: 13px;
}
html.tel .omdraai-voor.bestandstegel { align-items: center; }   /* de voorkant rekt mee met de achterkant: de naam in het midden */

/* D1 De kop van een paneel (spec 2026-10-21, *altijd netjes*; mockup telefoon-eenvoudiger D1; vervangt A2/B2 van de
   telefoontest): de titel breekt nooit midden in een woord en staat op één regel, zo nodig met …; het nummer rechts
   ernaast; de pillen (de samenvatting, de stand van Op te leveren, een noot) op een eigen regel eronder, links onder de
   titel, en die mogen daar zelf afbreken (ook wat een kop verder heeft, zoals Kaarten/Lijst). Zonder pillen blijft de kop één regel hoog. De regel breekt met een leeg
   ::after van de volle breedte (order 3); het pijltje van een inklapbaar paneel staat in de linkerrand, zodat de pillen
   onder de titel beginnen. :is() weegt zwaar genoeg tegen de ingeklapte-kopopmaak van corpus.css (.klap-aan .klap > .pkop). */
html.tel :is(.pkop, .klap-aan .klap > .pkop) {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; column-gap: 10px; row-gap: 0;
}
html.tel :is(.pkop, .klap-aan .klap > .pkop) > .pkop-pijl { order: 0; }
html.tel :is(.pkop, .klap-aan .klap > .pkop) > .pkop-titel {
  order: 1; flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; overflow-wrap: normal;
}
html.tel :is(.pkop, .klap-aan .klap > .pkop) > .pkop-nummer { order: 2; flex: none; margin-left: 0; }
html.tel :is(.pkop, .klap-aan .klap > .pkop)::after { content: ""; order: 3; flex: 0 0 100%; height: 0; }
html.tel :is(.pkop, .klap-aan .klap > .pkop) > :not(.pkop-pijl, .pkop-titel, .pkop-nummer) {
  order: 4; flex: 0 1 auto; max-width: 100%; margin: 6px 6px 0 0; text-align: left; white-space: normal;
}
html.tel :is(.pkop, .klap-aan .klap > .pkop) > .pkop-samen .pkop-pil { white-space: normal; }
html.tel .klap-aan .klap > .pkop { padding-left: 36px; }
html.tel .klap-aan .klap > .pkop > .pkop-pijl { margin-left: -50px; }
/* B2 Fabrieken: de tabellen (Lopende aanvragen, Komt eraan, R&D met de fabriek) liepen met kolommen van 30-70 px en
   braken "P-/00003". Op de telefoon een kaart per regel: de pose bovenaan, de gegevens met hun kopje in twee kolommen,
   Openen onderaan. De kopjes komen uit de th van de tabel (data-kop). */
html.tel .fbk-tabel, html.tel .fbk-tabel tbody { display: block; }
html.tel .fbk-tabel thead { display: none; }
html.tel .fbk-tabel tr {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 0 0 8px; padding: 10px 12px;
  border-radius: 10px; background: var(--pagina);
}
html.tel .fbk-tabel tr:last-child { margin-bottom: 0; }
html.tel .fbk-tabel td { display: block; min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; }
html.tel .fbk-tabel td:is(:first-child, :last-child) { grid-column: 1 / -1; }
html.tel .fbk-tabel td:empty { display: none; }
html.tel .fbk-tabel td[data-kop]::before {
  content: attr(data-kop); display: block; margin: 0 0 2px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--zacht);
}
html.tel .fbk-tabel td:last-child a { display: inline-flex; align-items: center; min-height: 40px; }

/* A4 Itemkop: titel, codes en stapnaam (drie keer: kruimelpad, kop en het blok van de tracker) vormden één breed
   gespatieerde kop van 4-7 regels, zodat op een iPhone SE bij het openen van een stap nog niets van de stap te zien was.
   Op de telefoon, alleen in de kop van het itemscherm (.schermkop): de codes klein op één regel onder de titel, in een
   reeks staat de stapnaam alleen nog in het trackerblok (de h2 blijft er voor een schermlezer; de rolnaam blijft klein
   zichtbaar), en de kop neemt minder lucht. */
html.tel .schermkop { gap: 8px 12px; margin-bottom: 12px; }
html.tel .schermkop .kruimels { margin-bottom: 4px; }
html.tel .schermkop .titel { gap: 0 10px; }
html.tel .schermkop .titel h1 { font-size: 24px; letter-spacing: -1px; margin-bottom: 4px; }
html.tel .schermkop .titel-deel, html.tel .schermkop .titel .stapkop { font-size: 11px; letter-spacing: .1em; }
html.tel .schermkop .titel .stapkop .muted { margin-left: 4px; font-size: 11px; }
/* In een reeks: de naam van de stap is al het trackerblok. Letters op 0 px (de tekst blijft voor een schermlezer), de rolnaam klein. */
html.rk-aan.tel .schermkop .titel .stapkop { font-size: 0; letter-spacing: 0; }
html.rk-aan.tel .schermkop .titel .stapkop::before { content: none; }
html.rk-aan.tel .schermkop .titel .stapkop .muted { margin-left: 0; font-size: 11px; letter-spacing: .04em; }
html.tel .kopregel { margin-top: 6px; }
html.tel .schermkop-acties { margin-top: 0; }

/* B1 Agenda, Komt eraan: `.widget .meta` is nowrap (corpus.css) en won van de regel in de kaart: "Klant · 4 items · gewenst klaar
   28 okt" liep over de kaartrand en maakte de pagina 379 px breed. Op de telefoon breekt de regel af. */
html.tel .widget .ag-rijtekst .meta { white-space: normal; overflow-wrap: anywhere; }

/* B7 Projectkaart (fabrieksportaal en projecten): de balk onder de kaart heeft de pil ("1 waiting for you", nowrap) en het
   aantal poses naast elkaar; in een smalle kaart lag de pil over "4 POSES". Op de telefoon gaat het aantal naar een
   tweede regel als ze niet naast elkaar passen. */
html.tel .kp-balk { flex-wrap: wrap; justify-content: flex-end; row-gap: 2px; }

/* A7 Route (de opvulling van de eerste datumkolom in een smal vak) staat sinds 3b taak 8 voor pc en telefoon in corpus.css. */

/* B9 Tikdoelen onder 40 px (telefoontest 19 okt 2026): de trackerbalk (rondjes 36 px hoog, vorige/volgende 22, Alle stappen
   33), de kruimels, de pijl in de kop van een paneel, de melding-pil en de vinkjes van Controle (20). Hoogte tot 40 px; de
   breedte van een rondje blijft die van een twaalfde van de balk (24-31 px: twaalf stappen op 292 px). */
html.tel .tb-rondje { height: 40px; }
html.tel .tb-buren a { align-items: center; min-height: 40px; padding: 0; }
html.tel .tb-alle { display: inline-flex; align-items: center; min-height: 40px; padding: 0 0 0 12px; }
html.tel .tb-voet { padding-top: 0; }
html.tel .schermkop .kruimels a { display: inline-block; padding: 14px 0; margin: -14px 0; }   /* tikvlak groter, de regel niet */
html.tel .pkop-pijl { width: 40px; height: 40px; margin: -8px 0 -8px -14px; }
html.tel .melding-pil { min-height: 40px; }
html.tel button[type=submit].vinkje-knop { flex: 1 1 auto; min-height: 44px; }
html.tel .vinkje:has(> .vinkje-formulier) { padding-block: 0; }   /* alleen de rij met een knop (Controle), niet elk .vinkje */

/* B10 Ontwikkeling, Planning: het Gantt-vak (790 px) scrolt zijwaarts in een kader van 328 px zonder dat je dat ziet. Op de
   telefoon: smallere naamkolom die blijft staan terwijl je scrolt, een kleiner raster en schaduwranden die verraden dat er
   meer is (de rand verdwijnt aan het einde: background-attachment: local). */
html.tel .ow-jaarraster { grid-template-columns: 96px minmax(560px, 1fr); }
html.tel .ow-baannaam { position: sticky; left: 0; z-index: 4; padding-right: 6px; background: var(--vlak); font-size: 11.5px; }
html.tel .ow-gantt {
  background:
    linear-gradient(to right, var(--vlak) 30%, #f4f4f200) 0 0 / 28px 100% no-repeat local,
    linear-gradient(to left, var(--vlak) 30%, #f4f4f200) 100% 0 / 28px 100% no-repeat local,
    linear-gradient(to right, #1d1f2124, #1d1f2100) 0 0 / 14px 100% no-repeat scroll,
    linear-gradient(to left, #1d1f2124, #1d1f2100) 100% 0 / 14px 100% no-repeat scroll,
    var(--vlak);
}
html.tel .ow-zonder > .meta { display: block; max-width: 220px; white-space: normal; }   /* de zin viel buiten het kader */

/* --- Altijd netjes (spec 2026-10-21, mockup telefoon-eenvoudiger D2-D4): vaste regels voor elke widget op de telefoon.
   D1 (de kop van een paneel) staat hierboven, bij de kop van de telefoontest. --- */
/* D2 Gegevensrijen: label en waarde op één basislijn, het label klein en grijs links, de waarde rechts. Past de waarde er
   niet naast (een bestandsnaam, een pad), dan wrapt hij onder het label, links uitgelijnd: space-between met één item op
   de regel legt het links. Eén rij = één lijn eronder. Een .facts heeft daarvoor per rij een <div class="feit">
   (op de pc display: contents, corpus.css); een .inforij is al een rij. */
html.tel .facts:has(> .feit) { display: block; }
html.tel :is(.facts > .feit, .inforij) {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 7px 0;
  border-bottom: 1px solid var(--lijn);
}
html.tel :is(.facts > .feit, .inforij):last-child { border-bottom: 0; }
html.tel :is(.facts > .feit, .inforij) > dt {
  flex: 0 0 auto; max-width: 100%; margin: 0; padding: 0; border: 0; color: var(--zacht); font-size: 12px;
}
html.tel :is(.facts > .feit, .inforij) > dd {
  flex: 0 1 auto; min-width: 0; max-width: 100%; margin: 0; padding: 0; border: 0; text-align: left; overflow-wrap: anywhere;
}
/* D3 Kaarten in een raster (de bedkaarten van Gcodes en Printbedden): nooit uitgerekt naar de hoogste in de rij en geen
   vaste of minimale hoogte. Eén kolom, twee als ze naast elkaar passen (een breed toestel). */
html.tel .bedkaarten, html.tel .bedkaarten.gcodekaarten {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); align-items: start;
}
html.tel .bedkaarten .bedkaart, html.tel .gcodekaarten .omdraai-voor.bedkaart { min-height: 0; height: auto; }
/* Elke kaart die omdraait (bedkaarten, de tegels van Bestanden, de Orca-kaart): de kant die je niet ziet staat buiten de
   stroom, zodat de kaart zo hoog is als de kant die je wel ziet - geen wit vlak zo hoog als de achterkant. */
html.tel .kan-draaien:not(.om) .omdraai-achter { position: absolute; top: 0; left: 0; width: 100%; }
html.tel .kan-draaien.om .omdraai-voor { position: absolute; top: 0; left: 0; width: 100%; }
/* D4 Vaste balken onderaan (de balk van het gekozen onderdeel van het figuur, en alles met data-vaste-balk): de pagina
   krijgt onderaan zoveel ruimte als de balk hoog is (static/js/appgevoel.js meet hem: --balk-h), zodat de laatste regel
   van de laatste widget altijd boven de balk kan komen. Zonder script de vaste 86 px van daarvoor. */
html.tel body.app:has([data-vaste-balk]:not([hidden])) {
  padding-bottom: calc(var(--onderbalk-hoogte) + var(--balk-h, 86px) + env(safe-area-inset-bottom));
}

/* --- De rustige kop van het itemscherm (spec 2026-10-21, mockup telefoon-eenvoudiger B en C; templates/core/_itemkop.html,
   core/itemkop.py, static/js/itemkop.js; klassen ik-). Alleen als de server de telefoonlaag geeft (en intern), dus altijd
   met html.tel. Boven Terug en ⋯ Meer, de naam op één regel, de codes met de pil van de versie, één statusregel, één
   grote knop en de voortgangsbalk; daaronder de tabbladen Werk · Item · Gesprek, die bij scrollen plakken onder een kop
   van één regel. --- */
html.tel .itemscherm.ik-aan { display: block; }
/* Een anker (#ik-admin, #ik-versies) komt onder de hele plakstapel: de bovenbalk, de kop van één regel en de tabbladen
   (review M3: anders verdween de blokkop onder de kop van één regel). */
html.tel:has(.ik-plak) { scroll-padding-top: calc(52px + env(safe-area-inset-top) + var(--ik-mini-h, 56px) + 64px); }
html.tel .ik-kop { margin: 0 0 14px; }
html.tel .ik-boven { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -8px 0 4px; }
html.tel .ik-boven > .kruimelrij { margin: 0; }
html.tel .kruimelrij.kort { margin: 0; }
html.tel .kruimelrij.kort .terug {
  width: auto; height: 40px; gap: 4px; padding: 0 10px 0 0; border: 0; border-radius: 0; background: none; color: var(--zacht);
  font-size: 14px;
}
html.tel .kruimelrij.kort .terug:hover { background: none; transform: none; }
html.tel .kruimelrij.kort .terug .icoon { width: 18px; height: 18px; margin-left: -4px; }
html.tel .terug-woord { line-height: 1; }
/* ⋯ Meer, met een bronzen stip als er administratie in te vullen is. */
html.tel .ik-meer { position: relative; flex: none; }
html.tel .ik-meer > summary { list-style: none; }
html.tel .ik-meer > summary::-webkit-details-marker { display: none; }
html.tel .ik-meerknop {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0 0 6px; border: 1px solid var(--rand);
  border-radius: 50%; background: var(--pagina); color: var(--tekst); font: inherit; font-size: 20px; line-height: 1;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.tel .ik-meer[open] > .ik-meerknop { border-color: var(--donker); background: var(--donker); color: var(--pagina); }
html.tel .ik-meerstip {
  position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--let);
  box-shadow: 0 0 0 2px var(--pagina);
}
/* De naam op één regel, de codes klein, de pil van de versie rechts. */
html.tel .ik-naam {
  margin: 0; overflow: hidden; font-size: 24px; font-weight: 300; letter-spacing: -.4px; line-height: 1.25; white-space: nowrap;
  text-overflow: ellipsis;
}
html.tel .ik-codes {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; margin: 2px 0 0;
  color: var(--zacht); font-size: 12px;
}
html.tel .ik-codetekst { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html.tel .ik-versiepil {
  flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 11px; border-radius: 999px;
  background: var(--vlak-2); color: var(--tekst); font-size: 12px; text-decoration: none; white-space: nowrap;
}
html.tel .ik-pijltje {
  width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
/* De statusregel: de afdeling en de stand, met een stip (brons aan de beurt, donker voltooid, open nog niet). */
html.tel .ik-status { display: flex; align-items: baseline; gap: 6px; margin: 12px 0 0; color: var(--zacht); font-size: 14px; }
html.tel .ik-status b { font-weight: 500; color: var(--tekst); }
html.tel .ik-stand { min-width: 0; }
html.tel .ik-stip {
  flex: none; align-self: center; box-sizing: border-box; width: 10px; height: 10px; border: 1.5px solid #c9c9c7;
  border-radius: 50%;
}
html.tel .ik-stip.let { border-color: var(--let); background: var(--let); box-shadow: 0 0 0 3px var(--let-vlak); }
html.tel .ik-stip.klaar { border-color: var(--donker); background: var(--donker); }
html.tel .ik-kop .namens { margin: 4px 0 0; color: var(--zacht); font-size: 12px; }
/* Eén grote knop: de actie van de stap; in de leesstand een rustige regel. */
html.tel .ik-kop .zone-actie { margin: 12px 0 0; text-align: left; }
html.tel .ik-kop .zone-actie .handeling { display: block; }
html.tel .ik-kop .zone-actie .handeling form { margin: 0; }
html.tel .ik-kop .zone-actie button[type=submit]:not(.link) {
  width: 100%; min-height: 52px; margin: 0; padding: 8px 16px; border-radius: var(--hoek); font-size: 12px; letter-spacing: .16em;
  line-height: 1.4;
}
html.tel .ik-kop .zone-actie .ligt-bij {
  margin: 0; padding: 12px 14px; border-radius: var(--hoek); background: var(--vlak); color: var(--zacht); font-size: 13px;
}

/* De voortgangsbalk: de trackerbalk (_trackerbalk.html) anders opgemaakt. Dicht: links Stap n van m, rechts de naam met een
   pijltje, eronder een streepje per stap (voltooid donker, de stap van het scherm brons, een open stap grijs); de hele balk
   is de link Alle stappen (zonder JavaScript ?planning=1). Open: de buren, de rondjes met hun ballon, de teller van Op te
   leveren, gewenst of te laat en Dicht, en eronder de lijst met alle stappen (#tb-lijst). Vegen over de balk: trackerbalk.js. */
html.tel .ik-voortgang { margin: 16px 0 0; }
html.tel .ik-voortgang .tbalk {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 12px; margin: 0; padding: 0;
  background: none; border-radius: 0; box-shadow: none;
}
html.tel .ik-voortgang .tb-nummer { grid-area: 1 / 1; margin: 0; text-align: left; letter-spacing: .18em; }
html.tel .ik-voortgang .tb-naam {
  grid-area: 1 / 2; display: flex; justify-content: flex-end; align-items: center; gap: 8px; min-width: 0; margin: 0;
  overflow: hidden; font-size: 13px; font-weight: 400; text-align: right; white-space: nowrap; text-overflow: ellipsis;
}
html.tel .ik-voortgang .tb-naam::after {
  content: ""; flex: none; width: 6px; height: 6px; margin: 0 2px 4px 0; border-right: 1.2px solid currentColor;
  border-bottom: 1.2px solid currentColor; transform: rotate(45deg); transition: transform .15s ease;
}
html.tel .ik-voortgang .tbalk.is-open .tb-naam::after { margin-bottom: -2px; transform: rotate(-135deg); }
html.tel .ik-voortgang .tb-rondjes { grid-column: 1 / -1; gap: 4px; margin: 8px 0 0; }
html.tel .ik-voortgang .tb-stap::before, html.tel .ik-voortgang .tb-stap::after { display: none; }
html.tel .ik-voortgang .tb-rondje { height: 10px; place-items: center stretch; }
/* Het streepje: .tb-stap.tb-stap weegt zwaarder dan de rondjes van de trackerbalk hierboven (.tb-hier.tb-voltooid). */
html.tel .ik-voortgang .tb-stap.tb-stap .tb-rondje::before {
  width: 100%; height: 4px; border: 0; border-radius: 2px; background: var(--vlak-2); box-shadow: none;
}
html.tel .ik-voortgang .tb-stap.tb-stap .tb-rondje::after { display: none; }
html.tel .ik-voortgang .tb-stap.tb-voltooid .tb-rondje::before { background: var(--donker); }
html.tel .ik-voortgang .tb-stap:is(.tb-actief, .tb-kan-starten) .tb-rondje::before { background: #9b9da0; }
html.tel .ik-voortgang .tb-stap.tb-vervangen .tb-rondje::before {
  background: repeating-linear-gradient(90deg, #c9c9c7 0 4px, transparent 4px 7px);
}
html.tel .ik-voortgang .tb-stap.tb-golden .tb-rondje::before { background: linear-gradient(90deg, #9c7724, #f0d27e 50%, #9c7724); }
html.tel .ik-voortgang .tb-stap.tb-hier .tb-rondje::before { background: var(--let); }
html.tel .ik-voortgang .tb-stap.tb-stap .tb-rondje.tb-sel::before { box-shadow: 0 0 0 2px var(--pagina), 0 0 0 3px var(--donker); }
html.tel .ik-voortgang .tb-stand { display: none; }                     /* staat al in de statusregel */
html.tel .ik-voortgang :is(.tb-buren, .tb-teller, .tb-datum) { grid-column: 1 / -1; }
html.tel .ik-voortgang .tb-teller { margin: 6px 0 0; text-align: left; }
html.tel .ik-voortgang .tb-voet { grid-column: 1 / -1; margin-top: 6px; }
/* Dicht: de buren, de teller en de voet weg; Alle stappen ligt als onzichtbare link over de hele balk. */
html.tel .ik-voortgang .tbalk:not(.is-open) :is(.tb-buren, .tb-teller, .tb-datum) { display: none; }
html.tel .ik-voortgang .tbalk:not(.is-open) .tb-voet { display: block; height: 0; margin: 0; padding: 0; border: 0; }
html.tel .ik-voortgang .tbalk:not(.is-open) .tb-alle {
  position: absolute; inset: -6px 0; z-index: 2; min-height: 0; padding: 0; overflow: hidden; color: transparent;
  font-size: 0;
}
html.tel .ik-voortgang .tbalk:not(.is-open) .tb-alle .tb-pijltje { display: none; }
html.tel .ik-voortgang .tb-lijst { margin: 8px 0 0; padding: 0; background: none; border-radius: 0; box-shadow: none; }
html.tel .ik-voortgang .tb-gemarkeerd {
  margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 8px; background: var(--let-vlak);
}
/* Aanvullingen 21 okt (B, mockup bijlagen/telefoon-stappen optie 2, het vel uit optie 3): opengeklapt alleen de streepjes,
   een rij tikbare rondjes (_trackerbalk_cirkels.html: de stap van het scherm omcirkeld, de naam eronder) en ‹ Vorige ·
   Alle stappen en datums › · Volgende ›; geen teller, geen gewenst en geen Dicht - een tik op de kopregel klapt dicht.
   Alle stappen en datums is een blad van onderen (blad.js, zoals ⋯ Meer) met Stap n van m en ✕, Vorige en Volgende met
   hun naam, de rondjes en de lijst met datums en toezeggen. */
html.tel .ik-voortgang :is(.tb-cirkels, .tb-c-naam) { display: none; }
html.tel .ik-voortgang .tbalk.is-open :is(.tb-teller, .tb-datum, .tb-ballon) { display: none; }
html.tel .ik-voortgang .tbalk.is-open .tb-rondjes { pointer-events: none; }
html.tel .ik-voortgang .tbalk.is-open .tb-voet { display: block; height: 0; margin: 0; padding: 0; border: 0; }
html.tel .ik-voortgang .tbalk.is-open .tb-alle {
  position: absolute; top: -6px; left: 0; right: 0; z-index: 2; height: 34px; min-height: 0; padding: 0; overflow: hidden;
  color: transparent; font-size: 0;
}
html.tel .ik-voortgang .tbalk.is-open .tb-alle .tb-pijltje { display: none; }
html.tel .ik-voortgang .tbalk.is-open > .tb-cirkels, html.tel .ik-voortgang .tb-velvak .tb-cirkels {
  display: flex; grid-column: 1 / -1; margin: 12px 0 0; padding: 0; list-style: none;
}
html.tel .ik-voortgang .tbalk.is-open > .tb-c-naam {
  display: block; grid-column: 1 / -1; margin: 6px 0 0; overflow: hidden; font-size: 15px; font-weight: 500; text-align: center;
  white-space: nowrap; text-overflow: ellipsis;
}
html.tel .tb-c { position: relative; display: flex; flex: 1 1 0; min-width: 0; justify-content: center; }
html.tel .tb-c::before, html.tel .tb-c::after { content: ""; position: absolute; top: 50%; height: 1px; background: #e2e2df; }
html.tel .tb-c::before { left: 0; right: 50%; }
html.tel .tb-c::after { left: 50%; right: 0; }
html.tel .tb-c:first-child::before, html.tel .tb-c:last-child::after { display: none; }
html.tel .tb-c.tb-lijn-vol::before, html.tel .tb-c.tb-lijn-vol::after, html.tel .tb-c.tb-lijn-half::before { background: var(--donker); }
html.tel .tb-c-bol {
  position: relative; z-index: 1; display: grid; place-items: center; width: 100%; height: 40px; color: var(--zacht);
  font-size: 11px; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
html.tel .tb-c-bol > span[aria-hidden], html.tel .tb-c-bol::after { grid-area: 1 / 1; }
html.tel .tb-c-bol > span[aria-hidden] {
  display: grid; place-items: center; box-sizing: border-box; width: min(28px, 100%); aspect-ratio: 1; border: 1px solid #d6d6d3;
  border-radius: 50%; background: var(--pagina); line-height: 1;
}
html.tel :is(.tb-actief, .tb-kan-starten) > .tb-c-bol { color: var(--tekst); }
html.tel :is(.tb-actief, .tb-kan-starten) > .tb-c-bol > span[aria-hidden] { border-color: var(--donker); }
html.tel .tb-vervangen > .tb-c-bol > span[aria-hidden] { border-style: dashed; background: var(--vlak); }
/* Voltooid: donker met een wit vinkje (het nummer weg); goud bij het golden sample. */
html.tel :is(.tb-voltooid, .tb-golden) > .tb-c-bol { color: transparent; }
html.tel .tb-voltooid > .tb-c-bol > span[aria-hidden] { border-color: var(--donker); background: var(--donker); }
html.tel .tb-golden > .tb-c-bol > span[aria-hidden] { border-color: #b08a2e; background: linear-gradient(135deg, #9c7724, #f0d27e 50%, #9c7724); }
html.tel :is(.tb-voltooid, .tb-golden) > .tb-c-bol::after {
  content: ""; width: 4px; height: 8px; margin-top: -2px; border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff;
  transform: rotate(45deg);
}
/* De stap van het scherm: omcirkeld in brons, iets groter. */
html.tel .tb-c.tb-hier > .tb-c-bol { color: var(--let); font-size: 13px; font-weight: 500; }
html.tel .tb-c.tb-hier > .tb-c-bol > span[aria-hidden] {
  width: min(32px, 100%); border: 1.5px solid var(--let); box-shadow: 0 0 0 3px var(--let-vlak);
}
html.tel .tb-c.tb-hier.tb-voltooid > .tb-c-bol > span[aria-hidden] { border-color: var(--donker); }
html.tel .tb-c-bol:focus-visible { outline: none; }
html.tel .tb-c-bol:focus-visible > span[aria-hidden] { outline: 2px solid var(--donker); outline-offset: 2px; }
/* ‹ Vorige · Alle stappen en datums › · Volgende › */
html.tel .ik-voortgang .tb-knoppen {
  display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 4px; margin: 12px 0 0;
  font-size: 13.5px; letter-spacing: 0; text-transform: none;
}
html.tel .ik-voortgang .tbalk:not(.is-open) .tb-knoppen { display: none; }
html.tel .tb-knop {
  display: inline-flex; flex: none; align-items: center; min-height: 40px; max-width: none; padding: 0 11px;
  border-radius: 999px; background: var(--vlak); color: var(--tekst); text-decoration: none; white-space: nowrap;
}
html.tel .tb-knop.tb-knop-uit { visibility: hidden; }
html.tel .tb-vel { flex: 0 1 auto; min-width: 0; }
html.tel .tb-vel > summary { list-style: none; }
html.tel .tb-vel > summary::-webkit-details-marker { display: none; }
html.tel .tb-velknop {
  display: block; min-height: 40px; overflow: hidden; color: var(--let); line-height: 40px; cursor: pointer;
  white-space: nowrap; text-overflow: ellipsis; -webkit-tap-highlight-color: transparent;
}
/* Het vel */
html.tel .tb-velvak { padding-bottom: calc(14px + env(safe-area-inset-bottom)); font-size: 14px; letter-spacing: 0; text-transform: none; }
html.tel .tb-velkop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
html.tel .tb-velkop .tb-nummer { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-align: left; }
html.tel .tb-velx {
  display: grid; place-items: center; width: 40px; height: 40px; margin: -8px -10px -8px 0; color: var(--tekst);
  font-size: 24px; font-weight: 300; text-decoration: none;
}
html.tel .tb-velburen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html.tel .tb-velbuur {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 56px; padding: 8px 14px; border-radius: 12px;
  background: var(--vlak); color: var(--tekst); text-decoration: none;
}
html.tel .tb-velbuur.tb-knop-uit { visibility: hidden; }
html.tel .tb-velbuur-volgende { justify-content: flex-end; text-align: right; }
html.tel .tb-velbuur > span:not(.tb-velpijl) { display: flex; flex-direction: column; min-width: 0; }
html.tel .tb-velbuur b { font-weight: 400; font-size: 15px; }
html.tel .tb-velbuur small { overflow: hidden; color: var(--zacht); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
html.tel .tb-velpijl { flex: none; font-size: 20px; line-height: 1; }
html.tel .ik-voortgang .tb-velvak .tb-cirkels { margin: 12px 0 0; }
html.tel .ik-voortgang .tb-velvak .tb-lijst { margin: 4px 0 0; border-top: 0; }
html.tel .ik-voortgang .tb-velvak .tb-kop { margin: 6px 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--rand); font-size: 13px; }
html.tel .ik-voortgang .tb-velvak .tb-regel { cursor: pointer; }
html.tel .ik-einde { display: block; height: 0; }

/* De tabbladen: Werk · Item · Gesprek (?tab=, itemkop.js wisselt zonder laden). Ze plakken onder de bovenbalk; bij scrollen
   komt daarboven de kop van één regel (.ik-mini, .ik-klein: terug, de naam met de statusregel, ⋯). */
html.tel .ik-plak {
  position: sticky; top: calc(52px + env(safe-area-inset-top)); z-index: 18; margin: 0 -16px 14px; padding: 6px 16px 8px;
  background: var(--pagina); transition: top .18s ease;
}
html.tel .ik-plak.ik-klein { top: calc(52px + env(safe-area-inset-top) + var(--ik-mini-h, 56px)); border-bottom: 1px solid var(--rand); }
html.tel .ik-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--vlak); }
html.tel .ik-tab {
  display: flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 40px;
  border-radius: 9px; color: var(--zacht); font-size: 14px; text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
html.tel .ik-tab[aria-selected="true"] { background: var(--pagina); color: var(--tekst); font-weight: 500; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
html.tel .ik-klein .ik-tabs { padding: 0; border-radius: 0; background: none; }
html.tel .ik-klein .ik-tab { border-radius: 0; border-bottom: 2px solid transparent; }
html.tel .ik-klein .ik-tab[aria-selected="true"] { border-bottom-color: var(--donker); background: none; box-shadow: none; }
html.tel .ik-teller {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--let); color: var(--pagina); font-size: 11px; font-weight: 500;
}
html.tel .ik-mini {
  position: fixed; z-index: 19; top: calc(52px + env(safe-area-inset-top)); left: 0; right: 0; display: flex; align-items: center;
  gap: 8px; height: var(--ik-mini-h, 56px); padding: 0 12px 0 10px; background: var(--pagina);
}
html.tel .ik-mini[hidden] { display: none; }
html.tel .ik-mini .terug-woord { display: none; }
html.tel .ik-mini .kruimelrij.kort .terug { width: 36px; padding: 0; justify-content: center; color: var(--tekst); }
html.tel .ik-mini-tekst { display: flex; flex: 1; flex-direction: column; min-width: 0; margin: 0; line-height: 1.25; }
html.tel .ik-mini-tekst b { overflow: hidden; font-size: 16px; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
html.tel .ik-mini-tekst small { overflow: hidden; color: var(--zacht); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }

/* Wat bij een ander tabblad hoort, staat er niet. */
html.tel .ik-aan:not(.ik-tab-werk) :is(.zone-werk, .zone-breed) { display: none; }
html.tel .ik-aan:not(.ik-tab-item) .ik-vak-item { display: none; }
html.tel .ik-aan:not(.ik-tab-gesprek) .ik-vak-gesprek { display: none; }
html.tel .ik-vak { display: flex; flex-direction: column; gap: 14px; }
html.tel .ik-vak > * { margin: 0; }
/* Item: de blokken Administratie en Versies & revisies als panelen, Administratie in brons als er iets ontbreekt. */
html.tel .ik-blok { padding: 16px; border-radius: var(--hoek); background: var(--vlak); }
html.tel .ik-blok.let { background: var(--let-vlak); }
html.tel .ik-blokkop { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
html.tel .ik-blokkop h2 { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
html.tel .ik-admin .inforijen { margin: 0; }
html.tel .ik-blokicoon { display: grid; color: var(--tekst); }
html.tel .ik-blokicoon .icoon { width: 20px; height: 20px; }
html.tel .ik-blok.let .ik-blokicoon { color: var(--let); }
html.tel .ik-pillen { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
html.tel .ik-pil {
  display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--vlak-2); color: var(--tekst); font-size: 12px;
  white-space: nowrap;
}
html.tel .ik-pil.let { background: #efe3cf; color: var(--let); }
html.tel .ik-blok.let .ik-pil.let { background: var(--pagina); }
html.tel .ik-blok .inforij { font-size: 13px; }
html.tel .ik-blokvoet { margin: 8px 0 0; text-align: right; font-size: 13px; }
html.tel .ik-blokvoet a { color: var(--tekst); }
html.tel .ik-versies .versiebalk { margin: 0; }
html.tel .ik-versies .tracker-vorige { margin: 10px 0 0; }
/* Gesprek: de kaartjes van de open vragen, Vraag stellen als brede gestippelde knop, en Alle vragen. */
html.tel .ik-vak-gesprek .vr-kaart { margin: 0; padding: 14px; border: 1px solid var(--rand); border-radius: 12px; background: var(--pagina); }
html.tel .ik-vak-gesprek .vr-antw > summary {
  display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: var(--hoek-knop);
  background: var(--donker); color: var(--pagina); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; list-style: none; cursor: pointer;
}
html.tel .ik-vak-gesprek .vr-antw > summary::-webkit-details-marker { display: none; }
html.tel .ik-vak-gesprek .vr-acties { flex-wrap: wrap; }
html.tel .ik-vak-gesprek .vr-antw { flex: 1 1 100%; }
html.tel .ik-vak-gesprek .vr-kop { display: block; }
html.tel .ik-vak-gesprek .vr-stellen > .vr-knop {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; border: 1px dashed #c9c9c7;
  border-radius: var(--hoek); background: none; color: var(--zacht);
}
html.tel .ik-vak-gesprek .vr-stellen > .vr-knop::before { content: "+ "; white-space: pre; }
html.tel .ik-leeg { margin: 0; padding: 14px; border-radius: var(--hoek); background: var(--vlak); color: var(--zacht); font-size: 13px; }
html.tel .ik-gesprekvoet { margin: 0; color: var(--zacht); font-size: 13px; text-align: center; }
html.tel .ik-gesprekvoet a { display: inline-flex; align-items: center; min-height: 40px; color: var(--zacht); }

/* Het vel Meer (_itemkop_meer.html): een blad van onderen (blad.js) met rijen - een icoon in een vierkantje, de naam en een
   regel eronder, rechts een pil en ›. Administratie in brons. Onder een lijn wat de kop verder had. */
html.tel .ik-vel { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
html.tel .ik-velkop {
  margin: 4px 0 6px; color: var(--zacht); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
}
html.tel .ik-rijen { margin: 0; padding: 0; list-style: none; }
html.tel .ik-rijen > li { border-bottom: 1px solid var(--rand); }
html.tel .ik-rijen > li:last-child { border-bottom: 0; }
html.tel .ik-rijen-onder { margin-top: 8px; border-top: 1px solid var(--lijn); }
html.tel .ik-rij {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; margin: 0; padding: 8px 0; border: 0;
  background: none; color: var(--tekst); font: inherit; font-size: 15px; font-weight: 400; letter-spacing: 0; text-align: left;
  text-decoration: none; text-transform: none; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
}
html.tel button[type=submit].ik-rij { margin: 0; color: var(--tekst); background: none; }
html.tel .ik-rij::-webkit-details-marker { display: none; }
html.tel .ik-rijicoon {
  display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--vlak);
}
html.tel .ik-rijicoon .icoon { width: 19px; height: 19px; }
html.tel .ik-rij.let .ik-rijicoon { background: var(--let-vlak); color: var(--let); }
html.tel .ik-rij.let .ik-rijtekst b { color: var(--let); }
html.tel .ik-rijtekst { display: flex; flex: 1; flex-direction: column; min-width: 0; }
html.tel .ik-rijtekst b { font-weight: 400; }
html.tel .ik-rijtekst small { color: var(--zacht); font-size: 12px; }
html.tel .ik-rijpijl { flex: none; color: var(--zacht); font-size: 20px; }
html.tel .ik-nieuw[open] > summary .ik-rijpijl { transform: rotate(90deg); }
html.tel .ik-nieuwlijst { display: grid; gap: 2px; padding: 0 0 10px 48px; }
html.tel .ik-nieuwlijst a.nw-optie { color: var(--tekst); text-decoration: none; }
html.tel .ik-nieuwlijst .revisieknop > summary { list-style: none; }
html.tel .ik-rijvak { padding: 0 0 10px; }
html.tel .ik-rijvak > .ik-rij { padding-bottom: 0; }
html.tel .ik-rijvak .toezegvak-rij { margin: 4px 0 0 48px; }
html.tel .ik-rijvak .volgknop { padding: 10px 0 0; }
html.tel .ik-weg .ik-rijtekst b { color: var(--laat); }

/* --- De projectpagina, eenvoudig (spec 2026-10-21, mockup project-eenvoudig blok C; templates/core/_projecteenvoudig.html,
   core/projecteenvoudig.py, static/js/projecteenvoudig.js; klassen pe-). Alleen als de server de telefoonlaag geeft (en
   intern), dus altijd met html.tel. Boven het essentiële (de klant, het nummer, één standregel, de pil), meteen de items
   als rijen van ± 100 pt met het filter, onderaan de ingeklapte blokken. Het vel Meer leent de opmaak van het item (ik-). */
html.tel .pe-kop { margin: 0 0 16px; }
html.tel .pe-boven { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -8px 0 6px; }
html.tel .pe-boven > .kruimelrij { margin: 0; }
html.tel .pe-klant {
  margin: 0; overflow: hidden; font-size: 34px; font-weight: 300; letter-spacing: -.6px; line-height: 1.15; white-space: nowrap;
  text-overflow: ellipsis;
}
html.tel .pe-naam {
  margin: 4px 0 0; overflow: hidden; color: var(--zacht); font-size: 14px; white-space: nowrap; text-overflow: ellipsis;
}
html.tel .pe-naam b { color: var(--tekst); font-weight: 500; }
html.tel .pe-open { color: var(--let); }
html.tel .pe-stand { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; font-size: 15px; line-height: 1.45; }
html.tel .pe-stand b { font-weight: 500; }
html.tel .pe-stip { flex: none; width: 10px; height: 10px; margin-top: calc(.725em - 5px); border-radius: 50%; background: #c9c9c7; }
html.tel .pe-stip.let { background: var(--let); box-shadow: 0 0 0 4px var(--let-vlak); }
html.tel .pe-vragen { margin: 0 0 12px; }
/* Het filter en + Item. */
html.tel .pe-filterrij { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
html.tel .pe-filter { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
html.tel .pe-filter::-webkit-scrollbar { display: none; }
html.tel .pe-filterknop {
  display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 36px; padding: 0 13px; border-radius: 999px;
  background: var(--vlak-2); color: var(--tekst); font-size: 14px; text-decoration: none; white-space: nowrap;
}
html.tel .pe-filterknop[aria-current="true"] { background: var(--donker); color: var(--pagina); }
html.tel .pe-aantal { font-size: 12px; opacity: .75; }
html.tel .pe-nieuw {
  display: inline-flex; flex: none; align-items: center; min-height: 36px; padding: 0 13px; border: 1px solid var(--lijn);
  border-radius: 999px; background: var(--pagina); color: var(--tekst); font-size: 14px; text-decoration: none; white-space: nowrap;
}
/* De kaarten (spec 2026-10-22, mockup project-itemkaarten-A): twee naast elkaar, het plaatje staand 3 : 4 met de
   bijgesneden render in het grijsvlak, daaronder de naam (hooguit twee regels), B-code en deadline, versie · stap · wie en
   de voortgangsbalk. Eén kolom van minmax(0, 1fr) per kaart (de opmaakwacht, 21 okt): een kolom `auto` werd zo breed als
   de langste itemnaam op één regel, en dan liep de kaart rechts van het scherm. Zo ook de blokken. */
html.tel .pe-rijen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
html.tel .pe-rij { min-width: 0; }
html.tel .pe-rij[hidden] { display: none; }
html.tel .pe-rijlink {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--rand); border-radius: 14px;
  background: var(--pagina); color: var(--tekst); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
html.tel a.pe-rijlink:active { background: var(--vlak); }
html.tel .pe-beeld {
  display: flex; flex: none; align-items: center; justify-content: center; width: 100%; aspect-ratio: 3 / 4; overflow: hidden;
  background: var(--grijsvlak);
}
html.tel .pe-beeld img { display: block; width: 100%; height: 100%; object-fit: contain; }
html.tel .pe-tekst { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 8px 10px 10px; }
html.tel .pe-itemnaam {
  display: -webkit-box; overflow: hidden; font-size: 14px; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
html.tel .pe-regel2 { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-top: 3px; color: var(--zacht); font-size: 12px; }
html.tel .pe-codes { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html.tel .pe-datum { flex: none; color: var(--tekst); font-weight: 500; }
html.tel .pe-datum.laat { color: var(--laat); }
html.tel .pe-stap { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 6px 0 0; font-size: 12px; }
html.tel .pe-versie { padding: 2px 7px; border-radius: 999px; background: var(--vlak-2); font-size: 11px; font-weight: 500; white-space: nowrap; }
html.tel .pe-stapnaam { min-width: 0; overflow-wrap: anywhere; }
html.tel .pe-wie { color: var(--zacht); }
html.tel .pe-wie.jij { color: var(--let); font-weight: 500; }
html.tel .pe-wachttekst { margin-top: 4px; color: var(--let); font-size: 12px; }
html.tel .pe-balk { display: flex; gap: 2px; margin: auto 0 0; padding: 8px 0 0; }
html.tel .pe-balk i { flex: 1; height: 3px; border-radius: 2px; background: var(--vlak-2); }
html.tel .pe-balk i.k { background: var(--donker); }
html.tel .pe-balk i.n { background: var(--let); }
html.tel .pe-leeg { margin: 0; padding: 14px; border-radius: var(--hoek); background: var(--vlak); color: var(--zacht); font-size: 13px; }
html.tel .pe-leeg[hidden] { display: none; }
html.tel .pe-nieuwkaart {
  display: flex; align-items: center; justify-content: center; min-height: 56px; margin: 8px 0 0; border: 1px dashed #c9c9c7;
  border-radius: 12px; background: var(--vlak); color: var(--zacht); font-size: 15px; text-decoration: none;
}
/* De ingeklapte blokken: een kop in hoofdletters met een pijltje, de samenvatting als chips; open de gewone rijen. */
html.tel .pe-blokken { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 22px 0 0; }
html.tel .pe-blok { border-radius: var(--hoek); background: var(--vlak); }
html.tel .pe-blok > summary {
  display: flex; gap: 12px; padding: 14px 16px; list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.tel .pe-blok > summary::-webkit-details-marker { display: none; }
html.tel .pe-blokpijl {
  flex: none; width: 8px; height: 8px; margin: 5px 2px 0 0; border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .15s;
}
html.tel .pe-blok[open] > summary .pe-blokpijl { transform: rotate(135deg); }
html.tel .pe-blokkop { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; }
html.tel .pe-bloktitel { font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
html.tel .pe-samen { display: flex; flex-wrap: wrap; gap: 6px; }
html.tel .pe-chip {
  display: inline-block; max-width: 100%; overflow: hidden; padding: 3px 10px; border-radius: 999px; background: var(--vlak-2);
  font-size: 13px; white-space: nowrap; text-overflow: ellipsis;
}
html.tel .pe-chip.let { background: var(--let-vlak); color: var(--let); }
html.tel .pe-blokinhoud { padding: 0 16px 14px; }
html.tel .pe-blokinhoud .inforijen { margin: 0; }
html.tel .pe-blokinhoud .inforij { font-size: 13px; }
html.tel .pe-blokinhoud .admin-open { color: var(--let); }
html.tel .pe-voet { margin: 6px 0 0; color: var(--zacht); font-size: 12px; text-align: center; }
/* Productieregels open: de tabel als kaartjes, de kop van de kolom voor de waarde (data-kop in _regels.html). */
html.tel .pe-regels #regels { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
html.tel .pe-regels #regels > .panelkop { display: none; }
html.tel .pe-regels .tabelwrap { overflow: visible; }
html.tel .pe-regels table.regels, html.tel .pe-regels table.regels tbody { display: block; }
html.tel .pe-regels table.regels thead { display: none; }
html.tel .pe-regels table.regels tr { display: block; margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: var(--pagina); }
html.tel .pe-regels table.regels tr.regel-acties { margin: -10px 0 8px; padding-top: 0; border-radius: 0 0 10px 10px; }
html.tel .pe-regels table.regels td { display: block; padding: 2px 0; border: 0; font-size: 13px; text-align: left; }
html.tel .pe-regels table.regels td[data-kop] { position: relative; padding-left: 104px; }
html.tel .pe-regels table.regels td[data-kop]::before { content: attr(data-kop); position: absolute; left: 0; color: var(--zacht); }
html.tel .pe-regels .regel-nieuw > summary.knop { display: inline-flex; align-items: center; justify-content: center; }
html.tel .pe-regels table.regels td:first-child { font-weight: 500; }
html.tel .pe-regels table.regels tr.regel-acties td:first-child { display: none; }
/* Het vel Meer: de kop van Nog in te vullen in brons, de knop rechts in een regel. */
html.tel .pe-velkop-let { color: var(--let); }
html.tel .pe-rijknop { flex: none; color: var(--let); font-size: 14px; font-weight: 500; }
html.tel .pe-volgen .volgknop { flex: none; margin: 0; }
html.tel .pe-volgen .volgknop button {
  min-height: 34px; margin: 0; padding: 0 14px; border-radius: 999px; font-size: 13px; letter-spacing: 0; text-transform: none;
}
html.tel .pe-volgen .volgknop button .icoon { display: none; }
html.tel .pe-volgen .volgknop button[aria-pressed="true"] { border-color: var(--donker); background: var(--donker); color: var(--pagina); }
html.tel .pe-meer .ik-velkop + .ik-rijen-onder { margin-top: 0; border-top: 0; }
/* Mijn taken, het blok Requests (spec 2026-10-31, § 15, mockup tel-9: beantwoorden vanuit Mijn taken): de hele regel is één tik naar de
   Request, niet alleen het nummer. */
html.tel .rq-taak { position: relative; padding: 12px 0; }
html.tel .rq-taak .rq-nummer a::after { content: ""; position: absolute; inset: 0; }

/* De filters van Projecten (`_projecten_filters.html`, ook voor Marketing): kortere namen, in kleine pillen (Requests (n) ◆ staat er zo
   altijd bij). Hier en niet in requests.css: die laadt alleen wie Requests heeft. */
html.tel .filters-rij { gap: 8px; margin-bottom: 16px; }
html.tel .filters-rij a { padding: 8px 14px; border-radius: 999px; font-size: 13px; white-space: nowrap; }
html.tel .filters-rij .tel-alleen { display: inline; }