/*
 * SDFAS theme. Colors from sdfas.org (purple text, pink/orange/blue of the logo); text colors are
 * darkened where needed for WCAG AA contrast. Font: Figtree (SIL OFL, self-hosted: the CSP allows
 * no external font), close to the school's "Fort".
 */
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-display: swap;
    font-weight: 300 900;
    src: url("../fonts/figtree-latin-wght-normal-Dj9csJy.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-display: swap;
    font-weight: 300 900;
    src: url("../fonts/figtree-latin-ext-wght-normal-iZEjIKs.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --sdfas-purple: #5b4c7d;
    --sdfas-purple-dark: #463a63;
    --sdfas-purple-soft: #efecf6;
    --sdfas-pink: #e9506e;
    --sdfas-orange: #ee7f4b;
    --sdfas-blue: #0091ce;
    --sdfas-blue-text: #00739f;
    --sdfas-teal: #00abc2;
    --sdfas-gradient: linear-gradient(90deg, var(--sdfas-blue) 0%, var(--sdfas-purple) 40%, var(--sdfas-pink) 72%, var(--sdfas-orange) 100%);

    --na-brand: var(--sdfas-purple);
    --na-accent: var(--sdfas-pink);
    --na-ink: #2b2540;
    --na-muted: #6b6385;
    /* Page background, and the tiles on it (cards, lists, tables, menus, fields): clearly apart (2026-10-27). */
    --na-bg: #e9e5f1;
    --na-surface: #fff;
    --na-shadow: 0 1px 2px rgba(43, 37, 64, .08), 0 3px 10px rgba(43, 37, 64, .07);
    /* Accent for text and highlights (lightened in the dark themes), the avatar's gradient. */
    --na-accent-text: var(--sdfas-purple);
    --na-avatar: linear-gradient(135deg, var(--sdfas-blue), var(--sdfas-purple));

    --bs-body-font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bs-body-color: var(--na-ink);
    --bs-body-color-rgb: 43, 37, 64;
    --bs-body-bg: var(--na-surface);
    --bs-secondary-color: var(--na-muted);
    --bs-emphasis-color: var(--na-ink);
    --bs-link-color: var(--sdfas-blue-text);
    --bs-link-color-rgb: 0, 115, 159;
    --bs-link-hover-color: var(--sdfas-purple);
    --bs-link-hover-color-rgb: 91, 76, 125;
    --bs-primary: var(--sdfas-purple);
    --bs-primary-rgb: 91, 76, 125;
    --bs-border-color: #dcd7e6;
    --bs-border-radius: .5rem;
    --bs-border-radius-lg: .75rem;
}

body {
    background: var(--na-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

main {
    flex: 1;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
    font-weight: 700;
    letter-spacing: -.01em;
}

h1 {
    color: var(--sdfas-purple);
}

/* ---- Header -------------------------------------------------------------------------------- */
.na-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    box-shadow: 0 4px 18px rgba(43, 37, 64, .06);
}

.na-navbar {
    --bs-navbar-nav-link-padding-x: .85rem;
    padding: .5rem 0;
}

.na-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: var(--sdfas-purple);
    margin-right: 1.5rem;
}

.na-brand:hover,
.na-brand:focus {
    color: var(--sdfas-purple-dark);
}

.na-brand img {
    height: 36px;
    width: auto;
}

.na-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.na-brand-name {
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -.01em;
}

.na-brand-school {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--na-muted);
}

.na-nav .nav-link {
    position: relative;
    color: var(--na-ink);
    font-weight: 600;
    padding: .5rem .85rem;
    border-radius: 999px;
    white-space: nowrap;
    transition: background-color .15s, color .15s;
}

.na-nav .nav-link:hover,
.na-nav .nav-link:focus-visible,
.na-nav .nav-link.show {
    color: var(--sdfas-purple);
    background: var(--sdfas-purple-soft);
}

.na-nav .nav-link.active {
    color: var(--sdfas-purple);
    background: var(--sdfas-purple-soft);
}

/* Current section: a short pink bar under the label. */
.na-nav .nav-link.active::before {
    content: "";
    position: absolute;
    left: .85rem;
    right: .85rem;
    bottom: .2rem;
    height: 3px;
    border-radius: 3px;
    background: var(--sdfas-pink);
}

