/* Přihlášení jako na úvodní stránce: papír, lístečky a jedna čistá karta.
   Načítá se jako poslední. Dvojité #authScreen#authScreen je záměr – starší
   vrstvy (identity, experiences, premium) mají selektory s mnoha atributy
   a tahle obrazovka má vypadat stejně v každém stylu aplikace.
   Pohyb: lístečky přistanou, karta se při chybě otřese, při přihlášení vše
   odletí. Omezení pohybu (systém i „Utlumené") vše vypne. Nic neběží donekonečna. */

/* ------------------------------ Tokeny ------------------------------ */
#authScreen#authScreen{
  --l-papir:#f5f3ef;--l-karta:#fff;--l-ink:#1b1c1e;--l-ink-2:#5d5850;--l-ink-3:#6b6459;--l-linka:#e4ded2;
  --l-modra:#2f7bff;--l-modra-sv:#e9f1ff;--l-cervena:#c8463d;--l-lis:#ffe777;--l-lis-modry:#d9e8ff;--l-na-ink:#fff;
  --l-ruka:"Segoe Print","Bradley Hand","Chalkboard SE","Comic Sans MS",cursive;
  --l-pruzina:cubic-bezier(.34,1.56,.64,1);--l-ease:cubic-bezier(.22,1,.36,1);
  /* Proměnné aplikace, které čtou formuláře a záložky uvnitř karty. */
  --bg:var(--l-papir);--bg-card:var(--l-karta);--surface:var(--l-karta);--border:var(--l-linka);--border-strong:var(--l-linka);
  --text:var(--l-ink);--text-2:var(--l-ink-2);--text-3:var(--l-ink-3);--muted:var(--l-ink-2);
  --accent:var(--l-modra);--accent-ink:var(--l-modra);
  color:var(--l-ink);
  background:var(--l-papir) repeating-linear-gradient(to bottom,transparent 0 31px,color-mix(in srgb,var(--l-linka) 45%,transparent) 31px 32px);
  backdrop-filter:none;
}
body[data-theme="dark"] #authScreen#authScreen{
  --l-papir:#151411;--l-karta:#1f1d1a;--l-ink:#f1ede4;--l-ink-2:#bdb5a7;--l-ink-3:#a39b8e;--l-linka:#322e27;
  --l-modra:#5c98ff;--l-modra-sv:#18233a;--l-cervena:#e2685d;--l-na-ink:#151411;
}
body:has(#authScreen:not(.hidden)){background:var(--p-bg,#f5f3ef)}
#authScreen#authScreen .auth-bg{display:none}

/* ------------------------------ Značka a jazyk ------------------------------ */
#authScreen#authScreen .auth-brand{color:var(--l-ink);z-index:4}
#authScreen#authScreen .auth-brand .ico{animation:none}
#authScreen#authScreen .auth-brand small{color:var(--l-ink-3)}
#authScreen#authScreen .auth-lang{border-radius:12px;border:1px solid var(--l-linka);background:var(--l-karta);color:var(--l-ink);min-height:40px}

/* ------------------------------ Nadpis vlevo ------------------------------ */
#authScreen#authScreen :is(.stage-title,.pick-title){font-family:"Segoe UI Variable Display",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:780;letter-spacing:-.045em;color:var(--l-ink)}
#authScreen#authScreen .stage-sub{font:19px/1.35 var(--l-ruka);color:var(--l-modra);opacity:1;transform:rotate(-1.5deg);transform-origin:left center;margin-top:6px}
#authScreen#authScreen .stage-back{color:var(--l-ink-2)}

/* ------------------------------ Karta s páskou ------------------------------ */
#authScreen#authScreen .auth-card{
  position:relative;background:var(--l-karta);border:1px solid var(--l-linka);border-radius:14px;
  box-shadow:0 1px 1px rgba(0,0,0,.04),0 30px 60px -30px rgba(40,30,10,.38);backdrop-filter:none;padding:30px 26px 24px;
}
/* Kousek lepicí pásky drží kartu na „stole". */
#authScreen#authScreen .auth-card::before{
  content:"";position:absolute;top:-13px;left:50%;width:118px;height:26px;margin-left:-59px;transform:rotate(-2.5deg);
  background:color-mix(in srgb,var(--l-modra) 22%,transparent);border-left:2px dotted color-mix(in srgb,var(--l-karta) 70%,transparent);border-right:2px dotted color-mix(in srgb,var(--l-karta) 70%,transparent);
  box-shadow:0 1px 2px rgba(0,0,0,.06);pointer-events:none
}
#authScreen#authScreen .auth-card:focus-within{border-color:color-mix(in srgb,var(--l-modra) 40%,var(--l-linka))}
#authScreen#authScreen .auth-card label{font-size:12px;font-weight:650;letter-spacing:.02em;color:var(--l-ink-2);transition:color .2s}
#authScreen#authScreen .auth-card .field:focus-within label{color:var(--l-modra)}
#authScreen#authScreen input,#authScreen#authScreen select{
  min-height:48px;border-radius:12px;background:var(--l-papir);color:var(--l-ink);border:1px solid var(--l-linka);
  transition:border-color .2s,box-shadow .2s,background-color .2s
}
#authScreen#authScreen input:focus{outline:none;border-color:var(--l-modra);background:var(--l-karta);box-shadow:0 0 0 4px color-mix(in srgb,var(--l-modra) 16%,transparent)}
#authScreen#authScreen .primary{
  position:relative;min-height:50px;border-radius:999px;background:var(--l-ink);color:var(--l-na-ink);border:0;font-weight:650;
  transition:transform .2s var(--l-ease),box-shadow .2s;box-shadow:0 12px 24px -14px rgba(0,0,0,.55)
}
#authScreen#authScreen .primary:hover{transform:translateY(-2px)}
#authScreen#authScreen .primary:active{transform:translateY(1px) scale(.99)}
#authScreen#authScreen .link-btn{color:var(--l-ink-2)}
#authScreen#authScreen .link-btn:hover{color:var(--l-modra)}
#authScreen#authScreen .set-tabs{background:var(--l-papir);border:1px solid var(--l-linka)}
#authScreen#authScreen .set-tab.active{background:var(--l-ink);color:var(--l-na-ink)}

