/* ================================================================
   DESIGN TOKENS
================================================================ */
:root {
    --clr-bg-default: #ffffff;
    --clr-border-subtle: #C6C6C6;
    --clr-bg-surface: #f4f4f4;
    --clr-bg-surface-subtle: #e0e0e0;
    --clr-placeholder: #D9D9D9;
    --clr-bg-inverse: #161616;
    --clr-text-default: #161616;
    --clr-text-muted: #525252;
    --clr-text-subtle: #8d8d8d;
    --clr-text-inverse: #ffffff;
    --clr-border-default: #c6c6c6;
    --clr-border-subtle: #e0e0e0;
    --clr-border-strong: #393939;
    --clr-primary: #3b69a0;
    --clr-primary-dark: #32537b;
    --clr-primary-light: #6a94c8;
    --clr-primary-bg: #D2DAE5;
    --clr-collection-panel: #516c42;
    --clr-success: #198754;
    --clr-success-hover: #2aa866;
    --clr-danger: #dc3545;
    --clr-danger-hover: #e35363;
    --clr-warning: #ffc107;
    --clr-warning-hover: #e0a800;
    --font-base: 'Radio Canada', sans-serif;
    /* Override Bootstrap's body font token so every BS component inherits --font-base */
    --bs-body-font-family: var(--font-base);
    --bs-btn-font-family: var(--font-base);
    --fs-search: 2rem;
    --fs-h1: 2rem;
    --fs-h2: 1.75rem;
    --fs-h3: 1.5rem;
    --fs-h4: 1.25rem;
    --fs-body-lg: 1rem;
    --fs-body-md: 0.9375rem;
    --fs-body-sm: 0.875rem;
    --fs-body-xs: 0.75rem;
    --fs-label: 0.75rem;
    --fs-overline: 0.6875rem;
    --text-sm: var(--fs-body-sm);
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fs-heading-md: 1.25rem;
    --lh-heading: 2rem;
    --lh-body-lg: 1.5rem;
    --lh-body-sm: 1.25rem;
    --lh-label: 1rem;
    --ls-overline: 1.5px;
    --ls-h3: -1px;
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 2.5rem;
    --sp-8: 3rem;
    --sp-9: 4rem;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-pill: 9999px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.10);
    --shadow-md: 0 4px 12px rgba(0,0,0,.12);
    --navbar-h: 96px;
    --hero-h: 487px;
    --sidebar-w: 368px;
    /* Max width of the standardized (non-sidebar) main content column. */
    --content-max-w: 1440px;
}

/* Scale the large heading tokens down on smaller screens so titles don't
   over-wrap or dominate narrow viewports. All headings read from these
   variables, so overriding them here cascades everywhere. */
@media (max-width: 991.98px) {
    :root {
        --fs-h1: 1.75rem;
        --fs-h2: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    :root {
        --fs-h1: 1.5rem;
        --fs-h2: 1.375rem;
    }
}

[data-theme="dark"] {
    --clr-bg-default: #262626;
    --clr-bg-surface: #393939;
    --clr-bg-surface-subtle: #525252;
    --clr-bg-inverse: #f4f4f4;
    --clr-text-default: #f4f4f4;
    --clr-text-muted: #c6c6c6;
    --clr-text-subtle: #8d8d8d;
    --clr-text-inverse: #161616;
    --clr-border-default: #525252;
    --clr-border-subtle: #393939;
}

/* ================================================================
   BASE
================================================================ */
html { overflow-x: clip; } /* clip instead of hidden — avoids creating a fixed-position clipping context */

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--font-base);
    font-weight: var(--fw-light);
    font-size: var(--fs-body-lg);
    color: var(--clr-text-default);
    background: var(--clr-bg-surface);
    margin: 0;
    overflow-x: hidden;
}

a { color: inherit; }

/* ================================================================
   ERROR PAGES
================================================================ */
.error-page {
    min-height: calc(100vh - var(--navbar-h));
    padding: var(--sp-9) 0;
    background: var(--clr-bg-surface);
}

.error-card {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--sp-8);
    background: var(--clr-bg-default);
    border: 1px solid var(--clr-border-subtle);
    box-shadow: var(--shadow-sm);
}

.error-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: var(--sp-5);
    color: var(--clr-primary);
    background: var(--clr-primary-bg);
    border-radius: var(--radius-pill);
    font-size: 2rem;
}

.error-card__status {
    margin-bottom: var(--sp-2);
    color: var(--clr-text-muted);
    font-size: var(--fs-overline);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-overline);
    text-transform: uppercase;
}

.error-card__title {
    margin-bottom: var(--sp-4);
    color: var(--clr-text-default);
    font-size: var(--fs-h1);
    font-weight: var(--fw-medium);
}

.error-card__message {
    max-width: 56ch;
    margin-bottom: var(--sp-6);
    color: var(--clr-text-muted);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body-lg);
}

.error-card__reference {
    display: grid;
    gap: var(--sp-2);
    margin-bottom: var(--sp-6);
    padding: var(--sp-4);
    background: var(--clr-bg-surface);
    border-left: 4px solid var(--clr-primary);
}

.error-card__reference-label {
    color: var(--clr-text-muted);
    font-size: var(--fs-label);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-overline);
    text-transform: uppercase;
}

.error-card__reference code {
    color: var(--clr-text-default);
    word-break: break-word;
}

.error-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

/* ================================================================
   CARBON ICONS  (inline SVG rendered by CarbonIconTagHelper)
   The tag helper always emits class="carbon-icon" on the SVG so this
   single rule sizes every icon by default. Per-context overrides
   below tweak specific sizes without breaking the default.
================================================================ */
.carbon-icon,
svg.carbon-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em; /* optical baseline alignment, same trick as Bootstrap Icons */
    fill: currentColor;
    flex-shrink: 0;
}

/* Sort icons in table headers */
.sort-icon svg { width: 0.75rem; height: 0.75rem; }

/* Specific size overrides */
.wrcc-nav__avatar svg    { width: 1.75rem; height: 1.75rem; }
.wrcc-search__btn svg    { width: 2rem; height: 2rem; }
.wrcc-upload__icon svg   { width: 2rem;    height: 2rem; }
.wrcc-hero__adv-link svg { width: 1rem;    height: 1rem; }
svg.wrcc-nav__chevron    { width: 0.625rem; height: 0.625rem; color: var(--clr-text-inverse); }
.dropdown-item svg       { width: 1rem;    height: 1rem; }

/* Account pages */
.auth-card__icon-wrap svg  { width: 3rem;    height: 3rem; }
.auth-notice svg           { width: 1rem;    height: 1rem; }
.auth-link svg             { width: 1rem;    height: 1rem; }
.auth-input-group__eye svg { width: 1.25rem; height: 1.25rem; }

/* Sidebar */
.btn-clear-filters svg  { width: 1rem; height: 1rem; }
.btn-adv-search svg     { width: 1rem; height: 1rem; }
.filter-toggle__icon    { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }

/* ================================================================
   NAVBAR
================================================================ */
.wrcc-nav {
    background: var(--clr-bg-inverse);
    height: var(--navbar-h);
    padding: 0 var(--sp-3); /* tight on phones so the tagline has room; widened at 768px+ */
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1030;
    gap: var(--sp-5);
}

.wrcc-nav__brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    text-decoration: none;
    flex-shrink: 0;
}

.wrcc-nav__logo-text { line-height: 1.2; }

.wrcc-nav__logo-name {
    display: block;
    font-size: var(--fs-body-lg);
    font-weight: var(--fw-medium);
    color: var(--clr-text-inverse);
    white-space: nowrap;
}

.wrcc-nav__logo-sub {
    display: block;
    font-size: 0.6rem;
    font-weight: var(--fw-light);
    color: rgba(255,255,255,.7);
    line-height: 1.4;
    white-space: nowrap;
}

.wrcc-nav__links {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin-left: auto;
}

.wrcc-nav__link {
    font-size: var(--fs-body-lg);
    font-weight: var(--fw-light);
    color: var(--clr-text-inverse);
    text-decoration: none;
    padding: 0 var(--sp-3);
    height: var(--navbar-h);
    display: flex;
    align-items: center;
    position: relative;
    white-space: nowrap;
    transition: opacity .15s;
}

.wrcc-nav__link:hover { opacity: .75; color: var(--clr-text-inverse); }

/* Dropdown flyout groups (Resources, Events) */
.wrcc-nav__group {
    position: relative;
    display: flex;
    align-items: center;
}

/* Wrap the text (not the full header height) so the flyout opens just
   below the label, matching the user-menu dropdown. */
.wrcc-nav__link--parent {
    gap: var(--sp-3);
    height: auto;
    padding-top: var(--sp-2);
    padding-bottom: var(--sp-2);
}

/* Non-linking parent (e.g. Resources): a button that only opens its flyout */
button.wrcc-nav__link--parent {
    background: none;
    border: 0;
    font-family: inherit;
    cursor: default;
}

/* Reveal the Bootstrap dropdown-menu on hover/focus, matching the user menu styling */
.wrcc-nav__menu {
    top: 100%;
    left: 0;
    margin-top: 0;
    display: none;
    z-index: 1040;
}

/* :focus-visible (not :focus-within) so keyboard users can still open the menu,
   but a mouse click doesn't leave it stuck open after the pointer moves away. */
.wrcc-nav__group:hover > .wrcc-nav__menu,
.wrcc-nav__group:has(:focus-visible) > .wrcc-nav__menu { display: block; }

/* User menu: open on hover/focus too, right-aligned like its dropdown-menu-end */
#nav-user-area .dropdown-menu {
    top: 100%;
    right: 0;
    left: auto;
    margin-top: 0;
    display: none;
    z-index: 1040;
}

#nav-user-area .dropdown:hover > .dropdown-menu,
#nav-user-area .dropdown:has(:focus-visible) > .dropdown-menu { display: block; }

/*.wrcc-nav__link--active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 77px;
    height: 8px;
    background: var(--clr-primary);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}*/

.wrcc-nav__user {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    color: var(--clr-text-inverse);
    cursor: default;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
}

.wrcc-nav__user::after {
    display: none; /* suppress Bootstrap dropdown-toggle caret */
}

.wrcc-nav__avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.wrcc-nav__username {
    font-size: var(--fs-body-lg);
    font-weight: var(--fw-light);
    color: var(--clr-text-inverse);
    white-space: nowrap;
}

.wrcc-nav__toggler {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: 1px solid rgba(255,255,255,.3);
    color: var(--clr-text-inverse);
    border-radius: var(--radius-sm);
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}

/* Mobile nav drawer */
.wrcc-nav__drawer {
    display: none;
    flex-direction: column;
    background: var(--clr-bg-inverse);
    padding: var(--sp-4);
    gap: var(--sp-1);
    border-top: 1px solid rgba(255,255,255,.1);
}

.wrcc-nav__drawer.is-open { display: flex; }

.wrcc-nav__drawer .wrcc-nav__link { height: 48px; padding: 0 var(--sp-2); }

/* Non-link section labels (Resources, Events, Organizations): small muted
   caps so they read as group headings rather than tappable links. */
.wrcc-nav__drawer .wrcc-nav__drawer-heading {
    height: auto;
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    padding-bottom: var(--sp-1);
    border-top: 1px solid rgba(255,255,255,.1);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-regular);
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .6;
}
.wrcc-nav__drawer .wrcc-nav__drawer-heading:hover { opacity: .6; }

/* A top-level link straight after a group (e.g. Contact Us) gets the same
   divider so it doesn't read as part of the group above. */
.wrcc-nav__drawer .wrcc-nav__link--sub + .wrcc-nav__link:not(.wrcc-nav__link--sub):not(.wrcc-nav__drawer-heading) {
    margin-top: var(--sp-3);
    border-top: 1px solid rgba(255,255,255,.1);
}

.wrcc-nav__drawer .wrcc-nav__link--sub {
    padding-left: var(--sp-5);
    font-size: var(--fs-body-md);
    opacity: .85;
}

.wrcc-nav__drawer .wrcc-nav__link--active::after { display: none; }

.wrcc-nav__drawer .wrcc-nav__link svg { width: 1rem; height: 1rem; vertical-align: 0; }

.wrcc-nav__drawer-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,.15);
    margin: var(--sp-2) 0;
}

.wrcc-nav__drawer-user { display: none; }

.wrcc-nav__drawer-username {
    font-size: var(--fs-body-lg);
    font-weight: var(--fw-regular);
    color: var(--clr-text-inverse);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ================================================================
   HERO
================================================================ */
/* All hero variants (home, events, resources, collections) share the same
   height at every breakpoint. `min-height` is used so the Resources hero,
   which has the most content (search bar + upload + advanced-search link),
   can still expand naturally if its content exceeds the floor, while the
   content-less heroes (home, collections) and the content-light Events
   hero are guaranteed the same visual size as Resources. */
.wrcc-hero {
    position: relative;
    min-height: var(--hero-h);
    overflow: hidden;
    background: var(--clr-bg-inverse);
}

.wrcc-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Contact page hero: a decorative header graphic whose transparent, torn
   bottom edge blends into the page background. Backed with the page surface
   colour so the torn edge reads as a seamless transition into the content. */
.contact-hero {
    background: var(--clr-bg-surface);
    line-height: 0;
}

/* Pull the contact content up so it starts over the hero's transparent,
   torn lower area. The content shares the hero's background colour, so the
   overlap into the transparent zone is seamless. Scoped to the contact page
   via the hero sibling; scales with the full-bleed hero using vw. */
.contact-hero + .wrcc-layout {
    position: relative;
    z-index: 1;
    margin-top: -9vw;
}

/* Keep the overlapping content transparent so the hero image's torn edge
   (not an opaque panel) defines the boundary. The page body is already the
   same surface colour, so the rest of the page is visually unchanged. */
.contact-hero + .wrcc-layout > .wrcc-content {
    background: transparent;
}

.contact-hero__img {
    display: block;
    width: 100%;
    height: auto;
    /* Halve the banner's height vs. the image's natural 1440x779 ratio by
       doubling the aspect ratio and cropping. Anchored to the bottom so the
       torn edge that blends into the page is kept; excess sky is trimmed. */
    aspect-ratio: 1440 / 525;
    object-fit: cover;
    object-position: bottom;
}

.wrcc-hero__overlay {
    position: absolute;
    inset: 0;
    background: var(--clr-bg-inverse);
    opacity: .15;
    mix-blend-mode: multiply;
}

@media (max-width: 991.98px) {
    .wrcc-hero { min-height: 360px; }
}

@media (max-width: 575.98px) {
    .wrcc-hero { min-height: 240px; }
}

.wrcc-hero__content {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: var(--sp-5) var(--sp-4);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--sp-3);
}

/* Centered tagline overlay for the home hero. Fills the hero so the copy is
   centered both horizontally and vertically over the background image. */
.wrcc-hero__center {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-5) var(--sp-4);
    text-align: center;
}

.wrcc-hero__tagline {
    margin: 0;
    max-width: 650px;
    color: var(--clr-text-inverse);
    font-family: var(--font-base);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-h1);
    line-height: 1.3;
}

.wrcc-search {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    background: rgba(255,255,255,.9);
    border: 1px solid var(--clr-border-default);
    border-radius: var(--radius-md);
    height: 96px;
    padding: 0 var(--sp-3) 0 var(--sp-5);
    width: 100%;
    max-width: 866px;    
}

.wrcc-search__input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-base);
    font-size: var(--fs-search);
    font-weight: var(--fw-light);
    color: var(--clr-text-subtle);
    letter-spacing: 0.25px;
    padding: 0;
}

.wrcc-search__input::placeholder { color: var(--clr-text-subtle); }

