/* ==========================================================================
   Bizstim branded pages: the shared stylesheet for every page on layouts/branded.php.

   CONTRACT (stable: never renamed, only added). Tenants write CSS against these names in
   Branding and Colors > CSS FOR THE ONLINE BOOKING PAGES, so a rename breaks their pages.

   Variables, set on :root at zero specificity so a tenant's own  :root { --bz-brand: #123456 }  wins:
     --bz-brand  --bz-primary  --bz-primary-text  --bz-primary-hover  --bz-primary-active  --bz-link-hover
     --bz-accent  --bz-focus  --bz-bg  --bz-surface  --bz-text  --bz-muted  --bz-border  --bz-danger
     --bz-hero-bg  --bz-hero-text  --bz-hero-title  --bz-title
     --bz-font-heading  --bz-font-body  --bz-heading-weight
     --bz-radius  --bz-button-bg  --bz-button-text  --bz-button-radius
     --bz-card-bg  --bz-card-border  --bz-card-shadow
     --bz-content  --bz-content-narrow  --bz-gutter  --bz-section-pad  --bz-footer-bg
   (--bz-hero-bg-hex, --bz-primary-hover-hex, --bz-primary-active-hex, --bz-link-hover-hex and --bz-footer-bg-hex are printed
   by the layout from the brand colour for browsers without color-mix(); not for tenant use.)

   Classes:
     .bz-branded  .bz-page-title  .bz-inner  .bz-inner-narrow  .bz-page-note
     .bz-schedule  .bz-profile  .bz-profile-photo  .bz-profile-avatar  .bz-profile-name  .bz-profile-login
     .bz-schedule-tools  .bz-switch  .bz-session-list  .bz-hide-past  .bz-session-empty
     .bz-session  .bz-session-past  .bz-session-when  .bz-session-date  .bz-session-sep  .bz-session-time
     .bz-session-badge  .bz-session-details  .bz-session-actions  .bz-session-ics
     .bz-topbar  .bz-topbar-contact  .bz-topbar-text  .bz-topbar-main  .bz-topbar-brand  .bz-topbar-logo  .bz-topbar-name  .bz-nav  .bz-nav-list  .bz-nav-link  .bz-footer  .bz-nav-check  .bz-nav-toggle  .bz-nav-bars  .bz-nav-wrap  .bz-nav-blog  .bz-footer-band  .bz-footer-site  .bz-footer-columns  .bz-footer-brand  .bz-footer-tagline  .bz-footer-heading  .bz-footer-nav  .bz-footer-blog  .bz-footer-follow  .bz-footer-social  .bz-social-link  .bz-footer-reviews  .bz-review-link  .bz-footer-bottom  .bz-footer-legal  .bz-footer-legal-links  .bz-credit  .bz-phone  .bz-email  .bz-contact-icon
     .bz-bio  .bz-bio-card  .bz-bio-photo  .bz-bio-name  .bz-bio-position  .bz-bio-skills  .bz-bio-skills-label  .bz-bio-text  .bz-chips  .bz-chip
     .bz-avail  .bz-avail-title  .bz-avail-switch  .bz-avail-btn  .bz-avail-table  .bz-avail-time  .bz-avail-off
     .bz-field  .bz-password  .bz-password-toggle  .bz-eye  .bz-eye-off  .bz-form-note  .bz-form-error  .bz-form-warning  .bz-form-success  .bz-toasts  .bz-toast  .bz-toast-close
     .bz-login  .bz-login-wrap  .bz-login-card  .bz-login-heading  .bz-login-body  .bz-login-pane  .bz-login-help  .bz-username-list  .bz-login-terms  .bz-login-install
     .bz-pay  .bz-pay-grid  .bz-pay-card  .bz-pay-title  .bz-pay-form  .bz-pay-element  .bz-pay-terms  .bz-pay-done  .bz-pay-check
     .bz-invoice  .bz-invoice-head  .bz-invoice-pdf  .bz-invoice-total  .bz-invoice-total-label  .bz-invoice-total-value  .bz-invoice-fee  .bz-invoice-details  .bz-invoice-hint  .bz-invoice-back
     .bz-account  .bz-account-welcome  .bz-account-balance  .bz-account-balance-label  .bz-account-balance-value  .bz-account-owed  .bz-account-subtitle  .bz-account-list  .bz-account-date  .bz-account-amount  .bz-amount  .bz-amount-fee
     .bz-inquiry  .bz-form-switch  .bz-form-switch-btn  .bz-inquiry-grid  .bz-inquiry-card  .bz-inquiry-title  .bz-inquiry-fields  .bz-field-wide  .bz-required  .bz-choices  .bz-hp  .bz-inquiry-actions  .bz-inquiry-done  .bz-inquiry-aside
     .bz-status  .bz-status-head  .bz-status-pill  .bz-status-pending  .bz-status-confirmed  .bz-status-when  .bz-status-sep  .bz-status-problem  .bz-status-grid  .bz-status-card  .bz-status-title  .bz-status-details  .bz-meeting  .bz-meeting-none  .bz-meeting-pass  .bz-confirm  .bz-confirm-actions  .bz-confirm-done  .bz-chat  .bz-chat-list  .bz-msg  .bz-msg-mine  .bz-msg-body  .bz-msg-meta  .bz-msg-system  .bz-chat-empty  .bz-chat-form  .bz-chat-send  .bz-chat-hint  .bz-private  .bz-private-list  .bz-private-empty  .bz-dialog  .bz-dialog-head  .bz-dialog-close  .bz-dialog-body  .bz-dialog-foot  .bz-status-notfound  .bz-status-can-confirm
     .bz-result  .bz-result-card  .bz-result-icon  .bz-result-done  .bz-result-started  .bz-result-skipped  .bz-result-message  .bz-result-event  .bz-result-progress  .bz-result-bar  .bz-result-next  .bz-result-label  .bz-result-next-title  .bz-result-next-date  .bz-result-scores  .bz-result-meter  .bz-result-score  .bz-result-na  .bz-result-foot  .bz-result-action  .bz-result-closure  .bz-result-reflection
     .bz-reflect-card  .bz-reflect-legend  .bz-reflect-stage  .bz-reflect-hint  .bz-reflect-scale  .bz-reflect-opt  .bz-reflect-note  .bz-reflect-submit  .bz-signup-done  .bz-setup-status
     .bz-od-date  .bz-reconcile-card  .bz-reconcile-rule  .bz-review-card  .bz-review-photo  .bz-review-form  .bz-review-label  .bz-review-yesno  .bz-stars  .bz-stars-track  .bz-stars-fill  .bz-stars-value  .bz-review-feedback  .bz-review-back  .bz-ondemand  .bz-ondemand-solo  .bz-ondemand-form  .bz-ondemand-assist  .bz-ondemand-wait
     .bz-booking  .bz-booking-zone  .bz-booking-grid  .bz-booking-form  .bz-booking-times  .bz-booking-avail  .bz-booking-dot  .bz-booking-summary  .bz-booking-block  .bz-booking-block-head  .bz-booking-rules  .bz-booking-empty  .bz-skill-filter  .bz-skill-filter-body  .bz-chip-check  .bz-tutor-list  .bz-tutor  .bz-tutor-photo  .bz-tutor-name  .bz-tutor-position  .bz-tutor-actions  .bz-booking-tutor  .bz-daygrid-wrap  .bz-daygrid  .bz-daygrid-head  .bz-daygrid-time  .bz-slot  .bz-daygrid-legend  .bz-signin  .bz-signin-pane  .bz-signin-forgot
     .bz-request  .bz-request-why  .bz-pay-choices  .bz-pay-choice  .bz-pay-choice-text  .bz-pay-choice-price  .bz-discount  .bz-discount-note  .bz-pay-done-sub
     .bz-groups  .bz-groups-filter  .bz-groups-filter-toggle  .bz-groups-more  .bz-group-list  .bz-group  .bz-group-h  .bz-group-head  .bz-group-when  .bz-group-date  .bz-group-time  .bz-group-what  .bz-group-title  .bz-group-meta  .bz-group-tags  .bz-tag  .bz-tag-open  .bz-tag-full  .bz-group-caret  .bz-group-panel  .bz-group-about  .bz-group-note  .bz-group-dates  .bz-group-sessions  .bz-group-rule  .bz-group-join

   Looks: html[data-bz-look="classic" | "bold" | "soft"]; the values are the website theme's
   (bizstim-one style.css), so a published website and its branded pages match.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-latin-wght-normal.woff2) format("woff2");
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(../fonts/source-sans-3-latin-wght-normal.woff2) format("woff2");
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/outfit-latin-wght-normal.woff2) format("woff2");
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url(../fonts/nunito-latin-wght-normal.woff2) format("woff2");
}

/* ==========================================================================
   Looks. Zero specificity on purpose (L2): a tenant's :root rule always wins.
   The four *-hex fallbacks come from the layout (computed in PHP); browsers with
   color-mix() re-derive them below so a tenant's --bz-brand override moves them too.
   ========================================================================== */
