/* ==========================================================================
   FL510 — MAINTENANCE MODULES (FW8d slice 1, operator-approved mock 2026-08-14)
   --------------------------------------------------------------------------
   The maintenance landing's KPI-fed module menu, the fleet TTAF band, and the
   module head / backlink / note vocabulary the four module pages share.

   SCOPE: every rule is under `.mnt-shell`, a wrapper div each maintenance view
   renders INSIDE the shared shell's body. Nothing here styles a bare element
   and nothing here can reach another page — the opt-in contract billing-modules.css
   states, applied at one level deeper.

   ⚠ WHY A WRAPPER RATHER THAN A SHELL-ROOT CLASS. Billing takes the other route
   (`InternalPortalShellClass = "billing-shell"`), and it must: its `.bl-*` rules
   restyle the CHROME. Maintenance restyles no chrome at all — the rail, appbar,
   KPI strip and mobile sheet are the shared `.ps-*` components, unmodified,
   including `.ps-kpi.is-crit/.is-warn/.is-good` and `.ps-cnt.is-attn/.is-ok`
   which already exist in portal-shell.css. So the shell root stays byte-identical
   on the maintenance routes (the marker `class="internal-shell portal-shell ds"`
   that every converted route's rendered-truth test counts is unchanged), and this
   file only has to reach the page BODY. Fewer moving parts, and no shared
   stylesheet is edited — the standing UI freeze permits visual change on the
   maintenance surfaces ONLY.

   TOKEN RECONCILIATION (translation discipline, the rule billing-modules.css
   records): every colour, space and radius below derives from the three-tier
   design system in tokens.css. The `--mnt-*` locals are COMPONENT-tier names
   pointing at SEMANTIC `--ds-*` tokens, so light/dark and the manual
   [data-theme] pin still swap in ONE place. No forked palette, no raw hex, and
   deliberately NO alias of the `.note`/`.hint` inks the FW6c review measured
   under floor — this page mints its own.

   ⚠ CONTRAST IS LAW, AND EVERY PAIR BELOW WAS COMPUTED, NOT EYEBALLED. Ratios
   are WCAG 2.x relative luminance against the surface each ink actually paints
   on, in BOTH themes, at the size it is used. Resolved surfaces:
       light  --ds-surface #FFFFFF   --ds-surface-raised #F7FAFA
       dark   --ds-surface #12181D   --ds-surface-raised #1A2128
   Resolved inks:
       light  --ds-text-primary #1E2A30  --ds-text-secondary #556067
       dark   --ds-text-primary #E7ECEF  --ds-text-secondary #A9B4BA
   Resolved status hues:
       light  ok #2E7D32  warn #8A5200  danger #C1272D  accent #227C80
       dark   ok #86C98A  warn #E0A648  danger #F08A93  accent #56C3C7
   ========================================================================== */

.mnt-shell {
    /* --- surfaces / ink --- */
    --mnt-surface: var(--ds-surface-raised);
    --mnt-surface-2: color-mix(in srgb, var(--ds-surface-raised) 88%, var(--ds-line));
    --mnt-line: var(--ds-line);
    --mnt-line-strong: color-mix(in srgb, var(--ds-line) 55%, var(--ds-text-secondary));
    --mnt-ink: var(--ds-text-primary);

    /* Body ink for secondary copy. --ds-text-secondary UNMIXED, deliberately:
       light  #556067 on #F7FAFA = 6.36:1 ; on #FFFFFF = 6.75:1
       dark   #A9B4BA on #1A2128 = 8.14:1 ; on #12181D = 9.13:1
       All four clear the 4.5:1 normal-text floor with room, so no re-toning is
       needed at this tier. */
    --mnt-ink-2: var(--ds-text-secondary);

    /* THE SMALL-LABEL INK — the one this page had to mint rather than inherit.
       It colours 10.5-12px text (kickers, unit labels, the TTAF caption), which
       is WCAG NORMAL-size text at a 4.5:1 floor, never the 3:1 large-text one.
       The estate's `.note`/`.hint` inks are the pair the FW6c review measured
       BELOW that floor, and the billing shell's fix was to mix a LARGER share of
       the secondary ink (92%, not 78%) toward the theme's own surface. Same
       construction here, and it is monotonically safe in both themes because the
       mix runs toward the surface the text sits on.

       ⚠ RE-MEASURED FW8d SLICE 2, AND THE SLICE-1 FIGURES HERE WERE OVERSTATED. This block previously
       claimed rgb(94,105,111) / 5.44:1 light and 7.05:1 dark. Recomputed from the RESOLVED tokens
       (--ds-text-secondary #556067 light, #A9B4BA dark; --ds-surface #FFFFFF / #12181D), evaluating
       color-mix(in srgb) as the per-channel blend of the gamma-encoded sRGB values it is:
         light  rgb(99,109,115)  on #F7FAFA = 5.05:1 ; on #FFFFFF = 5.30:1
         dark   rgb(157,168,173) on #1A2128 = 6.69:1 ; on #12181D = 7.36:1
       All four still clear the 4.5:1 normal-text floor, so the TOKEN is unchanged — only the claim is
       corrected. A stated ratio that is not the measurement is the failure this comment exists to
       prevent. */
    --mnt-ink-3: color-mix(in srgb, var(--ds-text-secondary) 92%, var(--ds-surface));

    /* --- accent --- */
    --mnt-accent: var(--ds-accent);
    --mnt-accent-wash: color-mix(in srgb, var(--ds-accent) 15%, var(--ds-surface));
    /* Text ON the accent wash. The raw accent on its own wash measures 4.04:1 in
       light — under floor — which is why the billing shell mints an -ink local
       instead of reusing the hue. Same expression, same reason.

       ⚠ RE-MEASURED FW8d SLICE 2 — the slice-1 comment quoted rgb(43,64,72)/8.92:1
       light and rgb(153,203,199)/8.31:1 dark, which are not what this expression
       resolves to. Recomputed from --ds-accent (#227C80 light / #56C3C7 dark) and
       --ds-text-primary (#1E2A30 / #E7ECEF):
         light  rgb(32,93,98)    on the light wash rgb(222,235,236) = 6.14:1
                                 on --mnt-surface #F7FAFA           = 7.14:1
         dark   rgb(141,211,214) on the dark wash rgb(28,50,54)     = 7.97:1
                                 on --mnt-surface #1A2128           = 9.61:1
       Every pair still clears 4.5:1 with room, so the token stands and only the
       claim is corrected. The surface figures are the ones slice 2 relies on: this
       ink also colours the tail chip and the row's Edit link, which sit on the card,
       not on the wash. */
    --mnt-accent-ink: color-mix(in srgb, var(--ds-accent) 62%, var(--ds-text-primary));

    /* --- status washes + the ink to use ON them ---
       The raw status hue is NOT a legible ink on its own wash (measured in the
       FW6c review: --ds-ok on a 16% ok-wash is 4.13:1 in light theme). Mixing the
       hue 62% toward --ds-text-primary keeps the theme swap at the semantic tier —
       that token is dark ink on light and light ink on dark — so ONE expression
       darkens the label on paper and lightens it on the dark surface. Measured:
         light  ok 6.27 / warn 6.93 / crit 7.00   (raw hue was 4.13 / 4.89 / 4.50)
         dark   ok 8.06 / warn 7.44 / crit 7.45   (raw hue was 6.67 / 5.91 / 5.72) */
    --mnt-ok: var(--ds-ok);
    --mnt-ok-wash: color-mix(in srgb, var(--ds-ok) 16%, var(--ds-surface));
    --mnt-ok-ink: color-mix(in srgb, var(--ds-ok) 62%, var(--ds-text-primary));
    --mnt-warn: var(--ds-warn);
    --mnt-warn-wash: color-mix(in srgb, var(--ds-warn) 18%, var(--ds-surface));
    --mnt-warn-ink: color-mix(in srgb, var(--ds-warn) 62%, var(--ds-text-primary));
    --mnt-crit: var(--ds-danger);
    --mnt-crit-wash: color-mix(in srgb, var(--ds-danger) 16%, var(--ds-surface));
    --mnt-crit-ink: color-mix(in srgb, var(--ds-danger) 62%, var(--ds-text-primary));

    /* Neutral chip background: a surface, not an ink, so the 3:1 non-text floor
       is what applies to its border. The chip's TEXT is --mnt-ink-2 / --mnt-ink,
       both measured above against a surface within 2% of this one. */
    --mnt-chip-bg: color-mix(in srgb, var(--ds-surface-raised) 82%, var(--ds-line));

    /* THE CONTROL BORDER (FW8d slice 2). --mnt-line-strong above is a HOVER accent
       on a card and is fine at its measured 2.36:1 light, but a form control's
       boundary is a UI component under WCAG 1.4.11 and owes 3:1 against its
       neighbouring surface. Mixing the hairline only 35% toward the secondary ink
       (rather than 55%) clears it in BOTH themes. Measured against --mnt-surface
       and against --mnt-surface-2, which is what the inputs are actually filled with:
         light  rgb(131,140,146) on #F7FAFA = 3.26:1 ; on rgb(243,247,247) = 3.17:1
         dark   rgb(125,136,142) on #1A2128 = 4.48:1 ; on rgb(28,36,43)    = 4.33:1 */
    --mnt-control-line: color-mix(in srgb, var(--ds-line) 35%, var(--ds-text-secondary));

    /* --- geometry --- */
    --mnt-radius: var(--ds-radius-3);
    --mnt-radius-sm: var(--ds-radius-2);
    --mnt-shadow: var(--ds-shadow-1);

    color: var(--mnt-ink);
}

