/* Login is a brand introduction followed by one focused action. */
.tenant-gate {
  width: min(440px, calc(100% - 48px));
  min-height: 100svh;
  padding: max(var(--space-2xl), var(--safe-top)) 0 max(var(--space-2xl), var(--safe-bottom));
}

.auth-layout {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding-inline: var(--space-xs);
  color: var(--ink);
  text-decoration: none;
}

.auth-brand img {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 16px;
}

.auth-brand > span {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-brand strong {
  font-size: 1.35rem;
  line-height: 1.15;
  letter-spacing: 0.04em;
}

.auth-brand small {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.tenant-gate-card {
  padding: var(--space-xl);
  gap: var(--space-xl);
  border-radius: var(--radius-card);
}

.auth-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.auth-heading h1 {
  font-size: 1.45rem;
  line-height: 1.3;
}

.auth-heading p {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-control);
  line-height: 1.6;
}

.tenant-token-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.tenant-token-form .field {
  min-height: 64px;
}

.tenant-token-form input {
  letter-spacing: 0.08em;
  font-size: 1rem;
}

.tenant-token-form .secondary-action {
  width: 100%;
  min-height: var(--control-height-lg);
  justify-content: space-between;
}

.auth-create {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.auth-create > span,
.tenant-gate-hint {
  color: var(--muted);
  font-size: var(--type-control-sm);
  line-height: 1.6;
}

.tenant-gate-hint:empty {
  display: none;
}

.tenant-create-action {
  min-height: var(--control-height);
}

.auth-home {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-sm);
  min-height: var(--control-height-sm);
  padding-inline: var(--space-xs);
  color: var(--muted);
  font-size: var(--type-control-sm);
  text-decoration: none;
}

@media (max-width: 360px) {
  .tenant-gate { width: calc(100% - 32px); }
  .tenant-gate-card { padding: var(--space-lg); }
}

.public-preview-notice { width: min(var(--layout-max-width), calc(100% - 32px)); margin: max(var(--space-lg), var(--safe-top)) auto 0; padding: var(--space-lg); display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); background: var(--surface-panel); border: 1px solid var(--hairline-strong); border-radius: var(--control-radius); }
.public-preview-notice strong { display: inline-flex; gap: var(--space-sm); align-items: center; font-size: var(--type-control); }
.public-preview-notice p { margin: var(--space-sm) 0 0; color: var(--muted); font-size: var(--type-control-sm); line-height: 1.6; max-width: 70ch; }
.public-preview-notice a { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: var(--control-height); color: var(--accent); font-size: var(--type-control); font-weight: 700; text-decoration: none; white-space: nowrap; }
.preview-mode .sync-preset { display: none; }
@media (max-width: 680px) { .public-preview-notice { flex-direction: column; align-items: flex-start; gap: var(--space-sm); } }