/* 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); }
.seg input:checked + label {
  background: var(--indigo); border-color: var(--indigo); 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); }