:where(:root) {
  --bz-font-heading: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --bz-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bz-heading-weight: 600;
  --bz-primary: var(--bz-brand, #1f3a5f);
  --bz-primary-text: #ffffff;
  --bz-primary-hover: var(--bz-primary-hover-hex, #1b3252);
  --bz-primary-active: var(--bz-primary-active-hex, #182d4a);
  --bz-link-hover: var(--bz-link-hover-hex, #192e4c);
  --bz-accent: #b3822d;
  --bz-focus: #3b82f6;
  --bz-bg: #ffffff;
  --bz-surface: #f4f6f9;
  --bz-text: #1c1f26;
  --bz-muted: #5b6472;
  --bz-border: #dde2ea;
  --bz-danger: #c62828;
  --bz-hero-bg: var(--bz-hero-bg-hex, #dde1e7);
  --bz-hero-text: #1c1f26;
  --bz-hero-title: clamp(2rem, 4vw, 3rem);
  --bz-title: clamp(1.6rem, 2.6vw, 2.1rem);
  --bz-radius: 4px;
  --bz-button-bg: var(--bz-primary);
  --bz-button-text: var(--bz-primary-text);
  --bz-button-radius: 4px;
  --bz-card-bg: #ffffff;
  --bz-card-border: 1px solid var(--bz-border);
  --bz-card-shadow: none;
  --bz-content: 1100px;
  --bz-content-narrow: 760px;
  --bz-gutter: 1.25rem;
  --bz-section-pad: clamp(2.5rem, 6vw, 4.5rem);
  --bz-footer-bg: var(--bz-footer-bg-hex, #172b47);
}

:where(:root[data-bz-look="bold"]) {
  --bz-font-heading: "Outfit", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --bz-font-body: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --bz-heading-weight: 800;
  --bz-primary: var(--bz-brand, #0f172a);
  --bz-primary-text: #ffffff;
  --bz-accent: #f97316;
  --bz-bg: #ffffff;
  --bz-surface: #f1f5f9;
  --bz-text: #0f172a;
  --bz-muted: #475569;
  --bz-border: #cbd5e1;
  --bz-hero-bg: var(--bz-primary);
  --bz-hero-text: #ffffff;
  --bz-hero-title: clamp(2.5rem, 6vw, 4.25rem);
  --bz-title: clamp(1.9rem, 3.2vw, 2.6rem);
  --bz-radius: 0;
  --bz-button-bg: var(--bz-primary);
  --bz-button-text: #ffffff;
  --bz-button-radius: 0;
  --bz-card-bg: #ffffff;
  --bz-card-border: 2px solid #0f172a;
  --bz-card-shadow: none;
}

:where(:root[data-bz-look="soft"]) {
  --bz-font-heading: "Nunito", "Avenir Next", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --bz-font-body: "Nunito", "Avenir Next", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --bz-heading-weight: 600;
  --bz-primary: var(--bz-brand, #2a9d8f);
  --bz-primary-text: #ffffff;
  --bz-accent: #e76f51;
  --bz-bg: #fbf8f3;
  --bz-surface: #ffffff;
  --bz-text: #2b2d33;
  --bz-muted: #6b6f78;
  --bz-border: #e8e2d8;
  --bz-hero-bg: var(--bz-hero-bg-hex, #dceae4);
  --bz-hero-text: #1f3d39;
  --bz-hero-title: clamp(2rem, 4.5vw, 3.25rem);
  --bz-title: clamp(1.6rem, 2.6vw, 2.2rem);
  --bz-radius: 18px;
  --bz-button-bg: var(--bz-primary);
  --bz-button-text: #ffffff;
  --bz-button-radius: 999px;
  --bz-card-bg: #ffffff;
  --bz-card-border: 1px solid transparent;
  --bz-card-shadow: 0 6px 24px rgba(43, 45, 51, 0.08);
  --bz-footer-bg: var(--bz-text);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  :where(:root) {
    --bz-primary-hover: color-mix(in srgb, var(--bz-primary) 86%, #000000);
    --bz-primary-active: color-mix(in srgb, var(--bz-primary) 78%, #000000);
    --bz-link-hover: color-mix(in srgb, var(--bz-primary) 80%, #000000);
    --bz-hero-bg: color-mix(in srgb, var(--bz-primary) 15%, #ffffff);
    --bz-footer-bg: color-mix(in srgb, var(--bz-primary) 62%, #0b1220);
  }

  :where(:root[data-bz-look="bold"]) {
    --bz-hero-bg: var(--bz-primary);
  }

  :where(:root[data-bz-look="soft"]) {
    --bz-hero-bg: color-mix(in srgb, var(--bz-primary) 15%, #fbf8f3);
    --bz-footer-bg: var(--bz-text);
  }
}

/* ==========================================================================
   Bootstrap 5 mapped onto the look
   ========================================================================== */
:root {
  --bs-body-font-family: var(--bz-font-body);
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.6;
  --bs-body-color: var(--bz-text);
  --bs-body-bg: var(--bz-bg);
  --bs-secondary-color: var(--bz-muted);
  --bs-border-color: var(--bz-border);
  --bs-border-radius: var(--bz-radius);
  --bs-heading-color: inherit;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--bz-font-heading);
  font-weight: var(--bz-heading-weight);
  line-height: 1.2;
}

a {
  color: var(--bz-primary);
}

a:hover {
  color: var(--bz-link-hover);
}

.btn {
  --bs-btn-font-family: inherit;
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 1.1rem;
  --bs-btn-padding-y: 0.6rem;
  --bs-btn-border-radius: var(--bz-button-radius);
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.35);
}

.btn-sm {
  --bs-btn-padding-x: 0.8rem;
  --bs-btn-padding-y: 0.35rem;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: var(--bz-button-radius);
}

.btn-primary {
  --bs-btn-color: var(--bz-button-text);
  --bs-btn-bg: var(--bz-button-bg);
  --bs-btn-border-color: var(--bz-button-bg);
  --bs-btn-hover-color: var(--bz-button-text);
  --bs-btn-hover-bg: var(--bz-primary-hover);
  --bs-btn-hover-border-color: var(--bz-primary-hover);
  --bs-btn-active-color: var(--bz-button-text);
  --bs-btn-active-bg: var(--bz-primary-active);
  --bs-btn-active-border-color: var(--bz-primary-active);
  --bs-btn-disabled-color: var(--bz-button-text);
  --bs-btn-disabled-bg: var(--bz-button-bg);
  --bs-btn-disabled-border-color: var(--bz-button-bg);
}

.btn-outline-primary {
  --bs-btn-color: var(--bz-primary);
  --bs-btn-border-color: var(--bz-primary);
  --bs-btn-hover-color: var(--bz-primary-text);
  --bs-btn-hover-bg: var(--bz-primary);
  --bs-btn-hover-border-color: var(--bz-primary);
  --bs-btn-active-color: var(--bz-primary-text);
  --bs-btn-active-bg: var(--bz-primary-hover);
  --bs-btn-active-border-color: var(--bz-primary-hover);
  --bs-btn-disabled-color: var(--bz-primary);
  --bs-btn-disabled-border-color: var(--bz-primary);
}

/* ==========================================================================
   Layout
   ========================================================================== */
.bz-inner {
  max-width: var(--bz-content);
  margin: 0 auto;
  padding: 0 var(--bz-gutter);
}

.bz-inner-narrow {
  max-width: var(--bz-content-narrow);
}

/* the page title is its own band in the banner tint, as on the website */
.bz-page-title {
  padding: calc(var(--bz-section-pad) * 0.6) 0;
  background: var(--bz-hero-bg);
  color: var(--bz-hero-text);
}

.bz-page-title h1 {
  font-size: var(--bz-hero-title);
  margin: 0;
}

/* ==========================================================================
   Schedule page
   ========================================================================== */
.bz-schedule {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.bz-profile {
  display: flex;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  background: var(--bz-card-bg);
  border: var(--bz-card-border);
  border-radius: var(--bz-radius);
  box-shadow: var(--bz-card-shadow);
}

.bz-profile-photo {
  flex: 0 0 auto;
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
}

.bz-profile-avatar {
  background: var(--bz-surface);
  color: var(--bz-border);
  overflow: hidden;
}

.bz-profile-avatar svg {
  display: block;
  width: 100%;
  height: 100%;
}

.bz-profile-name {
  flex: 1 1 auto;
  margin: 0;
  font-size: 1.45rem;
}

.bz-profile-login {
  flex: 0 0 auto;
}

.form-check-input:checked {
  background-color: var(--bz-primary);
  border-color: var(--bz-primary);
}

.form-check-input:focus {
  border-color: #93bafa;
  box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.35);
}

/* the "Hide past due" switch above the list; rendered only when the list has past-due sessions */
.bz-schedule-tools {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 0.5rem;
}

.bz-switch {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  margin: 0;
  padding: 0;
}

.bz-switch .form-check-input {
  float: none;
  flex: 0 0 auto;
  width: 2.5em;
  height: 1.35em;
  margin: 0;
  cursor: pointer;
}

.bz-switch .form-check-label {
  padding: 0.6rem 0;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.bz-session-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bz-hide-past .bz-session-past {
  display: none;
}

.bz-session-empty {
  margin: 0;
  padding: 1.25rem;
  text-align: center;
  color: var(--bz-muted);
  border: 1px dashed var(--bz-border);
  border-radius: var(--bz-radius);
}

/* one card per session; the strip on the left is the brand colour, red when the session is past due */
.bz-session {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 0.6rem 1rem;
  padding: 1rem 1.25rem 1rem 1.5rem;
  overflow: hidden;
  background: var(--bz-card-bg);
  border: var(--bz-card-border);
  border-radius: var(--bz-radius);
  box-shadow: var(--bz-card-shadow);
}

.bz-session::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--bz-primary);
}

.bz-session-past::before {
  background: var(--bz-danger);
}

.bz-session-when {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  font-family: var(--bz-font-heading);
  font-size: 1.2rem;
  font-weight: var(--bz-heading-weight);
  line-height: 1.3;
}

.bz-session-sep {
  color: var(--bz-border);
}

.bz-session-badge {
  margin-left: auto;
  padding: 0.2rem 0.65rem;
  font-family: var(--bz-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--bz-danger);
  background: #faecec;
  border: 1px solid #efc3c3;
  border-radius: 999px;
}

.bz-session-details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.1rem 0.6rem;
  margin: 0;
  font-size: 0.95rem;
}

.bz-session-details dt {
  font-weight: 600;
  color: var(--bz-muted);
}

.bz-session-details dd {
  margin: 0;
}

.bz-session-ics {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.bz-session-ics svg {
  width: 1em;
  height: 1em;
}

.bz-page-note {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--bz-border);
  text-align: center;
  font-size: 0.95rem;
  color: var(--bz-muted);
}

.bz-page-note a {
  font-weight: 600;
}

.bz-page-note p {
  margin: 0.25rem 0 0;
  font-style: italic;
}

@media (max-width: 575.98px) {
  .bz-profile {
    flex-direction: column;
    text-align: center;
  }

  .bz-profile-photo {
    width: 88px;
    height: 88px;
  }

  .bz-profile-login {
    width: 100%;
  }

  .bz-session {
    grid-template-columns: 1fr;
  }

  .bz-session-actions {
    justify-self: start;
  }

  /* a full-size tap target on phones */
  .bz-session-ics {
    --bs-btn-padding-y: 0.6rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 0.95rem;
  }
}

/* ==========================================================================
   Top bar: every branded page except the schedule page
   ========================================================================== */
.bz-topbar {
  background: var(--bz-bg);
  border-bottom: 1px solid var(--bz-border);
}

/* phone + e-mail strip above the logo row */
.bz-topbar-contact {
  background: var(--bz-surface);
  border-bottom: 1px solid var(--bz-border);
}

.bz-topbar-contact .bz-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 1.5rem;
}

.bz-topbar-contact a,
.bz-topbar-contact .bz-topbar-text {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.25rem;
  font-size: 0.9rem;
  color: var(--bz-muted);
  text-decoration: none;
}

.bz-topbar-contact a:hover {
  color: var(--bz-primary);
}

.bz-topbar-contact svg {
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
}

/* the website header's row (bizstim-one style.css .bz-header): logo or company name left, the links right from
   800px; on phones the links sit in a panel under the bar, opened by the bars icon */
.bz-topbar-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

.bz-topbar-brand {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  color: var(--bz-text);
  text-decoration: none;
}

/* tall logos are capped by height, long banners by width (the website's .bz-logo) */
.bz-topbar-logo {
  display: block;
  width: auto;
  max-width: min(320px, 55vw);
  height: auto;
  max-height: 56px;
}

.bz-topbar-name {
  font-family: var(--bz-font-heading);
  font-size: 1.35rem;
  font-weight: var(--bz-heading-weight);
  line-height: 1.2;
}

.bz-nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the website's link, number for number: body font, 600, a soft surface on hover, the brand colour and a 3px
   underline when current. No min-height: the bar has to measure the same as the website's (41.6px links, a 108px
   bar); the phone panel's links below are 48px tall, so the tap target holds where fingers are used */
.bz-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.8rem;
  border-radius: var(--bz-radius);
  font-weight: 600;
  color: var(--bz-text);
  text-decoration: none;
}

a.bz-nav-link:hover {
  background: var(--bz-surface);
}

.bz-nav-link:focus-visible {
  outline: 3px solid var(--bz-focus);
  outline-offset: 2px;
}

.bz-nav-link[aria-current="page"] {
  color: var(--bz-primary);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.45em;
}

/* the bold look paints the bar in the brand colour, as the website header does; the contact strip keeps its own
   surface above it */
html[data-bz-look="bold"] .bz-topbar {
  background: var(--bz-primary);
  border-bottom: 0;
}

html[data-bz-look="bold"] .bz-topbar-brand,
html[data-bz-look="bold"] .bz-nav-link,
html[data-bz-look="bold"] .bz-nav-toggle {
  color: var(--bz-primary-text);
}

html[data-bz-look="bold"] a.bz-nav-link:hover,
html[data-bz-look="bold"] .bz-nav-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
}

html[data-bz-look="bold"] .bz-nav-link[aria-current="page"] {
  color: var(--bz-primary-text);
}

/* --------------------------------------------------------------------------
   Phone menu (the website's, bizstim-one style.css "Mobile menu"): the links live in a collapsed panel behind
   the bars icon; the 800px block below puts them back in the bar. The panel animates on grid-template-rows
   0fr -> 1fr, which slides to its own height. A checkbox drives it, so no script.
   -------------------------------------------------------------------------- */
.bz-nav-check {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.bz-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: var(--bz-radius);
  color: inherit;
  cursor: pointer;
}

.bz-nav-toggle:hover {
  background: var(--bz-surface);
}

/* the checkbox is what takes focus, so the ring has to be drawn on its label */
.bz-nav-check:focus-visible + .bz-nav-toggle {
  outline: 3px solid var(--bz-focus);
  outline-offset: 2px;
}

/* three bars: the span is the middle one, its pseudo-elements the outer two */
.bz-nav-bars {
  position: relative;
  display: block;
  transition: background-color 0.2s ease;
}

.bz-nav-bars::before,
.bz-nav-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.bz-nav-bars::before {
  top: -7px;
}

.bz-nav-bars::after {
  top: 7px;
}

.bz-nav-bars,
.bz-nav-bars::before,
.bz-nav-bars::after {
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s ease, background-color 0.2s ease;
}

/* open: the middle bar fades out and the outer two meet in the centre as an X */
.bz-nav-check:checked + .bz-nav-toggle .bz-nav-bars {
  background: transparent;
}

.bz-nav-check:checked + .bz-nav-toggle .bz-nav-bars::before {
  transform: translateY(7px) rotate(45deg);
}

.bz-nav-check:checked + .bz-nav-toggle .bz-nav-bars::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* full-width row of its own under the logo, so the bar itself never grows */
.bz-nav-wrap {
  flex-basis: 100%;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;
}

.bz-nav-check:checked ~ .bz-nav-wrap {
  grid-template-rows: 1fr;
}

/* min-height:0 lets the grid child shrink past its content; overflow hides it while closed. nowrap is
   load-bearing: a column flex box that may wrap answers zero height by spilling links into new columns. */
.bz-nav-wrap .bz-nav {
  min-height: 0;
  overflow: hidden;
}

.bz-nav-wrap .bz-nav-list {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
}

/* the website's links are the panel's own flex children and stretch to its width; here they sit in list items,
   so each item is a column flex box and the link inside stretches to it the same way. Harmless in the row. */
.bz-nav-wrap .bz-nav-list li {
  display: flex;
  flex-direction: column;
}

.bz-nav-wrap .bz-nav-link {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.bz-nav-check:checked ~ .bz-nav-wrap .bz-nav-link {
  opacity: 1;
  transform: none;
}

/* the links arrive one after another rather than as a block */
.bz-nav-check:checked ~ .bz-nav-wrap li:nth-child(1) .bz-nav-link { transition-delay: 0.08s; }
.bz-nav-check:checked ~ .bz-nav-wrap li:nth-child(2) .bz-nav-link { transition-delay: 0.12s; }
.bz-nav-check:checked ~ .bz-nav-wrap li:nth-child(3) .bz-nav-link { transition-delay: 0.16s; }
.bz-nav-check:checked ~ .bz-nav-wrap li:nth-child(4) .bz-nav-link { transition-delay: 0.20s; }
.bz-nav-check:checked ~ .bz-nav-wrap li:nth-child(5) .bz-nav-link { transition-delay: 0.24s; }
.bz-nav-check:checked ~ .bz-nav-wrap li:nth-child(6) .bz-nav-link { transition-delay: 0.28s; }

/* from 800px the toggle is gone and the panel is an ordinary open row of links again */
@media (min-width: 800px) {
  .bz-nav-toggle {
    display: none;
  }

  .bz-nav-wrap {
    flex-basis: auto;
    grid-template-rows: 1fr;
    transition: none;
  }

  .bz-nav-wrap .bz-nav {
    overflow: visible;
  }

  .bz-nav-wrap .bz-nav-list {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .bz-nav-wrap .bz-nav-link {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
}

/* with the blog's link in the menu (its name can run to 30 characters) the row no longer fits beside a wide
   logo under 1100px: the phone panel stays until then, as on the website */
@media (min-width: 800px) and (max-width: 1099.98px) {
  :has(> .bz-nav-wrap .bz-nav-blog) > .bz-nav-toggle {
    display: inline-flex;
  }

  .bz-nav-wrap:has(.bz-nav-blog) {
    flex-basis: 100%;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.32s ease;
  }

  .bz-nav-check:checked ~ .bz-nav-wrap:has(.bz-nav-blog) {
    grid-template-rows: 1fr;
  }

  .bz-nav-wrap:has(.bz-nav-blog) .bz-nav {
    overflow: hidden;
  }

  .bz-nav-wrap:has(.bz-nav-blog) .bz-nav-list {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .bz-nav-wrap:has(.bz-nav-blog) .bz-nav-link {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  .bz-nav-check:checked ~ .bz-nav-wrap:has(.bz-nav-blog) .bz-nav-link {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bz-nav-wrap,
  .bz-nav-wrap .bz-nav-link,
  .bz-nav-wrap:has(.bz-nav-blog),
  .bz-nav-wrap:has(.bz-nav-blog) .bz-nav-link,
  .bz-nav-bars,
  .bz-nav-bars::before,
  .bz-nav-bars::after {
    transition: none;
  }
}

/* ==========================================================================
   Biography page
   ========================================================================== */
.bz-bio {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.bz-bio-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1.25rem 1.5rem;
  text-align: center;
  background: var(--bz-card-bg);
  border: var(--bz-card-border);
  border-radius: var(--bz-radius);
  box-shadow: var(--bz-card-shadow);
}

.bz-bio-photo {
  display: block;
  flex: 0 0 auto;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
}

.bz-bio-name {
  margin: 1rem 0 0;
  font-size: 2rem;
}

.bz-bio-position {
  margin: 0.2rem 0 0;
  font-weight: 600;
  color: var(--bz-muted);
}

/* the tutor's skills (labelled with the account's own word, e.g. "Subjects") */
.bz-bio-skills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  width: 100%;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--bz-border);
}

.bz-bio-skills-label {
  font-weight: 600;
}

.bz-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bz-chip {
  padding: 0.2rem 0.8rem;
  font-size: 0.9rem;
  background: var(--bz-surface);
  border: 1px solid var(--bz-border);
  border-radius: 999px;
}

/* the tutor's biography text, under the skills; left-aligned inside the centred card */
.bz-bio-text {
  width: 100%;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  text-align: left;
  border-top: 1px solid var(--bz-border);
}

.bz-bio-text p:last-child {
  margin-bottom: 0;
}

/* availability: one table per schedule, the buttons switch between them */
.bz-avail {
  margin-top: 1.5rem;
  padding: 1.5rem 1.25rem;
  background: var(--bz-card-bg);
  border: var(--bz-card-border);
  border-radius: var(--bz-radius);
  box-shadow: var(--bz-card-shadow);
}

.bz-avail-title {
  margin: 0 0 1rem;
  font-size: 1.45rem;
}

.bz-avail-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.bz-avail-btn[aria-pressed="true"] {
  --bs-btn-color: var(--bz-primary-text);
  --bs-btn-bg: var(--bz-primary);
  --bs-btn-hover-color: var(--bz-primary-text);
  --bs-btn-hover-bg: var(--bz-primary);
}

.bz-avail-table {
  width: 100%;
  margin: 0;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  border-collapse: collapse;
}

.bz-avail-table caption {
  caption-side: top;
  padding: 0 0 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bz-muted);
}

.bz-avail-table th,
.bz-avail-table td {
  padding: 0.6rem 0.9rem;
  border-top: 1px solid var(--bz-border);
}

.bz-avail-table tr:last-child th,
.bz-avail-table tr:last-child td {
  border-bottom: 1px solid var(--bz-border);
}

.bz-avail-table tbody tr:nth-child(odd) {
  background: var(--bz-surface);
}

.bz-avail-table th {
  width: 1%;
  padding-right: 2.5rem;
  font-weight: 600;
  white-space: nowrap;
}

.bz-avail-time {
  white-space: nowrap;
}

.bz-avail-off {
  color: var(--bz-muted);
}

/* ==========================================================================
   Footer band (every page with the top bar)
   ========================================================================== */
/* a short page (login) ends before the screen does: stretch the body to the viewport and push the band
   to the bottom, so no white shows under it. The hidden inputs and scripts after the band have no height. */
.bz-branded {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* a flex child with auto side margins (.bz-inner) would shrink to its content: keep every band full width */
.bz-branded > * {
  width: 100%;
}

.bz-footer {
  margin-top: auto;
}

/* the branded band: Bizstim's own line, printed while the account has no published website */
.bz-footer-band {
  padding: 0.75rem 0;
  font-size: 0.85rem;
  color: var(--bz-muted);
  background: var(--bz-surface);
  border-top: 1px solid var(--bz-border);
}

.bz-footer-band .bz-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
}

.bz-footer-band a {
  color: var(--bz-muted);
}

@media (max-width: 575.98px) {
  .bz-topbar-contact .bz-inner {
    justify-content: center;
    gap: 0 1.25rem;
  }

  .bz-topbar-contact a,
  .bz-topbar-contact .bz-topbar-text {
    min-height: 44px;
  }

  .bz-bio-photo {
    width: 140px;
    height: 140px;
  }

  .bz-avail {
    padding: 1.25rem 0.75rem;
  }

  /* full-size tap targets on phones */
  .bz-avail-btn {
    --bs-btn-padding-y: 0.6rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 0.95rem;
  }

  .bz-avail-table {
    font-size: 0.9375rem;
  }

  .bz-avail-table th,
  .bz-avail-table td {
    padding: 0.55rem 0.6rem;
  }

  .bz-avail-table th {
    padding-right: 1rem;
  }

  .bz-footer-band .bz-inner {
    flex-direction: column;
    text-align: center;
  }

  .bz-footer-band a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ==========================================================================
   Forms: every branded page with a form (first used by the login page)
   ========================================================================== */
.bz-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.bz-field .form-label {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.bz-field .form-text {
  margin: 0;
}

/* taller fields than Bootstrap's default: 45px, a full-size tap target */
.form-control,
.form-select {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  padding-left: 0.85rem;
}

.form-control {
  padding-right: 0.85rem;
}

.form-control:focus,
.form-select:focus {
  border-color: #93bafa;
  box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.35);
}

/* a password field with the eye inside it: hold the eye to show the password, let go to hide it (as the website's login) */
.bz-password {
  position: relative;
  display: block;
}

.bz-password .form-control {
  padding-right: 3.25rem;
}

.bz-password-toggle {
  position: absolute;
  top: 50%;
  right: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--bz-muted);
  background: none;
  border: 0;
  border-radius: var(--bz-radius);
  transform: translateY(-50%);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.bz-password-toggle:focus-visible {
  outline: 3px solid var(--bz-focus);
  outline-offset: -3px;
}

.bz-password-toggle svg {
  display: block;
  width: 20px;
  height: 20px;
  pointer-events: none; /* the icon swaps under the pointer; a mouseleave from the vanished icon must not read as letting go */
}

.bz-password-toggle .bz-eye-off,
.bz-password-toggle.is-showing .bz-eye {
  display: none;
}

.bz-password-toggle.is-showing .bz-eye-off {
  display: block;
}

/* notes: why a login failed, an account message, maintenance, and the recovery messages (the website's form note, tinted) */
.bz-form-note {
  margin: 0 0 1rem;
  padding: 0.85rem 1.1rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--bz-text);
  background: var(--bz-card-bg);
  border: 1px solid var(--bz-border);
  border-left: 5px solid var(--bz-primary);
  border-radius: var(--bz-radius);
}

.bz-form-note > :last-child {
  margin-bottom: 0;
}

.bz-form-error {
  background: #faecec;
  border-color: #efc3c3;
  border-left-color: var(--bz-danger);
}

.bz-form-warning {
  background: #fdf6e3;
  border-color: #f0dca8;
  border-left-color: #b7791f;
}

.bz-form-success {
  background: #edf7f0;
  border-color: #b7dfc5;
  border-left-color: #2f855a;
}

/* messages from a script (the recovery steps) float top right, one at a time */
.bz-toasts {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1080;
  width: min(360px, calc(100% - 2rem));
}

.bz-toast {
  position: relative;
  margin: 0;
  padding-right: 3rem;
  box-shadow: 0 6px 24px rgba(28, 31, 38, 0.18);
}

.bz-toast-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--bz-muted);
  background: none;
  border: 0;
  cursor: pointer;
}

/* ==========================================================================
   Login page: the form card and its seven recovery panes
   ========================================================================== */
.bz-login {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

/* the column: the notes, the card and the install link */
.bz-login-wrap {
  max-width: 420px;
  margin: 0 auto;
}

.bz-login-card {
  padding: 1.75rem 2rem 1.5rem;
  background: var(--bz-card-bg);
  border: var(--bz-card-border);
  border-radius: var(--bz-radius);
  box-shadow: var(--bz-card-shadow);
}

.bz-login-heading {
  margin: 0 0 1.25rem;
  font-size: 1.45rem;
}

/* the heading takes focus only from the script, when a pane has no field */
.bz-login-heading:focus {
  outline: 0;
}

/* pinned to the tallest pane (the login form and the new password, 286.2px measured at 1280 and 390) so the card
   keeps its size on every pane */
.bz-login-body {
  min-height: 287px;
}

.bz-login-pane,
.bz-login-pane > form {
  display: grid;
  gap: 1rem;
}

.bz-login-pane p {
  margin: 0;
}

.bz-login-card .btn {
  width: 100%;
}

.bz-login-help {
  text-align: center;
  font-size: 0.95rem;
}

.bz-login-help a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.bz-login-help a:hover,
.bz-login-help a:focus-visible {
  text-decoration: underline;
}

/* pane 8: the usernames for that e-mail at that business; the list scrolls so the card keeps its size */
.bz-username-list {
  display: grid;
  gap: 0.5rem;
  max-height: 11rem;
  overflow-y: auto;
}

.bz-username-list > div {
  padding: 0.5rem 0.9rem;
  font-weight: 600;
  background: var(--bz-surface);
  border: 1px solid var(--bz-border);
  border-radius: var(--bz-radius);
}

/* the business's terms of service, in a band at the foot of the card */
.bz-login-terms {
  margin: 1.5rem -2rem -1.5rem;
  padding: 0.5rem 2rem;
  font-size: 0.85rem;
  text-align: right;
  background: var(--bz-surface);
  border-top: 1px solid var(--bz-border);
  border-radius: 0 0 var(--bz-radius) var(--bz-radius);
}

.bz-login-terms a {
  color: var(--bz-muted);
}

.bz-login-install {
  margin: 0.75rem 0 0;
  text-align: center;
  font-size: 0.9rem;
}

@media (max-width: 575.98px) {
  .bz-toasts {
    top: 0.75rem;
    right: 0.75rem;
    width: calc(100% - 1.5rem);
  }

  .bz-login-card {
    padding: 1.5rem 1.25rem 1.25rem;
  }

  .bz-login-terms {
    margin: 1.25rem -1.25rem -1.25rem;
    padding: 0 1.25rem;
  }

  .bz-login-terms a,
  .bz-login-install a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ==========================================================================
   Payment pages: Quick Pay (one invoice), then Secure Pay (an amount the client types)
   ========================================================================== */
.bz-pay {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

/* the convenience fee note sits above both cards */
.bz-pay > .bz-form-note {
  margin-bottom: 1.5rem;
}

/* the invoice and the payment side by side from 768px (same height); stacked on phones, the invoice first */
.bz-pay-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .bz-pay-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.bz-pay-card {
  padding: 1.5rem 1.75rem;
  background: var(--bz-card-bg);
  border: var(--bz-card-border);
  border-radius: var(--bz-radius);
  box-shadow: var(--bz-card-shadow);
}

.bz-pay-title {
  margin: 0 0 1.25rem;
  font-size: 1.45rem;
}

/* invoice card: the title with the PDF button beside it */
.bz-invoice-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}

.bz-invoice-head .bz-pay-title {
  margin: 0;
}

/* the button overhangs the title line a little instead of making the row taller, so the title sits level with the
   payment card's */
.bz-invoice-pdf {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: -0.2rem 0;
}

.bz-invoice-pdf svg {
  width: 1em;
  height: 1em;
}

/* the amount to pay, large (with a convenience fee: the grand total) */
.bz-invoice-total {
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem;
  text-align: center;
  background: var(--bz-surface);
  border-radius: var(--bz-radius);
}

.bz-invoice-total-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bz-muted);
}

.bz-invoice-total-value {
  display: block;
  font-family: var(--bz-font-heading);
  font-size: 2.25rem;
  font-weight: var(--bz-heading-weight);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* the convenience fee: sub-total, fee, grand total (no column gap, so the rule over the grand total runs unbroken) */
.bz-invoice-fee {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 0;
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.bz-invoice-fee dt {
  font-weight: 400;
  color: var(--bz-muted);
}

.bz-invoice-fee dd {
  margin: 0;
  padding-left: 1rem;
  text-align: right;
}

.bz-invoice-fee dt:last-of-type,
.bz-invoice-fee dd:last-of-type {
  padding-top: 0.35rem;
  font-weight: 600;
  color: var(--bz-text);
  border-top: 1px solid var(--bz-border);
}

/* invoice #, due date, billing period, date sent */
.bz-invoice-details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1.25rem;
  margin: 0;
}

.bz-invoice-details dt {
  font-weight: 600;
  color: var(--bz-muted);
}

.bz-invoice-details dd {
  margin: 0;
}

.bz-invoice-hint {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--bz-muted);
  border-top: 1px solid var(--bz-border);
}

/* a logged-in client of this business gets a way back to the portal */
.bz-invoice-back {
  margin: 1.25rem 0 0;
  text-align: center;
}

/* payment card: Stripe's fields, the terms line, the Pay button, the error under it */
.bz-pay-form {
  display: grid;
  gap: 1rem;
}

/* Stripe's Payment Element mounts here; its height is held while it loads so nothing jumps */
.bz-pay-element {
  min-height: 244px;
}

.bz-pay-terms {
  margin: 0;
  font-size: 0.9rem;
  color: var(--bz-muted);
}

.bz-pay-form .btn {
  width: 100%;
}

.bz-pay-form .bz-form-note {
  margin: 0;
}

/* after the payment: the check and the thank-you line in place of the form, centred in the card */
.bz-pay-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
  text-align: center;
}

.bz-pay-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  color: #ffffff;
  background: #2f855a;
  border-radius: 50%;
}

.bz-pay-check svg {
  width: 36px;
  height: 36px;
}

.bz-pay-done p {
  margin: 1.25rem 0 0;
  font-size: 1.15rem;
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .bz-pay-card {
    padding: 1.25rem;
  }

  .bz-invoice-total-value {
    font-size: 2rem;
  }

  .bz-invoice-back .btn {
    width: 100%;
  }

  /* a full-size tap target on phones */
  .bz-invoice-pdf {
    --bs-btn-padding-y: 0.6rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 0.95rem;
  }
}

/* ==========================================================================
   Secure Pay (an amount the client types): the account card and the amount field. Reuses the Quick Pay rules above.
   ========================================================================== */
/* account card: the welcome line, the balance box, the unpaid invoices and recent payments */
.bz-account-welcome {
  margin: 0 0 1.25rem;
  font-size: 1.05rem;
  font-weight: 600;
}

/* the balance, large, like an invoice total; red while money is owed */
.bz-account-balance {
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem;
  text-align: center;
  background: var(--bz-surface);
  border-radius: var(--bz-radius);
}

.bz-account-balance-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bz-muted);
}

.bz-account-balance-value {
  display: block;
  font-family: var(--bz-font-heading);
  font-size: 2.25rem;
  font-weight: var(--bz-heading-weight);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.bz-account-owed .bz-account-balance-value {
  color: var(--bz-danger);
}

.bz-account-subtitle {
  margin: 1.25rem 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bz-muted);
}

/* one row per invoice or payment: the link, the date, the amount on the right */
.bz-account-list {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.bz-account-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0 1rem;
}

.bz-account-list .bz-account-date {
  color: var(--bz-muted);
  white-space: nowrap;
}

.bz-account-list .bz-account-amount {
  min-width: 5.5rem;
  text-align: right;
}

.bz-account-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
}

.bz-account-list svg {
  width: 1em;
  height: 1em;
  flex: none;
}

/* the amount field: the currency sign in front, the fee lines under it when the account adds a convenience fee */
.bz-amount .input-group-text {
  font-weight: 600;
  color: var(--bz-muted);
  background: var(--bz-surface);
}

.bz-amount .form-control {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

/* the fee lines under the amount reuse the invoice card's, closed up to the field */
.bz-pay-form .bz-amount-fee {
  margin: -0.25rem 0 0;
}

/* after the payment: the check, the thank-you line and a way to pay again */
.bz-pay-done .btn {
  margin-top: 1.25rem;
}

@media (max-width: 575.98px) {
  .bz-account-balance-value {
    font-size: 2rem;
  }

  /* the date drops under the link so the amount keeps its column */
  .bz-account-list li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .bz-account-list .bz-account-date {
    grid-column: 1;
    margin-top: -0.6rem;
    font-size: 0.85rem;
  }

  .bz-account-list .bz-account-amount {
    grid-row: 1;
    grid-column: 2;
  }

  .bz-pay-done .btn {
    width: 100%;
  }
}

/* ==========================================================================
   Inquiry page: the form switch, the form card beside the instructions, the two-column field grid
   ========================================================================== */
.bz-inquiry {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

/* one button per form (student / tutor / general); hidden when the account shows one form only */
.bz-form-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.bz-form-switch-btn[aria-pressed="true"] {
  --bs-btn-color: var(--bz-primary-text);
  --bs-btn-bg: var(--bz-primary);
  --bs-btn-border-color: var(--bz-primary);
  --bs-btn-hover-color: var(--bz-primary-text);
  --bs-btn-hover-bg: var(--bz-primary);
  --bs-btn-hover-border-color: var(--bz-primary);
}

/* the form card two thirds, the instructions one third from 992px (Bootstrap's lg); stacked on phones and tablets */
.bz-inquiry-grid {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 992px) {
  .bz-inquiry-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

.bz-inquiry-card {
  padding: 1.5rem 1.75rem;
  background: var(--bz-card-bg);
  border: var(--bz-card-border);
  border-radius: var(--bz-radius);
  box-shadow: var(--bz-card-shadow);
}

.bz-inquiry-title {
  margin: 0 0 1.25rem;
  font-size: 1.45rem;
}

/* the fields: two columns from 992px (Bootstrap's col-lg-6), one column below; a message or a long answer spans both */
.bz-inquiry-fields {
  display: grid;
  gap: 1rem;
}

@media (min-width: 992px) {
  .bz-inquiry-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
  }

  .bz-inquiry-fields .bz-field-wide {
    grid-column: 1 / -1;
  }

  /* a label that wraps to two lines must not push its own field below the one beside it */
  .bz-inquiry-fields .bz-field > .form-control,
  .bz-inquiry-fields .bz-field > .form-select {
    margin-top: auto;
  }
}

.bz-inquiry-fields .bz-form-note {
  margin: 0;
}

/* a required field's star */
.bz-required {
  color: var(--bz-danger);
  font-weight: 700;
}

/* a radio or checkbox question: the legend as the label, one full-size row per option */
.bz-choices {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.bz-choices legend {
  float: none;
  width: auto;
  margin: 0 0 0.35rem;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.6;
}

.bz-choices .form-check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.25rem;
  margin: 0;
  padding: 0;
}

.bz-choices .form-check-input {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  border-color: var(--bz-muted);
}

.bz-choices .form-check-input:checked {
  background-color: var(--bz-primary);
  border-color: var(--bz-primary);
}

.bz-choices .form-check-input:focus {
  border-color: #93bafa;
  box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.35);
}

.bz-choices .form-check-label {
  cursor: pointer;
}

/* the honeypot: off the page, never hidden with display:none (a bot would skip it) */
.bz-hp {
  position: absolute;
  top: auto;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* the foot of the form: the note and the button */
.bz-inquiry-actions {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
}

.bz-inquiry-actions .bz-form-note {
  margin: 0;
}

.bz-inquiry-actions .btn {
  justify-self: start;
  min-width: 12rem;
}

/* after the send: the check and the thank-you line in place of the fields */
.bz-inquiry-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
  text-align: center;
}

.bz-inquiry-done .bz-pay-check {
  margin-bottom: 1rem;
}

.bz-inquiry-done p {
  margin: 0;
  font-size: 1.15rem;
}

.bz-inquiry-done .btn {
  margin-top: 1.25rem;
}

/* the instructions card beside the form */
.bz-inquiry-aside {
  font-size: 1rem;
}

.bz-inquiry-aside > :last-child {
  margin-bottom: 0;
}

@media (max-width: 575.98px) {
  .bz-inquiry-card {
    padding: 1.25rem 1rem;
  }

  .bz-form-switch-btn {
    --bs-btn-padding-y: 0.6rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 0.95rem;
  }

  .bz-choices .form-check {
    min-height: 44px;
  }

  .bz-inquiry-actions .btn {
    justify-self: stretch;
    width: 100%;
  }
}

/* ==========================================================================
   Session status page: the status head, the information card with the confirm block, the chat card, private notes
   ========================================================================== */
.bz-status {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

/* the head: the status pill and the date + time headline, the Problem button on the right (clients only) */
.bz-status-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}

.bz-status-pill {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
}

.bz-status-pending {
  color: #8a5a00;
  background: #fdf1d6;
  border: 1px solid #f0d28a;
}

.bz-status-confirmed {
  color: #1f5f3f;
  background: #e3f3e9;
  border: 1px solid #a9d9bd;
}

.bz-status-when {
  margin: 0;
  font-family: var(--bz-font-heading);
  font-size: 1.35rem;
  font-weight: var(--bz-heading-weight);
  line-height: 1.3;
}

.bz-status-when .bz-status-sep {
  margin: 0 0.35rem;
  color: var(--bz-border);
}

.bz-status-problem {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
}

.bz-status-problem svg {
  width: 16px;
  height: 16px;
}

/* a note under the head row (the report was sent) */
.bz-status > .bz-form-note {
  margin: -0.5rem 0 1.5rem;
}

/* the information card left (5/12) and the chat right (7/12) from 992px; stacked below, the chat first */
.bz-status-grid {
  display: grid;
  gap: 1.5rem;
  align-items: stretch; /* the chat card matches the information card's height; its message list takes the room */
}

@media (min-width: 992px) {
  .bz-status-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

.bz-status-card {
  padding: 1.5rem 1.75rem;
  background: var(--bz-card-bg);
  border: var(--bz-card-border);
  border-radius: var(--bz-radius);
  box-shadow: var(--bz-card-shadow);
}

.bz-status-title {
  margin: 0 0 1.25rem;
  font-size: 1.45rem;
}

/* the facts: label column, value column */
.bz-status-details {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.45rem 1rem;
  margin: 0;
}

.bz-status-details dt {
  font-weight: 600;
  color: var(--bz-muted);
}

.bz-status-details dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* the online meeting line: the provider and, once built, the Join button beside it */
.bz-meeting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
}

.bz-meeting-none {
  color: var(--bz-muted);
}

.bz-meeting-pass code {
  font-size: 0.95em;
}

/* the confirm block (admin, staff and tutor on a pending single session): the meeting choice ABOVE the two buttons */
.bz-confirm {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--bz-border);
}

.bz-confirm h3 {
  margin: 0 0 0.85rem;
  font-size: 1.1rem;
}

.bz-confirm .bz-choices {
  margin-bottom: 1.1rem;
}

.bz-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.bz-confirm .bz-form-note {
  margin: 0 0 1rem;
}

/* after the confirm: the green note takes the block's place, with the block's gap above it */
.bz-confirm-done {
  margin: 1.5rem 0 0;
}

/* the chat card: the messages, then the composer pinned under them */
.bz-chat {
  display: flex;
  flex-direction: column;
}

.bz-chat-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-height: 240px;
  max-height: min(60vh, 520px);
  margin: 0;
  padding: 0.25rem 0.25rem 0.25rem 0;
  overflow-y: auto;
  list-style: none;
}

.bz-msg {
  display: flex;
  flex-direction: column;
  max-width: 85%;
  align-self: flex-start;
  align-items: flex-start;
}

.bz-msg-mine {
  align-self: flex-end;
  align-items: flex-end;
}

.bz-msg-body {
  margin: 0;
  padding: 0.6rem 0.95rem;
  color: var(--bz-text);
  background: var(--bz-hero-bg);
  border-radius: 1.1rem;
  border-bottom-left-radius: 0.35rem;
  overflow-wrap: anywhere;
}

.bz-msg-mine .bz-msg-body {
  color: var(--bz-primary-text);
  background: var(--bz-primary);
  border-radius: 1.1rem;
  border-bottom-right-radius: 0.35rem;
}

.bz-msg-body > :last-child {
  margin-bottom: 0;
}

.bz-msg-meta {
  margin: 0.2rem 0.4rem 0;
  font-size: 0.8rem;
  color: var(--bz-muted);
}

/* a line the page could not read as a message (an old note with no text, a CRM stamp): centred, small */
.bz-msg-system {
  align-self: center;
  max-width: 100%;
  padding: 0 0.5rem;
  font-size: 0.85rem;
  color: var(--bz-muted);
  text-align: center;
}

.bz-chat-empty {
  margin: auto 0;
  padding: 2rem 1rem;
  color: var(--bz-muted);
  text-align: center;
}

.bz-chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: end;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bz-border);
}

