/* Test Suite Health (/panel/test-suite-health) — page-scoped EDS bridge.
   Moved out of the blade's inline <style> block per the bridge rule (no
   <style> in blades); everything here is namespaced under .msh / .msh-*.
   Loaded panel-wide AFTER eds-panel.css by the eds-pages/*.css glob, so the
   :root tokens it declares locally only restate what eds-panel.css already
   provides — kept so this file stays legible on its own.
   The JetBrains Mono webfont itself is NOT imported here — a nested @import
   inside a page-scoped stylesheet that the provider glob-loads on every
   panel route would block CSSOM parsing panel-wide for one page's font.
   It's loaded once as a real <link> alongside the bridge stylesheets in
   EthesiaPanelProvider so the browser's preload scanner can fetch it in
   parallel instead of discovering it only after u15.css downloads. */

.msh {
    /* Short local aliases over the canonical eds-panel.css :root tokens —
       aliases only, never raw values, so a palette retune reaches this page
       like every other. (--cream/--ink/--line/--purple/etc. inherit from
       :root directly; --dark/--shadow/--shadowL live there too.) */
    --ok:var(--ok-ink); --okbg:var(--ok-surface); --warn:var(--warn-ink); --warnbg:var(--warn-surface); --err:var(--err-ink); --errbg:var(--err-surface);
    font-family:'Inter',ui-sans-serif,system-ui,sans-serif; color:var(--ink);
    background:var(--cream); border:1px solid var(--line); border-radius:24px;
    padding:clamp(1.25rem,3vw,2.25rem); display:flex; flex-direction:column; gap:1.75rem;
    -webkit-font-smoothing:antialiased; box-sizing:border-box;
}
.msh *, .msh-drawer * { box-sizing:border-box; }

.msh-eyebrow { font-family:'Inter'; font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--purple); display:inline-flex; align-items:center; gap:.5rem; }
.msh-eyebrow::before { content:''; width:22px; height:1px; background:var(--purple); opacity:.5; }
.msh-title { font-family:'Fraunces',Georgia,serif; font-size:clamp(1.6rem,3.4vw,2.2rem); font-weight:430; letter-spacing:-.02em; line-height:1.08; margin:.55rem 0 0; color:var(--ink); }
.msh-lede { margin:.55rem 0 0; font-size:.9rem; color:var(--ink2); max-width:60rem; line-height:1.55; }

/* Hero KPI strip */
.msh-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr)); gap:.75rem; margin-top:1.2rem; }
.msh-kpi { background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:.9rem 1rem; box-shadow:var(--shadow); }
.msh-kpi__n { font-size:1.7rem; font-weight:600; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink); }
.msh-kpi__l { font-size:.74rem; font-weight:500; color:var(--ink2); margin-top:.4rem; }
.msh-kpi--ok .msh-kpi__n { color:var(--ok); } .msh-kpi--warn .msh-kpi__n { color:var(--warn); } .msh-kpi--err .msh-kpi__n { color:var(--err); }
/* Clickable KPI tile — opens its category drawer. */
.msh-kpi--btn { font-family:inherit; text-align:left; cursor:pointer; transition:transform .18s var(--fi-eds-ease), box-shadow .18s var(--fi-eds-ease), border-color .18s var(--fi-eds-ease); }
.msh-kpi--btn:hover { transform:translateY(-2px); box-shadow:var(--shadowL); border-color:var(--lineS); }
.msh-kpi--btn:focus-visible { outline:none; box-shadow:0 0 0 3px var(--psoft); border-color:var(--purple); }
.msh-kpi__go { display:inline-block; color:var(--purple7); font-weight:600; opacity:0; margin-left:.25rem; transition:opacity .18s var(--fi-eds-ease); }
.msh-kpi--btn:hover .msh-kpi__go, .msh-kpi--btn:focus-visible .msh-kpi__go { opacity:1; }

/* Pills / dots — radius 6 (chip/badge scale), matching .fi-eds-badge/.fi-eds-tag
   in the shared bridge. Never 9999/rounded-full here; that's reserved for
   truly circular elements (the dot, ticks, spinners below). */
