/* Authentication is a standalone layout, but it speaks the same visual
 * language as the workspace. tokens.css is loaded before this file by
 * security/base.html and remains the authority for colour, type and spacing.
 *
 * Oracle — apps/shared_ui/static/tokens.css. Every colour, size, gap and
 * radius here names a `--ui-*` property declared there. This file declares
 * no custom property of its own and must not: a name that only auth.css
 * knows is a second palette, and an undeclared one is worse than a wrong
 * one, because the browser discards the entire declaration rather than
 * falling back (measured 2026-08-15, finding UX-3: `--line` on the
 * business-registration fieldset computed to `border: 0px none`).
 *
 * Scope fence — owns the sign-in, registration and account-recovery
 * screens rendered under templates/security/ (Flask-Security's own markup
 * included, which is why several selectors reach for `.fs-div`). Does NOT
 * own the workspace shell (shell.css) or the shared component library
 * (components.css); duplicating a rule from either of those here is a
 * defect, not a convenience.
 *
 * Update together on every touch (known and accepted on 2026-08-15):
 * templates/security/base.html loads this file after tokens.css and is the
 * only page that does; tests/e2e/front/test_shared_ui_design_system.py
 * fails if any property consumed here stops being declared in tokens.css.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 20rem;
  background: var(--ui-paper);
}

body {
  margin: 0;
}

.auth-page {
  min-height: 100vh;
  background: var(--ui-paper);
  color: var(--ui-ink);
  font-family: var(--ui-font-sans);
  font-size: var(--ui-size-body);
  line-height: var(--ui-lh);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* The keyboard's only way of knowing where it is. Nothing below may take
 * it back: the field rule used to carry `outline: none`, and because its
 * selector is more specific than this one it won the cascade and left a
 * keyboard user with nothing but a 3px wash on the input (removed
 * 2026-08-15 with the rest of UX-3). A control that needs a different
 * ring changes the ring, it does not delete it. */
.auth-page :focus-visible {
  outline: 2px solid var(--ui-stamp);
  outline-offset: 3px;
}

.auth-skip-link {
  position: fixed;
  z-index: 10;
  top: var(--ui-s3);
  left: var(--ui-s3);
  padding: var(--ui-s2) var(--ui-s3);
  border-radius: var(--ui-r2);
  background: var(--ui-stamp);
  color: var(--ui-ink-inverse);
  font-weight: var(--ui-weight-medium);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--ui-s5)));
}

.auth-skip-link:focus {
  transform: translateY(0);
}

.auth-shell {
  display: grid;
  align-content: center;
  gap: var(--ui-s5);
  width: min(100% - var(--ui-s6), 29rem);
  min-height: 100vh;
  margin-inline: auto;
  padding-block: var(--ui-s7);
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-s3);
  width: fit-content;
  color: var(--ui-ink);
  text-decoration: none;
}

.auth-brand-mark {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: var(--ui-r2);
  background: var(--ui-stamp);
  color: var(--ui-ink-inverse);
  font-size: var(--ui-size-subtitle);
  font-weight: var(--ui-weight-strong);
}

.auth-brand strong,
.auth-brand small {
  display: block;
}

.auth-brand strong {
  font-size: var(--ui-size-subtitle);
  font-weight: var(--ui-weight-strong);
  letter-spacing: var(--ui-track-display);
  line-height: var(--ui-lh-tight);
}

.auth-brand small {
  margin-top: var(--ui-s1);
  color: var(--ui-ink-faint);
  font-size: var(--ui-size-small);
  line-height: var(--ui-lh-snug);
}

.auth-card {
  padding: var(--ui-s6);
  border: 1px solid var(--ui-rule);
  border-radius: var(--ui-r3);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
}

.auth-card-wide {
  width: min(48rem, calc(100vw - var(--ui-s6)));
  margin-left: 50%;
  transform: translateX(-50%);
}

.auth-card h1 {
  margin: 0;
  font-size: var(--ui-size-display);
  font-weight: var(--ui-weight-strong);
  letter-spacing: var(--ui-track-display);
  line-height: var(--ui-lh-tight);
}

.auth-card h2 {
  font-size: var(--ui-size-subtitle);
}

.auth-intro {
  max-width: var(--ui-measure-prose);
  margin: var(--ui-s2) 0 var(--ui-s5);
  color: var(--ui-ink-soft);
}

