/* 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. */
/* A VÁZ SAJÁT doboz-modellje. A `*{box-sizing:border-box}` reset a dokumentum-
   rétegben él (`ssr-document.css`), tehát BEÁGYAZOTT fragmentumnál
   (`ownsDocument:false`) NEM megy ki — ott a gazdalap resetje dönt, és egy
   2017-es sablonnak jellemzően nincs `*` resetje. A váz `width:100%` + padding
   + border alakú szabályai (`.ssr-form-input`, `.ssr-grid-table`) ilyenkor a
   SZÜLŐJÜKNÉL szélesebbre nőnek. Mérve (2026-09-22,
   gumivezer.hu/kapcsolat.html, 360 px): a 315 px-es hasábban az input 345 px,
   a jobb oldali kerete a képernyőn kívül. A váz tehát a SAJÁT elemeire maga
   mondja ki — a gazdalap elemeit ez a szabály nem éri el. */
[class*="ssr-"]{box-sizing:border-box}
.ssr-layout{display:flex;flex-direction:column}
/* A nézet-node `href`-jének közös linkje (`renderSsrNode` teszi BÁRMELY node
   köré). Blokk-doboz, hogy a becsomagolt node elrendezése ne változzon; a
   tartalom színe és dekorációja marad. `:where()` — nulla specificitás: a
   design és a típus-szabály (pl. a kép `inline-flex`-e) mindig felülírja. */
:where(.ssr-link){display:block;color:inherit;text-decoration:none}
/* Megjelenés-változat (`variant`, `@sziriov/core/view-variant`): a doboz
   semleges, a kinézet a változat-osztályé. Keret-szintű `button`: a `href`-es
   node gombként; a becsomagolt nézet saját színe a gombban nem érvényes. */
.ssr-variant-button>.ssr-link{display:inline-flex;align-items:center;padding:.35rem .9rem;border-radius:.3rem;background:var(--ssr-accent);color:var(--ssr-accent-contrast);text-decoration:none}
.ssr-variant-button>.ssr-link:hover{background:var(--ssr-accent-hover,var(--ssr-accent))}
.ssr-variant-button>.ssr-link *{color:inherit}
/* 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)}
/* Az aktív linket tartalmazó almenü-szülő: a SPA `.d-nav-item-active-parent`
   párja — teljes kontrasztú, félkövér felirat háttér nélkül, hogy a pontosan
   aktív elem kiemelése egyértelmű maradjon. */
.ssr-nav-item-active-parent{color:var(--ssr-nav-fg);font-weight:600}
/* 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;margin:0 0 1rem}
.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%}
/* TALÁLATSZÁM a sávban (`resultCount`): a gombokkal azonos magasságú és
   betűméretű doboz, hogy egy sorba simuljon, de gomb-skin (szegély, hover,
   kurzor) NÉLKÜL — állapot, nem művelet. */
.ssr-toolbar-count{display:inline-flex;align-items:center;gap:.3em;padding:.45rem .9rem;border:1px solid transparent;border-radius:.3rem;background:var(--ssr-accent-soft);color:var(--ssr-fg-secondary);font-size:.9rem;white-space:nowrap;cursor:default}
.ssr-toolbar-count-value{font-weight:600;color:var(--ssr-fg)}
.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)}
/* A TILTOTT gomb (űrlap-toolbar: `fromStates`, `enabled`) a letiltott mező
   szótárából — a `:hover` és az elsődleges kitöltés UTÁN, hogy egyik se adjon
   vissza aktív külsőt. A témák szín-/hover-szabályai a `:disabled`-et kizárják. */
.ssr-toolbar-btn:disabled{background:var(--ssr-disabled-bg);border-color:var(--ssr-disabled-border);color:var(--ssr-disabled-fg);cursor:not-allowed}
.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}
/* 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,.ssr-cards-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ő `renderSsrCell`): elemenként egy rekord-
   blokk a befoglaló címke–érték soraival — az elem egy űrlap-rekord, a képe is
   az űrlapé. Az ALAP a KOMPAKT alak, mert a lista jellemzően cellában él
   (grid-cella, kártya, térkép-popup): nincs sorszám és nincs saját keret, az
   elemeket vékony vonal választja el, a címke az érték előtt kettősponttal.
   A rekord-ADATLAP (`.ssr-record`) a sorszámozott, keretezett alakot kapja —
   ott a blokk a lap tartalma, nem egy cella (l. lejjebb). */
