/*
 * MudBlazor density + shape overrides per ADR-026 / UX principle §5.
 * This is the ONLY place we restyle MudBlazor selectors.
 * Keep the override list small — if it grows beyond ~200 lines, we should
 * reconsider the framework call, not keep patching.
 */

/* -------- Surface shape — 2px corners everywhere -------------------- */

.mud-paper,
.mud-card,
.mud-alert,
.mud-menu-popover,
.mud-popover,
.mud-dialog,
.mud-expansion-panel,
.mud-select-popover,
.mud-autocomplete-paper {
    border-radius: var(--meridian-radius) !important;
}

/* -------- Dropdown / list selected item — readable, not a solid accent bar ----
 * MudBlazor renders a SELECTED MudList / MudSelect / autocomplete item with
 * `background: var(--mud-palette-primary-hover)` AND `color: var(--mud-palette-primary)`.
 * Both resolve to the accent (lime), so the selected row is lime text on a lime bar —
 * effectively invisible. The design's selected-row treatment (components.jsx MRow) is a
 * SUBTLE accent-soft tint with normal text, so mirror that. Targeted to the selected list
 * item only — deliberately NOT a change to the global `--mud-palette-primary-hover` token,
 * which also drives primary-button hover. */
.mud-list-item.mud-selected-item,
.mud-select-popover .mud-list-item.mud-selected-item,
.mud-autocomplete-paper .mud-list-item.mud-selected-item,
.mud-list-item.mud-selected-item:hover,
.mud-select-popover .mud-list-item.mud-selected-item:hover,
.mud-autocomplete-paper .mud-list-item.mud-selected-item:hover {
    background-color: var(--meridian-accent-soft) !important;
    color: var(--meridian-text) !important;
}
/* The selected item's leading check / text keeps the accent as an accent, which reads
   clearly on the soft tint in both themes (light 18b800-on-dcf6d1, dark 9cff3a-on-223a12). */
.mud-list-item.mud-selected-item .mud-list-item-icon,
.mud-select-popover .mud-list-item.mud-selected-item .mud-list-item-icon {
    color: var(--meridian-accent) !important;
}

/* Drawer has its own, deliberately flat. Force overflow-y so that long
   nav menus (Settings group expanded) are scrollable rather than clipped.
   End the drawer 22px above the viewport bottom so the fixed status strip
   (`.m-status`, height 22px, position: fixed; bottom: 0) does not overlay
   the last nav entry. Using `bottom: 22px` rather than `padding-bottom`
   sidesteps box-sizing-related clipping where padding would extend past
   the viewport rather than reduce the scrollable area. */
.mud-drawer {
    border-right: 1px solid var(--meridian-border);
    background: var(--meridian-bg-panel);
    overflow-y: auto;
    bottom: 22px !important;
    height: auto !important;
}

/* AppBar sits on its own border, not a shadow */
.mud-appbar {
    box-shadow: none;
    border-bottom: 1px solid var(--meridian-border);
    background-color: var(--meridian-bg-panel) !important;
    color: var(--meridian-text) !important;
}

.mud-appbar .mud-typography {
    color: var(--meridian-text);
}

/* -------- Overlay / modal backdrop ---------------------------------
 * Whenever a dialog, drawer (slide-over), or modal popover opens, the
 * page behind it is both blurred and tinted, and the foreground
 * surface gets a raised background + heavier shadow so the user's
 * focus is unambiguous. Driven through MudBlazor's shared
 * `.mud-overlay-scrim`, so dialogs and drawers share the treatment.
 * -------------------------------------------------------------------- */

.mud-overlay-scrim {
    background-color: rgba(8, 11, 16, 0.55) !important;
    backdrop-filter: blur(6px) saturate(0.85);
    -webkit-backdrop-filter: blur(6px) saturate(0.85);
}

.mud-dialog-container .mud-dialog,
.mud-drawer.mud-drawer-temporary {
    background: var(--meridian-bg-raised) !important;
    box-shadow:
        0 24px 60px -16px rgba(0, 0, 0, 0.55),
        0 0 0 1px var(--meridian-border) !important;
}

/* -------- Typography ------------------------------------------------ */

.mud-typography {
    font-family: var(--meridian-font-sans);
}

.mud-typography-overline {
    font-family: var(--meridian-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    color: var(--meridian-text-mid);
    text-transform: uppercase;
}

.mud-typography-caption {
    font-size: 11px;
    color: var(--meridian-text-dim);
}

.mud-typography-h4 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.5px;
}

.mud-typography-h5 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.3px;
}

.mud-typography-h6 {
    font-size: 15px;
    font-weight: 600;
}

/* -------- Tables — dense by default -------------------------------- */

.mud-table-root,
.mud-table {
    font-size: 12px;
}

.mud-table-head .mud-table-cell {
    font-family: var(--meridian-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--meridian-text-mid);
    padding: 8px 12px;
    background: var(--meridian-bg-panel);
    border-bottom: 1px solid var(--meridian-border);
}

.mud-table-body .mud-table-cell {
    padding: 6px 12px;
    border-bottom: 1px solid var(--meridian-border-hair);
    min-height: var(--meridian-row-height);
    color: var(--meridian-text);
}

.mud-table-dense .mud-table-cell,
.mud-table-dense-row .mud-table-cell {
    padding: 4px 10px;
}

.mud-table-row:hover .mud-table-cell {
    background: var(--meridian-lane-row-alt);
}

/* -------- Data grid ------------------------------------------------- */

.mud-table .mud-table-container,
.mud-data-grid .mud-table-container {
    background: var(--meridian-bg-panel);
}

/* -------- Chips ----------------------------------------------------- */

.mud-chip {
    border-radius: var(--meridian-radius);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    padding: 1px 6px;
    height: 20px;
    line-height: 1.5;
}

.mud-chip.mud-chip-size-small {
    height: 18px;
    font-size: 9.5px;
    padding: 0 6px;
    border-radius: var(--meridian-radius); /* override MudBlazor's 12px pill */
}

.mud-chip.mud-chip-size-medium {
    height: 22px;
    font-size: 10px;
    padding: 1px 8px;
    border-radius: var(--meridian-radius); /* override MudBlazor's 16px pill */
}

.mud-chip.mud-chip-size-large {
    border-radius: var(--meridian-radius); /* override MudBlazor's 20px pill */
}

/* Outlined chips use coloured border + soft background */
.mud-chip.mud-chip-color-success {
    background: var(--meridian-pass-soft);
    color: var(--meridian-pass);
}

.mud-chip.mud-chip-color-error {
    background: var(--meridian-fail-soft);
    color: var(--meridian-fail);
}

.mud-chip.mud-chip-color-warning {
    background: var(--meridian-warn-soft);
    color: var(--meridian-warn);
}

.mud-chip.mud-chip-color-info {
    background: var(--meridian-info-soft);
    color: var(--meridian-info);
}

.mud-chip.mud-chip-color-primary {
    background: var(--meridian-accent-soft);
    color: var(--meridian-accent);
}

.mud-chip.mud-chip-color-default {
    background: var(--meridian-chip-bg);
    color: var(--meridian-text-mid);
}

/* -------- Buttons --------------------------------------------------- */

/*
 * MudBlazor → Design-system variant mapping
 * ─────────────────────────────────────────────────────────────────────
 * Variant.Filled  Color.Primary   → solid primary (lime fill)      ✓
 * Variant.Filled  Color.Default   → .m-btn--solid via CSS below     ✓
 * Variant.Outlined                → ghost (transparent + border)   ✓
 * Variant.Text                    → bare  (no border, no bg)       ✓
 * Color.Error                     → danger (red fill)              ✓
 * Color.Success                   → pass  (green fill)             ✓
 *
 * Semantic button variant classes (use Class="m-btn--{variant}" on MudButton
 * when you need to explicitly force a design-system variant):
 *   .m-btn--primary  dark fill + bg text
 *   .m-btn--solid    bgRaised + borderStrong + text — use where audit calls out
 *                    "solid" buttons on Settings, ReleaseDetail, TestCaseDetail
 *   .m-btn--ghost    transparent + border (= Variant.Outlined, redundant but explicit)
 *   .m-btn--bare     no border, no bg
 *   .m-btn--danger   fail fill
 *   .m-btn--pass     pass fill
 */

.mud-button-root {
    border-radius: var(--meridian-radius);
    font-family: var(--meridian-font-sans);
    font-weight: 500;
    letter-spacing: 0.1px;
    text-transform: none;
    font-size: 12px;
    padding: 5px 10px;
    min-width: 0;
    line-height: 1.4;
    /* All buttons carry a border in the design system. Filled buttons get
       a border matching their background; outlined/text variants use the
       standard border token. MudBlazor renders .mud-button-root with an
       inner span so we set border here at the root level. */
    border: 1px solid transparent;
}

.mud-button-root.mud-size-small {
    font-size: 11px;
    padding: 3px 8px;
}

.mud-button-root.mud-size-large {
    font-size: 13px;
    padding: 7px 14px;
}

/* Outlined → ghost: transparent bg, design border colour */
.mud-button-outlined {
    border-color: var(--meridian-border) !important;
    background: transparent !important;
    color: var(--meridian-text-mid) !important;
}
.mud-button-outlined:hover {
    background: var(--meridian-bg-sunk) !important;
    color: var(--meridian-text) !important;
}

/* Filled Color.Default (grey MUI default) → remap to --solid style.
   This eliminates the off-token #e0e0e0 / dark-equivalent grey that
   the design system does not define. */
.mud-button-filled:not(.mud-button-color-primary):not(.mud-button-color-error):not(.mud-button-color-success):not(.mud-button-color-warning):not(.mud-button-color-info):not(.mud-button-color-secondary):not(.mud-button-color-tertiary) {
    background: var(--meridian-bg-raised) !important;
    color: var(--meridian-text) !important;
    border-color: var(--meridian-border-strong) !important;
}
.mud-button-filled:not(.mud-button-color-primary):not(.mud-button-color-error):not(.mud-button-color-success):not(.mud-button-color-warning):not(.mud-button-color-info):not(.mud-button-color-secondary):not(.mud-button-color-tertiary):hover {
    background: var(--meridian-bg-sunk) !important;
}

/* Text → bare: no border, no bg, dim text */
.mud-button-text {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--meridian-text-mid) !important;
}
.mud-button-text:hover {
    background: var(--meridian-bg-sunk) !important;
    color: var(--meridian-text) !important;
}

/* ── Native <button> base class for semantic variant use ──────────
   Use class="m-btn m-btn--{variant}" on raw <button> / <a> elements
   when MudButton is not needed (e.g. external hrefs, Blazor @onclick).
   This matches the MButton reference in docs/ux/claude-design/components.jsx. */
.m-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 11.5px;
    font-weight: 500;
    font-family: var(--meridian-font-sans);
    border-radius: var(--meridian-radius);
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    color: var(--meridian-text-mid);
    transition: background 0.1s, color 0.1s;
}

/* ── Semantic variant utility classes ────────────────────────────── */
/* Use Class="m-btn--solid" on MudButton for the "surface raise" style */
.m-btn--primary,
.mud-button-root.m-btn--primary {
    background: var(--meridian-text) !important;
    color: var(--meridian-bg) !important;
    border-color: var(--meridian-text) !important;
}
.m-btn--primary:hover,
.mud-button-root.m-btn--primary:hover {
    opacity: 0.88;
}

