/* Site-wide theme: warm cream paper, near-black ink, soft gold accent, Playfair Display headings with DM Sans text.
   Loaded on every page after custom.css. It re-points the older design tokens and classes (hero-kicker, btn-coral,
   feature, path-card, ...) at the new look, restyles Bootstrap, and holds the shared building blocks (wl-*) and
   motion used by the public pages. Page-specific extras live in welcome.css (home page). */

/* ---------- Tokens ---------- */
:root {
    --wl-paper: #f8f6f1;
    --wl-paper-deep: #efebe3;
    --wl-card: #fffdf9;
    --wl-ink: #141414;
    --wl-ink-soft: #3a3a3a;
    --wl-muted: #6b6862;
    --wl-line: #e3ddd2;
    --wl-gold: #c9a26b;
    --wl-gold-deep: #b48a52;
    --wl-gold-text: #7a5c30; /* gold dark enough for body-size text on cream (WCAG AA) */
    --wl-stone: #a8a5a0;
    --wl-night: #1b1b1b;
    --wl-serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --wl-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --wl-ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* One photo tone for the whole site, matched to images/student_sign.webp: black and white, deep blacks,
       strong contrast, highlights that stop short of pure white. */
    --wl-photo-tone: grayscale(1) contrast(1.32) brightness(0.8);
    --wl-photo-tone-card: grayscale(1) contrast(1.3) brightness(0.62);
    --wl-photo-tone-card-hover: grayscale(1) contrast(1.25) brightness(0.52);

    /* Older tokens from custom.css, re-pointed so existing pages follow the new palette. */
    --primary-color: var(--wl-ink);
    --primary: var(--wl-ink);
    --primary-rgb: 20, 20, 20;
    --ink: var(--wl-ink);
    --coral: var(--wl-gold-deep);
    --paper: var(--wl-paper);
    --paper-deep: var(--wl-paper-deep);
    --card-bg: var(--wl-card);
    --muted: var(--wl-muted);
    --line: var(--wl-line);
    --font-main: var(--wl-sans);

    /* Bootstrap */
    --bs-primary: #141414;
    --bs-primary-rgb: 20, 20, 20;
    --bs-body-font-family: var(--wl-sans);
    --bs-body-bg: var(--wl-paper);
    --bs-body-color: var(--wl-ink);
    --bs-border-color: var(--wl-line);
    --bs-secondary-color: var(--wl-muted);
    --bs-tertiary-bg: var(--wl-paper-deep);
    --bs-link-color: var(--wl-gold-text);
    --bs-link-color-rgb: 122, 92, 48;
    --bs-link-hover-color: var(--wl-ink);
    --bs-link-hover-color-rgb: 20, 20, 20;
    --bs-focus-ring-color: rgba(201, 162, 107, 0.35);
}

[data-bs-theme="dark"] {
    --wl-paper: #131313;
    --wl-paper-deep: #1d1d1d;
    --wl-card: #1a1a1a;
    --wl-ink: #f1ede6;
    --wl-ink-soft: #d6d1c8;
    --wl-muted: #a39e95;
    --wl-line: #2e2c29;
    --wl-gold-text: #d9b27c;
    --ink: #f1ede6;
    --paper: #131313;
    --paper-deep: #1d1d1d;
    --card-bg: #1a1a1a;
    --muted: #a39e95;
    --line: #2e2c29;
    --bs-body-bg: #131313;
    --bs-body-color: #ece8e1;
    --bs-border-color: #2e2c29;
    --bs-secondary-color: #a39e95;
    --bs-tertiary-bg: #1d1d1d;
    --bs-link-color: #d9b27c;
    --bs-link-color-rgb: 217, 178, 124;
    --bs-link-hover-color: #f1ede6;
    --bs-link-hover-color-rgb: 241, 237, 230;
}

/* Dim: a lighter, softer dark mode (Profile settings, Appearance). It keeps every dark-mode rule
   (data-bs-theme="dark") and only lifts the colours from near-black to warm charcoal. */
[data-bs-theme="dark"][data-theme="dim"] {
    --wl-paper: #34322f;
    --wl-paper-deep: #423f3b;
    --wl-card: #3d3a36;
    --wl-ink: #f4f0e9;
    --wl-ink-soft: #ddd7cd;
    --wl-muted: #c2bbb0;
    --wl-line: #59554e;
    --wl-gold-text: #e6c592;
    --ink: #f4f0e9;
    --paper: #34322f;
    --paper-deep: #423f3b;
    --card-bg: #3d3a36;
    --muted: #c2bbb0;
    --line: #59554e;
    --bs-body-bg: #34322f;
    --bs-body-bg-rgb: 52, 50, 47;
    --bs-body-color: #eee9e1;
    --bs-secondary-bg: #423f3b;
    --bs-tertiary-bg: #423f3b;
    --bs-border-color: #59554e;
    --bs-secondary-color: #c2bbb0;
    --bs-link-color: #e6c592;
    --bs-link-color-rgb: 230, 197, 146;
}
[data-bs-theme="dark"][data-theme="dim"] :is(.login-card, .register-card, .admin-shell) th {
    background-color: var(--wl-paper-deep);
    color: var(--wl-ink);
}
[data-bs-theme="dark"][data-theme="dim"] :is(.login-card, .register-card, .admin-shell) :is(th, td) {
    border-bottom-color: var(--wl-line);
}
[data-bs-theme="dark"][data-theme="dim"] .form-control,
[data-bs-theme="dark"][data-theme="dim"] .form-select {
    background-color: #3a3834;
    border-color: #625d55;
}

/* "Primary" text (links such as "Open section") is near-black in the light palette; use the gold link colour in the dark modes. */
[data-bs-theme="dark"] :is(.text-primary, .link-primary) { color: var(--wl-gold-text) !important; }

