/* account-home.css - the signed-in /account: a members' home, not a form (Jordan, 2026-10-11).
 * Profile first, then gatherings (coming up, the ones you have been to, cancelled), then the Zion Media family cards.
 * Parchment, antique gold and near-black; Cormorant Garamond and Inter; gold frames on every photo; buttons come from
 * zg-ui.css section 17 (.btn-primary gold, .btn-secondary parchment, .zg-quiet pills).
 * Text floor 17px, sentences 18px, buttons 20px. Under reduced motion nothing moves. The sign-in form (#signin-block)
 * is the accounts session's and is not touched here. */

.page-account {
  --acct-gold-hi: #F4D486;
  --acct-gold: #D9A645;
  --acct-gold-lo: #B9842A;
  --acct-gold-deep: #7E5513;
  --acct-frame: linear-gradient(145deg, #F6DE9C 0%, #C9952F 38%, #8A5E17 62%, #E7C277 100%);
  --acct-card: linear-gradient(180deg, #FFFFFF 0%, #FFFEFB 55%, #FDF9F1 100%);
  --acct-card-line: rgb(156 105 24 / 24%);
  --acct-rim: inset 0 1px 0 #FFFFFF, inset 0 0 0 1px rgb(255 255 255 / 55%);
  --acct-elev-1: 0 1px 1px rgb(64 46 14 / 5%), 0 2px 5px rgb(64 46 14 / 6%), 0 8px 16px -10px rgb(64 46 14 / 14%);
  --acct-elev-2: 0 1px 2px rgb(64 46 14 / 6%), 0 4px 10px rgb(64 46 14 / 6%), 0 18px 36px -14px rgb(64 46 14 / 22%);
  --acct-elev-3: 0 2px 4px rgb(64 46 14 / 7%), 0 10px 22px rgb(64 46 14 / 10%), 0 32px 60px -18px rgb(64 46 14 / 30%);
  --acct-well: inset 0 1px 3px rgb(64 46 14 / 9%), inset 0 -1px 0 rgb(255 255 255 / 85%);
  --acct-glow: 0 0 0 4px rgb(217 166 69 / 16%);
  --acct-shadow: var(--acct-rim), var(--acct-elev-2);
  --acct-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ------------------------------------------------------------------ the welcome */
.page-account.is-home .page-header { padding-bottom: 8px; }
.page-account.is-home .page-subtitle { max-width: 640px; }
.acct-next {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 22px auto 0; padding: 10px 14px 10px 10px;
  font-size: 18px; line-height: 1.35; color: var(--ink); text-decoration: none;
  background: linear-gradient(180deg, #FFFFFF 0%, #FDF8EC 60%, #F8EDD3 100%); border: 1.5px solid rgb(185 132 42 / 45%); border-radius: 999px;
  box-shadow: var(--acct-rim), inset 0 -2px 0 rgb(185 132 42 / 14%), 0 1px 0 rgb(185 132 42 / 30%), var(--acct-elev-2);
  transition: transform 220ms var(--acct-ease), box-shadow 220ms var(--acct-ease), border-color 220ms ease;
}
.acct-next:hover, .acct-next:focus-visible { color: var(--ink); transform: translateY(-2px); border-color: var(--acct-gold); box-shadow: var(--acct-rim), 0 0 0 4px rgb(214 163 66 / 24%), var(--acct-elev-3); }
.acct-next-badge {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 66px; height: 66px; padding: 0 10px; box-sizing: border-box; border-radius: 999px;
  font: 600 26px/1 var(--serif); color: #22190A; background: linear-gradient(180deg, var(--acct-gold-hi), var(--acct-gold) 50%, var(--acct-gold-lo));
  text-shadow: 0 1px 0 rgb(255 245 214 / 60%);
  box-shadow: inset 0 1px 0 rgb(255 252 236 / 90%), inset 0 -3px 4px rgb(126 85 19 / 28%), 0 2px 0 var(--acct-gold-deep), 0 6px 12px rgb(126 85 19 / 28%);
}
.acct-next-badge small { display: block; margin-top: 2px; font: 600 17px/1 var(--sans); letter-spacing: .02em; }
.acct-next strong { font-weight: 600; }

/* ------------------------------------------------------------------ the bar under the welcome */
.page-account #account-block .topbar { align-items: center; }
.page-account #who { display: inline-flex; align-items: center; gap: 4px; font: 500 18px/1.4 var(--sans); font-style: normal; color: var(--ink-soft); overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ sections */
.acct-section { margin: 40px 0 0; }
.acct-section:first-of-type { margin-top: 28px; }
.acct-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; }
.acct-eyebrow { display: block; margin: 0 0 4px; font: 600 17px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.acct-h2 { margin: 0; font: 500 clamp(32px, 4vw, 40px)/1.1 var(--serif); color: var(--burgundy); }
.acct-h2::after { content: ""; display: block; width: 64px; height: 2px; margin-top: 12px; border-radius: 2px; background: linear-gradient(90deg, var(--acct-gold), transparent); }
.acct-sub { margin: 36px 0 16px; font: 500 28px/1.2 var(--serif); color: var(--burgundy); }

/* A card: white, a fine gold edge, a gold thread along the top, a soft lift. */
.acct-card {
  position: relative; min-width: 0; padding: 28px; box-sizing: border-box; overflow: hidden;
  background: var(--acct-card); border: 1px solid var(--acct-card-line); border-radius: var(--radius-card, 20px); box-shadow: var(--acct-shadow);
  transition: box-shadow 320ms var(--acct-ease);
}
@media (hover: hover) and (pointer: fine) { .acct-card:hover { box-shadow: var(--acct-rim), var(--acct-elev-3); } }
.acct-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--acct-gold), rgb(217 166 69 / 0) 75%); }
.acct-card h3 { margin: 0 0 4px; font: 500 28px/1.2 var(--serif); color: var(--burgundy); }
.acct-card-sub { margin: 0 0 18px; font-size: 18px; line-height: 1.55; color: var(--ink-soft); }

/* The save shimmer: a band of gold light crosses the card once. */
.acct-card.is-shimmer::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgb(255 233 170 / 55%) 46%, rgb(255 246 214 / 80%) 50%, rgb(255 233 170 / 55%) 54%, transparent 70%);
  transform: translateX(-100%); animation: acct-shimmer 1100ms var(--acct-ease) forwards;
}
@keyframes acct-shimmer { to { transform: translateX(100%); } }

