/* ─── bio-age-dial.css (iter69) ──────────────────────────────────────
 * The breathing-dial result on /bio-age.
 *
 * Design direction: antique speedometer / clock face. Cream radial-
 * gradient face. Brand-teal needle with subtle gradient. Tick marks
 * every year with major labels every 10 years (20, 30, 40, ..., 80).
 * The needle swings from age 50 to the value on first render with
 * cubic-out spring physics (driven by JS), then "breathes" with a
 * tiny ±0.6° oscillation on a 5-second cycle.
 * ────────────────────────────────────────────────────────────────── */

.ba-dial-wrap {
  display: grid;
  place-items: center;
  margin: 12px auto 18px;
  max-width: 360px;
}

.ba-dial {
  width: 100%;
  height: auto;
  display: block;
}

.ba-dial-face {
  filter: drop-shadow(0 2px 4px rgba(14, 30, 30, 0.08));
}

/* Tick + label colours */
.ba-dial .tick-major { stroke: rgba(14, 30, 30, 0.50); stroke-width: 1.5; }
.ba-dial .tick-minor { stroke: rgba(14, 30, 30, 0.18); stroke-width: 1; }
.ba-dial .tick-label {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  fill: var(--ink-mute, #6E707A);
  font-variant-numeric: tabular-nums;
}

/* Chronological-age reference notch */
.ba-dial .chrono-notch {
  stroke: var(--teal-deep, #086E66);
  stroke-width: 2;
  opacity: 0.6;
}
.ba-dial .chrono-label {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  fill: var(--teal-deep, #086E66);
}

/* Center readout */
.ba-dial-value {
  font-family: var(--display);
  font-weight: 600;
  font-size: 42px;
  letter-spacing: -0.025em;
  fill: var(--ink, #15161A);
  font-variant-numeric: tabular-nums;
}
.ba-dial-unit {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  fill: var(--ink-mute, #6E707A);
}

/* Needle — rotates around (160, 180). JS sets --needle-deg. */
.ba-dial-needle-g {
  transform-origin: 160px 180px;
  transform-box: view-box;
  transform: rotate(var(--needle-deg, 0deg));
  filter: drop-shadow(0 1px 2px rgba(7, 86, 79, 0.30));
}

/* On first render, dial swings from "rest" (90° = pointing left at age
   20) to the value. JS triggers this by adding `.is-swinging`. */
.ba-dial-wrap.is-swinging .ba-dial-needle-g {
  transition: transform 1400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Once settled, JS adds `.is-breathing` and the breath oscillation
   takes over (driven by a CSS variable, gently nudging ±0.6°). */
.ba-dial-wrap.is-breathing .ba-dial-needle-g {
  animation: baDialBreath 5s ease-in-out infinite;
  transition: none;
}
@keyframes baDialBreath {
  0%, 100% { transform: rotate(calc(var(--needle-deg, 0deg) - 0.6deg)); }
  50%      { transform: rotate(calc(var(--needle-deg, 0deg) + 0.6deg)); }
}

/* ── Contribution waterfall ────────────────────────────────────── */
.ba-waterfall {
  max-width: 480px;
  margin: 0 auto 24px;
  padding: 18px 18px 14px;
  background: #FFFFFF;
  border: 1px solid rgba(14, 30, 30, 0.08);
  border-radius: 12px;
}
.ba-waterfall-title {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute, #6E707A);
  margin: 0 0 14px;
}
.ba-waterfall-title em {
  font-family: var(--serif, "Domine", Georgia, serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: var(--teal-deep, #086E66);
  letter-spacing: -0.005em;
}
.ba-wf-row {
  display: grid;
  grid-template-columns: 110px 1fr 60px;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  font-family: var(--display);
  font-size: 13px;
}
.ba-wf-label {
  color: var(--ink, #15161A);
  font-weight: 500;
}
.ba-wf-bar-wrap {
  position: relative;
  height: 14px;
  background: rgba(14, 30, 30, 0.04);
  border-radius: 3px;
  overflow: hidden;
}
.ba-wf-bar-wrap::before {
  /* Zero line in the centre */
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: rgba(14, 30, 30, 0.22);
}
.ba-wf-bar {
  position: absolute;
  top: 2px; bottom: 2px;
  background: var(--teal-deep, #086E66);
  border-radius: 2px;
  transition: width 600ms cubic-bezier(.2, .9, .3, 1),
              left  600ms cubic-bezier(.2, .9, .3, 1);
}
.ba-wf-bar.is-good { background: #14A37F; }
.ba-wf-bar.is-bad  { background: #F26770; }

.ba-wf-delta {
  text-align: right;
  font-family: var(--display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2, #2A2C33);
}
.ba-wf-delta.is-good { color: #14A37F; }
.ba-wf-delta.is-bad  { color: #C9343A; }

/* Hide both panels until the result section becomes visible */
.ba-result:not(.is-visible) .ba-dial-wrap,
.ba-result:not(.is-visible) .ba-waterfall {
  display: none;
}

@media (max-width: 540px) {
  .ba-wf-row { grid-template-columns: 90px 1fr 54px; font-size: 12px; }
  .ba-dial-value { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .ba-dial-wrap.is-swinging .ba-dial-needle-g { transition: none; }
  .ba-dial-wrap.is-breathing .ba-dial-needle-g { animation: none; }
  .ba-wf-bar { transition: none; }
}