:root {
    /* Easy to adjust nav height */
    --nav-height: 60px;
}

/* Reset-ish */
/* * {
    margin: 0;
    padding: 0;
} */

/* NAVBAR BASE */
.site-nav {
    position: sticky; /* stays at top when scrolling */
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    background: var(--gradient-main);
    border-bottom: 0.125rem solid var(--highlight-colour);
    z-index: 1000;
    font-family: var(--font-display);
}

.nav-inner {
    /* max-width: 1200px; */
    margin: 0 auto;
    height: 100%;
    padding: 0 1rem;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    position: relative;
    /* for mobile menu positioning */

    /* background-color: greenyellow; */
}

/* LEFT: Logo */
.nav-left {
    display: flex;
    align-items: center;
}

.nav-logo-link {
    display: inline-flex;
    width: var(--nav-height);
    height: var(--nav-height);
    align-items: center;
    justify-content: center;
}

.nav-logo {
    width: 90%;
    height: 90%;
    object-fit: contain;

    transition: scale 0.5s ease, filter 0.5s ease;
}

.nav-logo:hover {
    scale: 1.1;
    filter: brightness(130%);
}

/* CENTER: Main links */
.nav-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.nav-item>a,
.nav-item>p,
.dropdown-toggle {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    color: white;
    text-decoration: none;
    padding: 0.25rem 0;
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
}

.nav-item>p {
    cursor: default;
}

/* underline hover effect */
.nav-item>a::after,
.dropdown-toggle::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.15rem;
    width: 0;
    height: 2px;
    background: var(--highlight-colour);
    transition: width 0.2s ease;
}

.nav-item>a:hover::after,
.dropdown-toggle:hover::after {
    width: 100%;
}

/* DROPDOWNS */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;

    background: var(--gradient-main);;
    border-radius: 0.5rem;
    padding: 0.5rem 0;
    list-style: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    opacity: 0;
    visibility: hidden;
    transform-origin: top center;
    transform: translate(-50%, 0.25rem) scale(0.98);
    transition:
        opacity 0.16s ease,
        transform 0.16s ease,
        visibility 0.16s ease;
    z-index: 999;
}

.dropdown-menu li a {
    display: block;
    padding: 0.4rem 0.9rem;
    font-size: 1.1rem;
    color: white;
    text-decoration: none;
    white-space: nowrap;
}

.dropdown-menu li a:hover {
    background: var(--main-colour1);
    color: white;
}

/* show dropdown on hover (desktop) */
.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0.5rem) scale(1);
}