.mnt-shell .tnum { font-variant-numeric: tabular-nums; }

/* ============ module head + backlink (every module page) ============ */
.mnt-shell .mnt-backlink {
    display: inline-flex; align-items: center; gap: 6px;
    /* 13px is normal-size text. The 8.92:1 / 8.31:1 stated here was a SLICE-1 FIGURE
       the header block re-measured and retired; it was never what --mnt-accent-ink
       resolves to. Recomputed on the surface this link actually paints on — the PAGE
       surface --ds-surface, not the raised card — rgb(32,93,98) on #FFFFFF = 7.49:1
       and rgb(141,211,214) on #12181D = 10.58:1. (The header records the same ink at
       7.14:1 / 9.61:1 on --mnt-surface, which is where the tail chip and the row's
       Edit link sit.) Every one of those clears the 4.5:1 normal-text floor. */
    font-size: 13px; font-weight: 600; color: var(--mnt-accent-ink);
    text-decoration: none; min-height: var(--ds-touch-floor); margin-bottom: 8px;
}
.mnt-shell .mnt-backlink:hover { text-decoration: underline; }
.mnt-shell .mnt-backlink:focus-visible { outline: 2px solid var(--mnt-accent); outline-offset: 2px; border-radius: 4px; }

.mnt-shell .mnt-modulehead {
    display: flex; align-items: center; gap: 12px; margin: 0 0 var(--ds-space-4);
}
.mnt-shell .mnt-glyph {
    width: 38px; height: 38px; flex: none; border-radius: var(--mnt-radius-sm);
    display: grid; place-items: center;
    background: var(--mnt-accent-wash); color: var(--mnt-accent-ink);
}
.mnt-shell .mnt-glyph svg { width: 20px; height: 20px; }
.mnt-shell .mnt-kicker {
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--mnt-ink-3);
}
.mnt-shell .mnt-modulehead h1 {
    margin: 2px 0 0; font-size: clamp(1.125rem, 1rem + 1vw, 1.375rem);
    font-weight: 650; letter-spacing: -.01em; color: var(--mnt-ink); text-wrap: balance;
}

/* ============ page notes ============
   Its OWN ink, never the estate's `.note`/`.hint` pair — those are the two the
   FW6c review measured under floor, and aliasing them would import the defect
   this page was rebuilt to avoid. */
.mnt-shell .mnt-note {
    font-size: 13.5px; line-height: 1.5; color: var(--mnt-ink-2);
    margin: var(--ds-space-3) 0 0;
}
.mnt-shell .mnt-note strong { color: var(--mnt-ink); }

/* ============ TTAF band ============
   Mobile-first: one horizontally scrolling row in its OWN overflow container, so
   the page body never scrolls sideways however many tails the fleet grows to. */
.mnt-shell .mnt-ttaf {
    display: flex; gap: var(--ds-space-2);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 2px var(--ds-space-2);
    margin: 0 0 var(--ds-space-2);
}
.mnt-shell .mnt-ttaf::-webkit-scrollbar { display: none; }
.mnt-shell .mnt-tt {
    flex: 0 0 auto; min-width: 122px;
    background: var(--mnt-surface); border: 1px solid var(--mnt-line);
    border-radius: var(--mnt-radius-sm); padding: 8px 12px;
}
.mnt-shell .mnt-tt-tail { font-size: 12px; font-weight: 700; color: var(--mnt-ink); }
.mnt-shell .mnt-tt-hrs {
    font-size: 17px; font-weight: 800; letter-spacing: -.01em;
    font-variant-numeric: tabular-nums; color: var(--mnt-ink);
}
/* 11px caption — normal-size text, so --mnt-ink-3 against --ds-surface-raised is the
   number that matters. The 5.44:1 / 7.05:1 stated here was the slice-1 figure the header
   block re-measured and retired: rgb(99,109,115) on #F7FAFA = 5.05:1 and
   rgb(157,168,173) on #1A2128 = 6.69:1. Both still clear the 4.5:1 floor. */
