/* ============================================================
   calculator.css — Calculator page + Age Calculator UI (Step 3).
   Uses the Step 1 design tokens only. No design-system changes.
   ============================================================ */

.calc-wrap { padding-block: var(--space-6) var(--space-10); }

/* Breadcrumb spacing */
#breadcrumb { margin-bottom: var(--space-5); }

/* ---------- Calculator head ---------- */
.calc-head { margin-bottom: var(--space-5); }
.calc-head__title { font-size: var(--fs-2xl); margin-top: var(--space-2); }
@media (min-width: 768px) { .calc-head__title { font-size: var(--fs-3xl); } }
.calc-head__lead { margin-top: var(--space-2); color: var(--color-muted); max-width: 62ch; }

/* ---------- Input panel ---------- */
.calc-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
}
@media (min-width: 768px) { .calc-panel { padding: var(--space-6); } }

.date-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: end;
}
@media (min-width: 820px) {
  .date-group { grid-template-columns: 1fr auto 1fr; }
}

.date-field {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--color-bg);
}
.date-field legend {
  padding: 0 var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}
.date-inputs {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1.1fr;
  gap: var(--space-3);
}
.date-inputs .field__label { font-size: var(--fs-xs); }

/* Swap button */
.swap-btn {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  justify-self: center;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.swap-btn:hover { background: var(--color-primary); color: #fff; }
@media (max-width: 819px) { .swap-btn { transform: rotate(90deg); } }

/* Validation message */
.calc-error {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-danger) 35%, transparent);
  color: var(--color-danger);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.calc-error[hidden] { display: none; }

/* Actions */
.calc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
@media (max-width: 519px) { .calc-actions .btn { flex: 1 1 auto; } }

/* ---------- Results ---------- */
.calc-results { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); }
.calc-results[hidden] { display: none; }

.result-headline {
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.result-headline__label { font-size: var(--fs-sm); opacity: 0.85; text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.result-headline__value {
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin-top: var(--space-2);
}
.result-headline__value small { font-size: var(--fs-md); font-weight: var(--fw-medium); opacity: 0.9; margin-inline: 2px var(--space-3); }
.result-headline__sub { margin-top: var(--space-3); opacity: 0.9; font-size: var(--fs-sm); }

.result-block__title { font-size: var(--fs-lg); margin-bottom: var(--space-4); }

/* Stat grid */
.stat-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 560px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .stat-grid--7 { grid-template-columns: repeat(7, 1fr); } }
@media (min-width: 900px) { .stat-grid--6 { grid-template-columns: repeat(6, 1fr); } }

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  text-align: center;
  min-width: 0;
}
.stat__value { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--color-primary-dark); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat__label { font-size: var(--fs-xs); color: var(--color-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
[data-theme="dark"] .stat__value { color: var(--color-text); }
@media (max-width: 520px) {
  .stat { padding: var(--space-3); }
  .stat__value { font-size: var(--fs-md); }
}

/* Extras */
.extras-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .extras-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .extras-grid { grid-template-columns: repeat(4, 1fr); } }
.extra {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.extra__label { font-size: var(--fs-xs); color: var(--color-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.extra__value { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--color-primary-dark); }
.extra__meta { font-size: var(--fs-xs); color: var(--color-muted); }
[data-theme="dark"] .extra__value { color: var(--color-text); }

/* ---------- Mini calendars ---------- */
.calendars { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .calendars { grid-template-columns: repeat(2, 1fr); } }
.mini-cal {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  padding: var(--space-4);
}
.mini-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.mini-cal__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-primary-dark); }
[data-theme="dark"] .mini-cal__title { color: var(--color-text); }
.mini-cal__tag { font-size: var(--fs-xs); }
.mini-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mini-cal__dow { font-size: 10px; text-align: center; color: var(--color-muted); font-weight: var(--fw-semibold); padding-bottom: 2px; }
.mini-cal__cell {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  font-size: var(--fs-xs);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}
.mini-cal__cell--empty { visibility: hidden; }
.mini-cal__cell--birth { background: var(--color-primary); color: #fff; font-weight: var(--fw-bold); }
.mini-cal__cell--target { background: var(--color-accent); color: #fff; font-weight: var(--fw-bold); }

/* ---------- Timeline ---------- */
.timeline { padding-top: var(--space-2); }
.timeline__bar {
  position: relative;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-alt);
  margin: var(--space-6) 0 var(--space-5);
}
.timeline__fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}
.timeline__marker {
  position: absolute;
  top: 50%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 3px solid var(--color-primary);
  transform: translate(-50%, -50%);
}
.timeline__marker span {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 10px;
  color: var(--color-muted);
}
.timeline__ends { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--color-muted); }
.milestones { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.milestones .badge { background: var(--color-light-soft); color: var(--color-primary-dark); }
[data-theme="dark"] .milestones .badge { color: var(--color-text); }

/* ---------- Content (formula / steps / examples / FAQ) ---------- */
.calc-content { margin-top: var(--space-10); display: flex; flex-direction: column; gap: var(--space-8); }
.content-section__title { font-size: var(--fs-xl); margin-bottom: var(--space-3); }
.prose { color: var(--color-text); max-width: 72ch; }
.prose p { margin-bottom: var(--space-3); }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-primary);
}

