/* Billing page shell (#3466, Figma 1:14478 / 23:37567 / 23:36730 / 23:37153):
 * the per-tab header and the Settings / Usage / History / Payments tab row.
 * The tabs are the DS tabs (ds/surfaces.css .ui-tab); the tab contents are
 * #3467-#3475. Tokens only; dark mode comes from tokens.css. */

/* Header 1:14697: h1 20/28 SemiBold, the subtitle 3px under it, 24px to the tabs. */
.billing-header { margin-bottom: var(--space-6); }
.billing-header h1 { font: var(--type-h1); letter-spacing: 0; color: var(--fg-strong); }
.billing-header .subtitle { margin: 3px 0 0; font: 700 14px/20px var(--font-sans); color: var(--fg-muted); }

/* Tab row 1:14702: a 1px line under the whole row, 24px to the content. */
.billing-tabs { margin: 0 0 var(--space-6); border-bottom: 1px solid var(--border-strong); }
.billing-tabs .ui-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--radius-sm); }


/* ==== Settings tab: balance card (#3467, Figma 1:14717 "Pay as you go Card",
 * off state 1:15035, "$100 chosen" 1:16142). Owned by #3467; other Billing
 * issues add their own blocks. Runway (#3509) and the refill trigger marker
 * are not built. The strip keeps its empty 28px band, as 1:15035 draws it,
 * until the org has a last auto-refill (#3510, 1:14752). Grey labels Figma draws in #9ca3af (2.5:1 on white) use
 * --fg-muted for AA. ==== */
/* The row it shares with the auto-refill card: 724 + 400 at 1140 wide. */
.billing-settings-cards { grid-template-columns: minmax(0, 724fr) minmax(0, 400fr); align-items: start; }
@media (max-width: 1240px) { .billing-settings-cards { grid-template-columns: minmax(0, 1fr); } }

.card.billing-balance {
  display: flex; flex-direction: column; padding: var(--space-5);
  border: 1px solid var(--divider); border-radius: var(--radius-2xl); box-shadow: var(--shadow-card);
}
.billing-balance-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.billing-balance-head h2 { margin: 0; font: 900 11px/16.5px var(--font-sans); letter-spacing: 1.1px; color: var(--fg-strong); }
.billing-balance-brand {
  display: inline-flex; align-items: flex-start; gap: 2px;
  font: italic 700 12px/18px var(--font-sans); letter-spacing: -0.6px; text-transform: uppercase; color: var(--fg-strong);
}
.billing-balance-brand img { margin-top: 5px; }
/* The designer's "icon only" mark on a dark card (#3745). */
.billing-mark-on-dark { display: none; }
:root[data-theme="dark"] .billing-mark-on-light { display: none; }
:root[data-theme="dark"] .billing-mark-on-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .billing-mark-on-light { display: none; }
  :root:not([data-theme="light"]) .billing-mark-on-dark { display: block; }
}
.billing-balance-figures { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-3); }
.billing-balance-figures p { margin: 0; }
.billing-balance-eyebrow { margin: 0; font: 700 9px/14px var(--font-sans); letter-spacing: -0.27px; text-transform: uppercase; color: var(--fg-muted); }
.billing-balance-amount { font: var(--type-figure); color: var(--fg); }
/* Reserved for reviews in progress (#3875): a caption under the amount. */
.billing-balance-held { font: var(--type-caption); color: var(--fg-muted); }

/* Usage this month against the monthly limit: an 8px track in a 48px band
   (the marker's room in 1:14478), the labels 34px down. */
.billing-balance-usage { position: relative; height: 48px; margin-top: var(--space-3); }
.billing-balance-usage .ui-progress { height: 8px; margin: 0; }
.billing-balance-usage .ui-progress > span { transition: width 600ms var(--ease-out, ease-out); }
.billing-balance-usage-foot {
  position: absolute; top: 34px; left: 0; right: 0; display: flex; justify-content: space-between; gap: var(--space-3);
  font: var(--type-micro); text-transform: uppercase; color: var(--fg-muted);
}
@media (prefers-reduced-motion: reduce) { .billing-balance-usage .ui-progress > span { transition: none; } }
:root[data-motion="reduce"] .billing-balance-usage .ui-progress > span { transition: none; }

.billing-balance-strip { height: 28px; margin-top: 10px; }
/* 1:14752: a 10/6px band, 1px --divider border, radius 8, 11/16 text; the
   label in Bold (#4a5463 drawn: --fg-muted), the value SemiBold in green. */
.billing-balance-strip.is-filled {
  box-sizing: border-box; height: auto; min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 6px 10px; background: var(--bg); border: 1px solid var(--divider); border-radius: 8px; font: 700 11px/16px var(--font-sans);
}
.billing-balance-strip-label { color: var(--fg-muted); white-space: nowrap; }
.billing-balance-strip-value { font-weight: 600; color: var(--success-fg); text-align: right; }
.billing-balance > .billing-balance-eyebrow { margin-top: var(--space-2); font: var(--type-eyebrow); letter-spacing: var(--type-eyebrow-tracking); }
.billing-balance-topups { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.billing-balance-presets { display: flex; flex: 1; gap: var(--space-2); min-width: 0; }
.billing-balance-presets .btn { flex: 1 1 0; min-width: 0; --btn-px: var(--space-2); --btn-glyph: 16px; }
.billing-balance-refill { flex: 0 0 200px; --btn-glyph: 16px; }
.billing-balance [data-topups-off] { margin: var(--space-2) 0 0; }
@media (max-width: 640px) {
  .billing-balance-topups { flex-wrap: wrap; }
  .billing-balance-presets { flex: 1 1 100%; flex-wrap: wrap; }
  .billing-balance-presets .btn { min-width: 64px; }
  .billing-balance-refill { flex: 1 1 100%; }
}
/* ==== end balance card (#3467) ==== */

/* ==== Quick top-up popup (#3469, Figma 1:17255 "Top-up $100 modal") on the
 * #3442 modal. Owned by #3469. Grey text Figma draws in #9ca3af/#6b7280/#52625b
 * uses --fg-muted, and green figures (#10b981/#059669, below AA at these
 * sizes) use --live-text. The summary's #f8fbfa / #d6e8df are mixed from
 * --brand so dark mode follows. Five tiles: the owner kept the $10 preset. ==== */
#topup-dialog .ui-modal-eyebrow { letter-spacing: 0.6px; }
#topup-dialog .ui-modal-title { letter-spacing: -0.4px; }
#topup-dialog .ui-modal-step { letter-spacing: 0.2px; }
#topup-dialog .ui-modal-body { gap: var(--space-5); background: var(--surface); }
#topup-dialog p { margin: 0; }

/* Amount 1:17264: the "// select amount" label 8px over the tiles. */
.topup-amounts { display: grid; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.topup-label { padding: 0; margin-bottom: var(--space-2); font: 600 10px/13px var(--font-mono); letter-spacing: 0.8px; text-transform: uppercase; color: var(--fg-muted); }
.topup-tiles { display: flex; gap: var(--space-2); }
.topup-tile { position: relative; flex: 1 1 0; min-width: 0; }
.topup-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.topup-tile-face {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: 61px; padding: 0 var(--space-1); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface);
  font: 700 13px/17px var(--font-mono); color: var(--fg-muted); cursor: pointer;
  transition: background-color var(--motion-fast, 120ms) var(--ease-out, ease-out), border-color var(--motion-fast, 120ms) var(--ease-out, ease-out);
}
.topup-tile:hover .topup-tile-face { border-color: var(--hover-border); }
.topup-tile-ring { display: none; place-items: center; width: 14px; height: 14px; border: 1px solid var(--brand); border-radius: 50%; }
.topup-tile-ring::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.topup-tile input:checked + .topup-tile-face { background: var(--select-tint); border-color: var(--brand); color: var(--live-text); }
.topup-tile input:checked + .topup-tile-face .topup-tile-ring { display: grid; }
.topup-tile input:focus-visible + .topup-tile-face { outline: 2px solid var(--focus); outline-offset: 2px; }
.topup-tile input:disabled + .topup-tile-face { background: var(--surface-sunken); border-color: var(--border-strong); color: var(--fg-muted); text-decoration: line-through; cursor: not-allowed; }
.topup-cap, .topup-hint { font: var(--type-body-sm); color: var(--fg-muted); }
.topup-custom { display: grid; gap: var(--space-1); }
.topup-custom[hidden] { display: none; }

/* Balance preview 1:17281. */
.topup-preview {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg);
}
.topup-preview-after { text-align: right; }
.topup-preview-label { font: 400 10px/13px var(--font-mono); color: var(--fg-muted); }
.topup-preview-value { font: 700 15px/18px var(--font-sans); color: var(--fg-strong); font-variant-numeric: tabular-nums; }
.topup-preview-after .topup-preview-value { color: var(--live-text); }

