/* A shell által renderelt `.ssr-*` DOM téma-semleges VÁZA — a keret
   alaprétege, a `composeSsrCss` mindig kibocsátja (tokenek után, design-
   stíluslapok előtt). Minden színe `--ssr-*` token: a palettát a design-témák
   adják (`registerSsrDesign`), egy téma ezért önmagában teljes — nem kell
   másik design-csomagot elé tölteni. Korábban a `classic` témát hordozó
   design-csomag stíluslapja volt, de a váz téma-független, ezért a protokoll-
   tulajdonosnál él.

   Itt CSAK `.ssr-*`-ra szűkített szabály állhat: a dokumentumot átíró
   (`*`, `html`, `body`) réteg az `ssr-document.css`-ben él, mert azt csak a
   keret saját lapja bocsáthatja ki — l. az ottani fejlécet. */
.ssr-layout{display:flex;flex-direction:column}
/* A teljes-magasság csak a GYÖKÉR layoutra: a `layout` node bármely slotba
   ágyazható (lábléc-blokk, panel-tartalom), és ott a 100vh nyilvánvalóan
   rossz. Mérve: a `szures` `min-height: 0`-val vonta vissza egy beágyazott
   layoutnál — a kompenzáció maga volt a jelzés, hogy a szabály túl széles. */
body>.ssr-layout{min-height:100vh}
/* A shell tartalom-sávjainak középre zárása. Alapérték: teljes szélesség,
   tehát a meglévő projektek megjelenése nem változik. A `szures` ugyanezt az
   értéket három külön szabályban ismételte (`min(100% - 2rem, 1300px)`). */
.ssr-nav-inner,body>.ssr-layout>.ssr-layout-row{width:min(100% - (var(--ssr-container-gutter,0px) * 2),var(--ssr-container-width,100%));margin-inline:auto}
/* Az app-shell viselkedése (rugalmas sor, görgő fő-régió) CSAK a GYÖKÉR
   layoutra — ugyanaz a lecke, mint fent a `100vh`-nál, most végigvezetve. A
   `layout` node bármely slotba ágyazható (lábléc-blokk, panel-tartalom), és ott
   a flex-sor + `overflow:auto` a dokumentum-folyamot töri meg; a `szures` ezért
   vonta vissza KÉT helyen (gyökér és panel). A padding viszont minden layoutra
   érvényes, tokenből. */
body>.ssr-layout>.ssr-layout-row{display:flex;flex:1;min-height:0}
/* A fő régió NEM görgető-konténer. Az `overflow:auto` app-shell-mintát
   feltételez (rögzített magasságú váz, belül görgő tartalom), a gyökér-layout
   viszont `min-height:100vh` — tehát a váz a tartalommal NŐ, és a görgetés
   mindig a DOKUMENTUMON történik. Mérve (2026-08-26, ogyelf4, 390×740):
   `main.clientHeight === main.scrollHeight === 43394`, `main.scrollTop === 0` —
   a görgő doboz sosem görgött. Két kárt viszont okozott: (1) a nézetablak
   helyett EHHEZ igazodott minden `position:sticky` a fő régióban, tehát a
   tapadó fejléc sosem tapadt (mérve: −300 px a nézetablak teteje fölött);
   (2) a vízszintes túlcsordulás itt PANORÁMÁZHATÓ sávvá vált (mérve:
   `scrollWidth 962` vs. `clientWidth 364`, 598 px-et lehetett oldalra húzni az
   egész kérdőívet). A `min-width:0` viszont kell: flex-elemként az automatikus
   minimum a tartalom min-content szélessége lenne, és a széles tábla a SORT
   feszítené szét. */
body>.ssr-layout>.ssr-layout-row>.ssr-layout-main{flex:1;min-width:0}
.ssr-layout-top{flex:0 0 auto}
.ssr-layout-main{padding:var(--ssr-layout-main-padding,1rem)}
.ssr-layout-left,.ssr-layout-right{flex:0 0 240px;padding:1rem;background:var(--ssr-surface);border-right:1px solid var(--ssr-border)}
.ssr-layout-right{border-right:0;border-left:1px solid var(--ssr-border)}
.ssr-layout-bottom{flex:0 0 auto;padding:.5rem 1rem;background:var(--ssr-surface);border-top:1px solid var(--ssr-border)}
.ssr-nav{background:var(--ssr-nav-bg);color:var(--ssr-nav-fg)}
/* KITÖLTÖTTSÉG-CSÍK. A százalék KI VAN ÍRVA („Kitöltve 42%") — egy szám
   nélküli vékony sín nem magyarázza meg magát —, és ugyanez megy az
   `aria-valuenow`/`aria-valuetext` párba is. A kitöltést `transform: scaleX`
   mozgatja (nem `width`), így nincs layout-újraszámolás minden leütésnél. */
.ssr-form-progress{width:100%}
.ssr-form-progress-text{display:block;font-size:.85rem;line-height:1.3;white-space:nowrap}
.ssr-form-progress-track{display:block;block-size:3px;background:var(--ssr-progress-track);border-radius:999px;overflow:hidden}
.ssr-form-progress-value{display:block;block-size:100%;background:var(--ssr-progress-value);transform:scaleX(0);transform-origin:left center;transition:transform 180ms ease-out}
@media (prefers-reduced-motion:reduce){.ssr-form-progress-value{transition:none}}
.ssr-nav-inner{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem 1rem;padding:.5rem 1rem}
.ssr-nav-brand{font-weight:600}
.ssr-nav-items{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem}
.ssr-nav-item{display:inline-block;padding:.5rem .9rem;color:var(--ssr-nav-item-fg);text-decoration:none;border-radius:.25rem}
.ssr-nav-item:hover{background:var(--ssr-nav-item-hover-bg);color:var(--ssr-nav-fg)}
.ssr-nav-item-active{background:var(--ssr-accent);color:var(--ssr-accent-contrast)}
/* Lista-nézetek KÖZÖS lapozója (`component-ssr/pagination`): a `grid` és a
   `cards` ugyanezt a sávot adja ki a saját gyökere alján. */
