/* ═══════════════════════════════════════════════════════════════════
   nomad-artikel-mobiel.css · het artikelsjabloon op de telefoon
   (alle 33 stukken in /artikelen).

   Bron: de mobiele audit van 26-09-2026 (docs/mobiel-audit/voorstel/
   artikel.css, de art-*.css per stuk en wat uit licht.css ook voor de
   artikelen geldt). Geplaatst door docs/generator/plaats_beweging.py,
   dat ook de inhoudsopgave en de leestijd als HTML in de pagina zet.

   Alles staat onder 640 px: dat is het breekpunt dat de artikelen zelf
   al gebruiken. Op de computer verandert niets. De twee nieuwe blokken
   in de HTML (.art-inhoud en .art-leestijd) staan daar met het
   attribuut hidden; alleen hieronder worden ze zichtbaar. nomad-vsl-1.css
   zet [hidden] op display:none!important, vandaar hier ook !important.

   Wat het doet:
   1. kopband compacter, zodat in het eerste scherm te zien is dat er
      een stuk komt (nu is de kop 430 tot 585 px)
   2. inhoudsopgave (knop met aria-expanded) en leesvoortgang
      (nomad-artikel-mobiel.js)
   3. tekeningen: kopregel netjes op twee regels, minder binnenrand,
      uitlegtekst 15 in plaats van 14 px, tegels en rasters compacter
   4. labels en kleine teksten naar minimaal 12 px
   5. aanraakdoelen naar 44 px (tekstlinks in de kop, slotband, hierna,
      voet)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width:640px){

  /* Geen scroll-margin op de koppen: nomad-vsl-1.css zet al
     scroll-padding-top:5.5rem op html, en die twee tellen op. Een sprong
     vanuit de inhoudsopgave landt zo net onder de plakkende kopbalk. */

  /* ── 1. kopband ─────────────────────────────────────────────────── */
  /* 28-09: zijmarge 20 px, gelijk aan de andere lichte pagina's (over,
     prijzen, tools, klanten, maandbrief); was 17,6 px. */
  .hero{padding:2rem 1.25rem 2.1rem}
  .hero .oog{margin-bottom:.7rem;font-size:13px}
  .art-leestijd[hidden]{display:inline!important}
  .hero h1{font-size:2rem;line-height:1.02}
  .hero .belofte{margin-top:.9rem;font-size:1rem;line-height:1.62}
  .hero .knoppen{margin-top:1.35rem}
  .knoppen .h{min-height:48px}
  /* De tweede link in de kop ("Of bekijk eerst de zes instrumenten")
     staat onderaan het stuk al in het blok "Lees hierna". Bovenin is
     het een uitgang voordat iemand begonnen is met lezen. */
  .hero .knoppen .stil{display:none}
  .slot .knoppen .stil{min-height:44px;margin-top:1rem;padding:8px 0 6px}
  .slot .klein{font-size:.9rem;color:rgba(242,244,250,.58)}

  main{padding:1.6rem 1.25rem 0}
  .slot{padding-left:1.25rem;padding-right:1.25rem}
  .nomad-voet{padding-left:1.25rem;padding-right:1.25rem}

  /* ── 2a. inhoudsopgave: een knop die de lijst open- en dichtklapt ── */
  .art-inhoud[hidden]{display:block!important}
  .art-inhoud{margin:0 0 1.5rem;border:1px solid var(--pp-line,#E3E6EB);border-radius:14px;
    background:var(--pp-panel,#F6F7F9)}
  .art-inhoud-knop{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:.6rem;
    min-height:52px;padding:.35rem 1rem;cursor:pointer;border-radius:14px;-webkit-tap-highlight-color:transparent}
  .art-inhoud-knop:focus-visible{outline:2px solid var(--pp-blue,#0052FF);outline-offset:2px}
  .art-inhoud-knop b{font:800 1rem var(--pp-display,system-ui);letter-spacing:-.015em;color:var(--pp-ink,#0B0D12)}
  .art-inhoud-knop em{margin-left:auto;font:500 13px var(--pp-label,system-ui);font-style:normal;color:var(--pp-stil,#666D7A)}
  .art-inhoud-knop::after{content:"";flex:none;width:.5rem;height:.5rem;margin:-.2rem .15rem 0 .2rem;
    border-right:2px solid var(--pp-stil,#666D7A);border-bottom:2px solid var(--pp-stil,#666D7A);transform:rotate(45deg);
    transition:transform .45s cubic-bezier(.16,1,.3,1),margin-top .45s cubic-bezier(.16,1,.3,1)}
  .art-inhoud-knop[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:.3rem}
  .art-inhoud ol{margin:0;padding:0 1rem .5rem;list-style:none;counter-reset:ai}
  .art-inhoud li{counter-increment:ai}
  .art-inhoud li a{display:flex;align-items:center;gap:.8rem;min-height:46px;padding:.45rem 0;
    border-top:1px solid var(--pp-line,#E3E6EB);text-decoration:none;
    font:500 15px/1.35 var(--pp-body,system-ui);color:var(--pp-ink,#0B0D12)}
  .art-inhoud li a::before{content:counter(ai,decimal-leading-zero);flex:none;width:1.5rem;
    font:500 12px var(--pp-mono,monospace);color:var(--pp-blue,#0052FF)}
  .art-inhoud li a:active{color:var(--pp-blue,#0052FF)}
  .art-inhoud li a:focus-visible{outline:2px solid var(--pp-blue,#0052FF);outline-offset:-2px;border-radius:6px}

  /* ── 2b. leesvoortgang: een haarlijn onder de kopbalk ── */
  .art-voortgang{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;z-index:2}
  .art-voortgang i{display:block;height:100%;background:linear-gradient(90deg,#0052FF,#4D7CFF);
    transform-origin:0 50%;transform:scaleX(var(--p,0))}

  /* ── 3. tekeningen (.kader donker, .fig licht) ─────────────────── */
  .kader,.fig{border-radius:14px}
  /* De ondertitel ("schematisch · geen standen") viel rechts over twee
     of drie regels. Nu: titel op de eerste regel, de toelichting als
     één nette tweede regel eronder, links uitgelijnd onder de titel. */
  .kader-bar,.fig-kop{flex-wrap:wrap;align-items:flex-start;row-gap:.1rem;padding:.6rem .9rem}
  .kader-bar > i,.fig-kop > i{margin-top:.36rem}
  .kader-bar span,.fig-kop span{white-space:normal;flex:1 1 0;min-width:0;line-height:1.35}
  .kader-bar em,.fig-kop em{flex:1 0 100%;margin-left:calc(8px + .55rem);text-align:left;
    font-size:12px;line-height:1.4}
  .kader-lijf{padding:1.25rem .85rem 1.15rem}
  .fig-lijf{padding:1.1rem .85rem}
  .kader-uit,.fig-uit{padding:.9rem .95rem;font-size:.94rem;line-height:1.62}
  .ket-kop{font-size:1.04rem;margin-bottom:1.1rem;text-wrap:balance}

  /* labels in de tekeningen: van 10,5 tot 11,5 naar 12 px. Niet de labels
     in de grafieken zelf (.chart .sub): die staan op procenten over een SVG
     en botsten op 12 px op 360 tot 390 breed met hun buren (supply-demand,
     instappen-en-uitstappen, risico, seizoenen). Die blijven 11 px. */
  .weeg .spil em,.laagas span,.laagas em,.duo-voet span,.rrkop span{font-size:12px}

  /* tegels: icoon naast de titel in plaats van erboven */
  .tegels{gap:.55rem}
  .tegel{display:grid;grid-template-columns:auto 1fr;column-gap:.6rem;align-items:center;padding:.95rem .95rem 1rem}
  .tegel svg{margin:0}
  .tegel span{grid-column:1/-1;margin-top:.35rem;font-size:.94rem;line-height:1.55}

  /* de keten: blokjes als rijen in plaats van gecentreerde stapels.
     Zonder icoon: naam links (4,8rem), uitleg rechts. Met icoon (.gl,
     bv. macro): icoon links, naam en uitleg rechts. Het volgnummer
     staat rechts in het midden, met ruimte vrijgehouden. */
  .keten{gap:.95rem}
  .ket{display:grid;grid-template-columns:4.8rem 1fr;column-gap:.7rem;align-items:center;text-align:left;
    padding:.8rem 2.1rem .8rem .95rem}
  .ket:has(> .gl){grid-template-columns:34px 1fr}
  .ket .gl{grid-row:1/3;margin:0}
  .ket span{margin-top:0;font-size:.88rem}
  .ket:has(> .gl) span{margin-top:.15rem}
  .ket .nr{left:auto;right:.7rem;top:50%;transform:translateY(-50%)}

  /* kleine grafiekjes in een raster (optiecombinaties, gamma,
     tijdsframe): liggend, grafiekje links en tekst rechts. Zes kaarten
     van 330 px hoog worden zes rijen van 110 px. */
  .vormen,.grieken,.nest{grid-template-columns:1fr;gap:.5rem}
  .vormen figure,.grieken figure,.nest figure{display:grid;grid-template-columns:42% 1fr;column-gap:.9rem;align-items:center;padding:.75rem .85rem}
  .vormen svg,.grieken svg,.nest svg{grid-row:1/3;margin:0}
  .vormen b,.grieken b,.nest b{align-self:end}
  .vormen span,.grieken span,.nest span{align-self:start;font-size:.86rem}

  /* de trechter (supply-demand, swing) werd op de telefoon vijf even brede
     blokken, en dan zie je geen trechter meer. Hier loopt hij weer
     zichtbaar smaller. De inline regel zet width:100%!important, vandaar
     hier ook !important. */
  .trechter{gap:.45rem}
  .trechter .tstap{padding:.8rem .9rem}
  .trechter .tstap:nth-child(2){width:93%!important}
  .trechter .tstap:nth-child(3){width:86%!important}
  .trechter .tstap:nth-child(4){width:79%!important}
  .trechter .tstap:nth-child(5){width:72%!important}
  .trechter .tstap span{font-size:.88rem}

  /* ── 4. lopende blokken ─────────────────────────────────────────── */
  .stappen li{padding:.95rem 1rem .95rem 2.95rem}
  .stappen li::before{left:.8rem;top:1rem}
  .vr-r{grid-template-columns:2.4rem 1fr;gap:.75rem}
  .vr-r em{font-size:1.35rem}
  .vr-vt{font-size:.94rem}
  .faq .a{padding-right:.2rem}
  .faq summary{min-height:52px;align-items:center}
  .faq summary::after{margin-top:-.25rem}
  .faq details[open] summary::after{margin-top:.3rem}
  /* 28-09: vragen en inhoudsopgave klappen soepel open en dicht
     (nomad-artikel-mobiel.js, de beweging van de betaalpagina). Het
     pijltje draait mee, en bij sluiten meteen (lv-sluit). */
  .faq details.lv-sluit summary::after{transform:rotate(45deg);margin-top:-.25rem}
  /* dubbele lijn tussen de vragen en "Lees hierna" weg */
  .faq + .hierna{border-top:0;padding-top:0}

  /* de mini's: het onderschrift leesbaar. De labels in het doek (.nm-lab,
     .nm-vb en de beeldtekst) regelt nomad-mini.js sinds 26-09 zelf op de
     telefoon, teruggerekend met de schaal van het doek; daar komt hier
     niets overheen. */
  .art-mini figcaption{font-size:.9rem;color:#6B7283}
  .art-duo{gap:1.1rem;margin:1.6rem 0}
  .art-mini{margin:1.6rem 0}

  /* ── 5. lees hierna ─────────────────────────────────────────────── */
  .hierna{margin-top:2.4rem;padding-top:1.6rem}
  .hierna-kop{font-size:12.5px}
  .hierna-volgend{padding:1.05rem 1.1rem}
  .hierna-volgend i{font-size:12.5px}
  .hierna-zij a{min-height:52px}
  .hierna-zij span{font-size:.84rem}
  .hierna-terug{display:inline-flex;align-items:center;min-height:44px;margin-top:.6rem;border-bottom:0;
    text-decoration:underline;text-decoration-color:var(--pp-line-2,#D4D9E0);text-underline-offset:4px}

  /* ── 6. de voet: links als echte aanraakdoelen (uit licht.css) ── */
  .nomad-voet p:last-child{line-height:1}
  .nomad-voet p:last-child a{display:inline-block;padding:.8rem 0;line-height:1.3}

  /* ── 7. per stuk: labels die onder 12 px bleven ─────────────────── */
  main .bal .kol em{font-size:12px}                                  /* centrale-bank */
  main .fasen .f em{font-size:12px}                                  /* conjunctuurcyclus */
  main .val .kolom .naam{font-size:12px}                             /* kosten */
  main .tak .eind i{font-size:12px}                                  /* macro */
  main .mmstap .voorraad u,main .boekje .lijn u,main .tweeboek .tussen{font-size:12px} /* market-makers */
  main .chart .num small{font-size:12px}                             /* marktbreedte */
  main .som .vak em{font-size:12px}                                  /* meten, positiegrootte */
  main .dag span{font-size:12px}                                     /* risico */
  main .route .tak em{font-size:12px}                                /* waar-je-order-landt */
  /* 'en hier niet meer' (swing, marktstructuur) raakte met de smallere
     binnenrand de rechterkant van het kader. Zelfde specificiteit als de
     regel van nomad-teken.js, zodat de opbouw blijft werken. */
  .chart .lbl.bw-rand{transform:translate(-64%,-50%)}

  /* "Drie uitkomsten" (cot, macro en andere): de middelste kaart stond
     gecentreerd met een los blauw streepje erboven, terwijl de andere twee
     links uitlijnen. Nu alles links, en het blauw als rand aan de zijkant
     (zoals op /onderzoek). */
  .verw .ijk{text-align:left;border-left:3px solid var(--pp-blue);background:rgba(0,82,255,.04)}
  .verw .ijk i{display:none}

  /* supply-demand, "instap, stop en doel": de uitleg stond in een kolom
     van 104 px naast de staven, op 11,5 px en over drie regels. Nu onder
     elke staaf, op 13 px. */
  .profiel{gap:.75rem}
  .profiel .rij{grid-template-columns:1fr;gap:.3rem}
  .profiel em{font-size:13px;line-height:1.4}

  /* de volumetool (volume, supply-demand): standknoppen 44 px, labels
     12 px, en het podium volgt de breedte in plaats van een vaste 320 px,
     want de tekening gebruikt op een telefoon maar ongeveer 200 px. */
  .vp3d-bar{padding:12px 14px;row-gap:10px}
  .vp3d-bar .sym{font-size:12px}
  .vp3d-bar .chg{font-size:12.5px}
  .vp3d-modes{margin-left:0;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .vp3d-modes button{min-height:44px;font-size:13px;padding:0 6px}
  .vp3d-stage{min-height:0;height:calc(62vw + 37px)}
  .vp3d-legend{font-size:12px;letter-spacing:.03em;gap:6px 12px;bottom:8px}
  .vp3d-stats .k{font-size:12px;letter-spacing:.08em}
  .vp3d-gids h4{font-size:12px}
  .vp3d-gids dd{font-size:.94rem}
  .vp3d-uit{font-size:.94rem}
}

@media (max-width:640px) and (prefers-reduced-motion:no-preference){
  .faq summary::after{transition:transform .45s cubic-bezier(.16,1,.3,1),margin-top .45s cubic-bezier(.16,1,.3,1)}
}

@media (max-width:640px) and (prefers-reduced-motion:reduce){
  .art-inhoud-knop::after{transition:none}
  .art-voortgang{display:none}
}