html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* ── pi-fleet ───────────────────────────────────────────────────────────────
   Added for the fleet console. Everything here is scoped to fleet-specific
   classes so it cannot fight MudBlazor's own styles. Dark-first, because this
   is a monitoring surface people leave open. */

:root {
    /* Fallbacks only — MainLayout injects the active theme's values, which win
       because they are emitted later in the document. */
    --fleet-bg:        #0d1117;
    --fleet-panel:     #161b22;
    --fleet-panel-2:   #1c2129;
    --fleet-border:    #2a3038;
    --fleet-text:      #e6edf3;
    --fleet-muted:     #8b949e;
    --fleet-accent:    #58a6ff;
    --fleet-busy:      #d29922;
    --fleet-ok:        #3fb950;
    --fleet-err:       #f85149;
    --fleet-queued:    #a371f7;
}

/* ── login ── */
/* THE LOGIN WEARS THE PRODUCT'S OWN PALETTE, not the default theme's.
   Sign-in happens before we know which theme the user picked, so it fell back to
   fleet-dark's cold blue -- the one screen guaranteed to be seen by everyone was the
   one screen that looked like a different product. These are Kowloon Neon's tokens
   (lacquer black, imperial gold, jade, neon red), scoped to this page only so the
   console itself stays fully themeable. */
.login-wrap {
    --fleet-bg: #0b0709;
    --fleet-panel: #180d12;
    --fleet-border: #3a1a24;
    --fleet-text: #ffeede;
    --fleet-muted: #c09a93;
    --fleet-accent: #ff6b35;   /* ember: between the theme's neon red and its gold */
    --fleet-busy: #ffcb45;
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    /* Ember, not the old cold-blue wash: this is the first screen of the product and it
       should read as the same thing the console does. Two offset pools rather than one
       centred glow, so the card sits in the light instead of on top of a halo. */
    background:
        radial-gradient(900px 520px at 18% -12%, color-mix(in srgb, var(--fleet-accent) 22%, transparent) 0%, transparent 62%),
        radial-gradient(1100px 620px at 88% 108%, color-mix(in srgb, var(--fleet-busy) 14%, transparent) 0%, transparent 60%),
        var(--fleet-bg);
}
.login-card {
    width: 100%; max-width: 380px;
    background: var(--fleet-panel);
    border: 1px solid var(--fleet-border);
    border-radius: 14px;
    padding: 28px 26px 24px;
    box-shadow: 0 24px 60px rgba(0,0,0,.5);
    color: var(--fleet-text);
    /* A hairline of accent along the top edge -- the same cue the component cards use on
       hover, so the two screens feel like one product. */
    position: relative; overflow: hidden;
}
.login-card::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 2px;
    background: linear-gradient(90deg, transparent, var(--fleet-accent), transparent);
    opacity: .75;
}
.login-brand { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
.login-logo {
    font-size: 30px; line-height: 1;
    width: 52px; height: 52px; display: grid; place-items: center;
    border-radius: 13px;
    color: var(--fleet-accent);
    background: color-mix(in srgb, var(--fleet-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--fleet-accent) 34%, var(--fleet-border));
}
.login-card h1 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -.02em; }
.login-card p  { margin: 2px 0 0; font-size: 13px; color: var(--fleet-muted); }
.login-card label { display: block; font-size: 12px; color: var(--fleet-muted); margin: 14px 0 6px; }
.login-card input[type=text], .login-card input[type=password], .login-card input:not([type]) {
    width: 100%; box-sizing: border-box;
    background: #0d1117; color: var(--fleet-text);
    border: 1px solid var(--fleet-border); border-radius: 8px;
    padding: 11px 12px; font-size: 15px; outline: none;
}
.login-card input:focus { border-color: var(--fleet-accent); box-shadow: 0 0 0 3px rgba(88,166,255,.15); }
.login-remember { display: flex !important; align-items: center; gap: 8px; margin: 18px 0 4px !important; color: var(--fleet-muted); font-size: 13px; }
.login-remember input { width: auto !important; }
.login-card button {
    width: 100%; margin-top: 18px; padding: 11px 14px;
    background: var(--fleet-accent); color: #08131f;
    border: 0; border-radius: 8px; font-size: 15px; font-weight: 650; cursor: pointer;
}
.login-card button:hover { filter: brightness(1.08); }
.login-error {
    background: rgba(248,81,73,.12); border: 1px solid rgba(248,81,73,.4);
    color: #ffb4ae; border-radius: 8px; padding: 10px 12px; font-size: 13px;
}

/* ── status feed ── */
.feed { display: flex; flex-direction: column; gap: 10px; }
.feed-item {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--fleet-panel, var(--mud-palette-surface)); border: 1px solid var(--fleet-border, var(--mud-palette-lines-default));
    border-radius: 10px; padding: 10px 12px;
}
.feed-item.is-media { flex-direction: column; gap: 8px; }
.feed-time { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--mud-palette-text-secondary); white-space: nowrap; }
.feed-agent { font-weight: 600; font-size: 13px; }
.feed-text { font-size: 14px; }
.feed-media { width: 100%; border-radius: 8px; background: #000; display: block; max-height: 62vh; }
.feed-media-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; }
.feed-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; margin-top: 6px; }

/* ── lanes ── */
.lane-card { border-radius: 10px; padding: 12px 14px; }
.lane-bar { height: 6px; border-radius: 3px; background: var(--mud-palette-lines-default); overflow: hidden; margin-top: 8px; }
.lane-bar > span { display: block; height: 100%; }

