/*!
 * BetterYou Co — Components
 * -----------------------------------------------------------------------
 * Reusable UI components: buttons, cards, form controls, badges, nav,
 * tables, alerts. Class-prefixed `by-` throughout so nothing collides
 * with Bootstrap's own component classes — we use Bootstrap for grid
 * and utility classes (d-flex, container, col-*, gap-*) and these for
 * all visual component styling.
 * -----------------------------------------------------------------------
 */

/* =====================================================================
 * Buttons — full pill shape, matching the app's ElevatedButton theme
 * ===================================================================== */
.by-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--by-space-2);
  font-family: var(--by-font-family);
  font-size: var(--by-fs-body-sm);
  font-weight: var(--by-fw-semibold);
  line-height: 1;
  border-radius: var(--by-radius-pill);
  padding: 0.95rem 1.9rem;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--by-duration-fast) var(--by-ease),
              box-shadow var(--by-duration-fast) var(--by-ease),
              background-color var(--by-duration-fast) var(--by-ease),
              color var(--by-duration-fast) var(--by-ease),
              border-color var(--by-duration-fast) var(--by-ease);
}
.by-btn:active { transform: scale(0.97); }

.by-btn--primary {
  background: var(--by-primary);
  color: #fff;
  box-shadow: var(--by-shadow-primary);
}
.by-btn--primary:hover {
  background: var(--by-primary-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -10px rgba(82, 124, 49, 0.42);
}

.by-btn--outline {
  background: var(--by-surface);
  color: var(--by-heading);
  border: 1.5px solid var(--by-outline);
}
.by-btn--outline:hover {
  border-color: var(--by-primary);
  color: var(--by-primary);
  transform: translateY(-2px);
}

.by-btn--ghost {
  background: transparent;
  color: var(--by-heading);
  border: 1.5px solid transparent;
}
.by-btn--ghost:hover { color: var(--by-primary); }

.by-btn--white {
  background: #fff;
  color: var(--by-primary);
}
.by-btn--white:hover {
  transform: translateY(-2px);
  box-shadow: var(--by-shadow-md);
}

.by-btn--sm { padding: 0.65rem 1.3rem; font-size: var(--by-fs-caption); }
.by-btn--lg { padding: 1.1rem 2.4rem; font-size: var(--by-fs-body); }
.by-btn--block { display: flex; width: 100%; }
.by-btn--icon { padding: 0.7rem; border-radius: 50%; }
.by-btn[disabled], .by-btn.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Circular icon-only button (back arrow, social login, etc.) */
.by-btn-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--by-outline);
  background: var(--by-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--by-heading);
  cursor: pointer;
  transition: transform var(--by-duration-fast) var(--by-ease), box-shadow var(--by-duration-fast) var(--by-ease);
}
.by-btn-circle:hover { transform: translateY(-2px); box-shadow: var(--by-shadow-sm); color: var(--by-primary); }

/* =====================================================================
 * Cards
 * ===================================================================== */
.by-card {
  background: var(--by-surface);
  border-radius: var(--by-radius-lg);
  border: 1px solid var(--by-outline);
  padding: var(--by-space-6);
}

.by-card--flush { padding: 0; overflow: hidden; }

.by-card--hover {
  transition: transform var(--by-duration-base) var(--by-ease), box-shadow var(--by-duration-base) var(--by-ease);
}
.by-card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--by-shadow-md);
}

/* Selectable card (instrument picker, DASS-21/GAD-7 style choice) */
.by-card--selectable {
  cursor: pointer;
  border-width: 1.5px;
  transition: border-color var(--by-duration-fast) var(--by-ease),
              background-color var(--by-duration-fast) var(--by-ease),
              transform var(--by-duration-fast) var(--by-ease);
}
.by-card--selectable:hover { transform: translateY(-2px); }
.by-card--selectable.is-selected {
  border-color: var(--by-primary);
  background: var(--by-primary-tint);
}

