/* Admin felület – Vite és build lépés nélkül (docs/09). Az arculati kitre épül (admin/shared/arculat/arculat.css: a
   --k-* tokenek, a betűk és a .k-* komponensek; előtte töltődik be). Világos, lapos (DESIGN.md). Az itteni régi
   változónevek (--bg, --accent…) a kit tokenjeire mutatnak, amíg a nézetek át nem állnak a .k-* osztályokra.
   Reszponzív, elsődlegesen laptopra. */

/* A „hidden” attribútum mindig rejtsen: a display-t megadó osztályok (pl. .k-btn: inline-flex) különben felülírnák. */
[hidden] { display: none !important; }

:root {
    color-scheme: light;
    /* Régi nevek → a kit tokenjei. Fejlécsávok: főmenü (--bar) fehér, projekt fülsora (--bar-2) halványszürke, az
       interjú fejléce (--bar-3) fehér, alsó vonallal. */
    --bg: var(--k-bg); --bar: var(--k-bg); --bar-2: var(--k-surface-subtle); --bar-3: var(--k-bg);
    --field: var(--k-surface-muted); --divider: var(--k-border-light);
    /* Az AA kontraszt miatt a --k-text-muted-nál világosabb szürke szöveg nincs (DESIGN 10. pont). */
    --text: var(--k-text); --text-2: var(--k-text); --muted: var(--k-text-muted); --faint: var(--k-text-muted); --placeholder: var(--k-text-muted);
    --accent: var(--k-primary); --accent-hover: var(--k-primary-hover); --primary: var(--k-primary); --primary-hover: var(--k-primary-hover);
    --accent-text: var(--k-text-inverse);
    --success: var(--k-success); --warning: var(--k-warning); --danger: var(--k-danger); --self: var(--k-chart-self);
    /* A közös megjelenítő (renderer.css) változói: kijelölt opció háttere és a vezérlők kerete. */
    --selected: var(--k-primary-tint); --control-border: var(--k-border-input);
    --radius: var(--k-radius-sm);
}
* { box-sizing: border-box; }
/* Az alapstílus (betű, szín, címsorok, linkek, fókusz) az arculat.css-ből jön. */
hr { border: 0; border-top: 1px solid var(--divider); margin: 32px 0; }

