/* Ekrany testu (PL i EN, test osoby i test firmy): wygląd strony testu, Rankingu i wyniku. Działa razem z arkuszem
   strony (landing.css na stronie testu, company.css na stronie Firma: tokeny, pismo, nawigacja, przyciski):
   test-ai.js włącza go w showApp(true) i pożycza nawigację strony do czarnego paska u góry (testShell).
   Odpowiedzi jak wiersze pytań kontrolnych na stronie Firma (szare tło), wybór w fiolecie; na dole stały pasek
   Wstecz / Dalej. */

/* ---------- PASEK U GÓRY I TŁO ---------- */
.thead{position:relative;height:80px;background:var(--ink);color:var(--h-fg)}
/* w trakcie testu w pasku tylko logo i „Wyjdź z testu” (testShell), bez menu, języka i udostępniania */
.thead .nav .wrap > nav,.thead .nav .burger,.thead .shr-nav{display:none}
.t-exit{margin-left:auto;padding:8px 14px;border:1.5px solid var(--h-fg);border-radius:0;background:none;color:var(--h-fg);font:700 13px/16px Inter,system-ui,sans-serif;letter-spacing:.03em;cursor:pointer;transition:background-color .2s,color .2s}
.t-exit:hover{background:var(--h-fg);color:var(--ink)}
.t-exit:focus-visible{outline:2px solid var(--h-fg);outline-offset:3px}
/* --tint: tło odpowiedzi, --edge: obrys chipów i pasków, --track: pusty pasek, --pick: tło zrobionego obszaru */
.tbody{--tint:#f4f4f4;--edge:#d6d6d6;--track:#ececec;--pick:color-mix(in srgb,var(--violet-on-light) 12%,#fff);
  min-height:calc(100vh - 80px);min-height:calc(100dvh - 80px);background:#fff;color:var(--ink)}
.tbody :focus-visible{outline:2px solid var(--violet-on-light);outline-offset:3px}

/* ---------- EKRAN ---------- */
/* Rytm jak w sekcjach: etykieta 16 nagłówek 24 opis, między pytaniami 64; miejsce na dole na stały pasek */
.test{padding-top:var(--sp-5);padding-bottom:calc(var(--sp-6) + 80px)}
.tstep{max-width:800px}
/* kroki osoby (01 Test → 02 Ranking → 03 E-mail → 04 Zaproś) na pierwszym i ostatnim ekranie testu, jak w hero wyniku */
.tstep .steps{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-2);margin:0 0 var(--sp-3);padding:0;list-style:none;font-size:var(--fs-xs);line-height:20px;color:var(--gray-on-light)}
.tstep .steps li{display:flex;align-items:center;gap:8px}
.tstep .steps li + li::before{content:"→";margin-right:var(--sp-1);opacity:.6;font-weight:400}
.tstep .steps b{font-weight:600}
.tstep .steps .on{color:var(--violet-on-light);font-weight:500}
.tstep .kick{font-size:var(--fs-eyebrow);line-height:20px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-on-light)}
.tstep h2{margin-top:var(--sp-2)}
/* sytuacja z pracy to dłuższe zdanie niż nagłówek sekcji: mniejsze pismo, luźniejsza interlinia; tak szeroka jak wiadomość pod nią (.msg) */
.tstep h2.case{font-size:clamp(22px,2.6vw,28px);line-height:1.3;letter-spacing:-.02em;max-width:760px}
.tstep > p:not(.kick):not(.err){margin-top:var(--sp-3);max-width:40em;line-height:24px;color:var(--gray-on-light)}
.tbody .note{font-size:var(--fs-xs);line-height:20px;color:var(--gray-on-light)}
.tbody .err{margin-top:var(--sp-3);line-height:24px;color:#b3261e}
.tbody .err[hidden]{display:none}
.tbody button.btn{border:0;cursor:pointer;font-family:inherit}
.tbody .btn.ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 var(--line-w) var(--ink)}
.tbody .lnk{padding:0;border:0;background:none;font:inherit;font-size:var(--fs-xs);line-height:20px;color:var(--gray-on-light);text-decoration:underline;text-underline-offset:4px;cursor:pointer;transition:color .2s}
.tbody .lnk:hover{color:var(--ink)}

