@layer app {
/* ===================================================================
   LAYOUTS - FiveAlarmWeb
   Layout presets (data-layout), tenant appearance attributes (density,
   cards, foil, fontpair, watermark) and responsive breakpoints.
   Sections in original load order: figma-layouts, appearance, figma-responsive.
   =================================================================== */

/* ===================================================================
   >>> SECTION: figma-layouts
   =================================================================== */

/* ===================================================================
   FIGMA LAYOUTS — FiveAlarmWeb
   Applied via data-layout="..." on <html>, orthogonal to data-theme.
   3 layouts: (default top nav) | sidebar-left | municipal
     sidebar-left → "glass" frosted aesthetic + left vertical nav
     municipal    → classic light town-department look (duxburyfire.org-inspired)
   =================================================================== */

/* ===================================================================
   LAYOUT STRUCTURE: SIDEBAR (LEFT)
   The standard _FigmaNavbar is wrapped in .layout-sidenav and
   re-oriented into a fixed vertical rail on desktop. On mobile
   (<992px) it falls back to the normal top bar + hamburger collapse.
   =================================================================== */
@media (min-width: 992px) {
    /* Grid shell: rail in column 1, every other in-flow body child
       (banner, .layout, footer) in column 2. Fixed/hidden children
       (ribbon, modals, toasts, scripts) are not grid items. */
    html[data-layout="sidebar-left"] body.figma-theme {
        display: grid;
        grid-template-columns: var(--layout-sidenav-w, 260px) minmax(0, 1fr);
        grid-auto-rows: auto;
        align-items: start;
        transition: grid-template-columns 0.25s ease;
    }

    html[data-layout="sidebar-left"] body.figma-theme > * {
        grid-column: 2;
    }

    html[data-layout="sidebar-left"] body.figma-theme > .layout-sidenav {
        grid-column: 1;
        grid-row: 1 / span 50;
    }

    html[data-layout="sidebar-left"] .layout-sidenav {
        position: sticky;
        top: var(--ribbon-h, 30px);
        width: 100%;
        height: calc(100vh - var(--ribbon-h, 30px));
        display: flex;
        flex-direction: column;
        overflow: hidden;   /* the main nav list scrolls, not the rail — keeps the utility nav pinned to the screen bottom */
        /* High enough that flyout submenus (inside this stacking context)
           render above all page content; still below the ribbon (1040). */
        z-index: 1039;
        background: var(--figma-bg-navbar, var(--bg-body));
        border-right: 1px solid var(--border, rgba(255,255,255,0.12));
    }

    /* Re-orient the navbar vertically inside the rail.
       Base .figma-navbar is position:fixed full-width (figma-layout.css);
       inside the rail it must flow as a static vertical block. */
    html[data-layout="sidebar-left"] .layout-sidenav .figma-navbar {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 16px 0 !important;
        height: 100%;
        display: flex;
        flex-direction: column;
        min-height: 0;
        flex: 1 1 auto;
        /* Uniform rail color: the rail itself paints the background.
           backdrop-filter must be off — it creates a containing block that
           traps and clips the position:fixed flyout submenus. */
        background: transparent;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Kill the 100px logo gutter reserved for the horizontal top-nav */
    html[data-layout="sidebar-left"] .layout-sidenav .figma-navbar .navbar-content-left-aligned {
        padding-left: 0;
        padding-right: 0;
    }

    /* Banner offset assumes a fixed top navbar; rail replaces it */
    html[data-layout="sidebar-left"] .banner-wrap {
        margin-top: var(--ribbon-h, 30px) !important;
    }

    /* Content top padding compensating for the fixed navbar isn't needed */
    html[data-layout="sidebar-left"] body.figma-theme .layout > .content:not(.with-banner) {
        padding-top: 2rem;
    }

    html[data-layout="sidebar-left"] .layout-sidenav .navbar-content-left-aligned {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
        flex: 1 1 auto;
        min-height: 0;
    }

    html[data-layout="sidebar-left"] .layout-sidenav .navbar-brand {
        position: static;
        height: auto;
        margin: 0 auto 4px auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    html[data-layout="sidebar-left"] .layout-sidenav .navbar-brand img {
        height: 128px !important;
        width: auto !important;
        max-width: calc(var(--layout-sidenav-w, 260px) - 24px);
        object-fit: contain !important;
    }

    html[data-layout="sidebar-left"] .layout-sidenav .navbar-social-links-left {
        justify-content: center;
    }

    html[data-layout="sidebar-left"] .layout-sidenav .navbar-collapse {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        flex-basis: auto;
        width: 100%;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    /* Main menu lists scroll internally when too tall */
    html[data-layout="sidebar-left"] .layout-sidenav .navbar-collapse > .navbar-nav:not(.ms-auto) {
        overflow-y: auto;
        min-height: 0;
    }

    /* Utility items (back, donate, view toggle, join/login, account)
       pin to the bottom of the screen */
    html[data-layout="sidebar-left"] .layout-sidenav .navbar-collapse > .navbar-nav.ms-auto {
        margin-top: auto !important;
        flex-shrink: 0;
        padding-top: 12px;
        border-top: 1px solid var(--border, rgba(255,255,255,0.12));
    }

    /* ── Collapsed rail: only the patch shows ─────────────────────── */
    html.sidenav-collapsed[data-layout="sidebar-left"] body.figma-theme {
        grid-template-columns: var(--layout-sidenav-collapsed-w, 120px) minmax(0, 1fr);
    }

    html.sidenav-collapsed[data-layout="sidebar-left"] .layout-sidenav .navbar-collapse,
    html.sidenav-collapsed[data-layout="sidebar-left"] .layout-sidenav .navbar-social-links-left,
    html.sidenav-collapsed[data-layout="sidebar-left"] .layout-sidenav .navbar-mobile-actions {
        display: none !important;
    }

    html.sidenav-collapsed[data-layout="sidebar-left"] .layout-sidenav .navbar-brand img {
        height: 96px !important;
        max-width: calc(var(--layout-sidenav-collapsed-w, 120px) - 16px);
    }

    /* The patch is the collapse/expand toggle in sidebar layouts */
    html[data-layout="sidebar-left"] .layout-sidenav .navbar-brand {
        cursor: pointer;
    }

    html[data-layout="sidebar-left"] .layout-sidenav .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        margin: 0;
        width: 100%;
        gap: 2px;
    }

    html[data-layout="sidebar-left"] .layout-sidenav .nav-item {
        width: 100%;
    }

    html[data-layout="sidebar-left"] .layout-sidenav .nav-link {
        display: flex;
        align-items: center;
        width: 100%;
        min-width: 0;
        padding: 10px 14px;
        border-radius: 0;
        letter-spacing: 0.05em !important;
        white-space: normal;
        overflow-wrap: break-word;
    }

    /* Dropdown items follow the same rules so nothing clips */
    html[data-layout="sidebar-left"] .layout-sidenav .dropdown-item {
        white-space: normal;
        letter-spacing: 0.03em;
        min-width: 0;
    }

    /* Account row: truncate long display names instead of overflowing */
    html[data-layout="sidebar-left"] .layout-sidenav .nav-link .d-lg-inline {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: calc(var(--layout-sidenav-w, 260px) - 96px);
    }

    /* Submenus fly out beside the rail. The hover JS reparents the menu to
       <body> (class .sidenav-flyout) so no rail overflow/filter can clip it,
       then positions it at the parent item's row. */
    .dropdown-menu.sidenav-flyout {
        position: fixed;
        display: none;
        width: max-content;
        min-width: 220px;
        max-width: 320px;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
        background: var(--figma-bg-navbar, var(--bg-body));
        border: 1px solid var(--border, rgba(var(--fg-rgb), 0.12));
        box-shadow: 0 8px 24px rgba(0,0,0,0.45);
        border-radius: var(--figma-radius-sm, 6px);
        padding: 6px;
        margin: 0;
        transform: none;
        z-index: 2000;
    }

    .dropdown-menu.sidenav-flyout.show {
        display: block;
    }

    /* Hide the hamburger on desktop; nav is always expanded in the rail */
    html[data-layout="sidebar-left"] .layout-sidenav .navbar-toggler {
        display: none;
    }
}


/* ===================================================================
   STYLE: GLASS
   Maximum frosted glass. Every surface blurred & floating.
   Spring bounce animations, ultra-light 200 weight headings.
   =================================================================== */
html[data-layout="sidebar-left"] {
    --figma-radius-sm:    16px;
    --figma-radius-md:    24px;
    --figma-radius-lg:    32px;
    --figma-radius-xl:    40px;
    --figma-radius-full:  1000px;
    --figma-card-shadow:
        0 0 0 1px rgba(255,255,255,0.1),
        0 20px 60px rgba(0,0,0,0.5),
        0 4px 16px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.15),
        inset 0 -1px 0 rgba(0,0,0,0.1);
    --figma-card-blur: blur(32px);
    --border:             rgba(255,255,255,0.14);
    --figma-border-width: 1px;
    --figma-font-primary:    'Inter',system-ui,sans-serif;
    --figma-font-secondary:  'Inter',system-ui,sans-serif;
    --figma-font-heading:    'Inter',system-ui,sans-serif;
    --figma-heading-weight:  200;
    --figma-heading-spacing: 0.06em;
    --figma-transition-fast:   300ms cubic-bezier(0.34,1.56,0.64,1);
    --figma-transition-normal: 500ms cubic-bezier(0.34,1.56,0.64,1);
    --figma-backdrop-blur:       blur(40px);
    --figma-backdrop-blur-light: blur(20px);
}

html[data-layout="sidebar-left"] body.figma-theme,
html[data-layout="sidebar-left"] body.ind-theme { font-weight: 300; }
html[data-layout="sidebar-left"] body.figma-theme h1,
html[data-layout="sidebar-left"] body.ind-theme h1,
html[data-layout="sidebar-left"] body.figma-theme h2,
html[data-layout="sidebar-left"] body.ind-theme h2,
html[data-layout="sidebar-left"] body.figma-theme h3,
html[data-layout="sidebar-left"] body.ind-theme h3,
html[data-layout="sidebar-left"] body.figma-theme h4,
html[data-layout="sidebar-left"] body.ind-theme h4,
html[data-layout="sidebar-left"] body.figma-theme h5,
html[data-layout="sidebar-left"] body.ind-theme h5 { font-weight: 200 !important; letter-spacing: 0.06em !important; }

html[data-layout="sidebar-left"] body.figma-theme .card,
html[data-layout="sidebar-left"] body.ind-theme .card,
html[data-layout="sidebar-left"] body.figma-theme .figma-card,
html[data-layout="sidebar-left"] body.ind-theme .figma-card,
html[data-layout="sidebar-left"] body.figma-theme .figma-resource-card,
html[data-layout="sidebar-left"] body.ind-theme .figma-resource-card,
html[data-layout="sidebar-left"] body.figma-theme .figma-stats-container,
html[data-layout="sidebar-left"] body.ind-theme .figma-stats-container,
html[data-layout="sidebar-left"] body.figma-theme .inquiry-form-card,
html[data-layout="sidebar-left"] body.ind-theme .inquiry-form-card,
html[data-layout="sidebar-left"] body.figma-theme .apparatus-details-card,
html[data-layout="sidebar-left"] body.ind-theme .apparatus-details-card {
    background: rgba(255,255,255,0.04) !important;
    backdrop-filter: blur(32px) saturate(180%) brightness(1.1) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: var(--figma-radius-xl) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 24px 64px rgba(0,0,0,0.5),
        0 4px 16px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.15),
        inset 0 -1px 0 rgba(0,0,0,0.05) !important;
    transition: transform 300ms cubic-bezier(0.34,1.56,0.64,1), box-shadow 300ms ease !important;
}

html[data-layout="sidebar-left"] body.figma-theme .card:hover,
html[data-layout="sidebar-left"] body.ind-theme .card:hover,
html[data-layout="sidebar-left"] body.figma-theme .figma-card:hover,
html[data-layout="sidebar-left"] body.ind-theme .figma-card:hover,
html[data-layout="sidebar-left"] body.figma-theme .figma-resource-card:hover,
html[data-layout="sidebar-left"] body.ind-theme .figma-resource-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.14),
        0 40px 80px rgba(0,0,0,0.55),
        0 8px 32px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.2) !important;
    filter: none !important;
}

html[data-layout="sidebar-left"] body.figma-theme .card-header,
html[data-layout="sidebar-left"] body.ind-theme .card-header,
html[data-layout="sidebar-left"] body.figma-theme .figma-card-header,
html[data-layout="sidebar-left"] body.ind-theme .figma-card-header {
    background: rgba(255,255,255,0.03) !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: var(--figma-radius-xl) var(--figma-radius-xl) 0 0; font-weight: 300;
}

