/* ==========================================================================
   Account pages — sign in, register, recover, confirm.

   The same visual world as the landing page (tokens duplicated on purpose:
   these pages must not load landing.css, whose scroll machinery assumes the
   long document). A single focused card over the night ground; gold stays
   reserved for the primary action.

   Accessibility commitments (WCAG 2.2 AA):
   - every text/background pair here measures >= 4.5:1;
   - all interactive targets are >= 48px tall;
   - inputs are >= 16px so iOS never zoom-jumps the viewport (see the
     !important note in the field rule);
   - :focus-visible is always a drawn ring, never removed;
   - motion respects prefers-reduced-motion.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */

:root {
  color-scheme: dark;

  --space: #03050b;
  --midnight: #070c1a;
  --shelf: #0a1122;

  --white: #f2f5fb;
  --silver: #dfe5f1;
  --silver-dim: #a6b0c7;

  --gold: #c6a97a;
  --gold-lit: #e6cd9c;
  --gold-ink: #171006; /* text on gold: 9.4:1 against --gold */

  --danger: #f2b8bd;   /* error text on midnight: 10.9:1 */
  --danger-edge: rgba(242, 152, 160, 0.5);
  --success: #b9e3c6;  /* 11.9:1 */
  --success-edge: rgba(150, 216, 175, 0.45);

  --glass: rgba(255, 255, 255, 0.04);
  --glass-lit: rgba(255, 255, 255, 0.07);
  --hair: rgba(255, 255, 255, 0.085);
  --hair-lit: rgba(255, 255, 255, 0.17);

  --display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    "Times New Roman", ui-serif, serif;
  --body: "Segoe UI Variable Text", "Segoe UI", -apple-system,
    BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --field-radius: 10px;
  --card-radius: 18px;
}

/* 2. Ground ---------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

/* The ground, in three layers - the same recipe landing.css uses (its .sky/.veil/.grain),
   reproduced here as pseudo-elements so account and profile pages share the landing page's
   depth and texture without loading landing.css itself (whose scroll machinery assumes the
   long document - see the note in _AuthLayout.cshtml).

   A flat two-gradient background reads as "generic dark blue" for two reasons a frosted
   card can't fix on its own: it never moves, and it has no texture, so any card sitting on
   top with a near-transparent --glass fill shows the gradient's own colour bands raw through
   it (the "improper blending" seam between adjacent card rows is exactly this - two glass
   panels each independently exposing a slightly different slice of the same static
   gradient). Both layers below fix that at the source rather than per-component. */
body.auth {
  position: relative;
  min-height: 100%;
  margin: 0;
  font-family: var(--body);
  color: var(--silver);
  background: var(--space);
  display: grid;
  grid-template-rows: auto 1fr auto;

  /* iPhone PWA: never let the card or footer sit under the notch or home bar. */
  padding:
    env(safe-area-inset-top, 0)
    env(safe-area-inset-right, 0)
    env(safe-area-inset-bottom, 0)
    env(safe-area-inset-left, 0);
}

/* The glow. Same two radial highlights as before, moved into their own fixed layer and
   given a very slow drift - the "interactive/alive" quality the landing page has, at an
   amplitude and speed (22s, single pixels of movement) deliberately far below anything
   landing.css does with its hero figure: this sits behind consent and legal copy, where
   motion has to read as ambient, never as something competing for attention. */
body.auth::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(120vmax 80vmax at 50% -30%, #101a35 0%, transparent 60%),
    radial-gradient(80vmax 60vmax at 85% 110%, #0d1226 0%, transparent 55%);
  animation: auth-glow-drift 22s var(--ease) infinite alternate;
  will-change: transform;
}

@keyframes auth-glow-drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(0, -1.4vh, 0) scale(1.03);
  }
}

/* The grain. A single inline SVG turbulence filter, tiled - no network request, so it
   costs nothing against the CSP that keeps this page free of third-party assets. Identical
   technique to landing.css's .grain, at the same low opacity: it is what turns a flat
   gradient into something with the texture the landing page has, everywhere this class is
   used. */
body.auth::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 3. Header / footer -------------------------------------------------------- */

.auth-header {
  display: flex;
  justify-content: center;
  padding: clamp(1.4rem, 4vh, 2.6rem) 1.25rem 0;
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  color: var(--white);
  text-decoration: none;
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
}

.auth-brand:focus-visible {
  outline: 2px solid var(--gold-lit);
  outline-offset: 4px;
  border-radius: 4px;
}