/* pytanie: nazwa jak nagłówek w kartach (16, 500), podpowiedź pod nią jak podpis */
.q{min-width:0;margin:var(--sp-5) 0 0;padding:0;border:0}
.q legend{padding:0;font-weight:500;line-height:24px}
.q .hint{display:block;margin-top:4px;font-size:var(--fs-xs);line-height:20px;color:var(--gray-on-light)}
.q textarea{display:block;box-sizing:border-box;width:100%;margin-top:var(--sp-2);padding:12px 16px;border:0;border-radius:8px;
  box-shadow:inset 0 0 0 var(--line-w) var(--edge);background:#fff;color:var(--ink);font:inherit;line-height:24px;resize:vertical}
.q textarea:hover{box-shadow:inset 0 0 0 var(--line-w) var(--ink)}
.q textarea:focus-visible{outline:2px solid var(--violet-on-light);outline-offset:2px}

/* ---------- WYBÓR: CHIPY ---------- */
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-2)}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border-radius:999px;box-shadow:inset 0 0 0 var(--line-w) var(--edge);line-height:24px;transition:background-color .2s,box-shadow .2s,color .2s}
.chip:hover span{box-shadow:inset 0 0 0 var(--line-w) var(--ink)}
.chip input:checked + span{background:var(--violet-on-light);color:#fff;box-shadow:none}
.chip input:checked + span::before{content:"✓";margin-right:var(--sp-1)}
.chip input:focus-visible + span{outline:2px solid var(--violet-on-light);outline-offset:3px}

/* ---------- WYBÓR: WIERSZE ---------- */
/* Kroki „jak to robisz”, praktyki, pytania dodatkowe: szary wiersz z kółkiem (kwadratem przy wielu wyborach);
   wybrany biały z fioletowym obrysem, jak „następna” odznaka na stronie Firma. */
.rungs{display:grid;gap:var(--sp-1);margin-top:var(--sp-2)}
.rung{position:relative;display:block;cursor:pointer}
.rung input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.rung > span{position:relative;display:block;padding:var(--sp-2) var(--sp-3) var(--sp-2) 56px;border-radius:var(--r);background:var(--tint);line-height:24px;transition:background-color .2s,box-shadow .2s}
.rung > span::before{content:"";position:absolute;left:var(--sp-3);top:19px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px var(--gray-on-light)}
.rung input[type=checkbox] + span::before{border-radius:4px}
.rung:hover > span{box-shadow:inset 0 0 0 var(--line-w) var(--ink)}
.rung input:checked + span{background:#fff;box-shadow:inset 0 0 0 1.5px var(--violet-on-light)}
.rung input:checked + span::before{background:var(--violet-on-light);box-shadow:inset 0 0 0 4px #fff,0 0 0 1.5px var(--violet-on-light)}
.rung input:focus-visible + span{outline:2px solid var(--violet-on-light);outline-offset:2px}
/* „Nie robię takich zadań”, „Żadne z tych”: bez tła, drugi plan */
.rung--skip > span{background:none;color:var(--gray-on-light)}
.rung--skip:hover > span{box-shadow:inset 0 0 0 var(--line-w) var(--edge)}

/* krok drabinki: „jak robię dziś” (cały wiersz) i z prawej „cel” (jak powinno być, bez punktów); cel czarny,
   żeby nie mylił się z fioletowym wyborem */
.step{position:relative}
.step .rung > span{padding-right:88px}
.goal{position:absolute;right:var(--sp-2);top:12px;min-height:32px;padding:4px 12px;border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 var(--line-w) var(--edge);color:var(--gray-on-light);font:inherit;font-size:var(--fs-xs);line-height:20px;cursor:pointer;transition:background-color .2s,box-shadow .2s,color .2s}
.goal:hover{box-shadow:inset 0 0 0 var(--line-w) var(--ink);color:var(--ink)}
.goal[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}
.goal[aria-pressed=true]::before{content:"✓ "}
.step.is-goal .rung > span{box-shadow:inset 3px 0 0 var(--ink)}
.step.is-goal .rung input:checked + span{box-shadow:inset 0 0 0 1.5px var(--violet-on-light),inset 3px 0 0 var(--ink)}
.q .hint + .hint{margin-top:2px}

/* narzędzia w grupach: nazwa grupy jak mały podpis nad chipami */
.tgroups{display:grid;gap:var(--sp-2);margin-top:var(--sp-2)}
.tgroup .chips{margin-top:4px}
.tgroup__n{font-size:var(--fs-xs);line-height:20px;color:var(--gray-on-light)}

/* pojęcie z objaśnieniem: kropkowane podkreślenie, objaśnienie po stuknięciu */
.term-w{position:relative}
.term{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline dotted;text-decoration-color:var(--gray-on-light);text-underline-offset:4px;cursor:help}
.term[aria-expanded=true]{color:var(--violet-on-light)}
.tip{position:absolute;left:0;top:calc(100% + 6px);z-index:6;width:max-content;max-width:min(320px,70vw);padding:10px 14px;border-radius:var(--r);background:var(--ink);color:#fff;font-size:var(--fs-xs);line-height:20px;font-weight:400;white-space:normal}
.tip[hidden]{display:none}

/* pytanie szczegółowe: przypomnienie sytuacji nad nim */
.deep-of{margin-top:var(--sp-2);max-width:760px;padding:var(--sp-2) var(--sp-3);border-radius:var(--r);background:var(--tint);font-size:var(--fs-xs);line-height:20px;color:var(--gray-on-light)}
.deep-of b{font-weight:500;color:var(--ink)}

/* „Jak to działa”: cztery kroki jak karty z numerami */
.intro{display:grid;gap:var(--sp-2);max-width:760px;margin:var(--sp-4) 0 0;padding:0;list-style:none}
.intro li{display:flex;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--r);background:var(--tint)}
.intro .n{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--violet-on-light);color:#fff;font-size:var(--fs-xs);font-weight:500}
.intro b{font-weight:500;line-height:24px}
.intro p{margin-top:2px;line-height:24px;color:var(--gray-on-light)}
.tstep .intro-skip{margin-top:var(--sp-3);max-width:760px}

/* kolejność kroków: stuknij, by ponumerować */
.order{display:grid;gap:var(--sp-1);justify-items:start;margin-top:var(--sp-2)}
.order__i{display:flex;align-items:center;gap:var(--sp-2);width:100%;padding:var(--sp-2) var(--sp-3);border:0;border-radius:var(--r);background:var(--tint);color:var(--ink);font:inherit;line-height:24px;text-align:left;cursor:pointer;transition:background-color .2s,box-shadow .2s}
.order__i:hover{box-shadow:inset 0 0 0 var(--line-w) var(--ink)}
.order__i b{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px var(--gray-on-light);font-size:var(--fs-xs);line-height:20px;font-weight:500}
.order__i.is-set{background:#fff;box-shadow:inset 0 0 0 1.5px var(--violet-on-light)}
.order__i.is-set b{background:var(--violet-on-light);color:#fff;box-shadow:none}
.order .lnk{margin-top:var(--sp-1)}

/* pytanie dodatkowe pojawia się pod krokami, oddzielone linią */
.fu-slot:not(:empty){margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:var(--line-w) solid var(--edge)}
.fu-slot .q{margin-top:0}
@media (prefers-reduced-motion:no-preference){
  .fu{animation:fu-in .35s var(--ease)}
  @keyframes fu-in{from{opacity:0;transform:translateY(8px)}}
}

/* ---------- MAPA OBSZARÓW I POSTĘP ---------- */
/* Kółka jak numery kart „Jak to działa”: obecny obszar fioletowy, zrobione jasnofioletowe (można wrócić), reszta obrys */
.amap{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-bottom:var(--sp-4)}
.amap__a{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:none;box-shadow:inset 0 0 0 var(--line-w) var(--edge);color:var(--gray-on-light);font:inherit;font-size:var(--fs-xs);line-height:20px;font-weight:500;transition:box-shadow .2s}
.amap__a.is-done{background:var(--pick);color:var(--violet-on-light);box-shadow:none;cursor:pointer}
.amap__a.is-done:hover{box-shadow:inset 0 0 0 var(--line-w) var(--violet-on-light)}
.amap__a.is-on{background:var(--violet-on-light);color:#fff;box-shadow:none}
.prog{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-4);font-size:var(--fs-xs);line-height:20px;color:var(--gray-on-light)}
.prog__bar{flex:1;max-width:320px;height:4px;border-radius:2px;background:var(--track);overflow:hidden}
.prog__bar i{display:block;height:100%;border-radius:2px;background:var(--violet-on-light);transition:width .3s var(--ease)}

/* ---------- SYTUACJA ---------- */
/* Mail, wiadomość, zgłoszenie, notatka: biała karta z cienkim obrysem; typ jak etykieta sekcji. */
.msg{position:relative;display:grid;gap:var(--sp-1);max-width:760px;margin-top:var(--sp-4);padding:var(--sp-3);border-radius:var(--r);box-shadow:inset 0 0 0 var(--line-w) var(--edge)}
.msg__head{display:flex;justify-content:space-between;gap:var(--sp-2);font-size:var(--fs-xs);line-height:20px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-on-light)}
.msg__when{font-weight:400;letter-spacing:0;text-transform:none}
.msg__from{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px var(--sp-1);margin-top:var(--sp-1);line-height:24px}
.msg__from b{font-weight:500}
.msg__from span{font-size:var(--fs-xs);color:var(--gray-on-light)}
.msg__subject{font-weight:500;line-height:24px}
.msg__body{margin-top:var(--sp-1);line-height:24px;white-space:pre-line}
.msg--chat .msg__body{justify-self:start;margin-top:0;padding:var(--sp-1) var(--sp-2);border-radius:4px 16px 16px 16px;background:var(--tint)}
.msg__bubbles{display:grid;gap:6px;margin-top:var(--sp-1)}
.msg__lines{display:grid;gap:4px;margin:var(--sp-1) 0 0;padding-left:20px;line-height:24px}
.msg--doc .msg__body{padding-left:var(--sp-2);box-shadow:inset 3px 0 0 var(--violet-on-light)}
.msg__ring{display:flex;align-items:center;gap:var(--sp-1);font-weight:500;color:var(--violet-on-light)}
.msg__ring svg{width:22px;height:22px}
.msg__stamp{justify-self:start;padding:2px 10px;border-radius:4px;box-shadow:inset 0 0 0 1.5px var(--violet-on-light);color:var(--violet-on-light);font-size:var(--fs-xs);line-height:20px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;transform:rotate(-6deg)}
/* tylko w scenie (test-ai.js playScene): powiadomienie o nowym mailu, „pisze…” na czacie, „Pomiń animację” */
.msg__toast,.msg__typing,.scene-skip{display:none}
.msg.is-scene .msg__toast{position:absolute;right:var(--sp-2);top:calc(-1 * var(--sp-2));display:flex;gap:var(--sp-1);padding:8px 14px;border-radius:var(--r);background:var(--ink);color:#fff;font-size:var(--fs-xs);line-height:20px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.msg.is-scene .msg__toast b{font-weight:500}
.msg.is-scene .msg__typing{display:flex;gap:4px;justify-self:start;padding:12px 14px;border-radius:4px 16px 16px 16px;background:var(--tint)}
.msg__typing i{width:6px;height:6px;border-radius:50%;background:var(--gray-on-light);animation:typing 1s infinite}
.msg__typing i:nth-child(2){animation-delay:.15s}
.msg__typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{50%{transform:translateY(-4px);opacity:.5}}
.msg.is-scene{cursor:pointer}
.msg.is-scene .scene-skip{display:block;justify-self:end}
.msg--ticket{box-shadow:inset 3px 0 0 var(--violet-on-light),inset 0 0 0 var(--line-w) var(--edge)}
.msg--meeting,.msg--doc{background:var(--tint);box-shadow:none}
.msg__files{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-1)}
.file{display:inline-flex;align-items:center;gap:var(--sp-1);padding:4px 12px;border-radius:4px;background:var(--tint);font-size:var(--fs-xs);line-height:20px}
.msg--meeting .file,.msg--doc .file{background:#fff}
.file::before{content:"";width:10px;height:13px;border-radius:2px;background:var(--violet-on-light)}

/* ---------- BRAK POŁĄCZENIA ---------- */
.tbody .box{display:grid;gap:var(--sp-2);justify-items:start;max-width:640px;padding:var(--sp-4);border-radius:var(--r);background:var(--tint)}
.tbody .box .err{margin:0}

/* ---------- PASEK NA DOLE ---------- */
.navbar{position:fixed;left:0;right:0;bottom:0;z-index:5;padding:var(--sp-2) 0 calc(var(--sp-2) + env(safe-area-inset-bottom,0px));background:#fff;border-top:var(--line-w) solid var(--edge)}
.navbar .wrap{display:flex;justify-content:space-between;gap:var(--sp-2)}

/* ---------- TELEFON ---------- */
/* Jak na pozostałych stronach: pasek nawigacji 64 px, przyciski na całą szerokość (Wstecz i Dalej po połowie),
   ciaśniejsze wiersze odpowiedzi. */
@media (max-width:640px){
  .thead{height:64px}
  .tbody{min-height:calc(100vh - 64px);min-height:calc(100dvh - 64px)}
  .test{padding-top:var(--sp-4)}
  .q{margin-top:var(--sp-4)}
  .tstep > p:not(.kick):not(.err){margin-top:var(--sp-2);line-height:26px}
  .chip span{padding:10px 16px}
  .rung > span{padding:12px var(--sp-2) 12px 48px}
  .rung > span::before{left:var(--sp-2);top:15px}
  .order__i{padding:12px var(--sp-2)}
  .msg{padding:var(--sp-2)}
  .fu-slot:not(:empty){margin-top:var(--sp-4);padding-top:var(--sp-4)}
  .navbar .btn{flex:1;padding:12px var(--sp-2);text-align:center}
  .tbody .box{padding:var(--sp-3)}
}