.na-lang {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: #faf9fc;
}

.na-lang a {
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    color: var(--na-muted);
    text-decoration: none;
}

.na-lang a:hover {
    color: var(--sdfas-purple);
}

.na-lang a.active {
    background: var(--sdfas-purple);
    color: #fff;
}

.na-user {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .2rem .5rem .2rem .2rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--na-ink);
    font-weight: 600;
    white-space: nowrap;
}

.na-user:hover,
.na-user[aria-expanded="true"] {
    background: var(--sdfas-purple-soft);
}

.na-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    font-size: .8rem;
    font-weight: 800;
    color: #fff;
    background: var(--na-avatar);
}

.na-user-menu {
    min-width: 17rem;
}

.na-stripe {
    height: 4px;
    background: var(--sdfas-gradient);
}

@media (max-width: 1199.98px) {
    .na-nav {
        margin: .5rem 0;
    }

    .na-tools {
        padding: .5rem 0 .25rem;
        border-top: 1px solid var(--bs-border-color);
    }
}

@media (max-width: 575.98px) {
    .na-brand-school {
        display: none;
    }
}

/* ---- Footer -------------------------------------------------------------------------------- */
.na-footer {
    position: relative;
    padding: 1rem 0;
    background: #fff;
    font-size: .85rem;
    color: var(--na-muted);
}

.na-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--sdfas-gradient);
}

/* ---- Bootstrap components in the school's colors ------------------------------------------ */
.btn {
    font-weight: 600;
    border-radius: .55rem;
}

.btn-primary {
    --bs-btn-bg: var(--sdfas-purple);
    --bs-btn-border-color: var(--sdfas-purple);
    --bs-btn-hover-bg: var(--sdfas-purple-dark);
    --bs-btn-hover-border-color: var(--sdfas-purple-dark);
    --bs-btn-active-bg: color-mix(in srgb, var(--sdfas-purple-dark) 80%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--sdfas-purple-dark) 80%, #000);
    --bs-btn-disabled-bg: var(--sdfas-purple);
    --bs-btn-disabled-border-color: var(--sdfas-purple);
}

.btn-outline-primary {
    --bs-btn-color: var(--sdfas-purple);
    --bs-btn-border-color: var(--sdfas-purple);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sdfas-purple);
    --bs-btn-hover-border-color: var(--sdfas-purple);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sdfas-purple-dark);
    --bs-btn-active-border-color: var(--sdfas-purple-dark);
    --bs-btn-disabled-color: var(--sdfas-purple);
    --bs-btn-disabled-border-color: var(--sdfas-purple);
}

.btn-outline-secondary {
    --bs-btn-color: color-mix(in srgb, var(--na-ink) 85%, var(--na-muted));
    --bs-btn-border-color: color-mix(in srgb, var(--bs-border-color) 70%, var(--na-muted));
    --bs-btn-hover-color: var(--na-accent-text);
    --bs-btn-hover-bg: var(--sdfas-purple-soft);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-border-color) 45%, var(--na-muted));
    --bs-btn-active-color: var(--na-accent-text);
    --bs-btn-active-bg: color-mix(in srgb, var(--sdfas-purple) 16%, var(--bs-body-bg));
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-border-color) 45%, var(--na-muted));
}

/* Bootstrap's cyan / yellow outlines are hard to read on white: school teal and orange, darkened. */
.btn-outline-info {
    --bs-btn-color: #00737f;
    --bs-btn-border-color: var(--sdfas-teal);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #00737f;
    --bs-btn-hover-border-color: #00737f;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #005f69;
    --bs-btn-active-border-color: #005f69;
}

.btn-outline-warning {
    --bs-btn-color: #a8471a;
    --bs-btn-border-color: var(--sdfas-orange);
    --bs-btn-hover-color: var(--na-ink);
    --bs-btn-hover-bg: var(--sdfas-orange);
    --bs-btn-hover-border-color: var(--sdfas-orange);
    --bs-btn-active-color: var(--na-ink);
    --bs-btn-active-bg: #e06d37;
    --bs-btn-active-border-color: #e06d37;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: color-mix(in srgb, var(--sdfas-purple) 50%, var(--bs-body-bg));
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--sdfas-purple) 22%, transparent);
}