.ssr-record-items{margin:0;padding:0;list-style:none}
.ssr-record-item{padding:.25rem 0}
.ssr-record-item+.ssr-record-item{border-top:1px solid var(--ssr-border-light)}
.ssr-record-item>.ssr-record-fields{background:transparent;border:0;border-radius:0}
.ssr-record-item .ssr-record-row{gap:.15rem .5rem;padding:.1rem 0;border-bottom:0}
.ssr-record-item .ssr-record-label{min-width:0}
.ssr-record-item .ssr-record-label::after{content:":"}
.ssr-record-item .ssr-record-value{flex:0 1 auto}
/* Blokk-sor (beágyazott lista, mátrix): a címke a tartalom fölé, a tartalom
   teljes szélességű. */
.ssr-record-row-block>.ssr-record-value{flex:1 1 100%}
/* Az elem címke nélküli sora (`hideLabel`, pl. a program neve) az elem
   FEJLÉCE: az érték magáért beszél, ezért kiemelt. A blokk-sor (beágyazott
   lista) címke nélkül sem fejléc — a `:not` zárja ki, így a
   `record-document.css` blokk-érték szabályával nincs közös célpont.
   cascade-ok: a blokk-sort a :not kizárja, a két szabály célhalmaza diszjunkt */
.ssr-record-item .ssr-record-row-nolabel:not(.ssr-record-row-block)>.ssr-record-value{font-weight:600;color:var(--ssr-fg)}
/* Rekord-adatlap: sorszámozott, keretezett elem-blokkok — a sorszám a lista-
   jelölő, a keretet a belső `.ssr-record-fields` adja.
   cascade-ok: az adatlap-kontextus szándékosan írja felül a kompakt alapot */
.ssr-record .ssr-record-items{margin:.25rem 0 0;padding:0 0 0 1.5rem;list-style:decimal}
.ssr-record .ssr-record-item{margin:0 0 .5rem;padding:0;border-top:0}
.ssr-record .ssr-record-item::marker{font-weight:600;color:var(--ssr-fg-secondary)}
.ssr-record .ssr-record-item>.ssr-record-fields{background:var(--ssr-surface);border:1px solid var(--ssr-border);border-radius:.3rem}
.ssr-record .ssr-record-item .ssr-record-row{gap:.25rem 1rem;padding:.5rem .75rem;border-bottom:1px solid var(--ssr-border-light)}
.ssr-record .ssr-record-item .ssr-record-row:last-child{border-bottom:0}
.ssr-record .ssr-record-item .ssr-record-label{min-width:10rem}
.ssr-record .ssr-record-item .ssr-record-label::after{content:none}
.ssr-record .ssr-record-item .ssr-record-value{flex:1 1 12rem}
.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}
/* A captcha-widget BURKA görgető doboz. A Turnstile iframe-je fix 300 px
   széles — nem zsugorodik —, és kerítés nélkül ez a 300 px min-content-ként
   fölfelé terjed a GAZDALAP elrendezésébe: egy `1fr` rácssáv is ekkorára nő,
   és a LAP válik oldalra húzhatóvá. Mérve (2026-09-22, szir.io/kapcsolat.html,
   360 px): a kártya min-content-je 300 + 2×32 padding + 2 = 366 px, a 305 px-es
   sáv helyett 366 lett, `scrollWidth 386`. A `min-width:0` + `overflow-x:auto`
   engedi a tartalmat kilógni, a `contain:inline-size` pedig elvágja a
   TERJEDÉST: a doboz vízszintes mérete kizárólag a szülőé, a tartalom
   min-content hozzájárulása 0. A kettő együtt kell — az `overflow` önmagában
   nem nullázza a min-content méretet: mérve (2026-09-22, szir.io, 320 px) a
   kártya `contain` nélkül továbbra is 334 px-re nőtt. Keskeny sávban így maga
   a widget görgethető, a LAP nem törik el. Rokon minta:
   `.ssr-option-table-scroll` (ott a tábla `width:100%`-a adja a definit
   méretet, tehát nem kell `contain`). */
