/* KSK – Kérdőívoldal: fejléc, oldalsáv, kérdéskártyák, űrlapelemek, lábléc.
   Szerkezet és méret; szín kizárólag tokenből (css/themes/). */

/* ── FEJLÉC ─────────────────────────────────────────── */
#qz-header{position:sticky;top:0;z-index:100;background:var(--surface-1);border-bottom:1px solid var(--border-subtle);box-shadow:var(--shadow-header)}
.qh-inner{display:flex;align-items:center;gap:14px;padding:11px 18px}
.qh-logo{font-family:var(--font-display);font-size:.93rem;font-weight:700;color:var(--accent);white-space:nowrap;flex-shrink:0;background:none;border:none;padding:4px 6px;border-radius:var(--radius-sm)}
.qh-logo span{color:var(--text-muted)}
.qh-logo:hover span{color:var(--accent);transition:color var(--transition)}
.qh-prog{flex:1;min-width:0}
.qh-prog-lbl{display:flex;justify-content:space-between;gap:10px;font-size:.72rem;color:var(--text-muted);font-family:var(--font-mono);margin-bottom:4px}
.qh-prog-bar{height:3px;background:var(--surface-3);border-radius:2px;overflow:hidden}
.qh-prog-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .4s ease}
.qh-actions{display:flex;gap:7px;flex-shrink:0}
.btn-xs{padding:6px 12px;border-radius:var(--radius);border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text-secondary);font-size:.86rem;transition:var(--transition)}
.btn-xs:hover{border-color:var(--accent);color:var(--accent)}

/* ── OLDALSÁV ───────────────────────────────────────── */
.qz-body{display:flex;flex:1;min-height:calc(100vh - 66px)}
.qz-sidebar{width:220px;flex-shrink:0;background:var(--surface-1);border-right:1px solid var(--border-subtle);padding:12px 0;position:sticky;top:66px;height:calc(100vh - 66px);overflow-y:auto}
.qz-sidebar::-webkit-scrollbar{width:3px}
.qz-sidebar::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:2px}
.sb-lbl{font-size:.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;font-weight:600;padding:8px 14px 3px}
.sb-item{display:flex;width:100%;align-items:center;gap:9px;padding:7px 14px;cursor:pointer;color:var(--text-secondary);font-size:.86rem;transition:var(--transition);border:none;border-left:2px solid transparent;line-height:1.3;background:none;text-align:left;font-family:var(--font-body)}
.sb-item:hover{background:var(--surface-2);color:var(--text-primary)}
.sb-item.active{background:var(--accent-soft);color:var(--accent);border-left-color:var(--accent)}
.sb-item.done{color:var(--ok)}
.sb-num{font-family:var(--font-mono);font-size:.72rem;color:var(--text-muted);flex-shrink:0;width:16px}
.sb-item.active .sb-num{color:var(--accent)}
.sb-item.done .sb-num{color:var(--ok)}
.sb-chk{margin-left:auto;flex-shrink:0;width:13px;height:13px;border-radius:50%;background:var(--surface-3);border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;font-size:.5rem}
.sb-item.done .sb-chk{background:var(--ok);border-color:var(--ok);color:var(--text-on-accent)}
.sb-item.active .sb-chk{border-color:var(--accent)}

/* ── FŐ TERÜLET ─────────────────────────────────────── */
.qz-main{flex:1;padding:26px 30px;max-width:840px;min-width:0}
.sec-hdr{margin-bottom:24px}
.sec-badge{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent);font-size:.72rem;font-family:var(--font-mono);padding:3px 10px;border-radius:20px;border:1px solid var(--accent-border);margin-bottom:10px}
.sec-title{font-family:var(--font-display);font-size:1.29rem;font-weight:700;color:var(--text-primary);margin-bottom:5px}
.sec-desc{font-size:.89rem;color:var(--text-secondary);line-height:1.6}

/* ── KÉRDÉSKÁRTYA ───────────────────────────────────── */
.q-card{background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:18px 22px;margin-bottom:9px;transition:border-color var(--transition)}
.q-card:hover{border-color:var(--border-strong)}
.q-card.answered{border-color:var(--ok-border)}
.q-head{display:flex;gap:11px;align-items:flex-start;margin-bottom:13px}
.q-num{font-family:var(--font-mono);font-size:.72rem;color:var(--text-muted);background:var(--surface-2);border:1px solid var(--border-subtle);padding:2px 6px;border-radius:5px;flex-shrink:0;white-space:nowrap;margin-top:2px}
.q-card.answered .q-num{color:var(--ok);border-color:var(--ok-border)}
.q-text{font-size:.96rem;line-height:1.6;color:var(--text-primary)}
.q-fieldset{border:none;padding:0;margin:0;min-width:0}
.q-legend{padding:0}

