/* views-business-billing.css — the Business area (owner only): Billing &
   insights (#/business/billing) and the price book (#/business/price-book).
   Reuses tokens.css + shared components; everything prefixed .bb-* except the
   page roots and the .business-tabs sub-nav. */

.business-billing,
.business-price-book {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--s5) var(--s4) var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.bb-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}
.bb-title {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-1);
  margin: 0 0 var(--s2);
}
.bb-sub {
  display: block;
  font-size: 13px;
  color: var(--text-2);
  max-width: 70ch;
  line-height: 1.5;
}

.bb-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s3);
}

.bb-steps {
  margin: 0;
  padding-left: 1.4em;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
}

.bb-finding {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  font-size: 13px;
  line-height: 1.45;
  max-width: 60ch;
}
.bb-finding-fix { color: var(--text-2); }

/* components.css keeps .dt cells on one line at 761–1099 px (tablet rule), and
   the spans here inherit it: the explanation and the fix then ran past their
   60ch box over the next column (measured at 1024 px). They are prose, so they
   wrap inside their column; the short cells keep the tablet rule. */
.bb-finding { white-space: normal; }

/* Business sub-nav (components/business-tabs.js): the shared segmented control,
   rendered as links. Scrolls inside itself if the strip ever outgrows a phone. */
.business-tabs {
  align-self: flex-start;
  max-width: 100%;
  overflow-x: auto;
}
.business-tabs .seg-btn {
  text-decoration: none;
  white-space: nowrap;
}
/* The price book's own top margin is for its place under the Studio; here the
   page's flex gap spaces it. */
.business-price-book .price-book { margin-top: 0; }