/* ══════════════════════════════════════════════════════════════════════════
   mobile.css — mobiele override-laag voor basboudewijn.nl
   ──────────────────────────────────────────────────────────────────────────
   ⚠ AAN DE PROJECT MANAGER — twee verplichte koppelstappen, anders werkt dit
     bestand niet:

   1) LAAD DIT BESTAND ALS ALLERLAATSTE STYLESHEET, NÁ rebuild.css én
      v3-pages.css (en, op the-journey, ná v3-globe.css). Het bevat puur
      overrides die op de bestaande regels moeten WINNEN; staat het ervóór, dan
      verliest het de cascade. Voorbeeld voor élke publieke HTML:
          <link rel="stylesheet" href="/css/rebuild.css?v=10">
          <link rel="stylesheet" href="/css/v3-pages.css?v=25">
          <link rel="stylesheet" href="/css/v3-globe.css?v=17">   (waar van toepassing)
          <link rel="stylesheet" href="/css/mobile.css?v=1">       ← LAATSTE

   2) ZET viewport-fit=cover IN DE VIEWPORT-META OP ÉLKE PAGINA:
          <meta name="viewport"
                content="width=device-width, initial-scale=1, viewport-fit=cover">
      Zonder viewport-fit=cover rapporteert iOS álle env(safe-area-inset-*) als 0
      en is alle safe-area-code hieronder (en in de andere CSS) dood.

   ──────────────────────────────────────────────────────────────────────────
   SCOPE: alleen mobiele ergonomie — safe-area-insets, 100dvh, ≥44px touch-doelen,
   overflow. GEEN kleur-/typografie-identiteit gewijzigd. Alles binnen media-/
   supports-queries zodat desktop volledig ongemoeid blijft. De ?v= hoort bij dit
   bestand opgehoogd te worden bij elke wijziging (projectregel).
   Bron: review/mobile.md (mobiele audit, 2026-06-23).
   ══════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   1 · SAFE-AREA INSETS — nu viewport-fit=cover aanstaat, geven we de
   fixed chrome-lagen notch-/home-indicator-ademruimte. We gebruiken
   max()/calc() zodat op toestellen ZONDER notch (inset=0) de bestaande
   maatvoering exact behouden blijft.
   ════════════════════════════════════════════════════════════════ */

/* ── NAV (gedeelde fixed bovenbalk) — notch boven + zijkant-insets (landscape) ── */
.nav{
  padding-top:max(18px, calc(14px + env(safe-area-inset-top, 0px)));
  padding-left:max(clamp(22px,5vw,52px), env(safe-area-inset-left, 0px));
  padding-right:max(clamp(22px,5vw,52px), env(safe-area-inset-right, 0px));
}

/* ── Slide-out menupaneel — start onder de notch i.p.v. de vaste 84px-gok,
   en houdt rechts-inset (landscape-notch) vrij. Alleen waar het paneel het
   slide-out paneel ís (≤720px, zoals rebuild.css het zet). ── */
@media (max-width:720px){
  .nav-links{
    padding-top:max(84px, calc(70px + env(safe-area-inset-top, 0px)));
    padding-right:max(28px, calc(28px + env(safe-area-inset-right, 0px)));
    padding-bottom:max(28px, calc(28px + env(safe-area-inset-bottom, 0px)));
  }
}

/* ── Site-brede speler (.bbp) — onderrand boven de home-indicator.
   rebuild.css regelt dit al binnen de ≤560px-uitklap-query; we borgen de
   compacte/idle-staat én bredere telefoons (≤720px) hier eveneens. ── */