html[data-layout="sidebar-left"] body.figma-theme .btn,
html[data-layout="sidebar-left"] body.ind-theme .btn,
html[data-layout="sidebar-left"] body.figma-theme .figma-btn,
html[data-layout="sidebar-left"] body.ind-theme .figma-btn {
    border-radius: var(--figma-radius-full) !important; backdrop-filter: blur(16px);
    font-weight: 400 !important; letter-spacing: 0.04em;
    transition: all 300ms cubic-bezier(0.34,1.56,0.64,1) !important;
}

html[data-layout="sidebar-left"] body.figma-theme .btn-primary,
html[data-layout="sidebar-left"] body.ind-theme .btn-primary,
html[data-layout="sidebar-left"] body.figma-theme .figma-btn-primary,
html[data-layout="sidebar-left"] body.ind-theme .figma-btn-primary {
    background: rgba(255,255,255,0.1) !important; backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.22) !important; color: var(--text) !important;
    border-radius: var(--figma-radius-full) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.08) !important;
    padding: 14px 36px !important;
}

html[data-layout="sidebar-left"] body.figma-theme .btn-primary:hover,
html[data-layout="sidebar-left"] body.ind-theme .btn-primary:hover,
html[data-layout="sidebar-left"] body.figma-theme .figma-btn-primary:hover,
html[data-layout="sidebar-left"] body.ind-theme .figma-btn-primary:hover {
    background: rgba(255,255,255,0.18) !important; border-color: rgba(255,255,255,0.38) !important;
    transform: translateY(-3px) scale(1.04) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 16px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.25) !important;
}

html[data-layout="sidebar-left"] body.figma-theme input.form-control,
html[data-layout="sidebar-left"] body.ind-theme input.form-control,
html[data-layout="sidebar-left"] body.figma-theme textarea.form-control,
html[data-layout="sidebar-left"] body.ind-theme textarea.form-control,
html[data-layout="sidebar-left"] body.figma-theme select.form-select,
html[data-layout="sidebar-left"] body.ind-theme select.form-select {
    background: rgba(255,255,255,0.05) !important; backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.12) !important; border-radius: var(--figma-radius-lg) !important;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.2) !important; padding: 14px 20px !important; font-weight: 300;
}

html[data-layout="sidebar-left"] body.figma-theme input.form-control:focus,
html[data-layout="sidebar-left"] body.ind-theme input.form-control:focus,
html[data-layout="sidebar-left"] body.figma-theme textarea.form-control:focus,
html[data-layout="sidebar-left"] body.ind-theme textarea.form-control:focus,
html[data-layout="sidebar-left"] body.figma-theme select.form-select:focus,
html[data-layout="sidebar-left"] body.ind-theme select.form-select:focus {
    background: rgba(255,255,255,0.09) !important; border-color: rgba(255,255,255,0.3) !important;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.15), 0 0 0 4px rgba(255,255,255,0.06), 0 0 20px rgba(255,255,255,0.05) !important;
    transform: scale(1.01);
}

html[data-layout="sidebar-left"] body.figma-theme .form-label,
html[data-layout="sidebar-left"] body.ind-theme .form-label { font-weight: 300 !important; letter-spacing: 0.05em; font-size: 0.8rem; text-transform: uppercase; }

html[data-layout="sidebar-left"] .figma-navbar { background: rgba(0,0,0,0.15) !important; backdrop-filter: blur(40px) saturate(200%) brightness(1.05) !important; -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.05) !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 4px 24px rgba(0,0,0,0.2); overflow: visible; transform: translateZ(0); }
/* Patch/logo: keep it above the glass compositing layer and prevent edge clipping */
html[data-layout="sidebar-left"] .figma-navbar .navbar-brand { overflow: visible; isolation: isolate; top: 0; }
html[data-layout="sidebar-left"] .figma-navbar .navbar-brand img { border-radius: 0 !important; }
html[data-layout="sidebar-left"] .figma-navbar .nav-link:hover,
html[data-layout="sidebar-left"] .figma-navbar .nav-link.active { background: rgba(255,255,255,0.08) !important; backdrop-filter: blur(12px); border-radius: var(--figma-radius-md) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); }
html[data-layout="sidebar-left"] .figma-navbar .btn-join { background: rgba(255,255,255,0.1) !important; backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.2) !important; border-radius: var(--figma-radius-full) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 4px 12px rgba(0,0,0,0.25); }
html[data-layout="sidebar-left"] .figma-navbar .dropdown-menu { background: rgba(8,8,20,0.5) !important; backdrop-filter: blur(40px) saturate(180%) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: var(--figma-radius-xl) !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 24px 64px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08) !important; }
html[data-layout="sidebar-left"] .figma-navbar .dropdown-item { border-radius: var(--figma-radius-md) !important; color: #ffffff !important; }
html[data-layout="sidebar-left"] .figma-navbar .dropdown-item:hover { background: rgba(255,255,255,0.08) !important; color: #ffffff !important; transform: translateX(4px); }
html[data-layout="sidebar-left"] .dept-name-header { background: rgba(0,0,0,0.15) !important; backdrop-filter: blur(40px) saturate(200%) brightness(1.05) !important; -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.05) !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
/* Announcements section container — identical glass recipe as navbar/header so the
   whole top of the homepage is one continuous frosted surface (overrides the
   light-theme white-band rule, which otherwise leaves a white bar here). */
html[data-layout="sidebar-left"] body.figma-theme .hp-announcements-section,
html[data-layout="sidebar-left"] body.ind-theme .hp-announcements-section {
    background: rgba(0,0,0,0.15) !important;
    backdrop-filter: blur(40px) saturate(200%) brightness(1.05) !important;
    -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.05);
    border-top: none !important;
    border-bottom: none !important;
}
/* Announcement alert strip — frosted, matching the navbar instead of opaque slate */
html[data-layout="sidebar-left"] .hp-ann-alert-strip {
    --ann-strip-bg: rgba(0,0,0,0.28);
    --ann-strip-border: rgba(255,255,255,0.14);
    --ann-strip-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 6px 28px rgba(0,0,0,0.35);
    backdrop-filter: blur(40px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(160%) !important;
}
/* Glass + light theme: frosted white so text stays dark-on-light */
html[data-theme="light"][data-layout="sidebar-left"] body.figma-theme .hp-ann-alert-strip {
    --ann-strip-bg: rgba(255,255,255,0.75);
}
html[data-layout="sidebar-left"] .hero-stats-banner { backdrop-filter: blur(32px) saturate(180%); background: rgba(0,0,0,0.2) !important; border-top: 1px solid rgba(255,255,255,0.1); }
html[data-layout="sidebar-left"] .hero-stat-item.dark-bg { background: rgba(255,255,255,0.06) !important; backdrop-filter: blur(32px); }
html[data-layout="sidebar-left"] .hero-stat-menu { background: rgba(5,5,15,0.6) !important; backdrop-filter: blur(40px) saturate(180%); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--figma-radius-xl); }
html[data-layout="sidebar-left"] .stat-menu-item { border-radius: var(--figma-radius-md); }
html[data-layout="sidebar-left"] .stat-menu-item:hover { background: rgba(255,255,255,0.07) !important; transform: translateX(4px); }
html[data-layout="sidebar-left"] .quick-link { background: rgba(255,255,255,0.05) !important; backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--figma-radius-full); }
html[data-layout="sidebar-left"] .quick-link:hover { background: rgba(255,255,255,0.12) !important; transform: translateY(-3px) scale(1.03); }
html[data-layout="sidebar-left"] .link-count { border-radius: var(--figma-radius-full); }
html[data-layout="sidebar-left"] .badge { border-radius: var(--figma-radius-full) !important; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.12) !important; }
html[data-layout="sidebar-left"] .sidebar-figma { background: rgba(0,0,0,0.25) !important; backdrop-filter: blur(40px) saturate(160%); border-right: 1px solid rgba(255,255,255,0.08) !important; }
html[data-layout="sidebar-left"] .sidebar-figma .nav-link { border-radius: var(--figma-radius-lg) !important; }
html[data-layout="sidebar-left"] .sidebar-figma .nav-link:hover { background: rgba(255,255,255,0.07) !important; transform: translateX(4px); }
html[data-layout="sidebar-left"] .sidebar-figma .nav-link.active { background: rgba(255,255,255,0.1) !important; backdrop-filter: blur(12px); border-radius: var(--figma-radius-lg) !important; border-left: none; }
html[data-layout="sidebar-left"] .alert { backdrop-filter: blur(20px); background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: var(--figma-radius-xl) !important; font-weight: 300; }
html[data-layout="sidebar-left"] .figma-progress-bar { background: rgba(255,255,255,0.05); backdrop-filter: blur(12px); border-radius: var(--figma-radius-full); height: 36px; }
html[data-layout="sidebar-left"] .modal-content { background: rgba(10,10,20,0.5) !important; backdrop-filter: blur(40px) saturate(180%); border: 1px solid rgba(255,255,255,0.1) !important; border-radius: var(--figma-radius-xl) !important; }
html[data-layout="sidebar-left"] .toast { background: rgba(10,10,20,0.55); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--figma-radius-lg); }
html[data-layout="sidebar-left"] .figma-tabs { background: rgba(255,255,255,0.04); backdrop-filter: blur(16px); border-radius: var(--figma-radius-full); }
html[data-layout="sidebar-left"] .figma-tab.active { background: rgba(255,255,255,0.14); border-radius: var(--figma-radius-full); }


/* ===================================================================
   STYLE: MUNICIPAL CLASSIC
   Inspired by duxburyfire.org — a traditional New England town fire
   department website. Bright white canvas, deep navy navigation band,
   fire-engine red accents, serif department masthead, flat bordered
   cards, uppercase small-caps navigation. Overrides data-theme to
   always render light — this preset IS the theme.
   =================================================================== */
html[data-theme="municipal"] {
    /* Palette — locked light regardless of data-theme */
    --muni-navy:      #1b2a4a;
    --muni-navy-dark: #12203a;
    --muni-red:       #b22222;
    --muni-red-dark:  #8e1a1a;
    --muni-gold:      #c9a227;
    --muni-paper:     #ffffff;
    --muni-paper-alt: #f4f5f7;
    --muni-ink:       #1e2430;
    --muni-ink-soft:  #4a5261;

    --bg-body:       var(--muni-paper);
    --bg-surface:    var(--muni-paper-alt);
    --bg-card:       #ffffff;
    --figma-bg-navbar:     var(--muni-navy);

    --fg-rgb:        30, 36, 48;
    --text:          var(--muni-ink);
    --text-secondary: var(--muni-ink-soft);
    --text-muted:    #6c7484;
    --text-disabled: #9aa1ae;

    --brand:         var(--muni-red);
    --brand-dark:    var(--muni-red-dark);

    --border:        #d8dce3;
    --border-subtle: #e7eaef;
    --figma-border-width:  1px;

    --figma-radius-sm:   3px;
    --figma-radius-md:   4px;
    --figma-radius-lg:   6px;
    --figma-radius-xl:   8px;
    --figma-radius-full: 999px;

    --figma-card-shadow: 0 1px 3px rgba(27,42,74,0.10);
    --figma-card-blur:   none;

    --figma-font-primary:   Georgia, 'Times New Roman', serif;
    --figma-font-secondary: 'Segoe UI', Tahoma, system-ui, sans-serif;
    --figma-font-heading:   Georgia, 'Times New Roman', serif;
    --figma-heading-weight:  700;
    --figma-heading-spacing: 0.01em;

    --figma-btn-primary-bg:       var(--muni-red);
    --figma-btn-primary-bg-hover: var(--muni-red-dark);
    --figma-btn-primary-text:     #ffffff;

    --figma-input-bg:     #ffffff;
    --figma-input-border: #c3c9d2;
    --figma-input-text:   var(--muni-ink);

    --figma-gradient-card-primary: #ffffff;

    /* Navbar tokens — solid navy band */
    --figma-navbar-bg:               var(--muni-navy);
    --figma-navbar-link-color:       rgba(255,255,255,0.92);
    --figma-navbar-link-hover-bg:    rgba(255,255,255,0.10);
    --figma-navbar-link-active-bg:   var(--muni-red);
    --figma-navbar-dropdown-bg:      var(--muni-navy-dark);
    --figma-navbar-dropdown-border:  rgba(255,255,255,0.15);
    --figma-navbar-dropdown-item-hover-bg: rgba(255,255,255,0.10);
    --figma-navbar-toggler-bg:       rgba(255,255,255,0.08);
    --figma-navbar-toggler-border:   rgba(255,255,255,0.30);
    --figma-navbar-mobile-border:    rgba(255,255,255,0.20);
    --figma-navbar-join-shadow:      none;

    --figma-transition-fast:   150ms ease;
    --figma-transition-normal: 250ms ease;
    --figma-backdrop-blur:       none;
    --figma-backdrop-blur-light: none;
}

/* Body canvas — force light regardless of theme */
html[data-theme="municipal"] body.figma-theme,
html[data-theme="municipal"] body.ind-theme {
    background: var(--muni-paper) !important;
    color: var(--muni-ink) !important;
    font-family: var(--figma-font-secondary) !important;
}