.auth-google,
.auth-action,
.auth-card input[type="submit"],
.auth-card button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ui-control);
  padding: var(--ui-s2) var(--ui-s4);
  border: 1px solid var(--ui-rule-strong);
  border-radius: var(--ui-r2);
  font: inherit;
  font-weight: var(--ui-weight-medium);
  line-height: var(--ui-lh-snug);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--ui-motion-quick) var(--ui-ease),
    border-color var(--ui-motion-quick) var(--ui-ease),
    color var(--ui-motion-quick) var(--ui-ease);
}

.auth-google {
  width: 100%;
  gap: var(--ui-s2);
  background: var(--ui-surface);
  color: var(--ui-ink);
}

.auth-google:hover,
.auth-action-secondary:hover {
  border-color: var(--ui-ink-faint);
  background: var(--ui-surface-sunk);
}

.auth-google-mark {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  border: 1px solid var(--ui-rule);
  border-radius: var(--ui-r-round);
  background: var(--ui-surface);
  color: #4285f4;
  font-size: var(--ui-size-small);
  font-weight: var(--ui-weight-strong);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--ui-s3);
  margin-block: var(--ui-s5);
  color: var(--ui-ink-faint);
  font-size: var(--ui-size-small);
  white-space: nowrap;
}

.auth-divider::before,
.auth-divider::after {
  width: 100%;
  height: 1px;
  background: var(--ui-rule);
  content: "";
}

.auth-card form {
  display: grid;
  gap: var(--ui-s4);
}

/* Flask-Security's field macro wraps each control in an .fs-div. */
.auth-card form > .fs-div {
  display: grid;
  gap: var(--ui-s2);
  margin: 0;
}

.auth-card form > .fs-div:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: var(--ui-s2);
}

.auth-card form > .fs-div:has(input[type="checkbox"]) input {
  order: -1;
}

/* render_field_errors emits an empty CSRF wrapper when validation passes. */
.auth-card form > #csrf_token-ctr:not(:has(.fs-error-msg)) {
  display: none;
}

.auth-card label {
  color: var(--ui-ink);
  cursor: pointer;
  font-size: var(--ui-size-small);
  font-weight: var(--ui-weight-medium);
}

.auth-card input:not([type="checkbox"]):not([type="submit"]) {
  width: 100%;
  min-height: var(--ui-control);
  padding: var(--ui-s2) var(--ui-s3);
  border: 1px solid var(--ui-rule-strong);
  border-radius: var(--ui-r2);
  background: var(--ui-surface);
  color: var(--ui-ink);
  font: inherit;
}

.auth-card input:not([type="checkbox"]):not([type="submit"]):hover {
  border-color: var(--ui-ink-faint);
}

.auth-card input:not([type="checkbox"]):not([type="submit"]):focus {
  border-color: var(--ui-stamp);
  box-shadow: 0 0 0 3px var(--ui-stamp-wash);
}

.auth-card input::placeholder {
  color: var(--ui-ink-faint);
}

.auth-card input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0 var(--ui-s2) 0 0;
  accent-color: var(--ui-stamp);
  vertical-align: -0.12rem;
}

.auth-card input[type="submit"],
.auth-card button,
.auth-action {
  border-color: var(--ui-stamp);
  background: var(--ui-stamp);
  color: var(--ui-ink-inverse);
}

.auth-card input[type="submit"] {
  width: 100%;
  margin-top: var(--ui-s1);
}

.auth-card input[type="submit"]:hover,
.auth-card button:hover,
.auth-action:hover {
  border-color: var(--ui-stamp-deep);
  background: var(--ui-stamp-deep);
}

.auth-card input:disabled,
.auth-card button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Both field errors and Flask-Security flash messages render as lists. */
.auth-card form ul,
.auth-card > ul {
  margin: 0;
  padding: var(--ui-s3) var(--ui-s4) var(--ui-s3) 2rem;
  border: 1px solid var(--ui-status-failed-ink);
  border-radius: var(--ui-r2);
  background: var(--ui-status-failed-wash);
  color: var(--ui-status-failed-ink);
  font-size: var(--ui-size-small);
}

.auth-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-s2) var(--ui-s4);
  margin-top: var(--ui-s5);
  padding-top: var(--ui-s4);
  border-top: 1px solid var(--ui-rule);
}