/* Summary 1:17288. */
.topup-summary {
  --topup-summary-line: color-mix(in srgb, var(--brand) 14%, var(--border-strong));
  display: grid; gap: var(--space-2); padding: 12px 16px;
  border: 1px solid var(--topup-summary-line); border-radius: var(--radius); background: color-mix(in srgb, var(--brand) 3%, var(--surface));
}
.topup-summary-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font: 400 11px/14px var(--font-sans); color: var(--fg-muted); }
.topup-summary-row > span:last-child { font: 600 11px/14px var(--font-mono); color: var(--fg-strong); font-variant-numeric: tabular-nums; }
.topup-summary-total > span:first-child { font: 600 13px/16px var(--font-sans); color: var(--fg-strong); }
.topup-summary-total > span:last-child { font: 700 15px/20px var(--font-mono); color: var(--live-text); }
.topup-summary-rule { width: 100%; height: 1px; margin: 0; border: 0; background: var(--topup-summary-line); }
.topup-summary .topup-summary-method { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-secondary); }
.topup-summary-method svg { width: 16px; height: 16px; flex: none; }

/* Note 1:17301 (Inter 11/1.6), then the tax and invoice note kept from today. */
.topup-note, .topup-tax { font: 400 11px/1.6 var(--font-sans); color: var(--fg-muted); }
#topup-dialog .topup-tax { margin-top: calc(var(--space-1) - var(--space-5)); }
.topup-individual { font: var(--type-body-sm); }

/* Controls 1:17302: Cancel 125, the primary takes the rest. */
#topup-dialog .ui-modal-foot { align-items: flex-start; }
#topup-dialog .ui-modal-foot > .btn-primary { flex: 1 1 0; min-width: 0; border-radius: 10px; --btn-px: var(--space-3); }
#topup-dialog .ui-modal-foot > .btn-secondary { flex: none; }

@media (max-width: 480px) {
  .topup-tiles { flex-wrap: wrap; }
  .topup-tile { flex: 1 1 calc(33% - var(--space-2)); }
}
@media (prefers-reduced-motion: reduce) { .topup-tile-face { transition: none; } }
:root[data-motion="reduce"] .topup-tile-face { transition: none; }
/* ==== end quick top-up popup (#3469) ==== */

/* ==== Funds added popup (#3470, Figma 1:14432 on 1:13874) on the #3442
 * modal. Owned by #3470. Figma's greys (#8b949e, #9ca3af) and the mint figure
 * (#34d399) are below AA on white at these sizes: --fg-muted and --live-text
 * stand in. Figma's #1c2b3a is --fg-strong, #fafafa --surface-raised,
 * #e5e7eb/#e6edf3 --border-strong. ==== */
.funds-added {
  --fa-ease: var(--ease-out-expo);
  --fa-wash: color-mix(in srgb, var(--brand) 6%, var(--celebrate-fill));
  border-radius: var(--radius-2xl); background: var(--surface);
  box-shadow: 0 20px 40px -8px color-mix(in srgb, var(--ink) 19%, transparent);
}
.funds-added p, .funds-added h2, .funds-added dl, .funds-added dd { margin: 0; }
/* Message 1:14433: 32/28/24, 16 apart, centered. */
.funds-added-message { display: grid; justify-items: center; gap: var(--space-4); padding: 32px 28px var(--space-6); }
.funds-added-art { display: block; overflow: visible; }
.funds-added-heading { display: grid; gap: 6px; text-align: center; }
.funds-added-heading h2 { font: 700 20px/28px var(--font-mono); letter-spacing: -0.4px; color: var(--fg-strong); }
.funds-added-heading p { font: 400 11px/18px var(--font-mono); color: var(--fg-muted); }
/* Receipt 1:14459: a 10-radius box, its status bar and the amounts. */
.funds-added-receipt { padding: 0 var(--space-6) var(--space-6); }
.funds-added-box { overflow: hidden; border: 1px solid var(--border-strong); border-radius: 10px; }
.funds-added-status {
  display: flex; align-items: center; gap: 7px; padding: 10px 14px;
  border-bottom: 1px solid var(--border-strong); background: var(--surface-raised);
  font: 600 9px/12px var(--font-mono); color: var(--fg-strong);
}
.funds-added-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--brand); }
.funds-added-amounts { display: grid; gap: 14px; padding: var(--space-4); background: var(--surface); }
.funds-added-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); white-space: nowrap; }
.funds-added-row + .funds-added-row { padding-top: 14px; border-top: 1px solid var(--border-strong); }
.funds-added-row dt { font: 400 11px/14px var(--font-mono); color: var(--fg-muted); }
.funds-added-plus { font: 600 15px/20px var(--font-mono); color: var(--live-text); font-variant-numeric: tabular-nums; }
.funds-added-balance { font: 700 20px/26px var(--font-mono); color: var(--fg-strong); font-variant-numeric: tabular-nums; }
/* Action 1:14472: Primary L, full width, radius 10; Figma's arrow is mint. */
.funds-added-action { padding: var(--space-4) 28px var(--space-6); border-top: 1px solid var(--border-strong); background: var(--surface-raised); }
.funds-added-action .btn { width: 100%; border-radius: 10px; }
/* Figma's arrow is 15 x 9 (its export is another glyph): the DS arrow-left at 20. */
.funds-added-action .btn > svg { width: 20px; height: 20px; stroke-width: 2; color: var(--brand-mint); }

