/* nav.css - the CONSOLE RAIL (v7 Mission Control redesign, Oct 2026).
 *
 * Computer (over 1080px): a dark control-panel column down the left with
 * the four stripes down its edge - the wordmark, search and the bell, every
 * section with its pages under it (a section folds when you click its
 * name), then your account, the social links and the theme. "Fold" shrinks
 * it to icons (html.rail-min); hovering a section's icon then opens its
 * pages beside it.
 * Phone (1080px and under): a dark bar across the top with the stripes
 * under it (logo, search, bell, menu); the menu slides the rail in.
 *
 * Layering (scale at the top of root.css): rail 1000, flyouts and the
 * phone drawer 999-1002, scrim 998.
 * Plain words, no em dashes (site rule).
 */

@media (min-width: 1081px) {
    html.has-rail body {
        padding-left: var(--rail-w);
    }

    html.has-rail.rail-min body {
        padding-left: var(--rail-w-min);
    }

    html.has-rail body[data-page="pledge-rain"] {
        padding-left: 0;
    }
}

.site-nav {
    position: static;
    z-index: 1000;
}

/* ------------------------------------------------------------- the rail */
.os-rail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    box-sizing: border-box;
    width: var(--rail-w);
    display: flex;
    flex-direction: column;
    padding-right: 16px;
    background: var(--console);
    font-family: var(--font-body);
    color: var(--console-ink);
}

/* The four stripes down the rail's right edge: the site's signature. */
.os-rail::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 16px;
    background: var(--stripes-v);
    pointer-events: none;
}

.rail-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 1.2rem 0.7rem 1rem 1.1rem;
}

.rail-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    flex: 1;
    color: var(--console-ink);
    text-decoration: none;
}

.nav-logo {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
}

.rail-word {
    font-family: var(--font-display);
    font-size: 0.95rem;
    line-height: 1.12;
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--console-ink);
}

.rail-fold {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    background: none;
    border: 1.5px solid var(--console-2);
    border-radius: 0;
    color: var(--console-ink-2);
    font-size: 1rem;
    cursor: pointer;
}

.rail-fold:hover {
    color: var(--console-ink);
    border-color: var(--console-ink-2);
}

/* Search and the bell */
.rail-tools {
    display: flex;
    gap: 0.5rem;
    padding: 0 0.8rem 1rem 1rem;
}

.nav-tool {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    height: 38px;
    min-width: 38px;
    padding: 0 0.85rem;
    background: var(--console-2);
    border: 0;
    border-radius: 999px;
    color: var(--console-ink-2);
    font: inherit;
    font-size: 0.95rem;
    cursor: pointer;
}

.nav-tool:hover,
.nav-tool[aria-expanded="true"] {
    color: var(--console-ink);
    background: #1F232A;
}

.rail-search {
    flex: 1;
    justify-content: flex-start;
}

.rail-kbd {
    margin-left: auto;
    padding: 0.05em 0.45em;
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: var(--console-ink-2);
    background: transparent;
    border: 1px solid #262A32;
    border-bottom-width: 2px;
}

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

.nav-bell-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 999px;
    background: var(--accent);
    color: #07090C;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

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

/* The page list */
.rail-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.2rem 0.7rem 1rem;
    scrollbar-color: #262A32 transparent;
}

.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links li {
    font-size: 1rem;
}

.nav-item > a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 38px;
    padding: 0 0.75rem;
    border-radius: 999px;
    color: var(--console-ink);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.nav-item > a .fa-fw {
    width: 1.25em;
    font-size: 1rem;
    color: var(--console-ink-2);
    text-align: center;
}

.nav-item > a:hover {
    background: var(--console-2);
}

/* Section names read like the labels on a panel. */
.nav-item.dropdown {
    margin-top: 0.9rem;
}

.nav-item.dropdown > a.dropdown-toggle {
    min-height: 32px;
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--console-ink-2);
}

.nav-item.dropdown > a.dropdown-toggle:hover {
    color: var(--console-ink);
}

.nav-item.dropdown > a .fa-fw {
    font-size: 0.85rem;
}

.nav-item > a:hover .fa-fw,
.nav-item.is-current > a .fa-fw {
    color: var(--s1);
}

.rail-chev {
    margin-left: auto;
    color: var(--console-ink-2);
    font-size: 0.95rem;
    transition: transform 0.18s ease;
}

.dropdown.is-folded .rail-chev {
    transform: rotate(-90deg);
}

.dropdown-menu {
    list-style: none;
    margin: 0.15rem 0 0;
    padding: 0;
}

.dropdown.is-folded .dropdown-menu {
    display: none;
}

.rail-fly-title {
    display: none;
}

.dropdown-menu li a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 32px;
    padding: 0 0.75rem 0 2.6rem;
    border-radius: 999px;
    color: var(--console-ink);
    font-size: 0.97rem;
    font-weight: 500;
    text-decoration: none;
}

.dropdown-menu li a:hover {
    background: var(--console-2);
}

/* You are here: an orange pill. */
.dropdown-menu li a[aria-current="page"],
.rail-solo > a[aria-current="page"] {
    background: var(--accent);
    color: #07090C;
    font-weight: 700;
}

.rail-solo > a[aria-current="page"] .fa-fw {
    color: #07090C;
}

.rail-solo {
    margin-top: 0.15rem;
}

.rail-join {
    margin-top: 1rem !important;
}

.rail-join > a {
    border: 2px solid var(--s1);
    color: var(--s1);
}

.rail-join > a .fa-fw,
.rail-join > a:hover .fa-fw {
    color: var(--s1);
}

.rail-join > a:hover {
    background: var(--s1);
    color: #07090C;
}

.rail-join > a:hover .fa-fw {
    color: #07090C;
}

/* Counts in the menu */
.nav-count {
    margin-left: auto;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--s1);
    color: #07090C;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.35rem;
}