.ssr-pager-bar{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;justify-content:space-between;padding:.6rem 0}
.ssr-range{margin:0;color:var(--ssr-fg-muted);font-size:.85rem}
.ssr-pager{display:flex;flex-wrap:wrap;gap:.25rem}
.ssr-page{display:inline-flex;align-items:center;justify-content:center;min-width:2.5rem;min-height:2.5rem;padding:0 .6rem;border:1px solid var(--ssr-border);border-radius:.3rem;color:var(--ssr-fg);text-decoration:none;font-size:.9rem}
.ssr-page:hover{background:var(--ssr-row-hover)}
.ssr-page-current{background:var(--ssr-accent);border-color:var(--ssr-accent);color:var(--ssr-accent-contrast);font-weight:600}
.ssr-page-gap{display:inline-flex;align-items:center;min-height:2.5rem;padding:0 .25rem;color:var(--ssr-fg-faint)}
.ssr-cards{display:block}
.ssr-cards-title{margin:0 0 .75rem;font-size:1rem;color:var(--ssr-fg-secondary)}
.ssr-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem}
.ssr-card{background:var(--ssr-surface);border:1px solid var(--ssr-border);border-radius:.4rem;padding:.75rem}
.ssr-card-field{display:flex;gap:.4rem;font-size:.875rem;line-height:1.4}
.ssr-card-label{color:var(--ssr-fg-muted);flex:0 0 35%}
.ssr-card-value{color:var(--ssr-fg);flex:1;word-break:break-word}
.ssr-cards-empty,.ssr-cards-error{color:var(--ssr-fg-faint);font-style:italic;padding:.75rem 0}
.ssr-cards-error{color:var(--ssr-danger)}
/* Címsor-MÉRETEZÉS a designban, nem a komponensben: a `.ssr-text-title` maga
   csak reset (l. `vanilla-text.ssr.css`). A tag-szelektor a lényeg — csak a
   valódi címsor kap címsor-megjelenést, a `level` nélküli `<div>` a
   törzsszöveget örökli.

   A LAPCÍM egy szemantika, HÁROM komponensben: a `text` node `level: 1`-e, a
   `content` node és a `record` node saját `<h1>`-e ugyanazt a szerepet tölti be
   (l. a `level` kulcs leírását: „a `record` és a `content` node-ok maguk
   rendelik a saját `<h1>`-üket"), ezért mind ugyanabból a két tokenből él.
   Amíg külön beégetett méretet vittek, a téma kénytelen volt a saját
   tipográfiáját többször kimondani — és amelyiket kifelejtette, ott a lapcím
   némán a keret-alapértelmezésre esett (mérve: a `szures` négy rekord-oldala
   1.5rem szürkével, a lista-oldalak 2.75rem márka-kékkel). Fallback nincs: a
   tokent minden téma megadja (pin: `component-vanilla/tests/design-presets.test.ts`),
   ahogy a `--ssr-grid-cell-padding-*`-ot is. */
h1.ssr-text-title,h1.ssr-content-title,h1.ssr-record-title{font-size:var(--ssr-title-size);font-weight:var(--ssr-title-weight)}
h2.ssr-text-title{font-size:1.4rem;font-weight:600}
h3.ssr-text-title{font-size:1.2rem;font-weight:600}
h4.ssr-text-title,h5.ssr-text-title,h6.ssr-text-title{font-size:1.05rem;font-weight:600}
.ssr-content{max-width:780px;margin:0 auto;padding:1rem 0;line-height:1.55}
.ssr-content-title{margin:.25rem 0 1rem}
.ssr-content-body{font-size:1rem}
.ssr-content-body img{max-width:100%;height:auto}
.ssr-content-body h2{font-size:1.2rem;margin-top:1.4rem}
.ssr-content-error{color:var(--ssr-danger);font-style:italic}
.ssr-search-form{padding:.5rem 1rem;background:var(--ssr-surface);border-bottom:1px solid var(--ssr-border)}
.ssr-search-form-inner{display:flex;gap:.4rem;align-items:center;max-width:780px;margin:0 auto}
/* A `title` kulcs feliratának alap-metrikája: a rugalmas sorban teljes
   szélességű, böngésző-default h2-margó nélkül. A tipográfiát a téma adja. */
.ssr-search-form-title{flex:1 0 100%;margin:0;font-size:1rem}
.ssr-search-form-input{flex:1;padding:.45rem .6rem;border:1px solid var(--ssr-border-input);border-radius:.3rem;font-size:.95rem}
/* TOOLBAR — a gombok linkek vagy űrlap-gombok, de EGYFORMÁN néznek ki: a
   felhasználónak a művelet számít, nem az, hogy a keret melyik HTML-elemmel
   valósítja meg. Ezért közös `.ssr-toolbar-btn` alap, és akciónkénti
   `.ssr-toolbar-btn-<akció>` a designnak (pl. az elsődleges Keresés kiemelése)
   — sorrend- és feliratfüggetlenül. */
