/* CrèchePulse — design tokens
   Palette lifted from the logo, tuned for a working tool:
   cool neutral ground, logo blue as the working colour, the crayon set reserved for classes. */
@font-face { font-family: 'Baloo 2'; font-weight: 500; font-display: swap; src: url(/static/fonts/baloo-2-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Baloo 2'; font-weight: 600; font-display: swap; src: url(/static/fonts/baloo-2-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Baloo 2'; font-weight: 700; font-display: swap; src: url(/static/fonts/baloo-2-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Baloo 2'; font-weight: 800; font-display: swap; src: url(/static/fonts/baloo-2-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 400; font-display: swap; src: url(/static/fonts/figtree-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 500; font-display: swap; src: url(/static/fonts/figtree-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 600; font-display: swap; src: url(/static/fonts/figtree-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 700; font-display: swap; src: url(/static/fonts/figtree-latin-700-normal.woff2) format('woff2'); }

:root {
  --ink: #15224a;
  --ink-2: #3a4566;
  --muted: #66718c;
  --line: #e2e6f0;
  --line-2: #eef1f7;
  --ground: #f3f5fa;
  --surface: #ffffff;
  --blue: #1f4fd1;
  --blue-ink: #1638a3;
  --blue-wash: #e9effd;
  --pink: #e8336f;
  --pink-wash: #fde9f0;
  --sun: #ffbe1a;
  --sun-wash: #fff5d9;
  --leaf: #46a634;
  --leaf-wash: #e7f5e3;
  --teal: #10a0b6;
  --teal-wash: #e0f5f8;
  --grape: #7a3fc8;
  --grape-wash: #f0e8fb;
  --orange: #f0841c;
  --orange-wash: #fdeedd;
  --danger: #c8264f;
  --danger-wash: #fde7ec;
  --ok: #2f8a22;
  --display: 'Baloo 2', 'Nunito', 'Trebuchet MS', system-ui, sans-serif;
  --text: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 20px;
  --shadow: 0 1px 2px rgba(21, 34, 74, .06), 0 2px 8px rgba(21, 34, 74, .04);
  --side: 248px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 15px/1.55 var(--text); color: var(--ink); background: var(--ground); }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.15; margin: 0; color: var(--ink); letter-spacing: -.01em; }
h1 { font-size: 34px; font-weight: 700; }
h2 { font-size: 22px; font-weight: 700; }
h3 { font-size: 17px; font-weight: 700; }
p { margin: 0 0 .75em; }
small, .small { font-size: 13px; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: var(--side) 1fr; min-height: 100vh; }
.side { background: var(--surface); border-right: 1px solid var(--line); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 18px 14px; overflow-y: auto; }
.side > * { flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 6px 16px; color: var(--ink); text-decoration: none !important; }
.brand img { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; }
.brand b { font: 800 21px/1 var(--display); display: block; letter-spacing: -.01em; }
.brand b span { color: var(--pink); }
.brand small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pulse-line { display: block; width: 100%; height: 14px; margin: -4px 0 12px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-group { font-size: 12px; color: var(--muted); padding: 14px 10px 4px; font-weight: 600; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 10px; color: var(--ink-2); font-weight: 500; text-decoration: none; position: relative; }
.nav a:hover { background: var(--line-2); color: var(--ink); }
.nav a.on { background: var(--blue-wash); color: var(--blue-ink); font-weight: 600; }
.nav a.on::before { content: ''; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--blue); }
.nav .count { margin-left: auto; background: var(--pink); color: #fff; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 1px 7px; }
.side-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.side-foot .who { min-width: 0; flex: 1; }
.side-foot .who b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-foot .who small { color: var(--muted); text-transform: capitalize; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.icon-btn:hover { background: var(--line-2); }

.main { min-width: 0; padding: 28px 36px 64px; }
.topbar { display: none; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head .sub { color: var(--muted); margin-top: 6px; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.crumbs a { color: var(--muted); }

/* ---------- surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px; }
.card + .card { margin-top: 16px; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-head a { font-size: 14px; font-weight: 600; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.stack > * + * { margin-top: 16px; }

/* stats: label below number, colour bar tells which metric family */
.stat { padding: 16px 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.stat b { display: block; font: 700 clamp(20px, 1.9vw, 26px)/1.15 var(--display); white-space: nowrap; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: 13px; }
.stat.warn b { color: var(--danger); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 14px/1 var(--text); padding: 10px 16px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; text-decoration: none !important; white-space: nowrap; background: var(--blue); color: #fff; transition: background .12s; }
.btn:hover { background: var(--blue-ink); }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background: var(--line-2); }
.btn.pink { background: var(--pink); }
.btn.pink:hover { background: #c9235a; }
.btn.danger { background: var(--surface); color: var(--danger); border-color: #f2c4d0; }
.btn.danger:hover { background: var(--danger-wash); }
.btn.sm { padding: 7px 12px; font-size: 13px; }
.btn.xs { padding: 5px 10px; font-size: 12px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.linkish { background: none; border: 0; padding: 0; color: var(--blue); font: inherit; cursor: pointer; }
.linkish:hover { text-decoration: underline; }
.inline { display: inline; }

/* ---------- forms ---------- */
label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
.field { margin-bottom: 14px; }
.field .hint { font-size: 12px; color: var(--muted); margin-top: 4px; font-weight: 400; }
input:not([type]), input[type=url], input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=time], input[type=number], input[type=month], input[type=search], select, textarea {
  width: 100%; font: 400 15px/1.4 var(--text); color: var(--ink); background: var(--surface); border: 1px solid #cfd5e3; border-radius: 10px; padding: 9px 12px; }
textarea { min-height: 88px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31, 79, 209, .15); }
.check { display: flex; align-items: flex-start; gap: 9px; font-weight: 500; font-size: 14px; color: var(--ink); margin: 8px 0; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--blue); flex: none; }
.row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
fieldset { border: 0; padding: 0; margin: 0 0 8px; }
legend { font: 700 17px var(--display); margin-bottom: 10px; padding: 0; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filters input[type=search] { max-width: 280px; }
.filters select { width: auto; }
.seg { display: inline-flex; background: var(--line-2); border-radius: 999px; padding: 3px; gap: 2px; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg a { white-space: nowrap; }
.seg a { padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.seg a.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; margin: 0 -22px; padding: 0 22px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 600; color: var(--muted); font-size: 13px; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 11px 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fafbfe; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tfoot td { font-weight: 700; border-top: 1px solid var(--line); }

/* ---------- people ---------- */
.who-cell { display: flex; align-items: center; gap: 11px; min-width: 0; }
.who-cell b { display: block; font-weight: 600; }
.who-cell small { color: var(--muted); display: block; }
.av { width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font: 700 14px/1 var(--display); color: #fff; background: var(--blue); letter-spacing: .02em; }
.av.lg { width: 72px; height: 72px; font-size: 26px; }
.av.sm { width: 30px; height: 30px; font-size: 12px; }
.c-blue { --c: var(--blue); --cw: var(--blue-wash); }
.c-pink { --c: var(--pink); --cw: var(--pink-wash); }
.c-sun { --c: #d99a00; --cw: var(--sun-wash); }
.c-leaf { --c: var(--leaf); --cw: var(--leaf-wash); }
.c-teal { --c: var(--teal); --cw: var(--teal-wash); }
.c-grape { --c: var(--grape); --cw: var(--grape-wash); }
.c-orange { --c: var(--orange); --cw: var(--orange-wash); }
.av[class*="c-"] { background: var(--c); }

/* chips & badges */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--line-2); color: var(--ink-2); white-space: nowrap; }
.chip[class*="c-"] { background: var(--cw); color: var(--c); }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.ok { background: var(--leaf-wash); color: var(--ok); }
.chip.warn { background: var(--sun-wash); color: #8a5d00; }
.chip.bad { background: var(--danger-wash); color: var(--danger); }
.chip.info { background: var(--blue-wash); color: var(--blue-ink); }
.allergy { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--danger); background: var(--danger-wash); padding: 2px 8px; border-radius: 6px; }

/* flash */
.flash { padding: 12px 16px; border-radius: var(--r); margin-bottom: 18px; font-weight: 500; display: flex; gap: 10px; align-items: flex-start; }
.flash.ok { background: var(--leaf-wash); color: #1f5c16; }
.flash.error { background: var(--danger-wash); color: #8f1838; }
.notice { padding: 12px 16px; border-radius: var(--r); background: var(--sun-wash); color: #6b4800; font-size: 14px; }
.notice.blue { background: var(--blue-wash); color: var(--blue-ink); }
.notice.red { background: var(--danger-wash); color: #8f1838; }
.secret { font: 700 20px/1.2 ui-monospace, 'SFMono-Regular', Menlo, monospace; background: var(--surface); padding: 8px 12px; border-radius: 8px; display: inline-block; margin: 6px 0; letter-spacing: .02em; border: 1px dashed currentColor; }

.empty { text-align: center; padding: 36px 16px; color: var(--muted); }
.empty h3 { color: var(--ink); margin-bottom: 6px; }

/* ---------- dashboard ---------- */
.hello { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; }
.hello h1 { font-size: 40px; }
.hello .date { color: var(--muted); font-weight: 500; margin-top: 4px; }
.onsite { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 8px 20px 8px 8px; }
.onsite .beat { width: 52px; height: 52px; border-radius: 50%; background: var(--pink-wash); display: grid; place-items: center; }
.onsite b { font: 800 30px/1 var(--display); font-variant-numeric: tabular-nums; }
.onsite span { color: var(--muted); font-size: 13px; display: block; }
@media (prefers-reduced-motion: no-preference) { .onsite .beat svg { animation: beat 1.6s ease-in-out infinite; } }
@keyframes beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.14); } 24% { transform: scale(1); } 36% { transform: scale(1.08); } }

.rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.room { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px 14px; border-top: 5px solid var(--c); text-decoration: none !important; color: var(--ink); display: block; }
.room:hover { box-shadow: var(--shadow); }
.room h3 { display: flex; justify-content: space-between; align-items: baseline; }
.room h3 small { font: 500 12px var(--text); color: var(--muted); }
.room .big { font: 800 34px/1 var(--display); margin: 10px 0 2px; font-variant-numeric: tabular-nums; }
.room .big small { font: 500 14px var(--text); color: var(--muted); }
.room .meta { font-size: 13px; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.bar { height: 8px; border-radius: 8px; background: var(--line-2); overflow: hidden; display: flex; margin-top: 10px; }
.bar i { display: block; height: 100%; }
.ratio-alert { margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--danger); }

.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.feed li:last-child { border-bottom: 0; }
.feed .t { color: var(--muted); font-size: 12px; white-space: nowrap; margin-left: auto; padding-left: 8px; }

.pipeline-mini { display: flex; gap: 6px; flex-wrap: wrap; }
.pipeline-mini a { flex: 1; min-width: 92px; background: var(--line-2); border-radius: 12px; padding: 10px 12px; color: var(--ink); text-decoration: none; }
.pipeline-mini a b { font: 800 22px/1 var(--display); display: block; }
.pipeline-mini a span { font-size: 12px; color: var(--muted); }

.cols { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding-top: 8px; }
.cols .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.cols .pair { display: flex; gap: 3px; align-items: flex-end; height: 100%; width: 100%; justify-content: center; }
.cols .pair i { display: block; width: 42%; max-width: 18px; border-radius: 5px 5px 2px 2px; min-height: 2px; }
.cols .col span { font-size: 12px; color: var(--muted); }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* ---------- register ---------- */
.register-head { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.class-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.class-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-weight: 600; font-size: 14px; text-decoration: none; }
.class-tabs a .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.class-tabs a.on { background: var(--cw); border-color: var(--c); color: var(--ink); }
.tally { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.tally b { color: var(--ink); font-size: 18px; font-family: var(--display); margin-right: 4px; }
.kid-row { display: grid; grid-template-columns: minmax(200px, 1.4fr) minmax(140px, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); margin-bottom: 8px; scroll-margin-top: 90px; }
.kid-row.in { border-left: 5px solid var(--leaf); }
.kid-row.out { border-left: 5px solid #b7bfd3; background: #fbfcfe; }
.kid-row.absent { border-left: 5px solid var(--pink); background: #fffafc; }
.kid-row.flag { box-shadow: inset 0 0 0 2px var(--danger); }
.kid-row .times { font-size: 13px; color: var(--muted); }
.kid-row .times b { color: var(--ink); font-weight: 600; }
.kid-row .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
details.pop { position: relative; }
details.pop > summary { list-style: none; }
details.pop > summary::-webkit-details-marker { display: none; }
details.pop .pop-body { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 320px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 12px 32px rgba(21, 34, 74, .16); padding: 16px; }
.collector { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); margin-bottom: 6px; cursor: pointer; font-weight: 500; }
.collector:has(input:checked) { border-color: var(--blue); background: var(--blue-wash); }
.collector.no { border-color: #f2c4d0; background: var(--danger-wash); }
.collector input { margin-top: 3px; accent-color: var(--blue); }
.collector small { display: block; color: var(--muted); font-weight: 400; }
.collector.no small { color: var(--danger); }

.month-grid { font-size: 12px; }
.month-grid th, .month-grid td { padding: 6px 3px; text-align: center; border-bottom: 1px solid var(--line-2); }
.month-grid th:first-child, .month-grid td:first-child { text-align: left; padding-left: 0; min-width: 150px; position: sticky; left: 0; background: var(--surface); }
.month-grid .we { background: var(--line-2); }
.mk { display: inline-block; width: 20px; height: 20px; border-radius: 6px; line-height: 20px; font-weight: 700; font-size: 11px; }
.mk.p { background: var(--leaf-wash); color: var(--ok); }
.mk.l { background: var(--sun-wash); color: #8a5d00; }
.mk.a { background: var(--pink-wash); color: var(--pink); }
.mk.f { box-shadow: 0 0 0 2px var(--danger); }

/* ---------- child profile ---------- */
.profile-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.profile-head h1 { font-size: 32px; }
.profile-head .meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.profile-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: 10px 14px; font-weight: 600; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none; }
.tabs a.on { color: var(--ink); border-bottom-color: var(--blue); }
.med { border-left: 4px solid var(--danger); }
dl.kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; font-weight: 500; }
.guardian { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-bottom: 10px; }
.guardian.restricted { border-color: #f2c4d0; background: #fffafc; }
.guardian-top { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.guardian-top .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.restriction { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--danger-wash); color: #8f1838; font-size: 14px; font-weight: 500; }
details.edit > summary { cursor: pointer; color: var(--blue); font-weight: 600; font-size: 13px; margin-top: 10px; list-style: none; }
details.edit > summary::-webkit-details-marker { display: none; }
details.edit[open] > summary { margin-bottom: 10px; }

/* ---------- enrolment board ---------- */
.board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.lane { background: var(--line-2); border-radius: var(--r-lg); padding: 12px; min-height: 200px; }
.lane h3 { display: flex; justify-content: space-between; padding: 4px 6px 10px; font-size: 16px; }
.lane h3 span { font-family: var(--text); font-size: 13px; color: var(--muted); }
.ticket { background: var(--surface); border-radius: var(--r); padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--line); }
.ticket b { display: block; }
.ticket .m { font-size: 13px; color: var(--muted); margin: 4px 0 10px; }
.ticket form { display: flex; gap: 6px; }
.ticket select { font-size: 13px; padding: 5px 8px; }

/* ---------- documents (invoice/receipt/statement) ---------- */
.doc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 36px 40px; max-width: 860px; }
.doc-head { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.doc-head img { width: 84px; height: 84px; object-fit: cover; border-radius: 14px; }
.doc-head .from { font-size: 13px; color: var(--muted); }
.doc-head .from b { color: var(--ink); font-size: 16px; display: block; margin-top: 6px; }
.doc-title { text-align: right; }
.doc-title h1 { font-size: 30px; }
.doc-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 20px; font-size: 14px; }
.doc-meta span { color: var(--muted); display: block; font-size: 12px; }
.doc-total { display: flex; justify-content: flex-end; margin-top: 12px; }
.doc-total table { width: auto; min-width: 280px; }
.doc-total td { padding: 6px 10px; }
.doc-total tr.due td { font: 800 20px var(--display); border-top: 2px solid var(--ink); }
.bank { margin-top: 26px; padding: 16px 18px; border-radius: var(--r); background: var(--blue-wash); font-size: 14px; }
.bank b { font-family: var(--display); font-size: 16px; }
.stamp { display: inline-block; font: 800 15px var(--display); color: var(--ok); border: 3px solid var(--ok); border-radius: 10px; padding: 2px 12px; transform: rotate(-4deg); }
.stamp.void { color: var(--danger); border-color: var(--danger); }

/* ---------- auth ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-art { background: var(--blue); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-art .logo-tile { width: 120px; height: 120px; border-radius: 28px; overflow: hidden; background: #fff; }
.auth-art .logo-tile img { width: 100%; height: 100%; object-fit: cover; }
.auth-art h1 { color: #fff; font-size: 52px; max-width: 520px; line-height: 1.05; font-weight: 800; }
.auth-art p { font-size: 18px; max-width: 460px; opacity: .9; margin-top: 16px; }
.auth-art .crayons { display: flex; gap: 8px; margin-top: 28px; }
.auth-art .crayons i { width: 46px; height: 10px; border-radius: 10px; }
.auth-form { display: grid; place-items: center; padding: 32px; background: var(--surface); }
.auth-form form { width: 100%; max-width: 380px; }
.auth-form h2 { font-size: 30px; margin-bottom: 6px; }
.demo { margin-top: 26px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: var(--r); font-size: 13px; color: var(--muted); }
.demo button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 6px 0; font: inherit; color: var(--ink); cursor: pointer; }
.demo button:hover b { color: var(--blue); }
.demo button span { color: var(--muted); }

/* ---------- parent portal ---------- */
.p-shell { max-width: 760px; margin: 0 auto; padding: 0 16px 96px; }
.p-top { display: flex; align-items: center; gap: 12px; padding: 16px 0; }
.p-top img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; }
.p-top .t { flex: 1; min-width: 0; }
.p-top .t b { font: 700 18px/1.1 var(--display); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-top .t small { color: var(--muted); }
.p-tabs { position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--line); display: flex; justify-content: center; z-index: 30; padding-bottom: env(safe-area-inset-bottom); }
.p-tabs a { flex: 1; max-width: 150px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px; font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: none; position: relative; }
.p-tabs a.on { color: var(--blue); }
.p-tabs a .count { position: absolute; top: 5px; left: calc(50% + 6px); background: var(--pink); color: #fff; border-radius: 9px; font-size: 10px; padding: 0 5px; }
.kid-card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; color: var(--ink); text-decoration: none !important; border-left: 6px solid var(--c); }
.kid-card + .kid-card { margin-top: 12px; }
.kid-card .top { display: flex; gap: 14px; align-items: center; }
.kid-card h2 { font-size: 24px; }
.status-line { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--line-2); font-size: 15px; font-weight: 500; display: flex; gap: 10px; align-items: center; }
.status-line.in { background: var(--leaf-wash); color: #1f5c16; }
.status-line.absent { background: var(--pink-wash); color: #8f1838; }
.balance-card { background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 20px 22px; }
.balance-card b { font: 800 36px/1 var(--display); display: block; margin: 6px 0; font-variant-numeric: tabular-nums; }
.balance-card .muted { color: #b8c0d8; }
.balance-card .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.notice-item { padding: 16px 0; border-bottom: 1px solid var(--line-2); scroll-margin-top: 20px; }
.notice-item:last-child { border-bottom: 0; }
.notice-item.unread h3::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); margin-right: 8px; vertical-align: 3px; }
.notice-item p { white-space: pre-line; color: var(--ink-2); margin: 6px 0 8px; }

/* ---------- platform ---------- */
.plat-top { background: var(--ink); color: #fff; padding: 14px 28px; display: flex; align-items: center; gap: 14px; }
.plat-top img { width: 36px; height: 36px; border-radius: 9px; }
.plat-top b { font: 700 18px var(--display); }
.plat-top .sp { flex: 1; }
.plat-main { max-width: 1180px; margin: 0 auto; padding: 28px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .split { grid-template-columns: 1fr; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; inset: 0 auto 0 0; width: 280px; z-index: 50; transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 40px rgba(0,0,0,.2); }
  body.nav-open .side { transform: none; }
  body.nav-open::after { content: ''; position: fixed; inset: 0; background: rgba(21, 34, 74, .35); z-index: 40; }
  .topbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
  .topbar img { width: 34px; height: 34px; border-radius: 9px; }
  .topbar b { font: 700 17px var(--display); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .main { padding: 20px 16px 64px; }
  h1, .hello h1 { font-size: 28px; }
  .g2, .g3 { grid-template-columns: 1fr; }
  .kid-row { grid-template-columns: 1fr; }
  .kid-row .acts { justify-content: flex-start; }
  details.pop .pop-body { left: 0; right: auto; width: min(320px, calc(100vw - 48px)); }
  .auth { grid-template-columns: 1fr; }
  .auth-art { padding: 28px; }
  .auth-art h1 { font-size: 34px; }
  .auth-art .logo-tile { width: 84px; height: 84px; }
  .doc { padding: 22px 18px; }
  .board { grid-template-columns: repeat(4, 260px); }
  dl.kv { grid-template-columns: 1fr; gap: 2px; }
  dl.kv dd { margin-bottom: 8px; }
  .table-wrap { margin: 0 -16px; padding: 0 16px; }
  .card { padding: 16px; }
}
@media (max-width: 520px) { .g4 { grid-template-columns: 1fr 1fr; } .stat b { font-size: 22px; } }

@media print {
  .side, .topbar, .no-print, .p-tabs, .p-top, .page-head .actions, .flash { display: none !important; }
  .shell { display: block; }
  .main { padding: 0; }
  body { background: #fff; }
  .doc { border: 0; padding: 0; max-width: none; }
  .card { border: 0; padding: 0; }
}

/* =====================================================================
   Platform console + shared utilities
   ===================================================================== */
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nw { white-space: nowrap; }

/* banners */
.support-bar { display: flex; align-items: center; gap: 10px; background: var(--pink); color: #fff; padding: 9px 14px; border-radius: var(--r); margin-bottom: 16px; font-size: 14px; }
.support-bar .btn { background: #fff; color: var(--pink); margin-left: auto; }
.sys-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r); margin-bottom: 16px; font-size: 14px; font-weight: 500; }
.sys-banner.info { background: var(--blue-wash); color: var(--blue-ink); }
.sys-banner.warn { background: var(--sun-wash); color: #6b4800; }
.sys-banner.bad { background: var(--danger-wash); color: #8f1838; }
.sys-banner a { color: inherit; text-decoration: underline; }

/* dark console sidebar */
.side.dark { background: var(--ink); border-right: 0; color: #fff; }
.side.dark .brand { color: #fff; }
.side.dark .brand img { border-radius: 12px; }
.side.dark .brand small { color: #9aa4c4; }
.side.dark .nav a { color: #c5cce3; }
.side.dark .nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.side.dark .nav a.on { background: rgba(255,255,255,.11); color: #fff; }
.side.dark .nav a.on::before { background: var(--pink); }
.side.dark .side-foot { border-top-color: rgba(255,255,255,.12); }
.side.dark .side-foot .who b { color: #fff; }
.side.dark .side-foot .who small { color: #9aa4c4; text-transform: none; }
.side.dark .icon-btn { background: transparent; border-color: rgba(255,255,255,.2); color: #c5cce3; }
.side.dark .icon-btn:hover { background: rgba(255,255,255,.08); }
.side.dark .nav .count { background: var(--danger); font-size: 10px; }

/* KPI strip: fixed-height tiles that never wrap their figure */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; min-width: 0; display: block; color: inherit; text-decoration: none !important; }
.kpi:hover { border-color: #cdd4e6; }
.kpi .v { font: 800 clamp(20px, 1.7vw, 26px)/1.1 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; display: block; }
.kpi .l { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.kpi .s { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin-top: 2px; }
.kpi.accent { border-top: 4px solid var(--blue); }
.kpi.pink { border-top: 4px solid var(--pink); }
.kpi.leaf { border-top: 4px solid var(--leaf); }
.kpi.sun { border-top: 4px solid var(--sun); }
.kpi.bad .v { color: var(--danger); }

.cgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; }
.span-8 { grid-column: span 8; } .span-7 { grid-column: span 7; } .span-6 { grid-column: span 6; } .span-5 { grid-column: span 5; } .span-4 { grid-column: span 4; } .span-12 { grid-column: span 12; }

/* compact list rows — the console's replacement for wide tables */
.rows { display: flex; flex-direction: column; }
.r { display: grid; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line-2); min-width: 0; }
.r:last-child { border-bottom: 0; }
.r > * { min-width: 0; }
.r.head { padding-top: 0; font-size: 12px; font-weight: 600; color: var(--muted); border-bottom-color: var(--line); }
.r .main-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.r .main-cell > span { min-width: 0; }
.r .main-cell b, .r .main-cell small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r .main-cell small { color: var(--muted); font-size: 12px; }
.r .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.r .acts { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
a.r { color: inherit; text-decoration: none !important; }
a.r:hover { background: #fafbfe; }

.tile { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; font: 800 15px/1 var(--display); color: #fff; background: var(--c, var(--blue)); }
.dot-st { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; background: var(--leaf); }
.dot-st.off { background: var(--danger); }
.dot-st.trial { background: var(--sun); }
.dot-st.live { background: var(--leaf); box-shadow: 0 0 0 3px var(--leaf-wash); }

.meter { display: flex; align-items: center; gap: 8px; min-width: 0; }
.meter .track { flex: 1; height: 6px; border-radius: 6px; background: var(--line-2); overflow: hidden; min-width: 30px; }
.meter .track i { display: block; height: 100%; background: var(--blue); border-radius: 6px; }
.meter .track i.warn { background: var(--sun); }
.meter .track i.bad { background: var(--danger); }
.meter span { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* list columns — sized by the card they sit in (container queries), not the window */
.rows { container-type: inline-size; }
.r .main-cell { overflow: hidden; }
.r .chip, .r .flag { flex: none; }

.r.tenant { grid-template-columns: minmax(180px, 2.4fr) 92px minmax(110px, 1.3fr) 56px 64px 100px 104px 150px; }
@container (max-width: 1080px) { .r.tenant { grid-template-columns: minmax(180px, 2.4fr) 92px minmax(110px, 1.3fr) 100px 104px 150px; } .r.tenant .c-xl { display: none; } }
@container (max-width: 860px) { .r.tenant { grid-template-columns: minmax(160px, 2fr) minmax(100px, 1fr) 104px 150px; } .r.tenant .c-lg { display: none; } }
@container (max-width: 560px) { .r.tenant { grid-template-columns: minmax(0, 1fr) auto; } .r.tenant .c-md { display: none; } }

.r.user { grid-template-columns: minmax(170px, 2fr) 76px minmax(90px, 1fr) 112px 236px; }
@container (max-width: 820px) { .r.user { grid-template-columns: minmax(160px, 2fr) 76px 112px 236px; } .r.user .c-lg { display: none; } }
@container (max-width: 600px) { .r.user { grid-template-columns: minmax(0, 1fr) auto; } .r.user .c-md { display: none; } }

.r.person { grid-template-columns: minmax(160px, 1.6fr) minmax(120px, 1.2fr) 88px 204px; }
@container (max-width: 700px) { .r.person { grid-template-columns: minmax(150px, 1.6fr) minmax(110px, 1fr) 204px; } .r.person .c-lg { display: none; } }
@container (max-width: 520px) { .r.person { grid-template-columns: minmax(0, 1fr) auto; } .r.person .c-md { display: none; } }

.r.ev { grid-template-columns: 112px minmax(100px, .8fr) minmax(0, 3fr) 140px; font-size: 13px; }
.r.ev .what { display: flex; gap: 8px; align-items: center; min-width: 0; overflow: hidden; }
.r.ev .what span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
@container (max-width: 760px) { .r.ev { grid-template-columns: 96px minmax(0, 1fr); } .r.ev > :nth-child(2), .r.ev .c-lg { display: none; } }
@container (max-width: 760px) { .r.ev.head > :nth-child(2) { display: none; } }
@container (max-width: 420px) { .r.ev { grid-template-columns: minmax(0, 1fr); } .r.ev > :first-child { display: none; } }
.r.ev.compact { grid-template-columns: minmax(0, 1fr) 76px; }
.r.ev.compact > :nth-child(2) { display: block; }
.r.ev.compact > :first-child { display: flex; }
.r.ev.compact { grid-template-columns: minmax(0, 1fr) 76px !important; }

.flags { display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; min-width: 0; }
.flag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.flag.bad { background: var(--danger-wash); color: var(--danger); }
.flag.warn { background: var(--sun-wash); color: #8a5d00; }
.flag.info { background: var(--blue-wash); color: var(--blue-ink); }

.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar input[type=search] { width: 260px; }
.toolbar select { width: auto; }
.toolbar .sp { flex: 1; }

/* sparkline bars */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 44px; }
.spark i { flex: 1; background: var(--blue); border-radius: 3px 3px 1px 1px; min-height: 2px; opacity: .85; }
.spark i.we { background: #c7cee0; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; }
.bars .b { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; min-width: 0; }
.bars .b i { width: 100%; max-width: 26px; border-radius: 5px 5px 2px 2px; min-height: 2px; display: block; }
.bars .b span { font-size: 11px; color: var(--muted); white-space: nowrap; }

.stackbar { display: flex; height: 14px; border-radius: 8px; overflow: hidden; background: var(--line-2); margin: 6px 0 12px; }
.stackbar i { display: block; height: 100%; }
.legend-rows .lr { display: grid; grid-template-columns: 12px minmax(0, 1fr) 40px 110px; gap: 10px; align-items: center; font-size: 14px; padding: 5px 0; }
.legend-rows .lr i { width: 12px; height: 12px; border-radius: 4px; }

/* gauge tiles on system page */
.gauge { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; min-width: 0; }
.gauge .l { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gauge .v { font: 700 20px/1.2 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 2px 0 8px; font-variant-numeric: tabular-nums; }
.gauge .meter { margin-top: 4px; }
.kv2 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; font-size: 14px; }
.kv2 dt { color: var(--muted); white-space: nowrap; }
.kv2 dd { margin: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.action-list { display: flex; flex-direction: column; }
.action-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.action-row:last-child { border-bottom: 0; }
.action-row b { display: block; }
.action-row small { color: var(--muted); display: block; }
.action-row.danger b { color: var(--danger); }

.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .sl { width: 40px; height: 22px; border-radius: 22px; background: #cfd5e3; position: relative; transition: background .15s; flex: none; }
.switch .sl::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked + .sl { background: var(--danger); }
.switch input:checked + .sl::after { transform: translateX(18px); }
.switch input:focus-visible + .sl { outline: 3px solid var(--sun); outline-offset: 2px; }

.plan-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.plan-card.off { opacity: .6; }
.plan-card .price { font: 800 30px/1 var(--display); white-space: nowrap; }
.plan-card .price small { font: 500 14px var(--text); color: var(--muted); }
.plan-card .lims { display: flex; gap: 14px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.plan-card .lims b { color: var(--ink); }
.plan-card .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.plan-card .stats div b { display: block; font: 700 18px var(--display); white-space: nowrap; }
.plan-card .stats div span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.plan-card .stats div { min-width: 0; }
.plans-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }

.console .main { padding-top: 24px; }
.console h1 { font-size: 30px; }
.console .page-head { margin-bottom: 18px; }
.head-meta { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: nowrap; min-width: 0; }

@media (max-width: 1100px) { .span-8, .span-7, .span-6, .span-5, .span-4 { grid-column: span 12; } }
@media (max-width: 860px) { .toolbar input[type=search] { width: 100%; } .side.dark { background: var(--ink); } }
.switch.ok input:checked + .sl { background: var(--blue); }

/* ===== release: classroom & care ===== */
.clock-card { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin-top: 14px; padding: 10px 10px; border-radius: 12px; background: var(--line-2); font-size: 13px; min-width: 0; }
.clock-card > span { min-width: 0; }
.side.dark .clock-card { background: rgba(255,255,255,.07); color: #c5cce3; }

.care-bar { position: sticky; top: 0; z-index: 15; background: var(--ground); padding: 8px 0 12px; }
.care-kinds { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.care-kinds::-webkit-scrollbar { display: none; }
.care-kinds a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
.care-kinds a.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.care-form { margin-top: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px; }
.chips-pick { display: flex; gap: 6px; flex-wrap: wrap; }
.chips-pick label { margin: 0; cursor: pointer; }
.chips-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips-pick span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid #cfd5e3; font-weight: 600; font-size: 14px; color: var(--ink-2); background: var(--surface); white-space: nowrap; }
.chips-pick input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chips-pick input:focus-visible + span { outline: 3px solid var(--sun); outline-offset: 2px; }
.care-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.care-kid { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px; position: relative; scroll-margin-top: 160px; min-width: 0; }
.care-kid.off { opacity: .55; }
.care-kid .pick { position: absolute; inset: 0; cursor: pointer; border-radius: var(--r-lg); }
.care-kid .pick input { position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; accent-color: var(--blue); }
.care-kid:has(.pick input:checked) { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue) inset; }
.care-kid .top { display: flex; gap: 10px; align-items: center; padding-right: 26px; min-width: 0; }
.care-kid .top > span:last-child { min-width: 0; }
.care-kid .top b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.care-kid .top small { color: var(--muted); font-size: 12px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.care-kid ul { list-style: none; margin: 10px 0 0; padding: 0; position: relative; z-index: 2; }
.care-kid li { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; border-top: 1px dashed var(--line-2); min-width: 0; }
.care-kid li .tm { color: var(--muted); font-variant-numeric: tabular-nums; width: 38px; flex: none; }
.care-kid li .tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.care-kid li form { flex: none; }
.care-kid li .x { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 4px; font-size: 14px; }
.ci { width: 26px; height: 26px; border-radius: 8px; display: inline-grid; place-items: center; flex: none; }
.ci svg { width: 15px; height: 15px; }
.ci.meal, .ci.bottle { background: var(--orange-wash); color: var(--orange); }
.ci.nap { background: var(--grape-wash); color: var(--grape); }
.ci.nappy { background: var(--teal-wash); color: var(--teal); }
.ci.mood { background: var(--sun-wash); color: #a37200; }
.ci.activity { background: var(--leaf-wash); color: var(--leaf); }
.ci.note, .ci.in, .ci.out { background: var(--blue-wash); color: var(--blue); }
.ci.incident, .ci.absent { background: var(--danger-wash); color: var(--danger); }
.ci.dose { background: var(--pink-wash); color: var(--pink); }
.ci.photo { background: var(--line-2); color: var(--ink-2); }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.gallery figure { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; min-width: 0; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--line-2); }
.gallery figcaption { padding: 8px 10px; font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; min-width: 0; }
.gallery figcaption span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.feed-day { list-style: none; margin: 0; padding: 0; }
.feed-day li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-2); align-items: flex-start; }
.feed-day li:last-child { border-bottom: 0; }
.feed-day .when { width: 44px; flex: none; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; padding-top: 3px; }
.feed-day .what { flex: 1; min-width: 0; }
.feed-day .what b { display: block; }
.feed-day .what small { color: var(--muted); }
.feed-day img { max-width: 100%; border-radius: 12px; margin-top: 8px; display: block; }

.thread { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; padding: 4px 2px 8px; }
.bubble { max-width: 78%; padding: 10px 14px; border-radius: 16px; background: var(--line-2); font-size: 15px; white-space: pre-line; overflow-wrap: anywhere; }
.bubble.me { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 4px; }
.bubble.them { align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble small { display: block; font-size: 11px; opacity: .75; margin-top: 4px; }
.msg-layout { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .msg-layout { grid-template-columns: 1fr; } .msg-layout.has-active .thread-list { display: none; } }
.compose { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.compose textarea { min-height: 46px; height: 46px; flex: 1; }

.status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.status-pill.done { background: var(--leaf-wash); color: var(--ok); }
.status-pill.progress { background: var(--sun-wash); color: #8a5d00; }
.status-pill.missing, .status-pill.expired { background: var(--danger-wash); color: var(--danger); }
.comp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-2); scroll-margin-top: 20px; }
.comp-row:last-child { border-bottom: 0; }
.comp-row b { display: block; }
.comp-row small { color: var(--muted); display: block; overflow: hidden; text-overflow: ellipsis; }
.score-ring { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; font: 800 30px var(--display); background: conic-gradient(var(--leaf) calc(var(--p) * 1%), var(--line-2) 0); position: relative; flex: none; }
.score-ring::before { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: var(--surface); }
.score-ring span { position: relative; }

.print-sheet { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 34px; max-width: 900px; }
.print-sheet h2 { margin: 18px 0 8px; font-size: 18px; }
.sig { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 30px; }
.sig div { border-top: 1px solid var(--ink); padding-top: 6px; font-size: 12px; color: var(--muted); }
.qr svg { width: 180px; height: 180px; background: #fff; border-radius: 12px; padding: 6px; border: 1px solid var(--line); }
.channel-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: 1px; }
.comp-row .acts { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
details.pop .pop-body { white-space: normal; text-align: left; }
@media (max-width: 860px) { .doc-title h1 { font-size: 24px; } .doc-head img { width: 64px; height: 64px; } }
.net-bar { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 90; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(21,34,74,.2); max-width: calc(100vw - 32px); text-align: center; }
.net-bar.off { background: var(--ink); color: #fff; }
.net-bar.sync { background: var(--sun); color: var(--ink); }
.net-bar.ok { background: var(--leaf); color: #fff; }
@media (min-width: 861px) { .net-bar { bottom: 24px; } }

/* ===== release "Next": kiosk, learning, roster, menu ===== */
body.kiosk { background: var(--ground); }
.kiosk-top { display: flex; align-items: center; gap: 14px; padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.kiosk-top img { width: 44px; height: 44px; border-radius: 12px; }
.kiosk-top b { font: 700 20px var(--display); flex: 1; }
.kiosk-clock { font: 800 26px var(--display); font-variant-numeric: tabular-nums; }
.kiosk-main { padding: 18px 20px 40px; max-width: 1280px; margin: 0 auto; }
.kiosk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.ktile { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 12px 16px; background: var(--surface); border: 2px solid var(--line); border-radius: 22px; color: var(--ink); text-decoration: none !important; text-align: center; min-height: 170px; position: relative; }
.ktile .av { width: 76px; height: 76px; font-size: 28px; }
.ktile b { font: 700 19px/1.15 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ktile small { color: var(--muted); font-size: 13px; }
.ktile.in { border-color: var(--leaf); background: var(--leaf-wash); }
.ktile.out { opacity: .55; }
.ktile.absent { border-color: #f6c3d4; background: #fffafc; }
.ktile .badge { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--leaf); color: #fff; }
.kbig { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 18px; }
.kbig button, .kbig a { font: 700 22px var(--display); padding: 26px 18px; border-radius: 22px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; text-align: center; text-decoration: none; }
.kbig .go { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.kbig .bye { background: var(--blue); border-color: var(--blue); color: #fff; }
.kbig .warn { background: var(--pink-wash); border-color: #f2c4d0; color: var(--pink); }
.pinpad { display: grid; grid-template-columns: repeat(3, 76px); gap: 10px; justify-content: center; margin: 12px 0; }
.pinpad button { height: 64px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); font: 700 24px var(--display); cursor: pointer; }
.pin-dots { display: flex; gap: 12px; justify-content: center; margin: 8px 0; }
.pin-dots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink-2); }
.pin-dots i.on { background: var(--ink); }
.area-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--cw); color: var(--c); white-space: nowrap; }
.area-dots { display: flex; gap: 4px; }
.area-dots i { width: 12px; height: 12px; border-radius: 4px; background: var(--line-2); }
.area-dots i.on { background: var(--c); }
.ms-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--line-2); font-size: 14px; }
.ms-row:last-child { border-bottom: 0; }
.ms-pick { display: inline-flex; background: var(--line-2); border-radius: 999px; padding: 2px; }
.ms-pick label { margin: 0; cursor: pointer; }
.ms-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ms-pick span { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.ms-pick input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.ms-pick input[value=achieved]:checked + span { background: var(--leaf); color: #fff; }
.ms-pick input[value=emerging]:checked + span { background: var(--sun); color: var(--ink); }
.obs { padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.obs:last-child { border-bottom: 0; }
.obs p { margin: 6px 0 4px; white-space: pre-line; }
.obs .next { font-size: 13px; color: var(--ink-2); background: var(--line-2); padding: 6px 10px; border-radius: 8px; display: inline-block; }
.week-grid { display: grid; grid-template-columns: minmax(150px, 1.2fr) repeat(5, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.week-grid > div { padding: 8px 10px; border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-2); min-width: 0; font-size: 13px; }
.week-grid .h { background: var(--line-2); font-weight: 700; font-size: 12px; color: var(--ink-2); }
.week-grid .who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shift { display: block; padding: 6px 8px; border-radius: 8px; background: var(--cw, var(--line-2)); color: var(--ink); font-size: 12px; line-height: 1.3; overflow: hidden; }
.shift b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shift.leave { background: var(--pink-wash); color: var(--pink); font-weight: 700; }
.shift.empty { background: none; color: var(--muted); border: 1px dashed var(--line); text-align: center; }
.cov { text-align: center; font-weight: 700; }
.cov.bad { color: var(--danger); }
.menu-cell input { width: 100%; font-size: 13px; padding: 6px 8px; }
.menu-cell .tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.menu-cell .tags label { margin: 0; font-size: 10px; font-weight: 600; }
.menu-cell .tags input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.menu-cell .tags span { display: inline-block; padding: 1px 6px; border-radius: 6px; background: var(--line-2); color: var(--muted); cursor: pointer; }
.menu-cell .tags input:checked + span { background: var(--danger-wash); color: var(--danger); }
.fc-grid { display: grid; grid-template-columns: minmax(130px, 1fr) repeat(6, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.fc-grid > div { padding: 9px 10px; border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-2); font-size: 13px; min-width: 0; }
.fc-grid .h { background: var(--line-2); font-weight: 700; font-size: 12px; color: var(--ink-2); }
.fc-cell b { display: block; font: 700 17px var(--display); }
.fc-cell small { color: var(--muted); white-space: nowrap; }
.fc-cell.full b { color: var(--danger); }
.fc-cell.near b { color: #b07a00; }
.ob-step { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; }
.ob-step i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); flex: none; display: grid; place-items: center; }
.ob-step.done i { background: var(--leaf); border-color: var(--leaf); }
.ob-step.done i::after { content: ''; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.ob-step.done span { color: var(--muted); }
@media (max-width: 860px) { .week-grid, .fc-grid { display: block; border: 0; background: none; } .week-grid > div, .fc-grid > div { border-right: 0; } .week-grid .h, .fc-grid .h { display: none; } }

/* ===== Later A: lesson plans, calendar ===== */
.plan-grid { display: grid; grid-template-columns: 130px repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.plan-grid > div { padding: 8px; border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-2); min-width: 0; }
.plan-grid .h { background: var(--line-2); font-weight: 700; font-size: 12px; color: var(--ink-2); }
.plan-grid .who { font-weight: 600; font-size: 13px; }
.plan-cell input { font-size: 13px; padding: 6px 8px; margin-bottom: 4px; }
.plan-cell select { font-size: 11px; padding: 4px 6px; color: var(--muted); }
.month-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.month-cal > div { min-height: 92px; padding: 6px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.month-cal .h { min-height: 0; background: var(--line-2); font-weight: 700; font-size: 12px; color: var(--ink-2); }
.month-cal .day.out { background: #fafbfd; color: #b0b7c9; }
.month-cal .day.in-term { box-shadow: inset 0 3px 0 var(--leaf); }
.month-cal .day.closed { background: var(--danger-wash); }
.month-cal .day.today .dn { background: var(--blue); color: #fff; border-radius: 999px; padding: 0 7px; }
.month-cal .dn { font: 700 13px var(--display); align-self: flex-start; }
.month-cal .ev { font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--blue-wash); color: var(--blue-ink); }
.month-cal .ev.k-closure, .month-cal .ev.k-holiday { background: #fff; color: var(--danger); }
.month-cal .ev.k-outing, .month-cal .ev.k-meeting, .month-cal .ev.k-training { background: var(--sun-wash); color: #7a5300; }
@media (max-width: 860px) { .plan-grid { grid-template-columns: 1fr; } .plan-grid .h { display: none; } .plan-grid .who { background: var(--line-2); } .month-cal > div { min-height: 64px; } .month-cal .ev { font-size: 10px; } }
@media print { .plan-cell select { display: none; } .plan-cell input { border: 0; padding: 0; } }
.feed li > span, .feed li > div { min-width: 0; } .area-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; }
.feed .t { flex: none; } .feed li > span:not(.t), .feed li > div { flex: 1 1 auto; }
pre.code { background: var(--ink); color: #e6ebf8; padding: 12px 14px; border-radius: 10px; font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
code { font-size: 12.5px; background: var(--line-2); padding: 1px 5px; border-radius: 5px; }
pre.code code { background: none; padding: 0; }
.scan-box { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; margin: 14px auto 0; border-radius: 24px; overflow: hidden; background: var(--ink); }
.scan-box video { width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; inset: 18%; border: 4px solid rgba(255,255,255,.9); border-radius: 18px; box-shadow: 0 0 0 999px rgba(21,34,74,.35); }
.qr-card { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.qr-card img { width: 180px; height: 180px; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.kbig button[disabled] { opacity: .55; cursor: not-allowed; }
.r.grp { grid-template-columns: minmax(0, 1.6fr) minmax(110px, 1fr) 70px 80px 104px 104px 104px 120px; }
@container (max-width: 900px) { .r.grp { grid-template-columns: minmax(0, 1.6fr) minmax(110px, 1fr) 70px 80px 104px 120px; } .r.grp .c-xl { display: none; } }
@container (max-width: 640px) { .r.grp { grid-template-columns: minmax(0, 1.4fr) minmax(90px, 1fr) 96px auto; } .r.grp .c-lg { display: none; } }
@container (max-width: 420px) { .r.grp { grid-template-columns: minmax(0, 1fr) auto; } .r.grp .c-md { display: none; } }

/* ===== collapsible sidebar (UX phase 1) ===== */
.nav [hidden] { display: none !important; }
.nav .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-tools { display: flex; gap: 6px; margin: 0 0 8px; }
.nav-find { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--ground); color: var(--muted); font-weight: 400; cursor: text; }
.nav-find:focus-within { border-color: var(--blue); background: var(--surface); box-shadow: 0 0 0 3px var(--blue-wash); }
.nav-find svg.i { width: 15px; height: 15px; }
.nav-find input[type=search] { flex: 1; min-width: 0; width: auto; border: 0; background: transparent; padding: 7px 0; font-size: 13px; border-radius: 0; }
.nav-find input[type=search]:focus-visible { outline: none; }
.nav-find kbd { font: 600 10px/1 var(--text); color: var(--muted); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 3px 5px; background: var(--surface); white-space: nowrap; }
@media (hover: none) { .nav-find kbd { display: none; } }
.nav-all { flex: none; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 0 10px; font: 600 12px var(--text); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.nav-all:hover { background: var(--line-2); color: var(--ink); }
.nav-div { height: 1px; background: var(--line); margin: 8px 6px; }
.nav-sec > summary { list-style: none; display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 0 10px; border-radius: 10px; cursor: pointer; font: 600 13.5px/1.2 var(--text); color: var(--ink); user-select: none; -webkit-user-select: none; }
.nav-sec > summary::-webkit-details-marker { display: none; }
.nav-sec > summary:hover { background: var(--line-2); }
.nav-sec > summary .lbl { flex: 1; }
.nav-sec > summary .count { margin-left: 0; }
.nav-sec > summary .chev { width: 15px; height: 15px; color: var(--muted); transition: transform .15s ease; }
.nav-sec[open] > summary .chev { transform: rotate(90deg); }
.nav-sec[open] > summary .sum { display: none; }
@media (prefers-reduced-motion: reduce) { .nav-sec > summary .chev { transition: none; } }
/* each group carries one crayon from the logo — play in the icons, calm in the text */
.sec-care > summary > svg.i:first-child { color: var(--pink); }
.sec-learning > summary > svg.i:first-child { color: var(--grape); }
.sec-people > summary > svg.i:first-child { color: var(--blue); }
.sec-money > summary > svg.i:first-child { color: var(--ok); }
.sec-staff > summary > svg.i:first-child { color: var(--teal); }
.sec-oversight > summary > svg.i:first-child { color: var(--ink-2); }
.sec-more > summary > svg.i:first-child { color: var(--muted); }
.nav-items { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 19px; padding-left: 8px; border-left: 1px solid var(--line); }
.nav-items a { padding: 7px 10px; font-size: 14px; }
.nav-items a.on::before { left: -9px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; }
.nav a.hit { box-shadow: inset 0 0 0 1.5px var(--blue); }
.nav-empty { font-size: 13px; color: var(--muted); padding: 6px 10px; margin: 0; }
.side.dark .nav-sec > summary { color: #fff; }
.side.dark .nav-sec > summary:hover { background: rgba(255,255,255,.07); }

/* ===== forms: inline errors, required marks, busy buttons (UX phase 2A) ===== */
[aria-invalid="true"]:not([type=checkbox]):not([type=radio]) { border-color: var(--danger) !important; box-shadow: 0 0 0 3px var(--danger-wash); }
[type=checkbox][aria-invalid="true"], [type=radio][aria-invalid="true"] { outline: 2px solid var(--danger); outline-offset: 2px; }
.field-err { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 0; color: var(--danger); font-size: 13px; font-weight: 600; line-height: 1.35; }
.field-err::before { content: '!'; flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; }
.hint.again { color: #8a4b00; }
label.req::after { content: ' *'; color: var(--pink); font-weight: 700; }
.btn.is-busy { cursor: progress; opacity: .75; }
.btn.is-busy::after { content: ''; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: cp-spin .7s linear infinite; }
@keyframes cp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-busy::after { animation: none; border-right-color: currentColor; opacity: .5; } }

/* ===== Today page and page frame (UX phase 2B) ===== */
.attention { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px 16px; margin-bottom: 18px; }
.attention.clear { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--leaf-wash); border-color: transparent; color: #1f5c16; font-size: 14px; }
.att-h { display: flex; align-items: center; gap: 8px; font-size: 18px; margin: 0 0 10px; }
.att-h .count { background: var(--pink); color: #fff; font: 700 12px/1.5 var(--text); border-radius: 10px; padding: 0 8px; }
.att-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.att a { display: flex; align-items: center; gap: 12px; height: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none !important; background: var(--surface); }
.att a:hover { background: var(--ground); border-color: #cfd5e3; }
.att .ic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; }
.att .t { flex: 1; min-width: 0; }
.att b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.att small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att .go { width: 15px; height: 15px; color: var(--muted); }
.att.bad a { border-color: #f2c4d0; background: #fff8fa; }
.att.bad .ic { background: var(--danger-wash); color: var(--danger); }
.att.warn .ic { background: var(--sun-wash); color: #9a6400; }
.att.info .ic { background: var(--blue-wash); color: var(--blue); }
.att-more > summary { list-style: none; cursor: pointer; color: var(--blue); font-weight: 600; font-size: 13px; padding: 10px 2px 2px; }
.att-more > summary::-webkit-details-marker { display: none; }
.att-more[open] > summary { margin-bottom: 8px; }
.alert-card { border-color: #f2c4d0; }
.clock-card { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; padding: 8px 8px 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--ground); font-size: 13px; }
.clock-card > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.branch-chip { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 7px 10px; border-radius: 10px; background: var(--grape-wash); color: var(--grape); font-size: 13px; text-decoration: none !important; }
.branch-chip .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.branch-chip .back { font-weight: 600; white-space: nowrap; }
.branch-chip:hover { background: #e6dbf8; }

/* ===== empty states and phone lists (UX phase 2C) ===== */
.empty.has-art { padding: 34px 18px 30px; }
.empty-art { position: relative; display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 14px; border-radius: 22px 22px 22px 8px; background: var(--tone-wash); color: var(--tone); transform: rotate(-4deg); }
.empty-art svg.i { width: 28px; height: 28px; stroke-width: 2.2; transform: rotate(4deg); }
.empty-art::before, .empty-art::after { content: ''; position: absolute; border-radius: 50%; }
.empty-art::before { width: 10px; height: 10px; top: -4px; right: -8px; background: var(--sun); }
.empty-art::after { width: 7px; height: 7px; bottom: 2px; left: -10px; background: var(--pink); opacity: .8; }
.empty.has-art p { max-width: 440px; margin: 0 auto 4px; color: var(--muted); }
.empty-acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.tone-blue { --tone: var(--blue); --tone-wash: var(--blue-wash); }
.tone-grape { --tone: var(--grape); --tone-wash: var(--grape-wash); }
.tone-pink { --tone: var(--pink); --tone-wash: var(--pink-wash); }
.tone-leaf { --tone: var(--ok); --tone-wash: var(--leaf-wash); }
.tone-teal { --tone: var(--teal); --tone-wash: var(--teal-wash); }
.tone-sun { --tone: #9a6400; --tone-wash: var(--sun-wash); }
.tone-orange { --tone: #b35c00; --tone-wash: var(--orange-wash); }
/* older empty states without artwork still get a small crayon mark */
.empty:not(.has-art) h3::before { content: ''; display: block; width: 36px; height: 6px; margin: 0 auto 12px; border-radius: 6px; background: linear-gradient(90deg, var(--blue) 0 25%, var(--pink) 25% 50%, var(--sun) 50% 75%, var(--leaf) 75%); }

@media (max-width: 640px) {
  .table-wrap:has(> table.stack-sm) { overflow: visible; margin: 0; padding: 0; }
  table.stack-sm, table.stack-sm tbody, table.stack-sm tfoot, table.stack-sm tr, table.stack-sm td { display: block; width: 100%; }
  table.stack-sm thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.stack-sm tbody tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  table.stack-sm tbody tr:last-child { border-bottom: 0; }
  table.stack-sm td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 3px 0; border: 0; text-align: right; }
  table.stack-sm td::before { content: attr(data-label); flex: none; color: var(--muted); font-size: 12px; font-weight: 600; text-align: left; }
  table.stack-sm td:first-child { padding-bottom: 8px; text-align: left; }
  table.stack-sm td:first-child::before, table.stack-sm tfoot td::before { display: none; }
  table.stack-sm td.is-empty { display: none; }
  table.stack-sm tfoot td { padding: 10px 0 0; border-top: 1px solid var(--line); font-weight: 600; }
}

/* ===== visual pass fixes (UX phase 3) ===== */
:root { --side: 268px; --muted: #5a6582; }
.nav-tools { margin-bottom: 10px; }
.nav-head { height: auto; background: none; display: flex; align-items: center; justify-content: space-between; margin: 10px 4px 4px 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.nav-head > span { font-size: 12px; font-weight: 600; color: var(--muted); }
.nav-head .nav-all { padding: 4px 9px; font-size: 12px; border-radius: 8px; }
.rooms { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.page-head .actions .btn.danger { margin-left: 10px; }
/* touch screens (tablets at the register, phones): buttons at least 40px tall */
@media (pointer: coarse) {
  .btn.sm, .btn.xs, .seg a, .class-tabs a { min-height: 40px; }
  .btn.xs { padding-inline: 12px; }
}
@media (max-width: 640px) {
  .filters input[type=search] { max-width: none; flex: 1 1 100%; }
  .class-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px; }
  .class-tabs::-webkit-scrollbar { display: none; }
  .class-tabs a { flex: none; }
  table.stack-sm td > .cv { min-width: 0; text-align: right; }
  table.stack-sm td:first-child > .cv { text-align: left; }
}

/* ===== parent app on phones (UX phase 3d) ===== */
/* crèche names like "Sunbird Crèche & Pre-school" wrap to two lines instead of being cut off */
.p-top .t b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 17px; line-height: 1.15; }
@media (pointer: coarse) {
  /* text links in card headers ("All photos", "See all", "Full day") get a thumb-sized hit area without changing how they look */
  .card-head a, a.linkish, button.linkish { display: inline-block; padding: 10px 6px; margin: -10px -6px; }
  .icon-btn { width: 40px; height: 40px; }
  [data-copy] { min-height: 36px; padding-inline: 12px; }
}

/* ---------- sales area ---------- */
.sales-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: -6px 0 18px; }
.sales-head .tabs { margin-bottom: 0; flex: 1; min-width: 0; }
.scope-pick select { width: auto; padding: 6px 30px 6px 12px; font-size: 13px; border-radius: 999px; }
.board.sales { grid-template-columns: repeat(5, minmax(230px, 1fr)); }
.board.sales.one { grid-template-columns: minmax(0, 1fr); }
.board.sales .lane { border-top: 4px solid var(--c, var(--blue)); padding-top: 10px; }
.board.sales .lane h3 { font-size: 15px; }
.lead-t { position: relative; }
.lead-t .top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.lead-t .top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-t .val { font: 700 13px/1 var(--display); color: var(--ink-2); white-space: nowrap; }
.lead-t .next { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-2); background: var(--line-2); border-radius: 8px; padding: 5px 8px; margin: 0 0 8px; }
.lead-t .next.due { background: var(--sun-wash); color: #6b4800; }
.lead-t .next.late { background: var(--danger-wash); color: var(--danger); }
.lead-t .next svg.i { width: 14px; height: 14px; }
.lead-t .who { font-size: 12px; color: var(--muted); }
.lead-t.won { border-color: #bfe3b6; background: linear-gradient(180deg, var(--leaf-wash), var(--surface) 70%); }
.st-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--cw, var(--line-2)); color: var(--c, var(--ink-2)); }
/* ===== find box people results ===== */
.nav-people { margin-top: 6px; }
.people-h { margin: 10px 10px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--muted); text-transform: uppercase; }
.nav a.person { display: block; padding: 8px 10px; border-radius: 10px; line-height: 1.25; }
.nav a.person .p-main { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nav a.person b { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav a.person small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav a.person:hover, .nav a.person:focus-visible { background: var(--line-2); }
.nav a.person.c-blue { box-shadow: inset 3px 0 0 var(--blue); } .nav a.person.c-pink { box-shadow: inset 3px 0 0 var(--pink); }
.nav a.person.c-sun { box-shadow: inset 3px 0 0 var(--sun); } .nav a.person.c-leaf { box-shadow: inset 3px 0 0 var(--leaf); }
.nav a.person.c-teal { box-shadow: inset 3px 0 0 var(--teal); } .nav a.person.c-grape { box-shadow: inset 3px 0 0 var(--grape); }
.nav a.person.c-orange { box-shadow: inset 3px 0 0 var(--orange); }
.tag-allergy { flex: none; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 700; color: var(--danger); background: var(--danger-wash); border-radius: 6px; padding: 1px 6px; }

/* ===== setup checklist on Today ===== */
.setup { margin-bottom: 18px; padding: 18px 20px; border-color: #d6dcf5; background: linear-gradient(135deg, #fff 60%, var(--blue-wash)); }
.setup-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.setup-top h2 { margin: 0; font-size: 20px; }
.setup-top p { margin: 2px 0 0; }
.setup-bar { height: 8px; margin: 12px 0 16px; border-radius: 8px; background: var(--line-2); overflow: hidden; }
.setup-bar span { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--blue), var(--grape), var(--pink), var(--sun)); }
.setup-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.setup-next { padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.setup-next .eyebrow { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--pink); }
.setup-next h3 { margin: 0 0 4px; font-size: 17px; }
.setup-next p { margin: 0; color: var(--muted); }
.setup-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.setup-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.setup-steps li { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 9px; font-size: 13.5px; }
.setup-steps li a { color: var(--ink-2); text-decoration: none; }
.setup-steps li a:hover { text-decoration: underline; }
.setup-steps .tick { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #c8cfe0; font-size: 11px; font-weight: 700; color: var(--muted); }
.setup-steps li.done .tick { border-color: transparent; background: var(--ok); color: #fff; }
.setup-steps li.done .tick svg.i { width: 13px; height: 13px; stroke-width: 3; }
.setup-steps li.done a { color: var(--muted); text-decoration: line-through; text-decoration-color: #c8cfe0; }
.setup-steps li.next { background: var(--blue-wash); }
.setup-steps li.next .tick { border-color: var(--blue); color: var(--blue); }
.setup-steps li.next a { color: var(--blue); font-weight: 600; }
.setup-hidden { margin: 0 0 14px; }
@media (max-width: 760px) { .setup-body { grid-template-columns: 1fr; } .setup-top .btn { flex: none; } }

/* ===== undo toast and confirm dialog ===== */
.undo-gone { display: none !important; }
.cp-toast { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom, 0px)); z-index: 1000; display: flex; align-items: center; gap: 14px; max-width: min(92vw, 460px); padding: 12px 14px 12px 18px; border-radius: 14px; background: #1b2550; color: #fff; font-size: 14px; box-shadow: 0 10px 30px rgba(20, 30, 70, .28); overflow: hidden; transform: translate(-50%, 140%); opacity: 0; transition: transform .2s ease, opacity .2s ease; pointer-events: none; }
.cp-toast.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.cp-toast .msg { flex: 1; min-width: 0; }
.cp-toast .undo { flex: none; min-height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .12); color: var(--sun); font: 700 14px var(--text); cursor: pointer; }
.cp-toast .undo:hover { background: rgba(255, 255, 255, .2); }
.cp-toast .bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--sun); transform-origin: left; }
.cp-toast.timed .bar { animation: cp-countdown 6s linear forwards; }
@keyframes cp-countdown { to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .cp-toast { transition: none; } .cp-toast.timed .bar { animation: none; } }
.cp-dialog { width: min(92vw, 420px); padding: 22px 22px 18px; border: 0; border-radius: 18px; box-shadow: 0 20px 60px rgba(20, 30, 70, .3); color: var(--ink); }
.cp-dialog::backdrop { background: rgba(20, 28, 60, .45); }
.cp-dialog .msg { margin: 0 0 18px; font-size: 15.5px; line-height: 1.45; }
.cp-dialog .acts { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.cp-dialog .btn.go.danger { background: var(--danger); border-color: var(--danger); color: #fff; }

/* ===== one main action per page: More menus ===== */
details.pop.more > summary .chev-d { width: 14px; height: 14px; transform: rotate(90deg); transition: transform .15s; }
details.pop.more[open] > summary .chev-d { transform: rotate(-90deg); }
details.pop .pop-body.menu-list { width: auto; min-width: 230px; padding: 6px; }
.menu-list a, .menu-list button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 9px; background: none; color: var(--ink); font: 500 14px var(--text); text-align: left; text-decoration: none !important; cursor: pointer; white-space: nowrap; }
.menu-list a:hover, .menu-list button:hover, .menu-list a:focus-visible, .menu-list button:focus-visible { background: var(--line-2); }
.menu-list svg.i { width: 17px; height: 17px; color: var(--muted); }
.menu-list .menu-danger, .menu-list .menu-danger svg.i { color: var(--danger); }
.menu-list .menu-danger:hover { background: var(--danger-wash); }
.menu-list hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.menu-list form { margin: 0; }
.btn.ghost.danger-text { color: var(--danger); }
.btn.ghost.danger-text:hover { background: var(--danger-wash); border-color: #f2c4d0; }
@media (max-width: 640px) { details.pop.more .pop-body { right: auto; left: 0; } }

/* ---- Inside the mobile app (WebView): the app supplies the header, tabs and sign-out ---- */
.in-app .topbar, .in-app .p-top, .in-app .p-tabs, .in-app .side-foot form, .in-app .p-top form { display: none !important; }
.in-app .p-shell { padding-top: 12px; padding-bottom: 32px; }
@media (max-width: 860px) { .in-app .main { padding-top: 16px; } }