/* Appearance picker: Light, Dim, Dark */
.theme-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.theme-option {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; cursor: pointer;
    border: 1px solid var(--wl-line); border-radius: 12px; font-size: 0.88rem; font-weight: 600; color: var(--wl-ink);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.theme-option:hover { border-color: var(--wl-gold); }
.btn-check:checked + .theme-option { border-color: var(--wl-gold); box-shadow: 0 0 0 3px rgba(201, 162, 107, 0.35); }
.btn-check:focus-visible + .theme-option { outline: 2px solid var(--wl-gold); outline-offset: 2px; }
.theme-swatch { width: 100%; height: 30px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.12); }
.theme-option-light .theme-swatch { background: linear-gradient(135deg, #f8f6f1 55%, #c9a26b 55%); }
.theme-option-dim .theme-swatch { background: linear-gradient(135deg, #3d3a36 55%, #e6c592 55%); }
.theme-option-dark .theme-swatch { background: linear-gradient(135deg, #131313 55%, #d9b27c 55%); }

/* ---------- Type ---------- */
/* custom.css forces a system font on every element with `*`; inherit the page font instead. */
* {
    font-family: inherit;
}
body,
body.public-page,
body.authenticated-page {
    font-family: var(--wl-sans);
    background: var(--wl-paper);
    background-image: none;
    color: var(--wl-ink);
    -webkit-font-smoothing: antialiased;
}
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] body.public-page,
[data-bs-theme="dark"] body.authenticated-page {
    background: var(--wl-paper);
    color: var(--bs-body-color);
}
code, kbd, pre, samp, .font-monospace {
    font-family: var(--bs-font-monospace);
}
h1, .h1, h2, .h2, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--wl-serif);
    font-weight: 500;
    letter-spacing: -0.015em;
}
h1.fw-bold, .h1.fw-bold, h2.fw-bold, .h2.fw-bold {
    font-weight: 600 !important;
}
h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: var(--wl-sans);
    font-weight: 600;
    letter-spacing: -0.005em;
}
::selection {
    background: rgba(201, 162, 107, 0.35);
}
a {
    text-underline-offset: 3px;
}

/* ---------- Header ---------- */
header.navbar {
    min-height: 76px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background: color-mix(in srgb, var(--wl-paper) 88%, transparent) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--wl-line);
    /* The blur gives the header its own layer, so it needs a stacking level above the page content,
       or its dropdown menus (Admin, More, role preview) open underneath cards and tables. */
    position: relative;
    z-index: 1030;
}
header.navbar .dropdown-menu {
    z-index: 1040;
}
body.public-page header.navbar,
body.home-editorial header.navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
}
header.navbar.navbar-dark .navbar-brand,
header.navbar.navbar-dark .nav-link {
    color: var(--wl-ink) !important;
    text-shadow: none !important;
}
header.navbar .navbar-brand span {
    font-family: var(--wl-serif);
    font-size: 1.35rem;
    letter-spacing: -0.01em;
}
header.navbar .nav-link {
    font-size: 0.92rem;
    opacity: 0.78;
    position: relative;
    transition: opacity 200ms ease;
}
header.navbar .nav-link::after {
    content: "";
    position: absolute;
    left: var(--bs-navbar-nav-link-padding-x, 0.5rem);
    right: var(--bs-navbar-nav-link-padding-x, 0.5rem);
    bottom: 0.3rem;
    height: 1px;
    background: var(--wl-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 350ms var(--wl-ease);
}
header.navbar .nav-link.dropdown-toggle::after {
    /* keep Bootstrap's caret on dropdown toggles */
    position: static;
    height: auto;
    background: none;
    transform: none;
}
header.navbar .nav-link:hover,
header.navbar .nav-link:focus-visible,
header.navbar .nav-link.active {
    opacity: 1;
}
header.navbar .nav-link:not(.dropdown-toggle):hover::after,
header.navbar .nav-link:not(.dropdown-toggle):focus-visible::after {
    transform: scaleX(1);
}
header.navbar.navbar-dark .nav-link.text-warning {
    color: var(--wl-gold-text) !important;
    opacity: 1;
}
header.navbar.navbar-dark .nav-link.text-info {
    color: var(--wl-ink) !important;
    opacity: 1;
    font-weight: 600;
}
header.navbar .navbar-brand img {
    height: 52px;
    filter: brightness(0);
}
header.navbar .navbar-brand.logo-activating img {
    filter: brightness(0) drop-shadow(0 0 10px rgba(201, 162, 107, 0.85));
}
header.navbar.navbar-dark .navbar-toggler {
    border-color: var(--wl-line);
}
header.navbar .navbar-toggler-icon {
    filter: invert(1);
}
header.navbar .btn-nav-user {
    border: 1px solid var(--wl-line);
    border-radius: 999px;
    color: var(--wl-ink);
}
header.navbar .btn-nav-user:hover,
header.navbar .btn-nav-user:focus-visible {
    border-color: var(--wl-ink);
    color: var(--wl-ink);
    background: transparent;
}
[data-bs-theme="dark"] header.navbar .navbar-brand img,
[data-bs-theme="dark"] header.navbar .navbar-brand.logo-activating img {
    filter: none;
}
[data-bs-theme="dark"] header.navbar .navbar-toggler-icon {
    filter: none;
}
.site-announcements {
    background: var(--wl-paper);
}

/* ---------- Buttons ---------- */
.btn {
    --bs-btn-border-radius: 999px;
    --bs-btn-font-weight: 600;
    --bs-btn-focus-box-shadow: 0 0 0 0.2rem rgba(201, 162, 107, 0.4);
    transition: transform 250ms var(--wl-ease), background-color 250ms ease, border-color 250ms ease,
        color 250ms ease, box-shadow 250ms ease;
}
.btn:not(.btn-link):not(.btn-close):not(.dropdown-toggle):hover {
    transform: translateY(-1px);
}
.btn-primary {
    --bs-btn-bg: #141414;
    --bs-btn-border-color: #141414;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #000;
    --bs-btn-hover-border-color: #000;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #000;
    --bs-btn-disabled-bg: #141414;
    --bs-btn-disabled-border-color: #141414;
}
.btn-outline-primary {
    --bs-btn-color: #141414;
    --bs-btn-border-color: rgba(20, 20, 20, 0.28);
    --bs-btn-hover-bg: #141414;
    --bs-btn-hover-border-color: #141414;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #000;
    --bs-btn-disabled-color: #141414;
    --bs-btn-disabled-border-color: rgba(20, 20, 20, 0.28);
}
.btn-outline-secondary {
    --bs-btn-color: var(--wl-ink);
    --bs-btn-border-color: var(--wl-line);
    --bs-btn-hover-bg: var(--wl-paper-deep);
    --bs-btn-hover-border-color: var(--wl-ink);
    --bs-btn-hover-color: var(--wl-ink);
    --bs-btn-active-bg: var(--wl-paper-deep);
    --bs-btn-active-border-color: var(--wl-ink);
    --bs-btn-active-color: var(--wl-ink);
}
.btn-coral,
.btn-gold {
    background: var(--wl-gold);
    border-color: var(--wl-gold);
    color: #1a1a1a;
}
.btn-coral:hover,
.btn-coral:focus-visible,
.btn-gold:hover,
.btn-gold:focus-visible {
    background: var(--wl-gold-deep);
    border-color: var(--wl-gold-deep);
    color: #111;
    box-shadow: 0 14px 30px -14px rgba(180, 138, 82, 0.8);
}
.btn-paper {
    border: 1px solid rgba(20, 20, 20, 0.25);
    color: var(--wl-ink);
    background: transparent;
}
.btn-paper:hover,
.btn-paper:focus-visible {
    border-color: var(--wl-ink);
    background: transparent;
    color: var(--wl-ink);
}
.btn-editorial {
    padding: 0.95rem 1.75rem;
    font-weight: 600;
}
[data-bs-theme="dark"] .btn-primary {
    --bs-btn-bg: #f1ede6;
    --bs-btn-border-color: #f1ede6;
    --bs-btn-color: #141414;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-hover-color: #000;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-color: #000;
}
[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #f1ede6;
    --bs-btn-border-color: rgba(241, 237, 230, 0.35);
    --bs-btn-hover-bg: #f1ede6;
    --bs-btn-hover-border-color: #f1ede6;
    --bs-btn-hover-color: #141414;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-color: #000;
}
[data-bs-theme="dark"] .btn-paper {
    border-color: rgba(241, 237, 230, 0.35);
}

/* Login, register and older admin cards used square navy buttons. */
:is(.login-card, .register-card, .admin-shell) .btn,
:is(.login-card, .register-card, .admin-shell) :is(.btn-primary, .btn-secondary, .btn-editorial, .btn-paper, .btn-link, .btn-outline-primary) {
    border-radius: 999px;
    background-color: #141414;
    border-color: #141414;
}
:is(.login-card, .register-card, .admin-shell) .btn:hover,
:is(.login-card, .register-card, .admin-shell) :is(.btn-primary, .btn-secondary, .btn-editorial, .btn-paper, .btn-link, .btn-outline-primary):hover {
    background-color: #000;
    border-color: #000;
}

/* ---------- Surfaces ---------- */
.card {
    --bs-card-bg: var(--wl-card);
    --bs-card-border-color: var(--wl-line);
    --bs-card-border-radius: 16px;
    --bs-card-inner-border-radius: 15px;
    background: var(--wl-card);
    border-radius: 16px;
    box-shadow: none;
}
.card.border-0 {
    border: 1px solid var(--wl-line) !important;
}
.shadow-sm {
    box-shadow: 0 1px 2px rgba(20, 20, 20, 0.03), 0 10px 28px -20px rgba(20, 20, 20, 0.28) !important;
}
.dropdown-menu {
    --bs-dropdown-border-color: var(--wl-line);
    --bs-dropdown-border-radius: 14px;
    --bs-dropdown-link-active-bg: #141414;
    --bs-dropdown-link-hover-bg: var(--wl-paper-deep);
    background: var(--wl-card);
    box-shadow: 0 18px 40px -20px rgba(20, 20, 20, 0.35);
}
.modal-content {
    --bs-modal-border-radius: 18px;
    --bs-modal-border-color: var(--wl-line);
    background: var(--wl-card);
}
.alert {
    --bs-alert-border-radius: 14px;
}
.list-group {
    --bs-list-group-border-color: var(--wl-line);
    --bs-list-group-active-bg: #141414;
    --bs-list-group-active-border-color: #141414;
    --bs-list-group-bg: var(--wl-card);
}
.nav-pills {
    --bs-nav-pills-border-radius: 999px;
    --bs-nav-pills-link-active-bg: #141414;
}
.nav-link {
    --bs-nav-link-color: var(--wl-ink);
    --bs-nav-link-hover-color: var(--wl-gold-text);
}
.pagination {
    --bs-pagination-color: var(--wl-ink);
    --bs-pagination-active-bg: #141414;
    --bs-pagination-active-border-color: #141414;
    --bs-pagination-border-color: var(--wl-line);
}
.progress {
    --bs-progress-bar-bg: var(--wl-gold);
    --bs-progress-bg: var(--wl-paper-deep);
}
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--wl-card);
    border-color: var(--wl-line);
}