.wrcc-search__btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--clr-text-muted);
    font-size: 1.25rem;
    padding: var(--sp-2);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: color .15s;
}

/* Show search icon by default; hide clear icon */
.wrcc-search__icon-clear { display: none; }
.wrcc-search__icon-search { display: flex; }

/* When input has a value, swap to clear icon */
.wrcc-search__btn--has-value .wrcc-search__icon-search { display: none; }
.wrcc-search__btn--has-value .wrcc-search__icon-clear  { display: flex; color: var(--clr-text-muted); }
.wrcc-search__btn--has-value:hover .wrcc-search__icon-clear { color: var(--clr-danger, #dc3545); }

.wrcc-hero__adv-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-5);
    font-family: var(--font-base);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    color: var(--clr-text-inverse);
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: 0.14px;
    opacity: .85;
    transition: opacity .15s;
}

.wrcc-hero__adv-link:hover { opacity: 1; color: var(--clr-text-inverse); }

.wrcc-upload {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    background: var(--clr-primary);
    border: 1px solid var(--clr-border-default);
    border-radius: var(--radius-md);
    height: 96px;
    padding: 0 var(--sp-3) 0 var(--sp-5);
    width: 100%;
    max-width: 866px;
    cursor: pointer;
    transition: background .15s;
    text-decoration: none;
    margin-top: var(--sp-5);
    opacity: .9;
}

/* Modifier: remove the top margin (used for the Events hero "Submit event"
   button, which sits at the top of the hero content with nothing above it). */
.wrcc-upload--flush-top { margin-top: 0; }

/*.wrcc-upload:hover { background: rgba(255,255,255,.95); }*/

.wrcc-upload__label {
    flex: 1;
    font-family: var(--font-base);
    font-size: var(--fs-search);
    font-weight: var(--fw-light);
    background: var(--clr-primary);
    color: #fff;
    letter-spacing: 0.25px;
}

.wrcc-upload__icon {
    font-size: 2rem;
    color: #fff;
    flex-shrink: 0;
}

.wrcc-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    width: 100%;
    max-width: 868px;
}

.wrcc-kpi {
    background: var(--clr-primary);
    opacity: .9;
    border-radius: var(--radius-sm);
    width: 138px;
    min-height: 64px;
    padding: var(--sp-2);
    color: var(--clr-text-inverse);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1px;
}

.wrcc-kpi__label {
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    line-height: var(--lh-label);
}

.wrcc-kpi__value {
    font-size: var(--fs-h4);
    font-weight: var(--fw-regular);
    line-height: var(--lh-heading);
    text-align: right;
}

/* ================================================================
   PAGE LAYOUT
================================================================ */
.wrcc-layout {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    min-height: calc(100dvh - var(--navbar-h) - var(--hero-h));
    overflow-x: hidden;
}

/* ================================================================
   SIDEBAR
================================================================ */
/* The sidebar partial is wrapped in a <form> which is the actual grid child.
   Make the form a flex column so the inner .wrcc-sidebar can stretch to the
   full height of the layout row, letting its bg reach the viewport bottom. */
.wrcc-layout > #resource-filters {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wrcc-sidebar {
    background: var(--clr-bg-surface-subtle);
    padding: var(--sp-5) var(--sp-4);
    flex: 1 1 auto;
    height: 100%;
}

.wrcc-sidebar__actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

.btn-clear-filters {
    font-family: var(--font-base);
    font-size: var(--fs-body-lg);
    font-weight: var(--fw-light);    
    background: transparent;
    border: none;
    border-radius: var(--radius-pill);
    padding: 0 var(--sp-5);
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    cursor: pointer;
    text-decoration: none;
    width: 100%;
    transition: opacity .15s;
}

/*.btn-clear-filters:hover { opacity: .85; color: var(--clr-text-inverse); }*/

.btn-adv-search {
    font-family: var(--font-base);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    color: var(--clr-text-inverse);
    background: none;
    border: none;
    padding: var(--sp-2) 0;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    cursor: pointer;
    letter-spacing: 0.14px;
}

.btn-adv-search:hover { opacity: .8; }

.wrcc-sidebar__divider {
    border: none;
    border-top: 1px solid var(--clr-border-default);
    margin: var(--sp-2) 0 var(--sp-5);
}

.filter-section { margin-bottom: var(--sp-5); }
.filter-section:last-child { margin-bottom: 0; }

.filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    height: 32px;
    cursor: pointer;
    color: var(--clr-text-muted);
}

.filter-toggle__label {
    font-family: var(--font-base);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-body-sm);
    color: var(--clr-text-muted);
}

.filter-toggle__icon {
    font-size: 0.875rem;
    color: var(--clr-text-muted);
    transition: transform .2s ease;
}

.filter-toggle[aria-expanded="false"] .filter-toggle__icon { transform: rotate(180deg); }

.filter-items {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
}

.filter-item { display: flex; align-items: flex-start; gap: var(--sp-3); }

.filter-item__check {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 0;
    accent-color: var(--clr-primary);
    cursor: pointer;
}

.filter-item__label {
    font-family: var(--font-base);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-regular);
    color: var(--clr-text-muted);
    line-height: var(--lh-label);
    cursor: pointer;
    margin: 0;
}

.filter-item__count {
    color: var(--clr-text-subtle);
}

/* ================================================================
   MAIN CONTENT
================================================================ */
/* Standardized main content column for all non-sidebar pages (detail, listing,
   submit/edit, and account pages). Capped and centered with a consistent inset.
   The sidebar layout overrides this below to fill its grid column. */
.wrcc-content {
    background: var(--clr-bg-surface);
    padding: var(--sp-5) var(--sp-4);
    min-width: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--content-max-w);
    margin-inline: auto;
}

/* Sidebar layout (e.g. Resources listing): content fills its column edge-to-edge,
   keeps the default surface, and uses the tighter inset — unchanged from before. */
.wrcc-layout:not(.wrcc-layout--no-sidebar) > .wrcc-content {
    background: var(--clr-bg-default);
    max-width: none;
    margin-inline: 0;
    padding: var(--sp-4);
}

/* ================================================================
   RESOURCE CARDS
================================================================ */
.resource-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}

/* Dim cards while the overlay is active */
.htmx-request #resource-list {
    pointer-events: none;
    opacity: 0.4;
    transition: opacity 0.15s;
}

.resource-list__load-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-5) 0;
    grid-column: 1 / -1;
}

.resource-list__load-more-btn {
    background-color: var(--clr-primary);
    border-radius: var(--radius-pill);
    color: #fff;
    padding-inline: var(--sp-5);
}

.resource-list__load-more-btn:hover,
.resource-list__load-more-btn:focus-visible {
    background-color: var(--clr-primary-hover, var(--clr-primary));
    color: #fff;
}

.resource-list__load-more-icon {
    font-size: var(--text-sm);
    margin-left: var(--sp-2);
}

.resource-list__loading {
    display: none;
    align-items: center;
    gap: var(--sp-2);
    color: var(--clr-text-muted);
    font-size: var(--text-sm);
}

.htmx-request .resource-list__loading {
    display: flex;
}

.resource-list__loading-spinner {
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid var(--clr-border-subtle);
    border-top-color: var(--clr-primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.resource-card {
    border-bottom: 2px solid var(--clr-border-subtle);
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sp-5);
    text-decoration: none;
    color: inherit;
    position: relative;
    padding: var(--sp-5) 0;
}

.resource-card--wide { grid-column: 1 / -1; }

/* Optional clickable wrapper used by collection cards on listing pages. Inherits
   the resource-card row layout so existing card visuals stay unchanged. */
.resource-card__link {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sp-5);
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.resource-card__link:hover .resource-card__title,
.resource-card__link:focus-visible .resource-card__title {
    text-decoration: underline;
}

.resource-card__img-wrap {
    flex: 0 0 130px;
    width: 130px;
    overflow: hidden;
}

.resource-card__img {
    width: 130px;
    height: 100%;
    object-fit: cover;
    display: block;
    background: var(--clr-bg-surface-subtle);
}

.resource-card__img-placeholder {
    width: 100%;
    height: 100%;
    min-height: 155px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--clr-placeholder);
    color: var(--clr-text-subtle);
}

.resource-detail-page-card__img-placeholder {
    width: 100%;
    height: 100%;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--clr-placeholder);
    color: var(--clr-text-subtle);
}

.resource-card__img-icon {
    width: 40px;
    height: 40px;
    opacity: 0.4;
    font-size: 2.5rem;
}

.resource-card--wide .resource-card__img { aspect-ratio: 16 / 5; }

.resource-card__arrow {
    position: absolute;
    bottom: calc(-1 * var(--sp-6));
    right: var(--sp-4);
    width: 48px;
    height: 48px;
    border-radius: var(--radius-pill);
    background: var(--clr-bg-default);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-text-default);
    font-size: 1rem;
    box-shadow: var(--shadow-md);
    z-index: 1;
    transition: background .2s, color .2s;
}



.resource-card__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.resource-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.resource-card__footer {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin: var(--sp-2) 0;
}

.resource-card__organization {
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    color: var(--clr-text-default);
}

.resource-card__authors {
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-regular);
    color: var(--clr-text-subtle);
}

.resource-card__read-more {
    display: inline-block;
    margin-top: var(--sp-4);
    font-size: var(--fs-body-md);
    font-weight: var(--fw-semibold);
    color: var(--clr-text-default);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

.resource-card__read-more:hover { text-decoration: underline; color: var(--clr-text-default); }

.resource-card__actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    justify-content: flex-start;
    align-self: center;
}

.resource-card__score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    width: 120px;
    padding: var(--sp-1) var(--sp-2);
    background: var(--clr-primary-bg);
    color: var(--clr-primary-dark);
    border: 1px solid var(--clr-primary);
    border-radius: var(--radius-pill);
    font-size: var(--fs-body-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    white-space: nowrap;
}

.resource-card__score svg {
    width: 0.875rem;
    height: 0.875rem;
}

.resource-card__btn {
    display: block;
    width: 150px;
    padding: var(--sp-1) var(--sp-2);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .15s;
}

.resource-card__btn--primary {
    background: var(--clr-primary);
    color: var(--clr-text-inverse);
    border: 1px solid var(--clr-primary);
}

.resource-card__btn--primary:hover { opacity: .85; }

.resource-card__btn--outline {
    background: transparent;
    color: var(--clr-border-strong);
    border: 1px solid var(--clr-border-strong);
}

.resource-card__btn--outline:hover { background: var(--clr-bg-surface); }

.resource-card__btn--remove {
    color: var(--clr-danger, #dc3545);
    border-color: var(--clr-danger, #dc3545);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1, .375rem);
}

.resource-card__btn--remove:hover {
    background: var(--clr-danger, #dc3545);
    color: #fff;
}

.resource-card__overline {
    font-size: var(--fs-overline);
    font-weight: var(--fw-regular);
    color: var(--clr-text-subtle);
    letter-spacing: var(--ls-overline);
    text-transform: uppercase;
    line-height: var(--lh-label);
}

.resource-card__type {
    font-size: var(--fs-overline);
    font-weight: var(--fw-semibold);
    color: var(--clr-text-subtle);
    letter-spacing: var(--ls-overline);
    text-transform: uppercase;
}

.resource-card__title {
    font-family: var(--font-base);
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    color: var(--clr-text-default);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-h3);
    margin: var(--sp-3) 0;
}

.resource-card__desc {
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-regular);
    color: var(--clr-text-subtle);
    line-height: var(--lh-body-sm);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

/* Preserve authored paragraph/line breaks in event listing descriptions,
   matching the event details page (.resource-detail-page__description). */
.resource-card__description--multiline {
    white-space: pre-line;
}

/* ================================================================
   SECTION HEADER
================================================================ */
.section-hd {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--sp-4);
}

.section-hd__title {
    font-family: var(--font-base);
    font-size: var(--fs-h1);
    font-weight: var(--fw-regular);
    color: var(--clr-text-default);
    margin: 0;
}

.section-hd__link {
    font-size: var(--fs-body-lg);
    font-weight: var(--fw-regular);
    color: var(--clr-primary);
    text-decoration: none;
}

.section-hd__link:hover { text-decoration: underline; color: var(--clr-primary); }

/* ================================================================
   EVENT CARDS
================================================================ */
.events-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}

.event-card {
    background: var(--clr-bg-default);
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s, transform .2s;
}

.event-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); color: inherit; }

.event-card__top {
    background: var(--clr-primary-dark);
    padding: 11px var(--sp-3) var(--sp-3);
    min-height: 160px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.event-card__date-pill {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,.15);
    border-radius: var(--radius-sm);
    padding: 2px var(--sp-3);
    width: fit-content;
}

.event-card__date {
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    color: var(--clr-text-inverse);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.event-card__desc {
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-regular);
    color: rgba(255,255,255,.85);
    line-height: var(--lh-body-sm);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.event-card__img-wrap { position: relative; flex: 1; }

.event-card__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    background: var(--clr-bg-surface-subtle);
}

.event-card__goto {
    position: absolute;
    bottom: var(--sp-3);
    right: var(--sp-3);
    width: 48px;
    height: 48px;
    border-radius: var(--radius-pill);
    background: var(--clr-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-text-inverse);
    font-size: 1rem;
    box-shadow: var(--shadow-sm);
    transition: background .2s;
}

.event-card:hover .event-card__goto { background: var(--clr-primary-dark); }

/* ================================================================
   COLLECTION CARDS
================================================================ */
.collections-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}

.collection-card {
    background: var(--clr-bg-default);
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    position: relative;
    transition: box-shadow .2s, transform .2s;
}

.collection-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); color: inherit; }

.collection-card__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    background: var(--clr-bg-surface-subtle);
}

.collection-card__goto {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    width: 48px;
    height: 48px;
    border-radius: var(--radius-pill);
    background: var(--clr-bg-default);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-text-default);
    font-size: 1rem;
    box-shadow: var(--shadow-sm);
    transition: background .2s, color .2s;
}

.collection-card:hover .collection-card__goto { background: var(--clr-primary); color: var(--clr-text-inverse); }

.collection-card__body {
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.collection-card__title {
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    color: var(--clr-text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.collection-card__desc {
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-regular);
    color: var(--clr-text-subtle);
    line-height: var(--lh-body-sm);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

/* ================================================================
   SECTION DIVIDER
================================================================ */
.section-divider {
    border: none;
    border-top: 1px solid var(--clr-border-default);
    margin: var(--sp-6) 0;
}

/* ================================================================
   AUTH PAGES
================================================================ */
.auth-page {
    background: var(--clr-bg-surface-subtle);
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-8) var(--sp-4);
}

.auth-container {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}

.auth-card {
    background: var(--clr-bg-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--sp-8) var(--sp-7);
}

.auth-card--narrow { max-width: 400px; margin: 0 auto; }

.auth-card__header { margin-bottom: var(--sp-6); }

.auth-card__title {
    font-family: var(--font-base);
    font-size: var(--fs-h2);
    font-weight: var(--fw-semibold);
    color: var(--clr-text-default);
    margin: 0 0 var(--sp-2);
}

.auth-card__sub {
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-regular);
    color: var(--clr-text-muted);
    margin: 0;
}

.auth-card__footer-text {
    text-align: center;
    font-size: var(--fs-body-sm);
    color: var(--clr-text-muted);
    margin: var(--sp-5) 0 0;
}

.auth-card__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--sp-4);
}

.auth-card__icon {
    font-size: 2.5rem;
    color: var(--clr-primary);
}

.auth-label {
    display: block;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    color: var(--clr-text-muted);
    margin-bottom: var(--sp-1);
}

