/* The public calculators' stylesheet (2026-09-27), shared by the hub
   /calculators/, Estimate /maintenance-calories/, Measure
   /maintenance-calories/from-your-log/ and /bmi-calculator/, and their
   /zh/ twins.

   Loads AFTER /style.css and inherits its tokens (--color-accent,
   --font-body, --font-mono, the 4px spacing scale). Same shapes as
   /numerology-calculator/ (field boxes, red submit, open FAQ list) so
   the two public tools read as one family; the class names are this
   page's own so neither stylesheet can break the other. */

.mc-wrap {
  margin: 0 auto;
  max-width: 1240px;
  padding: var(--space-56) var(--space-24) var(--space-112);
}

.mc-intro { max-width: 70ch; }

.mc-eyebrow {
  color: var(--color-accent);
  font: 400 0.8125rem/1.4 var(--font-mono);
  letter-spacing: 0.14em;
  margin: 0 0 var(--space-16);
  text-transform: uppercase;
}
.mc-eyebrow a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.mc-wrap h1 {
  font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem);
  font-weight: 480;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

/* Chinese headings break only at spaces and punctuation, never inside a
   word such as 马来西亚 (QA item 3); overflow-wrap keeps a long run from
   overflowing a phone. */
html[lang^="zh"] .mc-wrap h1 { overflow-wrap: anywhere; word-break: keep-all; }

.mc-lede {
  color: var(--color-ink-soft);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.6;
  margin: var(--space-16) 0 0;
}

.mc-private {
  align-items: center;
  color: var(--color-ink);
  display: inline-flex;
  font-size: 0.9375rem;
  gap: var(--space-8);
  margin: var(--space-16) 0 0;
}
.mc-private svg { color: var(--color-accent-soft); flex: none; }

/* ---- the two tools ---------------------------------------------- */

.mc-section { margin-top: var(--space-56); }
.mc-estimate {
  border-top: 1px solid var(--color-line-strong);
  padding-top: var(--space-56);
}

.mc-grid {
  align-items: start;
  display: grid;
  gap: clamp(var(--space-32), 5vw, var(--space-72));
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.mc-form h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  font-weight: 480;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 var(--space-24);
}

.mc-field { margin-bottom: var(--space-20); }

.mc-label-row {
  align-items: baseline;
  display: flex;
  gap: var(--space-16);
  justify-content: space-between;
}

.mc-form label,
.mc-sex legend {
  color: var(--color-ink);
  display: block;
  font: 480 1rem/1.3 var(--font-body);
  margin-bottom: var(--space-8);
}

.mc-units {
  display: inline-flex;
  flex: none;
  gap: var(--space-4);
}
.mc-units label,
.mc-sex label {
  align-items: center;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-tags);
  cursor: pointer;
  display: inline-flex;
  font: 400 0.875rem/1 var(--font-body);
  gap: var(--space-8);
  margin: 0;
  min-height: 36px;
  padding: 0 var(--space-12);
  white-space: nowrap;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.mc-units label:hover,
