/* ============================================================
   TravelAppBuilder — B2C · live telefoon-mockups
   Overgenomen uit template/reisapp/vandaag-dashboard-mockups.html
   (finaal ontwerp 15 juli 2026) en gescopet onder .tabmock zodat
   de generieke klassen (.grid, .chip, .tab, .phone …) niet botsen
   met b2c.css. Schermkleuren zijn bewust hardcoded dark — ze
   matchen exact het olijf/dark-thema van de site.

   Schalen: het ontwerp is pixel-vast (telefoon 342×668 incl. kader).
   .tabmock { --s: .8 } schaalt de hele telefoon proportioneel.

   ⚠️ --s WORDT NOOIT RECHTSTREEKS GEBRUIKT, --sv WEL (8/9/2026, card-846653445).
   De pagina's zetten --s met `min(.75, tan(atan2(100vw - 96px, 342px)))`: die trig-vorm
   is de enige manier om twee lengtes te delen (px/px mag niet in calc). Levert die
   berekening ooit een waarde ≤ 0 — en op iOS Safari gebeurde dat op 7/9/2026 bij een
   echte bezoeker — dan gaat het TWEE keer mis tegelijk: `scale()` met een negatief
   getal is een puntspiegeling, dus de telefoon staat 180° gedraaid én gespiegeld, en
   `width: calc(342px * -0.28)` is een ongeldige breedte, dus de regel valt weg en het
   kader wordt zo breed als zijn inhoud. Samen geeft dat exact wat zij zag: een pagina
   die horizontaal openscheurt met links een omgekeerde telefoon. Na een herlaadbeurt
   klopt de viewportmaat en is er niets meer te zien — dus zoek de fout niet in een
   screenshot, hij zit in de rekenregel.
   De ondergrens hier vangt elke bron van zo'n waarde in één keer af, ook de mockups
   op de andere vier previewplekken en elke media query die er later bijkomt. Ligt
   écht onder de laagste legitieme waarde: de smalste telefoon geeft ~.65, en de
   krapste hoogteregel (tan(atan2(38vh, 668px))) blijft boven .25.
   ============================================================ */

.tabmock {
  --s: 1;
  --sv: max(.2, var(--s));
  width: calc(342px * var(--sv));
  height: calc(668px * var(--sv));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.55;
  text-align: left;
}
.tabmock .phone {
  transform: scale(var(--sv));
  transform-origin: top left;
}

