/* Constrained width when embedded in block themes */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: 1200px !important; }

/* BMI — layout & theming */
.bmi-wrap *{ box-sizing:border-box }
.bmi-wrap{
  --text:#161616; --text-light:#525252; --bg:#f4f4f4; --bg-light:#fff;
  --border:#e5e7eb; --shadow:rgba(0,0,0,.08);
  --primary-dark: color-mix(in oklab, var(--primary) 80%, black);
  --primary-light: color-mix(in oklab, var(--primary) 25%, white);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  width:100%; max-width:1200px; margin:24px auto; padding:0 10px;
}
.bmi-grid{ display:grid; grid-template-columns:1fr; gap:24px; align-items:start }
@media (min-width:1000px){ .bmi-grid{ grid-template-columns:minmax(340px,420px) 1fr } }

.bmi-card,.bmi-results{ min-width:0 }
.bmi-card{ background:var(--bg-light); border:1px solid var(--border); border-radius:24px; box-shadow:0 1px 3px var(--shadow); overflow:hidden }
.bmi-form{ padding:22px }
.bmi-title{ font-size:14px; font-weight:800; color:#111; margin-bottom:10px }

/* Tabs */
.bmi-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; background:#f3f4f6; padding:6px; border-radius:12px; margin-bottom:16px }
.bmi-tab{ padding:12px 14px; border-radius:10px; font-weight:800; background:transparent; border:1px solid transparent; cursor:pointer; transition:background .15s,transform .04s,color .15s }
.bmi-tab:hover{ background:#fff } .bmi-tab:active{ transform:translateY(1px) }
.bmi-tab[aria-selected='true']{ background:#fff; border-color:var(--border); box-shadow:0 1px 3px var(--shadow); color:var(--primary) }

/* Form grid */
.bmi-form-grid{ display:grid; grid-template-columns:1fr; gap:14px }
@media (min-width:1000px){ .bmi-form-grid{ grid-template-columns:1fr 1fr; gap:16px } }
.bmi-field{ display:flex; flex-direction:column }
.bmi-label{ font-size:14px; font-weight:700; margin:6px 0 }
.bmi-input,.bmi-select{ width:100%; padding:18px 20px; border:1px solid #d6d9df; border-radius:28px; font-size:18px; background:var(--bg-light); box-shadow:inset 0 0 5px rgba(0,0,0,.03); transition:border .15s, box-shadow .15s, background .15s; }
.bmi-input:hover,.bmi-select:hover{ border-color:#cfd5de }
.bmi-input:focus,.bmi-select:focus{ outline:0; border-color:var(--primary); box-shadow:0 0 0 5px color-mix(in oklab, var(--primary) 18%, transparent) }
.bmi-select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,#111 50%),linear-gradient(135deg,#111 50%,transparent 50%),linear-gradient(to right,transparent,transparent); background-position:calc(100% - 22px) calc(50% + 2px),calc(100% - 17px) calc(50% + 2px),100% 0;background-size:5px 5px,5px 5px,2.5em 2.5em;background-repeat:no-repeat }
.bmi-ftin{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.bmi-hint{ font-size:12px; color:#6b7280; margin:6px 2px 0 }

/* Actions */
.bmi-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:12px }
.bmi-btn{ border:0; padding:16px 24px; border-radius:999px; font-weight:900; cursor:pointer; transition:transform .04s, filter .15s, background .15s }
.bmi-btn:active{ transform:translateY(1px) }
.bmi-primary{ background:var(--primary); color:#fff } .bmi-primary:hover{ filter:brightness(.98); background:var(--primary-dark) }
.bmi-ghost{ background:#f3f4f6 }
.bmi-error{ color:#d93025; font-size:14px; margin:8px 0; display:none }
.bmi-hidden{ display:none !important }
.is-hidden{ display:none !important }

/* Results */
.bmi-results{ border:1px solid var(--border); border-radius:24px; background:var(--bg-light); overflow:hidden; content-visibility:auto; contain-intrinsic-size:600px 515px }
.bmi-head{ background:linear-gradient(135deg, var(--primary-dark), var(--primary)); color:#fff; padding:18px 22px }
.bmi-h-title{ font-weight:900; font-size:18px } .bmi-h-sub{ font-size:12px; opacity:.9 }
.bmi-body{ padding:18px 22px }
.bmi-main{ margin:16px 0 20px; padding:18px; text-align:center; background:linear-gradient(to right, color-mix(in oklab, var(--primary) 8%, transparent), color-mix(in oklab, var(--primary-light) 8%, transparent)); border-radius:14px }
.bmi-main .big{ font-size:36px; font-weight:900; background:linear-gradient(135deg, var(--primary-dark), var(--primary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent }
.bmi-main .sub{ color:#667085; margin-top:6px; font-size:14px }

.bmi-break{ border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:16px }
.bmi-b-title{ color:var(--primary-dark); font-weight:800; margin-bottom:8px; font-size:18px }
.bmi-cat-list{ display:grid; gap:6px }
.bmi-cat-row{ display:flex; justify-content:space-between; padding:8px 10px; border-radius:8px; transition:background .15s; font-size:16px }
.bmi-cat-row.is-active{ background:color-mix(in oklab, var(--primary) 8%, transparent) }

/* Charts + messages */
.chart-wrap{ border:1px solid var(--border); border-radius:12px; padding:14px; background:#fff; margin-top:12px }
.canvas-hold{ position:relative; width:100%; height:260px }
@media(max-width:640px){ .canvas-hold{ height:200px } }
.bmi-chart-msg{ font-size:13px; color:#6b7280; margin-top:8px }

/* Note + buttons */
.bmi-note{ border:1px solid var(--border); border-radius:12px; padding:14px; background:#fff; margin-top:12px; color:#475569; font-size:14px }
.bmi-tools{ display:flex; gap:28px; flex-wrap:wrap; margin-top:12px }
.bmi-tool{ display:flex; flex-direction:column; align-items:flex-start; gap:6px }
.bmi-tool-btn{ border:1px solid var(--border); background:#fff; padding:10px 14px; border-radius:10px; font-weight:800; cursor:pointer }
.bmi-inline-msg{ font-size:13px; color:#475569; display:none }
.bmi-inline-msg.show{ display:block }

/* A11y */
[dir='rtl'] .bmi-cat-row{ flex-direction:row-reverse }
.bmi-wrap :focus-visible{ outline:3px solid color-mix(in oklab, var(--primary) 50%, transparent); outline-offset:2px }
@media (prefers-reduced-motion: reduce) { .bmi-tab, .bmi-btn { transition:none !important; } }

.bmi-tabs {
    text-align: center;
}

.bmi-label {
    color: #000000;