.m-btn--solid,
.mud-button-root.m-btn--solid {
    background: var(--meridian-bg-raised) !important;
    color: var(--meridian-text) !important;
    border-color: var(--meridian-border-strong) !important;
}
.m-btn--solid:hover,
.mud-button-root.m-btn--solid:hover {
    background: var(--meridian-bg-sunk) !important;
}

.m-btn--ghost,
.mud-button-root.m-btn--ghost {
    background: transparent !important;
    color: var(--meridian-text-mid) !important;
    border-color: var(--meridian-border) !important;
}
.m-btn--ghost:hover,
.mud-button-root.m-btn--ghost:hover {
    background: var(--meridian-bg-sunk) !important;
    color: var(--meridian-text) !important;
}

.m-btn--bare,
.mud-button-root.m-btn--bare {
    background: transparent !important;
    color: var(--meridian-text-mid) !important;
    border-color: transparent !important;
}
.m-btn--bare:hover,
.mud-button-root.m-btn--bare:hover {
    background: var(--meridian-bg-sunk) !important;
    color: var(--meridian-text) !important;
}

.m-btn--danger,
.mud-button-root.m-btn--danger {
    background: var(--meridian-fail) !important;
    color: #fff !important;
    border-color: var(--meridian-fail) !important;
}
.m-btn--danger:hover,
.mud-button-root.m-btn--danger:hover {
    opacity: 0.88;
}

.m-btn--pass,
.mud-button-root.m-btn--pass {
    background: var(--meridian-pass) !important;
    /* On-pass ink must flip with the theme: the pass fill is dark-saturated in
       light (white passes AA) but bright lime in dark (white fails ~1.4:1). Use
       the theme-aware success contrast token — white in light, dark ink in dark. #725 */
    color: var(--mud-palette-success-text) !important;
    border-color: var(--meridian-pass) !important;
}
.m-btn--pass:hover,
.mud-button-root.m-btn--pass:hover {
    opacity: 0.88;
}

.mud-icon-button {
    border-radius: var(--meridian-radius);
    padding: 6px;
}

/* -------- Tabs ------------------------------------------------------ */

.mud-tabs-toolbar {
    border-bottom: 1px solid var(--meridian-border);
    background: transparent;
    min-height: 36px;
}

.mud-tab {
    font-family: var(--meridian-font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1px;
    text-transform: none;
    min-width: 0;
    padding: 8px 12px;
    min-height: 36px;
    color: var(--meridian-text-mid);
}

/* WCAG AA (#725): MudBlazor colours the active tab's TEXT with the primary
   (lime) token — which is 2.56:1 on the light canvas and fails AA. Meridian tabs
   convey the active state with the accent underline slider below, so the label
   itself must stay the strong neutral ink. !important is required because
   MudBlazor's .mud-tabs-tabbar-{color} .mud-tab-active selector is more specific
   and would otherwise re-introduce the lime label. */
.mud-tab.mud-tab-active {
    color: var(--meridian-text) !important;
}

.mud-tabs-tabbar-slider {
    background: var(--meridian-accent);
    height: 2px;
}

/* -------- Utilities ------------------------------------------------- */

/* Mono timestamp — use on time labels in activity feeds, drilldowns, etc.
   Renders with the design-system mono font stack and tabular numbers so that
   timestamps stay visually aligned across rows (matching MButton reference in
   docs/ux/claude-design/components.jsx). */
.m-mono-time {
    font-family: var(--meridian-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    /* I-audit fix — text-faint (#a3abb8) on bg-panel (#fafbfc) is 2.23:1,
       below WCAG 2.1 AA 4.5:1 threshold. text-mid (#3d4450) gives ~8:1. */
    color: var(--meridian-text-mid);
    white-space: nowrap;
}

/* Form field that should absorb the free space in a horizontal MudStack row,
   e.g. a date field sitting beside a fixed-width hint. Exists so call sites do
   not need an inline Style="flex:1", which is forbidden for layout on
   primitives (docs/ux/design-audit.md §2.6). */
.m-field-grow {
    flex: 1 1 0;
    min-width: 0;
}

/* -------- Inputs ---------------------------------------------------- */

.mud-input-control .mud-input {
    font-size: 12px;
}

.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--meridian-radius);
    border-color: var(--meridian-border);
}

/*
 * §2.6 Form labels — mono uppercase tracked-out (matches MField in components.jsx).
 * Design spec: fontFamily mono, 10px, uppercase, letterSpacing 0.8px, textMid colour.
 * Verified against: /settings/general, /settings/api-keys, /settings/eventing.
 */
.mud-input-label,
.mud-input-label-text,
.mud-form-control-label .mud-input-label-text {
    font-family: var(--meridian-font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--meridian-text-mid);
}

/*
 * Outlined-border notch fix (systemic — audit/reason prompts, settings, etc.).
 * MudBlazor sizes the border "notch" that the floating label sits in from the
 * width of the <legend> INSIDE .mud-input-outlined-border (framework CSS:
 * `legend{width:0}` normal, `legend{width:auto;padding:0 5px}` when shrunk —
 * the legend auto-widths to its own untouched text, and that width becomes the
 * gap the border line skips). The legend does NOT inherit the label's
 * uppercase/mono/tracked-out treatment above, so the notch is reserved for
 * plain-case text ~20-30% narrower than the actual (uppercase, wider-tracked,
 * monospace) label glyphs it needs to clear — the border re-appears mid-label
 * and visibly strikes through the tail of the text. Match the legend's font
 * metrics to the label's so the notch opens exactly as wide as what's floating
 * over it. (Font-size intentionally left alone: the legend's un-scaled default
 * already renders at the same effective size as the label's scale(0.75)
 * shrink transform — only the uppercase/tracking/family were mismatched.)
 */