.ssr-toolbar{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
/* A séma-akciót hívó gomb saját `<form>`-ot hoz (a rekord-gombsorban nincs
   befoglaló űrlap). Az űrlap csak a POST-payload hordozója, elrendezésben nem
   vesz részt: `display: contents`-szel a GOMB marad a toolbar flex-eleme, tehát
   a link- és az űrlap-gomb egyformán viselkedik — pontosan azt a különbséget
   tünteti el, amit a közös `.ssr-toolbar-btn` a megjelenésben. */
.ssr-toolbar-form{display:contents}
.ssr-toolbar-btn{display:inline-flex;align-items:center;justify-content:center;padding:.45rem .9rem;border:1px solid var(--ssr-border);border-radius:.3rem;background:var(--ssr-surface);color:var(--ssr-fg);text-decoration:none;font:inherit;font-size:.9rem;cursor:pointer;white-space:nowrap}
.ssr-toolbar-btn:hover{background:var(--ssr-row-hover);color:var(--ssr-fg)}
/* Ikon-slot: a méretezés a konténeré, a festés a designé — ugyanaz a
   szereposztás, mint a menü ikon-slotjánál. */
/* IKON-ONLY gomb: a vízszintes padding a függőlegessel egyezik, hogy négyzetes
   legyen és ne a felirat-méretű dobozt örökölje. A jelölőt a renderelő adja
   (`iconOnly`), tehát nem a tartalomra szelektálunk: ikon + felirat esetén a
   gomb a normál dobozt viseli, csak a kettő közé kell köz. `:where()`-rel, hogy
   a design felülírhassa. */
.ssr-toolbar-btn:where(.ssr-toolbar-btn-icon-only){padding:.45rem}
.ssr-toolbar-btn:where(:has(.ssr-toolbar-btn-icon):not(.ssr-toolbar-btn-icon-only)){gap:.4rem}
.ssr-toolbar-btn-icon{display:inline-flex;align-items:center;height:1.15em}
.ssr-toolbar-btn-icon > *{display:block;width:auto;height:100%}
.ssr-toolbar-btn-search{background:var(--ssr-accent);border-color:var(--ssr-accent);color:var(--ssr-accent-contrast)}
.ssr-toolbar-btn-search:hover{background:var(--ssr-accent-hover);border-color:var(--ssr-accent-hover);color:var(--ssr-accent-contrast)}
.ssr-search-form-empty{color:var(--ssr-fg-faint);font-style:italic;padding:.5rem 0}
.ssr-grid{padding:.5rem 0}
.ssr-grid-title{margin:0 0 .5rem;font-size:1rem;color:var(--ssr-fg-secondary)}
.ssr-grid-table{width:100%;border-collapse:collapse;background:var(--ssr-surface);border:1px solid var(--ssr-border)}
.ssr-grid-table th,.ssr-grid-table td{padding:var(--ssr-grid-cell-padding-y) var(--ssr-grid-cell-padding-x);border-bottom:1px solid var(--ssr-border-light);text-align:left;font-size:.9rem}
.ssr-grid-table th{background:var(--ssr-th-bg);font-weight:600;color:var(--ssr-th-fg)}
.ssr-grid-sort{color:inherit;text-decoration:none;display:inline-block;width:100%}
.ssr-grid-table th[aria-sort]{cursor:pointer;user-select:none;white-space:nowrap}
.ssr-grid-table th[aria-sort]::after{content:"\2195";margin-left:.35rem;opacity:.45}
.ssr-grid-table th[aria-sort="ascending"]::after{content:"\2191";opacity:1}
.ssr-grid-table th[aria-sort="descending"]::after{content:"\2193";opacity:1}
.ssr-grid-sort:hover,.ssr-grid-sort:focus-visible{text-decoration:underline}
.ssr-grid-row{cursor:pointer}
.ssr-grid-row a{color:inherit;text-decoration:none;display:block}
/* Mindhárom sor-háttér a CELLÁN és AZONOS specificitáson (0,2,2) — a sorrend
   dönt: zebra < kijelölt < hover. Korábban a zebra nem volt keret-képesség, a
   hover/kijelölt pedig a `<tr>`-en ült; egy cella-szintű projekt-zebra átfestette
   őket, ezért a projektnek MINDKETTŐT újra ki kellett mondania. */
.ssr-grid-row:nth-child(even) td{background:var(--ssr-row-alt-bg,transparent)}
.ssr-grid-row.ssr-grid-row-selected td{background:var(--ssr-row-selected)}
.ssr-grid-row:hover td{background:var(--ssr-row-hover)}
.ssr-grid-empty,.ssr-grid-error{color:var(--ssr-fg-faint);font-style:italic;padding:.5rem .75rem}
.ssr-grid-error{color:var(--ssr-danger)}
.ssr-grid-count{margin:0 0 .5rem;color:var(--ssr-fg-secondary);font-size:.9rem}
/* A táblázat lapozó-sávja a cellák vízszintes ritmusát követi — a közös
   `.ssr-pager-bar` váz a lista-nézetek szakaszában, lentebb. */
.ssr-grid .ssr-pager-bar{padding-inline:var(--ssr-grid-cell-padding-x)}
.ssr-grid-detail-cell{white-space:nowrap;text-align:right}
/* A sor-végi gombsor a táblázatban LINKNEK néz ki, nem dobozos gombnak: a
   cella egy szűk, jobbra zárt oszlop vége, ahol a keretes gomb a sor-ritmust
   törné meg. Ugyanaz a szerep, ugyanaz a szótár (`.ssr-toolbar-btn`), csak a
   táblázat-kontextusban más a megjelenés — a döntés ezért ITT van, a cellára
   szűkítve, nem a gomb-alapban. */
.ssr-grid-detail-cell .ssr-toolbar{justify-content:flex-end}
.ssr-grid-detail-cell .ssr-toolbar-btn{padding:0;border:0;background:none;color:var(--ssr-accent);font-size:.85rem}
.ssr-grid-detail-cell .ssr-toolbar-btn:hover{background:none;color:var(--ssr-accent);text-decoration:underline}
.ssr-record{padding:.5rem 0}
.ssr-record-title{margin:0 0 1rem}
/* A gombsor a cím és az adatok KÖZÖTT áll; a köz mindkét oldalán ugyanaz, hogy
   a sáv önálló vezérlő-sornak látsszon, ne az adatlap keretére ragadjon. A
   szabály a rekordra szűkít: a toolbar máshol (kereső-űrlap) egy flex-sor
   eleme, ott a szülő `gap`-je adja a közt. */
.ssr-record > .ssr-toolbar{margin-bottom:1rem}
.ssr-record-fields{margin:0;background:var(--ssr-surface);border:1px solid var(--ssr-border);border-radius:.3rem}
.ssr-record-row{display:flex;flex-wrap:wrap;gap:.25rem 1rem;padding:.5rem .75rem;border-bottom:1px solid var(--ssr-border-light)}
.ssr-record-row:last-child{border-bottom:0}
/* Beágyazott sor-lista (tömb-mező): minden elem egy számozott rekord-blokk,
   a befoglaló adatlap címke–érték soraival — az elem egy űrlap-rekord, a képe
   is az űrlapé. A sorszám a lista-jelölő, a keretet a belső `.ssr-record-fields`
   adja. */
.ssr-record-items{margin:.25rem 0 0;padding:0 0 0 1.5rem}
.ssr-record-item{margin:0 0 .5rem}
.ssr-record-item::marker{font-weight:600;color:var(--ssr-fg-secondary)}
.ssr-record-label{margin:0;min-width:10rem;font-weight:600;color:var(--ssr-fg-secondary);font-size:.9rem}
.ssr-record-value{margin:0;flex:1 1 12rem;font-size:.9rem;color:var(--ssr-fg)}
.ssr-record-empty,.ssr-record-error{color:var(--ssr-fg-faint);font-style:italic;padding:.5rem .75rem}
.ssr-record-error{color:var(--ssr-danger)}
.ssr-map{padding:0;position:relative}
.ssr-map-root{width:100%;height:480px;background:var(--ssr-map-bg)}
.ssr-map-empty,.ssr-map-error{color:var(--ssr-fg-faint);font-style:italic;padding:.5rem .75rem;text-align:center}
.ssr-map-error{color:var(--ssr-danger)}
.ssr-form{max-width:420px;margin:1rem auto;background:var(--ssr-surface);border:1px solid var(--ssr-border);border-radius:.5rem;padding:1.25rem 1.5rem}
.ssr-form-title{margin:0 0 1rem;font-size:1.25rem;color:var(--ssr-fg)}
/* Csali (honeypot) mező: a képernyőről is el kell tűnnie, nem csak a
   segédeszközök elől (`aria-hidden` + `tabindex=-1` a HTML-ben). NEM
   `display:none` és nem `visibility:hidden`: azt a botok egy része
   kifejezetten szűri, a kiemelés viszont minden böngészőben eltünteti. */
.ssr-form-hp{position:absolute;inset-inline-start:-10000px;inline-size:1px;block-size:1px;overflow:hidden}
.ssr-form-error{margin:0 0 1rem;padding:.5rem .75rem;background:var(--ssr-danger-bg);border:1px solid var(--ssr-danger-border);border-radius:.3rem;color:var(--ssr-danger);font-size:.9rem}
.ssr-form-inner{display:flex;flex-direction:column;gap:.85rem}
.ssr-form-field{display:flex;flex-direction:column;gap:.3rem}
/* A címke a mezősor ELSŐDLEGES azonosítója — teli szövegszín és félkövér, az
   SPA `.d-label`-jével azonos szereposztásban. Korábban a leírással közel
   azonos súlyú és színű volt, így egy bekezdésnyi `description` mellett
   elveszett. */
.ssr-form-label{font-size:.85rem;font-weight:600;color:var(--ssr-fg)}
/* Kötelezőség-jelölés: a form dönti el, MELYIK oldalt jelöljük
   (`requirementMarking` séma-kulcs) — a kötelezőt csillaggal, vagy
   csupa-kötelező űrlapon a ritkább, nem kötelező oldalt felirattal. A hordozó
   `<span>` üresen is a DOM-ban marad (a feltételes kötelezőséget a
   `form-visibility.js` ide írja), ezért nem foglalhat helyet üresen. */
.ssr-form-requirement:empty{display:none}
.ssr-form-required{color:var(--ssr-danger)}
.ssr-form-optional{font-weight:400;font-size:.85em;color:var(--ssr-fg-muted)}
/* Mező-súgó: a címke és a vezérlő KÖZÖTT áll (a sorrendet a renderelő HTML-je
   adja, nem ez a szabály). A csoport-leírással azonos vizuális szerep. */
.ssr-form-field-description{margin:0;color:var(--ssr-fg-muted);font-size:.85rem;line-height:1.35}
.ssr-form-input{width:100%;padding:.5rem .65rem;border:1px solid var(--ssr-border-input);border-radius:.3rem;font-size:.95rem;color:var(--ssr-fg);background:var(--ssr-surface)}
/* A több soros mező (`format: "multiline"`) ugyanazt a doboz-alakot viseli,
   mint a sima beviteli mező — csak két böngésző-default szorul javításra: a
   `textarea` alapértelmezett betűtípusa monospace (a lap tipográfiájától
   elütne), és a vízszintes átméretezés kitörné az űrlap-rácsból. */
textarea.ssr-form-input{font-family:inherit;line-height:1.45;resize:vertical}
.ssr-form-input:focus{outline:none;border-color:var(--ssr-accent);box-shadow:0 0 0 2px var(--ssr-accent-soft)}
/* Az űrlap gombsora: az elsődleges küldés + a `toolbar` bejegyzései EGY sorban,
   szűk helyen tördelve. A külső térköz ITT van (nem a gombokon), különben a
   sorba került elemek margói összeadódnának. */
.ssr-form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.35rem}
.ssr-form-submit{padding:.6rem 1rem;background:var(--ssr-accent);color:var(--ssr-accent-contrast);border:0;border-radius:.3rem;cursor:pointer;font-size:.95rem;font-weight:500}
.ssr-form-submit:hover{background:var(--ssr-accent-hover)}
.ssr-form-error-message{margin:0}
.ssr-form-error-list{margin:.35rem 0 0;padding-left:1.1rem}
.ssr-form-error-list a{color:inherit}
.ssr-form-field-error{margin:0;color:var(--ssr-danger);font-size:.85rem}
/* Többmezős kérdés KÖZÖS hibája — a fieldset végén, egyszer. Ugyanaz a
   vizuális szerződés, mint a mező-szintű hibáé; a `grid-column` azért kell,
   mert a `.ssr-form-group` rács, és a hiba a teljes sort foglalja. */
