/* Formularz klienta TaoTech. Tokeny marki z taotech.pl; bez cieni, gradientow i duzych zaokraglen (bank design §14). */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Fraunces-600-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Fraunces-600-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/SchibstedGrotesk-var-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/SchibstedGrotesk-var-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --paper:#FBF8F3;--surface:#FFFDF9;--paper-deep:#F3EDE2;--ink:#231D15;--ink-soft:#6B6154;--line:#E5DBC9;
  --accent:#8F6431;--accent-deco:#C08A4B;--ok:#5F7052;--uwaga:#9A5B00;--blad:#A33A2A;--on-accent:#FBF8F3;
  --r:2px;--st:#5F7052;--pasek-h:64px;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Schibsted Grotesk",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --paper:#1E1710;--surface:#271E15;--paper-deep:#2F2317;--ink:#F3EDE2;--ink-soft:#B8AB98;--line:#43362A;
  --accent:#E0A866;--accent-deco:#C08A4B;--ok:#A3B88F;--uwaga:#F0B45A;--blad:#F08A8A;--on-accent:#1E1710;
  color-scheme:dark;
}}
:root[data-theme=dark]{
  --paper:#1E1710;--surface:#271E15;--paper-deep:#2F2317;--ink:#F3EDE2;--ink-soft:#B8AB98;--line:#43362A;
  --accent:#E0A866;--accent-deco:#C08A4B;--ok:#A3B88F;--uwaga:#F0B45A;--blad:#F08A8A;--on-accent:#1E1710;color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--pasek-h) + 12px)}
body{margin:0;min-height:100dvh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);
  font:17px/1.55 var(--sans);-webkit-tap-highlight-color:transparent}
main{flex:1;width:100%;max-width:640px;margin:0 auto;padding:28px max(16px,env(safe-area-inset-right)) 40px max(16px,env(safe-area-inset-left));outline:none}
h1,h2{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0}
h1{font-size:clamp(1.65rem,2vw + 1.1rem,2.3rem);line-height:1.15;margin-bottom:14px}
h2{font-size:clamp(1.4rem,1.5vw + 1rem,1.85rem);line-height:1.2}
h1:focus,h2:focus{outline:none}

p{margin:0 0 1rem}
a{color:var(--accent)}
.maly{font-size:15px;color:var(--ink-soft)}
.ladowanie{color:var(--ink-soft)}
[hidden]{display:none!important}

