/* ============================================================
   Test ATS — „prześwietlenie” CV. Komponenty (btn, seg, meter, kw,
   toast) pochodzą z kreator.css; tu tylko układ tej strony.
   ============================================================ */

.xr-app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.xr-app main { flex: 1 0 auto; }
.xr-app .bar .btn.primary { text-decoration: none; }

/* ---------- Ekran startowy ---------- */
.xr-intro {
  max-width: var(--max); margin: 0 auto; padding: 64px 28px 72px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
@media (max-width: 880px) { .xr-intro { grid-template-columns: 1fr; gap: 32px; padding-top: 36px; } }
.xr-intro h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.08; letter-spacing: -.01em; margin: 0; max-width: 15ch; text-wrap: balance; }
.xr-intro .lead { font-size: 1.06rem; color: var(--ink-soft); margin: 20px 0 0; max-width: 48ch; }
.xr-checks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; }
.xr-checks li { position: relative; padding-left: 22px; font-size: .95rem; }
.xr-checks li::before { content: ""; position: absolute; left: 3px; top: .55em; width: 7px; height: 7px; background: var(--accent); border-radius: 1px; }

.xr-drop-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.xr-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  min-height: 300px; padding: 32px; border-radius: 8px; cursor: pointer; color: var(--ink);
  border: 1.5px dashed var(--line-strong);
  background-color: var(--paper-raised);
  transition: border-color .15s ease, background-color .15s ease;
}
.xr-drop svg { width: 56px; height: 56px; color: var(--accent); margin-bottom: 6px; }
.xr-drop b { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; }
.xr-drop span { color: var(--ink-soft); }
.xr-drop u { color: var(--accent); text-underline-offset: 3px; }
.xr-drop:hover, .xr-drop.is-over { border-color: var(--accent); background-color: var(--accent-soft); }
#xr-file:focus-visible + .xr-privacy, .xr-drop:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.xr-privacy { margin: 0; font-size: .84rem; color: var(--ink-soft); text-align: center; }
#xr-demo { align-self: center; }