/* ── CSÚSZKA (r010) ─────────────────────────────────── */
.sl-wrap{display:flex;align-items:center;gap:12px}
.sl-lbls{display:flex;justify-content:space-between;gap:8px;font-size:.75rem;color:var(--text-muted);margin-top:5px;padding:0 2px}
input[type=range]{flex:1;height:4px;background:var(--surface-3);border-radius:2px;-webkit-appearance:none;appearance:none;cursor:pointer;min-width:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--surface-0);box-shadow:0 0 0 2px var(--accent)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--surface-0)}
input[type=range].untouched::-webkit-slider-thumb{background:var(--surface-4);box-shadow:0 0 0 2px var(--border-strong)}
input[type=range].untouched::-moz-range-thumb{background:var(--surface-4)}
input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.sl-val{font-family:var(--font-mono);font-size:1.07rem;font-weight:500;color:var(--accent);min-width:34px;text-align:center}
.sl-val.empty{color:var(--text-muted)}

/* ── VÁLASZOPCIÓK (l4/l5/ch/sit) ────────────────────── */
.r-grid{display:flex;flex-direction:column;gap:5px}
.r-opt{display:flex;align-items:flex-start;gap:9px;padding:9px 13px;background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius);cursor:pointer;transition:var(--transition)}
.r-opt:hover{border-color:var(--border-strong);background:var(--surface-3)}
.r-opt.sel{border-color:var(--accent);background:var(--accent-soft)}
.r-opt:focus-within{outline:2px solid var(--accent);outline-offset:2px}
/* A valódi rádiógomb megmarad a billentyűzet és a képernyőolvasó számára,
   csak vizuálisan rejtett – a látható jelölő a .r-dot. */
.r-input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.r-dot{width:15px;height:15px;border-radius:50%;border:2px solid var(--border-strong);flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:1px;transition:var(--transition)}
.r-opt.sel .r-dot{border-color:var(--accent);background:var(--accent)}
.r-dot-i{width:5px;height:5px;border-radius:50%;background:var(--surface-1);opacity:0}
.r-opt.sel .r-dot-i{opacity:1}
.r-lbl{font-size:.93rem;line-height:1.4;color:var(--text-secondary)}
.r-opt.sel .r-lbl{color:var(--accent)}
.r-key{color:var(--accent);margin-right:6px;font-weight:600}

/* ── 1–5 SKÁLA (r15) ────────────────────────────────── */
.s15{display:flex;gap:6px}
.s15-btn{flex:1;padding:9px 3px;background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius);cursor:pointer;font-family:var(--font-mono);font-size:.93rem;font-weight:500;color:var(--text-secondary);text-align:center;transition:var(--transition)}
.s15-btn:hover{border-color:var(--border-strong);color:var(--text-primary)}
.s15-btn.sel{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}

/* ── SZÖVEGES MEZŐK ─────────────────────────────────── */
.free-ta{width:100%;background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius);color:var(--text-primary);font-family:var(--font-body);font-size:.93rem;padding:11px 15px;line-height:1.6;resize:vertical;min-height:76px;transition:border-color var(--transition)}
.free-ta:focus{border-color:var(--accent)}
.free-ta::placeholder{color:var(--text-muted)}
.txt-in{background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--radius);color:var(--text-primary);font-family:var(--font-body);font-size:.93rem;padding:10px 14px;width:100%;max-width:400px;transition:border-color var(--transition)}
.txt-in:focus{border-color:var(--accent)}
.txt-in.filled{border-color:var(--accent-border-strong)}
/* Számmező: a hosszú mezőbe írt kétjegyű szám elveszne. */
.num-in{max-width:180px}
/* Legördülő (származási ország): natív, hogy mobilon a rendszer választója jöjjön. */
.sel-in{cursor:pointer}
/* Egy kérdés, több válasz: a mezők egymás alatt, a saját kis címkéjükkel. */
.q-subs{display:flex;flex-direction:column;gap:10px}
.q-sublabel{display:block;font-size:.82rem;color:var(--text-secondary);margin-bottom:4px}
/* „nem kötelező" – kötelezőből van több, ezért a kivételt jelöljük. */
.q-optional{font-size:.75rem;color:var(--text-secondary);margin-left:8px;white-space:nowrap}
/* Kitöltetlen kötelező mező, miután a kitöltő tovább akart lépni. */
.q-card.missing{border-color:var(--danger-border)}
.date-in{width:220px;cursor:pointer}
.q-hint{font-size:.82rem;color:var(--text-muted);margin-bottom:8px}

