/* Wynik testu (PL i EN, osobna strona /test-ai/result/): wygląd strony testu i Rankingu. Działa razem z landing.css
   (tokeny, pismo, hero, nawigacja, sekcje, karty, oś, stopka); test-ai.js rysuje wynik i pożycza nawigację i stopkę
   strony. Komponenty jak na stronach Ranking (ranking.css) i Firma (company.css).
   Sekcje pod hero na przemian białe i czarne (test-ai.js), więc kolory komponentów biorą się z tokenów sekcji. */

/* ---------- SEKCJE ---------- */
/* --sub: tekst drugiego planu, --accent: fiolet, --tint: tło wierszy i kart, --track: pusty pasek */
.res .sec{border-top:0}
.res .light{background:#fff;color:var(--ink);--sub:var(--gray-on-light);--accent:var(--violet-on-light);--tint:#f4f4f4;--track:#ececec}
.res .dark{background:var(--ink);color:var(--h-fg);--sub:var(--gray-on-dark);--accent:var(--violet-on-dark);--tint:rgba(255,255,255,.07);--track:rgba(255,255,255,.16)}
.res .dark .label{color:var(--gray-on-dark)}
.res .sec h2{margin-top:var(--sp-2)}
.sec-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--sp-5);align-items:start}
.sec-head .copy{margin-top:var(--sp-3);font-size:var(--fs-base);line-height:24px;text-wrap:pretty;overflow-wrap:anywhere}
.sec-head .copy + .copy{margin-top:var(--sp-1)}
.res .h3{font-size:var(--fs-base);line-height:24px;font-weight:500}
.res .block{margin-top:var(--sp-5)}
.res .note{margin-top:var(--sp-2);font-size:var(--fs-xs);line-height:20px;color:var(--sub)}
.res .cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);margin-top:var(--sp-4)}