.auth-input {
    font-family: var(--font-base);
    font-size: var(--fs-body-lg);
    font-weight: var(--fw-light);
    color: var(--clr-text-default);
    background: var(--clr-bg-default);
    border: 1px solid var(--clr-border-default);
    border-radius: var(--radius-sm);
    padding: var(--sp-3) var(--sp-4);
    height: 48px;
    width: 100%;
    transition: border-color .15s, box-shadow .15s;
}

.auth-input:focus {
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 3px rgba(59,105,160,.15);
    outline: none;
}

.auth-input-group {
    display: flex;
    align-items: stretch;
}

.auth-input-group .auth-input {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    border-right: none;
    flex: 1;
}

.auth-input-group .auth-input:focus { z-index: 2; position: relative; }

.auth-input-group__eye {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    flex-shrink: 0;
    background: var(--clr-bg-default);
    border: 1px solid var(--clr-border-default);
    border-left: none;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--clr-text-muted);
    cursor: pointer;
    font-size: 1rem;
    transition: color .15s, background .15s;
}

.auth-input-group__eye:hover {
    color: var(--clr-primary);
    background: var(--clr-bg-surface);
}

.auth-input-group:focus-within .auth-input-group__eye {
    border-color: var(--clr-primary);
}

.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-base);
    font-size: var(--fs-body-lg);
    font-weight: var(--fw-medium);
    color: var(--clr-text-inverse);
    background: var(--clr-primary);
    border: none;
    border-radius: var(--radius-sm);
    height: 48px;
    padding: 0 var(--sp-6);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, opacity .15s;
    letter-spacing: 0.14px;
}

.auth-btn:hover { background: var(--clr-primary-dark); color: var(--clr-text-inverse); }

.auth-link {
    color: var(--clr-primary);
    text-decoration: none;
    font-weight: var(--fw-medium);
}

.auth-link:hover { text-decoration: underline; color: var(--clr-primary-dark); }
.auth-link--sm { font-size: var(--fs-body-sm); }

.auth-validation {
    display: block;
    font-size: var(--fs-label);
    color: #da1e28;
    margin-top: var(--sp-1);
}

.auth-validation-summary.validation-summary-errors {
    background: #fff1f1;
    border: 1px solid #ffd7d9;
    border-radius: var(--radius-sm);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-body-sm);
    color: #da1e28;
}

.auth-validation-summary ul { margin: 0; padding-left: var(--sp-4); }

.auth-notice {
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-radius: var(--radius-sm);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-body-sm);
    color: #1b5e20;
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
}

.auth-notice--error {
    background: #fff1f1;
    border-color: #ffd7d9;
    color: #da1e28;
}

@media (max-width: 575.98px) {
    .auth-card { padding: var(--sp-6) var(--sp-5); }
}

/* ================================================================
   FOOTER
================================================================ */
.wrcc-footer {
    background: var(--clr-primary);
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-3);
    padding: var(--sp-4);
}

.wrcc-footer__text {
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-regular);
    color: var(--clr-text-inverse);
    margin: 0;
}

.wrcc-footer__text a { color: var(--clr-text-inverse); text-decoration: underline; }
.wrcc-footer__text a:hover { opacity: .8; }

.wrcc-footer__links {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

.wrcc-footer__links a {
    position: relative;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-regular);
    color: var(--clr-text-inverse);
    text-decoration: underline;
}

.wrcc-footer__links a:hover { opacity: .8; }

/* Bullet separator centred in the gap; positioned outside the link box so it
   isn't underlined or clickable. */
.wrcc-footer__links a + a::before {
    content: "\2022";
    position: absolute;
    left: calc(var(--sp-4) / -2);
    transform: translateX(-50%);
    color: var(--clr-text-inverse);
    pointer-events: none;
}

/* ================================================================
   RESPONSIVE
================================================================ */
@media (min-width: 576px) {
    .wrcc-kpi { width: 138px; }
}

@media (min-width: 768px) {
    .wrcc-nav { padding: 0 var(--sp-6); }
    .wrcc-hero__content { padding: var(--sp-6) var(--sp-6); }
    .wrcc-content { padding: var(--sp-6); }
    .wrcc-layout:not(.wrcc-layout--no-sidebar) > .wrcc-content { padding: var(--sp-5); }
    .resource-grid { grid-template-columns: repeat(2, 1fr); }
    .events-row { grid-template-columns: repeat(2, 1fr); }
    .collections-row { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    .wrcc-nav { padding: 0 var(--sp-9); }
    .wrcc-nav__links { display: flex; }
    .wrcc-nav__username { display: block; }
    .wrcc-nav__toggler { display: none; }
    .wrcc-layout { grid-template-columns: var(--sidebar-w) 1fr; }
    .wrcc-sidebar {       
        top: var(--navbar-h);
        padding: var(--sp-5) var(--sp-4) var(--sp-5) var(--sp-9);
    }
    .wrcc-content { padding: var(--sp-6) var(--sp-9); }
    .wrcc-layout:not(.wrcc-layout--no-sidebar) > .wrcc-content { padding: var(--sp-6); }
    .wrcc-hero__content { padding: var(--sp-9) var(--sp-9); }
    .events-row { grid-template-columns: repeat(3, 1fr); }
    .collections-row { grid-template-columns: repeat(3, 1fr); }
    .wrcc-footer { padding: var(--sp-4) var(--sp-9); }
}

@media (min-width: 1200px) {
    .events-row { grid-template-columns: repeat(3, 1fr); }
}

/* ================================================================
   SUBMIT RESOURCE FORM  (sr-form)
================================================================ */

/* No-sidebar layout variant — single column; the content column styling
   (cap, centering, inset, surface) comes from the standardized .wrcc-content. */
.wrcc-layout--no-sidebar {
    grid-template-columns: 1fr;
}

.sr-page__title {
    font-size: var(--fs-h2);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.09375rem;
    line-height: var(--lh-heading);
    color: var(--clr-text-default);
    margin-bottom: var(--sp-6);
}

/* Two-column layout: main fields + aside panel */
.sr-form__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-7);
    align-items: flex-start;
}

@media (min-width: 992px) {
    .sr-form__body {
        flex-direction: row;
        gap: var(--sp-7);
    }
}

.sr-form__main {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;          /* fill width when body stacks vertically on phones */
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.sr-form__aside {
    width: 100%;
    background: var(--clr-bg-default);
    border: 1px solid var(--clr-border-subtle);
    border-radius: var(--radius-md);
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

@media (min-width: 992px) {
    .sr-form__aside {
        width: 420px;
        flex-shrink: 0;
    }
}

/* Section headings */
.sr-section-title {
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    line-height: 1.75rem;
    color: var(--clr-text-default);
    margin: 0;
}

.sr-divider {
    height: 1px;
    background: var(--clr-border-subtle);
    border: none;
    margin: 0;
}

/* Row of fields */
.sr-row {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

@media (min-width: 576px) {
    .sr-row {
        flex-direction: row;
    }
}

/* Individual field */
.sr-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    flex: 1 1 0;
    min-width: 0;
}

.sr-label {
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    line-height: var(--lh-label);
    letter-spacing: 0.0075rem;
    color: var(--clr-text-default);
}

.sr-label__required {
    color: #da1e28;
}

.sr-hint {
    font-size: var(--fs-label);
    font-weight: var(--fw-regular);
    color: var(--clr-text-muted);
    margin: 0;
    line-height: var(--lh-label);
}

.sr-input,
.sr-select,
.sr-textarea {
    height: 3rem;
    padding: 0 var(--sp-3);
    border: 1px solid var(--clr-border-default);
    border-radius: var(--radius-sm);
    font-size: var(--fs-body-lg);
    font-family: var(--font-base);
    color: var(--clr-text-default);
    background: var(--clr-bg-default);
    width: 100%;
    outline: none;
    transition: border-color .15s;
}

.sr-input::placeholder,
.sr-textarea::placeholder {
    color: var(--clr-text-subtle);
}

.sr-input:focus,
.sr-select:focus,
.sr-textarea:focus {
    border-color: var(--clr-primary);
}

.sr-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238d8d8d' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.25rem;
}

/* When the placeholder (empty-value) option is the one selected, show the
   control's text in the muted colour so it reads like an <input> placeholder.
   Once a real option is chosen it reverts to the default text colour set on
   the shared .sr-input/.sr-select/.sr-textarea rule. */
.sr-select:has(option[value=""]:checked),
.form-select:has(option[value=""]:checked) {
    color: var(--clr-text-subtle);
}

.sr-textarea {
    height: auto;
    padding: var(--sp-3);
    resize: vertical;
    line-height: var(--lh-body-lg);
}

/* Co-author row */
.sr-coauthor-row {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

@media (min-width: 576px) {
    .sr-coauthor-row {
        flex-direction: row;
        align-items: flex-end;
    }
}

.sr-coauthor-org-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.sr-coauthor-org-row .sr-select {
    flex: 1;
    min-width: 0;
}

.sr-coauthor-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-pill);
    background: #da1e28;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: .875rem;
    line-height: 1;
    flex-shrink: 0;
    transition: background .15s;
}

.sr-coauthor-remove:hover { background: #b81922; }

.sr-add-author-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    height: 2rem;
    padding: 0 var(--sp-3);
    border-radius: var(--radius-pill);
    border: none;
    background: transparent;
    color: var(--clr-primary);
    font-size: var(--fs-body-sm);
    font-family: var(--font-base);
    cursor: pointer;
    transition: background .15s;
}

.sr-add-author-btn:hover {
    background: rgba(59, 105, 160, 0.08);
}

.sr-add-author-btn__icon {
    font-size: 1.125rem;
    font-weight: var(--fw-medium);
    line-height: 1;
}

/* Topics checkbox grid */
.sr-topic-grid {
    display: grid;
    grid-template-columns: 1fr;   /* phones: one checkbox per row */
    gap: 0.75rem var(--sp-5);
}

@media (min-width: 576px) {
    .sr-topic-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.sr-topic-label {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    cursor: pointer;
    font-size: var(--fs-body-sm);
    line-height: 1.25rem;
    color: var(--clr-text-default);
}

.sr-topic-label input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--clr-primary);
    margin-top: 0.0625rem;
}

/* Contact form: keep the opt-in checkbox labels at the default body size. */
#contact-form .sr-topic-label {
    font-size: var(--fs-body-lg);
    line-height: 1.5;
}

/* Tags input */
.sr-tags-box {
    background: var(--clr-bg-default);
    border: 1px solid var(--clr-border-default);
    border-radius: var(--radius-sm);
    min-height: 2.75rem;
    padding: var(--sp-2) var(--sp-3);
    cursor: text;
    transition: border-color .15s;
}

.sr-tags-box:focus-within {
    border-color: var(--clr-primary);
}

.sr-tags-box__pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
}

.sr-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--clr-primary);
    color: #fff;
    border-radius: 999px;
    padding: 0.2rem 0.5rem 0.2rem 0.65rem;
    font-size: var(--fs-body-sm);
    line-height: 1.3;
    white-space: nowrap;
}

.sr-tag-pill__label {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sr-tag-pill__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: inherit;
    opacity: 0.75;
    line-height: 1;
}

.sr-tag-pill__remove:hover {
    opacity: 1;
}

.sr-tag-pill__remove carbon-icon {
    width: 1rem;
    height: 1rem;
    pointer-events: none;
}

.sr-tags-box__input {
    border: none;
    outline: none;
    padding: 0;
    height: 1.75rem;
    font-size: var(--fs-body-lg);
    font-family: var(--font-base);
    color: var(--clr-text-subtle);
    background: transparent;
    min-width: 10rem;
    flex: 1;
}

/* File drop zone */
.sr-dropzone {
    background: var(--clr-bg-surface);
    border: 1px dashed var(--clr-border-default);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    text-align: center;
    padding: var(--sp-8) var(--sp-5);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.sr-dropzone:hover,
.sr-dropzone--active {
    border-color: var(--clr-primary);
    background: #edf2f8;
}

.sr-dropzone--selected {
    border-style: solid;
    border-color: var(--clr-primary);
    background: #edf2f8;
}

.sr-dropzone--error {
    border-color: #da1e28;
    background: #fff1f2;
}

.sr-dropzone__input {
    display: none;
}

.sr-dropzone__icon-wrap {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-pill);
    background: var(--clr-bg-surface-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sr-dropzone--selected .sr-dropzone__icon-wrap {
    background: var(--clr-primary);
}

.sr-dropzone--selected .sr-dropzone__icon-wrap svg {
    opacity: 1;
    stroke: #fff;
}

.sr-dropzone__icon-wrap svg {
    width: 1.25rem;
    height: 1.25rem;
    opacity: .5;
}

.sr-dropzone__primary {
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    color: var(--clr-text-muted);
    line-height: 1.25rem;
    margin: 0;
    word-break: break-all;
}

.sr-dropzone__link {
    font-size: var(--fs-body-sm);
    color: var(--clr-primary);
    line-height: 1.25rem;
    margin: 0;
}

.sr-dropzone__hint {
    font-size: var(--fs-label);
    color: var(--clr-text-subtle);
    line-height: var(--lh-label);
    margin: 0;
}

.sr-dropzone__error-msg {
    font-size: var(--fs-label);
    color: #da1e28;
    margin: var(--sp-1) 0 0;
    min-height: 1.25rem;
}

.sr-existing-asset {
    background: var(--color-surface-subtle, #f4f4f4);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: var(--radius-sm, 4px);
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-3);
    font-size: var(--fs-label);
}

.sr-existing-asset__label {
    font-weight: 600;
    margin-right: var(--sp-1);
}

.sr-existing-asset__value {
    word-break: break-all;
    color: var(--color-text-secondary);
}

.sr-existing-asset__link {
    display: inline-flex;
    align-items: center;
    word-break: break-all;
    color: var(--clr-primary);
    text-decoration: underline;
}

.sr-existing-asset__link svg { width: 1rem; height: 1rem; flex-shrink: 0; }

.sr-existing-asset__preview {
    margin-top: var(--sp-2);
}

.sr-existing-asset__preview img {
    max-width: 100%;
    max-height: 12rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border-default);
    display: block;
}


.sr-dropzone__selected-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-1);
}

.sr-dropzone__remove {
    margin-top: var(--sp-1);
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-body-sm);
    color: var(--bs-danger);
    background: transparent;
    border: 1px solid var(--bs-danger);
    border-radius: var(--radius-pill);
    cursor: pointer;
    line-height: 1.4;
}

.sr-dropzone__remove:hover {
    background: var(--bs-danger);
    color: #fff;
}

/* OR divider */
.sr-or {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: var(--sp-1) 0;
}

.sr-or__line {
    flex: 1;
    height: 1px;
    background: var(--clr-border-subtle);
}

.sr-or__text {
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    color: var(--clr-text-subtle);
}

/* Review notice box */
.sr-notice {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
    width: 100%;
    background: var(--clr-bg-default);
    border: 1px solid var(--clr-border-subtle);
    border-radius: var(--radius-md);
    padding: var(--sp-5);
    margin-top: var(--sp-6);
}

.sr-notice__title {
    font-size: var(--fs-body-lg);
    font-weight: var(--fw-semibold);
    color: var(--clr-text-subtle);
    line-height: 1.75rem;
    margin-bottom: var(--sp-3);
}

.sr-notice__list {
    padding-left: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin: 0;
}

.sr-notice__list li {
    font-size: var(--fs-body-lg);
    color: var(--clr-text-subtle);
    line-height: var(--lh-body-lg);
}

/* Terms checkbox row */
.sr-terms {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
    margin-top: var(--sp-7);
}

.sr-terms input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--clr-primary);
    margin-top: 0.125rem;
}

.sr-terms__label {
    font-size: var(--fs-body-sm);
    line-height: 1.25rem;
    color: var(--clr-text-default);
}

