/* Generated by scripts/build-css.py. Edit the named CSS sources. */
/* === tokens.css === */
/* Authoritative shared design tokens; components consume these values. */
:root {
 --font-ui:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 --font-display:var(--font-ui);
 --primary-text:#2946a3;
 --primary:#3559c7;
 --primary-hover:#2946a3;
 --primary-subtle:#e8edff;
 --on-primary:#fff;
 --secondary:#126568;
 --secondary-subtle:#e1f2ee;
 --background:#f7f8fc;
 --surface:#fff;
 --surface-secondary:#f0f2f8;
 --text-primary:#202637;
 --text-secondary:#515c73;
 --text-muted:#626d82;
 --disabled:#94a3b8;
 --border:#dde2ed;
 --control-border:#778298;
 --success:#16a34a;
 --success-text:#166534;
 --success-subtle:#dcfce7;
 --warning:#f59e0b;
 --warning-text:#92400e;
 --warning-subtle:#fef3c7;
 --error:#dc2626;
 --error-hover:#b91c1c;
 --error-text:#991b1b;
 --error-subtle:#fee2e2;
 --info:#7150a8;
 --info-subtle:#f0eafa;
 --category-meals:#92400e;
 --category-meals-subtle:#fffbeb;
 --category-sleep:var(--info);
 --category-attendance:var(--secondary);
 --category-learning:var(--primary);
 --category-activities:var(--info);
 --category-calendar:var(--primary);
 --category-messages:var(--secondary);
 --category-health:#be123c;
 --category-payments:var(--text-secondary);
 --radius-small:4px;
 --radius-control:12px;
 --radius-card:16px;
 --shadow:0 4px 24px rgb(20 30 45 / 5%);
 --ink:var(--text-primary);
 --muted:var(--text-secondary);
 --cream:var(--background);
 --coral:var(--primary);
 --yellow:var(--category-meals);
 --mint:var(--secondary);
 --sky:var(--primary);
 --lavender:var(--info);
 --line:var(--border);
 color-scheme:light;
 --bs-primary:var(--primary);
 --bs-primary-rgb:53,89,199;
 --bs-body-color:var(--ink);
 --bs-body-bg:var(--cream);
 --bs-border-color:var(--line);
 --motion-settle:cubic-bezier(.16,1,.3,1);
 --motion-quick:160ms;
 --glass-chrome:rgb(255 255 255 / 92%);
 --glass-edge:rgb(255 255 255 / 85%);
 --chrome-shadow:0 4px 24px rgb(20 30 45 / 5%);
 --bs-border-radius:var(--radius-control);
 --bs-border-radius-lg:var(--radius-card);
 --bs-border-radius-xl:var(--radius-card);
 --bs-border-radius-xxl:var(--radius-card);
 --bs-border-radius-sm:var(--radius-control);
 --app-content-max:1200px;
 --app-rail-width:208px;
 --app-gutter:24px;
 --app-bottom-height:72px;
 --safe-top:env(safe-area-inset-top, 0px);
 --safe-bottom:env(safe-area-inset-bottom, 0px);
}
:root[data-theme="dark"] {
 --primary-text:#d3dcff;
 --primary:#b6c6ff;
 --primary-hover:#d3dcff;
 --primary-subtle:#303d65;
 --on-primary:#18264e;
 --secondary:#91dbcd;
 --secondary-subtle:#23433f;
 --background:#181b24;
 --surface:#222631;
 --surface-secondary:#2d3342;
 --text-primary:#f1f3fb;
 --text-secondary:#c7cedf;
 --text-muted:#aab4ca;
 --disabled:#64748b;
 --border:#4a5368;
 --control-border:#9aa8c2;
 --success:#4ade80;
 --success-text:#86efac;
 --success-subtle:#14532d;
 --warning:#fbbf24;
 --warning-text:#fde68a;
 --warning-subtle:#451a03;
 --error:#fca5a5;
 --error-hover:#fecaca;
 --error-text:#fecaca;
 --error-subtle:#450a0a;
 --info:#d4bafa;
 --info-subtle:#413250;
 --category-meals:#fde68a;
 --category-meals-subtle:#422006;
 --category-health:#fda4af;
 --shadow:0 4px 24px rgb(0 0 0 / 12%);
 color-scheme:dark;
 --bs-body-color:var(--text-primary);
 --bs-body-bg:var(--background);
 --bs-border-color:var(--border);
 --bs-primary:var(--primary);
 --bs-primary-rgb:182,198,255;
 --bs-secondary-color:var(--text-secondary);
 --bs-tertiary-color:var(--text-muted);
 --bs-link-color:var(--primary);
 --bs-link-hover-color:var(--primary-hover);
 --bs-secondary-bg:var(--surface-secondary);
 --bs-tertiary-bg:var(--surface-secondary);
 --glass-chrome:rgb(34 38 49 / 94%);
 --glass-edge:rgb(211 220 255 / 18%);
 --chrome-shadow:0 8px 28px rgb(0 0 0 / 20%);
}

:root {--bs-secondary-color:var(--text-secondary);--bs-tertiary-color:var(--text-muted);--bs-secondary-bg:var(--surface-secondary);--bs-tertiary-bg:var(--surface-secondary);--bs-link-color:var(--primary);--bs-link-hover-color:var(--primary-hover);}

/* Authenticated surfaces share geometry, with a restrained semantic accent. */
:root :is(.admin-page,.story-product,.preview-device) {
--chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:24px;
--space-6:32px;
--primary:#275e63;
--primary-hover:#19484d;
--primary-text:#244f54;
--primary-subtle:#e5eff0;
--on-primary:#fff;
--bs-primary-rgb:39,94,99;
--background:#f3f4f6;
--surface:#ffffff;
--surface-secondary:#eceef1;
--text-primary:#242830;
--text-secondary:#535c68;
--text-muted:#68727f;
--border:#d9dde3;
--bs-body-color:var(--text-primary);
--bs-body-bg:var(--surface);
--bs-secondary-color:var(--text-secondary);
--bs-border-color:var(--border);
--bs-link-color:var(--primary-text);
--bs-link-hover-color:var(--primary-hover);
--glass-chrome:color-mix(in srgb,var(--surface) 94%,transparent);
--ink:var(--text-primary);
--muted:var(--text-secondary);
--line:var(--border);
--cream:var(--background);
--font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--field-fill:color-mix(in srgb,var(--surface-secondary) 76%,var(--surface));
--field-edge:color-mix(in srgb,var(--text-secondary) 25%,var(--surface));
--panel-shadow:0 1px 2px rgb(20 25 45 / 3%);
}
:root[data-theme="dark"] :is(.admin-page,.story-product,.preview-device) {
--primary:#8dc9ca;
--primary-hover:#b0dddd;
--primary-text:#b0dddd;
--primary-subtle:#243f43;
--on-primary:#102f33;
--bs-primary-rgb:141,201,202;
--background:#171a1f;
--surface:#20242b;
--surface-secondary:#2a3039;
--text-primary:#edf0f4;
--text-secondary:#c1c8d2;
--text-muted:#9da8b7;
--border:#414a57;
}

/* === base.css === */
/* Base styles. Edit this source, not the generated styles.css. */
@font-face {
    font-family: "Nunito";
    src: url("/assets/fonts/Nunito-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 400 900;
    font-display: optional;
}

@font-face {
    font-family: "Fredoka";
    src: url("/assets/fonts/Fredoka-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 400 700;
    font-display: optional;
}

/* Central design tokens: brand can vary independently of semantic states. */

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--cream);
    font-family: var(--font-ui);
    line-height: 1.5;
}

button, select, a { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

main, footer {
    width: min(100% - 2rem, 1240px);
    margin-inline: auto;
}

.site-header {
    top: 0;
    z-index: 1030;
    margin-bottom: 1.6rem;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--cream) 86%, transparent);
    backdrop-filter: blur(10px);
}

.top-navbar {
    padding: .65rem 0;
}

.navbar-container {
    width: min(100% - 2rem, 1240px);
    margin-inline: auto;
    padding: 0;
}

.top-navbar .navbar-brand {
    margin-right: 1rem;
    padding-top: 0;
    padding-bottom: 0;
}

.top-navbar .navbar-toggler {
    border-color: var(--line);
    border-radius:var(--radius-control);
    padding: .48rem .58rem;
    box-shadow: none;
}

.top-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23475569' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.top-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 .17rem color-mix(in srgb, var(--coral) 35%, transparent);
}

.top-navbar .navbar-collapse {
    margin-top: .8rem;
    padding-top: .75rem;
    border-top: 1px solid var(--line);
    align-items: flex-end;
}

.top-navbar .navbar-nav {
    gap: .5rem;
    align-items: flex-end;
}


.top-navbar .nav-link.nav-menu-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: .5rem .8rem;
    border: 0;
    border-radius:var(--radius-control);
    color: var(--muted);
    background: transparent;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1;
}

.top-navbar .nav-link.nav-menu-link.active,
.top-navbar .nav-link.nav-menu-link:hover,
.top-navbar .nav-link.nav-menu-link:focus-visible {
    color: var(--ink);
    background: color-mix(in srgb, var(--coral) 13%, var(--surface));
}

:root[data-theme="dark"] .top-navbar .nav-link.nav-menu-link {
    color: var(--text-primary);
    text-shadow: 0 1px 1px color-mix(in srgb, var(--text-primary) 8%, transparent);
}

:root[data-theme="dark"] .top-navbar .nav-link.nav-menu-link.active,
:root[data-theme="dark"] .top-navbar .nav-link.nav-menu-link:hover,
:root[data-theme="dark"] .top-navbar .nav-link.nav-menu-link:focus-visible {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--coral) 24%, var(--surface));
}

:root[data-theme="dark"] .top-navbar .navbar-toggler {
    border-color: var(--border);
    background: var(--surface);
}

:root[data-theme="dark"] .top-navbar .navbar-toggler-icon {
    filter: brightness(0) invert(1);
    opacity: .95;
}

.nav-admin-link.active { color: var(--ink); background: color-mix(in srgb, var(--coral) 13%, var(--surface)); }

.settings-toggle {
    min-width: 0;
    padding-inline: .65rem;
    align-items: center;
}

.settings-toggle .settings-gear {
    font-size: 1.55rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.settings-toggle.dropdown-toggle::after {
    margin-left: .4rem;
    vertical-align: middle;
    transform: translateY(1px);
}

.brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: inherit;
    text-decoration: none;
}

.brand strong, h1, h2 {
    font-family: var(--font-display);
}

.brand strong {
    display: block;
    font-size: 1.4rem;
    line-height: 1;
}

.brand small {
    display: block;
    margin-top: .2rem;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
}

.brand-icon { width: 48px; height: 48px; flex: 0 0 auto; object-fit: contain; }
.account-indicator { display: inline-flex; align-items: center; gap: .55rem; margin-left: auto; margin-right: 1rem; padding: .4rem .7rem; border: 1px solid var(--line); border-radius:var(--radius-control); color: var(--ink); background: var(--surface); text-decoration: none; }
.account-indicator small, .account-indicator strong { display: block; line-height: 1.3; }
.account-indicator small { color: var(--muted); font-size: .7rem; }
.account-indicator strong { font-size: .8rem; }
.account-status-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--success); flex-shrink: 0; }
@media (min-width: 992px) { .account-indicator + .navbar-toggler + .navbar-collapse { flex-grow: 0; } }
@media (max-width: 575px) {
    .account-indicator { order: 3; flex-basis: 100%; margin: .65rem 0 0; padding: .35rem .65rem; }
    .navbar-container > .navbar-collapse { order: 4; }
    .account-indicator small, .account-indicator strong { display: inline; font-size: .75rem; }
    .account-indicator small { margin-right: .35rem; }
}

.language-picker select {
    min-height: 44px;
    padding: .45rem 1.9rem .45rem .8rem;
    border: 1px solid var(--line);
    border-radius:var(--radius-card);
    color: var(--ink);
    background: var(--surface);
    font-weight: 650;
    cursor: pointer;
}

.hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 230px;
    padding: 2rem;
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius:var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.hero::after {
    content: "";
    position: absolute;
    right: -6rem;
    bottom: -8rem;
    width: 20rem;
    aspect-ratio: 1;
    border: 3rem solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius: 50%;
}

.eyebrow {
    display: inline-block;
    padding: .35rem .75rem;
    border-radius:var(--radius-control);
    color: var(--primary);
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    font-size: .78rem;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
}

h1 {
    max-width: 12ch;
    margin: .65rem 0 .45rem;
    font-size: clamp(2.4rem, 9vw, 4.6rem);
    line-height: .95;
    letter-spacing:normal;
}

.hero p {
    max-width: 46ch;
    margin: 0;
    color: var(--muted);
    font-weight: 600;
}

.hero-art {
    z-index: 1;
    display: none;
    gap: .5rem;
    font-size: clamp(2rem, 6vw, 4.6rem);
    transform: rotate(5deg);
}

.hero-art span {
    display: grid;
    place-items: center;
    width: 1.45em;
    aspect-ratio: 1;
    border-radius: 40%;
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--text-primary) 8%, transparent);
}

.week-navigation {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    gap: .6rem;
    margin: 1.25rem 0;
}

.week-button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 1px solid var(--line);
    border-radius:var(--radius-card);
    color: var(--ink);
    background: var(--surface);
    text-decoration: none;
    font-weight: 650;
    box-shadow: 0 5px 15px color-mix(in srgb, var(--text-primary) 8%, transparent);
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
}

.week-button:hover { transform: translateY(-2px); box-shadow: 0 9px 18px color-mix(in srgb, var(--text-primary) 8%, transparent); }
.button-label { display: none; }

.current-week { text-align: center; }
.current-week span { display: block; color: var(--muted); font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; }
.current-week strong { display: block; font-family: var(--font-display); font-size: 1.08rem; }

.menu-grid {
    display: grid;
    gap: 1rem;
}

.day-card {
    --accent: var(--coral);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius:var(--radius-card);
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    box-shadow: var(--shadow);
    animation: rise .55s both;
    animation-delay: var(--delay);
}

.day-card.sunny { --accent: var(--yellow); }
.day-card.mint { --accent: var(--mint); }
.day-card.sky { --accent: var(--sky); }
.day-card.lavender { --accent: var(--lavender); }

.day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.2rem;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--accent) 16%, white);
}

.day-header span {
    display: block;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.day-header h2 { margin: 0; font-size: 1.7rem; line-height: 1; }

.day-header time {
    padding: .35rem .65rem;
    border-radius:var(--radius-control);
    color: var(--ink);
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    font-size: .74rem;
    font-weight: 650;
}

.meal-list { padding: .45rem 1.1rem .85rem; }

.meal {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: .65rem;
    padding: .85rem 0;
}

.meal + .meal { border-top: 1px dashed var(--line); }

.meal-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius:var(--radius-control);
    color: var(--text-primary);
    background: color-mix(in srgb, var(--accent) 40%, white);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary) 8%, transparent), 0 2px 7px color-mix(in srgb, var(--text-primary) 8%, transparent);
    font-size: .72rem;
    font-weight: 900;
}

.meal h3 { margin: 0 0 .12rem; color: var(--accent); font-size: .71rem; letter-spacing: .07em; text-transform: uppercase; }
.meal p { margin: 0; font-size: .9rem; font-weight: 700; line-height: 1.35; }

.notice {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 1.25rem 0;
    padding: 1rem 1.15rem;
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius:var(--radius-card);
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}

.notice > span { color: var(--mint); font-size: 1.8rem; }
.notice p { margin: 0; color: var(--muted); font-size: .82rem; }
.notice strong { color: var(--ink); }

footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    padding: 1.5rem 0 2rem;
    color: var(--muted);
    font-size: .76rem;
}

footer strong { color: var(--coral); font-family: var(--font-display); }

.toast {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    max-width: calc(100% - 2rem);
    padding: .8rem 1rem;
    border-radius:var(--radius-card);
    color: var(--on-primary);
    background: var(--ink);
    font-size: .82rem;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transform: translateY(1rem);
    transition: .25s;
}

.toast.visible { opacity: 1; transform: translateY(0); }

.offline-page { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.offline-card { max-width: 30rem; padding: 2rem; border-radius:var(--radius-card); background: var(--surface); text-align: center; box-shadow: var(--shadow); }
.offline-card > span { color: var(--coral); font-size: 3rem; }
.offline-card h1 { max-width: none; font-size: 2.4rem; }
.offline-card .week-button { padding-inline: 1rem; }

@keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 640px) {
    main, footer { width: min(100% - 3rem, 1240px); }
    .navbar-container { width: min(100% - 3rem, 1240px); }
    .hero { padding: 2.8rem; }
    .hero-art { display: flex; }
    .week-navigation { grid-template-columns: 1fr auto 1fr; }
    .week-button:first-child { justify-self: start; padding-inline: 1rem; }
    .week-button:last-child { justify-self: end; padding-inline: 1rem; }
    .button-label { display: inline; }
    .menu-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1020px) {
    .menu-grid { grid-template-columns: repeat(6, 1fr); }
    .day-card { grid-column: span 2; }
    .day-card:nth-child(4) { grid-column: 2 / span 2; }
    .day-card:nth-child(5) { grid-column: 4 / span 2; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

html { scroll-behavior: smooth; }

.app-menu .dropdown-toggle::after {
    margin-left: .4rem;
    vertical-align: middle;
    transform: translateY(1px);
}

.top-navbar .navbar-nav .app-menu > .dropdown-menu {
    --bs-dropdown-spacer: 1.25rem;
    margin-top: var(--bs-dropdown-spacer);
}
.app-dropdown {
    width: min(19rem, calc(100vw - 2rem));
    max-height: min(80vh, 34rem);
    overflow: auto;
    padding: .7rem;
    border: 1px solid var(--line);
    border-radius:var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.app-dropdown .dropdown-header { padding: .45rem .55rem .25rem; color: var(--muted); font-size: .64rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.app-dropdown .dropdown-item { padding: .55rem .65rem; border-radius:var(--radius-control); color: var(--ink); font-size: .82rem; font-weight: 650; }
.app-dropdown .dropdown-item:hover, .app-dropdown .dropdown-item.active { color: var(--ink); background: color-mix(in srgb, var(--coral) 16%, var(--surface)); }
.app-dropdown .dropdown-divider { border-color: var(--line); }
.dropdown-setting-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; padding: .25rem .5rem .5rem; }
.dropdown-setting-grid.theme-grid { grid-template-columns: repeat(3, 1fr); }
.dropdown-setting-grid button { min-height: 36px; padding: .35rem; border: 1px solid var(--line); border-radius:var(--radius-control); color: var(--ink); background: color-mix(in srgb, var(--surface) 84%, var(--ink)); font-size: .68rem; font-weight: 900; }
.dropdown-setting-grid button:hover, .dropdown-setting-grid button.active { border-color: color-mix(in srgb, var(--coral) 50%, var(--line)); color: var(--ink); background: color-mix(in srgb, var(--coral) 18%, var(--surface)); }
.dropdown-setting-grid button:focus-visible { outline: 2px solid color-mix(in srgb, var(--coral) 65%, white); outline-offset: 2px; }

:root[data-theme="dark"] .app-dropdown {
    border-color: var(--border);
    background: var(--surface);
}

:root[data-theme="dark"] .app-dropdown .dropdown-header {
    color: var(--text-primary);
}

:root[data-theme="dark"] .app-dropdown .dropdown-item {
    color: var(--text-primary);
}

:root[data-theme="dark"] .app-dropdown .dropdown-item:hover,
:root[data-theme="dark"] .app-dropdown .dropdown-item.active {
    background: color-mix(in srgb, var(--coral) 22%, var(--surface));
}

:root[data-theme="dark"] .dropdown-setting-grid button {
    border-color: color-mix(in srgb, var(--text-primary) 8%, transparent);
    color: var(--text-primary);
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}

:root[data-theme="dark"] .dropdown-setting-grid button:hover,
:root[data-theme="dark"] .dropdown-setting-grid button.active {
    border-color: color-mix(in srgb, var(--coral) 58%, color-mix(in srgb, var(--text-primary) 8%, transparent));
    background: color-mix(in srgb, var(--coral) 24%, var(--surface));
}

:root[data-theme="dark"] .app-menu .dropdown-toggle::after {
    opacity: .95;
}
.admin-menu-link { display: flex !important; align-items: center; justify-content: space-between; gap: .7rem; }
.admin-menu-link small { color: var(--muted); font-size: .58rem; text-transform: uppercase; }

.button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .7rem 1.1rem;
    border: 1px solid transparent;
    border-radius:var(--radius-card);
    text-decoration: none;
    font-weight: 650;
    cursor: pointer;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--text-primary) 8%, transparent);
    transition: transform .2s, box-shadow .2s, background .2s, color .2s;
}

.button:hover { transform: translateY(-2px); box-shadow: 0 9px 18px color-mix(in srgb, var(--text-primary) 8%, transparent); }
.button-small { min-height: 42px; padding: .55rem .85rem; font-size: .78rem; }
.button-primary { color: var(--on-primary); background: var(--coral); }
.button-secondary, .button-quiet { color: var(--ink); border-color: var(--line); background: color-mix(in srgb, var(--text-primary) 8%, transparent); }
.button-light { color: var(--ink); background: var(--surface); }
.button-outline-light { color: var(--on-primary); border-color: color-mix(in srgb, var(--text-primary) 8%, transparent); background: transparent; }

.sales-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 2rem;
    min-height: 520px;
    align-items: center;
    padding: 2.2rem 1.4rem;
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius:var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.sales-hero::before {
    content: "";
    position: absolute;
    width: 22rem;
    aspect-ratio: 1;
    right: -13rem;
    top: -11rem;
    border: 3rem solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius: 50%;
}

.sales-hero-copy { position: relative; z-index: 1; }

.sales-hero h1 {
    max-width: 18ch;
    margin: .8rem 0 1rem;
    font-size: clamp(2.25rem, 4.8vw, 3.9rem);
    line-height: 1.1;
    font-weight: 650;
    letter-spacing:normal;
}

.lead {
    max-width: 58ch;
    margin: 0;
    color: var(--muted);
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: 700;
}

.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1.5rem;
}

.trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem 1.2rem;
    margin-top: 1.5rem;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 650;
}

.trust-row span::before {
    content: "✓";
    margin-right: .35rem;
    color: var(--mint);
}

.product-preview {
    position: relative;
    z-index: 1;
    overflow: hidden;
    max-width: 33rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius:var(--radius-card);
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    box-shadow: 0 16px 36px color-mix(in srgb, var(--text-primary) 8%, transparent);
    transform: none;
}

.preview-top, .mini-brand, .preview-message {
    display: flex;
    align-items: center;
}

.preview-top { justify-content: space-between; gap: .7rem; }
.mini-brand { gap: .35rem; font-family: var(--font-display); font-weight: 700; }
.mini-brand .brand-icon { width: 27px; height: 27px; }
.preview-pill { padding: .3rem .55rem; border-radius:var(--radius-control); color: var(--muted); background: var(--cream); font-size: .62rem; font-weight: 650; }

