/*
 * Crew shell — the rebuilt Home/Schedule/Trade/Reserve/Alerts pages.
 *
 * The palette is deliberately the same one the Android widget uses (values/widget_colors.xml and its
 * values-night twin), so the app and the home-screen widget read as one product. Dark values track
 * MudBlazor's dark mode via the .mud-theme-dark class the theme provider puts on the body, and the
 * Cockpit (EFIS) theme keeps its own amber-on-black treatment.
 */

:root {
    --crew-surface: #FFFFFF;
    --crew-card: #F8FAFC;
    --crew-line: #E2E8F0;
    --crew-summary: #F1F5F9;

    --crew-ink: #1E293B;
    --crew-ink-2: #475569;
    --crew-ink-3: #64748B;
    --crew-ink-4: #94A3B8;
    --crew-on-filled: #FFFFFF;

    --crew-accent: #059669;
    --crew-accent-bg: #ECFDF5;
    --crew-track: #E2E8F0;
    --crew-track-release: #A7F3D0;

    --crew-amber: #B45309;
    --crew-amber-bg: #FFF7ED;
    --crew-amber-line: #F59E0B;

    --crew-blue: #1D4ED8;
    --crew-blue-bg: #EFF6FF;
    --crew-blue-line: #3B82F6;

    --crew-red: #B91C1C;
    --crew-red-bg: #FEF2F2;
    --crew-red-line: #EF4444;

    --crew-tail: #1976D2;
    --crew-map: #F1F5F9;
    --crew-grat: #E2E8F0;
    --crew-route: #CBD5E1;
}

.mud-theme-dark {
    --crew-surface: #12161C;
    --crew-card: #1B2129;
    --crew-line: #2A323D;
    --crew-summary: #1B2129;

    --crew-ink: #E6EDF3;
    --crew-ink-2: #AEB9C6;
    --crew-ink-3: #98A3B1;
    --crew-ink-4: #7D8896;
    --crew-on-filled: #0B1016;

    --crew-accent: #34D399;
    --crew-accent-bg: #10301F;
    --crew-track: #2A323D;
    --crew-track-release: #15503C;

    --crew-amber: #FBBF24;
    --crew-amber-bg: #3A2A12;
    --crew-amber-line: #B4780F;

    --crew-blue: #93C5FD;
    --crew-blue-bg: #16243B;
    --crew-blue-line: #3B6FB8;

    --crew-red: #FCA5A5;
    --crew-red-bg: #3A1616;
    --crew-red-line: #B44141;

    --crew-tail: #6BB6FF;
    --crew-map: #161C23;
    --crew-grat: #232B35;
    --crew-route: #3A434F;
}

/* ── duty strip ─────────────────────────────────────────────────────────── */

/* Rides directly on top of #footer-bar (fixed, bottom 0, min-height 60px, z-index 98) rather than
   sitting in normal flow, where it would only appear once the page was scrolled to the very end. */
.cmt-duty-strip {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 60px;
    z-index: 97;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: var(--crew-accent);
    cursor: pointer;
    user-select: none;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .10);
}

.cmt-duty-strip--onduty { background: var(--crew-amber-line); }

.cmt-duty-strip__label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .3px;
    color: #fff;
    opacity: .93;
}

.cmt-duty-strip__value {
    margin-left: auto;
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/* ── page scaffolding ───────────────────────────────────────────────────── */

.crew-page { padding-bottom: 12px; }

.crew-greeting { font-size: 1.25rem; font-weight: 600; color: var(--crew-ink); line-height: 1.2; }
.crew-subtle { font-size: .78rem; color: var(--crew-ink-3); }

.crew-panel {
    background: var(--crew-surface);
    border: 1px solid var(--crew-line);
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 10px;
}

.crew-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--crew-ink-3);
}

/* day navigation */
.crew-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }

.crew-nav__btn {
    width: 52px; height: 40px;
    border: 1px solid var(--crew-line);
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    color: var(--crew-ink-2);
    font-size: 1.15rem; font-weight: 700;
    background: var(--crew-surface);
    flex: none;
}

.crew-nav__btn:disabled { color: var(--crew-ink-4); opacity: .5; }

.crew-nav__label {
    flex: 1; text-align: center;
    font-size: .7rem; font-weight: 700; letter-spacing: .4px;
    color: var(--crew-ink-3);
}

