/*
 * TW public identity and onboarding surface.
 *
 * Owns only the composition of unauthenticated account screens. Field,
 * button, checkbox, focus and theme geometry remain in shared TW owners.
 */

.tw-auth-page {
  min-height: 100dvh;
  background:
    radial-gradient(
      circle at 12% 18%,
      color-mix(in srgb, var(--tw-color-ice) 74%, transparent) 0,
      transparent 34%
    ),
    radial-gradient(
      circle at 88% 82%,
      color-mix(in srgb, var(--tw-color-peach) 38%, transparent) 0,
      transparent 30%
    ),
    var(--tw-color-bg);
}

.tw-auth-shell {
  display: grid;
  min-height: 100dvh;
  grid-template-rows: 54px minmax(0, 1fr) 42px;
}

.tw-auth-topbar,
.tw-auth-footer {
  display: flex;
  width: 100%;
  padding-inline: clamp(var(--tw-space-4), 4vw, var(--tw-space-12));
  align-items: center;
  justify-content: space-between;
  gap: var(--tw-space-3);
}

.tw-auth-topbar {
  border-bottom: 1px solid
    color-mix(in srgb, var(--tw-color-border) 72%, transparent);
}

.tw-auth-brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--tw-space-2);
  font-size: var(--tw-font-heading);
  font-weight: var(--tw-weight-semibold);
  line-height: var(--tw-line-heading);
}

.tw-auth-brand__mark {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: var(--tw-color-on-primary);
  background: var(--tw-color-primary);
  border-radius: var(--tw-radius);
  font-size: var(--tw-font-ui);
  font-weight: var(--tw-weight-bold);
  line-height: var(--tw-line-ui);
}

.tw-auth-stage {
  display: grid;
  width: min(100% - 32px, 980px);
  margin-inline: auto;
  padding-block: clamp(var(--tw-space-6), 7vh, 72px);
  grid-template-columns: minmax(260px, 1fr) minmax(360px, 416px);
  align-items: center;
  gap: clamp(var(--tw-space-8), 8vw, 96px);
}

.tw-auth-context {
  display: grid;
  max-width: 460px;
  align-content: center;
  gap: var(--tw-space-5);
}

.tw-auth-eyebrow {
  margin: 0;
  color: var(--tw-color-primary);
  font-size: var(--tw-font-meta);
  font-weight: var(--tw-weight-bold);
  line-height: var(--tw-line-meta);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.tw-auth-context h1 {
  max-width: 430px;
  margin: 0;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: var(--tw-weight-semibold);
  line-height: 1.08;
  letter-spacing: -.025em;
}

.tw-auth-context > p:not(.tw-auth-eyebrow) {
  max-width: 430px;
  margin: 0;
  color: var(--tw-color-text-muted);
  font-size: 14px;
  line-height: 21px;
}

.tw-auth-benefits {
  display: grid;
  margin: 0;
  padding: 0;
  gap: var(--tw-space-3);
  list-style: none;
}

.tw-auth-benefits li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: var(--tw-space-2);
  color: var(--tw-color-text-muted);
  font-size: var(--tw-font-ui);
  line-height: var(--tw-line-ui);
}

.tw-auth-benefits .tw-icon {
  margin-top: 1px;
  color: var(--tw-color-success);
}

.tw-auth-panel {
  width: 100%;
  padding: var(--tw-space-6);
  background: color-mix(
    in srgb,
    var(--tw-color-surface-raised) 94%,
    transparent
  );
  border: 1px solid var(--tw-color-border);
  border-radius: var(--tw-radius-workspace);
  box-shadow: var(--tw-shadow-sm);
  backdrop-filter: blur(16px);
}

.tw-auth-panel__header {
  display: grid;
  margin-bottom: var(--tw-space-5);
  gap: var(--tw-space-2);
}

.tw-auth-panel__header h2 {
  margin: 0;
  font-size: var(--tw-font-title);
  font-weight: var(--tw-weight-semibold);
  line-height: var(--tw-line-title);
}

.tw-auth-panel__header p,
.tw-auth-panel__note {
  margin: 0;
  color: var(--tw-color-text-muted);
  font-size: var(--tw-font-ui);
  line-height: var(--tw-line-ui);
}

.tw-auth-form {
  display: grid;
  gap: var(--tw-space-4);
}

.tw-auth-field {
  display: grid;
  gap: var(--tw-space-1-5);
}

.tw-auth-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tw-space-2);
  font-size: var(--tw-font-ui);
  font-weight: var(--tw-weight-semibold);
  line-height: var(--tw-line-ui);
}

.tw-auth-field__control {
  position: relative;
}

.tw-auth-field__control .tw-input {
  min-height: var(--tw-control-large);
}

.tw-auth-field__control--password .tw-input {
  padding-right: 42px;
}

.tw-auth-password-toggle {
  position: absolute;
  top: 50%;
  right: var(--tw-space-1);
  display: grid;
  width: var(--tw-control-compact);
  height: var(--tw-control-compact);
  padding: 0;
  place-items: center;
  color: var(--tw-color-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--tw-radius);
  transform: translateY(-50%);
}

.tw-auth-password-toggle:hover {
  color: var(--tw-color-text);
  background: var(--tw-color-surface-subtle);
}

.tw-auth-help,
.tw-auth-error {
  margin: 0;
  font-size: var(--tw-font-meta);
  line-height: var(--tw-line-meta);
}

.tw-auth-help {
  color: var(--tw-color-text-muted);
}

.tw-auth-error {
  color: var(--tw-color-danger);
}

