/* A kitöltői felület (Kutatási Portál) az arculati kitre épül (assets/arculat/<hash>/arculat.css: a --k-* tokenek, a
   betűk és a .k-* komponensek; előtte töltődik be; docs/12-design.md). Itt csak az oldal elrendezése van; a kérdések
   kitöltői megjelenése a közös form-renderer/respondent.css-ben. Nyers szín nincs, minden a kit tokenjeiből. */

:root { color-scheme: light; }
html { scroll-padding-top: 150px; }
/* A „hidden” mindig rejtsen (a display-t megadó osztályok, pl. .nav-buttons, különben felülírnák). */
[hidden] { display: none !important; }

/* --- Fejléc: a projekt sávja (projekt · alany, mentésjelző) és a részek folyamatjelzője görgetéskor a helyén marad. - */
.survey-bar { position: sticky; top: 0; z-index: 10; }
.survey-bar__inner { justify-content: space-between; min-height: 48px; }
.survey-bar__title { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.survey-bar__subject { font-weight: 400; }
.survey-bar__save { flex: none; }
.survey-progress { background: var(--k-bg); border-bottom: 1px solid var(--k-border-light); }
.progress { display: flex; align-items: center; gap: var(--k-space-4); min-height: 48px; font-size: var(--k-fs-sm); }
.progress__label { white-space: nowrap; color: var(--k-text-muted); font-weight: 600; }
.progress__steps { list-style: none; padding: 0; margin: 0; }
.progress__steps li { flex: 1; display: flex; }
/* Minden rész egy 24 px magas, kattintható sáv, benne a kit szakaszcsíkja: kész = kék, aktuális = halványabb kék,
   hátralévő = szürke (az állapot szövegesen is ott van a képernyőolvasónak). */
.progress__step { flex: 1; display: flex; align-items: center; height: 24px; }
.progress__step::before { content: ""; display: block; width: 100%; height: 6px; border-radius: 3px; background: var(--k-bg); box-shadow: inset 0 0 0 1px var(--k-text-muted); }
.progress__step.is-done::before { background: var(--k-primary); box-shadow: none; }
.progress__step.is-current::before { background: var(--k-primary-tint); box-shadow: inset 0 0 0 2px var(--k-primary); }
.progress__step.is-current.is-done::before { opacity: 1; outline: 2px solid var(--k-primary-border); outline-offset: 1px; }
.progress__step:hover::before { background: var(--k-primary-hover); box-shadow: none; opacity: 1; }
.progress__step[aria-busy="true"]::before { opacity: .5; }
.progress__submit { white-space: nowrap; font-weight: 600; display: inline-flex; align-items: center; min-height: 24px; }
.progress__submit[aria-current="page"] { text-decoration: none; color: var(--k-text); }

/* --- Oldal: olvasási oszlop (.k-reading), lábléc a kit kék lábléce (rövid oldalon is az ablak alján). ------------- */
body { min-height: 100vh; display: flex; flex-direction: column; }
.page { flex: 1 0 auto; width: 100%; padding-top: var(--k-space-7); padding-bottom: var(--k-space-8); }
.page--narrow { padding-top: var(--k-space-8); }
.k-footer { margin-top: 0; }
.k-footer__links span { display: inline-flex; gap: 4px; flex-wrap: wrap; }
h1 { overflow-wrap: anywhere; }
.prose { white-space: normal; }
.welcome { margin-bottom: var(--k-space-6); }
.welcome h1 { color: var(--k-text-inverse); }
.welcome .k-lead { margin: 0; max-width: none; }
/* „Magyarázat”: formázott szöveg a kék doboz alatt, általános színnel (Shared\RichText kimenete). */
.explanation { margin-bottom: var(--k-space-6); }
.explanation > :first-child { margin-top: 0; }
.explanation > :last-child { margin-bottom: 0; }
/* Előszűrő oldal (verify.php): középen egy doboz; a reCAPTCHA widget fix 304 px, keskeny képernyőn kicsinyítve. */
.verify { max-width: 36rem; margin: 0 auto; }
.verify h1 { margin-top: 0; }
.verify__form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--k-space-4); margin: var(--k-space-5) 0; }
.verify .g-recaptcha { min-height: 78px; }
@media (max-width: 360px) { .verify .g-recaptcha { transform: scale(.85); transform-origin: 0 0; } }
.meta { display: flex; flex-wrap: wrap; gap: var(--k-space-4) var(--k-space-7); margin: var(--k-space-5) 0 0; padding: var(--k-space-4); }
.meta dt { font-size: var(--k-fs-sm); color: var(--k-text); font-weight: 600; }
.meta dd { margin: 4px 0 0; font-size: var(--k-fs-h3); font-weight: 600; }
.actions { display: flex; gap: var(--k-space-3); flex-wrap: wrap; align-items: center; }
.inline-form { display: inline; }
.nav-buttons { display: flex; justify-content: space-between; align-items: center; gap: var(--k-space-4); flex-wrap: wrap;
    margin-top: var(--k-space-2); padding-top: var(--k-space-6); border-top: 1px solid var(--k-border-light); }