/* ── kanban ── */
.kb-col {
    min-height: 140px; border-radius: 10px; padding: 10px;
    background: var(--fleet-panel, var(--mud-palette-surface));
    border: 1px solid var(--fleet-border, var(--mud-palette-lines-default));
}
.kb-col.drag-over { outline: 2px dashed var(--fleet-accent, #58a6ff); outline-offset: -4px; }
.kb-card { border-radius: 8px; padding: 10px 11px; margin-bottom: 8px; cursor: grab; border-left: 4px solid transparent; }
.kb-card:active { cursor: grabbing; }
.kb-scroll { overflow-x: auto; }

/* ── chat ── */
.chat-log { display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; }
.chat-row { display: flex; }
.chat-row.me { justify-content: flex-end; }
.chat-bubble {
    max-width: min(680px, 88%); padding: 10px 13px; border-radius: 12px;
    white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.5;
}
.chat-row.me .chat-bubble { background: var(--fleet-accent, #58a6ff); color: var(--fleet-bg, #08131f); border-bottom-right-radius: 4px; }
.chat-row.them .chat-bubble { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-bottom-left-radius: 4px; }
.chat-meta { font-size: 11px; color: var(--mud-palette-text-secondary); margin: 2px 4px 0; }

@media (max-width: 700px) {
    .feed-time { font-size: 11px; }
    .chat-bubble { max-width: 92%; }
}

.fleet-file {
    display: block; width: 100%; box-sizing: border-box;
    padding: 10px; border-radius: 8px; font-size: 14px;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background-gray);
    border: 1px dashed var(--mud-palette-lines-default);
}

/* Page padding lives here rather than on MudMainContent, whose appbar-clearance
   padding-top must not be overridden by a `pa-*` utility (they are !important). */
.fleet-content { padding: 16px 16px 48px; }
@media (max-width: 600px) { .fleet-content { padding: 12px 12px 48px; } }

/* ── phone bottom navigation ────────────────────────────────────────────────
   Hidden on desktop, where the MudDrawer is the nav. Shown below MudBlazor's Md
   breakpoint (960px), where the drawer collapses behind a hamburger and would
   otherwise be the only way to reach any other page. */
.fleet-bottomnav { display: none; }

@media (max-width: 959.98px) {
    .fleet-bottomnav {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1300;                 /* above MudMainContent, below dialogs */
        background: var(--mud-palette-surface, #161b22);
        border-top: 1px solid var(--mud-palette-lines-default, #2a3038);
        /* Clear the iOS home indicator. */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .fleet-bottomnav a {
        flex: 1 1 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 2px;
        padding: 8px 2px 6px;
        min-height: 56px;              /* comfortable touch target */
        font-size: 11px;
        text-decoration: none;
        color: var(--mud-palette-text-secondary, #8b949e);
    }
    .fleet-bottomnav a.active {
        color: var(--mud-palette-primary, #58a6ff);
        box-shadow: inset 0 2px 0 0 var(--mud-palette-primary, #58a6ff);
    }
    .fleet-bottomnav .bn-ico { line-height: 0; }

    /* Keep the last rows of content clear of the fixed bar. */
    .fleet-content { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* Terminal themes set --fleet-font; everything else keeps the Mud default. */
body, .mud-typography { font-family: var(--fleet-font, inherit); }
.feed-time, code, .mud-table-cell code { font-family: var(--fleet-font, ui-monospace, SFMono-Regular, Menlo, monospace); }

/* ── inbox (works without a Blazor circuit, so it is plain CSS + forms) ── */
.inbox-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.inbox-options form { margin: 0; }
.inbox-opt {
    background: var(--fleet-accent, #58a6ff); color: var(--fleet-bg, #08131f);
    border: 0; border-radius: 8px; padding: 9px 14px;
    font-size: 14px; font-weight: 600; cursor: pointer; min-height: 40px;
}
.inbox-opt:hover { filter: brightness(1.1); }
/* The answer form is now a column: a real textarea (an epic review gets a long, detailed
   reply) with the option buttons underneath, all in ONE form so the choice and the message
   submit together. */
.inbox-free { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.inbox-free textarea {
    width: 100%; box-sizing: border-box; resize: vertical; min-height: 72px;
    background: var(--fleet-bg, #0d1117); color: var(--fleet-text, #e6edf3);
    border: 1px solid var(--fleet-border, #2a3038); border-radius: 8px;
    padding: 10px 12px; font-size: 15px; line-height: 1.5;
    font-family: inherit;   /* not the browser's monospace default */
}
.inbox-free textarea:focus { outline: none; border-color: var(--fleet-accent, #58a6ff); }
.inbox-free .inbox-options { display: flex; gap: 8px; flex-wrap: wrap; }
.inbox-free .inbox-send { align-self: flex-start; }
.inbox-free input[type=text] {
    flex: 1 1 200px; min-width: 0; box-sizing: border-box;
    background: var(--fleet-bg, #0d1117); color: var(--fleet-text, #e6edf3);
    border: 1px solid var(--fleet-border, #2a3038); border-radius: 8px;
    padding: 10px 12px; font-size: 15px;   /* >=16px avoids iOS zoom-on-focus */
}
.inbox-free input[type=text]:focus { outline: none; border-color: var(--fleet-accent, #58a6ff); }
.inbox-send {
    background: var(--fleet-ok, #3fb950); color: var(--fleet-bg, #08131f);
    border: 0; border-radius: 8px; padding: 10px 16px;
    font-size: 14px; font-weight: 600; cursor: pointer; min-height: 40px;
}
.inbox-dismiss { margin-top: 8px; }
.inbox-dismiss button {
    background: none; border: 0; padding: 4px 0;
    color: var(--fleet-muted, #8b949e); font-size: 12.5px; cursor: pointer; text-decoration: underline;
}
.inbox-context { margin: 6px 0 10px; color: var(--fleet-muted, #8b949e); font-size: 13px; }
.inbox-context summary { cursor: pointer; }
.inbox-context div { white-space: pre-wrap; margin-top: 6px; }
@media (max-width: 600px) {
    .inbox-opt, .inbox-send { flex: 1 1 auto; min-height: 44px; }
    .inbox-free input[type=text] { font-size: 16px; }
    .inbox-free textarea { font-size: 16px; }
}

/* ── theme picker (form buttons, so it works without a circuit) ── */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.theme-grid form { margin: 0; }
.theme-card {
    width: 100%; text-align: left; cursor: pointer;
    display: flex; flex-direction: column; gap: 3px;
    background: var(--fleet-panel, #161b22);
    border: 1px solid var(--fleet-border, #2a3038);
    border-radius: 10px; padding: 11px 12px; min-height: 74px;
    color: var(--fleet-text, #e6edf3);
    font: inherit;
}
.theme-card:hover { border-color: var(--fleet-accent, #58a6ff); }
.theme-card.is-active { border-color: var(--fleet-accent, #58a6ff); box-shadow: inset 0 0 0 1px var(--fleet-accent, #58a6ff); }
.theme-swatch { width: 26px; height: 8px; border-radius: 4px; display: block; margin-bottom: 3px; }
.theme-name { font-size: 13.5px; font-weight: 600; }
.theme-blurb { font-size: 11.5px; color: var(--fleet-muted, #8b949e); line-height: 1.35; }

.refresh-form { display: flex; flex-wrap: wrap; gap: 8px; }
.refresh-opt {
    cursor: pointer; font: inherit; font-size: 13px;
    background: var(--fleet-panel, #161b22); color: var(--fleet-text, #e6edf3);
    border: 1px solid var(--fleet-border, #2a3038);
    border-radius: 999px; padding: 7px 15px; min-height: 38px;
}
.refresh-opt.is-active { background: var(--fleet-accent, #58a6ff); color: var(--fleet-bg, #08131f); border-color: transparent; font-weight: 600; }

/* ── clean-slate console: pinned phase bar, glow states, timeline ───────── */
.mud-layout { --mud-appbar-height: 48px; }
.fleet-phasebar { position: sticky; top: var(--mud-appbar-height); z-index: 5; padding: 6px 16px 8px; background: var(--mud-palette-surface); border-bottom: 1px solid var(--mud-palette-lines-default); }
.fleet-phase-steps { display: flex; gap: 4px; margin-bottom: 4px; }
.fleet-phase-step { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; font-size: 11px; letter-spacing: .04em; padding: 3px 4px; border-radius: 4px; border: 1px solid var(--mud-palette-lines-default); color: var(--mud-palette-text-secondary); background: transparent; }
.fleet-phase-step.done { color: var(--fleet-ok); border-color: var(--fleet-ok); }
.fleet-phase-step.active { color: #fff; background: var(--fleet-accent); border-color: var(--fleet-accent); box-shadow: 0 0 10px var(--fleet-accent); animation: fleet-pulse 2.2s ease-in-out infinite; }
.fleet-phase-text { font-size: 11px; color: var(--mud-palette-text-secondary); margin-top: 3px; display: block; }

@keyframes fleet-pulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }

.fleet-glow { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; border: 1px solid var(--mud-palette-lines-default); color: var(--mud-palette-text-secondary); background: transparent; transition: box-shadow .3s; }
.fleet-glow.working, .fleet-glow.thinking, .fleet-glow.running { color: #fff; border-color: var(--fleet-accent); background: var(--fleet-accent); box-shadow: 0 0 12px var(--fleet-accent); animation: fleet-pulse 2s ease-in-out infinite; }
.fleet-glow.tool { color: #fff; border-color: var(--fleet-busy); background: var(--fleet-busy); box-shadow: 0 0 12px var(--fleet-busy); animation: fleet-pulse 1.4s ease-in-out infinite; }
.fleet-glow.service { color: #fff; border-color: var(--fleet-queued); background: var(--fleet-queued); box-shadow: 0 0 14px var(--fleet-queued); animation: fleet-pulse 2s ease-in-out infinite; }
.fleet-glow.done { color: var(--fleet-ok); border-color: var(--fleet-ok); }
.fleet-glow.failed, .fleet-glow.error, .fleet-glow.down { color: var(--fleet-err); border-color: var(--fleet-err); }
.fleet-glow.waiting, .fleet-glow.queued { color: var(--fleet-queued); border-color: var(--fleet-queued); }

.fleet-pool { border: 1px solid var(--mud-palette-lines-default) !important; transition: box-shadow .4s; }
.fleet-pool.active { box-shadow: 0 0 18px color-mix(in srgb, var(--fleet-accent) 45%, transparent) !important; }
.fleet-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--fleet-muted); }
.fleet-dot.ok { background: var(--fleet-ok); box-shadow: 0 0 6px var(--fleet-ok); }
.fleet-dot.down { background: var(--fleet-err); }
.fleet-epic-card { border: 1px solid var(--mud-palette-lines-default); }

/* timeline */
.fleet-timeline { overflow-x: auto; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; background: var(--mud-palette-surface); }
.fleet-tl-header, .fleet-tl-lane { display: flex; min-width: 640px; }
.fleet-tl-label { flex: 0 0 150px; padding: 8px 10px; font-size: 12px; border-right: 1px solid var(--mud-palette-lines-default); }
.fleet-tl-track { flex: 1 1 auto; position: relative; min-height: 26px; }
.fleet-tl-header .fleet-tl-track { height: 22px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.fleet-tl-lane { border-top: 1px solid var(--mud-palette-lines-default); }
.fleet-tl-lane .fleet-tl-track { min-height: 56px; background-image: linear-gradient(90deg, var(--mud-palette-lines-default) 1px, transparent 1px); background-size: 12.5% 100%; }
.fleet-tl-tick { position: absolute; top: 3px; font-size: 10px; color: var(--mud-palette-text-secondary); transform: translateX(-50%); }
.fleet-tl-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--fleet-err); box-shadow: 0 0 8px var(--fleet-err); z-index: 2; }
.fleet-tl-card { position: absolute; top: 6px; height: 44px; min-width: 22px; overflow: hidden; border-radius: 6px; padding: 3px 6px; font-size: 11px; line-height: 1.25; cursor: pointer; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-background-gray, var(--mud-palette-surface)); color: var(--mud-palette-text-primary); box-sizing: border-box; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.fleet-tl-card .fleet-tl-title { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fleet-tl-card .fleet-tl-sub { display: block; color: var(--mud-palette-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fleet-tl-card.queued { border-style: dashed; border-color: var(--fleet-queued); }
.fleet-tl-card.est { opacity: .8; }
.fleet-tl-card.running { border-color: var(--fleet-accent); background: var(--fleet-accent); color: #fff; box-shadow: 0 0 14px var(--fleet-accent); animation: fleet-pulse 1.8s ease-in-out infinite; z-index: 3; }
.fleet-tl-card.done { border-color: var(--fleet-ok); }
.fleet-tl-card.review { border-color: var(--fleet-busy); box-shadow: 0 0 8px var(--fleet-busy); }
.fleet-tl-card.failed, .fleet-tl-card.denied { border-color: var(--fleet-err); }
.fleet-tl-card:hover { filter: brightness(1.2); }

.fleet-result { cursor: pointer; overflow: hidden; border: 1px solid var(--mud-palette-lines-default); }
.fleet-tl-card.running .fleet-tl-sub { color: rgba(255,255,255,.85); }
.fleet-result img, .fleet-result video { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #000; }
.fleet-result-ph { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; color: var(--fleet-muted); }
.fleet-result-cap { padding: 4px 6px; font-size: 11px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fleet-result.failed { border-color: var(--fleet-err); }
.fleet-result.review { border-color: var(--fleet-busy); }

.fleet-break { word-break: break-all; }
@media (max-width: 600px) {
    .fleet-phase-step { font-size: 9px; letter-spacing: 0; padding: 3px 2px; }
    .fleet-phasebar { padding: 4px 10px 6px; }
    .mud-appbar .fleet-project-select { min-width: 0 !important; max-width: 150px !important; flex: 1 1 auto; margin-left: 4px !important; }
    .mud-appbar .mud-button-group-root { margin-left: 4px !important; }
    .mud-appbar .mud-button-group-root .mud-icon-button { padding: 4px; }
    .mud-appbar .mud-toolbar { padding-left: 4px; padding-right: 4px; }
}

/* ── pinned toolbar (project + run controls), replaces the pinned phase bar ── */
.fleet-toolbar { position: sticky; top: var(--mud-appbar-height); z-index: 5; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 8px 16px; background: var(--mud-palette-surface); border-bottom: 1px solid var(--mud-palette-lines-default); }
.fleet-toolbar-project { display: flex; align-items: center; gap: 4px; flex: 1 1 320px; min-width: 0; max-width: 520px; }
.fleet-toolbar-project .fleet-project-select { flex: 1 1 auto; min-width: 0; }
.fleet-toolbar-run { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; }
/* Phone: ONE row -- project select shrinks, run controls become compact icons. Two rows of
   chrome above the Floor pushed MAIN below the fold. */
@media (max-width: 600px) {
    .fleet-toolbar { padding: 6px 8px; flex-wrap: nowrap; gap: 6px; }
    .fleet-toolbar-project { flex: 1 1 auto; max-width: none; }
    .fleet-toolbar-project > .mud-icon-button { display: none; }
    .fleet-toolbar-run { gap: 2px; flex-wrap: nowrap; }
    .fleet-toolbar-run .fleet-run-btn { padding: 6px; }
    .fleet-toolbar-run .mud-chip { display: none; }
    .fleet-toolbar .mud-input-control { margin-top: 0; }
}
.fleet-phasecard .fleet-phase-steps { margin-bottom: 6px; }
.fleet-clickable { cursor: pointer; }
.fleet-clickable:hover { filter: brightness(1.15); text-decoration: none; }

/* gauges */
.fleet-gauge { margin-top: 8px; }
.fleet-gauge-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--mud-palette-text-secondary); }
.fleet-gauge-val { font-weight: 600; color: var(--mud-palette-text-primary); }
.fleet-gauge-val.success { color: var(--mud-palette-success); }
.fleet-gauge-val.warning { color: var(--mud-palette-warning); }
.fleet-gauge-val.error { color: var(--mud-palette-error); }
.fleet-gauge-bar { position: relative; margin-top: 2px; }
.fleet-gauge-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--mud-palette-text-secondary); opacity: .7; }
.fleet-gauge-mark.good { background: var(--mud-palette-success); }
.fleet-gauge-mark.warn { background: var(--mud-palette-warning); }
.fleet-gauge-hint { font-size: 11px; color: var(--mud-palette-text-secondary); margin-top: 2px; }

.fleet-tl-card.human { border-color: var(--fleet-busy); border-style: dashed; box-shadow: 0 0 8px var(--fleet-busy); }
.inbox-upload { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.inbox-upload input[type=file] { font-size: 13px; }
.fleet-file-input { font-size: 13px; max-width: 100%; }

.kb-trash { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 8px 12px; border: 2px dashed var(--mud-palette-lines-default); border-radius: 8px; font-size: 12px; color: var(--mud-palette-text-secondary); transition: all .2s; }
.kb-trash.armed { border-color: var(--fleet-err); color: var(--fleet-err); }
.kb-trash.drag-over { background: color-mix(in srgb, var(--fleet-err) 20%, transparent); box-shadow: 0 0 14px var(--fleet-err); }

.fleet-dash-card { width: 100%; min-height: 220px; display: flex; flex-direction: column; }
.fleet-dash-card > .mud-card-content { flex: 1 1 auto; }

/* project asset browser */
.fleet-assets { display: flex; gap: 12px; align-items: flex-start; }
.fleet-asset-tree { flex: 0 0 220px; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; padding: 6px; font-size: 13px; background: var(--mud-palette-surface); }
.fleet-asset-grid { flex: 1 1 auto; min-width: 0; }
.fleet-tree-node { padding: 4px 8px; border-radius: 6px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
.fleet-tree-node:hover { background: color-mix(in srgb, var(--fleet-accent) 12%, transparent); }
.fleet-tree-node.active { background: color-mix(in srgb, var(--fleet-accent) 25%, transparent); font-weight: 600; }
.fleet-tree-node.depth-2 { padding-left: 20px; } .fleet-tree-node.depth-3 { padding-left: 32px; } .fleet-tree-node.depth-4 { padding-left: 44px; }
@media (max-width: 700px) { .fleet-assets { flex-direction: column; } .fleet-asset-tree { flex-basis: auto; width: 100%; } .fleet-bottomnav a { font-size: 10px; } }

/* dialogs: media left, form right */
.fleet-dialog-grid { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 20px; align-items: start; }
@media (max-width: 700px) { .fleet-dialog-grid { grid-template-columns: 1fr; } }
.fleet-dialog-media img, .fleet-dialog-media video { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 8px; background: #1a1d24; }
.fleet-dialog-media audio { display: block; width: 100%; margin-top: 8px; }
.fleet-dialog-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 8px; border: 1px dashed var(--mud-palette-lines-default); color: var(--mud-palette-text-secondary); }
.fleet-dialog-files { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 12px; }
.fleet-dialog-form { min-width: 0; }
.fleet-dialog .mud-dialog-title { padding-bottom: 8px; }
.fleet-pending { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.fleet-pending li { margin: 2px 0; }

/* run controls: plain icon buttons, the active state lights up instead of an outline */
.fleet-run { display: flex; align-items: center; gap: 2px; }
.fleet-run-btn { color: var(--mud-palette-text-secondary) !important; transition: color .2s, background-color .2s, box-shadow .2s; }
.fleet-run-btn:hover { color: var(--mud-palette-text-primary) !important; background: color-mix(in srgb, currentColor 12%, transparent) !important; }
.fleet-run-btn.on.ok { color: var(--fleet-ok) !important; background: color-mix(in srgb, var(--fleet-ok) 16%, transparent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fleet-ok) 40%, transparent); }
.fleet-run-btn.on.busy { color: var(--fleet-busy) !important; background: color-mix(in srgb, var(--fleet-busy) 16%, transparent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fleet-busy) 40%, transparent); }
.fleet-run-btn.on.err { color: var(--fleet-err) !important; background: color-mix(in srgb, var(--fleet-err) 16%, transparent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fleet-err) 40%, transparent); }

/* ── side nav: pill rows, an accent rail on the active one ───────────────── */
.mud-drawer .mud-navmenu { padding: 10px 8px; }
.mud-drawer .mud-nav-link {
    position: relative; margin: 2px 0; padding: 9px 12px 9px 14px; border-radius: 8px;
    font-size: 14px; letter-spacing: .01em; color: var(--mud-palette-text-secondary);
    transition: background-color .18s, color .18s, padding-left .18s;
}
.mud-drawer .mud-nav-link .mud-nav-link-icon { color: var(--mud-palette-text-secondary); transition: color .18s, transform .18s; margin-right: 12px; }
.mud-drawer .mud-nav-link:hover { background: color-mix(in srgb, var(--fleet-accent) 10%, transparent); color: var(--mud-palette-text-primary); padding-left: 17px; }
.mud-drawer .mud-nav-link:hover .mud-nav-link-icon { color: var(--fleet-accent); transform: scale(1.06); }
.mud-drawer .mud-nav-link.active {
    background: linear-gradient(90deg, color-mix(in srgb, var(--fleet-accent) 22%, transparent) 0%, transparent 92%);
    color: var(--mud-palette-text-primary); font-weight: 600;
}
.mud-drawer .mud-nav-link.active .mud-nav-link-icon { color: var(--fleet-accent); }
.mud-drawer .mud-nav-link.active::before {
    content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0;
    background: var(--fleet-accent); box-shadow: 0 0 10px var(--fleet-accent);
}
.mud-drawer .mud-divider { margin: 10px 6px; border-color: var(--mud-palette-lines-default); }

/* Churn alarm banner: sticky at the top of the content area on every page. Stays put
   while the alarm is live (it is driven by /health, so it clears itself) and must not be
   scrolled away from -- the failure it exists to catch is nobody noticing for hours. */
.fleet-churn {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: .5rem .5rem 0 .5rem;
    backdrop-filter: blur(6px);
}
.fleet-churn .mud-alert { box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }

/* An agent question can be a full document (an epic handoff runs to thousands of words with
   headings and lists). Preserve its structure and cap the height so the answer form stays
   reachable without scrolling past the whole thing. */
.inbox-question {
    white-space: pre-wrap;
    font-weight: 500;
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 6px;
}

/* Inbox badge was cut off by the top of the viewport.
   MudBlazor's overlap rule is `.mud-badge-overlap { bottom: calc(100% - 12px) }`: the
   badge's bottom sits 12px below the wrapper's TOP, so a ~20px badge hangs ~8px above it.
   That is fine mid-page, but the app bar is dense (48px) and pinned at y=0, so the
   overhang renders off-screen. Nothing clips it -- there is simply nothing above to draw
   into. Pull it down, and in a little so it does not crowd the Settings icon. */
.mud-appbar .mud-badge-overlap {
    bottom: calc(100% - 24px);
    right: calc(100% - 20px);
}

/* Bottom-nav inbox tab: only rendered when something is pending, so the count is the whole
   point of it. The badge rides the icon rather than overlapping the label, and is clamped
   inside the tab so it cannot repeat the app-bar clipping problem. */
.fleet-bottomnav .bn-ico { position: relative; overflow: visible; }
.fleet-bottomnav .bn-badge {
    position: absolute; top: -2px; right: -8px;
    min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
    border-radius: 8px; background: var(--mud-palette-error, #f2545b); color: #fff;
    font-size: 10px; line-height: 16px; font-weight: 700; text-align: center;
}

/* ── agent transcript dialog ───────────────────────────────────────────────── */
.fleet-agent-chip { cursor: pointer; }
/* The stream is the single scroll container so it can be followed like a log. Its children
   must NOT scroll themselves -- a nested scroller swallows the wheel and makes "am I at the
   bottom" meaningless for the parent. */
.agent-stream-wrap { position: relative; }
.agent-stream { max-height: 58vh; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }
.agent-live-head { margin-top: 14px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
/* Hovers just above the bottom edge of the stream, centred, so it is reachable without
   covering the newest line. */
.agent-tobottom { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 2; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.agent-tl { border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; }
.agent-tl-row { display: flex; gap: 8px; padding: 3px 8px; font-size: 12px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.agent-tl-row:last-child { border-bottom: 0; }
.agent-tl-at { color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.agent-tl-kind { flex: 0 0 96px; font-weight: 600; }
.agent-tl-kind.err { color: var(--mud-palette-error); }
.agent-tl-detail { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; color: var(--mud-palette-text-secondary); }
.agent-turn { border-left: 3px solid var(--mud-palette-lines-default); padding: 4px 0 4px 10px; margin-top: 10px; }
.agent-turn.user { border-left-color: var(--mud-palette-info); }
.agent-turn.assistant { border-left-color: var(--mud-palette-success); }
.agent-turn.tool { border-left-color: var(--mud-palette-warning); }
.agent-turn-role { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
/* pre-wrap: tool results and prompts are formatted text and their structure is the content */
.agent-turn-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; line-height: 1.45; margin: 4px 0 0; background: var(--mud-palette-background-gray, transparent); border-radius: 6px; padding: 6px 8px; }
.agent-turn-text.muted { color: var(--mud-palette-text-secondary); font-style: italic; }
.agent-toolcall { margin-top: 6px; font-size: 12.5px; }

/* A linked timestamp in the live tail jumps to the turn that produced it. Styled as a
   button element (keyboard reachable) but drawn as a link so the row stays compact. */
.agent-tl-at.linked {
    background: none; border: 0; padding: 0; font: inherit; font-variant-numeric: tabular-nums;
    color: var(--mud-palette-primary); cursor: pointer; text-decoration: underline dotted;
}
.agent-tl-at.linked:hover { text-decoration: underline; }
/* Flash the destination so the eye lands on the right block after the jump. */
@keyframes agent-flash {
    0%   { background: var(--mud-palette-primary-hover, rgba(90,160,255,.28)); }
    100% { background: transparent; }
}
.agent-turn.flash { animation: agent-flash 1.8s ease-out; border-radius: 6px; }

/* A parked agent: outline only. It must still read as present and clickable — you turn it
   back on from here — but never as part of the working fleet, so no fill and no glow. */
.fleet-glow.off {
    background: transparent !important;
    box-shadow: none !important;
    animation: none !important;
    border: 1px dashed var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    opacity: .75;
}
.fleet-agent-chip.off { border-style: dashed; opacity: .8; }

/* ── script editor ──
   The signature is rendered as static text above and below the editor rather than inside it,
   so it is unmodifiable by construction. These two rules are what make that read as one
   continuous code block instead of three separate widgets. */
.script-sig {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8rem;
    color: var(--fleet-muted);
    background: var(--fleet-panel-2);
    border: 1px solid var(--fleet-border);
    padding: 6px 10px;
    user-select: text;
}
.script-sig:first-of-type { border-radius: 8px 8px 0 0; border-bottom: none; }
.script-sig:last-of-type  { border-radius: 0 0 8px 8px; border-top: none; }
.script-sig-note { color: var(--fleet-muted); opacity: .75; }
.script-editor {
    height: 46vh;
    min-height: 280px;
    border-left: 1px solid var(--fleet-border);
    border-right: 1px solid var(--fleet-border);
}
/* Import button: a styled <label> wrapping a hidden InputFile, because MudFileUpload's
   activator slot name moves between versions and MUD0002 rejects a guess. */
.script-import {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .8125rem; font-weight: 500; text-transform: uppercase;
    color: var(--mud-palette-primary, #e06c3b);
    padding: 6px 8px; border-radius: 6px; cursor: pointer;
}
.script-import:hover { background: rgba(224,108,59,.08); }

/* ── shared chips ──────────────────────────────────────────────────────────
   One chip look for the whole site. Every chip renders through FleetChip, so
   restyling is one rule here rather than a hunt through the 17 files that
   happened to use a raw MudChip. */
.fleet-chip {
    border-radius: 6px;
    font-weight: 500;
    letter-spacing: .01em;
    transition: box-shadow .18s ease, transform .12s ease, filter .18s ease;
}
.fleet-chip__icon { margin-right: .3em; opacity: .9; }
.fleet-chip__label { white-space: nowrap; }
/* currentColor, not black: on an OUTLINED chip a dark overlay is invisible in dark
   mode and muddy in light. Tinting from the chip's own colour works in both. */
.fleet-chip__badge {
    margin-left: .45em; padding: 0 .35em;
    border-radius: 4px;
    background: color-mix(in srgb, currentColor 16%, transparent);
    font-size: .8em; font-variant-numeric: tabular-nums;
}
/* A whisper of fill so an outlined chip still reads as one object in a dense row,
   without putting text on a coloured ground. */
.fleet-chip.mud-chip-outlined { background: color-mix(in srgb, currentColor 7%, transparent); }
.fleet-chip.mud-chip-outlined:hover { background: color-mix(in srgb, currentColor 14%, transparent); }

.fleet-chip-wrap { display: inline-flex; }
.fleet-chip--clickable { cursor: pointer; }
.fleet-chip--clickable:hover { transform: translateY(-1px); filter: brightness(1.08); }
/* A click must feel like it landed even when the dialog takes a moment to open. */
.fleet-chip--clickable:active { transform: translateY(0); filter: brightness(.94); }

/* GLOW. Only states worth NOTICING glow -- if everything glows, nothing does.
   Steady for the two faults, because a page full of pulsing red is unreadable;
   the single pulse is reserved for "something is happening right now". */
.fleet-chip--glow-active {
    box-shadow: 0 0 0 1px rgba(var(--mud-palette-info-rgb), .5),
                0 0 10px 1px rgba(var(--mud-palette-info-rgb), .45);
    animation: fleet-chip-pulse 2.4s ease-in-out infinite;
}
.fleet-chip--glow-warn {
    box-shadow: 0 0 0 1px rgba(var(--mud-palette-warning-rgb), .55),
                0 0 9px 1px rgba(var(--mud-palette-warning-rgb), .4);
}
.fleet-chip--glow-error {
    box-shadow: 0 0 0 1px rgba(var(--mud-palette-error-rgb), .6),
                0 0 10px 1px rgba(var(--mud-palette-error-rgb), .45);
}
@keyframes fleet-chip-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(var(--mud-palette-info-rgb), .5),
                           0 0 8px 1px rgba(var(--mud-palette-info-rgb), .35); }
    50%      { box-shadow: 0 0 0 1px rgba(var(--mud-palette-info-rgb), .65),
                           0 0 15px 3px rgba(var(--mud-palette-info-rgb), .55); }
}
/* Respect the setting. A pulsing animation is exactly what this is for. */
@media (prefers-reduced-motion: reduce) {
    .fleet-chip--glow-active { animation: none; }
    .fleet-chip--clickable:hover { transform: none; }
}

/* The ordinal on an ordered pool. Order is priority, so the number is part of the
   data, not decoration -- it stays legible against a filled chip. */
.fleet-chip__ord {
    display: inline-block;
    min-width: 1.15em;
    margin-right: .4em;
    padding: 0 .25em;
    border-radius: 4px;
    background: color-mix(in srgb, currentColor 18%, transparent);
    font-variant-numeric: tabular-nums;
    font-size: .82em;
    text-align: center;
}

.fleet-tagpool { display: flex; flex-direction: column; gap: .25rem; margin-block: .35rem; }
.fleet-tagpool__label { display: flex; align-items: center; gap: .25rem; }
.fleet-tagpool__chips {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
    min-height: 2.1rem; padding: .25rem .35rem;
    border: 1px solid var(--mud-palette-lines-inputs); border-radius: 8px;
}
.fleet-tagpool--dense .fleet-tagpool__chips { min-height: 1.8rem; padding: .15rem .25rem; }
.fleet-tagpool__empty { opacity: .6; padding-inline: .25rem; }
.fleet-tagpool__add { flex: 1 1 8rem; min-width: 8rem; }
/* The autocomplete sits INSIDE the chip row, so it must not carry its own box. */
.fleet-tagpool__auto .mud-input > .mud-input-control-input-container::before,
.fleet-tagpool__auto .mud-input.mud-input-underline::before,
.fleet-tagpool__auto .mud-input.mud-input-underline::after { border-bottom: none; }
.fleet-tagpool__auto .mud-input { margin-top: 0; }

/* Drag to reorder. `--over` marks the slot the chip would land in, because a drag
   with no drop indicator is a guess. */
.fleet-chip-slot { display: inline-flex; border-radius: 6px; }
.fleet-chip-slot--draggable { cursor: grab; }
.fleet-chip-slot--draggable:active { cursor: grabbing; }
.fleet-chip-slot--over { outline: 2px dashed var(--mud-palette-primary); outline-offset: 2px; }

.fleet-tagdlg__list { max-height: 15rem; overflow-y: auto; padding: .25rem; }
.fleet-tagdlg__row { display: flex; align-items: center; gap: .15rem; padding: .1rem .25rem; }
.fleet-tagdlg__row:hover { background: var(--mud-palette-action-default-hover); border-radius: 6px; }
.fleet-tagdlg__rowtext { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fleet-tagdlg__new { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; }

/* ── ecosystem page ────────────────────────────────────────────────────── */
.fleet-eco__finding { display: flex; align-items: center; gap: .35rem; font-size: .85rem; line-height: 1.5; }
.fleet-eco__note { opacity: .7; display: block; margin-top: .35rem; }
.fleet-eco__modelrow { padding: .35rem .5rem; margin-top: .35rem; border-left: 2px solid var(--mud-palette-lines-default); }
.fleet-eco__custom { padding: .25rem .5rem .5rem 1rem; }
.fleet-eco__charter textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }

/* The per-section add. Sits in the chip row so "add one of these" is where the
   existing ones are, rather than only in the header menu. */
.fleet-eco__add { margin-left: .15rem; opacity: .75; }
.fleet-eco__add:hover { opacity: 1; }

/* ── metrics ───────────────────────────────────────────────────────────── */
.fleet-metrics td { padding: .18rem .5rem; font-size: .86rem; border: none; }
.fleet-metrics__label { color: var(--mud-palette-text-secondary); white-space: nowrap; }
.fleet-metrics__value { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.fleet-metrics__info { opacity: .45; margin-left: .25rem; vertical-align: text-bottom; }
.fleet-metrics__info:hover { opacity: .9; }
/* Unmeasured rows stay visible but recede: present, clearly not a zero. */
.fleet-metrics--na .fleet-metrics__label,
.fleet-metrics--na .fleet-metrics__value { opacity: .45; font-style: italic; }
.fleet-metrics__card { break-inside: avoid; }

/* ── software components ────────────────────────────────────────────────────
   A component card is a small identity block: logo, name, what it does here.
   Everything is expressed in --fleet-* tokens so a theme switch re-skins these
   with the rest of the console rather than leaving an island of grey. */
.fleet-comp {
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px 14px 10px;
    height: 100%;
    border-color: var(--fleet-border) !important;
    background: var(--fleet-panel);
    border-radius: 12px;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.fleet-comp:hover {
    border-color: color-mix(in srgb, var(--fleet-accent) 55%, var(--fleet-border)) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
/* Removed from the manifest but still on record: legible, clearly past tense. */
.fleet-comp--gone { opacity: .58; }
.fleet-comp--gone .fleet-comp__name { text-decoration: line-through; text-decoration-thickness: 1px; }

.fleet-comp__head { display: flex; align-items: center; gap: 11px; }
.fleet-comp__logo {
    flex: 0 0 40px; width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 9px;
    background: var(--fleet-panel-2, rgba(255,255,255,.04));
    border: 1px solid var(--fleet-border);
    overflow: hidden;
}
/* `contain`, not `cover`: a registry logo is artwork with its own margins, and
   cropping it to fill the tile cuts the wordmark off. */
.fleet-comp__logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.fleet-comp__id { min-width: 0; }
.fleet-comp__name {
    font-weight: 620; letter-spacing: -.01em; color: var(--fleet-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fleet-comp__sub { font-size: 12px; color: var(--fleet-muted); display: flex; gap: 7px; align-items: center; }
.fleet-comp__ver {
    font-family: var(--fleet-font, ui-monospace, monospace);
    font-size: 11px; padding: 1px 6px; border-radius: 999px;
    border: 1px solid var(--fleet-border); color: var(--fleet-muted);
}
.fleet-comp__pin { color: var(--fleet-busy); }

.fleet-comp__desc {
    flex: 1 1 auto;
    font-size: 13px; line-height: 1.45; color: var(--fleet-text);
    /* Cards sit in a grid, so they clamp to keep a row the same height; the full
       text is one click away in the describe dialog. */
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.fleet-comp__undesc { color: var(--fleet-muted); font-style: italic; }

.fleet-comp__foot {
    display: flex; align-items: center; gap: 4px;
    border-top: 1px solid var(--fleet-border); padding-top: 8px;
}
.fleet-comp__by {
    font-size: 11px; color: var(--fleet-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%;
}
.fleet-proj-tabs .mud-tabs-toolbar { border-bottom: 1px solid var(--fleet-border); }

/* The alert strip is a status line, not a wall. One alert plus a count by default; the
   detail lives in Health, which is on screen at the same time. */
.fleet-churn__bar {
    padding: 2px 8px 2px 12px;
    border: 1px solid var(--fleet-border);
    border-radius: 9px;
    background: color-mix(in srgb, var(--fleet-busy) 8%, var(--fleet-panel));
    margin-bottom: 6px;
}
.fleet-churn .mud-alert { padding-top: 4px; padding-bottom: 4px; }

/* ══ THE FLOOR (/) ══════════════════════════════════════════════════════════
   The canvas owns the picture; everything here is the frame around it and the text that
   must stay readable (Overseer, build, ticker). Desktop: stage + side rail in one screen,
   no page scroll. Phone: stage first at ~64% of the viewport, the rail stacks below. */
.floor-page { display: flex; flex-direction: column; gap: 10px; height: calc(100dvh - var(--mud-appbar-height, 48px) - 124px); min-height: 600px; }
.floor-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.floor-epic { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 520px; }
.floor-epic--none { color: var(--mud-palette-text-secondary); font-size: 13px; }
.floor-epic__id { font: 700 12px var(--fleet-font, ui-monospace, monospace); color: var(--fleet-accent, var(--mud-palette-primary)); white-space: nowrap; }
.floor-epic__pct { font-size: 12px; color: var(--mud-palette-text-secondary); white-space: nowrap; }
.floor-steps { display: flex; gap: 3px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.floor-steps::-webkit-scrollbar { display: none; }
.floor-step { font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 3px 8px; border-radius: 999px; white-space: nowrap;
    color: var(--mud-palette-text-secondary); border: 1px solid var(--mud-palette-lines-default); }
.floor-step.done { color: var(--mud-palette-success); border-color: color-mix(in srgb, var(--mud-palette-success) 45%, transparent); }
.floor-step.active { color: var(--mud-palette-background); background: var(--fleet-accent, var(--mud-palette-primary)); border-color: transparent;
    box-shadow: 0 0 14px color-mix(in srgb, var(--fleet-accent, var(--mud-palette-primary)) 70%, transparent); }
.floor-modes { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: color-mix(in srgb, var(--mud-palette-surface) 80%, transparent); border: 1px solid var(--mud-palette-lines-default); }
.floor-mode { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--mud-palette-text-secondary); }
.floor-mode:focus-visible { outline: 2px solid var(--fleet-accent, var(--mud-palette-primary)); outline-offset: 2px; }
.floor-mode.on { color: var(--mud-palette-background); background: var(--mud-palette-success); }
.floor-mode.on.replay { background: var(--mud-palette-drawer-icon, var(--mud-palette-secondary)); }
.floor-live-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; }
.floor-mode.on .floor-live-dot { animation: floor-pulse 1.8s infinite; }
@keyframes floor-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.floor-replaybar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 10px; border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-drawer-icon, var(--mud-palette-secondary)) 55%, transparent);
    background: color-mix(in srgb, var(--mud-palette-drawer-icon, var(--mud-palette-secondary)) 8%, var(--mud-palette-surface)); }
.floor-replaybar__window { max-width: 160px; }
.floor-replaybar__speeds { display: inline-flex; gap: 2px; }
.floor-speed { all: unset; cursor: pointer; font: 700 11px var(--fleet-font, ui-monospace, monospace); padding: 4px 8px; border-radius: 6px; color: var(--mud-palette-text-secondary); }
.floor-speed.on { color: var(--mud-palette-background); background: var(--mud-palette-drawer-icon, var(--mud-palette-secondary)); }
.floor-replaybar__seek { flex: 1 1 220px; min-width: 160px; }
.floor-replaybar__clock { font: 700 12px var(--fleet-font, ui-monospace, monospace); color: var(--mud-palette-text-primary); white-space: nowrap; }
.floor-replaybar__count { font-size: 11px; color: var(--mud-palette-text-secondary); white-space: nowrap; }

.floor-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; }
.floor-stage { position: relative; min-height: 460px; border-radius: 18px; overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 80%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fleet-accent, var(--mud-palette-primary)) 8%, transparent), 0 18px 60px -30px color-mix(in srgb, var(--fleet-accent, #000) 50%, transparent);
    background: var(--mud-palette-background); }
.floor-canvas { position: absolute; inset: 0; display: block; touch-action: manipulation; }
.floor-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--mud-palette-text-secondary); font-size: 13px; }
.floor-tip { position: absolute; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .12s ease; max-width: 260px; padding: 8px 10px; border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-surface) 94%, transparent); border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 10px 30px -12px rgba(0,0,0,.6); font-size: 12px; line-height: 1.35; backdrop-filter: blur(6px); }
.floor-tip .t { font-weight: 800; color: var(--mud-palette-text-primary); }
.floor-tip .s { color: var(--mud-palette-text-secondary); }
.floor-tip .b { color: var(--mud-palette-text-primary); }
.floor-tip .w { color: var(--mud-palette-warning); }
.floor-tip .h { color: var(--mud-palette-text-secondary); font-size: 10.5px; margin-top: 4px; opacity: .8; }

.floor-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.floor-card { border-radius: 14px; padding: 12px 14px; background: color-mix(in srgb, var(--mud-palette-surface) 88%, transparent); border: 1px solid var(--mud-palette-lines-default); }
.floor-card > header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.floor-card__title { font-weight: 800; font-size: 13px; letter-spacing: .02em; }
.floor-card__sub { font-size: 12px; color: var(--mud-palette-text-secondary); }
.floor-more { display: inline-block; margin-top: 4px; }

.floor-eye { width: 26px; height: 14px; flex: 0 0 auto; border-radius: 50%; position: relative; border: 2px solid var(--eye, var(--mud-palette-success));
    box-shadow: 0 0 12px color-mix(in srgb, var(--eye, var(--mud-palette-success)) 70%, transparent); }
.floor-eye::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--eye, var(--mud-palette-success)); }
.floor-overseer.lvl-ok, .floor-overseer.lvl-info { --eye: var(--mud-palette-success); }
.floor-overseer.lvl-warning { --eye: var(--mud-palette-warning); }
.floor-overseer.lvl-error, .floor-overseer.lvl-critical, .floor-overseer.lvl-down { --eye: var(--mud-palette-error); }
.floor-overseer.lvl-unknown { --eye: var(--mud-palette-text-secondary); }
.floor-overseer.lvl-error, .floor-overseer.lvl-critical, .floor-overseer.lvl-down { border-color: color-mix(in srgb, var(--mud-palette-error) 50%, var(--mud-palette-lines-default)); }
.floor-checks { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 2px 0 8px; }
.floor-check { font-size: 11px; color: var(--mud-palette-text-secondary); display: inline-flex; align-items: center; gap: 5px; }
.floor-check i { width: 7px; height: 7px; border-radius: 50%; background: var(--mud-palette-success); display: inline-block; }
.floor-check.warn i { background: var(--mud-palette-warning); }
.floor-check.down i { background: var(--mud-palette-error); box-shadow: 0 0 6px var(--mud-palette-error); }
.floor-check.unknown i { background: var(--mud-palette-text-secondary); }
.floor-inc { border-radius: 10px; padding: 8px 10px; margin-top: 6px; border-left: 3px solid var(--sev, var(--mud-palette-info));
    background: color-mix(in srgb, var(--sev, var(--mud-palette-info)) 7%, transparent); }
.floor-inc.sev-critical, .floor-inc.sev-error { --sev: var(--mud-palette-error); }
.floor-inc.sev-warning { --sev: var(--mud-palette-warning); }
.floor-inc__title { font-weight: 700; font-size: 12.5px; }
.floor-inc__text { font-size: 12px; color: var(--mud-palette-text-secondary); margin-top: 2px; }
.floor-inc__actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.floor-build { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.floor-build__err { font-size: 11.5px; color: var(--mud-palette-error); margin-top: 4px; word-break: break-word; }

.floor-ticker { flex: 1 1 auto; min-height: 160px; display: flex; flex-direction: column; }
.floor-ticker ol { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.floor-ticker li { display: grid; grid-template-columns: 58px 1fr; gap: 6px; padding: 4px 0; font-size: 12px; border-bottom: 1px dashed color-mix(in srgb, var(--mud-palette-lines-default) 60%, transparent); }
.floor-ticker li time { font: 500 11px var(--fleet-font, ui-monospace, monospace); color: var(--mud-palette-text-secondary); }
.floor-ticker li span { color: var(--mud-palette-text-primary); overflow-wrap: anywhere; }
.floor-ticker li.tk-failed span, .floor-ticker li.tk-starved span { color: var(--mud-palette-error); }
.floor-ticker li.tk-escalated span { color: color-mix(in srgb, var(--mud-palette-error) 50%, #b060ff); }
.floor-ticker li.tk-merged span { color: var(--mud-palette-primary); }
.floor-ticker li.tk-done span { color: var(--mud-palette-success); }
.floor-ticker li.tk-stalled span, .floor-ticker li.tk-kickback span { color: var(--mud-palette-warning); }
.floor-ticker li.tk-overseer span { color: var(--mud-palette-info); }
.floor-legend p { font-size: 13.5px; margin: 0 0 10px; }

@media (max-width: 1100px) { .floor-body { grid-template-columns: minmax(0, 1fr) 280px; } }
@media (max-width: 859.98px) {
    .floor-page { height: auto; min-height: 0; }
    .floor-body { display: flex; flex-direction: column; }
    .floor-stage { height: calc(100dvh - 250px); min-height: 520px; }
    .floor-side { overflow: visible; }
    .floor-ticker { max-height: 360px; }
    .floor-epic { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .floor-mode.on .floor-live-dot { animation: none; } }

/* ══ OVERSEER (/overseer) ═══════════════════════════════════════════════════ */
.ovs { display: flex; flex-direction: column; gap: 14px; max-width: 1180px; margin: 0 auto; }
.ovs-hero { --lvl: var(--mud-palette-success); display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 18px; position: relative; overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--lvl) 45%, var(--mud-palette-lines-default));
    background: radial-gradient(600px 160px at 0% 0%, color-mix(in srgb, var(--lvl) 16%, transparent), transparent 70%), color-mix(in srgb, var(--mud-palette-surface) 90%, transparent); }
.ovs-hero.lvl-warning { --lvl: var(--mud-palette-warning); }
.ovs-hero.lvl-error, .ovs-hero.lvl-critical, .ovs-hero.lvl-down { --lvl: var(--mud-palette-error); }
.ovs-hero.lvl-unknown { --lvl: var(--mud-palette-text-secondary); }
.ovs-hero__eye { width: 64px; height: 34px; flex: 0 0 auto; border-radius: 50%; border: 3px solid var(--lvl); position: relative; box-shadow: 0 0 26px color-mix(in srgb, var(--lvl) 60%, transparent); }
.ovs-hero__eye i { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--lvl); animation: ovs-look 6s ease-in-out infinite; }
@keyframes ovs-look { 0%, 100% { transform: translateX(-9px); } 50% { transform: translateX(9px); } }
.ovs-hero__kicker { font-size: 11px; font-weight: 800; letter-spacing: .18em; color: var(--lvl); }
.ovs-hero__headline { font-size: 24px; line-height: 1.2; font-weight: 800; margin: 2px 0 4px; }
.ovs-hero__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--mud-palette-text-secondary); }
.ovs-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.ovs-check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--mud-palette-surface) 85%, transparent); border: 1px solid var(--mud-palette-lines-default); }
.ovs-check i { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex: 0 0 auto; background: var(--mud-palette-success); box-shadow: 0 0 8px color-mix(in srgb, var(--mud-palette-success) 60%, transparent); }
.ovs-check.warn i { background: var(--mud-palette-warning); box-shadow: 0 0 8px var(--mud-palette-warning); }
.ovs-check.down i { background: var(--mud-palette-error); box-shadow: 0 0 10px var(--mud-palette-error); }
.ovs-check.unknown i { background: var(--mud-palette-text-secondary); box-shadow: none; }
.ovs-check__label { font-weight: 700; font-size: 12.5px; }
.ovs-check__detail { font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.ovs-ask { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ovs-ask__input { flex: 1 1 360px; }
.ovs-answer { flex-basis: 100%; white-space: pre-wrap; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5;
    border: 1px solid color-mix(in srgb, var(--mud-palette-info) 40%, var(--mud-palette-lines-default)); background: color-mix(in srgb, var(--mud-palette-info) 6%, var(--mud-palette-surface)); }
.ovs-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 12px; color: var(--mud-palette-text-secondary); text-align: center; }
.ovs-hint { font-size: 12px; color: var(--mud-palette-text-secondary); margin: 0 0 6px; }
.ovs-tag { display: inline-block; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--mud-palette-info); border: 1px solid color-mix(in srgb, var(--mud-palette-info) 45%, transparent); }

.ovs-inc { --sev: var(--mud-palette-info); border-radius: 14px; margin-bottom: 10px; border: 1px solid var(--mud-palette-lines-default); border-left: 4px solid var(--sev);
    background: color-mix(in srgb, var(--mud-palette-surface) 90%, transparent); }
.ovs-inc.sev-critical, .ovs-inc.sev-error { --sev: var(--mud-palette-error); }
.ovs-inc.sev-warning { --sev: var(--mud-palette-warning); }
.ovs-inc.resolved { --sev: var(--mud-palette-success); opacity: .88; }
.ovs-inc__head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; user-select: none; }
.ovs-inc__head:focus-visible { outline: 2px solid var(--sev); outline-offset: -2px; border-radius: 12px; }
.ovs-sev { flex: 0 0 auto; font-size: 10px; font-weight: 800; letter-spacing: .1em; padding: 3px 8px; border-radius: 6px; color: var(--mud-palette-background); background: var(--sev); }
.ovs-inc__title { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 14px; }
.ovs-inc__meta { display: flex; flex-wrap: wrap; gap: 4px 6px; font-weight: 400; font-size: 11.5px; color: var(--mud-palette-text-secondary); margin-top: 2px; }
.ovs-inc__body { padding: 0 16px 14px; }
.ovs-inc__detail { font-size: 13.5px; line-height: 1.5; margin: 0 0 10px; }
.ovs-inc h4 { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mud-palette-text-secondary); margin: 12px 0 4px; }
.ovs-analysis { border-radius: 12px; padding: 10px 12px; margin: 8px 0; border: 1px solid color-mix(in srgb, var(--mud-palette-info) 35%, var(--mud-palette-lines-default)); background: color-mix(in srgb, var(--mud-palette-info) 5%, transparent); }
.ovs-analysis__head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-bottom: 4px; }
.ovs-analysis p { font-size: 13px; line-height: 1.5; margin: 4px 0; }
.ovs-steps { margin: 6px 0 4px; padding-left: 20px; font-size: 13px; line-height: 1.5; }
.ovs-fix { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; margin: 10px 0; padding: 10px 12px; border-radius: 12px;
    border: 1px dashed color-mix(in srgb, var(--fleet-accent, var(--mud-palette-primary)) 60%, transparent); background: color-mix(in srgb, var(--fleet-accent, var(--mud-palette-primary)) 6%, transparent); }
.ovs-fix__label { font-weight: 800; font-size: 13.5px; }
.ovs-log { list-style: none; padding: 0; margin: 0; font-size: 12.5px; }
.ovs-log li { padding: 3px 0; }
.ovs-log li time { font: 500 11px var(--fleet-font, ui-monospace, monospace); color: var(--mud-palette-text-secondary); margin-right: 4px; }
.ovs-log li.ok b { color: var(--mud-palette-success); }
.ovs-log li.bad b { color: var(--mud-palette-error); }
.ovs-log li.muted { color: var(--mud-palette-text-secondary); }
.ovs-evidence { margin-top: 10px; }
.ovs-evidence summary { cursor: pointer; font-size: 12px; color: var(--mud-palette-text-secondary); }
.ovs-evidence pre { font-size: 11.5px; max-height: 260px; overflow: auto; padding: 10px; border-radius: 10px; background: var(--mud-palette-background); white-space: pre-wrap; word-break: break-all; }
.ovs-inc__actions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 10px; border-top: 1px solid var(--mud-palette-lines-default); padding-top: 8px; }

.ovs-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
.ovs-panel { border-radius: 14px; padding: 14px 16px; background: color-mix(in srgb, var(--mud-palette-surface) 90%, transparent); border: 1px solid var(--mud-palette-lines-default); }
.ovs-panel h3 { font-size: 14px; font-weight: 800; margin: 0 0 6px; }
.ovs-repairs { display: flex; flex-direction: column; gap: 8px; }
.ovs-repair { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "text seg" "text budget"; gap: 2px 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--mud-palette-lines-default); }
.ovs-repair__text { grid-area: text; min-width: 0; }
.ovs-repair__label { font-weight: 700; font-size: 13px; }
.ovs-repair__desc { font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.ovs-repair__budget { grid-area: budget; font-size: 10.5px; color: var(--mud-palette-text-secondary); text-align: right; }
.ovs-seg { grid-area: seg; display: inline-flex; border-radius: 8px; border: 1px solid var(--mud-palette-lines-default); overflow: hidden; }
.ovs-seg__b { all: unset; cursor: pointer; padding: 4px 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--mud-palette-text-secondary); }
.ovs-seg__b:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
.ovs-seg__b.on.auto { color: var(--mud-palette-background); background: var(--mud-palette-success); }
.ovs-seg__b.on.ask { color: var(--mud-palette-background); background: var(--fleet-accent, var(--mud-palette-primary)); }
.ovs-seg__b.on.off { color: var(--mud-palette-background); background: var(--mud-palette-text-secondary); }
.ovs-thresholds { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.ovs-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ovs-btn { all: unset; cursor: pointer; padding: 9px 16px; border-radius: 10px; font-weight: 800; font-size: 13px; letter-spacing: .02em; }
.ovs-btn.primary { color: var(--mud-palette-background); background: var(--fleet-accent, var(--mud-palette-primary)); box-shadow: 0 6px 20px -8px var(--fleet-accent, var(--mud-palette-primary)); }
.ovs-btn:focus-visible { outline: 2px solid var(--mud-palette-text-primary); outline-offset: 2px; }
.ovs-btn.hidden { display: none; }
.ovs-device { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--mud-palette-lines-default); }
.ovs-device__text { flex: 1 1 auto; min-width: 0; font-size: 13px; }
@media (max-width: 600px) {
    .ovs-hero { padding: 14px; gap: 12px; }
    .ovs-hero__eye { width: 48px; height: 26px; }
    .ovs-hero__headline { font-size: 19px; }
    .ovs-rules { grid-template-columns: 1fr; }
    .ovs-repair { grid-template-columns: 1fr; grid-template-areas: "text" "seg" "budget"; }
    .ovs-repair__budget { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .ovs-hero__eye i { animation: none; } }

/* nav: a count beside a drawer entry, and the phone bar's More */
.fleet-navbadge { display: inline-flex; align-items: center; gap: 8px; }
.fleet-navbadge b { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; line-height: 18px; text-align: center;
    color: var(--mud-palette-background); background: var(--mud-palette-warning); }
.fleet-navbadge b.down { background: var(--mud-palette-error); }

/* ══ ECOSYSTEM (/ecosystem) ═════════════════════════════════════════════════
   Role and access colours are tokens so the cards, pills, map and pipeline agree. Warm by
   design: gold architects, ember engineers, jade integration. */
.eco { --eco-architect: var(--mud-palette-primary); --eco-swe: color-mix(in srgb, var(--mud-palette-error) 45%, var(--fleet-busy, #ff9f1c));
    --eco-aggregator: var(--mud-palette-secondary); --eco-qa: var(--mud-palette-warning); --eco-director: var(--mud-palette-drawer-icon, var(--mud-palette-error));
    --eco-local: var(--mud-palette-success); --eco-lan: color-mix(in srgb, var(--mud-palette-success) 55%, var(--mud-palette-primary)); --eco-free: var(--mud-palette-secondary);
    --eco-paid: var(--fleet-busy, var(--mud-palette-warning)); --eco-hosted: var(--mud-palette-text-secondary);
    display: flex; flex-direction: column; gap: 12px; max-width: 1400px; margin: 0 auto; }
.role-architect { --role: var(--eco-architect); } .role-swe { --role: var(--eco-swe); } .role-aggregator { --role: var(--eco-aggregator); }
.role-qa { --role: var(--eco-qa); } .role-director { --role: var(--eco-director); } .role-none { --role: var(--mud-palette-text-secondary); }
.access-local { --acc: var(--eco-local); } .access-lan { --acc: var(--eco-lan); } .access-free { --acc: var(--eco-free); } .access-paid { --acc: var(--eco-paid); } .access-hosted { --acc: var(--eco-hosted); }

.eco-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; position: sticky; top: calc(var(--mud-appbar-height) + 0px); z-index: 4; padding: 10px 12px; border-radius: 14px;
    background: color-mix(in srgb, var(--mud-palette-surface) 94%, transparent); border: 1px solid var(--mud-palette-lines-default); backdrop-filter: blur(8px); }
.eco-head__profile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.eco-profile-select { min-width: 220px; }
.eco-head__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eco-live { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--mud-palette-success); }
.eco-live i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.eco-notlive { font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.eco-changes { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px;
    color: var(--mud-palette-warning); border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 55%, transparent); background: color-mix(in srgb, var(--mud-palette-warning) 8%, transparent); }
.eco-changes:focus-visible { outline: 2px solid var(--mud-palette-warning); outline-offset: 2px; }
.eco-changelist { padding: 10px 14px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--mud-palette-warning) 55%, transparent); background: color-mix(in srgb, var(--mud-palette-warning) 5%, transparent); }
.eco-change { font-size: 13px; padding: 3px 0; }
.eco-change__verb { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mud-palette-warning); margin-right: 4px; }
.eco-problems { padding: 10px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--mud-palette-info) 45%, var(--mud-palette-lines-default)); background: color-mix(in srgb, var(--mud-palette-info) 5%, transparent); }
.eco-problems.blocking { border-color: color-mix(in srgb, var(--mud-palette-error) 55%, var(--mud-palette-lines-default)); background: color-mix(in srgb, var(--mud-palette-error) 6%, transparent); }
.eco-problems__head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-bottom: 4px; }
.eco-problem { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; padding: 2px 0; }
.eco-dim { color: var(--mud-palette-text-secondary); font-size: 12px; }
.eco-warnline { font-size: 12px; color: var(--mud-palette-warning); }

.eco-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--mud-palette-lines-default); padding-bottom: 2px; }
.eco-tab { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 10px 10px 0 0; font-weight: 700; font-size: 13.5px;
    color: var(--mud-palette-text-secondary); border-bottom: 2px solid transparent; }
.eco-tab em { font-style: normal; font-size: 11px; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--mud-palette-text-secondary) 18%, transparent); }
.eco-tab.on { color: var(--mud-palette-text-primary); border-bottom-color: var(--fleet-accent, var(--mud-palette-primary)); }
.eco-tab:focus-visible { outline: 2px solid var(--fleet-accent, var(--mud-palette-primary)); outline-offset: -2px; }

/* team */
.eco-team { display: flex; flex-direction: column; gap: 18px; }
.eco-group__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.eco-group__head h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--role); letter-spacing: .02em; }
.eco-role-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--role); box-shadow: 0 0 10px color-mix(in srgb, var(--role) 70%, transparent); transform: rotate(45deg); }
.eco-group__count { font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; color: var(--mud-palette-background); background: var(--role); }
.eco-group__how { font-size: 12px; color: var(--mud-palette-text-secondary); }
.eco-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.eco-agent { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; overflow: hidden;
    background: linear-gradient(180deg, color-mix(in srgb, var(--role) 7%, var(--mud-palette-surface)), var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--role) 30%, var(--mud-palette-lines-default)); }
.eco-agent::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--role); }
.eco-agent.busy { box-shadow: 0 0 0 1px color-mix(in srgb, var(--role) 60%, transparent), 0 8px 30px -14px var(--role); }
.eco-agent.off { opacity: .62; border-style: dashed; }
.eco-agent__top { display: flex; align-items: center; gap: 6px; }
.eco-agent__name { all: unset; cursor: pointer; font-weight: 800; font-size: 14.5px; display: inline-flex; align-items: center; gap: 8px; }
.eco-agent__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.eco-agent__name:focus-visible { outline: 2px solid var(--role); outline-offset: 2px; border-radius: 4px; }
.eco-glyph { color: var(--role); font-size: 15px; }
.eco-state { font-size: 12px; }
.eco-state.s-busy { color: var(--role); font-weight: 700; } .eco-state.s-ok { color: var(--mud-palette-success); } .eco-state.s-bad { color: var(--mud-palette-error); }
.eco-state.s-warn { color: var(--mud-palette-warning); } .eco-state.s-off, .eco-state.s-unknown { color: var(--mud-palette-text-secondary); }
.eco-chain { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.eco-arrow { color: var(--mud-palette-text-secondary); font-weight: 800; }
.eco-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; max-width: 100%;
    border: 1px solid color-mix(in srgb, var(--acc, var(--mud-palette-text-secondary)) 45%, transparent); background: color-mix(in srgb, var(--acc, var(--mud-palette-text-secondary)) 9%, transparent); }
.eco-pill b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eco-pill i { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--acc, var(--mud-palette-text-secondary)); }
.eco-pill.primary { border-width: 1.5px; background: color-mix(in srgb, var(--acc, var(--mud-palette-text-secondary)) 16%, transparent); }
.eco-pill.missing { --acc: var(--mud-palette-error); color: var(--mud-palette-error); }
.eco-agent__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.eco-agent__actions { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.eco-card-add { all: unset; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 120px; border-radius: 14px; font-weight: 700; font-size: 13px;
    color: var(--mud-palette-text-secondary); border: 1.5px dashed var(--mud-palette-lines-default); }
.eco-card-add:hover, .eco-card-add:focus-visible { color: var(--role, var(--mud-palette-primary)); border-color: var(--role, var(--mud-palette-primary)); }

/* blocks: compute + workflow */
.eco-block { padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--mud-palette-surface) 88%, transparent); border: 1px solid var(--mud-palette-lines-default); }
.eco-block__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.eco-block__head h3 { margin: 0; font-size: 15px; font-weight: 800; }
.eco-block__hint { font-size: 12px; color: var(--mud-palette-text-secondary); }
.eco-compute, .eco-workflow { display: flex; flex-direction: column; gap: 12px; }
.eco-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 12px; }
.eco-link { all: unset; cursor: pointer; font-weight: 800; font-size: 13.5px; }
.eco-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.eco-link:focus-visible { outline: 2px solid var(--fleet-accent, var(--mud-palette-primary)); outline-offset: 2px; border-radius: 4px; }
.eco-res { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); }
.eco-res.unused { border-style: dashed; opacity: .75; }
.eco-res__top { display: flex; align-items: center; gap: 8px; }
.eco-cap { font: 800 13px var(--fleet-font, ui-monospace, monospace); }
.eco-meter { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--mud-palette-text-secondary) 18%, transparent); overflow: hidden; }
.eco-meter i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--mud-palette-success), var(--fleet-busy, var(--mud-palette-warning))); transition: width .6s ease; }
.eco-res__what { font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.eco-res__uses { display: flex; flex-wrap: wrap; gap: 5px; }
.eco-res__agents { font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.eco-tag { all: unset; cursor: default; font-size: 11.5px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--mud-palette-lines-default); background: color-mix(in srgb, var(--mud-palette-text-secondary) 8%, transparent); }
button.eco-tag { cursor: pointer; } button.eco-tag:hover { border-color: var(--fleet-accent, var(--mud-palette-primary)); }
.eco-tag.service { border-color: color-mix(in srgb, var(--mud-palette-warning) 40%, transparent); }
.eco-note { font-size: 12px; color: var(--mud-palette-text-secondary); } .eco-note summary { cursor: pointer; }
.eco-provider { margin-top: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); }
.eco-provider__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.eco-provider__empty { padding: 4px 0 2px; }
.eco-key { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.eco-key.ok { color: var(--mud-palette-success); border: 1px solid color-mix(in srgb, var(--mud-palette-success) 45%, transparent); }
.eco-key.bad { color: var(--mud-palette-error); border: 1px solid color-mix(in srgb, var(--mud-palette-error) 55%, transparent); }
.eco-pools { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.eco-pool, .eco-service { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--mud-palette-lines-default); background: color-mix(in srgb, var(--mud-palette-background) 40%, transparent); display: flex; flex-direction: column; gap: 5px; }
.eco-pool__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eco-pool__foot { display: flex; align-items: center; gap: 6px; }
.eco-model { all: unset; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 6px 8px; border-radius: 8px; font-size: 12.5px; }
.eco-model:hover, .eco-model:focus-visible { background: color-mix(in srgb, var(--fleet-accent, var(--mud-palette-primary)) 8%, transparent); }
.eco-model code { font-size: 11px; color: var(--mud-palette-text-secondary); grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eco-model .eco-dim { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 11px; }
.eco-row { all: unset; cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 10px; font-size: 13px; }
.eco-row:hover, .eco-row:focus-visible { background: color-mix(in srgb, var(--fleet-accent, var(--mud-palette-primary)) 7%, transparent); }
.eco-rolechip { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 6px; color: var(--role); border: 1px solid color-mix(in srgb, var(--role) 50%, transparent); background: color-mix(in srgb, var(--role) 10%, transparent); }
.eco-gate { font-size: 11px; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--mud-palette-lines-default); }

/* workflow pipeline */
.eco-pipeline { list-style: none; margin: 0; padding: 4px 2px 8px; display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x proximity; }
.eco-phase { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; scroll-snap-align: start; }
.eco-phase:not(:last-child)::after { content: "→"; position: absolute; right: -18px; top: 64px; color: var(--fleet-accent, var(--mud-palette-primary)); font-weight: 800; }
.eco-phase__card { all: unset; cursor: pointer; width: 200px; min-height: 176px; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px;
    background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); }
.eco-phase__card:hover, .eco-phase__card:focus-visible { border-color: var(--fleet-accent, var(--mud-palette-primary)); box-shadow: 0 8px 26px -16px var(--fleet-accent, var(--mud-palette-primary)); }
.eco-phase__n { font: 800 11px var(--fleet-font, ui-monospace, monospace); color: var(--fleet-accent, var(--mud-palette-primary)); }
.eco-phase__name { font-weight: 800; font-size: 15px; letter-spacing: .03em; }
.eco-phase__mode { font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.eco-phase__roles, .eco-phase__gates { display: flex; flex-wrap: wrap; gap: 4px; }
.eco-phase__foot { margin-top: auto; font-size: 11px; color: var(--mud-palette-text-secondary); }
.eco-phase__move { display: flex; }

/* map */
.eco-map-wrap { padding: 10px; border-radius: 16px; background: color-mix(in srgb, var(--mud-palette-surface) 88%, transparent); border: 1px solid var(--mud-palette-lines-default); }
.eco-map-hint { font-size: 12px; color: var(--mud-palette-text-secondary); margin: 2px 4px 6px; }
.eco-map-scroll { overflow-x: auto; }
.eco-map { width: 100%; min-width: 760px; height: auto; display: block; }
.eco-map__col { fill: var(--mud-palette-text-secondary); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.eco-map__edge { fill: none; stroke: var(--mud-palette-text-secondary); stroke-opacity: .35; stroke-width: 1.2; transition: stroke-opacity .2s, opacity .2s; }
.eco-map__edge.primary { stroke: var(--role); stroke-opacity: .7; stroke-width: 2; }
.eco-map__edge.fallback { stroke-dasharray: 4 4; }
.eco-map__edge.access-local, .eco-map__edge.access-lan, .eco-map__edge.access-free, .eco-map__edge.access-paid, .eco-map__edge.access-hosted { stroke: var(--acc); stroke-opacity: .5; }
.eco-map__edge.serve { stroke-dasharray: 2 5; }
.eco-map__edge.dim { opacity: .08; }
.eco-map__edge.lit { stroke-opacity: .9; }
.eco-map__node { cursor: pointer; transition: opacity .2s; }
.eco-map__node rect { fill: var(--mud-palette-surface); stroke: var(--role, var(--acc, var(--mud-palette-lines-default))); stroke-width: 1.3; }
.eco-map__node.res rect { stroke: var(--fleet-busy, var(--mud-palette-warning)); }
.eco-map__node.provider rect { stroke: var(--mud-palette-text-secondary); stroke-dasharray: 3 3; }
.eco-map__node.service rect { stroke: var(--mud-palette-warning); }
.eco-map__node.focus rect { stroke-width: 2.6; filter: drop-shadow(0 0 6px var(--role, var(--acc, var(--mud-palette-primary)))); }
.eco-map__node.off { opacity: .55; }
.eco-map__node.dim { opacity: .18; }
.eco-map__label { fill: var(--mud-palette-text-primary); font-size: 12px; font-weight: 700; }
.eco-map__tag { fill: var(--mud-palette-text-secondary); font-size: 10px; font-weight: 700; text-transform: uppercase; }

/* side sheet */
.eco-sheet { width: min(520px, 100vw) !important; }
.eco-sheet .mud-drawer-content { display: flex; flex-direction: column; height: 100%; }
.eco-sheet__head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.eco-sheet__kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; color: var(--fleet-accent, var(--mud-palette-primary)); }
.eco-sheet__title { font-size: 18px; font-weight: 800; text-transform: capitalize; }
.eco-sheet__body { flex: 1 1 auto; overflow-y: auto; padding: 14px 16px; }
.eco-sheet__foot { display: flex; align-items: center; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--mud-palette-lines-default); }
.eco-sheet__field { display: flex; flex-direction: column; gap: 6px; }
.eco-sheet__label { font-size: 12px; font-weight: 700; color: var(--mud-palette-text-secondary); }

/* model picker */
.eco-picker__chain { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 12px; background: color-mix(in srgb, var(--fleet-accent, var(--mud-palette-primary)) 6%, transparent); }
.eco-picker__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 5px 6px; border-radius: 8px; }
.eco-picker__row:hover { background: color-mix(in srgb, var(--mud-palette-text-secondary) 8%, transparent); }
.eco-picker__n { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; width: 72px; color: var(--mud-palette-text-secondary); }
.eco-picker__list { max-height: 340px; overflow-y: auto; margin-top: 8px; }
.eco-picker__group { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mud-palette-text-secondary); margin: 10px 4px 4px; }
.eco-picker__api { font-family: var(--fleet-font, ui-monospace, monospace); font-size: 11px; }
.eco-picker__new { margin-top: 12px; padding-top: 6px; border-top: 1px dashed var(--mud-palette-lines-default); }
.eco-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mud-palette-text-secondary); flex: 0 0 auto; }
.eco-dot.s-online, .eco-dot.s-ok, .eco-dot.s-idle { background: var(--mud-palette-success); }
.eco-dot.s-busy, .eco-dot.s-working { background: var(--fleet-busy, var(--mud-palette-warning)); }
.eco-dot.s-offline, .eco-dot.s-error { background: var(--mud-palette-error); }
.eco-dot.s-cooldown, .eco-dot.s-blacklisted { background: var(--mud-palette-warning); }
.eco-orrow { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; }
.eco-orrow code { font-size: 11px; color: var(--mud-palette-text-secondary); }
.eco-orpick { margin-top: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--mud-palette-lines-default); font-size: 13px; }

/* add + apply dialogs */
.eco-newgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.eco-newitem { all: unset; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--mud-palette-lines-default); }
.eco-newitem:hover, .eco-newitem:focus-visible { border-color: var(--fleet-accent, var(--mud-palette-primary)); }
.eco-newitem b { display: block; font-size: 13.5px; }
.eco-newitem span { font-size: 12px; color: var(--mud-palette-text-secondary); }
.eco-applylist { margin: 4px 0 12px; padding-left: 18px; font-size: 13px; }

@media (max-width: 700px) {
    .eco-head { position: static; }
    .eco-profile-select { min-width: 0; width: 100%; }
    .eco-head__profile, .eco-head__actions { width: 100%; }
    .eco-cards { grid-template-columns: 1fr; }
    .eco-two { grid-template-columns: 1fr; }
    .eco-pools { grid-template-columns: 1fr; }
    .eco-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .eco-tab { padding: 8px 10px; white-space: nowrap; }
}

/* kanban: new-ticket kind picker */
.kb-newkind { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.kb-newkind__opt { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--mud-palette-lines-default); }
.kb-newkind__opt b { font-size: 13.5px; }
.kb-newkind__opt span { font-size: 12px; color: var(--mud-palette-text-secondary); }
.kb-newkind__opt.on { border-color: var(--fleet-accent, var(--mud-palette-primary)); background: color-mix(in srgb, var(--fleet-accent, var(--mud-palette-primary)) 9%, transparent); }
.kb-newkind__opt:focus-visible { outline: 2px solid var(--fleet-accent, var(--mud-palette-primary)); outline-offset: 2px; }
.kb-errs { margin: 4px 0; padding-left: 18px; }
@media (max-width: 600px) { .kb-newkind { grid-template-columns: 1fr; } }

/* overseer: choices + do-it */
.ovs-files { list-style: none; margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: var(--mud-palette-background); font-size: 12px; max-height: 160px; overflow: auto; }
.ovs-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin: 10px 0; }
.ovs-choice { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--fleet-accent, var(--mud-palette-primary)) 55%, var(--mud-palette-lines-default)); background: color-mix(in srgb, var(--fleet-accent, var(--mud-palette-primary)) 7%, transparent); }
.ovs-choice:hover:not([disabled]), .ovs-choice:focus-visible { background: color-mix(in srgb, var(--fleet-accent, var(--mud-palette-primary)) 15%, transparent); }
.ovs-choice[disabled] { opacity: .6; cursor: progress; }
.ovs-choice b { font-size: 13.5px; } .ovs-choice span { font-size: 12px; color: var(--mud-palette-text-secondary); }
.ovs-askmode { flex: 0 0 auto; }
.ovs-askhint { flex-basis: 100%; margin: 0; }
.ovs-inc.responded { --sev: var(--mud-palette-success); opacity: .85; }
.ovs-tag.ok { color: var(--mud-palette-success); border-color: color-mix(in srgb, var(--mud-palette-success) 45%, transparent); }
.ovs-responded { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; padding: 10px 12px; border-radius: 12px; font-size: 13px;
    color: var(--mud-palette-text-primary); border: 1px solid color-mix(in srgb, var(--mud-palette-success) 45%, transparent); background: color-mix(in srgb, var(--mud-palette-success) 8%, transparent); }
