@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;
}

.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.

      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)
     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
     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);
}