/* A day the pilot stepped to that holds no duty. Sized so the panel keeps roughly the height of a
   populated one, which stops the page jumping as the arrows walk across a run of days off. */
.crew-empty {
    display: flex; align-items: center; justify-content: center;
    min-height: 92px;
    font-size: .8rem; font-weight: 700; letter-spacing: .4px;
    color: var(--crew-ink-4);
}

/* hero */
.crew-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.crew-hero__date { font-size: 1.7rem; font-weight: 700; color: var(--crew-ink); line-height: 1; }
.crew-hero__label { font-size: .62rem; font-weight: 700; letter-spacing: .4px; color: var(--crew-ink-3); text-align: right; }
.crew-hero__value {
    font-size: 1.4rem; font-weight: 700; line-height: 1.15; text-align: right;
    color: var(--crew-accent); font-variant-numeric: tabular-nums;
}
.crew-hero__value--onduty { color: var(--crew-amber); }

/* duty bar */
/* Rolling-limit severity on the FAR 117 page. Amber from 80% of the limit, red at it — enough to be
   read at a glance without pretending to be the legality check, which Far117Limits.Validate owns. */
.crew-warn { color: var(--crew-amber); }
.crew-danger { color: var(--crew-red); }
.crew-bar > i.warn { background: var(--crew-amber-line); }
.crew-bar > i.danger { background: var(--crew-red-line); }

/* The three FDP extension options. Kept on one row and allowed to shrink rather than wrap: this sits
   directly under the duty bar, and a wrapped third button reads as a separate control. */
.crew-ext { display: flex; gap: 4px; flex-wrap: nowrap; }
.crew-ext .mud-button-root { min-width: 0; padding: 2px 10px; font-size: 12px; }

/* Duty figures with the FDP extension button on their right, centred against both lines rather than
   against the progress bars below them: the button acts on the numbers, not on the whole panel. */
.crew-duty { display: flex; align-items: center; gap: 8px; }
.crew-duty__rows { flex: 1 1 auto; min-width: 0; }
.crew-duty__action { flex: 0 0 auto; display: flex; align-items: center; cursor: default; }

.crew-bar { height: 8px; border-radius: 4px; background: var(--crew-track); overflow: hidden; margin: 3px 0; }
.crew-bar > i { display: block; height: 100%; border-radius: 4px; background: var(--crew-accent); }
.crew-bar > i.onduty { background: var(--crew-amber-line); }
.crew-bar--marker { height: 3px; border-radius: 2px; }
.crew-bar--marker > i { background: var(--crew-track-release); border-radius: 2px; }

.crew-row { display: flex; justify-content: space-between; font-size: .7rem; }
.crew-accent { color: var(--crew-accent); font-weight: 700; }
.crew-muted { color: var(--crew-ink-3); }
.crew-tail { color: var(--crew-tail); font-weight: 700; }

/* facts strip */
.crew-facts { display: flex; border-top: 1px solid var(--crew-line); margin-top: 9px; padding-top: 8px; }
.crew-fact { flex: 1; text-align: center; }
.crew-fact__k { font-size: .62rem; font-weight: 700; letter-spacing: .3px; color: var(--crew-ink-3); }
.crew-fact__v { font-size: .88rem; font-weight: 700; color: var(--crew-ink); font-variant-numeric: tabular-nums; }
.crew-fact__v--blue { color: var(--crew-tail); }
.crew-fact__v--accent { color: var(--crew-accent); }

/* timeline */
.crew-timeline { position: relative; padding-left: 20px; margin-top: 4px; }
.crew-timeline::before {
    content: ""; position: absolute; left: 5px; top: 9px; bottom: 9px;
    width: 2px; background: var(--crew-line);
}

.crew-ev { position: relative; padding: 5px 0; }
.crew-ev::before {
    content: ""; position: absolute; left: -18px; top: 9px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--crew-surface); border: 2px solid var(--crew-line); box-sizing: border-box;
}
.crew-ev--done::before { background: var(--crew-accent); border-color: var(--crew-accent); }
.crew-ev--active::before {
    background: var(--crew-amber-bg); border-color: var(--crew-amber-line);
    box-shadow: 0 0 0 3px var(--crew-amber-bg);
}
.crew-ev--air::before {
    background: var(--crew-blue-bg); border-color: var(--crew-blue-line);
    box-shadow: 0 0 0 3px var(--crew-blue-bg);
}