/* przyciski: biały na czarnym (landing.css), czarny na białym, obrys w kolorze tekstu */
.res button.btn{border:0;cursor:pointer;font-family:inherit}
.res .light .btn:not(.ghost){background:var(--ink);color:#fff}
.res .btn.ghost{background:none;color:inherit;box-shadow:inset 0 0 0 var(--line-w) currentColor}
.res .btn:disabled{opacity:.5;cursor:default}
.res a.back{display:inline-block}
.res .light .back{color:var(--gray-on-light)}
.res .light .back:hover{color:var(--ink)}
.res .light :focus-visible{outline-color:var(--violet-on-light)}
.res .dark :focus-visible{outline-color:#fff}

/* znaki poziomów (kolory jak schodki strony testu i słupki Rankingu) */
.res .l1{--c0:#10175a;--c1:#2e3a96;--c2:#6f8cff}
.res .l2{--c0:#2c6410;--c1:#6f9a12;--c2:#a9cc22}
.res .l3{--c0:#b5320e;--c1:#e0661c;--c2:#f7a548}
.res .l4{--c0:#a10d58;--c1:#e5197b;--c2:#ff78bb}
.res .l5{--c0:#221a6e;--c1:#5b49c4;--c2:#b4a8ff}
.res .l3 .si [fill="var(--c0)"]{fill:#fff}

/* ---------- HERO ---------- */
/* Jak hero Rankingu (bez tła z chipami, treść wyznacza wysokość): etykieta, wynik, miejsce jako nagłówek,
   poziom (znak i nazwa jak w Rankingu), opis poziomu; dołączenie do rankingu i powtórka testu. */
.hero.sub{min-height:0;padding:calc(80px + var(--sp-6)) var(--gut) var(--sp-6)}
.res .hero-copy .score{display:flex;justify-content:center;align-items:baseline;gap:var(--sp-1);margin-top:var(--sp-s);font-variant-numeric:tabular-nums}
.res .hero-copy .score b{font-size:96px;line-height:88px;font-weight:500;letter-spacing:-.04em}
.res .hero-copy .score span{font-size:var(--fs-h2);line-height:40px;color:var(--gray-on-dark)}
.res .hero-copy h1{font-variant-numeric:tabular-nums}
.res .hero-copy .lvl{display:inline-flex;align-items:center;gap:var(--sp-1);font-weight:500}
.res .hero-copy .lede{margin-top:var(--sp-2)}
.res .hero-copy .lede + .lede{margin-top:var(--sp-1)}
/* podpis pod „Zrób test ponownie”: element opisuje sąsiada, więc bliżej niż odstęp między akcjami */
.res .hero-actions .hint{max-width:30em;margin-top:calc(var(--sp-1) * -1);font-size:var(--fs-xs);line-height:20px;color:var(--gray-on-dark)}
/* dołącz od razu: pod wynikiem jedno pole (pseudonim już w nim jest) i przycisk; po dołączeniu „Jesteś w rankingu jako…” */
.qjoin{display:grid;gap:var(--sp-1);width:min(560px,100%);margin-bottom:var(--sp-1);text-align:inherit}
.qjoin label{font-weight:500;line-height:24px}
.qjoin__row{display:flex;gap:var(--sp-1)}
.qjoin input{flex:1;min-width:0;padding:11px var(--sp-2);border:var(--line-w) solid var(--gray-on-dark);border-radius:4px;background:none;color:var(--h-fg);font:inherit;line-height:24px}
.qjoin input:hover{border-color:var(--h-fg)}
.qjoin input:focus{outline:0;border-color:var(--violet-on-dark);box-shadow:inset 0 0 0 var(--line-w) var(--violet-on-dark)}
.res .hero-copy .qjoin .hint{max-width:none;margin:0;text-align:inherit;text-wrap:pretty}
.qjoin .err{color:#ff8f87;font-size:var(--fs-xs);line-height:20px}
/* kroki 01 Test → 02 Ranking → 03 E-mail → 04 Zaproś nad formularzem: zrobione w fiolecie, bieżący biały, następne szare */
.steps{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-1) var(--sp-2);margin:0 0 var(--sp-2);padding:0;list-style:none;font-size:var(--fs-xs);line-height:20px;color:var(--gray-on-dark)}
.steps li{display:flex;align-items:center;gap:8px}
.steps li + li::before{content:"→";margin-right:var(--sp-1);opacity:.6;font-weight:400}
.steps b{font-weight:600;font-variant-numeric:tabular-nums}
.steps .done{color:var(--violet-on-dark)}
.steps .on{color:var(--h-fg);font-weight:500}
.res .hero-copy .joined-as{margin-top:0;font-weight:500}
.res .hero-copy .joined-as a{color:inherit;font-weight:400;text-decoration:underline;text-underline-offset:4px}
.qjoin .joined-as{margin-bottom:var(--sp-2)}
.qjoin .chk{gap:10px;font-size:var(--fs-xs);line-height:20px;text-align:left}
.qjoin .chk input{width:16px;height:16px;margin-top:2px}
.res .hero-copy .qjoin .hint a,.res .hero-copy .joined-as a{color:inherit;text-decoration:underline;text-underline-offset:4px}
/* the marketing consent on its own, under "Zaproś innych" (and #consent from the result e-mail) */
.qmkt{margin-top:var(--sp-2);padding-top:var(--sp-2);border-top:var(--line-w) solid rgba(255,255,255,.18)}
.qmkt p{margin:0}
.qmkt .btn{padding:8px 16px}

/* ---------- ROZKŁAD WYNIKÓW ---------- */
/* Jak na stronie Ranking: kluczowe liczby obok tytułu, 20 słupków w kolorach poziomów, Twój w pełnym kolorze
   z tabliczką. Do tego przerywana linia na progu następnego poziomu, z podpisem nad słupkami. */
.res .figures{gap:var(--sp-3)}
.res .figures li{grid-template-columns:128px minmax(0,1fr)}
.res .figures p{color:inherit}
.res .dark .figures .fig{color:var(--violet-on-dark)}
.rdist{margin-top:var(--sp-5)}
.dist__bars{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));column-gap:var(--sp-1);align-items:end;height:280px;padding-top:96px}
.dist__bars li{position:relative;height:100%;display:flex;align-items:flex-end}
.dist__bars i{display:block;width:100%;border-radius:6px 6px 0 0;background:radial-gradient(90% 70% at 14% 0%,var(--c2) 0,transparent 70%),linear-gradient(160deg,var(--c1),var(--c0))}
.rdist.mine .dist__bars li:not(.you) i{opacity:.4}
.you-tag{position:absolute;z-index:1;left:50%;bottom:calc(var(--h) + var(--sp-1));transform:translateX(-50%);padding:4px 12px;border-radius:999px;background:var(--ink);color:#fff;font-weight:500;line-height:24px;white-space:nowrap;font-variant-numeric:tabular-nums}
.pot{position:absolute;left:calc(var(--sp-1) / -2 - 1px);top:-72px;bottom:0;border-left:2px dashed var(--accent)}
.pot b{position:absolute;bottom:100%;left:-2px;padding-bottom:4px;font-size:var(--fs-xs);line-height:20px;font-weight:500;color:var(--accent);white-space:nowrap}
.pot.end b{left:auto;right:0}
.dist__names{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--sp-1);margin-top:var(--sp-3)}
.dist__names li{display:flex;align-items:center;justify-content:center;gap:var(--sp-1);font-weight:500;line-height:24px}
.rdist figcaption{margin-top:var(--sp-1)}

/* ---------- DOŁĄCZ DO RANKINGU ---------- */
/* Pola jak w okienku „Wróć do swojego wyniku” i wyszukiwarce Rankingu: cienka ramka, na czarnym bez tła. */
.join{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);max-width:760px;margin-top:var(--sp-5)}
.join .chk,.join .err,.join .go{grid-column:1 / -1}
.join .note{align-self:end;margin:0}
/* align-content:start: a taller neighbour (e.g. a password manager's icon next to the e-mail) must not stretch the label and the input */
.field{display:grid;gap:var(--sp-1);align-content:start}
.field label{font-weight:500;line-height:24px}
.field input,.copyrow input{width:100%;min-width:0;padding:9px var(--sp-2);border:var(--line-w) solid var(--sub);border-radius:4px;background:none;color:inherit;font:inherit;line-height:24px;transition:border-color .2s}
.field input:hover{border-color:currentColor}
.field input:focus,.copyrow input:focus{outline:0;border-color:var(--accent);box-shadow:inset 0 0 0 var(--line-w) var(--accent)}
.chk{display:flex;gap:12px;align-items:flex-start;line-height:24px;cursor:pointer}
.chk input{flex:none;width:18px;height:18px;margin:3px 0 0;accent-color:var(--accent)}
.res .err{margin:0;line-height:24px;color:#b3261e}
.res .dark .err{color:#ff8f87}
.res .err[hidden]{display:none}
.invite{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--sp-5);align-items:end;margin-top:var(--sp-5)}
.invite p:not(.h3){margin-top:var(--sp-1);line-height:24px}
.copyrow{display:flex;gap:var(--sp-2)}
.copyrow input{flex:1;font-size:var(--fs-xs)}
.toast{font-size:var(--fs-xs);line-height:20px;color:var(--accent)}
.toast:empty{display:none}
.invite .toast{display:block;margin-top:var(--sp-1)}
/* Zapisz wynik: pseudonim i e-mail; zgody dopiero po wpisaniu e-maila; reszta pól pod „Więcej opcji”; pod formularzem
   kod osobisty. „Szczegóły” wyniku zwinięte tak samo. */
.join .wide,.join .consents,.join .opts{grid-column:1 / -1}
.join .note.wide{margin-top:calc(var(--sp-2) * -1)}
.consents{display:grid;gap:var(--sp-2)}
.consents[hidden]{display:none}
:is(.opts,.more) > summary{display:flex;align-items:center;gap:var(--sp-1);width:max-content;max-width:100%;font-weight:500;line-height:24px;cursor:pointer;list-style:none}
:is(.opts,.more) > summary::-webkit-details-marker{display:none}
:is(.opts,.more) > summary .chev{flex:none;width:20px;height:20px;transition:transform .2s}
:is(.opts,.more)[open] > summary .chev{transform:rotate(180deg)}
.opts > .join{margin-top:var(--sp-3)}
.more{margin-top:var(--sp-4)}
.more > div{margin-top:var(--sp-3)}
.codebox{max-width:760px;margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:var(--line-w) solid var(--line)}
.codebox .code{margin-top:var(--sp-1);font-size:var(--fs-h2);font-weight:600;line-height:1.2;letter-spacing:.04em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.codebox .share{margin-top:var(--sp-2)}
/* Zaproś innych: tekst wyzwania (to, co pójdzie w poście) nad przyciskami serwisów */
.res .dare .copy{max-width:40em;margin-top:var(--sp-1)}
.res .dare .shr-row{margin-top:var(--sp-3)}
.res .also{margin-top:var(--sp-3);line-height:24px}
.res .also a{color:inherit;text-underline-offset:4px}

/* ---------- NASTĘPNE KROKI ---------- */
/* Kroki jak karty „Jak to działa” (białe na czarnym, szare na białym), oferty jak na stronie Firma. */
.res .cards{margin-top:var(--sp-3)}
.res .light .card{background:var(--tint)}
.res .card p{text-wrap:pretty}
.offer{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--sp-5);align-items:center;margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:var(--line-w) solid var(--line)}
.offer p + p{margin-top:var(--sp-1);line-height:24px}
.offer .btn{justify-self:end}

/* ---------- WYNIK W SZCZEGÓŁACH ---------- */
/* Wymiary z wartością i paskiem, obszary z kreskami głębokości (jak test firmy), umiejętności jako etykiety. */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--sp-5);margin-top:var(--sp-5);align-items:start}
.res .areas{display:block;margin-top:var(--sp-1)}
.res .areas li{display:grid;grid-template-columns:minmax(0,1fr) auto 64px;column-gap:var(--sp-3);align-items:center;min-height:44px}
.res .areas.depth li{grid-template-columns:minmax(0,1fr) auto}
.res .areas .v{text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
.res .areas .v.skipped{font-weight:400;font-size:var(--fs-xs);color:var(--sub)}
.meter{display:block;width:120px;height:6px;border-radius:3px;background:var(--track);overflow:hidden}
.meter i{display:block;height:100%;border-radius:3px;background:var(--accent)}
.pips{display:flex;gap:6px}
.pips i{display:block;width:24px;height:6px;border-radius:3px;background:var(--track)}
.pips i.on{background:var(--accent)}
/* cel (test-ai.js gapList): kreski między „dziś” a „cel” jako sam obrys */
.pips i.goal{background:none;box-shadow:inset 0 0 0 1.5px var(--accent)}
.res .areas.gap li{grid-template-columns:minmax(0,1fr) auto auto}
.res .areas.gap .v{font-weight:400;font-size:var(--fs-xs);color:var(--sub)}
/* „Dlaczego nie więcej?”: obszar, zaznaczony krok i to, co liczymy */
.why-less{display:grid;gap:var(--sp-1);margin-top:var(--sp-1);padding-left:20px;list-style:disc;line-height:24px}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-2)}
.chips li{padding:4px 14px;border-radius:999px;box-shadow:inset 0 0 0 var(--line-w) var(--sub);line-height:24px}

/* ---------- PYTANIA KONTROLNE ---------- */
/* Jak na stronie Firma: pytanie w wierszu, lepsza odpowiedź po rozwinięciu. */
.checks{display:grid;gap:var(--sp-1);margin-top:var(--sp-5)}
.checks details,.checks .row{border-radius:var(--r);background:var(--tint)}
.checks summary,.checks .row{display:grid;grid-template-columns:minmax(0,1fr) auto 20px;column-gap:var(--sp-3);align-items:center;padding:var(--sp-2) var(--sp-3);cursor:pointer;list-style:none}
.checks .row{cursor:default}
.checks summary::-webkit-details-marker{display:none}
.checks .q small{display:block;font-size:var(--fs-xs);line-height:20px;color:var(--sub)}
.checks .q span{display:block;margin-top:2px;font-weight:500;line-height:24px}
.checks .st{font-size:var(--fs-xs);line-height:20px;color:var(--sub);white-space:nowrap}
.checks .st.ok{color:var(--accent)}
.checks .chev{width:20px;height:20px;color:var(--sub);transition:transform .35s var(--ease)}
.checks details[open] .chev{transform:rotate(180deg)}
.checks .better{padding:0 var(--sp-3) var(--sp-3)}
.checks .better li + li{margin-top:var(--sp-2)}
.checks .better b{font-weight:500}
.checks .better p{line-height:24px}
.checks .better .why{color:var(--sub)}
.checks .better ol{padding-left:20px;list-style:decimal}
@media (prefers-reduced-motion:reduce){.checks .chev{transition:none}}

/* ---------- ODZNAKA, UDOSTĘPNIANIE, KOD ---------- */
.badgeno{font-weight:500;font-variant-numeric:tabular-nums}
.sec-head .badgeno{margin-top:var(--sp-2)}
.mybadge{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5);margin-top:var(--sp-5)}
.mybadge img{display:block;width:100%;max-width:440px;height:auto}
.mybadge > div{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-1)}
.mybadge .li{margin:0 0 var(--sp-2)}
/* "Dodaj do profilu LinkedIn": LinkedIn's mark before the text (share.js icons) */
.btn--li{display:inline-flex;align-items:center;justify-content:center;gap:10px}
.btn--li svg{display:block;width:18px;height:18px;flex:none}
.res .hero-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2)}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:var(--sp-4)}
.res .li{display:grid;gap:var(--sp-2);justify-items:start;margin-top:var(--sp-2)}
/* "Co wpisać, jeśli LinkedIn nie uzupełni pól": a full-size, underlined line with the chevron of „Więcej opcji” */
.lihow > summary{display:flex;align-items:center;gap:var(--sp-1);width:max-content;max-width:100%;font-weight:500;line-height:24px;cursor:pointer;list-style:none}
.lihow > summary::-webkit-details-marker{display:none}
.lihow > summary span{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.lihow > summary:hover span{text-decoration-thickness:2px}
.lihow > summary .chev{flex:none;width:20px;height:20px;transition:transform .2s}
.lihow[open] > summary .chev{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.lihow > summary .chev{transition:none}}
.lihelp{font-size:var(--fs-xs);line-height:20px;color:var(--sub);display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px var(--sp-2);margin-top:var(--sp-2)}
.lihelp dt{font-weight:500}
.lihelp dd{margin:0;word-break:break-all}
.lihelp dd.words{word-break:normal}
.lihelp .linkish{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lihelp dd a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.res h2.code{letter-spacing:.04em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* ---------- WĘŻSZY EKRAN ---------- */
@media (max-width:900px){
  .hero.sub{padding:calc(80px + var(--sp-5)) var(--gut) var(--sp-5)}
  .sec-head,.split,.invite,.offer{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
  .offer .btn{justify-self:start}
}

/* ---------- TELEFON ---------- */
/* Zasady z ranking.css i company.css: jedna oś do lewej, wynik 2 × liczba kluczowa (80), kluczowe liczby po dwie
   w rzędzie, nazwy poziomów jako legenda pod osią, tabliczka „Ty” w ekranie, przyciski na całą szerokość. */
@media (max-width:640px){
  .hero.sub{padding:calc(64px + var(--sp-4)) var(--gut) var(--sp-5)}
  .steps{justify-content:flex-start}
  .qjoin__row{flex-direction:column}
  .qjoin .btn{display:block;width:100%;padding:12px 24px;text-align:center}
  .res .hero-copy .score{justify-content:flex-start}
  .res .hero-copy .score b{font-size:80px;line-height:80px}
  .res .hero-actions .hint{margin-top:0}
  .sec-head .copy{margin-top:var(--sp-2);line-height:26px}

  .res .figures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
  .res .figures li{display:block}
  .res .figures li.rule{display:none}
  .res .figures .fig{display:block;font-size:40px;line-height:40px}
  .res .figures b{margin-top:var(--sp-1);font-size:15px;line-height:22px;text-wrap:balance}
  .res .figures p{font-size:15px;line-height:24px;color:var(--sub);text-wrap:pretty}

  .rdist{display:flex;flex-direction:column;margin-top:var(--sp-4)}
  .dist__bars{column-gap:4px;height:230px;padding-top:72px}
  .dist__bars i{border-radius:4px 4px 0 0}
  .dist__bars li:nth-child(-n+2) .you-tag{left:0;transform:none}
  .dist__bars li:nth-last-child(-n+2) .you-tag{left:auto;right:0;transform:none}
  /* podpis linii jest w kluczowych liczbach nad wykresem; na telefonie zostaje sama linia */
  .pot{left:-3px;top:-24px}
  .pot b{display:none}
  .dist__names{order:3;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--sp-1);column-gap:var(--sp-2)}
  .dist__names li{justify-content:flex-start;font-weight:400}
  .rdist figcaption{order:4;margin-top:var(--sp-2)}

  .join{grid-template-columns:minmax(0,1fr);gap:var(--sp-2);margin-top:var(--sp-4)}
  .join .note{margin-top:calc(var(--sp-1) * -1)}
  :is(.res .cta,.join,.offer,.share,.res .li,.copyrow) .btn{display:block;width:100%;padding:12px 24px;text-align:center}
  .res .cta{flex-direction:column;align-items:stretch;gap:var(--sp-1)}
  .res .cta .back{align-self:flex-start;padding:12px 0}
  .res .light .btn:not(.ghost):active{background-color:#2a2a2a}
  .res .btn.ghost:active{background-color:rgba(127,127,127,.12)}
  .copyrow{flex-direction:column;gap:var(--sp-1)}
  .res .li{justify-items:stretch}
  .res .hero-btns{flex-direction:column;align-items:stretch;gap:var(--sp-1)}
  .res .hero-btns .btn,.res .li .btn.btn--li{display:flex}
  .mybadge > div{align-items:stretch;width:100%}
  .mybadge > div .back{align-self:flex-start}

  .offer{margin-top:var(--sp-3);padding-top:var(--sp-3)}
  .res .areas li{column-gap:var(--sp-2)}
  .meter{width:72px}
  .checks{margin-top:var(--sp-4)}
  .checks summary,.checks .row{column-gap:var(--sp-2);padding:var(--sp-2)}
  .checks .better{padding:0 var(--sp-2) var(--sp-2)}
  .mybadge{margin-top:var(--sp-4)}
}

/* „pseudonim zajęty”: droga do własnego, starszego wyniku (test-ai.js saveProfile, login → POST /merges) */
.res .err .nick-mine{display:block;margin-top:4px}