/* ============================================================
   Calculator pages
   Loaded only on /<tool-slug> — the shared shell (.tool-hero,
   .tool-body, .calc-card, .meter, .gauge) lives in main.css.
   This file covers the sidebar, prose sections and result detail.
   ============================================================ */

/* ---------- Hero addenda ---------- */

/* ---------- Main column ---------- */

.tool-main { min-width: 0; }

.tool-section {
  padding-top: var(--space-7);
  margin-top: var(--space-7);
  border-top: 1.5px solid var(--line);
}

.tool-section:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

.tool-section > h2 {
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-4);
}

.tool-section > h3 {
  font-size: 1.1rem;
  margin: var(--space-5) 0 var(--space-3);
}

.tool-section p {
  color: var(--ink-soft);
  line-height: 1.72;
  margin-bottom: var(--space-4);
  max-width: 68ch;
}

.tool-section ul,
.tool-section ol {
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 0 0 var(--space-4);
  padding-left: 1.35em;
  max-width: 68ch;
}

.tool-section li { margin-bottom: var(--space-2); }

.tool-section li strong { color: var(--ink); }

/* ---------- Calculator card internals ---------- */

.calc-card__head {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1.5px solid var(--line);
  background: var(--bg);
}

.calc-card__head h2 {
  font-size: 1.05rem;
  margin: 0;
  letter-spacing: -0.008em;
}

.calc-card__head p {
  margin: 4px 0 0;
  font-size: 0.83rem;
  color: var(--ink-faint);
}

.calc-card .field + .field,
.calc-card .field-row + .field,
.calc-card .field + .field-row,
.calc-card .field-row + .field-row {
  margin-top: var(--space-4);
}

.calc-card .seg { margin-bottom: var(--space-5); }

.calc-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.calc-actions .btn { flex: 1; }

/* Inline validation message under a field. */
.field__error {
  font-size: 0.79rem;
  color: var(--coral-deep, #b3402f);
  min-height: 1em;
}

/* ---------- Result detail ---------- */

.result-headline {
  text-align: center;
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1.5px solid var(--line);
}

.result-headline .big-num { display: block; margin-bottom: var(--space-3); }

.result-rows { display: grid; gap: var(--space-3); }

.result-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed var(--line);
  font-size: 0.92rem;
}

.result-row:last-child { border-bottom: 0; padding-bottom: 0; }

.result-row__label { color: var(--ink-soft); }

.result-row__value {
  font-weight: 650;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.result-note {
  margin: var(--space-4) 0 0;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--ink-faint);
}

.meter-list { display: grid; gap: var(--space-4); }

.meter__name { font-size: 0.85rem; color: var(--ink-soft); }

.meter__num {
  font-size: 0.85rem;
  font-weight: 650;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- Classification scale ---------- */

.scale { margin-top: var(--space-5); }

.scale__track {
  display: flex;
  height: 14px;
  border-radius: 100px;
  overflow: hidden;
  border: 1.5px solid var(--line-strong);
}

.scale__seg { height: 100%; }

.scale__marker {
  position: relative;
  height: 20px;
  margin-top: 4px;
}

.scale__pin {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  transition: left 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--jade-deep);
  white-space: nowrap;
}

.scale__pin::before {
  content: "▲";
  display: block;
  text-align: center;
  font-size: 0.6rem;
  line-height: 1;
  margin-bottom: 1px;
}

.scale__legend {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-size: 0.72rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ---------- Sidebar ---------- */

.tool-aside { min-width: 0; }

.aside-card {
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.aside-card:last-child { margin-bottom: 0; }

.aside-card__title {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1.5px solid var(--line);
}

.spec-list { margin: 0; display: grid; gap: var(--space-4); }

.spec-list dt {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 3px;
}

.spec-list dd {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.spec-list__mono {
  font-family: var(--font-mono);
  font-size: 0.78rem !important;
  color: var(--ink) !important;
  overflow-wrap: break-word;
}

.aside-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }

.aside-links a {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background 0.15s ease;
}

.aside-links a:hover { background: var(--surface-2); }

.aside-links__ic {
  font-size: 1.1rem;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--bg);
}

.aside-links strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--ink);
  line-height: 1.35;
}

.aside-links em {
  display: block;
  font-style: normal;
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-top: 2px;
  line-height: 1.4;
}

.aside-links--plain a { padding: var(--space-3) 0; border-bottom: 1px dashed var(--line); }
.aside-links--plain li:last-child a { border-bottom: 0; }
.aside-links--plain a:hover { background: none; }
.aside-links--plain a:hover strong { color: var(--jade-deep); }

/* ============================================================
   Shared result components
   Built once here rather than per-tool, so ten calculators present
   their numbers in the same visual language.
   ============================================================ */

