/* ==========================================
   BACKGROUND
========================================== */

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  overflow-y: auto;
  position: relative;
}

/* ==========================================
   WRAPPER - FIXED
========================================== */

.register-wrapper {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-bottom: 24px;
  padding-top: 115px;
  position: relative;
  z-index: 1;
}

/* ==========================================
   CARD
========================================== */

.register-card {
  position: relative;
  width: 100%;
  max-width: 800px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 20px 44px 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  z-index: 5;
}

.close-btn {
  position: absolute;
  top: 15px;
  right: 18px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #9ca3af;
  transition: 0.2s;
}

.close-btn:hover {
  color: var(--status-danger-text);
}

/* ==========================================
   HEADER
========================================== */

.register-header {
  text-align: center;
  margin-bottom: 12px;
}

.register-header h2 {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-ink);
}

.register-header p {
  margin-top: 4px;
  font-size: 13px;
  color: var(--color-ink-soft);
}

/* ==========================================
   ALERTS
========================================== */

/* ==========================================
   PROGRESS
========================================== */

.progress-container {
  margin-bottom: 14px;
}

.progress-bar {
  height: 5px;
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 33.33%;
  background: linear-gradient(90deg, var(--color-secondary), var(--chart-1));
  transition: 0.4s ease;
}

.progress-steps {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}

.step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--color-surface);
}

.step span {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-border);
  color: white;
  font-size: 11px;
  font-weight: 700;
}

.step p {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.step.active {
  background: var(--status-danger);
}

.step.active span {
  background: var(--status-danger-fill);
}

.step.completed {
  background: var(--status-info);
}

.step.completed span {
  background: var(--status-info-fill);
}

/* ==========================================
   INFO BOX
========================================== */

.info-box {
  background: #f0f7ff;
  border-left: 4px solid var(--status-info-fill);
  padding: 16px 20px;
  border-radius: 8px;
  margin: 20px 0;
}

.info-box h3 {
  color: #1e293b;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: 8px;
}

.info-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-box ul li {
  color: var(--color-ink-muted);
  font-size: 13px;
  padding: 4px 0;
  padding-left: 20px;
  position: relative;
}

.info-box ul li:before {
  content: "•";
  color: var(--status-info-fill);
  font-weight: 700;
  position: absolute;
  left: 0;
}

/* ==========================================
   FORM
========================================== */

.form-step {
  display: none;
}

.form-step.active {
  display: block;
  animation: fadeSlide 0.3s ease;
}

@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 15px;
}

.form-group {
  margin-bottom: 5px;
}

.form-group label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink-soft);
  letter-spacing: 0.2px;
}

.required-marker {
  color: var(--status-danger-text);
  font-weight: 700;
}

.optional-marker {
  color: #9ca3af;
  font-weight: 400;
  font-style: italic;
}

.form-group input,
.form-group select {
  width: 100%;
  height: 40px;
  border: 1px solid #a5a6a867;
  border-radius: 10px;
  background: var(--color-surface);
  padding: 0 10px;
  font-size: var(--text-sm);
  box-sizing: border-box;
  transition: 0.25s ease;
}

.form-group input::placeholder {
  color: var(--color-ink-faint);
  font-size: 12px;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  background: rgb(244, 246, 247);
  border-color: var(--status-info-fill);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-helper {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--color-ink-soft);
}

.form-helper-error {
  color: var(--status-danger-text);
  font-weight: 600;
}

.form-helper-success {
  color: var(--status-success-fill);
  font-weight: 600;
}

/* Email Verification Note */
.form-helper-verification {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--status-info-text);
  background: #eff6ff;
  padding: 6px 10px;
  border-radius: 6px;
  border-left: 3px solid var(--status-info-fill);
}

/* Read-only field styles */
.readonly-field {
  background-color: #f5f5f5 !important;
  color: #333 !important;
  cursor: not-allowed !important;
  opacity: 0.8 !important;
}

.readonly-field:focus {
  outline: none !important;
  border-color: var(--color-border) !important;
}

/* ==========================================
   STEP 1 BUTTONS
========================================== */

.step-1-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  gap: 12px;
}

.step-1-buttons .btn-next {
  margin-left: auto;
}

/* ==========================================
   CANCEL BUTTON
========================================== */

.btn-cancel {
  height: 42px;
  padding: 0 24px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  margin-top: 10px;
  background: var(--color-surface);
  color: var(--color-ink-muted);
  transition: all 0.3s ease;
}