/* Serif headings, navy ink */
html[data-theme="municipal"] body.figma-theme h1,
html[data-theme="municipal"] body.figma-theme h2,
html[data-theme="municipal"] body.figma-theme h3,
html[data-theme="municipal"] body.figma-theme h4,
html[data-theme="municipal"] body.figma-theme h5,
html[data-theme="municipal"] body.ind-theme h1,
html[data-theme="municipal"] body.ind-theme h2,
html[data-theme="municipal"] body.ind-theme h3,
html[data-theme="municipal"] body.ind-theme h4,
html[data-theme="municipal"] body.ind-theme h5 {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700 !important;
    color: var(--muni-navy) !important;
    letter-spacing: 0.01em !important;
}

/* Navbar: solid navy band with a gold keyline underneath */
html[data-theme="municipal"] .figma-navbar {
    background: var(--muni-navy) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 3px solid var(--muni-gold) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

html[data-theme="municipal"] .figma-navbar .nav-link {
    color: rgba(255,255,255,0.92) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-family: 'Segoe UI', Tahoma, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
}

html[data-theme="municipal"] .figma-navbar .nav-link:hover {
    background: rgba(255,255,255,0.10) !important;
    color: #ffffff !important;
}

html[data-theme="municipal"] .figma-navbar .nav-link.active {
    background: var(--muni-red) !important;
    color: #ffffff !important;
}

html[data-theme="municipal"] .figma-navbar .dropdown-menu {
    background: var(--muni-navy-dark) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-top: 3px solid var(--muni-gold);
    border-radius: 0 !important;
    backdrop-filter: none !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3) !important;
}

html[data-theme="municipal"] .figma-navbar .dropdown-item {
    color: rgba(255,255,255,0.9) !important;
    text-transform: uppercase;
    font-size: 12px !important;
    letter-spacing: 0.06em;
    border-radius: 0 !important;
}

html[data-theme="municipal"] .figma-navbar .dropdown-item:hover {
    background: rgba(255,255,255,0.10) !important;
    color: #ffffff !important;
}

html[data-theme="municipal"] .figma-navbar .btn-join {
    background: var(--muni-red) !important;
    color: #ffffff !important;
    border-radius: 3px !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700 !important;
    box-shadow: none;
}

/* Department masthead — centered serif nameplate over white */
html[data-theme="municipal"] .dept-name-header {
    background: var(--muni-paper) !important;
    border-bottom: 4px double var(--muni-navy) !important;
    box-shadow: none;
    text-align: center;
    padding: 2.5rem 1.5rem;
}

html[data-theme="municipal"] .dept-name-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    color: var(--muni-navy);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: clamp(2rem, 5vw, 3.5rem) !important;
    line-height: 1.15;
    text-shadow: none;
    background: none;
    -webkit-text-fill-color: var(--muni-navy);
}

html[data-theme="municipal"] .dept-name-tagline {
    color: var(--muni-red);
    font-family: Georgia, serif;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.04em;
}

/* Cards — flat white, hairline border, navy header strip */
html[data-theme="municipal"] body.figma-theme .card,
html[data-theme="municipal"] body.ind-theme .card,
html[data-theme="municipal"] body.figma-theme .figma-card,
html[data-theme="municipal"] body.ind-theme .figma-card,
html[data-theme="municipal"] body.figma-theme .figma-resource-card,
html[data-theme="municipal"] body.ind-theme .figma-resource-card,
html[data-theme="municipal"] body.figma-theme .figma-stats-container,
html[data-theme="municipal"] body.ind-theme .figma-stats-container,
html[data-theme="municipal"] body.figma-theme .inquiry-form-card,
html[data-theme="municipal"] body.ind-theme .inquiry-form-card,
html[data-theme="municipal"] body.figma-theme .apparatus-details-card,
html[data-theme="municipal"] body.ind-theme .apparatus-details-card {
    background: #ffffff !important;
    backdrop-filter: none !important;
    border: 1px solid var(--border) !important;
    border-top: 4px solid var(--muni-navy);
    border-radius: var(--figma-radius-md) !important;
    box-shadow: 0 1px 3px rgba(27,42,74,0.10) !important;
    color: var(--muni-ink) !important;
    transition: box-shadow 150ms ease !important;
}

html[data-theme="municipal"] body.figma-theme .card:hover,
html[data-theme="municipal"] body.ind-theme .card:hover,
html[data-theme="municipal"] body.figma-theme .figma-card:hover,
html[data-theme="municipal"] body.ind-theme .figma-card:hover,
html[data-theme="municipal"] body.figma-theme .figma-resource-card:hover,
html[data-theme="municipal"] body.ind-theme .figma-resource-card:hover {
    transform: none;
    box-shadow: 0 4px 12px rgba(27,42,74,0.18) !important;
    filter: none !important;
}

html[data-theme="municipal"] body.figma-theme .card-header,
html[data-theme="municipal"] body.ind-theme .card-header,
html[data-theme="municipal"] body.figma-theme .figma-card-header,
html[data-theme="municipal"] body.ind-theme .figma-card-header {
    background: var(--muni-paper-alt) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--muni-navy) !important;
    font-family: Georgia, serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.85rem;
    border-radius: 0;
}

/* Buttons — flat, small radius, uppercase */
html[data-theme="municipal"] body.figma-theme .btn,
html[data-theme="municipal"] body.ind-theme .btn,
html[data-theme="municipal"] body.figma-theme .figma-btn,
html[data-theme="municipal"] body.ind-theme .figma-btn {
    border-radius: 3px !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700 !important;
    font-family: 'Segoe UI', Tahoma, sans-serif !important;
    box-shadow: none !important;
}

html[data-theme="municipal"] body.figma-theme .btn-primary,
html[data-theme="municipal"] body.ind-theme .btn-primary,
html[data-theme="municipal"] body.figma-theme .figma-btn-primary,
html[data-theme="municipal"] body.ind-theme .figma-btn-primary {
    background: var(--muni-red) !important;
    border: 1px solid var(--muni-red-dark) !important;
    color: #ffffff !important;
}

html[data-theme="municipal"] body.figma-theme .btn-primary:hover,
html[data-theme="municipal"] body.ind-theme .btn-primary:hover,
html[data-theme="municipal"] body.figma-theme .figma-btn-primary:hover,
html[data-theme="municipal"] body.ind-theme .figma-btn-primary:hover {
    background: var(--muni-red-dark) !important;
    transform: none !important;
}

html[data-theme="municipal"] body.figma-theme .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning),
html[data-theme="municipal"] body.ind-theme .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning) {
    background: var(--muni-navy) !important;
    border: 1px solid var(--muni-navy-dark) !important;
    color: #ffffff !important;
}

html[data-theme="municipal"] body.figma-theme .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):hover,
html[data-theme="municipal"] body.ind-theme .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):hover {
    background: var(--muni-navy-dark) !important;
}

/* Forms — crisp bordered inputs on white */
html[data-theme="municipal"] body.figma-theme input.form-control,
html[data-theme="municipal"] body.ind-theme input.form-control,
html[data-theme="municipal"] body.figma-theme textarea.form-control,
html[data-theme="municipal"] body.ind-theme textarea.form-control,
html[data-theme="municipal"] body.figma-theme select.form-select,
html[data-theme="municipal"] body.ind-theme select.form-select {
    background: #ffffff !important;
    border: 1px solid #c3c9d2 !important;
    border-radius: 3px !important;
    color: var(--muni-ink) !important;
    box-shadow: none !important;
}

html[data-theme="municipal"] body.figma-theme input.form-control:focus,
html[data-theme="municipal"] body.ind-theme input.form-control:focus,
html[data-theme="municipal"] body.figma-theme textarea.form-control:focus,
html[data-theme="municipal"] body.ind-theme textarea.form-control:focus,
html[data-theme="municipal"] body.figma-theme select.form-select:focus,
html[data-theme="municipal"] body.ind-theme select.form-select:focus {
    border-color: var(--muni-navy) !important;
    box-shadow: 0 0 0 3px rgba(27,42,74,0.15) !important;
    outline: none;
}

html[data-theme="municipal"] body.figma-theme .form-label,
html[data-theme="municipal"] body.ind-theme .form-label {
    color: var(--muni-navy) !important;
    font-weight: 700 !important;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Tables */
html[data-theme="municipal"] body.figma-theme .table,
html[data-theme="municipal"] body.ind-theme .table {
    color: var(--muni-ink) !important;
    --bs-table-bg: transparent;
    --bs-table-color: var(--muni-ink);
}

html[data-theme="municipal"] body.figma-theme .table thead th,
html[data-theme="municipal"] body.ind-theme .table thead th {
    background: var(--muni-navy) !important;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 0.06em !important;
    font-size: 0.75rem;
    border-bottom: none !important;
}

html[data-theme="municipal"] body.figma-theme .table tbody td,
html[data-theme="municipal"] body.ind-theme .table tbody td {
    border-top: 1px solid var(--border) !important;
}

html[data-theme="municipal"] body.figma-theme .table-striped > tbody > tr:nth-of-type(odd) > *,
html[data-theme="municipal"] body.ind-theme .table-striped > tbody > tr:nth-of-type(odd) > * {
    background: var(--muni-paper-alt) !important;
    color: var(--muni-ink) !important;
}

/* Sidebar admin nav (member area left rail) */
html[data-theme="municipal"] .sidebar-figma {
    background: var(--muni-paper-alt) !important;
    border-right: 1px solid var(--border) !important;
}

html[data-theme="municipal"] .sidebar-figma .nav-link {
    color: var(--muni-ink-soft) !important;
    border-radius: 3px !important;
    font-weight: 600 !important;
}

html[data-theme="municipal"] .sidebar-figma .nav-link:hover {
    background: rgba(27,42,74,0.08) !important;
    color: var(--muni-navy) !important;
}

html[data-theme="municipal"] .sidebar-figma .nav-link.active {
    background: var(--muni-navy) !important;
    color: #ffffff !important;
}

/* Alerts, badges, progress, modals, toasts */
html[data-theme="municipal"] .alert {
    background: var(--muni-paper-alt) !important;
    border: 1px solid var(--border) !important;
    border-left: 5px solid var(--muni-red);
    border-radius: 3px !important;
    color: var(--muni-ink) !important;
}

html[data-theme="municipal"] .badge {
    border-radius: 3px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

html[data-theme="municipal"] .figma-progress-bar {
    background: var(--muni-paper-alt);
    border: 1px solid var(--border);
    border-radius: 3px;
}

html[data-theme="municipal"] .figma-progress-fill {
    border-radius: 2px;
    background: var(--muni-red);
}

html[data-theme="municipal"] .modal-content {
    background: #ffffff !important;
    backdrop-filter: none;
    border: 1px solid var(--border) !important;
    border-top: 4px solid var(--muni-navy);
    border-radius: 4px !important;
    color: var(--muni-ink) !important;
}

html[data-theme="municipal"] .toast {
    background: #ffffff;
    border: 1px solid var(--border);
    border-left: 5px solid var(--muni-navy);
    border-radius: 3px;
    color: var(--muni-ink);
}

/* Links */
html[data-theme="municipal"] body.figma-theme a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge),
html[data-theme="municipal"] body.ind-theme a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge) {
    color: var(--muni-red) !important;
}

/* Footer — navy band echoing the navbar */
html[data-theme="municipal"] .figma-footer,
html[data-theme="municipal"] footer {
    background: var(--muni-navy);
    color: rgba(255,255,255,0.85);
    border-top: 3px solid var(--muni-gold);
}

html[data-theme="municipal"] .figma-footer a,
html[data-theme="municipal"] footer a {
    color: #ffffff !important;
}

/* Quick links / stat chips on home */
html[data-theme="municipal"] .quick-link {
    background: #ffffff !important;
    border: 1px solid var(--border);
    border-left: 4px solid var(--muni-red);
    border-radius: 3px;
    color: var(--muni-navy) !important;
    font-weight: 700;
}

html[data-theme="municipal"] .hero-stats-banner {
    background: var(--muni-navy) !important;
    
    border-top: 3px solid var(--muni-gold);
}