.mud-input.mud-input-outlined .mud-input-outlined-border legend {
    font-family: var(--meridian-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* -------- Date / time pickers --------------------------------------
 * MudBlazor paints every picker's toolbar with `mud-theme-primary`
 * (`background-color: var(--mud-palette-primary) !important`). Meridian's
 * primary IS the accent — #18b800 in light, neon lime #9cff3a in dark — so an
 * opened MudDatePicker led with a 100px slab of saturated lime, and every
 * accent-coloured control inside it (selected day, month/year drilldown, the
 * Clear/OK actions) resolved to accent-on-panel text that sits below 4.5:1 in
 * light mode. In dark mode the slab is the brightest thing on screen and the
 * 34px date readout sitting on it is the owner-reported legibility failure
 * (#1631).
 *
 * There is no lime toolbar in the design: form-controls.jsx `MDate` is a plain
 * bordered input on `bgRaised` with `border` hairlines and mono 12px text, and
 * the surrounding design language uses `bgSunk` for header bands and reserves
 * the accent for a single focused affordance. These rules bring the whole
 * picker surface — field, popover, toolbar, calendar, drilldowns, actions and
 * the time clock — onto Meridian tokens so both themes stay legible.
 *
 * Deliberately global (no per-instance Class): MudBlazor renders the popover
 * into the overlay portal at <body>, so a `Class` on the component reaches the
 * inline input wrapper but NOT the calendar surface where the defect lives.
 * -------------------------------------------------------------------------- */

/* Popover surface — panel ground + hairline, matching every other Meridian
   floating surface. (Radius already comes from the `.mud-paper` rule above.) */
.mud-picker-popover-paper,
.mud-picker-inline-paper .mud-paper,
.mud-picker-static {
    background-color: var(--meridian-bg-panel);
    border: 1px solid var(--meridian-border);
}

/* Toolbar — flat, dense, recessed band instead of the accent slab.
   `!important` is required: `.mud-theme-primary` declares both properties
   `!important` in the framework stylesheet. */
.mud-picker .mud-picker-toolbar,
.mud-picker-toolbar.mud-theme-primary,
.mud-picker-container .mud-toolbar.mud-picker-toolbar {
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 16px !important;
    background-color: var(--meridian-bg-sunk) !important;
    color: var(--meridian-text) !important;
    border-bottom: 1px solid var(--meridian-border-hair);
}

/* Date readout — H4-scale, not MudBlazor's 34px Material display size.
   The `color` declarations through the rest of this block carry `!important`
   because these are all MudButton-derived elements: MudBlazor colours them
   from its own button/day rules, which win on specificity over anything
   reasonable written here. Without it the date and the year both land on
   `action-default` and the toolbar's type hierarchy collapses. */
.mud-picker-datepicker-toolbar .mud-button-date,
.mud-picker-datepicker-toolbar .mud-button-date .mud-button-label {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.3px;
    color: var(--meridian-text) !important;
}

/* Year line above it — the design's overline treatment. */
.mud-picker-datepicker-toolbar .mud-button-year,
.mud-picker-datepicker-toolbar .mud-button-year .mud-button-label {
    font-family: var(--meridian-font-mono);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--meridian-text-dim) !important;
}

/* Month/year switcher row — the arrows sit on the panel, not a surface chip. */
.mud-picker-calendar-header-switch > .mud-icon-button {
    background-color: transparent;
    color: var(--meridian-text-mid);
}

.mud-picker-calendar-header-switch > .mud-icon-button:hover {
    background-color: color-mix(in srgb, var(--meridian-accent) 14%, transparent);
    color: var(--meridian-text);
}

.mud-picker-calendar-header-switch .mud-picker-calendar-header-transition .mud-typography {
    color: var(--meridian-text);
    font-weight: 600;
}

/* Weekday header — mono, dim, uppercase (matches the design's column labels). */
.mud-picker-calendar-header-day .mud-day-label {
    font-family: var(--meridian-font-mono);
    font-size: 10px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--meridian-text-dim);
}

/* ── Calendar days ─────────────────────────────────────────────────────── */

.mud-picker-calendar .mud-day {
    color: var(--meridian-text) !important;
}

/* Hover on an unselected day — the same faint accent wash used for selected
   list rows, so the day number keeps its own ink and stays readable. */
.mud-picker-calendar .mud-day:hover:not(.mud-selected),
.mud-picker-calendar .mud-day:focus-visible:not(.mud-selected) {
    background-color: color-mix(in srgb, var(--meridian-accent) 14%, transparent);
    color: var(--meridian-text);
}

/* Today — an accent ring, not a fill. `-strong` keeps the numeral above 4.5:1
   on the light panel (the base accent is only ~3.4:1 there); in dark `-strong`
   aliases to the base accent. The 1px ring is non-text UI, so the base accent
   clears the 3:1 bar of WCAG 1.4.11 in both themes. */
.mud-picker-calendar .mud-day.mud-current:not(.mud-selected) {
    box-shadow: inset 0 0 0 1px var(--meridian-accent);
    color: var(--meridian-accent-strong) !important;
    font-weight: 600;
}

/* Selected day — the one accent fill in the surface. On-accent ink is the
   audited pair (#0e1116 on #18b800 = 7.11:1 light; #0a0d12 on #9cff3a =
   15.55:1 dark). Hover/focus/active are pinned so MudBlazor's runtime-derived
   `--mud-palette-primary-darken` cannot shift the fill out from under the
   fixed dark ink. */
.mud-picker-calendar .mud-day.mud-selected,
.mud-picker-calendar .mud-day.mud-selected:hover,
.mud-picker-calendar .mud-day.mud-selected:focus-visible,
.mud-picker-calendar .mud-day.mud-selected:active {
    background-color: var(--meridian-accent) !important;
    color: var(--meridian-accent-text) !important;
    font-weight: 600;
}

/* Days spilling in from the neighbouring months — present but recessive. */
.mud-picker-calendar .mud-day.mud-adjacent-month:not(:disabled) {
    color: var(--meridian-text-dim) !important;
}

/* Out-of-range days (MinDate/MaxDate). MudBlazor marks these with the native
   `disabled` attribute, NOT a `.mud-disabled` class — `.mud-button-root:disabled`
   is where the framework paints them, so that is what has to be matched.
   `text-faint` is the disabled ink; WCAG 1.4.3 exempts inactive controls. */
.mud-picker-calendar .mud-day:disabled,
.mud-picker-month-container .mud-picker-month.mud-disabled {
    color: var(--meridian-text-faint) !important;
}

/* Range selection (MudDateRangePicker) — the band between the endpoints is a
   tint of the same accent rather than MudBlazor's near-invisible neutral. */
.mud-picker-calendar .mud-day.mud-range.mud-range-between {
    background-color: color-mix(in srgb, var(--meridian-accent) 16%, transparent);
    color: var(--meridian-text);
}

.mud-picker-calendar .mud-day.mud-range.mud-range-selection:not(:hover):not(.mud-range-start-selected) {
    background: linear-gradient(
        color-mix(in srgb, var(--meridian-accent) 16%, transparent) 100%,
        color-mix(in srgb, var(--meridian-accent) 16%, transparent) 100%,
        transparent 0%);
}

/* ── Month / year drilldown ────────────────────────────────────────────── */

.mud-picker-year-container .mud-picker-year,
.mud-picker-month-container .mud-picker-month {
    color: var(--meridian-text) !important;
}

.mud-picker-year-container .mud-picker-year:hover,
.mud-picker-month-container .mud-picker-month:hover {
    background-color: color-mix(in srgb, var(--meridian-accent) 14%, transparent);
}

/* The current year/month reads as accent text on the panel. MudBlazor paints it
   with the BASE accent, which is 2.57:1 on the light panel — a straight WCAG AA
   failure, measured. `-strong` is the audited body-text shade (6.5:1 light) and
   aliases back to the base accent in dark (14.62:1). */
.mud-picker-year-container .mud-picker-year .mud-picker-year-selected,
.mud-picker-month-container .mud-picker-month .mud-picker-month-selected,
.mud-picker-year-container .mud-picker-year-selected,
.mud-picker-month-container .mud-picker-month-selected,
.mud-picker-year-container .mud-picker-year .mud-picker-year-selected .mud-typography,
.mud-picker-month-container .mud-picker-month .mud-picker-month-selected .mud-typography {
    color: var(--meridian-accent-strong) !important;
    font-weight: 600;
}

/* ── Clear / OK actions ───────────────────────────────────────────────── */

.mud-picker .mud-picker-actions {
    border-top: 1px solid var(--meridian-border-hair);
    padding: 8px 12px;
}

.mud-picker .mud-picker-actions .mud-button-root {
    color: var(--meridian-accent-strong);
}

.mud-picker .mud-picker-actions .mud-button-root:hover {
    background-color: color-mix(in srgb, var(--meridian-accent) 14%, transparent);
}

/* ── Time picker ──────────────────────────────────────────────────────── */

/* MudBlazor hard-codes the inactive hour/minute/AM-PM label to
   `rgba(255,255,255,.54)` — white-on-anything, which only ever worked against
   the Material primary slab this file has just removed. */
.mud-picker-timepicker-toolbar .mud-timepicker-button,
.mud-picker-timepicker-toolbar .mud-timepicker-separator {
    color: var(--meridian-text) !important;
}

.mud-picker-timepicker-toolbar .mud-timepicker-button.mud-timepicker-toolbar-text {
    color: var(--meridian-text-dim) !important;
}

.mud-picker-timepicker-toolbar .mud-timepicker-hourminute .mud-timepicker-button {
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -0.5px;
}

/* The clock face is `rgba(0,0,0,.07)` in the framework — a black wash that
   vanishes on a dark ground. `bg-sunk` is the recessed surface in both themes. */
.mud-picker-time-container .mud-picker-time-clock {
    background-color: var(--meridian-bg-sunk);
}

.mud-picker-time-container .mud-picker-time-clock .mud-clock-number {
    color: var(--meridian-text);
}

/* Nothing here touches the hand, the pin, the thumb or the `.mud-picker-stick*`
   elements. The hand already renders in the accent (it inherits from the
   pointer) and needs no help; the sticks are the INVISIBLE per-position hit
   targets, whose `::after` pseudo-elements are 48-62px circles filled with
   `background-color: inherit`. Giving those a background paints all 24 hit
   targets as solid accent blobs over the whole face — verified by screenshot,
   and the reason this section is deliberately this short. */

/* -------- Navigation / drawer -------------------------------------- */

.mud-nav-item .mud-nav-link {
    padding: 6px 14px;
    min-height: 32px;
    font-size: 12px; /* shell.jsx nav rail: 12px */
    color: var(--meridian-text-mid);
    border-left: 2px solid transparent;
    /* Allow badge + label to sit side-by-side inside the nav link */
    display: flex;
    align-items: center;
}

.mud-nav-item .mud-nav-link:hover {
    background: var(--meridian-bg-sunk);
}

.mud-nav-item .mud-nav-link.active {
    background: var(--meridian-bg-sunk);
    color: var(--meridian-text);
    border-left-color: var(--meridian-accent);
    font-weight: 500;
}
/* I-audit fix — Mud applies its primary colour to the inner .mud-nav-link-text
   span on active items via --mud-palette-primary, bypassing the parent
   .mud-nav-link color and producing accent green on the light-gray bg-sunk
   (ratio 2.33:1). Force inheritance with !important since Mud's framework
   selector wins on specificity otherwise. */
.mud-nav-item .mud-nav-link.active .mud-nav-link-text,
.mud-nav-link.active .mud-nav-link-text {
    color: var(--meridian-text) !important;
}

/* I-audit fix — Mud's primary-coloured chip (Color="Color.Primary" outlined)
   renders --mud-palette-primary text (= --meridian-accent) on the chip's
   light fill, producing ~2.29:1 contrast. Force the AA-safe -strong variant. */
.mud-chip.mud-chip-color-primary.mud-chip-outlined,
.mud-chip.mud-chip-color-primary.mud-chip-outlined .mud-chip-content {
    color: var(--meridian-accent-strong) !important;
    border-color: var(--meridian-accent-strong) !important;
}

/* I-audit fix — .mud-typography-caption defaults to a muted gray that
   computes to --meridian-text-dim contrast 4.27:1 on the canvas bg, just
   below WCAG 2.1 AA's 4.5:1 threshold for small text. Bump to text-mid. */
.mud-typography-caption {
    color: var(--meridian-text-mid);
}

/*
 * §2.3 Nav rail badge counts — shell.jsx SideRail:
 *   background: theme.failSoft; color: theme.fail;
 *   padding: 1px 5px; borderRadius: 1; fontFamily: mono; fontSize: 9px; fontWeight: 600.
 * Rendered as <span class="m-nav-badge m-nav-badge--fail">{count}</span>.
 */
.m-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 14px;
    padding: 1px 5px;
    margin-left: auto;
    font-family: var(--meridian-font-mono);
    font-size: 9px;
    font-weight: 600;
    border-radius: 2px;
    line-height: 1;
}

.m-nav-badge--fail {
    background: var(--meridian-fail-soft);
    color: var(--meridian-fail);
}

.m-nav-badge--warn {
    background: var(--meridian-warn-soft);
    /* I-audit fix — light-theme --meridian-warn (#d97706) on
       --meridian-warn-soft (#fde6c4) had contrast 2.62:1 (fails WCAG 2.1 AA).
       --meridian-warn-strong is the AA-safe darker shade for this body-text
       on warn-soft pattern; dark theme aliases it back to --meridian-warn
       since dark surfaces already pass. */
    color: var(--meridian-warn-strong);
}

.m-nav-badge--info {
    background: var(--meridian-info-soft);
    color: var(--meridian-info);
}

/*
 * Badge slot — reserves the badge's space at the right edge of a nav link so a
 * count arriving later (the intentionally-deferred badge wave) never shifts the
 * link's label. Always rendered; holds min-width even when empty.
 */
.m-nav-badge-slot {
    margin-left: auto;
    min-width: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

/*
 * Nav skeleton rail — shimmer placeholder shown while the entitlement-gated nav
 * (active context, role, module access) resolves. Holds the rail's height so the
 * real menu replaces it in a single wave with no layout shift.
 */
.m-nav-skeleton {
    padding: 12px 16px;
}

.m-nav-skeleton__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

/* -------- Cards / Panels ------------------------------------------- */

.mud-card {
    background: var(--meridian-bg-panel);
    border: 1px solid var(--meridian-border);
    box-shadow: none;
}

.mud-card.mud-card-outlined {
    border: 1px solid var(--meridian-border);
}

.mud-card-content {
    padding: 14px 16px;
}

.mud-card-header {
    padding: 10px 16px;
    border-bottom: 1px solid var(--meridian-border-hair);
}

/* Elevation reduced globally — prototype uses borders, not shadows */
.mud-elevation-1 { box-shadow: none; border: 1px solid var(--meridian-border); }
.mud-elevation-2 { box-shadow: none; border: 1px solid var(--meridian-border); }
.mud-elevation-3 { box-shadow: 0 1px 2px rgba(0,0,0,0.04); border: 1px solid var(--meridian-border); }
.mud-elevation-4 { box-shadow: 0 2px 4px rgba(0,0,0,0.06); border: 1px solid var(--meridian-border); }

[data-theme="dark"] .mud-elevation-3 { box-shadow: 0 1px 2px rgba(0,0,0,0.4); }
[data-theme="dark"] .mud-elevation-4 { box-shadow: 0 2px 4px rgba(0,0,0,0.5); }

/* -------- Scrollbars (webkit) --------------------------------------- */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--meridian-border);
    border-radius: var(--meridian-radius);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--meridian-border-strong);
}

/* -------- Focus ring always visible (principle §8) ------------------ */

*:focus-visible {
    outline: 2px solid var(--meridian-accent);
    outline-offset: 1px;
}

.mud-button-root:focus-visible,
.mud-icon-button:focus-visible,
.mud-nav-link:focus-visible {
    outline: 2px solid var(--meridian-accent);
    outline-offset: 1px;
}

/* -------- Top bar (chrome) ----------------------------------------- */

.m-topbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    width: 100%;
    height: 100%;
    padding: 0 4px;
    color: var(--meridian-text);
}

.m-topbar__left,
.m-topbar__right {
    display: flex;
    align-items: center;
    gap: 10px;
    /* A3 fix — let these grid cells shrink instead of pushing the topbar
       past the viewport. Without min-width:0 the grid's auto tracks expand
       to fit content and the 1fr center column can no longer shrink. */
    min-width: 0;
}

.m-topbar__center {
    justify-self: center;
    width: 420px;
    max-width: 100%;
    /* A3 fix — the center cell must also be shrinkable. */
    min-width: 0;
}

