/* ===== /login + /register + /recovery — shared shell with mode morph ===== */

html, body { height: 100%; }

.au-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* dvh, ne vh — na mobilu se vh počítá k výšce BEZ lišty prohlížeče,
     takže se obrazovka po skrytí lišty posunula. */
  min-height: 100dvh;
}

.au-visual {
  position: relative;
  border-right: 1px solid var(--line);
  overflow: hidden;
  background: #000;
  /* own layer so form morphs don't composite against the canvas paint */
  contain: paint;
  transform: translateZ(0);
}
/* Panel je do prvního snímku prostě černý — stejný podklad jako zbytek
   stránky, takže žádný mezistav není vidět.
   ZÁMĚRNĚ tu NENÍ zástupná výplň. Dřív tu byly tři modré radiální přechody,
   aby panel nebyl prázdný, než naběhne canvas. Jenže nevypadaly ani vzdáleně
   jako výsledná půltónová textura, takže je uživatel při každém načtení viděl
   probliknout jako tři modré fleky. Krátký cross-fade to nespravil, jen tu
   modrou nechal doznívat o půl vteřiny déle. Jediná modrá na téhle stránce
   má být ta, kterou kreslí halftone. */
.au-canvas {
  position: absolute; inset: 0; overflow: hidden; z-index: 1;
  opacity: 0;
  /* Worker hlásí `ready` až po dokreslení prvního snímku, takže se tenhle
     přechod nikdy nespustí nad rozpracovaným obrázkem — jde vždy z černé
     rovnou na hotovou texturu. */
  transition: opacity .28s ease;
}
.au-visual.has-live .au-canvas { opacity: 1; }
.au-canvas canvas { width: 100%; height: 100%; display: block; }

@media (prefers-reduced-motion: reduce) {
  .au-canvas { transition: none; }
}

.au-side {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  /* Odsazení se na nízkém okně smrskne, jinak formulář přeteče přes výšku
     obrazovky a začne rolovat i s levým panelem. Dole je navíc rezerva na
     právní řádek, který je mimo tok (position: absolute) a bez ní by se
     přes formulář překryl. */
  padding: clamp(28px, 5vh, 64px) 40px max(76px, clamp(28px, 5vh, 64px));
}
.au-box { position: relative; width: 100%; max-width: 360px; }

/* ----- titles / subs / feet: stacked in one cell, fade only -----
   Switching position absolute↔relative cannot be interpolated and
   flashes a blank frame. Identical login/register copy shares one node
   so it does not crossfade against itself. */
