/* KSK – Eredményoldal: hero, rács, sávok, szakaszpontszámok.
   A diagramok külön fájlban: css/charts.css. Szín kizárólag tokenből. */

#pg-results{background:var(--surface-0);flex-direction:column}
.res-hdr{background:var(--surface-1);border-bottom:1px solid var(--border-subtle);padding:14px 30px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;box-shadow:var(--shadow-header)}
.res-hdr-t{font-family:var(--font-display);font-size:1rem;font-weight:700}
.res-acts{display:flex;gap:8px;flex-wrap:wrap}
.res-body{padding:36px 30px;max-width:1080px;margin:0 auto;width:100%}

/* ── HERO ───────────────────────────────────────────── */
.res-hero{
  background:var(--gradient-hero);border:1px solid var(--accent-border-strong);
  border-radius:var(--radius-lg);padding:44px 48px;margin-bottom:24px;
  position:relative;overflow:hidden;box-shadow:var(--shadow-hero);
}
.hero-lbl{font-family:var(--font-mono);font-size:.72rem;color:var(--accent);opacity:.75;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.hero-role{font-family:var(--font-display);font-size:2.14rem;font-weight:800;color:var(--accent);letter-spacing:-.01em;line-height:1.1;text-transform:uppercase;margin-bottom:7px}
.hero-sub{font-size:1.07rem;color:var(--text-secondary);margin-bottom:18px}
.hero-match{display:inline-flex;align-items:center;gap:7px;background:var(--ok-soft);border:1px solid var(--ok-border);color:var(--ok);padding:5px 13px;border-radius:20px;font-size:.79rem;font-family:var(--font-mono)}
.hero-conf{display:block;margin-top:10px;font-size:.82rem;color:var(--text-secondary)}

/* ── RÁCS ───────────────────────────────────────────── */
.res-grid{display:grid;grid-template-columns:1fr 340px;gap:18px;margin-bottom:18px;align-items:start}
.res-col{display:flex;flex-direction:column;gap:18px}
.res-full{margin-bottom:18px}
.rc{background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow-card)}
.rc-t{font-family:var(--font-display);font-size:.86rem;font-weight:700;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px;display:flex;align-items:center;gap:7px}
.rc-t::before{content:'';display:block;width:3px;height:13px;background:var(--accent);border-radius:2px;flex-shrink:0}

/* ── DIMENZIÓSÁVOK ──────────────────────────────────── */
.dim-bars{display:flex;flex-direction:column;gap:11px}
.db-row{display:flex;align-items:center;gap:11px}
.db-lbl{font-size:.86rem;color:var(--text-secondary);width:170px;flex-shrink:0}
.db-track{flex:1;height:7px;background:var(--surface-3);border-radius:3px;overflow:hidden;min-width:40px}
.db-fill{height:100%;border-radius:3px;transition:width var(--transition-slow)}
.db-val{font-family:var(--font-mono);font-size:.79rem;color:var(--text-secondary);min-width:52px;text-align:right}
.db-row.nodata .db-lbl{color:var(--text-muted)}
.db-row.nodata .db-track{background:repeating-linear-gradient(90deg,var(--chart-nodata) 0 4px,transparent 4px 8px)}
.db-val.nodata{color:var(--text-muted);font-style:italic}

/* ── SZEREPKÖR-RANGSOR ──────────────────────────────── */
.rr-list{display:flex;flex-direction:column;gap:7px}
.rr-item{display:flex;align-items:center;gap:11px;padding:10px 14px;background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius)}
.rr-item.top{border-color:var(--accent);background:var(--accent-soft)}
.rr-pos{font-family:var(--font-mono);font-size:.72rem;color:var(--text-muted);min-width:18px}
.rr-pos.g{color:var(--accent)}
.rr-name{flex:1;font-size:.89rem}
.rr-name.top{color:var(--accent);font-weight:500}
.rr-bar{width:50px;height:4px;background:var(--surface-3);border-radius:2px;overflow:hidden;flex-shrink:0}
.rr-bar-f{height:100%;background:var(--accent);border-radius:2px}
.rr-pct{font-family:var(--font-mono);font-size:.72rem;color:var(--text-muted);min-width:28px;text-align:right}

/* ── ERŐSSÉGEK / FEJLESZTENDŐK ──────────────────────── */
.sw-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sw-t{font-size:.79rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:9px}
.sw-t.s{color:var(--ok)}
.sw-t.d{color:var(--accent)}
.sw-item{display:flex;align-items:flex-start;gap:9px;padding:9px 0;border-bottom:1px solid var(--border-subtle);font-size:.89rem;line-height:1.5;color:var(--text-secondary)}
.sw-item:last-child{border:none}
.sw-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;margin-top:5px}
.sw-dot.s{background:var(--ok)}
.sw-dot.d{background:var(--accent)}
.sw-empty{font-size:.89rem;color:var(--text-muted);font-style:italic;padding:9px 0}

/* ── SZÖVEGES ÉRTÉKELÉS ─────────────────────────────── */
.pers-text{font-size:.96rem;line-height:1.85;color:var(--text-secondary)}
.pers-text p{margin-bottom:14px}
.pers-text p:last-child{margin-bottom:0}
.pers-text strong{color:var(--text-primary)}