/* A3 fix — hide low-priority topbar controls under 1366px so the right column
   doesn't crowd the breadcrumb / center on smaller laptops. The language menu
   stays reachable from the avatar menu's submenu when added; until then the
   user can change language by typing the URL with ?culture=…. */
@media (max-width: 1366px) {
    .m-topbar__right [data-testid="topbar-language-select"],
    .m-topbar__right [data-testid="theme-toggle"] {
        display: none;
    }
}

/* A3 fix — last-resort safety net so a single rogue widget can never produce
   a horizontal scrollbar across the whole page. Components that *intend* to
   scroll horizontally (e.g. wide tables) opt back in with overflow-x:auto on
   their own wrapper. */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

.m-topbar__brand {
    font-weight: 600;
    letter-spacing: -0.2px;
    font-size: 14px;
    color: var(--meridian-text);
}

.m-topbar__env-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--meridian-text-dim);
}

.m-topbar__env-btn:hover .m-topbar__env {
    color: var(--meridian-text);
    background: var(--meridian-bg-raised);
}

/* Locked: a page owns the environment axis (single-environment view). The global
   selector is disabled and explains itself via the button title attribute. */
.m-topbar__env-btn--locked {
    opacity: 0.45;
    cursor: not-allowed;
}

.m-topbar__env-btn--locked:hover .m-topbar__env {
    color: var(--meridian-text-dim);
    background: transparent;
}

/* #1883 — the scope popovers (project / environment / service / SUT tenant) cap their
   height to the viewport and scroll inside themselves, so a long Project/Program list
   never runs off-screen. The leading "All ..." row and the footer stay pinned. The
   100dvh line overrides the 100vh fallback where dynamic viewport units exist. */
.m-topbar__multiselect-menu {
    max-height: var(--meridian-topbar-popover-max-height);
    overflow-y: auto;
    overscroll-behavior: contain;
}

@supports (height: 100dvh) {
    .m-topbar__multiselect-menu {
        max-height: calc(100dvh - 72px);
    }
}

.m-topbar__multiselect-menu > .mud-menu-item:first-child {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--meridian-bg-panel);
}

.m-topbar__multiselect-menu > .m-topbar__multiselect-footer {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: var(--meridian-bg-panel);
}

/* Keyboard focus inside the scroll container stays visible when sticky rows overlap. */
.m-topbar__multiselect-menu .mud-menu-item {
    scroll-margin-block: 44px;
}

/* #1846 — a Program row nested under its Project in the Project selector popover
   (design-reference: DR-068). One indent step; the row is otherwise a normal menu item. */
.m-topbar__multiselect-menu .m-topbar__multiselect-child {
    padding-left: 32px;
}

.m-topbar__env {
    font-family: var(--meridian-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: lowercase;
    /* I-audit fix — was --meridian-text-dim (#6c7482) on --meridian-bg-sunk
       (#e7eaef) in light theme, contrast ratio 3.7:1 — fails WCAG 2.1 AA
       (4.5:1 for normal text). text-mid (#3d4450) gives ~8.0:1. Both themes
       now pass AA by a wide margin. This single selector accounted for
       8,591 of the 11,443 axe-core violations across all 57 pages. */
    color: var(--meridian-text-mid);
    background: var(--meridian-bg-sunk);
    border: 1px solid var(--meridian-border-hair);
    padding: 1px 6px;
    border-radius: var(--meridian-radius);
}

.m-topbar__sep {
    width: 1px;
    height: 16px;
    background: var(--meridian-border);
    margin: 0 2px;
}

.m-topbar__crumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    min-width: 0;
}

.m-topbar__crumb       { color: var(--meridian-text-dim); white-space: nowrap; }
.m-topbar__crumb--last { color: var(--meridian-text); font-weight: 500; }
.m-topbar__crumb-sep   { color: var(--meridian-text-faint); }

/* ── Universal search — inline in the topbar (no modal) ───────────────── */

.m-topbar__search-wrap {
    position: relative;
    width: 100%;
}

.m-topbar__search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    font-size: 12px;
    background: var(--meridian-bg-sunk);
    border: 1px solid var(--meridian-border);
    color: var(--meridian-text-dim);
    border-radius: var(--meridian-radius);
    width: 100%;
}

.m-topbar__search:hover,
.m-topbar__search-wrap:focus-within .m-topbar__search {
    border-color: var(--meridian-border-strong);
}

.m-topbar__search-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--meridian-text);
    font: inherit;
    padding: 0;
}
.m-topbar__search-input::placeholder { color: var(--meridian-text-dim); }
/* Hide the native search-input clear icon — we own the clear UX (Escape). */
.m-topbar__search-input::-webkit-search-cancel-button { display: none; }

.m-topbar__search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1300;
    max-height: 60vh;
    overflow-y: auto;
    padding: 8px 10px 12px;
    background: var(--meridian-bg-raised);
    border: 1px solid var(--meridian-border);
    border-radius: var(--meridian-radius);
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.45);
}

.m-search-hint {
    font-size: 12px;
    color: var(--meridian-text-dim);
    padding: 12px 4px;
}

.m-search-section {
    display: flex;
    flex-direction: column;
    margin-top: 12px;
}

.m-search-section__label {
    font-family: var(--meridian-font-mono);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--meridian-text-faint);
    padding: 4px 6px;
}

.m-search-result {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-radius: var(--meridian-radius);
    font-family: inherit;
    color: var(--meridian-text);
    text-align: left;
    cursor: pointer;
}

.m-search-result:hover { background: var(--meridian-bg-sunk); }

.m-search-result__primary   { flex: 1; font-size: 13px; }
.m-search-result__secondary {
    font-size: 11px;
    color: var(--meridian-text-dim);
    font-family: var(--meridian-font-mono);
}

.m-topbar__search-kbd {
    font-family: var(--meridian-font-mono);
    font-size: 10px;
    /* I-audit fix — was --meridian-text-faint (#a3abb8) on the topbar bg
       (#e7eaef in light), contrast 1.91:1 — fails WCAG 2.1 AA. text-mid
       (#3d4450) gives ~8:1 in light theme; dark theme uses text-mid #9aa3b1
       which still passes against any reasonable dark topbar background. */
    color: var(--meridian-text-mid);
    background: transparent;
    border: 1px solid var(--meridian-border);
    padding: 0 4px;
    border-radius: var(--meridian-radius);
}

.m-topbar__chip-btn,
.m-topbar__icon-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--meridian-text-mid);
    font-family: var(--meridian-font-sans);
    font-size: 12px;
    border-radius: var(--meridian-radius);
    cursor: pointer;
}

.m-topbar__chip-btn:hover,
.m-topbar__icon-btn:hover {
    background: var(--meridian-bg-sunk);
    color: var(--meridian-text);
}

.m-topbar__chip-btn--locked,
.m-topbar__chip-btn--locked:hover {
    cursor: not-allowed;
    background: transparent;
    color: var(--meridian-text-faint);
}

.m-topbar__chip-label,
.m-topbar__chip-sep {
    font-family: var(--meridian-font-mono);
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--meridian-text-dim);
    text-transform: uppercase;
}

.m-topbar__chip-value { font-weight: 500; color: var(--meridian-text); }

.m-topbar__lang-code {
    font-family: var(--meridian-font-mono);
    font-size: 10px;
    color: var(--meridian-text-mid);
}

.m-topbar__avatar {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: var(--meridian-accent);
    color: var(--meridian-bg);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* -------- Status strip (footer) ------------------------------------ */

.m-status {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 22px;
    padding: 0 12px;
    border-top: 1px solid var(--meridian-border);
    background: var(--meridian-bg-panel);
    color: var(--meridian-text-dim);
    font-family: var(--meridian-font-mono);
    font-size: 10px;
    line-height: 22px;
    user-select: none;
}

/* Reserve space at the bottom of the main scroll area so content doesn't
   slide under the fixed status strip. */
.m-main-with-status { padding-bottom: 22px; }

.m-status__release {
    font-weight: 600;
    letter-spacing: 1px;
}

/* I-audit fix — light-theme --meridian-pass (#108a2b) on #fafbfc had contrast
   4.31:1, just below WCAG 2.1 AA's 4.5 threshold. --meridian-pass-strong is
   the AA-safe shade for pass-text on near-white; dark theme aliases it
   back to --meridian-pass. */
.m-status--healthy .m-status__release { color: var(--meridian-pass-strong); }
.m-status--at-risk .m-status__release { color: var(--meridian-warn); }
.m-status--blocked .m-status__release { color: var(--meridian-fail); }

.m-status__dot     { margin-right: 4px; }
.m-status__sep     { color: var(--meridian-text-faint); }
.m-status__sep-dot { color: var(--meridian-text-faint); }
.m-status__ticker {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* -------- Widget card — drillable affordance (ADR-026 refinement) ---
 * Applied only when WidgetCard.razor renders with Drillable=true.
 * Uses existing tokens; no new tokens are introduced here.
 * -------------------------------------------------------------------- */

.m-widget-card--drillable {
    cursor: pointer;
}

.m-widget-card--drillable:hover {
    outline: 2px solid var(--meridian-accent);
    outline-offset: -2px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--meridian-accent) 15%, transparent);
}

.m-widget-card--drillable:focus-visible {
    outline: 2px solid var(--meridian-accent);
    outline-offset: -2px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--meridian-accent) 25%, transparent);
}

.m-widget-card__drill-icon {
    font-size: 13px;
    color: var(--meridian-text-dim);
    margin-right: 4px;
    line-height: 1;
    user-select: none;
}

.m-widget-card__source-note {
    font-size: 11px;
    color: var(--meridian-text-dim);
    margin-right: 8px;
    white-space: nowrap;
}

/* -------- Link styles ---------------------------------------------- */

/* I-audit fix — accent (#18b800) on bg (#f3f5f8) / bg-panel (#fafbfc) gives
   2.43–2.56:1; far below WCAG 2.1 AA 4.5:1 for normal text. accent-strong
   (#0c6b00) passes on all light surfaces (~5:1). Dark theme aliases
   --meridian-accent-strong back to --meridian-accent which passes on dark
   backgrounds, so we keep a single rule rather than a dark-override. */
a {
    color: var(--meridian-accent-strong);
}

[data-theme="dark"] a {
    color: var(--meridian-accent);
}

/* -------- Snackbar — dark pill (§2.14) ----------------------------- */
/*
 * Design: snackbars are dark pills, not Material elevation cards.
 * bg = theme.text (near-black / near-white in dark mode),
 * color = theme.bg, borderRadius pill, tight padding, no shadow tower.
 */
.mud-snackbar {
    background: var(--meridian-text) !important;
    color: var(--meridian-bg) !important;
    border-radius: 999px !important;
    padding: 8px 16px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    font-size: 12px !important;
    min-width: 0 !important;
}

/* Action button inside a dark-pill snackbar uses the bg colour */
.mud-snackbar .mud-button-root {
    color: var(--meridian-bg) !important;
    border-color: transparent !important;
    font-size: 11px !important;
    padding: 2px 8px !important;
}

