/* Safety Utility */
.hidden {
    display: none !important;
}

:root {
    --bg-light: #f8fafc;
    --card-bg: #ffffff;
    --border-color: #e2e8f0;
    --accent-blue: #0284c7;
    --text-main: #0f172a;
    --text-muted: #64748b;
}

body {
    background-color: var(--bg-light);
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    padding: 0;
}

/* AUTH CARD CONTAINER */
.card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 32px 24px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08);
    box-sizing: border-box;
    /* margin: auto 0 (2026-10-02) - the shared wrapper this sits in
       (index.html's "MAIN CONTENT WRAPPER") dropped its own
       justify-center so dashboard tab content sits at the top instead
       of floating mid-screen when short (see that change's own
       comment). A flex item's own top/bottom auto margins absorb the
       wrapper's free space and self-center regardless of what the
       parent's justify-content is set to - .card is used by every
       pre-dashboard screen (sign-in, create account, complete
       profile, pending approval, rejected, accept terms) and nothing
       else, so this keeps all of them vertically centered exactly as
       before, independently of the dashboard tabs. */
    margin: auto 0;
}

.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
}

.logo-container img {
    max-width: 150px;
    width: 100%;
    height: auto;
}

/* Small footer branding mark (2026-09-13) - replaces the old full-size
   top logo-container on the auth-flow cards; reduces how prominent the
   TeamGT wordmark is on a screen crew stare at every day. */
.powered-by-footer {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.powered-by-footer img {
    max-width: 100px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 8px;
    opacity: 0.85;
}

.powered-by-footer p {
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    margin: 0;
}

.tab-buttons {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border-color);
}

.tab-btn {
    flex: 1;
    padding: 10px 4px;
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}

.tab-btn.active {
    color: var(--accent-blue);
    border-bottom: 2px solid var(--accent-blue);
    margin-bottom: -2px;
}

.form-section {
    display: none;
    width: 100%;
}

.form-section.active {
    display: block;
}

/* CENTRALIZED ACTION BUTTON UTILITIES */
.auth-btn {
    display: block;
    width: 100%;
    height: 44px;
    margin-top: 18px;
    padding: 0 16px;
    background-color: #0f172a;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s ease-in-out;
}

.auth-btn:hover {
    background-color: #1e293b;
}

.auth-btn-accent {
    background-color: #0284c7;
}

.auth-btn-accent:hover {
    background-color: #0369a1;
}

/* DASHBOARD & ROSTER GRID STYLES */
.dashboard-container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    /* Bottom tab nav (2026-10-01, app codebase only) is a fixed-position
       bar - without this, the last roster row/day-column would sit
       behind it. 64px covers the bar's own ~56px button height plus a
       little breathing room; env(safe-area-inset-bottom) covers the
       home-indicator area on notched iPhones (needs viewport-fit=cover
       on the <meta name="viewport"> tag to resolve to anything but 0). */
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
    /* #dash-title-bar (2026-10-02) is the same idea at the top - a
       fixed-position bar content would otherwise sit behind. Its own
       height is env(safe-area-inset-top) + ~59px (10px top padding +
       ~22px title line + ~16px subtext line/margin, present or not,
       see #dash-title-bar-subtext's own min-height below - + 10px
       bottom padding + 1px border) - 70px here is that plus a small
       buffer, so content clears it on every device regardless of
       exactly how tall the safe-area inset is. */
    padding-top: calc(env(safe-area-inset-top) + 82px);
    box-sizing: border-box;
}

/* Static top title bar (2026-10-02, app codebase only) - one shared
   header across all 5 bottom-nav tabs. Entirely hand-written, not
   Tailwind utility classes - see the comment on #dash-title-bar in
   index.html for why. Mirrors #bottom-nav's own fixed/safe-area
   pattern further down this file. */
#dash-title-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: #0f172a; /* slate-900, matches this app's other header bars */
    /* Gold hairline (2026-10-02) - brand-gold-500 from the design-system
       palette at reduced strength, the one place the website's gold
       carries into the app chrome. Deliberately a hairline, not a fill. */
    border-bottom: 1px solid rgba(205, 164, 58, 0.55);
    /* Row layout (2026-10-02) - #dash-title-bar-inner's text block on
       the left, #admin-panel-btn on the right (Luke's ask - the
       corner was "normally dead space"). align-items: flex-end
       (changed from center 2026-10-02, Luke's ask to "lower it
       slightly") anchors the button to the BOTTOM of the bar instead
       of its true vertical middle - #admin-panel-btn's own
       margin-bottom below matches #dash-title-bar-inner's bottom
       padding (10px), so the button's bottom edge lines up with the
       title text block's bottom edge regardless of the bar's actual
       height (which varies by device safe-area-inset-top and by
       whether the active tab sets a subtitle) - this reads as sitting
       at the same visual "height" as the title text, not floating
       above it the way true centering did. */
    display: flex;
    align-items: flex-end;
}
#dash-title-bar-inner {
    padding: calc(env(safe-area-inset-top) + 14px) 16px 10px;
    box-sizing: border-box;
    /* flex: 1 1 auto + min-width: 0 so this block - not #admin-panel-btn -
       is what shrinks/truncates on a narrow phone if a long title and
       the button would otherwise not both fit (hasn't happened with
       any title built so far, "Base Roster for Liverpool" and the
       button both fit comfortably even on a 375pt-wide screen, but
       safer to have a real fallback than assume every future title
       stays short). */
    flex: 1 1 auto;
    min-width: 0;
}
#dash-title-bar-text {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 22px; /* fixed (not 1.25) so every tab's bar is the same height */
    margin: 0;
    /* Gold underline (2026-10-02, Luke's ask) - sits under the text
       only (inline-block), not the whole bar width, so it reads as a
       title rule rather than another divider. */
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    padding-bottom: 3px;
    border-bottom: 2px solid #cda43a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top;
}
/* min-height, not .hidden - always present (even empty) so the bar's
   total height stays constant across tabs regardless of whether that
   tab sets a subtitle, and switching tabs never shifts the content
   below it. */
#dash-title-bar-subtext {
    color: #94a3b8; /* slate-400 */
    font-size: 12px;
    margin: 4px 0 0;
    /* Fixed height AND line-height (2026-10-02): min-height alone let a
       tab WITH a subtitle render 2.5px taller than one without, so the
       bar jumped when switching tabs. */
    height: 16px;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* #admin-panel-btn in the title bar's top-right corner (2026-10-02,
   moved from Settings - Luke's ask). Compact pill, not the full-width
   button style used elsewhere in this app - a corner control needs to
   read as an icon-sized tap target, not a regular form button. Same
   purple as every other admin-only control in this app
   (admin-badge/admin-panel-btn's own original Settings styling/the
   admin base-filter toggle). */
#dash-title-bar #admin-panel-btn {
    flex: 0 0 auto;
    margin: 0 16px 10px 8px;
    padding: 6px 12px;
    border: none;
    border-radius: 999px;
    background: #cda43a; /* brand-gold-500 - was purple-800 until 2026-10-02 */
    color: #0f1747; /* brand-navy-900, for contrast on gold */
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
#dash-title-bar #admin-panel-btn:hover {
    background: #e0bc63; /* brand-gold-400 */
}

/* Bottom Tab Navigation (2026-10-01, app codebase only) */
/* #bottom-nav's own markup uses several Tailwind utility classes
   (bottom-0/left-0/right-0/z-40/grid-cols-5) that this app's forked
   css/tailwind.min.css never had rebuilt to include - confirmed via
   grep, each one genuinely absent from the compiled bundle, not just
   hard to find. This app's www/ was a straight snapshot of the
   website's output files (css/tailwind-input.css, tailwind.min.css)
   without the actual build tooling (tailwind.config.js, the
   tailwindcss devDependency, an npm build:css script) - none of that
   got forked alongside it, so there's no "just rebuild it" fix
   available here the way the website has. Hand-written here instead,
   matching Tailwind's own real output values exactly, same as every
   other custom rule in this file. If more Tailwind-class-based UI
   keeps getting added to this app, it's worth setting up its own real
   build pipeline rather than hand-patching each missing class as it's
   found - flagged, not done here (out of scope for a same-day fix). */
#bottom-nav.fixed { position: fixed; }
#bottom-nav.bottom-0 { bottom: 0; }
#bottom-nav.left-0 { left: 0; }
#bottom-nav.right-0 { right: 0; }
#bottom-nav.z-40 { z-index: 40; }
#bottom-nav .grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#bottom-nav .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#bottom-nav .bottom-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 56px; /* deliberately above the 44px floor already used
                          elsewhere in this app - Luke asked for a
                          generous thumb target here specifically */
    width: 100%;
    padding: 6px 2px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #64748b; /* slate-500 */
}
#bottom-nav .bottom-nav-icon {
    font-size: 20px;
    line-height: 1;
}
#bottom-nav .bottom-nav-label {
    font-size: 12px;
    font-weight: 600;
}
#bottom-nav .bottom-nav-btn {
    position: relative;
}
#bottom-nav .bottom-nav-btn.active {
    color: #0369a1; /* sky-700, matches this app's existing accent usage */
}
/* Short gold bar above the active tab (2026-10-02) - brand-gold-500 */
#bottom-nav .bottom-nav-btn.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 28px;
    height: 2px;
    margin-left: -14px;
    border-radius: 0 0 2px 2px;
    background: #cda43a;
}

.grid-scroll-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 15px;
    -webkit-overflow-scrolling: touch;
}

.roster-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 15px;
    width: max-content;
    min-width: 100%;
    /* Without this, flex's default (stretch) forces every day-column to
       the height of the tallest one in the row - a day with only one
       duty-status line then shows a big block of the column's own grey
       background filling the leftover space below its content, which
       reads as a rendering glitch rather than "just less happened that
       day." align-items: flex-start lets each column size to its own
       content instead, so there's no leftover area to be grey at all.
       No effect on the mobile media query below (flex-direction:column
       there, where align-items governs width, already fixed at 100%). */
    align-items: flex-start;
}

.day-column {
    /* 316px, not the original 280 (2026-10-03): the redesigned flight tile needs about 290px of room inside the
       column to lay out cleanly, otherwise the route, buttons and times crowd each other on a laptop. */
    flex: 0 0 380px;
    min-width: 380px;
    background: #e2e8f0;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.day-header {
    background-color: #2c3e50;
    border-bottom: 2px solid rgba(205, 164, 58, 0.8); /* gold trim, 2026-10-02 */
    color: white;
    padding: 12px;
    text-align: center;
    font-weight: 600;
    font-size: 15px;
}

.flight-card {
    background: white;
    margin: 10px 10px 0 10px;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    font-size: 14px;
    line-height: 1.5;
}

.flight-card:last-child {
    margin-bottom: 10px;
}

.flight-card.out-of-base {
    border-left: 4px solid #800020;
    background-color: #fffafb;
}

.flight-card.out-of-base .route {
    color: #800020;
}