.missing { padding-left: 20px; }
.missing li { margin-bottom: var(--k-space-2); }
.missing__section { font-size: var(--k-fs-h3); margin: var(--k-space-6) 0 var(--k-space-2); }
.missing + .k-btn { margin-top: var(--k-space-6); } /* a hiánylista és a (tiltott) beküldés gomb között */
.readonly-head { margin-bottom: var(--k-space-6); }
.thanks .actions { margin-top: var(--k-space-5); }
/* A JS nélküli űrlap rejtett alapértelmezett gombja (Enter = mentés és maradás); nem display:none, mert akkor egyes
   böngészők az Enterhez sem használnák. */
.default-submit { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Kérdések: a kitöltői megjelenés a közös form-renderer/respondent.css-ben (az admin előnézete is azt tölti be). - */
/* Szakaszcím: a szakaszoldalon a sablon h1-e adja, a modulé rejtve; a „Válaszaim” oldalon h2. */
.hide-section-title .fr-section__title { display: none; }
.hide-section-title .fr-question:first-child, .hide-section-title .fr-section__title + .fr-question { border-top: 0; padding-top: var(--k-space-2); }
.section-status { margin: var(--k-space-5) 0; color: var(--k-text-muted); font-weight: 600; }
.section-status.is-done { color: var(--k-success); }
.section-status:empty { display: none; }
.notice { margin-bottom: var(--k-space-5); }

@media (max-width: 640px) {
    html { scroll-padding-top: 130px; }
    .survey-bar__subject { display: none; }
    .survey-bar__save .fr-save:not([data-state="failed"]) .fr-save__text { display: none; }
    .progress { gap: var(--k-space-2); }
    .page { padding-top: var(--k-space-5); padding-bottom: var(--k-space-7); }
    .nav-buttons .k-btn { flex: 1 1 100%; }
}

/* „Link másolása” a kollégáknak (partials/share.php): a projektsávban egy szöveges gomb, az üdvözlő oldalon keretes blokk. */
.share--bar { flex: none; display: flex; align-items: center; gap: var(--k-space-2); margin-left: auto; }
.share--bar .share__status { font-size: var(--k-fs-sm); color: var(--k-text); } /* szürke sávon a muted kevés kontraszt */
.share--block { display: grid; gap: var(--k-space-3); justify-items: start; margin: 0 0 var(--k-space-5); padding: var(--k-space-4);
    border: 1px solid var(--k-border-light); border-radius: var(--k-radius-md); }
.share__title { margin: 0; }
.share__status { font-size: var(--k-fs-sm); color: var(--k-text-muted); }
.share__fallback { width: 100%; }
.share__input { width: 100%; margin-top: var(--k-space-2); }
/* Keskeny képernyőn a sávban nincs hely a szövegnek: csak vizuálisan rejtett, a képernyőolvasó felolvassa (élő régió);
   látó felhasználónak a gomb felirata vált „Másolva”-ra (share.js). */
@media (max-width: 640px) {
    .share--bar .share__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}