/* ThinkTorch app skin - ORCH-81.

   MudBlazor's Material defaults are switched off nearly everywhere in this app:
   62 components carry Elevation="0". The shadow was doing all the work of saying
   "this is a separate object", so removing it left the surfaces edgeless. This
   file puts that separation back as a hairline rule, which is how an operator's
   console draws it, and puts machine values - ids, timestamps, durations, counts -
   into IBM Plex Mono with tabular figures so columns of them line up.

   Loaded after MudBlazor.min.css so these rules win, and written entirely against
   .mud- classes and MudBlazor's own palette variables, so it follows light and
   dark automatically and cannot reach into .tt-landing, which owns its own tokens.

   The palette, the type scale and the 4px radius live in MainLayout.razor's
   MudTheme. Only what a theme object cannot express belongs here. */

:root {
    --orch-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", monospace;
    --orch-hair: 1px solid var(--mud-palette-lines-default);
}

/* ---- 1. Text ---------------------------------------------------------------
   caption and overline are where this app puts its small print, and its small
   print is almost always something a machine produced. .orch-mono is the escape
   hatch for a machine value that is neither. */
.mud-typography-caption,
.mud-typography-overline,
.orch-mono {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.orch-mono {
    font-family: var(--orch-mono);
}

/* ---- 2. Table --------------------------------------------------------------
   Header cells become labels rather than headings: mono, small, tracked out,
   secondary. Body figures get tabular numerals so a column of durations or run
   counts reads as a column. */
.mud-table-cell {
    font-variant-numeric: tabular-nums;
    border-bottom-color: var(--mud-palette-table-lines);
}

/* .mud-table-root is carried only to out-specify MudBlazor's own
   .mud-table-root .mud-table-head .mud-table-cell, which pins the colour to
   text-primary and would otherwise beat this rule's colour alone. */
.mud-table-root .mud-table-head .mud-table-cell {
    font-family: var(--orch-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    border-bottom: var(--orch-hair);
}

/* The container already draws the bottom edge; a last row border doubles it. */
.mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: none;
}

/* ---- 3. Button -------------------------------------------------------------
   The uppercase is dropped in MudTheme's Typography. What is left is the edge:
   a filled button on a warm ground needs a darker rim to read as a key you press
   rather than a coloured rectangle. rgba black works on both palettes because the
   contrast text on Primary is dark ink in both. */
.mud-button-root {
    letter-spacing: 0;
}

.mud-button-filled {
    border: 1px solid rgba(0, 0, 0, 0.22);
}

.mud-button-outlined {
    border-width: 1px;
}

/* ---- 4. Alert --------------------------------------------------------------
   Alerts are tinted panels with no edge once the elevation is gone, so they blend
   into the page at exactly the moment they are trying to interrupt it. Each takes
   a hairline in its own severity colour. */
.mud-alert {
    border: var(--orch-hair);
}

.mud-alert-text-info, .mud-alert-outlined-info { border-color: var(--mud-palette-info); }
.mud-alert-text-success, .mud-alert-outlined-success { border-color: var(--mud-palette-success); }
.mud-alert-text-warning, .mud-alert-outlined-warning { border-color: var(--mud-palette-warning); }
.mud-alert-text-error, .mud-alert-outlined-error { border-color: var(--mud-palette-error); }

/* ---- 5. Card and paper - deliberately empty ---------------------------------

   Nothing belongs here, and this note exists so the next person does not add
   it back. MudPaper and MudCard emit no class for Elevation="0" - they omit
   the mud-elevation-N class rather than writing mud-elevation-0 - so
   .mud-paper.mud-elevation-0 matches nothing at all. (MudAlert does emit
   mud-elevation-0, which is why the check has to be per component.)

   Nor is one needed. 56 of this app's 62 Elevation="0" usages also pass
   Outlined="true" and already draw a 1px edge, which now takes the warm
   --mud-palette-lines-default from the theme (verified in the browser:
   rgb(227, 218, 203) on all seven papers of the dashboard). Of the remaining
   six, one MudTabs and one MudSimpleTable set their own border, and three of
   the rest sit inside an outlined card, where a second hairline only doubles
   the first. MudCardHeader is never used in this app, so a card-head rule
   would be dead too. */

/* ---- 6. Chip ---------------------------------------------------------------
   Chips in this app are almost entirely run status - succeeded, failed, running -
   which is machine vocabulary, so they take the mono face and a tighter radius
   than the theme's 4px. */
.mud-chip {
    font-family: var(--orch-mono);
}

/* The size classes carry MudBlazor's pill radius at (0,2,0), so the square-off
   has to be qualified to match it - .mud-chip alone loses and the chip stays a
   12px pill. Height and font-size are left to those classes on purpose. */
.mud-chip.mud-chip-size-small,
.mud-chip.mud-chip-size-medium,
.mud-chip.mud-chip-size-large {
    border-radius: 3px;
}

.mud-chip.mud-chip-filled {
    border: 1px solid rgba(0, 0, 0, 0.22);
}

.mud-chip.mud-chip-text,
.mud-chip.mud-chip-outlined {
    border: 1px solid currentColor;
}

/* ---- The frame -------------------------------------------------------------
   Not one of the six, but leaving it out would undo them: the app bar and drawer
   are the only two components still on Elevation="1", and a Material drop shadow
   is both invisible on a near-black ground and the last obvious Material tell on
   a light one. Same hairline, same reasoning. */
.mud-appbar {
    box-shadow: none;
    border-bottom: var(--orch-hair);
}

.mud-drawer {
    box-shadow: none;
    border-right: var(--orch-hair);
}