/* Icon badge used atop feature/tile cards */
.by-icon-badge {
  width: 48px;
  height: 48px;
  border-radius: var(--by-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.by-icon-badge--circle { border-radius: 50%; }
.by-icon-badge svg { width: 22px; height: 22px; }

.by-icon-badge--teal { background: var(--by-tag-pale-mint); color: var(--by-icon-teal); }
.by-icon-badge--purple { background: var(--by-tag-lavender); color: var(--by-icon-purple); }
.by-icon-badge--gold { background: var(--by-tag-pale-gold); color: var(--by-support-terracotta); }
.by-icon-badge--tan { background: var(--by-tag-tan); color: var(--by-tag-dark-green); }

/* =====================================================================
 * Badges / pills / tags
 * ===================================================================== */
.by-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--by-fs-caption);
  font-weight: var(--by-fw-bold);
  padding: 0.4em 0.9em;
  border-radius: var(--by-radius-pill);
  line-height: 1.3;
  white-space: nowrap;
}
.by-badge--eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--by-tag-pale-mint);
  color: var(--by-icon-teal);
}
.by-badge--minimal { background: var(--by-severity-minimal-bg); color: var(--by-severity-minimal-fg); }
.by-badge--mild { background: var(--by-severity-mild-bg); color: var(--by-severity-mild-fg); }
.by-badge--moderate { background: var(--by-severity-moderate-bg); color: var(--by-severity-moderate-fg); }
.by-badge--severe { background: var(--by-severity-severe-bg); color: var(--by-severity-severe-fg); }
.by-badge--neutral { background: var(--by-outline); color: var(--by-body); }

/* =====================================================================
 * Forms — pill-shaped inputs matching the app's rounded fields
 * ===================================================================== */
.by-field { margin-bottom: var(--by-space-5); }
.by-label {
  display: block;
  font-size: var(--by-fs-body-sm);
  font-weight: var(--by-fw-semibold);
  color: var(--by-heading);
  margin-bottom: var(--by-space-2);
}

.by-input,
.by-select {
  width: 100%;
  font-family: var(--by-font-family);
  font-size: var(--by-fs-body);
  color: var(--by-heading);
  background: var(--by-surface);
  border: 1.5px solid var(--by-outline);
  border-radius: var(--by-radius-pill);
  padding: 0.9rem 1.4rem;
  transition: border-color var(--by-duration-fast) var(--by-ease), box-shadow var(--by-duration-fast) var(--by-ease);
}
.by-input::placeholder { color: var(--by-body-muted); }
.by-input:focus, .by-select:focus {
  outline: none;
  border-color: var(--by-primary);
  box-shadow: 0 0 0 4px var(--by-primary-tint);
}
.by-input.is-invalid { border-color: var(--by-severity-severe-fg); }

.by-input-group { position: relative; }
.by-input-group .by-input { padding-right: 3rem; }
.by-input-group__icon {
  position: absolute;
  right: 1.3rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--by-body-muted);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
}

.by-checkbox {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--by-primary);
}

/* =====================================================================
 * Alerts / feedback
 * ===================================================================== */
.by-alert {
  border-radius: var(--by-radius-md);
  padding: var(--by-space-4) var(--by-space-5);
  font-size: var(--by-fs-body-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--by-space-3);
  margin-bottom: var(--by-space-5);
}
.by-alert--error { background: var(--by-severity-severe-bg); color: var(--by-severity-severe-fg); }
.by-alert--success { background: var(--by-tag-pale-mint); color: var(--by-tag-dark-green); }
.by-alert ul { margin: 0; padding-left: 1.1em; }

/* =====================================================================
 * Avatar (specialist photo / initials fallback) — sized via modifier
 * ===================================================================== */
.by-avatar {
  border-radius: 50%;
  background: var(--by-tag-lavender);
  color: var(--by-icon-purple);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--by-fw-bold);
  flex-shrink: 0;
  overflow: hidden;
  object-fit: cover;
}
.by-avatar--md { width: 56px; height: 56px; font-size: var(--by-fs-h3); }
.by-avatar--lg { width: 96px; height: 96px; font-size: var(--by-fs-display); }

/* =====================================================================
 * Rating (star display) — filled stars use --by-tag-gold, matching the
 * badge/tag accent palette rather than a new color.
 * ===================================================================== */
