/* Billing (pages/billing.rs, pages/billing_checkout.rs; docs/BILLING.md). */

.bl-page { display: flex; flex-direction: column; gap: var(--space-6); }
.bl-h2 { margin: 0; font: 700 20px/28px var(--font-display); color: var(--ink); }
.bl-h3 { margin: 0 0 var(--space-2); font: 600 14px/20px var(--font-sans); color: var(--ink); }
.bl-muted { margin: 0; display: block; font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.bl-section { display: flex; flex-direction: column; gap: var(--space-3); }
.bl-section__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.bl-badge { display: inline-block; margin-left: var(--space-2); padding: 1px 8px; border-radius: var(--radius-pill);
  background: var(--patched-wash); color: var(--patched); font: 600 12px/18px var(--font-sans); vertical-align: middle; }
.bl-badge--warn { background: var(--warn-wash); color: var(--warn-text); }

.bl-current { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-md); }
.bl-current__plan { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.bl-current__name { margin: 0; font: 600 18px/26px var(--font-sans); color: var(--ink); }
.bl-current__extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.bl-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.bl-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: var(--space-1);
  font: 400 14px/20px var(--font-sans); color: var(--ink); }
.bl-list li { display: flex; justify-content: space-between; gap: var(--space-3); }

.bl-toggle { display: inline-flex; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-pill); }
.bl-toggle__opt { border: 0; background: none; padding: 4px 14px; border-radius: var(--radius-pill); cursor: pointer;
  font: 600 13px/20px var(--font-sans); color: var(--ink-muted); }
.bl-toggle__opt[aria-checked="true"] { background: var(--grape-wash); color: var(--ink); }
.bl-toggle__opt:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.bl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.bl-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-md); }
.bl-card--current { border-color: var(--grape); }
.bl-card__name { margin: 0; font: 600 16px/24px var(--font-sans); color: var(--ink); }
.bl-card__price { margin: 0; font: 700 28px/36px var(--font-display); color: var(--ink); }
.bl-card__price .bl-muted { display: inline; margin-left: 4px; }
.bl-card__desc { margin: 0; flex: 1; font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.bl-card__action { margin-top: var(--space-2); }

.bl-team { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 760px) { .bl-team { grid-template-columns: minmax(0, 1fr); } }
.bl-team__side { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-md); }
.bl-quote__total { margin: 0; font: 400 14px/20px var(--font-sans); color: var(--ink); }
.bl-quote__error { margin: 0; font: 400 13px/20px var(--font-sans); color: var(--danger-text); }
.bl-seat__name { display: block; font: 600 14px/20px var(--font-sans); color: var(--ink); }

.bl-scroll { overflow-x: auto; }
.bl-table { width: 100%; border-collapse: collapse; font: 400 14px/20px var(--font-sans); color: var(--ink); }
.bl-table th, .bl-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.bl-table thead th { font: 600 12px/16px var(--font-sans); color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.bl-filter { min-width: 14em; }

.bl-account__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 760px) { .bl-account__grid { grid-template-columns: minmax(0, 1fr); } }

.bl-test { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--warn-wash);
  color: var(--warn-text); font: 400 13px/20px var(--font-sans); }
/* checkout: order summary beside (desktop) or above (phones) Stripe's
   Embedded Checkout. Stripe sizes its iframe's height itself: the frame
   only gives it the full width, a light card (Stripe's page is light) and
   no clipping or second scrollbar. */
.bl-co { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: var(--space-6); align-items: start; }
.bl-co__summary { order: 2; position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); min-width: 0; }
.bl-co__pay { order: 1; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
@media (max-width: 900px) {
  .bl-co { grid-template-columns: minmax(0, 1fr); }
  .bl-co__summary { order: 0; position: static; }
}
.bl-co__title { margin: 0; font: 700 18px/26px var(--font-display); color: var(--ink); }
.bl-co__lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2);
  font: 400 14px/20px var(--font-sans); color: var(--ink); }
.bl-co__lines li { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.bl-co__label { min-width: 0; overflow-wrap: anywhere; }
.bl-co__lines strong { white-space: nowrap; }
.bl-co__total { margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--border); display: flex; justify-content: space-between;
  gap: var(--space-3); font: 400 14px/22px var(--font-sans); color: var(--ink); }
