/*
Theme Name: My Bariatric Buddy
Theme URI: https://my-bariatricbuddy.com
Description: Custom child theme for My Bariatric Buddy. Built on Kadence.
Author: Simon D
Template: kadence
Version: 1.0.0
*/

/* ============================================================
   DESIGN TOKENS
   All --bb-* tokens are defined in assets/css/brand-tokens.css
   (shared with my-liveheartrate.com). That file MUST be enqueued
   BEFORE this one — see bb_enqueue_styles() in functions.php.
   Palette: creamy white surfaces, light blue primary, orange hint.
   ============================================================ */

/* ============================================================
   GLOBAL RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--bb-font);
  font-size: 16px;
  line-height: 1.7;
  color: var(--bb-text-primary);
  background: var(--bb-bg-site);
  margin: 0;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--bb-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1,h2,h3,h4,h5,h6 {
  font-weight: 600;
  line-height: 1.25;
  color: var(--bb-text-primary);
  margin-top: 0;
}

/* ============================================================
   SITE HEADER / NAV
   ============================================================ */
.bb-site-header {
  background: var(--bb-bg-white);
  border-bottom: 1px solid var(--bb-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.bb-nav-inner {
  max-width: var(--bb-max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.bb-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.bb-logo-icon {
  width: 36px;
  height: 36px;
  background: var(--bb-accent);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 18px;
}

.bb-logo-text {
  font-size: 17px;
  font-weight: 600;
  color: var(--bb-text-primary);
  letter-spacing: -0.3px;
}

.bb-logo-text span { color: var(--bb-accent); }

.bb-nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bb-nav-links a {
  font-size: 14px;
  color: var(--bb-text-secondary);
  padding: 6px 14px;
  border-radius: var(--bb-radius-sm);
  transition: background 0.15s, color 0.15s;
}

.bb-nav-links a:hover {
  background: var(--bb-primary-light);
  color: var(--bb-primary-dark);
  text-decoration: none;
}

.bb-nav-links .bb-nav-cta {
  background: var(--bb-accent);
  color: white !important;
  font-weight: 500;
}

.bb-nav-links .bb-nav-cta:hover {
  background: var(--bb-accent-dark);
  color: white !important;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.bb-hero {
  background: var(--bb-accent-light);
  border-bottom: 1px solid var(--bb-accent-border);
  overflow: hidden;
}

.bb-hero-inner {
  max-width: var(--bb-max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: flex-end;
  gap: 24px;
  min-height: 380px;
}

.bb-hero-text {
  flex: 1;
  padding: 48px 0 48px;
}

.bb-stage-badge {
  display: inline-block;
  background: var(--bb-accent-mid);
  color: var(--bb-accent-dark);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--bb-radius-md);
  margin-bottom: 16px;
}

.bb-hero-h1 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
  color: var(--bb-text-primary);
}

.bb-hero-h1 em {
  color: var(--bb-accent);
  font-style: normal;
}

.bb-hero-p {
  font-size: 17px;
  color: var(--bb-text-secondary);
  line-height: 1.6;
  max-width: 420px;
  margin-bottom: 28px;
}

.bb-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.bb-btn-primary {
  background: var(--bb-accent);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: var(--bb-radius-md);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.bb-btn-primary:hover {
  background: var(--bb-accent-dark);
  color: white;
  text-decoration: none;
  transform: translateY(-1px);
}

.bb-btn-secondary {
  background: transparent;
  color: var(--bb-primary);
  border: 1.5px solid var(--bb-primary);
  padding: 12px 24px;
  border-radius: var(--bb-radius-md);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.bb-btn-secondary:hover {
  background: var(--bb-primary-mid);
  text-decoration: none;
}

.bb-hero-character {
  width: 220px;
  flex-shrink: 0;
  align-self: flex-end;
}

.bb-hero-character img {
  width: 100%;
  object-fit: contain;
}

/* ============================================================
   STAGE SELECTOR TABS
   ============================================================ */
.bb-stage-bar {
  background: var(--bb-bg-white);
  border-bottom: 1px solid var(--bb-border);
  padding: 0 24px;
}

.bb-stage-bar-inner {
  max-width: var(--bb-max-width);
  margin: 0 auto;
  padding: 20px 0 14px;
}

.bb-stage-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--bb-text-muted);
  margin-bottom: 12px;
  font-weight: 500;
}

.bb-stage-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.bb-stage-tab {
  padding: 8px 20px;
  border-radius: var(--bb-radius-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--bb-border-mid);
  background: transparent;
  color: var(--bb-text-secondary);
  transition: all 0.15s;
}

.bb-stage-tab:hover {
  border-color: var(--bb-primary);
  color: var(--bb-primary);
}

.bb-stage-tab.active {
  background: var(--bb-primary);
  color: white;
  border-color: var(--bb-primary);
}

/* ============================================================
   ARTICLE GRID
   ============================================================ */
.bb-section {
  max-width: var(--bb-max-width);
  margin: 0 auto;
  padding: 32px 24px 0;
}

.bb-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}

.bb-section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--bb-text-primary);
  margin: 0;
}

.bb-see-all {
  font-size: 13px;
  color: var(--bb-primary);
  font-weight: 500;
}

.bb-article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 32px;
}