.flight-card.out-of-base .out-of-base-badge {
    font-size: 12px;
    font-weight: 700;
    color: #800020;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

/* Scheduled flights with no known crew (functions/lib/scheduledFlights.js)
   - a Jet2-published flight nobody's signed up to this app for yet, not
   a real gap in an otherwise-known flight. Deliberately QUIET now
   (2026-10-02, app codebase only - toned down after review: the
   original amber-border/bold-caps/tinted-background treatment was
   visually louder than a real crewed flight tile, which inverted the
   attention hierarchy on a grid where the flights with real people on
   them are the ones actually worth noticing). A dashed, muted-slate
   border reads as "placeholder" without competing for attention; no
   background tint at all, so it sits quietly among real flight cards
   rather than jumping out ahead of them. -->
.flight-card.no-crew-known {
    border: 1px dashed #cbd5e1;
    background-color: transparent;
}

.flight-card.no-crew-known .route {
    color: #94a3b8;
}

.flight-card.no-crew-known .no-crew-badge {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.3;
    margin-bottom: 2px;
}

.route {
    font-weight: bold;
    color: #0f172a;
}

.flight-info {
    font-size: 13px;
    color: #475569;
    margin-bottom: 4px;
}

.registration {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    font-family: monospace;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

/* Commission average (2026-10-01) - CC/SCCM/admin viewers only. A plain
   muted stat line (matching .registration above), not a .swap-suffix
   pill - this is informational historical context, not an actionable
   control. */
.commission-avg {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 4px;
}
.commission-avg-count {
    color: #94a3b8;
    font-weight: 400;
}

.CPT { color: #0056b3; font-weight: 700; }
.FO { color: #16a34a; font-weight: 700; }
.SCCM, .CC { color: #d97706; font-weight: 700; }

/* Swap board (2026-09-10, discovery-only) - a pilot's own flight name
   becomes clickable to flag/unflag "happy to swap"; a colleague's
   already-flagged name gets a small read-only badge revealing their
   note on click. Same amber accent used everywhere else in this app
   for "actionable/draft/heads-up" (scheduled-flights, admin cards). */
.swap-toggle-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.swap-suffix {
    font-size: 12px;
    font-weight: 700;
    color: #b45309;
    background-color: #fef3c7;
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 2px;
    white-space: nowrap;
}

/* Always visible, not hover-only (2026-09-10 - hover doesn't exist on
   a phone, and this app is ~99% used on one, per Luke). Just the
   emoji, muted grey so it reads as a quiet affordance rather than
   competing with the flagged state's amber badge. */
.swap-suffix-muted {
    color: #cbd5e1;
    background-color: transparent;
    font-weight: 500;
    font-size: 13px;
}

.swap-badge-view-btn {
    font-size: 12px;
    font-weight: 700;
    color: #b45309;
    background-color: #fef3c7;
    border: none;
    padding: 1px 5px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

/* Contact Crew (2026-09-16, made deliberately quiet the same day after
   Luke saw the first version - a full-width blue button read as too
   heavy for something used occasionally). Icon-only, muted grey by
   default same treatment as .swap-suffix-muted elsewhere in this file
   - a small, always-present affordance rather than something that
   competes with the crew names it sits below. */
.contact-crew-btn {
    display: inline-block;
    background: none;
    border: none;
    padding: 2px 4px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.5;
}

.contact-crew-btn:hover,
.contact-crew-btn:focus-visible {
    opacity: 1;
}

/* The day header's date text itself is the click target for "happy to
   work" (2026-09-10) - deliberately styled to look exactly like the
   plain, non-interactive heading it always was, not a button, per
   Luke's steer away from anything that reads as invasive on an
   otherwise minimal header. Confirmation comes from the prompt/confirm
   dialog and the .happy-to-work-box below, not from this element
   changing appearance. */
.happy-to-work-btn {
    all: unset;
    cursor: pointer;
    display: block;
    width: 100%;
}

.happy-to-work-box {
    background-color: #f0fdf4;
    border-bottom: 1px solid #bbf7d0;
    color: #15803d;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
}

/* Custom-list "which events are shown" duty-status box (2026-09-12) -
   one labeled group per event type (Off/Standby/Work) present that day
   for the list's members, one name per line underneath - revised
   2026-09-16 per Luke's feedback: a comma-joined "Off: A, B, C" line
   made it hard to tell at a glance how many people that actually was.
   Same box shape as .happy-to-work-box above, colored per type so a
   "days off" meetup-planning list scans easily. */
.duty-status-box {
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 12px;
    padding: 6px 12px;
}
.duty-status-group + .duty-status-group {
    margin-top: 6px;
}
.duty-status-label {
    font-weight: 700;
}
.duty-status-name {
    font-weight: 600;
    padding-left: 6px;
}
.duty-status-off { color: #0f766e; }
.duty-status-standby { color: #b45309; }
.duty-status-work { color: #475569; }

/* Admin panel collapsible sections (2026-09-13 tidy-up) */
#admin-view details > summary {
    list-style: none;
}
#admin-view details > summary::-webkit-details-marker {
    display: none;
}
#admin-view details > summary::after {
    content: "▸";
    float: right;
    color: #9333ea;
    transition: transform 0.15s ease;
}
#admin-view details[open] > summary::after {
    transform: rotate(90deg);
}

/* Settings collapsible sections (2026-10-02) - same pattern as the
   admin panel's own tidy-up above, applied here for the same reason:
   Settings was one long undifferentiated scroll (profile fields ->
   password -> 2FA -> How To guides -> Delete Account), hard to scan.
   Slate chevron, not admin's purple - this isn't admin-only content. */
#options-view details > summary {
    list-style: none;
}
#options-view details > summary::-webkit-details-marker {
    display: none;
}
#options-view details > summary::after {
    content: "▸";
    float: right;
    color: #64748b;
    transition: transform 0.15s ease;
}
#options-view details[open] > summary::after {
    transform: rotate(90deg);
}

/* MODALS */
#terms-modal,
#privacy-modal,
#ics-help-modal,
#friends-modal {
    z-index: 9999;
}

@media screen and (max-width: 768px) {
    /* Side margin tightened (2026-10-02, app codebase only) - Luke's
       ask, there was too big a gap to the screen edge on a phone.
       Deliberately left/right only, via padding shorthand's explicit
       4-value form - top/bottom keep the base rule's own
       safe-area-aware values (title bar/bottom nav clearance), which a
       bare "padding: 10px" here would otherwise have overwritten
       entirely (this rule's whole job is overriding the desktop 20px,
       so it has to fully restate every side it cares about). */
    .dashboard-container {
        padding-top: calc(env(safe-area-inset-top) + 82px);
        padding-right: 8px;
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
        padding-left: 8px;
    }
    /* <body>'s own Tailwind p-4 (16px each side, index.html) was
       stacking on top of .dashboard-container's own padding above -
       16+8=24px before a single card's own internal padding even
       started. Reduced here, mobile only, rather than touching the
       p-4 class in index.html directly, since that also sizes the
       sign-in/auth screens (.card, untouched - it has its own
       max-width: 420px and padding, so less outer breathing room
       around it on a phone is harmless). body.p-4 (tag+class) is
       needed, not a bare "body" selector, to out-specificity the
       Tailwind .p-4 utility class itself. */
    body.p-4 {
        padding-left: 8px;
        padding-right: 8px;
    }
    .roster-grid {
        flex-direction: column;
        width: 100%;
        min-width: 100%;
        gap: 20px;
    }
    .day-column {
        flex: 1 1 auto;
        width: 100%;
        min-width: 100%;
    }

    /* These measured ~30-32px tall (Tailwind's px-3 py-2 text-xs) -
       below Apple/Google's ~44px minimum recommended touch target, and
       packed close together, which is an easy-mis-tap setup on a phone.
       Desktop keeps its existing Tailwind padding untouched; this only
       applies below the same breakpoint already used above. */
    /* #admin-panel-btn/#logout-btn now live inside Settings
       (#options-view)'s "Account Actions" row (2026-10-02), not the old
       always-visible per-tab header - the dead #dash-header-actions
       2-column-grid rules that used to size/stack them (and the
       #dash-view-toggle/#options-btn selectors alongside them, for
       elements that don't exist in this app at all) were removed along
       with that header. Touch-target sizing kept, since that's still
       correct wherever these buttons live. */
    #admin-panel-btn,
    #logout-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* #dash-admin-base-toggle's own <select> doesn't shrink below its
       content width inside a flex row unless told to - min-width: 0 on
       both the row and the select is what lets it compress to fit
       Settings' narrower mobile width instead of overflowing. */
    #dash-admin-base-toggle {
        min-width: 0;
    }
    #admin-base-select {
        min-width: 0;
        flex: 1 1 auto;
    }

    /* Block-hours summary chips - flex-wrap left them sized to their
       own text, so "September" and "October" ended up visibly
       different widths stacked on top of each other. Stretched to
       match on mobile only; desktop keeps the original inline chips. */
    #block-hours-summary {
        flex-direction: column;
        width: 100%;
    }
    #block-hours-summary > div {
        width: 100%;
        box-sizing: border-box;
    }
}
/* Gold eyebrow label on dark surfaces (2026-10-02) - brand-gold-400 */
.gold-eyebrow {
    color: #e0bc63;
}

/* App icon picker (2026-10-02) - selected tile gets a gold border. */
.app-icon-option.app-icon-selected {
    border-color: #cda43a;
    box-shadow: 0 0 0 1px #cda43a;
}


/* =========================================================================
   App-style sign-in (2026-10-02) - full-screen navy instead of a white
   website-style card. Applies to every pre-dashboard screen via the .auth-screen class (sign in,
   create account, 2FA, complete profile, waiting for approval, rejected,
   accept terms) and #post-auth-loading.
   ========================================================================= */
.auth-screen,
#post-auth-loading {
    position: fixed;
    inset: 0;
    z-index: 60;
    max-width: none;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: radial-gradient(120% 70% at 50% 0%, #1d2d73 0%, #0f1747 46%, #0a0f2e 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: calc(env(safe-area-inset-top) + 28px) 28px calc(env(safe-area-inset-bottom) + 24px);
    box-sizing: border-box;
}
.auth-screen > * { width: 100%; max-width: 380px; }
/* auto margins centre short screens but let tall ones (Complete Profile) scroll from the top */
.auth-screen > :first-child { margin-top: auto; }
.auth-screen > :last-child { margin-bottom: auto; }
.auth-screen { text-align: left; }
.auth-screen.text-center { text-align: center; }

