/* ============================================================================
   FRENZY96 — Deep-Sea Redesign · PROFILE SUBPAGES  (fz-profile.css)
   ----------------------------------------------------------------------------
   Deep-sea skin for the shared .pf-* component layer used by every Account
   subpage rendered into #pf3-subpage-body (Personal Info / Bank / VIP /
   Security). Scoped to #pf3-subpage so it never leaks outside the subpage
   system. Primary target this pass: SECURITY (change password + strength +
   phone/email verify cards, injected by security-v2.js).

   PURE UI. Field ids / api.changePassword (PUT /api/profile/password) / strength
   algorithm / validation / .pf-* & .sec-* class names untouched. Only .pf-input
   (+:focus) carries !important — matched 1:1 against stanley-header.css, which
   locks those with !important. Everything else wins by scope + source order.
   ============================================================================ */

/* ── Section label ───────────────────────────────────────────────────────── */
#pf3-subpage .pf-sec-head {
  font-size: var(--fz-text-xs); font-weight: var(--fz-w-black);
  text-transform: uppercase; letter-spacing: var(--fz-track-caps);
  color: var(--fz-text-3);
}

/* ── Glass cards ─────────────────────────────────────────────────────────── */
#pf3-subpage .pf-card {
  background: linear-gradient(180deg, var(--fz-surface-2), var(--fz-surface));
  border: 1px solid var(--fz-line);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
#pf3-subpage .pf-label { color: var(--fz-text-3); }
#pf3-subpage .pf-value { color: var(--fz-white); }
#pf3-subpage .pf-value.mono, #pf3-subpage .pf-value-readonly { color: var(--fz-text-2); }

/* ── Inputs — stanley-header locks .pf-input with !important, so match it ── */
#pf3-subpage .pf-input {
  background: var(--fz-navy) !important;
  border: 1px solid var(--fz-line-2) !important;
  border-radius: 10px !important;
  color: var(--fz-white) !important;
  padding: 11px 12px !important;
}
/* password inputs carry the show/hide eye (security-v2 sets data-_eye) → reserve
   right space so text never slides under the icon */
#pf3-subpage .pf-input[data-_eye] { padding-right: 36px !important; }
/* focus → cyan (replaces the old gold #fbbf24 focus) */
#pf3-subpage .pf-input:focus {
  border-color: var(--fz-cyan) !important;
  background: var(--fz-navy) !important;
  box-shadow: 0 0 0 3px var(--fz-cyan-soft), var(--fz-glow-cyan) !important;
  outline: none !important;
}
#pf3-subpage .pf-input::placeholder { color: var(--fz-text-faint); }

/* ── Save buttons — generic stays green (Personal Info's #btn-save-email keeps
   its meaning); the password button is gold per the Security spec ─────────── */
#pf3-subpage .pf-btn-save {
  background: var(--fz-grad-green);
  color: var(--fz-on-green);
  border-radius: var(--fz-r-md);
}
#pf3-subpage #btn-change-pw {
  background: var(--fz-grad-gold);
  color: var(--fz-on-gold);
  border-radius: var(--fz-r-lg);
  box-shadow: var(--fz-glow-gold);
}

/* ── Security: strength text uses inline colour from strengthOf() (already
   remapped to fz hexes in JS). Verify cards + badges below. ──────────────── */
#pf3-subpage .sec-vcard { transition: border-color var(--fz-dur-fast) var(--fz-ease-out); }
#pf3-subpage .sec-vcard[data-go="1"]:hover { border-color: var(--fz-cyan); }
#pf3-subpage .sec-vbadge {
  font-size: 9px; font-weight: var(--fz-w-black); text-transform: uppercase; letter-spacing: 0.04em;
  border-radius: 5px; padding: 3px 8px; white-space: nowrap;
}
#pf3-subpage .sec-vbadge.ok   { color: var(--fz-green); background: var(--fz-green-soft); border: 1px solid rgba(30, 213, 113, 0.35); }
#pf3-subpage .sec-vbadge.warn { color: var(--fz-gold);  background: var(--fz-gold-soft);  border: 1px solid rgba(245, 200, 66, 0.35); }

/* ══ Profile section grids (2026-07-04) ══════════════════════════════════════
   The CMS show/hide script does `el.style.display = ''` to reveal sections,
   which STRIPS the inline `display:grid` — quick actions collapsed to inline
   flow and LIFETIME STATS fell to 1 column (the long-standing TODO). Supply
   the grid from CSS so clearing the inline value lands back on grid. */
#modal-profile [data-pf-section="quick"] { display: grid; }
#modal-profile [data-pf-section="stats"] { display: grid; }

/* §6.6 tap targets: extend hit areas on small circular controls without
   changing their visual size */
#modal-profile .pf3-back, #modal-profile #pf3-eye-toggle,
#wv-x, #wd-x, #dp-back, .pm-sx, .nf-back, .lc-head__back,
#modal-auth .auth-v3-close, #modal-invite [data-close] {
  position: relative;
}
#modal-profile .pf3-back::after, #modal-profile #pf3-eye-toggle::after,
#wv-x::after, #wd-x::after, #dp-back::after, .pm-sx::after, .nf-back::after,
.lc-head__back::after, #modal-auth .auth-v3-close::after,
#modal-invite [data-close]::after {
  content: ""; position: absolute; inset: -10px;
}