.bb-article-card {
  background: var(--bb-bg-white);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-lg);
  padding: 18px;
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
  text-decoration: none;
  display: block;
}

.bb-article-card:hover {
  border-color: var(--bb-primary);
  box-shadow: 0 4px 16px rgba(55,138,221,0.12);
  text-decoration: none;
}

.bb-article-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--bb-primary-dark);
  background: var(--bb-primary-mid);
  padding: 3px 10px;
  border-radius: var(--bb-radius-md);
  margin-bottom: 10px;
}

.bb-article-card h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--bb-text-primary);
  line-height: 1.4;
  margin-bottom: 8px;
}

.bb-article-card p {
  font-size: 13px;
  color: var(--bb-text-secondary);
  line-height: 1.55;
  margin-bottom: 0;
}

.bb-article-read {
  display: block;
  font-size: 12px;
  color: var(--bb-primary);
  margin-top: 10px;
  font-weight: 500;
}

/* ============================================================
   TOOLS ROW
   ============================================================ */
.bb-tools-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
  margin-top: 0;
  padding-top: 0;
}

.bb-tool-card {
  background: var(--bb-accent-light);
  border: 1px solid var(--bb-accent-border);
  border-radius: var(--bb-radius-lg);
  padding: 18px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s;
  text-decoration: none;
  display: block;
}

.bb-tool-card:hover {
  border-color: var(--bb-primary);
  text-decoration: none;
}

.bb-tool-icon {
  width: 44px;
  height: 44px;
  background: var(--bb-primary-mid);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 22px;
}

.bb-tool-card h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--bb-text-primary);
  margin-bottom: 4px;
}

.bb-tool-card p {
  font-size: 12px;
  color: var(--bb-text-secondary);
  margin: 0;
}

/* ============================================================
   BARRY TIP BOX
   ============================================================ */
.bb-barry-tip {
  max-width: var(--bb-max-width);
  margin: 0 auto 36px;
  padding: 0 24px;
}

.bb-barry-tip-inner {
  background: var(--bb-bg-white);
  border: 1px solid var(--bb-accent-border);
  border-radius: var(--bb-radius-lg);
  padding: 18px 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.bb-barry-tip-img {
  width: 60px;
  flex-shrink: 0;
}

.bb-barry-tip-img img {
  width: 100%;
  border-radius: 50%;
  background: var(--bb-accent-mid);
}

.bb-barry-tip-text {
  font-size: 14px;
  color: var(--bb-text-primary);
  line-height: 1.6;
}

.bb-barry-tip-text strong {
  color: var(--bb-accent-dark);
  font-weight: 600;
}

/* ============================================================
   ARTICLE / SINGLE POST
   ============================================================ */
.bb-article-header {
  background: var(--bb-accent-light);
  border-bottom: 1px solid var(--bb-accent-border);
  padding: 48px 24px 36px;
}

.bb-article-header-inner {
  max-width: 720px;
  margin: 0 auto;
}

.bb-article-header h1 {
  font-size: clamp(24px, 3.5vw, 38px);
  font-weight: 700;
  letter-spacing: -0.3px;
  margin-bottom: 16px;
}

.bb-article-meta {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--bb-text-muted);
}

.bb-article-body {
  max-width: 720px;
  margin: 48px auto;
  padding: 0 24px;
}

.bb-article-body h2 { font-size: 24px; margin-top: 40px; margin-bottom: 12px; }
.bb-article-body h3 { font-size: 20px; margin-top: 32px; margin-bottom: 10px; }
.bb-article-body p  { margin-bottom: 20px; }

.bb-article-body ul,
.bb-article-body ol {
  padding-left: 24px;
  margin-bottom: 20px;
}

.bb-article-body li { margin-bottom: 8px; }

.bb-article-body blockquote {
  border-left: 4px solid var(--bb-accent);
  margin: 28px 0;
  padding: 12px 20px;
  background: var(--bb-accent-light);
  border-radius: 0 var(--bb-radius-md) var(--bb-radius-md) 0;
  font-style: italic;
  color: var(--bb-accent-dark);
}

