/* ============================================================
   Datamart — Auth & onboarding screens (registrace / login).
   Clean, Attio-style: WHITE background, no card frame/shadow —
   just centered, airy content. Buttons are the DS button
   (Components · Buttons): 28px, 12px, radius-sm. All DS tokens.
   Load AFTER colors_and_type.css.
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font-sans); color: var(--fg); -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv05" 1, "cv08" 1, "ss01" 1; }
.ti { display: inline-flex; line-height: 1; }

/* white canvas, generously centered — no shell tint */
/* 100dvh za 100vh: na mobilu 100vh počítá s odrolovaným adresním řádkem,
   takže spodek obsahu končí pod hranou displeje. dvh == vh na desktopu. */
.au-page { min-height: 100vh; min-height: 100dvh; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--surface-100); padding: var(--sp-7) var(--sp-6); }

/* Attio-style card: thin hairline frame, big + airy, NO shadow at all (border only) */
.au-card { width: 100%; max-width: 480px; background: var(--surface-100); border: 1px solid var(--border);
  box-shadow: none; border-radius: var(--radius-xl); padding: 52px 48px; }
.au-card.wide { max-width: 1000px; padding: 56px 56px; }
/* split = wide card hosting the 2-column content+image layout, image flush edge-to-edge */
.au-card.split { padding: 0; overflow: hidden; }
.au-col { padding: 60px 56px; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.au-col .au-title, .au-col .au-sub { text-align: left; }
/* .au-sub má v základu `margin: 0 auto` (centrovaná varianta). V .au-col je
   ale .au-col flex-column, takže auto-marginy prvek VYCENTRUJÍ a smrsknou na
   šířku obsahu — podtitulek pak plave 89 px od levé hrany, zatímco titulek,
   chipy i patička sedí vlevo. `text-align: left` na to nestačí, marginy musí
   pryč. Stejný vzor jako .au-col .au-hero-ic o řádek níž. */
.au-col .au-sub { margin-left: 0; margin-right: auto; }
.au-col .au-hero-ic { margin-left: 0; margin-right: auto; }
.au-col .au-chips { justify-content: flex-start; }
.au-col .au-foot { text-align: left; }
/* DS: no tile/background behind the hero icon in the split layout — just a larger glyph */
.au-col .au-hero-ic { width: auto; height: auto; margin: 0 0 var(--sp-4); place-items: start; }
.au-col .au-hero-ic.ok, .au-col .au-hero-ic.lock { background: none; }
.au-col .au-hero-ic .ti { font-size: 40px; }

/* brand lockup */
.au-brand { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-bottom: 36px; }
.au-brand .lg { width: 32px; height: 32px; border-radius: var(--radius-sm); display: grid; place-items: center; color: #fff; background: var(--accent); }
.au-brand .lg .ti { font-size: 19px; }
.au-brand .nm { font: 600 18px var(--font-display); color: var(--ink-900); letter-spacing: -0.01em; }

/* heading block */
.au-title { font: 600 27px/1.22 var(--font-display); color: var(--ink-900); text-align: center; letter-spacing: -0.02em; margin: 0 0 var(--sp-4); }
.au-sub { font: 400 15px/1.6 var(--font-sans); color: var(--fg-secondary); text-align: center; margin: 0 auto 32px; max-width: 42ch; }
.au-sub .au-link { color: var(--accent); cursor: pointer; }
.au-sub strong { font-weight: 600; color: var(--ink-900); }

/* inputs */
.au-label { display: block; font: var(--label); color: var(--fg-secondary); margin: 0 0 var(--sp-3); }
.au-input { width: 100%; height: 46px; padding: 0 var(--sp-4); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface-100); color: var(--fg); font: 500 14px var(--font-sans); outline: none; }
[data-theme="dark"] .au-input { background: var(--surface-50); }
.au-input::placeholder { color: var(--fg-muted); }
.au-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.au-input.readonly { color: var(--fg-secondary); background: var(--surface-75); cursor: default; }
.au-field { margin-bottom: 20px; }

/* chyba u pole — inline, u pole, kterého se týká. Barva z existujícího vzoru
   .au-otp.err (--critical na rámečku). Text sedí uvnitř .au-field, takže spodní
   mezera pole zůstává jediná. K rámečku patří aria-invalid + role="alert" —
   barva sama čtečce nic neřekne. (AD 31. 7. 2026) */
.au-input.err { border-color: var(--critical); }
.au-input.err:focus { border-color: var(--critical); box-shadow: 0 0 0 3px color-mix(in srgb, var(--critical) 16%, transparent); }
.au-err { display: flex; align-items: flex-start; gap: var(--sp-2); margin: var(--sp-3) 0 0;
  font: 500 13px/1.45 var(--font-sans); color: var(--critical-ink); }
.au-err .ti { font-size: 15px; color: var(--critical); flex: none; }

/* buttons — DS button (Components · Buttons): 28px, 12px, radius-sm.
   ELEVACE: oramovany sekundarni povrch nese --shadow-xs (kanon = karta
   Components · Buttons, .btn.default). --shadow-sm na tlacitka nepatri. */
.au-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; height: var(--control-h); padding: 0 var(--sp-4);
  border: 1px solid transparent; border-radius: var(--radius-sm); font: 500 13px var(--font-sans); cursor: pointer; box-sizing: border-box; white-space: nowrap; }