.mnt-shell .mnt-tt-lbl { font-size: 11px; color: var(--mnt-ink-3); }
.mnt-shell .mnt-tt-anch,
.mnt-shell .mnt-tt-note {
    display: inline-block; margin-top: 4px; padding: 1px 8px;
    font-size: 10.5px; font-weight: 700; border-radius: var(--ds-radius-pill);
}
.mnt-shell .mnt-tt-anch { color: var(--mnt-accent-ink); background: var(--mnt-accent-wash); }
.mnt-shell .mnt-tt-note { color: var(--mnt-warn-ink); background: var(--mnt-warn-wash); }

/* ============ module menu (landing) ============
   Mobile-first single column; two columns from 640px with the primary card
   spanning both, exactly as the mock draws it. */
.mnt-shell .mnt-menu {
    display: grid; grid-template-columns: 1fr; gap: var(--ds-space-3);
    margin-top: var(--ds-space-3);
}
@media (min-width: 640px) {
    .mnt-shell .mnt-menu { grid-template-columns: 1fr 1fr; }
    .mnt-shell .mnt-menu .mnt-mcard.is-primary { grid-column: 1 / -1; }
}
.mnt-shell .mnt-mcard {
    position: relative; display: block; text-decoration: none;
    background: var(--mnt-surface); border: 1px solid var(--mnt-line);
    border-radius: var(--mnt-radius); box-shadow: var(--mnt-shadow);
    padding: var(--ds-space-4) var(--ds-space-4) var(--ds-space-3);
    color: var(--mnt-ink);
    min-height: var(--ds-touch-min);
    transition: border-color var(--ds-motion-fast) var(--ds-ease), background var(--ds-motion-fast) var(--ds-ease);
}
.mnt-shell .mnt-mcard:hover { border-color: var(--mnt-line-strong); background: var(--mnt-surface-2); }
.mnt-shell .mnt-mcard:focus-visible { outline: 2px solid var(--mnt-accent); outline-offset: 2px; }
.mnt-shell .mnt-mcard.is-primary { border-left: 4px solid var(--mnt-accent); }
.mnt-shell .mnt-go {
    position: absolute; top: var(--ds-space-4); right: var(--ds-space-3);
    color: var(--mnt-ink-3); line-height: 0;
}
.mnt-shell .mnt-go svg { width: 18px; height: 18px; }
.mnt-shell .mnt-mcard .mnt-kick {
    display: block;
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--mnt-accent-ink);
}
.mnt-shell .mnt-mcard .mnt-ctitle {
    margin: 2px 0 10px; font-size: 16px; font-weight: 650; color: var(--mnt-ink);
}
.mnt-shell .mnt-headline { display: block; }
.mnt-shell .mnt-big {
    font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; color: var(--mnt-ink);
}
/* 13px — --mnt-ink-2 measures 6.36:1 light / 8.14:1 dark on this surface. */
.mnt-shell .mnt-unit { font-size: 13px; color: var(--mnt-ink-2); margin-left: 6px; }
.mnt-shell .mnt-desc {
    display: block; font-size: 13px; line-height: 1.45; color: var(--mnt-ink-2);
}

/* ============ chips ============ */
.mnt-shell .mnt-chips {
    display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px;
}
.mnt-shell .mnt-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; padding: 3px 10px; border-radius: var(--ds-radius-pill);
    background: var(--mnt-chip-bg); color: var(--mnt-ink-2);
}
.mnt-shell .mnt-chip .n { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--mnt-ink); }
.mnt-shell .mnt-chip.is-attn { background: var(--mnt-warn-wash); color: var(--mnt-warn-ink); }
.mnt-shell .mnt-chip.is-attn .n { color: var(--mnt-warn-ink); }
.mnt-shell .mnt-chip.is-crit { background: var(--mnt-crit-wash); color: var(--mnt-crit-ink); }
.mnt-shell .mnt-chip.is-crit .n { color: var(--mnt-crit-ink); }
.mnt-shell .mnt-chip.is-ok { background: var(--mnt-ok-wash); color: var(--mnt-ok-ink); }
.mnt-shell .mnt-chip.is-ok .n { color: var(--mnt-ok-ink); }

/* ============ wide content scrolls in its own container ============
   The reminder and consumable tables the module pages still host are wider than
   a 390px viewport. They scroll THEMSELVES; the page body never does. */
.mnt-shell .flight-log-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   FW8d SLICE 2 — THE REMINDERS MODULE (mock screens 2 and 2b)
   --------------------------------------------------------------------------
   A ten-column horizontally-scrolling table became ROW-CARDS, with the filter
   bar above them, an inline complete-and-advance panel inside the row, and the
   editor on its own screen.

   ⚠ EVERY PAIR BELOW WAS COMPUTED, NOT EYEBALLED, on the SAME resolved tokens
   listed at the head of this file, treating color-mix(in srgb, …) as the
   per-channel blend of gamma-encoded sRGB values that it is. The three surfaces
   the module actually paints on:
       --mnt-surface   (the row card)   light #F7FAFA        dark #1A2128
       --ds-surface    (the page)       light #FFFFFF        dark #12181D
       --mnt-surface-2 (control fills)  light rgb(243,247,247) dark rgb(28,36,43)
   And the inks, resolved:
       --mnt-ink     light rgb(30,42,48)    dark rgb(231,236,239)
       --mnt-ink-2   light rgb(85,96,103)   dark rgb(169,180,186)
       --mnt-ink-3   light rgb(99,109,115)  dark rgb(157,168,173)
       --mnt-ok-ink  light rgb(40,93,49)    dark rgb(171,214,176)
       --mnt-warn-ink light rgb(97,67,18)   dark rgb(227,193,135)
       --mnt-crit-ink light rgb(131,40,46)  dark rgb(237,175,182)
       --mnt-accent-ink light rgb(32,93,98) dark rgb(141,211,214)
   ========================================================================== */

/* ============ toolbar + buttons ============
   Mobile-first: the toolbar WRAPS rather than scrolling, because a button that
   scrolled out of sight is a button nobody presses. Every control clears the
   44px touch floor. */
.mnt-shell .mnt-toolbar {
    display: flex; flex-wrap: wrap; gap: var(--ds-space-2);
    margin: 0 0 var(--ds-space-3);
}

.mnt-shell .mnt-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: var(--ds-touch-min); padding: 8px 16px;
    border: 1px solid var(--mnt-control-line); border-radius: var(--mnt-radius-sm);
    background: var(--mnt-surface-2);
    /* 13.5px is normal-size text. --mnt-ink on --mnt-surface-2 measures
       light 13.62:1 / dark 13.20:1. */
    color: var(--mnt-ink); font-size: 13.5px; font-weight: 600; line-height: 1.2;
    text-decoration: none; cursor: pointer;
    transition: background var(--ds-motion-fast) var(--ds-ease), border-color var(--ds-motion-fast) var(--ds-ease);
}
.mnt-shell .mnt-btn:hover { background: var(--mnt-surface); border-color: var(--mnt-ink-3); }
.mnt-shell .mnt-btn:focus-visible { outline: 2px solid var(--mnt-accent); outline-offset: 2px; }