/* Barry inline tip within article */
.bb-inline-tip {
  display: flex;
  gap: 14px;
  background: var(--bb-accent-light);
  border: 1px solid var(--bb-accent-border);
  border-radius: var(--bb-radius-lg);
  padding: 16px 18px;
  margin: 28px 0;
}

.bb-inline-tip img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

/* ============================================================
   FOOTER
   ============================================================ */
.bb-site-footer {
  background: var(--bb-bg-surface);
  border-top: 1px solid var(--bb-border);
  margin-top: 60px;
}

.bb-footer-inner {
  max-width: var(--bb-max-width);
  margin: 0 auto;
  padding: 32px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.bb-footer-disclaimer {
  font-size: 12px;
  color: var(--bb-text-muted);
  max-width: 560px;
  line-height: 1.5;
}

.bb-footer-links {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bb-footer-links a {
  font-size: 13px;
  color: var(--bb-text-muted);
}

/* ============================================================
   TOOL PAGES
   ============================================================ */
.bb-tool-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px;
}

.bb-tool-page h1 {
  font-size: 32px;
  margin-bottom: 8px;
}

.bb-tool-page .bb-tool-intro {
  font-size: 16px;
  color: var(--bb-text-secondary);
  margin-bottom: 32px;
  max-width: 560px;
}

.bb-tool-disclaimer {
  font-size: 12px;
  color: var(--bb-text-muted);
  border-top: 1px solid var(--bb-border);
  padding-top: 16px;
  margin-top: 32px;
  line-height: 1.55;
}

/* Tool cards, inputs, buttons */
.bb-tool-card-box {
  background: var(--bb-bg-white);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-lg);
  padding: 24px;
  margin-bottom: 16px;
}

.bb-input-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--bb-text-secondary);
  margin-bottom: 6px;
}

.bb-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--bb-border-mid);
  border-radius: var(--bb-radius-sm);
  font-size: 14px;
  color: var(--bb-text-primary);
  background: var(--bb-bg-white);
  transition: border-color 0.15s;
  box-sizing: border-box;
  display: block;
}

.bb-input:focus {
  outline: none;
  border-color: var(--bb-primary);
  box-shadow: 0 0 0 3px rgba(55,138,221,0.15);
}

.bb-select {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--bb-border-mid);
  border-radius: var(--bb-radius-sm);
  font-size: 14px;
  background: var(--bb-bg-white);
  color: var(--bb-text-primary);
  cursor: pointer;
  box-sizing: border-box;
  display: block;
  appearance: auto;
}

.bb-result-number {
  font-size: 48px;
  font-weight: 700;
  color: var(--bb-primary);
  line-height: 1;
}

.bb-result-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--bb-text-secondary);
  margin-top: 4px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .bb-hero-inner { flex-direction: column; padding-top: 32px; }
  .bb-hero-character { width: 160px; align-self: center; }
  .bb-article-grid { grid-template-columns: 1fr; }
  .bb-tools-row { grid-template-columns: 1fr 1fr; }
  .bb-nav-links { display: none; }
  .bb-footer-inner { flex-direction: column; }
}

@media (max-width: 480px) {
  .bb-tools-row { grid-template-columns: 1fr; }
}

/* ============================================================
   KADENCE OVERRIDES — Tools landing page spacing
   ============================================================ */
.page-id-tools .entry-content,
.page-template-default .entry-content {
  padding-top: 0;
  background: transparent !important;
}

/* Remove Kadence hero padding on plain pages */
.kadence-inner-column-inner {
  padding-top: 0 !important;
}

/* ============================================================
   KADENCE CONTENT BOX — match Kadence page background
   ============================================================ */
.site,
.site-main,
.content-area,
.wp-site-blocks,
.kadence-inner-column-inner,
.entry-content-wrap,
.wp-block-kadence-column,
.kadence-column-inner,
.kb-section-dir-horizontal,
.wp-block-post-content,
.entry-content,
.page-content {
  background: transparent !important;
}

/* ============================================================
   PAGE TITLE BAND — orangey cream on every page
   Kadence renders a title hero above content on pages/archives;
   it isn't covered by the content-box override above, so it shows
   Kadence's default palette (light blue). Force it to the warm
   brand band so all new pages default to it.
   ============================================================ */