.auth-brand__mark {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(198, 169, 122, 0.8);
}

.auth-footer {
  text-align: center;
  padding: 1.4rem 1.25rem calc(1.4rem + env(safe-area-inset-bottom, 0));
  font-size: 0.85rem;
  color: var(--silver-dim);
}

.auth-footer a {
  color: var(--silver);
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 0 0.35rem;
}

/* 4. The card ---------------------------------------------------------------- */

.auth-main {
  display: grid;
  place-items: start center;
  padding: clamp(1rem, 4vh, 3rem) 1rem 2rem;
}

.auth-card {
  inline-size: min(30rem, 100%);
  background: linear-gradient(180deg, var(--glass-lit), var(--glass));
  border: 1px solid var(--hair);
  border-radius: var(--card-radius);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.auth-card h1 {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.65rem, 5.4vw, 2.1rem);
  line-height: 1.15;
  color: var(--white);
  letter-spacing: 0.01em;
}

.auth-lede {
  margin: 0 0 1.6rem;
  color: var(--silver-dim);
  font-size: 1rem;
  line-height: 1.55;
}

.auth-lede a,
.auth-card p a {
  color: var(--gold-lit);
  text-underline-offset: 3px;
}

/* 5. Fields ------------------------------------------------------------------ */

.field {
  margin-block-end: 1.15rem;
}

.field label {
  display: block;
  margin-block-end: 0.45rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--silver);
}

.field input[type="email"],
.field input[type="password"],
.field input[type="text"],
.field input[type="date"],
.field input[type="number"],
.field input[type="tel"],
.field input[type="url"],
.field textarea {
  inline-size: 100%;
  min-block-size: 52px;
  padding: 0.8rem 1rem;

  /* 16px is a floor, not a preference: below it, iOS Safari zooms the whole
     viewport on focus and the page never quite recovers. Kept !important so a
     well-meaning compact-density pass cannot silently reintroduce the jump. */
  font-size: 16px !important;
  font-family: var(--body);

  color: var(--white);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hair-lit);
  border-radius: var(--field-radius);
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--gold-lit);
  outline-offset: 2px;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.07);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: var(--danger-edge);
}

/* Multi-line answers grow; single-line floors still hold. */
.field textarea {
  min-block-size: 120px;
  resize: vertical;
  line-height: 1.5;
}

.field-hint {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--silver-dim);
}

/* "Optional" marker inside a label - required fields stay unmarked (spec §10). */
.field-hint-inline {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--silver-dim);
  margin-inline-start: 0.35rem;
}

.field-select,
.field select {
  inline-size: 100%;
  min-block-size: 52px;
  padding: 0.8rem 1rem;
  font-size: 16px !important; /* same iOS zoom floor as text inputs */
  font-family: var(--body);
  color: var(--white);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hair-lit);
  border-radius: var(--field-radius);
}

.field select:focus-visible {
  outline: 2px solid var(--gold-lit);
  outline-offset: 2px;
  border-color: var(--gold);
}

.field select option {
  background: var(--shelf);
  color: var(--white);
}

.field-error {
  margin: 0.45rem 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--danger);
}

/* Checkbox row (Remember me) */

.field-check {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-block-size: 48px;
  margin-block-end: 0.4rem;
}

.field-check input[type="checkbox"] {
  inline-size: 22px;
  block-size: 22px;
  accent-color: var(--gold);
  flex: none;
}

.field-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--gold-lit);
  outline-offset: 2px;
}

.field-check label {
  margin: 0;
  font-size: 0.95rem;
  color: var(--silver);
}

/* Choice rows: radio and checkbox groups rendered as tappable rows (48px floors).
   Shared by the registration stewardship chips and the profile editors. */

.field-choices {
  margin: 0;
  padding: 0;
  border: 0;
}

.field-choices legend {
  padding: 0;
  margin-block-end: 0.45rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--silver);
}

.field-choices--invalid .choice {
  border-color: var(--danger-edge);
}

.choice {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-block-size: 48px;
  padding: 0.2rem 0.9rem;
  margin-block-end: 0.45rem;
  border: 1px solid var(--hair-lit);
  border-radius: var(--field-radius);
  color: var(--silver);
  font-size: 16px;
  cursor: pointer;
}

.choice input {
  inline-size: 22px;
  block-size: 22px;
  accent-color: var(--gold);
  flex: none;
}

.choice input:focus-visible {
  outline: 2px solid var(--gold-lit);
  outline-offset: 2px;
}