.msh-pill { display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:600; border-radius:6px; padding:3px 10px; white-space:nowrap; line-height:1.4; }
.msh-pill__dot { width:7px; height:7px; border-radius:50%; flex:none; }
.msh-pill--ok { background:var(--okbg); color:var(--ok); } .msh-pill--ok .msh-pill__dot { background:var(--ok); }
.msh-pill--warn { background:var(--warnbg); color:var(--warn); } .msh-pill--warn .msh-pill__dot { background:var(--warn); }
.msh-pill--err { background:var(--errbg); color:var(--err); } .msh-pill--err .msh-pill__dot { background:var(--err); }
.msh-pill--muted { background:var(--cream2); color:var(--ink2); }
.msh-pill--brand { background:var(--psoft); color:var(--purple7); }

/* Category sections */
.msh-cat__head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:.9rem; padding-bottom:.6rem; border-bottom:1px solid var(--line); }
.msh-cat__name { font-family:'Fraunces',Georgia,serif; font-size:1.2rem; font-weight:430; letter-spacing:-.01em; color:var(--ink); }
.msh-cat__meta { font-size:.78rem; color:var(--ink3); }

.msh-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(16.5rem,1fr)); gap:1rem; }

/* Module card */
.msh-card { text-align:left; font-family:inherit; color:inherit; background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:1.05rem 1.15rem; cursor:pointer; display:flex; flex-direction:column; gap:.55rem; box-shadow:var(--shadow); transition:transform .18s var(--fi-eds-ease), box-shadow .18s var(--fi-eds-ease), border-color .18s var(--fi-eds-ease); min-height:9.5rem; }
.msh-card:hover { transform:translateY(-2px); box-shadow:var(--shadowL); border-color:var(--lineS); }
.msh-card:focus-visible { outline:none; box-shadow:0 0 0 3px var(--psoft); border-color:var(--purple); }
/* Card layout: full-width title (never squeezed by a pill), a short
   2-line summary, and one status footer row. Every card the same
   height — the drawer carries the detail. */
.msh-card__name { font-weight:600; font-size:.95rem; letter-spacing:-.01em; color:var(--ink); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em; }
.msh-tick { width:17px; height:17px; border-radius:50%; background:var(--ok); color:var(--paper); display:inline-flex; align-items:center; justify-content:center; font-size:10px; vertical-align:-3px; margin-right:.35rem; }
.msh-card__blurb { font-size:.8rem; color:var(--ink2); line-height:1.5; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.4em; flex:1; }
.msh-card__foot { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:auto; }
.msh-checks { font-size:.74rem; color:var(--ink3); font-variant-numeric:tabular-nums; }
.msh-checks b { color:var(--ink); font-weight:600; }
.msh-warnchip { font-size:.68rem; color:var(--warn); display:inline-flex; align-items:center; gap:4px; }

/* Callout / banner */
.msh-banner { display:flex; align-items:center; gap:.8rem; padding:.95rem 1.1rem; border-radius:14px; border:1px solid; font-size:.9rem; }
.msh-banner__dot { width:11px; height:11px; border-radius:50%; flex:none; }
.msh-banner--ok { background:var(--okbg); border-color:color-mix(in srgb, var(--ok) 22%, transparent); color:var(--ok); } .msh-banner--ok .msh-banner__dot { background:var(--ok); }
.msh-banner--warn { background:var(--warnbg); border-color:color-mix(in srgb, var(--warn) 22%, transparent); color:var(--warn); } .msh-banner--warn .msh-banner__dot { background:var(--warn); }
.msh-banner--err { background:var(--errbg); border-color:color-mix(in srgb, var(--err) 22%, transparent); color:var(--err); } .msh-banner--err .msh-banner__dot { background:var(--err); }

.msh-section__head { display:flex; align-items:baseline; gap:.6rem; margin-bottom:.4rem; }
.msh-section__h { font-family:'Fraunces',Georgia,serif; font-size:1.05rem; font-weight:430; color:var(--ink); }
.msh-section__sub { font-size:.8rem; color:var(--ink3); }

.msh-card-plain { background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:1.1rem 1.25rem; box-shadow:var(--shadow); }

/* Uncategorised list */
.msh-redrow { display:flex; align-items:center; gap:.7rem; padding:.55rem .2rem; border-top:1px solid var(--line); font-size:.8rem; }
.msh-redrow:first-child { border-top:none; }
.msh-redrow__file { font-family:'JetBrains Mono',ui-monospace,monospace; color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; }