.by-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--by-space-2);
  font-size: var(--by-fs-body-sm);
  color: var(--by-heading);
  font-weight: var(--by-fw-semibold);
}
.by-rating__stars { display: inline-flex; gap: 2px; color: var(--by-tag-gold); }
.by-rating__stars svg { width: 15px; height: 15px; }
.by-rating__stars svg.is-empty { color: var(--by-outline); }

/* =====================================================================
 * Price display (program cards / detail)
 * ===================================================================== */
.by-price {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
}
.by-price__currency { font-size: var(--by-fs-body-sm); font-weight: var(--by-fw-semibold); color: var(--by-body); }
.by-price__amount { font-size: var(--by-fs-h1); font-weight: var(--by-fw-bold); color: var(--by-heading); font-variant-numeric: tabular-nums; }
.by-price__amount--sm { font-size: var(--by-fs-h3); }

/* =====================================================================
 * Role toggle (login/signup "I'm a Patient" / "I'm an Expert")
 * ===================================================================== */
.by-role-toggle {
  display: flex;
  background: var(--by-bg);
  border-radius: var(--by-radius-pill);
  padding: 4px;
  gap: 4px;
}
.by-role-toggle__option {
  flex: 1;
  text-align: center;
  padding: 0.7rem 1rem;
  border-radius: var(--by-radius-pill);
  font-size: var(--by-fs-body-sm);
  font-weight: var(--by-fw-semibold);
  color: var(--by-body);
  cursor: pointer;
  transition: background-color var(--by-duration-fast) var(--by-ease), color var(--by-duration-fast) var(--by-ease);
}
.by-role-toggle input[type="radio"]:checked + .by-role-toggle__option {
  background: var(--by-primary);
  color: #fff;
}

/* =====================================================================
 * Navigation
 * ===================================================================== */
.by-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(247, 242, 239, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--by-duration-base) var(--by-ease), box-shadow var(--by-duration-base) var(--by-ease);
}
.by-nav.is-scrolled {
  border-color: var(--by-outline);
  box-shadow: var(--by-shadow-sm);
}
.by-nav__inner {
  height: var(--by-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--by-space-5);
}
.by-nav__logo img { height: 34px; width: auto; display: block; }
.by-nav__links { display: flex; align-items: center; gap: var(--by-space-6); }
.by-nav__link {
  font-size: var(--by-fs-body-sm);
  font-weight: var(--by-fw-medium);
  color: var(--by-heading);
  position: relative;
  padding-block: 4px;
}
.by-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--by-primary);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--by-duration-base) var(--by-ease);
}
.by-nav__link:hover::after,
.by-nav__link.is-active::after { transform: scaleX(1); }
.by-nav__link.is-active { color: var(--by-primary); }
.by-nav__actions { display: flex; align-items: center; gap: var(--by-space-3); }
.by-nav__avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--by-tag-lavender);
  color: var(--by-icon-purple);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--by-fw-bold);
  font-size: var(--by-fs-body-sm);
}

/* Mobile nav toggle + offcanvas panel */
.by-nav__toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--by-outline);
  background: var(--by-surface);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
@media (max-width: 991.98px) {
  .by-nav__links { display: none; }
  .by-nav__toggle { display: inline-flex; }
}

/* Mobile nav slide-down panel — deliberately not a max-height transition
   (historically flaky across browsers, especially mobile Safari); a
   plain display toggle plus a fade/slide-in keyframe is simpler and
   more reliable. */
.by-nav-panel {
  display: none;
  background: var(--by-surface);
  border-bottom: 1px solid var(--by-outline);
  max-height: 80vh;
  overflow-y: auto;
}
@media (max-width: 991.98px) {
  .by-nav-panel.is-open {
    display: block;
    animation: by-fade-in-up var(--by-duration-base) var(--by-ease);
  }
}
.by-nav-panel__link {
  display: block;
  padding: var(--by-space-3) var(--by-space-2);
  font-size: var(--by-fs-body);
  font-weight: var(--by-fw-medium);
  color: var(--by-heading);
  border-radius: var(--by-radius-sm);
}
.by-nav-panel__link:hover,
.by-nav-panel__link.is-active { color: var(--by-primary); background: var(--by-primary-tint); }
body.by-nav-open { overflow: hidden; }

/* =====================================================================
 * Footer
 * ===================================================================== */