.choice:has(input:checked) {
  border-color: var(--gold);
  background: rgba(198, 169, 122, 0.08);
}

/* Segmented look for the stewardship question: chips flow, the picked one glows. */
.steward-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.steward-chips legend {
  inline-size: 100%;
}

.steward-chips .choice {
  margin-block-end: 0;
  border-radius: 999px;
  padding-inline: 1rem;
}

/* 6. Actions ------------------------------------------------------------------ */

.auth-actions {
  margin-block-start: 1.5rem;
  display: grid;
  gap: 0.9rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 52px;
  padding: 0.85rem 1.4rem;
  inline-size: 100%;
  font-family: var(--body);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 160ms var(--ease), background 160ms var(--ease);
}

.btn--gold {
  background: linear-gradient(180deg, var(--gold-lit), var(--gold));
  color: var(--gold-ink);
}

.btn--gold:hover {
  transform: translateY(-1px);
}

.btn--quiet {
  background: transparent;
  border-color: var(--hair-lit);
  color: var(--silver);
}

.btn--quiet:hover {
  background: var(--glass-lit);
}

.btn:focus-visible {
  outline: 2px solid var(--gold-lit);
  outline-offset: 3px;
}

.auth-alt {
  margin: 1.4rem 0 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--silver-dim);
}

.auth-alt a {
  color: var(--gold-lit);
  text-underline-offset: 3px;
  display: inline-flex;
  min-block-size: 44px;
  align-items: center;
  padding: 0 0.3rem;
}

/* 7. Notices ------------------------------------------------------------------ */

.notice {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 1.4rem;
  padding: 0.95rem 1.1rem;
  border-radius: 12px;
  font-size: 0.95rem;
  line-height: 1.55;
}

.notice--error {
  background: rgba(160, 55, 66, 0.16);
  border: 1px solid var(--danger-edge);
  color: var(--danger);
}

.notice--success {
  background: rgba(52, 130, 84, 0.16);
  border: 1px solid var(--success-edge);
  color: var(--success);
}

/* Neutral status, neither an error nor a success - e.g. search withheld/unavailable. */
.notice--info {
  background: var(--glass);
  border: 1px solid var(--hair-lit);
  color: var(--silver);
}

.notice ul {
  margin: 0;
  padding-inline-start: 1.1rem;
}

.notice li + li {
  margin-block-start: 0.3rem;
}

/* 8. Acknowledgement panel (check your email) --------------------------------- */

.auth-ack {
  text-align: center;
  padding: 1rem 0 0.4rem;
}

.auth-ack__glyph {
  inline-size: 56px;
  block-size: 56px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--glass-lit);
  border: 1px solid var(--hair-lit);
  color: var(--gold-lit);
  font-size: 1.5rem;
}

/* 9. Small screens: the card becomes the page --------------------------------- */

@media (max-width: 480px) {
  .auth-main {
    padding-inline: 0.75rem;
  }

  .auth-card {
    padding: 1.4rem 1.15rem 1.7rem;
  }
}

/* 10. Motion ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  /* *::before/*::after explicitly: a bare `*` selects elements, not generated content, so
     the glow drift added in section 2 would keep animating under reduced motion without
     this - the one gap in this file's own "every animation respects prefers-reduced-motion"
     commitment, found while adding the first animated pseudo-element. */
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Skip link (keyboard users land on the form, not the header) */

.skip {
  position: absolute;
  inset-inline-start: -9999px;
}

.skip:focus {
  position: fixed;
  inset-inline-start: 1rem;
  inset-block-start: calc(1rem + env(safe-area-inset-top, 0));
  z-index: 10;
  padding: 0.8rem 1.2rem;
  background: var(--shelf);
  color: var(--white);
  border: 1px solid var(--gold);
  border-radius: 8px;
}

/* 11. Consent screens (V1) --------------------------------------------------- */

/* A third notice tone alongside --error/--success: informational rather than a
   failure or a confirmation, used for "action needed" and "service unavailable". */
.notice--warning {
  background: rgba(198, 169, 122, 0.12);
  border: 1px solid rgba(198, 169, 122, 0.4);
  color: var(--gold-lit);
}

/* A row-scale button: same tap-target floor as .btn, but sized to its content
   rather than stretched full-width, for actions that sit beside list text. */
.btn--inline {
  inline-size: auto;
  min-block-size: 48px;
  padding: 0.6rem 1.1rem;
  font-size: 0.95rem;
}

.consent-outstanding {
  margin-block-end: 2rem;
}

.consent-outstanding h2 {
  margin: 0 0 0.3rem;
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--white);
}

