/* ============================================================================
   Auth pages — login.html, signup.html, account.html, subscribe.html,
   subscribe-success.html, subscribe-cancel.html
   ============================================================================
   Goal: a familiar, narrow "log into a Win95 control panel" feel that sits
   on top of the same XP Bliss body background the rest of the site uses.
   No new color palette — only `--ml-blue`/`--ml-green`/`--ml-gold` from the
   variables block at the top of this file.
   ============================================================================ */

/* Auth-body variant: flex column so the narrow auth page can be
   vertically centered in the viewport. The XP Bliss wallpaper then
   reads as the intentional desktop background (sky above, hills below
   the card) rather than a green stripe below short content. */
body.auth-body {
  display: flex;
  flex-direction: column;
}

.auth-page {
  /* Narrow column for forms. flex:1 + justify-content:center means the
     card floats in the middle of the XP Bliss desktop like a dialog box,
     with equal sky above and hills below — matching the rest of the site. */
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 460px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}

.auth-card {
  /* Slight extra interior breathing room over the default .card padding. */
  padding-bottom: 18px;
}

.auth-card-intro {
  margin-top: 6px;
  margin-bottom: 14px;
}

.auth-card-footer {
  margin-top: 14px;
  text-align: center;
}

/* ── Form layout ────────────────────────────────────────────────────── */

.auth-form { margin: 4px 0 6px; }

.auth-label {
  display: block;
  margin-top: 10px;
  margin-bottom: 4px;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 13px;
  color: var(--text);
}

.auth-form input {
  margin-bottom: 2px;
}

.auth-help {
  margin-top: 4px;
  margin-bottom: 14px;
}

.auth-form .btn {
  margin-top: 14px;
}

/* ── Error banner ───────────────────────────────────────────────────── */

.auth-error {
  margin: 10px 0 4px;
  padding: 8px 10px;
  background: #fde7e7;
  border: 1px solid var(--ml-red);
  border-left: 4px solid var(--ml-red);
  color: #4a0010;
  font-size: 13px;
  line-height: 1.4;
  border-radius: 0;
}

.auth-success {
  margin: 10px 0 4px;
  padding: 8px 10px;
  background: #e7f7eb;
  border: 1px solid var(--ml-green-dark);
  border-left: 4px solid var(--ml-green-dark);
  color: #003a18;
  font-size: 13px;
  line-height: 1.4;
}

/* 404 error wojak image — used in error view modal */
.error-404-image {
  max-width: min(420px, 90vw);
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  margin-bottom: 16px;
}

/* Email-verification banner on /account.html (only shows when
   emailVerified=false). Sits at the top of the account card. */
.verify-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 14px;
  padding: 10px 12px;
  background: #fff7d6;
  border: 1px solid var(--ml-yellow-dark);
  border-left: 4px solid var(--ml-yellow-dark);
  font-size: 13px;
  line-height: 1.4;
}
.verify-banner-text {
  flex: 1 1 240px;
  color: #4a3a00;
}
.verify-banner-text strong {
  color: var(--text);
}
.verify-banner .btn {
  width: auto;
  flex: 0 0 auto;
}
.verify-banner-status {
  flex: 1 0 100%;
  margin-top: 2px;
}

/* ── OAuth buttons ──────────────────────────────────────────────────── */

.oauth-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 14px;
}

.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 9px 14px;
  border-radius: 4px;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 14px;
  text-decoration: none !important;
  cursor: pointer;
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.18);
  transition: filter 0.1s, transform 0.06s;
}
.oauth-btn:hover  { filter: brightness(1.04); }
.oauth-btn:active { transform: translateY(1px); filter: brightness(0.96); }

.oauth-google {
  background: #ffffff;
  color: #1f1f1f !important;
  border: 1px solid #c0c0c0;
}
.oauth-apple {
  background: #000000;
  color: #ffffff !important;
  border: 1px solid #000;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}

.oauth-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.oauth-divider {
  position: relative;
  margin: 8px 0 2px;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.oauth-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.18) 20%,
    rgba(0, 0, 0, 0.18) 80%,
    transparent 100%);
  z-index: 0;
}
.oauth-divider span {
  position: relative;
  z-index: 1;
  background: var(--luna-grey-face);
  padding: 0 10px;
}