.nav-count-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 0 0 0.5rem;
    padding: 0;
    vertical-align: middle;
    border-radius: 0;
    background: var(--accent);
    font-size: 0;
}

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

/* The foot: you, the socials, the theme */
.rail-foot {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.8rem 0.8rem 1rem 1rem;
    border-top: 1px solid var(--console-2);
}

.rail-me {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.rail-me-link {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.3rem;
    border-radius: 999px;
    color: var(--console-ink);
    text-decoration: none;
}

.rail-me-link:hover {
    background: var(--console-2);
}

.rail-me-badge {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 0;
    background: var(--s1);
    color: #07090C;
    font-family: var(--font-display);
    font-size: 0.9rem;
}

.rail-me-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-weight: 600;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rail-me-name small {
    color: var(--console-ink-2);
    font-size: 0.78rem;
    font-weight: 500;
}

.rail-out {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 0;
    color: var(--console-ink-2);
    text-decoration: none;
}

.rail-out:hover {
    color: var(--accent);
    background: var(--console-2);
}

/* Feedback button (26 Oct 2026, Matt): logged-in members, at the bottom of the menu, with the
   divider moved below it so it sits above the account block. */
.rail-foot.has-fb {
    border-top: 0;
}

.rail-fb-wrap {
    margin: -0.8rem -0.8rem 0 -1rem;
    padding: 0.5rem 0.8rem 0.8rem 1rem;
    border-bottom: 1px solid var(--console-2);
}

.rail-fb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0 0.9rem;
    border: 2px solid var(--accent);
    border-radius: 0;
    color: var(--console-ink);
    font-weight: 700;
    text-decoration: none;
}

.rail-fb .fa-fw {
    color: var(--accent);
}

.rail-fb:hover,
.rail-fb[aria-current="page"] {
    background: var(--accent);
    color: #07090C;
}

.rail-fb:hover .fa-fw,
.rail-fb[aria-current="page"] .fa-fw {
    color: #07090C;
}

.rail-fb:focus-visible {
    outline: 2px solid var(--console-ink);
    outline-offset: 2px;
}

.rail-login {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 38px;
    padding: 0 0.8rem;
    border-radius: 999px;
    background: var(--console-2);
    color: var(--console-ink);
    font-weight: 600;
    text-decoration: none;
}

.rail-login:hover {
    background: #1F232A;
    color: var(--console-ink);
}

.rail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
}

.rail-social {
    display: flex;
    gap: 0.15rem;
}

.nav-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 0;
}

.nav-icon img {
    width: 19px;
    height: auto;
    filter: grayscale(1) sepia(0.4) brightness(1.5);
    opacity: 0.7;
    transition: opacity 0.15s ease, filter 0.15s ease;
}

.nav-icon:hover {
    background: var(--console-2);
}

.nav-icon:hover img {
    filter: none;
    opacity: 1;
}

/* Theme menu */
.theme-pick {
    position: relative;
}

.toggle-theme-btn {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    background: var(--console-2);
    border: 0;
    border-radius: 0;
    color: var(--console-ink-2);
    cursor: pointer;
}

.toggle-theme-btn:hover,
.toggle-theme-btn[aria-expanded="true"] {
    color: var(--console-ink);
    background: #1F232A;
}

.theme-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    z-index: 1002;
    min-width: 190px;
    padding: 0.4rem;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: 16px;
    box-shadow: 0 0 0 transparent, 0 18px 40px rgba(0, 0, 0, 0.35);
}

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

.theme-menu button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 38px;
    padding: 0 0.7rem;
    background: none;
    border: 0;
    border-radius: 999px;
    color: var(--ink);
    font: inherit;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
}

.theme-menu button:hover,
.theme-menu button:focus-visible {
    background: var(--sheet-2);
}

.theme-menu button[aria-pressed="true"]::after {
    content: "\f00c";
    font-family: FontAwesome;
    margin-left: auto;
    color: var(--accent);
}

.theme-swatch {
    width: 18px;
    height: 18px;
    border-radius: 0;
    border: 1px solid var(--rule);
}

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

.nav-burger,
.rail-scrim {
    display: none;
}

/* --------------------------------------------- folded to icons (computer) */
@media (min-width: 1081px) {
    html.rail-min .os-rail {
        width: var(--rail-w-min);
    }

    html.rail-min .rail-head {
        flex-direction: column;
        padding: 1rem 0 0.8rem;
        gap: 0.7rem;
    }

    html.rail-min .rail-brand {
        flex: none;
    }

    html.rail-min .rail-fold .fa {
        transform: rotate(180deg);
    }

    html.rail-min .rail-word,
    html.rail-min .rail-txt,
    html.rail-min .rail-kbd,
    html.rail-min .rail-chev,
    html.rail-min .rail-social,
    html.rail-min .rail-me-name {
        display: none;
    }

    html.rail-min .rail-tools {
        flex-direction: column;
        align-items: center;
        padding: 0 0 0.8rem;
    }

    html.rail-min .rail-search {
        flex: none;
        justify-content: center;
        padding: 0;
    }

    html.rail-min .rail-nav {
        overflow: visible;
        padding: 0.4rem 0;
    }

    html.rail-min .nav-item {
        position: relative;
    }

    html.rail-min .nav-item.dropdown {
        margin-top: 0.2rem;
    }

    html.rail-min .nav-item > a {
        justify-content: center;
        width: 46px;
        min-height: 42px;
        margin: 0 auto 0.15rem;
        padding: 0;
    }

    html.rail-min .nav-item > a .fa-fw {
        font-size: 1.15rem;
    }

    html.rail-min .dropdown .dropdown-menu,
    html.rail-min .dropdown.is-folded .dropdown-menu {
        display: block;
        position: absolute;
        left: calc(100% - 4px);
        top: -6px;
        z-index: 1001;
        min-width: 220px;
        margin: 0;
        padding: 0.45rem;
        background: var(--console);
        border: 2px solid #1F232A;
        border-radius: 16px;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
        opacity: 0;
        visibility: hidden;
        transform: translateX(-4px);
        transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.25s;
    }

    html.rail-min .dropdown .dropdown-menu::before {
        content: "";
        position: absolute;
        right: 100%;
        top: 0;
        bottom: 0;
        width: 18px;
    }

    html.rail-min .dropdown:hover .dropdown-menu,
    html.rail-min .dropdown:focus-within:not(.is-dismissed) .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition-delay: 0s;
    }

    html.rail-min .dropdown-menu li a {
        padding-left: 0.85rem;
    }

    html.rail-min .rail-fly-title {
        display: block;
        padding: 0.35rem 0.75rem 0.45rem;
        color: var(--console-ink-2);
        font-family: var(--font-display);
        font-size: 0.64rem;
        letter-spacing: 0.04em;
        text-transform: none;
    }

    html.rail-min .nav-count-dot {
        position: absolute;
        top: 8px;
        right: 8px;
        margin: 0;
    }

    html.rail-min .rail-foot {
        align-items: center;
        padding: 0.8rem 0 1rem;
    }

    html.rail-min .rail-me {
        flex-direction: column;
    }

    html.rail-min .rail-me-link {
        flex: none;
    }

    html.rail-min .rail-fb-wrap {
        margin: -0.8rem 0 0;
        padding: 0.5rem 0 0.8rem;
        align-self: stretch;
        display: flex;
        justify-content: center;
    }

    html.rail-min .rail-fb {
        width: 42px;
        padding: 0;
    }

    html.rail-min .rail-login {
        width: 42px;
        justify-content: center;
        padding: 0;
    }

    html.rail-min .rail-row {
        flex-direction: column;
    }

    html.rail-min .theme-menu {
        left: calc(100% + 10px);
        right: auto;
        bottom: 0;
    }
}