.bz-chat-form .form-control {
  resize: none;
}

.bz-chat-send {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 45px;
}

.bz-chat-send svg {
  width: 18px;
  height: 18px;
}

.bz-chat-form .bz-form-note {
  grid-column: 1 / -1;
  margin: 0;
}

.bz-chat-hint {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  color: var(--bz-muted);
}

/* private notes (admin, staff and tutor): a closed card under the grid */
.bz-private {
  margin-top: 1.5rem;
}

.bz-private summary {
  font-family: var(--bz-font-heading);
  font-size: 1.15rem;
  font-weight: var(--bz-heading-weight);
  cursor: pointer;
}

.bz-private-list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.bz-private-list li + li {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--bz-border);
}

.bz-private-list p {
  margin: 0;
}

.bz-private-list small {
  color: var(--bz-muted);
}

.bz-private-empty {
  margin: 1rem 0 0;
  color: var(--bz-muted);
}

/* the Problem box (clients only): a native dialog, no library */
.bz-dialog {
  width: min(540px, calc(100% - 2rem));
  padding: 0;
  color: var(--bz-text);
  background: var(--bz-card-bg);
  border: 0;
  border-radius: var(--bz-radius);
  box-shadow: 0 16px 48px rgba(28, 31, 38, 0.3);
}

