/* bmi-calculator.app - layered over site.css, never replacing it.
 *
 * A CLINICAL INSTRUMENT, not a fitness brand. Every competitor in this niche
 * is orange, urgent and selling a plan: progress bars, "your ideal body",
 * before-and-after photography. This site sells nothing and its whole argument
 * is that the number is smaller than people think it is - so the design has to
 * read like a reference chart in a consulting room rather than a weight-loss
 * app.
 *
 * Teal and paper. Teal because it is the one colour in the medical register
 * that is neither alarm-red nor pharmaceutical-blue; paper because a chart is
 * read, not swiped. Figures are set in tabular numerals everywhere, since the
 * entire site is numbers in columns that must line up.
 *
 * The category colours are the one place this site is allowed to be loud, and
 * they are deliberately NOT a traffic light. Green-amber-red on a body weight
 * reads as a verdict on a person; these are four distinguishable but level
 * tones, with the healthy band the only one that is reassuringly saturated.
 *
 * Contrast is measured on the painted result, not assumed from the tokens -
 * the footer-wordmark bug on two other sites came from exactly that assumption.
 */

:root[data-site="bmicalculator"] {
  --paper: #fcfdfd;
  --paper-alt: #eef3f2;

  --ink: #10201f;                /* 16.4:1 on paper */
  --ink-soft: #3d4e4c;
  --ink-faint: #5c6c6a;          /* 5.4:1 on paper, 4.9:1 on the alt tint */

  /* Deep teal: white clears 6.9:1 on it, and it clears 6.4:1 as text on paper,
     so one token works both as a field and as ink. */
  --accent: #0f5f5a;
  --accent-ink: #0f5f5a;         /* site.css spends this on TEXT */
  --on-accent: #ffffff;          /* and this is what sits ON the accent */
  --accent-soft: #dff0ed;

  --line: #d5e0de;
  --radius: 6px;
  --measure: 38rem;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  /* The four reading bands. Not a traffic light: see the note above. */
  --band-under: #7c5bb0;
  --band-healthy: #0f766e;
  --band-over: #96591f;   /* 5.0:1 on the tinted surface; the obvious amber was 4.4 */
  --band-obese: #a33a4e;
}

:root[data-site="bmicalculator"] {
  --header-bg: #fcfdfd;
  --header-line: #d5e0de;
  --brand-word-ink: #10201f;
  --subbar-bg: #0f3b3a;          /* white on it at 12.8:1 */
  --subbar-line: #0b2e2d;
  --subbar-ink: #ffffff;
  --subbar-label: #7fd6cc;       /* 7.9:1 on the sub-bar */

  --hero-bg: #eef3f2;
  --rail-surface: #ffffff;
  --rail-line: #d5e0de;
  --rail-head: #0f3b3a;
  --rail-head-ink: #ffffff;
  --tile-ink: #ffffff;
  --drawer-bg: #ffffff;
  --drawer-line: #d5e0de;
  --drawer-field: #f4f8f7;
  --share-bg: #eef3f2;
  --warn-bg: #fdf6e7;
  --warn-line: #e8d9ab;
}

@media (prefers-color-scheme: dark) {
  :root[data-site="bmicalculator"] {
    --paper: #0f1615;
    --paper-alt: #16211f;
    --ink: #e9f0ee;
    --ink-soft: #c0cbc9;
    --ink-faint: #93a09d;
    --accent: #5eead4;
    --accent-ink: #5eead4;
    --on-accent: #08201e;
    --accent-soft: #10312e;
    --line: #26332f;
    --header-bg: #0f1615;
    --header-line: #26332f;
    --brand-word-ink: #e9f0ee;
    --hero-bg: #16211f;
    --rail-surface: #16211f;
    --rail-line: #26332f;
    --drawer-bg: #0f1615;
    --drawer-line: #26332f;
    --drawer-field: #16211f;
    --share-bg: #16211f;
    --warn-bg: #2a2413;
    --warn-line: #48401f;
    --band-under: #c4a7ea;
    --band-healthy: #5eead4;
    --band-over: #e0a86a;
    --band-obese: #f09098;
  }
}

:root[data-site="bmicalculator"] body { background: var(--paper); color: var(--ink); }

/* The site is numbers in columns. Tabular figures everywhere they appear, so a
   reference table does not shimmer as the eye goes down it. */
:root[data-site="bmicalculator"] table,
:root[data-site="bmicalculator"] .tool,
:root[data-site="bmicalculator"] .spec-table,
:root[data-site="bmicalculator"] .key-facts { font-variant-numeric: tabular-nums; }

/* --- the calculators ----------------------------------------------------- */

/* The tool is the page's centre of gravity, not a widget parked in the middle
   of an article, so it gets the paper and a frame rather than a tinted panel. */