/* --------------------------------------------------------------- bell */
.nav-bell-panel {
    position: fixed;
    top: 1rem;
    left: calc(var(--rail-w) + 12px);
    z-index: 1002;
    width: min(410px, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 0.6rem 1rem 1rem;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--r-panel);
    box-shadow: 0 0 0 transparent, 0 24px 60px rgba(0, 0, 0, 0.35);
    color: var(--ink);
    text-align: left;
}

html.rail-min .nav-bell-panel {
    left: calc(var(--rail-w-min) + 12px);
}

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

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

.nav-bell-panel h2 {
    margin: 0.5rem 0;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    text-transform: none;
    text-align: left;
}

.nav-bell-panel h3 {
    margin: 1rem 0 0.35rem;
    color: var(--ink-2);
    font-family: var(--font-head);
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    text-transform: none;
    text-align: left;
}

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

.nav-bell-panel li a {
    display: flex;
    gap: 0.65rem;
    padding: 0.55rem 0.6rem;
    border-radius: var(--r-inset);
    color: var(--ink);
    font-size: 0.95rem;
    text-decoration: none;
}

.nav-bell-panel li a:hover,
.nav-bell-panel li a:focus-visible {
    background: var(--sheet-2);
}

.nav-bell-panel li .fa {
    margin-top: 0.2rem;
    color: var(--accent);
}

.nav-bell-panel li span {
    display: flex;
    flex-direction: column;
}

.nav-bell-panel li small {
    color: var(--ink-3);
    font-size: 0.8rem;
}

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

.nav-bell-empty {
    margin: 1rem 0.3rem;
    color: var(--ink-2);
}

.nav-bell-empty .fa {
    color: var(--good);
}

.nav-bell-read,
.nav-bell-clear {
    margin-left: auto;
    min-height: 30px;
    padding: 0 0.4rem;
    background: none;
    border: 0;
    color: var(--link);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.nav-bell-read:hover,
.nav-bell-clear:hover {
    color: var(--ink);
    text-decoration: underline;
}

.nav-bell-x {
    width: 32px;
    height: 32px;
    margin-left: 0.2rem;
    background: none;
    border: 0;
    color: var(--ink-2);
    font-size: 1.4rem;
    cursor: pointer;
}

.nav-bell-head h2 + .nav-bell-x {
    margin-left: auto;
}

.nav-bell-more {
    margin: 0.4rem 0.5rem 0;
    color: var(--ink-3);
    font-size: 0.85rem;
}

/* ---------------------------------------------------------- search box */
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: 12vh 1rem 1rem;
    background: rgba(5, 6, 8, 0.6);
}

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

.os-search-box {
    width: min(680px, 100%);
    max-height: 72vh;
    display: flex;
    flex-direction: column;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--r-panel);
    box-shadow: 0 0 0 transparent, 0 40px 100px rgba(0, 0, 0, 0.4);
    color: var(--ink);
    font-family: var(--font-body);
    text-align: left;
    overflow: hidden;
}

.os-search-box::before {
    content: "";
    display: block;
    height: 12px;
    flex: 0 0 auto;
    background: var(--stripes-h);
}

.os-search-field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.7rem 0.5rem 1.1rem;
    border-bottom: 1px solid var(--rule-soft);
}

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

.os-search-field input {
    flex: 1;
    min-width: 0;
    height: 52px;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    color: var(--ink);
    font-size: 1.2rem;
    outline: none !important;
}

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

.os-search-close {
    min-width: 44px;
    height: 32px;
    padding: 0 0.6rem;
    background: var(--sheet-2);
    border: 1px solid var(--rule);
    border-radius: 999px;
    color: var(--ink);
    font-size: 0.8rem;
    cursor: pointer;
}

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

.os-search-group h3 {
    margin: 0.8rem 0.6rem 0.25rem;
    color: var(--ink-2);
    font-family: var(--font-head);
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    text-transform: none;
    text-align: left;
}

.os-search-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.55rem 0.8rem;
    border-radius: var(--r-inset);
    color: var(--ink);
    text-decoration: none;
}

.os-search-item.is-active {
    background: var(--s1);
    color: #07090C;
}