/* ── Page title hero band ─────────────────────────────────────
   Inspected markup (Kadence 1.5.x):
     <section class="entry-hero page-hero-section ...">
       <div class="entry-hero-container-inner">
         <div class="hero-section-overlay"></div>   <- the blue
         <div class="hero-container site-container">
           <header class="entry-header page-title ...">
   The colour lives on .hero-section-overlay (empty div).
   The section itself and its inner wrapper also need colouring
   as a fallback for when the overlay is missing.
   ─────────────────────────────────────────────────────────── */
.entry-hero,
.page-hero-section,
.entry-hero-layout-standard {
  background: var(--bb-accent-light) !important;
  border-bottom: 1px solid var(--bb-accent-border) !important;
}

.entry-hero-container-inner {
  background: transparent !important;
}

/* The overlay div is what actually paints the blue band */
.hero-section-overlay {
  background-color: var(--bb-accent-light) !important;
  background-image: none !important;
  opacity: 1 !important;
}

.entry-hero .entry-title,
.page-title-area .entry-title,
.archive-title-area .archive-title {
  color: var(--bb-text-primary);
}

.entry-hero .kadence-breadcrumbs,
.entry-hero .kadence-breadcrumbs a {
  background: transparent !important;
  color: var(--bb-accent-dark);
}

/* ============================================================
   SUPPRESS KADENCE HEADER — belt and braces
   ============================================================ */
#masthead,
.kadence-header,
.site-header-inner,
.kadence-header-wrap,
header#masthead,
.wp-block-template-part.header {
  display: none !important;
}

/* ============================================================
   STAGE PANELS & ARTICLE SECTIONS — match page background
   ============================================================ */
.bb-stage-panel,
.bb-section,
.bb-article-grid {
  background: transparent;
}

/* Article cards stay white to stand out from page bg */
.bb-article-card {
  background: var(--bb-bg-white);
}

/* ============================================================
   SUPPRESS KADENCE FOOTER CREDIT
   ============================================================ */
.site-footer,
.kadence-footer,
#colophon,
.site-info {
  display: none !important;
}

/* ============================================================
   NAV DROPDOWN
   ============================================================ */
.bb-has-dropdown {
  position: relative;
}

div.bb-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  border: 0.5px solid var(--bb-border);
  border-radius: var(--bb-radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.14);
  min-width: 680px;
  padding: 24px 16px 16px;
  z-index: 9999;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  /* Invisible bridge above the dropdown so mouse can travel from trigger */
  margin-top: 0;
}

/* Show via JS class instead of pure CSS hover */
.bb-has-dropdown.open div.bb-dropdown {
  display: grid !important;
}

/* Keep CSS hover as fallback */
.bb-has-dropdown:hover div.bb-dropdown,
.bb-has-dropdown:focus-within div.bb-dropdown {
  display: grid !important;
}

.bb-dropdown-group {
  padding: 0 14px;
  border-right: 0.5px solid var(--bb-border);
}

.bb-dropdown-group:last-child {
  border-right: none;
}

.bb-dropdown-heading {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--bb-primary);
  padding: 0 0 8px 0;
  margin-bottom: 4px;
  border-bottom: 0.5px solid var(--bb-border);
  display: block;
}

div.bb-dropdown a {
  display: block;
  padding: 6px 0;
  font-size: 13px;
  color: var(--bb-text-primary);
  text-decoration: none;
  transition: color 0.1s;
  white-space: nowrap;
}

div.bb-dropdown a:hover {
  color: var(--bb-primary);
}

/* ============================================================
   CHECKLIST SHARED STYLES (pre-op, carer)
   ============================================================ */
.poc-section {
    background: var(--bb-bg-white);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
    padding: 18px;
    margin-bottom: 14px;
    transition: border-color 0.15s;
}
.poc-section-done {
    border-color: #C0DD97;
    background: #F7FBF0;
}
.poc-section-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}
.poc-section-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.poc-section-meta { flex: 1; }
.poc-section-title { font-size: 15px; font-weight: 600; color: var(--bb-text-primary); }
.poc-section-sub { font-size: 12px; color: var(--bb-text-muted); margin-top: 2px; }
.poc-section-count { font-size: 13px; font-weight: 500; color: var(--bb-text-secondary); flex-shrink: 0; }
.poc-badge-done {
    font-size: 11px; font-weight: 600; color: #27500A;
    background: #EAF3DE; padding: 2px 8px; border-radius: 10px; margin-left: 8px;
}
.poc-section-bar-wrap {
    height: 4px; background: var(--bb-bg-surface);
    border-radius: 2px; margin-bottom: 14px; overflow: hidden;
}
.poc-section-bar { height: 100%; background: var(--bb-primary); border-radius: 2px; transition: width 0.3s; }
.poc-items { display: flex; flex-direction: column; }
.poc-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--bb-border);
    cursor: pointer;
    user-select: none;
    transition: opacity 0.1s;
}
.poc-item:last-child { border-bottom: none; padding-bottom: 0; }
.poc-item:first-child { padding-top: 0; }
.poc-item:hover { opacity: 0.75; }
.poc-cb {
    width: 22px; height: 22px;
    border: 1.5px solid var(--bb-border-mid);
    border-radius: 5px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; margin-top: 1px;
    transition: all 0.15s;
}
.poc-cb-on { background: var(--bb-primary); border-color: var(--bb-primary); color: #fff; }
.poc-item-text { font-size: 13px; line-height: 1.55; color: var(--bb-text-primary); }
.poc-done .poc-item-text { text-decoration: line-through; color: var(--bb-text-muted); }


/* ============================================================
   BMI CALCULATOR
   Uses existing --bb-* tokens throughout.
   Scoped to .bmi-tool so nothing bleeds into other pages.
   ============================================================ */

.bmi-tool {
  max-width: 640px;
  margin: 0 auto;
}

/* Input row — two columns matching site's .bb-tool-card-box style */
.bmi-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background: var(--bb-bg-white);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-lg);
  padding: 24px;
  margin-bottom: 12px;
}