/* --- Fejléc: a kit .k-header (logó, főmenü, felhasználó) és .k-subnav (projekt fülei) sávja; együtt sticky. -------- */
.appbar { position: sticky; top: 0; z-index: 40; }
.appbar .k-header__inner { flex-wrap: wrap; row-gap: 0; }
.appbar .k-nav { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.appbar .k-nav a { white-space: nowrap; }
.appbar__user { color: var(--k-text); text-decoration: none; white-space: nowrap; }
.appbar__user:hover { color: var(--k-primary); text-decoration: underline; }
.appbar__tabs { display: flex; gap: var(--k-space-5); min-width: 0; }
.brand--block { margin: 0 0 40px; }
@media (max-width: 760px) { .appbar__user { display: inline-block; max-width: 96px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } }

/* --- Oldal ------------------------------------------------------------------------------------------------------ */
/* A tartalom a fejléc .k-container-éhez igazodik (szélesség, oldalmargó); a --page-pad-et a teljes szélességű sávok
   (pl. az interjú fejléce) is használják. */
.page { --page-pad: var(--k-space-5); max-width: var(--k-content-max); margin: 0 auto; padding: 40px var(--page-pad) 80px; }
.page--narrow { max-width: 440px; padding-top: 96px; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: var(--k-space-4); flex-wrap: wrap; margin-bottom: var(--k-space-5); }
.page-head h1 { margin: 0; }

/* Oldalszakasz: .k-card--pad (arculat.css); a kártya és az előtte/utána álló blokk között mindig térköz (rácsban a
   rács hézaga adja), a címsor és az üzenet után a saját alsó margójuk. */
.k-card + *, * + .k-card { margin-top: var(--k-space-5); }
.page-head + .k-card, h1 + .k-card, .k-notice + .k-card, .form-grid > .k-card, input[type=hidden] + .k-card:first-of-type { margin-top: 0; }
.k-card > h2:first-child, .k-card > h3:first-child { margin-top: 0; }
/* Az oldal szintjén a kártyarács (.form-grid) is térközt kap az előtte álló blokktól (pl. a találatlista alatt). */
.page > * + .form-grid { margin-top: var(--k-space-5); }
.page > .page-head + .form-grid, .page > h1 + .form-grid, .page > .k-notice + .form-grid { margin-top: 0; }
.k-card h2 { font-size: var(--k-fs-h3); line-height: var(--k-lh-h3); }

/* --- Táblázat: a kit .k-table-je; a mezőket tartalmazó sorok függőlegesen középen. ------------------------------- */
.table-wrap { overflow-x: auto; }
.k-table td { text-align: left; }
.k-table td > .k-check { min-height: 36px; }
.k-table:not(.table--middle) td { vertical-align: top; }
.table--middle td { vertical-align: middle; }
/* A gombcella (.actions = flex) itt táblázatcella marad, különben a függőleges igazítás nem hat rá. */
.table--middle td.actions { display: table-cell; white-space: nowrap; }
.table--middle td.actions > * + * { margin-left: 12px; }
/* Kártyában a táblázat a kártya széléig ér. */
.k-card--pad > .table-wrap:last-child, .k-card--pad > .k-table:last-child { margin-bottom: calc(-1 * var(--k-space-5)); }

/* Kötelező mező: a csillag a mező required attribútumából jön (a feltételesen kötelezőt is követi); a képernyőolvasónak a
   required elég, ezért a csillagot nem olvassa fel. A belépési oldalakon nincs (ott minden mező kötelező). */
.app-body .k-field:has(:required) > label:not(.k-check)::after { content: " *"; content: " *" / ""; color: var(--k-danger); }
.required-mark { color: var(--k-danger); }

/* --- Űrlapok: a kit mezői; a címkét nem kell osztályozni (.k-field > label). -------------------------------------- */
.form { display: grid; gap: var(--k-space-4); }
.form-grid { display: grid; gap: var(--k-space-5); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); align-items: start; }
/* A hosszú opciójú lista ne feszítse szét a rácsot keskeny képernyőn. */
.form-grid > *, .form > * { min-width: 0; }
.k-field select { max-width: 100%; }
/* Érintőképernyőn nagyobb jelölők és táblázatlinkek (a kitöltői felület opciói eleve nagyok). */
@media (pointer: coarse) {
    .k-table input[type=checkbox], .k-check input[type=checkbox], .k-check input[type=radio] { width: 24px; height: 24px; }
    .k-table td a { display: inline-block; min-height: 24px; padding-block: 2px; }
}
.k-field { margin-bottom: 0; }
.k-field > label:not(.k-check), .fieldset legend { font-size: var(--k-fs-sm); font-weight: 600; color: var(--k-text); }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=date], input[type=datetime-local],
input[type=number], input[type=search], input[type=url], select, textarea {
    width: 100%; min-height: var(--k-control-h-sm); padding: 6px 12px; border: 1px solid var(--k-border-input); border-radius: var(--k-radius-sm);
    background: var(--k-surface-muted); color: var(--k-text); font: 400 var(--k-fs-body)/1.4 var(--k-font-sans); }
input::placeholder, textarea::placeholder { color: var(--k-text-muted); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--k-focus); outline-offset: 0; background: var(--k-bg); }
input[type=color] { width: 100%; padding: 2px; height: var(--k-control-h-sm); border: 1px solid var(--k-border-input); border-radius: var(--k-radius-sm); background: var(--k-bg); }
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.field--error input, .field--error select, .field--error textarea { border-color: var(--k-danger); }
.k-error { margin-top: 0; }
.warning { color: var(--k-warning); font-size: var(--k-fs-sm); font-weight: 600; }
.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset legend { padding: 0; margin-bottom: 6px; }
.k-check { font-size: var(--k-fs-body); }