/* ── SZAKASZPONTSZÁMOK ──────────────────────────────── */
.sc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.sc-item{background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:12px}
.sc-name{font-size:.75rem;color:var(--text-muted);margin-bottom:5px;line-height:1.3}
.sc-bar{height:3px;background:var(--surface-3);border-radius:2px;overflow:hidden;margin-bottom:4px}
.sc-fill{height:100%;border-radius:2px;background:var(--accent)}
.sc-pct{font-family:var(--font-mono);font-size:.79rem;color:var(--text-secondary)}
.sc-item.nodata .sc-bar{background:repeating-linear-gradient(90deg,var(--chart-nodata) 0 4px,transparent 4px 8px)}
.sc-item.nodata .sc-pct{color:var(--text-muted);font-style:italic}

/* ── SAJÁT SZAVAID ──────────────────────────────────── */
.own-list{display:flex;flex-direction:column;gap:16px}
.own-item{border-left:2px solid var(--accent-border);padding-left:14px}
.own-q{font-size:.82rem;color:var(--text-muted);margin-bottom:4px}
.own-a{font-size:.93rem;color:var(--text-primary);line-height:1.65;white-space:pre-wrap}

/* ── MEGBÍZHATÓSÁGI FIGYELMEZTETÉS ──────────────────── */
.res-warn{
  background:var(--accent-soft);border:1px solid var(--accent-border);
  border-left:3px solid var(--accent);border-radius:var(--radius);
  padding:14px 18px;margin-bottom:18px;font-size:.89rem;
  color:var(--text-secondary);line-height:1.6;
}
.res-warn strong{color:var(--text-primary)}

/* ── LÁBLÉC-META ────────────────────────────────────── */
.res-meta{margin-top:18px;padding-top:18px;border-top:1px solid var(--border-subtle);font-size:.79rem;color:var(--text-muted);font-family:var(--font-mono);line-height:1.7}
.res-disclaimer{margin-top:24px;padding:14px 18px;border-top:1px solid var(--border-subtle);font-size:.79rem;color:var(--text-muted);text-align:center;line-height:1.6}

/* ── RESZPONZÍV ─────────────────────────────────────── */
@media (max-width:900px){
  .res-grid{grid-template-columns:1fr}
  .res-body{padding:22px 14px}
  .res-hero{padding:28px 22px}
  .hero-role{font-size:1.6rem}
  .sc-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .res-hdr{padding:12px 14px;flex-wrap:wrap}
  .res-body{padding:16px 10px}
  .rc{padding:18px 14px}
  .res-hero{padding:22px 16px}
  .hero-role{font-size:1.35rem}
  .sw-grid{grid-template-columns:1fr}
  .sc-grid{grid-template-columns:1fr}
  .db-lbl{width:110px;font-size:.79rem}
}

/* ── A címlap kitöltöttségi térképe ───────────────────────
   A stílus a KONTÉNERTŐL FÜGGETLEN: a táblázat előbb a riport-vázlatban élt,
   most a címlap-fejezetben. Ha a szabály a konténerhez kötődne, a költözés
   némán elvinné a formázást. */
.ro-sub { font-size: .95rem; margin: 0 0 8px; text-align: left; }
.ro-table { border-collapse: collapse; width: 100%; font-size: .85rem; }
.ro-table th,
.ro-table td {
  border-bottom: 1px solid var(--border); padding: 4px 8px;
  text-align: left; font-weight: 400;
}
.ro-table tr[data-entitled="false"],
.ro-table tr[data-available="false"] { color: var(--text-dim); }
.ro-code { margin: 14px 0 0; font-size: .82rem; color: var(--text-dim); }

/* ── Fejezetek (Riport 2.0 nézet) ─────────────────────────
   Az állapotjelölés nem díszítés: a zárolt, a meg nem írt és a nem mért
   fejezet háromféle dolgot jelent, és háromféle teendőt (vagy éppen
   teendő-hiányt) von maga után. */
.res-loading { color: var(--text-dim); padding: 24px 0; }
.rc[data-status] .ch-state {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-dim); margin: 0 0 12px;
}
.rc[data-status="ready"] .ch-state { color: var(--accent); }
/* A „még nincs kész" fejezet jelölése – ÁTTETSZŐSÉG NÉLKÜL.
 *
 * Korábban `opacity:.82` jelezte, hogy a fejezet nem áll rendelkezésre. Az
 * áttetszőség viszont a fejezet MINDEN szövegére rátelepszik, és csendben
 * levisz mindent a kontrasztküszöb alá: a mérés szerint a `--text-muted`
 * önmagában 5,15:1, 82%-os áttetszőséggel viszont már csak 3,61:1. Vagyis az
 * áttetszőség pont azt tette olvashatatlanná, amit el akart halványítani.
 *
 * Az állapotot ezért kerettel jelöljük – ugyanúgy, ahogy a nyomtatott riport
 * teszi (`.ksk-section[data-status=...]` a render.ts-ben). Egy jelölés, két
 * felületen ugyanaz. */
.rc[data-status="unavailable"],
.rc[data-status="locked"],
.rc[data-status="not_measured"],
.rc[data-status="omitted"] {
  border-left: 3px solid var(--border);
  padding-left: 14px;
}
.ch-promise { color: var(--text-dim); margin: 0 0 8px; }
.ch-note, .ch-action { color: var(--text-dim); font-size: .88rem; margin: 0 0 6px; }
.ch-block-t { font-size: .98rem; margin: 18px 0 6px; }
.ch-block-b { margin: 0 0 10px; white-space: pre-line; }