.btn-cancel:hover {
  background: var(--color-border);
  transform: translateY(-2px);
}

/* ==========================================
   ERROR STYLES FOR VALIDATION
========================================== */

.form-group input.error,
.form-group select.error {
  border-color: var(--status-danger-fill) !important;
  box-shadow: 0 0 0 3px rgba(203, 31, 31, 0.1) !important;
}

.form-group input.error:focus,
.form-group select.error:focus {
  border-color: var(--status-danger-fill) !important;
  box-shadow: 0 0 0 3px rgba(203, 31, 31, 0.2) !important;
}

.custom-select-display.error {
  border-color: var(--status-danger-fill) !important;
  box-shadow: 0 0 0 3px rgba(203, 31, 31, 0.1) !important;
}

/* ==========================================
   PASSWORD
========================================== */

.password-wrapper {
  position: relative;
  width: 100%;
}

.password-wrapper input {
  width: 100%;
  padding-right: 45px;
}

.toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  color: #888;
  transition: color 0.2s;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-password:hover {
  color: #333;
}

.toggle-password:focus {
  outline: none;
}

.toggle-password i {
  font-size: 20px;
}

/* Password checklist */
.password-checklist {
  margin-top: 4px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px 8px;
}

.password-checklist li {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: var(--color-ink-soft);
  padding: 1px 0;
  transition: color 0.3s ease;
  white-space: nowrap;
}

.password-checklist li.valid {
  color: var(--status-success-fill);
}

.password-checklist li .check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  font-size: 6px;
  transition: all 0.3s ease;
  flex-shrink: 0;
  font-weight: 700;
}

.password-checklist li.valid .check-icon {
  border-color: var(--status-success-fill);
  background-color: var(--status-success-solid);
  color: white;
}

.password-checklist li .check-icon .check-symbol {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.password-checklist li.valid .check-icon .check-symbol {
  opacity: 1;
}

/* Confirm password message */
.confirm-message {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: var(--color-ink-soft);
  transition: color 0.3s ease;
}

.confirm-message.match {
  color: var(--status-success-fill);
}

.confirm-message.no-match {
  color: var(--status-danger-text);
}

/* ==========================================
   BUTTONS
========================================== */

.consent-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink-muted);
  cursor: pointer;
  line-height: 1.4;
}

.checkbox-label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin: 0;
  border: 2px solid var(--color-ink-faint);
  border-radius: 5px;
  background: var(--color-surface);
  cursor: pointer;
  position: relative;
  transition: background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.checkbox-label input[type="checkbox"]:hover {
  border-color: var(--status-info-fill);
}

.checkbox-label input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

.checkbox-label input[type="checkbox"]:checked {
  background: var(--status-info-fill);
  border-color: var(--status-info-fill);
}

.checkbox-label input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-label input[type="checkbox"].error {
  border-color: var(--status-danger-fill);
  box-shadow: 0 0 0 3px rgba(203, 31, 31, 0.15);
}

.consent-label {
  align-items: flex-start;
}

.consent-label input[type="checkbox"] {
  margin-top: 2px;
}

.policy-link-trigger {
  display: inline;
  padding: 0;
  border: none;
  background: none;
  color: var(--status-info-fill);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.policy-link-trigger:hover {
  color: var(--status-info-text);
}

.consent-hint {
  margin: 6px 0 0 29px;
  font-size: 11.5px;
  color: var(--color-ink-faint);
}

.consent-hint.agreed {
  display: none;
}

/* ==========================================
   TERMS & PRIVACY POLICY POPUP
========================================== */
.policy-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(2px);
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 3000;
}

.policy-modal-overlay.open {
  display: flex;
}

.policy-modal {
  display: flex;
  flex-direction: column;
  width: min(92vw, 820px);
  height: min(88vh, 860px);
  background: var(--color-white);
  border-radius: 16px;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.35);
  overflow: hidden;
}

.policy-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  flex: 0 0 auto;
}

.policy-modal-header h2 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-primary, var(--color-primary));
  margin: 0;
}

.policy-modal-close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-ink-soft);
  font-size: 22px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.policy-modal-close:hover {
  background: var(--color-border);
  color: #1e293b;
}

.policy-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 24px 28px;
}

.policy-modal-body h3.policy-modal-section {
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-border);
}