.au-btn .ti { font-size: 16px; }
/* POZOR: varianty NESMÍ opakovat `font` shorthandem — .au-btn.primary ho měl
   totožný se základem, ale se specificitou 0,2,0 přebíjel mobilní blok
   `.au-btn { font-size: 14px }` (0,1,0). Tlačítko pak na telefonu zůstalo 13px.
   Varianta mění jen to, čím se od základu LIŠÍ. (AD 31. 7. 2026) */
.au-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent-press); }
.au-btn.primary:hover { background: var(--accent-press); }
/* běžící tlačítko — aktivita = POHYB (týž princip jako .aichat-run v panelu asistenta).
   Stav ale nese POPISEK („Odemykám…"), rotace je jen potvrzení, proto smí
   reduced-motion animaci prostě vypnout bez statické náhrady. (AD 31. 7. 2026) */
.au-btn.is-loading .ti { animation: au-spin 0.9s linear infinite; }
@keyframes au-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .au-btn.is-loading .ti { animation: none; } }
.au-btn.default { background: var(--surface-100); color: var(--ink-900); border-color: var(--line-300); box-shadow: var(--shadow-xs); }
[data-theme="dark"] .au-btn.default { background: var(--surface-50); }
.au-btn.default:hover { background: var(--hover-surface); }
.au-btn.ghost { background: transparent; color: var(--ink-700); }
.au-btn.ghost:hover { background: var(--hover-surface); }
/* plain text link (skip / secondary action) */
.au-textlink { display: block; text-align: center; font: 500 14px var(--font-sans); color: var(--fg-secondary); cursor: pointer; text-decoration: none; margin-top: var(--sp-5); }
.au-textlink:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.au-btn.google { background: var(--surface-100); color: var(--ink-900); border-color: var(--line-300); box-shadow: var(--shadow-xs); }
[data-theme="dark"] .au-btn.google { background: var(--surface-50); }
.au-btn.google:hover { background: var(--hover-surface); }
.au-btn.google svg { width: 16px; height: 16px; flex: none; }
.au-btn.auto { width: auto; }
.au-btn-row { display: flex; gap: var(--sp-4); }
.au-btn-row .au-btn { flex: 1; width: auto; }
.au-btn-row .au-btn.shrink { flex: none; width: auto; padding: 0 var(--sp-4); }
.au-stack > .au-btn + .au-btn { margin-top: var(--sp-3); }

/* "nebo" divider */
.au-or { display: flex; align-items: center; gap: var(--sp-4); margin: var(--sp-5) 0; }
.au-or::before, .au-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.au-or span { font: 500 12px var(--font-sans); color: var(--fg-muted); }

.au-gap { height: 9px; }
.au-foot { font: 400 13px/1.55 var(--font-sans); color: var(--fg-muted); text-align: center; margin-top: 28px; }
.au-foot .au-link, .au-foot a { color: var(--fg-secondary); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* OTP — six boxes */
.au-otp { display: flex; gap: var(--sp-2); justify-content: center; margin: var(--sp-3) 0 22px; }
.au-otp .box { width: 26px; height: 32px; display: grid; place-items: center; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--surface-100); font: 600 14px var(--font-display); color: var(--ink-900); }
.au-otp .box.on { border-color: var(--accent); }
.au-otp .box.cursor { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.au-otp.err .box { border-color: var(--critical); }
.au-resend { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); font: 500 13px var(--font-sans); color: var(--fg-muted); }
.au-resend .ti { font-size: 15px; }
.au-resend .on { color: var(--accent); cursor: pointer; }

