/* Nova layout shell — blocking load before async styles.css / extra.css */
/* layout-critical geometry, skeleton gates, map loader, list table columns */
/* Decoration / route variants / reduced-motion overrides: extra.css */

:root {
    --devices-map-chrome: 21.5rem;
}

@media (min-width: 43.75em) {
    :root {
        --devices-map-chrome: 15.5rem;
    }
}

@media (min-width: 80em) {
    :root {
        --devices-map-chrome: 21.5rem;
    }
}

    body {
        margin: 0;
        color: #3a4049;
        background-color: #ecf2f6;
        font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif;
        line-height: 1.6;
        font-size: 0.95em;
    }

    .app-main-body {
        position: relative;
        min-height: 200px;
    }

    html:not(.is-page-ready) .js-table-skeleton-host {
        min-height: 22em;
    }

    .page-skeleton-tbody__row td {
        height: 3.2em;
        min-height: 3.8em;
        box-sizing: border-box;
        vertical-align: middle;
    }

    .item-listings__signs .page-skeleton-tbody__row td {
        height: auto;
        min-height: 3.5em;
    }

    /*
     * Critical-path sign centering (extra.css is async). Strip column max-widths
     * stay in extra.css; only first-paint alignment belongs here.
     */
    .page-skeleton-tbody .item-cell {
        vertical-align: middle;
    }

    .page-skeleton-tbody .col-sign {
        text-align: center;
    }

    .page-skeleton-tbody .col-sign .page-skeleton__sign-cell {
        display: inline-block;
        vertical-align: middle;
        line-height: 0;
    }

    .page-skeleton-tbody .col-sign .page-skeleton__icon {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .page-skeleton-tbody__row .page-skeleton__strip {
        display: block;
        width: 90%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .app-header .logo img {
        display: block;
        width: 50px;
        height: 28px;
        object-fit: contain;
        margin: 0;
    }

    .app-main {
        position: absolute;
        right: 0;
        bottom: 0;
        top: 0;
        left: 0;
        /* Content pages must scroll on mobile; map view overrides to hidden */
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        /* Reserve scrollbar width so headings/topbar content do not jump when overflow appears */
        scrollbar-gutter: stable;
        background-color: #ecf2f6;
    }

    /* Legal strip scrolls inside .app-main (see includes/app-footer-legal.html) */
    .app-main > .app-footer.app-footer__small-screen {
        position: relative;
        flex-shrink: 0;
    }

    /* Critical: match styles.css — strip is mobile/tablet only (avoid desktop FOUC). */
    @media (min-width: 80em) {
        .app-main > .app-footer.app-footer__small-screen {
            display: none;
        }
    }

    /* Short pages: footer sits below the body skeleton and paints early — hide until ready. */
    html:not(.is-page-ready) .app-main > .app-footer.app-footer__small-screen {
        display: none;
    }

    /* Critical list reset before async styles.css */
    .app-footer .footer-links,
    .app-footer .footer-links .item {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* Map view: overflow is locked — do not let the legal strip shrink the map */
    body.page-devices-map-view .app-main > .app-footer.app-footer__small-screen {
        display: none;
    }

    @media (min-width: 80em) {
        .app-main {
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            position: fixed;
            bottom: 0;
            top: 3.475em;
            left: 18.75em;
            scrollbar-gutter: stable;
        }
    }

    .app-header {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 0.5em;
        z-index: 2;
        background: #363d51;
        transform: translateY(100%);
        box-sizing: border-box;
    }

    .app-header .logo {
        margin: 0;
        display: none;
    }

    .mainnav {
        text-align: center;
        margin: 0;
        padding: 0;
    }

    .mainnav .items {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mainnav .item {
        display: inline-block;
        margin: 0 0.5em;
    }

    .mainnav-link {
        display: block;
        color: #a6b1d1;
        position: relative;
        font-size: 0.8em;
        min-height: 5.25em;
    }

    .mainnav-link.active {
        color: #fff;
    }

    .mainnav-link.active:before {
        border-color: #5e9bfc;
        background-color: #5e9bfc;
    }

    .has-icon:before {
        content: "";
        text-indent: -5000px;
        overflow: hidden;
        vertical-align: middle;
        background-image: var(--sprites);
        background-repeat: no-repeat;
        display: inline-block;
        margin-right: 0.6em;
    }

    .mainnav-link:before {
        width: 52px;
        height: 52px;
        border: 2px solid #515a73;
        border-radius: 20em;
        left: 0;
        transition: 0.3s ease;
        display: block;
        margin: auto;
    }

    .mainnav-link__signs:before { background-position: 8.5px 8.5px; }
    .mainnav-link__schools:before { background-position: -87px 16px; }
    .mainnav-link__cities:before { background-position: -186px 11px; }
    .mainnav-link__holidays:before { background-position: -287px 12px; }

    @media only screen and (-webkit-min-device-pixel-ratio: 2),
        only screen and (min-device-pixel-ratio: 2) {
        .has-icon:before {
            background-image: var(--sprites2x);
            background-size: 500px;
        }
    }

    @media (min-width: 43.75em) {
        .app-header {
            transform: none;
            padding: 1em;
        }

        .mainnav .item {
            margin: 0 1em;
        }

        .mainnav-link {
            font-size: 0.95em;
            min-height: 2.75em;
        }

        .mainnav-link:before {
            display: inline-block;
            margin: 0 0.5em 0 0;
        }
    }

    @media (min-width: 80em) {
        .app-main {
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            position: fixed;
            bottom: 0;
            top: 3.475em;
            left: 18.75em;
        }

        .app-header {
            overflow: auto;
            padding: 2.8125em;
            width: 18.75em;
            max-width: 18.75em;
            box-sizing: border-box;
            top: 0;
            height: auto;
            transform: none;
            border-top: none;
            /* Sidebar scroll must not shrink the fixed 18.75em chrome */
            scrollbar-gutter: stable;
        }

        .app-header .logo {
            display: block;
        }

        .app-header .logo:after {
            content: "";
            display: block;
            height: 1px;
            width: 50%;
            margin: 2.5em 0;
            background: #5e9bfc;
            clear: both;
        }

        .app-main-headings .section-inner {
            padding-left: 3.2em;
        }

        .mainnav {
            text-align: left;
            min-height: 12em;
        }

        .mainnav .item {
            display: block;
            margin: 0;
        }

        .mainnav-link {
            font-size: 1em;
            margin: 0 0 0.9em;
            min-height: 3.65em;
            display: flex;
            align-items: center;
            white-space: nowrap;
        }

        .mainnav-link:before {
            flex-shrink: 0;
            margin: 0 0.9em 0 0;
            background-color: transparent;
        }

        .mainnav-link.active:before {
            background-color: transparent;
        }

        .mainnav-link:after {
            content: "";
            display: block;
            position: absolute;
            height: 100%;
            width: 0;
            top: 0;
            left: -2.8em;
            background: #515a73;
            transition: none;
        }

        .mainnav-link.active:after {
            width: 6px;
            background: #5e9bfc;
        }
    }

    .header-footer {
        display: none;
        font-size: 0.875em;
        margin: 6em 0 0;
    }

    @media (min-width: 80em) {
        .header-footer {
            display: block;
        }
    }

    @media (min-width: 80em) and (min-height: 43.75em) {
        .header-footer {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 2.8125em;
            margin: 0;
        }
    }

    .header-footer:before {
        content: "";
        display: block;
        height: 1px;
        width: 50%;
        margin: 0 0 2.5em;
        background: #5e9bfc;
        clear: both;
    }

    .header-footer .footer-links {
        list-style: none;
        margin: 0 0 2em;
        padding: 0;
    }

    .header-footer .footer-links .item {
        display: inline-block;
    }

    .header-footer .footer-links .item:first-child {
        display: block;
        margin-bottom: 0.4em;
    }

    .header-footer .footer-copyright {
        font-size: 0.857em;
    }

    a, .link {
        color: #1e5a9e;
        text-decoration: none;
    }

    /* Skeleton overlay: dismissed via html.is-page-ready.
       Keep position/background here (not only in async extra.css) so edit
       skeletons do not flash as in-flow lists with default bullets. */
    .page-skeleton {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 5;
        background: #ecf2f6;
        min-height: 100%;
        pointer-events: none;
    }

    html.is-page-ready .js-page-skeleton {
        display: none;
    }

    /* Critical: form field lists lose bullets before async styles.css */
    .form-fields,
    .form-fields .field,
    .page-skeleton ul,
    .page-skeleton li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* Form/detail pages with data-nova-ready-gate: hide real fields until ready.
       Chosen-gated pages stay measurable: visibility:hidden makes Chosen's
       search-field width 0 on mobile Safari, so tokenization cannot open. */
    html:not(.is-page-ready) body[data-nova-ready-gate]:not([data-nova-ready-gate="chosen"]) .js-app-main-content {
        visibility: hidden;
    }

    /* Critical Chosen shell before async styles.css — width must not depend on measure */
    .chosen-container {
        display: block;
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        position: relative;
    }

    .chosen-container-multi .chosen-choices {
        list-style: none;
        margin: 0;
        cursor: text;
    }

    .chosen-container-multi .chosen-choices input[type="text"] {
        /* iOS zooms inputs under 16px; that breaks tap-to-token on mobile */
        font-size: 16px;
        min-width: 6em;
        min-height: 1.5em;
        background: transparent;
        border: none;
        outline: 0;
    }

    .chosen-results li {
        display: none;
        list-style: none;
    }

    .chosen-results li.active-result,
    .chosen-results li.no-results {
        display: list-item;
    }

    html.is-page-ready .js-page-skeleton-tbody {
        display: none;
    }

    /* Map-first → List before rows arrive: show deferred skeleton after page-ready. */
    html.is-page-ready .js-table-skeleton-host.is-list-rows-loading .js-deferred-list-skeleton {
        display: table-row-group;
    }

    /*
     * Hide real rows under the deferred skeleton while fetching.
     * Once prepareTableForDataTables runs (is-table-prepared), keep rows in layout
     * with visibility:hidden so DataTables can measure — display:none here left
     * Map→List with an empty table after page-ready.
     */
    html.is-page-ready:not(.is-table-prepared) .js-table-skeleton-host.is-list-rows-loading .js-app-table-body {
        display: none;
    }

    html.is-page-ready.is-table-prepared .js-table-skeleton-host.is-list-rows-loading .js-app-table-body {
        display: table-row-group !important;
        visibility: hidden;
    }

    /* Before prepare: hide real rows. After prepare: keep them in layout
       (visibility only) so DataTables measures final column widths under the cover. */
    html:not(.is-page-ready):not(.is-table-prepared) .js-app-table-body {
        display: none !important;
    }

    html.is-table-prepared:not(.is-page-ready) .js-app-table-body {
        display: table-row-group !important;
        visibility: hidden;
    }

    html.is-page-ready .js-app-table-body {
        display: table-row-group;
        visibility: visible;
    }

    .js-table-skeleton-host {
        position: relative;
    }

    /*
     * Cover after skeleton tbody is parked for DataTables init.
     * Never paint a solid shimmer block here — that looked like a second
     * "generic" skeleton swapping over the row placeholders.
     */
    .page-skeleton-cover {
        position: absolute;
        left: 0;
        right: 0;
        top: 2.75em;
        bottom: auto;
        min-height: 0;
        z-index: 2;
        pointer-events: none;
        background: transparent;
        animation: none;
        border-radius: 2px;
    }

    /* Same row skeleton, parked above the table */
    .page-skeleton-cover--rows {
        background: transparent;
        animation: none;
        min-height: 0;
        bottom: auto;
    }

    .page-skeleton-cover--rows table {
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
    }

    html.is-page-ready .page-skeleton-cover {
        display: none;
    }

    /* Map→List after page-ready still needs the cover while DataTables boots. */
    html.is-page-ready .js-table-skeleton-host.is-list-rows-loading .page-skeleton-cover {
        display: block;
    }

    /*
     * Match projects/orgs/holidays skeleton tables: fill the content host
     * (extra.css uses width:100% on .item-listings__schools / __holidays).
     */
    .js-table-skeleton-host:has(table.item-listings__signs) .page-skeleton-cover {
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    /* Stable white rows before/without waiting on deferred datatables2.css */
    .item-listings .body-row {
        background-color: #fff;
    }

    /*
     * Devices list — same width behaviour as projects/orgs/holidays list tables.
     * Fixed column widths still prevent cell-level CLS; table fills the host.
     */
    table.item-listings__signs.js-table-with-skeleton,
    table.dataTable.item-listings__signs {
        table-layout: fixed;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    table.item-listings__signs.js-table-with-skeleton .col-sign,
    table.item-listings__signs.js-table-with-skeleton th.col-sign,
    table.item-listings__signs.js-table-with-skeleton td.col-sign {
        width: 5.3em;
    }

    table.item-listings__signs.js-table-with-skeleton .col-med,
    table.item-listings__signs.js-table-with-skeleton th.col-med,
    table.item-listings__signs.js-table-with-skeleton td.col-med {
        width: 6em;
    }

    table.item-listings__signs.js-table-with-skeleton .col-large,
    table.item-listings__signs.js-table-with-skeleton th.col-large,
    table.item-listings__signs.js-table-with-skeleton td.col-large {
        width: 10em;
    }

    table.item-listings__signs.js-table-with-skeleton .col-xxlarge,
    table.item-listings__signs.js-table-with-skeleton th.col-xxlarge,
    table.item-listings__signs.js-table-with-skeleton td.col-xxlarge {
        width: 19em;
    }

    table.item-listings__signs.js-table-with-skeleton .col-xsmall,
    table.item-listings__signs.js-table-with-skeleton th.col-xsmall,
    table.item-listings__signs.js-table-with-skeleton td.col-xsmall {
        width: 80px;
        min-width: 80px;
    }

    /* Match post-DataTables thead padding (styles.css table.dataTable thead th) */
    table.item-listings__signs.js-table-with-skeleton thead th {
        padding: 10px;
    }

    .page-skeleton-tbody .col-xxlarge .page-skeleton__strip {
        max-width: 17em;
    }

    .page-skeleton-tbody .col-xsmall .page-skeleton__strip,
    .page-skeleton-tbody .col-small .page-skeleton__strip {
        max-width: 4em;
        margin-left: auto;
    }

    .page-skeleton-tbody .col-sign .page-skeleton__icon {
        width: 3.125em;
        height: 3.125em;
    }

    .page-skeleton__shimmer {
        background: linear-gradient(90deg, #d8dee8 0%, #e8ecf2 50%, #d8dee8 100%);
        background-size: 200% 100%;
        animation: page-skeleton-shimmer 1.4s ease-in-out infinite;
    }

    @keyframes page-skeleton-shimmer {
        0% { background-position: 100% 0; }
        100% { background-position: -100% 0; }
    }

    .page-skeleton__strip {
        display: block;
        height: 12px;
        border-radius: 4px;
    }

    .page-skeleton__strip--xs {
        width: 4em;
    }

    .page-skeleton__strip--heading {
        width: 10em;
        height: 20px;
        margin-bottom: 1.2em;
    }

    .page-skeleton__strip--line {
        width: 100%;
        margin-bottom: 12px;
    }

    .page-skeleton__icon {
        display: block;
        width: 3.1em;
        height: 3.1em;
        border-radius: 4px;
    }

    /* List pages: hide pagination bar until skeleton dismisses */
    html:not(.is-page-ready) .table-bottom,
    html:not(.is-page-ready) .dataTables_info,
    html:not(.is-page-ready) .dataTables_paginate {
        display: none !important;
    }

    /* Above-the-fold layout before deferred styles.css / extra.css */
    .app-main-headings {
        border-bottom: 1px solid #d2d8df;
        background: #fff;
        position: relative;
        min-height: 12em;
    }

    @media (min-width: 43.75em) {
        .app-main-headings {
            min-height: 10.5em;
        }
    }

    @media (min-width: 80em) {
        .app-main-headings {
            min-height: 9.5em;
        }
    }

    @media (min-width: 100em) {
        .app-main-headings {
            min-height: 9.5em;
        }
    }

    .logo-topbar img {
        width: 62px;
        height: 36px;
    }

    .logo-topbar {
        width: 10em;
        display: block;
        position: absolute;
        margin: auto;
        top: 1.1em;
    }

    @media (min-width: 43.75em) {
        .logo-topbar {
            position: absolute;
            left: 2em;
            top: 1.7em;
            width: 14.3em;
        }
    }

    @media (min-width: 80em) {
        .logo-topbar {
            display: none;
        }
    }

    .app-topbar {
        text-align: right;
        background: #363d51;
        left: 0;
        right: 0;
        padding: 1em;
        color: #fff;
        position: relative;
        z-index: 3;
        min-height: 3.25em;
        box-sizing: border-box;
    }

    /* Critical: avoid default bullets before async styles.css (Sign out / Manage Users). */
    .topbar-user-controls {
        display: inline-block;
        list-style: none;
        margin: 0;
        padding: 0;
        vertical-align: middle;
    }

    .topbar-user-controls .item {
        display: inline-block;
        list-style: none;
        font-size: 0.875em;
    }

    /* Match final topbar-user visibility so async styles.css does not grow the bar. */
    .topbar-user {
        display: none;
        font-weight: 500;
        position: relative;
    }

    @media (min-width: 43.75em) {
        .topbar-user {
            display: block;
        }
    }

    @media (min-width: 80em) {
        .topbar-user {
            display: inline-block;
            vertical-align: middle;
            margin: 0 2em 0 0;
        }
    }

    @media (min-width: 43.75em) {
        .app-topbar {
            padding: 1.2em 2em;
            min-height: 3.5em;
        }
    }

    @media (min-width: 80em) {
        .app-topbar {
            height: 3.475em;
            min-height: 3.475em;
            max-height: 3.475em;
            padding: 0.9em 1.5em;
            position: fixed;
            background: #fff;
            left: 18.75em;
            top: 0;
            border-bottom: 1px solid #d2d8df;
        }
    }

    .map.map__short {
        height: 10em;
        max-height: 10em;
        min-height: 10em;
        width: 100%;
        position: relative;
        border-bottom: 2px solid #d2d8df;
    }

    @media (min-width: 43.75em) {
        .map.map__short {
            height: 22em;
            max-height: 22em;
            min-height: 22em;
        }
    }

    #tab-1 .map.map__short #map {
        height: 100%;
        width: 100%;
    }

    .page-headings {
        position: relative;
    }

    .page-heading {
        line-height: 1.2;
        margin: 0 0.3em 0 0;
        display: inline-block;
        color: #363d51;
        font-weight: 500;
        font-size: 1.6em;
    }

    /* Critical: Edit must not inherit page-heading size before async styles.css */
    .page-heading-edit {
        font-size: 0.875rem;
        font-weight: 500;
    }

    /* Critical: icon sprites hide label text ("Back") before async styles.css */
    .icon {
        display: inline-block;
        text-indent: -5000px;
        overflow: hidden;
        text-align: left;
        vertical-align: middle;
        background-image: var(--sprites);
        background-repeat: no-repeat;
    }

    @media only screen and (-webkit-min-device-pixel-ratio: 2),
        only screen and (min-device-pixel-ratio: 2) {
        .icon {
            background-image: var(--sprites2x);
            background-size: 500px;
        }
    }

    .icon__back {
        background-position: -350px -100px;
        height: 17px;
        width: 20px;
        transition: none;
    }

    @media (min-width: 43.75em) {
        .page-heading {
            font-size: 2em;
        }
    }

    @media (min-width: 80em) {
        .page-heading {
            font-size: 2.5em;
        }
    }

    @media (min-width: 100em) {
        .page-headings {
            display: inline-block;
            vertical-align: middle;
            margin-right: -4px;
        }
    }

    .page-subheading {
        margin: 0;
        font-size: 1em;
        display: inline-block;
        color: #5a6575;
        vertical-align: bottom;
    }

    @media (min-width: 100em) {
        .page-subheading {
            display: block;
        }
    }

    .page-subheading strong {
        color: #1e5a9e;
        font-weight: 500;
        font-variant-numeric: tabular-nums;
        font-synthesis: none;
    }

    .page-filter {
        margin: 1em 0 0;
    }

    .page-filter .button-group {
        list-style: none;
        margin: 0 -1.5em 0 -1.5em;
        padding: 0 0 0 1.5em;
        white-space: nowrap;
        overflow: auto;
        display: block;
        -webkit-overflow-scrolling: touch;
    }

    .page-filter .button-group .item {
        display: inline-block;
        margin: 0 0.1em 0.6em;
    }

    .page-filter .button-group .admin-only {
        position: relative;
    }

    .button-toggle-input {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    .page-filter .button,
    .page-filter .button__toggle,
    .page-filter label.button,
    .page-filter label.button.button__toggle {
        background: none;
        border: 2px solid #d2d8df;
        color: #3a4049;
        font-weight: 500;
        display: inline-block;
        padding: 1em 1.7em 0.9em 1.2em;
        font-size: 0.875em;
        border-radius: 20em;
        text-transform: uppercase;
        line-height: 1.3;
        text-align: center;
        position: relative;
        cursor: pointer;
        width: auto !important;
        max-width: none !important;
        box-sizing: border-box;
        min-height: 2.875em;
        vertical-align: top;
        white-space: nowrap;
        transition: none;
    }

    .page-filter label.button.has-icon:before {
        background-image: none;
        text-indent: 0;
    }

    .page-filter label.button.button__online:before,
    .page-filter label.button.button__offline:before,
    .page-filter label.button.button__errors:before,
    .page-filter .button__online:before,
    .page-filter .button__offline:before,
    .page-filter .button__errors:before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        height: 20px;
        margin-right: 0.6em;
    }

    .page-filter .button-group .admin-only label.button.button__toggle {
        padding-left: 1.7em;
        width: 14.5em !important;
        min-width: 14.5em !important;
        max-width: 14.5em !important;
    }

    .page-filter .button-group .admin-only label.button.button__toggle:before {
        content: none;
        display: none;
        width: 0;
        height: 0;
        margin: 0;
    }

    .page-filter .button__online:before,
    .page-filter label.button.button__online:before {
        width: 20px;
        border-radius: 20em;
        background: #8eca66;
    }

    .page-filter .button__offline:before {
        width: 20px;
        border-radius: 20em;
        background: #ea5a5a;
    }

    .page-filter .button__errors:before {
        width: 20px;
        border-radius: 20em;
        background: #5e9bfc;
    }

    .page-filter .button-subtext {
        font-size: 0.857em;
        color: #5a6575;
        font-variant-numeric: tabular-nums;
        font-synthesis: none;
    }

    .page-filter .search-control {
        position: relative;
    }

    .page-filter .search-control:before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0.7em;
        width: 22px;
        height: 22px;
        z-index: 1;
        background-image: var(--sprites);
        background-repeat: no-repeat;
        background-position: -450px 0;
        pointer-events: none;
    }

    .page-filter .search-control__header {
        position: absolute;
        display: inline-block;
        vertical-align: middle;
        margin-right: -4px;
        right: 1.5em;
        top: 4.8em;
        margin-top: 0;
        margin-bottom: 0;
    }

    .page-filter .search-control__header.has-icon {
        margin-left: 1em;
    }

    .page-filter .search-input {
        border: none;
        width: 100%;
        min-width: 12em;
        color: #3a4049;
        padding: 0 0 0.9em 2.4em;
        border-bottom: 1px solid rgba(58, 64, 73, 0.25);
        background: #fff;
        font-size: 0.875em;
        border-radius: 0;
        box-sizing: border-box;
    }

    /* Mobile: search sits outside the toggle scroller as a full-width row */
    @media (max-width: 43.74em) {
        .page-filter {
            display: flex;
            flex-direction: column;
            align-items: stretch;
        }

        .page-filter .button-group {
            flex: 0 0 auto;
            width: auto;
            max-width: 100%;
        }

        .page-filter > .search-control__header,
        .page-filter .search-control__header {
            position: relative !important;
            display: block !important;
            right: auto !important;
            top: auto !important;
            left: auto !important;
            margin: 0.85em 0 0.2em !important;
            width: 100% !important;
            max-width: none !important;
            box-sizing: border-box !important;
        }

        .page-filter .search-control__header.has-icon {
            margin-left: 0 !important;
        }

        .page-filter .search-control:before {
            bottom: auto;
            top: 0.2em;
        }

        .page-filter .search-input {
            min-width: 0 !important;
            width: 100% !important;
            max-width: none !important;
            font-size: 1em;
            padding: 0.25em 0 0.55em 2.4em;
        }
    }

    @media only screen and (-webkit-min-device-pixel-ratio: 2),
        only screen and (min-device-pixel-ratio: 2) {
        .page-filter .search-control:before {
            background-image: var(--sprites2x);
            background-size: 500px;
        }
    }

    @media (min-width: 43.75em) {
        .page-filter {
            display: block;
            font-size: 1em;
            margin-top: 2em;
        }

        .page-filter .button-group {
            display: inline-block;
            white-space: normal;
            overflow: visible;
            margin-right: 0;
            margin-left: 0;
            margin-top: 1.5em;
            padding: 0;
        }

        .page-filter .search-control__header {
            right: 2em;
            top: 3.9em;
            margin-top: -1em;
        }

        .page-filter .search-input {
            width: 20em;
        }
    }

    @media (min-width: 62.5em) {
        .page-filter .search-control__header {
            top: 4.5em;
        }
    }

    @media (min-width: 100em) {
        .page-filter {
            display: inline-block;
            vertical-align: middle;
            margin-top: 0;
            text-align: right;
            width: 66.6666%;
        }

        .page-filter .button-group {
            margin-top: 0;
        }

        .page-filter .search-control__header {
            position: relative;
            margin-top: 0;
            margin-left: 1em;
            right: auto;
            top: auto;
        }

        .page-filter label.button,
        .page-filter label.button.button__toggle,
        .page-filter .button,
        .page-filter .button__toggle {
            padding-bottom: 1em;
        }
    }

    .tab-content {
        display: none;
    }

    .tab-content.active {
        display: block;
    }

    .project-detail-below-map {
        position: relative;
        min-height: 52em;
    }

    /* Project detail: skeleton overlays map + content below */
    .project-detail-tab {
        position: relative;
    }

    .project-detail-tab > .page-skeleton--project-detail {
        /* Above Leaflet panes so map cannot cover the skeleton */
        z-index: 1100;
        min-height: 100%;
        bottom: 0;
    }

    .page-skeleton--project-detail .page-skeleton__map-block {
        display: block;
        width: 100%;
        height: 10em;
        min-height: 10em;
        max-height: 10em;
        box-sizing: border-box;
        border-bottom: 2px solid #d2d8df;
    }

    @media (min-width: 43.75em) {
        .page-skeleton--project-detail .page-skeleton__map-block {
            height: 22em;
            min-height: 22em;
            max-height: 22em;
        }
    }

    /*
     * Project-detail skeleton chrome must be critical (layout.css).
     * When it lived only in async extra.css, first paint was a blank grey
     * overlay ("generic") until the theme CSS arrived.
     */
    .page-skeleton--project-detail {
        background: #ecf2f6;
    }

    .page-skeleton--project-detail .page-skeleton__map-block {
        background-color: #d8dee8;
        position: relative;
        z-index: 0;
    }

    .page-skeleton--project-detail .page-skeleton__line {
        display: block;
        background: #d8dee8;
        border-radius: 3px;
    }

    .page-skeleton--project-detail .section-heading,
    .page-skeleton--project-detail .sign-name,
    .page-skeleton--project-detail .sign-locale {
        color: transparent;
    }

    .page-skeleton--project-detail .page-skeleton__assigned-signs {
        position: relative;
        z-index: 2;
    }

    .page-skeleton--project-detail .page-skeleton__assigned-item,
    .js-deferred-signs-skeleton .page-skeleton__assigned-item {
        display: block;
        text-align: center;
        vertical-align: top;
        margin: 0;
        width: auto;
    }

    .page-skeleton--project-detail .page-skeleton__assigned-item .sign-img,
    .js-deferred-signs-skeleton .page-skeleton__assigned-item .sign-img {
        float: none;
        margin: 0 auto;
        display: block;
    }

    .page-skeleton--project-detail .page-skeleton__assigned-icon,
    .js-deferred-signs-skeleton .page-skeleton__assigned-icon {
        display: block;
        width: 4.8em;
        height: 4.8em;
        border-radius: 4px;
        background: #d8dee8;
        margin: 0 auto;
        box-sizing: border-box;
    }

    @media (min-width: 43.75em) {
        .page-skeleton--project-detail .page-skeleton__assigned-icon,
        .js-deferred-signs-skeleton .page-skeleton__assigned-icon {
            width: 8em;
            height: 8em;
        }
    }

    @media (min-width: 80em) {
        .page-skeleton--project-detail .page-skeleton__assigned-icon,
        .js-deferred-signs-skeleton .page-skeleton__assigned-icon {
            width: 10em;
            height: 10em;
        }
    }

    .page-skeleton--project-detail .page-skeleton__strip--name,
    .js-deferred-signs-skeleton .page-skeleton__strip--name,
    .page-skeleton--project-detail .page-skeleton__strip--locale,
    .js-deferred-signs-skeleton .page-skeleton__strip--locale {
        margin-left: auto;
        margin-right: auto;
    }

    .page-skeleton__strip--name {
        width: 3em;
        height: 12px;
        margin-top: 1em;
        margin-bottom: 0.5em;
    }

    .page-skeleton__strip--locale {
        width: 10em;
        height: 10px;
        max-width: 12em;
    }

    .page-skeleton--project-detail .page-skeleton__line--footnote {
        width: 100%;
        max-width: 42em;
        height: 0.85em;
    }

    .page-skeleton--project-detail .page-skeleton__line--section {
        width: 9em;
        height: 1.35em;
        margin-bottom: 0.35em;
    }

    .page-skeleton--project-detail .page-skeleton__line--intro {
        width: 100%;
        max-width: 24em;
        height: 0.9em;
    }

    .page-skeleton--project-detail .page-skeleton__line--time-label {
        width: 1.5em;
        height: 0.9em;
    }

    .page-skeleton--project-detail > .section-inner.bg-white {
        background: #fff;
    }

    .page-skeleton--project-detail .page-skeleton__schedule-wrap {
        margin-top: 1em;
    }

    .page-skeleton--project-detail .page-skeleton__schedule-row {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 0.35em;
        margin-bottom: 0.75em;
    }

    .page-skeleton--project-detail .page-skeleton__schedule-col {
        flex: 1 1 2.5em;
        min-width: 2.5em;
        height: 2em;
        background: #d8dee8;
        border-radius: 3px;
    }

    .page-skeleton--project-detail .page-skeleton__schedule-col--tall {
        height: 4.5em;
    }

    .page-skeleton--project-detail .page-skeleton__schedule-buttons {
        margin-top: 1em;
        font-size: 0;
    }

    .page-skeleton--project-detail .page-skeleton__button--schedule {
        display: inline-block;
        width: 7em;
        height: 2.5em;
        border-radius: 3px;
        background: #d8dee8;
        vertical-align: middle;
        margin-right: 0.5em;
    }

    .page-skeleton--project-detail .page-skeleton__manual-control {
        list-style: none;
        margin: 1em 0 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 1em;
    }

    .page-skeleton--project-detail .page-skeleton__manual-item {
        flex: 1 1 6em;
        min-width: 6em;
        padding: 1em;
        text-align: center;
    }

    .page-skeleton--project-detail .page-skeleton__strip--manual-label {
        width: 5em;
        height: 10px;
        margin: 0 auto 0.75em;
    }

    .page-skeleton--project-detail .page-skeleton__strip--manual-time {
        width: 4em;
        height: 14px;
        margin: 0 auto;
    }

    /* Hide map loader under the page skeleton until page-ready */
    html:not(.is-page-ready) .project-detail-tab .devices-map-loading {
        visibility: hidden;
    }

    /* Deferred assigned-sign tiles (loaded after first paint) */
    .js-assigned-signs-host .js-deferred-signs-skeleton {
        display: none;
    }

    .js-assigned-signs-host.is-signs-loading .js-assigned-signs-list {
        display: none;
    }

    .js-assigned-signs-host.is-signs-loading .js-deferred-signs-skeleton {
        display: grid;
        /* Same stacking as real tiles (inline z-index: 9999 on the live list) */
        position: relative;
        z-index: 9999;
    }

    .js-assigned-signs-host.is-signs-loading {
        min-height: 14em;
    }

    .device-detail-overview {
        position: relative;
        min-height: 26em;
    }

    .organisation-detail-overview {
        position: relative;
        min-height: 18em;
    }

    /* Organisation detail skeleton: cover .app-main-body (sibling of content), not under sidebar. */
    .app-main-body > .page-skeleton--organisation-detail {
        background: #ecf2f6;
        z-index: 5;
    }

    .page-skeleton--organisation-detail .page-skeleton__line {
        display: inline-block;
        background: #d8dee8;
        border-radius: 3px;
        vertical-align: middle;
    }

    .page-skeleton--organisation-detail .page-skeleton__line--label {
        width: 8.5em;
        height: 1em;
    }

    .page-skeleton--organisation-detail .page-skeleton__line--value {
        width: 11em;
        height: 1em;
    }

    .page-skeleton--organisation-detail .sign-technical-specs-table tr:nth-child(1) .page-skeleton__line--value {
        width: 14em;
    }

    .page-skeleton--organisation-detail .sign-technical-specs-table tr:nth-child(2) .page-skeleton__line--value {
        width: 18em;
    }

    .page-skeleton--organisation-detail .sign-technical-specs-table tr:nth-child(3) .page-skeleton__line--value {
        width: 12em;
    }

    .page-skeleton--organisation-detail .sign-technical-specs-table td {
        padding: 0.65em 0;
        vertical-align: middle;
    }

    .page-skeleton--organisation-detail .col-label-heading {
        color: transparent;
    }

    /* White card chrome inside the body overlay (matches real section-inner). */
    .page-skeleton--organisation-detail > .section-inner.bg-white {
        background: #fff;
    }

    /* Device detail skeleton chrome (was async extra.css — caused generic→correct flash). */
    .page-skeleton--device-detail {
        background: #fff;
        min-height: 100%;
    }

    .page-skeleton--device-detail .page-skeleton__line {
        display: inline-block;
        background: #d8dee8;
        border-radius: 3px;
        vertical-align: middle;
    }

    .page-skeleton--device-detail .page-skeleton__line--heading {
        width: 5.5em;
        height: 1em;
    }

    .page-skeleton--device-detail .page-skeleton__sign-img {
        display: block;
        width: 11em;
        height: 11em;
        border-radius: 4px;
    }

    .page-skeleton--device-detail .page-skeleton__line--section {
        width: 9.5em;
        height: 1.35em;
    }

    .page-skeleton--device-detail .page-skeleton__line--label {
        width: 8.5em;
        height: 1em;
    }

    .page-skeleton--device-detail .page-skeleton__line--value {
        width: 11em;
        height: 1em;
    }

    .page-skeleton--device-detail .sign-technical-specs-table tr:nth-child(3n+1) .page-skeleton__line--value {
        width: 14em;
    }

    .page-skeleton--device-detail .sign-technical-specs-table tr:nth-child(3n+2) .page-skeleton__line--value {
        width: 9em;
    }

    .page-skeleton--device-detail .sign-technical-specs-table tr:nth-child(3n) .page-skeleton__line--value {
        width: 12em;
    }

    .page-skeleton--device-detail .col-label-heading,
    .page-skeleton--device-detail .heading,
    .page-skeleton--device-detail .section-heading {
        color: transparent;
    }

    /* Edit form skeleton chrome (critical — avoid empty overlay then styled bars). */
    .page-skeleton--edit-form {
        background: #ecf2f6;
    }

    .page-skeleton--edit-form .page-skeleton__line {
        display: block;
        background: #d8dee8;
        border-radius: 3px;
    }

    .page-skeleton--edit-form .section-heading__small {
        color: transparent;
    }

    .page-skeleton--edit-form .page-skeleton__line--section-sm {
        width: 11em;
        height: 1.15em;
    }

    .page-skeleton--edit-form .page-skeleton__line--copy {
        width: 100%;
        max-width: 22em;
        height: 0.85em;
        margin-bottom: 0.55em;
    }

    .page-skeleton--edit-form .page-skeleton__line--copy-short {
        max-width: 16em;
    }

    .page-skeleton--edit-form .page-skeleton__line--field-label {
        width: 5.5em;
        height: 0.9em;
        margin-bottom: 0.45em;
    }

    .page-skeleton--edit-form .page-skeleton__line--field-label-long {
        width: 100%;
        max-width: 18em;
    }

    .page-skeleton--edit-form .page-skeleton__input {
        display: block;
        width: 100%;
        height: 3.25em;
        background: #d8dee8;
        border-radius: 3px;
        box-sizing: border-box;
    }

    .page-skeleton--edit-form .page-skeleton__graphic-field {
        display: block;
        overflow: hidden;
    }

    .page-skeleton--edit-form .page-skeleton__thumbnail {
        display: block;
        float: left;
        width: 70px;
        max-width: 15%;
        height: 70px;
        background: #d8dee8;
        border-radius: 3px;
    }

    .page-skeleton--edit-form .page-skeleton__input--select {
        float: right;
        width: 84%;
        padding-left: 10px;
        box-sizing: border-box;
    }

    .page-skeleton--edit-form .page-skeleton__field--graphic {
        overflow: hidden;
    }

    .page-skeleton--edit-form .page-skeleton__input--checkbox {
        width: 1.15em;
        height: 1.15em;
    }

    .page-skeleton--edit-form .page-skeleton__input--multiselect {
        height: 2.35em;
    }

    .page-skeleton--edit-form .page-skeleton__input--textarea {
        height: 9em;
    }

    .page-skeleton--edit-form .page-skeleton__map {
        width: 100%;
        min-height: 10em;
        margin-bottom: 0;
        background: #d8dee8;
        border-radius: 3px;
    }

    @media (min-width: 43.75em) {
        .page-skeleton--edit-form .page-skeleton__map {
            min-height: 16em;
        }
    }

    .page-skeleton--edit-form .page-skeleton__line--footnote {
        width: 18em;
        height: 0.85em;
    }

    .page-skeleton--edit-form .page-skeleton__field--textarea {
        margin-top: 1.5em;
    }

    .page-skeleton--edit-form .page-skeleton__submit-row {
        font-size: 0;
    }

    .page-skeleton--edit-form .page-skeleton__button {
        display: inline-block;
        width: 4.5em;
        height: 2.85em;
        border-radius: 3px;
        background: #d8dee8;
        vertical-align: middle;
    }

    .page-skeleton--edit-form .page-skeleton__button--secondary {
        width: 5.25em;
        margin-left: 0.65em;
    }

    .page-skeleton__generic {
        background: #fff;
        padding: 24px;
        border-radius: 4px;
    }

    .page-skeleton__generic .page-skeleton__strip--heading {
        width: 10em;
        height: 20px;
        margin-bottom: 1.2em;
    }

    .page-skeleton__generic .page-skeleton__strip--line {
        display: block;
        width: 100%;
        margin-bottom: 12px;
    }

    .assigned-signs-list {
        list-style: none;
        margin: 0;
        padding: 0;
        text-align: center;
        position: relative;
    }

    /* Column count from --assigned-signs-cols (desktop) / --assigned-signs-cols-mobile */
    .assigned-signs-list--grid {
        --assigned-signs-cols: 4;
        --assigned-signs-cols-mobile: 2;
        display: grid;
        grid-template-columns: repeat(var(--assigned-signs-cols-mobile), minmax(0, 12em));
        justify-content: center;
        column-gap: 1.5em;
        row-gap: 1em;
    }

    .assigned-signs-list--grid .item {
        text-align: center;
        overflow: visible;
    }

    .assigned-signs-list--grid .sign-img {
        float: none;
        margin: 0 auto;
        display: block;
        position: relative;
        /* Match icon box so Off/Offline ::before/::after cover the graphic */
        width: 4.8em;
        height: 4.8em;
    }

    @media (min-width: 43.75em) {
        .assigned-signs-list--grid {
            grid-template-columns: repeat(var(--assigned-signs-cols), 10em);
            column-gap: 2.6em;
            row-gap: 0;
            margin-top: -6em;
            margin-bottom: -2em;
            margin-left: auto;
            margin-right: auto;
            white-space: normal;
            overflow: visible;
        }

        .assigned-signs-list--grid .item {
            display: block;
            margin: 0 0 2em;
        }

        .assigned-signs-list--grid .sign-img {
            width: 8em;
            height: 8em;
        }
    }

    @media (min-width: 80em) {
        .assigned-signs-list--grid .sign-img {
            width: 10em;
            height: 10em;
        }
    }

    .assigned-signs-list .sign-img__img {
        display: block;
        border-radius: 5px;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .item-listings .sign-img {
        width: 3.1em;
        height: 3.1em;
        object-fit: contain;
        display: block;
    }

    .multiple-signs-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .multiple-signs-list .item {
        display: inline-block;
    }

    .multiple-signs-list .sign-img {
        width: 2.8em;
        height: 2.8em;
        object-fit: contain;
        display: block;
    }

    .devices-map-loading {
        display: block;
        position: absolute;
        inset: 0;
        background: #ecf2f6;
        color: #575d6c;
        z-index: 1000;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        contain: layout style paint;
        overflow: hidden;
    }

    .devices-map-loading.active {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .devices-map-loading .loader {
        position: absolute;
        top: calc(50% - 2.75em);
        left: 50%;
        margin-left: -35px;
        border: 6px solid #f3f3f3;
        border-bottom: 6px solid #5e9bfc;
        border-radius: 50%;
        width: 70px;
        height: 70px;
        box-sizing: border-box;
        animation: devices-map-spin 0.8s ease-in-out infinite;
    }

    @keyframes devices-map-spin {
        0% { transform: rotate(0deg); opacity: 1; }
        50% { opacity: 0.5; }
        100% { transform: rotate(360deg); opacity: 1; }
    }

    .devices-map-loading p {
        position: absolute;
        top: calc(50% + 2.75em);
        left: 0;
        right: 0;
        margin: 0;
        padding: 0;
        height: 1.6em;
        line-height: 1.6;
        text-align: center;
        white-space: nowrap;
    }

    /* Devices list map tab — fill space below headings (no 100vh calc) */
    body.page-devices-map-view .app-main {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    @media (max-width: 79.99em) {
        body.page-devices-map-view .app-main {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 5.9em;
        }
    }

    body.page-devices-map-view .app-main-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    body.page-devices-map-view .app-main-content {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    body.page-devices-map-view .devices-map-tab.tab-content.active {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .devices-map-tab #map {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        position: relative;
        width: 100%;
        background: #ecf2f6;
        overflow: hidden;
        contain: layout size style;
    }

    .devices-map-tab #map .leaflet-container {
        width: 100%;
        height: 100%;
        min-height: inherit;
        position: relative;
        z-index: 0;
    }

    .app-main-headings .section-inner {
        padding: 1.5em;
    }

    @media (min-width: 43.75em) {
        .app-main-headings .section-inner {
            padding: 2.5em;
        }
    }

    @media (min-width: 62.5em) {
        .app-main-headings .section-inner {
            padding: 3.2em;
        }
    }

    @media (min-width: 80em) {
        .app-main-headings .section-inner {
            padding-left: 3.2em;
        }
    }

    /* Header activate toggle: prevent full .schedule-control min-width/margin from shifting layout */
    .app-main-headings .page-filter .schedule-control.schedule-control__manual {
        min-width: 0;
        max-width: none;
        margin: 0;
        padding: 0;
        text-align: center;
        list-style: none;
    }

    .app-main-headings .page-filter .schedule-control__manual .item {
        display: inline-block;
        padding: 0 1em 1em;
    }

    /* Critical: hide a11y-only labels/inputs before async styles.css */
    .visuallyhidden {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    .app-main-headings .schedule-switch {
        width: 3.3em;
        height: 1.85em;
        border-radius: 20em;
        border: 2px solid #c0c9d3;
        display: block;
        position: relative;
        margin: auto;
        box-sizing: border-box;
        cursor: pointer;
        overflow: hidden;
        text-indent: -5000px;
        transition: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    .app-main-headings .schedule-switch:after {
        content: "";
        display: block;
        position: absolute;
        height: 1.2em;
        width: 1.2em;
        background: #c0c9d3;
        top: 3px;
        left: 5px;
        border-radius: 20em;
        transition: none;
    }

    .app-main-headings .schedule-input:checked + .schedule-switch {
        background: #5e9bfc;
        border-color: #5e9bfc;
    }

    .app-main-headings .schedule-input:checked + .schedule-switch:after {
        background: #fff;
        transform: translateX(100%);
    }

    .app-main-headings .schedule-time {
        font-size: 1.0625em;
        line-height: 1;
        margin: 0.8em 0 0;
        display: block;
    }

    .page-headings .icon__back {
        margin: -0.6em 0.5em 0 0;
    }

    @media (min-width: 80em) {
        .page-headings .icon__back {
            position: absolute;
            margin: 0;
            left: -1.8em;
            top: 0.9em;
        }
    }

    .tabs .tab-items {
        list-style: none;
        margin: 1.5em -1.5em -1.5em -1.5em;
        padding: 0 1.5em;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .tabs .tab-item {
        display: inline-block;
        margin: 0 1em 0 0;
    }

    .tabs .tab-link {
        color: #8b97a9;
        display: block;
        position: relative;
        padding-bottom: 1.5em;
        text-decoration: none;
    }

    .tabs .tab-link:after {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 5px;
        background: none;
        bottom: 0;
    }

    .tabs .tab-link:hover:after {
        background: #d2d8df;
    }

    .tabs .tab-link.active {
        color: #575d6c;
    }

    .tabs .tab-link.active:after {
        background: #5e9bfc;
        height: 5px;
    }

    @media (min-width: 43.75em) {
        .tabs .tab-items {
            margin-bottom: -2.5em;
            margin-left: auto;
            margin-right: auto;
            white-space: normal;
            padding: 0;
            overflow: visible;
        }

        .tabs .tab-item {
            margin-right: 2em;
        }
    }

    @media (min-width: 62.5em) {
        .tabs .tab-items {
            margin-bottom: -3.2em;
        }
    }

    @media (min-width: 80em) {
        .tabs .tab-items {
            margin-top: 2.5em;
        }
    }

/* CLS guard — beat async styles.css equal-specificity overrides */
/* styles.css enables transition:.6s on .app-header; that animates size/transform
   when the stylesheet applies. Keep transition off except mobile drawer .active. */
header.app-header.js-app-header {
    transition: none;
}

header.app-header.js-app-header.active {
    transition: transform 0.6s cubic-bezier(0.86, 0, 0.07, 1);
}

.app-header nav.mainnav .mainnav-link {
    color: #c8d2ea;
    transition: none;
    white-space: nowrap;
}

.app-header nav.mainnav .mainnav-link.active {
    color: #fff;
}

.app-header nav.mainnav .mainnav-link:before,
.app-header nav.mainnav .mainnav-link:after {
    transition: none;
}

@media (min-width: 80em) {
    .app-header nav.mainnav .mainnav-link {
        min-height: 3.65em;
        display: flex;
        align-items: center;
    }

    .app-header nav.mainnav .mainnav-link.active:after {
        width: 6px;
        background: #5e9bfc;
    }
}

@media (max-width: 43.74em) {
    .app-header nav.mainnav .item {
        width: 4.75em;
        vertical-align: top;
    }

    .app-header nav.mainnav .mainnav-link {
        width: 4.75em;
        min-width: 4.75em;
        max-width: 4.75em;
        text-align: center;
        overflow: hidden;
    }
}

@media (min-width: 43.75em) and (max-width: 79.99em) {
    .app-header nav.mainnav .mainnav-link {
        min-height: 2.75em;
        min-width: 5.5em;
        text-align: center;
    }
}

.page-filter ul.button-group label.button,
.page-filter ul.button-group label.button.button__toggle {
    width: auto !important;
    max-width: none !important;
    transition: none;
}

.page-filter .button-group .item.admin-only > label.button.button__toggle {
    width: 14.5em !important;
    min-width: 14.5em !important;
    max-width: 14.5em !important;
}

@media (min-width: 100em) {
    .page-filter label.button,
    .page-filter label.button.button__toggle {
        padding-bottom: 1em;
    }
}

/* Mobile search — outside toggle scroller; beat async styles.css absolute offsets */
@media (max-width: 43.74em) {
    .app-main-headings .page-filter > .search-control__header,
    .page-filter > .search-control.search-control__header {
        position: relative !important;
        display: block !important;
        right: auto !important;
        top: auto !important;
        left: auto !important;
        margin: 0.85em 0 0.2em !important;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    .app-main-headings .page-filter > .search-control__header .search-input,
    .page-filter > .search-control__header .search-input {
        min-width: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }
}