.ovs-responded .mud-icon-root { color: var(--mud-palette-success); margin-top: 2px; }

/* ══ METRICS (/metrics) ═════════════════════════════════════════════════════
   Chart tokens. Status trio validated with the dataviz validator on the Kowloon surface
   (#18a877 / #c9800a / #ea2d4b: all checks pass, CVD red↔amber in the 6–8 band, carried by
   2px gaps + legend + icons + table view). Magnitude is one hue: the chart palette's ember. */
.mx { --mx-good: #18a877; --mx-warn: #c9800a; --mx-bad: #ea2d4b; --mx-seq: var(--fleet-chart-1, #d95926);
    --mx-grid: color-mix(in srgb, var(--mud-palette-text-secondary) 16%, transparent); --mx-deemph: color-mix(in srgb, var(--mud-palette-text-secondary) 55%, transparent);
    display: flex; flex-direction: column; gap: 14px; max-width: 1480px; margin: 0 auto; transition: opacity .2s; }
.mx.mx-refetch { opacity: .55; }
.mx-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.mx-head h1 { margin: 0; font-size: 22px; font-weight: 800; }
.mx-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.mx-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mx-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; border: 1px solid var(--mud-palette-lines-default); background: color-mix(in srgb, var(--mud-palette-surface) 80%, transparent); }
.mx-seg button { all: unset; cursor: pointer; padding: 5px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 700; color: var(--mud-palette-text-secondary); }
.mx-seg button.on { color: var(--mud-palette-text-primary); background: color-mix(in srgb, var(--mx-seq) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mx-seq) 50%, transparent); }
.mx-seg button:focus-visible { outline: 2px solid var(--mx-seq); outline-offset: 1px; }
.mx-seg--small { margin-bottom: 8px; } .mx-seg--small button { padding: 3px 10px; font-size: 11.5px; }