.by-footer {
  background: var(--by-surface);
  border-top: 1px solid var(--by-outline);
  padding-block: var(--by-space-9) var(--by-space-6);
}
.by-footer__heading {
  font-size: var(--by-fs-caption);
  font-weight: var(--by-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--by-heading);
  margin-bottom: var(--by-space-4);
}
.by-footer__link { display: block; font-size: var(--by-fs-body-sm); color: var(--by-body); margin-bottom: var(--by-space-3); }
.by-footer__link:hover { color: var(--by-primary); }
.by-footer__bottom {
  border-top: 1px solid var(--by-outline);
  margin-top: var(--by-space-7);
  padding-top: var(--by-space-5);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--by-space-3);
  font-size: var(--by-fs-caption);
  color: var(--by-body-muted);
}

/* =====================================================================
 * Table
 * ===================================================================== */
.by-table { width: 100%; border-collapse: collapse; }
.by-table th {
  text-align: left;
  font-size: var(--by-fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--by-body-muted);
  font-weight: var(--by-fw-bold);
  padding-bottom: var(--by-space-3);
}
.by-table td {
  padding: var(--by-space-4) 0;
  border-top: 1px solid var(--by-outline);
  font-size: var(--by-fs-body-sm);
  color: var(--by-heading);
  vertical-align: middle;
}
.by-table tr:last-child td { border-bottom: none; }

/* =====================================================================
 * Progress
 * ===================================================================== */
.by-progress {
  width: 100%;
  height: 8px;
  background: var(--by-outline);
  border-radius: var(--by-radius-pill);
  overflow: hidden;
}
.by-progress__bar {
  height: 100%;
  background: var(--by-primary);
  border-radius: var(--by-radius-pill);
  transition: width var(--by-duration-slow) var(--by-ease);
}

/* Ring / donut score visual */
.by-ring {
  width: 92px; height: 92px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.by-ring__inner {
  width: 70px; height: 70px;
  border-radius: 50%;
  background: var(--by-surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  font-weight: var(--by-fw-bold);
  color: var(--by-heading);
}

/* =====================================================================
 * Quiz option row (Likert-style selectable answers)
 * ===================================================================== */
.by-option {
  display: flex;
  align-items: center;
  gap: var(--by-space-4);
  padding: var(--by-space-4) var(--by-space-5);
  border-radius: var(--by-radius-md);
  border: 1.5px solid var(--by-outline);
  background: var(--by-surface);
  cursor: pointer;
  transition: border-color var(--by-duration-fast) var(--by-ease),
              background-color var(--by-duration-fast) var(--by-ease),
              transform var(--by-duration-fast) var(--by-ease);
}
.by-option:hover { transform: translateX(2px); border-color: var(--by-primary-light); }
.by-option__index {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--by-outline);
  color: var(--by-body);
  font-size: var(--by-fs-caption);
  font-weight: var(--by-fw-bold);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--by-duration-fast) var(--by-ease), color var(--by-duration-fast) var(--by-ease);
}
.by-option__label { font-size: var(--by-fs-body); font-weight: var(--by-fw-semibold); color: var(--by-heading); }
.by-option__desc { font-size: var(--by-fs-caption); color: var(--by-body-muted); margin-top: 2px; }
.by-option.is-selected {
  border-color: var(--by-primary);
  background: var(--by-primary-tint);
}
.by-option.is-selected .by-option__index {
  background: var(--by-primary);
  color: #fff;
}

/* =====================================================================
 * Horizontal stepper (My Program assignment-status progress) — every
 * column is a flexible, non-fixed-width flex item so N steps always
 * sum to the container's real width instead of a fixed per-step width
 * that silently overflows (and gets clipped with no scrollbar) on
 * narrow screens.
 * ===================================================================== */
.by-stepper { display: flex; align-items: flex-start; width: 100%; }
.by-stepper__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--by-space-2);
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}
.by-stepper__connector {
  flex: 0 1 32px;
  height: 2px;
  margin-top: 15px;
}
.by-stepper__dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: var(--by-fw-bold);
}
.by-stepper__label { font-size: 11px; line-height: 1.3; }
@media (max-width: 420px) {
  .by-stepper__connector { flex-basis: 14px; }
  .by-stepper__label { font-size: 10px; }
}

