/* =========================================================================
   SLIM DIET — the BMI calculator's stylesheet.
   -------------------------------------------------------------------------
   Loaded by index.html and bmi.html, the two pages that carry the
   calculator. The markup is identical on both (between the "calculator
   markup shared by" markers) and so is calculator.js.

   Every class here starts with calc-, bmi-, needs-, unit- or choice-, so
   nothing collides with the page styles in site.css. The form controls
   both forms share (.field, .input, .field-error) are in site.css.

   Phones: inputs are 16px or larger (iOS zooms the page into anything
   smaller), every control is at least 44px tall, and nothing floats or
   sticks over the fields.
   ========================================================================= */

.calc{
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  box-shadow:var(--shadow);
  padding:clamp(18px, 3vw, 28px);
}
.calc-form{ display:flex; flex-direction:column; gap:var(--s4); }

.calc-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; }
.calc-title{ font-size:clamp(1.15rem, 2vw, 1.3rem); }

/* --- the unit switch: two radios drawn as a small segmented control ----- */
.units{ display:inline-flex; border:0; margin:0; padding:3px; min-width:0;
  background:var(--surface); border-radius:var(--r-control); }
.unit-opt{ position:relative; display:inline-flex; }
.unit-opt input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.unit-opt span{
  display:inline-flex; align-items:center; min-height:38px; padding:6px 12px;
  border-radius:8px; font-size:.9rem; font-weight:600; color:var(--muted); white-space:nowrap;
}
.unit-opt input:checked + span{ background:var(--card); color:var(--navy); box-shadow:var(--shadow-sm); }
.unit-opt input:focus-visible + span{ outline:3px solid var(--teal); outline-offset:2px; }
.unit-opt:hover span{ color:var(--navy); }

/* --- fields -------------------------------------------------------------- */
.calc-fields{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s4); }
/* two side by side only while both stay comfortably readable */
@media (max-width:359px){ .calc-fields{ grid-template-columns:minmax(0,1fr); } }

/* .field, .input and .field-error live in site.css: the request-contact
   form on start.html uses them too. */
/* the numbers are Latin digits typed left to right, in either language */
.calc .input{ direction:ltr; text-align:start; }
html[dir="rtl"] .calc .input{ text-align:right; }

.pair{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s2); }
.affix{ position:relative; display:block; }
.affix .input{ padding-inline-end:44px; }
.affix label{
  position:absolute; inset-block:0; inset-inline-end:12px;
  display:flex; align-items:center; font-weight:600; font-size:.95rem; color:var(--muted);
}
html[dir="rtl"] .affix .input{ padding-inline-end:14px; padding-inline-start:44px; }
html[dir="rtl"] .affix label{ inset-inline-end:auto; inset-inline-start:12px; }

.calc-go{ margin-top:var(--s1); }
.calc-private{ margin:0; font-size:.86rem; color:var(--muted); text-align:center; }
.calc-stale{
  margin:0; font-size:.9rem; color:var(--navy);
  background:var(--teal-tint); border-radius:var(--r-control); padding:8px 12px;
}

/* --- the result ---------------------------------------------------------- */
.calc-result{
  margin-top:var(--s5); padding-top:var(--s5); border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:var(--s4);
}
.bmi-k{ margin:0; font-weight:600; color:var(--muted); font-size:.95rem; }
.bmi-row{ margin:2px 0 0; display:flex; align-items:center; flex-wrap:wrap; gap:var(--s2) var(--s4); }
.bmi-v{ font-size:clamp(2.5rem, 7vw, 3.1rem); font-weight:700; line-height:1; color:var(--navy); letter-spacing:-0.02em; }
.bmi-cat{
  display:inline-flex; align-items:center; min-height:32px; padding:4px 12px;
  border-radius:999px; font-weight:600; font-size:.95rem;
  background:var(--surface); color:var(--navy); border:1px solid var(--border);
}
.bmi-cat[data-band="healthy"]{ background:var(--teal-tint); color:var(--teal-text); border-color:transparent; }

/* The scale is decoration (aria-hidden): the category is said in words. One
   calm hue with the healthy span picked out — no traffic lights. */
