/* KSK – Jogi dokumentumok (ÁSZF, Adatkezelési tájékoztató).
   Szerkezet és méret; szín kizárólag tokenből. A reset, a fókuszgyűrű és a
   téma-gomb a base.css-ből jön – ez a lap csak a hosszú szöveg tipográfiáját
   teszi hozzá.

   MIÉRT KÜLÖN LAP ÉS KÜLÖN STÍLUS. A kitöltő egyetlen dokumentumban él
   (index.html), de a jogi szövegnek saját, hivatkozható címe kell: e-mailből,
   számláról, elfogadási felületről is rá kell tudni mutatni, és évekkel
   később is elő kell venni. Egy `#horgony` a kitöltőn belül ezt nem adja meg
   – és a szöveg súlyát sem indokolt rátölteni mindenkire, aki a kérdőívet
   nyitja meg. */

.doc-body{
  background:var(--surface-0);
  display:flex;flex-direction:column;min-height:100vh;
}

/* ── Fejléc ───────────────────────────────────────────── */
.doc-top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 24px;border-bottom:1px solid var(--border-subtle);
  background:var(--surface-1);position:sticky;top:0;z-index:10;
}
.doc-home{
  font-family:var(--font-display);font-weight:800;font-size:1.05rem;
  color:var(--accent);text-decoration:none;
}
.doc-home span{color:var(--text-muted);font-weight:600;font-size:.86rem}
.doc-home:hover{color:var(--accent-hover)}
@media (max-width:520px){
  .doc-home span{display:none}
}

/* ── Törzs ────────────────────────────────────────────── */
.doc-main{
  /* 74ch: a hosszú jogi bekezdés ennél szélesebb hasábon olvashatatlan. */
  max-width:74ch;width:100%;margin:0 auto;padding:36px 24px 56px;flex:1;
  color:var(--text-secondary);line-height:1.7;
}
.doc-main h1{
  font-family:var(--font-display);font-size:1.85rem;font-weight:800;
  color:var(--text-primary);line-height:1.25;margin-bottom:22px;
}
.doc-main h2{
  font-family:var(--font-display);font-size:1.25rem;font-weight:700;
  color:var(--text-primary);margin:38px 0 12px;padding-bottom:7px;
  border-bottom:1px solid var(--border-subtle);
}
.doc-main h3{
  font-family:var(--font-display);font-size:1.02rem;font-weight:700;
  color:var(--text-primary);margin:26px 0 8px;
}
.doc-main h4,.doc-main h5,.doc-main h6{
  font-size:.95rem;font-weight:700;color:var(--text-primary);margin:20px 0 6px;
}
.doc-main p{margin-bottom:14px}
.doc-main strong{color:var(--text-primary);font-weight:700}
.doc-main ul,.doc-main ol{margin:0 0 16px 22px}
.doc-main li{margin-bottom:7px}
.doc-main li::marker{color:var(--accent)}
.doc-main hr{
  border:none;border-top:1px solid var(--border-subtle);margin:30px 0;
}
.doc-main code{
  font-family:var(--font-mono);font-size:.86em;
  background:var(--surface-2);border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);padding:1px 5px;
  /* Hosszú cím vagy útvonal ne feszítse szét a hasábot mobilon. */
  overflow-wrap:anywhere;
}

/* A címekre mutató horgony miatt a ragadós fejléc alá csúszna a cím. */
.doc-main :where(h2,h3){scroll-margin-top:74px}

/* ── Tervezet-szalag ──────────────────────────────────── */
/* A LAP LEGFONTOSABB ELEME, amíg a dokumentum nem hatályos. Nem buborék és
   nem lábjegyzet: a cím alatt, teljes szélességben áll. A `doc-todo`
   kiemelésekkel együtt hordozza az üzenetet – a szín sehol nem az egyetlen
   jelzés, a szöveg maga is kimondja. */
.doc-draft{
  background:var(--danger-soft);border:1px solid var(--danger-border);
  border-left:4px solid var(--danger);border-radius:var(--radius);
  padding:16px 20px;margin:0 0 26px;
}
.doc-draft strong{color:var(--text-primary)}
.doc-draft p{margin:8px 0 0;font-size:.92rem;color:var(--text-secondary)}