/* ---------- Competing estimates -----------------------------
   Several tools deliberately show more than one published formula
   side by side — four ideal-weight equations, four 1RM equations,
   three body-fat methods. The spread between them *is* the finding,
   so the layout has to make disagreement legible rather than hide it
   behind a single confident number.
   ----------------------------------------------------------- */

.est-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.est-card {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  padding: var(--space-4);
}

/* The consensus/average estimate carries the brand edge. */
.est-card--lead {
  border-color: var(--jade-line);
  background: var(--jade-soft);
}

/* Span the full row. Some tools show an odd number of estimates (five for
   ideal weight, five for 1RM), which would otherwise strand the last card
   alone in the final column. */
.est-card--wide { grid-column: 1 / -1; }

.est-card__name {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 4px;
}

.est-card--lead .est-card__name { color: var(--jade-deep); }

.est-card__value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.est-card__value small {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-faint);
  margin-left: 2px;
}

.est-card__note {
  margin: 6px 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ink-faint);
}

/* Plain-language summary of how far apart the estimates fall. */
.est-spread {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--line-strong);
  background: var(--surface-2);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---------- Proportion bar ----------------------------------
   Macro splits and hydration breakdowns: one bar, segments sized
   by share, with a legend underneath carrying the real numbers.
   ----------------------------------------------------------- */

.stack-bar {
  display: flex;
  height: 34px;
  border-radius: var(--radius-xs);
  overflow: hidden;
  border: 1.5px solid var(--line-strong);
  margin-top: var(--space-4);
}

.stack-bar__seg {
  display: grid;
  place-items: center;
  font-size: 0.74rem;
  font-weight: 700;
  color: #fff;
  transition: flex-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
  white-space: nowrap;
}

.stack-bar__seg--protein { background: var(--jade); }
.stack-bar__seg--carbs   { background: var(--amber); }
.stack-bar__seg--fat     { background: var(--ocean); }

.stack-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.stack-legend__item {
  border-top: 3px solid var(--line-strong);
  padding-top: var(--space-3);
}

.stack-legend__item--protein { border-top-color: var(--jade); }
.stack-legend__item--carbs   { border-top-color: var(--amber); }
.stack-legend__item--fat     { border-top-color: var(--ocean); }

.stack-legend__name {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.stack-legend__num {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.stack-legend__sub {
  font-size: 0.75rem;
  color: var(--ink-faint);
}

/* ---------- Related tools strip ---------- */

.tool-next {
  border-top: 2px solid var(--line-strong);
  background: var(--surface);
  padding: var(--space-8) 0;
}

/* ---------- Goal / target table ------------------------------
   TDEE calorie targets, 1RM percentage loads, HR zones: a compact
   table where one row is highlighted as the user's current choice.
   ----------------------------------------------------------- */

.target-list { display: grid; gap: 6px; margin-top: var(--space-4); }

.target-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.target-row--active {
  border-color: var(--jade-line);
  background: var(--jade-soft);
}

.target-row__label {
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--ink);
}

.target-row__note {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-faint);
  margin-top: 1px;
}

.target-row__value {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.target-row--active .target-row__value { color: var(--jade-deep); }

/* ---------- Milestone timeline ------------------------------
   Pregnancy dating. A vertical rail with dated milestones; the
   entry nearest today is marked so the page answers "where am I now".
   ----------------------------------------------------------- */

.timeline { list-style: none; margin: var(--space-4) 0 0; padding: 0 0 0 var(--space-5); position: relative; }

.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--line-strong);
}

.timeline__item { position: relative; padding-bottom: var(--space-4); }
.timeline__item:last-child { padding-bottom: 0; }

.timeline__item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-5) + 1px);
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--line-strong);
}

.timeline__item--done::before { background: var(--line-strong); }

.timeline__item--now::before {
  background: var(--jade);
  border-color: var(--jade);
  box-shadow: 0 0 0 4px var(--jade-soft);
}

.timeline__label { font-size: 0.88rem; font-weight: 650; color: var(--ink); }
.timeline__item--done .timeline__label { color: var(--ink-faint); font-weight: 500; }

.timeline__date {
  font-size: 0.78rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ---------- Responsive ---------- */

@media (max-width: 620px) {
  .est-grid { grid-template-columns: 1fr; }
  .stack-legend { grid-template-columns: 1fr; gap: var(--space-2); }
  .stack-legend__item { display: flex; align-items: baseline; gap: var(--space-3); }
  .stack-bar__seg { font-size: 0.68rem; }
}

@media (max-width: 980px) {
  /* Sidebar drops below the calculator; unpin it so it scrolls naturally. */
  .tool-aside { margin-top: var(--space-7); }
}

@media (max-width: 620px) {
  .tool-section > h2 { font-size: 1.3rem; }
  .calc-card__body { padding: var(--space-5); }
  .calc-actions { flex-direction: column; }
  .result-row { flex-direction: column; gap: 2px; }
  .result-row__value { text-align: left; }
}