/* /rekenmachine/ (src/pagina/rekenmachine.mjs). stroming.css and t1.css are loaded first and carry the tokens, the worlds, the header,
   the page head, the buttons, the questions, the form panel, the callback sheet, the phone bar and the footer; this file holds what only
   this page has: the three names in the head, the rekenbord's tabs and panels, the instrument, and the form's line per calculator.
   Everything that shares a class name with the home page's Reken mee (.spoor, .staaf, .twin, .hefbomen) is scoped under .rm, so it wins
   over stroming.css without touching the home page. src/core/rekenmachines.js sets --p on a .tape, --w and --x on a [data-seg], draws
   the ruler into .spoor svg path and appends .maatcijfers span, .geest and .tik. */

.rm .tbc { font-style: normal; }
[data-tags=uit] .rm [data-review] { display: none !important; }

/* ---------- the head and the rekenbord, one section (D-250): eyebrow, H1 and lead, then the bar of three right under the lead ---------- */
.rk.rk-kop { padding: var(--pagina-top) 0 var(--sec-y); }
.rk-kop-tekst { padding: 0; }
.rk-kop .f-h1 { max-width: 11em; }
/* "rekenmachines." is one long word: on a phone the page step would push it past the edge, so the H1 follows the width there */
.rk-kop .f-h1 { font-size: min(var(--t-pagina), 10.6vw); }
.rk-pijl { display: block; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--pijl) center / contain no-repeat; mask: var(--pijl) center / contain no-repeat; }