/* The primary action. --ds-accent-on is the design system's paired on-colour and
   swaps with the theme, so ONE declaration is legible on both accents:
     light  #FFFFFF on #227C80 = 4.93:1
     dark   #12181D on #56C3C7 = 8.54:1 */
.mnt-shell .mnt-btn.is-primary {
    background: var(--mnt-accent); border-color: var(--mnt-accent); color: var(--ds-accent-on);
}
.mnt-shell .mnt-btn.is-primary:hover {
    background: var(--mnt-accent); border-color: var(--mnt-accent-ink); color: var(--ds-accent-on);
}
/* A destructive-looking row action. --mnt-crit-ink on --mnt-surface-2 measures
   light 8.43:1 / dark 8.54:1. */
.mnt-shell .mnt-btn.is-danger { color: var(--mnt-crit-ink); }

/* ============ filter bar ============
   A real GET form with no action attribute, so it re-submits to whichever module
   URL is showing. Single column on a phone; three across from 560px. */
.mnt-shell .mnt-filterbar {
    display: grid; grid-template-columns: 1fr; gap: var(--ds-space-2);
    background: var(--mnt-surface); border: 1px solid var(--mnt-line);
    border-radius: var(--mnt-radius); padding: var(--ds-space-3);
    margin: 0 0 var(--ds-space-3);
}
@media (min-width: 560px) {
    .mnt-shell .mnt-filterbar { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
    .mnt-shell .mnt-filterbar .mnt-filter-actions { grid-column: 1 / -1; }
}
.mnt-shell .mnt-filter-actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }

/* 11.5px label — normal-size text, so --mnt-ink-3's measured 5.05:1 light /
   6.69:1 dark against --mnt-surface is the number that governs. */
.mnt-shell .mnt-flabel {
    display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
    color: var(--mnt-ink-3); margin-bottom: 4px;
}
.mnt-shell .mnt-select,
.mnt-shell .mnt-input {
    width: 100%; min-height: var(--ds-touch-min);
    border: 1px solid var(--mnt-control-line); border-radius: var(--mnt-radius-sm);
    background: var(--mnt-surface-2); color: var(--mnt-ink);
    padding: 8px 10px; font-size: 14px; font-family: inherit;
}
.mnt-shell .mnt-input { font-variant-numeric: tabular-nums; }
.mnt-shell textarea.mnt-input { min-height: 88px; resize: vertical; }
.mnt-shell .mnt-select:focus-visible,
.mnt-shell .mnt-input:focus-visible { outline: 2px solid var(--mnt-accent); outline-offset: 1px; }

/* ============ category section header ============ */
.mnt-shell .mnt-sect {
    margin: var(--ds-space-5) 0 var(--ds-space-2);
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    /* On the PAGE surface here, not the card: light 5.30:1, dark 7.36:1. */
    color: var(--mnt-ink-3);
}
.mnt-shell .mnt-sect:first-child { margin-top: var(--ds-space-2); }

/* ============ the reminder ROW CARD ============ */
.mnt-shell .mnt-rows { display: flex; flex-direction: column; gap: var(--ds-space-3); }

.mnt-shell .mnt-row {
    position: relative; overflow: hidden;
    background: var(--mnt-surface); border: 1px solid var(--mnt-line);
    border-radius: var(--mnt-radius); box-shadow: var(--mnt-shadow);
    padding: var(--ds-space-3) var(--ds-space-3) var(--ds-space-3) calc(var(--ds-space-3) + 6px);
}

/* THE SEVERITY STRIPE IS REDUNDANT BY DESIGN. Every row also states its status in
   WORDS ("Overdue · grounding", "Completed"), so the stripe carries no information a
   colour-blind reader loses — WCAG 1.4.1.

   ⚠ THREE OF THE FOUR STRIPES CLEAR 3:1; THE FOURTH DOES NOT, AND THE EARLIER BLANKET
   CLAIM HERE WAS WRONG. Measured against the card, on the raw hue:
     light  ok 4.89 / warn 6.09 / danger 5.57
     dark   ok 8.31 / warn 7.52 / danger 6.78
   `.mnt-row.is-done::before` is the exception. It paints --mnt-line-strong, which the
   header block measures at 2.36:1 light (it is the same hairline the control-border
   note re-tones for form controls, precisely because a control boundary DOES owe 3:1).
   That is defensible and is not being hidden: WCAG 1.4.11 scopes the non-text floor to
   graphical objects "required to understand the content", and the DONE state is stated
   in text on the same row by .mnt-rstatus. The stripe is a second encoding of a fact
   already given in words, so nothing is lost when it is invisible. The token is
   deliberately NOT re-toned — a completed row must not compete for attention with an
   overdue one, and darkening it to pass a floor it does not owe would do exactly that. */
.mnt-shell .mnt-row::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--mnt-ok);
}
.mnt-shell .mnt-row.is-warn::before { background: var(--mnt-warn); }
.mnt-shell .mnt-row.is-crit::before { background: var(--mnt-crit); }
.mnt-shell .mnt-row.is-done::before { background: var(--mnt-line-strong); }

/* The row a redirect pointed at. A RING, not a fill: a background change would
   re-tone every ink measured above against the card surface. */
.mnt-shell .mnt-row.is-focus {
    border-color: var(--mnt-accent);
    box-shadow: 0 0 0 2px var(--mnt-accent-wash), var(--mnt-shadow);
}
.mnt-shell .mnt-row:target { scroll-margin-top: var(--ds-space-6); }

.mnt-shell .mnt-rhead {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--ds-space-2);
}
.mnt-shell .mnt-rname { font-size: 15px; font-weight: 700; color: var(--mnt-ink); }
/* The tail chip. --mnt-accent-ink on --mnt-accent-wash: light 6.14:1, dark 7.97:1. */
.mnt-shell .mnt-rtail {
    font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: var(--ds-radius-pill);
    color: var(--mnt-accent-ink); background: var(--mnt-accent-wash);
}
/* The status word. On the CARD surface: crit light 8.67 / dark 8.83; warn light
   8.63 / dark 9.48; ok light 7.41 / dark 10.04; the muted "tracked" ink is
   --mnt-ink-2 at light 6.15 / dark 7.68. */
.mnt-shell .mnt-rstatus {
    margin-left: auto; font-size: 12px; font-weight: 700; color: var(--mnt-ink-2);
}
.mnt-shell .mnt-rstatus.is-crit { color: var(--mnt-crit-ink); }
.mnt-shell .mnt-rstatus.is-warn { color: var(--mnt-warn-ink); }
.mnt-shell .mnt-rstatus.is-ok { color: var(--mnt-ok-ink); }

/* 12.5px meta line — normal-size text; --mnt-ink-3 on the card is 5.05 / 6.69. */
.mnt-shell .mnt-rmeta {
    margin: 3px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--mnt-ink-3);
}