.ssr-form-group-error{grid-column:1/-1;margin:0;color:var(--ssr-danger);font-size:.85rem}
.ssr-form-input[aria-invalid="true"]{border-color:var(--ssr-danger)}
/* Az opciólista alapból EGY oszlop (`minmax(100%,1fr)` → egy sáv fér ki), és a
   csoport `optionMinWidth`-e írja felül: annyi hasábra tördel, ahány ilyen
   széles opció elfér. Tartalomvezérelt, breakpoint nélkül — ugyanaz az idióma,
   mint a mezőknél a `--ssr-form-col-min`. A DOM-sorrend az opciók séma-
   sorrendje marad, tehát a fókusz- és felolvasási sorrend nem változik. */
.ssr-form-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--ssr-option-min,100%),1fr));gap:.3rem}
.ssr-form-option{display:flex;align-items:center;gap:.45rem;font-size:.95rem;color:var(--ssr-fg)}
.ssr-form-checkbox,.ssr-form-radio{margin:0;accent-color:var(--ssr-accent)}
/* `min-inline-size:0`: a `fieldset` natív alapértéke `min-content`, ami a
   legszélesebb gyerek (pl. egy széles opciótábla) alá NEM enged zsugorodni —
   a túlcsordulás ilyenkor a dokumentumra szökik, és a belső görgetőburok
   sosem aktiválódik. A grid-elemként viselkedő gyerekekre ugyanez a
   `.ssr-option-table-scroll{min-width:0}`-ban él. */