/* --- Gombok: a kit .k-btn-je (fő művelet kitöltött, a többi keretes vagy keret nélküli). ------------------------- */
input[type=file] { font: inherit; color: var(--k-text-muted); }
input[type=file]::file-selector-button { font: 600 var(--k-fs-sm)/1 var(--k-font-sans); margin-right: 12px; height: var(--k-control-h-sm); padding: 0 var(--k-space-3);
    border: 1px solid var(--k-primary); border-radius: var(--k-radius-sm); background: var(--k-bg); color: var(--k-primary); cursor: pointer; }
code { font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 1px 5px; border-radius: var(--k-radius-sm); background: var(--k-surface-muted); color: var(--k-text); }
.actions { display: flex; gap: var(--k-space-3); flex-wrap: wrap; align-items: center; }
.actions--spaced { margin-top: var(--k-space-4); }
/* Eltartás: a gombsor, táblázat után közvetlenül jövő szöveg (a p-nek csak alsó margója van), és a lenyitott details
   tartalma a címétől. A .form/.filters rácsában ezt a gap adja, ott nem kell. */
:where(:not(.form, .filters)) > :is(.actions, .table-wrap, .k-table) + :is(p, .k-help, .muted) { margin-top: var(--k-space-3); }
details[open] > summary { margin-bottom: var(--k-space-3); }
/* Lenyitható lista vagy táblázat után következő (al)cím: új csoport, ne tapadjon az előző utolsó sorához. */
:is(details, .table-wrap) + :is(h2, h3) { margin-top: var(--k-space-5); }
/* Szöveg melletti vonalas ikon (inline SVG, a szöveg színével). */
.icon { flex: none; vertical-align: -3px; }
.k-btn .icon { width: 20px; height: 20px; }
.k-btn--sm .icon { width: 16px; height: 16px; }
.alert--spaced { margin-top: 24px; }
.input--auto { width: auto; }
/* Az alanyprofil PDF-beállításai: keretes doboz a fejlécben, hogy egyértelmű legyen, mire vonatkoznak. */
/* Segédosztályok (inline stílus helyett). Űrlapszélesség: egyoszlopos űrlap .form--narrow, többoszlopos .form-grid. */
.form--narrow { max-width: 560px; }
.readable { max-width: 860px; }
.w-s { max-width: 120px; } .w-m { max-width: 240px; } .w-l { max-width: 360px; }
.col-60 { width: 60px; } .col-90 { width: 90px; } .col-100 { width: 100px; }
/* Táblázatbeli számmező (pont, sávhatár): a nyilakkal együtt kiférjen benne a „1000,25” (különben a „0,03” „0,0”-nak látszik). */
.k-table input[type=number] { min-width: 7em; }
.mt-s { margin-top: 8px; } .mt-m { margin-top: 16px; } .mt-l { margin-top: var(--k-space-6); } .mb-s { margin-bottom: 12px; }
.grow { flex: 1; min-width: 220px; }
.normal { font-weight: normal; } .small { font-size: 12px; } .pre-line { white-space: pre-line; }
.section-head { margin-bottom: 8px; }
.section-head h2 { margin: 0; }

/* --- Üzenetek: a kit .k-notice doboza. ---------------------------------------------------------------------------- */
.k-notice { margin: 0 0 var(--k-space-5); font-size: var(--k-fs-body); }
.k-notice a { color: inherit; }
.k-notice > :last-child { margin-bottom: 0; }

