/* ── Calculator pages ──────────────────────────────────────────────────────
   Loaded only by the tool pages (see PAGES in build.mjs), so the landing page
   doesn't pay for any of it. Tokens come from styles.css.
   RTL-safe: padding/margins use logical properties throughout. */

.tool-page {
  padding: 0 clamp(16px, 5vw, 56px) clamp(48px, 7vw, 88px);
  max-width: 1140px;
  margin-inline: auto;
}
.tool-page > section { padding-inline: 0; }

/* Breadcrumb */
.breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-block: 22px 0;
  font-size: 13.5px; color: var(--secondary);
}
.breadcrumb a { color: var(--green-dark); font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Intro */
.tool-intro { padding-block: clamp(20px, 3vw, 34px) clamp(24px, 4vw, 40px); max-width: 760px; }
.tool-intro h1 {
  font-size: clamp(32px, 5.2vw, 54px); line-height: 1.05;
  letter-spacing: -0.025em; font-weight: 700;
}
.tool-lead {
  margin-top: 16px; color: var(--secondary);
  font-size: clamp(16px, 2vw, 19px); max-width: 60ch;
}

/* ── Calculator layout ─────────────────────────────────────────────────────*/
.tool-grid {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(20px, 3vw, 36px); align-items: start;
}
@media (max-width: 900px) { .tool-grid { grid-template-columns: 1fr; } }

.calc-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: clamp(20px, 3vw, 30px);
  display: flex; flex-direction: column; gap: 20px;
}

.field { display: flex; flex-direction: column; gap: 9px; }
.field-label {
  font-size: 13px; font-weight: 650; letter-spacing: .2px;
  text-transform: uppercase; color: var(--secondary);
}

/* Segmented control (units, sex) */
.segmented {
  display: flex; gap: 4px; padding: 4px;
  background: #F2F2F7; border-radius: 12px;
}
.segmented label { flex: 1; display: block; position: relative; }
.segmented input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.segmented span {
  display: block; text-align: center; padding: 9px 6px; border-radius: 9px;
  font-size: 14.5px; font-weight: 600; color: var(--secondary);
  cursor: pointer; transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.segmented input:checked + span {
  background: var(--surface); color: var(--label);
  box-shadow: 0 1px 4px rgba(20, 30, 40, 0.12);
}
.segmented input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 1px; }

