/*
 * The application, one step at a time (assets/js/forms.js, startWizard).
 *
 * Only decides which section is on screen. Printing always shows every
 * section, as before, and nothing here touches the packet's own print rules
 * in forms.css.
 */

.is-wizard-hidden { display: none !important; }

/* The bottom progress strip says the same thing as the step list. */
.has-packet-wizard .packet-progress { display: none !important; }
.has-packet-wizard { padding-bottom: 0 !important; }

/* Sending happens from the last step, after reading it over. */
.is-wizard:not(.is-on-review) .form-actions { display: none; }

.wizard {
  /* Its width comes from the page, never from the step row: a row of steps
     that does not wrap otherwise pushes a phone's page sideways. */
  min-width: 0;
  max-width: 100%;
  contain: inline-size;
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 0 1.5rem;
  border: 1px solid #e6dccd;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  background: #fffdf9;
  box-shadow: 0 6px 18px rgba(45, 41, 38, 0.08);
}

.wizard__count {
  margin: 0 0 0.5rem;
  color: #3d342f;
  font-weight: 750;
}

.wizard__meter {
  height: 0.4rem;
  margin-bottom: 0.85rem;
  border-radius: 999px;
  overflow: hidden;
  background: #efe6d6;
}

.wizard__meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #557b58;
  transition: width 0.3s ease;
}

.wizard__steps {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

.wizard__steps button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  border: 1px solid #d3c4ad;
  border-radius: 999px;
  padding: 0.35rem 0.85rem 0.35rem 0.4rem;
  background: #ffffff;
  color: #2d2926;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
}

.wizard__steps button small {
  color: #635852;
  font-size: 0.75rem;
  font-weight: 600;
}

.wizard__number {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: #efe6d6;
  font-size: 0.8rem;
  font-weight: 800;
}

.wizard__steps li[data-state="done"] .wizard__number { background: #e2efe3; color: #2f5733; }
.wizard__steps li[data-state="needs"] .wizard__number { background: #fde8d4; color: #7a3b0f; }

.wizard__steps button[aria-current="step"] {
  border-color: #173f52;
  background: #173f52;
  color: #ffffff;
}

.wizard__steps button[aria-current="step"] small { color: rgba(255, 255, 255, 0.82); }
.wizard__steps button[aria-current="step"] .wizard__number { background: rgba(255, 255, 255, 0.2); color: #ffffff; }

.wizard__switch {
  min-height: 2.75rem;
  border: 0;
  padding: 0.25rem 0;
  background: none;
  color: #1f5168;
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 650;
  text-decoration: underline;
}

.wizard__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.wizard__footer [data-wizard-next] { margin-left: auto; min-width: 9rem; }

.wizard__status { flex-basis: 100%; }
.wizard__status:empty { display: none; }
.wizard__status p { margin: 0 0 0.35rem; color: #7f2a1f; font-weight: 700; }
.wizard__status ul { margin: 0; padding-left: 1.1rem; }

/* Not shown in all-on-one-page mode. */
form:not(.is-wizard) .wizard__footer,
form:not(.is-wizard) .wizard-review,
form:not(.is-wizard) .wizard__steps,
form:not(.is-wizard) .wizard__meter,
form:not(.is-wizard) .wizard__count { display: none; }

.wizard-review .form-section__inner { display: grid; gap: 1.25rem; }

.wizard-review__missing {
  border: 1px solid #f0c9a5;
  border-radius: 0.85rem;
  padding: 0.85rem 1rem;
  background: #fff6ec;
}

.wizard-review__missing p { margin: 0 0 0.35rem; font-weight: 750; }
.wizard-review__missing ul { margin: 0; padding-left: 1.1rem; }

.wizard-review__step {
  border: 1px solid #e6dccd;
  border-radius: 0.85rem;
  padding: 1rem 1.25rem;
  background: #ffffff;
}

.wizard-review__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.wizard-review__head h3 { margin: 0; font-size: 1.05rem; }

.wizard-review__step dl {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 0.35rem 1rem;
  margin: 0.75rem 0 0;
}

.wizard-review__step dt { color: #635852; font-size: 0.9rem; }
.wizard-review__step dd { margin: 0; overflow-wrap: anywhere; }
.wizard-review__empty { margin: 0.5rem 0 0; color: #635852; }

@media (max-width: 640px) {
  .wizard { position: static; padding: 0.85rem; }
  /* On a phone the steps scroll sideways instead of filling the screen. */
  .wizard__steps { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.25rem; }
  .wizard__steps button small { display: none; }
  .wizard__steps button .wizard__label { white-space: nowrap; }
  .wizard__footer {
    position: sticky;
    bottom: 0;
    z-index: 15;
    margin: 1rem -1rem 0;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #e6dccd;
    background: #fffdf9;
  }
  .wizard-review__step dl { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .is-wizard-hidden { display: revert !important; }
  .wizard, .wizard__footer, .wizard-review { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .wizard__meter span { transition: none; }
}

/* ---- Changes the office asked for, and answers from the profile ---- */

.edit-banner {
  display: grid;
  gap: 0.5rem;
  margin: 0 auto 1.25rem;
  max-width: 60rem;
  padding: 1rem 1.25rem;
  border: 1px solid #e0a46a;
  border-left-width: 6px;
  border-radius: 1rem;
  background: #fde8d4;
  color: #2d2926;
}
.edit-banner p { margin: 0; }
.edit-banner .button { justify-self: start; }
.edit-banner[data-edit-done] {
  border-color: #8fbf93;
  background: #e2efe3;
}

.is-edit-view .form-section.is-locked {
  opacity: 0.62;
}
.is-edit-view .form-section[data-reopened] {
  box-shadow: 0 0 0 3px #e0a46a;
}
.locked-note {
  margin: 0.5rem 0 1rem;
  font-weight: 600;
}
.edit-actions .form-actions__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.prefill-mark {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: #635852;
  font-style: italic;
}

/* ---- The print view framed in the office's application screen ----
   Screen only: pages as white sheets on a viewer's gray, the way a PDF reads.
   Printing from the frame uses the packet's own print rules, untouched. */
@media screen {
  .is-embedded-preview { background: #525659 !important; }
  .is-embedded-preview .subpage-header,
  .is-embedded-preview .site-footer { display: none !important; }
  .is-embedded-preview main { padding: 1rem 0 2rem; }
  .is-embedded-preview .parent-packet {
    gap: 1.25rem;
    max-width: 8.5in;
    margin: 0 auto;
    padding: 0 0.75rem 2rem;
    background: transparent;
  }
  .is-embedded-preview .parent-packet > section.print-page {
    border: 0;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  }
}