/* Part D late enrollment penalty calculator.
   Builds on the IEP calculator card (calculator.css) and the quiz's question
   steps (quiz.css); only what those don't cover lives here. */

/* The card grows with each answer; keep the headline at the top beside it. */
.pdp-hero .iep-hero__grid { align-items: start; }

.pdp-private {
  font-size: var(--text-s);
  color: var(--color-text-muted);
  margin: calc(-1 * var(--space-m)) 0 var(--space-l);
}

.pdp-tel { white-space: nowrap; }

/* --- Question steps inside the card --- */
.pdp-calc .quiz__question {
  font-size: var(--text-l);
  line-height: 1.25;
  margin: 0 0 var(--space-s);
  /* Clear the sticky header when a step scrolls into view. */
  scroll-margin-top: 120px;
}
.pdp-calc .quiz__question:focus { outline: none; }
.pdp-calc .quiz__question:focus-visible {
  outline: 3px solid var(--color-primary-light);
  outline-offset: 4px;
}

.pdp-hint {
  font-size: var(--text-s);
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0 0 var(--space-m);
  text-wrap: pretty;
}

/* White answers stand out on the tinted card. */
.pdp-calc .quiz__answer {
  background: #fff;
  width: 100%;
}
.pdp-calc .quiz__answer:hover,
.pdp-calc .quiz__answer:focus-visible {
  background: var(--color-primary-light);
}

.pdp-fields--month { grid-template-columns: 1.6fr 1fr; }

/* Phones: three dropdowns in one row cut off "Septiembre" and the year.
   Month gets its own row; day and year share the next one. */
@media (max-width: 520px) {
  .pdp-calc { padding: var(--space-l) var(--space-m); }
  .pdp-calc .iep-calc__fields:not(.pdp-fields--month) { grid-template-columns: 1fr 1fr; }
  .pdp-calc .iep-calc__fields:not(.pdp-fields--month) .iep-calc__field:first-child { grid-column: 1 / -1; }
}

.pdp-step .iep-calc__submit { margin-top: var(--space-m); }
.pdp-alt-answer { margin-top: var(--space-s); }

.pdp-error {
  color: var(--color-danger);
  font-size: var(--text-s);
  font-weight: 600;
  margin: var(--space-s) 0 0;
}

/* --- Result --- */
.pdp-result__box {
  background: #fff;
  margin-bottom: var(--space-m);
}
.pdp-result__box p { margin: 0 0 var(--space-s); line-height: 1.55; }
.pdp-result__box p:last-child { margin-bottom: 0; }

.pdp-result__subtitle {
  font-family: var(--font-heading);
  font-size: var(--text-m);
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-xs);
}
.pdp-result__list {
  margin: 0 0 var(--space-m);
  padding-inline-start: 1.25rem;
}
.pdp-result__list li {
  margin-bottom: var(--space-2xs);
  line-height: 1.5;
  text-wrap: pretty;
}

.pdp-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0 0 var(--space-s);
  text-wrap: pretty;
}
.pdp-note a { color: var(--color-primary); }

.pdp-result .quiz__next {
  color: var(--color-primary-dark);
  font-weight: 600;
  margin: var(--space-m) 0 var(--space-s);
}
.pdp-result__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.pdp-result__actions .btn { width: 100%; }