/* ============ the figure row ============
   Wraps rather than scrolls — three short figures fit a 390px viewport in two
   lines, and a scroller here would hide the "remaining" figure, which is the one
   the operator came for. */
.mnt-shell .mnt-figs {
    display: flex; flex-wrap: wrap; gap: var(--ds-space-4) var(--ds-space-5);
    margin-top: var(--ds-space-3);
}
.mnt-shell .mnt-fig { min-width: 0; }
.mnt-shell .mnt-fig-v {
    display: block; font-size: 16px; font-weight: 800; letter-spacing: -.01em;
    font-variant-numeric: tabular-nums; color: var(--mnt-ink);
}
.mnt-shell .mnt-fig-v.is-crit { color: var(--mnt-crit-ink); }
.mnt-shell .mnt-fig-v.is-warn { color: var(--mnt-warn-ink); }
/* 11px uppercase caption — still NORMAL-size text at a 4.5:1 floor, never the
   3:1 large-text one. --mnt-ink-3 on the card: light 5.05:1, dark 6.69:1. */
.mnt-shell .mnt-fig-l {
    display: block; margin-top: 2px;
    font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
    color: var(--mnt-ink-3);
}

/* The advisory cadence projection, riding the due-date figure. Its own class so it
   does NOT inherit .account-field-help, one of the two estate inks the FW6c review
   measured under floor. */
.mnt-shell .mnt-projline {
    display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.35;
    color: var(--mnt-ink-3); max-width: 34ch;
}

.mnt-shell .mnt-ractions {
    display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin-top: var(--ds-space-3);
}

/* ============ the INLINE complete-and-advance panel ============
   Server-rendered expansion, opened by a plain GET (?complete=). Single column on
   a phone, two from 520px, exactly as the mock draws it. */
.mnt-shell .mnt-panel {
    display: grid; grid-template-columns: 1fr; gap: var(--ds-space-3);
    margin-top: var(--ds-space-3); padding-top: var(--ds-space-3);
    border-top: 1px dashed var(--mnt-control-line);
}
@media (min-width: 520px) {
    .mnt-shell .mnt-panel { grid-template-columns: 1fr 1fr; }
}
.mnt-shell .mnt-panel .mnt-full { grid-column: 1 / -1; }

/* The helper box. --mnt-accent-ink on --mnt-accent-wash: light 6.14:1, dark 7.97:1;
   its <strong> uses --mnt-ink, which on the wash is stronger still. */
.mnt-shell .mnt-helper {
    background: var(--mnt-accent-wash); border-radius: var(--mnt-radius-sm);
    padding: 10px 12px; font-size: 12.5px; line-height: 1.45; color: var(--mnt-accent-ink);
}
.mnt-shell .mnt-helper strong { color: var(--mnt-ink); }

/* ============ editor / templates / import screens ============ */
.mnt-shell .mnt-card {
    background: var(--mnt-surface); border: 1px solid var(--mnt-line);
    border-radius: var(--mnt-radius); box-shadow: var(--mnt-shadow);
    padding: var(--ds-space-4); margin: 0 0 var(--ds-space-4);
}
.mnt-shell .mnt-card > h2 {
    margin: 0 0 var(--ds-space-2); font-size: 15px; font-weight: 700; color: var(--mnt-ink);
}
.mnt-shell .mnt-formgrid {
    display: grid; grid-template-columns: 1fr; gap: var(--ds-space-3);
}
@media (min-width: 560px) {
    .mnt-shell .mnt-formgrid { grid-template-columns: 1fr 1fr; }
}
.mnt-shell .mnt-formgrid .mnt-full { grid-column: 1 / -1; }
.mnt-shell .mnt-fhelp {
    display: block; margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--mnt-ink-3);
}
.mnt-shell .mnt-fhelp strong { color: var(--mnt-ink-2); }
.mnt-shell .mnt-check { display: flex; align-items: flex-start; gap: 8px; }
.mnt-shell .mnt-check input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--mnt-accent); }
.mnt-shell .mnt-check label { font-size: 13.5px; font-weight: 600; color: var(--mnt-ink); }

/* The Advanced / other-dimension disclosures. A <details> so the fields inside
   still POST — collapsing them hides them, it never drops them from the form. */
.mnt-shell .mnt-details {
    border: 1px solid var(--mnt-line); border-radius: var(--mnt-radius-sm);
    background: var(--mnt-surface-2); padding: 0;
}
.mnt-shell .mnt-details > summary {
    cursor: pointer; list-style: none; padding: 12px 14px; min-height: var(--ds-touch-min);
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; color: var(--mnt-ink);
}
.mnt-shell .mnt-details > summary::-webkit-details-marker { display: none; }
.mnt-shell .mnt-details > summary::after { content: "▾"; margin-left: auto; color: var(--mnt-ink-3); }
.mnt-shell .mnt-details[open] > summary::after { content: "▴"; }
.mnt-shell .mnt-details > summary:focus-visible { outline: 2px solid var(--mnt-accent); outline-offset: -2px; }
.mnt-shell .mnt-details-body { padding: 0 14px 14px; }

/* ============ lists + empty states ============ */
.mnt-shell .mnt-tlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ds-space-2); }
.mnt-shell .mnt-tlist li {
    border: 1px solid var(--mnt-line); border-radius: var(--mnt-radius-sm);
    background: var(--mnt-surface-2); padding: 10px 12px;
}
.mnt-shell .mnt-tname { font-size: 14px; font-weight: 700; color: var(--mnt-ink); }

/* --mnt-ink-2 on the card: light 6.15:1, dark 7.68:1. */
.mnt-shell .mnt-empty {
    background: var(--mnt-surface); border: 1px dashed var(--mnt-control-line);
    border-radius: var(--mnt-radius); padding: var(--ds-space-5) var(--ds-space-4);
    font-size: 13.5px; line-height: 1.5; color: var(--mnt-ink-2); text-align: center;
}
.mnt-shell .mnt-empty strong { color: var(--mnt-ink); }

/* ==========================================================================
   FW8d SLICE 3 — THE ROW "⋯" MENU AND THE ASSIGN / COPY SHEET (mock screen 2b)
   --------------------------------------------------------------------------
   ⚠ EVERY PAIR BELOW WAS COMPUTED, NOT EYEBALLED, on the same resolved tokens
   listed at the head of this file, treating color-mix(in srgb, …) as the
   per-channel blend of gamma-encoded sRGB values that it is. Two pairs are NEW
   to this slice because these components paint small text on the CONTROL fill
   rather than on the card:
       --mnt-ink-3      on --mnt-surface-2   light 4.91:1   dark 6.46:1
       --mnt-accent-ink on --mnt-surface-2   light 6.94:1   dark 9.29:1
   Both clear the 4.5:1 normal-text floor in both themes at the sizes used
   below (11.5px and 13.5px are NORMAL-size text, never the 3:1 large-text
   tier). Everything else here reuses a pair already measured above.
   ========================================================================== */

