/* The page shell: the top bar, the left rail, the tab strips, the phone bottom bar.
 *
 * ⚠️ THIS LIVED INSIDE MainLayout.razor's <style> BLOCK, and moving it out is not tidying.
 * The Razor Pages layout renders the same shell markup, and a <style> block inside a Blazor
 * component ships only with that component — so the ported pages came out completely unstyled: an
 * enormous logo, the rail as a line of plain text, no bottom bar. Found by loading /vendors on the
 * live site, 2026-09-18, not by any build.
 *
 * ONE COPY, BOTH WORLDS. App.razor (Blazor) and _Layout.cshtml (Razor Pages) both link this file
 * while the migration runs, so the two halves of the site cannot drift apart. It is also cacheable
 * now, which the inline block never was.
 *
 * ⚠️ HOUSE STYLE PIECE 0b (2026-10-02) REPLACED THE LEFT RAIL AND THE PHONE BOTTOM BAR WITH ONE NAV: the
 * doors are tabs in the header from 1024px up and ONE menu panel below it (menu.js). `.fo-rail` and
 * `.fo-bottom` no longer exist; the light list panel beside a map is still .fo-listrail in theme.css.
 * Colours here are tokens only (the old rgba() washes are --color-chrome-wash).
 */
    .fo-shell { min-height: 100vh; display: flex; flex-direction: column; }

    /* ── THE HEADER (rules 1, 10, 11) ────────────────────────────────────────────────────────────
       The chrome fill, with a 3px identity stripe along the very top. Its content spans the full window
       with the page's own gutter (24px, 16px below 640px) so the header, the sub-tab bar and the page
       body line up at both edges. Relative, so the menu panel can hang from it. */
    .fo-top { position: relative; background: var(--color-chrome); color: var(--color-chrome-foreground);
              border-top: 3px solid var(--color-identity); }
    .fo-top-in { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--gutter); min-height: 52px; }
    .fo-top .spacer { flex: 1; }
    .fo-brand { display: flex; align-items: center; gap: var(--s2); text-decoration: none; color: var(--color-chrome-foreground); }
    .fo-logo { height: 30px; width: auto; display: block; }
    .fo-word { font-weight: 600; letter-spacing: -.01em; color: var(--color-chrome-muted); font-size: var(--fs-small);
               border-left: 1px solid var(--color-chrome-wash); padding-left: var(--s3); }
    .fo-me { color: var(--color-chrome-foreground); font-weight: 600; font-size: var(--fs-small); text-decoration: none; }
    .fo-me:hover { color: var(--color-identity-bright); }
    .fo-who { display: inline-flex; align-items: center; gap: var(--s3); }
    .fo-out-form { display: inline; margin: 0; }
    /* ⚠️ `.fo-btn.fo-out`, NOT `.fo-out`. William, 2026-09-20: "the purple on black that is
       currently the signout button is not ok. i can't read it." He was right and the cause was a
       specificity loss, not a colour choice: `.fo-btn.ghost` sets the click colour with TWO class names
       and this rule overrode it with ONE, so that colour won no matter what order the files load in.
       On the chrome the only thing that reads is the chrome's own text colour. */
    .fo-btn.fo-out { color: var(--color-chrome-foreground); border-color: var(--color-chrome-wash); }
    .fo-btn.fo-out:hover { background: var(--color-chrome-wash); color: var(--color-chrome-foreground); }

    /* The doors as header tabs (1024px and up). The active one carries the identity marker — a 3px bar
       under it — and aria-current; this is what the identity is FOR: marking, never text. */
    .fo-doors { display: flex; align-items: stretch; align-self: stretch; gap: 2px; margin-left: var(--s4); }
    .fo-doors a { display: flex; align-items: center; padding: 0 var(--s3); color: var(--color-chrome-muted);
                  text-decoration: none; font-size: var(--hs-ui); font-weight: 600; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
    .fo-doors a:hover { background: var(--color-chrome-wash); color: var(--color-chrome-foreground); }
    .fo-doors a.on { color: var(--color-chrome-foreground); box-shadow: inset 0 -3px 0 var(--color-identity); }

    /* Below 1024px: the logo, the current page's name and ONE menu button; the doors, Account and Sign out
       are in the panel. */
    .fo-menubtn, .fo-here, .fo-menu { display: none; }
    .fo-menubtn { width: 40px; height: 40px; padding: 0; border: 1px solid var(--color-chrome-wash); border-radius: var(--radius-sm);
                  background: transparent; color: var(--color-chrome-foreground); cursor: pointer; align-items: center; justify-content: center; }
    .fo-menubtn:hover { background: var(--color-chrome-wash); }
    /* The three bars: one 2px line and two box-shadow copies of it, so there is no glyph to go missing. */
    .fo-menubtn .bars { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px;
                        box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
    /* Open: the identity fills the button (the "open-menu button" is one of the places the identity goes). */
    .fo-menubtn[aria-expanded="true"] { background: var(--color-identity); border-color: var(--color-identity);
                                        color: var(--color-identity-foreground); }
    .fo-here { color: var(--color-chrome-foreground); font-size: var(--hs-ui); font-weight: 650; }

    @media (max-width: 1023px) {
        .fo-doors, .fo-who { display: none; }
        .fo-menubtn { display: inline-flex; flex: none; }
        .fo-word { display: none; }
        .fo-here { display: inline; }
        .fo-menu:not([hidden]) { display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
                                 background: var(--color-chrome-soft); border-bottom: 1px solid var(--color-chrome-wash);
                                 box-shadow: 0 8px 24px color-mix(in srgb, var(--color-background) 60%, transparent);
                                 padding: var(--s2) 0 var(--s3); }
        .fo-menu nav { display: flex; flex-direction: column; }
        .fo-menu nav a { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--gutter);
                         color: var(--color-chrome-muted); text-decoration: none; font-size: var(--hs-ui); font-weight: 600;
                         border-left: 3px solid transparent; }
        .fo-menu nav a:hover { background: var(--color-chrome-wash); color: var(--color-chrome-foreground); }
        .fo-menu nav a.on { color: var(--color-chrome-foreground); border-left-color: var(--color-identity); }
        .fo-menu nav a .ic { width: 1.4em; text-align: center; }
        .fo-menu-who { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
                       margin-top: var(--s2); padding: var(--s3) var(--gutter) 0; border-top: 1px solid var(--color-chrome-wash); }
    }

    .fo-body { display: flex; flex: 1; align-items: flex-start; }

    .fo-main { flex: 1; min-width: 0; }   /* min-width:0 so a wide table scrolls its own box
                                             instead of stretching the whole layout */

    /* ── THE SUB-TAB BAR: directly under the header, full width, no gap (rule 10) ──────────────────
       The rest of the section you are already in. Plain links, so they work identically on the static
       pages. They WRAP rather than scroll sideways — two honest short rows beat a tab hidden off the right
       edge. The page gutter on both sides, the same as the header's. The active tab is marked in the
       identity (a 3px bar under it), never by a text colour. */
    .fo-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: var(--s2) var(--gutter) 0;
               border-bottom: 1px solid var(--line); background: var(--paper); }
    .fo-tabs a { padding: var(--s2) var(--s3); font-size: var(--hs-ui); font-weight: 600;
                 color: var(--ink-3); text-decoration: none; border-bottom: 3px solid transparent;
                 margin-bottom: -1px; white-space: nowrap; }
    .fo-tabs a:hover { color: var(--ink); }
    .fo-tabs a.on { color: var(--color-card-foreground); border-bottom-color: var(--color-identity); }

    /* The SECOND strip. Deliberately quieter than the first and pill-shaped rather than underlined,
       so at a glance you can tell which level you are reading - two identical strips stacked would
       be worse than the eleven tabs this replaced. */
    .fo-subtabs { display: flex; flex-wrap: wrap; gap: var(--s1);
                  padding: var(--s2) var(--gutter); background: var(--paper-2);
                  border-bottom: 1px solid var(--line); }
    .fo-subtabs a { padding: var(--s1) var(--s3); font-size: var(--hs-ui); font-weight: 600;
                    color: var(--ink-3); text-decoration: none; border-radius: 999px;
                    white-space: nowrap; }
    .fo-subtabs a:hover { color: var(--ink); background: var(--paper); }
    .fo-subtabs a.on { color: var(--paper); background: var(--brand-purple); }

    /* ══ INSIDE THE CREW APP, THE NAV IS NOT OURS TO DRAW ══════════════════════════════════════════
       An OLD app build hosts this site in a pane with its OWN native bar, built from the same NavMap.
       The flag is set on the root element from a cookie the handoff writes, before first paint. The doors
       and the menu are hidden at EVERY width: two navigations that disagree about which one you are on
       is exactly what the native bar is there to prevent. An OLD build never sets the flag and gets the
       website's own nav. */
    html.fo-in-app .fo-doors,
    html.fo-in-app .fo-menubtn,
    html.fo-in-app .fo-menu { display: none !important; }