.auth-links a,
.auth-text-link {
  color: var(--ui-stamp);
  font-size: var(--ui-size-small);
  font-weight: var(--ui-weight-medium);
  text-underline-offset: 0.18em;
}

.auth-links a:hover,
.auth-text-link:hover {
  color: var(--ui-stamp-deep);
}

.auth-trust {
  margin: 0;
  color: var(--ui-ink-faint);
  font-size: var(--ui-size-small);
  text-align: center;
}

.auth-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ui-s5);
  padding-bottom: var(--ui-s5);
  border-bottom: 1px solid var(--ui-rule);
}

.auth-eyebrow {
  margin: 0 0 var(--ui-s2);
  color: var(--ui-ink-faint);
  font-family: var(--ui-font-mono);
  font-size: var(--ui-size-micro);
  font-weight: var(--ui-weight-medium);
  letter-spacing: var(--ui-track-micro);
  text-transform: uppercase;
}

.auth-text-link {
  flex: none;
  white-space: nowrap;
}

.auth-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-s4);
  margin-top: var(--ui-s5);
}

.auth-method {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-s3);
  min-width: 0;
  padding: var(--ui-s4);
  border: 1px solid var(--ui-rule);
  border-radius: var(--ui-r3);
  background: var(--ui-surface);
}

.auth-method-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: var(--ui-r2);
  background: var(--ui-stamp-wash);
  color: var(--ui-stamp);
  font-family: var(--ui-font-mono);
  font-weight: var(--ui-weight-strong);
}

.auth-method-icon-google {
  border: 1px solid var(--ui-rule);
  background: var(--ui-surface);
  color: #4285f4;
}

.auth-method-copy {
  min-width: 0;
  flex: 1;
}

.auth-method-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ui-s2);
}

.auth-method-title h2 {
  margin: var(--ui-s1) 0 0;
  color: var(--ui-ink);
  line-height: var(--ui-lh-snug);
}

.auth-method-copy p {
  margin: var(--ui-s3) 0 var(--ui-s1);
  overflow-wrap: anywhere;
}

.auth-method-copy small {
  display: block;
  color: var(--ui-ink-soft);
  font-size: var(--ui-size-small);
  line-height: var(--ui-lh);
}

.auth-status {
  flex: none;
  padding: var(--ui-s1) var(--ui-s2);
  border: 1px solid var(--ui-rule);
  border-radius: var(--ui-r-round);
  background: var(--ui-surface-sunk);
  color: var(--ui-ink-soft);
  font-size: var(--ui-size-micro);
  font-weight: var(--ui-weight-medium);
  line-height: var(--ui-lh-snug);
  white-space: nowrap;
}

.auth-status-connected {
  border-color: var(--ui-outcome-pass-ink);
  background: var(--ui-outcome-pass-wash);
  color: var(--ui-outcome-pass-ink);
}

.auth-status-warning {
  border-color: var(--ui-outcome-undetermined-ink);
  background: var(--ui-outcome-undetermined-wash);
  color: var(--ui-outcome-undetermined-ink);
}

/* A card's own action, not the page's — it takes the small rung of the
 * control ladder so it cannot compete with the primary submit below. */
.auth-action {
  min-height: var(--ui-control-small);
  margin-top: var(--ui-s4);
  font-size: var(--ui-size-small);
}

.auth-action-secondary {
  border-color: var(--ui-rule-strong);
  background: var(--ui-surface);
  color: var(--ui-ink);
}

.auth-method-note {
  margin: var(--ui-s5) 0 0;
  padding-top: var(--ui-s4);
  border-top: 1px solid var(--ui-rule);
  color: var(--ui-ink-soft);
  font-size: var(--ui-size-small);
}

.auth-state {
  margin-top: var(--ui-s5);
  padding: var(--ui-s4);
  border: 1px solid var(--ui-rule);
  border-radius: var(--ui-r3);
  background: var(--ui-surface-sunk);
}

.auth-state h2 {
  margin: 0 0 var(--ui-s2);
  color: var(--ui-ink);
}

.auth-state p {
  margin: 0;
  color: var(--ui-ink-soft);
}

.auth-state-warning {
  border-color: var(--ui-outcome-undetermined-ink);
  background: var(--ui-outcome-undetermined-wash);
}

.auth-success {
  margin-bottom: var(--ui-s5);
  padding: var(--ui-s3) var(--ui-s4);
  border: 1px solid var(--ui-outcome-pass-ink);
  border-radius: var(--ui-r2);
  background: var(--ui-outcome-pass-wash);
  color: var(--ui-outcome-pass-ink);
}