html[data-theme="municipal"] .hero-stat-number { color: #ffffff !important; }
html[data-theme="municipal"] .hero-stat-label  { color: rgba(255,255,255,0.75); text-transform: uppercase; letter-spacing: 0.1em; }

/* Tabs */
html[data-theme="municipal"] .figma-tabs {
    background: var(--muni-paper-alt);
    border: 1px solid var(--border);
    border-radius: 3px;
}

html[data-theme="municipal"] .figma-tab.active {
    background: var(--muni-navy);
    color: #ffffff;
    border-radius: 2px;
}

/* ── MUNICIPAL: full homepage anatomy ─────────────────────────────
   The hp-* sections hardcode dark-theme colors; rebuild every band
   as a bright, traditional town-department page: white/gray bands,
   navy headings, red eyebrows, shorter hero with navy stat band. */

/* Hero: shorter, formal — like a masthead photo, not a takeover */
html[data-theme="municipal"] .figma-hero {
    min-height: 480px !important;
}

html[data-theme="municipal"] .hero-stats-banner {
    position: relative !important;
    background: var(--muni-navy) !important;
    
    border-top: 3px solid var(--muni-gold);
}

html[data-theme="municipal"] .hero-stat-item.dark-bg {
    background: var(--muni-red) !important;
}

html[data-theme="municipal"] .hero-stat-number {
    font-family: Georgia, serif;
    font-size: 3rem !important;
    text-shadow: none;
}

/* Announcements: parchment notice board strip */
html[data-theme="municipal"] .hp-announcements-section {
    background: var(--muni-paper-alt) !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid var(--border) !important;
    --ann-strip-bg: #ffffff;
    --ann-strip-border: var(--border);
    --ann-strip-text: var(--muni-ink);
    --ann-strip-hover-bg: #f0f2f5;
    --ann-strip-text-hover: var(--muni-navy);
    --ann-strip-shadow: 0 1px 3px rgba(27,42,74,0.10);
}

html[data-theme="municipal"] .hp-ann-alert-strip {
    border-radius: 0;
    border-left: 5px solid var(--muni-red);
}

/* Shared section typography */
html[data-theme="municipal"] .hp-section-eyebrow {
    color: var(--muni-red);
    font-family: 'Segoe UI', Tahoma, sans-serif;
}

html[data-theme="municipal"] .hp-section-title {
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--muni-navy);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 4px double var(--muni-navy);
    display: inline-block;
}

/* Alternating white / soft-gray bands, no gradients or blur */
html[data-theme="municipal"] .hp-info-cards-section,
html[data-theme="municipal"] .hp-stats-section,
html[data-theme="municipal"] .hp-recruit-section {
    background: var(--muni-paper) !important;
    backdrop-filter: none !important;
    border-color: var(--border);
}

html[data-theme="municipal"] .hp-about-section,
html[data-theme="municipal"] .hp-companies-section,
html[data-theme="municipal"] .hp-safety-section,
html[data-theme="municipal"] .hp-news-section,
html[data-theme="municipal"] .hp-dept-tiles-section {
    background: var(--muni-paper-alt);
    backdrop-filter: none;
    border-color: var(--border);
}

/* Info cards: flat white with navy top strip (matches card system) */
html[data-theme="municipal"] .hp-info-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-top: 4px solid var(--muni-navy);
    border-radius: 4px;
}

html[data-theme="municipal"] .hp-info-card:hover {
    transform: none;
    background: #ffffff;
    border-color: var(--border);
    border-top-color: var(--muni-red);
    box-shadow: 0 4px 12px rgba(27,42,74,0.18);
}

html[data-theme="municipal"] .hp-info-card-icon  { color: var(--muni-red); }
html[data-theme="municipal"] .hp-info-card-title { color: var(--muni-navy); font-family: Georgia, serif; }
html[data-theme="municipal"] .hp-info-card-body  { color: var(--muni-ink-soft); }
html[data-theme="municipal"] .hp-info-card-link  { color: var(--muni-red) !important; }

/* About: bright, formal */
html[data-theme="municipal"] .hp-about-body { color: var(--muni-ink) !important; }
html[data-theme="municipal"] .hp-about-link { color: var(--muni-red); }
html[data-theme="municipal"] .hp-about-image-placeholder {
    background: #ffffff;
    border-color: var(--muni-navy);
    color: var(--muni-navy);
}
html[data-theme="municipal"] .hp-patch-img { filter: none; }

/* Companies / firehouses */
html[data-theme="municipal"] .hp-company-card { border-bottom: 1px solid var(--border); }
html[data-theme="municipal"] .hp-company-name { color: var(--muni-navy); font-family: Georgia, serif; }
html[data-theme="municipal"] .hp-company-address { color: var(--muni-ink-soft); }
html[data-theme="municipal"] .hp-company-desc { color: var(--muni-ink); }
html[data-theme="municipal"] .hp-company-cta { color: var(--muni-red) !important; }
html[data-theme="municipal"] .hp-company-img {
    border-radius: 4px;
    background: #ffffff;
    border: 1px solid var(--border);
}
html[data-theme="municipal"] .hp-company-img-placeholder { color: var(--muni-navy); opacity: 0.4; }

/* Call volume stats: navy ledger numbers */
html[data-theme="municipal"] .hp-stat-block { border-color: var(--border); }
html[data-theme="municipal"] .hp-stat-number {
    font-family: Georgia, serif;
    color: var(--muni-navy);
    text-shadow: none;
}
html[data-theme="municipal"] .hp-stat-block-current .hp-stat-number { color: var(--muni-red); }
html[data-theme="municipal"] .hp-stat-year { color: var(--muni-ink-soft); }

/* Department tiles */
html[data-theme="municipal"] .hp-dept-tile-icon  { color: var(--muni-red); }
html[data-theme="municipal"] .hp-dept-tile-label { color: var(--muni-navy); font-family: Georgia, serif; }
html[data-theme="municipal"] .hp-dept-tile-sub   { color: var(--muni-ink-soft); }

/* Safety tiles */
html[data-theme="municipal"] .hp-safety-tile {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--muni-ink);
}
html[data-theme="municipal"] .hp-safety-tile:hover {
    transform: none;
    background: #ffffff;
    border-color: var(--muni-navy);
    box-shadow: 0 4px 12px rgba(27,42,74,0.18);
}
html[data-theme="municipal"] .hp-safety-tile-icon  { color: var(--muni-red); }
html[data-theme="municipal"] .hp-safety-tile-title { color: var(--muni-navy); }
html[data-theme="municipal"] .hp-safety-tile-body  { color: var(--muni-ink-soft); }
html[data-theme="municipal"] .hp-safety-tile-link  { color: var(--muni-red); }

/* Administration band: navy civic strip */
html[data-theme="municipal"] .hp-admin-section {
    background: var(--muni-navy);
    border-color: var(--muni-navy-dark);
}
html[data-theme="municipal"] .hp-admin-section .hp-section-eyebrow { color: var(--muni-gold); }
html[data-theme="municipal"] .hp-admin-section .hp-section-title {
    color: #ffffff;
    border-bottom-color: var(--muni-gold);
}
html[data-theme="municipal"] .hp-admin-body { color: rgba(255,255,255,0.85); }
html[data-theme="municipal"] .hp-admin-link-item { color: #ffffff; text-decoration: underline; }
html[data-theme="municipal"] .hp-admin-link-item:hover { color: var(--muni-gold); }

/* News: newspaper-style flat cards */
html[data-theme="municipal"] .hp-news-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 4px;
}
html[data-theme="municipal"] .hp-news-card:hover {
    transform: none;
    background: #ffffff;
    border-color: var(--muni-navy);
    box-shadow: 0 4px 12px rgba(27,42,74,0.18);
}
html[data-theme="municipal"] .hp-news-title   { color: var(--muni-navy); font-family: Georgia, serif; }
html[data-theme="municipal"] .hp-news-excerpt { color: var(--muni-ink-soft); }
html[data-theme="municipal"] .hp-news-date    { color: var(--muni-ink-soft); }
html[data-theme="municipal"] .hp-news-thumb   { background: var(--muni-paper-alt); }
html[data-theme="municipal"] .hp-news-tag {
    background: var(--muni-navy);
    color: #ffffff;
    border: none;
    border-radius: 2px;
}
html[data-theme="municipal"] .hp-news-tag-featured {
    background: var(--muni-red);
    color: #ffffff;
}
html[data-theme="municipal"] .hp-read-more-btn {
    background: var(--muni-red);
    border: 1px solid var(--muni-red-dark);
    color: #ffffff;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
html[data-theme="municipal"] .hp-read-more-btn:hover { background: var(--muni-red-dark); }

/* Spotlight + recruit */
html[data-theme="municipal"] .hp-spotlight-band { background: var(--muni-paper); }
html[data-theme="municipal"] .hp-spotlight-body { color: var(--muni-ink); }
html[data-theme="municipal"] .hp-spotlight-media {
    border-radius: 4px;
    border: 1px solid var(--border);
    background: #ffffff;
}
html[data-theme="municipal"] .hp-recruit-video-wrap {
    border-radius: 4px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(27,42,74,0.18);
}


/* ===================================================================
   STYLE: SIMPLE
   Inspired by town.duxbury.ma.us — a plain municipal-government CMS
   look. Quiet and utilitarian: white canvas, soft gray panels, one
   muted steel-blue for nav/links, plain sans-serif type everywhere,
   hairline borders, no uppercase, no shadows, no gradients.
   Locked light regardless of data-theme.
   =================================================================== */
html[data-theme="simple"] {
    --smp-blue:      #33608c;
    --smp-blue-dark: #27496b;
    --smp-paper:     #ffffff;
    --smp-panel:     #f2f4f6;
    --smp-ink:       #2b2f36;
    --smp-ink-soft:  #575e68;
    --smp-border:    #d7dbe0;

    --bg-body:       var(--smp-paper);
    --bg-surface:    var(--smp-panel);
    --bg-card:       #ffffff;
    --figma-bg-navbar:     var(--smp-blue);

    --fg-rgb:        43, 47, 54;
    --text:          var(--smp-ink);
    --text-secondary: var(--smp-ink-soft);
    --text-muted:    #78808b;
    --text-disabled: #a2a8b1;

    --brand:         var(--smp-blue);
    --brand-dark:    var(--smp-blue-dark);

    --border:        var(--smp-border);
    --border-subtle: #e6e9ec;
    --figma-border-width:  1px;

    --figma-radius-sm:   2px;
    --figma-radius-md:   3px;
    --figma-radius-lg:   4px;
    --figma-radius-xl:   4px;
    --figma-radius-full: 999px;

    --figma-card-shadow: none;
    --figma-card-blur:   none;

    --figma-font-primary:   'Segoe UI', Arial, Helvetica, sans-serif;
    --figma-font-secondary: 'Segoe UI', Arial, Helvetica, sans-serif;
    --figma-font-heading:   'Segoe UI', Arial, Helvetica, sans-serif;
    --figma-heading-weight:  600;
    --figma-heading-spacing: 0;

    --figma-btn-primary-bg:       var(--smp-blue);
    --figma-btn-primary-bg-hover: var(--smp-blue-dark);
    --figma-btn-primary-text:     #ffffff;

    --figma-input-bg:     #ffffff;
    --figma-input-border: #b9c0c8;
    --figma-input-text:   var(--smp-ink);

    --figma-gradient-card-primary: #ffffff;

    --figma-navbar-bg:               var(--smp-blue);
    --figma-navbar-link-color:       rgba(255,255,255,0.95);
    --figma-navbar-link-hover-bg:    rgba(255,255,255,0.12);
    --figma-navbar-link-active-bg:   var(--smp-blue-dark);
    --figma-navbar-dropdown-bg:      #ffffff;
    --figma-navbar-dropdown-border:  var(--smp-border);
    --figma-navbar-dropdown-item-hover-bg: var(--smp-panel);
    --figma-navbar-toggler-bg:       rgba(255,255,255,0.10);
    --figma-navbar-toggler-border:   rgba(255,255,255,0.35);
    --figma-navbar-mobile-border:    rgba(255,255,255,0.25);
    --figma-navbar-join-shadow:      none;

    --figma-transition-fast:   100ms ease;
    --figma-transition-normal: 150ms ease;
    --figma-backdrop-blur:       none;
    --figma-backdrop-blur-light: none;
}

/* Body canvas — force light */
html[data-theme="simple"] body.figma-theme,
html[data-theme="simple"] body.ind-theme {
    background: var(--smp-paper) !important;
    color: var(--smp-ink) !important;
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif !important;
}

/* Plain headings — dark ink, no styling flourish */
html[data-theme="simple"] body.figma-theme h1,
html[data-theme="simple"] body.figma-theme h2,
html[data-theme="simple"] body.figma-theme h3,
html[data-theme="simple"] body.figma-theme h4,
html[data-theme="simple"] body.figma-theme h5,
html[data-theme="simple"] body.ind-theme h1,
html[data-theme="simple"] body.ind-theme h2,
html[data-theme="simple"] body.ind-theme h3,
html[data-theme="simple"] body.ind-theme h4,
html[data-theme="simple"] body.ind-theme h5 {
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
    font-weight: 600 !important;
    color: var(--smp-ink) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Navbar: flat muted-blue band */
html[data-theme="simple"] .figma-navbar {
    background: var(--smp-blue) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid var(--smp-blue-dark) !important;
    box-shadow: none;
}

html[data-theme="simple"] .figma-navbar .nav-link {
    color: rgba(255,255,255,0.95) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    border-radius: 0 !important;
}

html[data-theme="simple"] .figma-navbar .nav-link:hover {
    background: rgba(255,255,255,0.12) !important;
    color: #ffffff !important;
}

html[data-theme="simple"] .figma-navbar .nav-link.active {
    background: var(--smp-blue-dark) !important;
    color: #ffffff !important;
}

html[data-theme="simple"] .figma-navbar .dropdown-menu {
    background: #ffffff !important;
    border: 1px solid var(--smp-border) !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.12) !important;
}

html[data-theme="simple"] .figma-navbar .dropdown-item {
    color: var(--smp-ink) !important;
    text-transform: none;
    font-size: 14px !important;
    letter-spacing: 0;
    border-radius: 0 !important;
}

html[data-theme="simple"] .figma-navbar .dropdown-item:hover {
    background: var(--smp-panel) !important;
    color: var(--smp-blue-dark) !important;
}

html[data-theme="simple"] .figma-navbar .btn-join {
    background: var(--smp-blue-dark) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    border-radius: 3px !important;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600 !important;
    box-shadow: none;
}

/* Department masthead — plain left-friendly nameplate on white */
html[data-theme="simple"] .dept-name-header {
    background: var(--smp-paper) !important;
    border-bottom: 1px solid var(--smp-border) !important;
    box-shadow: none;
    padding: 1.75rem 1.5rem;
}

html[data-theme="simple"] .dept-name-title {
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
    font-weight: 600;
    color: var(--smp-ink);
    text-transform: none;
    letter-spacing: 0;
    font-size: clamp(1.6rem, 4vw, 2.6rem) !important;
    line-height: 1.2;
    text-shadow: none;
    background: none;
    -webkit-text-fill-color: var(--smp-ink);
}

html[data-theme="simple"] .dept-name-tagline {
    color: var(--smp-ink-soft);
    font-family: 'Segoe UI', Arial, sans-serif;
    font-style: normal;
    text-transform: none;
    letter-spacing: 0;
}

/* Cards — flat white or soft gray panels, hairline borders, no shadow */
html[data-theme="simple"] body.figma-theme .card,
html[data-theme="simple"] body.ind-theme .card,
html[data-theme="simple"] body.figma-theme .figma-card,
html[data-theme="simple"] body.ind-theme .figma-card,
html[data-theme="simple"] body.figma-theme .figma-resource-card,
html[data-theme="simple"] body.ind-theme .figma-resource-card,
html[data-theme="simple"] body.figma-theme .figma-stats-container,
html[data-theme="simple"] body.ind-theme .figma-stats-container,
html[data-theme="simple"] body.figma-theme .inquiry-form-card,
html[data-theme="simple"] body.ind-theme .inquiry-form-card,
html[data-theme="simple"] body.figma-theme .apparatus-details-card,
html[data-theme="simple"] body.ind-theme .apparatus-details-card {
    background: #ffffff !important;
    backdrop-filter: none !important;
    border: 1px solid var(--smp-border) !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    color: var(--smp-ink) !important;
    transition: border-color 100ms ease !important;
}

html[data-theme="simple"] body.figma-theme .card:hover,
html[data-theme="simple"] body.ind-theme .card:hover,
html[data-theme="simple"] body.figma-theme .figma-card:hover,
html[data-theme="simple"] body.ind-theme .figma-card:hover,
html[data-theme="simple"] body.figma-theme .figma-resource-card:hover,
html[data-theme="simple"] body.ind-theme .figma-resource-card:hover {
    transform: none;
    filter: none !important;
    box-shadow: none !important;
    border-color: var(--smp-blue) !important;
}

html[data-theme="simple"] body.figma-theme .card-header,
html[data-theme="simple"] body.ind-theme .card-header,
html[data-theme="simple"] body.figma-theme .figma-card-header,
html[data-theme="simple"] body.ind-theme .figma-card-header {
    background: var(--smp-panel) !important;
    border-bottom: 1px solid var(--smp-border) !important;
    color: var(--smp-ink) !important;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.95rem;
    border-radius: 0;
}

/* Buttons — flat, sentence case */
html[data-theme="simple"] body.figma-theme .btn,
html[data-theme="simple"] body.ind-theme .btn,
html[data-theme="simple"] body.figma-theme .figma-btn,
html[data-theme="simple"] body.ind-theme .figma-btn {
    border-radius: 3px !important;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600 !important;
    box-shadow: none !important;
}

html[data-theme="simple"] body.figma-theme .btn-primary,
html[data-theme="simple"] body.ind-theme .btn-primary,
html[data-theme="simple"] body.figma-theme .figma-btn-primary,
html[data-theme="simple"] body.ind-theme .figma-btn-primary {
    background: var(--smp-blue) !important;
    border: 1px solid var(--smp-blue-dark) !important;
    color: #ffffff !important;
}

html[data-theme="simple"] body.figma-theme .btn-primary:hover,
html[data-theme="simple"] body.ind-theme .btn-primary:hover,
html[data-theme="simple"] body.figma-theme .figma-btn-primary:hover,
html[data-theme="simple"] body.ind-theme .figma-btn-primary:hover {
    background: var(--smp-blue-dark) !important;
    transform: none !important;
}

html[data-theme="simple"] body.figma-theme .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning),
html[data-theme="simple"] body.ind-theme .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning) {
    background: #ffffff !important;
    border: 1px solid #b9c0c8 !important;
    color: var(--smp-ink) !important;
}