.mud-snackbar .mud-button-root:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* In dark mode the tokens flip, so the pill stays naturally contrasting */
[data-theme="dark"] .mud-snackbar {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* -------- Onboarding wizard — side-rail shell (FR-ONB-001 / ADR-002) ----------
   design-reference: docs/ux/claude-design/screen-firstrun.jsx#WizardShell
   --------------------------------------------------------------------------- */

.meridian-wizard-overlay {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: color-mix(in srgb, var(--mud-palette-black) 65%, transparent);
    backdrop-filter: blur(2px);
}

/* Two-column shell: 320px rail + 1fr content */
.meridian-wizard-shell {
    display: grid;
    grid-template-columns: 320px 1fr;
    width: 100%;
    max-width: 960px;
    max-height: 100vh;
    background: var(--meridian-bg);
    color: var(--meridian-text);
    overflow: hidden;
}

/* ── Side rail ── */
.meridian-wizard-rail {
    background: var(--meridian-bg-panel);
    border-right: 1px solid var(--meridian-border);
    padding: 28px 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
}

.meridian-wizard-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.meridian-wizard-brand__logo {
    width: 32px;
    height: 32px;
    border-radius: var(--meridian-radius);
    background: var(--meridian-surface);
    border: 1px solid var(--meridian-border);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.meridian-wizard-brand__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--meridian-text);
    letter-spacing: -0.3px;
}

.meridian-wizard-brand__eyebrow {
    font-family: var(--meridian-font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--meridian-text-dim);
    margin-top: 1px;
}

/* ── Step rows ── */
.meridian-wizard-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 6px;
}

.meridian-wizard-step-row {
    display: block;
    position: relative;
}

/* Vertical connector line between step circles. Horizontal anchor:
   padding-left (18px) + half-circle (12px) = 30px from the row's left edge,
   matching the circle's centre for every step regardless of state. */
.meridian-wizard-connector {
    position: absolute;
    left: 30px;
    top: 36px;        /* below the circle */
    bottom: -8px;
    width: 1px;
    background: var(--meridian-border);
    z-index: 0;
    pointer-events: none;
}

.meridian-wizard-connector--done {
    background: var(--meridian-accent);
}

/* Step button row.
   Earlier attempts used border-left (transparent / accent) to reserve space
   for the active-state accent stripe so that toggling colour wouldn't shift
   the circle. Measurement on a real browser (Chromium) showed sub-pixel
   inconsistency on the middle row: circles 1 and 3 measured at x≈235 while
   circle 2 measured at x≈224 — an ~11px shift only on the inactive row that
   carried a connector. The interaction between border-left-collapse, the
   absolutely-positioned connector sibling, and the flex container's gap
   rules is too brittle. The robust pattern: uniform padding on every step
   and an absolutely-positioned ::before for the active accent so the accent
   lives entirely outside flex layout and cannot move anything. */
.meridian-wizard-step {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 12px 18px;
    background: transparent;
    border: none;
    cursor: default;
    text-align: left;
    color: var(--meridian-text);
    transition: background 0.15s ease;
    position: relative;
    outline: none;
    box-sizing: border-box;
}

/* Pin the circle as a non-growing item; the text fills the remainder. Without
   this, MudBlazor's button reset injects `justify-content: center` which packs
   both items toward the middle, making the circle's x-position depend on the
   text's length — that's the ~11px shift on the middle row. */
.meridian-wizard-step > .meridian-wizard-step__circle {
    flex: 0 0 auto;
}
.meridian-wizard-step > .meridian-wizard-step__text {
    flex: 1 1 auto;
    min-width: 0;
}

.meridian-wizard-step--active {
    background: var(--meridian-bg-sunk);
}

.meridian-wizard-step--active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--meridian-accent);
    pointer-events: none;
}

/* Number circle */
.meridian-wizard-step__circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--meridian-bg-raised);
    border: 1px solid var(--meridian-border-strong);
    color: var(--meridian-text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--meridian-font-mono);
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.meridian-wizard-step__circle--active {
    border-color: var(--meridian-text);
    color: var(--meridian-text);
}

.meridian-wizard-step__circle--done {
    background: var(--meridian-accent);
    border-color: var(--meridian-accent);
    color: var(--meridian-bg);
}

.meridian-wizard-step__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-top: 2px;
}

.meridian-wizard-step__title {
    font-size: 13px;
    font-weight: 500;
    color: var(--meridian-text-mid);
    line-height: 1.3;
}

.meridian-wizard-step--active .meridian-wizard-step__title {
    color: var(--meridian-text);
}

.meridian-wizard-step__title--done {
    /* Done state distinguished by the ✓ circle + dimmed color rather than
       strikethrough — strikethrough reads as "this step is cancelled" instead
       of "this step is complete". */
    color: var(--meridian-text-dim);
}

.meridian-wizard-step__sub {
    font-size: 11px;
    /* I-audit fix — text-dim (#6c7482) on bg-sunk (#e7eaef) is 3.9:1 (active
       step has bg-sunk background). text-mid gives ~8:1 on all surfaces. */
    color: var(--meridian-text-mid);
    line-height: 1.4;
}

.meridian-wizard-rail__spacer { flex: 1; }

.meridian-wizard-rail__footer {
    border-top: 1px solid var(--meridian-border-hair);
    padding-top: 14px;
    font-size: 11px;
    color: var(--meridian-text-dim);
    line-height: 1.6;
}

.meridian-wizard-rail__footer-accent {
    /* I-audit fix — accent (#18b800) on bg-panel (#fafbfc) is 2.56:1.
       accent-strong (#0c6b00) passes AA on light surfaces. */
    color: var(--meridian-accent-strong);
}

/* ── Right content pane ── */
.meridian-wizard-content {
    overflow-y: auto;
    padding: 36px 48px;
    position: relative;
}

.meridian-wizard-close {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 13px;
    line-height: 1;
    padding: 6px 10px;
}

.meridian-wizard-pane {
    max-width: 640px;
}

.meridian-wizard-eyebrow {
    color: var(--meridian-accent);
}

.meridian-wizard-h1 {
    margin: 8px 0 6px;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--meridian-text);
    line-height: 1.2;
}

.meridian-wizard-body {
    margin: 0 0 24px;
    font-size: 13.5px;
    color: var(--meridian-text-mid);
    line-height: 1.6;
}

.meridian-wizard-link {
    color: var(--meridian-accent);
}

.meridian-wizard-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
}

.meridian-wizard-actions__spacer { flex: 1; }

.meridian-wizard-skip-link {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--meridian-font-mono);
    font-size: 11.5px;
    color: var(--meridian-text-mid);
    padding: 0 8px;
    text-decoration: none;
}

/* ── Persona cards ── */
.meridian-wizard-persona-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

.meridian-wizard-persona-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    text-align: left;
    background: transparent;
    border: 1px solid var(--meridian-border);
    border-left-width: 3px;
    cursor: pointer;
    border-radius: var(--meridian-radius);
    color: var(--meridian-text);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.meridian-wizard-persona-card:hover {
    border-color: var(--meridian-border-strong);
}

.meridian-wizard-persona-card--selected {
    background: var(--meridian-bg-panel);
    border-color: var(--meridian-accent);
    border-left-color: var(--meridian-accent);
}

.meridian-wizard-persona-glyph {
    width: 32px;
    height: 32px;
    background: var(--meridian-bg-sunk);
    color: var(--meridian-text-mid);
    display: grid;
    place-items: center;
    font-family: var(--meridian-font-mono);
    font-size: 18px;
    font-weight: 600;
    border: 1px solid var(--meridian-border);
    flex-shrink: 0;
}

.meridian-wizard-persona-glyph--selected {
    background: var(--meridian-accent-soft);
    color: var(--meridian-accent);
    border-color: var(--meridian-accent);
}

.meridian-wizard-persona-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--meridian-text);
}

.meridian-wizard-persona-sub {
    font-size: 11.5px;
    color: var(--meridian-text-dim);
    margin-top: 3px;
    font-family: var(--meridian-font-mono);
    line-height: 1.5;
}

/* "Something else" row */
.meridian-wizard-persona-other {
    padding: 14px;
    background: transparent;
    border: 1px solid var(--meridian-border);
    border-left-width: 3px;
    border-left-color: var(--meridian-border);
    border-radius: var(--meridian-radius);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.meridian-wizard-persona-other--selected {
    background: var(--meridian-bg-panel);
    border-color: var(--meridian-accent);
    border-left-color: var(--meridian-accent);
}

.meridian-wizard-persona-other__toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    color: var(--meridian-text);
    font-size: 13px;
    font-weight: 600;
}

.meridian-wizard-persona-other__radio {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--meridian-border-strong);
    background: transparent;
    display: inline-block;
    flex-shrink: 0;
}

.meridian-wizard-persona-other__radio--selected {
    background: var(--meridian-accent);
    border-color: var(--meridian-accent);
}

.meridian-wizard-persona-other__input {
    margin-top: 10px;
    width: 100%;
    background: var(--meridian-bg-sunk);
    border: 1px solid var(--meridian-border);
    color: var(--meridian-text);
    font-family: var(--meridian-font-mono);
    font-size: 12.5px;
    padding: 8px 10px;
    border-radius: var(--meridian-radius);
    outline: none;
    box-sizing: border-box;
}

.meridian-wizard-persona-other__input:focus {
    border-color: var(--meridian-accent);
}

/* ── Invite email box ── */
.meridian-wizard-invite-box {
    padding: 16px;
    background: var(--meridian-bg-panel);
    border: 1px solid var(--meridian-border);
    border-radius: var(--meridian-radius);
}

.meridian-wizard-invite-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--meridian-text-mid);
    margin-bottom: 8px;
}

.meridian-wizard-invite-hint {
    display: block;
    font-size: 11px;
    /* I-audit B1: --meridian-text-faint (#a3abb8) = ~2.8:1 at 11px — fails AA.
       --meridian-text-dim (#6c7482) = ~4.4:1 — passes AA for small text. */
    color: var(--meridian-text-dim);
    font-weight: 400;
    margin-top: 2px;
}

.meridian-wizard-invite-row {
    display: flex;
    gap: 8px;
}

.meridian-wizard-invite-input {
    flex: 1;
    background: var(--meridian-bg-sunk);
    border: 1px solid var(--meridian-border);
    color: var(--meridian-text);
    font-family: var(--meridian-font-mono);
    font-size: 12.5px;
    padding: 8px 10px;
    border-radius: var(--meridian-radius);
    outline: none;
}

.meridian-wizard-invite-input:focus {
    border-color: var(--meridian-accent);
}

.meridian-wizard-invite-add {
    white-space: nowrap;
    font-family: var(--meridian-font-mono);
    font-size: 11.5px;
}

/* Email chips */
.meridian-wizard-chips {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.meridian-wizard-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--meridian-bg-sunk);
    border: 1px solid var(--meridian-border);
    font-family: var(--meridian-font-mono);
    font-size: 11px;
    color: var(--meridian-text);
    border-radius: var(--meridian-radius);
}

.meridian-wizard-chip__remove {
    background: transparent;
    border: none;
    color: var(--meridian-text-dim);
    cursor: pointer;
    font-size: 13px;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
}

.meridian-wizard-chip__remove:hover {
    color: var(--meridian-fail);
}

/* ── Step 3: teams/projects two-column grid ──────────────────────────────── */

.meridian-wizard-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.meridian-wizard-assign-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.meridian-wizard-assign-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid transparent;
    border-left: 3px solid transparent;
    border-radius: var(--meridian-radius);
    transition: background 0.12s ease, border-color 0.12s ease;
}