/* The wallet 1:14434: Figma's layers, colors from ds/motion.css's celebration. */
.funds-added-art * { transform-box: fill-box; transform-origin: center; }
.fa-halo { fill: var(--celebrate-halo); }
.fa-wallet-back { fill: var(--celebrate-fill); stroke: var(--celebrate-soft); stroke-width: 2; }
.fa-wallet-body { fill: var(--fa-wash); stroke: var(--brand); stroke-width: 2; }
.fa-clasp { fill: var(--celebrate-fill); stroke: var(--brand); stroke-width: 2; }
.fa-stud { fill: var(--brand); }
.fa-note-face { fill: var(--celebrate-halo); stroke: var(--brand); stroke-width: 2; }
.fa-note-inset { fill: none; stroke: var(--celebrate-ring); stroke-width: 1.5; }
.fa-note-seal { fill: none; stroke: var(--brand); stroke-width: 1.6; }
.fa-note-settle .fa-note-face { fill: var(--celebrate-fill); stroke: var(--celebrate-soft); }
.fa-note-settle .fa-note-inset { stroke-width: 1.4; }
.fa-note-settle .fa-note-seal { stroke: var(--celebrate-soft); }
.fa-note-enter { transform: rotate(12deg); }
.fa-note-settle { transform: rotate(-9deg); }
/* Figma's #059669 in both themes (--brand-text turns mint in dark, under the white check). */
.fa-badge-disc { fill: color-mix(in srgb, var(--brand) 80%, var(--ink)); stroke: color-mix(in srgb, var(--brand) 16%, var(--celebrate-fill)); stroke-width: 2; }
.fa-check { fill: none; stroke: var(--btn-on-fill); stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; }
.fa-spark { fill: none; stroke-width: 1.6; stroke-linecap: round; opacity: .6; }
.fa-spark-1, .fa-spark-2 { stroke: var(--brand); }
.fa-spark-3, .fa-spark-4, .fa-trail { stroke: var(--celebrate-ring); }
.fa-dot { fill: var(--celebrate-soft); }
.fa-trail { fill: none; stroke-width: 1.6; stroke-linecap: round; opacity: 0; }
/* Auto-refill's bar and marker (#3464, 21:32711 / 21:32719): static. */
.fa-bar { fill: color-mix(in srgb, var(--brand) 40%, var(--celebrate-fill)); stroke: color-mix(in srgb, var(--brand) 28%, var(--celebrate-fill)); }
.fa-bar-fill { fill: var(--brand-mint); }
.fa-marker { fill: var(--celebrate-fill); stroke: color-mix(in srgb, var(--brand) 18%, var(--celebrate-fill)); stroke-width: .5; }
.fa-star { fill: none; stroke: var(--brand); stroke-width: .9; stroke-linejoin: round; }

/* Motion (get_motion_context, cohort 1:13874): Figma's 2.2 s timeline, played
 * once; each element's static style above is its last frame, which is also
 * the reduced-motion frame. Eased segments use --ease-out-expo; holds are
 * flat keyframes. Offsets are % of 2.2 s, exact from Figma. */
.funds-added-art :is(.fa-note, .fa-badge, .fa-spark, .fa-trail) { animation-duration: var(--motion-celebrate); animation-fill-mode: both; animation-timing-function: linear; }
.fa-trail { animation-name: fa-trail; }
.fa-note-enter { animation-name: fa-note-enter, fa-note-enter-in; }
.fa-note-settle { animation-name: fa-note-settle, fa-note-settle-in; }
.fa-badge { animation-name: fa-badge, fa-badge-in; }
.fa-spark { animation-name: fa-spark; }
/* Sparkles 1:14451-3 run 1:14450's curve 2.727% (60 ms) apart. */
.fa-spark-2 { animation-delay: 60ms; }
.fa-spark-3 { animation-delay: 120ms; }
.fa-spark-4 { animation-delay: 180ms; }
@keyframes fa-trail { 0% { opacity: 0; animation-timing-function: var(--fa-ease); } 6.364% { opacity: .45; animation-timing-function: var(--fa-ease); } 24.091%, 100% { opacity: 0; } }
/* Rotations are the +12 / -9 deg base plus Figma's delta. */
@keyframes fa-note-enter { 0%, 2.727% { transform: translateY(-15px) rotate(17deg); animation-timing-function: var(--fa-ease); } 21.818% { transform: translateY(1px) rotate(11.3deg); animation-timing-function: var(--fa-ease); } 30%, 100% { transform: rotate(12deg); } }
@keyframes fa-note-enter-in { 0%, 2.727% { opacity: 0; animation-timing-function: var(--fa-ease); } 10%, 100% { opacity: 1; } }
@keyframes fa-note-settle { 0%, 10.909% { transform: translateY(-17px) rotate(-13deg); animation-timing-function: var(--fa-ease); } 31.818% { transform: translateY(1.2px) rotate(-8.3deg); animation-timing-function: var(--fa-ease); } 40.909%, 100% { transform: rotate(-9deg); } }
@keyframes fa-note-settle-in { 0%, 10.909% { opacity: 0; animation-timing-function: var(--fa-ease); } 18.636%, 100% { opacity: 1; } }
@keyframes fa-badge { 0%, 39.091% { transform: scale(.84); animation-timing-function: var(--fa-ease); } 51.364% { transform: scale(1.035); animation-timing-function: var(--fa-ease); } 59.545%, 100% { transform: scale(1); } }
@keyframes fa-badge-in { 0%, 39.091% { opacity: 0; animation-timing-function: var(--fa-ease); } 46.818%, 100% { opacity: 1; } }
@keyframes fa-spark { 0%, 46.364% { opacity: 0; animation-timing-function: var(--fa-ease); } 56.364% { opacity: .85; animation-timing-function: var(--fa-ease); } 68.182% { opacity: .5; animation-timing-function: var(--fa-ease); } 75.909%, 100% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .funds-added-art * { animation: none !important; } }
:root[data-motion="reduce"] .funds-added-art * { animation: none !important; }
/* ==== end funds added popup (#3470) ==== */

/* ==== Settings tab: runway, Usage comparison, Recent activity (#3471, #3509;
 * Figma 1:14737, 1:14851, 1:14911). Grey labels Figma draws in #94a3b8 /
 * #9ca3af (below AA on white) use --fg-muted; the 14px runway, the accent 9px foot and the
 * #15835e link use --success-fg / --live-text (AA). ==== */
/* Balance figures row 1:14733: funds left, runway right, aligned to the bottom. */
.billing-balance-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.billing-balance-row .billing-balance-figures { margin-top: 0; }
.billing-balance-runway { align-items: flex-end; text-align: right; }
.billing-balance-runway[hidden], .billing-activity-row[hidden] { display: none; }
.billing-balance-runway-value { font: 700 14px/20px var(--font-sans); color: var(--live-text); }
.billing-balance-runway-value.is-warning { color: var(--warning-fg); }
.billing-balance-runway-value.is-danger { color: var(--danger-fg); }
.billing-balance-runway-value.is-muted { color: var(--fg-muted); }

/* The row under the balance cards: 721 + 403 at 1140 wide, 16px apart. */
.billing-usage-cards { grid-template-columns: minmax(0, 721fr) minmax(0, 403fr); align-items: stretch; }
@media (max-width: 1240px) { .billing-usage-cards { grid-template-columns: minmax(0, 1fr); } }
.card.billing-cmp, .card.billing-activity, .card.billing-ic {
  display: flex; flex-direction: column; min-width: 0; padding: var(--space-6);
  border: 1px solid var(--border-strong); border-radius: var(--radius-xl); box-shadow: var(--shadow-card);
}
.billing-card-title { margin: 0; font: 900 11px/16.5px var(--font-sans); letter-spacing: 1.1px; text-transform: uppercase; color: var(--fg-strong); }