/* avatar uploader (profile) */
.au-avset { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-6); }
.au-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font: 600 15px var(--font-display); color: hsl(var(--av-hue,217) 52% 42%); background: var(--surface-75); border: 1.5px solid hsl(var(--av-hue,217) 62% 60%); }

/* source rows (Google data-link) */
/* flat list — group by whitespace, NOT per-row boxes; icon is an icon, not a tile */
.au-srcs { display: flex; flex-direction: column; gap: 48px; margin: 48px 0; }
.au-src { display: flex; align-items: flex-start; gap: var(--sp-4); }
.au-src .ic { width: 22px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--accent); }
.au-src .ic .ti { font-size: 19px; }
.au-src .tx { min-width: 0; }
.au-src .nm { font: 600 13.5px var(--font-sans); color: var(--ink-900); margin: 0; }
.au-src .why { font: 400 12.5px/1.4 var(--font-sans); color: var(--fg-secondary); margin: var(--sp-0) 0 0; }

/* trust line + compliance badges */
.au-trust { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); margin: 0 0 var(--sp-5); }
.au-trust .lead { display: inline-flex; align-items: center; gap: var(--sp-2); font: 500 12.5px var(--font-sans); color: var(--fg-secondary); }
.au-trust .lead .ti { font-size: 15px; color: var(--positive); }
.au-badge { font: 600 11px var(--font-sans); color: var(--fg-muted); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: var(--sp-0) var(--sp-3); background: var(--surface-100); }

/* two-column layout (Google screen) — airy, no outer frame */
/* 2col: left content padded by its own wrapper; right viz fills its half edge-to-edge */
.au-2col { display: grid; grid-template-columns: 1.08fr 1fr; gap: 0; align-items: stretch; min-height: 560px; }
/* viz = ONE subtle preview zone, flush to the card's right/top/bottom edges; left corners square, right corners match the card */
.au-viz { background: var(--surface-75); border-radius: 0 var(--radius-xl) var(--radius-xl) 0; overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.au-viz-img { width: 100%; height: 100%; min-height: 440px; object-fit: cover; object-position: top left; display: block; }
.au-viz .vcard { display: flex; align-items: center; gap: var(--sp-4); }
.au-viz .vico { width: 26px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--accent); }
.au-viz .vico .ti { font-size: 18px; }
.au-viz .vico.av { width: 30px; height: 30px; flex: none; display: grid; place-content: center; border-radius: 50%; background: var(--surface-100); border: 1.5px solid hsl(217 62% 60%); color: hsl(217 52% 42%); font: 600 11px var(--font-display); }
.au-viz .vnm { font: 600 13px var(--font-sans); color: var(--ink-900); }
.au-viz .vmeta { font: 500 11px var(--font-mono); color: var(--fg-muted); }
.au-viz .vdown { display: grid; place-items: center; color: var(--fg-muted); }
.au-viz .vdown .ti { font-size: 18px; }
.au-viz .vcap { font: 400 12px var(--font-sans); color: var(--fg-muted); text-align: center; margin: var(--sp-0) 0 0; }

/* state screens (whitelist / success) */
.au-hero-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin: 0 auto var(--sp-5); }
.au-hero-ic .ti { font-size: 26px; }
.au-hero-ic.lock { background: var(--surface-75); color: var(--fg-secondary); }
.au-hero-ic.ok { background: var(--positive-subtle); color: var(--positive); }
.au-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin: 0 0 22px; }
.au-chip { display: inline-flex; align-items: center; gap: var(--sp-2); font: 600 12.5px var(--font-sans); color: var(--positive-ink);
  background: var(--positive-subtle); border-radius: var(--radius-pill); padding: var(--sp-2) var(--sp-4); }
.au-chip .ti { font-size: 14px; }