/* ── LÁBLÉC ─────────────────────────────────────────── */
.qz-footer{position:sticky;bottom:0;background:var(--surface-1);border-top:1px solid var(--border-subtle);padding:12px 30px;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:50;box-shadow:var(--shadow-header)}
.qz-footer-info{font-size:.79rem;color:var(--text-muted);font-family:var(--font-mono)}
.foot-btns{display:flex;gap:9px;flex-shrink:0}
.btn-nav{padding:9px 20px;border-radius:var(--radius);font-size:.93rem;font-weight:500;border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text-secondary);transition:var(--transition)}
.btn-nav:hover{border-color:var(--accent);color:var(--accent)}
.btn-nav.primary{background:var(--accent);color:var(--text-on-accent);border-color:var(--accent);font-weight:600}
.btn-nav.primary:hover{background:var(--accent-hover)}
.btn-nav[disabled]{opacity:.35;cursor:not-allowed}

/* ── RESZPONZÍV ─────────────────────────────────────── */
@media (max-width:900px){
  .qz-body{flex-direction:column}
  .qz-sidebar{
    width:100%;height:auto;position:static;border-right:none;
    border-bottom:1px solid var(--border-subtle);
    display:flex;overflow-x:auto;padding:8px;gap:6px;
  }
  .qz-sidebar .sb-lbl{display:none}
  .sb-item{width:auto;flex-shrink:0;border-left:none;border-bottom:2px solid transparent;border-radius:var(--radius);padding:6px 10px}
  .sb-item.active{border-left-color:transparent;border-bottom-color:var(--accent)}
  .sb-item>span:nth-child(2){max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .qz-main{padding:18px 14px;max-width:100%}
}
@media (max-width:640px){
  .qh-inner{flex-wrap:wrap;padding:10px 12px;gap:8px}
  .qh-prog{order:3;flex-basis:100%}
  .qz-main{padding:14px 10px}
  .q-card{padding:14px 13px}
  .sl-lbls{font-size:.68rem}
  .qz-footer{padding:10px 12px;flex-wrap:wrap}
  .qz-footer-info{flex-basis:100%;order:2}
  .foot-btns{width:100%}
  .btn-nav{flex:1;padding:11px 12px}
}

/* A tárolóhiba tartós figyelmeztetése.
 *
 * A fejlécben marad, amíg a mentés bukik – nem eltűnő buborék, mert a
 * kitöltő egy órát is dolgozhat abban a hitben, hogy a munkája megvan.
 * A `hidden` attribútum kapcsolja; a `display` felülírását ezért tiltjuk. */
.qh-storage-warn{
  background:var(--danger-soft);
  color:var(--danger);
  border-top:1px solid var(--danger-border);
  padding:9px 18px;
  font-size:.86rem;
  line-height:1.45;
}
.qh-storage-warn[hidden]{display:none}
@media (max-width:640px){
  .qh-storage-warn{padding:8px 12px;font-size:.82rem}
}

/* ── Zárt modul a kitöltőben (modul-kapu) ─────────────────
   A zárt szakasz nem tűnik el és nem is némul el: lakatot kap a
   sávban, a szakasz elején pedig panel mondja el, mi kell a
   feloldásához. Minden érték téma-token. */
.sb-item.locked{color:var(--text-muted)}
.sb-item.locked .sb-num{color:var(--text-muted)}
/* A ZÁRT ÉS ÉPPEN NYITOTT szakasz: az aktív állapot nyer.
   A halvány szöveg a sáv semleges hátterén rendben van, az aktív szakasz
   kiemelt hátterén viszont 3,99:1-re esik (mérte az axe). A lakat nem ok arra,
   hogy a kitöltő ne tudja elolvasni, HOL áll. */
.sb-item.locked.active,
.sb-item.locked.active .sb-num{color:var(--accent)}
.sec-locked{border:1px dashed var(--border-strong);background:var(--surface-2)}

/* Az ÉRZÉKENY szakasz hozzájárulás-panelje. Nem figyelmeztetés-színű: ez nem
   hiba és nem veszély, hanem egy döntés, amit a kitöltő hoz meg. A kiemelt
   keret annyit mond, hogy ez a kártya más, mint a kérdések. */
.sec-consent{border:1px solid var(--accent-border);background:var(--surface-2)}
.sec-consent-t{font-family:var(--font-display);font-weight:700;margin-bottom:8px;color:var(--text-primary)}
.sec-consent-p{font-size:.92rem;color:var(--text-secondary);line-height:1.7;margin-bottom:10px}
.sec-consent-l{font-size:.89rem;color:var(--text-secondary);line-height:1.65;margin:0 0 16px 18px}
.sec-consent-l li{margin-bottom:7px}
.sec-consent-l strong{color:var(--text-primary)}
.sec-consent-btns{display:flex;gap:10px;flex-wrap:wrap}
.sec-locked-t{font-family:var(--font-display);font-weight:700;margin-bottom:6px;color:var(--text-primary)}
.sec-locked-p{font-size:.89rem;color:var(--text-secondary);line-height:1.65;margin-bottom:14px}