/* ==========================================================================
   MEMBERS' BRIDGE — the account entry in the nav, menu and footer, the
   members' sheet (sign up or log in without leaving the page), owned and
   upgrade states on the buy buttons, and the moment the trades unlock.
   Built from the site's recipes: nav pill links, .pf-ava, .tile, .seg, the
   .pf-sheet dialog and the app's form recipe (design-system §15), so the
   sheet and /app/login read as one product. Frost throughout; gold only
   on the buy path.
   ========================================================================== */

/* nav: "Log in" is a nav link; a member sees their initials and "Dashboard" */
.nav__acct { display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 14px; border-radius: var(--r-pill); white-space: nowrap; font-size: 14px; color: var(--text-3); transition: color .2s, background-color .2s; -webkit-tap-highlight-color: transparent; }
.nav__acct.is-member { padding: 0 15px 0 4px; color: var(--text-2); box-shadow: var(--sh-hair); }
.nav__acct .pf-ava { width: 28px; height: 28px; font-size: 10.5px; }
@media (hover: hover) { .nav__acct:hover { color: var(--text-hi); background: var(--glass-2); } }
@media (max-width: 860px) {
  .nav__acct { display: none; }
  /* phones: a member keeps a 40px avatar in the bar; guests use the menu */
  .nav__acct.is-member { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; background: var(--glass); }
  .nav__acct.is-member .pf-ava { width: 32px; height: 32px; font-size: 11px; }
  .nav__acct.is-member .nav__acct-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* mobile menu: the account row under the sections */
.mnav__acct .tile.pf-ava { font-size: 13px; font-weight: 600; color: var(--text-hi); }
.mnav__acct small { color: var(--text-3); }

/* ---------------------------------------------------------------- the sheet */
.acct-sheet { width: min(460px, 100vw); }
.acct-sheet [hidden] { display: none !important; }
.acct-sheet .pf-sheet__head { min-height: 77px; }
.acct-sheet .pf-sheet__body { display: flex; flex-direction: column; }
.acct-main, .acct-done { width: 100%; max-width: 380px; margin: auto; padding: 8px 0 12px; }

/* what you came for: a product, a locked feed, or the members' area */
.acct-ctx { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
.acct-ctx .emblem { width: 50px; height: 50px; margin: -6px -2px; }
.acct-ctx__mark { flex: none; width: 34px; height: auto; }
.acct-ctx__lock { color: var(--gold-hi); background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-edge); }
.acct-ctx__t { min-width: 0; }
.acct-ctx__t b { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 500; line-height: 1.2; color: var(--text-hi); }
.acct-ctx__t small { display: block; margin-top: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; color: var(--text-3); }
.acct-ctx__p { flex: none; margin-left: auto; padding-left: 8px; text-align: right; font-family: var(--font-mono); line-height: 1.1; }
.acct-ctx__p b { font-size: 19px; font-weight: 500; }
.acct-ctx__p s { display: block; margin-top: 3px; font-size: 11.5px; color: var(--text-4); }

.acct-seg { display: flex; width: 100%; margin-bottom: 28px; }
.acct-seg button { flex: 1; height: 38px; }
.acct-title { font-size: clamp(28px, 3vw, 34px); line-height: 1.08; text-wrap: balance; }
.acct-lede { margin: 10px 0 26px; font-size: 15px; line-height: 1.55; color: var(--text-3); text-wrap: pretty; }

/* the form: the app's field recipe, so both sign-in screens match */
.acct-form { display: grid; gap: 16px; }
.acct-field { display: block; min-width: 0; }
.acct-field > span:first-child, .acct-field > label { display: block; margin-bottom: 8px; font-size: 13px; color: var(--text-2); }
.acct-field em { font-style: normal; color: var(--text-4); }
.acct-input {
  display: block; width: 100%; height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-pill); outline: none;
  font: inherit; font-size: 15px; color: var(--text-hi); background-color: var(--glass); box-shadow: var(--sh-hair);
  transition: background-color .2s, box-shadow .2s;
}
.acct-input:focus { background-color: var(--glass-2); box-shadow: inset 0 0 0 1px var(--edge-strong), 0 0 0 4px rgba(182, 217, 252, .07); }
.acct-input:-webkit-autofill { -webkit-text-fill-color: var(--text-hi); -webkit-box-shadow: inset 0 0 0 1px var(--edge), inset 0 0 0 44px #0b0e1c; caret-color: var(--text-hi); }
@media (hover: hover) { .acct-input:hover { background-color: var(--glass-2); } }
.acct-field.is-bad .acct-input { box-shadow: inset 0 0 0 1px rgba(240, 132, 102, .55); }
.acct-ferr, .acct-err { margin-top: 7px; font-size: 12.5px; line-height: 1.45; color: var(--down); }
.acct-err { margin-top: -4px; }
.acct-switch { font: inherit; color: var(--text-hi); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--edge-strong); }
.acct-pw { position: relative; display: block; }
.acct-pw .acct-input { padding-right: 52px; }
.acct-forgot { display: inline-block; margin: 2px 0 -8px; padding: 8px 0; font-size: 12.5px; color: var(--text-3); transition: color .2s; }
@media (hover: hover) { .acct-forgot:hover { color: var(--text-hi); } }
.acct-eye { position: absolute; top: 50%; right: 4px; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; display: grid; place-items: center; color: var(--text-3); transition: color .2s, background-color .2s; -webkit-tap-highlight-color: transparent; }
.acct-eye::after { content: ""; position: absolute; inset: -4px; }
.acct-eye[aria-pressed="true"] { color: var(--text-hi); background: var(--glass-2); }
.acct-eye svg { width: 17px; height: 17px; }
@media (hover: hover) { .acct-eye:hover { color: var(--text-hi); } }
.acct-form .btn { margin-top: 6px; }
.acct-form .btn[aria-busy="true"] { pointer-events: none; opacity: .72; }
.acct-fine { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 18px; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--text-4); }
.acct-fine svg { flex: none; width: 15px; height: 15px; color: var(--gold); }
.acct-fine a { color: var(--text-3); text-decoration: underline; text-decoration-color: var(--edge-strong); text-underline-offset: 3px; }