:root[data-site="bmicalculator"] .tool {
  background: var(--paper);
  border: 2px solid var(--line);
  padding: 1.5rem 1.5rem 1.6rem;
}
:root[data-site="bmicalculator"] .tool > h2 {
  color: var(--ink);
  font-size: 1.15rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 650;
}

/* The answer. One big figure, its label, then the qualifications in reading
   size - in that order, because the qualifications are the point of the site
   and a reader who stops at the figure has still been told the truth. */
.bmi-result, .tdee-result, .bf-result, .iw-result, .wh-result, .cb-result {
  display: grid; gap: .35rem;
  margin: 1.3rem 0 .4rem;
  padding: 1.1rem 1.2rem;
  border-left: 5px solid var(--line);
  background: var(--paper-alt);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.bmi-result:empty, .tdee-result:empty, .bf-result:empty,
.iw-result:empty, .wh-result:empty, .cb-result:empty { display: none; }

.bmi-number, .tdee-number, .bf-number, .iw-number, .wh-number, .cb-number {
  font-size: clamp(2rem, 6vw, 2.9rem);
  font-weight: 680; line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.tdee-unit { font-size: .45em; font-weight: 500; color: var(--ink-faint); }
.bmi-band, .tdee-band, .bf-band, .iw-band, .wh-band, .cb-band {
  font-size: .95rem; font-weight: 650; letter-spacing: .01em;
}
.bmi-detail, .tdee-detail, .bf-detail, .iw-detail, .wh-detail, .cb-detail {
  font-size: .88rem; color: var(--ink-soft); max-width: 46ch;
}
.bmi-caveat, .tdee-caveat, .bf-caveat, .iw-caveat, .wh-caveat, .cb-caveat {
  margin-top: .3rem; padding-top: .5rem;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
}

/* The band tints the rule and the label only. The figure itself stays ink:
   a number about a person's body printed in red is a judgement, and this site
   does not make one. */
.is-under  { border-left-color: var(--band-under); }
.is-healthy{ border-left-color: var(--band-healthy); }
.is-over   { border-left-color: var(--band-over); }
.is-obese  { border-left-color: var(--band-obese); }
.is-ok, .is-note { border-left-color: var(--accent); }
.is-under .bmi-band, .is-under .cb-band, .is-under .wh-band { color: var(--band-under); }
.is-healthy .bmi-band, .is-healthy .cb-band, .is-healthy .wh-band { color: var(--band-healthy); }
.is-over .bmi-band, .is-over .cb-band, .is-over .wh-band { color: var(--band-over); }
.is-obese .bmi-band, .is-obese .cb-band, .is-obese .wh-band { color: var(--band-obese); }

.iw-formulas { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .2rem; }
.iw-formulas-head { font-size: .82rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.iw-formulas li { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; max-width: 26rem; }
.iw-val { font-variant-numeric: tabular-nums; font-weight: 600; }

.tool-note { font-size: .82rem; color: var(--ink-faint); margin: .2rem 0 1rem; }
.tool-source { font-size: .82rem; color: var(--ink-faint); }

/* The at-a-glance table under the BMI calculator. Cells carry the band as a
   tint of the surface, never as the text colour, so every cell keeps ink
   contrast. */
.bmi-table, .tdee-table, .bf-table, .iw-table, .wh-table, .cb-table {
  width: 100%; border-collapse: collapse; font-size: .86rem; margin-top: .8rem;
}
.bmi-table th, .bmi-table td, .tdee-table th, .tdee-table td,
.bf-table th, .bf-table td, .iw-table th, .iw-table td,
.wh-table th, .wh-table td, .cb-table th, .cb-table td {
  border: 1px solid var(--line); padding: .4rem .5rem; text-align: left;
}
.bmi-table caption { caption-side: bottom; padding-top: .6rem; font-size: .8rem; color: var(--ink-faint); text-align: left; }
.bmi-cell { text-align: right; font-variant-numeric: tabular-nums; }
.bmi-cell.is-under  { background: color-mix(in srgb, var(--band-under) 12%, transparent); }
.bmi-cell.is-healthy{ background: color-mix(in srgb, var(--band-healthy) 12%, transparent); }
.bmi-cell.is-over   { background: color-mix(in srgb, var(--band-over) 12%, transparent); }
.bmi-cell.is-obese  { background: color-mix(in srgb, var(--band-obese) 14%, transparent); }

.bmi-table-wrap, .tdee-ref, .bf-how, .bf-ref, .iw-history, .wh-how, .wh-ref, .cb-ref {
  margin-top: 1rem; font-size: .9rem;
}
summary { cursor: pointer; font-weight: 600; }

/* A wide reference table on a phone scrolls inside its own box rather than
   pushing the page sideways - the overflow the browser audit checks for. */
.bmi-table-wrap, .tdee-ref, .bf-ref, .iw-history, .wh-ref, .cb-ref { overflow-x: auto; }

:root[data-site="bmicalculator"] .prose a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: .15em;
}