.ssr-form-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--ssr-form-col-min,100%),1fr));gap:.85rem;margin:0;padding:.85rem 1rem 1rem;border:1px solid var(--ssr-border);border-radius:.4rem;min-inline-size:0}
.ssr-form-group>legend,.ssr-form-group>.ssr-form-group-description{grid-column:1/-1}
/* Teljes soros mező (`fieldGroups[].fullWidthFields`): a csoport rácsában
   SAJÁT sort kap, nem osztozik oszlopon. Tipikus alakja a jelölőnégyzet-
   kérdés „Egyéb" részletezője az opció-kártyák után. SZERKEZETI szabály —
   ezért az SSR-alapstílusban él, nem témában; a DOM- és fókuszsorrend a séma
   `fields` sorrendje marad, nincs `order`/`nth-child` átrendezés. */
.ssr-form-field--wide{grid-column:1/-1}
.ssr-form-group-title{padding:0 .35rem;font-size:.95rem;font-weight:600;color:var(--ssr-fg)}
.ssr-form-group-description{margin:0;color:var(--ssr-fg-muted);font-size:.85rem}
/* Combo (`id` field-type) — a találati lista a mezőblokk fölé úszik, ezért a
   burok pozicionált. Minden szín `--ssr-*` tokenből: a témák vezérlik. */
.ssr-lookup{position:relative;display:grid;gap:.3rem}
/* A vezérlő-sáv: a beviteli mező, és FÖLÖTTE lebegve a betöltés-jelző meg a
   törlés-gomb. A jobb oldali belső margó nekik tartja a helyet, hogy ne
   takarják a beírt szöveget. */
.ssr-lookup-control{position:relative;display:grid}
.ssr-lookup-control .ssr-lookup-search{padding-inline-end:4rem}
.ssr-lookup-clear,.ssr-lookup-spinner{position:absolute;top:50%;translate:0 -50%}
.ssr-lookup-clear[hidden],.ssr-lookup-spinner[hidden]{display:none}
.ssr-lookup-clear{inset-inline-end:.4rem;inline-size:1.75rem;block-size:1.75rem;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ssr-fg-muted);font-size:1.15rem;line-height:1;cursor:pointer}
.ssr-lookup-clear:hover{background:var(--ssr-accent-soft);color:var(--ssr-fg)}
.ssr-lookup-spinner{inset-inline-end:2.3rem;inline-size:1rem;block-size:1rem;border:2px solid var(--ssr-border);border-top-color:var(--ssr-accent);border-radius:50%;animation:ssr-lookup-spin 700ms linear infinite}
@keyframes ssr-lookup-spin{to{rotate:360deg}}
/* A pörgés puszta dekoráció — mozgás-érzékenyeknél álló korong is jelzi. */
@media (prefers-reduced-motion:reduce){.ssr-lookup-spinner{animation:none}}
/* Letiltott mezőn a saját vezérlői sem használhatók. */
.ssr-lookup:has(.ssr-lookup-search:disabled) .ssr-lookup-clear{display:none}
.ssr-lookup-results{position:absolute;top:100%;left:0;right:0;z-index:20;display:grid;max-height:18rem;overflow-y:auto;border:1px solid var(--ssr-border-input);border-radius:.4rem;background:var(--ssr-surface);box-shadow:0 .5rem 1.25rem color-mix(in srgb,var(--ssr-fg) 14%,transparent)}
.ssr-lookup-results[hidden]{display:none}
.ssr-lookup-option{padding:.55rem .7rem;border:0;border-bottom:1px solid var(--ssr-border);background:transparent;color:var(--ssr-fg);font:inherit;line-height:1.4;text-align:left;cursor:pointer}
.ssr-lookup-option:last-child{border-bottom:0}
.ssr-lookup-option:hover,.ssr-lookup-option-active{background:var(--ssr-accent-soft)}
.ssr-lookup-status{margin:0;color:var(--ssr-fg-muted);font-size:.85rem}
/* `optionTable` mezőcsoport: sorok a mezők, oszlopok a közös opciókészlet.
   A sor `<tr class="ssr-form-field">` — így a feltételes megjelenítés
   kliens-szkriptje ugyanúgy kezeli, mint bármely más mezőblokkot. */
/* A SOR mezőblokk IS (a kliens-szkript arra szelektál), de a `.ssr-form-field`
   flex-oszlopa egy `<tr>`-en a cellákat egymás ALÁ tenné — a táblázat-
   szerepet vissza kell állítani. */
.ssr-option-table tr.ssr-form-field{display:table-row;gap:0}
/* A feltételes megjelenítés KONTRAKTUSA a `hidden` attribútum: a szerver-
   render és a `form-visibility.js` UGYANAZT az attribútumot állítja a
   mezőblokkon és a csoport-fieldseten. A böngésző UA-szabálya
   (`[hidden]{display:none}`) viszont csak addig érvényesül, amíg semmi nem ad
   `display`-t ugyanazon az elemen: a fenti `.ssr-form-field{display:flex}` /
   `.ssr-form-group{display:grid}` azonos specifikussággal, KÉSŐBB jön, tehát
   felülírja — a rejtett mező láthatóan ott marad. Ezért minden `display`-t adó
   keret-szabály mellé kell `[hidden]` őr, a szabály UTÁN. */
.ssr-form-field[hidden],.ssr-form-group[hidden]{display:none}
/* DISABLED interakciós állapot — a `hidden` testvére ugyanazon a relevancia-
   tengelyen: a mező a helyén marad, de nem használható (mező `enabled`, illetve
   csoport-szintű natív `<fieldset disabled>`). A jelzés SZERKEZETI, nem
   mezőnév-alapú: a natív `:disabled` állapotot olvassa, tehát minden
   mezőtípusra és minden témában ugyanaz. `opacity` szándékosan NINCS a teljes
   blokkon: az a szöveg kontrasztját kiszámíthatatlanul rontaná — külön
   token-hármas adja a szürkéket. A jelentést a szín MELLETT a natív állapot és
   az interakció hiánya is közli. */
.ssr-form-input:disabled{background:var(--ssr-disabled-bg);border-color:var(--ssr-disabled-border);color:var(--ssr-disabled-fg)}
.ssr-form-option:has(input:disabled){background:var(--ssr-disabled-bg);border-color:var(--ssr-disabled-border);color:var(--ssr-disabled-fg);cursor:not-allowed}
/* A címke és a súgó IS az állapotot közli — nem csak az apró natív vezérlő. A
   `user-select:none` a DÁP disabled-kontraktusa (a szöveg nem kijelölhető);
   a readonly ettől KÜLÖN marad: ott az érték olvasható és kijelölhető. */