/* Raw suites footer */
.msh-suites { display:grid; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); gap:.8rem; }
.msh-suite { border:1px solid var(--line); border-radius:14px; padding:.85rem 1rem; background:var(--paper); }
.msh-suite__n { font-weight:600; font-size:.85rem; color:var(--ink); }
.msh-suite__d { font-size:.76rem; color:var(--ink3); margin-top:.3rem; font-variant-numeric:tabular-nums; }
.msh-link { color:var(--purple7); font-size:.78rem; font-weight:500; text-decoration:none; }
.msh-link:hover { text-decoration:underline; }

.msh-btn { font-family:inherit; font-weight:500; font-size:.8rem; line-height:1; border-radius:10px; padding:8px 13px; border:1px solid var(--line); background:var(--paper); color:var(--ink); cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:transform .15s var(--fi-eds-ease), background .15s var(--fi-eds-ease), border-color .15s var(--fi-eds-ease); text-decoration:none; }
.msh-btn:hover { transform:translateY(-1px); background:var(--cream2); border-color:var(--lineS); }
.msh-btn--brand { background:var(--purple); color:var(--paper); border-color:var(--purple); }
.msh-btn--brand:hover { background:var(--purple7); border-color:var(--purple7); }
/* EDS: primary actions are INK, not purple (purple is the rationed accent). */
.msh-btn--ink { background:var(--ink); color:var(--cream); border-color:var(--ink); }
.msh-btn--ink:hover { background:var(--dark); border-color:var(--dark); }
/* Neutral outline pill for the suite-name counts (keeps purple rationed). */
.msh-pill--suite { background:var(--paper); border:1px solid var(--line); color:var(--ink2); }
/* Developer/agent hand-off block — clearly labelled so a non-technical
   admin understands these copy buttons are not for them to action. */
