/* Eyefly Cockpit — MOBIELE SHELL (telefoon en kleine tablet, ≤860px).

   Waarom een eigen bestand en niet nog een blok in cockpit.css:
   dit bestand wordt als LAATSTE geladen en is daarmee bewust de laatste stem. Een breakpoint-regel
   hier wint van de desktopregel zónder !important. Dat "de tweede wint" is hier dus het ONTWERP —
   niet de valkuil uit reference_css_dubbele_blokken.

   Wat de desktopshell doet en hier niet kan: body is een flex-RIJ met een vaste zijbalk van 246px.
   Op 375px nam die zijbalk 363px breed en 691px hoog in; de inhoud begon op y=809, dus onder de
   vouw. Je scrolde eerst langs het hele menu voor je iets zag.

   Wat hier voor in de plaats komt:
     · de zijbalk wordt een UITSCHUIFLADE (off-canvas) met scrim, geopend via de hamburger;
     · main krijgt de volle breedte — verder verandert er niets aan de shell-structuur:
       main blijft de flex-kolom en #view blijft de scroller, dus je houdt een vaste kop,
       een vaste onderbalk en alleen de inhoud die beweegt (app-gevoel, geen paginascroll);
     · een ONDERBALK met de bestemmingen die je met een duim wilt bereiken (js/mobiel.js).

   ⚠ De grens 860px staat óók in js/mobiel.js (matchMedia). Wijzig je hem hier, wijzig hem daar.
   ⚠ De lade-breedte staat bewust NIET op --sidebar-w: die variabele wordt door body.collapsed
     naar 70px gezet. js/mobiel.js haalt 'collapsed' er op mobiel af — inklappen is op een
     telefoon zinloos en de rail-flyouts werken niet zonder muis-hover. */

:root{
  /* ⭐44px, keuze Remco 31-07-2026: 'zonde om zoveel ruimte van het scherm zo te gebruiken'. Was
     58px, en daar zat maar ~9px lucht in — de rest is inhoud. Om écht naar 44 te komen zijn ook de
     onderdelen gekrompen: icoon 21→18, tussenruimte 3→2, opvulling 6→4 en de regelhoogte van het
     label. Samen 39px inhoud in 44px balk.
     ⛔44px is de ONDERGRENS, niet een startpunt: Apple HIG, Material én WCAG 2.5.8 houden dat aan
     voor een tikdoel, en de rest van de cockpit doet dat ook (zie de 44px-regel verderop in dit
     bestand). Lager mag alleen als de labels verdwijnen, en die keuze is bewust NIET gemaakt.
     ⚠Wat hier NIET bij zit is de zone van de home-indicator (~34px op een iPhone): die reserveert
     iOS zelf en daar kunnen geen knoppen in. De onderbalk kost dus altijd --mobnav-h + die zone. */
  --mobnav-h:44px;
  /* VOLLEDIGE buitenhoogte van de mobiele bovenbalk — inclusief zijn padding en onderrand, exclusief
     de notch-marge (die telt overal apart mee). Bewust de buitenmaat en niet de contenthoogte: de
     dropdowns eronder hangen er rechtstreeks aan (`top:calc(var(--kop-h) + var(--safe-t) + 6px)`),
     dus met de binnenmaat zou je hier stil 17px padding+rand moeten navrekenen — dat ging in de
     eerste poging precies mis (paneel 11px óver de balk). De .shellhead-regel in de query hieronder
     dwingt hem af met box-sizing:border-box, dus één getal regeert beide.
     Controle na een wijziging: onderkant .shellhead en bovenkant .popmenu liggen 6px uit elkaar. */
  --kop-h:60px;
  --safe-t:env(safe-area-inset-top,0px);
  /* ⭐De EFFECTIEVE onderinset: de vrije ruimte die de home-indicator vraagt, MIN wat de layout al
     onder de balk laat staan. `--safe-b-gat` wordt door js/mobiel.js gezet (zie zetOnderinset() —
     daar staat waarom) en is 0 op alles wat dit verschil niet heeft, dus dan is dit gewoon env().
     ⚠max(0px, …) is niet decoratief: zonder die klem wordt de waarde negatief zodra het gat groter
     is dan de inset, en dan schuift de balk omhoog i.p.v. te krimpen.
     ⚠De fallback in var(--safe-b-gat, 0px) is verplicht — een var() zonder fallback op een token dat
     (nog) niet gezet is maakt de HELE declaratie ongeldig, en dan valt --safe-b helemaal weg. */
  --safe-b:max(0px, calc(env(safe-area-inset-bottom,0px) - var(--safe-b-gat,0px)));
  /* ⭐MERK VAN DEZE STYLESHEET — leesbaar vanuit JS met getComputedStyle(root).getPropertyValue().
     Reden: `GET /api/v1/version` (en dus de build-stempel in de voetregel) komt van de SERVER en is
     altijd vers, óók als het toestel nog een oude mobiel.css gebruikt. Daardoor waren 'de fix werkt
     niet' en 'de fix is hier nog niet' niet te onderscheiden en ging er een hele ronde verloren.
     Ophogen bij elke wijziging aan de mobiele laag die je op afstand moet kunnen verifiëren — dus
     ook bij een wijziging in js/mobiel.js, want die twee horen bij elkaar en een half doorgekomen
     paar is precies de toestand die je wilt kunnen zien. #/instellingen/toestel toont hem. */
  --css-merk:"2026-07-31g";
}

/* Mobiel-eigen elementen bestaan alleen ónder de breakpoint. Ze worden altijd in de DOM gezet
   (js/mobiel.js), maar staan standaard uit — zo hoeft de JS niets te weten van de grens. */
.mob-burger,.mobnav,.mob-scrim,.kiesbalk,.pk-switch{display:none}

/* ---------------- terug-knop (js/app.js) ----------------
   ⭐BIJGESTELD 31-07-2026. Stond eerst óók op desktop ('terugwillen hangt niet aan een
   schermformaat'), maar daar levert de browser terug al — knop én Alt-←. De chevron was er dus een
   derde weg terug bovenop de browserknop en de in-pagina-kruimel, en hij hing als DERDE kind in
   `.shellhead`: met justify-content:space-between zwierf de kruimel daardoor naar het midden van de
   overgebleven ruimte, en dus per pagina naar een andere plek (melding Remco). Op desktop doet het
   kruimelpad nu het werk — Cockpit / Projecten / <dit project>, met een klikbare ouder.
   Op de TELEFOON blijft de chevron: in een standalone PWA is er geen browserbalk en op iOS geen
   veeg-terug, en dat was de hele aanleiding (30-07). Zie ook js/kruimel.js.
   Standaard uit; app.js zet `body.route-detail` zodra de route een bovenliggende pagina heeft
   (ouderVan()). Zelfde maat en huid als .mob-burger, zodat het één slot blijft. */
