/* Billing uses the existing operation's typography, spacing and semantic colors. */
.view-billing { max-width: 1650px; }
.billing-settings, .billing-settings > *, .billing-credential, .billing-credential-grid > * { min-width: 0; }
.billing-credential-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.billing-credential { display: flex; flex-direction: column; gap: var(--space-3); }
.billing-credential .field { flex: 1 1 auto; }
.billing-credential-status, .billing-help { color: var(--subtle); font-size: var(--text-meta); line-height: 1.7; max-width: 75ch; }
.billing-credential-status strong { color: var(--ink); font-weight: 550; }
.billing-credential .check { font-size: var(--text-label); }
.billing-settings .note { margin-bottom: 0; }
.billing-table-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-color: var(--control-line) var(--surface); scrollbar-width: thin; max-width: 100%; min-width: 0; }
.billing-table-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.billing-table { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--text-label); font-variant-numeric: tabular-nums; }
.billing-table th, .billing-table td { padding: var(--space-4) var(--space-5); vertical-align: top; border-bottom: 1px solid var(--line); }
.billing-table thead th { background: var(--surface); color: var(--subtle); font-size: var(--text-meta); font-weight: 600; white-space: nowrap; }
.billing-table tbody th { font-weight: 550; }
.billing-table tbody tr:last-child > * { border-bottom: 0; }
.billing-value strong, .billing-value small { display: block; }
.billing-value strong { font-weight: 600; color: var(--ink); line-height: 1.45; }
.billing-value small { font-size: var(--text-meta); margin-top: var(--space-1); }
.billing-period { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); font-size: var(--text-meta); color: var(--subtle); margin-bottom: var(--space-3); font-variant-numeric: tabular-nums; }
.billing-period strong { color: var(--ink); font-weight: 600; }
.billing-filter-disclosure { border: 1px solid var(--line); background: var(--paper); margin-bottom: var(--space-4); }
.billing-filter-disclosure > summary { padding: var(--space-3) var(--space-4); min-height: 44px; color: var(--green); font-size: var(--text-label); font-weight: 550; cursor: pointer; }
.billing-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: var(--space-4); border-top: 1px solid var(--line); padding: var(--space-4); }
.billing-filters .form-error { grid-column: 1 / -1; }
.billing-sync { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); }
.billing-sync > div { min-width: 0; flex: 1 1 320px; }
.billing-sync p { font-size: var(--text-label); overflow-wrap: anywhere; }
.billing-sync small { display: block; margin-top: var(--space-1); max-width: 75ch; }
.billing-sync .form-error { flex: 1 1 100%; }
.billing-sync-meta, .billing-footnote, .billing-warnings { padding: var(--space-4) var(--space-6); font-size: var(--text-meta); color: var(--subtle); line-height: 1.7; }
.billing-sync-meta { padding-top: 0; }
.billing-sync-meta p { overflow-wrap: anywhere; }
.billing-footnote { border-top: 1px solid var(--line); }
.billing-warnings { color: var(--amber); }
.billing-warnings ul { padding-left: var(--space-4); margin: 0; }
.billing-warnings li + li { margin-top: var(--space-2); }
.billing-overview { table-layout: fixed; }
.billing-overview th:first-child { width: 27%; }
.billing-overview th:nth-child(2) { width: 29%; }
.billing-overview td:last-child { font-size: var(--text-meta); color: var(--subtle); }
.billing-value .billing-mobile-basis { display: none; }
.billing-two-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.billing-two-columns > *, .view-billing > *, .billing-conversation-body > * { min-width: 0; }
.billing-requests { min-width: 920px; }
.billing-requests td:nth-child(2), .billing-requests td:nth-child(6) { min-width: 160px; }
.billing-requests .disclosure { margin: 0; padding: 0; border: 0; }
.billing-requests .disclosure > summary { white-space: nowrap; }
.billing-reference { min-width: 200px; max-width: 280px; margin: var(--space-3) 0 0; font-size: var(--text-meta); }
.billing-reference dt { color: var(--subtle); margin-top: var(--space-2); }
.billing-reference dd { margin: 0; overflow-wrap: anywhere; }
.billing-comparison { min-width: 650px; }
.billing-daily { min-width: 800px; }
.billing-conversations .button { min-height: 28px; padding: 0; }
.billing-conversation-body { display: grid; gap: var(--space-4); padding-top: var(--space-3); }
.billing-conversation-body .note { margin-bottom: 0; }
.billing-conversation-body > .billing-warnings { padding: 0 0 0 var(--space-5); }
.billing-conversation-summary { table-layout: fixed; }
.billing-conversation-summary th { width: 40%; }
.billing-conversation-summary .billing-value strong { font-size: var(--text-label); }
.billing-methods { color: var(--subtle); font-size: var(--text-label); line-height: 1.75; max-width: 85ch; }
.billing-methods ul { padding-left: var(--space-5); }
.billing-methods li + li { margin-top: var(--space-2); }
.billing-rate-list { min-width: 0; }
.billing-rate { display: grid; gap: var(--space-4); padding: var(--space-5) 0; border-bottom: 1px solid var(--line); }
.billing-rate:first-child { padding-top: 0; }
.billing-rate-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.billing-rate-heading h3 { overflow-wrap: anywhere; min-width: 0; }
.billing-rate-heading .button { flex: 0 0 auto; font-size: var(--text-meta); padding: 0; min-height: 28px; }
.billing-pricing .note { margin-bottom: 0; }
.billing-pricing .form-grid > *, .billing-rate > * { min-width: 0; }
.billing-rate-reference { display: grid; gap: var(--space-2); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.billing-rate-reference .button { justify-self: start; white-space: normal; text-align: left; }
@media (max-width: 1100px) {
    .billing-two-columns { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 760px) {
    .billing-credential-grid { grid-template-columns: minmax(0, 1fr); }
    .billing-settings input, .billing-settings select { font-size: 16px; }
    .billing-settings .button, .view-billing .button { min-height: 44px; }
    .billing-table th, .billing-table td { padding: var(--space-3) var(--space-4); }
    .view-billing .page-heading { display: block; }
    .view-billing .page-heading .actions { margin-top: var(--space-4); }
    .view-billing .page-heading .button { white-space: normal; }
    .billing-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .billing-filters input, .billing-filters select, .billing-pricing input { font-size: 16px; }
    .billing-sync, .billing-sync-meta, .billing-footnote, .billing-warnings { padding-right: var(--space-4); padding-left: var(--space-4); }
    .billing-sync .button { width: 100%; }
    .billing-overview th:first-child { width: 43%; }
    .billing-overview th:nth-child(2) { width: 57%; }
    .billing-overview thead th:last-child, .billing-overview tbody td:last-child { display: none; }
    .billing-overview td, .billing-overview th { overflow-wrap: anywhere; }
    .billing-overview .billing-mobile-basis { display: block; margin-top: var(--space-2); }
    .billing-period .button { min-height: 44px; }
    .billing-conversations { min-width: 650px; }
    .billing-conversations .button, .billing-rate-heading .button { min-height: 44px; }
    .billing-conversation-summary th, .billing-conversation-summary td { overflow-wrap: anywhere; }
    .billing-rate-heading { align-items: center; }
}
@media (max-width: 380px) { .billing-filters { grid-template-columns: minmax(0, 1fr); } }