html[data-theme="simple"] body.figma-theme .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):hover,
html[data-theme="simple"] body.ind-theme .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):hover {
    background: var(--smp-panel) !important;
    border-color: var(--smp-blue) !important;
}

/* Forms */
html[data-theme="simple"] body.figma-theme input.form-control,
html[data-theme="simple"] body.ind-theme input.form-control,
html[data-theme="simple"] body.figma-theme textarea.form-control,
html[data-theme="simple"] body.ind-theme textarea.form-control,
html[data-theme="simple"] body.figma-theme select.form-select,
html[data-theme="simple"] body.ind-theme select.form-select {
    background: #ffffff !important;
    border: 1px solid #b9c0c8 !important;
    border-radius: 3px !important;
    color: var(--smp-ink) !important;
    box-shadow: none !important;
}

html[data-theme="simple"] body.figma-theme input.form-control:focus,
html[data-theme="simple"] body.ind-theme input.form-control:focus,
html[data-theme="simple"] body.figma-theme textarea.form-control:focus,
html[data-theme="simple"] body.ind-theme textarea.form-control:focus,
html[data-theme="simple"] body.figma-theme select.form-select:focus,
html[data-theme="simple"] body.ind-theme select.form-select:focus {
    border-color: var(--smp-blue) !important;
    box-shadow: 0 0 0 2px rgba(51,96,140,0.20) !important;
    outline: none;
}

html[data-theme="simple"] body.figma-theme .form-label,
html[data-theme="simple"] body.ind-theme .form-label {
    color: var(--smp-ink) !important;
    font-weight: 600 !important;
    font-size: 0.85rem;
    text-transform: none;
    letter-spacing: 0;
}

/* Tables — gray header row, zebra striping */
html[data-theme="simple"] body.figma-theme .table,
html[data-theme="simple"] body.ind-theme .table {
    color: var(--smp-ink) !important;
    --bs-table-bg: transparent;
    --bs-table-color: var(--smp-ink);
}

html[data-theme="simple"] body.figma-theme .table thead th,
html[data-theme="simple"] body.ind-theme .table thead th {
    background: var(--smp-panel) !important;
    color: var(--smp-ink) !important;
    text-transform: none;
    letter-spacing: 0 !important;
    font-size: 0.85rem;
    font-weight: 600 !important;
    border-bottom: 2px solid var(--smp-border) !important;
}

html[data-theme="simple"] body.figma-theme .table tbody td,
html[data-theme="simple"] body.ind-theme .table tbody td {
    border-top: 1px solid var(--border-subtle) !important;
}

html[data-theme="simple"] body.figma-theme .table-striped > tbody > tr:nth-of-type(odd) > *,
html[data-theme="simple"] body.ind-theme .table-striped > tbody > tr:nth-of-type(odd) > * {
    background: #f8f9fa !important;
    color: var(--smp-ink) !important;
}

/* Sidebar admin nav (member area left rail) */
html[data-theme="simple"] .sidebar-figma {
    background: var(--smp-panel) !important;
    border-right: 1px solid var(--smp-border) !important;
}

html[data-theme="simple"] .sidebar-figma .nav-link {
    color: var(--smp-ink-soft) !important;
    border-radius: 3px !important;
    font-weight: 400 !important;
}

html[data-theme="simple"] .sidebar-figma .nav-link:hover {
    background: rgba(51,96,140,0.08) !important;
    color: var(--smp-blue-dark) !important;
}

html[data-theme="simple"] .sidebar-figma .nav-link.active {
    background: var(--smp-blue) !important;
    color: #ffffff !important;
}

/* Alerts, badges, progress, modals, toasts */
html[data-theme="simple"] .alert {
    background: var(--smp-panel) !important;
    border: 1px solid var(--smp-border) !important;
    border-left: 4px solid var(--smp-blue);
    border-radius: 3px !important;
    color: var(--smp-ink) !important;
    backdrop-filter: none;
}

html[data-theme="simple"] .badge {
    border-radius: 3px !important;
    text-transform: none;
    letter-spacing: 0;
}

html[data-theme="simple"] .figma-progress-bar {
    background: var(--smp-panel);
    border: 1px solid var(--smp-border);
    border-radius: 3px;
    backdrop-filter: none;
}

html[data-theme="simple"] .figma-progress-fill {
    border-radius: 2px;
    background: var(--smp-blue);
}

html[data-theme="simple"] .modal-content {
    background: #ffffff !important;
    backdrop-filter: none;
    border: 1px solid var(--smp-border) !important;
    border-radius: 4px !important;
    color: var(--smp-ink) !important;
}

html[data-theme="simple"] .toast {
    background: #ffffff;
    border: 1px solid var(--smp-border);
    border-left: 4px solid var(--smp-blue);
    border-radius: 3px;
    color: var(--smp-ink);
    backdrop-filter: none;
}

/* Links — classic underlined municipal blue */
html[data-theme="simple"] body.figma-theme a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge),
html[data-theme="simple"] body.ind-theme a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge) {
    color: var(--smp-blue) !important;
    text-decoration: underline;
}

html[data-theme="simple"] body.figma-theme a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge):hover,
html[data-theme="simple"] body.ind-theme a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge):hover {
    color: var(--smp-blue-dark) !important;
}

/* Footer — soft gray panel, quiet text */
html[data-theme="simple"] .figma-footer,
html[data-theme="simple"] footer {
    background: var(--smp-panel) !important;
    color: var(--smp-ink-soft);
    border-top: 1px solid var(--smp-border) !important;
}

html[data-theme="simple"] .figma-footer a,
html[data-theme="simple"] footer a {
    color: var(--smp-blue) !important;
}

/* Quick links / stat chips on home */
html[data-theme="simple"] .quick-link {
    background: #ffffff !important;
    border: 1px solid var(--smp-border);
    border-radius: 3px;
    color: var(--smp-blue) !important;
    font-weight: 600;
}

html[data-theme="simple"] .hero-stats-banner {
    background: var(--smp-panel) !important;
    
    border-top: 1px solid var(--smp-border);
    border-bottom: 1px solid var(--smp-border);
}

html[data-theme="simple"] .hero-stat-number { color: var(--smp-blue-dark) !important; }
html[data-theme="simple"] .hero-stat-label  { color: var(--smp-ink-soft); text-transform: none; letter-spacing: 0; }

/* Tabs */
html[data-theme="simple"] .figma-tabs {
    background: var(--smp-panel);
    border: 1px solid var(--smp-border);
    border-radius: 3px;
    backdrop-filter: none;
}

html[data-theme="simple"] .figma-tab.active {
    background: var(--smp-blue);
    color: #ffffff;
    border-radius: 2px;
}

/* ── SIMPLE: full homepage anatomy ───────────────────────────────
   Reads like a plain town-government CMS page: minimal hero, flat
   white page with thin dividers between sections, gray info panels,
   underlined blue links, zero gradients/blur/animation flourish. */

/* Hero: dramatically reduced — a modest banner photo, not a takeover */
html[data-theme="simple"] .figma-hero {
    min-height: 320px !important;
}

html[data-theme="simple"] .figma-scroll-pointer { display: none !important; }

html[data-theme="simple"] .hero-stats-banner {
    position: relative !important;
    background: var(--smp-panel) !important;
    
    border-top: 1px solid var(--smp-border);
    border-bottom: 1px solid var(--smp-border);
}

html[data-theme="simple"] .hero-stat-item.dark-bg { background: transparent !important; }

html[data-theme="simple"] .hero-stat-number {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 2.25rem !important;
    font-weight: 600;
    color: var(--smp-blue-dark) !important;
    text-shadow: none;
}

html[data-theme="simple"] .hero-stat-label {
    color: var(--smp-ink-soft);
    text-transform: none;
    letter-spacing: 0;
}