.mob-terug{
  display:none;place-items:center;flex:0 0 40px;width:40px;height:40px;padding:0;margin-right:2px;
  border:1px solid var(--line-2);border-radius:var(--r-md);
  background:none;color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.mob-terug:active{background:rgba(255,255,255,.06)}
.mob-terug svg{width:19px;height:19px}

@media (max-width:700px){

  /* 100dvh i.p.v. 100%: de dynamische viewport krimpt mee met de adresbalk van mobiel Safari/Chrome.
     Met 100% (of 100vh) valt de onderbalk onder de adresbalk en is de laatste rij onbereikbaar. */
  body{height:100dvh}

  /* ---------------- zijbalk → uitschuiflade ---------------- */
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;z-index:var(--z-modal);
    width:min(86vw,300px);flex:0 0 auto;height:100dvh;
    margin:0;border-left:0;border-radius:0 var(--r-2xl) var(--r-2xl) 0;
    padding:calc(16px + var(--safe-t)) 12px calc(14px + var(--safe-b));
    transform:translateX(-102%);          /* -102% i.p.v. -100%: houdt de slagschaduw buiten beeld */
    /* ⭐visibility, niet alleen transform. Een weggeschoven element blijft met Tab bereikbaar: je
       tabt dan door een menu dat niemand ziet. visibility:hidden haalt het uit de focusvolgorde.
       Bewust CSS en geen JS-`inert`: dan hangt de toestand aan de BREEDTE en niet aan een event.
       Een gemiste matchMedia-change liet de zijbalk anders inert achter op desktop — dus stil geen
       toetsenbordtoegang meer tot het hele menu.
       visibility schakelt discreet: heen meteen zichtbaar, terug pas na de slide — precies goed. */
    visibility:hidden;
    transition:transform .26s var(--ease),visibility .26s var(--ease);
    will-change:transform;
  }
  body.mob-lade .sidebar{transform:none;visibility:visible;box-shadow:0 0 70px rgba(0,0,0,.72)}
  .railtoggle{display:none}               /* inklappen bestaat niet op een telefoon */

  .mob-scrim{
    display:block;position:fixed;inset:0;z-index:var(--z-overlay);
    background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .24s var(--ease);
  }
  body.mob-lade .mob-scrim{opacity:1;pointer-events:auto}

  /* Tikdoelen in de lade naar ~42px (WCAG 2.5.8 vraagt 24px, Apple/Google adviseren 44px).
     Gemeten vóór deze regel: 27 van de 64 aanraakbare elementen waren lager dan 40px. */
  .nav-item,.grp-head{padding:11px 12px}
  .nav-sub{padding:13px 12px 13px 40px}
  .nav-kop{padding:14px 12px 5px}

  /* ---------------- bovenbalk ---------------- */
  .shellhead{
    margin:0;border-radius:0;border-width:0 0 1px;gap:10px;
    padding:8px 12px;padding-top:calc(8px + var(--safe-t));
    /* Expliciet, zodat de dropdowns eronder er met --kop-h aan kunnen hangen (zie :root). */
    box-sizing:border-box;min-height:calc(var(--kop-h) + var(--safe-t));
  }

  /* ---------------- dropdowns uit de bovenbalk: paneel binnen de viewport ----------------
     `.popmenu` hangt met `right:0` aan zijn eigen chip en heeft een eigen min-width (288px voor de
     'Bekijk als'-schakelaar, die door zijn inhoud zelfs 345px breed werd). Op een telefoon staat die
     chip midden in de balk, dus rekende dat naar een LINKERRAND VAN -57px — en de meldingenbel, die
     verder naar links staat, kwam op -109px uit. Een voorouder met overflow:hidden kapte het
     vervolgens af i.p.v. het te laten schuiven: je zag afgesneden labels ('ALS ROL', '(jouw rol)').
     Melding Remco 30-07-2026.
     Hier worden ze één vast paneel onder de balk, van rand tot rand. Dat klopt ongeacht waar de chip
     staat, en alle drie de dropdowns (view-as, meldingen, gebruiker) lijnen op dezelfde hoogte uit.
     ⚠position:fixed mag hier omdat geen voorouder een transform/filter heeft (gecontroleerd) — met
     een transform-ouder zou 'fixed' weer aan díe ouder gaan hangen en zijn we terug bij af. */
  .popmenu{
    position:fixed;
    top:calc(var(--kop-h) + var(--safe-t) + 6px);
    left:12px;right:12px;
    min-width:0;width:auto;
    max-height:calc(100dvh - var(--kop-h) - var(--safe-t) - var(--mobnav-h) - var(--safe-b) - 18px);
    overflow-y:auto;
  }
  /* Eén schuifvlak: de personenlijst had zijn eigen 280px-scroller, en genest schuiven binnen een
     paneel dat zelf al schuift is op touch niet te bedienen. */
  .pm-personen{max-height:none;overflow:visible}
  .pm-head{white-space:normal}   /* de subtitel mag hier over twee regels i.p.v. afgekapt worden */
  .crumbs{flex:1;min-width:0}
  /* Alleen de schermnaam. "Cockpit /" is ruis op een smal scherm, en de ouder-kruimel hoeft hier
     niet: de chevron hiernaast doet dat werk al (en dat is één tikdoel i.p.v. een tekstlinkje). */
  .crumbs #crumbProduct,.crumbs .crsep,.crumbs #crumbUp{display:none}
  .crumbs b{font-size:var(--fs-lg);font-weight:700}
  /* De chevron bestaat alléén hier — zie de toelichting bovenaan dit bestand. */
  body.route-detail .mob-terug{display:grid}
  .head-right{gap:6px}
  .hsep{display:none}
  .hsearch,.weatherchip{display:none}     /* zoeken zit in de lade; weer is geen telefoonwerk */
  /* ⚠ UITZONDERING op de regel hierboven. De 'Bekijk als'-schakelaar draagt óók .weatherchip en
     verdween daardoor op een telefoon. Dat is precies de verkeerde om te verbergen: in die stand
     zijn eigen-writes server-side geblokkeerd en valt onder meer de verlof-/ziekstand weg. Zonder
     de chip zie je niet DAT je erin zit en kun je er ook niet uit. Een stand die je gedrag stilzet
     moet zichtbaar blijven — juist op het scherm met de minste ruimte. */
  .viewas-chip{display:inline-flex}
  .userchip .umeta{display:none}          /* alleen de avatar — de naam staat in de lade */

  .mob-burger{
    display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;padding:0;
    border:1px solid var(--line-2);border-radius:var(--r-md);
    background:none;color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .mob-burger:active{background:rgba(255,255,255,.06)}
  .mob-burger svg{width:19px;height:19px}
  /* Op een detailpagina neemt de chevron het slot over — zoals elke telefoon-app doet. Twee iconen
     naast elkaar zou de kopband verder dichtdrukken; de kruimel staat daar al afgekapt. Het menu
     blijft bereikbaar: de onderbalk staat er nog, en één stap terug brengt je op een hoofdscherm
     waar de hamburger weer staat. */
  body.route-detail .mob-burger{display:none}

  /* ---------------- inhoud ---------------- */
  /* Onderaan ruimte vrijhouden voor de onderbalk + de home-indicator, anders valt de laatste
     knop van elk scherm eronder. */
  #view{padding:var(--s-4) var(--s-3) calc(var(--mobnav-h) + var(--safe-b) + 28px)}

  /* iOS zoomt de hele pagina in zodra een veld met een tekengrootte < 16px focus krijgt, en zoomt
     daarna niet vanzelf terug. Dat is de meest gemelde "de app springt weg"-klacht op telefoons.
     Alleen binnen #view: de lade en de bovenbalk hebben geen invoervelden die dit raakt. */
  #view input:not([type=checkbox]):not([type=radio]),#view select,#view textarea{font-size:16px}

  /* ---------------- onderbalk ---------------- */
  .mobnav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-header);
    /* ⚠+1px voor de bovenrand. `*{box-sizing:border-box}` trekt rand en opvulling van de hoogte AF,
       dus zonder die correctie werd het tikdoel 43px in plaats van 44 — één pixel onder de norm die
       we hier juist bewust aanhouden. Zo blijft --mobnav-h precies 'de hoogte van het tikdoel'. */
    height:calc(var(--mobnav-h) + var(--safe-b) + 1px);padding-bottom:var(--safe-b);
    background:color-mix(in srgb,var(--surface) 94%,transparent);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--line-2);
  }
  /* ⚠De strook over de home-indicator OPAAK maken. De balk is bewust doorschijnend (94% + blur),
     maar in die onderste strook zit geen inhoud om door te blurren: daar composit hij over --bg
     (#060510) en leest hij als een donkerdere band, waardoor het scherm lijkt te stoppen boven de
     onderrand. Melding Remco 30-07-2026 (screenshot). Gemeten met een gesimuleerde inset van 34px:
     de balk wordt wél 92px en raakt de onderkant — er mist niets, het is de doorschijnendheid.
     Alleen die strook vullen, zodat de frosted look boven de inhoud blijft. Bij inset 0 is dit een
     no-op (height:0). */
  .mobnav::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:var(--safe-b);
    background:var(--surface);pointer-events:none;
  }
  /* De knop vult de volle --mobnav-h (flex:1 in een balk zonder eigen hoogte-opdeling), dus het
     TIKDOEL is 44px ook al meet de inhoud 39px. De opvulling is er voor de optische marge, niet om
     het doel te maken — kleiner maken raakt de leesbaarheid, niet de bedienbaarheid. */
  .mobnav button,.mobnav a{
    flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;padding:4px 2px;background:none;border:0;cursor:pointer;font-family:inherit;
    color:var(--text-3);font-size:var(--fs-2xs);font-weight:600;text-decoration:none;
    -webkit-tap-highlight-color:transparent;transition:color .15s;
  }
  /* ⚠21px, TERUGGEDRAAID 31-07-2026 na melding Remco ('de iconen zijn nu kleiner, wat ik niet wil').
     Ze waren 18 geworden om de balk naar 44px te krijgen — maar dat hoefde helemaal niet: met de
     krappere opvulling en regelhoogte meet de inhoud 4+21+2+11+4 = 42px en past 21px gewoon in 44.
     Niet opnieuw verkleinen om ruimte te winnen; die zit hier niet. */
  .mobnav svg{width:21px;height:21px;flex:0 0 21px;stroke-width:1.7}
  /* ⚠Regelhoogte expliciet: de erfelijke 1,3 maakte van een label van 10px een regel van 13px, en
     die 2px zijn in een balk van 44px het verschil tussen passen en klemmen. */
  .mobnav .mn-lbl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.1}
  .mobnav .active{color:var(--heading-purple)}
  .mobnav button:active,.mobnav a:active{color:var(--text)}

  /* ---------------- de strook ONDER de onderbalk ----------------
     ⚠`html` had geen eigen achtergrond. Dan propageert die van `body` (--bg, #060510 = vrijwel zwart)
     naar de DOCUMENT-CANVAS, en dat is de kleur die het toestel gebruikt voor alles wat de pagina
     zelf niet dekt: de systeem-navigatiebalk/gesture-strook op Android, het overscroll-gebied, en het
     gebied achter de home-indicator wanneer `env(safe-area-inset-bottom)` 0 teruggeeft (dan is de
     ::after-strook hierboven een no-op — dat staat er al bij). Resultaat: een zwarte balk onder een
     onderbalk die zelf --surface is (melding Remco 30-07-2026).
     Door `html` z'n eigen --surface te geven stopt die propagatie: `body` blijft --bg en de pagina
     ziet er identiek uit, maar alles BUITEN de pagina krijgt nu de kleur van de onderbalk in plaats
     van zwart. Zo sluit het beeld aan op de balk i.p.v. eronder af te breken.
     ⚠Wat hier lokaal te meten viel is gemeten: mét een geforceerde inset van 34px rendert de strook
     al correct als --surface en raakt de balk de onderkant van het venster. De zwarte band van de
     melding is dus NIET de ::after-strook; hij komt van de canvas eronder. Dat laatste is op een
     echt toestel te zien, niet in de browser-pane.
     ⚠⚠31-07-2026: dit alléén was NIET genoeg — zie het blok hieronder. De regel blijft staan omdat
     hij de canvas hoe dan ook goed zet, maar hij loste de melding niet op. */
  html{background:var(--surface)}

  /* ---------------- WAT DE ZWARTE BAND ÉCHT WAS: `body` ----------------
     ⭐⭐Gemeten op het toestel 31-07-2026 (iPhone iOS 18.7, PWA vanaf het beginscherm) met de
     kleurtest op #/instellingen/toestel: elke laag een schreeuwende eigen kleur, en de band nam
     consequent de kleur van **body** aan. Dat sluit alles uit wat er eerder voor is aangezien:
       · niet `background_color` uit het manifest — dan was hij zwart gebleven;
       · niet de document-canvas — dan was hij groen geweest, en dan had `html{...}` hierboven het
         al opgelost;
       · niet de ::after-strook — die kleurde netjes oranje op zijn eigen 34px;
       · niet 'zijn toestel geeft 0 voor de veilige zone' — env(safe-area-inset-bottom) is daar 34px
         en de balk is keurig 92px.
     ⚠En ook niet met een element te overdekken: `elementFromPoint` op de onderste pixelrij geeft
     .mobnav, dus de balk reikt wél tot de onderkant van de pagina. De band ligt BUITEN dat gebied.
     Twee pogingen om hem te overschilderen (een onderloop op .mobnav::after, en een tweede strook op
     body::after) veranderden op het toestel niets en zijn daarom weer verwijderd — de tweede stond
     bovendien door een rekenfout van mij volledig onder de viewport en kon per definitie nooit iets
     dekken. Niet opnieuw proberen: iets buiten de webcontents overschilder je niet vanuit de pagina.
     Wat iOS daar schildert volgt de achtergrond van `body`. Dus krijgt body onder de breakpoint de
     kleur van de balk, en verhuist de donkere app-achtergrond naar `main` — die vult op een telefoon
     de hele viewport (de zijbalk staat fixed, dus main is het enige in-flow flexkind), zodat het
     beeld identiek blijft. */
  body{background:var(--surface)}
  main{background:var(--bg)}

  /* ---------------- tikdoelen op 44px ----------------
     Skill-eis §2 (WCAG 2.5.8 / Apple HIG / Material): minimaal 44×44px, en dat gold voor bijna
     niets. Gemeten vóór deze regel: 108 van 108 tikdoelen te klein op de OHW-rapportage, 108 van
     120 op Opvolging, 80 van 80 op Planning-week, 45 van 46 op Weekcontrole. Eén oorzaak: de
     lijst- en tabelrijen zijn op desktopdichtheid ontworpen (~30px hoog).
     ⚠min-height doet niets op een INLINE element, dus links in lopende tekst blijven ongemoeid —
     alleen echte knoppen, rijen en velden groeien mee. Dat is precies de bedoeling. */
  #view button,#view select,#view [role=button],#view [role=tab],
  #view a[href]:not(:where(p,li,span,td) a),
  #view input:not([type=checkbox]):not([type=radio]){min-height:44px}
  /* Uitzonderingen: elementen die al een groot raakvlak hebben of waar 44px de rij sloopt. */
  #view .sbal,#view .kiespil,#view .ec-tijd-knop button,#view .dv-day,#view .dv-nav{min-height:0}

  /* ---------------- filter- en zoekbalken: één veld per regel, vol ----------------
     ⚠`.lsearch` heeft op desktop `margin-left:auto` (rechts uitlijnen) én `min-width:240px`. Zodra de
     filterbalk wrapt — en dat doet hij op een telefoon altijd — staat het veld daardoor als een
     240px-blok RECHTS op zijn eigen regel, met een gat links. Dat is wat er 'uit verhouding' uitzag
     (melding Remco 30-07-2026, screenshot Relaties). Twee views zetten die marge zelf al terug
     (.ec-listbar, .pb2-fbright), de overige vijf niet — dus hier één keer voor álle filterbalken.
     De min-/max-widths gaan er óók af: een select met max-width 300px op een regel van 358px leest
     als 'net niet uitgelijnd', en een min-width van 260px duwt een tweede veld naar een halve regel.
     ⚠Bewust GEEN width:100% op .ph2-filt select: die twee horen naast elkaar (flex:1 elk) en passen. */
  .tbar,.ec-listbar,.ec-listbar__groep,.pb2-filterbar,.pb2-fbright,
  .af-filters,.dco-filters,.ic-filters,.pa-bar{gap:8px;width:100%}
  .lsearch{margin-left:0;width:100%;min-width:0}
  .lselect,.pa-fsel,.af-filters select,.dco-f input,.dco-f select,.ic-zoekwrap,.ic-zoekwrap input{
    width:100%;max-width:none;min-width:0;
  }
  .dco-f{width:100%}
  .pa-bar #po-ftabs{margin-right:0;width:100%}
  .ph2-filt{flex-wrap:wrap}
  /* Een segmentbalk met vijf opties is intrinsiek breder dan een telefoon (gemeten: 382px in een rij
     van 366px) en kán niet afbreken — .ec-seg__btn staat op nowrap. Dan moet hij binnen ZICHZELF
     schuiven, zoals .kiesbalk hierboven: alle opties blijven bereikbaar en de pagina staat stil.
     ⚠BEWUST geen overflow:hidden op #view om het weg te klippen: dan zijn de laatste opties
     onbereikbaar in plaats van zichtbaar-met-schuiven — precies de fout die op #/weekcontrole drie
     ketenpunten liet verdwijnen (zie cockpit.css, .wk-keten).
     ⚠De Globaal/Week-wissel houdt zijn eigen regel: .pk-switch .ec-seg is specifieker en zet
     width:100% met flex:1-knoppen, dus die twee vullen de breedte en schuiven nooit. */
  .ec-seg{max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ec-seg::-webkit-scrollbar{display:none}

  /* ---------------- de zijwaartse veeg (js/kiesbalk.js → bindSwipe) ----------------
     ⚠⚠DIT is waarom de veeg 'veel moeite kostte' (melding Remco 30-07-2026). Zonder deze regel staat
     de host op `touch-action:auto`: de browser mag de beweging dan zelf als pan opvatten, neemt hem
     halverwege over en stuurt `pointercancel` — precies op het moment dat je dacht dat je veegde.
     Je gebaar wordt dan willekeurig wél/niet gezien, en dat voelt als een te hoge drempel, hoe laag
     je die ook zet. `pan-y` verdeelt de assen expliciet: verticaal scrollen blijft van de pagina,
     horizontaal is gegarandeerd van ons.
     De klasse wordt door bindSwipe gezet, dus hij zit precies op de drie hosts die ook echt vegen
     (#ur-cal · .wp-schedwrap · .gp-gantt) — en alleen hier, binnen de breakpoint, zodat een tablet
     zijn eigen horizontale scroll houdt. */
  .kb-swipe{touch-action:pan-y}

  /* ---------------- de KIESBALK: één kolom kiezen i.p.v. zeven knijpen ----------------
     Gedeeld door de urenregistratie (dagen), de weekplanning (dagen) en de globale planning
     (weken) — js/kiesbalk.js tekent de pillen, de views tekenen nog maar één kolom. Buiten deze
     query staat .kiesbalk op display:none, dus de balk mag altijd in de DOM staan. */
  .kiesbalk{
    display:flex;gap:6px;margin:0 0 12px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .kiesbalk::-webkit-scrollbar{display:none}
  .kiespil{
    flex:1 1 0;min-width:44px;display:flex;flex-direction:column;align-items:center;gap:1px;
    padding:8px 4px;border:1px solid var(--line-2);border-radius:var(--r-md);
    background:var(--surface);color:var(--text-2);font-family:inherit;cursor:pointer;
    -webkit-tap-highlight-color:transparent;transition:background .14s,border-color .14s;
  }
  .kiespil-d{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--text-3)}
  .kiespil-n{font-size:var(--fs-lg);font-weight:800;color:var(--text);line-height:1.05}
  .kiespil.is-vandaag{border-color:color-mix(in srgb,var(--blue) 55%,transparent)}
  .kiespil.is-actief{background:rgba(154,79,208,.18);border-color:var(--purple)}
  .kiespil.is-actief .kiespil-d,.kiespil.is-actief .kiespil-n{color:#fff}

  /* ---------------- urenregistratie: één dag i.p.v. een weekrooster ---------------- */
  /* Het rooster zelf blijft ongewijzigd — js/views/uren.js tekent onder deze breakpoint nog maar
     één dagkolom (zichtbareDagen). Hier valt alleen de vaste minimumbreedte weg die het rooster
     op 796px hield. */
  .ur-cal{min-width:0}
  .ur-cal-wrap{overflow-x:visible}
  .ur-legend{display:none}          /* twee kleurstippen zijn de schermruimte niet waard */

  /* ---------------- dashboard: de weekstrip ----------------
     cockpit.css zet onder 900px `.db2-week .db2-wday{flex:1 0 60px}` — basis 60px en NIET krimpen.
     Zeven dagen + zes tussenruimtes komen dan op 424px uit in een kolom van 351px, en de
     projectnaam in de tegel liep 5px over zijn eigen vak. Bedoeld voor een tablet, te ruim voor een
     telefoon. Mag krimpen: 7 × 40 + 6 × 8 = 328px past wél op één rij. */
  .db2-week .db2-wday{flex:1 1 40px}

  /* ---------------- dashboard: 'Vraagt aandacht vandaag' werd tot één halve regel geklipt --------
     Die lijst vult op desktop de RESThoogte van zijn kaart met de absolute-inset-truc:
     .db2-attwrap{flex:1;min-height:0} + .db2-attlist{position:absolute;inset:0;overflow-y:auto}.
     Dat werkt alleen in een kaart met een BEPAALDE hoogte, en die krijgt hij daar van
     align-items:stretch in .db2-grid — de rail ernaast maakt de rij hoog.
     Op een telefoon is dat raster één kolom, dus is de kaart contentgestuurd: flex:1 loste op naar
     ~0, de kaart werd 76px en de lijst (gemeten 468px inhoud) werd tot 20px weggeklipt door
     .card{overflow:hidden}. Je zag de titel plus de bovenste pixels van de volgende regel.
     Melding Remco 30-07-2026. Hier stroomt de lijst gewoon mee en groeit de kaart met de inhoud;
     dat blijft begrensd omdat dashboard.js al aftopt op ATT_MAX (9) met een '+N meer'-link.
     Geldt voor vier roldashboards: die gebruiken alle vier dezelfde .db2-attwrap. */
  .db2-attwrap{flex:0 0 auto}
  .db2-attlist{position:static;overflow-y:visible}
  /* De metaregel mag hier over twee regels: nowrap + ellipsis kapte 'Dataportaal · verlopen
     31-12-2025' af terwijl er onder de titel ruimte zat. Kost 4 van de 10 rijen een extra regel
     (gemeten: kaart 909 → 979px) en levert vier volledig leesbare regels op. */
  .db2-att-m{white-space:normal;overflow:visible;text-overflow:clip}
  /* Titel op maximaal twee regels. De titelkolom is hier 165px (icoon + bedrag + chevron nemen de
     rest), en een samengevoegde naam als '400121 - VG Voedingsbaan Akkrum / 400127 - VG
     Voedingsbaan Akkrum Eindopname' liep over VIJF regels: één rij van 145px duwde de andere acht
     uit beeld. Twee regels + ellipsis houdt het projectnummer en het begin van de naam leesbaar. */
  .db2-att-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  /* ---------------- planning ----------------
     De planningsschermen zetten een label-kolom en een tijdbalk NAAST elkaar:
       .gp-panel = .gp-rail (0 0 290px) + .gp-gantt (1 1 0)
       .wp-panel = .wp-rail (0 0 240px) + .wp-schedwrap (1 1 0)
     Op 375px hield de vaste rail 290 resp. 240px vast en bleef er 59 resp. 109px over voor de
     tijdbalk — die schuift dan wel horizontaal, maar door een kier van drie tekens.
     Onder elkaar zetten geeft beide de volle breedte: eerst waar het over gaat, daaronder wanneer.
     De tijdbalk houdt zijn eigen overflow-x, dus het schuiven blijft werken zoals op desktop. */
  .gp-panel,.wp-panel{flex-direction:column}
  .gp-rail,.wp-rail{flex:0 0 auto;width:100%}
  .gp-gantt,.wp-schedwrap{flex:0 0 auto;width:100%}

  /* De week-navigatie is één kind van .pk-tools, dus de flex-wrap van de ouder kon niets doen:
     28 + 199 + 28 + 70 + 117 = 442px op een rij in een vak van 317px. */
  .tb-nav{flex-wrap:wrap}

  /* ---------------- weekplanning: ÉÉN dag i.p.v. zeven ----------------
     Het raster staat inline op `200px repeat(7,minmax(132px,1fr))` = 1124px. In een kolom van
     351px betekende dat drie schermbreedtes schuiven, en nam de naamkolom 57% van wat je zag.
     De eerste mobiele slag perste alle zeven dagen op één schermbreedte (~38px per dag); daar
     paste geen tekst, dus werden de blokken kléurvlakken — en dan zie je wel wíe er staat, maar
     niet waaraan. Sinds 30-07-2026 kiest de kiesbalk één dag (js/kiesbalk.js) en is er weer ~240px
     per dag: de bloklabels, het materieel en de opmerking passen gewoon.
     ⚠Het raster zelf (grid-template-columns) komt INLINE uit js/views/projectplanning.js — die
     weet hoeveel kolommen er getekend worden. Hier alleen de minimumbreedte eraf.
     ⚠overflow-x blijft AUTO (niet hidden): het raster past nu, maar mocht er toch iets buiten
     vallen dan is wegklippen erger dan schuiven — dan is de inhoud onbereikbaar én onzichtbaar. */
  .wp-schedwrap .sched-grid,.sched-grid{min-width:0 !important}
  .gemp{padding:8px 7px}
  .gemp .nm{font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .gemp .role,.gflag{display:none}                /* rol/vlag: te veel voor de naamkolom */
  .gemp .hrs{font-size:var(--fs-nano);margin-top:3px}   /* gepland/beschikbaar blijft de WEEKstand */
  .gh{padding:7px 4px;font-size:var(--fs-2xs);letter-spacing:0}
  .gh-emp{padding-left:7px}
  .gcell{min-height:52px}

  /* ---------------- Globaal/Week-wissel in de planningskop ----------------
     Alleen hier: op desktop staat de zijbalk permanent in beeld en is die wissel al één klik ver,
     dus daar zou de strip dubbelop zijn (besluit 26-07). Op een telefoon is de zijbalk een lade én
     komt de onderbalk-knop 'Planning' altijd op je laatst gebruikte weergave uit, waardoor Globaal
     zonder deze strip niet te bereiken was. Zie js/planningkop.js.
     Volle breedte met twee gelijke helften: een duim-doel van ~170px i.p.v. twee smalle pillen.
     ⚠`flex:1 1 100%` en niet alleen `width:100%`: .ec-hero__top is een flex-RIJ met wrap, dus een
     kind zonder eigen basis krimpt naar zijn inhoud (gemeten: 130px omdat de strip eerst ín .pk-id
     zat). Met basis 100% neemt hij een eigen regel, direct onder de titel. */
  .pk-switch{display:block;flex:1 1 100%;margin:2px 0 0}
  .pk-switch .ec-seg{display:flex;width:100%}
  .pk-switch .ec-seg__btn{flex:1 1 0;padding:9px 8px;font-size:var(--fs-sm)}

  /* ---------------- globale planning: ÉÉN week i.p.v. 4–16 ----------------
     Zelfde verhaal een schaal hoger: het raster staat inline op `250px repeat(N,minmax(104px,1fr))`,
     bij de standaard 8 weken 1082px. De kiesbalk kiest hier een WEEK; de projectkolom krimpt mee.
     ⚠De balken staan in % van het getekende venster, dus dat venster MOET één week zijn — alleen
     kolommen verbergen zou elke balk in een zevende van de kolom persen. Zie js/kiesbalk.js. */
  .gp-zoom{display:none}      /* zoomen = 'hoeveel weken in beeld' en dat is hier altijd één */
  .gp-grid .g-proj{padding:8px 9px;min-height:50px}
  .gp-grid .g-proj .nm{font-size:var(--fs-xs)}
  .gp-grid .g-proj .rng{font-size:var(--fs-nano)}
  .gp-grid .g-h{padding:7px 6px}
  .gp-caprow .rng,.gp-subhead .gp-avleg{display:none}   /* uitleg-regels die de rij twee keer zo hoog maken */

  /* ---------------- 'Nog in te plannen' naar ONDEREN ----------------
     Wens Remco: "dat is niet iets wat je direct hoeft te zien". De backlog stond bovenaan omdat de
     rail op desktop links staat en een gestapelde flexkolom die volgorde overneemt. Met order
     wisselen we dat om zonder de DOM te veranderen — de sleep-interactie op desktop blijft intact. */
  .gp-panel>.gp-gantt,.wp-panel>.wp-schedwrap{order:1}
  .gp-panel>.gp-rail,.wp-panel>.wp-rail{order:2;border-right:0;border-top:1px solid var(--line-2)}
  .gp-rail,.wp-rail{max-height:none}

  /* ---------------- geen plan-verleiding in de leesstand ----------------
     Er verscheen bij hover een + waarmee je een project kon inplannen — verwarrend op een scherm
     waar de melding zegt dat plannen op een laptop hoort. `.pp-readonly` bestond al voor precies
     dit doel (projectplanning.js zet 'm bij ontbrekende rechten); we hangen de mobiele leesstand
     aan dezelfde regels i.p.v. een tweede set verstoppertjes te schrijven.
     ⚠Dit is alleen de VISUELE laag. De klik-/sleep-handlers gaan er zélf op (projectplanning.js
     `magBewerken()`, globaleplanning.js) — CSS verbergen blokkeert de interactie niet: een tik op
     de cel-body opende de editor ook met een verborgen +. Melding Remco 30-07-2026.
     Dezelfde set als `.pp-readonly`: óók de te-plannen-kaarten (.tp-chip) en de definitief-knop —
     die stonden nog wél zichtbaar en waren dus een dode affordance. */
  body.mob-lezen .gc-add,
  body.mob-lezen .sched-addrow,
  body.mob-lezen .gemp-del,
  body.mob-lezen .tp-chip,
  body.mob-lezen #wp-status-btn,
  body.mob-lezen .blk-chip{display:none !important}
  body.mob-lezen .blk,body.mob-lezen .gp-bar,body.mob-lezen .gp-bcard{cursor:default}

  /* ---------------- vensters als onderblad ----------------
     Een gecentreerde modal komt op een telefoon achter het toetsenbord terecht: dat neemt de
     onderste helft en duwt niets weg. Vanaf de onderrand blijft de bovenkant van het formulier
     zichtbaar én liggen de knoppen onder je duim. Alleen de positie verandert — de vensters
     zelf (uren-editor, declaratie-editor, bevestig/meld) blijven ongewijzigd. */
  .ur-ovl{align-items:flex-end;padding:0}
  .ur-modal{
    width:100%;max-width:none;max-height:92dvh;
    border-radius:var(--r-2xl) var(--r-2xl) 0 0;
    padding:18px 16px calc(18px + var(--safe-b));
  }
  .ec-dlgback{padding:12px;align-items:end}
  .ec-dlg{margin-bottom:calc(var(--safe-b) + 4px)}

  /* ---------------- Datum/Van/Tot moeten leesbaar blijven ----------------
     Die drie staan met de duur in ÉÉN flexrij (.ur-m-row, 4 items). In een sheet van 375px is dat
     ~107px per veld, en op touch zet cockpit.css de +/- knoppen náást elkaar met
     `padding-right:74px` in het tijdveld — er bleef ~23px over voor de waarde. Melding Remco
     30-07-2026: je zag letterlijk `30-07-`, `0` en `1(` staan.
     De rij mag hier afbreken; de ondergrens van 136px (74 knoppen + ruimte voor 16:45) dwingt dat
     ook af als :has() ontbreekt. Mét :has() (Safari 15.4+) wordt het netter: datum op een eigen
     regel, Van en Tot samen op de volgende. */
  .ur-m-row{flex-wrap:wrap}
  .ur-m-row>.ur-m-lbl{min-width:136px}
  .ur-m-row>.ur-m-lbl:has(input[type=date]),.ur-m-row>.ur-m-lbl:has(.ec-datum){flex:1 1 100%}
  .ur-m-row>.ur-m-lbl:has(.ec-tijd){flex:1 1 calc(50% - 5px)}
  .ur-m-dur{flex:1 1 100%;padding-bottom:4px}

  /* Een lange druk op een lege dagkolom start een sleep (js/views/uren.js). Zonder dit komt iOS
     daar met zijn selectie-/kopieerballon tussen, want we onderdrukken de pointerdown niet meer. */
  .ur-daycol{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
  /* Terugkoppeling tijdens die 350ms: zonder dit gebeurt er niets zichtbaars en denk je dat het
     gebaar niet werkt. De animatie loopt exact even lang als de long-press, dus het opgevulde vlak
     ís de voortgangsindicator — staat hij vol, dan kun je slepen. */
  .ur-daycol.ur-drukken{animation:ur-druk 350ms ease-out forwards}
  @keyframes ur-druk{from{background:transparent}to{background:color-mix(in srgb,var(--accent) 14%,transparent)}}
  /* Een BESTAAND blok drukt zichzelf op i.p.v. de hele dagkolom (keuze Remco 30-07-2026: ook een
     boeking vraagt eerst een langdruk, zodat scrollen altijd voorgaat). Het blok heeft al een eigen
     achtergrond, dus hier een ring + lichte krimp — dat leest als 'ik heb je vast' zonder de
     kleurcodering (blauw = klantwerk, paars = intern) te overstemmen. */
  .ur-blk.ur-drukken{animation:ur-blk-druk 350ms ease-out forwards}
  @keyframes ur-blk-druk{
    from{box-shadow:0 0 0 0 transparent;transform:scale(1)}
    to{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent);transform:scale(.97)}
  }

  /* De onderbalk hoort bij de cockpit-chrome: weg op het loginscherm en zolang de auth-check loopt
     (zelfde regime als .sidebar/#shellhead in index.html — anders flitst hij bij elke herlaadbeurt). */
  body.login-mode .mobnav,body.login-mode .mob-burger,
  html.auth-bezig .mobnav,html.auth-bezig .mob-burger{display:none}

  /* De hint moet bóven de onderbalk landen, niet erachter. */
  .pwa-hint{bottom:calc(var(--mobnav-h) + var(--safe-b) + 12px)}
}

/* ---------------- trek omlaag om te verversen (js/verversen.js) ----------------
   BUITEN de breakpoint-query, net als de meekijkbalk: de gate zit op TOUCH en niet op breedte, dus
   een touch-tablet hoort de indicator ook te zien. Een muisgebruiker krijgt hem nooit te zien omdat
   verversen.js zonder touch niets bedraadt — en de balk staat standaard op opacity 0 buiten beeld.
   Hangt onder de bovenbalk met dezelfde --kop-h als de dropdowns, zodat hij niet over de kop valt. */
.verversbalk{
  position:fixed;left:0;right:0;top:calc(var(--kop-h) + var(--safe-t));
  display:flex;align-items:center;justify-content:center;gap:9px;
  height:44px;pointer-events:none;opacity:0;transform:translateY(-44px);
  z-index:var(--z-dropdown,900);
  font-size:var(--fs-xs);font-weight:600;color:var(--text-2);
}
.verversbalk .vv-ring{
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line-2);color:var(--text-2);
  transition:color .14s,border-color .14s;
}
.verversbalk .vv-ring svg{width:15px;height:15px}
.verversbalk.is-klaar .vv-ring{color:var(--heading-purple,#9a4fd0);border-color:var(--purple,#9a4fd0)}
/* Terugveren als je onder de drempel loslaat — alleen dán een transitie, want tijdens het slepen
   moet de balk de vinger 1-op-1 volgen. */
.verversbalk.vv-terug{transition:transform .2s ease,opacity .2s ease}
/* Verversen loopt: pijl wordt een draaiende ring, tekst zegt wat er gebeurt. */
.verversbalk.is-bezig .vv-pijl{display:none}
.verversbalk.is-bezig .vv-ring{
  border-color:var(--line-2);border-top-color:var(--purple,#9a4fd0);
  animation:vv-draai .7s linear infinite;
}
@keyframes vv-draai{to{transform:rotate(360deg)}}
/* Voorkomt dat de trekbeweging doorschiet naar de pagina eronder (scroll-chaining). */
@media (pointer:coarse){#view{overscroll-behavior-y:contain}}

/* ⚠`.ur-blk--edit` staat in cockpit.css op `touch-action:none` — nodig voor de pointer-sleep met een
   muis, maar op touch betekent het dat je niet kunt scrollen zodra je vinger op een boeking landt.
   Sinds de langdruk óók voor bestaande blokken geldt (bindKalender → touchSleep) is dat niet meer
   nodig: tot het armen hoort het gebaar aan de pagina, en daarna houdt de niet-passieve touchmove
   het scrollen tegen. `pan-y` en niet `auto`, zodat een horizontale veeg vrij blijft voor de
   dag-swipe. Op een pointer-apparaat blijft `none` staan. */
@media (pointer:coarse){.ur-blk--edit{touch-action:pan-y}}

/* ---------------- schermmelding (js/mobielbeleid.js) ----------------
   Buiten de telefoon-query: geldt óók op tablet, want daar staan Rapportages, Instellingen en het
   Dataportaal net zo goed op 'desktop-only'.
   Amber = "je ziet alles, maar bewerken hoort hier niet". Grijs = "dit scherm is niet voor deze
   breedte gemaakt". Bewust twee kleuren: het verschil tussen 'kijk gerust rond' en 'kom hier terug
   op een laptop' moet je zien vóórdat je gaat proberen.
   ⭐Sinds 30-07-2026 staat hij ACHTER de inhoud (laatste kind van #view), niet meer bovenaan: hij nam
   het eerste deel van het scherm in en je las hem elke keer opnieuw vóór je de pagina zag. Onderaan
   kost de hoogte niets meer. Daarom ook geen zijmarges meer — #view heeft z'n eigen padding — en een
   ruimere marge BOVEN, die hem losmaakt van de inhoud waar hij bij hoort. */
.schermmelding{
  display:flex;align-items:flex-start;gap:11px;
  margin:var(--s-5) 0 0;padding:11px 13px;
  border-radius:var(--r-lg);font-size:var(--fs-sm);line-height:1.45;
}
.schermmelding svg{width:17px;height:17px;flex:0 0 17px;margin-top:1px}
.schermmelding b{display:block;font-weight:700;color:var(--text);margin-bottom:2px}
.schermmelding span{display:block;color:var(--text-2)}
.schermmelding a{color:var(--accent);text-decoration:underline}
.schermmelding--lezen{border:1px solid color-mix(in srgb,var(--amber) 45%,transparent);background:var(--warn-bg)}
.schermmelding--lezen svg{color:var(--amber)}
.schermmelding--desktop{border:1px solid var(--line-2);background:var(--panel-2)}
.schermmelding--desktop svg{color:var(--text-3)}
/* ⚠Hier stond een zijmarge per breedte (`margin:var(--s-4) var(--s-6) 0`) en een padding-top-correctie
   op #view. Beide hoorden bij de oude plek bóven de inhoud: de melding zat toen buiten #view en moest
   z'n eigen contentmarge nabootsen. Nu hij ERIN staat, erft hij die padding en zou een eigen zijmarge
   hem juist smaller maken dan de rest van de pagina. */

/* ---------------- scrollen mag ALTIJD, ook met je vinger op een blok ----------------
   ⚠`.gp-bar`/`.gp-bcard` staan in cockpit.css op `touch-action:none` — nodig om ze op een desktop met
   een pointer te kunnen slepen, maar op touch betekent het: dit element neemt het gebaar over, dus
   de browser scrollt NIET. Met je vinger op een planningsbalk kwam je de pagina niet omlaag (melding
   Remco 30-07-2026). In de leesstand valt er niets te slepen, dus daar hoort het gebaar aan de
   pagina. `pan-y` en niet `auto`: verticaal scrollen mag, maar horizontaal gepingel blijft van ons —
   dat is de haak waar een dag-/weekswipe later op kan komen zonder deze regel te hoeven herzien.
   ⚠Buiten de telefoon-query: de planning staat óók op een tablet in de leesstand (mobielbeleid.js,
   tel én tab = 'lezen'), en daar is het gebaar precies hetzelfde probleem.
   De weekplanning had een andere oorzaak — `draggable="true"` maakt het blok voor de browser een
   sleepbron — en die is bij de bron opgelost in views/projectplanning.js. */
body.mob-lezen .gp-bar,body.mob-lezen .gp-bcard,body.mob-lezen .blk{touch-action:pan-y}

/* ---------------- meekijkbalk ('Bekijk als persoon', js/app.js) ----------------
   Buiten de media-query: geldt op elk formaat. Amber = de kleurtaal voor 'let op, dit is een
   afwijkende toestand' (zelfde als de planning-arcering), niet rood — er is niets kapot.
   De balk zit bovenin main, dus vóór de shellhead, en schuift de hele pagina omlaag: hij hoort
   niet over inhoud heen te liggen maar er deel van uit te maken. */
.meekijk-balk{
  flex:0 0 auto;display:flex;align-items:center;gap:11px;
  margin:12px 12px 0;padding:9px 13px;
  border:1px solid color-mix(in srgb,var(--amber) 55%,transparent);
  border-radius:var(--r-lg);background:var(--warn-bg);
  font-size:var(--fs-sm);color:var(--text);line-height:1.4;
}
.meekijk-balk svg{width:17px;height:17px;flex:0 0 17px;color:var(--amber)}
.meekijk-balk .mk-tekst{flex:1;min-width:0}
.meekijk-balk .mk-uit{
  flex:0 0 auto;min-height:34px;padding:7px 12px;border-radius:var(--r-sm);cursor:pointer;
  border:1px solid color-mix(in srgb,var(--amber) 60%,transparent);
  background:none;color:var(--text);font:inherit;font-size:var(--fs-sm);font-weight:600;
}
.meekijk-balk .mk-uit:hover{background:color-mix(in srgb,var(--amber) 16%,transparent)}
@media (max-width:700px){
  /* Op een telefoon telt elke regel: de knop onder de tekst i.p.v. ernaast, en de balk sluit aan
     op de bovenbalk (die daar geen marge heeft). */
  .meekijk-balk{margin:0;border-radius:0;border-width:0 0 1px;flex-wrap:wrap;
    padding-top:calc(9px + var(--safe-t))}
  .meekijk-balk .mk-uit{width:100%}
  /* De bovenbalk staat eronder en hoeft de notch dan niet nóg een keer vrij te houden. */
  body.meekijk .shellhead{padding-top:8px}
}

/* ---------------- 'zet op je beginscherm'-hint (js/pwa.js) ----------------
   Buiten de media-query: hij verschijnt op elk touch-toestel dat de app nog niet geïnstalleerd
   heeft, ook een brede tablet. Nooit op het loginscherm — installeren voor je binnen bent slaat
   nergens op. */
.pwa-hint{
  position:fixed;left:12px;right:12px;bottom:calc(var(--safe-b) + 12px);z-index:var(--z-dropdown);
  display:flex;align-items:center;gap:11px;padding:11px 12px;
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--e-3);animation:pwaHintOp .28s var(--ease);
}
@keyframes pwaHintOp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pwa-hint{animation:none}}
.pwa-hint__ico{width:34px;height:34px;flex:0 0 34px;border-radius:var(--r-sm);display:block}
.pwa-hint__tekst{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pwa-hint__tekst b{font-size:var(--fs-sm);font-weight:700;color:var(--text)}
.pwa-hint__tekst span{font-size:var(--fs-2xs);color:var(--text-2);line-height:1.35}
.pwa-hint__ok{flex:0 0 auto;min-height:38px;padding:8px 13px;border:1px solid rgba(154,79,208,.5);
  border-radius:var(--r-sm);background:rgba(100,32,133,.32);color:#fff;font:inherit;
  font-size:var(--fs-sm);font-weight:600;cursor:pointer}
.pwa-hint__x{flex:0 0 34px;width:34px;height:34px;display:grid;place-items:center;padding:0;
  border:0;border-radius:var(--r-sm);background:none;color:var(--text-3);cursor:pointer}
.pwa-hint__x svg{width:15px;height:15px}
body.login-mode .pwa-hint,html.auth-bezig .pwa-hint{display:none}