/* ============================================================
   account.css: the Account page and the delete-my-account flow
   (item 12g, 2026-09-24), and who is signed in (item 157, 2026-09-26).

   Everything sits under the acct- prefix, apart from item 157's top bar
   circle, .nav-circle and its .nav-circle-wrap. The page's red outlined button
   clones .disp-btn-ghost-pill's shape (disputes.css); the confirmation
   card clones the .q-leave-* family's values (base.css) as its own class
   family, the C9 precedent that comment names, because the two cards
   disagree about which button is destructive. Below 480px, C1 (the tall
   card) takes the Quick Check sheet's treatment (mobile.css), gated on
   #modal-account-delete.acct-tall so C2 to C5 stay centered cards.
   ============================================================ */

/* --- The page --- */
.acct-wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 36px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  color: var(--text);
}
.acct-h1 { margin: 0 0 6px; }
.acct-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 28px;
  box-shadow: var(--shadow-lg);
}
.acct-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(30,42,53,0.55);
  margin-bottom: 6px;
}
.acct-email {
  font-size: 17px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.acct-card-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}
.acct-card-body {
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 16px;
}
.acct-btn-danger-ghost {
  background: transparent;
  color: var(--red);
  border: 1.5px solid var(--red);
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  width: auto;
}
.acct-btn-danger-ghost:hover { background: rgba(214,88,76,0.06); }
.acct-legal {
  text-align: center;
  padding: 8px 16px 24px;
  font-size: 13px;
}
.acct-legal a {
  color: var(--text);
  opacity: 0.55;
  margin: 0 10px;
  text-decoration: none;
}
.acct-legal .sep { opacity: 0.4; }

/* --- The confirmation card (cloned from .q-leave-*) --- */
.acct-modal-card {
  max-width: 440px;
  padding: 28px;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.acct-modal-title {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--text);
  margin: 0 0 12px;
  line-height: 1.2;
}
.acct-modal-body {
  font-size: 15px;
  color: var(--text);
  line-height: 1.5;
  margin: 0 0 10px;
}
.acct-modal-body a { color: var(--coral); }
.acct-modal-strong {
  font-weight: 600;
  margin: 0 0 24px;
}
.acct-modal-list {
  margin: 0 0 14px;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.acct-letters {
  background: #F3EFE7;
  border: 1px solid rgba(31,24,19,0.08);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
}
.acct-letters-link {
  display: inline-block;
  margin-top: 6px;
  color: var(--coral);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.acct-modal-actions { display: flex; flex-direction: column; gap: 10px; }
.acct-modal-primary {
  background: var(--coral);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 13px 24px;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.12s;
}
.acct-modal-primary:hover { background: #d9581a; }
.acct-modal-primary.acct-modal-danger { background: var(--red); }
.acct-modal-primary.acct-modal-danger:hover { background: #c44d42; }
/* Disabled: dimmed, and the hover stays the fill. */
.acct-modal-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.acct-modal-primary:disabled:hover { background: var(--coral); }
.acct-modal-primary.acct-modal-danger:disabled:hover { background: var(--red); }
.acct-modal-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(30,42,53,0.18);
  border-radius: 999px;
  padding: 13px 24px;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.12s;
}
.acct-modal-secondary:hover { background: rgba(30,42,53,0.04); }
.acct-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid rgba(31,24,19,0.18);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  margin: 0 0 20px;
}
.acct-input:focus { outline: 2px solid var(--coral); outline-offset: 2px; }
.acct-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(242,100,25,0.22);
  border-top-color: var(--coral);
  margin: 0 0 16px;
  animation: acct-spin 0.9s linear infinite;
}
@keyframes acct-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .acct-spinner { animation: none; }
}

/* ============================================================
   Item 157 (2026-09-26): who is signed in. The top bar's circle, its menu,
   the picture editor, the Account page's head and the delete cards' block.
   Design's values from the option B mockups. The menu and its dim layer
   take the vault's values (base.css .vault-panel, .vault-backdrop), and
   below 480px the menu takes the vault's phone placement (mobile.css).
   ============================================================ */

/* --- The circle, at every size --- */
.acct-circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  color: #fff;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}
.acct-circle-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.acct-circle-has-img .acct-circle-letter { visibility: hidden; }
.acct-circle-nav { width: 32px; height: 32px; font-size: 13px; }
.acct-circle-menu { width: 72px; height: 72px; font-size: 28px; }
.acct-circle-pic { width: 88px; height: 88px; font-size: 32px; margin: 0 0 16px; }
.acct-circle-page { width: 48px; height: 48px; font-size: 19px; }
.acct-circle-who { width: 36px; height: 36px; font-size: 14px; }

/* --- The top bar's circle --- */
/* The wrapper is gated with the button, so a signed-out bar holds no empty
   slot for .nav-controls' gap to space out. */
.nav-circle-wrap { position: relative; display: none; align-items: center; }
body.clerk-authenticated .nav-circle-wrap { display: flex; }
.nav-circle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}
body.clerk-authenticated .nav-circle { display: flex; }
.nav-circle .acct-circle { transition: box-shadow 0.12s; }
.nav-circle:hover .acct-circle { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(30,42,53,0.16); }
.nav-circle.open .acct-circle { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--coral); }

