/* ════════════════════════════════════════════════════════════
   Retirement Calculator — "Sun Over a Life-Horizon"
   Warm dusk-charcoal · rose-orange accumulation · periwinkle dusk.
   Identity: a life-horizon timeline band + a sun-arc motif.
   ════════════════════════════════════════════════════════════ */

body[data-tool="retirement"] {
  --surface:        #15110C;
  --surface-raised: #221C14;
  --surface-high:   #332A1E;
  --hairline:       rgba(235, 154, 110, 0.15);
  --hairline-bold:  rgba(235, 154, 110, 0.32);
  --accent:         #D89968;
  --accent-bright:  #EFB488;
  --accent-deep:    #3A2A1C;
  --accent-glow:    rgba(235, 154, 110, 0.42);
  --contrast:       #8E97D4;
  --contrast-bright:#AEB5E6;
  --contrast-soft:  rgba(142, 151, 212, 0.13);
  --contrast-glow:  rgba(142, 151, 212, 0.50);
}

body[data-tool="retirement"] .tk-readout {
  background:
    radial-gradient(130% 150% at 12% 20%, rgba(235,154,110,0.10), transparent 58%),
    var(--surface-raised);
}

/* life-horizon timeline */
.ret-timeline { padding: clamp(20px, 2.4vw, 30px); margin-bottom: clamp(16px, 2vw, 26px); }
.ret-phases {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.ret-phase-label.is-accum { color: var(--accent-bright); }
.ret-phase-label.is-draw  { color: var(--contrast-bright); }
.ret-phase-label b { font-weight: 600; }
.ret-track {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface);
}
.ret-bar { height: 100%; transition: width 360ms var(--ease, ease); }
.ret-bar.is-accum { background: linear-gradient(to right, var(--accent-deep), var(--accent-bright)); }
.ret-bar.is-draw  { background: linear-gradient(to right, var(--contrast), rgba(142,151,212,0.28)); }
.ret-ages {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-mute);
}
.ret-ages b { color: var(--text); font-weight: 600; }