/* ============================================================
   MooseTraxx — /account
   Page-scoped. Extends styles.css (every token, .btn, .input, .nav
   and .footer comes from there) and signup.css (the whole auth-card
   language: .su-card, .su-oauth, .su-fields, .su-err, .su-links,
   .su-icon, .su-body — this page reuses them rather than restating
   them). Loaded third so the few overrides below win.

   PORTED FROM the handoff bundle's account.css + account-comp.css,
   merged into one sheet. The bundle's account.css belongs to a much
   larger account dashboard — KPI tiles, trend charts, sparklines,
   meeting lists, settings rows, device lists — and this page uses
   about a dozen of its rules. Only those came across; shipping the
   other ~130 lines would be dead CSS (§4). Where the two bundle
   sheets disagreed (avatar 62px vs 56px, h1 clamp, head gap) the
   comp sheet was overriding the base one rule later, so the final
   value is written here once.

   Blue is the only fill on this page. The MooseScore ramp
   (--orange/--yellow/--green) is live-meeting data and appears
   nowhere here; neither do hour-pack or grace mechanics.
   ============================================================ */

/* ---------- view switching ---------- */
/* The page swaps between four top-level views (auth card, account stack, loading skeleton,
   load failure). `hidden` rather than a class so the hidden views are gone from the
   accessibility tree too, and scoped under .su at (0,2,0) so it outranks the display:grid
   on .ac-stack without needing !important. */
.su [hidden]{display:none}

/* .nav__signin is NOT defined here. It started in this file, when /account was the only page
   with a session to reflect; it now lives in styles.css because the marketing and legal pages
   render the same link to this page. One definition, and this page picks it up from the sheet
   it already loads first. */

/* ---------- profile header ---------- */
.acct-head{width:100%;max-width:640px;display:flex;align-items:center;gap:18px;padding:0 0 4px;flex-wrap:wrap}
.acct-av{width:56px;height:56px;border-radius:50%;flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--blue) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--blue) 26%,var(--border));color:var(--blue-ink);font-family:var(--font-heading);font-weight:700;font-size:19px;letter-spacing:.02em;user-select:none}
.acct-id{flex:1;min-width:220px}
.acct-id h1{font-family:var(--font-heading);font-size:clamp(26px,3vw,32px);font-weight:700;letter-spacing:-.028em}
.acct-id p{margin-top:6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px;color:var(--text-muted)}
.acct-sep{width:3px;height:3px;border-radius:50%;background:var(--text-faint);flex:none}

/* ---------- card ---------- */
/* The FIRST bare `.card` in this codebase — styles.css has .dl-card and install.css has
   .ins-card, both page-prefixed. Kept unprefixed because it is the name the handoff and the
   design system use, and account.css is loaded by exactly one document. */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.card__hd{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;border-bottom:1px solid var(--border-soft);flex-wrap:wrap}
.card__hd h2{font-family:var(--font-heading);font-size:18px;font-weight:700;letter-spacing:-.015em}
.card__bd{padding:22px 24px 24px}

/* ---------- plan card ---------- */
.plan-badge{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--blue)}
.plan-price{font-family:var(--font-heading);display:flex;align-items:baseline;gap:8px;font-size:34px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.plan-price small{font-size:15px;font-weight:600;color:var(--text-faint);letter-spacing:0}

/* Fill is --blue and nothing else. A ramp colour here would read as a MooseScore, which is
   live-meeting data and has no business on a billing surface. */
.usage-track{height:8px;border-radius:4px;background:var(--track);overflow:hidden;margin-top:12px}
.usage-fill{height:100%;border-radius:4px;background:var(--blue)}

/* ---------- signed-in stack ---------- */
.ac-stack{width:100%;max-width:640px;display:grid;gap:18px}
.ac-usage{margin-top:18px}
.ac-usage--first{margin-top:2px}
.ac-usage--first .ac-usage__t{font-size:15px;color:var(--text)}
.ac-usage__t{font-size:13.5px;font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums}
.ac-usage .usage-track{margin-top:9px}
.ac-cta{margin-top:22px}
.ac-cta .btn{width:100%;height:52px;font-size:15.5px}
.ac-billing{margin-top:22px}
.ac-billing .btn{height:48px;padding-inline:24px;font-size:14.5px}

/* The busy state, made visible. setBusy disables the control and swaps its label, but the only
   [disabled] rule in the codebase is scoped to .su-card — the SIGN-IN card — and the signed-in
   stack is not inside it. So both buttons here went inert at full opacity, still under a
   pointer cursor: the label was the ONLY thing saying the press had landed. Deliberately the
   same treatment as that rule rather than a second look for the same state (§5), and matched
   to the pending-label convention it belongs to. Fires on [disabled] alone, so nothing at rest
   changes appearance. */
.ac-stack button[disabled],.ac-stack .btn[disabled]{opacity:.6;cursor:default;pointer-events:none}
.ac-quiet{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--text-faint);text-wrap:pretty}
/* Failure under "Manage billing" — the portal could not be minted. Sits in the card rather
   than the top alert because it belongs to that one button, and an empty slot must not
   reserve a line. */