/* Bottom-sheet drag grip is a mobile affordance only — hide on desktop (≥980). 2026-07-06 */
@media (min-width: 980px) {
  .pf3-grip { display: none; }
}

/* Log out button hover — deepen the red (2026-07-06) */
#profile-logout-btn:hover { background: rgba(224, 35, 75, .2) !important; border-color: rgba(224, 35, 75, .6) !important; }

/* ══════════ Account = full-page form on desktop (≥980); mobile <980 keeps the sheet ══════════
   Presentation-only. #modal-profile show/hide + handlers + data fill are untouched. 2026-07-06 */
@media (min-width: 980px) {
  /* container fills the viewport below the header; TRANSPARENT so body's ocean bg shows through */
  html body #modal-profile.modal-backdrop {
    position: fixed !important;
    inset: 64px 0 0 0 !important;
    background: transparent !important;
    padding: 0 !important;
  }
  html body #modal-profile.modal-backdrop.show {
    display: block !important;               /* not flex-center */
    z-index: 200 !important;
    background: transparent !important;      /* share the SAME ocean as home (body's fixed ocean.jpg + gradient) */
    overflow-y: auto !important;             /* scroll on the backdrop -> scrollbar hugs the viewport right edge */
    overflow-x: hidden !important;
    align-items: initial !important;
    justify-content: initial !important;
    animation: fzProfileFade .22s ease both; /* fade-in only, no slide */
  }
  /* opening Account hides only the home FOREGROUND (APK banner + page content); body's ocean
     bg stays (all the atmosphere — bubbles/beams/rocks/weed — lives in that fixed body background,
     there is no separate DOM layer). Page scroll locked so only the Account column scrolls. */
  body:has(#modal-profile.modal-backdrop.show) { overflow: hidden !important; }
  body:has(#modal-profile.modal-backdrop.show) #apk-banner,
  body:has(#modal-profile.modal-backdrop.show) .bs-container { visibility: hidden !important; }
  /* the panel is a plain max-600 column — no frame/glass; the BACKDROP scrolls, not this */
  html body #modal-profile .pf-v4 {
    max-width: 600px !important;
    width: 100% !important;
    margin: 0 auto !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 24px 4px !important;
    overflow: visible !important;
    transform: none !important;
    animation: none !important;
  }
  /* full-page chrome: hide the floating X + grip, show the return row (aligned to the 16px column) */
  html body #modal-profile .pf3-close { display: none !important; }
  html body #modal-profile .pf3-grip { display: none !important; }
  html body #modal-profile .pf3-return-row { display: flex !important; margin: 2px 12px 14px !important; }
}
@keyframes fzProfileFade { from { opacity: 0; } to { opacity: 1; } }

/* ══════════ Subpage = transparent card column on the ocean (2026-07-11, v3) ══════════
   Earlier rounds gave #pf3-subpage first a black board (fz-banks --fz-navy-deep) then a
   near-opaque ocean layer (0.94–0.98) — both read as an opaque column board. The design
   has NO board: each block is a glass card floating on the body's ocean, ocean visible
   between cards. So the subpage is TRANSPARENT (shares the same fixed body ocean as the
   rest). The subpage is position:absolute inset:0 over .pf-v4, whose siblings are the
   Account page (hero + content) — hide those while a subpage is open so only the ocean +
   the subpage's own cards show, no bleed-through. #modal-profile #pf3-subpage (0,2,0)
   beats fz-banks' #pf3-subpage (0,1,0) — same specificity + later load for the transparent. */
#modal-profile #pf3-subpage,
#modal-profile .pf3-subpage {
  background: transparent !important;
}
/* while a subpage is open, hide the Account page underneath (everything in .pf-v4 that
   is not the subpage itself) so the transparent subpage shows ocean, not the account. */
#modal-profile .pf-v4:has(> #pf3-subpage.open) > :not(#pf3-subpage) {
  visibility: hidden !important;
}

/* ══════════ Subpage shell → transparent card column (2026-07-11, Security redesign) ══════════
   Kill the dark title band (fz-banks teal gradient + frenzy96-fixes border) — the header is
   now a transparent inline row (34px back + display title) floating on the ocean; header +
   body form a 600px centred column. Scoped #modal-profile *, loaded after fz-banks/fixes so
   equal-specificity !important wins. */
#modal-profile .pf3-subpage-header {
  background: transparent !important;
  border-bottom: none !important;
  max-width: 600px !important; width: 100% !important; margin: 0 auto !important;
  padding: 22px 16px 6px !important; box-sizing: border-box !important;
}
#modal-profile #pf3-subpage-title {
  font-family: var(--fz-font-display, Oswald, Inter, sans-serif) !important;
  font-size: clamp(24px, 3.4vw, 32px) !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: var(--fz-track-caps, .04em) !important;
  color: var(--fz-white, #fff) !important;
}
#modal-profile .pf3-back, #modal-profile #pf3-back {
  width: 34px !important; height: 34px !important; min-height: 0 !important;
  border-radius: 50% !important; flex-shrink: 0 !important;
  border: 1px solid var(--fz-line-2, rgba(255,255,255,.14)) !important;
  background: rgba(7,8,13,.4) !important; color: var(--fz-text-2, #A6B0BC) !important;
}
#modal-profile #pf3-subpage-body {
  max-width: 600px !important; width: 100% !important; margin: 0 auto !important;
}