/* Number inputs */
.input-row { display: flex; align-items: center; gap: 8px; }
.input-row--split { gap: 12px; }
.input-pair { display: flex; align-items: center; gap: 8px; flex: 1; }
.calc-card input[type="number"],
.calc-card select {
  width: 100%; min-width: 0; font-family: var(--font); font-size: 16.5px;
  color: var(--label); background: var(--surface);
  border: 1.5px solid var(--line); border-radius: 12px;
  padding: 12px 14px; appearance: none;
}
.calc-card input[type="number"]:focus,
.calc-card select:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.16);
}
.input-suffix { font-size: 14.5px; color: var(--secondary); flex-shrink: 0; }
.calc-card select {
  padding-inline-end: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
[dir="rtl"] .calc-card select { background-position: left 14px center; }

/* ── Results ───────────────────────────────────────────────────────────────*/
.calc-results { display: flex; flex-direction: column; gap: 16px; }

.result-main {
  background: linear-gradient(135deg, var(--green) 0%, #1FA24A 100%);
  color: #fff; border-radius: var(--radius); padding: clamp(22px, 3vw, 32px);
  text-align: center; box-shadow: 0 14px 40px rgba(52, 199, 89, 0.28);
}
.result-label { font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.85); }
.result-value {
  font-size: clamp(46px, 8vw, 68px); font-weight: 700; line-height: 1.02;
  letter-spacing: -0.03em; margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.result-unit { font-size: 14.5px; color: rgba(255,255,255,.88); }
.result-delta {
  display: inline-block; margin-top: 14px; padding: 6px 14px;
  background: rgba(255,255,255,.18); border-radius: 999px;
  font-size: 13.5px; font-weight: 600;
}
.result-chip {
  display: inline-block; margin-top: 14px; padding: 7px 16px;
  background: rgba(255,255,255,.2); border-radius: 999px;
  font-size: 15px; font-weight: 650;
}

/* ── BMI result, tinted by category ────────────────────────────────────────
   The calorie page keeps the brand-green card: its number is a target, not a
   verdict. On the BMI page a green card under the word "Overweight" reads as
   approval, so the fill follows the reading instead.

   Deliberately a soft tint with dark text rather than the saturated band
   colour. BMI is a crude screening number — this very page explains it cannot
   tell muscle from fat — and a full red panel turns a rough signal into a
   judgement aimed at someone who may already be anxious about it. The chip
   carries the saturated colour and matches its band on the scale below.

   Colour is never the only signal: the category is spelled out in the chip
   and the marker sits on the scale.

   Each tone keeps the 135° gradient of the original green card — a flat fill
   read noticeably cheaper — just in the category's hue rather than the brand's,
   with a shadow tinted to match so the card still lifts off the page. */
.result-main[data-tone] {
  color: var(--label); border: 1px solid;
}
.result-main[data-tone] .result-label { color: var(--secondary); }
.result-main[data-tone="under"] {
  background: linear-gradient(135deg, #F4FAFE 0%, #D8E9F8 100%);
  border-color: rgba(0, 122, 255, 0.18);
  box-shadow: 0 12px 34px rgba(0, 122, 255, 0.13);
}
.result-main[data-tone="normal"] {
  background: linear-gradient(135deg, #F1FBF4 0%, #D7F1E0 100%);
  border-color: rgba(52, 199, 89, 0.24);
  box-shadow: 0 12px 34px rgba(52, 199, 89, 0.15);
}
.result-main[data-tone="over"] {
  background: linear-gradient(135deg, #FFF9EF 0%, #FCE7CA 100%);
  border-color: rgba(255, 149, 0, 0.26);
  box-shadow: 0 12px 34px rgba(255, 149, 0, 0.15);
}
.result-main[data-tone="obese"] {
  background: linear-gradient(135deg, #FFF4F2 0%, #FBDED9 100%);
  border-color: rgba(255, 59, 48, 0.20);
  box-shadow: 0 12px 34px rgba(255, 59, 48, 0.13);
}

/* Shades are darkened from the scale's band colours so white text clears AA
   at 4.5:1 — the raw band values (#5AC8FA, #FF9500) are nowhere near, and even
   --green-dark (#248A3D) only reaches 4.4:1. The chip is 15px semibold, which
   does not qualify for the large-text exemption, so it needs the full ratio. */
.result-chip[data-tone] { color: #fff; }
.result-chip[data-tone="under"]  { background: #0071C2; }
.result-chip[data-tone="normal"] { background: #1F7A35; }
.result-chip[data-tone="over"]   { background: #A85D00; }
.result-chip[data-tone="obese"]  { background: #C1271D; }

/* Secondary rows (BMR / TDEE) */
.result-rows {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden;
}
.result-rows > div {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 18px;
}
.result-rows > div + div { border-top: 1px solid var(--line); }
.result-rows dt { font-size: 14.5px; color: var(--secondary); }
.result-rows dd {
  font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 5px;
}
.result-rows-unit { font-size: 12px; font-weight: 500; color: var(--secondary); }

/* Macro breakdown */
.result-macros,
.result-range,
.bmi-scale {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 18px;
}
.result-macros h2,
.result-range h2,
.bmi-scale h2 {
  font-size: 13px; font-weight: 650; letter-spacing: .2px;
  text-transform: uppercase; color: var(--secondary); margin-bottom: 14px;
}
.macro-list { display: flex; flex-direction: column; gap: 14px; }
.macro-item { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: baseline; }
.macro-name { font-size: 14.5px; font-weight: 600; }
.macro-grams {
  font-size: 14px; color: var(--secondary); font-variant-numeric: tabular-nums;
}
.macro-track {
  grid-column: 1 / -1; height: 7px; border-radius: 7px;
  background: var(--fill-gray); overflow: hidden;
}
.macro-track i { display: block; height: 100%; border-radius: 7px; width: 0; transition: width .3s ease; }
.macro-item--protein .macro-track i { background: linear-gradient(90deg, #007AFF, #4DA2FF); }
.macro-item--carbs   .macro-track i { background: linear-gradient(90deg, #FF9500, #FFB64D); }
.macro-item--fat     .macro-track i { background: linear-gradient(90deg, #5856D6, #8A89E4); }

/* ── BMI scale ─────────────────────────────────────────────────────────────*/
.scale-track {
  position: relative; display: flex; gap: 2px; height: 38px;
  border-radius: 10px; overflow: visible;
}
/* The underweight band is only 14% of the 15–40 window, so its label is the
   tightest fit — and it is longer in several languages ("Untergewicht",
   "Недостаточный"). Scale the type down and let it ellipsis rather than
   clip; the numeric ticks underneath carry the precision either way. */
/* Bands are pure colour now — the words live in .scale-legend below. */
.scale-band { display: block; min-width: 0; }
.scale-band:first-child { border-start-start-radius: 10px; border-end-start-radius: 10px; }
.scale-band:last-of-type { border-start-end-radius: 10px; border-end-end-radius: 10px; }
.scale-band--under  { background: #5AC8FA; }
.scale-band--normal { background: var(--green); }
.scale-band--over   { background: var(--orange); }
.scale-band--obese  { background: var(--red); }
.scale-marker {
  position: absolute; top: -7px; bottom: -7px; inset-inline-start: 0;
  width: 4px; border-radius: 4px; background: var(--label);
  box-shadow: 0 0 0 2.5px var(--surface), 0 2px 8px rgba(0,0,0,.3);
  transform: translateX(-50%); transition: inset-inline-start .3s ease;
}
[dir="rtl"] .scale-marker { transform: translateX(50%); }
.scale-ticks {
  display: flex; justify-content: space-between; margin-top: 7px;
  font-size: 11px; color: var(--secondary); font-variant-numeric: tabular-nums;
}
.scale-legend {
  list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 12px; padding: 0;
}
.scale-legend li {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--secondary);
}
.scale-legend i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

.range-value {
  font-size: clamp(22px, 3vw, 28px); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.range-note { margin-top: 6px; font-size: 13.5px; color: var(--secondary); }

/* ── In-panel CTA ──────────────────────────────────────────────────────────*/
.result-cta {
  background: var(--green-soft); border: 1px solid rgba(52, 199, 89, 0.22);
  border-radius: 16px; padding: 20px; text-align: center;
}
.result-cta h2 { font-size: 18px; font-weight: 700; }
.result-cta p { margin-top: 7px; font-size: 14.5px; color: #2E6B41; }
/* Space the whole install block, not the badges inside it — a margin on the
   badges alone offsets them from the QR they are meant to line up with. */
.result-cta .install { margin-top: 16px; }

/* ── Explainer prose ───────────────────────────────────────────────────────*/
.prose-section { padding-block: clamp(40px, 6vw, 72px) 0; }
.prose-section > h2 {
  font-size: clamp(24px, 3.2vw, 34px); font-weight: 700;
  letter-spacing: -0.02em; margin-bottom: 26px;
}
/* Two columns rather than auto-fit: the calorie page has four blocks (a tidy
   2x2) and the BMI page two. auto-fit gave three-across plus an orphan. */
.prose-grid { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3vw, 34px); }
@media (min-width: 760px) { .prose-grid { grid-template-columns: 1fr 1fr; } }
.prose-grid h2 { font-size: clamp(21px, 2.6vw, 27px); font-weight: 700; letter-spacing: -0.015em; }
.prose-grid h3 { font-size: 18px; font-weight: 650; }
.prose-grid p { margin-top: 10px; color: var(--secondary); font-size: 15.5px; line-height: 1.65; }

/* ── Footer asides ─────────────────────────────────────────────────────────*/
.tool-foot {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px; padding-block: clamp(32px, 4vw, 48px) 0;
}
.disclaimer {
  background: #FFF8E8; border: 1px solid #F3DFB0; border-radius: 16px; padding: 20px;
}
.disclaimer h2 {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: #8A5B00;
}
.disclaimer p { margin-top: 9px; font-size: 14px; line-height: 1.6; color: #6F5120; }

.also {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 20px;
}
.also h2 {
  font-size: 13px; font-weight: 650; letter-spacing: .2px;
  text-transform: uppercase; color: var(--secondary); margin-bottom: 12px;
}
.also-link {
  display: flex; align-items: center; gap: 14px;
  padding: 12px; border-radius: 13px; transition: background .14s ease;
}
.also-link:hover { background: var(--bg); }
.also-link > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.also-link strong { font-size: 15.5px; font-weight: 650; }
.also-link em { font-style: normal; font-size: 13.5px; color: var(--secondary); }
.also-link > .ti:last-child { color: var(--tertiary); flex-shrink: 0; }
[dir="rtl"] .also-link > .ti:last-child,
[dir="rtl"] .tool-card-go .ti,
[dir="rtl"] .fsec-link .ti { transform: scaleX(-1); }

/* Tool page FAQ reuses the landing accordion but spans the page width. */
.tool-page .faq { max-width: 820px; margin-inline: 0; padding-block: clamp(40px, 6vw, 72px) 0; }
.tool-page .faq .section-title { text-align: start; margin-inline: 0; max-width: none; margin-bottom: 24px; }