.bl-co__total strong { font: 700 20px/26px var(--font-display); }
.bl-co__change { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/20px var(--font-sans); color: var(--grape); }
.bl-co__skeleton { padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.bl-co__skeleton-btn { display: block; height: 44px; border-radius: var(--radius-sm); background: var(--surface-raised); }
.bl-checkout { width: 100%; min-height: 360px; overflow: hidden; border-radius: var(--radius-md); background: #fff;
  border: 1px solid var(--border); }
/* mounted while hidden behind the skeleton, shown once Stripe is ready */
.bl-checkout.is-loading { height: 0; min-height: 0; border: 0; }
.bl-checkout[hidden] { display: none; }
.bl-checkout iframe { display: block; width: 100% !important; max-width: 100%; border: 0; }
@media (max-width: 560px) { .bl-checkout { border-radius: var(--radius-sm); } }

.bl-result { display: flex; gap: var(--space-4); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); color: var(--ink); font: 400 14px/22px var(--font-sans); }
.bl-result > i { font-size: 28px; color: var(--warn-text); }
.bl-result--ok > i { color: var(--patched); }
.bl-result p { margin: 0 0 var(--space-3); }
.bl-result__title { font-weight: 600; font-size: 16px; }

/* usage meters and limit notes (ui/limits.rs) */
.bl-limit { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.bl-limit--blocked { color: var(--warn-text); }
.bl-limit__link { font-weight: 600; }
.bl-plan-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: var(--space-2); padding: 0 8px; border-radius: var(--radius-pill);
  background: var(--grape-wash); color: var(--ink); font: 600 12px/20px var(--font-sans); }
.bl-dialog { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 70; max-width: min(420px, calc(100vw - 32px));
  padding: var(--space-4); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop); color: var(--ink); font: 400 14px/22px var(--font-sans); }
.bl-dialog__title { margin: 0 0 var(--space-2); font-weight: 600; }

/* sub-tabs (Overview, Plans, À la carte) */
.bl-panel { display: flex; flex-direction: column; gap: var(--space-6); }

/* plan comparison table (ui/plan_compare.rs; also on the home page) */
.pc { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.pc-tools { display: flex; justify-content: flex-end; }
/* position: the sr-only "Included" spans are absolute; their containing
   block must be inside the scroller or they widen the page on phones */
.pc-scroll { position: relative; overflow: auto; max-height: min(78vh, 960px); border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); overscroll-behavior-x: contain; }
.pc-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pc-table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font: 400 13px/20px var(--font-sans); color: var(--ink); }
.pc-table th, .pc-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.pc-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-raised); font: 600 14px/20px var(--font-sans); }
.pc-table thead th.pc-corner { left: 0; z-index: 3; }
.pc-label { position: sticky; left: 0; z-index: 1; background: var(--surface); font-weight: 400; min-width: 180px; max-width: 260px; }
.pc-label code { font: 500 12px/18px var(--font-mono); }
.pc-help { display: block; margin-top: 2px; font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
.pc-col { min-width: 120px; }
.pc-col--current { background: var(--grape-wash); }
.pc-table thead th.pc-col--current { background: var(--grape-wash); box-shadow: inset 0 3px 0 var(--grape); }
.pc-name { display: block; }
.pc-current { display: inline-block; margin-top: 2px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--grape);
  color: var(--surface); font: 600 11px/18px var(--font-sans); }
.pc-yes { color: var(--patched); }
.pc-no, .pc-seat { color: var(--ink-muted); }
.pc-price { font: 700 18px/24px var(--font-display); }
.pc-per, .pc-from { color: var(--ink-muted); }
.pc-save, .pc-note { display: block; font: 600 12px/16px var(--font-sans); color: var(--patched); }
.pc-note { color: var(--ink-muted); font-weight: 400; }
.pc-seats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pc-seats li { display: flex; flex-wrap: wrap; gap: 0 6px; }
.pc-seats__name { font-weight: 600; }
.pc-group__head th { position: sticky; left: 0; padding: 0; background: var(--surface-raised); }
.pc-group__btn { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2) var(--space-3);
  border: 0; background: none; color: var(--ink); cursor: pointer; text-align: left; font: 600 14px/20px var(--font-sans); }
