/*
 * CMT Resources brand layer — see CMT-Resources-brand/BRAND.md for the rules this file implements.
 *
 * Loaded by both hosts after crew.css (Web: Pages/App.razor, MAUI: wwwroot/index.html), so the tokens
 * here are available everywhere and the heading rules win over MudBlazor's own typography classes.
 *
 * Only the three brand colours live here. Status greens, caution ambers and the rest of the functional
 * palette stay where they are — in crew.css and AppTheme.cs — untouched.
 */

:root {
    --cmt-blue: #1B5FD9; /* primary — mark/icon ground, "RESOURCES" on light */
    --cmt-orange: #FF6A00; /* accent only — never a fill, never a background, never body text */
    --cmt-ink: #101418; /* type on light, and the dark-mode ground */
}

/* ── headings ───────────────────────────────────────────────────────────────
   Archivo, caps, expanded width — headings only. Body, buttons, captions and
   subtitles keep the existing face and casing. The family is also set on H1-H6 in
   AppTheme.cs so MudBlazor's inline styles agree with this sheet; the caps and the
   width axis can only be expressed here.

   Delete this block to drop the caps treatment and keep everything else. */
.mud-typography-h1,
.mud-typography-h2,
.mud-typography-h3,
.mud-typography-h4,
.mud-typography-h5,
.mud-typography-h6,
.crew-greeting {
    font-family: "Archivo", "Rubik", Helvetica, Arial, sans-serif;
    font-variation-settings: "wdth" 112;
    text-transform: uppercase;
}

/* ── header mark ────────────────────────────────────────────────────────────
   32px, to the left of the screen title. Two <img> elements rather than one with a
   swapped src: the mark is a fixed asset per surface, and BRAND.md forbids recolouring
   it, so the white cut is a different file. Dark mode is MudBlazor's .mud-theme-dark on
   the body; the Cockpit (EFIS) theme adds .theme-cockpit and is always dark. */
.cmt-header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
}

/* When the page's data was last read, beside the header refresh. Caption weight on purpose: it is
   provenance for what is on screen, not a heading, and it must never compete with the page title. */
.cmt-header__synced {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.6;
    white-space: nowrap;
}

/* The one extra action a page may lend the header, beside the refresh. Tinted rather than filled so
   it reads as secondary to the page title it sits next to, and still as a control. */
.cmt-header__action {
    background: rgba(27, 95, 217, 0.10);
}

.mud-theme-dark .cmt-header__action,
.theme-cockpit .cmt-header__action {
    background: rgba(255, 255, 255, 0.08);
}

/* The step list a refresh reports into, directly under the header it belongs to. It takes layout
   space rather than floating over the page: the page below stays readable and nothing is covered
   while an update runs. */
.cmt-refresh {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 16px 10px;
}

.cmt-refresh__step {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 20px;
    font-size: 0.8rem;
}

/* The step names carry the run; a step still queued is dimmed so the eye lands on what is happening
   now rather than reading the whole list every frame. */
.cmt-refresh__name {
    white-space: nowrap;
}

.cmt-refresh__detail {
    font-size: 0.7rem;
    opacity: 0.6;
    /* The reason a step failed can be any length the server chose, so it wraps rather than pushing
       the panel wider than the screen. */
    overflow-wrap: anywhere;
}

.cmt-refresh__detail--error {
    opacity: 0.85;
}

.cmt-refresh__dismiss {
    align-self: flex-start;
}

.cmt-mark {
    display: block;
    width: 32px;
    height: 32px;
    /* Clear space: one tick length, ~11% of the diameter (BRAND.md). */
    margin: 0 3.5px;
    flex: 0 0 auto;
}

.cmt-mark--on-dark {
    display: none;
}

.mud-theme-dark .cmt-mark--on-light,
.theme-cockpit .cmt-mark--on-light {
    display: none;
}

.mud-theme-dark .cmt-mark--on-dark,
.theme-cockpit .cmt-mark--on-dark {
    display: block;
}

/* ── launch screen ──────────────────────────────────────────────────────────
   Covers the WebView while Blazor boots. The light lockup is transparent art meant for
   white; the dark one carries its own #101418 ground, so each gets the background
   BRAND.md pairs it with. Removed from the DOM by index.html once Blazor has started. */
#cmt-splash {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
}

#cmt-splash img {
    width: 60%;
    max-width: 520px;
    height: auto;
}

#cmt-splash .cmt-splash--dark {
    display: none;
}

@media (prefers-color-scheme: dark) {
    #cmt-splash {
        background: var(--cmt-ink);
    }

    #cmt-splash .cmt-splash--light {
        display: none;
    }

    #cmt-splash .cmt-splash--dark {
        display: block;
    }
}

/* ── printable schedule export ──────────────────────────────────────────────
   The mono ink cut at ~18mm in the sheet header. The sheet itself is styled in crew.css;
   this only places the mark. */
@media print {
    .crew-print__head {
        display: flex;
        align-items: flex-start;
        gap: 6mm;
    }

    .crew-print__mark {
        width: 18mm;
        height: 18mm;
        flex: 0 0 auto;
    }
}