/* ═══════════════════════════════════════════════════════════════════════════
   account-moment.css — the account moment, ONE visual system (ADR-0021, A2-2).

   The allowance pill, the one card (wall / pill explanation / inline gate row)
   and the phone bar. Replaces, under html.acct-v2, four treatments of one ask:
   the 11.5px strip above the dossier, the #fdfcf9 wall card, the gold-gradient
   tab gate card and the 26px header chip. Tokens from _tokens.css; every rule
   is scoped to html.acct-v2 or to an .acct-* class, so the file is inert until
   the flag is on. Touch floor 44px (48px on the primary action); AA contrast:
   ink on gold 8.5:1, --ink-2 on the tinted paper 9.2:1, --ink-3 4.6:1.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the pill (map chrome) ──────────────────────────────────────────────── */
.acct-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 12px 0 10px; margin-right: 8px;
  border: 1px solid rgba(212, 168, 75, 0.45);
  border-radius: var(--radius-pill, 999px);
  background: rgba(212, 168, 75, 0.10);
  color: var(--ink-2, #374151);
  font: 500 12.5px/1 Inter, system-ui, sans-serif;
  white-space: nowrap; cursor: pointer;
  transition: background var(--duration-base, 180ms) var(--ease-out, ease-out),
              border-color var(--duration-base, 180ms) var(--ease-out, ease-out);
}
/* a 30px object with a 44px target */
.acct-pill::after { content: ""; position: absolute; inset: -7px -2px; }
.acct-pill:hover { background: rgba(212, 168, 75, 0.18); }
.acct-pill:focus-visible { outline: 2px solid var(--ink, #111111); outline-offset: 2px; }
.acct-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold, #d4a84b); flex: none; }
/* the last free one is signalled before it is spent */
.acct-pill[data-state="last"] {
  border-color: var(--gold-deep, #b8923f);
  background: rgba(212, 168, 75, 0.24);
  color: var(--ink, #111111); font-weight: 600;
}
.acct-pill[data-state="used"] {
  border-color: var(--border, #e5e3df);
  background: var(--surface-sunken, #ebeae8);
  color: var(--ink-3, #67707c);
}
.acct-pill[data-state="used"] .acct-pill__dot { background: var(--ink-3, #67707c); }

/* phone: the header has no room (logo · search · sign-in), so the pill floats
   under it, mounted on <body> (a glass ancestor would re-anchor position:fixed) */
.acct-pill--float {
  position: fixed; z-index: 4;
  top: calc(env(safe-area-inset-top, 0px) + 62px); left: 50%;
  transform: translateX(-50%);
  height: 32px; margin: 0;
  background:
    linear-gradient(rgba(212, 168, 75, 0.12), rgba(212, 168, 75, 0.12)),
    var(--bg-paper, #faf9f7);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
}
.acct-pill--float[data-state="used"] { background: var(--surface-sunken, #ebeae8); }
/* an open dossier owns the screen on a phone; its own bar carries the count */
html:has(#dev-main.detail-open) .acct-pill--float { display: none; }

/* ── the pill's explanation ─────────────────────────────────────────────── */
.acct-pop { position: fixed; z-index: 60; }
.acct-pop .acct-card {
  background:
    linear-gradient(180deg, rgba(212, 168, 75, 0.07), rgba(212, 168, 75, 0.02)),
    #fffefb;
  box-shadow: var(--shadow-lg, 0 4px 8px rgba(15, 23, 42, 0.06), 0 16px 36px rgba(15, 23, 42, 0.12));
}

/* ── the one card ───────────────────────────────────────────────────────── */
.acct-card {
  margin: 0;
  padding: 18px 18px 14px;
  border: 1px solid rgba(212, 168, 75, 0.38);
  border-radius: var(--radius-lg, 12px);
  background:
    linear-gradient(180deg, rgba(212, 168, 75, 0.07), rgba(212, 168, 75, 0.02)),
    var(--bg-paper, #faf9f7);
}
.acct-card__head {
  margin: 0 0 6px; outline: none;
  font: 650 17px/1.25 Outfit, Inter, sans-serif;
  color: var(--ink, #1f1f1f);
}
.acct-card__sub {
  margin: 0 0 14px; max-width: 58ch;
  font: 400 13.5px/1.5 Inter, system-ui, sans-serif;
  color: var(--ink-2, #374151);
}
.acct-card__cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px; padding: 0 16px;
  border: 1px solid var(--gold-deep, #b8923f); border-radius: 10px;
  background: var(--gold, #d4a84b); color: #111111;
  font: 600 15px/1.2 Inter, system-ui, sans-serif;
  cursor: pointer;
  transition: background 140ms var(--ease-out, ease-out), transform 140ms var(--ease-out, ease-out);
}
.acct-card__cta:hover { background: #e0b95f; }
.acct-card__cta:active { transform: scale(0.99); }
.acct-card__cta:focus-visible { outline: 2px solid #111111; outline-offset: 2px; }
.acct-card__cta-arrow { font: 500 16px/1 "JetBrains Mono", ui-monospace, monospace; }
.acct-card__note,
.acct-card__legal {
  margin: 10px 0 0; text-align: center;
  font: 400 12px/1.45 Inter, system-ui, sans-serif;
  color: var(--ink-3, #67707c);
}
.acct-card__legal { margin-top: 6px; font-size: 11.5px; }
.acct-card__legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.acct-card__legal a:hover { color: var(--ink-2, #374151); }

/* inline size: the gated row inside a tab — same card, one quiet line, a 44px action */
.acct-card--inline { margin: 14px 0 4px; padding: 14px 16px 16px; }
.acct-card--inline .acct-card__head {
  margin-bottom: 12px;
  font: 500 13.5px/1.5 Inter, system-ui, sans-serif;
  color: var(--ink-2, #374151);
}
.acct-card--inline .acct-card__cta {
  display: inline-flex; width: auto; min-height: 44px; padding: 0 18px;
  font-size: 14px;
}
.acct-card--pop { padding: 16px 16px 12px; }
.acct-card--pop .acct-card__head { font-size: 15.5px; }
.acct-card--pop .acct-card__sub { font-size: 13px; }

/* ── the wall: the dossier keeps its identity; the card is its body ─────── */
.acct-wall { padding: 0 0 32px; }
.acct-wall .pv5-card__identity { padding: 14px 16px 4px; }
.acct-wall .pv5-card__metrics-wrap { padding: 0 16px; }
.acct-wall__body { padding: 14px 16px 0; }

/* ── the phone bar (inside an open dossier) ─────────────────────────────── */
.acct-bar { display: none; }
@media (max-width: 540px) {
  html.acct-v2.mobile-v2 #dev-detail:has(.panel-v5) .acct-bar {
    display: flex; align-items: center; justify-content: center;
    position: fixed; left: 0; right: 0; z-index: 34;
    top: calc(env(safe-area-inset-top, 0px) + 57px);
    min-height: 34px; margin: 0; padding: 0 16px;
    border: 0; border-bottom: 1px solid rgba(212, 168, 75, 0.35); border-radius: 0;
    background:
      linear-gradient(rgba(212, 168, 75, 0.12), rgba(212, 168, 75, 0.12)),
      var(--bg-paper, #faf9f7);
    color: var(--ink-2, #374151);
    font: 500 12.5px/1 Inter, system-ui, sans-serif;
    cursor: pointer;
  }
  html.acct-v2.mobile-v2 #dev-detail:has(.panel-v5) .acct-bar[data-state="last"] { color: var(--ink, #111111); font-weight: 600; }
  html.acct-v2.mobile-v2 #dev-detail:has(.panel-v5) .acct-bar[data-state="used"] {
    background: var(--surface-sunken, #ebeae8); color: var(--ink-3, #67707c);
    border-bottom-color: var(--border, #e5e3df);
  }
  /* its height is reserved from the first frame, so the dossier never jumps */
  html.acct-v2.mobile-v2 #dev-detail:has(.acct-bar) .pv5-deck,
  html.acct-v2.mobile-v2 #dev-detail:has(.acct-bar) .acct-wall {
    padding-top: calc(env(safe-area-inset-top, 0px) + 92px);
  }
}
/* landscape phones: the band is re-fixed at a different height (mobile-v2.css R3) */
@media (max-height: 540px) and (orientation: landscape) {
  html.acct-v2.mobile-v2 #dev-detail:has(.panel-v5) .acct-bar {
    display: flex; align-items: center; justify-content: center;
    position: fixed; left: 0; right: 0; z-index: 34; top: 56px;
    min-height: 30px; margin: 0; padding: 0 16px; border: 0;
    border-bottom: 1px solid rgba(212, 168, 75, 0.35);
    background: linear-gradient(rgba(212, 168, 75, 0.12), rgba(212, 168, 75, 0.12)), var(--bg-paper, #faf9f7);
    color: var(--ink-2, #374151); font: 500 12px/1 Inter, system-ui, sans-serif;
  }
  html.acct-v2.mobile-v2 #dev-detail:has(.acct-bar) .pv5-deck { padding-top: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .acct-pill, .acct-card__cta { transition: none; }
}