/* Shared billing components: usage cards (.bu-*) and the plans/checkout view (.bp-*) for CLGS, Bolt Cut and Bolt Nest.
 * Appearance only (billing UI styling handover, 2 November 2026): no rule here changes which element is shown or
 * hidden, a control's order, a word or a number. Colours and fonts come from the product theme (--bt-*,
 * App/billing-theme.css). Each var() repeats the same brand-kit value as its fallback, so a host that does not link the
 * theme yet (Native copies, seat pages) keeps its product identity. Roles: brand = primary actions and key figures;
 * accent = the product signature (stripes, gauges, chips, offers); warn/danger/ok = shared state meanings. */

/* ---- Component tokens ---- */
.billing-usage, .billing-plans, [data-billing-usage], [data-billing-plans] {
  --bu-ink: var(--bt-ink, #0F172A); --bu-sub: var(--bt-sub, #475569); --bu-muted: var(--bt-muted, #64748B);
  --bu-line: var(--bt-line, #E2E8F0); --bu-paper: var(--bt-paper, #FFFFFF); --bu-bg: var(--bt-bg, #F8FAFC); --bu-soft: var(--bt-soft, #F1F5F9);
  --bu-brand: var(--bt-brand, #1A365D); --bu-brand-dark: var(--bt-brand-dark, #0F172A); --bu-tint: var(--bt-tint, #E8EEF6);
  --bu-accent: var(--bt-accent, #7D9B5E); --bu-accent-dark: var(--bt-accent-dark, #526D38); --bu-accent-tint: var(--bt-accent-tint, #EDF2E7);
  --bu-focus: var(--bt-focus, #38BDF8);
  --bu-heading: var(--bt-heading, Montserrat, Arial, sans-serif); --bu-body: var(--bt-body, Poppins, Arial, sans-serif); --bu-radius: var(--bt-radius, 8px);
  --bu-warn: var(--bt-warn, #8B5B13); --bu-warn-bg: var(--bt-warn-bg, #FFF5E4); --bu-danger: var(--bt-danger, #AE3F3A); --bu-danger-bg: var(--bt-danger-bg, #FFF0EF);
  --bu-ok: var(--bt-ok, #127A4A); --bu-ok-bg: var(--bt-ok-bg, #E7F6EE);
  --bu-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  --bu-accent-text: var(--bu-accent-dark);
  --bu-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16ZM7.1 6.8h1.8v5.6H7.1V6.8Zm.9-1.5a1.1 1.1 0 1 0 0-2.2 1.1 1.1 0 0 0 0 2.2Z'/%3E%3C/svg%3E");
  --bu-icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6.6 1.3a1.6 1.6 0 0 1 2.8 0l6.4 11.4A1.6 1.6 0 0 1 14.4 15H1.6a1.6 1.6 0 0 1-1.4-2.3L6.6 1.3ZM7.1 5.4h1.8v4.4H7.1V5.4Zm.9 7.4a1.1 1.1 0 1 0 0-2.2 1.1 1.1 0 0 0 0 2.2Z'/%3E%3C/svg%3E");
}
[data-billing-usage="bolt"], [data-billing-plans="bolt"] {
  --bu-ink: var(--bt-ink, #172135); --bu-sub: var(--bt-sub, #606B80); --bu-muted: var(--bt-muted, #738098);
  --bu-line: var(--bt-line, #DEE4F0); --bu-bg: var(--bt-bg, #F5F7FC); --bu-soft: var(--bt-soft, #EEF2FA);
  --bu-brand: var(--bt-brand, #3457E8); --bu-brand-dark: var(--bt-brand-dark, #2342BC); --bu-tint: var(--bt-tint, #E9EEFF);
  --bu-accent: var(--bt-accent, #F45B25); --bu-accent-dark: var(--bt-accent-dark, #C9441A); --bu-accent-tint: var(--bt-accent-tint, #FFF0EA);
  --bu-focus: var(--bt-focus, #3457E8);
  --bu-heading: var(--bt-heading, 'Barlow Condensed', Inter, Arial, sans-serif); --bu-body: var(--bt-body, Inter, -apple-system, 'Segoe UI', Arial, sans-serif); --bu-radius: var(--bt-radius, 12px);
}
[data-billing-usage="nest"], [data-billing-plans="nest"] {
  --bu-ink: var(--bt-ink, #192D30); --bu-sub: var(--bt-sub, #5F7377); --bu-muted: var(--bt-muted, #78898C);
  --bu-line: var(--bt-line, #E0E7E6); --bu-bg: var(--bt-bg, #F3F6F5); --bu-soft: var(--bt-soft, #EDF3F1);
  --bu-brand: var(--bt-brand, #116E63); --bu-brand-dark: var(--bt-brand-dark, #08534B); --bu-tint: var(--bt-tint, #E4F2EC);
  --bu-accent: var(--bt-accent, #116E63); --bu-accent-dark: var(--bt-accent-dark, #08534B); --bu-accent-tint: var(--bt-accent-tint, #E4F2EC);
  --bu-focus: var(--bt-focus, #116E63);
  --bu-heading: var(--bt-heading, Inter, -apple-system, 'Segoe UI', Arial, sans-serif); --bu-body: var(--bt-body, Inter, -apple-system, 'Segoe UI', Arial, sans-serif); --bu-radius: var(--bt-radius, 12px);
}

/* ---- Usage panel ---- */
.billing-usage { font-family:var(--bu-body); font-size:13px; line-height:1.5; color:var(--bu-ink); background:var(--bu-bg); border:1px solid var(--bu-line); border-radius:calc(var(--bu-radius) + 6px); padding:20px; margin:18px 0; text-align:start; min-width:0; box-sizing:border-box; }
.billing-usage * { box-sizing:border-box; }
.billing-usage .bu-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.billing-usage .bu-top > div { min-width:0; }
.billing-usage h3 { display:flex; align-items:center; gap:10px; font-family:var(--bu-heading); font-size:17px; line-height:1.3; font-weight:700; letter-spacing:-.005em; margin:0 0 4px; color:var(--bu-ink); }
.billing-usage h3::before { content:""; flex:none; width:4px; height:18px; border-radius:2px; background:var(--bu-accent); }
.billing-usage h4 { font-family:var(--bu-heading); font-size:13px; line-height:1.4; font-weight:700; margin:0 0 8px; color:var(--bu-ink); }
.billing-usage .bu-top .bu-note { margin:0; padding-inline-start:14px; }

/* Actions (buttons and the links that share .bu-refresh) */
.billing-usage .bu-refresh { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; padding:8px 14px; background:var(--bu-paper); border:1px solid var(--bu-line); border-radius:var(--bu-radius); font:600 12px/1.3 var(--bu-body); color:var(--bu-brand); text-align:center; text-decoration:none; cursor:pointer; flex-shrink:0; box-shadow:var(--bu-shadow); transition:background-color .15s ease, border-color .15s ease; }
.billing-usage button.bu-refresh:enabled:hover, .billing-usage a.bu-refresh:hover { background:var(--bu-tint); border-color:var(--bu-brand); }
.billing-usage .bu-refresh:focus-visible, .billing-usage .bu-account-select:focus-visible { outline:3px solid var(--bu-focus); outline-offset:2px; }
.billing-usage .bu-refresh:disabled { cursor:wait; opacity:.6; }
.billing-usage > a.bu-refresh:not(.bu-recovery-link) { margin:12px 0 0; }

/* The account-recovery entry is a quiet link; inside a recovery notice it is the main action. */
.billing-usage .bu-recovery-link { display:inline-flex; line-height:1.5; text-decoration:none; margin-bottom:12px; }
.billing-usage > .bu-recovery-link { min-height:0; padding:2px 0; margin:0 0 14px; background:none; border:0; box-shadow:none; color:var(--bu-sub); font-weight:500; text-decoration:underline; text-decoration-color:var(--bu-line); text-underline-offset:3px; }
.billing-usage > .bu-recovery-link:hover { background:none; color:var(--bu-brand); text-decoration-color:currentColor; }
.billing-usage .bu-notice .bu-recovery-link { margin-top:8px; margin-bottom:0; }

/* Shared-account selector */
.billing-usage .bu-accounts { margin:0 0 14px; padding:14px 16px; border:1px solid var(--bu-line); border-radius:var(--bu-radius); background:var(--bu-paper); box-shadow:var(--bu-shadow); }
.billing-usage .bu-account-label { display:grid; gap:6px; font-size:12px; font-weight:650; color:var(--bu-ink); }
.billing-usage .bu-account-select { width:100%; max-width:100%; min-height:40px; padding:8px 12px; border:1px solid var(--bu-muted); border-radius:var(--bu-radius); background:var(--bu-paper); color:var(--bu-ink); font:inherit; font-size:13px; font-weight:500; }
.billing-usage .bu-accounts .bu-note { margin-top:8px; }
.billing-usage .bu-accounts .bu-account-status:empty { margin:0; }
.billing-usage .bu-accounts .bu-refresh { margin-top:10px; }

/* Status lines, notices and loading */
.billing-usage .bu-state, .billing-usage .bu-notice { position:relative; border-radius:var(--bu-radius); padding:12px 14px; padding-inline-start:40px; font-size:13px; line-height:1.55; margin:0 0 14px; overflow-wrap:anywhere; }
.billing-usage .bu-state { background:var(--bu-paper); color:var(--bu-sub); border:1px solid var(--bu-line); }
.billing-usage .bu-notice { background:var(--bu-tint); color:var(--bu-ink); border:1px solid transparent; border-inline-start:3px solid var(--bu-brand); }
.billing-usage .bu-state::before, .billing-usage .bu-notice::before { content:""; position:absolute; inset-inline-start:14px; top:14px; width:16px; height:16px; background:currentColor; -webkit-mask:var(--bu-icon-info) center / 16px 16px no-repeat; mask:var(--bu-icon-info) center / 16px 16px no-repeat; opacity:.85; }
.billing-usage .bu-notice::before { color:var(--bu-brand); inset-inline-start:13px; }
.billing-usage section.bu-notice { background:var(--bu-warn-bg); border-color:var(--bu-warn); border-inline-start:3px solid var(--bu-warn); }
.billing-usage section.bu-notice::before { color:var(--bu-warn); -webkit-mask-image:var(--bu-icon-alert); mask-image:var(--bu-icon-alert); }
.billing-usage section.bu-notice > strong { display:block; color:var(--bu-warn); font-family:var(--bu-heading); font-size:14px; line-height:1.4; margin-bottom:2px; }
.billing-usage section.bu-notice .bu-note { color:var(--bu-ink); }
.billing-usage[data-usage-state="unavailable"] .bu-state { background:var(--bu-danger-bg); color:var(--bu-danger); border-color:var(--bu-danger); }
.billing-usage[data-usage-state="unavailable"] .bu-state::before { -webkit-mask-image:var(--bu-icon-alert); mask-image:var(--bu-icon-alert); }
.billing-usage[data-usage-state="loading"] .bu-state::before { background:none; -webkit-mask:none; mask:none; width:14px; height:14px; top:15px; border-radius:50%; border:2px solid var(--bu-line); border-top-color:var(--bu-brand); opacity:1; animation:bu-spin .9s linear infinite; }
.billing-usage .bu-skeleton { height:110px; border:1px solid var(--bu-line); border-radius:var(--bu-radius); background:var(--bu-soft); background:linear-gradient(90deg, var(--bu-soft) 25%, var(--bu-paper) 50%, var(--bu-soft) 75%) 0 0 / 200% 100%; animation:bu-shimmer 1.6s ease-in-out infinite; }
[data-billing-usage]:not(.billing-usage) { font-family:var(--bu-body); color:var(--bu-sub); background:var(--bu-bg); border:1px dashed var(--bu-line); border-radius:calc(var(--bu-radius) + 6px); padding:4px 20px; margin:18px 0; }
@keyframes bu-spin { to { transform:rotate(360deg); } }
@keyframes bu-shimmer { from { background-position:100% 0; } to { background-position:-100% 0; } }

/* Allowance cards */
.billing-usage .bu-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:12px; }
.billing-usage .bu-card { position:relative; background:var(--bu-paper); border:1px solid var(--bu-line); border-radius:var(--bu-radius); padding:16px 16px 14px; min-width:0; box-shadow:inset 0 3px 0 var(--bu-accent), var(--bu-shadow); }
.billing-usage .bu-card .bu-label { font-family:var(--bu-body); font-size:11px; line-height:1.4; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--bu-sub); margin:4px 0 8px; }
.billing-usage .bu-main { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; margin:6px 0 12px; font-size:12px; color:var(--bu-sub); }
.billing-usage .bu-count { font-family:var(--bu-heading); font-size:30px; line-height:1.1; font-weight:700; color:var(--bu-brand); letter-spacing:-.02em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.billing-usage .bu-gauge { display:flex; height:8px; border-radius:999px; overflow:hidden; background:var(--bu-soft); box-shadow:inset 0 0 0 1px var(--bu-line); }
.billing-usage .bu-segment { height:100%; flex-shrink:1; }
.billing-usage .bu-available { background:var(--bu-accent); }
.billing-usage .bu-consumed { background:var(--bu-muted); }
.billing-usage .bu-reserved { background:var(--bu-warn); }
.billing-usage .bu-removed { background:var(--bu-line); }
.billing-usage .bu-metrics { display:flex; flex-wrap:wrap; gap:8px 22px; margin:12px 0 8px; font-size:11px; }
.billing-usage .bu-metrics dt { display:flex; align-items:center; gap:6px; color:var(--bu-sub); margin-bottom:2px; }
/* Legend swatches follow the gauge: Used / Counted today, then Reserved, then Expired / removed. */
.billing-usage .bu-metrics dt::before { content:""; flex:none; width:8px; height:8px; border-radius:2px; background:var(--bu-muted); }
.billing-usage .bu-metrics > div:nth-child(2) dt::before { background:var(--bu-warn); }
.billing-usage .bu-metrics > div:nth-child(3) dt::before { background:var(--bu-line); box-shadow:inset 0 0 0 1px var(--bu-muted); }
.billing-usage .bu-metrics dd { margin:0; padding-inline-start:14px; font-size:15px; font-weight:700; color:var(--bu-ink); font-variant-numeric:tabular-nums; }
.billing-usage .bu-chip { display:inline-flex; align-items:center; color:var(--bu-accent-text); background:var(--bu-accent-tint); border-radius:999px; padding:3px 10px; font-size:11px; line-height:1.4; font-weight:600; margin:0 0 6px; }
.billing-usage .bu-sandbox { color:var(--bu-warn); background:var(--bu-warn-bg); box-shadow:inset 0 0 0 1px var(--bu-warn); margin-bottom:12px; }
.billing-usage .bu-note, .billing-usage .bu-updated { color:var(--bu-sub); font-size:12px; line-height:1.55; margin:6px 0 0; overflow-wrap:anywhere; }
.billing-usage > .bu-note { margin-top:12px; }
.billing-usage .bu-bonus { font-size:12px; color:var(--bu-accent-dark); font-weight:600; margin:10px 0 6px; }
.billing-usage .bu-updated { margin-top:16px; padding-top:10px; border-top:1px solid var(--bu-line); font-size:11px; }
.billing-usage .bu-credit-negative { border-color:var(--bu-danger); box-shadow:inset 0 3px 0 var(--bu-danger), var(--bu-shadow); }
.billing-usage .bu-credit-negative .bu-count { color:var(--bu-danger); }
.billing-usage .bu-credit-negative .bu-main + .bu-note { color:var(--bu-danger); font-weight:600; }

/* Debt balance and subscription renewal: a header row (title + value or action) with the details below. */
.billing-usage .bu-money { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:0 0 14px; padding:14px 16px; border:1px solid var(--bu-line); border-radius:var(--bu-radius); background:var(--bu-paper); color:var(--bu-ink); box-shadow:var(--bu-shadow); }
.billing-usage .bu-money h4 { flex:1 1 auto; margin:0; font-size:14px; }
.billing-usage .bu-money-value { display:block; flex:none; font-family:var(--bu-heading); font-size:22px; line-height:1.2; font-weight:700; color:var(--bu-ink); font-variant-numeric:tabular-nums; }
.billing-usage .bu-money > .bu-note, .billing-usage .bu-money > .bu-subscriptions { flex:1 1 100%; margin:0; }
.billing-usage .bu-grid + .bu-money { margin-top:14px; }
.billing-usage .bu-money-debt { background:var(--bu-danger-bg); border-color:var(--bu-danger); border-inline-start:3px solid var(--bu-danger); color:var(--bu-danger); }
.billing-usage .bu-money-debt h4, .billing-usage .bu-money-debt .bu-money-value { color:var(--bu-danger); }
.billing-usage .bu-money-debt .bu-money-value { font-size:26px; }
.billing-usage .bu-money-debt > .bu-note { color:var(--bu-ink); }
.billing-usage .bu-money-debt > .bu-refresh { margin-top:6px; background:var(--bu-danger); border-color:var(--bu-danger); color:var(--bu-paper); }
.billing-usage .bu-money-debt > .bu-refresh:hover { background:var(--bu-ink); border-color:var(--bu-ink); }
.billing-usage .bu-subscription { margin-top:10px; padding-top:10px; border-top:1px solid var(--bu-line); }
.billing-usage .bu-subscription h4 { margin:0 0 2px; }
.billing-usage .bu-subscription .bu-refresh { margin:8px 0 0; margin-inline-end:8px; }
.billing-usage .bu-subscriptions[aria-live] > .bu-note:only-child { margin-top:8px; }
@media (max-width:480px) {
  .billing-usage { padding:14px; border-radius:calc(var(--bu-radius) + 2px); }
  .billing-usage .bu-top { gap:8px; }
  .billing-usage h3 { font-size:15px; }
  .billing-usage .bu-card { padding:14px; }
  .billing-usage .bu-count { font-size:26px; }
  .billing-usage .bu-money { padding:12px 14px; }
}

/* ---- Plans ---- */
.billing-plans { font-family:var(--bu-body); font-size:13px; line-height:1.5; color:var(--bu-ink); text-align:start; }
.billing-plans * { box-sizing:border-box; }
.billing-plans .bp-header { margin-bottom:6px; }
.billing-plans .bp-header h3 { margin:0 0 4px; font-family:var(--bu-heading); font-size:24px; line-height:1.2; font-weight:700; letter-spacing:-.01em; color:var(--bu-ink); }
.billing-plans .bp-header p { margin:0 0 12px; }
.billing-plans p { line-height:1.6; font-size:13px; color:var(--bu-sub); }
.billing-plans .bp-controls { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; }
.billing-plans .bp-audience button { min-width:110px; }
.billing-plans .bp-audience-description { margin:2px 0 14px; }
.billing-plans .bp-toggle { display:inline-flex; border:1px solid var(--bu-line); border-radius:calc(var(--bu-radius) + 4px); padding:4px; gap:4px; margin:8px 0; background:var(--bu-soft); }
.billing-plans .bp-toggle button { min-height:38px; font:600 13px/1.2 var(--bu-body); color:var(--bu-ink); background:transparent; border:0; border-radius:var(--bu-radius); padding:9px 18px; cursor:pointer; transition:background-color .15s ease, color .15s ease; }
.billing-plans .bp-toggle button:hover { color:var(--bu-ink); background:var(--bu-paper); }
.billing-plans .bp-toggle button[aria-pressed="true"] { color:var(--bu-paper); background:var(--bu-brand); box-shadow:0 1px 3px rgba(15, 23, 42, .18); }
.billing-plans .bp-toggle button:focus-visible, .billing-plans .bp-button:focus-visible, .billing-plans .bp-checkout-phone input:focus-visible { outline:3px solid var(--bu-focus); outline-offset:2px; }

/* Notices: information by default; debt and errors are red, unavailable or expired states amber. */
.billing-plans .bp-notice, .billing-plans .bp-offer { position:relative; margin:10px 0; padding:12px 15px; padding-inline-start:40px; background:var(--bu-bg); color:var(--bu-ink); border:1px solid var(--bu-line); border-radius:var(--bu-radius); overflow-wrap:anywhere; }
.billing-plans .bp-notice::before { content:""; position:absolute; inset-inline-start:14px; top:15px; width:16px; height:16px; color:var(--bu-brand); background:currentColor; -webkit-mask:var(--bu-icon-info) center / 16px 16px no-repeat; mask:var(--bu-icon-info) center / 16px 16px no-repeat; opacity:.85; }
.billing-plans section.bp-notice { padding:16px 18px; padding-inline-start:44px; background:var(--bu-danger-bg); border-color:var(--bu-danger); border-inline-start:3px solid var(--bu-danger); }
.billing-plans section.bp-notice::before { top:19px; inset-inline-start:16px; color:var(--bu-danger); -webkit-mask-image:var(--bu-icon-alert); mask-image:var(--bu-icon-alert); }
.billing-plans section.bp-notice h4 { margin:0 0 2px; font-family:var(--bu-heading); font-size:15px; color:var(--bu-danger); }
.billing-plans section.bp-notice p { margin:4px 0; color:var(--bu-ink); }
.billing-plans section.bp-notice p:first-of-type { font-size:15px; font-weight:700; color:var(--bu-danger); font-variant-numeric:tabular-nums; }
.billing-plans section.bp-notice .bp-button { width:auto; margin:10px 0 0; margin-inline-end:8px; }
.billing-plans section.bp-notice button.bp-button:first-of-type:enabled { background:var(--bu-danger); border-color:var(--bu-danger); color:var(--bu-paper); }
.billing-plans section.bp-notice button.bp-button:first-of-type:enabled:hover { background:var(--bu-ink); border-color:var(--bu-ink); }
.billing-plans > p.bp-notice:has(+ button.bp-button), .billing-plans .bp-checkout > h3 + .bp-notice { background:var(--bu-danger-bg); color:var(--bu-danger); border-color:var(--bu-danger); }
.billing-plans > p.bp-notice:has(+ button.bp-button)::before, .billing-plans .bp-checkout > h3 + .bp-notice::before { color:var(--bu-danger); -webkit-mask-image:var(--bu-icon-alert); mask-image:var(--bu-icon-alert); }
/* A second consecutive checkout notice is the expired-quote / review warning (the first states the payment status). */
.billing-plans .bp-checkout > .bp-notice + .bp-notice { background:var(--bu-warn-bg); border-color:var(--bu-warn); }
.billing-plans .bp-checkout > .bp-notice + .bp-notice::before { color:var(--bu-warn); -webkit-mask-image:var(--bu-icon-alert); mask-image:var(--bu-icon-alert); }
.billing-plans .bp-offer { background:var(--bu-accent-tint); color:var(--bu-accent-text); border:1px dashed var(--bu-accent); padding-inline-start:15px; font-weight:500; }
.billing-plans .bp-offer-badge { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; margin:10px 0 2px; background:var(--bu-accent-dark); color:var(--bu-paper); border-radius:999px; font-size:12px; line-height:1.4; font-weight:700; letter-spacing:.01em; }
.billing-plans .bp-offer-badge::before { content:""; flex:none; width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.85; }

/* Plan cards */
.billing-plans .bp-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:16px; margin:18px 0; }
.billing-plans .bp-card { position:relative; display:flex; flex-direction:column; min-width:0; padding:22px 20px 20px; background:var(--bu-paper); border:1px solid var(--bu-line); border-radius:calc(var(--bu-radius) + 4px); box-shadow:inset 0 4px 0 var(--bu-accent), var(--bu-shadow); transition:box-shadow .15s ease, border-color .15s ease; }
.billing-plans .bp-card:hover { box-shadow:inset 0 4px 0 var(--bu-accent), 0 12px 28px rgba(15, 23, 42, .08); }
.billing-plans .bp-card:has(> .bp-current) { border-color:var(--bu-brand); box-shadow:inset 0 4px 0 var(--bu-brand), 0 0 0 1px var(--bu-brand), var(--bu-shadow); }
.billing-plans .bp-card h4 { font-family:var(--bu-heading); font-size:20px; line-height:1.25; font-weight:700; color:var(--bu-ink); margin:6px 0 12px; overflow-wrap:anywhere; }
.billing-plans .bp-channel { align-self:flex-start; font-size:11px; line-height:1.4; letter-spacing:.06em; text-transform:uppercase; color:var(--bu-accent-dark); font-weight:700; }
.billing-plans .bp-price { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px; color:var(--bu-sub); font-size:13px; }
.billing-plans .bp-price strong { font-family:var(--bu-heading); color:var(--bu-brand); font-size:34px; line-height:1.1; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.billing-plans .bp-allowances { padding:14px 0 0; padding-inline-start:18px; margin:16px 0 18px; border-top:1px solid var(--bu-line); font-size:13px; line-height:1.5; color:var(--bu-ink); flex:1; }
.billing-plans .bp-allowances, .billing-plans .bp-allowances > li { list-style:disc outside; }
.billing-plans .bp-allowances li { margin:0 0 7px; padding-inline-start:2px; }
.billing-plans .bp-allowances li::marker { color:var(--bu-accent); }
.billing-plans .bp-discount, .billing-plans .bp-current { color:var(--bu-accent-dark); font-weight:600; margin:8px 0 0; }
.billing-plans .bp-current { display:flex; align-items:center; gap:8px; margin:0 0 10px; color:var(--bu-brand); font-weight:700; }
.billing-plans .bp-current::before { content:""; flex:none; width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px var(--bu-tint); }
.billing-plans .bp-small { font-size:12px; }
.billing-plans .bp-card .bp-small { margin:0 0 10px; }
.billing-plans .bp-lower-tier { background:var(--bu-soft); border-color:var(--bu-line); box-shadow:inset 0 4px 0 var(--bu-muted); }
.billing-plans .bp-lower-tier h4, .billing-plans .bp-lower-tier .bp-price strong { color:var(--bu-sub); }
.billing-plans .bp-lower-tier > .bp-small:first-child { margin:-18px -20px 14px; padding:7px 20px; background:var(--bu-line); color:var(--bu-ink); font-size:11px; line-height:1.45; font-weight:600; }

/* Buttons: the card call to action is filled; other plan actions are outlined. Disabled stays visible. */
.billing-plans .bp-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:42px; padding:10px 18px; font:600 13px/1.3 var(--bu-body); text-align:center; text-decoration:none; border:1px solid var(--bu-line); border-radius:var(--bu-radius); background:var(--bu-paper); color:var(--bu-brand); cursor:pointer; transition:background-color .15s ease, border-color .15s ease, color .15s ease; }
.billing-plans a.bp-button, .billing-plans button.bp-button:enabled { border-color:var(--bu-brand); }
.billing-plans a.bp-button:hover, .billing-plans button.bp-button:enabled:hover { background:var(--bu-tint); }
.billing-plans .bp-card a.bp-button, .billing-plans .bp-card button.bp-button:enabled, .billing-plans .bp-checkout > a.bp-button, .billing-plans .bp-checkout > button.bp-button:first-of-type:enabled { background:var(--bu-brand); color:var(--bu-paper); }
.billing-plans .bp-card a.bp-button:hover, .billing-plans .bp-card button.bp-button:enabled:hover, .billing-plans .bp-checkout > a.bp-button:hover, .billing-plans .bp-checkout > button.bp-button:first-of-type:enabled:hover { background:var(--bu-brand-dark); border-color:var(--bu-brand-dark); }
.billing-plans .bp-card .bp-button + .bp-button { margin-top:8px; }
.billing-plans .bp-button:disabled { cursor:default; color:#64748b; background:#f1f5f9; }
.billing-plans > .bp-button { width:auto; margin:4px 0 6px; }
[data-billing-plans]:not(.billing-plans), .billing-plans:not(:has(*)) { font-family:var(--bu-body); color:var(--bu-sub); text-align:center; padding-block:56px; }

/* Checkout review */
.billing-plans .bp-checkout { max-width:680px; margin:16px auto 24px; padding:28px; border:1px solid var(--bu-line); border-radius:calc(var(--bu-radius) + 8px); background:var(--bu-paper); box-shadow:inset 0 4px 0 var(--bu-accent), 0 16px 40px rgba(15, 23, 42, .08); }
.billing-plans .bp-checkout h3 { margin:0 0 12px; font-family:var(--bu-heading); font-size:22px; line-height:1.25; color:var(--bu-ink); }
.billing-plans .bp-checkout h4 { margin:16px 0 0; font-family:var(--bu-heading); font-size:17px; color:var(--bu-ink); overflow-wrap:anywhere; }
.billing-plans .bp-checkout h4 + p { margin:2px 0 0; }
.billing-plans .bp-checkout-lines { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; margin:16px 0; border:1px solid var(--bu-line); border-radius:var(--bu-radius); overflow:hidden; font-size:13px; }
.billing-plans .bp-checkout-lines dt, .billing-plans .bp-checkout-lines dd { padding:9px 14px; border-top:1px solid var(--bu-line); }
.billing-plans .bp-checkout-lines dt:first-of-type, .billing-plans .bp-checkout-lines dd:first-of-type { border-top:0; }
.billing-plans .bp-checkout-lines dt:nth-of-type(even), .billing-plans .bp-checkout-lines dd:nth-of-type(even) { background:var(--bu-bg); }
.billing-plans .bp-checkout-lines dt { color:var(--bu-sub); }
.billing-plans .bp-checkout-lines dd { margin:0; min-width:0; font-weight:650; text-align:end; color:var(--bu-ink); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.billing-plans .bp-checkout-lines dt:last-of-type, .billing-plans .bp-checkout-lines dd:last-of-type { padding-block:12px; background:var(--bu-tint); border-top:1px solid var(--bu-brand); font-size:17px; font-weight:700; color:var(--bu-ink); }
.billing-plans .bp-checkout-lines dt:last-of-type { font-family:var(--bu-heading); }
.billing-plans .bp-checkout-phone { display:flex; flex-direction:column; gap:6px; margin:18px 0 14px; font-size:13px; font-weight:600; color:var(--bu-ink); }
.billing-plans .bp-checkout-phone input { min-height:44px; padding:10px 12px; border:1px solid var(--bu-muted); border-radius:var(--bu-radius); background:var(--bu-paper); color:var(--bu-ink); font:inherit; font-weight:400; }
.billing-plans .bp-checkout > .bp-button { display:inline-flex; width:auto; margin:6px 0; margin-inline-end:10px; text-decoration:none; }
.billing-plans .bp-checkout > a.bp-button ~ button.bp-button:enabled { background:var(--bu-paper); color:var(--bu-brand); border-color:var(--bu-brand); }
.billing-plans .bp-checkout > a.bp-button ~ button.bp-button:enabled:hover { background:var(--bu-tint); }
.billing-plans .bp-checkout > button.bp-button:last-of-type:not(:first-of-type):enabled { background:transparent; color:var(--bu-sub); border-color:var(--bu-line); }
.billing-plans .bp-checkout > button.bp-button:last-of-type:not(:first-of-type):enabled:hover { background:var(--bu-soft); color:var(--bu-ink); }
.billing-plans .bp-checkout > .bp-small { margin:8px 0; }
.billing-plans .bp-checkout > .bp-notice { margin:12px 0; }
@media (max-width:600px) {
  .billing-plans .bp-checkout { padding:18px; border-radius:calc(var(--bu-radius) + 4px); }
  .billing-plans .bp-checkout-lines { font-size:13px; }
  .billing-plans .bp-checkout-lines dt, .billing-plans .bp-checkout-lines dd { padding:8px 10px; }
  .billing-plans .bp-checkout-lines dt:last-of-type, .billing-plans .bp-checkout-lines dd:last-of-type { font-size:15px; }
  .billing-plans .bp-checkout > .bp-button { width:100%; margin-inline-end:0; }
  .billing-plans .bp-controls { align-items:stretch; }
  .billing-plans .bp-toggle { display:flex; width:100%; }
  .billing-plans .bp-toggle button { flex:1; min-width:0; padding-inline:10px; }
}
@media (max-width:480px) { .billing-plans .bp-card { padding:18px 16px 16px; } .billing-plans .bp-lower-tier > .bp-small:first-child { margin:-14px -16px 12px; padding-inline:16px; } .billing-plans .bp-header h3 { font-size:21px; } }
.billing-plans .bp-notice, .billing-usage .bu-notice { overflow-wrap:anywhere; }

/* ---- CLGS host: Settings → Billing and the Plans window ---- */
/* The CLGS catalog exceeds the retired four-card modal's height. */
#subscriptionPlansModal .modal:has([data-billing-plans]) { max-height:92vh; overflow-y:auto; }
@media(max-width:600px) {
    #subscriptionPlansModal [data-billing-plans] { padding:16px !important; }
    #settingsModal:has([data-billing-usage]) .tabbed-settings-container { flex-direction:column; }
    #settingsModal:has([data-billing-usage]) .settings-sidebar { width:100%; flex-shrink:0; display:flex; flex-direction:row; overflow-x:auto; overflow-y:hidden; border-right:0; border-bottom:1px solid var(--bt-line, #dce4ee); padding:4px; max-height:64px; }
    #settingsModal:has([data-billing-usage]) .settings-sidebar .tab-btn { width:auto; white-space:nowrap; }
    #settingsModal:has([data-billing-usage]) .settings-content { padding:14px; min-width:0; min-height:0; }
    #settingsModal:has([data-billing-usage]) .setting-row { flex-wrap:wrap; }
    #settingsModal:has([data-billing-usage]) .setting-row input { max-width:100%; }
}
/* Plans own the viewport; the workspace stays under a dimmed backdrop. */
#clgsWorkspace .clgs-header-actions > .clgs-header-plans { background:#fff; color:#173e68; border-color:#fff; font-weight:700; }
.clgs-billing-actions { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:0 0 16px; }
.clgs-billing-actions .setting-tab-header { margin:0; font-size:18px; }
.clgs-billing-actions button { flex-shrink:0; min-height:38px; padding:9px 18px; border:1px solid var(--bt-brand, #1A365D); border-radius:var(--bt-radius, 8px); background:var(--bt-brand, #1A365D); color:var(--bt-paper, #fff); font:600 13px/1.3 var(--bt-body, Poppins, Arial, sans-serif); cursor:pointer; box-shadow:0 1px 2px rgba(15, 23, 42, .12); }
.clgs-billing-actions button:hover { background:var(--bt-brand-dark, #0F172A); border-color:var(--bt-brand-dark, #0F172A); }
.clgs-billing-actions button:focus-visible { outline:3px solid var(--bt-focus, #38BDF8); outline-offset:2px; }
#billingTab [data-billing-usage] { margin-bottom:24px; }
#settingsModal:has(#billingTab.active) #saveSettingsOK { display:none !important; }
#billingTab > .settings-container { padding:0; background:transparent; }
@media(min-width:900px) { #settingsModal:has(#billingTab.active) > .modal { max-width:1120px !important; width:calc(100vw - 48px) !important; } }
#subscriptionPlansModal.active:has([data-billing-plans]),
#boltSettingsModal.active:has(#boltTabPane-plans.active) { background:rgba(9,18,31,.76); backdrop-filter:blur(8px); z-index:1000010; }
#subscriptionPlansModal .modal:has([data-billing-plans]),
#boltSettingsModal:has(#boltTabPane-plans.active) > .modal,
#nestAccountDialog[open]:has(#nestTabPane-plans.active) {
    width:calc(100vw - 32px) !important; max-width:none !important;
    height:calc(100dvh - 32px); max-height:calc(100dvh - 32px) !important;
    border-radius:18px !important; margin:auto; display:flex; flex-direction:column;
    overflow:hidden; box-shadow:0 28px 100px rgba(0,0,0,.35); background:var(--bt-paper, #fff);
}
#subscriptionPlansModal .subscription-modal-header { flex-shrink:0; }
#subscriptionPlansModal .modal:has([data-billing-plans]) { padding:0; }
#subscriptionPlansModal:has([data-billing-plans]) .subscription-modal-header { padding:18px 64px; text-align:center; background:var(--bt-brand, #1A365D); border-bottom:3px solid var(--bt-accent, #7D9B5E); }
#subscriptionPlansModal:has([data-billing-plans]) .subscription-modal-header h2 { margin:0 0 2px; font-family:var(--bt-heading, Montserrat, Arial, sans-serif); font-size:22px; font-weight:700; letter-spacing:-.01em; color:var(--bt-paper, #fff); }
#subscriptionPlansModal:has([data-billing-plans]) .subscription-modal-header p { font-family:var(--bt-body, Poppins, Arial, sans-serif); font-size:13px; color:var(--bt-paper, #fff); opacity:.82; }
#subscriptionPlansModal:has([data-billing-plans]) .subscription-close-btn { top:50%; right:16px; width:40px; height:40px; margin-top:-20px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; color:var(--bt-paper, #fff); opacity:.85; }
#subscriptionPlansModal:has([data-billing-plans]) .subscription-close-btn:hover { opacity:1; color:var(--bt-paper, #fff); background:rgba(255,255,255,.12); }
#subscriptionPlansModal:has([data-billing-plans]) .subscription-close-btn:focus-visible { opacity:1; outline:3px solid var(--bt-focus, #38BDF8); outline-offset:1px; }
#subscriptionPlansModal [data-billing-plans] { flex:1; min-height:0; overflow-y:auto; padding:28px max(36px, calc((100% - 1240px) / 2)) !important; }
#boltSettingsModal:has(#boltTabPane-plans.active) > .modal > div:first-child,
#boltSettingsModal:has(#boltTabPane-plans.active) .bolt-modal-tabs { flex-shrink:0; }
#boltSettingsModal:has(#boltTabPane-plans.active) #boltTabPane-plans { padding:28px max(36px, calc((100% - 1240px) / 2)); }
#nestAccountDialog:has(#nestTabPane-plans.active)::backdrop { background:rgba(9,18,31,.76); backdrop-filter:blur(8px); }
#nestAccountDialog:has(#nestTabPane-plans.active) > .modal-head,
#nestAccountDialog:has(#nestTabPane-plans.active) > .bolt-modal-tabs,
#nestAccountDialog:has(#nestTabPane-plans.active) > .modal-foot { flex-shrink:0; }
#nestAccountDialog:has(#nestTabPane-plans.active) > .modal-body { flex:1; min-height:0; max-height:none; padding:28px max(36px, calc((100% - 1240px) / 2)); }
body:has(#subscriptionPlansModal.active), body:has(#boltSettingsModal.active #boltTabPane-plans.active), body:has(#nestAccountDialog[open] #nestTabPane-plans.active) { overflow:hidden; }
@media(max-width:600px) {
    #subscriptionPlansModal .modal:has([data-billing-plans]),
    #boltSettingsModal:has(#boltTabPane-plans.active) > .modal,
    #nestAccountDialog[open]:has(#nestTabPane-plans.active) { width:calc(100vw - 12px) !important; height:calc(100dvh - 12px); max-height:calc(100dvh - 12px) !important; border-radius:12px !important; }
    #subscriptionPlansModal [data-billing-plans],
    #boltSettingsModal:has(#boltTabPane-plans.active) #boltTabPane-plans,
    #nestAccountDialog:has(#nestTabPane-plans.active) > .modal-body { padding:18px !important; }
    #subscriptionPlansModal .subscription-modal-header { padding:20px 44px 16px 18px; }
    #subscriptionPlansModal:has([data-billing-plans]) .subscription-modal-header { padding:14px 56px; }
    #subscriptionPlansModal .subscription-modal-header h2 { font-size:22px; }
    #subscriptionPlansModal:has([data-billing-plans]) .subscription-modal-header h2 { font-size:19px; }
    #subscriptionPlansModal .subscription-modal-header p { font-size:12px; }
    #subscriptionPlansModal:has([data-billing-plans]) .subscription-close-btn { right:8px; }
}
[data-billing-personal-only][hidden] { display:none!important; }
@media (prefers-reduced-motion: reduce) {
  .billing-usage .bu-skeleton, .billing-usage[data-usage-state="loading"] .bu-state::before { animation:none; }
  .billing-usage .bu-refresh, .billing-plans .bp-toggle button, .billing-plans .bp-card, .billing-plans .bp-button { transition:none; }
}

/* Refinements for browsers with color-mix(); without it the plain values above apply. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .billing-usage, .billing-plans, [data-billing-usage], [data-billing-plans] { --bu-accent-text: color-mix(in srgb, var(--bu-accent-dark) 80%, var(--bu-ink)); }
  .billing-usage section.bu-notice { border-color:color-mix(in srgb, var(--bu-warn) 30%, transparent); border-inline-start-color:var(--bu-warn); }
  .billing-plans .bp-checkout > .bp-notice + .bp-notice { border-color:color-mix(in srgb, var(--bu-warn) 30%, transparent); }
  .billing-usage[data-usage-state="unavailable"] .bu-state, .billing-plans section.bp-notice,
  .billing-plans > p.bp-notice:has(+ button.bp-button), .billing-plans .bp-checkout > h3 + .bp-notice { border-color:color-mix(in srgb, var(--bu-danger) 30%, transparent); }
  .billing-plans section.bp-notice { border-inline-start-color:var(--bu-danger); }
  .billing-usage .bu-credit-negative { border-color:color-mix(in srgb, var(--bu-danger) 35%, var(--bu-line)); }
  .billing-usage .bu-money-debt { border-color:color-mix(in srgb, var(--bu-danger) 35%, transparent); border-inline-start-color:var(--bu-danger); }
  .billing-usage .bu-reserved { background:repeating-linear-gradient(135deg, var(--bu-warn) 0 3px, color-mix(in srgb, var(--bu-warn) 55%, var(--bu-paper)) 3px 6px); }
  #subscriptionPlansModal.active:has([data-billing-plans]),
  #boltSettingsModal.active:has(#boltTabPane-plans.active) { background:color-mix(in srgb, var(--bt-ink, #09121F) 80%, transparent); }
}

/* Team billing uses the same owned stylesheet as the plan and usage widgets. */
#seat-upgrade-form .toolbar label { min-width:0; max-width:100%; }
#seat-upgrade-plan { width:100%; max-width:100%; }
#paid-seat-breakdown, #seat-upgrade-lines { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px 18px; }
#paid-seat-breakdown dt, #seat-upgrade-lines dt { color:#526980; }
#paid-seat-breakdown dd, #seat-upgrade-lines dd { margin:0; font-weight:650; text-align:right; overflow-wrap:anywhere; }
#paid-seat-status, #seat-upgrade-status, #seat-upgrade-payment-status { overflow-wrap:anywhere; }
@media(max-width:480px) { #seat-upgrade-form .toolbar label { width:100%; } #paid-seat-breakdown, #seat-upgrade-lines { gap:10px; font-size:13px; } }

/* CLGS keyboard focus (owner, 2026-11-02): the sky ring with a thin navy ring inside it, so it shows on white and on
 * navy alike. Bolt Cut and Nest keep their own cobalt / teal ring. */
:is([data-billing-usage="app"], [data-billing-plans="app"]) :is(.bu-refresh, .bu-account-select, .bp-toggle button, .bp-button, .bp-checkout-phone input):focus-visible,
.clgs-billing-actions button:focus-visible { box-shadow:0 0 0 2px #1A365D; }