.mx-insights { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.mx-insight { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.4;
    border: 1px solid var(--mud-palette-lines-default); background: color-mix(in srgb, var(--mud-palette-surface) 88%, transparent); }
.mx-insight .mud-icon-root { flex: 0 0 auto; margin-top: 1px; }
.mx-insight.good .mud-icon-root { color: var(--mx-good); } .mx-insight.bad .mud-icon-root { color: var(--mx-bad); } .mx-insight.neutral .mud-icon-root { color: var(--mud-palette-text-secondary); }
.mx-insight.bad { border-color: color-mix(in srgb, var(--mx-bad) 35%, var(--mud-palette-lines-default)); }

.mx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 10px; }
.mx-tile { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--mud-palette-lines-default); background: color-mix(in srgb, var(--mud-palette-surface) 90%, transparent); display: flex; flex-direction: column; gap: 4px; }
.mx-tile__label { font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.mx-tile__value { font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.mx-tile__value small { font-size: 15px; font-weight: 600; color: var(--mud-palette-text-secondary); }
.mx-tile__row { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.mx-tile__hint { font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.mx-delta { font-size: 12px; font-weight: 700; white-space: nowrap; }
.mx-delta.good { color: var(--mx-good); } .mx-delta.bad { color: var(--mx-bad); } .mx-delta.flat { color: var(--mud-palette-text-secondary); }
.mx-spark { flex: 1 1 auto; height: 28px; overflow: visible; }
.mx-spark polyline { fill: none; stroke: var(--mx-deemph); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mx-spark circle { fill: var(--mx-seq); stroke: var(--mud-palette-surface); stroke-width: 2; vector-effect: non-scaling-stroke; }

.mx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mx-card { min-width: 0; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--mud-palette-lines-default); background: color-mix(in srgb, var(--mud-palette-surface) 90%, transparent); display: flex; flex-direction: column; gap: 8px; }
.mx-card.wide { grid-column: 1 / -1; }
.mx-card__head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.mx-card__head h3 { margin: 0; font-size: 15px; font-weight: 800; }
.mx-card__head p { margin: 2px 0 0; font-size: 12px; color: var(--mud-palette-text-secondary); }
.mx-toggle { all: unset; cursor: pointer; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 7px; color: var(--mud-palette-text-secondary); border: 1px solid var(--mud-palette-lines-default); }
.mx-toggle:hover, .mx-toggle:focus-visible { color: var(--mud-palette-text-primary); border-color: var(--mx-seq); }
.mx-empty { font-size: 13px; color: var(--mud-palette-text-secondary); }

.mx-fig { margin: 0; }
.mx-svg { width: 100%; height: auto; display: block; }
.mx-gridline { stroke: var(--mx-grid); stroke-width: 1; }
.mx-base { stroke: color-mix(in srgb, var(--mud-palette-text-secondary) 35%, transparent); stroke-width: 1; }
.mx-axis { fill: var(--mud-palette-text-secondary); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.mx-hit { fill: transparent; outline: none; cursor: default; }
.mx-hit:hover, .mx-hit:focus-visible { fill: color-mix(in srgb, var(--mud-palette-text-secondary) 8%, transparent); }
.mx-cell { outline: none; } .mx-cell:hover, .mx-cell:focus-visible { stroke: var(--mud-palette-text-primary); stroke-width: 1.5; }
.mx-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; color: var(--mud-palette-text-secondary); }
.mx-legend span { display: inline-flex; align-items: center; gap: 6px; } .mx-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.mx-scale { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 11px; color: var(--mud-palette-text-secondary); }
.mx-scale i { width: 18px; height: 10px; border-radius: 2px; display: inline-block; }

.mx-bars { display: flex; flex-direction: column; gap: 4px; }
.mx-bars__row { display: grid; grid-template-columns: minmax(120px, 34%) 1fr 56px; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 8px; cursor: pointer; outline: none; font-size: 13px; }
.mx-bars__row:hover, .mx-bars__row:focus-visible { background: color-mix(in srgb, var(--mud-palette-text-secondary) 8%, transparent); }
.mx-bars__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-bars__track { height: 10px; }
.mx-bars__track i { display: block; height: 10px; border-radius: 0 4px 4px 0; background: var(--mx-seq); }
.mx-bars__value { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.mx-bars__more { padding: 2px 8px 8px; }
.mx-examples { margin: 0; padding-left: 16px; font-size: 12px; color: var(--mud-palette-text-secondary); display: flex; flex-direction: column; gap: 4px; }
.mx-examples b { color: var(--mud-palette-text-primary); font-weight: 600; }

.mx-meter-block { margin-bottom: 8px; }
.mx-meter-head { display: flex; align-items: baseline; gap: 8px; } .mx-meter-head strong { font-size: 28px; } .mx-meter-head span { font-size: 13px; color: var(--mud-palette-text-secondary); }
.mx-meter { display: block; height: 10px; border-radius: 5px; margin: 6px 0 4px; background: color-mix(in srgb, var(--mx-bad) 16%, transparent); overflow: hidden; }
.mx-meter i { display: block; height: 100%; border-radius: 5px; background: var(--mx-bad); }
.mx-meter.slim { height: 8px; margin: 0; background: color-mix(in srgb, var(--mx-seq) 16%, transparent); } .mx-meter.slim i { background: var(--mx-seq); }
.mx-meter-legend { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.mx-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 14px; }
.mx-facts div { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--mx-grid); font-size: 12.5px; }
.mx-facts dt { color: var(--mud-palette-text-secondary); } .mx-facts dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.mx-scroll { overflow-x: auto; }
.mx-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mx-table th { text-align: left; font-weight: 700; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--mud-palette-text-secondary); padding: 6px 8px; border-bottom: 1px solid var(--mud-palette-lines-default); white-space: nowrap; }
.mx-table td { padding: 7px 8px; border-bottom: 1px solid var(--mx-grid); vertical-align: top; }
.mx-table td:first-child { min-width: 170px; }
.mx-table th, .mx-table td { padding-left: 6px; padding-right: 6px; }
.mx-more { all: unset; cursor: pointer; display: block; margin: 8px auto 0; font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 8px; color: var(--mud-palette-text-secondary); border: 1px solid var(--mud-palette-lines-default); }
.mx-more:hover, .mx-more:focus-visible { color: var(--mud-palette-text-primary); border-color: var(--mx-seq); }
.mx-table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mx-table a { color: var(--mud-palette-text-primary); text-decoration: underline; text-decoration-color: var(--mx-deemph); text-underline-offset: 3px; }
.mx-table tbody tr:hover td { background: color-mix(in srgb, var(--mud-palette-text-secondary) 5%, transparent); }
.mx-sort { all: unset; cursor: pointer; } .mx-sort:focus-visible { outline: 2px solid var(--mx-seq); }
.mx-sub { font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.mx-acc { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 0 5px; border-radius: 4px; margin-right: 4px; border: 1px solid var(--mud-palette-lines-default); color: var(--mud-palette-text-secondary); }
.mx-status { font-weight: 700; white-space: nowrap; }
.mx-status.done { color: var(--mx-good); } .mx-status.failed { color: var(--mx-bad); } .mx-status.escalated { color: var(--mx-warn); } .mx-status.stalled { color: var(--mx-warn); } .mx-status.abandoned { color: var(--mud-palette-text-secondary); }
.mx-res { display: flex; flex-direction: column; gap: 6px; }
.mx-res__row { display: grid; grid-template-columns: 130px 1fr 44px 96px; gap: 10px; align-items: center; font-size: 12.5px; padding: 4px 6px; border-radius: 8px; outline: none; }
.mx-res__row:hover, .mx-res__row:focus-visible { background: color-mix(in srgb, var(--mud-palette-text-secondary) 8%, transparent); }
.mx-res__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-res__val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.mx-res__wait { font-size: 11.5px; color: var(--mud-palette-text-secondary); text-align: right; }

.mx-tip { position: fixed; left: 0; top: 0; z-index: 2000; pointer-events: none; opacity: 0; transition: opacity .1s; max-width: 320px; padding: 7px 10px; border-radius: 9px;
    background: color-mix(in srgb, var(--mud-palette-surface) 96%, transparent); border: 1px solid var(--mud-palette-lines-default); box-shadow: 0 10px 28px -12px rgba(0,0,0,.6);
    font-size: 12px; color: var(--mud-palette-text-secondary); backdrop-filter: blur(6px); }
.mx-tip strong { display: block; font-size: 13.5px; color: var(--mud-palette-text-primary); margin-bottom: 1px; }

@media (max-width: 900px) { .mx-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
    .mx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mx-axis { font-size: 17px; } /* viewBox units: the 720-wide chart renders at ~45% on a phone */
    .mx-tile__value { font-size: 24px; }
    .mx-res__row { grid-template-columns: 96px 1fr 40px; } .mx-res__wait { display: none; }
    .mx-bars__row { grid-template-columns: minmax(90px, 40%) 1fr 44px; }
}

/* ══ TRIAL (/trial) ═════════════════════════════════════════════════════════
   Arm colours are set inline from the page (validated per theme); states use the status trio. */
.tr-status { display: flex; align-items: center; gap: 10px; }
.tr-chip { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
    border: 1px solid var(--mud-palette-lines-default); color: var(--mud-palette-text-secondary); white-space: nowrap; }
.tr-chip.running { color: var(--mx-warn); border-color: color-mix(in srgb, var(--mx-warn) 55%, transparent); }
.tr-chip.done { color: var(--mx-good); border-color: color-mix(in srgb, var(--mx-good) 55%, transparent); }
.tr-chip.stopped { color: var(--mx-bad); border-color: color-mix(in srgb, var(--mx-bad) 55%, transparent); }
.tr-empty h3 { margin: 0; font-size: 16px; } .tr-empty p { margin: 0; color: var(--mud-palette-text-secondary); font-size: 13px; }

.tr-arms { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.tr-arm { position: relative; padding: 14px 16px 12px; border-radius: 16px; border: 1px solid var(--mud-palette-lines-default); overflow: hidden;
    background: linear-gradient(160deg, color-mix(in srgb, var(--arm) 13%, var(--mud-palette-surface)) 0%, color-mix(in srgb, var(--mud-palette-surface) 92%, transparent) 55%);
    display: flex; flex-direction: column; gap: 12px; }
.tr-arm::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--arm); }
.tr-arm header { display: flex; align-items: center; gap: 12px; }
.tr-arm header > div { flex: 1 1 auto; min-width: 0; }
.tr-arm h3 { margin: 0; font-size: 15px; font-weight: 800; }
.tr-arm__id { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 900; font-size: 16px;
    color: var(--mud-palette-surface); background: var(--arm); }
.tr-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.tr-steps li { display: flex; flex-direction: column; align-items: center; gap: 4px; outline: none; border-radius: 8px; padding: 2px 0; }
.tr-steps li:hover, .tr-steps li:focus-visible { background: color-mix(in srgb, var(--mud-palette-text-secondary) 8%, transparent); }
.tr-step__dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800;
    border: 2px solid var(--mud-palette-lines-default); color: var(--mud-palette-text-secondary); }
.tr-steps li.done .tr-step__dot { background: var(--arm); border-color: var(--arm); color: var(--mud-palette-surface); }
.tr-steps li.running .tr-step__dot { border-color: var(--arm); color: var(--arm); animation: tr-pulse 1.6s ease-in-out infinite; }
.tr-steps li.timeout .tr-step__dot { border-color: var(--mx-warn); color: var(--mx-warn); }
.tr-steps li.stalled .tr-step__dot { border-color: var(--mx-bad); color: var(--mx-bad); }
.tr-step__label { font-size: 10.5px; font-weight: 700; color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; }
@keyframes tr-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--arm) 22%, transparent); } }
@media (prefers-reduced-motion: reduce) { .tr-steps li.running .tr-step__dot { animation: none; } }