/* Usage comparison 1:14851: padding 24, gap 20. */
.billing-cmp { gap: 20px; }
.billing-cmp-body { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.billing-cmp-months { display: flex; align-items: stretch; }
.billing-cmp-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.billing-cmp-col-now { padding-left: var(--space-6); border-left: 1px solid var(--divider); }
.billing-cmp-col-last { padding-right: var(--space-6); }
.billing-cmp-label { margin: 0; font: 900 9px/13.5px var(--font-sans); letter-spacing: 1px; text-transform: uppercase; color: var(--fg-muted); }
.billing-cmp-amount { display: flex; align-items: baseline; gap: 5px; margin: 0; white-space: nowrap; }
.billing-cmp-figure { font: 900 22px/28px var(--font-sans); letter-spacing: -0.5px; color: var(--fg); }
.billing-cmp-col-now .billing-cmp-figure { color: var(--brand-text); }
.billing-cmp-of { font: 700 10px var(--font-sans); color: var(--fg-muted); }
.billing-cmp-col .ui-progress { height: 4px; margin: 0; }
.billing-cmp-col-last .ui-progress:not(.ui-progress-near):not(.ui-progress-over) > span { background: var(--fg-subtle); }
.billing-cmp-foot { display: flex; justify-content: space-between; gap: var(--space-2); margin: 0; font: 700 9px/11px var(--font-sans); color: var(--fg-muted); }
.billing-cmp-col-now .billing-cmp-foot > :first-child { color: var(--success-fg); }

/* Weekly chart 1:14876: 72px; per week two 14px bars 3px apart, radius 3, label 3px under. */
.billing-cmp-chart { display: flex; flex-direction: column; gap: var(--space-2); }
.billing-chart { display: flex; align-items: flex-end; gap: 6px; height: 72px; }
.billing-week { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; height: 72px; }
.billing-week-bars { display: flex; align-items: flex-end; gap: 3px; height: 60px; }
.billing-bar { display: block; width: 14px; min-height: 2px; border-radius: 3px; transform-origin: bottom;
  animation: billing-bar-grow 400ms var(--ease-out, ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
.billing-bar-last { background: var(--border-control); }
.billing-bar-now { background: linear-gradient(90deg, var(--progress-from), var(--progress-to)); }
.billing-bar-now.is-partial { background: var(--brand-text); }   /* this week: Figma's pale #d1fae5 is under 3:1 on the card */
.billing-week-label { font: 600 8px/10px var(--font-sans); color: var(--fg-muted); }
.billing-legend { flex: 0 0 120px; display: flex; flex-direction: column; justify-content: center; gap: 5px; height: 72px; font: 600 9px/11px var(--font-sans); color: var(--fg-muted); }
.billing-legend span { display: inline-flex; align-items: center; gap: 6px; }
.billing-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
@keyframes billing-bar-grow { from { transform: scaleY(0); } }
.billing-cmp-col .ui-progress > span { animation: billing-fill-grow 400ms var(--ease-out, ease-out) both; transform-origin: left; }
@keyframes billing-fill-grow { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .billing-bar, .billing-cmp-col .ui-progress > span { animation: none; } }
:root[data-motion="reduce"] .billing-bar, :root[data-motion="reduce"] .billing-cmp-col .ui-progress > span { animation: none; }

/* "Manage limits" 1:14906: Bold 11/16 with a chevron. */
.billing-cmp-link { display: inline-flex; align-items: center; gap: var(--space-1); align-self: flex-start; margin-top: auto; font: 700 11px/16px var(--font-sans); color: var(--live-text); text-decoration: none; }
.billing-cmp-link:hover { text-decoration: underline; }

/* Issue cards (#3875, not in Figma 1:14478): Usage comparison's card language, an eyebrow title, one line, the daily row, a link. */
.billing-ic { gap: var(--space-3); } .billing-ic > p { margin: 0; } .billing-ic .billing-cmp-link { margin-top: var(--space-1); }
.billing-ic-summary { font: var(--type-body); color: var(--fg-muted); } .billing-ic-note { font: var(--type-body-sm); }
.billing-ic-daily { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: 10px 12px; background: var(--bg); border: 1px solid var(--divider); border-radius: 8px; }
.billing-ic-daily-state { margin: 0; font: 600 13px/16px var(--font-sans); color: var(--fg-strong); }
.billing-ic-daily-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* Recent activity 1:14911: gap 24; rows py 16 gap 12; the list scrolls (ds .ui-scroll). */
.billing-activity { position: relative; gap: var(--space-6); --scroll-fade-height: 69px; }
.billing-activity-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.billing-activity-all { display: inline-flex; align-items: center; gap: var(--space-3); font: 700 11px/16.5px var(--font-sans); color: var(--fg-muted); text-decoration: none; }
.billing-activity-all:hover { color: var(--fg); }
.billing-activity-chev { display: inline-grid; place-items: center; box-sizing: border-box; width: 20px; height: 20px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-sunken); }
.billing-activity-list { list-style: none; margin: 0; padding: 0; max-height: 247px; }
.billing-activity-list:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.billing-activity-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--divider); }
.billing-activity-row > div { min-width: 0; }
.billing-activity-dot { flex: none; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--border-control); }
.billing-activity-what { margin: 0; font: 700 13px/19.5px var(--font-sans); color: var(--fg-strong); overflow-wrap: anywhere; }
.billing-activity-meta { margin: 0; font: 500 11px/16.5px var(--font-sans); color: var(--fg-muted); }
/* The hint overlaps the list's faded last row, as 1:14951 does. */
.billing-activity .ui-scroll-hint { position: absolute; left: var(--space-6); right: var(--space-6); bottom: 13px; pointer-events: none; background: color-mix(in srgb, var(--surface) 50%, transparent); }
/* ==== end runway, Usage comparison, Recent activity (#3471) ==== */

/* ==== Payments tab (#3475, #3504; Figma 23:37387, 23:37416) ====
 * "Payment details" (the Payment method and Billing information cards) and
 * "Invoices and receipts" (payments.ts; the Update card dialog is
 * payment-card.ts). Cards are .ui-card at Figma's 12px radius. */
