@import '_content/CMTMec.Shared/CMTMec.Shared.w4p786vjel.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Blazor's unhandled-error strip. Themed rather than hardcoded lightyellow, and
   without "color-scheme: light only" — that forced light rendering inside a dark
   page, which is exactly the seam that made dark mode look broken. */
#blazor-error-ui[b-7ogezq65wl] {
    background: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text, #fff);
    bottom: 0;
    box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.24);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.7rem 3rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
    font-size: 0.875rem;
}

    #blazor-error-ui .reload[b-7ogezq65wl] {
        color: inherit;
        font-weight: 600;
        text-decoration: underline;
        margin-left: 0.5rem;
    }

    #blazor-error-ui .dismiss[b-7ogezq65wl] {
        appearance: none;
        background: none;
        border: 0;
        padding: 0;
        margin: 0;
        color: inherit;
        font: inherit;
        cursor: pointer;
        position: absolute;
        right: 0.9rem;
        top: 0.6rem;
        line-height: 1;
    }

    #blazor-error-ui .dismiss:focus-visible[b-7ogezq65wl] {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-hcu4lg4ras],
.components-reconnect-repeated-attempt-visible[b-hcu4lg4ras],
.components-reconnect-failed-visible[b-hcu4lg4ras],
.components-pause-visible[b-hcu4lg4ras],
.components-resume-failed-visible[b-hcu4lg4ras],
.components-rejoining-animation[b-hcu4lg4ras] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-hcu4lg4ras],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-hcu4lg4ras],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-hcu4lg4ras],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-hcu4lg4ras],
#components-reconnect-modal.components-reconnect-retrying[b-hcu4lg4ras],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-hcu4lg4ras],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-hcu4lg4ras],
#components-reconnect-modal.components-reconnect-failed[b-hcu4lg4ras],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-hcu4lg4ras] {
    display: block;
}


/* Themed against the Mud palette. This dialog previously hardcoded a white
   background, so losing the connection while in dark mode produced a white box. */
#components-reconnect-modal[b-hcu4lg4ras] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius, 10px);
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-hcu4lg4ras 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-hcu4lg4ras 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-hcu4lg4ras 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-hcu4lg4ras]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-hcu4lg4ras 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-hcu4lg4ras {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-hcu4lg4ras {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-hcu4lg4ras {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-hcu4lg4ras] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-hcu4lg4ras] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-hcu4lg4ras] {
    border: 0;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    padding: 6px 24px;
    border-radius: 8px;
    font: inherit;
    font-weight: 560;
    cursor: pointer;
}

    #components-reconnect-modal button:hover[b-hcu4lg4ras] {
        background-color: var(--mud-palette-primary-darken);
    }

    #components-reconnect-modal button:active[b-hcu4lg4ras] {
        background-color: var(--mud-palette-primary);
    }

    #components-reconnect-modal button:focus-visible[b-hcu4lg4ras] {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 2px;
    }

.components-rejoining-animation[b-hcu4lg4ras] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-hcu4lg4ras] {
        position: absolute;
        border: 3px solid var(--mud-palette-primary);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-hcu4lg4ras 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-hcu4lg4ras] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-hcu4lg4ras {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/CrewPlanning/CpByDateStrip.razor.rz.scp.css */
/* ==========================================================================
   CpByDateStrip

   Scoped. Nothing here belongs in cmtmec.css — a coverage-by-date strip is a
   negotiation idiom, not a design-system primitive.

   Two rules run through the file:

     * THE COUNT IS THE SIGNAL, NOT THE COLOUR. There is no heat map here. A
       shaded grid reads as a picture, and a picture is what the statistics page
       is for; this strip is read once a month by somebody who needs a number
       they can act on, and the number is set large enough to be scanned down a
       row of thirty. Every cell also states its seat split as words, so nothing
       in the strip depends on hue, on a print being in colour, or on the reader
       distinguishing two greens.

     * AN EMPTY DAY IS NOT AN EMPTY CELL. "Nobody has asked for the 3rd" is an
       answer to the question they arrived with, so it is drawn and labelled
       rather than left as a gap the reader has to notice is missing. It is
       simply quieter, and it is not a control, because there is nothing to
       filter to.
   ========================================================================== */

.cpbd[b-up1wrgxt3p] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   The bar above the strip
   -------------------------------------------------------------------------- */
.cpbd__bar[b-up1wrgxt3p] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 26px;
}