.bmi-field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--bb-text-secondary);
  margin-bottom: 6px;
}

/* Reuse .bb-input sizing/focus behaviour */
.bmi-field input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--bb-border-mid);
  border-radius: var(--bb-radius-sm);
  font-size: 15px;
  color: var(--bb-text-primary);
  background: var(--bb-bg-white);
  transition: border-color 0.15s;
  box-sizing: border-box;
  display: block;
}

.bmi-field input:focus {
  outline: none;
  border-color: var(--bb-primary);
  box-shadow: 0 0 0 3px rgba(55,138,221,0.15);
}

/* Result panel */
.bmi-result {
  background: var(--bb-bg-white);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-lg);
  padding: 24px 24px 20px;
  margin-bottom: 12px;
  text-align: center;
}

.bmi-number {
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
  /* colour set dynamically by JS to match current zone */
}

.bmi-label {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
  /* colour set dynamically by JS */
}

.bmi-sub {
  font-size: 14px;
  color: var(--bb-text-muted);
  margin-bottom: 20px;
}

/* ── Scale bar ──────────────────────────────────────────────── */
.bmi-bar-wrap {
  max-width: 520px;
  margin: 0 auto;
}

.bmi-bar {
  height: 14px;
  border-radius: 7px;
  position: relative;
  margin-bottom: 6px;
  /* Gradient is set inline by JS — correct hard stops per zone:
     Underweight  (BMI 15–18.5)  blue      0% – 8.75%
     Healthy      (BMI 18.5–25)  green  8.75% – 25%     ← green ends HERE
     Overweight   (BMI 25–30)    amber    25% – 37.5%
     Obese I      (BMI 30–35)    orange 37.5% – 50%
     Obese II     (BMI 35–40)    r-org    50% – 62.5%
     Obese III    (BMI 40–55+)   d-red  62.5% – 100%   */
}

.bmi-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 22px;
  border-radius: 2px;
  background: var(--bb-text-primary);
  transition: left 0.25s ease;
  /* background colour overridden by JS to match current zone */
}

.bmi-scale-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--bb-text-muted);
}

/* Eligibility note — matches existing .bb-inline-tip green band */
.bmi-eligibility {
  margin-top: 16px;
  font-size: 13px;
  color: var(--bb-text-secondary);
  background: var(--bb-accent-light);
  border-left: 3px solid var(--bb-accent);
  border-radius: 0 var(--bb-radius-sm) var(--bb-radius-sm) 0;
  padding: 10px 14px;
  text-align: left;
  line-height: 1.5;
}

/* Stats panel — warm surface to match .bb-bg-surface */
.bmi-stats {
  background: var(--bb-bg-surface);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-lg);
  padding: 20px 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  text-align: center;
  margin-bottom: 12px;
}

.bmi-stat-value {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: var(--bb-text-primary);
  margin-bottom: 4px;
}

.bmi-stat-label {
  font-size: 12px;
  color: var(--bb-text-muted);
}

/* Disclaimer — reuse .bb-tool-disclaimer sizing */
.bmi-disclaimer {
  font-size: 12px;
  color: var(--bb-text-muted);
  text-align: center;
  padding: 0 4px;
  line-height: 1.55;
}

/* Mobile */
@media (max-width: 480px) {
  .bmi-inputs { grid-template-columns: 1fr; }
  .bmi-stats  { grid-template-columns: 1fr; }
  .bmi-number { font-size: 40px; }
}