.pay-section + .pay-section { margin-top: var(--space-6); }
.pay-section-title { margin: 0 0 var(--space-4); font: var(--type-title-sm); color: var(--fg-strong); }
.pay-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.pay-card { display: flex; flex-direction: column; gap: var(--space-5); border-color: var(--border-strong); border-radius: var(--radius-xl); }
.pay-card-head { display: flex; align-items: center; justify-content: space-between; min-height: 28px; }
.pay-card-title { margin: 0; font: 600 13px var(--font-sans); color: var(--fg-strong); }
.pay-method { display: flex; align-items: center; gap: var(--space-4); }
/* The brand tile keeps a white face in dark mode too (issue spec). */
.pay-brand {
  display: inline-grid; place-items: center; flex: none; box-sizing: border-box; width: 60px; height: 40px;
  border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--card-tile-ink);
  background: linear-gradient(135deg, var(--card-tile-face) 40%, color-mix(in srgb, var(--card-tile-face) 94%, black));
}
.pay-brand-visa { font: italic 800 13px var(--font-sans); color: var(--card-visa); }
.pay-brand-wallet { padding: 0 4px; font: 700 10px/12px var(--font-sans); text-align: center; }
.pay-brand.pay-brand-is-link { background: var(--card-link-face); border-color: transparent; }
.pay-brand-link { font: 800 15px/1 var(--font-sans); letter-spacing: -0.4px; color: var(--card-link-ink); }
.pay-method-info { min-width: 0; }
.pay-brand-sk { flex: none; width: 60px; height: 40px; border-radius: var(--radius-md); }
.pay-method-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.pay-method-name { font: 500 12px var(--font-mono); color: var(--fg-strong); }
/* Figma's Default badge (23:37403): 2px 8px, Plex Mono Bold 10, no border. Its #059669 on #f0fdf4 is 3.6:1, so the text is --success-fg (AA). */
.pay-method-line .badge { min-height: 0; padding: 2px 8px; border: 0; border-radius: var(--radius-sm); font: var(--type-badge-mono); line-height: 13px; background: var(--select-tint); color: var(--success-fg); }
.pay-method-note { margin: 0; font: var(--type-body-sm); }
/* Expiry 23:37405 and the billing contact 23:37413: 12/18, 6px apart. */
.pay-method-expiry { margin: 6px 0 0; font: 400 12px/18px var(--font-sans); color: var(--fg-muted); }
.pay-method-expiry.is-expired { color: var(--danger-fg); }
.pay-billing { display: flex; flex-direction: column; gap: 6px; }
.pay-billing p { margin: 0; font: 400 12px/18px var(--font-sans); color: var(--fg-muted); overflow-wrap: anywhere; }
.pay-billing .pay-billing-name { font-weight: 500; color: var(--fg-strong); }
/* Update card 23:37396: Secondary S, 128 wide. */
.pay-card-head .btn { min-width: 128px; }
/* Documents 23:37416: toolbar (title, Download all 160 x 36), 20px to the table. */
.pay-docs-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: 20px; }
.pay-docs-toolbar .pay-section-title { margin: 0; }
.pay-download-all { min-width: 160px; }
.pay-download-error:not(:empty) { margin: 0 0 var(--space-3); }
[data-pay-docs] + .form-note { margin-top: var(--space-4); }
/* Table 26:41264: 56px header, 52px rows, 24px side padding; Figma's column widths. */
.pay-docs-table th { height: 56px; padding-top: 0; padding-bottom: 0; }
.pay-docs-table td { height: 52px; padding-top: 0; padding-bottom: 0; }
.pay-docs-table th:first-child, .pay-docs-table td:first-child { width: 230px; padding-left: var(--space-6); }
.pay-docs-table th:nth-child(3) { width: 167px; }
.pay-docs-table th:nth-child(4) { width: 134px; }
.pay-docs-table th:last-child, .pay-docs-table td:last-child { width: 180px; padding-right: var(--space-6); text-align: right; }
.pay-doc-date { font: 500 12px/20px var(--font-sans); color: var(--fg-muted); white-space: nowrap; }
.pay-doc-name { display: inline-flex; align-items: center; gap: 8px; font: 400 12px var(--font-sans); color: var(--fg-strong); }
.pay-doc-name svg { flex: none; color: var(--fg-muted); }
.pay-doc-amount { font: 700 13px/20px var(--font-mono); color: var(--fg-strong); }
.pay-doc-links { white-space: nowrap; }
/* Download PDF 26:41282: Plex Mono SemiBold 11, the accent green, 6px after its icon. */
.pay-doc-link { display: inline-flex; align-items: center; gap: 6px; font: 600 11px var(--font-mono); color: var(--success-fg); text-decoration: none; }
.pay-doc-link:hover { text-decoration: underline; }
/* Footer 26:41391: 12px 24px; "Showing 8 payments" in Plex Mono Medium 11. */
.pay-docs-card .ui-table-foot { min-height: 59px; padding: 12px var(--space-6); }
.pay-docs-card .ui-pagination-status { font: 500 11px var(--font-mono); }
/* The Update card dialog: Stripe's Card Element in its own frame. */
.pay-card-intro { margin: 0 0 var(--space-4); font: var(--type-body-sm); color: var(--fg-muted); }
/* Stripe's card field in the forms' input frame (ds/forms.css): 40px, 1px border, focus ring. */
.pay-card-field { box-sizing: border-box; min-height: 40px; padding: 11px 12px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.pay-card-field.is-focused { border-color: var(--focus); box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus) 25%, transparent); }
#pay-card-modal .field-error:not(:empty) { margin-top: var(--space-3); }
@media (max-width: 900px) { .pay-cards { grid-template-columns: minmax(0, 1fr); } }
/* Edit details (#3504): two columns, a wide field spans both; one column on a narrow screen. */
.pay-edit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.pay-edit .pay-edit-wide { grid-column: 1 / -1; }
.pay-edit .pay-card-intro, .pay-edit .form-note { margin: 0; }
.pay-edit .form-note { margin-top: calc(-1 * var(--space-3)); }
@media (max-width: 560px) { .pay-edit { grid-template-columns: minmax(0, 1fr); } }
/* ==== end Payments tab (#3475, #3504) ==== */

/* ==== Settings tab: auto-refill card (#3468, Figma 1:14801 "Auto-reload
 * Card", OFF 1:15035, ON 1:15586). Owned by #3468; other Billing issues add
 * their own blocks. The switch and the inline selects save from the card;
 * Manage opens the dialog (#3511); the subtitle says the last refill (#3510). Figma's greys
 * #999fa5 (OFF badge, 2.6:1) and #6b7280/#52625b use --fg-muted, and the
 * #15835e link --primary-text, for AA. ==== */
.card.refill-card {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--space-6); padding: var(--space-6);
  border: 1px solid var(--border-strong); border-radius: var(--radius-xl); box-shadow: var(--shadow-card);
}
.refill-card > * { margin: 0; }
/* Header 1:14802: a 32px tile 4px down, 12px to the title block. */
.refill-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.refill-tile {
  display: inline-grid; place-items: center; flex: none; box-sizing: border-box; width: 32px; height: 32px; margin-top: var(--space-1);
  background: var(--bg); border: 1px solid var(--divider); border-radius: 8px; color: var(--fg-strong);
}
.refill-head-text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.refill-title-row { display: flex; align-items: flex-end; gap: var(--space-2); min-height: 24px; }
.refill-title-row h2 { margin: 0; font: 700 15px/22.5px var(--font-sans); letter-spacing: 0; color: var(--fg-strong); }
/* Badge 1:14815 / 1:15922: Inter Bold 9/13.5, 2px 6px, radius 4, no border. */
.badge.refill-badge {
  min-height: 0; margin-bottom: 2px; padding: 2px 6px; border: 0; border-radius: var(--radius-sm); font: var(--type-micro);
  background: var(--bg); color: var(--fg-muted); transition: background-color 150ms var(--ease-out, ease-out), color 150ms var(--ease-out, ease-out);
}
.badge.refill-badge.badge-success { background: var(--success-bg); color: var(--success-fg); }
.refill-sub { margin: 0; font: 400 12px/19.5px var(--font-sans); color: var(--fg-muted); }
.refill-sub-warn { color: var(--warning-fg); }

/* Rule row 1:14819: "If balance falls to [$5] or below, add [$25]", 8px apart, one line at 400 wide. */
.refill-rule { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font: 700 12px/16px var(--font-sans); color: var(--fg-secondary); }
/* The values are the #3439 compact select (#3511): Figma 1:14819's box, 34 tall, radius 8, Inter Black 12. */
.refill-select .dd-button, .refill-select select { width: auto; min-width: 0; min-height: 34px; padding: 8px 12px; gap: var(--space-2); border-radius: 8px; font: 900 12px/16px var(--font-sans); color: var(--fg-strong); }
.refill-select .dd-button:disabled { color: var(--fg-muted); }