.meridian-wizard-assign-row:hover {
    background: var(--meridian-bg-sunk);
    border-color: var(--meridian-border);
    border-left-color: var(--meridian-border-strong);
}

.meridian-wizard-assign-row--selected {
    background: var(--meridian-accent-soft);
    border-color: var(--meridian-accent);
    border-left-color: var(--meridian-accent);
}

.meridian-wizard-assign-row--selected:hover {
    background: var(--meridian-accent-soft);
}

.meridian-wizard-assign-check {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.meridian-wizard-member-count {
    font-family: var(--meridian-font-mono);
    font-size: 11px;
    color: var(--meridian-text-dim);
    margin-left: auto;
    white-space: nowrap;
}

/* ── Step 4: module override rows ──────────────────────────────────────────── */

.meridian-wizard-module-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--meridian-border-hair);
}

.meridian-wizard-module-row:last-child {
    border-bottom: none;
}

.meridian-wizard-module-label {
    font-size: 13px;
    color: var(--meridian-text);
    font-weight: 500;
    min-width: 0;
    flex: 1;
}

/* ── Reusable shell: clickable rail step (when nav is enabled) ──────────────── */
.meridian-wizard-step--clickable {
    cursor: pointer;
}

.meridian-wizard-step--clickable:hover {
    background: var(--meridian-bg-sunk);
}

/* ── Small body text + inline field/step error ─────────────────────────────── */
.meridian-wizard-body--small {
    font-size: 12px;
    margin-top: 8px;
}

.meridian-wizard-error {
    font-size: 12px;
    color: var(--meridian-fail-strong);
    margin: 4px 0 0;
}

.meridian-wizard-field-error {
    display: block;
    font-size: 11px;
    color: var(--meridian-fail-strong);
    margin-top: 4px;
}

/* ── Step 2: selectable role option cards (radio-style) ─────────────────────── */
.meridian-wizard-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.meridian-wizard-option-card {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    text-align: left;
    background: transparent;
    border: 1px solid var(--meridian-border);
    border-left-width: 3px;
    border-left-color: var(--meridian-border);
    border-radius: var(--meridian-radius);
    color: var(--meridian-text);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.meridian-wizard-option-card:hover {
    border-color: var(--meridian-border-strong);
}

.meridian-wizard-option-card--selected {
    background: var(--meridian-accent-soft);
    border-color: var(--meridian-accent);
    border-left-color: var(--meridian-accent);
}

.meridian-wizard-option-card__radio {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    border-radius: 50%;
    border: 1.5px solid var(--meridian-border-strong);
    background: transparent;
    flex-shrink: 0;
}

.meridian-wizard-option-card--selected .meridian-wizard-option-card__radio {
    border-color: var(--meridian-accent);
    background:
        radial-gradient(circle, var(--meridian-accent) 0 4px, transparent 5px);
}

.meridian-wizard-option-card__title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--meridian-text);
    line-height: 1.3;
}

.meridian-wizard-option-card__desc {
    font-size: 11.5px;
    color: var(--meridian-text-dim);
    margin-top: 3px;
    line-height: 1.5;
}

/* ── Step 5: review summary table ───────────────────────────────────────────── */
.meridian-wizard-review-table {
    border-collapse: collapse;
    width: 100%;
}

.meridian-wizard-review-table td {
    padding: 6px 8px;
    font-size: 13px;
    vertical-align: top;
    border-bottom: 1px solid var(--meridian-border-hair);
    color: var(--meridian-text);
}

.meridian-wizard-review-table tr:last-child td {
    border-bottom: none;
}

.meridian-wizard-review-label {
    font-weight: 600;
    color: var(--meridian-text-mid);
    white-space: nowrap;
    width: 150px;
}

/* ── Step 5: reveal-once temporary-password strip ───────────────────────────── */
.meridian-wizard-password-reveal {
    margin-top: 16px;
    border-color: var(--meridian-warn);
    border-left: 3px solid var(--meridian-warn);
}

.meridian-wizard-password-warn-eyebrow {
    font-family: var(--meridian-font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--meridian-warn-strong);
    margin-bottom: 8px;
}

/* Legacy dot indicators (kept for backwards compat in tests) */
.wizard-step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-divider);
    transition: background 0.2s ease;
}

.wizard-step-dot.active {
    background: var(--meridian-accent);
    width: 24px;
    border-radius: 4px;
}

/* -------- Onboarding checklist right-rail (FR-ONB-002) ----------------
   design-reference: docs/ux/claude-design/screen-firstrun.jsx#FRDashboardWithChecklist
   --------------------------------------------------------------------- */

/* A2 fix — the dashboard shell places the checklist rail in column 2 at
   viewport ≥ 1280px so it doesn't push dashboard content down the page.
   Below the breakpoint it stacks underneath. minmax(0, 1fr) on column 1
   ensures wide widget content shrinks instead of overflowing. */
.m-dashboard-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}
.m-dashboard-shell__main { min-width: 0; }
.m-dashboard-shell__rail { min-width: 0; }
@media (min-width: 1280px) {
    .m-dashboard-shell--has-rail {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}
/* Inside the shell wrapper the rail should fill the grid cell; the rail's
   own 320px / border-left only apply at the wide-viewport breakpoint. */
.m-dashboard-shell__rail .meridian-checklist-rail {
    width: 100%;
    border-left: 0;
}
@media (min-width: 1280px) {
    .m-dashboard-shell__rail .meridian-checklist-rail {
        border-left: 1px solid var(--meridian-border);
    }
}

.meridian-checklist-rail {
    background: var(--meridian-bg-panel);
    border-left: 1px solid var(--meridian-border);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    width: 320px;
    flex-shrink: 0;
}

.meridian-checklist-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
}

.meridian-checklist-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--meridian-text);
}

.meridian-checklist-count {
    font-family: var(--meridian-font-mono);
    font-size: 11px;
    color: var(--meridian-text-mid);
}

.meridian-checklist-caption {
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--meridian-text-dim);
    line-height: 1.6;
}

/* Item cards */
.meridian-checklist-item {
    display: block;
    padding: 12px;
    background: var(--meridian-bg-raised);
    border: 1px solid var(--meridian-border);
    border-left-width: 3px;
    border-left-color: var(--meridian-border-strong);
    text-decoration: none;
    color: var(--meridian-text);
    cursor: pointer;
    transition: border-left-color 0.15s ease;
}

.meridian-checklist-item--done {
    background: var(--meridian-bg-sunk);
    border-left-color: var(--meridian-accent);
    opacity: 0.65;
}

.meridian-checklist-item__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.meridian-checklist-item__check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--meridian-border-strong);
    background: transparent;
    color: transparent;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.meridian-checklist-item__check--done {
    background: var(--meridian-accent);
    border-color: var(--meridian-accent);
    color: var(--meridian-bg);
}

.meridian-checklist-item__label {
    font-size: 12.5px;
    font-weight: 600;
    flex: 1;
    color: var(--meridian-text);
}

.meridian-checklist-item__label--done {
    text-decoration: line-through;
    text-decoration-color: var(--meridian-text-faint);
}

.meridian-checklist-item__num {
    font-family: var(--meridian-font-mono);
    font-size: 11px;
    color: var(--meridian-text-faint);
}

.meridian-checklist-item__why {
    margin-top: 6px;
    margin-left: 30px;
    font-size: 11px;
    color: var(--meridian-text-dim);
    line-height: 1.5;
}

.meridian-checklist-item__link {
    margin-top: 6px;
    margin-left: 30px;
    font-family: var(--meridian-font-mono);
    font-size: 10.5px;
    color: var(--meridian-accent);
}

.meridian-checklist-item__link--done {
    color: var(--meridian-text-faint);
}

/* All-done banner */
.meridian-checklist-allDone {
    padding: 12px;
    background: var(--meridian-pass-soft);
    border: 1px solid color-mix(in srgb, var(--meridian-pass) 20%, transparent);
    font-size: 11.5px;
    color: var(--meridian-text);
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 10px;
}

.meridian-checklist-allDone__icon {
    color: var(--meridian-pass);
    font-size: 16px;
    flex-shrink: 0;
}

/* Hide link */
.meridian-checklist-hide {
    font-family: var(--meridian-font-mono);
    font-size: 10.5px;
    color: var(--meridian-text-dim);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: center;
    padding: 0;
    width: 100%;
    text-decoration: none;
}

.meridian-checklist-hide:hover {
    color: var(--meridian-text-mid);
}

/* Collapsed pill (bottom-right floating) */
.meridian-checklist-pill {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 200;
    padding: 8px 12px;
    background: var(--meridian-bg-panel);
    border: 1px solid var(--meridian-border);
    font-size: 11.5px;
    color: var(--meridian-text-mid);
    font-family: var(--meridian-font-mono);
    cursor: pointer;
    border-radius: var(--meridian-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transition: border-color 0.15s ease;
}

.meridian-checklist-pill:hover {
    border-color: var(--meridian-border-strong);
    color: var(--meridian-text);
}

/* -------- Orientation banner (FR-ONB-018) ------------------------------
   design-reference: docs/ux/claude-design/screen-firstrun.jsx#FRInvitedTeammate
   --------------------------------------------------------------------- */

.meridian-orientation-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 24px;
    background: var(--meridian-bg-panel);
    border-bottom: 1px solid color-mix(in srgb, var(--meridian-accent) 33%, transparent);
    border-top: 2px solid var(--meridian-accent);
}

.meridian-orientation-banner__badge {
    padding: 3px 8px;
    background: var(--meridian-accent-soft);
    color: var(--meridian-accent);
    font-family: var(--meridian-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    border: 1px solid color-mix(in srgb, var(--meridian-accent) 33%, transparent);
    border-radius: var(--meridian-radius);
    white-space: nowrap;
}

.meridian-orientation-banner__body {
    font-size: 13px;
    color: var(--meridian-text);
    flex: 1;
}

.meridian-orientation-banner__dismiss {
    background: transparent;
    border: 1px solid var(--meridian-border);
    color: var(--meridian-text-mid);
    font-size: 11.5px;
    padding: 5px 10px;
    border-radius: var(--meridian-radius);
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
}

.meridian-orientation-banner__dismiss:hover {
    background: var(--meridian-bg-sunk);
}

/* ===================================================================
 * Phase 3 — Composite widget CSS
 * GateStrip · FailureList · FailureDetail · TweaksPanel
 * =================================================================== */

/* -------- GateStrip (PR gate inline summary bar) ------------------- */

.m-gate-strip {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
}

.m-gate-strip__cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 7px 9px;
    background: var(--meridian-bg-panel);
    border: 1px solid var(--meridian-border);
    border-left: 3px solid var(--meridian-pass);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 0.1s ease;
}

.m-gate-strip__cell:hover {
    background: var(--meridian-bg-sunk);
}

/* disabled = no OnCellClick wired */
.m-gate-strip__cell:disabled {
    cursor: default;
}

.m-gate-strip__cell--fail {
    border-left-color: var(--meridian-fail);
}

.m-gate-strip__cell-head {
    display: flex;
    align-items: center;
    gap: 4px;
}