.pc-group__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.pc-group__btn i { width: 14px; color: var(--ink-muted); }
.pc-group__count { margin-left: auto; font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
.pc-group[hidden] { display: none; }
@media (max-width: 640px) {
  .pc-label { min-width: 128px; max-width: 150px; }
  .pc-col { min-width: 100px; }
  .pc-table th, .pc-table td { padding: var(--space-2); }
}

/* team seats: one card per seat type (slider + stepper), no table */
.bl-seats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.bl-seat { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-md); min-width: 0; }
.bl-seat__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.bl-seat__price { font: 600 14px/20px var(--font-sans); color: var(--ink); }
.bl-seat__controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); }
@media (max-width: 480px) { .bl-seat__controls { grid-template-columns: minmax(0, 1fr); justify-items: start; } }
.bl-seat__note { margin: 0; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.bl-seat__note.is-min { color: var(--warn-text); font-weight: 600; }

/* buying credits (pages/billing_cart.rs): recommendations, goals, every
   service stacked by area, and a cart bar stuck to the bottom */
.bl-shop > .bl-muted { max-width: 72ch; }
.bl-block { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.bl-block__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.bl-block__head .bl-h3 { margin: 0; }
.bl-block__head p { margin: 2px 0 0; font-size: 13px; }
.bl-save { display: inline-block; padding: 0 8px; border-radius: var(--radius-pill); background: var(--grape-wash);
  color: var(--ink); font: 600 12px/20px var(--font-sans); }

/* recommended for you */
.bl-recs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.bl-rec { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.bl-rec.is-in-cart { border-color: var(--fizz); box-shadow: inset 3px 0 0 var(--fizz); }
.bl-rec__what, .bl-rec__offer { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; line-height: 18px; }
.bl-rec__what .bl-badge { margin: 0; align-self: flex-start; }
.bl-rec__name { font: 700 15px/20px var(--font-sans); color: var(--ink); }
.bl-rec__offer strong { font-size: 15px; }
@media (max-width: 720px) { .bl-rec { grid-template-columns: minmax(0, 1fr); } .bl-rec .mc-btn { justify-self: start; } }

/* start with a goal */
.bl-goals { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.bl-goal { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--surface); }
.bl-goal.is-in-cart { border-color: var(--fizz); box-shadow: inset 0 3px 0 var(--fizz); }
.bl-goal__icon { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  background: color-mix(in srgb, var(--fizz) 16%, transparent); color: var(--fizz-text); font-size: 16px; }
.bl-goal__name { margin: 0; font: 700 16px/22px var(--font-display); }
.bl-goal__desc { margin: 0; font-size: 13px; line-height: 18px; }
.bl-goal__items { list-style: none; margin: 0; padding: 0; font: 600 13px/20px var(--font-sans); color: var(--ink); flex: 1; }
.bl-goal__price { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-1) 0 0; }
.bl-goal__price strong { font: 700 20px/26px var(--font-sans); }

/* all services */
.bl-areas { display: flex; flex-direction: column; gap: var(--space-2); }
.bl-area { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.bl-area__sum { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4);
  cursor: pointer; list-style: none; }
.bl-area__sum::-webkit-details-marker { display: none; }
.bl-area__sum:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--radius-md); }
.bl-area__sum .bl-badge { margin: 0; }
.bl-area__name { font: 700 15px/22px var(--font-sans); color: var(--ink); }
.bl-area__sum .bl-muted { font-size: 13px; }
.bl-area__chev { margin-left: auto; color: var(--ink-muted); transition: transform 150ms ease-out; }
.bl-area[open] .bl-area__chev { transform: rotate(180deg); }
.bl-area__tools { display: flex; justify-content: flex-end; padding: 0 var(--space-4) var(--space-2); }
.bl-area .bl-svcs { padding: 0 var(--space-2) var(--space-2); }
.bl-check { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font: 600 13px/20px var(--font-sans); color: var(--ink); }
.bl-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--fizz); cursor: pointer; flex: none; }
.bl-check input:disabled { cursor: not-allowed; }
.bl-check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bl-svcs { list-style: none; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.bl-svc { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 1.5fr) auto; grid-template-areas: "main sizes qty" "main payg payg";
  align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3); border: 1px solid transparent; border-radius: var(--radius-md); }
.bl-svc:hover { background: var(--surface-raised); }
.bl-svc.is-in-cart { border-color: var(--fizz); background: color-mix(in srgb, var(--fizz) 6%, var(--surface)); }
.bl-svc__main { grid-area: main; display: flex; flex-direction: column; gap: 2px; min-width: 0; align-self: start; }
.bl-svc__name { font: 600 14px/20px var(--font-sans); }
.bl-svc__unit, .bl-svc__desc { padding-left: 26px; font-size: 12px; line-height: 16px; margin: 0; }
.bl-svc__sizes { grid-area: sizes; display: flex; flex-wrap: wrap; gap: 6px; }
.bl-size { appearance: none; cursor: pointer; display: inline-flex; flex-direction: column; align-items: flex-start; min-width: 64px;
  padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink);
  font: 400 12px/16px var(--font-sans); position: relative; transition: border-color 120ms ease-out, background-color 120ms ease-out; }