.steps { counter-reset: step; display: flex; flex-direction: column; gap: var(--space-3); max-width: 72ch; }
.steps li {
  position: relative;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--fs-sm);
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: var(--space-3); top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.examples { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .examples { grid-template-columns: repeat(3, 1fr); } }
.example .card__title { font-size: var(--fs-md); }
.example ul { margin-top: var(--space-2); display: flex; flex-direction: column; gap: 4px; }
.example li { font-size: var(--fs-sm); color: var(--color-muted); display: flex; justify-content: space-between; gap: var(--space-3); }
.example li strong { color: var(--color-primary-dark); font-weight: var(--fw-semibold); }
[data-theme="dark"] .example li strong { color: var(--color-text); }

/* FAQ */
.faq { display: flex; flex-direction: column; gap: var(--space-2); max-width: 80ch; }
.faq__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}
.faq__q {
  cursor: pointer;
  padding: var(--space-4);
  font-weight: var(--fw-semibold);
  color: var(--color-primary-dark);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
[data-theme="dark"] .faq__q { color: var(--color-text); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; font-size: var(--fs-lg); color: var(--color-accent); transition: transform var(--transition-fast); }
.faq__item[open] .faq__q::after { content: "\2013"; }
.faq__a { padding: 0 var(--space-4) var(--space-4); color: var(--color-muted); font-size: var(--fs-sm); }

/* Related calculators */
.related-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .related-grid { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   Step 4 — shared calculator controls & specific calculators
   ============================================================ */

/* Input rows */
.calc-row {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .calc-row--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 720px) { .calc-row--3 { grid-template-columns: repeat(3, 1fr); } }

.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .input { padding-right: 3.2rem; }
.input-suffix {
  position: absolute;
  right: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--color-muted);
  pointer-events: none;
}

/* Segmented control */
.seg {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.seg__btn {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-muted);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.seg__btn:hover { color: var(--color-primary); }
.seg__btn.is-active {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-xs);
}
[data-theme="dark"] .seg__btn.is-active { color: var(--color-text); }

/* Result category pill */
.result-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  margin-top: var(--space-3);
}