.mc-sex label:hover { border-color: rgba(255, 60, 74, 0.65); }
.mc-units label:has(input:checked),
.mc-sex label:has(input:checked) { background: #241010; border-color: var(--color-accent); }
.mc-units input,
.mc-sex input { accent-color: var(--color-accent); margin: 0; }

.mc-form textarea,
.mc-form select,
.mc-small input {
  background: var(--color-surface-2);
  border: 1px solid rgba(255, 60, 74, 0.4);
  border-radius: var(--radius-cards);
  color: var(--color-ink);
  font: 400 1rem/1.5 var(--font-mono);
  padding: var(--space-12) var(--space-16);
  transition: border-color 160ms ease, background-color 160ms ease;
  width: 100%;
}
.mc-form select { font-family: var(--font-body); min-height: 48px; }
.mc-form textarea { min-height: 88px; resize: vertical; }
.mc-form textarea:hover,
.mc-form select:hover,
.mc-small input:hover { border-color: rgba(255, 60, 74, 0.65); }
.mc-form textarea:focus-visible,
.mc-form select:focus-visible,
.mc-small input:focus-visible {
  background: #241010;
  border-color: var(--color-accent);
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.mc-form textarea::placeholder,
.mc-small input::placeholder { color: rgba(201, 192, 193, 0.45); }

.mc-hint {
  color: var(--color-ink-soft);
  font-size: 0.875rem;
  line-height: 1.55;
  margin: var(--space-8) 0 0;
}
.mc-hint code {
  background: var(--color-surface-2);
  border-radius: var(--radius-default);
  font: 400 0.8125rem var(--font-mono);
  padding: 1px 5px;
  white-space: nowrap;
}

.mc-field-error {
  color: var(--color-accent-soft);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: var(--space-8) 0 0;
}

.mc-sex {
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: 0 0 var(--space-20);
  padding: 0;
}
.mc-sex legend { margin-bottom: var(--space-8); padding: 0; width: 100%; }

.mc-trio {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: var(--space-20);
}
.mc-small label { font-size: 0.875rem; }
.mc-small input { min-height: 48px; }

.mc-submit {
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-buttons);
  color: var(--color-white);
  cursor: pointer;
  font: 400 1rem var(--font-body);
  margin-top: var(--space-8);
  min-height: 52px;
  padding: 0 var(--space-24);
  transition: filter 0.15s ease, transform 0.15s ease;
  width: 100%;
}
.mc-submit:hover { filter: brightness(0.9); }
.mc-submit:active { transform: translateY(1px); }
.mc-submit:focus-visible { outline: 2px solid var(--color-white); outline-offset: 3px; }

.mc-example {
  background: none;
  border: 0;
  color: var(--color-ink-soft);
  cursor: pointer;
  display: block;
  font: 400 0.9375rem var(--font-body);
  margin: var(--space-12) auto 0;
  min-height: 44px;
  padding: 0 var(--space-12);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mc-example:hover { color: var(--color-ink); }
.mc-example:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-default); }

/* ---- results ------------------------------------------------------ */

.mc-output {
  background: var(--color-card);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-cards);
  min-height: 220px;
  padding: clamp(var(--space-24), 3vw, var(--space-40));
}
.mc-output:focus { outline: none; }
.mc-output:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.mc-prompt {
  color: var(--color-ink-soft);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  max-width: 46ch;
}
.mc-prompt strong { color: var(--color-ink); font-weight: 480; }

.mc-result-label {
  color: var(--color-ink-soft);
  font: 400 0.75rem/1.4 var(--font-mono);
  letter-spacing: 0.12em;
  margin: 0;
  text-transform: uppercase;
}

.mc-result-value {
  color: var(--color-white);
  font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
  font-variant-numeric: tabular-nums;
  font-weight: 480;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: var(--space-8) 0 0;
}
.mc-result-unit {
  color: var(--color-ink-soft);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
}

.mc-result-band {
  color: var(--color-accent-soft);
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  margin: var(--space-8) 0 0;
}

.mc-verdict {
  border-left: 2px solid var(--color-accent);
  color: var(--color-ink);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: var(--space-16) 0 0;
  padding-left: var(--space-12);
}

.mc-chart { margin: var(--space-24) 0 0; }
.mc-chart svg { display: block; height: auto; width: 100%; }
.mc-chart .mc-axis { stroke: rgba(201, 192, 193, 0.25); stroke-width: 1; }
.mc-chart .mc-fan { fill: rgba(255, 60, 74, 0.14); }
.mc-chart .mc-fit { stroke: var(--color-accent); stroke-width: 2; }
.mc-chart .mc-dot { fill: var(--color-ink); fill-opacity: 0.85; }
.mc-chart .mc-tick { fill: var(--color-ink-soft); font: 400 11px var(--font-mono); }