/* Actions under a form body. Its own class rather than an inline style so the
   parse guard can see it and nothing here is an un-auditable one-off. */
.mnt-shell .mnt-formactions { margin-top: var(--ds-space-3); }

/* ============ the row overflow menu ============
   A <details>/<summary>, NOT a script-driven popover: it opens on click and on
   Enter/Space, is keyboard reachable, and is announced as a disclosure — all
   from the browser, on a surface that deliberately runs no JavaScript.

   ⚠ IT IS IN-FLOW, NOT ABSOLUTELY POSITIONED, AND THAT IS A CORRECTNESS
   CONSTRAINT rather than a taste. `.mnt-row` sets `overflow: hidden` so the
   severity stripe can be a ::before pinned to its rounded edge; an absolutely
   positioned menu would be CLIPPED by it and the lower items would simply not
   be reachable. In flow, the open menu takes a full row of its own inside the
   wrapping flex action bar. */
.mnt-shell .mnt-rowmenu { position: relative; }
.mnt-shell .mnt-rowmenu[open] { flex: 1 0 100%; }

/* The toggle is a .mnt-btn (colours and the 44px touch floor come from there);
   these rules only strip the default disclosure triangle, which would otherwise
   sit inside the button next to the ⋯ glyph. */
.mnt-shell .mnt-rowmenu-toggle {
    list-style: none; cursor: pointer; letter-spacing: .12em;
}
.mnt-shell .mnt-rowmenu-toggle::-webkit-details-marker { display: none; }
.mnt-shell .mnt-rowmenu-toggle::marker { content: ""; }
.mnt-shell .mnt-rowmenu-toggle:focus-visible { outline: 2px solid var(--mnt-accent); outline-offset: 2px; }

.mnt-shell .mnt-rowmenu-body {
    display: flex; flex-direction: column; overflow: hidden;
    margin-top: var(--ds-space-2); max-width: 320px;
    border: 1px solid var(--mnt-control-line); border-radius: var(--mnt-radius-sm);
    background: var(--mnt-surface-2);
}
.mnt-shell .mnt-rowmenu-body form { margin: 0; }

/* 13.5px normal-size text. --mnt-ink on --mnt-surface-2: light 13.62:1,
   dark 13.20:1 — the same pair .mnt-btn already carries. */
.mnt-shell .mnt-rowmenu-item {
    display: flex; align-items: center; width: 100%;
    min-height: var(--ds-touch-min); padding: 10px 14px;
    border: 0; border-bottom: 1px solid var(--mnt-line);
    background: none; color: var(--mnt-ink);
    font-family: inherit; font-size: 13.5px; font-weight: 600; text-align: left;
    text-decoration: none; cursor: pointer;
}
.mnt-shell .mnt-rowmenu-body > *:last-child .mnt-rowmenu-item,
.mnt-shell .mnt-rowmenu-body > .mnt-rowmenu-item:last-child { border-bottom: 0; }
.mnt-shell .mnt-rowmenu-item:hover { background: var(--mnt-surface); }
.mnt-shell .mnt-rowmenu-item:focus-visible { outline: 2px solid var(--mnt-accent); outline-offset: -2px; }

/* The origin stamp on a row. One step stronger than the meta line it sits under,
   because it is a recorded fact rather than page chrome. --mnt-ink-2 on the card
   surface: light 6.15:1, dark 7.68:1. */
.mnt-shell .mnt-rorigin { color: var(--mnt-ink-2); }

/* ============ FW8d slice 6 — the row menu's RETIRE confirm ============
   A <details> nested inside the menu's own <details>. It mints NO new colour pair:
   the summary is a .mnt-rowmenu-item wearing the existing .is-danger ink
   (--mnt-crit-ink, already measured at 8.43 light / 8.54 dark on --mnt-surface-2 in
   the button block below), and the body sits on --mnt-surface-2 like every other
   inset panel here. Only geometry is declared. */
.mnt-shell .mnt-rowmenu-confirm > summary.mnt-rowmenu-item {
    display: block; cursor: pointer; color: var(--mnt-crit-ink);
}
.mnt-shell .mnt-rowmenu-confirm > summary::-webkit-details-marker { display: none; }
.mnt-shell .mnt-rowmenu-confirm > summary::marker { content: ""; }
.mnt-shell .mnt-rowmenu-confirm > summary:focus-visible {
    outline: 2px solid var(--mnt-accent); outline-offset: -2px;
}
.mnt-shell .mnt-rowmenu-confirmbody {
    display: flex; flex-direction: column; gap: var(--ds-space-2);
    padding: var(--ds-space-3);
    background: var(--mnt-surface-2); border-top: 1px solid var(--mnt-line);
}
/* The reason field takes the panel's width rather than the .mnt-input default, so the
   placeholder is readable on a 390px viewport instead of clipped mid-word. */
.mnt-shell .mnt-rowmenu-confirmbody .mnt-input { width: 100%; }
.mnt-shell .mnt-rowmenu-confirmbody form {
    display: flex; flex-direction: column; gap: var(--ds-space-2); margin: 0;
}

/* ============ the tail checkbox grid ============
   Mobile-first: ONE column on a phone, then as many 150px-minimum columns as
   fit. auto-fit rather than a fixed count, so a six-aircraft fleet and a
   twenty-aircraft fleet both read well without a breakpoint each. */