.tr-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: baseline; }
.tr-score td:first-child { min-width: 180px; }
.tr-short { display: none; }
.tr-score td.n { font-size: 14px; font-weight: 700; }
.tr-best { color: var(--mud-palette-text-primary); }
.tr-score td.n:not(.tr-best) { color: var(--mud-palette-text-secondary); font-weight: 600; }
.tr-slices td { min-width: 110px; }
.tr-cell { display: flex; flex-direction: column; gap: 4px; font-variant-numeric: tabular-nums; }
.tr-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tr-log li { display: grid; grid-template-columns: 14px 86px 22px 1fr; align-items: baseline; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--mx-grid); font-size: 13px; }
.tr-method { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 20px; }
.tr-method dt { font-weight: 800; font-size: 13px; margin-bottom: 2px; }
.tr-method dd { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--mud-palette-text-secondary); }

.mx-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mx-line.dashed { stroke-dasharray: 5 5; stroke-width: 1.5; }
.mx-dot { stroke: var(--mud-palette-surface); stroke-width: 2; }
.mx-endlabel { font-size: 11px; font-weight: 700; fill: var(--mud-palette-text-primary); }
.mx-missing { stroke: var(--mx-deemph); stroke-width: 1.5; }
.mx-legend i.dash { background: none !important; border-top: 2px dashed var(--mud-palette-text-secondary); height: 0; border-radius: 0; }
@media (max-width: 600px) {
    .tr-log li { grid-template-columns: 12px 70px 18px 1fr; font-size: 12px; }
    /* A 720-wide chart renders at ~45% on a phone: its direct labels are either unreadable or,
       enlarged, collide. The legend under every chart already carries identity. */
    .mx-svg.wide .mx-endlabel, .mx-svg.wide .mx-endkey { display: none; }
    .tr-score td:first-child { min-width: 118px; }
    .tr-long { display: none; } .tr-short { display: inline; }
    .tr-score td .mx-sub, .tr-score th { font-size: 10px; }
    .tr-score td .mx-sub { display: none; }
    .tr-score td.n { font-size: 13px; }
}