.policy-modal-body h3.policy-modal-section.terms {
  color: var(--color-secondary, var(--color-secondary));
}

.policy-modal-body h3.policy-modal-section.privacy {
  color: var(--color-primary, var(--color-primary));
  margin-top: 30px;
}

.policy-modal-body h4 {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #1e293b;
  margin: 18px 0 6px;
}

.policy-modal-body h4:first-of-type {
  margin-top: 0;
}

.policy-modal-body p {
  font-size: 13.5px;
  line-height: 1.65;
  color: #444;
  margin: 0 0 10px;
}

.policy-modal-subheading {
  font-weight: 700 !important;
  color: #333 !important;
}

.policy-modal-body ul {
  margin: 0 0 12px;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #444;
}

.policy-modal-body ul li {
  margin-bottom: 4px;
}

.policy-modal-footnote {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  color: var(--color-ink-faint);
  font-size: 12px;
  line-height: 1.6;
}

.policy-modal-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 24px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.policy-modal-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-ink-faint);
}

.policy-modal-hint.reached {
  color: var(--status-success-text, var(--status-success-fill));
}

.btn-policy-continue {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border: none;
  border-radius: 10px;
  background: var(--color-primary, var(--color-primary));
  color: var(--badge-text);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease, opacity 0.18s ease;
}

.btn-policy-continue:hover:not(:disabled) {
  background: var(--color-primary-hover, var(--color-primary-hover));
}

.btn-policy-continue:disabled {
  background: var(--color-border-soft);
  cursor: not-allowed;
  opacity: 0.8;
}

@media (max-width: 640px) {
  .policy-modal {
    width: 100%;
    height: min(82vh, 640px);
    border-radius: 18px;
  }

  .policy-modal-overlay {
    padding: 16px;
  }

  .policy-modal-header {
    align-items: flex-start;
    padding: 14px 16px;
    gap: 10px;
  }

  .policy-modal-header h2 {
    line-height: 1.35;
  }

  .policy-modal-close {
    width: 30px;
    height: 30px;
    font-size: 20px;
  }

  .policy-modal-body {
    padding: 18px 16px;
  }

  .policy-modal-body h3.policy-modal-section {
    margin-bottom: 12px;
  }

  .policy-modal-footer {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 16px;
  }

  .policy-modal-hint {
    justify-content: center;
    text-align: center;
  }

  .btn-policy-continue {
    justify-content: center;
  }
}

.step-buttons {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.btn-next,
.btn-register,
.btn-prev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 24px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  margin-top: 10px;
}

.btn-next,
.btn-register {
  color: white;
  background: linear-gradient(135deg, var(--status-danger-fill), var(--status-danger-hover));
}

.btn-next:hover,
.btn-register:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(203, 31, 31, 0.25);
}

.btn-prev {
  background: var(--color-surface);
  color: var(--color-ink-muted);
}

.btn-prev:hover {
  background: var(--color-border);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(55, 65, 81, 0.18);
}

/* ==========================================
   CUSTOM DROPDOWN
========================================== */

.custom-select-wrapper {
  position: relative;
  width: 100%;
}

.custom-select {
  position: relative;
  width: 100%;
}

.custom-select-display {
  position: relative;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #a5a6a867;
  border-radius: 10px;
  font-size: var(--text-sm);
  background-color: var(--color-surface);
  color: #333;
  cursor: pointer;
  transition: border-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  box-sizing: border-box;
}

.custom-select-display:hover {
  border-color: var(--status-info-fill);
}