/* ---------- Forms ---------- */
.form-control,
.form-select {
    border-color: var(--wl-line);
    border-radius: 12px;
    background-color: var(--wl-card);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--wl-gold);
    box-shadow: 0 0 0 0.2rem rgba(201, 162, 107, 0.25);
}
.form-check-input:checked {
    background-color: #141414;
    border-color: #141414;
}
.form-check-input:focus {
    border-color: var(--wl-gold);
    box-shadow: 0 0 0 0.2rem rgba(201, 162, 107, 0.25);
}
.form-label {
    font-weight: 500;
}
[data-bs-theme="dark"] .form-check-input:checked {
    background-color: var(--wl-gold);
    border-color: var(--wl-gold);
}

/* ---------- Tables ---------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--wl-line);
    --bs-table-hover-bg: rgba(201, 162, 107, 0.07);
    --bs-table-striped-bg: rgba(20, 20, 20, 0.02);
}
.table > thead {
    --bs-table-bg: var(--wl-paper-deep);
    --bs-table-color: var(--wl-ink);
}
.table > thead th {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--wl-muted);
}
[data-bs-theme="dark"] .table > thead {
    --bs-table-bg: var(--wl-paper-deep);
    --bs-table-color: var(--wl-ink);
}

/* Long tables that DataTables does not page scroll inside a box; the header row stays pinned (base.html
   adds the wl-table-scroll box). Short tables look unchanged because the box only limits the height. */