.muted { color: var(--muted); }
/* Keresési találat kiemelése (Highlight::mark, interview.js). */
mark { background: var(--k-warning-bg); color: inherit; border-radius: 2px; padding: 0 1px; }
.nowrap { white-space: nowrap; }
.faint { color: var(--faint); }
.filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin-bottom: 28px; }
/* Rácsos szűrősáv (címtár): egyforma oszlopok (széles képernyőn minden mező egy sorban), a típuscímkék külön sorban. */
.filters--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--k-space-4); align-items: start; }
/* Egyforma magas mezők (a legördülő és a szövegmező alapból eltérő), így a címkék és a mezők egy vonalban. */
.filters--grid input:not([type=checkbox]), .filters--grid select { height: var(--k-control-h-sm); }
.filters.filters--grid .k-field { min-width: 0; margin: 0; }
.filters--grid .filters__types { grid-column: 1 / -1; }
/* A szűrő gombjai (JS nélkül „Szűrés”, és a „Szűrők törlése” ikongomb) a mezősor végén, a mezőkkel egy vonalban. */
.filters.filters--grid .filters__reset { margin: 0; align-self: end; justify-content: flex-start; flex-wrap: nowrap; }
@media (min-width: 1000px) {
    .filters--grid { grid-template-columns: repeat(5, minmax(0, 1fr)) auto; }
    .filters.filters--grid .filters__reset { grid-column: -2 / -1; grid-row: 1; }
}
/* A „Szűrők törlése” mindig látszik; aktív szűrő nélkül letiltott (a kit letiltott gombstílusa, nem kattintható). */
a.k-btn[aria-disabled="true"] { pointer-events: none; }
.filters__types { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.filters__types legend { padding: 0; margin-bottom: 8px; font-size: var(--k-fs-sm); font-weight: 600; }
/* Kapcsolható címke (jelölőnégyzet) a kit pirulája szerint (.k-pill): bejelölve kék alapon, kék kerettel. */
.chip { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--k-radius-pill);
    border: 1px solid var(--k-primary-border); background: var(--k-bg); color: var(--k-primary); font-size: var(--k-fs-xs); line-height: 16px;
    cursor: pointer; user-select: none; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
/* Nem kapcsolható, aktív szűrőt jelző címke (pl. az audit log felmérésszűrője), törlő ikonnal. */
.chip--static { background: var(--k-primary-tint); border-color: var(--k-primary); color: var(--k-text); font-weight: 600; cursor: default;
    align-self: flex-start; max-width: 100%; min-height: var(--k-control-h-sm); }
/* Hosszú név: egy sorban, levágva (a teljes név a title-ben). */
.chip__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip__remove { display: inline-flex; color: var(--k-primary); margin-left: 2px; }
.chip__remove .icon { width: 14px; height: 14px; }
.chip:hover, .chip:has(input:checked) { background: var(--k-primary-tint); border-color: var(--k-primary); }
.chip:has(input:checked) { font-weight: 600; }
.chip:has(input:focus-visible) { outline: 2px solid var(--k-focus); outline-offset: 2px; }
#subject-results.is-loading, #audit-results.is-loading, #candidate-results.is-loading, #participant-results.is-loading,
#osszesito-riport.is-loading, #osszevetes.is-loading { opacity: .6; transition: opacity .15s; }
/* JS nélkül a horgonyra ugró összesítő ne kerüljön a ragadós fejléc alá. */
.report-head { scroll-margin-top: calc(var(--appbar-h, 0px) + var(--k-space-4)); }
@media (max-width: 760px) { .filters--grid .filters__search { grid-column: 1 / -1; } } /* telefonon a kereső teljes széles */
.filters .k-field { min-width: 180px; }
.filters .filters__reset { align-self: end; flex-wrap: nowrap; }
/* A rendezés legördülője csak ott látszik, ahol a táblázatnak nincs fejléce (.table--stack, telefon); szélesebben a
   fejléc linkjei rendeznek, a rejtett mező akkor is viszi az értéket (TableSort). */
@media (min-width: 761px) { .filters .filters__sort { display: none; } }
.inline-form { display: inline-flex; gap: var(--k-space-3); align-items: center; }
.bulk-actions { margin-bottom: 8px; }
/* Résztvevőlista: balra a tömeges műveletek (szűk képernyőn ezek törnek), jobbra a „Résztvevők hozzáadása”. */
.bulk-bar { display: flex; gap: var(--k-space-3); align-items: flex-start; margin-bottom: 8px; }
.bulk-bar__end { margin-left: auto; flex-shrink: 0; }
@media (max-width: 760px) { .bulk-bar { flex-wrap: wrap; } }
/* Résztvevő oldala: bal oldalt a teendők, jobb oldalt (keskenyebb sáv) az alany adatai; az oszlopokon belül a kártyák
   egyenletes térközzel (a rács hézaga, nem a kártyák margója). Keskeny képernyőn egy oszlop, az alany adataival kezdve. */
.participant-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "main side";
    gap: var(--k-space-5); align-items: start; }