/* ------------------------------------------------------------------ profile + people */
.acct-you { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: start; }
.acct-id { display: flex; align-items: center; gap: 18px; margin: 0 0 22px; }
.acct-monogram {
  flex: none; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%;
  font: 600 30px/1 var(--serif); letter-spacing: .02em; color: var(--burgundy);
  background: radial-gradient(circle at 34% 26%, #FFFFFF 0%, #FCF5E2 40%, #EFD9A4 100%);
  text-shadow: 0 1px 0 rgb(255 255 255 / 80%);
  box-shadow: inset 0 2px 2px rgb(255 255 255 / 90%), inset 0 -6px 10px rgb(156 105 24 / 22%),
    0 0 0 3px #FFFFFF, 0 0 0 5px var(--acct-gold), 0 0 0 6px var(--acct-gold-lo), 0 0 0 11px rgb(217 166 69 / 14%), 0 12px 24px -4px rgb(64 46 14 / 28%);
}
.acct-id-text { min-width: 0; }
.acct-id-name { margin: 0; font: 600 32px/1.1 var(--serif); color: var(--burgundy); overflow-wrap: anywhere; }
.acct-id-name.is-empty { font-style: italic; font-weight: 500; color: var(--ink-faint); }
.acct-id-meta { margin: 4px 0 0; font-size: 18px; line-height: 1.45; color: var(--ink-soft); overflow-wrap: break-word; }
.acct-id-email { margin-top: 0; color: var(--ink-faint); overflow-wrap: anywhere; }
.acct-profile-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; }
.acct-pf { padding: 12px 0; border-top: 1px solid var(--hair); box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%); min-width: 0; }
.acct-pf dt { font: 600 17px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.acct-pf dd { margin: 4px 0 0; font-size: 18px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.acct-pf.is-empty dd { color: var(--ink-faint); font-style: italic; }
.acct-more { display: none; margin-top: 8px; }
@media (max-width: 760px) {
  .acct-profile:not(.is-all) .acct-pf:nth-child(n+5) { display: none; }
  .acct-more { display: inline-flex; }
}
.acct-pf.is-fresh dd { animation: acct-fresh 1600ms var(--acct-ease); }
@keyframes acct-fresh { 0% { background: rgb(244 212 134 / 55%); box-shadow: 0 0 0 6px rgb(244 212 134 / 55%); } 100% { background: transparent; box-shadow: 0 0 0 6px transparent; } }
.acct-hint {
  display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; padding: 14px 16px; font-size: 18px; line-height: 1.5; color: var(--ink);
  background: linear-gradient(180deg, #FCF6E6, #FAF1DC); border: 1px solid rgb(185 132 42 / 35%); border-radius: 14px; box-shadow: var(--acct-well);
}
.acct-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.acct-card-actions .btn-primary, .acct-card-actions .btn-secondary { min-height: 56px; padding: 12px 26px; font-size: 20px; }
.acct-card-actions .zg-quiet { min-height: 56px; font-size: 18px; }

/* The edit form slides open under the summary. */
.acct-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--acct-ease); }
.acct-fold > * { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear 420ms; }
.acct-fold.is-open > * { visibility: visible; transition-delay: 0s; }
.acct-fold.is-open { grid-template-rows: 1fr; }
.acct-fold > form { padding: 2px 2px 4px; margin: 0 -2px; }
.acct-profile.is-editing .acct-profile-facts, .acct-profile.is-editing .acct-hint { display: none; }
.acct-profile.is-editing .acct-id { margin-bottom: 14px; }
.acct-fold .acct-eyebrow { margin-top: 4px; }

/* Ticks in the forms are chips: a raised pill per choice that turns gold when chosen. */
.page-account #account-block :is(.acct-fold, .acct-words) .opt-foot { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 0 4px; }
.page-account #account-block :is(.acct-fold, .acct-words) .opt-foot label {
  display: inline-flex; align-items: center; gap: 10px; min-height: 50px; margin: 0; padding: 0 18px 0 14px; box-sizing: border-box; cursor: pointer;
  font: 500 18px/1.3 var(--sans); color: var(--ink);
  background: linear-gradient(180deg, #FFFFFF, #FBF7EE); border: 1.5px solid rgb(185 132 42 / 38%); border-radius: 999px;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 0 rgb(185 132 42 / 22%), 0 3px 8px -3px rgb(64 46 14 / 16%);
  transition: border-color 200ms ease, box-shadow 260ms var(--acct-ease), background 200ms ease, transform 200ms var(--acct-ease);
}
.page-account #account-block :is(.acct-fold, .acct-words) .opt-foot label:hover { border-color: var(--acct-gold); transform: translateY(-1px); }
.page-account #account-block :is(.acct-fold, .acct-words) .opt-foot label:has(input:checked) {
  background: linear-gradient(180deg, #FFF8E4, #F7E7BF); border-color: var(--acct-gold-lo);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 85%), 0 0 0 3px rgb(217 166 69 / 22%), 0 6px 14px -4px rgb(185 132 42 / 35%);
}
.page-account #account-block :is(.acct-fold, .acct-words) .opt-foot input[type=checkbox] { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--acct-gold-lo); }
.page-account #account-block :is(.acct-fold, .acct-words) .opt-foot label:has(input:focus-visible) { outline: 3px solid var(--acct-gold); outline-offset: 2px; }

/* The people card is narrow on a desktop: its form is one column there. */
.acct-people .grid-2 { grid-template-columns: minmax(0, 1fr); }
.acct-profile .field label, .acct-people .field label { font-size: 17px; }
.page-account #account-block select.acct-state { width: 100%; }
.acct-fold :is(input:not([type=checkbox]):not([type=radio]), select) { box-shadow: inset 0 1px 2px rgb(64 46 14 / 10%); }

/* The save button becomes a gold check (ZgUI.tick) and the card shimmers; the word "Saved" is never shown. */
.acct-save.zg-ticked { min-width: 140px; }
.acct-said { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* People */
.acct-people-list, .acct-suggest-list { list-style: none; margin: 0; padding: 0; }
.acct-person, .acct-suggest { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--hair); font-size: 18px; }
.acct-people-list .acct-person:first-child { border-top: 0; padding-top: 4px; }
.acct-avatar {
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; font: 600 20px/1 var(--serif); color: var(--burgundy);
  background: radial-gradient(circle at 35% 26%, #FFFFFF, #F6EBD0 70%, #EBD7A6); text-shadow: 0 1px 0 rgb(255 255 255 / 80%);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 90%), inset 0 -3px 6px rgb(156 105 24 / 18%), 0 0 0 2px #FFFFFF, 0 0 0 3.5px var(--acct-gold-lo), 0 6px 12px -2px rgb(64 46 14 / 22%);
}
.acct-avatar.is-ghost { background: radial-gradient(circle at 35% 26%, #FFFFFF, #FBF6EA); box-shadow: inset 0 -2px 4px rgb(156 105 24 / 10%), 0 0 0 2px #FFFFFF, 0 0 0 3.5px rgb(185 132 42 / 45%), 0 4px 8px -2px rgb(64 46 14 / 14%); color: var(--gold); }
.acct-person-text { display: flex; flex-direction: column; min-width: 0; }
.acct-person-name { font-weight: 600; font-size: 20px; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.acct-person-meta { font-size: 17px; line-height: 1.45; color: var(--ink-soft); overflow-wrap: anywhere; }
.acct-person-act { display: flex; gap: 8px; align-items: center; }
.acct-person-act .zg-quiet { min-height: 46px; }
.acct-person.is-asking { grid-template-columns: auto minmax(0, 1fr); }
.acct-person.is-asking .acct-person-act { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; padding: 12px 14px; background: linear-gradient(180deg, #FCF6E6, #FAF1DC); border: 1px solid rgb(185 132 42 / 35%); border-radius: 14px; box-shadow: var(--acct-well); }
.acct-confirm-text { flex: 1 1 100%; margin: 0; font-size: 18px; color: var(--ink); }
.acct-person.is-leaving { animation: acct-leave 360ms var(--acct-ease) forwards; }
@keyframes acct-leave { to { opacity: 0; transform: translateX(16px); } }
.acct-person.is-new { animation: acct-arrive 520ms var(--acct-ease); }
@keyframes acct-arrive { from { opacity: 0; transform: translateY(8px); background: rgb(244 212 134 / 45%); } to { opacity: 1; transform: none; background: transparent; } }
.acct-suggest-box { margin: 18px 0 0; padding: 4px 18px 6px; background: linear-gradient(180deg, #FCF8EE, #F9F2E1); border: 1px dashed rgb(185 132 42 / 55%); border-radius: 16px; box-shadow: var(--acct-well); }
.acct-suggest-box .acct-eyebrow { margin: 14px 0 0; }
.acct-suggest:first-of-type { border-top: 0; }
.acct-add-btn.btn-secondary { min-height: 48px; padding: 8px 22px; font-size: 18px; }
.acct-empty-people { margin: 4px 0 0; font-size: 18px; color: var(--ink-soft); }
.acct-note { margin: 10px 0 0; font-size: 18px; line-height: 1.5; color: var(--ink-soft); }
.acct-note.is-warn { color: var(--danger); }

/* ------------------------------------------------------------------ photos in gold frames */
.acct-photo { position: relative; padding: 3px; border-radius: 18px; background: var(--acct-frame);
  box-shadow: inset 0 1px 0 rgb(255 244 210 / 85%), inset 0 -1px 0 rgb(92 60 12 / 45%), 0 0 0 1px rgb(126 85 19 / 28%), 0 2px 3px rgb(64 46 14 / 18%), 0 14px 28px -8px rgb(64 46 14 / 38%); }
.acct-photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 15px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 40%);
  background: linear-gradient(110deg, #EDE3CC 30%, #F8F1E2 48%, #EDE3CC 66%) 0 0 / 300% 100%; }
/* While a photo is on its way, its frame holds a slow sheen instead of a flat block. */
@media (prefers-reduced-motion: no-preference) {
  .acct-photo img { animation: acct-photo-wait 1.8s ease-in-out infinite; }
  @keyframes acct-photo-wait { from { background-position: 100% 0; } to { background-position: 0 0; } }
}
.acct-photo img.is-loaded { animation: none; background: none; }
.acct-photo::after { content: ""; position: absolute; inset: 3px; border-radius: 15px; pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 10%) 0%, transparent 30%, transparent 62%, rgb(20 14 4 / 22%) 100%);
  box-shadow: inset 0 0 0 1px rgb(255 246 214 / 55%), inset 0 0 18px rgb(20 14 4 / 18%); }

/* ------------------------------------------------------------------ a coming gathering */
.acct-coming { display: flex; flex-direction: column; gap: 24px; }
.acct-gather.reg-card {
  display: grid; grid-template-columns: minmax(220px, 34%) minmax(0, 1fr); gap: 28px; align-items: start; padding: 24px;
  background: var(--acct-card); border: 1px solid var(--acct-card-line); border-radius: var(--radius-card, 20px); box-shadow: var(--acct-shadow);
  transition: transform 320ms var(--acct-ease), box-shadow 320ms var(--acct-ease), border-color 320ms ease;
}
.acct-gather.reg-card:last-child { border-bottom: 1px solid var(--acct-card-line); }
@media (hover: hover) and (pointer: fine) {
  .acct-gather.reg-card:hover { transform: translateY(-3px); border-color: rgb(185 132 42 / 45%); box-shadow: var(--acct-rim), 0 0 0 4px rgb(217 166 69 / 10%), var(--acct-elev-3); }
}
.acct-gather-photo { aspect-ratio: 4 / 3; }
/* The next-gathering chip jumps here; the sticky header must not cover the card's top. */
.acct-gather.reg-card { scroll-margin-top: 110px; }
.acct-gather-body { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.acct-gather-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.acct-pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px;
  font: 600 17px/1 var(--sans); letter-spacing: .02em; border: 1.5px solid transparent;
}
.acct-pill svg { width: 18px; height: 18px; }
.acct-pill.is-confirmed { color: #22190A; background: linear-gradient(180deg, var(--acct-gold-hi) 0%, var(--acct-gold) 60%, #CB9536 100%); border-color: var(--acct-gold-lo); text-shadow: 0 1px 0 rgb(255 245 214 / 55%);
  box-shadow: inset 0 1px 0 rgb(255 252 236 / 85%), inset 0 -2px 2px rgb(126 85 19 / 22%), 0 1px 0 rgb(126 85 19 / 45%), 0 4px 8px -2px rgb(126 85 19 / 30%); }
.acct-pill.is-pending { color: var(--gold); background: linear-gradient(180deg, #FFFFFF, #FBF6EA); border-color: rgb(185 132 42 / 60%); box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 5px -2px rgb(64 46 14 / 18%); }
.acct-pill.is-waitlisted { color: var(--ink-soft); background: var(--parchment-deep); border-color: var(--hair-deep); }
.acct-pill.is-cancelled { color: var(--ink-soft); background: #F1EFEA; border-color: var(--hair-deep); }
.acct-when { font: 600 17px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.acct-gather-name.reg-name { margin: 0; font: 500 clamp(30px, 3.4vw, 36px)/1.1 var(--serif); color: var(--burgundy); }
.acct-gather-meta.reg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; font-size: 18px; line-height: 1.5; color: var(--ink-soft); }
.acct-gather-meta svg { flex: none; width: 19px; height: 19px; color: var(--gold); }
.acct-loc { display: inline-flex; align-items: flex-start; gap: 4px; }
.acct-loc svg { margin-top: 4px; }
.acct-dot { margin: 0 4px; color: var(--ink-faint); }
.acct-linked { display: flex; align-items: center; gap: 10px; font-size: 18px; color: var(--ink); }
.acct-linked > svg { flex: none; width: 22px; height: 22px; color: var(--gold); }
.acct-linked-label { color: var(--ink-soft); margin-right: 4px; }
.acct-chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; margin: 2px 0; border-radius: 999px; font-weight: 600; font-size: 18px; color: var(--burgundy);
  background: linear-gradient(180deg, #FFFFFF, #F8EFD9); border: 1.5px solid rgb(185 132 42 / 50%);
  box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -2px 0 rgb(185 132 42 / 12%), 0 1px 0 rgb(185 132 42 / 30%), 0 4px 8px -3px rgb(64 46 14 / 18%);
}
.acct-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 24px; margin: 4px 0 0; }
.acct-fact { min-width: 0; }
.acct-fact.is-wide { grid-column: 1 / -1; }
.acct-fact dt { display: flex; align-items: center; gap: 6px; font: 600 17px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.acct-fact dt svg { width: 18px; height: 18px; color: var(--gold); }
.acct-fact dd { margin: 4px 0 0; font-size: 18px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }

/* Money */
.acct-money { padding: 18px 20px; background: linear-gradient(180deg, #FBF6EA 0%, #FDFAF3 40%, #FEFCF8 100%); border: 1px solid var(--hair-deep); border-radius: 16px; box-shadow: var(--acct-well); }
.acct-money.is-covered { padding: 14px 18px; }
.acct-money-line { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 18px; line-height: 1.5; color: var(--ink); }
.acct-money-line svg { flex: none; width: 24px; height: 24px; margin-top: 1px; padding: 3px; color: #22190A; border-radius: 50%; background: linear-gradient(180deg, var(--acct-gold-hi), var(--acct-gold)); box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgb(255 252 236 / 85%), 0 1px 0 rgb(126 85 19 / 45%), 0 3px 6px -1px rgb(126 85 19 / 35%); }
.acct-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.acct-fig { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.acct-fig-label { font: 600 17px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.acct-fig-n { display: inline-flex; align-items: center; gap: 6px; font: 600 26px/1.1 var(--serif); color: var(--burgundy); font-variant-numeric: lining-nums tabular-nums; }
.acct-fig.is-owed .acct-fig-n { color: var(--gold); }
.acct-fig.is-clear .acct-fig-n { font: 600 19px/1.2 var(--sans); color: var(--gold); }
.acct-fig.is-clear svg { width: 22px; height: 22px; }
.acct-bar { position: relative; height: 14px; margin: 14px 0 4px; border-radius: 999px; background: linear-gradient(180deg, #E6DAC0, #F1E9D8); box-shadow: inset 0 1px 3px rgb(64 46 14 / 28%), inset 0 -1px 0 rgb(255 255 255 / 70%), 0 1px 0 #FFFFFF; overflow: hidden; }
.acct-bar-fill { position: absolute; inset: 0 auto 0 0; width: var(--acct-pct, 0%); border-radius: inherit;
  background: linear-gradient(180deg, #FBE6AE 0%, var(--acct-gold-hi) 22%, var(--acct-gold) 60%, var(--acct-gold-lo) 100%);
  box-shadow: inset 0 1px 0 rgb(255 252 236 / 85%), inset 0 -2px 2px rgb(126 85 19 / 25%), 2px 0 8px rgb(217 166 69 / 55%); }
@media (prefers-reduced-motion: no-preference) {
  .acct-bar-fill { animation: acct-fill 1100ms var(--acct-ease) both; animation-delay: 200ms; }
  @keyframes acct-fill { from { width: 0; } }
}
.acct-money-note { margin: 8px 0 0; font-size: 17px; line-height: 1.5; color: var(--ink-soft); }
.acct-pays { list-style: none; margin: 12px 0 0; padding: 0; }
.acct-pay { display: grid; grid-template-columns: 8.5em minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 10px 0; border-top: 1px solid var(--hair); font-size: 18px; color: var(--ink); }
.acct-pay-when { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.acct-pay-amt { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.acct-pay-refund { display: block; font-weight: 500; font-size: 17px; color: var(--ink-soft); }
.acct-pay-receipt { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 17px; color: var(--acct-gold-deep); text-decoration: underline; text-underline-offset: 4px; }
.acct-pay-receipt svg { width: 20px; height: 20px; }
.acct-pay-receipt:hover { color: #5C3C0A; text-decoration-thickness: 2px; }
.acct-pay-receipt.is-plain { text-decoration: none; color: var(--ink-soft); }
.acct-gather .reg-next:empty { display: none; }
.acct-gather .reg-next .zg-nudge { --zg-title-size: 24px; padding: 18px 22px 20px 26px; }
.reg-set { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 18px; line-height: 1.5; color: var(--ink-soft); }
.reg-set svg { flex: none; width: 22px; height: 22px; margin-top: 3px; color: var(--gold); }
.reg-set strong { color: var(--ink); font-weight: 600; }
.reg-set a { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }
.acct-actions { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin-top: 4px; }
.acct-actions .btn-secondary { min-height: 52px; padding: 10px 24px; font-size: 19px; }
.acct-actions .zg-quiet { min-height: 48px; }

/* ------------------------------------------------------------------ the ones you have been to: a timeline */
.acct-timeline { position: relative; list-style: none; margin: 0; padding: 0 0 0 34px; }
.acct-timeline::before { content: ""; position: absolute; left: 10px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--acct-gold-hi), var(--acct-gold) 40%, rgb(217 166 69 / 20%)); box-shadow: 1px 0 0 rgb(255 255 255 / 80%), 0 0 6px rgb(217 166 69 / 30%); }
.acct-memory.reg-card { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: start; padding: 18px; margin: 0 0 18px;
  background: var(--acct-card); border: 1px solid var(--hair-deep); border-radius: 18px; box-shadow: var(--acct-rim), var(--acct-elev-1); transition: box-shadow 320ms var(--acct-ease); }
@media (hover: hover) and (pointer: fine) { .acct-memory.reg-card:hover { box-shadow: var(--acct-rim), var(--acct-elev-2); } }
.acct-memory-bead { position: absolute; left: -31px; top: 26px; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #FFFBEA 0%, var(--acct-gold-hi) 28%, var(--acct-gold) 60%, var(--acct-gold-lo) 100%);
  box-shadow: inset 0 -2px 3px rgb(126 85 19 / 35%), 0 0 0 4px #FFFFFF, 0 0 0 5px rgb(185 132 42 / 40%), 0 0 14px rgb(214 163 66 / 50%), 0 3px 6px rgb(64 46 14 / 25%); }
.acct-memory-photo { aspect-ratio: 4 / 3; }
.acct-memory-body { min-width: 0; }
.acct-memory-when { margin: 0; font: 600 17px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.acct-memory-name { margin: 4px 0 6px; font: 500 26px/1.15 var(--serif); color: var(--burgundy); }
.acct-memory-meta { margin: 0; font-size: 18px; line-height: 1.5; color: var(--ink-soft); }
.acct-memory-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 0; }
.acct-memory-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 17px; color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }
.acct-memory-links svg { width: 20px; height: 20px; }
.acct-memory .reg-next { margin-top: 6px; }
.acct-memory .reg-next:empty { display: none; }

/* ------------------------------------------------------------------ cancelled: last and quiet */
.acct-cancelled { margin: 28px 0 0; }
.acct-cancelled > summary { list-style: none; display: inline-flex; gap: 10px; cursor: pointer; }
.acct-cancelled > summary::-webkit-details-marker { display: none; }
.acct-count { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px; font-size: 17px; background: linear-gradient(180deg, #F3EEE3, #FBF8F2); border: 1px solid var(--hair-deep); box-shadow: inset 0 1px 2px rgb(64 46 14 / 12%); }
.acct-cancel-list { list-style: none; margin: 14px 0 0; padding: 0; }
.acct-cancel.reg-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--hair); }
.acct-cancel-photo { aspect-ratio: 1; padding: 2px; border-radius: 14px; filter: grayscale(.85); opacity: .75; box-shadow: none; }
.acct-cancel-photo img, .acct-cancel-photo::after { border-radius: 12px; }
.acct-cancel-name { margin: 0; font-size: 19px; font-weight: 600; color: var(--ink-soft); }
.acct-cancel-meta { margin: 2px 0 0; font-size: 17px; color: var(--ink-faint); }
.acct-cancel .reg-next { grid-column: 1 / -1; }
.acct-cancel .reg-next:empty { display: none; }

/* Nothing yet */
.acct-none { text-align: center; padding: 40px 28px; }
.acct-none p { margin: 0 auto 20px; max-width: 520px; font-size: 18px; line-height: 1.6; color: var(--ink-soft); }
.acct-none .acct-h3 { margin: 0 auto 8px; font: 500 30px/1.2 var(--serif); color: var(--burgundy); }

/* ------------------------------------------------------------------ phones and tablets */
@media (max-width: 960px) {
  .acct-you { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .acct-gather.reg-card { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px; }
  .acct-gather-photo { aspect-ratio: 16 / 9; }
  .acct-profile-facts { grid-template-columns: minmax(0, 1fr); }
  .acct-card { padding: 22px 20px; }
}
@media (max-width: 560px) {
  .acct-figures { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .acct-fig:last-child { grid-column: 1 / -1; }
  .acct-pay { grid-template-columns: minmax(0, 1fr) auto; }
  .acct-pay-how { grid-column: 1; grid-row: 2; color: var(--ink-soft); }
  .acct-pay-amt { grid-row: 1 / span 2; grid-column: 2; }
  .acct-memory.reg-card { grid-template-columns: minmax(0, 1fr); }
  .acct-memory-photo { aspect-ratio: 16 / 9; }
  .acct-timeline { padding-left: 26px; }
  .acct-memory-bead { left: -23px; }
  .acct-timeline::before { left: 7px; }
  .acct-id { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 14px; }
  .acct-id-text { display: contents; }
  .acct-monogram { grid-row: 1 / span 2; width: 64px; height: 64px; font-size: 26px; }
  .acct-id-name { grid-column: 2; align-self: end; }
  .acct-id-meta:not(.acct-id-email) { grid-column: 2; align-self: start; margin: 0; }
  .acct-id-email { grid-column: 1 / -1; margin-top: 12px; }
  .acct-dot { display: none; }
  .acct-loc { flex-basis: 100%; }
  .acct-id-name { font-size: 28px; }
  .acct-card-actions .btn-primary, .acct-card-actions .btn-secondary, .acct-actions .btn-secondary { flex: 1 1 100%; }
  .acct-person, .acct-suggest { grid-template-columns: auto minmax(0, 1fr); }
  .acct-person-act { grid-column: 1 / -1; justify-content: flex-end; }
  .acct-next { border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-account #account-block :is(.acct-fold, .acct-words) .opt-foot label { transition: none; transform: none; }
  .acct-card.is-shimmer::after, .acct-pf.is-fresh dd, .acct-person.is-leaving, .acct-person.is-new { animation: none !important; }
  .acct-fold { transition: none; }
  .acct-gather.reg-card, .acct-next { transition: none; }
  .acct-gather.reg-card:hover, .acct-next:hover { transform: none; }
}
/* ------------------------------------------------------------------ signing in, in the home's look (Jordan, 2026-10-11:
   "I want the whole process to match this format"). Looks only: the sign-in form's ids, steps and script are the
   accounts session's and stay as they are. The same card, gold thread, medallion and raised gold pills as the home. */
.page-account #signin-block .form-card {
  position: relative; overflow: hidden; margin-top: 8px; padding: 34px 34px 32px; box-sizing: border-box;
  background: var(--acct-card); border: 1px solid var(--acct-card-line); border-radius: 22px; box-shadow: var(--acct-shadow);
}
.page-account #signin-block .form-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--acct-gold), var(--acct-gold-hi) 55%, rgb(255 255 255 / 0)); }
/* The medallion over the title: a gold seal with an envelope, the same on both steps. */
.page-account #signin-block #s-title { margin: 0 0 8px; text-align: center; font: 600 clamp(30px, 4vw, 36px)/1.15 var(--serif); color: var(--burgundy); }
.page-account #signin-block #s-title::before {
  content: ""; display: block; width: 68px; height: 68px; margin: 0 auto 16px; border-radius: 50%;
  background: no-repeat center / 34px 34px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E5513' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.5'/%3E%3Cpath d='M3.8 7l8.2 6 8.2-6'/%3E%3C/svg%3E"),
    radial-gradient(circle at 34% 26%, #FFFFFF 0%, #FCF5E2 40%, #EFD9A4 100%);
  box-shadow: inset 0 2px 2px rgb(255 255 255 / 90%), inset 0 -6px 10px rgb(156 105 24 / 22%), 0 0 0 3px #FFFFFF, 0 0 0 5px var(--acct-gold), 0 0 0 10px rgb(217 166 69 / 14%), 0 12px 24px -6px rgb(64 46 14 / 28%);
}
.page-account #signin-block .form-card-sub, .page-account #signin-block .sent-sub { text-align: center; font-size: 18px; line-height: 1.6; color: var(--ink-soft); margin: 0 auto 24px; max-width: 460px; }
.page-account #signin-block .field label { font: 600 17px/1.3 var(--sans); letter-spacing: .02em; color: var(--ink); }
.page-account #signin-block #s-email {
  box-sizing: border-box; width: 100%; min-height: 60px; padding: 0 18px; font: 500 20px/1.2 var(--sans); color: var(--ink);
  background: #FFFDF8; border: 2px solid rgb(185 132 42 / 55%); border-radius: 14px; box-shadow: inset 0 1px 3px rgb(64 46 14 / 10%);
  transition: border-color 180ms ease, box-shadow 220ms var(--acct-ease);
}
.page-account #signin-block #s-email:focus, .page-account #code-form .code-box:focus { outline: none; border-color: var(--acct-gold); box-shadow: inset 0 1px 3px rgb(64 46 14 / 10%), 0 0 0 4px rgb(217 166 69 / 28%); }
/* The two buttons: the home's raised gold pill. */
.page-account #signin-block :is(#s-btn, .code-go) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 60px; padding: 0 34px; box-sizing: border-box; cursor: pointer;
  font: 700 20px/1.2 var(--sans); letter-spacing: .01em; color: #22190A; text-shadow: 0 1px 0 rgb(255 245 214 / 55%);
  background: linear-gradient(180deg, var(--acct-gold-hi) 0%, var(--acct-gold) 46%, var(--acct-gold-lo) 100%); border: 1px solid var(--acct-gold-deep); border-radius: 999px;
  box-shadow: inset 0 1px 0 rgb(255 252 236 / 85%), inset 0 -3px 0 rgb(126 85 19 / 32%), 0 2px 0 var(--acct-gold-deep), 0 8px 18px rgb(126 85 19 / 26%);
  transition: transform 220ms var(--acct-ease), box-shadow 220ms var(--acct-ease), filter 220ms ease;
}
.page-account #signin-block #s-btn { width: 100%; margin-top: 22px; }
@media (hover: hover) and (pointer: fine) {
  .page-account #signin-block :is(#s-btn, .code-go):not([disabled]):hover { background: linear-gradient(180deg, var(--acct-gold-hi) 0%, var(--acct-gold) 46%, var(--acct-gold-lo) 100%); filter: saturate(1.08) brightness(1.03); transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgb(255 252 236 / 90%), inset 0 -3px 0 rgb(126 85 19 / 30%), 0 3px 0 var(--acct-gold-deep), 0 0 0 4px rgb(214 163 66 / 30%), 0 14px 30px rgb(196 140 40 / 42%); }
}
.page-account #signin-block :is(#s-btn, .code-go):focus-visible { outline: 3px solid var(--acct-gold); outline-offset: 3px; }
.page-account #signin-block :is(#s-btn, .code-go):not([disabled]):active { transform: translateY(2px); transition-duration: 90ms; box-shadow: inset 0 2px 6px rgb(92 60 12 / 38%), 0 0 0 3px rgb(214 163 66 / 30%); }
.page-account #signin-block :is(#s-btn, .code-go)[disabled] { opacity: .6; cursor: default; transform: none; }
/* The code step: the code sits in a gold-framed well, like the code box in the email. */
.page-account #code-form .code-label { text-align: center; font: 600 18px/1.4 var(--sans); }
.page-account #code-form .code-row { justify-content: center; }
.page-account #code-form .code-box {
  height: 64px; min-height: 64px; font: 600 32px/1 var(--serif); letter-spacing: .35em; text-align: center; color: var(--ink);
  background: #FFFBF0; border: 2px solid var(--acct-gold); border-radius: 16px; box-shadow: inset 0 1px 3px rgb(64 46 14 / 12%);
}
.page-account #signin-block .sent-note { text-align: center; font-size: 17px; color: var(--ink-faint); }
.page-account #signin-block .sent-links { justify-content: center; gap: 10px 12px; margin-top: 16px; }
.page-account #signin-block .sent-links > span { display: none; }
.page-account #signin-block .sent-links .link-btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; font: 600 17px/1.2 var(--sans); color: #22190A; text-decoration: none; cursor: pointer;
  background: linear-gradient(180deg, #FFFFFF, #FBF6EA); border: 1.5px solid rgb(185 132 42 / 45%); border-radius: 999px;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 0 rgb(185 132 42 / 25%), 0 4px 10px rgb(39 37 31 / 6%);
  transition: transform 220ms var(--acct-ease), box-shadow 220ms var(--acct-ease), border-color 220ms ease;
}
.page-account #signin-block .sent-links .link-btn:not([disabled]):hover { border-color: var(--acct-gold); transform: translateY(-1px); box-shadow: 0 0 0 4px rgb(214 163 66 / 22%), 0 8px 18px rgb(185 132 42 / 22%); }
.page-account #signin-block .sent-links .link-btn[disabled] { opacity: .6; cursor: default; }
.page-account #signin-block .msg { text-align: center; }
@media (max-width: 520px) {
  .page-account #signin-block .form-card { padding: 28px 20px 26px; }
  .page-account #signin-block .sent-links { flex-direction: column; align-items: stretch; }
  .page-account #signin-block .sent-links .link-btn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .page-account #signin-block :is(#s-btn, .code-go, .sent-links .link-btn) { transition: none; transform: none !important; }
}

/* ------------------------------------------------------------------ the timeline, round two: pictures, words, Frequent Flyer */
.acct-memory-media { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.acct-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.acct-thumb { position: relative; display: block; padding: 2px; aspect-ratio: 3 / 2; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--acct-frame); box-shadow: 0 0 0 1px rgb(126 85 19 / 25%), 0 3px 6px -2px rgb(64 46 14 / 30%); opacity: .78;
  transition: opacity 200ms ease, transform 220ms var(--acct-ease), box-shadow 220ms var(--acct-ease); }
.acct-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.acct-thumb:hover, .acct-thumb:focus-visible { opacity: 1; transform: translateY(-2px); }
.acct-thumb.is-on { opacity: 1; box-shadow: 0 0 0 2px var(--acct-gold), 0 0 0 5px rgb(217 166 69 / 25%), 0 6px 12px -3px rgb(64 46 14 / 35%); }
.acct-thumb:focus-visible { outline: 3px solid var(--acct-gold); outline-offset: 2px; }
.acct-words { margin-top: 14px; }
.acct-words > .btn-secondary { min-height: 50px; padding: 10px 22px; font-size: 18px; }
.acct-words-form { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: linear-gradient(180deg, #FCF6E6, #FAF1DC); border: 1px solid rgb(185 132 42 / 35%); box-shadow: var(--acct-well); }
.acct-words-label { font: 600 18px/1.4 var(--sans); color: var(--ink); }
.page-account #account-block .acct-words-text { box-sizing: border-box; width: 100%; min-height: 120px; padding: 12px 14px; font: 400 18px/1.55 var(--sans); color: var(--ink); resize: vertical;
  background: #FFFDF8; border: 2px solid rgb(185 132 42 / 55%); border-radius: 14px; box-shadow: inset 0 1px 3px rgb(64 46 14 / 10%); }
.acct-words-form .acct-card-actions { margin-top: 4px; }
.acct-said-words { margin: 0; padding: 14px 18px; border-left: 3px solid var(--acct-gold); border-radius: 0 14px 14px 0; background: linear-gradient(90deg, #FBF5E6, rgb(251 245 230 / 0)); }
.acct-said-words blockquote { margin: 0; font: italic 500 22px/1.4 var(--serif); color: var(--burgundy); }
.acct-said-words figcaption { margin-top: 8px; font-size: 17px; line-height: 1.5; color: var(--ink-soft); }
.acct-words > .zg-quiet { margin-top: 10px; }
.acct-ff { margin: 8px 0 0 34px; }
.acct-ff h3 { margin: 4px 0 6px; }
.acct-ff .btn-secondary { min-height: 52px; padding: 10px 24px; font-size: 19px; }
@media (max-width: 560px) { .acct-ff { margin-left: 26px; } .acct-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .acct-thumb { transition: none; } .acct-thumb:hover, .acct-thumb:focus-visible { transform: none; } }

@media print { .acct-actions, .acct-card-actions, #zg-family, .topbar-actions { display: none !important; } }