.msh-handoff { margin-top:.7rem; }
.msh-handoff__label { font-size:.72rem; color:var(--ink3); margin-bottom:.45rem; }
.msh-freshnote { font-size:.76rem; color:var(--ink2); line-height:1.55; margin:.7rem 0 0; padding:.6rem .75rem; background:var(--cream); border:1px solid var(--line); border-radius:10px; }
/* Live page link — the real URL a routed page is served at (clickable). */
.msh-livepage { display:flex; align-items:center; gap:.6rem; padding:.65rem .8rem; margin-bottom:.4rem; border:1px solid var(--line); border-radius:10px; background:var(--cream); text-decoration:none; transition:border-color .15s var(--fi-eds-ease), background .15s var(--fi-eds-ease), transform .15s var(--fi-eds-ease); }
a.msh-livepage:hover { border-color:var(--purple); background:var(--psoft); transform:translateY(-1px); }
.msh-livepage__route { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.84rem; font-weight:600; color:var(--ink); }
.msh-livepage__host { font-size:.72rem; color:var(--ink3); margin-left:auto; white-space:nowrap; }
.msh-livepage--dead { background:var(--errbg); border-color:color-mix(in srgb, var(--err) 22%, transparent); }
.msh-livepage--dead .msh-livepage__route { color:var(--err); }
.msh-livepage--dead .msh-livepage__host { color:var(--err); }
.msh-trustnote { font-size:.78rem; color:var(--ink2); line-height:1.6; margin:.6rem 0 0; }
.msh-deadwarn { font-size:.74rem; color:var(--warn); line-height:1.5; margin:.15rem 0 .5rem 1.6rem; }
/* Grouped checklist — each test file is a collapsible group of checks. */
.msh-cg { border:1px solid var(--line); border-radius:14px; margin-bottom:.5rem; background:var(--paper); overflow:hidden; }
.msh-cg > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:.55rem; padding:.6rem .8rem; }
.msh-cg > summary::-webkit-details-marker { display:none; }
.msh-cg > summary:hover { background:var(--cream); }
.msh-cg__dot { width:8px; height:8px; border-radius:50%; flex:none; }
.msh-cg__dot--ok { background:var(--ok); } .msh-cg__dot--err { background:var(--err); }
.msh-cg__title { font-size:.82rem; font-weight:600; color:var(--ink); }
.msh-cg__suite { font-size:.62rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink3); background:var(--cream2); padding:2px 7px; border-radius:6px; white-space:nowrap; }
.msh-cg__meta { margin-left:auto; font-size:.72rem; color:var(--ink3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.msh-cg__body { padding:.4rem .85rem .7rem; border-top:1px solid var(--line); }
.msh-cg__file { margin-top:.5rem; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.66rem; color:var(--ink3); word-break:break-all; }
.msh-check { display:flex; align-items:flex-start; gap:.6rem; padding:.4rem 0; font-size:.84rem; border-top:1px solid var(--cream2); }
.msh-check:first-child { border-top:none; }
.msh-check__icon { width:17px; height:17px; border-radius:6px; flex:none; display:inline-flex; align-items:center; justify-content:center; font-size:10px; color:var(--paper); margin-top:.12rem; }
.msh-check__icon--passed { background:var(--ok); } .msh-check__icon--failed { background:var(--err); } .msh-check__icon--skipped { background:var(--ink3); }
.msh-check__name { color:var(--ink); line-height:1.55; min-width:0; overflow-wrap:anywhere; }
.msh-checkfail { margin:.1rem 0 .55rem 1.6rem; padding:.55rem .7rem; background:var(--errbg); border:1px solid color-mix(in srgb, var(--err) 22%, transparent); border-radius:10px; }
.msh-checkfail__why { margin:0 0 .5rem; font-size:.78rem; color:var(--err); line-height:1.5; }

/* Drawer (warm paper panel floating over a scrim) — same floating/detached
   contract as the canonical .fi-eds-slideover (eds-panel.css): inset from
   every viewport edge (incl. on mobile), rounded on all sides, warm elevated
   shadow, 240–280ms transform/opacity enter/leave. */
.msh-scrim { position:fixed; inset:0; background:rgba(26,23,20,.42); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .25s var(--fi-eds-ease); z-index:9998; }
.msh-scrim.open { opacity:1; pointer-events:auto; }
.msh-drawer {
    /* Same alias-over-:root contract as .msh above (the drawer teleports to
       <body>, but :root tokens reach it there all the same). */
    --ok:var(--ok-ink); --okbg:var(--ok-surface); --warn:var(--warn-ink); --warnbg:var(--warn-surface); --err:var(--err-ink); --errbg:var(--err-surface);
    position:fixed; top:1rem; right:1rem; bottom:1rem; width:min(560px,calc(100vw - 2rem));
    background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:20px; overflow:hidden;
    box-shadow:0 40px 90px -30px rgba(40,33,20,.4); transform:translateX(calc(100% + 1.5rem)); opacity:0;
    transition:transform .28s cubic-bezier(.22,.61,.36,1), opacity 280ms var(--fi-eds-ease); z-index:9999; display:flex; flex-direction:column;
    font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
}
.msh-drawer.open { transform:none; opacity:1; }
.msh-drawer__head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.2rem 1.4rem; border-bottom:1px solid var(--line); background:var(--cream); }
.msh-drawer__eyebrow { font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--purple); }
.msh-drawer__title { font-family:'Fraunces',Georgia,serif; font-size:1.25rem; font-weight:430; letter-spacing:-.01em; margin-top:.2rem; color:var(--ink); }
.msh-drawer__close { flex:none; width:32px; height:32px; border-radius:10px; border:1px solid var(--line); background:var(--paper); color:var(--ink3); cursor:pointer; font-size:14px; display:inline-flex; align-items:center; justify-content:center; }
.msh-drawer__close:hover { background:var(--cream2); color:var(--ink); }
.msh-drawer__body { padding:1.4rem; overflow:auto; flex:1; display:flex; flex-direction:column; gap:1.3rem; }
.msh-dlabel { font-size:.68rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink3); margin-bottom:.5rem; }
.msh-prooflist { display:flex; flex-direction:column; gap:.4rem; }
.msh-proof { display:flex; align-items:center; gap:.6rem; padding:.5rem .6rem; border:1px solid var(--line); border-radius:10px; background:var(--cream); }
.msh-proof__icon { width:18px; height:18px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; flex:none; color:var(--paper); }
.msh-proof__icon--ok { background:var(--ok); } .msh-proof__icon--no { background:var(--err); } .msh-proof__icon--warn { background:var(--warn); }
.msh-proof__path { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.74rem; color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; }
.msh-proof__type { font-size:.66rem; color:var(--ink3); text-transform:uppercase; letter-spacing:.04em; flex:none; }
.msh-suiterow { display:flex; gap:.5rem; flex-wrap:wrap; }
.msh-failrow { padding:.6rem 0; border-top:1px solid var(--line); }
.msh-failrow:first-child { border-top:none; }
.msh-failrow__name { font-size:.82rem; font-weight:600; color:var(--ink); }
.msh-failrow__file { font-size:.72rem; color:var(--ink3); font-family:'JetBrains Mono',ui-monospace,monospace; margin-top:.1rem; word-break:break-all; }
.msh-failrow__actions { margin-top:.5rem; display:flex; gap:.4rem; flex-wrap:wrap; }
.msh-note { font-size:.8rem; color:var(--ink2); line-height:1.55; margin:0; }
.msh-warnbox { background:var(--warnbg); border:1px solid color-mix(in srgb, var(--warn) 22%, transparent); border-radius:10px; padding:.7rem .9rem; font-size:.8rem; color:var(--warn); line-height:1.5; }

