/* CalculatorSimplified
   Styling for the simplified calculator only. Every rule is scoped to .calc--simplified, which
   js/main.js adds when calculatorVariant is "simplified". Inputs, logic and the original
   styles in css/styles.css are untouched */

.calc--simplified .cx-step {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: var(--w-head); font-size: 17px; color: var(--ink);
}
.calc--simplified .cx-step > span {
  width: 24px; height: 24px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: var(--on-primary); font-size: 12.5px; font-weight: var(--w-ui);
}
.calc--simplified .cx-step-inv { color: var(--on-panel-strong); }
.calc--simplified .cx-step-inv > span { background: var(--panel-strong-accent); color: var(--on-accent); }
.calc--simplified .cx-example {
  font-style: normal; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line-strong);
  font-family: var(--font-text); font-size: 11.5px; font-weight: var(--w-label); color: var(--muted);
}

/* Setup panel: questions first, values second */
.calc--simplified .calc-panel { padding: 28px; gap: 22px; }
.calc--simplified .calc-label { align-items: baseline; }
.calc--simplified .calc-label label,
.calc--simplified .cx-q { font-family: var(--font-display); font-weight: var(--w-head); font-size: 15.5px; color: var(--ink); }
.calc--simplified .calc-label strong { font-family: var(--font-display); font-weight: var(--w-head); font-size: 17px; }
.calc--simplified .cx-help { margin: -2px 0 0; font-family: var(--font-text); font-size: 13px; line-height: 1.45; color: var(--muted); }
.calc--simplified .cx-goal-help { margin-top: -10px; }
.calc--simplified .calc-row:not(.calc-row-top):not(.calc-foot) { flex-direction: column; align-items: stretch; gap: 10px; }

/* Results */
.calc--simplified .calc-results-head .cx-step { flex-wrap: wrap; }
.calc--simplified .payout { padding: 24px; gap: 16px; }
.calc--simplified .cx-pay-head { display: flex; flex-direction: column; gap: 6px; }
.calc--simplified .payout-grid strong { font-size: 26px; }
.calc--simplified .payout-grid div:first-child strong { color: var(--on-panel-strong); }
.calc--simplified .payout-grid .cx-ref { color: var(--cx-ref); }
.calc--simplified { --cx-ref: #A9D3E2; }
[data-theme="dark"] .calc--simplified { --cx-ref: var(--info); }
.calc--simplified .cx-explain { margin: 0; font-family: var(--font-text); font-size: 13.5px; line-height: 1.5; color: var(--on-panel-strong-muted); }

/* Milestones */
.calc--simplified .cx-ms { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid #FFFFFF26; }
[data-theme="dark"] .calc--simplified .cx-ms { border-top-color: var(--line); }
.calc--simplified .cx-ms-head { display: flex; flex-direction: column; gap: 2px; }
.calc--simplified .cx-ms-head strong { font-family: var(--font-display); font-weight: var(--w-head); font-size: 15px; }
.calc--simplified .cx-ms-head span { font-family: var(--font-text); font-size: 12.5px; color: var(--on-panel-strong-muted); }
.calc--simplified .cx-ms-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.calc--simplified .cx-ms-item {
  display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 2px; align-items: center;
  padding: 10px 12px; border-radius: 10px; background: #FFFFFF14;
}
[data-theme="dark"] .calc--simplified .cx-ms-item { background: var(--surface-2); }
.calc--simplified .cx-ms-dot { width: 8px; height: 8px; border-radius: 99px; grid-row: span 2; align-self: start; margin-top: 5px; }
.calc--simplified .cx-ms-goal { font-family: var(--font-display); font-size: 13.5px; font-weight: var(--w-ui); font-variant-numeric: tabular-nums; }
.calc--simplified .cx-ms-status { font-family: var(--font-text); font-size: 12px; color: var(--on-panel-strong-muted); }
.calc--simplified .cx-done .cx-ms-dot { background: var(--panel-strong-accent); }
.calc--simplified .cx-part .cx-ms-dot { background: #EBBE5A; }
.calc--simplified .cx-back .cx-ms-dot { background: var(--cx-ref); }

@media (max-width: 720px) {
  .calc--simplified .calc-panel { padding: 22px; }
  .calc--simplified .cx-ms-list { grid-template-columns: minmax(0, 1fr); }
  .calc--simplified .payout-grid strong { font-size: 22px; }
}