.au-head, .au-subs, .au-feet, .au-cta-copy {
  display: grid;
  position: relative;
}
.au-head > *, .au-subs > *, .au-feet > *, .au-cta-copy > * {
  grid-area: 1 / 1;
}
.au-title {
  font-family: var(--sans); font-size: 32px; font-weight: 400; line-height: 1.15; text-align: center;
  margin: 0;
}
.au-sub {
  margin: 0;
  font-size: 15px; line-height: 1.6; color: var(--txt50); text-align: center;
}
.au-subs { margin: 12px 0 30px; }
.au-foot {
  margin: 0;
  text-align: center; font-family: var(--ui); font-size: 14px; color: var(--txt50);
}
.au-feet { margin-top: 28px; }
.au-foot a { color: #fff; }
.au-foot a:hover { text-decoration: underline; }

/* Všechny varianty textu leží přes sebe v jedné buňce a prolínají se.
   `user-select: none` na neaktivních je tu proto, že jinak výběr přes
   stránku vytáhne i nadpisy, které nejsou vidět — označíš „Sign in with
   email“ a zkopíruje se k tomu i „Forgot password“ a „New password“. */
.au-title[data-mode-copy],
.au-sub[data-mode-copy],
.au-foot[data-mode-copy],
.au-cta-label[data-mode-copy] {
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transition: opacity .28s ease;
}
.au-page[data-mode="login"] .au-title[data-mode-copy="login"],
.au-page[data-mode="register"] .au-title[data-mode-copy="register"],
.au-page[data-mode="recovery"] .au-title[data-mode-copy="recovery"],
.au-page[data-mode="login"] .au-sub[data-mode-copy~="login"],
.au-page[data-mode="register"] .au-sub[data-mode-copy~="register"],
.au-page[data-mode="recovery"] .au-sub[data-mode-copy="recovery"],
.au-page[data-mode="login"] .au-foot[data-mode-copy="login"],
.au-page[data-mode="register"] .au-foot[data-mode-copy="register"],
.au-page[data-mode="recovery"] .au-foot[data-mode-copy="recovery"],
.au-page[data-mode="login"] .au-cta-label[data-mode-copy~="login"],
.au-page[data-mode="register"] .au-cta-label[data-mode-copy~="register"],
.au-page[data-mode="recovery"] .au-cta-label[data-mode-copy="recovery"],
.au-page[data-mode="reset"] .au-title[data-mode-copy="reset"],
.au-page[data-mode="reset"] .au-sub[data-mode-copy="reset"],
.au-page[data-mode="reset"] .au-foot[data-mode-copy="reset"],
.au-page[data-mode="reset"] .au-cta-label[data-mode-copy="reset"] {
  opacity: 1;
  pointer-events: auto;
  user-select: text;
}

/* ----- fields ----- */
.au-field {
  display: flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 16px;
  background: #000;
  border: 1px solid var(--line);
  border-radius: var(--sk-radius);
  color: var(--txt40);
  transition: border-color .2s;
}
.au-field:focus-within { border-color: #3f3f3f; color: var(--txt70); }
.au-field > svg { width: 15px; height: 15px; flex: none; }
.au-field input {
  flex: 1; min-width: 0; height: 100%;
  background: none; border: 0; outline: 0;
  font-family: var(--ui); font-size: 15px; color: #fff;
}
.au-field input::placeholder { color: var(--txt40); }

.au-slot-inner { overflow: hidden; min-height: 0; }

.au-name-slot,
.au-pw-slot,
.au-pw2-slot,
.au-email-slot,
.au-social,
.au-meta {
  display: grid;
  transition:
    grid-template-rows .28s cubic-bezier(.22, 1, .36, 1),
    opacity .22s ease,
    margin .28s cubic-bezier(.22, 1, .36, 1);
}

/* Name — closed by default, open on register */
.au-name-slot {
  grid-template-rows: 0fr;
  opacity: 0;
  margin: 0;
}
.au-page[data-mode="register"] .au-name-slot {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-bottom: 12px;
}

/* Password — open on login/register, collapses on recovery */
.au-pw-slot {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 12px;
}
.au-page[data-mode="recovery"] .au-pw-slot {
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  pointer-events: none;
}

/* Obnova hesla z e-mailu: e-mail zmizí (známe ho z tokenu), heslo zůstane
   a přibude potvrzení. Sloty se sbalují stejnou animací jako jméno, takže
   morf mezi režimy vypadá pořád stejně. */
.au-email-slot {
  grid-template-rows: 1fr;
  opacity: 1;
}
.au-page[data-mode="reset"] .au-email-slot {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
}
.au-page[data-mode="reset"] .au-pw-slot {
  margin-top: 0;
}
.au-pw2-slot {
  grid-template-rows: 0fr;
  opacity: 0;
  margin: 0;
}
.au-page[data-mode="reset"] .au-pw2-slot {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 12px;
}

.au-reveal {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-right: -6px; flex: none;
  color: var(--txt40);
  transition: color .2s;
}
.au-reveal:hover { color: #fff; }
.au-reveal svg { width: 16px; height: 16px; }
.au-slash { transition: opacity .2s; }
.au-reveal[aria-pressed="true"] .au-slash { opacity: 0; }

/* error + forgot share one animated row; bottom gap to CTA stays fixed */
.au-meta {
  grid-template-rows: 1fr;
  margin: 0 0 22px;
}
.au-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 20px;
  padding-top: 12px;
}
.au-forgot {
  flex: none;
  margin-right: auto; /* drží se levé osy i když je chybový slot prázdný */
  text-align: left;
}
.au-forgot a {
  font-family: var(--ui); font-size: 13px; color: var(--txt50);
  transition: color .2s; white-space: nowrap;
}
.au-forgot a:hover { color: #fff; }
/* register / recovery: collapse the row (no blank band), reopen only for errors */
.au-page[data-mode="register"] .au-meta,
.au-page[data-mode="recovery"] .au-meta,
.au-page[data-mode="reset"] .au-meta {
  grid-template-rows: 0fr;
}
.au-page[data-mode="register"] .au-meta:has(.au-error:not([hidden])),
.au-page[data-mode="recovery"] .au-meta:has(.au-error:not([hidden])),
.au-page[data-mode="reset"] .au-meta:has(.au-error:not([hidden])) {
  grid-template-rows: 1fr;
}
.au-page[data-mode="register"] .au-forgot,
.au-page[data-mode="recovery"] .au-forgot,
.au-page[data-mode="reset"] .au-forgot {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.au-cta {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  /* Stejný levý padding jako referenční `.btn-blue` v CTA na landingu.
     `.btn-white` má 22px, tady je potřeba 24, ať text uvnitř tlačítka
     stojí na stejném odsazení jako tam. */
  padding-left: 24px;
}
/* Popisky leží přes sebe v jedné buňce mřížky, takže se buňka roztáhne na
   šířku toho nejdelšího („Send reset link“). Bez tohohle se kratší text
   uvnitř té buňky vycentruje a „Sign in“ pak začínalo o 34 px dál než
   ostatní řádky. */
.au-cta-copy { justify-items: start; }
.au-cta-label {
  display: inline-block;
  text-align: left;
}

.au-social {
  grid-template-rows: 1fr;
  opacity: 1;
  margin: 0;
}
.au-page[data-mode="recovery"] .au-social,
.au-page[data-mode="reset"] .au-social {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
}

.au-div {
  display: flex; align-items: center; gap: 14px;
  margin: 28px 0;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--txt40);
}
.au-div::before,
.au-div::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.au-providers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.au-providers .tile {
  cursor: pointer; width: 100%;
  background: linear-gradient(180deg, #191919 0%, #000 100%);
  border: 1px solid #1f1f1f;
  border-image: linear-gradient(180deg, #333 0%, #1f1f1f 100%) 1;
  border-radius: var(--sk-radius);
}
.au-providers .tile svg { width: 20px; height: 20px; }

.au-legal {
  /* Stejná osa i šířka jako `.au-box`, aby řádek seděl pod formulářem. */
  position: absolute; bottom: 26px;
  left: 50%; transform: translateX(-50%);
  width: min(360px, calc(100% - 80px));
  text-align: center;
  font-family: var(--ui); font-size: 12.5px; line-height: 1.6;
  color: var(--txt40);
}
.au-legal a { color: var(--txt70); text-decoration: underline; text-underline-offset: 2px; }
.au-legal a:hover { color: #fff; }

.au-error,
.au-success {
  margin: 0;
  font-family: var(--ui);
  font-size: 13px;
  line-height: 1.45;
}
.au-error {
  flex: 1;
  min-width: 0;
  color: #ff8a8a;
  text-align: left;
}
.au-error[hidden] { display: none !important; }
.au-success {
  margin: 0 0 14px;
  color: #8adfad;
}

@media (prefers-reduced-motion: reduce) {
  .au-title, .au-sub, .au-foot, .au-cta-label,
  .au-name-slot, .au-pw-slot, .au-social, .au-meta {
    transition: none !important;
  }
}

@media (max-width: 900px) {
  /* Dekorativní panel je pryč, formulář bere celou šířku. */
  .au-page { grid-template-columns: minmax(0, 1fr); }
  .au-visual { display: none; }

  .au-side {
    /* `min-height`, ne pevná výška: na nízkém displeji (telefon na šířku,
       malý telefon s klávesnicí) obsah přeroste okno a stránka se má dát
       odrolovat, ne obsah uříznout. */
    min-height: 100dvh;
    height: auto;
    justify-content: center;
    padding: 32px 20px;
  }

  /* Právní řádek zpátky do toku. Mimo tok visel u spodní hrany a na okně
     vysokém 560 px vypadl pod obrazovku, kam se nedalo doscrollovat. */
  .au-legal {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-width: 360px;
    margin: 28px auto 0;
  }

  /* Formulář na úzkém displeji přes celou šířku, jen s odsazením od krajů. */
  .au-box {
    max-width: 400px;
  }
}

/* Pod 420 px se odsazení stáhne, ať na text zbude co nejvíc místa. */
@media (max-width: 420px) {
  .au-side {
    padding-left: 18px;
    padding-right: 18px;
  }
}