/* signed up: the page behind is already open */
.acct-done { text-align: center; }
.acct-done .tile { width: 56px; height: 56px; margin: 0 auto 22px; }
.acct-done .tile svg { width: 22px; height: 22px; }
.acct-done h2 { font-size: clamp(28px, 3vw, 34px); line-height: 1.08; outline: none; }
.acct-done p { max-width: 34ch; margin: 12px auto 28px; font-size: 15px; line-height: 1.55; color: var(--text-3); text-wrap: pretty; }
.acct-done__acts { display: grid; gap: 10px; }

/* ------------------------------------------------- what a member already owns */
.god__price--own b { font-family: var(--font-display); font-size: 21px; font-weight: 500; color: var(--text-hi); }
.price__own { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.4; color: var(--text-hi); background: var(--glass-2); box-shadow: var(--sh-hair); }
.price__own svg { flex: none; width: 17px; height: 17px; margin-top: 1px; }
.price__own small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-3); }

/* ----------------------------------------- the unlock: rows resolve into view */
.is-reveal .pf-tr { animation: acctRow .55s ease-out backwards; animation-delay: calc(var(--n, 0) * 45ms); }
@keyframes acctRow { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
.mtrades__more { margin-top: 14px; font-size: 12.5px; color: var(--text-4); }

@media (max-width: 700px) {
  /* --kb is the keyboard's height and --vvh what is left above it (account.js); the sheet sits on the keyboard */
  .acct-sheet { bottom: var(--kb, 0px); height: auto; max-height: min(92dvh, calc(var(--vvh, 100dvh) - 8px)); }
  .acct-sheet .pf-sheet__in { height: auto; max-height: min(92dvh, calc(var(--vvh, 100dvh) - 8px)); }
  .acct-sheet .pf-sheet__head { min-height: 0; padding-bottom: 16px; }
  .acct-main, .acct-done { padding: 4px 0 6px; }
  .acct-seg { margin-bottom: 22px; }
  .acct-lede { margin-bottom: 22px; }
  .acct-input { font-size: 16px; } /* 16px keeps iOS from zooming into the field */
}
@media (prefers-reduced-motion: reduce) { .is-reveal .pf-tr { animation: none; } }