.form-check-input:checked {
    background-color: var(--sdfas-purple);
    border-color: var(--sdfas-purple);
}

.form-label {
    font-weight: 600;
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--sdfas-purple);
    --bs-dropdown-link-hover-bg: var(--sdfas-purple-soft);
    --bs-dropdown-border-color: var(--bs-border-color);
    padding: .4rem;
    border-radius: .75rem;
    box-shadow: 0 12px 32px rgba(43, 37, 64, .14);
}

.dropdown-item {
    border-radius: .45rem;
    padding: .45rem .75rem;
}

.dropdown-header {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.card {
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-border-radius: .75rem;
    --bs-card-inner-border-radius: calc(.75rem - 1px);
    box-shadow: var(--na-shadow);
}

a.card {
    transition: transform .15s, box-shadow .15s;
}

a.card:hover,
a.card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(43, 37, 64, .12);
}

.list-group {
    --bs-list-group-border-color: var(--bs-border-color);
    --bs-list-group-active-bg: var(--sdfas-purple);
    --bs-list-group-active-border-color: var(--sdfas-purple);
    box-shadow: var(--na-shadow);
}

.table-responsive.bg-white {
    border-color: var(--bs-border-color) !important;
    border-radius: .75rem !important;
    box-shadow: var(--na-shadow);
}

.table > thead th {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--na-muted);
}

.nav-tabs .nav-link.active {
    color: var(--sdfas-purple);
    font-weight: 600;
    border-top: 3px solid var(--sdfas-pink);
}

.progress {
    --bs-progress-bar-bg: var(--sdfas-purple);
}

.breadcrumb {
    --bs-breadcrumb-divider-color: #b0a8c6;
}

.alert {
    border-radius: .75rem;
}

/* Visible keyboard focus (WCAG 2.4.7), dark blue for contrast on white and on the purple. */
:focus-visible {
    outline: 3px solid var(--sdfas-blue-text);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    left: -9999px;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
    z-index: 2000;
    background: #fff;
    padding: .5rem 1rem;
    border-radius: .5rem;
    box-shadow: 0 4px 16px rgba(43, 37, 64, .2);
}

.login-card {
    max-width: 26rem;
}

.form-card {
    max-width: 44rem;
}

@media print {
    .na-navbar, footer, form, .btn, .breadcrumb { display: none !important; }
}

/* Multi-line texts (reasons). */
.pre-line {
    white-space: pre-line;
}

/*
 * Parents: where a child is now (portal home). A coloured dot and a state line; the colours go
 * through Bootstrap variables, which the themes redefine.
 */
.pa-child { border-left: .35rem solid var(--bs-border-color); }
.pa-child.pa-in { border-left-color: var(--bs-success); }
.pa-child.pa-out { border-left-color: var(--bs-warning); }
.pa-dot { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; background: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color); vertical-align: middle; flex: none; }
.pa-in .pa-dot { background: var(--bs-success); border-color: var(--bs-success); }
.pa-out .pa-dot { background: var(--bs-warning); border-color: var(--bs-warning); }
.pa-history { font-size: .9rem; }
.pa-history td, .pa-history th { padding: .25rem .5rem; }
.pa-actions .btn { min-height: 3rem; }
.pa-weekdays .btn { min-width: 3.25rem; }
/* Flash messages close on a click anywhere (base.html.twig). */
.na-flash { cursor: pointer; }

/*
 * ---- Colour themes -------------------------------------------------------------------------------
 * <html data-na-theme="…" data-bs-theme="light|dark"> (base.html.twig, theme_controller.js; list in
 * AppExtension::THEMES). Each theme sets the same variables: accent (--sdfas-purple and its dark
 * and soft shades), highlight (--sdfas-pink: the bar under the current menu entry), ink, muted text,
 * page background, borders, links, the header stripe and the avatar. The dark themes start from the
 * shared dark base below. Declared after :root, so these values win. A colour written as a literal
 * elsewhere in this file needs its counterpart here.
 * The same eight themes are in every app of the platform (same block in each app.css); the page
 * background is always clearly apart from the tiles (--na-bg / --na-surface).
 */