/* ---------- Wyniki ---------- */
.xr-result { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); border-top: 1px solid var(--line); }
@media (max-width: 980px) { .xr-result { grid-template-columns: minmax(0, 1fr); } }
.xr-doc {
  position: sticky; top: 0; align-self: start; max-height: 100vh; overflow: auto; padding: 18px 28px 32px;
  background-color: var(--paper-deep);
}
@media (max-width: 980px) { .xr-doc { position: static; max-height: none; padding: 16px; } }
.xr-doc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 8px; }
.xr-file { font-size: .86rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; margin-right: auto; }
.xr-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: .78rem; color: var(--ink-soft); margin-bottom: 10px; }
.xr-legend span { display: inline-flex; align-items: center; gap: 6px; }
.xr-legend i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.lg-run { background: var(--accent); }
.lg-jump { background: var(--danger); }
.xr-stage { position: relative; background: #fff; box-shadow: 0 1px 2px rgba(15,18,24,.06), 0 18px 48px rgba(15,18,24,.16); max-width: 820px; margin: 0 auto; }
.xr-stage canvas { display: block; width: 100%; height: auto; }
.xr-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.xr-stage.hide-path .ov-path, .xr-stage.hide-path .ov-badge { display: none; }

/* nakładka: kolory stałe (arkusz jest zawsze biały) */
.ov-box { fill: rgba(44, 95, 138, .07); stroke: rgba(44, 95, 138, .45); stroke-width: .6; }
.ov-box.is-jump { fill: rgba(163, 58, 46, .09); stroke: rgba(163, 58, 46, .7); }
.ov-path { fill: none; stroke: #2C5F8A; stroke-width: 1.1; stroke-linejoin: round; opacity: .55; }
.ov-seg-jump { fill: none; stroke: #A33A2E; stroke-width: 1.4; opacity: .85; stroke-dasharray: 3 2; }
.ov-badge circle { fill: #2C5F8A; }
.ov-badge.is-jump circle { fill: #A33A2E; }
.ov-badge text { fill: #fff; font: 600 6.2px 'IBM Plex Sans', sans-serif; text-anchor: middle; dominant-baseline: central; }
.ov-run.is-hot .ov-box { fill: rgba(184, 130, 59, .28); stroke: #B8823B; stroke-width: 1.2; }

.xr-panel { padding: 26px 28px 48px; min-width: 0; }
@media (max-width: 520px) { .xr-panel { padding: 20px 16px 40px; } }
.xr-verdict { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.xr-score { font-family: var(--serif); font-size: 3rem; font-weight: 600; line-height: 1; font-variant-numeric: lining-nums tabular-nums; grid-row: span 2; }
.xr-score small { font-size: 1.2rem; color: var(--ink-faint); font-weight: 500; }
.xr-verdict h2 { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; margin: 0; text-wrap: balance; }
.xr-verdict p { margin: 0; font-size: .86rem; color: var(--ink-soft); }
.xr-verdict.tone-bad .xr-score { color: var(--danger); }
.xr-verdict.tone-warn .xr-score { color: var(--gold); }
.xr-verdict.tone-ok .xr-score { color: var(--ok); }
.xr-cta { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 6px; }
.xr-cta small { flex-basis: 100%; font-size: .78rem; color: var(--ink-faint); }
.xr-tabs { display: flex; gap: 2px; margin: 18px 0 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.xr-tabs button { flex: none; border: none; background: transparent; padding: 10px 12px 11px; font-size: .88rem; font-weight: 500; color: var(--ink-soft); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.xr-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.xr-tabpanel { padding-top: 16px; }
.xr-muted { font-size: .86rem; color: var(--ink-soft); margin: 0 0 12px; }

/* Wyniki testów */
.findings { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.finding { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 12px 14px; border-radius: 6px; background: var(--paper-raised); border: 1px solid var(--line); }
.finding .sev { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 700; color: #fff; margin-top: 1px; }
.finding.bad { border-left: 3px solid var(--danger); }
.finding.bad .sev { background: var(--danger); }
.finding.warn { border-left: 3px solid var(--gold); }
.finding.warn .sev { background: var(--gold); }
.finding.ok .sev { background: var(--ok); }
.finding b { display: block; font-size: .92rem; font-weight: 600; }
.finding p { margin: 3px 0 0; font-size: .84rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.passed { margin-top: 12px; }
.passed summary { cursor: pointer; font-size: .86rem; color: var(--ink-soft); padding: 6px 0; }
.passed .findings { margin-top: 6px; }

/* Tekst oczami ATS */
.ats-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.ats-page { font-size: .76rem; font-weight: 600; color: var(--ink-faint); margin: 14px 0 6px; }
.ats-text { list-style: none; padding: 0; margin: 0; font-size: .86rem; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 6px; }
.ats-text li { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 5px 10px 5px 6px; border-bottom: 1px solid var(--line); cursor: default; }
.ats-text li:last-child { border-bottom: none; }
.ats-text li:hover, .ats-text li.is-hot { background: var(--gold-soft); }
.ats-text .no { font-family: var(--mono); font-size: .72rem; color: #fff; background: var(--accent); border-radius: 999px; height: 18px; min-width: 22px; padding: 0 5px; display: inline-grid; place-items: center; justify-self: start; margin-top: 1px; }
.ats-text li.is-jump .no { background: var(--danger); }
.ats-text .tx { overflow-wrap: anywhere; }
.ats-text li.head .tx { font-weight: 600; }
.ats-text .sec { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 3px; font-size: .7rem; font-weight: 600; background: var(--accent-soft); color: var(--accent); vertical-align: 1px; }
.ats-text mark { background: transparent; border-bottom: 2px solid; padding: 0 1px; color: inherit; }
.ats-text mark.m-contact { border-color: var(--ok); }
.ats-text mark.m-date { border-color: var(--accent); }
.ats-text .junk { display: inline-block; padding: 0 4px; border-radius: 3px; background: var(--danger-soft); color: var(--danger); font-family: var(--mono); font-size: .8em; }
.ats-key { display: flex; flex-wrap: wrap; gap: 14px; font-size: .76rem; color: var(--ink-soft); margin-top: 10px; }
.ats-key i { display: inline-block; width: 16px; border-bottom: 2px solid; margin-right: 5px; vertical-align: 3px; }

.xr-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 20px 28px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--ink-faint); }