.sr-terms__error {
    display: block;
    font-size: var(--fs-body-sm);
    color: var(--bs-danger);
    margin-top: var(--sp-1);
}

/* Contributor Submission Checklist — grouped required checkboxes below the terms row.
   Each item reuses the .sr-terms row layout; these rules add the section headings and
   tighten the spacing between successive rows. */
.sr-checklist {
    margin-top: var(--sp-6);
}

.sr-checklist .sr-terms {
    margin-top: var(--sp-4);
}

.sr-checklist__title {
    font-size: var(--fs-body-lg);
    font-weight: var(--fw-semibold);
    color: var(--clr-text-subtle);
    line-height: 1.75rem;
    margin-top: var(--sp-7);
    margin-bottom: var(--sp-2);
}

.sr-checklist__title:first-child {
    margin-top: 0;
}

.sr-checklist__divider {
    margin-top: var(--sp-6);
}

/* Submit button */
.sr-submit-row {
    display: flex;
    gap: var(--sp-4);
    align-items: center;
    margin-top: var(--sp-6);
}

.sr-submit-btn {
    height: 3rem;
    padding: 0 var(--sp-5);
    background: var(--clr-primary);
    color: var(--clr-text-inverse);
    border: none;
    border-radius: var(--radius-pill);
    font-size: var(--fs-body-sm);
    font-family: var(--font-base);
    font-weight: var(--fw-regular);
    cursor: pointer;
    transition: background .15s;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.sr-submit-btn:hover { background: var(--clr-primary-dark); }

.sr-submit-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* Neutral/secondary variant — same pill size as the primary submit button,
   for paired actions like a modal Cancel. */
.sr-submit-btn--secondary {
    background: transparent;
    color: var(--clr-text-default);
    border: 1px solid var(--clr-border-default);
}

.sr-submit-btn--secondary:hover { background: var(--clr-bg-surface-subtle); }

.sr-submit-btn__spinner {
    display: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: sr-spin .6s linear infinite;
}

.htmx-request .sr-submit-btn__spinner,
.htmx-request.sr-submit-btn__spinner {
    display: inline-block;
}

@keyframes sr-spin {
    to { transform: rotate(360deg); }
}

/* ================================================================
   Submit Resource — confirmation page
   ================================================================ */

.sr-confirmation {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--sp-10) var(--sp-4);
    max-width: 560px;
    margin: 0 auto;
}

.sr-confirmation__icon {
    width: 4rem;
    height: 4rem;
    background: var(--clr-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--sp-5);
    color: var(--clr-text-inverse);
}

.sr-confirmation__icon svg {
    width: 2rem;
    height: 2rem;
}

.sr-confirmation__title {
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    color: var(--clr-text-primary);
    margin-bottom: var(--sp-4);
}

.sr-confirmation__body {
    font-size: var(--fs-body);
    color: var(--clr-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--sp-6);
}

/* ================================================================
   Mobile — hide desktop-only nav elements (max-width keeps specificity below the 992px restore) */
@media (max-width: 991.98px) {
    .wrcc-nav__links { display: none; }
    .wrcc-nav__username { display: none; }
    .wrcc-nav__toggler { display: flex; }
    .wrcc-nav__user { display: none; }          /* avatar+name+dropdown hidden; merged into drawer */
    .wrcc-nav__sign-in { display: none; }       /* sign-in link hidden; merged into drawer */
    .wrcc-nav { gap: var(--sp-3); }             /* tighten so brand + toggler fit narrow rows */
    .wrcc-nav__brand { flex-shrink: 1; min-width: 0; }  /* allow brand to yield space to toggler */
    .wrcc-nav__logo-text { min-width: 0; }
    .wrcc-kpi { width: calc(50% - var(--sp-1)); }
    .wrcc-search__input { font-size: var(--fs-h2); }
    .wrcc-upload__label { font-size: var(--fs-h2); }
}

@media (max-width: 575.98px) {
    /*.wrcc-nav__logo-sub { display: none; }*/      /* drop bilingual subtitle on phones so toggler isn't clipped */

    /* Compact the hero search bar + upload button so they fit phone widths */
    .wrcc-search,
    .wrcc-upload {
        height: 60px;
        gap: var(--sp-3);
        padding: 0 var(--sp-3);
    }

    .wrcc-upload { margin-top: var(--sp-3); }

    .wrcc-search__input,
    .wrcc-upload__label { font-size: 1.125rem; }

    .wrcc-search__btn svg,
    .wrcc-upload__icon svg { width: 1.5rem; height: 1.5rem; }

    .wrcc-upload__icon { font-size: 1.5rem; }
}

@media (max-width: 767.98px) {
    .resource-card {
        flex-direction: column;
        gap: var(--sp-4);
    }

    .resource-card__img-wrap {
        flex: none;
        width: 100%;
    }

    .resource-card__img {
        width: 100%;
        height: 180px;
    }

    .resource-card__img-placeholder {
        height: 180px;
        min-height: unset;
    }

    .resource-card__actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-self: stretch;
        gap: var(--sp-2);
    }

    .resource-card__btn {
        flex: 1 1 auto;
        width: auto;
    }
}

@media (max-width: 575.98px) {
    .resource-card__actions {
        flex-direction: column;
    }

    .resource-card__btn {
        width: 100%;
    }
}

/* ──────────────────────────────────────────────────────────
   Admin – Resource Review
────────────────────────────────────────────────────────── */
.admin-review {
    margin: 2rem auto;
    padding: 0 var(--sp-9);
    max-width: var(--content-max-w);
}

@media (max-width: 767.98px) {
    .admin-review { padding: 0 var(--sp-5); }   /* trim oversized side padding on tablets */
}

@media (max-width: 575.98px) {
    .admin-review { padding: 0 var(--sp-4); }   /* near full-width on phones */

    /* Stack the header action (Add user / New collection) onto its own line
       on phones instead of squishing it beside the title. */
    .admin-review__header.d-flex {
        flex-direction: column;
    }
}

.admin-review__header {
    margin-bottom: 1.5rem;
}

.admin-review__title {
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    color: var(--clr-text-default);
}

.admin-review__subtitle {
    color: var(--color-text-secondary);
    margin-top: 0.25rem;
}

/* KPI cards */
.admin-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.admin-kpi {
    border-radius: var(--radius-md);
    padding: var(--sp-4) var(--sp-5);
    color: #fff;
}

.admin-kpi__label {
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    margin-bottom: var(--sp-3);
}

.admin-kpi__value {
    font-size: 2.5rem;
    font-weight: var(--fw-semibold);
    line-height: 1;
    margin-bottom: var(--sp-1);
}

.admin-kpi__sub {
    font-size: var(--fs-label);
    opacity: 0.75;
}

.admin-kpi--pending      { background: #1e3a5f; }
.admin-kpi--published    { background: var(--clr-primary); }
.admin-kpi--rejected     { background: #c2610a; }
.admin-kpi--contributors { background: #0f766e; }

@media (max-width: 768px) {
    .admin-kpis { grid-template-columns: repeat(2, 1fr); }
}

.admin-review__filters {
    margin-bottom: 1.25rem;
}

/* ── Segmented status tabs ─────────────────────────────────── */
.admin-status-tabs {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-md, 6px);
    overflow: hidden;
    max-width: 100%;
}

.admin-status-tabs__tab {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    color: var(--color-text-secondary);
    background: var(--color-surface, #fff);
    border-right: 1px solid var(--color-border, #d1d5db);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.admin-status-tabs__tab:last-child {
    border-right: none;
}

.admin-status-tabs__tab:hover:not(.is-active) {
    background: var(--color-surface-subtle, #f4f4f4);
    color: var(--color-text-primary);
}

.admin-status-tabs__tab.is-active {
    background: var(--clr-primary, #0f62fe);
    color: #fff;
    font-weight: 600;
}

/* Responsive — on small screens keep the segmented control on one row and let
   it scroll horizontally instead of wrapping/squishing. */
@media (max-width: 576px) {
    .admin-status-tabs {
        display: flex;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;  /* momentum scroll on iOS */
        scrollbar-width: none;               /* hide scrollbar (Firefox) */
    }

    .admin-status-tabs::-webkit-scrollbar { display: none; }  /* hide scrollbar (WebKit) */

    /* Don't let tabs shrink — full label, scroll to reveal the rest. */
    .admin-status-tabs__tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

.admin-review__count {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
}

.admin-review__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    color: var(--color-text-secondary);
    text-align: center;
}

.admin-review__empty-icon {
    width: 2.5rem;
    height: 2.5rem;
}

.admin-review__table-wrapper {
    overflow-x: auto;
}

.admin-review__table {
    width: 100%;
    font-size: 0.9rem;
}

.admin-review__resource-title {
    font-weight: 600;
    color: var(--color-text-primary);
    text-decoration: underline;
}

a.admin-review__resource-title:hover {
    text-decoration: underline;
    color: var(--clr-primary, var(--color-text-primary));
}

.admin-review__resource-desc {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin: 0.25rem 0 0;
}

.admin-review__actions {
    text-align: center;
    white-space: nowrap;
}

.admin-review__approve-btn {
    background-color: var(--clr-primary);
    color: #fff;
    border: none;
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

    .admin-review__approve-btn:hover {
        background-color: var(--clr-primary-light);
        color: #fff;
    }

.admin-review__reject-btn {
    background-color: var(--clr-danger);
    color: #fff;
    border: none;
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

    .admin-review__reject-btn:hover {
        background-color: var(--clr-danger-hover);
        color: #fff;
    }

/* Unpublish action — a reversible, less destructive action than Delete, so it
   reads as a warning-yellow pill to visually distinguish it from the solid red
   Delete button that sits beside it on the events admin pages. Dark text keeps
   contrast readable on the yellow fill. */
.admin-review__unpublish-btn {
    background-color: var(--clr-warning);
    color: var(--clr-text-default);
    border: none;
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .admin-review__unpublish-btn:hover {
        background-color: var(--clr-warning-hover);
        color: var(--clr-text-default);
    }

/* ── Add-organization modal (resource submit form) ─────────────────────── */
.org-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
}

.org-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1060;
    width: min(92vw, 440px);
    background: var(--clr-bg-default);
    border-radius: var(--radius-md, 0.5rem);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    padding: 1.5rem;
}

.org-modal__title {
    font-size: var(--fs-h4, 1.25rem);
    margin: 0 0 0.5rem;
}

.org-modal__hint {
    color: var(--clr-text-muted);
    font-size: var(--fs-body-sm, 0.875rem);
    margin: 0 0 1rem;
}

.org-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

/* ── Regional network "View Map" link + image modal ────────────────────── */
.sr-map-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--clr-link, var(--clr-primary));
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: underline;
    white-space: nowrap;
    cursor: pointer;
}

.sr-map-link:hover {
    text-decoration: none;
}

.map-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1060;
    width: min(94vw, 900px);
    max-height: 92vh;
    background: var(--clr-bg-default);
    border-radius: var(--radius-md, 0.5rem);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    padding: 1rem;
}

.map-modal__close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: none;
    border: none;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--clr-text-default);
    cursor: pointer;
}

.map-modal__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(92vh - 2rem);
    object-fit: contain;
}

/* Neutral/secondary pill — same size as the approve/reject action buttons,
   for paired actions like a modal Cancel. */
.admin-review__cancel-btn {
    background-color: transparent;
    color: var(--clr-text-default);
    border: 1px solid var(--clr-border-default);
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .admin-review__cancel-btn:hover {
        background-color: var(--clr-bg-surface-subtle);
        color: var(--clr-text-default);
    }

/* Resource flags — comment shown on its own full-width row beneath each flag
   so long comments wrap naturally instead of stretching the table. */
.admin-flags__summary-row > td {
    border-bottom: none;
}

.admin-flags__comment-row > td {
    padding-top: 0;
}

.admin-flags__comment-label {
    display: block;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--clr-text-muted);
    margin-bottom: var(--sp-1);
}

.admin-flags__comment-text {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--clr-text-default);
    background-color: var(--clr-bg-surface-subtle);
    border: 1px solid var(--clr-border-subtle);
    border-radius: var(--radius-md, 0.5rem);
    padding: var(--sp-2) var(--sp-3);
}

/* ──────────────────────────────────────────────────────────
   Admin – Dashboard
────────────────────────────────────────────────────────── */
.admin-dashboard__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    margin-top: var(--sp-4);
}

@media (min-width: 768px) {
    .admin-dashboard__grid { grid-template-columns: repeat(2, 1fr); }
}

.admin-dashboard__card {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-5);
    background: var(--clr-bg-default);
    border: 1px solid var(--clr-border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s, transform .2s, border-color .2s;
}

.admin-dashboard__card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--clr-primary);
    color: inherit;
}

.admin-dashboard__card-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-pill);
    background: var(--clr-primary-bg);
    color: var(--clr-primary);
    font-size: 1.5rem;
}

.admin-dashboard__card-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.admin-dashboard__card-body {
    flex: 1;
    min-width: 0;
}

.admin-dashboard__card-title {
    margin: 0 0 var(--sp-1);
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    color: var(--clr-text-default);
}

.admin-dashboard__card-desc {
    margin: 0;
    font-size: var(--fs-body-sm);
    color: var(--clr-text-muted);
    line-height: var(--lh-body-sm);
}

.admin-dashboard__card-arrow {
    flex: 0 0 auto;
    width: 0.875rem;
    height: 0.875rem;
    color: var(--clr-text-muted);
    transition: color .2s, transform .2s;
}

.admin-dashboard__card:hover .admin-dashboard__card-arrow {
    color: var(--clr-primary);
    transform: translateX(2px);
}

/* ──────────────────────────────────────────────────────────
   Reusable Pagination
────────────────────────────────────────────────────────── */
.wrcc-pagination {
    margin: var(--sp-5) 0 var(--sp-4);
}

.wrcc-pagination .pagination {
    gap: var(--sp-1);
    flex-wrap: wrap;
}

.wrcc-pagination .page-item .page-link,
.wrcc-pagination__link {
    border: 1px solid var(--clr-border-default);
    border-radius: var(--radius-sm);
    color: var(--clr-primary);
    background-color: var(--clr-bg-default);
    padding: 0.375rem 0.65rem;
    font-size: var(--fs-body-sm);
    line-height: 1.4;
    transition: background-color 0.15s ease, color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
}

.wrcc-pagination .page-item .page-link svg {
    width: 1rem;
    height: 1rem;
}

.wrcc-pagination .page-item.active .page-link {
    background-color: var(--clr-primary);
    border-color: var(--clr-primary);
    color: #fff;
    pointer-events: none;
}

.wrcc-pagination .page-item .page-link:hover:not([aria-disabled]) {
    background-color: var(--clr-primary);
    border-color: var(--clr-primary);
    color: #fff;
}

.wrcc-pagination .page-item.disabled .page-link {
    color: var(--clr-text-subtle);
    background-color: var(--clr-bg-surface);
    border-color: var(--clr-border-subtle);
    pointer-events: none;
}

.wrcc-pagination__ellipsis {
    border-color: transparent;
    background: transparent;
    color: var(--clr-text-muted);
    pointer-events: none;
}

/* ──────────────────────────────────────────────────────────
   Saved Resources page
────────────────────────────────────────────────────────── */
/* Fills the standardized .wrcc-content column (cap + inset handled there) so
   the account list pages line up with every other non-sidebar page. */
.saved-resources {
    margin: 0;
}

.saved-resources__header {
    margin-bottom: var(--sp-5);
}

.saved-resources__title {
    /* Match the admin "Manage Resources" header (.admin-review__title). */
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--clr-text-default);
    margin: 0 0 var(--sp-1);
}

