:root {
    --premium-ui-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --premium-heading-font: var(--premium-ui-font);
    --font-display: var(--premium-heading-font);
    --c-bg: #f6f8f7;
    --c-paper: #fafbf9;
    --c-surface: #ffffff;
    --c-surface-low: #f8faf8;
    --c-surface-mid: #f1f4f2;
    --c-surface-high: #e8edea;
    --c-ink: #1d2e24;
    --c-text: #1e2a22;
    --c-muted: #687468;
    --c-line: #e0e5e2;
    --c-outline: #aeb8b2;
    --c-surface-border: var(--c-line);
    --c-control-border: var(--c-line);
    --c-shell-border: var(--c-line);
    --c-auth-canvas: var(--c-bg);
    --c-rail-surface: var(--c-surface);
    --c-rail-hover: var(--c-surface-low);
    --c-success: #2f7a51;
    --c-warning: #af7324;
    --c-danger: #c44545;
    --c-info: #2c5eae;
    --platform-action-primary: #0e3a28;
    --platform-action-hover: #14503a;
    --platform-attribution-gold: #876516;
    --platform-attribution-gold-inverse: #f3ce74;
    --brand-primary: #2f5a40;
    --brand-primary-strong: #274b35;
    --brand-primary-soft: #e6ebe8;
    --brand-secondary: #6f8f54;
    --brand-secondary-soft: #edf1ea;
    --brand-accent: #c49a3a;
    --brand-accent-soft: #f5eedf;
    --brand-on-primary: #ffffff;
    --brand-link: #2f5a40;
    --brand-focus: #2f5a40;
    --role-accent: #2b63c7;
    --role-accent-soft: #eaf1ff;
    --font-primary: "Hanken Grotesk", Inter, Aptos, "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    --type-display: clamp(2.25rem, 4vw, 3rem);
    --type-h1: clamp(1.8rem, 3vw, 2.125rem);
    --type-h2: 1.5rem;
    --type-h3: 1.1875rem;
    --type-body-lg: 1.125rem;
    --type-body: 1rem;
    --type-small: .875rem;
    --type-label: .75rem;
    --s1: .25rem;
    --s2: .5rem;
    --s3: .75rem;
    --s4: 1rem;
    --s5: 1.25rem;
    --s6: 1.5rem;
    --s8: 2rem;
    --s10: 2.5rem;
    --s12: 3rem;
    --s16: 4rem;
    --r-field: .75rem;
    --r-button: .75rem;
    --r-card: 1.25rem;
    --r-panel: 1.5rem;
    --r-hero: 1.75rem;
    --r-pill: 999rem;
    --shadow-subtle: 0 1px 2px rgba(22, 48, 33, .05);
    --shadow-card: 0 8px 28px rgba(22, 48, 33, .075);
    --shadow-float: 0 22px 60px rgba(22, 48, 33, .14);
    --motion-micro: 140ms ease-out;
    --motion-surface: 240ms cubic-bezier(.2, .8, .2, 1);
    --content-max: 96rem;
    --reading-max: 55rem;
    --rail-width: 17rem;
    --topbar-height: 4.35rem;
    --target-min: 2.75rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--c-text);
    background: var(--c-bg);
    font-family: var(--font-primary);
    font-size: var(--type-body);
    line-height: 1.5;
    overflow-wrap: anywhere;
}
body.role-parent { --role-accent: #7352d5; --role-accent-soft: #f0ecff; }
body.role-teacher { --role-accent: #17876f; --role-accent-soft: #e8f7f2; }
body.role-student { --role-accent: #c56b26; --role-accent-soft: #fff1e5; }
body.role-admin { --role-accent: #2b63c7; --role-accent-soft: #eaf1ff; }
.authenticated {
    --c-auth-canvas: color-mix(in srgb, var(--c-bg) 84%, var(--c-surface-high));
    --c-surface-border: color-mix(in srgb, var(--c-outline) 48%, var(--c-line));
    --c-control-border: color-mix(in srgb, var(--c-outline) 66%, var(--c-line));
    --c-shell-border: color-mix(in srgb, var(--c-outline) 54%, var(--c-line));
    --c-rail-surface: color-mix(in srgb, var(--brand-primary) 5%, var(--c-surface));
    --c-rail-hover: color-mix(in srgb, var(--brand-primary) 8%, var(--c-surface));
    --auth-surface-shadow: 0 1px 3px rgba(22, 48, 33, .055);
    --auth-surface-hover-shadow: 0 5px 18px rgba(22, 48, 33, .065);
    --auth-rail-shadow: 2px 0 10px rgba(22, 48, 33, .035);
    background: var(--c-auth-canvas);
}
.authenticated[data-theme-preset="CLASSIC_ACADEMIC"] {
    color-scheme: light;
    --c-bg: #f4f3ef;
    --c-paper: #f8f7f3;
    --c-surface: #fffefa;
    --c-surface-low: #f8f6ef;
    --c-surface-mid: #efede4;
    --c-surface-high: #e7e3d8;
    --c-ink: #282c27;
    --c-text: #32372f;
    --c-muted: #6c7067;
    --c-line: #d8d4c8;
    --c-outline: #aaa598;
    --c-auth-canvas: #f4f3ef;
    --c-surface-border: #d5d1c5;
    --c-control-border: #bdb8ab;
    --c-shell-border: #cec9bc;
    --c-rail-surface: color-mix(in srgb, var(--brand-primary) 6%, var(--c-surface));
    --c-rail-hover: color-mix(in srgb, var(--brand-primary) 10%, var(--c-surface));
    --r-field: .5rem;
    --r-button: .5rem;
    --r-card: .75rem;
    --r-panel: .875rem;
    --r-hero: 1rem;
    --auth-surface-shadow: 0 1px 0 rgba(49, 54, 47, .045);
    --auth-surface-hover-shadow: 0 3px 12px rgba(49, 54, 47, .075);
    --auth-rail-shadow: 1px 0 0 rgba(49, 54, 47, .055);
}
.authenticated[data-theme-preset="DARK"] {
    color-scheme: dark;
    --c-bg: #111522;
    --c-paper: #171c2a;
    --c-surface: #1d2333;
    --c-surface-low: #171c2a;
    --c-surface-mid: #252c3e;
    --c-surface-high: #2d3549;
    --c-ink: #f6f8ff;
    --c-text: #edf1fb;
    --c-muted: #b6bfd2;
    --c-line: #3d465c;
    --c-outline: #9da8bf;
    --c-success: #75d39d;
    --c-warning: #f1bd69;
    --c-danger: #ff939a;
    --c-info: #88b8ff;
    --c-auth-canvas: #111522;
    --c-surface-border: #465067;
    --c-control-border: #626d86;
    --c-shell-border: #424b61;
    --c-rail-surface: color-mix(in srgb, var(--brand-primary) 12%, #171c2a);
    --c-rail-hover: color-mix(in srgb, var(--brand-primary) 18%, #1d2333);
    --role-accent-soft: color-mix(in srgb, var(--role-accent) 20%, var(--c-surface));
    --auth-surface-shadow: 0 1px 2px rgba(0, 0, 0, .24);
    --auth-surface-hover-shadow: 0 6px 20px rgba(0, 0, 0, .3);
    --auth-rail-shadow: 2px 0 14px rgba(0, 0, 0, .22);
}
body.authenticated[data-theme-preset="DARK"].role-parent { --role-accent: #b6a1ff; }
body.authenticated[data-theme-preset="DARK"].role-teacher { --role-accent: #62d1b4; }
body.authenticated[data-theme-preset="DARK"].role-student { --role-accent: #ffb778; }
body.authenticated[data-theme-preset="DARK"].role-admin { --role-accent: #86adff; }
.authenticated[data-theme-preset="DARK"] :is(.app-shell, .mobile-nav) {
    --brand-primary-soft: color-mix(in srgb, var(--brand-primary) 22%, var(--c-surface));
    --brand-secondary-soft: color-mix(in srgb, var(--brand-secondary) 20%, var(--c-surface));
    --brand-accent-soft: color-mix(in srgb, var(--brand-accent) 20%, var(--c-surface));
    --brand-link: color-mix(in srgb, var(--brand-primary) 38%, #ffffff);
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { touch-action: manipulation; }
img { display: block; max-inline-size: 100%; block-size: auto; }
h1, h2, h3, p { text-wrap: pretty; }
h1, h2, h3 { color: var(--c-ink); }

.skip-link {
    position: fixed;
    inset-block-start: var(--s2);
    inset-inline-start: var(--s2);
    z-index: 100;
    padding: var(--s3) var(--s4);
    border-radius: var(--r-button);
    color: var(--brand-on-primary);
    background: var(--brand-primary);
    transform: translateY(-160%);
    transition: transform var(--motion-micro);
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: .1875rem solid var(--brand-focus); outline-offset: .1875rem; }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.app-shell { min-block-size: 100dvh; }
.authenticated .app-shell { display: grid; grid-template-columns: var(--rail-width) minmax(0, 1fr); }
.page-column { min-inline-size: 0; }
.role-rail {
    position: sticky;
    inset-block-start: 0;
    display: flex;
    flex-direction: column;
    block-size: 100dvh;
    padding: var(--s4);
    color: var(--c-text);
    background: var(--c-rail-surface);
    border-inline-end: 1px solid var(--c-shell-border);
    box-shadow: var(--auth-rail-shadow);
    overflow-y: auto;
}
.brand { display: inline-flex; align-items: center; gap: var(--s3); font-weight: 700; letter-spacing: -.01em; }
.rail-brand { min-inline-size: 0; min-block-size: 4.75rem; padding: var(--s1) var(--s2) var(--s4); border-block-end: 1px solid var(--c-shell-border); font-size: var(--type-h3); }
.rail-brand > span:last-child { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-logo, .rail-platform-logo { inline-size: 3.25rem; block-size: 3.25rem; flex: 0 0 auto; object-fit: contain; }
.rail-context { margin: var(--s3) 0 var(--s2); padding: var(--s3); border: 1px solid var(--c-surface-border); border-radius: var(--r-field); background: color-mix(in srgb, var(--c-surface) 74%, var(--c-rail-hover)); box-shadow: none; }
.rail-school, .rail-role { margin: 0; }
.rail-school { color: var(--c-ink); font-size: var(--type-small); font-weight: 800; }
.rail-role { margin-block-start: .2rem; color: var(--role-accent); font-size: var(--type-label); font-weight: 750; }
.role-nav { display: grid; gap: var(--s1); }
.role-nav-section { display: none; gap: .15rem; }
.role-applicant .role-nav, .role-applicant .role-nav-section--applicant { align-content: start; grid-auto-rows: max-content; }
.role-finance .role-nav, .role-finance .role-nav-section--finance { align-content: start; grid-auto-rows: max-content; }
.role-applicant .role-nav-section--applicant, .role-parent .role-nav-section--parent, .role-teacher .role-nav-section--teacher, .role-admin .role-nav-section--admin, .role-student .role-nav-section--student, .role-finance .role-nav-section--finance { display: grid; }
.public-page .role-rail, .public-page .mobile-nav { display: none; }
.mobile-nav-more { position: relative; min-inline-size: 0; }
.mobile-nav-more > summary { list-style: none; cursor: pointer; }
.mobile-nav-more > summary::-webkit-details-marker { display: none; }
.mobile-nav-more__panel { display: none; }
.mobile-nav-more[open] .mobile-nav-more__panel { display: grid; }
.authenticated .nav-links { display: none; }
.nav-group { margin: var(--s4) var(--s3) var(--s1); color: var(--c-muted); font-size: .675rem; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.nav-group:first-child { margin-block-start: var(--s2); }
.role-nav a {
    display: grid;
    grid-template-columns: 1.3rem minmax(0, 1fr);
    align-items: center;
    gap: var(--s3);
    min-block-size: 2.75rem;
    padding: .58rem var(--s3);
    border: 1px solid transparent;
    border-radius: .625rem;
    color: var(--c-muted);
    font-size: var(--type-small);
    font-weight: 650;
    transition: color var(--motion-micro), background var(--motion-micro), border-color var(--motion-micro), transform var(--motion-micro);
}
.role-nav a:hover, .role-nav a:focus-visible { color: var(--c-ink); background: var(--c-rail-hover); border-color: color-mix(in srgb, var(--role-accent) 18%, var(--c-surface-border)); }
.role-nav a[aria-current="page"] { color: var(--c-ink); background: var(--role-accent-soft); border-color: color-mix(in srgb, var(--role-accent) 30%, var(--c-surface-border)); box-shadow: inset .2rem 0 0 var(--role-accent); font-weight: 800; }
.role-nav a:active { transform: translateY(.0625rem); }
.role-nav a::before, .mobile-nav > a::before, .mobile-nav-more > summary::before, .mobile-nav-more__panel a::before {
    content: "";
    inline-size: 1.2rem;
    block-size: 1.2rem;
    justify-self: center;
    background: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
[data-nav-icon="home"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M3%2010.5%2012%203l9%207.5V21h-6v-6H9v6H3V10.5Z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M3%2010.5%2012%203l9%207.5V21h-6v-6H9v6H3V10.5Z%27%2F%3E%3C%2Fsvg%3E"); }
[data-nav-icon="users"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M8%2011a4%204%200%201%200%200-8%204%204%200%200%200%200%208Zm8-1a3.5%203.5%200%201%200%200-7%203.5%203.5%200%200%200%200%207ZM1%2021c0-4.4%203.1-7%207-7s7%202.6%207%207H1Zm14.2-7c4.5.1%207.8%202.5%207.8%207h-6c0-2.9-.7-5.2-1.8-7Z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M8%2011a4%204%200%201%200%200-8%204%204%200%200%200%200%208Zm8-1a3.5%203.5%200%201%200%200-7%203.5%203.5%200%200%200%200%207ZM1%2021c0-4.4%203.1-7%207-7s7%202.6%207%207H1Zm14.2-7c4.5.1%207.8%202.5%207.8%207h-6c0-2.9-.7-5.2-1.8-7Z%27%2F%3E%3C%2Fsvg%3E"); }
[data-nav-icon="staff"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202a4%204%200%201%201%200%208%204%204%200%200%201%200-8ZM4%2021c0-4.4%203.6-8%208-8%201.4%200%202.8.4%203.9%201l-2.2%202.2%201.4%201.4%202.4-2.4A8%208%200%200%201%2020%2021H4Z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202a4%204%200%201%201%200%208%204%204%200%200%201%200-8ZM4%2021c0-4.4%203.6-8%208-8%201.4%200%202.8.4%203.9%201l-2.2%202.2%201.4%201.4%202.4-2.4A8%208%200%200%201%2020%2021H4Z%27%2F%3E%3C%2Fsvg%3E"); }
[data-nav-icon="book"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M3%204.5C3%203.7%203.7%203%204.5%203H11v17H4.5A1.5%201.5%200%200%201%203%2018.5v-14ZM13%203h6.5c.8%200%201.5.7%201.5%201.5v14c0%20.8-.7%201.5-1.5%201.5H13V3Z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M3%204.5C3%203.7%203.7%203%204.5%203H11v17H4.5A1.5%201.5%200%200%201%203%2018.5v-14ZM13%203h6.5c.8%200%201.5.7%201.5%201.5v14c0%20.8-.7%201.5-1.5%201.5H13V3Z%27%2F%3E%3C%2Fsvg%3E"); }
[data-nav-icon="clipboard"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M8%203h2a2%202%200%200%201%204%200h2v2h3v17H5V5h3V3Zm2%205v2h6V8h-6Zm0%204v2h6v-2h-6Zm0%204v2h4v-2h-4Z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M8%203h2a2%202%200%200%201%204%200h2v2h3v17H5V5h3V3Zm2%205v2h6V8h-6Zm0%204v2h6v-2h-6Zm0%204v2h4v-2h-4Z%27%2F%3E%3C%2Fsvg%3E"); }
[data-nav-icon="checklist"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M4%204h16v16H4V4Zm3%204%201.4%201.4L11%206.8%2012.2%208l-3.8%203.8L5.8%209.2%207%208Zm6%201h4V7h-4v2Zm-6%205%201.4%201.4L11%2012.8l1.2%201.2-3.8%203.8-2.6-2.6L7%2014Zm6%201h4v-2h-4v2Z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M4%204h16v16H4V4Zm3%204%201.4%201.4L11%206.8%2012.2%208l-3.8%203.8L5.8%209.2%207%208Zm6%201h4V7h-4v2Zm-6%205%201.4%201.4L11%2012.8l1.2%201.2-3.8%203.8-2.6-2.6L7%2014Zm6%201h4v-2h-4v2Z%27%2F%3E%3C%2Fsvg%3E"); }
[data-nav-icon="focus"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20Zm0%204a6%206%200%201%201%200%2012%206%206%200%200%201%200-12Zm0%203a3%203%200%201%200%200%206%203%203%200%200%200%200-6Z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20Zm0%204a6%206%200%201%201%200%2012%206%206%200%200%201%200-12Zm0%203a3%203%200%201%200%200%206%203%203%200%200%200%200-6Z%27%2F%3E%3C%2Fsvg%3E"); }
[data-nav-icon="document"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M6%202h8l4%204v16H6V2Zm8%202.5V8h3.5L14%204.5ZM9%2012v2h6v-2H9Zm0%204v2h6v-2H9Z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M6%202h8l4%204v16H6V2Zm8%202.5V8h3.5L14%204.5ZM9%2012v2h6v-2H9Zm0%204v2h6v-2H9Z%27%2F%3E%3C%2Fsvg%3E"); }
[data-nav-icon="grade"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M4%203h16v18H4V3Zm3%204v2h10V7H7Zm0%204v2h6v-2H7Zm0%204v2h4v-2H7Zm9-4%201.2%202.4%202.8.4-2%202%20.5%202.8-2.5-1.3-2.5%201.3.5-2.8-2-2%202.8-.4L16%2011Z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M4%203h16v18H4V3Zm3%204v2h10V7H7Zm0%204v2h6v-2H7Zm0%204v2h4v-2H7Zm9-4%201.2%202.4%202.8.4-2%202%20.5%202.8-2.5-1.3-2.5%201.3.5-2.8-2-2%202.8-.4L16%2011Z%27%2F%3E%3C%2Fsvg%3E"); }
[data-nav-icon="attendance"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20Zm-1%2013.2-3.2-3.2%201.4-1.4%201.8%201.8%204.8-4.8%201.4%201.4-6.2%206.2Z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20Zm-1%2013.2-3.2-3.2%201.4-1.4%201.8%201.8%204.8-4.8%201.4%201.4-6.2%206.2Z%27%2F%3E%3C%2Fsvg%3E"); }
[data-nav-icon="calendar"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M6%202h2v2h8V2h2v2h3v18H3V4h3V2Zm-1%208v10h14V10H5Zm2%202h4v3H7v-3Z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M6%202h2v2h8V2h2v2h3v18H3V4h3V2Zm-1%208v10h14V10H5Zm2%202h4v3H7v-3Z%27%2F%3E%3C%2Fsvg%3E"); }
[data-nav-icon="message"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M3%203h18v14H8l-5%204V3Zm4%205v2h10V8H7Zm0%204v2h7v-2H7Z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M3%203h18v14H8l-5%204V3Zm4%205v2h10V8H7Zm0%204v2h7v-2H7Z%27%2F%3E%3C%2Fsvg%3E"); }
[data-nav-icon="enrollment"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M4%203h11l5%205v13H4V3Zm10%202.5V9h3.5L14%205.5ZM7%2012v2h10v-2H7Zm0%204v2h7v-2H7Z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M4%203h11l5%205v13H4V3Zm10%202.5V9h3.5L14%205.5ZM7%2012v2h10v-2H7Zm0%204v2h7v-2H7Z%27%2F%3E%3C%2Fsvg%3E"); }
[data-nav-icon="wallet"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M3%205h16a2%202%200%200%201%202%202v12H3V5Zm2%202v10h14v-3h-5a3%203%200%200%201%200-6h5V7H5Zm9%203a1%201%200%201%200%200%202h5v-2h-5Z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M3%205h16a2%202%200%200%201%202%202v12H3V5Zm2%202v10h14v-3h-5a3%203%200%200%201%200-6h5V7H5Zm9%203a1%201%200%201%200%200%202h5v-2h-5Z%27%2F%3E%3C%2Fsvg%3E"); }
[data-nav-icon="chart"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M4%2020V10h4v10H4Zm6%200V4h4v16h-4Zm6%200v-7h4v7h-4Z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M4%2020V10h4v10H4Zm6%200V4h4v16h-4Zm6%200v-7h4v7h-4Z%27%2F%3E%3C%2Fsvg%3E"); }
[data-nav-icon="settings"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M10%202h4l.6%202.2%202%20.8%202-1.1%202.8%202.8-1.1%202%20.8%202L23%2010v4l-2.2.6-.8%202%201.1%202-2.8%202.8-2-1.1-2%20.8L14%2023h-4l-.6-2.2-2-.8-2%201.1-2.8-2.8%201.1-2-.8-2L1%2014v-4l2.2-.6.8-2-1.1-2%202.8-2.8%202%201.1%202-.8L10%202Zm2%206a4%204%200%201%200%200%208%204%204%200%200%200%200-8Z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M10%202h4l.6%202.2%202%20.8%202-1.1%202.8%202.8-1.1%202%20.8%202L23%2010v4l-2.2.6-.8%202%201.1%202-2.8%202.8-2-1.1-2%20.8L14%2023h-4l-.6-2.2-2-.8-2%201.1-2.8-2.8%201.1-2-.8-2L1%2014v-4l2.2-.6.8-2-1.1-2%202.8-2.8%202%201.1%202-.8L10%202Zm2%206a4%204%200%201%200%200%208%204%204%200%200%200%200-8Z%27%2F%3E%3C%2Fsvg%3E"); }
[data-nav-icon="help"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20Zm0%2015.5a1.25%201.25%200%201%201%200%202.5%201.25%201.25%200%200%201%200-2.5ZM12%206c2.5%200%204%201.45%204%203.45%200%201.55-.85%202.5-2.2%203.3-.95.55-1.3.95-1.3%201.75h-2c0-1.9%201.15-2.85%202.3-3.55.95-.55%201.2-.9%201.2-1.5C14%208.55%2013.25%208%2012%208c-1.1%200-1.85.5-2.45%201.35L8%208.25C8.9%206.85%2010.2%206%2012%206Z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20Zm0%2015.5a1.25%201.25%200%201%201%200%202.5%201.25%201.25%200%200%201%200-2.5ZM12%206c2.5%200%204%201.45%204%203.45%200%201.55-.85%202.5-2.2%203.3-.95.55-1.3.95-1.3%201.75h-2c0-1.9%201.15-2.85%202.3-3.55.95-.55%201.2-.9%201.2-1.5C14%208.55%2013.25%208%2012%208c-1.1%200-1.85.5-2.45%201.35L8%208.25C8.9%206.85%2010.2%206%2012%206Z%27%2F%3E%3C%2Fsvg%3E"); }
[data-nav-icon="folder"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M3%205h7l2%202h9v13H3V5Zm2%204v9h14V9H5Z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M3%205h7l2%202h9v13H3V5Zm2%204v9h14V9H5Z%27%2F%3E%3C%2Fsvg%3E"); }
[data-nav-icon="more"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M5%2010a2%202%200%201%200%200%204%202%202%200%200%200%200-4Zm7%200a2%202%200%201%200%200%204%202%202%200%200%200%200-4Zm7%200a2%202%200%201%200%200%204%202%202%200%200%200%200-4Z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M5%2010a2%202%200%201%200%200%204%202%202%200%200%200%200-4Zm7%200a2%202%200%201%200%200%204%202%202%200%200%200%200-4Zm7%200a2%202%200%201%200%200%204%202%202%200%200%200%200-4Z%27%2F%3E%3C%2Fsvg%3E"); }
.logout-form { margin: 0; padding: 0; }
.logout-form button { inline-size: 100%; min-block-size: var(--target-min); border: 1px solid var(--c-line); border-radius: .625rem; color: var(--c-ink); background: var(--c-surface); cursor: pointer; font-weight: 700; }
.rail-footer { margin-block-start: auto; padding-block-start: var(--s5); }
.rail-platform-signature { display: flex; align-items: center; gap: var(--s2); margin-block-start: var(--s3); padding: var(--s2); border-block-start: 1px solid var(--c-shell-border); }
.rail-platform-signature img { inline-size: 2rem; block-size: 2rem; object-fit: contain; opacity: .78; }
.powered-by { margin: 0; color: var(--c-muted); font-size: .68rem; font-weight: 700; line-height: 1.25; text-align: start; }

.topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    min-block-size: var(--topbar-height);
    padding: .55rem clamp(var(--s5), 3vw, var(--s8));
    background: color-mix(in srgb, var(--c-surface) 97%, transparent);
    border-block-end: 1px solid var(--c-line);
    backdrop-filter: blur(.75rem);
}
.authenticated .topbar {
    background: color-mix(in srgb, var(--c-surface) 94%, var(--c-auth-canvas));
    border-block-end-color: var(--c-shell-border);
    box-shadow: 0 1px 0 rgba(22, 48, 33, .025);
}
.platform-compact-brand { min-inline-size: 0; }
.topbar-workspace { display: grid; gap: .05rem; min-inline-size: 0; padding-inline-start: var(--s3); border-inline-start: .18rem solid var(--brand-primary); }
.topbar-workspace__school { max-inline-size: 32rem; overflow: hidden; color: var(--c-ink); font-size: var(--type-small); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.topbar-workspace__role { color: var(--c-muted); font-size: var(--type-label); font-weight: 700; }
.topbar-utilities { display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); min-inline-size: 0; margin-inline-start: auto; }
.account-menu { position: relative; flex: 0 0 auto; }
.account-menu > summary { display: flex; align-items: center; gap: var(--s2); min-block-size: var(--target-min); padding: .25rem .55rem .25rem .3rem; border: 1px solid var(--c-control-border); border-radius: var(--r-pill); background: var(--c-surface); box-shadow: var(--shadow-subtle); cursor: pointer; list-style: none; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary:hover, .account-menu[open] > summary { border-color: color-mix(in srgb, var(--brand-primary) 38%, var(--c-line)); background: var(--brand-primary-soft); }
.account-menu__icon { color: var(--c-muted); font-size: 1.05rem; line-height: 1; }
.account-menu__panel { position: absolute; inset-block-start: calc(100% + var(--s2)); inset-inline-end: 0; z-index: 34; display: grid; gap: var(--s1); inline-size: min(18rem, calc(100vw - (2 * var(--s4)))); padding: var(--s3); border: 1px solid var(--c-surface-border); border-radius: var(--r-card); background: var(--c-surface); box-shadow: var(--shadow-float); }
.account-menu__identity { display: grid; gap: .15rem; padding: var(--s2) var(--s3) var(--s3); border-block-end: 1px solid var(--c-line); }
.account-menu__identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__identity small { color: var(--c-muted); font-weight: 700; }
.account-menu__panel > a { min-block-size: var(--target-min); display: flex; align-items: center; padding: var(--s2) var(--s3); border-radius: var(--r-field); color: var(--c-text); font-size: var(--type-small); font-weight: 700; }
.account-menu__panel > a:hover, .account-menu__panel > a:focus-visible { color: var(--c-ink); background: var(--brand-primary-soft); }
.account-menu__panel .language-switcher { border-block-start: 1px solid var(--c-line); padding-block-start: var(--s2); }
.account-menu__panel .language-switcher > summary { justify-content: start; }
.account-menu__panel .language-switcher form { inset-inline-end: auto; inset-inline-start: 0; }
.account-menu__logout { margin: 0; padding-block-start: var(--s2); border-block-start: 1px solid var(--c-line); }
.account-menu__logout button { inline-size: 100%; min-block-size: var(--target-min); border: 0; border-radius: var(--r-field); color: var(--c-ink); background: transparent; font-weight: 700; text-align: start; cursor: pointer; }
.account-menu__logout button:hover, .account-menu__logout button:focus-visible { background: var(--brand-primary-soft); }
.rail-role-badge { display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start; margin: var(--s3) var(--s2) var(--s2); padding: .35rem .6rem; border: 1px solid var(--rail-border, var(--c-surface-border)); border-radius: var(--r-pill); color: var(--rail-muted, var(--c-muted)); background: var(--rail-surface, transparent); font-size: .72rem; font-weight: 750; }
.app-legal-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s5); margin-block-start: auto; padding: var(--s5) clamp(var(--s5), 3vw, var(--s8)); border-block-start: 1px solid var(--c-line); color: var(--c-muted); font-size: var(--type-label); }
.app-legal-footer nav { display: flex; gap: var(--s4); }
.app-legal-footer a { color: var(--c-muted); font-weight: 700; }
.app-legal-footer a:hover, .app-legal-footer a:focus-visible { color: var(--brand-link); }
.authenticated .app-legal-footer { align-items: center; }
.authenticated .app-legal-footer a { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--target-min); min-block-size: var(--target-min); }
.nav-links { display: flex; align-items: center; gap: var(--s5); color: var(--c-muted); font-weight: 600; }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--c-ink); }
.nav-links .nav-login { display: inline-flex; align-items: center; min-block-size: var(--target-min); padding: var(--s2) var(--s4); border-radius: var(--r-button); color: var(--brand-on-primary); background: var(--brand-primary); }
.notification-link { position: relative; display: grid; place-items: center; flex: 0 0 auto; min-inline-size: var(--target-min); min-block-size: var(--target-min); padding: var(--s2); border: 1px solid var(--c-control-border); border-radius: var(--r-button); color: var(--c-ink); background: var(--c-surface); box-shadow: var(--shadow-subtle); transition: color var(--motion-micro), background var(--motion-micro), border-color var(--motion-micro); }
.notification-link:hover, .notification-link:focus-visible { color: var(--brand-link); background: var(--brand-primary-soft); border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--c-control-border)); }
.notification-link svg { inline-size: 1.35rem; block-size: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.notification-link__badge { position: absolute; inset-block-start: -.28rem; inset-inline-end: -.28rem; display: grid; place-items: center; min-inline-size: 1.25rem; block-size: 1.25rem; padding-inline: .22rem; border: .12rem solid var(--c-surface); border-radius: var(--r-pill); color: var(--brand-on-primary); background: var(--brand-primary); font-size: .66rem; font-weight: 850; line-height: 1; box-shadow: var(--shadow-subtle); }
.help-learning { position: relative; flex: 0 0 auto; color: var(--c-ink); }
.help-learning > summary { display: grid; place-items: center; min-inline-size: var(--target-min); min-block-size: var(--target-min); padding: var(--s2); border: 1px solid var(--c-control-border); border-radius: var(--r-button); color: var(--c-ink); background: var(--c-surface); box-shadow: var(--shadow-subtle); cursor: pointer; list-style: none; transition: color var(--motion-micro), background var(--motion-micro), border-color var(--motion-micro); }
.help-learning > summary::-webkit-details-marker { display: none; }
.help-learning > summary:hover, .help-learning[open] > summary { color: var(--brand-link); background: var(--brand-primary-soft); border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--c-control-border)); }
.help-learning__icon { display: grid; place-items: center; inline-size: 1.35rem; block-size: 1.35rem; border: .12rem solid currentColor; border-radius: 50%; font-size: .82rem; font-weight: 850; line-height: 1; }
.help-learning__panel { position: absolute; inset-block-start: calc(100% + var(--s2)); inset-inline-end: 0; z-index: 32; display: grid; gap: var(--s2); inline-size: min(22rem, calc(100vw - (2 * var(--s4)))); padding: var(--s4); border: 1px solid var(--c-surface-border); border-radius: var(--r-card); background: var(--c-surface); box-shadow: var(--shadow-float); }
.help-learning__eyebrow, .help-learning__detail { margin: 0; }
.help-learning__eyebrow { color: var(--role-accent); font-size: .68rem; font-weight: 850; letter-spacing: .075em; text-transform: uppercase; }
.help-learning__title { color: var(--c-ink); font-size: var(--type-body); }
.help-learning__detail { color: var(--c-muted); font-size: var(--type-small); line-height: 1.5; }
.help-learning__action { display: grid; gap: .2rem; min-block-size: var(--target-min); padding: var(--s3); border: 1px solid var(--c-surface-border); border-radius: var(--r-field); color: var(--c-text); background: var(--c-surface-low); transition: background var(--motion-micro), border-color var(--motion-micro), transform var(--motion-micro); }
.help-learning__action strong { color: var(--c-ink); font-size: var(--type-small); }
.help-learning__action span { color: var(--c-muted); font-size: var(--type-label); line-height: 1.4; }
.help-learning__action:hover, .help-learning__action:focus-visible { background: var(--role-accent-soft); border-color: color-mix(in srgb, var(--role-accent) 30%, var(--c-surface-border)); }
.help-learning__action:active { transform: translateY(.0625rem); }
.mobile-logout-form button { min-block-size: var(--target-min); border: 1px solid var(--c-line); border-radius: var(--r-button); color: var(--c-ink); background: var(--c-surface); font-weight: 700; cursor: pointer; }
.language-switcher { position: relative; flex: 0 0 auto; color: var(--c-ink); }
.language-switcher summary { display: grid; place-items: center; min-inline-size: var(--target-min); min-block-size: var(--target-min); padding: var(--s2); border: 1px solid var(--c-line); border-radius: var(--r-button); background: var(--c-surface); font-size: var(--type-label); font-weight: 700; cursor: pointer; list-style: none; transition: color var(--motion-micro), background var(--motion-micro), border-color var(--motion-micro); }
.language-switcher__globe { inline-size: 1.35rem; block-size: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.public-page-actions { display: flex; align-items: center; gap: var(--s2); }
.public-page-actions .button { min-block-size: var(--target-min); white-space: nowrap; }
.topbar-language { display: flex; align-items: center; }
.tenant-navigation .language-switcher > summary { min-block-size: var(--target-min); }
.tenant-nav-menu__language { padding: var(--s2) 0 0; }
.tenant-nav-menu__language .language-switcher, .tenant-nav-menu__language .language-switcher > form { position: static; }
.tenant-nav-menu__language .language-switcher > form { inset: auto; display: grid; grid-auto-flow: column; min-inline-size: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.tenant-nav-menu__language .language-switcher button { justify-content: center; border: 1px solid var(--c-line); border-radius: var(--r-field); }
.language-switcher summary::-webkit-details-marker { display: none; }
.language-switcher summary:hover, .language-switcher[open] summary { color: var(--brand-link); background: var(--brand-primary-soft); border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--c-line)); }
.language-switcher form { position: absolute; inset-block-start: calc(100% + var(--s2)); inset-inline-end: 0; z-index: 30; display: grid; min-inline-size: 10rem; padding: var(--s2); border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-surface); box-shadow: var(--shadow-float); }
.language-switcher button { display: flex; align-items: center; min-block-size: var(--target-min); padding: var(--s2) var(--s3); border: 0; border-radius: var(--r-field); color: var(--c-text); background: transparent; text-align: start; white-space: nowrap; cursor: pointer; }
.language-switcher button:hover, .language-switcher button:focus-visible { color: var(--c-ink); background: var(--c-surface-mid); }
.language-switcher button[aria-current="true"] { color: var(--brand-link); background: var(--brand-primary-soft); font-weight: 700; }

.dashboard-shell, .auth-shell { inline-size: min(100%, var(--content-max)); margin-inline: auto; padding: clamp(var(--s5), 2.4vw, var(--s8)); }
.stack { display: flex; flex-direction: column; gap: var(--s4); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.page-grid, .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: var(--s5); margin-block-end: var(--s5); }
.grid.one { grid-template-columns: minmax(0, 1fr); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dashboard-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(min(18rem, 100%), 1fr); gap: var(--s6); align-items: start; }

.c-status-hero, .dashboard-hero { position: relative; isolation: isolate; overflow: hidden; margin-block-end: var(--s8); padding: clamp(var(--s6), 4vw, var(--s10)); border-radius: var(--r-hero); color: var(--c-text); background: linear-gradient(135deg, var(--role-accent-soft), var(--brand-primary-soft)); border: 1px solid color-mix(in srgb, var(--role-accent) 14%, var(--c-line)); }
.c-status-hero::after, .dashboard-hero::after { content: ""; position: absolute; inset: auto -8% -68% auto; z-index: -1; inline-size: min(26rem, 58vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand-primary) 10%, transparent), transparent 66%); }
.c-status-hero h1, .dashboard-hero h1 { max-inline-size: 24ch; margin: var(--s1) 0 var(--s2); font-size: var(--type-h1); line-height: 1.15; letter-spacing: -.015em; }
.c-status-hero h2, .dashboard-hero h2 { margin: var(--s2) 0; font-size: var(--type-h3); color: var(--role-accent); }
.c-status-hero p, .dashboard-hero p { max-inline-size: 65ch; margin-block: var(--s2) 0; color: var(--c-muted); }
.eyebrow, .c-status-hero__eyebrow { margin: 0; color: var(--role-accent); font-size: var(--type-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.parent-gradient, .teacher-gradient, .admin-gradient, .student-gradient { background: linear-gradient(135deg, var(--role-accent-soft), var(--brand-primary-soft)); }

.c-surface, .c-card, .panel, .stat-card, .auth-card { min-inline-size: 0; padding: var(--s6); border-radius: var(--r-card); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow-subtle); }
.authenticated .c-surface, .authenticated .c-card, .authenticated .panel, .authenticated .stat-card { border-color: var(--c-surface-border); box-shadow: var(--auth-surface-shadow); }
.panel { margin-block-end: var(--s5); }
.grid > .panel, .grid > .c-card { margin-block-end: 0; }
.c-card--tonal { background: var(--c-surface-low); border-color: transparent; box-shadow: none; }
.c-card--attention { background: var(--brand-accent-soft); border-color: color-mix(in srgb, var(--c-warning) 24%, var(--c-line)); box-shadow: none; }
.c-card__header, .section-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-block-end: var(--s4); }
.c-card h2, .panel h2, .stat-card h2 { margin: 0 0 var(--s4); font-size: var(--type-h3); line-height: 1.3; }
.c-card__header h2, .section-header h2 { margin: 0; }
.c-card p, .panel p { color: var(--c-muted); }
.c-metric, .stat-card { display: grid; gap: var(--s2); }
.c-metric__label, .stat-card > span:first-child { color: var(--c-muted); font-size: var(--type-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.c-metric__value, .stat-card > strong { color: var(--c-ink); font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1; font-variant-numeric: tabular-nums; }
.c-metric__trend { color: var(--role-accent); font-size: var(--type-small); font-weight: 600; }
.c-chip, .status-pill { display: inline-flex; inline-size: max-content; align-items: center; min-block-size: var(--s8); padding: var(--s1) var(--s3); border-radius: var(--r-pill); color: var(--c-info); background: color-mix(in srgb, var(--c-info) 10%, var(--c-surface)); font-size: var(--type-label); font-weight: 700; }
.c-chip--success { color: var(--c-success); background: color-mix(in srgb, var(--c-success) 10%, var(--c-surface)); }
.c-chip--warning { color: var(--c-warning); background: color-mix(in srgb, var(--c-warning) 10%, var(--c-surface)); }
.c-chip--danger { color: var(--c-danger); background: color-mix(in srgb, var(--c-danger) 10%, var(--c-surface)); }
.c-chip--neutral { color: var(--c-muted); background: var(--c-surface-low); }
.c-list-row, .c-action-item, .feed-item { display: grid; gap: var(--s1); padding: var(--s4) 0; border-block-end: 1px solid var(--c-line); }
.authenticated .c-list-row, .authenticated .c-action-item, .authenticated .feed-item { border-block-end-color: var(--c-surface-border); }
.c-action-item:first-of-type, .feed-item:first-of-type { padding-block-start: 0; }
.c-action-item:last-child, .feed-item:last-child { padding-block-end: 0; border: 0; }
.c-action-item strong, .feed-item strong { color: var(--c-ink); }
.c-action-item p, .feed-item p { margin: 0; }
.quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); gap: var(--s3); }
.quick-action-link, .quick-action-text { display: flex; align-items: center; min-block-size: 3rem; padding: var(--s3) var(--s4); border-radius: var(--r-field); font-weight: 600; }
.quick-action-link { color: var(--brand-link); background: var(--brand-primary-soft); }


/* Authenticated role dashboards — COLCA-informed, CON8CT-owned composition */
.role-dashboard { display: grid; gap: var(--s4); }
.role-dashboard__greeting {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s6);
    padding: var(--s2) 0 var(--s1);
}
.role-dashboard__greeting h1 { margin: .1rem 0 .3rem; font-size: clamp(1.65rem, 2.6vw, 2.05rem); line-height: 1.12; letter-spacing: -.028em; }
.role-dashboard__greeting p { max-inline-size: 58ch; margin: 0; color: var(--c-muted); }
.role-dashboard__status { max-inline-size: 24rem; display: grid; justify-items: end; gap: var(--s2); text-align: end; }
.role-dashboard__status p { font-size: var(--type-small); }
.dashboard-kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s3); }
.dashboard-kpi {
    min-inline-size: 0;
    min-block-size: 7.4rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--s3);
    padding: var(--s4);
    border: 1px solid var(--c-surface-border);
    border-radius: calc(var(--r-card) * .68);
    background: var(--c-surface);
    box-shadow: var(--auth-surface-shadow);
    transition: border-color var(--motion-micro), box-shadow var(--motion-micro), transform var(--motion-micro);
}
.dashboard-kpi:hover { border-color: color-mix(in srgb, var(--brand-primary) 24%, var(--c-surface-border)); box-shadow: var(--auth-surface-hover-shadow); }
.dashboard-kpi__icon { inline-size: 3rem; block-size: 3rem; display: grid; place-items: center; border-radius: 50%; color: var(--brand-primary); background: var(--brand-primary-soft); }
.dashboard-kpi__icon svg { inline-size: 1.7rem; block-size: 1.7rem; fill: currentColor; }
.dashboard-kpi--secondary .dashboard-kpi__icon { color: var(--brand-secondary); background: var(--brand-secondary-soft); }
.dashboard-kpi--accent .dashboard-kpi__icon { color: var(--brand-accent); background: var(--brand-accent-soft); }
.dashboard-kpi--tertiary .dashboard-kpi__icon { color: color-mix(in srgb, var(--brand-primary) 65%, var(--brand-secondary)); background: color-mix(in srgb, var(--brand-primary-soft) 55%, var(--brand-secondary-soft)); }
.dashboard-kpi--neutral .dashboard-kpi__icon { color: var(--c-muted); background: var(--c-surface-mid); }
.dashboard-kpi--finance .dashboard-kpi__icon { color: color-mix(in srgb, var(--brand-accent) 70%, var(--brand-secondary)); background: color-mix(in srgb, var(--brand-accent-soft) 60%, var(--brand-secondary-soft)); }
.dashboard-kpi--finance small a { color: inherit; text-decoration: underline; text-underline-offset: .18em; }
.dashboard-kpi--finance small a:hover { color: var(--brand-primary); }
.dashboard-kpi > div { min-inline-size: 0; display: grid; gap: .2rem; }
.dashboard-kpi__label { color: var(--c-text); font-size: var(--type-small); font-weight: 700; }
.dashboard-kpi strong { color: var(--c-ink); font-size: clamp(1.6rem, 3vw, 2rem); line-height: 1; font-variant-numeric: tabular-nums; }
.dashboard-kpi small { color: var(--c-muted); font-size: var(--type-label); line-height: 1.35; }
.dashboard-content-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(18rem, .9fr); gap: var(--s4); align-items: stretch; }
.dashboard-panel { min-inline-size: 0; padding: var(--s5); border: 1px solid var(--c-surface-border); border-radius: calc(var(--r-card) * .72); background: var(--c-surface); box-shadow: var(--auth-surface-shadow); }
.dashboard-panel__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); margin-block-end: var(--s3); }
.dashboard-panel__header h2 { margin: 0; font-size: var(--type-h3); }
.dashboard-panel__header a { min-block-size: var(--target-min); display: inline-flex; align-items: center; color: var(--brand-link); font-size: var(--type-small); font-weight: 700; }
.dashboard-panel__intro { margin: 0 0 var(--s4); color: var(--c-muted); }
.dashboard-readiness-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.dashboard-readiness-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: start; min-block-size: 5.2rem; padding: var(--s3); border: 1px solid var(--c-surface-border); border-radius: calc(var(--r-card) * .6); background: var(--c-surface-low); }
.dashboard-readiness-item__mark { inline-size: 2rem; block-size: 2rem; display: grid; place-items: center; border-radius: 50%; color: var(--c-muted); background: var(--c-surface-mid); font-weight: 800; }
.dashboard-readiness-item.is-ready .dashboard-readiness-item__mark { color: var(--c-success); background: color-mix(in srgb, var(--c-success) 10%, var(--c-surface)); }
.dashboard-readiness-item strong { color: var(--c-ink); font-size: var(--type-small); }
.dashboard-readiness-item p { margin: .15rem 0 0; color: var(--c-muted); font-size: var(--type-label); }
.dashboard-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.dashboard-action { min-inline-size: 0; min-block-size: 4.35rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s2); padding: var(--s3); border: 1px solid var(--c-control-border); border-radius: calc(var(--r-card) * .6); color: var(--c-ink); background: var(--c-surface); font-size: var(--type-small); font-weight: 700; transition: border-color var(--motion-micro), background var(--motion-micro), box-shadow var(--motion-micro), transform var(--motion-micro); }
.dashboard-action:hover, .dashboard-action:focus-visible { border-color: color-mix(in srgb, var(--brand-primary) 38%, var(--c-control-border)); background: var(--brand-primary-soft); }
.dashboard-action:active { transform: translateY(.0625rem); }
.dashboard-action__marker { inline-size: 2rem; block-size: 2rem; display: grid; place-items: center; border-radius: 50%; color: var(--brand-primary); background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--brand-primary) 20%, var(--c-line)); font-size: 1.1rem; }
.dashboard-action__arrow { color: var(--brand-primary); font-size: 1.05rem; }
.dashboard-foundation { margin-block-end: var(--s2); }
.dashboard-foundation-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.dashboard-foundation-grid > div { min-inline-size: 0; padding: var(--s2) var(--s4); border-inline-start: 1px solid var(--c-line); }
.dashboard-foundation-grid > div:first-child { padding-inline-start: 0; border-inline-start: 0; }
.dashboard-foundation-grid strong { color: var(--c-ink); font-size: var(--type-small); }
.dashboard-foundation-grid p { margin: .25rem 0 0; color: var(--c-muted); font-size: var(--type-label); }
.quick-action-text { color: var(--c-muted); background: var(--c-surface-mid); }
.panel .price, .c-card .price { color: var(--c-ink); font-size: var(--type-body-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.empty-state { max-inline-size: 34rem; padding-block: var(--s6); }
.empty-state h3 { margin-block: 0 var(--s2); font-size: var(--type-h3); }
.empty-state p { margin: 0; }

.form-stack { display: grid; gap: var(--s5); }
.form-group, .form-stack label { display: grid; gap: var(--s2); color: var(--c-ink); font-weight: 600; }
.form-stack input, .form-stack textarea, .form-stack select, .form-group input, .form-group textarea, .form-group select, select { inline-size: 100%; min-block-size: 3rem; padding: var(--s3) var(--s4); border: 1px solid var(--c-line); border-radius: var(--r-field); color: var(--c-text); background: var(--c-surface); outline: 0; }
.form-stack textarea, .form-group textarea { min-block-size: 7.5rem; resize: vertical; }
.form-stack input:focus, .form-stack textarea:focus, .form-stack select:focus, .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--brand-focus); box-shadow: 0 0 0 .1875rem color-mix(in srgb, var(--brand-focus) 20%, transparent); }
.field-error { color: var(--c-danger); font-size: var(--type-small); }
.button { display: inline-flex; align-items: center; justify-content: center; min-block-size: 3rem; padding: var(--s3) var(--s5); border: 1px solid transparent; border-radius: var(--r-button); font-weight: 700; cursor: pointer; transition: color var(--motion-micro), transform var(--motion-micro), box-shadow var(--motion-micro), background var(--motion-micro), border-color var(--motion-micro); }
.button:hover { box-shadow: var(--shadow-subtle); }
.button:active { transform: translateY(.0625rem); }
.button.primary, .primary { color: var(--brand-on-primary); background: var(--brand-primary); border-color: var(--brand-primary); }
.button.primary:hover, .primary:hover { background: var(--brand-primary-strong); border-color: var(--brand-primary-strong); box-shadow: var(--shadow-card); }
.button.secondary, .button.ghost, .ghost { color: var(--c-ink); background: var(--c-surface); border: 1px solid var(--c-control-border); }
.button.secondary:hover, .button.ghost:hover, .ghost:hover { color: var(--brand-link); background: var(--brand-primary-soft); border-color: color-mix(in srgb, var(--brand-primary) 42%, var(--c-control-border)); }
.button.tertiary { color: var(--brand-link); background: transparent; border-color: transparent; box-shadow: none; }
.button.tertiary:hover { color: var(--c-ink); background: var(--c-surface-mid); box-shadow: none; }
.button.danger { color: var(--c-danger); background: color-mix(in srgb, var(--c-danger) 8%, var(--c-surface)); border: 1px solid color-mix(in srgb, var(--c-danger) 42%, var(--c-control-border)); }
.button.danger:hover { background: color-mix(in srgb, var(--c-danger) 13%, var(--c-surface)); border-color: color-mix(in srgb, var(--c-danger) 60%, var(--c-control-border)); }
.button:disabled, .button[aria-disabled="true"] { opacity: .56; cursor: not-allowed; transform: none; box-shadow: none; }
.access-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s4); }
.access-row__main { min-inline-size: 0; }
.access-row__actions { justify-content: flex-end; }
.alert { padding: var(--s4); border-radius: var(--r-field); color: var(--c-danger); background: color-mix(in srgb, var(--c-danger) 9%, var(--c-surface)); border: 1px solid color-mix(in srgb, var(--c-danger) 22%, var(--c-line)); }
.alert--success { color: var(--c-success); background: color-mix(in srgb, var(--c-success) 9%, var(--c-surface)); border-color: color-mix(in srgb, var(--c-success) 22%, var(--c-line)); }
.alert--info { color: var(--c-info); background: color-mix(in srgb, var(--c-info) 9%, var(--c-surface)); border-color: color-mix(in srgb, var(--c-info) 22%, var(--c-line)); }
.form-help { margin: 0; color: var(--c-muted); font-size: var(--type-small); font-weight: 400; }
.muted { color: var(--c-muted); }

.marketing-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(min(22rem, 100%), .85fr); align-items: center; gap: clamp(var(--s8), 7vw, 6rem); min-block-size: calc(100dvh - var(--topbar-height)); inline-size: min(100%, var(--content-max)); margin-inline: auto; padding: clamp(var(--s12), 8vw, 6rem) clamp(var(--s6), 5vw, var(--s16)); }
.hero-copy h1 { max-inline-size: 12ch; margin: var(--s3) 0 var(--s5); color: var(--c-ink); font-size: clamp(3rem, 7vw, 5.5rem); line-height: .96; letter-spacing: -.045em; }
.lede { max-inline-size: 58ch; color: var(--c-muted); font-size: var(--type-body-lg); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-block-start: var(--s6); }
.hero-visual { position: relative; min-block-size: 30rem; border-radius: var(--r-hero); background: radial-gradient(circle at 46% 42%, var(--c-surface) 0 14%, var(--brand-secondary-soft) 15% 29%, var(--brand-primary-soft) 30% 48%, var(--brand-accent-soft) 49% 64%, transparent 65%), var(--c-surface-low); box-shadow: var(--shadow-float); }
.connect-core { position: absolute; inset: 50% auto auto 50%; display: grid; place-items: center; gap: var(--s2); text-align: center; transform: translate(-50%, -50%); }
.connect-core span { display: grid; place-items: center; inline-size: 4.5rem; block-size: 4.5rem; border-radius: var(--r-panel); color: var(--brand-on-primary); background: var(--brand-primary); font-size: var(--type-h2); font-weight: 700; }
.orbit { position: absolute; display: grid; place-items: center; inline-size: 6.75rem; block-size: 6.75rem; border: var(--s2) solid color-mix(in srgb, var(--c-surface) 86%, transparent); border-radius: var(--r-panel); background: var(--c-surface); box-shadow: var(--shadow-card); font-weight: 700; }
.orbit-admin { inset: 8% 10% auto auto; color: #2b63c7; }
.orbit-teacher { inset: auto 5% 11% auto; color: #17876f; }
.orbit-parent { inset: auto auto 9% 8%; color: #7352d5; }
.orbit-student { inset: 10% auto auto 5%; color: #c56b26; }
.marketing-section, .setup-story { inline-size: min(100%, 73.75rem); margin-inline: auto; padding: var(--s16) clamp(var(--s6), 5vw, var(--s16)); }
.marketing-section > div:first-child { max-inline-size: 45rem; }
.marketing-section h2, .setup-story h2 { margin: var(--s2) 0 var(--s4); font-size: var(--type-display); line-height: 1.08; letter-spacing: -.02em; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: var(--s4); margin-block-start: var(--s8); }
.feature-grid article { display: grid; gap: var(--s2); padding: var(--s5); border-radius: var(--r-card); background: var(--c-surface); box-shadow: var(--shadow-subtle); }
.feature-grid span { color: var(--c-muted); }
.setup-story { margin-block-end: var(--s16); border-radius: var(--r-hero); background: var(--c-surface-mid); }
.setup-story ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); padding: 0; list-style-position: inside; }

.auth-shell { display: grid; place-items: center; min-block-size: calc(100dvh - var(--topbar-height)); }
.auth-card { inline-size: min(100%, 32.5rem); padding: clamp(var(--s8), 5vw, var(--s12)); box-shadow: var(--shadow-card); }
.auth-card h1 { margin: var(--s2) 0; font-size: var(--type-display); line-height: 1; }
.mobile-nav { display: none; }
.builder-page { display: grid; gap: var(--s5); }
.builder-status-panel { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); }
.builder-status-panel > div:first-child { min-inline-size: 0; flex: 1; }
.builder-status-panel .eyebrow { margin-block-end: var(--s3); }
.builder-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.builder-status-item { display: flex; align-items: flex-start; gap: var(--s3); min-inline-size: 0; }
.builder-status-item > div { min-inline-size: 0; }
.builder-status-item strong { display: block; color: var(--c-ink); font-size: var(--type-small); }
.builder-status-item p { margin: var(--s1) 0 0; color: var(--c-muted); font-size: var(--type-label); }
.builder-status-actions { flex: 0 0 auto; }
.builder-workspace { display: grid; grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.builder-outline { position: sticky; inset-block-start: calc(var(--topbar-height) + var(--s4)); display: grid; gap: var(--s5); max-block-size: calc(100dvh - var(--topbar-height) - (2 * var(--s4))); overflow: auto; box-shadow: var(--shadow-card); }
.builder-outline__intro h2 { margin: var(--s1) 0 var(--s2); font-size: var(--type-h2); }
.builder-outline__intro p:last-child { margin: 0; color: var(--c-muted); font-size: var(--type-small); }
.builder-site-style { display: grid; gap: var(--s4); padding-block-end: var(--s4); border-block-end: 1px solid var(--c-line); }
.builder-preset-form { display: grid; gap: var(--s3); }
.builder-preset-options { display: grid; gap: var(--s2); margin: 0; padding: 0; border: 0; }
.builder-preset-card { position: relative; display: grid; grid-template-columns: auto 3rem minmax(0, 1fr); align-items: center; gap: var(--s3); min-block-size: var(--target-min); padding: var(--s3); border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-surface); cursor: pointer; }
.builder-preset-card:hover { border-color: color-mix(in srgb, var(--brand-primary) 36%, var(--c-line)); background: var(--brand-primary-soft); }
.builder-preset-card:has(input:focus-visible) { outline: 3px solid var(--brand-focus); outline-offset: 2px; }
.builder-preset-card.is-selected { border-color: var(--brand-primary); box-shadow: inset 0 0 0 1px var(--brand-primary); }
.builder-preset-card input { inline-size: 1.1rem; block-size: 1.1rem; margin: 0; accent-color: var(--brand-primary); }
.builder-preset-card strong, .builder-preset-card small { display: block; }
.builder-preset-card small { margin-block-start: var(--s1); color: var(--c-muted); line-height: 1.4; }
.builder-preset-card__swatch { inline-size: 3rem; aspect-ratio: 1; border: 1px solid var(--c-line); border-radius: .7rem; background: linear-gradient(145deg, var(--brand-primary-soft), var(--c-surface) 58%, var(--brand-accent-soft)); }
.builder-preset-card__swatch[data-preset-swatch="MODERN_SCHOOL"] { border-radius: 1.05rem; background: linear-gradient(145deg, var(--brand-primary) 0 36%, var(--brand-accent-soft) 36% 62%, var(--c-surface) 62%); }
.builder-preset-card__swatch[data-preset-swatch="FAITH_COMMUNITY"] { border-radius: 50% 50% .85rem .85rem; background: radial-gradient(circle at 50% 36%, var(--brand-accent-soft) 0 22%, transparent 23%), linear-gradient(180deg, var(--c-surface) 0 48%, var(--brand-primary-soft) 48% 100%); }
.builder-preset-card__swatch[data-preset-swatch="EARLY_LEARNING"] { border-radius: 1.2rem; background: radial-gradient(circle at 28% 28%, var(--brand-accent-soft) 0 18%, transparent 19%), radial-gradient(circle at 72% 68%, var(--brand-secondary-soft) 0 22%, transparent 23%), linear-gradient(145deg, var(--brand-primary-soft), var(--c-surface)); }
.builder-pages { display: grid; gap: var(--s4); padding-block-end: var(--s4); border-block-end: 1px solid var(--c-line); }
.builder-page-list { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.builder-page-item { display: grid; gap: var(--s1); padding: var(--s1); border: 1px solid var(--c-line); border-radius: var(--r-field); background: var(--c-surface); }
.builder-page-link { min-block-size: var(--target-min); display: grid; gap: .2rem; padding: var(--s2); border: 1px solid transparent; border-radius: calc(var(--r-field) - 2px); color: var(--c-text); }
.builder-page-link__title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1); font-size: var(--type-small); font-weight: 800; }
.builder-page-link > small { color: var(--c-muted); font-size: var(--type-label); font-weight: 600; }
.builder-page-link:hover, .builder-page-link:focus-visible { color: var(--brand-link); background: var(--brand-primary-soft); }
.builder-page-link.is-active, .builder-page-link[aria-current="page"] { border-color: color-mix(in srgb, var(--brand-primary) 24%, var(--c-line)); color: var(--brand-link); background: var(--brand-primary-soft); }
.builder-page-menu-state { flex: 0 0 auto; font-size: .67rem; }
.builder-page-menu-state--hidden { color: var(--c-muted); background: var(--c-surface-mid); }
.builder-page-actions { display: grid; grid-template-columns: var(--target-min) var(--target-min) minmax(0, 1fr); gap: var(--s1); padding: 0 var(--s1) var(--s1); }
.builder-page-actions form { margin: 0; }
.builder-page-action, .builder-page-visibility { inline-size: 100%; min-block-size: var(--target-min); padding-inline: var(--s2); }
.builder-page-action { font-size: var(--type-h4); line-height: 1; }
.builder-page-action:disabled { opacity: .4; cursor: not-allowed; }
.builder-page-visibility { font-size: var(--type-label); }
.builder-page-menu-help { margin: 0; color: var(--c-muted); font-size: var(--type-label); line-height: 1.45; }
.builder-page-create { overflow: clip; border: 1px solid var(--c-line); border-radius: var(--r-field); background: var(--c-surface); }
.builder-page-create > summary { min-block-size: var(--target-min); display: flex; align-items: center; padding: var(--s2) var(--s3); color: var(--brand-link); cursor: pointer; font-size: var(--type-small); font-weight: 800; list-style: none; }
.builder-page-create > summary::-webkit-details-marker { display: none; }
.builder-page-create > summary::after { content: "+"; margin-inline-start: auto; font-size: var(--type-h4); }
.builder-page-create[open] > summary::after { content: "−"; }
.builder-page-create__form { padding: var(--s3); border-block-start: 1px solid var(--c-line); }
.builder-page-slug-field { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s2); }
.builder-page-slug-field > span { color: var(--c-muted); font-weight: 800; }
.builder-page-create small, .builder-page-limit { margin: 0; color: var(--c-muted); font-size: var(--type-label); line-height: 1.45; }
.builder-outline__current { padding-block-start: var(--s1); }
.builder-outline__list { display: grid; gap: var(--s1); margin: 0; padding: 0; list-style: none; }
.builder-outline__list a { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-block-size: var(--target-min); padding: var(--s2) var(--s3); border-radius: var(--r-field); color: var(--c-text); font-size: var(--type-small); font-weight: 700; }
.builder-outline__list a:hover, .builder-outline__list a:focus-visible { color: var(--brand-link); background: var(--brand-primary-soft); }
.builder-outline__state { flex: 0 0 auto; color: var(--c-muted); font-size: var(--type-label); font-weight: 700; }
.builder-outline__state--visible { color: var(--c-success); }
.builder-add-panel { display: grid; gap: var(--s3); padding-block-start: var(--s4); border-block-start: 1px solid var(--c-line); }
.builder-add-panel h3 { margin: 0; font-size: var(--type-h4); }
.builder-add-panel p { margin: 0; color: var(--c-muted); font-size: var(--type-small); }
.builder-add-panel label { color: var(--c-ink); font-size: var(--type-small); font-weight: 700; }
.builder-add-panel select { inline-size: 100%; }
.builder-editor { min-inline-size: 0; display: grid; gap: var(--s4); }
.builder-editor__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); }
.builder-editor__header h2 { margin: var(--s1) 0 var(--s2); }
.builder-editor__header p:last-child { margin: 0; max-inline-size: 62ch; }
.builder-edit-form { gap: var(--s4); }
.builder-section-list { display: grid; gap: var(--s3); }
.builder-section { overflow: clip; border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-surface); box-shadow: var(--shadow-subtle); }
.builder-section[open] { border-color: color-mix(in srgb, var(--brand-primary) 22%, var(--c-line)); box-shadow: var(--shadow-card); }
.builder-section > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3); min-block-size: var(--target-min); padding: var(--s4) var(--s5); cursor: pointer; list-style: none; }
.builder-section > summary::-webkit-details-marker { display: none; }
.builder-section > summary:hover, .builder-section > summary:focus-visible { background: var(--c-surface-low); }
.builder-section__order { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: var(--r-pill); color: var(--brand-link); background: var(--brand-primary-soft); font-size: var(--type-label); font-weight: 800; font-variant-numeric: tabular-nums; }
.builder-section__identity { min-inline-size: 0; display: grid; gap: var(--s1); }
.builder-section__identity strong { color: var(--c-ink); font-size: var(--type-h4); }
.builder-section__identity > span { overflow: hidden; color: var(--c-muted); font-size: var(--type-small); text-overflow: ellipsis; white-space: nowrap; }
.builder-section__body { display: grid; gap: var(--s5); padding: var(--s5); border-block-start: 1px solid var(--c-line); background: var(--c-surface-low); }
.builder-section__controls { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s4); }
.builder-reorder-controls { display: flex; flex-wrap: wrap; gap: var(--s2); }
.builder-button-compact { min-block-size: var(--target-min); padding: var(--s2) var(--s3); font-size: var(--type-small); }
.builder-button-compact:disabled { cursor: not-allowed; opacity: .45; box-shadow: none; }
.builder-required-note { display: grid; justify-items: end; gap: var(--s1); max-inline-size: 24rem; text-align: end; }
.builder-required-note p { margin: 0; color: var(--c-muted); font-size: var(--type-small); }
.builder-visibility-control { display: flex !important; grid-template-columns: none !important; align-items: flex-start; gap: var(--s3) !important; max-inline-size: 28rem; padding: var(--s3) var(--s4); border: 1px solid var(--c-line); border-radius: var(--r-field); background: var(--c-surface); cursor: pointer; }
.form-stack .builder-visibility-control input[type="checkbox"] { flex: 0 0 auto; inline-size: 1.25rem; min-block-size: 1.25rem; block-size: 1.25rem; margin-block-start: .15rem; padding: 0; accent-color: var(--brand-primary); }
.builder-visibility-control span { display: grid; gap: var(--s1); }
.builder-visibility-control strong { color: var(--c-ink); }
.builder-visibility-control small { color: var(--c-muted); font-size: var(--type-label); font-weight: 500; }
.builder-editor-guide { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--s3); padding: var(--s4); border: 1px solid color-mix(in srgb, var(--brand-primary) 14%, var(--c-line)); border-radius: var(--r-field); background: color-mix(in srgb, var(--brand-primary-soft) 46%, var(--c-surface)); }
.builder-editor-guide .c-chip { align-self: start; }
.builder-editor-guide strong { display: block; color: var(--c-ink); font-size: var(--type-small); }
.builder-editor-guide p { margin: var(--s1) 0 0; max-inline-size: 68ch; color: var(--c-muted); font-size: var(--type-small); line-height: 1.55; }
.builder-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.builder-field-grid__wide { grid-column: 1 / -1; }
.builder-action-editor { overflow: clip; border: 1px solid var(--c-line); border-radius: var(--r-field); background: var(--c-surface); }
.builder-action-editor > summary { min-block-size: var(--target-min); display: flex; align-items: center; padding: var(--s3) var(--s4); color: var(--c-ink); cursor: pointer; font-size: var(--type-small); font-weight: 800; list-style: none; }
.builder-action-editor > summary::-webkit-details-marker { display: none; }
.builder-action-editor > summary::after { content: "+"; margin-inline-start: auto; color: var(--brand-link); font-size: var(--type-h3); font-weight: 500; line-height: 1; }
.builder-action-editor[open] > summary::after { content: "−"; }
.builder-action-editor > summary:hover, .builder-action-editor > summary:focus-visible { background: var(--brand-primary-soft); }
.builder-action-editor__body { display: grid; gap: var(--s4); padding: 0 var(--s4) var(--s4); border-block-start: 1px solid var(--c-line); }
.builder-action-editor__body > p { margin: var(--s3) 0 0; color: var(--c-muted); font-size: var(--type-label); line-height: 1.5; }
.builder-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.builder-save-bar { position: sticky; inset-block-end: var(--s3); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); border: 1px solid color-mix(in srgb, var(--brand-primary) 14%, var(--c-line)); box-shadow: var(--shadow-card); }
.builder-save-bar p { margin: 0; color: var(--c-muted); font-size: var(--type-small); }
.builder-preview-panel { display: grid; gap: var(--s4); overflow: hidden; box-shadow: var(--shadow-card); }
.builder-preview-panel__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); }
.builder-preview-panel__header h2 { margin: var(--s1) 0 var(--s2); }
.builder-preview-panel__header p:last-child { margin: 0; max-inline-size: 64ch; color: var(--c-muted); }
.builder-preview-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s3); }
.builder-preview-devices { display: inline-flex; flex-wrap: wrap; gap: var(--s1); padding: var(--s1); border: 1px solid var(--c-line); border-radius: var(--r-button); background: var(--c-surface-low); }
.builder-preview-devices .button { border-color: transparent; background: transparent; box-shadow: none; }
.builder-preview-devices .button.is-active, .builder-preview-devices .button[aria-pressed="true"] { color: var(--brand-on-primary); background: var(--brand-primary); }
.builder-preview-canvas { inline-size: 100%; min-block-size: 32rem; overflow: auto; padding: var(--s4); border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-surface-low); }
.builder-preview-surface { inline-size: 100%; min-inline-size: 0; margin-inline: auto; overflow: clip; border: 1px solid color-mix(in srgb, var(--brand-primary) 12%, var(--c-line)); border-radius: var(--r-card); background: var(--c-surface); box-shadow: var(--shadow-float); font-family: var(--font-primary); }
.builder-preview-canvas[data-preview-device="desktop"] .builder-preview-surface { max-inline-size: 72rem; }
.builder-preview-canvas[data-preview-device="tablet"] .builder-preview-surface { max-inline-size: 48rem; }
.builder-preview-canvas[data-preview-device="mobile"] .builder-preview-surface { max-inline-size: 24.375rem; }
.builder-preview-surface .tenant-preview { position: static; }
.builder-preview-surface .tenant-header { position: relative; }
.builder-preview-note { margin: 0; color: var(--c-muted); font-size: var(--type-label); }

.builder-preview-canvas[data-preview-device="tablet"] .tenant-header__inner, .builder-preview-canvas[data-preview-device="mobile"] .tenant-header__inner { min-block-size: 4.5rem; padding: var(--s2) var(--s4); gap: var(--s3); }
.builder-preview-canvas[data-preview-device="tablet"] .tenant-brand, .builder-preview-canvas[data-preview-device="mobile"] .tenant-brand { flex: 1 1 auto; font-size: var(--type-body); }
.builder-preview-canvas[data-preview-device="tablet"] .tenant-brand img, .builder-preview-canvas[data-preview-device="mobile"] .tenant-brand img { max-inline-size: 7rem; block-size: 2.75rem; }
.builder-preview-canvas[data-preview-device="tablet"] .tenant-brand span, .builder-preview-canvas[data-preview-device="mobile"] .tenant-brand span { max-inline-size: 42%; display: block; }
.builder-preview-canvas[data-preview-device="tablet"] .tenant-navigation--desktop, .builder-preview-canvas[data-preview-device="mobile"] .tenant-navigation--desktop { display: none; }
.builder-preview-canvas[data-preview-device="tablet"] .tenant-mobile-actions, .builder-preview-canvas[data-preview-device="mobile"] .tenant-mobile-actions { display: flex; }
.builder-preview-canvas[data-preview-device="tablet"] .tenant-portal-link--mobile, .builder-preview-canvas[data-preview-device="mobile"] .tenant-portal-link--mobile { display: inline-flex; align-items: center; justify-content: center; padding-inline: var(--s3); font-size: var(--type-label); }
.builder-preview-canvas[data-preview-device="tablet"] .tenant-footer__inner, .builder-preview-canvas[data-preview-device="mobile"] .tenant-footer__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.builder-preview-canvas[data-preview-device="tablet"] .tenant-footer__navigation, .builder-preview-canvas[data-preview-device="mobile"] .tenant-footer__navigation { gap: var(--s1) var(--s4); }
.builder-preview-canvas[data-preview-device="tablet"] .tenant-footer__powered, .builder-preview-canvas[data-preview-device="mobile"] .tenant-footer__powered { white-space: normal; }
.builder-preview-canvas[data-preview-device="tablet"] :is(.tenant-purpose-grid, .tenant-program-layout, .tenant-community-layout, .tenant-admissions-panel, .tenant-contact-grid), .builder-preview-canvas[data-preview-device="mobile"] :is(.tenant-purpose-grid, .tenant-program-layout, .tenant-community-layout, .tenant-admissions-panel, .tenant-contact-grid) { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
.builder-preview-canvas[data-preview-device="tablet"] .tenant-community-mark, .builder-preview-canvas[data-preview-device="mobile"] .tenant-community-mark { order: 2; min-block-size: 16rem; }
.builder-preview-canvas[data-preview-device="tablet"] .tenant-program-art, .builder-preview-canvas[data-preview-device="mobile"] .tenant-program-art { min-block-size: 17rem; }
.builder-preview-canvas[data-preview-device="tablet"] .tenant-highlight-list, .builder-preview-canvas[data-preview-device="mobile"] .tenant-highlight-list { grid-template-columns: minmax(0, 1fr); }
.builder-preview-canvas[data-preview-device="mobile"] .tenant-section { padding: var(--s12) var(--s5); }
.builder-preview-canvas[data-preview-device="mobile"] .tenant-hero { min-block-size: 34rem; }
.builder-preview-canvas[data-preview-device="mobile"] .tenant-hero__content { margin-inline: 0; }
.builder-preview-canvas[data-preview-device="mobile"] .tenant-hero__mark { inset-inline-end: var(--s4); inline-size: 9rem; opacity: .55; }
.builder-preview-canvas[data-preview-device="mobile"] .tenant-story { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.builder-preview-canvas[data-preview-device="mobile"] :is(.tenant-purpose-statement, .tenant-admissions-panel, .tenant-contact-card) { padding: var(--s5); border-radius: var(--r-card); }
.builder-preview-canvas[data-preview-device="mobile"] :is(.tenant-program-art, .tenant-community-mark) { min-block-size: 13rem; }
.builder-preview-canvas[data-preview-device="mobile"] .tenant-event-card { min-block-size: 8rem; }
.builder-preview-canvas[data-preview-device="mobile"] .tenant-footer { padding: var(--s8) var(--s5); }
.color-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }

/* UI-7A admin branding surface: reuse dashboard visual language for settings pages. */
.admin-settings-heading__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-top: var(--s4);
}

.admin-settings-grid--branding {
    align-items: start;
}

.admin-settings-grid--branding .c-card {
    min-block-size: 100%;
}

.admin-settings-grid--branding .form-group label {
    font-weight: 600;
}

.branding-logo-preview { max-inline-size: min(20rem, 100%); max-block-size: 8rem; margin-block: var(--s4); object-fit: contain; }
.tenant-site { --tenant-primary: var(--brand-primary); --tenant-secondary: var(--brand-secondary); --tenant-accent: var(--brand-accent); --site-display-font: var(--font-primary); --site-section-space: var(--s16); --site-surface-radius: var(--r-card); background: var(--c-surface); }
.tenant-site[data-site-preset="CLASSIC_ACADEMIC"] { --site-display-font: Georgia, 'Times New Roman', serif; --site-section-space: var(--s16); --site-surface-radius: .75rem; }
.tenant-site[data-site-preset="MODERN_SCHOOL"] { --site-display-font: var(--font-primary); --site-section-space: clamp(var(--s12), 8vw, 6rem); --site-surface-radius: 1.6rem; }
.tenant-site[data-site-preset="FAITH_COMMUNITY"] { --site-display-font: Georgia, 'Times New Roman', serif; --site-section-space: clamp(var(--s12), 7vw, 5.5rem); --site-surface-radius: 1.1rem; }
.tenant-site[data-site-preset="EARLY_LEARNING"] { --site-display-font: var(--font-primary); --site-section-space: clamp(var(--s10), 6vw, 5rem); --site-surface-radius: 1.75rem; }
.tenant-site[data-site-preset="CLASSIC_ACADEMIC"] :is(.tenant-hero h1, .tenant-section h2) { font-family: var(--site-display-font); font-weight: 650; letter-spacing: -.025em; }
.tenant-site[data-site-preset="CLASSIC_ACADEMIC"] .tenant-header { border-block-start: .25rem solid var(--tenant-primary); }
.tenant-site[data-site-preset="CLASSIC_ACADEMIC"] .tenant-hero { background: linear-gradient(120deg, var(--c-surface), var(--brand-primary-soft) 64%, var(--brand-accent-soft)); }
.tenant-site[data-site-preset="MODERN_SCHOOL"] .tenant-header__inner { min-block-size: calc(var(--topbar-height) + var(--s4)); }
.tenant-site[data-site-preset="MODERN_SCHOOL"] .tenant-brand { letter-spacing: -.035em; }
.tenant-site[data-site-preset="MODERN_SCHOOL"] .tenant-hero { min-block-size: min(46rem, 82dvh); background: linear-gradient(145deg, var(--brand-primary-soft), var(--c-surface) 48%, var(--brand-secondary-soft)); }
.tenant-site[data-site-preset="MODERN_SCHOOL"] .tenant-hero::before { inset: -24% -8% auto auto; inline-size: min(48rem, 82vw); border-radius: 32% 68% 58% 42% / 42% 34% 66% 58%; background: linear-gradient(135deg, color-mix(in srgb, var(--tenant-primary) 22%, transparent), color-mix(in srgb, var(--tenant-accent) 18%, transparent)); transform: rotate(12deg); }
.tenant-site[data-site-preset="MODERN_SCHOOL"] :is(.tenant-purpose-statement, .tenant-admissions-panel, .tenant-contact-card, .tenant-event-card) { border-radius: var(--site-surface-radius); }
.tenant-site[data-site-preset="MODERN_SCHOOL"] .tenant-action { border-radius: var(--r-pill); }
.tenant-site[data-site-preset="FAITH_COMMUNITY"] :is(.tenant-hero h1, .tenant-section h2) { font-family: var(--site-display-font); font-weight: 650; letter-spacing: -.02em; }
.tenant-site[data-site-preset="FAITH_COMMUNITY"] .tenant-header { border-block-start: .2rem solid var(--tenant-accent); background: color-mix(in srgb, var(--c-surface) 97%, var(--tenant-primary)); }
.tenant-site[data-site-preset="FAITH_COMMUNITY"] .tenant-hero { min-block-size: min(43rem, 80dvh); background: linear-gradient(180deg, var(--c-surface) 0 58%, var(--brand-accent-soft) 100%); }
.tenant-site[data-site-preset="FAITH_COMMUNITY"] .tenant-hero::before { inset: auto -8% -42% auto; inline-size: min(44rem, 84vw); background: radial-gradient(circle, color-mix(in srgb, var(--tenant-primary) 16%, transparent), transparent 69%); }
.tenant-site[data-site-preset="FAITH_COMMUNITY"] .tenant-hero__content { text-align: center; margin-inline: auto; padding-inline: clamp(var(--s6), 6vw, var(--s16)); }
.tenant-site[data-site-preset="FAITH_COMMUNITY"] .tenant-hero h1, .tenant-site[data-site-preset="FAITH_COMMUNITY"] .tenant-hero p { margin-inline: auto; }
.tenant-site[data-site-preset="FAITH_COMMUNITY"] .tenant-hero__mark { inset-inline: 50% auto; inline-size: min(15rem, 34vw); opacity: .48; transform: translateX(-50%); }
.tenant-site[data-site-preset="FAITH_COMMUNITY"] :is(.tenant-purpose-statement, .tenant-admissions-panel, .tenant-contact-card, .tenant-event-card) { border-radius: var(--site-surface-radius); box-shadow: 0 .5rem 1.5rem color-mix(in srgb, var(--tenant-primary) 9%, transparent); }
.tenant-site[data-site-preset="FAITH_COMMUNITY"] .tenant-action { border-radius: var(--r-pill); }
.tenant-site[data-site-preset="EARLY_LEARNING"] :is(.tenant-hero h1, .tenant-section h2) { font-family: var(--site-display-font); font-weight: 800; letter-spacing: -.035em; }
.tenant-site[data-site-preset="EARLY_LEARNING"] .tenant-header { border-block-end: .2rem solid var(--brand-accent-soft); background: color-mix(in srgb, var(--c-surface) 96%, var(--tenant-primary)); }
.tenant-site[data-site-preset="EARLY_LEARNING"] .tenant-hero { min-block-size: min(40rem, 76dvh); background: radial-gradient(circle at 14% 24%, var(--brand-accent-soft) 0 8%, transparent 8.5%), radial-gradient(circle at 88% 74%, var(--brand-secondary-soft) 0 11%, transparent 11.5%), linear-gradient(145deg, var(--brand-primary-soft), var(--c-surface) 52%, var(--brand-accent-soft)); }
.tenant-site[data-site-preset="EARLY_LEARNING"] .tenant-hero::before { inset: auto -10% -38% auto; inline-size: min(40rem, 82vw); border-radius: 54% 46% 38% 62% / 58% 36% 64% 42%; background: color-mix(in srgb, var(--tenant-primary) 13%, transparent); transform: rotate(-8deg); }
.tenant-site[data-site-preset="EARLY_LEARNING"] .tenant-eyebrow { inline-size: fit-content; padding: .35rem .7rem; border-radius: var(--r-pill); background: var(--brand-accent-soft); }
.tenant-site[data-site-preset="EARLY_LEARNING"] :is(.tenant-purpose-statement, .tenant-admissions-panel, .tenant-contact-card, .tenant-event-card) { border-radius: var(--site-surface-radius); border-width: .125rem; box-shadow: 0 .65rem 1.5rem color-mix(in srgb, var(--tenant-primary) 8%, transparent); }
.tenant-site[data-site-preset="EARLY_LEARNING"] .tenant-action { border-radius: var(--r-pill); }
.tenant-preview { position: relative; z-index: 30; padding: var(--s2) var(--s4); color: var(--brand-on-primary); background: var(--tenant-primary); font-size: var(--type-small); font-weight: 700; text-align: center; }
.tenant-header { position: sticky; inset-block-start: 0; z-index: 20; border-block-end: 1px solid color-mix(in srgb, var(--tenant-primary) 12%, var(--c-line)); background: color-mix(in srgb, var(--c-surface) 94%, transparent); box-shadow: 0 .5rem 1.5rem rgba(30, 43, 84, .04); backdrop-filter: blur(.9rem); }
.tenant-header__inner { inline-size: min(100%, calc(var(--content-max) + (2 * var(--s8)))); min-block-size: calc(var(--topbar-height) + var(--s2)); margin-inline: auto; padding: var(--s3) clamp(var(--s5), 4vw, var(--s8)); display: flex; align-items: center; justify-content: space-between; gap: var(--s6); }
.tenant-brand { min-inline-size: 0; display: inline-flex; align-items: center; gap: var(--s3); color: var(--tenant-primary); font-size: var(--type-h3); font-weight: 750; letter-spacing: -.02em; }
.tenant-brand img { inline-size: auto; max-inline-size: min(10rem, 28vw); block-size: 3.25rem; object-fit: contain; object-position: left center; }
.tenant-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tenant-navigation { display: flex; align-items: center; justify-content: flex-end; gap: var(--s1) clamp(var(--s3), 2vw, var(--s5)); color: var(--c-muted); font-size: var(--type-small); font-weight: 700; }
.tenant-navigation a { min-block-size: var(--target-min); display: inline-flex; align-items: center; border-block-end: .125rem solid transparent; }
.tenant-navigation a:hover, .tenant-navigation a:focus-visible { color: var(--tenant-primary); border-block-end-color: color-mix(in srgb, var(--tenant-primary) 40%, transparent); }
.tenant-navigation a[aria-current="page"] { color: var(--tenant-primary); border-block-end-color: var(--tenant-primary); }
.tenant-portal-link { min-block-size: var(--target-min); padding: var(--s2) var(--s4); border: 1px solid color-mix(in srgb, var(--tenant-primary) 28%, var(--c-line)); border-radius: var(--r-button); color: var(--tenant-primary); background: var(--brand-primary-soft); font-weight: 750; }
.tenant-navigation .tenant-portal-link:hover, .tenant-navigation .tenant-portal-link:focus-visible, .tenant-portal-link--mobile:hover, .tenant-portal-link--mobile:focus-visible { color: var(--brand-on-primary); border-color: var(--tenant-primary); background: var(--tenant-primary); }
.tenant-mobile-actions { display: none; align-items: center; gap: var(--s2); }
.tenant-nav-menu { position: relative; }
.tenant-nav-menu > summary { min-block-size: var(--target-min); display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s2) var(--s3); border: 1px solid var(--c-line); border-radius: var(--r-button); color: var(--c-ink); background: var(--c-surface); font-size: var(--type-small); font-weight: 750; cursor: pointer; list-style: none; }
.tenant-nav-menu > summary::-webkit-details-marker { display: none; }
.tenant-nav-menu > summary:hover, .tenant-nav-menu > summary:focus-visible, .tenant-nav-menu[open] > summary { border-color: color-mix(in srgb, var(--tenant-primary) 40%, var(--c-line)); color: var(--tenant-primary); background: var(--brand-primary-soft); }
.tenant-nav-menu__icon { inline-size: 1.15rem; display: grid; gap: .18rem; }
.tenant-nav-menu__icon > span { display: block; block-size: .125rem; border-radius: var(--r-pill); background: currentColor; }
.tenant-nav-menu__panel { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + var(--s2)); inline-size: min(19rem, calc(100vw - (2 * var(--s4)))); max-block-size: min(65dvh, 30rem); overflow-y: auto; display: grid; gap: var(--s1); padding: var(--s3); border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-surface); box-shadow: var(--shadow-float); }
.tenant-nav-menu__panel a { min-block-size: var(--target-min); display: flex; align-items: center; padding: var(--s2) var(--s3); border-radius: var(--r-field); color: var(--c-ink); font-size: var(--type-small); font-weight: 700; }
.tenant-nav-menu__panel a:hover, .tenant-nav-menu__panel a:focus-visible { color: var(--tenant-primary); background: var(--brand-primary-soft); }
.tenant-nav-menu__panel a[aria-current="page"] { color: var(--tenant-primary); background: var(--brand-primary-soft); }
.tenant-nav-menu__portal { margin-block-start: var(--s2); border-block-start: 1px solid var(--c-line); }
.tenant-section { scroll-margin-block-start: calc(var(--topbar-height) + var(--s8)); padding: var(--site-section-space) clamp(var(--s6), 5vw, var(--s16)); }
.tenant-section__inner { inline-size: min(100%, var(--reading-max)); margin-inline: auto; }
.tenant-section__inner--wide { inline-size: min(100%, var(--content-max)); }
.tenant-section__heading { max-inline-size: var(--reading-max); margin-block-end: var(--s8); }
.tenant-section h2 { margin: var(--s2) 0 var(--s4); font-size: var(--type-display); line-height: 1.08; letter-spacing: -.02em; }
.tenant-section__lede { color: var(--c-ink); font-size: var(--type-body-lg); }
.tenant-eyebrow { margin: 0; color: var(--tenant-primary); font-size: var(--type-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tenant-hero { position: relative; isolation: isolate; display: grid; align-content: center; min-block-size: min(42rem, 78dvh); overflow: hidden; color: var(--c-text); background: linear-gradient(135deg, var(--brand-primary-soft), var(--c-surface) 58%, var(--brand-secondary-soft)); }
.tenant-hero::before { content: ""; position: absolute; inset: -40% -18% auto auto; z-index: -1; inline-size: min(42rem, 78vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tenant-primary) 22%, transparent), transparent 68%); }
.tenant-hero__content { margin-inline: max(clamp(var(--s6), 5vw, var(--s16)), calc((100% - var(--content-max)) / 2)); }
.tenant-hero h1 { max-inline-size: 14ch; margin: var(--s2) 0 var(--s4); font-size: clamp(2.5rem, 6vw, 4.75rem); line-height: .98; letter-spacing: -.035em; }
.tenant-hero p { max-inline-size: 58ch; }
.tenant-hero__mark { position: absolute; inset: auto clamp(var(--s6), 8vw, 8rem) var(--s16) auto; z-index: -1; display: grid; gap: var(--s3); inline-size: min(17rem, 28vw); transform: rotate(-8deg); }
.tenant-hero__mark span { display: block; block-size: var(--s6); border-radius: var(--r-pill); background: color-mix(in srgb, var(--tenant-primary) 72%, var(--c-surface)); box-shadow: var(--shadow-card); }
.tenant-hero__mark span:nth-child(2) { inline-size: 78%; margin-inline-start: 18%; background: color-mix(in srgb, var(--tenant-secondary) 70%, var(--c-surface)); }
.tenant-hero__mark span:nth-child(3) { inline-size: 58%; margin-inline-start: 38%; background: color-mix(in srgb, var(--tenant-accent) 74%, var(--c-surface)); }
.tenant-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-block-start: var(--s5); }
.tenant-action { display: inline-flex; align-items: center; justify-content: center; min-block-size: 3rem; padding: var(--s3) var(--s5); border-radius: var(--r-button); color: var(--brand-on-primary); background: var(--tenant-primary); font-weight: 700; transition: transform var(--motion-micro), box-shadow var(--motion-micro), background var(--motion-micro); }
.tenant-action:hover { background: var(--brand-primary-strong); box-shadow: var(--shadow-card); }
.tenant-action:active { transform: translateY(.0625rem); }
.tenant-action--secondary { color: var(--c-ink); background: var(--c-surface); border: 1px solid var(--c-line); }
.tenant-action--secondary:hover { background: var(--c-surface-low); }
.tenant-story { display: grid; grid-template-columns: minmax(10rem, .45fr) minmax(0, 1fr); gap: var(--s8); }
.tenant-story h2 { margin-block-start: 0; }
.tenant-mission, .tenant-student-life, .tenant-announcements, .tenant-staff, .tenant-testimonial { background: var(--c-surface-low); }
.tenant-academics, .tenant-events { background: linear-gradient(135deg, var(--c-surface), var(--brand-secondary-soft)); }
.tenant-admissions, .tenant-contact, .tenant-map { background: linear-gradient(135deg, var(--brand-primary-soft), var(--c-surface)); }

.tenant-purpose-grid { display: grid; grid-template-columns: minmax(14rem, .7fr) minmax(0, 1.3fr); gap: clamp(var(--s8), 7vw, var(--s16)); align-items: center; }
.tenant-purpose-copy h2 { max-inline-size: 11ch; }
.tenant-purpose-statement { position: relative; padding: clamp(var(--s6), 4vw, var(--s10)); border: 1px solid color-mix(in srgb, var(--tenant-primary) 16%, var(--c-line)); border-radius: var(--r-hero); background: var(--c-surface); box-shadow: var(--shadow-card); }
.tenant-purpose-statement__mark { display: block; inline-size: 4.5rem; block-size: .35rem; margin-block-end: var(--s5); border-radius: var(--r-pill); background: linear-gradient(90deg, var(--tenant-primary), var(--tenant-secondary), var(--tenant-accent)); }
.tenant-purpose-statement > p { margin: 0; color: var(--c-ink); font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.45; }
.tenant-program-layout, .tenant-community-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(16rem, .9fr); gap: clamp(var(--s8), 7vw, var(--s16)); align-items: center; }
.tenant-program-copy, .tenant-community-copy { max-inline-size: 42rem; }
.tenant-program-art { min-block-size: 24rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); gap: var(--s3); padding: var(--s4); border-radius: var(--r-hero); background: color-mix(in srgb, var(--tenant-primary) 8%, var(--c-surface)); box-shadow: var(--shadow-card); transform: rotate(1.5deg); }
.tenant-program-art span { border-radius: var(--r-card); background: linear-gradient(145deg, var(--brand-primary-soft), color-mix(in srgb, var(--tenant-primary) 20%, var(--c-surface))); }
.tenant-program-art span:nth-child(2) { background: linear-gradient(145deg, var(--brand-secondary-soft), color-mix(in srgb, var(--tenant-secondary) 22%, var(--c-surface))); transform: translateY(var(--s4)); }
.tenant-program-art span:nth-child(3) { background: linear-gradient(145deg, var(--brand-accent-soft), color-mix(in srgb, var(--tenant-accent) 20%, var(--c-surface))); }
.tenant-program-art span:nth-child(4) { background: linear-gradient(145deg, var(--c-surface), var(--brand-primary-soft)); transform: translateY(var(--s4)); }
.tenant-community-layout { grid-template-columns: minmax(15rem, .82fr) minmax(0, 1.18fr); }
.tenant-community-mark { min-block-size: 23rem; display: grid; place-content: center; gap: var(--s4); border-radius: 48% 52% 44% 56% / 52% 42% 58% 48%; background: linear-gradient(145deg, var(--brand-primary-soft), var(--brand-accent-soft)); }
.tenant-community-mark span { display: block; inline-size: clamp(8rem, 20vw, 14rem); block-size: var(--s5); border-radius: var(--r-pill); background: var(--tenant-primary); box-shadow: var(--shadow-card); }
.tenant-community-mark span:nth-child(2) { inline-size: 72%; margin-inline-start: 20%; background: var(--tenant-secondary); }
.tenant-community-mark span:nth-child(3) { inline-size: 54%; margin-inline-start: 34%; background: var(--tenant-accent); }
.tenant-highlight-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin: var(--s5) 0 0; padding: 0; list-style: none; }
.tenant-highlight-list li { min-block-size: var(--target-min); display: flex; align-items: center; padding: var(--s3) var(--s4); border: 1px solid color-mix(in srgb, var(--tenant-primary) 14%, var(--c-line)); border-radius: var(--r-card); background: var(--c-surface); font-weight: 650; }
.tenant-admissions-section { position: relative; overflow: hidden; }
.tenant-admissions-panel { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(var(--s8), 7vw, var(--s16)); padding: clamp(var(--s8), 5vw, var(--s12)); border-radius: var(--r-hero); background: var(--c-surface); box-shadow: var(--shadow-float); }
.tenant-admissions-panel::after { content: ""; position: absolute; inset: auto calc(-1 * var(--s8)) calc(-1 * var(--s8)) auto; inline-size: 10rem; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--tenant-secondary) 18%, transparent); pointer-events: none; }
.tenant-admissions-panel h2 { max-inline-size: 10ch; margin-block-end: 0; }
.tenant-admissions-copy { position: relative; z-index: 1; align-self: center; }
.tenant-events-section { background: linear-gradient(145deg, var(--c-surface), var(--brand-secondary-soft)); }
.tenant-event-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: var(--s4); }
.tenant-event-card { min-block-size: 10rem; display: grid; align-content: space-between; gap: var(--s6); padding: var(--s5); border: 1px solid color-mix(in srgb, var(--tenant-secondary) 18%, var(--c-line)); border-radius: var(--r-card); background: color-mix(in srgb, var(--c-surface) 92%, var(--brand-secondary-soft)); box-shadow: var(--shadow-card); }
.tenant-event-card span { color: var(--tenant-secondary); font-size: var(--type-label); font-weight: 800; }
.tenant-event-card p { margin: 0; color: var(--c-ink); font-size: var(--type-h3); line-height: 1.3; }
.tenant-contact-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(var(--s8), 7vw, var(--s16)); align-items: center; }
.tenant-contact-heading h2 { max-inline-size: 10ch; }
.tenant-contact-card { padding: clamp(var(--s6), 4vw, var(--s10)); border: 1px solid color-mix(in srgb, var(--tenant-primary) 20%, var(--c-line)); border-radius: var(--r-hero); background: var(--c-surface); box-shadow: var(--shadow-card); }
.tenant-contact-card > p { margin: 0; color: var(--c-ink); font-size: var(--type-body-lg); line-height: 1.6; }
.tenant-feature-section { background: var(--c-ink); }
.tenant-feature-section h2, .tenant-feature-section h3 { color: var(--c-surface); }
.tenant-feature-section .tenant-section__heading > p:not(.tenant-eyebrow) { color: var(--c-surface-high); }
.tenant-feature-section .tenant-eyebrow { color: var(--brand-accent-soft); }
.tenant-value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: var(--s4); }
.tenant-value-grid article { min-block-size: 11rem; padding: var(--s5); border: 1px solid color-mix(in srgb, var(--c-surface) 18%, transparent); border-radius: var(--r-card); background: color-mix(in srgb, var(--c-surface) 7%, transparent); }
.tenant-value-grid span { color: var(--brand-accent-soft); font-size: var(--type-label); font-weight: 700; }
.tenant-value-grid h3 { margin-block-end: 0; font-size: var(--type-h3); }
.tenant-testimonial blockquote { margin: 0; }
.tenant-testimonial blockquote > p { margin: 0; color: var(--c-ink); font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.2; }
.tenant-testimonial blockquote footer { margin-block-start: var(--s5); color: var(--tenant-primary); font-weight: 700; }
.tenant-callout { padding: clamp(var(--s6), 5vw, var(--s12)); border-radius: var(--r-hero); background: linear-gradient(135deg, var(--brand-primary-soft), var(--brand-accent-soft)); box-shadow: var(--shadow-card); }
.tenant-footer { padding: var(--s10) clamp(var(--s5), 5vw, var(--s16)); color: var(--c-muted); background: color-mix(in srgb, var(--tenant-primary) 4%, var(--c-surface-low)); border-block-start: 1px solid color-mix(in srgb, var(--tenant-primary) 12%, var(--c-line)); }
.tenant-footer__inner { inline-size: min(100%, var(--content-max)); margin-inline: auto; display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(0, 1.4fr) auto; align-items: start; gap: var(--s6); }
.tenant-footer__brand { display: grid; gap: var(--s2); max-inline-size: 28rem; }
.tenant-footer strong { color: var(--c-ink); font-size: var(--type-h3); }
.tenant-footer__navigation { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); }
.tenant-footer__navigation a { min-block-size: var(--target-min); display: inline-flex; align-items: center; color: var(--c-muted); font-size: var(--type-small); font-weight: 700; }
.tenant-footer__navigation a:hover, .tenant-footer__navigation a:focus-visible { color: var(--tenant-primary); }
.tenant-footer__navigation a[aria-current="page"] { color: var(--tenant-primary); text-decoration: underline; text-underline-offset: .2em; }
.tenant-footer__powered { margin: .25rem 0 0; color: var(--c-muted); font-size: var(--type-small); white-space: nowrap; }

@media (max-width: 64rem) {
    .dashboard-shell { padding: var(--s6); }
    .grid.four, .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dashboard-foundation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-foundation-grid > div:nth-child(3) { border-inline-start: 0; }
    .marketing-hero { grid-template-columns: minmax(0, 1fr); }
    .hero-visual { min-block-size: 27.5rem; }
    .setup-story ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 56rem) {
    .authenticated .app-shell { display: block; }
    .role-rail { position: relative; block-size: auto; padding: var(--s2) var(--s4); border-inline-end: 0; border-block-end: 1px solid var(--c-line); overflow: visible; }
    .rail-brand, .rail-context, .rail-footer { display: none; }
    .role-nav { display: block; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
    .role-parent .role-nav-section--parent, .role-teacher .role-nav-section--teacher, .role-admin .role-nav-section--admin, .role-student .role-nav-section--student { display: flex; gap: var(--s1); }
    .nav-group { display: none; }
    .role-nav a { flex: 0 0 auto; scroll-snap-align: start; grid-template-columns: 1.15rem auto; padding-inline: var(--s3); }
    .logout-form { display: none; }
    .topbar-workspace { display: flex; align-items: center; min-inline-size: 0; padding-inline-start: 0; border-inline-start: 0; }
    .topbar-workspace__role { display: none; }
}

@media (max-width: 48rem) {
    .tenant-header__inner { min-block-size: 4.5rem; padding: var(--s2) var(--s4); gap: var(--s3); }
    .tenant-brand { flex: 1 1 auto; font-size: var(--type-body); }
    .tenant-brand img { max-inline-size: 7rem; block-size: 2.75rem; }
    .tenant-brand span { max-inline-size: 42vw; display: block; }
    .tenant-navigation--desktop { display: none; }
    .tenant-mobile-actions { display: flex; }
    .tenant-portal-link--mobile { display: inline-flex; align-items: center; justify-content: center; padding-inline: var(--s3); font-size: var(--type-label); }
    .tenant-footer__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
    .tenant-footer__navigation { gap: var(--s1) var(--s4); }
    .tenant-footer__powered { white-space: normal; }
    .tenant-purpose-grid, .tenant-program-layout, .tenant-community-layout, .tenant-admissions-panel, .tenant-contact-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
    .tenant-community-mark { order: 2; min-block-size: 16rem; }
    .tenant-program-art { min-block-size: 17rem; }
    .tenant-highlight-list { grid-template-columns: minmax(0, 1fr); }
    .dashboard-layout { grid-template-columns: minmax(0, 1fr); }
    .role-dashboard__greeting { align-items: stretch; flex-direction: column; gap: var(--s3); }
    .role-dashboard__status { max-inline-size: none; justify-items: start; text-align: start; }
    .dashboard-content-grid { grid-template-columns: minmax(0, 1fr); }
    .dashboard-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid.two, .grid.three { grid-template-columns: minmax(0, 1fr); }
    .color-fields { grid-template-columns: minmax(0, 1fr); }
    .builder-workspace { grid-template-columns: minmax(0, 1fr); }
    .admin-site-builder .admin-settings-heading { align-items: stretch; flex-direction: column; }
    .builder-outline { position: static; max-block-size: none; }
    .builder-outline__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .builder-preview-canvas { padding: var(--s3); }
    .builder-status-panel { align-items: stretch; flex-direction: column; }
    .builder-status-actions { justify-content: flex-start; }
    .access-row { grid-template-columns: minmax(0, 1fr); }
    .access-row__actions { justify-content: flex-start; }
    .topbar { padding-inline: var(--s4); }
}

@media (max-width: 40rem) {
    .builder-status-grid { grid-template-columns: minmax(0, 1fr); }
    .builder-status-actions, .builder-status-actions .button { inline-size: 100%; }
    .builder-outline__list { grid-template-columns: minmax(0, 1fr); }
    .builder-editor__header { align-items: stretch; flex-direction: column; }
    .builder-editor__header .cluster, .builder-editor__header .button { inline-size: 100%; }
    .builder-section > summary { grid-template-columns: auto minmax(0, 1fr); padding: var(--s4); }
    .builder-section__state { grid-column: 2; justify-self: start; }
    .builder-section__identity > span { white-space: normal; }
    .builder-section__body { padding: var(--s4); }
    .builder-section__controls { align-items: stretch; flex-direction: column; }
    .builder-reorder-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .builder-reorder-controls .danger { grid-column: 1 / -1; }
    .builder-required-note { justify-items: start; max-inline-size: none; text-align: start; }
    .builder-visibility-control { max-inline-size: none; }
    .builder-editor-guide { grid-template-columns: minmax(0, 1fr); }
    .builder-field-grid { grid-template-columns: minmax(0, 1fr); }
    .builder-field-grid__wide { grid-column: auto; }
    .builder-action-grid { grid-template-columns: minmax(0, 1fr); }
    .builder-preview-panel__header, .builder-preview-toolbar { align-items: stretch; flex-direction: column; }
    .builder-preview-toolbar { justify-content: flex-start; }
    .builder-preview-devices { inline-size: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .builder-preview-devices .button, .builder-preview-toolbar > .button { inline-size: 100%; }
    .builder-preview-canvas { min-block-size: 28rem; padding: var(--s2); }
    .builder-save-bar { align-items: stretch; flex-direction: column; inset-block-end: calc(5.25rem + env(safe-area-inset-bottom, 0px)); }
    .builder-save-bar .button { inline-size: 100%; }
    body.authenticated { padding-block-end: calc(5.25rem + env(safe-area-inset-bottom, 0px)); }
    .topbar { gap: var(--s2); min-block-size: 4rem; padding: var(--s3) var(--s4); }
    .public-page .topbar { flex-wrap: nowrap; }
    /* Nothing in the lockup shrinks: a chain of min-inline-size: 0 let the mark
       and the wordmark collapse to nothing when the actions needed room. The
       tagline is what gives way at this width, and the wordmark at the next. */
    .public-page .platform-compact-brand { flex: 0 0 auto; gap: var(--s2); white-space: nowrap; }
    .public-page .platform-compact-brand .brand-lockup__copy { flex: 0 0 auto; }
    .public-page .brand-lockup--platform .brand-lockup__copy small { display: none; }
    .public-page .brand-lockup__wordmark { font-size: 1.15rem; }
    .public-page .topbar-utilities { flex: 0 0 auto; }
    .public-page .nav-links .nav-login { inline-size: auto; min-inline-size: auto; padding: var(--s2) var(--s3); white-space: nowrap; }
    .topbar-utilities, .nav-links { gap: var(--s2); }
    .nav-links a:not(.nav-login) { display: none; }
    .help-learning__panel { position: fixed; inset-block-start: 4.6rem; inset-inline: var(--s4); inline-size: auto; max-block-size: calc(100dvh - 10rem); overflow-y: auto; overscroll-behavior: contain; }
    .dashboard-shell, .auth-shell { padding: var(--s4); }
    .role-dashboard { gap: var(--s4); }
    .role-dashboard__greeting { padding-block-start: var(--s2); }
    .dashboard-kpi { min-block-size: 7.75rem; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--s2); padding: var(--s3); }
    .dashboard-kpi__icon { inline-size: 2.75rem; block-size: 2.75rem; }
    .dashboard-kpi__icon svg { inline-size: 1.4rem; block-size: 1.4rem; }
    .dashboard-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
    .dashboard-panel { padding: var(--s4); }
    .dashboard-readiness-grid, .dashboard-action-grid, .dashboard-foundation-grid { grid-template-columns: minmax(0, 1fr); }
    .dashboard-foundation-grid > div, .dashboard-foundation-grid > div:first-child, .dashboard-foundation-grid > div:nth-child(3) { padding: var(--s3) 0; border-inline-start: 0; border-block-start: 1px solid var(--c-line); }
    .dashboard-foundation-grid > div:first-child { padding-block-start: 0; border-block-start: 0; }
    .c-status-hero, .dashboard-hero { padding: var(--s6); border-radius: var(--r-card); }
    .grid.four { grid-template-columns: minmax(0, 1fr); }
    .marketing-hero { min-block-size: auto; padding: var(--s12) var(--s5); }
    .hero-copy h1 { font-size: clamp(2.7rem, 14vw, 4.2rem); }
    .hero-visual { min-block-size: 21.25rem; }
    .orbit { inline-size: 5rem; block-size: 5rem; border-width: var(--s1); font-size: var(--type-label); }
    .marketing-section, .setup-story { padding: var(--s12) var(--s5); }
    .setup-story { margin: 0 var(--s4) var(--s12); }
    .setup-story ol { grid-template-columns: minmax(0, 1fr); }
    .authenticated .role-rail { display: none; }
    .authenticated .topbar { position: sticky; }
    .authenticated .mobile-nav { position: fixed; inset: auto 0 0; z-index: 20; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: var(--s2) max(var(--s2), env(safe-area-inset-right, 0px)) max(var(--s2), env(safe-area-inset-bottom, 0px)) max(var(--s2), env(safe-area-inset-left, 0px)); border-block-start: 1px solid var(--c-shell-border); background: color-mix(in srgb, var(--c-surface) 96%, transparent); box-shadow: 0 -10px 30px rgba(30, 43, 84, .08); backdrop-filter: blur(.75rem); }
    .mobile-nav > a, .mobile-nav-more > summary { display: grid; grid-template-rows: 1.3rem auto; place-items: center; gap: .18rem; min-block-size: 3.6rem; padding: var(--s1) var(--s2); border-radius: .65rem; color: var(--c-muted); font-size: .68rem; font-weight: 750; line-height: 1.15; text-align: center; transition: color var(--motion-micro), background var(--motion-micro); }
    .mobile-nav > a:hover, .mobile-nav > a:focus-visible, .mobile-nav-more > summary:hover, .mobile-nav-more > summary:focus-visible, .mobile-nav-more[open] > summary { color: var(--role-accent); background: var(--role-accent-soft); }
    .mobile-nav > a[aria-current="page"], .mobile-nav-more.has-current > summary { color: var(--role-accent); background: var(--role-accent-soft); box-shadow: inset 0 -.18rem 0 var(--role-accent); font-weight: 800; }
    .mobile-nav-more__panel { position: absolute; inset-inline-end: 0; inset-block-end: calc(100% + var(--s3)); inline-size: min(20rem, calc(100vw - (2 * var(--s4)))); max-block-size: min(70dvh, 34rem); overflow-y: auto; gap: var(--s1); padding: var(--s3); border: 1px solid var(--c-surface-border); border-radius: var(--r-card); background: var(--c-surface); box-shadow: var(--shadow-float); }
    .mobile-nav-more__panel a { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); align-items: center; gap: var(--s3); min-block-size: var(--target-min); padding: var(--s2) var(--s3); border-radius: .625rem; color: var(--c-text); font-size: var(--type-small); font-weight: 650; text-align: start; }
    .mobile-nav-more__panel a:hover, .mobile-nav-more__panel a:focus-visible { color: var(--c-ink); background: var(--role-accent-soft); }
    .mobile-nav-more__panel a[aria-current="page"] { color: var(--c-ink); background: var(--role-accent-soft); box-shadow: inset .18rem 0 0 var(--role-accent); font-weight: 800; }
    .mobile-logout-form { margin-block-start: var(--s2); padding-block-start: var(--s2); border-block-start: 1px solid var(--c-line); }
    .mobile-logout-form button { inline-size: 100%; padding: var(--s2) var(--s3); }
    .c-card, .panel, .stat-card { padding: var(--s5); }
    .tenant-section { padding: var(--s12) var(--s5); }
    .tenant-hero { min-block-size: 34rem; }
    .tenant-hero__content { margin-inline: 0; }
    .tenant-hero__mark { inset-inline-end: var(--s4); inline-size: 9rem; opacity: .55; }
    .tenant-story { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
    .tenant-purpose-statement, .tenant-admissions-panel, .tenant-contact-card { padding: var(--s5); border-radius: var(--r-card); }
    .tenant-program-art, .tenant-community-mark { min-block-size: 13rem; }
    .tenant-event-card { min-block-size: 8rem; }
    .tenant-footer { padding: var(--s8) var(--s5); }
}

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

/* CON8CT trial signup + tenant sign-in flow */
.trial-brand { display: flex; align-items: center; gap: var(--s3); margin-block-end: var(--s8); color: var(--c-ink); }
.trial-brand strong { font-size: var(--type-h3); letter-spacing: -.02em; }
.trial-brand .trial-pill { margin-inline-start: auto; padding: var(--s1) var(--s3); border-radius: var(--r-pill); color: var(--c-success); background: color-mix(in srgb, var(--c-success) 10%, var(--c-surface)); font-size: var(--type-label); font-weight: 700; }
.trial-signup-shell { inline-size: min(100%, 76rem); min-block-size: calc(100dvh - var(--topbar-height)); margin-inline: auto; padding: clamp(var(--s8), 6vw, var(--s16)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(22rem, .78fr); gap: clamp(var(--s8), 7vw, var(--s16)); align-items: center; }
.trial-signup-copy h1 { max-inline-size: 11ch; margin: var(--s3) 0 var(--s5); font-size: clamp(2.8rem, 6vw, 5rem); line-height: .94; letter-spacing: -.045em; }
.trial-signup-card { padding: clamp(var(--s6), 4vw, var(--s10)); box-shadow: var(--shadow-float); }
.trial-signup-card h2 { margin: var(--s2) 0; font-size: var(--type-h1); }
.signup-benefits { display: grid; gap: var(--s4); margin-block-start: var(--s8); }
.signup-benefits article { display: grid; gap: var(--s1); padding-inline-start: var(--s5); border-inline-start: .2rem solid var(--brand-primary); }
.signup-benefits span { color: var(--c-muted); }
.signup-benefits code { padding: .1rem .35rem; border-radius: .35rem; background: var(--c-surface-mid); }
.domain-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border: 1px solid var(--c-line); border-radius: var(--r-field); overflow: hidden; background: var(--c-surface); }
.domain-input:focus-within { border-color: var(--brand-focus); box-shadow: 0 0 0 .1875rem color-mix(in srgb, var(--brand-focus) 20%, transparent); }
.form-stack .domain-input input { border: 0; border-radius: 0; box-shadow: none; }
.domain-input > span { align-self: stretch; display: grid; place-items: center; padding-inline: var(--s4); color: var(--c-muted); background: var(--c-surface-low); border-inline-start: 1px solid var(--c-line); font-size: var(--type-small); font-weight: 700; }
.trial-shell { display: grid; place-items: center; min-block-size: calc(100dvh - var(--topbar-height)); padding: clamp(var(--s6), 6vw, var(--s16)); background: radial-gradient(circle at 50% 35%, var(--brand-primary-soft), transparent 28rem); }
.trial-modal { inline-size: min(100%, 37rem); padding: clamp(var(--s8), 5vw, var(--s12)); box-shadow: var(--shadow-float); }
.trial-modal h1 { margin: var(--s2) 0 var(--s4); font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1; }
.trial-checklist { display: grid; gap: var(--s2); margin-block: var(--s6); }
.trial-checklist p { display: flex; align-items: center; gap: var(--s3); margin: 0; padding: var(--s3); border-radius: var(--r-field); background: var(--c-surface-low); }
.trial-checklist p > span { display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; color: white; background: var(--c-success); font-weight: 800; }
.trial-ready-orb { display: grid; place-items: center; inline-size: 5rem; aspect-ratio: 1; margin: var(--s6) auto; border-radius: 50%; color: var(--brand-on-primary); background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); box-shadow: var(--shadow-card); font-size: 2rem; }
.trial-steps { display: grid; gap: var(--s2); padding-inline-start: var(--s6); color: var(--c-muted); }
.demo-link-box { margin-block-start: var(--s6); padding: var(--s5); border-radius: var(--r-card); background: var(--brand-primary-soft); border: 1px dashed color-mix(in srgb, var(--brand-primary) 30%, var(--c-line)); }
.demo-link-box p { margin-block: var(--s2) var(--s4); }
.trial-split-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(22rem, .8fr); min-block-size: calc(100dvh - var(--topbar-height)); }
.trial-form-panel { inline-size: min(100%, 43rem); margin-inline: auto; padding: clamp(var(--s8), 7vw, var(--s16)); align-self: center; }
.trial-form-panel h1 { margin: var(--s2) 0 var(--s4); font-size: var(--type-display); line-height: 1; }
.trial-illustration { display: grid; place-items: center; min-block-size: 100%; padding: var(--s10); background: linear-gradient(145deg, var(--c-surface-mid), var(--brand-secondary-soft)); }
.security-art { inline-size: min(24rem, 80%); aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: var(--s3); border-radius: 50% 42% 48% 40%; color: var(--c-ink); background: var(--c-surface); box-shadow: var(--shadow-float); text-align: center; transform: rotate(-3deg); }
.security-art > span { display: grid; place-items: center; inline-size: 5rem; aspect-ratio: 1; border-radius: var(--r-panel); color: white; background: var(--brand-primary); font-size: 2rem; font-weight: 800; transform: rotate(3deg); }
.password-rules { display: flex; flex-wrap: wrap; gap: var(--s2); color: var(--c-muted); font-size: var(--type-label); }
.password-rules span { padding: var(--s1) var(--s3); border-radius: var(--r-pill); background: var(--c-surface-mid); }
.check-row { display: flex !important; grid-template-columns: auto 1fr; align-items: start; gap: var(--s3) !important; font-weight: 500 !important; }
.check-row input { inline-size: 1.2rem !important; min-block-size: 1.2rem !important; margin-block-start: .15rem; }
.check-row.compact { align-items: center; font-size: var(--type-small); }
.trusted-card { text-align: center; }
.trusted-card .cluster { justify-content: center; }
.trust-lock { display: grid; place-items: center; inline-size: 4rem; aspect-ratio: 1; margin: 0 auto var(--s4); border-radius: var(--r-panel); color: var(--c-success); background: color-mix(in srgb, var(--c-success) 10%, var(--c-surface)); font-size: 1.7rem; }
.trial-customize-shell { min-block-size: calc(100dvh - var(--topbar-height)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(24rem, .9fr); }
.trial-customize-main { inline-size: min(100%, 50rem); margin-inline: auto; padding: clamp(var(--s6), 5vw, var(--s12)); }
.trial-customize-main h1 { max-inline-size: 17ch; margin: var(--s2) 0 var(--s4); font-size: var(--type-display); line-height: 1; }
.trial-progress { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: var(--s2); max-inline-size: 20rem; margin-block-end: var(--s8); }
.trial-progress span { display: grid; place-items: center; inline-size: 2rem; aspect-ratio: 1; border-radius: 50%; color: var(--c-muted); background: var(--c-surface-mid); font-size: var(--type-small); font-weight: 800; }
.trial-progress span.active { color: white; background: var(--brand-primary); }
.trial-progress i { block-size: .15rem; background: var(--c-line); }
.module-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-block: var(--s6); }
.module-choice { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: var(--s3); min-block-size: 8.5rem; padding: var(--s4); border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-surface); cursor: pointer; transition: border var(--motion-micro), box-shadow var(--motion-micro), transform var(--motion-micro); }
.module-choice:hover { transform: translateY(-.1rem); box-shadow: var(--shadow-card); }
.module-choice:has(input:checked) { border-color: var(--brand-primary); box-shadow: 0 0 0 .12rem color-mix(in srgb, var(--brand-primary) 18%, transparent); background: var(--brand-primary-soft); }
.module-choice input { inline-size: 1.2rem; block-size: 1.2rem; margin-block-start: .15rem; accent-color: var(--brand-primary); }
.module-choice span { display: grid; gap: var(--s1); }
.module-choice b { color: var(--c-ink); }
.module-choice small { color: var(--c-muted); line-height: 1.35; }
.module-choice em { padding: var(--s1) var(--s2); border-radius: var(--r-pill); color: var(--brand-primary); background: var(--c-surface); font-size: .68rem; font-style: normal; font-weight: 800; }
.trial-actions { display: flex; justify-content: space-between; gap: var(--s3); margin-block-start: var(--s8); }
.upload-drop { min-block-size: 10rem; place-content: center; text-align: center; border: 2px dashed var(--c-line); border-radius: var(--r-card); background: var(--c-surface-low); }
.upload-drop input { border: 0 !important; min-block-size: auto !important; padding: var(--s2) !important; }
.upload-drop span { color: var(--c-muted); font-size: var(--type-small); }
.color-picker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.color-picker-grid input[type="color"] { min-block-size: 5rem; padding: var(--s2); cursor: pointer; }
.swatch-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
.swatch { inline-size: 2.75rem; aspect-ratio: 1; border-radius: 50%; border: .2rem solid var(--c-surface); outline: 1px solid var(--c-line); background: linear-gradient(135deg, var(--swatch-primary) 0 42%, var(--swatch-secondary) 42% 70%, var(--swatch-accent) 70% 100%); cursor: pointer; }
.trial-preview { position: sticky; inset-block-start: var(--topbar-height); display: grid; place-items: center; align-content: center; min-block-size: calc(100dvh - var(--topbar-height)); padding: clamp(var(--s6), 5vw, var(--s12)); background: linear-gradient(135deg, var(--c-surface-mid), var(--brand-primary-soft)); }
.trial-preview > p { color: var(--c-muted); font-size: var(--type-small); font-weight: 700; }
.preview-window { inline-size: min(100%, 37rem); overflow: hidden; border-radius: var(--r-panel); background: var(--c-surface); box-shadow: var(--shadow-float); transform: rotate(1deg); }
.preview-window header { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); border-block-end: 1px solid var(--c-line); }
.preview-window header img { inline-size: 2.4rem; block-size: 2.4rem; object-fit: contain; }
.preview-logo { display: grid; place-items: center; inline-size: 2.4rem; aspect-ratio: 1; border-radius: .6rem; color: white; background: var(--preview-primary, var(--brand-primary)); font-weight: 800; }
.preview-body { display: grid; grid-template-columns: 8rem 1fr; min-block-size: 22rem; }
.preview-body nav { display: grid; align-content: start; gap: var(--s2); padding: var(--s4); color: white; background: var(--preview-primary, var(--brand-primary)); font-size: var(--type-label); font-weight: 700; }
.preview-body nav span:first-child { padding: var(--s2); border-radius: .5rem; background: rgba(255,255,255,.18); }
.preview-body article { padding: var(--s5); }
.preview-body article > p { margin: 0; color: var(--preview-primary, var(--brand-primary)); font-weight: 800; }
.preview-body article h3 { margin-block: var(--s1) var(--s5); }
.preview-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
    .preview-metrics i { block-size: 4rem; border-radius: .6rem; background: color-mix(in srgb, var(--preview-primary, var(--brand-primary)) 11%, var(--c-surface)); }
    .preview-metrics i:last-child { background: color-mix(in srgb, var(--preview-accent, var(--brand-accent)) 16%, var(--c-surface)); }
.preview-lines { display: grid; gap: var(--s2); margin-block-start: var(--s5); }
.preview-lines i { block-size: 1.2rem; border-radius: .4rem; background: var(--c-surface-mid); }
.preview-lines i:nth-child(2) { inline-size: 78%; }.preview-lines i:nth-child(3) { inline-size: 89%; }.preview-lines i:nth-child(4) { inline-size: 62%; }
.tenant-login-shell { display: grid; place-items: center; min-block-size: calc(100dvh - var(--topbar-height)); padding: clamp(var(--s6), 6vw, var(--s16)); background: linear-gradient(135deg, var(--c-surface-low), var(--brand-primary-soft)); }
.tenant-login-card { inline-size: min(100%, 28rem); padding: clamp(var(--s7, 1.75rem), 5vw, var(--s10)); box-shadow: var(--shadow-float); }
.tenant-login-card h1 { margin: var(--s2) 0; font-size: 2.25rem; }
.google-sign-in { display: inline-flex; align-items: center; justify-content: center; gap: var(--s3); }
.google-sign-in img { flex: 0 0 auto; inline-size: 20px; block-size: 20px; }
.tenant-login-brand { display: flex; align-items: center; gap: var(--s3); margin-block-end: var(--s6); }
.tenant-login-brand img { inline-size: 3rem; block-size: 3rem; object-fit: contain; }
.login-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.tenant-login-divider { display: flex; align-items: center; gap: var(--s3); margin-block: var(--s5); color: var(--c-muted); font-size: var(--type-small); }
.tenant-login-divider::before, .tenant-login-divider::after { content: ""; flex: 1; block-size: 1px; background: var(--c-line); }
.domain-finder { inline-size: min(100%, 31rem); }
.domain-finder a { color: var(--brand-link); font-weight: 700; }
.central-login-target { overflow-wrap: anywhere; padding: var(--s3); border-radius: var(--r-md, .75rem); background: var(--c-surface-low); }
.central-login-alternatives { display: grid; gap: var(--s3); text-align: center; }
.central-login-footnote { margin-block-start: var(--s6); font-size: var(--type-small); }
.tenant-login-brand.central-account-brand img { inline-size: min(100%, 11.25rem); block-size: 3.125rem; }
.central-school-card { inline-size: min(100%, 34rem); }
.central-school-list { display: grid; gap: var(--s3); margin-block-start: var(--s6); }
.central-school-option { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); inline-size: 100%; min-block-size: 4.5rem; padding: var(--s4); border: 1px solid var(--c-line); border-radius: var(--r-md, .75rem); background: var(--c-surface); color: var(--c-text); text-align: start; cursor: pointer; }
.central-school-option:hover { background: var(--c-surface-low); border-color: var(--brand-primary); }
.central-school-option span:first-child { min-inline-size: 0; display: grid; gap: var(--s1); }
.central-school-option strong, .central-school-option small { overflow-wrap: anywhere; }
.central-school-option small { color: var(--c-muted); font-size: var(--type-small); }
.central-school-option:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 3px; }

@media (max-width: 64rem) {
    .trial-signup-shell, .trial-split-shell, .trial-customize-shell { grid-template-columns: minmax(0, 1fr); }
    .trial-signup-shell { max-inline-size: 46rem; }
    .trial-signup-copy h1 { max-inline-size: 14ch; }
    .trial-illustration { min-block-size: 22rem; }
    .trial-preview { position: relative; inset-block-start: auto; min-block-size: 30rem; }
}
@media (max-width: 42rem) {
    .trial-signup-shell { padding: var(--s5); }
    .trial-signup-copy h1 { font-size: 2.8rem; }
    .trial-shell { padding: var(--s4); }
    .trial-modal { padding: var(--s6); }
    .trial-form-panel { padding: var(--s6); }
    .trial-illustration { display: none; }
    .trial-customize-main { padding: var(--s5); }
    .module-picker, .color-picker-grid { grid-template-columns: minmax(0, 1fr); }
    .trial-preview { min-block-size: 24rem; padding: var(--s5); }
    .preview-body { grid-template-columns: 5.5rem 1fr; }
    .preview-body nav { padding: var(--s3); }
    .login-row { align-items: flex-start; flex-direction: column; }
}
.trial-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); margin-block-end: var(--s5); padding: var(--s4) var(--s5); border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, var(--c-line)); border-radius: var(--r-card); background: var(--brand-primary-soft); }
.trial-banner p { margin: 0 0 var(--s1); }.trial-banner span { color: var(--c-muted); }
.pricing-card ul { display: grid; gap: var(--s2); color: var(--c-muted); }
@media (max-width: 42rem) { .trial-banner { align-items: stretch; flex-direction: column; } }

/* Shared public demo showcase */
.demo-showcase-page { min-block-size: 100vh; background: var(--c-bg); }
.demo-mode-badge { display: inline-flex; align-items: center; min-block-size: 2rem; padding-inline: var(--s3); border-radius: 999px; font-size: var(--type-small); font-weight: 800; letter-spacing: .08em; color: var(--brand-on-primary); background: var(--brand-primary); }
.demo-showcase { max-inline-size: 74rem; margin-inline: auto; padding: clamp(var(--s4), 4vw, var(--s8)); }
.demo-meeting-plan { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s5); align-items: start; }
.demo-meeting-plan__intro { display: grid; gap: var(--s2); }
.demo-meeting-plan__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.demo-meeting-plan__steps li { display: grid; gap: var(--s1); min-block-size: 5.5rem; padding: var(--s3); border: 1px solid var(--c-line); border-radius: var(--r-control); background: var(--c-surface); }
.demo-meeting-plan__steps span { color: var(--c-muted); font-size: var(--type-small); }
.demo-persona-grid { align-items: stretch; }
.demo-persona-card { display: grid; align-content: start; gap: var(--s4); }
.demo-journey-list { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.demo-journey { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding-block: var(--s3); border-block-start: 1px solid var(--c-line); }
.demo-journey:first-child { border-block-start: 0; padding-block-start: 0; }
.demo-journey__copy { display: grid; gap: .2rem; min-inline-size: 0; }
.demo-journey__copy span { color: var(--c-muted); font-size: var(--type-small); }
.demo-journey form { margin: 0; }
.demo-feedback-prompts { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s5); align-items: start; }
.demo-feedback-prompts ul { display: grid; gap: var(--s2); margin: 0; padding-inline-start: var(--s5); color: var(--c-muted); }
.demo-showcase-safety { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); margin-block-start: var(--s6); }
.demo-app-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s3) var(--s5); border-bottom: 1px solid var(--brand-accent); background: var(--brand-accent-soft); color: var(--c-ink); }
.demo-app-banner strong { letter-spacing: .08em; }
.demo-app-banner a { font-weight: 700; color: var(--brand-link); }
@media (max-width: 720px) { .demo-meeting-plan, .demo-feedback-prompts { grid-template-columns: minmax(0, 1fr); } .demo-meeting-plan__steps { grid-template-columns: minmax(0, 1fr); } .demo-journey { grid-template-columns: minmax(0, 1fr); } .demo-journey .button { inline-size: 100%; } .demo-showcase-safety { align-items: stretch; flex-direction: column; } }

/* Teacher dashboard: COLCA-informed density with CON8CT-owned, tenant-token styling. */
.teacher-dashboard { gap: var(--s5); }
.teacher-dashboard__kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.teacher-dashboard__quick { padding-block: var(--s4); }
.teacher-dashboard__actions { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.teacher-dashboard__actions .dashboard-action { min-block-size: 4.75rem; grid-template-columns: auto minmax(0, 1fr); }
.teacher-dashboard__actions .dashboard-action__arrow { display: none; }
.teacher-dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); align-items: start; }
.teacher-dashboard-list { display: grid; }
.teacher-dashboard-row { min-inline-size: 0; min-block-size: 4.5rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-block-start: 1px solid var(--c-line); color: var(--c-ink); }
.teacher-dashboard-row:first-child { border-block-start: 0; }
.teacher-dashboard-row:hover .teacher-dashboard-row__content strong, .teacher-dashboard-row:focus-visible .teacher-dashboard-row__content strong { color: var(--brand-primary); }
.teacher-dashboard-row__marker { inline-size: 2.6rem; block-size: 2.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--brand-primary-soft); color: var(--brand-primary); font-size: var(--type-small); font-weight: 800; }
.teacher-dashboard-row__marker--assignment { background: var(--brand-accent-soft); color: color-mix(in srgb, var(--brand-accent) 72%, var(--c-ink)); }
.teacher-dashboard-row__content { min-inline-size: 0; display: grid; gap: .2rem; }
.teacher-dashboard-row__content strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--type-small); transition: color var(--motion-micro); }
.teacher-dashboard-row__content small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-muted); font-size: var(--type-label); }
.teacher-dashboard-row__arrow { color: var(--brand-primary); font-weight: 800; }
.teacher-focus-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.teacher-focus-card { min-inline-size: 0; min-block-size: 7.25rem; display: grid; align-content: space-between; gap: var(--s2); padding: var(--s4); border: 1px solid var(--c-line); border-radius: var(--r-field); color: var(--c-ink); background: var(--c-surface-low); }
.teacher-focus-card:hover, .teacher-focus-card:focus-visible { border-color: color-mix(in srgb, var(--brand-primary) 32%, var(--c-line)); background: var(--brand-primary-soft); }
.teacher-focus-card > span { color: var(--brand-primary); font-size: var(--type-label); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.teacher-focus-card strong { font-size: var(--type-small); }
.teacher-focus-card small { color: var(--c-muted); font-size: var(--type-label); font-weight: 700; }
.teacher-dashboard__empty { padding-block: var(--s4); }

@media (max-width: 64rem) {
    .teacher-dashboard__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .teacher-dashboard__actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .teacher-focus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 48rem) {
    .teacher-dashboard__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .teacher-dashboard-grid { grid-template-columns: minmax(0, 1fr); }
    .teacher-dashboard__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
    .teacher-dashboard { gap: var(--s4); }
    .teacher-dashboard__kpis .dashboard-kpi { min-block-size: 7.5rem; }
    .teacher-dashboard__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .teacher-dashboard__actions .dashboard-action { min-block-size: 4.25rem; padding: var(--s2) var(--s3); }
    .teacher-focus-grid { grid-template-columns: minmax(0, 1fr); }
    .teacher-dashboard-row { min-block-size: 4.25rem; }
}

/* Parent dashboard: COLCA-informed family overview using truthful CON8CT parent/child data. */
.parent-dashboard { gap: var(--s5); }
.parent-dashboard__section-header { margin-block-end: var(--s3); }
.parent-dashboard__section-header h2 { margin: 0; font-size: var(--type-h3); }
.parent-dashboard__section-header a { min-block-size: var(--target-min); display: inline-flex; align-items: center; color: var(--brand-link); font-size: var(--type-small); font-weight: 700; }
.parent-dashboard__children { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: var(--s3); }
.parent-child-card { min-inline-size: 0; min-block-size: 10rem; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: var(--s2) var(--s3); padding: var(--s4); border: 1px solid var(--c-line); border-radius: calc(var(--r-card) * .72); background: var(--c-surface); box-shadow: var(--shadow-subtle); }
.parent-child-card__avatar { grid-row: 1 / span 2; inline-size: 3.5rem; block-size: 3.5rem; display: grid; place-items: center; border-radius: 50%; color: var(--brand-on-primary); background: linear-gradient(145deg, var(--brand-primary), color-mix(in srgb, var(--brand-primary) 64%, var(--brand-secondary))); font-size: 1.25rem; font-weight: 850; }
.parent-child-card__identity { min-inline-size: 0; display: grid; align-content: center; gap: .2rem; }
.parent-child-card__identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-ink); font-size: var(--type-body); }
.parent-child-card__identity span, .parent-child-card__summary { color: var(--c-muted); font-size: var(--type-label); }
.parent-child-card__summary { grid-column: 1 / -1; align-self: end; padding-block-start: var(--s2); border-block-start: 1px solid var(--c-line); }
.parent-child-card > a { grid-column: 1 / -1; min-block-size: var(--target-min); display: inline-flex; align-items: center; justify-content: center; align-self: end; padding: var(--s2) var(--s3); border-radius: .65rem; color: var(--brand-primary); background: var(--brand-primary-soft); font-size: var(--type-small); font-weight: 750; }
.parent-child-card > a:hover, .parent-child-card > a:focus-visible { background: color-mix(in srgb, var(--brand-primary) 15%, var(--c-surface)); }
.parent-dashboard__attention { margin-block: var(--s4); }
.parent-dashboard__attention-card {
    min-block-size: 6.75rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    text-decoration: none;
}
.parent-dashboard__attention-card .dashboard-kpi__icon { color: var(--c-warning); background: color-mix(in srgb, var(--c-warning) 12%, var(--c-surface)); }
.parent-dashboard__attention-card:focus-visible { outline: 3px solid var(--brand-focus); outline-offset: 3px; }
.parent-dashboard__attention-arrow { color: var(--c-muted); font-size: 1.25rem; font-weight: 800; }
.parent-dashboard__quick-actions { padding-block: var(--s4); }
.parent-dashboard__actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.parent-dashboard__actions .dashboard-action { min-block-size: 4.5rem; }
.parent-dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); align-items: start; }
.parent-dashboard-list { display: grid; }
.parent-dashboard-row { min-inline-size: 0; min-block-size: 4.8rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-block-start: 1px solid var(--c-line); color: var(--c-ink); }
.parent-dashboard-row:first-child { border-block-start: 0; }
.parent-dashboard-row:hover .parent-dashboard-row__content strong, .parent-dashboard-row:focus-visible .parent-dashboard-row__content strong { color: var(--brand-primary); }
.parent-dashboard-row__date { inline-size: 3rem; min-block-size: 3.25rem; display: grid; place-items: center; align-content: center; border-radius: .7rem; color: var(--c-ink); background: var(--c-surface-mid); line-height: 1; }
.parent-dashboard-row__date strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.parent-dashboard-row__date small { margin-block-start: .2rem; color: var(--c-muted); font-size: .62rem; font-weight: 800; letter-spacing: .05em; }
.parent-dashboard-row__marker { inline-size: 2.75rem; block-size: 2.75rem; display: grid; place-items: center; border-radius: 50%; color: var(--brand-primary); background: var(--brand-primary-soft); font-size: var(--type-small); font-weight: 850; }
.parent-dashboard-row__marker--focus { color: color-mix(in srgb, var(--brand-secondary) 78%, var(--c-ink)); background: var(--brand-secondary-soft); }
.parent-dashboard-row__content { min-inline-size: 0; display: grid; gap: .2rem; }
.parent-dashboard-row__content strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--type-small); transition: color var(--motion-micro); }
.parent-dashboard-row__content small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-muted); font-size: var(--type-label); }
.parent-dashboard-row__arrow { color: var(--brand-primary); font-weight: 800; }
.parent-absence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.parent-absence-card { min-inline-size: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3); min-block-size: 5.5rem; padding: var(--s3); border: 1px solid var(--c-line); border-radius: var(--r-field); color: var(--c-ink); background: var(--c-surface-low); }
.parent-absence-card > span:nth-child(2) { min-inline-size: 0; display: grid; gap: .15rem; }
.parent-absence-card > span:nth-child(2) strong, .parent-absence-card > span:nth-child(2) small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parent-absence-card > span:nth-child(2) small { color: var(--c-muted); font-size: var(--type-label); }
.parent-dashboard__empty { padding-block: var(--s4); }

@media (max-width: 64rem) {
    .parent-dashboard__actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 48rem) {
    .parent-dashboard__children { grid-auto-flow: column; grid-auto-columns: minmax(15.5rem, 82vw); grid-template-columns: none; overflow-x: auto; padding-block-end: var(--s2); scroll-snap-type: inline mandatory; overscroll-behavior-inline: contain; }
    .parent-child-card { scroll-snap-align: start; }
    .parent-dashboard-grid, .parent-absence-grid { grid-template-columns: minmax(0, 1fr); }
    .parent-dashboard__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
    .parent-dashboard { gap: var(--s4); }
    .parent-dashboard__attention-card { grid-template-columns: minmax(0, 1fr) auto; }
    .parent-dashboard__attention-card .dashboard-kpi__icon { display: none; }
    .parent-dashboard__greeting { padding-block-end: var(--s1); }
    .parent-dashboard__children { margin-inline-end: calc(-1 * var(--s4)); padding-inline-end: var(--s4); }
    .parent-child-card { min-block-size: 9.5rem; }
    .parent-dashboard__actions .dashboard-action { min-block-size: 4.15rem; padding: var(--s2) var(--s3); }
    .parent-dashboard-row { min-block-size: 4.5rem; }
    .parent-dashboard-row > .c-chip { display: none; }
    .parent-absence-card { grid-template-columns: auto minmax(0, 1fr); }
    .parent-absence-card > .c-chip { grid-column: 2; justify-self: start; }
}

/* Student dashboard: age-clear, COLCA-informed learning overview using only verified student data. */
.student-dashboard { gap: var(--s5); }
.student-dashboard__identity { min-inline-size: 12rem; }
.student-dashboard__identity .c-chip { justify-self: end; }
.student-dashboard__kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.student-dashboard__hero { position: relative; isolation: isolate; overflow: hidden; min-block-size: 13.5rem; padding: clamp(1.5rem, 3vw, 2.6rem); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(8rem, .55fr) auto; align-items: center; gap: var(--s5); border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, var(--c-line)); border-radius: calc(var(--r-card) + .35rem); background: linear-gradient(105deg, color-mix(in srgb, var(--brand-primary-soft) 74%, var(--c-surface)) 0%, var(--c-surface) 48%, color-mix(in srgb, var(--brand-accent-soft) 62%, var(--c-surface)) 100%); box-shadow: var(--shadow-card); }
.student-dashboard__hero-backdrop { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.student-dashboard__hero-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--c-surface) 96%, transparent) 0 34%, color-mix(in srgb, var(--c-surface) 76%, transparent) 60%, color-mix(in srgb, var(--brand-primary-soft) 42%, transparent) 100%); }
.student-dashboard__hero-backdrop img { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: .25; filter: saturate(.8); }
.student-dashboard__hero-copy { position: relative; z-index: 2; min-inline-size: 0; }
.student-dashboard__hero-copy .eyebrow { color: color-mix(in srgb, var(--brand-primary) 78%, var(--c-ink)); }
.student-dashboard__hero-copy h1 { max-inline-size: 15ch; margin-block: .2rem .55rem; font-family: var(--font-display, var(--font-family)); font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.02; letter-spacing: -.035em; color: var(--c-ink); }
.student-dashboard__hero-intro { max-inline-size: 38rem; margin: 0; color: var(--c-muted); font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.55; }
.student-dashboard__hero-note { margin: var(--s4) 0 0; color: color-mix(in srgb, var(--brand-primary) 82%, var(--c-ink)); font-size: var(--type-small); font-weight: 750; letter-spacing: .01em; }
.student-dashboard__hero-visual { position: relative; align-self: stretch; min-block-size: 10rem; display: grid; place-items: end center; }
.student-dashboard__hero-halo { position: absolute; inline-size: 10rem; block-size: 10rem; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -50%; border-radius: 50%; background: color-mix(in srgb, var(--brand-accent-soft) 76%, var(--c-surface)); box-shadow: 0 0 0 1rem color-mix(in srgb, var(--c-surface) 38%, transparent); }
.student-dashboard__hero-mascot { position: relative; z-index: 1; inline-size: min(10rem, 100%); max-block-size: 11rem; object-fit: contain; filter: drop-shadow(0 .65rem .75rem rgba(30, 41, 59, .12)); }
.student-dashboard__hero .student-dashboard__identity { position: relative; z-index: 2; align-self: stretch; justify-content: center; padding-inline-start: var(--s4); border-inline-start: 1px solid color-mix(in srgb, var(--brand-primary) 14%, var(--c-line)); }
.student-dashboard__hero .student-dashboard__identity .role-workspace__avatar { inline-size: 3.2rem; block-size: 3.2rem; box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--brand-primary-soft) 62%, transparent); }
.student-dashboard__kpis .dashboard-kpi { min-block-size: 8.25rem; border-color: color-mix(in srgb, var(--brand-primary) 10%, var(--c-line)); background: linear-gradient(150deg, var(--c-surface), color-mix(in srgb, var(--brand-primary-soft) 18%, var(--c-surface))); box-shadow: var(--shadow-subtle); transition: translate var(--motion-micro), box-shadow var(--motion-micro), border-color var(--motion-micro); }
.student-dashboard__kpis .dashboard-kpi:hover { translate: 0 -.12rem; border-color: color-mix(in srgb, var(--brand-primary) 24%, var(--c-line)); box-shadow: var(--shadow-card); }
.student-dashboard__kpis .dashboard-kpi__icon { inline-size: 2.9rem; block-size: 2.9rem; border-radius: 1rem; }
.student-dashboard__quick-actions { border-color: color-mix(in srgb, var(--brand-primary) 14%, var(--c-line)); background: color-mix(in srgb, var(--brand-primary-soft) 20%, var(--c-surface)); }
.student-dashboard__actions .dashboard-action { border: 1px solid color-mix(in srgb, var(--brand-primary) 12%, var(--c-line)); border-radius: 1rem; background: var(--c-surface); box-shadow: var(--shadow-subtle); }
.student-dashboard__actions .dashboard-action:hover, .student-dashboard__actions .dashboard-action:focus-visible { border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--c-line)); box-shadow: var(--shadow-card); }
.student-dashboard-grid > .dashboard-panel { border-color: color-mix(in srgb, var(--brand-primary) 11%, var(--c-line)); box-shadow: var(--shadow-subtle); }
.student-dashboard__primary-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.student-dashboard__supporting-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.student-dashboard__focus-panel { position: relative; overflow: hidden; }
.student-dashboard__focus-panel::after { content: ""; position: absolute; inline-size: 9rem; block-size: 9rem; inset-inline-end: -3rem; inset-block-end: -4rem; border-radius: 50%; background: color-mix(in srgb, var(--brand-secondary-soft) 52%, transparent); pointer-events: none; }
@media (max-width: 64rem) { .student-dashboard__hero { grid-template-columns: minmax(0, 1fr) 8rem; } .student-dashboard__hero .student-dashboard__identity { grid-column: 1 / -1; display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-start; min-inline-size: 0; padding: var(--s3) 0 0; border-inline-start: 0; border-block-start: 1px solid color-mix(in srgb, var(--brand-primary) 14%, var(--c-line)); } .student-dashboard__hero .student-dashboard__identity .c-chip { justify-self: auto; } }
@media (max-width: 48rem) { .student-dashboard__hero { min-block-size: 0; grid-template-columns: minmax(0, 1fr); padding: var(--s5); } .student-dashboard__hero-visual { position: absolute; inset-inline-end: .75rem; inset-block-start: .75rem; inline-size: 6.5rem; min-block-size: 6.5rem; opacity: .32; } .student-dashboard__hero-halo { inline-size: 6rem; block-size: 6rem; } .student-dashboard__hero-mascot { inline-size: 6rem; max-block-size: 6.5rem; } .student-dashboard__hero-copy { padding-inline-end: 3rem; } .student-dashboard__hero-copy h1 { font-size: clamp(1.8rem, 9vw, 2.6rem); } .student-dashboard__hero-note { display: none; } .student-dashboard__primary-grid, .student-dashboard__supporting-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .student-dashboard__hero { padding: var(--s4); border-radius: var(--r-card); } .student-dashboard__hero-copy { padding-inline-end: 1rem; } .student-dashboard__hero-visual { opacity: .2; } .student-dashboard__hero .student-dashboard__identity { gap: var(--s2); } .student-dashboard__hero .student-dashboard__identity .role-workspace__avatar { display: none; } .student-dashboard__hero .student-dashboard__identity .button { inline-size: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .student-dashboard__kpis .dashboard-kpi { transition: none; } .student-dashboard__kpis .dashboard-kpi:hover { translate: none; } }
.student-dashboard__quick-actions { padding-block: var(--s4); }
.student-dashboard__actions { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.student-dashboard__actions .dashboard-action { min-block-size: 4.4rem; grid-template-columns: auto minmax(0, 1fr); }
.student-dashboard__actions .dashboard-action__arrow { display: none; }
.student-dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); align-items: start; }
.student-dashboard__focus-panel { background: linear-gradient(145deg, var(--c-surface), color-mix(in srgb, var(--brand-primary-soft) 52%, var(--c-surface))); }
.student-focus-list, .student-dashboard-list { display: grid; }
.student-focus-card, .student-dashboard-row { min-inline-size: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3); color: var(--c-ink); }
.student-focus-card { min-block-size: 6rem; padding: var(--s3) 0; border-block-start: 1px solid var(--c-line); }
.student-focus-card:first-child, .student-dashboard-row:first-child { border-block-start: 0; }
.student-focus-card:hover strong, .student-focus-card:focus-visible strong, .student-dashboard-row:hover strong, .student-dashboard-row:focus-visible strong { color: var(--brand-primary); }
.student-dashboard-row { min-block-size: 4.7rem; padding: var(--s3) 0; border-block-start: 1px solid var(--c-line); }
.student-dashboard-row__date { inline-size: 3rem; min-block-size: 3.25rem; display: grid; place-items: center; align-content: center; border-radius: .75rem; color: var(--c-ink); background: var(--brand-accent-soft); line-height: 1; }
.student-dashboard-row__date strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.student-dashboard-row__date small { margin-block-start: .2rem; color: var(--c-muted); font-size: .62rem; font-weight: 800; letter-spacing: .05em; }
.student-dashboard-row__marker { inline-size: 2.8rem; block-size: 2.8rem; display: grid; place-items: center; border-radius: 50%; color: var(--brand-primary); background: var(--brand-primary-soft); font-size: var(--type-small); font-weight: 850; }
.student-dashboard-row__marker--focus { color: color-mix(in srgb, var(--brand-secondary) 76%, var(--c-ink)); background: var(--brand-secondary-soft); }
.student-dashboard-row__marker--grade { color: color-mix(in srgb, var(--brand-accent) 72%, var(--c-ink)); background: var(--brand-accent-soft); }
.student-dashboard-row__content { min-inline-size: 0; display: grid; gap: .2rem; }
.student-dashboard-row__content > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--type-small); transition: color var(--motion-micro); }
.student-dashboard-row__content > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-muted); font-size: var(--type-label); }
.student-dashboard-row__content > span { display: -webkit-box; overflow: hidden; color: var(--c-muted); font-size: var(--type-label); line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.student-dashboard-row__arrow { color: var(--brand-primary); font-weight: 800; }
.student-grade-score { min-inline-size: 4.5rem; justify-self: end; padding: var(--s2) var(--s3); border-radius: var(--r-pill); color: var(--brand-primary); background: var(--brand-primary-soft); font-size: var(--type-small); font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.student-dashboard__feature-empty { border-style: dashed; background: var(--c-surface-low); }
.student-dashboard__empty { padding-block: var(--s4); }

@media (max-width: 64rem) {
    .student-dashboard__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .student-dashboard__actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 48rem) {
    .student-dashboard__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .student-dashboard-grid { grid-template-columns: minmax(0, 1fr); }
    .student-dashboard__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
    .student-dashboard { gap: var(--s4); }
    .student-dashboard__greeting { align-items: flex-start; }
    .student-dashboard__identity { min-inline-size: 0; justify-items: start; text-align: start; }
    .student-dashboard__identity .c-chip { justify-self: start; }
    .student-dashboard__kpis .dashboard-kpi { min-block-size: 7.35rem; }
    .student-dashboard__quick-actions { padding: var(--s4); }
    .student-dashboard__actions .dashboard-action { min-block-size: 4.1rem; padding: var(--s2) var(--s3); }
    .student-dashboard-row, .student-focus-card { min-block-size: 4.5rem; }
    .student-grade-score { min-inline-size: 0; padding-inline: var(--s2); }
}


/* UI-7O Site Builder shell: keep the mature builder workspace, align only its admin framing. */
.admin-site-builder .admin-settings-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s5);
}

.admin-site-builder .builder-page-heading {
    margin: 0;
}

.admin-site-builder .builder-status-panel {
    margin: 0;
    border-color: color-mix(in srgb, var(--brand-primary) 12%, var(--c-line));
    box-shadow: var(--shadow-subtle);
}

/* UI-7 Admin management surface: dense settings composition */
.admin-management-surface {
    gap: var(--space-6, 1.5rem);
}

.admin-page-heading {
    background: var(--surface-container-low, #fbf8f0);
    border: 1px solid var(--outline-variant, #e6decf);
    border-radius: var(--radius-xl, 1.25rem);
    padding: clamp(1.25rem, 2vw, 2rem);
}

.admin-page-heading h1 {
    margin: .35rem 0;
}

.admin-settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

.admin-settings-card {
    padding: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 1024px) {
    .admin-settings-grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 980px;
    }
}

/* UI-7C Academic setup: dense, calm admin management composition */
.admin-academic-settings .admin-settings-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s5);
}

.admin-settings-heading__body {
    min-inline-size: 0;
}

.admin-settings-heading__body > p:not(.eyebrow) {
    max-inline-size: 68ch;
    margin-block: var(--s2) 0;
    color: var(--c-muted);
}

.admin-settings-heading__action {
    flex: 0 0 auto;
}

.admin-settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(18rem, .85fr);
    gap: var(--s5);
    align-items: start;
}

.admin-settings-main,
.admin-settings-aside {
    display: grid;
    gap: var(--s5);
    min-inline-size: 0;
}

.admin-settings-aside {
    position: sticky;
    inset-block-start: var(--s5);
}

.admin-settings-section,
.admin-settings-form-card {
    padding: clamp(var(--s4), 2vw, var(--s6));
}

.admin-settings-section__header {
    align-items: flex-start;
    margin-block-end: var(--s3);
}

.admin-settings-section__header > div {
    min-inline-size: 0;
}

.admin-settings-section__header .muted,
.admin-settings-form-card > .muted {
    margin-block: var(--s1) 0;
}

.admin-settings-list {
    border-block-start: 1px solid var(--c-line);
}

.admin-settings-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s4);
    align-items: center;
    padding-block: var(--s4);
    border-block-end: 1px solid var(--c-line);
}

.admin-settings-row:last-child {
    border-block-end: 0;
    padding-block-end: 0;
}

.admin-settings-row__body {
    min-inline-size: 0;
}

.notification-row--unread { background: color-mix(in srgb, var(--role-accent-soft) 55%, transparent); }
.notification-row__detail { margin: var(--s2) 0 0; color: var(--c-text); line-height: 1.55; }

.admin-settings-row__title {
    gap: var(--s2);
}

.admin-settings-row__meta {
    margin: var(--s1) 0 0;
    color: var(--c-muted);
    font-size: var(--type-body-sm);
}

.admin-settings-row__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--s2);
}

.admin-settings-row__actions form {
    margin: 0;
}

.admin-settings-row__actions .button {
    min-block-size: 2.75rem;
}

.admin-settings-empty {
    margin-block-start: var(--s2);
}

.admin-settings-form-card h2 {
    margin-block: var(--s1) var(--s2);
}

.admin-settings-form-card form {
    margin-block-start: var(--s4);
}

.admin-settings-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s3);
}

@media (max-width: 64rem) {
    .admin-settings-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-settings-aside {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 48rem) {
    .admin-academic-settings .admin-settings-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-settings-heading__action {
        align-self: flex-start;
    }

    .admin-settings-aside {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 40rem) {
    .admin-settings-row {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s3);
    }

    .admin-settings-row__actions {
        justify-content: flex-start;
    }

    .admin-settings-row__actions .button {
        min-block-size: 2.75rem;
        min-inline-size: 2.75rem;
    }

    .admin-settings-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* UI-7D Staff access: dense access-management presentation */
.admin-staff-access .admin-settings-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s5);
}

.staff-invitation-ready {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(18rem, 1.2fr);
    gap: var(--s5);
    align-items: end;
}

.staff-invitation-ready h2,
.staff-invitation-ready p {
    margin-block: 0;
}

.staff-invitation-ready__copy,
.staff-invitation-ready__field {
    display: grid;
    gap: var(--s2);
    min-inline-size: 0;
}

.staff-invitation-ready__field input {
    background: color-mix(in srgb, var(--c-info) 3%, var(--c-surface));
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: var(--type-small);
}

.staff-access-layout {
    grid-template-columns: minmax(0, 1.75fr) minmax(18rem, .75fr);
}

.staff-access-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s3);
    align-items: start;
    margin-block: var(--s4);
    padding: var(--s3) var(--s4);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, var(--c-line));
    border-radius: var(--r-field);
    background: color-mix(in srgb, var(--brand-primary) 5%, var(--c-surface));
}

.staff-access-note__mark {
    inline-size: 1.6rem;
    block-size: 1.6rem;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 40%, var(--c-line));
    border-radius: 50%;
    color: var(--brand-primary);
    font-size: var(--type-label);
    font-weight: 800;
}

.staff-access-note strong {
    font-size: var(--type-small);
}

.staff-access-note p {
    margin: var(--s1) 0 0;
    color: var(--c-muted);
    font-size: var(--type-small);
}

.staff-access-row {
    min-block-size: 5.4rem;
}

.staff-access-row .admin-settings-row__title {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
}

.staff-access-avatar {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, var(--c-line));
    border-radius: 50%;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
    font-size: var(--type-small);
    font-weight: 800;
    text-transform: uppercase;
}

.staff-access-identity {
    min-inline-size: 0;
}

.staff-access-identity strong,
.staff-access-identity p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staff-access-row__help {
    margin-block-start: var(--s2);
    padding-inline-start: calc(2.5rem + var(--s2));
}

.staff-access-invite-card {
    border-color: color-mix(in srgb, var(--brand-primary) 16%, var(--c-line));
}

@media (max-width: 64rem) {
    .staff-access-layout,
    .staff-invitation-ready {
        grid-template-columns: minmax(0, 1fr);
    }

    .staff-access-layout .admin-settings-aside {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 48rem) {
    .admin-staff-access .admin-settings-heading {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 40rem) {
    .staff-access-row .admin-settings-row__title {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .staff-access-row .admin-settings-row__title > .c-chip {
        grid-column: 2;
        justify-self: start;
    }

    .staff-access-row__help {
        padding-inline-start: 0;
    }

    .staff-access-row .admin-settings-row__actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .staff-access-row .admin-settings-row__actions .button {
        inline-size: 100%;
    }
}

/* UI-7E Family access: dense family-membership management presentation */
.admin-family-access .admin-settings-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s5);
}

.access-invitation-ready {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(18rem, 1.2fr);
    gap: var(--s5);
    align-items: end;
}

.access-invitation-ready h2,
.access-invitation-ready p {
    margin-block: 0;
}

.access-invitation-ready__copy,
.access-invitation-ready__field {
    display: grid;
    gap: var(--s2);
    min-inline-size: 0;
}

.access-invitation-ready__field input {
    background: color-mix(in srgb, var(--c-info) 3%, var(--c-surface));
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: var(--type-small);
}

.family-access-layout {
    grid-template-columns: minmax(0, 1.75fr) minmax(18rem, .75fr);
}

.access-management-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s3);
    align-items: start;
    margin-block: var(--s4);
    padding: var(--s3) var(--s4);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, var(--c-line));
    border-radius: var(--r-field);
    background: color-mix(in srgb, var(--brand-primary) 5%, var(--c-surface));
}

.access-management-note__mark {
    inline-size: 1.6rem;
    block-size: 1.6rem;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 40%, var(--c-line));
    border-radius: 50%;
    color: var(--brand-primary);
    font-size: var(--type-label);
    font-weight: 800;
}

.access-management-note strong {
    font-size: var(--type-small);
}

.access-management-note p {
    margin: var(--s1) 0 0;
    color: var(--c-muted);
    font-size: var(--type-small);
}

.access-management-row {
    min-block-size: 5.4rem;
}

.access-management-row__title {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
}

.access-management-avatar {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, var(--c-line));
    border-radius: 50%;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
    font-size: var(--type-small);
    font-weight: 800;
    text-transform: uppercase;
}

.access-management-identity {
    min-inline-size: 0;
}

.access-management-identity strong,
.access-management-identity p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.access-management-row__help {
    margin-block-start: var(--s2);
    padding-inline-start: calc(2.5rem + var(--s2));
}

.family-access-invite-card {
    border-color: color-mix(in srgb, var(--brand-primary) 16%, var(--c-line));
}

@media (max-width: 64rem) {
    .family-access-layout,
    .access-invitation-ready {
        grid-template-columns: minmax(0, 1fr);
    }

    .family-access-layout .admin-settings-aside {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 48rem) {
    .admin-family-access .admin-settings-heading {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 40rem) {
    .access-management-row__title {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .access-management-row__title > .c-chip {
        grid-column: 2;
        justify-self: start;
    }

    .access-management-row__help {
        padding-inline-start: 0;
    }

    .access-management-row .admin-settings-row__actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .access-management-row .admin-settings-row__actions .button {
        inline-size: 100%;
    }
}

/* UI-7F Student access: canonical-student portal access management presentation */
.admin-student-access .admin-settings-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s5);
}

.student-access-layout {
    grid-template-columns: minmax(0, 1.85fr) minmax(18rem, .65fr);
}

.student-access-row {
    align-items: start;
}

.student-access-row__title {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--s3);
    align-items: center;
}

.student-access-row__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--s2);
}

.student-access-inline-invite,
.student-access-account {
    margin-block-start: var(--s3);
    margin-inline-start: calc(2.5rem + var(--s3));
    padding-block-start: var(--s3);
    border-block-start: 1px solid var(--c-line);
}

.student-access-inline-invite {
    display: grid;
    gap: var(--s3);
}

.student-access-inline-invite__copy {
    display: grid;
    gap: var(--s1);
}

.student-access-inline-invite__copy p,
.student-access-account p {
    margin: 0;
    color: var(--c-muted);
    font-size: var(--type-body-sm);
}

.student-access-inline-invite__form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: var(--s3);
    align-items: end;
}

.student-access-inline-invite__errors {
    grid-column: 1 / -1;
}

.student-access-inline-invite__form .button {
    min-block-size: 2.75rem;
    align-self: end;
}

.student-access-account {
    display: grid;
    gap: var(--s2);
}

.student-access-account > div {
    display: grid;
    gap: .15rem;
}

.student-access-account__label {
    color: var(--c-muted);
    font-size: var(--type-label);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.student-access-search-card {
    border-color: color-mix(in srgb, var(--brand-primary) 16%, var(--c-line));
}

.student-access-more-results {
    margin-block: var(--s3);
}

@media (max-width: 64rem) {
    .student-access-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .student-access-inline-invite__form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-access-inline-invite__form .button {
        justify-self: start;
    }
}

@media (max-width: 48rem) {
    .admin-student-access .admin-settings-heading {
        flex-direction: column;
        align-items: stretch;
    }

    .student-access-row__title {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .student-access-row__chips {
        grid-column: 2;
        justify-content: flex-start;
    }
}

@media (max-width: 40rem) {
    .student-access-inline-invite,
    .student-access-account {
        margin-inline-start: 0;
    }

    .student-access-inline-invite__form {
        grid-template-columns: minmax(0, 1fr);
    }

    .student-access-inline-invite__form .button,
    .student-access-row .admin-settings-row__actions,
    .student-access-row .admin-settings-row__actions .button {
        inline-size: 100%;
    }

    .student-access-row .admin-settings-row__actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
}

/* UI-7G Class sections: dense academic-operations management presentation */
.admin-class-sections .admin-settings-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s5);
}

.class-section-row__title {
    align-items: center;
}

.class-section-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
}

.class-section-create-card .empty-state {
    margin-block-start: var(--s4);
}

@media (max-width: 48rem) {
    .admin-class-sections .admin-settings-heading {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 40rem) {
    .class-section-row__actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .class-section-row__actions .button {
        inline-size: 100%;
    }
}

/* UI-7H Class section edit: focused tenant-scoped academic form */
.admin-class-section-edit .admin-settings-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s5);
}

.class-section-edit-layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(18rem, .7fr);
}

.class-section-edit-form {
    max-inline-size: 54rem;
}

.class-section-edit-form__structure {
    align-items: start;
}

.class-section-edit-actions {
    margin-block-start: var(--s2);
}

.class-section-edit-context__counts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-block: var(--s4);
}

.class-section-edit-context .button {
    inline-size: 100%;
}

@media (max-width: 64rem) {
    .class-section-edit-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .class-section-edit-aside {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 48rem) {
    .admin-class-section-edit .admin-settings-heading {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 40rem) {
    .class-section-edit-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        inline-size: 100%;
    }

    .class-section-edit-actions .button {
        inline-size: 100%;
    }
}

/* UI-7I Class teacher assignment: tenant-scoped teaching relationship management */
.admin-class-teachers .admin-settings-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s5);
}

.teacher-assignment-layout {
    grid-template-columns: minmax(0, 1.7fr) minmax(18rem, .8fr);
}

.teacher-assignment-row {
    align-items: start;
}

.teacher-assignment-row__title {
    align-items: center;
}

.teacher-assignment-row__help {
    margin-block: var(--s2) 0;
}

.teacher-assignment-context__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-block: var(--s3);
}

.teacher-assignment-context-card .button {
    inline-size: 100%;
    margin-block-start: var(--s3);
}

.teacher-assignment-assign-card {
    border-color: color-mix(in srgb, var(--brand-primary) 16%, var(--c-line));
}

.teacher-assignment-assign-card__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s3);
}

.teacher-assignment-assign-card__heading > div {
    min-inline-size: 0;
}

.teacher-assignment-assign-card__heading h2 {
    margin-block: var(--s1) 0;
}

.teacher-assignment-inactive-note {
    margin-block-start: var(--s4);
}

@media (max-width: 64rem) {
    .teacher-assignment-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .teacher-assignment-aside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 48rem) {
    .admin-class-teachers .admin-settings-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .teacher-assignment-aside {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 40rem) {
    .teacher-assignment-row__title {
        align-items: flex-start;
        flex-direction: column;
    }

    .teacher-assignment-row__actions,
    .teacher-assignment-row__actions form,
    .teacher-assignment-row__actions .button,
    .teacher-assignment-assign-card form > .button {
        inline-size: 100%;
    }

    .teacher-assignment-assign-card__heading {
        flex-direction: column;
    }
}

/* UI-7J Class student roster: canonical-student relationship management */
.admin-class-roster .admin-settings-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s5);
}

.roster-management-layout {
    grid-template-columns: minmax(0, 1.7fr) minmax(19rem, .85fr);
}

.roster-management-row {
    align-items: start;
}

.roster-management-row__title {
    align-items: center;
}

.roster-management-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s1);
}

.roster-context__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-block: var(--s3);
}

.roster-context-card .button {
    inline-size: 100%;
    margin-block-start: var(--s3);
}

.roster-add-card {
    border-color: color-mix(in srgb, var(--brand-primary) 16%, var(--c-line));
}

.roster-add-card__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s3);
}

.roster-add-card__heading > div {
    min-inline-size: 0;
}

.roster-add-card__heading h2 {
    margin-block: var(--s1) 0;
}

.roster-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--s3);
    margin-block-start: var(--s4);
}

.roster-search-form .form-group {
    min-inline-size: 0;
}

.roster-search-form .button {
    margin-block-end: calc(var(--s5) + 1px);
}

.roster-search-more,
.roster-inactive-note,
.roster-available-empty,
.roster-add-form {
    margin-block-start: var(--s4);
}

@media (max-width: 64rem) {
    .roster-management-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .roster-management-aside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 48rem) {
    .admin-class-roster .admin-settings-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .roster-management-aside {
        grid-template-columns: minmax(0, 1fr);
    }

    .roster-search-form {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .roster-search-form .button {
        margin-block-end: 0;
    }
}

@media (max-width: 40rem) {
    .roster-management-row__title {
        align-items: flex-start;
        flex-direction: column;
    }

    .roster-management-row__actions,
    .roster-management-row__actions form,
    .roster-management-row__actions .button,
    .roster-search-form .button,
    .roster-add-form > .button {
        inline-size: 100%;
    }

    .roster-add-card__heading {
        flex-direction: column;
    }
}

/* UI-7K Grade level edit: focused tenant-scoped academic ordering form */
.admin-grade-level-edit .admin-settings-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s5);
}

.grade-level-edit-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr);
}

.grade-level-edit-form {
    max-inline-size: 42rem;
}

.grade-level-edit-actions {
    margin-block-start: var(--s2);
}

.grade-level-edit-context__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-block: var(--s4);
}

.grade-level-edit-context .button {
    inline-size: 100%;
}

@media (max-width: 64rem) {
    .grade-level-edit-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .grade-level-edit-aside {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 48rem) {
    .admin-grade-level-edit .admin-settings-heading {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 40rem) {
    .grade-level-edit-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        inline-size: 100%;
    }

    .grade-level-edit-actions .button {
        inline-size: 100%;
    }
}

/* UI-7L Planned absence review: bounded tenant-scoped attendance workflow */
.admin-planned-absence .admin-settings-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s5);
}

.planned-absence-review-layout {
    grid-template-columns: minmax(0, 1.7fr) minmax(18rem, .75fr);
}

.planned-absence-review-row {
    align-items: start;
}

.planned-absence-review-row__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
}

.planned-absence-review-row__reason {
    margin: var(--s1) 0 0;
    font-weight: 650;
}

.planned-absence-review-row__dates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s1);
}

.planned-absence-review-row__details {
    display: grid;
    gap: .2rem;
    margin-block-start: var(--s3);
    padding: var(--s3);
    border-inline-start: 3px solid color-mix(in srgb, var(--brand-primary) 30%, var(--c-line));
    background: color-mix(in srgb, var(--brand-primary) 3%, var(--c-surface));
}

.planned-absence-review-row__details-label {
    color: var(--c-muted);
    font-size: var(--type-label);
    font-weight: 750;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.planned-absence-review-row__details p {
    margin: 0;
}

.planned-absence-summary-card .metric-value {
    display: block;
    margin-block: var(--s3) var(--s2);
}

.planned-absence-review-truncated {
    margin-block-start: var(--s3);
}

@media (max-width: 64rem) {
    .planned-absence-review-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .planned-absence-review-aside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 48rem) {
    .admin-planned-absence .admin-settings-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .planned-absence-review-aside {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 40rem) {
    .planned-absence-review-row__title {
        align-items: flex-start;
        flex-direction: column;
    }

    .planned-absence-review-row__actions,
    .planned-absence-review-row__actions form,
    .planned-absence-review-row__actions .button {
        inline-size: 100%;
    }
}

/* UI-7M Enrollment review: bounded tenant-native canonical-student approval queue */
.admin-enrollment-review .admin-settings-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s5);
}

.enrollment-review-layout {
    grid-template-columns: minmax(0, 1.75fr) minmax(18rem, .75fr);
}

.enrollment-review-row {
    align-items: start;
}

.enrollment-review-row__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.enrollment-review-row__preferred {
    margin: var(--s1) 0 0;
    color: var(--c-muted);
}

.enrollment-review-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
}

.enrollment-review-row__approved {
    margin-block-end: 0;
    max-inline-size: 68ch;
}

.enrollment-review-row__actions {
    align-self: center;
}

[data-enrollment-readiness] .form-help {
    overflow-wrap: normal;
    word-break: keep-all;
}

.enrollment-review-truncated {
    margin-block: var(--s4) 0;
}

.enrollment-review-summary .metric-value {
    display: block;
    margin-block: var(--s2);
}

@media (max-width: 64rem) {
    .enrollment-review-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .enrollment-review-aside {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 48rem) {
    .admin-enrollment-review .admin-settings-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .enrollment-review-aside {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 40rem) {
    .enrollment-review-row__title {
        align-items: flex-start;
        flex-direction: column;
    }

    .enrollment-review-row__actions,
    .enrollment-review-row__actions form,
    .enrollment-review-row__actions .button {
        inline-size: 100%;
    }
}

/* UI-7N Admin daily attendance: bounded tenant-scoped operational summary */
.admin-attendance-operations .admin-settings-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s5);
}

.attendance-operations-layout {
    grid-template-columns: minmax(0, 1.7fr) minmax(18rem, .8fr);
}

.attendance-date-card {
    padding: clamp(var(--s4), 2vw, var(--s6));
}

.attendance-date-form {
    display: grid;
    grid-template-columns: minmax(12rem, 18rem) auto;
    gap: var(--s3);
    align-items: end;
    margin-block-start: var(--s4);
}

.attendance-date-form .form-group {
    margin: 0;
}

.attendance-summary-card {
    padding: clamp(var(--s4), 2vw, var(--s6));
}

.attendance-summary-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s2);
    margin-block-start: var(--s4);
}

.attendance-summary-metric {
    min-inline-size: 0;
    padding: var(--s4);
    border: 1px solid var(--c-line);
    border-radius: var(--r-field);
    background: var(--c-surface-low);
}

.attendance-summary-metric span {
    display: block;
    color: var(--c-muted);
    font-size: var(--type-label);
    line-height: 1.35;
}

.attendance-summary-metric strong {
    display: block;
    margin-block-start: var(--s2);
    font-size: clamp(1.55rem, 2.4vw, 2.1rem);
    line-height: 1;
}

.attendance-class-row,
.attendance-absence-row {
    align-items: start;
}

.attendance-class-row__title,
.attendance-absence-row__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.attendance-operations-truncated {
    margin-block: var(--s4) 0;
}

.attendance-status-list {
    display: grid;
    gap: 0;
    margin-block-start: var(--s4);
    border-block-start: 1px solid var(--c-line);
}

.attendance-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    min-block-size: 2.85rem;
    border-block-end: 1px solid var(--c-line);
}

.attendance-status-row strong {
    font-size: var(--type-body-sm);
}

.attendance-status-row span {
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.attendance-review-card .button {
    margin-block-start: var(--s4);
    inline-size: 100%;
}

@media (max-width: 64rem) {
    .attendance-operations-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .attendance-operations-aside {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .attendance-status-card {
        grid-row: span 2;
    }
}

@media (max-width: 48rem) {
    .admin-attendance-operations .admin-settings-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .attendance-summary-strip,
    .attendance-operations-aside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .attendance-status-card {
        grid-row: auto;
    }
}

@media (max-width: 40rem) {
    .attendance-date-form,
    .attendance-summary-strip,
    .attendance-operations-aside {
        grid-template-columns: minmax(0, 1fr);
    }

    .attendance-date-form .button,
    .admin-attendance-operations .admin-settings-heading__action {
        inline-size: 100%;
    }

    .attendance-class-row__title,
    .attendance-absence-row__title {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* UI-7P Admin operations hub: truthful navigation to implemented tenant workflows */
.admin-operations-hub .admin-settings-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s5);
}

.operations-hub-intro {
    padding: clamp(var(--s4), 2vw, var(--s6));
}

.operations-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s4);
}

.operations-hub-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--s5);
    min-inline-size: 0;
    padding: clamp(var(--s4), 2vw, var(--s6));
}

.operations-hub-card h2,
.operations-hub-boundary h2 {
    margin-block: var(--s1) var(--s2);
}

.operations-hub-card p:not(.eyebrow),
.operations-hub-boundary p:not(.eyebrow) {
    margin: 0;
    color: var(--c-muted);
}

.operations-hub-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    align-items: center;
}

.operations-hub-card__actions .button {
    min-block-size: 2.75rem;
}

.operations-hub-boundary {
    padding: clamp(var(--s4), 2vw, var(--s6));
    border-style: dashed;
}

@media (max-width: 64rem) {
    .admin-operations-hub .admin-settings-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-operations-hub .admin-settings-heading__action {
        align-self: flex-start;
    }
}

@media (max-width: 48rem) {
    .operations-hub-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 40rem) {
    .operations-hub-card__actions,
    .operations-hub-card__actions .button {
        inline-size: 100%;
    }

    .operations-hub-card__actions .button {
        justify-content: center;
    }
}

/* UI-7R / P5.1 tenant-native family announcements */
.announcement-management-layout {
    align-items: start;
}

.announcement-row__body,
.announcement-family-item p:not(.eyebrow):not(.muted) {
    margin: 0.55rem 0 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.announcement-publish-aside {
    position: sticky;
    top: 1rem;
}

.announcement-publish-form textarea {
    min-height: 10rem;
    resize: vertical;
}

.parent-announcement-page {
    display: grid;
    gap: 1rem;
}

.parent-page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.parent-page-heading > div {
    min-width: 0;
}

.announcement-family-list {
    display: grid;
    gap: 0.75rem;
}

.announcement-family-item {
    align-items: flex-start;
}

.announcement-family-item__time {
    margin-top: 0.55rem;
}

@media (max-width: 64rem) {
    .announcement-publish-aside {
        position: static;
    }
}

@media (max-width: 48rem) {
    .parent-page-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .parent-page-heading > .c-chip {
        align-self: flex-start;
    }
}

@media (max-width: 40rem) {
    .announcement-family-feed .c-card__header,
    .announcement-row .admin-settings-row__title {
        align-items: flex-start;
        flex-direction: column;
    }

    .announcement-publish-form .button {
        width: 100%;
    }
}

.preserve-lines {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* P6.11 Enrollment reviewer work queue: bounded server-derived scope switch */
.enrollment-review-scope {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-block: 0 var(--s4);
    padding-block-end: var(--s4);
    border-bottom: 1px solid var(--c-line);
}

.enrollment-review-scope .button {
    min-block-size: 2.75rem;
}

.enrollment-review-scope__help {
    flex-basis: 100%;
    margin: 0;
    max-inline-size: 70ch;
}

@media (max-width: 40rem) {
    .enrollment-review-scope .button {
        flex: 1 1 10rem;
    }
}

/* P6.10 Enrollment reviewer assignment: server-backed bounded coordination controls */
.enrollment-review-assignment > summary {
    cursor: pointer;
    list-style: none;
    text-align: center;
}

.enrollment-review-assignment > summary::-webkit-details-marker {
    display: none;
}

.enrollment-review-assignment__form {
    margin-block-start: var(--s3);
    padding: var(--s3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-field);
    background: var(--c-surface-low);
}

.enrollment-review-assignment__form select {
    inline-size: 100%;
}

@media (max-width: 40rem) {
    .enrollment-review-assignment,
    .enrollment-review-assignment__form {
        inline-size: 100%;
    }
}

/* P6.1 Enrollment rejection: compact decision controls within the bounded review queue */
.enrollment-review-row__actions {
    display: grid;
    gap: var(--s2);
    min-inline-size: min(100%, 17rem);
}

.enrollment-review-reject > summary {
    cursor: pointer;
    list-style: none;
    text-align: center;
}

.enrollment-review-reject > summary::-webkit-details-marker {
    display: none;
}

.enrollment-review-reject__form {
    margin-block-start: var(--s3);
    padding: var(--s3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-field);
    background: var(--c-surface-low);
}

.enrollment-review-reject__form textarea {
    min-block-size: 7rem;
    resize: vertical;
}

.enrollment-review-row__rejected {
    margin-block-start: var(--s2);
}

.enrollment-review-reason {
    display: grid;
    gap: var(--s1);
    margin-block: var(--s2) 0;
    max-inline-size: 68ch;
}

@media (max-width: 40rem) {
    .enrollment-review-row__actions,
    .enrollment-review-reject,
    .enrollment-review-reject__form {
        inline-size: 100%;
    }
}


.admin-settings-heading__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    align-items: center;
}

@media (max-width: 40rem) {
    .admin-settings-heading__actions {
        inline-size: 100%;
    }

    .admin-settings-heading__actions .button {
        flex: 1 1 12rem;
    }
}

/* F1.2 Family permission forms: accessible bounded Yes/No choices */
.form-choice-list {
    display: grid;
    gap: var(--s2);
    padding: 0;
    border: 0;
}

.form-choice-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--s3);
    min-block-size: var(--target-min);
    padding: var(--s3) var(--s4);
    border: 1px solid var(--c-line);
    border-radius: var(--r-field);
    background: var(--c-surface);
    cursor: pointer;
}

.form-choice-option:focus-within {
    border-color: var(--brand-focus);
    box-shadow: 0 0 0 .1875rem color-mix(in srgb, var(--brand-focus) 20%, transparent);
}

.form-choice-option input[type="radio"] {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    margin: 0;
    accent-color: var(--brand-primary);
}

/* UI-8C Admin command center: adopt shared primitives without inventing dashboard data */
.admin-dashboard--command-center {
    inline-size: min(100%, 96rem);
    margin-inline: auto;
}

.admin-dashboard--setup {
    inline-size: min(100%, 68rem);
}

.admin-dashboard--setup .admin-dashboard__header {
    border-block-end-color: color-mix(in srgb, var(--brand-primary) 22%, var(--c-shell-border));
}

.admin-dashboard--setup .trial-getting-started {
    border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--c-surface-border));
    background: color-mix(in srgb, var(--brand-primary-soft) 38%, var(--c-surface));
}

.public-account-menu > summary {
    min-inline-size: var(--target-min);
    justify-content: center;
    padding-inline: var(--s3);
}

.admin-dashboard__header {
    padding-block: var(--s2) var(--s3);
    border-block-end: 1px solid color-mix(in srgb, var(--c-shell-border) 72%, transparent);
}

.admin-dashboard__subscription {
    align-self: center;
    padding: var(--s2) var(--s3);
    border: 1px solid var(--c-control-border);
    border-radius: var(--r-field);
    background: var(--c-surface-low);
}

.admin-dashboard__subscription p {
    max-inline-size: 30ch;
}

.admin-dashboard__metrics .dashboard-kpi {
    min-block-size: 7rem;
    padding: var(--s3) var(--s4);
}

.admin-dashboard__workspace-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(20rem, .95fr);
    align-items: start;
}

.admin-dashboard__readiness,
.admin-dashboard__actions-panel,
.admin-dashboard__foundation {
    margin: 0;
}

.admin-dashboard__readiness .dashboard-panel__intro,
.admin-dashboard__actions-panel .dashboard-panel__intro {
    max-inline-size: 62ch;
}

.dashboard-readiness-list {
    display: grid;
    border-block-start: 1px solid var(--c-surface-border);
}

.admin-dashboard .dashboard-readiness-item {
    min-block-size: 4.6rem;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) 0;
    border: 0;
    border-block-end: 1px solid var(--c-surface-border);
    border-radius: 0;
    background: transparent;
}

.admin-dashboard .dashboard-readiness-item:last-child {
    border-block-end: 0;
}

.admin-dashboard .dashboard-readiness-item__mark {
    inline-size: 2.15rem;
    block-size: 2.15rem;
    border: 1px solid var(--c-control-border);
}

.admin-dashboard .dashboard-readiness-item.is-missing .dashboard-readiness-item__mark {
    color: var(--c-warning);
    background: color-mix(in srgb, var(--c-warning) 8%, var(--c-surface));
    border-color: color-mix(in srgb, var(--c-warning) 24%, var(--c-control-border));
}

.admin-dashboard__action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s3);
}

.admin-dashboard__actions-panel .dashboard-action {
    min-block-size: 5.25rem;
    align-content: center;
    background: var(--c-surface-low);
}

.admin-dashboard__actions-panel .dashboard-action:hover,
.admin-dashboard__actions-panel .dashboard-action:focus-visible {
    background: var(--role-accent-soft);
    border-color: color-mix(in srgb, var(--role-accent) 36%, var(--c-control-border));
}

.admin-dashboard__foundation {
    padding-block: var(--s4);
}

.admin-dashboard__foundation .dashboard-panel__header {
    margin-block-end: var(--s2);
}

.admin-dashboard__foundation .dashboard-foundation-grid > div {
    padding-block: var(--s2);
}

@media (max-width: 72rem) {
    .admin-dashboard__workspace-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-dashboard__action-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 48rem) {
    .admin-dashboard__header {
        border-block-end: 0;
    }

    .admin-dashboard__subscription {
        align-self: stretch;
        inline-size: 100%;
    }

    .admin-dashboard__action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 40rem) {
    .admin-dashboard__metrics .dashboard-kpi {
        min-block-size: 7.35rem;
    }

    .admin-dashboard .dashboard-readiness-item {
        padding-block: var(--s3);
    }

    .admin-dashboard__action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--s2);
    }

    .admin-dashboard__actions-panel .dashboard-action {
        min-block-size: 5.5rem;
        grid-template-columns: minmax(0, 1fr) auto;
        align-content: center;
        gap: var(--s2);
        padding: var(--s3);
    }

    .admin-dashboard__actions-panel .dashboard-action__marker {
        display: none;
    }

    .admin-dashboard__foundation {
        padding-block: var(--s3);
    }
}

/* UX-1A Trial Admin Getting Started: server-derived, no-JavaScript checklist */
.trial-getting-started {
    margin: 0;
    overflow: clip;
    border-color: color-mix(in srgb, var(--role-accent) 24%, var(--c-surface-border));
}

.trial-getting-started__summary {
    min-block-size: var(--target-min);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    cursor: pointer;
    list-style: none;
    background: color-mix(in srgb, var(--role-accent-soft) 38%, var(--c-surface));
}

.trial-getting-started__summary::-webkit-details-marker {
    display: none;
}

.trial-getting-started__summary:focus-visible {
    outline: 3px solid var(--brand-focus);
    outline-offset: -3px;
}

.trial-getting-started__heading {
    display: grid;
    gap: .15rem;
}

.trial-getting-started__heading strong {
    font-size: 1.05rem;
}

.trial-getting-started__progress-copy {
    font-weight: 700;
    color: var(--c-text);
    white-space: nowrap;
}

.trial-getting-started__toggle {
    font-size: .8rem;
    font-weight: 700;
    color: var(--c-link);
}

.trial-getting-started__body {
    display: grid;
    gap: var(--s3);
    padding: 0 var(--s4) var(--s4);
}

.trial-getting-started__intro {
    max-inline-size: 70ch;
    margin: 0;
    color: var(--c-muted);
}

.trial-getting-started__progress {
    inline-size: 100%;
    block-size: .55rem;
    accent-color: var(--role-accent);
}

.trial-getting-started__steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.trial-getting-started__step {
    min-inline-size: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s3);
    min-block-size: 5rem;
    padding: var(--s3);
    border: 1px solid var(--c-surface-border);
    border-radius: var(--r-field);
    background: var(--c-surface-low);
}

.trial-getting-started__step.is-complete {
    background: color-mix(in srgb, var(--c-success) 5%, var(--c-surface));
}

.trial-getting-started__mark {
    inline-size: 2rem;
    block-size: 2rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--c-control-border);
    border-radius: 999px;
    background: var(--c-surface);
    font-weight: 800;
}

.trial-getting-started__step.is-complete .trial-getting-started__mark {
    color: var(--c-success);
    border-color: color-mix(in srgb, var(--c-success) 36%, var(--c-control-border));
}

.trial-getting-started__copy {
    min-inline-size: 0;
    display: grid;
    gap: .2rem;
}

.trial-getting-started__copy > span {
    color: var(--c-muted);
    font-size: .9rem;
    line-height: 1.35;
}

.trial-getting-started__action {
    justify-self: end;
    white-space: nowrap;
}

@media (max-width: 64rem) {
    .trial-getting-started__steps {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 48rem) {
    .trial-getting-started__summary {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .trial-getting-started__toggle {
        grid-column: 1 / -1;
    }
}

@media (max-width: 40rem) {
    .trial-getting-started__summary,
    .trial-getting-started__body {
        padding-inline: var(--s3);
    }

    .trial-getting-started__step {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .trial-getting-started__action {
        grid-column: 2;
        justify-self: start;
    }
}

/* UX-1B Contextual guidance: reusable progressive-enhancement coach mark */
.contextual-guidance-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1190;
    pointer-events: none;
    background: rgba(8, 12, 20, .30);
}

.contextual-guidance-target--active {
    position: relative;
    z-index: 1191;
    border-color: color-mix(in srgb, var(--role-accent) 58%, var(--c-control-border));
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--role-accent) 24%, transparent),
        var(--auth-surface-hover-shadow);
}

.contextual-coachmark {
    position: fixed;
    z-index: 1192;
    inline-size: min(22rem, calc(100vw - 2rem));
    max-block-size: calc(100vh - 2rem);
    overflow: auto;
    padding: var(--s4);
    border: 1px solid var(--c-shell-border);
    border-radius: var(--r-card);
    background: var(--c-surface);
    box-shadow: var(--shadow-float);
}

.contextual-coachmark[hidden] {
    display: none;
}

.contextual-coachmark__eyebrow {
    margin: 0 0 var(--s1);
    color: var(--role-accent);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.contextual-coachmark h2 {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.25;
}

.contextual-coachmark > p:not(.contextual-coachmark__eyebrow) {
    margin: var(--s2) 0 0;
    color: var(--c-muted);
    line-height: 1.5;
}

.contextual-coachmark__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--s2);
    margin-block-start: var(--s4);
}

@media (max-width: 43.75rem) {
    .contextual-guidance-backdrop {
        background: rgba(8, 12, 20, .22);
    }

    .contextual-coachmark {
        inset: auto var(--s3) calc(4.75rem + env(safe-area-inset-bottom, 0px)) var(--s3);
        inline-size: auto;
        max-block-size: min(48vh, 24rem);
        border-radius: var(--r-panel);
    }

    .contextual-coachmark__actions .button {
        min-block-size: var(--target-min);
    }
}

@media (prefers-reduced-motion: reduce) {
    .contextual-coachmark,
    .contextual-guidance-target--active {
        scroll-behavior: auto;
        transition: none;
    }
}

/* Calendar RSVP workflow */
.calendar-rsvp-panel,
.calendar-rsvp-summary {
    margin-top: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}

.calendar-rsvp-panel__heading,
.calendar-rsvp-summary__heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.calendar-rsvp-form,
.calendar-rsvp-settings {
    display: grid;
    gap: var(--space-3);
}

.calendar-rsvp-form fieldset,
.calendar-rsvp-settings {
    margin: 0;
    padding: 0;
    border: 0;
}

.calendar-rsvp-form legend,
.calendar-rsvp-settings legend {
    margin-bottom: var(--space-2);
    font-weight: 700;
}

.calendar-rsvp-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
}

.calendar-rsvp-options label,
.calendar-rsvp-settings .checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.calendar-rsvp-party-size {
    max-width: 12rem;
}

.calendar-rsvp-current {
    margin: var(--space-2) 0;
}

@media (max-width: 48rem) {
    .calendar-rsvp-options {
        align-items: stretch;
        flex-direction: column;
    }

    .calendar-rsvp-party-size {
        max-width: none;
    }
}

/* D1.8 shared bounded queue scope navigation */
.c-scope-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-block: var(--s4);
    padding-block-end: var(--s4);
    border-bottom: 1px solid var(--c-line);
}

.c-scope-nav .button {
    min-block-size: 2.75rem;
}

.c-scope-nav__help {
    flex-basis: 100%;
    margin: 0;
    max-inline-size: 70ch;
}

.document-collection-summary-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s2);
    margin-block-start: var(--s4);
}

.document-collection-summary-metric {
    min-inline-size: 0;
    padding: var(--s4);
    border: 1px solid var(--c-line);
    border-radius: var(--r-field);
    background: var(--c-surface-low);
}

.document-collection-summary-metric span {
    display: block;
    color: var(--c-muted);
    font-size: var(--type-label);
    line-height: 1.35;
}

.document-collection-summary-metric strong {
    display: block;
    margin-block-start: var(--s2);
    font-size: clamp(1.55rem, 2.4vw, 2.1rem);
    line-height: 1;
}

@media (max-width: 48rem) {
    .document-collection-summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 40rem) {
    .c-scope-nav .button {
        flex: 1 1 9rem;
    }
}

/* STAFF3 Tenant-native staff profile: compact operational metadata */
.staff-access-profile-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1) var(--s3);
    margin-block-start: var(--s2);
    padding-inline-start: calc(2.5rem + var(--s2));
    color: var(--c-text);
    font-size: var(--type-small);
}

.staff-access-profile-summary span:not(:last-child) {
    padding-inline-end: var(--s3);
    border-inline-end: 1px solid var(--c-line);
}

.staff-profile-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(20rem, .9fr);
}

.staff-profile-context {
    display: grid;
    gap: var(--s3);
    margin: 0;
}

.staff-profile-context > div {
    display: grid;
    grid-template-columns: minmax(8rem, .35fr) minmax(0, 1fr);
    gap: var(--s3);
    padding-block: var(--s3);
    border-block-end: 1px solid var(--c-line);
}

.staff-profile-context > div:last-child {
    border-block-end: 0;
}

.staff-profile-context dt {
    font-weight: 700;
}

.staff-profile-context dd {
    margin: 0;
    color: var(--c-muted);
}

.staff-profile-form-card {
    border-color: color-mix(in srgb, var(--brand-primary) 16%, var(--c-line));
}

@media (max-width: 64rem) {
    .staff-profile-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 40rem) {
    .staff-access-profile-summary {
        padding-inline-start: 0;
    }

    .staff-profile-context > div {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s1);
    }
}

/* Shared password visibility; onboarding browser preference, preview and Help Center. */
.password-field { position: relative; display: grid; min-inline-size: 0; }
.password-field > input[type] { min-inline-size: 0; padding-inline-end: 3.5rem; }
.password-field > input::-ms-reveal { display: none; }
.password-field__toggle { position: absolute; inset-inline-end: .45rem; inset-block-start: 50%; translate: 0 -50%; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border: 0; border-radius: var(--r-button); color: var(--c-muted); background: transparent; cursor: pointer; }
.password-field__toggle:hover, .password-field__toggle:focus-visible { color: var(--brand-link); background: var(--brand-primary-soft); }
.password-field__toggle svg { inline-size: 1.35rem; block-size: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.password-rule-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); color: var(--c-muted); font-size: var(--type-label); }
.password-rule-list span { position: relative; min-block-size: 2rem; padding: .4rem .7rem .4rem 2rem; border: 1px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-surface-low); }
.password-rule-list span::before { content: "○"; position: absolute; inset-inline-start: .72rem; color: var(--c-muted); font-weight: 900; }
.password-rule-list span.is-valid { color: var(--c-success); border-color: color-mix(in srgb, var(--c-success) 36%, var(--c-control-border)); background: color-mix(in srgb, var(--c-success) 10%, var(--c-surface)); }
.password-rule-list span.is-valid::before { content: "✓"; color: currentColor; }
.password-match { margin: var(--s2) 0 0; color: var(--c-muted); font-size: var(--type-label); }
.password-match.is-valid { color: var(--c-success); font-weight: 750; }
.password-match.is-invalid { color: var(--c-danger); font-weight: 750; }
.password-setup-art { gap: var(--s3); color: var(--brand-primary); }
.password-setup-art__svg { inline-size: min(26rem, 78%); overflow: visible; fill: color-mix(in srgb, var(--brand-primary) 9%, var(--c-surface)); stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.password-setup-art__svg circle { fill: var(--brand-accent-soft); }
.password-setup-art__accent { stroke: var(--brand-accent); }
.password-setup-art strong { color: var(--c-ink); font-size: var(--type-h2); }
.password-setup-art small { color: var(--c-muted); }

.trusted-browser-shell { display: grid; place-items: center; padding: clamp(var(--s5), 7vw, var(--s12)); }
.trusted-card { max-inline-size: 42rem; padding: clamp(var(--s6), 6vw, var(--s10)); }
.trusted-browser-art { display: grid; place-items: center; margin: 0 auto var(--s4); inline-size: 11rem; block-size: 9rem; color: var(--brand-primary); }
.trusted-browser-art svg { inline-size: 100%; block-size: 100%; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.trusted-browser-art__shield { fill: var(--brand-primary-soft); }
.trusted-browser-art__check { stroke: var(--brand-accent); stroke-width: 6; }
.trusted-browser-boundary { display: grid; gap: var(--s1); margin-block: var(--s5); padding: var(--s4); border-inline-start: .3rem solid var(--brand-accent); text-align: start; background: var(--c-surface-low); }
.trusted-browser-boundary span { color: var(--c-muted); line-height: 1.5; }
.trusted-browser-actions { justify-content: center; }

.trial-preview .preview-window { overflow: hidden; }
.trial-preview .preview-window header { min-block-size: 4.25rem; }
.preview-logo-image { inline-size: 2.45rem; block-size: 2.45rem; object-fit: contain; border-radius: .55rem; background: var(--c-surface); }
.preview-logo--fallback { display: grid; place-items: center; inline-size: 2.45rem; block-size: 2.45rem; border-radius: .55rem; color: var(--brand-on-primary); background: var(--preview-primary); font-weight: 900; }
.preview-logo--asset { display: block; padding: .12rem; object-fit: contain; background: var(--c-surface); }
.trial-preview [hidden] { display: none !important; }
.preview-body nav { align-content: start; gap: .45rem; }
.preview-body nav { background: color-mix(in srgb, var(--preview-secondary, var(--brand-secondary)) 16%, var(--c-surface)); }
.preview-body nav span { padding: .42rem .55rem; border-radius: .45rem; color: color-mix(in srgb, var(--c-ink) 76%, transparent); font-size: .7rem; }
.preview-body nav span:first-child { color: var(--brand-on-primary); background: var(--preview-primary); }
.preview-accent-banner { display: grid; gap: .2rem; margin-block: var(--s4); padding: var(--s3); border-inline-start: .28rem solid var(--preview-accent); border-radius: .45rem; background: color-mix(in srgb, var(--preview-accent) 10%, var(--c-surface)); }
.preview-accent-banner span { color: var(--c-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; }
.preview-accent-banner strong { color: var(--c-ink); font-size: .82rem; }
.upload-drop strong { display: block; color: var(--c-ink); }

.help-learning__action--primary { border-color: color-mix(in srgb, var(--brand-primary) 36%, var(--c-surface-border)); background: var(--brand-primary-soft); }
.help-learning--public .help-learning__panel { border-block-start: .25rem solid var(--brand-accent); }
.help-learning--public .help-learning__eyebrow { color: var(--brand-link); }
.help-center { max-inline-size: 78rem; margin-inline: auto; }
.help-center__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.help-center__card { display: grid; align-content: start; gap: var(--s3); padding: var(--s6); }
.help-center__card h2, .help-center__card p { margin: 0; }
.help-center__card .button { justify-self: start; }
.invitation-delivery { margin-block-start: var(--s2); font-weight: 700; }
.invitation-delivery--warning { color: var(--c-danger); }

@media (max-width: 48rem) {
    .password-rule-list, .help-center__grid { grid-template-columns: minmax(0, 1fr); }
    .trusted-browser-actions { display: grid; grid-template-columns: minmax(0, 1fr); inline-size: 100%; }
    .trusted-browser-actions .button { inline-size: 100%; }
}

@media (forced-colors: active) {
    .password-rule-list span.is-valid, .trusted-browser-boundary, .preview-accent-banner { border: 1px solid CanvasText; }
}

/* UI10A — Meeting-ready tenant shell and signed-in identity framing. */
.authenticated .role-rail {
    --rail-ink: var(--brand-on-primary);
    --rail-muted: color-mix(in srgb, var(--brand-on-primary) 72%, transparent);
    --rail-border: color-mix(in srgb, var(--brand-on-primary) 18%, transparent);
    --rail-surface: color-mix(in srgb, var(--brand-on-primary) 9%, transparent);
    --rail-surface-strong: color-mix(in srgb, var(--brand-on-primary) 14%, transparent);
    color: var(--rail-ink);
    background:
        radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--brand-accent) 22%, transparent), transparent 15rem),
        linear-gradient(165deg, var(--brand-primary-strong), color-mix(in srgb, var(--brand-primary-strong) 82%, #10281c));
    border-inline-end-color: var(--rail-border);
    box-shadow: 1rem 0 3rem color-mix(in srgb, #10281c 16%, transparent);
}

.authenticated .role-rail :focus-visible {
    outline-color: var(--rail-ink);
    box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--brand-accent) 72%, transparent);
}

.authenticated .rail-brand {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--s3);
    min-block-size: 5.65rem;
    padding: var(--s2) var(--s1) var(--s4);
    color: var(--rail-ink);
    border-block-end-color: var(--rail-border);
}

.authenticated .rail-brand__logo-frame {
    display: grid;
    place-items: center;
    inline-size: 3.55rem;
    block-size: 3.55rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--rail-ink) 24%, transparent);
    border-radius: 1rem;
    background: color-mix(in srgb, #ffffff 94%, transparent);
    box-shadow: 0 .55rem 1.5rem color-mix(in srgb, #10281c 20%, transparent);
}

.authenticated .rail-logo,
.authenticated .rail-platform-logo {
    inline-size: 3rem;
    block-size: 3rem;
}

.authenticated .rail-brand__copy {
    display: grid;
    gap: .2rem;
    min-inline-size: 0;
}

.authenticated .rail-brand__copy strong {
    overflow: hidden;
    color: var(--rail-ink);
    font-size: 1.05rem;
    font-weight: 850;
    letter-spacing: -.015em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.authenticated .rail-brand__copy small {
    color: var(--rail-muted);
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.authenticated .rail-context {
    display: grid;
    gap: .35rem;
    margin: var(--s4) 0 var(--s3);
    padding: var(--s3) var(--s4);
    border-color: var(--rail-border);
    border-radius: .85rem;
    color: var(--rail-ink);
    background: var(--rail-surface);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rail-ink) 9%, transparent);
}

.authenticated .rail-context__eyebrow {
    color: var(--rail-muted);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.authenticated .rail-school {
    color: var(--rail-ink);
    font-size: .9rem;
}

.authenticated .rail-role {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--rail-muted);
    font-size: .75rem;
}

.authenticated .rail-role__indicator {
    inline-size: .52rem;
    block-size: .52rem;
    border: 2px solid color-mix(in srgb, var(--rail-ink) 58%, transparent);
    border-radius: 50%;
    background: var(--brand-accent);
    box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--brand-accent) 18%, transparent);
}

.authenticated .role-rail .nav-group {
    color: var(--rail-muted);
}

.authenticated .role-rail .role-nav a {
    color: var(--rail-muted);
}

.authenticated .role-rail .role-nav a:hover,
.authenticated .role-rail .role-nav a:focus-visible {
    color: var(--rail-ink);
    background: var(--rail-surface);
    border-color: var(--rail-border);
}

.authenticated .role-rail .role-nav a[aria-current="page"] {
    color: var(--rail-ink);
    background: var(--rail-surface-strong);
    border-color: color-mix(in srgb, var(--rail-ink) 24%, transparent);
    box-shadow: inset .22rem 0 0 var(--brand-accent), 0 .35rem 1rem color-mix(in srgb, #10281c 14%, transparent);
}

.authenticated .rail-footer {
    display: grid;
    gap: var(--s2);
    padding-block-start: var(--s5);
}

.authenticated .rail-account {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--s3);
    padding: var(--s3);
    border: 1px solid var(--rail-border);
    border-radius: .85rem;
    background: var(--rail-surface);
}

.authenticated .rail-account__avatar {
    display: grid;
    place-items: center;
    inline-size: 2.65rem;
    block-size: 2.65rem;
    border: 1px solid color-mix(in srgb, var(--rail-ink) 22%, transparent);
    border-radius: 50%;
    color: var(--brand-primary-strong);
    background: color-mix(in srgb, var(--rail-ink) 94%, transparent);
    font-weight: 850;
    text-transform: uppercase;
}

.authenticated .rail-account__copy {
    display: grid;
    gap: .15rem;
    min-inline-size: 0;
}

.authenticated .rail-account__copy strong {
    overflow: hidden;
    color: var(--rail-ink);
    font-size: .82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.authenticated .rail-account__copy small {
    color: var(--rail-muted);
    font-size: .68rem;
    font-weight: 700;
}

.authenticated .role-rail .logout-form button {
    border-color: var(--rail-border);
    color: var(--rail-ink);
    background: transparent;
}

.authenticated .role-rail .logout-form button:hover,
.authenticated .role-rail .logout-form button:focus-visible {
    background: var(--rail-surface);
}

.authenticated .rail-platform-signature {
    margin-block-start: var(--s1);
    border-block-start-color: var(--rail-border);
}

.authenticated .rail-platform-signature img {
    inline-size: 1.8rem;
    block-size: 1.8rem;
    border-radius: .5rem;
    opacity: 1;
}

.authenticated .rail-platform-signature .powered-by {
    color: var(--rail-muted);
}

@media (max-width: 56rem) {
    .authenticated .role-rail {
        background: var(--brand-primary-strong);
        box-shadow: 0 .45rem 1.5rem color-mix(in srgb, #10281c 15%, transparent);
    }

    .authenticated .role-rail .role-nav a[aria-current="page"] {
        box-shadow: inset 0 -.2rem 0 var(--brand-accent);
    }
}

@media (prefers-contrast: more) {
    .authenticated .role-rail,
    .authenticated .rail-context,
    .authenticated .rail-account,
    .authenticated .role-rail .role-nav a {
        border-width: 2px;
    }
}

@media (forced-colors: active) {
    .authenticated .role-rail {
        color: CanvasText;
        background: Canvas;
        border-color: CanvasText;
        box-shadow: none;
    }

    .authenticated .role-rail :is(.rail-brand__copy strong, .rail-school, .role-nav a, .rail-account__copy strong, .logout-form button),
    .authenticated .role-rail :is(.rail-brand__copy small, .rail-context__eyebrow, .rail-role, .nav-group, .rail-account__copy small, .powered-by) {
        color: CanvasText;
    }

    .authenticated .role-rail :is(.rail-context, .rail-account, .role-nav a, .logout-form button) {
        border-color: CanvasText;
        background: Canvas;
        box-shadow: none;
    }

    .authenticated .role-rail .role-nav a[aria-current="page"] {
        border-color: Highlight;
        color: HighlightText;
        background: Highlight;
    }
}

/* UI10A — Meeting-ready dashboard identity, truthful actions, and role artwork. */
.authenticated .rail-account__avatar {
    overflow: hidden;
    padding: 0;
}

.authenticated .rail-account__avatar-image {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/*
 * Every role dashboard opens on the same branded band. Before this only the
 * administrator had one, so the four dashboards did not read as one product,
 * and the wash it used was the role accent — which meant a charcoal or maroon
 * school still got a blue band across the top of its own workspace. The band is
 * brand-led now; the role accent stays where it belongs, on the rail's current
 * item, section eyebrows and status chips.
 */
.authenticated .role-dashboard .role-dashboard__greeting {
    position: relative;
    align-items: center;
    overflow: hidden;
    padding: clamp(var(--s5), 3.6vw, var(--s8));
    border: 1px solid color-mix(in srgb, var(--brand-primary) 14%, var(--c-surface-border));
    border-radius: var(--r-hero);
    background:
        radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--brand-accent) 14%, transparent), transparent 18rem),
        linear-gradient(135deg, color-mix(in srgb, var(--brand-primary-soft) 82%, var(--c-surface)), var(--c-surface));
    box-shadow: var(--auth-surface-shadow);
}

.authenticated .admin-dashboard__header {
    gap: clamp(var(--s5), 4vw, var(--s10));
}

.authenticated .admin-dashboard__header::before {
    inset-inline-start: clamp(var(--s5), 3.6vw, var(--s8));
    inset-block-end: 0;
    inline-size: clamp(4.5rem, 10vw, 8rem);
    block-size: .25rem;
}

.authenticated .admin-dashboard__welcome {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--s5);
    min-inline-size: 0;
}

.authenticated .admin-dashboard__profile {
    display: grid;
    place-items: center;
    inline-size: clamp(4.75rem, 7vw, 6rem);
    block-size: clamp(4.75rem, 7vw, 6rem);
    overflow: hidden;
    border: .22rem solid var(--c-surface);
    border-radius: 1.5rem;
    background: var(--role-accent-soft);
    box-shadow: 0 .8rem 1.8rem color-mix(in srgb, var(--role-accent) 20%, transparent);
}

.authenticated .admin-dashboard__profile img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.authenticated .admin-dashboard__welcome-copy {
    display: grid;
    gap: .25rem;
    min-inline-size: 0;
}

.authenticated .admin-dashboard__context-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
}

.authenticated .admin-dashboard__context-line .eyebrow {
    max-inline-size: min(100%, 34rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.authenticated .admin-dashboard__context-line .c-chip {
    min-block-size: 1.75rem;
    padding-inline: .65rem;
    font-size: .65rem;
}

.authenticated .admin-dashboard__subscription {
    min-inline-size: min(100%, 18rem);
    padding: var(--s4);
    border-color: color-mix(in srgb, var(--role-accent) 20%, var(--c-control-border));
    border-radius: var(--r-card);
    background: color-mix(in srgb, var(--c-surface) 88%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 74%, transparent);
}

.authenticated .admin-dashboard__subscription-label {
    color: var(--c-muted);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.authenticated .admin-dashboard__metrics .dashboard-kpi {
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--role-accent) 14%, var(--c-surface-border));
    box-shadow: 0 .45rem 1.25rem color-mix(in srgb, var(--role-accent) 8%, transparent);
}

.authenticated .admin-dashboard__metrics .dashboard-kpi::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    block-size: .2rem;
    background: currentColor;
    opacity: .55;
}

.authenticated .admin-dashboard__actions-panel .dashboard-action {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: var(--s3);
}

.authenticated .admin-dashboard__actions-panel .dashboard-action__marker {
    inline-size: 2.65rem;
    block-size: 2.65rem;
    border-radius: .8rem;
    color: var(--role-accent);
    background: color-mix(in srgb, var(--role-accent-soft) 76%, var(--c-surface));
}

.authenticated .admin-dashboard__actions-panel .dashboard-action__marker::before {
    content: "";
    inline-size: 1.25rem;
    block-size: 1.25rem;
    background: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.authenticated .dashboard-action__copy {
    display: grid;
    gap: .2rem;
    min-inline-size: 0;
}

.authenticated .dashboard-action__copy strong {
    overflow: hidden;
    color: var(--c-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.authenticated .dashboard-action__copy small {
    color: var(--c-muted);
    font-size: .68rem;
    font-weight: 650;
}

@media (max-width: 48rem) {
    .authenticated .admin-dashboard__header {
        align-items: stretch;
        padding: var(--s5);
    }

    .authenticated .admin-dashboard__subscription {
        min-inline-size: 0;
    }
}

@media (max-width: 40rem) {
    .authenticated .admin-dashboard__welcome {
        grid-template-columns: minmax(0, 1fr);
    }

    .authenticated .admin-dashboard__profile {
        inline-size: 4.75rem;
        block-size: 4.75rem;
        border-radius: 1.25rem;
    }

    .authenticated .admin-dashboard__context-line .eyebrow {
        white-space: normal;
    }

    .authenticated .admin-dashboard__actions-panel .dashboard-action {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .authenticated .admin-dashboard__actions-panel .dashboard-action__marker {
        display: grid;
        inline-size: 2.4rem;
        block-size: 2.4rem;
    }

    .authenticated .dashboard-action__copy small {
        display: none;
    }
}

@media (prefers-contrast: more) {
    .authenticated :is(.admin-dashboard__header, .admin-dashboard__profile, .admin-dashboard__subscription, .admin-dashboard__metrics .dashboard-kpi) {
        border-width: 2px;
    }
}

@media (forced-colors: active) {
    .authenticated .admin-dashboard__header,
    .authenticated .admin-dashboard__subscription,
    .authenticated .admin-dashboard__profile,
    .authenticated .admin-dashboard__actions-panel .dashboard-action__marker {
        color: CanvasText;
        background: Canvas;
        border-color: CanvasText;
        box-shadow: none;
    }

    .authenticated .admin-dashboard__header::before,
    .authenticated .admin-dashboard__metrics .dashboard-kpi::after {
        background: Highlight;
    }
}

/* Same-school multi-role selection */
.role-switch-link,
.rail-role-switch {
    min-block-size: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--c-line);
    border-radius: 999px;
    color: var(--brand-link, var(--c-primary));
    background: var(--c-surface);
    font-weight: 750;
    text-decoration: none;
}

.role-switch-link:hover,
.role-switch-link:focus-visible,
.rail-role-switch:hover,
.rail-role-switch:focus-visible {
    border-color: var(--brand-primary, var(--c-primary));
    background: var(--brand-primary-soft, var(--c-primary-soft));
}

.rail-role-switch {
    inline-size: 100%;
    border-radius: var(--r-md);
}

.role-selection-page {
    min-block-size: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 12% 10%, var(--brand-primary-soft, #e9f1ff), transparent 32rem),
        radial-gradient(circle at 88% 5%, var(--brand-accent-soft, #fff1d6), transparent 28rem),
        var(--c-canvas);
    color: var(--c-text);
}

.role-selection-header {
    inline-size: min(76rem, calc(100% - 2rem));
    min-block-size: 5rem;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    padding-block: var(--s3);
}

.role-selection-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s3);
    color: inherit;
    text-decoration: none;
}

/* ==========================================================================
   Brand lockup — every signed-out surface
   Sign-in, password recovery, registration, the trial steps, the role chooser
   and the compact app topbar all render fragments/site_header :: brandLockup,
   so the mark and the name are described in exactly one place. Each page keeps
   its own wrapper class for placement only.
   ========================================================================== */
.brand-lockup {
    min-inline-size: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--s3);
    color: inherit;
    text-decoration: none;
}

.brand-lockup__mark {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
}

.brand-lockup__mark img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
}

.brand-lockup__copy {
    min-inline-size: 0;
    display: grid;
    gap: .1rem;
}

.brand-lockup__copy strong {
    overflow: hidden;
    color: var(--c-ink);
    font-size: var(--type-h3);
    letter-spacing: -.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-lockup__copy small {
    color: var(--c-muted);
    font-size: var(--type-label);
    font-weight: 700;
}

/* The CON8CT wordmark, matched to the marketing header so a visitor moving from
   con8ct.com to a sign-in or registration page sees the same lockup. */
.brand-lockup__wordmark {
    color: var(--brand-primary);
    font-family: Playfair Display, Georgia, "Times New Roman", serif;
    font-size: 1.45rem;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1;
}

.brand-lockup__wordmark > span {
    color: var(--brand-accent);
}

.brand-lockup--platform .brand-lockup__copy small {
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.platform-compact-brand.brand-lockup .brand-lockup__mark {
    inline-size: 2.5rem;
    block-size: 2.5rem;
}

.platform-compact-brand.brand-lockup .brand-lockup__copy strong {
    font-size: var(--type-body);
}

.role-selection-brand span:last-child {
    display: grid;
    gap: 0.1rem;
}

.role-selection-brand strong {
    font-size: 1rem;
}

.role-selection-brand small {
    color: var(--c-muted);
}

.role-selection-header__actions {
    display: flex;
    align-items: center;
    gap: var(--s2);
}

.role-selection-header__actions form {
    margin: 0;
}

.role-selection-main {
    inline-size: min(76rem, calc(100% - 2rem));
    margin-inline: auto;
    padding: clamp(2rem, 6vw, 5rem) 0 4rem;
}

.role-selection-intro {
    max-inline-size: 48rem;
}

.role-selection-intro h1 {
    max-inline-size: 15ch;
    margin-block: 0.35rem 1rem;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.role-selection-intro > p:not(.eyebrow) {
    max-inline-size: 65ch;
    color: var(--c-muted);
    font-size: clamp(1rem, 2vw, 1.18rem);
}

.role-selection-security-note {
    max-inline-size: 44rem;
    margin-block-start: var(--s5);
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
    padding: var(--s4);
    border: 1px solid color-mix(in srgb, var(--brand-primary, var(--c-primary)) 24%, var(--c-line));
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--brand-primary-soft, var(--c-primary-soft)) 68%, var(--c-surface));
}

.role-selection-security-note > span {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: var(--brand-on-primary, #fff);
    background: var(--brand-primary, var(--c-primary));
    font-weight: 850;
}

.role-selection-security-note p {
    margin: 0;
    display: grid;
    gap: 0.25rem;
}

.role-selection-security-note span:last-child {
    color: var(--c-muted);
}

.role-selection-grid {
    margin-block-start: clamp(2rem, 5vw, 4rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--s4);
}

.role-selection-card {
    min-inline-size: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--s4);
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--c-line);
    border-radius: calc(var(--r-lg) + 0.25rem);
    background: color-mix(in srgb, var(--c-surface) 94%, transparent);
    box-shadow: var(--shadow-sm);
}

.role-selection-card--current {
    border-color: var(--brand-primary, var(--c-primary));
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-primary, var(--c-primary)) 14%, transparent), var(--shadow-sm);
}

.role-selection-card__visual {
    inline-size: 5rem;
    block-size: 5rem;
    overflow: hidden;
    border-radius: 1.4rem;
    background: var(--brand-primary-soft, var(--c-primary-soft));
}

.role-selection-card__visual img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.role-selection-card__copy h2 {
    margin-block: 0.25rem 0.5rem;
    font-size: 1.35rem;
}

.role-selection-card__copy > p:last-child {
    margin: 0;
    color: var(--c-muted);
}

.role-selection-card__status {
    margin: 0;
    color: var(--brand-primary-strong, var(--c-primary));
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.role-selection-card form,
.role-selection-card button {
    inline-size: 100%;
}

.role-selection-card button:disabled {
    opacity: 1;
    color: var(--c-muted);
    border-color: var(--c-line);
    background: var(--c-surface-muted);
    cursor: default;
}

.role-selection-help {
    margin-block-start: var(--s5);
    color: var(--c-muted);
    text-align: center;
}

@media (max-width: 40rem) {
    .role-selection-header {
        align-items: flex-start;
    }

    .role-selection-brand small,
    .role-selection-header__actions .language-switcher {
        display: none;
    }

    .role-selection-main {
        padding-block-start: 2rem;
    }

    .role-switch-link {
        padding-inline: 0.7rem;
        font-size: 0.85rem;
    }
}

@media (prefers-contrast: more) {
    .role-selection-card,
    .role-selection-security-note,
    .role-switch-link,
    .rail-role-switch {
        border-width: 2px;
    }
}

@media (forced-colors: active) {
    .role-selection-security-note > span,
    .role-selection-card--current {
        forced-color-adjust: auto;
    }
}

/* Dashboard rail, tablet strip: the finance role was the one portal still laid
   out as a vertical list inside the horizontal scroller. */
@media (max-width: 56rem) {
    .role-finance .role-nav-section--finance {
        display: flex;
        gap: var(--s1);
    }
}

/* ==========================================================================
   Shared site header — profile toggle and anonymous mobile menu
   Rendered from templates/fragments/site_header.html on every surface, so
   these rules are the single definition of the header's identity controls.
   ========================================================================== */
.account-menu > summary {
    gap: var(--s2);
    padding: .25rem .55rem .25rem .3rem;
}

.account-menu__avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: 2.1rem;
    block-size: 2.1rem;
    overflow: hidden;
    border-radius: 50%;
    background: var(--brand-primary-soft);
    color: var(--brand-primary-strong);
}

.account-menu__avatar-image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.account-menu__avatar-fallback {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.account-menu__who {
    display: grid;
    gap: .05rem;
    min-inline-size: 0;
    text-align: start;
}

.account-menu__who strong {
    max-inline-size: 11rem;
    overflow: hidden;
    color: var(--c-ink);
    font-size: var(--type-small);
    font-weight: 750;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu__who small {
    max-inline-size: 11rem;
    overflow: hidden;
    color: var(--c-muted);
    font-size: var(--type-label);
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu__caret {
    flex: 0 0 auto;
    inline-size: 1.05rem;
    block-size: 1.05rem;
    fill: none;
    stroke: var(--c-muted);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--motion-micro);
}

.account-menu[open] .account-menu__caret {
    transform: rotate(180deg);
}

/* the name column is the first thing to go when space runs out */
@media (max-width: 48rem) {
    .account-menu__who {
        display: none;
    }
}

/* The platform mark sits on the dark rail, so it gets a light disc that keeps
   both the CON8CT emblem and any dark tenant logo legible. */
.rail-platform-signature img {
    padding: .15rem;
    border-radius: 50%;
    background: color-mix(in srgb, #ffffff 92%, transparent);
}

/* Below the hamburger breakpoint the inline public links move into the sheet;
   the sign-in action stays visible until the very narrow layouts. */
@media (max-width: 56rem) {
    .nav-links a:not(.nav-login) {
        display: none;
    }

    .nav-links {
        gap: var(--s2);
    }
}

@media (max-width: 30rem) {
    .nav-links .nav-login {
        display: none;
    }
}

/* ==========================================================================
   Branded error pages (403 / 404 / 409 / 500)
   ========================================================================== */
.error-page {
    min-block-size: 100dvh;
    background: var(--c-canvas, var(--c-surface));
}

.error-page__header {
    display: flex;
    align-items: center;
    min-block-size: var(--topbar-height);
    padding-inline: clamp(var(--s5), 4vw, var(--s10));
    border-block-end: 1px solid var(--c-line);
    background: var(--c-surface);
}

.error-page__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s3);
    text-decoration: none;
}

.error-page-logo {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    object-fit: contain;
}

.error-page__wordmark {
    color: var(--brand-primary-strong, var(--c-ink));
    font-size: var(--type-h3);
    font-weight: 800;
    letter-spacing: .04em;
}

.error-page__wordmark span {
    color: var(--brand-accent, #c78c22);
}

.error-page__shell {
    display: grid;
    place-items: center;
    padding: clamp(var(--s8), 10vh, 7rem) clamp(var(--s5), 5vw, var(--s10));
}

.error-page__card {
    inline-size: min(100%, 40rem);
    text-align: center;
}

.error-page__code {
    margin: 0;
    color: var(--brand-primary);
    font-size: clamp(2.75rem, 9vw, 4rem);
    font-weight: 850;
    letter-spacing: -.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.error-page__card h1 {
    margin: var(--s4) 0 0;
    font-size: var(--type-h2);
    text-wrap: balance;
}

.error-page__detail {
    margin: var(--s3) auto 0;
    max-inline-size: 34rem;
    color: var(--c-muted);
}

.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s3);
    margin-block-start: var(--s6);
}

/* ==========================================================================
   Tenant site builder — announcements, staff, gallery and directions
   These four section types previously fell through to the generic story block.
   Every rule below inherits the tenant tokens, so a school's colours drive the
   result and the presentation preset still controls radius and rhythm.
   ========================================================================== */
.tenant-site .tenant-empty {
    margin: var(--s6) 0 0;
    padding: var(--s6);
    border: 1px dashed color-mix(in srgb, var(--tenant-primary) 26%, var(--c-line));
    border-radius: var(--site-surface-radius, var(--r-card));
    color: var(--c-muted);
    text-align: center;
}

/* Announcements ----------------------------------------------------------- */
.tenant-site .tenant-announcement-list {
    display: grid;
    gap: var(--s3);
    margin: var(--s8) 0 0;
    padding: 0;
    list-style: none;
}

.tenant-site .tenant-announcement {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--s4);
    padding: var(--s5);
    border: 1px solid var(--c-surface-border);
    border-radius: var(--site-surface-radius, var(--r-card));
    background: var(--c-surface);
}

.tenant-site .tenant-announcement__date {
    display: grid;
    place-items: center;
    min-inline-size: 4.5rem;
    padding: var(--s2) var(--s3);
    border-radius: var(--r-field);
    background: var(--brand-primary-soft);
    color: var(--tenant-primary);
    font-size: var(--type-label);
    font-weight: 800;
    letter-spacing: .04em;
    text-align: center;
    text-transform: uppercase;
}

.tenant-site .tenant-announcement__mark {
    inline-size: .6rem;
    block-size: .6rem;
    margin-block-start: .45rem;
    border-radius: 50%;
    background: var(--tenant-accent, var(--brand-accent));
}

.tenant-site .tenant-announcement__body {
    display: grid;
    gap: .25rem;
    min-inline-size: 0;
}

.tenant-site .tenant-announcement__body strong {
    color: var(--c-ink);
}

.tenant-site .tenant-announcement__body span {
    color: var(--c-muted);
    font-size: var(--type-small);
}

/* Staff directory --------------------------------------------------------- */
.tenant-site .tenant-staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--s4);
    margin-block-start: var(--s8);
}

.tenant-site .tenant-staff-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--s4);
    padding: var(--s5);
    border: 1px solid var(--c-surface-border);
    border-radius: var(--site-surface-radius, var(--r-card));
    background: var(--c-surface);
}

.tenant-site .tenant-staff-card__avatar {
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: 50%;
    background: var(--tenant-primary);
    color: var(--brand-on-primary);
    font-size: var(--type-h3);
    font-weight: 800;
}

.tenant-site .tenant-staff-card strong {
    display: block;
    color: var(--c-ink);
}

.tenant-site .tenant-staff-card__role {
    display: block;
    color: var(--tenant-primary);
    font-size: var(--type-label);
    font-weight: 750;
}

.tenant-site .tenant-staff-card__detail {
    display: block;
    margin-block-start: .15rem;
    color: var(--c-muted);
    font-size: var(--type-small);
    overflow-wrap: anywhere;
}

/* Gallery ----------------------------------------------------------------- */
.tenant-site .tenant-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--s4);
    margin-block-start: var(--s8);
}

.tenant-site .tenant-gallery-tile {
    display: grid;
    gap: var(--s3);
    margin: 0;
}

.tenant-site .tenant-gallery-tile img,
.tenant-site .tenant-gallery-tile__art {
    display: block;
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--site-surface-radius, var(--r-card));
    object-fit: cover;
}

.tenant-site .tenant-gallery-tile__art {
    border: 1px solid var(--c-surface-border);
    background:
        radial-gradient(circle at 30% 28%, color-mix(in srgb, var(--tenant-accent) 30%, transparent) 0 18%, transparent 19%),
        linear-gradient(145deg, var(--brand-primary-soft), var(--c-surface));
}

.tenant-site .tenant-gallery-tile__art--1 { background: linear-gradient(145deg, var(--brand-secondary-soft), var(--c-surface)); }
.tenant-site .tenant-gallery-tile__art--2 { background: linear-gradient(210deg, var(--brand-accent-soft), var(--c-surface)); }
.tenant-site .tenant-gallery-tile__art--3 { background: linear-gradient(120deg, var(--brand-primary-soft), var(--brand-accent-soft)); }

.tenant-site .tenant-gallery-tile figcaption {
    color: var(--c-text);
    font-size: var(--type-small);
    font-weight: 650;
}

/* Directions -------------------------------------------------------------- */
.tenant-site .tenant-map-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(var(--s6), 5vw, var(--s12));
}

.tenant-site .tenant-map-address {
    display: grid;
    gap: .2rem;
    margin-block-start: var(--s5);
    color: var(--c-text);
    font-style: normal;
}

.tenant-site .tenant-map-card {
    position: relative;
    display: grid;
    place-items: center;
    min-block-size: 18rem;
    overflow: hidden;
    border: 1px solid var(--c-surface-border);
    border-radius: var(--site-surface-radius, var(--r-card));
    background:
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--tenant-primary) 7%, transparent) 0 1px, transparent 1px 4.5rem),
        repeating-linear-gradient(0deg, color-mix(in srgb, var(--tenant-primary) 7%, transparent) 0 1px, transparent 1px 4.5rem),
        var(--brand-primary-soft);
}

.tenant-site .tenant-map-card img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.tenant-site .tenant-map-card__pin {
    inline-size: 1.6rem;
    block-size: 1.6rem;
    border: .32rem solid var(--tenant-primary);
    border-end-start-radius: 50%;
    border-radius: 50% 50% 50% 0;
    background: var(--c-surface);
    transform: rotate(-45deg);
    box-shadow: 0 .6rem 1.4rem color-mix(in srgb, var(--tenant-primary) 26%, transparent);
}

@media (max-width: 56rem) {
    .tenant-site .tenant-map-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .tenant-site .tenant-announcement {
        grid-template-columns: minmax(0, 1fr);
    }

    .tenant-site .tenant-announcement__date {
        justify-self: start;
    }
}

/* ==========================================================================
   Tenant site — neutral ramp follows the school's brand
   The base neutrals (--c-ink, --c-text, --c-muted, --c-line) are CON8CT green
   tinted and were never remapped for a tenant, so a black-and-grey school still
   rendered green headings and green-tinted rules on its own public site. The
   ramp below mixes the school's primary into a neutral base: CON8CT's own green
   lands where it always did, while a black, navy or maroon school now reads as
   that school throughout.
   ========================================================================== */
/*
 * Each neutral is the school's own primary mixed over a genuinely neutral base.
 * The percentages are calibrated so a CON8CT-green tenant lands back on the
 * original palette (every channel within about two steps of 255) while a
 * charcoal, maroon or navy school gets its own cast instead of ours.
 *
 * The authenticated shell needs the same treatment: the dashboard reads the
 * same tokens, so a black-and-grey school used to sign in to a green-tinted
 * workspace. Presets that publish a complete palette of their own are excluded
 * below, since those are a deliberate override rather than a tint of the
 * default.
 */
.tenant-site[data-tenant-theme],
.authenticated[data-tenant-theme]:where(:not([data-theme-preset="CLASSIC_ACADEMIC"]):not([data-theme-preset="DARK"])) {
    --c-bg: color-mix(in srgb, var(--brand-primary) 4%, #ffffff);
    --c-paper: color-mix(in srgb, var(--brand-primary) 2%, #fefefe);
    --c-surface-low: color-mix(in srgb, var(--brand-primary) 3%, #fefefe);
    --c-surface-mid: color-mix(in srgb, var(--brand-primary) 6%, #fefefe);
    --c-surface-high: color-mix(in srgb, var(--brand-primary) 10%, #fdfdfd);
    --c-ink: color-mix(in srgb, var(--brand-primary) 39%, #121212);
    --c-text: color-mix(in srgb, var(--brand-primary) 29%, #161616);
    --c-muted: color-mix(in srgb, var(--brand-primary) 34%, #818181);
    --c-line: color-mix(in srgb, var(--brand-primary) 12%, #f8f8f8);
    --c-outline: color-mix(in srgb, var(--brand-primary) 23%, #d4d4d4);
}

.tenant-site[data-tenant-theme] {
    --c-surface-border: color-mix(in srgb, var(--c-outline) 40%, var(--c-line));
}

.tenant-site[data-tenant-theme] :is(.tenant-hero h1, .tenant-section h2, .tenant-section h3) {
    color: var(--c-ink);
}

/* Uploaded section imagery replaces the decorative placeholder art ---------- */
.tenant-site .tenant-hero__media,
.tenant-site .tenant-program-art__media,
.tenant-site .tenant-community-mark__media {
    display: block;
    inline-size: 100%;
    border-radius: var(--site-surface-radius, var(--r-card));
    object-fit: cover;
}

.tenant-site .tenant-hero__media {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: -1;
    inline-size: min(52%, 44rem);
    block-size: 100%;
    border-radius: 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 42%);
    mask-image: linear-gradient(to right, transparent 0, #000 42%);
}

/* A hero carrying an uploaded image hands the end half of the section to the
   artwork and pins the copy to the start edge. Without this a preset that
   centres hero copy (FAITH_COMMUNITY does) would set the headline on top of
   whatever the school uploaded. */
.tenant-site .tenant-hero:has(.tenant-hero__media) .tenant-hero__content {
    max-inline-size: min(100%, 38rem);
    margin-inline: max(clamp(var(--s6), 5vw, var(--s16)), calc((100% - var(--content-max)) / 2)) auto;
    padding-inline: 0;
    text-align: start;
}

.tenant-site .tenant-hero:has(.tenant-hero__media) :is(h1, p) {
    margin-inline: 0;
}

.tenant-site .tenant-hero:has(.tenant-hero__media) .tenant-actions {
    justify-content: flex-start;
}

@media (max-width: 56rem) {
    /* Narrow layouts put the photo under the copy instead of behind it, so the
       headline never has to compete with the image for contrast. */
    .tenant-site .tenant-hero {
        align-content: start;
        padding-block-end: 0;
    }

    .tenant-site .tenant-hero__media {
        position: static;
        inline-size: 100%;
        block-size: auto;
        aspect-ratio: 16 / 9;
        margin-block-start: var(--s8);
        -webkit-mask-image: none;
        mask-image: none;
    }
}

.tenant-site .tenant-program-art__media,
.tenant-site .tenant-community-mark__media {
    block-size: 100%;
    min-block-size: 16rem;
    aspect-ratio: 4 / 3;
}

/* Site builder — per-section image editor ---------------------------------- */
.builder-image-editor__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--s5);
    margin-block-start: var(--s4);
}

.builder-image-editor__preview {
    display: grid;
    place-items: center;
    inline-size: 9rem;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px dashed var(--c-control-border);
    border-radius: var(--r-field);
    background: var(--c-surface-muted, var(--brand-primary-soft));
    color: var(--c-muted);
    font-size: var(--type-label);
    text-align: center;
}

.builder-image-editor__preview img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.builder-image-editor__remove {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-block-start: var(--s3);
    color: var(--c-muted);
    font-size: var(--type-small);
    font-weight: 600;
}

.builder-image-editor input[type="file"] {
    inline-size: 100%;
    padding: var(--s2);
    border: 1px solid var(--c-control-border);
    border-radius: var(--r-field);
    background: var(--c-surface);
}

@media (max-width: 48rem) {
    .builder-image-editor__row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The generic form-group input rule stretches every control, which is wrong for
   a checkbox sitting beside its label. */
.builder-image-editor__remove input[type="checkbox"] {
    flex: 0 0 auto;
    inline-size: 1.05rem;
    block-size: 1.05rem;
    min-block-size: 0;
    margin: 0;
    padding: 0;
}

.builder-image-editor__remove span {
    min-inline-size: 0;
}

/* Live presentation preset preview ----------------------------------------- */
.builder-preset-pending {
    align-self: start;
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-block-start: var(--s3);
    padding: var(--s3) var(--s4);
    border: 1px solid color-mix(in srgb, var(--brand-accent) 40%, var(--c-line));
    border-radius: var(--r-field);
    background: var(--brand-accent-soft);
    color: var(--c-ink);
    font-size: var(--type-small);
    font-weight: 650;
}

.builder-preset-card.is-preview-only {
    border-color: color-mix(in srgb, var(--brand-accent) 55%, var(--c-line));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-accent) 40%, transparent);
}

/* ==========================================================================
   Tenant site — one level of grouped navigation
   ========================================================================== */
.tenant-site .tenant-nav-group {
    position: relative;
}

.tenant-site .tenant-nav-group > summary {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    cursor: pointer;
    list-style: none;
}

.tenant-site .tenant-nav-group > summary::-webkit-details-marker {
    display: none;
}

.tenant-site .tenant-nav-group__caret {
    inline-size: .95rem;
    block-size: .95rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--motion-micro);
}

.tenant-site .tenant-nav-group[open] .tenant-nav-group__caret {
    transform: rotate(180deg);
}

.tenant-site .tenant-nav-group > summary[aria-current="true"] {
    color: var(--tenant-primary);
}

.tenant-site .tenant-nav-group__panel {
    position: absolute;
    inset-block-start: calc(100% + var(--s3));
    inset-inline-start: 0;
    z-index: 30;
    display: grid;
    gap: .1rem;
    min-inline-size: 14rem;
    padding: var(--s3);
    border: 1px solid var(--c-surface-border);
    border-radius: var(--site-surface-radius, var(--r-card));
    background: var(--c-surface);
    box-shadow: var(--shadow-float);
}

.tenant-site .tenant-nav-group__panel a {
    display: flex;
    align-items: center;
    min-block-size: var(--target-min);
    padding: var(--s2) var(--s3);
    border-radius: var(--r-field);
    color: var(--c-text);
    font-weight: 650;
}

.tenant-site .tenant-nav-group__panel a:hover,
.tenant-site .tenant-nav-group__panel a:focus-visible,
.tenant-site .tenant-nav-group__panel a[aria-current="page"] {
    color: var(--tenant-primary);
    background: var(--brand-primary-soft);
}

/* Children read as an indented group inside the mobile sheet. */
.tenant-site .tenant-nav-menu__child {
    padding-inline-start: var(--s6);
    font-weight: 600;
}

.tenant-site .tenant-nav-menu__child::before {
    content: "";
    inline-size: .5rem;
    block-size: 1px;
    margin-inline-end: var(--s2);
    background: color-mix(in srgb, var(--tenant-primary) 45%, transparent);
}

/* Site builder page grouping control -------------------------------------- */
.builder-page-parent {
    display: flex;
    align-items: center;
    gap: var(--s2);
}

.builder-page-parent__select {
    min-inline-size: 8rem;
    max-inline-size: 12rem;
    min-block-size: var(--target-min);
    padding-inline: var(--s2);
    border: 1px solid var(--c-control-border);
    border-radius: var(--r-field);
    background: var(--c-surface);
    color: var(--c-text);
    font-size: var(--type-label);
}

@media (max-width: 30rem) {
    .public-page .public-page-actions .button {
        padding-inline: var(--s2);
        font-size: var(--type-small);
    }
}

@media (max-width: 24rem) {
    /* Only on the narrowest phones does the badge stand alone. It already
       contains the wordmark, so dropping the text beside it costs nothing and
       leaves room for the action, the language switcher and help on one row. */
    .public-page .brand-lockup__wordmark {
        display: none;
    }
}

@media (max-width: 26rem) {
    /* Below about 420px the counterpart action sheds its button chrome so the
       badge, the action, language and help still share one row. */
    .public-page .public-page-actions .button {
        padding-inline: 0;
        border-color: transparent;
        background: transparent;
        box-shadow: none;
        color: var(--brand-link);
    }

    .public-page .topbar { gap: var(--s1); padding-inline: var(--s3); }
    .public-page .topbar-utilities { gap: var(--s1); }
}

/* ==========================================================================
   Tenant site — content blocks
   The section types a school composes a page from: prose, banner, split,
   card grid, accordion, pricing, steps, documents, link tiles and notice,
   plus the grouped/photographic upgrades to staff, gallery, announcements,
   events, feature grid and student life, and the four-column footer.

   Governing rules for everything below.
   * Colour comes only from the brand tokens (--brand-*, --tenant-*) or a
     color-mix over them, so a school's palette drives every block and the
     neutral ramp in "Tenant site — neutral ramp" keeps following the brand.
   * Radius comes from --site-surface-radius and rhythm from
     --site-section-space, so the four presentation presets keep control of
     shape and spacing without a per-block override.
   * Spacing uses the --s* scale, shadows use --shadow-card / --shadow-float.
   * Breakpoints reuse the ones already in this file: 64rem, 56rem, 48rem
     and 40rem. No block introduces one of its own.
   * Nothing may scroll the page sideways: wide content scrolls inside its
     own container and decorative art is clipped to its section.
   ========================================================================== */

/* Section shells. Decorative marks and wide tables are clipped to the
   section that owns them; overflow-x: clip (not hidden) leaves the vertical
   axis visible so nothing becomes an accidental scroll container. */
.tenant-site :is(.tenant-purpose-section,
                 .tenant-program-section,
                 .tenant-community-section,
                 .tenant-admissions-section,
                 .tenant-contact-section,
                 .tenant-announcement-section,
                 .tenant-staff-section,
                 .tenant-gallery-section,
                 .tenant-map-section,
                 .tenant-cta,
                 .tenant-prose-section,
                 .tenant-banner-section,
                 .tenant-split-section,
                 .tenant-card-section,
                 .tenant-accordion-section,
                 .tenant-pricing-section,
                 .tenant-steps-section,
                 .tenant-documents-section,
                 .tenant-tiles-section,
                 .tenant-notice-section) {
    overflow-x: clip;
}

/* Shared primitives -------------------------------------------------------- */
/* One standalone text action, used by events, announcements, steps and
   notices. Underlined rather than coloured alone, so the affordance survives
   a monochrome brand and a colour-blind reader. */
.tenant-site .tenant-inline-action {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--target-min);
    color: var(--tenant-primary);
    font-size: var(--type-small);
    font-weight: 750;
    text-decoration: underline;
    text-decoration-thickness: .0625rem;
    text-underline-offset: .25em;
    text-decoration-color: color-mix(in srgb, var(--tenant-primary) 45%, transparent);
    transition: color var(--motion-micro), text-decoration-color var(--motion-micro);
}

.tenant-site .tenant-inline-action:hover {
    color: var(--brand-primary-strong);
    text-decoration-color: currentColor;
}

/* The label above a grouped row set: departments, question categories,
   document folders, feature themes. One rule keeps the four identical. */
.tenant-site :is(.tenant-value-group__label,
                 .tenant-staff-group__label,
                 .tenant-accordion-group__label,
                 .tenant-document-group__label) {
    margin: 0 0 var(--s4);
    padding-block-end: var(--s2);
    border-block-end: 1px solid color-mix(in srgb, var(--tenant-primary) 20%, var(--c-line));
    color: var(--c-ink);
    font-size: var(--type-label);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tenant-site :is(.tenant-value-group, .tenant-staff-group, .tenant-accordion-group, .tenant-document-group)
+ :is(.tenant-value-group, .tenant-staff-group, .tenant-accordion-group, .tenant-document-group) {
    margin-block-start: var(--s10);
}

/* Focus ring for the block-level interactive surfaces. The global
   :focus-visible rule already draws it; these repeat it with a radius that
   follows the surface so the ring hugs the card instead of boxing it. */
.tenant-site :is(a.tenant-card, a.tenant-document, .tenant-tile):focus-visible {
    outline: .1875rem solid var(--brand-focus);
    outline-offset: .1875rem;
}

/* Prose (RICH_TEXT) -------------------------------------------------------- */
.tenant-site .tenant-prose > h2 {
    margin-block-start: 0;
}

.tenant-site .tenant-prose > .tenant-section__lede {
    margin: 0 0 var(--s6);
}

.tenant-site .tenant-prose > p {
    margin: 0 0 var(--s5);
    max-inline-size: 68ch;
    color: var(--c-text);
    line-height: 1.7;
}

.tenant-site .tenant-prose > p:last-of-type {
    margin-block-end: 0;
}

.tenant-site .tenant-prose .tenant-actions {
    margin-block-start: var(--s8);
}

/* Banner ------------------------------------------------------------------- */
.tenant-site .tenant-banner {
    position: relative;
    isolation: isolate;
    inline-size: min(100%, var(--content-max));
    margin-inline: auto;
    overflow: hidden;
    border-radius: var(--site-surface-radius, var(--r-card));
    background: linear-gradient(135deg, var(--brand-primary-soft), var(--brand-accent-soft));
}

.tenant-site .tenant-banner img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 3 / 1;
    object-fit: cover;
}

.tenant-site .tenant-banner-section.is-tall .tenant-banner img {
    aspect-ratio: 16 / 9;
}

/* Without a photograph the block degrades to a brand band rather than an
   empty box, and the caption sits in normal flow. */
.tenant-site .tenant-banner:not(:has(img)) {
    display: grid;
    align-content: center;
    min-block-size: 11rem;
}

.tenant-site .tenant-banner-section.is-tall .tenant-banner:not(:has(img)) {
    min-block-size: 17rem;
}

.tenant-site .tenant-banner__caption {
    padding: clamp(var(--s5), 3vw, var(--s10));
}

.tenant-site .tenant-banner__caption h2 {
    margin: 0;
    font-size: var(--type-h1);
    text-wrap: balance;
}

.tenant-site .tenant-banner__caption p {
    margin: var(--s2) 0 0;
    max-inline-size: 58ch;
    font-size: var(--type-body-lg);
}

/* Over a photograph the caption gets a scrim heavy enough to hold AA text
   contrast whatever the school uploaded. */
.tenant-site .tenant-banner:has(img) .tenant-banner__caption {
    position: absolute;
    inset: auto 0 0;
    color: var(--c-surface);
    background: linear-gradient(to top,
        color-mix(in srgb, var(--c-ink) 90%, transparent),
        color-mix(in srgb, var(--c-ink) 62%, transparent) 58%,
        transparent);
}

.tenant-site .tenant-banner:has(img) .tenant-banner__caption :is(h2, p) {
    color: var(--c-surface);
}

/* Split -------------------------------------------------------------------- */
/* Copy is always first in the DOM. The default arrangement puts the image on
   the start edge and IMAGE_RIGHT puts it on the end edge, both by grid
   ordering, so the reading order never depends on the layout choice. */
.tenant-site .tenant-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(var(--s8), 6vw, var(--s16));
}

.tenant-site .tenant-split:not(:has(.tenant-split__media)) {
    grid-template-columns: minmax(0, 1fr);
}

.tenant-site .tenant-split__copy {
    order: 2;
    max-inline-size: 42rem;
}

.tenant-site .tenant-split__copy > h2 {
    margin-block-start: 0;
}

.tenant-site .tenant-split__copy p {
    color: var(--c-text);
    line-height: 1.65;
}

.tenant-site .tenant-split__media {
    order: 1;
    margin: 0;
}

.tenant-site .tenant-split__media img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--site-surface-radius, var(--r-card));
    box-shadow: var(--shadow-card);
}

.tenant-site .tenant-split-section.is-image-right .tenant-split__copy {
    order: 1;
}

.tenant-site .tenant-split-section.is-image-right .tenant-split__media {
    order: 2;
}

/* Card grid ---------------------------------------------------------------- */
.tenant-site .tenant-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
    gap: var(--s4);
}

.tenant-site .tenant-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--c-surface-border);
    border-radius: var(--site-surface-radius, var(--r-card));
    background: var(--c-surface);
    color: var(--c-text);
}

.tenant-site .tenant-card__media {
    display: block;
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* No uploaded image: a brand-tinted band carrying the card's initial. A
   deliberate mark, never the ghost of a missing picture. */
.tenant-site .tenant-card__art {
    display: grid;
    place-items: center;
    block-size: 6.5rem;
    border-block-end: 1px solid var(--c-surface-border);
    background:
        radial-gradient(circle at 26% 28%, color-mix(in srgb, var(--tenant-accent) 28%, transparent) 0 15%, transparent 16%),
        linear-gradient(145deg, var(--brand-primary-soft), var(--c-surface));
    color: var(--tenant-primary);
    font-family: var(--site-display-font);
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
}

.tenant-site .tenant-card__body {
    display: grid;
    align-content: start;
    gap: .35rem;
    padding: var(--s5);
}

.tenant-site .tenant-card__body strong {
    color: var(--c-ink);
    font-size: var(--type-h3);
    line-height: 1.3;
}

.tenant-site .tenant-card__meta {
    order: -1;
    color: var(--tenant-primary);
    font-size: var(--type-label);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tenant-site .tenant-card__detail {
    margin-block-start: .15rem;
    color: var(--c-muted);
    font-size: var(--type-small);
    line-height: 1.55;
}

/* Only the linked variant lifts, and it underlines its title as well as
   changing colour so the affordance is not carried by hue alone. */
.tenant-site a.tenant-card {
    transition: transform var(--motion-micro), box-shadow var(--motion-micro), border-color var(--motion-micro);
}

.tenant-site a.tenant-card:hover,
.tenant-site a.tenant-card:focus-visible {
    border-color: color-mix(in srgb, var(--tenant-primary) 42%, var(--c-line));
    box-shadow: var(--shadow-card);
    transform: translateY(-.125rem);
}

.tenant-site a.tenant-card:hover .tenant-card__body strong,
.tenant-site a.tenant-card:focus-visible .tenant-card__body strong {
    color: var(--tenant-primary);
    text-decoration: underline;
    text-underline-offset: .2em;
}

/* Accordion ---------------------------------------------------------------- */
/* Native <details>/<summary>: the browser owns the keyboard and
   screen-reader behaviour. The summary keeps its default display — giving it
   display: flex or grid removes the disclosure box in Chrome and the row
   stops opening — so the caret is floated to the end edge instead. */
.tenant-site .tenant-accordion {
    border: 1px solid var(--c-surface-border);
    border-radius: var(--site-surface-radius, var(--r-card));
    background: var(--c-surface);
}

.tenant-site .tenant-accordion + .tenant-accordion {
    margin-block-start: var(--s3);
}

.tenant-site .tenant-accordion > summary {
    min-block-size: var(--target-min);
    padding: var(--s4) var(--s5);
    border-radius: var(--site-surface-radius, var(--r-card));
    color: var(--c-ink);
    font-size: var(--type-body-lg);
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
    transition: background var(--motion-micro);
}

.tenant-site .tenant-accordion > summary::-webkit-details-marker {
    display: none;
}

/* The caret floats, so the row needs to contain it when the question is
   shorter than the caret is tall. */
.tenant-site .tenant-accordion > summary::after {
    content: "";
    display: block;
    clear: both;
}

.tenant-site .tenant-accordion > summary:hover {
    background: var(--brand-primary-soft);
}

.tenant-site .tenant-accordion > summary:focus-visible {
    outline: .1875rem solid var(--brand-focus);
    outline-offset: -.1875rem;
}

.tenant-site .tenant-accordion__caret {
    float: inline-end;
    inline-size: 1.15rem;
    block-size: 1.15rem;
    margin-block-start: .25rem;
    margin-inline-start: var(--s4);
    color: var(--tenant-primary);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--motion-micro);
}

.tenant-site .tenant-accordion[open] .tenant-accordion__caret {
    transform: rotate(180deg);
}

.tenant-site .tenant-accordion[open] > summary {
    color: var(--tenant-primary);
}

.tenant-site .tenant-accordion__panel {
    margin: 0 var(--s5) var(--s5);
    padding-block-start: var(--s4);
    border-block-start: 1px solid var(--c-line);
}

.tenant-site .tenant-accordion__panel p {
    margin: 0 0 var(--s3);
    max-inline-size: 66ch;
    color: var(--c-text);
    line-height: 1.65;
}

.tenant-site .tenant-accordion__panel p:last-child {
    margin-block-end: 0;
}

/* Pricing ------------------------------------------------------------------ */
.tenant-site .tenant-pricing-section > .tenant-section__inner > p:not(.tenant-empty) {
    max-inline-size: 66ch;
    color: var(--c-text);
    line-height: 1.65;
}

/* A fee table is genuinely tabular and families copy it out, so it stays a
   table and scrolls inside its own container. The page body never moves. */
.tenant-site .tenant-pricing-table-scroll {
    overflow-x: auto;
    margin-block-start: var(--s6);
    border: 1px solid var(--c-surface-border);
    border-radius: var(--site-surface-radius, var(--r-card));
    background: var(--c-surface);
}

.tenant-site .tenant-pricing-table {
    inline-size: 100%;
    min-inline-size: 21rem;
    border-collapse: collapse;
}

.tenant-site .tenant-pricing-table caption {
    caption-side: top;
    padding: var(--s5) var(--s5) var(--s3);
    color: var(--c-ink);
    font-size: var(--type-h3);
    font-weight: 750;
    text-align: start;
}

.tenant-site .tenant-pricing-table thead th {
    padding: var(--s3) var(--s5);
    border-block-end: 1px solid var(--c-line);
    background: var(--c-surface-low);
    color: var(--c-ink);
    font-size: var(--type-label);
    font-weight: 800;
    letter-spacing: .06em;
    text-align: start;
    text-transform: uppercase;
    white-space: nowrap;
}

.tenant-site .tenant-pricing-table thead th:last-child {
    text-align: end;
}

.tenant-site .tenant-pricing-table tbody th[scope="row"] {
    padding: var(--s4) var(--s5);
    color: var(--c-ink);
    font-weight: 700;
    text-align: start;
    vertical-align: baseline;
}

.tenant-site .tenant-pricing-table tbody th[scope="row"] span {
    display: block;
    overflow-wrap: anywhere;
}

.tenant-site .tenant-pricing-table tbody th[scope="row"] small {
    display: block;
    margin-block-start: .15rem;
    color: var(--c-muted);
    font-size: var(--type-small);
    font-weight: 500;
    line-height: 1.5;
}

.tenant-site .tenant-pricing-table tbody td {
    padding: var(--s4) var(--s5);
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-align: end;
    vertical-align: baseline;
    white-space: nowrap;
}

.tenant-site .tenant-pricing-table tbody tr + tr :is(th, td) {
    border-block-start: 1px solid var(--c-line);
}

/* Steps -------------------------------------------------------------------- */
.tenant-site .tenant-steps-section > .tenant-section__inner > p:not(.tenant-empty) {
    max-inline-size: 66ch;
    color: var(--c-text);
    line-height: 1.65;
}

.tenant-site .tenant-steps {
    display: grid;
    gap: var(--s3);
    margin: var(--s8) 0 0;
    padding: 0;
    list-style: none;
}

.tenant-site .tenant-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--s4);
    padding: var(--s5);
    border: 1px solid var(--c-surface-border);
    border-radius: var(--site-surface-radius, var(--r-card));
    background: var(--c-surface);
}

/* The badge is exactly one heading line box tall, so it stays centred on the
   first line of the step title whether that title runs to one line at 1440
   or to three at 320. */
.tenant-site .tenant-step__number {
    display: grid;
    place-items: center;
    min-inline-size: 2.5rem;
    block-size: calc(var(--type-h3) * 1.45);
    padding-inline: var(--s2);
    border-radius: var(--r-pill);
    background: var(--tenant-primary);
    color: var(--brand-on-primary);
    font-size: var(--type-label);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: .04em;
}

.tenant-site .tenant-step__body {
    display: grid;
    gap: var(--s2);
}

.tenant-site .tenant-step__body h3 {
    margin: 0;
    color: var(--c-ink);
    font-size: var(--type-h3);
    line-height: 1.45;
}

.tenant-site .tenant-step__body p {
    margin: 0;
    max-inline-size: 62ch;
    color: var(--c-text);
    line-height: 1.6;
}

.tenant-site .tenant-step__body .tenant-inline-action {
    justify-self: start;
}

/* Documents ---------------------------------------------------------------- */
.tenant-site .tenant-document-list {
    display: grid;
    gap: var(--s2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tenant-site .tenant-document {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s4);
    min-block-size: var(--target-min);
    padding: var(--s4) var(--s5);
    border: 1px solid var(--c-surface-border);
    border-radius: var(--site-surface-radius, var(--r-card));
    background: var(--c-surface);
    color: var(--c-text);
    transition: border-color var(--motion-micro), background var(--motion-micro);
}

.tenant-site a.tenant-document:hover,
.tenant-site a.tenant-document:focus-visible {
    border-color: color-mix(in srgb, var(--tenant-primary) 42%, var(--c-line));
    background: var(--brand-primary-soft);
}

.tenant-site a.tenant-document:hover .tenant-document__body strong,
.tenant-site a.tenant-document:focus-visible .tenant-document__body strong {
    color: var(--tenant-primary);
    text-decoration: underline;
    text-underline-offset: .2em;
}

/* A row with no file behind it is a listed document the school has not
   uploaded yet; it reads as inert rather than as a broken link. */
.tenant-site .tenant-document--plain {
    background: var(--c-surface-low);
}

/* Decorative page mark with a folded corner, drawn in brand tints. */
.tenant-site .tenant-document__icon {
    position: relative;
    inline-size: 1.85rem;
    block-size: 2.4rem;
    border: 1px solid color-mix(in srgb, var(--tenant-primary) 32%, var(--c-line));
    border-radius: .3rem;
    border-start-end-radius: 0;
    background: linear-gradient(160deg, var(--brand-primary-soft), var(--c-surface));
}

.tenant-site .tenant-document__icon::after {
    content: "";
    position: absolute;
    inset: -1px -1px auto auto;
    inline-size: .7rem;
    block-size: .7rem;
    background: color-mix(in srgb, var(--tenant-primary) 26%, var(--c-surface));
    clip-path: polygon(0 0, 100% 100%, 100% 0);
}

.tenant-site .tenant-document__body {
    display: grid;
    gap: .15rem;
    min-inline-size: 0;
}

.tenant-site .tenant-document__body strong {
    color: var(--c-ink);
    overflow-wrap: anywhere;
}

.tenant-site .tenant-document__detail {
    color: var(--c-muted);
    font-size: var(--type-small);
    line-height: 1.5;
}

.tenant-site .tenant-document__kind {
    padding: .2rem var(--s2);
    border-radius: var(--r-pill);
    background: var(--brand-accent-soft);
    color: var(--c-ink);
    font-size: var(--type-label);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Link tiles --------------------------------------------------------------- */
.tenant-site .tenant-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
    gap: var(--s4);
}

.tenant-site .tenant-tile-grid.is-compact {
    grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
    gap: var(--s3);
}

.tenant-site .tenant-tile {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: var(--s3);
    min-block-size: 8.5rem;
    padding: var(--s5);
    border: 1px solid var(--c-surface-border);
    border-radius: var(--site-surface-radius, var(--r-card));
    background: var(--c-surface);
    color: var(--c-text);
    transition: transform var(--motion-micro), box-shadow var(--motion-micro), border-color var(--motion-micro);
}

.tenant-site .tenant-tile:hover,
.tenant-site .tenant-tile:focus-visible {
    border-color: color-mix(in srgb, var(--tenant-primary) 42%, var(--c-line));
    box-shadow: var(--shadow-card);
    transform: translateY(-.125rem);
}

.tenant-site .tenant-tile:hover .tenant-tile__label,
.tenant-site .tenant-tile:focus-visible .tenant-tile__label {
    color: var(--tenant-primary);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.tenant-site .tenant-tile__icon {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--r-field);
    object-fit: contain;
}

/* No uploaded icon: a brand-tinted chip, deliberate rather than empty. */
.tenant-site .tenant-tile__mark {
    position: relative;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--r-field);
    background: linear-gradient(145deg, var(--brand-primary-soft), color-mix(in srgb, var(--tenant-primary) 24%, var(--c-surface)));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tenant-primary) 18%, transparent);
}

.tenant-site .tenant-tile__mark::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: .85rem;
    block-size: .85rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tenant-primary) 62%, var(--c-surface));
    transform: translate(-50%, -50%);
}

.tenant-site .tenant-tile__label {
    color: var(--c-ink);
    font-weight: 750;
    line-height: 1.35;
}

.tenant-site .tenant-tile__note {
    color: var(--c-muted);
    font-size: var(--type-small);
    line-height: 1.5;
}

/* Compact tiles are a single row: mark, then label, with any note beneath
   the label rather than under the mark. */
.tenant-site .tenant-tile-grid.is-compact .tenant-tile {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--s2) var(--s3);
    min-block-size: 0;
    padding: var(--s3) var(--s4);
}

.tenant-site .tenant-tile-grid.is-compact :is(.tenant-tile__icon, .tenant-tile__mark) {
    inline-size: 1.9rem;
    block-size: 1.9rem;
}

.tenant-site .tenant-tile-grid.is-compact .tenant-tile__mark::after {
    inline-size: .65rem;
    block-size: .65rem;
}

.tenant-site .tenant-tile-grid.is-compact .tenant-tile__label {
    font-size: var(--type-small);
}

.tenant-site .tenant-tile-grid.is-compact .tenant-tile__note {
    grid-column: 2;
    font-size: var(--type-label);
}

/* Notice ------------------------------------------------------------------- */
.tenant-site .tenant-notice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--s4);
    padding: clamp(var(--s5), 3vw, var(--s8));
    border: 1px solid color-mix(in srgb, var(--tenant-accent) 34%, var(--c-line));
    border-inline-start-width: .25rem;
    border-radius: var(--site-surface-radius, var(--r-card));
    background: color-mix(in srgb, var(--brand-accent-soft) 70%, var(--c-surface));
}

.tenant-site .tenant-notice__icon {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--r-field);
    object-fit: contain;
}

/* Decorative information mark. Drawn from brand tints so it reads as part of
   the notice, not as an image that failed to load. */
.tenant-site .tenant-notice__mark {
    position: relative;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tenant-accent) 30%, var(--c-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tenant-accent) 45%, transparent);
}

.tenant-site .tenant-notice__mark::before,
.tenant-site .tenant-notice__mark::after {
    content: "";
    position: absolute;
    inset-inline-start: 50%;
    inline-size: .22rem;
    border-radius: var(--r-pill);
    background: var(--c-ink);
    transform: translateX(-50%);
}

.tenant-site .tenant-notice__mark::before {
    inset-block-start: .5rem;
    block-size: .22rem;
}

.tenant-site .tenant-notice__mark::after {
    inset-block-start: .95rem;
    block-size: .8rem;
}

.tenant-site .tenant-notice__body {
    display: grid;
    gap: var(--s2);
    min-inline-size: 0;
}

.tenant-site .tenant-notice__body strong {
    color: var(--c-ink);
    font-size: var(--type-h3);
    line-height: 1.35;
}

.tenant-site .tenant-notice__body p {
    margin: 0;
    max-inline-size: 66ch;
    color: var(--c-text);
    line-height: 1.6;
}

.tenant-site .tenant-notice__body .tenant-inline-action {
    justify-self: start;
}

/* Fine print is the same content at the size a fee footnote belongs at, and
   it takes less of the page's vertical rhythm with it. */
.tenant-site .tenant-notice-section.is-fine-print {
    padding-block: calc(var(--site-section-space) / 2);
}

.tenant-site .tenant-notice-section.is-fine-print .tenant-notice {
    gap: var(--s3);
    padding: var(--s4) var(--s5);
    border-color: var(--c-line);
    border-inline-start-color: color-mix(in srgb, var(--tenant-primary) 32%, var(--c-line));
    background: var(--c-surface-low);
}

.tenant-site .tenant-notice-section.is-fine-print :is(.tenant-notice__mark, .tenant-notice__icon) {
    inline-size: 1.5rem;
    block-size: 1.5rem;
}

.tenant-site .tenant-notice-section.is-fine-print .tenant-notice__mark::before {
    inset-block-start: .32rem;
    block-size: .18rem;
}

.tenant-site .tenant-notice-section.is-fine-print .tenant-notice__mark::after {
    inset-block-start: .62rem;
    block-size: .52rem;
}

.tenant-site .tenant-notice-section.is-fine-print .tenant-notice__body {
    gap: var(--s1);
}

.tenant-site .tenant-notice-section.is-fine-print .tenant-notice__body strong {
    font-size: var(--type-body);
}

.tenant-site .tenant-notice-section.is-fine-print .tenant-notice__body p {
    color: var(--c-muted);
    font-size: var(--type-small);
}

/* Feature grid — grouped rows ---------------------------------------------- */
/* The grid sits on the ink surface, so the row heading and detail need the
   light end of the ramp; h4 is new markup the original dark-surface rule
   never covered. */
.tenant-site .tenant-feature-section .tenant-value-group__label {
    color: var(--c-surface);
    border-block-end-color: color-mix(in srgb, var(--c-surface) 24%, transparent);
}

.tenant-site .tenant-feature-section .tenant-value-grid h4 {
    margin: var(--s1) 0 0;
    color: var(--c-surface);
    font-size: var(--type-h3);
    line-height: 1.3;
}

.tenant-site .tenant-feature-section .tenant-value-grid p {
    margin: var(--s2) 0 0;
    color: var(--c-surface-high);
    font-size: var(--type-small);
    line-height: 1.55;
}

/* Student life — resource list --------------------------------------------- */
/* With rows the block becomes a list of labelled destinations, each with the
   sentence that says what it is for. */
.tenant-site .tenant-resource-list {
    display: grid;
    gap: var(--s4);
    margin: var(--s6) 0 0;
    padding: 0;
    list-style: none;
}

.tenant-site .tenant-resource-list li {
    padding-inline-start: var(--s4);
    border-inline-start: .1875rem solid color-mix(in srgb, var(--tenant-primary) 32%, var(--c-line));
}

.tenant-site .tenant-resource-list li > strong {
    display: block;
    min-block-size: 1.5rem;
    color: var(--c-ink);
}

.tenant-site .tenant-resource-list li > p {
    margin: .15rem 0 0;
    max-inline-size: 60ch;
    color: var(--c-muted);
    font-size: var(--type-small);
    line-height: 1.55;
}

.tenant-site .tenant-resource__action {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.75rem;
    color: var(--tenant-primary);
    font-weight: 750;
    text-decoration: underline;
    text-decoration-thickness: .0625rem;
    text-underline-offset: .25em;
    text-decoration-color: color-mix(in srgb, var(--tenant-primary) 45%, transparent);
    transition: color var(--motion-micro), text-decoration-color var(--motion-micro);
}

.tenant-site .tenant-resource__action:hover {
    color: var(--brand-primary-strong);
    text-decoration-color: currentColor;
}

/* Announcements — linked rows ---------------------------------------------- */
.tenant-site .tenant-announcement__body .tenant-inline-action {
    justify-self: start;
    margin-block-start: var(--s1);
}

/* Events — structured rows -------------------------------------------------- */
/* A row-driven card carries a date chip, a title, a detail and an action, so
   it stacks from the top instead of pushing two items apart. */
.tenant-site .tenant-event-card:has(strong) {
    align-content: start;
    gap: var(--s2);
}

.tenant-site .tenant-event-card__date {
    justify-self: start;
    padding: .2rem var(--s3);
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--tenant-secondary) 18%, var(--c-surface));
    color: var(--c-ink);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.tenant-site .tenant-event-card strong {
    color: var(--c-ink);
    font-size: var(--type-h3);
    line-height: 1.3;
}

.tenant-site .tenant-event-card:has(strong) p {
    margin: 0;
    color: var(--c-muted);
    font-size: var(--type-small);
    line-height: 1.55;
}

.tenant-site .tenant-event-card .tenant-inline-action {
    justify-self: start;
    margin-block-start: var(--s1);
}

/* Staff directory — groups and photographs ---------------------------------- */
/* A real directory runs to dozens of people. Grouped rows get a denser card
   than the ungrouped fallback and a labelled rule between departments, so
   fifty-five names read as six scannable lists rather than one wall. */
.tenant-site .tenant-staff-group .tenant-staff-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
    gap: var(--s3);
    margin-block-start: var(--s5);
}

.tenant-site .tenant-staff-group .tenant-staff-card {
    align-items: start;
    gap: var(--s3);
    padding: var(--s4);
}

.tenant-site .tenant-staff-card__photo {
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: 50%;
    background: var(--brand-primary-soft);
    object-fit: cover;
}

.tenant-site .tenant-staff-card__contact {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.5rem;
    margin-block-start: .15rem;
    color: var(--tenant-primary);
    font-size: var(--type-small);
    font-weight: 700;
    overflow-wrap: anywhere;
    text-decoration: underline;
    text-decoration-thickness: .0625rem;
    text-underline-offset: .2em;
    text-decoration-color: color-mix(in srgb, var(--tenant-primary) 45%, transparent);
    transition: color var(--motion-micro), text-decoration-color var(--motion-micro);
}

.tenant-site .tenant-staff-card__contact:hover {
    color: var(--brand-primary-strong);
    text-decoration-color: currentColor;
}

/* Gallery — column choice and the row-driven placeholder tints -------------- */
.tenant-site :is(.tenant-card-grid, .tenant-gallery-grid).is-columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tenant-site :is(.tenant-card-grid, .tenant-gallery-grid).is-columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tenant-site .tenant-gallery-tile-art-1 { background: linear-gradient(145deg, var(--brand-secondary-soft), var(--c-surface)); }
.tenant-site .tenant-gallery-tile-art-2 { background: linear-gradient(210deg, var(--brand-accent-soft), var(--c-surface)); }
.tenant-site .tenant-gallery-tile-art-3 { background: linear-gradient(120deg, var(--brand-primary-soft), var(--brand-accent-soft)); }

/* Directions — copy measure ------------------------------------------------- */
.tenant-site .tenant-map-copy {
    max-inline-size: 42rem;
}

/* Mobile menu heading ------------------------------------------------------- */
/* A parent entry with no page behind it labels its children instead of
   pretending to be a link. */
.tenant-site .tenant-nav-menu__heading {
    margin: var(--s3) 0 var(--s1);
    padding-inline: var(--s3);
    color: var(--c-muted);
    font-size: var(--type-label);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tenant-site .tenant-nav-menu__heading:first-child {
    margin-block-start: 0;
}

/* Footer — brand, location, contact, navigation ----------------------------- */
.tenant-site .tenant-footer__inner {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    column-gap: clamp(var(--s6), 4vw, var(--s10));
    row-gap: var(--s8);
}

.tenant-site .tenant-footer__contact {
    display: grid;
    align-content: start;
    gap: var(--s3);
    min-inline-size: 0;
}

.tenant-site .tenant-footer h2 {
    margin: 0;
    color: var(--c-ink);
    font-size: var(--type-label);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tenant-site .tenant-footer__contact address {
    display: grid;
    gap: .15rem;
    font-style: normal;
    line-height: 1.55;
}

.tenant-site .tenant-footer__contact address a {
    display: grid;
    gap: .15rem;
    color: var(--c-muted);
    text-decoration: underline;
    text-decoration-thickness: .0625rem;
    text-underline-offset: .2em;
    text-decoration-color: color-mix(in srgb, var(--tenant-primary) 35%, transparent);
}

.tenant-site .tenant-footer__contact address a:hover {
    color: var(--tenant-primary);
    text-decoration-color: currentColor;
}

.tenant-site .tenant-footer__contact-list,
.tenant-site .tenant-footer__social {
    display: grid;
    justify-items: start;
    gap: var(--s1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tenant-site .tenant-footer__contact-list li {
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.tenant-site .tenant-footer__contact-list a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--target-min);
    color: var(--c-muted);
    font-weight: 650;
    text-decoration: underline;
    text-decoration-thickness: .0625rem;
    text-underline-offset: .2em;
    text-decoration-color: color-mix(in srgb, var(--tenant-primary) 35%, transparent);
}

.tenant-site .tenant-footer__contact-list a:hover {
    color: var(--tenant-primary);
    text-decoration-color: currentColor;
}

/* Social is a short row of named links: no icon set is shipped for the
   public site, and an unlabelled glyph would be worse for everyone. */
.tenant-site .tenant-footer__social {
    grid-auto-flow: column;
    justify-content: start;
    gap: var(--s2) var(--s4);
    margin-block-start: var(--s1);
}

.tenant-site .tenant-footer__social a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--target-min);
    color: var(--tenant-primary);
    font-size: var(--type-small);
    font-weight: 750;
}

.tenant-site .tenant-footer__social a:hover {
    color: var(--brand-primary-strong);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.tenant-site .tenant-footer__navigation {
    display: grid;
    justify-items: start;
    align-content: start;
    gap: var(--s1);
}

.tenant-site .tenant-footer__powered {
    grid-column: 1 / -1;
    margin: 0;
    padding-block-start: var(--s5);
    border-block-start: 1px solid color-mix(in srgb, var(--tenant-primary) 12%, var(--c-line));
}

/* Responsive --------------------------------------------------------------- */
/* Checked at 320, 375, 768, 1024 and 1440. The breakpoints are the ones this
   file already uses; no block adds one of its own. */
@media (max-width: 64rem) {
    .tenant-site :is(.tenant-card-grid, .tenant-gallery-grid).is-columns-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tenant-site .tenant-split {
        gap: clamp(var(--s6), 5vw, var(--s10));
    }
}

@media (max-width: 56rem) {
    /* One column, and copy leads — the same order the DOM already has, so
       IMAGE_RIGHT and the default arrangement converge on a phone. */
    .tenant-site .tenant-split {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s6);
    }

    .tenant-site .tenant-split__copy,
    .tenant-site .tenant-split-section.is-image-right .tenant-split__copy {
        order: 1;
        max-inline-size: none;
    }

    .tenant-site .tenant-split__media,
    .tenant-site .tenant-split-section.is-image-right .tenant-split__media {
        order: 2;
    }

    .tenant-site .tenant-split__media img {
        aspect-ratio: 16 / 9;
    }

    .tenant-site .tenant-staff-group .tenant-staff-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
    }
}

@media (max-width: 48rem) {
    .tenant-site :is(.tenant-card-grid, .tenant-gallery-grid).is-columns-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tenant-site .tenant-card-grid.is-columns-2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .tenant-site .tenant-banner img {
        aspect-ratio: 16 / 9;
    }

    .tenant-site .tenant-banner-section.is-tall .tenant-banner img {
        aspect-ratio: 4 / 3;
    }

    .tenant-site .tenant-accordion > summary {
        padding: var(--s4);
        font-size: var(--type-body);
    }

    .tenant-site .tenant-accordion__panel {
        margin: 0 var(--s4) var(--s4);
    }

    .tenant-site .tenant-pricing-table caption {
        padding: var(--s4) var(--s4) var(--s3);
    }

    .tenant-site .tenant-pricing-table :is(thead th, tbody th[scope="row"], tbody td) {
        padding: var(--s3) var(--s4);
    }

    .tenant-site .tenant-step,
    .tenant-site .tenant-tile {
        padding: var(--s4);
    }

    .tenant-site .tenant-document {
        gap: var(--s3);
        padding: var(--s3) var(--s4);
    }

    .tenant-site .tenant-card__body {
        padding: var(--s4);
    }

    /* The footer's four columns become one stack, and the platform line stops
       being a full-width rule on top of a single column. */
    .tenant-site .tenant-footer__inner {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--s6);
    }
}

@media (max-width: 40rem) {
    .tenant-site :is(.tenant-card-grid, .tenant-gallery-grid).is-columns-2,
    .tenant-site :is(.tenant-card-grid, .tenant-gallery-grid).is-columns-4 {
        grid-template-columns: minmax(0, 1fr);
    }

    .tenant-site .tenant-banner__caption {
        padding: var(--s4);
    }

    .tenant-site .tenant-banner__caption h2 {
        font-size: var(--type-h2);
    }

    .tenant-site .tenant-banner__caption p {
        font-size: var(--type-body);
    }

    /* The format badge drops under the document name rather than squeezing
       the name into a column two characters wide. */
    .tenant-site .tenant-document {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .tenant-site .tenant-document__kind {
        grid-column: 2;
        justify-self: start;
    }

    .tenant-site .tenant-footer__social {
        grid-auto-flow: row;
    }
}

/* Presentation presets ------------------------------------------------------ */
/* The presets differ in typography, spacing and shape — never in colour, which
   belongs to the school. Each block below follows the pattern the existing
   preset rules already set for the hero, the panels and the buttons. */
.tenant-site[data-site-preset="CLASSIC_ACADEMIC"] :is(.tenant-banner__caption h2,
                                                      .tenant-card__body strong,
                                                      .tenant-card__art,
                                                      .tenant-accordion > summary,
                                                      .tenant-pricing-table caption,
                                                      .tenant-step__body h3,
                                                      .tenant-notice__body strong) {
    font-family: var(--site-display-font);
}

.tenant-site[data-site-preset="FAITH_COMMUNITY"] :is(.tenant-banner__caption h2,
                                                     .tenant-card__body strong,
                                                     .tenant-card__art,
                                                     .tenant-accordion > summary,
                                                     .tenant-pricing-table caption,
                                                     .tenant-step__body h3,
                                                     .tenant-notice__body strong) {
    font-family: var(--site-display-font);
}

.tenant-site[data-site-preset="FAITH_COMMUNITY"] :is(.tenant-card,
                                                     .tenant-tile,
                                                     .tenant-step,
                                                     .tenant-accordion,
                                                     .tenant-document,
                                                     .tenant-notice,
                                                     .tenant-pricing-table-scroll) {
    box-shadow: 0 .5rem 1.5rem color-mix(in srgb, var(--tenant-primary) 9%, transparent);
}

.tenant-site[data-site-preset="MODERN_SCHOOL"] :is(.tenant-banner__caption h2,
                                                   .tenant-card__body strong,
                                                   .tenant-step__body h3,
                                                   .tenant-notice__body strong) {
    letter-spacing: -.025em;
}

.tenant-site[data-site-preset="MODERN_SCHOOL"] :is(.tenant-card-grid, .tenant-tile-grid, .tenant-steps) {
    gap: var(--s5);
}

.tenant-site[data-site-preset="EARLY_LEARNING"] :is(.tenant-card,
                                                    .tenant-tile,
                                                    .tenant-step,
                                                    .tenant-accordion,
                                                    .tenant-document,
                                                    .tenant-notice,
                                                    .tenant-pricing-table-scroll) {
    border-width: .125rem;
    box-shadow: 0 .65rem 1.5rem color-mix(in srgb, var(--tenant-primary) 8%, transparent);
}

.tenant-site[data-site-preset="EARLY_LEARNING"] :is(.tenant-tile__icon, .tenant-tile__mark) {
    border-radius: var(--r-pill);
}

/* Reduced motion ------------------------------------------------------------ */
/* The global rule already collapses durations; these drop the movement itself
   so a lifted card simply changes its border and shadow in place. */
@media (prefers-reduced-motion: reduce) {
    .tenant-site :is(a.tenant-card,
                     .tenant-tile,
                     a.tenant-document,
                     .tenant-accordion > summary,
                     .tenant-accordion__caret,
                     .tenant-inline-action,
                     .tenant-resource__action,
                     .tenant-staff-card__contact) {
        transition: none;
    }

    .tenant-site a.tenant-card:hover,
    .tenant-site a.tenant-card:focus-visible,
    .tenant-site .tenant-tile:hover,
    .tenant-site .tenant-tile:focus-visible {
        transform: none;
    }
}

/* Feature grid on the ink surface — heading colour --------------------------
   The tenant neutral ramp repaints every .tenant-section h2/h3 in --c-ink so a
   school's own colour carries through its headings. FEATURE_GRID is the one
   section that sits on --c-ink itself, so that rule leaves its heading, its
   new group labels and its row titles dark on dark. These restore the light
   end of the same ramp at the specificity the ramp rule uses. */
.tenant-site[data-tenant-theme] .tenant-feature-section :is(h2, h3, h4),
.tenant-site .tenant-feature-section :is(h2, h3, h4) {
    color: var(--c-surface);
}

.tenant-site[data-tenant-theme] .tenant-feature-section h3.tenant-value-group__label,
.tenant-site .tenant-feature-section h3.tenant-value-group__label {
    color: var(--c-surface);
    border-block-end-color: color-mix(in srgb, var(--c-surface) 24%, transparent);
}

/* ---------------------------------------------------------------------------
   Tenant site — school-scale corrections
   ---------------------------------------------------------------------------
   Written against a real thirty-four page school site rather than a three-page
   sample, where three things only show up at that size: a six-menu header runs
   out of room and starts breaking words, a footer that lists a menu's children
   grows past one column, and the decorative fallbacks that stand in for a
   missing image read as a half-loaded page when several sit in a row.
   --------------------------------------------------------------------------- */

/* A menu label must never break mid-word; the header sheds width elsewhere. */
.tenant-site .tenant-navigation--desktop > a,
.tenant-site .tenant-nav-group > summary > span,
.tenant-site .tenant-nav-group__panel > a {
    white-space: nowrap;
}

@media (max-width: 80rem) {
    .tenant-site .tenant-navigation--desktop {
        column-gap: var(--s2, 0.5rem);
    }
    .tenant-site .tenant-navigation--desktop > a,
    .tenant-site .tenant-nav-group > summary {
        font-size: 0.8125rem;
    }
    /* The portal link keeps its target size but loses its padding first. */
    .tenant-site .tenant-portal-link {
        padding-inline: var(--s2, 0.5rem);
    }
}

/* The school's brand name sits beside a wordmark that already carries it, so at
   the width where the menu starts competing for room, the name gives way. */
@media (max-width: 84rem) {
    .tenant-site .tenant-brand > span {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* The footer names every top-level menu entry, and a dropdown heading appears as
   text rather than a link, so it needs to read as a sibling of the links beside
   it without inviting a click. */
.tenant-site .tenant-footer__navigation {
    align-items: flex-start;
    align-content: flex-start;
}
.tenant-site .tenant-footer__navigation-heading {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--target-min, 2.75rem);
    color: var(--c-muted);
    font-size: var(--type-small);
    font-weight: 700;
}

/* Decorative stand-ins should read as brand ornament, not as content that has
   not arrived yet. A single soft mark beats a stack of grey bars. */
.tenant-site .tenant-hero__mark {
    display: grid;
    place-items: center;
    inline-size: min(18rem, 60%);
    aspect-ratio: 1;
    margin-inline: auto;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 45%,
            color-mix(in srgb, var(--brand-accent) 26%, transparent) 0%,
            transparent 62%),
        radial-gradient(circle at 50% 55%,
            color-mix(in srgb, var(--brand-primary) 12%, transparent) 0%,
            transparent 70%);
}
.tenant-site .tenant-hero__mark > span {
    display: none;
}

.tenant-site .tenant-tile__mark {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: 0.5rem;
    background: linear-gradient(140deg,
        color-mix(in srgb, var(--brand-primary) 18%, transparent),
        color-mix(in srgb, var(--brand-accent) 30%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary) 18%, transparent);
}

/* ---------------------------------------------------------------------------
   Collapsible navigation rail

   The rail keeps its icons when collapsed rather than disappearing: the same
   destinations stay one click away, and nobody is stranded with only the
   browser's back button. Labels are clipped, not removed, so they stay in the
   accessibility tree -- the script lends each one to a title attribute so a
   sighted visitor does not lose them either.
   --------------------------------------------------------------------------- */

.rail-toggle {
    display: inline-grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: .625rem;
    background: transparent;
    color: var(--c-muted);
    cursor: pointer;
    transition: color var(--motion-micro), background var(--motion-micro), border-color var(--motion-micro);
}

.rail-toggle:hover,
.rail-toggle:focus-visible {
    color: var(--c-text);
    background: var(--c-surface-muted, rgba(0, 0, 0, .04));
    border-color: var(--c-line);
}

/* Three bars drawn from one element, so the button carries no icon font or
   inline SVG of its own. */
.rail-toggle__bars,
.rail-toggle__bars::before,
.rail-toggle__bars::after {
    display: block;
    inline-size: 1.1rem;
    block-size: 2px;
    border-radius: 2px;
    background: currentcolor;
}

.rail-toggle__bars {
    position: relative;
}

.rail-toggle__bars::before,
.rail-toggle__bars::after {
    position: absolute;
    inset-inline-start: 0;
    content: "";
}

.rail-toggle__bars::before { inset-block-start: -.375rem; }
.rail-toggle__bars::after { inset-block-start: .375rem; }

body[data-rail="collapsed"] { --rail-width: 80px; }

body[data-rail="collapsed"] .role-rail {
    padding-inline: var(--s2);
    align-items: center;
}

/* One column of icons. The label lands in an implicit second column that is
   given no width and clipped, which hides it without taking it away from a
   screen reader. */
body.authenticated[data-rail="collapsed"] .role-rail .role-nav a {
    grid-template-columns: 1.3rem;
    grid-auto-flow: column;
    grid-auto-columns: 0;
    gap: 0;
    justify-content: center;
    padding-inline: 0;
    overflow: hidden;
    /* Without this the label wraps inside its zero-width column instead of being
       clipped, and every row grows to the height of one letter per line. */
    white-space: nowrap;
    /* The icon is sized in rem, so zeroing the font hides the label
       outright while leaving it in the accessibility tree. Clipping alone
       left two or three letters showing at the rail's edge. */
    font-size: 0;
}

body[data-rail="collapsed"] :is(
    .rail-brand__copy,
    .rail-role-badge,
    .nav-group,
    .rail-context,
    .rail-school,
    .rail-account__copy,
    .rail-platform-signature,
    .rail-upsell) {
    display: none;
}

body[data-rail="collapsed"] .rail-brand {
    justify-content: center;
}

body[data-rail="collapsed"] .logout-form button {
    grid-template-columns: 1.3rem;
    grid-auto-columns: 0;
    justify-content: center;
    padding-inline: 0;
    overflow: hidden;
    white-space: nowrap;
    /* The icon is sized in rem, so zeroing the font hides the label
       outright while leaving it in the accessibility tree. Clipping alone
       left two or three letters showing at the rail's edge. */
    font-size: 0;
}

/* Below the rail's own breakpoint the layout is already horizontal or handed to
   the mobile navigation, so a collapse control would act on nothing. */
@media (max-width: 56rem) {
    .rail-toggle { display: none; }
    body[data-rail="collapsed"] .role-nav a { white-space: normal; }
    body[data-rail="collapsed"] { --rail-width: auto; }
    body[data-rail="collapsed"] :is(.rail-brand__copy, .nav-group) { display: revert; }
    body[data-rail="collapsed"] .role-nav a {
        grid-template-columns: 1.3rem minmax(0, 1fr);
        grid-auto-columns: auto;
        padding-inline: var(--s3);
        overflow: visible;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rail-toggle { transition: none; }
}

/* ---------------------------------------------------------------------------
   PORTAL-1 — authenticated product shell refinement (2026-09-04)

   Platform identity and tenant identity are intentionally different layers.
   The forest/cream/gold shell is CON8CT-owned presentation; tenant colours are
   confined to the tenant crest treatment and validated brand surfaces rather
   than replacing the platform rail itself. Public-site presets do not control
   this layout.
   --------------------------------------------------------------------------- */
.authenticated {
    --portal-forest: #123d2d;
    --portal-forest-deep: #0b2d22;
    --portal-forest-soft: #e9f0eb;
    --portal-cream: #f7f3e9;
    --portal-gold: #c9a354;
    --portal-gold-soft: #f4ead1;
    --portal-shell-ink: #fbfaf5;
    --portal-shell-muted: rgba(251, 250, 245, .72);
}

.authenticated .role-rail {
    --rail-ink: var(--portal-shell-ink);
    --rail-muted: var(--portal-shell-muted);
    --rail-border: rgba(251, 250, 245, .16);
    --rail-surface: rgba(251, 250, 245, .075);
    --rail-surface-strong: rgba(251, 250, 245, .12);
    background:
        radial-gradient(circle at 8% -4%, rgba(201, 163, 84, .2), transparent 14rem),
        linear-gradient(165deg, var(--portal-forest), var(--portal-forest-deep));
    box-shadow: .7rem 0 2.4rem rgba(11, 45, 34, .14);
}

.authenticated .rail-platform-brand {
    grid-template-columns: 4.15rem minmax(0, 1fr);
    min-block-size: 6.25rem;
    gap: var(--s3);
    padding: var(--s2) var(--s1) var(--s4);
}

.authenticated .rail-platform-brand__logo-frame {
    inline-size: 4.15rem;
    block-size: 4.15rem;
    padding: .18rem;
    border-color: rgba(255, 255, 255, .28);
    border-radius: 1.1rem;
    background: #fbfaf5;
    box-shadow: 0 .75rem 1.6rem rgba(3, 24, 16, .24);
}

.authenticated .rail-platform-logo--full {
    inline-size: 3.85rem;
    block-size: 3.85rem;
    object-fit: contain;
}

.authenticated .rail-platform-logo--mark { display: none; }

.authenticated .rail-platform-brand__copy strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.18rem;
    letter-spacing: -.025em;
}

.authenticated .rail-platform-brand__copy small {
    max-inline-size: 18ch;
    overflow: visible;
    white-space: normal;
    color: var(--rail-muted);
    font-size: .61rem;
    line-height: 1.35;
    letter-spacing: .055em;
}

.authenticated .rail-tenant-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--s3);
    min-block-size: 4.4rem;
    margin: var(--s4) 0 var(--s2);
    padding: .7rem .75rem;
    border: 1px solid var(--rail-border);
    border-radius: .95rem;
    color: var(--rail-ink);
    background: var(--rail-surface);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.authenticated .rail-tenant-card__crest {
    display: grid;
    place-items: center;
    inline-size: 2.65rem;
    block-size: 2.65rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--brand-accent) 52%, rgba(255, 255, 255, .42));
    border-radius: .8rem;
    background: #fff;
    box-shadow: 0 .4rem .9rem rgba(3, 24, 16, .16);
}

.authenticated .rail-tenant-card__crest .rail-logo {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    object-fit: contain;
}

.authenticated .rail-tenant-card__monogram {
    display: grid;
    place-items: center;
    inline-size: 100%;
    block-size: 100%;
    color: var(--brand-on-primary);
    background: var(--brand-primary);
    font-weight: 850;
    text-transform: uppercase;
}

.authenticated .rail-tenant-card__copy {
    display: grid;
    gap: .12rem;
    min-inline-size: 0;
}

.authenticated .rail-tenant-card__copy strong {
    overflow: hidden;
    color: var(--rail-ink);
    font-size: .84rem;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.authenticated .rail-tenant-card__copy small {
    overflow: hidden;
    color: var(--rail-muted);
    font-size: .66rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.authenticated .rail-role-badge {
    min-block-size: 2.4rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 var(--s1) var(--s2);
    padding: .45rem .65rem;
    border: 1px solid transparent;
    border-radius: .7rem;
    color: var(--rail-muted);
    font-size: .7rem;
    font-weight: 750;
}

.authenticated .rail-role__indicator {
    background: var(--portal-gold);
    box-shadow: 0 0 0 .18rem rgba(201, 163, 84, .18);
}

.authenticated .role-rail .role-nav a {
    min-block-size: var(--target-min);
    border-radius: .72rem;
}

.authenticated .role-rail .role-nav a[aria-current="page"] {
    color: var(--rail-ink);
    background: rgba(251, 250, 245, .13);
    border-color: rgba(251, 250, 245, .19);
    box-shadow: inset .22rem 0 0 var(--portal-gold), 0 .35rem 1rem rgba(3, 24, 16, .16);
}

.authenticated .rail-platform-signature {
    opacity: .86;
}

.authenticated .topbar {
    min-block-size: 4.65rem;
    padding-inline: clamp(var(--s4), 2.2vw, var(--s7, 1.75rem));
    border-block-end-color: color-mix(in srgb, var(--portal-forest) 12%, var(--c-shell-border));
    background: color-mix(in srgb, var(--c-surface) 96%, transparent);
    box-shadow: 0 .35rem 1.4rem rgba(18, 61, 45, .045);
    backdrop-filter: blur(.85rem);
}

.authenticated .topbar-workspace {
    flex: 1 1 18rem;
    max-inline-size: min(34rem, 46vw);
    display: flex;
    align-items: center;
    gap: .65rem;
    min-inline-size: 0;
    padding-inline-start: var(--s3);
    border-inline-start: 1px solid color-mix(in srgb, var(--portal-forest) 12%, var(--c-shell-border));
}

.authenticated .topbar-workspace__tenant-mark {
    display: none;
    place-items: center;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    overflow: hidden;
    flex: 0 0 auto;
    border: 1px solid var(--c-surface-border);
    border-radius: .72rem;
    color: var(--brand-on-primary);
    background: var(--brand-primary);
    font-size: .78rem;
    font-weight: 850;
    text-transform: uppercase;
}

.authenticated .topbar-workspace__tenant-mark img {
    inline-size: 100%;
    block-size: 100%;
    padding: .12rem;
    object-fit: contain;
    background: var(--c-surface);
}

.authenticated .topbar-workspace__copy {
    display: grid;
    gap: .06rem;
    min-inline-size: 0;
}

.authenticated .topbar-workspace__school {
    overflow: hidden;
    color: var(--c-ink);
    font-size: .84rem;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.authenticated .topbar-workspace__role {
    overflow: hidden;
    color: var(--c-muted);
    font-size: .67rem;
    font-weight: 650;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.authenticated .topbar-workspace--context-chip {
    flex: 0 1 min(27rem, 100%);
    max-inline-size: min(36rem, 48vw);
    gap: .72rem;
    padding: .55rem .82rem;
    border: 1px solid color-mix(in srgb, var(--portal-forest) 12%, var(--c-shell-border));
    border-radius: 1rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary-soft) 54%, var(--c-surface) 46%), var(--c-surface));
    box-shadow: 0 .35rem .95rem rgba(18, 61, 45, .08);
    border-inline-start: 0;
}

.authenticated .topbar-workspace--context-chip .topbar-workspace__tenant-mark {
    display: grid;
    inline-size: 2.6rem;
    block-size: 2.6rem;
    border-radius: .85rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
}

.authenticated .topbar-workspace__tenant-logo {
    inline-size: 100%;
    block-size: 100%;
}

.authenticated .topbar-workspace__tenant-monogram {
    display: grid;
    place-items: center;
    inline-size: 100%;
    block-size: 100%;
}

.authenticated .topbar-workspace__tenant-monogram svg {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    fill: currentColor;
}

.authenticated .topbar-workspace--switchable {
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
    appearance: none;
}

.authenticated .topbar-workspace--switchable:hover,
.authenticated .topbar-workspace--switchable:focus-visible {
    border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--c-shell-border));
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary-soft) 68%, var(--c-surface) 32%), var(--c-surface));
}

.authenticated .topbar-workspace__caret {
    display: grid;
    place-items: center;
    margin-inline-start: auto;
    color: color-mix(in srgb, var(--portal-forest) 62%, var(--c-muted));
}

.authenticated .topbar-workspace__caret svg {
    inline-size: 1rem;
    block-size: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body[data-rail="collapsed"] .rail-platform-logo--full { display: none; }
body[data-rail="collapsed"] .rail-platform-logo--mark { display: block; inline-size: 3rem; block-size: 3rem; }
body[data-rail="collapsed"] .rail-platform-brand { grid-template-columns: 1fr; padding-inline: 0; }
body[data-rail="collapsed"] .rail-platform-brand__logo-frame { inline-size: 3.55rem; block-size: 3.55rem; padding: .12rem; }
body[data-rail="collapsed"] .rail-tenant-card { display: none; }

@media (max-width: 56rem) {
    .authenticated .role-rail {
        background: linear-gradient(100deg, var(--portal-forest), var(--portal-forest-deep));
        box-shadow: 0 .35rem 1.2rem rgba(11, 45, 34, .12);
    }

    .authenticated .topbar-workspace {
        padding-inline-start: 0;
        border-inline-start: 0;
        max-inline-size: min(26rem, 55vw);
    }

    .authenticated .topbar-workspace--context-chip {
        max-inline-size: min(26rem, 62vw);
        padding-inline: .72rem;
    }

    .authenticated .topbar-workspace__tenant-mark { display: grid; }
}

@media (max-width: 40rem) {
    .authenticated .topbar {
        min-block-size: 4.25rem;
        padding-inline: var(--s3);
    }

    .authenticated .topbar-workspace {
        flex: 1 1 auto;
        max-inline-size: none;
    }

    .authenticated .topbar-workspace--context-chip {
        min-inline-size: 0;
        padding-inline: .68rem;
    }

    .authenticated .topbar-workspace__tenant-mark {
        inline-size: 2.25rem;
        block-size: 2.25rem;
    }

    .authenticated .topbar-workspace__school { font-size: .78rem; }
    .authenticated .topbar-utilities { margin-inline-start: auto; }
}

@media (prefers-contrast: more) {
    .authenticated .rail-tenant-card,
    .authenticated .rail-tenant-card__crest,
    .authenticated .rail-role-badge {
        border-width: 2px;
    }
}

@media (forced-colors: active) {
    .authenticated .rail-platform-brand__logo-frame,
    .authenticated .rail-tenant-card,
    .authenticated .rail-tenant-card__crest,
    .authenticated .rail-role-badge,
    .authenticated .topbar-workspace__tenant-mark {
        border: 1px solid CanvasText;
        background: Canvas;
        box-shadow: none;
    }

    .authenticated .rail-tenant-card__monogram,
    .authenticated .topbar-workspace__tenant-mark {
        color: CanvasText;
        background: Canvas;
    }

    .authenticated .role-rail .role-nav a[aria-current="page"] {
        box-shadow: none;
    }
}

/* PORTAL-1 Admin role accent stays CON8CT-owned rather than inheriting the
   historical generic blue. Tenant brand remains a separate validated layer. */
body.authenticated.role-admin {
    --role-accent: #2f6a4d;
    --role-accent-soft: #e7f0e9;
}

body.authenticated[data-theme-preset="DARK"].role-admin {
    --role-accent: #8bc7a5;
    --role-accent-soft: color-mix(in srgb, #8bc7a5 18%, var(--c-surface));
}

.authenticated .rail-tenant-card__monogram svg,
.authenticated .topbar-workspace__tenant-mark svg {
    inline-size: 1.35rem;
    block-size: 1.35rem;
    fill: currentColor;
}

/* ===========================================================================
   Premium V2 shared shell — geometry and progressive navigation
   Product identity lives in the rail. School identity lives in the topbar.
   =========================================================================== */
.authenticated {
    --premium-forest: #0f3a26;
    --premium-forest-2: #1d5039;
    --premium-gold: #d4af37;
    --premium-cream: #f6f5ef;
    --premium-paper: #ffffff;
    --premium-sage: #e9eee3;
    --premium-sage-soft: #edf3e9;
    /* Authored hero surfaces from the Premium V2 reference; one token per art treatment. */
    --premium-hero-family: #f5f1e5;
    --premium-ink: #20392f;
    --premium-muted: #657167;
    --premium-line: #e3e8df;
    --premium-body-font: var(--premium-ui-font);
    --font-display: var(--premium-heading-font);
    --rail-width: 260px;
    --topbar-height: 80px;
    --shell-gutter: 24px;
    --shell-content-top: 22px;
    font-family: var(--premium-body-font);
    font-size: 14px;
    line-height: 1.55;
    padding-block-end: 0;
}

.authenticated[data-typography-preset="SERIF"] { --font-display: Georgia, "Times New Roman", "Apple SD Gothic Neo", "Malgun Gothic", serif; --premium-body-font: var(--font-display); }
body.authenticated .page-column :is(h1, h2, h3) { font-family: var(--font-display); }
.authenticated:lang(ko) :is(h1, h2, h3) { word-break: keep-all; }

.authenticated .rail-botanical {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    align-items: center;
    min-block-size: 150px;
    margin-block-start: auto;
    flex-shrink: 0;
    color: var(--rail-ink);
}
.authenticated .rail-botanical img { inline-size: 70px; block-size: 140px; object-fit: contain; }
.authenticated .rail-botanical p { margin: 0; padding: 12px; font-family: var(--font-display); font-size: 12px; }
.authenticated[data-rail="collapsed"] .rail-botanical { display: none; }
.authenticated .help-center__art { inline-size: 100%; block-size: 150px; object-fit: contain; }

/* Equal specificity to the legacy tenant ramp lets Premium DEFAULT own neutrals. */
.authenticated[data-theme-preset="DEFAULT"] {
    --c-auth-canvas: var(--premium-cream);
    --c-bg: var(--premium-cream);
    --c-surface: var(--premium-paper);
    --c-surface-low: var(--premium-sage-soft);
    --c-ink: var(--premium-ink);
    --c-text: var(--premium-ink);
    --c-muted: var(--premium-muted);
    --c-line: var(--premium-line);
    --c-surface-border: var(--premium-line);
    --c-shell-border: var(--premium-line);
}

/* The shell owns outer gutters; page components own their internal spacing. */
body.authenticated .page-column > #main-content {
    inline-size: 100%;
    max-inline-size: none;
    padding: var(--shell-content-top) var(--shell-gutter) 32px;
}

.authenticated :is(.rail-toggle, .rail-overlay, .rail-drawer-close)[hidden] {
    display: none;
}

@media (max-width: 1279px) {
    .authenticated { --shell-gutter: 20px; --shell-content-top: 20px; }
}
@media (max-width: 1023px) {
    .authenticated { --topbar-height: 72px; }
}
@media (max-width: 767px) {
    .authenticated { --topbar-height: 70px; --shell-gutter: 15px; --shell-content-top: 15px; }
}

.authenticated .role-rail {
    padding: 0 14px 16px;
    background: #0f442f;
    box-shadow: none;
    border-inline-end: 0;
}

.authenticated .rail-platform-brand {
    grid-template-columns: 2.2rem minmax(0, 1fr);
    min-block-size: var(--topbar-height);
    flex-shrink: 0;
    gap: .7rem;
    padding: .55rem .45rem .7rem;
    border-block-end: 1px solid rgba(255,255,255,.11);
}

.authenticated .rail-platform-brand__logo-frame {
    inline-size: 2.2rem;
    block-size: 2.2rem;
    padding: .12rem;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: .55rem;
    background: rgba(255,255,255,.1);
    box-shadow: none;
}

.authenticated .rail-platform-logo--full { display: none; }
.authenticated .rail-platform-logo--mark {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
}

.authenticated .rail-platform-brand__copy strong {
    color: #fff;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.02em;
}

.authenticated .rail-platform-brand__copy small {
    max-inline-size: 23ch;
    margin-block-start: .2rem;
    color: #92d4b5;
    font-size: .5rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.authenticated .role-rail .role-nav { inline-size: 100%; gap: .12rem; padding-block-start: .75rem; }
.authenticated .role-rail .role-nav a {
    min-block-size: 44px;
    padding: 10px 13px;
    border: 0;
    border-radius: .55rem;
    color: #dbeae2;
    font-size: .78rem;
    font-weight: 650;
}
.authenticated .role-rail .role-nav a::before { color: #abc8b9; }
.authenticated .role-rail .role-nav a:hover,
.authenticated .role-rail .role-nav a:focus-visible { color: #fff; background: rgba(255,255,255,.07); }
.authenticated .role-rail .role-nav a[aria-current="page"] {
    color: #fff;
    background: rgba(255,255,255,.11);
    box-shadow: inset .2rem 0 0 #d4af37;
}
.authenticated .role-rail .role-nav a[aria-current="page"]::before { color: #d4af37; }
.authenticated .rail-platform-signature { margin-block-start: auto; }

.authenticated .topbar {
    min-block-size: var(--topbar-height);
    block-size: var(--topbar-height);
    gap: 13px;
    padding: 0 var(--shell-gutter);
    border-block-end: 1px solid var(--c-shell-border);
    background: var(--c-surface);
    box-shadow: 0 1px 4px rgba(15, 58, 38, .035);
    backdrop-filter: none;
}

.authenticated .rail-toggle {
    inline-size: 44px;
    block-size: 44px;
    flex: 0 0 auto;
    color: #667085;
}

.authenticated .topbar-workspace--context-chip {
    flex: 0 1 17rem;
    max-inline-size: 19rem;
    min-inline-size: 0;
    gap: .62rem;
    padding: .25rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.authenticated .topbar-workspace--context-chip .topbar-workspace__tenant-mark {
    display: grid;
    inline-size: 2.35rem;
    block-size: 2.35rem;
    border: 1px solid #dbe4df;
    border-radius: 50%;
    overflow: hidden;
    background: #0f442f;
    color: #d4af37;
    box-shadow: none;
}
.authenticated .topbar-workspace__tenant-logo { inline-size: 100%; block-size: 100%; object-fit: cover; background: #fff; }
.authenticated .topbar-workspace__tenant-monogram {
    display: grid;
    place-items: center;
    inline-size: 100%;
    block-size: 100%;
    font-family: Georgia, "Times New Roman", serif;
    font-size: .82rem;
    font-weight: 800;
}
.authenticated .topbar-workspace__school { color: var(--c-ink); font-size: .82rem; font-weight: 750; }
.authenticated .topbar-workspace__role { color: var(--c-muted); font-size: .67rem; font-weight: 500; }
.authenticated .topbar-workspace__caret { color: #667085; }
.authenticated .topbar-workspace--switchable:hover,
.authenticated .topbar-workspace--switchable:focus-visible { background: #f7f9f8; }

/* School switch panel. Enhanced pages open it from the toggle; a page whose
   script has not run yet opens it from focus so the linked schools stay
   reachable by keyboard and pointer. */
.school-switcher { position: relative; display: flex; flex: 0 1 min(27rem, 100%); min-inline-size: 0; }
.school-switcher > .topbar-workspace--context-chip { flex: 1 1 auto; max-inline-size: none; }
.school-switcher__panel {
    position: absolute;
    inset-block-start: calc(100% + var(--s2));
    inset-inline-start: 0;
    z-index: 34;
    display: none;
    inline-size: max(100%, min(21rem, calc(100vw - (2 * var(--s4)))));
    padding: var(--s3);
    border: 1px solid var(--c-surface-border);
    border-radius: var(--r-card);
    background: var(--c-surface);
    box-shadow: var(--shadow-float);
}
.school-switcher[data-open="true"] .school-switcher__panel,
.school-switcher:not([data-enhanced="true"]):focus-within .school-switcher__panel { display: grid; gap: var(--s2); }
.school-switcher__note { margin: 0; color: var(--c-muted); font-size: var(--type-label); line-height: 1.45; }
.school-switcher__options { display: grid; gap: var(--s1); }
.school-switcher__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    min-block-size: var(--target-min);
    padding: var(--s2) var(--s3);
    border-radius: var(--r-field);
    color: var(--c-text);
    font-size: var(--type-small);
    font-weight: 700;
}
.school-switcher__option:hover,
.school-switcher__option:focus-visible { color: var(--c-ink); background: var(--brand-primary-soft); }
.school-switcher__option--current { color: var(--c-ink); background: color-mix(in srgb, var(--brand-primary-soft) 60%, var(--c-surface)); }
.school-switcher__option-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.school-switcher__option-state {
    flex: 0 0 auto;
    padding: .1rem .45rem;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 28%, var(--c-line));
    border-radius: var(--r-pill);
    color: var(--brand-primary-strong);
    background: var(--c-surface);
    font-size: var(--type-label);
    font-weight: 750;
}

.topbar-global-search {
    position: relative;
    flex: 1 1 34rem;
    max-inline-size: 38rem;
    min-inline-size: 90px;
    margin-inline: auto;
}
.topbar-global-search input {
    inline-size: 100%;
    block-size: 44px;
    padding: 0 5.2rem 0 2.35rem;
    border: 1px solid #eef0f2;
    border-radius: 999px;
    outline: 0;
    color: #344054;
    background: #f6f7f8;
    font-size: .76rem;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.topbar-global-search input::placeholder { color: #98a2b3; }
.topbar-global-search input:focus {
    border-color: #a8c7b5;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(52,110,88,.12);
}
.topbar-global-search__icon {
    position: absolute;
    inset-inline-start: .85rem;
    inset-block-start: 50%;
    z-index: 1;
    translate: 0 -50%;
    color: #98a2b3;
}
.topbar-global-search__icon svg { inline-size: .95rem; block-size: .95rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.topbar-global-search__shortcut {
    position: absolute;
    inset-inline-end: .55rem;
    inset-block-start: 50%;
    display: inline-flex;
    gap: .2rem;
    translate: 0 -50%;
}
.topbar-global-search__shortcut kbd {
    min-inline-size: 1.35rem;
    padding: .13rem .28rem;
    border: 1px solid #e4e7ec;
    border-radius: .3rem;
    color: var(--c-muted);
    background: #fff;
    font-size: .52rem;
    text-align: center;
}

.authenticated .topbar-utilities--authenticated { flex: 0 0 auto; gap: .42rem; margin-inline-start: 0; }
.ask-con8ct {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-block-size: 44px;
    padding: .22rem .75rem .22rem .25rem;
    border: 1px solid #174f39;
    border-radius: 999px;
    color: #fff;
    background: #0f442f;
    font-size: .72rem;
    font-weight: 750;
    white-space: nowrap;
}
.ask-con8ct:hover, .ask-con8ct:focus-visible { background: #0b3726; }
.ask-con8ct__avatar {
    inline-size: 1.72rem;
    block-size: 1.72rem;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 50%;
    background: #fff;
}
.ask-con8ct__avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.ask-con8ct__sparkle { inline-size: .85rem; block-size: .85rem; fill: #e5c962; }

.authenticated .topbar-icon-link {
    position: relative;
    display: inline-grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #667085;
    background: transparent;
}
.authenticated .topbar-icon-link:hover,
.authenticated .topbar-icon-link:focus-visible { color: #344054; background: #f3f5f4; }
.authenticated .topbar-icon-link svg { inline-size: 1.05rem; block-size: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.authenticated .topbar-message-link svg { fill: currentColor; stroke: none; }
.authenticated .topbar-utilities__divider { inline-size: 1px; block-size: 1.8rem; margin-inline: .22rem; background: #e5e7eb; }
.authenticated .notification-link__badge { inset-block-start: .05rem; inset-inline-end: .02rem; min-inline-size: .9rem; block-size: .9rem; font-size: .48rem; }

.authenticated .account-menu--app > summary { min-inline-size: 44px; min-block-size: 44px; padding: .22rem .35rem; border: 0; border-radius: .6rem; background: transparent; }
.authenticated .account-menu--app > summary:hover { background: #f7f8f8; }
.authenticated .account-menu--app .account-menu__avatar { inline-size: 2rem; block-size: 2rem; }
.authenticated .account-menu--app .account-menu__who strong { font-size: .75rem; }
.authenticated .account-menu--app .account-menu__who small { font-size: .64rem; font-weight: 500; }

.rail-overlay { display: none; }

body[data-rail="collapsed"] .role-rail { padding-inline: .48rem; }
body[data-rail="collapsed"] .rail-platform-brand { grid-template-columns: 1fr; min-inline-size: var(--target-min); padding-inline: 0; }
body[data-rail="collapsed"] .rail-platform-brand__logo-frame { inline-size: 2.55rem; block-size: 2.55rem; }
body[data-rail="collapsed"] .rail-platform-logo--mark { inline-size: 100%; block-size: 100%; }

@media (max-width: 76rem) {
    .topbar-global-search { max-inline-size: 26rem; }
    .topbar-global-search__shortcut { display: none; }
    .topbar-global-search input { padding-inline-end: 1rem; }
    .authenticated .account-menu--app .account-menu__who { display: none; }
}

@media (max-width: 1023px) {
    .authenticated { --rail-width: 0px; }
    .authenticated .app-shell { display: block; }
    /* No JavaScript: one ordinary, keyboard-reachable server navigation. */
    .authenticated .role-rail {
        position: relative;
        inset: auto;
        display: flex;
        inline-size: 100%;
        block-size: auto;
        translate: none;
    }
    .authenticated[data-shell-ready="true"] .role-rail {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 90;
        inline-size: min(260px, 100vw);
        block-size: 100dvh;
        translate: -102% 0;
        transition: translate .2s ease;
        overflow-y: auto;
    }
    .authenticated[data-shell-ready="true"][data-mobile-rail="closed"] .role-rail {
        visibility: hidden;
    }
    .authenticated[data-shell-ready="true"][data-mobile-rail="open"] .role-rail { translate: 0 0; }
    .rail-overlay {
        position: fixed;
        inset: 0;
        z-index: 80;
        inline-size: 100%;
        block-size: 100%;
        border: 0;
        background: rgba(15,23,42,.42);
    }
    body[data-mobile-rail="open"] .rail-overlay { display: block; }
    body.rail-drawer-open { overflow: hidden; }
    .authenticated .mobile-nav { display: none !important; }
    .authenticated .rail-toggle { display: inline-grid; }
    .authenticated .topbar-workspace--context-chip,
    .authenticated .school-switcher { flex: 0 1 14rem; min-inline-size: 8rem; }
    .topbar-global-search { max-inline-size: none; }
}

@media (max-width: 48rem) {
    .authenticated .topbar { gap: .45rem; padding-inline: .65rem; }
    .authenticated .topbar-workspace--context-chip,
    .authenticated .school-switcher { flex: 1 1 auto; max-inline-size: none; }
    .authenticated .topbar-workspace__role { display: none; }
    .topbar-global-search { display: none; }
    .ask-con8ct { inline-size: 2.25rem; padding: .22rem; justify-content: center; }
    .ask-con8ct > span:not(.ask-con8ct__avatar), .ask-con8ct__sparkle { display: none; }
    .authenticated .topbar-message-link { display: none; }
    .authenticated .topbar-utilities__divider { display: none; }
}

@media (max-width: 28rem) {
    .authenticated .topbar-workspace__tenant-mark { inline-size: 2rem; block-size: 2rem; }
    .authenticated .topbar-workspace__school { max-inline-size: 8rem; font-size: .72rem; }
    .authenticated .account-menu--app .account-menu__caret { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .authenticated[data-shell-ready="true"] .role-rail, .topbar-global-search input { transition: none; }
}

/* ===========================================================================
   GLOBAL SHELL V3 — tenant-aware color + robust mobile drawer (2026-09-07)
   The interaction system stays CON8CT-owned while validated tenant brand
   tokens control the approved shell color layer.
   =========================================================================== */
.authenticated .role-rail {
    --rail-ink: var(--brand-on-primary);
    --rail-muted: color-mix(in srgb, var(--brand-on-primary) 78%, transparent);
    color: var(--brand-on-primary);
    background:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--brand-accent) 16%, transparent), transparent 13rem),
        linear-gradient(165deg, var(--brand-primary-strong), color-mix(in srgb, var(--brand-primary-strong) 86%, #101820));
}
.authenticated .rail-platform-brand { border-block-end-color: color-mix(in srgb, var(--brand-on-primary) 16%, transparent); }
.authenticated .rail-platform-brand__logo-frame {
    border-color: color-mix(in srgb, var(--brand-on-primary) 22%, transparent);
    background: color-mix(in srgb, var(--brand-on-primary) 10%, transparent);
}
.authenticated .rail-platform-brand__copy strong { color: var(--brand-on-primary); }
.authenticated .rail-platform-brand__copy small { color: color-mix(in srgb, var(--brand-on-primary) 72%, transparent); }
.authenticated .role-rail .role-nav a { color: color-mix(in srgb, var(--brand-on-primary) 78%, transparent); }
.authenticated .role-rail .role-nav a::before { color: color-mix(in srgb, var(--brand-on-primary) 68%, transparent); }
.authenticated .role-rail .role-nav a:hover,
.authenticated .role-rail .role-nav a:focus-visible {
    color: var(--brand-on-primary);
    background: color-mix(in srgb, var(--brand-on-primary) 8%, transparent);
}
.authenticated .role-rail .role-nav a[aria-current="page"] {
    color: var(--brand-on-primary);
    background: color-mix(in srgb, var(--brand-on-primary) 12%, transparent);
    box-shadow: inset .2rem 0 0 var(--brand-accent);
}
.authenticated .role-rail .role-nav a[aria-current="page"]::before { color: var(--brand-accent); }

.authenticated .topbar-workspace--context-chip .topbar-workspace__tenant-mark {
    border-color: color-mix(in srgb, var(--brand-primary) 20%, #dbe4df);
    color: var(--brand-on-primary);
    background: var(--brand-primary-strong);
}
.authenticated .topbar-global-search input:focus {
    border-color: color-mix(in srgb, var(--brand-primary) 45%, #d0d5dd);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 14%, transparent);
}
.authenticated .topbar-global-search input:focus-visible {
    outline: 3px solid var(--brand-focus);
    outline-offset: 2px;
}
.ask-con8ct {
    border-color: color-mix(in srgb, var(--brand-primary-strong) 72%, #101820);
    color: var(--brand-on-primary);
    background: var(--brand-primary-strong);
}
.ask-con8ct:hover,
.ask-con8ct:focus-visible { background: color-mix(in srgb, var(--brand-primary-strong) 88%, #000); }
.ask-con8ct__sparkle { fill: var(--brand-accent); }

.topbar-notification-fallback { position: relative; }
.topbar-notification-fallback > summary { list-style: none; cursor: pointer; }
.topbar-notification-fallback > summary::-webkit-details-marker { display: none; }
.topbar-notification-fallback[open] > summary { color: var(--brand-primary-strong); background: var(--brand-primary-soft); }
.topbar-utility-popover {
    position: absolute;
    inset-block-start: calc(100% + .55rem);
    inset-inline-end: 0;
    z-index: 120;
    inline-size: min(18rem, calc(100vw - 1.25rem));
    padding: .9rem 1rem;
    border: 1px solid var(--c-surface-border);
    border-radius: .75rem;
    color: var(--c-text);
    background: var(--c-surface);
    box-shadow: var(--shadow-float);
}
.topbar-utility-popover strong { display: block; color: var(--c-ink); font-size: .78rem; }
.topbar-utility-popover p { margin: .3rem 0 0; color: var(--c-muted); font-size: .68rem; line-height: 1.45; }

@media (max-width: 1023px) {
    .authenticated .role-rail {
        padding: 0 14px 16px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    /* Older responsive rules turned the rail into a horizontal tab strip.
       Inside the overlay drawer it must be a vertical application nav. */
    .authenticated .role-rail .role-nav {
        display: grid;
        inline-size: 100%;
        overflow: visible;
        scroll-snap-type: none;
    }
    .authenticated .role-rail :is(
        .role-nav-section--applicant,
        .role-nav-section--parent,
        .role-nav-section--teacher,
        .role-nav-section--admin,
        .role-nav-section--student,
        .role-nav-section--finance
    ) {
        inline-size: 100%;
        flex-direction: column;
        gap: .12rem;
    }
    .authenticated.role-applicant .role-rail .role-nav-section--applicant,
    .authenticated.role-parent .role-rail .role-nav-section--parent,
    .authenticated.role-teacher .role-rail .role-nav-section--teacher,
    .authenticated.role-admin .role-rail .role-nav-section--admin,
    .authenticated.role-student .role-rail .role-nav-section--student,
    .authenticated.role-finance .role-rail .role-nav-section--finance {
        display: grid;
    }
    .authenticated .role-rail .role-nav a {
        inline-size: 100%;
        flex: none;
        grid-template-columns: 1.3rem minmax(0, 1fr);
        padding-inline: .72rem;
        white-space: normal;
        scroll-snap-align: none;
    }
    .authenticated .rail-platform-brand {
        position: sticky;
        inset-block-start: 0;
        z-index: 2;
        display: grid;
        background: color-mix(in srgb, var(--brand-primary-strong) 96%, transparent);
        backdrop-filter: blur(.5rem);
    }
    .authenticated .role-rail .rail-platform-signature { display: grid; }
}

/* Phone-sized and narrow tablet headers: search collapses first; the utility
   order remains school -> Ask CON8CT -> bell -> messages -> profile. */
@media (max-width: 56rem) {
    .authenticated .topbar { gap: .4rem; padding-inline: .6rem; }
    .authenticated .topbar-workspace--context-chip { flex: 1 1 auto; min-inline-size: 0; max-inline-size: none; }
    .authenticated .topbar-workspace__role { display: none; }
    .topbar-global-search { display: none; }
    .ask-con8ct { inline-size: 2.25rem; padding: .22rem; justify-content: center; }
    .ask-con8ct > span:not(.ask-con8ct__avatar), .ask-con8ct__sparkle { display: none; }
    .authenticated .topbar-message-link { display: inline-grid; }
    .authenticated .topbar-utilities__divider { display: none; }
}

@media (max-width: 34rem) {
    .authenticated .topbar-message-link { display: none; }
    .authenticated .topbar-workspace__school { max-inline-size: 9.5rem; }
    .authenticated .topbar-utilities--authenticated { gap: .24rem; }
}

@media (forced-colors: active) {
    .topbar-utility-popover { border: 1px solid CanvasText; color: CanvasText; background: Canvas; }
    .school-switcher__panel,
    .school-switcher__option-state { border: 1px solid CanvasText; color: CanvasText; background: Canvas; box-shadow: none; }
    /* Selection must stay visible when the brand tint is dropped. */
    .school-switcher__option--current { forced-color-adjust: auto; outline: 1px solid CanvasText; }
}

/* ===========================================================================
   GLOBAL SHELL V3.1 — resilient tenant mark + mobile-mode header alignment
   (2026-09-07)
   The drawer threshold is also the compact-header threshold. Some Android
   browsers expose a CSS viewport near 980px; treating 56rem as the only phone
   breakpoint produced a desktop search bar squeezed into a mobile drawer mode.
   =========================================================================== */
.authenticated .topbar-workspace--context-chip .topbar-workspace__tenant-mark {
    position: relative;
    overflow: hidden;
}
.authenticated .topbar-workspace__tenant-logo {
    position: absolute;
    inset: 0;
    z-index: 1;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    background: var(--brand-primary-strong);
}
.authenticated .topbar-workspace__tenant-logo[hidden] { display: none; }

@media (max-width: 1023px) {
    .authenticated .topbar {
        gap: .4rem;
        min-block-size: var(--topbar-height);
        padding-inline: var(--shell-gutter);
    }
    .authenticated .topbar-workspace--context-chip {
        flex: 1 1 auto;
        min-inline-size: 0;
        max-inline-size: none;
    }
    .authenticated .topbar-workspace__role { display: none; }
    .topbar-global-search { display: none; }
    .ask-con8ct {
        flex: 0 0 44px;
        inline-size: 44px;
        block-size: 44px;
        padding: .2rem;
        justify-content: center;
    }
    .ask-con8ct > span:not(.ask-con8ct__avatar),
    .ask-con8ct__sparkle { display: none; }
    .ask-con8ct__avatar { inline-size: 1.9rem; block-size: 1.9rem; }
    .authenticated .topbar-message-link { display: inline-grid; }
    .authenticated .topbar-utilities__divider { display: none; }
}

.rail-drawer-close { display: none; }
@media (max-width: 1023px) {
    .authenticated .rail-drawer-close {
        position: absolute;
        inset-block-start: .8rem;
        inset-inline-end: .8rem;
        z-index: 4;
        display: grid;
        place-items: center;
        inline-size: 44px;
        block-size: 44px;
        padding: 0;
        border: 1px solid color-mix(in srgb, var(--brand-on-primary) 22%, transparent);
        border-radius: .75rem;
        color: var(--brand-on-primary);
        background: color-mix(in srgb, var(--brand-on-primary) 8%, transparent);
        cursor: pointer;
    }
    .authenticated .rail-drawer-close:hover,
    .authenticated .rail-drawer-close:focus-visible {
        background: color-mix(in srgb, var(--brand-on-primary) 15%, transparent);
        outline: 2px solid var(--brand-accent);
        outline-offset: 2px;
    }
    .authenticated .rail-drawer-close svg {
        inline-size: 1.2rem;
        block-size: 1.2rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
    }
    .authenticated .rail-platform-brand { padding-inline-end: 3.5rem; }
}

/* Keep the restored header search usable in drawer mode. */
@media (max-width: 1023px) {
    .authenticated .school-switcher { min-inline-size: 0; flex: 1 1 auto; }
    .authenticated .topbar-global-search { display: block; min-inline-size: 90px; }
    .authenticated .school-switcher__panel {
        inline-size: 100%;
        min-inline-size: 0;
    }
    .authenticated .school-switcher__option { flex-wrap: wrap; }
    .authenticated .school-switcher__option-name { white-space: normal; overflow-wrap: anywhere; }
}

@media (max-width: 767px) {
    .authenticated.role-admin .topbar {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        grid-template-rows: 44px 44px;
        gap: var(--s2);
        block-size: auto;
        min-block-size: 112px;
        padding-block: var(--s2);
    }
    .authenticated.role-admin .topbar > .rail-toggle { grid-column: 1; grid-row: 1; }
    .authenticated.role-admin .topbar > :is(.school-switcher, .topbar-workspace--context-chip) {
        grid-column: 2 / 4;
        grid-row: 1;
        inline-size: 100%;
        max-inline-size: none;
    }
    .authenticated.role-admin .topbar-global-search {
        grid-column: 1 / 3;
        grid-row: 2;
        inline-size: 100%;
        margin: 0;
    }
    .authenticated.role-admin .topbar-global-search input { font-size: 16px; }
    .authenticated.role-admin .topbar-utilities--authenticated { grid-column: 3; grid-row: 2; }
    .authenticated .topbar-utilities--authenticated { position: relative; }
    .authenticated .topbar-notification-fallback { position: static; }
}
.authenticated .role-rail { background: var(--brand-primary); }
.authenticated .role-rail [data-nav-icon="home"]::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010%2012%203l9%207v11h-6v-7H9v7H3Z%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010%2012%203l9%207v11h-6v-7H9v7H3Z%22%2F%3E%3C%2Fsvg%3E"); }
.authenticated .role-rail [data-nav-icon="users"]::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021v-3a6%206%200%200%201%2012%200v3M16%204a3%203%200%200%201%200%206M18%2013a5%205%200%200%201%203%205v3%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021v-3a6%206%200%200%201%2012%200v3M16%204a3%203%200%200%201%200%206M18%2013a5%205%200%200%201%203%205v3%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); }
.authenticated .role-rail [data-nav-icon="staff"]::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2021v-3a8%208%200%200%201%2016%200v3%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%226%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2021v-3a8%208%200%200%201%2016%200v3%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%226%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E"); }
.authenticated .role-rail [data-nav-icon="book"]::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%204v17M12%204C8%202%204%202%202%203v17c4-1%207-1%2010%201%203-2%206-2%2010-1V3c-2-1-6-1-10%201%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%204v17M12%204C8%202%204%202%202%203v17c4-1%207-1%2010%201%203-2%206-2%2010-1V3c-2-1-6-1-10%201%22%2F%3E%3C%2Fsvg%3E"); }
.authenticated .role-rail [data-nav-icon="enrollment"]::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%203h16v18H4ZM8%208h8M8%2012h8M8%2016h5%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%203h16v18H4ZM8%208h8M8%2012h8M8%2016h5%22%2F%3E%3C%2Fsvg%3E"); }
.authenticated .role-rail [data-nav-icon="attendance"]::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m7%2012%203%203%207-7%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m7%2012%203%203%207-7%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3C%2Fsvg%3E"); }
.authenticated .role-rail [data-nav-icon="calendar"]::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%205h18v16H3ZM3%2010h18M7%202v6M17%202v6%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%205h18v16H3ZM3%2010h18M7%202v6M17%202v6%22%2F%3E%3C%2Fsvg%3E"); }
.authenticated .role-rail [data-nav-icon="message"]::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203h18v14H8l-5%204Z%20M7%208h10M7%2012h7%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203h18v14H8l-5%204Z%20M7%208h10M7%2012h7%22%2F%3E%3C%2Fsvg%3E"); }
.authenticated .role-rail [data-nav-icon="wallet"]::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%205h18v16H3ZM3%205V3h14v2M16%2011h5v5h-5Z%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%205h18v16H3ZM3%205V3h14v2M16%2011h5v5h-5Z%22%2F%3E%3C%2Fsvg%3E"); }
.authenticated .role-rail [data-nav-icon="chart"]::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203v18h18M7%2016v-5M12%2016V6M17%2016V9%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203v18h18M7%2016v-5M12%2016V6M17%2016V9%22%2F%3E%3C%2Fsvg%3E"); }
.authenticated .role-rail [data-nav-icon="folder"]::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%204h7l2%203h9v14H3Z%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%204h7l2%203h9v14H3Z%22%2F%3E%3C%2Fsvg%3E"); }
.authenticated .role-rail [data-nav-icon="settings"]::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%203h6l1%204%204%201%201%205-4%202-1%205H9l-1-4-4-1-1-5%204-2Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%203h6l1%204%204%201%201%205-4%202-1%205H9l-1-4-4-1-1-5%204-2Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); }
.authenticated .role-rail [data-nav-icon="help"]::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%208a3%203%200%201%201%205%202c-2%201-2%202-2%204M12%2018h.01%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%208a3%203%200%201%201%205%202c-2%201-2%202-2%204M12%2018h.01%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3C%2Fsvg%3E"); }
.authenticated {
    --premium-shell-wordmark-weight: 500;
    --premium-shell-wordmark-leading: 1.1;
    --premium-shell-body-weight: 400;
    --premium-shell-footer-size: .625rem;
    --premium-shell-footer-leading: 1.5;
    --premium-shell-footer-text-margin: .875rem 0 0;
    --premium-shell-footer-margin: 1rem -.6875rem 0;
    --premium-shell-footer-padding: .75rem .6875rem 0;
    --premium-shell-motto-font: italic 1rem/1.6 Georgia,serif;
    --premium-shell-mobile-header-height: 4.375rem;
    --premium-shell-mobile-header-padding: 0 .625rem;
    --premium-shell-mobile-gap: .375rem;
    --premium-shell-mobile-search-width: 2.5rem;
    --premium-shell-mobile-school-width: 5rem;
    --premium-shell-mobile-utility-gap: .125rem;
    --premium-shell-mobile-ask-width: 2.1875rem;
    --premium-shell-brand-padding: 1.75rem .6875rem 1.4375rem;
    --premium-shell-wordmark-size: 1.9375rem;
    --premium-shell-wordmark-tracking: -.09375rem;
    --premium-shell-tagline-size: .5625rem;
    --premium-shell-tagline-width: 11rem;
    --premium-shell-tagline-leading: 1.8;
    --premium-shell-tagline-tracking: .0375rem;
    --premium-shell-nav-height: 2.75rem;
    --premium-shell-nav-padding: .6875rem .875rem;
    --premium-shell-nav-gap: .8125rem;
    --premium-shell-radius: .4375rem;
    --premium-shell-nav-size: .75rem;
    --premium-shell-eyebrow-margin: 1.125rem .875rem .4375rem;
    --premium-shell-eyebrow-tracking: .1rem;
    --premium-shell-weight-strong: 650;
    --premium-shell-art-height: 9rem;
    --premium-shell-art-padding: 1.125rem .6875rem;
    --premium-shell-art-inset: auto auto 1.5rem -2.125rem;
    --premium-shell-art-width: 8.75rem;
    --premium-shell-art-image-height: 11rem;
    --premium-shell-art-opacity: .65;
    --premium-shell-motto-width: 8.4375rem;
    --premium-shell-motto-indent: 3rem;
    --premium-shell-crest-width: 2.0625rem;
    --premium-shell-crest-height: 2.4375rem;
    --premium-shell-crest-radius: .1875rem .1875rem .8125rem .8125rem;
    --premium-shell-ask-height: 2.625rem;
    --premium-shell-ask-padding: .375rem .625rem;
    --premium-shell-ask-size: .6875rem;
    --premium-shell-ask-avatar: 1.75rem;
}
.authenticated .rail-platform-brand { display: block; padding: var(--premium-shell-brand-padding); border: 0; }
.authenticated .rail-platform-brand__logo-frame { display: none; }
.authenticated .rail-platform-brand__copy { display: block; }
.authenticated .rail-platform-brand__copy strong { display: block; font: var(--premium-shell-wordmark-weight) var(--premium-shell-wordmark-size)/var(--premium-shell-wordmark-leading) var(--font-display); letter-spacing: var(--premium-shell-wordmark-tracking); white-space: nowrap; }
.authenticated .rail-platform-brand__copy strong em { font-style: normal; color: var(--brand-accent); }
.authenticated .rail-platform-brand__copy small { display: block; margin-block-start: var(--s2); max-inline-size: var(--premium-shell-tagline-width); font-size: var(--premium-shell-tagline-size); line-height: var(--premium-shell-tagline-leading); font-weight: var(--premium-shell-body-weight); letter-spacing: var(--premium-shell-tagline-tracking); text-transform: none; }
.authenticated .role-rail .role-nav a { min-block-size: var(--premium-shell-nav-height); padding: var(--premium-shell-nav-padding); margin: var(--s1) 0; border-radius: var(--premium-shell-radius); font-size: var(--premium-shell-nav-size); font-weight: var(--premium-shell-body-weight); gap: var(--premium-shell-nav-gap); }
.authenticated .role-rail .role-nav .nav-group { display: block; margin: var(--premium-shell-eyebrow-margin); padding: 0; font-size: var(--premium-shell-tagline-size); letter-spacing: var(--premium-shell-eyebrow-tracking); font-weight: var(--premium-shell-weight-strong); text-transform: uppercase; }
.authenticated .rail-botanical { position: relative; display: block; min-block-size: var(--premium-shell-art-height); overflow: hidden; flex-shrink: 0; padding: var(--premium-shell-art-padding); margin-block-start: auto; }
.authenticated .rail-botanical img { position: absolute; inset: var(--premium-shell-art-inset); inline-size: var(--premium-shell-art-width); block-size: var(--premium-shell-art-image-height); object-fit: contain; opacity: var(--premium-shell-art-opacity); pointer-events: none; }
.authenticated .rail-botanical p { position: relative; padding: 0; margin: var(--premium-shell-footer-text-margin); font: var(--premium-shell-body-weight) var(--premium-shell-footer-size)/var(--premium-shell-footer-leading) var(--premium-body-font); }
.authenticated .rail-botanical > p:last-child { margin: var(--premium-shell-footer-margin); padding: var(--premium-shell-footer-padding); border-block-start: 1px solid var(--rail-border); }
.authenticated .rail-botanical .rail-botanical__motto { max-inline-size: var(--premium-shell-motto-width); margin: 0 0 0 var(--premium-shell-motto-indent); font: var(--premium-shell-motto-font); word-break: keep-all; }
.authenticated .topbar-workspace--context-chip .topbar-workspace__tenant-mark { inline-size: var(--premium-shell-crest-width); block-size: var(--premium-shell-crest-height); border-radius: var(--premium-shell-crest-radius); border: 1px solid var(--brand-accent); background: var(--premium-sage-soft); color: var(--brand-primary-strong); }
.authenticated .topbar-workspace__school { font-size: var(--premium-shell-nav-size); font-weight: var(--premium-shell-weight-strong); }
.authenticated .topbar-workspace__role { font-size: var(--premium-shell-tagline-size); }
.authenticated .ask-con8ct { min-block-size: var(--premium-shell-ask-height); block-size: var(--premium-shell-ask-height); border-radius: var(--premium-shell-radius); padding: var(--premium-shell-ask-padding); font-size: var(--premium-shell-ask-size); border-color: var(--brand-accent); background: var(--brand-primary); color: var(--brand-on-primary); }
.authenticated .ask-con8ct__avatar { inline-size: var(--premium-shell-ask-avatar); block-size: var(--premium-shell-ask-avatar); }
@media (min-width:1024px) {
 .authenticated .role-rail .role-nav { min-block-size: 0; overflow-y: auto; flex: 1 1 auto; }
 .authenticated[data-rail="collapsed"] .rail-platform-brand__copy,
 .authenticated[data-rail="collapsed"] .rail-botanical,
 .authenticated[data-rail="collapsed"] .role-rail .role-nav .nav-group { display: none; }
 .authenticated[data-rail="collapsed"] .rail-platform-brand__logo-frame { display: flex; }
}
@media (max-width:767px) {
 .authenticated .topbar, .authenticated.role-admin .topbar { display: flex; flex-wrap: nowrap; min-block-size: var(--premium-shell-mobile-header-height); block-size: var(--premium-shell-mobile-header-height); padding: var(--premium-shell-mobile-header-padding); gap: var(--premium-shell-mobile-gap); }
 .authenticated .topbar-global-search { flex: 0 0 var(--premium-shell-mobile-search-width); min-inline-size: 0; max-inline-size: var(--premium-shell-mobile-search-width); }
 .authenticated .topbar > :is(.school-switcher,.topbar-workspace--context-chip) { flex: 1 1 auto; min-inline-size: 0; inline-size: auto; }
 .authenticated .topbar-workspace__school { max-inline-size: var(--premium-shell-mobile-school-width); }
 .authenticated .topbar-utilities--authenticated { flex: 0 0 auto; gap: var(--premium-shell-mobile-utility-gap); }
 .authenticated .ask-con8ct { inline-size: var(--premium-shell-mobile-ask-width); padding: var(--s1); }
}
@media (max-width:430px) { .authenticated .topbar-global-search { display: none; } }

/* A pending setup session has a school label, not a portal school switcher. */
.onboarding-school-name { min-inline-size: 0; flex: 1 1 auto; overflow-wrap: anywhere; line-height: 1.35; }

/* Named trial palettes and a preview using the same primary rail as the saved portal. */
.trial-customize-shell .swatch { display: grid; justify-items: center; align-content: start; gap: .5rem; inline-size: auto; min-inline-size: 7rem; max-inline-size: 10rem; min-block-size: 5.5rem; aspect-ratio: auto; padding: .65rem; border: 2px solid var(--c-line); outline: none; border-radius: var(--r-field); background: var(--c-surface); color: var(--c-ink); font-size: .8rem; }
.trial-customize-shell .swatch[aria-pressed="true"] { border-color: var(--brand-focus); box-shadow: 0 0 0 1px var(--brand-focus); }
.trial-customize-shell .swatch:focus-visible { outline: 3px solid var(--brand-focus); outline-offset: 3px; }
.swatch__colors { display: flex; gap: .25rem; }
.swatch__colors i { inline-size: 1.65rem; block-size: 1.65rem; border-radius: 50%; border: 1px solid var(--c-line); background: var(--swatch-primary); }
.swatch__colors i:nth-child(2) { background: var(--swatch-secondary); }
.swatch__colors i:nth-child(3) { background: var(--swatch-accent); }
.trial-preview .preview-body nav { background: var(--preview-primary, var(--brand-primary)); color: var(--preview-on-primary, var(--brand-on-primary)); }
.trial-preview .preview-body nav span { color: inherit; }
.trial-preview .preview-body nav span:first-child { color: inherit; background: color-mix(in srgb, currentColor 15%, transparent); }
.trial-preview :is(.preview-logo--fallback, .preview-bars span) { color: var(--preview-on-primary, var(--brand-on-primary)); }
.applicant-dashboard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; max-inline-size: 100%; }
.school-settings-workspace [data-school-map][hidden] { display: none; }
@media (max-width: 600px) {
    .trial-customize-shell .module-choice { min-block-size: 0; grid-template-columns: auto minmax(0, 1fr); }
    .trial-preview .preview-body { grid-template-columns: 7.5rem minmax(0, 1fr); }
    .trial-preview .preview-body article { padding: 1rem; }
    .trial-preview .preview-body nav { padding: .75rem .4rem; }
    .trial-preview .preview-body nav span { padding: .42rem .3rem; word-break: normal; overflow-wrap: normal; }
}