/* BMI scale */
.bmi-scale { margin-top: var(--space-2); }
.bmi-scale__bar {
  position: relative;
  height: 14px;
  border-radius: var(--radius-pill);
  overflow: visible;
  display: flex;
}
.bmi-scale__seg { height: 100%; }
.bmi-scale__seg:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.bmi-scale__seg:last-child { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.bmi-scale__marker {
  position: absolute;
  top: -6px;
  width: 4px; height: 26px;
  background: var(--color-primary-dark);
  border-radius: var(--radius-pill);
  transform: translateX(-50%);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .bmi-scale__marker { background: #fff; }
.bmi-scale__labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-size: 10px;
  color: var(--color-muted);
}

/* Activity/calorie table */
.calc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.calc-table th, .calc-table td { padding: var(--space-3) var(--space-4); text-align: left; }
.calc-table thead th { background: var(--color-surface-alt); color: var(--color-primary-dark); font-weight: var(--fw-semibold); }
[data-theme="dark"] .calc-table thead th { color: var(--color-text); }
.calc-table tbody tr { border-top: 1px solid var(--color-border); }
.calc-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); color: var(--color-primary); }

/* Scientific calculator */
.sci { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 900px) { .sci { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.sci__display {
  background: var(--color-primary-dark);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-1);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.sci__expr { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--color-light); min-height: 20px; word-break: break-all; opacity: 0.9; }
.sci__out { font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: var(--fw-bold); word-break: break-all; }
.sci__meta { display: flex; gap: var(--space-3); font-size: 10px; color: var(--color-light); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.sci__keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); margin-top: var(--space-4); }
.key {
  padding: var(--space-3) 0;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  transition: background-color var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}
.key:hover { border-color: var(--color-accent); background: var(--color-accent-soft); }
.key:active { transform: translateY(1px); }
.key--fn { font-size: var(--fs-xs); color: var(--color-primary); }
.key--op { background: var(--color-accent-soft); color: var(--color-primary); }
.key--eq { background: var(--color-primary); color: #fff; grid-column: span 2; }
.key--eq:hover { background: var(--color-primary-hover); }
.key--clear { color: var(--color-danger); }
.sci__side { display: flex; flex-direction: column; gap: var(--space-3); }
.sci__history {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-4);
  max-height: 320px;
  overflow-y: auto;
}
.sci__history h3 { font-size: var(--fs-sm); margin-bottom: var(--space-2); }
.sci__history-list { display: flex; flex-direction: column; gap: var(--space-2); }
.sci__history-item {
  width: 100%;
  text-align: right;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-muted);
  background: var(--color-bg);
}
.sci__history-item:hover { background: var(--color-accent-soft); color: var(--color-primary); }
.sci__history-empty { font-size: var(--fs-sm); color: var(--color-muted); }

/* ---------- Charts (Step 5) ---------- */
.result-with-chart { display: grid; gap: var(--space-5); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 780px) { .result-with-chart { grid-template-columns: 220px 1fr; } }

.donut-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.donut { width: 100%; max-width: 200px; }
.donut__seg { transition: stroke-dasharray var(--transition-base); }
.donut__ctop { font-size: 3px; fill: var(--color-muted); }
.donut__cbottom { font-size: 4px; font-weight: 700; fill: var(--color-primary-dark); }
[data-theme="dark"] .donut__cbottom { fill: var(--color-text); }

.chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.chart-legend__item { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); color: var(--color-muted); }
.chart-legend__dot { width: 10px; height: 10px; border-radius: 3px; }

.chart-bars-wrap { display: flex; flex-direction: column; gap: var(--space-4); }
.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  height: 200px;
  padding-top: var(--space-2);
}
.chart-bar { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); height: 100%; }
.chart-bar__stack {
  width: 100%;
  max-width: 42px;
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface-alt);
}
.chart-bar__seg { width: 100%; transition: height var(--transition-base); }
.chart-bar__label { font-size: 10px; color: var(--color-muted); }

/* ---------- Scrollable schedule ---------- */
.table-scroll { max-height: 340px; overflow-y: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.table-scroll .calc-table { border: none; border-radius: 0; }
.table-scroll thead th { position: sticky; top: 0; }

/* ---------- Step 6 — inline notices (e.g. offline FX rates) ---------- */
.calc-note {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.calc-note[hidden] { display: none; }
.calc-note--warning {
  background: color-mix(in srgb, var(--color-warning) 10%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-warning) 35%, transparent);
  color: var(--color-warning);
}