/* Načítání po odeslání: tlačítko ukáže točící se ručičku místo textu. */
#authScreen#authScreen [aria-busy="true"] .primary{color:transparent;pointer-events:none}
#authScreen#authScreen [aria-busy="true"] .primary::after{
  content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  border:2px solid var(--l-na-ink);
  background:linear-gradient(var(--l-na-ink),var(--l-na-ink)) 50% 2px/2px 8px no-repeat;
  animation:l-ruc .9s linear infinite
}
@keyframes l-ruc{to{transform:rotate(360deg)}}

/* Chyba: červený proužek, karta se krátce otřese. */
#authScreen#authScreen .form-error{
  padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--l-cervena) 12%,var(--l-karta));color:var(--l-cervena);
  border-left:3px solid var(--l-cervena);font-weight:600;font-size:14px
}
#authScreen#authScreen .form-error:not([hidden]){animation:l-chyba .45s var(--l-ease)}
#authScreen#authScreen .auth-card:has(.form-error:not([hidden])){animation:l-otres .42s var(--l-ease)}
@keyframes l-chyba{from{opacity:0;transform:translateY(-6px)}}
@keyframes l-otres{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}

/* ------------------------------ Výběr firmy ------------------------------ */
#authScreen#authScreen .pick-card{background:var(--l-karta);border:1px solid var(--l-linka);border-radius:14px;backdrop-filter:none;box-shadow:0 16px 30px -24px rgba(40,30,10,.45)}
#authScreen#authScreen .pick-card:nth-child(odd){transform:rotate(-1deg)}
#authScreen#authScreen .pick-card:nth-child(even){transform:rotate(1deg)}
#authScreen#authScreen .pick-card:hover{transform:translateY(-4px) rotate(0);border-color:var(--l-modra)}

/* ------------------------------ Ukázka jako žlutý lísteček ------------------------------ */
#authScreen#authScreen .auth-ukazka{border-top-color:var(--l-linka)}
#authScreen#authScreen .auth-ukazka .btn{
  background:var(--l-lis);color:#2a2620;border:0;border-radius:4px;min-height:48px;font-weight:650;
  box-shadow:0 10px 20px -12px rgba(0,0,0,.4);transform:rotate(-1.2deg);transition:transform .25s var(--l-pruzina)
}
#authScreen#authScreen .auth-ukazka .btn:hover{transform:rotate(0) translateY(-2px)}
#authScreen#authScreen .auth-ukazka .hint{font-family:var(--l-ruka);font-size:14px;color:var(--l-ink-2)}

