/* Auth shell (sign-in, sign-up, OTP, password reset) -paired with
 * apps/ui/templates/ui/auth/_auth_base.html.
 *
 * Reuses system classes wherever possible: .form-group / .form-control /
 * .form-errors / .form-help (15), .btn / .btn-lg / .full (10), .alert
 * variants (21), .type-page-title / .type-caption (tokens). Only layout
 * helpers that don't fit any existing primitive live here.
 *
 * Spacing values use the --space-* scale exclusively (--space-1..8).
 * Component-fixed dimensions (topbar height, brand panel column width,
 * icon-box sizes) are documented inline. */

/* ────────────────────────────────────────────────────────────────
   Shell layout
   ──────────────────────────────────────────────────────────────── */
.auth-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  font-family: var(--font);
  color: var(--text);
}

.auth-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.auth-main-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Topbar atoms (.auth-topbar*) live in components/23-topbar.css. */

.auth-locale-form {
  margin: 0;
}

/* Locale pill consolidated into design-system component .locale-pill
   at components/50-locale-pill.css. Template uses class="locale-pill"
   directly. The .auth-locale-form wrapper above stays · it is a
   form-level concern (margin reset), not part of the pill itself. */

/* ────────────────────────────────────────────────────────────────
   Brand panel -compact strip on mobile, tall left column on desktop
   ──────────────────────────────────────────────────────────────── */
.auth-brand-panel {
  padding: var(--space-5);
  background: var(--primary-dark);
  flex-shrink: 0;
}

.auth-brand-panel.muted {
  background: var(--surface-soft);
}

.auth-brand-text {
  margin: 0;
  font-size: var(--font-size-prominent);
  font-weight: 500;
  line-height: 1.55;
  color: var(--on-dark-85);
  text-wrap: pretty;
}

.auth-brand-panel.muted .auth-brand-text {
  color: var(--muted);
}

/* Desktop-only brand content -hidden on mobile, shown in @media block. */
.auth-brand-wordmark {
  display: none;
  width: auto;
}

.auth-brand-features {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
}

.auth-brand-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.auth-brand-feature-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--on-dark-10);
  color: var(--brand-green);
}

.auth-brand-panel.muted .auth-brand-feature-check {
  background: var(--success-bg);
  color: var(--success);
}

.auth-brand-feature-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
}

.auth-brand-feature-title {
  font-size: var(--font-size-body);
  font-weight: 700;
  color: var(--on-dark-90);
}

.auth-brand-feature-desc {
  font-size: var(--font-size-caption);
  line-height: 1.45;
  color: var(--on-dark-64);
}

.auth-brand-panel.muted .auth-brand-feature-title { color: var(--text); }
.auth-brand-panel.muted .auth-brand-feature-desc  { color: var(--muted); }

/* ────────────────────────────────────────────────────────────────
   Content area (hosts the concrete auth form)
   ──────────────────────────────────────────────────────────────── */
.auth-content {
  flex: 1;
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
}

/* ────────────────────────────────────────────────────────────────
   Trust footer
   ──────────────────────────────────────────────────────────────── */
.auth-trust-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--divider);
  background: var(--surface);
  flex-shrink: 0;
}

.auth-trust-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
  font-size: var(--font-size-small);
  font-weight: 500;
  line-height: 1.6;
  color: var(--muted);
}

.auth-trust-link {
  color: var(--muted);
  text-decoration: none;
}

.auth-trust-link:hover {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--on-dark-25);
  text-underline-offset: 3px;
}

.auth-trust-sep {
  color: var(--border);
}

/* ────────────────────────────────────────────────────────────────
   Auth card -reusable wrapper for any auth form (sign-in, sign-up,
   OTP verify, password reset, etc.). Page-specific layout only;
   typography uses .type-page-title + .type-caption, fields use
   .form-group + .form-control + .form-help + .form-errors, submit
   uses .btn.primary.btn-lg.full, alerts use .alert variants.
   ──────────────────────────────────────────────────────────────── */
.auth-card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  overflow: visible;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.auth-card-head {
  padding: var(--space-5) var(--space-4) var(--space-1);
}

/* Subtitle below the h1 -color override on .type-caption */
.auth-card-sub {
  margin: var(--space-1) 0 0;
  color: var(--muted);
}

.auth-card-body {
  padding: var(--space-2) var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Shared-device toggle on the login form -opt-in checkbox that
   writes session["device_kind"] = "shared" on successful sign-in
   (see DeviceKindMiddleware). Two-line copy so casual users don't
   tick it by accident. */
.signin-shared-toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  cursor: pointer;
}

.signin-shared-toggle:hover {
  border-color: var(--border);
}

.signin-shared-toggle input[type="checkbox"] {
  margin: var(--space-0) 0 0;
  flex-shrink: 0;
}

.signin-shared-toggle-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
  min-width: 0;
}