.ac-inline-err{margin-top:10px;font-size:13px;line-height:1.5;color:var(--red);text-wrap:pretty}
.ac-inline-err:empty{display:none}

/* ---------- verify email card ---------- */
/* Almost nothing, on purpose. The card, its head and its full-width CTA are the plan card's
   rules above; the code boxes, the alert boxes and the resend link are signup.css's .su-code,
   .su-err/.su-ok and .su-links, which this page already loads for the sign-in card. What is
   here is only the three things those cannot do from where they sit.

   One: the instruction line, at .ac-dl__t's size rather than a new one, with the line-height a
   real sentence needs. Two: the red field tint, which signup.css scopes to `.su-card.is-err`
   — the SIGN-IN card — and this card is not one, the same gap .ac-stack button[disabled]
   above exists to close. Three: .su-ok carries a 22px top margin for sitting under a heading,
   which is wrong for a standalone row in an 18px grid. */
.ac-verify__d{font-size:14.5px;line-height:1.6;color:var(--text-muted);text-wrap:pretty}
.ac-verify.is-err .su-code input{border-color:color-mix(in srgb,var(--red) 55%,var(--border))}
.ac-verified{margin-top:0}

/* ---------- download card ---------- */
.ac-dl{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.ac-dl__t{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.ac-dl__d{font-size:13px;color:var(--text-muted);margin-top:4px}
.ac-dl__links{display:flex;align-items:center;gap:16px;flex:none}
.ac-dl__links a{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--blue-on-surface)}
.ac-dl__links a:hover{text-decoration:underline}
.ac-dl__links img{width:15px;height:15px;object-fit:contain}
.ac-dl__sep{width:3px;height:3px;border-radius:50%;background:var(--text-faint);flex:none}

/* ---------- sign out ---------- */
.ac-signout{display:flex;justify-content:center;padding:6px 0 2px}
.ac-signout button{font-size:13.5px;font-weight:600;color:var(--text-muted);height:38px;padding:0 16px;border-radius:10px;transition:color .18s,background .18s}
.ac-signout button:hover{color:var(--text);background:var(--bg-2)}

/* ---------- loading skeleton ---------- */
/* Same geometry as the loaded state — avatar circle, name and meta lines, card with badge,
   price, bar, CTA — so nothing jumps when the fetch resolves. */
.sk{border-radius:8px;background:linear-gradient(90deg,var(--track),color-mix(in srgb,var(--track) 45%,transparent),var(--track));background-size:220% 100%;animation:skshimmer 1.5s linear infinite}
@keyframes skshimmer{to{background-position:-220% 0}}
.sk--badge{width:96px;height:26px;border-radius:999px}
.sk--h{width:180px;height:20px}
.sk--price{width:210px;height:34px}
.sk--line{height:13px}
.sk--bar{height:8px;border-radius:4px}
.sk--btn{height:52px;border-radius:12px}
.ac-skel{display:grid;gap:14px}
.ac-skel__head{display:flex;align-items:center;gap:18px;padding:2px 0 6px}
.ac-skel__av{width:56px;height:56px;border-radius:50%}
.ac-skel__lines{flex:1;display:grid;gap:10px;max-width:280px}
.ac-skel__hd{width:132px}
.ac-skel__meta{width:76%}
.ac-skel__sub{width:64%}
.ac-skel__cta{margin-top:8px}

/* The shimmer is decoration, not information. Anyone who has asked for less motion gets the
   track colour and no animation — the skeleton still holds the layout. */
@media (prefers-reduced-motion:reduce){
  .sk{animation:none;background:var(--track)}
}

/* ---------- load failure ---------- */
.ac-fail{text-align:center;padding:12px 4px 6px}
.ac-fail p{margin-top:14px;font-size:15px;line-height:1.6;color:var(--text-muted);max-width:420px;margin-inline:auto;text-wrap:pretty}
.ac-fail a{font-weight:600}

@media (max-width:560px){
  .ac-dl{align-items:flex-start;flex-direction:column;gap:14px}
  .ac-cta .btn{font-size:14.5px}
}