/* ============================================================================
   Answers — Sal Klita Calculator
   A small reactive form (family status, retirement status, children's ages,
   family-size top-up) backed by content/sal-klita.json, computed client-side
   in answers-sal-klita.js. No backend — every answer recalculates instantly.
   ========================================================================== */

/* Depends on design-tokens.css and answers-shell.css being <link>ed first (no @import:
   imported URLs can't carry the ?v= cache-busting version the HTML uses). */
/* ---- Header: uses the shared .answers-header from answers-shell.css ---- */

.sk-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 18px 30px;
}
.sk-intro {
  margin: 0 0 22px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ans-slate);
}

/* ---- Form card ---------------------------------------------------------
   All the question fields live in one light card, instead of floating
   loose on the canvas background — reads as a single form, not a list of
   unrelated widgets. */
.sk-form-card {
  background: var(--ans-surface);
  border: 1px solid var(--ans-line);
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 16px;
}

/* ---- Fields ---------------------------------------------------------- */
.sk-field { margin-bottom: 22px; }
.sk-form-card > .sk-field:last-child { margin-bottom: 0; }
.sk-field__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ans-navy-900);
  margin: 0 0 10px;
}
.sk-required {
  color: #b3261e;
  font-weight: 700;
}
.sk-field__hint {
  margin: 8px 2px 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ans-slate-400);
}

/* Pill choices (family status, retirement status) — a 3-way segmented
   control: all three always share one row (no flex-wrap), each getting an
   equal third of the width. A long label (e.g. "Single-parent family")
   wraps its OWN text onto a second line inside the pill instead of pushing
   the row to wrap, so the buttons stay a same-row set the user compares
   side by side rather than an unevenly-wrapping list. */
.sk-pills {
  display: flex;
  gap: 8px;
}
.sk-pill {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--ans-line);
  background: var(--ans-surface);
  color: var(--ans-ink);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  padding: 10px 10px;
  border-radius: 12px;
  cursor: pointer;
  white-space: normal;
  text-align: center;
}
.sk-pill:hover { border-color: var(--ans-blue-500); }
.sk-pill--active {
  background: var(--ans-blue-500);
  border-color: var(--ans-blue-500);
  color: #fff;
  font-weight: 600;
}

/* Children age rows */
.sk-children {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.sk-child-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ans-surface);
  border: 1px solid var(--ans-line);
  border-radius: 13px;
  padding: 9px 12px;
}
.sk-child-row__label {
  font-size: 13px;
  color: var(--ans-slate);
  flex-shrink: 0;
}
/* Custom stepper — replaces the browser's native number-input spinner,
   which renders inconsistently (absent on iOS Safari, hover-only on some
   desktop browsers) with a always-visible, same-everywhere +/- control. */
.sk-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.sk-stepper__btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ans-line);
  border-radius: 50%;
  background: var(--ans-canvas);
  color: var(--ans-navy-900);
  font-family: inherit;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.sk-stepper__btn:hover:not(:disabled) { background: #f6f9fd; border-color: var(--ans-blue-500); color: var(--ans-blue-500); }
.sk-stepper__btn:active:not(:disabled) { transform: scale(0.94); }
.sk-stepper__btn:disabled { opacity: 0.35; cursor: default; }
.sk-age-input {
  width: 34px;
  flex-shrink: 0;
  border: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  color: var(--ans-navy-900);
  outline: none;
  background: transparent;
}
.sk-child-row__remove {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: var(--ans-canvas);
  color: var(--ans-slate);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.sk-child-row__remove:hover { background: rgba(179, 38, 30, 0.1); color: #b3261e; }
.sk-add-child {
  border: 1px dashed var(--ans-line);
  background: transparent;
  color: var(--ans-blue-500);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 15px;
  border-radius: 12px;
  cursor: pointer;
  width: 100%;
}
.sk-add-child:hover { background: #f6f9fd; }

/* Family-size checkbox */
.sk-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ans-ink);
  cursor: pointer;
}
.sk-checkbox input { width: 18px; height: 18px; accent-color: var(--ans-blue-500); }

/* ---- Result ------------------------------------------------------------ */
.sk-result {
  background: var(--ans-grad-brand);
  border-radius: 20px;
  padding: 20px;
  color: #fff;
  margin-bottom: 16px;
}
.sk-result__title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 14px;
  color: #fff;
}
.sk-result__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13.5px;
  color: #cfe0f2;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.sk-result__row strong { color: #fff; font-weight: 600; white-space: nowrap; }
.sk-result__row--total {
  border-bottom: 0;
  padding-top: 12px;
  font-size: 14.5px;
  color: var(--ans-gold);
  font-weight: 600;
}
.sk-result__row--total strong { color: var(--ans-gold); font-size: 19px; }
.sk-result__disclaimer {
  margin: 14px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: #a9c4e2;
}

.sk-result__hint {
  text-align: center;
  font-size: 13px;
  color: var(--ans-slate-400);
  padding: 10px;
}

.sk-escalate {
  margin-top: 6px;
  background: rgba(10, 40, 80, 0.04);
  border-radius: 14px;
  padding: 14px 15px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ans-slate);
}
.sk-escalate a { color: var(--ans-blue-500); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}