.cpbd__hint[b-up1wrgxt3p] {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

/* --------------------------------------------------------------------------
   The strip

   Wrapped rather than aligned into weekday columns. A calendar grid needs
   leading blanks and would make the out-of-month days a special case; this is
   an ordered run of dates, which is how the question is actually asked — "the
   16th", not "the third Wednesday".
   -------------------------------------------------------------------------- */
.cpbd__strip[b-up1wrgxt3p] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    /* The selected cell's ring draws outside its box; padding keeps it off the
       neighbours and stops it being clipped at the edges of the row. */
    padding: 4px;
    margin: 0;
    list-style: none;
}

.cpbd__item[b-up1wrgxt3p] {
    display: flex;
}

.cpbd__cell[b-up1wrgxt3p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1px;
    width: 66px;
    min-height: 68px;
    padding: 4px 2px 5px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-family: inherit;
    text-align: center;
    box-sizing: border-box;
}

/* A button inherits none of these, and inheriting the wrong ones is why an
   unstyled button in a flex row sits 2px taller than the span beside it. */
button.cpbd__cell[b-up1wrgxt3p] {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

button.cpbd__cell:hover[b-up1wrgxt3p] {
    border-color: var(--mud-palette-primary);
}

button.cpbd__cell:focus-visible[b-up1wrgxt3p] {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Quieter, and deliberately not invisible. No fill and no weight — it should
   read as "asked about and empty" rather than as a hole in the month. */
.cpbd__cell--empty[b-up1wrgxt3p] {
    border-style: dashed;
    background-color: transparent;
    color: var(--mud-palette-text-secondary);
}

/* The filter, marked by a ring rather than by a fill: the count inside has to
   stay as readable selected as unselected, and a saturated background at this
   size fights the number for attention. The chip above states the same thing in
   words, so the ring is never the only signal. */
.cpbd__cell--selected[b-up1wrgxt3p] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px var(--mud-palette-primary);
}

/* --------------------------------------------------------------------------
   Cell contents
   -------------------------------------------------------------------------- */
.cpbd__head[b-up1wrgxt3p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.cpbd__weekday[b-up1wrgxt3p] {
    font-size: .5625rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.cpbd__day[b-up1wrgxt3p] {
    font-size: .75rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The number they came for. Set large enough to be picked out of a row of
   thirty without reading any of them. */
.cpbd__count[b-up1wrgxt3p] {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.cpbd__count--none[b-up1wrgxt3p] {
    font-size: .875rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

/* --------------------------------------------------------------------------
   The seat split — the second line, and the reason this component exists

   Coverage is seat-specific: a captain cannot backfill a first officer, so
   "6 pilots" is not yet an answerable fact and "2 CA, 4 FO" is. Kept as plain
   text at a small size rather than as two coloured bars, because the airline
   reads this against a roster and needs the numbers, not a proportion.
   -------------------------------------------------------------------------- */
.cpbd__seats[b-up1wrgxt3p] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1px 4px;
    line-height: 1.15;
}

.cpbd__seat[b-up1wrgxt3p] {
    font-size: .5625rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Unknown is a real category, so it gets its own mark rather than being folded
   into a seat. Amber matches the "not settled yet" idiom the rest of the FPL
   screens use, and the "?" carries it without the colour. */
.cpbd__seat--unknown[b-up1wrgxt3p] {
    color: var(--mud-palette-warning);
}

/* --------------------------------------------------------------------------
   Footnote

   Explains CA and FO, and says why the split is there at all. A legend that
   only expands the abbreviations tells the reader what the letters mean and not
   why they should care.
   -------------------------------------------------------------------------- */
.cpbd__foot[b-up1wrgxt3p] {
    margin: 0;
    font-size: .75rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

/* --------------------------------------------------------------------------
   Accessibility plumbing
   -------------------------------------------------------------------------- */

/* The empty cell's sentence. Off-screen, never display:none — a hidden node is
   not announced, and this is the only accessible content the listitem has. */
.cpbd__sr[b-up1wrgxt3p] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Windows High Contrast drops box-shadow and background outright, which would
   take the selection ring with it. Redrawn from system colours so the shape
   signal survives; the empty cell stays dashed, which is what makes it legible
   there at all. */
@media (forced-colors: active) {
    .cpbd__cell[b-up1wrgxt3p] {
        border: 1px solid CanvasText;
    }

    .cpbd__cell--empty[b-up1wrgxt3p] {
        border-style: dashed;
    }

    .cpbd__cell--selected[b-up1wrgxt3p] {
        outline: 3px solid Highlight;
        outline-offset: 1px;
    }
}
/* /Components/Pages/CrewPlanning/CpRequestCard.razor.rz.scp.css */
/* ==========================================================================
   CpRequestCard

   Scoped. Nothing here belongs in cmtmec.css: an answerable request card is a
   negotiation idiom, not a design-system primitive, and a global .cprc block
   would invite a second page to half-adopt it. Same reasoning .nds and .nrc
   state for themselves.

   ONE RULE RUNS THROUGH THE WHOLE FILE: THE UNANSWERED CARD HAS TO BE FINDABLE
   WHILE SCROLLING. This page is a checklist of twenty to sixty cards worked
   top to bottom by somebody who opens the app once a month. Decision 13 says
   silence is never approval, and a rule that is only enforced at the submit
   button is a rule that wastes their afternoon. So an unanswered card is
   marked three ways at once — an amber left rule, a filled amber chip, and the
   words "needs your answer" — none of which is colour alone.

   The answered card is marked too, quietly. "Nothing here" is not a state a
   reader can distinguish from "I have not got to this one yet", which is the
   whole ambiguity being designed out.
   ========================================================================== */

.cprc[b-0atmykqc62] {
    display: block;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   The card-level rule

   ::deep because DataCard's MudPaper is another component's element; the class
   travels there through DataCard's own Class parameter. A transparent rule is
   declared on every card so the three states differ in colour rather than in
   layout — without it, an answered card would be 3px narrower than the
   unanswered one above it and the whole column would jitter as they work down.
   -------------------------------------------------------------------------- */
.cprc[b-0atmykqc62]  .cprc__card {
    border-left: 3px solid transparent;
}

.cprc--unanswered[b-0atmykqc62]  .cprc__card {
    border-left-color: var(--mud-palette-warning);
}

.cprc--answered[b-0atmykqc62]  .cprc__card {
    border-left-color: var(--mud-palette-lines-default);
}

/* The withdrawn request. Quieter, never hidden, and dashed rather than merely
   paler: a removal you cannot see is the failure this whole feature exists to
   end, and opacity is the first thing a greyscale print throws away.

   The wash sinks toward the page ground rather than using the theme's grey. In
   light the mix is exactly --mud-palette-background-gray (#F7F8FA); in dark that
   grey is lighter than a card, and would lift the one card meant to recede. */
.cprc--ghost[b-0atmykqc62]  .cprc__card {
    border-style: dashed;
    background-color: color-mix(in srgb, var(--mud-palette-background) 70%, var(--mud-palette-surface));
}

.cprc--ghost[b-0atmykqc62]  .cmt-person__name {
    text-decoration: line-through;
}

.cprc--ghost .cprc__range[b-0atmykqc62] {
    text-decoration: line-through;
    text-decoration-color: var(--mud-palette-text-secondary);
}

/* --------------------------------------------------------------------------
   Header

   The head is DataCard's flex row; these are its children, so they wrap rather
   than squeeze a fourteen-character pilot name into an ellipsis on a laptop.
   -------------------------------------------------------------------------- */
.cprc[b-0atmykqc62]  .cmt-card__head {
    flex-wrap: wrap;
}

.cprc__who[b-0atmykqc62] {
    min-width: 0;
}

.cprc__range[b-0atmykqc62] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cprc__sep[b-0atmykqc62] {
    color: var(--mud-palette-lines-default);
}

.cprc__state[b-0atmykqc62] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

@media (max-width: 700px) {
    .cprc__state[b-0atmykqc62] {
        margin-left: 0;
    }
}

/* --------------------------------------------------------------------------
   Body
   -------------------------------------------------------------------------- */
.cprc__body[b-0atmykqc62] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.cprc__note[b-0atmykqc62] {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

/* What they said, in words. Full contrast and reading size rather than caption
   size: this is the sentence that answers "what did I decide about this pilot"
   without reading five cell colours, and it is the part that survives being
   screenshotted into the covering email neither organisation has stopped
   sending. */
.cprc__answer[b-0atmykqc62] {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--mud-palette-text-primary);
}

/* What ALPA did about it. Set apart with a rule down the left so it reads as
   the other side speaking, not as a continuation of the sentence above. */
.cprc__delta[b-0atmykqc62] {
    margin: 0;
    padding-left: 10px;
    border-left: 2px solid var(--mud-palette-lines-default);
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

/* What ALPA said, in their words. Same left rule as the delta line directly above
   it, and that is the point: both are the other organisation speaking, and they
   read as one column of their voice rather than as two unrelated remarks. The
   attribution takes full text colour so "ALPA said:" survives being skimmed down
   a page of sixty cards; the quotation stays secondary and italic, so a sentence
   somebody else wrote never reads as this page's own copy. */
.cprc__said[b-0atmykqc62] {
    margin: 0;
    padding-left: 10px;
    border-left: 2px solid var(--mud-palette-lines-default);
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.cprc__saidwho[b-0atmykqc62] {
    margin-right: 4px;
    color: var(--mud-palette-text-primary);
}

.cprc__withdrawn[b-0atmykqc62] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--mud-palette-text-primary);
}

.cprc__quote[b-0atmykqc62] {
    margin: 0;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

/* --------------------------------------------------------------------------
   The reason

   Shown from the first denial, because the API needs a reason on any denial at
   all. It turns amber and dashed the moment the request is denied in full and
   the box is still empty — the fpl-reason--empty idiom /fpl already teaches for
   a value that is real, yours, and not settled yet.

   Scoped CSS cannot reach .fpl-reason--empty on another page, so the
   declarations are repeated here deliberately, and identically.
   -------------------------------------------------------------------------- */
.cprc__comment[b-0atmykqc62] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.cprc__comment--required[b-0atmykqc62] {
    border: 1px dashed var(--mud-palette-warning);
}

.cprc__commentwhy[b-0atmykqc62] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    font-size: .75rem;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
}

/* --------------------------------------------------------------------------
   The two answers

   Equal weight, both outlined. Neither outcome is the safe one — the airline is
   as entitled to say no as to say yes — and a filled Approve beside an outlined
   Deny would put a thumb on that scale on a screen the other company reads.
   -------------------------------------------------------------------------- */
.cprc__actions[b-0atmykqc62] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.cprc__spacer[b-0atmykqc62] {
    flex: 1 1 auto;
}

/* --------------------------------------------------------------------------
   The counter-offer
   -------------------------------------------------------------------------- */
.cprc__suggest[b-0atmykqc62] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-background-gray);
}

.cprc__suggestwhy[b-0atmykqc62] {
    margin: 0;
    font-size: .75rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

.cprc__suggestrow[b-0atmykqc62] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

/* The two pickers share the row and drop to full width together, so the range
   never renders as one wide field beside one narrow one — which reads as two
   unrelated dates rather than as two ends of the same offer. */
.cprc__suggestrow[b-0atmykqc62] >  .mud-picker {
    flex: 1 1 190px;
    min-width: 170px;
}

.cprc__suggestproblem[b-0atmykqc62] {
    margin: 0;
    font-size: .75rem;
    color: var(--mud-palette-error);
}

/* --------------------------------------------------------------------------
   Windows High Contrast

   Forced colours drop background-color outright, which would take the ghost's
   grey wash and the counter-offer panel's with it. The border styles are what
   survive, which is why the ghost is dashed rather than merely paler and why
   the required reason is dashed rather than merely amber.
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
    .cprc[b-0atmykqc62]  .cprc__card {
        border-left: 3px solid CanvasText;
    }

    .cprc--unanswered[b-0atmykqc62]  .cprc__card {
        border-left: 3px solid Highlight;
    }

    .cprc--ghost[b-0atmykqc62]  .cprc__card {
        border-style: dashed;
    }

    .cprc__comment--required[b-0atmykqc62] {
        border: 1px dashed CanvasText;
    }
}
/* /Components/Pages/CrewPlanning/CrewPlanning_FplPage.razor.rz.scp.css */
/* ==========================================================================
   Crew Planning — the airline's month

   Scoped, and nothing here goes near cmtmec.css. This page is read by people
   at another company roughly once a month; its idioms are answers to that,
   not design-system primitives, and a global .cpfpl block would invite a
   second page to half-adopt them. CpRequestCard and CpByDateStrip state the
   same reasoning for themselves.

   TWO THINGS RUN THROUGH THE WHOLE FILE.

   First, DECISION 13 HAS TO BE VISIBLE FROM ANY SCROLL POSITION. The
   instruction line states the rule, the meter shows how far off finishing
   they are, and the submit bar is docked to the foot of the viewport with
   the outstanding count on it. Between them there is nowhere on a forty-card
   page where "am I done, and what is stopping me" is more than a glance away.

   Second, COLOUR IS NEVER THE ONLY SIGNAL. Every state on this page is
   carried by a word first — "3 requests still need an answer", "Waiting for
   you", "14 of 14 requests answered" — with an icon for shape and colour
   third. That ordering is what makes the forced-colours block at the bottom
   short: there is very little left to redraw once the colours are gone.
   ========================================================================== */

.cpfpl[b-f98vekns5h] {
    display: flex;
    flex-direction: column;
}

/* --------------------------------------------------------------------------
   The instruction line

   Not an MudAlert, and the difference matters. An alert is a coloured panel
   with a severity, and a severity reads as "something has gone wrong" —
   nothing has, this is just how the page works. But it still has to be
   unmissable, so it gets the one thing an alert would have given it that is
   worth keeping: a rule down the left tying it to the meter beneath, at full
   text contrast and slightly above body size.
   -------------------------------------------------------------------------- */
.cpfpl__instruction[b-f98vekns5h] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 16px;
    padding: 10px 0 10px 12px;
    border-left: 3px solid var(--mud-palette-primary);
    font-size: .875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
    max-width: 78ch;
}

/* The clause naming another month that is also waiting. Its own line rather
   than trailing the sentence: it is a second fact about a different month,
   and reading it as a continuation of "leaving one alone is not a yes" is
   worse than not reading it at all. */
.cpfpl__also[b-f98vekns5h] {
    display: block;
    margin-top: 6px;
    color: var(--mud-palette-text-secondary);
}

/* --------------------------------------------------------------------------
   The read-only band

   ::deep because the class is handed to MudAlert as a Class parameter and
   lands on that component's own root, which carries its scope rather than
   this one. Without it the rule compiles to a selector that can never match.
   -------------------------------------------------------------------------- */
[b-f98vekns5h] .cpfpl__band {
    margin: 0 0 16px;
    max-width: 78ch;
}

/* --------------------------------------------------------------------------
   The progress meter

   The words carry it. The bar is the glanceable half and is deliberately the
   quieter one — a once-a-month user needs "11 of 14" far more than they need
   a percentage they then have to convert back into requests.
   -------------------------------------------------------------------------- */
.cpfpl__progress[b-f98vekns5h] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 20px;
}

.cpfpl__progress-head[b-f98vekns5h] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.cpfpl__progress-label[b-f98vekns5h] {
    font-size: .9375rem;
    font-weight: 625;
    letter-spacing: -.008em;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Only present while a day filter is on, and it says the total ignores it.
   Secondary, because it is a caveat rather than the figure. */
.cpfpl__progress-note[b-f98vekns5h] {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

/* --------------------------------------------------------------------------
   The date strip

   ::deep for the same reason as the band — it is CpByDateStrip's own root.
   -------------------------------------------------------------------------- */
[b-f98vekns5h] .cpfpl__bydate {
    margin: 0 0 20px;
}

/* --------------------------------------------------------------------------
   The requests

   A flat column, generously spaced. This is the deliberate divergence from
   the ALPA page: no panels, no grouping by pilot, nothing behind a click —
   twenty to sixty cards read top to bottom in one pass. The gap is wider
   than the ALPA page's 14px because each card here is a decision rather than
   a row being scanned, and cards that touch read as a table.

   Bottom padding clears the sticky submit bar, so the last request in the
   month can be scrolled fully into view rather than living permanently
   underneath it.
   -------------------------------------------------------------------------- */
.cpfpl__cards[b-f98vekns5h] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 12px;
}

/* --------------------------------------------------------------------------
   The submit bar

   Docked to the foot of the viewport rather than under the app bar. The two
   things a reader needs while working — what is left, and the way out — are
   otherwise a forty-card scroll from each other, and a once-a-month user who
   cannot find the send button concludes there isn't one and sends an email.

   The visual language is .fpl-savebar from /fpl, so the two applications
   read as one: primary border, primary hover fill, icon, sentence, spacer,
   button. The opaque gradient underneath is not decoration — primary-hover
   is translucent in both themes, and without it the day cells scroll through
   the bar and the outstanding count becomes unreadable over them.
   -------------------------------------------------------------------------- */
.cpfpl__submitbar[b-f98vekns5h] {
    position: sticky;
    bottom: 12px;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: var(--mud-default-borderradius);
    border: 1px solid var(--mud-palette-primary);
    background-color: var(--mud-palette-primary-hover);
    background-image: linear-gradient(var(--mud-palette-surface), var(--mud-palette-surface));
    background-blend-mode: normal;
    box-shadow: var(--mud-elevation-8);
}

.cpfpl__submitbar-text[b-f98vekns5h] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    font-size: .8125rem;
    color: var(--mud-palette-text-primary);
}

.cpfpl__submitbar-detail[b-f98vekns5h] {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

.cpfpl__submitbar-spacer[b-f98vekns5h] {
    flex: 1 1 auto;
}

@media (max-width: 700px) {
    .cpfpl__submitbar[b-f98vekns5h] {
        /* Flush to the bottom edge on a phone: 12px of floating gap costs a
           line of the request being answered, and there is no page furniture
           down there for it to sit clear of. */
        bottom: 0;
    }

    .cpfpl__submitbar-text[b-f98vekns5h] {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Previous months

   The only control on the page that is not an answer, and the only way to
   anything other than this month — so it is at the very bottom, closed, and
   there is nothing after it. Separated by a rule rather than by whitespace,
   because whitespace alone would let it read as part of the last request.
   -------------------------------------------------------------------------- */
.cpfpl__foot[b-f98vekns5h] {
    margin-top: 28px;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.cpfpl__months[b-f98vekns5h] {
    padding: 8px 0 4px;
}

.cpfpl__months-note[b-f98vekns5h] {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
    max-width: 68ch;
}

.cpfpl__months-list[b-f98vekns5h] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cpfpl__months-row[b-f98vekns5h] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 4px 0;
    font-size: .8125rem;
}

.cpfpl__months-current[b-f98vekns5h] {
    font-weight: 625;
    color: var(--mud-palette-text-primary);
}

/* The state word, not a chip. A chip per row would turn a list of four
   months into four coloured pills competing with the links themselves, and
   the word is the whole signal — "Waiting for you" needs no colour to be
   read as the one that matters. */
.cpfpl__months-state[b-f98vekns5h] {
    color: var(--mud-palette-text-secondary);
}

/* --------------------------------------------------------------------------
   Windows High Contrast

   Forced colours drop background-color and background-image outright, which
   takes the submit bar's fill with them. The border is what survives, so it
   is redrawn heavier — without it the outstanding count would float
   unattached over whichever request happened to be behind it. Everything
   else on this page is already a word or a shape.
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
    .cpfpl__submitbar[b-f98vekns5h] {
        border: 2px solid CanvasText;
        background: Canvas;
        box-shadow: none;
    }

    .cpfpl__instruction[b-f98vekns5h] {
        border-left: 3px solid CanvasText;
    }
}