.wl-table-scroll {
    max-height: min(70vh, 680px);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--wl-stone) transparent;
}
.wl-table-scroll > table {
    margin-bottom: 0;
}
.wl-table-scroll > table > thead > tr > :is(th, td) {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--wl-paper-deep);
    box-shadow: inset 0 -1px 0 var(--wl-line);
}
@media print {
    .wl-table-scroll {
        max-height: none;
        overflow: visible;
    }
}

/* Signed-in work pages (CRM, admin, dashboards) use more of a wide screen: about 80%, never narrower than
   Bootstrap's 1320px. Public pages keep the standard width, even for signed-in visitors. */
@media (min-width: 1400px) {
    body.wide-layout :is(.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl) {
        max-width: max(1320px, 80vw);
    }
}

/* Empty states and their line-art illustrations (templates/_illustration_books.html). */
.wl-empty-state {
    background: var(--wl-card);
    border: 1px solid var(--wl-line);
    border-radius: 16px;
}
.wl-books {
    max-width: 100%;
    height: auto;
    overflow: visible;
}
.wl-books :is(rect, path) {
    stroke: var(--wl-ink);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.wl-books-shadow { fill: var(--wl-paper-deep); }
.wl-books-paper, .wl-books-page { fill: var(--wl-card); }
.wl-books-spine { fill: var(--wl-paper-deep); }
.wl-books-gold { fill: var(--wl-gold); }
.wl-books-gold-soft { fill: color-mix(in srgb, var(--wl-gold) 45%, var(--wl-card)); stroke: none !important; }
.wl-books-line { fill: none; stroke: var(--wl-stone) !important; stroke-width: 1.4 !important; }
.wl-books-line-dark { stroke: color-mix(in srgb, var(--wl-ink) 55%, var(--wl-gold)) !important; }
.wl-books-ribbon { fill: var(--wl-gold); }
.wl-books-spark { fill: var(--wl-gold); stroke: none !important; transform-box: fill-box; transform-origin: center; }
.wl-books-open {
    animation: wl-book-float 4.5s ease-in-out infinite;
}
.wl-books-spark {
    animation: wl-twinkle 2.4s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}
@keyframes wl-book-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes wl-twinkle {
    0%, 100% { opacity: 0.25; transform: scale(0.7); }
    50% { opacity: 1; transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
    .wl-books-open, .wl-books-spark { animation: none !important; }
    .wl-books-spark { opacity: 1; }
}
.nav-user-gear {
    transition: transform 500ms var(--wl-ease);
}
.btn-nav-user:hover .nav-user-gear {
    transform: rotate(90deg);
}

/* ---------- Third-party widgets, in the site palette ----------
   SweetAlert2 (confirm dialogs), FullCalendar, ApexCharts, SortableJS and intro.js each ship their own colours;
   these rules and the palette in ui.js (slhPalette / slhChart) bring them into the cream, ink and gold theme,
   including dark mode. */
.wl-btn-danger { background: #b0463c; color: #fff; }
.wl-btn-danger:hover { background: #963a31; color: #fff; box-shadow: 0 14px 30px -14px rgba(150, 58, 49, 0.7); }

/* SweetAlert2 */
.swal2-container.swal2-backdrop-show {
    background: rgba(20, 20, 20, 0.45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.wl-swal.swal2-popup {
    background: var(--wl-card);
    color: var(--wl-ink);
    border: 1px solid var(--wl-line);
    border-radius: 22px;
    padding: 2rem 1.75rem 1.75rem;
    font-family: var(--wl-sans);
    width: min(30rem, calc(100vw - 2rem));
    box-shadow: 0 40px 80px -40px rgba(20, 20, 20, 0.55);
}
.wl-swal-title.swal2-title {
    font-family: var(--wl-serif);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.25;
    color: var(--wl-ink);
    padding-top: 0.4rem;
}
.wl-swal-text.swal2-html-container { color: var(--wl-muted); font-size: 0.98rem; }
.wl-swal-actions.swal2-actions { gap: 12px; margin-top: 1.6rem; }
.wl-swal .wl-btn { padding: 0.75rem 1.5rem; font-size: 0.95rem; }
.wl-swal .swal2-icon { transform: scale(0.8); margin-bottom: 0; }
.wl-swal .swal2-icon.swal2-warning { border-color: var(--wl-gold); color: var(--wl-gold-deep); }
.wl-swal .swal2-icon.swal2-question { border-color: var(--wl-stone); color: var(--wl-ink); }
.wl-swal-in { animation: wl-swal-in 380ms var(--wl-ease) both; }
.wl-swal-out { animation: wl-swal-out 200ms ease both; }
@keyframes wl-swal-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes wl-swal-out { to { opacity: 0; transform: translateY(8px) scale(0.98); } }

/* FullCalendar */
.fc {
    --fc-border-color: var(--wl-line);
    --fc-page-bg-color: var(--wl-card);
    --fc-neutral-bg-color: var(--wl-paper-deep);
    --fc-neutral-text-color: var(--wl-muted);
    --fc-today-bg-color: rgba(201, 162, 107, 0.12);
    --fc-now-indicator-color: var(--wl-gold-deep);
    --fc-event-bg-color: var(--wl-gold);
    --fc-event-border-color: var(--wl-gold);
    --fc-event-text-color: #1a1a1a;
    --fc-list-event-hover-bg-color: rgba(201, 162, 107, 0.1);
    --fc-button-text-color: var(--wl-ink);
    --fc-button-bg-color: transparent;
    --fc-button-border-color: var(--wl-line);
    --fc-button-hover-bg-color: var(--wl-paper-deep);
    --fc-button-hover-border-color: var(--wl-ink);
    --fc-button-active-bg-color: #141414;
    --fc-button-active-border-color: #141414;
    font-family: var(--wl-sans);
    color: var(--wl-ink);
}
.fc .fc-toolbar-title { font-family: var(--wl-serif); font-weight: 500; font-size: 1.5rem; }
.fc .fc-button { border-radius: 999px !important; padding: 0.4rem 0.95rem; font-weight: 600; font-size: 0.85rem; text-transform: capitalize; box-shadow: none !important; }
.fc .fc-button-group { gap: 6px; }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active { color: #fff; }
.fc .fc-col-header-cell-cushion { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wl-muted); font-weight: 600; }
.fc a { color: inherit; text-decoration: none; }
.fc .fc-daygrid-day-number { font-size: 0.85rem; color: var(--wl-muted); }
.fc .fc-day-today .fc-daygrid-day-number { color: var(--wl-ink); font-weight: 700; }
.fc .fc-event { border-radius: 8px; padding: 1px 4px; font-size: 0.8rem; cursor: pointer; transition: transform 200ms var(--wl-ease), box-shadow 200ms ease; }
.fc .fc-event:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -12px rgba(20, 20, 20, 0.5); }
.fc .fc-daygrid-dot-event .fc-event-title { font-weight: 500; }
.fc .fc-list-day-cushion { background: var(--wl-paper-deep); }
[data-bs-theme="dark"] .fc {
    --fc-button-active-bg-color: #f1ede6;
    --fc-button-active-border-color: #f1ede6;
}
[data-bs-theme="dark"] .fc .fc-button-primary:not(:disabled).fc-button-active { color: #141414; }

/* ApexCharts */
.apexcharts-tooltip.apexcharts-theme-light {
    background: var(--wl-card) !important;
    border: 1px solid var(--wl-line) !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 40px -20px rgba(20, 20, 20, 0.35) !important;
    color: var(--wl-ink);
}
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    background: var(--wl-paper-deep) !important;
    border-bottom: 1px solid var(--wl-line) !important;
    font-family: var(--wl-sans) !important;
}
.apexcharts-legend-text { font-family: var(--wl-sans) !important; }
.apexcharts-menu { background: var(--wl-card) !important; border-color: var(--wl-line) !important; border-radius: 12px !important; }

/* SortableJS */
.wl-sortable-ghost { opacity: 0.35; outline: 2px dashed var(--wl-gold); outline-offset: -2px; }
.wl-sortable-chosen { box-shadow: 0 20px 40px -24px rgba(20, 20, 20, 0.55) !important; }
.wl-sortable-drag { transform: rotate(1.5deg); }
[data-sortable-item] { cursor: grab; }
[data-sortable-item]:active { cursor: grabbing; }
.wl-drop-zone { min-height: 3rem; border-radius: 12px; transition: background-color 200ms ease; }
.wl-drop-zone.is-over { background: rgba(201, 162, 107, 0.1); }

/* intro.js */
.introjs-overlay { background: #141414 !important; }
.introjs-helperLayer {
    border-radius: 14px !important;
    box-shadow: rgba(20, 20, 20, 0.55) 0 0 0 5000px, 0 0 0 2px var(--wl-gold) !important;
}
.introjs-tooltip.wl-tour {
    background: var(--wl-card);
    color: var(--wl-ink);
    border: 1px solid var(--wl-line);
    border-radius: 18px;
    box-shadow: 0 30px 60px -30px rgba(20, 20, 20, 0.55);
    font-family: var(--wl-sans);
    min-width: 280px;
    max-width: 360px;
}
.wl-tour .introjs-tooltip-title { font-family: var(--wl-serif); font-weight: 500; font-size: 1.25rem; color: var(--wl-ink); }
.wl-tour .introjs-tooltiptext { color: var(--wl-ink-soft); line-height: 1.6; }
.wl-tour .introjs-skipbutton { color: var(--wl-muted); }
.wl-tour .introjs-button {
    border-radius: 999px;
    border: 1px solid var(--wl-line);
    background: transparent;
    color: var(--wl-ink);
    text-shadow: none;
    font-family: var(--wl-sans);
    font-weight: 600;
    padding: 0.45rem 1rem;
}
.wl-tour .introjs-button:focus { box-shadow: 0 0 0 0.2rem rgba(201, 162, 107, 0.4); }
.wl-tour .introjs-nextbutton { background: #141414; border-color: #141414; color: #fff; }
.wl-tour .introjs-nextbutton:hover { background: #000; color: #fff; }
.wl-tour .introjs-disabled { opacity: 0.4; }
.wl-tour .introjs-bullets ul li a { background: var(--wl-line); }
.wl-tour .introjs-bullets ul li a.active { background: var(--wl-gold); }
.wl-tour .introjs-progressbar { background: var(--wl-gold); }
.wl-tour .introjs-arrow.top { border-bottom-color: var(--wl-card); }
.wl-tour .introjs-arrow.bottom { border-top-color: var(--wl-card); }
.wl-tour .introjs-arrow.left { border-right-color: var(--wl-card); }
.wl-tour .introjs-arrow.right { border-left-color: var(--wl-card); }
[data-bs-theme="dark"] .wl-tour .introjs-nextbutton { background: #f1ede6; border-color: #f1ede6; color: #141414; }

/* ---------- Footers ---------- */
.site-footer {
    background: #141414;
    color: rgba(255, 255, 255, 0.78);
}
.site-footer a {
    text-decoration: none;
    opacity: 0.85;
}
.site-footer a:hover {
    opacity: 1;
    color: var(--wl-gold) !important;
}
.wl-footer {
    background: #141414;
    color: rgba(255, 255, 255, 0.78);
    padding: clamp(56px, 7vw, 90px) 0 36px;
    margin-top: auto;
}
.wl-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 40px;
}
.wl-footer-brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-family: var(--wl-serif); font-size: 1.4rem; }
.wl-footer-brand img { height: 46px; width: auto; }
.wl-footer p { font-size: 0.92rem; line-height: 1.65; max-width: 22rem; margin: 1.3rem 0; }
.wl-footer h2 { font-family: var(--wl-sans); font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin: 0.6rem 0 1.4rem; font-weight: 500; }
.wl-footer ul { list-style: none; margin: 0; padding: 0; }
.wl-footer li { margin-bottom: 0.75rem; }
.wl-footer a { color: rgba(255, 255, 255, 0.86); text-decoration: none; transition: color 200ms ease; }
.wl-footer a:hover, .wl-footer a:focus-visible { color: var(--wl-gold); }
.wl-footer-bottom {
    margin-top: 56px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
}

/* ---------- Shared building blocks ---------- */
.wl-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}
.wl-wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 48px);
}
.wl-kicker,
.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--wl-muted);
}
.wl-kicker::before,
.hero-kicker::before {
    content: "";
    flex: 0 0 auto;
    width: 40px;
    height: 1px;
    background: var(--wl-gold);
    transform-origin: left;
    transition: transform 900ms var(--wl-ease);
}
.modal .hero-kicker::before {
    width: 24px;
}
.wl-h2 {
    font-family: var(--wl-serif);
    font-weight: 500;
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 1rem 0 0;
    color: inherit;
}
.wl-lead {
    font-size: 1.12rem;
    line-height: 1.75;
    color: var(--wl-ink-soft);
    max-width: 36rem;
}
.wl-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0.95rem 1.75rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform 300ms var(--wl-ease), background-color 300ms ease, color 300ms ease,
        border-color 300ms ease, box-shadow 300ms ease;
    cursor: pointer;
}
.wl-btn:hover { transform: translateY(-2px); }
.wl-btn:focus-visible { outline: 2px solid var(--wl-gold); outline-offset: 3px; }
.wl-btn .wl-arrow { transition: transform 300ms var(--wl-ease); }
.wl-btn:hover .wl-arrow { transform: translateX(4px); }
.wl-btn-gold { background: var(--wl-gold); color: #1a1a1a; }
.wl-btn-gold:hover { background: var(--wl-gold-deep); color: #111; box-shadow: 0 14px 30px -14px rgba(180, 138, 82, 0.8); }
.wl-btn-ink { background: #141414; color: #fff; }
.wl-btn-ink:hover { background: #000; color: #fff; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.6); }
.wl-btn-line { background: transparent; color: var(--wl-ink); border-color: color-mix(in srgb, var(--wl-ink) 22%, transparent); }
.wl-btn-line:hover { border-color: var(--wl-ink); color: var(--wl-ink); }
[data-bs-theme="dark"] .wl-btn-ink { background: var(--wl-ink); color: #111; }

/* Photo cards: black-and-white photo, text slides in and the photo zooms on hover (home, school programs). */
.wl-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: clamp(40px, 5vw, 64px);
}
.wl-card {
    position: relative;
    display: block;
    min-height: 420px;
    overflow: hidden;
    background: #111;
    color: #fff;
    text-decoration: none;
    isolation: isolate;
}
.wl-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--wl-photo-tone-card);
    transform: scale(1.02);
    transition: transform 1.4s var(--wl-ease), filter 1s ease;
    z-index: -2;
}
.wl-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.78) 100%);
    z-index: -1;
    transition: background 700ms ease;
}
.wl-card-body {
    position: absolute;
    left: clamp(24px, 3vw, 40px);
    right: clamp(24px, 3vw, 40px);
    bottom: clamp(24px, 3vw, 40px);
}
.wl-card .wl-kicker { color: var(--wl-gold); font-size: 0.68rem; }
.wl-card h3 {
    font-family: var(--wl-serif);
    font-weight: 500;
    font-size: clamp(1.8rem, 2.8vw, 2.4rem);
    margin: 0.8rem 0 0;
    color: #fff;
    transition: transform 700ms var(--wl-ease);
}
.wl-card-more {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(12px);
    transition: grid-template-rows 700ms var(--wl-ease), opacity 600ms ease, transform 700ms var(--wl-ease);
}
.wl-card-more > div { overflow: hidden; }
.wl-card-more p {
    margin: 0.9rem 0 1rem;
    max-width: 28rem;
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.6;
    font-size: 0.95rem;
}
.wl-card-link { font-weight: 600; font-size: 0.92rem; display: inline-flex; gap: 8px; align-items: center; }
.wl-card:hover img,
.wl-card:focus-visible img { transform: scale(1.09); filter: var(--wl-photo-tone-card-hover); }
.wl-card:hover::after,
.wl-card:focus-visible::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0.85) 100%); }
.wl-card:hover .wl-card-more,
.wl-card:focus-visible .wl-card-more { grid-template-rows: 1fr; opacity: 1; transform: none; }
.wl-card:focus-visible { outline: 3px solid var(--wl-gold); outline-offset: 3px; }
/* Touch screens cannot hover, so the card text is always shown there. */
@media (hover: none) {
    .wl-card-more { grid-template-rows: 1fr; opacity: 1; transform: none; }
}