/* =====================================================================
 * Tag chip input (specialist profile — languages/specialties)
 * ===================================================================== */
.by-tag-field {
  display: flex;
  flex-wrap: wrap;
  gap: var(--by-space-2);
  align-items: center;
  padding: 0.6rem 0.8rem;
  border: 1.5px solid var(--by-outline);
  border-radius: var(--by-radius-lg);
  background: var(--by-surface);
}
.by-tag-field:focus-within { border-color: var(--by-primary); box-shadow: 0 0 0 4px var(--by-primary-tint); }
.by-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--by-tag-pale-mint);
  color: var(--by-tag-dark-green);
  font-size: var(--by-fs-caption);
  font-weight: var(--by-fw-semibold);
  padding: 0.3rem 0.4rem 0.3rem 0.7rem;
  border-radius: var(--by-radius-pill);
}
.by-tag-chip button {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 2px;
}
.by-tag-chip button:hover { opacity: 1; }
.by-tag-field input[type="text"] {
  border: none;
  outline: none;
  flex: 1 1 120px;
  min-width: 120px;
  font-family: var(--by-font-family);
  font-size: var(--by-fs-body-sm);
  padding: 0.3rem 0;
  background: transparent;
  color: var(--by-heading);
}

/* =====================================================================
 * Stat tile (specialist dashboard KPI row)
 * ===================================================================== */