.ssr-form-captcha{contain:inline-size;min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
.ssr-form-success{margin:0 0 1rem;padding:.5rem .75rem;background:var(--ssr-accent-soft);border:1px solid var(--ssr-accent);border-radius:.3rem;color:var(--ssr-fg);font-size:.95rem}
.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)}
/* ÉRTÉKELŐSKÁLA (`display: "scale"`): rádiócsoport egy sín egyenlő közű
   állomásaiként, a két vég jelentésével alatta. Saját osztálycsalád, nem a
   `.ssr-form-option` — a témák kártyaként stílusozzák a rádió-opciót, amit itt
   mind vissza kellene vonni. Az állomásszámot a markup adja
   (`--ssr-form-scale-steps`); a sín az első és az utolsó állomás KÖZEPE közt
   fut (`50% / n` beljebb), a függőleges helye a pont közepe (bélés + fél pont).
   A pont mérete és a bélés opcionális téma-token (`--ssr-form-scale-dot`,
   `--ssr-form-scale-pad`) beépített alapértékkel — sűrűség, nem stíluslap. */
.ssr-form-scale{display:grid;gap:.2rem;min-width:0}
.ssr-form-scale-steps{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(var(--ssr-form-scale-steps,5),minmax(0,1fr))}
.ssr-form-scale-steps::before{content:"";position:absolute;z-index:0;top:calc(var(--ssr-form-scale-pad,.55rem) + var(--ssr-form-scale-dot,1.3rem) / 2 - .1rem);left:calc(50% / var(--ssr-form-scale-steps,5));right:calc(50% / var(--ssr-form-scale-steps,5));height:.2rem;border-radius:999px;background:var(--ssr-border)}
.ssr-form-scale-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.3rem;min-width:0;padding:var(--ssr-form-scale-pad,.55rem) 0 .25rem;color:var(--ssr-fg);font-size:.95rem;text-align:center;cursor:pointer}
.ssr-form-scale-step .ssr-form-radio{width:var(--ssr-form-scale-dot,1.3rem);height:var(--ssr-form-scale-dot,1.3rem);border:.16rem solid var(--ssr-accent);border-radius:50%;appearance:none;background:var(--ssr-surface);cursor:pointer}
.ssr-form-scale-step .ssr-form-radio:checked{background:var(--ssr-accent);box-shadow:inset 0 0 0 .2rem var(--ssr-surface),0 0 0 .2rem var(--ssr-accent-soft)}
.ssr-form-scale-step .ssr-form-radio:focus-visible{outline:.15rem solid var(--ssr-accent);outline-offset:.2rem}
.ssr-form-scale-step .ssr-form-radio:checked+span{color:var(--ssr-accent);font-weight:700}
.ssr-form-scale-step:has(input:disabled){color:var(--ssr-disabled-fg);cursor:not-allowed}
.ssr-form-scale-step .ssr-form-radio:disabled{border-color:var(--ssr-disabled-border);background:var(--ssr-disabled-bg);cursor:not-allowed}
.ssr-form-scale-ends{display:flex;justify-content:space-between;gap:1rem;color:var(--ssr-fg-muted);font-size:.85rem}
.ssr-form-scale-ends>span:last-child{text-align:right}
@media (max-width:640px){.ssr-form-scale-step{font-size:.82rem}}
/* `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;
}

/* A `display: "badge"` enum-cella SSR-párja: színes címke. A színt az
   enum-bejegyzés `color`-ja adja (`--value-badge-color`), a háttér annak
   halvány változata; szín nélkül semleges. */
.ssr-value-badge {
  display: inline-block;
  padding: 0.2em 0.8em;
  border-radius: 999px;
  color: var(--value-badge-color, var(--ssr-fg-muted));
  background: color-mix(in srgb, var(--value-badge-color, var(--ssr-fg-muted)) 14%, transparent);
  font-size: 0.85em;
  font-weight: 700;
  white-space: nowrap;
}

.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-surface);border:1px solid var(--ssr-border);border-radius:.25rem;font-size:.8rem;color:var(--ssr-fg-secondary);overflow-wrap:anywhere}
.ssr-file-link{color:var(--ssr-accent);text-decoration:none;border-radius:.25rem}
.ssr-file-link .ssr-file-chip{color:inherit}
.ssr-file-link:hover .ssr-file-chip{border-color:currentColor;text-decoration:underline}
.ssr-file-link:focus-visible{outline:2px solid var(--ssr-accent);outline-offset:2px}
.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;
}

