/*
 * Poppins Portal — base styles
 *
 * Mobile-first. Everything below assumes a phone; the only media query
 * widens things once there's room. Deliberately plain for now — visual
 * design comes once the screens exist and there's something to design.
 *
 * Tap targets are 44px minimum and inputs are 16px, because anything
 * smaller makes iOS zoom on focus and yank the layout around.
 */

:root {
	--pp-text: #1c1c1a;
	--pp-muted: #6b6b66;
	--pp-line: #e2e0da;
	--pp-bg: #faf9f6;
	--pp-surface: #ffffff;
	--pp-accent: #8f4f29;
	--pp-accent-dark: #6d3b1e;
	--pp-radius: 10px;
	--pp-gap: 16px;
}

* { box-sizing: border-box; }

/*
 * Any explicit `display` beats the browser's built-in `[hidden]` rule,
 * so a flex or inline-flex element stays visible however many times the
 * JavaScript sets `hidden = true`. It looks hidden in the markup and
 * isn't, which is a miserable thing to debug.
 *
 * Caught with the bulk action bar showing "0 selected"; the repeater's
 * add button had the same latent problem. One rule prevents the whole
 * class of it.
 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body.pp {
	margin: 0;
	background: var(--pp-bg);
	color: var(--pp-text);
	font: 400 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.pp-wrap {
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	padding: 0 var(--pp-gap);
}

.pp-header {
	background: var(--pp-surface);
	border-bottom: 1px solid var(--pp-line);
}

.pp-header-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 60px;
	flex-wrap: wrap;
}

.pp-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 500;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

.pp-brand:hover { color: var(--pp-accent); }

/* The mark was previously unstyled here (admin and field both style their
   own copy of this element; the plain family/apply/login header never
   had one) — every page that shares this header now gets one, swapped
   per program by the theme block near the end of this file. */
.pp-brand-mark {
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	border-radius: 8px;
	background: url('graphics/poppins-logo.png') center / contain no-repeat;
}

/* A large program badge for the audition form's hero — hidden by
   default, shown and given its artwork only by the program's own theme
   block below. Markup can include this unconditionally on any page; it
   simply does nothing until a theme claims it. (The family portal home
   has its own, differently-specced hero — see the NASMB theme block.) */
.pp-hero-badge { display: none; }

[data-program="marching-band"] .pp-hero-badge {
	display: block;
	width: 104px;
	height: 104px;
	margin: 4px auto 18px;
	background: url('graphics/program-marching-band.svg') center / contain no-repeat;
}

/* Navigation is on every page so nobody has to remember a URL. */
.pp-nav {
	display: flex;
	gap: 4px;
	flex: 1;
	flex-wrap: wrap;
}

.pp-nav-link {
	color: var(--pp-muted);
	text-decoration: none;
	font-size: 15px;
	padding: 8px 10px;
	border-radius: var(--pp-radius);
	min-height: 40px;
	display: inline-flex;
	align-items: center;
}

.pp-nav-link:hover { color: var(--pp-text); background: var(--pp-bg); }
.pp-nav-link.is-current { color: var(--pp-accent-dark); background: #efe7e1; }

.pp-skip {
	position: absolute;
	left: -9999px;
	background: var(--pp-surface);
	padding: 12px 16px;
	border-radius: var(--pp-radius);
	z-index: 100;
}

.pp-skip:focus { left: 12px; top: 12px; }

/* Off-screen, not display:none — a bot checking computed layout still
   "sees" the field enough to fill it, which is the point. See the
   honeypot note in apply/form.php. */
.pp-hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pp-narrow { max-width: 460px; margin: 0 auto; }

.pp-hero { padding: 8px 0 24px; }
.pp-hero h1 { font-size: 28px; margin-bottom: 8px; }

/* Big obvious targets on the landing page — the point is that the next
   step is never in doubt. */
.pp-tile {
	display: block;
	background: var(--pp-surface);
	border: 1px solid var(--pp-line);
	border-radius: 12px;
	padding: 18px 20px;
	margin-bottom: 12px;
	text-decoration: none;
	color: inherit;
}

.pp-tile:hover { border-color: var(--pp-accent); }

.pp-tile-title { display: block; font-size: 18px; font-weight: 500; }
.pp-tile-sub { display: block; font-size: 14px; color: var(--pp-muted); margin-top: 2px; }
.pp-tile-action { display: block; margin-top: 10px; color: var(--pp-accent); font-weight: 500; }

.pp-header-right {
	display: flex;
	align-items: center;
	gap: 16px;
}

.pp-programswitch { margin: 0; }

/* Sized to the content rather than the full-width default that form
   controls get elsewhere, so it sits inline in the header. */
.pp-programswitch select {
	width: auto;
	min-height: 38px;
	padding: 6px 30px 6px 10px;
	font-size: 14px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.pp-signout {
	color: var(--pp-muted);
	text-decoration: none;
	font-size: 15px;
	padding: 10px 0;
}

.pp-signout:hover { color: var(--pp-text); }

.pp-main { padding-top: 24px; padding-bottom: 48px; }

h1 { font-size: 22px; font-weight: 500; margin: 0 0 16px; }
h2 { font-size: 18px; font-weight: 500; margin: 28px 0 12px; }

.pp-card {
	background: var(--pp-surface);
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	padding: 16px;
	margin-bottom: var(--pp-gap);
}

.pp-muted { color: var(--pp-muted); font-size: 14px; }

code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9em;
	background: var(--pp-bg);
	padding: 2px 5px;
	border-radius: 4px;
}

input, select, textarea {
	width: 100%;
	font: inherit;
	font-size: 16px;
	padding: 11px 12px;
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	background: var(--pp-surface);
	color: inherit;
	min-height: 44px;
}

input:focus, select:focus, textarea:focus {
	outline: 2px solid var(--pp-accent);
	outline-offset: 1px;
	border-color: var(--pp-accent);
}

.pp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 20px;
	border: 0;
	border-radius: var(--pp-radius);
	background: var(--pp-accent);
	color: #fff;
	font: inherit;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
}

