/* Customer console only. Static layout; no animation or chart dependencies. */
.customer-console { --shell: min(100%, 100rem); }
.customer-console .topbar { position: fixed; inset: 0 auto 0 0; width: 208px; background: #183426; border: 0; color: #edf3ee; }
.customer-console .topbar__inner { width: 100%; height: 100%; padding: 30px 20px; display: flex; flex-direction: column; align-items: stretch; gap: 38px; }
.customer-console .wordmark { color: #edf3ee; font-size: 24px; line-height: 1.2; }
.customer-console .wordmark span { display: block; margin-top: 10px; color: #b9ccbf; font: 13px var(--font); letter-spacing: .03em; }
.customer-console .topbar nav { display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
.customer-console .topbar nav a { color: #d5e2d9; padding: 12px; border: 0; border-radius: 5px; font-size: 14px; }
.customer-console .topbar nav a:hover, .customer-console .topbar nav a[aria-current] { background: #2e503b; color: #fff; }
.customer-console .topbar #signout { margin-top: 28px; }
.customer-console main { margin: 0 0 0 208px; width: calc(100% - 208px); max-width: 1660px; padding: 38px 32px 64px; }
.console-head { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.console-head h1 { font-size: 28px; }
.console-head p { margin: 8px 0 0; }
.console-stats { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:28px; padding:24px 0 30px; margin-bottom:28px; border-bottom:1px solid var(--line); }
.console-stats .readout__value { font-size:28px; }
.console-stats .readout__note { max-width:34ch; font-size:12px; }
.console-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:24px; align-items:start; }
.console-primary, .console-rail { min-width:0; }
.customer-console .panel { border-radius:6px; padding:22px; box-shadow:none; }
.console-primary .panel { padding:22px 0 8px; }
.console-primary .panel > :not(.scroll-x) { margin-left:22px; margin-right:22px; }
.console-primary table { font-size:12px; white-space:nowrap; }
.console-primary td, .console-primary th { padding:14px 12px; }
.console-primary h2,.console-rail h2 { font-size:17px; }
.console-rail .grid { display:block; }
.console-rail .grid > div + div { margin-top:22px; }
.console-rail .copy-row { display:block; }
.console-rail .copy-row button { margin-top:8px; }
.console-rail .secret { font-size:12px; overflow-wrap:anywhere; white-space:normal; }
.console-rail .panel { margin-bottom:20px; }
.console-code { font:11px/1.7 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; margin:18px 0; padding:12px; background:var(--bg); border:1px solid var(--line); }
.console-filters { display:flex; gap:14px; margin-top:20px; margin-bottom:20px; }
.console-filters .field { flex:1; min-width:0; }
.console-filters input,.console-filters select { min-height:40px; font-size:13px; }
.console-id { border:0; background:transparent; color:var(--pine); font:12px var(--mono); padding:8px 0; cursor:pointer; }
.console-more { display:block; padding:20px 0; font-size:13px; }
.duration-strip { margin-top:20px; margin-bottom:20px; }
.duration-strip figcaption { font-size:12px; color:var(--muted); margin-bottom:12px; }
#console-duration { display:flex; align-items:flex-end; gap:5px; height:56px; border-bottom:1px solid var(--line); }
#console-duration > span { flex:1; max-width:28px; background:var(--pine); opacity:.65; min-height:2px; }
.console-details { border-top:1px solid var(--line); padding:22px 0; margin-top:12px; }
.console-details summary { cursor:pointer; font-weight:550; min-height:30px; }
.console-details > .panel { margin-top:20px; }
.console-rate { display:flex; gap:20px; align-items:center; padding:22px 0; }
.customer-console :focus-visible { outline:2px solid var(--brass); outline-offset:4px; }
@media(min-width:1600px) { .console-layout { grid-template-columns:minmax(0,1fr) 340px; } .console-code { font-size:12px; } }
@media(max-width:1200px) { .console-layout { grid-template-columns:minmax(0,1fr); } .console-rail { display:grid; grid-template-columns:1fr 1fr; gap:20px; } .console-rail .panel { margin:0; } .console-stats { gap:16px; } }
@media(max-width:760px) {
 .customer-console .topbar { position:static; width:100%; }
 .customer-console .topbar__inner { padding:18px 20px; gap:18px; }
 .customer-console .wordmark span { display:inline; margin-left:12px; }
 .customer-console .topbar nav { flex-direction:row; flex-wrap:wrap; gap:2px; }
 .customer-console .topbar nav a { padding:9px 10px; }
 .customer-console .topbar #signout { margin:0; }
 .customer-console main { margin:0; width:100%; padding:24px 16px; }
 .console-head { align-items:flex-start; flex-direction:column; }
 .console-stats { grid-template-columns:1fr 1fr; gap:24px 16px; }
 .console-stats .readout__value { font-size:25px; }
 .console-rail { display:block; } .console-rail .panel { margin-bottom:16px; }
 .console-filters { flex-direction:column; } .console-rate { flex-direction:column; align-items:flex-start; }
}
.customer-console .topbar nav { margin-left:0; width:100%; }
.customer-console .scroll-x { margin:0; padding:0; max-width:100%; }
.console-primary .scroll-x { max-height:460px; overflow:auto; }
.console-primary thead { position:sticky; top:0; background:var(--white); z-index:1; }

/* Teammates and completed UTC-day reporting. */
body:not(.identity-ready) [data-owner-only], .viewer [data-owner-only] { display:none !important; }
.viewer .console-layout { grid-template-columns:minmax(0,1fr); }
.usage-totals { display:flex; flex-wrap:wrap; gap:32px; padding:20px 0; margin-bottom:20px; border-bottom:1px solid var(--line); }
.usage-totals strong { display:block; font-size:24px; font-weight:500; font-variant-numeric:tabular-nums; }
.daily-breakdown { margin-top:28px; }
.daily-breakdown summary, #request-history summary { cursor:pointer; font-weight:500; padding:12px 0; }
.daily-day th { background:var(--paper); padding-top:20px; text-align:left; }
.daily-day .muted { font-weight:400; }
@media(max-width:650px) { .usage-totals { gap:20px; } .usage-totals strong { font-size:20px; } }

.usage-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:end; }
.usage-toolbar .field { width:180px; margin:0; }
@media(min-width:1000px) { .usage-toolbar { flex-wrap:nowrap; } }
[data-panel="usage"] table { min-width:900px; }
[data-panel="usage"] td.mono { white-space:nowrap; }

/* Billing: aligned panels, shared form sizing, and anchored actions. */
[data-panel="topup"] { --billing-gap: 24px; }
[data-panel="topup"] .page-head { margin-bottom: 28px; }
[data-panel="topup"] .page-head > p { max-width: 70ch; }
[data-panel="topup"] h2 { font-size: 19px; line-height: 1.35; }
[data-panel="topup"] .panel__head { margin-bottom: 20px; padding-bottom: 16px; }
.billing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: var(--billing-gap); margin-bottom: var(--billing-gap); }
.billing-grid > .panel { min-width: 0; margin: 0; padding: 24px; display: flex; flex-direction: column; }
.billing-grid #pay-panel { grid-column: 1 / -1; }
.billing-grid .field { min-width: 0; }
.billing-grid input[type="number"], .billing-reminder input { min-height: 46px; border-radius: 5px; width: 100%; font-variant-numeric: tabular-nums; }
.payment-methods { border: 0; padding: 0; margin: 0 0 24px; display: flex; gap: 12px; min-width: 0; }
.payment-methods legend { margin-bottom: 10px; font-size: 13px; font-weight: 500; }
.payment-methods label { flex: 1; min-width: 0; display: grid; grid-template-columns: 18px 1fr; gap: 2px 10px; padding: 14px; border: 1px solid var(--line); border-radius: 5px; cursor: pointer; }
.payment-methods label:hover { border-color: var(--pine); }
.payment-methods label:has(input:checked) { background: #edf3ef; border-color: var(--pine); color: var(--pine); }
.payment-methods input { grid-row: span 2; width: 16px; height: 16px; margin: 3px 0; accent-color: var(--pine); }
.payment-methods small { color: var(--muted); font-size: 12px; }
.billing-amounts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; }
.billing-amounts .btn { width: 100%; min-height: 44px; border-radius: 5px; padding: 8px; }
.billing-grid .billing-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.billing-actions .btn { min-height: 44px; border-radius: 5px; margin: 0; flex: 1 1 auto; }
.billing-footer { margin-top: auto; padding-top: 24px; }
.billing-footer > p { margin-bottom: 12px; }
#auto-form { display: flex; flex-direction: column; flex: 1; }
#auto-message { margin-top: 8px; }
.auto-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 22px 0 16px; }
.auto-fields .field:last-child { grid-column: 1 / -1; }
.auto-fields .field > span { font-size: 13px; }
.billing-details summary { cursor: pointer; padding: 8px 0; font-size: 13px; font-weight: 500; }
.billing-details p { padding-top: 8px; }
.auto-consent { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; font-size: 13px; line-height: 1.55; }
.auto-consent input { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--pine); }
.payment-status { border: 1px solid #b9c9bd; border-radius: 6px; background: #edf3ef; color: var(--pine); padding: 24px; margin-bottom: 24px; }
.payment-status h2 { margin: 0 0 8px; }
#payment-method-note { margin-top: 20px; }
.billing-reminder .row { align-items: flex-start; }
.billing-reminder .field { max-width: 560px; }
.billing-reminder .btn { min-height: 46px; border-radius: 5px; }
[data-panel="topup"] > .panel + .panel { margin-top: var(--billing-gap); }
@media(max-width: 1050px) {
 .billing-grid { grid-template-columns: minmax(0, 1fr); }
}
@media(max-width: 650px) {
 [data-panel="topup"] { --billing-gap: 16px; }
 .billing-grid > .panel { padding: 20px; }
 .payment-methods { gap: 8px; }
 .payment-methods label { padding: 12px; }
 .payment-methods small, .auto-consent, .billing-details summary, .auto-fields .field > span { font-size: 14px; }
 .auto-fields { grid-template-columns: minmax(0, 1fr); }
 .billing-reminder .row { display: block; }
 .billing-reminder .btn { width: 100%; margin-top: 16px; }
}