.mc-facts,
.mc-notes {
  display: grid;
  gap: var(--space-8);
  list-style: none;
  margin: var(--space-20) 0 0;
  padding: 0;
}
.mc-facts li {
  color: var(--color-ink-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
  padding-left: var(--space-16);
  position: relative;
}
.mc-facts li::before {
  background: var(--color-accent);
  border-radius: 50%;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  top: 0.62em;
  width: 5px;
}
.mc-notes li {
  background: rgba(255, 60, 74, 0.08);
  border: 1px solid rgba(255, 60, 74, 0.28);
  border-radius: var(--radius-cards-inner);
  color: var(--color-ink);
  font-size: 0.9375rem;
  line-height: 1.55;
  padding: var(--space-12) var(--space-16);
}
.mc-notes li.is-example { border-style: dashed; }
.mc-notes a { color: var(--color-accent-soft); text-underline-offset: 3px; }

.mc-then { line-height: 1.3; margin-top: var(--space-24); padding-block: var(--space-12); width: auto; }

/* ---- prose, FAQ, foot ------------------------------------------------ */

.mc-prose {
  border-top: 1px solid var(--color-line-strong);
  margin-top: var(--space-72);
  max-width: 78ch;
  padding-top: var(--space-40);
}

.mc-head {
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  font-weight: 480;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-20);
}

.mc-how {
  color: var(--color-ink-soft);
  display: grid;
  gap: var(--space-12);
  line-height: 1.65;
  margin: 0;
  padding-left: 1.25em;
}
.mc-how strong { color: var(--color-ink); font-weight: 480; }
.mc-how a,
.mc-more a,
.mc-faq a,
.mc-byline a,
.mc-invite a { color: var(--color-accent-soft); text-underline-offset: 3px; }

.mc-more { color: var(--color-ink-soft); line-height: 1.6; margin: var(--space-24) 0 0; }

.mc-faq-list { border-top: 1px solid rgba(255, 60, 74, 0.2); }
.mc-faq { border-bottom: 1px solid rgba(255, 60, 74, 0.2); }
.mc-faq summary {
  align-items: center;
  color: var(--color-ink);
  cursor: pointer;
  display: flex;
  font-size: 1rem;
  gap: var(--space-16);
  justify-content: space-between;
  list-style: none;
  min-height: 44px;
  padding: var(--space-20) 0;
}
.mc-faq summary::-webkit-details-marker { display: none; }
.mc-faq summary::after { color: var(--color-accent); content: "+"; flex: none; font-size: 1.25rem; line-height: 1; }
.mc-faq[open] summary::after { content: "\2212"; }
.mc-faq summary:hover { color: var(--color-white); }
.mc-faq summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.mc-faq p { color: var(--color-ink-soft); line-height: 1.65; margin: 0 0 var(--space-20); }

.mc-foot {
  border-top: 1px solid var(--color-line-strong);
  margin-top: var(--space-72);
  max-width: 78ch;
  padding-top: var(--space-40);
}

.mc-byline {
  align-items: center;
  color: var(--color-ink-soft);
  display: flex;
  gap: var(--space-16);
  line-height: 1.55;
  margin: 0;
}
/* The ring is a ::before on the WRAPPER: a pseudo-element never renders
   on an <img>, so the class cannot sit on the image itself. */
.mc-byline-photo {
  display: block;
  flex: none;
  height: 40px;
  margin: 5px;
  width: 40px;
}
.mc-byline-photo img {
  border-radius: 50%;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.mc-invite { color: var(--color-ink); line-height: 1.6; margin: var(--space-24) 0 var(--space-40); }
.mc-invite strong { font-weight: 480; }

.mc-readnext { display: grid; gap: var(--space-12); list-style: none; margin: 0; padding: 0; }
.mc-readnext a {
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-cards);
  color: inherit;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-20);
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.mc-readnext a:hover { background: var(--color-card); border-color: var(--color-accent); }
.mc-readnext a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.mc-readnext-title { color: var(--color-ink); font-weight: 480; line-height: 1.35; }
.mc-readnext-desc { color: var(--color-ink-soft); font-size: 0.9375rem; line-height: 1.5; }

/* ---- focus: every control on every calculator page ---------------
   /style.css leaves buttons and links without a visible ring, so a
   keyboard user could not see where they were (review item 2). */