.pp-btn:hover { background: var(--pp-accent-dark); }

.pp-btn-secondary {
	background: var(--pp-surface);
	color: var(--pp-text);
	border: 1px solid var(--pp-line);
}

.pp-footer {
	border-top: 1px solid var(--pp-line);
	padding: 20px 0;
	color: var(--pp-muted);
	font-size: 14px;
}

.pp-footer p { margin: 0; }

.pp-lede { color: var(--pp-muted); margin: 0 0 20px; }

.pp-label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	margin: 16px 0 6px;
}

.pp-hint { color: var(--pp-muted); font-size: 13px; margin: 6px 0 0; }

.pp-btn-block { width: 100%; margin-top: 20px; }

.pp-notice {
	border-radius: var(--pp-radius);
	padding: 12px 14px;
	margin-bottom: var(--pp-gap);
	font-size: 15px;
	border: 1px solid transparent;
}

.pp-notice-success { background: #e8f3ea; border-color: #c3e0ca; color: #1f5130; }
.pp-notice-error   { background: #fbeaea; border-color: #f0c9c9; color: #7a2020; }

/* Student cards. The photo is what makes two siblings instantly
   distinguishable on a small screen, so it leads. Initials stand in
   until a photo is uploaded. */

.pp-student {
	background: var(--pp-surface);
	border: 1px solid var(--pp-line);
	border-radius: 12px;
	padding: 14px;
	margin-bottom: 12px;
}

.pp-student-head { display: flex; align-items: center; gap: 12px; }

.pp-avatar {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #efe7e1;
	color: var(--pp-accent-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;
	font-size: 17px;
	overflow: hidden;
}

.pp-avatar img { width: 100%; height: 100%; object-fit: cover; }

.pp-student-id { min-width: 0; }
.pp-student-name { margin: 0; font-weight: 500; }
.pp-student-meta { margin: 2px 0 0; font-size: 14px; color: var(--pp-muted); }

.pp-status {
	margin-top: 12px;
	border-radius: var(--pp-radius);
	padding: 8px 12px;
	font-size: 14px;
}

.pp-status-pending  { background: #fbf1de; color: #6d4a12; }
.pp-status-waiting  { background: #fbf1de; color: #6d4a12; }
.pp-status-done     { background: #e8f3ea; color: #1f5130; }

/* The empty slot is deliberately always visible, not hidden in a menu —
   a family with a second child should never wonder whether it's
   supported. */
.pp-slot {
	display: block;
	border: 1px dashed #cfccc4;
	border-radius: 12px;
	padding: 18px 14px;
	text-align: center;
	margin-bottom: var(--pp-gap);
	text-decoration: none;
	color: inherit;
}

.pp-slot:hover { border-color: var(--pp-accent); background: var(--pp-surface); }

.pp-slot-title { display: block; font-weight: 500; }
.pp-slot-sub { display: block; margin-top: 2px; font-size: 13px; color: var(--pp-muted); }

/* --- Wizard ------------------------------------------------------- */

.pp-progress {
	height: 6px;
	background: #eceae4;
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 8px;
}

.pp-progress-bar {
	height: 100%;
	background: var(--pp-accent);
	border-radius: 999px;
	transition: width .3s ease;
}

.pp-progress-text {
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--pp-muted);
}

.pp-field { margin-bottom: 4px; }

.pp-optional {
	font-weight: 400;
	color: var(--pp-muted);
	font-size: 13px;
	margin-left: 4px;
}

/* Marked with an asterisk and explained once at the top of the form.
   Colour alone would fail anyone who can't distinguish it, so the
   asterisk carries the meaning and the colour only reinforces it. */
.pp-required {
	color: var(--pp-accent);
	font-weight: 500;
	margin-left: 2px;
}

.pp-legend { margin: 0 0 16px; }

.pp-error {
	margin: 6px 0 0;
	font-size: 14px;
	color: #a32d2d;
}

.pp-field-error input,
.pp-field-error select,
.pp-field-error textarea {
	border-color: #d98080;
}

textarea { min-height: 84px; resize: vertical; }

/* Chips beat a free-text box for allergies and dietary needs: faster to
   tap on a phone, and it produces consistent values instead of forty
   spellings of "lactose intolerant". */

.pp-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.pp-chip-input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.pp-chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid var(--pp-line);
	border-radius: 999px;
	background: var(--pp-surface);
	cursor: pointer;
	font-size: 15px;
	white-space: nowrap;
	flex-shrink: 0;
}

.pp-chip-input:checked + .pp-chip {
	background: var(--pp-accent);
	border-color: var(--pp-accent);
	color: #fff;
}

.pp-chip-input:focus-visible + .pp-chip {
	outline: 2px solid var(--pp-accent);
	outline-offset: 2px;
}

.pp-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 44px;
	padding: 10px 0;
	cursor: pointer;
}

.pp-check input {
	width: 22px;
	height: 22px;
	min-height: 0;
	margin: 0;
	flex: 0 0 auto;
}

/* A drawn signature. White background because the pad draws in dark ink
   with transparency, which is invisible against a dark surface. */
.pp-siglink {
	display: block;
	margin: 8px 0 4px;
	max-width: 320px;
	padding: 6px 10px;
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	background: #fff;
}

.pp-siglink:hover { border-color: var(--pp-accent); }

.pp-siglink img {
	display: block;
	width: 100%;
	height: auto;
}

/* Radio groups. Each option is a full-width row with a 44px target, so
   the whole line is tappable rather than just the 22px control. */
.pp-radios {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pp-radio {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	cursor: pointer;
}

.pp-radio input {
	width: 22px;
	height: 22px;
	min-height: 0;
	margin: 1px 0 0;
	flex: 0 0 auto;
}

.pp-radio:has(input:checked) {
	border-color: var(--pp-accent);
	background: #f7f1ec;
}

.pp-repeat-item {
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	padding: 12px 14px 16px;
	margin: 0 0 12px;
}

.pp-repeat-item legend {
	font-size: 13px;
	font-weight: 500;
	color: var(--pp-muted);
	padding: 0 6px;
}

.pp-remove {
	background: none;
	border: 0;
	color: #a32d2d;
	font: inherit;
	font-size: 14px;
	padding: 8px 0;
	cursor: pointer;
	text-decoration: underline;
	min-height: 44px;
}

.pp-actions { margin-top: 24px; }

/* Skipping is deliberately visible, not hidden. Measurements need a tape
   measure and a second person; forcing the issue there loses people who
   would otherwise come back. */
.pp-skip {
	display: block;
	width: 100%;
	margin-top: 12px;
	background: none;
	border: 0;
	color: var(--pp-muted);
	font: inherit;
	font-size: 15px;
	text-decoration: underline;
	cursor: pointer;
	min-height: 44px;
}

.pp-skip:hover { color: var(--pp-text); }

.pp-stepnav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 8px;
}

.pp-photo-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 220px;
	border: 1px dashed #cfccc4;
	border-radius: var(--pp-radius);
	background: var(--pp-bg);
	text-align: center;
	padding: 16px;
	cursor: pointer;
}

.pp-photo-drop img {
	max-width: 100%;
	max-height: 320px;
	border-radius: var(--pp-radius);
}

.pp-photo-drop .pp-hint { margin: 0; }

.pp-checklist { list-style: none; margin: 0; padding: 0; }

.pp-checkitem {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 0;
	border-bottom: 1px solid var(--pp-line);
}

.pp-checkitem:last-child { border-bottom: 0; }

.pp-checkmark {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid var(--pp-line);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	color: #1f5130;
}

.pp-checkitem.is-done .pp-checkmark {
	background: #e8f3ea;
	border-color: #c3e0ca;
}

.pp-checkitem a { flex: 1; color: inherit; }

.pp-checkstate { font-size: 13px; color: var(--pp-muted); }

.pp-notice-warning { background: #fbf1de; border-color: #f0dcb4; color: #6d4a12; }

/* --- Signing ------------------------------------------------------ */

.pp-agreement {
	font-size: 15px;
	line-height: 1.65;
	max-height: 260px;
	overflow-y: auto;
	padding: 12px 14px;
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	background: var(--pp-bg);
}

.pp-agreement p { margin: 0 0 12px; }
.pp-agreement p:last-child { margin-bottom: 0; }

.pp-sigwrap {
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	background: var(--pp-surface);
	overflow: hidden;
}

/* touch-action stops the page sliding around under a finger mid-stroke,
   which otherwise makes signing on a phone nearly impossible. */
.pp-sigpad {
	display: block;
	width: 100%;
	height: 200px;
	touch-action: none;
	cursor: crosshair;
}

.pp-sigactions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 8px 0 4px;
}

.pp-sigactions button {
	background: none;
	border: 0;
	padding: 8px 0;
	cursor: pointer;
	min-height: 44px;
}

.pp-status-sub {
	display: block;
	font-size: 13px;
	opacity: .85;
	margin-top: 2px;
}

.pp-resend {
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	padding: 0 14px;
	margin-top: 10px;
	background: var(--pp-surface);
}

.pp-resend summary {
	cursor: pointer;
	padding: 12px 0;
	font-size: 15px;
	color: var(--pp-muted);
	min-height: 44px;
	display: flex;
	align-items: center;
}

.pp-resend[open] summary { color: var(--pp-text); }
.pp-resend form { padding-bottom: 16px; }

.pp-requirement {
	margin: 0 0 12px;
	padding: 12px 14px;
	background: var(--pp-bg);
	border-radius: var(--pp-radius);
	font-size: 15px;
	line-height: 1.6;
}

.pp-requirement:last-child { margin-bottom: 0; }

.pp-quiet {
	color: var(--pp-muted);
	font-size: 14px;
	text-decoration: underline;
}

.pp-quiet:hover { color: var(--pp-text); }

.pp-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.pp-table th, .pp-table td {
	text-align: left;
	padding: 10px 8px;
	border-bottom: 1px solid var(--pp-line);
	vertical-align: top;
}
.pp-table th { font-weight: 500; color: var(--pp-muted); font-size: 13px; }

.pp-copy {
	width: 100%;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13px;
}

/* --- Admin -------------------------------------------------------- */

.pp-admin-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.pp-admin-head h1 { margin: 0; }

.pp-adminnav { display: flex; gap: 16px; flex-wrap: wrap; }
.pp-adminnav a { color: var(--pp-muted); text-decoration: none; font-size: 15px; }
.pp-adminnav a:hover { color: var(--pp-accent); }

.pp-attention { list-style: none; margin: 0 0 24px; padding: 0; }

.pp-attention-item {
	background: var(--pp-surface);
	border: 1px solid var(--pp-line);
	border-left: 3px solid var(--pp-line);
	border-radius: var(--pp-radius);
	margin-bottom: 8px;
}

.pp-attention-item a,
.pp-attention-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	text-decoration: none;
	color: inherit;
}

.pp-attention-item a { padding: 0; }

.pp-tone-warning { border-left-color: #d99b2b; }
.pp-tone-accent  { border-left-color: var(--pp-accent); }

.pp-attention-count {
	font-size: 22px;
	font-weight: 500;
	min-width: 32px;
}

.pp-attention-label { font-size: 15px; }

.pp-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px;
	margin-bottom: 24px;
}

.pp-stat {
	background: var(--pp-surface);
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	padding: 14px 16px;
	text-decoration: none;
	color: inherit;
	display: block;
}

.pp-stat:hover { border-color: var(--pp-accent); }

.pp-stat-value { display: block; font-size: 24px; font-weight: 500; }
.pp-stat-label { display: block; font-size: 13px; color: var(--pp-muted); margin-top: 2px; }

.pp-stats-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.pp-badge {
	display: inline-block;
	font-size: 13px;
	padding: 3px 9px;
	border-radius: 999px;
	white-space: nowrap;
}

.pp-badge-muted   { background: #efeee9; color: #5f5e5a; }
.pp-badge-warning { background: #fbf1de; color: #6d4a12; }
.pp-badge-accent  { background: #efe7e1; color: var(--pp-accent-dark); }
.pp-badge-done    { background: #e8f3ea; color: #1f5130; }

.pp-sub {
	display: block;
	font-size: 13px;
	color: var(--pp-muted);
	font-weight: 400;
}

.pp-overdue { color: #a32d2d; font-weight: 500; }

.pp-searchbar { display: flex; gap: 8px; margin-bottom: 12px; }
.pp-searchbar input { flex: 1; }
.pp-searchbar button { width: auto; white-space: nowrap; }

/* Filters wrap rather than scroll — on a laptop they sit on one line,
   on a narrow window they stack, and nothing is ever hidden off-screen. */
.pp-filterbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.pp-filterbar input[type="search"] { flex: 1 1 220px; min-width: 180px; }
.pp-filterbar select { flex: 0 1 auto; width: auto; min-width: 130px; }
.pp-filterbar button { width: auto; white-space: nowrap; }

.pp-listhead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.pp-listhead p { margin: 0; }

.pp-sortlink {
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

.pp-sortlink:hover { color: var(--pp-accent); }

.pp-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 20px 0;
}

.pp-pager .pp-btn { width: auto; }

.pp-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 16px;
}

.pp-filter {
	font-size: 14px;
	padding: 8px 14px;
	border: 1px solid var(--pp-line);
	border-radius: 999px;
	background: var(--pp-surface);
	color: var(--pp-muted);
	text-decoration: none;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
}

.pp-filter.is-active {
	background: var(--pp-accent);
	border-color: var(--pp-accent);
	color: #fff;
}

.pp-table-list th { white-space: nowrap; }

.pp-detail-head { display: flex; align-items: center; gap: 16px; }
.pp-detail-event { margin: 0 0 6px; color: var(--pp-muted); font-size: 14px; }
.pp-avatar-lg { width: 76px; height: 76px; font-size: 22px; }

.pp-columns { display: grid; gap: 0 20px; }

.pp-activity { list-style: none; margin: 0; padding: 0; }
.pp-activity li { padding: 8px 0; border-bottom: 1px solid var(--pp-line); }
.pp-activity li:last-child { border-bottom: 0; }
.pp-activity-action { font-size: 15px; }

.pp-withdraw { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--pp-line); }

.pp-pulse-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pp-pulse-row form { margin: 0; }
.pp-pulse-row button { width: auto; }
.pp-pulse-name { margin: 0; font-weight: 500; }
.pp-pulse-full { margin-top: 24px; }

h3 { font-size: 15px; font-weight: 500; margin: 20px 0 8px; color: var(--pp-muted); }

/* --- Auditions ---------------------------------------------------- */

.pp-checkcol { width: 34px; }
.pp-checkcol input { width: 20px; height: 20px; min-height: 0; margin: 0; }

/* Sticky so it stays reachable while scrolling a long list — the whole
   point is deciding in batches without hunting for the buttons. */
.pp-bulkbar {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	background: var(--pp-surface);
	border: 1px solid var(--pp-accent);
	border-radius: var(--pp-radius);
	padding: 10px 14px;
	margin-bottom: 10px;
}

.pp-bulk-count { font-weight: 500; white-space: nowrap; }
.pp-bulkbar input[type="text"] { flex: 1 1 180px; min-width: 140px; }
.pp-bulkbar .pp-btn { width: auto; min-height: 40px; padding: 8px 16px; }

.pp-btn-deny { color: #a32d2d; border-color: #e2c4c4; }
.pp-btn-deny:hover { background: #fbeaea; }

.pp-review { display: grid; gap: 0 20px; }

.pp-video-frame {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	border-radius: var(--pp-radius);
	overflow: hidden;
	background: #1c1c1a;
}

.pp-video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.pp-video h2 { margin-top: 0; }

.pp-decision { border: 1px solid var(--pp-accent); }
.pp-decision-buttons { display: grid; gap: 8px; margin-top: 16px; }

/* --- Funnel ------------------------------------------------------- */

.pp-funnel { list-style: none; margin: 0; padding: 0; }
.pp-funnel li { margin-bottom: 16px; }

.pp-funnel-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 4px;
}

.pp-funnel-label { font-size: 15px; }
.pp-funnel-count { font-size: 18px; font-weight: 500; }

.pp-funnel-track {
	height: 10px;
	background: #eceae4;
	border-radius: 999px;
	overflow: hidden;
}

.pp-funnel-bar { height: 100%; background: var(--pp-accent); border-radius: 999px; }
.pp-funnel-bar.is-leak { background: #d99b2b; }

.pp-sparkline {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 120px;
	padding-top: 8px;
}

.pp-spark { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.pp-spark-bar { background: var(--pp-accent); border-radius: 3px 3px 0 0; min-height: 3px; }
.pp-spark-value { font-size: 11px; color: var(--pp-muted); text-align: center; margin-top: 4px; }

@media (min-width: 720px) {
	.pp-main { padding-top: 32px; }
	h1 { font-size: 26px; }
	.pp-wrap { max-width: 900px; }
	[data-program="marching-band"] .pp-family-hero { margin-top: -32px; }
}

/* The admin needs more room than the family portal. */
@media (min-width: 1000px) {
	body.pp-admin .pp-wrap { max-width: 1180px; }
	body.pp-admin .pp-columns { grid-template-columns: 1fr 1fr; }

	/* Videos get the room; the decision panel stays in view beside them
	   so reviewing never means scrolling back and forth. */
	body.pp-admin .pp-review { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); }
	body.pp-admin .pp-review-side { position: sticky; top: 12px; align-self: start; }
}

.pp-exports { display: inline-flex; gap: 16px; }

/* Step guidance — the how-to shown above a step that needs explaining. */
.pp-guidance { background: #fdfbf8; }

.pp-video-embed {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	margin: 12px 0;
	background: #000;
}

.pp-video-embed iframe,
.pp-video-play {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.pp-video-play {
	padding: 0;
	cursor: pointer;
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pp-video-play img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.75;
}

.pp-video-label {
	position: relative;
	background: rgba(0, 0, 0, 0.72);
	color: #fff;
	padding: 10px 18px;
	border-radius: 999px;
	font-weight: 500;
	font-size: 15px;
}

/* Collapsible sections. Used for the parts of a record you rarely need —
   history, logins, files — so the screen leads with what you came for.
   <details> because it works with no JavaScript and is keyboard and
   screen-reader accessible for free. */
.pp-fold summary {
	display: flex;
	align-items: baseline;
	gap: 10px;
	cursor: pointer;
	list-style: none;
	padding: 2px 0;
	min-height: 32px;
}

.pp-fold summary::-webkit-details-marker { display: none; }

.pp-fold summary::before {
	content: "\25B8";
	color: var(--pp-muted);
	font-size: 12px;
	transition: transform 0.12s ease;
}

.pp-fold[open] summary::before { transform: rotate(90deg); }

.pp-fold-title { font-size: 18px; font-weight: 500; }
.pp-fold-sub { color: var(--pp-muted); font-size: 13px; }
.pp-fold-body { padding-top: 12px; }

/* Inline "ask for another" controls on the admin detail — kept quiet
   until opened, since rejecting a signature or photo is the exception. */
.pp-inline-reject { margin-top: 10px; }
.pp-inline-reject summary { cursor: pointer; font-size: 14px; }
.pp-inline-reject form { margin-top: 10px; }
.pp-inline-reject .pp-btn { margin-top: 10px; }

/* Form editor. One card per step, one fieldset per field. */
.pp-fieldedit {
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	padding: 12px 14px 14px;
	margin: 0 0 12px;
}

.pp-fieldedit.is-hidden { opacity: 0.6; background: #faf7f4; }

.pp-fieldedit legend {
	font-size: 13px;
	color: var(--pp-muted);
	padding: 0 6px;
}

.pp-fieldedit legend code { font-size: 12px; }

.pp-lock {
	display: inline-block;
	margin-left: 6px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--pp-accent-dark);
	background: #efe7e1;
	padding: 1px 6px;
	border-radius: 999px;
}

.pp-fieldedit-toggles {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.pp-fieldedit-toggles .pp-check { margin: 0; }

/* Save bar that stays reachable on a long form. */
.pp-sticky-save {
	position: sticky;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	background: var(--pp-surface);
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	padding: 12px 16px;
	margin-top: 16px;
}

.pp-sticky-save .pp-hint { margin: 0; }

/* Option editor inside the form editor. */
.pp-optionedit { margin: 4px 0 12px; }
.pp-optionedit summary { cursor: pointer; font-size: 14px; color: var(--pp-accent-dark); }
.pp-optionrows { margin: 10px 0; }
.pp-optionrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 6px;
}
.pp-optionrow input[type="text"] { flex: 1; min-height: 40px; }
.pp-optionlabel { flex: 1; padding: 8px 0; }
.pp-optionremove {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--pp-muted);
	white-space: nowrap;
}
.pp-optionremove input { width: 18px; height: 18px; min-height: 0; }

/* Form editor: jump nav + collapsible steps, so a long form is scannable. */
.pp-editbar {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 16px;
}
.pp-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	flex: 1;
	min-width: 240px;
}
.pp-jump a {
	font-size: 13px;
	text-decoration: none;
	color: var(--pp-accent-dark);
	background: #efe7e1;
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
}
.pp-jump a:hover { background: var(--pp-accent); color: #fff; }

.pp-editstep > summary {
	display: flex;
	align-items: baseline;
	gap: 10px;
	cursor: pointer;
	list-style: none;
	margin: -4px 0 0;
}
.pp-editstep > summary::-webkit-details-marker { display: none; }
.pp-editstep > summary::before {
	content: "\25B8";
	color: var(--pp-muted);
	font-size: 12px;
}
.pp-editstep[open] > summary::before { content: "\25BE"; }
.pp-editstep-title { font-size: 18px; font-weight: 500; }
.pp-editstep-count { font-size: 13px; color: var(--pp-muted); }
.pp-editstep[open] > summary { margin-bottom: 12px; }

/* Preview page. */
.pp-preview-step { max-width: 560px; }
.pp-preview-foot { max-width: 560px; margin-top: 8px; }

/* Form editor readability: placeholders show the default, so make them
   legible and clearly a placeholder (italic) rather than mistakable for
   a typed value. Tighter spacing so each field reads as one block. */
.pp-fieldedit .pp-label { margin-top: 12px; }
.pp-fieldedit input::placeholder,
.pp-fieldedit textarea::placeholder {
	color: #7a756e;
	font-style: italic;
	opacity: 1;
}
.pp-fieldedit .pp-hint { margin-top: 4px; }
.pp-fieldedit legend { margin-bottom: 4px; }

.pp-cardlink { margin: 12px 0 0; font-size: 14px; }
.pp-cardlink a { color: var(--pp-accent-dark); }

/* Two inputs side by side (event date ranges, enrollment window). */
.pp-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .pp-row2 { grid-template-columns: 1fr; } }

/* Trip / itinerary display (family portal and public event page). */
.pp-trip-meta { color: var(--pp-muted); font-size: 15px; margin: 0 0 4px; }
.pp-trip-itinerary { white-space: normal; line-height: 1.7; }
.pp-trip h3 { font-size: 16px; margin: 16px 0 6px; }

/* Field view: roster list, big tap targets, allergy flag. */
.pp-fieldswitch { margin: 0 0 12px; }
.pp-fieldswitch select { width: auto; min-height: 40px; }
.pp-rosterlist { display: flex; flex-direction: column; gap: 8px; }
.pp-rosteritem {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	background: var(--pp-surface);
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	text-decoration: none;
	color: inherit;
	min-height: 60px;
}
.pp-rosteritem:hover { border-color: var(--pp-accent); }
.pp-rostermain { flex: 1; min-width: 0; }
.pp-roster-name { display: block; font-weight: 500; }
.pp-roster-sub { display: block; font-size: 13px; color: var(--pp-muted); }
.pp-allergy-dot {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #7a2020;
	background: #fbeaea;
	border: 1px solid #f0c9c9;
	padding: 2px 8px;
	border-radius: 999px;
	white-space: nowrap;
}
.pp-avatar-lg { width: 72px; height: 72px; font-size: 24px; }

/* An allergy card leads with colour so it can't be skimmed past. */
.pp-alert { border-color: #f0c9c9; background: #fdf3f3; }
.pp-alert h2 { color: #7a2020; }

/* Section checkbox grid on the instructor form. */
.pp-checkgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-top: 6px; }
@media (max-width: 480px) { .pp-checkgrid { grid-template-columns: 1fr; } }

/* Two fields side by side — first/last name, grade/years playing. */
.pp-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.pp-row2 .pp-field { min-width: 0; }
@media (max-width: 480px) { .pp-row2 { grid-template-columns: 1fr; } }

/* =========================================================================
   Program theme — National All-Star Marching Band
   From design_handoff_nasmb_admin. Scoped to [data-program="marching-band"]
   throughout (see ProgramTheme::slug_for_program / templates/layout/
   header.php) — every other program, and any page with no program in
   context, keeps the plain shell above untouched. Buttons, focus rings,
   the required-field asterisk, the progress bar and selected chips
   already read var(--pp-accent)/var(--pp-accent-dark), so the token
   override re-themes them for free; everything else here is the new hero/
   banner/card UI the handoff introduced for the family portal specifically.
   ========================================================================= */
:root[data-program="marching-band"] {
	--pp-accent:      #0E548C;
	--pp-accent-dark: #2B3640;
	--pp-accent-2:    #2E6EA6;
	--pp-accent-soft: #EAF1FE;
	/* #7C93A8 is the admin muted token — 3.2:1, fails AA for body text.
	   Every hint and helper on a family screen uses this 5.0:1 value
	   instead (the handoff's --muted-family). */
	--pp-muted:       #5C7188;
	--pp-line:        #E3EAF0;
	--callout-fill:   #FDF3E2;
	--callout-border: #E0A33A;
	--callout-title:  #3A2600;
	--callout-body:   #6D4A12;

	--gradient-hero: linear-gradient(125deg, #2B3640, #0E548C 60%, #2E6EA6);
	/* Gradients on family screens are exactly two buttons — signing, and
	   the post-signing account offer — not every primary button. That was
	   a deliberate reduction from the first pass. */
	--gradient-family-cta: linear-gradient(135deg, #0A4677, #3B82B8);
}

[data-program="marching-band"] .pp-brand-mark {
	background-image: url('graphics/program-marching-band.svg');
}

[data-program="marching-band"] .pp-btn:not(.pp-btn-secondary) {
	background: var(--pp-accent);
}
[data-program="marching-band"] .pp-btn:not(.pp-btn-secondary):hover {
	background: #0a4677;
}
[data-program="marching-band"] .pp-btn-family-cta.pp-btn:not(.pp-btn-secondary) {
	background: var(--gradient-family-cta);
}
[data-program="marching-band"] .pp-btn-family-cta.pp-btn:not(.pp-btn-secondary):hover {
	background: linear-gradient(135deg, #073457, #2C6CA0);
}

/* ---- family portal home: hero, action banner, student cards ----------- */
[data-program="marching-band"] .pp-family-hero {
	background: var(--gradient-hero);
	color: #fff;
	padding: 22px 20px 26px;
	/* bleeds full-width by cancelling .pp-main's top padding and .pp-wrap's
	   side padding — both live on the same <main> element (see portal.css
	   .pp-main / .pp-wrap above) */
	margin: -24px calc(-1 * var(--pp-gap)) 18px;
	position: relative;
	overflow: hidden;
}
[data-program="marching-band"] .pp-family-hero-crest {
	position: absolute; right: -24px; top: -30px; height: 150px; opacity: .14;
	pointer-events: none;
}
[data-program="marching-band"] .pp-family-hero-title {
	font-size: 20px;
	font-weight: 600;
	margin: 0;
	position: relative;
}
[data-program="marching-band"] .pp-family-hero-sub {
	font-size: 14px;
	opacity: .85;
	margin: 6px 0 0;
	position: relative;
}

[data-program="marching-band"] .pp-family-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--callout-fill);
	border: 1.5px solid var(--callout-border);
	border-radius: 14px;
	padding: 14px 16px;
	text-decoration: none;
	color: var(--callout-body);
	margin-bottom: var(--pp-gap);
	min-height: 44px;
}
[data-program="marching-band"] .pp-family-banner-icon {
	width: 36px; height: 36px; flex: 0 0 auto;
	border-radius: 999px;
	background: #F6E3BF;
	display: flex; align-items: center; justify-content: center;
}
[data-program="marching-band"] .pp-family-banner-title { display: block; font-weight: 700; font-size: 14.5px; color: var(--callout-title); }
[data-program="marching-band"] .pp-family-banner-sub { display: block; font-size: 13px; opacity: .85; }

[data-program="marching-band"] .pp-family-eyebrow {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--pp-muted);
	margin: 0 0 10px;
}

[data-program="marching-band"] .pp-student { border-color: var(--pp-line); }
[data-program="marching-band"] .pp-avatar {
	width: 52px; height: 52px;
	background: var(--pill-bg, var(--pp-accent-soft));
	color: var(--pill-fg, var(--pp-accent));
	font-size: 17px;
}
[data-program="marching-band"] .pp-student-name { font-size: 15.5px; }
[data-program="marching-band"] .pp-student-meta { color: var(--pp-muted); }

[data-program="marching-band"] .pp-slot {
	border-color: #B9C7D4;
	color: var(--nasmb-3, #375773);
}
[data-program="marching-band"] .pp-slot-title::before { content: "+ "; }

/* ---- enrollment wizard -------------------------------------------------- */
[data-program="marching-band"] .pp-progress-bar { background: var(--pp-accent); }
[data-program="marching-band"] .pp-chip-input:checked + .pp-chip { background: var(--pp-accent); border-color: transparent; }

/* ---- public apply form: gradient hero, tinted requirements card -------- */
[data-program="marching-band"] .pp-apply-hero {
	background: var(--gradient-hero);
	color: #fff;
	padding: 22px 20px 24px;
	margin: -24px calc(-1 * var(--pp-gap)) 18px;
	position: relative;
	overflow: hidden;
}
[data-program="marching-band"] .pp-apply-hero::after {
	content: "";
	position: absolute; right: -26px; top: -34px;
	width: 160px; height: 160px;
	background: url('graphics/program-marching-band.svg') center / contain no-repeat;
	opacity: .13;
	pointer-events: none;
}
[data-program="marching-band"] .pp-apply-hero-eyebrow {
	font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; opacity: .75;
	position: relative;
}
[data-program="marching-band"] .pp-apply-hero h1 {
	position: relative;
	font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em;
	color: #fff; margin: 7px 0 0;
}
[data-program="marching-band"] .pp-apply-hero p {
	position: relative;
	font-size: 14px; opacity: .85; margin: 8px 0 0; line-height: 1.5;
}
/* ---- post-signing "done" page: checkmark hero, what-happens-next ------ */
[data-program="marching-band"] .pp-done-hero {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: 26px 20px 24px;
	margin: -24px calc(-1 * var(--pp-gap)) 18px;
	background: var(--pp-surface);
}
[data-program="marching-band"] .pp-done-hero::before {
	content: "";
	position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
	width: 300px; height: 300px;
	background: url('graphics/program-marching-band.svg') center / contain no-repeat;
	opacity: .1;
	pointer-events: none;
}
[data-program="marching-band"] .pp-done-check {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px;
	border-radius: 999px;
	background: #E7F5EE; color: #1F5130;
	margin-bottom: 12px;
}
[data-program="marching-band"] .pp-done-hero h1 {
	position: relative;
	font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--pp-text); margin: 0;
}
[data-program="marching-band"] .pp-done-hero p {
	position: relative;
	font-size: 14.5px; color: var(--pp-muted); margin: 6px 0 0; line-height: 1.5;
}
[data-program="marching-band"] .pp-done-next {
	background: rgba(247,250,253,.6);
	border: 1px solid rgba(227,234,240,.8);
	border-radius: 14px;
	padding: 15px;
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin-bottom: var(--pp-gap);
}
[data-program="marching-band"] .pp-done-next-label {
	font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pp-muted);
}
[data-program="marching-band"] .pp-done-next-item {
	display: flex; gap: 11px; align-items: flex-start;
	font-size: 14.5px; color: #2B3640; line-height: 1.5;
}
[data-program="marching-band"] .pp-done-dot {
	width: 7px; height: 7px; border-radius: 999px; margin-top: 6px; flex-shrink: 0;
	background: var(--pp-line);
}
[data-program="marching-band"] .pp-done-dot-fill { background: var(--pp-accent); }

[data-program="marching-band"] .pp-card-callout {
	background: var(--pp-accent-soft);
	border-color: #C3D8F2;
}
[data-program="marching-band"] .pp-card-callout h2 { color: #0B4677; }
[data-program="marching-band"] .pp-card-callout .pp-requirement {
	background: #fff;
	border: 1px solid #D3E4F5;
}