/* =========================================================
   MyCashPower form, household and legal pages: modern look (mint on dark)
   Add home, Edit home, Edit entry, Manage access, Invitation, Report outage,
   Report restored, Before you start, Delete account, Privacy, Terms.
   Loaded after auth.css, only on those pages, via {% block head_extra %}.
   Everything is scoped to .auth-page (the <main> class on those pages).
   Remove the two <link> tags in a template to roll that page back.
   ========================================================= */

/* ---------- Logged-in shell: floating pill bottom bar on phones ---------- */

@media (max-width: 700px) {
  body:has(main.auth-page) .bottom-nav {
    left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    align-items: center; height: 72px; padding: 0 8px;
    border: 0; border-radius: 999px;
    background: rgba(27, 35, 48, 0.94);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 14px 30px rgba(0, 0, 0, 0.45);
  }
  body:has(main.auth-page) .bottom-nav a.bottom-nav-item {
    justify-content: center; height: 56px; padding: 0; border-radius: 999px;
    color: #9da9ba; font-size: 0.68rem; font-weight: 700; transition: background 0.2s;
  }
  body:has(main.auth-page) .bottom-nav a.bottom-nav-item.active { background: #4ed6a3; color: #04241a; font-weight: 800; }
  body:has(main.auth-page)::after { height: 104px; }
}

/* ---------- Shared field styles (extends auth.css) ---------- */

.auth-page .auth-card input[type="number"],
.auth-page .auth-card input[type="date"],
.auth-page .auth-card input[type="time"],
.auth-page .auth-card input[type="tel"],
.auth-page .manage-access-card input[type="text"],
.auth-page .manage-access-card input[type="email"],
.auth-page :is(.auth-card, .manage-access-card) select {
  width: 100%; height: 54px; padding: 0 22px; box-sizing: border-box;
  border: 0; border-radius: 999px;
  background-color: var(--d-bg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: var(--d-text); font: inherit; font-size: 1rem; font-weight: 600;
  color-scheme: dark;
  transition: box-shadow 0.2s;
}
.auth-page .auth-card input[type="date"],
.auth-page .auth-card input[type="time"] { min-height: 54px; }
.auth-page :is(.auth-card, .manage-access-card) input:focus,
.auth-page :is(.auth-card, .manage-access-card) select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--d-mint); }
.auth-page :is(.auth-card, .manage-access-card) ::placeholder { color: #6e7a8c; font-weight: 500; opacity: 1; }

.auth-page :is(.auth-card, .manage-access-card) select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 52px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234ed6a3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 20px center;
}
.auth-page :is(.auth-card, .manage-access-card) select:disabled { opacity: 0.45; cursor: not-allowed; }
.auth-page :is(.auth-card, .manage-access-card) select option { background: #131922; color: #f3f6f9; }

.auth-page .manage-access-card label { display: block; margin: 16px 0 6px; color: var(--d-muted); font-size: 0.85rem; font-weight: 600; }
.auth-page .field-hint-warning { margin: 8px 0 0; padding: 10px 14px; border-radius: 18px; background: rgba(255, 194, 71, 0.12); color: #ffc247; font-size: 0.85rem; font-weight: 600; line-height: 1.45; }
.auth-page .field-hint-error[hidden], .auth-page .field-hint-warning[hidden], .auth-page .field-hint[hidden] { display: none; }

.auth-page .address-heading {
  margin: 28px 0 4px; padding-top: 22px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  font-size: 1.1rem; font-weight: 800; color: var(--d-text);
}

/* Secondary pill buttons and links */
.auth-page .auth-card button.btn-secondary,
.auth-page a.secondary-button, .auth-page a.secondary-button:visited, .auth-page a.secondary-button:hover {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 52px; margin: 12px 0 0; padding: 0 20px; box-sizing: border-box;
  border: 0; border-radius: 999px; background: var(--d-chip); color: var(--d-text);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  font: inherit; font-size: 1rem; font-weight: 800; text-decoration: none; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
}
.auth-page .auth-card button.btn-secondary:hover,
.auth-page a.secondary-button:hover { background: var(--d-chip); box-shadow: inset 0 0 0 1px rgba(78, 214, 163, 0.6); }
.auth-page .auth-card button.btn-secondary:active, .auth-page a.secondary-button:active { transform: scale(0.98); }

/* Destructive buttons */
.auth-page .auth-card form button.danger[type="submit"] {
  background: rgba(255, 107, 107, 0.12); color: #ff8a8a;
  box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.45);
  height: 52px; margin-top: 12px;
}
.auth-page .auth-card form button.danger[type="submit"]:hover { background: rgba(255, 107, 107, 0.2); filter: none; }
.auth-page .account-delete-confirm form button.danger-button[type="submit"] {
  background: #ff6b6b; color: #2a0a0a; box-shadow: 0 12px 28px rgba(255, 107, 107, 0.22); margin-top: 8px;
}
.auth-page .account-delete-confirm { box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.4), 0 24px 60px rgba(0, 0, 0, 0.35); }
.auth-page .account-delete-confirm h1 { color: #ff8a8a; }
.auth-page .account-delete-confirm p { margin: 0 0 14px; color: var(--d-text); font-size: 1.02rem; line-height: 1.6; }
.auth-page .account-delete-confirm p.muted { color: var(--d-muted); font-size: 0.95rem; }

/* Link-style button (invitation page) */
.auth-page .auth-card a.button, .auth-page .auth-card a.button:visited, .auth-page .auth-card a.button:hover {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 56px; padding: 0 24px; box-sizing: border-box;
  border: 0; border-radius: 999px; background: var(--d-mint); color: var(--d-ink);
  font-size: 1.05rem; font-weight: 800; text-decoration: none;
  box-shadow: 0 12px 28px rgba(78, 214, 163, 0.25); transition: transform 0.15s, filter 0.2s;
}
.auth-page .auth-card a.button:hover { filter: brightness(1.07); }
.auth-page .auth-card a.button:active { transform: scale(0.98); }

/* ---------- Before you start (onboarding) ---------- */

.auth-page:has(.onboarding-card) { max-width: 600px; }
.auth-page .onboarding-table { width: 100%; margin: 18px 0 4px; border-collapse: separate; border-spacing: 0 6px; font-size: 0.92rem; }
.auth-page .onboarding-table th { padding: 0 14px 4px; color: var(--d-muted); font-size: 0.78rem; font-weight: 700; text-align: left; border: 0; background: none; }
.auth-page .onboarding-table td { padding: 12px 14px; border: 0; background: var(--d-inner); color: var(--d-text); font-weight: 600; }
.auth-page .onboarding-table td:first-child { border-radius: 16px 0 0 16px; }
.auth-page .onboarding-table td:last-child { border-radius: 0 16px 16px 0; }
.auth-page .kwh-preview { margin: 14px 0 0; padding: 14px 18px; border-radius: 22px; background: var(--d-mint-soft, rgba(78, 214, 163, 0.12)); color: var(--d-mint); font-size: 0.98rem; font-weight: 700; line-height: 1.5; }
.auth-page .onboarding-card .field-hint { margin: 10px 0 0; padding: 12px 16px; border-radius: 18px; background: rgba(78, 214, 163, 0.1); color: var(--d-text); font-weight: 600; line-height: 1.5; min-height: 0; }
.auth-page .onboarding-card .field-hint-error { background: rgba(255, 107, 107, 0.12); color: #ff9a9a; }
.auth-page .onboarding-skip { margin: 22px 0 0; text-align: center; }
.auth-page .onboarding-skip a { display: inline-block; padding: 10px 18px; border-radius: 999px; background: var(--d-chip); box-shadow: inset 0 0 0 1px var(--d-line); }

/* ---------- Manage access (household members) ---------- */

.auth-page.members-page { max-width: 680px; }
.auth-page .manage-access-card {
  max-width: none; margin: 28px auto 24px; padding: 32px 28px;
  border: 0; border-radius: 32px; background: var(--d-card);
  box-shadow: inset 0 0 0 1px var(--d-line), 0 24px 60px rgba(0, 0, 0, 0.35);
  animation: au-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.auth-page .manage-access-card h1 { margin: 0 0 14px; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; color: var(--d-text); text-align: left; }
.auth-page .manage-access-card > .muted { max-width: none; margin: 0 0 20px; color: var(--d-muted); font-size: 0.95rem; line-height: 1.6; }
.auth-page .manage-access-card a, .auth-page .manage-access-card a:visited { color: var(--d-mint); font-weight: 700; text-decoration: none; }

.auth-page .manage-access-card .member-list { display: flex; flex-direction: column; gap: 10px; }
.auth-page .manage-access-card .profile-home-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 0; padding: 14px 16px; border: 0; border-radius: 24px;
  background: var(--d-inner); box-shadow: inset 0 0 0 1px var(--d-line);
}
.auth-page .manage-access-card .profile-home-name { margin: 0 0 4px; font-size: 1.02rem; font-weight: 800; color: var(--d-text); word-break: break-word; }
.auth-page .manage-access-card .profile-home-row .muted { margin: 0; color: var(--d-muted); font-size: 0.85rem; line-height: 1.45; word-break: break-word; }
.auth-page .manage-access-card .profile-home-row .muted strong { color: var(--d-mint); }
.auth-page .manage-access-card .member-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0; }
.auth-page .manage-access-card .member-actions form, .auth-page .manage-access-card .profile-home-row > form { margin: 0; }

.auth-page .manage-access-card button.member-transfer-btn,
.auth-page .manage-access-card button.member-remove-btn {
  height: 40px; margin: 0; padding: 0 16px; width: auto;
  border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 0.85rem; font-weight: 800; white-space: nowrap;
  transition: transform 0.15s, background 0.2s;
}
.auth-page .manage-access-card button.member-transfer-btn { background: var(--d-chip); color: var(--d-mint); box-shadow: inset 0 0 0 1px rgba(78, 214, 163, 0.35); }
.auth-page .manage-access-card button.member-remove-btn { background: rgba(255, 107, 107, 0.12); color: #ff8a8a; box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.4); }
.auth-page .manage-access-card button.member-transfer-btn:hover { background: rgba(78, 214, 163, 0.16); }
.auth-page .manage-access-card button.member-remove-btn:hover { background: rgba(255, 107, 107, 0.22); }
.auth-page .manage-access-card button.member-transfer-btn:active, .auth-page .manage-access-card button.member-remove-btn:active { transform: scale(0.96); }

.auth-page .manage-access-card .scope-note { margin: 0 0 8px; padding: 14px 18px; border: 0; border-radius: 22px; background: var(--d-inner); color: var(--d-muted); font-size: 0.9rem; line-height: 1.55; }
.auth-page .manage-access-card > form > button[type="submit"] {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 56px; margin-top: 24px; padding: 0 24px;
  border: 0; border-radius: 999px; background: var(--d-mint); color: var(--d-ink);
  font: inherit; font-size: 1.05rem; font-weight: 800; cursor: pointer; transition: transform 0.15s, filter 0.2s;
}
.auth-page .manage-access-card > form > button[type="submit"]:hover { filter: brightness(1.07); }
.auth-page .manage-access-card > form > button[type="submit"]:active { transform: scale(0.98); }
.auth-page .manage-access-card > form > button[type="submit"]:disabled { opacity: 0.6; cursor: default; }
.auth-page .manage-access-card .manage-access-back { margin-top: 22px; }

/* ---------- Privacy Policy and Terms of Use ---------- */

.auth-page.legal-wrap { max-width: 800px; }
.auth-page .legal-page {
  margin: 28px auto 24px; padding: 40px 36px;
  border-radius: 32px; background: var(--d-card);
  box-shadow: inset 0 0 0 1px var(--d-line), 0 24px 60px rgba(0, 0, 0, 0.35);
  animation: au-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.auth-page .legal-page h1 { margin: 0 0 12px; font-size: 2.1rem; font-weight: 800; letter-spacing: -0.025em; color: var(--d-text); }
.auth-page .legal-page > .muted {
  display: inline-block; margin: 0 0 24px; padding: 7px 14px; border-radius: 999px;
  background: var(--d-chip); box-shadow: inset 0 0 0 1px var(--d-line);
  color: var(--d-muted); font-size: 0.85rem; font-weight: 700;
}
.auth-page .legal-page h2 { margin: 30px 0 10px; padding-top: 26px; border-top: 1px solid var(--d-line); font-size: 1.15rem; font-weight: 800; color: var(--d-text); }
.auth-page .legal-page p, .auth-page .legal-page li { color: #c3ccd8; font-size: 1rem; line-height: 1.75; }
.auth-page .legal-page p { margin: 0 0 14px; }
.auth-page .legal-page strong { color: var(--d-text); }
.auth-page .legal-page ul { margin: 0 0 14px; padding: 0; list-style: none; }
.auth-page .legal-page li { position: relative; margin: 0 0 6px; padding-left: 22px; }
.auth-page .legal-page li::before { content: ""; position: absolute; left: 4px; top: 0.72em; width: 8px; height: 8px; border-radius: 50%; background: var(--d-mint); }
.auth-page .legal-page a, .auth-page .legal-page a:visited { color: var(--d-mint); font-weight: 700; text-decoration: none; }
.auth-page .legal-page a:hover { color: #7ce6bd; }

/* ---------- Phones ---------- */

@media (max-width: 700px) {
  .auth-page .manage-access-card { margin-top: 16px; padding: 26px 20px; border-radius: 28px; }
  .auth-page .legal-page { margin-top: 16px; padding: 28px 20px; border-radius: 28px; }
  .auth-page .legal-page h1 { font-size: 1.7rem; }
}
@media (max-width: 560px) {
  .auth-page .manage-access-card .profile-home-row { flex-direction: column; align-items: stretch; }
  .auth-page .manage-access-card .member-actions { justify-content: stretch; }
  .auth-page .manage-access-card .member-actions form { flex: 1; }
  .auth-page .manage-access-card .member-actions button, .auth-page .manage-access-card .profile-home-row > form button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-page .manage-access-card, .auth-page .legal-page { animation: none; }
}