/* Every photo on the public pages gets the same tone (add class="no-tone" to keep an image in colour). */
:is(body.public-page, body.home-editorial) #site-container img:not(.no-tone),
img:is([src*="images.unsplash.com"], [src*="/static/images/"]):not(.no-tone):not([src*="logo"]):not([src*="icon"]),
.about-team-photo,
.about-hero-image,
.hero-image {
    filter: var(--wl-photo-tone);
}

/* ---------- Older public-page classes, restyled ---------- */
.editorial-hero {
    min-height: 0;
    padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 7vw, 100px);
    overflow: visible;
}
.editorial-hero::after {
    display: none;
}
.hero-title {
    font-family: var(--wl-serif);
    font-weight: 500;
    color: var(--wl-ink);
    font-size: clamp(3rem, 7.4vw, 6.6rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
    margin: 1.4rem 0 1.8rem;
}
.public-service-hero .hero-title {
    font-size: clamp(2.8rem, 6vw, 5.2rem);
}
.hero-title em {
    font-style: italic;
    color: var(--wl-gold);
}
.hero-copy {
    color: var(--wl-ink-soft);
    font-size: 1.12rem;
    line-height: 1.75;
}
.hero-actions {
    gap: 14px;
    margin-top: 2.2rem;
}
.hero-image {
    border-radius: 0;
    aspect-ratio: 3 / 4;
    filter: var(--wl-photo-tone);
    box-shadow: none;
}
.public-service-hero .hero-image {
    border-radius: 0;
    aspect-ratio: 4 / 3;
}
.hero-aside .small.text-muted {
    font-style: italic;
    text-align: center;
}
.section-rule {
    border-top: 1px solid var(--wl-line);
    padding-top: clamp(2.5rem, 5vw, 4.5rem);
    padding-bottom: clamp(2rem, 4vw, 3.5rem);
}
.feature {
    min-height: 0;
    border-top: 1px solid var(--wl-line);
    padding-top: 1.4rem;
}
.feature-number {
    font-family: var(--wl-serif);
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1;
    color: var(--wl-gold);
    font-variant-numeric: oldstyle-nums;
    margin-bottom: 1rem;
}
.feature h3 {
    font-family: var(--wl-serif);
    font-weight: 500;
    font-size: 1.5rem;
}
.feature p {
    color: var(--wl-muted);
    line-height: 1.7;
}
.sample-quote {
    --p: 1;
    background: color-mix(in srgb, var(--wl-night) calc(var(--p) * 100%), var(--wl-stone));
    color: color-mix(in srgb, #f4f1ea calc(var(--p) * 100%), #1a1a1a);
    border-radius: 0;
    padding: clamp(3rem, 7vw, 6rem);
}
.sample-quote blockquote {
    font-family: var(--wl-serif);
    font-weight: 500;
    font-size: clamp(1.9rem, 4vw, 3.2rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
}
.sample-quote .text-white-50 {
    color: inherit !important;
    opacity: 0.75;
}
.sample-quote .btn-paper {
    color: inherit;
    border-color: color-mix(in srgb, currentColor 35%, transparent);
}
.path-card {
    position: relative;
    padding: 1.9rem 1.7rem;
    border: 1px solid var(--wl-line);
    border-radius: 0;
    background: var(--wl-card);
    transition: transform 500ms var(--wl-ease), box-shadow 500ms ease, border-color 400ms ease;
}
.path-card::before {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    height: 2px;
    background: var(--wl-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 600ms var(--wl-ease);
}
.path-card:hover,
.path-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px -30px rgba(20, 20, 20, 0.45);
}
.path-card:hover::before,
.path-card:focus-within::before {
    transform: scaleX(1);
}
.path-card h3 {
    font-family: var(--wl-serif);
    font-weight: 500;
    font-size: 1.45rem;
}
.path-card-link {
    color: var(--wl-ink);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    gap: 8px;
    align-items: center;
}
.path-card-link span {
    transition: transform 300ms var(--wl-ease);
}
.path-card:hover .path-card-link span {
    transform: translateX(4px);
}
[data-bs-theme="dark"] .path-card,
[data-bs-theme="dark"] .path-card-link {
    background: var(--wl-card);
    color: var(--wl-ink);
}
.public-step-list li::before {
    color: var(--wl-gold);
    font-size: 1.8rem;
    font-variant-numeric: oldstyle-nums;
}
.about-mission {
    border-left-color: var(--wl-gold);
    border-radius: 0;
    background: var(--wl-card);
}
.legal-page-header h1 {
    font-size: clamp(2.2rem, 4.6vw, 3.4rem);
}
.guide-nav .list-group-item.active {
    background-color: #141414;
    border-color: #141414;
}

/* Login, register and MFA cards */
.login-card,
.register-card {
    background: var(--wl-card);
    border: 1px solid var(--wl-line);
    border-radius: 20px;
    box-shadow: 0 30px 60px -40px rgba(20, 20, 20, 0.4);
}
.login-card h1, .register-card h1,
.login-card h2,
.register-card h2 {
    font-family: var(--wl-serif);
    font-weight: 500;
    color: var(--wl-ink);
}
:is(.login-card, .register-card) .form-group label {
    color: var(--wl-ink-soft);
}
:is(.login-card, .register-card) .form-control {
    border-color: var(--wl-line);
    border-radius: 12px;
}
:is(.login-card, .register-card) .form-control:focus {
    border-color: var(--wl-gold);
}
body.login-page,
body.register-page {
    background: var(--wl-paper);
    flex-direction: column;
    gap: 1.5rem;
}
.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--wl-ink);
    text-decoration: none;
    font-family: var(--wl-serif);
    font-size: 1.3rem;
}
.auth-brand:hover { color: var(--wl-ink); }
.auth-photo {
    display: block;
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 1.4rem;
    filter: var(--wl-photo-tone);
    animation: wl-photo-in 1.2s var(--wl-ease) 0.2s both;
}
.login-card,
.register-card {
    animation: wl-fade 900ms var(--wl-ease) both;
}
:is(.login-card, .register-card) .btn.auth-secondary {
    display: block;
    margin-top: 0.75rem;
    text-align: center;
    background: transparent;
    color: var(--wl-ink);
    border: 1px solid var(--wl-line);
}
:is(.login-card, .register-card) .btn.auth-secondary:hover {
    background: transparent;
    color: var(--wl-ink);
    border-color: var(--wl-ink);
}

/* ---------- Motion ---------- */
/* Reveal on scroll (theme.js adds is-in). Also serves the older .reveal / .is-visible classes. */
.wl-reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 1s var(--wl-ease), transform 1s var(--wl-ease);
    transition-delay: calc(var(--wl-delay, 0) * 110ms);
}
.wl-reveal.is-in,
.wl-reveal.is-visible {
    opacity: 1;
    transform: none;
}
.wl-reveal .wl-kicker::before,
.wl-reveal .hero-kicker::before {
    transform: scaleX(0);
}
.wl-reveal.is-in .wl-kicker::before,
.wl-reveal.is-in .hero-kicker::before {
    transform: scaleX(1);
}
.reveal {
    transition: opacity 1s var(--wl-ease), transform 1s var(--wl-ease);
}