.auth-success strong {
  display: block;
}

@media (max-width: 42rem) {
  .auth-shell {
    align-content: start;
    width: min(100% - var(--ui-s4), 29rem);
    padding-block: var(--ui-s5);
  }

  .auth-card,
  .auth-method {
    padding: var(--ui-s4);
  }

  .auth-card-wide {
    width: calc(100vw - var(--ui-s4));
  }

  .auth-heading-row {
    display: block;
  }

  .auth-heading-row .auth-text-link {
    display: inline-block;
    margin-top: var(--ui-s3);
  }

  .auth-methods {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-page *,
  .auth-page *::before,
  .auth-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Посадочная «registrace odeslána»: галочка и подсказка про спам. */
.auth-sent-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ui-s7);
  height: var(--ui-s7);
  margin: 0 auto var(--ui-s4);
  border-radius: var(--ui-r-round);
  background: var(--ui-outcome-pass-wash);
  color: var(--ui-outcome-pass-ink);
  font-size: var(--ui-size-display);
  font-weight: var(--ui-weight-strong);
}

.auth-hint {
  margin-top: var(--ui-s5);
  padding: var(--ui-s3) var(--ui-s4);
  border: 1px solid var(--ui-stamp-rule);
  border-radius: var(--ui-r2);
  background: var(--ui-stamp-wash);
  color: var(--ui-ink-soft);
  font-size: var(--ui-size-small);
  line-height: var(--ui-lh);
}

/* Бизнес-рега (REG, D-N23): секции формы, ARES-лукап, ветки ČR/зарубежí.
 *
 * These rules arrived from another tree and spoke another vocabulary —
 * `--line`, `--accent`, `--accent-2`, `--text`, `--muted`, none of which
 * tokens.css has ever declared. An undeclared custom property does not
 * fall back to something sane, it makes the whole declaration invalid:
 * measured on app.mailgun.cz on 2026-08-15 the fieldset's border computed
 * to `0px none` and the ARES button lost its outline entirely, on a screen
 * that is the first thing a paying customer sees (finding UX-3). Rewritten
 * on the shared scale; the literal rgba() paper of the same vintage went
 * with them, because it was a dark-theme surface painted onto a light
 * page. */
.auth-fieldset {
  display: grid;
  gap: var(--ui-s4);
  margin: 0;
  padding: var(--ui-s4);
  border: 1px solid var(--ui-rule);
  border-radius: var(--ui-r3);
  background: var(--ui-surface-sunk);
}

.auth-fieldset legend {
  padding: 0 var(--ui-s2);
  color: var(--ui-ink-faint);
  font-family: var(--ui-font-mono);
  font-size: var(--ui-size-micro);
  font-weight: var(--ui-weight-medium);
  letter-spacing: var(--ui-track-micro);
  text-transform: uppercase;
}

.auth-check-row {
  display: flex;
  align-items: center;
  gap: var(--ui-s2);
}

.auth-check-row label {
  margin: 0;
}

.auth-check-row input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--ui-stamp);
}

.auth-ares-row {
  display: flex;
  align-items: flex-end;
  gap: var(--ui-s3);
}

.auth-ares-ico {
  flex: 1;
}

/* «Načíst z ARES» stands beside the IČO field and must line up with it,
 * so it takes the same control height as the input above. */
.auth-secondary-button {
  min-height: var(--ui-control);
  padding: 0 var(--ui-s4);
  border: 1px solid var(--ui-rule-strong);
  border-radius: var(--ui-r2);
  background: var(--ui-surface);
  color: var(--ui-ink);
  font: inherit;
  font-weight: var(--ui-weight-medium);
  box-shadow: none;
  cursor: pointer;
  white-space: nowrap;
}

.auth-secondary-button:hover {
  border-color: var(--ui-ink-faint);
  background: var(--ui-surface-sunk);
}

.auth-secondary-button:disabled {
  opacity: 0.6;
  cursor: wait;
}

.auth-field-note {
  margin: 0;
  color: var(--ui-ink-soft);
  font-size: var(--ui-size-small);
  line-height: var(--ui-lh-snug);
}

#czech_company_branch[hidden],
#country_row[hidden],
#vat_row[hidden] {
  display: none;
}