.bl-size:hover { border-color: var(--border-strong); }
.bl-size:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bl-size.is-on { border-color: var(--fizz); background: color-mix(in srgb, var(--fizz) 12%, var(--bg)); box-shadow: inset 0 0 0 1px var(--fizz); }
.bl-size__q { font-weight: 700; font-size: 13px; }
.bl-size__p { color: var(--ink-muted); }
.bl-size.is-on .bl-size__p { color: var(--ink); }
.bl-size__off { position: absolute; top: -8px; right: -6px; padding: 0 5px; border-radius: var(--radius-pill);
  background: var(--fizz); color: var(--on-fizz); font: 700 10px/16px var(--font-sans); }
.bl-size--more { justify-content: center; align-items: center; color: var(--ink-muted); border-style: dashed; }
.bl-svc__qty { grid-area: qty; display: flex; align-items: center; gap: var(--space-3); justify-self: end; }
.bl-svc__total { min-width: 64px; text-align: right; font: 700 15px/20px var(--font-sans); }
.bl-svc__payg { grid-area: payg; display: flex; justify-content: flex-end; }
.bl-svc__payg .bl-badge { margin: 0; }
.bl-link { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; color: var(--grape); font: 500 12px/16px var(--font-sans); text-decoration: underline; }
.bl-link:hover { color: var(--ink); }
.bl-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 960px) {
  .bl-svc { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main main" "sizes sizes" "payg qty"; }
  .bl-svc__payg { justify-content: flex-start; }
}

/* the cart */
.bl-cart { position: sticky; bottom: var(--space-3); z-index: 5; margin-top: var(--space-6);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-pop); }
.bl-cart__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4) var(--space-1); }
.bl-cart__sum { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin-right: auto;
  font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.bl-cart__sum strong { font: 700 18px/24px var(--font-sans); color: var(--ink); }
.bl-cart__sum > i { color: var(--fizz-text); }
.bl-cart__fine { margin: 0; padding: 0 var(--space-4) var(--space-3); font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
.bl-cart__details { border-bottom: 1px solid var(--border); }
.bl-cart__details > summary { cursor: pointer; padding: var(--space-2) var(--space-4); font: 600 13px/20px var(--font-sans); color: var(--ink); }
.bl-cart__details > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.bl-cart__lines { list-style: none; margin: 0; padding: 0 var(--space-4) var(--space-2); max-height: 40vh; overflow-y: auto; }
.bl-cart__line { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--border); }
.bl-cart__what { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: 13px; line-height: 18px; }
.bl-cart__price { font: 600 14px/20px var(--font-sans); }
@media (prefers-reduced-motion: reduce) { .bl-size, .bl-area__chev { transition: none; } }

.pc-seatspan { vertical-align: middle !important; text-align: center; background: var(--surface); border-left: 1px dashed var(--border); }
.pc-seatspan .pc-seat { display: inline-block; max-width: 16ch; font-size: 12px; line-height: 16px; }

/* spending (pages/billing_spending.rs) */
.bl-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.bl-tile .mc-stat__value { font-size: 24px; line-height: 30px; }
@media (max-width: 420px) { .bl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bl-tile { padding: var(--space-3); } }
.bl-spend { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: var(--space-3); align-items: stretch; }
.bl-spend__gauge .mc-gauge { height: 100%; align-content: center; }
@media (max-width: 760px) { .bl-spend { grid-template-columns: minmax(0, 1fr); } }
.bl-spend__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: var(--space-3); }
.bl-card__credit, .price-card__credit { margin: 0; font: 600 13px/18px var(--font-sans); color: var(--patched); }

/* estimator */
.est-box { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-md); min-width: 0; }
.est-box__lead { margin: 0; font: 400 14px/20px var(--font-sans); color: var(--ink); }
.est-box__lead .bl-muted { display: block; }
.est-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.est-row { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.est-row__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.est-row__val { margin-left: auto; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.est-row__rm { min-width: 36px; min-height: 36px; }
.est-add .mc-select { width: 100%; max-width: 360px; }
.price-estimate { width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: var(--space-3); }
.price-estimate .site-h3 { margin: 0; }
.bl-prorate { list-style: none; margin: var(--space-2) 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.bl-prorate__lead { font: 600 16px/24px var(--font-sans); color: var(--ink); }
.bl-prorate__what { margin: 0; color: var(--ink-muted); }
.bl-prorate__lines td.bl-num, .bl-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bl-prorate-note { margin-bottom: var(--space-2); }