/* Calculator pages. Loaded AFTER site.css, so every token and the nav/footer/button styles
   already exist — this file only adds the form and the result panel. */

.calc {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 880px) { .calc { grid-template-columns: minmax(0, 1fr); } }

.calc__panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-3);
}

.calc__legend {
  font-family: var(--display); font-weight: 700; font-size: 13.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--indigo-2);
  margin: 0 0 var(--s-2); padding: 0;
}

.field { margin: 0 0 var(--s-2); }
.field > label,
.field > .field__label {
  display: block; font-weight: 600; color: var(--fg); font-size: .95rem; margin: 0 0 6px;
}
.field__hint { display: block; font-weight: 400; color: var(--fg-3); font-size: .85rem; margin-top: 2px; }

input[type="number"], select {
  width: 100%; font: inherit; color: var(--fg);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: .7rem .85rem;
  /* iOS zooms the page when a focused input is under 16px. */
  font-size: 16px;
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A93B4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 18px;
  padding-right: 2.4rem;
}
input[type="number"]:focus-visible, select:focus-visible {
  outline: 2px solid var(--indigo-2); outline-offset: 2px; border-color: transparent;
}
/* The spinners are useless at these magnitudes and make the field narrower on mobile. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* Segmented radio groups. The input stays in the DOM and focusable — it is clipped, not
   display:none, so keyboard and screen-reader users keep the control. */
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.seg label {
  flex: 1 1 auto; text-align: center; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 999px;
  padding: .55rem .9rem; font-size: .92rem; font-weight: 600; color: var(--fg-2);
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.seg label:hover { color: var(--fg); border-color: var(--fg-3); }
/* SITE-029 — `--indigo-ink`, not `--indigo`: this label carries white text, and the brand indigo
   measures 4.47:1 against white. See the token's note in site.css. */
.seg input:checked + label {
  background: var(--indigo-ink); border-color: var(--indigo-ink); color: #fff;
}
.seg input:focus-visible + label { outline: 2px solid var(--indigo-2); outline-offset: 2px; }

.row { display: flex; gap: 10px; }
.row > * { flex: 1 1 0; min-width: 0; }

.calc__submit { width: 100%; margin-top: var(--s-2); justify-content: center; }

/* ---- result ---- */
.calc__result {
  background: linear-gradient(180deg, rgba(99,102,241,.16), rgba(255,255,255,.03));
  border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: var(--s-3);
}
.calc__error { color: #FDA4AF; margin: 0; font-weight: 600; }
.calc__headline { text-align: center; }
.calc__label {
  font-family: var(--display); font-weight: 700; font-size: 12.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 4px;
}
.calc__label--macros { margin: var(--s-3) 0 10px; text-align: center; }
.calc__big {
  font-family: var(--display); font-weight: 800; letter-spacing: -.04em; line-height: 1;
  font-size: clamp(48px, 9vw, 68px); color: var(--fg); margin: 0;
}
.calc__big span { font-size: .34em; font-weight: 700; color: var(--fg-3); margin-left: .35rem; letter-spacing: 0; }
.calc__sub { color: var(--fg-2); margin: 8px 0 0; font-size: .95rem; }

.calc__note {
  margin: var(--s-2) 0 0; font-size: .9rem; line-height: 1.6;
  border-radius: var(--r-sm); padding: .8rem .95rem;
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
}
.calc__note--warn { border-color: rgba(245,158,11,.45); background: rgba(245,158,11,.10); color: #FDE68A; }

.calc__grid { display: flex; gap: 10px; margin-top: var(--s-3); }
.calc__stat {
  flex: 1 1 0; min-width: 0; text-align: center;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: .85rem .6rem;
}
.calc__stat span {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-3);
}
.calc__stat strong {
  display: block; font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--fg);
  margin: 2px 0;
}
.calc__stat em { display: block; font-style: normal; font-size: .78rem; color: var(--fg-3); }

.calc__macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 460px) { .calc__macros { grid-template-columns: minmax(0, 1fr); } }
.calc__macro {
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: .85rem;
}
.calc__macro-name {
  margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-3);
}
.calc__macro-g {
  margin: 2px 0 8px; font-family: var(--display); font-weight: 700; font-size: 1.6rem; color: var(--fg);
  line-height: 1;
}
.calc__macro-g span { font-size: .5em; color: var(--fg-3); margin-left: 2px; }
.calc__macro-kcal { margin: 8px 0 0; font-size: .8rem; color: var(--fg-3); }

/* ---- prose under the tool ---- */
.prose h2 { margin-top: var(--s-4); }
.prose h3 { font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--fg); margin: var(--s-3) 0 .5rem; }
.prose p, .prose li { color: var(--fg-2); }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 0 0 var(--s-2); }
.prose th, .prose td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--line); }
.prose th { color: var(--fg); font-weight: 600; }
.prose td:first-child { white-space: nowrap; }
.prose__scroll { overflow-x: auto; }

/* Own bar rather than site.css's .bar__fill: that one is animated by site.js on load, and these
   bars are created after the click, so they would render at scaleX(0) and simply not appear.
   These pages therefore load no site.js at all. */
.calc__bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.09); overflow: hidden; }
.calc__bar > span { display: block; height: 100%; border-radius: 999px; background: currentColor; }
.calc__macro.accent-green { color: var(--green-2); }
.calc__macro.accent-sky   { color: var(--sky); }
.calc__macro.accent-amber { color: var(--amber); }
.calc__macro .calc__macro-name,
.calc__macro .calc__macro-kcal { color: var(--fg-3); }
.calc__macro .calc__macro-g { color: var(--fg); }

/* ── Tool pages (TDEE, BMI, protein, deficit) ────────────────────────────────
   Scoped under .tool so the two original calculators keep their exact metrics: those print
   short numbers in .calc__stat strong, these print things like "70.5 kg – 95.0 kg", which
   overflowed the card at 390px at the fixed 1.5rem. */
.tool .calc__stat strong {
  font-size: clamp(1.05rem, 4.6vw, 1.5rem);
  overflow-wrap: anywhere;
}

.tool__ladder {
  display: grid; gap: 6px; margin: 0 0 var(--s-2);
}
.tool__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: .6rem .8rem;
}
.tool__row.is-on {
  border-color: var(--green); background: rgba(52, 211, 153, .08);
}
.tool__row span { min-width: 0; color: var(--fg-2); font-size: .92rem; }
.tool__row em { font-style: normal; color: var(--fg-3); font-size: .82rem; }
.tool__row strong {
  font-family: var(--display); font-weight: 700; color: var(--fg); font-size: .98rem;
  white-space: nowrap;
}

/* Cross-links at the foot of every tool page. Without them each calculator is a dead end and
   nothing passes authority to the pages next to it. */
.tool__related { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s-2); }
.tool__related a {
  border: 1px solid var(--line); border-radius: 999px; padding: .55rem 1rem;
  color: var(--fg-2); text-decoration: none; font-size: .92rem; min-height: 44px;
  display: inline-flex; align-items: center;
}
.tool__related a:hover { border-color: var(--indigo-2); color: var(--fg); }