.ssr-form-field:has(:disabled)>.ssr-form-label,
.ssr-form-field:has(:disabled)>.ssr-form-field-description{color:var(--ssr-disabled-fg);user-select:none}
.ssr-form-option:has(input:disabled){user-select:none}
/* Letiltott csoport: a legend és a csoport-súgó ugyanazt mondja, mint a tagjai. */
.ssr-form-group[disabled]>.ssr-form-group-title,
.ssr-form-group[disabled]>.ssr-form-group-description{color:var(--ssr-disabled-fg);user-select:none}
/* Hover/focus a letiltott felületen nem gyulladhat ki. */
.ssr-form-option:has(input:disabled):hover,
.ssr-form-option:has(input:disabled):focus-within{background:var(--ssr-disabled-bg);border-color:var(--ssr-disabled-border);box-shadow:none}
/* A natív jelölő MAGA is szürke: az `accent-color` amúgy a téma kiemelő
   színét viszi, és egy kék rádiógomb szürke soron félreérthető. */
.ssr-form-checkbox:disabled,.ssr-form-radio:disabled{accent-color:var(--ssr-disabled-fg)}
/* Lookup (combobox): a keresőmező letiltásakor a TELJES vezérlő inaktív —
   a státusz-sor is, és a találati lista nem nyílhat le. A `.ssr-form-input`
   disabled-szabálya magára a keresőre már érvényes (közös osztály). */
.ssr-lookup:has(.ssr-lookup-search:disabled) .ssr-lookup-status{color:var(--ssr-disabled-fg);user-select:none}
.ssr-lookup:has(.ssr-lookup-search:disabled) .ssr-lookup-results{display:none}
.ssr-option-table tr.ssr-form-field[hidden]{display:none}
/* `table-layout:fixed`: az opció-oszlopok EGYENLŐEN osztoznak a maradékon —
   különben a leghosszabb fejléc-szöveg magához húzza a helyet. A sor-
   címke oszlopát NÉVVEL célozzuk (`.ssr-option-table-label`), nem
   `:first-child`-dal: a jelentés ne a pozícióhoz kötődjön. */
/* SAJÁT GÖRGETŐBUROK. A táblázat a felirataitól szélesebb lehet a viewportnál;
   burok nélkül a DOKUMENTUMOT tolná ki. `min-width:0` kell, mert a burok grid-
   elem (`.ssr-form-group{display:grid}`), és a grid-elem alap `min-width:auto`
   a tartalom minimumára feszülne — épp azt akadályozva meg, hogy a burok
   zsugorodjon és görgessen. Az `overscroll-behavior-inline:contain` megakadá-
   lyozza, hogy a tábla végén továbbgörgetve a LAP induljon el. */
/* A `position:relative` NEM dekoráció: a burok így lesz TARTALMAZÓ DOBOZ a
   benne élő abszolút pozicionált leszármazottaknak (a vizuálisan rejtett
   cella-feliratok, `.ssr-visually-hidden`). Enélkül a tartalmazó dobozuk egy
   burkon KÍVÜLI pozicionált ős, és egy görgető doboz csak azt vágja le, aminek
   a tartalmazó-doboz-lánca rajta megy át — a 319 rejtett felirat így a tábla
   jobb széléig kitolta az ŐSÖK görgethető területét, és a tábla helyett a LAP
   lett oldalra húzható. Mérve (2026-08-26, ogyelf4, 390 px): shell
   `scrollWidth 962 → 364`. */
.ssr-option-table-scroll{position:relative;min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
/* A tapadó fejléc-másolat KONTÉNERE. A másolat a shell tartalom-dobozán belül
   mozdulhat el, ezért a fejléc a dokumentum-görgetést követi, és a shell alján
   — vagyis a tábla végén — elenged. A magasságot és a negatív margót a runtime
   méri rá, hogy a másolat pixelre az eredeti `<thead>` fölé kerüljön,
   layout-hatás nélkül. A shellnek SEMMILYEN saját szabálya nincs (és
   `position:relative`-t sem kaphat: akkor ő lenne a burokból kiszökő rejtett
   feliratok tartalmazó doboza, l. `.ssr-option-table-scroll`) — a `data-`
   jelölés és a doboz-lánc elég. */
/* A `--ssr-top-inset` a nézetablak tetejét foglaló FIX keret-krómot (összecsukó
   fejléc, l. `ssr-collapsing.js`) méri; enélkül a tapadó fejléc pont MÖGÉ
   csúszna. Krómot nem tevő lapon a token nincs jelen → a fallback 0. */
/* A sávnak NINCS saját megjelenése (se szín, se sűrűség, se keret): a benne ülő
   elem az eredeti fejléc KLÓNJA, a tábla osztályaival — a design szabályai
   változatlanul érvényesek rá. Egy utánzó cella-stílus-család itt azt jelentené,
   hogy a keret megismétli a téma értékeit, és némán elcsúszik tőlük (mérve:
   padding, betűvastagság, betűméret és a kártya-ív is eltért). Az `overflow`
   a vízszintes görgetéskor kilógó klónt vágja. */
.ssr-option-table-sticky{position:sticky;top:var(--ssr-top-inset,0px);z-index:2;overflow:hidden}
.ssr-option-table-scroll:focus-visible{outline:2px solid var(--ssr-accent);outline-offset:2px}
/* Az olvashatósági minimum TOKENBŐL épül, az oszlopszám pedig a rendereléskor
   ismert (`--ssr-option-table-cols`) — így a görgetés akkor jelenik meg, ha a
   tartalom tényleg nem fér el. Nincs viewport-breakpoint és nincs beégetett
   táblaszélesség: az a kompenzáció, amit ez a szabály kivált. */
.ssr-option-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:.95rem;
  min-width:calc(var(--ssr-option-table-label-min) + var(--ssr-option-table-col-min) * var(--ssr-option-table-cols,1))}