.preview-message {
    gap: .7rem;
    margin: 1rem 0;
    padding: .85rem;
    border-radius:var(--radius-card);
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}

.preview-message > span { color: var(--mint); font-size: 1.8rem; }
.preview-message strong, .preview-message small { display: block; }
.preview-message small { color: var(--muted); font-size: .7rem; }

.preview-cards { display: grid; gap: .55rem; }
.preview-cards article { padding: .8rem; border: 1px solid var(--line); border-radius:var(--radius-card); background: var(--surface); }
.preview-cards span, .preview-cards strong { display: block; }
.preview-cards span { margin-bottom: .15rem; color: var(--coral); font-size: .62rem; font-weight: 650; text-transform: uppercase; }
.preview-cards strong { font-size: .78rem; }

.floating-shape { position: absolute; color: var(--yellow); opacity: .45; }
.shape-one { right: 1rem; bottom: .5rem; }
.shape-two { right: 3rem; bottom: 1.2rem; color: var(--sky); }

.section { padding: 4.5rem 0; }
.section-heading { max-width: 46rem; margin: 0 auto 2rem; text-align: center; }
.section-heading h2, .split-section h2, .cta-section h2 { margin: .7rem 0; font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.6rem); line-height: 1.15; letter-spacing:normal; }
.section-heading p, .split-section p, .cta-section p { margin: 0; color: var(--muted); font-weight: 600; }

.benefit-grid { display: grid; gap: 1rem; }

.feature-card {
    --accent: var(--coral);
    min-height: 215px;
    padding: 1.35rem;
    border: 1px solid var(--line);
    border-radius:var(--radius-control);
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--text-primary) 8%, transparent);
}

.feature-card.sunny { --accent: var(--yellow); }
.feature-card.mint { --accent: var(--mint); }
.feature-card.sky { --accent: var(--sky); }
.feature-card.lavender { --accent: var(--lavender); }
.feature-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius:var(--radius-card);
    color: var(--text-primary);
    background: color-mix(in srgb, var(--accent) 44%, white);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary) 8%, transparent), 0 3px 9px color-mix(in srgb, var(--text-primary) 8%, transparent);
    font-family: var(--font-display);
    font-weight: 650;
}
.feature-card h3 { margin: 1rem 0 .35rem; font-family: var(--font-display); font-size: 1.28rem; }
.feature-card p { margin: 0; color: var(--muted); font-size: .88rem; font-weight: 600; }

.split-section { display: grid; gap: 1.2rem; align-items: center; }
.language-story { padding: 1rem 0; }
.language-list { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.3rem; }
.language-list span { display: flex; align-items: center; gap: .45rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius:var(--radius-control); background: var(--surface); font-size: .76rem; font-weight: 650; }
.language-list b { color: var(--coral); }
.language-list small { padding: .15rem .35rem; border-radius:var(--radius-control); color: var(--muted); background: var(--cream); font-size: .55rem; text-transform: uppercase; }
.coming-soon { opacity: .7; }

.institution-card {
    padding: 1.7rem;
    border-radius:var(--radius-card);
    background: var(--surface-secondary);
    color: var(--on-primary);
    box-shadow: var(--shadow);
}
.institution-card .eyebrow { color: var(--on-primary); background: color-mix(in srgb, var(--text-primary) 8%, transparent); }
.institution-card h3 { margin: 1rem 0 .5rem; font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1; }
.institution-card p { color: color-mix(in srgb, var(--text-primary) 8%, transparent); }
.institution-card .button { margin-top: 1.2rem; color: var(--ink); background: var(--surface); }

.cta-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin: 1rem 0 4rem;
    padding: 2rem;
    border-radius:var(--radius-card);
    color: var(--on-primary);
    background: var(--surface-secondary);
    box-shadow: none;
}
.cta-section .eyebrow { color: var(--on-primary); background: color-mix(in srgb, var(--text-primary) 8%, transparent); }
.cta-section p { color: color-mix(in srgb, var(--text-primary) 8%, transparent); }
.cta-section h2 { max-width: 14ch; }
.cta-section .action-row { margin-top: 0; }

.portal-section { display: grid; gap: 1rem; margin-bottom: 2.5rem; }
.portal-card { padding: 1.4rem; border: 1px solid var(--line); border-radius:var(--radius-control); color: var(--ink); background: color-mix(in srgb, var(--text-primary) 8%, transparent); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.portal-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.portal-card span, .portal-card strong, .portal-card small { display: block; }
.portal-card span { color: var(--muted); font-size: .66rem; font-weight: 650; text-transform: uppercase; }
.portal-card strong { margin: .2rem 0; font-family: var(--font-display); font-size: 1.55rem; }
.portal-card small { color: var(--coral); font-weight: 650; }

.demo-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 230px;
    padding: 2rem;
    border-radius:var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.demo-hero h1 { margin: .65rem 0 .45rem; }
.demo-hero p { max-width: 44ch; margin: 0; color: var(--muted); font-weight: 700; }
.hero-bubbles { display: none; gap: .45rem; font-size: 2.8rem; }
.hero-bubbles span { width: 1.55em; aspect-ratio: 1; display: grid; place-items: center; border-radius: 40%; background: color-mix(in srgb, var(--text-primary) 8%, transparent); }

.announcement-list { display: grid; gap: .7rem; margin: 1.2rem 0; }
.announcement { display: flex; gap: .8rem; padding: 1rem; border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent); border-radius:var(--radius-card); background: color-mix(in srgb, var(--text-primary) 8%, transparent); }
.announcement > span { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius:var(--radius-control); color: var(--category-meals); background: color-mix(in srgb, var(--text-primary) 8%, transparent); font-weight: 900; }
.announcement h2 { margin: 0 0 .15rem; font-family: var(--font-display); font-size: 1rem; }
.announcement p { margin: 0; color: var(--muted); font-size: .82rem; font-weight: 600; }
.current-week a { display: block; margin-top: .15rem; color: var(--coral); font-size: .68rem; font-weight: 650; }

.class-selector {
    display: grid;
    gap: 1rem;
    align-items: end;
    margin: 1.2rem 0;
    padding: 1.2rem;
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius:var(--radius-control);
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}
.class-selector h2 { margin: .45rem 0 .2rem; font-family: var(--font-display); font-size: 1.45rem; }
.class-selector p { margin: 0; color: var(--muted); font-size: .82rem; font-weight: 600; }
.class-selector form { min-width: 0; }
.class-selector label { display: block; margin-bottom: .35rem; color: var(--muted); font-size: .68rem; font-weight: 650; text-transform: uppercase; }
.class-select-row { display: grid; gap: .55rem; }
.class-select-row .form-select { min-height: 48px; border-color: var(--line); border-radius:var(--radius-card); color: var(--ink); background-color: var(--on-primary); font-weight: 650; }

.empty-state {
    margin: 1rem 0;
    padding: 3rem 1.2rem;
    border: 1px dashed color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius:var(--radius-card);
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    text-align: center;
}
.empty-state > span { color: var(--coral); font-size: 2.5rem; }
.empty-state h2 { margin: .5rem 0 .2rem; font-family: var(--font-display); font-size: 1.8rem; }
.empty-state p { max-width: 36rem; margin: 0 auto; color: var(--muted); }

.centered-page { min-height: 100vh; display: flex; flex-direction: column; }
.centered-content { flex: 1; display: grid; place-items: center; padding-block: 2rem; }
.admin-placeholder { max-width: 44rem; padding: 2rem; border: 1px solid var(--line); border-radius:var(--radius-card); background: color-mix(in srgb, var(--text-primary) 8%, transparent); box-shadow: var(--shadow); text-align: center; }
.admin-placeholder h1 { max-width: 13ch; margin-inline: auto; }
.admin-placeholder p { max-width: 38rem; margin: 0 auto 1.4rem; color: var(--muted); font-weight: 600; }
.admin-lock { width: 58px; aspect-ratio: 1; display: grid; place-items: center; margin: 0 auto 1rem; border-radius:var(--radius-card); color: var(--coral); background: color-mix(in srgb, var(--text-primary) 8%, transparent); }

.site-footer {
    min-height: 100px;
    align-items: center;
    border-top: 1px solid var(--line);
}
.footer-brand .brand-icon { width: 38px; height: 38px; }

@media (min-width: 640px) {
    .sales-hero { padding: 3rem; }
    .benefit-grid { grid-template-columns: repeat(2, 1fr); }
    .portal-section { grid-template-columns: repeat(2, 1fr); }
    .hero-bubbles { display: flex; }
}

@media (min-width: 900px) {
    .top-navbar .navbar-collapse {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    .top-navbar .navbar-nav {
        align-items: center;
    }

    .sales-hero { grid-template-columns: 1.15fr .85fr; padding: 4rem; }
    .benefit-grid { grid-template-columns: repeat(3, 1fr); }
    .split-section { grid-template-columns: 1.1fr .9fr; gap: 3rem; }
    .institution-card { padding: 2.4rem; }
    .class-selector { grid-template-columns: 1fr minmax(22rem, .7fr); padding: 1.5rem; }
    .class-select-row { grid-template-columns: 1fr auto; }
}

@media (max-width: 520px) {
    .site-header .nav-link.nav-menu-link { padding: .45rem .65rem; font-size: .82rem; }
    .brand small { display: none; }
    .top-navbar .navbar-nav { width: 100%; align-items: flex-end; }
    .top-navbar .navbar-nav .app-menu {
        margin-left: auto;
    }
    .top-navbar .navbar-nav .app-menu > .settings-toggle {
        margin-bottom: .35rem;
    }
    .top-navbar .navbar-nav .app-menu > .dropdown-menu {
        position: absolute;
        left: auto;
        right: auto;
        right: 0;
        transform: none;
        width: calc(100vw - 2rem);
        max-width: calc(100vw - 2rem);
        margin-top: .5rem;
    }
    .sales-hero .button { width: 100%; }
}

:root[data-theme="dark"] .sales-hero,
:root[data-theme="dark"] .demo-hero {
    background: var(--surface);
}

:root[data-theme="dark"] .product-preview,
:root[data-theme="dark"] .feature-card,
:root[data-theme="dark"] .portal-card,
:root[data-theme="dark"] .admin-placeholder,
:root[data-theme="dark"] .empty-state {
    background: var(--surface);
}

:root[data-theme="dark"] .product-preview {
    box-shadow: var(--shadow);
}

:root[data-theme="dark"] .preview-cards article,
:root[data-theme="dark"] .language-list span,
:root[data-theme="dark"] .class-select-row .form-select,
:root[data-theme="dark"] .week-button,
:root[data-theme="dark"] .button-secondary,
:root[data-theme="dark"] .button-quiet {
    color: var(--ink);
    background: var(--surface);
}

:root[data-theme="dark"] .button-light {
    color: var(--text-primary);
    background: var(--text-primary);
}

:root[data-theme="dark"] .button-light:hover {
    color: var(--text-primary);
    background: var(--surface);
}

:root[data-theme="dark"] .button {
    box-shadow: 0 6px 14px color-mix(in srgb, var(--text-primary) 8%, transparent);
}

:root[data-theme="dark"] .button:hover {
    box-shadow: 0 10px 22px color-mix(in srgb, var(--text-primary) 8%, transparent);
}

:root[data-theme="dark"] .site-header {
    border-bottom-color: color-mix(in srgb, var(--text-primary) 8%, transparent);
    background: color-mix(in srgb, var(--text-primary) 88%, transparent);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--text-primary) 8%, transparent);
}

:root[data-theme="dark"] .feature-icon,
:root[data-theme="dark"] .meal-icon {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--accent) 56%, var(--text-primary));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary) 8%, transparent), 0 4px 10px color-mix(in srgb, var(--text-primary) 8%, transparent);
    text-shadow: 0 1px 1px color-mix(in srgb, var(--text-primary) 8%, transparent);
}

:root[data-theme="dark"] .eyebrow {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    text-shadow: 0 1px 1px color-mix(in srgb, var(--text-primary) 8%, transparent);
}

:root[data-theme="dark"] .admin-menu-link small {
    color: var(--text-primary);
}

:root[data-theme="dark"] .day-card {
    background: var(--surface);
}

:root[data-theme="dark"] .day-header {
    background: color-mix(in srgb, var(--accent) 20%, var(--surface));
}

:root[data-theme="dark"] .day-header time,
:root[data-theme="dark"] .hero-bubbles span,
:root[data-theme="dark"] .product-preview {
    background-color: var(--surface);
}

:root[data-theme="dark"] .institution-card {
    background: var(--surface-secondary);
}


/* === screens.css === */
/* Screens styles. Edit this source, not the generated styles.css. */
/* September identity: teal conversation monogram, apricot warmth.
   September redesign: expressive public storytelling, calm functional workspaces. */