.m-gate-strip__label {
    font-family: var(--meridian-font-mono);
    font-size: 9.5px;
    color: var(--meridian-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.m-gate-strip__status {
    font-family: var(--meridian-font-mono);
    font-size: 9px;
    color: var(--meridian-text-faint);
    margin-top: 2px;
}

/* -------- FailureList ---------------------------------------------- */

.m-failure-list {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

/* FailureList empty state — MeridianEmptyCard is used here; override card
   padding so it sits flush inside the panel body. The m-empty base class
   provides centred flex layout; we only override spacing tokens. */
.m-failure-list__empty.m-empty {
    padding: 24px 16px;
    min-height: 80px;
}

.m-failure-list__head {
    display: grid;
    grid-template-columns: 16px 1fr 100px 48px 70px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--meridian-border);
    font-size: 9.5px;
    color: var(--meridian-text-dim);
    font-family: var(--meridian-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
}

.m-failure-list__scroll {
    overflow-y: auto;
    flex: 1;
}

.m-failure-list__row {
    display: grid;
    grid-template-columns: 16px 1fr 100px 48px 70px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--meridian-border-hair);
    border-left: 3px solid transparent;
    background: transparent;
    cursor: pointer;
    align-items: center;
    text-align: left;
    width: 100%;
    font-family: inherit;
    transition: background 0.1s ease;
}

.m-failure-list__row:hover {
    background: var(--meridian-bg-sunk);
}

.m-failure-list__row--selected {
    border-left-color: var(--meridian-accent);
    background: var(--meridian-accent-soft);
}

.m-failure-list__row--selected:hover {
    background: var(--meridian-accent-soft);
}

.m-failure-list__x {
    color: var(--meridian-fail);
    font-size: 10px;
}

.m-failure-list__mid {
    min-width: 0;
}

.m-failure-list__name {
    font-family: var(--meridian-font-mono);
    font-size: 11.5px;
    color: var(--meridian-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m-failure-list__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--meridian-text-dim);
    margin-top: 2px;
}

.m-failure-list__mono {
    font-family: var(--meridian-font-mono);
}

.m-failure-list__linked {
    color: var(--meridian-accent);
    font-family: var(--meridian-font-mono);
}

.m-failure-list__svc {
    font-family: var(--meridian-font-mono);
    font-size: 10.5px;
    color: var(--meridian-text-dim);
}

.m-failure-list__num {
    font-family: var(--meridian-font-mono);
    font-size: 11px;
    color: var(--meridian-text-mid);
    text-align: right;
    font-weight: 500;
}

.m-failure-list__streak--hot {
    color: var(--meridian-fail);
}

.m-failure-list__first {
    font-size: 10px;
    color: var(--meridian-text-faint);
}

/* -------- FailureDetail -------------------------------------------- */

.m-failure-detail {
    overflow-y: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.m-failure-detail__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--meridian-text-dim);
    font-size: 12px;
    font-family: var(--meridian-font-mono);
    padding: 24px;
}

.m-failure-detail__head {
    padding: 12px 14px;
    border-bottom: 1px solid var(--meridian-border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.m-failure-detail__name {
    font-family: var(--meridian-font-mono);
    font-size: 13px;
    color: var(--meridian-text);
    line-height: 1.4;
}

.m-failure-detail__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 11px;
    color: var(--meridian-text-dim);
    font-family: var(--meridian-font-mono);
}

.m-failure-detail__strong {
    color: var(--meridian-text);
}

.m-failure-detail__strong--fail {
    color: var(--meridian-fail);
}

.m-failure-detail__strong--accent {
    color: var(--meridian-accent);
}

.m-failure-detail__id {
    font-family: var(--meridian-font-mono);
    font-size: 10px;
    color: var(--meridian-text-faint);
}

.m-failure-detail__classification {
    margin-top: 2px;
}

.m-failure-detail__body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.m-failure-detail__assert {
    background: var(--meridian-fail-soft);
    color: var(--meridian-fail);
    padding: 10px 12px;
    font-family: var(--meridian-font-mono);
    font-size: 11.5px;
    border-radius: 2px;
    line-height: 1.5;
}

.m-failure-detail__stack {
    background: var(--meridian-bg-sunk);
    padding: 10px 12px;
    font-family: var(--meridian-font-mono);
    font-size: 11px;
    color: var(--meridian-text-mid);
    line-height: 1.6;
    overflow-x: auto;
}

.m-failure-detail__stack-msg {
    color: var(--meridian-text);
}

.m-failure-detail__stack-line {
    white-space: pre;
}

.m-failure-detail__history {
    display: flex;
    flex-direction: column;
}

.m-failure-detail__history-row {
    display: grid;
    grid-template-columns: 70px 1fr 60px 50px;
    padding: 5px 0;
    font-size: 11px;
    align-items: center;
    border-bottom: 1px solid var(--meridian-border-hair);
}

.m-failure-detail__history-t {
    font-family: var(--meridian-font-mono);
    color: var(--meridian-text-faint);
}

.m-failure-detail__history-run {
    font-family: var(--meridian-font-mono);
    color: var(--meridian-text);
}

.m-failure-detail__history-dur {
    font-family: var(--meridian-font-mono);
    color: var(--meridian-text-dim);
    text-align: right;
}

/* -------- TweaksPanel (right-side sticky filter drawer) ------------- */

.m-tweaks-panel {
    position: sticky;
    top: 0;
    width: 280px;
    height: 100%;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--meridian-bg-panel);
    border-left: 1px solid var(--meridian-border-hair);
    overflow: hidden;
    flex-shrink: 0;
}

.m-tweaks-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--meridian-border-hair);
    flex-shrink: 0;
}

.m-tweaks-panel__title {
    font-family: var(--meridian-font-mono);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--meridian-text-dim);
}

.m-tweaks-panel__close {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--meridian-text-faint);
    width: 22px;
    height: 22px;
    border-radius: var(--meridian-radius);
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s ease, color 0.1s ease;
}

.m-tweaks-panel__close:hover {
    background: var(--meridian-bg-sunk);
    color: var(--meridian-text);
}

.m-tweaks-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--meridian-border) transparent;
}

.m-tweaks-panel__footer {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--meridian-border-hair);
    flex-shrink: 0;
    background: var(--meridian-bg-panel);
}

/* -------- I-audit contrast fixes (batch 2) -------------------------
 * Patterns collected from the live diag run on 2026-05-11.
 * ------------------------------------------------------------------ */

/* MudFab primary — MudBlazor 9.x hardcodes --mud-palette-primary-text as the
   text colour on the primary FAB via .mud-fab-primary. Our primary colour is
   #18b800 (bright green); white text on that = 2.05:1 — fails WCAG AA.
   Light: dark text (#0e1116) on #18b800 = 7.49:1 — passes.
   Dark: bright lime (#9cff3a) background; dark text = ~13:1 — passes.
   I-audit B1: corrected class name to .mud-fab-primary (MudBlazor 9.x). */
.mud-fab-primary .mud-fab-label,
.mud-fab-primary .mud-icon-root {
    color: var(--meridian-text) !important;
}
[data-theme="dark"] .mud-fab-primary .mud-fab-label,
[data-theme="dark"] .mud-fab-primary .mud-icon-root {
    color: var(--meridian-text) !important;
}

/* MudBlazor mud-link / mud-primary-text — the global link override above
   targets bare <a> tags; Mud renders links as <a class="mud-link mud-primary-text …">
   and sets color via --mud-palette-primary directly on the element style,
   winning over our cascade. Force accent-strong. Dark theme gets accent
   (bright lime) which already passes on dark surfaces. */
.mud-link.mud-primary-text {
    color: var(--meridian-accent-strong) !important;
}
[data-theme="dark"] .mud-link.mud-primary-text {
    color: var(--meridian-accent) !important;
}

/* MudAlert info / warn body text — MudBlazor 9.x renders alert text in the
   alert colour (info = #0aa8c7, warn = #d97706) which fails AA on light fills.
   MudBlazor 9 class names: .mud-alert-text-info, .mud-alert-filled-info,
   .mud-alert-outlined-info (NOT .mud-alert-color-info which was MudBlazor ≤7).
   Use -strong tokens to get above 4.5:1 on any light alert background.
   I-audit B1: corrected selectors for MudBlazor 9.x. */
.mud-alert.mud-alert-text-info,
.mud-alert.mud-alert-outlined-info,
.mud-alert-text-info .mud-alert-message,
.mud-alert-text-info .mud-alert-message a,
.mud-alert-filled-info .mud-alert-message,
.mud-alert-filled-info .mud-alert-message a,
.mud-alert-outlined-info .mud-alert-message,
.mud-alert-outlined-info .mud-alert-message a {
    color: var(--meridian-info-strong) !important;
}
.mud-alert.mud-alert-text-warning,
.mud-alert.mud-alert-outlined-warning,
.mud-alert-text-warning .mud-alert-message,
.mud-alert-text-warning .mud-alert-message a,
.mud-alert-filled-warning .mud-alert-message,
.mud-alert-filled-warning .mud-alert-message a,
.mud-alert-outlined-warning .mud-alert-message,
.mud-alert-outlined-warning .mud-alert-message a {
    color: var(--meridian-warn-strong) !important;
}
[data-theme="dark"] .mud-alert-text-info .mud-alert-message,
[data-theme="dark"] .mud-alert-text-info .mud-alert-message a,
[data-theme="dark"] .mud-alert-filled-info .mud-alert-message,
[data-theme="dark"] .mud-alert-filled-info .mud-alert-message a,
[data-theme="dark"] .mud-alert-outlined-info .mud-alert-message,
[data-theme="dark"] .mud-alert-outlined-info .mud-alert-message a {
    color: var(--meridian-info) !important;
}
[data-theme="dark"] .mud-alert-text-warning .mud-alert-message,
[data-theme="dark"] .mud-alert-text-warning .mud-alert-message a,
[data-theme="dark"] .mud-alert-filled-warning .mud-alert-message,
[data-theme="dark"] .mud-alert-filled-warning .mud-alert-message a,
[data-theme="dark"] .mud-alert-outlined-warning .mud-alert-message,
[data-theme="dark"] .mud-alert-outlined-warning .mud-alert-message a {
    color: var(--meridian-warn) !important;
}

/* I-audit: devtools overlay gallery subtitle — scoped Razor CSS prevents
   direct edit; override here. text-faint (#a3abb8) on bg-panel = 2.23:1 → text-mid */
.m-overlay-gallery__sub {
    color: var(--meridian-text-mid) !important;
}


/* ────────────────────────────────────────────────────────────────────────────
   ADR-049 Stage B — Native OTel Span-Tree viewer (m-span-tree-*)
   Design pending: DR-013 (docs/ux/design-requests/DR-013-native-otel-span-tree-viewer.md).
   Tokens reference meridian-tokens.css variables only — no raw hex.
   ────────────────────────────────────────────────────────────────────────── */

.m-span-tree {
    position: relative;
    font-size: 0.85rem;
}

/* ── Time axis ruler ────────────────────────────────────────────────────── */

.m-span-tree__ruler {
    height: 24px;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--meridian-bg-panel);
    border-bottom: 1px solid var(--meridian-border);
    margin-bottom: 4px;
}

.m-span-tree__ruler-track {
    position: relative;
    height: 100%;
    /* left 200px for label column; remaining space is the bar track */
    margin-left: 200px;
    margin-right: 60px;
}

.m-span-tree__ruler-tick {
    position: absolute;
    font-size: 0.7rem;
    font-family: var(--meridian-font-mono, monospace);
    color: var(--meridian-text-faint);
    transform: translateX(-50%);
    top: 4px;
    white-space: nowrap;
}