/* "Top up automatically" box 1:14839: 72 tall, 12/16 padding, the same
   neutral grey on and off (#3715); the switch and the badge say the state. */
.refill-box {
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); box-sizing: border-box; min-height: 72px;
  padding: 11px 15px; border: 1px solid transparent; border-radius: 8px; background: var(--bg);
  transition: background-color 150ms var(--ease-out, ease-out), border-color 150ms var(--ease-out, ease-out);
}
.refill-box-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 22px; }
.refill-box-title { font: 600 13px/20px var(--font-sans); color: var(--fg-strong); }
.refill-box-row .btn { flex: none; }
.refill-box-sub { margin: 0; font: 400 11px/17px var(--font-sans); color: var(--fg-muted); }

/* Footer 1:14845: "Manage Auto-refill" and a chevron, 4px apart, 20px under
 * the box; a save's status line to its right, on the same row (#3715). */
.refill-foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-top: -4px; }
.refill-manage {
  display: inline-flex; flex: none; align-items: center; gap: var(--space-1); padding: 0; border: 0; background: none;
  font: 700 11px/16px var(--font-sans); color: var(--primary-text); cursor: pointer;
}
.refill-manage:hover:not(:disabled) { text-decoration: underline; }
.refill-manage:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.refill-manage:disabled { color: var(--fg-muted); cursor: not-allowed; }
.refill-status { margin: 0; min-width: 0; text-align: right; font: 400 11px/16px var(--font-sans); color: var(--fg-muted); }

/* The dialogs (#3442 modal shell): the turn-on confirm (#3511), and "Auto-refill
 * setup" (#3464, Figma 21:31935) with the top-up dialog's header and footer.
 * Figma's #9ca3af/#52625b greys are --fg-muted; its #f9fafb strips --bg, and
 * the payment row's #f8fbfa / #d6e8df mix from --brand, as the top-up summary. */
.refill-modal p { margin: 0; }
.refill-modal-lede { font: var(--type-body); color: var(--fg-muted); }
.refill-note { font: 400 11px/17px var(--font-mono); color: var(--fg-muted); }
#refill-dialog .ui-modal-eyebrow { letter-spacing: 0.6px; }
#refill-dialog .ui-modal-title { letter-spacing: -0.4px; }
#refill-dialog .ui-modal-step { letter-spacing: 0.2px; }
#refill-dialog .ui-modal-body { gap: var(--space-5); background: var(--surface); }
#refill-dialog .ui-modal-foot { align-items: flex-start; }
#refill-dialog .ui-modal-foot > .btn-primary { flex: 1 1 0; min-width: 0; border-radius: 10px; }
#refill-dialog .ui-modal-foot > .btn-secondary { flex: none; width: 125px; }
.refill-use, .refill-limit-box { display: grid; gap: var(--space-1); }
.refill-use-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 22px; }
.refill-use-title { font: 600 13px/17px var(--font-mono); color: var(--fg-strong); cursor: pointer; }
.refill-use-sub { font: 400 11px/17px var(--font-mono); color: var(--fg-muted); }
.refill-setup { display: grid; gap: var(--space-2); }
.refill-setup .topup-label { margin: 0; }
.refill-field { display: grid; gap: var(--space-1); }
.refill-field label { font: 700 11px/14px var(--font-mono); color: var(--fg-secondary); }
.refill-field .money-input { border-radius: var(--radius); color: var(--fg-strong); font-weight: 700; }
.refill-field .money-input input, .field.refill-field .money-input input { font-weight: 700; color: var(--fg-strong); }
.refill-charge {
  display: flex; justify-content: space-between; gap: var(--space-3); padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--bg); font: 400 11px/14px var(--font-mono); color: var(--fg-muted); font-variant-numeric: tabular-nums;
}
.refill-charge span:last-child { font-weight: 600; color: var(--fg-strong); }
.refill-limit-box { gap: 10px; padding: 12px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg); }
.refill-limit-box [data-refill-day-field][hidden] { display: none; }
.refill-method {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--border-strong)); border-radius: var(--radius); background: color-mix(in srgb, var(--brand) 3%, var(--surface));
  font: 400 11px/14px var(--font-sans); color: var(--fg-muted);
}
.refill-method-card { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/14px var(--font-mono); color: var(--fg-secondary); }
.refill-method-card svg { width: 16px; height: 16px; flex: none; }
#refill-dialog .refill-method + .refill-note { margin-top: calc(var(--space-2) - var(--space-5)); }

@media (prefers-reduced-motion: reduce) { .badge.refill-badge, .refill-box { transition: none; } }
:root[data-motion="reduce"] .badge.refill-badge, :root[data-motion="reduce"] .refill-box { transition: none; }
/* ==== end auto-refill card (#3468) ==== */

/* ==== History tab (#3474, Figma 23:36730: filters 23:36966, table 23:37006,
 * MCP divider 23:37079, footer 23:37141). One table: the balance history,
 * then the "MCP sessions" group. Tokens only; dark from tokens.css. ==== */
/* Period, Type and Repositories are the Usage tab's filter selects (8 apart,
 * 8 in); the export group fills the rest, right-aligned, so its status line
 * (first in it) grows leftwards and the button stays flush right (#3715). */
.history-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.history-export { display: flex; flex: 1 1 auto; justify-content: flex-end; align-items: center; gap: var(--space-3); min-width: 0; }
.history-export .btn { flex: none; min-width: 160px; }
#history-csv-status { min-width: 0; text-align: right; font: var(--type-body-sm); }
#history-csv-status:empty { display: none; }
.history-detail-choice { display: inline-flex; flex: none; align-items: center; gap: var(--space-2); font: var(--type-body-sm); color: var(--fg); }
.history-detail-choice[hidden] { display: none; }