/* Headline words rise one by one (theme.js wraps them). Extra bottom room keeps y/g/p tails, and the
   start position is fully below that room so nothing peeks out before the word rises. */
.wl-split .wl-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.24em;
    margin-bottom: -0.24em;
}
.wl-split .wl-word > span {
    display: inline-block;
    opacity: 0;
    transform: translateY(150%);
    animation: wl-rise 1.1s var(--wl-ease) forwards;
    animation-delay: calc(var(--i) * 90ms + 150ms);
}
@keyframes wl-rise {
    0% { opacity: 0; transform: translateY(150%); }
    25% { opacity: 1; }
    100% { opacity: 1; transform: translateY(0); }
}
.wl-after-title {
    opacity: 0;
    animation: wl-fade 1.2s var(--wl-ease) forwards;
    animation-delay: var(--wl-after, 0.9s);
}
@keyframes wl-fade { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* Hero photos show at 25% right away and reach full strength as the headline finishes. */
.wl-photo-in {
    opacity: 0.25;
    animation: wl-photo-in 1.4s var(--wl-ease) 0.6s forwards;
}
@keyframes wl-photo-in {
    from { opacity: 0.25; transform: scale(0.985); }
    to { opacity: 1; transform: none; }
}

/* Words in dark quote blocks rise and brighten as the block scrolls up. */
.wl-qw {
    display: inline-block;
    opacity: 0.18;
    transform: translateY(0.45em);
    filter: blur(2px);
    transition: opacity 700ms var(--wl-ease), transform 800ms var(--wl-ease), filter 700ms ease, color 700ms ease;
}
.wl-qw.lit {
    opacity: 1;
    transform: none;
    filter: none;
    color: #fff;
}

/* Signed-in work pages: a quiet fade instead of scroll effects. */
body.authenticated-page:not(.home-editorial) #site-container {
    /* "backwards", not "both": a kept transform would trap pop-ups under their backdrop. */
    animation: wl-page-in 500ms var(--wl-ease) backwards;
}
@keyframes wl-page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Cursor ring on public pages (mouse only, decorative; theme.js adds it). */
.wl-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border: 1px solid color-mix(in srgb, var(--wl-ink) 70%, transparent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2000;
    opacity: 0;
    transition: width 300ms var(--wl-ease), height 300ms var(--wl-ease), margin 300ms var(--wl-ease),
        opacity 300ms ease, border-color 300ms ease;
}
.wl-cursor::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -2px;
    border-radius: 50%;
    background: var(--wl-ink);
}
.wl-cursor.is-on { opacity: 1; }
.wl-cursor.is-big { width: 64px; height: 64px; margin: -32px 0 0 -32px; border-color: var(--wl-gold); }
.wl-cursor.on-dark { border-color: rgba(255, 255, 255, 0.7); }
.wl-cursor.on-dark::after { background: #fff; }
@media (hover: none), (pointer: coarse) { .wl-cursor { display: none; } }

/* ---------- Small screens ---------- */
@media (max-width: 991.98px) {
    .wl-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .wl-footer-grid { grid-template-columns: 1fr; }
    .wl-cards { grid-template-columns: 1fr; }
    .wl-card { min-height: 340px; }
    .hero-title { font-size: clamp(2.6rem, 11vw, 3.6rem); }
    .sample-quote { padding: 2.2rem; }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
    .wl-reveal, .wl-after-title, .wl-photo-in, .reveal { opacity: 1 !important; transform: none !important; }
    .wl-split .wl-word > span { opacity: 1; transform: none; }
    .wl-qw { opacity: 1; transform: none; filter: none; }
    .wl-cursor { display: none; }
}

#crmCalendar .fc-event.is-done { opacity: 0.5; text-decoration: line-through; }

/* "Take the tour" replay button on dashboards that have a guided tour (static/js/tours.js). */
.wl-tour-launch {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 1010;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--wl-card);
    box-shadow: 0 12px 30px -18px rgba(20, 20, 20, 0.5);
}
@media print { .wl-tour-launch { display: none; } }