@media (max-width:720px){
  .bbp-inner{
    padding-left:max(clamp(14px,4vw,28px), env(safe-area-inset-left, 0px));
    padding-right:max(clamp(14px,4vw,28px), env(safe-area-inset-right, 0px));
  }
  .bbp.bbp-min .bbp-inner{
    padding-bottom:max(9px, calc(9px + env(safe-area-inset-bottom, 0px)));
  }
  /* idle/compacte speler reserveert óók de home-indicator onderaan de body */
  body.bbp-active{
    padding-bottom:calc(78px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Globe-dock (.jr-dock) als onderbalk — al safe-area-bewust in v3-globe.css;
   we borgen ook de zij-insets (landscape) van de dock-rij. ── */
@media (max-width:680px){
  .jr-dock-row{
    padding-left:max(12px, env(safe-area-inset-left, 0px));
    padding-right:max(12px, env(safe-area-inset-right, 0px));
  }
}

/* ── Bottom-sheets / panelen — onderrand-inset vrij zodat content + grip nooit
   onder de home-indicator vallen. (cluster-sheet en kies-een-reis hebben er al
   deels in voorzien; we maken het consistent en voegen de release-lade toe.) ── */
@media (max-width:760px){
  /* release-lade (platenmuur) — was het enige paneel zónder safe-area onderaan */
  .rl-panel{
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
}
@media (max-width:620px){
  /* cluster-paneel-sheet: borg de inset (stond al, hier hard gehouden) */
  .atl-cpanel-sheet{
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
}
@media (max-width:680px){
  /* "kies een reis"-sheet onderaan vrij */
  .jr-trip-sheet-panel{
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
}

/* ── Muziek-popup (story.html) — onderrand boven de home-indicator/speler.
   v3-globe.css zet 'm op bottom:84px op mobiel; we tellen de safe-area erbij
   zodat de popup niet tegen de home-indicator plakt. ── */
@media (max-width:680px){
  .story-music{
    bottom:calc(84px + env(safe-area-inset-bottom, 0px));
  }
}


/* ════════════════════════════════════════════════════════════════
   2 · 100dvh / iOS — de full-screen bol loopt edge-to-edge en springt
   niet meer met de adresbalk. We zetten een nette cascade
   (vh → -webkit-fill-available → dvh) en duwen de bol tot de randen.
   ════════════════════════════════════════════════════════════════ */
@media (max-width:680px){
  .jr-hero,
  .jr-hero--full{
    min-height:100vh;                 /* oudste fallback */
    min-height:-webkit-fill-available;/* iOS Safari < dvh: stabiele "ingevulde" hoogte */
    overflow:hidden;
  }
  /* moderne, dynamische maat wint waar ondersteund — geen sprong meer */
  @supports (height:100dvh){
    .jr-hero,
    .jr-hero--full{ min-height:100dvh }
  }
  /* edge-to-edge: de atlas/canvas tot de fysieke schermranden, onder de notch
     en home-indicator door (geen letterbox meer dankzij viewport-fit=cover) */
  .jr-atlas,
  .jr-canvas{ inset:0; width:100%; height:100% }
  /* pull-to-refresh onderdrukken zodat een veeg-omlaag de bol draait i.p.v. de
     browser te verversen (sluit aan op de one-finger-globe-modus) */
  .jr-hero,
  .jr-hero--full{ overscroll-behavior-y:none }
}


/* ════════════════════════════════════════════════════════════════
   3 · TOUCH-TARGETS ≥44px — vergroot de te kleine doelen op touch.
   We mikken op (pointer:coarse) ÉN ≤720px zodat ook tablets met de
   vinger comfortabel raken — niet alleen telefoons.
   ════════════════════════════════════════════════════════════════ */
@media (pointer:coarse), (max-width:720px){

  /* ── taaltoggle (nav + reader) — al ≥40px; tot 44px voor AAA-comfort ── */
  .lang{min-height:44px}
  .r-lang{min-height:44px}
  .r-lang-btn{min-width:44px;min-height:44px}

  /* ── dock-iconen + dobbelsteen + zoom — dobbelsteen was 42px, zoom 38px ── */
  .jr-dock-ic{min-width:44px;min-height:44px}
  .jr-dock-dice{width:44px;height:44px}
  .jr-dock-zoom button{width:44px;height:44px}

  /* ── oude atlas-zoom + wereld-knop (tablet-touchzone 681–1024px) ── */
  .atl-zoom button{width:44px;height:44px}

  /* ── cluster-paneel-sluitknop (.atl-cpanel-x was 40px) ── */
  .atl-cpanel-x{width:44px;height:44px}

  /* ── kies-een-reis-sheet-sluitknop (was 36px) ── */
  .jr-trip-sheet-x{width:44px;height:44px}

  /* ── reader-knoppen: sluiten + "volgende halte"-pijl (waren 40 / 34px) ── */
  .r-close{width:44px;height:44px}
  .r-tools .r-close{width:44px;height:44px}
  .r-next-arrow{width:44px;height:44px}

  /* ── speler-controls (.bbp) — ronde knoppen waren 38px ── */
  .bbp-btn{width:44px;height:44px}

  /* ── music-page mini-speler: play-knop (was 42px) ── */
  .mini-player .pp{width:44px;height:44px}
  .mini-player .mp-close{min-width:44px;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center}

  /* ── muziek-popup (story.html): play (40px) + sluitkruis (22px → 44px) ── */
  .story-music-play{width:44px;height:44px}
  .story-music-x{width:44px;height:44px;
    /* het kruis zit absoluut in de hoek; iets terugschuiven zodat de grotere
       raakzone niet over de rand valt, zonder het ikoon te verplaatsen */
    top:2px;right:2px}

  /* ── demo-toggles + bedienelementen op de muziekpagina/lade ── */
  .demo-play{width:44px;height:44px}
  .demo-view{min-height:44px}
  .demo-item{min-height:44px}
  .rl-ab-btn{min-height:44px}

  /* ── release-lade nav/sluit (was al 44px min — hard houden) ── */
  .rl-nav,.rl-close{min-width:44px;min-height:44px}
}


/* ════════════════════════════════════════════════════════════════
   4 · OVERFLOW — horizontale bleed op smal scherm afdekken.
   ════════════════════════════════════════════════════════════════ */

/* ── body: 100vw telt op sommige toestellen de scrollbar mee → subpixel-bleed.
   100% is veiliger; overflow-x:clip blijft het vangnet (in rebuild.css). ── */
body{max-width:100%}

/* ── lange, niet-afbreekbare strings (URL's, titels, mono-coördinaten) mogen
   nooit de baan oprekken; we laten ze netjes binnen de kolom breken. ── */
@media (max-width:720px){
  .r-body,
  .r-coord,
  .rl-desc,
  .bbp-title,.bbp-q-title,
  .demo-title,.demo-sub,
  .jm-name,.jm-sub,
  .rec-title,.rec-where,
  .atl-cpanel-rtitle,
  .story-music-title,.story-music-artist{
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  /* mono-coördinaten breken op het scheidteken i.p.v. de baan te verbreden */
  .r-coord{ overflow-wrap:break-word }
}

/* ── apps-embed: de iframe heeft een vaste min-breedte van de externe app;
   we klemmen 'm hard binnen de kolom zodat de pagina zelf niet horizontaal
   gaat scrollen (de iframe mag intern scrollen). ── */
@media (max-width:560px){
  .app-pass{grid-template-columns:1fr}
  .app-embed{max-width:100%;overflow:hidden}
  .app-embed iframe{max-width:100%;width:100%}
}

/* ── globe-zoek/zoom-pillen op de OUDE atlas-laag: borg dat ze niet tegen de
   schermrand-insets aanlopen op 360–390px (de nieuwe dock-IA is al geregeld). ── */
@media (max-width:680px){
  .atl-controls{
    left:max(clamp(10px,3.2vw,16px), env(safe-area-inset-left, 0px));
    right:max(clamp(10px,3.2vw,16px), env(safe-area-inset-right, 0px));
  }
}

/* ── harde vangrail: niets in het bandlint mag breder dan de viewport ── */
@media (max-width:390px){
  .wrap,.band > .wrap{max-width:100%}
}