.participant-layout__main { grid-area: main; }
.participant-layout__side { grid-area: side; }
.participant-layout__main, .participant-layout__side { display: grid; gap: var(--k-space-5); min-width: 0; }
.participant-layout__main > *, .participant-layout__side > * { margin-top: 0; }
@media (max-width: 1000px) {
    .participant-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "main"; }
}
.page > .participant-layout { margin-top: 0; }
.participant-layout + * { margin-top: var(--k-space-5); }
.card-links { display: flex; flex-wrap: wrap; gap: var(--k-space-2) var(--k-space-5); margin: var(--k-space-4) 0 0; padding-top: var(--k-space-3);
    border-top: 1px solid var(--k-border-light); font-size: var(--k-fs-sm); }
.link-stats { margin-top: var(--k-space-3); }
.contact-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--k-space-2) var(--k-space-4); margin: 0 0 var(--k-space-3); }
.contact-list dt { font-size: var(--k-fs-sm); font-weight: 600; color: var(--k-text-muted); }
.contact-list dd { margin: 0; overflow-wrap: anywhere; }
.mail-preview { padding: var(--k-space-3) var(--k-space-4); border-left: 3px solid var(--k-border-light); background: var(--k-surface-subtle);
    font-size: var(--k-fs-sm); }

.membership-row { margin-bottom: 8px; gap: 12px; }
.steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.steps li.is-done::marker { color: var(--faint); }
/* Alpontok (a.–c.) a csoport alatt, beljebb. */
.steps--sub { margin-top: 8px; list-style-type: lower-alpha; }
details > summary { cursor: pointer; color: var(--muted); }

.pagination { display: flex; gap: var(--k-space-2); list-style: none; padding: 0; margin: var(--k-space-5) 0; flex-wrap: wrap; font-size: var(--k-fs-sm); }
.pagination li > * { display: inline-flex; align-items: center; justify-content: center; min-width: var(--k-control-h-sm); height: var(--k-control-h-sm);
    padding: 0 var(--k-space-2); border: 1px solid var(--k-primary-border); border-radius: var(--k-radius-sm); color: var(--k-primary); text-decoration: none; }
.pagination a:hover { background: var(--k-primary-tint); border-color: var(--k-primary); }
.pagination .active > * { background: var(--k-primary); border-color: var(--k-primary); color: var(--k-text-inverse); font-weight: 600; }
.pagination .disabled > * { border-color: var(--k-border-light); color: var(--k-text-muted); }

/* Kérdőív-szerkesztő: fogd-és-vidd sorrendezés */
.q-sort { white-space: nowrap; }
.q-handle { cursor: grab; padding: 0 6px; color: var(--placeholder); font-size: 1.1rem; }
.q-sortable tr.is-dragging, [data-form-sortable] tr.is-dragging { opacity: .4; }
.q-move { color: var(--faint); }
/* Kérdőív-szerkesztő: a dimenziók kezelése összecsukható kártyában (a címsor a lenyitó). */
.collapsible-card > summary { list-style: none; display: flex; align-items: center; gap: var(--k-space-2); color: var(--k-text); }
.collapsible-card > summary::-webkit-details-marker { display: none; }
.collapsible-card > summary .icon { color: var(--k-primary); transform: rotate(-90deg); transition: transform .15s; }
.collapsible-card[open] > summary .icon { transform: none; }
.collapsible-card > summary h2 { margin: 0; }
.collapsible-card[open] > summary { margin-bottom: var(--k-space-4); }
/* A résztvevő oldalán az ügyintézés doboza a riport fölött: összecsukva is látszik a lényeg (kategória, határidő…). */
.manage-box { margin-bottom: var(--k-space-6); }
.manage-box > summary { flex-wrap: wrap; row-gap: var(--k-space-1); }
.manage-box__summary { font-size: var(--k-fs-sm); }
/* A dobozon belül a részek keret nélkül: oszloponként vékony elválasztó, a két oszlop között függőleges vonal. */
.manage-section { min-width: 0; }
.manage-section + .manage-section { border-top: 1px solid var(--k-border-light); padding-top: var(--k-space-5); }
.manage-section h3 { margin-bottom: var(--k-space-3); }
@media (min-width: 1001px) {
    .manage-box .participant-layout__side { border-left: 1px solid var(--k-border-light); padding-left: var(--k-space-5); }
}
.manage-box .participant-layout + * { border-top: 1px solid var(--k-border-light); padding-top: var(--k-space-4); }