/* ── Approvals (ApprovalCard, DiffView, Project tab, Live view) ───────────────────────────── */
.apv-page { display: flex; flex-direction: column; gap: 14px; }
.apv-page__intro { display: flex; flex-direction: column; gap: 2px; }
.apv-empty { display: flex; align-items: center; gap: 8px; padding: 28px; justify-content: center; color: var(--mud-palette-text-secondary); border: 1px dashed var(--mud-palette-lines-default); border-radius: 12px; }
.apv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 14px; }
.apv-history > summary { cursor: pointer; color: var(--mud-palette-text-secondary); margin: 6px 0 10px; }

.apv-card { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 14px; min-width: 0;
  background: color-mix(in srgb, var(--mud-palette-surface) 92%, var(--mud-palette-warning) 8%);
  border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 38%, var(--mud-palette-lines-default));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mud-palette-warning) 10%, transparent), 0 8px 28px -18px var(--mud-palette-warning); }
.apv-card.apv-compact { padding: 8px 10px; gap: 6px; border-radius: 10px; }
.apv-head { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.apv-kind { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
  color: var(--mud-palette-warning-darken, var(--mud-palette-warning)); background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent); }
.apv-card.apv-code .apv-kind { color: var(--mud-palette-info); background: color-mix(in srgb, var(--mud-palette-info) 16%, transparent); }
.apv-ticket { font-family: ui-monospace, monospace; font-size: 12px; color: var(--mud-palette-primary); text-decoration: none; }
.apv-title { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 160px; }
.apv-agent { font-size: 12px; color: var(--mud-palette-text-secondary); display: inline-flex; gap: 4px; align-items: center; }
.apv-hand, .floor-apv-hand { display: inline-block; transform-origin: 70% 90%; animation: apv-wave 1.6s ease-in-out infinite; }
@keyframes apv-wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(14deg); } 20%, 40% { transform: rotate(-8deg); } }
.apv-age { font-size: 11px; color: var(--mud-palette-text-secondary); }
.apv-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.apv-compact .apv-media { grid-template-columns: 1fr; }
.apv-media figure { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.apv-media img, .apv-media video { width: 100%; max-height: 320px; object-fit: contain; border-radius: 8px; display: block;
  background: color-mix(in srgb, var(--mud-palette-background) 80%, black); border: 1px solid var(--mud-palette-lines-default); }
.apv-compact .apv-media img, .apv-compact .apv-media video { max-height: 120px; }
.apv-media figcaption { font-size: 11px; color: var(--mud-palette-text-secondary); }
.apv-nomedia { font-size: 12px; color: var(--mud-palette-text-secondary); font-style: italic; }
.apv-behavior { margin: 0; font-size: 13px; color: var(--mud-palette-text-secondary); white-space: pre-wrap; max-height: 7.5em; overflow: auto; }
.apv-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.apv-actions .apv-comment { flex: 1 1 260px; }
.apv-decided { font-size: 12px; color: var(--mud-palette-text-secondary); text-transform: capitalize; }
.apv-stat { margin: 0 0 6px; font-size: 11px; color: var(--mud-palette-text-secondary); white-space: pre; overflow-x: auto; }

.apv-diff { display: flex; flex-direction: column; gap: 6px; max-height: 520px; overflow: auto; }
.apv-diff-file { border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; overflow: hidden; }
.apv-diff-file > summary { cursor: pointer; display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; font-size: 12px;
  font-family: ui-monospace, monospace; background: color-mix(in srgb, var(--mud-palette-surface) 85%, var(--mud-palette-background)); }
.apv-diff-count .add { color: var(--mud-palette-success); } .apv-diff-count .del { color: var(--mud-palette-error); }
.apv-diff-file pre { margin: 0; font-size: 12px; line-height: 1.45; overflow-x: auto; }
.apv-diff-file pre span { display: block; padding: 0 10px; white-space: pre; }
.apv-diff-file pre .add { background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent); }
.apv-diff-file pre .del { background: color-mix(in srgb, var(--mud-palette-error) 14%, transparent); }
.apv-diff-file pre .hunk { color: var(--mud-palette-info); background: color-mix(in srgb, var(--mud-palette-info) 8%, transparent); }
.apv-diff-empty { font-size: 12px; color: var(--mud-palette-text-secondary); }