.consent-list {
  list-style: none;
  margin: 0.75rem 0 2rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.consent-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--hair);
  border-radius: var(--field-radius);
  background: var(--glass);

  /* Frosts what is now a moving, textured ground behind it - landing.css's own .glass
     recipe (blur + saturate). Without this, --glass is transparent enough (4% white) that
     the ground's own gradient shows through almost raw, and two rows a few pixels apart can
     each expose a visibly different slice of it - the "blending" that read as broken. */
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.consent-row--outstanding {
  border-color: rgba(198, 169, 122, 0.4);
  background: rgba(198, 169, 122, 0.07);
  margin-block-end: 0.75rem;
}

.consent-row__meta {
  display: grid;
  gap: 0.25rem;
  min-inline-size: 0;
}

.consent-row__meta strong {
  color: var(--white);
  font-size: 1rem;
}

.consent-row__action {
  flex: none;
}

.consent-row__action form {
  margin: 0;
}

.consent-badge {
  display: inline-flex;
  align-items: center;
  inline-size: fit-content;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.consent-badge--live {
  background: rgba(52, 130, 84, 0.18);
  color: var(--success);
}

.consent-badge--pending {
  background: rgba(198, 169, 122, 0.18);
  color: var(--gold-lit);
}

.consent-confirm-actions {
  margin-block-start: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.consent-confirm-actions .btn {
  inline-size: auto;
}

/* History: a real table on wide screens, but it scrolls inside its own
   container rather than pushing the page wide at 375px (V2 requirement). */
.consent-history-wrap {
  overflow-x: auto;
  border: 1px solid var(--hair);
  border-radius: var(--field-radius);
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.consent-history {
  inline-size: 100%;
  min-inline-size: 32rem;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.consent-history th,
.consent-history td {
  padding: 0.7rem 1rem;
  text-align: start;
  white-space: nowrap;
}

.consent-history thead th {
  color: var(--silver-dim);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--hair-lit);
}

.consent-history tbody tr + tr td {
  border-top: 1px solid var(--hair);
}

/* The wrapper is focusable so the table can be reached and scrolled by keyboard; a
   scrollable region that only a pointer can move is unreachable without one. */
.consent-history-wrap:focus-visible {
  outline: 2px solid var(--gold-lit);
  outline-offset: 2px;
}

/* The page itself. This screen lives in the member chrome, whose main is 1120px wide -
   too wide for a settings list, where a long row is harder to read, not easier. */
.consent-page {
  max-inline-size: 48rem;
}

.consent-section {
  margin-block-start: 2.4rem;
}

.consent-section h2,
.consent-outstanding h2 {
  margin: 0 0 0.3rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--white);
}

.consent-section__intro {
  margin: 0;
  color: var(--silver-dim);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* The supporting line under a consent's name: version, date, or what is outstanding. */
.consent-row__note {
  color: var(--silver-dim);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* A mandatory consent has no action, so its cell carries an explanation instead. Sized to
   the same block as a button so rows do not change height down the list. */
.consent-row__note--locked {
  display: inline-flex;
  align-items: center;
  min-block-size: 48px;
}

/* Withdrawal confirmation. Inherits .notice for its tone and spacing; these rules only
   add the parts a notice has no vocabulary for. */
.consent-confirm {
  scroll-margin-block-start: 1rem;
}

.consent-confirm__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--white);
}

.consent-confirm__consequence {
  margin: 0;
  color: var(--white);
}

.consent-confirm__note {
  margin: 0;
  color: var(--silver-dim);
  font-size: 0.9rem;
  line-height: 1.55;
}

.consent-empty {
  margin: 0.75rem 0 0;
  padding: 1.1rem;
  border: 1px dashed var(--hair-lit);
  border-radius: var(--field-radius);
  color: var(--silver-dim);
  font-size: 0.95rem;
  line-height: 1.55;
}

@media (max-width: 480px) {
  .consent-row {
    flex-direction: column;
    align-items: stretch;
  }

  .consent-row__action {
    inline-size: 100%;
  }

  .consent-row__action .btn--inline,
  .consent-row__action form .btn--inline {
    inline-size: 100%;
  }

  /* Confirm and cancel stack, so neither is a small target beside the other. */
  .consent-confirm-actions,
  .consent-confirm-actions form {
    inline-size: 100%;
  }

  .consent-confirm-actions {
    flex-direction: column;
  }

  .consent-confirm-actions .btn {
    inline-size: 100%;
  }
}