/* Card: radius 12, 1px --border-strong, shadow-xs. */
.history-card { border-color: var(--border-strong); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.history-table { table-layout: fixed; }
.history-col-date { width: 254px; }   /* 230 + the card's 24 inset */
.history-col-type { width: 120px; }
.history-col-amount { width: 152px; } /* 128 + 24 */
.history-table > thead > tr > th { padding: 0; font: 700 10px var(--font-mono); letter-spacing: 0.8px; color: var(--fg-muted); }
.history-table > tbody > tr > td { box-sizing: border-box; height: 52px; padding: 0; border-top: 1px solid var(--divider); }
.history-table > thead > tr > th:first-child, .history-table > tbody > tr > td:first-child { padding-left: var(--space-6); }
.history-table > thead > tr > th:last-child, .history-table > tbody > tr > td:last-child { padding-right: var(--space-6); }
.history-table > tbody > tr:first-child > td { border-top: 1px solid var(--divider); }
.history-table > thead + tbody > tr:first-child > td { border-top: 0; }
.history-table tbody[hidden] { display: none; }
.history-date { font: 500 12px/20px var(--font-sans); color: var(--fg-muted); white-space: nowrap; }
.history-table > tbody > tr > td.history-what { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.history-what { font: 400 12px/18px var(--font-sans); color: var(--fg-strong); overflow-wrap: anywhere; }
.history-what .gh-mark { width: 15px; height: 15px; margin: 0 6px; vertical-align: -3px; color: var(--fg-strong); }
.history-what .pr-number { font: 600 12px/15px var(--font-sans); color: var(--live-text); text-decoration: underline; }
.history-amount { font: 700 13px/20px var(--font-mono); color: var(--fg-strong); white-space: nowrap; }
.history-amount.amount-in { color: var(--success-fg); }

/* MCP sessions divider: 32 tall, header tint, Plex Mono Bold 10, .8 tracking. */
.history-table .history-divider th { height: 32px; padding-left: var(--space-6); background: var(--surface-header); border-top: 1px solid var(--divider); border-bottom: 0; text-align: left; }
.history-session { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: 400 12px/15px var(--font-sans); color: var(--fg-strong); cursor: pointer; }
.history-session:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.history-session .history-chevron { color: var(--fg-muted); transition: transform var(--motion-fast, 120ms) ease; }
.history-session[aria-expanded="true"] .history-chevron { transform: rotate(90deg); }
.history-sid { font-weight: 600; color: var(--fg-muted); }
.history-sep { margin: 0 6px; font: 400 12px var(--font-mono); color: var(--fg-muted); }
.history-meta { font: 400 11px/15px var(--font-sans); color: var(--fg-muted); }
.history-what .badge-status { margin-left: var(--space-2); vertical-align: 1px; }
.history-table > tbody > tr.history-detail > td { height: auto; padding: 0 var(--space-6) var(--space-4); border-top: 0; }
/* The session's reviews, nested: a plain sub-table, not the DS table's header. */
.history-detail table { width: 100%; margin: 0; border-collapse: collapse; }
.history-detail table th { height: 32px; padding: 0 var(--space-3); background: none; border-bottom: 1px solid var(--divider); font: 700 10px var(--font-mono); letter-spacing: 0.8px; color: var(--fg-muted); white-space: nowrap; }
.history-detail table td { height: 36px; padding: 0 var(--space-3); border-top: 1px solid var(--divider); font: 400 12px/16px var(--font-sans); color: var(--fg); }
.history-detail table tr:hover { box-shadow: none; }
.history-table > tbody > tr > td.ui-table-empty { height: auto; padding: var(--space-7) var(--space-6); text-align: center; white-space: normal; }

/* Footer 56: "Showing N entries" (Plex Mono Medium 11), Load more at right. */
.history-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); box-sizing: border-box; min-height: 56px; padding: 10px var(--space-6); background: var(--surface-header); border-top: 1px solid var(--divider); }
.history-showing { margin: 0; font: 500 11px var(--font-mono); color: var(--fg-muted); }

@media (prefers-reduced-motion: reduce) {
  .history-session .history-chevron { transition: none; }
}
/* ==== end History tab (#3474) ==== */

/* ==== Usage tab (#3472): filter row and the daily usage card ================
 * Figma 23:38988 (Bars), 23:38027 (Line), 23:38496 (Table); filter row
 * 23:37808, card 23:37864. Owned by #3472; other Billing tabs keep out.
 * Greys Figma draws below AA on white (#94a3b8, #9ca3af, #6c757d) use
 * --fg-muted. Motion is proposed, not in Figma. */

/* Filter row 23:37808: four labelled selects, a spacer, Refresh and Export. */
.usage-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.usage-filter-set { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-left: var(--space-2); }
.usage-actions { display: flex; gap: var(--space-2); margin-left: auto; }
.usage-actions .usage-export { min-width: 160px; }
.usage-filter .dd-button {
  position: relative; width: auto; min-height: 35px; gap: 0; padding: 9px 33px 9px 13px;
  border-color: var(--input-border); border-radius: var(--radius-md); color: var(--fg-strong); font: var(--type-label);
}
/* The "Period:" prefix is the label (dropdown.ts data-label), IBM Plex Mono Bold 11. */
.usage-filter .dd-button::before { content: attr(data-label) ":"; margin-right: 4px; font: 700 11px/16.5px var(--font-mono); color: var(--fg-muted); }
.usage-filter .dd-chevron { position: absolute; top: 50%; right: 12px; width: 10px; height: 10px; margin-top: -5px; }
.usage-filter .dd-value { flex: none; }
.usage-filter-off .dd-button { cursor: not-allowed; }
.usage-filter-off .dd-value { color: var(--fg-muted); }
.usage-custom { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font: var(--type-label); color: var(--fg-muted); }
.usage-custom input {
  height: 35px; padding: 0 var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--fg); font: var(--type-input);
}
.usage #usage-note:empty { display: none; }

/* Card 23:37864: radius 12, padding 24/24/36, 16 between its rows. */
.usage-card { margin-top: var(--space-6); padding: var(--space-6) var(--space-6) 36px; border-color: var(--border-strong); border-radius: var(--radius-xl); }
.usage-card #usage-body { display: grid; gap: var(--space-4); min-width: 0; transition: opacity var(--motion-base) var(--ease-out); }
.usage-card.is-busy #usage-body { opacity: .55; }

/* Header 23:37865: eyebrow and total | view switch | range and legend. */
.usage-card-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); }
.usage-card-head-left, .usage-card-head-right { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.usage-card-head-right { align-items: flex-end; text-align: right; }
.usage-eyebrow { margin: 0; font: 700 9px/13.5px var(--font-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--fg-muted); }
.usage-metric { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0; }
.usage-total { font: 700 32px/36px var(--font-mono); letter-spacing: -0.8px; color: var(--fg-strong); font-variant-numeric: tabular-nums; }
.usage-counts { font: 700 12px var(--font-mono); color: var(--fg-muted); }
.usage-range { margin: 0; font: 700 10px var(--font-mono); color: var(--fg-muted); }
.usage-legend { display: flex; gap: var(--space-3); margin: 0; padding: 0; list-style: none; font: 600 9px var(--font-mono); color: var(--fg-muted); }
.usage-legend li { display: flex; align-items: center; gap: 6px; }
.usage-swatch { width: 10px; height: 10px; border-radius: 2px; background: linear-gradient(90deg, var(--progress-from), var(--progress-to)); }
.usage-swatch-live { background: var(--success-bg); outline: 1px dashed var(--focus); outline-offset: -1px; }
/* What the total includes (#3875): an info icon after the counts, its note in a tooltip. */
.usage-metric .ui-tooltip-wrap { align-self: center; } .usage-metric .ui-tooltip { text-align: left; }
.usage-note-btn { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--fg-muted); cursor: help; }
.usage-note-btn:hover { color: var(--fg-strong); }

/* View switch 23:37873: radius 6, the selected segment grey, not ink. */
.segmented.usage-views { border-color: var(--border); border-radius: var(--radius-md); padding: 1px; }
.usage-views button { gap: var(--space-1); padding: 8px 16px; }
.usage-views button svg { width: 12px; height: 12px; }
.usage-views button[aria-pressed="true"] { background: var(--surface-sunken); color: var(--fg-strong); }