/* Kitöltetlen hely a szövegben. */
.doc-todo{
  background:var(--accent-soft);color:var(--text-primary);
  border:1px solid var(--accent-border);border-radius:var(--radius-sm);
  padding:0 4px;font-size:.94em;
}

/* ── Tartalomjegyzék ──────────────────────────────────── */
.doc-toc{
  background:var(--surface-1);border:1px solid var(--border-subtle);
  border-radius:var(--radius);padding:18px 22px;margin:0 0 30px;
}
.doc-toc h2{
  font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-muted);margin:0 0 10px;padding:0;border:none;
  font-family:var(--font-body);font-weight:700;
}
/* Jelöletlen lista: a fejezetcímek a saját sorszámukat hozzák. */
.doc-toc ul{margin:0;list-style:none;columns:2;column-gap:26px}
.doc-toc li{margin-bottom:4px;font-size:.9rem;break-inside:avoid}
.doc-toc a{color:var(--text-secondary);text-decoration:none}
.doc-toc a:hover{color:var(--accent);text-decoration:underline}
@media (max-width:640px){
  .doc-toc ul{columns:1}
}

/* ── Idézet / kiemelt blokk ───────────────────────────── */
.doc-note{
  background:var(--surface-1);border:1px solid var(--border-subtle);
  border-left:3px solid var(--accent);border-radius:var(--radius);
  padding:16px 20px;margin:0 0 18px;
}
.doc-note > :last-child{margin-bottom:0}
.doc-note ul,.doc-note ol{margin-bottom:12px}

/* ── Táblázatok ───────────────────────────────────────── */
/* A görgetés a BURKOLÓN van, és a burkoló fókuszálható (`tabindex="0"`):
   billentyűzettel is el kell tudni görgetni a széles táblát. Ugyanaz a
   megoldás, mint a profil számlatáblájánál. */
.doc-table-wrap{overflow-x:auto;margin:0 0 20px;max-width:100%}
.doc-table{
  width:100%;border-collapse:collapse;font-size:.9rem;min-width:26rem;
}
.doc-table th,.doc-table td{
  text-align:left;padding:9px 12px;vertical-align:top;
  border-bottom:1px solid var(--border-subtle);
}
.doc-table thead th{
  color:var(--text-muted);font-size:.8rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
  border-bottom:1px solid var(--border-strong);
}
.doc-table tbody th{color:var(--text-primary);font-weight:600}
.doc-table .doc-num{text-align:right;font-variant-numeric:tabular-nums}
/* Név–érték táblák: a bal oszlop keskeny és nem törik szét. */
.doc-table--pairs tbody th{width:38%}

/* ── Ábra (a kétrekeszes modell) ──────────────────────── */
.doc-figure{
  font-family:var(--font-mono);font-size:.78rem;line-height:1.55;
  background:var(--surface-1);border:1px solid var(--border-subtle);
  border-radius:var(--radius);padding:16px 18px;margin:0 0 20px;
  overflow-x:auto;color:var(--text-secondary);
}

/* ── Lábléc ───────────────────────────────────────────── */
.doc-foot{
  border-top:1px solid var(--border-subtle);background:var(--surface-1);
  padding:20px 24px;text-align:center;font-size:.88rem;
  color:var(--text-muted);
}
.doc-foot a{color:var(--accent);text-decoration:none}
.doc-foot a:hover{text-decoration:underline}
.doc-foot-meta{margin-top:6px;font-size:.8rem}

/* ── Nyomtatás ────────────────────────────────────────── */
/* A jogi dokumentumot ki fogják nyomtatni, és papíron a fejléc, a
   tartalomjegyzék és a lábléc navigációja nem ér semmit. A tervezet-szalag
   VISZONT marad: papíron még könnyebb elfelejteni, hogy nem hatályos. */
@media print{
  .doc-top,.doc-toc,.doc-foot,.skip-link{display:none}
  .doc-main{max-width:none;padding:0}
  .doc-table-wrap{overflow:visible}
  .doc-main h2,.doc-main h3{break-after:avoid}
  .doc-table,.doc-note,.doc-draft{break-inside:avoid}
}