/* Billing composition within the shared standalone page frame. */
.billing-shell { min-width: 0; display: grid; gap: 1.5rem; }
.billing-shell > * { min-width: 0; }
.billing-page-head, .billing-card { padding: clamp(1rem, 2vw, 1.5rem); }
.billing-page-head h1, .billing-card h2 { margin-block: 0 1rem; }
.billing-topup-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-block: .5rem; }
.billing-topup-row input { box-sizing: border-box; width: 10rem; max-width: 100%; }
.billing-table-scroll { max-width: 100%; overflow-x: auto; }
.billing-table { border-collapse: collapse; width: 100%; text-align: left; }
.billing-table th, .billing-table td { padding: .75rem; border-bottom: 1px solid var(--border-muted); }

body.billing-page {
  display: revert;
}

body.billing-page.auth-required {
  display: revert;
}

.billing-page-brand,
.billing-kicker,
.billing-card-label {
  color: var(--standalone-accent);
}

.billing-intro,
.billing-muted {
  color: var(--muted);
}

.billing-page-status {
  border-color: var(--border);
}

.billing-page-status:empty {
  display: none;
}

.billing-card {
  border-color: var(--border);
  background-color: var(--surface);
}

.billing-balance-card,
.billing-card-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.billing-page #billing-balance {
  display: revert;
}

.billing-usage-summary {
  color: var(--muted);
}

.billing-usage-aggregates {
  display: revert;
}

.billing-usage-aggregates > h3,
.billing-recent-heading {
  color: var(--muted);
}

.billing-aggregate {
  border-color: var(--border-muted);
  background-color: color-mix(in srgb, var(--surface) 88%, var(--bg));
}

.billing-aggregate summary,
.billing-aggregate-total {
  display: revert;
}

.billing-aggregate summary::-webkit-details-marker {
  display: none;
}

.billing-aggregate summary::before {
  color: var(--muted);
}

.billing-aggregate[open] summary {
  border-bottom-color: var(--border-muted);
  background-color: color-mix(in srgb, var(--surface) 72%, var(--bg));
}

.billing-aggregate-copy,
.billing-model-list li > span:first-child {
  display: revert;
}

.billing-aggregate-copy small,
.billing-model-list small {
  color: var(--muted);
}

.billing-model-list strong {
  color: var(--muted);
}

.billing-aggregate-spend {
  color: var(--fg);
}

.billing-model-list {
  border-left-color: var(--border);
}

.billing-model-list li {
  display: revert;
  border-top-color: var(--border-muted);
}

.billing-model-list .billing-aggregate-spend {
  color: var(--muted);
}

.billing-page .billing-list {
  border-top-color: var(--border-muted);
}

.billing-table th, .billing-table td {
  border-bottom-color: var(--border);
}

.billing-table th {
  color: var(--muted);
}

.billing-page .billing-table .billing-row {
  display: revert;
}

.billing-table-scroll:focus-visible {
  outline-color: var(--accent);
}

.billing-page .billing-card {
  border-bottom-color: var(--border);
}