/* ══ Interactieve demo (.tabmock--app): alle schermen in één kader ══ */
.tabmock .screen[hidden] { display: none; }  /* .screen is flex — hidden expliciet afdwingen */
.tabmock--app .tabbar .tab,
.tabmock--app .w.tap,
.tabmock--app .backrow .bk,
.tabmock--app .scamban,
.tabmock--app [data-open],
.tabmock--app .agbar,
.tabmock--app .pday,
.tabmock--app .idea,
.tabmock--app .ideas-more { cursor: pointer; }
.tabmock--app .idea:hover { border-color: #a3b763; }
.tabmock--app .w.tap:hover, .tabmock--app .pday:hover { border-color: #a3b763; }
.tabmock--app .scamban:hover { border-color: #f87171; }
.tabmock--app .tabbar .tab:hover { color: #c9c9d2; }
.tabmock--app .tabbar .tab.on:hover { color: #a3b763; }

/* ══ Telefoon ══ — width 342 i.p.v. 322: b2c.css zet * op border-box,
   het origineel rekende content-box (322 + 2×10 padding). */
.tabmock .phone {
  width: 342px; flex-shrink: 0; background: #000; border-radius: 42px;
  padding: 10px; box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .5);
}
.tabmock .screen {
  position: relative; background: #101014; color: #f2f2f5; border-radius: 32px;
  height: 648px; display: flex; flex-direction: column; overflow: hidden;
  font-size: 13.5px; line-height: 1.45;
}
.tabmock .sbar { display: flex; justify-content: space-between; align-items: center;
        padding: 12px 22px 2px; font-size: 12px; font-weight: 700; }
.tabmock .sbar .r { display: inline-flex; align-items: center; gap: 5px; }
.tabmock .sbar .r .si { display: block; }
.tabmock .sbody { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 13px 14px;
         display: flex; flex-direction: column; gap: 9px;
         scrollbar-width: thin; scrollbar-color: #2e2e38 transparent; }
.tabmock .sbody::-webkit-scrollbar { width: 5px; }
.tabmock .sbody::-webkit-scrollbar-thumb { background: #2e2e38; border-radius: 3px; }
/* sbody is kolom-flex: horizontaal scrollende rijen (foto's, chips, biljetten)
   hebben min-hoogte 0 en worden anders platgedrukt zodra de inhoud niet past */
.tabmock .sbody > * { flex-shrink: 0; }

/* white-label-banner van het reisbureau, vast boven de tabbar */
.tabmock .agbar { display: block; background: #0b0b0e; border-top: 1px solid #26262e;
        padding: 8px 12px; text-align: center; font-size: 10.5px; color: #8a8a95;
        text-decoration: none; }
.tabmock .agbar b { color: #c9c9d2; font-weight: 800; }
.tabmock .agbar .lnk-ic { color: #a3b763; }
/* Handgetekende rode cirkel om de bureaubanner (zie $agbar in _mockups.php).
   ⚠️ De telefoon klipt wat buiten het scherm valt, dus de speling blijft klein;
   max-width:none omdat een generieke svg-regel de breedte anders terugklemt, en de
   breedte staat expliciet omdat een svg mét viewBox een vervangen element is. */
.tabmock .tm-omcirkeld { position: relative; display: inline-block; }
.tabmock .tm-cirkel { position: absolute; left: -17px; top: 50%; transform: translateY(-50%);
        width: calc(100% + 34px); height: calc(100% + 19px); max-width: none;
        color: #ff4d4f; pointer-events: none; }
/* De tabbalk scrollt horizontaal, net als in de echte app: sinds Alex een eigen tab
   heeft passen er meer tabs dan er in beeld staan (style.css `.tab { min-width: 86px }`
   + `.tabbar { overflow-x:auto }`). De laatste tab is dus bewust half zichtbaar. */
.tabmock .tabbar { display: flex; border-top: 1px solid #26262e; background: #15151b;
          padding: 7px 4px 12px; overflow-x: auto; scrollbar-width: none; }
.tabmock .tabbar::-webkit-scrollbar { display: none; }
.tabmock .tab { flex: 0 0 auto; min-width: 72px; text-align: center; color: #8a8a95; font-size: 10px; font-weight: 700; padding: 3px 1px; border-radius: 10px; }
.tabmock .tab .ic { display: block; font-size: 19px; margin-bottom: 1px; }
.tabmock .tab.on { color: #a3b763; background: rgba(255, 255, 255, .06); }   /* subtiel lichter pilletje (feedback Carl 23/7) */

/* ── moderne line-iconen (card-p41nu2r): inline SVG op currentColor ──
   svg's zonder width/height-attributen — hier expliciet maten geven. */
.tabmock .tab .ic svg { width: 19px; height: 19px; display: inline-block; }
.tabmock .w-lbl svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 1px; }
.tabmock .apphead h3 svg { width: 17px; height: 17px; vertical-align: -2px; color: #a3b763; }
.tabmock .apphead h3.greet svg { width: 14px; height: 14px; }
.tabmock .fx .rate svg { width: 17px; height: 17px; vertical-align: -3px; color: #a3b763; }
.tabmock .today-stay svg { width: 16px; height: 16px; flex-shrink: 0; color: #8a8a95; }
.tabmock .note-prev { margin-top: 5px; font-size: 12px; color: #c9c9d2; line-height: 1.5; }
/* Notities-tab: de opmaak uit het controlepaneel (kopjes/lijstjes/vet) integraal getoond. */
.tabmock .notes-body { font-size: 12px; line-height: 1.6; color: #c9c9d2; }
.tabmock .notes-body p { margin: 0 0 6px; }
.tabmock .notes-body p:last-child { margin-bottom: 0; }
.tabmock .notes-body b { color: #f2f2f5; }
.tabmock .notes-body ul, .tabmock .notes-body ol { margin: 0 0 6px; padding-left: 16px; }
.tabmock .notes-body h4 { font-size: 13px; color: #f2f2f5; margin: 9px 0 3px; }
.tabmock .notes-body > :first-child { margin-top: 0; }

/* app-koppen & subpagina's */
.tabmock .apphead { padding: 6px 3px 2px; }
.tabmock .apphead .hi { font-size: 11px; font-weight: 800; text-transform: uppercase;
               letter-spacing: .09em; color: #8a8a95; }
.tabmock .apphead h3 { font-size: 23px; line-height: 1.15; margin: 1px 0 2px; }
/* de begroeting op Vandaag is bewust klein en subtiel (paginatitels blijven groot) */
.tabmock .apphead h3.greet { font-size: 14px; font-weight: 700; color: #8a8a95; letter-spacing: 0; }
.tabmock .apphead h3.greet b { color: #f2f2f5; font-weight: 700; }
.tabmock .apphead .sub { font-size: 12px; color: #8a8a95; }
.tabmock .apphead .sub b { color: #a3b763; }
/* Dashboardkop nieuw ontwerp (feedback Carl 22/7): gecentreerd — kleine, niet-vette
   begroeting + dagteller in het groen, zoals de echte app. Gescoped op .dash-head zodat
   de builder-live-preview (.apphead zonder dash-head) ongewijzigd blijft. */
.tabmock .apphead.dash-head { text-align: center; padding: 8px 3px 4px; }
.tabmock .apphead.dash-head h3 { font-size: 13px; font-weight: 400; color: #8a8a95; letter-spacing: 0; margin: 0; }
.tabmock .apphead.dash-head h3 b { font-weight: 400; color: inherit; }
.tabmock .apphead.dash-head .daycount { font-size: 15px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: #a3b763; margin-top: 2px; }
.tabmock .apphead.dash-head .daycount[hidden] { display: none; }
/* De sub-regel + chips onder de dagteller bestaan alleen in de builder-live-preview
   ("dit weten we al van je reis"); in de app en de mockups staat er niets. */
.tabmock .apphead.dash-head .sub { margin-top: 3px; }
/* Gecentreerde paginakop (feedback Carl 23/7): titel in hoofdletters, plaats eronder — zoals de
   echte app (.page-head). Gescoped zodat dash-head + builder-begroeting ongemoeid blijven. */
.tabmock .apphead.page-head { text-align: center; padding: 9px 3px 4px; }
.tabmock .apphead.page-head h3 { text-transform: uppercase; letter-spacing: .05em; font-size: 16px; color: #f2f2f5; margin: 0 0 3px; }
.tabmock .apphead.page-head .sub b { text-transform: uppercase; letter-spacing: .04em; font-size: 13px; }
/* De reisperiode op een eigen regel — zie .sub-per in template/reisapp/style.css. */
.tabmock .apphead.page-head .sub .sub-per { display: block; margin-top: 1px; }
/* Foto-tegel voor de suggestiekaarten (echte foto's i.p.v. emoji-kleurvlakken) — zoals de app. */
.tabmock .reco .ph.pic { height: 76px; background-size: cover; background-position: center; }
/* Subpagina-kop = dezelfde kop als een tab (card-123681860), net als in de echte app.
   Stond hier met dezelfde tweedeling als in style.css: tabs gecentreerd en in hoofdletters,
   subpagina's links uitgelijnd en groter. De ‹-knop staat nu absoluut links zodat de titel
   gecentreerd blijft; position:relative op .backrow is daarvoor het containing block. */
.tabmock .backrow { position: relative; text-align: center; padding: 9px 3px 4px; }
.tabmock .backrow .bk { position: absolute; top: 7px; left: 2px;
               width: 30px; height: 30px; border-radius: 10px; background: #1a1a20;
               border: 1px solid #26262e; display: grid; place-items: center;
               color: #a3b763; font-size: 15px; font-weight: 800; }
.tabmock .backrow h3 { text-transform: uppercase; letter-spacing: .05em; font-size: 16px;
               color: #f2f2f5; margin: 0 0 3px; padding: 0 34px; line-height: 1.25; overflow-wrap: anywhere; }
.tabmock .backrow .loc { display: block; margin: 0; font-size: 12px; color: #8a8a95; }
.tabmock .backrow .loc:empty { display: none; }

/* widgets */
.tabmock .w { background: #1a1a20; border: 1px solid #26262e; border-radius: 16px;
     padding: 9.5px 13px; }   /* iets compacter, card-vis6mv9 */
.tabmock .w-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tabmock .w-lbl { font-size: 9.5px; font-weight: 700; text-transform: uppercase;
         letter-spacing: .09em; color: #8a8a95; }
/* ⚠️ DE MOCKUP WAS DONKERDER DAN DE ECHTE APP (19/9/2026, auditbevinding I24).
   De app zet `.chev` op #6b6b78 (template/reisapp/style.css:905); hier stond #55555f. Op de
   kaartachtergrond #1a1a20 is dat 2,35:1 tegenover 3,30:1 — de mockup toonde dus een chevron
   die in het echte product niet bestaat, en bovendien de slechtst leesbare van de twee.
   Dat raakt de regel van het preview-pakket: het app-ontwerp staat op vijf plekken en die moeten
   hetzelfde tonen. Deze regel volgt nu de app.
   ⚠️ EN DAARMEE IS HET NOG NIET AF: 3,30:1 haalt de 3:1 voor een besturingselement wél, maar
   niet de 4,5:1 die voor tekst geldt — en dit is een tekstglyph. Hoger gaan betekent
   template/reisapp/style.css wijzigen, en dat verandert élke gepubliceerde app van elke klant.
   Dat is een beslissing voor Carl, niet voor een stylesheet-opruiming. */
.tabmock .chev { color: #6b6b78; font-size: 14px; font-weight: 500; }
.tabmock .w.tap { border-color: #2e2e38; }

/* Een niveau zachter en zonder icoon (card-vis6mv9): de dagtitel las als een hero-heading. */
.tabmock .today-title { font-size: 13.5px; font-weight: 600; margin: 2px 0 4px; }
/* De regel die van de dagkaart een deur maakt (card-312220970). Accentkleur, niet grijs: grijs
   leest als bijschrift en blijft dan net zo onopgemerkt als de tab zelf. */
.tabmock .today-meer { font-size: 11.5px; font-weight: 600; color: #a3b763; margin: 0 0 2px; }
.tabmock .today-item { display: flex; gap: 8px; font-size: 12.5px; color: #c9c9d2; padding: 2px 0; }
.tabmock .today-item .t { color: #a3b763; font-weight: 700; font-variant-numeric: tabular-nums;
                 min-width: 38px; }
.tabmock .today-stay { display: flex; align-items: center; gap: 7px; margin-top: 8px; padding-top: 8px;
              border-top: 1px solid #26262e; font-size: 12px; color: #8a8a95; }
.tabmock .today-stay b { color: #f2f2f5; }

.tabmock .wx { display: flex; align-items: center; gap: 12px; }
.tabmock .wx .ico { font-size: 34px; }
.tabmock .wx .deg { font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tabmock .wx .met { font-size: 11.5px; color: #8a8a95; line-height: 1.4; }
.tabmock .wx .met b { color: #c9c9d2; }

/* ── "Ideeën voor vandaag" — fotokaarten-carrousel (template style.css .ideas-*) ──
   Verving op 27/7/2026 de oude "Aanbevolen voor jou"-rij (.reco), die in de app niet
   meer bestaat. Maten = de app, geschaald naar het mockup-telefoontje. */
.tabmock .ideas-block { display: flex; flex-direction: column; gap: 4px; }
.tabmock .ideas-head { padding: 5px 3px 0; }
/* Sectiekop in gewone schrijfwijze, geen kapitalen (card-vis6mv9). */
/* Zelfde koptype als .w-lbl ("Planning vandaag"), op vraag van Carl 12/8/2026: sinds er
   twee koppen boven elkaar staan (Suggesties + Lokale evenementen) viel het uit de toon dat
   deze groter en witter waren dan alle andere sectiekoppen. Vervangt de keuze uit
   card-vis6mv9 om ze juist in gewone schrijfwijze te zetten. */
.tabmock .ideas-lbl { font-size: 9.5px; font-weight: 700; text-transform: uppercase;
         letter-spacing: .09em; color: #8a8a95; }
.tabmock .ideas-row { display: flex; gap: 8px; overflow-x: auto; margin: 2px -13px 0;
            padding: 0 13px 4px; scrollbar-width: none; }
.tabmock .ideas-row::-webkit-scrollbar { display: none; }
.tabmock .idea { flex: 0 0 auto; width: 126px; display: flex; flex-direction: column;
        background: #1a1a20; border: 1px solid #26262e; border-radius: 14px; overflow: hidden; }
.tabmock .idea .iph { position: relative; height: 92px; flex: 0 0 auto; display: grid;
        place-items: center; font-size: 28px; background-size: cover; background-position: center; }
.tabmock .idea .iph::after { content: ''; position: absolute; inset: auto 0 0 0; height: 28px;
        background: linear-gradient(transparent, rgba(0, 0, 0, .28)); }
.tabmock .idea .itx { padding: 7px 9px 9px; }
.tabmock .idea .itx b { display: block; font-size: 12px; line-height: 1.25; }
.tabmock .idea .itx span { display: block; margin-top: 2px; font-size: 10.5px; color: #8a8a95;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabmock .idea-badge { position: absolute; left: 6px; top: 6px; z-index: 1; font-size: 9px;
        font-weight: 700; letter-spacing: .02em; color: #fff; background: rgba(16, 16, 20, .72);
        border-radius: 999px; padding: 2px 7px; }
/* Detailweergave van één kaart (card-516521700): de foto waarop je tikte bovenaan,
   daaronder de tekst. Spiegelt .det-* in template/reisapp/style.css. */
.tabmock .dt-hero { position: relative; height: 122px; margin: 0 -13px 8px;
        background-size: cover; background-position: center; background-color: #2a2c33; }
.tabmock .dt-body { margin-top: 0; }
.tabmock .dt-body .dt-tekst { margin: 0 0 8px; }
.tabmock .dt-acties { display: flex; align-items: center; gap: 10px; }
.tabmock .dt-acties .s2maps { position: static; }
.tabmock .dt-meer { margin-top: 8px; }

/* Slepen met de muis over de horizontale rijen. Het handje is hier het enige signaal dat
   er méér kaarten staan: de scrollbalk is verborgen en een muis kan niet vegen. */
.tabmock .ideas-row, .tabmock .hphotos, .tabmock .cats, .tabmock .tabbar { cursor: grab; }
.tabmock .tm-sleept { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.tabmock .tm-sleept img { pointer-events: none; }

/* Datumbadge van een evenement: groen, zodat zichtbaar is welke kaart aan een dag
   vastzit en welke altijd kan (card-472884677). Spiegelt template/reisapp/style.css. */
.tabmock .idea-badge--ev { background: rgba(21, 128, 61, .88); }

/* Sfeerbeeld: geen foto van dít evenement, dus de plaats — verduisterd over de HELE foto
   (niet half), met hoogstens vier woorden eroverheen en het categorie-icoon doorschijnend
   erachter. Spiegelt .idea--sfeer in template/reisapp/style.css. */
/* height: auto is nodig: .tabmock .idea .iph::after zet een strookje van 20px voor het
   gewone verloopje onderaan, en dat won anders van deze regel. */
.tabmock .idea--sfeer .iph::after, .tabmock .dt-hero--sfeer::after {
        content: ''; position: absolute; inset: 0; height: auto; background: rgba(0, 0, 0, .46); }
.tabmock .idea--sfeer .ov-ic, .tabmock .dt-hero--sfeer .ov-ic {
        position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
        z-index: 1; font-size: 26px; opacity: .3; }
.tabmock .idea--sfeer .ov-titel, .tabmock .dt-hero--sfeer .ov-titel {
        position: absolute; left: 7px; right: 7px; bottom: 6px; z-index: 2;
        color: #fff; font-weight: 700; font-size: 11px; line-height: 1.25;
        text-shadow: 0 1px 4px rgba(0, 0, 0, .55); }
.tabmock .dt-hero--sfeer .ov-ic { font-size: 34px; }
.tabmock .dt-hero--sfeer .ov-titel { left: 10px; right: 10px; bottom: 9px; font-size: 13px; }
.tabmock .s2badge--ev { background: rgba(21, 128, 61, .13); color: #15803d; }
.tabmock .ideas-more { align-self: flex-start; margin: 0 3px; padding: 2px 0; color: #a3b763;
        font-size: 12px; font-weight: 700; }

.tabmock .reco-row { display: flex; gap: 8px; overflow-x: auto; margin: 4px -13px 0;
            padding: 0 13px 4px; scrollbar-width: none; }
.tabmock .reco-row::-webkit-scrollbar { display: none; }
.tabmock .reco { min-width: 124px; max-width: 124px; background: #1a1a20; border: 1px solid #26262e;
        border-radius: 14px; overflow: hidden; }
.tabmock .reco .ph { height: 66px; display: grid; place-items: center; font-size: 26px; }
.tabmock .ph-strand { background: linear-gradient(135deg, #14506e, #2b8aa5); }
.tabmock .ph-wijn { background: linear-gradient(135deg, #4e1a30, #7e2f47); }
.tabmock .ph-boot { background: linear-gradient(135deg, #1e3a52, #3a6d8c); }
.tabmock .reco .tx { padding: 7px 9px 9px; }
.tabmock .reco .tx b { display: block; font-size: 12px; line-height: 1.25; }
.tabmock .reco .tx span { font-size: 10.5px; color: #8a8a95; }

.tabmock .fx { display: flex; align-items: center; gap: 12px; }
.tabmock .fx .rate { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tabmock .fx .ex { font-size: 11.5px; color: #8a8a95; }
.tabmock .fx .ex b { color: #a3b763; font-variant-numeric: tabular-nums; }

.tabmock .alex-row { display: flex; gap: 10px; align-items: center; }
.tabmock .ava { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
       background: linear-gradient(135deg, #a3b763, #6d8040); color: #15170d;
       display: grid; place-items: center; font-weight: 800; font-size: 16px; }
.tabmock img.ava { object-fit: cover; background: #26262e; }
.tabmock .alex-row .who { display: flex; flex-direction: column; min-width: 0; }
.tabmock .alex-row .who b { display: block; font-size: 13px; font-weight: 600; }
.tabmock .alex-row .who span { font-size: 12px; color: #8a8a95; }
.tabmock .alex-row .who-line b { display: inline; }
/* Middot weg: "Alex, jouw persoonlijke reisgids" is één zin (card-vis6mv9). */
.tabmock .alex-row .who .gtease { display: block; margin-top: 3px; font-size: 11.5px; font-style: italic; color: #8a8a95; line-height: 1.45; }
.tabmock .chip { display: inline-block; background: #22222b; border: 1px solid #2e2e38;
        border-radius: 999px; padding: 5px 11px; font-size: 11.5px; color: #c9c9d2;
        margin-top: 8px; }
.tabmock .chip.acc { border-color: rgba(163, 183, 99, .5); color: #a3b763; }

.tabmock .word { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.tabmock .word .nl { font-size: 13px; font-weight: 600; }
.tabmock .word .hu { color: #a3b763; font-weight: 600; font-size: 13px; }
.tabmock .word .fon { font-size: 10.5px; font-weight: 400; color: #8a8a95; }
.tabmock .play { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
        background: rgba(163, 183, 99, .11); color: #a3b763; display: grid;
        place-items: center; font-size: 10.5px; }

/* sectielabel los in de sbody (Komende uren / Komende dagen) */
.tabmock .slbl { font-size: 10px; font-weight: 800; text-transform: uppercase;
       letter-spacing: .09em; color: #c4c4ce; padding: 4px 3px 0; text-align: center; }

/* weerpagina */
.tabmock .wx-now { text-align: center; padding: 4px 0 2px; }
.tabmock .wx-now .big { font-size: 54px; font-weight: 800; line-height: 1;
               font-variant-numeric: tabular-nums; }
.tabmock .wx-now .ico { font-size: 40px; display: block; margin-bottom: 4px; }
.tabmock .wx-now .cond { color: #8a8a95; font-size: 13px; margin-top: 4px; }
.tabmock .hours { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px;
         scrollbar-width: none; }
.tabmock .hours::-webkit-scrollbar { display: none; }
.tabmock .hr { min-width: 56px; text-align: center; background: #1a1a20; border: 1px solid #26262e;
      border-radius: 13px; padding: 8px 4px; }
.tabmock .hr .h { font-size: 10.5px; color: #8a8a95; }
.tabmock .hr .i { font-size: 17px; display: block; margin: 3px 0; }
.tabmock .hr .d { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tabmock .hr .p { display: block; font-size: 10px; color: #7dd3fc; font-weight: 700;
        margin-top: 1px; min-height: 13px; font-variant-numeric: tabular-nums; }
/* dagkaarten (komende dagen) — eigen kaart per dag, zoals in de echte app */
.tabmock .dayc { display: flex; align-items: center; gap: 10px; background: #1a1a20;
        border: 1px solid #26262e; border-radius: 14px; padding: 10px 12px; }
.tabmock .dayc .wi { font-size: 20px; flex-shrink: 0; }
.tabmock .dayc .pl { flex: 1; font-weight: 700; font-size: 13px; min-width: 0; }
.tabmock .dayc .pl span { display: block; font-size: 10.5px; color: #8a8a95; font-weight: 400;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabmock .dayc .pp { color: #7dd3fc; font-size: 11.5px; font-weight: 700; min-width: 33px;
        text-align: right; font-variant-numeric: tabular-nums; }
.tabmock .dayc .mm { font-variant-numeric: tabular-nums; color: #8a8a95; font-size: 12.5px;
        min-width: 64px; text-align: right; }
.tabmock .dayc .mm b { color: #f2f2f5; font-size: 13.5px; }
.tabmock .day-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px;
           border-bottom: 1px solid #1e1e26; font-size: 13px; }
.tabmock .day-row:last-child { border-bottom: none; }
.tabmock .day-row .dd { min-width: 46px; color: #8a8a95; font-size: 11.5px; font-weight: 700; }
.tabmock .day-row .pl { flex: 1; font-weight: 700; }
.tabmock .day-row .pl span { display: block; font-size: 10.5px; color: #8a8a95; font-weight: 400; }
.tabmock .day-row .wi { font-size: 17px; }
.tabmock .day-row .mm { font-variant-numeric: tabular-nums; color: #c9c9d2; font-size: 12px;
               min-width: 64px; text-align: right; }
.tabmock .day-row .mm b { color: #f2f2f5; }
.tabmock .wx-note { font-size: 11px; color: #8a8a95; text-align: center; padding: 4px 10px 0; }

/* valutapagina */
.tabmock .fx-disp { background: #1a1a20; border: 1px solid #26262e; border-radius: 18px;
           padding: 11px 16px 9px; text-align: right; }
.tabmock .fx-disp .in { font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tabmock .fx-disp .out { font-size: 19px; color: #a3b763; font-weight: 800;
                font-variant-numeric: tabular-nums; margin-top: 2px; }
.tabmock .fx-disp .kr { font-size: 10.5px; color: #8a8a95; margin-top: 7px; text-align: left; }
.tabmock .bills { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.tabmock .bills::-webkit-scrollbar { display: none; }
.tabmock .bill { flex-shrink: 0; background: rgba(163, 183, 99, .13); color: #a3b763;
        border: 1px solid rgba(163, 183, 99, .35); border-radius: 999px;
        padding: 5px 12px; font-size: 11.5px; font-weight: 800;
        font-variant-numeric: tabular-nums; }
.tabmock .paycheck { display: flex; align-items: center; gap: 8px;
            background: rgba(163, 183, 99, .10); border: 1px solid rgba(163, 183, 99, .4);
            border-radius: 14px; padding: 9px 12px; font-size: 12px; }
.tabmock .paycheck b { font-variant-numeric: tabular-nums; }
.tabmock .paycheck .back { margin-left: auto; }
.tabmock .paycheck .back b { color: #4ade80; font-size: 14px; }
.tabmock .pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tabmock .key { background: #1a1a20; border: 1px solid #26262e; border-radius: 14px;
       text-align: center; padding: 8px 0; font-size: 17px; font-weight: 800;
       font-variant-numeric: tabular-nums; }
.tabmock .key.fn { color: #a3b763; font-size: 15px; }

/* ── Alex-tab (template style.css .nb-*) ────────────────────────────────────
   Sinds 27/7/2026 is Alex een hoofdtab met een eigen paginakop — géén subpagina
   met ‹-terugknop en géén "Meteen voorlezen"-schakelaar meer (die instelling is
   naar de Instellingen-tab verhuisd). Markup = nearby.js, maten geschaald. */
.tabmock .gps { display: inline-flex; align-items: center; gap: 5px; }
.tabmock .nb-cta { display: block; width: 100%; background: #a3b763; color: #101014;
        border-radius: 12px; padding: 12px; text-align: center; font-size: 13.5px; font-weight: 700; }
.tabmock .nb-cta svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 3px; }
.tabmock .nb-cta2 { display: block; width: 100%; border: 1px solid #2e2e38; color: #f2f2f5;
        border-radius: 10px; padding: 10px; text-align: center; font-size: 12.5px; font-weight: 700; }
.tabmock .nb-cta2 svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 3px; color: #8a8a95; }
.tabmock .nb-card { background: #1a1a20; border-radius: 14px; padding: 12px 13px; }
.tabmock .nb-eyebrow { font-size: 9.5px; letter-spacing: .07em; color: #a3b763; margin-bottom: 4px; }
.tabmock .nb-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 6px; line-height: 1.25; }
.tabmock .nb-story { font-size: 12.5px; line-height: 1.55; color: #c9c9d2; }
/* Rechts uitgelijnd (vraag Carl 11/8/2026): sinds het twee icoonknopjes zijn in plaats van
   een brede knop met tekst, hoort het paar aan de rand te staan en niet los in het midden. */
.tabmock .nb-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 11px; }
/* Voorlezen is sinds 11/8/2026 een LUIDSPREKER zonder tekst, naast het kaartje (vraag Carl).
   Twee gelijke vierkantjes lezen als één rij knoppen; de tekst "Voorlezen" nam de halve kaart in
   terwijl het icoon hetzelfde zegt. Het kaartje mocht iets groter, dus beide staan op 18px. */
.tabmock .nb-play { background: #a3b763; color: #101014; border-radius: 10px; padding: 9px 12px;
  display: inline-flex; align-items: center; justify-content: center; }
.tabmock .nb-play svg { width: 18px; height: 18px; }
.tabmock .nb-map { background: #22222b; border-radius: 10px; padding: 9px 12px; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
        display: flex; align-items: center; }
.tabmock .nb-lbl { font-size: 9.5px; letter-spacing: .07em; color: #8a8a95; padding: 4px 2px 0; }

/* ── Alex-tab: avatar in het midden, knoppen onderaan ────────────────────────
   Knoppen bovenaan een telefoonscherm zijn met de duim lastig te bedienen; in de app
   staat de avatar daarom in het midden en staan de knoppen eronder (card-vp8ksx4). */
.tabmock .alexmenu { display: flex; flex-direction: column; min-height: 330px; }
.tabmock .alexmenu-top { flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 8px; padding: 6px 0 14px; }
.tabmock .alexmenu-ava { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; background: #26262e; }
.tabmock .alexmenu-tag { margin: 0; font-size: 13px; font-weight: 600; color: #c9c9d2; }
.tabmock .alexmenu-btns { display: flex; flex-direction: column; gap: 7px; }

/* ── Plan een uitstap ────────────────────────────────────────────────────────
   Zoekbalk en bestemmingsknoppen, zelfde vorm als in de app (card-zt5291b). */
.tabmock .nb-pagintro { margin: 0 2px 9px; font-size: 11.5px; line-height: 1.5; color: #8a8a95; }
.tabmock .nb-zoek { background: #1a1a20; border: 1px solid #26262e; border-radius: 12px;
    padding: 9px 11px; margin-bottom: 9px; }
.tabmock .nb-zoek span { font-size: 12px; color: #8a8a95; }
.tabmock .nb-uit { display: flex; align-items: center; justify-content: space-between; gap: 9px;
    background: #1a1a20; border: 1px solid #2e2e38; border-radius: 12px; padding: 9px 11px;
    margin-bottom: 6px; }
.tabmock .nb-uit b { display: block; font-size: 12.5px; font-weight: 600; }
.tabmock .nb-uit span { display: block; margin-top: 2px; font-size: 10.5px; color: #8a8a95; }
.tabmock .nb-uit svg { width: 15px; height: 15px; flex-shrink: 0; color: #a3b763; }
/* Bronlink onder een evenement uit "Vandaag ter plaatse". */
.tabmock .nb-bron { display: inline-block; margin-top: 3px; font-size: 10px; color: #a3b763; }
.tabmock .nb-top { display: flex; gap: 9px; align-items: flex-start; background: #1a1a20;
        border-radius: 12px; padding: 9px 11px; }
.tabmock .nb-rank { flex: none; width: 19px; height: 19px; border-radius: 50%; background: #22222b;
        color: #8a8a95; font-size: 10.5px; font-weight: 700; display: flex; align-items: center;
        justify-content: center; margin-top: 1px; }
.tabmock .nb-top-must .nb-rank { background: #a3b763; color: #101014; }
.tabmock .nb-top b { display: block; font-size: 12.5px; font-weight: 600; }
.tabmock .nb-top span:not(.nb-rank) { display: block; font-size: 10.5px; color: #8a8a95;
        margin-top: 2px; line-height: 1.45; }
.tabmock .nb-top em { color: #a3b763; font-style: normal; font-weight: 700; }
.tabmock .nb-ev { background: #1a1a20; border-radius: 12px; padding: 10px 12px; }
.tabmock .nb-ev-row { font-size: 11.5px; line-height: 1.5; padding: 2px 0; }
.tabmock .nb-ev-row span { color: #8a8a95; margin-right: 5px; }
.tabmock .nb-ev-row em { color: #8a8a95; font-style: normal; font-size: 10.5px; }
.tabmock .nb-ev-at { font-size: 9.5px; color: #8a8a95; margin-top: 6px; }
.tabmock .bub { max-width: 86%; border-radius: 16px; padding: 9px 12px; font-size: 12.5px; }
.tabmock .bub.alex { background: #22222b; border-top-left-radius: 5px; }
.tabmock .bub.me { background: #a3b763; color: #15170d; font-weight: 600; margin-left: auto;
          border-top-right-radius: 5px; }
.tabmock .typing { display: inline-flex; gap: 4px; background: #22222b; border-radius: 16px;
          border-top-left-radius: 5px; padding: 12px 14px; }
.tabmock .typing i { width: 6px; height: 6px; border-radius: 50%; background: #8a8a95;
            animation: tabmockTick 1.2s infinite; }
.tabmock .typing i:nth-child(2) { animation-delay: .2s; }
.tabmock .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes tabmockTick { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tabmock .typing i { animation: none; } }
.tabmock .askrow { margin-top: auto; display: flex; gap: 8px; align-items: center; }
.tabmock .askrow .inp { flex: 1; background: #1a1a20; border: 1px solid #2e2e38;
               border-radius: 999px; padding: 10px 15px; color: #8a8a95; font-size: 12.5px; }
.tabmock .askrow .mic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
               background: #a3b763; color: #15170d; display: grid; place-items: center;
               font-size: 17px; }

/* woordjes */
.tabmock .cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.tabmock .cats::-webkit-scrollbar { display: none; }
.tabmock .cat { flex-shrink: 0; background: #22222b; border: 1px solid #34343f;
       border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 700;
       color: #c9c9d2; }
.tabmock .cat.on { background: rgba(163, 183, 99, .18); border-color: #a3b763;
          color: #c8dc8a; }
.tabmock .ph-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px;
          border-bottom: 1px solid #1e1e26; }
.tabmock .ph-row:last-child { border-bottom: none; }
.tabmock .ph-row .txt b { display: block; font-size: 13.5px; }
.tabmock .ph-row .txt .hu { color: #a3b763; font-weight: 700; font-size: 13px; }
.tabmock .ph-row .txt .fon { font-size: 11px; color: #8a8a95; }

/* planning */
.tabmock .pday { display: flex; gap: 10px; background: #1a1a20; border: 1px solid #26262e;
        border-radius: 16px; padding: 11px 12px; }
.tabmock .pday.now { border-color: rgba(163, 183, 99, .55); }
.tabmock .pbadge { flex-shrink: 0; width: 44px; height: 50px; border-radius: 12px;
          background: rgba(163, 183, 99, .13); display: flex; flex-direction: column;
          align-items: center; justify-content: center; }
.tabmock .pbadge b { font-size: 18px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tabmock .pbadge small { font-size: 9px; font-weight: 800; letter-spacing: .08em;
                text-transform: uppercase; color: #a3b763; }
.tabmock .pday .bd { min-width: 0; flex: 1; }
/* Zelfde regel als de app (card-153184757): lange namen mogen over twee regels. */
.tabmock .pday .bd b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.3; }
.tabmock .pday .bd .st { font-size: 11.5px; color: #8a8a95; }
.tabmock .pday .bd .now-tag { display: inline-block; font-size: 9px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; color: #a3b763;
  background: rgba(163, 183, 99, .13); border-radius: 999px; padding: 2px 8px;
  margin-bottom: 3px; }
.tabmock .pday .chev { align-self: center; }

/* hotelpagina (via de weekplanning): fotostrip + website + suggesties */
.tabmock .hphotos { display: flex; gap: 8px; overflow-x: auto; margin: 0 -13px;
          padding: 0 13px 4px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.tabmock .hphotos::-webkit-scrollbar { display: none; }
.tabmock .hphoto { min-width: 205px; width: 205px; height: 132px; object-fit: cover;
         border-radius: 14px; border: 1px solid #26262e; scroll-snap-align: start; }
.tabmock .hstay { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px;
        line-height: 1.5; }
.tabmock .hstay b { font-weight: 700; }
.tabmock .hstay .lk { color: #a3b763; font-weight: 700; }
.tabmock .hstay .d { color: #8a8a95; }
.tabmock .hstay svg { width: 16px; height: 16px; flex-shrink: 0; color: #8a8a95; margin-top: 2px; }
.tabmock .sug2 { background: #1a1a20; border: 1px solid #26262e; border-radius: 16px;
        padding: 11px 13px; }
.tabmock .sug2 .s2top { display: flex; justify-content: space-between; gap: 8px;
               align-items: flex-start; }
.tabmock .sug2 .s2top b { font-size: 13.5px; line-height: 1.3; }
.tabmock .s2badge { flex-shrink: 0; background: rgba(163, 183, 99, .13); color: #a3b763;
          border-radius: 999px; padding: 3px 9px; font-size: 10.5px; font-weight: 700;
          white-space: nowrap; }
.tabmock .sug2 p { font-size: 12px; color: #c9c9d2; margin: 5px 0 6px; line-height: 1.5; }
.tabmock .s2link { color: #7dd3fc; font-size: 12px; font-weight: 700; }
/* Kaart-icoontje rechtsboven → in de echte app een Google Maps-routelink
   (card-969917474). Hier decoratief; maten geschaald naar de mockup. */
.tabmock .sug2 { position: relative; }
.tabmock .sug2 .s2maps { position: absolute; top: 6px; right: 8px; display: inline-flex;
          align-items: center; justify-content: center; color: #6b6b78; }
.tabmock .sug2 .s2maps svg { width: 14px; height: 14px; }
.tabmock .sug2 .s2top { padding-right: 20px; }

/* dagsuggesties */
.tabmock .sug { display: flex; align-items: center; gap: 10px; background: #1a1a20;
       border: 1px solid #26262e; border-radius: 14px; padding: 9px 11px; }
.tabmock .sug .ph { width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0;
           display: grid; place-items: center; font-size: 20px; }
.tabmock .sug .tx b { display: block; font-size: 12.5px; line-height: 1.3; }
.tabmock .sug .tx span { font-size: 11px; color: #8a8a95; }
.tabmock .ph-wandel { background: linear-gradient(135deg, #2c4a24, #4c7a3a); }
.tabmock .ph-bron { background: linear-gradient(135deg, #1c4f5c, #2f7d8c); }
.tabmock .sug.open { flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 10px;
            border-color: rgba(163, 183, 99, .5); }
.tabmock .sug.open .banner { height: 66px; border-radius: 13px 13px 0 0; display: grid;
                    place-items: center; font-size: 28px; }
.tabmock .sug.open .tx { padding: 8px 12px 0; }
.tabmock .lnks { display: flex; gap: 6px; padding: 8px 12px 0; }
.tabmock .lnk { background: rgba(163, 183, 99, .13); border: 1px solid rgba(163, 183, 99, .4);
       color: #a3b763; border-radius: 999px; padding: 5px 11px; font-size: 11px;
       font-weight: 700; }

/* info */
.tabmock .info-card .ln { font-size: 12.5px; color: #c9c9d2; padding: 2px 0; }
.tabmock .info-card .ln b { color: #f2f2f5; }
.tabmock .info-card .warn { color: #f87171; font-weight: 700; }
/* Noodnummers: één aantikbare rij per nummer, met icoon — zelfde opbouw als .emerg-row in
   template/reisapp/style.css (Carl, 13/8/2026). Wijzigt daar iets, wijzig het hier mee. */
.tabmock .emerg-card { padding: 2px 13px; }
.tabmock .emerg-row { display: flex; align-items: center; gap: 9px; padding: 6px 0;
        border-bottom: 1px solid #26262e; }
.tabmock .emerg-row:last-child { border-bottom: none; }
.tabmock .emerg-row .emerg-ic { flex: 0 0 19px; line-height: 0; color: var(--mk-accent, #a3b763); }
.tabmock .emerg-row .emerg-ic svg { width: 14px; height: 14px; }
.tabmock .emerg-row span { font-size: 12.5px; color: #d3d3db; flex: 1 1 auto; }
.tabmock .emerg-row b { color: var(--mk-accent, #a3b763); font-size: 17px; font-weight: 800;
        font-variant-numeric: tabular-nums; }
/* scam-waarschuwingsbanner op Info → opent het scams-scherm */
.tabmock .scamban { display: flex; align-items: center; gap: 10px;
        background: rgba(248, 113, 113, .10); border: 1px solid rgba(248, 113, 113, .45);
        border-radius: 16px; padding: 11px 13px; }
.tabmock .scamban .ic { font-size: 21px; flex-shrink: 0; }
.tabmock .scamban .tx { flex: 1; min-width: 0; }
.tabmock .scamban .tx b { display: block; font-size: 13.5px; color: #f87171; }
.tabmock .scamban .tx span { font-size: 11.5px; color: #c9c9d2; }
/* "Iets melden" hergebruikt de banner maar in de rustige kleuren (card-0wfbnhl): dit is een
   uitnodiging, geen waarschuwing. Zonder deze override ziet support er in de etalage even
   alarmerend uit als een scam-waarschuwing. */
.tabmock .supban { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .10); }
.tabmock .supban .tx b { color: #f5f5f5; }

/* bronvermelding CC BY-SA onderaan Info (card-507977686) — zelfde stilte als in de app */
.tabmock .attribution { margin: 12px 6px 4px; font-size: 8.5px; line-height: 1.4; color: #4a4a54; }

/* reiskosten (kostenverdeler — in elke reis-app inbegrepen) */
.tabmock .exp-total { font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums;
          margin-top: 3px; }
.tabmock .exp-row { display: flex; align-items: center; gap: 10px; padding: 8px 0;
        border-bottom: 1px solid #1e1e26; }
.tabmock .exp-row:last-child { border-bottom: none; padding-bottom: 0; }
.tabmock .exp-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.tabmock .exp-tx { flex: 1; min-width: 0; }
.tabmock .exp-tx b { display: block; font-size: 13px; line-height: 1.3; }
.tabmock .exp-tx span { font-size: 10.5px; color: #8a8a95; }
.tabmock .exp-amt { font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums;
        flex-shrink: 0; }
.tabmock .exp-bal { display: flex; justify-content: space-between; align-items: center;
        gap: 8px; padding: 6px 0; border-bottom: 1px solid #1e1e26; font-size: 13px; }
.tabmock .exp-bal:last-child { border-bottom: none; padding-bottom: 0; }
.tabmock .exp-bal .exp-name { font-weight: 700; }
.tabmock .exp-get { color: #4ade80; font-weight: 700; font-variant-numeric: tabular-nums; }
.tabmock .exp-pay { color: #f87171; font-weight: 700; font-variant-numeric: tabular-nums; }
.tabmock .exp-even { color: #8a8a95; font-size: 12px; }
.tabmock .exp-settle { display: flex; align-items: center; gap: 8px; padding: 7px 0;
           border-bottom: 1px solid #1e1e26; }
.tabmock .exp-settle:last-child { border-bottom: none; padding-bottom: 0; }
.tabmock .exp-stx { flex: 1; min-width: 0; font-size: 12.5px; color: #c9c9d2; }
.tabmock .exp-stx b { color: #f2f2f5; font-weight: 700; }
.tabmock .exp-pill { flex-shrink: 0; background: rgba(74, 222, 128, .13); color: #4ade80;
         border: 1px solid rgba(74, 222, 128, .4); border-radius: 999px;
         padding: 4px 10px; font-size: 10.5px; font-weight: 800; }

/* ── Alex: introductiescherm, plekken in de buurt, foto-antwoord (27/7/2026) ──
   Zelfde stijl als style.css in template/reisapp, pixelvast geschaald naar 342×668. */
.tabmock .ax-hi { text-align: center; padding: 4px 6px 2px; }
.tabmock .ax-ava { width: 62px; height: 62px; border-radius: 50%; object-fit: cover;
         border: 2px solid #a3b763; margin-bottom: 8px; }
.tabmock .ax-hi b { display: block; font-size: 15px; font-weight: 700; margin-bottom: 5px; }
.tabmock .ax-hi p { font-size: 12.5px; line-height: 1.55; color: #c9c9d2; }
.tabmock .ax-priv .w-lbl { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }
.tabmock .ax-priv .w-lbl svg { width: 15px; height: 15px; color: #a3b763; flex-shrink: 0; }
.tabmock .ax-priv .ln { font-size: 11.5px; line-height: 1.5; color: #c9c9d2; padding: 2px 0; }

/* "Wat is hier bijzonder?" — de plekken eronder, op afstand gesorteerd */
.tabmock .nb-near { display: flex; gap: 9px; align-items: center; background: #1a1a20;
         border-radius: 12px; padding: 9px 11px; }
.tabmock .nb-dist { flex-shrink: 0; align-self: flex-start; margin-top: 1px;
         background: rgba(163, 183, 99, .14); color: #a3b763; border-radius: 999px;
         padding: 3px 8px; font-size: 10px; font-weight: 800; }
.tabmock .nb-near > div { flex: 1; min-width: 0; }
.tabmock .nb-near b { display: block; font-size: 12.5px; font-weight: 600; }
.tabmock .nb-near span:not(.nb-dist):not(.chev) { display: block; font-size: 10.5px;
         color: #8a8a95; line-height: 1.4; margin-top: 1px; }
.tabmock .backrow .loc svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 2px; }

/* Foto-antwoord: de foto die de reiziger net nam */
.tabmock .fo-shot { display: block; width: 100%; height: 150px; object-fit: cover;
         border-radius: 14px; }
/* ⚠️ display:block hierboven wint van [hidden], waardoor de foto in de lege staat
   tóch zichtbaar was. Zelfde valkuil als .screen[hidden] bovenaan dit bestand. */
.tabmock .fo-shot[hidden] { display: none; }

/* ── Delen: deelcode, knoppen en tegoed ─────────────────────────────────── */
.tabmock .sh-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
         font-size: 17px; font-weight: 800; letter-spacing: .06em; color: #a3b763;
         background: #101014; border: 1px dashed #3a3a46; border-radius: 10px;
         padding: 10px; text-align: center; margin: 6px 0 9px; }
.tabmock .sh-btns { display: flex; gap: 7px; }
.tabmock .sh-btn { flex: 1; background: #22222b; border-radius: 10px; padding: 9px 6px;
         text-align: center; font-size: 11.5px; font-weight: 700; }
.tabmock .sh-btn svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.tabmock .sh-bal { font-size: 22px; font-weight: 800; color: #4ade80; margin: 3px 0 8px; }
.tabmock .sh-bal span { font-size: 11px; font-weight: 700; color: #8a8a95;
         text-transform: uppercase; letter-spacing: .05em; margin-left: 4px; }
.tabmock .sh-row { display: flex; align-items: center; gap: 8px;
         border-top: 1px solid #26262e; padding: 8px 0 0; margin-top: 8px; }
.tabmock .sh-who { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; }
.tabmock .sh-pill { flex-shrink: 0; background: #22222b; color: #8a8a95;
         border-radius: 999px; padding: 4px 10px; font-size: 10.5px; font-weight: 800; }
.tabmock .sh-pill.ok { background: rgba(74, 222, 128, .13); color: #4ade80;
         border: 1px solid rgba(74, 222, 128, .4); }
.tabmock .sh-pill svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 2px; }
/* Bijgetrokken naar het echte scherm (Carl, 13/8/2026): kop, doorverwijzingen, de lege
   ruimte die je laat scrollen tot alléén de QR in beeld staat, en de voorwaardenlink. */
.tabmock .sh-h1 { font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.tabmock .sh-h1 b { color: var(--mk-accent, #a3b763); }
.tabmock .sh-facts { font-size: 11.5px; color: #8a8a95; font-weight: 600; }
.tabmock .sh-gap { height: 26px; }
.tabmock .sh-btn.ghost { background: transparent; border: 1px solid #3a3a46; color: #c9c9d2; }
.tabmock .sh-terms { text-align: center; margin-top: 9px; font-size: 11px;
         color: #8a8a95; text-decoration: underline; }

/* ── Instellingen: schakelrijen en verhaalvoorkeuren ────────────────────── */
.tabmock .set-row { display: flex; align-items: center; gap: 8px;
         border-top: 1px solid #26262e; padding: 9px 0; }
.tabmock .set-row:first-child { border-top: none; padding-top: 2px; }
.tabmock .set-row:last-child { padding-bottom: 2px; }
.tabmock .set-row > span:first-child { flex: 1; min-width: 0; font-size: 13px; font-weight: 600;
         display: flex; align-items: center; gap: 6px; }
.tabmock .set-row > span:first-child svg { width: 15px; height: 15px; color: #8a8a95; flex-shrink: 0; }
/* schakelaar: uit = grijs, aan = olijf met het bolletje rechts */
.tabmock .tgl { flex-shrink: 0; position: relative; width: 38px; height: 22px;
         border-radius: 999px; background: #34343f; }
.tabmock .tgl::after { content: ""; position: absolute; top: 3px; left: 3px;
         width: 16px; height: 16px; border-radius: 50%; background: #8a8a95; }
.tabmock .tgl.on { background: #a3b763; }
.tabmock .tgl.on::after { left: 19px; background: #101014; }
/* de acht onderwerpen mogen afbreken i.p.v. horizontaal scrollen */
.tabmock .set-topics { flex-wrap: wrap; overflow: visible; row-gap: 6px; }

/* QR op de Delen-tab (27/7/2026). Bewust op een WITTE tegel: een omgekeerde
   QR (licht op donker) wordt door lang niet elke scanner herkend. */
.tabmock .sh-qr { display: flex; justify-content: center; margin: 8px 0 10px; }
.tabmock .sh-qr img { width: 126px; height: 126px; display: block;
         background: #fff; border-radius: 12px; padding: 7px; }
/* ⚠️ Voetnoot-iconen kregen geen maat mee en werden paginabreed getekend. */
.tabmock .wx-note svg { width: 13px; height: 13px; vertical-align: -2px; }
/* aangeklikt biljet op de werkende valutarekenaar */
.tabmock .bill.on { background: #a3b763; color: #101014; border-color: #a3b763; }

/* ⚠️ Vangnet voor ALLE tmIcon()-iconen. De echte app heeft een globale
   .svgi-regel in style.css; hier ontbrak die, waardoor een icoon zonder eigen
   maatregel paginabreed werd getekend (dat gebeurde met het schild op het
   foto-scherm). Elementselector, dus elke specifiekere regel hierboven wint. */
.tabmock svg { width: 1.05em; height: 1.05em; vertical-align: -.15em; flex-shrink: 0; }
/* vervoermiddel in de planningrijen en op het dagblok */
.tabmock .pday .bd .st svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 2px; }
.tabmock .today-title svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 2px; color: #a3b763; }

/* Fotoherkenning: de lege staat — een camera op een donker vlak, precies waar
   straks de foto komt. Zelfde hoogte als .fo-shot zodat er niets verspringt. */
/* De lege staat vult de hele hoogte, zodat de camera midden op het scherm staat
   (feedback Carl 27/7). flex-grow overrulet de flex-shrink:0 op .sbody > *. */
.tabmock .fo-cam { display: flex; flex-direction: column; align-items: center; justify-content: center;
         gap: 7px; width: 100%; flex: 1 0 auto; min-height: 150px; border-radius: 14px;
         background: #101014; border: 1px dashed #3a3a46; color: #8a8a95;
         font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.tabmock .fo-cam[hidden] { display: none; }   /* display:flex wint anders van [hidden] */
.tabmock .fo-cam svg { width: 30px; height: 30px; }
.tabmock--app .fo-cam:hover { border-color: #a3b763; color: #f2f2f5; }

/* Alex-avatar in de vignetten van /hoe-het-werkt/: dezelfde illustratie als in de
   echte builder (alex-avatar.png), met het online-stipje. */
.tabmock .alex-ava { position: relative; background: none; }
.tabmock .alex-ava img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.tabmock .alex-ava i { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px;
       border-radius: 50%; background: #4ade80; border: 2px solid #1a1a20; }
/* keuzechips mogen hier afbreken i.p.v. horizontaal scrollen */
.tabmock .cats.catwrap { flex-wrap: wrap; overflow: visible; row-gap: 6px; }

/* Leuke weetjes IN de verhaalkaart (vraag Carl 11/8/2026), net zoals de app ze toont zodra
   de schakelaar "Leuke weetjes" aanstaat: korte punten in plaats van een alinea, met het
   volledige verhaal een tik weg. Zonder chevron, want het zijn geen plekken waar je heen klikt. */
.tabmock .nb-fun { display: grid; gap: 5px; margin: 6px 0 0; padding: 0; list-style: none; }
.tabmock .nb-fun > li {
  position: relative; padding-left: 13px; font-size: 11px; line-height: 1.45; color: #c9c9d2;
}
.tabmock .nb-fun > li::before {
  content: ""; position: absolute; left: 3px; top: 6px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--mk-accent, #a3b763);
}
.tabmock .nb-fun b { color: #f2f2f5; font-weight: 700; }

/* "Lees het hele verhaal" — dezelfde belofte als de knop in de app. */
.tabmock .nb-meer { display: inline-block; margin-top: 8px; font-size: 10.5px; font-weight: 600;
  color: var(--mk-accent, #a3b763); text-decoration: underline; }

/* Het kaart-icoon mocht iets groter dan de 14px van de andere mockup-iconen (vraag Carl 11/8). */
.tabmock .nb-map svg { width: 18px; height: 18px; }

/* == Demobeeld op de preview-kaartjes (card-238414961, 20/8/2026) =============
   Vervangt het gekleurde vlak met een emoji. De kleur blijft als achtergrond staan,
   dus valt het beeld weg dan ziet het er nog steeds uit zoals vroeger. */
.tabmock .iph--demo { background-size: cover !important; background-position: center !important; }

/* Vervoerblok + vluchtrij (card-496101681) — pixel-vast geschaald, zoals template/reisapp/style.css. */
.tabmock .w.vervoer { border-color: rgba(163,183,99,.5); }
.tabmock .w.vervoer .fl-route { font-size: 12.5px; font-weight: 600; margin-top: 6px; }
.tabmock .w.vervoer .fl-sub { font-size: 10px; color: #8a8a95; margin-top: 3px; }
.tabmock .pday.flight { border-color: rgba(163,183,99,.42); background: rgba(163,183,99,.06); }
.tabmock .pday.flight .pbadge.pfl { background: rgba(163,183,99,.12); border-color: rgba(163,183,99,.4);
  color: #a3b763; display: flex; align-items: center; justify-content: center; }
.tabmock .pday.flight .pbadge.pfl svg { width: 17px; height: 17px; }

/* Dagindeling (card-198391666): één regel bij de kaart "Planning vandaag", zoals in de echte
   app (.today-plan in template/reisapp/style.css). Geen tweede kaart — twee kaarten die
   allebei over vandaag gaan lezen als hetzelfde ding. */
.tabmock .today-plan { font-size: 12.5px; color: #c9c9d2; line-height: 1.45; margin-top: 5px; }
.tabmock .today-plan-meta { font-size: 11.5px; color: #8a8a95; margin-top: 3px; }

/* ── Dagindeling op de dagpagina (card-198391666) ─────────────────────────────────────────
   ⚠️ EXACT DEZELFDE STIJL ALS DE ECHTE APP (Carl, 12/9/2026: "alle schermen moeten exact
   dezelfde stijl tonen"). Dit is geen tweede ontwerp maar dezelfde .dp-* uit
   template/reisapp/style.css, omgerekend van rem naar de vaste mockupmaat: de app staat op
   18px basis, dit kader op 13,5px — factor 0,75. Zelfde hexen, zelfde radii, zelfde gewichten.
     app 1rem     = 18px   → 13,5px
     app 0.875rem = 15,8px → 12px
     app 0.78rem  = 14px   → 10,5px
   Wijzig je hier iets, wijzig het dan ook in style.css — en omgekeerd. */
.tabmock .dagplan .dp-tot { font-size: 11.5px; color: #8a8a95; }
.tabmock .dp-deel { font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: #a3b763; margin: 11px 0 3px; }
.tabmock .dp-deel:first-of-type { margin-top: 6px; }
.tabmock .dp-blok { display: flex; align-items: flex-start; gap: 8px; width: 100%;
  text-align: left; background: #22222b; border: 1px solid #34343f; border-radius: 10px;
  padding: 8px 10px; margin-bottom: 6px; color: #f2f2f5; }
.tabmock .dp-t { flex: 1 1 auto; min-width: 0; }
.tabmock .dp-t b { display: block; font-size: 13.5px; line-height: 1.35; }
.tabmock .dp-meta { display: block; font-size: 12px; color: #d3d3db; margin-top: 2px; }
.tabmock .dp-merk { display: inline-block; font-size: 9.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; border-radius: 999px; padding: 1px 7px;
  margin-left: 5px; vertical-align: 1px; color: #a3b763; background: rgba(163,183,99,.14);
  border: 1px solid rgba(163,183,99,.4); }