/* Sign in with Google / Microsoft (login page) */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.4rem 0 0.9rem;
    color: var(--wl-ink-soft);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--wl-line);
}
.sso-buttons {
    display: grid;
    gap: 0.6rem;
}
.login-card .btn.sso-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    background: #fff;
    color: #1f1f1f;
    border: 1px solid #747775;
    border-radius: 999px;
    font-weight: 500;
}
.login-card .btn.sso-button:hover {
    background: #f2f2f2;
    color: #1f1f1f;
}

/* ---------- Opportunity notes: one row per note, click to open (admin/_opportunity_notes_emails.html) ---------- */
.note-list { overflow: hidden; }
.note-row { display: grid; grid-template-columns: minmax(0, 1fr) 9rem 7.5rem; gap: 12px; align-items: center; padding: 10px 14px; }
.note-head { background: var(--wl-paper-deep); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.72rem; }
.note-item + .note-item, .note-head + .note-item { border-top: 1px solid var(--wl-line); }
.note-item > summary { cursor: pointer; list-style: none; }
.note-item > summary::-webkit-details-marker { display: none; }
.note-item > summary:hover, .note-item[open] > summary { background: color-mix(in srgb, var(--wl-gold) 10%, transparent); }
.note-item > summary:focus-visible { outline: 2px solid var(--wl-gold); outline-offset: -2px; }
.note-subject { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-subject::before { content: "▸"; display: inline-block; width: 1em; color: var(--wl-muted); transition: transform 0.2s ease; }
.note-item[open] .note-subject::before { transform: rotate(90deg); }
.note-detail { padding: 4px 14px 14px calc(14px + 1em); }
@media (max-width: 767.98px) {
    .note-row { grid-template-columns: minmax(0, 1fr) auto; }
    .note-row > :nth-child(2) { display: none; }
}

/* A form field reached from an Edit button glows briefly so it is easy to spot. */
.field-flash { border-radius: 10px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--wl-gold) 55%, transparent); transition: box-shadow 0.6s ease; }