.mnt-shell .mnt-assigngrid {
    display: grid; grid-template-columns: 1fr; gap: var(--ds-space-2);
    margin-top: var(--ds-space-2);
}
@media (min-width: 420px) {
    .mnt-shell .mnt-assigngrid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

.mnt-shell .mnt-tailck {
    display: flex; align-items: center; gap: 8px;
    min-height: var(--ds-touch-min); padding: 9px 12px;
    border: 1px solid var(--mnt-control-line); border-radius: var(--mnt-radius-sm);
    background: var(--mnt-surface-2); cursor: pointer;
}
.mnt-shell .mnt-tailck input {
    width: 18px; height: 18px; flex: none; accent-color: var(--mnt-accent);
}
/* The em-dash standing in for an absent checkbox on a target that cannot take
   the rule. Decorative (aria-hidden) — the REASON beside it is the carrier. */
.mnt-shell .mnt-tailck-mark { width: 18px; flex: none; text-align: center; color: var(--mnt-ink-3); }
/* 13.5px normal-size text; --mnt-ink on --mnt-surface-2 is 13.62 / 13.20. */
.mnt-shell .mnt-tailck-tail { font-size: 13.5px; font-weight: 700; color: var(--mnt-ink); }
/* 11.5px normal-size text; --mnt-ink-3 on --mnt-surface-2 measured 4.91:1 light,
   6.46:1 dark — above, computed for this slice. */
.mnt-shell .mnt-tailck-note { font-size: 11.5px; font-weight: 400; color: var(--mnt-ink-3); }

/* The per-template entrance to the assign sheet, on the stored-templates list. */
.mnt-shell .mnt-tassign { margin-top: var(--ds-space-2); }
/* The template name as a LINK (the assign sheet's chooser). --mnt-accent-ink on
   --mnt-surface-2: light 6.94:1, dark 9.29:1 — computed for this slice. */
.mnt-shell a.mnt-tname { color: var(--mnt-accent-ink); text-decoration: none; }
.mnt-shell a.mnt-tname:hover { text-decoration: underline; }
.mnt-shell a.mnt-tname:focus-visible { outline: 2px solid var(--mnt-accent); outline-offset: 2px; }

/* ==========================================================================
   FW8d SLICE 4 — THE CONSUMABLES MODULE (mock screen 3)
   --------------------------------------------------------------------------
   A nine-column stored-stock table with an adjust FORM nested inside one of its
   cells became stock ROW CARDS: name + scope + status, a level bar against the
   reorder point, and a one-tap restock / use on the row itself.

   ⚠ EVERY PAIR BELOW WAS COMPUTED, NOT EYEBALLED, on the SAME resolved tokens
   listed at the head of this file, treating color-mix(in srgb, …) as the
   per-channel blend of gamma-encoded sRGB values that it is. Resolved surfaces
   new to this section:
       --mnt-chip-bg (the bar TRACK)   light rgb(242,245,246)  dark rgb(29,37,44)
   Pairs computed for this slice:
       --mnt-ink    on --mnt-surface     light 14.00:1  dark 13.65:1
       --mnt-ink-2  on --mnt-surface-2   light  5.98:1  dark  7.42:1
   Everything else reuses a pair already measured above (--mnt-ink-2 on the card
   6.15 / 7.68; --mnt-ink-3 on the card 5.05 / 6.69; the three status inks on the
   card crit 8.67/8.83, warn 8.63/9.48, ok 7.41/10.04).
   ========================================================================== */

/* ============ the stock ROW CARD ============
   Deliberately NOT .mnt-row: a reminder row carries a severity STRIPE for an
   airworthiness state, and a stock level is not one. Understocked oil is a
   supply problem; borrowing the grounding vocabulary for it would devalue the
   stripe on the surface where it means an aircraft cannot fly. */
.mnt-shell .mnt-crow {
    position: relative;
    background: var(--mnt-surface); border: 1px solid var(--mnt-line);
    border-radius: var(--mnt-radius); box-shadow: var(--mnt-shadow);
    padding: var(--ds-space-3);
}

/* The row a redirect pointed at. A RING, not a fill — the same rule .mnt-row
   states: a background change would re-tone every ink measured against the card. */
.mnt-shell .mnt-crow.is-focus {
    border-color: var(--mnt-accent);
    box-shadow: 0 0 0 2px var(--mnt-accent-wash), var(--mnt-shadow);
}
.mnt-shell .mnt-crow:target { scroll-margin-top: var(--ds-space-6); }

/* RETIRED STOCK IS MUTED BY BORDER AND BY INK WEIGHT, NEVER BY OPACITY.
   An `opacity` or a lighter grey would take every measured pair in the card
   below the 4.5:1 floor at a stroke — the one shortcut this file exists to
   refuse. What actually changes: the border becomes dashed (a non-text cue at
   the 3:1 tier, carried by --mnt-control-line's measured 3.26:1 light / 4.48:1
   dark against this surface), the name drops from --mnt-ink to --mnt-ink-2
   (6.15:1 light / 7.68:1 dark on the card — still clear), and the row says
   "Inactive" in words. The words are the carrier; the styling repeats them. */
.mnt-shell .mnt-crow.is-retired { border-style: dashed; border-color: var(--mnt-control-line); }
.mnt-shell .mnt-crow.is-retired .mnt-cname { color: var(--mnt-ink-2); font-weight: 650; }

.mnt-shell .mnt-chead {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--ds-space-2);
}
.mnt-shell .mnt-cname { font-size: 15px; font-weight: 700; color: var(--mnt-ink); }
/* 11.5px normal-size text — --mnt-ink-3 on the card is 5.05:1 light, 6.69:1 dark. */
.mnt-shell .mnt-cscope { font-size: 11.5px; color: var(--mnt-ink-3); }
.mnt-shell .mnt-cstatus {
    margin-left: auto; font-size: 12px; font-weight: 700; color: var(--mnt-ink-2);
}
.mnt-shell .mnt-cstatus.is-crit { color: var(--mnt-crit-ink); }
.mnt-shell .mnt-cstatus.is-warn { color: var(--mnt-warn-ink); }
.mnt-shell .mnt-cstatus.is-ok { color: var(--mnt-ok-ink); }
.mnt-shell .mnt-cstatus.is-muted { color: var(--mnt-ink-2); }

/* ============ the level bar ============
   THE BAR IS REDUNDANT BY DESIGN (WCAG 1.4.1): the quantity, the unit and the
   reorder point are written beside it and the status is written above it, so a
   reader who cannot resolve the fill colour loses nothing. It still clears the
   3:1 non-text floor of WCAG 1.4.11 against its own track in both themes, and
   the TRACK carries a 1px --mnt-control-line border because the track fill is
   within 3% of the card surface and would otherwise be invisible.
   Fill vs track, measured:
     light  ok 4.68:1 / warn 5.83:1 / crit 5.33:1
     dark   ok 7.93:1 / warn 7.18:1 / crit 6.47:1 */
.mnt-shell .mnt-stock {
    display: flex; align-items: center; gap: var(--ds-space-3);
    margin-top: var(--ds-space-2);
}
.mnt-shell .mnt-bar {
    flex: 1 1 auto; min-width: 60px; height: 8px; overflow: hidden;
    border: 1px solid var(--mnt-control-line); border-radius: var(--ds-radius-pill);
    background: var(--mnt-chip-bg);
}
.mnt-shell .mnt-bar-fill {
    display: block; height: 100%; border-radius: var(--ds-radius-pill);
    background: var(--mnt-ok);
}
.mnt-shell .mnt-bar-fill.is-warn { background: var(--mnt-warn); }
.mnt-shell .mnt-bar-fill.is-crit { background: var(--mnt-crit); }
/* ⚠ THE RETIRED FILL IS THE SECOND MEMBER UNDER 3:1, and it is the same ink and the same
   reason as .mnt-row.is-done::before. --mnt-line-strong on the bar's --mnt-chip-bg track
   measures 2.26:1 light. WCAG 1.4.11 does not reach it: the whole bar is aria-hidden and
   repeats, in width and colour, what .mnt-qty / .mnt-rp / .mnt-cstatus already state in
   words ("Retired", the quantity, the reorder point), so it is not required to understand
   anything. Muting is the POINT here — retired stock is inactive, not a severity, and a
   fill re-toned to clear a floor it does not owe would read as a live level. */