/* Futó beküldés (`ssr-submit-guard.js`): a további POST-okat a szkript nyeli
   el, ez csak a visszajelzés — a lassú mentés ne „nem történt semmi"-ként
   látsszon. Lap-szintű, mint a zár. Nem `:disabled`-kinézet: a gomb nem
   tiltott, a lap dolgozik. */
.ssr-submitting :is(.ssr-form-actions button, .ssr-form-submit, .ssr-toolbar-btn) {
  cursor: progress;
  opacity: 0.6;
}

/* A nyelvválasztó váza: a nyelvek egy sorban, a lap nyelve kiemelve. A
   festés (szín, betűméret, elválasztó) a designé; a keret csak elrendez és
   a jelet (zászló) a felirat magasságára méretezi. */

/* `nav.` előtag: a menüpont ikon-slotja (`.ssr-nav-item-icon > *`) minden
   gyerekét blokká méretezi — a választó ott is a saját sorát tartja. */
nav.ssr-language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.ssr-language-switcher a {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

.ssr-language-switcher a[aria-current="true"] {
  font-weight: 600;
  text-decoration: none;
}

.ssr-language-switcher-icon {
  display: inline-flex;
  align-items: center;
  height: 1em;
}

.ssr-language-switcher-icon img {
  display: block;
  height: 100%;
  width: auto;
}

/* Lenyitható mezőrészlet (`fieldDisclosures`, `ssr-disclosure.js`): a gomb a
   részlet / a teljes szöveg alatt. A színe a lap akcentusa — a téma a
   `.ssr-disclosure-toggle` horgonyon szabja. Papíron a teljes szöveg: l.
   `ssr-print.css` 6. */
.ssr-disclosure-toggle {
  margin-top: 0.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ssr-accent);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* A szerver-renderelt chat váza. Festés (szín, árnyék, betű) a designé; a
   keret elrendez: buborékok, beviteli sor, és `popup` módban a lap sarkában
   álló gomb + panel. A színek a `--ssr-*` tokenekből jönnek, visszaesés nélkül (a paletta a designé). */

.ssr-chat {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ssr-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
}

.ssr-chat-message,
.ssr-chat-pending {
  max-width: 85%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.ssr-chat-own {
  align-self: flex-end;
  background: var(--ssr-accent);
  color: var(--ssr-accent-contrast);
}

.ssr-chat-own a {
  color: inherit;
}

/* A buborék tartalma: bekezdések és listák (a bot markdown-válaszából,
   `chat-message-text.ts`) — tömör térköz, a buborék szélén nincs margó. */
.ssr-chat-message p,
.ssr-chat-message ul,
.ssr-chat-message ol {
  margin: 0;
}

.ssr-chat-message > * + * {
  margin-top: 0.5em;
}

.ssr-chat-message ul,
.ssr-chat-message ol {
  padding-left: 1.25em;
}

.ssr-chat-message li + li {
  margin-top: 0.25em;
}

.ssr-chat-message code {
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

/* A bot válasza (lista, linkek) több helyet kap, mint a rövid kérdés. */
.ssr-chat-peer {
  max-width: 94%;
}

.ssr-chat-peer a {
  color: var(--ssr-accent);
  font-weight: 600;
}

.ssr-chat-peer,
.ssr-chat-pending {
  align-self: flex-start;
  background: var(--ssr-accent-soft);
}

.ssr-chat-pending {
  font-style: italic;
  opacity: 0.75;
}

.ssr-chat-composer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-end;
}

/* Hozzájárult extrák (pl. captcha-widget): saját sor a szövegmező fölött. */
.ssr-chat-composer-extras {
  flex: 1 0 100%;
  min-width: 0;
}

.ssr-chat-composer textarea {
  /* 0 alap: a sortörő (`flex-wrap`) sorban a szövegmező és a gomb együtt marad. */
  flex: 1 1 0;
  min-width: 0;
  resize: vertical;
  font: inherit;
}

/* --- popup mód: gomb a lap sarkában, kattintásra nyíló panel ------------- */

.ssr-chat-popup {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1000;
}

.ssr-chat-launcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.25rem;
  border-radius: 999px;
  background: var(--ssr-accent);
  color: var(--ssr-accent-contrast);
  cursor: pointer;
  list-style: none;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.2);
}

.ssr-chat-launcher {
  gap: 0.5em;
}

