:root{--ssr-bg:#f3f8f7;--ssr-surface:#ffffff;--ssr-fg:#263637;--ssr-fg-secondary:#647476;--ssr-fg-muted:#647476;--ssr-fg-faint:#9fb5b5;--ssr-border:#d4e2e0;--ssr-border-light:#d4e2e0;--ssr-border-input:#d4e2e0;--ssr-accent:#165b59;--ssr-accent-hover:#123f3e;--ssr-accent-contrast:#ffffff;--ssr-accent-soft:#e0f3f3;--ssr-nav-bg:#165b59;--ssr-nav-fg:#ffffff;--ssr-nav-item-fg:#ffffff;--ssr-nav-item-hover-bg:#197876;--ssr-th-bg:#e0f3f3;--ssr-th-fg:#123f3e;--ssr-row-alt-bg:#f3f8f7;--ssr-row-hover:#e0f3f3;--ssr-row-selected:#d9eeee;--ssr-danger:#9b2525;--ssr-danger-bg:#fff0f0;--ssr-danger-border:#b73636;--ssr-progress-track:#e0f3f3;--ssr-progress-value:#30aeb0;--ssr-title-size:1.9rem;--ssr-title-weight:800;--ssr-container-width:1180px;--ssr-container-gutter:clamp(14px, 3vw, 28px);--ssr-layout-main-padding:clamp(1rem, 3vw, 2rem);--ssr-disabled-bg:#f2f2f2;--ssr-disabled-border:#d5d5d5;--ssr-disabled-fg:#6b6b6b;--ssr-banner-bg:#222222;--ssr-banner-fg:#ffffff;--ssr-banner-link-fg:#dddddd;--ssr-option-table-label-min:11rem;--ssr-option-table-col-min:4.5rem;--ssr-grid-cell-padding-y:.45rem;--ssr-grid-cell-padding-x:.6rem;--ssr-map-bg:#eeeeff} /* DOKUMENTUM-SZINTŰ réteg — a keret SAJÁT lapjáé (`ssr-shell.html`), nem a `.ssr-*` vázé. Ezért él külön fájlban: ezek az egyetlen szabályok, amik a GAZDA-dokumentumot írják át (`*`, `html`, `body`), és egy IDEGEN lapba ágyazott fragmentumnak (statikus oldal SSR-lyuka, l. `ssr-static-page.ts`) nem szabad átírnia a gazdalap alapjait — egy 2017-es sablonnál a `box-sizing:border-box` és a `body` háttér nem stílus-hozzáadás, hanem a meglévő elrendezés felülírása. A kibocsátást a `composeSsrCss({ ownsDocument })` dönti el; a `tests/ssr-css-document-scope.test.ts` őrzi, hogy a két fájl ne keveredjen vissza. A `body > .ssr-layout` alakú szabályok SZÁNDÉKOSAN a vázban maradnak: azok a keret gyökér-layoutjára szűkítettek, tehát fragmentumban nincs mire illeszkedniük. */ *{box-sizing:border-box} /* A görgetősáv helye MINDIG le van foglalva. Enélkül a rövid lapnak (ami elfér a képernyőn) nincs görgetősávja, tehát 10-17 px-cel szélesebb, és a középre zárt tartalom fele annyival odébb kerül — lapváltáskor az egész oldal megugrik. Mérve (2026-07-31, `szures`): az „Információk" lapon a menü közepe 700, a listás lapokon 695 — pontosan a félsávnyi 5 px. Az SSR-lapok közti navigáció valódi dokumentum-váltás, tehát ez minden több-lapos SSR-projektet érint; ezért keret-alapértelmezés. Ahol a böngésző nem ismeri (régebbi Safari), a viselkedés a mai marad. */ html{scrollbar-gutter:stable} /* Téma-követő görgetősáv. Minden értéke tokenből jön, tehát ez nem paletta- döntés, hanem a `--ssr-*` vokabulár következetes alkalmazása: a natív szürke sáv az egyetlen elem, ami minden témában ugyanúgy nézett ki. A `scrollbar-color` (FF, Chrome 121+, Safari 18+) és a webkit-pszeudoelemek együtt fedik a böngészőket; ahol egyik sem ismert, a natív sáv marad. */ *{scrollbar-width:thin;scrollbar-color:var(--ssr-accent) transparent} *::-webkit-scrollbar{width:6px;height:6px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{border-radius:999px;background:var(--ssr-accent)} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ssr-fg);background:var(--ssr-bg)} /* 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 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 `
` 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 `

`-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 `

`-ü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-` 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 `
`-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)} .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 ``-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ó `` ü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 `` — í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 ``-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 `
`). 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 `` 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ő `
`-je a `record` nézetben (`ssr-record`): a `
` szerkezete megköveteli a `
`-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-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; } /* Az SSR-menü ikon-slotja. A séma `icon` slotjába tett node-okat (tipikusan `image`) a renderelő ide teszi — ez a szabály CSAK méretez, hogy az ikon a felirat magasságához igazodjon és ne tolja szét a sort. A festés szándékosan NEM keret-döntés: az ikon lehet vonalas egyszínű vagy teljes színű logó, és ezt csak a design tudja. Vonalas ikonoknál az aktív (inverz) menüelemen jellemzően átszínezés kell, pl.: .ssr-nav-item-active .ssr-nav-item-icon img { filter: brightness(0) invert(1); } Ikon nélküli menüelemre a konténer sem kerül ki, tehát nincs üres hely. */ .ssr-nav-item-icon { flex: 0 0 auto; display: inline-flex; align-items: center; height: 1.25em; } /* A méretezés a konténeré: az ikon a felirat magasságához igazodik. Az `image` node alapszabályai (`.ssr-image`) `:where()`-ben ülnek, tehát nulla specificitásúak — ez a szabály egyetlen osztállyal is nyer, a komponensek betöltési sorrendjétől függetlenül. */ .ssr-nav-item-icon > * { display: block; width: auto; height: 100%; } /* Ikon + felirat egy sorban — csak az ikonos elemeken, hogy az ikon nélküli menük alap `inline-block` megjelenése (padding, kapszula) ne változzon. A `:where()` NEM dekoráció: nullázza a `:has()` specificitását, így a szabály `.ssr-nav-item` erősségű marad, és a később betöltött projekt-stíluslap egyszerű osztály-szelektorral felülírhatja (pl. más `gap` vagy `display`). Enélkül a keret-szabály (0,2,0) legyőzné a projekt `.ssr-nav-item`-jét (0,1,0) — épp a fordítottja a szándéknak. */ .ssr-nav-item:where(:has(.ssr-nav-item-icon)) { display: inline-flex; align-items: center; gap: 0.4em; } /* ── Mobil menü ───────────────────────────────────────────────────────────── A SPA-oldali `design-vanilla/mobile-adapt.ts` párja, de JS NÉLKÜL: ott egy after-hook injektál gombot és `.d-nav-mobile-open` osztályt kapcsol, itt a rejtett checkbox állapotát olvassuk `:has()`-szal. Ezért a menü akkor is nyitható, ha a JavaScript nem fut le — SSR-en ez a lényeg. Desktopon a kapcsoló és a háttér-réteg rejtve; a töréspont fölött a menü a megszokott vízszintes sáv. A méretezést/színezést a design felülírhatja: itt csak a MŰKÖDÉSHEZ szükséges szabályok élnek. */ .ssr-nav-toggle, .ssr-nav-burger, .ssr-nav-backdrop { display: none; } /* A `text` SSR view-node strukturális stílusai. Miért kell egyáltalán: a node `level` megadásakor VALÓDI címsort rendel (`

`…`

`), hogy a dokumentum-vázlatot a keret adja, ne a séma nyers HTML-je. A böngésző alapértelmezése viszont a címsorokra saját `margin`-t és `font-size`-ot tesz, ami szintenként ugrál — vagyis a `level` megválasztása (szemantikai döntés) némán MEGJELENÉST is változtatott. Emiatt a projekteknek `margin: 0`-val és `font-weight: inherit`-tel kellett takarítaniuk utána. A reset ezt szétválasztja: a `level` a dokumentum-vázlatot határozza meg, a méretet és a súlyt a tokenek. Aki szintenként eltérő méretet akar, a saját designjában `h1.ssr-text-title { … }`-gyel megteszi. */ /* TISZTA reset: a `.ssr-text-title` önmagában NEM címsor-megjelenés. A `level` nélküli `text` node `
`-et rendel (pl. a lábléc copyright-sora) — annak a törzsszöveggel kell egyeznie. Ha ez a szabály méretet/súlyt ÍRNA elő, minden ilyen node címsorrá hízna; pontosan ez történt 2026-07-31-en a lábléccel. */ .ssr-text-title { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; } .ssr-text-subtitle { margin: 0.25rem 0 0; color: var(--ssr-fg-muted); font-size: 0.9rem; } /* A `grid` SSR view strukturális stílusai. A TÉMÁZÁS (szín, betű, keret) a design-csomagé; itt csak az él, ami a működéshez kell. */ /* Sor-kiválasztás JS NÉLKÜL: minden cella egy ``-t tartalmaz ugyanarra a `?selected=ID` URL-re. Hogy a TELJES sor kattintható legyen, a cella paddingját maga a link viseli, és kitölti a cella magasságát. A `height: 1px` a cellán ismert táblázat-trükk: a `height: 100%` csak akkor oldódik fel a TÉNYLEGES (sorhoz nyújtott) magasságra, ha a cellának van definit magassága. Mérve: enélkül a linkek a cella magasságának 22–84%-át fedték csak, ezért kellett a projekteknek JS-ből sor-kattintást kötniük — az pedig a generált URL-t fejtette vissza string-mintával (`a[href*="selected="]`), ami a keret renderelt kimenetére épít (l. AGENTS.md). */ .ssr-grid-table tbody td:has(> .ssr-grid-cell-link) { height: 1px; padding: 0; } /* A padding TOKENBŐL jön, nem beégetve. Ez a szabály erősebb szelektoron ül (`td:has(> .ssr-grid-cell-link)` nullázza a cella paddingját), mint egy projekt `.ssr-grid-table td { padding }` felülírása — beégetett értékkel tehát a projekt a fejléc-cellát átállítaná, a törzset viszont nem, és a kettő elcsúszna. Mérve (2026-07-31, `szures`): 22,6 px vs. 18,6 px szövegkezdet. */ .ssr-grid-cell-link { display: block; box-sizing: border-box; height: 100%; padding: var(--ssr-grid-cell-padding-y, 0.45rem) var(--ssr-grid-cell-padding-x, 0.6rem); color: inherit; text-decoration: none; } /* Vízszintes húzás-görgetés (l. `drag-scroll.js`). A konténer a `[data-drag-scroll]` attribútummal jelöli magát; a görgetés natívan is megy (shift+kerék, érintés), a húzás az egérrel dolgozóknak ad hozzáférést. */ .ssr-grid-scroll { overflow-x: auto; } .ssr-grid-scroll.is-drag-scrolling { cursor: grabbing; user-select: none; } /* Oszlop-minimum (`columnMinWidth`) — a SPA `.d-grid-columns-min` SSR-párja: a konténer osztálya + inline `--ssr-grid-col-min` / `--ssr-grid-col-count` változói: a tábla `n × min` alá nem megy (a konténer görget), minden oszlop ugyanazt a sávot kapja, a cellák tördelnek. Változó nélkül nincs hatása. */ .ssr-grid-columns-min .ssr-grid-table { table-layout: fixed; width: 100%; /* Fallback: a két változót a komponens mindig együtt írja; nélkülük 0 = nincs minimum. */ min-width: calc(var(--ssr-grid-col-count, 1) * var(--ssr-grid-col-min, 0px)); } .ssr-grid-columns-min .ssr-grid-table th, .ssr-grid-columns-min .ssr-grid-table td { white-space: normal; overflow-wrap: anywhere; } /* A `cards` SSR view strukturális stílusai. A TÉMÁZÁS (szín, betű, keret) a design-csomagé; itt csak az él, ami a működéshez kell. A kártya-VÁZ (`.ssr-card`, `.ssr-card-field`, …) történetileg a `component-ssr` alaplapjában van; az ITT bevezetett két új szerep viszont a tulajdonos komponens saját lapjába kerül. */ /* A kártya TÖRZSE: a mező-sorok stabil befoglalója, függetlenül attól, hogy a felület kattintható-e. A téma ezen állítja a törzs elrendezését (maradék hely, vágás, halványodó sáv); a kiválasztás-link ezen BELÜL él, tehát egy `select` gombot deklaráló kártya — ahol a link-burok elmarad — ugyanúgy néz ki. A keret maga nem ad neki megjelenést: a `.ssr-card-field` sorok a törzsben ugyanúgy folynak, mint korábban közvetlenül a kártyában. */ /* Kiválasztás JS NÉLKÜL: a kártya mező-sorai egy ``-ban ülnek ugyanarra a `?=` URL-re. A link BLOKK, hogy a teljes sávja kattintható legyen, és nem visz link-színt/aláhúzást: a kattintható felület maga a kártya, nem egy benne lévő hivatkozás-szöveg. */ .ssr-card-link { display: block; color: inherit; text-decoration: none; } /* A kattintható felület a TELJES kártya. A link magukat a sorokat fogja körbe (onnan kapja az akadálymentes nevét), a kártya PADDINGJA és a rácsban azonos magasságúra nyújtott kártyák alsó, üres sávja viszont kívül esne rajta — mérve: a szöveg alatti területre kattintva nem történt kiválasztás. A takaró réteg ezt a maradékot is a linkhez csatolja, a DOM megbolygatása nélkül. A `.ssr-card` `position: relative` a takaró viszonyítási kerete; a kártya SAJÁT hivatkozásai (interaktív cella, rekord-gombsor) fölé kerülnek, különben a takaró elnyelné a kattintást. */ .ssr-card { position: relative; } .ssr-card-link::after { content: ""; position: absolute; inset: 0; } .ssr-card-field-interactive, .ssr-card .ssr-toolbar { position: relative; z-index: 1; } /* A rekord-gombsor a kártya LÁBÁBAN áll, a saját sorában: a kiválasztás link-burkával ellentétben ezek LÁTHATÓ vezérlők — a felirat mondja meg, mit csinálnak —, ezért a keret közös gomb-megjelenését viselik (`.ssr-toolbar-btn`, `ssr-base.css`), és a design ugyanazokon a fogantyúkon témázza őket, mint a lap többi gombját. MIÉRT NEM link-kinézet, mint a grid részletek-cellájában: ott a gombsor egy szűk, jobbra zárt oszlop vége, itt a kártya lezárása — a kártyán a művelet a fő affordancia, és jellemzően több is van belőle egymás mellett. */ .ssr-card .ssr-toolbar { margin-top: 0.75rem; } /* A kártya gombjai EGYFORMÁN osztoznak a szélességen: egy kártya a rácsban fix szélességű doboz, ahol a különböző hosszúságú feliratok egyébként különböző méretű gombokat adnának — a látogató pedig a kártyák között hasonlítja őket össze. Egy gombnál ez a régi, teljes szélességű akció-gombbal egyezik. */ .ssr-card .ssr-toolbar-btn { flex: 1 1 auto; } /* A fókusz LÁTHATÓ marad — a kártyák között billentyűzettel is lehet lépkedni, és a kiválasztás enter-rel megy. */ .ssr-card-link:focus-visible { outline: 2px solid var(--ssr-accent); outline-offset: 2px; } /* A kiválasztott kártya ugyanazt a token-értéket viseli, mint a kiválasztott grid-sor (`--ssr-row-selected`), plusz akcentus-keretet: kártyáknál a puszta háttérváltás egy rácsban gyengén olvasható jelzés. */ .ssr-card-selected { background: var(--ssr-row-selected); border-color: var(--ssr-accent); } /* A kártya CÍMSORA (`titleField`). A szerep SZEMANTIKAI: `

` elem, hogy a képernyőolvasó heading-listájában bejárható legyen, és hogy a kártya kattintható linkje a nevéből kapja az akadálymentes nevét. A MEGJELENÉS viszont szándékosan VÁLTOZATLAN: a böngésző `

`-re adott saját margóját és méretét nullázzuk, minden érték öröklődik. Egy új heading ELEM nem rendezheti át senki meglévő kártyáit — a kiemelés a projekt témájáé (a mező `data-field` horgonyán át), nem a kereté. */ .ssr-card-heading { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; } .ssr-carousel{position:relative;width:100%;aspect-ratio:21/9;overflow:hidden;border-radius:.4rem;background:var(--ssr-surface);margin:0 0 1rem} .ssr-carousel-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0} .ssr-carousel-slide.ssr-carousel-static{opacity:1} /* Hero — a `carousel` projekció-módja. A diák EGY rács-cellában ülnek egymáson (`grid-area:1/1`): a gyökér magassága a legmagasabb feliraté (nincs kötelező képarány), a váltás opacity-fade. Az inaktív dia `visibility:hidden` is — a linkje így nem fókuszálható, és a felolvasó sem éri el (az `aria-hidden` mellé a fókusz-sorrend is rendben). A kép a dia alatt `object-fit:cover`; a felirat-blokk a kép FÖLÖTT, saját háttérrel — a paletta (felirat háttere/színe, gomb, pontok) a design-csomagé / projekt-CSS-é. */ .ssr-hero{position:relative;display:grid;overflow:hidden;border-radius:.4rem;background:var(--ssr-surface);margin:0 0 1rem;min-height:var(--ssr-hero-min-height,20rem)} .ssr-hero-slide{grid-area:1/1;position:relative;display:grid;align-items:center;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s} .ssr-hero-slide.ssr-hero-active{opacity:1;visibility:visible;transition-delay:0s} .ssr-hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .ssr-hero-caption{position:relative;max-width:min(100%,28rem);margin:2rem;padding:1.5rem;background:var(--ssr-surface);color:var(--ssr-fg);border-radius:.4rem} .ssr-hero-title{margin:0 0 .75rem;font-size:var(--ssr-title-size,1.75rem);font-weight:var(--ssr-title-weight,700);line-height:1.15} .ssr-hero-text{margin:0 0 1rem} .ssr-hero-link{display:inline-flex;align-items:center;padding:.6rem 1.2rem;border-radius:.3rem;background:var(--ssr-accent);color:var(--ssr-accent-contrast);text-decoration:none;font-weight:600} .ssr-hero-link:hover{background:var(--ssr-accent-hover,var(--ssr-accent))} .ssr-hero-dots{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);display:flex;gap:.75rem;z-index:1} .ssr-hero-dot{width:.875rem;height:.875rem;padding:0;border-radius:50%;border:2px solid var(--ssr-border);background:var(--ssr-surface);cursor:pointer} .ssr-hero-dot[aria-current="true"]{background:var(--ssr-accent);border-color:var(--ssr-accent)} @media (prefers-reduced-motion:reduce){.ssr-hero-slide{transition:none}} /* Papíron a lapozópont vezérlő, nem tartalom — az aktív (első) dia marad. */ @media print{.ssr-hero-dots{display:none}} .ssr-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.5rem;margin:0 0 1rem} .ssr-gallery-img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:.3rem;display:block} .ssr-media-empty{color:var(--ssr-fg-faint);font-style:italic;padding:.75rem 0} .ssr-media-error{color:var(--ssr-danger);font-style:italic;padding:.75rem 0} /* Egyetlen, sémában deklarált kép (`image` node). A MÉRETET a design vagy a befoglaló komponens szabja; a `width`/`height` attribútum a layout-shift elkerülését szolgálja. `:where()` — NULLA specificitás, szándékosan. Ez a két deklaráció csak annyit véd, hogy egy méretezetlen kép ne törje el az elrendezést; MINDEN olyan szabálynak engednie kell, ami a képet egy konténer méretéhez igazítja. Egyosztályos alakban (0,1,0) viszont ugyanolyan erős, mint a konténerek szabályai, tehát a komponensek BETÖLTÉSI SORRENDJE döntött — ami nem szerződés. Kétszer okozott láthatatlan ikont: a menüben (2026-07-31) és a toolbaron (ugyanaznap, ugyanaz a hiba). A `:where()` a gyökérok: a konténer mostantól mindig nyer, egyetlen osztállyal is. */ :where(.ssr-image) { max-width: 100%; height: auto; } .ssr-image-link { display: inline-flex; } /* Megosztó-panel (`share` toolbar-akció). A gomb a `
` összefoglalója, a közös `.ssr-toolbar-btn` skint viseli — itt csak a nyitható panel váza áll. A panel abszolút pozíciójú lebegő doboz a gomb alatt, hogy a nyitás ne tolja szét a gombsort. Színek a `--ssr-*` paletta-tokenekből. */ .ssr-share{position:relative;display:inline-flex} .ssr-share > summary{list-style:none} .ssr-share > summary::-webkit-details-marker{display:none} .ssr-share-panel{position:absolute;top:calc(100% + .3rem);left:0;z-index:50;display:flex;flex-direction:column;gap:.6rem;min-width:16rem;max-width:min(22rem,90vw);padding:.75rem;border:1px solid var(--ssr-border);border-radius:.3rem;background:var(--ssr-surface);color:var(--ssr-fg);box-shadow:0 4px 12px rgba(0,0,0,.15)} .ssr-share-actions{display:flex;flex-wrap:wrap;gap:.4rem} .ssr-share-actions:not(:has(button:not([hidden]))){display:none} .ssr-share-native,.ssr-share-copy{padding:.4rem .8rem;border:1px solid var(--ssr-accent);border-radius:.3rem;background:var(--ssr-accent);color:var(--ssr-accent-contrast);font:inherit;font-size:.9rem;cursor:pointer} .ssr-share-native:hover,.ssr-share-copy:hover{background:var(--ssr-accent-hover);border-color:var(--ssr-accent-hover)} .ssr-share-targets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem;margin:0;padding:0;list-style:none} .ssr-share-target{display:flex;align-items:center;gap:.5rem;padding:.35rem .5rem;border-radius:.3rem;color:var(--ssr-fg);text-decoration:none;font-size:.9rem} .ssr-share-target:hover{background:var(--ssr-row-hover)} /* A glyph a márkaszínt kapja (felismerhetőség), a felirat a téma szövegszínét. A téma a `--ssr-share-brand` felülírásával egyszínűre is állíthatja. */ .ssr-share-target-icon{display:inline-flex;flex:none;width:1.25em;height:1.25em;color:var(--ssr-share-brand,currentColor)} .ssr-share-target-icon > svg{display:block;width:100%;height:100%} .ssr-share-target-facebook{--ssr-share-brand:#1877f2} .ssr-share-target-x{--ssr-share-brand:currentColor} .ssr-share-target-linkedin{--ssr-share-brand:#0a66c2} .ssr-share-target-whatsapp{--ssr-share-brand:#25d366} .ssr-share-target-telegram{--ssr-share-brand:#229ed9} .ssr-share-target-viber{--ssr-share-brand:#7360f2} .ssr-share-target-email{--ssr-share-brand:currentColor} .ssr-share-link{display:flex;flex-direction:column;gap:.2rem;font-size:.8rem;color:var(--ssr-fg-secondary)} .ssr-share-url{width:100%;box-sizing:border-box;padding:.35rem .5rem;border:1px solid var(--ssr-border-input);border-radius:.3rem;background:var(--ssr-surface);color:var(--ssr-fg);font:inherit;font-size:.85rem} /* A menü MOBIL blokkja — SABLON, nem közvetlenül betöltött stíluslap. A `vanilla-menu.ssr.ts` tölti be és helyettesíti a két helyőrzőt: 768 a séma `mobileBreakpoint` értéke (alap: 768) [data-mobile-breakpoint="768"] a menüt azonosító attribútum-szelektor Miért sablon: a `@media` lekérdezés NEM fogad CSS custom propertyt, tehát a töréspont nem lehet token. Emiatt volt a keret 768px-e beégetve, miközben a `szures` drawere 979px-ig szólt — 769 és 979 között a menüpontok rejtve voltak, de a hamburger még nem jelent meg: a menü NEM VOLT MEGNYITHATÓ. (Mérve 2026-07-31, 850px szélességen.) A `:where([data-mobile-breakpoint="768"])` NEM ad specificitást — a hatókör így elválasztja a különböző törésponttal futó menüket egymástól, de a design felülírási lehetőségét (l. lent a `:where()`-magyarázatokat) érintetlenül hagyja. */ @media (max-width: 768px) { /* A checkbox fókuszálható marad (Space/Enter natívan kapcsol), de nem látszik — a látható vezérlő a `