/* afterschool-registration.css — GCO-302 B2 additions on top of the shared
 * public-form.css primitives. Loaded by register.html only.
 *
 * Sections:
 *   1. Student review cards + multi-student submit results (step 4)
 *   2. VIDE notice callout (step 3)
 */

/* ── 1. Student review cards + multi-result ─────────────────────────────── */

.afterschool-student-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.afterschool-student-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.afterschool-student-card__main {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  min-width: 0;
}

.afterschool-student-card__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--color-primary-alpha-12);
  color: var(--color-primary-dark);
}

.afterschool-student-card__icon svg {
  width: 16px;
  height: 16px;
}

.afterschool-student-card__title {
  margin: 0 0 var(--spacing-xs);
  font-weight: 700;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.afterschool-student-card__meta {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: 1.6;
}

.afterschool-student-card__remove {
  flex: 0 0 auto;
  background: none;
  border: 0;
  color: var(--color-error);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  padding: var(--spacing-xs) var(--spacing-sm);
}

.afterschool-student-card__remove:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
  border-radius: var(--radius-sm);
}

.afterschool-add-student {
  margin-bottom: var(--spacing-lg);
}

.afterschool-multi-result {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0;
  text-align: left;
}

.afterschool-multi-result__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-surface-subtle);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-border-strong);
}

.afterschool-multi-result__row--registered { border-left-color: var(--color-success); }
.afterschool-multi-result__row--waitlisted { border-left-color: var(--color-warning); }
.afterschool-multi-result__row--full,
.afterschool-multi-result__row--duplicate,
.afterschool-multi-result__row--error       { border-left-color: var(--color-error); }

.afterschool-multi-result__main {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-width: 0;
}

.afterschool-multi-result__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.afterschool-multi-result__icon svg {
  width: 15px;
  height: 15px;
}

.afterschool-multi-result__icon--registered {
  background: rgba(22, 163, 74, 0.12);
  color: var(--color-success);
}

.afterschool-multi-result__icon--waitlisted {
  background: rgba(246, 181, 7, 0.15);
  color: var(--color-warning);
}

.afterschool-multi-result__icon--full,
.afterschool-multi-result__icon--duplicate,
.afterschool-multi-result__icon--error {
  background: var(--color-error-alpha-12);
  color: var(--color-error);
}

.afterschool-multi-result__name {
  font-weight: 600;
  color: var(--color-text);
}

.afterschool-multi-result__status {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

/* ── 2. VIDE notice callout ──────────────────────────────────────────────── */

.afterschool-vide-notice {
  padding: var(--spacing-md);
  background: var(--color-primary-alpha-06);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-block: var(--spacing-md);
}

.afterschool-vide-notice__heading {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.afterschool-vide-notice__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--color-primary);
}

/* Only the LAST paragraph loses its bottom margin. The notice carries two
   paragraphs (what data is used, then how it is used + who to ask), and
   zeroing every one of them would collapse the gap between them. */
.afterschool-vide-notice .public-form__intro:last-child {
  margin-bottom: 0;
}

/* The Yes/No choice sits inside the callout, separated from the explanatory
   copy above it. Last child, so it carries no trailing margin of its own. */
.afterschool-vide-notice__choice {
  margin-top: var(--spacing-md);
  margin-bottom: 0;
}

/* The contact link, measured in-browser against this callout's real composited
   background (#F3F9FE, the tint over the card over the page). The inherited
   --color-primary-dark (#2A75C4) lands at 4.45:1, which FAILS the 4.5:1 AA bar
   for 16px normal-weight text. #1F5FA6 measures 6.08:1 on the same background.
   Underlined as well so the link is not signalled by colour alone. */
.afterschool-vide-notice a {
  color: #1f5fa6;
  text-decoration: underline;
}

/* ── 3. Result-view entrance (page-scoped, not the shared public-form.css --
   camp's #camp-registration-form is untouched). A settle-in for the moment
   that matters most: the family finally sees whether their child has a seat.
   Keyed off .result-view--show, which the shared showResultView() already
   toggles -- no JS change needed. ── */
#afterschool-form .result-view.result-view--show {
  animation: afterschool-result-in 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes afterschool-result-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #afterschool-form .result-view.result-view--show {
    animation: none;
  }
}