/* ==========================================================================
   Centerly — Public volunteer signup. An island under `.centerly-volunteer`,
   PublicBrand `--c-*` tokens with the People fallback palette (gate-verified),
   mobile-first. Same contract as booking-public.css / spaces-public.css.
   ========================================================================== */

.centerly-volunteer, .centerly-volunteer *, .centerly-volunteer *::before, .centerly-volunteer *::after { box-sizing: border-box; }

.c-vol {
	max-width: 42rem; margin-inline: auto;
	padding: clamp(1.25rem, 4vw, 2.5rem) clamp(1rem, 4vw, 1.5rem);
	color: var(--c-ink, #1A1C22); background: var(--c-bg, #FFFFFF); line-height: 1.6;
}
.c-vol :where(a, button, input, textarea):focus-visible { outline: 2px solid var(--c-primary, #4338CA); outline-offset: 2px; border-radius: 6px; }

.c-vol__title { font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 0 0 0.5rem; color: var(--c-ink, #1A1C22); }
.c-vol__note { color: var(--c-ink-secondary, #3B404A); margin: 0 0 1rem; }
.c-vol__error { color: var(--c-critical, #B23A2C); margin: 0.5rem 0; }
.c-vol__loading, .c-vol__empty { color: var(--c-ink-muted, #565C68); }
.c-vol__back { border: 0; background: none; color: var(--c-primary, #4338CA); font: inherit; font-weight: 600; cursor: pointer; padding: 0; margin: 0.75rem 0; display: block; }

.c-vol__signin {
	margin: 0 0 1rem; padding: 0.6rem 0.85rem; background: var(--c-surface-2, #F1F2F5);
	border: 1px solid var(--c-border, #E2E4E9); border-radius: 10px; font-size: 0.9375rem; color: var(--c-ink-secondary, #3B404A);
}
.c-vol__signinlink { color: var(--c-primary, #4338CA); font-weight: 600; text-decoration: underline; }

/* Opportunity card */
.c-vol__opp { border: 1px solid var(--c-border, #E2E4E9); border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1rem; background: var(--c-surface, #FFFFFF); }
.c-vol__oppname { font-size: 1.1875rem; margin: 0 0 0.35rem; color: var(--c-ink, #1A1C22); }
.c-vol__oppdesc { color: var(--c-ink-secondary, #3B404A); margin: 0 0 0.5rem; }
.c-vol__flag { color: var(--c-ink-secondary, #3B404A); font-size: 0.875rem; font-weight: 600; margin: 0 0 0.5rem; }

.c-vol__occ { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.6rem 0; border-top: 1px solid var(--c-border, #E2E4E9); }
.c-vol__when { font-weight: 700; color: var(--c-ink, #1A1C22); }
.c-vol__slots { font-size: 0.875rem; color: var(--c-ink-muted, #565C68); margin-right: auto; }
.c-vol__claim {
	font: inherit; font-weight: 600; cursor: pointer; border: 1px solid var(--c-primary, #4338CA);
	color: var(--c-on-primary, #FFFFFF); background: var(--c-primary, #4338CA); border-radius: 10px; padding: 0.4rem 0.9rem;
}

/* Forms */
.c-vol__form { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.5rem; }
.c-vol__field { display: flex; flex-direction: column; gap: 0.35rem; }
.c-vol__label { font-weight: 600; font-size: 0.9375rem; color: var(--c-ink, #1A1C22); }
.c-vol__input {
	width: 100%; font: inherit; color: var(--c-ink, #1A1C22); background: var(--c-surface, #FFFFFF);
	border: 1px solid var(--c-border-strong, #C9CCD6); border-radius: 10px; padding: 0.7rem 0.8rem;
}
.c-vol__submit {
	font: inherit; font-weight: 600; cursor: pointer; border: 1px solid var(--c-primary, #4338CA);
	color: var(--c-on-primary, #FFFFFF); background: var(--c-primary, #4338CA); border-radius: 12px; padding: 0.85rem 1.4rem; align-self: flex-start;
}
.c-vol__submit:disabled { opacity: 0.6; cursor: default; }
.c-vol__cancelbtn {
	font: inherit; font-weight: 600; cursor: pointer; margin-top: 1rem; color: var(--c-primary, #4338CA);
	background: transparent; border: 1px solid var(--c-border-strong, #C9CCD6); border-radius: 12px; padding: 0.7rem 1.2rem;
}

/* Interest block */
.c-vol__interest { margin-top: 1.5rem; padding-top: 1rem; border-top: 2px solid var(--c-border, #E2E4E9); }