.tw-auth-form-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--tw-space-3);
}

.tw-auth-check {
  display: inline-flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--tw-space-2);
  color: var(--tw-color-text-muted);
  font-size: var(--tw-font-ui);
  line-height: var(--tw-line-ui);
}

.tw-auth-check .tw-check-input {
  margin-top: 1px;
  flex: 0 0 var(--tw-checkbox-size);
}

.tw-auth-link {
  color: var(--tw-color-primary);
  font-size: var(--tw-font-ui);
  font-weight: var(--tw-weight-medium);
  line-height: var(--tw-line-ui);
}

.tw-auth-link:hover {
  color: var(--tw-color-primary-hover);
}

.tw-auth-submit {
  width: 100%;
  min-height: var(--tw-control-large);
}

.tw-auth-divider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--tw-space-3);
  color: var(--tw-color-text-muted);
  font-size: var(--tw-font-meta);
  line-height: var(--tw-line-meta);
}

.tw-auth-divider::before,
.tw-auth-divider::after {
  height: 1px;
  content: "";
  background: var(--tw-color-border);
}

.tw-auth-panel__footer {
  margin-top: var(--tw-space-5);
  padding-top: var(--tw-space-4);
  color: var(--tw-color-text-muted);
  border-top: 1px solid var(--tw-color-border);
  font-size: var(--tw-font-ui);
  line-height: var(--tw-line-ui);
  text-align: center;
}

.tw-auth-alert {
  display: grid;
  padding: var(--tw-space-3);
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: var(--tw-space-2);
  color: var(--tw-color-text-muted);
  background: var(--tw-color-surface-subtle);
  border: 1px solid var(--tw-color-border);
  border-radius: var(--tw-radius);
  font-size: var(--tw-font-ui);
  line-height: var(--tw-line-ui);
}

.tw-auth-alert--warning {
  color: var(--tw-color-warning);
  background: color-mix(
    in srgb,
    var(--tw-color-warning-soft) 68%,
    var(--tw-color-surface-raised)
  );
}

.tw-auth-alert--success .tw-icon {
  color: var(--tw-color-success);
}

.tw-auth-code {
  height: 48px;
  padding-inline: var(--tw-space-4);
  font-family: var(--tw-font-mono);
  font-size: var(--tw-font-title);
  font-variant-numeric: tabular-nums;
  letter-spacing: .42em;
  text-align: center;
}

.tw-auth-progress {
  display: grid;
  margin: 0;
  padding: 0;
  gap: var(--tw-space-1);
  list-style: none;
}

.tw-auth-progress li {
  display: grid;
  min-height: 42px;
  padding: var(--tw-space-2);
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: var(--tw-space-2);
  color: var(--tw-color-text-muted);
  border-radius: var(--tw-radius);
}

.tw-auth-progress li[aria-current="step"] {
  color: var(--tw-color-text);
  background: var(--tw-color-accent);
}

.tw-auth-progress__mark {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: var(--tw-color-text-muted);
  background: var(--tw-color-surface-raised);
  border: 1px solid var(--tw-color-border-strong);
  border-radius: var(--tw-radius-dot);
}

.tw-auth-progress li.is-complete .tw-auth-progress__mark {
  color: var(--tw-color-on-primary);
  background: var(--tw-color-success);
  border-color: var(--tw-color-success);
}

.tw-auth-progress strong,
.tw-auth-progress span {
  display: block;
}

.tw-auth-progress strong {
  color: inherit;
  font-size: var(--tw-font-ui);
  line-height: var(--tw-line-ui);
}

.tw-auth-progress span {
  margin-top: var(--tw-space-0-5);
  font-size: var(--tw-font-meta);
  line-height: var(--tw-line-meta);
}

.tw-auth-plans {
  display: grid;
  margin-block: var(--tw-space-4);
  gap: var(--tw-space-2);
}

.tw-auth-plan {
  display: grid;
  min-height: 52px;
  padding: var(--tw-space-2) var(--tw-space-3);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tw-space-3);
  background: var(--tw-color-surface);
  border: 1px solid var(--tw-color-border);
  border-radius: var(--tw-radius);
}

.tw-auth-plan strong,
.tw-auth-plan span {
  display: block;
}

.tw-auth-plan strong {
  font-size: var(--tw-font-ui);
  line-height: var(--tw-line-ui);
}

.tw-auth-plan span {
  color: var(--tw-color-text-muted);
  font-size: var(--tw-font-meta);
  line-height: var(--tw-line-meta);
}

.tw-auth-footer {
  justify-content: center;
  color: var(--tw-color-text-muted);
  font-size: var(--tw-font-meta);
  line-height: var(--tw-line-meta);
}

.tw-auth-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tw-space-4);
}

@media (max-width: 760px) {
  .tw-auth-stage {
    width: min(100% - 24px, 440px);
    padding-block: var(--tw-space-6);
    grid-template-columns: minmax(0, 1fr);
    gap: var(--tw-space-6);
  }

  .tw-auth-context {
    gap: var(--tw-space-3);
  }

  .tw-auth-context h1 {
    font-size: 28px;
    line-height: 32px;
  }

  .tw-auth-benefits {
    display: none;
  }
}

@media (max-width: 460px) {
  .tw-auth-topbar,
  .tw-auth-footer {
    padding-inline: var(--tw-space-3);
  }

  .tw-auth-panel {
    padding: var(--tw-space-5) var(--tw-space-4);
  }

  .tw-auth-form-row {
    align-items: flex-start;
  }
}