.os-search-item.is-active .os-search-sub {
    color: #1F232A;
}

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

.os-search-title mark {
    background: none;
    color: inherit;
    text-decoration: underline 2px;
    text-underline-offset: 3px;
}

.os-search-sub {
    color: var(--ink-2);
    font-size: 0.85rem;
}

.os-search-empty {
    margin: 1rem 0.7rem;
    color: var(--ink-2);
}

.os-search-foot {
    margin: 0;
    padding: 0.55rem 1.1rem;
    border-top: 1px solid var(--rule-soft);
    color: var(--ink-3);
    font-size: 0.82rem;
}

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

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

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

/* ------------------------------------------------------------- phones */
@media (max-width: 1080px) {
    :root,
    body {
        --nav-height: 62px;
    }

    html.has-rail body {
        padding-top: var(--nav-height);
    }

    html.has-rail body[data-page="pledge-rain"] {
        padding-top: 0;
    }

    .os-rail {
        bottom: auto;
        right: 0;
        width: auto;
        height: var(--nav-height);
        flex-direction: row;
        align-items: center;
        padding: 0 0.5rem 8px 0.8rem;
    }

    .os-rail::after {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        height: 8px;
        background: var(--stripes-h);
    }

    .rail-head {
        padding: 0;
        flex: 1;
    }

    .nav-logo {
        width: 32px;
        height: 32px;
    }

    .rail-word {
        font-size: 0.8rem;
    }

    .rail-fold {
        display: none;
    }

    .rail-tools {
        padding: 0;
        gap: 0.35rem;
    }

    .rail-search .rail-txt,
    .rail-kbd {
        display: none;
    }

    .rail-search {
        flex: none;
        justify-content: center;
        padding: 0;
        width: 40px;
        height: 40px;
    }

    .nav-tool {
        height: 40px;
        min-width: 40px;
        padding: 0;
    }

    .nav-burger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        margin-left: 0.25rem;
        padding: 0;
        background: none;
        border: 0;
        cursor: pointer;
    }

    .nav-burger span {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--console-ink);
        border-radius: 2px;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .nav-inner.is-menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-inner.is-menu-open .nav-burger span:nth-child(2) { opacity: 0; }
    .nav-inner.is-menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .rail-nav,
    .rail-foot {
        position: fixed;
        left: 0;
        width: min(330px, 88vw);
        box-sizing: border-box;
        background: var(--console);
        border-right: 10px solid var(--accent);
        transform: translateX(-104%);
        transition: transform 0.22s ease, visibility 0s linear 0.22s;
        visibility: hidden;
        z-index: 999;
    }

    .rail-nav {
        top: var(--nav-height);
        bottom: 150px;
        padding: 0.6rem 0.8rem 1rem;
    }

    .rail-foot {
        bottom: 0;
        height: 150px;
        justify-content: flex-end;
    }

    /* Room for the Feedback button in the phone drawer. */
    .rail-foot.has-fb {
        height: 210px;
    }

    .os-rail:has(.rail-foot.has-fb) .rail-nav {
        bottom: 210px;
    }

    .nav-inner.is-menu-open .rail-nav,
    .nav-inner.is-menu-open .rail-foot {
        transform: none;
        visibility: visible;
        transition: transform 0.22s ease;
    }

    .rail-scrim {
        position: fixed;
        inset: var(--nav-height) 0 0 0;
        z-index: 998;
        display: block;
        background: rgba(5, 6, 8, 0.55);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0s linear 0.2s;
    }

    html.rail-open .rail-scrim {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.2s ease;
    }

    html.rail-open {
        overflow: hidden;
    }

    .nav-item > a {
        min-height: 46px;
    }

    .dropdown-menu li a {
        min-height: 42px;
        font-size: 1.02rem;
    }

    .nav-bell-panel {
        top: calc(var(--nav-height) + 6px);
        left: auto !important;
        right: 0.5rem;
        max-height: calc(100dvh - var(--nav-height) - 1rem);
    }
}

@media (max-width: 400px) {
    .rail-word {
        display: none;
    }
}

/* ---------------------------------------------- phones: members' dock */
.os-mobile-bar {
    display: none;
}

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

    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: 1050;
        display: flex;
        height: calc(var(--mobile-bar-h, 64px) + env(safe-area-inset-bottom, 0px));
        padding: 6px 0 env(safe-area-inset-bottom, 0px);
        box-sizing: border-box;
        background: var(--console);
        border-top: 0;
        font-family: var(--font-body);
    }

    .os-mobile-bar::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 6px;
        background: var(--stripes-h);
    }

    .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.2rem;
        min-width: 0;
        padding: 0.3rem 0.2rem;
        background: none;
        border: 0;
        color: var(--console-ink-2);
        font-size: 0.74rem;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
    }

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

    /* Phones under 360px (27 Oct 2026, tracker #17): "Notifications" doesn't fit its quarter of the
       bar (88px of text in 80px), so it says "Alerts" there; the button is still read as Notifications. */
    .os-mobile-bar .bar-short {
        display: none;
    }

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

    .os-mobile-bar .bar-badge {
        position: absolute;
        top: 5px;
        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: var(--accent);
        color: #07090C;
        font-size: 0.68rem;
        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;
    }

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

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

    html.has-mobile-bar .os-rail:has(.rail-foot.has-fb) .rail-nav {
        bottom: calc(210px + var(--mobile-bar-h) + env(safe-area-inset-bottom, 0px));
    }

    html.has-mobile-bar .nav-bell-panel {
        max-height: calc(100dvh - var(--nav-height) - var(--mobile-bar-h) - 1rem);
    }
}

#hpanel-about,
#hpanel-datahub {
    scroll-margin-top: 1rem;   /* the menu bar's height is on <html> (scroll-padding-top) */
}

/* High contrast */
.theme-contrast .os-rail {
    border-right: 2px solid #fff;
}