.calc-page :is(a, button, summary, select, textarea, input):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.calc-page .mc-units label:has(input:focus-visible),
.calc-page .mc-sex label:has(input:focus-visible),
.calc-page .mc-check:has(input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.calc-page .mc-units input:focus-visible,
.calc-page .mc-sex input:focus-visible,
.calc-page .mc-check input:focus-visible { outline: none; }
.calc-page .btn-cta:focus-visible,
.calc-page .mc-submit:focus-visible { outline-color: var(--color-white); }

[aria-invalid="true"] { border-color: var(--color-accent-soft) !important; }

.mc-field-error-inline { margin: calc(-1 * var(--space-12)) 0 var(--space-16); }

/* ---- Estimate: what the number is not, and the way to the real one - */
.mc-notyours {
  color: var(--color-ink);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: var(--space-12) 0 0;
}
.mc-next {
  background: rgba(255, 60, 74, 0.08);
  border: 1px solid rgba(255, 60, 74, 0.28);
  border-radius: var(--radius-cards-inner);
  margin-top: var(--space-24);
  padding: var(--space-16) var(--space-20);
}
.mc-next p { color: var(--color-ink-soft); font-size: 0.9375rem; line-height: 1.55; margin: 0 0 var(--space-12); }
.mc-next p strong { color: var(--color-ink); font-weight: 480; }
a.mc-submit { align-items: center; display: inline-flex; justify-content: center; text-decoration: none; }

/* ---- BMI ------------------------------------------------------------ */
.mc-check {
  align-items: center;
  border-radius: var(--radius-default);
  cursor: pointer;
  display: inline-flex;
  font: 400 0.9375rem/1.4 var(--font-body);
  gap: var(--space-8);
  margin-bottom: var(--space-16);
  min-height: 44px;
}
.mc-check input { accent-color: var(--color-accent); height: 18px; margin: 0; width: 18px; }
.mc-form .mc-check { color: var(--color-ink-soft); font-weight: 400; }
.bmi-duo {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: var(--space-20);
}
.bmi-cat {
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-cards-inner);
  padding: var(--space-12) var(--space-16);
}
.bmi-cat-label { color: var(--color-ink-soft); font: 400 0.75rem/1.4 var(--font-mono); letter-spacing: 0.08em; margin: 0; text-transform: uppercase; }
.bmi-cat-value { color: var(--color-white); font-size: 1.125rem; font-weight: 480; line-height: 1.3; margin: var(--space-4) 0 0; }
.bmi-cat-risk { color: var(--color-ink-soft); font-size: 0.875rem; line-height: 1.45; margin: var(--space-4) 0 0; }
.bmi-cat-my { background: rgba(255, 60, 74, 0.08); border-color: rgba(255, 60, 74, 0.45); }
.bmi-scale { margin-top: var(--space-24); }
.bmi-scale svg { display: block; height: auto; width: 100%; }
.bmi-band { fill: rgba(255, 60, 74, 0.1); stroke: var(--color-base); stroke-width: 2; }
.bmi-band-1 { fill: rgba(255, 60, 74, 0.2); }
.bmi-band-2 { fill: rgba(255, 60, 74, 0.34); }
.bmi-band-3 { fill: rgba(255, 60, 74, 0.5); }
.bmi-band-4 { fill: rgba(255, 60, 74, 0.66); }
.bmi-band-5 { fill: rgba(255, 60, 74, 0.82); }
.bmi-marker { stroke: var(--color-white); stroke-width: 2; }
.bmi-marker-dot { fill: var(--color-white); }
.bmi-scale .mc-tick { fill: var(--color-ink-soft); font: 400 11px var(--font-mono); }
.bmi-row-label { fill: var(--color-ink); font: 480 12px var(--font-body); }
.bmi-screening { color: var(--color-ink-soft); font-size: 0.875rem; line-height: 1.55; margin: var(--space-16) 0 0; }
.bmi-screening a { color: var(--color-accent-soft); text-underline-offset: 3px; }