/* Announcements: plain notice list on gray */
html[data-theme="simple"] .hp-announcements-section {
    background: var(--smp-panel) !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid var(--smp-border) !important;
    padding: 1.5rem 2rem;
    --ann-strip-bg: #ffffff;
    --ann-strip-border: var(--smp-border);
    --ann-strip-text: var(--smp-ink);
    --ann-strip-hover-bg: #f8f9fa;
    --ann-strip-text-hover: var(--smp-blue-dark);
    --ann-strip-shadow: none;
}

html[data-theme="simple"] .hp-ann-alert-strip {
    border-radius: 3px;
    border: 1px solid var(--smp-border);
}

/* Shared section typography: plain sentence-case headings, thin rule */
html[data-theme="simple"] .hp-section-eyebrow {
    color: var(--smp-ink-soft) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
}

html[data-theme="simple"] .hp-section-title {
    font-family: 'Segoe UI', Arial, sans-serif;
    color: var(--smp-ink);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    font-size: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--smp-blue);
    display: inline-block;
}

/* All bands flat white, separated by hairlines; tighter padding */
html[data-theme="simple"] .hp-info-cards-section,
html[data-theme="simple"] .hp-about-section,
html[data-theme="simple"] .hp-companies-section,
html[data-theme="simple"] .hp-stats-section,
html[data-theme="simple"] .hp-dept-tiles-section,
html[data-theme="simple"] .hp-safety-section,
html[data-theme="simple"] .hp-news-section,
html[data-theme="simple"] .hp-recruit-section,
html[data-theme="simple"] .hp-spotlight-band {
    background: var(--smp-paper) !important;
    backdrop-filter: none !important;
    border-top: 1px solid var(--border-subtle) !important;
    border-bottom: none !important;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

/* Info cards: gray utility panels */
html[data-theme="simple"] .hp-info-card {
    background: var(--smp-panel);
    border: 1px solid var(--smp-border);
    border-radius: 3px;
}

html[data-theme="simple"] .hp-info-card:hover {
    transform: none;
    background: var(--smp-panel);
    border-color: var(--smp-blue);
    box-shadow: none;
}

html[data-theme="simple"] .hp-info-card-icon  { color: var(--smp-blue); }
html[data-theme="simple"] .hp-info-card-title { color: var(--smp-ink); }
html[data-theme="simple"] .hp-info-card-body  { color: var(--smp-ink-soft); }
html[data-theme="simple"] .hp-info-card-link  { color: var(--smp-blue) !important; text-decoration: underline; }

/* About */
html[data-theme="simple"] .hp-about-body { color: var(--smp-ink); }
html[data-theme="simple"] .hp-about-link { color: var(--smp-blue); text-decoration: underline; }
html[data-theme="simple"] .hp-about-image-placeholder {
    background: var(--smp-panel);
    border-color: var(--smp-border);
    color: var(--smp-ink-soft);
}
html[data-theme="simple"] .hp-patch-img { filter: none; }

/* Companies */
html[data-theme="simple"] .hp-company-card { border-bottom: 1px solid var(--border-subtle); padding: 2rem 0 !important; }
html[data-theme="simple"] .hp-company-name { color: var(--smp-ink); font-weight: 600; }
html[data-theme="simple"] .hp-company-address { color: var(--smp-ink-soft); }
html[data-theme="simple"] .hp-company-desc { color: var(--smp-ink); }
html[data-theme="simple"] .hp-company-cta { color: var(--smp-blue) !important; text-decoration: underline; }
html[data-theme="simple"] .hp-company-img {
    border-radius: 3px;
    background: var(--smp-panel);
    border: 1px solid var(--smp-border);
}
html[data-theme="simple"] .hp-company-img-placeholder { color: var(--smp-ink-soft); opacity: 0.5; }

/* Stats: plain figures */
html[data-theme="simple"] .hp-stat-block { border-color: var(--smp-border); }
html[data-theme="simple"] .hp-stat-number {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: 600;
    color: var(--smp-blue-dark);
    text-shadow: none;
    font-size: 2.5rem;
}
html[data-theme="simple"] .hp-stat-block-current .hp-stat-number { color: var(--smp-blue); }
html[data-theme="simple"] .hp-stat-year { color: var(--smp-ink-soft); text-transform: none; letter-spacing: 0; }

/* Department tiles */
html[data-theme="simple"] .hp-dept-tile-icon  { color: var(--smp-blue); }
html[data-theme="simple"] .hp-dept-tile-label { color: var(--smp-ink); font-weight: 600; }
html[data-theme="simple"] .hp-dept-tile-sub   { color: var(--smp-ink-soft); }

/* Safety tiles */
html[data-theme="simple"] .hp-safety-tile {
    background: var(--smp-panel);
    border: 1px solid var(--smp-border);
    border-radius: 3px;
    color: var(--smp-ink);
}
html[data-theme="simple"] .hp-safety-tile:hover {
    transform: none;
    background: var(--smp-panel);
    border-color: var(--smp-blue);
    box-shadow: none;
}
html[data-theme="simple"] .hp-safety-tile-icon  { color: var(--smp-blue); }
html[data-theme="simple"] .hp-safety-tile-title { color: var(--smp-ink); }
html[data-theme="simple"] .hp-safety-tile-body  { color: var(--smp-ink-soft); }
html[data-theme="simple"] .hp-safety-tile-link  { color: var(--smp-blue); text-decoration: underline; }

/* Administration band: gray panel */
html[data-theme="simple"] .hp-admin-section {
    background: var(--smp-panel);
    border-top: 1px solid var(--smp-border);
    border-bottom: 1px solid var(--smp-border);
}
html[data-theme="simple"] .hp-admin-body { color: var(--smp-ink-soft); }
html[data-theme="simple"] .hp-admin-link-item { color: var(--smp-blue); text-decoration: underline; }
html[data-theme="simple"] .hp-admin-link-item:hover { color: var(--smp-blue-dark); }

/* News: plain bordered list-cards */
html[data-theme="simple"] .hp-news-card {
    background: #ffffff;
    border: 1px solid var(--smp-border);
    border-radius: 3px;
}
html[data-theme="simple"] .hp-news-card:hover {
    transform: none;
    background: #ffffff;
    border-color: var(--smp-blue);
    box-shadow: none;
}
html[data-theme="simple"] .hp-news-title   { color: var(--smp-blue); text-decoration: underline; }
html[data-theme="simple"] .hp-news-excerpt { color: var(--smp-ink-soft); }
html[data-theme="simple"] .hp-news-date    { color: var(--smp-ink-soft); }
html[data-theme="simple"] .hp-news-thumb   { background: var(--smp-panel); }
html[data-theme="simple"] .hp-news-tag {
    background: var(--smp-panel);
    color: var(--smp-ink-soft);
    border: 1px solid var(--smp-border);
    border-radius: 2px;
    text-transform: none;
    letter-spacing: 0;
}
html[data-theme="simple"] .hp-news-tag-featured {
    background: var(--smp-blue);
    color: #ffffff;
    border-color: var(--smp-blue-dark);
}
html[data-theme="simple"] .hp-read-more-btn {
    background: #ffffff;
    border: 1px solid var(--smp-blue);
    color: var(--smp-blue);
    border-radius: 3px;
    text-transform: none;
    letter-spacing: 0;
}
html[data-theme="simple"] .hp-read-more-btn:hover {
    background: var(--smp-blue);
    color: #ffffff;
}

/* Spotlight + recruit */
html[data-theme="simple"] .hp-spotlight-body { color: var(--smp-ink); }
html[data-theme="simple"] .hp-spotlight-media {
    border-radius: 3px;
    border: 1px solid var(--smp-border);
    background: var(--smp-panel);
}
html[data-theme="simple"] .hp-recruit-video-wrap {
    border-radius: 3px;
    border: 1px solid var(--smp-border);
    box-shadow: none;
}

/* Emergency ribbon: keep functional but calmer civic red */
html[data-theme="simple"] .emergency-ribbon { background: #9c2b2b; }
html[data-theme="simple"] .emergency-ribbon-icon { animation: none; }


/* ===================================================================
   FORCED-LIGHT COMPATIBILITY (municipal + simple)
   Interior CRUD/list/detail pages contain elements with hardcoded
   dark-theme colors (white rgba text, dark panels, dark gradients)
   that the token cascade doesn't reach. Neutralize them for both
   light-locked presets so every Index/Create/Edit/Details page reads
   correctly.
   =================================================================== */

/* Extra tokens some interior pages consume */
html[data-theme="municipal"],
html[data-theme="simple"] {
    --bg-card-hover: #f0f2f5;
    --figma-surface: #f2f4f6;
    --figma-input-bg-focus: #ffffff;
    --header-bg: #ffffff;
    --bg-surface: #f2f4f6;
    --border: #d8dce3;
    --text: #2b2f36;
    --text-muted: #6c7484;
}

/* Bootstrap list groups (Departments, Companies, MemberHome, Notifications) */
html[data-theme="municipal"] .list-group-item,
html[data-theme="simple"] .list-group-item {
    background: #ffffff !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

html[data-theme="municipal"] .list-group-item-action:hover,
html[data-theme="simple"] .list-group-item-action:hover {
    background: var(--bg-card-hover);
}

/* Pagination (Incidents, AuditLog, FireContacts, directories) */
html[data-theme="municipal"] .pagination .page-link,
html[data-theme="simple"] .pagination .page-link,
html[data-theme="municipal"] .pagination-list a,
html[data-theme="simple"] .pagination-list a {
    background: #ffffff !important;
    border-color: var(--border) !important;
    color: var(--brand) !important;
}

html[data-theme="municipal"] .pagination .page-item.active .page-link,
html[data-theme="simple"] .pagination .page-item.active .page-link {
    background: var(--brand);
    border-color: var(--brand);
    color: #ffffff;
}

html[data-theme="municipal"] .pagination-info,
html[data-theme="simple"] .pagination-info {
    color: var(--text-secondary);
}

/* Incidents index: filter bar, stat chips, heatmap (white-rgba overlays) */
html[data-theme="municipal"] .inc-stats-bar,
html[data-theme="simple"] .inc-stats-bar,
html[data-theme="municipal"] .inc-chip,
html[data-theme="simple"] .inc-chip {
    background: #ffffff !important;
    border-color: var(--border);
    color: var(--text) !important;
}

html[data-theme="municipal"] .inc-chip-active,
html[data-theme="simple"] .inc-chip-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #ffffff;
}

html[data-theme="municipal"] .inc-heatmap-card,
html[data-theme="simple"] .inc-heatmap-card {
    
    border: 1px solid var(--border);
}

/* Apparatus public index: dark header gradient + white title */
html[data-theme="municipal"] .api-header,
html[data-theme="simple"] .api-header {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
}

html[data-theme="municipal"] .api-header-title,
html[data-theme="simple"] .api-header-title {
    color: var(--text);
    text-shadow: none;
}

html[data-theme="municipal"] .api-header-sub,
html[data-theme="simple"] .api-header-sub {
    color: var(--text-secondary);
}

html[data-theme="municipal"] .api-card,
html[data-theme="simple"] .api-card {
    background: #ffffff;
    border: 1px solid var(--border);
}

/* Detail pages (Announcements etc.): translucent color badges on dark */
html[data-theme="municipal"] .figma-meta-badge,
html[data-theme="simple"] .figma-meta-badge,
html[data-theme="municipal"] .figma-date-range,
html[data-theme="simple"] .figma-date-range {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text);
}

html[data-theme="municipal"] .figma-detail-container,
html[data-theme="simple"] .figma-detail-container {
    background: #ffffff;
    border: 1px solid var(--border);
}

html[data-theme="municipal"] .figma-text-content,
html[data-theme="simple"] .figma-text-content,
html[data-theme="municipal"] .figma-detail-meta,
html[data-theme="simple"] .figma-detail-meta,
html[data-theme="municipal"] .figma-breadcrumb,
html[data-theme="simple"] .figma-breadcrumb {
    color: var(--text-secondary) !important;
}

/* Generic guards: any leftover translucent dark panels & white text */
html[data-theme="municipal"] .figma-table,
html[data-theme="simple"] .figma-table {
    background: #ffffff;
    color: var(--text);
    border-color: var(--border);
}

html[data-theme="municipal"] .figma-card-footer,
html[data-theme="simple"] .figma-card-footer {
    background: var(--bg-surface) !important;
    border-top: 1px solid var(--border) !important;
    color: var(--text-secondary);
}

html[data-theme="municipal"] .dashboard-attention-card,
html[data-theme="simple"] .dashboard-attention-card {
    background: #ffffff;
    border: 1px solid var(--border);
    color: var(--text);
}

/* ===================================================================
   >>> SECTION: appearance
   =================================================================== */

/* ===================================================================
   TENANT APPEARANCE — FiveAlarmWeb
   Per-tenant distinctiveness settings applied via attributes/classes on
   <html> (set in _Layout.cshtml) and CSS variables from the inline
   #tenantAppearanceVars block:
     data-density="compact"                      — tighter spacing/radii
     data-cards="flat|bordered|elevated|glass"   — card personality
     data-foil="gold|silver|brass|accent"        — dept-name title finish
     data-fontpair="classic|modern|editorial|municipal"
     .site-watermark                              — faint patch behind homepage
     .navbar-transparent                          — see-through navbar until scroll
     --layout-sidenav-w / --layout-boxed-max-w    — layout sub-options
   =================================================================== */

/* ===================================================================
   FONT PAIRINGS
   =================================================================== */
html[data-fontpair="classic"] {
    --figma-font-heading: 'Raleway', Georgia, serif;
    --figma-font-primary: 'Inter', system-ui, sans-serif;
    --figma-font-secondary: 'Inter', system-ui, sans-serif;
}

html[data-fontpair="modern"] {
    --figma-font-heading: 'Manrope', system-ui, sans-serif;
    --figma-font-primary: 'Instrument Sans', system-ui, sans-serif;
    --figma-font-secondary: 'Instrument Sans', system-ui, sans-serif;
}

html[data-fontpair="editorial"] {
    --figma-font-heading: 'Instrument Sans', system-ui, sans-serif;
    --figma-font-primary: 'Inter', system-ui, sans-serif;
    --figma-font-secondary: 'Inter', system-ui, sans-serif;
    --figma-heading-weight: 900;
    --figma-heading-spacing: -0.03em;
}

html[data-fontpair="municipal"] {
    --figma-font-heading: 'Inter', system-ui, sans-serif;
    --figma-font-primary: 'Inter', system-ui, sans-serif;
    --figma-font-secondary: 'Inter', system-ui, sans-serif;
    --figma-heading-weight: 700;
    --figma-heading-spacing: 0;
}

/* ===================================================================
   DENSITY — COMPACT
   Scales spacing + radius tokens down for information-dense sites.
   =================================================================== */
html[data-density="compact"] {
    --sp-1: 0.2rem;
    --sp-2: 0.4rem;
    --sp-3: 0.65rem;
    --sp-4: 0.85rem;
    --sp-5: 1.1rem;
    --sp-6: 1.5rem;
    --figma-radius-sm: 4px;
    --figma-radius-md: 6px;
    --figma-radius-lg: 8px;
    --figma-radius-xl: 10px;
    --figma-fs-body: 14px;
    --figma-lh-body: 21px;
}

html[data-density="compact"] body.figma-theme .content {
    padding: 1.25rem !important;
}

html[data-density="compact"] body.figma-theme .card-body,
html[data-density="compact"] body.figma-theme .figma-card {
    padding: 0.85rem 1rem;
}

/* ===================================================================
   CARD STYLE VARIANTS
   =================================================================== */
html[data-cards="flat"] body.figma-theme .card,
html[data-cards="flat"] body.figma-theme .figma-card,
html[data-cards="flat"] body.figma-theme .figma-resource-card {
    background: var(--bg-card, var(--bg-surface)) !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

html[data-cards="bordered"] body.figma-theme .card,
html[data-cards="bordered"] body.figma-theme .figma-card,
html[data-cards="bordered"] body.figma-theme .figma-resource-card {
    background: var(--bg-card, var(--bg-surface)) !important;
    border: 2px solid var(--border, rgba(255,255,255,0.15)) !important;
    box-shadow: none !important;
}

html[data-cards="elevated"] body.figma-theme .card,
html[data-cards="elevated"] body.figma-theme .figma-card,
html[data-cards="elevated"] body.figma-theme .figma-resource-card {
    border: none !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.25) !important;
}

html[data-cards="glass"] body.figma-theme .card,
html[data-cards="glass"] body.figma-theme .figma-card,
html[data-cards="glass"] body.figma-theme .figma-resource-card {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%);
}