.auth-brand { text-align: center; margin-bottom: 26px; }
.auth-brand-icon {
    width: 84px; height: 84px;
    border-radius: 22.4%;
    display: block; margin: 0 auto 14px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(205, 164, 58, 0.35);
}
.auth-brand-name { color: #fff; font-size: 26px; font-weight: 800; letter-spacing: 0.01em; margin: 0; }
.auth-brand-tag { color: #cda43a; font-size: 13px; margin: 4px 0 0; letter-spacing: 0.02em; }
#post-auth-loading .auth-brand-icon { margin-bottom: 20px; }
.auth-loading-text { color: #94a3b8; }

.auth-screen h2 { color: #fff !important; font-size: 22px; text-align: left; margin-bottom: 18px; }
.auth-screen label { color: #94a3b8 !important; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.auth-screen input:not([type=checkbox]):not([type=radio]),
.auth-screen select {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    font-size: 16px; /* 16px stops iOS zooming the page on focus */
    box-shadow: none !important;
}
.auth-screen input:not([type=checkbox]):focus,
.auth-screen select:focus { outline: none; border-color: #cda43a !important; }
/* Autofilled fields (2026-10-03): Safari paints them pale yellow, which made the white text unreadable. The old rule here
   never applied - the general input rule above has `box-shadow: none !important` and a higher specificity (the :not()
   parts count), so it won. Same selector + !important now. The long transition stops Safari's own background flash. */
.auth-screen input:not([type=checkbox]):not([type=radio]):-webkit-autofill,
.auth-screen input:not([type=checkbox]):not([type=radio]):-webkit-autofill:hover,
.auth-screen input:not([type=checkbox]):not([type=radio]):-webkit-autofill:focus,
.auth-screen input:not([type=checkbox]):not([type=radio]):-webkit-autofill:active {
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px #1b2447 inset !important;
    box-shadow: 0 0 0 1000px #1b2447 inset !important;
    background-color: #1b2447 !important;
    transition: background-color 600000s 0s, color 600000s 0s;
}
.auth-screen .auth-btn {
    height: 52px; line-height: 52px; border-radius: 14px;
    background: #cda43a; color: #0f1747; font-size: 16px; margin-top: 22px;
    box-shadow: 0 6px 18px rgba(205, 164, 58, 0.28);
}
.auth-screen .auth-btn:hover { background: #d8b24a; }
.auth-screen .auth-btn:disabled { opacity: 0.6; }
.auth-screen #google-signin-btn {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    border-radius: 14px;
    padding: 14px 0;
    font-size: 15px;
}
.auth-screen .apple-btn {
    display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; margin-top: 10px;
    background: #fff; color: #000; border: 0; border-radius: 14px; padding: 14px 0;
    font-size: 15px; font-weight: 600; cursor: pointer;
}
.auth-screen .apple-btn.hidden { display: none; }
.auth-screen .text-sky-600, .auth-screen .text-sky-700 { color: #e6c565 !important; }
.auth-screen .text-slate-500, .auth-screen .text-slate-400 { color: #94a3b8 !important; }
.auth-screen .border-slate-200 { border-color: rgba(255, 255, 255, 0.14) !important; }
.auth-screen .powered-by-footer { border-top-color: rgba(255, 255, 255, 0.12); margin-top: 30px; }
.auth-screen .powered-by-footer img { display: none; }
.auth-screen .powered-by-footer p { color: #64748b; }

.auth-screen select option { color: #0f172a; background: #fff; }
.auth-screen input[type=checkbox] { accent-color: #cda43a; }
.auth-screen h2, .auth-screen h3 { color: #fff !important; }
.auth-screen .text-slate-900 { color: #fff !important; }
.auth-screen .text-slate-700, .auth-screen .text-slate-600 { color: #cbd5e1 !important; }
.auth-screen a { color: #e6c565; }
.auth-screen .bg-slate-900 { background: #cda43a !important; color: #0f1747 !important; }
.auth-screen .bg-slate-200 { background: rgba(255,255,255,0.18) !important; color: #fff !important; }
.auth-screen .border-slate-100 { border-color: rgba(255, 255, 255, 0.14) !important; }
.auth-screen button.text-sky-600 { background: none; border: none; }
.auth-screen #pending-logout-btn, .auth-screen #rejected-logout-btn { margin-top: 16px; font-size: 14px; }
/* Message boxes on the navy sign-in screens (2026-10-04): the stock pale red and sky boxes clashed with the palette. */
.auth-screen .bg-sky-100 { background: rgba(205, 164, 58, 0.12) !important; border-color: rgba(205, 164, 58, 0.45) !important; color: #f1dc9a !important; border-radius: 12px; }
.auth-screen .bg-red-100 { background: rgba(248, 113, 113, 0.12) !important; border-color: rgba(248, 113, 113, 0.45) !important; color: #fecaca !important; border-radius: 12px; }
.auth-screen #mfa-enroll-card { padding-top: 18px; margin-top: 4px; }

/* Welcome splash (2026-10-02) - fades in after an interactive sign-in,
   holds, then fades out over the base roster. */
#welcome-splash {
    position: fixed; inset: 0; z-index: 90;
    background: radial-gradient(120% 70% at 50% 0%, #1d2d73 0%, #0f1747 46%, #0a0f2e 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 600ms ease;
    pointer-events: none;
}
#welcome-splash.welcome-visible { opacity: 1; pointer-events: auto; }
/* Covers the screen with no fade-in (so the sign-in form goes straight to the welcome), then fades OUT slowly. */
#welcome-splash.welcome-instant { transition: none; }
#welcome-splash.welcome-leaving { transition: opacity 1400ms ease; opacity: 0; pointer-events: none; }
.welcome-small { color: #cda43a; font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase; margin: 6px 0 0; }
.welcome-name { color: #fff; font-size: 34px; font-weight: 800; margin: 6px 24px 0; text-align: center; }
.welcome-rule { width: 56px; height: 2px; background: #cda43a; margin-top: 18px; border-radius: 2px; }
#welcome-splash .auth-brand-icon,
#welcome-splash .welcome-small,
#welcome-splash .welcome-name,
#welcome-splash .welcome-rule { transform: translateY(8px); opacity: 0; transition: opacity 600ms ease 150ms, transform 600ms ease 150ms; }
#welcome-splash.welcome-visible .auth-brand-icon,
#welcome-splash.welcome-visible .welcome-small,
#welcome-splash.welcome-visible .welcome-name,
#welcome-splash.welcome-visible .welcome-rule { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    #welcome-splash, #welcome-splash * { transition-duration: 1ms !important; transition-delay: 0s !important; transform: none !important; }
}

/* Settings (2026-10-02) - profile header, admin filter, About, Sign out. */
.settings-profile-card {
    display: flex; align-items: center; gap: 14px;
    background: linear-gradient(135deg, #0f1747 0%, #1b2a6b 100%);
    border: 1px solid rgba(205, 164, 58, 0.45);
    border-radius: 16px;
    padding: 16px;
    color: #fff;
    position: relative;
}
.settings-profile-text { min-width: 0; flex: 1 1 auto; }
.settings-profile-name { margin: 0; font-size: 18px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-profile-meta { margin: 2px 0 0; font-size: 13px; color: #cda43a; font-weight: 600; }
.settings-profile-email, .settings-profile-phone { margin: 2px 0 0; font-size: 12px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-admin-badge {
    position: absolute; top: 10px; right: 10px;
    background: transparent; color: #cda43a; border: 1px solid rgba(205, 164, 58, 0.7);
    font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 999px;
}
.settings-admin-filter {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 12px;
}
.settings-admin-filter label { flex: 0 0 auto; white-space: nowrap; font-size: 13px; font-weight: 700; color: #0f172a; display: flex; flex-direction: column; }
.settings-admin-filter label span { font-size: 12px; font-weight: 700; color: #a8841f; text-transform: uppercase; letter-spacing: 0.08em; }
.settings-select {
    flex: 1 1 auto; min-width: 0; padding: 8px 10px; font-size: 14px; font-weight: 600;
    border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: #0f172a;
}
.about-app-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.about-app-row img { width: 48px; height: 48px; border-radius: 22.4%; box-shadow: 0 0 0 1px rgba(205, 164, 58, 0.4); }
.about-app-name { margin: 0; font-weight: 800; color: #0f172a; font-size: 16px; }
.about-app-version { margin: 1px 0 0; font-size: 12px; color: #64748b; }
.about-links { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.about-link-row {
    display: flex; width: 100%; align-items: center; justify-content: space-between;
    padding: 13px 14px; font-size: 14px; font-weight: 600; color: #0f172a;
    background: #fff; border: none; border-bottom: 1px solid #e2e8f0; text-align: left; text-decoration: none; cursor: pointer;
    box-sizing: border-box;
}
.about-link-row:last-child { border-bottom: none; }
.about-link-row span { color: #94a3b8; font-size: 18px; }
.about-company { font-size: 12px; line-height: 1.5; color: #64748b; margin: 0 0 8px; }
.settings-signout-btn {
    display: block; width: 100%; padding: 14px; margin-top: 4px;
    background: #fff; color: #b91c1c; font-size: 15px; font-weight: 700;
    border: 1px solid #fecaca; border-radius: 12px; cursor: pointer;
}
.settings-signout-btn:active { background: #fef2f2; }


/* App lock (2026-10-02) - lock screen + Settings switch. */
#app-lock-screen {
    display: none;
    position: fixed; inset: 0; z-index: 100;
    background: radial-gradient(120% 70% at 50% 0%, #1d2d73 0%, #0f1747 46%, #0a0f2e 100%);
    flex-direction: column; align-items: center; justify-content: center;
    padding: 24px; box-sizing: border-box;
}
html.app-lock-pending #app-lock-screen,
#app-lock-screen.app-lock-on { display: flex; }
.app-lock-msg { color: #94a3b8; font-size: 14px; margin: 8px 0 26px; text-align: center; }
.app-lock-btn {
    background: #cda43a; color: #0f1747; font-size: 16px; font-weight: 700;
    border: none; border-radius: 14px; padding: 14px 28px; min-width: 220px; cursor: pointer;
    box-shadow: 0 6px 18px rgba(205, 164, 58, 0.28);
}
.app-lock-link { background: none; border: none; color: #e6c565; font-size: 14px; margin-top: 18px; cursor: pointer; }
/* Privacy cover (app switcher snapshot) - just the logo, no controls. */
#app-lock-screen.app-lock-privacy .app-lock-msg,
#app-lock-screen.app-lock-privacy .app-lock-btn,
#app-lock-screen.app-lock-privacy .app-lock-link,
#app-lock-screen.app-lock-privacy .welcome-name { visibility: hidden; }

.app-lock-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid #f1f5f9; }
.app-lock-row-text { min-width: 0; }
.app-lock-row-title { margin: 0; font-size: 14px; font-weight: 700; color: #0f172a; }
.app-lock-row-desc { margin: 3px 0 0; font-size: 12px; line-height: 1.4; color: #64748b; }
.switch { position: relative; flex: 0 0 auto; width: 51px; height: 31px; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider { position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px; transition: background 0.2s; cursor: pointer; }
.switch-slider::before {
    content: ""; position: absolute; width: 27px; height: 27px; left: 2px; top: 2px;
    background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 0.2s;
}
.switch input:checked + .switch-slider { background: #cda43a; }
.switch input:checked + .switch-slider::before { transform: translateX(20px); }


/* Time display setting (2026-10-02) */
.settings-time-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; }
.settings-time-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-time-title { font-size: 14px; font-weight: 700; color: #0f172a; }
.settings-time-desc { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: #64748b; }
.segmented { display: inline-flex; background: #e2e8f0; border-radius: 10px; padding: 3px; }
.seg-btn {
    border: none; background: transparent; color: #475569; font-size: 13px; font-weight: 700;
    padding: 7px 18px; border-radius: 8px; cursor: pointer; min-width: 64px;
}
.seg-btn.active { background: #0f1747; color: #fff; box-shadow: 0 1px 3px rgba(15, 23, 71, 0.35); }


/* Tile layout (2026-10-02): text column + right-hand action column. */
.tile-actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 1px; }
.tile-actions button {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    background: #f1f5f9; border: none; border-radius: 10px; padding: 0;
    font-size: 17px; line-height: 1; cursor: pointer; opacity: 0.85;
}
.tile-actions button:active, .tile-actions button[aria-expanded="true"] { background: #e2e8f0; opacity: 1; }
.flight-times { font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.flight-info { margin-bottom: 2px; }
/* Flip a tile between its outbound and return flight (2026-10-04): both faces are in the tile; .show-return swaps them. */
.flight-card .f-ret { display: none !important; }
.flight-card.show-return .f-out { display: none !important; }
.flight-card.show-return .f-ret { display: block !important; }
.flight-card.show-return .tile-timeline.f-ret, .flight-card.show-return a.track-flight-btn.f-ret { display: flex !important; }
.return-badge { margin-top: 3px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8a6a12; }
.tile-actions button.return-info-btn { font-size: 19px; font-weight: 800; color: #0f1747; }
.tile-actions button.return-info-btn[aria-pressed="true"] { background: #fdf3d4; opacity: 1; }
.flight-times { font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 4px; font-variant-numeric: tabular-nums; }

/* Go to date (2026-10-02) */
.goto-date-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 10px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; }
.goto-date-label { font-size: 12px; font-weight: 700; color: #475569; white-space: nowrap; }
.goto-date-input {
    flex: 1 1 auto; min-width: 0; padding: 8px 10px; font-size: 16px; /* 16px stops iOS zooming on focus */
    border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: #0f172a;
}
.goto-today-btn {
    flex: 0 0 auto; padding: 9px 14px; font-size: 13px; font-weight: 700; color: #fff;
    background: #0f1747; border: none; border-radius: 10px; cursor: pointer;
}
.goto-date-msg { margin: -4px 4px 10px; font-size: 12px; color: #64748b; }
/* Jumping to a day column must clear the fixed title bar. */
.day-column { scroll-margin-top: calc(env(safe-area-inset-top) + 88px); }

/* Segmented control with three options (Airport format) */
.segmented.seg3 .seg-btn { min-width: 56px; padding-left: 12px; padding-right: 12px; }

/* TEMPORARY diagnostic line (2026-10-02) - remove with setRosterDebug in main.js */
.roster-debug { margin: -4px 4px 10px; font-size: 12px; color: #64748b; }

/* Compact brand header for the secondary auth screens */
.auth-brand-compact { margin-bottom: 18px; }
.auth-brand-compact .auth-brand-icon { width: 56px; height: 56px; margin-bottom: 8px; border-radius: 22.4%; }
.auth-brand-compact .auth-brand-name { font-size: 20px; }
.auth-screen.text-center h2, .auth-screen.text-center p { text-align: center; }
/* Checkbox sentences are plain text, not field labels */
.auth-screen label.flex.items-start { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; color: #cbd5e1 !important; line-height: 1.45; }
.auth-screen label.flex.items-start input[type=checkbox] { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }

/* Admin panel theme (2026-10-02): the Tailwind purple utilities used through
   the admin markup and admin.js's generated rows are remapped to the app's
   navy/gold palette here, instead of editing ~80 class names. Scoped to
   #admin-view so nothing else changes. */
#admin-view.bg-purple-50, #admin-view .bg-purple-50 { background-color: #f6f7fb; }
#admin-view .bg-purple-100 { background-color: #eceef8; }
#admin-view .border-purple-200 { border-color: #d9dcec; }
#admin-view .border-purple-300 { border-color: #c4c9e0; }
#admin-view .text-purple-950, #admin-view .text-purple-900, #admin-view .text-purple-800 { color: #0f1747; }
#admin-view .text-purple-700 { color: #2c3a86; }
#admin-view .bg-purple-600, #admin-view .bg-purple-700, #admin-view .bg-purple-800 { background-color: #cda43a; color: #0f1747; }
#admin-view .hover\:bg-purple-700:hover, #admin-view .hover\:bg-purple-800:hover { background-color: #d8b24a; }
#admin-view table thead, #admin-view .bg-purple-100 th { background-color: #eceef8; }

/* =========================================================================
   iPad / wide screens (2026-10-02) - at >= 800px the bottom tab bar becomes a
   left-hand navigation rail (the usual iPad pattern), the title bar and page
   shift right to clear it, and the long form-style pages get a readable
   maximum width. The roster grid already switches to side-by-side day
   columns at >768px and stays full width. iPad mini portrait (744px) keeps
   the phone layout, as agreed.
   ========================================================================= */
@media screen and (min-width: 800px) {
    #bottom-nav {
        top: 0; bottom: 0; right: auto; left: 0;
        width: 92px;
        border-top: none;
        border-right: 1px solid #e2e8f0;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        box-sizing: border-box;
        overflow-y: auto;
    }
    #bottom-nav > .grid {
        display: flex; flex-direction: column; justify-content: flex-start;
        gap: 6px; max-width: none; margin: 0; padding: 12px 6px;
    }
    #bottom-nav .bottom-nav-btn { min-height: 74px; border-radius: 14px; }
    #bottom-nav .bottom-nav-icon { font-size: 24px; }
    #bottom-nav .bottom-nav-label { font-size: 12px; }
    #bottom-nav .bottom-nav-btn.active { background: #f1f5f9; }
    #bottom-nav .bottom-nav-btn.active::before {
        top: 50%; left: -6px; width: 3px; height: 34px; margin: -17px 0 0 0;
        border-radius: 0 3px 3px 0;
    }
    #dash-title-bar { left: 92px; }
    .dashboard-container {
        padding-left: 108px;
        padding-right: 16px;
        padding-bottom: 28px;
    }
    #options-view, #admin-view, #manage-views-view, #my-flights-view, #swaps-view, #logbook-view {
        max-width: 780px; margin-left: auto; margin-right: auto;
    }
}

/* Logbook row: log commission (cabin crew) */
.logbook-commission-btn { margin-top: 8px; padding: 6px 12px; font-size: 12px; font-weight: 700; color: #0f1747; background: #f5ecd0; border: 1px solid #cda43a; border-radius: 8px; cursor: pointer; }
.logbook-commission-btn:active { background: #ecdca5; }

/* Legal / help pop-ups must sit above the full-screen auth screens (z-index 60),
   or "Read Terms of Service" on Complete Profile / Accept Terms opens invisibly
   behind them (2026-10-02 audit). */
#terms-modal, #privacy-modal, #ics-help-modal { z-index: 95 !important; }


/* ---- My-roster helpers: next-duty card + roster-change banner (2026-10-02) ---- */
.next-duty-card {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0f1747, #172a6b);
    color: #fff;
    border: 1px solid rgba(212, 160, 23, 0.35);
}
.next-duty-label { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #d4a017; margin: 0 0 4px; }
.next-duty-main { font-size: 17px; font-weight: 800; margin: 0; letter-spacing: .01em; }
.next-duty-when { font-size: 13px; margin: 2px 0 0; color: #cbd5f5; }
.next-duty-share {
    margin-top: 10px; min-height: 36px; padding: 6px 12px; border-radius: 8px; cursor: pointer;
    font-size: 12px; font-weight: 700; color: #0f1747; background: #d4a017; border: 0;
}
.roster-change-banner {
    margin: 0 0 14px; padding: 12px 14px; border-radius: 12px;
    background: #fff7e0; border: 1px solid #f0c75a; color: #5c4300;
}
.roster-change-head { font-size: 13px; font-weight: 800; margin: 0 0 6px; }
.roster-change-list { list-style: none; margin: 0 0 10px; padding: 0; font-size: 12px; line-height: 1.5; }
.roster-change-group { margin-top: 8px; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; opacity: .75; }
.roster-change-group:first-child { margin-top: 0; }
.roster-change-line { padding: 2px 0; font-variant-numeric: tabular-nums; }
.roster-change-ok {
    min-height: 36px; padding: 6px 14px; border-radius: 8px; cursor: pointer;
    font-size: 12px; font-weight: 800; color: #fff; background: #0f1747; border: 0;
}

.swap-match-chip {
    display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px;
    font-size: 12px; font-weight: 700; color: #14532d; background: #dcfce7; border: 1px solid #86efac;
}

.duty-status-everyone {
    margin-bottom: 6px; padding: 3px 8px; border-radius: 8px; text-align: center;
    font-size: 12px; font-weight: 800; color: #14532d; background: #dcfce7; border: 1px solid #86efac;
}


/* ---- Two-tab layout: Roster (view picker) + My flights (sub-pages) - 2026-10-02 ---- */
.rv-badge { background: #d4a017; color: #0f1747; border-radius: 999px; font-size: 12px; font-weight: 800; padding: 1px 8px; }
.next-duty-line {
    display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 10px; padding: 8px 12px;
    background: #0f1747; color: #e6e9fb; border: 1px solid rgba(212, 160, 23, 0.35); border-radius: 10px;
    font-size: 12px; text-align: left; cursor: pointer;
}
.next-duty-line strong { color: #d4a017; font-weight: 800; letter-spacing: .04em; }

.mf-seg {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; margin: 0 0 14px; padding: 3px;
    background: #e2e8f0; border-radius: 10px;
}
.mf-seg-btn {
    min-height: 40px; border: 0; border-radius: 8px; background: transparent;
    font-size: 14px; font-weight: 600; color: #475569; cursor: pointer;
}
.mf-seg-btn.active { background: #fff; color: #0f1747; font-weight: 800; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12); }
.mf-note { margin: 0 0 10px; font-size: 12px; color: #64748b; }
.mf-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 12px; }
.mf-action-btn {
    min-height: 44px; padding: 0 12px; background: #fff; border: 1px solid #cbd5e1; border-radius: 10px;
    font-size: 14px; font-weight: 700; color: #0f172a; cursor: pointer;
}

#my-flights-view > .mf-pane { padding: 0; }
/* Logbook sits inside My flights now - the page already pads, so drop its own extra side padding */
#logbook-view.mf-pane > .p-4 { padding-left: 2px; padding-right: 2px; }

/* ---- ACARS photo -> flight times modal (2026-10-02) ---- */
.acars-overlay { position: fixed; inset: 0; z-index: 95; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, 0.6); }
.acars-overlay:not(.hidden) { display: flex; }
.acars-card { width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 18px; padding: 18px; color: #1e293b; }
.acars-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.acars-title { font-size: 16px; font-weight: 800; color: #0f172a; margin: 0; }
.acars-x { font-size: 26px; line-height: 1; color: #94a3b8; background: none; border: 0; cursor: pointer; }
.acars-text { font-size: 14px; color: #475569; margin: 0 0 12px; }
.acars-small { font-size: 12px; color: #64748b; margin: 0 0 10px; }
.acars-btn { display: block; width: 100%; min-height: 48px; margin-top: 10px; border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer; }
.acars-btn-primary { background: #0f1747; color: #fff; border: 0; }
.acars-btn-secondary { background: #fff; color: #334155; border: 1px solid #cbd5e1; }
.acars-btn:disabled { opacity: 0.5; }
.acars-label { display: block; margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #64748b; }
.acars-gap { margin-top: 12px; }
.acars-mini { display: block; margin-bottom: 4px; font-size: 12px; color: #64748b; text-align: center; }
.acars-input { width: 100%; padding: 8px; font-size: 14px; background: #fff; color: #0f172a; border: 1px solid #cbd5e1; border-radius: 8px; }
.acars-time { text-align: center; font-weight: 700; }
.acars-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.acars-summary { margin: 8px 0 0; font-size: 12px; font-weight: 700; color: #334155; }
.acars-msg { margin: 10px 0 0; font-size: 12px; }
.acars-msg.warn { color: #b45309; } .acars-msg.error { color: #dc2626; } .acars-msg.info { color: #64748b; }

.logbook-acars-tag { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: #0f1747; background: #f5ecd0; border: 1px solid #cda43a; border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.logbook-edited-dot { color: #cbd5e1; }
.logbook-quiet-edit { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }


/* No double-tap zoom (2026-10-03): a stray double tap zoomed the page in with no way back out. */
html, body { touch-action: manipulation; }

/* "Yesterday" collapsible (2026-10-03) - was a full orange bar; now a slim, quiet one. */
.yesterday-summary {
    display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none;
    padding: 6px 12px; background: #e8ecf1; color: #64748b; border-bottom: 1px solid #d5dbe3;
    font-size: 12px; font-weight: 600; text-align: left;
}
.yesterday-summary .yesterday-hint { font-size: 12px; font-weight: 500; color: #94a3b8; }

/* "Your flying" month cards (2026-10-03) - always expanded. */
.bh-card { border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05); border-radius: 10px; padding: 10px 12px; }
.bh-card-current { background: rgba(255,255,255,.10); border-color: rgba(205,164,58,.45); }
.bh-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bh-card-name { color: #fff; font-weight: 800; font-size: 14px; }
.bh-card-sub { color: #94a3b8; font-size: 12px; }
.bh-card-rows { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.10); display: grid; gap: 4px; }
.bh-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: #cbd5e1; }
.bh-row > span:first-child { min-width: 0; }
.bh-row strong { color: #fff; white-space: nowrap; }
.bh-warn { background: none; border: 0; padding: 0 2px; font-size: 13px; line-height: 1; cursor: pointer; }
.bh-caveat { font-size: 12px; line-height: 1.4; color: #e2e8f0; background: rgba(205,164,58,.14); border: 1px solid rgba(205,164,58,.4); border-radius: 8px; padding: 8px 10px; }

/* My flights > Upcoming rotation cards (2026-10-03) */
.upcoming-list { display: grid; gap: 4px; }
.up-day-head { margin: 14px 2px 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #64748b; }
.up-card { background: #fff; border: 1px solid #e8ecf2; border-radius: 12px; padding: 12px 14px 11px; margin-bottom: 8px; }
.up-title { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: #0f172a; margin-bottom: 8px; line-height: 1.2; }
.up-leg { padding: 0; }
.up-leg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.up-leg-label { font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #64748b; }
.up-leg-flight { font-size: 12px; color: #64748b; font-variant-numeric: tabular-nums; }
.up-card .tile-timeline { margin: 6px 0 4px; }
.up-card .tl-time { font-size: 15px; }
.up-card .tile-crew { margin-top: 8px; padding-top: 8px; font-size: 12.5px; }
.up-turn { margin: 4px auto; padding: 3px 10px; border-radius: 999px; background: #f4f6fa; color: #64748b; font-size: 12px; font-weight: 600; width: fit-content; }

/* Logbook route map (2026-10-03) */
#logbook-map-container { padding: 0 !important; overflow: hidden; border-radius: 14px !important; border: 0 !important; background: #0b1530 !important; }
.globe-wrap { position: relative; width: 100%; }
.globe-canvas { display: block; width: 100%; touch-action: none; cursor: grab; border-radius: 14px; -webkit-user-select: none; user-select: none; }
.globe-canvas:active { cursor: grabbing; }
.globe-hint { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: rgba(220, 230, 255, .6); pointer-events: none; transition: opacity .6s; }
.globe-hint.gone { opacity: 0; }
.globe-reset { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(160, 190, 255, .35); background: rgba(10, 18, 44, .6); color: #dbe5ff; font-size: 17px; line-height: 1; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

.auth-screen .faceid-btn {
    display: flex; width: 100%; align-items: center; justify-content: center; gap: 10px; margin: 0 0 18px;
    background: rgba(205, 164, 58, 0.14); color: #e6c565; border: 1px solid rgba(205, 164, 58, 0.55);
    border-radius: 14px; padding: 14px 0; font-size: 15px; font-weight: 700; cursor: pointer;
}
.auth-screen .faceid-btn.hidden { display: none; }

/* Admin panel group headings (2026-10-03) */
.admin-group-head { margin: 14px 2px 2px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #6b21a8; opacity: .8; }

/* Admin crew directory + person sheet (2026-10-03) */
.adm-user-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; width: 100%; text-align: left; padding: 12px 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; cursor: pointer; }
.adm-user-name { grid-column: 1; font-weight: 700; font-size: 15px; color: #0f172a; }
.adm-user-meta { grid-column: 1; font-size: 12px; color: #64748b; white-space: pre-line; }
.adm-user-chev { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 22px; color: #94a3b8; }
.admin-sheet { position: fixed; inset: 0; z-index: 95; background: rgba(15, 23, 42, .55); display: flex; align-items: flex-end; justify-content: center; }
.admin-sheet.hidden { display: none; }
.admin-sheet-panel { width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; background: #fff; border-radius: 18px 18px 0 0; padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(0,0,0,.25); }
.admin-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.admin-sheet-name { font-size: 18px; font-weight: 800; color: #0f172a; margin: 0; }
.admin-sheet-meta { font-size: 12px; color: #64748b; margin: 2px 0 0; word-break: break-all; }
.admin-sheet-close { font-size: 28px; line-height: 1; color: #64748b; background: none; border: 0; padding: 0 4px; cursor: pointer; }
.admin-sheet-label { display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #64748b; margin: 6px 0 4px; }
.admin-sheet-select { width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 12px; font-size: 15px; font-weight: 700; background: #fff; }
.admin-sheet-actions { display: grid; gap: 8px; margin-top: 14px; }
.adm-action { min-height: 48px; padding: 0 14px; text-align: left; font-size: 14px; font-weight: 600; color: #0f172a; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; cursor: pointer; }
.adm-action:disabled { opacity: .6; }
.adm-action-danger { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }

/* ===== Flight tile redesign (2026-10-03) =====
   Header (route + flight details + buttons) / horizontal timeline / crew in coloured text.
   Fills the card's width instead of stacking lines down it. */
.flight-card { border-radius: 14px; padding: 13px 15px 12px; box-shadow: 0 1px 6px rgba(15, 23, 71, 0.07); border-color: #e5e9f0; }
.tile-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 10px; }
.tile-head .tile-actions { margin-left: auto; }
.tile-head-main { flex: 1 1 auto; min-width: 0; }
.tile-head .route { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; color: #0f172a; }
.tile-head .flight-info { margin: 3px 0 0; font-size: 12px; color: #64748b; font-variant-numeric: tabular-nums; }
.tile-head .tile-actions { flex-direction: row; gap: 6px; padding-top: 0; }

.tile-timeline { display: flex; align-items: center; gap: 10px; margin: 12px 0 12px; }
.tl-end { display: flex; flex-direction: column; line-height: 1.2; flex: 0 0 auto; }
.tl-end-right { text-align: right; align-items: flex-end; }
.tl-label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: #94a3b8; }
.tl-time { font-size: 17px; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }
.tl-track { flex: 1 1 auto; min-width: 40px; display: flex; flex-direction: column; align-items: stretch; }
.tl-line { position: relative; height: 16px; }
.tl-line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: linear-gradient(90deg, #0f1747, #cda43a); }
.tl-line::after { content: ""; position: absolute; left: -2px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #fff; border: 2px solid #0f1747; box-sizing: border-box; }
.tl-plane { position: absolute; right: -2px; top: 50%; transform: translateY(-52%) ; font-size: 12px; line-height: 1; color: #cda43a; background: #fff; padding-left: 4px; }
.tl-block { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); line-height: 16px; z-index: 1; font-size: 12px; font-weight: 600; color: #64748b; background: #fff; padding: 0 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tile-timeline.no-sta { margin-bottom: 10px; }

.tile-crew { display: grid; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: 3px 10px; padding-top: 10px; border-top: 1px solid #eef1f6; font-size: 13px; line-height: 1.45; }
.tile-crew > div { min-width: 0; overflow-wrap: anywhere; }
.tile-crew .crew-other { color: #334155; }
.flight-card .commission-avg { margin: -4px 0 8px; }

/* Your own flights stand out. */
.flight-card.mine { background: linear-gradient(180deg, #f3f5ff, #ffffff 70%); border: 1.5px solid #1e2f7a; box-shadow: 0 2px 10px rgba(30, 47, 122, 0.16); }
.flight-card.mine .route { color: #0f1747; }
.mine-badge { display: inline-block; margin-bottom: 5px; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #8a6a12; background: #fdf3d4; padding: 2px 8px; border-radius: 999px; }

/* Out of base / scheduled: same layout, quieter flags as small chips. */
.flight-card.out-of-base { border-left: 1px solid #e8c3cb; border-color: #e8c3cb; background-color: #fffafb; }
.flight-card.out-of-base .route { color: #800020; }
.flight-card .out-of-base-badge { display: inline-block; margin-bottom: 5px; padding: 2px 8px; border-radius: 6px; background: #fde8ec; font-size: 12px; }
.flight-card.no-crew-known .tile-head .route { color: #94a3b8; }
.flight-card.no-crew-known .tl-time { color: #94a3b8; }
.flight-card.no-crew-known .tl-line::before { background: #cbd5e1; }
.flight-card.no-crew-known .tl-line::after { border-color: #cbd5e1; }
.route-arrow { color: #cda43a; font-weight: 500; margin: 0 6px; }

/* ===== Logbook: paper-style pages (2026-10-03), after a UK commercial paper logbook ===== */
.lb-ledger { display: flex; flex-direction: column; gap: 16px; }
.lb-page { background: #fff; border: 1px solid #cfd6e2; border-radius: 12px; overflow: hidden; }
.lb-page-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 12px; background: #0f1747; color: #fff; }
.lb-page-title { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.lb-page-sum { font-size: 12px; font-weight: 600; color: #e3c46e; font-variant-numeric: tabular-nums; }

.lb-totals { padding: 8px 12px 9px; background: #f3f5fa; }
.lb-totals-bf { border-bottom: 1px solid #cfd6e2; }
.lb-totals-cf { border-top: 2px solid #0f1747; }
.lb-totals-title { margin-bottom: 5px; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #64748b; }
.lb-cells { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; border: 1px solid #cfd6e2; border-radius: 8px; overflow: hidden; background: #fff; }
.lb-cell { display: flex; flex-direction: column; align-items: center; padding: 5px 2px 6px; border-left: 1px solid #e3e8f0; min-width: 0; }
.lb-cell:first-child { border-left: 0; }
.lb-cell-label { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #64748b; white-space: nowrap; }
.lb-cell-value { margin-top: 1px; font-size: 14px; font-weight: 800; color: #0f1747; font-variant-numeric: tabular-nums; }
.lb-cell-dim .lb-cell-value { color: #c3cbd9; font-weight: 600; }
.lb-grand { display: flex; justify-content: space-between; align-items: baseline; margin-top: 7px; font-size: 12px; font-weight: 700; color: #475569; }
.lb-grand strong { font-size: 15px; color: #0f1747; font-variant-numeric: tabular-nums; }

.lb-entry { padding: 9px 12px 10px; border-top: 1px solid #dfe4ec; }
.lb-entry:nth-of-type(odd) { background: #f6f8fb; }
.lb-top { display: flex; align-items: baseline; gap: 8px; }
.lb-date { font-size: 13px; font-weight: 800; color: #0f1747; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.lb-cap { padding: 1px 7px; border-radius: 6px; font-size: 12px; font-weight: 800; letter-spacing: .04em; background: #e8ecf5; color: #475569; }
.lb-cap-PIC { background: #fdf3d4; color: #8a6a12; }
.lb-total { margin-left: auto; font-size: 17px; font-weight: 800; color: #0f1747; font-variant-numeric: tabular-nums; white-space: nowrap; }

.lb-journey { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.lb-port { display: flex; flex-direction: column; line-height: 1.2; }
.lb-port-right { align-items: flex-end; text-align: right; }
.lb-port-code { font-size: 18px; font-weight: 800; color: #0f172a; letter-spacing: -.005em; }
.lb-port-time { margin-top: 1px; font-size: 13px; font-weight: 600; color: #334155; font-variant-numeric: tabular-nums; }
.lb-track { flex: 1 1 auto; position: relative; height: 14px; text-align: center; font-size: 12px; line-height: 14px; color: #cda43a; }
.lb-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed #b8c2d4; z-index: 0; }
.lb-track { z-index: 0; }
.lb-acars-line { margin-top: 3px; font-size: 12px; color: #64748b; font-variant-numeric: tabular-nums; }

.lb-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 7px; font-size: 12.5px; color: #334155; }
.lb-commander { font-weight: 600; }
.lb-reg { font-size: 12px; font-weight: 700; color: #475569; letter-spacing: .04em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.lb-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-top: 8px; }
.lb-bottom-left { min-width: 0; flex: 1 1 auto; }
.lb-cells-entry { display: grid; grid-auto-flow: column; grid-auto-columns: 78px; flex: 0 0 auto; }
.lb-cells-entry .lb-cell-value { font-size: 15px; }
.lb-remarks { display: flex; gap: 10px; font-size: 12px; color: #64748b; min-width: 0; }
.lb-flt { font-variant-numeric: tabular-nums; }
.lb-crewbox { margin-top: 4px; font-size: 12px; }
.lb-crewbox summary { cursor: pointer; color: #64748b; font-weight: 600; list-style: none; }
.lb-crewbox summary::-webkit-details-marker { display: none; }
.lb-crewbox summary::before { content: "▸ "; }
.lb-crewbox[open] summary::before { content: "▾ "; }
.lb-crewlist { display: grid; gap: 2px; margin-top: 4px; font-weight: 600; }
.lb-entry .logbook-commission-btn { margin-top: 6px; }

/* ===== Logbook statistics (2026-10-03) ===== */
.lbs-heading { margin: 0 0 8px; font-size: 15px; font-weight: 800; color: #0f172a; }
.lbs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lbs-card { background: #f8fafc; border: 1px solid #e5e9f0; border-radius: 12px; padding: 10px 12px; min-width: 0; }
.lbs-wide { grid-column: 1 / -1; }
.lbs-label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #64748b; }
.lbs-value { margin-top: 3px; font-size: 19px; font-weight: 800; color: #0f172a; line-height: 1.2; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.lbs-sub { margin-top: 2px; font-size: 12px; color: #64748b; line-height: 1.35; }
.lbs-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; padding: 6px 0 2px; }
.lbs-row + .lbs-row { border-top: 1px solid #edf0f5; margin-top: 4px; }
.lbs-pos { font-size: 12px; font-weight: 800; color: #b9c2d3; }
.lbs-name { font-size: 14px; font-weight: 700; color: #0f172a; overflow-wrap: anywhere; }
.lbs-meta { font-size: 12px; color: #64748b; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lbs-name.CPT { color: #0056b3; } .lbs-name.FO { color: #16a34a; } .lbs-name.SCCM { color: #d97706; }

/* ===== Logbook: typed-in entries (2026-10-03) ===== */
.lb-extras { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; }
.lb-extras-text { font-size: 12px; font-weight: 600; color: #334155; font-variant-numeric: tabular-nums; }
.lb-add { background: transparent; border: 0; padding: 4px 0; font-size: 12px; font-weight: 700; color: #1e3a8a; cursor: pointer; margin-left: auto; }
.lb-cap-SIM { background: #e0f2fe; color: #075985; }
.lb-entry-sim { background: #f1f8ff; }
.lb-cells-second { margin-top: 6px; }
.lb-cells-second .lb-cell-value { font-size: 13px; }

/* ===== Logbook import (2026-10-03) ===== */
.lbi-card { max-width: 460px; }
.lbi-srcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 4px 0 12px; }
.lbi-src { padding: 10px 4px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: #334155; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.lbi-src.active { background: #0f1747; border-color: #0f1747; color: #fff; }
.lbi-file-btn { display: flex; align-items: center; justify-content: center; text-align: center; }
.lbi-help-link { display: block; margin: 12px auto 0; background: none; border: 0; color: #1e3a8a; font-size: 13px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.lbi-mail { color: #1e3a8a; font-weight: 700; text-decoration: underline; }
.lbi-prev-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #eef1f6; font-size: 12.5px; color: #334155; }
.lbi-summary { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: #0f172a; }
.lbi-preview { margin: 6px 0 10px; padding: 8px 10px; background: #f1f5f9; border-radius: 8px; font-size: 12px; font-variant-numeric: tabular-nums; color: #334155; }
.lbi-prev-flight { white-space: pre-wrap; padding: 2px 0; }
.lbi-opts { display: grid; gap: 8px; margin-top: 8px; }
.lbi-mapping { display: grid; gap: 8px; }
.lbi-map-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; }
.lbi-map-label { font-size: 12.5px; font-weight: 600; color: #334155; }
.lbi-opts .acars-mini { text-align: left; font-size: 12px; font-weight: 700; }
.lb-imp { font-style: italic; opacity: .7; }

/* Flight tracker button (2026-10-03): a link, styled like the other tile buttons */
.tile-actions a.track-flight-btn {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    background: #f1f5f9; border: none; border-radius: 10px; padding: 0; text-decoration: none;
    font-size: 17px; line-height: 1; cursor: pointer; opacity: 0.85;
}
.tile-actions a.track-flight-btn:active { background: #e2e8f0; opacity: 1; }

/* ===== Web layout (2026-10-03) =====
   In a browser (html.is-web) a phone-width screen gets the tab bar at the TOP, as a slim strip, instead of fixed to
   the bottom where Safari's own toolbar already lives (the two fight, and Safari's bars grow and shrink as you
   scroll). Wide screens already get the left-hand rail from the >=800px rule above, which suits a browser too. */
@media screen and (max-width: 799px) {
    html.is-web #bottom-nav {
        top: 0; bottom: auto; border-top: 0; border-bottom: 1px solid #e2e8f0;
        padding-top: env(safe-area-inset-top); padding-bottom: 0;
    }
    html.is-web #bottom-nav .bottom-nav-btn { flex-direction: row; justify-content: center; gap: 6px; min-height: 44px; padding: 4px 2px; }
    html.is-web #bottom-nav .bottom-nav-icon { font-size: 16px; }
    html.is-web #bottom-nav .bottom-nav-label { font-size: 12px; }
    html.is-web #bottom-nav .bottom-nav-btn.active::before { top: auto; bottom: 0; width: 34px; margin-left: -17px; height: 3px; border-radius: 3px 3px 0 0; }
    /* Dark title bar at the very top, white tab strip under it (2026-10-03). On iPhone, Safari colours the area behind
       its own status bar / address bar from whatever fixed bar sits at the top edge and resizes it as its toolbar
       collapses while you scroll. With the white tab strip there, a tall white block grew and shrank above the tabs;
       with the dark title bar there it matches the page's header and reads as part of it. */
    html.is-web #dash-title-bar { top: 0; padding-top: 0; }
    /* No safe-area padding at all in a browser - Safari's own bars handle that, and the inset value changes while you
       scroll, which would resize these bars. */
    html.is-web #dash-title-bar-inner { padding-top: 14px; }
    /* !important: the nav element carries an inline style="padding-bottom: env(safe-area-inset-bottom)" (right for the
       app's bottom bar), which beat the padding-bottom:0 above. On iPhone Safari that inset jumps from 0 to ~34px when
       Safari's bottom toolbar minimises as you scroll, so the strip grew ~34px taller (found from Luke's photos 2026-10-03). */
    html.is-web #bottom-nav { top: var(--web-title-h, 72px); padding-top: 0 !important; padding-bottom: 0 !important; }
    html.is-web .dashboard-container { padding-top: calc(var(--web-title-h, 72px) + 45px + 8px); padding-bottom: 24px; }
}

/* Route globe placeholder on the website (the globe itself is an app feature for now) */
.globe-placeholder { padding: 22px 18px; text-align: center; color: #cfd8f0; }
.globe-placeholder-icon { font-size: 30px; line-height: 1; }
.globe-placeholder-title { margin-top: 6px; font-size: 14px; font-weight: 800; color: #fff; }
.globe-placeholder-text { margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: #aeb9d8; }

/* Wide screens (browser / iPad): the admin action sheet is a centred dialog, not a bottom sheet */
@media screen and (min-width: 800px) {
    .admin-sheet { align-items: center; }
    .admin-sheet-panel { border-radius: 18px; padding-bottom: 20px; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
}

/* Flight status under the timeline line (2026-10-03) */
.tl-status { white-space: pre-line; margin-top: 4px; text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; }
.tl-status[data-s="Departed"] { color: #b45309; }
.tl-status[data-s="Enroute"] { color: #1d6fb8; }
.tl-status[data-s="Landed"] { color: #15803d; }
.tl-status[data-s="Delayed"], .tl-status[data-s="Cancelled"], .tl-status[data-s="Diverted"] { color: #b91c1c; }
.tl-status:empty { display: none; }

/* Flight tiles adapt to the room they are given (2026-10-03). A tile on a phone is ~330px wide and has plenty of
   room; in a narrow column (a small window, an iPad column) the buttons drop below the route and the timeline
   tightens, so nothing overlaps. Uses container queries (every current browser). */
.flight-card { container-type: inline-size; container-name: tile; }
@container tile (max-width: 290px) {
    /* route and buttons share the first row; the flight line runs the full width underneath */
    .tile-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 6px; }
    .tile-head-main { display: contents; }
    .tile-head .route { grid-column: 1; grid-row: 1; font-size: 19px; }
    .tile-head .flight-info { grid-column: 1 / -1; grid-row: 2; }
    .tile-head .tile-actions { grid-column: 2; grid-row: 1; margin: 0; gap: 4px; }
    .tile-actions button, .tile-actions a.track-flight-btn { width: 30px; height: 30px; font-size: 15px; }
    .tile-timeline { gap: 6px; }
    .tl-time { font-size: 14px; }
    .tl-plane { display: none; }
    .tl-block { font-size: 12px; padding: 0 4px; }
    .tile-crew { font-size: 12.5px; }
}
@container tile (max-width: 230px) {
    .tl-block { display: none; }
}

/* Admin panel on wide screens (2026-10-03): use the width - two columns of cards instead of one narrow strip.
   Headings, the header, the base filter and the long tables (crew directory, commission and login logs)
   span both columns. */
@media screen and (min-width: 1000px) {
    #admin-view { max-width: 1240px; grid-template-columns: 1fr 1fr; gap: 12px 16px; align-items: start; }
    #admin-view:not(.hidden) { display: grid !important; }
    #admin-view > * { margin-top: 0 !important; margin-bottom: 0 !important; }
    #admin-view > :first-child, #admin-view > #dash-admin-base-toggle, #admin-view > .admin-group-head, #admin-view > .admin-wide { grid-column: 1 / -1; }
    #admin-view > .admin-group-head { margin: 6px 2px 0 !important; }
}

/* Reset saved data button (2026-10-03): was invisible - it used Tailwind classes (bg-slate-800 / text-white / w-full)
   that this stylesheet build never included, leaving white text on a white card. Plain CSS now. */
.reset-saved-btn { display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: #1e293b; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.reset-saved-btn:active { background: #0f172a; }

/* My flights > Upcoming: swap flag button on a rotation card (2026-10-03) */
.up-title-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 10px; margin-bottom: 8px; }
.up-title-row .up-title { margin-bottom: 0; flex: 1 1 auto; min-width: 0; }
.up-swap-btn { flex: 0 0 auto; margin-left: auto; padding: 5px 10px; border-radius: 999px; border: 1px solid #cbd5e1; background: #f1f5f9; color: #475569; font-size: 12px; font-weight: 700; cursor: pointer; }
.up-swap-btn:active { background: #e2e8f0; }
.up-swap-btn.is-flagged { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.up-swap-btn[disabled] { opacity: .6; cursor: default; }

/* Yesterday on a laptop / iPad (2026-10-03): it used to take a whole 380px day column for one slim bar, leaving a block of
   empty space at the left of the grid. Now it is just a small "Yesterday - show" pill, and only widens to a full column
   while it is open. (Phones are unaffected: there the days are stacked.) */
@media (min-width: 769px) {
    .day-column.yesterday-col { flex: 0 0 auto; min-width: 0; width: 150px; background: transparent; border: 0; overflow: visible; align-self: flex-start; }
    .day-column.yesterday-col .yesterday-summary { border: 1px solid #d5dbe3; border-radius: 8px; }
    .day-column.yesterday-col:has(details[open]) { flex: 0 0 380px; min-width: 380px; width: 380px; background: #e2e8f0; border: 1px solid #cbd5e1; overflow: hidden; }
    .day-column.yesterday-col:has(details[open]) .yesterday-summary { border: 0; border-bottom: 1px solid #d5dbe3; border-radius: 0; }
}

/* ===== My flights > My roster (2026-10-03) ===== */
.mf-seg-btn { padding: 0 4px; }
@media (max-width: 420px) { .mf-seg-btn { font-size: 12.5px; } }
.mr-nav { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 6px; margin-bottom: 4px; }
.mr-nav-btn { height: 44px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; font-size: 24px; font-weight: 700; color: #0f1747; cursor: pointer; }
.mr-nav-mid { text-align: center; }
.mr-month-title { font-size: 17px; font-weight: 800; color: #0f172a; }
.mr-total { font-size: 12px; color: #64748b; }
.mr-today { display: block; margin: 0 auto 12px; background: none; border: 0; font-size: 12px; font-weight: 700; color: #1d4ed8; cursor: pointer; }
.mr-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.mr-chip { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 6px; text-align: center; }
.mr-chip-num { font-size: 24px; font-weight: 800; color: #0f172a; line-height: 1.1; }
.mr-chip-label { font-size: 12px; font-weight: 700; color: #64748b; margin-top: 3px; }
.mr-chip.is-zero { opacity: .55; }
.mr-toggle { width: 100%; min-height: 44px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; font-size: 14px; font-weight: 700; color: #0f172a; cursor: pointer; margin-bottom: 12px; }
.mr-days { display: grid; gap: 6px; margin-bottom: 12px; }
.mr-day { display: grid; grid-template-columns: 46px 1fr; gap: 10px; background: #fff; border: 1px solid #e8ecf2; border-radius: 10px; padding: 8px 10px; }
.mr-day.is-today { border-color: #0f1747; box-shadow: 0 0 0 1px #0f1747; }
.mr-day-head { text-align: center; }
.mr-day-dow { display: block; font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .05em; }
.mr-day-num { display: block; font-size: 20px; font-weight: 800; color: #0f172a; line-height: 1.15; }
.mr-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 3px; }
.mr-badge { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #f1f5f9; color: #475569; }
.mr-badge.mr-flying { background: #dbeafe; color: #1e3a8a; }
.mr-badge.mr-standby { background: #fef3c7; color: #92400e; }
.mr-badge.mr-reserve { background: #ede9fe; color: #5b21b6; }
.mr-badge.mr-training { background: #cffafe; color: #155e75; }
.mr-badge.mr-leave { background: #dcfce7; color: #166534; }
.mr-badge.mr-off { background: #e2e8f0; color: #334155; }
.mr-line { font-size: 13px; color: #0f172a; margin-top: 2px; }
.mr-line.mr-empty { color: #64748b; }
@media screen and (min-width: 800px) { .mr-summary { grid-template-columns: repeat(6, 1fr); } }

/* My roster > Roster changes (premium) */
.mr-hist { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.mr-hist.is-locked { background: #f8fafc; border-style: dashed; }
.mr-hist-title { font-size: 14px; font-weight: 800; color: #0f172a; margin-bottom: 4px; }
.mr-hist-headline { font-size: 14px; font-weight: 800; color: #92400e; margin: 2px 0; }
.mr-hist-text { font-size: 12px; color: #64748b; margin: 2px 0 8px; }
.mr-hist-pick { display: block; margin: 8px 0; }
.mr-hist-pick-label { display: block; font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.mr-hist-select { width: 100%; min-height: 44px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; font-size: 14px; color: #0f172a; padding: 0 10px; }
.mr-hist-viewing { background: #fef3c7; color: #92400e; border-radius: 10px; padding: 8px 10px; font-size: 12px; font-weight: 600; margin: 8px 0; }
.mr-hist-back { display: block; margin-top: 6px; background: none; border: 0; padding: 0; font-size: 12px; font-weight: 800; color: #1d4ed8; cursor: pointer; }
.mr-hist-toggle { width: 100%; min-height: 40px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; font-size: 13px; font-weight: 700; color: #0f172a; cursor: pointer; }
.mr-hist-list { display: grid; gap: 6px; margin-top: 8px; }
.mr-change { display: grid; grid-template-columns: 54px 1fr; gap: 8px; border-top: 1px solid #eef1f6; padding-top: 6px; }
.mr-change-date { font-size: 12px; font-weight: 800; color: #0f172a; }
.mr-change-line { font-size: 12px; color: #64748b; }
.mr-change-line.mr-change-now { color: #0f172a; font-weight: 700; }
.mr-change-times { font-size: 12px; color: #92400e; font-weight: 700; margin-top: 2px; }
.mr-day.is-changed { border-color: #f59e0b; }
.mr-changed-tag { font-size: 12px; font-weight: 800; color: #b45309; margin-top: 3px; }

/* Invite strip above the roster (growth, 2026-10-03) */
.invite-strip { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; margin: 0 0 8px; padding: 4px 2px 4px 10px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 10px; }
.invite-strip-text { flex: 1 1 0; min-width: 0; font-size: 12px; line-height: 1.3; color: #475569; }
.invite-strip-btn { flex: 0 0 auto; min-height: 34px; padding: 0 12px; white-space: nowrap; border: 1px solid #0f1747; border-radius: 8px; background: #0f1747; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.invite-strip-close { flex: 0 0 auto; width: 28px; height: 32px; border: 0; background: none; font-size: 20px; line-height: 1; color: #94a3b8; cursor: pointer; }

/* ---- Logbook redesign (2026-10-03): Entries / Totals, compact rows, detail sheet ------------------------------------ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.lbk-top { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.lbk-seg { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: #e2e8f0; border-radius: 12px; }
.lbk-seg-btn { border: 0; background: none; font: inherit; font-weight: 700; font-size: 13px; padding: 9px; border-radius: 9px; color: #475569; cursor: pointer; min-height: 40px; }
.lbk-seg-btn.active { background: #fff; color: #0f172a; box-shadow: 0 1px 3px rgba(15,23,42,.15); }
.lbk-add-wrap { position: relative; }
.lbk-add { width: 44px; height: 44px; border-radius: 12px; border: 1px solid #0f1747; background: #0f1747; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.lbk-add-menu { position: absolute; right: 0; top: 50px; z-index: 30; min-width: 220px; background: #fff; border: 1px solid #cbd5e1; border-radius: 12px; box-shadow: 0 12px 30px rgba(15,23,42,.2); padding: 6px; display: grid; gap: 2px; }
.lbk-add-menu.hidden { display: none; }
.lbk-add-item { text-align: left; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; padding: 12px; border-radius: 8px; cursor: pointer; color: #0f172a; min-height: 44px; }
.lbk-add-item:active { background: #f1f5f9; }
.lbk-add-item.hidden { display: none; }
.lbk-filters { display: flex; gap: 8px; margin: 0 0 8px; }
.lbk-chip { flex: 1 1 auto; min-height: 40px; border: 1px solid #cbd5e1; background: #fff; border-radius: 10px; padding: 0 10px; font: inherit; font-size: 13px; font-weight: 700; color: #0f172a; cursor: pointer; text-align: left; }
.lbk-chip-select { flex: 2 1 0; }
.lbk-chip:not(.lbk-chip-select) { flex: 0 0 auto; text-align: center; }
.lbk-foot { margin: 10px 2px; font-size: 12px; color: #64748b; }
.lbk-monthbar { background: #0f1747; color: #fff; padding: 9px 14px; display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border-radius: 10px 10px 0 0; margin-top: 10px; }
.lbk-monthbar:first-child { margin-top: 0; }
.lbk-monthbar span:last-child { color: #cda43a; letter-spacing: 0; }
.lbk-list { background: #fff; border: 1px solid #e2e8f0; border-top: 0; border-radius: 0 0 10px 10px; overflow: hidden; }
.lbk-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: start; width: 100%; text-align: left; font: inherit; color: inherit; background: #fff; border: 0; border-bottom: 1px solid #e2e8f0; padding: 10px 12px; cursor: pointer; }
.lbk-row:last-child { border-bottom: 0; }
.lbk-row:nth-child(even) { background: #fbfcfe; }
.lbk-row:active { background: #eef2f9; }
.lbk-row:focus-visible, .lbk-add:focus-visible, .lbk-chip:focus-visible, .lbk-seg-btn:focus-visible { outline: 2px solid #cda43a; outline-offset: 2px; }
.lbk-day { text-align: center; line-height: 1; }
.lbk-day b { display: block; font-size: 25px; font-weight: 800; color: #0f172a; }
.lbk-day small { font-size: 12px; font-weight: 700; color: #64748b; letter-spacing: .04em; text-transform: uppercase; }
.lbk-route { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: #0f172a; }
.lbk-route i { font-style: normal; color: #a97c22; margin: 0 5px; }
.lbk-times { font-size: 12.5px; color: #334155; font-variant-numeric: tabular-nums; margin-top: 1px; }
.lbk-times em { font-style: normal; font-weight: 700; margin: 0 4px; color: #0f172a; }
.lbk-meta { font-size: 12px; color: #64748b; margin-top: 2px; }
.lbk-note { font-size: 12px; color: #334155; margin-top: 2px; }
.lbk-rt { display: grid; gap: 4px; justify-items: end; font-size: 12px; font-weight: 800; }
.lbk-cap { padding: 1px 7px; border-radius: 6px; background: #e8ecf5; color: #475569; letter-spacing: .04em; }
.lbk-cap.pic { background: #fdf3d4; color: #8a6a12; }
.lbk-cap.sim { background: #e0f2fe; color: #075985; }
.lbk-ld { color: #64748b; font-weight: 700; }
.lbk-total { font-size: 13px; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; }
.lbk-tag { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: #0f1747; background: #f5ecd0; border: 1px solid #cda43a; border-radius: 4px; padding: 0 4px; }
.lbk-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.lbk-card > h4 { margin: 0; padding: 10px 12px 4px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #64748b; }
.lbk-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid #e2e8f0; font-size: 14px; min-height: 44px; }
.lbk-card > h4 + .lbk-line { border-top: 0; }
.lbk-line > span:first-child { color: #475569; }
.lbk-line b { font-variant-numeric: tabular-nums; text-align: right; }
.lbk-dual { display: grid; grid-auto-flow: column; gap: 16px; text-align: right; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lbk-dual small { display: block; font-weight: 600; font-size: 12px; color: #64748b; }
.lbk-tot { padding: 11px 12px; border-top: 1px solid #e2e8f0; }
.lbk-tot:first-child { border-top: 0; }
.lbk-tot-l { display: flex; justify-content: space-between; font-size: 14px; }
.lbk-tot-l b { font-variant-numeric: tabular-nums; }
.lbk-tot-s { font-size: 12px; color: #64748b; margin-top: 3px; }
.lbk-bar { height: 8px; border-radius: 99px; background: #e2e8f0; margin-top: 7px; overflow: hidden; }
.lbk-bar > i { display: block; height: 100%; background: #1d4ed8; border-radius: 99px; }
.lbk-bar.warn > i { background: #b45309; }
.lbk-bar.over > i { background: #b91c1c; }
.lbk-actions { padding: 12px; }
.lbk-action { width: 100%; min-height: 44px; border: 1px solid #99f6e4; background: #f0fdfa; color: #0f766e; font: inherit; font-weight: 700; font-size: 14px; border-radius: 10px; cursor: pointer; }
.lbk-sheet { position: fixed; inset: 0; z-index: 60; background: #f8fafc; display: flex; flex-direction: column; max-width: 640px; margin: 0 auto; }
.lbk-sheet.hidden { display: none; }
.lbk-sheet-head { background: #0c1630; color: #fff; padding: max(14px, env(safe-area-inset-top)) 14px 12px; }
.lbk-sheet-top { display: flex; justify-content: space-between; align-items: center; }
.lbk-sheet-top button { border: 0; background: none; color: #8fb4ff; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; min-height: 44px; padding: 0 4px; }
.lbk-sheet-route { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.lbk-sheet-sub { color: #9fb0cf; font-size: 12.5px; margin-top: 2px; }
.lbk-sheet-body { flex: 1; overflow-y: auto; padding: 12px; }
.lbk-sheet-foot { padding: 10px 12px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid #e2e8f0; background: #fff; display: flex; gap: 8px; }
.lbk-save { flex: 1; min-height: 46px; border: 0; border-radius: 12px; background: #0f1747; color: #fff; font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
.lbk-save:disabled { opacity: .4; cursor: default; }
.lbk-sw { width: 50px; height: 30px; border-radius: 99px; background: #cbd5e1; border: 0; position: relative; cursor: pointer; flex: 0 0 auto; }
.lbk-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left .15s; }
.lbk-sw[aria-pressed="true"] { background: #16a34a; }
.lbk-sw[aria-pressed="true"]::after { left: 23px; }
.lbk-step { display: inline-flex; align-items: center; gap: 12px; }
.lbk-step button { width: 36px; height: 36px; border-radius: 10px; border: 1px solid #93a4c8; background: #fff; color: #1d4ed8; font-size: 20px; cursor: pointer; }
.lbk-step b { min-width: 18px; text-align: center; }
.lbk-fill { border: 1px solid #93a4c8; border-radius: 8px; background: #fff; color: #1d4ed8; font: inherit; font-size: 12px; font-weight: 700; padding: 6px 10px; cursor: pointer; min-height: 36px; }
.lbk-input { width: 90px; border: 1px solid #cbd5e1; border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 14px; text-align: right; background: #fff; color: #0f172a; }
.lbk-text { width: 100%; border: 1px solid #cbd5e1; border-radius: 8px; padding: 9px 10px; font: inherit; font-size: 14px; background: #fff; color: #0f172a; }
.lbk-more { width: 100%; border: 0; border-top: 1px solid #e2e8f0; background: none; color: #1d4ed8; font: inherit; font-weight: 700; font-size: 13px; padding: 12px; cursor: pointer; }
.lbk-appr { display: grid; grid-template-columns: 82px 64px 1fr auto; gap: 6px; padding: 8px 12px; border-top: 1px solid #e2e8f0; align-items: center; }
.lbk-appr select, .lbk-appr input { min-width: 0; border: 1px solid #cbd5e1; border-radius: 8px; padding: 7px 6px; font: inherit; font-size: 13px; background: #fff; color: #0f172a; text-transform: uppercase; }
.lbk-appr button { border: 0; background: none; color: #b91c1c; font-size: 18px; cursor: pointer; min-width: 32px; }
.lbk-crew-cpt { color: #1d4ed8; } .lbk-crew-fo { color: #15803d; } .lbk-crew-cc { color: #b45309; }
.lbk-note-hint { font-size: 12px; color: #94a3b8; padding: 0 12px 10px; }
@media (prefers-reduced-motion: reduce) { .lbk-sw::after { transition: none; } }
.lbk-inline { display: inline-flex; align-items: center; gap: 8px; }
.lbk-row { padding-top: 8px; padding-bottom: 8px; }
/* five tabs in the top bar of the phone-sized browser layout (2026-10-03): keep each label on one line */
@media screen and (max-width: 520px) {
    html.is-web #bottom-nav .bottom-nav-btn { gap: 3px; padding: 4px 1px; }
    html.is-web #bottom-nav .bottom-nav-icon { font-size: 14px; }
    html.is-web #bottom-nav .bottom-nav-label { font-size: 12px; white-space: nowrap; }
}

/* Opens-on setting (2026-10-04) */
.home-tab-select { flex: 0 0 auto; min-height: 36px; padding: 0 28px 0 10px; font-size: 14px; font-weight: 600; color: #0f172a; background: #fff; border: 1px solid #cbd5e1; border-radius: 10px; }


/* Pay card footnote (2026-10-05): the pay figures are estimates, and the card now says so. */
.bh-note { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: #cbd5e1; }

/* ===== Accessibility pass (2026-10-05, UX-14 and UX-15) =====
   Text under 18px must reach a 4.5:1 contrast ratio (W3C WCAG 2.2, 1.4.3) and nothing should be smaller than 12px.
   Colours were computed against white: #64748b 4.76, #475569 7.58, #15803d 5.02, #b45309 5.02, #8a6410 5.37, #a97c22 3.75
   (the last only for the big route arrow, which is 22px). Written as overrides at the end so each change is easy to find. */
.FO, .lbs-name.FO { color: #15803d; }
.SCCM, .CC, .lbs-name.SCCM { color: #b45309; }
.tl-label { font-size: 12px; letter-spacing: 0.06em; color: #64748b; }
.tl-block { font-size: 12px; }
.tl-status { font-size: 12px; letter-spacing: 0.06em; color: #64748b; }
.tl-plane { color: #8a6410; }
.route-arrow, .lbk-route i { color: #8a6410; }
.up-turn { color: #475569; }
.mine-badge { font-size: 12px; letter-spacing: 0.06em; }
.flight-card.no-crew-known .tile-head .route, .flight-card.no-crew-known .tl-time { color: #64748b; }
.yesterday-summary .yesterday-hint { font-size: 12px; color: #64748b; }
.invite-strip-close { color: #475569; }
.lbk-note-hint { font-size: 12px; color: #64748b; }
#bottom-nav .bottom-nav-label { font-size: 12px; }
@media screen and (max-width: 520px) {
    html.is-web #bottom-nav .bottom-nav-label { font-size: 12px; }
}
/* Five tabs at 12px do not fit beside their icons in a phone-width browser strip, so the strip shows words only there. */
@media screen and (max-width: 430px) {
    html.is-web #bottom-nav .bottom-nav-icon { display: none; }
}
/* Tailwind size utilities that were under 12px (2026-10-05) */
.yesterday-summary, .yesterday-summary .happy-to-work-btn, .yesterday-summary .yesterday-hint { color: #475569; }
.text-\[10px\], .text-\[11px\] { font-size: 12px; }


/* ===== Tile buttons (2026-10-05, UX-02 and UX-16) =====
   Message, Track and Return are 44px buttons (the size Apple recommends for a tap) with an icon only; the words were tried and
   removed. Each has a spoken name for screen readers. The flight line (callsign, aircraft) runs the full width under the route. */
.tile-actions { gap: 4px; }
.tile-actions button.tile-act, .tile-actions a.tile-act {
    width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center;
    background: #f1f5f9; border: 0; border-radius: 12px; opacity: 1; text-decoration: none; cursor: pointer; font-size: 20px; line-height: 1;
}
.tile-act .ta-icon { font-size: 20px; line-height: 1; }
.tile-actions .return-info-btn .ta-icon { font-size: 21px; font-weight: 800; color: #0f1747; }
.tile-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 8px; }
.tile-head-main { display: contents; }
.tile-head .route { grid-column: 1; grid-row: 1; align-self: center; }
.tile-head .flight-info { grid-column: 1 / -1; grid-row: 2; }
.tile-head .return-badge { grid-column: 1 / -1; grid-row: 3; }
.tile-head .tile-actions { grid-column: 2; grid-row: 1; margin: 0; }

/* ===== Roster toolbar (2026-10-05, UX-01 and UX-08) ===== */
.roster-toolbar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.roster-view-chips {
    flex: 1 1 auto; min-width: 0; display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
}
.roster-view-chips::-webkit-scrollbar { display: none; }
.rv-chip {
    flex: 0 0 auto; min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; color: #334155; font-size: 14px; font-weight: 700; cursor: pointer;
}
.rv-chip.active { background: #0f1747; border-color: #d4a017; box-shadow: 0 0 0 1px #d4a017; color: #fff; }
.rv-chip.hint { border-style: dashed; color: #475569; background: transparent; }
.title-action { margin-left: 6px; padding: 0; border: 0; background: none; color: #cda43a; font-size: 12px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.rv-chip-count { min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #d4a017; color: #0f1747; font-size: 12px; font-weight: 800; }
.roster-date-toggle {
    flex: 0 0 auto; min-width: 52px; min-height: 44px; padding: 0 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: 1px solid #cbd5e1; border-radius: 12px; background: #fff; font-size: 18px; line-height: 1; cursor: pointer;
}
.roster-date-toggle .rdt-label { font-size: 12px; font-weight: 700; color: #475569; }
.roster-date-toggle[aria-expanded="true"] { background: #fdf3d4; border-color: #d4a017; }
/* the invite strip is one line now: a short sentence and a short button */
.invite-strip { padding: 4px 4px 4px 12px; }
.invite-strip-text { font-size: 13px; }
.invite-strip-btn { min-height: 44px; }
.invite-strip-close { min-width: 44px; height: 44px; }

/* "Open to swap?" pill on your own flights (2026-10-05, UX-21) */
.tile-swap-row { margin-top: 10px; display: flex; }
.swap-toggle-btn.swap-pill {
    min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid #d4a017; border-radius: 999px; background: #fff; color: #8a6410; font-size: 14px; font-weight: 700; text-align: center;
}
.swap-toggle-btn.swap-pill.is-flagged { background: #fdf3d4; color: #7a5a0e; }
.swap-toggle-btn.swap-pill:active { background: #fdf3d4; }

/* ===== App dialog (2026-10-05, UX-03): js/dialog.js replaces the browser's own alert, confirm and prompt boxes ===== */
#app-dialog-host { position: relative; z-index: 100000; }
.dlg-overlay {
    position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(8, 12, 36, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom));
}
.dlg-overlay.has-input { align-items: flex-start; padding-top: max(14vh, env(safe-area-inset-top)); } /* leaves room for the phone keyboard */
.dlg-box {
    width: 100%; max-width: 380px; max-height: 80vh; overflow: auto; background: #fff; color: #0f172a; border-radius: 18px;
    padding: 20px 20px 16px; box-shadow: 0 18px 48px rgba(8, 12, 36, 0.35); border-top: 4px solid #d4a017;
}
.dlg-title { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: #0f1747; }
.dlg-message { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: #334155; white-space: pre-line; overflow-wrap: anywhere; }
.dlg-input {
    width: 100%; margin: 0 0 14px; padding: 12px 14px; font: inherit; font-size: 16px; color: #0f172a; background: #f8fafc;
    border: 1.5px solid #cbd5e1; border-radius: 12px; resize: vertical;
}
.dlg-input:focus { outline: none; border-color: #d4a017; background: #fff; }
.dlg-buttons { display: flex; gap: 10px; justify-content: flex-end; }
.dlg-btn {
    min-height: 44px; min-width: 96px; padding: 0 18px; border-radius: 12px; border: 1.5px solid #cbd5e1; background: #fff;
    color: #334155; font-size: 15px; font-weight: 700; cursor: pointer;
}
.dlg-btn.primary { background: #0f1747; border-color: #0f1747; color: #fff; }
.dlg-btn.primary.danger { background: #b91c1c; border-color: #b91c1c; }
.dlg-btn:focus-visible { outline: 3px solid #d4a017; outline-offset: 2px; }
.dlg-toast-tray {
    position: fixed; left: 0; right: 0; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 100001; display: flex; flex-direction: column;
    align-items: center; gap: 8px; pointer-events: none; padding: 0 16px;
}
html.is-web .dlg-toast-tray { bottom: calc(24px + env(safe-area-inset-bottom)); }
.dlg-toast {
    max-width: 420px; padding: 12px 18px; border-radius: 999px; background: #0f1747; color: #fff; font-size: 14px; font-weight: 700;
    border: 1.5px solid #d4a017; box-shadow: 0 8px 24px rgba(8, 12, 36, 0.3); transition: opacity .3s ease, transform .3s ease;
}
.dlg-toast.leaving { opacity: 0; transform: translateY(6px); }
@media (prefers-reduced-motion: reduce) { .dlg-toast { transition: none; } }

/* ===== More UX fixes (2026-10-05, T-80) ===== */
/* Settings > Tracker: keep the icon and the word on one line (UX-13) */
.settings-time-title { white-space: nowrap; }
/* "Go to date" bar: the date on its own full row, the two quick buttons under it (three controls did not fit one row) */
.goto-date-bar { flex-wrap: wrap; }
.goto-date-input { flex: 1 1 160px; min-width: 0; }
.goto-date-bar .goto-today-btn { flex: 1 1 0; min-height: 44px; }
/* Phone: the collapsed "Yesterday" row above the roster is hidden until it is opened from the date bar (UX-08) */
@media screen and (max-width: 799px) {
    .day-column.yesterday-col:not(:has(details[open])) { display: none; }
}
#goto-yesterday-btn { background: #fff; color: #0f1747; border: 1.5px solid #cbd5e1; }
/* Swaps tab: "Your flags" section (2026-10-05, UX-07) */
.swap-section-label { margin: 14px 2px 4px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #475569; }
.swap-section-label:first-child { margin-top: 2px; }
.swap-unflag-btn { min-height: 44px; padding: 0 16px; border: 1.5px solid #fecaca; border-radius: 12px; background: #fef2f2; color: #b91c1c; font-size: 14px; font-weight: 700; cursor: pointer; }
.swap-unflag-btn:disabled { opacity: .6; }


/* Sign-up: a visible "How do I find it?" and a Paste button for the calendar link (UX-18) */
.ics-help-link { min-height: 44px; padding: 0 4px; background: none; border: 0; color: #0369a1; font-size: 13px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.ics-field-row { display: flex; gap: 8px; align-items: stretch; }
.ics-field-row input { flex: 1 1 auto; min-width: 0; }
.ics-paste-btn { flex: 0 0 auto; min-height: 44px; padding: 0 16px; border-radius: 8px; border: 1.5px solid #0f1747; background: #fff; color: #0f1747; font-size: 14px; font-weight: 700; cursor: pointer; }

/* Waiting for approval: what the app is, so the wait has something in it (UX-17) */
.pending-preview { text-align: left; margin: 0 0 16px; padding: 12px 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(205, 164, 58, 0.45); border-radius: 12px; }
.pending-preview h3 { margin: 0 0 8px; font-size: 14px; font-weight: 800; color: #fff; }
.pending-preview ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pending-preview li { font-size: 13px; line-height: 1.4; color: #e2e8f0; }

/* Desktop: My flights Overview in two columns on a wide window (UX-10) */
@media screen and (min-width: 1100px) {
    #my-flights-view { max-width: 1040px; }
    #mf-pane-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 16px; align-items: start; }
    #mf-pane-overview > #roster-change-banner, #mf-pane-overview > .mf-actions { grid-column: 1 / -1; }
    #mf-pane-overview > #next-duty-card { grid-column: 1; }
    #mf-pane-overview > #block-hours-summary { grid-column: 2; grid-row: 2 / span 2; }
    #mf-pane-overview > #invite-strip { grid-column: 1; }
}

/* ---- New swap message marker (2026-10-05), see js/message-marker.js ---- */
.nav-badge {
    display: inline-block; margin-left: 4px; vertical-align: middle; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: #b91c1c; color: #fff; font-size: 12px; font-weight: 800;
    line-height: 18px; text-align: center; box-sizing: border-box;
}
.nav-badge.hidden { display: none; }
.msg-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 10px 14px; border-radius: 10px; background: #e0f2fe; border: 1px solid #7dd3fc; color: #0c4a6e;
}
.msg-banner.hidden { display: none; }
.msg-banner-text { margin: 0; font-size: 14px; font-weight: 700; }
.msg-banner-actions { display: flex; align-items: center; gap: 8px; }
.msg-banner-open {
    min-height: 36px; padding: 0 16px; border: 0; border-radius: 8px; background: #0369a1; color: #fff;
    font-size: 14px; font-weight: 700; cursor: pointer;
}
.msg-banner-close {
    min-width: 36px; min-height: 36px; border: 0; background: transparent; color: #0369a1;
    font-size: 22px; font-weight: 700; cursor: pointer; line-height: 1;
}
.msg-new-dot {
    display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
    background: #b91c1c; color: #fff; font-size: 12px; font-weight: 800;
}

/* ---- Swaps | Messages and group conversations (2026-10-05, T-98), see js/crew-threads.js ---- */
.sw-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; margin: 0 0 14px; padding: 3px; background: #e2e8f0; border-radius: 10px; }
.sw-seg-btn { min-height: 40px; padding: 0 4px; border: 0; border-radius: 8px; background: transparent; font-size: 14px; font-weight: 600; color: #475569; cursor: pointer; }
.sw-seg-btn.active { background: #fff; color: #0f1747; font-weight: 800; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12); }
.thread-row { display: block; width: 100%; padding: 10px 12px; text-align: left; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; cursor: pointer; }
.thread-row-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.thread-row-title { font-size: 14px; font-weight: 800; color: #0f1747; }
.thread-row-when { flex: 0 0 auto; font-size: 12px; color: #64748b; }
.thread-row-who { margin-top: 2px; font-size: 12px; color: #475569; }
.thread-row-last { margin-top: 4px; font-size: 13px; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-bubble { max-width: 82%; padding: 8px 12px; border-radius: 12px; font-size: 14px; line-height: 1.4; word-wrap: break-word; }
.thread-bubble.mine { margin-left: auto; background: #0369a1; color: #fff; border-bottom-right-radius: 4px; }
.thread-bubble.theirs { margin-right: auto; background: #e2e8f0; color: #0f172a; border-bottom-left-radius: 4px; }
.thread-bubble-who { margin-bottom: 2px; font-size: 12px; font-weight: 800; color: #475569; }
.thread-hidden-note { margin: 4px 0; text-align: center; font-size: 12px; color: #64748b; }
.thread-actions { display: flex; gap: 6px; padding: 6px 12px; border-top: 1px solid #e2e8f0; background: #fff; }
.thread-action { min-height: 36px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #334155; font-size: 13px; font-weight: 700; cursor: pointer; }
.thread-action.danger { margin-left: auto; color: #b91c1c; border-color: #fecaca; }
.thread-people { padding: 10px 12px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; max-height: 34vh; overflow-y: auto; }
.thread-people-note { margin: 0 0 8px; font-size: 12px; color: #64748b; }
.thread-person { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 14px; color: #0f172a; }
.thread-person-btn { min-height: 36px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #334155; font-size: 13px; font-weight: 700; cursor: pointer; }

/* ---- Settings > How To (2026-10-05), see js/howto.js ---- */
.howto-list { display: flex; flex-direction: column; gap: 8px; }
.howto-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 12px; text-align: left; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; cursor: pointer; }
.howto-row-icon { flex: 0 0 auto; font-size: 22px; line-height: 1; }
.howto-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.howto-row-title { font-size: 14px; font-weight: 800; color: #0f1747; }
.howto-row-blurb { font-size: 12px; color: #64748b; line-height: 1.3; }
.howto-row-steps { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #0369a1; }
.howto-box { display: flex; flex-direction: column; width: 100%; max-width: 420px; max-height: 94vh; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px rgba(2, 6, 23, 0.45); }
.howto-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; background: #0f1747; color: #fff; }
.howto-head-title { margin: 0; font-size: 16px; font-weight: 800; }
.howto-head-kicker { margin: 2px 0 0; font-size: 12px; color: #a8b3d6; }
.howto-close { flex: 0 0 auto; min-width: 44px; min-height: 44px; border: 0; background: none; color: #cbd5e1; font-size: 28px; line-height: 1; cursor: pointer; }
.howto-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; }
.howto-track::-webkit-scrollbar { display: none; }
.howto-slide { flex: 0 0 100%; scroll-snap-align: center; box-sizing: border-box; padding: 12px 16px 8px; overflow-y: auto; }
.howto-img { display: block; width: 100%; max-width: 300px; margin: 0 auto 12px; border: 1px solid #e2e8f0; border-radius: 14px; background: #f1f5f9; min-height: 120px; }
.howto-img.missing { visibility: hidden; min-height: 0; height: 0; margin: 0; }
.howto-step-title { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: #0f1747; text-align: center; }
.howto-step-text { margin: 0; font-size: 14px; line-height: 1.5; color: #334155; text-align: center; }
.howto-dots { display: flex; justify-content: center; gap: 8px; padding: 6px 0 2px; }
.howto-dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: #cbd5e1; cursor: pointer; }
.howto-dot.on { background: #0f1747; width: 22px; border-radius: 6px; }
.howto-foot { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px 14px; }
.howto-btn { min-height: 44px; min-width: 96px; padding: 0 18px; border: 1.5px solid #cbd5e1; border-radius: 12px; background: #fff; color: #334155; font-size: 15px; font-weight: 700; cursor: pointer; }
.howto-btn.primary { background: #0f1747; border-color: #0f1747; color: #fff; }
.howto-btn:disabled { opacity: .35; cursor: default; }
@media (prefers-reduced-motion: reduce) { .howto-track { scroll-behavior: auto; } }

.roster-manage-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 10px; border: 1px solid #cbd5e1; border-radius: 12px; background: #fff; color: #334155; font-size: 14px; font-weight: 700; cursor: pointer; }
.roster-manage-btn.hidden { display: none; }
.roster-manage-btn .rmb-label { font-size: 13px; }