.saved-resources__subtitle {
    color: var(--clr-text-muted);
    margin: 0;
}

.saved-resources__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3, .75rem);
    padding: var(--sp-10, 3rem) var(--sp-4, 1rem);
    text-align: center;
}

.saved-resources__empty-icon {
    font-size: 3rem;
    color: var(--clr-text-muted);
    opacity: .45;
    margin-bottom: var(--sp-2, .5rem);
}

.saved-resources__empty-heading {
    font-size: var(--fs-h4, 1.25rem);
    font-weight: var(--fw-semibold, 600);
    color: var(--clr-text);
    margin: 0;
}

.saved-resources__empty-body {
    font-size: var(--fs-body-lg, 1rem);
    color: var(--clr-text-muted);
    max-width: 38ch;
    margin: 0;
    line-height: var(--lh-body, 1.5);
}

.saved-resources__browse-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2, .375rem);
    margin-top: var(--sp-3, .75rem);
    background-color: var(--clr-primary);
    color: #fff;
    padding: var(--sp-2, .5rem) var(--sp-5, 1.25rem);
    border-radius: var(--radius-pill);
    text-decoration: none;
    font-size: var(--fs-body-lg, 1rem);
    font-weight: var(--fw-medium, 500);
    transition: background-color 0.15s ease;
}

.saved-resources__browse-btn:hover {
    background-color: var(--clr-primary-dark);
    color: #fff;
}

/* ============================================================
   Status History / Audit Log
   ============================================================ */
.status-log {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--clr-border, #dee2e6);
}

.status-log__heading {
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    margin-bottom: 1rem;
    color: var(--clr-text-default);
}

.status-log__empty {
    color: var(--clr-text-muted, #6c757d);
    font-style: italic;
}

.status-log__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.status-log__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .6rem .875rem;
    border-radius: .375rem;
    border-left: 4px solid transparent;
    background-color: var(--clr-surface, #f8f9fa);
}

.status-log__item--approved {
    border-left-color: var(--clr-success, #198754);
}

.status-log__item--rejected {
    border-left-color: var(--clr-danger, #dc3545);
}

.status-log__badge {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .2em .55em;
    border-radius: .25rem;
    min-width: 5.5rem;
    text-align: center;
}

.status-log__item--approved .status-log__badge {
    background-color: var(--clr-success-subtle, #d1e7dd);
    color: var(--clr-success-emphasis, #0a3622);
}

.status-log__item--rejected .status-log__badge {
    background-color: var(--clr-danger-subtle, #f8d7da);
    color: var(--clr-danger-emphasis, #58151c);
}

.status-log__meta {
    font-size: .875rem;
    color: var(--clr-text, #212529);
}

.status-log__note {
    flex-basis: 100%;
    margin: .25rem 0 0;
    font-size: .8125rem;
    color: var(--clr-text-muted, #6c757d);
    font-style: italic;
}

/* ============================================================
   Sidebar filter — active-count badge
   ============================================================ */
.filter-toggle__label {
    display: flex;
    align-items: center;
    gap: var(--sp-2, .375rem);
}

.filter-active-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .35em;
    border-radius: var(--radius-pill, 999px);
    background-color: var(--clr-primary, #2e6da4);
    color: #fff;
    font-size: .6875rem;
    font-weight: var(--fw-semibold, 600);
    line-height: 1;
}

/* ============================================================
   Resource list — search/filter loading overlay
   ============================================================ */
.resource-list-wrapper {
    position: relative;
}

.resource-list-loading {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md, .5rem);
}

.htmx-request .resource-list-loading,
.htmx-request.resource-list-loading {
    display: flex;
}

.resource-list-loading__spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--clr-border-subtle);
    border-top-color: var(--clr-primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* ============================================================
   Resource results bar
   ============================================================ */
.resource-results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3, .75rem);
    margin-bottom: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--clr-border-subtle);
}

.resource-results-count {
    color: var(--clr-primary);
    font-weight: 700;
    font-size: 0.95rem;
}

/* Right-hand group in the results bar: count paired with the sort control. */
.resource-results-bar__end {
    display: flex;
    align-items: center;
    gap: var(--sp-3, .75rem);
    flex-wrap: wrap;
}

/* Sort <select> shown on the collection details page. */
.resource-sort {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2, .5rem);
}

.resource-sort__label {
    color: var(--clr-text-subtle);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.resource-sort__select {
    padding: .375rem 2rem .375rem .625rem;
    border: 1px solid var(--clr-border-subtle);
    border-radius: 6px;
    background-color: var(--clr-surface, #fff);
    color: var(--clr-text, inherit);
    font-size: 0.875rem;
    line-height: 1.2;
    cursor: pointer;
    /* Custom chevron so the control matches the rest of the UI across browsers. */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23555'%3E%3Cpath d='M4.5 6l3.5 3.5L11.5 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .5rem center;
    background-size: 1rem;
}

.resource-sort__select:focus-visible {
    outline: 2px solid var(--clr-primary);
    outline-offset: 1px;
}

/* Intro/description text shown under the results count on the Collections page. */
.collections-intro {
    margin: 0 0 1.5rem;
    color: var(--clr-text-subtle);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* "Advanced search active" pill — surfaced in the results bar whenever an
   advanced-search payload is driving the current result set. The trailing
   close button routes through the shared "Clear all filters" flow. */
.resource-results-bar__pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1, .25rem);
    padding: .25rem .25rem .25rem .25rem;
    border-radius: 999px;
    background: #eef4ff;
    color: var(--clr-primary);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1;
    border: 1px solid #c7d8f5;
}

/* The label half of the pill is itself a button so the whole chip area
   (icon + label) opens the advanced-search offcanvas. The close button
   sits beside it and stops propagation so its click doesn't also open
   the panel. */
.resource-results-bar__pill-open {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2, .5rem);
    padding: .25rem .375rem .25rem .5rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background-color .12s ease;
}

.resource-results-bar__pill-open:hover,
.resource-results-bar__pill-open:focus-visible {
    background: #dbe7fb;
    outline: none;
}

.resource-results-bar__pill-open:focus-visible {
    box-shadow: 0 0 0 2px var(--clr-primary);
}

.resource-results-bar__pill-icon {
    font-size: 1rem;
}

.resource-results-bar__pill-label {
    white-space: nowrap;
}

.resource-results-bar__pill-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color .12s ease;
}

.resource-results-bar__pill-clear:hover,
.resource-results-bar__pill-clear:focus-visible {
    background: #dbe7fb;
    outline: none;
}

.resource-results-bar__pill-clear:focus-visible {
    box-shadow: 0 0 0 2px var(--clr-primary);
}

/* ============================================================
   Resource empty state
   ============================================================ */
.resource-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--sp-10, 3rem) var(--sp-6, 1.5rem);
    gap: var(--sp-3, .75rem);
}

.resource-empty__icon {
    font-size: 3rem;
    color: var(--clr-text-muted);
    opacity: .45;
    margin-bottom: var(--sp-2, .5rem);
}

.resource-empty__heading {
    font-family: var(--font-base);
    font-size: var(--fs-h4, 1.25rem);
    font-weight: var(--fw-semibold, 600);
    color: var(--clr-text);
    margin: 0;
}

.resource-empty__body {
    font-size: var(--fs-body-lg, 1rem);
    color: var(--clr-text-muted);
    max-width: 38ch;
    margin: 0;
    line-height: var(--lh-body, 1.5);
}

.resource-empty__reset {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2, .375rem);
    margin-top: var(--sp-3, .75rem);
    padding: var(--sp-2, .5rem) var(--sp-5, 1.25rem);
    border-radius: var(--radius-pill, 999px);
    background-color: var(--clr-bg-inverse);
    color: var(--clr-text-inverse);
    font-size: var(--fs-body-lg, 1rem);
    font-weight: var(--fw-medium, 500);
    text-decoration: none;
    transition: opacity .15s;
}

.resource-empty__reset:hover {
    opacity: .85;
    color: var(--clr-text-inverse);
}

/* ============================================================
   Resource detail modal
   ============================================================ */
.resource-detail-modal__header {
    border-bottom: none;
    padding-bottom: 0.25rem;
}

.resource-detail-modal__body {
    padding-top: 0.5rem;
}

.resource-detail-modal__layout {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 575px) {
    .resource-detail-modal__layout {
        grid-template-columns: 1fr;
    }
}

.resource-detail-modal__img-col {
    flex-shrink: 0;
}

.resource-detail-modal__thumbnail {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--radius-md);
    display: block;
}

.resource-detail-modal__meta {
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    color: var(--clr-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}

.resource-detail-modal__title {
    font-size: var(--fs-heading-md);
    font-weight: var(--fw-bold);
    margin-bottom: 0.4rem;
    line-height: 1.25;
}

.resource-detail-modal__authors-label {
    display: block;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    color: var(--clr-text-subtle);
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}

.resource-detail-modal__authors-list {
    margin: 0 0 1rem 0;
    padding-left: 1.25rem;
    font-size: var(--fs-body-sm);
}

.resource-detail-modal__authors {
    font-size: var(--fs-body-sm);
    margin-bottom: 1rem;
}

.resource-detail-modal__description {
    font-size: var(--fs-body-md);
    color: var(--clr-text-default);
    margin-bottom: 1.25rem;
    white-space: pre-line;
}

.resource-detail-modal__tags {
    border-top: 1px solid var(--clr-border-default);
    padding-top: 1rem;
    margin-bottom: 1.25rem;
}

.resource-detail-modal__tags-label {
    display: block;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    color: var(--clr-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}

.resource-detail-modal__tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.resource-detail-modal__tag-pill {
    display: inline-block;
    background: var(--clr-primary-bg);
    border: 1px solid var(--clr-primary);
    border-radius: 999px;
    padding: 0.2rem 0.75rem;
    font-size: var(--fs-body-xs);
    color: var(--clr-primary-dark);
}

.resource-detail-modal__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ============================================================
   Resource detail page
   ============================================================ */
.resource-detail-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--sp-7) var(--sp-4);
}

.resource-detail-page__back {
    display: inline-flex;
    margin-bottom: var(--sp-5);
    color: var(--clr-primary);
    font-weight: var(--fw-medium);
    text-decoration: none;
}

.resource-detail-page__back:hover { text-decoration: underline; }

.resource-detail-page__layout {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: var(--sp-7);
    align-items: start;
}

/* Single-column variant for detail pages with no media/thumbnail column. */
.resource-detail-page__layout--full {
    grid-template-columns: 1fr;
}

.resource-detail-page__thumbnail {
    display: block;
    width: 100%;
    object-fit: cover;
}

.resource-detail-page__title {
    margin: var(--sp-2) 0 var(--sp-4);
    color: var(--clr-text-default);
    font-size: var(--fs-h1);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
}

.resource-detail-page__description {
    margin-bottom: var(--sp-6);
    color: var(--clr-text-default);
    line-height: var(--lh-body-lg);
    white-space: pre-line;
}

.resource-detail-page__section { margin-bottom: var(--sp-6); }

.resource-detail-page__section-title {
    margin-bottom: var(--sp-3);
    color: var(--clr-text-muted);
    font-size: var(--fs-label);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-overline);
    text-transform: uppercase;
}

.resource-detail-page__list { padding-left: var(--sp-5); }

.resource-detail-page__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.resource-detail-page__tag {
    display: inline-block;
    padding: var(--sp-1) var(--sp-3);
    color: var(--clr-primary-dark);
    background: var(--clr-primary-bg);
    border: 1px solid var(--clr-primary);
    border-radius: var(--radius-pill);
    font-size: var(--fs-body-xs);
}

.resource-detail-page__actions {
    flex-direction: row;
    justify-content: flex-start;
    margin-top: var(--sp-6);
}

@media (max-width: 767px) {
    .resource-detail-page__layout {
        grid-template-columns: 1fr;
    }

    /* Parent .wrcc-content already supplies the page gutter — drop the
       detail page's own side padding so content isn't inset 3× on phones. */
    .resource-detail-page {
        padding-left: 0;
        padding-right: 0;
    }
}

/* =====================================================
   Organizations
   ===================================================== */

/* Card title links to the org details page; keep it visually identical to a
   plain card title (the _CollectionCard title is not itself a link, but the
   org card needs both a details link and a separate external URL button). */
.resource-card__title-link {
    color: inherit;
    text-decoration: none;
}

.resource-card__title-link:hover,
.resource-card__title-link:focus-visible {
    text-decoration: underline;
}

.resource-card__contact-link {
    color: var(--clr-text-subtle);
    text-decoration: none;
    word-break: break-word;
}

.resource-card__contact-link:hover { text-decoration: underline; }

/* Organization details header: logo alongside name/contact/visit. */
.org-detail-header {
    display: flex;
    gap: var(--sp-6);
    align-items: flex-start;
    margin-bottom: var(--sp-7);
}

.org-detail-header__logo {
    flex: 0 0 auto;
    width: 160px;
}

.org-detail-header__logo-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-md, 8px);
}

.org-detail-header__logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--clr-primary-bg);
    border-radius: var(--radius-md, 8px);
    color: var(--clr-primary);
    font-size: 3rem;
}

.org-detail-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-5);
    margin-bottom: var(--sp-4);
    color: var(--clr-text-subtle);
    font-size: var(--fs-body-sm);
}

.org-detail-header__meta-item {
    display: inline-flex;
    align-items: center;
}

.org-detail-header__meta-item a {
    color: inherit;
    text-decoration: none;
}

.org-detail-header__meta-item a:hover { text-decoration: underline; }

.org-detail-header__visit {
    display: inline-flex;
    align-items: center;
    width: fit-content;
}

.org-detail-header__description {
    margin-bottom: var(--sp-4);
    color: var(--clr-text);
    white-space: pre-line;
}

@media (max-width: 767px) {
    .org-detail-header {
        flex-direction: column;
        gap: var(--sp-4);
    }

    .org-detail-header__logo {
        width: 120px;
    }
}

/* =====================================================
   Login Modal
   ===================================================== */
.login-modal {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
}

.login-modal::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 50px;
    background-color: var(--clr-primary);
    border-radius: 0.5rem 0 0 0.5rem;
}

.login-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: none;
    padding-bottom: 0;
    padding-left: calc(50px + 1rem);
    gap: 1rem;
}

.login-modal__body {
    padding-top: 0.5rem;
    padding-left: calc(60px + 1rem);
}

.login-modal__title {
    font-size: var(--fs-heading-md, 1.75rem);
    font-weight: var(--fw-bold, 700);
    color: var(--clr-primary);
    margin-bottom: 0.5rem;
}

/* ================================================================
   MINIPROFILER — prevent global overflow-x:hidden on html/body
   from clipping the fixed-position detail popup
================================================================ */
#mini-profiler .profiler-result .profiler-popup {
    max-height: 80vh !important;
    overflow-y: auto !important;
    height: auto !important;
}

#mini-profiler .profiler-result .profiler-queries {
    max-height: 70vh !important;
    overflow-y: auto !important;
    height: auto !important;
}

/* ================================================================
   ADVANCED SEARCH OFFCANVAS
================================================================ */
[x-cloak] { display: none !important; }

.adv-search-offcanvas {
    --bs-offcanvas-width: 640px;
    --bs-offcanvas-bg: var(--clr-bg-surface);
    font-family: var(--font-base);
    color: var(--clr-text-default);
}

@media (max-width: 768px) {
    .adv-search-offcanvas { --bs-offcanvas-width: 100%; }
}

.adv-search__header {
    padding: var(--sp-5) var(--sp-5) var(--sp-3);
    border-bottom: 1px solid var(--clr-border-subtle);
}

.adv-search__title {
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    margin: 0;
}