/* ------------------------------ Lístečky kolem ------------------------------ */
.listky{display:none}
#authScreen#authScreen .listky{display:block;position:absolute;inset:0;pointer-events:none;z-index:0}
#authScreen#authScreen .listek{
  position:absolute;display:flex;flex-direction:column;gap:2px;padding:14px 16px 13px;min-width:150px;
  font:15px/1.3 var(--l-ruka);color:#2a2620;box-shadow:0 14px 26px -14px rgba(0,0,0,.42);
  rotate:var(--r);translate:calc(var(--px,0) * var(--hloubka,10px)) calc(var(--py,0) * var(--hloubka,10px));
  transition:translate .6s var(--l-ease);pointer-events:auto;cursor:default;
  animation:l-pristan .75s var(--l-pruzina) both;animation-delay:var(--d)
}
#authScreen#authScreen .listek b{font:700 15px system-ui,-apple-system,"Segoe UI",sans-serif;color:#1b1c1e}
#authScreen#authScreen .listek .l-pod{font-size:13px;color:#5d5850}
#authScreen#authScreen .listek .l-cas{font:650 22px ui-monospace,"Cascadia Mono",Consolas,monospace;letter-spacing:-.5px}
#authScreen#authScreen .listek s{color:#a3463d}
#authScreen#authScreen .l-ik{width:22px;height:22px;color:var(--l-modra-tm,#1b5fd1);margin-bottom:4px}
#authScreen#authScreen .l-zluty{background:var(--l-lis)}
#authScreen#authScreen .l-bily{background:#fffdf6}
#authScreen#authScreen .l-modry{background:var(--l-lis-modry)}
#authScreen#authScreen .l1{left:6%;top:16%;--r:-6deg;--d:.15s;--hloubka:14px;padding-right:38px}
#authScreen#authScreen .l1 .l-ik{position:absolute;right:10px;bottom:8px;color:#16794a}
#authScreen#authScreen .l2{left:9%;bottom:12%;--r:4deg;--d:.3s;--hloubka:22px}
#authScreen#authScreen .l3{right:2.5%;bottom:10%;--r:-3deg;--d:.45s;--hloubka:18px}
#authScreen#authScreen .l4{right:3%;top:12%;--r:5deg;--d:.6s;--hloubka:10px;min-width:120px}
#authScreen#authScreen .listek:hover{rotate:0deg;z-index:2}
@keyframes l-pristan{
  from{opacity:0;transform:translateY(-46px) scale(1.18) rotate(10deg);box-shadow:0 40px 50px -20px rgba(0,0,0,.25)}
  70%{opacity:1}
  to{opacity:1;transform:none}
}
#authScreen#authScreen .auth-pick,#authScreen#authScreen .auth-stage{z-index:1}

/* ------------------------------ Odchod do aplikace ------------------------------ */
/* Vlastní animace odchodu – přepíše animaci příletu, která by jinak držela konečnou polohu. */
#authScreen#authScreen.odchod .auth-card{animation:l-odchod-karta .42s var(--l-ease) forwards}
#authScreen#authScreen.odchod :is(.stage-left,.auth-pick){animation:l-odchod-text .3s ease forwards}
#authScreen#authScreen.odchod .listek{animation:l-odlet .45s var(--l-ease) forwards}
@keyframes l-odchod-karta{to{opacity:0;transform:translateY(-26px) scale(.97)}}
@keyframes l-odchod-text{to{opacity:0}}
@keyframes l-odlet{from{opacity:1}to{opacity:0;transform:translateY(-70px) rotate(16deg)}}
#app.prichod{animation:l-prichod .55s var(--l-ease, cubic-bezier(.22,1,.36,1)) both}
@keyframes l-prichod{from{opacity:0;transform:translateY(10px) scale(.995)}}

/* ------------------------------ Načítání ------------------------------ */
.nacitani{
  position:fixed;inset:0;z-index:9000;display:grid;place-items:center;pointer-events:none;
  background:var(--p-bg,#f5f3ef);transition:opacity .4s,visibility .4s
}
body[data-theme="dark"] .nacitani{background:#151411}
.nacitani-listek{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 26px 18px;background:#ffe777;color:#2a2620;
  rotate:-3deg;box-shadow:0 18px 30px -16px rgba(0,0,0,.45);font:15px "Segoe Print","Bradley Hand","Chalkboard SE",cursive;
  animation:l-pristan .7s cubic-bezier(.34,1.56,.64,1) both
}
.nacitani-listek b{font:780 22px "Segoe UI Variable Display",system-ui,sans-serif;letter-spacing:-.03em;color:#1b1c1e}
.nacitani-listek svg{width:34px;height:34px;color:#1b1c1e}
.nacitani-listek .ik-ruc{transform-box:view-box;transform-origin:12px 12px;animation:l-ruc 1.2s linear infinite}
body.nacteno .nacitani{opacity:0;visibility:hidden}
body.nacteno .nacitani *{animation:none}

/* ------------------------------ Menší obrazovky ------------------------------ */
/* Lístečky vpravo se vejdou jen vedle karty; na užší obrazovce by ji zakryly. */
@media (max-width:1260px){
  #authScreen#authScreen .l3,#authScreen#authScreen .l4{display:none}
}
@media (max-width:1000px){
  #authScreen#authScreen .l2{display:none}
}
@media (max-width:760px){
  #authScreen#authScreen .listky{display:none}
  #authScreen#authScreen .stage-sub{transform:none}
}

/* ------------------------------ Klidný režim ------------------------------ */
@media (prefers-reduced-motion:reduce){
  #authScreen#authScreen *,#authScreen#authScreen *::before,#authScreen#authScreen *::after,.nacitani *,#app.prichod{animation:none!important;transition:none!important}
}
body[data-animace="klidne"] #authScreen#authScreen *,body[data-animace="klidne"] #authScreen#authScreen *::before,body[data-animace="klidne"] .nacitani *,body[data-animace="klidne"] #app.prichod{animation:none!important;transition:none!important}