/* ---------- the bar of three, stuck under the header while a calculator is on screen ---------- */
.rk-tabs-wrap { position: sticky; top: calc(var(--kop-h, 84px) + 10px); z-index: 6; margin: var(--kop-y) 0; }
.rk-tabs { --gat: 6px; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gat); padding: var(--gat); border-radius: 26px; background: rgba(36, 39, 44, .9); box-shadow: inset 0 0 0 1px var(--lijn), 0 18px 44px rgba(0, 0, 0, .4); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
/* the white glider is the one on /formules/' toggle, inverted for the dark: it runs under the calculator on screen */
.rk-glijder { position: absolute; left: var(--gat); top: var(--gat); bottom: var(--gat); width: calc((100% - 4 * var(--gat)) / 3); border-radius: 20px; background: #fff; transform: translateX(calc(var(--i, 0) * (100% + var(--gat)))); transition: transform .8s var(--uit); }
.no-js .rk-glijder { display: none; }
/* each tab not on screen is a button: its own face and edge, an arrow in a ring that fills white under the pointer */
.rk-tab { position: relative; z-index: 1; container-type: inline-size; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "nr naam ga" "uit uit ga"; gap: 12px 12px; align-items: baseline; padding: 16px 18px 18px 22px; border-radius: 20px; color: var(--fg2); text-decoration: none; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); cursor: pointer; transition: color .5s var(--uit), background-color .3s, box-shadow .3s; }
.rk-tab:hover { color: #fff; background: rgba(255, 255, 255, .11); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.rk-tab[aria-selected=true] { color: var(--inkt); background: transparent; box-shadow: none; cursor: default; }
.rk-tab-ga { grid-area: ga; align-self: center; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4); color: #fff; transition: background-color .3s, box-shadow .3s, color .3s; }
.rk-tab-ga .rk-pijl { width: 18px; height: 18px; transition: translate .4s var(--e-uit); }
.rk-tab:hover .rk-tab-ga { background: #fff; color: var(--inkt); box-shadow: none; }
.rk-tab:hover .rk-tab-ga .rk-pijl { translate: 3px 0; }
/* the one on screen: the record dot instead of the arrow */
.rk-tab[aria-selected=true] .rk-tab-ga { box-shadow: none; }
.rk-tab[aria-selected=true] .rk-tab-ga .rk-pijl { display: none; }
.rk-tab[aria-selected=true] .rk-tab-ga::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--rood); box-shadow: 0 0 0 6px rgba(237, 29, 36, .15); }
/* the invitation, once, when the bar has come in untouched (src/core/rekenmachines.js sets .lok): the two other tabs light up in turn */
@keyframes rk-lok-tab { 0%, 100% { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); } 45% { background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); } }
@keyframes rk-lok-ga { 0%, 100% { background: transparent; color: #fff; } 45% { background: #fff; color: var(--inkt); } }
@keyframes rk-lok-pijl { 0%, 100% { translate: 0; } 45% { translate: 4px 0; } }
.rk-tabs.lok .rk-tab:not([aria-selected=true]) { animation: rk-lok-tab 1.1s var(--e-uit) 2; }
.rk-tabs.lok .rk-tab:not([aria-selected=true]) .rk-tab-ga { animation: rk-lok-ga 1.1s var(--e-uit) 2; }
.rk-tabs.lok .rk-tab:not([aria-selected=true]) .rk-pijl { animation: rk-lok-pijl 1.1s var(--e-uit) 2; }
.rk-tabs.lok .rk-tab:nth-of-type(3), .rk-tabs.lok .rk-tab:nth-of-type(3) :is(.rk-tab-ga, .rk-pijl) { animation-delay: .22s; }
.rk-tab:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.rk-tab-nr { grid-area: nr; font-size: var(--t-label); letter-spacing: .08em; }
.rk-tab-naam, .rk-tab-kort { grid-area: naam; font-size: 17px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.rk-tab-kort { display: none; }
/* the result and its word each keep one line, sized to the tab, so a growing number never wraps the word and the bar keeps its height
   while he drags (Alex, 23-09: the bar and every sticky offset under it twitched) */
.rk-tab-uit { grid-area: uit; display: grid; gap: 6px; min-width: 0; }
.rk-tab-uit b { font-size: clamp(20px, 9cqi, 34px); font-weight: 650; line-height: 1; letter-spacing: -.03em; white-space: nowrap; }
.rk-tab-uit small { overflow: hidden; font-size: var(--t-meta); line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.rk-tab[aria-selected=true] .rk-tab-uit small { color: #4f4b46; }

/* ---------- one panel: "1 van 3", its title, the instrument, the next one ---------- */
.rk-paneel { scroll-margin-top: calc(var(--kop-h, 84px) + var(--rk-h, 130px) + 20px); }
.rk-teller { margin: 0 0 var(--label-y); font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--fg2); }
.rk-teller b { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 4px; border-radius: 50%; background: var(--rood); color: #fff; font-weight: 600; letter-spacing: 0; }
.rk-titel { margin: 0; max-width: 16em; font-size: var(--t-kop2); font-weight: 640; line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.rk-titel em { font-style: normal; color: var(--rood); }
.rk-sub { margin: var(--sub-y) 0 0; max-width: 34em; font-size: var(--t-sub); line-height: 1.5; color: var(--fg2); }
.rk-volgende { display: grid; grid-template-columns: minmax(0, 1fr) 28px; grid-template-areas: "klein pijl" "naam pijl"; gap: 8px 20px; align-items: center; margin-top: var(--kop-y); padding: 28px 0; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); color: inherit; text-decoration: none; }
.rk-volgende small { grid-area: klein; font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--fg2); }
.rk-volgende span { grid-area: naam; font-size: var(--t-kaart); font-weight: 620; letter-spacing: -.02em; transition: transform var(--t-deel) var(--e-uit); }
.rk-volgende .rk-pijl { grid-area: pijl; width: 28px; height: 28px; }
.rk-volgende:hover span { transform: translateX(10px); }
.rk-volgende:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
/* without JavaScript the three stand one under the other: the next one is right there, so its link goes */
.no-js .rk-paneel + .rk-paneel { margin-top: calc(2 * var(--sec-y)); }
.no-js .rk-volgende { display: none; }
.no-js .rk-tabs-wrap { position: static; }

/* ---------- the instrument: the result left and sticky, the sliders, bars and levers right (07-reken, D-139) ---------- */
.rm-grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(40px, 5vw, 96px); align-items: start; margin-top: var(--kop-y); }
.rm-uit { position: sticky; top: calc(var(--kop-h, 84px) + var(--rk-h, 130px) + 40px); }

/* the result: the ratio is the panel's largest number, the verdict under it, then one quiet line with the amounts in it */
.rm-ratio-blok { margin: 0 0 clamp(26px, 3.4vh, 42px); }
.rm-ratio, .rm-bedrag { margin: 0; display: flex; align-items: flex-start; font-size: clamp(88px, 10.5vw, 180px); font-weight: 650; line-height: .86; letter-spacing: -.035em; }
.rm-x { margin: .08em 0 0 .04em; font-size: .36em; font-weight: 300; letter-spacing: 0; color: var(--rood); }
.rm-bedrag { font-size: clamp(64px, 8vw, 132px); white-space: nowrap; }
.rm-eur { margin-right: .08em; font-size: .42em; font-weight: 400; color: var(--rood); }
.rm-oordeel { margin: 18px 0 0; max-width: 12em; font-size: clamp(21px, 1.8vw, 30px); font-weight: 620; line-height: 1.15; letter-spacing: -.02em; }
.rm-zin { margin: 14px 0 0; max-width: 26em; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.5; color: var(--fg2); }
.rm-zin b { color: #fff; font-weight: 640; white-space: nowrap; }
/* calculator 2 turns over when the small jobs win: the module sets .negatief on the panel */
.rm-neen { display: none; margin: 16px 0 0; max-width: 22em; font-size: clamp(18px, 1.4vw, 22px); font-weight: 600; line-height: 1.3; color: #fff; }
.rk-paneel.negatief .rm-neen { display: block; }
.rk-paneel.negatief :is(.rm-ratio, .rm-oordeel, .rm-zin, .staven) { display: none; }
.rk-paneel:not(.negatief) .knop .neen, .rk-paneel.negatief .knop .ja { display: none; }
.rm-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.rm-acties .knop b { font-weight: 700; }
.rm .eerlijk { margin: clamp(26px, 3.6vh, 42px) 0 0; max-width: 42em; font-size: 14px; line-height: 1.45; color: var(--fg2); }

/* ---- the sliders, the bars and the levers share one set of columns ---- */
.rm-in { --kol: minmax(0, 210px) minmax(120px, 1fr) minmax(0, 186px); --sp: clamp(16px, 1.6vw, 30px); }
.rm .tapes { display: grid; }

/* one row per slider: label · track · value. --p is the module's position on the .tape; the track reads it */
.rm .tape { --p: .2; --d: .2; display: grid; grid-template-columns: var(--kol); align-items: center; gap: 0 var(--sp); padding: 9px 0; }
.rm .tape-kop { grid-column: 1; font-size: 16px; line-height: 1.25; color: var(--fg2); cursor: pointer; }
.rm .twin { grid-column: 3; justify-self: end; display: inline-flex; align-items: baseline; gap: .18em; max-width: 100%; font-size: clamp(20px, 1.6vw, 28px); font-weight: 640; letter-spacing: -.025em; transition: scale .3s var(--e-uit); transform-origin: 100% 60%; }
.rm .twin .getal { width: 6.2em; max-width: 100%; padding: 2px 0; border: 0; border-bottom: 1.5px solid transparent; border-radius: 0; background: transparent; color: #fff; font: inherit; text-align: right; transition: border-color .3s; }
@supports (field-sizing: content) { .rm .twin .getal { field-sizing: content; width: auto; min-width: 2ch; } }
.rm .twin .getal:hover { border-bottom-color: rgba(255, 255, 255, .5); }
.rm .twin .getal:focus { outline: none; border-bottom-color: #fff; }
.rm .twin-eur, .rm .twin-na { color: var(--fg2); font-weight: 500; }
.rm .twin-eur { font-size: .82em; }
.rm .twin-na { font-size: .5em; letter-spacing: 0; }
.rm .tape:has(input[type=range]:active) .twin { scale: 1.06; }

/* the track. The thumb's centre travels from 22px to 100% - 22px, which is where .maatcijfers, .geest and .tik are placed */
.rm .spoor { position: relative; grid-column: 2; height: 44px; }
.rm .spoor::before { content: ''; position: absolute; left: 0; right: 0; top: 19px; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .24); }
.rm .spoor .band { position: absolute; left: 0; right: 0; top: 19px; height: 6px; border-radius: 99px; overflow: hidden; }
.rm .spoor .band::before { content: ''; position: absolute; top: 0; bottom: 0; right: 100%; width: 100%; background: #fff; transform: translateX(calc(22px + var(--p) * (100% - 44px))); }
.rm .spoor svg { position: absolute; left: 22px; bottom: -3px; width: calc(100% - 44px); height: 9px; color: #fff; opacity: .3; pointer-events: none; }
.rm .spoor path { stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; shape-rendering: crispEdges; fill: none; }
.rm .spoor input[type=range] { position: absolute; inset: 0; width: 100%; height: 44px; margin: 0; background: transparent; cursor: grab; touch-action: pan-y; -webkit-appearance: none; appearance: none; opacity: 1; }
.rm .spoor input[type=range]:active { cursor: grabbing; }
.rm .spoor input[type=range]:focus { outline: none; }
.rm .spoor input[type=range]::-webkit-slider-runnable-track { height: 100%; background: transparent; border: 0; }
.rm .spoor input[type=range]::-moz-range-track { height: 100%; background: transparent; border: 0; }
.rm .spoor input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 44px; height: 28px; margin-top: 8px; border: 0; border-radius: 99px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); transition: scale .3s var(--e-uit); }
.rm .spoor input[type=range]::-moz-range-thumb { box-sizing: border-box; width: 44px; height: 28px; border: 0; border-radius: 99px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.rm .spoor input[type=range]:active::-webkit-slider-thumb { scale: 1.08; }
.rm .spoor:focus-within input[type=range]::-webkit-slider-thumb { outline: 2px solid #fff; outline-offset: 4px; }
.rm .spoor:focus-within input[type=range]::-moz-range-thumb { outline: 2px solid #fff; outline-offset: 4px; }
/* the printed numbers under the ruler: only the two ends, a long euro amount every big step ran into its neighbour */
.rm .maatcijfers { position: relative; grid-column: 2; height: 14px; margin-top: 2px; font-size: 10.5px; letter-spacing: .04em; color: rgba(255, 255, 255, .45); }
.rm .maatcijfers span { position: absolute; top: 0; transform: translateX(-50%); display: none; }
.rm .maatcijfers span:first-child, .rm .maatcijfers span:last-child { display: block; }
.rm .geest { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 3; padding: 6px 9px 5px; border-radius: 7px; background: #fff; color: var(--inkt); font: 640 12.5px/1 var(--f); white-space: nowrap; box-shadow: 0 10px 26px rgba(0, 0, 0, .34); transform: translateX(-50%); pointer-events: none; }
.rm .geest::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -4px; border: 4px solid transparent; border-top-color: #fff; }
.rm .tik { position: absolute; bottom: -3px; left: 0; width: 2px; height: 9px; max-height: 10px; margin-left: -1px; background: #fff; opacity: 0; pointer-events: none; }
.rm .tape-noot { grid-column: 1 / -1; margin: 6px 0 0; max-width: 52ch; font-size: 13.5px; line-height: 1.45; color: var(--fg2); }
/* the invitation: the first track pulls out a little and springs back, once. translate, never transform: the fill carries its
   position in a transform, and a keyframe ending on transform: none wiped it out for good (D-150) */
@keyframes rm-lok { 0%, 100% { translate: 0; } 35% { translate: 16px; } }
.rm .tape.lok .spoor input[type=range]::-webkit-slider-thumb { animation: rm-lok 1s cubic-bezier(.3, 0, .3, 1) .15s both; }
.rm .tape.lok .spoor .band::before { animation: rm-lok 1s cubic-bezier(.3, 0, .3, 1) .15s both; }

/* the advertising budget: one check, in the levers' own row */
.rm-vink { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; padding: 14px 0; border-top: 1px solid var(--lijn); font-size: 15.5px; color: var(--fg2); cursor: pointer; }
.rm-vink input { position: absolute; opacity: 0; width: 0; height: 0; }
.rm-haak { flex: none; width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--lijn); transition: background-color var(--t-klein), box-shadow var(--t-klein); }
.rm-haak::before { content: ''; display: block; width: 100%; height: 100%; background: var(--inkt); -webkit-mask: var(--haak) center / 13px no-repeat; mask: var(--haak) center / 13px no-repeat; opacity: 0; transition: opacity var(--t-klein); }
.rm-vink:hover .rm-haak { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.rm-vink:has(input:checked) { color: #fff; }
.rm-vink:has(input:checked) .rm-haak { background: #fff; box-shadow: none; }
.rm-vink:has(input:checked) .rm-haak::before { opacity: 1; }
.rm-vink:has(input:focus-visible) .rm-haak { outline: 2px solid #fff; outline-offset: 3px; }

/* the bars, on the sliders' own columns, a thumb's reach under the tracks */
.rm .staven { margin: clamp(20px, 2.6vh, 34px) 0 0; padding-top: clamp(18px, 2.2vh, 28px); border-top: 1px solid var(--lijn); }
.rm .staaf { margin: 0 0 14px; display: grid; grid-template-columns: var(--kol); align-items: center; gap: 0 var(--sp); }
.rm .staaf > span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg2); }
.rm .staaf > b { justify-self: end; font-size: clamp(18px, 1.35vw, 23px); font-weight: 640; letter-spacing: -.025em; white-space: nowrap; }
.rm .baan { position: relative; display: block; height: 18px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .08); }
.rm .baan i { position: absolute; inset: 0; transform-origin: 0 50%; transform: translateX(calc(var(--x, 0) * 100%)) scaleX(var(--w, 0)); transition: transform .28s var(--e-uit); }
.rm .baan [data-seg="0"], .rm .baan [data-seg="k"], .rm .baan [data-seg="k2"] { background: #fff; }
.rm .baan [data-seg="1"] { background: rgba(255, 255, 255, .68); }
.rm .baan [data-seg="2"] { background: rgba(255, 255, 255, .42); }
.rm .baan [data-seg="p"] { background: var(--rood); }
.rm .baan [data-seg="g"] { background: #7C838C; }
.rm .baan [data-seg="a"] { background: #4A5158; }

/* the levers, colour-keyed to the bar right above them */
.rm .hefbomen { list-style: none; margin: clamp(18px, 2.4vh, 30px) 0 0; padding: 0; border-top: 1px solid var(--lijn); }
.rm .hefboom { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--lijn); font-size: 16.5px; line-height: 1.4; color: var(--fg2); text-wrap: pretty; }
.rm .hefboom .kleur { width: 12px; height: 12px; border-radius: 3px; background: #fff; }
.rm .hefboom:nth-child(2) .kleur { background: rgba(255, 255, 255, .68); }
.rm .hefboom:nth-child(3) .kleur { background: rgba(255, 255, 255, .42); }
.rm .hefboom b { font-size: 21px; font-weight: 640; letter-spacing: -.025em; color: #fff; white-space: nowrap; }
.rm .hefboom .uitleg { grid-column: 2 / -1; font-size: 14px; }
#beterwerk .hefboom:nth-child(2) .kleur { background: var(--rood); }

/* ---------- the form: one line per calculator he used, in the home page's calculator box ---------- */
.rk-mee { display: grid; gap: 10px; }
.rk-mee[hidden] { display: none; }
.rk-mee-kop { margin: 0; }
.rk-mee-lijst { list-style: none; margin: 0; padding: 0; display: grid; }
.rk-mee-lijst li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 12px; align-items: baseline; padding: 10px 0 0; margin-top: 10px; border-top: 1px solid rgba(20, 20, 20, .1); }
.rk-mee-nr { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--inkt); color: #fff; font-size: 11px; line-height: 1; transform: translateY(-2px); }
.rk-mee-lijst .calc-knoppen { grid-column: 2; margin-left: 0; }

/* ---------- widths ---------- */
@media (max-width: 1100px) {
  .rm-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4.5vh, 44px); }
  /* the bar carries every result live, so the result stands after the sliders as their conclusion, with its button */
  .rm-uit { display: contents; }
  .rm-uit > * { order: 2; }
  .rm-in { order: 1; }
  .rm-ratio-blok { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; margin: 0; }
  .rm-ratio, .rm-bedrag { font-size: clamp(56px, 13vw, 96px); }
  .rm-oordeel { margin: 0; max-width: none; font-size: clamp(18px, 4vw, 24px); }
  .rm-zin, .rm-neen { flex: 1 0 100%; margin: 6px 0 0; }
  /* the label and its value share the first line, the track takes the second */
  .rm .tape, .rm .staaf { grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--sp); }
  .rm .tape-kop, .rm .staaf > span { grid-area: 1 / 1; }
  .rm .twin, .rm .staaf > b { grid-area: 1 / 2; }
  .rm .spoor, .rm .staaf .baan { grid-area: 2 / 1 / 3 / -1; }
  .rm .maatcijfers { grid-area: 3 / 1 / 4 / -1; }
  .rm .tape-noot { grid-area: 4 / 1 / 5 / -1; }
  .rm-acties .knop { height: auto; min-height: 56px; padding-block: 9px; white-space: normal; }
  /* the bar takes the short names and loses the small words */
  .rk-tab-naam, .rk-tab-uit small { display: none; }
  .rk-tab-kort { display: block; }
  .rk-tab { gap: 8px 10px; padding: 14px 16px 16px; }
  .rk-tab-uit b { font-size: clamp(20px, 10cqi, 30px); }
}
@media (max-width: 760px) {
  .rk-tabs-wrap { top: calc(var(--kop-h, 64px) + 6px); margin-inline: -8px; }
  .rk-tabs { --gat: 4px; border-radius: 20px; }
  .rk-glijder { border-radius: 16px; }
  .rk-tab { grid-template-columns: minmax(0, 1fr); grid-template-areas: "naam" "uit"; gap: 6px; padding: 11px 10px 12px; border-radius: 16px; }
  /* a third of a phone has no room for the arrow: the tab's own face and edge say it is a button */
  .rk-tab-nr, .rk-tab-ga { display: none; }
  .rk-tab-kort { font-size: var(--t-meta); }
  .rk-tab-uit b { font-size: clamp(15px, 18cqi, 20px); }
  .rm .twin .getal { min-height: 44px; }
  .rk-volgende span { font-size: 22px; }
}

/* ---------- the quiet tier: nothing moves that does not have to ---------- */
[data-tier=stil] .rm :is(.baan i, .twin, .rk-glijder, .rk-tab, .rk-tab-ga, .rk-volgende span) { transition: none; }
[data-tier=stil] .rm .tape.lok :is(.spoor .band::before) { animation: none; }
@media (prefers-reduced-motion: reduce) { .rk-glijder { transition: none; } }

/* ---------- without JavaScript the printed example is the result: the tracks and the bars they drive stay away ---------- */
.no-js .rm :is(.spoor, .maatcijfers, .staven, .rm-vink) { display: none; }
.no-js .rm .tape { grid-template-columns: minmax(0, 1fr) auto; }
.no-js .rm .hefbomen { margin-top: 0; }