.bmi-scale{ position:relative; padding-top:14px; padding-bottom:20px; }
.bmi-track{ display:flex; height:8px; border-radius:999px; overflow:hidden; background:var(--surface); }
.bmi-track i{ display:block; height:100%; }
.bmi-track .seg-under{ width:14%; background:#C8D3E1; }
.bmi-track .seg-healthy{ width:26%; background:var(--teal); }
.bmi-track .seg-over{ width:20%; background:#AEBDD0; }
.bmi-track .seg-obesity{ width:40%; background:#8A9CB4; }
.bmi-pin{
  position:absolute; top:6px; width:22px; height:22px; margin-inline-start:-11px;
  border-radius:50%; background:var(--navy); border:3px solid var(--card); box-shadow:var(--shadow-sm);
}
.bmi-ticks{ position:relative; height:16px; margin-top:6px; font-size:.78rem; color:var(--muted); }
.bmi-ticks span{ position:absolute; transform:translateX(-50%); direction:ltr; unicode-bidi:isolate; }
html[dir="rtl"] .bmi-ticks span{ transform:translateX(50%); }

.bmi-explain{ margin:0; }
.bmi-adult{ margin:0; font-size:.92rem; color:var(--muted); }
.bmi-adult a{ font-weight:600; }

.calc-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s5); }
@media (max-width:479px){
  .calc-cta .btn{ width:100%; }
}
/* the quieter way on: a text link on its own line under the plan button, to
   the optional contact form. Smaller and lighter than the button, never a
   second button. */
.calc-help{ flex:0 0 100%; margin:0; font-size:.92rem; line-height:1.45; }
.calc-help a{
  display:inline-block; padding-block:6px; text-wrap:balance;
  font-weight:500; color:var(--teal-text);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
}
.calc-help a:hover{ color:var(--navy); }

/* --- the optional daily-needs estimate ---------------------------------- */
.needs{ border:1px solid var(--border); border-radius:var(--r-card-sm); background:var(--bg); }
.needs-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  width:100%; min-height:52px; padding:12px var(--s4);
  background:transparent; border:0; border-radius:var(--r-card-sm); cursor:pointer;
  font-weight:600; font-size:1rem; color:var(--navy); text-align:start;
}
.needs-toggle:hover{ background:var(--surface); }
.needs-toggle .chev{ width:20px; height:20px; flex:none; transition:transform .2s ease; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.needs-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.needs-panel{ padding:0 var(--s4) var(--s4); }
.needs-panel form{ display:flex; flex-direction:column; gap:var(--s4); }
.needs-intro{ margin:0; font-size:.94rem; color:var(--muted); }
.input-short{ max-width:9rem; }

.choices{ display:grid; gap:var(--s2); }
.choices-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.choice{
  position:relative; display:flex; align-items:center; gap:var(--s3);
  min-height:48px; padding:10px 14px; cursor:pointer;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-control);
  font-size:.97rem; color:var(--ink);
}
.choice:hover{ border-color:var(--input); }
.choice input{
  flex:none; width:20px; height:20px; margin:0; accent-color:var(--teal); cursor:pointer;
}
.choice:has(input:checked){ border-color:var(--teal); background:var(--teal-tint); color:var(--navy); font-weight:600; }
.choice input:focus-visible{ outline:3px solid var(--teal); outline-offset:2px; }
fieldset.field[data-invalid] .choice{ border-color:var(--error); }

.needs-result{
  margin-top:var(--s4); padding:var(--s4); border-radius:var(--r-control);
  background:var(--card); border:1px solid var(--border);
}
.needs-result .k{ margin:0; font-weight:600; color:var(--muted); font-size:.92rem; }
.needs-result .v{ margin:2px 0 0; font-size:1.6rem; font-weight:700; color:var(--navy); line-height:1.25; }
.needs-result .v .u{ font-size:1rem; font-weight:600; color:var(--muted); }
.needs-result .sub{ margin:6px 0 0; color:var(--ink); font-size:.96rem; }
.needs-result .note{ margin:var(--s3) 0 0; color:var(--muted); font-size:.88rem; }

/* --- in the hero: the card is the dominant thing on the screen ------------ */
.hero .calc{ box-shadow:0 1px 2px rgba(11,26,46,.05), 0 18px 40px rgba(11,26,46,.10); }