.adv-search__body {
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.adv-search__legend {
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    color: var(--clr-text-muted);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: var(--ls-overline);
}

.adv-search__rows {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.adv-search__row {
    display: grid;
    grid-template-columns: 90px 1fr 1fr 1fr auto;
    gap: var(--sp-2);
    align-items: end;
}

@media (max-width: 575.98px) {
    .adv-search__row {
        grid-template-columns: 1fr 1fr auto;
        grid-template-areas:
            "combinator combinator remove"
            "field      field      field"
            "operator   operator   operator"
            "value      value      value";
        row-gap: var(--sp-2);
    }
    .adv-search__cell--combinator { grid-area: combinator; }
    .adv-search__cell--field      { grid-area: field; }
    .adv-search__cell--operator   { grid-area: operator; }
    .adv-search__cell--value      { grid-area: value; }
    .adv-search__cell--remove     { grid-area: remove; justify-self: end; }
}

.adv-search__cell {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-width: 0;
}

.adv-search__field-label {
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    color: var(--clr-text-muted);
}

.adv-search__select,
.adv-search__input {
    font-family: var(--font-base);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-regular);
    color: var(--clr-text-default);
    background: var(--clr-bg-default);
    border: 1px solid var(--clr-border-default);
    border-radius: var(--radius-sm);
    padding: var(--sp-2) var(--sp-3);
    height: 40px;
    width: 100%;
    min-width: 0;
}

.adv-search__select:focus,
.adv-search__input:focus {
    outline: none;
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 2px var(--clr-primary-bg);
}

.adv-search__select:disabled,
.adv-search__input:disabled {
    background: var(--clr-bg-surface-subtle);
    color: var(--clr-text-subtle);
    cursor: not-allowed;
}

.adv-search__select--combinator {
    font-weight: var(--fw-semibold);
    color: var(--clr-primary-dark);
    background: var(--clr-primary-bg);
    border-color: var(--clr-primary-bg);
}

.adv-search__combinator-placeholder { display: block; height: 40px; }

.adv-search__cell--remove {
    align-items: stretch;
    justify-content: flex-end;
}

.adv-search__remove {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--clr-text-muted);
    height: 40px;
    width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.adv-search__remove:hover {
    background: var(--clr-bg-surface);
    color: var(--clr-danger);
}

.adv-search__remove svg { width: 1rem; height: 1rem; }

.adv-search__inline-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    flex-wrap: wrap;
}

.adv-search__link-btn {
    font-family: var(--font-base);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-regular);
    color: var(--clr-primary);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.adv-search__link-btn:hover { color: var(--clr-primary-dark); text-decoration: underline; }
.adv-search__link-btn svg { width: 1rem; height: 1rem; }

.adv-search__divider {
    border: none;
    border-top: 1px solid var(--clr-border-subtle);
    margin: var(--sp-2) 0;
}

.adv-search__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-3);
}

.adv-search__btn {
    font-family: var(--font-base);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-pill);
    padding: 0 var(--sp-6);
    height: 44px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}

.adv-search__btn--ghost {
    background: transparent;
    color: var(--clr-text-default);
    border-color: var(--clr-border-default);
}

.adv-search__btn--ghost:hover { background: var(--clr-bg-surface); }

.adv-search__btn--primary {
    background: var(--clr-primary);
    color: var(--clr-text-inverse);
}

.adv-search__btn--primary:hover:not(:disabled) { background: var(--clr-primary-dark); }
.adv-search__btn--primary:disabled { opacity: .55; cursor: not-allowed; }

/* ---- Grouped facet sections ---- */

.adv-search__group {
    border: 1px solid var(--clr-border-default);
    border-radius: 6px;
    margin-bottom: .5rem;
    background: var(--clr-bg-default);
}

.adv-search__group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .65rem .85rem;
    background: transparent;
    border: 0;
    text-align: left;
    font-weight: 600;
    color: var(--clr-text-default);
    cursor: pointer;
}

.adv-search__group-toggle:hover { background: var(--clr-bg-surface-subtle); }
.adv-search__group-toggle:focus-visible { outline: 2px solid var(--clr-primary); outline-offset: -2px; }

.adv-search__group-title { display: inline-flex; align-items: center; gap: .35rem; }

.adv-search__group-count {
    font-weight: 500;
    color: var(--clr-text-muted, #666);
    font-size: .9em;
}

.adv-search__group-icon {
    width: 0.875rem;
    height: 0.875rem;
    transition: transform .15s ease-in-out;
}
.adv-search__group-icon--collapsed { transform: rotate(-90deg); }

.adv-search__group-body {
    padding: .25rem .85rem .85rem;
    border-top: 1px solid var(--clr-border-subtle, #eee);
}

.adv-search__group-empty {
    margin: .5rem 0 0;
    color: var(--clr-text-muted, #666);
    font-style: italic;
}

.adv-search__check-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: .25rem .75rem;
    margin-top: .5rem;
}

@media (min-width: 576px) {
    .adv-search__check-list { grid-template-columns: 1fr 1fr; }
}

.adv-search__check-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .15rem 0;
}

.adv-search__check { margin: 0; }

.adv-search__check-label {
    margin: 0;
    cursor: pointer;
    line-height: 1.25;
}

/* ================================================================
   TOAST CONTAINER — sit above Bootstrap modals/backdrops
   (modal-backdrop: 1050, modal: 1055)
================================================================ */
#toast-container {
    z-index: 1100;
}

/* ================================================================
   HTMX REQUEST INDICATORS
   Ports htmx's auto-injected indicator stylesheet so it doesn't have
   to inject an inline <style> at runtime (blocked by our CSP).
   See `includeIndicatorStyles:false` in _Layout.cshtml.
================================================================ */
.htmx-indicator {
    opacity: 0;
    visibility: hidden;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
    visibility: visible;
    transition: opacity 200ms ease-in;
}

/* ================================================================
   HOME PAGE — EVENTS SECTION
   Cards mock-up: dark blue text panel above a wide photo, with a
   circular arrow CTA pinned to the bottom-right of the image.
================================================================ */
.home-events {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--sp-7) var(--sp-5);
}

.home-events__header {
    display: flex;
    align-items: baseline;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.home-events__title {
    margin: 0;
    font-family: var(--font-base);
    font-size: var(--fs-h2, 2rem);
    font-weight: var(--fw-bold, 700);
    color: var(--clr-text-default);
    letter-spacing: -0.5px;
}

.home-events__see-all {
    font-family: var(--font-base);
    font-size: var(--fs-body-md, 1rem);
    color: var(--clr-text-default);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.home-events__see-all:hover {
    color: var(--clr-link-hover, var(--clr-accent, #1f4e79));
}

.home-events__empty {
    color: var(--clr-text-muted);
    font-size: var(--fs-body-md, 1rem);
}

.home-events__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-7);
}

.home-event-card {
    display: flex;
    flex-direction: column;
    background: transparent;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}

.home-event-card__panel {
    position: relative;  /* anchors the CTA affordance in the corner */
    background: #355a7b; /* matches mock-up muted slate-blue */
    color: var(--clr-text-inverse, #fff);
    padding: var(--sp-4) var(--sp-5);
    min-height: 240px;   /* baseline height; grows to fit whole lines of copy */
    flex: 1 1 auto;      /* fill the card so grid-stretched siblings stay equal height */
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.home-event-card__date {
    font-family: var(--font-base);
    font-size: var(--fs-body-sm, .875rem);
    font-weight: var(--fw-regular, 400);
    letter-spacing: 0.08em;
    color: var(--clr-text-inverse, #fff);
}

.home-event-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    flex: 1 1 auto;   /* take the remaining vertical space inside the panel */
    min-height: 0;    /* allow children to shrink and trigger ellipsis */
    overflow: hidden;
}

.home-event-card__line {
    margin: 0;
    font-family: var(--font-base);
    font-size: var(--fs-body-md, 1rem);
    line-height: 1.4;
    color: var(--clr-text-inverse, #fff);
}

.home-event-card__label {
    font-weight: var(--fw-regular, 400);
}

/* Abstract clips with an ellipsis at a whole-line boundary via -webkit-line-clamp
   (never mid-line), so copy is only ever cut cleanly between lines. */
.home-event-card__abstract {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    line-clamp: 6;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
    min-height: 0;
}

.home-event-card__media {
    position: relative;
    overflow: hidden;
    background: var(--clr-bg-subtle, #eee);
    /* Reserve a consistent media area regardless of whether an image or the
       placeholder renders, so every card in the row aligns. */
    aspect-ratio: 4 / 3;
}

.home-event-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-event-card__img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-text-muted);
    font-size: 2rem;
}

.home-event-card__cta {
    align-self: flex-end;   /* own row after the description, aligned right */
    flex: 0 0 auto;         /* never shrink or overlap the text above */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    font-size: 1.1rem;
}

/*.home-event-card:hover .home-event-card__cta,
.home-event-card:focus-visible .home-event-card__cta {
    background: var(--clr-accent, #1f4e79);
    color: #fff;
}*/

@media (max-width: 991.98px) {
    .home-events__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .home-events {
        padding: var(--sp-6) var(--sp-4);
    }

    .home-events__grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   HOME PAGE — SECTION DIVIDER
   Thin horizontal rule between landing-page sections (e.g. between
   the Events and Collections grids). Constrained to the same
   1200px container width AND matching horizontal padding used by
   .home-events / .home-collections so the line aligns with the
   section content rather than extending past it.
================================================================ */
.home-divider {
    max-width: 1200px;
    margin: var(--sp-5) auto var(--sp-7) auto;
    padding-inline: var(--sp-5);
    border: 0;
    height: 1px;
    background: none;
    opacity: 1;
    position: relative;
}

.home-divider::before {
    content: "";
    display: block;
    height: 1px;
    background: var(--clr-border-default);
}

@media (max-width: 575.98px) {
    .home-divider {
        padding-inline: var(--sp-4);
    }
}

/* ================================================================
   HOME PAGE — COLLECTIONS SECTION
   Image-on-top, text-on-bottom cards with a green panel. Mirrors the
   .home-events container/header so both sections align visually, and
   reuses --clr-collection-panel for the panel background.
================================================================ */
.home-collections {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--sp-5) var(--sp-7);
}

.home-collections__header {
    display: flex;
    align-items: baseline;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.home-collections__title {
    margin: 0;
    font-family: var(--font-base);
    font-size: var(--fs-h2, 2rem);
    font-weight: var(--fw-bold, 700);
    color: var(--clr-text-default);
    letter-spacing: -0.5px;
}

.home-collections__see-all {
    font-family: var(--font-base);
    font-size: var(--fs-body-md, 1rem);
    color: var(--clr-text-default);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.home-collections__see-all:hover {
    color: var(--clr-link-hover, var(--clr-accent, #1f4e79));
}

.home-collections__empty {
    color: var(--clr-text-muted);
    font-size: var(--fs-body-md, 1rem);
}

.home-collections__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-7);
}

.home-collection-card {
    display: flex;
    flex-direction: column;
    background: transparent;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}

.home-collection-card__media {
    position: relative;
    overflow: hidden;
    background: var(--clr-bg-subtle, #eee);
    /* Reserve a consistent media area regardless of whether an image or the
       placeholder renders, so every card in the row aligns. */
    aspect-ratio: 4 / 3;
}

.home-collection-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-collection-card__img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-text-muted);
    font-size: 2rem;
}

.home-collection-card__cta {
    position: absolute;
    right: var(--sp-4);
    top: var(--sp-4);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    font-size: 1.25rem;
}

.home-collection-card__panel {
    background: var(--clr-collection-panel);
    color: var(--clr-text-inverse, #fff);
    padding: var(--sp-4) var(--sp-5);
    height: 175px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.home-collection-card__title {
    font-family: var(--font-base);
    font-size: var(--fs-body-sm, .875rem);
    font-weight: var(--fw-semibold, 600);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-text-inverse, #fff);
}

.home-collection-card__desc {
    margin: 0;
    font-family: var(--font-base);
    font-size: var(--fs-body-md, 1rem);
    line-height: 1.4;
    color: var(--clr-text-inverse, #fff);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    line-clamp: 5;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-height: 0;
}

@media (max-width: 991.98px) {
    .home-collections__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .home-collections {
        padding: 0 var(--sp-4) var(--sp-6);
    }

    .home-collections__grid {
        grid-template-columns: 1fr;
    }
}

/* ── Admin collections list — thumbnail cell ─────────────────────────── */
.admin-review__thumb {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--clr-border-default);
    background: var(--clr-bg-surface);
    display: inline-block;
}

.admin-review__thumb--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-text-subtle);
    font-size: var(--fs-body-sm);
}

/* ── Collection form resource picker ─────────────────────────────────── */
.sr-collection-picker__search {
    position: relative;
}

.sr-collection-picker__search-input {
    /* Reserve space on the right so the clear button never overlaps text. */
    padding-right: 2.25rem;
}

.sr-collection-picker__search-clear {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--clr-text-subtle);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .sr-collection-picker__search-clear:hover {
        background: var(--clr-bg-surface);
        color: var(--clr-text-default);
    }

.sr-collection-picker__results {
    border: 1px solid var(--clr-border-default);
    border-radius: var(--radius-md);
    padding: var(--sp-3);
    margin-top: var(--sp-2);
    background: var(--clr-bg-surface);
}

.sr-collection-picker__list,
.sr-collection-picker__selected {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.sr-collection-picker__item,
.sr-collection-picker__selected-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--clr-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--clr-bg-default);
}

/* Featured-resources picker: rank badge + reorder controls on each row. */
.sr-featured-picker__rank {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 var(--sp-1);
    border-radius: var(--radius-sm);
    background: var(--clr-bg-subtle, #eef0f2);
    color: var(--clr-text-subtle);
    font-weight: 700;
    font-size: var(--fs-body-sm);
    font-variant-numeric: tabular-nums;
}

.sr-featured-picker__controls {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
}

.sr-featured-picker__controls .btn:disabled {
    opacity: .4;
}

.sr-collection-picker__item-info {
    flex: 1 1 auto;
    min-width: 0;
}

.sr-collection-picker__item-title {
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sr-collection-picker__item-meta {
    font-size: var(--fs-body-sm);
    color: var(--clr-text-subtle);
    margin: 0;
}

.sr-collection-picker__current-image {
    margin-bottom: var(--sp-3);
}

    .sr-collection-picker__current-image img {
        max-width: 100%;
        max-height: 12rem;
        border-radius: var(--radius-md);
        border: 1px solid var(--clr-border-default);
        display: block;
    }


.sr-page__subtitle {
    margin-bottom: 2rem;
}

/* ================================================================
   ABOUT PAGE
   Long-form marketing page. Full-bleed colored sections, each with a
   centered, capped inner container (.about-wrap). Iconography uses the
   shared carbon-icon set; brand teal/gold accents are added as tokens.
================================================================ */
:root {
    --clr-teal: #009d9a;
    --clr-teal-dark: #005d5d;
    --clr-accent-gold: #fdb913;
    /* Slightly deeper than the illustration's sky (#d9eaff) so the contained
       Goal panel reads as a distinct card against the section background. */
    --clr-info-bg: #d0e2ff;
    --clr-audience-icon: #4f7d4f;
}

[data-theme="dark"] {
    /* Keep the airy "Goal" band readable against the dark surface. */
    --clr-info-bg: #1c3a5e;
}

.about { display: block; }

.about-wrap {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--sp-5);
}

.about-wrap--narrow { max-width: 820px; }

.about-section { padding-block: var(--sp-9); }
.about-section--white { background: var(--clr-bg-default); }

.about-h2 {
    font-family: var(--font-base);
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    color: var(--clr-text-default);
    margin: 0 0 var(--sp-4);
}

.about-body {
    font-size: var(--fs-body-lg);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body-lg);
    color: var(--clr-text-muted);
}

.about-body a,
.about-link {
    color: var(--clr-text-default);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.about-body a:hover,
.about-link:hover { color: var(--clr-primary); }

.about-section__head {
    max-width: 760px;
    margin: 0 auto var(--sp-8);
    text-align: center;
}
.about-section__head .about-h2 { margin-bottom: var(--sp-3); }

.about-lead {
    font-size: var(--fs-body-lg);
    font-weight: var(--fw-regular);
    color: var(--clr-text-muted);
    margin: 0;
}

/* ---- Primary / outline pill buttons (About-scoped) ---- */
.about-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    height: 3rem;
    padding: 0 var(--sp-6);
    border-radius: var(--radius-pill);
    font-family: var(--font-base);
    font-size: var(--fs-body-md);
    font-weight: var(--fw-regular);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, opacity .15s, color .15s;
}
.about-btn--primary {
    background: var(--clr-primary);
    color: var(--clr-text-inverse);
    border: none;
}
.about-btn--primary:hover { background: var(--clr-primary-dark); color: var(--clr-text-inverse); }
.about-btn--ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .8);
}
.about-btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ---- Intro ---- */
.about-intro__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
    align-items: start;
}
.about-intro__title {
    font-family: var(--font-base);
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    font-weight: var(--fw-bold);
    line-height: 1.05;
    letter-spacing: -0.5px;
    color: var(--clr-text-default);
    margin: 0 0 var(--sp-3);
}
.about-intro__subtitle {
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    font-weight: var(--fw-bold);
    color: var(--clr-text-default);
    margin: 0 0 var(--sp-6);
}
.about-intro__text p { margin: 0 0 var(--sp-4); }
.about-intro__text .about-body:last-child { margin-bottom: 0; }

.about-ocap {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: var(--sp-2) var(--sp-4);
    margin: var(--sp-5) 0 0;
}
.about-ocap dt {
    font-size: var(--fs-body-md);
    font-weight: var(--fw-regular);
    color: var(--clr-text-muted);
}
.about-ocap dd {
    margin: 0;
    font-size: var(--fs-body-sm);
    line-height: var(--lh-body-sm);
    color: var(--clr-text-muted);
}
.about-intro__media img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    display: block;
}