/* --- pasek u gory --- */
#pasek{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}
.pasek-w{max-width:640px;margin:0 auto;padding:10px 16px 6px;display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--ink-soft)}
#pasek-etap{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kropka{width:9px;height:9px;border-radius:50%;background:var(--st);flex:none}
#stan-globalny{text-align:right;white-space:nowrap}
#stan-globalny.ok{color:var(--ok)}
#stan-globalny.czeka{color:var(--uwaga)}
#pasek.offline{background:color-mix(in srgb,var(--uwaga) 14%,var(--paper))}
#mapa{max-width:640px;margin:0 auto;padding:0 16px 10px;display:flex;flex-wrap:wrap;gap:5px}
#mapa button{all:unset;cursor:pointer;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--st);transition:background .25s}
#mapa button.zrobione{background:var(--st)}
#mapa button.biezace{outline:2px solid var(--ink);outline-offset:2px}
#mapa button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* --- ekrany --- */
.wejscie{animation:wejscie .2s cubic-bezier(.2,.7,.2,1)}
@keyframes wejscie{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.metryka{font-size:14px;color:var(--ink-soft);margin-bottom:18px;letter-spacing:.01em}
.powitanie h1{margin-bottom:18px}
.powitanie .lead{font-size:18px}
.lista-kreski{list-style:none;padding:0;margin:0 0 1.2rem}
.lista-kreski li{padding:10px 0;border-top:1px solid var(--line)}
.lista-kreski li:last-child{border-bottom:1px solid var(--line)}
.plan{display:grid;gap:0;margin:0 0 1.4rem;padding:0;list-style:none;counter-reset:k}
.plan li{counter-increment:k;display:grid;grid-template-columns:32px 1fr;padding:8px 0}
.plan li::before{content:counter(k);font-family:var(--serif);font-weight:600;color:var(--accent-deco)}
.sekcja-tytul{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:2rem 0 .6rem}
.list-od{font-family:var(--serif);font-weight:600;margin-top:.4rem}

/* --- karta pytania --- */
.karta{border-top:2px solid var(--st);padding-top:14px}
.karta-gora{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;color:var(--ink-soft);margin-bottom:14px}
.karta-etap{display:flex;align-items:center;gap:8px;color:color-mix(in srgb,var(--st) 80%,var(--ink))}
.karta h2{margin-bottom:8px}
.po-co{color:var(--ink-soft);font-size:16px;margin-bottom:14px;white-space:pre-line}
.da{font-size:15px;color:var(--ink-soft);margin:-6px 0 14px}
.da b{color:var(--ink);font-weight:700}
fieldset{border:0;margin:0;padding:0;min-width:0}
.opcja{position:relative;display:flex;align-items:center;gap:14px;min-height:52px;padding:12px 14px;margin:8px 0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);cursor:pointer;transition:background .15s,border-color .15s}
.opcja:active{transform:scale(.99)}
.opcja input{position:absolute;opacity:0;width:1px;height:1px}
.znacznik{flex:none;width:22px;height:22px;border:1.5px solid var(--ink-soft);display:grid;place-items:center;transition:border-color .15s,background .15s}
.opcja[data-typ=jeden] .znacznik{border-radius:50%}
.znacznik svg{width:14px;height:14px;stroke:var(--on-accent);stroke-width:3;fill:none;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .22s ease-out}
.opcja.wybrana{background:color-mix(in srgb,var(--st) 12%,var(--surface));border-color:var(--st)}
.opcja.wybrana .znacznik{background:var(--st);border-color:var(--st)}
.opcja.wybrana .znacznik svg{stroke-dashoffset:0}
.opcja:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.klawisz{margin-left:auto;font-size:13px;color:var(--ink-soft);border:1px solid var(--line);padding:0 6px;display:none}
@media (pointer:fine){.klawisz{display:inline}}
.zablokowana .opcja{cursor:default;pointer-events:none}
.zablokowana .opcja:not(.wybrana){opacity:.5}

.dopisz{all:unset;cursor:pointer;color:var(--accent);font-size:16px;padding:10px 0;display:inline-block;text-decoration:underline;text-underline-offset:3px}
.dopisz:focus-visible{outline:2px solid var(--accent)}
.etykieta-wlasna{display:block;margin-top:14px;font-size:15px;color:var(--ink-soft)}
textarea{display:block;width:100%;min-height:110px;margin-top:8px;padding:12px 14px;font:inherit;font-size:17px;line-height:1.5;
  color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);resize:vertical}
textarea:focus{outline:2px solid var(--st);outline-offset:0;border-color:var(--st)}
textarea::placeholder{color:var(--ink-soft);opacity:.75}

.zapis{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin-top:12px;min-height:44px}
.stan{font-size:15px;color:var(--ink-soft);animation:wejscie .18s ease-out}
.stan.ok{color:var(--ok)}
.stan.czeka{color:var(--uwaga)}
.stan.blad{color:var(--blad)}
.przyciski{display:flex;gap:8px;flex-wrap:wrap}
.nawigacja{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px;padding-top:16px;border-top:1px solid var(--line)}

button{font:inherit;font-size:16px;font-weight:700;min-height:48px;padding:10px 22px;border-radius:var(--r);cursor:pointer;
  border:1.5px solid var(--accent);background:var(--accent);color:var(--on-accent);transition:transform .08s}