/* Bars 23:37896 and Line 23:38362: tokens for every mark. */
.usage-chart { position: relative; padding: 0; }
.usage-chart svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.usage-chart .usage-grad-from { stop-color: var(--progress-from); }
.usage-chart .usage-grad-to { stop-color: var(--progress-to); }
.usage-chart .gridline { stroke: var(--border-strong); stroke-dasharray: 2 3; }
.usage-chart .gridline-base { stroke-dasharray: none; }
.usage-chart .axis { fill: var(--fg-muted); font: 600 10px var(--font-mono); font-variant-numeric: tabular-nums; }
.usage-chart .bar { fill: url(#usage-grad-bar); }
.usage-chart .bar-live { fill: var(--success-bg); stroke: var(--focus); stroke-width: 1; stroke-dasharray: 2 2; }
.usage-chart .line { fill: none; stroke: url(#usage-grad-line); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.usage-chart .dot { fill: var(--brand-text); stroke: var(--surface); stroke-width: 1.5; }
.usage-chart .dot-live { fill: var(--success-bg); stroke: var(--focus); }
.usage-chart .dot-active { fill: var(--brand-text); stroke: var(--surface); stroke-width: 2; }
.usage-chart .cursor { stroke: var(--fg-muted); stroke-dasharray: 3 3; }
.usage-chart .chart-tip {
  top: -8px; padding: 6px 8px; border: 1px solid var(--tooltip-border); border-radius: var(--radius-md);
  background: var(--tooltip-bg); color: var(--tooltip-fg); font: var(--type-label);
}

/* Table 23:38496: a bordered table inside the card, 71px rows, paged. */
.usage-table-card { overflow: hidden; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.usage-rows { width: 100%; border-collapse: collapse; }
.usage-rows thead th {
  height: 56px; padding: 0 var(--space-6); background: var(--surface-header); border-bottom: 1px solid var(--divider); text-align: left;
  font: 700 10px/15px var(--font-mono); letter-spacing: .8px; text-transform: uppercase; color: var(--fg-muted);
}
.usage-rows .num { text-align: right; }
.usage-rows tbody th, .usage-rows tbody td { height: 71px; padding: 0 var(--space-6); border-top: 1px solid var(--divider); }
.usage-rows tbody tr:first-child th, .usage-rows tbody tr:first-child td { border-top: 0; }
.usage-rows tbody th { text-align: left; font-weight: normal; }
.usage-row-key { display: block; font: 700 13px/19.5px var(--font-sans); color: var(--fg-strong); }
.usage-row-sub { display: block; margin-top: 2px; font: 500 11px/16.5px var(--font-sans); color: var(--fg-muted); }
.usage-rows tbody td { font: 700 13px var(--font-mono); color: var(--fg-strong); font-variant-numeric: tabular-nums; }
.usage-table-card .ui-pagination { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--divider); }
.usage-table-card .ui-pagination-status { font: 700 11px var(--font-mono); color: var(--fg-muted); }

/* Motion (proposed, not in Figma): bars grow from the baseline over 400 ms,
 * the line draws over 600 ms, a view switch fades in over 150 ms. Only on a
 * new load or a view switch (data-animate), never on a resize redraw. */
.usage-view[data-animate] { animation: usage-fade var(--motion-base) var(--ease-out) both; }
.usage-view[data-animate] .bar { transform-box: fill-box; transform-origin: 50% 100%; animation: usage-grow 400ms var(--ease-out) both; }
.usage-view[data-animate] .line { stroke-dasharray: 1; animation: usage-draw 600ms var(--ease-out) both; }
.usage-view[data-animate] .dot:not(.dot-active) { animation: usage-fade var(--motion-base) var(--ease-out) 450ms both; }
@keyframes usage-grow { from { transform: scaleY(0); } }
@keyframes usage-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes usage-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .usage-view[data-animate], .usage-view[data-animate] .bar, .usage-view[data-animate] .line, .usage-view[data-animate] .dot { animation: none; }
  .usage-card #usage-body { transition: none; }
}

@media (max-width: 900px) {
  .usage-card-head { grid-template-columns: 1fr; }
  .usage-card-head-right { align-items: flex-start; text-align: left; }
  .segmented.usage-views { justify-self: start; }
}
/* Repository table (#3473, 23:37933): the Table view's card and rows, with
 * five columns; names and figures in Plex Mono Bold (Figma over the issue's
 * Inter, #3715), "—" for none. The figures sit in fixed 120px slots at the
 * right (the last one 24 in), in every state, so the columns never move; the
 * labels, sub-lines and "—" are Figma's light greys at AA (--fg-quiet). */
.usage-repos { margin-top: var(--space-6); }
.usage-repos-table { table-layout: fixed; }
.usage-repos-table .num { box-sizing: content-box; width: 120px; padding-left: 0; padding-right: 0; }
.usage-repos-table .num:last-child { padding-right: var(--space-6); }
.usage-repos-table thead th { color: var(--fg-quiet); }
.usage-repos-table .usage-row-key { overflow: hidden; font: 700 13px/19.5px var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.usage-repos-table .usage-row-sub { font: 500 11px/16.5px var(--font-mono); color: var(--fg-quiet); }
.usage-repos-none { color: var(--fg-quiet); }
.usage-repos-table td.usage-repos-empty, .usage-devs-table td.usage-repos-empty { text-align: center; font: var(--type-body); color: var(--fg-muted); }
.usage-repos-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); box-sizing: border-box;
  min-height: 56px; padding: 0 var(--space-6); background: var(--surface-header); border-top: 1px solid var(--divider);
}
.usage-repos-all { font: 600 11px/16px var(--font-mono); text-decoration: none; }
.usage-repos-all:hover { text-decoration: underline; }
.usage-repos-total { margin: 0; font: 700 11px var(--font-mono); color: var(--fg-quiet); }
.usage-repos-total strong { font-weight: 700; color: var(--fg-strong); }
/* Developer usage (#3514, 23:37989): a two-column card, the title in the
 * header's first cell, an initial avatar, a share bar and the amount. */
.usage-devs-table thead th:first-child { font: 700 11px/16.5px var(--font-mono); letter-spacing: 1.1px; color: var(--fg-strong); }
.usage-devs-table thead th.num { color: var(--fg-quiet); } /* AA, as the repository table (#3886) */
.usage-devs-months { margin-left: var(--space-2); font-weight: 500; letter-spacing: .8px; color: var(--fg-quiet); } /* proposed, not in Figma */
.usage-dev { display: flex; align-items: center; gap: var(--space-3); }
.usage-dev-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 14px;
  font: 700 11px var(--font-mono); color: var(--avatar-fg);
}
.usage-dev-avatar.tone-1 { background: var(--avatar-1); }
.usage-dev-avatar.tone-2 { background: var(--avatar-2); }
.usage-dev-avatar.tone-3 { background: var(--avatar-3); }
.usage-devs-table .usage-row-key { font: 700 13px/19.5px var(--font-mono); }
.usage-devs-table .usage-row-sub { font: 500 11px/16.5px var(--font-mono); color: var(--fg-quiet); }
.usage-dev-funds { display: inline-flex; align-items: center; gap: var(--space-2); }
.usage-dev-bar { display: block; width: 120px; height: 6px; overflow: hidden; border-radius: 9999px; background: var(--progress-track); }
.usage-dev-bar > span { display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--progress-from), var(--progress-to)); }
.usage-dev-usd { font: 700 13px var(--font-mono); color: var(--primary-text); }
.usage-devs-note { margin: 0; padding: var(--space-3) var(--space-6); border-top: 1px solid var(--divider); font: 400 11px var(--font-mono); color: var(--fg-quiet); }
/* ==== end Usage tab (#3472) ==== */