/* Live view: mode toggle + dropdown */
.floor-apv { position: relative; display: flex; align-items: center; gap: 8px; margin-right: 6px; }
.floor-apv-mode { display: inline-flex; border: 1px solid var(--mud-palette-lines-default); border-radius: 999px; overflow: hidden; }
.floor-apv-mode button { all: unset; cursor: pointer; font-size: 12px; padding: 3px 10px; color: var(--mud-palette-text-secondary); }
.floor-apv-mode button.on { color: var(--mud-palette-background); background: var(--mud-palette-warning); font-weight: 600; }
.floor-apv-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 10px 4px 12px; border-radius: 999px;
  color: var(--mud-palette-text-secondary); border: 1px solid var(--mud-palette-lines-default); background: color-mix(in srgb, var(--mud-palette-surface) 90%, transparent); }
.floor-apv-btn .floor-apv-hand { animation: none; filter: grayscale(1); opacity: .6; }
.floor-apv-btn.has { color: var(--mud-palette-text-primary); border-color: color-mix(in srgb, var(--mud-palette-warning) 70%, transparent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-warning) 60%, transparent); animation: apv-glow 2.2s ease-out infinite;
  background: linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-warning) 22%, var(--mud-palette-surface)), color-mix(in srgb, var(--mud-palette-error) 12%, var(--mud-palette-surface))); }