/* ---- Goal ---- */
.about-goal {
    position: relative;
    background: var(--clr-bg-default);
    padding-block: var(--sp-9);
}
.about-goal__inner { position: relative; z-index: 1; max-width: 640px; }
.about-goal__inner .about-body { margin: 0 0 var(--sp-4); }
/* Contained illustration panel: centered, capped at ~1200px so the 1440px
   source is never upscaled, with rounded corners and a soft shadow so it reads
   as a card on the blue section. */
.about-goal__scene {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: var(--sp-7) auto 0;
}
.about-goal__scene-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}
.about-goal__target {
    position: absolute;
    top: clamp(-56px, -3.5vw, -24px);
    right: 24%;
    width: clamp(120px, 15vw, 196px);
    height: auto;
    z-index: 2;
    pointer-events: none;
}

/* ---- Who contributes (audience grid) ---- */
.about-audience {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
}
.about-audience__card {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    background: var(--clr-bg-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-5);
    font-size: var(--fs-body-lg);
    font-weight: var(--fw-regular);
    color: var(--clr-text-default);
    min-height: 96px;
}
.about-audience__icon {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--clr-audience-icon);
}
.about-audience__icon svg { width: 2.5rem; height: 2.5rem; }

/* ---- What you will find (teal tiles) ---- */
.about-find {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
}
/* Desktop: 12 tracks so a short last row is spread evenly: four cards per
   row (span 3), and a last row of three spans 4 each. */
@media (min-width: 992px) {
    .about-find { grid-template-columns: repeat(12, 1fr); }
    .about-find > li { grid-column: span 3; }
    .about-find > li:nth-child(4n+1):nth-last-child(3),
    .about-find > li:nth-child(4n+1):nth-last-child(3) ~ li { grid-column: span 4; }
}
.about-find__card {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    background: #6F6F6F;
    color: #fff;
    border-radius: var(--radius-md);
    padding: var(--sp-5);
    min-height: 96px;
    font-size: var(--fs-body-lg);
    font-weight: var(--fw-regular);
}
/* Feature row (Resources, Events, …): teal, and linked cards fill their <li>. */
.about-find__card--feature { background: var(--clr-teal); }
a.about-find__card {
    height: 100%;
    text-decoration: none;
    transition: background-color .15s ease;
}
a.about-find__card:hover { color: #fff; background: var(--clr-teal-dark); }
a.about-find__card:focus-visible {
    outline: 2px solid var(--clr-teal-dark);
    outline-offset: 2px;
}
.about-find__icon {
    flex-shrink: 0;
    display: inline-flex;
    color: #fff;
}
.about-find__icon svg { width: 2.25rem; height: 2.25rem; }

/* ---- Co-design process ---- */
.about-codesign p { margin: 0 0 var(--sp-4); }
.about-codesign p:last-child { margin-bottom: 0; }
.about-codesign__ocap { margin: var(--sp-6) 0 0; }

/* ---- Two classes of information ---- */
/* Top padding trimmed so the gap from the review-workflow section above is 25%
   tighter: 64+64 → 96px here; phone overrides are in the responsive blocks. */
.about-section--classes { padding-top: var(--sp-6); }
.about-classes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 440px));
    justify-content: center;
    gap: var(--sp-6);
}
.about-class {
    background: var(--clr-bg-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 0 var(--sp-5) var(--sp-5);
    text-align: center;
}
.about-class__figure {
    display: flex;
    justify-content: center;
    margin: 0 calc(-1 * var(--sp-5));
    padding: var(--sp-5) 0 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: var(--clr-bg-surface-subtle);
}
.about-class__badge {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-pill);
    background: var(--clr-bg-default);
    box-shadow: var(--shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: -36px; /* half the badge hangs below the grey band */
    color: var(--clr-teal);
}
.about-class__badge svg { width: 2.5rem; height: 2.5rem; }
.about-class__title {
    font-size: 1.125rem;
    font-weight: var(--fw-bold);
    color: var(--clr-text-default);
    margin: calc(36px + var(--sp-4)) 0 var(--sp-2); /* clear the hanging badge half */
}
.about-class p { margin: 0; }

/* ---- Report an error banner ---- */
/* CTA sections (report / user guide) sit close to the section above (which
   already supplies bottom padding) and close together as a pair. */
.about-section.about-section--cta { padding-top: 0; }
.about-section--cta:has(+ .about-section--cta) { padding-bottom: var(--sp-8); }
.about-report {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    background: #668A51;
    border-radius: var(--radius-md);
    padding: var(--sp-7);
    overflow: hidden;
    color: #fff;
}
.about-report__icon {
    flex-shrink: 0;
    width: 200px;
    height: 200px;
    border-radius: var(--radius-md);
    background: #4C6A3B;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-accent-gold);
}
.about-report__icon svg { width: 7rem; height: 7rem; }
.about-report__body { position: relative; z-index: 1; max-width: 640px; }
.about-report__title {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    margin: 0 0 var(--sp-3);
}
.about-report__body p {
    margin: 0 0 var(--sp-5);
    line-height: var(--lh-body-lg);
}
/* Painted as a background on a box stretched to the card's full height via
   top/bottom anchors. Using a background (not an <img>) sidesteps Firefox's
   refusal to resolve height:100% on an absolutely-positioned replaced element
   inside an auto-height container, which left a teal gap below the plants. */
.about-report__plants {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    /* Matches the trimmed image's aspect (226×312) at the card's typical height
       so `cover` fills the full height with negligible cropping. */
    width: 12.75rem;
    background-image: url('/images/about/report-plants.png?v=2');
    background-size: cover;
    background-position: bottom right;
    background-repeat: no-repeat;
    pointer-events: none;
}
/* Guide CTA: solid colour only, no plants background image. */
.about-report--guide { background: var(--clr-primary); }
.about-report--guide .about-report__icon { background: transparent; color: #fff; }
/* Issue CTA: white X icon with no icon-box background. */
.about-report--issue .about-report__icon { background: transparent; color: #fff; }

/* ---- Download brochure ---- */
.about-brochure {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sp-8);
    align-items: center;
}
.about-brochure__text p { margin: 0 0 var(--sp-6); max-width: 46ch; }
.about-brochure__media img {
    display: block;
    width: 320px;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--clr-border-default);
    border-radius: var(--radius-md);
}

/* ---- Regional network ---- */
.about-divider {
    border: 0;
    border-top: 2px solid var(--clr-border-default);
    margin: 0 0 var(--sp-8);
}
.about-network__intro { margin: 0 0 var(--sp-6); max-width: 90ch; }
.about-network__map {
    display: block;
    width: 100%;    
    height: auto;
    margin: 0 auto var(--sp-7);
}
.about-network__ecoregions {
    margin: 0 auto;
}
.about-network__library {
    max-width: 90ch;
    margin-bottom: var(--sp-9);
}
.about-network__library p { margin: 0; }

/* ---- Quality / review workflow ---- */
.about-quality {
    background: var(--clr-bg-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-8);
}
.about-quality__head {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--sp-6);
    align-items: start;
    margin-bottom: var(--sp-9);
}
.about-quality__head .about-h2 { margin: 0; }
.about-quality__note { margin: 0; }

.about-steps {
    list-style: none;
    margin: 0 0 var(--sp-7);
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: var(--sp-4);
}
.about-steps__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-4);
    font-size: var(--fs-body-md);
    color: var(--clr-text-default);
}
/* Arrow linking consecutive steps. Sized to the icon's height so it centres on
   the icon row regardless of how much the step's caption wraps. */
.about-steps__arrow {
    flex: 0 0 auto;
    align-self: flex-start;
    height: 120px;
    display: flex;
    align-items: center;
    color: var(--clr-text-subtle);
}
.about-steps__arrow svg { width: 1.75rem; height: 1.75rem; }
.about-steps__icon {
    width: 120px;
    height: 120px;
    border-radius: var(--radius-pill);
    background: var(--clr-bg-default);
    box-shadow: var(--shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-audience-icon);
}
.about-steps__icon svg { width: 3rem; height: 3rem; }

.about-outcomes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
}
.about-outcome__mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
}
.about-outcome__mark svg { width: 3rem; height: 3rem; }
/* The mark is a <summary>, but it only acts as a toggle on phones (site.js
   keeps it open above that), so it reads as a plain heading here. */
summary.about-outcome__mark { list-style: none; cursor: default; }
summary.about-outcome__mark::-webkit-details-marker { display: none; }
.about-outcome__mark .about-outcome__chev { display: none; }
.about-outcome--denied .about-outcome__mark { color: var(--clr-danger); }
.about-outcome--approved .about-outcome__mark { color: var(--clr-success); }

.about-result {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    background: var(--clr-bg-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-body-lg);
    color: var(--clr-text-default);
}
.about-result__badge {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.about-result__badge svg { width: 1.25rem; height: 1.25rem; }
.about-result__badge--deny { background: var(--clr-danger); }
.about-result__badge--ok { background: var(--clr-success); }
.about-outcome__note {
    margin: var(--sp-5) 0 0;
    line-height: var(--lh-body-lg);
}

/* ---- FAQ ---- */
.about-faq { border-top: 1px solid var(--clr-border-default); }
.about-faq__item { border-bottom: 1px solid var(--clr-border-default); }
.about-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-5) 0;
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    color: var(--clr-text-default);
    cursor: pointer;
    list-style: none;
}
.about-faq__q::-webkit-details-marker { display: none; }
.about-faq__chev {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--clr-text-muted);
    transition: transform .2s ease;
}
.about-faq__item[open] .about-faq__chev { transform: rotate(180deg); }
.about-faq__a {
    padding: 0 0 var(--sp-6);
    max-width: 80ch;
}
.about-faq__a p { margin: 0; }

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
    .about-intro__grid,
    .about-classes,
    .about-brochure,
    .about-quality__head { grid-template-columns: 1fr; }

    .about-audience,
    .about-find { grid-template-columns: repeat(2, 1fr); }
    /* Odd card out on the last row spans both columns. */
    .about-find > li:nth-child(odd):last-child { grid-column: 1 / -1; }

    /* Keep the review workflow in one row with scaled-down steps, and the two
       outcomes side by side, so the whole section stays in view. */
    .about-quality { padding: var(--sp-6); }
    .about-quality__head { gap: var(--sp-4); margin-bottom: var(--sp-7); }
    .about-steps { gap: var(--sp-2); }
    .about-steps__item { gap: var(--sp-3); font-size: var(--fs-body-sm); }
    .about-steps__icon { width: 80px; height: 80px; }
    .about-steps__icon svg { width: 2rem; height: 2rem; }
    .about-steps__arrow { height: 80px; }
    .about-steps__arrow svg { width: 1.25rem; height: 1.25rem; }
    .about-outcomes { gap: var(--sp-5); }
    .about-result { font-size: var(--fs-body-md); padding: var(--sp-3) var(--sp-4); }

    .about-brochure__media { justify-self: center; }

    .about-report { flex-direction: column; align-items: flex-start; }
    .about-report__icon { width: 120px; height: 120px; }
    .about-report__icon svg { width: 4.5rem; height: 4.5rem; }
    .about-report__plants { display: none; }
}

@media (max-width: 575.98px) {
    .about-section { padding-block: var(--sp-7); }
    .about-audience { grid-template-columns: 1fr; }

    /* Two cards per row: stack the icon above the label and trim padding so
       the label keeps enough width to wrap cleanly. */
    /* Equal rows (sized to the tallest card) so every tile matches. */
    .about-find { gap: var(--sp-3); grid-auto-rows: 1fr; }
    .about-find__card {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: var(--sp-2);
        padding: var(--sp-4);
        min-height: 0;
        font-size: var(--fs-body-sm);
        line-height: var(--lh-body-sm);
    }
    .about-find__icon svg { width: 1.75rem; height: 1.75rem; }
    .about-find__note { display: block; }
    .about-ocap { grid-template-columns: 1fr; gap: 0; }
    .about-ocap dt { margin-top: var(--sp-3); }
}