/* Ocean: deep sea blue and lagoon teal on a cool white. */
[data-na-theme="ocean"] {
    --sdfas-purple: #0e6496;
    --sdfas-purple-dark: #0a4c73;
    --sdfas-purple-soft: #e2eff7;
    --sdfas-pink: #13a3b4;
    --sdfas-gradient: linear-gradient(90deg, #0a4c73 0%, #0e6496 35%, #13a3b4 70%, #7fd6c8 100%);
    --na-avatar: linear-gradient(135deg, #13a3b4, #0e6496);
    --na-ink: #13303f;
    --na-muted: #557082;
    --na-bg: #d9e8f2;
    --bs-body-color-rgb: 19, 48, 63;
    --bs-primary-rgb: 14, 100, 150;
    --bs-border-color: #cddce7;
    --bs-link-color: #0b6f7c;
    --bs-link-color-rgb: 11, 111, 124;
    --bs-link-hover-color: #0e6496;
    --bs-link-hover-color-rgb: 14, 100, 150;
}

/* Forest: pine green and warm wheat on a sage-tinted white. */
[data-na-theme="forest"] {
    --sdfas-purple: #2d6a4f;
    --sdfas-purple-dark: #1f4d39;
    --sdfas-purple-soft: #e3f0e8;
    --sdfas-pink: #c98b4a;
    --sdfas-gradient: linear-gradient(90deg, #1f4d39 0%, #2d6a4f 35%, #74a57f 68%, #d9a865 100%);
    --na-avatar: linear-gradient(135deg, #74a57f, #2d6a4f);
    --na-ink: #1d2b24;
    --na-muted: #5b6e63;
    --na-bg: #dde9de;
    --bs-body-color-rgb: 29, 43, 36;
    --bs-primary-rgb: 45, 106, 79;
    --bs-border-color: #d0ddd2;
    --bs-link-color: #2a6b6a;
    --bs-link-color-rgb: 42, 107, 106;
    --bs-link-hover-color: #2d6a4f;
    --bs-link-hover-color-rgb: 45, 106, 79;
}

/* Sand: terracotta and saffron on a warm paper white. */
[data-na-theme="sand"] {
    --sdfas-purple: #a4472a;
    --sdfas-purple-dark: #7f341d;
    --sdfas-purple-soft: #f6e8df;
    --sdfas-pink: #e0a032;
    --sdfas-gradient: linear-gradient(90deg, #7f341d 0%, #a4472a 35%, #d08c60 68%, #e9c46a 100%);
    --na-avatar: linear-gradient(135deg, #d08c60, #a4472a);
    --na-ink: #3a2a21;
    --na-muted: #78665b;
    --na-bg: #efe2d0;
    --bs-body-color-rgb: 58, 42, 33;
    --bs-primary-rgb: 164, 71, 42;
    --bs-border-color: #e6d8c8;
    --bs-link-color: #9a4a12;
    --bs-link-color-rgb: 154, 74, 18;
    --bs-link-hover-color: #7f341d;
    --bs-link-hover-color-rgb: 127, 52, 29;
}

/* "My apps" menu, read from Nexus (apps_menu_controller.js): same look as in Nexus, the current app highlighted. */
.nx-apps-menu { min-width: 17rem; }
.nx-app { display: flex; flex-direction: column; gap: .1rem; padding-top: .45rem; padding-bottom: .45rem; border-left: .25rem solid var(--sdfas-purple); white-space: normal; }
.nx-app-name { font-weight: 600; }
.nx-app-text { font-size: .8rem; color: var(--bs-secondary-color); }
.nx-app.active .nx-app-text { color: inherit; }
.nx-app-compass { border-left-color: #1565c0; }
.nx-app-cerebro { border-left-color: #6a1b9a; }

/* The account menu's theme picker: a preview tile per theme (its own colours, whatever the current theme). */
.na-user-menu { min-width: 21rem; }
/* Phone / tablet (folded navbar): the account menu opens in the flow, under the name, full width. */
@media (max-width: 991.98px) {
    .na-tools { flex-wrap: wrap; }
    .na-tools > .dropdown { display: contents; }
    .na-tools .na-user-menu { position: static; flex-basis: 100%; min-width: 0; margin-top: .25rem; box-shadow: none; }
}
.na-themes { padding: .25rem .5rem .4rem; }
.na-themes-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.na-theme-auto {
    display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border: 1px solid var(--bs-border-color);
    border-radius: 999px; background: none; color: var(--na-muted); font-size: .75rem; font-weight: 600;
}
.na-theme-auto svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.na-theme-auto:hover { color: var(--na-accent-text); border-color: var(--na-accent-text); }
.na-theme-auto[aria-pressed="true"] { color: #fff; background: var(--sdfas-purple); border-color: var(--sdfas-purple); }
/* Four light themes on the first row, four dark ones on the second. */
.na-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.na-swatch {
    display: flex; flex-direction: column; gap: .3rem; padding: .3rem; border: 0; border-radius: .7rem;
    background: none; color: var(--bs-body-color); font-size: .75rem; font-weight: 600; text-align: center;
    transition: background-color .15s;
}
.na-swatch:hover { background: var(--bs-tertiary-bg); }
.na-swatch-preview {
    position: relative; display: block; height: 3.1rem; overflow: hidden; border-radius: .55rem;
    background: var(--sw-bg); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
    transition: transform .15s, box-shadow .15s;
}
.na-swatch:hover .na-swatch-preview { transform: translateY(-1px); }
.na-swatch-bar { position: absolute; inset: 0 0 auto; height: .45rem; background: var(--sw-bar); }
.na-swatch-card {
    position: absolute; left: .4rem; right: .4rem; bottom: .35rem; top: .85rem; display: flex; flex-direction: column;
    justify-content: center; gap: .22rem; padding: 0 .35rem; border-radius: .3rem; background: var(--sw-surface);
}
.na-swatch-line { display: block; height: .22rem; width: 75%; border-radius: 1rem; background: var(--sw-accent); }
.na-swatch-line.short { width: 45%; background: var(--sw-muted); }
.na-swatch-check {
    position: absolute; right: .25rem; top: .6rem; display: none; place-items: center; width: 1.1rem; height: 1.1rem;
    border-radius: 50%; background: var(--sw-accent); color: var(--sw-surface);
}
.na-swatch-check svg { width: .75rem; height: .75rem; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.na-swatch[aria-checked="true"] .na-swatch-preview { box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px var(--sw-accent); }
.na-swatch[aria-checked="true"] .na-swatch-check { display: grid; }
.na-swatch-sdfas { --sw-bg: #e9e5f1; --sw-surface: #fff; --sw-accent: #5b4c7d; --sw-muted: #e9506e; --sw-bar: linear-gradient(90deg, #0091ce, #5b4c7d 40%, #e9506e 72%, #ee7f4b); }
.na-swatch-ocean { --sw-bg: #d9e8f2; --sw-surface: #fff; --sw-accent: #0e6496; --sw-muted: #13a3b4; --sw-bar: linear-gradient(90deg, #0a4c73, #0e6496 35%, #13a3b4 70%, #7fd6c8); }
.na-swatch-forest { --sw-bg: #dde9de; --sw-surface: #fff; --sw-accent: #2d6a4f; --sw-muted: #c98b4a; --sw-bar: linear-gradient(90deg, #1f4d39, #2d6a4f 35%, #74a57f 68%, #d9a865); }
.na-swatch-sand { --sw-bg: #efe2d0; --sw-surface: #fff; --sw-accent: #a4472a; --sw-muted: #e0a032; --sw-bar: linear-gradient(90deg, #7f341d, #a4472a 35%, #d08c60 68%, #e9c46a); }
.na-swatch-night { --sw-bg: #0b0a10; --sw-surface: #25212f; --sw-accent: #c9bdf0; --sw-muted: #e9506e; --sw-bar: linear-gradient(90deg, #0091ce, #5b4c7d 40%, #e9506e 72%, #ee7f4b); }
.na-swatch-slate { --sw-bg: #060b16; --sw-surface: #1c2740; --sw-accent: #7cc4f5; --sw-muted: #a78bfa; --sw-bar: linear-gradient(90deg, #38bdf8, #818cf8 50%, #c084fc); }
.na-swatch-emerald { --sw-bg: #050f0b; --sw-surface: #15261f; --sw-accent: #6ee7b7; --sw-muted: #5eead4; --sw-bar: linear-gradient(90deg, #059669, #10b981 40%, #14b8a6 70%, #5eead4); }
.na-swatch-ember { --sw-bg: #100a06; --sw-surface: #241a14; --sw-accent: #fbbf77; --sw-muted: #f87171; --sw-bar: linear-gradient(90deg, #f59e0b, #f97316 50%, #ef4444); }
/* While the theme changes: a short cross-fade of the colours (theme_controller.js). */
html.na-theming, html.na-theming * {
    transition: background-color .3s ease, border-color .3s ease, color .3s ease, fill .3s ease !important;
}

/*
 * ---- Dark themes ---------------------------------------------------------------------------------
 * The shared base (Night: the school's purple, lightened for contrast on a dark background), on top
 * of Bootstrap's dark theme; Slate, Emerald and Ember below change its colours.
 */
[data-bs-theme="dark"] {
    --sdfas-purple-soft: #2f2942;
    --na-accent-text: #c9bdf0;
    --na-ink: #e8e4f1;
    --na-muted: #a8a1bc;
    --na-bg: #0b0a10;
    --na-surface: #25212f;
    --na-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 3px 10px rgba(0, 0, 0, .35);

    --bs-body-color: var(--na-ink);
    --bs-body-color-rgb: 232, 228, 241;
    --bs-body-bg: var(--na-surface);
    --bs-body-bg-rgb: 37, 33, 47;
    --bs-secondary-color: var(--na-muted);
    --bs-emphasis-color: #fff;
    --bs-secondary-bg: #332e40;
    --bs-secondary-bg-rgb: 51, 46, 64;
    --bs-tertiary-bg: #2c2838;
    --bs-tertiary-bg-rgb: 44, 40, 56;
    --bs-link-color: #5ec4ef;
    --bs-link-color-rgb: 94, 196, 239;
    --bs-link-hover-color: var(--na-accent-text);
    --bs-link-hover-color-rgb: 201, 189, 240;
    --bs-border-color: #3d374d;
}
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] .na-brand,
[data-bs-theme="dark"] .na-nav .nav-link:hover,
[data-bs-theme="dark"] .na-nav .nav-link.active,
[data-bs-theme="dark"] .na-nav .nav-link.show,
[data-bs-theme="dark"] .na-lang a:hover,
[data-bs-theme="dark"] .nav-tabs .nav-link.active { color: var(--na-accent-text); }
[data-bs-theme="dark"] .na-header,
[data-bs-theme="dark"] .na-footer { background: var(--bs-body-bg); box-shadow: 0 4px 18px rgba(0, 0, 0, .35); }
[data-bs-theme="dark"] .na-lang { background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .bg-white { background-color: var(--bs-body-bg) !important; }
[data-bs-theme="dark"] :focus-visible { outline-color: #5ec4ef; }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: var(--na-accent-text); --bs-btn-border-color: color-mix(in srgb, var(--na-accent-text) 60%, transparent); }
[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--na-ink); --bs-btn-border-color: #4a445c; --bs-btn-hover-color: var(--na-accent-text); --bs-btn-hover-border-color: #5d5673; --bs-btn-active-color: var(--na-accent-text); --bs-btn-active-bg: #3a3350; }
[data-bs-theme="dark"] .btn-outline-info { --bs-btn-color: #3bc9db; }
[data-bs-theme="dark"] .btn-outline-warning { --bs-btn-color: #ffa94d; }
[data-bs-theme="dark"] .na-swatch-preview { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
[data-bs-theme="dark"] .na-theme-auto[aria-pressed="true"] { color: var(--bs-body-bg); background: var(--na-accent-text); border-color: var(--na-accent-text); }

/* The skip link (white box) and the breadcrumb separators (light purple), on the dark tiles. */
[data-bs-theme="dark"] .skip-link:focus { background: var(--bs-body-bg); box-shadow: 0 4px 16px rgba(0, 0, 0, .5); }
[data-bs-theme="dark"] .breadcrumb { --bs-breadcrumb-divider-color: var(--na-muted); }

/* Slate: midnight blue, sky and violet; on the dark base above. */
[data-na-theme="slate"] {
    --sdfas-purple: #2f6fb0;
    --sdfas-purple-dark: #255a91;
    --sdfas-purple-soft: #1d2f4a;
    --sdfas-pink: #a78bfa;
    --sdfas-gradient: linear-gradient(90deg, #38bdf8 0%, #818cf8 50%, #c084fc 100%);
    --na-avatar: linear-gradient(135deg, #38bdf8, #818cf8);
    --na-accent-text: #7cc4f5;
    --na-ink: #e2e8f0;
    --na-muted: #94a3b8;
    --na-bg: #060b16;
    --na-surface: #1c2740;
    --bs-body-color-rgb: 226, 232, 240;
    --bs-body-bg-rgb: 28, 39, 64;
    --bs-primary-rgb: 47, 111, 176;
    --bs-secondary-bg: #2a3856;
    --bs-secondary-bg-rgb: 42, 56, 86;
    --bs-tertiary-bg: #243150;
    --bs-tertiary-bg-rgb: 36, 49, 80;
    --bs-border-color: #33425f;
    --bs-link-color: #7dd3fc;
    --bs-link-color-rgb: 125, 211, 252;
    --bs-link-hover-color: #c4b5fd;
    --bs-link-hover-color-rgb: 196, 181, 253;
}
[data-na-theme="slate"] .na-header,
[data-na-theme="slate"] .na-footer { box-shadow: 0 4px 18px rgba(0, 0, 0, .45); }

/* Emerald: emerald and teal on a deep green-black; on the dark base above. */
[data-na-theme="emerald"] {
    --sdfas-purple: #1f7a5c;
    --sdfas-purple-dark: #17614a;
    --sdfas-purple-soft: #173a2e;
    --sdfas-pink: #5eead4;
    --sdfas-gradient: linear-gradient(90deg, #059669 0%, #10b981 40%, #14b8a6 70%, #5eead4 100%);
    --na-avatar: linear-gradient(135deg, #14b8a6, #059669);
    --na-accent-text: #6ee7b7;
    --na-ink: #e2f1ea;
    --na-muted: #93b3a6;
    --na-bg: #050f0b;
    --na-surface: #15261f;
    --bs-body-color-rgb: 226, 241, 234;
    --bs-body-bg-rgb: 21, 38, 31;
    --bs-primary-rgb: 31, 122, 92;
    --bs-secondary-bg: #21382f;
    --bs-secondary-bg-rgb: 33, 56, 47;
    --bs-tertiary-bg: #1b2f27;
    --bs-tertiary-bg-rgb: 27, 47, 39;
    --bs-border-color: #2a4439;
    --bs-link-color: #5eead4;
    --bs-link-color-rgb: 94, 234, 212;
    --bs-link-hover-color: #a7f3d0;
    --bs-link-hover-color-rgb: 167, 243, 208;
}

/* Ember: amber and orange on a warm charcoal; on the dark base above. */
[data-na-theme="ember"] {
    --sdfas-purple: #b45309;
    --sdfas-purple-dark: #92400e;
    --sdfas-purple-soft: #3d2a1c;
    --sdfas-pink: #f97316;
    --sdfas-gradient: linear-gradient(90deg, #f59e0b 0%, #f97316 50%, #ef4444 100%);
    --na-avatar: linear-gradient(135deg, #f59e0b, #ea580c);
    --na-accent-text: #fbbf77;
    --na-ink: #f3e9e1;
    --na-muted: #b9a596;
    --na-bg: #100a06;
    --na-surface: #241a14;
    --bs-body-color-rgb: 243, 233, 225;
    --bs-body-bg-rgb: 36, 26, 20;
    --bs-primary-rgb: 180, 83, 9;
    --bs-secondary-bg: #34261d;
    --bs-secondary-bg-rgb: 52, 38, 29;
    --bs-tertiary-bg: #2c2019;
    --bs-tertiary-bg-rgb: 44, 32, 25;
    --bs-border-color: #45332a;
    --bs-link-color: #fcd34d;
    --bs-link-color-rgb: 252, 211, 77;
    --bs-link-hover-color: #fdba74;
    --bs-link-hover-color-rgb: 253, 186, 116;
}