.ssr-option-table-label{width:40%}
.ssr-option-table th,.ssr-option-table td{padding:.5rem .6rem;border-bottom:1px solid var(--ssr-border);text-align:center}
.ssr-option-table thead th{background:var(--ssr-th-bg);color:var(--ssr-th-fg);font-weight:600}
.ssr-option-table tbody th{text-align:left;font-weight:600}
/* A SAROKCELLA a kérdés szövege — a sor-címke oszlop fejléce, nem opció-
   címke —, ezért balra zárt, mint alatta a sor-fejlécek. NÉVVEL célozva
   (`.ssr-option-table-label`), nem `:first-child`-dal. */
.ssr-option-table thead .ssr-option-table-label{text-align:left}
.ssr-option-cell{display:flex;align-items:center;justify-content:center;cursor:pointer}
/* VIZUÁLISAN rejtett, de az akadálymentességi fában BENNE MARADÓ elem.
   `display:none` itt hiba lenne — az a képernyőolvasó elől is elvenné.

   Két fogyasztó, egy deklaráció:
   - opció-tábla cella-felirata (`field-types`): a jelentést a fejléc-oszlop
     adja, de a vezérlőnek saját név is kell;
   - `hideLabel`-es mező `<dt>`-je a `record` nézetben (`ssr-record`): a `<dl>`
     szerkezete megköveteli a `<dt>`-t, a séma viszont azt kérte, hogy a
     felirat ne látszódjon. */
.ssr-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* A `format: "email" | "tel"` mező SSR-cellája: a hivatkozás LÁTSZÓDJON is
   linknek. A színt a téma adja (`--ssr-accent`), a szabály csak strukturális. */
.ssr-cell-link {
  color: var(--ssr-accent);
  text-decoration: none;
}

.ssr-cell-link:hover {
  text-decoration: underline;
}

/* SPECIFICITÁS-SZERZŐDÉS: a grid a SOR-kiválasztás cella-linkjeit szín és
   aláhúzás nélkül rajzolja, és ezt egy elem-szintű szabállyal teszi
   (`ssr-base.css`: `.ssr-grid-row a{color:inherit;text-decoration:none}`,
   0,1,1). Ez a link viszont az ADATÉ, nem a sor-kiválasztásé — a `.ssr-cell-link`
   önmagában (0,1,0) alulmaradna, ezért kell a sor-kontextusos alak. Ha a
   `.ssr-grid-row a` valaha megszűnik (a `.ssr-grid-cell-link` óta felesleges),
   ez a blokk törölhető. */
.ssr-grid-row .ssr-cell-link {
  color: var(--ssr-accent);
  text-decoration: none;
  display: inline;
}

.ssr-grid-row .ssr-cell-link:hover {
  text-decoration: underline;
}

.ssr-file-cell{display:inline-flex;flex-wrap:wrap;gap:.25rem;align-items:center}
.ssr-file-thumb{width:64px;height:64px;object-fit:cover;border-radius:.3rem;border:1px solid var(--ssr-border);background:var(--ssr-surface)}
.ssr-file-chip{display:inline-block;padding:.1rem .45rem;background:var(--ssr-th-bg);border:1px solid var(--ssr-border);border-radius:.25rem;font-size:.8rem;color:var(--ssr-fg-secondary)}
.ssr-file-lightbox-open{display:inline-flex;padding:0;border:0;background:none;cursor:zoom-in;border-radius:.3rem}
.ssr-file-lightbox-open .ssr-file-thumb{display:block}
.ssr-file-lightbox-open:focus-visible{outline:2px solid var(--ssr-accent);outline-offset:2px}
.ssr-lightbox{padding:0;border:0;background:transparent;max-width:100vw;max-height:100vh;width:100%;height:100%;overflow:hidden}
.ssr-lightbox::backdrop{background:rgba(0,0,0,.82)}
.ssr-lightbox-figure{margin:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;pointer-events:none}
.ssr-lightbox-image{max-width:calc(100vw - 6rem);max-height:calc(100vh - 5rem);object-fit:contain;pointer-events:auto}
.ssr-lightbox-caption{color:#fff;font-size:.9rem;max-width:calc(100vw - 6rem);text-align:center;pointer-events:auto}
.ssr-lightbox-close,.ssr-lightbox-prev,.ssr-lightbox-next{position:absolute;display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border:0;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;font-size:2rem;line-height:1;cursor:pointer}
.ssr-lightbox-close:hover,.ssr-lightbox-prev:hover,.ssr-lightbox-next:hover{background:rgba(0,0,0,.75)}
.ssr-lightbox-close:focus-visible,.ssr-lightbox-prev:focus-visible,.ssr-lightbox-next:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ssr-lightbox-close{top:1rem;right:1rem}
.ssr-lightbox-prev{left:1rem;top:50%;transform:translateY(-50%)}
.ssr-lightbox-next{right:1rem;top:50%;transform:translateY(-50%)}
.ssr-lightbox-counter{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);color:#fff;font-size:.85rem;padding:.2rem .6rem;border-radius:1rem;background:rgba(0,0,0,.5)}

/* Az összecsukó node (`collapsing: true`) MECHANIKA-szabályai. Csak a szkript
   által felvett osztályokon élnek, tehát a kulcs nélkül inertek. A MEGJELENÉS
   (kompakt paddingok, zsugorított logó, elrejtett brand-felirat) nem ide
   tartozik: azt a design-stíluslap írja az `.ssr-collapsing-stuck` osztályra. */

/* Az elem kikerül a folyamból; a helyét a szkript által méretezett
   `.ssr-collapsing-spacer` tartja — l. az `ssr-collapsing.js` magyarázatát. */
.ssr-collapsing-fixed {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 900;
}

/* NO-JS (és szkript-indulás előtti) fallback: a gyökér-layout felső régiója
   egyszerűen ragad, amíg a szkript át nem vette a fejlécet. A szabály a
   RÉGIÓRA szól, nem a wrapperre: egy `position: sticky` elem a szülője
   tartalom-dobozán belül tud csak elmozdulni, a wrapper szülője pedig épp a
   fejléc-magasságú régió — ott nulla a mozgástér. A `:has()` a keret két saját
   kontraktusát köti össze (régió-osztály + a `collapsing` kulcs wrappere),
   projekt-tudás nélkül. A szkript indulása után a szelektor megszűnik
   illeszkedni, és a fixed+spacer mechanika él — a kettő nem versenyez. */
body > .ssr-layout > .ssr-layout-top:has(
    .ssr-collapsing:not(.ssr-collapsing-fixed)
  ) {
  position: sticky;
  top: 0;
  z-index: 900;
}

.ssr-collapsing-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  visibility: hidden;
  pointer-events: none;
}