/* --- The menu --- */
.acct-menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 320px;
  box-sizing: border-box;
  background: var(--bone-0);
  border: 1.5px solid rgba(30,42,53,0.12);
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(30,42,53,0.10);
  padding: 8px;
  z-index: 200;
  text-align: left;
  color: var(--text);
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.acct-menu[hidden] { display: none; }
.acct-menu-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(31,24,19,0.10);
  border-radius: 16px;
  padding: 22px 16px 18px;
}
.acct-menu-who {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 12px;
  max-width: 100%;
}
.acct-menu-name { font-size: 17px; font-weight: 700; line-height: 1.25; }
.acct-menu-email {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(30,42,53,0.72);
  overflow-wrap: anywhere;
}
.acct-menu-rows { padding: 6px 0 0; }
.acct-menu-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.acct-menu-row:hover { background: #F3EFE7; }
.acct-menu-row svg { width: 18px; height: 18px; flex-shrink: 0; }
.acct-menu-rule { height: 1px; background: rgba(30,42,53,0.10); margin: 6px 8px; }
.acct-menu-foot { padding: 4px 4px 2px; }
.acct-menu-signout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(30,42,53,0.18);
  border-radius: 999px;
  padding: 11px 16px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.acct-menu-signout:hover { background: rgba(30,42,53,0.04); }
.acct-menu-signout svg { width: 16px; height: 16px; flex-shrink: 0; }

/* The dim layer: the vault backdrop's values. Placed as #vault-backdrop is,
   it leaves the bar and the sidebar clear. */
.acct-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--backdrop-scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
.acct-menu-backdrop.visible { opacity: 1; visibility: visible; transition: opacity 0.18s ease, visibility 0s; }

/* --- The picture editor (inside .mode-modal-card acct-modal-card) --- */
.acct-pic-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 22px;
}
.acct-pic-choose {
  padding: 10px 20px;
  border: 1.5px solid rgba(30,42,53,0.3);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.acct-pic-remove {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.acct-pic-choose:disabled,
.acct-pic-remove:disabled,
.acct-modal-secondary:disabled { opacity: 0.45; cursor: not-allowed; }
.acct-pic-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}
.acct-pic-error svg { width: 18px; height: 18px; flex-shrink: 0; stroke: var(--red); }
/* The saving ring: a small .acct-spinner in white on coral. */
.acct-pic-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  vertical-align: middle;
  animation: acct-spin 0.9s linear infinite;
}

/* --- The Account page's sign-in card --- */
.acct-head { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.acct-head-name { font-size: 20px; font-weight: 700; line-height: 1.2; }
.acct-pic-btn {
  margin-top: 18px;
  padding: 10px 22px;
  border: 1.5px solid rgba(30,42,53,0.3);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* --- The block under the title of C1, C2 and C5 --- */
.acct-who {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid rgba(31,24,19,0.10);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 0 0 14px;
}
.acct-who-text { display: flex; flex-direction: column; min-width: 0; }
.acct-who-name { font-size: 15px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.acct-who-email { font-size: 14px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .acct-pic-spinner { animation: none; }
  .nav-circle .acct-circle, .acct-menu-backdrop, .acct-menu-backdrop.visible { transition: none; }
}

/* --- Phone --- */
/* Below 768px the item 136 .app-legal footer IS the Terms and Privacy row,
   so the page's own row hides and the links show once. */
@media (max-width: 768px) {
  .acct-wrap { padding: 24px 20px 0; gap: 14px; }
  .acct-card { padding: 20px 22px; }
  .acct-btn-danger-ghost { display: block; width: 100%; min-height: 44px; }
  .acct-legal { display: none; }
  /* Item 157: the picture button, full width as the delete button is. */
  .acct-pic-btn { display: block; width: 100%; min-height: 44px; }
}
/* C1 only: the Quick Check sheet's treatment (mobile.css), a full-height
   sheet with its buttons pinned so they are always reachable. */
@media (max-width: 480px) {
  #modal-account-delete.acct-tall { align-items: flex-start; padding: 0; }
  #modal-account-delete.acct-tall .acct-modal-card {
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    padding: 24px 20px 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #modal-account-delete.acct-tall .acct-modal-actions {
    position: sticky;
    bottom: 0;
    background: var(--bone-0);
    margin: 14px -20px 0;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 -1px 0 rgba(31,24,19,0.08);
  }
  /* Item 157: the menu takes the vault's phone placement (mobile.css
     .vault-panel), with taller rows; the editor's choose pill goes full
     width and Remove picture takes its own 44px line. */
  .acct-menu { position: fixed; top: 64px; left: 14px; right: 14px; width: auto; max-height: calc(100vh - 80px); overflow-y: auto; }
  .acct-menu-row { min-height: 48px; }
  .acct-menu-signout { min-height: 46px; }
  .acct-pic-choose { width: 100%; }
  .acct-pic-remove { width: 100%; min-height: 44px; }
}