@font-face {
    font-family: 'Obsidian';
    src: url('Obsidian.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    /* --border-radius: 20px;
    --main-colour1: rgb(0, 90, 130);
    --main-colour2: rgb(0, 95, 173);
    --border-colour: rgb(0, 120, 170);
    --title-colour-fade: rgba(0, 91, 130, 0);
    --acknowledgement-card-colour: rgb(0, 90, 130, 0.9);
    --sun-image: url("images/webp/blueSunTransparent.webp");
    --sun-glow-colour1: rgb(0, 95, 173); */

    --main-colour1: #0A4F8A;
    --main-colour2: #0E65AF;
    --border-colour: #145D86;
    --highlight-colour: #3DBBFF;
    --glow-colour: #5CD4FF;

    --background-dark: #07121C;
    --background-mid: #0A1A2D;

    --gradient-main: linear-gradient(135deg, #000000, #052c4d);
    --gradient-accent: linear-gradient(135deg, #0A4F8A, #0E65AF, #3DBBFF);
    --gradient-accent-transparent: linear-gradient(135deg, rgba(10, 78, 138, 0.5), rgb(14, 101, 175, 0.5), rgb(61, 187, 255, 0.5));
    --gradient-dark: linear-gradient(135deg, #000000, #222222);
    --gradient-light: linear-gradient(135deg, #1d1d1d, #383838);

    --radius1: 0.5rem;
    --radius2: 1rem;

    /* ---- Design system tokens (21 Sep 2026 consistency pass) ----
       One source for the things every page should agree on. Page stylesheets
       should use these rather than re-declaring their own versions. */
    --font-display: 'Obsidian', Arial, sans-serif;
    /* Each device's own UI font (Segoe UI / San Francisco / Roboto): zero
       download, noticeably crisper and more current than Arial. */
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Secondary text - labels, helper copy, empty states. Taken from the
       Supply Chain pages (their --sc-muted). Was never defined site-wide,
       so anything using var(--muted) outside Trade/Retrofitter silently
       fell back to plain white. */
    --muted: #9ec8e8;
    /* Hairline dividers and quiet borders. */
    --line: rgba(61, 187, 255, 0.18);

    /* Control sizing - shared by every button and form field. Sizes only:
       a custom property that aliases a themed COLOUR is resolved here on
       :root, so it would stay blue even under .theme-alt. Colours are always
       referenced directly (var(--gradient-main) etc.) in the rules. */
    --control-h: 40px;
    --label-size: 0.82rem;
}

/* High contrast theme (16 Oct 2026, from the big ideas list: "easier
   reading for some people"; for visitors too). Pure black behind white
   text, bright yellow for links, headings, borders and anything you can
   press, a deep blue (not a pale one) behind filled buttons so their white
   words stay sharp, no fades or glows. Picked from the Theme menu in the
   nav (js/os-theme.js), or by itself when the computer asks for more
   contrast and nothing was picked. */
.theme-contrast {
    --main-colour1: #0033A0;
    --main-colour2: #0033A0;
    --border-colour: #FFFFFF;
    --highlight-colour: #FFE000;
    --glow-colour: #FFE000;

    --background-dark: #000000;
    --background-mid: #000000;

    --gradient-main: linear-gradient(135deg, #000000, #000000);
    --gradient-accent: linear-gradient(135deg, #0033A0, #0033A0);
    --gradient-accent-transparent: linear-gradient(135deg, #0033A0, #0033A0);
    --gradient-dark: linear-gradient(135deg, #000000, #000000);
    --gradient-light: linear-gradient(135deg, #000000, #000000);

    --muted: #FFFFFF;
    --line: rgba(255, 255, 255, 0.75);

    /* page sets (Supply Chain, Loadout Builder...) */
    --sc-card: #000000;
    --sc-card-2: #000000;
    --sc-muted: #FFFFFF;
    --sc-line: rgba(255, 255, 255, 0.75);
    --background-card: #000000;
    --text: #FFFFFF;
}

body.theme-contrast {
    background: #000000;
    color: #FFFFFF;
}

.theme-contrast,
.theme-contrast * {
    text-shadow: none !important;
}

/* Where you are on the keyboard: always a thick yellow ring. */
.theme-contrast :focus-visible {
    outline: 3px solid #FFE000 !important;
    outline-offset: 2px !important;
}

/* Links in the page's words are underlined, so they don't rely on colour. */
.theme-contrast main p a:not([class*="btn"]),
.theme-contrast main li a:not([class*="btn"]),
.theme-contrast main td a:not([class*="btn"]),
.theme-contrast footer a {
    text-decoration: underline;
}

.theme-alt {
    /* --border-radius: 20px;
    --main-colour1: rgb(130, 0, 0);
    --main-colour2: rgb(173, 0, 0);
    --border-colour: rgb(234, 0, 0);
    --title-colour-fade: rgba(130, 0, 0, 0);
    --acknowledgement-card-colour: rgba(130, 0, 0, 0.9);
    --sun-image: url("images/webp/redSunTransparent.webp");
    --sun-glow-colour1: rgb(173, 61, 0); */

    --main-colour1: #7A0B12;
    --main-colour2: #B0151F;
    --border-colour: #8E1A20;
    --highlight-colour: #FF4B4B;
    --glow-colour: #FF6F6F;

    --background-dark: #1A090A;
    --background-mid: #220A0C;

    --gradient-main: linear-gradient(135deg, #000000, #4d0505);
    --gradient-accent: linear-gradient(135deg, #7A0B12, #B0151F, #FF4B4B);

    --muted: #e8a0a4;
    --line: rgba(255, 75, 75, 0.2);
}

/* min-height, not height (1 Oct). With body pinned to exactly one window's
   height, the sticky site nav (css/nav.css) could only stick inside that
   first screen, so on a long page it scrolled away once you were about a
   window's height down. The body still fills the window on a short page,
   so the footer stays at the bottom. */
html {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    background: var(--background-dark);
    color: white;
}






/* Make the page a vertical flex layout */

/* MAIN CONTENT SHOULD GROW */
.site-content {
    flex: 1;
    /* pushes footer down */
    width: 100%;
    /* padding: 20px; */
}

/* FOOTER AT BOTTOM IF EMPTY CONTENT */
.site-footer {
}







h1,
h2,
h3 {
    text-align: center;
    font-family: var(--font-display);
}

h1 {
    transition: font-size 0.5s ease;
}

/* SEO, 22 Sep 2026: each page has exactly ONE <h1> (its main title). Other
   headings that were h1 only for their size are now <h2 class="os-h1">,
   which looks exactly like an h1 (the browser default h1 size and margin,
   plus the same page rules - see the "h2.os-h1" selectors). */
:where(h2.os-h1) {
    /* :where() = no extra weight, so page rules that set a heading's size or
       margin (e.g. .home-heading) still win, exactly as they did on the h1. */
    font-size: 2em;
    margin-block: 0.67em;
    transition: font-size 0.5s ease;
}

p, li, ul {
    font-size: 1.15rem;
}

@media (max-width: 768px) {
}










.fade-in {
    opacity: 0;
    animation: fadeIn 1.5s ease forwards;
}

.fade-in.delay-1 {
    animation-delay: 1s;
}

.fade-in.delay-2 {
    animation-delay: 2s;
}

.fade-in.delay-3 {
    animation-delay: 3s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}







/* =======================================
   Custom Scrollbars - Matches Your Theme
   ======================================= */

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    /* for horizontal scrolling areas */
}

::-webkit-scrollbar-track {
    background: var(--background-mid);
    border-radius: var(--radius1);
}

::-webkit-scrollbar-thumb {
    background: none;
    border: 0.125rem solid var(--highlight-colour);
    border-radius: var(--radius1);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--main-colour1);
    cursor: pointer;
}


















/* Set the different background images - specified in each container class  */
.bg-container {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 0.125rem solid var(--highlight-colour);
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    /* Was a fixed 900px - a whole screen before any content. ~62% of the
       viewport keeps the art and the drama and lets the page start above
       the fold. */
    height: clamp(420px, 62vh, 680px);
}

.bg-container.bg-home {
    height: 900px;
}

/* Text over the background images */
.bg-container-text {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.bg-container-text h1 {
    font-size: 10rem;
    /* h1's default margin is 0.67em - at 10rem that is ~6.7rem of dead space
       pushing the subtitle a long way below the title. */
    margin: 0;
    line-height: 1;
}

.bg-container-text p {
    margin: 1.1rem 0 0;
    font-size: 1.5rem;
    text-align: center;
    color: var(--highlight-colour);
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

/* Site-wide page-hero convention (2026-09-18, at the site owner's request,
   generalising the Mining Board / Retrofitter title treatment): any page
   whose own <h1> sits directly under <main class="site-content"> (i.e. it
   really is that page's own top hero title, not a card/section heading
   buried further down the page - those are never a direct main > h1
   pairing) and is immediately followed by a <p> subtitle gets that
   subtitle coloured with the current theme's --highlight-colour, in
   uppercase with letter-spacing to match. The <h1> itself is left alone -
   it already uses the 'Obsidian' heading font site-wide (see h1,h2,h3
   above) and that's staying. The subtitle stays in the body font
   (Arial/Helvetica - h1,h2,h3 is the only rule that sets the Obsidian
   font, and it doesn't apply to <p>), which is the other half of the
   request: the subtitle should read in the ordinary body font, just
   coloured, not in the heading font. */
/* 21 Sep 2026 consistency pass: the title half of the convention too.
   Every compact page header now matches the Supply Chain one the site owner
   picked - uppercase, letter-spaced display font, blue letter-spaced
   subtitle. Pages whose title is NOT a direct main > h1 (Trade, Retrofitter,
   Ledger, Routes) use the .os-page-title / .os-page-sub classes instead, so
   there is still exactly one definition. */
main.site-content > h1,
.os-page-title {
    margin: 1.6rem 1rem 0.2em;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: normal;
    letter-spacing: 0.14em;
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
    /* Explicit, so a page that sets its own near-white body colour (the
       Retrofitter's #f4f8fc) does not make its title read grey. */
    color: #fff;
}

main.site-content > h1 + p,
.os-page-sub {
    margin: 0 1rem 1.5rem;
    font-size: clamp(0.85rem, 1.6vw, 1.05rem);
    color: var(--highlight-colour);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.scroll-cue {
  font-size: 10rem;
  opacity: 0.75;
  animation: scrollHint 2s ease-in-out infinite;
}

@keyframes scrollHint {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(8px); }
  100% { transform: translateY(0); }
}

@media (max-width: 1080px) {
    .bg-container-text h1 {
        font-size: 7.5rem;
    }

    .scroll-cue {
        font-size: 7.5rem;
    }
}

@media (max-width: 768px) {
    .bg-container-text h1 {
        font-size: 5rem;
    }

    .scroll-cue {
        font-size: 5rem;
    }

    .bg-container {
        height: clamp(300px, 50vh, 440px);
    }

    .bg-container.bg-home {
        height: 500px;
    }
}

.bg-joinUs {
    background-image: url('../images/webp/49.webp');
}

.bg-about {
    background-image: url('../images/webp/49.webp');
}

.bg-gallery {
    background-image: url('../images/webp/10.webp');
}

.bg-officers1 {
    background-image: url('../images/webp/66.webp');
}

.bg-fleet1 {
    background-image: url('../images/webp/140.webp');
}

.bg-acknowledgements {
    background-image: url('../images/webp/202.webp');
}

.bg-guides {
    background-image: url('../images/webp/193.webp');
}

.bg-timeline {
    background-image: url('../images/webp/233.webp');
}

.bg-members-login {
    background-image: url('../images/webp/199.webp');
}
/* ==========================================================================
   Tab filters (.os-tabs / .os-tab)  - added 21 Sep 2026
   Shared by the Trade page and the Members Dashboard so the two look and
   behave identically. Lives in root.css because those pages load different
   stylesheets otherwise (commodities.css vs members_dashboard_layout_default.css)
   and a duplicated component is how the two drift apart later.
   All colour comes from tokens, so the alt theme follows automatically.
   ========================================================================== */

.os-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .75rem;
    /* width:100% matters: inside a centred flex column (the homepage's
       .home-linkgroup) the row would otherwise shrink to fit its content, so
       each tab collapsed to min-width and "ABOUT US" broke onto two lines. */
    width: 100%;
    box-sizing: border-box;
    max-width: 46rem;
    margin: 1.3rem auto .6rem;
    padding: 0 1rem;
}

/* flex-basis 0 + min-width shares the row evenly and wraps cleanly on a
   phone rather than overflowing - the 375px overflow already on the parked
   list is this exact failure, so it is designed for rather than fixed later. */
.os-tab {
    flex: 1 1 0;
    min-width: 8rem;
    max-width: 15rem;
    background: transparent;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius1);
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-size: clamp(.9rem, 2.2vw, 1.1rem);
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .85rem 1rem;
    /* A label never breaks mid-word; the whole row wraps instead. */
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.os-tab:hover {
    color: #fff;
    border-color: var(--highlight-colour);
}

/* The brighter state marks the active filter. */
.os-tab.is-active {
    background: var(--gradient-accent);
    border-color: var(--highlight-colour);
    color: #fff;
    box-shadow: 0 0 18px color-mix(in srgb, var(--glow-colour) 45%, transparent);
}

.os-tab:focus-visible {
    outline: 2px solid var(--glow-colour);
    outline-offset: 2px;
}

/* !important is deliberate and scoped: the dashboard's own stylesheet loads
   after this one and gives .dashboard-quicklinks a grid display, which would
   otherwise beat a plain [hidden] rule and leave every panel on screen. */
.os-tabpanel[hidden] {
    display: none !important;
}


/* ==========================================================================
   Components - 21 Sep 2026 consistency pass
   The canonical versions, taken from the Supply Chain pages the site owner
   picked. New markup should use these classes; older pages' own rules have
   been brought into line with the same values.
   ========================================================================== */

/* Button: dark gradient, bright border, display font ("Log product to
   warehouse", the dashboard card buttons). */
.os-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: var(--control-h);
    padding: 0.45rem 1rem;
    background: var(--gradient-main);
    color: #fff;
    border: 0.125rem solid var(--highlight-colour);
    border-radius: var(--radius1);
    font-family: var(--font-display);
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.os-btn:hover:not([disabled]) {
    transform: scale(1.03);
    box-shadow: 0 0 10px var(--glow-colour);
}

.os-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

.os-btn--danger {
    border-color: #ff6b6b;
}

/* Form label: small, bold, muted blue, sentence case ("Product", "Quantity"). */
.os-label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: var(--label-size);
    font-weight: bold;
    color: var(--muted);
}

/* Stat tile: small uppercase label above a large number ("MATERIAL LOTS 0"). */
.os-stat {
    padding: 0.9rem 1rem;
    background: var(--background-dark);
    border: 1px solid var(--border-colour);
    border-radius: var(--radius1);
    text-align: center;
}

/* ============================================================
   LAYERING - what sits in front of what (2026-09-24)
   Anything position:fixed on this site belongs somewhere on this
   scale. It was not written down anywhere before, so a new overlay
   picked a number out of the air and either landed under the nav or
   tied with an existing one - and an equal z-index is settled by
   document order, which depends on which popup the member happened
   to open first. That is a bug which only shows up for some people
   some of the time, which is the worst kind.

      990   Battle Stations' "Placing <name>" bar (battlestations.css):
            over the page, under the nav and the phones' bottom bar
      999   nav drop-down (nav.css)
     1000   the site nav bar (nav.css)
     1100   full-page detail panels and their backdrops: the Supply
            Chain blueprint panel, the Ship Codex panel (1101 is the
            panel itself, sitting on its own backdrop)
     1200   popups: .sc-notify-overlay (every Supply Chain modal),
            .mining-lightbox, the Retrofitter's modal (1201 is its
            modal above its own backdrop), Recommended Gear's chart
            zoom (.gear-zoom)
     1250   .os-offer-overlay - the aUEC offer popup, the one popup
            that opens ON TOP of another popup
     1300   in-page toasts that have to clear a popup (.sc-toast and
            the Retrofitter's loader box)
     1500   Pledge Rain, which takes over the whole screen
     2900   .os-upload.is-floating - an upload's progress bar from a popup
     3000   .os-toasts - the site's notifications, always in front

   Below 100 is for things inside a card (combo drop-downs and the
   like): they sit in their own stacking context and do not compete.
   ============================================================ */

/* ============================================================
   NOTIFICATIONS (2026-09-22) - js/os-toast.js
   The one notification style for the whole site: the small black box
   bottom-right that the Retrofitter's SCM / Nav switch introduced.
   Errors get a red border and stay up longer; click any to dismiss.
   ============================================================ */

.os-toasts {
    position: fixed;
    right: 1.2rem;
    bottom: 1.2rem;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    max-width: min(420px, calc(100vw - 2.4rem));
    pointer-events: none;
}

.os-toast {
    pointer-events: auto;
    box-sizing: border-box;
    max-width: 100%;
    padding: 0.7rem 0.9rem;
    background: #000;
    border: 1px solid var(--highlight-colour);
    border-radius: 8px;
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.os-toast.show {
    opacity: 1;
    transform: none;
}

.os-toast.is-error {
    border-color: #ff6b6b;
}

@media (prefers-reduced-motion: reduce) {
    .os-toast {
        transition: none;
        transform: none;
    }
}

/* Server flash messages become toasts - hide them in the page so they
   don't show for a frame first (only when the script has run). */
.os-js p.error:not([role]):not([data-no-toast]),
.os-js p.info:not([role]):not([data-no-toast]) {
    display: none;
}

/* Screen-reader / search-engine text that takes no space on screen (22 Sep
   2026, used by the data pages' first view - scripts/seo_prerender.php). */
.os-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ---------------- 2026-09-23: bug or suggestion ----------------
   Used on the Feedback page and on the admin dashboard, which do not share
   a stylesheet - hence here rather than in either of them. */
/* Which kind an item is, on its card in the Active / In Progress lists. */
.bug-kind {
    display: inline-block;
    margin-right: 0.45rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: middle;
}

.bug-kind.is-bug {
    color: #ff9b9b;
}

.bug-kind.is-suggestion {
    color: #8ad6a0;
}

/* BACK button (2026-10-01) - scripts/back_link.php. Top left of a sub-page,
   just under the logo, and scrolls away with the page like its heading. */
.os-back-bar {
    width: 100%;
    margin: 0;
    padding: 0.75rem 1rem 0;   /* the nav's own side padding: lines up under the logo */
    box-sizing: border-box;
    text-align: left;
}

.os-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem;
    border: 0.125rem solid var(--border-colour);
    border-radius: var(--radius1);
    background: rgba(0, 0, 0, 0.35);
    color: var(--highlight-colour);
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.os-back:hover,
.os-back:focus-visible {
    border-color: var(--highlight-colour);
    box-shadow: 0 0 8px var(--glow-colour);
    outline: none;
}

.os-back .fa {
    font-size: 0.7rem;
}

/* The page title straight after it sits a little closer. */
main.site-content > .os-back-bar + h1,
main.site-content > .os-back-bar + .os-page-title {
    margin-top: 0.5rem;
}

/* Pages whose <main> has its own padding (the Supply Chain look: Supply
   Chain, Meets, Task List) - pull the BACK bar back so it lines up under the
   logo like everywhere else. */
main.supply-chain-page > .os-back-bar {
    margin: -1rem 0 0 -1.5rem;
    width: calc(100% + 1.5rem);
}

/* Phone tidy-up (12 Oct 2026): the "Filters" button made by js/os-filters.js.
   On a phone the parts of a filter box marked .os-more fold away behind it;
   on a computer the button is hidden and everything shows. */
.os-more-btn {
    display: none;
}

@media (max-width: 700px) {
    .os-more-btn {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        width: 100%;
        min-height: 44px;
        box-sizing: border-box;
        grid-column: 1 / -1;
        flex: 1 1 100%;
        margin: 0.25rem 0;
        padding: 0.55rem 0.9rem;
        border: 1px solid var(--border-colour);
        border-radius: var(--radius1, 8px);
        background: rgba(0, 0, 0, 0.35);
        color: #fff;
        font: inherit;
        font-size: 1rem;
        text-align: left;
        cursor: pointer;
    }

    .os-more-btn:hover,
    .os-more-btn:focus-visible {
        border-color: var(--highlight-colour);
        outline: none;
    }

    .os-more-btn .fa-sliders {
        color: var(--highlight-colour);
    }

    .os-more-btn .os-more-chev {
        margin-left: auto;
        transition: transform 0.2s ease;
    }

    .os-more-btn[aria-expanded="true"] .os-more-chev {
        transform: rotate(180deg);
    }

    html:not(.os-filters-open) [data-os-filters] .os-more {
        display: none !important;
    }
}

/* "How this works" (12 Oct 2026): a short, folded help box near the top of
   the harder pages (Supply Chain, Mining Board, Loadout Builder). */
details.os-howto {
    max-width: 900px;
    margin: 0.5rem auto 1rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius1, 8px);
    background: rgba(0, 0, 0, 0.35);
    text-align: left;
}

details.os-howto > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 0.9rem;
    color: var(--highlight-colour);
    font-weight: bold;
    cursor: pointer;
    list-style: none;
}

details.os-howto > summary::-webkit-details-marker {
    display: none;
}

details.os-howto > summary .os-howto-chev {
    margin-left: auto;
    transition: transform 0.2s ease;
}

details.os-howto[open] > summary .os-howto-chev {
    transform: rotate(180deg);
}

details.os-howto > summary:focus-visible {
    outline: 2px solid var(--highlight-colour);
    outline-offset: 2px;
}

details.os-howto ol {
    margin: 0;
    padding: 0 1.2rem 0.9rem 2.3rem;
    color: #fff;
    font-size: 0.98rem;
    line-height: 1.5;
}

details.os-howto li {
    margin: 0.3rem 0;
    text-align: left;
}

details.os-howto b {
    color: var(--highlight-colour);
}

/* Editing "How this works" (12 Oct 2026, howto.edit): the Edit button inside
   the box and the popup made by js/os-howto.js. */
details.os-howto p.os-howto-tools {
    margin: 0;
    padding: 0 1.2rem 0.9rem;
    text-align: right;
}

.os-howto-edit {
    min-height: 36px;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius1, 8px);
    background: transparent;
    color: var(--highlight-colour);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.os-howto-edit:hover,
.os-howto-edit:focus-visible {
    border-color: var(--highlight-colour);
    outline: none;
}

.os-howto-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.7);
}

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

.os-howto-card {
    position: relative;
    width: min(640px, 100%);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    box-sizing: border-box;
    padding: 1.3rem 1.4rem;
    border: 1px solid var(--highlight-colour);
    border-radius: var(--radius2, 1rem);
    background: var(--gradient-light, #2a2a2a);
    color: #fff;
    text-align: left;
}

.os-howto-card h2 {
    margin: 0 2rem 0.6rem 0;
    font-size: 1.15rem;
    text-align: left;
    color: var(--highlight-colour);
}

.os-howto-card p {
    text-align: left;
}

.os-howto-card p.os-howto-note {
    margin: 0 0 0.8rem;
    font-size: 0.92rem;
    color: var(--muted, #b9d4ea);
}

.os-howto-card .os-howto-lbl {
    display: block;
    margin: 0.6rem 0 0.3rem;
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--muted, #b9d4ea);
}

.os-howto-card textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius1, 8px);
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.45;
    resize: vertical;
}

.os-howto-card textarea:focus {
    outline: none;
    border-color: var(--highlight-colour);
}

.os-howto-card ol.os-howto-preview {
    margin: 0;
    padding: 0.6rem 0.8rem 0.6rem 2rem;
    border: 1px dashed var(--border-colour);
    border-radius: var(--radius1, 8px);
    font-size: 0.95rem;
    line-height: 1.5;
}

.os-howto-card ol.os-howto-preview b {
    color: var(--highlight-colour);
}

.os-howto-card p.os-howto-err {
    margin: 0.7rem 0 0;
    color: #ff8f8f;
}

.os-howto-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.os-howto-btn {
    min-height: 40px;
    padding: 0.45rem 1rem;
    border: 1px solid var(--highlight-colour);
    border-radius: var(--radius1, 8px);
    background: transparent;
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.os-howto-btn.primary {
    background: var(--gradient-main);
}

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

.os-howto-x {
    position: absolute;
    top: 0.6rem;
    right: 0.7rem;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}

.os-howto-card ol.os-howto-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.5rem;
    counter-reset: howto-step;
}

.os-howto-card ol.os-howto-steps li {
    display: flex;
    gap: 0.4rem;
    align-items: flex-start;
    counter-increment: howto-step;
}

.os-howto-card ol.os-howto-steps li::before {
    content: counter(howto-step);
    flex: 0 0 1.6rem;
    padding-top: 0.6rem;
    color: var(--highlight-colour);
    font-weight: bold;
    text-align: center;
}

.os-howto-card ol.os-howto-steps textarea {
    overflow: hidden;
    resize: none;
}

.os-howto-card ol.os-howto-steps textarea {
    flex: 1 1 auto;
    min-width: 0;
}

.os-howto-row-tools {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.os-howto-row-tools button {
    width: 34px;
    height: 30px;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius1, 8px);
    background: transparent;
    color: var(--highlight-colour);
    cursor: pointer;
}

.os-howto-row-tools button:disabled {
    opacity: 0.35;
    cursor: default;
}

.os-howto-row-tools button[data-howto-act="remove"] {
    color: #ff8f8f;
}

.os-howto-card .os-howto-add {
    margin-top: 0.6rem;
}

/* Quick wins (12 Oct 2026): the same room above the footer on every page
   (it was 0 on About, Officers, Timeline, Join Us, Trade and Login, 12px on
   the Supply Chain). Pledge Rain (a full-screen game) and the splash page
   are left alone. */
body:not([data-page="pledge-rain"]):not(.home-page) > main.site-content {
    padding-bottom: 3rem;
}

/* Quick wins (12 Oct 2026): no text smaller than about 13px. */
.os-back {
    font-size: 0.85rem;
}

/* Quick wins (12 Oct 2026): a long subtitle (over about 60 letters) reads in
   normal case - a long line of spaced-out capitals is hard to read. Short
   ones keep the uppercase look. */
main.site-content > h1 + p.os-sub-long,
.os-page-sub.os-sub-long {
    text-transform: none;
    letter-spacing: 0.03em;
    font-size: clamp(0.95rem, 1.7vw, 1.1rem);
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
}

/* Look and layout (12 Oct 2026): one content width (1200px) on the list and
   reading pages that used the whole screen (Ship Codex, Org Fleet, public
   Blueprints, Errors and Crashes, Recommended Gear - 16 Oct, Matt). Tools
   that need room (Trade, Loadout Builder, the Supply Chain) keep their own
   wider layouts. */
main.ship-page > :not(.os-back-bar):not(.ship-backdrop),
main.bp-public-page > :not(.os-back-bar),
main.crash-page > :not(.os-back-bar),
main.gear-page > :not(.os-back-bar) {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Look and layout (12 Oct 2026): the art banner on the inner pages (About,
   Officers, Timeline, Gallery, Acknowledgements, Guides, Join Us) is about
   half as tall, so the content starts on the first screen of a laptop.
   Home keeps its full banner. */
.bg-container:not(.bg-home) {
    height: clamp(200px, 30vh, 300px);
}

.bg-container:not(.bg-home) .bg-container-text h1 {
    font-size: clamp(3rem, 7vw, 6rem);
}

.bg-container:not(.bg-home) .bg-container-text p {
    margin-top: 0.6rem;
    font-size: clamp(0.95rem, 1.6vw, 1.25rem);
}

@media (max-width: 768px) {
    .bg-container:not(.bg-home) {
        height: 170px;
    }

    .bg-container:not(.bg-home) .bg-container-text h1 {
        font-size: 3rem;
    }

    .bg-container:not(.bg-home) .bg-container-text p {
        padding: 0 1rem;
    }
}

/* Look and layout (12 Oct 2026): grey placeholder cards while a list loads,
   instead of the word "Loading...". Screen readers still hear "Loading". */
.os-skel {
    display: grid;
    gap: 0.75rem;
    width: 100%;
}

.os-skel-card {
    height: 72px;
    border-radius: var(--radius2, 1rem);
    border: 1px solid var(--border-colour);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.03) 100%);
    background-size: 200% 100%;
    animation: os-skel-shine 1.4s ease-in-out infinite;
}

.os-skel-card:nth-child(3) {
    opacity: 0.7;
}

.os-skel-card:nth-child(4) {
    opacity: 0.45;
}

@keyframes os-skel-shine {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .os-skel-card {
        animation: none;
    }
}

/* Look and layout (12 Oct 2026): one bright "main" button per page (Add lot,
   Post Request, + Add task, Submit, Create Competition...), the same accent
   fill as Log In; every other button keeps the darker or outlined look. */
button.is-primary,
a.is-primary,
.form-container-item button.is-primary,
.competition-form-grid button.is-primary,
.sc-btn.is-primary,
.os-btn.is-primary,
.supply-chain-page .sc-btn.is-primary,
.mining-form button.primary {
    background: var(--gradient-accent);
    border-color: var(--highlight-colour);
    color: #fff;
}

/* Show-password eye (js/os-password.js, 12 Oct 2026), inside the right end of
   any password box: Login, Create account, Account, Reset password. */
.os-pw {
  position: relative;
  display: flex;
}

.os-pw input {
  flex: 1;
  min-width: 0;
  padding-right: 3rem;
}

/* Centred without transform: the page's own "button:hover { scale }" rules
   would otherwise replace it and the eye jumped down on hover (Matt, 12 Oct). */
.form-container-item .os-pw-eye,
.os-pw-eye {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0.25rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: auto 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius1);
  box-shadow: none;
  color: var(--muted, #9bb4c6);
  font-size: 1.1rem;
  cursor: pointer;
}

/* No box on hover (Matt, 12 Oct): only the eye changes colour. Keyboard
   focus gets the same colour plus a soft glow on the icon, still no box. */
.os-panels .form-container-item .os-pw .os-pw-eye:hover,
.form-container-item .os-pw .os-pw-eye:hover,
.os-pw-eye:hover,
.os-pw-eye:focus,
.os-pw-eye:focus-visible {
  transform: none !important;
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
  color: var(--highlight-colour);
}

.os-pw-eye:focus-visible i {
  text-shadow: 0 0 8px var(--glow-colour, rgba(80, 180, 255, 0.8));
}

/* The Account page's panel buttons are bigger and filled; the eye stays a
   plain little icon there too. */
.os-panels .form-container-item .os-pw .os-pw-eye,
.form-container-item .os-pw .os-pw-eye {
  width: 2.5rem;
  height: 2.5rem;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 1.1rem;
}

.os-pw-eye[aria-pressed="true"] {
  color: var(--highlight-colour);
}

/* "You will be logged out soon" box (js/os-session.js, 12 Oct 2026). Sits
   at the bottom of the screen, above everything, without blocking the page. */
.os-session-warn {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 5000;
  width: min(26rem, calc(100% - 2rem));
  padding: 1rem 1.2rem;
  transform: translateX(-50%);
  background: var(--background-dark);
  background-image: var(--gradient-light);
  border: 0.125rem solid var(--highlight-colour);
  border-radius: var(--radius1);
  box-shadow: 0 0 18px var(--glow-colour), 0 8px 24px rgba(0, 0, 0, 0.6);
  color: #fff;
}

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

.os-session-warn p {
  margin: 0 0 0.6rem;
}

.os-session-warn .os-session-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--highlight-colour);
}

.os-session-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

/* Filters in use, as chips with a cross (12 Oct 2026, Data Hub round):
   Blueprints and Missions. */
.os-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.6rem 0;
}

.os-chips-lbl {
  margin-right: 0.2rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.os-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 32px;
  padding: 0.15rem 0.7rem;
  background: color-mix(in srgb, var(--highlight-colour) 15%, transparent);
  border: 1px solid var(--highlight-colour);
  border-radius: 999px;
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.os-chip span {
  font-size: 1.1rem;
  line-height: 1;
  color: var(--highlight-colour);
}

.os-chip:hover,
.os-chip:focus-visible {
  background: color-mix(in srgb, var(--highlight-colour) 35%, transparent);
}

.os-chip.os-chip-all {
  background: transparent;
  border-style: dashed;
  color: var(--muted);
}

/* New-password strength hint and "they match" (js/os-password.js, 12 Oct 2026). */
.os-pw-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.5rem;
  margin-top: 0.35rem;
  font-size: 0.88rem;
  font-weight: normal;
  text-align: left;
  color: var(--muted);
}

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

.os-pw-hint b {
  color: #fff;
}

.os-pw-bar {
  display: inline-flex;
  gap: 3px;
}

.os-pw-bar i {
  width: 22px;
  height: 6px;
  border-radius: 3px;
  background: var(--border-colour);
}

.os-pw-hint[data-level="0"] b { color: #ff8a8a; }
.os-pw-hint[data-level="1"] b { color: #ffb36b; }
.os-pw-hint[data-level="2"] b { color: #f0cc6a; }
.os-pw-hint[data-level="3"] b { color: #4ade80; }
.os-pw-hint[data-level="1"] .os-pw-bar i:nth-child(-n+1) { background: #ffb36b; }
.os-pw-hint[data-level="2"] .os-pw-bar i:nth-child(-n+2) { background: #f0cc6a; }
.os-pw-hint[data-level="3"] .os-pw-bar i { background: #4ade80; }

/* ==========================================================================
   Phones round (12 Oct 2026): bigger tap targets. On a phone every button
   and link that stands on its own is at least 44px tall (the comfortable
   size for a finger); links inside running text are left alone. Only the
   size changes, so !important is used to win over each page's own sizes.
   ========================================================================== */
@media (max-width: 700px) {
    .os-back,
    .site-footer .footer-groups a,
    .footer-item-text-refcode,
    .route-copy,
    .sc-btn.sm,
    .sc-filter-pill,
    .os-chip,
    .os-howto-edit,
    .competition-tab-btn,
    .message-format-toolbar button,
    .msg-toolbar-icons button,
    .dash-recent-clear,
    .admin-new-message-link,
    .admin-requests-container .current,
    .gal-nav,
    .guide-close-x,
    .my-stats-link,
    .admin-activity-page-size select {
        min-height: 44px !important;
        box-sizing: border-box;
    }

    .os-back,
    .site-footer .footer-groups a,
    .footer-item-text-refcode,
    .my-stats-link {
        display: inline-flex !important;
        align-items: center;
    }

    /* The site's usual 40px controls become 44px on a phone. */
    :root {
        --control-h: 44px;
    }

    button,
    select,
    input[type="text"],
    input[type="search"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="url"],
    input[type="file"],
    input:not([type]),
    .sc-btn,
    .os-btn,
    a.ack-link,
    .gal-btn {
        min-height: 44px !important;
    }

    /* Small round or square icon buttons stay that shape, just bigger. */
    .sc-qty-edit button {
        min-width: 44px;
    }

    .guides-icon-btn,
    .guide-close-x,
    .gal-nav {
        min-width: 44px !important;
        min-height: 44px !important;
        width: 44px !important;
        height: 44px !important;
    }

    /* A fold-open heading: taller by padding, so its arrow stays. */
    details > summary {
        min-height: 44px;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        box-sizing: border-box;
    }

    /* Legal pages: the contents list links get a full-height row each. */
    #legal-toc a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* The Back button is a little taller on a computer too (it was 28px). */
.os-back {
    min-height: 36px;
    box-sizing: border-box;
}

/* ==========================================================================
   Accessibility round (12 Oct 2026)
   ========================================================================== */
/* A clear outline on every button and link reached with the keyboard (Tab).
   Only for the keyboard (:focus-visible), so a mouse click shows nothing
   new. Text boxes keep their own glowing border. The show-password eye
   keeps its glow instead of a box (Matt, 12 Oct). */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):not(input):not(textarea):not(select):focus-visible {
    outline: 2px solid var(--highlight-colour) !important;
    outline-offset: 2px !important;
}

.os-pw-eye:focus-visible {
    outline: none !important;
}

/* "Reduce motion" (the phone's or computer's own setting): no lifting
   tiles, glowing pulses, slides or smooth scrolling; changes happen at
   once. Pledge Rain (a game) and Rave Mode (which has its own calm mode)
   are left to themselves. */
@media (prefers-reduced-motion: reduce) {
    html:not(.os-rave):not(:has(> body[data-page="pledge-rain"])) *,
    html:not(.os-rave):not(:has(> body[data-page="pledge-rain"])) *::before,
    html:not(.os-rave):not(:has(> body[data-page="pledge-rain"])) *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }

    /* No lifting or growing on hover. */
    html:not(.os-rave) .os-btn:hover,
    html:not(.os-rave) .sc-btn:hover,
    html:not(.os-rave) .dash-tile:hover,
    html:not(.os-rave) .dash-tile:focus-visible,
    html:not(.os-rave) .tile:hover,
    html:not(.os-rave) .form-container-item button:hover,
    html:not(.os-rave) .ack-link:hover,
    html:not(.os-rave) .gal-btn:hover,
    html:not(.os-rave) .toggle-theme-btn:hover,
    html:not(.os-rave) .nav-logo:hover,
    html:not(.os-rave) .nav-icon:hover img,
    html:not(.os-rave) .mining-form button:hover,
    html:not(.os-rave) .mining-actions button:hover {
        transform: none !important;
        scale: none !important;
    }

    html {
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   UPLOAD PROGRESS BAR (13 Oct 2026, Matt) - js/os-upload.js
   One bar for every upload on the site: a blue fill with the
   percentage and size under it, a gently moving full bar while the
   server saves, green when done, red when it failed.
   ============================================================ */
.os-upload {
    box-sizing: border-box;
    width: 100%;
    max-width: 420px;
    margin: 0.6rem auto 0;
    text-align: center;
}

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

.os-upload-track {
    position: relative;
    height: 0.7rem;
    overflow: hidden;
    border: 1px solid var(--border-colour);
    border-radius: 999px;
    background: var(--background-dark);
}

.os-upload-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--highlight-colour);
    background: linear-gradient(90deg, color-mix(in srgb, var(--highlight-colour) 55%, #000), var(--highlight-colour));
    box-shadow: 0 0 8px var(--glow-colour);
    transition: width 0.2s linear;
}

.os-upload.is-saving .os-upload-fill {
    background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.22) 0 8px, transparent 8px 16px), linear-gradient(90deg, color-mix(in srgb, var(--highlight-colour) 55%, #000), var(--highlight-colour));
    background-size: 32px 100%, 100% 100%;
    animation: os-upload-move 0.9s linear infinite;
}

.os-upload.is-done .os-upload-fill {
    background: #3fa96b;
    box-shadow: 0 0 8px rgba(63, 169, 107, 0.6);
}

.os-upload.is-error .os-upload-track {
    border-color: #ff6b6b;
}

.os-upload.is-error .os-upload-fill {
    background: #c94a4a;
    box-shadow: none;
}

p.os-upload-text {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--muted, #c9d3df);
    overflow-wrap: anywhere;
}

.os-upload.is-error p.os-upload-text {
    color: #ff9b9b;
}

/* Floating: for uploads with no form to sit in (Meets photos). Top middle,
   just under the nav, so it never covers the notifications (bottom right)
   or the phone bottom bar. In front of popups. */
.os-upload.is-floating {
    position: fixed;
    left: 50%;
    top: calc(var(--nav-height, 64px) + 0.75rem);
    z-index: 2900;
    width: min(420px, calc(100vw - 2rem));
    margin: 0;
    padding: 0.7rem 0.9rem;
    transform: translateX(-50%);
    background: #000;
    border: 1px solid var(--highlight-colour);
    border-radius: 8px;
}

@keyframes os-upload-move {
    from { background-position: 0 0, 0 0; }
    to { background-position: 32px 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .os-upload-fill {
        transition: none;
    }
    .os-upload.is-saving .os-upload-fill {
        animation: none;
    }
}

/* High contrast: hint text inside empty boxes stays readable. */
.theme-contrast ::placeholder {
    color: #c8c8c8;
    opacity: 1;
}

/* High contrast: a switched-off section is shown greyed, not faded away. */
.theme-contrast .pe-request.is-off {
    opacity: 0.8;
}