/* ===================================================================
   TITLE FOIL VARIANTS (dept-name gold-foil-text)
   Default (no data-foil) keeps the theme's --figma-home-title-gradient.
   =================================================================== */
html[data-foil="gold"] .gold-foil-text {
    background: linear-gradient(180deg, #f9e9b5 0%, #e3b74a 38%, #b98a1e 62%, #f4d97c 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

html[data-foil="silver"] .gold-foil-text {
    background: linear-gradient(180deg, #f4f6f8 0%, #c6cdd6 38%, #8d97a3 62%, #e3e8ee 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 18px rgba(198,205,214,0.35)) !important;
}

html[data-foil="brass"] .gold-foil-text {
    background: linear-gradient(180deg, #e8cf9b 0%, #b98d4f 40%, #8a6430 65%, #d8b878 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 16px rgba(185,141,79,0.35)) !important;
}

html[data-foil="accent"] .gold-foil-text {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--brand) 35%, #ffffff) 0%,
        var(--brand) 55%,
        color-mix(in srgb, var(--brand) 65%, #000000) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 18px color-mix(in srgb, var(--brand) 45%, transparent)) !important;
}

/* ===================================================================
   WATERMARK — faint oversized patch behind homepage content
   =================================================================== */
html.site-watermark body.figma-theme.homepage .layout {
    position: relative;
}

html.site-watermark body.figma-theme.homepage .layout::before {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(120vh, 900px, 95vw);
    height: min(120vh, 900px, 95vw);
    transform: translate(-50%, -50%);
    background-image: var(--site-watermark-url);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}

/* ===================================================================
   NAVBAR TRANSPARENCY-ON-SCROLL
   Transparent at the top of the page; solid once scrolled
   (body gets .is-scrolled via appearance.js / site.js).
   Skipped in sidebar layouts where the rail is always solid.
   =================================================================== */
html.navbar-transparent:not([data-layout^="sidebar"]) body.figma-theme:not(.is-scrolled) .figma-navbar {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

/* Mobile: always solid — the hamburger/collapse menu needs a readable,
   opaque surface and transparent chrome over the banner hurts contrast. */
@media (max-width: 991.98px) {
    html.navbar-transparent body.figma-theme .figma-navbar {
        background: var(--figma-navbar-bg, var(--figma-bg-navbar)) !important;
        backdrop-filter: var(--figma-navbar-backdrop, var(--figma-backdrop-blur)) !important;
        -webkit-backdrop-filter: var(--figma-navbar-backdrop, var(--figma-backdrop-blur)) !important;
    }
}

html.navbar-transparent body.figma-theme .figma-navbar {
    transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

/* ===================================================================
   CUSTOM FOOTER CONTENT
   =================================================================== */
.figma-footer-mission {
    font-style: italic;
    opacity: 0.85;
    max-width: 42ch;
    margin: 0.35rem 0 0.5rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.figma-footer-extra {
    opacity: 0.75;
    font-size: 0.85rem;
}

/* ===================================================================
   HOMEPAGE SECTION ORDERING + TAGLINE
   =================================================================== */
.hp-sections {
    display: flex;
    flex-direction: column;
}

.hp-sections > section {
    width: 100%;
}

.dept-name-tagline {
    margin: 0.15rem 0 0;
    text-align: center;
    font-size: 1.05rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.75;
    color: var(--text-secondary, inherit);
}

@media (max-width: 575.98px) {
    .dept-name-tagline {
        font-size: 0.8rem;
        letter-spacing: 0.08em;
        padding: 0 1rem;
    }
}

/* ===================================================================
   >>> SECTION: figma-responsive
   =================================================================== */

/* ===================================================================
   FIGMA RESPONSIVE - Mobile & Tablet Adjustments
   =================================================================== */

/* ===== TABLET (≤ 1200px) ===== */
@media (max-width: 1200px) {
    .figma-hero { min-height: 800px; }
    .figma-hero-title { font-size: 72px; line-height: 88px; }
    .figma-navbar { padding: 8px 32px !important; }
    .banner-wrap { margin-top: calc(var(--navbar-h) + 16px) !important; } /* navbar: logo + 8px top + 8px bottom */
    .figma-section { padding: 32px; }
    .figma-stats-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .figma-footer-content { gap: 48px; }

    /* ── Phase 5: incident chips ── */
    .inc-chips-row { gap: 6px; }

    /* ── Phase 9: performance table ── */
    .member-perf-table th:nth-child(n+7) { display: none; }
    .member-perf-table td:nth-child(n+7) { display: none; }
}

/* ===== TABLET MEDIUM (≤ 1024px) ===== */
@media (max-width: 1024px) {
    /* ── Font size tokens: scale down heading sizes for tablet viewports ── */
    :root {
        --figma-fs-hero: 72px;  --figma-lh-hero: 88px;
        --figma-fs-h1:   52px;  --figma-lh-h1:   64px;
        --figma-fs-h2:   34px;  --figma-lh-h2:   42px;
        --figma-fs-h3:   28px;  --figma-lh-h3:   34px;
        --figma-fs-h4:   24px;  --figma-lh-h4:   30px;
        --figma-fs-h5:   20px;  --figma-lh-h5:   26px;
        --figma-fs-body: 17px;  --figma-lh-body: 22px;
    }

    /* ── Stats grid gap tighten ── */
    .figma-stats-grid { gap: 20px; }
    .figma-stats-container { padding: 24px; gap: 24px; }

    /* ── Card padding reduction ── */
    .figma-card { padding: 24px; gap: 16px; }
    .figma-card-content { padding: 24px; }

    /* ── Button padding: less aggressive than mobile full-width ── */
    .figma-btn { padding: 12px 28px; }

    /* ── Banner: constrain height on portrait tablet ── */
    header.banner-wrap { max-block-size: 180px; }
    .banner-wrap { max-height: 180px; }

    /* ── Performance table: keep 5 cols on landscape tablet ── */
    .member-perf-table th:nth-child(n+6) { display: none; }
    .member-perf-table td:nth-child(n+6) { display: none; }
    /* Undo the ≤1200px rule that hid from col 7 ── */
    .member-perf-table th:nth-child(-n+5) { display: table-cell; }
    .member-perf-table td:nth-child(-n+5) { display: table-cell; }
}

/* ===== TABLET SMALL (≤ 992px) ===== */
@media (max-width: 992px) {
    .figma-hero { min-height: 600px; }
    .figma-hero-title { font-size: 56px; line-height: 68px; }
    .figma-hero-content { padding: 32px; }

    /* Navbar collapse */
    .figma-navbar .navbar-collapse {
        background: var(--bg-surface);
        backdrop-filter: var(--figma-backdrop-blur);
        border: 1px solid var(--border);
        box-shadow: 0 8px 24px rgba(0,0,0,0.4);
        padding: 16px;
        border-radius: var(--figma-radius-md);
        margin-top: 16px;
    }
    .figma-navbar .nav-link {
        padding: 12px;
        color: var(--text) !important;
    }

    .figma-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .figma-footer-content { flex-direction: column; gap: 24px; }

    /* ── Card & container padding ── */
    .figma-card { padding: 20px; }
    .figma-card-content { padding: 20px; }

    /* ── Button: compact but not full-width yet ── */
    .figma-btn { padding: 10px 24px; }

    /* ── Phase 4: response time analytics ── */
    #rtMonthlyChart, #rtYoyChart { max-height: 220px; }

    /* ── Phase 8: facility details grid ── */
    .facility-details-grid { grid-template-columns: 1fr; }

    /* ── Phase 10: admin dashboard attention row ── */
    .dashboard-attention-card .figma-card-content { padding: 1rem 0.5rem; }

    /* ── Performance table: 4 cols on small tablet ── */
    .member-perf-table th:nth-child(n+5) { display: none; }
    .member-perf-table td:nth-child(n+5) { display: none; }
    .member-perf-table th:nth-child(-n+4) { display: table-cell; }
    .member-perf-table td:nth-child(-n+4) { display: table-cell; }
}

/* ===== MOBILE (≤ 768px) ===== */
@media (max-width: 768px) {
    .figma-hero { min-height: 500px; background-position: center top; }
    .figma-hero-title { font-size: 40px; line-height: 48px; }
    .figma-hero-content { padding: 24px; gap: 32px; }
    .figma-navbar { padding: 8px 16px !important; }
    .figma-navbar .navbar-brand img { width: 56px !important; height: 56px !important; max-width: none !important; }
    .figma-section { padding: 24px; }
    .figma-section-title { font-size: 32px; line-height: 39px; }
    .figma-card { flex-direction: column; align-items: flex-start; padding: 24px; gap: 16px; }
    .figma-card-title { font-size: 24px; line-height: 29px; }
    .figma-card-description, .figma-card-link { font-size: 16px; line-height: 20px; }
    .figma-stats-container { padding: 24px; gap: 24px; }
    .figma-stats-title { font-size: 24px; line-height: 29px; }
    .figma-stats-grid { grid-template-columns: 1fr; gap: 16px; }
    .figma-stat-tile { padding: 16px; }
    .figma-progress-header { flex-direction: column; align-items: flex-start; }
    .figma-progress-stats { align-items: flex-start; }
    .figma-progress-footer { flex-direction: column; align-items: flex-start; }
    .figma-btn { width: 100%; justify-content: center; }
    .figma-footer { padding: 32px 24px; }
    .figma-footer-brand { font-size: 24px; line-height: 32px; }
    .figma-footer-heading { font-size: 20px; line-height: 24px; }

    /* ── Hero stats banner: stack vertically on mobile ── */
    .hero-stats-banner {
        grid-template-columns: 1fr;
        position: relative !important;
        bottom: auto;
        margin-top: 16px;
    }
    .hero-stat-item { padding: 16px 24px; }
    .hero-stat-number { font-size: 2rem !important; }
    .hero-stat-menu { min-width: 200px; left: 0; transform: none; }

    /* ── Quick links bar: wrap on mobile ── */
    .quick-links-wrapper { flex-wrap: wrap; gap: 6px; }
    .quick-link { font-size: 0.8rem; padding: 6px 10px; }
    .quick-links-label { display: none; }

    /* ── Incident index: hide less-critical columns ── */
    .incidents-table th:nth-child(n+5),
    .incidents-table td:nth-child(n+5) { display: none; }

    /* ── Phase 5: stat bar ── */
    .inc-stats-bar { padding: 8px 12px; }
    .inc-stat { padding: 4px 10px; }
    .inc-stat-value { font-size: 1.1rem; }
    .inc-stat-divider { display: none; }

    /* ── Phase 5: chips ── */
    .inc-chips-row { gap: 4px; }
    .inc-chip { padding: 5px 10px; font-size: 0.75rem; }

    /* ── Phase 6a: LOSAP card ── */
    .losap-card .row.g-2 > .col-6 { flex: 0 0 50%; }

    /* ── Phase 6b: inquiry timeline ── */
    .inquiry-timeline { flex-direction: column; align-items: flex-start; gap: 12px; }
    .inquiry-timeline::before { top: 8px; left: 7px; right: auto; height: calc(100% - 16px); width: 2px; }
    .timeline-step { flex-direction: row; gap: 10px; }
    .timeline-content { text-align: left; }

    /* ── Phase 7: application status result ── */
    .app-status-timeline { flex-direction: column; }

    /* ── Phase 9: performance dashboard ── */
    #leaderboardChart { max-height: 200px; }
    .member-perf-table th:nth-child(n+4),
    .member-perf-table td:nth-child(n+4) { display: none; }
    .member-perf-table th:nth-child(-n+3) { display: table-cell; }
    .member-perf-table td:nth-child(-n+3) { display: table-cell; }

    /* ── Phase 10: admin dashboard ── */
    .dashboard-attention-card .figma-card-content { padding: 0.75rem 0.5rem; }
    .dashboard-attention-card .h-100 { min-height: auto; }
}

/* ===== SMALL MOBILE (≤ 480px) ===== */
@media (max-width: 480px) {
    .figma-hero { min-height: 400px; background-position: center top; }
    .figma-hero-title { font-size: 28px; line-height: 34px; }
    .figma-hero-content { padding: 16px; }

    /* Dept name */
    .dept-name-title { font-size: 1.75rem !important; }

    /* ── Hero stats: single compact strip ── */
    .hero-stats-banner { gap: 0; }
    .hero-stat-item { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
    .hero-stat-item:last-child { border-bottom: none; }

    /* ── Incident detail grid ── */
    .incident-details-grid { grid-template-columns: 1fr; }
    .detail-row { grid-template-columns: 1fr; }

    /* ── Facility availability calendar ── */
    #facilityAvailabilityCalendar .fc-toolbar-title { font-size: .9rem; }
    #facilityAvailabilityCalendar .fc-button { padding: .2em .5em; font-size: .8rem; }

    /* ── Member points cards ── */
    .kpi-card { padding: 1rem; }
    .kpi-card .display-6 { font-size: 1.5rem; }

    /* ── Admin dashboard: 2-col attention grid ── */
    .col-6.col-md-3 { flex: 0 0 50%; max-width: 50%; }
}

/* ===================================================================
   ███  3-TIER RESPONSIVE SYSTEM (mobile-forward)  ███
   -------------------------------------------------------------------
   Tiers:
     • PHONE   : ≤ 575.98px   → native-app feel, stacked card tables
     • TABLET  : 576–991.98px → compact, scroll-contained tables
     • DESKTOP : ≥ 992px      → unchanged (no rules added here)

   Goals: never force sideways scrolling of the whole page; keep
   wide admin/index content within the viewport; large touch targets.
   =================================================================== */

/* ---- Shared tokens for the small-screen tiers ---- */
:root {
    --m-gutter-phone: 12px;   /* page side padding on phones  */
    --m-gutter-tablet: 20px;  /* page side padding on tablets */
    --m-touch: 44px;          /* minimum touch target        */

    /* Banner height tokens — used in padding-top formulas.
       Desktop default (≥992px): 20vh, matches figma-layout.css.
       Overridden per-tier below so _Layout.cshtml can reference
       a single formula: calc(var(--navbar-h) + var(--banner-h) + 1rem) */
    --banner-h: 20vh;
}

/* Tablet banner: shorter so more page is visible */
@media (min-width: 576px) and (max-width: 991.98px) {
    :root { --banner-h: 130px; }

    /* Override figma-layout.css which uses 20vh !important */
    .banner-wrap {
        height: var(--banner-h);
        max-height: var(--banner-h);
    }
    header.banner-wrap {
        block-size: var(--banner-h);
        max-block-size: var(--banner-h);
    }
}

/* Phone banner: even shorter */
@media (max-width: 575.98px) {
    :root { --banner-h: 100px; }

    .banner-wrap {
        height: var(--banner-h);
        max-height: var(--banner-h);
    }
    header.banner-wrap {
        block-size: var(--banner-h);
        max-block-size: var(--banner-h);
        min-block-size: var(--banner-h);
    }
}

/* ============================================================
   GLOBAL OVERFLOW GUARD (PHONE + TABLET ≤ 991.98px)
   Stops any wide element from pushing the page sideways.
   ============================================================ */
@media (max-width: 991.98px) {
    html, body { max-width: 100%; overflow-x: hidden; }

    /* Content column never exceeds the viewport width */
    .layout > .content,
    main.content {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Bootstrap containers go fluid so they can't overflow */
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 100% !important;
        padding-left: var(--m-gutter-tablet);
        padding-right: var(--m-gutter-tablet);
    }

    /* Wide media never overflows its column.
       Tables are excluded here — the tablet/phone tier rules below
       give tables their own scroll-contained block display. */
    img, svg, video, canvas, iframe { max-width: 100%; }

    /* Pre/code blocks scroll internally instead of the page */
    pre, code { overflow-x: auto; max-width: 100%; }
}

/* ============================================================
   TABLET TIER (576px – 991.98px)
   Tables are compact but still tabular; cells wrap text instead
   of forcing the page sideways.
   ============================================================ */
@media (min-width: 576px) and (max-width: 991.98px) {
    /* Explicit Bootstrap wrapper: contain any residual overflow */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        max-width: 100%;
        border-radius: var(--figma-radius-sm, 8px);
    }

    /* Bare tables: shrink to fit, let text wrap — NO page-scroll */
    main.content table {
        width: 100%;
        max-width: 100%;
        table-layout: fixed;          /* columns share space evenly   */
        word-break: break-word;       /* long words wrap, not overflow */
        overflow-wrap: anywhere;
        white-space: normal;          /* allow cell text to wrap       */
    }

    /* Compact cells so more columns fit per row */
    main.content table th,
    main.content table td {
        padding: 0.45rem 0.5rem;
        font-size: 0.85rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Comfortable tap targets for in-table action buttons/links */
    main.content table .btn,
    main.content table a.btn {
        min-height: var(--m-touch);
        display: inline-flex;
        align-items: center;
    }

    /* Forms: stack Bootstrap row/col fields so inputs aren't crushed */
    .row > [class*="col-"] { margin-bottom: 0.5rem; }
}

/* ============================================================
   PHONE TIER (≤ 575.98px) — native-app feel
   The page NEVER scrolls sideways. Tables transform into stacked
   cards; every row becomes its own block.
   ============================================================ */
@media (max-width: 575.98px) {
    /* Tighter page gutters on phones */
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        padding-left: var(--m-gutter-phone);
        padding-right: var(--m-gutter-phone);
    }

    /* Suppress horizontal scroll on .table-responsive wrappers */
    .table-responsive {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* ── ALL tables on phone become stacked-card layout ── */
    main.content table:not(.table-no-stack) {
        display: block;
        width: 100%;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    main.content table:not(.table-no-stack) thead {
        display: none;          /* column headers hidden; labels come from CSS */
    }
    main.content table:not(.table-no-stack) tbody {
        display: block;
    }
    main.content table:not(.table-no-stack) tr {
        display: block;
        margin-bottom: 12px;
        padding: 12px;
        border: 1px solid var(--border, rgba(var(--fg-rgb), 0.12));
        border-radius: var(--figma-radius-md, 12px);
        background: var(--bg-surface, rgba(var(--fg-rgb), 0.03));
    }
    main.content table:not(.table-no-stack) td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 8px;
        padding: 5px 0;
        border: 0;
        font-size: 0.875rem;
        text-align: right;
        white-space: normal;
        word-break: break-word;
    }
    /* data-label attribute powers the left-side column name */
    main.content table:not(.table-no-stack) td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.75rem;
        text-align: left;
        flex-shrink: 0;
        max-width: 45%;
        color: var(--text-secondary, rgba(var(--fg-rgb), 0.6));
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    /* Empty / decoration cells (checkboxes, images) go full-width */
    main.content table:not(.table-no-stack) td:not([data-label]) {
        justify-content: flex-start;
    }

    /* Primary action buttons span the width like native app CTAs */
    .figma-resource-actions .figma-btn,
    .figma-resource-header .figma-btn,
    .card-body > .btn,
    form .btn[type="submit"] {
        width: 100%;
        justify-content: center;
        min-height: var(--m-touch);
    }

    /* Stack header rows (title + actions) vertically */
    .figma-resource-header { flex-direction: column; align-items: stretch; gap: 12px; }

    /* Inputs/selects full width + larger tap height */
    .form-control, .form-select { min-height: var(--m-touch); }

    /* Keep the admin FAB clear of bottom content */
    main.content { padding-bottom: 5rem; }

    /* ── OPT-IN: explicit table-cards (still supported for custom tables) ── */
    table.table-cards { display: block; white-space: normal; }
    table.table-cards thead { display: none; }
    table.table-cards tbody { display: block; }
    table.table-cards tr {
        display: block;
        margin-bottom: 12px;
        padding: 12px;
        border: 1px solid var(--border, rgba(var(--fg-rgb), 0.12));
        border-radius: var(--figma-radius-md, 12px);
        background: var(--bg-surface, rgba(var(--fg-rgb), 0.03));
    }
    table.table-cards td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 6px 0;
        border: 0;
        text-align: right;
        white-space: normal;
    }
    table.table-cards td::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        color: var(--text-secondary, rgba(var(--fg-rgb), 0.7));
    }
}

/* ============================================================
   PHONE: incidents-table stacked-card labels
   The incidents-table uses semantic td classes instead of
   data-label; map each class to a human-readable column name.
   ============================================================ */
@media (max-width: 575.98px) {
    /* Incidents table: image and checkbox cells take full row */
    .incidents-table td.incident-thumbnail,
    .incidents-table td:has(.no-image-placeholder),
    .incidents-table td:has(input[type="checkbox"]) {
        justify-content: flex-start;
    }

    .incidents-table td.incident-date::before   { content: "When"; }
    .incidents-table td.incident-type::before   { content: "Type"; }
    .incidents-table td.incident-location::before { content: "Location"; }
    .incidents-table td.incident-company::before  { content: "Company"; }
    .incidents-table td.incident-external-id::before { content: "ID"; }
    .incidents-table td.incident-coords::before   { content: "Coords"; }

    /* Keep incident thumbnail image constrained */
    .incident-thumbnail img { max-width: 80px; height: auto; border-radius: 6px; }

    /* Incidents filter bar: stack vertically on phone */
    .incidents-filter-bar { flex-direction: column; gap: 8px; }
    .incidents-filter-dropdown,
    .incidents-filter-search { width: 100%; }
    .incidents-date { width: 100%; }

    /* Incidents quick-date chips: wrap */
    .incidents-quick-dates { flex-wrap: wrap; gap: 4px; }
}

/* ============================================================
   PHONE: figma-table generic label support
   For tables using the .figma-table class (Attendance, LOSAP,
   etc.) that add data-label on each <td>.
   ============================================================ */
@media (max-width: 575.98px) {
    /* figma-table gets the same stacked treatment via the
       generic main.content table rule above; these overrides
       tune sizing for the themed surface. */
    .figma-table tr {
        background: var(--bg-surface, rgba(var(--fg-rgb), 0.03)) !important;
    }
    .figma-table td { border-bottom: 1px solid var(--border, rgba(var(--fg-rgb), 0.08)); }
    .figma-table td:last-child { border-bottom: 0; }
}
}