/* ════════════════════════════════════════════════════════════
   Goal Calculator — "The Beacon"
   Rose-plum surface · rose-magenta beacon · chartreuse solved path.
   Identity: inverted layout — set a goal, the tool returns the
   monthly SIP needed; a template-chip band; a beacon motif.
   ════════════════════════════════════════════════════════════ */

body[data-tool="goal"] {
  --surface:        #160F18;
  --surface-raised: #221726;
  --surface-high:   #33233A;
  --hairline:       rgba(229, 143, 176, 0.15);
  --hairline-bold:  rgba(229, 143, 176, 0.34);
  --accent:         #CD8AA6;
  --accent-bright:  #EAA8C2;
  --accent-deep:    #341E2C;
  --accent-glow:    rgba(229, 143, 176, 0.42);
  --contrast:       #C2CF6A;
  --contrast-bright:#D6E184;
  --contrast-soft:  rgba(205, 217, 110, 0.13);
  --contrast-glow:  rgba(205, 217, 110, 0.50);
}

body[data-tool="goal"] .tk-readout {
  background:
    radial-gradient(120% 150% at 10% 25%, rgba(229,143,176,0.09), transparent 58%),
    var(--surface-raised);
}

/* template-chip band */
.goal-templates {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: clamp(16px, 2vw, 22px) clamp(20px, 2.4vw, 28px);
  margin-bottom: clamp(16px, 2vw, 26px);
}
.goal-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
  background: var(--surface);
  border: 1px solid var(--hairline-bold);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.goal-chip:hover { color: var(--text); border-color: var(--accent); }
.goal-chip.is-on {
  background: var(--accent);
  color: var(--surface);
  border-color: var(--accent);
}
.goal-chip-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 10px;
}

/* inflation toggle */
.goal-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--hairline);
}
.goal-toggle-label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-soft);
}
body[data-tool="goal"] .goal-switch {
  -webkit-appearance: none;
  appearance: none;
  width: 44px; height: 23px;
  border-radius: 999px;
  background: var(--hairline-bold);
  position: relative;
  cursor: pointer;
  transition: background 160ms ease;
  flex: none;
}
body[data-tool="goal"] .goal-switch::before {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--text);
  transition: transform 160ms var(--ease, ease);
}
body[data-tool="goal"] .goal-switch:checked { background: var(--contrast); }
body[data-tool="goal"] .goal-switch:checked::before {
  transform: translateX(21px);
  background: var(--surface);
}