.bz-dialog::backdrop {
  background: rgba(28, 31, 38, 0.55);
}

.bz-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--bz-border);
}

.bz-dialog-head h2 {
  margin: 0;
  font-size: 1.25rem;
}

.bz-dialog-close {
  width: 44px;
  height: 44px;
  margin-right: -0.75rem;
  padding: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--bz-muted);
  background: none;
  border: 0;
  cursor: pointer;
}

.bz-dialog-body {
  padding: 1.25rem 1.5rem;
}

.bz-dialog-body .bz-form-note {
  margin-bottom: 1.1rem;
}

.bz-dialog-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--bz-border);
}

/* the session could not be found: one centred card */
.bz-status-notfound {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.bz-status-notfound p:last-child {
  margin-bottom: 0;
}

/* stacked: the chat comes first, unless the viewer has a session to confirm (then the confirm block stays on top) */
@media (max-width: 991.98px) {
  .bz-status:not(.bz-status-can-confirm) .bz-chat {
    order: -1;
  }
}

@media (max-width: 575.98px) {
  .bz-status-card {
    padding: 1.25rem 1rem;
  }

  .bz-status-when {
    font-size: 1.15rem;
  }

  .bz-status-problem {
    width: 100%;
    margin-left: 0;
    justify-content: center;
  }

  .bz-status-details {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem 0;
  }

  .bz-status-details dd {
    margin-bottom: 0.6rem;
  }

  .bz-msg {
    max-width: 92%;
  }

  .bz-confirm-actions .btn,
  .bz-dialog-foot .btn {
    width: 100%;
  }

  .bz-confirm .bz-choices .form-check {
    min-height: 44px;
  }
}

/* ==========================================================================
   Smart Learn result pages: one centred card (the outcome icon, the message, the event, the details, a closing line)
   ========================================================================== */
.bz-result {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.bz-result-card {
  max-width: 560px;
  margin: 0 auto;
  padding: 2rem 1.75rem;
  text-align: center;
  background: var(--bz-card-bg);
  border: var(--bz-card-border);
  border-radius: var(--bz-radius);
  box-shadow: var(--bz-card-shadow);
}

/* the outcome icon: a 72px disc, coloured by the outcome (done, started, skipped, later) */
.bz-result-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 1.25rem;
  color: #ffffff;
  background: var(--bz-primary);
  border-radius: 50%;
}

.bz-result-icon svg {
  width: 36px;
  height: 36px;
}

.bz-result-done {
  background: #2f855a;
}

.bz-result-started {
  background: #b7791f;
}

.bz-result-skipped {
  background: #6b7280;
}

.bz-result-message {
  margin: 0 0 0.35rem;
  font-size: 1.45rem;
}

.bz-result-event {
  margin: 0;
  font-size: 1.05rem;
  color: var(--bz-muted);
}

.bz-result-event strong {
  color: var(--bz-text);
}

.bz-result-card hr {
  margin: 1.25rem 0;
  border-top: 1px solid var(--bz-border);
  opacity: 1;
}

.bz-result-card p {
  margin: 0 0 0.5rem;
}

.bz-result-card p:last-child {
  margin-bottom: 0;
}

/* progress: the sentence, then a thin bar in the brand colour */
.bz-result-progress {
  margin: 0 0 1.25rem;
}

.bz-result-bar {
  height: 8px;
  margin-top: 0.6rem;
  overflow: hidden;
  background: var(--bz-surface);
  border: 1px solid var(--bz-border);
  border-radius: 999px;
}

.bz-result-bar > span {
  display: block;
  height: 100%;
  background: var(--bz-primary);
  border-radius: 999px;
}

/* the next step: a label, the strategy, its date */
.bz-result-next {
  padding: 1rem 1.25rem;
  text-align: left;
  background: var(--bz-surface);
  border-radius: var(--bz-radius);
}

.bz-result-label {
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bz-muted);
}