.by-stat-tile {
  background: var(--by-surface);
  border: 1px solid var(--by-outline);
  border-radius: var(--by-radius-lg);
  padding: var(--by-space-5);
}
.by-stat-tile__value {
  font-size: var(--by-fs-h1);
  font-weight: var(--by-fw-bold);
  color: var(--by-heading);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.by-stat-tile__label {
  font-size: var(--by-fs-caption);
  color: var(--by-body-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--by-fw-bold);
  margin-bottom: var(--by-space-2);
}
.by-stat-tile__caption { font-size: var(--by-fs-caption); color: var(--by-body-muted); margin-top: var(--by-space-1); }
.by-stat-tile__caption--up { color: var(--by-severity-minimal-fg); }
.by-stat-tile__caption--down { color: var(--by-severity-severe-fg); }

/* =====================================================================
 * Chat bubble (message thread)
 * ===================================================================== */
.by-chat-bubble {
  max-width: 72%;
  padding: 0.7rem 1rem;
  border-radius: var(--by-radius-lg);
  font-size: var(--by-fs-body-sm);
  line-height: 1.5;
  word-break: break-word;
}
.by-chat-bubble--mine {
  background: var(--by-primary);
  color: #fff;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}
.by-chat-bubble--theirs {
  background: var(--by-surface);
  color: var(--by-heading);
  border: 1px solid var(--by-outline);
  margin-right: auto;
  border-bottom-left-radius: 4px;
}
.by-chat-bubble__time {
  display: block;
  font-size: 10.5px;
  margin-top: 4px;
  opacity: 0.7;
}

/* =====================================================================
 * Toggle switch (notification preferences)
 * ===================================================================== */
.by-switch { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; }
.by-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.by-switch__track {
  position: absolute; inset: 0;
  background: var(--by-outline);
  border-radius: var(--by-radius-pill);
  cursor: pointer;
  transition: background-color var(--by-duration-fast) var(--by-ease);
}
.by-switch__track::before {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--by-duration-fast) var(--by-ease);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.by-switch input:checked + .by-switch__track { background: var(--by-primary); }
.by-switch input:checked + .by-switch__track::before { transform: translateX(18px); }
.by-switch input:focus-visible + .by-switch__track { outline: 2px solid var(--by-primary); outline-offset: 2px; }

/* =====================================================================
 * Numbered step (How it works)
 * ===================================================================== */
.by-step { display: flex; gap: var(--by-space-4); position: relative; padding-bottom: var(--by-space-6); }
.by-step:last-child { padding-bottom: 0; }
.by-step::before {
  content: "";
  position: absolute;
  left: 17px; top: 36px; bottom: 0;
  width: 2px;
  background: var(--by-outline);
}
.by-step:last-child::before { display: none; }
.by-step__num {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--by-primary-tint);
  color: var(--by-primary-dark);
  font-weight: var(--by-fw-bold);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  z-index: 1;
}

/* =====================================================================
 * Wellness gauge (ring) + vitals tiles
 * ===================================================================== */
.by-gauge { position: relative; width: 168px; height: 168px; flex-shrink: 0; }
.by-gauge--sm { width: 132px; height: 132px; }
.by-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.by-gauge__track { fill: none; stroke: var(--by-outline); stroke-width: 10; }
.by-gauge__arc {
  fill: none;
  stroke: var(--by-primary);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 326.73;
  stroke-dashoffset: calc(326.73 * (1 - var(--pct, 0) / 100));
  animation: by-gauge-fill 1.1s var(--by-ease) both;
}
.by-gauge--good .by-gauge__arc { stroke: var(--by-primary); }
.by-gauge--fair .by-gauge__arc { stroke: var(--by-severity-mild-fg); }
.by-gauge--low .by-gauge__arc { stroke: var(--by-severity-moderate-fg); }
.by-gauge--poor .by-gauge__arc { stroke: var(--by-severity-severe-fg); }
.by-gauge--empty .by-gauge__arc { stroke: transparent; }
.by-gauge__center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.by-gauge__value { font-size: 2.4rem; font-weight: var(--by-fw-bold); color: var(--by-heading); line-height: 1; font-variant-numeric: tabular-nums; }
.by-gauge--sm .by-gauge__value { font-size: 1.9rem; }
.by-gauge__label { font-size: var(--by-fs-caption); color: var(--by-body-muted); margin-top: 4px; }
@keyframes by-gauge-fill { from { stroke-dashoffset: 326.73; } }
@media (prefers-reduced-motion: reduce) { .by-gauge__arc { animation: none; } }

.by-vital {
  background: var(--by-surface);
  border: 1px solid var(--by-outline);
  border-radius: var(--by-radius-lg);
  padding: var(--by-space-4) var(--by-space-5);
  height: 100%;
}
.by-vital__label { font-size: var(--by-fs-caption); color: var(--by-body-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: var(--by-fw-bold); margin-bottom: var(--by-space-1); }
.by-vital__value { font-size: var(--by-fs-h3); font-weight: var(--by-fw-bold); color: var(--by-heading); font-variant-numeric: tabular-nums; line-height: 1.2; }
.by-vital__unit { font-size: var(--by-fs-caption); font-weight: var(--by-fw-semibold); color: var(--by-body-muted); margin-left: 4px; }
.by-vital--missing .by-vital__value { color: var(--by-body-muted); font-size: var(--by-fs-body); font-weight: var(--by-fw-semibold); }

/* Destructive action button (account deletion) */
.by-btn--danger { background: var(--by-severity-severe-fg); color: #fff; }
.by-btn--danger:hover { background: #8a281d; color: #fff; transform: translateY(-2px); }
.by-btn--danger:disabled { opacity: .6; transform: none; }

.by-field-error { color: var(--by-severity-severe-fg); font-size: var(--by-fs-caption); font-weight: var(--by-fw-semibold); margin-top: var(--by-space-1); }

/* =====================================================================
 * Star rating input (radio-based, no JS)
 * ===================================================================== */
.by-star-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.by-star-input label { cursor: pointer; line-height: 0; color: var(--by-outline); transition: color var(--by-duration-fast) var(--by-ease), transform var(--by-duration-fast) var(--by-ease); }
.by-star-input label svg { width: 34px; height: 34px; }
.by-star-input input:checked ~ label,
.by-star-input label:hover,
.by-star-input label:hover ~ label { color: var(--by-tag-gold); }
.by-star-input label:hover { transform: scale(1.08); }
.by-star-input input:focus-visible + label { outline: 2px solid var(--by-primary); outline-offset: 2px; border-radius: 6px; }

/* =====================================================================
 * Session (booking) card inside a message thread
 * ===================================================================== */
.by-session-card {
  background: var(--by-surface);
  border: 1px solid var(--by-outline);
  border-radius: var(--by-radius-lg);
  padding: var(--by-space-4) var(--by-space-5);
}
.by-session-card--scheduled { border-color: var(--by-primary); background: var(--by-primary-tint); }