.crew-ev__r1 { display: flex; align-items: center; gap: 6px; }
.crew-ev__flight { font-size: .9rem; font-weight: 700; color: var(--crew-ink); font-variant-numeric: tabular-nums; }
.crew-ev__route { font-size: .78rem; color: var(--crew-ink-2); }
.crew-ev__r2 { font-size: .68rem; color: var(--crew-ink-4); margin-top: 1px; }
.crew-ev__term { font-size: .62rem; font-weight: 700; letter-spacing: .4px; color: var(--crew-ink-3); }
.crew-ev--flown .crew-ev__flight,
.crew-ev--flown .crew-ev__route,
.crew-ev--flown .crew-ev__r2 { text-decoration: line-through; color: var(--crew-ink-4); }

.crew-turn { font-size: .62rem; color: var(--crew-blue); letter-spacing: .2px; padding: 1px 0; }

/* chips */
.crew-chip {
    font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 10px;
    white-space: nowrap; font-variant-numeric: tabular-nums; border: 1px solid transparent;
}
.crew-chip--right { margin-left: auto; }
.crew-chip--amber { background: var(--crew-amber-bg); color: var(--crew-amber); border-color: var(--crew-amber-line); }
.crew-chip--blue { background: var(--crew-blue-bg); color: var(--crew-blue); border-color: var(--crew-blue-line); }
.crew-chip--blue-filled { background: var(--crew-blue-line); color: #fff; border-color: var(--crew-blue-line); }
.crew-chip--green { background: var(--crew-accent-bg); color: var(--crew-accent); border-color: var(--crew-accent); }
.crew-chip--green-filled { background: var(--crew-accent); color: #fff; border-color: var(--crew-accent); }
.crew-chip--red { background: var(--crew-red-bg); color: var(--crew-red); border-color: var(--crew-red-line); }

/* Sim is the one chip colour with no theme variable behind it, because it is the only place violet is
   used. Kept in the same family as .crew-cal__bar--sim so the chip and the calendar bar agree. */
.crew-chip--violet { background: #F3EFFB; color: #6D4FB3; border-color: #C9B8EB; }
.mud-theme-dark .crew-chip--violet { background: #241C33; color: #B79BEB; border-color: #4A3A6B; }

/* weather dot */
.crew-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: 2px; }

/* metric tiles */
.crew-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 9px; }
.crew-tile {
    background: var(--crew-surface); border: 1px solid var(--crew-line);
    border-radius: 12px; padding: 10px;
}
.crew-tile__k { font-size: .64rem; font-weight: 700; letter-spacing: .4px; color: var(--crew-ink-3); }
.crew-tile__v { font-size: 1.25rem; font-weight: 700; color: var(--crew-ink); font-variant-numeric: tabular-nums; line-height: 1.25; }
.crew-tile__s { font-size: .64rem; color: var(--crew-ink-4); }
.crew-mini { height: 5px; border-radius: 3px; background: var(--crew-track); overflow: hidden; margin-top: 5px; }
.crew-mini > i { display: block; height: 100%; border-radius: 3px; background: var(--crew-accent); }

/* Anchor line under the limit tiles. Tucked up against them so it reads as their caption rather
   than a heading for whatever follows. */
.crew-tiles__asof {
    margin: -5px 0 9px;
    font-size: .6rem; font-weight: 700; letter-spacing: .4px;
    color: var(--crew-ink-4);
}

/* route map */
.crew-map { border-radius: 12px; overflow: hidden; border: 1px solid var(--crew-line); background: var(--crew-map); }
.crew-map svg { display: block; width: 100%; height: auto; }
.crew-map__legend {
    display: flex; gap: 10px; justify-content: center;
    padding: 6px 0 2px; font-size: .62rem; color: var(--crew-ink-4);
}

/* Cockpit (EFIS) keeps its own identity rather than inheriting the light palette. */
.theme-cockpit {
    --crew-surface: #0A0E0A;
    --crew-card: #101610;
    --crew-line: #1E2A1E;
    --crew-summary: #101610;
    --crew-ink: #D8E6D8;
    --crew-ink-2: #9FB89F;
    --crew-ink-3: #7E947E;
    --crew-ink-4: #62755F;
    --crew-accent: #35D62F;
    --crew-accent-bg: #0E2A0C;
    --crew-track: #1E2A1E;
    --crew-track-release: #17441A;
    --crew-amber: #FFC400;
    --crew-amber-bg: #2E2400;
    --crew-amber-line: #C39A00;
    --crew-map: #0D120D;
    --crew-grat: #1A231A;
    --crew-route: #33452F;
}

/* Raw METAR/TAF, shown only when the pilot asks for it. */
.crew-raw {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .64rem;
    line-height: 1.55;
    color: var(--crew-ink-2);
    background: var(--crew-summary);
    border: 1px solid var(--crew-line);
    border-radius: 9px;
    padding: 8px;
    word-break: break-word;
    white-space: pre-wrap;
}

/* Compact page-summary strip.
   Replaces the full card used for the four headline numbers on Schedule and Trade. Those cards rendered
   far taller than their content on device; this is a single flex row with its own height, so it cannot
   stretch regardless of what the surrounding grid does. */
.crew-summary-strip {
    display: flex;
    align-items: center;
    background: var(--crew-surface);
    border: 1px solid var(--crew-line);
    border-radius: 12px;
    padding: 8px 4px;
    margin-bottom: 10px;
    height: 52px;
    box-sizing: border-box;
    overflow: hidden;
}

.crew-summary-strip > div {
    flex: 1;
    min-width: 0;
    text-align: center;
    line-height: 1.15;
}

.crew-summary-strip .k {
    display: block;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--crew-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crew-summary-strip .v {
    display: block;
    font-size: .92rem;
    font-weight: 700;
    color: var(--crew-ink);
    font-variant-numeric: tabular-nums;
}

.crew-summary-strip .v.accent { color: var(--crew-accent); }
.crew-summary-strip .v.blue { color: var(--crew-tail); }

/* NOTE: this file deliberately does NOT define .crew-card. That class belongs to the classic
   components (Tab_Home, OpenTime lists, UserFlight) and is styled by trip-trade-simulator.css, which
   sets text-align:center and min-height:160px on it. The crew pages use .crew-panel so the two do not
   bleed into each other -- that collision is what put ~100px of dead space under every crew card and
   centred their empty-state text. */

/* ── month calendar with spanning trip bars ─────────────────────────────── */

.crew-cal { margin-bottom: 10px; }

.crew-cal__head {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 3px;
}

.crew-cal__dow {
    text-align: center;
    font-size: .6rem;
    font-weight: 700;
    color: var(--crew-ink-3);
}

/* A bar hangs directly under the week it belongs to, so the gap inside a week has to stay much tighter
   than the gap between weeks -- otherwise a bar reads as belonging to the row beneath it. */
.crew-cal__week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: min-content;
    column-gap: 2px;
    row-gap: 2px;
    margin-bottom: 9px;
}

.crew-cal__day {
    grid-row: 1;
    min-height: 26px;
    border-radius: 6px;
    text-align: center;
    font-size: .72rem;
    font-weight: 600;
    color: var(--crew-ink);
    padding-top: 3px;
    border: 1px solid transparent;
}

.crew-cal__day--outside { color: var(--crew-ink-4); opacity: .5; }

/* Today gets a ring; the selected day gets filled. Both need to read at arm's length on a phone, so
   neither can rely on a hairline border or a near-white tint against a white card. */
.crew-cal__day--today {
    box-shadow: inset 0 0 0 2px var(--crew-tail);
    color: var(--crew-tail);
    font-weight: 800;
}

.crew-cal__day--selected {
    background: var(--crew-accent);
    box-shadow: none;
    color: #fff;
    font-weight: 800;
}

/* A trip reads as one continuous bar across the days it covers, rather than a
   separate mark per day, so the shape of a 3-day trip is obvious at a glance. */
.crew-cal__bar {
    height: 15px;
    border-radius: 4px;
    font-size: .58rem;
    font-weight: 700;
    line-height: 15px;
    padding: 0 5px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.crew-cal__bar--trip { background: var(--crew-accent); }
.crew-cal__bar--reserve { background: var(--crew-tail); }
.crew-cal__bar--alpa { background: #B4413F; }
.crew-cal__bar--sick { background: var(--crew-red-line); }
.crew-cal__bar--sim { background: #7C5CBF; }
.crew-cal__bar--vacation { background: #0E9F6E; }

/* A second kind riding on a bar — a sick code on a trip day. A dot, not a second bar: the day is still
   fundamentally the trip, and a stacked bar would read as two separate commitments. */
.crew-cal__mark {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9);
}

.crew-cal__mark--sick { background: #EF4444; }
.crew-cal__mark--alpa { background: #B4413F; }
.crew-cal__mark--sim { background: #7C5CBF; }
.crew-cal__mark--vacation { background: #0E9F6E; }
.crew-cal__mark--other { background: #64748B; }
.crew-cal__bar--other { background: var(--crew-ink-3); }

/* continuation edges: square where the bar runs into the next week */
.crew-cal__bar--contl { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.crew-cal__bar--contr { border-top-right-radius: 0; border-bottom-right-radius: 0; }


/* ── reserve coverage rows ──────────────────────────────────────────────── */

/* R / O / NET. The row is tinted rather than just the net, so a run of short days is visible while
   scrolling without reading a single number. */
.crew-cov {
    display: grid;
    grid-template-columns: 1fr 42px 42px 52px;
    align-items: center;
    gap: 4px;
    padding: 7px 8px;
    border-radius: 7px;
    margin-bottom: 3px;
    font-size: .82rem;
}

.crew-cov--head {
    padding: 2px 8px;
    margin-bottom: 4px;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--crew-ink-3);
}

.crew-cov__d { font-weight: 600; color: var(--crew-ink); }
.crew-cov__n { text-align: center; font-variant-numeric: tabular-nums; color: var(--crew-ink-2); }
.crew-cov__n--net { font-weight: 700; }

.crew-cov--ok { background: var(--crew-accent-bg); }
.crew-cov--ok .crew-cov__n--net { color: var(--crew-accent); }

.crew-cov--short { background: var(--crew-red-bg); }
.crew-cov--short .crew-cov__n--net { color: var(--crew-red); }
.crew-cov--short .crew-cov__d { color: var(--crew-red); }


/* ── print ──────────────────────────────────────────────────────────────── */

/* On screen the print sheet does not exist; on paper it is the only thing that does. Printing the live
   page instead would carry the nav, the tab bar, the fixed duty strip and every colour the palette
   sets -- none of which belong on a schedule someone is putting in a flight bag. */
.crew-print { display: none; }

@media print {
    /* Kept as a backstop so anything not named below is at least not painted. It is not sufficient on
       its own: visibility:hidden still occupies layout. */
    body * { visibility: hidden; }

    .crew-print, .crew-print * { visibility: visible; }

    /* The blank trailing pages come from document height, not from the sheet. Android prints through
       WebView.CreatePrintDocumentAdapter, which paginates the entire document -- measured at 1971px
       against a 750px viewport, which is exactly the three pages the print dialog reported. Hiding
       paint does nothing about that, so the app has to stop generating boxes.

       The wrappers collapse with display:contents rather than display:none, because the sheet lives
       nine levels down inside them and removing an ancestor would remove the sheet with it. What the
       app actually draws is then removed outright. */
    body > *:not(#app) { display: none !important; }

    #app,
    .mud-layout,
    .mud-main-content,
    .mud-container,
    .row { display: contents !important; }

    .cmt-header,
    .cmt-refresh,
    .mud-drawer,
    .mud-drawer-overlay,
    .mud-overlay,
    .mud-popover-provider,
    #mud-snackbar-container,
    .crew-page { display: none !important; }

    .crew-print {
        display: block;
        /* Static, not absolute: with everything else out of the layout there is nothing left to
           position against, and staying in flow makes the document exactly as tall as the sheet --
           which is the whole point. */
        position: static;
        width: 100%;
        padding: 0;
        background: #fff;
        color: #000;
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        font-size: 11pt;
    }

    /* Black on white throughout: coloured chips and tinted rows cost ink and read worse in mono. */
    .crew-print__head {
        border-bottom: 2px solid #000;
        padding-bottom: 6px;
        margin-bottom: 10px;
    }

    .crew-print__title { font-size: 15pt; font-weight: 700; }
    .crew-print__sub { font-size: 10pt; }

    .crew-print__trip { margin-bottom: 14px; page-break-inside: avoid; }

    .crew-print__trip-head {
        font-weight: 700;
        font-size: 12pt;
        border-bottom: 1px solid #000;
        padding-bottom: 3px;
        margin-bottom: 5px;
    }

    .crew-print__day { font-weight: 600; margin: 7px 0 3px; }

    .crew-print table { width: 100%; border-collapse: collapse; }
    .crew-print th, .crew-print td { text-align: left; padding: 2px 6px 2px 0; font-size: 10pt; }
    .crew-print th { border-bottom: 1px solid #666; font-size: 9pt; text-transform: uppercase; }
    .crew-print td.num { font-variant-numeric: tabular-nums; }

    .crew-print__foot { margin-top: 12px; font-size: 9pt; border-top: 1px solid #666; padding-top: 4px; }

    @page { margin: 12mm; }
}


/* ── payload calculator ─────────────────────────────────────────────────── */

/* The calculator was four identical slabs of nested grid with white-space:nowrap, which overflowed on a
   phone and gave no clue which number was the answer. Same panel language as the crew pages, with the
   over/under promoted to a banner because that is the only figure being asked for. */

.payload-cal { padding-bottom: 12px; }

.payload-card {
    background: var(--crew-surface) !important;
    border: 1px solid var(--crew-line) !important;
    border-radius: 14px !important;
    padding: 12px !important;
    margin-bottom: 10px;
    /* Explicitly release the nowrap the old markup set inline: on a phone it pushed the numeric fields
       off the right edge instead of letting the grid wrap. */
    white-space: normal !important;
}

.payload-card .mud-input-control { margin-top: 2px; }

.payload-sec {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--crew-ink-3);
    margin-bottom: 6px;
}

/* The answer. Green under the limit, red over it, and large enough to read at a glance on a jetbridge. */
.payload-verdict {
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.payload-verdict--under { background: var(--crew-accent-bg); border: 1px solid var(--crew-accent); }
.payload-verdict--idle { background: var(--crew-card); border: 1px solid var(--crew-line); }
.payload-verdict--over { background: var(--crew-red-bg); border: 1px solid var(--crew-red-line); }

.payload-verdict__k {
    font-size: .62rem; font-weight: 700; letter-spacing: .6px;
    text-transform: uppercase; color: var(--crew-ink-3);
}

.payload-verdict__v {
    font-size: 1.6rem; font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums; margin-left: auto;
}

.payload-verdict--under .payload-verdict__v { color: var(--crew-accent); }
.payload-verdict--over .payload-verdict__v { color: var(--crew-red); }

.payload-verdict__sub { font-size: .75rem; color: var(--crew-ink-3); }

/* ── Ingestion monitor ──────────────────────────────────────────────────────────────────────────
   The data-health screens. Everything below is drawn from the tokens above, so the monitor follows
   the app into dark and Cockpit without a second palette to keep in step. */

/* Two chip variants the crew screens had no use for until now. FAILED is filled rather than tinted
   because it is the only status that means "this ran and threw", and it has to out-shout STALE
   sitting next to it. */
.crew-chip--red-filled {
    background: var(--crew-red);
    color: var(--crew-on-filled);
    border-color: var(--crew-red);
}

.crew-chip--neutral {
    background: var(--crew-summary);
    color: var(--crew-ink-3);
    border-color: var(--crew-route);
}

/* 24-hour strip: one cell per hour, oldest to newest. Flexed rather than gridded so the same markup
   fits a 390px phone row and an 1100px desktop row without knowing which it is in. */
.crew-ticks {
    display: flex;
    gap: 2px;
    margin-top: 5px;
}

.crew-tick {
    flex: 1;
    height: 10px;
    border-radius: 2px;
    box-sizing: border-box;
    border: 1px solid transparent;
}

.crew-tick--ok { background: var(--crew-accent); border-color: var(--crew-accent); }
.crew-tick--fail { background: var(--crew-red-line); border-color: var(--crew-red-line); }

/* A gap is hollow, not coloured. An hour where a run was due and never arrived is an absence, and
   drawing absence as another filled colour makes the strip read as noise instead of a pattern. */
.crew-tick--gap { background: var(--crew-surface); border-color: var(--crew-ink-4); }
.crew-tick--none { background: var(--crew-summary); border-color: var(--crew-line); }

.crew-ticks--tall .crew-tick { height: 12px; }

.crew-ticks__axis {
    display: flex;
    justify-content: space-between;
    font-size: .6rem;
    color: var(--crew-ink-4);
    margin-top: 3px;
}

/* Legend under a strip. */
.crew-legend {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: .6rem;
    color: var(--crew-ink-4);
}

.crew-legend__swatch {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    vertical-align: -1px;
    margin-right: 4px;
    box-sizing: border-box;
    border: 1px solid transparent;
}

/* Stacked health bar on the per-source cards. */
.crew-mix {
    height: 8px;
    border-radius: 4px;
    background: var(--crew-track);
    overflow: hidden;
    margin: 9px 0 3px;
    display: flex;
}

.crew-mix > i { display: block; height: 100%; }
.crew-mix__ok { background: var(--crew-accent); }
.crew-mix__late { background: var(--crew-amber-line); }
.crew-mix__bad { background: var(--crew-red-line); }

/* Heatmap: feeds down, hours across. */
.crew-heat__hours {
    display: flex;
    gap: 2px;
    padding-left: 96px;
    margin-bottom: 3px;
}

.crew-heat__hour {
    flex: 1;
    text-align: center;
    font-size: .44rem;
    color: var(--crew-ink-4);
    font-variant-numeric: tabular-nums;
}

.crew-heat__row {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 2px;
}

.crew-heat__label {
    width: 94px;
    flex: none;
    font-size: .6rem;
    color: var(--crew-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* An unhealthy row carries its state in the label as well as the cells, so the row is findable when
   scanning the names rather than only when scanning the grid. */
.crew-heat__label--warn { color: var(--crew-amber); font-weight: 700; }
.crew-heat__label--bad { color: var(--crew-red); font-weight: 700; }

.crew-heat__row .crew-ticks { margin-top: 0; flex: 1; min-width: 0; }
.crew-heat__row .crew-tick { height: 13px; }

/* Feed rows. */
.crew-feed { padding: 9px 0; border-top: 1px solid var(--crew-line); }
.crew-feed:first-of-type { border-top: none; }

.crew-feed__head {
    display: flex;
    align-items: center;
    gap: 6px;
}

.crew-feed__name {
    font-size: .84rem;
    font-weight: 600;
    color: var(--crew-ink);
}

.crew-feed__meta {
    font-size: .66rem;
    color: var(--crew-ink-3);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.crew-feed__note { font-size: .64rem; margin-top: 4px; color: var(--crew-ink-4); }
.crew-feed__note--warn { color: var(--crew-amber); }
.crew-feed__note--bad { color: var(--crew-red); }

/* The needs-attention panel. Tinted red rather than merely red-bordered: it is the one block on the
   page that should be legible from arm's length, and it hides itself entirely when empty. */
.crew-panel--attention {
    background: var(--crew-red-bg);
    border-color: var(--crew-red-line);
}

.crew-attention__row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 5px 0;
    border-top: 1px solid var(--crew-red-line);
}

.crew-attention__status {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .4px;
    width: 66px;
    flex: none;
}

/* Monospace error payload on the feed page. */
.crew-raw--error {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .64rem;
    line-height: 1.55;
    color: var(--crew-ink-2);
    background: var(--crew-surface);
    border: 1px solid var(--crew-line);
    border-radius: 9px;
    padding: 8px;
    word-break: break-word;
    white-space: pre-wrap;
}

/* Desktop: the same rows, laid out across instead of stacked. One code path — the phone layout is
   the default and this is the enhancement, so nothing renders twice. */
@media (min-width: 900px) {
    .crew-feed {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 8px 0;
    }

    /* Wide enough for the longest feed name plus its chip. The name and the chip share this column
       rather than getting one each, so it has to carry both — at 200px "Monthly schedules" wrapped
       to two lines and pushed its own row taller than its neighbours. */
    .crew-feed__head { flex: none; width: 300px; }

    .crew-feed__name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .crew-feed__chip { width: 64px; text-align: center; flex: none; }
    .crew-feed__meta { margin-top: 0; width: 200px; flex: none; }
    .crew-feed .crew-ticks { margin-top: 0; flex: 1; min-width: 0; }

    .crew-feed__note {
        margin-top: 0;
        width: 210px;
        flex: none;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}