.signin-shared-toggle-label {
  font-size: var(--font-size-caption);
  font-weight: 700;
  color: var(--text);
}

.signin-shared-toggle-help {
  font-size: var(--font-size-small);
  color: var(--muted);
  line-height: 1.4;
}

.signin-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-caption);
}

.signin-alt-link {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}

.signin-alt-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.signin-alt-link.is-disabled {
  color: var(--disabled-text);
  pointer-events: none;
}

/* ────────────────────────────────────────────────────────────────
   Sign-up page (signup.html) -extends the .auth-card.
   ──────────────────────────────────────────────────────────────── */

/* Inline "(optional)" tag rendered next to a field label */
.form-label-optional {
  font-size: var(--font-size-micro);
  font-weight: 500;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  margin-left: var(--space-1);
}

/* Tier picker -Lite / Standard segmented cards + Pro fallback link */
.signup-tier-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.signup-tier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.signup-tier-option {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--surface);
  border: 1.5px solid var(--divider);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  transition: border-color 0.16s ease, background 0.16s ease;
  position: relative;
}

/* Hide the native radio while keeping it focusable for keyboard nav.
   The visible card state is driven by :has(input:checked) below. */
.signup-tier-option input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.signup-tier-option:hover:not(:has(input:checked)) {
  border-color: var(--border);
  background: var(--surface-soft);
}

.signup-tier-option:has(input:checked) {
  background: var(--primary-light);
  border-color: var(--primary);
}

.signup-tier-option:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.signup-tier-option:has(input:disabled) {
  opacity: 0.62;
  cursor: not-allowed;
}

.signup-tier-name {
  font-size: var(--font-size-body);
  font-weight: 700;
  color: var(--text);
}

.signup-tier-option:has(input:checked) .signup-tier-name {
  color: var(--primary);
}

.signup-tier-desc {
  font-size: var(--font-size-small);
  line-height: 1.4;
  color: var(--muted);
}

.signup-tier-foot {
  font-size: var(--font-size-small);
  font-weight: 500;
  color: var(--muted);
}

.signup-tier-foot a {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}

.signup-tier-foot a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Centered alt link below the form (e.g. "Already have an account? Sign in") */
.auth-card-foot-link {
  margin: 0;
  text-align: center;
  font-size: var(--font-size-caption);
  color: var(--muted);
}

.auth-card-foot-link a {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}

.auth-card-foot-link a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ────────────────────────────────────────────────────────────────
   Password reset (3-screen flow) -request / verify / complete.
   The flow reuses .auth-card + .step-chip + .form-group + .alert;
   the helpers below cover only what doesn't fit any primitive.
   ──────────────────────────────────────────────────────────────── */

/* Resend row: link-style submit button + cooldown timer side by side.
   Paired with static/ui/js/auth/resend-cooldown.js (which disables
   the button and renders the seconds while counting down). */
.resend-row {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-caption);
}

.resend-link {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font);
  font-size: var(--font-size-caption);
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
}

.resend-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.resend-link:disabled,
.resend-link[aria-disabled="true"] {
  color: var(--muted);
  cursor: not-allowed;
  text-decoration: none;
  opacity: 0.7;
}

.resend-cooldown-timer {
  color: var(--muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ────────────────────────────────────────────────────────────────
   Tenant select (tenant_select.html) -workspace picker shown
   post-login when the user has multiple tenant memberships.
   ──────────────────────────────────────────────────────────────── */

/* Wrapper: stack of selectable cards, then add-site, then submit. */
.tenant-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* One membership row -a <label> wrapping a hidden radio. The
   :has() rule below paints the active state when its radio is
   checked, matching .signup-tier-option's pattern. */
.tenant-option {
  display: grid;
  grid-template-columns: 36px 1fr 20px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  background: var(--surface);
  border: 1.5px solid var(--divider);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  transition: border-color 0.16s ease, background 0.16s ease;
  position: relative;
}

.tenant-option input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.tenant-option:hover:not(:has(input:checked)) {
  border-color: var(--border);
  background: var(--surface-soft);
}

.tenant-option:has(input:checked) {
  background: var(--primary-light);
  border-color: var(--primary);
}

.tenant-option:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.tenant-option:has(input:disabled) {
  opacity: 0.62;
  cursor: not-allowed;
}

/* Circular initial badge (left column). Pro/Standard get the
   admin-accent palette; Lite stays muted. */
.tenant-option-icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--surface-soft);
  color: var(--muted);
  font-weight: 800;
  font-size: 14px;
}

.tenant-option-icon.is-accent {
  background: var(--admin-accent-bg);
  color: var(--admin-accent);
}

.tenant-option-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
  min-width: 0;
}