/* Diagramok (szerveroldali SVG) */
.chart svg { max-width: 100%; height: auto; }

@media (max-width: 760px) {
    /* Keskeny képernyőn a menüsor két sorba törik: felül a logó és a felhasználó, alatta teljes szélességben a menü,
       jobbra elhalványulva, jelezve, hogy oldalra görgethető. */
    .appbar .k-header__inner { gap: 0 var(--k-space-4); padding-top: var(--k-space-2); }
    .appbar .k-logo { order: 1; }
    .appbar .k-header__right { order: 2; gap: var(--k-space-3); }
    .appbar .k-nav { order: 3; flex: 1 0 100%; height: 44px; gap: 22px;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
    .appbar .k-nav::after { content: ""; flex: 0 0 16px; }
    /* A projektsáv: felül a projekt neve, alatta teljes szélességben a görgethető fülsor. */
    .appbar .k-subnav__inner { flex-wrap: wrap; overflow: visible; gap: 0 var(--k-space-4); padding-top: var(--k-space-2); }
    .appbar .appbar__tabs { order: 3; flex: 1 0 100%; overflow-x: auto; scrollbar-width: none; }
    .page { --page-pad: var(--k-space-4); padding: var(--k-space-5) var(--page-pad) var(--k-space-8); }
    .table--stack thead { display: none; }
    .table--stack tr { display: block; padding: 10px 0; }
    .table--stack td { display: block; padding: 2px 0; }
    .table--stack td[data-label]::before { content: attr(data-label) ": "; color: var(--faint); }
}

/* Projektek kezdőoldala: nagy számok, projektenként kártya haladássávval. */
.stats { display: flex; flex-wrap: wrap; gap: var(--k-space-5) var(--k-space-7); margin: 0 0 var(--k-space-6); }
.stats > div { padding-left: var(--k-space-4); border-left: 3px solid var(--k-primary); }
.stats b { display: block; font-size: var(--k-fs-h2); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stats small { font-size: var(--k-fs-h3); color: var(--k-text-muted); font-weight: 600; }
.stats span { font-size: var(--k-fs-sm); font-weight: 600; color: var(--k-text-muted); }
.project-row__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-space-2) var(--k-space-4); }
.project-row__head h2 { margin: 0; }
.project-row__head h2 a { text-decoration: none; }
.project-row__head h2 a:hover { text-decoration: underline; }
.project-row__deadline { margin-left: auto; font-size: var(--k-fs-sm); font-weight: 600; color: var(--k-text-muted); }
.project-row > p.muted { margin: var(--k-space-1) 0 var(--k-space-4); }
.progress-bar { height: 8px; border-radius: var(--k-radius-pill); background: var(--k-surface-strong); display: flex; gap: 2px; overflow: hidden; max-width: 720px; }
.project-row__counts { display: flex; flex-wrap: wrap; gap: var(--k-space-2) var(--k-space-5); margin: var(--k-space-3) 0 var(--k-space-4); font-size: var(--k-fs-sm); color: var(--k-text-muted); }
.project-row__counts b { color: var(--k-text); font-weight: 600; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }

/* Audit log: mezőnkénti változáslista */
.audit-changes { font-size: 13px; line-height: 1.5; max-width: 520px; overflow-wrap: anywhere; }