.mnt-shell .mnt-bar-fill.is-muted { background: var(--mnt-line-strong); }

/* 13px / 11px, both NORMAL-size text. --mnt-ink on the card 14.00:1 light /
   13.65:1 dark; --mnt-ink-3 on the card 5.05:1 / 6.69:1. */
.mnt-shell .mnt-qty {
    font-size: 13px; font-weight: 700; white-space: nowrap;
    font-variant-numeric: tabular-nums; color: var(--mnt-ink);
}
.mnt-shell .mnt-rp { font-size: 11px; white-space: nowrap; color: var(--mnt-ink-3); }

/* ============ the inline restock / use control ============
   Mobile-first: it WRAPS. A 74px number field and two buttons do not fit a 390px
   viewport in one line, and a horizontally scrolling action row is one whose
   second button nobody finds. */
.mnt-shell .mnt-cact {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2);
    margin-top: var(--ds-space-3);
}
/* The quantity box is a .mnt-input at its natural width rather than the 100% the
   form grid gives it. Its border, fill and ink are that rule's, already measured. */
.mnt-shell .mnt-cqty { width: 84px; flex: none; }

/* The supplier / location stamp, pushed to the end of the action row on a wide
   viewport and dropping under it on a phone. --mnt-ink-3 on the card: 5.05:1 /
   6.69:1. */
.mnt-shell .mnt-cmeta { font-size: 11.5px; line-height: 1.4; color: var(--mnt-ink-3); }
@media (min-width: 560px) {
    /* ⚠ THE FIRST RULE IN A MEDIA BLOCK IS INVISIBLE TO THE PARSE GUARD. That test delimits selectors the
       way a CSS engine does — everything between the previous "}" and the next "{" — so the opening rule
       inside an at-rule is swallowed by the at-rule's own prelude and only the SECOND onwards is asserted.
       This one is the deliberate lead: a wider viewport can afford a wider delta box, and the rule that
       actually matters (the supplier stamp pushing to the end of the row) follows it where the guard can
       see it. */
    .mnt-shell .mnt-cqty { width: 96px; }
    .mnt-shell .mnt-cact .mnt-cmeta { margin-left: auto; text-align: right; }
}

/* THE VISUALLY-HIDDEN LABEL, minted here rather than aliased. The estate's
   `.visually-hidden` lives in calendar-grid.css under a `.ds` prefix — a
   stylesheet the maintenance routes do not link, so borrowing the name would
   produce a label that is simply VISIBLE on this page and nowhere else. Scoped
   under .mnt-shell like every other rule in this file. It clips rather than
   `display:none`, because a hidden label an assistive technology cannot reach is
   the same as no label at all. */
.mnt-shell .mnt-vh {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* The disclosure that replaces the adjust control on a retired row. Its own rule
   so the reason is styled as prose rather than as a disabled button. */
.mnt-shell .mnt-cnote {
    margin-top: var(--ds-space-3); font-size: 12px; line-height: 1.45;
    color: var(--mnt-ink-2);
}

/* ============ the show-retired toggle ============
   A LINK styled as a .mnt-btn (colours and the 44px touch floor come from there);
   `is-on` is the pressed state, and it is announced by aria-pressed as well as
   painted, so the state is not colour-only. --ds-accent-on on --mnt-accent is the
   measured 4.93:1 light / 8.54:1 dark pair .mnt-btn.is-primary already carries. */
.mnt-shell .mnt-btn.is-on {
    background: var(--mnt-accent-wash); border-color: var(--mnt-accent);
    color: var(--mnt-accent-ink);
}

/* ==========================================================================
   FW8d SLICE 5 — THE BLOCKS AND OIL/EXPENSE MODULES (mock screens 4 and 5)
   --------------------------------------------------------------------------
   ⚠ NOT ONE NEW COLOUR PAIR IS INTRODUCED BY THIS SECTION, AND THAT IS THE
   POINT. Both modules were built out of vocabulary this file already carries
   and has already measured: the block row is a `.mnt-row` (stripe, head, tail
   chip, status ink, figure row, action bar) and the two usage-trail rows are
   `.mnt-crow` (head, name, scope, status ink) with the `.mnt-rmeta` line and
   the `.mnt-helper` callout. Every text/background pair below therefore
   resolves to one already computed above, in both themes:
       .mnt-rname / .mnt-cname  --mnt-ink   on --mnt-surface   14.00 / 13.65
       .mnt-rmeta               --mnt-ink-3 on --mnt-surface     5.05 /  6.69
       .mnt-cscope              --mnt-ink-3 on --mnt-surface     5.05 /  6.69
       .mnt-rstatus.is-warn     --mnt-warn-ink on the card       8.63 /  9.48
       .mnt-rstatus.is-ok       --mnt-ok-ink   on the card       7.41 / 10.04
       .mnt-cstatus.is-muted    --mnt-ink-2    on the card       6.15 /  7.68
       .mnt-helper              --mnt-accent-ink on the wash     6.14 /  7.97
       .mnt-btn.is-danger       --mnt-crit-ink on --mnt-surface-2 8.43 / 8.54
   The rules added here are GEOMETRY ONLY — two margin resets and one spacing
   modifier — so there is no new contrast claim to make and none is made.

   ⚠ THE BLOCK STRIPE REUSES THE BASE `.mnt-row::before` FOR A CONFIRMED BLOCK
   AND `.is-warn` FOR A SUGGESTED ONE, exactly as the mock draws them, and it
   deliberately never reaches `.is-crit`: nothing on the blocks module is an
   airworthiness fact, and borrowing the grounding colour for "somebody should
   decide about this" would devalue the stripe on the surface where it means an
   aircraft cannot fly. Same rule `.mnt-crow` states one section up.
   ========================================================================== */

/* A <form> inside a flex action bar or toolbar is a FLEX ITEM carrying one
   button, so its default margin would break the row into ragged lines. The
   forms are siblings rather than nested by construction (nested forms are
   silently dropped by browsers), which is why there are several of them in one
   bar and why this reset is needed at all. */
.mnt-shell .mnt-ractions form,
.mnt-shell .mnt-toolbar form { margin: 0; }

/* THE CONFLICT CALLOUT ON A BLOCK ROW. It is a `.mnt-helper` — the same accent
   wash and the same measured ink the completion panel's helper uses — sitting
   directly on the row rather than inside a form panel, so this rule supplies
   only the gap the panel would otherwise have given it. */
.mnt-shell .mnt-rcallout { margin-top: var(--ds-space-3); }

/* TAIL SENTINEL — the FW5c lesson. An unterminated comment ANYWHERE above would
   swallow this rule, so a parse test that finds it live has proven the whole file
   parses. Inert by construction: nothing renders .mnt-css-sentinel. */
.mnt-shell .mnt-css-sentinel { display: none; }