/* ── Account page grid ──────────────────────────────────────────────── */

.account-grid {
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  gap: 6px 14px;
  margin: 10px 0 14px;
  font-size: 13px;
}
.account-grid dt {
  font-family: var(--f-display);
  font-weight: 900;
  color: var(--text);
}
.account-grid dd {
  margin: 0;
  color: var(--muted);
  word-break: break-word;
}

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.account-actions .btn,
.account-actions a.btn {
  width: auto;
  flex: 0 0 auto;
}

/* ── Subscribe page ─────────────────────────────────────────────────── */

.subscribe-hero {
  text-align: center;
  margin: 16px auto 22px;
  /* History: X65-2026-05-05 720 → 880 (unified 880 desktop lane);
     X78-2026-05-08 880 → 720 (Captain "feels too wide");
     X79-2026-05-08 720 → 660 (Captain "let's try 660 px on everything").
     This is a typography block (headline + paragraph) so wider lines
     wrap less. The body <p> below has its own max-width: 56ch reading
     constraint so paragraph copy stays readable; the heading is what
     widens. If the headline reads stretched-too-wide on desktop, drop
     to a narrower number — that's a typography call, not a container
     call. */
  max-width: 660px;
  padding: 0 16px;
}
.subscribe-hero h1 {
  margin-bottom: 6px;
}
.subscribe-hero p {
  margin: 0 auto;
  max-width: 56ch;
}

.plans-grid {
  /* X84-2026-05-08: 760 → 660 to track the unified desktop lane.
     Pre-X84 this rule predated the lane-pinning era and shipped at
     760, which made the subscribe page render visibly WIDER than
     every other page in the site (lane is 660 post-X79). Captain
     caught this on the X79 sweep follow-up: "all of the pages are
     now different widths." Snapped to 660 to match. The 2-column
     breakpoint below switches at min-width 660 (was 720) so a 2-up
     plan layout still appears once the viewport actually fits the
     full lane — at 720+ the prior 720 breakpoint would have left a
     phone-tablet awkward zone — left the 2-up breakpoint at 720 so
     viewport 660-719 still shows single full-lane plan cards (which
     read better than cramped 2-up at that width). At 720+ viewport
     2-up kicks in inside the 660 lane, giving each card ~310px
     which is tight but acceptable for plan card content. */
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  max-width: 660px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 720px) {
  .plans-grid { grid-template-columns: 1fr 1fr; }
}

.plan-card {
  display: flex;
  flex-direction: column;
}
.plan-card .btn,
.plan-card a.btn {
  margin-top: auto;
}

.plan-card-featured {
  /* Gold edge so the eye lands on Team. */
  outline: 2px solid var(--ml-gold);
  outline-offset: -2px;
}

.plan-price {
  margin: 6px 0 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
.plan-price-amount {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 2.2rem;
  color: var(--ml-navy);
  line-height: 1;
}
.plan-price-period {
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--muted);
}
.plan-price-meta {
  flex: 1 0 100%;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.plan-features {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  font-size: 13px;
  color: var(--text);
}
.plan-features li {
  padding: 4px 0 4px 22px;
  position: relative;
  line-height: 1.4;
}
.plan-features li::before {
  content: "✓";
  position: absolute;
  left: 4px;
  top: 4px;
  color: var(--ml-green-dark);
  font-weight: 900;
  font-family: var(--f-display);
}

.plans-footer {
  text-align: center;
  margin: 22px auto 0;
  max-width: 56ch;
  padding: 0 16px;
}

/* On narrow viewports, hide the legacy `.menu-btn` element in
   `.site-header` so it doesn't collide with the layout. (The matching
   `.auth-nav` rules were removed 2026-05-04 along with auth-nav.js.) */
@media (max-width: 520px) {
  .site-header .menu-btn { display: none; }
}