body { font-size:1rem; }
:root .site-header { background:var(--surface); backdrop-filter:none; }
.brand-title,.brand-name { letter-spacing:normal; }
.button,.btn { transition:background .2s,box-shadow .2s,transform .2s; }
.button:hover { transform:translateY(-2px); }
:root .button-primary,:root .btn-primary { box-shadow:0 5px 14px rgb(18 101 104 / 16%); }
:root .feature-card,:root .portal-card,:root .institution-card,:root .day-card,:root .admin-page .card { border-radius:var(--radius-card); box-shadow:var(--shadow); }
:root .admin-page .card-body { padding:1.5rem; }
.admin-page main { padding-top:2.4rem; }
.admin-page h1 { font-size:clamp(1.8rem,3vw,2.8rem); font-weight:850; letter-spacing:normal; }
:root .admin-page .btn { border-radius:var(--radius-control); padding:.65rem 1rem; }
:root .admin-page .form-control,:root .admin-page .form-select { border-radius:var(--radius-control); border-color:var(--control-border); padding:.65rem .85rem; }
:root .admin-page .table th { letter-spacing:.015em; }
:root .admin-page .alert { border-radius:var(--radius-card); }
.admin-page details>summary { padding-block:.3rem; }
.admin-page .list-group-item { padding:1rem; background:var(--surface); }
:root .app-dropdown { border-radius:var(--radius-card); box-shadow:0 20px 60px rgb(20 25 55 / 15%); }
.landing-page .site-header { margin-bottom:0; }
.landing-page main { width:100%; }
.landing-page main>section:not(.story-hero) { width:min(100% - 2.5rem,1240px); margin-inline:auto; }
.story-hero { --header-height:76px; --hero-ink:#163f42; --hero-muted:#466365; --hero-bg:#edf7f3; position:relative; overflow:hidden; background:var(--hero-bg); min-height:calc(100svh - var(--header-height)); display:flex; flex-direction:column; justify-content:center; isolation:isolate; }
.story-track { display:flex; width:100%; transition:transform .85s cubic-bezier(.22,.7,.2,1); flex:1; }
.story-slide { flex:0 0 100%; width:100%; display:flex; color:var(--hero-ink); background:var(--hero-bg); position:relative; overflow:hidden; }
.story-hero:not(.hero-enhanced) .story-slide:not(:first-child) { display:none; }
.story-all { --hero-bg:#edf7f3; --scene:#b9e0d6; --scene-accent:#277a77; }
.story-parents { --hero-bg:#eaf8f3; --scene:#b9e8d7; --scene-accent:#14856b; }
.story-teachers { --hero-bg:#fff3e9; --scene:#fbd4b9; --scene-accent:#c46740; }
.story-institutions { --hero-bg:#edf3ff; --scene:#c6d9ff; --scene-accent:#4072d6; }
.story-children { --hero-bg:#fff8db; --scene:#ffe69a; --scene-accent:#a87813; }
.story-inner { width:min(100% - 4rem,1360px); margin:auto; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(2rem,5vw,5rem); align-items:center; padding:3rem 0 2.5rem; }
.story-copy { position:relative; z-index:2; }
.story-kicker { display:flex; gap:.7rem; align-items:center; font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.story-kicker i { width:9px;height:9px;background:var(--scene-accent);border-radius:50%; }
.story-title { font-size:clamp(2.6rem,4.5vw,4.25rem); line-height:1.14; letter-spacing:normal; font-weight:500; margin:1.25rem 0 1.5rem; max-width:18ch; text-wrap:balance; overflow-wrap:break-word; }
.story-copy>p { max-width:42ch; font-size:clamp(1.05rem,1.35vw,1.2rem); line-height:1.7; color:var(--hero-muted); margin:0 0 2rem; }
.story-actions { display:flex; align-items:center; flex-wrap:wrap; gap:1.4rem; }
.story-actions .button { border-radius:var(--radius-control); padding:1rem 1.6rem; background:#126568; color:white; border-color:#126568; font-weight:600; }
.story-actions .button:hover { background:#0c4c4f; }
.story-demo { color:var(--hero-ink); text-decoration:none; font-weight:600; }
.story-demo:hover { text-decoration:underline; }
.story-caption { display:block; margin-top:1.8rem; font-size:.8rem; font-weight:500; color:var(--hero-muted); }
.story-art { height:clamp(330px,40vw,540px); position:relative; display:grid; place-items:center; perspective:900px; }
.story-orbit { position:absolute; width:94%; aspect-ratio:1; max-height:100%; background:var(--scene); border-radius:48% 52% 60% 40% / 50% 36% 64% 50%; transform:rotate(-12deg); }
.story-orbit::after { content:''; position:absolute; inset:-15px; border:1px solid var(--scene-accent); opacity:.18; border-radius:inherit; transform:rotate(18deg); }
.story-book { width:48%; aspect-ratio:1; transform:rotate(-6deg); z-index:1; filter:drop-shadow(0 24px 22px rgb(18 101 104 / 18%)); }
.story-book img { width:100%;height:100%;border-radius:28%; }
.story-sticker { position:absolute; z-index:3; background:#fff; color:#163f42; border:1px solid #e0ebe6; box-shadow:0 18px 36px rgb(45 37 80 / 9%); border-radius:18px; padding:1rem 1.25rem; display:flex; align-items:center; gap:.7rem; font-size:.95rem; font-weight:800; max-width:90%; }
.sticker-top { top:8%; right:0; transform:rotate(5deg); }
.sticker-bottom { bottom:7%; left:2%; transform:rotate(-4deg); }
.sticker-symbol { display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:#ffe7d7;color:#83502f;font-size:1.4rem; flex-shrink:0; }
.story-spark { position:absolute; color:var(--scene-accent); z-index:2; font-size:4.5rem; line-height:1; }
.spark-one { top:0;left:5%;transform:rotate(15deg); }
.spark-two { bottom:12%;right:0;font-size:3rem; }
.scene-disclaimer { position:absolute;bottom:-1.2rem;right:5%;font-size:.7rem;color:var(--hero-muted); }
.story-device { z-index:1; background:white; color:#163f42; width:64%; border-radius:28px; padding:1.7rem; box-shadow:0 30px 60px rgb(36 32 71 / 12%); transform:rotate(5deg); border:5px solid #ffffffa8; }
.story-device h3 { font:800 1.2rem/1.3 var(--font-ui);letter-spacing:normal;margin:1.8rem 0 1rem; }
.story-device-top { display:flex;gap:.7rem;align-items:center;font-size:.9rem; }
.story-device-top img { border-radius:10px; }
.story-online { margin-left:auto;width:8px;height:8px;border-radius:50%;background:#14856b; }
.scene-row { display:flex;gap:.7rem;align-items:center;padding:.8rem 0;border-bottom:1px solid #e5eeea;font-size:.8rem; }
.scene-row strong { display:block;font-size:.95rem; }
.scene-icon { width:40px;height:40px;border-radius:12px;background:#e1f2ee;display:grid;place-items:center;font-size:1.3rem;color:#126568; }
.scene-icon.mint { background:#eaf8f3;color:#14856b; }
.scene-lines { display:grid;gap:8px;margin-top:1.6rem; }
.scene-lines i,.scene-check i { height:8px;background:#e0ebe6;border-radius:8px;display:block; }
.scene-lines i:last-child { width:65%; }
.story-wide { width:85%;transform:rotate(-5deg); }
.scene-check { display:flex;align-items:center;gap:1rem;padding:.7rem 0; }
.scene-avatar { width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#fff0e4;color:#915a32;font-weight:800; }
.scene-check i { flex:1; }
.scene-tick { border-radius:8px;background:#d8f5e9;color:#18764f;padding:2px 8px;font-weight:900; }
.scene-number { font-size:4rem;line-height:1;font-weight:850;letter-spacing:normal; }
.scene-number span { font-size:1.8rem; color:#557272; }
.scene-chart { height:110px;display:flex;gap:10px;align-items:end;margin-top:1.5rem; }
.scene-chart i { flex:1;height:var(--bar);background:#cfe8e2;border-radius:6px 6px 0 0; }
.scene-chart i:nth-child(2n) { background:#277a77; }
.story-controls { position:relative;z-index:4;display:flex;gap:1.5rem;justify-content:space-between;align-items:center;padding:1rem 0 1.25rem;width:min(100% - 4rem,1360px);margin:auto;border-top:1px solid #163f4222;color:var(--hero-ink); }
.story-controls[hidden] { display:none; }
.story-choices { display:flex;gap:1.5rem;flex-wrap:wrap; }
.story-choices button { border:0;background:none;padding:.7rem 0;position:relative;color:#466365;font-weight:600;font-size:.9rem; }
.story-choices button[aria-current='true'] { color:#0e5b5e; }
.story-choices button[aria-current='true']::after { content:'';position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:var(--radius-small);background:#126568; }
.story-transport { display:flex;align-items:center;gap:.6rem; }
.story-transport button { box-sizing:border-box;border:1px solid #163f4233;background:#ffffff70;width:44px;height:44px;aspect-ratio:1 / 1;border-radius:999px;color:#163f42;font-size:1.2rem;padding:0;display:inline-flex;align-items:center;justify-content:center; }
.story-toggle-wrap { position:relative;display:inline-grid;place-items:center;width:44px;height:44px;aspect-ratio:1 / 1;box-sizing:border-box; }
.story-toggle-ring { position:absolute;inset:0;width:100%;height:100%;transform:scaleX(-1) rotate(-90deg);pointer-events:none; }
.story-toggle-ring-track,
.story-toggle-ring-progress { fill:none;stroke-width:2.5; }
.story-toggle-ring-track { stroke:rgba(18, 101, 104, 0.18); }
.story-toggle-ring-progress { stroke:#126568;stroke-linecap:round;transition:stroke-dashoffset .15s linear; }
.story-transport .story-toggle { position:relative;z-index:1;flex:0 0 32px;width:32px;min-width:32px;max-width:32px;height:32px;min-height:32px;max-height:32px;aspect-ratio:1 / 1;border-radius:50%;font-size:0.9rem;font-weight:600;letter-spacing:-0.08em;padding:0;display:inline-flex;align-items:center;justify-content:center;line-height:1;box-sizing:border-box; }
.story-counter { white-space:nowrap;font-size:.8rem; margin-right:.7rem;color:#466365; }
.story-counter b { color:#163f42; }
.story-hero[data-active='parents'] { --hero-bg:#eaf8f3; }
.story-hero[data-active='teachers'] { --hero-bg:#fff3e9; }
.story-hero[data-active='institutions'] { --hero-bg:#edf3ff; }
.story-hero[data-active='children'] { --hero-bg:#fff8db; }
.story-hero { transition:background .7s; }
.story-slide[aria-hidden='false'] .story-book,.story-slide[aria-hidden='false'] .story-device { animation:story-arrive 1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes story-arrive { from { opacity:.3;translate:40px 15px; } to { opacity:1;translate:0 0; } }
.landing-page .audience-section { margin-top:3rem; border:0; border-left:3px solid var(--primary);background:var(--surface);border-radius:0 var(--radius-card) var(--radius-card) 0; }
.landing-page .feature-card { padding:2rem; }
.landing-page .feature-card:nth-child(3n+1) { border-top:3px solid #126568; }
.landing-page .feature-card:nth-child(3n+2) { border-top:3px solid #23a087; }
.landing-page .feature-card:nth-child(3n) { border-top:3px solid #d99567; }
:root .cta-section { border-radius:var(--radius-card); background:var(--primary-subtle);color:var(--text-primary);border:1px solid var(--border);padding:3.5rem; }
:root[data-theme='dark'] .story-slide,:root[data-theme='dark'] .story-hero { --hero-ink:#effaf6;--hero-muted:#c5ddd6;--hero-bg:#1d3537; }
:root[data-theme='dark'] .story-orbit { opacity:.3; }
:root[data-theme='dark'] .story-controls { border-color:#ffffff30; }
:root[data-theme='dark'] .story-choices button,:root[data-theme='dark'] .story-counter,:root[data-theme='dark'] .story-counter b { color:#e4f4ef; }
:root[data-theme='dark'] .story-choices button[aria-current='true']::after { background:#8edbd0; }
@media (min-width:1600px) { .story-inner { padding-block:5rem; } }
@media (max-width:1050px) { .story-inner { gap:1.5rem; } .story-title { font-size:clamp(2.4rem,4.6vw,3.4rem); } .story-choices { gap:1rem; } .story-controls { gap:1rem; } .story-device { padding:1.2rem; } }
@media (max-width:767px) {
 .story-inner { width:calc(100% - 2.5rem);grid-template-columns:1fr;gap:.5rem;padding:1.75rem 0 .9rem; }
 .story-copy { text-align:left; }
 .story-title { font-size:clamp(2rem,8.5vw,2.65rem);line-height:1.16;max-width:20ch;margin:1rem 0; }
 .story-kicker { font-size:.65rem;letter-spacing:.1em; }
 .story-copy>p { font-size:1rem;line-height:1.65;max-width:45ch;margin-bottom:1.4rem; }
 .story-actions { gap:1rem; }.story-actions .button { padding:.8rem 1.1rem;font-size:.85rem; }.story-demo { font-size:.8rem; }.story-caption { display:none; }
 .story-art { height:clamp(160px,26svh,250px);max-width:400px;width:100%;margin:auto; }
 .story-orbit { width:70%;max-height:100%; }.story-book { width:130px; }.story-spark { font-size:2.5rem; }.spark-one{left:10%;top:8%;}.spark-two{right:8%;}
 .story-sticker { padding:.6rem .75rem;font-size:.7rem;border-radius:13px; }.sticker-symbol{width:26px;height:26px;font-size:1rem;border-radius:8px;}.sticker-top{top:6%;}.sticker-bottom{bottom:6%;left:0;}
 .scene-disclaimer { right:5%;bottom:-.15rem;font-size:.55rem; }.story-device{width:200px;padding:.9rem;border-width:3px;border-radius:18px;}.story-device h3{font-size:.8rem;margin:.6rem 0;}.story-device-top{font-size:.65rem;}.story-device-top img{width:22px;height:22px;}.scene-row{font-size:.55rem;padding:.4rem 0;}.scene-row strong{font-size:.65rem;}.scene-icon{width:26px;height:26px;font-size:.85rem;border-radius:8px;}.scene-lines{display:none;}
 .story-wide{width:230px;}.scene-check{padding:.25rem 0;gap:.7rem;}.scene-avatar{height:22px;width:22px;font-size:.65rem;}.scene-tick{font-size:.65rem;}.scene-number{font-size:2rem;}.scene-number span{font-size:1rem;}.scene-chart{height:55px;margin-top:.6rem;gap:6px;}
 .story-controls { width:calc(100% - 2.5rem);flex-wrap:wrap;justify-content:center;gap:.4rem;padding:.6rem 0 .8rem; }.story-choices{width:100%;justify-content:space-between;gap:.25rem;}.story-choices button{font-size:.62rem;padding:.6rem .15rem;}.story-transport{gap:.45rem;}.story-transport button{width:36px;height:36px;font-size:1rem;}.story-toggle{height:36px;}.story-counter{font-size:.7rem;}
 :root .cta-section { padding:2rem; }.admin-page main { padding-top:1.5rem; }:root .admin-page .card-body { padding:1.15rem; }
}
@media (max-width:767px) and (max-height:690px) { .story-art{height:135px;}.story-inner{padding-top:1.2rem;}.story-book{width:100px;}.story-device{transform:scale(.8) rotate(4deg);}.story-title{font-size:1.95rem;}.story-copy>p{font-size:.85rem;margin-bottom:.7rem;}.story-sticker{font-size:.6rem;padding:.35rem .5rem;} }
@media (prefers-reduced-motion:reduce) { .story-track,.story-hero,.button,.btn { transition:none!important; }.story-slide *{animation:none!important;} }
@media (max-width:575px) {
 .admin-page main>nav:not(.admin-context):not(.parent-date-navigation):not(.access-sections) { display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch; }
 .admin-page main>nav:not(.admin-context):not(.parent-date-navigation):not(.access-sections) .btn { width:100%;display:flex;align-items:center;justify-content:center;font-size:.8rem;padding:.6rem .65rem; }
 .story-transport button { min-width:44px;min-height:44px; }
}

/* Release history and audit improvements: reachable controls and clear navigation. */
.skip-link { position:fixed;left:1rem;top:-10rem;z-index:2000;padding:.85rem 1rem;background:var(--surface);color:var(--text-primary);border:2px solid var(--primary);border-radius:var(--radius-control); }
.skip-link:focus { top:1rem; }
#main-content { scroll-margin-top:6rem; }
.landing-page main>section[id] { scroll-margin-top:6rem; }
.app-version { display:inline-flex;align-items:center;min-height:44px;padding:.5rem .75rem;border:1px solid var(--border);border-radius:var(--radius-control);font-size:.85rem;white-space:nowrap;color:var(--primary-text);text-decoration:none; }
.app-version:hover { text-decoration:underline; }
.release-page { max-width:860px; }
.release-intro { max-width:42rem;margin-bottom:2rem; }
.release-page h1 { max-width:none;font-size:clamp(2rem,4vw,2.6rem);line-height:1.2;font-weight:650;letter-spacing:normal;text-wrap:balance; }
.release-intro .lead { margin-top:1rem;line-height:1.6; }
.release-preview { color:var(--text-secondary);font-size:.95rem; }
.release-card { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:clamp(1.25rem,4vw,2rem);margin-block:1rem; }
.release-meta { display:flex;gap:.5rem 1rem;justify-content:space-between;align-items:baseline;flex-wrap:wrap;margin-bottom:1rem;color:var(--text-secondary);font-size:.8rem; }
.release-meta span { font-weight:550; }
.release-meta time { font-variant-numeric:tabular-nums; }
.release-card h2,.release-card h3 { font-size:clamp(1.2rem,3vw,1.45rem);font-weight:650;line-height:1.35;letter-spacing:normal;margin:0 0 .65rem;text-wrap:balance; }
.release-story+.release-story { border-top:1px solid var(--border);margin-top:1.5rem;padding-top:1.5rem; }
.release-card p { margin:0;line-height:1.7;max-width:68ch;color:var(--text-secondary);overflow-wrap:anywhere; }
.story-choices button,.story-transport button { min-height:44px;min-width:44px; }
@media(max-width:767px) { .story-choices { gap:.35rem;flex-wrap:wrap;justify-content:center; }.story-choices button { padding:.5rem;font-size:.75rem; }.site-footer { gap:1rem;flex-wrap:wrap; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto!important; } }

/* Installed windows respect notches/home indicators; prompts never block the page. */
body { padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right); }
.site-header { padding-top:env(safe-area-inset-top); }
.site-footer { padding-bottom:max(1rem,env(safe-area-inset-bottom)); }
.pwa-prompt-overlay { position:fixed;z-index:1050;inset:0;background:rgb(15 23 42 / 42%);backdrop-filter:blur(2px);pointer-events:none; }
.pwa-prompt { position:fixed;z-index:1060;top:50%;left:50%;width:min(430px,calc(100% - 2rem));max-height:calc(100dvh - 2rem);transform:translate(-50%,-50%);overflow:auto;display:flex;gap:1rem;padding:1.25rem;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);color:var(--text-primary);box-shadow:0 16px 60px #0003; }
.pwa-prompt-overlay[hidden],.pwa-prompt[hidden],[data-pwa-open][hidden],[data-pwa-install][hidden] { display:none!important; }
.pwa-prompt>img { flex-shrink:0; }
.pwa-prompt h2 { font-size:1.15rem;line-height:1.3;margin:0 0 .6rem;font-weight:800;letter-spacing:normal; }
.pwa-prompt p { font-size:.9rem;line-height:1.5;margin:0 0 .8rem; }
.pwa-actions { display:flex;flex-wrap:wrap;gap:.5rem; }
.pwa-actions .button { min-height:44px;padding:.6rem .85rem;font-size:.85rem; }
@media(max-width:420px) { .pwa-prompt>img { display:none; } }
@media(display-mode:standalone) { [data-pwa-open],.pwa-prompt { display:none!important; } }

.pwa-prompt [data-pwa-guidance][hidden] { display: none !important; }
.pwa-prompt [data-pwa-language] { display: block; width: 100%; min-height: 44px; font-size: 1rem; margin: .4rem 0; padding: .5rem; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius:var(--radius-control); }
.pwa-prompt #pwa-language-note { display: block; margin-bottom: .75rem; }

.demo-page .day-header time { display: inline-block; margin-bottom: .65rem; }

/* Shared legal resources remain readable at narrow widths and in every role shell. */
.site-footer { flex-wrap: wrap; }
.footer-legal { display:flex; flex-wrap:wrap; gap:.25rem 1.25rem; flex-basis:100%; border-top:1px solid var(--line); padding-top:.75rem; }
.footer-legal a { display:inline-flex; align-items:center; min-height:44px; color:var(--text-primary); text-underline-offset:3px; }
.legal-section { margin-block:2rem; }
.legal-section h2 { font-size:1.3rem; font-weight:800; }
.legal-section p { line-height:1.7; }
.legal-section a { overflow-wrap:anywhere; }
.legal-page h1 { max-width:none; font-size:clamp(2rem,4vw,3rem); line-height:1.15; }

/* Settings are a solid, clearly separated control surface in both themes. */
:root .app-dropdown { background:var(--surface); border:1px solid var(--border); box-shadow:0 12px 32px rgb(0 0 0 / 18%); border-radius:var(--radius-card); }
:root .dropdown-setting-grid button { min-height:44px; font-size:.75rem; }
:root .dropdown-setting-grid button.active { border-color:var(--primary); box-shadow:inset 0 0 0 1px var(--primary); }
:root .settings-toggle { min-height:44px; border:1px solid transparent; border-radius:var(--radius-control); }
:root .settings-toggle[aria-expanded="true"] { color:var(--primary-text); background:var(--primary-subtle); border-color:var(--border); }
:root .app-dropdown .dropdown-item:focus-visible, :root .settings-toggle:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
@media(max-width:991.98px) {
 .top-navbar .navbar-nav .app-menu { width:100%; }
 .top-navbar .navbar-nav .app-menu > .settings-toggle { display:flex; width:fit-content; margin-left:auto; }
 .top-navbar .navbar-collapse { max-height:calc(100dvh - 90px); overflow-y:auto; }
 .top-navbar .navbar-nav .app-menu > .dropdown-menu { position:static; transform:none; width:100%; max-width:none; margin:.75rem 0 .25rem; max-height:60dvh; }
}

.daily-modebar {display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:0;margin-block:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-control);box-shadow:0 3px 14px rgb(20 30 45 / 4%);}
.daily-modebar > .quick-segments {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;max-width:none;padding:6px;gap:6px;border:0;border-radius:var(--radius-control);background:transparent;}
.daily-modebar .form-label {margin:0!important;min-width:180px;}
.daily-modebar .quick-segments button {white-space:normal;overflow-wrap:anywhere;min-height:44px;}
.daily-controls {display:block;margin-top:10px;}
.daily-control[hidden],.daily-modebar [hidden] {display:none!important;}
.daily-controls > .daily-control {max-width:600px;}
.daily-control .quick-segments button {min-width:50px;}
.daily-child .daily-child-footer {margin-top:8px;padding-top:6px;}
@media(min-width:901px) {.daily-child {display:grid;grid-template-columns:minmax(180px,1fr) minmax(360px,2fr);gap:8px 24px;align-items:center;}.daily-controls {margin:0;}.daily-child-footer {grid-column:1/-1;}.daily-child > form {display:contents;}}

.daily-modebar > .quick-segments {min-width:0;}
@media(max-width:600px){.daily-modebar {display:block;}.daily-modebar .quick-segments button {white-space:normal;padding-inline:4px;}.daily-modebar .form-label {margin-top:8px!important;}}

.daily-control[data-quick-section="attendance"] .quick-segments {max-width:280px;}
.daily-control[data-quick-section="attendance"] button {min-height:44px;}
.daily-child {padding:12px;}

.daily-modebar > .daily-meal-options {width:100%;max-width:none;padding:12px;border-top:1px solid var(--border);border-radius:0 0 var(--radius-control) var(--radius-control);background:color-mix(in srgb,var(--primary-subtle) 55%,var(--surface));}
.daily-meal-options button {min-height:44px;}
@media(max-width:600px){.daily-modebar > .daily-meal-options {display:grid;grid-template-columns:1fr 1fr;margin-top:0;}}

.daily-modebar > .quick-segments:first-child button {display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:var(--radius-control);font-size:.875rem;font-weight:500;}
.daily-modebar > .quick-segments:first-child button[aria-pressed=true] {background:var(--primary);color:var(--on-primary);border-color:transparent;box-shadow:0 2px 6px color-mix(in srgb,var(--primary) 18%,transparent);}
.activity-icon {width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.daily-meal-options::before {content:attr(data-section-label);grid-column:1/-1;color:var(--primary-text);font-size:.75rem;font-weight:600;border-left:3px solid var(--primary);padding-left:8px;margin-bottom:3px;}
.daily-meal-options button {border-radius:var(--radius-control);}
.daily-meal-options button[aria-pressed=true] {border-color:color-mix(in srgb,var(--primary) 40%,var(--border));}
.daily-child {border-color:color-mix(in srgb,var(--border) 65%,var(--surface));border-radius:var(--radius-control);box-shadow:0 2px 10px rgb(20 30 45 / 3%);}
.daily-child-heading [data-quick-publication] {display:inline-block;padding:3px 7px;border-radius:var(--radius-small);background:var(--surface-secondary);color:var(--text-secondary);font-size:.7rem;}

@media(max-width:600px){.daily-modebar > .quick-segments:first-child button {flex-direction:column;gap:3px;padding:6px 2px;font-size:.75rem;}.activity-icon {width:17px;height:17px;}}

.daily-control:disabled{opacity:.45}
.daily-modebar button:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}

.daily-date-navigation{display:flex;align-items:center;gap:8px;min-width:0;}
.daily-date-navigation .day-arrow{display:grid;place-items:center;width:44px;height:44px;flex:none;padding:0;font-size:26px;line-height:1;text-decoration:none;}
.daily-present-count{margin-left:auto;white-space:nowrap;font-size:.85rem;color:var(--text-secondary);}
.daily-present-count strong{color:var(--ink);}
.daily-child{position:relative;padding-right:64px;}
.daily-details-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-control);color:var(--text-secondary);}
.daily-details-arrow:hover{background:var(--surface-secondary);color:var(--primary-text);}
.daily-details-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.daily-child .daily-child-footer{border:0;padding:0;margin:0;min-height:0;}
.daily-child-footer:has([data-quick-status]:empty){display:none;}
@media(max-width:600px){.daily-toolbar .daily-date-navigation{width:100%;}.daily-toolbar .form-label{min-width:0!important;width:100%;}.daily-toolbar .daily-date-navigation form{min-width:0;}.daily-present-count{margin-left:0;}.daily-child{padding-right:60px;}}

[data-attendance-groups]{overflow-anchor:none;}
.daily-attendance-category{margin-top:16px;}
.daily-attendance-heading{font-size:.85rem;font-weight:600;color:var(--text-secondary);margin:0 0 8px;}
[data-attendance-category="absent"]{border-top:1px solid var(--border);padding-top:16px;}

.daily-control .quick-segments button{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;}
.choice-icon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.choice-emoji{font-size:19px;line-height:1;flex:none;}
.daily-control .quick-segments button>span:last-child{min-width:0;overflow-wrap:break-word;}
.daily-control[data-quick-section="mood"] .quick-segments button{flex-direction:column;gap:5px;}
@media(max-width:600px){.daily-control[data-quick-section="mood"] .quick-segments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}.daily-control[data-quick-section="mood"] .quick-segments button{min-height:66px;}}

.menu-day>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.menu-date{font-size:.8rem;font-weight:400;color:var(--text-secondary);}
.menu-meals{display:grid;grid-template-columns:1fr;gap:16px;}
.menu-meal{padding:12px;border:1px solid var(--border);border-radius:var(--radius-control);background:var(--surface);}
.menu-meal-title{font-size:.9rem;font-weight:600;margin-bottom:10px;}
.menu-dish-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(115px,.35fr) 36px;gap:8px;align-items:end;margin-bottom:8px;}
.menu-dish-row label{font-size:.75rem;color:var(--text-secondary);min-width:0;}
.menu-dish-row .form-control{font-size:.9rem;}
.menu-remove-dish{width:36px;height:44px;border:0;border-radius:var(--radius-control);background:transparent;color:var(--text-secondary);font-size:24px;}
.menu-remove-dish:hover{color:var(--danger);background:var(--surface-secondary);}
.menu-add-dish{font-size:.8rem;}
@media(max-width:600px){.menu-dish-row{grid-template-columns:minmax(0,1fr) 36px;}.menu-dish{grid-column:1;}.menu-quantity{grid-column:1;}.menu-remove-dish{grid-column:2;grid-row:1/3;align-self:center;}.menu-day{padding:10px!important;}}

@media(min-width:1200px){.menu-meals{grid-template-columns:repeat(2,minmax(0,1fr));}.menu-dish-row{grid-template-columns:minmax(0,1fr) 120px 36px;}}
.menu-selection .form-label{margin:0!important;}
@media(max-width:600px){#menus{padding:12px;}.menu-selection{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important;}.menu-selection label{min-width:0!important;width:100%;}.menu-selection label:nth-of-type(2){grid-column:1/-1;grid-row:2;}.menu-day .menu-meal{padding:8px;}}

.notice-audience{margin:16px 0;padding:12px;border:1px solid var(--border);border-radius:var(--radius-control);}
.notice-audience legend{float:none;width:auto;font-size:.95rem;}
.notice-audience label{display:flex;align-items:center;gap:8px;min-height:40px;}
.notice-group-choices{padding:8px 12px;background:var(--surface-secondary);border-radius:var(--radius-control);}

.notice-feed{display:grid;gap:16px;}
.notice-card{border:1px solid var(--border);border-radius:var(--radius-control);background:var(--surface);padding:18px;min-width:0;}
.notice-card h3{font-size:1.1rem;font-weight:600;line-height:1.35;margin:0 0 12px;overflow-wrap:anywhere;}
.notice-card-content{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;font-size:.95rem;}
.notice-management{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px 4px;font-size:.8rem;color:var(--text-secondary);}
.notice-management .btn{margin-left:auto;}
.notice-status{padding:3px 7px;background:var(--surface-secondary);border-radius:var(--radius-small);}
.notice-compose-preview{margin:16px 0;}.notice-compose-preview>summary{margin-bottom:12px;}
@media(max-width:600px){.notice-card{padding:14px;}}

/* Family home: child identity, two-day overview, then menus and notices. */
.parent-child-selector {margin-block:16px;max-width:480px;}
.parent-child-card {display:flex;align-items:center;gap:16px;margin-block:20px 8px;min-width:0;}
.parent-child-card h2 {margin:0 0 4px;font-size:clamp(1.3rem,3vw,1.75rem);overflow-wrap:anywhere;}
.parent-child-card p {margin:0;color:var(--text-secondary);}
.parent-child-card .demo-child-portrait,.parent-avatar-placeholder {width:80px;height:80px;flex:0 0 80px;margin:0;border-radius:50%;}
.parent-avatar-placeholder {display:grid;place-items:center;background:var(--primary-subtle);color:var(--primary-text);font-size:2rem;}
.parent-demo-note {font-size:.8rem;color:var(--text-secondary);margin-bottom:20px;}
.parent-days {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-block:20px;}
.parent-day-card {min-width:0;align-self:start;}
.parent-day-heading {display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.parent-day-heading h2 {font-size:1.25rem;margin:0;}
.parent-day-heading time {color:var(--text-secondary);font-size:.85rem;}
.parent-day-facts {display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;}
.parent-fact {display:flex;gap:10px;align-items:start;padding:12px;background:var(--surface-secondary);border-radius:var(--radius-control);min-width:0;}
.parent-fact>span {font-size:1.4rem;color:var(--primary-text);}
.parent-fact-label {display:block;color:var(--text-secondary);font-size:.8rem;margin-bottom:4px;}
.parent-fact strong {display:block;font-size:.95rem;font-weight:600;overflow-wrap:anywhere;}
.parent-meals,.parent-observation {margin-top:20px;}
.parent-meals h3,.parent-observation h3 {font-size:1rem;margin-bottom:10px;}
.parent-meals dl,.parent-observation p {margin:0;}
.parent-meal {padding:10px 0;border-top:1px solid var(--border);display:grid;grid-template-columns:minmax(95px,.8fr) minmax(0,1.5fr);gap:12px;}
.parent-meal dt {font-weight:500;}
.parent-meal dd {margin:0;overflow-wrap:anywhere;}
.parent-meal dd strong {font-weight:600;display:block;}
.parent-meal dd span {display:block;font-size:.875rem;color:var(--text-secondary);margin-top:4px;}
.parent-pending {color:var(--text-secondary);margin:12px 0 0;}
.parent-history {margin:24px 0;}
.parent-history>summary {font-weight:500;padding-block:12px;}
@media(max-width:1100px){.parent-days{grid-template-columns:minmax(0,1fr);}}
@media(max-width:480px){.parent-child-card{align-items:flex-start;gap:12px;}.parent-child-card .demo-child-portrait,.parent-avatar-placeholder{width:64px;height:64px;flex-basis:64px;}.parent-day-facts{grid-template-columns:minmax(0,1fr);}}

/* One continuous hero canvas, including the slide controls and safe area. */
.story-hero{min-height:calc(100dvh - var(--header-height));transition:none;padding-bottom:env(safe-area-inset-bottom,0px)}
.story-slide{background:transparent}
.story-track{min-height:calc(100dvh - var(--header-height) - 104px)}
.story-product{position:relative;z-index:1;width:320px;max-width:94%;border:1px solid var(--border);border-radius:24px;background:var(--background);color:var(--text-primary);overflow:hidden;box-shadow:0 24px 70px rgb(18 42 45 / 16%);font-family:var(--font-ui)}
.story-product-wide{width:450px}
.scene-app-header{display:flex;align-items:center;gap:9px;background:var(--surface);border-bottom:1px solid var(--border);padding:14px 16px}
.scene-app-header>span>strong{display:block;font-size:16px;line-height:1.2}.scene-app-header small{display:block;font-size:9px;color:var(--text-secondary)}
.scene-account{margin-left:auto;color:var(--text-secondary)}
.story-product svg{width:20px;height:20px;flex:none;vertical-align:middle}
.scene-app-content{padding:18px}.scene-app-content h3{font-size:19px;font-weight:700;margin:0 0 3px;letter-spacing:-.02em}.scene-app-content h4{font-size:16px;margin:16px 0 12px}.scene-app-content small{font-size:11px;color:var(--text-secondary)}
.scene-child{display:flex;align-items:center;gap:12px}.scene-child small{display:block}.scene-avatar{width:48px;height:48px;flex:none;background:var(--primary-subtle);color:var(--primary);font-size:20px;font-weight:600;border-radius:50%;display:grid;place-items:center}
.scene-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px}.scene-facts>div{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-control);padding:12px;display:grid;grid-template-columns:22px 1fr;gap:4px 7px;align-items:center}.scene-facts svg{grid-row:span 2;color:var(--primary)}.scene-facts strong{font-size:12px;line-height:1.3}.scene-facts small{font-size:10px}
.scene-note{background:var(--primary-subtle);border-radius:var(--radius-control);padding:12px;margin-top:12px}.scene-note strong{font-size:11px}.scene-note p{font-size:11px;line-height:1.5;margin:4px 0 0;color:var(--text-secondary)}
.scene-app-dock{display:flex;justify-content:space-around;gap:5px;padding:7px;background:var(--surface);border-top:1px solid var(--border)}.scene-app-dock>span{display:flex;flex:1;align-items:center;justify-content:center;flex-direction:column;gap:4px;font-size:9px;padding:7px 3px;border-radius:var(--radius-control);color:var(--text-secondary)}.scene-app-dock .is-selected{background:var(--primary-subtle);color:var(--primary)}
.scene-mode{display:flex;align-items:center;gap:8px;margin:16px 0 8px;border-radius:12px;background:var(--primary-subtle);padding:12px;font-size:12px}.scene-mode strong{margin-left:auto}.scene-roster{display:flex;align-items:center;gap:8px;padding:13px 0;border-bottom:1px solid var(--border)}.scene-roster .scene-avatar{width:32px;height:32px;font-size:14px}.scene-roster>strong{font-size:12px}.scene-status{margin-left:auto;color:var(--primary);background:var(--primary-subtle);padding:6px;border-radius:8px;font-size:10px}.scene-status svg{width:14px;height:14px}
.scene-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.scene-metrics>div{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px}.scene-metrics strong{display:block;font-size:24px}.scene-group{display:grid;grid-template-columns:1fr auto;gap:9px;margin:17px 0;font-size:12px}.scene-group>span{grid-column:span 2;height:6px;background:var(--border);border-radius:8px;overflow:hidden}.scene-group i{display:block;height:100%;background:var(--primary)}
.story-art:has(.story-product){height:520px}.scene-disclaimer{bottom:0;right:0;left:0;text-align:center}
@media(max-width:767px){.story-track{min-height:0}.story-art:has(.story-product){height:350px;margin-top:18px;margin-bottom:12px}.story-product{width:290px}.story-product-wide{width:340px}.scene-app-content{padding:12px}.scene-app-header{padding:9px 12px}.scene-note{display:none}.scene-roster{padding:9px 0}.scene-metrics{margin:10px 0}.scene-group{margin:12px 0}.scene-disclaimer{bottom:-6px}.story-inner{padding-bottom:12px}.story-controls{padding-bottom:14px}}
:root .landing-page .story-controls{background:transparent;backdrop-filter:none;box-shadow:none;border:0;border-top:1px solid color-mix(in srgb,var(--hero-ink) 15%,transparent);border-radius:0;margin-bottom:0}
:root .landing-page .story-actions .button{background:#275e63;border-color:#275e63;color:white}
:root .landing-page .story-actions .button:hover{background:#19484d;border-color:#19484d}

/* Distinct perspectives, with the tilted device treatment retained. */
.story-product{transform:rotate(-5deg);transform-origin:center;transition:transform 350ms ease}
.story-product.scene-all{transform:rotate(5deg)}.story-product.scene-teachers{transform:rotate(4deg)}.story-product.scene-institutions{transform:rotate(-3deg)}.story-product.scene-children{transform:rotate(5deg)}
.scene-brand-hub{text-align:center;padding:14px 0 20px}.scene-brand-hub>img{border-radius:20px;margin-bottom:18px}.scene-brand-hub h3{font-size:21px;text-wrap:balance}
.scene-perspectives{display:grid;gap:10px}.scene-perspectives>div{display:flex;gap:10px;align-items:center;background:var(--surface);padding:13px 12px;border:1px solid var(--border);border-radius:var(--radius-control)}.scene-perspectives strong,.scene-perspectives small{display:block}.scene-perspectives strong{font-size:13px}.scene-perspectives small{font-size:10px;margin-top:3px}.scene-perspectives svg{color:var(--primary)}.scene-perspectives>div>svg:last-child{margin-left:auto;width:15px;height:15px}
.scene-day-note{background:var(--primary-subtle);border-radius:16px;margin:20px 0 14px;padding:20px}.scene-day-note>svg{width:28px;height:28px;color:var(--primary)}.scene-day-note h4{margin:10px 0;font-size:14px}.scene-day-note p{font-size:13px;line-height:1.6;margin:0}.scene-day-rest{display:flex;align-items:center;gap:12px;padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:12px}.scene-day-rest small,.scene-day-rest strong{display:block}.scene-day-rest strong{font-size:13px}.scene-day-rest svg{color:var(--primary)}
.story-actions a:focus-visible{outline:3px solid var(--hero-ink);outline-offset:5px}.story-choices button{min-height:44px}.story-demo{display:inline-flex;align-items:center;gap:8px;min-height:44px}
@media(max-width:767px){.story-art:has(.story-product){height:390px;margin-block:26px 20px}.story-product{max-width:86%}.scene-brand-hub{padding:6px 0 12px}.scene-brand-hub>img{width:52px;height:52px;margin-bottom:12px}.scene-perspectives>div{padding:10px}.scene-day-note{padding:16px;margin-top:14px}.story-controls{row-gap:12px!important}.story-choices{justify-content:center;gap:4px 12px}.story-choices button{font-size:.7rem}}
@media(prefers-reduced-motion:reduce){.story-product{transition:none}}
@media(max-width:767px){.scene-all .scene-perspectives small{display:none}.scene-all .scene-perspectives strong{font-size:14px}.scene-all .scene-brand-hub h3{font-size:18px}.story-art:has(.scene-all){height:390px}}

/* === components.css === */
/* Components styles. Edit this source, not the generated styles.css. */
/* Shared page shell: footer follows long pages and reaches the bottom on short ones. */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
body > .site-header, body > .site-footer { flex-shrink: 0; }
body > .site-footer { margin-top: auto; }
.nav-logout { border: 0; background: transparent; }
.admin-page { background: var(--cream); }
.admin-page .site-header { margin-bottom: 0; }
.admin-title { max-width: none; margin: 0 0 .5rem; font-family: var(--font-ui); font-size: clamp(1.65rem, 3vw, 2.3rem); font-weight: 650; line-height: 1.2; letter-spacing:normal; }
.admin-page h2, .admin-page h3 { font-family: var(--font-ui); font-weight: 650; }
.admin-page .card { border-color: var(--line); border-radius:var(--radius-card); box-shadow: 0 3px 14px color-mix(in srgb, var(--text-primary) 8%, transparent); }
.admin-page .card-body { padding: 1.35rem; }
.admin-page .table { margin-bottom: 0; }
.admin-page .table th { font-size: .8rem; color: var(--muted); font-weight: 700; }
.admin-page .table td, .admin-page .table th { padding-block: .85rem; vertical-align: middle; }
.admin-page .btn { border-radius:var(--radius-control); font-weight: 650; }
.admin-tabs { padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.admin-empty { margin: 0; padding: 1.25rem 0; color: var(--muted); }
.admin-page .form-control, .admin-page .form-select { min-height: 44px; }
.admin-page .site-footer { margin-top: 2rem; }

:root[data-theme="dark"] .admin-page .btn-outline-primary { --bs-btn-color: var(--text-primary); --bs-btn-border-color: var(--text-primary); --bs-btn-hover-color: var(--text-primary); --bs-btn-hover-bg: var(--text-primary); --bs-btn-hover-border-color: var(--text-primary); --bs-btn-active-color: var(--text-primary); --bs-btn-active-bg: var(--text-primary); --bs-btn-active-border-color: var(--text-primary); }
:root[data-theme="dark"] .admin-page .btn-outline-secondary { --bs-btn-color: var(--text-primary); --bs-btn-border-color: var(--text-primary); --bs-btn-hover-color: var(--text-primary); --bs-btn-hover-bg: var(--text-primary); --bs-btn-hover-border-color: var(--text-primary); }

/* Papivo visual language: calm surfaces, a single teal accent, clear information hierarchy. */


.site-header, :root[data-theme="dark"] .site-header { background: var(--surface); box-shadow: none; border-bottom: 1px solid var(--line); }
.brand strong, footer strong { font-family: var(--font-ui); font-weight: 700; color: var(--ink); letter-spacing:normal; }
.brand small { font-weight: 500; }
.brand-icon { width: 42px; height: 42px; }
.top-navbar .nav-link.nav-menu-link { font-weight: 600; }
.top-navbar .nav-link.nav-menu-link.active, .top-navbar .nav-link.nav-menu-link:hover, :root[data-theme="dark"] .top-navbar .nav-link.nav-menu-link.active, :root[data-theme="dark"] .top-navbar .nav-link.nav-menu-link:hover { background: color-mix(in srgb, var(--coral) 9%, var(--surface)); color: var(--ink); text-shadow: none; }
:root[data-theme="dark"] .top-navbar .nav-link.nav-menu-link { color: var(--muted); text-shadow: none; }
:root[data-theme="dark"] .top-navbar .navbar-toggler { background: var(--surface); border-color: var(--line); }
.account-indicator { border-radius:var(--radius-control); background: var(--cream); }
.sales-hero, .demo-hero { border: 1px solid var(--line); box-shadow: none; }
.sales-hero::before, .hero::after, .floating-shape, .hero-bubbles { display: none; }
.product-preview { background: var(--surface); border-color: var(--line); }
.preview-message { background: color-mix(in srgb, var(--coral) 7%, var(--surface)); border-radius:var(--radius-control); }
.preview-cards article { background: var(--surface); border-radius:var(--radius-control); }
.eyebrow, :root[data-theme="dark"] .eyebrow { color: var(--coral); background: none; padding: 0; border-radius: 0; font-size: .7rem; letter-spacing: .1em; font-weight: 650; text-shadow: none; }
.lead { font-size: 1.05rem; font-weight: 400; line-height: 1.7; }
.trust-row { font-weight: 500; }
.button, .button:hover, :root[data-theme="dark"] .button, :root[data-theme="dark"] .button:hover { border-radius:var(--radius-control); box-shadow: none; transform: none; font-weight: 600; }
.button-primary { color: var(--on-primary); background: var(--primary); }
.button-primary:hover { color: var(--on-primary); background: var(--primary-hover); }
.button-secondary, .button-quiet { background: var(--surface); }
.feature-card { box-shadow: none; min-height: 205px; background: var(--surface); }
.feature-card p, .section-heading p, .split-section p, .demo-hero p { font-weight: 400; line-height: 1.65; }
.feature-icon, :root[data-theme="dark"] .feature-icon, .meal-icon, :root[data-theme="dark"] .meal-icon { color: var(--coral); background: color-mix(in srgb, var(--coral) 9%, var(--surface)); border-radius:var(--radius-control); box-shadow: none; text-shadow: none; }
.feature-icon svg { width: 22px; height: 22px; }
.institution-card .eyebrow, .cta-section .eyebrow { color: var(--secondary); background: none; }
.institution-card p, .cta-section p { color: var(--text-secondary); font-weight: 400; }
.cta-section h2 { color: var(--on-primary); }
.language-list span, .portal-card { background: var(--surface); border-radius:var(--radius-control); }
.portal-card:hover { transform: none; }
.class-selector { background: var(--surface); border: 1px solid var(--line); }
.class-select-row .form-select { background-color: var(--surface); border-radius:var(--radius-control); font-weight: 500; }
.announcement { background: color-mix(in srgb, var(--yellow) 7%, var(--surface)); border-color: color-mix(in srgb, var(--yellow) 25%, var(--line)); border-radius:var(--radius-control); }
.empty-state { background: var(--surface); border-color: var(--line); }
.admin-page .card { background: var(--surface); box-shadow: none; border-radius:var(--radius-control); }
.admin-page h2, .admin-page h3 { font-weight: 600; }
.admin-title { font-size: clamp(1.6rem, 3vw, 2rem); }
.admin-tabs .btn { font-size: .875rem; }
.btn-primary { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover); --bs-btn-active-bg: var(--primary-hover); --bs-btn-active-border-color: var(--primary-hover); }
.btn-outline-primary, :root[data-theme="dark"] .admin-page .btn-outline-primary { --bs-btn-color: var(--coral); --bs-btn-border-color: var(--line); --bs-btn-hover-color: var(--on-primary); --bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary); --bs-btn-active-color: var(--on-primary); --bs-btn-active-bg: var(--primary); --bs-btn-active-border-color: var(--primary); }
:root[data-theme="dark"] .button-primary { background: var(--primary); color: var(--on-primary); }
@media (max-width: 575px) { .sales-hero { padding: 1.6rem 1.2rem; gap: 2rem; } .sales-hero h1 { font-size: 2.25rem; } .section { padding-block: 3rem; } .demo-hero { padding: 1.4rem; min-height: 180px; } }

.admin-page .table { --bs-table-bg: var(--surface); --bs-table-color: var(--ink); }

.audience-section { margin-top: 1.5rem; padding: 1.6rem 2rem; border-left: 3px solid var(--coral); background: var(--surface); border-radius:0 var(--radius-control) var(--radius-control) 0; }
.audience-section h2 { margin: 0 0 .5rem; font-size: 1.25rem; font-weight: 600; }
.audience-section p { margin: 0; max-width: 90ch; color: var(--muted); line-height: 1.65; }
@media (min-width: 992px) { .portal-section { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
@media (max-width: 575px) { .audience-section { padding: 1.25rem; } }

/* Preserve dish lines and portions entered by institution staff. */
.meal p { white-space: pre-line; overflow-wrap: anywhere; font-weight: 500; line-height: 1.55; }

/* Shared component appearance; layout and flows remain unchanged. */
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
:root .site-header, :root .app-dropdown, :root .offline-card { background: var(--surface); border-color: var(--border); box-shadow: none; }
:root .app-dropdown .dropdown-header, :root .admin-menu-link small { color: var(--text-secondary); }
:root .app-dropdown .dropdown-item, :root .dropdown-setting-grid button { color: var(--text-primary); background: var(--surface); border-color: var(--control-border); }
:root .app-dropdown .dropdown-item:hover, :root .app-dropdown .dropdown-item.active,
:root .dropdown-setting-grid button:hover, :root .dropdown-setting-grid button.active,
:root .top-navbar .nav-link.nav-menu-link.active, :root .top-navbar .nav-link.nav-menu-link:hover { color: var(--primary-text); background: var(--primary-subtle); }
:root .top-navbar .nav-link.nav-menu-link { text-shadow: none; }
:root .button-primary, :root .cta-section .button-light { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
:root .button-primary:hover, :root .cta-section .button-light:hover { background: var(--primary-hover); color: var(--on-primary); }
:root .button-secondary, :root .button-quiet, :root .button-outline-light,
:root .institution-card .button { color: var(--text-primary); background: var(--surface); border-color: var(--control-border); }
:root .button-secondary:hover, :root .button-quiet:hover, :root .button-outline-light:hover,
:root .institution-card .button:hover { color: var(--primary-text); background: var(--primary-subtle); border-color: var(--primary); }
:root .btn-primary { --bs-btn-color: var(--on-primary); --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-color: var(--on-primary); --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover); --bs-btn-active-color: var(--on-primary); --bs-btn-active-bg: var(--primary-hover); --bs-btn-active-border-color: var(--primary-hover); --bs-btn-disabled-color: var(--text-secondary); --bs-btn-disabled-bg: var(--surface-secondary); --bs-btn-disabled-border-color: var(--border); }
:root .btn-outline-primary, :root .admin-page .btn-outline-primary,
:root .btn-outline-secondary, :root .admin-page .btn-outline-secondary { --bs-btn-color: var(--text-primary); --bs-btn-border-color: var(--control-border); --bs-btn-hover-color: var(--primary-text); --bs-btn-hover-bg: var(--primary-subtle); --bs-btn-hover-border-color: var(--primary); --bs-btn-active-color: var(--on-primary); --bs-btn-active-bg: var(--primary); --bs-btn-active-border-color: var(--primary); }
:root .btn-danger, :root .btn-outline-danger { --bs-btn-color: var(--error-text); --bs-btn-bg: var(--error-subtle); --bs-btn-border-color: var(--error); --bs-btn-hover-color: var(--on-primary); --bs-btn-hover-bg: var(--error); --bs-btn-hover-border-color: var(--error); --bs-btn-active-color: var(--on-primary); --bs-btn-active-bg: var(--error-hover); --bs-btn-active-border-color: var(--error-hover); }
:root .alert-success { --bs-alert-color: var(--success-text); --bs-alert-bg: var(--success-subtle); --bs-alert-border-color: var(--success); }
:root .alert-warning { --bs-alert-color: var(--warning-text); --bs-alert-bg: var(--warning-subtle); --bs-alert-border-color: var(--warning); }
:root .alert-danger { --bs-alert-color: var(--error-text); --bs-alert-bg: var(--error-subtle); --bs-alert-border-color: var(--error); }
:root .form-control, :root .form-select { color: var(--text-primary); background-color: var(--surface); border-color: var(--control-border); border-radius: var(--radius-control); }
:root .form-control::placeholder { color: var(--text-muted); opacity: 1; }
:root .form-control:disabled, :root .form-select:disabled { background-color: var(--surface-secondary); color: var(--text-secondary); }
:root .form-control:focus, :root .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-subtle); }
:root .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
:root :is(a,button,input,textarea,select):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; box-shadow: none; }
:root .institution-card, :root .cta-section, :root .audience-section { background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); box-shadow: none; }
:root .audience-section { border-left: 3px solid var(--primary); }
:root .institution-card p, :root .cta-section p { color: var(--text-secondary); }
:root .cta-section h2 { color: var(--text-primary); }
:root .institution-card .eyebrow, :root .cta-section .eyebrow { color: var(--secondary); }
:root .day-card { --accent: var(--category-meals); background: var(--surface); animation: none; }
:root .day-header { background: var(--surface-secondary); }
:root .day-header time { background: var(--surface); }
:root .meal-icon { color: var(--category-meals); background: var(--category-meals-subtle); }
:root .feature-card { border: 1px solid var(--border); }
:root .feature-card .feature-icon { color: var(--secondary); background: var(--secondary-subtle); font-size: 1.2rem; }
:root .feature-card.coral .feature-icon { background: var(--category-meals-subtle); }
:root .feature-card.sky .feature-icon, :root .feature-card.lavender .feature-icon { background: var(--primary-subtle); }
:root .platform-summary .card { border: 1px solid var(--border); }
:root .preview-cards article { background: var(--surface); border-color: var(--border); }
:root .preview-message, :root .notice { background: var(--secondary-subtle); border-color: var(--border); }
:root .announcement { background: var(--surface); border-color: var(--border); }
:root .announcement > span { color: var(--secondary); background: var(--secondary-subtle); }
:root .account-indicator { background: var(--surface-secondary); }
:root .table { --bs-table-color: var(--text-primary); --bs-table-bg: var(--surface); --bs-table-border-color: var(--border); }
:root .card, :root .feature-card, :root .day-card, :root .app-dropdown, :root .notice, :root .sales-hero, :root .demo-hero { border-radius: var(--radius-card); }
:root .product-preview { box-shadow: var(--shadow); }
:root .week-button:hover { transform: none; box-shadow: none; color: var(--primary-text); background: var(--primary-subtle); }
:root .alert-info { --bs-alert-color: var(--primary-text); --bs-alert-bg: var(--primary-subtle); --bs-alert-border-color: var(--primary); }
:root .text-bg-secondary { color: var(--text-secondary) !important; background-color: var(--surface-secondary) !important; }

/* Helpful parent and institution information share the existing hero. */
.sales-hero h1 { max-width: 24ch; font-size: clamp(2.25rem, 3.5vw, 3rem); }
.hero-invitations { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.hero-invitations p { margin: 0 0 .65rem; font-weight: 600; }

/* Customer benefits stay readable in the shared light/dark palette. */
.audience-preview { display: grid; gap: 1rem; align-self: center; min-width: 0; }
.audience-preview-card { position: relative; display: grid; gap: .65rem; padding: 1.5rem 2.5rem 1.5rem 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); color: var(--text-primary); text-decoration: none; }
.audience-preview-card strong { font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.3; }
.audience-preview-card:hover, .audience-preview-card:focus-visible { border-color: var(--coral); color: var(--text-primary); }
.audience-preview-card .eyebrow { margin: 0; }
.audience-arrow { position: absolute; right: 1rem; top: 50%; color: var(--coral); }
.feature-card[id^="benefit-"] { scroll-margin-top: 2rem; }

/* Papivo materials: selective frosted chrome, expressive controls, solid content. */


:root .site-header {
 background:var(--surface); border-bottom:1px solid var(--border);
 box-shadow:var(--chrome-shadow);
}
:root .story-controls {
 width:min(100% - 2rem,1320px); margin:0 auto 1rem;
 padding:.65rem 1rem; border:1px solid var(--border); border-radius:var(--radius-card);
 background:var(--surface); color:var(--text-primary); box-shadow:var(--chrome-shadow);
}
@supports ((backdrop-filter:blur(16px)) or (-webkit-backdrop-filter:blur(16px))) {
 :root .site-header,:root[data-theme="dark"] .site-header,:root .story-controls {
  background:var(--glass-chrome);
  -webkit-backdrop-filter:blur(16px) saturate(125%);
  backdrop-filter:blur(16px) saturate(125%);
  box-shadow:inset 0 1px 0 var(--glass-edge),var(--chrome-shadow);
 }
}
/* Menus and data surfaces stay fully opaque even inside frosted navigation. */
:root .app-dropdown,:root[data-theme='dark'] .app-dropdown,:root .pwa-prompt {
 background:var(--surface); border-color:var(--border);
}
:root .button,:root .button:hover,:root[data-theme="dark"] .button,:root[data-theme="dark"] .button:hover,:root .btn,:root .admin-page .btn { border-radius:var(--radius-control); }
:root .admin-page .form-control,:root .admin-page .form-select { border-radius:var(--radius-card); }
:root .button-primary,:root .btn-primary { box-shadow:0 4px 12px rgb(18 101 104 / 14%); }
:root .button-secondary { background:var(--primary-subtle); color:var(--primary-text); border-color:transparent; }
:root .top-navbar .nav-link.nav-menu-link { border-radius:var(--radius-control); }
:root .settings-toggle { border-radius:var(--radius-card); }
:root .dropdown-setting-grid { padding:.3rem .5rem .6rem; gap:.4rem; }
:root .dropdown-setting-grid button { border-radius:var(--radius-card); }
:root .dropdown-setting-grid button.active { background:var(--primary-subtle); color:var(--primary-text); }
:root .story-choices { gap:.35rem; }
:root .story-choices button { min-height:44px; border-radius:var(--radius-control); padding:.6rem .95rem; color:var(--text-secondary); }
:root .story-choices button[aria-current='true'] { color:var(--primary-text); background:var(--primary-subtle); }
:root .story-choices button[aria-current='true']::after { content:none; }
:root .story-counter,:root .story-counter b { color:var(--text-secondary); }
:root .story-transport button { color:var(--primary-text); background:var(--primary-subtle); border-color:transparent; }
:root .feature-card .feature-icon { width:48px; height:48px; border-radius:var(--radius-card); }
:root .portal-card { border-color:var(--border); }
:root .portal-card:focus-visible,:root .story-controls button:focus-visible {
 outline:3px solid var(--primary); outline-offset:3px;
}
@media(max-width:991.98px) {
 :root .site-header:has(.navbar-collapse.show),:root .site-header:has(.navbar-collapse.collapsing),:root[data-theme="dark"] .site-header:has(.navbar-collapse.show),:root[data-theme="dark"] .site-header:has(.navbar-collapse.collapsing) {
  background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none;
 }
}
@media(max-width:767px) {
 :root .story-controls { width:calc(100% - 1.5rem); padding:.6rem; border-radius:var(--radius-card); gap:.65rem; }
 :root .story-choices { justify-content:center; gap:.2rem; }
 :root .story-choices button { padding:.5rem .6rem; font-size:.75rem; }
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more),(forced-colors:active) {
 :root .site-header,:root[data-theme="dark"] .site-header,:root .story-controls {
  background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none;
 }
}

/* Cool tonal palette: crisp actions, soft expressive scenes, neutral readable data. */


:root .button-primary,:root .btn-primary { box-shadow:0 4px 12px rgb(53 89 199 / 14%); }
.story-hero { --hero-ink:#253451; --hero-muted:#53617a; }
.story-all { --hero-bg:#f0f3ff; --scene:#d7e1ff; --scene-accent:#3559c7; }
.story-parents { --hero-bg:#f3effb; --scene:#e0d5f3; --scene-accent:#7959a9; }
.story-teachers { --hero-bg:#edf7f5; --scene:#cce9e2; --scene-accent:#126568; }
.story-institutions { --hero-bg:#edf3fc; --scene:#d0e1f7; --scene-accent:#3b64ab; }
.story-children { --hero-bg:#fff3ef; --scene:#f6d8ca; --scene-accent:#a6563a; }
.story-hero,.story-hero[data-active='all'] { --hero-bg:#f0f3ff; }
.story-hero[data-active='parents'] { --hero-bg:#f3effb; }
.story-hero[data-active='teachers'] { --hero-bg:#edf7f5; }
.story-hero[data-active='institutions'] { --hero-bg:#edf3fc; }
.story-hero[data-active='children'] { --hero-bg:#fff3ef; }
:root[data-theme='dark'] .story-hero,:root[data-theme='dark'] .story-slide {
 --hero-ink:#f1f3fb; --hero-muted:#c7cedf; --hero-bg:#242c42;
}
:root[data-theme='dark'] .story-parents { --hero-bg:#312a43; }
:root[data-theme='dark'] .story-teachers { --hero-bg:#203936; }
:root[data-theme='dark'] .story-institutions { --hero-bg:#23334a; }
:root[data-theme='dark'] .story-children { --hero-bg:#3d2e2b; }
:root .story-actions .button { background:var(--primary);color:var(--on-primary);border-color:var(--primary); }
:root .story-actions .button:hover { background:var(--primary-hover);border-color:var(--primary-hover); }
.story-sticker,.story-device { color:#253451; }
.scene-icon { background:#e8edff;color:#2946a3; }
.scene-chart i { background:#d7e1ff; }
.scene-chart i:nth-child(2n) { background:#3559c7; }

/* Expanded mobile settings are an inline panel; no floating shadow around the menu. */
@media(max-width:991.98px) {
 :root .app-dropdown,:root[data-theme="dark"] .app-dropdown { box-shadow:none; filter:none; }
}

/* Original warm orange illustration palette. */
:root:not([data-theme="dark"]) .story-hero { --hero-bg:#fff4e9; --hero-ink:#493b3c; --hero-muted:#695a56; }
.story-all { --hero-bg:#fff4e9; --scene:#ffd5b6; --scene-accent:#b65329; }
.story-parents { --hero-bg:#fff7ed; --scene:#ffe0bf; --scene-accent:#a5572b; }
.story-institutions { --hero-bg:#fff3eb; --scene:#ffd6c1; --scene-accent:#a95434; }

/* Institution workspace: stable navigation, separate from the public landing page. */
.institution-workspace{display:grid;grid-template-columns:230px minmax(0,1fr);gap:32px;align-items:start}
.workspace-content{min-width:0}.workspace-content .admin-title{font-weight:600;font-size:clamp(1.65rem,2.5vw,2.25rem);line-height:1.2;letter-spacing:0}
.workspace-content .card{box-shadow:none}.workspace-content .list-group-item{padding:14px 16px}
@media(max-width:900px){.institution-workspace{grid-template-columns:1fr;gap:20px}}

/* Public synthetic demo portraits; real child records never use this atlas. */
.demo-child-portrait{display:inline-block;width:42px;height:42px;flex:none;border-radius:50%;margin-inline-end:10px;vertical-align:middle;position:relative;overflow:hidden;background-size:1000% 1000%;background-repeat:no-repeat;background-color:#fff8ed;border:1px solid #e1d9d0}

/* Shared date and month picker, matching the workspace theme. */
.flatpickr-calendar{width:326px;max-width:calc(100vw - 16px);font-family:inherit;border:1px solid #e1d9d0;border-radius:var(--radius-card);box-shadow:0 12px 36px #433c5524;padding:8px;background:#fffdf9}
.flatpickr-innerContainer,.flatpickr-rContainer,.flatpickr-days{width:100%;}
.flatpickr-calendar .dayContainer{width:100%;min-width:0;max-width:none;}
.flatpickr-day{border-radius:var(--radius-control)}
.flatpickr-day.selected,.flatpickr-day.selected:hover,.flatpickr-monthSelect-month.selected{background:#433c55;border-color:#433c55;color:#fff8ed}
.flatpickr-monthSelect-month{border-radius:var(--radius-control)}
.flatpickr-day.today{border-color:#ff7c67}
.flatpickr-day:hover,.flatpickr-monthSelect-month:hover{background:#fff0e5;border-color:#fff0e5}
.flatpickr-input.form-control[readonly]{cursor:pointer;background-color:var(--bs-body-bg,#fff)}
[data-theme="dark"] .flatpickr-calendar,[data-theme="dark"] .flatpickr-months .flatpickr-month,[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months{background:#27232e;color:#fff8ed}
[data-theme="dark"] .flatpickr-day,[data-theme="dark"] .flatpickr-weekday,[data-theme="dark"] .flatpickr-monthSelect-month{color:#fff8ed}
[data-theme="dark"] .flatpickr-day.flatpickr-disabled,[data-theme="dark"] .flatpickr-monthSelect-month.flatpickr-disabled{color:#827b88}
[data-theme="dark"] .flatpickr-day:hover,[data-theme="dark"] .flatpickr-monthSelect-month:hover{background:#433c55;border-color:#433c55}
[data-theme="dark"] .flatpickr-prev-month svg,[data-theme="dark"] .flatpickr-next-month svg{fill:#fff8ed}
:root .button,:root .button:hover,:root[data-theme="dark"] .button,:root[data-theme="dark"] .button:hover,:root .btn,:root .admin-page .btn,
:root .admin-page .form-control,:root .admin-page .form-select,:root .form-control,:root .form-select,
:root .top-navbar .nav-link.nav-menu-link,:root .settings-toggle,:root .dropdown-setting-grid button,:root .app-version{border-radius:var(--radius-control)}
:root .card,:root .alert,:root .app-dropdown,:root .pwa-prompt,:root .feature-card,:root .release-card,:root .cta-section,:root .flatpickr-calendar{border-radius:var(--radius-card)}
:root .story-choices button,:root .flatpickr-day,:root .flatpickr-monthSelect-month{border-radius:var(--radius-control)}
.workspace-content{margin-top:0;padding-top:0}
.workspace-content>.workspace-demo:first-child{margin-top:0}


/* Compact application spacing keeps records in view without shrinking text. */
.admin-page main { padding-block:1rem; }
.institution-workspace { gap:1.25rem; }
.workspace-content .admin-title { font-size:clamp(1.5rem,2.2vw,1.9rem); }
:root .admin-page .card-body { padding:1rem; }
.admin-page .table td,.admin-page .table th { padding-block:.5rem; }
.admin-page .list-group-item,.workspace-content .list-group-item { padding:8px 12px; }
:root .admin-page .btn { padding:.4rem .75rem; }
:root .admin-page .form-control,:root .admin-page .form-select { padding:.4rem .75rem;min-height:38px; }
:root .admin-page .form-select { padding-right:2.25rem; }
.admin-page .form-label { margin-bottom:.25rem; }
.admin-page .alert { padding:.65rem .85rem;margin-bottom:1rem; }
.admin-page main .mb-4 { margin-bottom:1rem!important; }
.admin-page main .mb-3 { margin-bottom:.75rem!important; }
.admin-page main .g-4 { --bs-gutter-y:1rem;--bs-gutter-x:1rem; }
@media(pointer:coarse) {
:root .admin-page .btn,:root .admin-page .form-control,:root .admin-page .form-select{ min-height:44px; }
}

/* Equal space above and below the footer's brand, copyright and version row. */
.site-footer { display:block;min-height:0;padding:0; }
.footer-main { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;padding-block:1rem; }
.footer-main>* { margin-block:0; }
.footer-legal { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.25rem 1rem;padding-block:.5rem max(.5rem,env(safe-area-inset-bottom));align-items:stretch; }
.footer-legal a {grid-column:span 2;justify-content:center;text-align:center;min-width:0;overflow-wrap:anywhere;}
.footer-legal a:nth-child(-n+2) {grid-column:span 3;}
@media(min-width:1200px) {
 .footer-legal {grid-template-columns:repeat(5,minmax(0,1fr));}
 .footer-legal a,.footer-legal a:nth-child(-n+2) {grid-column:auto;}
}
@media(min-width:1024px) {
 .footer-main {display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);}
 .footer-main>.footer-brand {justify-self:start;}
 .footer-main>span {text-align:center;}
 .footer-main>.app-version {justify-self:end;}
}
@media(max-width:1023.98px) {
 .footer-main {flex-direction:column;justify-content:center;text-align:center;}
}

/* Keep settings on the first navbar row, including when navigation is collapsed. */
.top-navbar .navbar-settings { flex: 0 0 auto; margin-left: .5rem; }
.top-navbar .navbar-settings > .settings-toggle { min-width: 44px; min-height: 44px; }
.top-navbar .navbar-settings > .app-dropdown {
    position: absolute;
    right: 0;
    left: auto;
    max-width: calc(100vw - 2rem);
    max-height: calc(100dvh - 90px);
    overflow-y: auto;
}
@media (max-width: 991.98px) {
    .top-navbar .navbar-brand { margin-right: auto; }
    .top-navbar .navbar-toggler { margin-left: .5rem; }
    .top-navbar .navbar-settings { order: 2; }
}

/* Anchor the popup to its trigger, not the full-width navigation bar. */
.top-navbar { position: relative; }
.top-navbar .navbar-settings { position: relative; }
.top-navbar .navbar-settings > .app-dropdown {
    top: calc(100% + .5rem);
    right: 0;
    margin: 0;
    transform: none;
}
.settings-item-icon { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; vertical-align: -.2em; margin-right: .45rem; }
.app-dropdown .dropdown-header, .app-dropdown .dropdown-item { display: flex; align-items: center; }
.app-dropdown .dropdown-item[hidden] { display: none; }
.theme-grid button .settings-item-icon { display: block; margin: 0 auto .25rem; }
@media (min-width: 992px) {
    .top-navbar .navbar-collapse { flex-grow: 0; margin-left: auto; }
    .top-navbar .account-indicator { margin-left: .75rem; margin-right: 0; }
}
@media (max-width: 991.98px) {
    .top-navbar .account-indicator { order: 3; flex-basis: auto; margin: .5rem 0 0 auto; }
    .top-navbar .navbar-collapse { order: 4; }
}
@media (max-width: 575px) {
    .top-navbar .account-indicator { max-width: 100%; }
}

.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: .8rem; align-items: stretch; }
.team-card { min-width: 0; padding: .9rem; display: flex; gap: .75rem; }
.team-card-header { display: flex; align-items: center; gap: .7rem; }
.team-avatar { width: 64px; height: 64px; flex: 0 0 64px; object-fit: cover; border-radius: 50%; }
.team-avatar-placeholder { display: grid; place-items: center; font-size: 1.5rem; background: var(--surface); color: var(--muted); border: 1px solid var(--line); }
.team-identity { min-width: 0; overflow-wrap: anywhere; }
.team-identity h2 { font-size: .95rem; margin: 0 0 .2rem; line-height: 1.3; }
.team-identity p { font-size: .8rem; margin: 0; color: var(--muted); }
.team-identity small { display: block; font-size: .7rem; color: var(--muted); margin-top: .2rem; }
.team-responsibilities { margin-top: auto; }
.team-responsibilities legend { font-size: .8rem; font-weight: 600; margin-bottom: .5rem; }
.team-checks { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem .7rem; font-size: .82rem; }
.team-checks .form-check { min-width: 0; }
.team-revoke { margin: 0; padding-top: .6rem; border-top: 1px solid var(--line); }
.team-card .btn { min-height: 40px; font-size: .8rem; padding: .4rem .7rem; }

.team-add summary { cursor: pointer; font-weight: 600; }
.team-add[open] summary { margin-bottom: .75rem; }

.team-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.team-actions .team-revoke { padding: 0; border: 0; }

.profile-form { max-width: 640px; gap: .35rem; }
.profile-heading { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; overflow-wrap: anywhere; }
.profile-heading h2 { font-size: 1.2rem; }
.profile-photo { object-fit: cover; border-radius: 50%; }
.top-navbar .account-indicator strong { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Shared readable heading weight follows the homepage rather than heavy display text. */
.admin-page h1, .admin-page h2, .admin-page h3 { font-family: var(--font-ui); font-weight: 500; letter-spacing: normal; line-height: 1.25; font-synthesis: none; }
.account-avatar { width: 32px; height: 32px; flex: 0 0 32px; object-fit: cover; border-radius: 50%; }
.account-avatar-initial { display: grid; place-items: center; background: var(--primary-subtle); color: var(--ink); font-weight: 600; text-transform: uppercase; }
.profile-readonly { margin: .3rem 0 0; padding: .8rem; border-radius:var(--radius-small); background: var(--surface-secondary); }
.profile-readonly dt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem; font-weight: 500; }
.profile-readonly dd { margin: .4rem 0 0; overflow-wrap: anywhere; user-select: text; }
.profile-readonly-label { display: inline-flex; align-items: center; color: var(--muted); font-size: .75rem; }
.form-control[readonly]:not(.flatpickr-input):not(.date-picker-control) { background: var(--surface-secondary); border-style: dashed; color: var(--muted); cursor: default; }

.group-list-heading,.group-list-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.group-list-heading { flex-wrap:wrap; margin-bottom:1rem; }
.group-list { list-style:none; padding:0; margin:0; }
.group-list-row { padding:.8rem 0; border-top:1px solid var(--border); }
.group-list-identity { display:flex; flex-direction:column; gap:.15rem; min-width:0; overflow-wrap:anywhere; }
.group-list-identity span { font-size:.85rem; color:var(--muted); }
.group-list-actions,.group-dialog-actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.group-list-actions { flex-shrink:0; }
.group-dialog { width:min(480px,calc(100% - 2rem)); padding:1.25rem; border:1px solid var(--border); border-radius:var(--radius-control); background:var(--surface); color:var(--ink); max-height:calc(100dvh - 2rem); overflow:auto; }
.group-dialog::backdrop { background:rgb(0 0 0 / 45%); }
.group-dialog-actions { justify-content:flex-end; margin-top:1.25rem; }
@media(max-width:480px) { .group-list-row { align-items:flex-start; flex-wrap:wrap; gap:.6rem; } .group-list-actions .btn { min-height:44px; } }

.report-filter-controls { display:flex; gap:.75rem; flex-wrap:wrap; }
.report-filter-controls label { flex:1 1 220px; }
.record-savebar { position:sticky; bottom:0; z-index:3; display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:.5rem; padding:.65rem; border:1px solid var(--border); background:var(--surface); border-radius:var(--radius-small); box-shadow:0 -2px 8px rgb(0 0 0 / 5%); }
.record-savebar [data-unsaved-status] { margin-right:auto; }
.team-permission-editor > summary,.menu-day > summary { padding:.35rem 0; cursor:pointer; font-weight:600; }
.team-permission-editor[open] > summary { margin-bottom:.8rem; }

.date-picker-control[readonly] { cursor:pointer; }

/* Authenticated design system. Edit this section together: palette, rhythm, controls and surfaces. */
:root .admin-page {

 font-family:var(--font-ui);font-size:.9375rem;line-height:1.5;
 background:var(--background);
}

:root .admin-page .row {--bs-gutter-x:var(--space-4);--bs-gutter-y:var(--space-4);}
:root .admin-page main :is(.g-3,.g-4) {--bs-gutter-x:var(--space-4);--bs-gutter-y:var(--space-4);}
:root .admin-page main .gap-2 {gap:var(--space-2)!important;}
:root .admin-page main .gap-3 {gap:var(--space-4)!important;}
:root .admin-page main .mb-3 {margin-bottom:var(--space-4)!important;}
:root .admin-page main .mb-4 {margin-bottom:var(--space-5)!important;}
:root .admin-page main .mt-3 {margin-top:var(--space-4)!important;}
:root .admin-page .institution-workspace {gap:var(--space-5);}
:root .admin-page .card h2,:root .admin-page .card h3 {margin-bottom:var(--space-2);}
:root .admin-page .card > p {margin-bottom:var(--space-4);}
:root .admin-page .card > :last-child {margin-bottom:0;}
:root .admin-page form > fieldset + fieldset {margin-top:var(--space-5);}
:root .admin-page :is(.group-dialog-actions,.group-list-actions) {gap:var(--space-2);}
:root .admin-page h1 {font-size:clamp(1.35rem,2vw,1.75rem);font-weight:600;letter-spacing:0;}
:root .admin-page h2,:root .admin-page h3 {font-weight:600;letter-spacing:0;}
:root .admin-page .card {border:1px solid color-mix(in srgb,var(--border) 65%,transparent);box-shadow:var(--panel-shadow);background:var(--surface);}
:root .admin-page .card-body {padding:var(--space-5);}
:root .admin-page .form-label {font-size:.8rem;font-weight:500;color:var(--text-secondary);line-height:1.4;}
:root .admin-page .form-label:has(> :is(.form-control,.form-select)) {
 display:block;position:relative;padding:.45rem .8rem .2rem;margin-bottom:var(--space-3);
 background:var(--field-fill);border:1px solid var(--field-edge);border-radius:var(--radius-control);
 transition:background-color .15s,border-color .15s,box-shadow .15s;
}
:root .admin-page .form-label:has(> :is(.form-control,.form-select)):hover {border-color:var(--text-muted);}
:root .admin-page .form-label:has(> :is(.form-control,.form-select)):focus-within {
 border-color:var(--primary);background:var(--surface);color:var(--primary-text);
 box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent);
}
:root .admin-page .form-control,:root .admin-page .form-select {
 background-color:var(--field-fill);border:1px solid var(--field-edge);border-radius:var(--radius-control);
 color:var(--ink);font:inherit;font-size:.9375rem;line-height:1.5;min-height:42px;padding:.55rem .75rem;
 box-shadow:none;transition:background-color .15s,border-color .15s,box-shadow .15s;
}
:root .admin-page .form-control:focus,:root .admin-page .form-select:focus {border-color:var(--primary);background-color:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent);}
:root .admin-page .form-label > :is(.form-control,.form-select) {
 background-color:transparent;border:0;border-radius:0;box-shadow:none;padding:.2rem 0 .35rem;min-height:30px;
 font-size:.9375rem;font-weight:400;color:var(--ink);
}
:root .admin-page .form-select,:root .admin-page .form-label > .form-select {padding-right:1.8rem;background-position:right .2rem center;}
:root .admin-page .form-label > :is(.form-control,.form-select):focus {background-color:transparent;border:0;box-shadow:none;outline:none;}
:root .admin-page textarea.form-control {resize:vertical;min-height:90px;}
:root .admin-page .form-control::placeholder {color:var(--text-muted);opacity:1;}
:root .admin-page .form-label:has(> :user-invalid) {border-color:var(--error);box-shadow:0 0 0 2px color-mix(in srgb,var(--error) 15%,transparent);}
:root .admin-page .form-label:has(> :disabled) {background:var(--surface-secondary);border-style:dashed;}
:root .admin-page :is(.form-control,.form-select):disabled {color:var(--text-muted);cursor:not-allowed;opacity:1;}
:root .admin-page .form-label:has(> input[readonly]):not(:has(.date-picker-control)) {border-style:dashed;background:var(--surface-secondary);}
:root .admin-page .form-control[type=file] {padding-top:.4rem;}
:root .admin-page .form-control::file-selector-button {border:0;border-radius:var(--radius-small);margin:0 .75rem .25rem 0;padding:.35rem .6rem;background:var(--primary-subtle);color:var(--primary-text);font:inherit;}
:root .admin-page fieldset > legend {font-size:.8rem;font-weight:600;color:var(--text-secondary);margin-bottom:var(--space-3);}
:root .admin-page fieldset.border {border-color:var(--border)!important;background:var(--surface-secondary);border-radius:var(--radius-control)!important;}
:root .admin-page .form-check {padding-top:.45rem;padding-bottom:.45rem;min-height:40px;}
:root .admin-page .form-check-input {width:1.1em;height:1.1em;margin-top:.18em;border-color:var(--text-muted);box-shadow:none;cursor:pointer;accent-color:var(--primary);}
:root .admin-page .form-check-input:checked {background-color:var(--primary);border-color:var(--primary);}
:root .admin-page .form-check-input:focus-visible {outline:3px solid color-mix(in srgb,var(--primary) 40%,transparent);outline-offset:3px;}
:root .admin-page .form-check-label {cursor:pointer;font-weight:400;}
:root .admin-page .team-checks .form-check {background:var(--field-fill);border:1px solid var(--border);padding:.6rem .65rem .6rem 2rem;border-radius:var(--radius-control);}
:root .admin-page .team-checks .form-check:has(:checked) {border-color:var(--primary);background:var(--primary-subtle);}
:root .admin-page .btn {border-radius:var(--radius-control);min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:.5rem .9rem;font-size:.875rem;font-weight:500;line-height:1.4;box-shadow:none;transition:background-color .15s,box-shadow .15s;}
:root .admin-page .btn-primary {box-shadow:0 2px 5px color-mix(in srgb,var(--primary) 20%,transparent);}
:root .admin-page .btn-outline-primary {background:var(--primary-subtle);border-color:transparent;color:var(--primary-text);}
:root .admin-page .btn-outline-primary:hover {background:var(--primary);color:var(--on-primary);}
:root .admin-page .btn-outline-secondary {background:var(--primary-subtle);border-color:transparent;color:var(--primary-text);}
:root .admin-page .btn:not(.btn-danger):not(.btn-outline-danger):not(.btn-link):not(.btn-primary):not(.active) {
 background:var(--surface);color:var(--text-primary);border:1px solid var(--border);box-shadow:0 1px 1px rgb(0 0 0 / 3%);
 --bs-btn-disabled-bg:var(--surface-secondary);--bs-btn-disabled-color:var(--text-muted);
}
:root .admin-page .btn:not(.btn-danger):not(.btn-outline-danger):not(.btn-link):not(.btn-primary):not(.active):hover {background:var(--surface-secondary);color:var(--text-primary);}
:root .admin-page .btn.btn-primary,:root .admin-page .btn.active:not(.btn-danger) {background:var(--primary);color:var(--on-primary);border-color:transparent;}
:root .admin-page .btn.btn-primary:hover,:root .admin-page .btn.active:hover {background:var(--primary-hover);color:var(--on-primary);}
:root .admin-page .btn:is(:disabled,.disabled) {background:var(--surface-secondary)!important;color:var(--text-muted)!important;opacity:.7;cursor:not-allowed;box-shadow:none;}
:root .admin-page .btn-outline-danger {color:var(--error-text);border-color:color-mix(in srgb,var(--error) 45%,var(--surface));background:var(--error-subtle);}
:root .admin-page .btn-outline-danger:hover {background:var(--error);color:var(--on-primary);}
:root .admin-page .button {background:var(--surface);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius-control);box-shadow:none;}
:root .admin-page .button-primary {background:var(--primary);color:var(--on-primary);}
:root .admin-page .alert-info {background:var(--surface-secondary);border-color:var(--border);color:var(--text-secondary);}
:root .admin-page .admin-tabs {padding:var(--space-2);border:1px solid var(--border);border-radius:var(--radius-control);background:var(--surface);}
:root .admin-page .admin-tabs .btn:not(.active) {background:transparent;}
:root .admin-page .form-check.setting-toggle {display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);margin:0!important;border-bottom:1px solid var(--border);min-height:52px;}
:root .admin-page .setting-toggle:first-of-type {border-top:1px solid var(--border);}
:root .admin-page .setting-toggle > span {flex:1;}
:root .admin-page .setting-toggle .form-check-input {float:none;order:2;flex:none;width:36px;height:22px;margin:0;border:1px solid var(--text-muted);border-radius:99px;background:var(--surface-secondary);background-image:none;position:relative;}
:root .admin-page .setting-toggle .form-check-input::before {content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--text-secondary);transition:transform .15s;}
:root .admin-page .setting-toggle .form-check-input:checked {background:var(--primary);border-color:var(--primary);}
:root .admin-page .setting-toggle .form-check-input:checked::before {transform:translateX(14px);background:var(--on-primary);}
:root .admin-page .team-checks:has(.setting-toggle) {display:block;border-radius:var(--radius-card);overflow:visible;}
:root .admin-page .team-checks .setting-toggle {border-radius:0;background:transparent;border-inline:0;}
:root .admin-page .flatpickr-calendar {background:var(--surface);color:var(--ink);border-color:var(--border);}
:root .admin-page .flatpickr-months .flatpickr-month,:root .admin-page .flatpickr-current-month .flatpickr-monthDropdown-months {background:var(--surface);color:var(--ink);}
:root .admin-page .flatpickr-day,:root .admin-page .flatpickr-weekday,:root .admin-page .flatpickr-monthSelect-month {color:var(--ink);}
:root .admin-page .flatpickr-day:hover,:root .admin-page .flatpickr-monthSelect-month:hover {background:var(--primary-subtle);border-color:var(--primary-subtle);}
:root .admin-page .flatpickr-day.flatpickr-disabled,:root .admin-page .flatpickr-monthSelect-month.flatpickr-disabled {color:var(--text-muted);opacity:.6;}
:root .admin-page .flatpickr-day.selected,:root .admin-page .flatpickr-monthSelect-month.selected {background:var(--primary);border-color:var(--primary);color:var(--on-primary);}
:root .admin-page .btn:focus-visible {outline:3px solid var(--primary);outline-offset:3px;}
:root .admin-page details > summary {list-style:none;display:flex;align-items:center;gap:.65rem;font-size:.9rem;font-weight:500;cursor:pointer;padding:.4rem 0;}
:root .admin-page details > summary::-webkit-details-marker {display:none;}
:root .admin-page details > summary::after {content:"";margin-left:auto;width:16px;height:16px;flex:none;background:currentColor;mask:var(--chevron) center/16px no-repeat;transform:none;transition:transform .15s;}
:root .admin-page details[open] > summary::after {transform:rotate(180deg);}
:root .admin-page details[open] > summary {margin-bottom:.75rem;}
.workspace-icon {width:19px;height:19px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
:root .admin-page .workspace-demo {font-size:.8rem;background:var(--surface-secondary);border:1px solid var(--border);color:var(--text-secondary);border-radius:var(--radius-card);}
:root .admin-page .table {--bs-table-bg:transparent;--bs-table-color:var(--ink);border-color:var(--border);font-size:.875rem;}
:root .admin-page .table thead th {font-size:.75rem;color:var(--text-secondary);font-weight:600;background:var(--surface-secondary);padding-block:.65rem;}
:root .admin-page .table tbody tr:hover {background:color-mix(in srgb,var(--primary-subtle) 35%,var(--surface));}
:root .admin-page .table a {text-decoration:none;}
:root .admin-page .table a:hover {text-decoration:underline;}
:root .admin-page .group-dialog {border-radius:var(--radius-control);padding:1.25rem;box-shadow:0 24px 80px rgb(0 0 0 / 22%);}
:root .admin-page .group-dialog::backdrop {background:rgb(12 18 35 / 30%);backdrop-filter:blur(3px);}
:root .admin-page .record-savebar {border-radius:var(--radius-control);background:color-mix(in srgb,var(--surface) 93%,transparent);backdrop-filter:blur(16px);box-shadow:0 -2px 12px rgb(0 0 0 / 5%);}
:root .admin-page dl.row > dt {font-size:.8rem;font-weight:500;color:var(--text-secondary);}
:root .admin-page dl.row > dd {font-size:.9rem;padding-bottom:.45rem;}
@media(max-width:900px) {
 :root .admin-page .card-body {padding:var(--space-4);}
:root .admin-page .btn{min-height:44px;}
 :root .admin-page .form-control,:root .admin-page .form-select {font-size:1rem;}
 :root .admin-page .form-label > :is(.form-control,.form-select) {font-size:1rem;min-height:32px;}
}
@media(prefers-reduced-motion:reduce) { :root .admin-page *, :root .admin-page *::after {transition:none!important;scroll-behavior:auto!important;} }
@media(prefers-reduced-transparency:reduce) { :root .admin-page .record-savebar {background:var(--surface);backdrop-filter:none;} }
@media(forced-colors:active) { :root .admin-page .form-label:has(> :is(.form-control,.form-select)) {border:1px solid CanvasText;} :root .admin-page .form-label:focus-within {outline:2px solid Highlight;} }

/* Select arrows align to the complete labeled control, not only its value line. */
:root .admin-page .form-label:has(> .form-select) {padding-right:2.4rem;}
:root .admin-page .form-label > .form-select {background-image:none;padding-right:0;}
:root .admin-page .form-label:has(> .form-select)::after {content:"";position:absolute;right:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;background:var(--text-secondary);mask:var(--chevron) center/16px no-repeat;pointer-events:none;}
:root .admin-page details > summary {min-height:40px;}
:root .admin-page .table a {color:var(--text-primary)!important;}
:root .admin-page .report-toolbar {display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-control);margin-bottom:16px;}
:root .admin-page .report-toolbar form {margin:0!important;}
:root .admin-page .report-toolbar .form-label {margin:0;min-width:180px;}
:root .admin-page .report-toolbar > .btn {margin-left:auto;}
@media(max-width:600px) {:root .admin-page .report-toolbar > .btn {margin-left:0;flex:1;} :root .admin-page .report-toolbar form,:root .admin-page .report-toolbar .form-label {flex:1;}}

@media(max-width:900px) {
 :root .admin-page .institution-workspace {gap:16px;}
}

/* One account control keeps profile and settings together on every screen. */
:root .top-navbar .navbar-settings:has(.account-menu-toggle) {margin-left:auto;max-width:calc(100% - 64px);}
:root .top-navbar .account-menu-toggle {display:inline-flex;align-items:center;gap:8px;margin:0;padding:7px 10px;max-width:100%;border:1px solid var(--border);border-radius:var(--radius-control);background:var(--surface-secondary);color:var(--ink);text-align:left;}
:root .top-navbar .account-menu-toggle .account-label {min-width:0;display:grid;grid-template-rows:auto auto;gap:0;}
:root .top-navbar .account-menu-toggle small,:root .top-navbar .account-menu-toggle strong {display:block;margin:0;line-height:1.3;}
:root .top-navbar .account-menu-toggle strong {max-width:28ch;font-size:.8rem;}
:root .top-navbar .account-menu-toggle small {font-size:.7rem;}
:root .top-navbar .account-menu-toggle .settings-gear {flex:none;margin-left:4px;}
:root .top-navbar .account-menu-toggle::after {flex:none;margin:0;align-self:center;}
@media(max-width:575px) {
 :root .top-navbar:has(.account-menu-toggle) .brand > span {display:none;}
 :root .top-navbar:has(.account-menu-toggle) .navbar-brand {margin-right:8px;}
 :root .top-navbar .account-menu-toggle strong {max-width:min(28ch,calc(100vw - 190px));}
}

.daily-group {margin-block:20px;}
.daily-group > h2 {display:flex;align-items:center;gap:8px;font-size:1.1rem;}
.daily-group-count {font-size:.8rem;color:var(--text-secondary);background:var(--surface-secondary);border-radius:var(--radius-small);padding:3px 7px;}
.daily-child {background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-control);margin-top:10px;padding:16px;}
.daily-child-footer {display:flex;align-items:center;flex-wrap:wrap;gap:12px;justify-content:space-between;}
.daily-child-heading {display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;}
.daily-child-heading a {display:flex;align-items:center;justify-content:flex-start;align-self:stretch;min-width:0;overflow-wrap:anywhere;text-align:left;color:var(--text-primary)!important;text-decoration:none;}
.daily-child-heading .demo-child-portrait {width:40px;height:40px;flex:0 0 40px;}
.daily-controls {display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:12px;margin-top:16px;}
.daily-control {min-width:0;margin:0;border:0;padding:0;}
.daily-control > span,.daily-control > legend {font-size:.75rem!important;font-weight:500!important;color:var(--text-secondary);margin:0 0 6px!important;float:none;}
.daily-control > small {font-size:.7rem;color:var(--text-muted);}
.quick-segments {display:flex;padding:3px;background:var(--surface-secondary);border:1px solid var(--border);border-radius:var(--radius-control);gap:2px;}
.quick-segments button {flex:1;min-width:0;min-height:38px;border:1px solid transparent;border-radius:var(--radius-small);background:transparent;color:var(--text-secondary);font:inherit;font-size:.78rem;padding:4px 6px;}
.quick-segments button[aria-pressed=true] {background:var(--surface);color:var(--primary-text);border-color:var(--border);box-shadow:0 1px 2px rgb(0 0 0 / 8%);font-weight:600;}
.quick-segments button:focus-visible,.presence-switch:focus-visible {outline:2px solid var(--primary);outline-offset:2px;}
.attendance-quick {display:flex;align-items:center;gap:10px;min-height:46px;font-size:.85rem;}
.presence-switch {width:44px;height:26px;border:1px solid var(--text-muted);border-radius:20px;padding:3px;background:var(--surface-secondary);flex:none;}
.presence-switch > span {display:block;width:18px;height:18px;background:var(--text-secondary);border-radius:50%;}
.presence-switch[aria-checked=true] {background:var(--primary);border-color:var(--primary);}
.presence-switch[aria-checked=true] > span {transform:translateX(18px);background:var(--on-primary);}
.daily-child-footer {border-top:1px solid var(--border);padding-top:10px;margin-top:12px;font-size:.8rem;}
.daily-child-footer [role=status] {flex:1;}
.daily-child [aria-busy=true] button {opacity:.6;cursor:wait;}
@media(max-width:600px) {.daily-controls {grid-template-columns:1fr;}.quick-segments button {min-height:44px;}.daily-child {padding:12px;}}


/* Shared controls: one geometry, persistent labels, generous interaction targets. */
:root .admin-page :is(.card,.notice-card,.daily-child,.daily-modebar,.report-toolbar,.record-savebar,.menu-meal,.notice-audience,.group-dialog,.alert) {border-radius:var(--radius-card);box-shadow:var(--panel-shadow);}
:root .admin-page :is(.btn,.button,.quick-segments button,.menu-remove-dish,.day-arrow,.daily-details-arrow,.dropdown-item,.dropdown-setting-grid button) {min-width:48px;min-height:48px;border-radius:var(--radius-control);}
:root .admin-page :is(.day-arrow,.daily-details-arrow,.menu-remove-dish) {width:48px;height:48px;}
:root .admin-page :is(.form-control,.form-select) {min-height:48px;font-size:1rem;}
:root .admin-page .form-label:has(> :is(.form-control,.form-select)) {padding:8px 12px 0;border-radius:var(--radius-control);background:var(--surface);}
:root .admin-page .form-label>.form-control,:root .admin-page .form-label>.form-select {min-height:48px;padding-block:8px;}
:root .admin-page .form-label:has(> input[readonly]):not(:has(.date-picker-control)) {background:var(--surface-secondary);}
:root .admin-page :is(details>summary,.form-check,.notice-audience label) {min-height:48px;}
:root .admin-page .form-check {display:flex;align-items:center;gap:10px;padding-left:0;}
:root .admin-page .form-check .form-check-input {float:none;margin:0;flex:none;}
:root .admin-page .form-check-label {display:flex;align-items:center;min-height:48px;flex:1;}
:root .admin-page .card-body {padding:16px;}
:root .admin-page .daily-child {padding:16px 72px 16px 16px;border:1px solid var(--border);}
:root .admin-page .quick-segments {gap:4px;border-radius:var(--radius-card);padding:4px;}
:root .admin-page .quick-segments button {padding:8px;}
:root .admin-page .daily-modebar {overflow:hidden;}
:root .admin-page .daily-modebar>.quick-segments {border-radius:0;padding:6px;}
:root .admin-page .daily-meal-options {border-radius:0;padding:12px!important;}
:root .admin-page .menu-dish-row {grid-template-columns:minmax(0,1fr) minmax(100px,.35fr) 48px;}
:root .admin-page .flatpickr-calendar {border-radius:var(--radius-card);box-shadow:var(--shadow);}
:root .admin-page .flatpickr-prev-month,:root .admin-page .flatpickr-next-month {min-width:48px;min-height:48px;display:grid;place-items:center;}
:root .admin-page .flatpickr-months .flatpickr-month {height:48px;}
:root .admin-page .flatpickr-current-month {padding-top:12px;}
:root .admin-page .rounded,:root .admin-page .rounded-1,:root .admin-page .rounded-2 {border-radius:var(--radius-control)!important;}
:root .admin-page .rounded-3,:root .admin-page .rounded-4,:root .admin-page .rounded-5 {border-radius:var(--radius-card)!important;}
@media(max-width:767.98px) {
 :root .admin-page .daily-child {padding:12px 64px 12px 12px;}
 :root .admin-page .menu-dish-row {grid-template-columns:minmax(0,1fr) 48px;}
 :root .admin-page .menu-dish,:root .admin-page .menu-quantity {grid-column:1;}
 :root .admin-page .menu-remove-dish {grid-column:2;grid-row:1/3;}
}
:root .admin-page .flatpickr-calendar {width:352px;max-width:calc(100vw - 16px);}
:root .admin-page .flatpickr-rContainer,:root .admin-page .flatpickr-days {width:100%;}
:root .admin-page .flatpickr-calendar .dayContainer {width:100%;min-width:0;max-width:none;}
:root .admin-page .flatpickr-day {width:calc(100% / 7);max-width:none;height:48px;line-height:48px;}
:root .admin-page .flatpickr-monthSelect-month {min-height:48px;display:inline-flex;align-items:center;justify-content:center;}
:root .admin-page button {min-height:48px;min-width:48px;}
:root .admin-page .table a {display:inline-flex;align-items:center;min-height:48px;}
:root .admin-page .flatpickr-monthSelect-month {border-radius:var(--radius-control);}

/* Commercial dashboard: the two stacked parts add up to each month's total. */
:root .admin-page .billing-chart {min-width:0;}
:root .admin-page .billing-chart-heading {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;}
:root .admin-page .billing-chart-legend {display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.8rem;color:var(--text-secondary);}
:root .admin-page .billing-chart-legend>span {display:inline-flex;align-items:center;gap:6px;}
:root .admin-page .billing-chart-key {display:inline-block;width:14px;height:14px;border-radius:var(--radius-small);}
:root .admin-page .billing-chart-paid {background:var(--secondary);}
:root .admin-page .billing-chart-expected {background:repeating-linear-gradient(135deg,var(--primary-subtle),var(--primary-subtle) 4px,var(--primary) 4px,var(--primary) 6px);}
:root .admin-page .billing-chart-months {list-style:none;padding:0;margin:0;display:grid;gap:12px;}
:root .admin-page .billing-chart-month {display:grid;grid-template-columns:110px minmax(0,1fr) 110px;gap:12px;align-items:center;font-size:.85rem;}
:root .admin-page .billing-chart-month-name {color:var(--text-secondary);}
:root .admin-page .billing-chart-track {display:flex;height:16px;background:var(--surface-secondary);border-radius:var(--radius-small);overflow:hidden;min-width:0;}
:root .admin-page .billing-chart-track>span {display:block;height:100%;flex-shrink:0;}
:root .admin-page .billing-chart-value {text-align:right;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}
@media(max-width:575.98px) {
 :root .admin-page .billing-chart-month {grid-template-columns:minmax(0,1fr) auto;gap:5px 12px;}
 :root .admin-page .billing-chart-track {grid-column:1/-1;grid-row:2;height:12px;}
 :root .admin-page .billing-chart-value {grid-column:2;grid-row:1;}
}

.commercial-dialog {
  width: min(36rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 3rem);
  overflow: auto;
  padding: 1.25rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
}
.commercial-dialog::backdrop { background: rgb(0 0 0 / .3); }

/* Keep the portrait slot painted while its independent image layer arrives. */
.demo-child-portrait::before {content:"";position:absolute;inset:0;border-radius:inherit;background-image:url('/assets/demo/children-atlas-v2.png');background-size:1000% 1000%;background-position:inherit;background-repeat:no-repeat;}
img:is(.account-avatar,.profile-photo,.team-avatar) {background-color:var(--surface-secondary);object-fit:cover;}

/* Google brand button: official multicolor asset, fixed geometry and neutral surface. */
.admin-page .google-signin { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px; background: #fff; color: #1f1f1f; border: 1px solid #747775; font-weight: 500; }
.admin-page .google-signin img { flex: 0 0 20px; width: 20px; height: 20px; object-fit: contain; }
.admin-page .google-signin:hover { background: #f2f2f2; color: #1f1f1f; }

/* Both sign-in methods share one compact surface without nested forms. */
.login-card { width: 100%; max-width: 460px; }
.login-card-form { display: flex; flex-direction: column; }
.login-card-divider { width: 100%; margin: 1.25rem 0; border: 0; border-top: 1px solid var(--bs-border-color); opacity: 1; }

/* Shared identity portraits: photos and initials occupy the same circular frame. */
.person-avatar-32 {--avatar-size:32px;}
.person-avatar-36 {--avatar-size:36px;}
.person-avatar-40 {--avatar-size:40px;}
.person-avatar-42 {--avatar-size:42px;}
.person-avatar-48 {--avatar-size:48px;}
.person-avatar-64 {--avatar-size:64px;}
.person-avatar-80 {--avatar-size:80px;}
.person-avatar-96 {--avatar-size:96px;}
.person-avatar {position:relative;display:inline-grid;place-items:center;width:var(--avatar-size);height:var(--avatar-size);flex:0 0 var(--avatar-size);aspect-ratio:1;border-radius:50%;overflow:hidden;vertical-align:middle;background:var(--primary-subtle);color:var(--ink);font-size:calc(var(--avatar-size)*.4);font-weight:600;line-height:1;isolation:isolate;}
.person-avatar-letter {grid-area:1/1;}
.person-avatar-image {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;background:var(--surface-secondary);}
.person-avatar-image[hidden] {display:none;}
.child-identity-avatar {margin-inline-end:10px;}
.platform-account-identity {display:flex;align-items:flex-start;gap:12px;min-width:0;}
.platform-account-identity>div {min-width:0;}
.daily-child-heading .child-identity-avatar {--avatar-size:40px;}
.parent-child-card .parent-child-avatar {--avatar-size:80px;}
@media(max-width:480px){.parent-child-card .parent-child-avatar {--avatar-size:64px;}}

/* Shared account, institution and commercial action geometry. */
.form-actions, .action-toolbar { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; }
.form-actions { margin-top:var(--space-4); }
.form-actions > .btn, .action-toolbar > .btn { margin:0; }
.sales-detail-list { display:grid; grid-template-columns:minmax(140px,1fr) minmax(0,2fr); gap:.5rem 1rem; }
.sales-detail-list dd { margin:0; overflow-wrap:anywhere; }
.sales-lead-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; border-top:1px solid var(--bs-border-color); }
.admin-scope-notice { padding:1rem; border:1px solid var(--bs-border-color); border-radius:var(--radius-card); }
@media (max-width:575px) { .sales-detail-list { grid-template-columns:1fr; gap:.25rem; } .sales-detail-list dd { margin-bottom:.75rem; } }

/* Search and shared action controls retain alignment when their labels wrap. */
.account-search{display:flex;align-items:stretch;gap:var(--space-2)}
.account-search>.form-control{flex:1;min-width:0}
.account-search>.btn{flex:none}
:root .top-navbar :is(.navbar-toggler,.settings-toggle){min-width:48px;min-height:48px;align-items:center;justify-content:center}
:root .top-navbar .settings-toggle{display:inline-flex}
:root .dropdown-setting-grid button{min-height:48px;font-weight:600}
@media(max-width:480px){.account-search{flex-wrap:wrap}.account-search>.form-control{flex-basis:100%}.account-search>.btn{width:100%}}

@media(max-width:600px){
 .publication-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:var(--space-2)}
 .publication-actions>.btn{width:100%;white-space:normal;min-width:0;font-size:.8rem;display:flex;align-items:center;justify-content:center}
 [data-weekly-menu] .record-savebar{display:block}
 .record-savebar [data-unsaved-status]:not([hidden]){display:block;margin:0 0 8px}
}

@media(max-width:991.98px){
 :root .top-navbar .navbar-toggler{display:inline-flex}
 .top-navbar .navbar-collapse .navbar-nav{align-items:stretch!important;width:100%;gap:4px}
 .top-navbar .navbar-collapse .nav-link{display:flex;align-items:center;min-height:48px;text-align:left;padding:12px}
}

/* Institution-first platform flow: one destination per list row. */
.admin-start,.admin-section-heading {display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;}
.admin-start {display:grid;grid-template-columns:minmax(0,1fr) auto;}
.admin-institution-list {display:grid;}
.admin-institution-row {display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto;align-items:center;gap:var(--space-4);padding:var(--space-4) 0;border-top:1px solid var(--border);}
.admin-institution-row>div {min-width:0;overflow-wrap:anywhere;}
.admin-setup-steps {list-style:none;padding:0;margin-bottom:0;}
.admin-setup-steps li {display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:var(--space-3);align-items:center;border-top:1px solid var(--border);padding:var(--space-4) 0;}
.admin-setup-steps p {margin:0;color:var(--text-muted);}
.admin-step-number {display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--border);border-radius:50%;font-weight:600;}
@media(max-width:575px){.admin-start{grid-template-columns:1fr;}.admin-start>.btn{width:100%;}.admin-institution-row {grid-template-columns:minmax(0,1fr) auto;gap:var(--space-3);}.admin-institution-row>div:nth-child(2){grid-row:2;}.admin-institution-row>.btn{grid-column:2;grid-row:1 / span 2;}.admin-setup-steps li{grid-template-columns:36px minmax(0,1fr);}.admin-setup-steps li>:last-child:not(div){grid-column:2;justify-self:start;}.admin-section-heading>.btn{width:100%;}}

/* Shared billing and contract fields use equal columns without Bootstrap gutters. */
.commercial-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;margin-bottom:16px}
.commercial-form-grid>div{min-width:0}
.commercial-form-wide{grid-column:1/-1}
:root .admin-page .commercial-form-grid .form-label{margin:0;min-height:80px}
:root .admin-page .commercial-form-grid small{display:block;margin-top:6px}
.commercial-form-dates{grid-template-columns:repeat(3,minmax(0,1fr))}
.institution-editor form{margin-top:16px}
.institution-editor .form-actions{margin-top:24px}
@media(max-width:767px){.commercial-form-grid,.commercial-form-dates{grid-template-columns:minmax(0,1fr)}}

.institution-home-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:24px}
.institution-home-grid>.card{min-width:0}
.institution-people-list{list-style:none;margin:0;padding:0}
.institution-people-list li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--border)}
.institution-people-list li:last-child{border-bottom:0}
.institution-people-list li>div{min-width:0;overflow-wrap:anywhere}
.institution-people-list span,.institution-people-list small{display:block;color:var(--text-secondary)}
.institution-people-list .btn{white-space:normal}
#child-parents{scroll-margin-top:100px}
@media(max-width:1000px){.institution-home-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){.institution-people-list li{align-items:start;flex-direction:column}}

/* Activity filters: field containers keep control borders separate from grid gutters. */
.activity-search-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:16px;align-items:start}
:root .admin-page .activity-search-grid .form-label{margin:0;min-height:78px}
.activity-filter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start}
.activity-filter-grid>div{min-width:0}
:root .admin-page .activity-filter-grid .form-label{margin:0;min-height:78px}
:root .admin-page .activity-search-field{margin-bottom:8px}
:root .admin-page{font-weight:400;letter-spacing:.01em}
:root .admin-page :is(.form-label,.form-control,.form-select){letter-spacing:.01em}
:root .admin-page p,:root .admin-page td{line-height:1.6}
:root .admin-page .date-picker-control{padding-right:2rem!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23818b98' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M7 2v6m10-6v6M3 11h18'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .15rem center;font-variant-numeric:tabular-nums;letter-spacing:.025em}
.flatpickr-calendar{font-family:var(--font-ui);letter-spacing:normal;background:var(--surface);color:var(--text-primary);border-color:var(--border)}
.flatpickr-months .flatpickr-month{height:44px;overflow:visible}
.flatpickr-current-month{display:flex;align-items:center;justify-content:center;gap:8px;height:40px;left:12%;width:76%;padding:0;font-size:1rem;font-weight:500}
.flatpickr-current-month .flatpickr-monthDropdown-months{font:inherit;padding:4px;max-width:calc(100% - 6ch)}
.flatpickr-current-month .numInputWrapper{width:6ch;flex:none}
.flatpickr-current-month input.cur-year{font:inherit;padding-left:4px;padding-right:16px;letter-spacing:normal}
.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{top:12px}
@media(max-width:1100px){.activity-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:575px){.activity-search-grid,.activity-filter-grid{grid-template-columns:minmax(0,1fr)}}

/* Activity identities retain separate lines even when no email was recorded. */
.activity-actor>strong,.activity-actor>small{display:block}
.activity-actor>strong+div,.activity-actor>strong+small,.activity-actor>div+small{margin-top:4px}
.activity-pagination{gap:12px;align-items:center}
.activity-pagination .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.activity-pagination>span{padding-inline:4px;white-space:nowrap;font-variant-numeric:tabular-nums}

/* A stable day toolbar: all controls share the same box; Today never shifts it. */
:root .admin-page .parent-date-navigation{display:grid;grid-template-columns:100px minmax(150px,260px) 100px 90px;gap:12px;align-items:center;margin:8px 0 24px;width:100%}
.parent-date-navigation form{min-width:0;margin:0}
:root .admin-page .parent-date-navigation .form-label{margin:0;padding:0 12px;width:100%;height:48px;display:flex;align-items:center}
:root .admin-page .parent-date-navigation .form-control{height:46px;min-height:46px;padding:8px 0;width:100%;font-variant-numeric:tabular-nums}
:root .admin-page .parent-date-navigation .btn{height:48px;min-height:48px;margin:0;padding:8px 12px;gap:8px;white-space:nowrap}
.parent-content-stack{display:grid;gap:24px;min-width:0}
.parent-content-stack>[data-parent-updates]{min-width:0}
:root .admin-page .parent-content-stack .card{margin:0}
:root .admin-page .parent-day-card{border-top:2px solid var(--primary);background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 5%,var(--surface)),var(--surface) 65%)}
:root .admin-page .parent-day-heading{gap:16px;margin-bottom:20px;align-items:center}
:root .admin-page .parent-day-heading h2{margin:0}
@media(max-width:575px){:root .admin-page .parent-date-navigation{grid-template-columns:48px minmax(0,1fr) 48px;gap:10px}.parent-date-navigation .btn>span{display:none}:root .admin-page .parent-date-navigation .parent-return-today{grid-column:1/-1;justify-self:stretch;width:100%}.parent-content-stack{gap:20px}}

/* Shared workspace rhythm: adjacent panels and action rows must not collide. */
:root .admin-page .admin-main > :is(.card,.alert) + :is(.card,.alert){margin-top:24px}
:root .admin-page :is(.form-actions,.action-toolbar,.team-actions,.group-dialog-actions){gap:12px;row-gap:12px;align-items:center}
:root .admin-page form > .form-actions{margin-top:16px}
:root .admin-page :is(.form-actions,.action-toolbar,.team-actions) > .btn{min-height:48px}
:root .admin-page .form-label:has(> :is(.form-control,.form-select)):not(:has(textarea)){min-height:78px}
:root .admin-page .parent-date-navigation .form-label:has(> .form-control){min-height:48px}
:root .admin-page :is(.card,.notice-card) > h2 + p{line-height:1.6}
:root .admin-page .table .btn{margin-block:4px}

/* Families: one selected day, a separate readable weekly menu. */
.parent-menu-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.parent-menu-header h2,.parent-menu-header h3,.parent-menu-header p{margin:0}
.parent-menu-header h2{font-size:1.35rem}.parent-menu-header h3{font-size:1.2rem}
.parent-menu-header p,.parent-menu-header time{color:var(--muted);font-size:.95rem;margin-top:6px}
.parent-week-menu{display:grid;gap:20px;min-width:0}
.parent-week-menu>.parent-menu-header{margin-bottom:0}
.parent-menu-meals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.parent-menu-meal{padding:18px;background:var(--surface-soft,var(--surface));border:1px solid var(--border);border-radius:12px;min-width:0}
.parent-menu-meal>h3{font-size:1rem;color:var(--primary);margin:0 0 12px}
.parent-menu-dishes p{margin:0 0 8px;line-height:1.6;overflow-wrap:anywhere}
.parent-menu-dishes p:last-child{margin-bottom:0}
.parent-menu-course{font-size:.88rem;color:var(--muted);font-weight:700;margin:14px 0 5px}
.parent-menu-course:first-child{margin-top:0}
.parent-menu-selected{border-color:var(--primary)}
@media(max-width:575px){.parent-menu-meals{grid-template-columns:1fr;gap:12px}.parent-menu-header .btn{width:100%}.parent-menu-meal{padding:16px}}
.parent-menu-header h2,.parent-menu-meal>h3{display:flex;align-items:center;gap:10px}
.parent-meal-icon{display:grid;place-items:center;width:32px;height:32px;background:color-mix(in srgb,var(--primary) 9%,var(--surface));border-radius:10px;flex-shrink:0}
.parent-meal-icon .workspace-icon{width:19px;height:19px}
.parent-menu-card{box-shadow:0 3px 12px color-mix(in srgb,var(--text) 3%,transparent)}

/* Portrait loading never changes the size of its reserved circular slot. */
[data-portraits="enhanced"] .person-avatar-image{opacity:0;transition:opacity 260ms ease}
[data-portraits="enhanced"] .person-avatar-image.is-ready{opacity:1}
[data-portraits="enhanced"] .person-avatar:has(.person-avatar-image:not(.is-ready):not([hidden]))::after{content:"";position:absolute;inset:3px;border:2px solid transparent;border-top-color:var(--primary);border-radius:50%;animation:portrait-loading 1.2s linear infinite;pointer-events:none}
@keyframes portrait-loading{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){[data-portraits="enhanced"] .person-avatar-image{transition:none}[data-portraits="enhanced"] .person-avatar::after{animation:none!important}}
/* Keep icon and title separate: text wraps at words rather than flex fragments. */
.parent-menu-header h2>svg{width:22px;height:22px;flex:none}
.parent-menu-header h2>span{min-width:0}
.parent-profile-children{margin-top:24px;display:grid;gap:16px}
.parent-profile-child{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.parent-profile-child h3,.parent-profile-child p{margin:0}
.parent-profile-child p{margin-top:6px;color:var(--text-secondary)}

/* Parent day navigation and facts follow the focused demo layout. */
:root .admin-page .parent-date-toolbar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.parent-day-tabs{display:flex;gap:6px;align-items:center}
:root .admin-page .parent-day-tabs .btn{color:var(--text-secondary);background:transparent;border:1px solid transparent;padding-inline:16px}
:root .admin-page .parent-day-tabs .btn.btn-link[aria-current]{background:var(--primary-subtle);color:var(--primary-text);font-weight:600}
.parent-calendar-controls{display:grid;grid-template-columns:48px minmax(130px,170px) 48px;gap:8px;align-items:center}
:root .admin-page .parent-calendar-controls>.btn{padding:8px;width:48px}
:root .admin-page .parent-day-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
:root .admin-page .parent-fact{border:1px solid var(--border);background:var(--surface);padding:16px;align-items:center;min-height:80px}
:root .admin-page .parent-observation{padding:18px;border:0;border-radius:var(--radius-card);background:var(--primary-subtle);margin-top:20px}
:root .admin-page .parent-meals{margin-top:20px}
:root .admin-page .parent-meals>summary{font-weight:600;min-height:48px}
@media(max-width:575px){.parent-calendar-controls{width:100%;grid-template-columns:48px minmax(0,1fr) 48px}:root .admin-page .parent-fact{padding:12px;gap:8px}.parent-child-card h2{font-size:1.3rem}}

.parent-profile-child{flex-direction:row}
.parent-fact .workspace-icon{width:24px;height:24px;display:block}

.parent-profile-children{margin-bottom:24px}

.parent-day-tabs .btn.btn-link{text-decoration:none}

.parent-child-card .parent-institution-name{font-size:.8125rem;margin-bottom:6px}

.parent-profile-child>.parent-child-avatar{flex:none}.parent-profile-child>div{min-width:0;flex:1}

.ceo-readonly form[method=post]:not(.ceo-proposal-form) button,.ceo-readonly a[href*="remove="],.ceo-readonly a[href*="new="],.ceo-readonly a[href*="edit="]{display:none}

.password-rules{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.55rem}
.password-rules li{display:flex;align-items:center;gap:.65rem}
.password-check{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border:1px solid currentColor;border-radius:50%;color:var(--bs-secondary-color);flex-shrink:0}
.password-rules .is-met .password-check{color:#198754;background:rgba(25,135,84,.12)}
[data-bs-theme=dark] .password-rules .is-met .password-check{color:#75d69a}
.password-feedback:empty{display:none}
.release-card .release-date{display:block;text-align:right;font-size:.7rem;opacity:.5;margin-top:1rem}

.form-field-feedback{display:block;font-size:.875rem;color:var(--bs-danger-text-emphasis);margin-top:.35rem}
.form-field-feedback[hidden]{display:none}

.password-check .lucide{width:1rem;height:1rem}

.password-check .lucide{visibility:hidden}.is-met .password-check .lucide{visibility:visible}
.pipeline-months-table td{white-space:nowrap;font-variant-numeric:tabular-nums}.pipeline-months-mobile{display:none}
@media(max-width:575px){.pipeline-months-table{display:none}.pipeline-months-mobile{display:block}.pipeline-months-mobile article{padding:16px 0;border-bottom:1px solid var(--border)}.pipeline-months-mobile article:last-child{border:0;padding-bottom:0}.pipeline-months-mobile h4{font-size:1rem;margin-bottom:12px}.pipeline-months-mobile dl{margin:0}.pipeline-months-mobile dl>div{display:flex;justify-content:space-between;gap:12px;margin-top:8px}.pipeline-months-mobile dt{font-size:.85rem;font-weight:400}.pipeline-months-mobile dd{font-size:.85rem;font-variant-numeric:tabular-nums;white-space:nowrap;margin:0}.pipeline-months-mobile dl>div:last-child{font-weight:600}.pipeline-months-mobile dl>div:last-child dt{font-weight:600}}
/* One familiar account affordance; the identity belongs inside its menu. */
:root .top-navbar .account-menu-toggle{width:48px;height:48px;min-width:48px;padding:4px;border:0;border-radius:50%;background:transparent;display:grid;place-items:center}
:root .top-navbar .account-menu-toggle::after,:root .top-navbar .settings-toggle:has(.public-account-icon)::after{display:none}
:root .top-navbar .account-menu-toggle .account-avatar{width:40px;height:40px;flex:0 0 40px;background:transparent;color:var(--text-secondary)}
.account-avatar .person-avatar-letter svg{width:24px;height:24px}.public-account-icon{width:24px;height:24px;color:var(--text-secondary)}
:root .top-navbar .settings-toggle:has(.public-account-icon){width:48px;height:48px;padding:12px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent}
.account-menu-identity{padding:12px 16px}.account-menu-identity small{display:block;font-size:.75rem;color:var(--text-secondary)}.account-menu-identity strong{display:block;font-size:.95rem;overflow-wrap:anywhere;margin-top:4px}
@media(hover:hover){:root .top-navbar .account-menu-toggle:hover,:root .top-navbar .settings-toggle:has(.public-account-icon):hover{background:var(--surface-secondary)}}
@media(max-width:767px){:root .top-navbar:has(.account-menu-toggle) .brand>span{display:block}}
.payment-options{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));border:0;margin:0;padding:0;display:grid;gap:10px}.payment-options legend{font-size:.9rem;margin-bottom:10px;float:none;width:auto}.payment-option{display:flex;gap:12px;align-items:center;border:1px solid var(--border);border-radius:var(--radius-control);padding:14px;cursor:pointer;background:var(--surface)}.payment-option:has(input:checked){border-color:var(--primary);background:var(--primary-subtle)}.payment-option input{width:18px;height:18px;flex:none;accent-color:var(--primary)}.payment-option strong,.payment-option small{display:block}.payment-option small{color:var(--text-secondary);font-size:.8rem;margin-top:4px}.payment-option:has(input:focus-visible){outline:3px solid var(--primary);outline-offset:3px}

@media(max-width:575px){.payment-options{grid-template-columns:1fr}}
.population-card-footer{border-top:1px solid var(--border);padding-top:12px;margin-top:16px}.population-card-footer>small{color:var(--text-secondary);font-size:.75rem}.population-bars{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px;height:48px;margin:10px 0 8px}.population-bar{display:flex;align-items:flex-end;justify-content:center;width:100%;height:100%;padding:0;border:0;border-radius:3px;background:var(--primary-subtle);cursor:pointer;overflow:hidden}.population-bar-fill{display:block;width:100%;background:var(--primary);border-radius:3px}.population-bar.is-unknown{background:repeating-linear-gradient(135deg,transparent 0 4px,var(--border) 4px 5px);border:1px dashed var(--border)}.population-unknown{align-self:center;font-size:.7rem;color:var(--text-secondary)}.population-bar:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.population-card-footer output{display:block;color:var(--text-secondary);font-size:.75rem;min-height:1.2rem}
:root .admin-page .population-bar{min-width:0;min-height:48px}

.population-tile-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px}.population-tile-heading>span:first-child{min-width:0}.population-tile-icon{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:var(--primary-subtle);color:var(--primary)}.population-tile-icon .lucide{width:24px;height:24px}
.access-sections{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:6px;background:var(--surface-secondary);border:1px solid var(--border);border-radius:var(--radius-control);margin-bottom:20px}.access-sections a{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;color:var(--text-secondary);border-radius:var(--radius-control);text-decoration:none;min-height:48px;font-weight:600}.access-sections a[aria-current=page]{background:var(--surface);color:var(--primary);box-shadow:0 2px 6px #0000000d}.access-sections .lucide{width:22px;height:22px;flex:none}.access-directory-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.access-directory-filters label{margin:0;min-width:0}.access-directory-filters .directory-search{grid-column:1/-1}.directory-filter-actions{display:flex;align-items:end;gap:10px}.directory-child-links{padding:0;margin:0;list-style:none}.directory-child-links li+li{margin-top:12px}.directory-child-links span,.directory-child-links small{display:block;color:var(--text-secondary);font-size:.85rem}.directory-account-context{min-width:0;overflow-wrap:anywhere}.directory-pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:20px;flex-wrap:wrap}
@media(max-width:767px){.access-directory-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.access-sections a{padding:10px 6px;gap:6px;font-size:.85rem}}
@media(max-width:480px){.access-directory-filters{grid-template-columns:1fr}.access-sections a{flex-direction:column;gap:5px;font-size:.8rem}.access-sections{gap:2px}.directory-filter-actions .btn{flex:1}}

.access-directory-controls .btn .lucide{width:20px;height:20px;flex:none}.access-directory-controls .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}.access-directory-results .platform-account-identity>div{min-width:0;overflow-wrap:anywhere}.directory-parent-child{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--border)}
.log-shortcuts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.log-shortcuts a[aria-current=page]{background:var(--primary-subtle);color:var(--primary);border-color:var(--primary)}.activity-feed{display:flex;flex-direction:column}.activity-entry{padding:20px 0;border-bottom:1px solid var(--border);overflow-wrap:anywhere}.activity-entry:last-child{border:0}.activity-entry-heading,.activity-entry-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.activity-entry-action{display:flex;align-items:center;gap:10px;min-width:0;flex:1}.activity-entry-action .lucide{width:22px;height:22px;flex:none;color:var(--primary)}.activity-entry-description{font-size:.875rem;color:var(--text-secondary);margin:10px 0}.activity-entry-meta{margin-bottom:8px;font-size:.875rem}.activity-entry-meta time{font-variant-numeric:tabular-nums;color:var(--text-secondary)}.log-result{font-size:.75rem;font-weight:600;padding:5px 9px;border-radius:999px;background:var(--primary-subtle);color:var(--primary)}.log-result-error,.log-result-rejected{background:var(--surface-secondary);color:var(--danger,#b42318);border:1px solid currentColor}.log-result-not_saved,.log-result-pending{background:var(--surface-secondary);color:var(--text-secondary);border:1px solid var(--border)}.activity-technical{font-size:.8125rem;color:var(--text-secondary)}.activity-technical dl{display:grid;grid-template-columns:minmax(110px,1fr) 3fr;gap:8px;margin:12px 0 0}.activity-technical dd{margin:0}.activity-entry h3{line-height:1.5}
@media(max-width:575px){.activity-entry-heading{align-items:start}.activity-entry-action{flex-basis:100%}.activity-entry-meta{align-items:start;flex-direction:column}.activity-technical dl{grid-template-columns:1fr}.activity-technical dd{margin-bottom:8px}.log-shortcuts .btn{flex:1 1 45%;font-size:.8rem}}

.activity-date-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.activity-date-grid .form-label{margin:0;width:100%}.activity-advanced{margin-top:16px}.activity-history-note{font-size:.8125rem;color:var(--text-secondary);margin-bottom:16px}.activity-filters>.activity-search-field{width:100%;margin-bottom:8px}

/* === app-shell.css === */
/* One authenticated shell: mobile dock, tablet rail, desktop sidebar. */
* {-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
body {overscroll-behavior:none;}
:root {scroll-padding-top:calc(var(--workspace-header-height,80px) + 20px);}
:root :is(button,summary,.app-nav-link,.account-menu-toggle,.dropdown-item) {-webkit-user-select:none;user-select:none;}
:root :is(input,textarea,[contenteditable],.notice-card-content,dd) {-webkit-user-select:text;user-select:text;}
:root .admin-page {--panel-shadow:0 4px 24px rgb(20 30 45 / 4%);}
:root .admin-page .site-header {padding-top:var(--safe-top);margin-bottom:0;background:var(--surface);box-shadow:0 1px 0 var(--border);border:0;}
:root .admin-page .top-navbar {padding-block:8px;}
:root .admin-page .navbar-container {width:calc(100% - 32px);max-width:calc(var(--app-content-max) + var(--app-rail-width) + var(--app-gutter));}
:root .admin-page:has(.app-navigation) #papivoMainNavbar {display:none!important;}
:root .admin-page .account-menu-toggle {min-height:48px;border-radius:var(--radius-control);}
:root .admin-page .account-menu-toggle .account-label {grid-template-rows:16px 20px;align-items:center;}
:root .admin-page .account-menu-toggle small,:root .admin-page .account-menu-toggle strong {line-height:1.2;}
:root .admin-page .app-dropdown {margin:0;top:calc(100% + 12px);right:0;left:auto;max-height:calc(100dvh - var(--workspace-header-height,80px) - 32px);overflow:auto;border-radius:var(--radius-card);box-shadow:var(--shadow);}
:root .admin-page main {max-width:var(--app-content-max)!important;min-width:0;padding:24px 0!important;}
:root .admin-page .institution-workspace {display:block;}
:root .admin-page .workspace-content {min-width:0;}
:root .admin-page .workspace-demo {margin:0 0 16px;border-radius:var(--radius-card);padding:12px 16px;}
:root .admin-page .site-footer {padding-bottom:16px;margin-top:auto;}
:root .admin-page .footer-main {padding-block:20px;min-height:88px;align-items:center;}
.app-navigation {position:fixed;z-index:1020;display:flex;flex-direction:column;gap:4px;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow);}
.app-navigation .app-nav-link,.app-nav-more>summary {display:flex;align-items:center;gap:12px;min-width:48px;min-height:48px;padding:10px 12px;border-radius:var(--radius-control);color:var(--text-secondary);font-size:.875rem;font-weight:500;line-height:1.3;text-decoration:none;list-style:none;cursor:pointer;}
.app-navigation svg {width:22px;height:22px;flex:none;}
.app-nav-link span {min-width:0;overflow-wrap:anywhere;}
@media(hover:hover){.app-navigation .app-nav-link:hover,.app-nav-more>summary:hover {background:var(--surface-secondary);color:var(--ink);}}
.app-navigation .app-nav-link[aria-current],.app-nav-more>summary.is-current {background:var(--primary-subtle);color:var(--primary-text);font-weight:600;}
.app-nav-more>summary::-webkit-details-marker {display:none;}
.app-nav-overflow {display:flex;flex-direction:column;gap:4px;}
@media(min-width:768px) {
 .app-navigation {top:calc(var(--workspace-header-height,80px) + 24px);bottom:auto;max-height:calc(100dvh - var(--workspace-header-height,80px) - 48px);overflow:auto;width:var(--app-rail-width);left:max(16px,calc((100% - var(--app-content-max) - var(--app-rail-width) - var(--app-gutter)) / 2));}
 .app-nav-more>summary {display:none;}
 .app-navigation .app-nav-more>.app-nav-overflow {display:flex;}
 :root .admin-page:has(.app-navigation) :is(main,.site-footer) {width:calc(100% - var(--app-rail-width) - var(--app-gutter) - 32px);max-width:var(--app-content-max)!important;margin-left:calc(max(16px,(100% - var(--app-content-max) - var(--app-rail-width) - var(--app-gutter)) / 2) + var(--app-rail-width) + var(--app-gutter));margin-right:16px;}
}
@media(min-width:768px) and (max-width:1023.98px) {
 :root {--app-rail-width:96px;--app-gutter:16px;}
 .app-navigation {padding:8px;}
 .app-navigation .app-nav-link {flex-direction:column;justify-content:center;gap:6px;text-align:center;padding:10px 4px;font-size:.72rem;min-height:72px;}
}
@media(max-width:767.98px) {
 :root .admin-page:has(.app-navigation) {padding-bottom:calc(var(--app-bottom-height) + var(--safe-bottom) + 12px);}
 :root .admin-page main {width:calc(100% - 24px);padding-block:16px!important;}
 :root .admin-page .navbar-container {width:calc(100% - 24px);}
 :root .admin-page .navbar-brand small {display:none;}
 :root .admin-page .navbar-brand {margin-right:8px;}
 :root .admin-page .brand-icon {width:36px;height:36px;}
 :root .admin-page .account-menu-toggle strong {max-width:18ch;}
 .app-navigation {inset:auto 0 0;flex-direction:row;gap:2px;align-items:stretch;border:0;border-top:1px solid var(--border);border-radius:0;padding:6px max(6px,env(safe-area-inset-right)) calc(6px + var(--safe-bottom)) max(6px,env(safe-area-inset-left));min-height:calc(var(--app-bottom-height) + var(--safe-bottom));box-shadow:0 -4px 24px rgb(20 30 45 / 5%);}
 .app-navigation>.app-nav-link,.app-navigation>.app-nav-more {flex:1;min-width:0;}
 .app-navigation .app-nav-link,.app-nav-more>summary {flex-direction:column;justify-content:center;gap:4px;padding:6px 2px;font-size:.6875rem;text-align:center;min-height:60px;line-height:1.2;}
 .app-nav-more>summary {height:100%;}
 .app-nav-more:not([open])>.app-nav-overflow {display:none;}
 .app-nav-overflow {position:absolute;bottom:calc(100% + 8px);left:12px;right:12px;max-height:65dvh;overflow:auto;overscroll-behavior:contain;padding:16px 8px 8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow);}
 .app-nav-overflow .app-nav-link {flex-direction:row;justify-content:flex-start;text-align:left;font-size:.9375rem;gap:12px;padding:12px;min-height:48px;}
 :root .admin-page:has(.app-navigation) .record-savebar {bottom:calc(var(--app-bottom-height) + var(--safe-bottom) + 8px);}
 :root .admin-page .site-footer {width:calc(100% - 24px);padding-bottom:16px;}
 :root .admin-page .pwa-prompt {top:auto;bottom:calc(var(--app-dock-offset,var(--app-bottom-height)) + 12px);transform:translateX(-50%);max-height:calc(100dvh - var(--workspace-header-height,80px) - var(--app-dock-offset,var(--app-bottom-height)) - 36px);}
}
/* Solid surfaces remain usable without transparency or compositing support. */
@supports(backdrop-filter:blur(16px)) {
 .app-navigation {background:color-mix(in srgb,var(--surface) 96%,transparent);backdrop-filter:blur(16px);}
}
@media(prefers-reduced-transparency:reduce) {.app-navigation {background:var(--surface);backdrop-filter:none;}}
@media print {.app-navigation{display:none;} :root .admin-page:has(.app-navigation) main{width:100%;margin:0;} }
/* Navigation disclosures do not inherit the expandable-card decoration. */
:root .admin-page .app-nav-more {padding:0;margin:0;border:0;background:transparent;box-shadow:none;}
:root .admin-page .app-nav-more>summary {margin:0;min-height:60px;font-weight:500;}
:root .admin-page .app-nav-more>summary::after {display:none;}
@media(min-width:768px) {:root .admin-page .app-nav-more>summary {display:none;}}
:root .admin-page .footer-legal a {display:inline-flex;align-items:center;min-height:48px;}
@media(max-width:767.98px) {
 :root .admin-page:has(.app-navigation) {padding-bottom:calc(var(--app-dock-offset,var(--app-bottom-height)) + 12px);}
 :root .admin-page:has(.app-navigation) .record-savebar {bottom:calc(var(--app-dock-offset,var(--app-bottom-height)) + 8px);}
 :root .admin-page.app-keyboard-open .app-navigation {display:none;}
 :root .admin-page.app-keyboard-open .record-savebar {bottom:8px;}
}
.app-nav-context {padding:8px 12px 12px;font-size:.75rem;color:var(--text-secondary);line-height:1.4;overflow-wrap:anywhere;}
:root .admin-page .app-nav-more>summary:focus-visible {outline:2px solid var(--primary);outline-offset:-2px;}
@media(min-width:768px) and (max-width:1023.98px) {.app-nav-context {padding:4px 0 8px;text-align:center;font-size:.65rem;}}
@media(max-width:767.98px) {.app-nav-context {display:none;}}
@media(max-width:767.98px) {
 :root .admin-page .app-nav-more>summary {font-size:.6875rem;line-height:1.2;gap:4px;}
}

.admin-context {display:flex;flex-wrap:wrap;align-items:center;gap:12px;color:var(--text-secondary);font-size:.875rem;}
.admin-context>a {display:inline-flex;align-items:center;min-height:48px;}
.platform-access-list {display:grid;gap:12px;}
.platform-access-card {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto;gap:20px;align-items:start;}
.platform-access-card>* {min-width:0;overflow-wrap:anywhere;}
@media(max-width:767px) {.platform-access-card {grid-template-columns:1fr;gap:12px;}}

@media (min-width: 992px) { .app-nav-link.app-nav-submenu { margin-left: 1rem; width: calc(100% - 1rem); font-size: .9rem; } }

/* Institution navigation is a separate workspace, never a nested global menu. */
.app-navigation .app-nav-context{padding:0 0 16px;margin-bottom:8px;border-bottom:1px solid var(--border);text-align:left}
.institution-nav-back{display:flex;align-items:center;gap:8px;min-height:48px;font-size:.8125rem;text-decoration:none;color:var(--text-secondary)}
.institution-nav-back svg{width:18px;height:18px;flex:none}
.institution-nav-back:hover{color:var(--ink)}
.institution-nav-caption{display:block;font-size:.6875rem;color:var(--text-secondary);margin:8px 12px 4px}
.app-nav-context strong{display:block;color:var(--ink);font-size:1rem;line-height:1.4;padding:0 12px;overflow-wrap:anywhere}
.app-nav-form{margin:0;padding:0;min-width:0}
.app-nav-form .app-nav-link{width:100%;border:0;background:transparent;text-align:left;font-family:inherit}
.institution-context-bar{display:none}
@media(min-width:768px) and (max-width:1023.98px){
 :root{--app-rail-width:220px}
 .app-navigation .app-nav-link{flex-direction:row;justify-content:flex-start;text-align:left;padding:10px 12px;font-size:.875rem;min-height:48px;gap:12px}
}
@media(max-width:767.98px){
 .institution-context-bar{display:block;background:var(--surface);border-bottom:1px solid var(--border);padding:8px 16px 14px}
 .institution-context-bar .institution-nav-back{min-height:40px}
 .institution-context-bar .institution-nav-caption{margin:0 0 4px}
 .institution-context-bar strong{display:block;font-size:1rem;overflow-wrap:anywhere}
 .app-navigation .app-nav-context{display:none}
 .app-navigation>.app-nav-form{flex:1;min-width:0}
 .app-nav-overflow .app-nav-form{width:100%}
}

/* Reserve the header before deferred scripts measure it, preventing rail jumps. */
:root .admin-page .top-navbar{min-height:80px}
:root{--workspace-header-height:calc(80px + var(--safe-top,0px))}
.app-navigation .app-nav-link{transition:background-color 180ms ease,color 180ms ease,box-shadow 180ms ease}
.app-navigation .app-nav-link[aria-current]{box-shadow:inset 3px 0 var(--primary)}
@media(max-width:767.98px){.app-navigation .app-nav-link[aria-current]{box-shadow:inset 0 -3px var(--primary)}}
@media(prefers-reduced-motion:reduce){.app-navigation .app-nav-link{transition:none}}

/* Below the header: the navigation and account menu remain crisp and usable. */
.app-menu-backdrop{position:fixed;inset:var(--workspace-header-height,80px) 0 0;z-index:1025;background:rgb(0 0 0 / 16%);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity 180ms ease;}
.app-menu-backdrop.is-open{opacity:1;pointer-events:auto;}
.app-menu-backdrop[hidden]{display:none;}
@media(prefers-reduced-motion:reduce){.app-menu-backdrop{transition:none;}}

/* Workspace titles use the available column, without the public hero measure. */
:root .admin-page main h1{max-width:none;min-width:0;text-wrap:wrap;overflow-wrap:break-word}

/* Familiar touch feedback and desktop keyboard affordances across all workspaces. */
:root .admin-page :is(button,.btn,.app-nav-link,summary):focus-visible{outline:3px solid var(--primary);outline-offset:3px}
:root .admin-page :is(.btn,.quick-segments button,.dropdown-setting-grid button,.app-nav-link):active{filter:brightness(.94)}
:root .admin-page input[type=checkbox],:root .admin-page input[type=radio]{accent-color:var(--primary)}
@media(max-width:767.98px){
 :root .admin-page{font-size:1rem}
 .app-nav-overflow::before{content:"";display:block;width:36px;height:4px;border-radius:99px;background:var(--text-muted);opacity:.35;margin:0 auto 10px}
 .app-nav-more[open]>summary{background:var(--primary-subtle);color:var(--primary-text)}
 :root .admin-page .group-dialog{width:calc(100% - 24px);max-height:75dvh;margin:auto 12px max(12px,var(--safe-bottom));border-radius:20px;padding:20px}
}
@media(prefers-contrast:more){:root .admin-page :is(.card,.app-navigation,.group-dialog){border-color:var(--text-muted)}}
:root .admin-page .account-menu-toggle{border-radius:50%}

/* === motion.css === */
/* Motion styles. Edit this source, not the generated styles.css. */
/* A restrained motion language: fast feedback, soft settling, no layout shifts. */

@media(prefers-reduced-motion:no-preference) {
 .app-dropdown.show { animation:papivo-panel-in 240ms var(--motion-settle); transform-origin:top right; }
 .pwa-prompt:not([hidden]) { animation:papivo-panel-in 320ms var(--motion-settle); }
 .button,.btn,.week-button,.story-controls button,.dropdown-setting-grid button,.settings-toggle,.portal-card {
  transition:transform 240ms var(--motion-settle),box-shadow 240ms ease,background-color var(--motion-quick) ease,border-color var(--motion-quick) ease,color var(--motion-quick) ease;
 }
 .button:active,.btn:active,.week-button:active,.story-controls button:active,.dropdown-setting-grid button:active,.settings-toggle:active { transform:scale(.97); }
 .settings-toggle .settings-gear { transition:rotate 280ms var(--motion-settle); }
 .settings-toggle[aria-expanded="true"] .settings-gear { rotate:35deg; }
 @media(hover:hover) and (pointer:fine) {
  .portal-card:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgb(18 65 61 / 12%); }
 }
}
@keyframes papivo-panel-in { from { translate:0 8px; scale:.98; } to { translate:0 0; scale:1; } }
@keyframes papivo-content-in { from { translate:0 5px; } to { translate:0 0; } }
@media(prefers-reduced-motion:reduce) {
 .app-dropdown,.pwa-prompt,.admin-page details > * { animation:none!important; }
 .button:hover,.btn:hover,.portal-card:hover { transform:none; }
}

/* Shared interaction feedback across public, family and staff workspaces. */
details[data-motion-disclosure] {overflow:hidden;box-sizing:border-box;}
@media(prefers-reduced-motion:no-preference) {
 dialog[open] {animation:papivo-panel-in 220ms var(--motion-settle);}
 dialog[open]::backdrop {animation:papivo-fade-in 180ms ease-out;}
 .flatpickr-calendar.open {animation:papivo-panel-in 180ms var(--motion-settle);}
 .alert-success,.alert-danger {animation:papivo-fade-in 180ms ease-out;}
:root .quick-segments button,:root .menu-remove-dish,:root .daily-details-arrow{
  transition:background-color var(--motion-quick) ease,border-color var(--motion-quick) ease,color var(--motion-quick) ease,scale var(--motion-quick) var(--motion-settle);
 }
 :root .quick-segments button:active:not(:disabled),:root .menu-remove-dish:active,:root .daily-details-arrow:active {scale:.97;}
}
@keyframes papivo-fade-in {from{opacity:0;}to{opacity:1;}}
@media(prefers-reduced-motion:reduce) {
 *,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}

/* Press feedback uses individual scale, preserving positioning transforms. */
:root :is(button,.btn,.button,.app-nav-link,summary,[role="button"]):active:not(:disabled) {opacity:.82;}
@media(prefers-reduced-motion:no-preference) {
 :root :is(button,.btn,.button,.app-nav-link,summary,[role="button"]):active:not(:disabled) {scale:.98;}
 .app-nav-more[open]>.app-nav-overflow {animation:papivo-panel-in 180ms var(--motion-settle);}
}

.portraits-pending .demo-child-portrait::before {opacity:0;}
@media(prefers-reduced-motion:no-preference) {
 .demo-child-portrait::before {transition:opacity 200ms ease-out;}
}

/* Calm workspace polish: no recurring reveals, blur, hover jumps or hidden content. */
@media(prefers-reduced-motion:no-preference){
 :root .admin-page :is(.btn,.app-nav-link,.form-label,.form-control,.form-select,summary){transition:background-color 220ms ease,border-color 220ms ease,color 220ms ease,box-shadow 220ms ease,scale 160ms ease}
 :root .admin-page .admin-main{animation:papivo-workspace-in 240ms ease-out}
 :root .admin-page :is(.card,.notice-card){transition:border-color 220ms ease,box-shadow 220ms ease}
 @media(hover:hover) and (pointer:fine){
  :root .admin-page .card:hover{border-color:color-mix(in srgb,var(--primary) 30%,var(--border))}
  :root .admin-page .btn:hover:not(:disabled){box-shadow:0 3px 10px color-mix(in srgb,var(--primary) 12%,transparent)}
 }
}
@keyframes papivo-workspace-in{from{opacity:.65}to{opacity:1}}

/* Browser-owned navigation snapshots: no intercepted links or delayed requests. */
@media(prefers-reduced-motion:no-preference){
 @view-transition{navigation:none}
 .admin-page .admin-main{view-transition-name:papivo-workspace}
 ::view-transition-old(root),::view-transition-new(root){animation:none}
 ::view-transition-old(papivo-workspace){animation:papivo-page-out 180ms ease-in both}
 ::view-transition-new(papivo-workspace){animation:papivo-page-in 260ms cubic-bezier(.22,1,.36,1) both}
 .photo-upload-preview{animation:papivo-panel-in 220ms var(--motion-settle)}
 .photo-upload-status[data-processing]::before{animation:papivo-spin 900ms linear infinite}
 @supports(transition-behavior:allow-discrete){
  .app-dropdown{transition:opacity 180ms ease,display 180ms allow-discrete;opacity:0}
  .app-dropdown.show{opacity:1}
  dialog{transition:opacity 180ms ease,display 180ms allow-discrete,overlay 180ms allow-discrete;opacity:0}
  dialog[open]{opacity:1}
 }
}
[data-motion-visibility]{overflow:hidden;box-sizing:border-box}
.photo-upload-preview{width:96px;height:96px;object-fit:cover;border-radius:50%;border:3px solid var(--surface);box-shadow:0 0 0 1px var(--border);margin:0 0 16px}
.photo-upload-status{display:flex;align-items:center;gap:8px;min-height:1.5em}
.photo-upload-status[data-processing]::before{content:'';width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;flex-shrink:0}
@keyframes papivo-spin{to{rotate:360deg}}
@keyframes papivo-page-out{to{opacity:0;translate:0 -4px}}
@keyframes papivo-page-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}

html:active-view-transition .admin-page .admin-main{animation:none}

/* A vector brand launch hands off to the already laid-out navbar. */
.app-launch{display:none}
:root:is([data-app-launch="pending"],[data-app-launch="arrived"],[data-app-launch="revealing"]) .app-launch{display:block;position:fixed;inset:0;z-index:2000;background:var(--background,var(--cream));animation:app-launch-safety 16s step-end forwards}
/* The icon itself is centered; the two lines sit below its center point. */
.app-launch-brand{position:absolute;inset:0;display:block;pointer-events:none}
:root :is(.admin-page,.landing-page) .app-launch-brand .brand-icon{position:absolute;left:calc(50% - 48px);top:calc(50% - 48px);width:96px;height:96px;opacity:0}
.app-launch-brand>span{position:absolute;left:50%;top:calc(50% + 68px);transform:translateX(-50%);width:max-content;text-align:center}
.app-launch-brand strong{font-size:2.8rem;line-height:1}
.app-launch-brand small{display:block;font-size:1.05rem;margin-top:14px;opacity:0}
.app-launch-letter{display:inline-block;opacity:0}
:root[data-app-launch="pending"]:has(.app-launch) .site-header .navbar-brand{visibility:hidden;animation:app-brand-safety 16s step-end forwards}
@keyframes app-launch-safety{to{visibility:hidden;pointer-events:none}}
@keyframes app-brand-safety{to{visibility:visible}}
@media(max-width:767.98px){.app-launch-brand strong{font-size:2.45rem}.app-launch-brand small{font-size:.95rem}}
@media(prefers-reduced-motion:reduce){.app-launch{display:none!important}:root[data-app-launch="pending"] .site-header .navbar-brand{visibility:visible!important}}

/* Keep the slogan in the compact navbar whenever its wordmark is visible. */
:root .admin-page .navbar-brand small{display:block}

:root:is([data-app-launch="pending"],[data-app-launch="revealing"]):has(.app-launch) :is(.admin-page,.landing-page) :is(.site-header,.app-navigation,main,.site-footer){opacity:0;animation:app-shell-safety 16s step-end forwards}
@keyframes app-shell-safety{to{opacity:1}}
@media(prefers-reduced-motion:reduce){:root :is(.admin-page,.landing-page) :is(.site-header,.app-navigation,main,.site-footer){opacity:1!important}}

/* Removing the launch safety layer must not restart the normal entry fade. */
:root.app-launch-complete .admin-page .admin-main{animation:none}
.app-launch-pull-hint{position:fixed;z-index:1900;top:8px;left:50%;transform:translateX(-50%);margin:0;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--surface);color:var(--text-secondary);box-shadow:0 2px 8px rgb(0 0 0 / 12%);pointer-events:none}.app-launch-pull-hint[hidden]{display:none}

.app-launch.is-checking-version::after{content:"";position:absolute;left:calc(50% - 16px);top:calc(50% - 16px);width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:papivo-spin .8s linear infinite}

:root:has(.admin-page),.admin-page{overscroll-behavior-y:none}