/*
 * 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;
}

/* 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;
    color: #fff !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);
}

.mud-tab.mud-tab-active {
    color: var(--meridian-text);
}

.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;
}

/* -------- 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);
}

/* -------- 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;
}

.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;
}

/* -------- 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-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-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;
}