.theme-contrast .os-rail::after,
.theme-contrast .os-search-box::before,
.theme-contrast .os-mobile-bar::before {
    background: #FFE000;
}

.theme-contrast .nav-icon img {
    filter: none;
    opacity: 1;
}

/* ==========================================================================
   v9 Obsidian (Oct 2026): the rail made quiet and minimal. Later in the
   file so these win over the v7 rules above.
   ========================================================================== */
.os-rail {
    padding-right: 0;
    background: var(--console);
    border-right: 1px solid var(--rule);
}

.os-rail::after {
    display: none;
}

.rail-word {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: none;
}

.nav-tool {
    background: var(--console-2);
    border: 1px solid var(--rule);
    border-radius: var(--r-inset);
}

.nav-tool:hover,
.nav-tool[aria-expanded="true"] {
    background: var(--sheet-2);
}

.rail-kbd {
    border: 1px solid var(--rule);
    background: transparent;
}

.nav-bell-count,
.nav-count,
.os-mobile-bar .bar-badge {
    background: var(--accent);
    color: var(--on-accent);
}

.nav-count-dot {
    background: var(--accent);
}

.nav-item > a {
    border-radius: var(--r-inset);
    font-weight: 500;
    font-size: 0.95rem;
}

.nav-item.dropdown {
    margin-top: 1rem;
}

.nav-item.dropdown > a.dropdown-toggle {
    min-height: 28px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--console-ink-2);
}

.nav-item > a:hover .fa-fw,
.nav-item.is-current > a .fa-fw {
    color: var(--accent);
}

.dropdown-menu li a {
    border-radius: var(--r-inset);
    color: var(--console-ink-2);
    font-size: 0.94rem;
}

.dropdown-menu li a:hover {
    color: var(--console-ink);
}

/* You are here: a lifted row with a short accent bar. */
.dropdown-menu li a[aria-current="page"],
.rail-solo > a[aria-current="page"] {
    background: var(--console-2);
    color: var(--console-ink);
    font-weight: 550;
    box-shadow: inset 2px 0 0 var(--accent);
}

.rail-solo > a[aria-current="page"] .fa-fw {
    color: var(--accent);
}

.rail-join > a,
.rail-join > a .fa-fw {
    border: 1px solid var(--rule);
    color: var(--console-ink);
}

.rail-join > a:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.rail-join > a:hover .fa-fw {
    color: var(--on-accent);
}

.rail-me-link,
.rail-out,
.rail-login,
.nav-icon,
.toggle-theme-btn {
    border-radius: var(--r-inset);
}

.rail-me-badge {
    border-radius: 0;
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--font-body);
    font-weight: 650;
}

.rail-login {
    background: transparent;
    border: 1px solid var(--rule);
}

.toggle-theme-btn {
    background: transparent;
    border: 1px solid var(--rule);
}

.nav-icon img {
    filter: grayscale(1) brightness(1.6);
    opacity: 0.55;
}

.theme-menu,
.nav-bell-panel,
.os-search-box {
    background: var(--sheet-2);
    border: 1px solid var(--rule);
    border-radius: var(--r-panel);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
}

.theme-menu button,
.os-search-item,
.nav-bell-panel li a {
    border-radius: var(--r-inset);
}

.theme-menu button:hover,
.theme-menu button:focus-visible,
.nav-bell-panel li a:hover {
    background: var(--sheet-3);
}

.theme-swatch {
    border: 1px solid var(--rule);
}

.nav-bell-panel h2 {
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    text-transform: none;
}

.nav-bell-panel h3,
.os-search-group h3 {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-3);
}

.os-search {
    background: rgba(5, 6, 8, 0.7);
    backdrop-filter: blur(6px);
}

.os-search-box::before {
    display: none;
}

.os-search-item.is-active {
    background: var(--sheet-3);
    color: var(--ink);
    box-shadow: inset 2px 0 0 var(--accent);
}

.os-search-item.is-active .os-search-sub {
    color: var(--ink-2);
}

.os-search-title mark {
    color: var(--accent);
    text-decoration: none;
}

.os-search-close {
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--ink-2);
}

@media (min-width: 1081px) {
    html.rail-min .dropdown .dropdown-menu,
    html.rail-min .dropdown.is-folded .dropdown-menu {
        background: var(--sheet-2);
        border: 1px solid var(--rule);
        border-radius: var(--r-panel);
    }

    html.rail-min .rail-fly-title {
        font-family: var(--font-body);
        font-size: 0.78rem;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
    }

    html.rail-min .dropdown-menu li a {
        padding-left: 0.75rem;
    }
}

@media (max-width: 1080px) {
    .os-rail {
        padding: 0 0.5rem 0 0.8rem;
        border-right: 0;
        border-bottom: 1px solid var(--rule);
        background: color-mix(in srgb, var(--console) 88%, transparent);
        backdrop-filter: blur(12px);
    }

    .rail-nav,
    .rail-foot {
        background: var(--console);
        border-right: 1px solid var(--rule);
    }
}

@media (max-width: 700px) {
    .os-mobile-bar {
        background: color-mix(in srgb, var(--console) 92%, transparent);
        backdrop-filter: blur(12px);
        border-top: 1px solid var(--rule);
        padding-top: 0;
    }

    .os-mobile-bar::before {
        display: none;
    }

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

/* ==========================================================================
   v12 Deep Space rail (Oct 2026): the side menu is back, dressed for space.
   Glass over the starfield, a glowing hairline down the right edge, the
   theme colour (Ion blue or Plasma red) for whatever is lit. On phones it
   is the top bar and slide-in drawer from the rules above.
   Note: no backdrop-filter on .os-rail itself. A filter there would trap
   the fixed phone drawer inside the bar, so the blur sits on ::before.
   ========================================================================== */
.os-rail {
    padding-right: 0;
    background: linear-gradient(180deg, rgba(6, 14, 30, 0.82), rgba(3, 8, 18, 0.9));
    border-right: 1px solid var(--rule-soft);
    box-shadow: 10px 0 40px -30px var(--glow-colour);
    font-family: var(--font-body);
}

body.theme-alt .os-rail {
    background: linear-gradient(180deg, rgba(24, 6, 12, 0.82), rgba(12, 3, 7, 0.9));
}

.os-rail::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
    pointer-events: none;
}

