/* Davenham Parent Portal — registration form + dashboard + consent.
   Fully tokenised to design.md (var(--scout-*), theme/tokens.css). No hardcoded
   palette values. Buttons left to the theme (.button) per design system. */

.dpp-register,
.dpp-dashboard {
	margin: 0 0 24px;
}

/* Accessible-only label fallback. */
.dpp-register .screen-reader-text,
.dpp-dashboard .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Messages (design.md §2.8 state tints) ---- */
.dpp-message {
	border: 1px solid var(--scout-border, #CCCCCC);
	border-left: 4px solid var(--scout-purple, #590FA9);
	border-radius: var(--scout-radius-card, 10px);
	padding: 14px 18px;
	margin: 0 0 18px;
	background: var(--scout-bg, #F1F1F1);
}

.dpp-message--success {
	border-left-color: var(--scout-success, #008A1C);
	background: var(--scout-success-tint, rgba(0, 138, 28, 0.08));
}

.dpp-message--error {
	border-left-color: var(--scout-danger, #ED3F23);
	background: var(--scout-danger-tint, rgba(237, 63, 35, 0.08));
}

.dpp-message ul {
	margin: 6px 0 0 18px;
}

.dpp-note {
	color: var(--scout-text-2, #6E6E6E);
}

/* ---- Form ---- */
.dpp-form {
	max-width: 640px;
}

.dpp-field {
	margin: 0 0 14px;
}

.dpp-field label {
	display: block;
	font-weight: 700;
	margin-bottom: 4px;
}

.dpp-req {
	color: var(--scout-danger, #ED3F23);
}

.dpp-form input[type="text"],
.dpp-form input[type="email"],
.dpp-form input[type="tel"],
.dpp-form input[type="date"],
.dpp-form select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--scout-border, #CCCCCC);
	border-radius: var(--scout-radius-input, 5px);
	font-size: 15px;
	line-height: 1.3;
}

.dpp-form input:focus,
.dpp-form select:focus {
	outline: none;
	border-color: var(--scout-purple, #590FA9);
	box-shadow: var(--scout-focus, 0 0 0 3px rgba(89, 15, 169, 0.15));
}

/* ---- Children rows ---- */
.dpp-children {
	border: 1px solid var(--scout-border, #CCCCCC);
	border-radius: var(--scout-radius-card, 10px);
	padding: 14px 16px;
	margin: 0 0 16px;
}

.dpp-children legend {
	font-weight: 700;
	padding: 0 6px;
}

.dpp-child-row {
	display: grid;
	grid-template-columns: 1fr 150px 1fr auto;
	gap: 8px;
	align-items: center;
	margin: 0 0 8px;
}

.dpp-child-field {
	min-width: 0;
}

.dpp-child-remove {
	border: 1px solid var(--scout-border, #CCCCCC);
	background: var(--scout-white, #FFFFFF);
	border-radius: var(--scout-radius-input, 5px);
	width: 38px;
	height: 38px;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: var(--scout-danger, #ED3F23);
}

.dpp-child-remove:hover {
	border-color: var(--scout-danger, #ED3F23);
}

.dpp-add-child {
	background: none;
	border: 0;
	color: var(--scout-purple, #590FA9);
	font-weight: 700;
	cursor: pointer;
	padding: 4px 0;
}

@media (max-width: 560px) {
	.dpp-child-row {
		grid-template-columns: 1fr;
	}
	.dpp-child-remove {
		justify-self: end;
	}
}

/* Honeypot — visually and programmatically hidden from people. */
.dpp-hp {
	position: absolute !important;
	left: -9999px;
	top: -9999px;
	height: 0;
	overflow: hidden;
}

.dpp-submit {
	margin-top: 16px;
}

.dpp-privacy {
	color: var(--scout-text-2, #6E6E6E);
	font-size: 13px;
}

/* ---- Dashboard ---- */
.dpp-gate {
	border: 1px solid var(--scout-border, #CCCCCC);
	border-left: 4px solid var(--scout-purple, #590FA9);
	border-radius: var(--scout-radius-card, 10px);
	background: var(--scout-bg, #F1F1F1);
	padding: 22px 24px;
	max-width: 560px;
}

.dpp-dash-header h2 {
	margin: 0 0 16px;
}

.dpp-card {
	border: 1px solid var(--scout-card-border, #E5E7EB);
	border-radius: var(--scout-radius-card, 10px);
	padding: 18px 20px;
	margin: 0 0 16px;
	background: var(--scout-white, #FFFFFF);
	box-shadow: var(--scout-shadow-card, 0 4px 16px rgba(15, 23, 42, 0.06));
}

.dpp-card h3 {
	margin: 0 0 12px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--scout-purple, #590FA9);
}

.dpp-kids,
.dpp-events {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.dpp-kids li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--scout-border, #CCCCCC);
}

.dpp-kid-name {
	font-weight: 700;
}

.dpp-kid-section {
	color: var(--scout-purple, #590FA9);
	font-weight: 700;
	font-size: 13px;
}

.dpp-event {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 0;
	border-bottom: 1px solid var(--scout-border, #CCCCCC);
}

.dpp-event a {
	font-weight: 700;
}

.dpp-event-meta {
	color: var(--scout-text-2, #6E6E6E);
	font-size: 13px;
	font-weight: 600;
}

.dpp-muted {
	color: var(--scout-text-2, #6E6E6E);
	font-style: italic;
}

.dpp-logout {
	margin-top: 8px;
}

.dpp-logout a {
	color: var(--scout-text-2, #6E6E6E);
	font-size: 13px;
}

.dpp-event-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.dpp-event-consent {
	flex: 0 0 auto;
	font-weight: 700;
	font-size: 13px;
	color: var(--scout-purple, #590FA9);
	white-space: nowrap;
}

/* ---- Consent form ---- */
.dpp-consent {
	margin: 28px 0 0;
	padding: 20px 22px;
	border: 1px solid var(--scout-card-border, #E5E7EB);
	border-top: 3px solid var(--scout-purple, #590FA9);
	border-radius: var(--scout-radius-card, 10px);
	background: var(--scout-white, #FFFFFF);
}

.dpp-consent-title {
	margin: 0 0 12px;
}

.dpp-consent-done {
	color: var(--scout-text-2, #6E6E6E);
	font-size: 14px;
}

.dpp-consent-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--scout-border, #CCCCCC);
	border-radius: var(--scout-radius-input, 5px);
	font-size: 15px;
	line-height: 1.4;
}

.dpp-consent-form textarea:focus {
	outline: none;
	border-color: var(--scout-purple, #590FA9);
	box-shadow: var(--scout-focus, 0 0 0 3px rgba(89, 15, 169, 0.15));
}

.dpp-field-label {
	display: block;
	font-weight: 700;
	margin-bottom: 4px;
}

.dpp-inline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: 16px;
	font-weight: 400;
}

.dpp-consent-emergency {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

@media (max-width: 560px) {
	.dpp-consent-emergency {
		grid-template-columns: 1fr;
	}
}