/* ---- protein (2026-10-01) ------------------------------------------- */
.pr-scale { margin-top: var(--space-20); }
.pr-scale svg { display: block; height: auto; width: 100%; }
.pr-axis { stroke: rgba(201, 192, 193, 0.35); stroke-width: 2; }
.pr-span { fill: rgba(255, 60, 74, 0.34); }
.pr-dot { fill: var(--color-base); stroke: rgba(201, 192, 193, 0.8); stroke-width: 2; }
.pr-dot.is-on { fill: var(--color-white); stroke: var(--color-accent); stroke-width: 3; }
.pr-gtext { fill: var(--color-ink-soft); font: 400 12px var(--font-mono); }
.pr-gtext.is-on { fill: var(--color-white); font-weight: 600; }
.pr-legend { display: grid; gap: var(--space-8); list-style: none; margin: var(--space-16) 0 0; padding: 0; }
.pr-mark { align-items: baseline; display: flex; gap: var(--space-12); }
.pr-g { color: var(--color-white); flex: none; font: 480 1rem/1.4 var(--font-mono); min-width: 4.5ch; text-align: right; }
.pr-src { color: var(--color-ink-soft); font-size: 0.9375rem; line-height: 1.45; }
.pr-gkg { color: var(--color-ink-soft); opacity: 0.8; }
.pr-plate { margin-top: var(--space-40); }
.pr-plate .mc-head { margin-top: 0; }
.pr-total {
  background: var(--color-card);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-cards-inner);
  margin: var(--space-20) 0 var(--space-8);
  padding: var(--space-16) var(--space-20);
  position: sticky;
  top: var(--space-8);
  z-index: 2;
}
.pr-total-label { color: var(--color-ink-soft); font: 400 0.75rem/1.4 var(--font-mono); letter-spacing: 0.04em; margin: 0; text-transform: uppercase; }
.pr-total-num { color: var(--color-white); font-size: 1.75rem; font-weight: 480; line-height: 1.2; margin: var(--space-4) 0 var(--space-12); }
.pr-total-num output { font: inherit; }
.pr-bar { background: rgba(255, 60, 74, 0.14); border-radius: 999px; height: 8px; overflow: hidden; }
.pr-bar span { background: var(--color-accent); border-radius: 999px; display: block; height: 100%; transition: width 220ms ease; width: 0; }
.pr-group { color: var(--color-ink); font-size: 1rem; font-weight: 480; margin: var(--space-24) 0 var(--space-8); }
.pr-list { display: grid; gap: var(--space-8); list-style: none; margin: 0; padding: 0; }
.pr-row {
  align-items: center;
  background: var(--color-card);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-cards-inner);
  display: flex;
  gap: var(--space-16);
  justify-content: space-between;
  padding: var(--space-12) var(--space-16);
}
.pr-name { display: grid; gap: 2px; min-width: 0; }
.pr-title { color: var(--color-white); font-weight: 480; line-height: 1.35; }
.pr-meta { color: var(--color-ink-soft); font-size: 0.9375rem; line-height: 1.45; }
.pr-meta strong { color: var(--color-ink); font-weight: 480; }
.pr-kcal { font-size: 0.8125rem; opacity: 0.85; }
.pr-step { align-items: center; display: flex; flex: none; gap: var(--space-8); }
.pr-btn {
  background: transparent;
  border: 1px solid rgba(255, 60, 74, 0.5);
  border-radius: var(--radius-default);
  color: var(--color-ink);
  cursor: pointer;
  font: 480 1.25rem/1 var(--font-body);
  height: 44px;
  width: 44px;
}
.pr-btn:hover:not([aria-disabled="true"]) { background: #241010; border-color: var(--color-accent); color: var(--color-white); }
.pr-btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.35; }
.pr-count { color: var(--color-white); font: 480 1.125rem/1 var(--font-mono); min-width: 2ch; text-align: center; }
@media (max-width: 560px) {
  .pr-row { align-items: flex-start; flex-direction: column; gap: var(--space-8); }
  .pr-step { align-self: flex-end; }
  .pr-total { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-bar span { transition: none; }
}

/* ---- hub ------------------------------------------------------------ */
.hub-grid {
  display: grid;
  gap: var(--space-16);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: var(--space-40) 0 0;
  padding: 0;
}
.hub-card {
  background: var(--color-card);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-cards);
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  height: 100%;
  padding: var(--space-24);
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.hub-card:hover { background: #1a0b0b; border-color: var(--color-accent); }
.hub-card h2 { color: var(--color-white); font-size: 1.25rem; font-weight: 480; letter-spacing: -0.01em; margin: 0; }
.hub-card p { color: var(--color-ink-soft); font-size: 0.9375rem; line-height: 1.55; margin: 0; }
.hub-needs { color: var(--color-ink) !important; }
.hub-privacy { align-items: flex-start; display: flex; gap: var(--space-8); margin-top: auto !important; padding-top: var(--space-8); }
.hub-privacy svg { color: var(--color-accent-soft); flex: none; margin-top: 3px; }
.hub-go { color: var(--color-accent-soft) !important; font-weight: 480; margin-top: auto !important; padding-top: var(--space-8); }

/* ---- sources ------------------------------------------------------------ */
.mc-sources { color: var(--color-ink-soft); display: grid; gap: var(--space-8); line-height: 1.55; margin: 0; padding-left: 1.25em; }
.mc-sources a { color: var(--color-accent-soft); text-underline-offset: 3px; }

.mc-trio.mc-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mc-small .mc-field-error { font-size: 0.875rem; }
.mc-waist { margin-bottom: var(--space-8); max-width: 12rem; }
#bmi-waist-set { margin-bottom: var(--space-12); }
.mc-invite-tool { margin: var(--space-32) 0 0; max-width: 78ch; }
.mc-head-next { margin-top: var(--space-40); }

@media (max-width: 900px) {
  .mc-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .hub-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .mc-wrap { padding: var(--space-32) var(--space-16) var(--space-72); }
  /* The brief's H1s run to 51 characters; at the desktop clamp's 36 px
     minimum they took four lines at 375 px (review item 8). */
  .mc-wrap h1 { font-size: 1.625rem; line-height: 1.12; }
  .mc-section { margin-top: var(--space-40); }
  .mc-estimate { padding-top: var(--space-40); }
  .mc-trio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mc-trio .mc-small:first-child { grid-column: 1 / -1; }
  .mc-trio.mc-duo .mc-small:first-child { grid-column: auto; }
  .mc-then { width: 100%; }
  .bmi-duo { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .mc-submit, .mc-units label, .mc-sex label, .mc-form textarea, .mc-form select, .mc-small input, .mc-readnext a, .hub-card { transition: none; }
}

/* ---------- Result motion (redesign 2026 R1c) ----------
   The result block slide-reveals when a run finishes, and the headline
   numbers count up (calculators.js). Transform, opacity and clip-path
   only, per DESIGN.md. Durations and easings are shell/motion.css's
   tokens, which every public page now loads.

   The class is added by script and only when motion is allowed, so the
   reduced-motion case never enters this rule at all — the result is
   simply there, which is what someone who asked for less motion wants
   from a page whose job is to answer a question. */
.is-revealed {
  animation: calc-reveal var(--hm-dur-3, 420ms) var(--hm-ease-out, cubic-bezier(.2, .8, .2, 1)) both;
}
@keyframes calc-reveal {
  from { opacity: 0; transform: translateY(10px); clip-path: inset(0 0 18% 0); }
  to   { opacity: 1; transform: none;             clip-path: inset(0 0 0 0); }
}

/* Counted numbers must not reflow while they tick: tabular figures keep
   every digit the same width, so "1,990" and "2,570" occupy one box. */
#bmi-value,
#pr-value,
#pr-total,
#mc-maint,
#mc-est-range {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* The needle is transformed as a whole; give it its own layer so the
   spring settle does not repaint the two band rows behind it. */
.bmi-needle { will-change: transform; }