/* The glowing edge: brightest at the middle, fading to the ends. */
.os-rail::after {
    display: block;
    top: 0;
    bottom: 0;
    right: -1px;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--accent) 50%, transparent);
    box-shadow: 0 0 12px var(--glow-colour);
    opacity: 0.7;
}

.rail-head {
    position: relative;
    padding-bottom: 1.1rem;
}

.rail-head::after {
    content: "";
    position: absolute;
    left: 1.1rem;
    right: 1.1rem;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--rule), transparent);
}

.nav-logo {
    filter: drop-shadow(0 0 8px var(--glow-colour));
}

.rail-word {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
}

.rail-fold {
    border: 1px solid var(--rule-soft);
    border-radius: 0;
    color: var(--ink-3);
}

.rail-fold:hover {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 14px -4px var(--glow-colour);
}

.nav-tool {
    background: rgba(8, 18, 36, 0.6);
    border: 1px solid var(--rule-soft);
    border-radius: 0;
    color: var(--ink-2);
}

body.theme-alt .nav-tool {
    background: rgba(30, 8, 14, 0.6);
}

.nav-tool:hover,
.nav-tool[aria-expanded="true"] {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--ink);
}

.rail-search {
    font-family: var(--font-body);
}

.rail-kbd {
    border: 1px solid var(--rule-soft);
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--ink-3);
}

.nav-bell-count,
.nav-count,
.os-mobile-bar .bar-badge {
    border-radius: 0;
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--font-mono);
    box-shadow: 0 0 10px var(--glow-colour);
}

.nav-count-dot {
    border-radius: 0;
    transform: rotate(45deg) scale(0.8);
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
}

/* Links */
.nav-item > a {
    position: relative;
    border-radius: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ink-2);
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-item > a:hover {
    background: linear-gradient(90deg, var(--accent-soft), transparent);
    color: var(--ink);
}

.nav-item > a .fa-fw {
    color: var(--ink-3);
}

.nav-item > a:hover .fa-fw,
.nav-item.is-current > a .fa-fw {
    color: var(--accent);
    filter: drop-shadow(0 0 6px var(--glow-colour));
}

/* Group headings: a small HUD label. */
.nav-item.dropdown {
    margin-top: 0.9rem;
}

.nav-item.dropdown > a.dropdown-toggle {
    min-height: 30px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.nav-item.dropdown > a.dropdown-toggle:hover {
    background: transparent;
    color: var(--accent);
}

.nav-item.dropdown.is-current > a.dropdown-toggle {
    color: var(--ink-2);
}

.rail-chev {
    color: var(--ink-3);
}

.dropdown-menu {
    position: relative;
}

/* A faint guide line down the left of each open group. */
.dropdown-menu::before {
    content: "";
    position: absolute;
    top: 0.3rem;
    bottom: 0.3rem;
    left: 1.55rem;
    width: 1px;
    background: var(--rule-soft);
}

.dropdown-menu li a {
    border-radius: 0;
    color: var(--ink-2);
    font-size: 0.93rem;
}

.dropdown-menu li a:hover {
    background: linear-gradient(90deg, var(--accent-soft), transparent);
    color: var(--ink);
}

/* You are here: a lit row with a glowing bar. */
.dropdown-menu li a[aria-current="page"],
.rail-solo > a[aria-current="page"] {
    background: linear-gradient(90deg, var(--accent-soft), rgba(0, 0, 0, 0) 85%);
    color: var(--ink);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--accent), -6px 0 16px -8px var(--accent);
}

.rail-solo > a[aria-current="page"] .fa-fw {
    color: var(--accent);
}

/* Join us: a clipped-corner call to action. */
.rail-join > a {
    border: 1px solid var(--accent);
    border-radius: 0;
    color: var(--ink);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    box-shadow: inset 0 0 18px -8px var(--accent);
}

.rail-join > a .fa-fw {
    border: 0;
    color: var(--accent);
}

.rail-join > a:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.rail-join > a:hover .fa-fw {
    color: var(--on-accent);
    filter: none;
}

/* Bottom: who you are, socials, theme. */
@media (min-width: 1081px) {
    .rail-foot {
        position: relative;
        border-top: 0;
    }
}

.rail-foot::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1.1rem;
    right: 1.1rem;
    height: 1px;
    background: linear-gradient(90deg, var(--rule), transparent);
}

.rail-me-link,
.rail-out,
.rail-login,
.nav-icon,
.toggle-theme-btn {
    border-radius: 0;
}

.rail-me-link:hover,
.rail-out:hover {
    background: var(--accent-soft);
}

