/* Phase 2a: young people and parents. Reuses style.css classes (.q, .choice, .consent, .welcome, .prose). */
.parent-block[hidden] { display: none; }
.parent-block { background: var(--sunsoft); border-radius: var(--radius); padding: 16px; }
.parent-block .part { border-bottom-color: var(--blue); }
.parent-block .q .in, .parent-block .q .choices, .parent-block .q .err, .parent-block .q > .help { margin-left: 0; }
.consent .seen { margin: 12px 0 0; }
.prose.parent { max-width: 36em; }
.prose.parent h1 { font-size: 1.875rem; margin: 6px 0 14px; }
.prose.parent p { line-height: 1.55; }
.prose.parent .eyebrow { margin: 0; }
.prose.parent form.confirm { margin-top: 24px; }
.prose.parent .consent { margin-top: 8px; }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }

/* "Who you could meet": a scrolling row above the form on phones, a sticky column beside it on desktop. */
.young-split { display: grid; grid-template-columns: minmax(0, 1fr); }
.meetstrip { margin: 14px 0 10px; min-width: 0; }
.ms-h { font: 700 1.5rem/1.15 var(--font-display); margin: 0 0 2px; }
.ms-sub { margin: 0 0 12px; color: var(--soft); font-size: 1rem; line-height: 1.4; }
.ms-list { list-style: none; margin: 0; padding: 4px 2px 12px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.ms-list li { flex: 0 0 auto; scroll-snap-align: start; }
.ms-card { --t: var(--t-sun); --hl: var(--hl-sun); display: flex; align-items: center; gap: 10px; width: 15.5rem; max-width: 80vw; height: 100%; box-sizing: border-box; padding: 10px 12px; background: #fff; border: 2px solid var(--t); border-radius: 14px; text-decoration: none; color: var(--ink); box-shadow: 0 1px 2px rgba(35, 37, 43, .08), 0 4px 10px rgba(35, 37, 43, .06); }
.ms-list li:nth-child(4n+2) .ms-card { --t: var(--t-sky); --hl: var(--hl-sky); }
.ms-list li:nth-child(4n+3) .ms-card { --t: var(--t-mint); --hl: var(--hl-mint); }
.ms-list li:nth-child(4n+4) .ms-card { --t: var(--t-peach); --hl: var(--hl-peach); }
.ms-card:hover, .ms-card:focus-visible { border-color: var(--hl); }
.avatar.sm { width: 52px; height: 52px; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--hl, var(--sky)); background: var(--t, var(--skysoft)); }
.avatar.sm .ini { font: 800 1.125rem/1 var(--font-head); color: var(--blue); }
.ms-txt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.ms-name { font: 700 1.0625rem/1.2 var(--font-display); overflow-wrap: anywhere; }
.ms-role { font-size: .9375rem; line-height: 1.3; color: var(--soft); font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ms-yrs { font: 800 .8125rem/1.3 var(--font-body); color: var(--blue); }
.ms-more { margin: 0; font-weight: 700; }
.ms-more a { color: var(--blue); }
@media (min-width: 60rem) {
  .young-split { grid-template-columns: minmax(0, 1fr) 19rem; column-gap: 48px; align-items: start; grid-template-areas: "hero aside" "form aside"; }
  .young-split > .hero { grid-area: hero; }
  .young-split > .young-form { grid-area: form; }
  .young-split > .meetstrip { grid-area: aside; position: sticky; top: 16px; align-self: start; margin: 24px 0 0; max-height: calc(100vh - 32px); overflow-y: auto; }
  .ms-list { flex-direction: column; overflow: visible; padding: 4px 0 10px; gap: 12px; }
  .ms-card { width: auto; max-width: none; }
  .ms-list li:nth-child(odd) .ms-card { transform: rotate(-.6deg); }
  .ms-list li:nth-child(even) .ms-card { transform: rotate(.6deg); }
}