.bz-result-next-title {
  margin: 0;
  font-weight: 600;
}

.bz-result-next-date {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.25rem 0 0;
  color: var(--bz-muted);
}

.bz-result-next-date svg {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}

/* the reflection scores: one row per OPIR stage, five segments each */
.bz-result-scores {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.bz-result-scores li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--bz-border);
}

.bz-result-scores li:last-child {
  border-bottom: 0;
}

.bz-result-meter {
  display: flex;
  gap: 3px;
}

.bz-result-meter span {
  width: 18px;
  height: 8px;
  background: var(--bz-surface);
  border: 1px solid var(--bz-border);
  border-radius: 2px;
}

.bz-result-meter span.on {
  background: var(--bz-primary);
  border-color: var(--bz-primary);
}

.bz-result-score {
  min-width: 3.2rem;
  font-weight: 600;
  text-align: right;
}

.bz-result-na .bz-result-score {
  color: var(--bz-muted);
}

/* the closing line */
.bz-result-foot {
  font-size: 0.95rem;
  color: var(--bz-muted);
}

@media (max-width: 575.98px) {
  .bz-result-card {
    padding: 1.5rem 1.25rem;
  }

  .bz-result-icon {
    width: 64px;
    height: 64px;
  }

  .bz-result-icon svg {
    width: 32px;
    height: 32px;
  }

  .bz-result-message {
    font-size: 1.3rem;
  }
}