/* Szerkeszthető táblák (projektbeállítások) keskeny képernyőn: soronként egy blokk, a mezők teljes szélességben. */
@media (max-width: 760px) {
    .table--form tr { border-top: 1px solid var(--divider); padding: 14px 0; }
    .table--form td { padding: 4px 0; }
    .table--form td[data-label]::before { display: block; font-size: 12px; margin-bottom: 4px; }
    .table--form td:empty { display: none; }
}
.chart { margin: 0 0 var(--k-space-4); }
.chart__svg svg { max-width: 100%; height: auto; }
.chart figcaption { margin-top: var(--k-space-2); }
/* Archivált kérdés vagy opció: halvány háttér (a jelentést az „archivált” jelvény hordozza, nem az elhalványítás). */
.is-archived { background: var(--k-surface-muted); }
.chart-table { margin-top: var(--k-space-2); }
.chart-table summary { cursor: pointer; color: var(--k-primary); font-weight: 600; font-size: var(--k-fs-sm); }

/* Pontozás oldal: dimenziónként kártya, benne kérdésenként tagolt blokk; az opciószöveg egy sorban, kinyitható. */
.num { text-align: right; }
.score-dim__count { font-size: var(--k-fs-sm); font-weight: 400; margin-left: var(--k-space-2); }
.score-q { padding-top: var(--k-space-5); margin-top: var(--k-space-5); border-top: 1px solid var(--k-border-light); }
.score-dim h2 + .score-q { border-top: 0; margin-top: 0; padding-top: var(--k-space-2); }
.score-q__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--k-space-2); margin-bottom: var(--k-space-3); }
.score-q__code { font-weight: 700; color: var(--k-primary); font-variant-numeric: tabular-nums; }
.score-q__title { font-weight: 600; }
.score-q__hint { margin: 0 0 var(--k-space-2); font-size: var(--k-fs-sm); }
.score-table td { vertical-align: middle; }
.score-table input[type=number] { width: 100%; }
.score-opt { display: flex; align-items: flex-start; gap: var(--k-space-2); }
.score-opt__text { flex: 1; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }
.score-opt__text.is-open { display: block; -webkit-line-clamp: unset; line-clamp: none; }
.score-opt__toggle { flex: none; margin: -6px 0; }
.score-opt__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.score-q__text { margin: calc(-1 * var(--k-space-2)) 0 var(--k-space-3); color: var(--k-text-muted); }

/* reCAPTCHA (belépés, jelszó-visszaállítás): a widget fix 304 px széles, keskeny képernyőn kicsinyítve. */
.recaptcha { min-height: 78px; }
@media (max-width: 360px) { .recaptcha .g-recaptcha { transform: scale(.85); transform-origin: 0 0; } }

/* Formázott szöveg szerkesztője (rich-text.js, a projekt „Magyarázat” mezője): a szövegmező helyén, annak keretével. */
.rich-text { border: 1px solid var(--k-border-input); border-radius: var(--k-radius-sm); background: var(--k-surface-muted); }
.rich-text:focus-within { background: var(--k-bg); }
.field--error .rich-text { border-color: var(--k-danger); }
.rich-text__toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-bottom: 1px solid var(--k-border); }
.rich-text__toolbar .k-btn[aria-pressed="true"] { background: var(--k-primary-tint); color: var(--k-primary); }
.rich-text__link { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-space-2); padding: var(--k-space-2) var(--k-space-3);
    border-bottom: 1px solid var(--k-border); background: var(--k-bg); }
.rich-text__link label { font-size: var(--k-fs-sm); font-weight: 600; }
.rich-text__link input { flex: 1 1 16em; width: auto; }
.rich-text__error { flex-basis: 100%; font-size: var(--k-fs-sm); color: var(--k-danger); font-weight: 600; }
.rich-text__editor { min-height: 144px; padding: 8px 12px; font: 400 var(--k-fs-body)/1.5 var(--k-font-sans); color: var(--k-text);
    overflow-wrap: anywhere; border-radius: 0 0 var(--k-radius-sm) var(--k-radius-sm); }
.rich-text__editor:focus { outline: 2px solid var(--k-focus); outline-offset: 0; }
.rich-text__editor > :first-child { margin-top: 0; }
.rich-text__editor p, .rich-text__editor ul, .rich-text__editor ol { margin: 0 0 .75em; }
.rich-text__editor ul, .rich-text__editor ol { padding-left: 1.5em; }
.rich-text__editor.is-empty::before { content: attr(data-placeholder); color: var(--k-text-muted); pointer-events: none; float: left; height: 0; }