/* RIGHT: Social icons + theme toggle (3 × 60x60 images) */
.nav-right {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.nav-icon {
    width: var(--nav-height);
    height: var(--nav-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    overflow: hidden;
    /* prevents scaling from breaking out */
}

.nav-icon img {
    width: 90%;
    /* initial 90% size */
    height: 90%;
    /* stays inside 60x60 container */
    object-fit: contain;
    transition: transform 0.5s ease, filter 0.5s ease;
}

/* scale on hover – stays visually inside site-nav because container is fixed */
.nav-icon:hover img {
    transform: scale(1.1);
    filter: brightness(130%);
}

/* MOBILE: hamburger toggle */
.nav-toggle {
    display: none;
    /* hidden checkbox */
}

.nav-toggle-label {
    display: none;
    /* shown only on small screens */
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    width: 32px;
    height: 24px;
    flex-shrink: 0;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

.nav-toggle-label span {
    display: block;
    height: 3px;
    border-radius: 999px;
    background: white;
}

.toggle-theme-btn {
    width: calc(var(--nav-height)*0.9);
    height: calc(var(--nav-height)*0.9);
    border: 0.125rem solid var(--highlight-colour);
    border-radius: var(--radius1);
    background: none;
    color: white;
    /* padding: 14px 28px; */
    font-size: 0.75rem;
    cursor: pointer;

    transition: background 0.5s ease, scale 0.5s ease;
}

.toggle-theme-btn:hover {
    scale: 1.1;
    /* background: var(--border-colour); */
    box-shadow: 0 0 10px var(--glow-colour);
}

/* RESPONSIVE BEHAVIOUR */

/* Desktop / tablet default is already defined above. */
/* Now override for smaller screens. */
@media (max-width: 1080px) {
    .nav-inner {
        padding-inline: 0.5rem;
        gap: 0.5rem;
    }

    /* show hamburger */
    .nav-toggle-label {
        display: flex;
    }

    /* Phone tidy-up (12 Oct 2026): the social icons and the theme switch
       no longer crowd the bar. They are hidden until the menu is opened,
       then sit as a row at the top of the menu panel (.nav-center gets
       room for them with padding-top). */
    .nav-right {
        display: none;
        gap: 0.25rem;
    }

    .nav-inner.is-menu-open .nav-right {
        display: flex;
        flex-wrap: wrap;
        position: absolute;
        top: var(--nav-height);
        left: 0;
        right: 0;
        z-index: 2;
        padding: 0.5rem 1rem;
        background: var(--gradient-main);
        border-bottom: 1px solid var(--border-colour);
    }

    /* Make icons slightly smaller on mobile so everything fits */
    .nav-icon {
        /* 45px */
        width: calc(var(--nav-height) * 0.75);
        height: calc(var(--nav-height) * 0.75);
    }

    .toggle-theme-btn {
        width: calc(var(--nav-height) * 0.75);
        height: calc(var(--nav-height) * 0.75);
        font-size: 0.6rem;
    }

    .nav-icon img {
        width: 85%;
        height: 85%;
    }

    /* Reorder the flex items visually */
    .nav-left {
        order: 1;
        /* LOGO */
    }

    .nav-right {
        order: 2;
        /* SOCIAL ICONS */
    }

    .nav-toggle-label {
        order: 3;
        /* HAMBURGER */
        margin-left: auto;
        width: 44px;
        height: 44px;
        padding: 10px 6px;
        box-sizing: border-box;
    }

    /* nav-center becomes dropdown panel below navbar */
    .nav-center {
        position: absolute;
        top: var(--nav-height);
        left: 0;
        right: 0;
        background: var(--gradient-main);
        border-bottom: 0.125rem solid var(--highlight-colour);
        display: none;
        justify-content: flex-start;
        padding-top: calc(var(--nav-height) * 0.75 + 1rem);
        padding-bottom: 0.75rem;
        /* A long menu scrolls inside itself, so Pledge Rain at the bottom
           can always be reached on a short phone screen. */
        box-sizing: border-box; /* the padding counts inside max-height */
        max-height: calc(100vh - var(--nav-height));
        max-height: calc(100dvh - var(--nav-height));
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .nav-links {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        padding: 0.6rem 1rem 0.75rem;
        gap: 0.75rem;
    }

    .nav-item > a,
.dropdown-toggle {
    position: relative;
}

.nav-item > a::after,
.dropdown-toggle::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.2rem;
    height: 2px;
    background: var(--highlight-colour);

    width: 0%;
    transition: width 0.2s ease;
}

.nav-item > a:hover::after,
.dropdown-toggle:hover::after {
    width: 100%;
}

    /* Show nav-center when hamburger checked */
    .nav-inner.is-menu-open .nav-center {
        display: flex;
    }

    /* Dropdowns expanded automatically */
    .dropdown {
        width: 100%;
    }

    .dropdown-menu {
        position: static;
        transform: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        padding-top: 0.25rem;
        padding-bottom: 0.5rem;
        background: transparent;
    }

    .dropdown-menu li a {
        padding-left: 1.25rem;
    }
}

@media (max-width: 1080px) {
    /* ... all your existing mobile styles ... */

    .dropdown-menu {
        position: static;
        transform: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        padding-top: 0.25rem;
        padding-bottom: 0.5rem;
        background: transparent;
    }

    .dropdown-menu li a {
        padding-left: 1.25rem;
    }

    /* 🔥 IMPORTANT: cancel the desktop hover transform on mobile */
    .dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: none;
        /* stops it jumping left */
    }
}

@media (max-width: 1080px) {
    /* ... your other mobile styles ... */

    /* Remove underline just from dropdown headers on mobile */
    .dropdown-toggle::after {
        display: none !important;
        /* or: content: none; */
    }
}

/* "You are here" (12 Oct 2026): the current page's menu item keeps its
   underline, and inside a dropdown the current link is highlighted.
   nav.php adds .is-current / aria-current="page". */
.nav-item.is-current > a,
.nav-item.is-current > .dropdown-toggle {
    color: var(--highlight-colour);
}

.nav-item.is-current > a::after,
.nav-item.is-current > .dropdown-toggle::after {
    width: 100%;
}

.dropdown-menu li a[aria-current="page"] {
    color: var(--highlight-colour);
    font-weight: 600;
}

/* Phone tidy-up (12 Oct 2026): bigger tap targets for the menu links. */
@media (max-width: 1080px) {
    .dropdown-menu li a {
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }

    /* 17 Oct 2026: room for the Keybind Editor in Data Hub without the
       open menu outgrowing a phone screen - a little less space between
       the sections and none of the list's own top/bottom margin (the
       panel already has its own padding). */
    .nav-links {
        gap: 0.4rem;
        margin: 0;
    }
}

/* Theme switch (12 Oct 2026): an icon and the name of the theme it switches
   to ("Red theme" on the blue site, "Blue theme" on the red one), instead
   of the old 12px "Toggle Theme". */
.toggle-theme-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: auto;
    height: 44px;
    padding: 0 0.85rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    white-space: nowrap;
}

.toggle-theme-btn .fa {
    color: var(--highlight-colour);
}

/* Theme menu (16 Oct 2026): Blue, Red, High contrast (js/os-theme.js).
   Same layer as the bell panel. */
.theme-pick {
    position: relative;
}

.theme-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 12rem;
    padding: 0.4rem;
    background: var(--background-dark);
    border: 0.125rem solid var(--highlight-colour);
    border-radius: var(--radius1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.theme-menu[hidden] {
    display: none;
}

.theme-menu button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 40px;
    padding: 0.35rem 0.7rem;
    border: 1px solid transparent;
    border-radius: var(--radius1);
    background: none;
    color: #fff;
    font: 0.95rem var(--font-body);
    text-align: left;
    cursor: pointer;
}

.theme-menu button:hover {
    border-color: var(--highlight-colour);
}

.theme-menu button[aria-pressed="true"] {
    border-color: var(--highlight-colour);
    font-weight: bold;
}

.theme-menu button[aria-pressed="true"]::after {
    content: "\2713";
    margin-left: auto;
    color: var(--highlight-colour);
}

.theme-swatch {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #fff;
}

.theme-swatch.is-blue { background: #0E65AF; }
.theme-swatch.is-red { background: #B0151F; }
.theme-swatch.is-contrast { background: linear-gradient(135deg, #000 50%, #FFE000 50%); }

/* Phones: the menu opens inside the menu panel's top row. */
@media (max-width: 1080px) {
    .theme-menu {
        right: auto;
        left: 0;
    }
}

@media (max-width: 1080px) {
    .toggle-theme-btn {
        width: auto;
        height: 40px;
        font-size: 0.85rem;
    }
}

/* Mid-size screens (12 Oct 2026): keep every menu word on one line; the
   theme switch shows its icon only (its name is still read out). */
.nav-item > a,
.dropdown-toggle {
    white-space: nowrap;
}

@media (min-width: 1081px) and (max-width: 1300px) {
    .nav-links {
        gap: 1rem;
    }

    .toggle-theme-btn {
        padding: 0 0.7rem;
    }

    .toggle-theme-btn .theme-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

/* Finding things round (12 Oct 2026): the menu button is a real button
   (js/os-nav.js); keyboard focus shows on it. */
.nav-toggle-label:focus-visible {
    outline: 2px solid var(--highlight-colour);
    outline-offset: 2px;
    border-radius: var(--radius1);
}

.nav-inner.is-menu-open .nav-toggle-label span:nth-child(1) {
    transform: translateY(10.5px) rotate(45deg);
}

.nav-inner.is-menu-open .nav-toggle-label span:nth-child(2) {
    opacity: 0;
}

.nav-inner.is-menu-open .nav-toggle-label span:nth-child(3) {
    transform: translateY(-10.5px) rotate(-45deg);
}

.nav-toggle-label span {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Search and the notification bell, between the menu and the social icons
   on a computer, beside the menu button on a phone. */
.nav-left { order: 1; }
.nav-center { order: 2; }
.nav-tools { order: 3; }
.nav-right { order: 4; }

.nav-tools {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.nav-tool {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius1);
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.nav-tool:hover,
.nav-tool[aria-expanded="true"] {
    color: var(--highlight-colour);
}

.nav-tool:focus-visible {
    outline: 2px solid var(--highlight-colour);
    outline-offset: -2px;
}

.nav-bell-wrap {
    position: relative;
}

.nav-bell-count {
    position: absolute;
    top: 3px;
    right: 1px;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.25rem;
    box-sizing: border-box;
    border-radius: 999px;
    background: #e04848;
    color: white;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: bold;
    line-height: 1.15rem;
    text-align: center;
}

.nav-bell-panel {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 1001;
    width: min(380px, calc(100vw - 1rem));
    max-height: min(70vh, 560px);
    overflow-y: auto;
    padding: 0.5rem 0.9rem 0.8rem;
    box-sizing: border-box;
    background: var(--background-dark, #0b1420);
    border: 0.125rem solid var(--highlight-colour);
    border-radius: var(--radius1);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
    font-family: var(--font-body);
    text-align: left;
}

.nav-bell-head,
.nav-bell-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.nav-bell-panel h2 {
    margin: 0.2rem 0;
    font-size: 1.05rem;
    text-align: left;
}

.nav-bell-panel h3 {
    margin: 0.7rem 0 0.25rem;
    color: var(--highlight-colour);
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
}

.nav-bell-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-bell-panel li a {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0.4rem;
    border-radius: var(--radius1);
    color: white;
    font-size: 0.92rem;
    line-height: 1.35;
    text-decoration: none;
}

.nav-bell-panel li a:hover,
.nav-bell-panel li a:focus-visible {
    background: var(--main-colour1, rgba(80, 160, 255, 0.15));
}

.nav-bell-panel li .fa {
    width: 1.1rem;
    margin-top: 0.15rem;
    color: var(--highlight-colour);
    text-align: center;
}

.nav-bell-panel li small {
    display: block;
    color: #9bb4c6;
    font-size: 0.8rem;
}

.nav-bell-panel li.is-new span {
    font-weight: bold;
}

.nav-bell-x,
.nav-bell-read {
    background: none;
    border: 0;
    color: var(--highlight-colour);
    font-family: var(--font-body);
    cursor: pointer;
}

.nav-bell-x {
    width: 36px;
    height: 36px;
    font-size: 1.5rem;
    line-height: 1;
}

.nav-bell-read {
    min-height: 32px;
    font-size: 0.85rem;
    text-decoration: underline;
}

.nav-bell-empty,
.nav-bell-more {
    margin: 0.6rem 0.2rem;
    color: #c8d6e2;
    font-size: 0.92rem;
}

/* "Supply Chain (2)" in the Members menu, and a dot on Members itself. */
.nav-count {
    margin-left: 0.35rem;
    color: var(--highlight-colour);
    font-weight: bold;
}

.nav-count-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin: 0 0 0.2rem 0.3rem;
    border-radius: 50%;
    background: #e04848;
    vertical-align: middle;
}

.nav-count[hidden] {
    display: none;
}

@media (max-width: 1080px) {
    .nav-tools {
        order: 2;
        margin-left: auto;
    }

    .nav-toggle-label {
        margin-left: 0;
    }

    .nav-bell-panel {
        position: fixed;
        top: calc(var(--nav-height) + 0.25rem);
        right: 0.5rem;
        left: 0.5rem;
        width: auto;
    }
}

/* The search box over the page (Ctrl+K). */
html.os-search-open {
    overflow: hidden;
}

.os-search {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 10vh 1rem 1rem;
    background: rgba(0, 0, 0, 0.7);
}

.os-search[hidden] {
    display: none;
}

.os-search-box {
    width: min(640px, 100%);
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    background: var(--background-dark, #0b1420);
    border: 0.125rem solid var(--highlight-colour);
    border-radius: var(--radius1);
    box-shadow: 0 0 24px var(--glow-colour, rgba(80, 180, 255, 0.4));
    font-family: var(--font-body);
    text-align: left;
    overflow: hidden;
}

.os-search-field {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem 0.4rem 1rem;
    border-bottom: 1px solid var(--border-colour);
}

.os-search-field .fa {
    color: var(--highlight-colour);
    font-size: 1.15rem;
}

.os-search-field input {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0;
    background: transparent;
    border: 0;
    color: white;
    font-size: 1.1rem;
    outline: none;
}

.os-search-field input::-webkit-search-cancel-button {
    display: none;
}

.os-search-close {
    min-width: 44px;
    height: 36px;
    padding: 0 0.5rem;
    background: none;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius1);
    color: #c8d6e2;
    font-size: 0.8rem;
    cursor: pointer;
}

.os-search-results {
    overflow-y: auto;
    padding: 0.3rem 0.5rem 0.5rem;
}

.os-search-group h3 {
    margin: 0.6rem 0.5rem 0.2rem;
    color: var(--highlight-colour);
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
}

.os-search-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius1);
    color: white;
    text-decoration: none;
}

.os-search-item.is-active {
    background: var(--main-colour1, rgba(80, 160, 255, 0.2));
    box-shadow: inset 3px 0 0 var(--highlight-colour);
}

.os-search-title {
    font-size: 1rem;
}

.os-search-title mark {
    background: none;
    color: var(--highlight-colour);
    font-weight: bold;
}

.os-search-sub {
    color: #9bb4c6;
    font-size: 0.82rem;
}

.os-search-empty {
    margin: 1rem 0.7rem;
    color: #c8d6e2;
}

.os-search-foot {
    margin: 0;
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--border-colour);
    color: #9bb4c6;
    font-size: 0.8rem;
}

.os-search-foot kbd {
    padding: 0 0.3rem;
    border: 1px solid var(--border-colour);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.78rem;
}

@media (max-width: 640px) {
    .os-search {
        padding: 0.5rem;
    }

    .os-search-box {
        max-height: calc(100dvh - 1rem);
    }

    .os-search-foot {
        display: none;
    }
}

/* Phones round (12 Oct 2026): on a phone the menu sections fold. About Us,
   Data Hub and Members show their links only when tapped (js/os-nav.js),
   so the open menu is short. The caret turns when a section is open. */
@media (max-width: 1080px) {
    .dropdown:not(.is-open) .dropdown-menu,
    .dropdown:hover:not(.is-open) .dropdown-menu {
        display: none;
    }

    .dropdown-toggle {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 44px;
        text-align: left;
    }

    .dropdown-toggle .fa-caret-down {
        transition: transform 0.2s ease;
    }

    .dropdown.is-open .dropdown-toggle .fa-caret-down {
        transform: rotate(180deg);
    }

    .nav-item > a {
        display: flex;
        align-items: center;
        min-height: 44px;
    }
}

/* On a computer a section opens on hover, and also when the keyboard
   moves into it (Tab); Escape closes it (13 Oct 2026: the section names are
   links now, so a click opens their page). */
@media (min-width: 1081px) {
    .dropdown:focus-within:not(.is-dismissed) .dropdown-menu,
    .dropdown.is-open .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0.5rem) scale(1);
    }

    .dropdown-toggle:focus-visible {
        outline: 2px solid var(--highlight-colour);
        outline-offset: 4px;
        border-radius: 2px;
    }
}

/* Phones round (12 Oct 2026): the members' bar at the bottom of the screen
   (nav.mobile_bar). Phones only; the page gets room at the bottom so the
   bar never covers the footer, and the little boxes that sit at the
   bottom (messages, the log-out warning, Rave Mode's Stop, Back to top)
   move up above it. */
.os-mobile-bar {
    display: none;
}

@media (max-width: 700px) {
    html.has-mobile-bar {
        --mobile-bar-h: 60px;
    }

    html.has-mobile-bar body {
        padding-bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom, 0px));
    }

    .os-mobile-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1100;
        display: flex;
        height: calc(var(--mobile-bar-h, 60px) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-sizing: border-box;
        background: var(--gradient-main);
        border-top: 0.125rem solid var(--highlight-colour);
        box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.45);
        font-family: var(--font-body);
    }

    .os-mobile-bar a,
    .os-mobile-bar button {
        position: relative;
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        min-width: 0;
        padding: 0.3rem 0.2rem;
        background: none;
        border: 0;
        color: #fff;
        font-size: 0.78rem;
        text-decoration: none;
        cursor: pointer;
    }

    .os-mobile-bar .fa {
        font-size: 1.3rem;
    }

    .os-mobile-bar a[aria-current="page"],
    .os-mobile-bar [aria-expanded="true"] {
        color: var(--highlight-colour);
    }

    .os-mobile-bar a:focus-visible,
    .os-mobile-bar button:focus-visible {
        outline: 2px solid var(--highlight-colour);
        outline-offset: -4px;
    }

    .os-mobile-bar .bar-badge {
        position: absolute;
        top: 4px;
        left: calc(50% + 6px);
        min-width: 1.1rem;
        height: 1.1rem;
        margin: 0;
        padding: 0 0.25rem;
        box-sizing: border-box;
        border-radius: 999px;
        background: #e04848;
        color: #fff;
        font-size: 0.7rem;
        line-height: 1.1rem;
        text-align: center;
    }

    html.has-mobile-bar .os-toasts,
    html.has-mobile-bar .sc-toast,
    html.has-mobile-bar .retrofitter-page .toast,
    html.has-mobile-bar .os-session-warn,
    html.has-mobile-bar .os-rave-stop,
    html.has-mobile-bar .legal-top {
        bottom: calc(var(--mobile-bar-h) + 0.75rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* The bell's list sits above the bar too. */
    html.has-mobile-bar .nav-bell-panel {
        max-height: calc(100dvh - var(--nav-height) - var(--mobile-bar-h) - 1rem);
    }
}

/* The section names are links (13 Oct 2026). */
a.dropdown-toggle {
    text-decoration: none;
}

@media (min-width: 1081px) {
    a.dropdown-toggle {
        display: inline-flex;
        align-items: center;
    }
}

.dropdown.is-dismissed .dropdown-menu {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Arriving at About Us or Data Hub on Home: the heading is not hidden
   under the nav. */
#hpanel-about,
#hpanel-datahub {
    scroll-margin-top: calc(var(--nav-height) + 1rem);
}

/* Clear in the notification bell (13 Oct 2026) */
.nav-bell-clear {
    margin-left: auto;
    min-height: 32px;
    padding: 0 0.4rem;
    background: none;
    border: 0;
    color: var(--highlight-colour);
    font-family: var(--font-body);
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
}

.nav-bell-clear:hover,
.nav-bell-clear:focus-visible {
    color: #fff;
}

/* Dropdowns that don't vanish under a slow mouse (16 Oct 2026, Matt: with
   a low-DPI or slow mouse the menu closed while crossing the gap between
   the section name and its list). Looks the same; two things changed:
   1. An invisible bridge (::before on the list) fills the 1rem gap above
      it, so the pointer is "inside" the dropdown the whole way down.
   2. A short grace period: a list waits 0.25s before closing, so a pointer
      that slips off the edge can come back. Moving to another section on
      the bar closes the old list at once (the pointer is still on the bar),
      so two lists never sit on top of each other. */
@media (min-width: 1081px) {
    .dropdown-menu::before {
        content: "";
        position: absolute;
        left: -0.75rem;
        right: -0.75rem;
        bottom: 100%;
        height: calc(1rem + 2px);
    }

    /* Closing: wait 0.25s, then fade. */
    .dropdown-menu {
        transition:
            opacity 0.16s ease 0.25s,
            transform 0.16s ease 0.25s,
            visibility 0s linear 0.41s;
    }

    /* Opening: straight away. */
    .dropdown:hover .dropdown-menu,
    .dropdown:focus-within:not(.is-dismissed) .dropdown-menu,
    .dropdown.is-open .dropdown-menu {
        transition:
            opacity 0.16s ease,
            transform 0.16s ease,
            visibility 0s linear;
    }

    /* Escape (js/os-nav.js adds .is-dismissed): closed at once, no grace. */
    .dropdown.is-dismissed .dropdown-menu {
        transition: none;
    }

    /* Another section on the bar is under the pointer: this one closes now. */
    .nav-links:hover .dropdown:not(:hover):not(:focus-within):not(.is-open) .dropdown-menu {
        transition:
            opacity 0.1s ease,
            transform 0.1s ease,
            visibility 0s linear 0.1s;
    }
}

@media (min-width: 1081px) and (prefers-reduced-motion: reduce) {
    .dropdown-menu {
        transition: opacity 0s linear 0.25s, visibility 0s linear 0.25s;
    }

    .dropdown:hover .dropdown-menu,
    .dropdown:focus-within:not(.is-dismissed) .dropdown-menu,
    .dropdown.is-open .dropdown-menu,
    .nav-links:hover .dropdown:not(:hover):not(:focus-within):not(.is-open) .dropdown-menu {
        transition: none;
    }
}