button:active{transform:scale(.98)}
button.drugi{background:transparent;color:var(--accent)}
button.cichy{background:transparent;border-color:transparent;color:var(--ink-soft);font-weight:400;padding-inline:6px}
button:disabled{opacity:.45;cursor:default;transform:none}
button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.duzy{width:100%;min-height:54px;font-size:17px}

/* --- przerwa po etapie --- */
.przerwa h2{margin-bottom:10px}
.przerwa{background:color-mix(in srgb,var(--st) 12%,var(--paper));padding:24px 20px;border-top:2px solid var(--st)}
.przerwa .wiem{list-style:none;padding:0;margin:0 0 1.2rem}
.przerwa .wiem li{padding:10px 0;border-top:1px solid color-mix(in srgb,var(--st) 30%,transparent)}
.przerwa .wiem small{display:block;color:var(--ink-soft);font-size:14px}

/* --- final --- */
.os{list-style:none;padding:0;margin:0 0 1.4rem}
.os li{display:grid;grid-template-columns:28px 1fr;gap:4px;padding:10px 0;border-top:1px solid var(--line)}
.os li::before{content:"○";color:var(--ink-soft)}
.os li.zrobione::before{content:"✓";color:var(--ok);font-weight:700}
.os small{display:block;color:var(--ink-soft)}
.ocena .opcje-skala{display:flex;gap:8px;flex-wrap:wrap}
.ocena .opcje-skala .opcja{width:52px;height:52px;min-height:0;justify-content:center;padding:0;margin:0;font-weight:700}
.ocena .opcje-skala .znacznik{display:none}
.ocena .skala-konce{display:flex;justify-content:space-between;max-width:300px;font-size:13px;color:var(--ink-soft);margin-top:4px}
.ocena .karta{border-top:1px solid var(--line);margin-top:18px}
.ocena .karta h2{font-size:1.15rem}

.zakoncz{margin-top:32px;padding-top:20px;border-top:1px solid var(--line)}
.zakoncz .maly{margin-top:10px}

/* --- przeglad --- */
.przeglad-poz{padding:14px 0;border-top:1px solid var(--line)}
.przeglad-poz .p{font-weight:700}
.przeglad-poz .o{white-space:pre-line;margin:4px 0}
.przeglad-poz .brak{color:var(--ink-soft);font-style:italic}

/* --- logowanie --- */
.logowanie input{display:block;width:100%;max-width:240px;font:inherit;font-size:28px;letter-spacing:.3em;padding:10px 14px;margin:8px 0 14px;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);text-align:center}
.logowanie input:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.komunikat{min-height:1.5em;font-size:15px}
.komunikat.blad{color:var(--blad)}

/* --- dymek --- */
#dymek{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translate(-50%,12px);opacity:0;pointer-events:none;
  background:var(--ink);color:var(--paper);padding:10px 16px;font-size:15px;border-radius:var(--r);transition:opacity .18s,transform .18s;max-width:calc(100% - 32px)}
#dymek.widoczny{opacity:1;transform:translate(-50%,0)}

/* --- podpis --- */
.podpis{text-align:center;padding:24px 16px calc(24px + env(safe-area-inset-bottom));font-size:13px;color:var(--ink-soft)}
.podpis p{max-width:460px;margin:0 auto 14px;font-size:14px}
.podpis a{display:inline-flex;align-items:center;gap:8px;color:var(--ink-soft);text-decoration:none;min-height:44px}
.podpis a:hover span{text-decoration:underline}
.enso{width:20px;height:20px;opacity:.7}
.enso-gruby{stroke:var(--ink)}
.enso.maluj path{stroke-dasharray:1;stroke-dashoffset:1;animation:maluj 1.2s ease-out forwards}
.enso.maluj .enso-cienki{animation-delay:.4s}
@keyframes maluj{to{stroke-dashoffset:0}}
.enso-duze{width:56px;height:56px;margin-bottom:14px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{
  #pasek,#dymek,.nawigacja,.przyciski,.podpis a,button{display:none!important}
  body{background:#fff;color:#000}
}