/* School portal. Tokens come from the High Hopes design board (docs/designs).
   Branding overrides --brand-* at runtime from Settings > Branding. */

@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 500; font-display: swap; src: url(fonts/inter-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(fonts/inter-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 700; font-display: swap; src: url(fonts/inter-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter Tight"; font-weight: 600; font-display: swap; src: url(fonts/inter-tight-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter Tight"; font-weight: 700; font-display: swap; src: url(fonts/inter-tight-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter Tight"; font-weight: 800; font-display: swap; src: url(fonts/inter-tight-latin-800-normal.woff2) format("woff2"); }

:root {
	--brand: #1E3F78;          /* High Hopes Navy */
	--brand-deep: #152E59;     /* Deep Navy */
	--sun: #F5B700;            /* Sunshine */
	--spark: #F6E100;          /* Spark: small accents only */
	--cream: #FFF4D6;
	--mist: #F4F7FB;
	--paper: #FBF8F2;          /* portal background */
	--ink: #1B2A44;
	--ink-2: #3D4A61;
	--slate: #5B6475;
	--muted: #8A8F99;
	--line: #E2DCCF;
	--line-soft: #F1ECE2;
	--danger: #B42318;
	--danger-bg: #FFF1F0;
	--danger-ink: #7A1A12;
	--note-bg: #FAF4B8;
	--ok: #1F7A4D;
	--ok-bg: #E4F4EA;

	--r-btn: 12px;
	--r-card: 20px;
	--r-hero: 24px;
	--shadow: 0 1px 2px rgba(27, 42, 68, .05), 0 6px 18px rgba(27, 42, 68, .05);
	--tap: 44px;

	--display: "Inter Tight", Inter, system-ui, sans-serif;
	--text: Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body.school-portal {
	background: var(--paper);
	color: var(--ink);
	font: 400 17px/1.55 var(--text);
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
}
a { color: var(--brand); }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

/* Icons: Lucide SVGs as masks so they take currentColor. */
.i { width: 22px; height: 22px; flex: none; display: inline-block; background: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.i-sm { width: 18px; height: 18px; }
.i-lg { width: 32px; height: 32px; }

/* ---------- Shell ---------- */
.shell { min-height: 100vh; }
.main { padding: 0 0 96px; max-width: 760px; width: 100%; margin: 0 auto; min-width: 0; }
.main.wide { max-width: 1180px; }
.pad { padding: 0 20px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 12px; }
.grow { flex: 1; min-width: 0; }

.topbar { padding: 18px 20px 8px; display: flex; align-items: center; gap: 12px; }
.eyebrow { font: 500 14px var(--text); color: var(--slate); }
.h1 { margin: 0; font: 800 26px/1.15 var(--display); letter-spacing: -0.02em; color: var(--brand); }
.h2 { margin: 0; font: 800 20px/1.2 var(--display); letter-spacing: -0.01em; color: var(--brand); }
.h-page { margin: 0; font: 800 36px/1.1 var(--display); letter-spacing: -0.03em; color: var(--brand); }
.sub { font: 400 16px/1.5 var(--text); color: var(--slate); }
.dot { color: var(--sun); }

.icon-btn { width: var(--tap); height: var(--tap); border-radius: 50%; background: #fff; border: 0;
	display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(27, 42, 68, .08); color: var(--brand); cursor: pointer; text-decoration: none; }

/* Bottom tab bar (mobile) */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: #fff; border-top: 1px solid var(--line-soft);
	display: flex; justify-content: space-around; padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); }
.tabbar a { flex: 1; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
	color: var(--muted); font: 600 12px var(--text); text-decoration: none; border-radius: 12px; }
.tabbar a[aria-current="page"] { color: var(--brand); }
.tabbar a[aria-current="page"] .i { background: var(--brand); }

/* Side nav (tablet/desktop) */
.sidenav { display: none; }
@media (min-width: 900px) {
	.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); }
	.tabbar { display: none; }
	.sidenav { display: flex; flex-direction: column; gap: 4px; background: var(--brand); padding: 26px 16px; position: sticky; top: 0; height: 100vh; }
	.sidenav .logo { width: 156px; margin: 0 8px 24px; }
	.sidenav a { min-height: 46px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-radius: 12px;
		color: #C9D5EA; font: 600 15px var(--text); text-decoration: none; }
	.sidenav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
	.sidenav a[aria-current="page"] { background: #fff; color: var(--brand); }
	.sidenav .spacer { flex: 1; }
	.main { padding: 16px 20px 48px; }
}

/* ---------- Components ---------- */
.card { background: #fff; border-radius: var(--r-card); padding: 16px; box-shadow: var(--shadow); }
.hero { background: var(--brand); color: #fff; border-radius: var(--r-hero); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.hero .label { font: 700 13px var(--text); letter-spacing: .1em; color: var(--spark); }
.hero .big { font: 800 26px/1.15 var(--display); letter-spacing: -0.02em; }
.tile { background: rgba(255, 255, 255, .1); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.tile .k { font: 500 13px var(--text); color: #C9D5EA; }
.tile .v { font: 600 16px var(--text); color: #fff; }
.tile.sun { background: var(--sun); }
.tile.sun .k, .tile.sun .v { color: var(--brand); }
.stat { font: 800 24px var(--display); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font: 600 13px var(--text); background: var(--cream); color: var(--brand); }
.pill .swatch { width: 9px; height: 9px; border-radius: 50%; }

.chip { min-height: 52px; display: inline-flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border-radius: 999px;
	border: 1.5px solid var(--line); background: #fff; cursor: pointer; text-align: left; }
.chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip .n { font: 700 16px var(--text); display: block; }
.chip .c { font: 500 12px var(--text); color: var(--slate); display: block; }
.chip[aria-pressed="true"] .c { color: #C9D5EA; }

.avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
	background: var(--cream); color: var(--brand); font: 700 15px var(--text); }
.avatar.sm { width: 40px; height: 40px; }

.alert { border-radius: 16px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; font: 600 15px/1.4 var(--text); }
.alert.danger { background: var(--danger-bg); color: var(--danger-ink); }
.alert.danger .i { background: var(--danger); }
.alert.note { background: var(--note-bg); color: var(--brand); }
.alert.spark { background: var(--spark); color: var(--brand); }

.btn { min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px;
	border-radius: var(--r-btn); border: 0; background: var(--brand); color: #fff; font: 700 16px var(--text); cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--brand-deep); }
.btn.lg { min-height: 56px; font-size: 17px; }
.btn.block { width: 100%; }
.btn.outline { background: transparent; color: var(--brand); border: 1.5px solid var(--brand); }
.btn.sun { background: var(--sun); color: var(--brand); }
.link-btn { background: none; border: 0; padding: 0; min-height: 36px; color: var(--brand); font: 600 14px var(--text);
	text-decoration: underline; text-decoration-color: var(--sun); text-underline-offset: 4px; cursor: pointer; }

.field { display: flex; flex-direction: column; gap: 8px; font: 600 15px var(--text); color: var(--ink); }
.input { min-height: 54px; padding: 0 16px; border-radius: 12px; border: 1.5px solid #D9D2C4; background: #fff; font-size: 17px; width: 100%; }
.input:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(245, 183, 0, .35); }
.or { display: flex; align-items: center; gap: 12px; font: 500 14px var(--text); color: var(--muted); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.error { background: var(--danger-bg); color: var(--danger-ink); border-radius: 12px; padding: 12px 14px; font: 600 15px var(--text); }

/* Attendance row */
.kid { background: #fff; border-radius: 18px; padding: 10px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 2px rgba(27, 42, 68, .05); }
.kid .name { font: 700 16px var(--text); }
.kid .note { font: 500 12px var(--text); color: var(--slate); }
.kid .note.warn { color: var(--danger); }
.pal { display: flex; gap: 4px; }
.pal button { width: var(--tap); height: var(--tap); border-radius: 12px; border: 1.5px solid var(--line); background: #fff; color: var(--slate); font: 700 15px var(--text); cursor: pointer; }
.pal button[aria-pressed="true"][data-s="present"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.pal button[aria-pressed="true"][data-s="absent"] { background: var(--danger); border-color: var(--danger); color: #fff; }
.pal button[aria-pressed="true"][data-s="late"] { background: var(--sun); border-color: var(--sun); color: var(--brand); }
.checkout { min-height: var(--tap); border-radius: 12px; border: 1.5px dashed #C9D5EA; background: var(--mist); color: var(--brand); font: 600 14px var(--text); cursor: pointer; }
.checkout.done { border-style: solid; border-color: transparent; background: var(--ok-bg); color: var(--ok); cursor: default; }

/* Feature toggle cards */
.features { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 1100px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feature { background: #fff; border-radius: var(--r-card); padding: 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow); border: 1.5px solid transparent; }
.feature.off { opacity: .72; }
.feature.preview { border-color: var(--sun); }
.feature .ico { width: 44px; height: 44px; border-radius: 14px; background: var(--cream); display: flex; align-items: center; justify-content: center; color: var(--brand); flex: none; }
.feature .t { font: 700 16px var(--text); }
.feature .d { font: 400 13px/1.4 var(--text); color: var(--slate); }
.switch { width: 52px; height: 30px; border-radius: 999px; border: 0; background: #D4CEC2; position: relative; cursor: pointer; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: left .15s; }
.switch[aria-checked="true"] { background: var(--brand); }
.switch[aria-checked="true"]::after { left: 25px; }
.roles { display: flex; gap: 6px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.roles label { flex: 1; min-height: var(--tap); display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 10px;
	border: 1.5px solid var(--line); font: 600 12px var(--text); color: var(--slate); cursor: pointer; }
.roles input { accent-color: var(--brand); width: 16px; height: 16px; }
.roles label:has(input:checked) { border-color: var(--brand); color: var(--brand); background: var(--mist); }
.preview-note { display: flex; align-items: center; gap: 8px; background: var(--note-bg); border-radius: 10px; padding: 8px 10px; font: 600 13px var(--text); color: var(--brand); }
.not-in-plan { font: 600 13px var(--text); color: var(--muted); }

/* Tables that collapse to cards on mobile */
.table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); }
.table th { text-align: left; font: 600 13px var(--text); color: var(--slate); padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); font-size: 15px; vertical-align: top; }
@media (max-width: 899px) {
	.table, .table tbody, .table tr, .table td { display: block; width: 100%; }
	.table thead { display: none; }
	.table { background: none; box-shadow: none; }
	.table tr { background: #fff; border-radius: 18px; padding: 8px 4px; margin-bottom: 10px; box-shadow: var(--shadow); }
	.table td { border: 0; padding: 4px 12px; }
	.table td[data-label]::before { content: attr(data-label); display: block; font: 600 12px var(--text); color: var(--muted); }
}

/* Capacity bars */
.bar { height: 10px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--brand); border-radius: 999px; }

/* Gallery */
.months { display: flex; flex-direction: column; gap: 18px; }
.masonry { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 700px) { .masonry { grid-template-columns: repeat(3, 1fr); } }
.art { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.art img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.art .cap { padding: 10px 12px; font: 500 13px/1.4 var(--text); color: var(--ink-2); }

/* Empty state */
.empty { text-align: center; padding: 48px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.empty .bubble { width: 84px; height: 84px; border-radius: 50%; background: var(--cream); display: flex; align-items: center; justify-content: center; color: var(--brand); }

/* Login */
.login { min-height: 100vh; display: grid; }
.login .art-side { display: none; background: var(--brand); position: relative; }
.login .quote { position: absolute; left: 40px; right: 40px; bottom: 40px; background: var(--brand); border-radius: 22px; padding: 26px 28px;
	font: 800 30px/1.15 var(--display); letter-spacing: -0.02em; color: #fff; }
.login .art-side .bg { position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, #2A5096, var(--brand) 60%); }
.login .mobile-head { background: var(--brand); height: 200px; display: flex; align-items: center; justify-content: center; border-radius: 0 0 32px 32px; }
.login .mobile-head img { width: 200px; }
.login .form-side { padding: 28px 22px; display: flex; flex-direction: column; gap: 18px; max-width: 480px; width: 100%; margin: 0 auto; }
.login .form-side .logo { display: none; width: 190px; }
.login h1 { margin: 0; font: 800 34px/1.05 var(--display); letter-spacing: -0.03em; color: var(--brand); }
@media (min-width: 900px) {
	.login { grid-template-columns: 1fr 1fr; }
	.login .art-side { display: block; }
	.login .mobile-head { display: none; }
	.login .form-side { justify-content: center; padding: 64px 72px; }
	.login .form-side .logo { display: block; }
	.login h1 { font-size: 40px; }
}

.toast { position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 18px;
	border-radius: 12px; font: 600 15px var(--text); z-index: 20; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }
@media (min-width: 900px) { .toast { bottom: 28px; } }

/* =========================================================
   Admin screens: page header, forms, dialogs, lists, board
   ========================================================= */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 20px 14px; }
.page-head .stack { gap: 6px; }
@media (min-width: 900px) { .page-head { padding: 18px 0 18px; } .main.wide .pad { padding: 0; } }
.back { display: inline-flex; align-items: center; gap: 6px; font: 600 14px var(--text); color: var(--slate); text-decoration: none; }
.btn.sm { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.btn.ghost { background: transparent; color: var(--brand); }
.btn.ghost:hover { background: var(--mist); }
.btn.danger { background: transparent; color: var(--danger); border: 1.5px solid var(--danger-bg); }
.btn.danger:hover { background: var(--danger-bg); }
.btn[disabled] { opacity: .6; cursor: progress; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 10px; }

.form-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .form-grid.two { grid-template-columns: 1fr 1fr; } .form-grid.three { grid-template-columns: 1fr 1fr 1fr; } }
.form-grid .span { grid-column: 1 / -1; }
.field .hint { font: 400 13px var(--text); color: var(--slate); }
.input.sm { min-height: 44px; font-size: 16px; }
textarea.input { padding: 12px 16px; min-height: 88px; line-height: 1.5; }
select.input { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235B6475' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; padding-right: 42px; }
input[type="color"].input { padding: 6px; width: 72px; min-height: 48px; cursor: pointer; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; font: 600 14px var(--text); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--brand); }
.check:has(input:checked) { border-color: var(--brand); background: var(--mist); color: var(--brand); }

/* Native <dialog> as a sheet on mobile, centered modal on desktop */
dialog.sheet { border: 0; padding: 0; width: 100%; max-width: 640px; max-height: 92vh; border-radius: 24px 24px 0 0; margin: auto auto 0; background: var(--paper); color: var(--ink); box-shadow: 0 -10px 40px rgba(27,42,68,.2); }
dialog.sheet::backdrop { background: rgba(27, 42, 68, .45); }
@media (min-width: 700px) { dialog.sheet { border-radius: 24px; margin: auto; } }
dialog.sheet > form, dialog.sheet > .sheet-body { padding: 22px; display: flex; flex-direction: column; gap: 16px; overflow: auto; max-height: 92vh; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet-head .x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: var(--slate); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.sheet-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; position: sticky; bottom: -22px; background: var(--paper); padding: 12px 0 0; }

/* Lists */
.list { background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; }
.list > .item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); color: var(--ink); text-decoration: none; }
.list > .item:last-child { border-bottom: 0; }
a.item:hover, button.item:hover { background: var(--mist); }
button.item { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; }
.item .t { font: 700 16px var(--text); }
.item .s { font: 400 14px var(--text); color: var(--slate); }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 600 12px var(--text); background: var(--mist); color: var(--brand); white-space: nowrap; }
.tag .swatch { width: 8px; height: 8px; border-radius: 50%; }
.tag.warn { background: var(--danger-bg); color: var(--danger-ink); }
.tag.ok { background: var(--ok-bg); color: var(--ok); }
.tag.sun { background: var(--cream); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px 14px; font-size: 15px; }
.kv dt { color: var(--slate); font-weight: 500; }
.kv dd { margin: 0; }

/* Admissions board */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 14px; overflow-x: auto; padding: 0 20px 20px; scroll-snap-type: x mandatory; }
@media (min-width: 900px) { .board { padding: 0 0 20px; } }
.col { background: #F3EFE7; border-radius: 20px; padding: 12px; display: flex; flex-direction: column; gap: 10px; scroll-snap-align: start; min-height: 200px; }
.col-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px; font: 700 14px var(--text); color: var(--brand); }
.col-head .n { background: #fff; border-radius: 999px; padding: 2px 10px; font-size: 13px; }
.lead { background: #fff; border-radius: 16px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(27,42,68,.06); border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; display: flex; flex-direction: column; gap: 6px; }
.lead:hover { box-shadow: 0 6px 18px rgba(27,42,68,.1); }
.lead .t { font: 700 15px var(--text); }
.lead .s { font: 400 13px var(--text); color: var(--slate); }
.timeline { display: flex; flex-direction: column; gap: 10px; }
.timeline .note { background: #fff; border-radius: 14px; padding: 10px 12px; font-size: 14px; }
.timeline .note .by { font: 600 12px var(--text); color: var(--slate); }

/* Upload tile + swatches */
.upload-tile { display: flex; align-items: center; gap: 14px; background: #fff; border: 1.5px dashed #C9D5EA; border-radius: 16px; padding: 12px; }
.upload-tile img { width: 88px; height: 64px; object-fit: contain; border-radius: 10px; background: var(--mist); }
.upload-tile.dark img { background: var(--brand); }
.upload-tile .photo { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; }
.search { position: relative; }
.search .i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--slate); }
.search .input { padding-left: 46px; }

@media (max-width: 640px) { .hide-sm { display: none; } }

.logo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.upload-tile { min-width: 0; }
.upload-tile .field { min-width: 0; }
.upload-tile input[type="file"] { font-size: 13px; max-width: 100%; }
.save-bar { position: sticky; bottom: 84px; z-index: 5; display: flex; justify-content: flex-end; }
@media (min-width: 900px) { .save-bar { bottom: 24px; } }

.hh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =========================================================
   Messages
   ========================================================= */
.msg-layout { display: grid; grid-template-columns: 1fr; }
.msg-layout .msg-thread { display: none; }
.msg-layout.has-open .msg-list { display: none; }
.msg-layout.has-open .msg-thread { display: flex; }
@media (min-width: 900px) {
	.view-messages .main { max-width: 1180px; }
	.msg-layout { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 20px; height: calc(100vh - 64px); }
	.msg-layout .msg-list, .msg-layout.has-open .msg-list { display: flex; flex-direction: column; min-height: 0; }
	.msg-layout .msg-thread { display: flex; }
	.msg-list .threads { overflow: auto; flex: 1; }
	.back-btn { display: none !important; }
	.msg-list .search.pad { padding: 0; }
}
.threads { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; }
.thread-row { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; color: var(--ink); text-decoration: none; }
.thread-row:hover { background: #fff; }
.thread-row.active { background: #fff; box-shadow: var(--shadow); }
.thread-row.unread .t { font-weight: 800; }
.thread-row .t { font: 600 16px var(--text); }
.thread-row .s { font: 400 14px var(--text); color: var(--slate); }
.thread-row .tag-line { font: 500 12px var(--text); color: var(--muted); }
.avatar.bc { background: var(--brand); color: #fff; }
.dot-unread { width: 10px; height: 10px; border-radius: 50%; background: var(--sun); flex: none; }
.msg-thread { flex-direction: column; background: var(--paper); min-height: calc(100vh - 80px); }
@media (min-width: 900px) { .msg-thread { background: #fff; border-radius: 24px; box-shadow: var(--shadow); overflow: hidden; min-height: 0; } }
.thread-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff; border-bottom: 1px solid var(--line-soft); position: sticky; top: 0; z-index: 2; }
.thread-head strong { font: 700 17px var(--text); }
.thread-head .s { font: 500 13px var(--text); color: var(--slate); }
.bubbles { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: var(--paper); }
.bubble { max-width: 78%; padding: 12px 14px; font: 400 17px/1.45 var(--text); border-radius: 20px; white-space: normal; overflow-wrap: anywhere; }
.bubble.theirs { align-self: flex-start; background: #fff; border-bottom-left-radius: 6px; box-shadow: 0 1px 2px rgba(27,42,68,.06); }
.bubble.mine { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 6px; }
.bubble .who { display: block; font: 600 12px var(--text); color: var(--slate); margin-bottom: 2px; }
.read-at { align-self: flex-end; font: 500 12px var(--text); color: var(--slate); margin-top: -2px; }
.day-sep { align-self: center; font: 600 12px var(--text); color: var(--muted); margin: 8px 0 2px; }
.broadcast { background: var(--cream); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.broadcast .label { font: 700 12px var(--text); letter-spacing: .08em; color: var(--brand); }
.broadcast .body { font: 400 17px/1.45 var(--text); }
.broadcast .s { font: 500 12px var(--text); color: var(--slate); display: inline-flex; align-items: center; gap: 4px; }
.receipts { justify-content: space-between; border-top: 1px solid rgba(27,42,68,.1); padding-top: 8px; font-size: 14px; }
.composer { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line-soft); position: sticky; bottom: 72px; }
@media (min-width: 900px) { .composer { bottom: 0; } }
.composer textarea { flex: 1; min-height: 44px; max-height: 160px; resize: none; border-radius: 22px; border: 1.5px solid var(--line); padding: 11px 16px; font: 400 16px/1.4 var(--text); background: #fff; }
.composer textarea:focus { outline: none; border-color: var(--brand); }
.composer .send { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.composer-off { margin: 0; padding: 14px 16px; background: #fff; border-top: 1px solid var(--line-soft); font-size: 14px; color: var(--slate); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pick-one { margin: auto; }
button.tag { border: 0; cursor: pointer; min-height: 32px; }
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--sun); color: var(--brand); font: 700 12px var(--text); display: inline-flex; align-items: center; justify-content: center; }
.tabbar a { position: relative; }
.tabbar .nav-badge { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; }

/* Feed */
.post { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.post-photos { display: grid; gap: 4px; border-radius: 14px; overflow: hidden; }
.post-photos.n1 { grid-template-columns: 1fr; }
.post-photos.n2 { grid-template-columns: 1fr 1fr; }
.post-photos.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.post-photos.n3 a:first-child { grid-row: span 2; }
.post-photos a { position: relative; display: block; }
.post-photos img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; display: block; }
.post-photos.n3 a:first-child img { aspect-ratio: auto; }
.post-photos .more { position: absolute; inset: 0; background: rgba(27,42,68,.55); color: #fff; font: 800 24px var(--display); display: flex; align-items: center; justify-content: center; }
.post-body { margin: 0; font-size: 16px; line-height: 1.5; }
.heart { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 0; background: #F3EFE7; color: var(--brand); font: 700 14px var(--text); cursor: pointer; }
.heart.on { background: #FDEDC2; color: #B98500; }
.comments { border-top: 1px solid var(--line-soft); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.comments p { margin: 0; }
a.todo { text-decoration: none; color: var(--ink); }
a.todo .btn { pointer-events: none; }
.sep { border: 0; border-top: 1px solid var(--line); margin: 28px 20px; }
.tag-kids summary { cursor: pointer; font: 600 15px var(--text); color: var(--brand); }
.check.no-consent { opacity: .6; }

/* Calendar */
.event { display: flex; flex-direction: column; gap: 12px; }
.event.flag { box-shadow: inset 4px 0 0 var(--sun), var(--shadow); }
.card.focus { outline: 3px solid var(--sun); outline-offset: 2px; }
.date-block { width: 52px; flex: none; border-radius: 14px; background: var(--cream); color: var(--brand); text-align: center; padding: 6px 0; line-height: 1.1; }
.date-block span { display: block; font: 700 12px var(--text); letter-spacing: .08em; text-transform: uppercase; }
.date-block strong { display: block; font: 800 22px var(--display); }
.rsvp { flex-wrap: wrap; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.rsvp.link-btn { text-decoration: none; justify-content: flex-start; width: 100%; color: var(--ink-2); }
.chip.sm { min-height: var(--tap); padding: 6px 16px; font: 600 15px var(--text); }

/* Documents */
.doc .check { align-self: flex-start; }
.upload-doc { position: relative; align-self: flex-start; cursor: pointer; }
.list .item .bar { width: 100%; max-width: 280px; height: 6px; }

/* Video moments */
.moment-card { display: flex; gap: 14px; align-items: center; width: 100%; padding: 12px; border: 0; border-radius: var(--r-card);
	background: var(--brand); color: #fff; cursor: pointer; font: inherit; box-shadow: var(--shadow); }
.moment-card .label { font: 700 12px var(--text); letter-spacing: .1em; color: var(--spark); }
.moment-card strong { font: 800 19px/1.2 var(--display); }
.moment-card .sub { color: #C9D5EA; }
.poster { position: relative; flex: none; width: 96px; aspect-ratio: 3 / 4; border-radius: 14px; background: var(--brand-deep) center / cover no-repeat;
	display: flex; align-items: center; justify-content: center; }
.poster .play, .play-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--sun); color: var(--brand-deep); display: inline-flex; align-items: center; justify-content: center; }
.play-btn { border: 0; cursor: pointer; flex: none; }
.video-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.video-tile { flex: none; width: 140px; display: flex; flex-direction: column; gap: 4px; text-align: left; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: var(--ink); }
.video-tile .poster { width: 140px; }
.video-tile .sub { font-size: 13px; }
.upload-video { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px; border: 2px dashed var(--line); border-radius: var(--r-card);
	background: #fff; text-align: center; cursor: pointer; color: var(--brand); }
.upload-video input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-video:focus-within { outline: 3px solid var(--sun); }
.upload-video .sub { font-size: 13px; }
dialog.player video { width: 100%; max-height: 70vh; border-radius: 14px; background: #000; }
.video-tile.locked { cursor: default; }
.video-tile.locked .poster { background: var(--cream); }
.video-tile.locked .play { background: #fff; color: var(--brand); }

/* Billing */
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--line-soft); overflow-x: auto; }
.seg a { flex: 1; min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border-radius: 10px;
	font: 600 15px var(--text); color: var(--slate); text-decoration: none; white-space: nowrap; }
.seg a[aria-current="page"] { background: #fff; color: var(--brand); font-weight: 700; box-shadow: 0 1px 3px rgba(27, 42, 68, .1); }
.hero .btn.sun { color: var(--brand-deep); }
@media print {
	.sidenav, .tabbar, .no-print, .toast { display: none !important; }
	body, .main { background: #fff !important; }
	.statement, .card { box-shadow: none !important; }
	dialog.sheet[open] { position: static; box-shadow: none; }
}
.pm-row { padding-top: 12px; border-top: 1px solid var(--line-soft); }

/* View as (master admin) */
.viewas-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin: 0 0 12px;
	background: var(--brand-deep); color: #fff; font: 500 14px/1.4 var(--text); }
.viewas-bar .viewas-desc, .viewas-bar .viewas-mode { display: block; color: #C9D5EA; font-size: 13px; }
.viewas-bar .btn { flex: none; }
@media (min-width: 900px) { .viewas-bar { border-radius: 16px; } }
.viewas-notice { margin: 12px 16px; }
.viewas-notice .x { width: var(--tap); height: var(--tap); flex: none; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.viewas-pick { width: 100%; border: 0; cursor: pointer; text-align: left; font: inherit; color: var(--ink); min-height: var(--tap); }
.viewas-pick .grow { display: flex; flex-direction: column; gap: 2px; }
.viewas-pick .eyebrow { display: block; font-size: 13px; }

/* Capture plan */
.capture-card .t { font: 700 17px var(--text); color: var(--ink); }
.capture-count { font: 800 22px var(--display); color: var(--brand); white-space: nowrap; }
.capture-count span { font: 600 14px var(--text); color: var(--slate); }
.capture-prompt { font-size: 14px; margin: 0; }
.kid-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kid-chip { min-height: var(--tap); display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--brand);
	background: #fff; color: var(--brand); font: 600 15px var(--text); text-decoration: none; cursor: pointer; }
.kid-chip:hover { background: var(--mist); }
.kid-chip.done { border-color: transparent; background: var(--ok-bg); color: var(--ok); }
span.kid-chip.done { cursor: default; }
.capture-today { text-decoration: none; color: var(--ink); gap: 10px; }
.capture-today .row { font-size: 15px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Time capsule */
.capsule-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r-card); background: var(--cream); color: var(--brand); text-decoration: none; }
.capsule-card.open { background: var(--brand); color: #fff; box-shadow: var(--shadow); }
.capsule-card.open .sub { color: #C9D5EA; }
.capsule-card .sub { font-size: 14px; }
.capsule-icon { width: 48px; height: 48px; flex: none; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: var(--sun); color: var(--brand); }
.capsule-hero { display: flex; flex-direction: column; gap: 8px; }
.capsule .rounds { display: grid; grid-template-columns: repeat(min(var(--n), 2), minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .capsule .rounds { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); } }
.capsule-round { margin: 0; width: 100%; }
.capsule-round img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.capsule-missing { aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; background: var(--line-soft); color: var(--muted); }
.capsule .interview .q { font: 700 15px var(--text); color: var(--ink); }
.capsule .answer { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; border-radius: 14px; background: var(--mist); font: 500 15px/1.4 var(--text); }
@media print {
	.capsule .rounds { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
	.capsule-series { break-inside: avoid; }
}

/* Drills */
.roll-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 700px) { .roll-grid { grid-template-columns: 1fr 1fr; } }
.roll-kid { min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 16px; border: 2px solid var(--line);
	background: #fff; color: var(--ink); font: 600 16px var(--text); text-align: left; cursor: pointer; }
.roll-kid .i-sm { opacity: 0; }
.roll-kid[aria-pressed="true"] { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.roll-kid[aria-pressed="true"] .i-sm { opacity: 1; }
.drill-kinds { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 700px) { .drill-kinds { grid-template-columns: 1fr 1fr; } }
.drill-kinds .btn { min-height: 52px; }

/* Enrollment form (CF-FSP 5219) and records */
@media (min-width: 640px) { .form-grid.four { grid-template-columns: 1.2fr 1.4fr 1fr 1fr; } }
.enroll-block { border: 1.5px solid var(--line); border-radius: 16px; padding: 14px; margin: 0; }
.enroll-block legend { font: 700 15px var(--text); color: var(--brand); padding: 0 6px; }
.enroll-contact { padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.enroll-ack { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5; }
.enroll-policy { margin-top: 8px; padding: 12px 14px; border-radius: 12px; background: var(--mist); max-height: 240px; overflow: auto; font-size: 14px; }
.enroll-record { gap: 6px; }
.enroll-record .h2 { margin-top: 14px; font-size: 18px; }
.enroll-h3 { margin: 8px 0 0; font: 700 15px var(--text); color: var(--ink); }
.enroll-row { display: grid; grid-template-columns: minmax(140px, 38%) 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.enroll-row span { color: var(--slate); }
.enroll-row strong { font-weight: 600; color: var(--ink); }
.enroll-row em { color: var(--muted); font-weight: 400; }
.records-table { overflow-x: auto; background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow); }
.records-table .table td, .records-table .table th { white-space: nowrap; }
@media print { .records-table { box-shadow: none; } .enroll-row { break-inside: avoid; } }

/* Attendance */
.table .c { text-align: center; }
.att-grid td.c, .att-grid th.c { padding-left: 6px; padding-right: 6px; }
.att-present { color: var(--ok); font-weight: 700; }
.att-late { background: var(--cream); font-weight: 700; }
.att-absent { background: var(--danger-bg); color: var(--danger-ink); font-weight: 700; }
.att-unmarked { color: var(--muted); }
.att-closed { color: var(--muted); background: var(--line-soft); }
.custom-range summary { list-style: none; }

/* Help hub */
.help-topic summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; min-height: var(--tap); font-size: 17px; color: var(--ink); }
.help-topic summary::-webkit-details-marker { display: none; }
.help-topic[open] summary .i-sm { transform: rotate(180deg); }
.help-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.5; }
.help-tips { margin: 0; padding: 12px 14px 12px 32px; border-radius: 14px; background: var(--cream); font-size: 14px; line-height: 1.5; color: var(--ink-2); display: flex; flex-direction: column; gap: 4px; }