/* Snapshot drawer — big number header + the action toolbar at the top. */
.msh-snaphead { display:flex; align-items:baseline; gap:.6rem; }
.msh-snaphead__n { font-family:'Fraunces',Georgia,serif; font-size:2.1rem; font-weight:430; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.msh-snaphead__n--ok { color:var(--ok); } .msh-snaphead__n--err { color:var(--err); } .msh-snaphead__n--warn { color:var(--warn); }
.msh-snaphead__l { font-size:.86rem; color:var(--ink2); }
.msh-actbar { display:flex; gap:.45rem; flex-wrap:wrap; margin-top:.2rem; }
/* Per-check failing row in the snapshot drawer. */
.msh-fcheck { padding:.7rem 0; border-top:1px solid var(--cream2); }
.msh-fcheck:first-child { border-top:none; }
.msh-fcheck__name { display:flex; align-items:flex-start; gap:.55rem; font-size:.86rem; font-weight:600; color:var(--ink); line-height:1.45; min-width:0; overflow-wrap:anywhere; }
.msh-fcheck__mod { font-size:.72rem; color:var(--ink3); margin:.2rem 0 0 1.55rem; }
.msh-fcheck__why { margin:.35rem 0 .45rem 1.55rem; padding:.5rem .65rem; background:var(--errbg); border:1px solid color-mix(in srgb, var(--err) 22%, transparent); border-radius:10px; font-size:.78rem; color:var(--err); line-height:1.5; }
.msh-fcheck__acts { margin-left:1.55rem; display:flex; gap:.4rem; flex-wrap:wrap; }
/* Re-run status bar (polls the rerun-status endpoint while a run is live). */
.msh-rerunbar { display:flex; align-items:center; gap:.55rem; padding:.65rem .8rem; border-radius:10px; font-size:.8rem; line-height:1.45; border:1px solid var(--line); background:var(--cream); color:var(--ink2); }
.msh-rerunbar--run { background:var(--psoft); border-color:color-mix(in srgb, var(--purple) 22%, transparent); color:var(--purple7); }
.msh-rerunbar--ok { background:var(--okbg); border-color:color-mix(in srgb, var(--ok) 22%, transparent); color:var(--ok); }
.msh-rerunbar--err { background:var(--errbg); border-color:color-mix(in srgb, var(--err) 22%, transparent); color:var(--err); }
.msh-spin { width:13px; height:13px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; flex:none; animation:msh-spin .7s linear infinite; }
/* Test runs strip — one slim row per suite: live progress while a run
   is in flight, last-run outcome when idle. */
.msh-runs { background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; }
.msh-runrow { display:flex; align-items:center; flex-wrap:wrap; gap:.35rem .7rem; padding:.6rem .95rem; font-size:.8rem; color:var(--ink2); border-bottom:1px solid var(--line); }
.msh-runrow:last-child { border-bottom:0; }
.msh-runrow__name { font-weight:600; color:var(--ink); flex:none; min-width:11.5rem; }
.msh-runrow__meta { color:var(--ink2); font-variant-numeric:tabular-nums; }
.msh-runrow__links { margin-left:auto; display:inline-flex; gap:.8rem; flex:none; }
.msh-runrow__links a, .msh-runrow__links button { font:inherit; font-size:.76rem; color:var(--purple7); background:none; border:0; padding:0; cursor:pointer; text-decoration:none; }
.msh-runrow__links a:hover, .msh-runrow__links button:hover { text-decoration:underline; }
.msh-dot { width:8px; height:8px; border-radius:50%; flex:none; background:var(--ink3); }
.msh-dot--ok { background:var(--ok); } .msh-dot--err { background:var(--err); } .msh-dot--warn { background:var(--warn); }
.msh-runrow--running { background:var(--psoft); color:var(--purple7); }
.msh-runrow--running .msh-runrow__name, .msh-runrow--running .msh-runrow__meta { color:var(--purple7); }
.msh-runrow--stale { background:var(--warnbg); }
.msh-runrow--stale .msh-runrow__name, .msh-runrow--stale .msh-runrow__meta { color:var(--warn); }
/* Progress track: height 7px, so any radius ≥ half-height renders fully
   rounded — 6 (the chip/tag rung) keeps it on-scale while looking identical. */
.msh-runrow__track { flex:1 1 140px; min-width:120px; max-width:260px; height:7px; border-radius:6px; background:color-mix(in srgb, var(--paper) 70%, transparent); border:1px solid color-mix(in srgb, var(--purple) 22%, transparent); overflow:hidden; }
.msh-runrow__fill { display:block; height:100%; width:100%; border-radius:6px; background:var(--purple7); transform-origin:left; transition:transform 280ms cubic-bezier(.22,.61,.36,1); }
.msh-runrow__log { flex-basis:100%; font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.7rem; color:var(--ink2); background:var(--paper); border-radius:6px; padding:.3rem .55rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msh-logpre { font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.72rem; line-height:1.55; color:var(--ink); background:var(--cream); border:1px solid var(--line); border-radius:14px; padding:.8rem .9rem; white-space:pre-wrap; word-break:break-word; max-height:32rem; overflow:auto; }
@keyframes msh-spin { to { transform:rotate(360deg); } }
.msh-btn[disabled] { opacity:.55; cursor:default; transform:none; }
/* Simple list row used by the healthy / attention / deprecated drawers. */
.msh-listrow { display:flex; align-items:flex-start; gap:.6rem; padding:.55rem 0; border-top:1px solid var(--cream2); font-size:.84rem; }
.msh-listrow:first-child { border-top:none; }
.msh-listrow__dot { width:8px; height:8px; border-radius:50%; flex:none; margin-top:.4rem; }
.msh-listrow__dot--ok { background:var(--ok); } .msh-listrow__dot--warn { background:var(--warn); } .msh-listrow__dot--err { background:var(--err); }
.msh-listrow__name { font-weight:600; color:var(--ink); }
.msh-listrow__sub { font-size:.74rem; color:var(--ink3); margin-top:.1rem; }
.msh-listrow__meta { margin-left:auto; font-size:.74rem; color:var(--ink3); white-space:nowrap; flex:none; }

/* Live-page snapshot — a real screenshot of the Nuxt 4 page so the admin
   can VISUALLY confirm the card points at the correct, current page. */
.msh-shot { display:block; border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:.6rem; background:var(--cream); text-decoration:none; transition:border-color .15s var(--fi-eds-ease), transform .15s var(--fi-eds-ease); }
a.msh-shot:hover { border-color:var(--purple); transform:translateY(-1px); }
.msh-shot img { display:block; width:100%; height:auto; max-height:230px; object-fit:cover; object-position:top; background:var(--cream2); }
.msh-shot__cap { display:flex; align-items:center; gap:.4rem; font-size:.7rem; color:var(--ink3); padding:.4rem .65rem; background:var(--paper); border-top:1px solid var(--line); }
.msh-shot__cap b { color:var(--ink2); font-weight:600; }

/* Retired (file-deleted) checks — shown muted + struck-through so they
   read as "gone", never as live green checks. */
.msh-stalerow { display:flex; align-items:center; gap:.6rem; padding:.45rem .2rem; border-top:1px solid var(--cream2); font-size:.78rem; color:var(--ink3); }
.msh-stalerow:first-child { border-top:none; }
.msh-stalerow__file { font-family:'JetBrains Mono',ui-monospace,monospace; color:var(--ink3); text-decoration:line-through; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; }

.msh-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(12px); background:var(--dark); color:var(--cream); font-size:13px; border-radius:10px; padding:11px 16px; box-shadow:0 12px 32px rgba(40,33,20,.35); opacity:0; pointer-events:none; transition:opacity .25s var(--fi-eds-ease), transform .25s var(--fi-eds-ease); z-index:10000; }
.msh-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width:640px) {
    .msh-drawer { top:8px; right:8px; bottom:8px; width:calc(100% - 16px); border-radius:16px; }
}
@media (prefers-reduced-motion: reduce) { .msh *, .msh-card, .msh-toast, .msh-scrim, .msh-drawer, .msh-btn { transition:none !important; } }