/* ── Filter badge ───────────────────────────────────────────────────────── */

.m-span-tree__filter-badge {
    margin-bottom: 6px;
}

/* ── Span rows ──────────────────────────────────────────────────────────── */

.m-span-tree__rows {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.m-span-tree__row {
    display: flex;
    align-items: center;
    min-height: 30px;
    cursor: pointer;
    border-radius: var(--meridian-radius-sm, 3px);
    transition: background 0.1s ease;
}

.m-span-tree__row:hover {
    background: var(--meridian-bg-raised);
}

.m-span-tree__row--selected {
    background: var(--meridian-bg-raised);
    outline: 1px solid var(--meridian-accent);
}

.m-span-tree__row--dimmed {
    opacity: 0.25;
}

.m-span-tree__row--error {
    border-left: 3px solid var(--meridian-fail);
    padding-left: 3px;
}

/* ── Label column ───────────────────────────────────────────────────────── */

.m-span-tree__label {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 200px;
    min-width: 200px;
    overflow: hidden;
    padding-right: 8px;
}

.m-span-tree__expand-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--meridian-text-mid);
    width: 16px;
    min-width: 16px;
    text-align: center;
    padding: 0;
}

.m-span-tree__expand-placeholder {
    width: 16px;
    min-width: 16px;
    display: inline-block;
}

.m-span-tree__service {
    font-size: 0.72rem;
    color: var(--meridian-text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
}

.m-span-tree__op {
    font-size: 0.8rem;
    color: var(--meridian-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* ── Bar track ──────────────────────────────────────────────────────────── */

.m-span-tree__track {
    flex: 1;
    position: relative;
    height: 14px;
    background: var(--meridian-bg-sunk);
    border-radius: 2px;
    overflow: hidden;
}

.m-span-tree__bar {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 2px;
    min-width: 2px;
}

/* Service-colour palette — 8 slots cycling modulo service name hash.
   These are neutral, non-semantic colours derived from the meridian token set.
   The designer should refine this palette per DR-013. */
.m-span-bar--color-0 { background: var(--meridian-accent); }
.m-span-bar--color-1 { background: var(--meridian-info); }
.m-span-bar--color-2 { background: var(--meridian-pass); }
.m-span-bar--color-3 { background: var(--meridian-warn); }
.m-span-bar--color-4 { background: var(--meridian-text-mid); }
.m-span-bar--color-5 { background: var(--meridian-fail); opacity: 0.6; }
.m-span-bar--color-6 { background: var(--meridian-accent); opacity: 0.6; }
.m-span-bar--color-7 { background: var(--meridian-info); opacity: 0.6; }

/* ── Duration column ─────────────────────────────────────────────────────── */

.m-span-tree__duration {
    width: 56px;
    min-width: 56px;
    text-align: right;
    font-family: var(--meridian-font-mono, monospace);
    font-size: 0.72rem;
    color: var(--meridian-text-faint);
    padding-left: 6px;
}

/* ── Detail panel ───────────────────────────────────────────────────────── */

.m-span-tree__detail-panel {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--meridian-border);
    border-radius: var(--meridian-radius);
    background: var(--meridian-bg-panel);
}

.m-span-tree__detail-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.m-span-tree__detail-row {
    display: flex;
    gap: 8px;
    align-items: center;
    min-height: 28px;
    border-bottom: 1px solid var(--meridian-border);
}

.m-span-tree__detail-row:last-of-type {
    border-bottom: none;
}

.m-span-tree__detail-label {
    font-size: 0.75rem;
    color: var(--meridian-text-faint);
    width: 90px;
    min-width: 90px;
}

.m-span-tree__detail-value {
    font-size: 0.8rem;
    color: var(--meridian-text-strong);
}

.m-span-tree__detail-mono {
    font-family: var(--meridian-font-mono, monospace);
    font-size: 0.78rem;
}

.m-span-tree__detail-section-label {
    display: block;
    color: var(--meridian-text-faint);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-top: 4px;
}

/* ── Attribute table ─────────────────────────────────────────────────────── */

.m-span-tree__attr-table {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 200px;
    overflow-y: auto;
    margin-top: 4px;
}

.m-span-tree__attr-row {
    display: flex;
    gap: 8px;
    font-size: 0.78rem;
}

.m-span-tree__attr-key {
    font-family: var(--meridian-font-mono, monospace);
    color: var(--meridian-text-mid);
    min-width: 120px;
    max-width: 180px;
    word-break: break-all;
}

.m-span-tree__attr-value {
    color: var(--meridian-text-strong);
    word-break: break-word;
}

/* ── Events list ────────────────────────────────────────────────────────── */

.m-span-tree__events {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}

.m-span-tree__event-row {
    font-size: 0.78rem;
    color: var(--meridian-text-mid);
    padding: 2px 0;
    border-bottom: 1px dashed var(--meridian-border);
}


/* ── #603 Wave C — wizard workspace step + manage-tenants dialog ──────────── */

.meridian-wizard-workspace-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--meridian-border);
    border-radius: 2px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.1s ease, border-color 0.1s ease;
}

.meridian-wizard-workspace-row:hover {
    border-color: var(--meridian-primary);
    background: var(--meridian-surface-hover);
}

.meridian-wizard-workspace-row--selected {
    border-color: var(--meridian-primary);
    background: var(--meridian-primary-subtle, rgba(var(--mud-palette-primary-rgb, 99,116,204), 0.08));
}

.meridian-wizard-workspace-check {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--meridian-border-strong);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--meridian-primary);
}

.meridian-wizard-workspace-row--selected .meridian-wizard-workspace-check {
    background: var(--meridian-primary);
    border-color: var(--meridian-primary);
    color: #fff;
}

.meridian-wizard-workspace-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.meridian-wizard-workspace-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--meridian-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.meridian-wizard-workspace-slug {
    font-size: 0.75rem;
    font-family: var(--meridian-font-mono, monospace);
}

/* Manage-tenants dialog row */
.manage-tenants-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    flex-wrap: wrap;
}

.manage-tenants-remove-btn {
    font-size: 0.75rem;
}

.manage-tenants-remove-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
}

.manage-tenants-reason-input {
    flex: 1;
    min-width: 200px;
}

/* #697 — per-workspace role-set control group on each membership row. */
.manage-tenants-role-set {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.manage-tenants-role-select {
    min-width: 180px;
}
/* ============================================================
   AxisBlame composite — implicated-axis chip + ranked alternatives.
   ADR-067 / test-variant-matrix. design-reference: components-blame.jsx.
   Tone sets --ab-color / --ab-soft; everything else reads those vars.
   ============================================================ */

.m-axis-blame {
    --ab-color: var(--meridian-info);
    --ab-soft: var(--meridian-info-soft);
    font-family: var(--meridian-font-mono);
    border-radius: 2px;
}
.m-axis-blame--high   { --ab-color: var(--meridian-fail); --ab-soft: var(--meridian-fail-soft); }
.m-axis-blame--med    { --ab-color: var(--meridian-warn); --ab-soft: var(--meridian-warn-soft); }
.m-axis-blame--inconc { --ab-color: var(--meridian-info); --ab-soft: var(--meridian-info-soft); }

.m-axis-blame__axis  { color: var(--meridian-text-dim); }
.m-axis-blame__eq    { color: var(--meridian-text-faint); margin: 0 4px; }
.m-axis-blame__value { color: var(--ab-color); font-weight: 600; }
.m-axis-blame--inconc .m-axis-blame__value { color: var(--meridian-text-mid); font-weight: 400; }
.m-axis-blame__glyph { color: var(--ab-color); font-weight: 700; text-align: center; flex-shrink: 0; }

/* compact (triage row) */
.m-axis-blame--compact {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 8px; background: var(--ab-soft);
    border: 1px solid transparent;
}
.m-axis-blame--compact.m-axis-blame--inconc { border: 1px dashed var(--ab-color); }
.m-axis-blame--compact .m-axis-blame__glyph { font-size: 11px; width: 12px; }
.m-axis-blame__body { min-width: 0; flex: 1; }
.m-axis-blame__line { font-size: 11px; color: var(--meridian-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-axis-blame__lift { color: var(--meridian-text-dim); margin-left: 6px; font-size: 10px; }
.m-axis-blame__evidence { font-size: 10px; color: var(--meridian-text-mid); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-axis-blame--inconc .m-axis-blame__evidence { color: var(--meridian-text-dim); font-style: italic; }

/* full (panel body) */
.m-axis-blame--full {
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px; background: var(--ab-soft);
    border: 1px solid var(--ab-color); border-left: 3px solid var(--ab-color);
}
.m-axis-blame--full.m-axis-blame--inconc { border: 1px dashed var(--ab-color); border-left: 1px dashed var(--ab-color); }
.m-axis-blame__head { display: flex; align-items: center; gap: 10px; }
.m-axis-blame--full .m-axis-blame__glyph { font-size: 14px; width: 16px; }
.m-axis-blame__headmain { flex: 1; min-width: 0; }
.m-axis-blame__label { font-size: 10px; color: var(--ab-color); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.m-axis-blame__coord { font-size: 16px; color: var(--meridian-text); margin-top: 2px; }
.m-axis-blame__coord .m-axis-blame__value { font-weight: 700; }
.m-axis-blame--inconc .m-axis-blame__coord .m-axis-blame__value { font-weight: 500; color: var(--meridian-text-mid); }
.m-axis-blame__liftbox { text-align: right; }
.m-axis-blame__liftlabel { font-size: 9.5px; color: var(--meridian-text-dim); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.m-axis-blame__liftval { font-size: 18px; font-weight: 700; color: var(--ab-color); font-variant-numeric: tabular-nums; }
.m-axis-blame__evidence--full { font-size: 12px; color: var(--meridian-text); line-height: 1.5; white-space: normal; overflow: visible; }
.m-axis-blame--inconc .m-axis-blame__evidence--full { color: var(--meridian-text-mid); font-style: italic; }

/* ranked alternatives */
.m-axis-blame-ranked { display: flex; flex-direction: column; gap: 10px; }
.m-axis-blame-ranked__altlabel { font-size: 9.5px; color: var(--meridian-text-dim); font-family: var(--meridian-font-mono); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.m-axis-blame-ranked__alts { display: flex; flex-direction: column; gap: 6px; }
.m-axis-blame-ranked__alt {
    --ab-color: var(--meridian-info);
    display: grid; grid-template-columns: 200px 90px 1fr 60px; gap: 10px; align-items: center;
    padding: 6px 10px; background: var(--meridian-bg-raised);
    border: 1px solid var(--meridian-border-hair);
    font-family: var(--meridian-font-mono);
}
.m-axis-blame-ranked__alt--high   { --ab-color: var(--meridian-fail); }
.m-axis-blame-ranked__alt--med    { --ab-color: var(--meridian-warn); }
.m-axis-blame-ranked__alt--inconc { --ab-color: var(--meridian-info); }
.m-axis-blame-ranked__coord { font-size: 11px; color: var(--meridian-text); }
.m-axis-blame-ranked__evidence { font-size: 10.5px; color: var(--meridian-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-axis-blame-ranked__lift { font-size: 11px; color: var(--ab-color); font-weight: 600; text-align: right; }