/* Plan and billing (/billing), after the Homla "Usage and billing" mockup
   (05-production/screens/pages-apps/P-usage-billing--billing.html) without
   the usage meters. Tokens from homla.css, light and dark. */
.hb-side-usage { color: inherit; text-decoration: none; }
.hb-side-usage:hover { border-color: var(--line-control); background: var(--bg-hover); text-decoration: none; }

.hb #hb-root { margin-top: var(--s-6); min-width: 0; }
.hb-banners { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-5); }
.hb-banners .h-banner { align-items: center; }
.hb-banners .h-banner__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hb-banners .h-banner .h-btn { flex: none; }
.hb-loading { display: flex; flex-direction: column; gap: var(--s-3); max-width: 560px; }

/* Current plan: one bordered panel, two halves split by a hairline. */
.hb-panel { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-surface); min-width: 0; }
.hb-panel > section { padding: var(--s-5); min-width: 0; }
.hb-panel--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hb-panel--2 > section + section { border-left: 1px solid var(--line); }
.hb-panel__title { font: 600 var(--fs-14)/var(--lh-snug) var(--font-sans); margin: 0; }
.hb-current__head { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.hb-current__price { margin: var(--s-1) 0 0; }
.hb-kv { margin: var(--s-4) 0 0; }
.hb-kv dd { min-width: 0; overflow-wrap: anywhere; }
.hb-actions { gap: var(--s-2); margin-top: var(--s-4); }
.hb-actions .h-btn .h-i, .hb-sec__head .h-btn .h-i { width: 14px; height: 14px; }
.hb-seatbox { display: flex; flex-direction: column; gap: var(--s-2); }
.hb-seatbox .h-caption { margin: 0; }
.hb-addon { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s-1); }
.hb-member__line { margin: 0 0 var(--s-1); font-size: var(--fs-15, 15px); }

/* Sections split by hairlines, like the mockup's x-sec. */
.hb-sec { padding: var(--s-6) 0 0; margin-top: var(--s-6); border-top: 1px solid var(--line); min-width: 0; }
.hb-sec__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.hb-sec__title { font: 500 var(--fs-17)/var(--lh-snug) var(--font-sans); letter-spacing: -.01em; margin: 0; }
.hb-sec__head .h-seg { flex-wrap: wrap; }

.hb-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); align-items: stretch; }
.hb-plan { position: relative; display: flex; flex-direction: column; min-width: 0; padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-surface); }
.hb-plan--featured { box-shadow: inset 0 3px 0 var(--brand); }
.hb-plan--current { border-color: var(--text); }
.hb-plan__top { min-height: 112px; }
.hb-plan__name { margin: 0; font: 500 var(--fs-17)/var(--lh-snug) var(--font-sans); }
.hb-plan__price { margin-top: var(--s-3); font: 300 32px/1 var(--font-display); letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; }
.hb-plan__price small { font: 400 var(--fs-13)/1.4 var(--font-sans); color: var(--text-2); letter-spacing: 0; }
.hb-plan__seat { margin-top: var(--s-2); color: var(--text-2); font-size: var(--fs-13); }
.hb-plan__badge { position: absolute; top: var(--s-4); right: var(--s-4); }
.hb-plan__features { display: flex; flex-direction: column; gap: 9px; margin: var(--s-4) 0 var(--s-5); padding: var(--s-4) 0 0; border-top: 1px solid var(--line); list-style: none; font-size: var(--fs-13); }
.hb-plan__features li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 7px; }
.hb-plan__features .h-i { width: 15px; height: 15px; margin-top: 2px; color: var(--success, var(--ok)); }
.hb-plan__features li.is-off { color: var(--text-2); }
.hb-plan__features li.is-off .h-i { color: var(--text-2); }
.hb-plan > .h-btn { margin-top: auto; justify-content: center; }

.hb-compare { margin-top: var(--s-4); }
.hb-table th[scope="row"] { font-weight: 400; color: var(--text-2); white-space: nowrap; }
.hb-table th, .hb-table td { text-align: left; }
.hb-table .is-current { background: var(--bg-sunken); }
.hb-table thead .is-current { color: var(--text); }
.hb-empty { margin: 0; }

/* Plan change modal. */
.hb-stepper { display: inline-flex; align-items: center; gap: var(--s-2); }
.hb-stepper .h-input { width: 84px; text-align: center; -moz-appearance: textfield; }
.hb-stepper .h-input::-webkit-inner-spin-button, .hb-stepper .h-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.hb-sum { display: flex; flex-direction: column; gap: 6px; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-sunken); font-size: var(--fs-13); }
.hb-sum__total { padding-top: 6px; border-top: 1px solid var(--line); }
.hb-sum .h-error-text { margin: 4px 0 0; }

@media (max-width: 1120px) { .hb-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .hb-panel--2 { grid-template-columns: minmax(0, 1fr); }
  .hb-panel--2 > section + section { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .hb-plans { grid-template-columns: minmax(0, 1fr); }
  .hb-plan__top { min-height: 0; }
  .hb-banners .h-banner { flex-wrap: wrap; }
  .hb-table th[scope="row"] { white-space: normal; }
}