/* ==========================================================================
   Smart Learn event-reflection form: the result card with four stage questions, six tap choices each (plain radios)
   ========================================================================== */
/* the scale legend, once, under the intro sentence (A1-D23) */
.bz-reflect-card .bz-reflect-legend {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  color: var(--bz-muted);
}

.bz-reflect-stage {
  min-width: 0;
  margin: 0;
  padding: 0 0 1rem;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--bz-border);
}

/* a legend sits on the fieldset's top edge, so the space above each stage is the legend's own padding */
.bz-reflect-stage:first-of-type legend {
  padding-top: 0;
}

.bz-reflect-stage legend {
  float: none;
  width: auto;
  margin: 0 0 0.15rem;
  padding: 1rem 0 0;
  font-family: var(--bz-font-heading);
  font-size: 1.1rem;
  font-weight: var(--bz-heading-weight);
}

.bz-reflect-card .bz-reflect-hint {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  color: var(--bz-muted);
}

/* the six choices: 1 to 5 and N/A, equal columns, 44px tap targets */
.bz-reflect-scale {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.bz-reflect-opt {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}

.bz-reflect-opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.bz-reflect-opt span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--bz-text);
  background: var(--bz-card-bg);
  border: 1px solid var(--bz-border);
  border-radius: var(--bz-radius);
}

.bz-reflect-opt:hover span {
  border-color: var(--bz-primary);
}

.bz-reflect-opt input:checked + span {
  color: var(--bz-primary-text);
  background: var(--bz-primary);
  border-color: var(--bz-primary);
}

.bz-reflect-opt input:focus-visible + span {
  outline: 2px solid var(--bz-focus);
  outline-offset: 2px;
}

/* a stage left unanswered after a Submit press (the browser also shows its own prompt) */
.bz-reflect-stage:has(input:user-invalid) legend {
  color: var(--bz-danger);
}

.bz-reflect-stage:has(input:user-invalid) .bz-reflect-opt span {
  border-color: var(--bz-danger);
}

/* the server note above Submit (A1-D25) */
.bz-reflect-note {
  margin: 1.25rem 0 0;
  text-align: left;
}

.bz-reflect-note:not([hidden]) + .bz-reflect-submit {
  margin-top: 1rem;
}

.bz-reflect-submit {
  width: 100%;
  min-height: 48px;
  margin-top: 1.5rem;
}

/* ==========================================================================
   Smart Learn sign-up pages (verify e-mail, account setup): the login card with a note inside it and a done pane
   ========================================================================== */
/* a note inside the card sits in the pane's grid, so the grid's gap spaces it */
.bz-login-pane .bz-form-note {
  margin: 0;
}

/* the done pane: the check disc, a heading, the sentences, one button */
.bz-signup-done {
  justify-items: center;
  text-align: center;
}

/* the script moves focus to the pane's first line; no ring on text that is not a control */
.bz-signup-done [tabindex="-1"]:focus {
  outline: 0;
}

.bz-signup-done .bz-login-heading {
  margin: 0;
}

.bz-signup-done .btn,
.bz-signup-done .bz-form-note {
  justify-self: stretch;
}

.bz-signup-done .bz-form-note {
  text-align: left;
}

/* the account setup page: the line under the Username field when the name is taken or could not be checked */
.bz-setup-status {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bz-danger);
}

/* the list of what is missing, inside the red note */
.bz-login-pane .bz-form-note ul {
  margin: 0.35rem 0 0;
  padding-left: 1.2rem;
}

/* ==========================================================================
   On-demand reconcile page: the result card with the session line, one button and the rule under it
   ========================================================================== */
/* the session's date and time under the client's name */
.bz-od-date {
  color: var(--bz-muted);
  text-wrap: balance;
}

.bz-od-date svg {
  width: 1em;
  height: 1em;
  margin-right: 0.4rem;
  vertical-align: -0.125em;
}

.bz-reconcile-card .btn {
  margin: 0.75rem 0 1.25rem;
  min-width: 14rem;
}

/* the rule the tutor must follow before taking another on-demand session */
.bz-reconcile-rule {
  font-size: 0.875rem;
  color: var(--bz-danger);
  text-wrap: balance;
}

@media (max-width: 575.98px) {
  .bz-reconcile-card .btn {
    width: 100%;
  }
}

/* ==========================================================================
   On-demand review page: the result card with the tutor, two star questions, one yes/no, feedback and Submit
   ========================================================================== */
.bz-review-card {
  position: relative;
}