.ssr-chat-launcher-icon {
  display: inline-flex;
  height: 1.2em;
}

.ssr-chat-launcher-icon svg {
  height: 100%;
  width: auto;
}

.ssr-chat-launcher::-webkit-details-marker {
  display: none;
}

/* A panel a gomb FÖLÉ nyílik: a `<details>` tartalma a `<summary>` után áll a
   DOM-ban (a gomb az első fókuszálható elem), ezért a helyét pozíció adja,
   nem sorrend-csere. */
.ssr-chat-panel {
  position: relative;
}

.ssr-chat-body {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(26rem, calc(100vw - 2.5rem));
  max-height: min(32rem, calc(100vh - 7rem));
  padding: 1rem;
  border-radius: 0.75rem;
  background: var(--ssr-surface);
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.25);
}

/* Bezáró gomb a panel jobb felső sarkában. `display`-t szándékosan nem állít:
   a gomb `hidden`-nel érkezik, és a szkript fedi fel (l. `renderCloseButton`). */
.ssr-chat-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.ssr-chat-close:hover,
.ssr-chat-close:focus-visible {
  background: var(--ssr-row-hover);
}

/* A cím ne fusson a bezáró gomb alá. */
.ssr-chat-body .ssr-chat-title {
  padding-right: 2rem;
}

.ssr-chat-body .ssr-chat-messages {
  flex: 1 1 auto;
  min-height: 0;
}

.ssr-chat-title {
  margin: 0;
  font-size: 1.05rem;
}

/* A beviteli sor: a lap gombjainak és mezőinek tokenjeivel. */
.ssr-chat-composer textarea {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--ssr-border-input);
  border-radius: 0.5rem;
  background: var(--ssr-surface);
  color: inherit;
}

.ssr-chat-send {
  padding: 0.55rem 1rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--ssr-accent);
  color: var(--ssr-accent-contrast);
  font: inherit;
  cursor: pointer;
}

.ssr-chat-send:disabled {
  opacity: 0.6;
  cursor: progress;
}


/* 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;
  }

  /* ==========================================================================
     5. EREDMÉNY-GRID — a lap szélességére illesztve, nem levágva
     ========================================================================== */

  /* A grid képernyőn vízszintesen görgethető burokban él, a téma pedig
     tartalom-függő szélességet és cella-korlátokat ad neki. Papíron nincs
     görgetés: ami a nyomtatható sávon túlnyúlik, az egyszerűen ELVÉSZ (mérve:
     `szures` találati-lista PDF, a telefonszám fele is levágva). Az ok nem a
     képernyős `min-width`, hanem a téma MOBIL-szabálya: az álló A4 794 px-es
     viewportja a `max-width: 979px` töréspont ALATT van, ott pedig a cellák
     `min-width: clamp(12rem, 52vw, 20rem)` = 320 px-t kapnak — nyolc oszlop
     így a lap szélességének többszöröse.

     A tábla a rendelkezésre álló szélességet kapja, a cellák korlátait nullázzuk,
     és MINDEN cella hosszú, elválasztó nélküli értéke is törhet (telefonszám,
     e-mail, kötőjeles cím). Auto elrendezés marad: `overflow-wrap: anywhere`
     mellett a tábla minimális szélessége bőven a lapon belül van, az oszlopok
     pedig a tartalmuk arányában osztoznak — rögzített elrendezéssel egy
     három betűs típus-oszlop ugyanannyit kapna, mint a cím. A szelektorok
     specificitása megegyezik a témáéival; ez a lap megy ki utoljára, tehát nyer. */
  .ssr-grid-scroll {
    overflow: visible;
  }

  .ssr-grid-table {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .ssr-grid-table th,
  .ssr-grid-table td {
    min-width: 0;
    max-width: none;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* ==========================================================================
     6. LENYITHATÓ MEZŐRÉSZLET — papíron a teljes szöveg
     ========================================================================== */

  /* `fieldDisclosures` (`ssr-disclosure.js`): a képernyőn összecsukott mező a
     papíron teljes, a részlet és a nyitó/csukó gomb nem kerül rá. A szkript a
     `beforeprint`-en is kinyit; ez a szabály a szkript nélküli PDF-re is áll. */
  .ssr-disclosure-toggle,
  .ssr-disclosure-excerpt {
    display: none;
  }

  .ssr-disclosure-full[hidden] {
    display: block;
  }
}