.tenant-option-name {
  font-size: var(--font-size-prominent);
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-option-meta {
  font-size: var(--font-size-small);
  color: var(--muted);
}

.tenant-option-chevron {
  color: var(--muted);
  font-weight: 300;
  font-size: var(--font-size-subheading);
  text-align: right;
}

.tenant-option:has(input:checked) .tenant-option-chevron {
  color: var(--primary);
}

/* Pro-owner-only affordance: dashed violet card linking to a new
   restaurant form. Lives below the membership rows, above Continue.
   See TenantSelectView._build_context (can_add_restaurant). */
.add-site-cta {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  width: 100%;
  background: var(--admin-accent-bg);
  border: 1.5px dashed var(--admin-accent-border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  text-decoration: none;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.add-site-cta:hover {
  border-color: var(--admin-accent);
}

.add-site-cta-icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--admin-accent);
  color: var(--surface);
}

.add-site-cta-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
}

.add-site-cta-title {
  font-size: var(--font-size-prominent);
  font-weight: 700;
  color: var(--admin-accent);
}

.add-site-cta-desc {
  font-size: var(--font-size-small);
  color: var(--muted);
}

/* ────────────────────────────────────────────────────────────────
   Desktop split (≥1024px) -2-column grid, tall brand panel left,
   centered form + footer right.
   ──────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .auth-body {
    display: grid;
    grid-template-columns: 380px 1fr;
    flex-direction: row;
  }

  .auth-brand-panel {
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-7);
  }

  .auth-brand-wordmark {
    display: block;
  }

  .auth-brand-text {
    font-size: var(--font-size-subheading);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: var(--letter-spacing-prominent);
    color: var(--on-dark-90);
  }

  .auth-brand-panel.muted .auth-brand-text {
    color: var(--text);
  }

  .auth-brand-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .auth-content {
    padding: var(--space-8);
    align-items: center;
    justify-content: center;
    overflow-y: auto;
  }

  .auth-logout-actions-grid {
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--space-2) + var(--space-0));
  }
}

/* ────────────────────────────────────────────────────────────────
   Logout confirm -identity card, unsaved drafts, sync pre-check
   ──────────────────────────────────────────────────────────────── */
.auth-logout-shell {
  width: min(620px, 100%);
  margin: 0 auto;
}

.auth-logout-card {
  width: min(560px, 100%);
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + var(--space-0));
  box-shadow: var(--shadow-md);
  padding: calc(var(--space-5) + var(--space-0)) var(--space-5) calc(var(--space-4) + var(--space-0));
}

.auth-logout-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.auth-logout-title {
  margin: 0;
}

.auth-logout-sub {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.auth-logout-alert {
  margin-top: calc(var(--space-3) + var(--space-0));
}

.auth-logout-identity {
  margin-top: calc(var(--space-3) + var(--space-0));
  padding: var(--space-3);
}

.auth-logout-identity-label {
  font-size: var(--font-size-caption);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-2);
}

.auth-logout-identity-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.auth-logout-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--surface);
  font-weight: 800;
  font-size: var(--font-size-prominent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.auth-logout-identity-name {
  font-size: var(--font-size-prominent);
  font-weight: 700;
  color: var(--text);
}

.auth-logout-identity-sub {
  font-size: var(--font-size-caption);
  color: var(--muted);
}

.auth-logout-drafts-card {
  margin-top: var(--space-3);
}

.auth-logout-drafts-list {
  max-height: calc(var(--space-8) * 6 + var(--space-4) + var(--space-3));
  overflow: auto;
  padding: 0;
}

.auth-logout-sync-status {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.auth-logout-sync-dot {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: 999px;
  background: var(--success);
  margin-top: var(--space-1);
  flex-shrink: 0;
}

.auth-logout-sync-status--checking .auth-logout-sync-dot {
  background: var(--muted);
}

.auth-logout-sync-status--clear .auth-logout-sync-dot {
  background: var(--success);
}

.auth-logout-sync-status--pending .auth-logout-sync-dot {
  background: var(--warning);
}

.auth-logout-sync-status--error .auth-logout-sync-dot {
  background: var(--error);
}

.auth-logout-sync-detail {
  color: var(--muted);
}

.auth-logout-sync-inspector-link {
  display: inline-block;
  margin-top: var(--space-1);
  color: var(--admin-accent);
  font-weight: 600;
  text-decoration: none;
}

.auth-logout-sync-inspector-link[hidden] {
  display: none;
}

.auth-logout-actions {
  margin-top: var(--space-4);
}

.auth-logout-actions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

[data-logout-submit].is-force {
  background: var(--warning);
  border-color: var(--warning);
}


/* Atlas X.4 · session-expired empty-state lives inside ``.auth-card-body``
   above the sign-in form. The canonical ``.empty-state`` has its own
   vertical padding; we just need to tighten the gap between the
   empty-state and the "Was this you?" aside and the sign-in form
   below so the lock-icon block reads as one continuous explanation. */
.auth-session-expired-aside {
  margin-top: calc(var(--space-3) * -1);
  margin-bottom: var(--space-3);
}