.custom-select-display.open {
  border-color: var(--status-info-fill);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.custom-select-display .selected-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-select-arrow {
  color: #666;
  font-size: 12px;
  pointer-events: none;
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 8px;
}

.custom-select-display.open .custom-select-arrow {
  transform: rotate(180deg);
}

.custom-select-options {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 100%;
  box-sizing: border-box;
}

.custom-select-options.show {
  display: block;
}

.custom-select-options .option {
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-select-options .option:hover {
  background-color: var(--color-border);
}

.custom-select-options .option.selected {
  background-color: var(--color-border);
}

.custom-select-options::-webkit-scrollbar {
  width: 8px;
}

.custom-select-options::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.custom-select-options::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.custom-select-options::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* ==========================================
   FOOTER
========================================== */

.register-footer {
  text-align: center;
  margin-top: 12px;
}

.register-footer p {
  color: var(--color-ink-soft);
  font-size: 13px;
}

.register-footer a {
  color: var(--status-info-fill);
  text-decoration: none;
  font-weight: 600;
}

.register-footer a:hover {
  text-decoration: underline;
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {
  .register-wrapper {
    padding: 20px 10px !important;
    align-items: flex-start !important;
    padding-top: 100px !important;
  }

  .register-card {
    max-width: 100%;
    padding: 55px 18px 18px;
  }

  /* Short, consecutive fields (name parts, sex/birthdate, address parts)
     stay paired two-per-row instead of stacking into one column each -
     cuts the number of rows roughly in half on mobile. A row with a
     dangling 3rd field (e.g. Contact Number after Sex + Birthdate) gets
     that leftover field spanning the full width instead of sitting in a
     half-empty row. */
  .form-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 12px;
  }

  .form-row > :nth-child(3):last-child {
    grid-column: 1 / -1;
  }

  .progress-steps {
    gap: 5px;
  }

  .step {
    flex: 1;
    justify-content: center;
  }

  .step p {
    display: none;
  }

  /* Buttons keep the desktop row - Back/Cancel left, Continue right - at
     every width instead of stacking full-width, so the primary action sits
     in the same place on a phone as it does on a laptop. */
  .btn-next,
  .btn-prev,
  .btn-register,
  .btn-cancel {
    padding: 0 18px;
  }

  .password-checklist {
    grid-template-columns: 1fr 1fr;
    gap: 1px 6px;
  }

  .password-checklist li {
    font-size: 8px;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .register-wrapper {
    padding: 10px 5px !important;
    padding-top: 90px !important;
  }

  .register-card {
    padding: 45px 14px 14px;
  }

  .password-checklist {
    grid-template-columns: 1fr;
    gap: 1px;
  }
}

/* ==========================================
   REAL-TIME ERROR CLEARING - INPUT FOCUS
========================================== */

/* When input has error and user focuses on it */
.form-group input.error:focus,
.form-group select.error:focus {
  border-color: var(--status-danger-fill) !important;
  box-shadow: 0 0 0 3px rgba(203, 31, 31, 0.2) !important;
}

/* When input is valid and user is typing */
.form-group input:not(.error):focus,
.form-group select:not(.error):focus {
  border-color: var(--status-info-fill) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

/* Smooth transition for error states */
.form-group input,
.form-group select,
.custom-select-display {
  transition: border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* ==========================================================================
   PERMANENCE NOTICE (step 1)
   Warns that name/sex/birthdate can never be changed after registration —
   placed before the fields rather than after, so it is read in time to matter.
   ========================================================================== */
/* Red rather than the amber this used to be, so the one notice on the form
   that says "this can never be undone" carries the site's own red instead of
   reading as a softer, more ignorable caution. The text is a red-biased
   near-black rather than the old brown - it sits on a tinted ground, so it
   needs the weight of body copy, not the colour of a highlight. */
.permanence-notice {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  background: #fef4f4;
  border: 1px solid var(--status-danger-border);
  border-left: 4px solid var(--color-secondary);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin-bottom: 1.25rem;
  color: var(--status-danger-hover);
  font-size: 13px;
  line-height: 1.55;
}

.permanence-notice > i {
  color: var(--color-secondary);
  font-size: 16px;
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.permanence-notice strong {
  color: #2f0c0c;
}

.permanence-notice p {
  margin: 0.4rem 0 0;
}

.permanence-notice-ok {
  color: #3f6212;
}

.permanence-notice-ok strong {
  color: #365314;
}

@media (max-width: 480px) {
  .permanence-notice {
    font-size: 12.5px;
    padding: 0.8rem;
  }
}

/* ==========================================================================
   AUTO-DISMISSING WARNINGS
   The error banner is rendered from the LAST submission, so it goes stale the
   moment the applicant starts correcting a field. It now clears itself: on a
   timer, on the close button, or as soon as the form is edited.
   ========================================================================== */

/* Collapses rather than just fading, so the form below moves up to fill the
   gap instead of leaving a hole where the message was. */

/* Thin bar along the bottom showing how long the message has left, so it
   never simply vanishes without warning. */

@media (prefers-reduced-motion: reduce) {
  .alert.auto-dismiss,
  .alert-timer.is-counting {
    transition: none;
  }
  .alert-timer { display: none; }
}