/* slim step progress (onboarding only) — sits ABOVE the card, 48px clear of it */
.au-steps { display: flex; gap: var(--sp-2); justify-content: center; margin: 0 0 48px; }
.au-steps i { width: 26px; height: 4px; border-radius: var(--radius-pill); background: var(--line-200); }
.au-steps i.on { background: var(--accent); }

/* ============================================================
   MOBIL — auth/onboarding na telefonu a úzkém tabletu.
   ------------------------------------------------------------
   PROČ to musí být tady: .au-2col je pevný grid 1.08fr/1fr, který
   se sám nikdy nesbalí, a .au-col má min-width:0, takže mu zmizí
   min-content podlaha. Na 390px displeji pak obsahovému sloupci
   zbyde ~64px (60 z toho sežere padding) a přetečení tiše uřízne
   .au-card.split{overflow:hidden} — uživatel vidí useknutá slova
   a na 360px mu z Profilu úplně zmizí tlačítko „Přeskočit".
   Vzdušná desktopová sazba (RULES §4) zůstává beze změny.
   Breakpointy drží ladder produktu: 720 / 560.
   ============================================================ */

/* ---- ≤ 720px — dvousloupec → jeden sloupec, dekorace pryč ---- */
@media (max-width: 720px) {
  /* Centrování ve flexu s vyšším obsahem než viewport ořízne HORNÍ hranu
     (nedá se k ní odrolovat) — na mobilu proto zarovnat k začátku. */
  .au-page { padding: var(--sp-6) var(--sp-5); justify-content: flex-start; }

  /* karta bere celou šířku — na telefonu není kam ji centrovat */
  .au-card, .au-card.wide { max-width: 100%; padding: var(--sp-7) var(--sp-6); }
  /* .split musí zůstat bez paddingu (nese ho .au-col) a bez ořezu:
     s vypnutým .au-viz už není co ořezávat a clip jen skrýval chyby. */
  .au-card.split { padding: 0; overflow: visible; }

  /* JEDEN sloupec; min-height 560 by pod obsahem nechal prázdnou díru */
  .au-2col { grid-template-columns: 1fr; min-height: 0; }
  .au-col { padding: var(--sp-7) var(--sp-6); }

  /* .au-viz je čistě dekorativní náhled — na telefonu bral 42 % plochy bez obsahu */
  .au-viz { display: none; }

  /* Palcové cíle. Vědomá odchylka od --control-h (30px): onboarding je
     plnoplošná brána mimo shell, kde primární akci musí jít trefit palcem. */
  .au-btn { height: 44px; font-size: 14px; }
  .au-textlink { padding: var(--sp-3) 0; }
  /* ≥16px = iOS Safari při fokusu pole neautozoomuje (a už nezoomuje zpět) */
  .au-input { height: 44px; font-size: 16px; }

  /* dvojice akcí (Pokračovat / Přeskočit) se vedle sebe nevejde */
  .au-btn-row { flex-wrap: wrap; }
  .au-btn-row .au-btn, .au-btn-row .au-btn.shrink { flex: 1 1 100%; width: 100%; }

  /* 48px rozestupy zdrojů jsou desktopové měřítko — na telefonu roztáhnou krok přes tři obrazovky */
  .au-srcs { gap: var(--sp-6); margin: var(--sp-6) 0; }
  .au-steps { margin: 0 0 var(--sp-6); }
}

/* ---- ≤ 560px — telefon: sazba o stupeň dolů ---- */
@media (max-width: 560px) {
  .au-page { padding: var(--sp-6) var(--sp-4); }
  .au-card, .au-card.wide { padding: var(--sp-6) var(--sp-5); border-radius: var(--radius-lg); }
  .au-card.split { padding: 0; }
  .au-col { padding: var(--sp-6) var(--sp-5); }

  /* 27px titulek se na 320px láme do čtyř řádků */
  .au-title { font-size: 22px; }
  .au-sub { font-size: 14px; margin-bottom: var(--sp-6); }
  .au-brand { margin-bottom: var(--sp-6); }
  .au-foot { margin-top: var(--sp-6); }

  /* OTP: šest boxů si rozdělí dostupnou šířku, ať se vejdou i na 320px */
  .au-otp .box { flex: 1 1 0; width: auto; min-width: 0; max-width: 48px; height: 48px; font-size: 18px; }
}