@media (max-width: 767.98px) {
    /* Below ~768px five steps across can't fit their captions, so the workflow
       becomes a compact timeline (icon beside caption, joined by a line) and the
       outcomes stack. */
    /* Bleed the card edge to edge, cancelling .about-wrap's gutter; content
       padding matches that gutter so text still lines up with other sections.
       The surrounding grey band shrinks to a thin divider from its neighbours. */
    .about-section--quality { padding-block: var(--sp-1); }
    .about-quality {
        margin-inline: calc(-1 * var(--sp-5));
        padding: var(--sp-6) var(--sp-5);
        border-radius: 0;
        box-shadow: none;
    }
    .about-quality__head { margin-bottom: var(--sp-4); }
    .about-quality__head .about-h2 { font-size: var(--fs-h4); }
    .about-quality .about-body {
        font-size: var(--fs-body-sm);
        line-height: var(--lh-body-sm);
    }
    /* Equal-height rows (sized to the tallest, wrapped caption) keep the icons
       evenly spaced, so every connector line is the same length. */
    .about-steps { display: grid; grid-auto-rows: 1fr; align-items: stretch; gap: 0; margin-bottom: 0; }
    .about-steps__arrow { display: none; }
    .about-steps__item {
        position: relative;
        flex: 0 0 auto;
        flex-direction: row;
        text-align: left;
        gap: var(--sp-3);
        padding-bottom: var(--sp-2);
        font-size: var(--fs-body-sm);
        line-height: var(--lh-body-sm);
        /* Top-align so the icon stays where the connector line expects it even
           when the caption wraps; the caption is nudged down to centre a single
           line against the 36px icon. */
        align-items: flex-start;
    }
    .about-steps__item > span:last-child { padding-top: calc((36px - var(--lh-body-sm)) / 2); }
    .about-steps__item:not(:last-child)::before {
        content: "";
        position: absolute;
        left: 17px;
        top: 36px;
        bottom: 0;
        width: 2px;
        background: var(--clr-border-default);
    }
    .about-steps__icon { flex-shrink: 0; width: 36px; height: 36px; }
    .about-steps__icon svg { width: 1.125rem; height: 1.125rem; }

    /* Each outcome collapses to a tappable row (see data-mobile-collapse). */
    .about-outcomes { grid-template-columns: 1fr; gap: var(--sp-3); }
    .about-outcome__mark {
        flex-direction: row;
        text-align: left;
        /* Sized so the longer label ("…not suitable for inclusion") stays on
           one line down to ~360px wide. */
        gap: var(--sp-2);
        margin-bottom: 0;
        padding: var(--sp-3) var(--sp-2);
        border: 1px solid var(--clr-border-default);
        border-radius: var(--radius-md);
        font-size: var(--fs-body-sm);
        font-weight: var(--fw-bold);
    }
    summary.about-outcome__mark { cursor: pointer; }
    .about-outcome[open] .about-outcome__mark { margin-bottom: var(--sp-3); }
    .about-outcome__mark svg { width: 1.25rem; height: 1.25rem; }
    .about-outcome__mark .about-outcome__chev {
        display: block;
        flex-shrink: 0;
        width: 1rem;
        height: 1rem;
        margin-left: auto;
        color: var(--clr-text-muted);
        transition: transform .2s ease;
    }
    .about-outcome[open] .about-outcome__chev { transform: rotate(180deg); }
    .about-result { gap: var(--sp-3); margin-bottom: var(--sp-3); font-size: var(--fs-body-sm); }
    .about-result__badge { width: 28px; height: 28px; }
    .about-result__badge svg { width: 1rem; height: 1rem; }

    /* Report-an-issue / user-guide CTAs: drop the decorative icon and tighten. */
    .about-report { padding: var(--sp-5); gap: 0; }
    .about-report__icon { display: none; }
    .about-report__body p { margin-bottom: var(--sp-4); }

    /* Centre the brochure download button (the preview image below is centred too). */
    .about-brochure__text .about-btn { display: flex; width: fit-content; margin-inline: auto; }

    .about-faq__q { font-size: var(--fs-body-lg); }

    /* Section above has only 4px padding here: 4+64 → 51px gap. */
    .about-section--classes { padding-top: calc(var(--sp-9) * .75 - var(--sp-1) * .25); }
}

@media (max-width: 575.98px) {
    /* …and with phone section padding: 4+40 → 33px gap. */
    .about-section--classes { padding-top: calc(var(--sp-7) * .75 - var(--sp-1) * .25); }
}

/* ==========================================================================
   Resource / event importer preview
   The preview table carries far more per row than the other admin tables — a
   handful of editable dropdowns plus the source values they were matched from —
   so rows needing a decision are tinted and the supporting text is kept small.
   ========================================================================== */

.admin-import__help {
    font-size: 0.875rem;
    border: 1px solid var(--clr-border-subtle);
    border-radius: var(--radius-sm, 4px);
    padding: 0.75rem 1rem;
    background: var(--clr-bg-surface);
}

    .admin-import__help > summary {
        cursor: pointer;
        font-weight: 600;
        color: var(--clr-text-default);
    }

    .admin-import__help > summary ~ * {
        margin-top: 0.75rem;
    }

    .admin-import__help ul {
        margin-bottom: 0.75rem;
        padding-left: 1.25rem;
    }

    .admin-import__help code {
        font-size: 0.8125rem;
        color: var(--clr-text-default);
    }

.admin-import__attention-count {
    color: var(--clr-text-default);
    font-weight: 600;
}

.admin-import__table td {
    vertical-align: top;
}

/* Tinted rather than outlined so a run of flagged rows still reads as a table. */
.admin-import__row--attention > td {
    background-color: #fff8e1;
}

.admin-import__title {
    font-weight: 600;
    color: var(--clr-text-default);
}

/* The source value behind an auto-corrected match ("Broeal West -> Boreal West"),
   shown under the dropdown it was applied to. */
.admin-import__note {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--clr-text-muted);
}

.admin-import__meta {
    font-size: 0.75rem;
}

/* Per-row "what needs attention" list. Lives in the first column so it stays visible when the
   wide preview table scrolls sideways. */
.admin-import__warnings {
    margin: 0.375rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.8rem;
    color: var(--clr-text-muted);
}

    .admin-import__warnings li {
        margin-bottom: 0.15rem;
    }

    /* A blocking warning fails validation on import, so it reads as an error rather than a note. */
    .admin-import__warnings li.is-blocking {
        color: var(--clr-danger);
        font-weight: 600;
    }

.admin-import__all-clear {
    display: flex;
    align-items: flex-start;
}

/* ================================================================
   Events calendar (month grid) — public /events page
   ================================================================ */

/* Page header: "Events" heading with the List / Calendar tabs right-aligned
   on the same row. */
.events-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}

.events-header .sr-page__title {
    margin-bottom: 0;
}

/* ---- Events filter bar (shared by list + calendar views) ---------------- */
/* Two stacked rows: the filter controls, then the actions that operate on them
   (the past-events toggle and Clear). */
.events-filterbar {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
    position: relative;
}

.events-filterbar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sp-4);
}

/* Search + dropdowns share one row and flex to fit, wrapping only when the
   viewport can no longer hold them at a readable width. */
.events-filterbar__row--filters > * {
    flex: 1 1 9rem;
    min-width: 0;
}

/* Actions row: toggle at the leading edge, Clear pinned to the trailing one. */
.events-filterbar__row--actions {
    align-items: center;
}

/* Compact variant of the hero search, sized for an inline filter row. */
.wrcc-search--compact {
    height: auto;
    min-height: 3rem;
    max-width: none;
    gap: var(--sp-2);
    padding: 0 var(--sp-3) 0 var(--sp-4);
    background: var(--clr-bg-default);
    border-radius: var(--radius-sm);
}

.events-filterbar__search {
    /* Takes roughly twice a dropdown's share of the row so the search box stays
       comfortably typeable while the dropdowns keep their labels readable. */
    flex: 2 1 14rem;
}

/* Small leading search glyph; sized by font-size so it never grows the box. */
.events-filterbar__search-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 0.95rem;
    color: var(--clr-text-muted);
}

.wrcc-search--compact .wrcc-search__input {
    font-size: 1rem;
    font-weight: 400;
    color: var(--clr-text-default);
    padding: var(--sp-2) 0;
}

.wrcc-search--compact .wrcc-search__btn {
    font-size: 1.1rem;
    padding: var(--sp-2) 0;
    color: var(--clr-text-muted);
}

.events-filterbar__field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.events-filterbar__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--clr-text-muted);
    letter-spacing: 0.02em;
}

.events-filterbar__select {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--font-base);
    font-size: 0.95rem;
    color: var(--clr-text-default);
    background: var(--clr-bg-default);
    border: 1px solid var(--clr-border-default);
    border-radius: var(--radius-sm);
    width: 100%;
    min-width: 0;
    height: 3rem;
    padding: 0 2.25rem 0 var(--sp-4);
    cursor: pointer;
    /* Chevron drawn as an inline SVG background so it renders without an icon font. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23555' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-3) center;
    background-size: 1rem;
}

.events-filterbar__select:focus-visible {
    outline: 2px solid var(--clr-primary);
    outline-offset: 1px;
    border-color: var(--clr-primary);
}

.events-filterbar__clear {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 3rem; /* keep baseline aligned with the dropdowns */
    padding: 0;
    font-family: var(--font-base);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--clr-primary);
    background: none;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
    margin-left: auto; /* pin to the trailing edge of the actions row */
}

.events-filterbar__clear:hover,
.events-filterbar__clear:focus-visible {
    text-decoration: underline;
}

.events-filterbar__clear.is-hidden,
.is-hidden {
    display: none;
}

/* "Show past events" switch. The real checkbox is visually hidden (but focusable);
   the track/thumb reflect its state via sibling selectors. */
.events-filterbar__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 3rem; /* keep baseline aligned with the dropdowns and Clear button */
    cursor: pointer;
    user-select: none;
}

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

.events-filterbar__toggle-track {
    position: relative;
    flex-shrink: 0;
    width: 2.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: var(--clr-border-default);
    transition: background 0.15s ease;
}

.events-filterbar__toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(1.25rem - 4px);
    height: calc(1.25rem - 4px);
    border-radius: 50%;
    background: var(--clr-bg-default);
    transition: transform 0.15s ease;
}

.events-filterbar__toggle-input:checked + .events-filterbar__toggle-track {
    background: var(--clr-primary);
}

.events-filterbar__toggle-input:checked + .events-filterbar__toggle-track .events-filterbar__toggle-thumb {
    transform: translateX(1rem);
}

.events-filterbar__toggle-input:focus-visible + .events-filterbar__toggle-track {
    outline: 2px solid var(--clr-primary);
    outline-offset: 2px;
}

.events-filterbar__toggle-text {
    font-size: 0.95rem;
    color: var(--clr-text-default);
    white-space: nowrap;
}

.events-filterbar__loading {
    /* Out of the flex flow so it never reserves space in the controls row;
       shown just below the bar (over the results) while a swap is in flight. */
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: var(--sp-2);
    display: flex;
    align-items: center;
}

@media (max-width: 640px) {
    .events-filterbar__row--filters > * {
        flex: 1 1 100%;
    }
}

.wrcc-cal__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

/* Month / Day segmented control */
.wrcc-cal__viewtoggle {
    /* Equal-width columns: every tab sizes to the widest label */
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    border: 1px solid var(--clr-primary);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.wrcc-cal__viewbtn {
    appearance: none;
    border: 0;
    background: var(--clr-bg-default);
    color: var(--clr-primary);
    font-family: var(--font-base);
    font-size: 1rem;
    font-weight: 500;
    padding: var(--sp-2) var(--sp-5);
    cursor: pointer;
    line-height: 1.4;
}

.wrcc-cal__viewbtn.is-active {
    background: var(--clr-primary);
    color: var(--clr-text-inverse);
}

.wrcc-cal__viewbtn:disabled {
    color: var(--clr-text-subtle);
    cursor: not-allowed;
}

/* Prev / next arrows + month title */
.wrcc-cal__nav {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.wrcc-cal__navbtn {
    appearance: none;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--clr-primary);
    color: var(--clr-text-inverse);
    cursor: pointer;
}

.wrcc-cal__navbtn:hover {
    background: var(--clr-primary-dark);
}

.wrcc-cal__navbtn svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}

.wrcc-cal__title {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 700;
    color: var(--clr-text-muted);
    margin-left: var(--sp-2);
}

/* Grid: internal 1px lines via top/left on the grid + right/bottom on cells */
.wrcc-cal__grid {
    border-top: 1px solid var(--clr-border-default);
    border-left: 1px solid var(--clr-border-default);
    overflow-x: auto;
}

.wrcc-cal__weekhead,
.wrcc-cal__week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    min-width: 44rem;
}

/* One row for the day numbers, three stacked event-bar lanes, then a flexible row
   that both holds the "+N more" triggers and pads every week to a uniform height. */
.wrcc-cal__week {
    grid-template-rows: auto repeat(3, min-content) 1fr;
    min-height: 8.5rem;
}

/* Decorative per-day background: borders, today/muted styling. Spans all rows so a
   bar can sit on top of it and read as continuous across days. */
.wrcc-cal__daybg {
    border-right: 1px solid var(--clr-border-default);
    border-bottom: 1px solid var(--clr-border-default);
    background: var(--clr-bg-default);
}

.wrcc-cal__daybg--muted {
    background: var(--clr-bg-surface);
}

.wrcc-cal__daynum-cell {
    padding: var(--sp-2) var(--sp-2) 0;
    min-width: 0;
    z-index: 1;
}

.wrcc-cal__weekhead-cell {
    padding: var(--sp-2) var(--sp-3);
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--clr-text-muted);
    border-right: 1px solid var(--clr-border-default);
    border-bottom: 1px solid var(--clr-border-default);
    background: var(--clr-bg-default);
}

.wrcc-cal__daynum {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-base);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--clr-text-default);
    align-self: flex-start;
    line-height: 1.6rem;
}

.wrcc-cal__daynum:hover,
.wrcc-cal__daynum:focus-visible {
    text-decoration: underline;
}

.wrcc-cal__daynum--muted {
    font-weight: 400;
    color: var(--clr-text-subtle);
}

/* Today: number sits in a filled primary circle */
.wrcc-cal__daynum--today {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.35rem;
    border-radius: 50%;
    background: var(--clr-primary);
    color: var(--clr-text-inverse);
    font-weight: 600;
}

.wrcc-cal-event {
    display: block;
    max-width: 100%;
    padding: 2px var(--sp-2);
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--clr-text-default);
    text-decoration: none;
    background: var(--clr-bg-surface);
    border-left: 3px solid var(--clr-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wrcc-cal-event:hover,
.wrcc-cal-event:focus-visible {
    background: var(--clr-primary-bg);
    color: var(--clr-primary-dark);
}

/* Continuous event bar spanning one or more day columns (Google-Calendar style). */
.wrcc-cal-bar {
    z-index: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 1px 3px 2px;
    padding: 2px var(--sp-2);
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--clr-text-inverse);
    text-decoration: none;
    background: var(--clr-primary);
    border-radius: var(--radius-sm);
}

.wrcc-cal-bar__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wrcc-cal-bar:hover,
.wrcc-cal-bar:focus-visible {
    background: var(--clr-primary-dark);
    color: var(--clr-text-inverse);
}

/* When an event runs past a week edge, square off and hug that side so the block
   reads as continuing into the previous / next week. */
.wrcc-cal-bar--continues-left {
    margin-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.wrcc-cal-bar--continues-right {
    margin-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* "+N more" overflow trigger */
.wrcc-cal__more {
    appearance: none;
    border: 0;
    background: transparent;
    align-self: start;
    justify-self: start;
    z-index: 1;
    margin: 0 var(--sp-2);
    padding: 2px 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--clr-primary);
    cursor: pointer;
}

.wrcc-cal__more:hover,
.wrcc-cal__more:focus-visible {
    text-decoration: underline;
}

/* Full day event list inside the "+N more" modal */
.wrcc-cal__daylist {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

/* Each event is one unified block: title + time + location share the title's
   surface background and blue accent bar. */
.wrcc-cal__dayitem {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--clr-bg-surface);
    border-left: 3px solid var(--clr-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: var(--sp-2) var(--sp-3);
}

/* Title inside the block: drop the standalone chip background/border/padding. */
.wrcc-cal__dayitem .wrcc-cal-event--full {
    background: transparent;
    border-left: 0;
    border-radius: 0;
    padding: 0;
    white-space: normal;
    font-size: 0.95rem;
    font-weight: 600;
}

.wrcc-cal__dayitem .wrcc-cal-event--full:hover,
.wrcc-cal__dayitem .wrcc-cal-event--full:focus-visible {
    background: transparent;
    color: var(--clr-primary-dark);
    text-decoration: underline;
}

/* Time / location lines share the block background. */
.wrcc-cal__daymeta {
    display: block;
    font-size: 0.85rem;
    color: var(--clr-text-muted);
}

/* Empty-state message when a day has no events. */
.wrcc-cal__dayempty {
    color: var(--clr-text-muted);
}