/* the Problem button sits in the card's top right corner; under 576px it drops below the form */
.bz-review-card .bz-status-problem {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.bz-review-photo {
  display: block;
  width: 100px;
  height: 100px;
  margin: 0 auto 1rem;
  object-fit: cover;
  border-radius: 50%;
}

.bz-review-form {
  display: grid;
  gap: 1.5rem;
  justify-items: center;
}

.bz-review-form fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.bz-review-form legend,
.bz-review-label {
  display: block;
  float: none;
  width: auto;
  margin: 0 0 0.35rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

.bz-review-form .form-check {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  margin: 0;
  padding: 0;
}

.bz-review-form .form-check-input {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  border-color: var(--bz-muted);
}

.bz-review-yesno {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

/* five stars, 44px each: a grey row, the gold row on top cut to the value, the real range input over both */
.bz-stars {
  position: relative;
  display: block;
  width: 220px;
  height: 44px;
  margin: 0 auto;
  cursor: pointer;
  border-radius: var(--bz-radius);
  touch-action: none;
}

.bz-stars-track,
.bz-stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9z%22/%3E%3C/svg%3E") left center / 44px 44px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9z%22/%3E%3C/svg%3E") left center / 44px 44px repeat-x;
}

.bz-stars-track {
  width: 100%;
  background: #cfd4da;
}

.bz-stars-fill {
  width: calc(var(--bz-stars-value, 0) * 20%);
  background: #e0a100;
}

.bz-stars input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.bz-stars:has(input:focus-visible) {
  outline: 2px solid var(--bz-primary);
  outline-offset: 4px;
}

/* a saved review is locked (A1-D32): the stars stay readable, nothing reacts */
.bz-stars:has(input:disabled) {
  cursor: default;
  opacity: 0.8;
}

.bz-stars-value {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.875rem;
  color: var(--bz-muted);
}

/* the optional feedback box: closed until asked for */
.bz-review-feedback {
  justify-self: stretch;
}

.bz-review-feedback summary {
  display: inline-block;
  padding: 0.6rem 0.5rem;
  text-decoration: underline;
  cursor: pointer;
  list-style: none;
}

.bz-review-feedback summary::-webkit-details-marker {
  display: none;
}

.bz-review-feedback textarea {
  margin-top: 0.35rem;
}

.bz-review-form .btn-primary {
  min-width: 14rem;
}

.bz-review-form .bz-form-note {
  justify-self: stretch;
  margin: 0;
  text-align: left;
}

.bz-review-back {
  max-width: 560px;
  margin: 1.25rem auto 0;
  text-align: center;
}

@media (max-width: 575.98px) {
  .bz-review-card .bz-status-problem {
    position: static;
    margin-top: 1.5rem;
  }

  .bz-review-form .btn-primary {
    width: 100%;
  }
}

/* ==========================================================================
   On-demand page: the inquiry layout (form card + the tenant's welcome message), the booking switch as links,
   and the waiting box
   ========================================================================== */
/* the booking switch (Single / Groups / On-Demand) is links here; the page you are on is drawn as the pressed one */
.bz-form-switch-btn[aria-current="page"] {
  --bs-btn-color: var(--bz-primary-text);
  --bs-btn-bg: var(--bz-primary);
  --bs-btn-border-color: var(--bz-primary);
  --bs-btn-hover-color: var(--bz-primary-text);
  --bs-btn-hover-bg: var(--bz-primary);
  --bs-btn-hover-border-color: var(--bz-primary);
}

/* no welcome message: the card alone in one column, at its two-thirds width */
.bz-ondemand .bz-ondemand-solo {
  grid-template-columns: minmax(0, 1fr);
  max-width: 760px;
}

.bz-ondemand-form {
  display: grid;
  gap: 1rem;
}

.bz-ondemand-form > p,
.bz-ondemand-form .bz-inquiry-title {
  margin: 0;
}

.bz-ondemand-form .bz-inquiry-actions {
  margin-top: 0.25rem;
}

.bz-ondemand-form .bz-form-note ul {
  margin: 0;
  padding-left: 1.1rem;
}

.bz-ondemand-assist {
  font-size: 0.875rem;
  color: var(--bz-muted);
}

/* the waiting box: the spinner, the tenant's wait message, Cancel Request; no close button, Esc does nothing */
.bz-ondemand-wait {
  display: grid;
  gap: 1rem;
  justify-items: center;
  padding: 2rem 1.5rem 1.5rem;
  text-align: center;
}

.bz-ondemand-wait p {
  margin: 0;
}

.bz-ondemand-wait .spinner-border {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--bz-primary);
}

.bz-ondemand-wait .bz-form-note {
  justify-self: stretch;
  margin: 0;
  text-align: left;
}

/* phones and tablets: the welcome message first, then the form */
@media (max-width: 991.98px) {
  .bz-ondemand .bz-inquiry-aside {
    order: -1;
  }
}

@media (max-width: 575.98px) {
  .bz-form-switch a.bz-form-switch-btn {
    flex: 1 1 auto;
  }
}

/* ==========================================================================
   Single booking page: the steps card beside the summary card (tutor list, tutor, weekly hours, day grid),
   then the sign-in block (Login / Create Account / Guest)
   ========================================================================== */
/* the visitor's own time zone, read from the browser */
.bz-booking-zone {
  margin: -0.75rem 0 1.5rem;
  font-size: 0.95rem;
  color: var(--bz-muted);
}

/* the steps one third, the summary two thirds from 992px; stacked below (steps first) */
.bz-booking-grid {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 992px) {
  .bz-booking-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
}

.bz-booking-form {
  display: grid;
  gap: 1rem;
}

.bz-booking-form .bz-inquiry-title,
.bz-booking-form .bz-form-note {
  margin: 0;
}

.bz-booking-form .btn-primary {
  width: 100%;
}

.bz-booking-form .bz-form-note ul {
  margin: 0;
  padding-left: 1.1rem;
}

.bz-booking-times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

/* the availability line: the dot is empty until both times are chosen, then green or orange */
.bz-booking-avail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.bz-booking-avail span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
}

.bz-booking-dot {
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid var(--bz-border);
  border-radius: 50%;
}

.bz-booking-dot.is-open {
  background: #2f855a;
  border-color: #2f855a;
}

.bz-booking-dot.is-taken {
  background: #dd6b20;
  border-color: #dd6b20;
}

/* the summary card: one block per step, a rule between them */
.bz-booking-summary {
  display: grid;
  gap: 1.5rem;
}

.bz-booking-block + .bz-booking-block {
  padding-top: 1.5rem;
  border-top: 1px solid var(--bz-border);
}

.bz-booking-block h3 {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
}

.bz-booking-block h3:last-child {
  margin-bottom: 0;
}

.bz-booking-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}

.bz-booking-block-head h3 {
  margin: 0;
}

.bz-booking-rules {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.95rem;
  color: var(--bz-muted);
}

.bz-booking-empty {
  margin: 0;
  padding: 2.5rem 1.25rem;
  text-align: center;
  color: var(--bz-muted);
  border: 1px dashed var(--bz-border);
  border-radius: var(--bz-radius);
}

/* the skills filter: closed until asked for; each skill is a chip that can be switched on */
.bz-skill-filter {
  margin-bottom: 1rem;
  border: 1px solid var(--bz-border);
  border-radius: var(--bz-radius);
}

.bz-skill-filter summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
  font-weight: 600;
  cursor: pointer;
}

.bz-skill-filter-body {
  display: grid;
  gap: 0.75rem;
  padding: 0.25rem 1rem 1rem;
}

.bz-skill-filter .bz-chips {
  justify-content: flex-start;
}

.bz-chip-check {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}

.bz-chip-check input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.bz-chip-check .bz-chip {
  display: block;
  padding: 0.45rem 0.9rem;
}

.bz-chip-check input:checked + .bz-chip {
  color: var(--bz-primary-text);
  background: var(--bz-primary);
  border-color: var(--bz-primary);
}

.bz-chip-check input:focus-visible + .bz-chip {
  outline: 3px solid var(--bz-focus);
  outline-offset: 2px;
}

.bz-skill-filter .btn {
  justify-self: start;
}

/* the tutor list: one row per tutor */
.bz-tutor-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bz-tutor {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 0.5rem 1rem;
  padding: 1rem;
  border: 1px solid var(--bz-border);
  border-radius: var(--bz-radius);
}

.bz-tutor-photo {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
}

.bz-tutor-name {
  margin: 0;
  font-size: 1.1rem;
}

.bz-tutor-position {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bz-muted);
}

.bz-tutor .bz-chips {
  justify-content: flex-start;
  max-height: 4.75rem;
  margin-top: 0.5rem;
  overflow-y: auto;
}

.bz-tutor .bz-chip {
  font-size: 0.85rem;
}

.bz-tutor-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* the chosen tutor: the photo beside the position, the excerpt and the skills */
.bz-booking-tutor {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 1rem 1.25rem;
}

.bz-booking-tutor .bz-tutor-photo {
  width: 96px;
  height: 96px;
}

.bz-booking-tutor p {
  margin: 0 0 0.5rem;
}

.bz-booking-tutor .bz-chips {
  justify-content: flex-start;
}

/* the day grid: four days from the chosen date, one row per time slot; a tap on an open slot fills the time boxes */
.bz-daygrid-wrap {
  max-height: 540px;
  overflow: auto;
  border: 1px solid var(--bz-border);
  border-radius: var(--bz-radius);
}

.bz-daygrid {
  display: grid;
  grid-template-columns: 5rem repeat(var(--bz-days, 4), minmax(0, 1fr));
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.bz-daygrid-head {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.5rem 0.25rem;
  text-align: center;
  font-weight: 600;
  line-height: 1.3;
  background: var(--bz-surface);
  border-bottom: 1px solid var(--bz-border);
}

.bz-daygrid-head small {
  display: block;
  font-weight: 400;
  color: var(--bz-muted);
}

.bz-daygrid-time {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 0.5rem;
  white-space: nowrap;
  color: var(--bz-muted);
  border-top: 1px solid var(--bz-border);
}

.bz-slot {
  min-height: 44px;
  padding: 0 0.15rem;
  font: inherit;
  color: var(--bz-muted);
  background: var(--bz-surface);
  border: 0;
  border-top: 1px solid var(--bz-border);
  border-left: 1px solid var(--bz-border);
}

.bz-daygrid[data-step="5"] .bz-slot,
.bz-daygrid[data-step="10"] .bz-slot,
.bz-daygrid[data-step="15"] .bz-slot {
  min-height: 30px;
}

.bz-slot.is-open {
  color: var(--bz-text);
  background: #e6f4ea;
  cursor: pointer;
}

.bz-slot.is-open:hover {
  background: #cfe9d7;
}

.bz-slot.is-busy {
  color: #fff;
  background: #5a6068;
}

.bz-slot.is-group {
  color: #5f4b00;
  background: #fff3bf;
  cursor: pointer;
}

.bz-slot.is-picked,
.bz-slot.is-picked:hover {
  color: var(--bz-primary-text);
  background: var(--bz-primary);
}

.bz-slot:focus-visible {
  position: relative;
  outline: 3px solid var(--bz-focus);
  outline-offset: -3px;
}

.bz-daygrid-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin: 0.75rem 0 0;
  padding: 0;
  font-size: 0.85rem;
  color: var(--bz-muted);
  list-style: none;
}

.bz-daygrid-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.bz-daygrid-legend i {
  width: 0.9rem;
  height: 0.9rem;
  border: 1px solid var(--bz-border);
  border-radius: 3px;
}