.rail-me-badge {
    border-radius: 0;
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--font-display);
    font-weight: 700;
    box-shadow: 0 0 14px -2px var(--glow-colour);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.rail-me-name {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.rail-me-name small {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.rail-login {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--ink);
    font-family: var(--font-display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rail-login:hover {
    background: var(--accent);
    color: var(--on-accent);
}

.toggle-theme-btn {
    background: transparent;
    border: 1px solid var(--rule-soft);
    color: var(--ink-2);
}

.toggle-theme-btn:hover,
.toggle-theme-btn[aria-expanded="true"] {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 14px -4px var(--glow-colour);
}

/* Social icons in their own colours (18 Oct 2026, Matt: "bring the colour
   back on these icons"); they brighten and glow a little on hover. */
.nav-icon img {
    filter: none;
    opacity: 0.85;
}

.nav-icon:hover img {
    filter: drop-shadow(0 0 6px var(--glow-colour));
    opacity: 1;
}

body.theme-contrast .nav-icon img {
    opacity: 1;
}

/* Pop-ups: glass panels. */
.theme-menu,
.nav-bell-panel,
.os-search-box {
    background: rgba(5, 12, 26, 0.95);
    border: 1px solid var(--rule);
    border-radius: 0;
    box-shadow: 0 0 50px -10px var(--glow-colour), 0 30px 80px -20px rgba(0, 0, 0, 0.8);
}

body.theme-alt .theme-menu,
body.theme-alt .nav-bell-panel,
body.theme-alt .os-search-box {
    background: rgba(18, 5, 9, 0.95);
}

.theme-menu button,
.os-search-item,
.nav-bell-panel li a {
    border-radius: 0;
}

.theme-menu button:hover,
.theme-menu button:focus-visible,
.nav-bell-panel li a:hover,
.os-search-item.is-active {
    background: var(--accent-soft);
    color: var(--ink);
    box-shadow: inset 2px 0 0 var(--accent);
}

.nav-bell-panel h2 {
    font-family: var(--font-head);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.nav-bell-panel h3,
.os-search-group h3 {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}

.os-search {
    background: rgba(2, 6, 14, 0.72);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.os-search-field {
    border-bottom: 1px solid var(--rule-soft);
}

.os-search-close {
    border: 1px solid var(--rule);
    border-radius: 0;
}

.theme-swatch {
    border: 1px solid var(--rule);
    border-radius: 0;
}

.theme-swatch.is-blue { background: linear-gradient(135deg, #050A14 50%, #4FC3FF 50%); }
.theme-swatch.is-red { background: linear-gradient(135deg, #0C0508 50%, #FF4D5E 50%); }

@media (min-width: 1081px) {
    html.rail-min .dropdown .dropdown-menu,
    html.rail-min .dropdown.is-folded .dropdown-menu {
        background: #050C1A;
        border: 1px solid var(--rule);
        border-radius: 0;
        box-shadow: 0 0 40px -12px var(--glow-colour);
    }

    html.rail-min body.theme-alt .dropdown .dropdown-menu {
        background-color: #12050A;
    }

    html.rail-min .dropdown-menu::before {
        display: none;
    }

    /* Hover intent (v12 refine, 18 Oct 2026). Going from an icon down to a
       link lower in its pop-out crosses the next icon, which used to swap
       in that section's pop-out on top and lose the one you were heading
       for. Now a pop-out waits a moment before it opens, lingers a moment
       after the pointer leaves, and the one under the pointer stays on top. */
    html.rail-min .dropdown .dropdown-menu,
    html.rail-min .dropdown.is-folded .dropdown-menu {
        transition: opacity 0.12s ease 0.18s, transform 0.12s ease 0.18s, visibility 0s linear 0.3s;
    }

    html.rail-min .dropdown:hover .dropdown-menu {
        z-index: 1003;
        transition: opacity 0.12s ease 0.12s, transform 0.12s ease 0.12s, visibility 0s linear 0.12s;
    }

    html.rail-min .dropdown:focus-within:not(.is-dismissed):not(:hover) .dropdown-menu {
        transition-delay: 0s;
    }

    html.rail-min .rail-fly-title {
        font-family: var(--font-mono);
        font-size: 0.7rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--accent);
    }
}

@media (max-width: 1080px) {
    .os-rail {
        padding: 0 0.5rem 0 0.8rem;
        border-right: 0;
        border-bottom: 1px solid var(--rule-soft);
        box-shadow: 0 10px 40px -30px var(--glow-colour);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .os-rail::after {
        top: auto;
        bottom: -1px;
        left: 0;
        right: 0;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent);
    }

    .rail-head::after {
        display: none;
    }

    .rail-word {
        font-size: 0.85rem;
    }

    .rail-nav,
    .rail-foot {
        /* solid (was 0.97): the page's glowing titles ghosted through the links */
        background: #040A16;
        border-right: 1px solid var(--accent);
        box-shadow: 0 0 40px -10px var(--glow-colour);
    }

    body.theme-alt .rail-nav,
    body.theme-alt .rail-foot {
        background: #100408;
    }

    .rail-scrim {
        background: rgba(2, 5, 12, 0.6);
    }
}

@media (max-width: 700px) {
    .os-mobile-bar {
        background: rgba(4, 10, 22, 0.88);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border-top: 1px solid var(--rule-soft);
        padding-top: 0;
    }

    body.theme-alt .os-mobile-bar {
        background: rgba(16, 4, 8, 0.88);
    }

    .os-mobile-bar::before {
        display: none;
    }

    .os-mobile-bar a,
    .os-mobile-bar button {
        font-family: var(--font-mono);
        font-size: 0.62rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .os-mobile-bar a[aria-current="page"],
    .os-mobile-bar [aria-expanded="true"] {
        color: var(--accent);
        text-shadow: 0 0 10px var(--glow-colour);
    }
}

/* High contrast: plain and solid. */
.theme-contrast .os-rail,
.theme-contrast .rail-nav,
.theme-contrast .rail-foot {
    background: #000;
    box-shadow: none;
}

.theme-contrast .os-rail::after {
    display: none;
}

.theme-contrast .rail-join > a,
.theme-contrast .rail-me-badge {
    clip-path: none;
}

/* >>> theme menu (written by dev-test/tools/split_themes.py) */
/* the swatches and the group headings in the Theme menu */
.theme-swatch.is-mf-greycat { background: linear-gradient(135deg, #100800 50%, #E8A848 50%); }
.theme-swatch.is-mf-crusader { background: linear-gradient(135deg, #080810 50%, #385890 50%); }
.theme-swatch.is-mf-argo { background: linear-gradient(135deg, #100808 50%, #E89070 50%); }
.theme-swatch.is-mf-anvil { background: linear-gradient(135deg, #080808 50%, #989078 50%); }
.theme-swatch.is-mf-drake { background: linear-gradient(135deg, #101008 50%, #D0B078 50%); }
.theme-swatch.is-mf-misc { background: linear-gradient(135deg, #080808 50%, #586878 50%); }
.theme-swatch.is-mf-aegis { background: linear-gradient(135deg, #060F14 50%, #58B8D8 50%); }
.theme-swatch.is-mf-rsi { background: linear-gradient(135deg, #080808 50%, #286090 50%); }
.theme-swatch.is-mf-origin { background: linear-gradient(135deg, #FAF7F0 50%, #B8923A 50%); box-shadow: inset 0 0 0 1px rgba(20, 33, 61, 0.35); }
.theme-swatch.is-mf-aopoa { background: linear-gradient(135deg, #001008 50%, #18A8C8 50%); }
.theme-swatch.is-mf-esperia { background: linear-gradient(135deg, #200000 50%, #C82010 50%); }
.theme-swatch.is-mf-kruger { background: linear-gradient(135deg, #080808 50%, #A8A858 50%); }
.theme-swatch.is-mf-mirai { background: linear-gradient(135deg, #090909 50%, #F878A8 50%); }
.theme-swatch.is-mf-gatac { background: linear-gradient(135deg, #101020 50%, #8850C8 50%); }
.theme-swatch.is-mf-outland { background: linear-gradient(135deg, #0A1212 50%, #D2A242 50%); }
.theme-swatch.is-mf-tumbril { background: linear-gradient(135deg, #100800 50%, #D07818 50%); }

.theme-menu .theme-group {
    margin: 0.5rem 0.75rem 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.theme-menu .theme-group:first-child { margin-top: 0.25rem; }
.theme-menu { max-height: min(70vh, 640px); overflow-y: auto; }
/* 21 Oct 2026: on a computer the menu opens beside the rail, with the ship
   makers in two columns, so all 19 themes show without scrolling. */
@media (min-width: 1025px) {
    .theme-menu {
        left: calc(100% + 12px);
        right: auto;
        bottom: 0;
        width: 440px;
        max-height: calc(100dvh - 2rem);
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 0.25rem;
        align-content: start;
    }
    .theme-menu[hidden] { display: none; }
    .theme-menu .theme-group { grid-column: 1 / -1; }
}

/* the "Beta" tag after "Ship makers" in the Theme menu (Matt, 21 Oct 2026) */
.theme-menu .theme-beta {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.05rem 0.4rem;
    border: 1px solid currentColor;
    color: var(--accent);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    vertical-align: 0.08em;
}
/* <<< theme menu */

/* "Loading the ... theme" (21 Oct 2026, Matt: "a quick 1 second loading
   bar ... loading theme, and then the next one comes in"). js/os-theme.js
   shows it only when a theme is picked from the brush menu: about 1.2
   seconds, the theme switches behind it, then it fades. Sits under the
   notifications (3000) so a "could not load" message still shows. */
.os-theme-load {
    position: fixed;
    inset: 0;
    z-index: 2950;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: color-mix(in srgb, var(--sheet-3, #050A14) 78%, transparent);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.18s ease;
}

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

.os-theme-load.is-on {
    opacity: 1;
}

.os-theme-load.is-out {
    opacity: 0;
    transition-duration: 0.3s;
}

.os-theme-load-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.75rem 0.9rem;
    width: min(360px, 100%);
    padding: 1.1rem 1.2rem 1.2rem;
    border: 1px solid var(--rule);
    border-top: 3px solid var(--accent);
    background: var(--sheet);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
    color: var(--ink);
}

.os-theme-load-sw {
    width: 26px;
    height: 26px;
}

.os-theme-load p.os-theme-load-t {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: left;
    color: var(--ink);
}

.os-theme-load-bar {
    grid-column: 1 / -1;
    height: 6px;
    background: var(--sheet-3);
    box-shadow: inset 0 0 0 1px var(--rule-soft);
    overflow: hidden;
}

.os-theme-load-bar span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--accent);
}

/* Fills to about nine tenths in the 1.2 seconds, the rest when the theme is in. */
.os-theme-load.is-on .os-theme-load-bar span {
    animation: os-theme-load-fill 1.15s cubic-bezier(0.25, 0.7, 0.3, 1) forwards;
}

.os-theme-load.is-done .os-theme-load-bar span {
    width: 100%;
    animation: none;
    transition: width 0.15s ease;
}

@keyframes os-theme-load-fill {
    from { width: 0; }
    to { width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
    .os-theme-load,
    .os-theme-load.is-out {
        transition: none;
    }

    .os-theme-load.is-on .os-theme-load-bar span {
        animation: none;
        width: 92%;
    }
}

/* 23 Oct 2026 (consistency check): on narrow screens the menu is a bar across
   the top, so every jump to a part of a page (Contents links, #links, a card
   brought into view) stops below it rather than under it. One rule for the
   whole site, instead of each page adding the bar's height itself. */
@media (max-width: 1080px) {
    html.has-rail {
        scroll-padding-top: var(--nav-height, 62px);
    }
}

/* Skip to content (26 Oct 2026): hidden until a keyboard user tabs onto it, then shown top left
   over everything. Theme colours, so it follows every theme (High contrast: yellow on black). */
.os-skip {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 10000;
    padding: 0.75rem 1.1rem;
    background: var(--accent);
    color: #07090C;
    font-family: var(--font-body);
    font-weight: 700;
    text-decoration: none;
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
}

.os-skip:focus,
.os-skip:focus-visible {
    clip-path: none;
    width: auto;
    height: auto;
    overflow: visible;
    outline: 3px solid var(--console-ink);
    outline-offset: 2px;
}

.os-skip-target {
    display: block;
    height: 0;
    outline: none;
}

@media (max-width: 359px) {
    .os-mobile-bar [data-bar-bell] > span:first-of-type {
        display: none;
    }
    .os-mobile-bar [data-bar-bell] > .bar-short {
        display: inline;
    }
}