/* A NYOMTATÁSI réteg: mit jelent ugyanaz a lap PAPÍRON (és a belőle készülő
   PDF-ben, l. `urlToPdf`).

   MIÉRT KÜLÖN LAP ÉS MIÉRT UTOLSÓ. A `composeSsrCss` sorrendje adja a
   kaszkádot (az SSR-nek nincs `@layer`-e): tokenek → `ssr-base.css` →
   komponens-lapok → design-lapok. A nyomtatási szabályoknak a DESIGN fölött
   kell állniuk — a képernyő-króm egy részét a téma rajzolja (nagyító-ikon a
   `.ssr-lookup-control::after`-en) —, ezért ez a lap megy ki utoljára. Mivel
   minden szabálya `@media print`-ben él, a képernyős megjelenésre nincs
   hatása; a sorrend csak azt garantálja, hogy nyomtatáskor nem marad alul.

   MIÉRT `@media print` ÉS NEM a szerver `?print=1` módja. A szerver-oldali
   nyomtatási mód azt dönti el, mi KERÜLJÖN A DOKUMENTUMBA (gombsor, vezérlők
   — `ctx.printMode`); ez a lap azt, hogy a dokumentum hogyan törik lapokra és
   mi a KRÓM. Utóbbi a böngésző nyomtatásakor is érvényes kell legyen — a
   látogató a sima lapot is kinyomtathatja (Ctrl+P), nem csak a `?print=1`-et. */

@media print {
  /* ==========================================================================
     1. BEVITEL-KRÓM — ami csak a kitöltést segíti, nem hordoz adatot
     ========================================================================== */

  /* Lookup (`id`) mező: nagyító-ikon (téma), törlés-gomb, töltésjelző, a
     legördülő találati lista és az állapotsor. A beírt/kiválasztott ÉRTÉK a
     mezőben marad — a papír azt mutatja, ami az űrlapon áll. */
  .ssr-lookup-clear,
  .ssr-lookup-spinner,
  .ssr-lookup-results,
  .ssr-lookup-status,
  .ssr-lookup-control::after {
    display: none;
  }

  /* Az ikonoknak fenntartott jobb oldali sáv ikonok nélkül csak üres hely
     (mérve: 116 px a `nngyk` témával). A szelektor SZÁNDÉKOSAN ugyanaz, amit a
     téma használ (`:not(:disabled)`): azonos specificitáson a később kibocsátott
     nyer, és ez a lap megy ki utoljára — enélkül a téma erősebb szabálya marad
     érvényben. */
  .ssr-lookup-control .ssr-lookup-search:not(:disabled) {
    padding-inline-end: 0.6rem;
  }

  /* A böngésző SAJÁT vezérlő-króma: naptár-választó, szám-léptető, kereső-X.
     Ezeket nem a keret rajzolja, tehát osztállyal nem célozhatók. */
  input::-webkit-calendar-picker-indicator,
  input::-webkit-inner-spin-button,
  input::-webkit-outer-spin-button,
  input::-webkit-search-cancel-button {
    display: none;
  }

  /* ==========================================================================
     2. OLDALTÖRÉS — egy kérdés egyben maradjon
     ========================================================================== */

  /* A mezőblokk a címkét, a súgót, a vezérlőt és a hibaüzenetet fogja össze:
     ez a legkisebb egység, aminek van jelentése. Kettévágva a következő lap
     tetején címke nélküli beviteli doboz áll (mérve: `ogyelf4` kérdőív-PDF).
     Az opciótábla SORA is `.ssr-form-field` (l. `ssr-base.css`), tehát a
     mátrix-kérdések sorai is egyben maradnak. A böngésző a kérést elengedi,
     ha a blokk önmagában sem fér ki egy lapra — nincs végtelen tologatás. */
  .ssr-form-field,
  .ssr-record-row {
    break-inside: avoid;
  }

  /* A csoport CÍME a csoport első kérdésével együtt kezdődjön: egy lap alján
     árván maradt szekció-felirat a következő lapon megismételhetetlen. */
  .ssr-form-group-title,
  .ssr-form-title {
    break-after: avoid;
  }

  /* ==========================================================================
     3. TAPADÓ FEJLÉC — képernyő-affordancia, papíron zavaró
     ========================================================================== */

  /* Az opciótábla tapadó fejléce egy `aria-hidden` MÁSOLAT, ami a
     dokumentum-görgetéshez tapad (l. `option-table-sticky.ts`). Nyomtatásban
     nincs görgetés: a másolat ott ragad, ahol a törés éri, és RÁCSÚSZIK az
     első sorokra. Az eredeti `<thead>` marad — az `table-header-group`
     alapértelmezés miatt a lapok tetején magától meg is ismétlődik.

     A `!important` a klón magasságát kompenzáló INLINE margóra megy (a
     szkript írja a görgetőburokra); szabállyal az inline stílus nem verhető.
     Enélkül a másolat elrejtése a tábla tetejét vágná le. */
  .ssr-option-table-sticky {
    display: none;
  }

  .ssr-option-table-scroll {
    margin-top: 0 !important;
  }

  /* ==========================================================================
     4. GÖRGETŐ-BUROK — papíron nincs görgetés, viszont TÖRHETŐNEK kell lennie
     ========================================================================== */

  /* Az opciótábla vízszintes görgetőburka (`overflow-x: auto`) a lapokra
     tördeléskor MONOLIT doboz: a böngésző nem tud benne törni, ezért a lap
     aljáról túlnyúló táblát nem tördeli, hanem átlógatja — és a KÖVETKEZŐ
     kérdés ráíródik (mérve: `ogyelf4` kérdőív-PDF, a köhögés-mátrix utolsó
     sora alá csúszott a következő kérdés címkéje és opciói).
     `overflow: visible` mellett a doboz megszűnik görgető-konténer lenni,
     tehát a tábla a sorai mentén szabályosan törik, és a `<thead>` a
     `table-header-group` alapértelmezés miatt minden lapon megismétlődik.
     Görgetni úgysem lehet papíron; a szélesség a lap-illesztésből jön ki. */
  .ssr-option-table-shell,
  .ssr-option-table-scroll {
    overflow: visible;
  }
}