.floor-apv-btn.has .floor-apv-hand { animation: apv-wave 1.6s ease-in-out infinite; filter: none; opacity: 1; }
.floor-apv-btn.has b { color: var(--mud-palette-warning); }
@keyframes apv-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-warning) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 10px transparent; } }
.floor-apv-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: min(420px, 92vw); max-height: 70vh; overflow: auto;
  padding: 6px; border-radius: 14px; display: flex; flex-direction: column; gap: 4px;
  background: color-mix(in srgb, var(--mud-palette-surface) 94%, var(--mud-palette-warning) 6%); backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 40%, var(--mud-palette-lines-default)); box-shadow: 0 18px 50px -20px rgba(0,0,0,.6); }
.floor-apv-row { all: unset; cursor: pointer; display: flex; gap: 10px; align-items: center; padding: 6px; border-radius: 10px; }
.floor-apv-row:hover, .floor-apv-row:focus-visible { background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent); }
.floor-apv-thumb { flex: 0 0 96px; height: 60px; border-radius: 8px; overflow: hidden; display: grid; place-items: center;
  background: color-mix(in srgb, var(--mud-palette-background) 70%, black); border: 1px solid var(--mud-palette-lines-default); color: var(--mud-palette-text-secondary); }
.floor-apv-thumb img, .floor-apv-thumb video { width: 100%; height: 100%; object-fit: cover; }
.floor-apv-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.floor-apv-kind { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mud-palette-warning); }
.floor-apv-title { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.floor-apv-agent { font-size: 11px; color: var(--mud-palette-text-secondary); }
.floor-apv-none { padding: 14px; font-size: 13px; color: var(--mud-palette-text-secondary); text-align: center; }
.floor-apv-all { font-size: 12px; text-align: right; padding: 6px 8px 2px; color: var(--mud-palette-primary); text-decoration: none; }

/* Live view: centre popup (over the canvas) and the agent's mini list */
.floor-apv-pop { position: absolute; z-index: 20; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(620px, calc(100% - 32px));
  max-height: calc(100% - 32px); overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 18px;
  background: color-mix(in srgb, var(--mud-palette-background) 72%, transparent); backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 55%, transparent); animation: apv-pop-in .28s cubic-bezier(.2,.9,.3,1.3);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.7), 0 0 60px -30px var(--mud-palette-warning); }
@keyframes apv-pop-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.floor-apv-pop__bar { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.floor-apv-pop__who { font-weight: 600; flex: 1; }
.floor-apv-pop__n { font-size: 12px; color: var(--mud-palette-text-secondary); }
.floor-apv-mini { position: absolute; z-index: 21; width: min(320px, calc(100% - 24px)); max-height: 60%; overflow: auto; padding: 8px; border-radius: 14px;
  display: flex; flex-direction: column; gap: 6px; background: color-mix(in srgb, var(--mud-palette-surface) 94%, transparent); backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 45%, transparent); box-shadow: 0 18px 50px -24px rgba(0,0,0,.7); animation: apv-pop-in-mini .2s ease-out; }
@keyframes apv-pop-in-mini { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.floor-apv-mini__bar { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; }
@media (max-width: 700px) {
  .floor-apv-mode { display: none; }
  .floor-apv-mini { left: 12px !important; right: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .apv-hand, .floor-apv-hand, .floor-apv-btn.has, .floor-apv-pop, .floor-apv-mini { animation: none !important; } }

/* ── Visual test area (/preview) ─────────────────────────────────────────────────────────── */
.pv-root { min-height: 100vh; padding: 16px; background: var(--mud-palette-background); color: var(--mud-palette-text-primary); box-sizing: border-box; }
.pv-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.pv-head h1 { margin: 0; font-size: 22px; }
.pv-head span { color: var(--mud-palette-text-secondary); font-size: 13px; }
.pv-set { margin: 0 0 28px; }
.pv-set h2 { font-size: 15px; margin: 0 0 10px; }
.pv-set h2 a, .pv-cell a { color: var(--mud-palette-primary); text-decoration: none; }
.pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 16px; }
.pv-cell { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.pv-cell small { color: var(--mud-palette-text-secondary); margin-left: 6px; }
.pv-frame { padding: 14px; border-radius: 12px; border: 1px dashed var(--mud-palette-lines-default); background: color-mix(in srgb, var(--mud-palette-surface) 60%, transparent); box-sizing: border-box; }
.pv-single { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.pv-single .pv-frame { border: 0; background: transparent; padding: 0; }
.pv-label { font-size: 12px; color: var(--mud-palette-text-secondary); }
.pv-off { color: var(--mud-palette-text-secondary); padding: 24px; }

/* ── DiffView v2: review layout (split / unified, file list, wrap) ───────────────────────── */
.dv { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: 12.5px; }
.dv-fill { height: 100%; min-height: 0; }
.dv-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dv-seg { display: inline-flex; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; overflow: hidden; }
.dv-seg button { all: unset; cursor: pointer; padding: 4px 12px; font-size: 12px; color: var(--mud-palette-text-secondary); }
.dv-seg button.on { background: var(--mud-palette-info); color: var(--mud-palette-background); font-weight: 600; }
.dv-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mud-palette-text-secondary); cursor: pointer; }
.dv-total { margin-left: auto; font-size: 12px; color: var(--mud-palette-text-secondary); }
.dv .add { color: var(--mud-palette-success); } .dv .del { color: var(--mud-palette-error); }
.dv-body { display: flex; gap: 10px; min-height: 0; flex: 1 1 auto; }
.dv-files { flex: 0 0 230px; display: flex; flex-direction: column; gap: 2px; overflow: auto; padding-right: 4px; border-right: 1px solid var(--mud-palette-lines-default); }
.dv-files a { display: flex; justify-content: space-between; gap: 6px; padding: 5px 8px; border-radius: 6px; text-decoration: none; color: var(--mud-palette-text-primary); font-family: ui-monospace, monospace; font-size: 11.5px; }
.dv-files a:hover, .dv-files a.on { background: color-mix(in srgb, var(--mud-palette-info) 14%, transparent); }
.dv-fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-fcount { flex: none; }
.dv-code { flex: 1 1 auto; min-width: 0; overflow: auto; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
.dv:not(.dv-fill) .dv-code { max-height: none; }
.dv-file { border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; overflow: clip; scroll-margin-top: 4px; }
.dv-fhead { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; font-family: ui-monospace, monospace; font-size: 12px;
  background: color-mix(in srgb, var(--mud-palette-surface) 88%, var(--mud-palette-background)); border-bottom: 1px solid var(--mud-palette-lines-default); }
.dv-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; line-height: 1.5; }
.dv-table col.dv-ln { width: 3.4em; }
.dv-n { color: var(--mud-palette-text-secondary); text-align: right; padding: 0 8px 0 4px; user-select: none; vertical-align: top; opacity: .7; }
.dv-c { padding: 0 10px; white-space: pre; vertical-align: top; overflow: hidden; }
.dv-wrap .dv-c { white-space: pre-wrap; overflow-wrap: anywhere; }
.dv:not(.dv-wrap) .dv-table { width: max-content; min-width: 100%; table-layout: auto; }
.dv-split td.dv-c:nth-child(2) { border-right: 1px solid var(--mud-palette-lines-default); }
.dv-c.add { background: color-mix(in srgb, var(--mud-palette-success) 15%, transparent); }
.dv-c.del { background: color-mix(in srgb, var(--mud-palette-error) 15%, transparent); }
.dv-c.empty { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--mud-palette-lines-default) 35%, transparent) 6px 7px); }
.dv-hunk td { padding: 3px 10px; color: var(--mud-palette-info); background: color-mix(in srgb, var(--mud-palette-info) 8%, transparent); font-size: 11.5px; }
.dv-dialog__content { height: calc(100dvh - 150px); padding-bottom: 12px !important; overflow: hidden !important; }
.dv-dialog__title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dv-dialog__title small { color: var(--mud-palette-text-secondary); font-family: ui-monospace, monospace; font-size: 11px; }
@media (max-width: 900px) { .dv-files { display: none; } }

/* approval feedback area */
.apv-media figcaption { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.apv-cite { all: unset; cursor: pointer; font-size: 13px; padding: 1px 6px; border-radius: 6px; opacity: .75; }
.apv-cite:hover, .apv-cite:focus-visible { opacity: 1; background: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent); }
.apv-feedback { display: flex; flex-direction: column; gap: 6px; }
.apv-feedback__label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.apv-feedback__box { width: 100%; box-sizing: border-box; resize: vertical; min-height: 84px; padding: 8px 10px; border-radius: 10px; font: inherit; font-size: 13px; line-height: 1.45;
  color: var(--mud-palette-text-primary); background: color-mix(in srgb, var(--mud-palette-background) 70%, transparent); border: 1px solid var(--mud-palette-lines-default); }
.apv-feedback__box:focus { outline: none; border-color: var(--mud-palette-warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-warning) 20%, transparent); }
.apv-feedback__opt { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--mud-palette-text-secondary); cursor: pointer; }

/* Live view: agent questions */
.floor-q-toggle { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 4px 10px; border-radius: 999px;
  color: var(--mud-palette-text-secondary); border: 1px dashed var(--mud-palette-lines-default); }
.floor-q-toggle.on { border-style: solid; color: var(--mud-palette-text-primary); }
.floor-q-toggle.has b { color: var(--mud-palette-info); }
.floor-q-toggle.has { box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-info) 25%, transparent); }
.floor-q-pop { border-color: color-mix(in srgb, var(--mud-palette-info) 60%, transparent); box-shadow: 0 30px 80px -30px rgba(0,0,0,.7), 0 0 60px -30px var(--mud-palette-info); }
.qc-card { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); }
.qc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qc-kind { color: var(--mud-palette-info); background: color-mix(in srgb, var(--mud-palette-info) 16%, transparent); }
.qc-text { white-space: pre-wrap; font-size: 13.5px; line-height: 1.5; max-height: 46vh; overflow: auto; padding-right: 4px; }
.qc-text code { font-size: 12px; padding: 0 4px; border-radius: 4px; background: color-mix(in srgb, var(--mud-palette-background) 70%, transparent); }
.qc-context summary { cursor: pointer; font-size: 12px; color: var(--mud-palette-text-secondary); }
.qc-options { display: flex; gap: 6px; flex-wrap: wrap; }

/* structured clarifying questions (ClarifyForm) */
.cf { display: flex; flex-direction: column; gap: 12px; }
.cf-rail { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cf-step { all: unset; cursor: pointer; min-width: 28px; height: 28px; padding: 0 8px; box-sizing: border-box; display: grid; place-items: center; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--mud-palette-text-secondary); border: 1px solid var(--mud-palette-lines-default); }
.cf-step.done { color: var(--mud-palette-success); border-color: color-mix(in srgb, var(--mud-palette-success) 55%, transparent); background: color-mix(in srgb, var(--mud-palette-success) 10%, transparent); }
.cf-step.on { color: var(--mud-palette-background); background: var(--mud-palette-info); border-color: var(--mud-palette-info); }
.cf-step--review { padding: 0 12px; }
.cf-q { display: flex; flex-direction: column; gap: 8px; }
.cf-q__n { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mud-palette-info); }
.cf-q__text { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 600; }
.cf-q__why { margin: 0; font-size: 13px; color: var(--mud-palette-text-secondary); }
.cf-opts { display: flex; flex-direction: column; gap: 6px; }
.cf-opt { all: unset; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.35;
  border: 1px solid var(--mud-palette-lines-default); background: color-mix(in srgb, var(--mud-palette-background) 40%, transparent); }
.cf-opt:hover, .cf-opt:focus-visible { border-color: color-mix(in srgb, var(--mud-palette-info) 60%, transparent); }
.cf-opt.on { border-color: var(--mud-palette-info); background: color-mix(in srgb, var(--mud-palette-info) 12%, transparent); }
.cf-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--mud-palette-text-secondary); box-sizing: border-box; }
.cf-opt.on .cf-dot { border-color: var(--mud-palette-info); box-shadow: inset 0 0 0 3px var(--mud-palette-surface); background: var(--mud-palette-info); }
.cf-opt__text { flex: 1; }
.cf-default { flex: none; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 1px 7px; border-radius: 999px;
  color: var(--mud-palette-text-secondary); border: 1px solid var(--mud-palette-lines-default); }
.cf-custom { min-height: 64px; }
.cf-nav { border-top: 1px solid var(--mud-palette-lines-default); padding-top: 10px; }
.cf-review { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.cf-rev { all: unset; cursor: pointer; display: flex; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--mud-palette-lines-default); }
.cf-rev:hover { border-color: var(--mud-palette-info); }
.cf-rev__n { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 700; background: color-mix(in srgb, var(--mud-palette-info) 18%, transparent); color: var(--mud-palette-info); }
.cf-rev__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cf-rev__q { font-size: 12px; color: var(--mud-palette-text-secondary); }
.cf-rev__a { font-size: 13.5px; }
.cf-rev__a.missing { color: var(--mud-palette-warning); }

/* project delete */
.pd-zone { border-color: color-mix(in srgb, var(--mud-palette-error) 35%, var(--mud-palette-lines-default)) !important; }
.pd-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--mud-palette-lines-default); flex-wrap: wrap; }
.pd-row__main { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pd-row__meta { font-size: 12px; color: var(--mud-palette-text-secondary); font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
.pd-list { margin: 0 0 8px 18px; padding: 0; font-size: 13px; line-height: 1.6; }