/* the sign-in block under Proceed */
.bz-signin {
  display: grid;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bz-border);
}

.bz-signin .bz-form-switch {
  margin: 0;
}

.bz-signin .bz-form-switch-btn {
  flex: 1 1 auto;
  --bs-btn-padding-x: 0.6rem;
}

.bz-signin-pane {
  display: grid;
  gap: 1rem;
}

.bz-signin-forgot {
  justify-self: end;
  font-size: 0.9rem;
}

@media (max-width: 575.98px) {
  .bz-tutor-actions .btn {
    flex: 1 1 0;
  }

  /* full-size tap targets on phones */
  .bz-tutor-actions .btn,
  .bz-booking-block-head .btn,
  .bz-skill-filter .btn {
    --bs-btn-padding-y: 0.6rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 0.95rem;
  }

  .bz-chip-check .bz-chip {
    padding: 0.65rem 0.9rem;
  }

  .bz-booking-tutor {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .bz-booking-tutor .bz-tutor-photo {
    width: 72px;
    height: 72px;
  }

  .bz-daygrid {
    grid-template-columns: 3.9rem repeat(var(--bz-days, 4), minmax(0, 1fr));
    font-size: 0.75rem;
  }

  .bz-daygrid-time {
    padding: 0 0.3rem;
  }
}

/* ==========================================================================
   Pay first after a booking: the request card and the payment card. Reuses the Quick Pay and Secure Pay rules above.
   ========================================================================== */
/* request card: what is owed before the booking goes through, then the booking itself */
.bz-request-why {
  margin: 0 0 1.25rem;
}

/* a list to choose one from: the package deals of a tiered service, or the saved card against a new one */
.bz-pay-choices {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.bz-pay-choices legend {
  float: none;
  margin: 0 0 0.35rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
}

.bz-pay-choice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 48px;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  background: var(--bz-bg);
  border: 1px solid var(--bz-border);
  border-radius: var(--bz-radius);
}

.bz-pay-choice input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--bz-primary);
}

.bz-pay-choice:has(input:checked) {
  border-color: var(--bz-primary);
  box-shadow: inset 0 0 0 1px var(--bz-primary);
}

.bz-pay-choice:has(input:focus-visible) {
  outline: 2px solid var(--bz-focus);
  outline-offset: 2px;
}

.bz-pay-choice-text {
  min-width: 0;
}

.bz-pay-choice-text small {
  display: block;
  color: var(--bz-muted);
}

.bz-pay-choice-price {
  margin-left: auto;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* the discount code: the box, its Check button, the answer under them */
.bz-discount .btn {
  width: auto;
}

.bz-discount-note {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
}

.bz-discount-note.is-ok {
  color: #2f855a;
}

.bz-discount-note.is-bad {
  color: var(--bz-danger);
}

/* paid, but the booking did not go through: the reason and the way on, in place of the form */
.bz-pay-done .bz-form-note {
  margin: 1.25rem 0 0;
  text-align: left;
}

.bz-pay-done .bz-pay-done-sub {
  margin-top: 0.5rem;
  font-size: 1rem;
  font-weight: 400;
  color: var(--bz-muted);
}

@media (max-width: 575.98px) {
  .bz-pay-choice {
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
  }

  .bz-pay-choice-text {
    flex: 1 1 0;
  }
}

/* ==========================================================================
   Group booking page: the filter, the list of open groups and courses, and the one open row (about, tutors, a
   course's sessions, then the sign-in or the waiting list). Reuses the booking page's rules above.
   ========================================================================== */
/* the filter: three boxes and Reset on one line from 768px; stacked below */
.bz-groups-filter {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.bz-groups-filter .bz-field {
  margin: 0;
}

@media (min-width: 768px) {
  .bz-groups-filter {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
  }
}

/* phones: the filter folds behind the Filter button (groups.js adds .is-open); the button is hidden from 576px */
.bz-groups-filter-toggle {
  display: none;
}

@media (max-width: 575.98px) {
  .bz-groups-filter-toggle {
    display: block;
    width: 100%;
    margin-bottom: 1.25rem;
    --bs-btn-padding-y: 0.6rem;
  }

  .bz-groups-filter:not(.is-open) {
    display: none;
  }
}

.bz-groups .bz-form-note {
  margin: 0;
}

.bz-group-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bz-group {
  background: var(--bz-card-bg);
  border: 1px solid var(--bz-border);
  border-radius: var(--bz-radius);
}

/* the group the visitor tapped */
.bz-group.is-picked {
  border-color: var(--bz-primary);
  box-shadow: 0 0 0 1px var(--bz-primary);
}

.bz-group-h {
  margin: 0;
  font: inherit;
}

/* the whole row is the button: when, what, tags, arrow */
.bz-group-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.25rem;
  grid-template-areas: "when caret" "what what" "tags tags";
  gap: 0.4rem 1rem;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 1rem 1.1rem;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--bz-radius);
}

.bz-group-head:focus-visible {
  outline: 3px solid var(--bz-focus);
  outline-offset: 2px;
}

.bz-group-when {
  grid-area: when;
  display: grid;
}

.bz-group-date {
  font-weight: 700;
  color: var(--bz-title);
}

.bz-group-time {
  font-size: 0.95rem;
}

.bz-group-what {
  grid-area: what;
  display: grid;
  min-width: 0;
}

.bz-group-title {
  font-size: 1.1rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.bz-group-meta {
  font-size: 0.9rem;
  color: var(--bz-muted);
  overflow-wrap: anywhere;
}

.bz-group-tags {
  grid-area: tags;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.bz-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--bz-muted);
  white-space: nowrap;
  border: 1px solid var(--bz-border);
  border-radius: 999px;
}

.bz-tag-open {
  color: #22643f;
  background: #edf7f0;
  border-color: #b7dfc5;
}

.bz-tag-full {
  color: #8a5a0c;
  background: #fdf6e3;
  border-color: #f0dca8;
}

/* the arrow: down when closed, up when open */
.bz-group-caret {
  grid-area: caret;
  width: 0.6rem;
  height: 0.6rem;
  margin: 0 auto;
  border-right: 2px solid var(--bz-muted);
  border-bottom: 2px solid var(--bz-muted);
  transform: translateY(-25%) rotate(45deg);
}

.bz-group-head[aria-expanded="true"] .bz-group-caret {
  transform: translateY(25%) rotate(-135deg);
}

@media (min-width: 768px) {
  .bz-group-head {
    grid-template-columns: 11.5rem minmax(0, 1fr) auto 1.25rem;
    grid-template-areas: "when what tags caret";
  }

  .bz-group-tags {
    justify-content: flex-end;
  }
}

/* the open row: about the group on the left, the sign-in on the right from 992px; stacked below */
.bz-group-panel {
  display: grid;
  gap: 1.5rem 2rem;
  padding: 1.25rem 1.1rem;
  border-top: 1px solid var(--bz-border);
}

@media (min-width: 992px) {
  .bz-group-panel {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
  }
}

.bz-group-about {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.bz-group-about h4,
.bz-group-join h4 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
}

.bz-group-note > :last-child,
.bz-group-about .bz-tutor p:last-child {
  margin-bottom: 0;
}

.bz-group-about .bz-tutor p {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.95rem;
}

/* a course: its deadlines and every session in it */
.bz-group-dates {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.2rem 1rem;
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
}

.bz-group-dates dt {
  font-weight: 600;
}

.bz-group-dates dd {
  margin: 0;
}

.bz-group-sessions {
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  border: 1px solid var(--bz-border);
  border-radius: var(--bz-radius);
}

.bz-group-sessions li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.1rem 1rem;
  padding: 0.5rem 0.85rem;
}

.bz-group-sessions li + li {
  border-top: 1px solid var(--bz-border);
}

.bz-group-sessions strong {
  color: var(--bz-title);
}

.bz-group-rule {
  margin: 0;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--bz-muted);
}

.bz-group-join {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.bz-group-join h4 {
  margin: 0;
}

.bz-group-join .bz-signin {
  padding-top: 0;
  border-top: 0;
}

.bz-group-join .btn-primary {
  width: 100%;
}

.bz-group-join .bz-form-note ul {
  margin: 0;
  padding-left: 1.1rem;
}

.bz-groups-more {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

@media (max-width: 575.98px) {
  .bz-groups-filter .btn,
  .bz-groups-more .btn {
    --bs-btn-padding-y: 0.6rem;
  }
}

/* ==========================================================================
   The website's footer, printed while the account's website is published (branded-footer.php). The rules are
   the theme's (bizstim-one style.css "Footer" + the contact lines), scoped to .bz-footer-site.
   ========================================================================== */
.bz-footer-site {
  background: var(--bz-footer-bg);
  color: var(--bz-primary-text);
}

.bz-footer-site a {
  color: inherit;
}

.bz-footer-site .bz-footer-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 3rem;
  padding-top: 2.5rem;
  padding-bottom: 2rem;
}

@media (min-width: 800px) {
  .bz-footer-site .bz-footer-columns {
    grid-template-columns: 1.4fr 1fr 1.2fr;
  }
}

.bz-footer-brand strong {
  font-family: var(--bz-font-heading);
  font-size: 1.2rem;
}

.bz-footer-brand p {
  margin: 0.25rem 0 0;
}

.bz-footer-tagline {
  opacity: 0.85;
}

.bz-footer-heading {
  font-family: var(--bz-font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  margin: 0 0 0.6rem;
}

.bz-footer-follow .bz-footer-heading + * {
  margin-bottom: 1.25rem;
}

.bz-footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bz-footer-nav li {
  margin: 0 0 0.4rem;
}

.bz-footer-nav a {
  text-decoration: none;
}

.bz-footer-nav a:hover {
  text-decoration: underline;
}

.bz-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.bz-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}

.bz-social-link:hover {
  background: rgba(255, 255, 255, 0.24);
}

.bz-social-link svg {
  width: 18px;
  height: 18px;
}

.bz-footer-reviews {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bz-review-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  font-size: 0.85rem;
  text-decoration: none;
}

.bz-review-link:hover {
  background: rgba(255, 255, 255, 0.12);
}

.bz-review-link svg {
  width: 14px;
  height: 14px;
}

.bz-footer-site .bz-footer-bottom {
  padding-top: 1rem;
  padding-bottom: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.8rem;
  opacity: 0.6;
}

.bz-footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
}

.bz-footer-legal-links a + a {
  margin-left: 1rem;
}

/* the linked phone number and e-mail address carry their icon and drop the underline (the theme's rule) */
.bz-phone,
.bz-email {
  margin: 0 0 0.25rem;
}

.bz-phone a,
.bz-email a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
}

.bz-phone a:hover,
.bz-phone a:focus-visible,
.bz-email a:hover,
.bz-email a:focus-visible {
  text-decoration: underline;
}

.bz-contact-icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}