/* ============================================================
   Sign-in gate (AuthGateModal.js)
   ============================================================

   The first gate was a generic BaseModal, and the shared chrome for that has
   had no stylesheet since style.css left index.html: the close button was a
   bare browser button wrapped under a centred title, and the footer buttons
   hung off the card's left edge. The gate now renders its own markup and
   owns all of its styling here.

   Unlayered on purpose (like plans.css): polish.css sizes every
   `.modal-dialog` with high-specificity rules, and the few declarations that
   must beat them carry !important. Colours come from tokens, so
   body[data-theme="light"] re-themes it without a second rule set — except
   the Google button, which follows Google's light button in both themes.
*/

body .modal-overlay.zt-auth-gate-overlay {
  padding: 16px !important;
  opacity: 0;
  transition: opacity 180ms ease;
}
body .modal-overlay.zt-auth-gate-overlay.active { opacity: 1; }

body .modal-overlay .modal-dialog.zt-auth-gate-dialog {
  width: min(420px, calc(100vw - 32px)) !important;
  max-height: calc(100dvh - 32px);
  padding: 0;
  background:
    radial-gradient(120% 70% at 50% 0%,
      color-mix(in srgb, var(--accent-primary, #8b5cf6) 20%, transparent) 0%,
      transparent 70%),
    linear-gradient(180deg, var(--surface-300, #18181b) 0%, var(--surface-200, #111113) 100%);
  color: var(--text-primary, #fafafa);
  transform: translateY(10px) scale(0.98);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
body .modal-overlay.zt-auth-gate-overlay.active .modal-dialog.zt-auth-gate-dialog {
  transform: none;
}

/* ---------- Close ---------- */
.zt-auth-gate__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary, #a1a1aa);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.zt-auth-gate__close:hover {
  background: color-mix(in srgb, var(--text-primary, #fafafa) 8%, transparent);
  border-color: var(--border-default, rgba(255, 255, 255, 0.1));
  color: var(--text-primary, #fafafa);
}

/* ---------- Layout ---------- */
.zt-auth-gate {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* The dialog is a column flex with overflow hidden; without min-height the
     body cannot shrink below its content and a short window clips the
     buttons instead of scrolling to them. */
  flex: 1 1 auto;
  min-height: 0;
  padding: 28px 28px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.zt-auth-gate__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.zt-auth-gate__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 4px;
  border-radius: 14px;
  background: var(--grad-accent, linear-gradient(135deg, #a78bfa 0%, #ec4899 100%));
  color: #fff;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent-primary, #8b5cf6) 40%, transparent);
}
.zt-auth-gate__badge--done {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35);
}
.zt-auth-gate__badge .v6-icon { width: 24px; height: 24px; }

.zt-auth-gate__title {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text-primary, #fafafa);
}
.zt-auth-gate__lead {
  margin: 0;
  text-wrap: balance;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary, #a1a1aa);
}

/* ---------- What was asked for ---------- */
.zt-auth-gate__action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-400, #1f1f23);
  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.1));
}
.zt-auth-gate__action-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent-primary, #8b5cf6) 18%, transparent);
  color: var(--accent-primary, #8b5cf6);
}
.zt-auth-gate__action-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.zt-auth-gate__action-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #fafafa);
  overflow-wrap: anywhere;
}
.zt-auth-gate__action-meta {
  text-wrap: pretty;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-secondary, #a1a1aa);
  font-variant-numeric: tabular-nums;
}

/* ---------- Reassurance ---------- */
.zt-auth-gate__points {
  list-style: none;
  margin: 0;
  padding: 0 2px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.zt-auth-gate__points li,
.zt-auth-gate__draft {
  text-wrap: pretty;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary, #a1a1aa);
}
.zt-auth-gate__check {
  flex-shrink: 0;
  margin-top: 2px;
  color: color-mix(in srgb, var(--accent-success, #22c55e) 80%, var(--text-primary, #fafafa));
  stroke-width: 3;
}

/* ---------- Notices (save failed / sign-in didn't finish) ---------- */
.zt-auth-gate__notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-warning, #f59e0b) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-warning, #f59e0b) 40%, transparent);
}
.zt-auth-gate__notice-icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--accent-warning, #f59e0b);
}
.zt-auth-gate__notice-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary, #a1a1aa);
}
.zt-auth-gate__notice-text strong {
  font-size: 13.5px;
  color: var(--text-primary, #fafafa);
}

/* ---------- Buttons ---------- */
.zt-auth-gate__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.zt-auth-gate__google,
.zt-auth-gate__primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background 120ms ease, box-shadow 120ms ease, filter 120ms ease, transform 80ms ease;
}
.zt-auth-gate__google:active:not([aria-disabled="true"]),
.zt-auth-gate__primary:active { transform: translateY(1px); }

/* Google's light sign-in button: white, a neutral border, dark text and the
   four-colour mark — recognisable in either app theme. */
.zt-auth-gate__google {
  background: #ffffff;
  color: #1f1f1f;
  border: 1px solid #747775;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.zt-auth-gate__google:hover:not([aria-disabled="true"]) {
  background: #f7f8f8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.zt-auth-gate__google[aria-disabled="true"] {
  cursor: progress;
  color: #444746;
}
.zt-auth-gate__g {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.zt-auth-gate__primary {
  border: 1px solid transparent;
  background: var(--grad-accent, linear-gradient(135deg, #a78bfa 0%, #ec4899 100%));
  color: #ffffff;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent-primary, #8b5cf6) 35%, transparent);
}
.zt-auth-gate__primary:hover { filter: brightness(1.08); }
.zt-auth-gate__primary .v6-icon { width: 18px; height: 18px; }

.zt-auth-gate__later {
  align-self: center;
  min-height: 36px;
  padding: 6px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary, #a1a1aa);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.zt-auth-gate__later:hover {
  background: color-mix(in srgb, var(--text-primary, #fafafa) 7%, transparent);
  color: var(--text-primary, #fafafa);
}

.zt-auth-gate__close:focus-visible,
.zt-auth-gate__later:focus-visible,
.zt-auth-gate__primary:focus-visible,
.zt-auth-gate__google:focus-visible {
  outline: 2px solid var(--accent-primary, #8b5cf6);
  outline-offset: 2px;
}

.zt-auth-gate__spinner {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(31, 31, 31, 0.2);
  border-top-color: #1f1f1f;
  animation: zt-auth-gate-spin 0.8s linear infinite;
}
@keyframes zt-auth-gate-spin { to { transform: rotate(360deg); } }

.zt-auth-gate__fine {
  text-wrap: balance;
  margin: 2px 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted, #71717a);
}

/* ---------- Small screens ---------- */
@media (max-width: 480px) {
  .zt-auth-gate { padding: 28px 18px 18px; gap: 16px; }
  .zt-auth-gate__title { font-size: 19px; }
}

/* The OS setting, and Settings → Motion → "Always reduce". */
@media (prefers-reduced-motion: reduce) {
  body .modal-overlay.zt-auth-gate-overlay,
  body .modal-overlay .modal-dialog.zt-auth-gate-dialog { transition: none; }
  body .modal-overlay .modal-dialog.zt-auth-gate-dialog { transform: none; }
  .zt-auth-gate__spinner { animation-duration: 2.4s; }
}
body.v6-reduced-motion .modal-overlay.zt-auth-gate-overlay,
body.v6-reduced-motion .modal-overlay .modal-dialog.zt-auth-gate-dialog { transition: none; }
body.v6-reduced-motion .modal-overlay .modal-dialog.zt-auth-gate-dialog { transform: none; }
body.v6-reduced-motion .zt-auth-gate__spinner { animation-duration: 2.4s; }