:root {
  font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme: light dark;
}

body {
  margin: 0;
}

#root {
  min-height: 100svh;
}
      :root {
        --bg: #f7f3e8;
        --card: #fffaf0;
        --tile-bg-end: #f7f3e8;
        --text-primary: #2a2519;
        --text-secondary: #5a4f3f;
        --text-muted: #6f6450;   /* v3.75.0: darkened from #8a7c66 → ~4.7:1 on light --card (was 3.9:1, failed WCAG AA); applies to both light blocks (:root + [data-theme=light]) */
        --border-subtle: rgba(60, 50, 35, 0.13);
        --border-accent: rgba(196, 99, 74, 0.45);
        --accent: #c4634a;
        --chip-bg: rgba(255, 250, 240, 0.55);
        --input-bg: #fffaf0;

        /* Spacing scale — every NEW spacing decision should pick from here.
           Existing rules use ad-hoc values; refactor opportunistically. */
        --space-1: 0.25rem;   /* micro: dot offsets, icon padding */
        --space-2: 0.5rem;    /* small: chip vertical padding, compact list gaps */
        --space-3: 0.75rem;   /* small-medium: gap between chips, modal pillset */
        --space-4: 1rem;      /* base: section padding-bottom, paragraph margins */
        --space-5: 1.5rem;    /* medium: modal section padding, ref-grid gap */
        --space-6: 2rem;      /* large: section breaks, header bottom margin */
        --space-7: 3rem;      /* extra-large: container padding, page-level breathing */

        /* Type scale — same opt-in convention as the spacing scale. */
        --text-xs: 0.65rem;
        --text-sm: 0.8rem;
        --text-base: 0.9rem;
        --text-md: 1rem;
        --text-lg: 1.15rem;
        --text-xl: 1.25rem;
        --text-2xl: 1.5rem;

        /* ─── Canonical breakpoint scale (v3.96 · task #284) ──────────
           The 4 sanctioned responsive tiers. NOTE: CSS `@media` cannot
           consume `var()`, so these custom properties are the documented
           single-source-of-truth + JS-readable (matchMedia) — every
           `@media (max-width: …)` rule below MUST use one of these exact
           px values (grep `@media` to audit). New breakpoints snap to the
           nearest tier; consolidate UPWARD (a wider tier applies the
           compact layout slightly earlier — the safe direction, never a
           gap where content overflows). Replaced the old ad-hoc spread
           (560/720/760/860/880) with these 4.
             phone   600px  — phone drawer; below = single-column / drawer nav
             compact 768px  — small-tablet / large-phone; shrink + stack chrome
             wide    880px  — wide 2-col grids collapse to 1-col
             rail   1024px  — tablet rail; the LeftNav becomes an icon rail
           (601px = phone+1, the lower bound that pairs with phone/rail bands.) */
        --bp-phone: 600px;
        --bp-compact: 768px;
        --bp-wide: 880px;
        --bp-rail: 1024px;

        /* ─── Canonical table & card tokens (v3.1.4) ──────────────────
           Single source of truth for table + card typography and
           spacing. Every table / card class should reference these
           rather than hard-coding font-size / padding. Calibrated to a
           MIDDLE GROUND between the old tight .msp-table density (7.2px
           × 11.2px body padding) and the looser .msp-tickets-table
           density (12px × 16px). Result: rows ~22% taller than before
           (not 40%) while making Workflows / Skills / Boards / Records /
           etc. typographically identical to Tickets.

           Adding a new table or card? Use these tokens. Don't hand-
           pick font-size or padding. The drift problem (Workflows
           text appearing smaller than Tickets — May 2026) was caused
           by 12 tables each rolling their own values; centralizing here
           prevents that recurring. */
        --table-body-font:    var(--text-sm);   /* 0.8rem  — same as Tickets table baseline */
        --table-header-font:  0.72rem;          /* between --text-xs (0.65) and --text-sm; mono uppercase reads big enough */
        --table-body-pad-y:   0.6rem;           /* 9.6px (was 7.2px in .msp-table, 12px in Tickets — middle) */
        --table-body-pad-x:   0.9rem;           /* 14.4px (was 11.2px in .msp-table, 16px in Tickets — middle) */
        --table-header-pad-y: 0.65rem;          /* slightly taller than body so header reads as a distinct band */
        --table-header-pad-x: 0.9rem;
        --table-row-hover-bg: color-mix(in srgb, var(--accent) 7%, transparent);

        --card-pad-y:         var(--space-4);   /* 1rem — generous on the vertical axis */
        --card-pad-x:         var(--space-4);
        --card-title-font:    var(--text-md);   /* 1rem  — primary heading inside a card */
        --card-body-font:     var(--text-sm);   /* 0.8rem — body matches table body */
        --card-meta-font:     var(--text-xs);   /* 0.65rem — uppercase mono meta labels */
        --card-gap:           var(--space-3);   /* 0.75rem — internal vertical rhythm */

        /* ─── Font stacks (v3.19.3) — one serif, one mono. Use the token; don't
           re-type the stack. Fraunces is loaded in index.html. */
        --font-serif: "Fraunces", 'Iowan Old Style', Georgia, serif;
        --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

        /* ─── Semantic state colors (v3.19.3) — light. Dark overrides below.
           Use these instead of hand-typing success/warn/danger/info hex. The
           domain palettes (PRIORITY_COLORS / STATUS_CATEGORIES in JS) stay the
           source for priority + status. */
        --success: #4a8c3a;
        --warn:    #d97a3a;
        --danger:  #c14638;
        --info:    #4476b8;

        /* ─── Radius scale (v3.19.3) ─── */
        --radius-sm: 4px;      /* in-cell chips, inputs */
        --radius-md: 8px;      /* cards, panels, banners (the standard) */
        --radius-pill: 999px;  /* pills / chips */
        --radius-circle: 50%;  /* avatars / dots */

        /* ─── Elevation + focus ring (v3.19.3) ─── */
        --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06);   /* card hover */
        --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.10);   /* dropdowns / popovers */
        --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.18);  /* modals / overlays */
        --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);

        /* ─── Z-index ladder (v3.19.3) — stay within these bands ─── */
        --z-content: 1;
        --z-nav: 30;
        --z-dropdown: 50;
        --z-overlay: 60;   /* full-screen mobile nav / agent overlays */
        --z-modal: 100;
      }
      @media (prefers-color-scheme: dark) {
        :root {
          --bg: #1d1813;
          --card: #2a221a;
          --tile-bg-end: #1d1813;
          --text-primary: #f0e6d2;
          --text-secondary: #c8b89a;
          --text-muted: #ab9c82;   /* v3.19.3: lightened from #8a7c66 → ~5.7:1 on dark --card (was ~3.7:1, failed AA) */
          --border-subtle: rgba(245, 235, 215, 0.1);
          --border-accent: rgba(212, 165, 116, 0.4);
          --accent: #d4a574;
          --chip-bg: rgba(40, 33, 25, 0.6);
          --input-bg: #2a221a;
          /* v3.19.3: lighter semantic colors for legibility on dark surfaces */
          --success: #6bbf5a;
          --warn:    #e0934e;
          --danger:  #e06a5a;
          --info:    #6b9bd1;
        }
      }

      /* v3.20.0 — explicit theme override. data-theme on <html> wins over the
         prefers-color-scheme media query by higher selector specificity
         (:root[data-theme="..."] = 0,1,1 vs :root inside @media = 0,1,0).
         data-theme="light" re-asserts the light tokens; data-theme="dark"
         re-asserts the dark tokens (so users can override the OS in either
         direction). The toggle is in the header (top-right). */
      :root[data-theme="light"] {
        --bg: #f7f3e8;
        --card: #fffaf0;
        --tile-bg-end: #f7f3e8;
        --text-primary: #2a2519;
        --text-secondary: #5a4f3f;
        --text-muted: #6f6450;   /* v3.75.0: darkened from #8a7c66 → ~4.7:1 on light --card (was 3.9:1, failed WCAG AA); applies to both light blocks (:root + [data-theme=light]) */
        --border-subtle: rgba(60, 50, 35, 0.13);
        --border-accent: rgba(196, 99, 74, 0.45);
        --accent: #c4634a;
        --chip-bg: rgba(255, 250, 240, 0.55);
        --input-bg: #fffaf0;
        --success: #4a8c3a;
        --warn:    #d97a3a;
        --danger:  #c14638;
        --info:    #4476b8;
      }
      :root[data-theme="dark"] {
        --bg: #1d1813;
        --card: #2a221a;
        --tile-bg-end: #1d1813;
        --text-primary: #f0e6d2;
        --text-secondary: #c8b89a;
        --text-muted: #ab9c82;
        --border-subtle: rgba(245, 235, 215, 0.1);
        --border-accent: rgba(212, 165, 116, 0.4);
        --accent: #d4a574;
        --chip-bg: rgba(40, 33, 25, 0.6);
        --input-bg: #2a221a;
        --success: #6bbf5a;
        --warn:    #e0934e;
        --danger:  #e06a5a;
        --info:    #6b9bd1;
      }

      /* ─────────────────────────────────────────────────────────────
         v3.20.15: Standardized scrollbars across the whole app.
         Was: every scrollable surface used browser-default chrome — the
         LeftNav had a subtle 6px thumb, the SearchableSelect dropdown
         had heavy native macOS/Windows bars, modal bodies had something
         else again. Reads as three different products.

         Now: ONE recipe everywhere. Subtle 8px (10 on horizontal),
         text-muted-at-30% thumb, transparent track, slightly darker on
         hover. Token-driven so it auto-adapts across light/dark themes.
         Firefox + webkit handled in parallel.
         ───────────────────────────────────────────────────────────── */
      * {
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--text-muted) 35%, transparent) transparent;
      }
      *::-webkit-scrollbar {
        width: 8px;
        height: 10px;
      }
      *::-webkit-scrollbar-track {
        background: transparent;
      }
      *::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--text-muted) 30%, transparent);
        border-radius: 4px;
        border: 2px solid transparent;
        background-clip: padding-box;
      }
      *::-webkit-scrollbar-thumb:hover {
        background: color-mix(in srgb, var(--text-muted) 55%, transparent);
        background-clip: padding-box;
      }
      *::-webkit-scrollbar-corner {
        background: transparent;
      }

      /* v3.21.0: App-chrome cluster (Theme + About) — pinned to the top-right
         of the header as a single visual unit. Both buttons are session-level
         controls about the APP itself (not about the current view), so they
         belong together. The cluster sits absolutely positioned so it doesn't
         compete with the header's main flow content. */
      .msp-header { position: relative; }
      .msp-header-chrome {
        position: absolute;
        top: 0;
        right: 0;
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        z-index: var(--z-content, 5);
      }
      .msp-theme-toggle {
        position: relative;
        width: 2rem; height: 2rem;
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        color: var(--text-secondary);
        cursor: pointer;
        font-family: inherit;
        transition: color 140ms cubic-bezier(.2,.7,.3,1),
                    border-color 140ms cubic-bezier(.2,.7,.3,1),
                    background 140ms cubic-bezier(.2,.7,.3,1),
                    transform 240ms cubic-bezier(.2,.7,.3,1);
      }
      .msp-theme-toggle:hover {
        color: var(--accent);
        border-color: var(--border-accent);
        background: color-mix(in srgb, var(--accent) 8%, var(--card));
        transform: rotate(15deg);
      }
      /* v3.20.5: theme-toggle uses INVERSE coloring — pill is LIGHT in
         dark mode (with a warm-gold sun icon on cream) and DARK in light
         mode (with a cool-slate moon icon on warm brown). Pops against
         the surrounding header instead of blending in. Border is dropped
         in favor of the contrasting fill since the surface itself is
         already the affordance. */
      :root[data-theme="dark"] .msp-theme-toggle {
        background: #fffaf0;
        border-color: transparent;
        color: #c9982e;
      }
      :root[data-theme="dark"] .msp-theme-toggle:hover {
        background: #f6f1e3;
        color: #b8841f;
      }
      :root[data-theme="light"] .msp-theme-toggle {
        background: #2a221a;
        border-color: transparent;
        color: #d4c5e8;
      }
      :root[data-theme="light"] .msp-theme-toggle:hover {
        background: #1d1813;
        color: #f0e6f8;
      }

      /* v3.19.3 a11y: visible keyboard focus on every interactive surface.
         :focus-visible only triggers for keyboard nav, not pointer clicks.
         Controls that already substitute their own ring (inputs/selects with a
         higher-specificity :focus { outline: none } + box-shadow) keep theirs;
         this fills the gap on chips, card-buttons, and rows that had none. */
      a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
      input:focus-visible, select:focus-visible, textarea:focus-visible,
      [tabindex]:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }

      /* v3.19.3 a11y: honor prefers-reduced-motion. Neutralizes entrance
         animations + the infinite shimmer / spin / pulse / typing loops. */
      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
          scroll-behavior: auto !important;
        }
      }

      body { margin: 0; background: var(--bg); color: var(--text-primary); font-family: var(--font-serif); }
      .pt-mono { font-family: var(--font-mono); }

      /* L-9: full-width app so the left + right sidebars sit flush
         against the viewport edges (matches Claude.ai's layout).
         Outer padding migrates into .msp-main-column below — content
         keeps its breathing room without offsetting the panels. */
      .msp-app {
        max-width: none;
        margin: 0;
        padding: 0;
        min-height: 100vh;
      }

      .msp-header {
        display: flex; justify-content: space-between; align-items: flex-end;
        gap: var(--space-4); flex-wrap: wrap;
        /* L-13: tightened from --space-5 (1.5rem) → --space-3 (0.75rem) so
           the first record row lifts higher in the viewport. */
        margin-bottom: var(--space-3);
      }
      .msp-title {
        /* L-13: shrunk from clamp(2.2rem, 4vw, 3.4rem) to a smaller range so
           the header is more compact. Still Fraunces, still elegant — just less
           dominant. */
        font-size: clamp(1.65rem, 2.6vw, 2.3rem);
        font-weight: 400; margin: 0; line-height: 1.1;
        letter-spacing: -0.015em;
        display: flex; align-items: center; gap: 0.6rem;
      }
      /* v3.20.11: About icon redesigned to match the app's design philosophy.
         The previous solid-accent fill read as a primary CTA which was too
         loud for a secondary "learn about" affordance. New treatment uses
         the hover/action recipe from design-system §8.5 — neutral surface +
         accent-tinted hover. Matches the theme-toggle, header-export-btn,
         and other ghost buttons in the header cluster so the H1 row reads
         as one consistent surface, not "title + neon CTA."

         States:
           Rest    — transparent surface, border-subtle outline, text-muted
                     glyph. Reads as a hint, not a demand.
           Hover   — accent-tinted background (8% mix on --card), border
                     becomes --border-accent, glyph turns --accent. Subtle
                     lift via translateY(-1px) and small shadow — matches
                     the card hover pattern.
           Active  — slightly darker shadow + reset transform (pressed-in).
           Focus   — keyboard ring via :focus-visible (global rule). */
      /* v3.22.1 + v3.23.0: header chrome pill buttons (About, Export PDF,
         AI Agents). Labeled, calm. Hover now uses the SAME chip-active
         fill pattern as filter chips / nav active items — light accent
         tint, accent border, no lift or shadow. Matches the rest of the
         app's affordance vocabulary. */
      .msp-about-link {
        display: inline-flex; align-items: center; justify-content: center;
        gap: var(--space-2);
        height: 2rem;
        padding: 0 0.75rem;
        color: var(--text-secondary);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        cursor: pointer;
        font-family: inherit;
        font-size: 0.78rem;
        font-weight: 500;
        letter-spacing: 0.04em;
        transition: background 140ms cubic-bezier(.2, .7, .3, 1),
                    border-color 140ms cubic-bezier(.2, .7, .3, 1),
                    color 140ms cubic-bezier(.2, .7, .3, 1);
      }
      .msp-about-link:hover {
        background: color-mix(in srgb, var(--accent) 14%, var(--card));
        border-color: color-mix(in srgb, var(--accent) 40%, var(--border-subtle));
        color: var(--accent);
      }
      .msp-about-link.is-active {
        background: color-mix(in srgb, var(--accent) 18%, var(--card));
        border-color: var(--accent);
        color: var(--accent);
      }
      .msp-about {
        background: var(--card);
        border-radius: 8px;
        padding: 2rem 2.4rem;
        max-width: 640px;
        position: relative;
        line-height: 1.65;
        font-size: 0.95rem;
        color: var(--text-primary);
      }
      .msp-about-title {
        font-family: "Fraunces", Georgia, serif;
        font-size: 1.6rem; font-weight: 400;
        margin: 0 0 0.4rem;
      }
      .msp-about-tagline {
        font-family: "Fraunces", Georgia, serif;
        font-size: 1.05rem;
        color: var(--text-muted);
        margin: 0 0 1.25rem !important;
        padding-bottom: 0.85rem;
        border-bottom: 1px solid var(--border-subtle);
      }
      .msp-about p { margin: 0 0 1rem; }
      .msp-about p:last-child { margin-bottom: 0; }
      .msp-about-foot {
        font-size: 0.85rem;
        color: var(--text-muted);
        font-style: italic;
        padding-top: 0.6rem;
        border-top: 1px solid var(--border-subtle);
      }
      .msp-about-credit {
        font-size: 0.85rem;
        color: var(--text-secondary);
        text-align: center;
        margin-top: 1.25rem !important;
        padding-top: 1rem;
        border-top: 1px solid var(--border-subtle);
      }
      .msp-about-credit a {
        color: var(--accent);
        text-decoration: none;
        font-weight: 500;
      }
      .msp-about-credit a:hover {
        text-decoration: underline;
      }

      /* v3.20.4: About panel redesign — hero + 4 pillars + start here.
         Token-driven; reuses the established card / chip / hover patterns
         from design-system §3 + §8 + §8.5. Max-width bumped to 720px so
         the 2-column pillar grid breathes; vertical rhythm uses --space-5
         between sections.
         v3.20.6: max-height + internal scroll so the panel scrolls itself
         instead of letting scroll fall through to the body. Pairs with
         the useEffect body-scroll lock in AboutPanel. */
      .msp-about-v2 {
        max-width: 720px;
        max-height: calc(100vh - 4rem);
        overflow-y: auto;
        padding: 2rem 2.4rem 1.8rem;
        display: flex; flex-direction: column;
        gap: var(--space-5);
      }
      .msp-about-v2 .msp-about-title {
        margin: 0 0 0.4rem;
      }
      .msp-about-v2 .msp-about-tagline {
        margin: 0 0 var(--space-3) !important;
        padding-bottom: 0;
        border-bottom: none;
      }
      /* v3.20.6: lead paragraph — the "what is this for" explanation that
         sits above the stats ribbon. Slightly larger body font + tighter
         leading vs the tagline above (which is italic-emphatic). */
      .msp-about-lead {
        margin: 0 0 var(--space-3) !important;
        font-size: 0.95rem;
        color: var(--text-secondary);
        line-height: 1.6;
      }
      .msp-about-lead strong { color: var(--text-primary); }
      .msp-about-hero {
        padding-bottom: var(--space-4);
        border-bottom: 1px solid var(--border-subtle);
      }
      .msp-about-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
        margin-top: var(--space-3);
        padding: var(--space-3) 0;
        background: color-mix(in srgb, var(--accent) 4%, var(--card));
        border-radius: var(--radius-md);
        text-align: center;
      }
      .msp-about-stat {
        display: flex; flex-direction: column;
        gap: 0.15rem;
      }
      .msp-about-stat-val {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 1.65rem;
        font-style: italic;
        font-weight: 400;
        color: var(--text-primary);
        line-height: 1;
      }
      .msp-about-stat-label {
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text-muted);
      }
      .msp-about-section {
        display: flex; flex-direction: column;
        gap: var(--space-3);
      }
      .msp-about-section-title {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 1.05rem;
        font-weight: 500;
        font-style: italic;
        margin: 0;
        color: var(--text-primary);
      }
      .msp-about-section-lead {
        margin: 0;
        font-size: 0.9rem;
        color: var(--text-secondary);
        font-style: italic;
      }
      .msp-about-pillars {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: var(--space-3);
      }
      .msp-about-pillar {
        display: flex; gap: var(--space-3);
        padding: var(--space-3);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        transition: border-color 140ms cubic-bezier(.2, .7, .3, 1);
      }
      .msp-about-pillar:hover {
        /* hover/card recipe per §8.5 (outline-only variant, since pillars
           don't need the lift — they're informational, not click targets). */
        border-color: var(--border-accent);
      }
      .msp-about-pillar-icon {
        display: inline-flex; align-items: center; justify-content: center;
        width: 2.4rem; height: 2.4rem;
        flex-shrink: 0;
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 8%, var(--card));
        border-radius: var(--radius-md);
      }
      .msp-about-pillar-body {
        display: flex; flex-direction: column;
        gap: 0.25rem;
        min-width: 0;
      }
      .msp-about-pillar-label {
        margin: 0;
        font-family: 'Fraunces', Georgia, serif;
        font-size: 1rem;
        font-weight: 500;
        color: var(--text-primary);
      }
      .msp-about-pillar-desc {
        margin: 0;
        font-size: 0.85rem;
        color: var(--text-secondary);
        line-height: 1.5;
      }
      .msp-about-pillar-cta,
      .msp-about-step-cta {
        align-self: flex-start;
        margin-top: 0.35rem;
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--accent);
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
      }
      .msp-about-pillar-cta:hover,
      .msp-about-step-cta:hover {
        text-decoration: underline;
      }
      .msp-about-note {
        background: color-mix(in srgb, var(--accent) 3%, var(--card));
        padding: var(--space-3) var(--space-4);
        border-left: 3px solid var(--accent);
        border-radius: 0 var(--radius-md) var(--radius-md) 0;
      }
      .msp-about-note p { margin: 0; line-height: 1.55; }
      .msp-about-note code {
        font-family: var(--font-mono);
        font-size: 0.85em;
        background: var(--chip-bg);
        padding: 0.05rem 0.3rem;
        border-radius: 3px;
      }
      /* v3.22.2: Settings view tabs — Providers / Connectors. */
      .msp-settings-wrapper {
        display: flex; flex-direction: column;
        gap: var(--space-3);
      }
      .msp-settings-tabs {
        display: flex;
        gap: var(--space-2);
        border-bottom: 1px solid var(--border-subtle);
        margin-bottom: var(--space-2);
      }
      .msp-settings-tab {
        appearance: none;
        background: transparent;
        border: 0;
        padding: 0.55rem 1rem;
        margin-bottom: -1px;
        font-family: inherit;
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--text-secondary);
        cursor: pointer;
        border-bottom: 2px solid transparent;
        transition: color 140ms ease, border-color 140ms ease;
      }
      .msp-settings-tab:hover { color: var(--text-primary); }
      .msp-settings-tab.active {
        color: var(--accent);
        border-bottom-color: var(--accent);
      }
      /* v3.23.0: AI Agents button — same .msp-about-link chrome, plus
         a tiny accent dot when the agent needs attention (first visit
         OR no BYOK API key configured). The dot is positioned at the
         top-right of the pill, like a notification badge. */
      .msp-agents-link {
        position: relative;
      }
      .msp-agents-link-dot {
        position: absolute;
        top: -2px;
        right: -2px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--accent);
        border: 1.5px solid var(--card);
        box-shadow: 0 0 0 1px var(--accent);
        animation: msp-agents-dot-pulse 2s ease-in-out infinite;
      }
      @keyframes msp-agents-dot-pulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50%      { opacity: 0.6; transform: scale(0.85); }
      }
      @media (prefers-reduced-motion: reduce) {
        .msp-agents-link-dot { animation: none; }
      }
      /* v3.22.2: OML lift section — accent-tinted block highlighting the
         load-bearing narrative. Bullets keep the EBITDA / valuation /
         margin-compounding points readable at a glance. */
      .msp-about-oml {
        background: color-mix(in srgb, var(--accent) 4%, var(--card));
        padding: var(--space-4);
        border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border-subtle));
        border-radius: var(--radius-md);
      }
      .msp-about-oml p { margin: 0 0 var(--space-2) 0; line-height: 1.55; }
      .msp-about-oml p:last-child { margin-bottom: 0; }
      .msp-about-bullets {
        margin: var(--space-2) 0;
        padding-left: 1.2rem;
        line-height: 1.55;
      }
      .msp-about-bullets li { margin-bottom: var(--space-1); }
      .msp-about-bullets li:last-child { margin-bottom: 0; }
      /* v3.22.2: Content inventory grid — 2-column at standard width,
         1-column on narrow. Each card lists the top items in one of the
         six sections. */
      .msp-about-content-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: var(--space-3);
      }
      .msp-about-content-card {
        padding: var(--space-3);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        font-size: 0.88rem;
        line-height: 1.5;
      }
      .msp-about-content-card strong {
        display: block;
        font-family: ui-sans-serif, system-ui, sans-serif;
        font-size: 0.7rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--accent);
        margin-bottom: var(--space-2);
        font-weight: 700;
      }
      .msp-about-content-card ul {
        margin: 0;
        padding-left: 1.1rem;
        list-style: disc;
        color: var(--text-secondary);
      }
      .msp-about-content-card li { margin-bottom: var(--space-1); }
      .msp-about-content-card li:last-child { margin-bottom: 0; }
      .msp-about-steps {
        list-style: none;
        margin: 0; padding: 0;
        display: flex; flex-direction: column;
        gap: var(--space-3);
      }
      .msp-about-step {
        display: flex; gap: var(--space-3);
        padding: var(--space-3);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
      }
      .msp-about-step-num {
        display: inline-flex; align-items: center; justify-content: center;
        width: 2rem; height: 2rem;
        flex-shrink: 0;
        font-size: 1.1rem; font-weight: 500;
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 8%, var(--card));
        border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border-subtle));
        border-radius: 50%;
      }
      .msp-about-step-body {
        display: flex; flex-direction: column;
        gap: 0.25rem;
        min-width: 0;
      }
      .msp-about-step-label {
        margin: 0;
        font-family: 'Fraunces', Georgia, serif;
        font-size: 1rem;
        font-weight: 500;
        color: var(--text-primary);
      }
      .msp-about-step-desc {
        margin: 0;
        font-size: 0.85rem;
        color: var(--text-secondary);
        line-height: 1.55;
      }
      /* v3.20.7: about-panel footer standardized to match the canonical
         app <footer> (.msp-footer) — credit line + "Made with ❤ in NYC
         for MSPs." second line. Italic, muted, centered, with the accent-
         colored heart matching .msp-footer-heart. Hairline on top per the
         app footer pattern. */
      .msp-about-footer {
        margin-top: 0;
        padding-top: var(--space-3);
        border-top: 1px solid var(--border-subtle);
        text-align: center;
        display: flex; flex-direction: column;
      }
      .msp-about-v2 .msp-about-credit {
        margin: 0 !important;
        padding: 0;
        border: none;
        font-size: 0.8rem;
        font-style: italic;
        color: var(--text-muted);
        text-align: center;
        letter-spacing: 0.005em;
      }
      .msp-about-v2 .msp-about-credit a {
        font-style: normal;
        font-weight: 500;
      }
      .msp-about-origin {
        font-size: 0.78rem;
        color: var(--text-muted);
        font-style: italic;
        margin: 0.4rem 0 0 0;
        letter-spacing: 0.01em;
      }
      .msp-about-heart {
        color: var(--accent);
        font-style: normal;
        display: inline-block;
        transform: translateY(0.05em);
      }

      /* Page footer — creator attribution, sits below all content with a
         hairline rule separating it from the data above. Italic / muted
         so it reads as a credit line, not a primary navigation element. */
      .msp-footer {
        margin-top: 3rem;
        padding: 1.25rem 0 0.85rem;
        border-top: 1px solid var(--border-subtle);
        text-align: center;
      }
      .msp-footer-credit {
        font-size: 0.8rem;
        color: var(--text-muted);
        font-style: italic;
        margin: 0;
        letter-spacing: 0.005em;
      }
      .msp-footer-credit a {
        color: var(--accent);
        text-decoration: none;
        font-style: normal;
      }
      .msp-footer-credit a:hover {
        text-decoration: underline;
      }
      .msp-footer-credit strong {
        font-weight: 600;
      }
      .msp-footer-origin {
        font-size: 0.78rem;
        color: var(--text-muted);
        font-style: italic;
        margin: 0.4rem 0 0 0;
        letter-spacing: 0.01em;
      }
      .msp-footer-heart {
        color: var(--accent);
        font-style: normal;
        display: inline-block;
        transform: translateY(0.05em);
      }
      .msp-about code {
        font-family: ui-monospace, monospace;
        font-size: 0.85em;
        background: color-mix(in srgb, var(--accent) 12%, transparent);
        padding: 0.05rem 0.35rem;
        border-radius: 3px;
      }
      .msp-lens-hint {
        margin-left: 0.6rem;
        font-style: italic;
        font-size: 0.78rem;
        color: var(--text-muted);
      }
      /* Tagline — the "what is this" line that sits between the title
         and the spec subtitle. Larger and more emphasized than the
         subtitle to read as the primary descriptor; non-italic so it
         doesn't compete with the italic subtitle's voice. */
      .msp-tagline {
        max-width: 70ch;
        font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
        /* L-13: tagline kept but shrunk slightly so it pairs cleanly
           with the smaller .msp-title. */
        font-size: 0.98rem;
        font-weight: 400;
        color: var(--text-secondary);
        margin: 0.25rem 0 0;
        line-height: 1.3;
        letter-spacing: -0.005em;
      }
      .msp-subtitle {
        /* L-13: kept for any caller still rendering it (currently none —
           we removed the page-header subtitle line). Tightened spacing
           in case something else re-uses the class. */
        max-width: 70ch; font-size: 0.95rem; color: var(--text-secondary);
        margin: 0.25rem 0 0; font-style: italic; line-height: 1.45;
      }
      /* Record-count display previously lived here. Removed in v3.1.2 —
         each ViewToolbar already shows its own "X of Y records" count
         in the active-view band, so the page-header version was
         duplicative + Records-specific data leaking into the global
         chrome (meaningless for Skills, Tools, Tickets, etc.). */
      /* Export PDF header button — session-level action sitting between
         the AI Agents dropdown and the records-count display. Same pill
         shape as PSA chips for visual consistency in the controls cluster. */
      .msp-header-export-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.45rem 0.85rem;
        font-family: inherit;
        font-size: 0.82rem;
        font-weight: 500;
        color: var(--text-primary);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 999px;
        cursor: pointer;
        transition: background 100ms, border-color 100ms, color 100ms;
        letter-spacing: 0.01em;
      }
      /* v3.20.2: hover/action recipe per design-system §8.5. */
      .msp-header-export-btn:hover {
        background: color-mix(in srgb, var(--accent) 8%, var(--card));
        border-color: var(--border-accent);
        color: var(--accent);
      }
      .msp-header-export-btn svg {
        stroke: currentColor;
        stroke-width: 2;
        fill: none;
      }
      /* "Active state" dot for header pills — used by the Connect button
         when an imported config is present. Small green dot at the upper
         right of the pill. */
      .msp-header-btn-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #4a8c3a;
        display: inline-block;
        margin-left: 0.15rem;
        box-shadow: 0 0 0 2px var(--card, #fffaf0);
      }
      /* Header right-side controls — bundles the SessionBar (paradigm
         + lens chips) and the count display so they read as one
         "session config" cluster. */
      .msp-header-controls {
        display: flex; align-items: center;
        gap: var(--space-2);
        /* v3.54.1: controls take their own full-width row (below the H1) so the
           search bar + the SessionBar share ONE row — search pinned left, the bar
           flex-fills to the right and wraps its own chips internally if needed
           (instead of pushing the search onto a separate line). */
        flex: 1 1 100%;
        flex-wrap: nowrap;
        justify-content: flex-start;
        min-width: 0;
      }
      /* v3.54.1: the SessionBar fills the row to the right of the search;
         min-width:0 lets its internal flex-wrap engage instead of overflowing. */
      .msp-header-controls .msp-session-bar { flex: 1 1 auto; min-width: 0; }
      .msp-header-identity {
        flex: 1 1 auto;
        min-width: 16rem;
      }
      /* ─── Option 3: header search ──────────────────────────────────
         Search lives in the page header as the leftmost control in the
         right-side cluster. Includes a magnifier glyph for affordance
         and a clear-× when text is present. Visual weight matches
         SessionBar (same height, same border treatment) so the cluster
         reads as one row of session-level controls. */
      .msp-header-search {
        position: relative;
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
      }
      .msp-header-search-icon {
        position: absolute;
        left: 0.7rem;
        color: var(--text-muted);
        pointer-events: none;
      }
      .msp-header-search-input.msp-input {
        width: 190px;
        height: auto;
        padding: 0.45rem 1.9rem 0.45rem 2.1rem;
        border-radius: 8px;
        font-size: 0.85rem;
      }
      .msp-header-search-input.msp-input:focus {
        border-color: var(--border-accent);
      }
      .msp-header-search-clear {
        position: absolute;
        right: 0.4rem;
        background: transparent;
        border: none;
        font-size: 1.1rem;
        line-height: 1;
        color: var(--text-muted);
        cursor: pointer;
        padding: 0.1rem 0.4rem;
        border-radius: 4px;
        transition: color 0.15s, background 0.15s;
      }
      .msp-header-search-clear:hover {
        color: var(--text-primary);
        background: color-mix(in srgb, var(--text-muted) 12%, transparent);
      }
      /* On narrow viewports the search shrinks but stays inline; the
         cluster will wrap naturally below the identity block. */
      @media (max-width: 768px) { /* compact — consolidated from 720 (#284) */
        .msp-header-search-input.msp-input {
          width: 160px;
        }
        /* v3.54.1: on small screens let search + the bar stack rather than
           squeezing the bar to a sliver on one nowrap row. */
        .msp-header-controls { flex-wrap: wrap; }
      }
      /* SessionBar — paradigm + lens controls pinned to the header.
         Larger after the logo-icon addition; signals "session config"
         but with enough presence to display vendor branding cleanly.
         v3.1.2: tightened spacing across chip padding, gap, and logo
         size to shave ~35px without losing brand-logo legibility —
         frees the last bit of header budget so the controls cluster
         fits on row 1 at 1440px alongside Search / AI Agents /
         Setup ▾ / Export PDF. */
      .msp-session-bar {
        /* v3.19.3: wrap when the row runs out of width instead of forcing the
           whole page to scroll horizontally (<~1163px). row-gap spaces wrapped lines. */
        display: inline-flex; align-items: center; flex-wrap: wrap; row-gap: var(--space-2);
        gap: 0.3rem;
        padding: 0.3rem 0.35rem;
        background: var(--bg);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
      }
      /* v3.21.1: PsaLensControls — the PSA paradigm + lens chip cluster
         that lives INSIDE each PSA-aware ViewHeader card (via its extras
         slot). Records / Tickets render it as part of their card; Boards
         / Statuses use the standalone variant below.
         The card already provides the surface — chips render flush with
         no extra background so the cluster reads as a section of the
         card, not a competing element. Solves the layout jolt of seeing
         the card "shift down" between PSA-aware and non-PSA views. */
      .msp-view-header-extras .msp-psa-lens-controls {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        row-gap: var(--space-2);
        gap: 0.3rem;
        padding: 0;
        margin: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
      }
      /* Standalone PsaLensControls (Boards / Statuses for now) — uses the
         same chip vocabulary but wraps in a subtle card-tinted box since
         it isn't inside a ViewHeader's extras slot. */
      .msp-psa-lens-controls {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        row-gap: var(--space-2);
        gap: 0.3rem;
        padding: 0.3rem 0.4rem;
        margin: 0 0 var(--space-4) 0;
        background: color-mix(in srgb, var(--accent) 4%, var(--card));
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
      }
      /* PSA section title — uses .msp-row-label for typography (uppercase
         mono, text-sm, secondary color) but with positional overrides so
         it sits inline with the pill cluster rather than taking the
         standard 8rem column. */
      .msp-session-bar-title {
        flex: 0 0 auto;
        padding: 0;
        margin-right: 0.2rem;
      }
      /* MSP size filter (v3.1.10) — small mono label + compact native select */
      .msp-session-bar-mini-label {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
        font-weight: 600;
      }
      .msp-session-size-select {
        font-family: inherit;
        font-size: 0.78rem;
        padding: 0.2rem 0.35rem;
        border: 1px solid var(--border-subtle);
        background: var(--card);
        color: var(--text-primary);
        border-radius: 4px;
        cursor: pointer;
        letter-spacing: 0.01em;
        /* v3.7.2: bumped from 78px to 122px to accommodate the new
           inline tech-count labels ("Growing · 11-25" etc.). */
        max-width: 122px;
        min-width: 0;
      }
      .msp-session-size-select:hover,
      .msp-session-size-select:focus {
        border-color: var(--accent);
        outline: none;
      }
      /* v3.6: when Demo Mode is active, the demo select lights up so the
         active state is visible without depending on the banner alone. */
      .msp-session-demo-select {
        max-width: 130px;
      }
      .msp-session-demo-select[data-demo-active="true"] {
        background: color-mix(in srgb, var(--danger) 14%, var(--card));
        color: color-mix(in srgb, var(--danger) 72%, var(--text-primary));
        border-color: var(--danger);
        font-weight: 600;
      }
      /* v3.6: Demo Mode banner — wraps below the header, fills the main
         column width, and uses a saturated red so visitors don't confuse
         the scenario with real live data. */
      .msp-demo-banner {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.55rem 0.9rem;
        margin: 0 0 0.6rem 0;
        background: color-mix(in srgb, var(--danger) 12%, var(--card));
        border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--card));
        border-left: 3px solid var(--danger);
        border-radius: 6px;
        color: color-mix(in srgb, var(--danger) 72%, var(--text-primary));
        font-size: var(--text-sm);
        line-height: 1.35;
      }
      .msp-demo-banner-icon {
        font-size: 1.1rem;
        line-height: 1;
        flex-shrink: 0;
      }
      .msp-demo-banner-text {
        flex: 1;
        min-width: 0;
      }
      .msp-demo-banner-text strong {
        color: var(--danger);
      }
      .msp-demo-banner-exit {
        flex-shrink: 0;
        font-family: inherit;
        font-size: 0.78rem;
        padding: 0.3rem 0.65rem;
        background: var(--card);
        color: color-mix(in srgb, var(--danger) 72%, var(--text-primary));
        border: 1px solid var(--danger);
        border-radius: 4px;
        cursor: pointer;
        font-weight: 600;
      }
      .msp-demo-banner-exit:hover {
        background: var(--danger);
        color: var(--card);
      }
      /* v3.20.8: primary CTA on the demo banner — opens Tickets where
         the demo's effect actually lives. Filled red so it reads as the
         primary action while Exit stays the muted secondary. */
      .msp-demo-banner-cta {
        flex-shrink: 0;
        font-family: inherit;
        font-size: 0.78rem;
        padding: 0.3rem 0.75rem;
        background: var(--danger);
        color: var(--card);
        border: 1px solid var(--danger);
        border-radius: 4px;
        cursor: pointer;
        font-weight: 600;
        transition: background 140ms cubic-bezier(.2, .7, .3, 1),
                    transform 140ms cubic-bezier(.2, .7, .3, 1);
      }
      .msp-demo-banner-cta:hover {
        background: color-mix(in srgb, var(--danger) 82%, #000);
        transform: translateY(-1px);
      }
      .msp-session-group {
        display: inline-flex; align-items: center;
        gap: 0.2rem;
      }
      .msp-session-divider {
        width: 1px;
        align-self: stretch;
        background: var(--border-subtle);
        margin: 0.15rem 0;
      }
      .msp-session-chip {
        display: inline-flex; align-items: center;
        gap: 0.3rem;
        padding: 0.35rem 0.6rem;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 5px;
        cursor: pointer;
        font-family: inherit;
        font-size: var(--text-sm);
        font-weight: 500;
        letter-spacing: 0.02em;
        color: var(--text-secondary);
        /* No transition — paradigm switch needs to feel instant.
           Compounding fades (chip + logo) made the click feel
           sluggish even though the state change is immediate. */
      }
      .msp-session-chip:hover {
        background: var(--chip-bg);
        color: var(--text-primary);
      }
      .msp-session-chip.active {
        background: color-mix(in srgb, var(--accent) 14%, var(--card));
        color: var(--accent);
        border-color: color-mix(in srgb, var(--accent) 40%, var(--border-subtle));
      }
      .msp-session-chip svg {
        opacity: 0.85;
        flex-shrink: 0;
      }
      /* PSA chips carry vendor logos (ConnectWise / Autotask / HaloPSA)
         instead of generic SVG glyphs. Slightly more padding than
         generic session-chips so the logo + label pair reads as a
         substantial "vendor selector" tile, but tightened in v3.1.2
         to fit header budget. */
      .msp-session-chip-psa {
        padding: 0.35rem 0.7rem;
      }
      .msp-session-chip-logo {
        width: 16px; height: 16px;
        object-fit: contain;
        flex-shrink: 0;
        /* Always full opacity — the chip's accent background + border
           signals "active" without dimming the inactive logo. Avoids
           an opacity transition that made switching feel sluggish. */
      }
      .msp-session-chip-label {
        line-height: 1;
      }

      /* AI Agents strip — compact action-chip row directly under TABS,
         visually de-emphasized to mark "actions, not navigation."
         Hairline rule above marks the transition from view-navigation
         (TABS) to action-launching (agents). */
      /* ──────────────────────────────────────────────────────────────
         HeaderAgentsTrigger — "AI Agents ▾" pill in the page header
         that opens a popover menu. Replaces the previous full-width
         AGENTS strip in the toolbar (Option-2 layout). Lives next to
         SessionBar (PSA / lens chips) inside .msp-header-controls.
         ────────────────────────────────────────────────────────────── */
      .msp-header-agents {
        position: relative;
        flex: 0 0 auto;
      }
      .msp-header-agents-trigger {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: 0.45rem 0.7rem;
        background: var(--bg);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        color: var(--text-secondary);
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.14em;
        text-transform: uppercase;
        cursor: pointer;
        transition: color 0.15s, border-color 0.15s, background 0.15s;
      }
      .msp-header-agents-trigger:hover,
      .msp-header-agents-trigger.is-open {
        color: var(--accent);
        border-color: var(--border-accent);
        background: var(--card);
      }
      .msp-header-agents-trigger.has-active {
        border-color: color-mix(in srgb, var(--agent-accent, var(--accent)) 60%, var(--border-subtle));
        color: var(--agent-accent, var(--accent));
      }
      .msp-header-agents-trigger-icon {
        display: inline-flex; align-items: center; justify-content: center;
        color: inherit;
      }
      .msp-header-agents-trigger-icon svg {
        width: 14px; height: 14px;
      }
      .msp-header-agents-trigger-label {
        font-weight: 500;
      }
      .msp-header-agents-trigger-chev {
        display: inline-flex;
        opacity: 0.7;
        transition: transform 160ms ease;
      }
      .msp-header-agents-trigger.is-open .msp-header-agents-trigger-chev {
        transform: rotate(-180deg);
      }
      /* Popover menu — anchored to the trigger, opens downward to the
         right edge of the header so the menu doesn't overflow on narrow
         viewports. Outside-click + Esc handled in the component. */
      .msp-header-agents-menu {
        position: absolute;
        top: calc(100% + 0.4rem);
        right: 0;
        min-width: 320px;
        max-width: 380px;
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        box-shadow: 0 18px 40px -10px rgba(0,0,0,0.28);
        z-index: 50;
        animation: mspAgentsMenuIn 160ms cubic-bezier(.2,.7,.3,1);
      }
      @keyframes mspAgentsMenuIn {
        from { opacity: 0; transform: translateY(-4px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      .msp-header-agents-menu-head {
        padding: var(--space-4) var(--space-4) var(--space-3);
        border-bottom: 1px solid var(--border-subtle);
        display: flex; flex-direction: column;
        gap: 0.2rem;
      }
      .msp-header-agents-menu-title {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 1rem;
        color: var(--text-primary);
      }
      .msp-header-agents-menu-sub {
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 0.78rem;
        color: var(--text-muted);
        line-height: 1.4;
      }
      .msp-header-agents-menu-list {
        display: flex; flex-direction: column;
        padding: var(--space-2);
        gap: 0.1rem;
      }
      .msp-header-agents-menu-item {
        display: flex; align-items: flex-start;
        gap: var(--space-3);
        padding: 0.55rem 0.7rem;
        background: transparent;
        border: 1px solid transparent;
        border-left: 2px solid var(--agent-accent, var(--accent));
        border-radius: 4px;
        cursor: pointer;
        text-align: left;
        color: var(--text-secondary);
        transition: background-color 80ms ease, color 80ms ease, border-color 80ms ease;
      }
      .msp-header-agents-menu-item:hover {
        background: color-mix(in srgb, var(--agent-accent, var(--accent)) 8%, transparent);
        color: var(--text-primary);
      }
      .msp-header-agents-menu-item.active {
        background: color-mix(in srgb, var(--agent-accent, var(--accent)) 14%, transparent);
        color: var(--agent-accent, var(--accent));
        border-color: color-mix(in srgb, var(--agent-accent, var(--accent)) 30%, var(--border-subtle));
      }
      .msp-header-agents-menu-item-icon {
        display: inline-flex; align-items: center; justify-content: center;
        flex: 0 0 auto;
        width: 22px; height: 22px;
        color: var(--agent-accent, var(--text-muted));
        margin-top: 0.05rem;
      }
      .msp-header-agents-menu-item-body {
        display: flex; flex-direction: column;
        gap: 0.15rem;
        min-width: 0;
      }
      .msp-header-agents-menu-item-label {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        font-weight: 600;
        color: inherit;
      }
      .msp-header-agents-menu-item-desc {
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 0.78rem;
        line-height: 1.4;
        color: var(--text-muted);
      }
      .msp-header-agents-menu-item.active .msp-header-agents-menu-item-desc {
        color: var(--text-secondary);
      }
      /* On narrow viewports anchor the menu to the right but allow it
         to span fuller width so it doesn't overflow the screen. */
      @media (max-width: 600px) {
        .msp-header-agents-menu {
          right: -0.5rem;
          min-width: 280px;
          max-width: calc(100vw - 1rem);
        }
      }

      /* ─── HeaderSetupTrigger ──────────────────────────────────────
         Visual cousin of HeaderAgentsTrigger. Pill trigger + popover
         containing a 3-step workflow pipeline. Step 1 (Import) and
         Step 2 (Customize) are clickable; Step 3 (Export) is a static
         reference pointing at the standalone Export PDF button. */
      .msp-header-setup {
        position: relative;
        display: inline-flex;
      }
      .msp-header-setup-trigger {
        display: inline-flex; align-items: center;
        gap: 0.4rem;
        padding: 0.45rem 0.85rem;
        font-family: inherit;
        font-size: 0.82rem;
        font-weight: 500;
        color: var(--text-primary);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 999px;
        cursor: pointer;
        transition: background 100ms, border-color 100ms, color 100ms;
        letter-spacing: 0.01em;
      }
      /* v3.20.2: hover/action recipe per design-system §8.5.
         is-open uses the same recipe so the dropdown trigger reads as
         "currently activated" with the same visual weight. */
      .msp-header-setup-trigger:hover,
      .msp-header-setup-trigger.is-open {
        background: color-mix(in srgb, var(--accent) 8%, var(--card));
        border-color: var(--border-accent);
        color: var(--accent);
      }
      .msp-header-setup-trigger.has-active {
        border-color: color-mix(in srgb, var(--accent) 40%, var(--border-subtle));
      }
      .msp-header-setup-trigger-icon {
        display: inline-flex; align-items: center; justify-content: center;
      }
      .msp-header-setup-trigger-icon svg {
        display: block;
      }
      .msp-header-setup-trigger-label {
        font-weight: 500;
      }
      .msp-header-setup-trigger-chev {
        display: inline-flex; align-items: center;
        transition: transform 120ms;
      }
      .msp-header-setup-trigger.is-open .msp-header-setup-trigger-chev {
        transform: rotate(180deg);
      }
      /* Popover — anchors right-aligned to the trigger so it doesn't
         overflow the viewport on narrow widths. Wider than the agents
         menu because step descriptions read at body width. */
      .msp-header-setup-menu {
        position: absolute;
        top: calc(100% + 0.4rem);
        right: 0;
        min-width: 360px;
        max-width: 440px;
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        box-shadow: 0 18px 40px -10px rgba(0,0,0,0.28);
        z-index: 50;
        animation: mspSetupMenuIn 160ms cubic-bezier(.2,.7,.3,1);
      }
      @keyframes mspSetupMenuIn {
        from { opacity: 0; transform: translateY(-4px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      .msp-header-setup-menu-head {
        padding: var(--space-4) var(--space-4) var(--space-3);
        border-bottom: 1px solid var(--border-subtle);
        display: flex; flex-direction: column;
        gap: 0.2rem;
      }
      .msp-header-setup-menu-title {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 1rem;
        color: var(--text-primary);
      }
      .msp-header-setup-menu-sub {
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 0.78rem;
        color: var(--text-muted);
        line-height: 1.4;
      }
      /* Pipeline body — each step is a row with a numbered circle on
         the left and a label+desc on the right. Vertical chevrons-down
         pseudo-element between steps so the workflow reads top→bottom. */
      .msp-header-setup-pipeline {
        display: flex; flex-direction: column;
        padding: var(--space-2);
        gap: 0.1rem;
      }
      .msp-header-setup-step {
        display: flex; align-items: flex-start;
        gap: var(--space-3);
        padding: 0.6rem 0.7rem;
        background: transparent;
        border: 1px solid transparent;
        border-left: 2px solid var(--border-subtle);
        border-radius: 4px;
        cursor: pointer;
        text-align: left;
        color: var(--text-secondary);
        font-family: inherit;
        font-size: inherit;
        transition: background-color 80ms ease, color 80ms ease, border-color 80ms ease;
        width: 100%;
      }
      .msp-header-setup-step:hover {
        background: color-mix(in srgb, var(--accent) 8%, transparent);
        color: var(--text-primary);
        border-left-color: var(--accent);
      }
      .msp-header-setup-step.is-complete {
        border-left-color: #4a8c3a;
      }
      .msp-header-setup-step.is-complete:hover {
        background: color-mix(in srgb, #4a8c3a 8%, transparent);
      }
      /* Static step 3 — non-interactive reference pointing at the
         Export PDF button. Muted, no hover, smaller padding. */
      .msp-header-setup-step-static {
        cursor: default;
        opacity: 0.78;
        border-top: 1px dashed var(--border-subtle);
        margin-top: 0.3rem;
        padding-top: 0.7rem;
      }
      .msp-header-setup-step-static:hover {
        background: transparent;
        color: var(--text-secondary);
        border-left-color: var(--border-subtle);
      }
      .msp-header-setup-step-num {
        flex: 0 0 auto;
        display: inline-flex; align-items: center; justify-content: center;
        width: 22px; height: 22px;
        border-radius: 50%;
        background: var(--bg);
        border: 1px solid var(--border-subtle);
        color: var(--text-muted);
        font-family: ui-monospace, monospace;
        font-size: 0.72rem;
        font-weight: 600;
        margin-top: 0.05rem;
      }
      .msp-header-setup-step.is-complete .msp-header-setup-step-num {
        background: #4a8c3a;
        border-color: #4a8c3a;
        color: #fff;
      }
      .msp-header-setup-step-body {
        display: flex; flex-direction: column;
        gap: 0.2rem;
        min-width: 0;
        flex: 1 1 auto;
      }
      .msp-header-setup-step-label {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        font-weight: 600;
        color: inherit;
        display: inline-flex; align-items: center;
        gap: 0.45rem;
      }
      .msp-header-setup-step-desc {
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 0.78rem;
        line-height: 1.4;
        color: var(--text-muted);
      }
      .msp-header-setup-step-desc strong {
        font-family: inherit;
        font-style: normal;
        color: var(--text-secondary);
      }
      .msp-header-setup-step-dot {
        width: 7px; height: 7px;
        border-radius: 50%;
        background: #4a8c3a;
        display: inline-block;
      }
      .msp-header-setup-step-tag {
        display: inline-block;
        padding: 0.05rem 0.4rem;
        margin-left: 0.2rem;
        border: 1px solid var(--border-subtle);
        border-radius: 3px;
        background: var(--bg);
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 0.65rem;
        text-transform: none;
        letter-spacing: 0;
        color: var(--text-muted);
        font-weight: 400;
      }
      @media (max-width: 600px) {
        .msp-header-setup-menu {
          right: -0.5rem;
          min-width: 300px;
          max-width: calc(100vw - 1rem);
        }
      }

      /* Toolbar — three FilterRows (CATALOG / ORGANIZATION / OPERATIONS)
         stacked. The FilterRow component handles its own vertical spacing
         via margin-bottom on .msp-filter-row. */
      .msp-toolbar {
        margin: 0 0 var(--space-2);
      }

      /* ─── Option 3: per-tab-row accent ─────────────────────────────
         Each row gets a faint left border + ultra-subtle background tint
         in a different muted hue, marking CATALOG / ORGANIZATION /
         OPERATIONS as three parallel sections. The row's label icon
         also picks up the accent so the visual identity is unified.

         Hues are warm-cream-compatible:
            CATALOG       → muted ochre  (#c69b5c) — knowledge layer
            ORGANIZATION  → muted slate  (#5c8db8) — structure
            OPERATIONS    → muted olive  (#7ba85c) — live activity   */
      .msp-toolbar > .msp-filter-row {
        --row-accent: var(--border-subtle);
        position: relative;
        padding-left: var(--space-3);
        border-left: 3px solid color-mix(in srgb, var(--row-accent) 60%, transparent);
        background: color-mix(in srgb, var(--row-accent) 4%, transparent);
        border-radius: 0 4px 4px 0;
        transition: background-color 160ms ease, border-color 160ms ease;
      }
      .msp-toolbar > .msp-filter-row:hover {
        background: color-mix(in srgb, var(--row-accent) 7%, transparent);
      }
      .msp-toolbar > .msp-filter-row:nth-of-type(1) { --row-accent: #c69b5c; }
      .msp-toolbar > .msp-filter-row:nth-of-type(2) { --row-accent: #5c8db8; }
      .msp-toolbar > .msp-filter-row:nth-of-type(3) { --row-accent: #7ba85c; }
      /* Tint the row label icon with the row's accent so eye-tracking
         is faster across the three sections. */
      .msp-toolbar > .msp-filter-row > .msp-row-label > .msp-row-label-icon {
        color: var(--row-accent);
      }

      /* ─── Option 3: tighter toolbar chip padding ──────────────────
         Scoped to .msp-toolbar so only navigation chips get the denser
         feel — filter chips and other chips elsewhere keep their
         original padding. ~15% reduction along both axes.

         Selector uses 3 classes (0,3,0 specificity) so the filter-chip
         tighten below (.msp-filter-row .pt-chip — 0,2,0) doesn't
         accidentally override these toolbar nav-chip styles, since the
         toolbar's nav rows ARE .msp-filter-row instances. */
      .msp-toolbar > .msp-filter-row .pt-chip {
        padding: 0.38rem 0.8rem;
        gap: 0.4rem;
        font-size: 0.82rem;
      }
      /* ─── Filter-chip tighten ───────────────────────────────────────
         Scoped to .msp-filter-row .pt-chip so all filter chip rows
         (BOARD/QUEUE, TYPE, PRIORITY, SUBTYPE, ISSUE TYPE, SUB-ISSUE
         TYPE, plus every secondary row) get a slightly denser feel.
         ~8% reduction off the original padding — gentle enough that
         chips don't feel cramped, but enough to fit BOARD/QUEUE's
         12-13 chips on a single row while filling the available width
         on a typical viewport. Font is kept at the original 0.84rem
         so legibility is fully preserved.

         Filters narrow data — they shouldn't compete with navigation
         for visual prominence, so a slight density bump here is the
         correct hierarchy. */
      .msp-filter-row .pt-chip {
        padding: 0.42rem 0.87rem;
        gap: 0.46rem;
        font-size: 0.84rem;
      }
      /* Slightly tighter inter-chip gap on the filter-row group — same
         scale-down as the chip's own padding for consistency. */
      .msp-filter-row .msp-filter-row-group {
        gap: 0.46rem;
      }
      .msp-input {
        width: 280px;
        max-width: 100%;
        background: var(--input-bg);
        border: 1px solid var(--border-subtle);
        color: var(--text-primary);
        padding: 0.5rem 0.85rem;
        border-radius: 4px;
        font-family: inherit; font-size: 0.88rem;
      }
      .msp-input:focus { outline: none; border-color: var(--border-accent); }

      /* Filter row layout — two-column flex (label column + body column).
         The body column is its own internal wrap-flex, so when chips wrap
         to a second line they stay indented under the first chip instead
         of running back to the container's left edge underneath the label. */
      .msp-filter-row {
        display: flex;
        align-items: flex-start;            /* label top-aligns with first chip row */
        gap: var(--space-2);
        margin: 0 0 var(--space-3);         /* tighter than before — 9 rows × 0.25rem saved */
        padding-left: 0.05rem;
      }
      /* v3.7.1: per-group color tokens. Each semantic group gets its own
         hue, applied to:
           - FilterTypeChips active state (chip bg + border)
           - chips-mode FilterGroupDivider (label + underline)
           - compact-mode .msp-compact-group-label (label + underline)
         All scoped via [data-group="..."]. Muted/mid-saturation so the
         color hints at grouping without screaming. Avoids clashing with
         existing semantic palettes (priority colors, board colors). */
      .msp-filter-group-divider[data-group="routing"],
      .msp-compact-group[data-group="routing"],
      .msp-filter-type-chip[data-group="routing"] {
        --group-color: #4476b8;  /* cool blue — wayfinding / where work lands */
      }
      .msp-filter-group-divider[data-group="classification"],
      .msp-compact-group[data-group="classification"],
      .msp-filter-type-chip[data-group="classification"] {
        --group-color: #c69b5c;  /* warm amber — categorization / labels */
      }
      .msp-filter-group-divider[data-group="urgency"],
      .msp-compact-group[data-group="urgency"],
      .msp-filter-type-chip[data-group="urgency"] {
        --group-color: #a3494a;  /* burgundy — intensity, distinct from priority red */
      }
      .msp-filter-group-divider[data-group="staffing"],
      .msp-compact-group[data-group="staffing"],
      .msp-filter-type-chip[data-group="staffing"] {
        --group-color: #7ba85c;  /* olive — people / org */
      }
      .msp-filter-group-divider[data-group="sort"],
      .msp-compact-group[data-group="sort"] {
        --group-color: #6e6e7d;  /* neutral gray — sort is meta, not a filter */
      }

      /* v3.6.3: FilterTypeChips — chip selector at the top of the FILTERS
         section. Each chip toggles visibility of one semantic group's
         filter rows. Hidden groups with active filters show a count badge
         so nothing silently filters in the background. */
      .msp-filter-types-row {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        margin: 0 0 0.5rem 0.05rem;
      }
      .msp-filter-types-label {
        flex: 0 0 8rem;
        padding-top: 0.1rem;
        font-size: var(--text-sm);
      }
      .msp-filter-types-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem;
        align-items: center;
      }
      .msp-filter-type-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.25rem 0.65rem;
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 12px;
        cursor: pointer;
        font-family: inherit;
        font-size: 0.75rem;
        letter-spacing: 0.04em;
        /* v3.25.0: the group color lives on the TEXT at rest — no background
           fill. The fill only appears on hover/active, matching the app's
           other buttons. (Replaces the v3.22.1 filled + translateY-lift
           hover the user flagged as "colored in" + "jumps".) */
        color: var(--group-color, var(--text-secondary));
        transition: background-color 140ms ease,
                    border-color 140ms ease,
                    color 140ms ease;
      }
      /* v3.25.0: hover reveals the group color as a light fill (same idea as
         the other chip/header buttons) — no lift, no shadow. */
      .msp-filter-type-chip:hover {
        background: color-mix(in srgb, var(--group-color, var(--accent)) 12%, var(--card));
        border-color: var(--group-color, var(--accent));
        color: var(--group-color, var(--accent));
      }
      .msp-filter-type-chip.active {
        /* Selected = persistent light fill in the group color (set via
           data-group) + bolder label. This is the one intentional "filled"
           state; rest stays text-only. */
        background: color-mix(in srgb, var(--group-color, var(--accent)) 14%, var(--card));
        border-color: var(--group-color, var(--accent));
        color: var(--group-color, var(--accent));
        font-weight: 600;
      }
      .msp-filter-type-chip.has-active:not(.active) {
        /* hidden group with active filters — accent-tinted left border in
           the group's color. */
        border-left-color: var(--group-color, var(--accent));
        border-left-width: 3px;
        padding-left: calc(0.65rem - 2px);
      }
      .msp-filter-type-chip-label {
        white-space: nowrap;
      }
      .msp-filter-type-chip-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.2rem;
        height: 1.2rem;
        padding: 0 0.3rem;
        /* v3.7.1: badge uses the group's color so the chip + count read
           as one semantic unit. */
        background: var(--group-color, var(--accent));
        color: #fff;
        border-radius: 8px;
        font-family: ui-monospace, monospace;
        font-size: 0.65rem;
        font-weight: 600;
        line-height: 1;
      }
      /* v3.6.2 GT1: FilterGroupDivider — left-aligned section heading in
         the row-label column. Previously a centered horizontal divider
         (v3.6.1) which fought with the fixed-width label column. Now reads
         as a heading above the filter rows, in the same x-position as the
         row labels (BOARD / TYPE / etc.) for top-down hierarchy.
         Cluster vocabulary: Routing / Classification / Urgency / Staffing. */
      .msp-filter-group-divider {
        display: flex;
        align-items: center;
        margin: 0.7rem 0 0.25rem 0.05rem;
        /* No left padding — sits flush with the row-label column origin
           (the 8rem label column starts at x = 0 of .msp-filter-row). */
        padding-left: 0;
      }
      .msp-filter-group-divider:first-of-type {
        margin-top: 0;
      }
      .msp-filter-group-divider-label {
        font-family: ui-monospace, monospace;
        font-size: 0.7rem;
        letter-spacing: 0.18em;
        /* v3.7.1: label color from the group's --group-color token (set
           via data-group). Falls back to text-secondary if unset. */
        color: var(--group-color, var(--text-secondary));
        text-transform: uppercase;
        font-weight: 600;
        white-space: nowrap;
        /* Border-bottom hairline visually anchors the heading to the
           filter rows it introduces. v3.7.1: underline also uses the
           group color for stronger visual grouping. */
        padding: 0.1rem 0 0.3rem 0;
        border-bottom: 1.5px solid color-mix(in srgb, var(--group-color, var(--border-subtle)) 70%, transparent);
        /* Width: fill the label column + a slight overlap into the chips
           column so the underline reads as a section bracket. */
        width: 11rem;
      }
      .msp-filter-group-divider-hint {
        opacity: 0.65;
        font-weight: 400;
        letter-spacing: 0.06em;
        text-transform: none;
        color: var(--text-muted);
      }
      /* v3.6.1 Q1 (compact-mode variant): inline group marker — vertical
         pipes + small uppercase label that sits between dropdown groups
         in the horizontal compact filter bar. */
      .msp-filter-group-inline {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        margin: 0 0.15rem;
        flex-shrink: 0;
      }
      .msp-filter-group-inline-rule {
        display: inline-block;
        width: 1px;
        height: 14px;
        background: var(--border-subtle);
        flex-shrink: 0;
      }
      .msp-filter-group-inline-label {
        font-family: ui-monospace, monospace;
        font-size: 0.62rem;
        letter-spacing: 0.14em;
        color: var(--text-muted);
        text-transform: uppercase;
        font-weight: 500;
        white-space: nowrap;
        opacity: 0.85;
      }
      /* Compact-filters bar wraps when narrow; the inline marker should
         flow with the wrap, not force a row break. align: center so the
         mark vertically centers with the dropdown buttons. */
      .msp-compact-filters {
        align-items: center;
      }
      /* v3.6.3 follow-up: groups sit SIDE-BY-SIDE and wrap horizontally
         so small groups (Routing with 1-2 dropdowns, Staffing with 1)
         don't each waste a full row. Each group is a vertical block
         (label above its own controls) but the container is a row-wrap
         flex so multiple groups share a row when there's space. Big
         groups (Classification with 6-8 dropdowns) naturally take more
         width; small groups cluster together. Gives the symmetric look
         the user requested while keeping labels above. */
      .msp-compact-filters.msp-compact-filters-stacked {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: 0.7rem;
        column-gap: 1.1rem;
      }
      .msp-compact-group {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        /* Don't force min-width — let each group size to its content. */
        flex: 0 1 auto;
        min-width: 0;
      }
      .msp-compact-group-label {
        font-family: ui-monospace, monospace;
        font-size: 0.7rem;
        letter-spacing: 0.18em;
        /* v3.7.1: label color from the group's --group-color token (set
           via data-group). Falls back to text-secondary if unset. */
        color: var(--group-color, var(--text-secondary));
        text-transform: uppercase;
        font-weight: 600;
        padding: 0.1rem 0 0.2rem 0;
        /* v3.7.1: underline uses the group color at 70% mix for stronger
           visual grouping than the v3.6.3 hairline. */
        border-bottom: 1.5px solid color-mix(in srgb, var(--group-color, var(--border-subtle)) 70%, transparent);
        /* No fixed width — track the controls below. */
        width: 100%;
        flex: 0 0 auto;
      }
      .msp-compact-group-controls {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        align-items: center;
      }
      .msp-row-label {
        display: inline-flex; align-items: center;
        gap: 0.4rem;
        font-family: ui-monospace, monospace;
        font-size: var(--text-sm); letter-spacing: 0.16em;
        color: var(--text-secondary); text-transform: uppercase;
        font-weight: 500;
      }
      /* Outer row label (direct child of .msp-filter-row): a FIXED-WIDTH
         column sized for the longest label ("TICKET TYPE" with icon ≈
         7.7rem). Fixed width — not min-width — so every row's label takes
         the same horizontal space and the All chip after it lands at the
         same x-position in every row. Visual symmetry across the menu. */
      .msp-filter-row > .msp-row-label {
        flex: 0 0 8rem;
        padding-top: 0.55rem;
      }
      .msp-filter-row-body {
        flex: 1 1 auto;
        min-width: 0;
        display: flex; flex-direction: column;
        gap: var(--space-1);
      }
      /* The chips strip — clear chip on the left (if any), then a wrap-group
         for the actual filter chips. The clear chip sits outside the group
         so it stays on line 1 and never appears under wrapped rows. */
      .msp-filter-row-chips {
        display: flex;
        align-items: flex-start;
        gap: var(--space-2);
      }
      .msp-filter-row-clear {
        flex: 0 0 auto;
        /* Top-align with the first row of wrapped chips so the clear chip
           and the first chip in the group sit on the same baseline. */
      }
      .msp-filter-row-group {
        flex: 1 1 auto;
        min-width: 0;
        display: flex; flex-wrap: wrap;
        gap: var(--space-2);
        align-items: center;
      }
      /* Continuation row — used by TABS row 2 (customer-side chips).
         Empty label cell preserves the 8rem grid alignment with row 1
         while tightening the vertical gap so the two rows read as a
         single visual unit anchored by the "TABS" label on row 1. */
      .msp-filter-row-continuation {
        margin-top: calc(-1 * var(--space-2));
      }
      /* Hairline divider between sub-groups within a single chip row.
         No longer used by TABS (replaced with explicit sub-labels) but
         kept available for any future row that needs inline grouping. */
      .msp-tab-divider {
        display: inline-block;
        align-self: stretch;
        width: 1px;
        min-height: 1.4em;
        margin: 0 var(--space-2);
        background: var(--border-subtle);
        flex: 0 0 auto;
      }
      /* .msp-tabs-sublabel removed in Option-2: CATALOG / ORGANIZATION
         / OPERATIONS were promoted from inline chip-row sub-labels to
         proper FilterRow labels, so this class is no longer referenced
         by any JSX. */
      /* Section header — standalone row that carries a section title
         (FILTERS today; potential future sections). Uses the same label
         column-width as filter rows so the title aligns vertically with
         TABS / AI AGENTS / LAYOUT labels above it. Hairline rule above
         marks the section boundary. */
      .msp-section-header {
        display: flex; align-items: center;
        gap: var(--space-3);
        padding-top: var(--space-3);
        margin: var(--space-2) 0 var(--space-3);
        border-top: 1px dashed var(--border-subtle);
      }
      .msp-section-header .msp-row-label {
        flex: 0 0 8rem;
      }
      /* v3.11.9: FILTERS section header carries the FilterTypeChips
         inline (Routing / Classification / Urgency / Staffing). At wide
         viewports everything sits on one row; at narrow viewports the
         row wraps so the chips drop below the label-summary line
         instead of pushing the section-summary off-screen. */
      .msp-section-header-filters {
        flex-wrap: wrap;
        row-gap: var(--space-2);
      }
      /* When FilterTypeChips renders inline (inside the section header)
         instead of as its own row, the chips group can shrink to fit
         and the section-summary stays right-aligned in the available
         space. Without the explicit flex hint the chips fight with
         the summary for grow space. */
      .msp-filter-types-chips-inline {
        flex: 0 1 auto;
        /* Slight nudge to push the chips away from the FILTERS label
           and visually separate them from the summary that follows. */
        margin-left: calc(var(--space-1, 0.25rem) * -1);
      }
      /* Section-level summary — mirrors the MORE row's "N filters active"
         affordance so the primary FILTERS section gets the same at-a-
         glance count. Sits between the label and the Clear-All button.
         Inherits typography from .msp-more-filters-summary; the
         placeholder fades when no filters are active so the row reads
         calm but the slot remains so layout never jitters. */
      .msp-section-summary {
        flex: 1 1 auto;
      }
      .msp-section-summary-placeholder {
        opacity: 0.5;
      }
      /* Clear-all-filters button — sits trailing the FILTERS section
         summary, always mounted to anchor row height. When no filters
         are active the button is hidden via visibility:hidden so its
         footprint is reserved but it stays out of the user's way.
         Matches the chip visual rhythm (border, padding, font) but
         with a warmer accent treatment so it reads as an action. */
      .msp-clear-filters {
        flex: 0 0 auto;
        display: inline-flex; align-items: center;
        gap: var(--space-2);
        padding: 0.3rem 0.7rem;
        font-family: var(--font-mono, "JetBrains Mono", monospace);
        font-size: var(--text-xs);
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-secondary);
        background: var(--chip-bg);
        border: 1px solid var(--border-subtle);
        border-radius: 999px;
        cursor: pointer;
        transition: color 0.15s, border-color 0.15s, background 0.15s;
      }
      .msp-clear-filters:hover {
        color: var(--accent);
        border-color: var(--border-accent);
        background: var(--card);
      }
      .msp-clear-filters svg {
        width: 12px; height: 12px;
        stroke-width: 2.25;
        opacity: 0.8;
      }
      .msp-clear-filters-count {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 1.25rem; height: 1.25rem;
        padding: 0 0.35rem;
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--card);
        background: var(--accent);
        border-radius: 999px;
      }

      /* TABS row trailing — wraps the search input and the filters-mode
         toggle button as a paired control group. */
      .msp-toolbar-trailing {
        display: flex; align-items: center;
        gap: var(--space-2);
      }
      /* Filters-density toggle — icon button that flips between chips
         and compact modes. Matches the chip styling for visual
         consistency with neighboring controls. */
      .msp-filters-mode-toggle {
        /* Pill-shaped with icon + mode-name label so users can read the
           current state at a glance ("Chips" or "Compact"). Same overall
           visual weight as the Clear All button so they read as a pair. */
        display: inline-flex; align-items: center; justify-content: center;
        gap: var(--space-2);
        height: 32px;
        padding: 0 0.7rem;
        background: transparent;
        color: var(--text-muted);
        border: 1px solid var(--border-subtle);
        border-radius: 999px;
        cursor: pointer;
        transition: background-color 80ms ease, color 80ms ease, border-color 80ms ease;
      }
      .msp-filters-mode-toggle:hover {
        background: var(--chip-bg);
        color: var(--text-primary);
        border-color: var(--border-accent);
      }
      /* v3.22.1: density toggle has IDENTICAL chrome in both modes.
         The label (Chips / Compact) communicates which mode is active.
         Previously the Compact state used .active styling (accent-tinted
         bg + border) while Chips used the base muted styling — that
         asymmetry made "Chips" feel like a deselected state. Drop the
         differential; the button always looks like a button. */
      .msp-filters-mode-toggle svg {
        width: 14px; height: 14px;
        opacity: 0.8;
      }
      .msp-filters-mode-toggle-label {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        font-weight: 500;
      }
      /* Collapse to icon-only on narrow viewports so the FILTERS header
         doesn't wrap awkwardly. */
      @media (max-width: 600px) { /* phone — consolidated from 560 (#284) */
        .msp-filters-mode-toggle-label {
          display: none;
        }
        .msp-filters-mode-toggle {
          width: 32px;
          padding: 0;
          gap: 0;
        }
      }

      /* ─── CompactFilters layout ───────────────────────────────────────
         Flex-wrap grid of dropdowns. Each control auto-sizes to its
         content; rows wrap naturally. Replaces what would otherwise be
         4-9 chip rows with 1-2 dense rows of dropdowns. */
      .msp-compact-filters {
        display: flex; flex-wrap: wrap;
        gap: var(--space-2) var(--space-3);
        margin: 0 0 var(--space-3);
        padding: var(--space-3);
        background: var(--bg);
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
        align-items: flex-end;
      }
      /* Sort direction toggle — small button beside the SORT dropdown
         when a sort dimension is active. Keeps the binary-toggle pattern
         from chips mode so users can flip asc/desc without re-opening a
         dropdown. */
      .msp-compact-sort-dir {
        display: inline-flex; align-items: center;
        gap: 0.4rem;
        padding: 0.4rem 0.7rem;
        margin-bottom: 1px;
        background: var(--chip-bg);
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
        cursor: pointer;
        font-family: inherit;
        color: var(--text-secondary);
        align-self: flex-end;
      }
      .msp-compact-sort-dir:hover {
        border-color: var(--border-accent);
        color: var(--text-primary);
      }
      .msp-compact-sort-dir-arrow {
        font-size: 0.85rem;
        font-family: ui-monospace, monospace;
      }
      .msp-compact-sort-dir-label {
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-xs);
        opacity: 0.85;
      }

      /* ─── SearchableSelect — typeahead dropdown ──────────────────────
         Closed: pill-style button with a label-above-control rhythm.
         Open: panel below with an autofocused search input + filtered
         options list. Matches the elegant-reference-book visual language
         (subtle borders, restrained hover states, mono labels). */
      .msp-ss {
        display: inline-flex; flex-direction: column;
        gap: 0.35rem;
        min-width: 13rem;
        max-width: 24rem;
        position: relative;
      }
      .msp-ss-label {
        display: inline-flex; align-items: center;
        gap: 0.35rem;
        font-family: ui-monospace, monospace;
        font-size: var(--text-sm);
        letter-spacing: 0.1em;
        color: var(--text-secondary);
        text-transform: uppercase;
        font-weight: 500;
      }
      .msp-ss-label-icon {
        display: inline-flex;
        opacity: 0.8;
      }
      .msp-ss-control {
        display: inline-flex; align-items: center;
        gap: var(--space-2);
        padding: 0.6rem 0.85rem;
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 5px;
        cursor: pointer;
        text-align: left;
        font-family: inherit;
        color: var(--text-primary);
        transition: border-color 80ms ease, background-color 80ms ease;
        min-width: 0;
      }
      .msp-ss-control:hover {
        border-color: var(--border-accent);
      }
      .msp-ss.open .msp-ss-control,
      .msp-ss.has-value .msp-ss-control {
        border-color: color-mix(in srgb, var(--accent) 50%, var(--border-subtle));
        background: color-mix(in srgb, var(--accent) 6%, var(--card));
      }
      .msp-ss-value {
        display: inline-flex; align-items: center;
        gap: 0.45rem;
        flex: 1 1 auto;
        min-width: 0;
        font-size: var(--text-base);
      }
      .msp-ss-value-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .msp-ss-placeholder {
        color: var(--text-muted);
        font-style: italic;
      }
      .msp-ss-dot {
        width: 10px; height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .msp-ss-caret {
        flex-shrink: 0;
        color: var(--text-muted);
        transition: transform 120ms ease;
      }
      .msp-ss.open .msp-ss-caret {
        transform: rotate(180deg);
        color: var(--accent);
      }
      /* v3.25.0: compact variant for the view bar (Sort + inline filters).
         Denser control to sit alongside the mode chips; the dropdown panel
         is unchanged so it still matches the FILTERS-band dropdowns. */
      .msp-ss-compact {
        min-width: 11rem;
        max-width: 20rem;
        gap: 0;
      }
      .msp-ss-compact .msp-ss-control {
        padding: 0.32rem 0.6rem;
        border-radius: 4px;
      }
      .msp-ss-compact .msp-ss-value {
        font-size: var(--text-sm);
      }
      .msp-ss-compact .msp-ss-caret {
        width: 12px; height: 12px;
      }

      .msp-ss-panel {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        z-index: 50;
        min-width: 16rem;
        max-height: 22rem;
        display: flex; flex-direction: column;
        background: var(--card);
        border: 1px solid var(--border-accent);
        border-radius: 6px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
        overflow: hidden;
      }
      .msp-ss-search {
        display: flex; align-items: center;
        gap: 0.5rem;
        padding: 0.55rem 0.75rem;
        border-bottom: 1px solid var(--border-subtle);
        background: var(--bg);
        flex-shrink: 0;
      }
      .msp-ss-search-icon {
        color: var(--text-muted);
        flex-shrink: 0;
      }
      .msp-ss-search-input {
        flex: 1 1 auto;
        min-width: 0;
        border: none;
        background: transparent;
        font: inherit;
        font-size: var(--text-base);
        color: var(--text-primary);
        outline: none;
      }
      .msp-ss-search-input::placeholder {
        color: var(--text-muted);
        font-style: italic;
      }
      .msp-ss-search-clear {
        background: transparent;
        border: none;
        cursor: pointer;
        font-size: 1.1rem;
        line-height: 1;
        color: var(--text-muted);
        padding: 0 0.25rem;
      }
      .msp-ss-search-clear:hover {
        color: var(--accent);
      }
      .msp-ss-options {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 0.2rem 0;
      }
      .msp-ss-option {
        display: flex; align-items: center;
        gap: 0.55rem;
        width: 100%;
        padding: 0.5rem 0.85rem;
        background: transparent;
        border: none;
        cursor: pointer;
        text-align: left;
        font-family: inherit;
        font-size: var(--text-base);
        color: var(--text-primary);
        line-height: 1.35;
      }
      .msp-ss-option:hover,
      .msp-ss-option.highlighted {
        background: var(--chip-bg);
      }
      .msp-ss-option.selected {
        background: color-mix(in srgb, var(--accent) 10%, transparent);
        color: var(--accent);
        font-weight: 500;
      }
      .msp-ss-option-all {
        font-style: italic;
        border-bottom: 1px dashed var(--border-subtle);
        margin-bottom: 0.2rem;
      }
      .msp-ss-option-label {
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .msp-ss-option-dot {
        width: 10px; height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .msp-ss-option-count {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        flex-shrink: 0;
      }
      .msp-ss-empty {
        padding: var(--space-3);
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-sm);
        color: var(--text-muted);
        text-align: center;
      }
      /* Trailing slot — docked at the far right of the row. Used by the
         TABS row to host the search input without making it flow with
         the view chips. margin-left: auto pushes it to the right edge
         even if the chip group has unused horizontal space. */
      .msp-filter-row-trailing {
        flex: 0 0 auto;
        margin-left: auto;
        display: flex; align-items: center;
        padding-left: var(--space-3);
      }
      .msp-filter-row-hint {
        font-style: italic;
        font-size: 0.78rem;
        color: var(--text-muted);
        padding-left: 0.05rem;
      }
      .msp-row-label-icon {
        display: inline-flex; align-items: center;
        color: var(--text-muted);
      }
      .msp-separator {
        width: 1px; height: 20px; background: var(--border-subtle);
        margin: 0 0.75rem;                  /* slightly more breathing room around inline sub-label dividers */
      }

      /* ---------- MORE filters toggle row ----------
         Styled to read like a FilterRow but the whole row is a single
         clickable button. The label column carries a caret icon that
         rotates when expanded; the body shows status text (count of
         active filters or a show/hide affordance). */
      .msp-more-filters-row {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        width: 100%;
        margin: 0 0 var(--space-3);
        padding: var(--space-2) 0;
        background: transparent;
        border: none;
        border-top: 1px dashed var(--border-subtle);
        border-bottom: 1px dashed var(--border-subtle);
        cursor: pointer;
        font-family: inherit;
        color: var(--text-secondary);
        transition: background-color 120ms ease, color 120ms ease;
      }
      .msp-more-filters-row:hover {
        background: color-mix(in srgb, var(--accent) 4%, transparent);
        color: var(--text-primary);
      }
      .msp-more-filters-row .msp-row-label {
        /* Match the same fixed-width label column as FilterRow so the
           toggle aligns vertically with all the chip rows above. */
        flex: 0 0 8rem;
        padding-top: 0;
      }
      .msp-more-filters-summary {
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 0.85rem;
        color: var(--text-muted);
      }
      .msp-more-filters-summary strong {
        font-family: ui-monospace, monospace;
        font-style: normal;
        font-weight: 600;
        color: var(--accent);
        margin: 0 0.15rem;
      }
      .msp-more-filters-row.expanded .msp-more-filters-summary {
        color: var(--text-secondary);
      }

      .pt-chip {
        display: inline-flex; align-items: center; gap: 0.5rem;
        padding: 0.46rem 0.95rem; border-radius: 999px;
        border: 1px solid var(--border-subtle);
        background: var(--chip-bg);
        font-size: 0.84rem; letter-spacing: 0.04em;
        cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
        color: var(--text-secondary); font-family: 'Fraunces', serif;
      }
      .pt-chip:hover {
        border-color: var(--border-accent);
        color: var(--text-primary);
        background: color-mix(in srgb, var(--accent) 8%, var(--chip-bg));
      }
      .pt-chip.active {
        background: color-mix(in srgb, var(--accent) 14%, transparent);
        border-color: var(--border-accent);
        color: var(--text-primary);
      }
      .pt-chip.active:hover {
        background: color-mix(in srgb, var(--accent) 20%, transparent);
      }
      .pt-chip-dot { width: 8px; height: 8px; border-radius: 50%; }

      /* ---------- Tree ---------- */
      .msp-tree { margin-top: 1.4rem; }
      .msp-tree-board { margin-bottom: 0.8rem; }
      .msp-tree-row {
        width: 100%; text-align: left;
        display: flex; align-items: center; gap: 0.55rem;
        padding: 0.55rem 0.85rem;
        background: transparent; border: none; cursor: pointer;
        font-family: inherit; color: var(--text-primary);
        border-radius: 4px;
        transition: background 120ms ease;
      }
      .msp-tree-row:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
      .msp-tree-board-row {
        font-size: 1.18rem; font-style: italic;
        background: color-mix(in srgb, var(--card) 60%, transparent);
        border-bottom: 1px solid var(--border-subtle);
        border-radius: 0;
      }
      .msp-tree-type-row { padding-left: 2rem; font-size: 1.02rem; color: var(--text-primary); }
      .msp-tree-subtype-row { padding-left: 3.4rem; font-size: 0.92rem; color: var(--text-secondary); }
      .msp-tree-item-row {
        padding-left: 4.8rem; font-size: 0.9rem; color: var(--text-primary);
        border-left: 1px solid transparent;
      }
      .msp-tree-item-row.selected,
      .msp-tree-item-row:hover {
        background: color-mix(in srgb, var(--accent) 10%, transparent);
      }
      .msp-tree-label { font-weight: 500; }
      .msp-tree-count {
        font-family: ui-monospace, monospace;
        font-size: 0.7rem; color: var(--text-muted);
        margin-left: auto; padding: 0.05rem 0.45rem;
        border: 1px solid var(--border-subtle);
        border-radius: 999px;
        flex-shrink: 0;
      }
      .msp-tree-board-row .msp-tree-count {
        background: color-mix(in srgb, var(--accent) 8%, transparent);
        color: var(--text-secondary);
      }
      .msp-tree-desc {
        font-size: 0.78rem; font-style: italic; color: var(--text-muted);
        margin-left: 1rem; flex: 1; overflow: hidden;
        text-overflow: ellipsis; white-space: nowrap;
      }
      .msp-tree-item-name { flex: 1; }
      .msp-tree-meta {
        font-family: ui-monospace, monospace; font-size: 0.7rem;
        color: var(--text-muted); margin-left: 0.6rem;
      }
      .msp-tree-meta-key { color: var(--text-muted); opacity: 0.7; margin-right: 0.2rem; }

      .msp-priority-badge {
        font-family: ui-monospace, monospace;
        font-size: 0.62rem; letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 0.1rem 0.5rem;
        border: 1px solid;
        border-radius: 999px;
        flex-shrink: 0;
      }

      /* ---------- Sort view ---------- */
      .msp-sort-view { margin-top: 1.4rem; }
      .msp-sort-header { margin-bottom: 0.6rem; }
      .msp-section-h2 { font-size: 1.42rem; font-weight: 400; font-style: italic; margin: 0 0 0.3rem; }
      .msp-section-meta { font-size: 0.66rem; letter-spacing: 0.16em; color: var(--accent); }
      .msp-sort-section {
        margin-bottom: 2rem;
        border-top: 1px solid var(--border-subtle);
        padding-top: 1.1rem;
      }
      .msp-sort-section-head {
        display: flex; gap: 0.8rem; align-items: baseline; flex-wrap: wrap;
        margin-bottom: 0.4rem;
      }
      .msp-section-h3 { font-size: 1.22rem; font-weight: 400; font-style: italic; margin: 0; }
      .msp-section-desc {
        font-size: 0.86rem; color: var(--text-secondary); font-style: italic;
        margin: 0 0 0.95rem; max-width: 64ch; line-height: 1.5;
      }
      .msp-sort-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 0.55rem;
      }
      .msp-sort-card {
        text-align: left; cursor: pointer;
        background: color-mix(in srgb, var(--card) 65%, transparent);
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
        padding: 0.65rem 0.85rem 0.7rem;
        font-family: inherit; color: var(--text-primary);
        transition: border-color 140ms ease, background 140ms ease;
      }
      .msp-sort-card:hover {
        border-color: var(--border-accent);
      }
      .msp-sort-card.selected {
        border-color: var(--border-accent);
        background: color-mix(in srgb, var(--accent) 8%, var(--card));
      }
      .msp-sort-card-head { display: flex; justify-content: space-between; align-items: baseline; }
      .msp-sort-card-corner { font-size: 0.78rem; color: var(--accent); }
      .msp-sort-card-item { font-size: 1rem; margin: 0.25rem 0 0.05rem; line-height: 1.3; }
      .msp-sort-card-sub { font-size: 0.78rem; color: var(--text-muted); font-style: italic; }
      .msp-sort-card-foot { display: flex; gap: 0.4rem; margin-top: 0.4rem; align-items: center; }
      .msp-sort-meta { font-family: ui-monospace, monospace; font-size: 0.72rem; color: var(--text-muted); }

      .msp-board-tag {
        font-family: ui-monospace, monospace;
        font-size: 0.66rem; letter-spacing: 0.14em;
        text-transform: uppercase; font-weight: 500;
      }

      /* ---------- Table ---------- */
      .msp-table-wrap { margin-top: 1.4rem; }
      /* CSV export affordance (audit lighter backlog) — a subtle right-aligned
         button above every DataTable. Exports the current sort + filter set. */
      .msp-table-export-bar {
        /* v4.3.3: tight gaps above + below the Export button. The 8px ABOVE is the
           toolbar's own bottom margin (margins collapse in the block parent), so a
           small NEGATIVE top margin tucks the bar up against the toolbar → nets ~4px
           (safe: nothing sticky sits above it). The BELOW gap stays a small POSITIVE
           value — the original was negative there, which rode the table's sticky
           header up under the button (overlap), and v4.3.2 over-corrected to space-2
           (too much dead space). Result: ~4px each side, no overlap. */
        display: flex; justify-content: flex-end;
        margin: calc(-1 * var(--space-1)) 0 var(--space-1);
      }
      /* v4.3.3: DataTable views (Tools/Skills/Vendors/… — the shared <DataTable>)
         are flex-column with a var(--space-5) (24px) row gap, AND the table wrapper
         carries its own top margin. So the export bar otherwise eats a full gap on
         EACH side + that wrap margin = ~36px above / ~50px below of dead space.
         Counteract for the gapped (flex) context only: pull the bar up into the gap
         above, eat the gap below, zero the wrap's redundant top margin, and drop the
         filterblock's bottom margin when it directly precedes the bar. Nets ~4px each
         side, no overlap. (Records' parent is block-flow — it uses the base rule.) */
      .msp-filterblock:has(+ .msp-table-export-bar--gapped) { margin-bottom: 0; }
      .msp-table-export-bar--gapped {
        margin-top: calc(var(--space-1) - var(--space-5));  /* 4 - 24 = -20px */
        margin-bottom: calc(-1 * var(--space-5));            /* -24px */
      }
      .msp-table-export-bar--gapped + .msp-table-wrap { margin-top: var(--space-1); }
      .msp-table-export-btn {
        display: inline-flex; align-items: center; gap: 0.4em;
        padding: 0.3rem 0.72rem; font-size: 0.78rem; font-family: inherit;
        color: var(--text-secondary); background: var(--card);
        border: 1px solid var(--border-subtle); border-radius: var(--radius-pill, 999px);
        cursor: pointer; transition: color 0.12s, border-color 0.12s, background 0.12s;
      }
      .msp-table-export-btn:hover {
        color: var(--accent);
        border-color: color-mix(in srgb, var(--accent) 40%, var(--border-subtle));
        background: color-mix(in srgb, var(--accent) 8%, var(--card));
      }
      .msp-table-export-btn:focus-visible {
        outline: 2px solid var(--accent); outline-offset: 2px;
      }
      .msp-table-toolbar {
        display: flex; justify-content: space-between; align-items: center;
        gap: var(--space-3); flex-wrap: wrap;
        margin-bottom: var(--space-2);
      }
      .msp-table-actions {
        display: flex; align-items: center;
        gap: var(--space-3);
      }
      /* Column-preset selector — small inline dropdown styled to read as
         a session-config affordance (not a primary action). */
      .msp-table-preset-label {
        display: inline-flex; align-items: center;
        gap: 0.4rem;
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .msp-table-preset-label-text {
        font-weight: 600;
      }
      .msp-table-preset-select {
        font-family: inherit;
        font-size: 0.78rem;
        padding: 0.25rem 0.4rem;
        border: 1px solid var(--border-subtle);
        background: var(--card);
        color: var(--text-primary);
        border-radius: 4px;
        cursor: pointer;
        letter-spacing: 0.04em;
        text-transform: none;
      }
      .msp-table-preset-select:hover,
      .msp-table-preset-select:focus {
        border-color: var(--accent);
        outline: none;
      }
      .msp-table-sort-hint {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .msp-table-sort-hint strong {
        color: var(--text-secondary);
        font-weight: 600;
      }
      .msp-table-reset {
        font-size: var(--text-xs);
      }
      .msp-hint {
        font-size: 0.85rem; color: var(--text-muted); font-style: italic;
        margin: 0;
      }
      /* ProvenanceNote (audit P0.3) — honest "[confidence] · as of <date> · <caveat>"
         label for synthetic numbers. Flows inline as text (wraps naturally). */
      .msp-provenance {
        margin: var(--space-3) 0 0;
        font-size: 0.74rem; color: var(--text-muted); line-height: 1.6;
      }
      .msp-provenance-pill {
        display: inline-flex; align-items: center; gap: 0.32em;
        padding: 0.05rem 0.46rem; border-radius: var(--radius-pill, 999px);
        font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.04em; white-space: nowrap; vertical-align: middle;
        border: 1px solid color-mix(in srgb, var(--prov-tone) 35%, transparent);
        background: color-mix(in srgb, var(--prov-tone) 12%, var(--card));
        color: var(--prov-tone);
      }
      .msp-provenance-dot {
        width: 0.42em; height: 0.42em; border-radius: 50%;
        background: var(--prov-tone);
      }
      .msp-provenance-pill--success { --prov-tone: var(--success); }
      .msp-provenance-pill--accent  { --prov-tone: var(--accent); }
      .msp-provenance-pill--warn    { --prov-tone: var(--warn); }
      .msp-provenance-pill--muted   { --prov-tone: var(--text-muted); }
      .msp-provenance-asof {
        font-family: var(--font-mono, monospace); font-size: 0.7rem;
        color: var(--text-muted); white-space: nowrap; vertical-align: middle;
      }
      .msp-provenance-caveat { font-style: italic; color: var(--text-secondary); }
      .msp-table-scroll {
        overflow-x: auto;
        overflow-y: auto;
        /* Bound the table height so very large result sets get a vertical
           scrollbar instead of pushing the page footer off-screen. */
        max-height: min(72vh, 720px);
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
      }
      /* v3.1.4: .msp-table now references the canonical --table-*
         tokens defined in :root. Same baseline as .msp-tickets-table.
         Adding a new table? Wrap with DataTable or copy this rule. */
      .msp-table {
        width: 100%; border-collapse: separate; border-spacing: 0;
        font-family: ui-monospace, monospace;
        font-size: var(--table-body-font);
        table-layout: fixed;
      }
      /* Phone: table-layout:fixed + width:100% squeezes every column into the
         viewport (cols collapse to ~36-60px) so .msp-table-scroll's overflow-x
         has nothing to scroll — the user "can't scroll inside the tables".
         Switch to content sizing with a max-content floor: columns take their
         natural widths and the wrapper scrolls horizontally. Narrow tables
         (max-content < viewport) still fill 100% — min-width never shrinks. */
      @media (max-width: 600px) {
        .msp-table { table-layout: auto; min-width: max-content; }
      }
      .msp-table th {
        text-align: left;
        padding: var(--table-header-pad-y) var(--table-header-pad-x);
        background: color-mix(in srgb, var(--accent) 7%, var(--card));
        /* Sticky header so the columns stay visible while scrolling.
           border-collapse: separate keeps the sticky border from disappearing
           during scroll (a known browser quirk). */
        position: sticky; top: 0; z-index: 3;
        border-bottom: 1px solid var(--border-subtle);
        border-right: 1px solid var(--border-subtle);
        /* Bolder + warmer color makes the header read as a clear title row
           rather than fading into the chrome. */
        color: var(--text-primary);
        font-weight: 700; letter-spacing: 0.06em;
        font-size: var(--table-header-font);
        text-transform: uppercase;
        /* L-13 + L-17: header labels wrap at word boundaries only — they
           must NEVER fragment a single word into stacked characters
           ("LEVEL" → L / E / V / E / L). word-break: keep-all keeps
           single words intact even when the column is narrow; the word
           will get clipped (not stacked) when it can't fit. Compound
           headers like "RESOLVE (HRS)" still wrap cleanly at the space. */
        white-space: normal;
        line-height: 1.18;
        vertical-align: middle;
        word-break: keep-all;
        overflow-wrap: normal;
        hyphens: manual;
        overflow: hidden;
      }
      .msp-table th:last-child,
      .msp-table td:last-child { border-right: none; }
      /* v3.98 — trailing flex SPACER column. Every real column now resolves to
         a concrete width (no `auto` flex); this single `auto` column absorbs the
         leftover so the table fills its container WITHOUT ballooning individual
         columns or collapsing any of them to 0. It carries no content, no
         resizer, and no sort — a pure layout filler. The header spacer keeps the
         sticky header bar extending to the right edge; the body spacer rides the
         row-hover background so the row reads as one continuous strip. */
      .msp-table th.msp-table-th-spacer,
      .msp-table td.msp-table-spacer,
      .msp-tickets-table th.msp-table-th-spacer,
      .msp-tickets-table td.msp-table-spacer {
        padding: 0;
        border-right: none;
      }
      .msp-table th.msp-table-th-spacer,
      .msp-tickets-table th.msp-table-th-spacer { cursor: default; }
      .msp-table th.msp-table-th-spacer:hover,
      .msp-tickets-table th.msp-table-th-spacer:hover {
        /* stay inert — match the resting header background (no hover lift) */
        background: color-mix(in srgb, var(--accent) 7%, var(--card));
      }
      /* Row-number column — narrow, monospace, muted. Sticky on the left
         (in addition to sticky on top for the header) so the row number
         stays visible during horizontal scroll across the 25+ data columns.
         v3.11.9: selectors qualified with .msp-table th / .msp-table td
         to lift specificity above the parent .msp-table th / .msp-table td
         padding shorthand — without this, the parent 0.9rem horizontal
         padding (~14.4px each side) wins and consumes the 36px column
         leaving ~7px for the digit, which clips under overflow:hidden.
         The tighter padding here (0.4rem + 0.2rem ≈ 9.6px total) leaves
         ~26px of content area — enough for "999" in 0.72rem monospace. */
      .msp-table th.msp-table-th-rownum,
      .msp-table td.msp-table-rownum {
        text-align: right;
        color: var(--text-muted);
        font-family: ui-monospace, monospace;
        font-size: 0.72rem;
        padding-top: var(--table-body-pad-y);
        padding-bottom: var(--table-body-pad-y);
        padding-right: 0.4rem;
        padding-left: 0.2rem;
        background: color-mix(in srgb, var(--accent) 4%, var(--card));
        position: sticky;
        left: 0;
        z-index: 2;  /* above other tbody cells, below the thead */
      }
      .msp-table th.msp-table-th-rownum {
        cursor: default !important;
        background: color-mix(in srgb, var(--accent) 10%, var(--card));
        /* Corner cell: sticky-top + sticky-left → highest z-index so it
           covers BOTH the row underneath (sticky col) and the rownum td
           that scrolls past it (sticky row). */
        z-index: 4;
        padding-top: var(--table-header-pad-y);
        padding-bottom: var(--table-header-pad-y);
      }
      .msp-table th.msp-table-th-rownum:hover {
        background: color-mix(in srgb, var(--accent) 10%, var(--card));
      }
      .msp-table td.msp-table-rownum {
        font-weight: 500;
        user-select: none;
      }
      .msp-table tr:hover td.msp-table-rownum {
        background: color-mix(in srgb, var(--accent) 11%, var(--card));
      }

      /* ─── Cell-content helpers (Phase 1 table polish) ───────────────
         Standardized palette for badges, two-line cells, color-dot
         record links, and small tag markers. Used inside any column's
         render() to keep visual treatment consistent across all
         tables (Skills / Boards / Contacts / Workflows / etc).
         Lifted from patterns previously reinvented per-table. */
      .msp-cell-badge {
        display: inline-flex; align-items: center;
        padding: 0.15rem 0.5rem;
        border-radius: 4px;
        border: 1px solid var(--border-subtle);
        background: var(--card);
        font-family: ui-monospace, monospace;
        font-size: 0.7rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        font-weight: 600;
        line-height: 1.4;
        white-space: nowrap;
      }
      .msp-cell-badge-neutral { color: var(--text-secondary); }
      .msp-cell-badge-muted {
        color: var(--text-muted);
        background: transparent;
        border-color: var(--border-subtle);
      }
      .msp-cell-badge-success {
        color: #4a8c3a;
        background: color-mix(in srgb, #4a8c3a 10%, transparent);
        border-color: color-mix(in srgb, #4a8c3a 35%, var(--border-subtle));
      }
      .msp-cell-badge-warn {
        color: #d97a3a;
        background: color-mix(in srgb, #d97a3a 10%, transparent);
        border-color: color-mix(in srgb, #d97a3a 35%, var(--border-subtle));
      }
      .msp-cell-badge-accent {
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 12%, transparent);
        border-color: color-mix(in srgb, var(--accent) 35%, var(--border-subtle));
      }
      /* `alert` tone — the red/danger semantic badge. Maps to --danger (which
         has a dark-mode value), so it stays legible in both themes. Documented
         in cells.jsx; was previously undefined → `tone="alert"` rendered
         unstyled (KB overdue, Practices gate). */
      .msp-cell-badge-alert {
        color: var(--danger);
        background: color-mix(in srgb, var(--danger) 10%, transparent);
        border-color: color-mix(in srgb, var(--danger) 35%, var(--border-subtle));
      }
      /* .msp-cell-badge-color sets color, border-color, and background
         inline via style prop — no rules needed. */

      /* ═══ v3.99 — ASSESSMENTS hub card-grid. Fronts the self-assessment suite
         (AI Readiness · OML · Financial & Valuation · Cyber Offering). Tokens
         only; each card tints from its `--card-accent`. ═══ */
      .msp-assessments-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: var(--space-4, 1rem);
        margin-top: var(--space-4, 1rem);
      }
      .msp-assessment-card {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        padding: 1.1rem 1.2rem 1rem;
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-top: 3px solid var(--card-accent, var(--accent));
        border-radius: 10px;
        cursor: pointer;
        transition: border-color 120ms ease, box-shadow 120ms ease;
      }
      .msp-assessment-card:hover,
      .msp-assessment-card:focus-visible {
        border-color: var(--card-accent, var(--accent));
        box-shadow: 0 2px 14px color-mix(in srgb, var(--card-accent, var(--accent)) 18%, transparent);
        outline: none;
      }
      .msp-assessment-card.is-soon {
        cursor: default;
        opacity: 0.62;
      }
      .msp-assessment-card.is-soon:hover {
        border-color: var(--border-subtle);
        box-shadow: none;
      }
      .msp-assessment-card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
      }
      .msp-assessment-card-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 9px;
        color: var(--card-accent, var(--accent));
        background: color-mix(in srgb, var(--card-accent, var(--accent)) 12%, transparent);
      }
      .msp-assessment-card-title {
        font-weight: 700;
        font-size: 1.02rem;
        letter-spacing: -0.01em;
        color: var(--text-primary);
      }
      .msp-assessment-card-blurb {
        margin: 0;
        font-size: 0.85rem;
        line-height: 1.5;
        color: var(--text-secondary);
      }
      .msp-assessment-card-detail {
        margin: 0;
        font-size: 0.74rem;
        line-height: 1.4;
        color: var(--text-muted);
        font-family: ui-monospace, monospace;
      }
      .msp-assessment-card-foot {
        margin-top: auto;
        padding-top: 0.35rem;
      }
      .msp-assessment-card-cta {
        font-weight: 600;
        font-size: 0.82rem;
        color: var(--card-accent, var(--accent));
      }
      .msp-assessment-card-soon {
        font-size: 0.78rem;
        font-style: italic;
        color: var(--text-muted);
      }
      /* v3.99 R4 — maturity-assessment "Download report" CTA (the lead magnet). */
      .msp-maturity-report-cta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.6rem;
        margin-top: 1rem;
      }
      .msp-maturity-report-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.5rem 0.9rem;
        border-radius: 7px;
        border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border-subtle));
        background: color-mix(in srgb, var(--accent) 10%, var(--card));
        color: var(--accent);
        font-weight: 600;
        font-size: 0.85rem;
        cursor: pointer;
        transition: background 120ms ease, border-color 120ms ease;
      }
      .msp-maturity-report-btn:hover {
        background: color-mix(in srgb, var(--accent) 18%, var(--card));
        border-color: var(--accent);
      }
      .msp-maturity-report-note {
        font-size: 0.74rem;
        color: var(--text-muted);
      }

      /* ═══ v3.24.0 — CardGrid + EntityCard shared Cards-mode primitive.
         ONE grid + ONE card shape. Replaces 7 drifting grid wrappers +
         the silently-shared .msp-vendor-card. See the component block. ═══ */
      .msp-card-groups {
        display: flex; flex-direction: column;
        gap: var(--space-5);
      }
      .msp-card-group {
        display: flex; flex-direction: column;
        gap: var(--space-3);
      }
      .msp-card-group-head {
        display: flex; align-items: baseline; flex-wrap: wrap;
        gap: var(--space-3);
        padding-bottom: var(--space-2);
        border-bottom: 1px dashed var(--border-subtle);
      }
      .msp-card-group-name {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 1.05rem;
        color: var(--text-primary);
      }
      .msp-card-group-count {
        font-family: ui-monospace, monospace;
        font-size: 0.7rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .msp-card-group-desc {
        flex: 1 1 auto;
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 0.85rem;
        color: var(--text-muted);
      }
      .msp-card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: var(--space-4);
        align-items: start;
      }
      .msp-card-grid--wide {
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
      }
      .msp-card {
        position: relative;
        display: flex; flex-direction: column;
        gap: 0.5rem;
        box-sizing: border-box;
        width: 100%; max-width: 100%; min-width: 0;
        text-align: left;
        padding: 0.85rem 0.95rem;
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        cursor: pointer;
        font-family: inherit;
        color: inherit;
        appearance: none;
        overflow: hidden;
        /* L-15: hover is outline-only (border-color) — no lift, no shadow. */
        transition: border-color 140ms ease;
      }
      /* Accent stripe — transparent unless the card sets --card-accent,
         so vendor-family cards (no accent) render flush as before. */
      .msp-card::before {
        content: ""; position: absolute; left: 0; top: 0; bottom: 0;
        width: 3px;
        background: var(--card-accent, transparent);
      }
      .msp-card:hover {
        border-color: var(--border-accent);
      }
      .msp-card:focus-visible {
        outline: var(--focus-ring);
        outline-offset: 2px;
      }
      .msp-card-head {
        display: flex; align-items: center; justify-content: space-between;
        gap: 0.5rem;
      }
      .msp-card-label {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-md);
        font-weight: 500;
        color: var(--text-primary);
      }
      .msp-card-badge { flex: 0 0 auto; }
      .msp-card-sublabel {
        font-family: ui-monospace, monospace;
        font-size: 0.62rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .msp-card-desc {
        margin: 0;
        font-size: 0.82rem;
        line-height: 1.45;
        color: var(--text-secondary);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .msp-card-stats {
        display: flex; flex-wrap: wrap;
        gap: 0.75rem;
      }
      .msp-card-stat {
        display: inline-flex; align-items: baseline;
        gap: 0.25rem;
        font-size: 0.72rem;
        color: var(--text-muted);
      }
      .msp-card-stat strong {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-primary);
        font-feature-settings: "tnum";
      }
      .msp-card-stat-label { color: var(--text-muted); }
      .msp-card-stat-warn strong { color: #c4733a; }
      .msp-card-stat-alert strong { color: #c14638; }
      .msp-card-stat-success strong { color: #5a8a52; }
      .msp-card-chips {
        display: flex; flex-wrap: wrap;
        gap: 0.3rem;
      }
      .msp-card-chip {
        font-family: ui-monospace, monospace;
        font-size: 0.62rem;
        letter-spacing: 0.03em;
        color: var(--text-muted);
        background: color-mix(in srgb, var(--accent) 6%, var(--card));
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
        padding: 0.1rem 0.4rem;
        white-space: nowrap;
      }
      .msp-card-chip-more { color: var(--text-secondary); }
      .msp-card-foot {
        display: flex; flex-wrap: wrap;
        gap: 0.3rem;
        font-size: 0.7rem;
        color: var(--text-muted);
      }
      /* v3.24.0 — the rich views (Boards / Tools / Teams / Pods /
         Technicians / Clients / Contacts / Roles) keep their bespoke card
         internals but now sit in the shared .msp-card-grid and inherit this
         base chrome so they can never re-introduce the <button>-card
         right-edge overflow bug (v3.22.2 Clients, v3.6.1 before it). */
      .msp-board-card, .msp-team-card, .msp-pod-card,
      .msp-tech-card, .msp-client-card, .msp-contact-card, .msp-role-card {
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
      }

      /* ─── Vendors view (v3.13.1) — category chips + detail chips only.
         The bespoke vendor card + browse-row CSS was removed in v3.26.5;
         Vendors now render through the shared <EntityCard> / <BrowseBlock>.
         These remaining classes style the category-chip + detail bits. ─── */
      .msp-vendor-cat-chip {
        font-family: ui-monospace, monospace;
        font-size: 0.62rem;
        letter-spacing: 0.03em;
        color: var(--text-muted);
        background: color-mix(in srgb, var(--accent) 6%, var(--card));
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
        padding: 0.1rem 0.4rem;
        white-space: nowrap;
      }
      .msp-vendor-cat-chip-link {
        cursor: pointer;
        font-family: inherit;
        font-size: 0.72rem;
        transition: border-color 120ms ease, color 120ms ease;
      }
      .msp-vendor-cat-chip-link:hover {
        border-color: var(--border-accent);
        color: var(--accent);
      }
      .msp-vendor-detail-cats {
        display: flex; flex-wrap: wrap; gap: 0.4rem;
        margin-bottom: 0.6rem;
      }
      /* v3.27.1: the old .msp-tag / .msp-tag--flag classes
         were consolidated into the canonical .msp-tag / .msp-tag--flag (defined
         in the BrowseBlock section) — every usage was repointed. Kept tokens
         (msp-vendor-cat-chip, msp-vendor-detail-cats) are unaffected. */
      /* v3.14: tailored-mode soft-dim. Off-profile items stay visible + clickable
         but recede (lower opacity + desaturated) and carry an off-profile badge.
         Applied to cards, browse rows, and table rows. */
      .msp-offprofile {
        opacity: 0.42;
        filter: saturate(0.55);
        transition: opacity 0.12s ease;
      }
      .msp-offprofile:hover { opacity: 0.85; }
      tr.msp-offprofile td { opacity: 0.55; }
      .msp-offprofile-badge {
        font-family: ui-monospace, monospace;
        font-size: 0.56rem;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        font-weight: 600;
        color: var(--text-secondary);
        background: color-mix(in srgb, currentColor 8%, transparent);
        border: 1px dashed color-mix(in srgb, currentColor 35%, transparent);
        border-radius: 4px;
        padding: 0.05rem 0.35rem;
        white-space: nowrap;
        flex: 0 0 auto;
      }
      /* v3.38.1: inline profile gap flags (Controls / Cyber Insurance / Packages / Verticals) */
      .msp-gapflag {
        display: inline-flex; align-items: center; gap: 0.2rem;
        font-family: ui-monospace, monospace;
        font-size: 0.6rem; font-weight: 700; letter-spacing: 0.02em;
        color: var(--danger); white-space: nowrap; flex: 0 0 auto; cursor: help;
        background: color-mix(in srgb, var(--danger) 12%, transparent);
        border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
        border-radius: 4px; padding: 0.05rem 0.4rem;
      }
      .msp-gapflag--up {
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 14%, transparent);
        border-color: color-mix(in srgb, var(--accent) 45%, transparent);
      }
      .msp-gapflag--ok {
        color: var(--success);
        background: color-mix(in srgb, var(--success) 10%, transparent);
        border-color: color-mix(in srgb, var(--success) 30%, transparent);
      }
      /* v3.39 Phase 1a — My Org roster workspace */
      .msp-myorg-empty {
        max-width: 540px; margin: var(--space-6) auto; text-align: center;
        padding: var(--space-6) var(--space-5);
        background: var(--card); border: 1px solid var(--border-subtle); border-radius: 12px;
      }
      .msp-myorg-empty-icon { color: var(--accent); margin-bottom: var(--space-3); display: flex; justify-content: center; }
      .msp-myorg-empty h3 { font-family: var(--font-serif); font-size: 1.3rem; margin: 0 0 var(--space-2); color: var(--text-primary); }
      .msp-myorg-empty p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55; margin: 0 0 var(--space-3); }
      .msp-myorg-empty-note { font-size: 0.78rem; color: var(--text-muted); font-style: italic; }
      .msp-myorg-empty-actions { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-4); }
      .msp-myorg-btn {
        font-family: inherit; font-size: 0.82rem; font-weight: 600;
        padding: 0.45rem 0.9rem; border-radius: 8px;
        border: 1px solid var(--border-accent); background: var(--card); color: var(--text-primary); cursor: pointer;
      }
      .msp-myorg-btn:hover { background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
      .msp-myorg-btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
      .msp-myorg-btn--primary:hover { background: color-mix(in srgb, var(--accent) 85%, #000); }
      .msp-myorg-btn--sm { font-size: 0.74rem; padding: 0.3rem 0.6rem; }
      .msp-myorg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; margin-top: var(--space-4); }
      @media (max-width: 880px) { /* wide — consolidated from 860 (#284) */ .msp-myorg-grid { grid-template-columns: 1fr; } }
      .msp-myorg-col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
      .msp-myorg-col-head h3 { font-family: var(--font-serif); font-size: 1.05rem; margin: 0; color: var(--text-primary); }
      .msp-myorg-count { font-family: ui-monospace, monospace; font-size: 0.7rem; color: var(--text-muted); margin-left: 0.3rem; }
      .msp-myorg-hint { font-size: 0.82rem; color: var(--text-muted); font-style: italic; }
      .msp-myorg-card { background: var(--card); border: 1px solid var(--border-subtle); border-radius: 8px; padding: var(--space-3); margin-bottom: var(--space-2); }
      .msp-myorg-card--inactive { opacity: 0.55; }
      .msp-myorg-card-row { display: flex; align-items: center; gap: var(--space-2); }
      .msp-myorg-input {
        font-family: inherit; font-size: 0.9rem; color: var(--text-primary);
        background: var(--input-bg, var(--card)); border: 1px solid transparent;
        border-radius: 6px; padding: 0.25rem 0.4rem;
      }
      .msp-myorg-input:hover, .msp-myorg-input:focus { border-color: var(--border-accent); outline: none; }
      .msp-myorg-input--name { flex: 1 1 auto; font-weight: 600; min-width: 0; }
      .msp-myorg-x {
        flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 6px;
        border: 1px solid var(--border-subtle); background: var(--card); color: var(--text-muted);
        cursor: pointer; font-size: 1rem; line-height: 1;
      }
      .msp-myorg-x:hover { color: var(--danger); border-color: var(--danger); }
      .msp-myorg-meta { font-size: 0.74rem; color: var(--text-muted); margin-top: var(--space-2); font-family: ui-monospace, monospace; }
      .msp-myorg-card-controls { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
      .msp-myorg-select {
        font-family: inherit; font-size: 0.78rem; color: var(--text-primary);
        background: var(--card); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 0.2rem 0.4rem;
      }
      .msp-myorg-active { font-size: 0.76rem; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer; }
      .msp-myorg-foot {
        margin-top: var(--space-5); font-size: 0.78rem; color: var(--text-muted); font-style: italic;
        border-top: 1px dashed var(--border-subtle); padding-top: var(--space-3);
      }
      /* v3.39 Phase 1b — inline card editors (role-seed / skills+levels / certs / boards / color) */
      .msp-myorg-chev {
        flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
        width: 1.4rem; height: 1.4rem; border: none; background: transparent; color: var(--text-muted); cursor: pointer; padding: 0;
      }
      .msp-myorg-chev:hover { color: var(--accent); }
      .msp-myorg-dot { flex: 0 0 auto; width: 0.6rem; height: 0.6rem; border-radius: 50%; }
      .msp-myorg-mini { font-family: ui-monospace, monospace; font-size: 0.68rem; color: var(--text-muted); margin-left: auto; white-space: nowrap; }
      .msp-myorg-editor { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--border-subtle); display: flex; flex-direction: column; gap: var(--space-3); }
      .msp-myorg-ed-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
      .msp-myorg-ed-label, .msp-myorg-ed-head {
        font-family: ui-monospace, monospace; font-size: 0.64rem; letter-spacing: 0.04em; text-transform: uppercase;
        font-weight: 700; color: var(--text-secondary);
      }
      .msp-myorg-ed-head { display: flex; align-items: center; gap: 0.35rem; margin-bottom: var(--space-2); }
      .msp-myorg-ed-head span { font-weight: 600; color: var(--text-muted); }
      .msp-myorg-skill-row { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 0.3rem; }
      .msp-myorg-skill-name { flex: 1 1 auto; font-size: 0.8rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
      .msp-myorg-lvl { flex: 0 0 auto; font-family: inherit; font-size: 0.72rem; color: var(--text-primary); background: var(--card); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 0.15rem 0.3rem; }
      .msp-myorg-x--sm { width: 1.2rem; height: 1.2rem; font-size: 0.85rem; }
      .msp-myorg-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: var(--space-2); }
      .msp-myorg-chip {
        display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.74rem; color: var(--text-primary);
        background: color-mix(in srgb, var(--accent) 8%, var(--card)); border: 1px solid var(--border-subtle);
        border-radius: 999px; padding: 0.1rem 0.5rem;
      }
      .msp-myorg-chip button { border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; line-height: 1; padding: 0; }
      .msp-myorg-chip button:hover { color: var(--danger); }
      .msp-myorg-boardchip {
        font-family: inherit; font-size: 0.72rem; color: var(--text-secondary); cursor: pointer;
        background: var(--card); border: 1px solid var(--border-subtle); border-left: 3px solid var(--bc, var(--border-subtle));
        border-radius: 6px; padding: 0.15rem 0.45rem;
      }
      .msp-myorg-boardchip.on { color: var(--text-primary); font-weight: 600; background: color-mix(in srgb, var(--bc, var(--accent)) 14%, var(--card)); border-color: var(--bc, var(--accent)); }
      .msp-myorg-swatches { display: flex; gap: 0.35rem; }
      .msp-myorg-swatch {
        width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 2px solid var(--border-subtle); cursor: pointer;
        font-size: 0.7rem; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center;
      }
      .msp-myorg-swatch.on { border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--text-primary); }
      /* v3.39.2 — roster coverage strip + "who should take this?" recommender rows */
      .msp-myorg-coverage {
        display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center;
        margin: var(--space-3) 0 var(--space-4); padding: 0.5rem 0.85rem;
        background: var(--card); border: 1px solid var(--border-subtle); border-radius: 8px;
        font-size: 0.8rem; color: var(--text-secondary);
      }
      .msp-myorg-coverage strong { color: var(--text-primary); }
      .msp-myorg-cov-warn { color: var(--warn); font-weight: 600; }
      /* v3.69 / Wave 5.4 — capacity & cost-to-serve panel */
      .msp-myorg-econ {
        margin: 0 0 var(--space-4); padding: var(--space-4);
        background: var(--card); border: 1px solid var(--border-subtle); border-radius: 10px;
      }
      .msp-myorg-econ-head { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-3); }
      .msp-myorg-econ-head h3 { margin: 0; font-size: 1rem; color: var(--text-primary); }
      .msp-myorg-econ-tag {
        font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
        color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--card));
        border-radius: 999px; padding: 0.12rem 0.5rem;
      }
      .msp-myorg-econ-grid {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: var(--space-3);
      }
      .msp-myorg-econ-cell {
        padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: 8px;
        background: color-mix(in srgb, var(--accent) 4%, var(--card));
      }
      .msp-myorg-econ-cell--hint { background: var(--card); border-style: dashed; }
      .msp-myorg-econ-val { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); line-height: 1.1; }
      .msp-myorg-econ-lbl {
        font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em;
        color: var(--text-muted); margin-top: 0.2rem;
      }
      .msp-myorg-econ-note { font-size: 0.74rem; color: var(--text-secondary); margin-top: var(--space-2); }
      /* v3.70 / Wave 5.9 — scorecard review-rhythm + north-star strip */
      .msp-scorecard-rhythm {
        display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
        margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4);
        background: var(--card); border: 1px solid var(--border-subtle); border-radius: 10px;
      }
      .msp-scorecard-rhythm-block { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
      .msp-scorecard-rhythm-lbl {
        font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
        color: var(--text-muted);
      }
      .msp-scorecard-northstar {
        align-self: flex-start; font: inherit; font-size: 1.05rem; font-weight: 700;
        color: var(--accent); background: none; border: none; padding: 0; cursor: pointer; text-align: left;
      }
      .msp-scorecard-northstar:hover { text-decoration: underline; }
      .msp-scorecard-rhythm-note { font-size: 0.72rem; color: var(--text-secondary); }
      .msp-scorecard-cad { display: flex; flex-wrap: wrap; gap: var(--space-2); }
      .msp-scorecard-cad-chip {
        font-size: 0.74rem; color: var(--text-secondary); text-transform: capitalize;
        background: color-mix(in srgb, var(--accent) 8%, var(--card));
        border: 1px solid var(--border-subtle); border-radius: 999px; padding: 0.1rem 0.55rem;
      }
      .msp-scorecard-cad-chip strong { color: var(--text-primary); }
      .msp-myorg-rec { display: flex; flex-direction: column; gap: var(--space-2); }
      .msp-myorg-rec-row {
        display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2);
        border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--card);
      }
      .msp-myorg-rec-rank {
        flex: 0 0 auto; width: 1.4rem; height: 1.4rem; border-radius: 50%;
        background: color-mix(in srgb, var(--accent) 14%, var(--card)); color: var(--accent);
        font-size: 0.72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
      }
      .msp-myorg-rec-main { flex: 1 1 auto; min-width: 0; }
      .msp-myorg-rec-head { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
      .msp-myorg-rec-head strong { font-size: 0.9rem; color: var(--text-primary); }
      .msp-myorg-rec-tier {
        font-family: ui-monospace, monospace; font-size: 0.64rem; font-weight: 700; color: var(--text-secondary);
        background: color-mix(in srgb, var(--accent) 8%, var(--card)); border-radius: 4px; padding: 0.05rem 0.3rem;
      }
      .msp-myorg-rec-team { font-size: 0.72rem; color: var(--text-muted); }
      .msp-myorg-rec-flag { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; color: var(--warn); }
      .msp-myorg-rec-meta { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.15rem; }
      .msp-myorg-rec-score {
        flex: 0 0 auto; font-family: ui-monospace, monospace; font-size: 1rem; font-weight: 700;
        color: var(--accent); min-width: 2.2ch; text-align: right;
      }
      /* v3.39.3 — ticket-flow visualization (board → teams → techs) */
      .msp-myorg-flow-wrap { margin-top: var(--space-5); }
      .msp-myorg-flow { display: flex; flex-direction: column; gap: var(--space-1); }
      .msp-myorg-flow-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2) 0; border-bottom: 1px dashed var(--border-subtle); }
      .msp-myorg-flow-board {
        font-weight: 600; font-size: 0.82rem; color: var(--text-primary);
        border-left: 3px solid var(--bc, var(--accent)); padding-left: 0.5rem; flex: 0 0 auto; min-width: 9rem;
      }
      .msp-myorg-flow-arrow { color: var(--text-muted); flex: 0 0 auto; }
      .msp-myorg-flow-teams { display: flex; flex-wrap: wrap; gap: 0.4rem; flex: 1 1 auto; }
      .msp-myorg-flow-team {
        font-size: 0.78rem; color: var(--text-primary); background: var(--card);
        border: 1px solid var(--border-subtle); border-radius: 6px; padding: 0.1rem 0.5rem;
      }
      .msp-myorg-flow-team.gap { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--border-subtle)); }
      .msp-myorg-flow-count { font-family: ui-monospace, monospace; font-size: 0.68rem; color: var(--text-muted); }
      .msp-myorg-flow-uncovered { font-size: 0.76rem; color: var(--text-muted); font-style: italic; margin-top: var(--space-2); }
      /* v3.14: My MSP Profile Customize hub */
      /* v3.19.1 design polish: use real palette tokens (--card / --border-subtle),
         not the phantom --surface / --border / --surface-2 that fell back to cool
         greys and broke dark mode; controls inherit the app font (were UA Arial). */
      .msp-profile-banner {
        display: flex; align-items: center; justify-content: space-between; gap: 1rem;
        padding: 0.6rem 0.85rem; margin-bottom: 1rem;
        background: var(--card); border: 1px solid var(--border-subtle);
        border-radius: 8px; font-size: 0.82rem; flex-wrap: wrap;
      }
      /* v3.37 Phase C — "Your MSP at a glance" diagnostic.
         v3.51: this is the page's PAYOFF — bumped to read as a results panel,
         not a quiet form section. Bigger summary numbers, a carded stat strip,
         and more air between gap-groups. (Outer panel wrapper added in JSX.) */
      .msp-diag-summary {
        display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center;
        margin-bottom: var(--space-5);
        padding: var(--space-4) var(--space-5);
        background: var(--card); border: 1px solid var(--border-subtle); border-radius: 10px;
      }
      .msp-diag-stat { font-size: var(--text-md); color: var(--text-secondary); display: inline-flex; align-items: center; gap: 0.4rem; }
      .msp-diag-stat strong { color: var(--text-primary); font-size: var(--text-xl); font-family: var(--font-mono); }
      .msp-diag-groups { display: grid; gap: var(--space-5); }
      .msp-diag-group-label { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); font-weight: 700; margin-bottom: var(--space-3); }
      .msp-diag-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
      .msp-diag-price { margin: 0; font-size: var(--text-lg); color: var(--text-primary); }
      .msp-diag-price-unit { color: var(--text-muted); font-size: var(--text-sm); }
      .msp-diag-price-typical { color: var(--text-secondary); font-size: var(--text-sm); }
      /* v3.51: the whole "Your MSP at a glance" body, lifted into an elevated
         results panel (JSX wraps MspDiagnosticPanel in .msp-diag-panel). Sits at
         the END of the hub as the climax of the intake flow. */
      .msp-diag-panel {
        padding: var(--space-5) var(--space-6);
        background: color-mix(in srgb, var(--accent) 4%, var(--card));
        border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border-subtle));
        border-radius: 12px;
      }
      .msp-diag-panel .msp-diag-summary { background: var(--bg); }
      /* v3.52: Go-To-Market — CPL/CAC comparison bars + motion chip. */
      .msp-gtm-bar-wrap { display: flex; align-items: center; gap: 0.5rem; }
      .msp-gtm-bar { flex: 0 0 52px; height: 6px; border-radius: 999px; background: var(--border-subtle); overflow: hidden; }
      .msp-gtm-bar-fill { height: 100%; border-radius: 999px; background: var(--accent); }
      .msp-gtm-bar-fill.is-cac { background: color-mix(in srgb, var(--accent) 50%, var(--text-muted)); }
      .msp-gtm-bar-label { font-size: var(--text-sm); color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
      .msp-gtm-motion { font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.5rem; border: 1px solid currentColor; border-radius: 999px; white-space: nowrap; }
      /* v3.51: My MSP Profile section titles are major intake STEPS, not the
         detail-panel eyebrow the shared .msp-section-label renders (0.65rem mono
         muted uppercase). Scope a real heading treatment to the hub so the ~40
         detail panels that reuse <Section> keep their compact label untouched. */
      .msp-profile-hub .msp-section-label {
        font-family: inherit;
        font-size: var(--text-lg);
        font-weight: 700;
        letter-spacing: -0.005em;
        text-transform: none;
        color: var(--text-primary);
        margin-bottom: var(--space-4);
      }
      .msp-profile-banner-text { color: var(--text-secondary); }
      .msp-profile-banner-toggle { display: inline-flex; gap: 0.35rem; flex: 0 0 auto; }
      .msp-profile-axes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.5rem; }
      .msp-profile-axis {
        display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
        column-gap: 0.5rem; padding: 0.55rem 0.7rem; border-radius: 8px;
        border: 1px solid var(--border-subtle); background: var(--card); opacity: 0.7;
      }
      .msp-profile-axis.set { opacity: 1; border-color: color-mix(in srgb, var(--accent) 45%, var(--border-subtle)); }
      .msp-profile-axis-mark { grid-row: 1 / span 2; align-self: center; font-size: 1.1rem; font-weight: 700; color: var(--text-secondary); }
      .msp-profile-axis.set .msp-profile-axis-mark { color: var(--accent); }
      .msp-profile-axis-label { font-weight: 600; font-size: 0.85rem; }
      .msp-profile-axis-desc { font-size: 0.72rem; color: var(--text-secondary); }
      .msp-profile-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
      .msp-profile-sublabel { font-size: 0.72rem; color: var(--text-secondary); margin-right: 0.2rem; }
      .msp-profile-pill {
        font-size: 0.78rem; padding: 0.3rem 0.6rem; border-radius: 999px; cursor: pointer;
        border: 1px solid var(--border-subtle); background: var(--card); color: var(--text-primary);
        font-family: inherit; white-space: nowrap;
      }
      .msp-profile-pill:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border-subtle)); }
      .msp-profile-pill.on { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); font-weight: 600; }
      .msp-profile-pill-action { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border-subtle)); }
      .msp-profile-search {
        width: 100%; max-width: 360px; margin-bottom: 0.6rem; padding: 0.4rem 0.6rem;
        border: 1px solid var(--border-subtle); border-radius: 6px; font-size: 0.82rem;
        font-family: inherit; background: var(--card); color: var(--text-primary);
      }
      .msp-profile-picker {
        max-height: 340px; overflow-y: auto; border: 1px solid var(--border-subtle);
        border-radius: 8px; padding: 0.4rem 0.6rem;
        column-width: 260px; column-gap: 1.2rem;
      }
      .msp-profile-pick-group { break-inside: avoid; margin-bottom: 0.7rem; }
      .msp-profile-pick-group-head {
        font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em;
        font-weight: 700; color: var(--text-secondary); margin: 0.2rem 0 0.3rem;
      }
      .msp-profile-pick-item {
        display: flex; align-items: baseline; gap: 0.45rem; padding: 0.12rem 0;
        font-size: 0.8rem; cursor: pointer;
      }
      .msp-profile-pick-item input { flex: 0 0 auto; accent-color: var(--accent); }
      .msp-profile-pick-name { flex: 1 1 auto; }
      .msp-profile-pick-meta { font-size: 0.68rem; color: var(--text-secondary); flex: 0 0 auto; }
      /* v3.15: Operational Maturity (OML) view */
      .msp-oml-tabs { display: inline-flex; gap: 0.35rem; margin-bottom: 1rem; }
      .msp-oml-tab {
        font-size: 0.82rem; padding: 0.35rem 0.85rem; border-radius: 999px; cursor: pointer;
        border: 1px solid var(--border-subtle); background: var(--card); color: var(--text-primary);
        font-family: inherit;
      }
      .msp-oml-tab.on { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); font-weight: 600; }
      .msp-oml-callout {
        padding: 0.6rem 0.85rem; margin-bottom: 1rem; font-size: 0.82rem; line-height: 1.5;
        background: color-mix(in srgb, var(--accent) 7%, var(--card));
        border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border-subtle)); border-radius: 8px;
        color: var(--text-secondary);
      }
      .msp-oml-ladder { display: flex; flex-direction: column; gap: 0.5rem; }
      .msp-oml-level {
        /* minmax(0,1fr) lets the body column shrink below its content's
           min-width (the default `1fr` is min-width:auto → overflowed ~40px
           at phone width). */
        display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem; align-items: start;
        padding: 0.6rem 0.8rem; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--card);
      }
      .msp-oml-level-body { min-width: 0; }
      .msp-oml-level-num { font-size: 1rem; font-weight: 700; }
      .msp-oml-level-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
      .msp-oml-level-name { font-weight: 700; font-size: 0.92rem; }
      .msp-oml-level-ebitda { font-size: 0.72rem; color: var(--text-secondary); font-family: ui-monospace, monospace; }
      .msp-oml-level-summary { font-size: 0.82rem; line-height: 1.5; margin: 0.25rem 0 0.4rem; }
      .msp-oml-level-markers { display: flex; flex-wrap: wrap; gap: 0.3rem; }
      /* markers are full descriptive phrases, not nav chips — let them wrap so a
         long marker ("Little awareness of what drives results…") doesn't blow
         past the viewport at phone width (.msp-vendor-cat-chip is nowrap). */
      .msp-oml-level-markers .msp-vendor-cat-chip { white-space: normal; }
      .msp-oml-domains { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0.7rem; }
      .msp-oml-domain { padding: 0.7rem 0.85rem; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--card); }
      .msp-oml-domain-head { font-weight: 700; font-size: 0.88rem; margin-bottom: 0.25rem; }
      .msp-oml-domain-q { font-size: 0.8rem; color: var(--text-secondary); margin: 0 0 0.5rem; line-height: 1.45; }
      .msp-oml-anchors { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.5rem; }
      .msp-oml-anchor { font-size: 0.74rem; line-height: 1.4; padding-left: 0.6rem; border-left: 2px solid var(--border-subtle); }
      .msp-oml-anchor.reactive { border-left-color: color-mix(in srgb, #b4452e 55%, transparent); }
      .msp-oml-anchor.strategic { border-left-color: color-mix(in srgb, #4a8c3a 60%, transparent); }
      .msp-oml-views { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
      .msp-oml-views-label { font-size: 0.7rem; color: var(--text-secondary); margin-right: 0.15rem; }
      .msp-oml-domain-note { font-size: 0.74rem; color: var(--text-secondary); font-style: italic; margin: 0; }
      .msp-oml-rate { display: flex; flex-wrap: wrap; gap: 0.35rem; }
      /* v3.71 / Wave 5.1 deeper half — diagnostic evidence challenge on an over-claimed self-rating */
      .msp-oml-evidence {
        margin: 0.5rem 0 0; padding: 0.5rem 0.7rem; font-size: 0.78rem; line-height: 1.5;
        color: var(--text-secondary);
        background: color-mix(in srgb, var(--warn) 8%, var(--card));
        border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--border-subtle)); border-radius: 8px;
      }
      .msp-oml-evidence strong { color: var(--text-primary); }
      .msp-oml-evidence-link {
        font: inherit; font-size: 0.78rem; color: var(--accent); background: none; border: none;
        padding: 0; cursor: pointer; white-space: nowrap;
      }
      .msp-oml-evidence-link:hover { text-decoration: underline; }
      .msp-oml-steps { margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; }
      .msp-oml-steps-head { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; color: var(--text-secondary); }
      .msp-oml-step { padding: 0.55rem 0.75rem; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--card); }

      /* v3.20.0 — Insights dashboard. Token-driven; no charts dep (bars + gauges
         drawn in CSS). Card recipe matches §8 of the design system. */
      .msp-insights-hub { display: flex; flex-direction: column; gap: var(--space-5); padding-bottom: var(--space-7); }
      .msp-insights-hub .msp-insights-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: var(--space-4);
      }
      .msp-insights-widget {
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        padding: var(--space-4) var(--space-5);
        display: flex; flex-direction: column; gap: var(--space-3);
      }
      .msp-insights-widget-head {
        display: flex; align-items: baseline; justify-content: space-between;
        gap: var(--space-3); flex-wrap: wrap;
      }
      .msp-insights-headline { display: flex; align-items: baseline; gap: var(--space-2); margin-top: var(--space-1); }
      .msp-insights-headline-val {
        font-family: var(--font-serif);
        font-size: 2.2rem; font-weight: 400; font-style: italic;
        color: var(--text-primary); line-height: 1; letter-spacing: -0.01em;
      }
      .msp-insights-headline-suffix {
        font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted);
      }
      .msp-insights-headline-sub {
        font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.55;
      }
      .msp-insights-bars { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
      .msp-insights-bar { display: flex; flex-direction: column; gap: 0.2rem; }
      .msp-insights-bar-head {
        display: flex; align-items: center; justify-content: space-between;
        gap: var(--space-2); font-size: var(--text-xs);
      }
      .msp-insights-bar-track {
        height: 6px; background: var(--chip-bg);
        border-radius: var(--radius-pill); overflow: hidden;
      }
      .msp-insights-bar-fill {
        height: 100%; border-radius: var(--radius-pill);
        background: var(--accent);
        transition: width 220ms cubic-bezier(.2,.7,.3,1);
      }
      .msp-insights-bar-fill[data-tone="warn"]   { background: var(--warn); }
      .msp-insights-bar-fill[data-tone="accent"] { background: var(--accent); }
      .msp-insights-bar-fill[data-tone="muted"]  { background: color-mix(in srgb, var(--text-muted) 55%, transparent); }
      .msp-insights-bar-fill[data-tone="success"] { background: var(--success); }
      .msp-insights-bar-fill[data-tone="danger"]  { background: var(--danger); }
      .msp-insights-gauge { display: flex; align-items: center; gap: var(--space-3); }
      .msp-insights-gauge-track {
        flex: 1; height: 10px; background: var(--chip-bg);
        border-radius: var(--radius-pill); overflow: hidden;
      }
      .msp-insights-gauge-fill {
        height: 100%; border-radius: var(--radius-pill);
        background: color-mix(in srgb, var(--accent) 70%, transparent);
        transition: width 220ms cubic-bezier(.2,.7,.3,1);
      }
      .msp-insights-gauge-num { font-size: 1.1rem; color: var(--text-primary); }
      .msp-insights-axis-list {
        display: flex; flex-wrap: wrap; gap: var(--space-2);
        font-size: var(--text-xs); color: var(--text-muted);
        font-family: var(--font-mono);
      }
      .msp-insights-axis { display: inline-flex; align-items: center; gap: 0.2rem; text-transform: capitalize; }
      .msp-insights-axis.is-set { color: var(--accent); }
      .msp-insights-axis-mark { font-size: 0.9rem; }
      .msp-insights-footnote { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }

      /* v3.20.0 — KPI strip (Widget 4). One row per KPI category; category
         label, KPI name, direction glyph + size-appropriate benchmark text. */
      .msp-insights-kpi-strip { display: flex; flex-direction: column; gap: var(--space-2); }
      .msp-insights-kpi-row {
        display: grid;
        grid-template-columns: 6.5rem 1fr auto;
        align-items: baseline;
        gap: var(--space-3);
        padding: 0.4rem 0;
        border-bottom: 1px dashed var(--border-subtle);
      }
      .msp-insights-kpi-row:last-child { border-bottom: none; }
      .msp-insights-kpi-cat {
        font-family: var(--font-mono); font-size: var(--text-xs);
        text-transform: uppercase; letter-spacing: 0.08em;
        color: var(--cat-color, var(--text-muted));
      }
      .msp-insights-kpi-label {
        font-family: var(--font-serif); font-style: italic;
        font-size: 0.95rem; color: var(--text-primary);
        line-height: 1.25;
      }
      .msp-insights-kpi-bench {
        display: inline-flex; align-items: baseline; gap: 0.3rem;
        font-size: var(--text-sm); color: var(--text-secondary);
        white-space: nowrap;
      }
      .msp-insights-kpi-dir { color: var(--accent); }

      /* v3.20.0 — Volume Pareto (Widget 5). Horizontal bars per board with
         per-tier color stacks inside (high/medium/low/episodic). */
      .msp-insights-volume-list { display: flex; flex-direction: column; gap: 0.5rem; }
      .msp-insights-volume-row {
        display: grid;
        grid-template-columns: 9rem 1fr 3rem;
        align-items: center;
        gap: var(--space-3);
        font-size: var(--text-sm);
      }
      .msp-insights-volume-label {
        color: var(--text-primary);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      .msp-insights-volume-bar-wrap {
        background: var(--chip-bg);
        height: 12px;
        border-radius: var(--radius-pill);
        overflow: hidden;
        position: relative;
      }
      .msp-insights-volume-bar {
        height: 100%;
        display: flex;
        border-radius: var(--radius-pill);
        overflow: hidden;
        transition: width 220ms cubic-bezier(.2,.7,.3,1);
      }
      .msp-insights-volume-seg { display: block; height: 100%; }
      .msp-insights-volume-count {
        text-align: right;
        color: var(--text-secondary);
        font-size: var(--text-xs);
      }
      .msp-insights-volume-legend {
        display: flex; flex-wrap: wrap; gap: var(--space-3);
        margin-top: var(--space-2);
        font-size: var(--text-xs); color: var(--text-muted);
      }
      .msp-insights-volume-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
      .msp-insights-volume-legend-dot {
        display: inline-block; width: 10px; height: 10px;
        border-radius: 50%;
      }

      /* v3.20.12 — FilterBlock: deliberately reuses the Records BAND CSS
         classes (.msp-section-header.msp-section-header-filters,
         .msp-filter-row, .msp-row-label, .msp-compact-group, .msp-ss).
         The only NEW rules below are the two wrapper containers (chips
         and compact body) and the count indicator inline with the header.
         Everything else is shared chrome — Records and every catalog
         view look identical by construction. */
      .msp-filterblock {
        display: flex; flex-direction: column;
        margin-bottom: var(--space-4);
      }
      .msp-filterblock .msp-filterblock-count {
        margin-left: auto;
        font-size: var(--text-sm);
        color: var(--text-secondary);
        font-family: var(--font-mono);
      }
      /* Chips-mode body: stack of full-width .msp-filter-row instances. */
      .msp-filter-rows {
        display: flex; flex-direction: column;
        gap: var(--space-1);
      }
      /* Compact-mode body: flex-row of .msp-compact-group cells, each
         holding a SearchableSelect per axis. Matches the existing
         Records compact-mode layout. */
      .msp-compact-groups {
        display: flex; flex-wrap: wrap;
        gap: var(--space-4) var(--space-5);
        align-items: flex-start;
      }
      /* Optional group-divider chip between chips-mode groups, using the
         per-group color tokens defined for .msp-filter-group-divider. */
      .msp-filterblock .msp-filter-group-divider {
        margin: var(--space-2) 0 var(--space-1);
        padding-left: 0.05rem;
      }
      .msp-filterblock .msp-filter-group-divider-label {
        display: inline-block;
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: 0.18em;
        color: var(--group-color, var(--text-secondary));
        padding: 0.1rem 0 0.2rem 0;
        border-bottom: 1.5px solid color-mix(in srgb, var(--group-color, var(--border-subtle)) 70%, transparent);
      }
      .msp-oml-step-head { display: flex; align-items: center; gap: 0.5rem; }
      .msp-oml-step-focus { font-size: 0.8rem; color: var(--text-secondary); margin: 0.3rem 0; line-height: 1.45; }
      /* v3.13.3: subgroup sub-header inside a Vendors Browse group. */
      .msp-vendor-subgroup { margin-top: 0.4rem; }
      .msp-vendor-subgroup-head {
        font-family: ui-monospace, monospace;
        font-size: 0.66rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-secondary);
        margin: 0.6rem 0 0.3rem 0.1rem;
        padding-bottom: 0.2rem;
        border-bottom: 1px dashed var(--border-subtle);
      }

      .msp-cell-two-line {
        display: inline-flex; flex-direction: column;
        gap: 0.15rem;
        line-height: 1.3;
        min-width: 0;
      }
      .msp-cell-two-line-primary {
        color: var(--text-primary);
      }
      .msp-cell-two-line-secondary {
        font-size: 0.75rem;
        color: var(--text-muted);
      }
      .msp-cell-two-line-secondary.msp-cell-two-line-mono {
        font-family: ui-monospace, monospace;
      }

      .msp-cell-link {
        display: inline-flex; align-items: center;
        gap: 0.4rem;
        min-width: 0;
      }
      .msp-cell-link-button {
        background: transparent;
        border: none;
        padding: 0;
        margin: 0;
        font-family: inherit;
        font-size: inherit;
        cursor: pointer;
        color: inherit;
        text-align: left;
      }
      .msp-cell-link-button:hover .msp-cell-link-label {
        color: var(--accent);
        text-decoration: underline;
      }
      .msp-cell-link-dot {
        width: 8px; height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .msp-cell-link-id {
        font-size: 0.7rem;
        color: var(--text-muted);
      }
      .msp-cell-link-label {
        color: var(--text-primary);
        transition: color 80ms;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
      }

      .msp-cell-tag {
        display: inline-flex; align-items: center;
        padding: 0.05rem 0.35rem;
        border-radius: 3px;
        font-family: ui-monospace, monospace;
        font-size: 0.6rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-weight: 700;
        line-height: 1.4;
        white-space: nowrap;
      }
      .msp-cell-tag-neutral {
        background: var(--chip-bg, color-mix(in srgb, var(--accent) 8%, var(--card)));
        color: var(--text-muted);
      }
      .msp-cell-tag-accent {
        background: color-mix(in srgb, var(--accent) 15%, transparent);
        color: var(--accent);
      }
      .msp-cell-tag-success {
        background: color-mix(in srgb, #4a8c3a 15%, transparent);
        color: #4a8c3a;
      }
      .msp-cell-tag-warn {
        background: color-mix(in srgb, #d97a3a 15%, transparent);
        color: #d97a3a;
      }
      .msp-cell-tag-danger {
        background: color-mix(in srgb, #c14638 15%, transparent);
        color: #c14638;
      }

      /* ---------- Table pagination footer ---------- */
      .msp-table-pagination {
        display: flex; align-items: center; justify-content: space-between;
        gap: 1rem; flex-wrap: wrap;
        margin-top: 0.7rem;
        padding: 0.5rem 0.2rem;
        font-size: 0.82rem;
        color: var(--text-secondary);
      }
      .msp-table-pagination-info {
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
      }
      .msp-table-pagination-info strong {
        font-family: ui-monospace, monospace;
        font-style: normal;
        font-weight: 600;
        color: var(--text-primary);
      }
      .msp-table-pagination-controls {
        display: flex; align-items: center;
        gap: 0.75rem;
      }
      .msp-table-pagination-pagesize {
        display: inline-flex; align-items: center;
        gap: 0.45rem;
      }
      .msp-table-pagination-label {
        font-family: ui-monospace, monospace;
        font-size: 0.65rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .msp-table-pagination-select {
        font-family: 'Fraunces', serif;
        font-size: 0.82rem;
        padding: 0.3rem 0.55rem;
        border: 1px solid var(--border-subtle);
        border-radius: 999px;
        background: var(--chip-bg);
        color: var(--text-secondary);
        cursor: pointer;
        transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
      }
      .msp-table-pagination-select:hover {
        border-color: var(--border-accent);
        color: var(--text-primary);
        background: color-mix(in srgb, var(--accent) 8%, var(--chip-bg));
      }
      .msp-table-pagination-nav {
        display: inline-flex; align-items: center;
        gap: 0.3rem;
      }
      .msp-table-pagination-btn {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 28px; height: 28px;
        padding: 0 0.45rem;
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
        background: var(--chip-bg);
        color: var(--text-secondary);
        cursor: pointer;
        font-family: ui-monospace, monospace;
        font-size: 0.95rem;
        line-height: 1;
        transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
      }
      .msp-table-pagination-btn:hover:not(:disabled) {
        border-color: var(--border-accent);
        color: var(--text-primary);
        background: color-mix(in srgb, var(--accent) 8%, var(--chip-bg));
      }
      .msp-table-pagination-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }
      .msp-table-pagination-page {
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        margin: 0 0.35rem;
      }
      .msp-table-pagination-page strong {
        font-family: ui-monospace, monospace;
        font-style: normal;
        font-weight: 600;
        color: var(--text-primary);
      }
      .msp-table-th {
        position: relative;
        cursor: pointer;
        user-select: none;
        transition: background-color 80ms ease;
      }
      .msp-table-th:hover {
        background: color-mix(in srgb, var(--accent) 14%, var(--card));
      }
      .msp-table-th.sorted {
        background: color-mix(in srgb, var(--accent) 18%, var(--card));
        color: var(--text-primary);
      }
      /* v3.20.0: keyboard focus ring for sortable headers. Inset 2px so it
         doesn't overlap the resize handle on the right edge. */
      .msp-table-th:focus-visible,
      .msp-tickets-table-th:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: -3px;
      }
      /* v3.1.3: allow header labels to wrap onto a second line when the
         column is narrow. Headers were previously truncating mid-word
         ("TECHNICIAN R...") because of nowrap + ellipsis. Now they wrap
         to 2 lines max; row height locked by min-height so wrapping
         doesn't shift the table when sorting between long/short headers.
         The white-space: normal allows wrapping; word-break: break-word
         handles edge cases like very long single-word labels.
         v3.6.1 Q3: the inner th content is now wrapped in a flex row so
         the label + sort indicator sit side-by-side. Previously the
         label was display:-webkit-box (block-level for line-clamp) which
         pushed the inline indicator span below the label. */
      .msp-table-th-inner {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        width: 100%;
      }
      .msp-table-th-label {
        /* L-17: clamp to 2 lines max with ellipsis fallback so single
           words (TYPE, LEVEL, BOARD) never fragment vertically. -webkit-box
           is the cross-browser way to multi-line clamp; an inner block
           context (not table-cell) is safe here because this is a span
           inside the th, not the th itself. */
        flex: 1;
        min-width: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
      }
      .msp-table-th {
        min-height: 2.6rem;  /* enough for 2 wrapped lines + the sort indicator */
        vertical-align: middle;
      }
      /* v3.6.1 Q3: bump indicator from 0.65rem (illegible) to 0.85rem
         and pin to right of the label via flex; also widen the spacing. */
      .msp-table-th-indicator {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 14px;
        height: 14px;
        font-size: 0.85rem;
        line-height: 1;
        color: var(--text-muted);
      }
      .msp-table-th.sorted .msp-table-th-indicator {
        color: var(--accent);
      }
      /* Non-sortable headers (e.g. an Actions or Boards column where
         click-to-sort doesn't make sense). Reset cursor + hover so users
         don't get a phantom interaction affordance. */
      .msp-table-th.msp-table-th-nosort {
        cursor: default;
      }
      .msp-table-th.msp-table-th-nosort:hover {
        background: transparent;
      }
      /* Ambient-skill badge in the Skills table's Type column — same
         visual treatment as a dashed-border NON-OPS-style tag. Tells
         users at a glance these skills don't get per-record mapped. */
      .msp-skills-table-ambient {
        display: inline-block;
        padding: 0.1rem 0.4rem;
        font-family: ui-monospace, monospace;
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
        background: var(--bg);
        border: 1px dashed var(--border-subtle);
        border-radius: 3px;
      }
      /* Statuses table — category cell shows label + color dot;
         SLA impact cell shows a pill colored by clock state. */
      .msp-statuses-table-cat {
        display: inline-flex; align-items: center;
        gap: 0.4rem;
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        font-weight: 500;
        text-transform: capitalize;
      }
      .msp-statuses-table-cat-dot {
        width: 8px; height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .msp-statuses-table-sla {
        display: inline-block;
        padding: 0.1rem 0.45rem;
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        border-radius: 3px;
        border: 1px solid transparent;
      }
      .msp-statuses-table-sla-running {
        color: #4a7ba6;
        background: color-mix(in srgb, #4a7ba6 10%, transparent);
        border-color: color-mix(in srgb, #4a7ba6 35%, transparent);
      }
      .msp-statuses-table-sla-paused {
        color: var(--text-secondary);
        background: var(--chip-bg);
        border-color: var(--border-subtle);
      }
      .msp-statuses-table-sla-stopped {
        color: var(--text-muted);
        background: transparent;
        border-color: var(--border-subtle);
        border-style: dashed;
      }
      .msp-table-resizer {
        position: absolute;
        top: 0;
        /* Sit ON the column boundary, not just inside the right edge — this
           way the resizer overlaps the column separator line and the user
           grabs the visible boundary, not a 3px-offset hit zone. */
        right: -3px;
        width: 6px; height: 100%;
        cursor: col-resize;
        user-select: none;
        z-index: 2;
        background: transparent;
        transition: background-color 120ms ease;
      }
      .msp-table-resizer:hover {
        background: color-mix(in srgb, var(--accent) 25%, transparent);
      }
      /* Only the actively-dragged resizer lights up — the prior
         body.msp-table-resizing selector matched every resizer in the
         table, lighting up every column at once during a drag. */
      .msp-table-resizer.active {
        background: color-mix(in srgb, var(--accent) 55%, transparent);
      }
      /* v3.20.0: always-visible at-rest hairline on every resize handle so
         users can SEE the column boundary is grabbable, not just the hover
         state. Subtle (40% border opacity) at rest, full accent on hover,
         thicker + brighter while actively dragging. Hairline sits at the
         middle 50% of the column height so it reads as a divider, not a
         vertical line covering the full header height. */
      .msp-table-resizer::after {
        content: '';
        position: absolute;
        top: 25%;
        left: 50%;
        transform: translateX(-50%);
        width: 1px;
        height: 50%;
        background: var(--border-subtle);
        opacity: 0.55;
        pointer-events: none;
        transition: background-color 140ms ease, opacity 140ms ease, width 140ms ease;
      }
      .msp-table-resizer:hover::after {
        background: var(--accent);
        opacity: 1;
      }
      .msp-table-resizer.active::after {
        background: var(--accent);
        opacity: 1;
        width: 2px;
      }
      body.msp-table-resizing {
        cursor: col-resize !important;
        user-select: none;
      }
      body.msp-table-resizing * {
        cursor: col-resize !important;
      }
      .msp-table td {
        padding: var(--table-body-pad-y) var(--table-body-pad-x);
        border-bottom: 1px solid var(--border-subtle);
        border-right: 1px solid var(--border-subtle);
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .msp-table tr:hover td {
        background: var(--table-row-hover-bg);
      }

      /* ---------- Modal ---------- */
      .msp-modal-overlay {
        position: fixed; inset: 0;
        background: color-mix(in srgb, #000 45%, transparent);
        backdrop-filter: blur(4px);
        display: flex; align-items: center; justify-content: center;
        z-index: 100; padding: 2rem;
      }
      .msp-modal {
        background: var(--card);
        max-width: 760px; width: 100%; max-height: 90vh;
        overflow-y: auto;
        border-radius: 6px;
        border: 1px solid var(--border-subtle);
        box-shadow: 0 30px 60px -10px rgba(0,0,0,0.35);
        position: relative;
        animation: mspIn 280ms cubic-bezier(.2,.7,.3,1);
      }
      @keyframes mspIn {
        from { transform: translateY(20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
      }
      .msp-modal-close {
        position: absolute; top: 0.6rem; right: 0.7rem;
        background: transparent; border: none;
        font-size: 1.7rem; color: var(--text-muted);
        cursor: pointer; line-height: 1;
        padding: 0.2rem 0.5rem;
      }
      .msp-modal-close:hover { color: var(--text-primary); }

      /* ---------- Phase 3: sticky context bar ----------
         Always-visible bar at the top of the DetailPanel modal carrying
         the priority color dot + compact title + bulk expand/collapse +
         close button. Replaces the previously-absolute .msp-modal-close
         and gives the user persistent context while scrolling through
         the section list. */
      .msp-modal-stickybar {
        position: sticky;
        top: 0;
        z-index: 5;
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: 0.6rem var(--space-5) 0.6rem 0.9rem;
        background: var(--card);
        border-bottom: 1px solid var(--border-subtle);
        /* Subtle transition for the scrolled-state shadow. */
        transition: box-shadow 180ms ease, border-color 180ms ease;
      }
      .msp-modal-stickybar.is-scrolled {
        /* Depth cue once content has scrolled beneath the bar. */
        box-shadow: 0 6px 12px -8px rgba(0,0,0,0.25);
        border-bottom-color: color-mix(in srgb, var(--border-subtle) 60%, transparent);
      }
      .msp-modal-stickybar-dot {
        flex: 0 0 auto;
        width: 10px; height: 10px;
        border-radius: 999px;
        box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 8%, transparent);
      }
      .msp-modal-stickybar-title {
        flex: 1 1 auto;
        font-family: 'Fraunces', Georgia, serif;
        font-size: 0.95rem;
        font-weight: 500;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
      }
      .msp-modal-stickybar-actions {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
      }
      .msp-modal-stickybar-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.25rem 0.6rem;
        font-family: ui-monospace, monospace;
        font-size: 0.65rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--text-secondary);
        background: transparent;
        border: 1px solid var(--border-subtle);
        border-radius: 999px;
        cursor: pointer;
        transition: color 0.15s, border-color 0.15s, background 0.15s;
      }
      .msp-modal-stickybar-btn:hover {
        color: var(--accent);
        border-color: var(--border-accent);
        background: color-mix(in srgb, var(--accent) 6%, transparent);
      }
      .msp-modal-stickybar-btn svg {
        opacity: 0.75;
      }

      /* ─── LensSelector — view-preset dropdown in the sticky bar ─── */
      .msp-lens-selector {
        position: relative;
        flex: 0 0 auto;
      }
      .msp-lens-trigger {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.25rem 0.6rem;
        font-family: ui-monospace, monospace;
        font-size: 0.65rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--text-secondary);
        background: transparent;
        border: 1px solid var(--border-subtle);
        border-radius: 999px;
        cursor: pointer;
        transition: color 0.15s, border-color 0.15s, background 0.15s;
      }
      .msp-lens-trigger:hover,
      .msp-lens-trigger.is-open {
        color: var(--accent);
        border-color: var(--border-accent);
        background: color-mix(in srgb, var(--accent) 6%, transparent);
      }
      .msp-lens-trigger-icon {
        display: inline-flex; align-items: center;
        opacity: 0.85;
      }
      .msp-lens-trigger-prefix {
        opacity: 0.6;
        font-weight: 400;
      }
      .msp-lens-trigger-label {
        font-weight: 500;
      }
      .msp-lens-trigger-chev {
        display: inline-flex;
        opacity: 0.7;
        transition: transform 160ms ease;
      }
      .msp-lens-trigger.is-open .msp-lens-trigger-chev {
        transform: rotate(-180deg);
      }
      /* Popover menu — anchored to the trigger, opens downward.
         Same visual rhythm as HeaderAgentsTrigger menu. */
      .msp-lens-menu {
        position: absolute;
        top: calc(100% + 0.4rem);
        right: 0;
        min-width: 320px;
        max-width: 380px;
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        box-shadow: 0 18px 40px -10px rgba(0,0,0,0.28);
        z-index: 50;
        animation: mspAgentsMenuIn 160ms cubic-bezier(.2,.7,.3,1);
      }
      .msp-lens-menu-head {
        padding: var(--space-4) var(--space-4) var(--space-3);
        border-bottom: 1px solid var(--border-subtle);
        display: flex; flex-direction: column;
        gap: 0.2rem;
      }
      .msp-lens-menu-title {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 1rem;
        color: var(--text-primary);
      }
      .msp-lens-menu-sub {
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 0.78rem;
        color: var(--text-muted);
        line-height: 1.4;
      }
      .msp-lens-menu-list {
        display: flex; flex-direction: column;
        padding: var(--space-2);
        gap: 0.1rem;
      }
      .msp-lens-menu-item {
        display: flex; align-items: flex-start;
        gap: var(--space-3);
        padding: 0.55rem 0.7rem;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 4px;
        cursor: pointer;
        text-align: left;
        color: var(--text-secondary);
        transition: background-color 80ms ease, color 80ms ease, border-color 80ms ease;
      }
      .msp-lens-menu-item:hover {
        background: color-mix(in srgb, var(--accent) 8%, transparent);
        color: var(--text-primary);
      }
      .msp-lens-menu-item.active {
        background: color-mix(in srgb, var(--accent) 14%, transparent);
        color: var(--accent);
        border-color: color-mix(in srgb, var(--accent) 30%, var(--border-subtle));
      }
      /* v3.6 R16: progressive disclosure — the "More lenses" toggle that
         expands the 4 power-user lens presets, plus styling for the
         secondary lens items so they read as nested. */
      .msp-lens-menu-more {
        display: flex; align-items: center; justify-content: space-between;
        gap: 0.4rem;
        padding: 0.35rem 0.7rem;
        margin-top: 0.15rem;
        background: transparent;
        border: 1px dashed var(--border-subtle);
        border-radius: 4px;
        cursor: pointer;
        text-align: left;
        color: var(--text-muted);
        font-family: inherit;
        font-size: 0.78rem;
        letter-spacing: 0.02em;
        text-transform: uppercase;
      }
      .msp-lens-menu-more:hover {
        background: color-mix(in srgb, var(--accent) 6%, transparent);
        color: var(--text-secondary);
        border-color: color-mix(in srgb, var(--accent) 20%, var(--border-subtle));
        border-style: solid;
      }
      .msp-lens-menu-more-count {
        opacity: 0.65;
      }
      .msp-lens-menu-item-secondary {
        margin-left: 0.5rem;
        border-left: 1px solid var(--border-subtle);
      }
      .msp-lens-menu-item-icon {
        display: inline-flex; align-items: center; justify-content: center;
        flex: 0 0 auto;
        width: 22px; height: 22px;
        color: var(--text-muted);
        margin-top: 0.05rem;
      }
      .msp-lens-menu-item.active .msp-lens-menu-item-icon {
        color: var(--accent);
      }
      .msp-lens-menu-item-body {
        display: flex; flex-direction: column;
        gap: 0.15rem;
        min-width: 0;
      }
      .msp-lens-menu-item-label {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        font-weight: 600;
        color: inherit;
      }
      .msp-lens-menu-item-desc {
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 0.78rem;
        line-height: 1.4;
        color: var(--text-muted);
      }
      .msp-lens-menu-item.active .msp-lens-menu-item-desc {
        color: var(--text-secondary);
      }
      /* Hide the "View:" prefix label on narrow viewports to save room. */
      @media (max-width: 600px) { /* phone — consolidated from 560 (#284) */
        .msp-lens-trigger-prefix { display: none; }
        .msp-lens-menu {
          right: -0.5rem;
          min-width: 280px;
          max-width: calc(100vw - 1rem);
        }
      }

      .msp-modal-stickybar-close {
        background: transparent;
        border: none;
        font-size: 1.5rem;
        line-height: 1;
        color: var(--text-muted);
        cursor: pointer;
        padding: 0.1rem 0.5rem;
        border-radius: 4px;
        transition: color 0.15s, background 0.15s;
      }
      .msp-modal-stickybar-close:hover {
        color: var(--text-primary);
        background: color-mix(in srgb, var(--text-muted) 12%, transparent);
      }
      /* Hide the action button labels on narrow viewports — keep the
         icon as the entire affordance. */
      @media (max-width: 600px) { /* phone — consolidated from 560 (#284) */
        .msp-modal-stickybar-btn span {
          display: none;
        }
        .msp-modal-stickybar-btn {
          padding: 0.3rem 0.45rem;
        }
      }

      .msp-modal-head {
        padding: var(--space-6) var(--space-6) var(--space-5);
        border-bottom: 1px solid var(--border-subtle);
      }
      .msp-modal-tags { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; font-size: 0.78rem; color: var(--text-muted); }
      .msp-modal-type { color: var(--text-secondary); font-style: italic; }
      .msp-modal-sep { color: var(--text-muted); }
      .msp-modal-subtype { color: var(--text-secondary); font-style: italic; }
      .msp-modal-title {
        font-size: clamp(1.6rem, 3vw, 2.2rem);
        font-weight: 400; line-height: 1.15;
        margin: var(--space-2) 0 var(--space-3);
      }
      /* All meta-items below the title share a consistent vertical rhythm
         using var(--space-3) — they read as a tight cluster, not a stack
         of disconnected lines. */
      .msp-modal-priority-row {
        display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;
        margin-top: var(--space-3);
      }
      .msp-modal-pillset { display: flex; gap: var(--space-2); flex-wrap: wrap; }
      .msp-modal-pill {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs); letter-spacing: 0.1em;
        text-transform: uppercase;
        padding: 0.18rem 0.55rem;
        border: 1px solid var(--border-subtle);
        border-radius: 999px;
        color: var(--text-muted);
      }
      .msp-modal-altlens {
        margin-top: var(--space-3);
        display: flex; align-items: center; gap: var(--space-2);
        flex-wrap: wrap;
        font-size: var(--text-sm);
        color: var(--text-muted);
      }
      .msp-modal-altlens-label {
        font-family: ui-monospace, monospace;
        letter-spacing: 0.1em; text-transform: uppercase;
      }
      .msp-modal-altlens-value {
        font-style: italic; color: var(--text-secondary);
      }
      .msp-modal-routing {
        margin-top: var(--space-3);
        display: flex; align-items: center; gap: var(--space-2);
        font-size: var(--text-sm);
        color: var(--text-secondary);
      }
      .msp-modal-routing-arrow {
        font-size: 0.95rem; line-height: 1;
        color: var(--text-muted);
      }
      .msp-modal-routing-label {
        font-style: italic;
      }
      .msp-modal-routing-target {
        font-family: "Fraunces", Georgia, serif;
        font-weight: 500;
        font-size: 0.92rem;
      }
      .msp-section {
        padding: var(--space-5) var(--space-6);
        border-bottom: 1px solid var(--border-subtle);
      }
      .msp-section:last-child { border-bottom: none; }
      .msp-section-label {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs); letter-spacing: 0.18em;
        color: var(--text-muted); text-transform: uppercase;
        margin-bottom: var(--space-3);
      }

      /* ---------- Canonical modal-body typography (v3.8.1) ----------
         The detail-panel sections (Role, Workflow, Skill, etc.) used to
         author prose paragraphs and bulleted lists with ad-hoc inline
         styles — paddingLeft "1.2rem", marginBottom "0.25rem"/"0.35rem",
         margin 0, etc. Each panel rolled its own values, which drifted
         between sections within the SAME modal (italic vs plain, small
         vs medium, different bullet indents). These classes centralize
         the rules so every Section body reads at one consistent size,
         indent, and line-height — the way .msp-field-val centralizes
         the at-a-glance grid. Pulls from --text-*/--space-* tokens. */
      .msp-modal-prose {
        margin: 0;
        font-size: 0.95rem;        /* matches .msp-field-val */
        line-height: 1.55;
        color: var(--text-primary);
      }
      .msp-modal-prose--soft {
        color: var(--text-secondary);
        font-style: italic;
      }
      .msp-modal-prose + .msp-modal-prose {
        /* Stacked paragraphs in one Section: minor breathing room. */
        margin-top: var(--space-2);
      }
      .msp-modal-list {
        margin: 0;
        padding-left: var(--space-5); /* aligned to section-label indent */
        font-size: 0.95rem;
        line-height: 1.55;
        color: var(--text-primary);
      }
      .msp-modal-list > li {
        margin-bottom: var(--space-2);
      }
      .msp-modal-list > li:last-child { margin-bottom: 0; }
      .msp-modal-note {
        margin: var(--space-3) 0 0;
        font-size: var(--text-sm);
        font-style: italic;
        color: var(--text-muted);
      }

      /* ---------- Collapsible section (modal detail view) ----------
         The collapsible variant trades the static .msp-section-label
         for a clickable header that toggles the body. Closed sections
         render only the header line, eliminating most of the modal's
         scroll length. Body mounts/unmounts on toggle so heavy bodies
         (Profile fetch, Candidates skill-scoring) only run when the
         user expands. */
      .msp-collapsible {
        /* Tighter padding than .msp-section because the header IS the
           label — no separate label row to indent below. */
        padding: 0;
      }
      .msp-collapsible-header {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        width: 100%;
        padding: var(--space-4) var(--space-6);
        background: transparent;
        border: none;
        cursor: pointer;
        text-align: left;
        color: var(--text-secondary);
        transition: background 120ms ease, color 120ms ease;
      }
      .msp-collapsible-header:hover {
        background: color-mix(in srgb, var(--accent) 6%, transparent);
        color: var(--text-primary);
      }
      .msp-collapsible-header:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: -2px;
      }
      .msp-collapsible-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 18px; height: 18px;
        color: var(--text-muted);
      }
      .msp-collapsible-icon svg {
        width: 14px; height: 14px;
      }
      .msp-collapsible.is-open .msp-collapsible-icon {
        color: var(--accent);
      }
      .msp-collapsible-title {
        flex: 0 0 auto;
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: inherit;
      }
      .msp-collapsible-count {
        flex: 0 0 auto;
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 0.8rem;
        color: var(--text-muted);
        padding: 0.05rem 0.55rem;
        background: color-mix(in srgb, var(--accent) 8%, transparent);
        border: 1px solid var(--border-subtle);
        border-radius: 999px;
      }
      .msp-collapsible.is-open .msp-collapsible-count {
        background: color-mix(in srgb, var(--accent) 14%, transparent);
        color: var(--text-secondary);
      }
      .msp-collapsible-chevron {
        flex: 0 0 auto;
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
        transition: transform 180ms ease, color 120ms ease;
      }
      .msp-collapsible.is-open .msp-collapsible-chevron {
        transform: rotate(-180deg);
        color: var(--accent);
      }
      .msp-collapsible-body {
        padding: 0 var(--space-6) var(--space-5);
        animation: mspSectionIn 220ms cubic-bezier(.2,.7,.3,1);
      }
      @keyframes mspSectionIn {
        from { opacity: 0; transform: translateY(-4px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      /* Subtle dashed separator above a closed section so the modal
         doesn't read as one unbroken stripe. Open sections inherit the
         solid .msp-section bottom border. */
      .msp-collapsible.is-closed {
        border-bottom: 1px dashed var(--border-subtle);
      }
      /* Footer note listing sections hidden due to un-generated
         enrichments. Single italic line, muted — informational only. */
      .msp-section-footer {
        padding: var(--space-4) var(--space-6);
        font-size: var(--text-sm);
        color: var(--text-muted);
        font-family: 'Fraunces', Georgia, serif;
        line-height: 1.5;
        border-top: 1px dashed var(--border-subtle);
      }
      .msp-section-footer span {
        font-style: normal;
        font-family: ui-monospace, monospace;
        font-size: 0.8em;
        color: var(--text-secondary);
        padding: 0 0.3rem;
        border-bottom: 1px dotted var(--text-muted);
        cursor: help;
      }

      /* ---------- Phase 2: tagline subtitle, phase dividers, metadata
         sub-groups ----------
         The tagline lives in the modal head as a one-line italic subtitle
         below the title, framing what makes the ticket distinctive. */
      .msp-modal-tagline {
        margin: 0 0 var(--space-3);
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 1.05rem;
        line-height: 1.45;
        color: var(--text-secondary);
        max-width: 60ch;
      }

      /* Phase divider — small uppercase label between section groups
         (Understand / Act / Track / Reference). Renders as a narrow band
         with a faint horizontal rule on the left and a one-line hint on
         the right. Not a section itself — no border, no body padding. */
      .msp-phase-divider {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-5) var(--space-6) var(--space-2);
        color: var(--text-muted);
      }
      .msp-phase-divider-rule {
        flex: 0 0 1.75rem;
        height: 1px;
        background: currentColor;
        opacity: 0.4;
      }
      .msp-phase-divider-label {
        flex: 0 0 auto;
        font-family: ui-monospace, monospace;
        font-size: 0.65rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--accent);
        font-weight: 600;
      }
      .msp-phase-divider-hint {
        flex: 1 1 auto;
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 0.82rem;
        color: var(--text-muted);
      }

      /* Metadata section sub-groups — used inside the merged "Metadata"
         CollapsibleSection to separate Impact & Urgency / SLA /
         Reference / Autotask Mapping without nested collapsibles. Each
         group gets a small uppercase mono label and the standard
         ref-grid layout below. Vertical spacing between groups matches
         the rhythm of other section bodies. */
      .msp-meta-group {
        padding-bottom: var(--space-4);
        margin-bottom: var(--space-4);
        border-bottom: 1px dashed var(--border-subtle);
      }
      .msp-meta-group:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: none;
      }
      .msp-meta-group-label {
        margin: 0 0 var(--space-3);
        font-family: ui-monospace, monospace;
        font-size: 0.68rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--text-muted);
        font-weight: 600;
      }
      .msp-ref-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 0.7rem 1.5rem;
      }
      .msp-field { display: flex; flex-direction: column; gap: 0.15rem; }
      .msp-field-key {
        font-family: ui-monospace, monospace;
        font-size: 0.6rem; letter-spacing: 0.14em;
        color: var(--text-muted); text-transform: uppercase;
      }
      .msp-field-val { font-size: 0.95rem; color: var(--text-primary); }
      .msp-field-highlight {
        background: color-mix(in srgb, var(--accent) 12%, transparent);
        padding: 0.15rem 0.5rem; border-radius: 3px;
        border: 1px solid var(--border-accent);
        align-self: flex-start;
      }
      /* Canonical view-container shape — matches .msp-clients,
         .msp-statuses, .msp-workflows, .msp-roles, .msp-pods,
         .msp-records (post-Phase-3 normalization). No horizontal
         padding so the ViewHeader card spans the same width as in
         every other tab. */
      .msp-skills-browse {
        display: flex; flex-direction: column;
        gap: var(--space-5);
        padding-bottom: var(--space-6);
      }
      .msp-skill-dist {
        display: inline-flex; align-items: flex-end;
        gap: 0.12rem;
        height: 18px;
        margin-left: 0.4rem;
      }
      .msp-skill-dist-bar {
        width: 4px;
        background: var(--accent);
        border-radius: 1px;
      }
      .msp-skill-row-items {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 0.5rem;
        padding: 0.4rem 0.7rem 0.7rem;
      }
      .msp-skill-item-card {
        display: flex; flex-direction: column;
        gap: 0.2rem;
        padding: 0.55rem 0.7rem;
        background: var(--bg);
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
        cursor: pointer;
        text-align: left;
        font-size: 0.85rem;
        color: var(--text-primary);
      }
      .msp-skill-item-card:hover { border-color: var(--border-accent); }
      .msp-skill-item-card.selected {
        background: color-mix(in srgb, var(--accent) 10%, var(--bg));
        border-color: var(--border-accent);
      }

      .msp-insights-empty {
        font-size: 0.92rem; color: var(--text-secondary);
        line-height: 1.55; margin: 0;
      }
      .msp-insights-empty code {
        font-family: ui-monospace, monospace;
        font-size: 0.85em;
        background: color-mix(in srgb, var(--accent) 10%, transparent);
        padding: 0.05rem 0.35rem; border-radius: 3px;
      }
      .msp-insights { display: flex; flex-direction: column; gap: 1rem; }
      .msp-insights .msp-insights-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 0.7rem 1.5rem;
      }
      .msp-insights-stat {
        display: flex; flex-direction: column;
        gap: 0.3rem;
      }
      .msp-insights-tag {
        display: inline-flex; align-items: center;
        font-family: ui-monospace, monospace;
        font-size: 0.66rem; letter-spacing: 0.14em;
        text-transform: uppercase;
        padding: 0.2rem 0.65rem;
        border: 1px solid;
        border-radius: 999px;
        font-weight: 500;
        align-self: flex-start;
      }
      .msp-insights-cost {
        font-family: ui-monospace, monospace;
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--text-primary);
      }
      .msp-insights-stat-sub {
        font-size: 0.78rem;
        color: var(--text-muted);
      }
      .msp-insights-lever {
        padding-top: 0.7rem;
        border-top: 1px dashed var(--border-subtle);
      }
      .msp-insights-lever-text {
        font-size: 0.95rem;
        line-height: 1.55;
        color: var(--text-primary);
        margin: 0;
        padding: 0.7rem 0.9rem;
        background: color-mix(in srgb, var(--accent) 5%, transparent);
        border-left: 3px solid var(--accent);
        border-radius: 4px;
      }

      .msp-steps-empty {
        font-size: 0.92rem; color: var(--text-secondary);
        line-height: 1.55; margin: 0;
      }
      .msp-steps-empty code {
        font-family: ui-monospace, monospace;
        font-size: 0.85em;
        background: color-mix(in srgb, var(--accent) 10%, transparent);
        padding: 0.05rem 0.35rem; border-radius: 3px;
      }
      .msp-steps { display: flex; flex-direction: column; gap: 1rem; }
      .msp-steps-list {
        list-style: none; padding: 0; margin: 0;
        display: flex; flex-direction: column;
        gap: 0.7rem;
        counter-reset: steps;
      }
      .msp-steps-item {
        display: flex; gap: 0.75rem;
      }
      .msp-steps-num {
        flex-shrink: 0;
        width: 1.6rem; height: 1.6rem;
        display: inline-flex; align-items: center; justify-content: center;
        font-family: ui-monospace, monospace;
        font-size: 0.75rem; font-weight: 600;
        color: var(--accent);
        border: 1px solid var(--border-accent);
        border-radius: 50%;
        background: color-mix(in srgb, var(--accent) 8%, transparent);
      }
      .msp-steps-body {
        flex: 1;
        display: flex; flex-direction: column;
        gap: 0.25rem;
      }
      .msp-steps-action {
        font-size: 0.95rem; line-height: 1.45;
        color: var(--text-primary);
      }
      .msp-steps-verify {
        font-size: 0.84rem;
        line-height: 1.4;
        color: var(--text-secondary);
        font-style: italic;
      }
      .msp-steps-verify-label {
        font-family: ui-monospace, monospace;
        font-style: normal;
        font-size: 0.62rem; letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-right: 0.2rem;
      }
      .msp-steps-closure {
        padding-top: 0.7rem;
        border-top: 1px dashed var(--border-subtle);
      }
      .msp-steps-closure-list {
        margin: 0; padding-left: 1.1rem;
        font-size: 0.92rem; line-height: 1.5;
        color: var(--text-primary);
      }
      .msp-steps-closure-list li { margin-bottom: 0.25rem; }
      .msp-steps-closure-list li:last-child { margin-bottom: 0; }

      .msp-tools-empty {
        font-size: 0.92rem; color: var(--text-secondary);
        line-height: 1.55; margin: 0;
      }
      .msp-tools-empty code {
        font-family: ui-monospace, monospace;
        font-size: 0.85em;
        background: color-mix(in srgb, var(--accent) 10%, transparent);
        padding: 0.05rem 0.35rem; border-radius: 3px;
      }
      .msp-tools-body {
        display: flex; flex-direction: column;
      }
      .msp-tools-categories {
        display: flex; flex-wrap: wrap;
        gap: 0.4rem;
        align-items: center;
        margin-bottom: var(--space-3);
        padding-bottom: var(--space-3);
        border-bottom: 1px dashed var(--border-subtle);
      }
      .msp-tools-categories-label {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        letter-spacing: 0.08em;
        margin-right: 0.25rem;
      }
      .msp-tools-category-chip {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        padding: 0.15rem 0.5rem;
        background: var(--chip-bg);
        border: 1px solid var(--border-subtle);
        border-radius: 10px;
        color: var(--text-secondary);
        letter-spacing: 0.04em;
        cursor: help;
      }
      .msp-tools-list {
        list-style: none; padding: 0; margin: 0;
        display: flex; flex-direction: column;
        gap: 0.5rem;
      }
      .msp-tools-item {
        display: flex; flex-direction: column;
        gap: 0.2rem;
        padding: 0.55rem 0.75rem;
        background: var(--bg);
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
      }
      .msp-tools-item-head {
        display: flex; align-items: center;
        gap: 0.6rem;
        flex-wrap: wrap;
      }
      .msp-tools-item-tool {
        flex: 1;
        font-weight: 500;
        font-size: 0.92rem;
        color: var(--text-primary);
      }
      .msp-tools-item-scope {
        font-family: ui-monospace, monospace;
        font-size: 0.62rem; letter-spacing: 0.1em;
        text-transform: uppercase;
        padding: 0.12rem 0.5rem;
        border: 1px solid;
        border-radius: 999px;
        white-space: nowrap;
      }
      .msp-tools-item-access {
        font-size: 0.85rem;
        color: var(--text-secondary);
        font-style: italic;
      }

      .msp-disambig-empty {
        font-size: 0.92rem; color: var(--text-secondary);
        line-height: 1.55; margin: 0;
      }
      .msp-disambig-empty code {
        font-family: ui-monospace, monospace;
        font-size: 0.85em;
        background: color-mix(in srgb, var(--accent) 10%, transparent);
        padding: 0.05rem 0.35rem; border-radius: 3px;
      }
      .msp-disambig-list {
        list-style: none; padding: 0; margin: 0;
        display: flex; flex-direction: column;
        gap: 0.5rem;
      }
      .msp-disambig-item { margin: 0; }
      .msp-disambig-link {
        display: flex; flex-direction: column;
        gap: 0.3rem;
        width: 100%;
        text-align: left;
        padding: 0.6rem 0.8rem;
        background: var(--bg);
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
        cursor: pointer;
        font-family: inherit;
      }
      .msp-disambig-link:hover:not(:disabled) {
        border-color: var(--border-accent);
      }
      .msp-disambig-link:disabled {
        cursor: default; opacity: 0.6;
      }
      .msp-disambig-link-head {
        display: flex; align-items: center;
        gap: 0.6rem;
      }
      .msp-disambig-link-item {
        font-weight: 500;
        color: var(--text-primary);
        font-size: 0.92rem;
      }
      .msp-disambig-signal {
        font-size: 0.86rem;
        color: var(--text-secondary);
        line-height: 1.5;
      }

      .msp-userfacing { display: flex; flex-direction: column; gap: 0.95rem; }
      .msp-userfacing-empty {
        font-size: 0.92rem; color: var(--text-secondary);
        line-height: 1.55; margin: 0;
      }
      .msp-userfacing-empty code {
        font-family: ui-monospace, monospace;
        font-size: 0.85em;
        background: color-mix(in srgb, var(--accent) 10%, transparent);
        padding: 0.05rem 0.35rem; border-radius: 3px;
      }
      .msp-userfacing-eligibility {
        display: flex; align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem 0.7rem;
      }
      .msp-userfacing-tier-badge {
        font-family: ui-monospace, monospace;
        font-size: 0.66rem; letter-spacing: 0.14em;
        text-transform: uppercase;
        padding: 0.2rem 0.65rem;
        border: 1px solid;
        border-radius: 999px;
        font-weight: 500;
      }
      .msp-userfacing-tier-desc {
        font-size: 0.82rem;
        color: var(--text-secondary);
        font-style: italic;
      }
      .msp-userfacing-description {
        font-family: "Fraunces", Georgia, serif;
        font-size: 1rem;
        line-height: 1.6;
        color: var(--text-primary);
        margin: 0;
        padding: 0.7rem 0.9rem;
        background: color-mix(in srgb, var(--accent) 5%, transparent);
        border-left: 3px solid var(--accent);
        border-radius: 4px;
      }
      .msp-userfacing-prereqs { display: flex; flex-direction: column; gap: 0.2rem; }
      .msp-userfacing-prereqs-list {
        margin: 0; padding-left: 1.1rem;
        font-size: 0.92rem; color: var(--text-primary);
        line-height: 1.55;
      }
      .msp-userfacing-prereqs-list li { margin-bottom: 0.25rem; }
      .msp-userfacing-prereqs-list li:last-child { margin-bottom: 0; }

      .msp-escalation-empty {
        font-size: 0.92rem; color: var(--text-secondary);
        line-height: 1.55; margin: 0;
      }
      .msp-escalation-list {
        list-style: none; padding: 0; margin: 0;
        display: flex; flex-direction: column;
        gap: 0.7rem;
      }
      .msp-escalation-step {
        display: flex; gap: 0.8rem;
        padding-left: 0;
      }
      .msp-escalation-spine {
        width: 3px;
        flex-shrink: 0;
        border-radius: 1.5px;
      }
      .msp-escalation-step-body {
        flex: 1;
        display: flex; flex-direction: column;
        gap: 0.2rem;
      }
      .msp-escalation-step-head {
        display: flex; align-items: center;
        gap: 0.55rem;
        flex-wrap: wrap;
      }
      .msp-escalation-time {
        font-family: ui-monospace, monospace;
        font-size: 0.78rem; font-weight: 600;
        color: var(--text-primary);
        min-width: 3.5rem;
      }
      .msp-escalation-trigger {
        font-family: ui-monospace, monospace;
        font-size: 0.62rem; letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .msp-escalation-level {
        font-family: ui-monospace, monospace;
        font-size: 0.62rem; letter-spacing: 0.1em;
        text-transform: uppercase;
        padding: 0.12rem 0.5rem;
        border: 1px solid;
        border-radius: 999px;
        margin-left: auto;
      }
      .msp-escalation-action {
        font-size: 0.92rem;
        color: var(--text-primary);
        line-height: 1.5;
      }

      .msp-skills { display: flex; flex-direction: column; gap: 0.95rem; }
      .msp-skills-empty {
        font-size: 0.92rem; color: var(--text-secondary);
        line-height: 1.55; margin: 0;
      }
      .msp-skills-empty code {
        font-family: ui-monospace, monospace;
        font-size: 0.85em;
        background: color-mix(in srgb, var(--accent) 10%, transparent);
        padding: 0.05rem 0.35rem; border-radius: 3px;
      }
      .msp-skills-groups { display: flex; flex-direction: column; gap: 0.85rem; }
      .msp-skills-group { display: flex; flex-direction: column; gap: 0.4rem; }
      .msp-skills-group-label {
        font-family: ui-monospace, monospace;
        font-size: 0.6rem; letter-spacing: 0.16em;
        color: var(--text-muted); text-transform: uppercase;
      }
      .msp-skills-chips {
        display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem;
      }
      .msp-skill-chip {
        display: inline-flex; flex-direction: column; align-items: flex-start;
        gap: var(--space-1);
        padding: 0.28rem 0.6rem;
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
        background: var(--chip-bg);
        font-size: 0.82rem;
        color: var(--text-primary);
        max-width: 100%;
      }
      .msp-skill-chip-row {
        display: inline-flex; align-items: center;
        gap: var(--space-2);
      }
      .msp-skill-chip-label { font-weight: 500; }
      .msp-skill-products {
        display: flex; flex-wrap: wrap;
        align-items: center;
        gap: var(--space-1);
        margin-top: 2px;
      }
      .msp-skill-products-label {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-right: var(--space-1);
      }
      .msp-skill-products-list {
        display: inline-flex; flex-wrap: wrap;
        gap: var(--space-1);
      }
      .msp-skill-product {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-secondary);
        background: var(--bg);
        border: 1px solid var(--border-subtle);
        padding: 1px 5px;
        border-radius: 3px;
        white-space: nowrap;
      }
      .msp-skill-chip-ambient {
        font-style: italic;
        color: var(--text-secondary);
        background: transparent;
        border-style: dashed;
      }
      .msp-level-dots {
        display: inline-flex; align-items: center; gap: 0.18rem;
      }
      .msp-level-dot {
        width: 0.42rem; height: 0.42rem; border-radius: 50%;
        background: color-mix(in srgb, var(--text-muted) 30%, transparent);
      }
      .msp-level-dot-on {
        background: var(--accent);
      }
      .msp-level-text {
        margin-left: 0.4rem;
        font-family: ui-monospace, monospace;
        font-size: 0.62rem; letter-spacing: 0.1em;
        color: var(--text-muted); text-transform: uppercase;
      }
      .msp-skills-ambient {
        display: flex; flex-direction: column; gap: 0.4rem;
        padding-top: 0.6rem;
        border-top: 1px dashed var(--border-subtle);
      }

      .msp-profile { display: flex; flex-direction: column; gap: 1rem; }
      .msp-profile-tagline {
        font-family: "Fraunces", Georgia, serif;
        font-size: 1.05rem; font-style: italic;
        color: var(--text-primary); line-height: 1.4;
        margin: 0 0 0.2rem;
      }
      .msp-profile-intro {
        font-size: 0.95rem; color: var(--text-primary);
        line-height: 1.55; margin: 0;
      }
      .msp-profile-block { display: flex; flex-direction: column; gap: 0.4rem; }
      .msp-profile-block-label {
        font-family: ui-monospace, monospace;
        font-size: 0.62rem; letter-spacing: 0.18em;
        color: var(--text-muted); text-transform: uppercase;
      }
      .msp-profile-paragraph {
        font-size: 0.93rem; color: var(--text-primary);
        line-height: 1.6; margin: 0;
      }
      .msp-profile-list {
        margin: 0; padding-left: 1.1rem;
        font-size: 0.93rem; color: var(--text-primary);
        line-height: 1.55;
      }
      .msp-profile-list li { margin-bottom: 0.3rem; }
      .msp-profile-list li:last-child { margin-bottom: 0; }
      .msp-profile-loading { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.4rem 0; }
      .msp-profile-skeleton-row {
        height: 0.7rem; border-radius: 4px;
        background: linear-gradient(
          90deg,
          color-mix(in srgb, var(--text-muted) 12%, transparent) 0%,
          color-mix(in srgb, var(--text-muted) 22%, transparent) 50%,
          color-mix(in srgb, var(--text-muted) 12%, transparent) 100%
        );
        background-size: 200% 100%;
        animation: msp-shimmer 1.4s linear infinite;
      }
      @keyframes msp-shimmer {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
      }
      .msp-profile-error {
        display: flex; flex-direction: column; align-items: flex-start;
        gap: 0.7rem; font-size: 0.92rem; color: var(--text-secondary);
      }
      .msp-profile-error p { margin: 0; }

      .msp-empty {
        padding: 4rem 1rem; text-align: center;
        color: var(--text-muted); font-style: italic;
      }

      /* ===== Statuses view — per-board lifecycles as swimlanes ===== */
      .msp-statuses {
        display: flex; flex-direction: column;
        gap: var(--space-5);
        padding-bottom: var(--space-6);
      }
      .msp-statuses-intro {
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        padding: var(--space-4) var(--space-5);
        font-size: var(--text-base);
        color: var(--text-secondary);
        line-height: 1.6;
      }
      .msp-statuses-intro p { margin: 0 0 var(--space-3); }
      .msp-statuses-legend {
        display: flex; flex-wrap: wrap;
        align-items: center;
        gap: var(--space-3);
        font-size: var(--text-sm);
      }
      /* v3.23.4 — breathing room between the PSA selector chips and the
         color legend when both stack in the Statuses ViewHeader extras.
         Adjacent-sibling combinator only fires when psaLensControls is
         actually rendered (it's null on some paradigms), so a legend that
         leads the extras block gets no stray top gap. A hairline divider
         reinforces that the legend is its own band, not part of the PSA row. */
      .msp-psa-lens-controls + .msp-statuses-legend {
        margin-top: var(--space-4);
        padding-top: var(--space-4);
        border-top: 1px solid var(--border-subtle);
        width: 100%;
      }
      .msp-statuses-legend-item {
        display: inline-flex; align-items: center;
        gap: var(--space-1);
        color: var(--text-secondary);
      }
      .msp-statuses-legend-swatch {
        display: inline-block;
        width: 12px; height: 12px;
        border-radius: 3px;
      }
      .msp-statuses-legend-sep {
        display: inline-block;
        width: 1px;
        height: 1rem;
        background: var(--border-subtle);
        margin: 0 var(--space-2);
      }

      .msp-status-lane {
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        padding: var(--space-4) var(--space-5);
        display: flex; flex-direction: column;
        gap: var(--space-3);
      }
      .msp-status-lane-head {
        display: flex; align-items: center;
        gap: var(--space-2);
        font-size: var(--text-md);
      }
      .msp-status-lane-dot {
        display: inline-block;
        width: 10px; height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .msp-status-lane-label {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-lg);
        font-weight: 500;
        color: var(--text-primary);
      }
      .msp-status-lane-meta {
        font-size: var(--text-sm);
        color: var(--text-muted);
        font-family: ui-monospace, monospace;
      }

      .msp-status-flow {
        display: flex; flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2);
      }
      .msp-status-pill {
        display: inline-flex; flex-direction: column;
        align-items: flex-start;
        padding: var(--space-2) var(--space-3);
        border: 1.5px solid;
        border-radius: 6px;
        cursor: default;
        min-width: 110px;
      }
      .msp-status-pill-label {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-base);
        font-weight: 500;
        color: var(--text-primary);
        line-height: 1.2;
      }
      .msp-status-pill-meta {
        display: flex; align-items: center;
        gap: var(--space-1);
        margin-top: var(--space-1);
      }
      .msp-status-pill-tag {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-muted);
        background: color-mix(in srgb, var(--text-muted) 12%, transparent);
        padding: 1px 5px;
        border-radius: 3px;
      }
      .msp-status-pill.is-entry { box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 25%, transparent); }
      .msp-status-pill.is-terminal { opacity: 0.85; }

      .msp-status-sla-dot {
        display: inline-block;
        width: 7px; height: 7px;
        border-radius: 50%;
        background: var(--text-muted);
      }
      .msp-status-sla-dot.running { background: #6b8f6e; }
      .msp-status-sla-dot.paused {
        background: transparent;
        border: 1.5px solid #a89177;
        width: 6px; height: 6px;
      }
      .msp-status-sla-dot.stopped {
        background: transparent;
        border: 1px dashed var(--text-muted);
        width: 6px; height: 6px;
      }

      .msp-status-arrow {
        font-size: var(--text-md);
        color: var(--text-muted);
        margin: 0 var(--space-1);
      }

      .msp-status-samples {
        display: flex; flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2);
        padding-top: var(--space-2);
        border-top: 1px dashed var(--border-subtle);
        font-size: var(--text-sm);
      }
      .msp-status-samples-label {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .msp-status-sample {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-sm);
        font-style: italic;
        color: var(--text-secondary);
        background: var(--bg);
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
        padding: var(--space-1) var(--space-2);
        cursor: pointer;
      }
      .msp-status-sample:hover {
        color: var(--accent);
        border-color: var(--border-accent);
      }

      /* Lifecycle section in the modal — same pill styling, lighter framing */
      .msp-lifecycle {
        display: flex; flex-direction: column;
        gap: var(--space-3);
      }
      .msp-lifecycle-flow {
        display: flex; flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2);
      }
      .msp-lifecycle-hint {
        font-size: var(--text-sm);
        color: var(--text-secondary);
        line-height: 1.55;
        margin: 0;
        font-style: italic;
      }
      .msp-lifecycle-empty {
        font-size: var(--text-sm);
        color: var(--text-muted);
        font-style: italic;
        margin: 0;
      }

      /* ===== Documentation view (v3.1.7) — 22 canonical doc types ===== */
      .msp-documentation {
        display: flex; flex-direction: column;
        gap: var(--space-5);
        padding-bottom: var(--space-6);
      }
      /* Browse mode — grouped by audience */
      .msp-doc-browse {
        display: flex; flex-direction: column;
        gap: var(--space-5);
      }
      .msp-doc-aud-group {
        display: flex; flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-4);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-left: 3px solid var(--aud-accent, var(--accent));
        border-radius: 8px;
      }
      .msp-doc-aud-head {
        display: flex; align-items: center;
        gap: var(--space-3);
      }
      .msp-doc-aud-dot {
        width: 10px; height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .msp-doc-aud-label {
        font-family: 'Fraunces', Georgia, serif;
        font-size: var(--text-xl);
        font-weight: 500;
        color: var(--text-primary);
        margin: 0;
        flex: 1;
      }
      .msp-doc-aud-count {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .msp-doc-aud-desc {
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: var(--text-sm);
        color: var(--text-muted);
        line-height: 1.5;
        margin: 0 0 var(--space-2) 0;
      }
      .msp-doc-aud-list {
        display: flex; flex-direction: column;
        gap: var(--space-2);
      }
      .msp-doc-row {
        display: flex; flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-4);
        background: var(--bg);
        border: 1px solid var(--border-subtle);
        border-left: 2px solid var(--border-subtle);
        border-radius: 4px;
        cursor: pointer;
        text-align: left;
        font-family: inherit;
        color: var(--text-primary);
        transition: border-color 120ms ease, background 120ms ease;
      }
      /* v3.20.2: hover/row recipe per design-system §8.5, with the
         per-audience accent kept as the tint source (audience-colored
         rows are intentional in browse mode). */
      .msp-doc-row:hover {
        border-color: var(--aud-accent, var(--accent));
        border-left-color: var(--aud-accent, var(--accent));
        background: color-mix(in srgb, var(--aud-accent, var(--accent)) 7%, transparent);
      }
      .msp-doc-row-head {
        display: flex; align-items: center;
        gap: var(--space-3);
        justify-content: space-between;
      }
      .msp-doc-row-label {
        font-family: 'Fraunces', Georgia, serif;
        font-size: var(--card-title-font);
        font-weight: 500;
        color: var(--text-primary);
      }
      .msp-doc-row-badges {
        display: flex; align-items: center;
        gap: var(--space-2);
      }
      .msp-doc-row-desc {
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: var(--text-sm);
        color: var(--text-secondary);
        line-height: 1.45;
        margin: 0;
      }
      .msp-doc-row-meta {
        display: flex; flex-wrap: wrap;
        gap: var(--space-3);
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
      }
      .msp-doc-row-meta-label {
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }
      .msp-doc-row-meta-value {
        color: var(--text-primary);
        font-weight: 600;
      }
      /* Cards mode — audience-color accent */
      /* .msp-doc-cards-grid superseded by .msp-card-grid (v3.24.0). */
      /* Owner-boards mini chips (used in table + detail) */
      .msp-doc-owner-boards {
        display: inline-flex; gap: 0.3rem;
        flex-wrap: wrap;
      }
      .msp-doc-board-chip {
        display: inline-flex; align-items: center;
        gap: 0.3rem;
        padding: 0.1rem 0.4rem;
        border: 1px solid var(--border-subtle);
        border-radius: 3px;
        background: var(--bg);
        font-family: ui-monospace, monospace;
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text-secondary);
      }
      .msp-doc-board-chip-lg {
        display: inline-flex; align-items: center;
        gap: var(--space-2);
        padding: 0.3rem 0.7rem;
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
        background: var(--card);
        font-family: 'Fraunces', Georgia, serif;
        font-size: var(--text-sm);
        color: var(--text-primary);
      }
      .msp-doc-board-dot {
        width: 8px; height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      /* Detail modal layout */
      .msp-doc-detail {
        display: flex; flex-direction: column;
        gap: var(--space-5);
        padding: var(--space-5);
      }
      /* lead prose for the KB detail (the article summary sits above the meta) */
      .msp-doc-detail-summary {
        font-family: 'Fraunces', Georgia, serif;
        font-size: var(--text-sm);
        line-height: 1.6;
        color: var(--text-secondary);
        margin: 0;
      }
      .msp-doc-detail-meta-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: var(--space-4);
      }
      .msp-doc-detail-meta {
        display: flex; flex-direction: column;
        gap: var(--space-2);
      }
      .msp-doc-detail-meta-label {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--text-muted);
      }
      .msp-doc-detail-meta-desc {
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: var(--text-sm);
        color: var(--text-muted);
        line-height: 1.4;
      }
      .msp-doc-detail-section {
        display: flex; flex-direction: column;
        gap: var(--space-3);
      }
      .msp-doc-detail-section-title {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--text-muted);
        margin: 0;
      }
      .msp-doc-detail-list {
        margin: 0; padding-left: var(--space-5);
        font-family: 'Fraunces', Georgia, serif;
        font-size: var(--text-sm);
        line-height: 1.55;
        color: var(--text-secondary);
        display: flex; flex-direction: column;
        gap: var(--space-1);
      }
      .msp-doc-detail-boards {
        display: flex; flex-wrap: wrap;
        gap: var(--space-2);
      }
      .msp-doc-detail-products {
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: var(--text-sm);
        color: var(--text-muted);
        margin: 0;
      }
      .msp-doc-detail-records {
        display: flex; flex-wrap: wrap;
        gap: var(--space-2);
      }
      .msp-doc-detail-record-chip {
        display: inline-flex; align-items: center;
        gap: var(--space-2);
        padding: 0.35rem 0.7rem;
        background: var(--bg);
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
        cursor: pointer;
        font-family: inherit;
        font-size: var(--text-sm);
        color: var(--text-primary);
        transition: border-color 100ms, background 100ms;
      }
      .msp-doc-detail-record-chip:hover {
        border-color: var(--accent);
        background: color-mix(in srgb, var(--accent) 6%, var(--bg));
      }

      /* ===== Workflows view — canonical recipe library ===== */
      .msp-workflows {
        display: flex; flex-direction: column;
        gap: var(--space-5);
        padding-bottom: var(--space-6);
      }
      .msp-workflows-intro {
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        padding: var(--space-4) var(--space-5);
        font-size: var(--text-base);
        color: var(--text-secondary);
        line-height: 1.6;
      }
      .msp-workflows-intro p { margin: 0 0 var(--space-2); }
      .msp-workflows-intro p:last-child { margin-bottom: 0; }
      .msp-workflows-meta {
        font-size: var(--text-sm);
        color: var(--text-muted);
      }

      .msp-workflow-category {
        display: flex; flex-direction: column;
        gap: var(--space-3);
      }
      .msp-workflow-category-head {
        display: flex; align-items: center;
        gap: var(--space-3);
        flex-wrap: wrap;
      }
      .msp-workflow-category-label {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-xl);
        font-weight: 500;
        color: var(--text-primary);
      }
      .msp-workflow-category-count {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        background: var(--chip-bg);
        border: 1px solid var(--border-subtle);
        padding: 2px 8px;
        border-radius: 10px;
        color: var(--text-secondary);
      }
      .msp-workflow-category-desc {
        font-size: var(--text-sm);
        color: var(--text-muted);
        font-style: italic;
      }
      .msp-workflow-board-chip {
        display: inline-flex; align-items: center;
        gap: 4px;
        font-size: var(--text-xs);
        color: var(--text-secondary);
        background: var(--bg);
        border: 1px solid var(--border-subtle);
        padding: 1px 6px;
        border-radius: 3px;
      }
      .msp-workflow-board-dot {
        display: inline-block;
        width: 6px; height: 6px;
        border-radius: 50%;
      }
      .msp-workflow-block-label {
        display: block;
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: var(--space-1);
      }
      .msp-workflow-rationale p {
        font-size: var(--text-sm);
        color: var(--text-primary);
        line-height: 1.55;
        margin: 0;
        font-style: italic;
      }
      .msp-workflow-trigger-list {
        list-style: none;
        margin: 0; padding: 0;
        display: flex; flex-direction: column;
        gap: var(--space-1);
      }
      .msp-workflow-trigger-line {
        display: flex; align-items: baseline;
        gap: var(--space-2);
        font-size: var(--text-sm);
      }
      .msp-workflow-logic {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.1em;
        color: var(--text-muted);
        flex-shrink: 0;
        padding-top: 2px;
      }
      .msp-workflow-trigger-label {
        color: var(--text-primary);
        line-height: 1.5;
      }
      .msp-workflow-actions ul {
        list-style: none;
        margin: 0; padding: 0;
        display: flex; flex-direction: column;
        gap: var(--space-1);
      }
      .msp-workflow-action-line {
        display: inline-flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        align-items: baseline;
        font-size: var(--text-sm);
      }
      .msp-workflow-action-name {
        font-weight: 500;
        color: var(--text-primary);
        background: color-mix(in srgb, var(--accent) 8%, transparent);
        border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
        padding: 1px 6px;
        border-radius: 3px;
      }
      .msp-workflow-action-config {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
      }
      .msp-workflow-schedule-value {
        font-size: var(--text-sm);
        color: var(--text-secondary);
      }
      .msp-workflow-empty {
        font-size: var(--text-sm);
        color: var(--text-muted);
        font-style: italic;
      }

      /* ===== Related Workflows in modal — compact accordion ===== */
      .msp-related-workflows {
        display: flex; flex-direction: column;
        gap: var(--space-2);
      }
      .msp-related-workflows-hint {
        font-size: var(--text-sm);
        color: var(--text-muted);
        font-style: italic;
        margin: 0 0 var(--space-2);
      }
      .msp-related-workflows-list {
        display: flex; flex-direction: column;
        gap: var(--space-1);
      }
      .msp-related-workflow {
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
        overflow: hidden;
      }
      .msp-related-workflow.open { border-color: var(--border-accent); }
      .msp-related-workflow-head {
        display: flex; align-items: center;
        gap: var(--space-3);
        width: 100%;
        padding: var(--space-2) var(--space-3);
        background: transparent;
        border: none;
        cursor: pointer;
        text-align: left;
      }
      .msp-related-workflow-cat {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
        flex-shrink: 0;
        min-width: 110px;
      }
      .msp-related-workflow-name {
        flex: 1;
        font-size: var(--text-sm);
        color: var(--text-primary);
      }
      .msp-related-workflow-toggle {
        font-family: ui-monospace, monospace;
        font-size: var(--text-md);
        color: var(--text-muted);
        flex-shrink: 0;
      }
      .msp-related-workflow-body {
        padding: var(--space-3);
        background: var(--bg);
        border-top: 1px dashed var(--border-subtle);
        display: flex; flex-direction: column;
        gap: var(--space-3);
      }
      .msp-related-workflow-desc {
        font-size: var(--text-sm);
        color: var(--text-secondary);
        line-height: 1.55;
        margin: 0;
      }

      /* Modal role badge — inline in the Reference field */
      .msp-modal-role {
        display: inline-flex; align-items: center;
        gap: var(--space-2);
        cursor: help;
      }
      .msp-modal-role-tier {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.08em;
        color: var(--text-muted);
        background: var(--chip-bg);
        border: 1px solid var(--border-subtle);
        padding: 1px 5px;
        border-radius: 3px;
      }

      /* ===== Roles browse view — canonical MSP org chart ===== */
      .msp-roles {
        display: flex; flex-direction: column;
        gap: var(--space-5);
        padding-bottom: var(--space-6);
      }
      /* v3.8: OrgChart view — a top-down hierarchical tree of the 36
         canonical MSP roles. Uses nested <ul>/<li> with CSS-drawn
         connectors (border-based, no SVG) so the chart prints cleanly
         and scales without library deps. Inspired by the classic
         "css-tricks" org-chart pattern. */
      .msp-orgchart-view {
        display: flex; flex-direction: column;
        gap: var(--space-5);
        padding-bottom: var(--space-6);
      }
      .msp-orgchart-controls {
        display: flex; flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        padding: 0.65rem 1rem;
      }
      .msp-orgchart-size-label {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-right: 0.3rem;
      }
      .msp-orgchart-canvas {
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        padding: 2rem 1.5rem 1.5rem;
        /* v3.12.0: allow scrolling in BOTH directions. With zoom support
           and a horizontal layout option, the chart can overflow either
           or both axes; auto in both directions covers all cases. The
           canvas bounds the height so a tall chart doesn't push the page
           footer off-screen — user scrolls within the canvas. */
        overflow: auto;
        max-height: min(75vh, 760px);
        position: relative;
      }
      /* v3.12.0: horizontal mode gets a taller canvas — horizontal trees
         tend to be tall (each leaf row stacks vertically) so the user
         needs more height to see the whole chart at usable zoom. */
      .msp-orgchart-canvas--horizontal {
        max-height: min(85vh, 900px);
      }
      /* v3.12.0: content wrapper — sits inside the canvas, carries the
         zoom transform. transform-origin differs by layout: vertical
         mode origins from top-center (chart is symmetric around its
         vertical axis); horizontal from top-left (chart grows down +
         right from the CEO node). */
      .msp-orgchart-content {
        display: inline-block;
        min-width: 100%;
        transition: transform 140ms ease;
      }
      .msp-orgchart-root,
      .msp-orgchart-children {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
      }
      .msp-orgchart-root {
        padding-top: 0.5rem;
        /* v3.11.10: the org-chart canvas is scrollable. With justify-
           content: center on this flex container, when content is wider
           than the canvas the centering pushes the leftmost cards to a
           negative x-offset from scroll-x=0 — leftmost roles become
           unreachable via horizontal scrolling. min-width: max-content
           forces the root to expand to its content width when it
           overflows. When content is narrower the root still centers
           via margin: 0 auto. */
        min-width: max-content;
        margin: 0 auto;
      }
      /* v3.8: classic CSS-only org-chart connectors (pure border/pseudo
         approach — no SVG, no JS layout math, prints cleanly).
         Each child <li> has two ::before pseudos:
           - the half-row top border (acts as the horizontal sibling bar)
           - the vertical drop from the row bar down to its card
         First child trims its left half, last child trims its right
         half. Only-child gets a single vertical line. */
      .msp-orgchart-children {
        padding-top: 1.5rem;
        position: relative;
      }
      .msp-orgchart-node {
        flex: 0 0 auto;
        padding: 1.5rem 0.5rem 0;
        position: relative;
        text-align: center;
      }
      /* Root (CEO) has no parent — disable its top padding + connectors. */
      .msp-orgchart-root > .msp-orgchart-node {
        padding-top: 0;
      }
      .msp-orgchart-root > .msp-orgchart-node::before,
      .msp-orgchart-root > .msp-orgchart-node::after {
        display: none;
      }
      /* Horizontal row-bar half + vertical drop (shared by all non-root
         children). */
      .msp-orgchart-node::before,
      .msp-orgchart-node::after {
        content: "";
        position: absolute;
        top: 0;
        border-top: 1.5px solid var(--border-accent, var(--border-subtle));
        width: 50%;
        height: 1.5rem;
      }
      .msp-orgchart-node::before {
        right: 50%;
      }
      .msp-orgchart-node::after {
        left: 50%;
        border-left: 1.5px solid var(--border-accent, var(--border-subtle));
      }
      /* First child has no left half of the row-bar (the bar only spans
         the children, not the parent's full width). */
      .msp-orgchart-children > .msp-orgchart-node:first-child::before {
        border-top: 0;
      }
      /* Last child has no right half. */
      .msp-orgchart-children > .msp-orgchart-node:last-child::after {
        border-top: 0;
      }
      /* Only-child: hide left half entirely (no siblings to connect to).
         Right half drops a single vertical line to the card. */
      .msp-orgchart-children > .msp-orgchart-node:only-child::before {
        display: none;
      }
      .msp-orgchart-children > .msp-orgchart-node:only-child::after {
        left: 50%;
        border-top: 0;
      }

      /* Role card */
      .msp-orgchart-card {
        display: inline-flex; flex-direction: column;
        position: relative;
        min-width: 11rem;
        max-width: 14rem;
        padding: 0;
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
        cursor: pointer;
        text-align: center;
        font-family: inherit;
        color: inherit;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(60, 50, 35, 0.04);
        transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
      }
      .msp-orgchart-card:hover {
        border-color: var(--border-accent);
      }
      /* Category color stripe — top edge of each card, matching the 3
         category color palette already used in toolbar nav. */
      .msp-orgchart-card-stripe {
        height: 3px;
        width: 100%;
        background: var(--cat-color, var(--accent));
      }
      .msp-orgchart-card[data-category="leadership"] {
        --cat-color: #c69b5c;
      }
      .msp-orgchart-card[data-category="administration"] {
        --cat-color: #5c8db8;
      }
      .msp-orgchart-card[data-category="service-delivery"] {
        --cat-color: #7ba85c;
      }
      .msp-orgchart-card-body {
        display: flex; flex-direction: column;
        gap: 0.3rem;
        padding: 0.7rem 0.85rem;
        align-items: center;
      }
      /* v3.13.0: icon + label on one line at the top of the card. */
      .msp-orgchart-card-head {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        justify-content: center;
      }
      .msp-role-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--cat-color, var(--accent));
        flex: 0 0 auto;
      }
      .msp-orgchart-card-icon {
        /* slightly larger than inline role-icon usages elsewhere */
        width: 18px;
        height: 18px;
      }
      /* v3.13.0: role icon in the RoleDetailPanel title */
      .msp-roledetail-title {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
      }
      .msp-roledetail-title-icon {
        width: 20px;
        height: 20px;
        color: var(--accent);
      }
      /* v3.13.0: role icon in the Roles list card title row */
      .msp-role-card-icon {
        width: 16px;
        height: 16px;
        color: var(--role-accent, var(--accent));
        flex: 0 0 auto;
      }
      .msp-orgchart-card-label {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-md);
        font-weight: 500;
        color: var(--text-primary);
        line-height: 1.2;
      }
      /* v3.13.0: department now a category-colored chip (was plain mono
         text) — makes dept membership scan instantly. */
      .msp-orgchart-card-dept {
        font-family: ui-monospace, monospace;
        font-size: 0.62rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--cat-color, var(--text-muted));
        background: color-mix(in srgb, var(--cat-color, var(--accent)) 10%, var(--card));
        border: 1px solid color-mix(in srgb, var(--cat-color, var(--accent)) 30%, transparent);
        border-radius: 999px;
        padding: 0.1rem 0.5rem;
      }
      .msp-orgchart-card-dept[data-category="leadership"] { --cat-color: #c69b5c; }
      .msp-orgchart-card-dept[data-category="administration"] { --cat-color: #5c8db8; }
      .msp-orgchart-card-dept[data-category="service-delivery"] { --cat-color: #7ba85c; }
      .msp-orgchart-card-tier {
        position: absolute;
        top: 0.6rem;
        right: 0.6rem;
        font-family: ui-monospace, monospace;
        font-size: 0.6rem;
        font-weight: 600;
        color: var(--cat-color, var(--accent));
        padding: 0.05rem 0.3rem;
        border: 1px solid var(--cat-color, var(--border-subtle));
        border-radius: 3px;
        background: color-mix(in srgb, var(--cat-color, transparent) 8%, var(--card));
      }
      .msp-orgchart-card-not-at-size {
        font-family: ui-monospace, monospace;
        font-size: 0.6rem;
        color: var(--text-muted);
        font-style: italic;
        opacity: 0.7;
      }
      .msp-orgchart-card.dim {
        opacity: 0.4;
      }
      .msp-orgchart-card.dim:hover {
        opacity: 0.7;
      }

      /* v3.13.0: group-by-department tint. When the toggle is on, each
         node carries data-group-dept="on". We tint the node's padding
         box by the department's category color + add a dashed outline,
         so sibling cards sharing a department read as a visual cluster.
         The tint is subtle (6%) so it doesn't fight the card itself. */
      .msp-orgchart-node[data-group-dept="on"] {
        border-radius: 8px;
      }
      .msp-orgchart-node[data-group-dept="on"][data-dept] > .msp-orgchart-card {
        outline: 1px dashed color-mix(in srgb, var(--dept-tint, var(--accent)) 45%, transparent);
        outline-offset: 2px;
      }
      /* Department → tint color (mirrors the 3 category colors but keyed
         per-department so adjacent departments in the same category are
         still distinguishable by outline grouping). */
      .msp-orgchart-node[data-group-dept="on"][data-dept="executive"] > .msp-orgchart-card,
      .msp-orgchart-node[data-group-dept="on"][data-dept="service-management"] > .msp-orgchart-card,
      .msp-orgchart-node[data-group-dept="on"][data-dept="client-strategy"] > .msp-orgchart-card {
        --dept-tint: #c69b5c;
      }
      .msp-orgchart-node[data-group-dept="on"][data-dept="hr"] > .msp-orgchart-card,
      .msp-orgchart-node[data-group-dept="on"][data-dept="finance"] > .msp-orgchart-card,
      .msp-orgchart-node[data-group-dept="on"][data-dept="sales"] > .msp-orgchart-card,
      .msp-orgchart-node[data-group-dept="on"][data-dept="marketing"] > .msp-orgchart-card,
      .msp-orgchart-node[data-group-dept="on"][data-dept="customer-success"] > .msp-orgchart-card,
      .msp-orgchart-node[data-group-dept="on"][data-dept="procurement"] > .msp-orgchart-card,
      .msp-orgchart-node[data-group-dept="on"][data-dept="grc"] > .msp-orgchart-card,
      .msp-orgchart-node[data-group-dept="on"][data-dept="service-ops"] > .msp-orgchart-card {
        --dept-tint: #5c8db8;
      }
      .msp-orgchart-node[data-group-dept="on"][data-dept="service-desk"] > .msp-orgchart-card,
      .msp-orgchart-node[data-group-dept="on"][data-dept="field-services"] > .msp-orgchart-card,
      .msp-orgchart-node[data-group-dept="on"][data-dept="noc"] > .msp-orgchart-card,
      .msp-orgchart-node[data-group-dept="on"][data-dept="infrastructure"] > .msp-orgchart-card,
      .msp-orgchart-node[data-group-dept="on"][data-dept="cloud"] > .msp-orgchart-card,
      .msp-orgchart-node[data-group-dept="on"][data-dept="cybersecurity"] > .msp-orgchart-card,
      .msp-orgchart-node[data-group-dept="on"][data-dept="projects-solutions"] > .msp-orgchart-card,
      .msp-orgchart-node[data-group-dept="on"][data-dept="automation-dev"] > .msp-orgchart-card {
        --dept-tint: #7ba85c;
      }

      /* Legend */
      .msp-orgchart-legend {
        display: flex; flex-wrap: wrap;
        align-items: center;
        gap: 1.2rem;
        margin-top: 1.5rem;
        padding-top: 1rem;
        border-top: 1px dashed var(--border-subtle);
        justify-content: center;
      }
      .msp-orgchart-legend-item {
        display: inline-flex; align-items: center;
        gap: 0.4rem;
        font-family: ui-monospace, monospace;
        font-size: 0.7rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .msp-orgchart-legend-swatch {
        width: 14px; height: 14px;
        border-radius: 3px;
        background: var(--cat-color, var(--accent));
      }
      .msp-orgchart-legend-item[data-category="leadership"] { --cat-color: #c69b5c; }
      .msp-orgchart-legend-item[data-category="administration"] { --cat-color: #5c8db8; }
      .msp-orgchart-legend-item[data-category="service-delivery"] { --cat-color: #7ba85c; }

      /* v3.12.0: controls bar — thin vertical divider between control
         groups (size / layout / zoom). Lets the bar read as three
         visually-distinct groups while staying horizontal. */
      .msp-orgchart-controls-divider {
        display: inline-block;
        width: 1px;
        align-self: stretch;
        background: var(--border-subtle);
        margin: 0 0.25rem;
      }
      .msp-orgchart-zoom-btn {
        min-width: 2rem;
        justify-content: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        font-family: ui-monospace, monospace;
        font-size: 0.95rem;
        font-weight: 600;
      }
      .msp-orgchart-zoom-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }
      .msp-orgchart-zoom-readout {
        min-width: 3.2rem;
        justify-content: center;
        font-family: ui-monospace, monospace;
        font-size: 0.78rem;
        letter-spacing: 0.02em;
      }

      /* v3.12.0: HORIZONTAL LAYOUT — tree grows left-to-right instead
         of top-down. Each node has its card and children-row side-by-
         side (flex-direction: row), with the children stacked
         vertically (.msp-orgchart-children flex-direction: column).
         Connectors are redrawn: the row-bar becomes a column-bar on
         the left side of each child column; the drop becomes a
         horizontal segment from the column-bar to each child's left
         edge. Same visual logic, rotated 90°. */
      .msp-orgchart-canvas--horizontal .msp-orgchart-root {
        flex-direction: row;
        padding-top: 0;
        padding-left: 0.5rem;
      }
      .msp-orgchart-canvas--horizontal .msp-orgchart-node {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0.4rem 0 0.4rem 1.5rem;
        text-align: left;
      }
      .msp-orgchart-canvas--horizontal .msp-orgchart-root > .msp-orgchart-node {
        padding-left: 0;
      }
      .msp-orgchart-canvas--horizontal .msp-orgchart-children {
        flex-direction: column;
        padding-top: 0;
        padding-left: 1.5rem;
        align-items: flex-start;
      }
      /* Connectors — horizontal mode. Each child node gets:
           ::before — upper half of column-bar (border-left)
           ::after  — lower half of column-bar + horizontal drop
                      from bar to card (border-left + border-top)
         First child trims its upper half; last child trims its lower
         half; only-child gets just the horizontal drop (no column-
         bar). */
      .msp-orgchart-canvas--horizontal .msp-orgchart-node::before,
      .msp-orgchart-canvas--horizontal .msp-orgchart-node::after {
        top: auto;
        right: auto;
        border-top: 0;
        width: 1.5rem;
        height: 50%;
        left: 0;
      }
      .msp-orgchart-canvas--horizontal .msp-orgchart-node::before {
        top: 0;
        bottom: 50%;
        border-left: 1.5px solid var(--border-accent, var(--border-subtle));
      }
      .msp-orgchart-canvas--horizontal .msp-orgchart-node::after {
        top: 50%;
        bottom: 0;
        border-top: 1.5px solid var(--border-accent, var(--border-subtle));
        border-left: 1.5px solid var(--border-accent, var(--border-subtle));
      }
      .msp-orgchart-canvas--horizontal .msp-orgchart-children > .msp-orgchart-node:first-child::before {
        border-left: 0;
      }
      .msp-orgchart-canvas--horizontal .msp-orgchart-children > .msp-orgchart-node:last-child::after {
        border-left: 0;
      }
      .msp-orgchart-canvas--horizontal .msp-orgchart-children > .msp-orgchart-node:only-child::before {
        display: none;
      }
      .msp-orgchart-canvas--horizontal .msp-orgchart-children > .msp-orgchart-node:only-child::after {
        border-left: 0;
        top: 50%;
      }

      /* v3.12.0: canvas-wrap — relative container that anchors the
         minimap. The canvas (scrollable) is the first child; the
         minimap is absolutely positioned in the bottom-right of the
         wrap so it stays in place as the canvas scrolls underneath. */
      .msp-orgchart-canvas-wrap {
        position: relative;
      }
      /* v3.12.0: MINIMAP — absolutely positioned in the bottom-right
         corner of the canvas-wrap. Stays put while the user scrolls
         the canvas underneath. Renders the entire chart in miniature
         with simplified cards. Includes a viewport indicator showing
         what fraction of the chart is currently visible; clicking or
         dragging on the minimap pans the canvas. */
      .msp-orgchart-minimap {
        position: absolute;
        bottom: 0.75rem;
        right: 0.75rem;
        width: 240px;
        max-width: 32vw;
        background: color-mix(in srgb, var(--card) 92%, var(--accent) 8%);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        z-index: 5;
        padding: 0.4rem;
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
      }
      .msp-orgchart-minimap-title {
        font-family: ui-monospace, monospace;
        font-size: 0.62rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-muted);
        text-align: center;
      }
      .msp-orgchart-minimap-canvas {
        position: relative;
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 5px;
        overflow: hidden;
        height: 150px;
        cursor: crosshair;
        /* Reset canvas-level styles that don't apply to the minimap. */
        padding: 0.3rem;
        max-height: none;
      }
      /* The minimap's chart structure shares .msp-orgchart-node CSS with
         the main chart, including connectors. We override sizing so the
         whole thing fits in the 232×150px minimap canvas.
         v3.20.11: absolute-positioned at top-left of the canvas so the
         natural-flow layout of the chart UL does not shove it sideways.
         Transform-origin is now consistently top-left via the inline
         style — chart anchors to the canvas top-left corner regardless
         of layout. The chart natural pre-transform width can be 1500px+
         but overflow:hidden on the canvas clips it; the scaled visual
         (e.g. 1500 × 0.15 = 225px) fits inside the 232px canvas. */
      .msp-orgchart-minimap-root {
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
        /* Override .msp-orgchart-root min-width: max-content here —
           we want the minimap root to size to the visible scaled
           chart, not push beyond the minimap-canvas. */
        min-width: 0;
        margin: 0;
      }
      /* v3.20.14: mini card — SOLID category-colored block. The earlier
         v3.12.0 design used a card-colored fill with a 4px accent stripe,
         which at 0.15x scale became invisible (the fill blended into the
         canvas background and the 0.6px-wide stripe was sub-pixel). Now
         the entire mini card is filled with the category color so the
         chart structure reads clearly at any scale. Border-radius scales
         visually; no border needed (color contrast IS the affordance). */
      .msp-orgchart-mini-card {
        display: inline-block;
        width: 4.5rem;
        height: 1.2rem;
        background: var(--cat-color, var(--accent));
        border: none;
        border-radius: 3px;
        margin: 0 0.1rem;
      }
      .msp-orgchart-mini-card[data-category="leadership"] { --cat-color: #c69b5c; }
      .msp-orgchart-mini-card[data-category="administration"] { --cat-color: #5c8db8; }
      .msp-orgchart-mini-card[data-category="service-delivery"] { --cat-color: #7ba85c; }
      /* Viewport indicator — translucent rectangle on top of the
         minimap showing which portion of the chart is currently
         visible in the main canvas. Sized + positioned via inline
         styles driven by the canvas scroll listener.
         v3.20.11: now interactive — pointer-events: auto + grab cursor
         + hover/active states + a focus ring make it a draggable handle
         instead of a decorative overlay. The onMouseDown captures the
         cursor offset from the rect's top-left, then on mousemove
         updates the canvas scroll so the rect's grabbed point tracks
         the cursor. */
      .msp-orgchart-minimap-viewport {
        position: absolute;
        border: 2px solid var(--accent);
        background: color-mix(in srgb, var(--accent) 12%, transparent);
        pointer-events: auto;
        cursor: grab;
        border-radius: 2px;
        transition: left 80ms ease, top 80ms ease, width 80ms ease, height 80ms ease,
                    background 120ms ease, border-color 120ms ease;
        min-width: 12px;
        min-height: 12px;
      }
      .msp-orgchart-minimap-viewport:hover {
        background: color-mix(in srgb, var(--accent) 22%, transparent);
        border-color: color-mix(in srgb, var(--accent) 85%, #000);
      }
      .msp-orgchart-minimap-viewport:active,
      body.msp-orgchart-viewport-dragging .msp-orgchart-minimap-viewport {
        cursor: grabbing;
        background: color-mix(in srgb, var(--accent) 30%, transparent);
        /* While dragging suppress the position transition so the rect
           tracks the cursor 1:1 without easing lag. */
        transition: background 120ms ease, border-color 120ms ease;
      }
      .msp-orgchart-minimap-viewport:focus-visible {
        outline: var(--focus-ring);
        outline-offset: 2px;
      }
      body.msp-orgchart-viewport-dragging {
        cursor: grabbing !important;
        user-select: none;
      }

      .msp-roles-intro {
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        padding: var(--space-4) var(--space-5);
        font-size: var(--text-base);
        color: var(--text-secondary);
        line-height: 1.6;
      }
      .msp-roles-intro p { margin: 0 0 var(--space-3); }
      .msp-roles-size-toggle {
        display: flex; flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2);
      }
      /* v3.7.2: tech-count range pill inside each size chip. Compact
         monospace so users can self-identify their shop's bracket at
         a glance. Lower opacity so the chip's main label stays primary. */
      .msp-roles-size-chip {
        gap: 0.4rem;
      }
      .msp-roles-size-chip-range {
        font-family: ui-monospace, monospace;
        font-size: 0.65rem;
        letter-spacing: 0.04em;
        opacity: 0.65;
        padding: 0.05rem 0.3rem;
        border-radius: 8px;
        background: color-mix(in srgb, currentColor 8%, transparent);
      }
      .msp-roles-size-chip.active .msp-roles-size-chip-range {
        opacity: 0.85;
        background: color-mix(in srgb, currentColor 14%, transparent);
      }
      .msp-roles-size-label {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-right: var(--space-2);
      }
      /* v3.50 S4: generic size chip row — shared by Roles, Departments,
         Teams, Org Chart, KPIs, Leadership Scorecard. Mirrors the existing
         msp-roles-size-* shape; the roles-specific classes stay for compat. */
      .msp-size-chips {
        display: flex; flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2);
        margin-bottom: var(--space-3);
      }
      .msp-size-chips-label {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-right: var(--space-2);
      }
      .msp-size-chip {
        gap: 0.4rem;
      }
      .msp-size-chip-range {
        font-family: ui-monospace, monospace;
        font-size: 0.65rem;
        letter-spacing: 0.04em;
        opacity: 0.85; /* v3.54: darker tech count for legibility (was 0.65) */
        padding: 0.05rem 0.3rem;
        border-radius: 8px;
        background: color-mix(in srgb, currentColor 12%, transparent);
      }
      .msp-size-chip.active .msp-size-chip-range {
        opacity: 1;
        background: color-mix(in srgb, currentColor 16%, transparent);
      }
      /* v3.54: SizeFilterChips reused as the header's global size control — drop
         the in-view bottom margin + tighten the gap so it sits on the header row.
         v3.54.1: compacted (smaller chip padding/font + range) so the whole bar
         shrinks enough to share one row with the search bar. */
      .msp-session-size .msp-size-chips { margin-bottom: 0; gap: 0.2rem; }
      .msp-session-size .pt-chip { padding: 0.22rem 0.5rem; font-size: 0.78rem; }
      .msp-session-size .msp-size-chip { gap: 0.28rem; }
      .msp-session-size .msp-size-chip-range { font-size: 0.6rem; padding: 0.03rem 0.26rem; }

      .msp-roles-expand-sep {
        display: inline-block;
        width: 1px;
        align-self: stretch;
        background: var(--border-subtle);
        margin: 0 var(--space-2);
      }
      .msp-roles-expand-btn {
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
      }

      .msp-roles-category {
        display: flex; flex-direction: column;
        gap: var(--space-5);
        padding-bottom: var(--space-5);
        border-bottom: 1px solid var(--border-subtle);
      }
      .msp-roles-category:last-child {
        border-bottom: none;
      }
      .msp-roles-category-head {
        display: flex; align-items: baseline;
        gap: var(--space-3);
        flex-wrap: wrap;
      }
      .msp-roles-category-label {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-2xl);
        font-weight: 500;
        color: var(--text-primary);
        letter-spacing: -0.01em;
      }
      .msp-roles-department-stack {
        display: flex; flex-direction: column;
        gap: var(--space-5);
        margin-left: var(--space-4);
        padding-left: var(--space-4);
        border-left: 1px dashed var(--border-subtle);
      }
      .msp-roles-department {
        display: flex; flex-direction: column;
        gap: var(--space-3);
      }
      .msp-roles-department-head {
        display: flex; align-items: baseline;
        gap: var(--space-3);
        flex-wrap: wrap;
      }
      .msp-roles-department-label {
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-lg);
        font-weight: 500;
        color: var(--text-primary);
      }
      .msp-roles-department-count {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        background: var(--chip-bg);
        padding: 0 0.45rem;
        border-radius: 10px;
        line-height: 1.5;
      }
      .msp-roles-department-desc {
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-sm);
        color: var(--text-muted);
        line-height: 1.4;
        flex: 1 1 280px;
        min-width: 0;
      }
      /* .msp-roles-grid superseded by .msp-card-grid--wide (v3.24.0). */

      .msp-role-card {
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-left: 3px solid var(--role-accent, var(--border-subtle));
        border-radius: 8px;
        overflow: hidden;
        transition: border-color 120ms ease, box-shadow 120ms ease;
      }
      .msp-role-card:hover {
        border-color: var(--border-accent);
      }
      .msp-role-card.open {
        border-color: var(--border-accent);
        border-left-color: var(--role-accent, var(--accent));
        box-shadow: 0 2px 12px rgba(60, 50, 35, 0.08);
      }
      .msp-role-card-head {
        display: flex; flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-4);
        text-align: left;
        background: transparent;
        border: none;
        cursor: pointer;
        width: 100%;
      }
      .msp-role-card-title-row {
        display: flex; align-items: center;
        gap: var(--space-2);
      }
      .msp-role-card-dot {
        display: inline-block;
        width: 8px; height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .msp-role-card-label {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-md);
        font-weight: 500;
        color: var(--text-primary);
        flex: 1;
        line-height: 1.3;
      }
      .msp-role-card-toggle {
        font-family: ui-monospace, monospace;
        font-size: var(--text-lg);
        color: var(--text-muted);
        flex-shrink: 0;
      }
      .msp-role-trend-badge {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 12%, transparent);
        border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
        padding: 1px 6px;
        border-radius: 3px;
      }
      .msp-role-card-desc {
        font-size: var(--text-sm);
        color: var(--text-secondary);
        line-height: 1.55;
        margin: 0;
      }
      .msp-role-card-meta {
        display: flex; flex-wrap: wrap;
        align-items: center;
        gap: var(--space-1);
      }
      .msp-role-size-chip {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 1px 6px;
        border-radius: 3px;
        border: 1px solid var(--border-subtle);
        color: var(--text-muted);
      }
      .msp-role-size-small { background: color-mix(in srgb, #5b8db8 8%, transparent); color: #5b8db8; border-color: color-mix(in srgb, #5b8db8 30%, transparent); }
      .msp-role-size-medium { background: color-mix(in srgb, #d4a574 8%, transparent); color: #b08550; border-color: color-mix(in srgb, #d4a574 35%, transparent); }
      .msp-role-size-large { background: color-mix(in srgb, #c4634a 8%, transparent); color: #c4634a; border-color: color-mix(in srgb, #c4634a 30%, transparent); }
      /* v3.20.10: Roles table salary cell + RoleDetailPanel mid hint.
         Band is monospace (looks like the structured data it is); the
         midpoint is muted+italic so it reads as "context for the range." */
      .msp-roles-table-salary-band {
        font-family: var(--font-mono);
        color: var(--text-primary);
      }
      .msp-roles-table-salary-mid {
        font-family: var(--font-mono);
        color: var(--text-muted);
        font-size: 0.85em;
      }
      .msp-roledetail-salary-mid {
        margin-left: 0.35rem;
        font-family: var(--font-mono);
        font-size: 0.85em;
        color: var(--text-muted);
        font-style: italic;
      }
      .msp-role-record-count {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        font-style: italic;
      }
      .msp-role-tier-chip {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.1em;
        color: var(--text-secondary);
        background: var(--chip-bg);
        border: 1px solid var(--border-subtle);
        padding: 1px 6px;
        border-radius: 3px;
      }
      /* v3.22.2: salary chip on role cards. Slightly more prominent
         than the tier chip so the comp band catches the eye on scan. */
      .msp-role-salary-chip {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.04em;
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 8%, var(--card));
        border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border-subtle));
        padding: 1px 6px;
        border-radius: 3px;
        font-weight: 600;
      }

      .msp-role-card-body {
        padding: var(--space-4);
        border-top: 1px dashed var(--border-subtle);
        background: var(--bg);
        display: flex; flex-direction: column;
        gap: var(--space-3);
      }
      .msp-role-consolidated-note {
        font-size: var(--text-sm);
        color: var(--text-primary);
        line-height: 1.55;
        background: color-mix(in srgb, var(--accent) 8%, transparent);
        border-left: 2px solid var(--border-accent);
        padding: var(--space-2) var(--space-3);
        border-radius: 0 4px 4px 0;
        font-style: italic;
      }
      .msp-role-block {
        display: flex; flex-direction: column;
        gap: var(--space-1);
      }
      .msp-role-block p {
        margin: 0;
        font-size: var(--text-sm);
        color: var(--text-primary);
        line-height: 1.55;
      }
      .msp-role-block ul {
        margin: 0; padding-left: 1.2rem;
        font-size: var(--text-sm);
        color: var(--text-primary);
        line-height: 1.55;
      }
      .msp-role-block ul li { margin-bottom: var(--space-1); }
      .msp-role-aliases {
        font-style: italic;
        color: var(--text-secondary);
        font-size: var(--text-sm);
        line-height: 1.5;
      }
      .msp-role-aliases-banner {
        display: flex; flex-direction: column;
        gap: var(--space-1);
        padding: var(--space-2) var(--space-3);
        background: var(--chip-bg);
        border: 1px dashed var(--border-subtle);
        border-radius: 6px;
      }
      .msp-role-tool-list {
        display: flex; flex-wrap: wrap;
        gap: var(--space-1);
      }
      .msp-role-records {
        display: flex; flex-wrap: wrap;
        gap: var(--space-2);
      }

      /* Required Skills section in role cards */
      .msp-role-skills-hint {
        font-size: var(--text-xs);
        color: var(--text-muted);
        font-style: italic;
        margin: 0 0 var(--space-2);
      }
      .msp-role-skills-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: var(--space-2);
      }
      .msp-role-skill-card {
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
        overflow: hidden;
      }
      .msp-role-skill-card.open {
        border-color: var(--border-accent);
      }
      .msp-role-skill-head {
        display: flex; align-items: center;
        gap: var(--space-2);
        width: 100%;
        padding: var(--space-2) var(--space-3);
        background: transparent;
        border: none;
        cursor: pointer;
        text-align: left;
      }
      .msp-role-skill-head:not([disabled]):hover {
        background: var(--bg);
      }
      .msp-role-skill-title {
        display: flex; align-items: center;
        gap: var(--space-2);
        flex: 1;
        min-width: 0;
      }
      .msp-role-skill-label {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--text-primary);
        line-height: 1.3;
      }
      .msp-role-skill-tier-badge {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.08em;
        color: var(--text-muted);
        background: var(--chip-bg);
        border: 1px solid var(--border-subtle);
        padding: 1px 5px;
        border-radius: 3px;
        flex-shrink: 0;
      }
      .msp-role-skill-expand {
        font-family: ui-monospace, monospace;
        font-size: var(--text-md);
        color: var(--text-muted);
        flex-shrink: 0;
      }
      .msp-role-skill-body {
        padding: var(--space-3) var(--space-4);
        background: var(--bg);
        border-top: 1px dashed var(--border-subtle);
        display: flex; flex-direction: column;
        gap: var(--space-2);
      }
      .msp-role-skill-desc {
        font-size: var(--text-sm);
        color: var(--text-primary);
        line-height: 1.55;
        font-style: italic;
        margin: 0;
      }
      .msp-role-skill-caps {
        margin: 0;
        padding-left: 1.2rem;
        font-size: var(--text-sm);
        color: var(--text-primary);
        line-height: 1.5;
      }
      .msp-role-skill-caps li { margin-bottom: var(--space-1); }
      .msp-role-skill-products {
        display: flex; flex-direction: column;
        gap: var(--space-1);
        padding-top: var(--space-2);
        border-top: 1px dashed var(--border-subtle);
      }
      .msp-role-skill-unknown {
        font-size: var(--text-xs);
        color: var(--text-muted);
        font-style: italic;
        padding: var(--space-1) var(--space-2);
      }

      /* ===== Compare Roles view ===== */
      .msp-roles-mode-toggle {
        display: flex; align-items: center;
        gap: var(--space-2);
        margin-bottom: var(--space-3);
      }
      .msp-role-compare {
        display: flex; flex-direction: column;
        gap: var(--space-4);
        padding: var(--space-4) var(--space-5);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
      }
      .msp-role-compare-pickers {
        display: flex; flex-wrap: wrap;
        align-items: flex-end;
        gap: var(--space-3);
      }
      .msp-role-compare-picker {
        display: flex; flex-direction: column;
        gap: var(--space-1);
        flex: 1;
        min-width: 220px;
      }
      .msp-role-compare-picker select {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-base);
        padding: var(--space-2) var(--space-3);
        background: var(--input-bg);
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
        color: var(--text-primary);
        cursor: pointer;
      }
      .msp-role-compare-picker select:focus {
        outline: none;
        border-color: var(--border-accent);
      }
      .msp-role-compare-vs {
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-md);
        color: var(--text-muted);
        align-self: center;
        padding-bottom: var(--space-2);
      }
      .msp-role-compare-stats {
        display: flex; flex-wrap: wrap;
        gap: var(--space-3);
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding-top: var(--space-2);
        border-top: 1px dashed var(--border-subtle);
      }
      .msp-role-compare-stat { color: var(--text-muted); }
      .msp-cmp-stat-up { color: #6b8f6e; }
      .msp-cmp-stat-down { color: #b08550; }
      .msp-cmp-stat-only-b { color: var(--accent); }
      .msp-cmp-stat-only-a { color: #c14638; }

      .msp-role-compare-table {
        display: flex; flex-direction: column;
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
        overflow: hidden;
      }
      .msp-role-compare-row {
        display: grid;
        grid-template-columns: 2fr 1.2fr 0.5fr 1.2fr;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        align-items: center;
        border-bottom: 1px dashed var(--border-subtle);
        font-size: var(--text-sm);
      }
      .msp-role-compare-row:last-child { border-bottom: none; }
      .msp-role-compare-header {
        background: var(--bg);
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .msp-role-compare-cell-skill {
        display: flex; flex-direction: column;
        gap: 2px;
      }
      .msp-role-compare-cat {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
      }
      .msp-role-compare-cell-side {
        display: flex; align-items: center;
      }
      .msp-role-compare-cell-delta {
        text-align: center;
        font-family: ui-monospace, monospace;
        font-size: var(--text-md);
      }
      .msp-role-compare-empty {
        color: var(--text-muted);
        font-style: italic;
      }
      .msp-cmp-arrow-up { color: #6b8f6e; font-weight: 700; }
      .msp-cmp-arrow-down { color: #b08550; font-weight: 700; }
      .msp-cmp-arrow-same { color: var(--text-muted); }
      .msp-cmp-arrow-only-b { color: var(--accent); font-weight: 700; }
      .msp-cmp-arrow-only-a { color: #c14638; font-weight: 700; }
      .msp-cmp-row-up {
        background: color-mix(in srgb, #6b8f6e 4%, transparent);
      }
      .msp-cmp-row-only-b {
        background: color-mix(in srgb, var(--accent) 4%, transparent);
      }
      .msp-cmp-row-down,
      .msp-cmp-row-only-a {
        background: color-mix(in srgb, #c14638 3%, transparent);
      }
      .msp-role-record-more {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        font-style: italic;
        padding: var(--space-1) var(--space-2);
      }

      /* ===== Candidate Assignees section in detail modal ===== */
      .msp-candidates {
        display: flex; flex-direction: column;
        gap: var(--space-4);
      }
      .msp-modal-empty {
        padding: var(--space-3);
        background: var(--chip-bg);
        border: 1px dashed var(--border-subtle);
        border-radius: 6px;
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        color: var(--text-muted);
        font-size: var(--text-sm);
        line-height: 1.5;
      }
      .msp-modal-empty code {
        font-family: ui-monospace, monospace;
        font-style: normal;
        font-size: var(--text-xs);
        background: var(--card);
        padding: 0.05rem 0.3rem;
        border-radius: 3px;
      }
      .msp-candidates-demo {
        display: flex; flex-wrap: wrap;
        gap: var(--space-2);
        align-items: center;
        padding: var(--space-3);
        background: var(--bg);
        border: 1px dashed var(--border-subtle);
        border-radius: 6px;
      }
      .msp-candidates-demo-label {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }
      .msp-candidates-demo-select {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-sm);
        padding: 0.25rem 0.5rem;
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
        color: var(--text-primary);
        cursor: pointer;
      }
      .msp-candidates-demo-hint {
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-xs);
        color: var(--accent);
      }

      .msp-candidates-pod {
        display: flex; flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-3);
        background: linear-gradient(to right, rgba(193, 70, 56, 0.06), transparent 80%);
        border: 1px solid var(--accent);
        border-radius: 6px;
      }
      .msp-candidates-pod-head {
        display: flex; align-items: center;
        gap: var(--space-2);
      }
      .msp-candidates-pod-icon {
        font-size: 1.1rem;
        color: var(--accent);
      }
      .msp-candidates-pod-label-row {
        display: flex; align-items: baseline;
        gap: 0.4rem;
        flex-wrap: wrap;
      }
      .msp-candidates-pod-client {
        font-family: "Fraunces", Georgia, serif;
        font-weight: 500;
        font-size: var(--text-md);
        color: var(--text-primary);
      }
      .msp-candidates-pod-sep {
        color: var(--text-muted);
        font-family: ui-monospace, monospace;
      }
      .msp-candidates-pod-name {
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-md);
        color: var(--accent);
      }
      .msp-candidates-pod-desc {
        margin: 0;
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-sm);
        color: var(--text-secondary);
        line-height: 1.45;
      }
      .msp-candidates-pod-lead {
        display: flex; align-items: center;
        gap: var(--space-2);
        padding: var(--space-2);
        background: var(--card);
        border-radius: 4px;
      }
      .msp-candidates-pod-lead-avatar {
        width: 28px; height: 28px;
        border-radius: 50%;
        background: var(--chip-bg);
        border: 1px solid var(--border-subtle);
        display: flex; align-items: center; justify-content: center;
        font-family: "Fraunces", Georgia, serif;
        font-weight: 500;
        font-size: var(--text-xs);
        color: var(--text-primary);
        flex-shrink: 0;
      }
      .msp-candidates-pod-lead-body {
        display: flex; flex-direction: column;
        gap: 0;
      }
      .msp-candidates-pod-lead-name {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--text-primary);
      }
      .msp-candidates-pod-lead-role {
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-xs);
        color: var(--text-muted);
      }
      .msp-candidates-pod-routing-note {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-sm);
        color: var(--text-secondary);
        line-height: 1.4;
      }
      .msp-candidates-pod-routing-note strong {
        font-style: normal;
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--accent);
        font-weight: 600;
      }
      .msp-candidates-pod-tier1 {
        color: var(--accent);
        font-style: italic;
      }

      .msp-candidates-tech.in-pod {
        border-left: 3px solid var(--accent);
        background: linear-gradient(to right, rgba(193, 70, 56, 0.04), transparent);
      }
      .msp-candidates-tech-badge.pod {
        color: var(--accent);
        border-color: var(--accent);
        background: rgba(193, 70, 56, 0.08);
        font-weight: 500;
      }

      .msp-candidates-primary {
        display: flex; flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-3);
        background: var(--card);
        border-left: 3px solid var(--accent);
        border-radius: 6px;
      }
      .msp-candidates-primary-row {
        display: flex; flex-wrap: wrap;
        align-items: baseline;
        gap: var(--space-2);
      }
      .msp-candidates-primary-label {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }
      .msp-candidates-primary-name {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-lg);
        color: var(--text-primary);
        font-weight: 500;
      }
      .msp-candidates-primary-dept {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        letter-spacing: 0.05em;
      }
      .msp-candidates-primary-desc {
        margin: 0;
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-sm);
        color: var(--text-secondary);
        line-height: 1.45;
      }
      .msp-candidates-section {
        display: flex; flex-direction: column;
        gap: var(--space-2);
      }
      .msp-candidates-section-h {
        display: flex; align-items: baseline;
        gap: var(--space-2);
        flex-wrap: wrap;
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }
      .msp-candidates-section-hint {
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-xs);
        text-transform: none;
        letter-spacing: normal;
        color: var(--text-muted);
        opacity: 0.85;
      }
      .msp-candidates-teams {
        display: flex; flex-direction: column;
        gap: var(--space-2);
      }
      .msp-candidates-team {
        display: flex; align-items: baseline;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        background: var(--chip-bg);
        border-radius: 4px;
      }
      .msp-candidates-team-label {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-sm);
        color: var(--text-primary);
        font-weight: 500;
      }
      .msp-candidates-team-meta {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        margin-left: auto;
      }
      .msp-candidates-techs {
        display: flex; flex-direction: column;
        gap: var(--space-2);
      }
      .msp-candidates-tech {
        display: flex; gap: var(--space-3);
        padding: var(--space-3);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
      }
      .msp-candidates-tech.match-high { border-left: 3px solid #5b9576; }
      .msp-candidates-tech.match-medium { border-left: 3px solid #d4a574; }
      .msp-candidates-tech.match-low { border-left: 3px solid var(--border-subtle); }
      .msp-candidates-tech-avatar {
        flex-shrink: 0;
        width: 36px; height: 36px;
        border-radius: 50%;
        background: var(--chip-bg);
        border: 1px solid var(--border-subtle);
        display: flex; align-items: center; justify-content: center;
        font-family: "Fraunces", Georgia, serif;
        font-weight: 500;
        font-size: var(--text-sm);
        color: var(--text-primary);
      }
      .msp-candidates-tech-body {
        display: flex; flex-direction: column;
        gap: 0.2rem;
        flex: 1;
      }
      .msp-candidates-tech-name-row {
        display: flex; align-items: center;
        gap: var(--space-2);
        flex-wrap: wrap;
      }
      .msp-candidates-tech-name {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-md);
        color: var(--text-primary);
        font-weight: 500;
      }
      .msp-candidates-tech-tier {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        padding: 0.05rem 0.4rem;
        border-radius: 10px;
        color: white;
        letter-spacing: 0.05em;
      }
      .msp-candidates-tech-tier.tier-l1 { background: #5b9576; }
      .msp-candidates-tech-tier.tier-l2 { background: #4476b8; }
      .msp-candidates-tech-tier.tier-l3 { background: #a37db5; }
      .msp-candidates-tech-badge {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        padding: 0.05rem 0.4rem;
        border-radius: 10px;
        background: var(--chip-bg);
        border: 1px solid var(--border-subtle);
        color: var(--text-muted);
        letter-spacing: 0.04em;
      }
      .msp-candidates-tech-badge.primary {
        color: var(--accent);
        border-color: var(--accent);
      }
      .msp-candidates-tech-badge.board {
        color: var(--text-secondary);
      }
      .msp-candidates-tech-role {
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-sm);
        color: var(--text-secondary);
      }
      .msp-candidates-tech-match {
        display: flex; align-items: center;
        gap: var(--space-2);
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
      }
      .msp-candidates-tech-score {
        padding: 0.1rem 0.4rem;
        border-radius: 10px;
        font-weight: 500;
        letter-spacing: 0.03em;
      }
      .msp-candidates-tech-score.high { background: rgba(91, 149, 118, 0.18); color: #5b9576; }
      .msp-candidates-tech-score.medium { background: rgba(212, 165, 116, 0.18); color: #a87440; }
      .msp-candidates-tech-score.low { background: var(--chip-bg); color: var(--text-muted); }
      .msp-candidates-tech-partial {
        color: var(--text-muted);
      }

      /* ===== Boards / Queues view — workflow-container axis =====
         PSA-aware: CW renders BOARDS, AT renders AUTOTASK_QUEUES.
         Each card carries: color-stripe accent, label, mission, stats
         line (records / teams / techs / statuses / routes-in), top-3
         ITIL types as small chips, and a team-chip row (CW only). */
      .msp-boards {
        display: flex; flex-direction: column;
        gap: var(--space-5);
        padding-bottom: var(--space-6);
      }
      /* .msp-boards-grid superseded by .msp-card-grid (v3.24.0). */
      .msp-board-card {
        --board-accent: var(--accent);
        position: relative;
        display: flex; flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
        text-align: left;
        cursor: pointer;
        overflow: hidden;
        /* L-15: hover standardized to outline-only */
        transition: border-color 140ms ease;
      }
      .msp-board-card:hover {
        border-color: var(--border-accent);
      }
      .msp-board-card-stripe {
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 3px;
        background: var(--board-accent);
      }
      .msp-board-card-head {
        display: flex; align-items: center;
        gap: var(--space-2);
      }
      .msp-board-card-label {
        flex: 1 1 auto;
        font-family: 'Fraunces', Georgia, serif;
        font-size: var(--card-title-font);
        font-weight: 500;
        color: var(--text-primary);
      }
      .msp-board-card-short {
        font-family: ui-monospace, monospace;
        font-size: 0.65rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--board-accent);
        padding: 0.18rem 0.45rem;
        border: 1px solid color-mix(in srgb, var(--board-accent) 40%, var(--border-subtle));
        border-radius: 4px;
      }
      .msp-board-card-oob {
        font-family: ui-monospace, monospace;
        font-size: 0.6rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        padding: 0.16rem 0.45rem;
        border-radius: 4px;
        border: 1px solid var(--border-subtle);
        background: var(--chip-bg);
        color: var(--text-muted);
      }
      .msp-board-card-oob.is-oob {
        color: color-mix(in srgb, #5b8db8 70%, var(--text-secondary));
        border-color: color-mix(in srgb, #5b8db8 40%, var(--border-subtle));
      }
      .msp-board-card-oob.is-custom {
        color: color-mix(in srgb, #c69b5c 70%, var(--text-secondary));
        border-color: color-mix(in srgb, #c69b5c 40%, var(--border-subtle));
      }
      .msp-board-card-desc {
        margin: 0;
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 0.88rem;
        line-height: 1.4;
        color: var(--text-secondary);
      }
      .msp-board-card-stats {
        display: flex; flex-wrap: wrap;
        gap: var(--space-3);
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
      }
      .msp-board-card-stat strong {
        font-weight: 600;
        color: var(--text-primary);
        margin-right: 0.25rem;
      }
      .msp-board-card-types {
        display: flex; flex-wrap: wrap;
        gap: var(--space-2);
        padding-top: var(--space-2);
        border-top: 1px dashed var(--border-subtle);
      }
      .msp-board-card-type-chip {
        display: inline-flex; align-items: center;
        gap: 0.35rem;
        padding: 0.18rem 0.5rem;
        font-family: ui-monospace, monospace;
        font-size: 0.7rem;
        background: var(--chip-bg);
        border: 1px solid var(--border-subtle);
        border-radius: 999px;
        color: var(--text-secondary);
      }
      .msp-board-card-type-icon {
        display: inline-flex;
        color: var(--text-muted);
      }
      .msp-board-card-type-icon svg {
        width: 11px; height: 11px;
      }
      .msp-board-card-type-count {
        font-weight: 600;
        color: var(--text-primary);
      }
      .msp-board-card-teams {
        display: flex; flex-wrap: wrap;
        gap: 0.35rem;
      }
      .msp-board-card-team {
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 0.78rem;
        padding: 0.18rem 0.55rem;
        background: color-mix(in srgb, var(--board-accent) 8%, transparent);
        border: 1px solid color-mix(in srgb, var(--board-accent) 25%, var(--border-subtle));
        border-radius: 4px;
        color: var(--text-secondary);
      }
      .msp-board-card-team-more {
        background: transparent;
        font-style: normal;
        font-family: ui-monospace, monospace;
        font-size: 0.7rem;
        color: var(--text-muted);
      }

      /* Boards table — cell-only styling. Layout, header sort, resize,
         pagination, and hover all come from the shared DataTable
         (.msp-table / .msp-table-th / .msp-table-rownum / etc.). */
      .msp-boards-cell-name {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 0.92rem;
        color: var(--text-primary);
      }
      .msp-boards-cell-label {
        display: inline-flex; align-items: center;
        gap: var(--space-2);
        white-space: nowrap;
      }
      .msp-boards-cell-dot {
        width: 8px; height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .msp-boards-cell-short {
        font-family: ui-monospace, monospace;
        font-size: 0.6rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-left: 0.25rem;
      }
      .msp-boards-cell-num {
        font-family: ui-monospace, monospace;
        font-size: 0.85rem;
        text-align: right;
        color: var(--text-primary);
      }
      .msp-boards-cell-desc {
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        color: var(--text-muted);
        font-size: 0.85rem;
      }
      .msp-boards-cell-pill {
        font-family: ui-monospace, monospace;
        font-size: 0.6rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        padding: 0.16rem 0.45rem;
        border-radius: 4px;
        border: 1px solid var(--border-subtle);
        background: var(--chip-bg);
        color: var(--text-muted);
      }
      .msp-boards-cell-pill.is-oob {
        color: color-mix(in srgb, #5b8db8 70%, var(--text-secondary));
        border-color: color-mix(in srgb, #5b8db8 40%, var(--border-subtle));
      }
      .msp-boards-cell-pill.is-custom {
        color: color-mix(in srgb, #c69b5c 70%, var(--text-secondary));
        border-color: color-mix(in srgb, #c69b5c 40%, var(--border-subtle));
      }

      /* ===== Communications view (v3.93) — client-facing email-template
         library. The detail panel renders a copy-ready subject + body block
         (the deliverable), merge-field chips, and the cross-links to the
         workflow / board / record the template ties into. Tokens only. */
      .msp-comms-template {
        border: 1px solid var(--border-subtle);
        border-left: 3px solid var(--accent);
        border-radius: 8px;
        background: color-mix(in srgb, var(--accent) 4%, var(--card));
        overflow: hidden;
      }
      .msp-comms-subject {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        padding: var(--space-3) var(--space-4);
        border-bottom: 1px dashed var(--border-subtle);
        background: color-mix(in srgb, var(--accent) 6%, transparent);
      }
      .msp-comms-field-label {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .msp-comms-subject-text {
        font-family: 'Fraunces', Georgia, serif;
        font-size: var(--text-lg);
        color: var(--text-primary);
      }
      .msp-comms-body {
        padding: var(--space-4);
        font-size: var(--text-base);
        line-height: 1.6;
        color: var(--text-primary);
      }
      .msp-comms-body p { margin: 0 0 var(--space-3); }
      .msp-comms-body p:last-child { margin-bottom: 0; }
      .msp-comms-body strong { color: var(--text-primary); font-weight: 600; }
      .msp-comms-body ul { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
      .msp-comms-merge {
        font-family: ui-monospace, monospace;
        font-size: var(--text-sm);
        color: color-mix(in srgb, var(--accent) 75%, var(--text-secondary));
        border-color: color-mix(in srgb, var(--accent) 30%, var(--border-subtle)) !important;
        background: color-mix(in srgb, var(--accent) 7%, transparent);
      }
      .msp-comms-record-link {
        cursor: pointer;
        font: inherit;
        color: var(--text-secondary);
        background: var(--chip-bg);
        border: 1px solid var(--border-subtle);
        border-left: 3px solid var(--accent);
        transition: color 0.12s ease, border-color 0.12s ease;
      }
      .msp-comms-record-link:hover {
        color: var(--accent);
        border-color: color-mix(in srgb, var(--accent) 50%, var(--border-subtle));
      }

      /* ===== Tools view — canonical brand-stripped tool-category catalog
         Cards mode: grouped by functional area (Operations / Security /
         Identity / Infrastructure / Cloud / Endpoint / Backup-DR /
         Compliance). Table mode: flat sortable for cross-category
         comparison. Detail page: full mission + products + records. */
      .msp-tools {
        display: flex; flex-direction: column;
        gap: var(--space-5);
        padding-bottom: var(--space-6);
      }

      /* ─── v3.23.1: BrowseBlock — standardized Browse-mode visuals ────
         Used by Vendors / Products / Configurations / Flexible Assets /
         KPIs / Agreements / Service Packages / Documentation. Mirrors
         the gold-standard .msp-tools-browse-* shape but with cleaner
         class names (msp-browse-*) and uses --browse-row-accent /
         --browse-group-accent custom props for per-row coloring. */
      .msp-browse {
        display: flex; flex-direction: column;
        gap: var(--space-5);
      }
      .msp-browse-group {
        --browse-group-accent: var(--text-secondary);
        display: flex; flex-direction: column;
        gap: var(--space-3);
      }
      .msp-browse-group-head {
        display: flex; align-items: baseline; flex-wrap: wrap;
        gap: var(--space-3);
        padding-bottom: var(--space-2);
        border-bottom: 1px dashed var(--border-subtle);
      }
      .msp-browse-group-name {
        margin: 0;
        font-family: 'Fraunces', Georgia, serif;
        font-size: 1.1rem;
        font-weight: 500;
        color: var(--text-primary);
      }
      .msp-browse-group-count {
        font-family: ui-monospace, monospace;
        font-size: 0.7rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .msp-browse-group-desc {
        flex: 1 1 auto;
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 0.85rem;
        color: var(--text-muted);
      }
      .msp-browse-subgroup {
        display: flex; flex-direction: column;
        gap: 0.3rem;
      }
      .msp-browse-subgroup-head {
        font-family: ui-monospace, monospace;
        font-size: 0.65rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--text-muted);
        padding: var(--space-2) 0 var(--space-1);
        margin-top: var(--space-2);
        border-bottom: 1px dotted var(--border-subtle);
      }
      .msp-browse-list {
        display: flex; flex-direction: column;
        gap: 0.3rem;
      }
      .msp-browse-row {
        --browse-row-accent: var(--accent);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-left: 3px solid var(--browse-row-accent);
        border-radius: 6px;
        overflow: hidden;
        transition: border-color 140ms ease;
      }
      .msp-browse-row.is-open {
        border-color: color-mix(in srgb, var(--browse-row-accent) 50%, var(--border-subtle));
      }
      .msp-browse-row.msp-offprofile {
        opacity: 0.55;
      }
      .msp-browse-row-head {
        display: flex; align-items: center;
        gap: var(--space-3);
        width: 100%;
        padding: var(--space-3) var(--space-4);
        background: transparent;
        border: none;
        cursor: pointer;
        text-align: left;
        font-family: inherit;
        color: inherit;
        transition: background 80ms ease;
      }
      .msp-browse-row-head:hover {
        background: color-mix(in srgb, var(--browse-row-accent) 5%, transparent);
      }
      .msp-browse-row-toggle {
        flex: 0 0 auto;
        width: 1.2rem;
        font-family: ui-monospace, monospace;
        font-size: 0.9rem;
        color: var(--text-muted);
        text-align: center;
      }
      .msp-browse-row-label-block {
        display: flex; flex-direction: column;
        gap: 0.15rem;
        flex: 1 1 auto;
        min-width: 0;
      }
      .msp-browse-row-label-line {
        display: inline-flex; flex-wrap: wrap; align-items: center;
        gap: var(--space-2);
      }
      .msp-browse-row-label {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 1rem;
        color: var(--text-primary);
      }
      .msp-browse-row-sublabel {
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 0.82rem;
        color: var(--text-muted);
        line-height: 1.4;
      }
      .msp-browse-row-stats {
        flex: 0 0 auto;
        display: inline-flex; align-items: center;
        gap: var(--space-4);
        font-family: ui-monospace, monospace;
      }
      .msp-browse-row-stat {
        display: inline-flex; flex-direction: column;
        align-items: center;
        gap: 0.05rem;
      }
      .msp-browse-row-stat strong {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        line-height: 1;
      }
      .msp-browse-row-stat-label {
        font-size: 0.6rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .msp-browse-row-stat-accent strong { color: var(--accent); }
      .msp-browse-row-stat-warn strong   { color: #c4733a; }
      .msp-browse-row-stat-alert strong  { color: #c14638; }
      .msp-browse-row-stat-success strong { color: #5b8a44; }
      .msp-browse-row-stat-muted strong  { color: var(--text-muted); font-weight: 500; }

      /* v3.27.0: aligned stat columns — the "titles on top like a table"
         model. ONE header sits atop the block; every row's cells share the
         SAME fixed widths + horizontal padding, so columns line up across
         all groups (the flexible label area on the left absorbs the slack,
         the cells are right-anchored to the block's right padding edge). */
      .msp-browse-colhead {
        display: flex; align-items: flex-end;
        gap: var(--space-4);
        padding: 0 var(--space-4) 0.35rem;
      }
      .msp-browse-colhead-spacer { flex: 1 1 auto; min-width: 0; }
      .msp-browse-colhead-cell {
        flex: 0 0 auto;
        font-family: ui-monospace, monospace;
        font-size: 0.6rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .msp-browse-row-cells {
        flex: 0 0 auto;
        display: flex; align-items: baseline;
        gap: var(--space-4);
        font-family: ui-monospace, monospace;
      }
      .msp-browse-row-cell {
        flex: 0 0 auto;
        display: flex; flex-direction: column;
        gap: 0.05rem;
        min-width: 0;
        overflow: hidden;
      }
      .msp-browse-row-cell strong {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-primary);
        line-height: 1.15;
        max-width: 100%;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      /* categorical (text) columns read as a muted caption, not a big number */
      .msp-browse-row-cell-muted strong { font-size: 0.78rem; font-weight: 500; color: var(--text-muted); }
      .msp-browse-row-cell-accent strong { color: var(--accent); }
      .msp-browse-row-cell-warn strong   { color: #c4733a; }
      .msp-browse-row-cell-alert strong  { color: #c14638; }
      .msp-browse-row-cell-success strong { color: #5b8a44; }
      .msp-browse-row-cell-label { display: none; }
      .msp-browse-row-cell-empty { color: var(--text-muted); opacity: 0.45; }
      /* narrow: drop the header, fall back to the labeled inline cluster */
      @media (max-width: 768px) { /* compact — consolidated from 760 (#284) */
        .msp-browse-colhead { display: none; }
        .msp-browse-row-cells { gap: var(--space-3); flex-wrap: wrap; justify-content: flex-end; }
        .msp-browse-row-cell { width: auto !important; align-items: flex-end !important; text-align: right !important; }
        .msp-browse-row-cell strong { white-space: normal; }
        .msp-browse-row-cell-label {
          display: block;
          font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
        }
      }
      /* Phone: the right-aligned stat cluster (.msp-browse-row-cells) is
         flex:0 0 auto, so it sizes to its own content and gets clipped off the
         right edge beside the label at ≤375px (the 760px wrap above is inert —
         nothing constrains the container width, so it never wraps). Drop it
         onto its own full-width line below the label so the stats flow
         left-to-right and never overflow the viewport. */
      @media (max-width: 600px) {
        .msp-browse-row-head { flex-wrap: wrap; }
        .msp-browse-row-cells {
          flex: 1 0 100%;
          justify-content: flex-start;
          gap: var(--space-2) var(--space-4);
          margin-top: 0.15rem;
          padding-left: calc(1.2rem + var(--space-3));
        }
        .msp-browse-row-cell { align-items: flex-start !important; text-align: left !important; }
        .msp-browse-row-stats {
          flex: 1 0 100%;
          justify-content: flex-start;
          flex-wrap: wrap;
          margin-top: 0.15rem;
          padding-left: calc(1.2rem + var(--space-3));
        }
      }

      /* v3.27.0: record mini-list for expand bodies. Records carry metadata
         (priority + category + type), so they read as labeled mini-rows
         (name left · "category · type" right · priority stripe) rather than
         bare chips. Bare-name lists (products, boards) stay as chips. */
      .msp-browse-reclist { display: flex; flex-direction: column; gap: 0.15rem; }
      .msp-browse-recrow {
        display: flex; align-items: baseline; justify-content: space-between;
        gap: var(--space-3);
        width: 100%;
        padding: 0.3rem 0.5rem 0.3rem 0.6rem;
        background: transparent;
        border: 1px solid transparent;
        border-left: 2px solid var(--rec-prio, var(--border-subtle));
        border-radius: 4px;
        cursor: pointer;
        text-align: left;
        font-family: inherit;
        transition: background 80ms ease, border-color 80ms ease;
      }
      .msp-browse-recrow:hover {
        background: color-mix(in srgb, var(--browse-row-accent, var(--accent)) 6%, transparent);
        border-color: var(--border-subtle);
        border-left-color: var(--rec-prio, var(--border-subtle));
      }
      .msp-browse-recrow-name {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 0.9rem;
        color: var(--text-primary);
        min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      .msp-browse-recrow-meta {
        flex: 0 0 auto;
        font-family: ui-monospace, monospace;
        font-size: 0.68rem;
        color: var(--text-muted);
        white-space: nowrap;
      }
      .msp-browse-recrow-more {
        font-family: 'Fraunces', Georgia, serif; font-style: italic;
        font-size: 0.78rem; color: var(--text-muted);
        padding: 0.2rem 0.6rem;
      }

      /* v3.27.0: canonical inline-tag taxonomy (Point 3 — one look, one rule).
         .msp-tag = neutral categorical/type label; .msp-tag--flag = a highlight
         flag only SOME rows wear (MSP-native / Universal / OOB / Gap).
         RULE OF THUMB: a fact every row has + is comparable → a stat COLUMN
         (text, not a tag). A qualifier only some rows have → .msp-tag--flag.
         One of many peer entities → a chip (or a record mini-row when it
         carries metadata). The legacy .msp-vendor-*-tag classes share these
         exact styles (see Vendors section) and are being repointed view by view. */
      .msp-tag {
        font-family: ui-monospace, monospace;
        font-size: 0.6rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 10%, transparent);
        border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
        border-radius: 4px;
        padding: 0.05rem 0.35rem;
        white-space: nowrap;
        flex: 0 0 auto;
      }
      .msp-tag--flag {
        font-family: ui-monospace, monospace;
        font-size: 0.58rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        font-weight: 600;
        color: #4a8c3a;
        background: color-mix(in srgb, #4a8c3a 10%, transparent);
        border: 1px solid color-mix(in srgb, #4a8c3a 35%, transparent);
        border-radius: 4px;
        padding: 0.05rem 0.35rem;
        white-space: nowrap;
        flex: 0 0 auto;
      }
      .msp-browse-row-body {
        padding: 0 var(--space-4) var(--space-3) calc(var(--space-4) + 1.2rem + var(--space-3));
        display: flex; flex-direction: column;
        gap: var(--space-3);
        animation: mspSectionIn 180ms cubic-bezier(.2,.7,.3,1);
      }
      .msp-browse-row-body .msp-browse-row-section-label {
        font-family: ui-monospace, monospace;
        font-size: 0.65rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: var(--space-1);
      }
      .msp-browse-row-body p {
        margin: 0;
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 0.88rem;
        line-height: 1.5;
        color: var(--text-secondary);
        max-width: 72ch;
      }
      .msp-browse-row-body ul {
        margin: 0;
        padding-left: 1.2rem;
        font-size: 0.88rem;
        line-height: 1.5;
        color: var(--text-secondary);
      }
      .msp-browse-row-body ul li { margin-bottom: var(--space-1); }
      .msp-browse-row-chips {
        display: flex; flex-wrap: wrap;
        gap: 0.35rem;
      }
      .msp-browse-row-chip {
        font-family: ui-monospace, monospace;
        font-size: 0.72rem;
        padding: 0.2rem 0.55rem;
        background: var(--chip-bg);
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
        color: var(--text-secondary);
      }
      .msp-browse-row-open {
        align-self: flex-start;
        padding: 0.3rem 0.7rem;
        background: transparent;
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
        color: var(--browse-row-accent);
        font-family: ui-monospace, monospace;
        font-size: 0.7rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        cursor: pointer;
        transition: color 0.15s, border-color 0.15s, background 0.15s;
      }
      .msp-browse-row-open:hover {
        border-color: var(--browse-row-accent);
        background: color-mix(in srgb, var(--browse-row-accent) 8%, transparent);
      }
      /* Narrow viewports: stat chips drop to 2 visible (each view's
         convention sets which ones to hide via display:none). */
      @media (max-width: 768px) { /* compact — consolidated from 720 (#284) */
        .msp-browse-row-stat:nth-child(n+3) { display: none; }
      }

      /* Tools table — cell styling only */
      .msp-tools-cell-name {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 0.95rem;
        color: var(--text-primary);
      }
      .msp-tools-cell-label {
        display: inline-flex; align-items: center;
        gap: var(--space-2);
        white-space: nowrap;
      }
      .msp-tools-cell-dot {
        width: 8px; height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .msp-tools-cell-scope {
        font-family: ui-monospace, monospace;
        font-size: 0.72rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        font-weight: 600;
      }
      .msp-tools-cell-num {
        font-family: ui-monospace, monospace;
        font-size: 0.85rem;
        text-align: right;
        color: var(--text-primary);
      }
      .msp-tools-cell-products {
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 0.82rem;
        color: var(--text-muted);
      }

      /* Tool detail — focused profile */
      .msp-tool-detail {
        --tool-accent: var(--accent);
        position: relative;
        display: flex; flex-direction: column;
        gap: var(--space-5);
        padding: var(--space-5) var(--space-5) var(--space-6) var(--space-6);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
        overflow: hidden;
      }
      .msp-tool-detail-stripe {
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 4px;
        background: var(--tool-accent);
      }
      .msp-tool-detail-head {
        display: flex; flex-direction: column;
        gap: var(--space-3);
      }
      .msp-tool-detail-back {
        align-self: flex-start;
        padding: 0.3rem 0.7rem;
        background: transparent;
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
        color: var(--text-muted);
        font-family: ui-monospace, monospace;
        font-size: 0.75rem;
        cursor: pointer;
        transition: color 0.15s, border-color 0.15s;
      }
      .msp-tool-detail-back:hover {
        color: var(--text-primary);
        border-color: var(--border-accent);
      }
      .msp-tool-detail-title-row {
        display: flex; align-items: baseline; flex-wrap: wrap;
        gap: var(--space-3);
      }
      .msp-tool-detail-title {
        margin: 0;
        font-family: 'Fraunces', Georgia, serif;
        font-size: clamp(1.4rem, 2.2vw, 1.9rem);
        font-weight: 400;
        line-height: 1.1;
        color: var(--text-primary);
      }
      .msp-tool-detail-scope {
        font-family: ui-monospace, monospace;
        font-size: 0.72rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        padding: 0.22rem 0.55rem;
        border-radius: 4px;
        color: var(--tool-accent);
        border: 1px solid color-mix(in srgb, var(--tool-accent) 40%, var(--border-subtle));
        background: color-mix(in srgb, var(--tool-accent) 10%, transparent);
      }
      .msp-tool-detail-fullname {
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 1.05rem;
        color: var(--text-secondary);
      }
      .msp-tool-detail-desc {
        margin: 0;
        max-width: 70ch;
        font-family: 'Fraunces', Georgia, serif;
        font-size: 0.95rem;
        line-height: 1.5;
        color: var(--text-secondary);
      }
      .msp-tool-detail-stats {
        display: flex; flex-wrap: wrap;
        gap: var(--space-5);
        padding: var(--space-4) 0;
        border-top: 1px solid var(--border-subtle);
        border-bottom: 1px solid var(--border-subtle);
      }
      .msp-tool-detail-stat {
        display: flex; flex-direction: column;
        gap: 0.15rem;
      }
      .msp-tool-detail-stat-val {
        font-family: ui-monospace, monospace;
        font-size: 1.4rem;
        color: var(--text-primary);
      }
      .msp-tool-detail-stat-label {
        font-family: ui-monospace, monospace;
        font-size: 0.65rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .msp-tool-detail-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: var(--space-4);
      }
      .msp-tool-detail-grid .msp-section {
        padding: var(--space-4);
        border: 1px solid var(--border-subtle);
        background: var(--bg);
        border-radius: 6px;
      }
      .msp-tool-detail-products {
        display: flex; flex-wrap: wrap;
        gap: 0.4rem;
      }
      .msp-tool-detail-product {
        font-family: ui-monospace, monospace;
        font-size: 0.78rem;
        padding: 0.25rem 0.6rem;
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
        color: var(--text-secondary);
      }
      .msp-tool-detail-products-note {
        margin: var(--space-3) 0 0;
        font-family: 'Fraunces', Georgia, serif;
        font-size: 0.8rem;
        color: var(--text-muted);
        line-height: 1.4;
      }
      .msp-tool-detail-team-desc {
        margin: 0;
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 0.9rem;
        line-height: 1.5;
        color: var(--text-secondary);
      }

      /* ===== Departments view — top-level MSP people-axis =====
         Completes the trio (Departments → Teams → Technicians).
         Cards mode: grouped by ROLE_CATEGORIES (Leadership /
         Administration / Service Delivery). */
      .msp-departments {
        display: flex; flex-direction: column;
        gap: var(--space-5);
        padding-bottom: var(--space-6);
      }
      .msp-departments-groups {
        display: flex; flex-direction: column;
        gap: var(--space-5);
      }
      .msp-departments-group {
        display: flex; flex-direction: column;
        gap: var(--space-3);
      }
      .msp-departments-group-head {
        display: flex; align-items: baseline; flex-wrap: wrap;
        gap: var(--space-3);
        padding-bottom: var(--space-2);
        border-bottom: 1px dashed var(--border-subtle);
      }
      .msp-departments-group-name {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 1.05rem;
        color: var(--text-primary);
      }
      .msp-departments-group-count {
        font-family: ui-monospace, monospace;
        font-size: 0.7rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .msp-departments-group-desc {
        flex: 1 1 auto;
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 0.85rem;
        color: var(--text-muted);
      }
      /* .msp-departments-grid superseded by .msp-card-grid (v3.24.0). */
      /* Departments table — cell styling only */
      .msp-departments-cell-name {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 0.95rem;
        color: var(--text-primary);
      }
      .msp-departments-cell-num {
        font-family: ui-monospace, monospace;
        font-size: 0.85rem;
        text-align: right;
        color: var(--text-primary);
      }
      .msp-departments-cell-desc {
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 0.85rem;
        color: var(--text-muted);
      }

      /* Department detail */
      .msp-department-detail {
        display: flex; flex-direction: column;
        gap: var(--space-5);
        padding: var(--space-5);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
      }
      .msp-department-detail-head {
        display: flex; flex-direction: column;
        gap: var(--space-3);
      }
      .msp-department-detail-back {
        align-self: flex-start;
        padding: 0.3rem 0.7rem;
        background: transparent;
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
        color: var(--text-muted);
        font-family: ui-monospace, monospace;
        font-size: 0.75rem;
        cursor: pointer;
        transition: color 0.15s, border-color 0.15s;
      }
      .msp-department-detail-back:hover {
        color: var(--text-primary);
        border-color: var(--border-accent);
      }
      .msp-department-detail-title {
        margin: 0;
        font-family: 'Fraunces', Georgia, serif;
        font-size: clamp(1.4rem, 2.2vw, 1.9rem);
        font-weight: 400;
        line-height: 1.1;
        color: var(--text-primary);
      }
      .msp-department-detail-category {
        font-family: ui-monospace, monospace;
        font-size: 0.7rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .msp-department-detail-desc {
        margin: 0;
        max-width: 70ch;
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 1rem;
        line-height: 1.5;
        color: var(--text-secondary);
      }
      .msp-department-detail-stats {
        display: flex; flex-wrap: wrap;
        gap: var(--space-5);
        padding: var(--space-4) 0;
        border-top: 1px solid var(--border-subtle);
        border-bottom: 1px solid var(--border-subtle);
      }
      .msp-department-detail-stat {
        display: flex; flex-direction: column;
        gap: 0.15rem;
      }
      .msp-department-detail-stat-val {
        font-family: ui-monospace, monospace;
        font-size: 1.5rem;
        color: var(--text-primary);
      }
      .msp-department-detail-stat-label {
        font-family: ui-monospace, monospace;
        font-size: 0.65rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .msp-department-detail-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
        gap: var(--space-4);
      }
      .msp-department-detail-grid .msp-section {
        padding: var(--space-4);
        border: 1px solid var(--border-subtle);
        background: var(--bg);
        border-radius: 6px;
      }
      .msp-department-detail-roles {
        display: flex; flex-direction: column;
        gap: var(--space-2);
      }
      .msp-department-detail-role {
        display: flex; flex-direction: column;
        gap: 0.15rem;
        padding: var(--space-2) var(--space-3);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
      }
      .msp-department-detail-role-name {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 0.95rem;
        color: var(--text-primary);
      }
      .msp-department-detail-role-tier {
        font-family: ui-monospace, monospace;
        font-size: 0.65rem;
        color: var(--text-muted);
      }
      .msp-department-detail-role-desc {
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 0.82rem;
        color: var(--text-muted);
        line-height: 1.4;
      }
      .msp-department-detail-teams {
        display: flex; flex-direction: column;
        gap: var(--space-2);
      }
      .msp-department-detail-team {
        display: flex; flex-direction: column;
        gap: 0.15rem;
        padding: var(--space-2) var(--space-3);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
      }
      .msp-department-detail-team-name {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 0.95rem;
        color: var(--text-primary);
      }
      .msp-department-detail-team-desc {
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 0.82rem;
        color: var(--text-muted);
        line-height: 1.4;
      }
      .msp-department-detail-techs {
        display: flex; flex-wrap: wrap;
        gap: var(--space-2);
      }
      .msp-department-detail-tech {
        display: inline-flex; align-items: center;
        gap: 0.4rem;
        padding: 0.22rem 0.55rem;
        font-size: 0.82rem;
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
        color: var(--text-secondary);
      }
      .msp-department-detail-tech.tier-l1 { border-left: 2px solid #7fa8c2; }
      .msp-department-detail-tech.tier-l2 { border-left: 2px solid #c69b5c; }
      .msp-department-detail-tech.tier-l3 { border-left: 2px solid #a37db5; }
      .msp-department-detail-tech-tier {
        font-family: ui-monospace, monospace;
        font-size: 0.65rem;
        color: var(--text-muted);
      }
      .msp-department-detail-tech-more {
        font-family: ui-monospace, monospace;
        font-style: italic;
        color: var(--text-muted);
      }
      .msp-department-detail-boards {
        display: flex; flex-wrap: wrap;
        gap: var(--space-2);
      }
      .msp-department-detail-board {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 0.85rem;
        padding: 0.2rem 0.6rem;
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-left: 3px solid;
        border-radius: 4px;
        color: var(--text-secondary);
      }

      /* Board detail — focused profile for one board / queue */
      .msp-board-detail {
        --board-accent: var(--accent);
        position: relative;
        display: flex; flex-direction: column;
        gap: var(--space-5);
        padding: var(--space-5) var(--space-5) var(--space-6) var(--space-6);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
        overflow: hidden;
      }
      .msp-board-detail-stripe {
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 4px;
        background: var(--board-accent);
      }
      .msp-board-detail-head {
        display: flex; flex-direction: column;
        gap: var(--space-3);
      }
      .msp-board-detail-back {
        align-self: flex-start;
        padding: 0.3rem 0.7rem;
        background: transparent;
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
        color: var(--text-muted);
        font-family: ui-monospace, monospace;
        font-size: 0.75rem;
        cursor: pointer;
        transition: color 0.15s, border-color 0.15s;
      }
      .msp-board-detail-back:hover {
        color: var(--text-primary);
        border-color: var(--border-accent);
      }
      .msp-board-detail-title {
        margin: 0;
        display: flex; align-items: center; flex-wrap: wrap;
        gap: var(--space-3);
        font-family: 'Fraunces', Georgia, serif;
        font-size: clamp(1.4rem, 2.2vw, 1.9rem);
        font-weight: 400;
        line-height: 1.1;
        color: var(--text-primary);
      }
      .msp-board-detail-short {
        font-family: ui-monospace, monospace;
        font-size: 0.7rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--board-accent);
        padding: 0.22rem 0.5rem;
        border: 1px solid color-mix(in srgb, var(--board-accent) 40%, var(--border-subtle));
        border-radius: 4px;
      }
      .msp-board-detail-oob {
        font-family: ui-monospace, monospace;
        font-size: 0.68rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        padding: 0.22rem 0.55rem;
        border-radius: 4px;
        border: 1px solid var(--border-subtle);
        background: var(--chip-bg);
        color: var(--text-muted);
      }
      .msp-board-detail-oob.is-oob {
        color: color-mix(in srgb, #5b8db8 70%, var(--text-secondary));
        border-color: color-mix(in srgb, #5b8db8 40%, var(--border-subtle));
      }
      .msp-board-detail-oob.is-custom {
        color: color-mix(in srgb, #c69b5c 70%, var(--text-secondary));
        border-color: color-mix(in srgb, #c69b5c 40%, var(--border-subtle));
      }
      .msp-board-detail-desc {
        margin: 0;
        max-width: 70ch;
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 1rem;
        line-height: 1.5;
        color: var(--text-secondary);
      }
      .msp-board-detail-oob-note {
        margin: 0;
        font-family: 'Fraunces', Georgia, serif;
        font-size: 0.85rem;
        color: var(--text-muted);
      }
      .msp-board-detail-stats {
        display: flex; flex-wrap: wrap;
        gap: var(--space-5);
        padding: var(--space-4) 0;
        border-top: 1px solid var(--border-subtle);
        border-bottom: 1px solid var(--border-subtle);
      }
      .msp-board-detail-stat {
        display: flex; flex-direction: column;
        gap: 0.15rem;
      }
      .msp-board-detail-stat-val {
        font-family: ui-monospace, monospace;
        font-size: 1.6rem;
        color: var(--text-primary);
      }
      .msp-board-detail-stat-label {
        font-family: ui-monospace, monospace;
        font-size: 0.65rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .msp-board-detail-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
        gap: var(--space-4);
      }
      .msp-board-detail-grid .msp-section {
        padding: 0;
        border-bottom: none;
        background: var(--bg);
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
        padding: var(--space-4);
      }

      /* Horizontal bar chart used by both ITIL-type and Priority breakdowns */
      .msp-board-bars {
        display: flex; flex-direction: column;
        gap: var(--space-2);
      }
      .msp-board-bar {
        display: grid;
        grid-template-columns: 11rem 1fr 2rem;
        align-items: center;
        gap: var(--space-2);
      }
      .msp-board-bar-label {
        display: inline-flex; align-items: center;
        gap: var(--space-2);
        font-size: 0.85rem;
        color: var(--text-secondary);
      }
      .msp-board-bar-icon {
        display: inline-flex;
        color: var(--text-muted);
      }
      .msp-board-bar-icon svg {
        width: 13px; height: 13px;
      }
      .msp-board-bar-dot {
        width: 9px; height: 9px;
        border-radius: 50%;
      }
      .msp-board-bar-track {
        height: 8px;
        background: var(--chip-bg);
        border-radius: 999px;
        overflow: hidden;
      }
      .msp-board-bar-fill {
        display: block;
        height: 100%;
        background: var(--accent);
        border-radius: 999px;
        transition: width 240ms cubic-bezier(.2,.7,.3,1);
      }
      .msp-board-bar-count {
        font-family: ui-monospace, monospace;
        font-size: 0.82rem;
        color: var(--text-primary);
        text-align: right;
      }

      /* Teams + technicians + status preview sections inside detail */
      .msp-board-teams-list {
        display: flex; flex-direction: column;
        gap: var(--space-2);
      }
      .msp-board-team-row {
        display: flex; flex-direction: column;
        gap: 0.15rem;
        padding: var(--space-2) var(--space-3);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-left: 2px solid var(--board-accent);
        border-radius: 4px;
      }
      .msp-board-team-name {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 0.95rem;
        color: var(--text-primary);
      }
      .msp-board-team-desc {
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 0.8rem;
        color: var(--text-muted);
        line-height: 1.4;
      }
      .msp-board-tech-chips {
        display: flex; flex-wrap: wrap;
        gap: var(--space-2);
      }
      .msp-board-tech-chip {
        display: inline-flex; align-items: center;
        gap: 0.4rem;
        padding: 0.22rem 0.55rem;
        font-size: 0.82rem;
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
        color: var(--text-secondary);
      }
      .msp-board-tech-chip.tier-l1 { border-left: 2px solid #7fa8c2; }
      .msp-board-tech-chip.tier-l2 { border-left: 2px solid #c69b5c; }
      .msp-board-tech-chip.tier-l3 { border-left: 2px solid #a37db5; }
      .msp-board-tech-tier {
        font-family: ui-monospace, monospace;
        font-size: 0.65rem;
        color: var(--text-muted);
      }
      .msp-board-tech-more {
        font-family: ui-monospace, monospace;
        font-style: italic;
        color: var(--text-muted);
      }
      .msp-board-detail-statuses {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: var(--space-2);
      }
      .msp-board-status-pill {
        display: inline-flex; align-items: center;
        padding: 0.25rem 0.65rem;
        font-family: 'Fraunces', Georgia, serif;
        font-size: 0.82rem;
        border: 1.5px solid;
        border-radius: 999px;
        color: var(--text-primary);
      }
      .msp-board-status-arrow {
        color: var(--text-muted);
        font-size: 0.85rem;
      }
      .msp-board-routes-list {
        display: flex; flex-direction: column;
        gap: var(--space-2);
      }
      .msp-board-routes-item {
        display: flex; align-items: center;
        gap: var(--space-3);
        padding: var(--space-2) var(--space-3);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-left: 3px solid;
        border-radius: 4px;
        cursor: pointer;
        text-align: left;
        font-family: inherit;
        transition: background-color 80ms ease;
      }
      .msp-board-routes-item:hover {
        background: color-mix(in srgb, var(--accent) 6%, transparent);
      }
      .msp-board-routes-arrow {
        font-size: 0.95rem;
        color: var(--text-muted);
      }
      .msp-board-routes-name {
        flex: 1 1 auto;
        font-family: 'Fraunces', Georgia, serif;
        font-size: 0.95rem;
        color: var(--text-primary);
      }
      .msp-board-routes-count {
        font-family: ui-monospace, monospace;
        font-size: 0.78rem;
        color: var(--text-muted);
      }
      .msp-board-records-list {
        display: flex; flex-direction: column;
        gap: 0.2rem;
      }
      .msp-board-record-row {
        display: flex; align-items: center;
        gap: var(--space-3);
        padding: var(--space-2) var(--space-3);
        background: transparent;
        border: 1px solid transparent;
        border-radius: 4px;
        cursor: pointer;
        text-align: left;
        font-family: inherit;
        transition: background-color 80ms ease, border-color 80ms ease;
      }
      .msp-board-record-row:hover {
        background: color-mix(in srgb, var(--accent) 6%, transparent);
        border-color: var(--border-subtle);
      }
      .msp-board-record-prio {
        width: 8px; height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .msp-board-record-name {
        flex: 1 1 auto;
        font-family: 'Fraunces', Georgia, serif;
        font-size: 0.9rem;
        color: var(--text-primary);
      }
      .msp-board-record-meta {
        font-family: ui-monospace, monospace;
        font-size: 0.72rem;
        color: var(--text-muted);
      }

      /* ===== Pods view — customer-facing cross-team groupings ===== */
      .msp-pods {
        display: flex; flex-direction: column;
        gap: var(--space-5);
        padding-bottom: var(--space-6);
      }
      .msp-pods-intro {
        display: flex; flex-direction: column;
        gap: var(--space-3);
        padding-bottom: var(--space-4);
        border-bottom: 1px solid var(--border-subtle);
      }
      .msp-pods-intro p {
        margin: 0;
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        color: var(--text-secondary);
        max-width: 75ch;
        line-height: 1.55;
      }
      .msp-pods-stats {
        display: flex; flex-wrap: wrap;
        align-items: baseline;
        gap: var(--space-3);
        font-family: ui-monospace, monospace;
        font-size: var(--text-sm);
        color: var(--text-muted);
      }
      .msp-pods-stat-sep { opacity: 0.5; }

      /* .msp-pods-grid superseded by .msp-card-grid--wide (v3.24.0). */

      .msp-pod-card {
        display: flex; flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-4);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-left: 3px solid var(--basis-color, var(--accent));
        border-radius: 8px;
        text-align: left;
        cursor: pointer;
        transition: border-color 120ms ease, transform 120ms ease;
        font-family: inherit;
        color: inherit;
      }
      .msp-pod-card:hover {
        border-color: var(--border-accent);
      }
      .msp-pod-card-head {
        display: flex; align-items: center;
        gap: var(--space-2);
      }
      .msp-pod-card-label {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-lg);
        font-weight: 500;
        color: var(--text-primary);
        flex: 1;
        line-height: 1.25;
      }
      .msp-pod-card-basis {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        padding: 0.15rem 0.5rem;
        border-radius: 10px;
        background: transparent;
        border: 1px solid currentColor;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      .msp-pod-card-desc {
        margin: 0;
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-sm);
        color: var(--text-muted);
        line-height: 1.45;
      }
      .msp-pod-card-meta {
        display: flex; flex-direction: column;
        gap: var(--space-2);
        margin-top: var(--space-2);
        padding-top: var(--space-3);
        border-top: 1px dashed var(--border-subtle);
      }
      .msp-pod-card-meta-row {
        display: flex; align-items: center;
        gap: var(--space-2);
      }
      .msp-pod-card-meta-label {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        letter-spacing: 0.08em;
        min-width: 70px;
      }
      .msp-pod-card-lead {
        display: flex; align-items: center;
        gap: var(--space-2);
        flex: 1;
      }
      .msp-pod-card-lead-avatar {
        width: 28px; height: 28px;
        border-radius: 50%;
        background: var(--chip-bg);
        border: 1px solid var(--border-subtle);
        display: flex; align-items: center; justify-content: center;
        font-family: "Fraunces", Georgia, serif;
        font-weight: 500;
        font-size: var(--text-xs);
        color: var(--text-primary);
        flex-shrink: 0;
      }
      .msp-pod-card-lead-body {
        display: flex; flex-direction: column;
        gap: 0;
        min-width: 0;
        flex: 1;
      }
      .msp-pod-card-lead-name {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-sm);
        color: var(--text-primary);
        font-weight: 500;
      }
      .msp-pod-card-lead-role {
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-xs);
        color: var(--text-muted);
      }
      .msp-pod-card-boards {
        display: flex; flex-wrap: wrap;
        gap: 0.3rem;
        flex: 1;
      }
      .msp-pod-card-board {
        display: inline-flex; align-items: center;
        gap: 0.25rem;
        padding: 0.05rem 0.4rem;
        background: var(--chip-bg);
        border-radius: 10px;
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-secondary);
        letter-spacing: 0.04em;
      }
      .msp-pod-card-board-dot {
        width: 6px; height: 6px;
        border-radius: 50%;
      }
      .msp-pod-card-members {
        font-family: ui-monospace, monospace;
        font-size: var(--text-sm);
        color: var(--text-secondary);
      }
      .msp-pod-card-members strong {
        color: var(--text-primary);
      }
      .msp-pod-card-tier-bar {
        display: flex; flex: 1;
        height: 16px;
        border-radius: 8px;
        overflow: hidden;
        background: var(--chip-bg);
        border: 1px solid var(--border-subtle);
      }
      .msp-pod-card-tier-seg {
        display: flex; align-items: center; justify-content: center;
        font-family: ui-monospace, monospace;
        font-size: 0.55rem;
        color: rgba(255, 255, 255, 0.88);
        letter-spacing: 0.05em;
      }
      .msp-pod-card-tier-seg.tier-l1 { background: #5b9576; }
      .msp-pod-card-tier-seg.tier-l2 { background: #4476b8; }
      .msp-pod-card-tier-seg.tier-l3 { background: #a37db5; }

      /* ===== Pod detail mode ===== */
      .msp-pod-detail {
        display: flex; flex-direction: column;
        gap: var(--space-5);
        padding-bottom: var(--space-6);
      }
      .msp-pod-detail-back {
        align-self: flex-start;
        display: inline-flex; align-items: center;
        gap: 0.35rem;
        padding: var(--space-2) var(--space-3);
        background: transparent;
        border: 1px solid var(--border-subtle);
        border-radius: 999px;
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-secondary);
        cursor: pointer;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      .msp-pod-detail-back:hover {
        border-color: var(--border-accent);
        color: var(--text-primary);
      }
      .msp-pod-detail-head {
        display: flex; flex-direction: column;
        gap: var(--space-2);
        padding-bottom: var(--space-3);
        border-bottom: 1px solid var(--border-subtle);
      }
      .msp-pod-detail-title {
        margin: 0;
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-2xl);
        font-weight: 500;
        color: var(--text-primary);
      }
      .msp-pod-detail-basis {
        align-self: flex-start;
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        padding: 0.15rem 0.5rem;
        border-radius: 10px;
        border: 1px solid currentColor;
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }
      .msp-pod-detail-desc {
        margin: 0;
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        color: var(--text-secondary);
        max-width: 75ch;
        line-height: 1.5;
      }
      .msp-pod-detail-segment {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: var(--space-4);
      }
      .msp-pod-detail-segment-block {
        display: flex; flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-3);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
      }
      .msp-pod-detail-segment-label {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }
      .msp-pod-detail-segment-text {
        margin: 0;
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        color: var(--text-secondary);
        line-height: 1.5;
        font-size: var(--text-sm);
      }
      .msp-pod-detail-section {
        display: flex; flex-direction: column;
        gap: var(--space-3);
      }
      .msp-pod-detail-section-h {
        margin: 0;
        display: flex; align-items: baseline;
        gap: var(--space-3);
        flex-wrap: wrap;
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-xl);
        font-weight: 500;
        color: var(--text-primary);
      }
      .msp-pod-detail-section-count {
        font-family: ui-monospace, monospace;
        font-size: var(--text-sm);
        color: var(--text-muted);
        font-weight: normal;
      }
      .msp-pod-detail-boards {
        display: flex; flex-wrap: wrap;
        gap: var(--space-2);
      }
      .msp-pod-detail-board {
        display: inline-flex; align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--border-subtle);
        border-left: 3px solid var(--board-color, var(--accent));
        border-radius: 6px;
        background: var(--card);
      }
      .msp-pod-detail-board-dot {
        width: 8px; height: 8px;
        border-radius: 50%;
      }
      .msp-pod-detail-board-label {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-sm);
        color: var(--text-primary);
      }
      .msp-pod-detail-board-count {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        background: var(--chip-bg);
        padding: 0 0.4rem;
        border-radius: 8px;
      }
      .msp-pod-detail-members-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: var(--space-3);
      }

      /* Pod clients section */
      .msp-pod-clients-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
        gap: var(--space-3);
      }
      .msp-pod-client {
        display: flex; flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-3);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
      }
      .msp-pod-client.secondary {
        border-left: 3px dashed var(--accent);
        background: linear-gradient(to right, rgba(193, 70, 56, 0.03), transparent);
      }
      .msp-pod-client-head {
        display: flex; align-items: center;
        gap: var(--space-2);
        flex-wrap: wrap;
      }
      .msp-pod-client-name {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-md);
        font-weight: 500;
        color: var(--text-primary);
      }
      .msp-pod-client-tier-badge {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        padding: 0.05rem 0.4rem;
        border-radius: 10px;
        color: var(--accent);
        background: rgba(193, 70, 56, 0.10);
        border: 1px solid var(--accent);
        letter-spacing: 0.05em;
      }
      .msp-pod-client-secondary-tag {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        padding: 0.05rem 0.4rem;
        border-radius: 10px;
        color: var(--text-muted);
        background: var(--chip-bg);
        border: 1px dashed var(--border-subtle);
        letter-spacing: 0.04em;
      }
      .msp-pod-client-meta {
        display: flex; flex-wrap: wrap;
        gap: 0.35rem;
        align-items: baseline;
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        letter-spacing: 0.02em;
      }
      .msp-pod-client-sep { opacity: 0.5; }
      .msp-pod-client-notes {
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-sm);
        color: var(--text-secondary);
        line-height: 1.45;
      }

      .msp-pod-member {
        display: flex;
        gap: var(--space-3);
        padding: var(--space-3);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        position: relative;
      }
      .msp-pod-member.lead {
        border-left: 3px solid var(--accent);
        background: linear-gradient(to right, rgba(193, 70, 56, 0.04), transparent);
      }
      .msp-pod-member-avatar {
        flex-shrink: 0;
        width: 40px; height: 40px;
        border-radius: 50%;
        background: var(--chip-bg);
        border: 1px solid var(--border-subtle);
        display: flex; align-items: center; justify-content: center;
        font-family: "Fraunces", Georgia, serif;
        font-weight: 500;
        font-size: var(--text-sm);
        color: var(--text-primary);
      }
      .msp-pod-member-body {
        display: flex; flex-direction: column;
        gap: 0.25rem;
        flex: 1; min-width: 0;
      }
      .msp-pod-member-name-row {
        display: flex; align-items: center;
        gap: var(--space-2);
        flex-wrap: wrap;
      }
      .msp-pod-member-name {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-md);
        font-weight: 500;
        color: var(--text-primary);
      }
      .msp-pod-member-lead-badge {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--accent);
        background: rgba(193, 70, 56, 0.10);
        border: 1px solid var(--accent);
        padding: 0.05rem 0.4rem;
        border-radius: 10px;
        letter-spacing: 0.08em;
      }
      .msp-pod-member-tier {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        padding: 0.05rem 0.4rem;
        border-radius: 10px;
        color: white;
        letter-spacing: 0.05em;
      }
      .msp-pod-member-tier.tier-l1 { background: #5b9576; }
      .msp-pod-member-tier.tier-l2 { background: #4476b8; }
      .msp-pod-member-tier.tier-l3 { background: #a37db5; }
      .msp-pod-member-role {
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-sm);
        color: var(--text-secondary);
      }
      .msp-pod-member-home {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
      }
      .msp-pod-member-home-label {
        letter-spacing: 0.05em;
      }
      .msp-pod-member-home-team {
        color: var(--text-secondary);
        font-weight: 500;
      }
      .msp-pod-member-otherpods {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        margin-top: 0.15rem;
      }
      .msp-pod-member-otherpod {
        color: var(--accent);
        font-style: italic;
      }

      /* ===== ViewToolbar (shared) — Clients, Workflows, Teams, Roles ===== */
      /* ─── ViewHeader — standardized intro for every view ─────────────
         Replaces all the ad-hoc intro classes (.msp-clients-intro,
         .msp-pods-intro, .msp-statuses-intro, .msp-workflows-intro,
         .msp-sort-header in Skills, .msp-tickets-head). Same shape
         everywhere: title (Fraunces italic) + italic description +
         inline mono stats + optional right-aligned action cluster.

         Wrapped in a soft card box (matches the original Statuses /
         Workflows intro treatment) so the title + description cluster
         reads as a distinct introductory unit rather than floating
         text. */
      .msp-view-header {
        display: flex; align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-4);
        /* L-13: tighter outer + inner spacing so the view header
           consumes less vertical real estate. Previously --space-4
           margin-bottom + --space-4/--space-5 padding ≈ 56px; now ≈ 32px. */
        margin: 0 0 var(--space-3);
        padding: var(--space-3) var(--space-4);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
      }
      .msp-view-header-main {
        flex: 1 1 auto;
        min-width: 0;
        display: flex; flex-direction: column;
        /* L-13: tighter row gap inside the header */
        gap: var(--space-1);
      }
      .msp-view-header-title {
        font-family: "Fraunces", Georgia, serif;
        /* L-13: shrunk from --text-2xl (1.5rem) → --text-xl (1.25rem) */
        font-size: var(--text-xl);
        font-weight: 400;
        font-style: italic;
        margin: 0;
        line-height: 1.1;
        color: var(--text-primary);
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--space-3);
      }
      .msp-view-header-title-text {
        /* Wrap target so the badge stays on the title line if it fits,
           else drops cleanly below — matches the .msp-view-header-stats
           wrapping pattern. */
        display: inline;
      }
      /* MSP size filter badge — clickable chip that displays the active
         size and clears the filter on click. Uses the accent color so
         the active filter state reads as a deliberate session attribute
         (matches the SessionBar's chip-active accent treatment). The
         baseline alignment with the Fraunces title lets the chip read
         as a subordinate annotation rather than a sibling heading. */
      .msp-view-header-size-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.2rem 0.55rem 0.2rem 0.5rem;
        background: color-mix(in srgb, var(--accent) 14%, var(--card));
        color: var(--accent);
        border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
        border-radius: 999px;
        font-family: ui-monospace, monospace;
        font-style: normal;
        font-size: var(--text-sm);
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        cursor: pointer;
        line-height: 1.2;
        transition: background 0.15s, border-color 0.15s, color 0.15s;
        align-self: center;
      }
      .msp-view-header-size-badge:hover {
        background: color-mix(in srgb, var(--accent) 22%, var(--card));
        border-color: color-mix(in srgb, var(--accent) 50%, transparent);
      }
      .msp-view-header-size-badge-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        flex: 0 0 auto;
      }
      .msp-view-header-size-badge-label {
        font-family: inherit;
      }
      .msp-view-header-size-badge-x {
        font-family: inherit;
        font-size: 1.05em;
        line-height: 1;
        opacity: 0.7;
        margin-left: 0.1rem;
        font-weight: 700;
      }
      .msp-view-header-size-badge:hover .msp-view-header-size-badge-x {
        opacity: 1;
      }
      /* Filtered-count line — shown under stats when an MSP size filter
         is active. Provides "Showing X of Y for [Size]" so the user
         knows the stats numbers still reflect the global catalog and
         the count below reflects what's actually rendered. */
      .msp-view-header-filtered-count {
        margin-top: var(--space-1);
        font-family: ui-monospace, monospace;
        font-size: var(--text-sm);
        color: var(--text-secondary);
        letter-spacing: 0.02em;
      }
      .msp-view-header-filtered-count strong {
        font-weight: 600;
        color: var(--accent);
        font-family: ui-monospace, monospace;
      }
      /* v3.40.9: cross-PSA "why the counts differ" explainer on the
         Boards / Queues / Teams view — collapsible note + comparison table. */
      .msp-parity {
        margin: 0 0 var(--space-4);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md, 0.5rem);
        background: var(--card);
        overflow: hidden;
      }
      .msp-parity-summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: baseline;
        gap: var(--space-3);
        flex-wrap: wrap;
        padding: 0.7rem 0.95rem;
        user-select: none;
        transition: background 120ms ease;
      }
      .msp-parity-summary::-webkit-details-marker { display: none; }
      .msp-parity-summary:hover {
        background: color-mix(in srgb, var(--accent) 6%, var(--card));
      }
      .msp-parity[open] .msp-parity-summary {
        border-bottom: 1px solid var(--border-subtle);
      }
      .msp-parity-q {
        font-family: var(--font-serif, 'Fraunces', Georgia, serif);
        font-size: var(--text-md, 1rem);
        color: var(--text-primary);
      }
      .msp-parity-q::before {
        content: "\25B8";
        display: inline-block;
        margin-right: 0.5rem;
        color: var(--accent);
        transition: transform 140ms ease;
      }
      .msp-parity[open] .msp-parity-q::before { transform: rotate(90deg); }
      .msp-parity-hint {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs, 0.65rem);
        letter-spacing: 0.05em;
        color: var(--text-muted);
        text-transform: uppercase;
      }
      .msp-parity-body { padding: var(--space-4) var(--space-4) var(--space-5); }
      .msp-parity-lead,
      .msp-parity-foot {
        margin: 0;
        font-size: var(--text-base, 0.9rem);
        line-height: 1.55;
        color: var(--text-secondary);
      }
      .msp-parity-lead em,
      .msp-parity-foot em { font-style: italic; color: var(--text-primary); }
      .msp-parity-lead strong,
      .msp-parity-foot strong { color: var(--text-primary); font-weight: 600; }
      .msp-parity-foot { margin-top: var(--space-3); font-size: var(--text-sm, 0.8rem); }
      .msp-parity-table-wrap { overflow-x: auto; margin: var(--space-4) 0; }
      .msp-parity-table {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--text-sm, 0.8rem);
        min-width: 34rem;
      }
      .msp-parity-table th {
        text-align: left;
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs, 0.65rem);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-muted);
        font-weight: 600;
        padding: 0 0.7rem 0.45rem;
        border-bottom: 1px solid var(--border-subtle);
        white-space: nowrap;
      }
      .msp-parity-table td {
        padding: 0.6rem 0.7rem;
        border-bottom: 1px solid var(--border-subtle);
        color: var(--text-secondary);
        vertical-align: top;
        line-height: 1.45;
      }
      .msp-parity-table tr:last-child td { border-bottom: 0; }
      .msp-parity-table td:first-child {
        font-family: var(--font-serif, 'Fraunces', Georgia, serif);
        color: var(--text-primary);
        font-size: var(--text-base, 0.9rem);
        white-space: nowrap;
      }
      .msp-parity-count strong {
        font-family: ui-monospace, monospace;
        color: var(--text-primary);
        font-weight: 600;
      }
      .msp-parity-oob {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs, 0.65rem);
        color: var(--text-muted);
      }
      .msp-parity-active { background: color-mix(in srgb, var(--accent) 8%, transparent); }
      .msp-parity-active td:first-child { color: var(--accent); }
      .msp-parity-you {
        display: inline-block;
        margin-left: 0.5rem;
        font-family: ui-monospace, monospace;
        font-size: 0.6rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 14%, transparent);
        border-radius: var(--radius-pill, 999px);
        padding: 0.1rem 0.4rem;
        vertical-align: middle;
      }
      /* v3.40.10: "?" help button next to the PSA chips → opens PsaGuidePanel. */
      .msp-psa-help-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.3rem;
        height: 1.3rem;
        flex: none;
        border-radius: var(--radius-circle, 999px);
        border: 1px solid var(--border-subtle);
        background: var(--card);
        color: var(--text-muted);
        font-family: var(--font-serif, Georgia, serif);
        font-size: 0.82rem;
        font-weight: 600;
        line-height: 1;
        cursor: pointer;
        padding: 0;
        transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
      }
      .msp-psa-help-btn:hover {
        color: var(--accent);
        border-color: var(--accent);
        background: color-mix(in srgb, var(--accent) 10%, var(--card));
      }
      .msp-psa-help-btn:focus-visible {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
      }
      .msp-view-header-desc {
        margin: 0;
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        /* L-13: shrunk from var(--text-md) (1rem) → 0.88rem so the description
           reads as a supporting line rather than a paragraph.
           v3.22.1: -webkit-line-clamp removed — descriptions now show in
           full. Use the new "Read more →" affordance for the deepest
           explainer. Vendors / KPIs / OML / Insights all benefited the most
           from this — their descriptions exceeded the 2-line clamp. */
        font-size: 0.88rem;
        color: var(--text-secondary);
        line-height: 1.4;
        max-width: 78ch;
      }
      /* v3.22.1: inline "Read more →" affordance. Sits inline at the end of
         the description so it reads as continuation prose, not a separate
         button. Accent-colored to signal action; underline on hover. */
      .msp-view-header-readmore {
        display: inline;
        background: transparent;
        border: 0;
        padding: 0;
        margin: 0;
        font: inherit;
        font-style: normal;
        font-weight: 600;
        color: var(--accent);
        cursor: pointer;
        text-decoration: none;
        white-space: nowrap;
        transition: opacity 140ms ease;
      }
      .msp-view-header-readmore:hover {
        text-decoration: underline;
        opacity: 0.85;
      }
      /* v3.22.1: ViewDeepDescription modal — reuses .msp-modal-overlay +
         .msp-about chrome from AboutPanel, layers in deep-description
         typography. */
      .msp-view-deep-desc {
        max-width: 720px;
      }
      .msp-view-deep-desc-head {
        margin-bottom: var(--space-4);
      }
      .msp-view-deep-desc-kicker {
        display: block;
        font-family: ui-monospace, monospace;
        font-size: 0.7rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: var(--space-1);
      }
      .msp-view-deep-desc-title {
        margin: 0;
        font-family: "Fraunces", Georgia, serif;
        font-size: 1.65rem;
        font-weight: 500;
        color: var(--text-primary);
        line-height: 1.15;
      }
      .msp-view-deep-desc-intro {
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: 1.05rem;
        line-height: 1.55;
        color: var(--text-secondary);
        margin-bottom: var(--space-5);
        padding-bottom: var(--space-4);
        border-bottom: 1px solid var(--border-subtle);
      }
      .msp-view-deep-desc-sections {
        display: flex; flex-direction: column;
        gap: var(--space-5);
      }
      .msp-rich-section-heading {
        margin: 0 0 var(--space-2) 0;
        font-family: ui-sans-serif, system-ui, sans-serif;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--accent);
      }
      .msp-rich-section-body {
        font-size: 0.92rem;
        line-height: 1.55;
        color: var(--text-primary);
      }
      .msp-rich-section-body p { margin: 0 0 var(--space-2) 0; }
      .msp-rich-section-body p:last-child { margin-bottom: 0; }
      .msp-rich-section-body ul {
        margin: 0;
        padding-left: 1.2rem;
      }
      .msp-rich-section-body li {
        margin-bottom: var(--space-2);
      }
      .msp-rich-section-body li:last-child { margin-bottom: 0; }
      .msp-rich-section-body strong { color: var(--text-primary); font-weight: 600; }
      .msp-rich-section-body code {
        font-family: ui-monospace, monospace;
        font-size: 0.85em;
        background: var(--chip-bg);
        padding: 0.1rem 0.35rem;
        border-radius: 4px;
      }
      .msp-view-deep-desc-related {
        display: flex; flex-wrap: wrap;
        gap: var(--space-2);
        margin-top: var(--space-3);
      }
      .msp-view-deep-desc-related-chip {
        display: inline-flex;
        align-items: center;
        padding: 0.4rem 0.85rem;
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 999px;
        font-family: inherit;
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text-secondary);
        cursor: pointer;
        transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
      }
      .msp-view-deep-desc-related-chip:hover {
        background: color-mix(in srgb, var(--accent) 8%, var(--card));
        border-color: var(--accent);
        color: var(--accent);
        transform: translateY(-1px);
      }
      .msp-view-header-stats {
        display: flex; flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2);
        font-family: ui-monospace, monospace;
        font-size: var(--text-sm);
        color: var(--text-muted);
        letter-spacing: 0.02em;
      }
      .msp-view-header-stat {
        display: inline-flex; align-items: baseline;
        gap: 0.3rem;
        color: var(--text-secondary);
      }
      .msp-view-header-stat strong {
        font-weight: 600;
        color: var(--text-primary);
        font-family: ui-monospace, monospace;
      }
      .msp-view-header-stat-label {
        color: var(--text-muted);
      }
      .msp-view-header-stat-sep {
        color: var(--border-subtle);
      }
      .msp-view-header-stat-warn strong { color: #c4733a; }
      .msp-view-header-stat-alert strong { color: #c14638; }
      .msp-view-header-extras {
        margin-top: var(--space-2);
      }
      .msp-view-header-actions {
        flex: 0 0 auto;
        display: flex; align-items: center;
        gap: var(--space-2);
        flex-wrap: wrap;
        justify-content: flex-end;
      }
      @media (max-width: 768px) { /* compact — consolidated from 720 (#284) */
        .msp-view-header {
          flex-direction: column;
          align-items: stretch;
        }
        .msp-view-header-actions {
          justify-content: flex-start;
        }
      }

      .msp-view-toolbar {
        display: flex; flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-3);
        background: var(--bg);
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
      }
      /* RecordsView — thin top-of-view toolbar that hosts the
         Table/Tree internal mode toggle. Slimmer than ViewToolbar
         because it has only 2 chips + a count; doesn't need the full
         filter/sort/toggle scaffolding. */
      /* Canonical view-container shape — matches every other tab's
         wrapper. The ad-hoc .msp-records-toolbar that used to live
         here was replaced with the shared <ViewToolbar /> component;
         no bespoke layout styles needed anymore. */
      .msp-records {
        display: flex; flex-direction: column;
        gap: var(--space-5);
        padding-bottom: var(--space-6);
      }
      /* ── TechniciansView cards ─────────────────────────────────────
         Modeled directly on .msp-client-card so the two views share the
         same visual rhythm: same grid sizing, same head-button affordance,
         same dashed-top expand body. Tier accent on the left edge gives
         L1 / L2 / L3 a glanceable hierarchy. */
      /* .msp-technicians-grid superseded by .msp-card-grid (v3.24.0). */
      .msp-technician-card {
        display: flex; flex-direction: column;
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        border-left: 3px solid var(--border-subtle);
        transition: border-color 120ms ease, box-shadow 120ms ease;
        overflow: hidden;
      }
      /* Tier accent on the left edge — picks up the same warm tones used
         elsewhere in the app. L3 reads as the most senior (accent); L1
         is the lightest (muted). */
      .msp-technician-card.tier-l3 { border-left-color: var(--accent); }
      .msp-technician-card.tier-l2 { border-left-color: color-mix(in srgb, var(--accent) 55%, var(--text-muted)); }
      .msp-technician-card.tier-l1 { border-left-color: color-mix(in srgb, var(--text-muted) 70%, var(--border-subtle)); }
      .msp-technician-card.non-ops { opacity: 0.78; }
      .msp-technician-card:hover {
        border-color: var(--border-accent);
      }
      .msp-technician-card.open {
        border-color: var(--border-accent);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      }
      .msp-technician-card-head-btn {
        display: flex; flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-4);
        background: transparent;
        border: none;
        cursor: pointer;
        text-align: left;
        font-family: inherit;
        color: var(--text-primary);
        width: 100%;
      }
      .msp-technician-card-head {
        display: flex; align-items: center;
        gap: var(--space-2);
      }
      .msp-technician-card-avatar {
        width: 32px; height: 32px;
        flex-shrink: 0;
        border-radius: 50%;
        background: var(--chip-bg);
        border: 1px solid var(--border-subtle);
        display: flex; align-items: center; justify-content: center;
        font-family: ui-monospace, monospace;
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--text-primary);
        letter-spacing: 0.02em;
      }
      .msp-technician-card-identity {
        display: flex; flex-direction: column;
        gap: 0.1rem;
        min-width: 0;
      }
      .msp-technician-card-name {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-md);
        font-weight: 500;
        color: var(--text-primary);
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .msp-technician-card-role {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-secondary);
        letter-spacing: 0.02em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .msp-technician-card-tier-badge {
        flex-shrink: 0;
        padding: 0.1rem 0.45rem;
        border-radius: 3px;
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        font-weight: 600;
        letter-spacing: 0.06em;
        border: 1px solid transparent;
      }
      .msp-technician-card-tier-badge.tier-l3 {
        color: var(--accent);
        border-color: color-mix(in srgb, var(--accent) 40%, transparent);
        background: color-mix(in srgb, var(--accent) 10%, transparent);
      }
      .msp-technician-card-tier-badge.tier-l2 {
        color: var(--text-secondary);
        border-color: var(--border-subtle);
        background: var(--chip-bg);
      }
      .msp-technician-card-tier-badge.tier-l1 {
        color: var(--text-muted);
        border-color: var(--border-subtle);
        background: transparent;
      }
      .msp-technician-card-nonops-badge {
        flex-shrink: 0;
        padding: 0.1rem 0.4rem;
        border-radius: 3px;
        font-family: ui-monospace, monospace;
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        color: var(--text-muted);
        background: var(--bg);
        border: 1px dashed var(--border-subtle);
      }
      .msp-technician-card-toggle {
        font-family: ui-monospace, monospace;
        font-size: var(--text-lg);
        color: var(--text-muted);
        flex-shrink: 0;
        margin-left: auto;
      }
      .msp-technician-card-meta {
        display: flex; flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2);
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-secondary);
      }
      .msp-technician-card-team,
      .msp-technician-card-secondary {
        display: inline-flex; align-items: center;
        gap: 0.4rem;
      }
      .msp-technician-card-meta-label {
        font-size: 0.6rem;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }
      .msp-technician-card-meta-sep {
        color: var(--text-muted);
      }
      .msp-technician-card-skill-preview {
        display: flex; flex-wrap: wrap;
        gap: 0.35rem;
        align-items: center;
      }
      .msp-technician-card-skill-chip {
        /* Tighten the shared msp-skill-chip when used in the card head */
        padding: 0.18rem 0.45rem;
      }
      .msp-technician-card-skill-more {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        align-self: center;
      }
      .msp-technician-card-foot {
        display: flex; flex-wrap: wrap;
        gap: 0.35rem;
        align-items: center;
        margin-top: 0.1rem;
      }
      .msp-technician-card-pod {
        display: inline-flex; align-items: center;
        gap: 0.4rem;
        padding: 0.15rem 0.45rem 0.15rem 0.5rem;
        background: var(--chip-bg);
        border: 1px solid var(--border-subtle);
        border-left: 3px solid var(--accent);
        border-radius: 3px;
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-secondary);
      }
      .msp-technician-card-pod-dot {
        width: 6px; height: 6px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .msp-technician-card-tag {
        padding: 0.1rem 0.4rem;
        background: var(--bg);
        border: 1px solid var(--border-subtle);
        border-radius: 3px;
        font-family: ui-monospace, monospace;
        font-size: 0.65rem;
        color: var(--text-muted);
        letter-spacing: 0.04em;
      }

      .msp-technician-card-expand {
        display: flex; flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4) var(--space-4);
        border-top: 1px dashed var(--border-subtle);
        background: linear-gradient(to bottom, var(--bg) 0%, transparent 60%);
      }
      .msp-technician-card-expand-section {
        display: flex; flex-direction: column;
        gap: 0.35rem;
      }
      .msp-technician-card-expand-label {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .msp-technician-card-role-desc {
        margin: 0;
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-sm);
        color: var(--text-secondary);
        line-height: 1.45;
      }
      .msp-technician-card-team-detail {
        padding: var(--space-2) var(--space-3);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
      }
      .msp-technician-card-team-name {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--text-primary);
      }
      .msp-technician-card-team-desc {
        margin: 0.25rem 0 0;
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-xs);
        color: var(--text-secondary);
        line-height: 1.4;
      }
      .msp-technician-card-pod-list {
        display: flex; flex-direction: column;
        gap: var(--space-2);
      }
      .msp-technician-card-pod-detail {
        display: flex; flex-direction: column;
        gap: 0.25rem;
        padding: var(--space-2) var(--space-3);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-left: 3px solid var(--accent);
        border-radius: 4px;
      }
      .msp-technician-card-pod-name {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--text-primary);
      }
      .msp-technician-card-pod-desc {
        margin: 0;
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-xs);
        color: var(--text-secondary);
        line-height: 1.4;
      }
      .msp-technician-card-empty {
        margin: 0;
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-sm);
        color: var(--text-muted);
      }
      .msp-technician-card-profile-grid {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.35rem var(--space-3);
        align-items: baseline;
      }
      .msp-technician-card-profile-row {
        display: contents;
      }
      .msp-technician-card-profile-key {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }
      .msp-technician-card-profile-value {
        font-size: var(--text-sm);
        color: var(--text-secondary);
      }
      .msp-view-toolbar-label {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .msp-view-toolbar-divider {
        width: 1px; height: 20px;
        background: var(--border-subtle);
        margin: 0 var(--space-2);
      }
      .msp-view-toolbar-select {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-sm);
        padding: 0.25rem 0.5rem;
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
        color: var(--text-primary);
        cursor: pointer;
      }
      /* v3.7 Phase 3: optional sort direction toggle next to the Sort
         select. Renders when ViewToolbar receives onSortDirToggle. */
      .msp-view-toolbar-sort-dir {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.25rem 0.55rem;
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
        cursor: pointer;
        font-family: inherit;
        font-size: var(--text-sm);
        color: var(--text-secondary);
        transition: border-color 100ms ease, color 100ms ease;
      }
      .msp-view-toolbar-sort-dir:hover {
        border-color: var(--accent);
        color: var(--text-primary);
      }
      .msp-view-toolbar-sort-dir-arrow {
        font-size: 0.95rem;
        line-height: 1;
        font-weight: 600;
      }
      .msp-view-toolbar-sort-dir-label {
        font-style: italic;
        opacity: 0.85;
      }
      .msp-view-toolbar-checkbox {
        display: inline-flex; align-items: center;
        gap: 0.35rem;
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-sm);
        color: var(--text-secondary);
        cursor: pointer;
      }
      .msp-view-toolbar-count {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        margin-left: auto;
      }

      /* ===== Contacts view — end-user roster at the sample clients =====
         "Contacts" is the PSA term (ConnectWise + Autotask). Cards mode
         groups by client (collapsible-friendly), table mode is flat
         sortable. Role accent stripe at the left of each card maps to
         the priority-scoring multiplier tiers. */
      .msp-contacts {
        display: flex; flex-direction: column;
        gap: var(--space-5);
        padding-bottom: var(--space-6);
      }
      .msp-contacts-group-tier {
        font-family: ui-monospace, monospace;
        font-size: 0.65rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        padding: 0.18rem 0.45rem;
        border-radius: 4px;
        border: 1px solid var(--border-subtle);
        color: var(--text-muted);
      }
      .msp-contacts-group-tier.tier-premium {
        color: #c14638;
        border-color: color-mix(in srgb, #c14638 40%, var(--border-subtle));
        background: color-mix(in srgb, #c14638 8%, transparent);
      }
      .msp-contacts-group-tier.tier-standard {
        color: var(--text-muted);
      }
      /* .msp-contacts-grid superseded by .msp-card-grid (v3.24.0). */
      .msp-contact-card {
        --role-accent: var(--accent);
        position: relative;
        display: flex; flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
        text-align: left;
        cursor: pointer;
        overflow: hidden;
        /* L-15: hover standardized to outline-only */
        transition: border-color 140ms ease;
      }
      .msp-contact-card:hover {
        border-color: var(--border-accent);
      }
      .msp-contact-card.is-vip {
        background: color-mix(in srgb, var(--role-accent) 3%, var(--card));
      }
      .msp-contact-card-stripe {
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 3px;
        background: var(--role-accent);
      }
      .msp-contact-card-head {
        display: flex; align-items: center;
        gap: var(--space-3);
      }
      .msp-contact-card-avatar {
        flex: 0 0 auto;
        width: 36px; height: 36px;
        display: inline-flex; align-items: center; justify-content: center;
        background: color-mix(in srgb, var(--role-accent) 14%, var(--chip-bg));
        color: var(--role-accent);
        border-radius: 50%;
        font-family: ui-monospace, monospace;
        font-size: 0.78rem;
        font-weight: 600;
      }
      .msp-contact-card-id {
        display: flex; flex-direction: column;
        gap: 0.1rem;
        min-width: 0;
      }
      .msp-contact-card-name {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 0.98rem;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .msp-contact-card-title {
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 0.82rem;
        color: var(--text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .msp-contact-card-badges {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: 0.35rem;
        font-family: ui-monospace, monospace;
        font-size: 0.65rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }
      .msp-contact-card-role {
        display: inline-flex; align-items: center;
        gap: 0.35rem;
        font-weight: 600;
      }
      .msp-contact-card-mult {
        color: var(--text-muted);
        font-weight: 400;
      }
      .msp-contact-card-vip,
      .msp-contact-card-primary {
        padding: 0.15rem 0.4rem;
        border-radius: 999px;
        font-weight: 600;
      }
      .msp-contact-card-vip {
        background: color-mix(in srgb, #c14638 14%, transparent);
        color: #c14638;
      }
      .msp-contact-card-primary {
        background: color-mix(in srgb, var(--accent) 14%, transparent);
        color: var(--accent);
      }
      .msp-contact-card-meta {
        display: flex; align-items: center;
        gap: 0.4rem;
        font-size: 0.78rem;
        color: var(--text-muted);
      }
      .msp-contact-card-sep { color: var(--border-subtle); }
      .msp-contact-card-client {
        display: flex; align-items: baseline;
        gap: 0.4rem;
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 0.82rem;
        color: var(--text-secondary);
        padding-top: var(--space-2);
        border-top: 1px dashed var(--border-subtle);
      }
      .msp-contact-card-client-label {
        color: var(--text-muted);
        font-style: normal;
        font-family: ui-monospace, monospace;
        font-size: 0.65rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }
      .msp-contact-card-foot {
        font-family: ui-monospace, monospace;
        font-size: 0.72rem;
        color: var(--text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* Contacts table — cell-only styling. Layout, header sort, resize,
         pagination, and hover all come from the shared DataTable
         (.msp-table / .msp-table-th / .msp-table-rownum / etc.). */
      .msp-contacts-cell-name {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 0.92rem;
        color: var(--text-primary);
      }
      .msp-contacts-cell-name-row {
        display: inline-flex; align-items: center;
        gap: var(--space-2);
        white-space: nowrap;
      }
      .msp-contacts-cell-dot {
        width: 8px; height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .msp-contacts-cell-role {
        display: inline-flex; align-items: center;
        gap: 0.35rem;
        font-family: ui-monospace, monospace;
        font-size: 0.72rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        font-weight: 600;
        white-space: nowrap;
      }
      .msp-contacts-cell-mult {
        color: var(--text-muted);
        font-weight: 400;
      }
      .msp-contacts-cell-mono {
        font-family: ui-monospace, monospace;
        font-size: 0.78rem;
        color: var(--text-muted);
        white-space: nowrap;
      }
      .msp-contacts-cell-num {
        font-family: ui-monospace, monospace;
        font-size: 0.85rem;
        text-align: right;
        color: var(--text-primary);
      }
      .msp-contacts-cell-flags {
        display: inline-flex; align-items: center;
        gap: 0.3rem;
      }
      .msp-contacts-cell-flag {
        display: inline-flex; align-items: center;
        padding: 0.15rem 0.4rem;
        border-radius: 999px;
        font-family: ui-monospace, monospace;
        font-size: 0.62rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        font-weight: 600;
      }
      .msp-contacts-cell-flag.flag-vip {
        background: color-mix(in srgb, #c14638 14%, transparent);
        color: #c14638;
      }
      .msp-contacts-cell-flag.flag-primary {
        background: color-mix(in srgb, var(--accent) 14%, transparent);
        color: var(--accent);
      }

      /* Contact detail */
      .msp-contact-detail {
        --role-accent: var(--accent);
        position: relative;
        display: flex; flex-direction: column;
        gap: var(--space-5);
        padding: var(--space-5) var(--space-5) var(--space-6) var(--space-6);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
        overflow: hidden;
      }
      .msp-contact-detail-stripe {
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 4px;
        background: var(--role-accent);
      }
      .msp-contact-detail-head {
        display: flex; flex-direction: column;
        gap: var(--space-3);
      }
      .msp-contact-detail-back {
        align-self: flex-start;
        padding: 0.3rem 0.7rem;
        background: transparent;
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
        color: var(--text-muted);
        font-family: ui-monospace, monospace;
        font-size: 0.75rem;
        cursor: pointer;
        transition: color 0.15s, border-color 0.15s;
      }
      .msp-contact-detail-back:hover {
        color: var(--text-primary);
        border-color: var(--border-accent);
      }
      .msp-contact-detail-id {
        display: flex; align-items: center;
        gap: var(--space-4);
      }
      .msp-contact-detail-avatar {
        width: 60px; height: 60px;
        display: inline-flex; align-items: center; justify-content: center;
        background: color-mix(in srgb, var(--role-accent) 14%, var(--chip-bg));
        color: var(--role-accent);
        border-radius: 50%;
        font-family: ui-monospace, monospace;
        font-size: 1.2rem;
        font-weight: 600;
        flex: 0 0 auto;
      }
      .msp-contact-detail-name-block {
        display: flex; flex-direction: column;
        gap: var(--space-2);
      }
      .msp-contact-detail-name {
        margin: 0;
        font-family: 'Fraunces', Georgia, serif;
        font-size: clamp(1.4rem, 2.2vw, 1.8rem);
        font-weight: 400;
        line-height: 1.1;
        color: var(--text-primary);
      }
      .msp-contact-detail-title {
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 1.02rem;
        color: var(--text-secondary);
      }
      .msp-contact-detail-flags {
        display: flex; align-items: center; flex-wrap: wrap;
        gap: var(--space-2);
        font-family: ui-monospace, monospace;
        font-size: 0.7rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }
      .msp-contact-detail-role {
        display: inline-flex; align-items: center;
        gap: 0.4rem;
        font-weight: 600;
      }
      .msp-contact-detail-mult {
        color: var(--text-muted);
        font-weight: 400;
      }
      .msp-contact-detail-vip,
      .msp-contact-detail-primary {
        padding: 0.18rem 0.5rem;
        border-radius: 999px;
        font-weight: 600;
      }
      .msp-contact-detail-vip {
        background: color-mix(in srgb, #c14638 14%, transparent);
        color: #c14638;
      }
      .msp-contact-detail-primary {
        background: color-mix(in srgb, var(--accent) 14%, transparent);
        color: var(--accent);
      }
      .msp-contact-detail-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: var(--space-4);
      }
      .msp-contact-detail-grid .msp-section {
        padding: var(--space-4);
        border: 1px solid var(--border-subtle);
        background: var(--bg);
        border-radius: 6px;
        border-bottom: 1px solid var(--border-subtle);
      }
      .msp-contact-detail-client-notes {
        margin: var(--space-3) 0 0;
        font-family: 'Fraunces', Georgia, serif;
        font-size: 0.85rem;
        line-height: 1.5;
        color: var(--text-muted);
      }
      .msp-contact-detail-peers {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: var(--space-2);
      }
      .msp-contact-detail-peer {
        --role-accent: var(--accent);
        display: flex; flex-direction: column;
        gap: 0.2rem;
        padding: var(--space-2) var(--space-3);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-left: 3px solid var(--role-accent);
        border-radius: 4px;
        cursor: pointer;
        text-align: left;
        font-family: inherit;
        transition: background-color 80ms ease, border-color 80ms ease;
      }
      .msp-contact-detail-peer:hover {
        background: color-mix(in srgb, var(--role-accent) 6%, transparent);
        border-color: color-mix(in srgb, var(--role-accent) 30%, var(--border-subtle));
      }
      .msp-contact-detail-peer-name {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 0.9rem;
        color: var(--text-primary);
      }
      .msp-contact-detail-peer-title {
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 0.78rem;
        color: var(--text-muted);
      }
      .msp-contact-detail-peer-vip,
      .msp-contact-detail-peer-primary {
        display: inline-block;
        margin-top: 0.2rem;
        padding: 0.1rem 0.35rem;
        border-radius: 999px;
        font-family: ui-monospace, monospace;
        font-size: 0.6rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        font-weight: 600;
        width: fit-content;
      }
      .msp-contact-detail-peer-vip {
        background: color-mix(in srgb, #c14638 14%, transparent);
        color: #c14638;
      }
      .msp-contact-detail-peer-primary {
        background: color-mix(in srgb, var(--accent) 14%, transparent);
        color: var(--accent);
      }
      .msp-contact-detail-peer-more {
        grid-column: 1 / -1;
        text-align: center;
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 0.82rem;
        color: var(--text-muted);
        padding: var(--space-2);
      }

      /* ===== Clients view — cards + table for the 10 sample customers ===== */
      .msp-clients {
        display: flex; flex-direction: column;
        gap: var(--space-5);
        padding-bottom: var(--space-6);
      }
      /* v3.41 P2: cross-client tab bar on the Clients view (Roster · Maturity ·
         Sites · Contacts). Underline-style tabs; sit above each tab's own header. */
      .msp-client-tabs {
        display: flex;
        gap: 2px;
        flex-wrap: wrap;
        border-bottom: 1px solid var(--border-subtle);
      }
      .msp-clients-tabbed { gap: var(--space-3); }
      .msp-client-tab {
        appearance: none;
        border: none;
        background: transparent;
        color: var(--text-secondary);
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.01em;
        padding: 8px 16px;
        cursor: pointer;
        position: relative;
        border-radius: 8px 8px 0 0;
        transition: color 0.12s ease, background 0.12s ease;
      }
      .msp-client-tab:hover {
        color: var(--text-primary);
        background: color-mix(in srgb, var(--accent) 7%, transparent);
      }
      .msp-client-tab.is-active { color: var(--accent); }
      .msp-client-tab.is-active::after {
        content: "";
        position: absolute;
        left: 12px; right: 12px; bottom: -1px;
        height: 2px;
        background: var(--accent);
        border-radius: 2px 2px 0 0;
      }
      .msp-client-tab:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 1px;
      }
      .msp-clients-intro {
        display: flex; flex-direction: column;
        gap: var(--space-3);
        padding-bottom: var(--space-4);
        border-bottom: 1px solid var(--border-subtle);
      }
      .msp-clients-intro p {
        margin: 0;
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        color: var(--text-secondary);
        max-width: 75ch;
        line-height: 1.55;
      }
      .msp-clients-stats {
        display: flex; flex-wrap: wrap;
        align-items: baseline;
        gap: var(--space-3);
        font-family: ui-monospace, monospace;
        font-size: var(--text-sm);
        color: var(--text-muted);
      }
      .msp-clients-stat-sep { opacity: 0.5; }

      .msp-clients-group-basis {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }
      /* .msp-clients-grid superseded by .msp-card-grid (v3.24.0) — also
         auto-fill, so the v3.20.2 cut-off fix (which lives on
         .msp-client-card's overflow:hidden + box-sizing) is preserved. */

      /* Client card — aligned with the canonical hover pattern used by
         Board / Tool / Contact / Department cards (translateY lift +
         box-shadow + accent border on hover). Premium clients still get
         the 3px accent stripe; standard clients use a neutral stripe so
         every card carries the same left-edge weight (the canonical
         pattern across all entity cards). */
      .msp-client-card {
        display: flex; flex-direction: column;
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-left: 3px solid color-mix(in srgb, var(--border-subtle) 60%, transparent);
        border-radius: 6px;
        /* L-15: hover standardized to outline-only */
        transition: border-color 140ms ease;
        overflow: hidden;
        /* v3.22.2: when .msp-client-card is applied to a <button>, the
           button defaults (text-align:center, inline-block, no box-sizing)
           would let content overflow the grid cell on the right. Force
           block-level layout + border-box + full width so the card
           always fits its grid cell exactly. Closes the right-edge cutoff
           the v3.6.1 Q5 fix didn't fully resolve. */
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        text-align: left;
        font: inherit;
        color: inherit;
        cursor: pointer;
      }
      .msp-client-card.msp-client-card-btn {
        appearance: none;
        -webkit-appearance: none;
        padding: 0;
      }
      .msp-client-card:hover {
        border-color: var(--border-accent);
      }
      .msp-client-card.open {
        border-color: var(--border-accent);
        box-shadow: 0 2px 12px rgba(60, 50, 35, 0.08);
      }
      .msp-client-card.premium {
        border-left: 3px solid var(--accent);
      }
      /* The clickable card header — full-width button that exposes the
         summary content. */
      .msp-client-card-head-btn {
        display: flex; flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-4);
        background: transparent;
        border: none;
        cursor: pointer;
        text-align: left;
        font-family: inherit;
        color: inherit;
        width: 100%;
        /* v3.32.2: the REAL fix for the recurring Clients right-edge cutoff.
           This inner div is width:100% + padding:var(--space-4) but had no
           box-sizing, so (no global border-box reset) its real width was
           100% + 32px — overflowing the card's content box on the right and
           getting clipped by .msp-client-card's overflow:hidden. The card
           itself is border-box (v3.22.2) but this inner wrapper wasn't, which
           is why the v3.6.1 / v3.22.2 passes didn't fully close it. */
        box-sizing: border-box;
        min-width: 0;
      }
      .msp-client-card-head {
        display: flex; align-items: center;
        gap: var(--space-2);
        /* v3.6.1 Q5: without min-width:0 the row's flex children default
           to min-width:auto (= content width), so a long client name pushes
           the row wider than its container. Combined with the card's
           overflow:hidden the overflow gets clipped (right-side cut-off
           the user reported) instead of letting the name wrap. */
        min-width: 0;
        width: 100%;
      }
      .msp-client-card-toggle {
        font-family: ui-monospace, monospace;
        font-size: var(--text-lg);
        color: var(--text-muted);
        flex-shrink: 0;
        margin-left: auto;
      }
      .msp-client-card-expand {
        display: flex; flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4) var(--space-4);
        border-top: 1px dashed var(--border-subtle);
        background: linear-gradient(to bottom, var(--bg) 0%, transparent 60%);
      }
      .msp-client-card-expand-section {
        display: flex; flex-direction: column;
        gap: 0.35rem;
      }
      .msp-client-card-expand-label {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .msp-client-card-contact {
        display: flex; flex-direction: column;
        gap: 0.1rem;
      }
      .msp-client-card-contact-name {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-md);
        font-weight: 500;
        color: var(--text-primary);
      }
      .msp-client-card-contact-role {
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-sm);
        color: var(--text-muted);
      }
      .msp-client-card-pod-detail {
        display: flex; flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-left: 3px solid var(--accent);
        border-radius: 4px;
      }
      .msp-client-card-pod-name {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--text-primary);
      }
      .msp-client-card-pod-desc {
        margin: 0;
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-xs);
        color: var(--text-secondary);
        line-height: 1.4;
      }
      .msp-client-card-pod-lead {
        display: flex; align-items: center;
        gap: var(--space-2);
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-xs);
        color: var(--text-secondary);
      }
      .msp-client-card-pod-lead-avatar {
        width: 24px; height: 24px;
        border-radius: 50%;
        background: var(--chip-bg);
        border: 1px solid var(--border-subtle);
        display: flex; align-items: center; justify-content: center;
        font-weight: 500;
        font-size: 0.65rem;
        color: var(--text-primary);
        flex-shrink: 0;
      }
      .msp-client-card-pod-lead-body {
        line-height: 1.3;
      }
      .msp-client-card-secondary-pods {
        display: flex; flex-wrap: wrap;
        gap: 0.35rem;
      }
      .msp-client-card-secondary-pod {
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-xs);
        padding: 0.1rem 0.5rem;
        background: var(--chip-bg);
        border: 1px dashed var(--border-subtle);
        border-radius: 4px;
        color: var(--text-secondary);
      }
      .msp-client-card-onboarded {
        font-family: ui-monospace, monospace;
        font-size: var(--text-sm);
        color: var(--text-secondary);
      }
      .msp-client-card-name {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-lg);
        font-weight: 500;
        color: var(--text-primary);
        flex: 1;
        line-height: 1.25;
        /* v3.6.1 Q5: pair with min-width:0 on the parent .msp-client-card-head
           so very long names wrap inside the card instead of overflowing. */
        min-width: 0;
        word-break: break-word;
        overflow-wrap: break-word;
      }
      .msp-client-card-tier-badge {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        padding: 0.1rem 0.5rem;
        border-radius: 10px;
        color: var(--accent);
        background: rgba(193, 70, 56, 0.10);
        border: 1px solid var(--accent);
        letter-spacing: 0.08em;
        font-weight: 500;
      }
      .msp-client-card-meta {
        display: flex; flex-wrap: wrap;
        gap: 0.35rem;
        align-items: baseline;
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        letter-spacing: 0.02em;
      }
      .msp-client-card-meta-sep { opacity: 0.5; }
      .msp-client-card-notes {
        margin: 0;
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-sm);
        color: var(--text-secondary);
        line-height: 1.45;
        flex: 1;
      }
      .msp-client-card-foot {
        display: flex; flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2);
        margin-top: var(--space-2);
        padding-top: var(--space-2);
        border-top: 1px dashed var(--border-subtle);
      }
      .msp-client-card-pod {
        display: inline-flex; align-items: center;
        gap: 0.35rem;
        padding: 0.1rem 0.5rem;
        border: 1px solid var(--border-subtle);
        border-left: 2px solid var(--accent);
        border-radius: 4px;
        background: var(--chip-bg);
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-xs);
        color: var(--text-secondary);
      }
      .msp-client-card-pod-dot {
        width: 7px; height: 7px;
        border-radius: 50%;
      }
      .msp-client-card-agreement {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        margin-left: auto;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      /* Shared entity-listing table (Clients, Teams, Workflows). Uses the
         same structural treatment as the .msp-table catalog grid — sticky
         header, vertical column lines, bounded height with vertical scroll —
         but a serif body font for entity readability. */
      .msp-clients-table-wrap {
        overflow-x: auto;
        overflow-y: auto;
        max-height: min(72vh, 720px);
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
        background: var(--card);
      }
      .msp-clients-table {
        width: 100%;
        /* border-collapse: separate is required for sticky-header borders
           to survive scroll (collapsed borders disappear during scroll on
           most engines). */
        border-collapse: separate; border-spacing: 0;
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-sm);
      }
      .msp-clients-table th {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        font-weight: 700;
        color: var(--text-primary);
        text-align: left;
        padding: var(--space-2) var(--space-3);
        /* Same accent-tinted header background as .msp-table — gives every
           data table a consistent warm-pink title row that reads as chrome. */
        background: color-mix(in srgb, var(--accent) 7%, var(--card));
        position: sticky; top: 0; z-index: 3;
        border-bottom: 1px solid var(--border-subtle);
        border-right: 1px solid var(--border-subtle);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        white-space: nowrap;
      }
      /* Resizable variant — switches to fixed layout so colgroup widths
         control real column widths (auto layout otherwise lets columns
         grow to content, which makes resize dragging visually no-op). */
      .msp-clients-table-resizable {
        table-layout: fixed;
      }
      .msp-clients-table-resizable td {
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .msp-clients-table-th {
        position: sticky; top: 0; z-index: 3;
      }
      .msp-clients-table-th-label {
        display: inline-block;
        max-width: calc(100% - 0.6rem);
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
      }
      /* msp-clients-table doesn't need a separate position-relative rule
         because the resizer is positioned absolutely against the th cell,
         which is already position: sticky (acts as a positioning context
         for absolutely-positioned descendants). */
      .msp-clients-table td {
        padding: var(--space-2) var(--space-3);
        border-bottom: 1px solid var(--border-subtle);
        border-right: 1px solid var(--border-subtle);
        color: var(--text-secondary);
        vertical-align: top;
      }
      .msp-clients-table th:last-child,
      .msp-clients-table td:last-child { border-right: none; }
      .msp-clients-table-row {
        cursor: pointer;
        transition: background 120ms ease;
      }
      /* v3.20.2: hover/row recipe per design-system §8.5. */
      .msp-clients-table-row:hover {
        background: color-mix(in srgb, var(--accent) 7%, transparent);
      }
      /* Row-number column for entity tables — sticky on the left so it
         stays visible during horizontal scroll. Matches the .msp-table
         treatment for consistency across every table in the app. */
      .msp-clients-table-th-rownum,
      .msp-clients-table-rownum {
        text-align: right;
        color: var(--text-muted);
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        padding-right: var(--space-2);
        padding-left: var(--space-2);
        position: sticky;
        left: 0;
        z-index: 2;
        width: 56px;
      }
      .msp-clients-table-rownum {
        background: color-mix(in srgb, var(--accent) 4%, var(--card));
        font-weight: 500;
        user-select: none;
        vertical-align: middle;
      }
      .msp-clients-table-th-rownum {
        background: color-mix(in srgb, var(--accent) 10%, var(--card));
        cursor: default !important;
        z-index: 4;
      }
      .msp-clients-table tr:hover .msp-clients-table-rownum {
        background: color-mix(in srgb, var(--accent) 11%, var(--card));
      }
      .msp-clients-table-name {
        font-weight: 500;
        color: var(--text-primary);
      }
      /* v3.1.4: removed font-size: var(--text-xs) override so muted
         cells inherit the canonical --table-body-font. The previous
         smaller size was a redundant de-emphasis signal (color is
         already doing the job) and was a hidden source of cross-
         table inconsistency — Workflows / Clients / etc. used this
         class for ID, schedule, count etc., making whole columns
         appear smaller than the table's body baseline. */
      .msp-clients-table-muted {
        color: var(--text-muted);
        font-family: ui-monospace, monospace;
      }
      .msp-clients-table-date {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
      }
      .msp-clients-table-contact {
        font-size: var(--text-xs);
        line-height: 1.3;
      }
      .msp-clients-table-contact-name {
        color: var(--text-primary);
      }
      .msp-clients-table-contact-role {
        font-style: italic;
        color: var(--text-muted);
      }

      /* Client detail — sub-page navigation (Phase 3 / Rule C migration).
         Renders in place of the cards/table grid when a client is selected.
         Matches Boards / Tools / Departments / Teams / Contacts sub-page
         pattern: back button → focused profile → click to dismiss returns
         to the grid with filters preserved. */
      .msp-client-detail-page {
        display: flex; flex-direction: column;
        gap: var(--space-4);
        padding: var(--space-5) var(--space-5) var(--space-6);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
      }
      .msp-client-detail-back {
        align-self: flex-start;
        padding: 0.3rem 0.7rem;
        background: transparent;
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
        color: var(--text-muted);
        font-family: ui-monospace, monospace;
        font-size: 0.75rem;
        cursor: pointer;
        transition: color 0.15s, border-color 0.15s;
        margin-bottom: var(--space-2);
      }
      .msp-client-detail-back:hover {
        color: var(--text-primary);
        border-color: var(--border-accent);
      }
      .msp-client-detail-head {
        display: flex; flex-direction: column;
        gap: var(--space-2);
        padding-bottom: var(--space-3);
        border-bottom: 1px solid var(--border-subtle);
      }
      .msp-client-detail-name-row {
        display: flex; align-items: center;
        gap: var(--space-2);
        flex-wrap: wrap;
      }
      .msp-client-detail-name {
        margin: 0;
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-2xl);
        font-weight: 500;
        color: var(--text-primary);
      }
      .msp-client-detail-meta {
        display: flex; flex-wrap: wrap;
        gap: 0.35rem;
        align-items: baseline;
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        letter-spacing: 0.02em;
      }
      .msp-client-detail-section {
        display: flex; flex-direction: column;
        gap: var(--space-2);
      }
      .msp-client-detail-section-label {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .msp-client-detail-notes {
        margin: 0;
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-md);
        color: var(--text-secondary);
        line-height: 1.5;
      }
      .msp-client-detail-contact {
        display: flex; flex-direction: column;
        gap: 0.15rem;
      }
      .msp-client-detail-contact-name {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-md);
        color: var(--text-primary);
        font-weight: 500;
      }
      .msp-client-detail-contact-role {
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-sm);
        color: var(--text-muted);
      }
      .msp-client-detail-pod-card {
        display: flex; flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-3);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-left: 3px solid var(--accent);
        border-radius: 6px;
      }
      .msp-client-detail-pod-name {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-md);
        font-weight: 500;
        color: var(--text-primary);
      }
      .msp-client-detail-pod-desc {
        margin: 0;
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-sm);
        color: var(--text-secondary);
        line-height: 1.4;
      }
      .msp-client-detail-pod-lead {
        display: flex; align-items: center;
        gap: var(--space-2);
        padding: var(--space-2);
        background: var(--chip-bg);
        border-radius: 4px;
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-sm);
        color: var(--text-secondary);
      }
      .msp-client-detail-pod-lead-avatar {
        width: 30px; height: 30px;
        border-radius: 50%;
        background: var(--card);
        border: 1px solid var(--border-subtle);
        display: flex; align-items: center; justify-content: center;
        font-weight: 500;
        font-size: var(--text-xs);
        color: var(--text-primary);
        flex-shrink: 0;
      }
      .msp-client-detail-secondary-pods {
        display: flex; flex-wrap: wrap;
        gap: 0.4rem;
      }
      .msp-client-detail-secondary-pod {
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-sm);
        padding: 0.1rem 0.5rem;
        background: var(--chip-bg);
        border: 1px dashed var(--border-subtle);
        border-radius: 4px;
        color: var(--text-secondary);
      }
      .msp-client-detail-onboarded {
        font-family: ui-monospace, monospace;
        font-size: var(--text-sm);
        color: var(--text-secondary);
      }

      /* ===== v3.28 / P2.2 — per-client CMDB (CI tree + flex assets) ===== */
      .msp-cmdb-summary {
        display: flex; flex-wrap: wrap; gap: var(--space-3);
      }
      .msp-cmdb-stat {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.04em;
        color: var(--text-muted);
        background: var(--chip-bg);
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
        padding: 0.2rem 0.5rem;
      }
      .msp-cmdb-stat strong { color: var(--text-primary); font-weight: 600; margin-right: 0.25rem; }
      .msp-cmdb-stat-warn { border-color: color-mix(in srgb, #c4733a 40%, var(--border-subtle)); }
      .msp-cmdb-stat-warn strong { color: #c4733a; }
      .msp-cmdb-stat-alert { border-color: color-mix(in srgb, #c14638 40%, var(--border-subtle)); }
      .msp-cmdb-stat-alert strong { color: #c14638; }

      .msp-cmdb-ci-tree, .msp-cmdb-ci-children {
        list-style: none; margin: 0; padding: 0;
        display: flex; flex-direction: column; gap: 0.2rem;
      }
      .msp-cmdb-ci-children {
        margin-top: 0.2rem;
        margin-left: 0.75rem;
        padding-left: 0.75rem;
        border-left: 1px dashed var(--border-subtle);
      }
      .msp-cmdb-ci-row {
        display: flex; align-items: baseline; flex-wrap: wrap;
        gap: var(--space-2);
        padding: 0.3rem 0.5rem;
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
      }
      .msp-cmdb-ci-name {
        font-family: ui-monospace, monospace;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--text-primary);
      }
      .msp-cmdb-ci-type {
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 0.8rem;
        color: var(--text-muted);
      }
      .msp-cmdb-ci-site {
        margin-left: auto;
        font-family: ui-monospace, monospace;
        font-size: 0.65rem;
        letter-spacing: 0.04em;
        color: var(--text-muted);
        white-space: nowrap;
      }
      .msp-cmdb-ci-flag {
        font-family: ui-monospace, monospace;
        font-size: 0.58rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-muted);
        background: var(--chip-bg);
        border: 1px solid var(--border-subtle);
        border-radius: 3px;
        padding: 0.05rem 0.35rem;
        white-space: nowrap;
      }
      .msp-cmdb-ci-flag-warn  { color: #c4733a; border-color: color-mix(in srgb, #c4733a 40%, var(--border-subtle)); background: color-mix(in srgb, #c4733a 8%, transparent); }
      .msp-cmdb-ci-flag-alert { color: #c14638; border-color: color-mix(in srgb, #c14638 40%, var(--border-subtle)); background: color-mix(in srgb, #c14638 8%, transparent); }
      .msp-cmdb-flex {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 0.3rem;
      }
      .msp-cmdb-flex-item {
        display: flex; flex-direction: column; gap: 0.1rem;
        padding: 0.35rem 0.55rem;
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-left: 2px solid var(--accent);
        border-radius: 4px;
      }
      .msp-cmdb-flex-name { font-size: 0.82rem; color: var(--text-primary); }
      .msp-cmdb-flex-type {
        font-family: ui-monospace, monospace;
        font-size: 0.62rem; letter-spacing: 0.04em;
        text-transform: uppercase; color: var(--text-muted);
      }

      /* ===== Teams view — department-grouped team archetypes ===== */
      .msp-teams {
        display: flex; flex-direction: column;
        gap: var(--space-6);
        padding-bottom: var(--space-6);
      }
      .msp-teams-intro {
        display: flex; flex-direction: column;
        gap: var(--space-3);
        padding-bottom: var(--space-4);
        border-bottom: 1px solid var(--border-subtle);
      }
      .msp-teams-intro p {
        margin: 0;
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        color: var(--text-secondary);
        max-width: 75ch;
        line-height: 1.55;
      }
      .msp-teams-stats {
        display: flex; align-items: baseline;
        gap: var(--space-3);
        font-family: ui-monospace, monospace;
        font-size: var(--text-sm);
        color: var(--text-muted);
      }
      .msp-teams-stat-sep { opacity: 0.5; }

      /* .msp-teams-grid superseded by .msp-card-grid--wide (v3.24.0). */

      .msp-team-card {
        display: flex; flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-4);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-left: 3px solid var(--accent);
        border-radius: 8px;
        text-align: left;
        cursor: pointer;
        transition: border-color 120ms ease, transform 120ms ease;
        font-family: inherit;
        color: inherit;
      }
      .msp-team-card:hover {
        border-color: var(--border-accent);
      }
      .msp-team-card-head {
        display: flex; align-items: center;
        gap: var(--space-2);
        /* Wrap if badges + label would overflow the card width. The
           label has flex: 1 so it claims remaining space on the first
           line; badges fall to a second line only when truly tight. */
        flex-wrap: wrap;
      }
      .msp-team-card-label {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-lg);
        font-weight: 500;
        color: var(--text-primary);
        flex: 1 1 auto;
        min-width: 0;             /* allows label to shrink/ellipsize cleanly */
        line-height: 1.25;
      }
      /* Team's department — small label near the team name. Always visible
         on the card so the team↔department mapping is explicit, regardless
         of whether the parent view is grouped by department. */
      .msp-team-card-dept {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-secondary);
        background: color-mix(in srgb, var(--accent) 6%, var(--card));
        border: 1px solid var(--border-subtle);
        padding: 0.15rem 0.45rem;
        border-radius: 3px;
        letter-spacing: 0.04em;
        white-space: nowrap;
      }
      .msp-team-card-cross {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--accent);
        background: rgba(193, 70, 56, 0.08);
        padding: 0.15rem 0.45rem;
        border-radius: 10px;
        text-transform: lowercase;
        letter-spacing: 0.03em;
      }
      .msp-team-card-desc {
        margin: 0;
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-sm);
        color: var(--text-muted);
        line-height: 1.45;
      }
      .msp-team-card-meta {
        display: flex; flex-direction: column;
        gap: var(--space-2);
        margin-top: var(--space-2);
        padding-top: var(--space-3);
        border-top: 1px dashed var(--border-subtle);
      }
      .msp-team-card-meta-row {
        display: flex; align-items: center;
        gap: var(--space-2);
      }
      .msp-team-card-meta-label {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        letter-spacing: 0.08em;
        min-width: 70px;
      }
      .msp-team-card-boards {
        display: flex; flex-wrap: wrap;
        gap: var(--space-2);
        flex: 1;
      }
      .msp-team-card-board {
        display: inline-flex; align-items: center;
        gap: 0.35rem;
        padding: 0.1rem 0.5rem;
        border-radius: 10px;
        background: var(--chip-bg);
        border: 1px solid var(--border-subtle);
        font-size: var(--text-xs);
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        color: var(--text-secondary);
      }
      .msp-team-card-board.secondary {
        opacity: 0.65;
        border-style: dashed;
      }
      .msp-team-card-board-dot {
        width: 7px; height: 7px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .msp-team-card-tier-bar {
        display: flex; flex: 1;
        height: 16px;
        border-radius: 8px;
        overflow: hidden;
        background: var(--chip-bg);
        border: 1px solid var(--border-subtle);
      }
      .msp-team-card-tier-seg {
        display: flex; align-items: center; justify-content: center;
        font-family: ui-monospace, monospace;
        font-size: 0.55rem;
        color: rgba(255, 255, 255, 0.88);
        letter-spacing: 0.05em;
      }
      .msp-team-card-tier-seg.tier-l1 { background: #5b9576; }
      .msp-team-card-tier-seg.tier-l2 { background: #4476b8; }
      .msp-team-card-tier-seg.tier-l3 { background: #a37db5; }
      .msp-team-card-members {
        font-family: ui-monospace, monospace;
        font-size: var(--text-sm);
        color: var(--text-secondary);
      }
      .msp-team-card-members strong {
        color: var(--text-primary);
      }
      .msp-team-card-gap {
        color: var(--accent);
        font-style: italic;
      }
      .msp-team-card-tier-empty {
        font-family: ui-monospace, monospace;
        font-size: 0.6rem;
        color: var(--text-muted);
        padding: 0 var(--space-2);
      }

      /* Workshop mode extras — drag-and-drop reassignment affordances */
      .msp-teams-workshop-extras {
        display: flex; flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        background: rgba(193, 70, 56, 0.04);
        border: 1px dashed var(--accent);
        border-radius: 4px;
        margin-top: -8px;
      }
      .msp-teams-mode-divider {
        width: 1px;
        height: 18px;
        background: var(--border-subtle);
        margin: 0 var(--space-2);
      }
      .msp-teams-table-gap {
        color: var(--accent);
        font-weight: 500;
      }
      .msp-teams-table-gap-label {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        font-style: italic;
        font-weight: normal;
        margin-left: 0.25rem;
      }
      .msp-teams-mode-hint {
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-sm);
        color: var(--text-muted);
      }
      .msp-teams-mode-changecount {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--accent);
        padding: 0.1rem 0.5rem;
        border: 1px solid var(--accent);
        border-radius: 10px;
        background: rgba(193, 70, 56, 0.08);
        letter-spacing: 0.04em;
      }
      .msp-teams-mode-reset {
        color: var(--accent);
        border-color: var(--accent);
      }

      .msp-team-card-workshop {
        display: flex; flex-direction: column;
        position: relative;
        transition: border-color 120ms ease, background 120ms ease;
      }
      .msp-team-card-workshop.drop-target {
        border-color: var(--accent);
        background: linear-gradient(to bottom, rgba(193, 70, 56, 0.06), transparent);
      }
      .msp-team-card-workshop.has-override {
        border-left-color: var(--accent);
      }
      .msp-team-card-override-badge {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--accent);
        background: rgba(193, 70, 56, 0.10);
        border: 1px solid var(--accent);
        padding: 0.05rem 0.4rem;
        border-radius: 10px;
        letter-spacing: 0.05em;
      }
      .msp-team-card-roster {
        display: flex; flex-wrap: wrap;
        gap: 0.35rem;
        margin-top: var(--space-2);
        padding-top: var(--space-2);
        border-top: 1px dashed var(--border-subtle);
        min-height: 40px;
      }
      .msp-team-card-roster-empty {
        flex: 1;
        text-align: center;
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-xs);
        color: var(--text-muted);
        padding: var(--space-2);
        background: var(--chip-bg);
        border: 1px dashed var(--border-subtle);
        border-radius: 4px;
      }
      .msp-team-card-member {
        display: inline-flex; align-items: center;
        gap: 0.3rem;
        padding: 0.15rem 0.5rem;
        background: var(--chip-bg);
        border: 1px solid var(--border-subtle);
        border-radius: 10px;
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-primary);
        cursor: grab;
        user-select: none;
        letter-spacing: 0.02em;
      }
      .msp-team-card-member:active { cursor: grabbing; }
      .msp-team-card-member.overridden {
        border-color: var(--accent);
        background: rgba(193, 70, 56, 0.06);
      }
      .msp-team-card-member-tier {
        font-size: 0.55rem;
        padding: 0.05rem 0.25rem;
        border-radius: 6px;
        color: white;
        letter-spacing: 0.05em;
      }
      .msp-team-card-member-tier.tier-l1 { background: #5b9576; }
      .msp-team-card-member-tier.tier-l2 { background: #4476b8; }
      .msp-team-card-member-tier.tier-l3 { background: #a37db5; }
      .msp-team-card-member-mod {
        color: var(--accent);
        font-weight: bold;
      }

      /* ===== Team detail mode ===== */
      .msp-team-detail {
        display: flex; flex-direction: column;
        gap: var(--space-5);
        padding-bottom: var(--space-6);
      }
      .msp-team-detail-back {
        align-self: flex-start;
        display: inline-flex; align-items: center;
        gap: 0.35rem;
        padding: var(--space-2) var(--space-3);
        background: transparent;
        border: 1px solid var(--border-subtle);
        border-radius: 999px;
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-secondary);
        cursor: pointer;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      .msp-team-detail-back:hover {
        border-color: var(--border-accent);
        color: var(--text-primary);
      }
      .msp-team-detail-head {
        display: flex; flex-direction: column;
        gap: var(--space-2);
        padding-bottom: var(--space-3);
        border-bottom: 1px solid var(--border-subtle);
      }
      .msp-team-detail-title {
        margin: 0;
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-2xl);
        font-weight: 500;
        color: var(--text-primary);
      }
      .msp-team-detail-dept {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.1em;
      }
      .msp-team-detail-desc {
        margin: 0;
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        color: var(--text-secondary);
        max-width: 75ch;
        line-height: 1.5;
      }
      .msp-team-detail-section {
        display: flex; flex-direction: column;
        gap: var(--space-3);
      }
      .msp-team-detail-section-h {
        margin: 0;
        display: flex; align-items: baseline;
        gap: var(--space-3);
        flex-wrap: wrap;
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-xl);
        font-weight: 500;
        color: var(--text-primary);
      }
      .msp-team-detail-section-count {
        font-family: ui-monospace, monospace;
        font-size: var(--text-sm);
        color: var(--text-muted);
        font-weight: normal;
      }
      .msp-team-detail-empty {
        padding: var(--space-4);
        background: var(--chip-bg);
        border: 1px dashed var(--border-subtle);
        border-radius: 6px;
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        color: var(--text-muted);
        max-width: 75ch;
      }

      .msp-team-detail-boards {
        display: flex; flex-wrap: wrap;
        gap: var(--space-3);
      }
      .msp-team-detail-board {
        display: inline-flex; align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--border-subtle);
        border-left: 3px solid var(--board-color, var(--accent));
        border-radius: 6px;
        background: var(--card);
      }
      .msp-team-detail-board.secondary {
        opacity: 0.78;
        border-left-style: dashed;
      }
      .msp-team-detail-board-dot {
        width: 9px; height: 9px;
        border-radius: 50%;
      }
      .msp-team-detail-board-label {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-md);
        color: var(--text-primary);
      }
      .msp-team-detail-board-tag {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        text-transform: lowercase;
        padding: 0.1rem 0.4rem;
        background: var(--chip-bg);
        border-radius: 8px;
        letter-spacing: 0.05em;
      }
      .msp-team-detail-board-count {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
      }

      .msp-team-detail-members-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: var(--space-3);
      }
      .msp-team-detail-secondary-label {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-top: var(--space-3);
      }

      /* Technician card */
      .msp-tech-card {
        display: flex;
        gap: var(--space-3);
        padding: var(--space-3);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
      }
      .msp-tech-card-avatar {
        flex-shrink: 0;
        width: 44px; height: 44px;
        border-radius: 50%;
        background: var(--chip-bg);
        border: 1px solid var(--border-subtle);
        display: flex; align-items: center; justify-content: center;
        font-family: "Fraunces", Georgia, serif;
        font-weight: 500;
        font-size: var(--text-md);
        color: var(--text-primary);
        letter-spacing: 0.04em;
      }
      .msp-tech-card-body {
        display: flex; flex-direction: column;
        gap: 0.25rem;
        flex: 1; min-width: 0;
      }
      .msp-tech-card-name-row {
        display: flex; align-items: center;
        gap: var(--space-2);
      }
      .msp-tech-card-name {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-md);
        color: var(--text-primary);
        font-weight: 500;
      }
      .msp-tech-card-tier {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        padding: 0.05rem 0.4rem;
        border-radius: 10px;
        color: white;
        letter-spacing: 0.05em;
      }
      .msp-tech-card-tier.tier-l1 { background: #5b9576; }
      .msp-tech-card-tier.tier-l2 { background: #4476b8; }
      .msp-tech-card-tier.tier-l3 { background: #a37db5; }
      .msp-tech-card-role {
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-sm);
        color: var(--text-secondary);
      }
      .msp-tech-card-tags {
        display: flex; flex-wrap: wrap;
        gap: 0.3rem;
        margin-top: 0.15rem;
      }
      .msp-tech-card-tag {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        padding: 0.05rem 0.4rem;
        border-radius: 10px;
        background: var(--chip-bg);
        border: 1px solid var(--border-subtle);
        color: var(--text-muted);
        letter-spacing: 0.04em;
      }
      .msp-tech-card-tag.tag-lead { color: var(--accent); border-color: var(--accent); }
      .msp-tech-card-tag.tag-trainer { color: #5b9576; border-color: #5b9576; }
      .msp-tech-card-tag.tag-new-hire { color: #d4a574; border-color: #d4a574; }
      .msp-tech-card-tag.tag-secondary { background: transparent; border-style: dashed; }
      .msp-tech-card-skills {
        display: flex; flex-wrap: wrap;
        gap: 0.3rem;
        margin-top: 0.25rem;
      }
      .msp-tech-card-skill {
        display: inline-flex; align-items: center;
        gap: 0.25rem;
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        padding: 0.1rem 0.4rem;
        background: var(--chip-bg);
        border-radius: 4px;
        color: var(--text-secondary);
      }
      .msp-tech-card-skill-level {
        color: var(--text-muted);
        font-weight: 500;
      }

      /* Heatmap */
      .msp-team-detail-heatmap-wrap {
        overflow-x: auto;
        padding-bottom: var(--space-2);
      }
      .msp-team-detail-heatmap {
        border-collapse: separate;
        border-spacing: 2px;
        font-family: ui-monospace, monospace;
        font-size: var(--text-sm);
      }
      .msp-team-detail-heatmap th {
        font-weight: normal;
        color: var(--text-muted);
        padding: var(--space-2);
        text-align: center;
        font-size: var(--text-xs);
        letter-spacing: 0.05em;
      }
      .msp-team-detail-heatmap-skill-col { text-align: left !important; }
      .msp-team-detail-heatmap-tech-col {
        min-width: 36px;
        background: var(--chip-bg);
        border-radius: 4px;
      }
      .msp-team-detail-heatmap-skill {
        display: flex; align-items: center;
        gap: var(--space-2);
        padding: var(--space-2);
        background: var(--chip-bg);
        border-radius: 4px;
        font-size: var(--text-sm);
        color: var(--text-primary);
        white-space: nowrap;
      }
      .msp-team-detail-heatmap-coverage {
        font-size: var(--text-xs);
        padding: 0.05rem 0.4rem;
        border-radius: 10px;
        font-family: ui-monospace, monospace;
        font-style: normal;
        letter-spacing: 0.04em;
      }
      .msp-team-detail-heatmap-coverage.covered { color: #5b9576; background: rgba(91, 149, 118, 0.12); }
      .msp-team-detail-heatmap-coverage.thin    { color: #d4a574; background: rgba(212, 165, 116, 0.15); }
      .msp-team-detail-heatmap-coverage.gap     { color: var(--accent); background: rgba(193, 70, 56, 0.10); }
      .msp-team-detail-heatmap-cell {
        text-align: center;
        padding: var(--space-2);
        font-family: ui-monospace, monospace;
        font-size: var(--text-sm);
        border-radius: 4px;
        color: rgba(255, 255, 255, 0.92);
        font-weight: 500;
      }
      .msp-team-detail-heatmap-cell.level-0 { background: var(--chip-bg); color: var(--text-muted); }
      .msp-team-detail-heatmap-cell.level-1 { background: #d4a57480; }
      .msp-team-detail-heatmap-cell.level-2 { background: #d4a574; }
      .msp-team-detail-heatmap-cell.level-3 { background: #4476b8c0; }
      .msp-team-detail-heatmap-cell.level-4 { background: #4476b8; }
      .msp-team-detail-heatmap-cell.level-5 { background: #2a5380; }
      .msp-team-detail-heatmap-legend {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        display: flex; flex-wrap: wrap;
        gap: var(--space-2);
        align-items: center;
        margin-top: var(--space-3);
      }

      .msp-team-detail-records {
        display: flex; flex-wrap: wrap;
        gap: var(--space-2);
      }
      .msp-team-detail-record {
        display: inline-flex; align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
        cursor: pointer;
        font-family: inherit;
        color: inherit;
        text-align: left;
      }
      .msp-team-detail-record:hover { border-color: var(--border-accent); }
      .msp-team-detail-record-id {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
      }
      .msp-team-detail-record-item {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-sm);
        color: var(--text-primary);
      }
      .msp-team-detail-record-pri {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        padding: 0.05rem 0.4rem;
        border-radius: 10px;
        background: var(--chip-bg);
        color: var(--text-muted);
      }
      .msp-team-detail-records-more {
        font-family: ui-monospace, monospace;
        font-size: var(--text-sm);
        color: var(--text-muted);
        align-self: center;
        padding: 0 var(--space-2);
      }

      /* ===== Tickets view — live ticket queue with auto-triage ===== */
      .msp-tickets {
        display: flex; flex-direction: column;
        gap: var(--space-4);
        padding-bottom: var(--space-6);
      }
      .msp-tickets-head {
        display: flex; flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-4);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        padding: var(--space-4) var(--space-5);
      }
      .msp-tickets-head-text {
        flex: 1;
        min-width: 280px;
      }
      .msp-tickets-title {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-2xl);
        font-weight: 400;
        margin: 0 0 var(--space-2);
      }
      .msp-tickets-subtitle {
        font-size: var(--text-base);
        color: var(--text-secondary);
        line-height: 1.55;
        margin: 0;
        max-width: 720px;
      }
      .msp-tickets-actions {
        display: flex; flex-direction: column;
        align-items: flex-end;
        gap: var(--space-3);
      }
      .msp-tickets-stats {
        display: flex; flex-wrap: wrap;
        gap: var(--space-3);
        font-size: var(--text-sm);
        color: var(--text-secondary);
      }
      .msp-tickets-stat {
        display: inline-flex; align-items: center;
        gap: var(--space-1);
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .msp-tickets-stat-running { color: var(--accent); }
      .msp-tickets-stat-error { color: #c14638; }
      .msp-tickets-add {
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        background: var(--accent);
        color: white;
        border-color: var(--accent);
      }
      .msp-tickets-add:hover {
        background: color-mix(in srgb, var(--accent) 80%, black);
      }

      .msp-tickets-table-wrap {
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        overflow-x: auto;
        overflow-y: auto;
        max-height: min(72vh, 720px);
      }
      /* v3.1.4: tickets-table now uses the same canonical tokens as
         .msp-table — Workflows / Skills / Records / etc. and Tickets
         are now typographically identical. */
      .msp-tickets-table {
        width: 100%;
        border-collapse: separate; border-spacing: 0;
        font-size: var(--table-body-font);
      }
      .msp-tickets-table thead th {
        text-align: left;
        padding: var(--table-header-pad-y) var(--table-header-pad-x);
        font-family: ui-monospace, monospace;
        font-size: var(--table-header-font);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-primary);
        font-weight: 700;
        position: sticky; top: 0; z-index: 3;
        border-bottom: 1px solid var(--border-subtle);
        border-right: 1px solid var(--border-subtle);
        /* Same accent-tinted header background as every other table. */
        background: color-mix(in srgb, var(--accent) 7%, var(--card));
        white-space: nowrap;
      }
      .msp-tickets-table thead th:last-child { border-right: none; }
      .msp-tickets-table-resizable {
        table-layout: fixed;
      }
      .msp-tickets-table-resizable td {
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .msp-tickets-table-th {
        position: sticky; top: 0; z-index: 3;
        cursor: pointer;
        user-select: none;
        transition: background-color 80ms ease;
      }
      .msp-tickets-table-th:hover {
        background: color-mix(in srgb, var(--accent) 14%, var(--card));
      }
      .msp-tickets-table-th.msp-table-th-nosort {
        cursor: default;
      }
      .msp-tickets-table-th.msp-table-th-nosort:hover {
        background: transparent;
      }
      .msp-tickets-table-th-label {
        display: inline-block;
        max-width: calc(100% - 1.2rem);
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
      }
      .msp-tickets-table-th-indicator {
        display: inline-block;
        margin-left: 4px;
        font-size: 0.65rem;
        color: var(--text-muted);
        vertical-align: middle;
      }
      .msp-tickets-table-th.sorted .msp-tickets-table-th-indicator {
        color: var(--accent);
      }
      .msp-tickets-table tbody td {
        padding: var(--table-body-pad-y) var(--table-body-pad-x);
        vertical-align: top;
        border-bottom: 1px dashed var(--border-subtle);
        border-right: 1px solid var(--border-subtle);
      }
      .msp-tickets-table tbody td:last-child { border-right: none; }
      /* Row-number column on the tickets table — sticky-left, accent-tinted
         to match every other table in the app. */
      .msp-tickets-table-th-rownum,
      .msp-tickets-table-rownum {
        text-align: right;
        color: var(--text-muted);
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        padding-right: var(--space-2);
        padding-left: var(--space-2);
        position: sticky;
        left: 0;
        z-index: 2;
        width: 56px;
      }
      .msp-tickets-table-rownum {
        background: color-mix(in srgb, var(--accent) 4%, var(--card));
        font-weight: 500;
        user-select: none;
        vertical-align: middle;
      }
      .msp-tickets-table-th-rownum {
        background: color-mix(in srgb, var(--accent) 10%, var(--card));
        z-index: 4;
      }
      .msp-ticket-row:hover .msp-tickets-table-rownum,
      .msp-ticket-row.expanded .msp-tickets-table-rownum {
        background: color-mix(in srgb, var(--accent) 11%, var(--card));
      }
      .msp-ticket-row { cursor: pointer; transition: background-color 80ms ease; }
      .msp-ticket-row:hover { background: var(--bg); }
      .msp-ticket-row.expanded { background: var(--bg); }

      /* ---------- Ticket Priority Score column ----------
         Score cell with color-coded band (critical / high / mid / low)
         driven by the band class on the <td>. The number sits at the
         center of the cell in mono so it reads as a metric, not text. */
      .msp-ticket-score {
        text-align: center;
        vertical-align: middle;
        font-family: ui-monospace, monospace;
        white-space: nowrap;
      }
      .msp-ticket-score-value {
        display: inline-block;
        padding: 0.2rem 0.55rem;
        border-radius: 4px;
        font-weight: 700;
        font-size: 0.95rem;
      }
      .msp-ticket-score-critical .msp-ticket-score-value {
        background: color-mix(in srgb, #c14638 22%, transparent);
        color: #c14638;
      }
      .msp-ticket-score-high .msp-ticket-score-value {
        background: color-mix(in srgb, #d97a3a 18%, transparent);
        color: #b25e2a;
      }
      .msp-ticket-score-mid .msp-ticket-score-value {
        background: color-mix(in srgb, #dab433 14%, transparent);
        color: #8a7a18;
      }
      .msp-ticket-score-low .msp-ticket-score-value {
        background: color-mix(in srgb, #4476b8 12%, transparent);
        color: #3a679f;
      }
      .msp-ticket-score-none .msp-ticket-score-value {
        color: var(--text-muted);
      }

      /* Breakdown formula shown in expanded ticket detail */
      .msp-ticket-score-breakdown {
        background: color-mix(in srgb, var(--accent) 4%, var(--card));
        border-left: 3px solid var(--border-accent);
        padding: var(--space-3);
        border-radius: 6px;
      }
      .msp-ticket-score-formula {
        display: flex; flex-wrap: wrap;
        align-items: baseline;
        gap: 0.5rem;
        margin: var(--space-2) 0;
        font-size: 0.95rem;
      }
      .msp-ticket-score-final {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--text-primary);
      }
      .msp-ticket-score-eq, .msp-ticket-score-op {
        color: var(--text-muted);
        font-family: ui-monospace, monospace;
        font-size: 0.9rem;
      }
      .msp-ticket-score-factor {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 0.15rem;
      }
      .msp-ticket-score-factor .pt-mono {
        font-weight: 600;
        color: var(--text-primary);
      }
      .msp-ticket-score-factor-label {
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 0.72rem;
        color: var(--text-muted);
        white-space: nowrap;
      }
      .msp-ticket-score-hint {
        font-family: 'Fraunces', Georgia, serif;
        font-style: italic;
        font-size: 0.82rem;
        color: var(--text-muted);
        margin-top: var(--space-2);
      }

      .msp-ticket-created {
        font-size: var(--text-xs);
        white-space: nowrap;
        color: var(--text-secondary);
        min-width: 90px;
      }
      .msp-ticket-seed-tag {
        display: inline-block;
        margin-top: var(--space-1);
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
        background: var(--chip-bg);
        border: 1px dashed var(--border-subtle);
        padding: 1px 5px;
        border-radius: 3px;
      }

      .msp-ticket-subject {
        max-width: 460px;
      }
      .msp-ticket-subject-line {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-md);
        font-weight: 500;
        color: var(--text-primary);
        line-height: 1.35;
      }
      .msp-ticket-requester {
        margin-top: var(--space-1);
        font-size: var(--text-xs);
        color: var(--text-muted);
      }
      .msp-ticket-requester-co { color: var(--text-secondary); }

      .msp-triage-state {
        display: inline-flex; align-items: center;
        gap: var(--space-1);
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 2px 8px;
        border-radius: 4px;
        background: var(--chip-bg);
        border: 1px solid var(--border-subtle);
        color: var(--text-secondary);
        white-space: nowrap;
      }
      .msp-triage-pending {
        color: var(--text-muted);
        border-style: dashed;
      }
      .msp-triage-running {
        color: var(--accent);
        border-color: var(--border-accent);
      }
      .msp-triage-complete {
        color: #6b8f6e;
        border-color: color-mix(in srgb, #6b8f6e 40%, transparent);
        background: color-mix(in srgb, #6b8f6e 10%, transparent);
      }
      .msp-triage-error {
        color: #c14638;
        border-color: color-mix(in srgb, #c14638 40%, transparent);
        background: color-mix(in srgb, #c14638 8%, transparent);
      }
      .msp-triage-spinner {
        display: inline-block;
        width: 8px; height: 8px;
        border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
        border-top-color: var(--accent);
        border-radius: 50%;
        animation: msp-triage-spin 0.7s linear infinite;
      }
      @keyframes msp-triage-spin {
        to { transform: rotate(360deg); }
      }
      .msp-triage-confidence {
        margin-top: var(--space-1);
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
      }

      .msp-ticket-match-link {
        display: inline-flex; align-items: center;
        gap: var(--space-1);
        background: transparent;
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
        padding: var(--space-1) var(--space-2);
        cursor: pointer;
        font-size: var(--text-sm);
        max-width: 280px;
      }
      .msp-ticket-match-link:hover {
        border-color: var(--border-accent);
        background: color-mix(in srgb, var(--accent) 5%, transparent);
      }
      .msp-ticket-match-dot {
        display: inline-block;
        width: 8px; height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .msp-ticket-match-id {
        font-size: var(--text-xs);
        color: var(--text-muted);
      }
      .msp-ticket-match-item {
        font-family: "Fraunces", Georgia, serif;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .msp-ticket-pending {
        color: var(--text-muted);
        font-style: italic;
        font-size: var(--text-sm);
      }
      .msp-ticket-error {
        color: #c14638;
        font-style: italic;
        font-size: var(--text-sm);
        cursor: help;
      }

      .msp-ticket-suggested {
        display: flex; flex-direction: column;
        gap: var(--space-1);
        white-space: nowrap;
      }
      .msp-ticket-priority-badge {
        display: inline-block;
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 1px 6px;
        border: 1px solid;
        border-radius: 3px;
        font-weight: 500;
      }
      .msp-ticket-status {
        font-size: var(--text-xs);
        color: var(--text-secondary);
      }

      /* ---------- New columns added in the table expansion ---------- */

      /* Status (suggested) — small subtle badge */
      .msp-ticket-status-badge {
        display: inline-block;
        font-family: 'Fraunces', Georgia, serif;
        font-size: var(--text-sm);
        font-style: italic;
        color: var(--text-secondary);
        padding: 1px 6px;
        background: color-mix(in srgb, var(--accent) 5%, var(--card));
        border: 1px solid var(--border-subtle);
        border-radius: 3px;
        white-space: nowrap;
      }

      /* Requester column — name on top, role badge below */
      .msp-ticket-requester-name {
        font-size: var(--text-sm);
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .msp-ticket-role-badge {
        display: inline-block;
        margin-top: 2px;
        font-family: ui-monospace, monospace;
        font-size: 0.62rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        padding: 1px 5px;
        border-radius: 2px;
        white-space: nowrap;
      }
      .msp-ticket-role-c-suite {
        color: #c14638;
        background: rgba(193, 70, 56, 0.10);
      }
      .msp-ticket-role-senior-leadership {
        color: #b25e2a;
        background: rgba(178, 94, 42, 0.10);
      }
      .msp-ticket-role-manager {
        color: #8a7a18;
        background: rgba(218, 180, 51, 0.12);
      }
      .msp-ticket-role-individual {
        color: var(--text-muted);
        background: var(--chip-bg);
      }
      .msp-ticket-role-automated {
        color: #5a8aa6;
        background: rgba(74, 123, 166, 0.10);
        font-style: italic;
      }

      /* Client column — company name + premium badge */
      .msp-ticket-client-name {
        font-size: var(--text-sm);
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .msp-ticket-client-premium {
        display: inline-block;
        margin-top: 2px;
        font-family: ui-monospace, monospace;
        font-size: 0.62rem;
        letter-spacing: 0.08em;
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 14%, transparent);
        border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
        padding: 1px 5px;
        border-radius: 2px;
        white-space: nowrap;
      }

      /* Board / Type / Subtype cells — narrow text columns */
      .msp-ticket-board-cell,
      .msp-ticket-type-cell,
      .msp-ticket-subtype-cell {
        font-size: var(--text-sm);
        color: var(--text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .msp-ticket-status-cell,
      .msp-ticket-priority-cell {
        white-space: nowrap;
      }

      .msp-ticket-row-actions {
        display: flex;
        gap: var(--space-1);
        align-items: center;
        white-space: nowrap;
      }
      .msp-ticket-icon-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 28px; height: 28px;
        background: transparent;
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
        color: var(--text-muted);
        cursor: pointer;
      }
      .msp-ticket-icon-btn:hover {
        color: var(--accent);
        border-color: var(--border-accent);
      }
      .msp-ticket-delete:hover {
        color: #c14638;
        border-color: color-mix(in srgb, #c14638 40%, transparent);
      }

      .msp-ticket-detail-row { background: var(--bg); }
      .msp-ticket-detail-row td {
        border-bottom: 1px solid var(--border-subtle) !important;
        padding: 0 !important;
      }
      .msp-ticket-detail {
        padding: var(--space-4) var(--space-5);
        display: flex; flex-direction: column;
        gap: var(--space-3);
      }
      .msp-ticket-detail-block { display: flex; flex-direction: column; gap: var(--space-1); }
      .msp-ticket-detail-block p {
        margin: 0;
        font-size: var(--text-sm);
        color: var(--text-primary);
        line-height: 1.55;
      }
      .msp-ticket-detail-block ul {
        margin: 0; padding-left: 1.2rem;
        font-size: var(--text-sm);
        color: var(--text-primary);
        line-height: 1.55;
      }
      .msp-ticket-detail-label {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .msp-ticket-reasoning {
        font-style: italic;
        color: var(--text-secondary);
      }
      .msp-ticket-question {
        background: color-mix(in srgb, var(--accent) 8%, transparent);
        border-left: 2px solid var(--border-accent);
        padding: var(--space-2) var(--space-3);
        border-radius: 0 4px 4px 0;
      }
      .msp-ticket-alternatives {
        display: flex; flex-wrap: wrap;
        gap: var(--space-2);
      }
      .msp-ticket-alt {
        display: inline-flex; align-items: center;
        gap: var(--space-1);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
        padding: var(--space-1) var(--space-2);
        font-size: var(--text-xs);
        color: var(--text-secondary);
        cursor: pointer;
      }
      .msp-ticket-alt:hover { border-color: var(--border-accent); color: var(--text-primary); }
      .msp-ticket-alt-conf {
        font-family: ui-monospace, monospace;
        color: var(--text-muted);
      }
      .msp-ticket-detail-error p { color: #c14638; }

      /* ===== Add Ticket form modal ===== */
      .msp-add-ticket {
        position: relative;
        background: var(--card);
        border-radius: 10px;
        padding: var(--space-6) var(--space-7);
        max-width: 600px;
        width: calc(100vw - 4rem);
        max-height: 85vh;
        overflow: auto;
        box-shadow: 0 20px 60px rgba(0,0,0,0.18);
      }
      .msp-add-ticket-title {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-2xl);
        font-weight: 400;
        margin: 0 0 var(--space-2);
      }
      .msp-add-ticket-subtitle {
        font-size: var(--text-sm);
        color: var(--text-secondary);
        line-height: 1.55;
        margin: 0 0 var(--space-5);
      }
      .msp-form-label {
        display: flex; flex-direction: column;
        gap: var(--space-1);
        margin-bottom: var(--space-4);
      }
      .msp-form-label span {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .msp-form-label input,
      .msp-form-label textarea {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-base);
        line-height: 1.5;
        padding: var(--space-2) var(--space-3);
        background: var(--input-bg);
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
        color: var(--text-primary);
      }
      .msp-form-label input:focus,
      .msp-form-label textarea:focus {
        outline: none;
        border-color: var(--border-accent);
      }
      .msp-form-label textarea { resize: vertical; }
      .msp-form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
      }
      .msp-form-row .msp-form-label { margin-bottom: var(--space-4); }
      .msp-form-actions {
        display: flex; justify-content: flex-end;
        gap: var(--space-2);
        margin-top: var(--space-3);
      }
      .msp-form-submit {
        background: var(--accent);
        color: white;
        border-color: var(--accent);
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
      }
      .msp-form-submit:hover:not(:disabled) {
        background: color-mix(in srgb, var(--accent) 80%, black);
      }
      .msp-form-submit:disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }

      /* ===== Ticket Intake Agent — two-pane conversational new-ticket modal ===== */
      .msp-intake {
        position: relative;
        background: var(--card);
        border-radius: 10px;
        width: min(1200px, calc(100vw - 3rem));
        height: min(820px, calc(100vh - 3rem));
        display: flex; flex-direction: column;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(0,0,0,0.18);
      }
      .msp-intake-head {
        display: flex; align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-5);
        border-bottom: 1px solid var(--border-subtle);
        flex-shrink: 0;
      }
      .msp-intake-head-text { flex: 1; }
      .msp-intake-title {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-2xl);
        font-weight: 400;
        margin: 0 0 var(--space-1);
      }
      .msp-intake-subtitle {
        font-size: var(--text-sm);
        color: var(--text-secondary);
        line-height: 1.55;
        margin: 0;
        max-width: 720px;
      }
      .msp-intake-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        flex: 1;
        min-height: 0;
        overflow: hidden;
      }
      .msp-intake-pane {
        display: flex; flex-direction: column;
        min-height: 0;
        overflow: hidden;
      }
      .msp-intake-chat-pane {
        border-right: 1px solid var(--border-subtle);
        background: var(--bg);
      }
      .msp-intake-form-pane {
        background: var(--card);
      }

      /* ----- Left pane: chat ----- */
      .msp-intake-chat-body {
        flex: 1;
        overflow-y: auto;
        padding: var(--space-5);
        display: flex; flex-direction: column;
        gap: var(--space-4);
      }
      .msp-intake-empty {
        margin: auto;
        max-width: 440px;
        text-align: center;
        display: flex; flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-6) 0;
      }
      .msp-intake-empty-headline {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-lg);
        color: var(--text-primary);
        margin: 0;
      }
      .msp-intake-empty-sub {
        font-style: italic;
        font-size: var(--text-sm);
        color: var(--text-muted);
        line-height: 1.55;
        margin: 0;
      }
      .msp-intake-msg {
        display: flex; flex-direction: column;
        gap: var(--space-1);
      }
      .msp-intake-msg-role {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .msp-intake-msg-body {
        padding: var(--space-3) var(--space-4);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        line-height: 1.55;
        color: var(--text-primary);
        font-size: var(--text-base);
      }
      .msp-intake-msg-user .msp-intake-msg-body {
        background: color-mix(in srgb, var(--accent) 8%, var(--card));
        border-color: color-mix(in srgb, var(--accent) 25%, transparent);
      }

      .msp-intake-questions {
        display: flex; flex-direction: column;
        gap: var(--space-3);
      }
      .msp-intake-question {
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-left: 3px solid var(--accent);
        border-radius: 6px;
        padding: var(--space-3) var(--space-4);
      }
      .msp-intake-question-text {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-md);
        color: var(--text-primary);
        margin-bottom: var(--space-2);
        line-height: 1.4;
        display: flex; align-items: baseline;
        gap: var(--space-2);
      }
      .msp-intake-question-num {
        flex-shrink: 0;
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 20px; height: 20px;
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        color: var(--text-muted);
        background: var(--chip-bg);
        border: 1px solid var(--border-subtle);
        border-radius: 50%;
      }
      .msp-intake-question-options {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
      }
      .msp-intake-option {
        display: inline-flex; align-items: center;
        gap: var(--space-1);
        text-align: left;
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-sm);
        line-height: 1.4;
        padding: var(--space-2) var(--space-3);
        background: var(--bg);
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
        color: var(--text-primary);
        cursor: pointer;
        transition: border-color 80ms ease, background 80ms ease;
      }
      .msp-intake-option:hover:not(:disabled) {
        border-color: var(--accent);
        background: color-mix(in srgb, var(--accent) 6%, var(--bg));
      }
      .msp-intake-option.selected {
        border-color: var(--accent);
        background: color-mix(in srgb, var(--accent) 14%, var(--bg));
        color: var(--text-primary);
        font-weight: 500;
        box-shadow: 0 0 0 1px var(--accent) inset;
      }
      .msp-intake-option-check {
        color: var(--accent);
        font-weight: 700;
      }
      .msp-intake-option:disabled { opacity: 0.5; cursor: not-allowed; }

      .msp-intake-update-row {
        display: flex; align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        padding-top: var(--space-2);
        border-top: 1px dashed var(--border-subtle);
        margin-top: var(--space-1);
      }
      .msp-intake-update-progress {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .msp-intake-update {
        display: inline-flex; align-items: center;
        gap: var(--space-1);
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        background: var(--accent);
        color: white;
        border-color: var(--accent);
        padding: var(--space-2) var(--space-4);
      }
      .msp-intake-update:hover:not(:disabled) {
        background: color-mix(in srgb, var(--accent) 80%, black);
      }
      .msp-intake-update:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        background: var(--bg);
        color: var(--text-muted);
        border-color: var(--border-subtle);
      }

      .msp-intake-input {
        display: flex; gap: var(--space-2);
        align-items: flex-end;
        padding: var(--space-3) var(--space-5) var(--space-4);
        border-top: 1px solid var(--border-subtle);
        background: var(--card);
        flex-shrink: 0;
      }
      .msp-intake-input textarea {
        flex: 1;
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-base);
        line-height: 1.5;
        padding: var(--space-3);
        background: var(--input-bg);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        color: var(--text-primary);
        resize: none;
        min-height: 44px;
        max-height: 140px;
      }
      .msp-intake-input textarea:focus {
        outline: none;
        border-color: var(--border-accent);
      }
      .msp-intake-input textarea:disabled { opacity: 0.7; }

      /* ----- Right pane: form ----- */
      .msp-intake-form-head {
        display: flex; align-items: center;
        justify-content: space-between;
        padding: var(--space-3) var(--space-5);
        border-bottom: 1px solid var(--border-subtle);
        flex-shrink: 0;
      }
      .msp-intake-form-label {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .msp-intake-form-ready {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #6b8f6e;
        background: color-mix(in srgb, #6b8f6e 12%, transparent);
        border: 1px solid color-mix(in srgb, #6b8f6e 35%, transparent);
        padding: 2px 8px;
        border-radius: 3px;
      }
      .msp-intake-form-body {
        flex: 1;
        overflow-y: auto;
        padding: var(--space-5);
      }
      .msp-intake-form-body .msp-form-label { margin-bottom: var(--space-3); }
      .msp-intake-form-body .msp-form-row { gap: var(--space-3); }

      .msp-intake-classification {
        margin-top: var(--space-4);
        padding-top: var(--space-4);
        border-top: 1px dashed var(--border-subtle);
        display: flex; flex-direction: column;
        gap: var(--space-3);
      }
      .msp-intake-classification-head {
        display: flex; align-items: center;
        justify-content: space-between;
      }
      .msp-intake-class-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
      }
      .msp-intake-match {
        display: inline-flex; align-items: center;
        gap: var(--space-1);
        flex-wrap: wrap;
      }
      .msp-intake-match-id {
        font-size: var(--text-xs);
        color: var(--text-muted);
      }
      .msp-intake-match-item {
        font-family: "Fraunces", Georgia, serif;
        color: var(--text-primary);
      }
      .msp-intake-signals ul {
        margin: var(--space-1) 0 0;
        padding-left: 1.2rem;
        font-size: var(--text-sm);
        line-height: 1.55;
        color: var(--text-secondary);
      }
      .msp-intake-reasoning {
        font-size: var(--text-sm);
        color: var(--text-secondary);
        line-height: 1.55;
        background: color-mix(in srgb, var(--accent) 6%, transparent);
        border-left: 2px solid var(--border-accent);
        padding: var(--space-2) var(--space-3);
        border-radius: 0 4px 4px 0;
      }

      .msp-intake-form-foot {
        display: flex; justify-content: flex-end;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-5);
        border-top: 1px solid var(--border-subtle);
        flex-shrink: 0;
        background: var(--card);
      }

      @media (max-width: 880px) {
        .msp-intake-body { grid-template-columns: 1fr; }
        .msp-intake-chat-pane { border-right: none; border-bottom: 1px solid var(--border-subtle); }
      }

      /* ===== AI Agents — toolbar button, picker overlay, chat drawer ===== */
      .msp-toolbar-sep {
        display: inline-block;
        width: 1px;
        align-self: stretch;
        background: var(--border-subtle);
        margin: 0 var(--space-2);
      }
      .msp-agents-btn {
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        color: var(--accent);
        border-color: var(--border-accent);
      }
      .msp-agents-btn:hover {
        background: color-mix(in srgb, var(--accent) 10%, transparent);
      }

      .msp-agents-panel {
        position: relative;
        background: var(--card);
        border-radius: 10px;
        padding: var(--space-6) var(--space-7) var(--space-7);
        max-width: 760px;
        width: calc(100vw - 4rem);
        max-height: 85vh;
        overflow: auto;
        box-shadow: 0 20px 60px rgba(0,0,0,0.18);
      }
      .msp-agents-head { margin-bottom: var(--space-5); }
      .msp-agents-title {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-2xl);
        font-weight: 400;
        margin: 0 0 var(--space-2);
        line-height: 1.2;
      }
      .msp-agents-subtitle {
        font-size: var(--text-base);
        color: var(--text-secondary);
        margin: 0;
        line-height: 1.55;
      }
      .msp-agents-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: var(--space-3);
      }
      .msp-agent-card {
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-4);
        background: var(--bg);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        cursor: pointer;
        text-align: left;
        /* L-15: hover standardized to outline-only. Selected state still
           keeps the accent background (different signal than hover). */
        transition: border-color 120ms ease;
      }
      .msp-agent-card:hover {
        border-color: var(--border-accent);
      }
      .msp-agent-card.active {
        border-color: var(--agent-accent, var(--accent));
        background: color-mix(in srgb, var(--agent-accent, var(--accent)) 8%, var(--bg));
      }
      .msp-agent-card-icon {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px; height: 38px;
        border-radius: 8px;
        background: color-mix(in srgb, var(--agent-accent, var(--accent)) 12%, transparent);
      }
      .msp-agent-card-text {
        display: flex; flex-direction: column;
        gap: var(--space-1);
        min-width: 0;
      }
      .msp-agent-card-label {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-lg);
        font-weight: 500;
        color: var(--text-primary);
        line-height: 1.2;
      }
      .msp-agent-card-desc {
        font-size: var(--text-sm);
        color: var(--text-secondary);
        line-height: 1.45;
      }

      /* ─── v3.23.0: agent panel is a slide-in OVERLAY ────────────────
         The persistent right rail is gone. The panel is opened via the
         "AI Agents" pill in the header chrome — when open it slides in
         from the right edge as a fixed overlay, anchored to the right.
         When closed there's ZERO right-side real estate (the main
         column takes the full width). */
      .msp-app.msp-with-agent-panel {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        min-height: 100vh;
      }
      .msp-main-column {
        flex: 1 1 auto;
        min-width: 0;       /* prevent overflow from wide children */
        display: flex;
        flex-direction: column;
        /* L-9: outer page padding lives here now (moved off .msp-app
           so sidebars stay flush to viewport edges). The horizontal
           padding doubles as the gutter between sidebars and content
           cards; the page-bg (--bg) shows through. Vertical padding
           gives the header and footer breathing room from the viewport
           edges without affecting the sticky sidebars. */
        padding: 2rem 1.75rem 4rem;
        background: var(--bg);
      }
      /* v3.23.0: backdrop catches outside-clicks to close. Very light
         tint so the main content stays readable. */
      .msp-agent-pane-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.08);
        z-index: 40;
        animation: msp-pane-backdrop-in 180ms ease-out;
      }
      :root[data-theme="dark"] .msp-agent-pane-backdrop {
        background: rgba(0, 0, 0, 0.32);
      }
      @keyframes msp-pane-backdrop-in {
        from { opacity: 0; }
        to   { opacity: 1; }
      }
      .msp-agent-pane.msp-agent-pane-overlay {
        position: fixed;
        right: 0;
        top: 0;
        height: 100vh;
        max-width: 92vw;
        min-width: 320px;
        background: var(--card);
        border-left: 1px solid var(--border-subtle);
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.06);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        z-index: 50;
        animation: msp-pane-slide-in 220ms cubic-bezier(.2, .7, .3, 1);
      }
      :root[data-theme="dark"] .msp-agent-pane.msp-agent-pane-overlay {
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.32);
      }
      @keyframes msp-pane-slide-in {
        from { transform: translateX(100%); opacity: 0.4; }
        to   { transform: translateX(0); opacity: 1; }
      }
      /* L-6: resize handle pinned to the left edge of the agent pane.
         Thin invisible hit area; reveals a 2px grip on hover/drag. */
      .msp-agent-pane-resize {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 8px;
        cursor: col-resize;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.15s;
      }
      .msp-agent-pane-resize:hover,
      .msp-agent-pane-resize.is-dragging {
        background: color-mix(in srgb, var(--accent) 14%, transparent);
      }
      .msp-agent-pane-resize-grip {
        width: 2px;
        height: 36px;
        background: var(--border-subtle);
        border-radius: 2px;
        transition: background 0.15s, height 0.15s;
      }
      .msp-agent-pane-resize:hover .msp-agent-pane-resize-grip,
      .msp-agent-pane-resize.is-dragging .msp-agent-pane-resize-grip {
        background: var(--accent);
        height: 64px;
      }
      /* Position context for the absolute resize handle */
      .msp-agent-pane { position: sticky; }
      .msp-agent-rail {
        flex: 0 0 48px;
        width: 48px;
        background: var(--card);
        border-left: 1px solid var(--border-subtle);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: var(--space-4) 0;
        gap: var(--space-2);
        position: sticky;
        top: 0;
        height: 100vh;
        animation: msp-rail-in 180ms ease-out;
      }
      .msp-agent-rail-toggle {
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        border: 1px solid var(--border-subtle);
        background: var(--bg);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        /* L-15: dropped scale transform on hover — was the same "popout"
           pattern we removed from cards. Background + border tint stay. */
        transition: background 0.15s, border-color 0.15s;
      }
      .msp-agent-rail-toggle:hover {
        background: color-mix(in srgb, currentColor 8%, var(--card));
        border-color: currentColor;
      }
      .msp-agent-rail-label {
        font-family: ui-monospace, monospace;
        font-size: 0.65rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--text-muted);
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        margin-top: var(--space-2);
        white-space: nowrap;
      }
      @keyframes msp-pane-in {
        from { opacity: 0; transform: translateX(8px); }
        to   { opacity: 1; transform: translateX(0); }
      }
      @keyframes msp-rail-in {
        from { opacity: 0; }
        to   { opacity: 1; }
      }
      /* Mobile / narrow viewports: agent pane goes full-width when open
         (acts like a modal slide-over), rail stays slim. Below 720px we
         actually overlay so the main content doesn't get squeezed. */
      @media (max-width: 1024px) {
        .msp-agent-pane {
          flex: 0 0 360px;
          width: 360px;
          max-width: 100vw;
        }
        /* v3.72: the left-nav responsive behavior (60px rail at tablet,
           off-canvas drawer at phone) is defined in the CONSOLIDATED block
           below — placed AFTER the base nav rules so it isn't out-ordered by
           `.msp-left-nav { width: 244px }` (the long-standing bug that kept
           the nav at 244px on every width). Do not re-add nav width/label
           rules here. */
        /* SessionBar — at tablet width, hide the optional config-lens chips
           label text (icons stay) so the bar fits without wrapping. */
        .msp-session-chip-label {
          display: none;
        }
        .msp-session-bar {
          gap: 0.2rem;
          padding: 0.25rem 0.3rem;
        }
        /* Header search shrinks at tablet so the right-side controls
           still fit on one row. */
        .msp-header-search-input.msp-input {
          width: 180px;
        }
        /* ViewToolbar can wrap if it has lots of items at tablet width. */
        .msp-view-toolbar {
          flex-wrap: wrap;
          row-gap: 0.5rem;
        }
      }
      /* v3.23.0: phone widths — slide-in panel covers more of the
         screen since the agent-chat needs room to read at small sizes. */
      @media (max-width: 768px) { /* compact — consolidated from 720 (#284) */
        .msp-agent-pane.msp-agent-pane-overlay {
          width: 100vw !important;
          max-width: 100vw;
        }
      }

      /* AgentChat — now in-flow inside .msp-agent-pane (was fixed). */
      .msp-agent-chat {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        background: var(--card);
      }
      /* v3.23.0: API key banner inside the agent panel. Calm
         accent-tinted warning + a single CTA to Settings. Sits between
         the chat head and the message body. */
      .msp-agent-api-banner {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        margin: 0;
        background: color-mix(in srgb, var(--accent) 8%, var(--card));
        border-top: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border-subtle));
        border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border-subtle));
        font-size: var(--text-sm);
        line-height: 1.45;
        color: var(--text-primary);
      }
      .msp-agent-api-banner-icon {
        flex: 0 0 auto;
        font-size: 1.1rem;
        line-height: 1;
        color: var(--accent);
      }
      .msp-agent-api-banner-body {
        flex: 1 1 auto;
        min-width: 0;
      }
      .msp-agent-api-banner-body strong {
        color: var(--accent);
        font-weight: 600;
      }
      .msp-agent-api-banner-cta {
        flex: 0 0 auto;
        appearance: none;
        background: var(--accent);
        color: #fff;
        border: 1px solid var(--accent);
        border-radius: var(--radius-md);
        padding: 0.4rem 0.75rem;
        font-family: inherit;
        font-size: 0.78rem;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        transition: background 140ms ease, transform 140ms ease;
      }
      .msp-agent-api-banner-cta:hover {
        background: color-mix(in srgb, var(--accent) 88%, #000);
        transform: translateY(-1px);
      }
      .msp-agent-api-banner-cta:active {
        transform: translateY(0);
      }

      /* ─── Left navigation panel (v3.4 — restyled L-5) ────────────────
         Persistent left sidebar holding 15 view chips + the MANAGE/
         Connectors item. Restyled to match Claude.ai's minimal sidebar
         aesthetic: flat items, no per-section accent stripes, single
         neutral hover/active palette, very small uppercase muted
         section labels acting as separators (no borders between
         sections). Wordmark at top.

         Two states: open (244px) and collapsed rail (52px). Both are
         sticky to viewport. */
      /* L-16: unified left nav. ONE structure for both collapsed + expanded
         states; the difference is a data-collapsed attribute that controls
         width + label visibility via CSS attribute selectors. The DOM stays
         identical so icons never reposition or resize on toggle — only the
         aside width animates from 244px → 60px, and labels/wordmark/section-
         titles display:none out of the layout. Tooltips activate on hover
         only when collapsed. */
      .msp-left-nav {
        flex: 0 0 244px;
        width: 244px;
        background: var(--card);
        border-right: 1px solid var(--border-subtle);
        display: flex;
        flex-direction: column;
        position: sticky;
        top: 0;
        height: 100vh;
        /* L-16: overflow visible so tooltips can pop out to the right. */
        overflow: visible;
        /* L-16: bump z-index so the rail's hover tooltip can paint above
           the main column's normal content (header, search bar, etc.).
           Stays below modal overlays (z-100) and below dropdowns explicitly
           positioned at z-50+ within the main column. */
        z-index: 30;
        /* L-16: smooth width animation on collapse/expand */
        transition: width 220ms ease, flex-basis 220ms ease;
        animation: msp-left-nav-in 200ms ease-out;
      }
      .msp-left-nav[data-collapsed="true"] {
        flex: 0 0 60px;
        width: 60px;
      }
      @keyframes msp-left-nav-in {
        from { opacity: 0; transform: translateX(-6px); }
        to   { opacity: 1; transform: translateX(0); }
      }

      /* L-16: tooltips — only shown on hover when sidebar is collapsed.
         When expanded, the visible item-label serves as the affordance, so
         the tooltip stays hidden. Tooltip element is always in the DOM
         (so it animates) but invisible by default. */
      .msp-left-nav-rail-tooltip {
        position: absolute;
        left: calc(100% + 8px);
        top: 50%;
        transform: translateY(-50%) translateX(-4px);
        white-space: nowrap;
        font-family: inherit;
        font-size: 0.82rem;
        font-weight: 500;
        line-height: 1;
        color: var(--text-primary);
        background: var(--card);
        border: 1px solid var(--border-subtle);
        padding: 0.4rem 0.65rem;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        z-index: 50;
        transition: opacity 120ms ease-out, transform 120ms ease-out, visibility 0s linear 120ms;
      }
      .msp-left-nav[data-collapsed="true"] .msp-left-nav-item:hover .msp-left-nav-rail-tooltip,
      .msp-left-nav[data-collapsed="true"] .msp-left-nav-item:focus-visible .msp-left-nav-rail-tooltip,
      .msp-left-nav[data-collapsed="true"] .msp-left-nav-collapse:hover .msp-left-nav-rail-tooltip,
      .msp-left-nav[data-collapsed="true"] .msp-left-nav-collapse:focus-visible .msp-left-nav-rail-tooltip {
        opacity: 1;
        visibility: visible;
        transform: translateY(-50%) translateX(0);
        transition: opacity 120ms ease-out 80ms, transform 120ms ease-out 80ms, visibility 0s linear 0s;
      }

      /* Head — collapse toggle on the LEFT (icon column) so it aligns with
         every nav item below. Wordmark to its right when expanded; hidden
         when collapsed. */
      .msp-left-nav-head {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        /* L-16: padding matches body so the toggle button's icon sits at
           the same X position as every item's icon below. */
        padding: 0.55rem 0.65rem 0.45rem;
        flex: 0 0 auto;
      }
      .msp-left-nav-wordmark {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: 1.05rem;
        font-weight: 500;
        color: var(--text-primary);
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
      }
      .msp-left-nav-wordmark-mark {
        color: var(--accent);
        font-size: 1.05rem;
        font-style: normal;
      }
      .msp-left-nav-wordmark-text {
        /* Animates out smoothly when sidebar collapses */
        transition: opacity 120ms ease;
      }
      .msp-left-nav[data-collapsed="true"] .msp-left-nav-wordmark {
        /* Hidden entirely so it doesn't stretch the head row. */
        display: none;
      }
      /* L-16: the collapse button reuses .msp-left-nav-item styling (same
         padding + flex layout) so the toggle icon sits at the same X
         position as every nav icon below. It's a child of .msp-left-nav-head
         with the .msp-left-nav-collapse class added for styling overrides. */
      .msp-left-nav-collapse {
        padding: 0.5rem 0.7rem;
        background: transparent;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 0.65rem;
        border-radius: 6px;
        position: relative;
        flex: 0 0 auto;
        transition: background 0.12s, color 0.12s;
      }
      .msp-left-nav-collapse:hover {
        background: color-mix(in srgb, var(--text-primary) 6%, var(--card));
        color: var(--text-primary);
      }
      /* Scrollable nav body — L-6: generous padding for breathing room.
         L-16: when collapsed, switch to overflow:visible so the rail-icon
         hover tooltips can pop out to the right of the aside without
         being clipped (per CSS spec, overflow-y:auto forces overflow-x:auto
         too, which would clip the tooltips). */
      .msp-left-nav-body {
        flex: 1 1 auto;
        /* L-17: lock x to hidden so item labels can never trigger a
           horizontal scrollbar. (Per CSS spec, setting overflow-y: auto
           implicitly makes overflow-x: auto too — we need to override
           it back to hidden explicitly.) Item labels self-clip via
           ellipsis when narrower than their content. */
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0.35rem 0.65rem 0.85rem;
      }
      .msp-left-nav[data-collapsed="true"] .msp-left-nav-body {
        /* When collapsed, switch to visible so hover tooltips can pop
           out to the right of the rail without being clipped. Labels
           are display:none in this state so there's nothing to scroll. */
        overflow: visible;
      }
      /* v3.20.15: scrollbars standardized at the app level (global
         * { scrollbar-* } rule near the top of this stylesheet).
         LeftNav inherits the standard treatment — no per-element
         override needed anymore. */
      /* Sections — flat, no borders. Spacing acts as separator. L-6
         increased margin-bottom for better visual rhythm. */
      .msp-left-nav-section {
        padding: 0;
        margin: 0 0 0.95rem 0;
      }
      .msp-left-nav-section:first-child {
        margin-top: 0.35rem;
      }
      .msp-left-nav-section:last-child {
        margin-bottom: 0.4rem;
      }
      .msp-left-nav-section-label {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-family: ui-sans-serif, system-ui, sans-serif;
        /* v3.22.2: bump from 0.66rem / 600 → 0.72rem / 700 for better
           readability while keeping the uppercase letter-spaced semantic
           that says "this is a section label, not a nav item." */
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.11em;
        /* v3.40.12: section headers take a SUBTLE WARM-ACCENT TINT (a muted
           mix of --accent into --text-muted) while nav items stay the neutral
           --text-secondary — so the two levels read as a clear hierarchy AND
           the headers carry the brand's warm tone. (v3.40.11 used flat
           --text-muted; both levels were --text-secondary before that.) */
        color: color-mix(in srgb, var(--accent) 60%, var(--text-muted));
        margin: 0.4rem 0 0.4rem 0.55rem;
        font-weight: 700;
        opacity: 1;
        white-space: nowrap;
        overflow: hidden;
      }
      .msp-left-nav-section-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 12px;
        height: 12px;
        flex: 0 0 auto;
      }
      /* L-16: when collapsed, hide the section label TEXT but keep the
         section's vertical rhythm. Using visibility: hidden + width: 0
         (instead of display: none) means the text element still occupies
         its line-box, so the section-label container keeps the exact same
         height as in the expanded state. Items beneath therefore stay at
         the same vertical position. */
      .msp-left-nav[data-collapsed="true"] .msp-left-nav-section-label-text {
        visibility: hidden;
        width: 0;
      }
      /* v3.22.2: ONE unified section color — all sections muted. Drops
         the v3.22.0 2-tier palette (Tier 1 muted / Tier 2 accent) which
         read as inconsistent rather than as a hierarchy. Section names
         already communicate the catalog-vs-your-shop distinction. */
      .msp-left-nav-section-your-msp        .msp-left-nav-section-icon,
      .msp-left-nav-section-commercial      .msp-left-nav-section-icon,
      .msp-left-nav-section-service-catalog .msp-left-nav-section-icon,
      .msp-left-nav-section-tech-stack      .msp-left-nav-section-icon,
      .msp-left-nav-section-people          .msp-left-nav-section-icon,
      .msp-left-nav-section-clients-data    .msp-left-nav-section-icon,
      .msp-left-nav-section-grc             .msp-left-nav-section-icon {
        color: color-mix(in srgb, var(--accent) 60%, var(--text-muted));
      }

      /* v3.20.0 — collapsible section headers. The section label became a
         <button> so it can toggle visibility of its items; a chevron rotates
         -90deg when collapsed. In rail mode the button is disabled (chevron
         + text hidden), so clicks don't fire and items always show. */
      .msp-left-nav-section-label {
        appearance: none;
        background: transparent;
        border: 0;
        margin: 0;
        cursor: pointer;
        font-family: inherit;
        text-align: left;
        width: 100%;
        border-radius: var(--radius-sm);
        transition: background 140ms cubic-bezier(.2,.7,.3,1),
                    color      140ms cubic-bezier(.2,.7,.3,1);
      }
      .msp-left-nav-section-label:hover:not(:disabled) {
        background: color-mix(in srgb, var(--accent) 6%, transparent);
        color: var(--accent);
      }
      .msp-left-nav-section-label:disabled { cursor: default; }
      .msp-left-nav-section-chevron {
        flex-shrink: 0;
        display: inline-flex; align-items: center;
        color: color-mix(in srgb, var(--accent) 60%, var(--text-muted));
        transition: transform 180ms cubic-bezier(.2,.7,.3,1);
      }
      .msp-left-nav-section.is-collapsed .msp-left-nav-section-chevron {
        transform: rotate(-90deg);
      }
      /* In rail mode the section labels (and so the chevron) are hidden, and
         items are always shown. */
      .msp-left-nav[data-collapsed="true"] .msp-left-nav-section-chevron {
        display: none;
      }
      /* v3.22.2: section label text — single unified muted color across
         all sections. (No per-section overrides; the base rule below
         supplies the color.) */
      /* Item list — L-6: tiny gap between items for legibility */
      .msp-left-nav-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .msp-left-nav-item {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 0.65rem;
        padding: 0.5rem 0.7rem;
        background: transparent;
        border: none;
        border-radius: 6px;
        color: var(--text-secondary);
        cursor: pointer;
        font-family: inherit;
        font-size: 0.88rem;
        text-align: left;
        /* L-16: position relative so the hover tooltip anchors to the button */
        position: relative;
        transition: background 0.1s, color 0.1s;
        line-height: 1.25;
      }
      .msp-left-nav-item:hover {
        background: color-mix(in srgb, var(--text-primary) 5%, var(--card));
        color: var(--text-primary);
      }
      .msp-left-nav-item.active {
        background: color-mix(in srgb, var(--text-primary) 9%, var(--card));
        color: var(--text-primary);
        font-weight: 600;
      }
      /* L-16: when collapsed, hide the text label so items become icon-only.
         The icon stays in the same X position (button padding-left unchanged)
         and the tooltip on hover replaces the label. */
      .msp-left-nav[data-collapsed="true"] .msp-left-nav-item-label {
        display: none;
      }
      .msp-left-nav-item-icon {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* L-13: bumped from 16px → 20px so the open-sidebar icons read at
           the same visual weight as the rail icons (22px), and the label
           pairs more comfortably with a properly sized glyph. */
        width: 20px;
        height: 20px;
        color: var(--text-muted);
        transition: color 0.1s;
      }
      .msp-left-nav-item-icon svg {
        width: 20px;
        height: 20px;
      }
      .msp-left-nav-item:hover .msp-left-nav-item-icon,
      .msp-left-nav-item.active .msp-left-nav-item-icon {
        color: var(--text-primary);
      }
      .msp-left-nav-item-label {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      /* L-3: pinned footer with the Export PDF action.
         L-16: footer button now uses .msp-left-nav-item structure so its
         icon column-aligns with everything else. The accent fill is layered
         on via .msp-left-nav-footer-btn override. */
      .msp-left-nav-footer {
        flex: 0 0 auto;
        padding: 0.55rem 0.6rem 0.75rem;
        border-top: 1px solid var(--border-subtle);
      }
      .msp-left-nav-footer-btn.msp-left-nav-item {
        background: var(--accent);
        color: #fff;
        border: 1px solid var(--accent);
        border-radius: 7px;
        font-weight: 600;
      }
      .msp-left-nav-footer-btn.msp-left-nav-item:hover {
        background: color-mix(in srgb, var(--accent) 88%, #000);
        color: #fff;
      }
      .msp-left-nav-footer-btn.msp-left-nav-item:active {
        transform: translateY(1px);
      }
      /* Footer icon always white in both states (matches the accent fill) */
      .msp-left-nav-footer-btn.msp-left-nav-item .msp-left-nav-item-icon,
      .msp-left-nav-footer-btn.msp-left-nav-item:hover .msp-left-nav-item-icon {
        color: #fff;
      }
      /* L-16: when collapsed, the footer becomes a square icon-only chip so
         the accent pill doesn't stretch across the narrow rail. */
      .msp-left-nav[data-collapsed="true"] .msp-left-nav-footer {
        padding: 0.45rem 0.5rem 0.6rem;
      }

      /* Phone-only chrome (hidden by default; the ≤600px block below reveals
         them). Base display:none here guarantees they never show on
         tablet/desktop even while the drawer state is open. */
      .msp-header-nav-toggle {
        display: none;
        align-items: center; justify-content: center;
        width: 38px; height: 38px; flex: 0 0 auto;
        margin-right: 0.5rem;
        background: none; border: 1px solid var(--border-subtle);
        border-radius: 8px; color: var(--text-secondary); cursor: pointer;
      }
      .msp-header-nav-toggle:hover { background: var(--chip-bg); color: var(--text-primary); }
      .msp-left-nav-backdrop { display: none; }

      /* ===== Responsive left navigation (v3.72 responsive overhaul) =====
         AUTHORITATIVE block — placed AFTER the base .msp-left-nav rules so
         source order favors these overrides (the earlier @media blocks lost
         to `.msp-left-nav { width:244px }`). `.msp-app`-scoped for specificity.
           • Tablet 601–1024px → 60px icon rail (labels hidden).
           • Phone ≤600px → off-canvas drawer: hidden by default, slides in
             when `.msp-left-nav-open`, overlays full-width content. A header
             hamburger opens it; a backdrop (or selecting a view) closes it. */
      @media (min-width: 601px) and (max-width: 1024px) {
        .msp-app .msp-left-nav { flex: 0 0 60px; width: 60px; }
        .msp-app .msp-left-nav-wordmark,
        .msp-app .msp-left-nav-label,
        .msp-app .msp-left-nav-item-label,
        .msp-app .msp-left-nav-section-label-text,
        .msp-app .msp-left-nav-section-chevron,
        .msp-app .msp-left-nav-footer-label { display: none; }
      }
      @media (max-width: 600px) {
        .msp-app .msp-left-nav {
          position: fixed;
          top: 0; left: 0;
          height: 100vh; height: 100dvh;
          width: 284px; max-width: 86vw;
          flex: none;
          transform: translateX(-100%);
          transition: transform 220ms ease;
          /* the desktop entrance animation animates `transform` and would
             fight the drawer slide — disable it at phone width. */
          animation: none;
          z-index: var(--z-overlay, 60);
          box-shadow: 2px 0 22px rgba(0, 0, 0, 0.28);
        }
        .msp-app.msp-left-nav-open .msp-left-nav { transform: translateX(0); }
        /* backdrop — only present/visible when the drawer is open at phone */
        .msp-left-nav-backdrop { display: none; }
        .msp-app.msp-left-nav-open .msp-left-nav-backdrop {
          display: block;
          position: fixed; inset: 0;
          background: rgba(0, 0, 0, 0.42);
          z-index: calc(var(--z-overlay, 60) - 1);
          animation: msp-pane-backdrop-in 180ms ease-out;
        }
        /* header hamburger appears only at phone width */
        .msp-header-nav-toggle { display: inline-flex; }
        /* the in-nav collapse arrow is redundant on phone (hamburger + backdrop drive it) */
        .msp-left-nav-collapse { display: none; }
        /* reclaim horizontal space for content on phone */
        .msp-main-column { padding: 1rem 0.85rem 3rem; }
        /* modals go near-full-screen on phone — the 2rem overlay padding
           wastes ~64px of a 375px screen. */
        .msp-modal-overlay { padding: 0.6rem; }
        .msp-modal { max-height: 94vh; }
        /* Phone drawer is a full off-canvas panel, never a collapsed rail.
           data-collapsed persists from the desktop rail state and would (a)
           hide the drawer's labels / wordmark / section headers (icon-only,
           unusable) and (b) arm the rail hover-tooltips, which leak onto the
           screen on touch — sticky :hover after a tap lands the tooltip at the
           drawer's right edge (x≈0) so the tapped item's label "stays on
           screen" after the drawer closes. Neutralize it: kill the tooltips
           and restore the drawer's expanded form. */
        .msp-app .msp-left-nav-rail-tooltip { display: none !important; }
        .msp-app .msp-left-nav[data-collapsed="true"] .msp-left-nav-item-label { display: block; }
        .msp-app .msp-left-nav[data-collapsed="true"] .msp-left-nav-wordmark { display: inline-flex; }
        .msp-app .msp-left-nav[data-collapsed="true"] .msp-left-nav-section-label-text { visibility: visible; width: auto; }
        .msp-app .msp-left-nav[data-collapsed="true"] .msp-left-nav-section-chevron { display: inline-flex; }
      }

      /* ─── ConnectorsView (v3.4 L-2) ──────────────────────────────────
         The MANAGE/Connectors top-level view. Card-stack layout —
         status block, tool catalog block, add-PSA CTA block. Matches
         the visual language of other "settings" surfaces (color blocks
         with status pills + dl meta tables). */
      /* ─── SettingsView (C-2 — BYOK) ─────────────────────────────── */
      .msp-settings-view {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        padding-bottom: var(--space-6);
        max-width: 720px;
      }
      .msp-settings-section {
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        padding: var(--space-5);
      }
      .msp-settings-section-info {
        background: color-mix(in srgb, var(--accent) 3%, var(--card));
      }
      .msp-settings-section-title {
        margin: 0 0 var(--space-3) 0;
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-xl);
        font-weight: 500;
        color: var(--text-primary);
      }
      .msp-settings-saved-flash {
        font-family: ui-monospace, monospace;
        font-size: 0.8rem;
        color: #3a6d2e;
        background: rgba(70, 130, 60, 0.13);
        padding: 0.2rem 0.55rem;
        border-radius: 999px;
        font-weight: 600;
        align-self: flex-start;
      }
      /* Provider radio group — each option is a labeled card */
      .msp-settings-provider-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }
      .msp-settings-provider-option {
        display: flex;
        align-items: flex-start;
        gap: 0.7rem;
        padding: 0.75rem 0.85rem;
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        background: var(--bg);
        cursor: pointer;
        transition: background 0.12s, border-color 0.12s;
      }
      .msp-settings-provider-option:hover {
        background: color-mix(in srgb, var(--text-primary) 4%, var(--bg));
        border-color: color-mix(in srgb, var(--accent) 25%, var(--border-subtle));
      }
      .msp-settings-provider-option.active {
        background: color-mix(in srgb, var(--accent) 6%, var(--bg));
        border-color: color-mix(in srgb, var(--accent) 40%, transparent);
      }
      .msp-settings-provider-option input[type="radio"] {
        margin-top: 0.2rem;
        accent-color: var(--accent);
      }
      .msp-settings-provider-body {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        flex: 1 1 auto;
      }
      .msp-settings-provider-label {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-primary);
      }
      .msp-settings-provider-desc {
        font-size: 0.85rem;
        color: var(--text-secondary);
        line-height: 1.4;
      }
      /* Form fields */
      .msp-settings-field {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
      }
      .msp-settings-field + .msp-settings-field {
        margin-top: var(--space-4);
      }
      .msp-settings-field-label {
        font-family: ui-monospace, monospace;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--text-muted);
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .msp-settings-help {
        font-family: inherit;
        font-size: 0.75rem;
        text-transform: none;
        letter-spacing: normal;
        color: var(--accent);
        text-decoration: none;
      }
      .msp-settings-help:hover { text-decoration: underline; }
      .msp-settings-key-row {
        display: flex;
        gap: 0.5rem;
      }
      .msp-settings-input {
        flex: 1 1 auto;
        font-family: ui-monospace, monospace;
        font-size: 0.88rem;
        padding: 0.55rem 0.75rem;
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
        background: var(--input-bg, #fff);
        color: var(--text-primary);
        transition: border-color 0.15s, box-shadow 0.15s;
      }
      .msp-settings-input:focus {
        border-color: color-mix(in srgb, var(--accent) 50%, var(--border-subtle));
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
        outline: none;
      }
      .msp-settings-input.is-invalid {
        border-color: #c14638;
      }
      .msp-settings-toggle-show {
        flex: 0 0 auto;
        padding: 0.55rem 0.85rem;
        background: transparent;
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
        cursor: pointer;
        font-family: inherit;
        font-size: 0.85rem;
        color: var(--text-secondary);
      }
      .msp-settings-toggle-show:hover {
        background: var(--chip-bg);
        color: var(--text-primary);
      }
      .msp-settings-warning {
        margin: 0;
        padding: 0.45rem 0.7rem;
        background: rgba(193, 70, 56, 0.08);
        border-left: 3px solid #c14638;
        border-radius: 0 4px 4px 0;
        font-size: 0.82rem;
        color: #8d2f24;
      }
      .msp-settings-warning code {
        font-size: 0.8rem;
        background: rgba(0,0,0,0.06);
        padding: 0.05rem 0.3rem;
        border-radius: 3px;
      }
      .msp-settings-note {
        margin: 0.5rem 0 0 0;
        font-size: 0.85rem;
        color: var(--text-muted);
        line-height: 1.5;
        font-style: italic;
      }
      .msp-settings-bullets {
        font-size: 0.88rem;
        line-height: 1.55;
        color: var(--text-secondary);
        margin: 0;
        padding-left: 1.2rem;
      }
      .msp-settings-bullets code {
        font-size: 0.82rem;
        background: rgba(0,0,0,0.05);
        padding: 0.1rem 0.35rem;
        border-radius: 3px;
      }

      .msp-connectors-view {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        padding-bottom: var(--space-6);
      }
      .msp-conn-block {
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        padding: var(--space-5);
      }
      .msp-conn-block-status {
        border-left: 3px solid var(--accent);
      }
      .msp-conn-block-cta {
        background: color-mix(in srgb, var(--accent) 4%, var(--card));
      }
      .msp-conn-block-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        margin-bottom: var(--space-3);
        flex-wrap: wrap;
      }
      .msp-conn-block-title {
        display: flex;
        align-items: center;
        gap: 0.55rem;
      }
      .msp-conn-block-title h3,
      .msp-conn-block-head h3 {
        margin: 0;
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-xl);
        font-weight: 500;
        color: var(--text-primary);
      }
      .msp-conn-block-meta {
        font-family: ui-monospace, monospace;
        font-size: var(--text-sm);
        color: var(--text-muted);
      }
      .msp-conn-block-meta strong {
        color: var(--text-primary);
      }
      .msp-conn-block-body {
        font-size: 0.92rem;
        line-height: 1.55;
        color: var(--text-secondary);
        margin: 0 0 var(--space-3) 0;
      }
      .msp-conn-block-body code {
        font-size: 0.85rem;
        background: rgba(0,0,0,0.05);
        padding: 0.1rem 0.35rem;
        border-radius: 3px;
      }
      .msp-conn-block-error {
        color: #8d2f24;
        padding: 0.6rem 0.85rem;
        background: rgba(193, 70, 56, 0.08);
        border-left: 3px solid #c14638;
        border-radius: 0 4px 4px 0;
      }
      .msp-conn-block-footnote {
        font-size: 0.82rem;
        color: var(--text-muted);
        margin: var(--space-3) 0 0 0;
        font-style: italic;
      }
      .msp-conn-external {
        font-size: 0.85rem;
        color: var(--accent);
        text-decoration: none;
        margin-left: 0.3rem;
      }
      .msp-conn-external:hover { text-decoration: underline; }
      /* Dot + status pill */
      .msp-conn-dot {
        width: 10px; height: 10px; border-radius: 50%;
        flex: 0 0 auto;
      }
      .msp-conn-dot-connected { background: #3a6d2e; box-shadow: 0 0 0 3px rgba(70, 130, 60, 0.18); }
      .msp-conn-dot-connecting { background: var(--accent); animation: msp-conn-pulse 1.4s ease-in-out infinite; }
      .msp-conn-dot-idle { background: var(--text-muted); }
      .msp-conn-dot-error { background: #c14638; }
      @keyframes msp-conn-pulse {
        0%, 100% { opacity: 0.6; transform: scale(1); }
        50% { opacity: 1; transform: scale(1.25); }
      }
      .msp-conn-status-pill {
        font-family: ui-monospace, monospace;
        font-size: 0.78rem;
        letter-spacing: 0.04em;
        padding: 0.22rem 0.6rem;
        border-radius: 999px;
        font-weight: 600;
      }
      .msp-conn-status-connected {
        background: rgba(70, 130, 60, 0.13);
        color: #3a6d2e;
      }
      .msp-conn-status-connecting {
        background: rgba(177, 90, 42, 0.12);
        color: var(--accent);
      }
      .msp-conn-status-idle {
        background: rgba(0,0,0,0.06);
        color: var(--text-muted);
      }
      .msp-conn-status-error {
        background: rgba(193, 70, 56, 0.12);
        color: #a13a30;
      }
      /* Meta table */
      .msp-conn-meta {
        display: grid;
        gap: 0.55rem;
        margin: 0 0 var(--space-3) 0;
      }
      .msp-conn-meta-row {
        display: grid;
        grid-template-columns: 9rem 1fr;
        align-items: baseline;
        gap: 0.85rem;
      }
      .msp-conn-meta-row dt {
        font-family: ui-monospace, monospace;
        font-size: 0.72rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-muted);
        font-weight: 600;
        margin: 0;
      }
      .msp-conn-meta-row dd {
        font-size: 0.9rem;
        color: var(--text-primary);
        margin: 0;
      }
      .msp-conn-meta-row dd code {
        font-size: 0.85rem;
        background: rgba(0,0,0,0.04);
        padding: 0.1rem 0.35rem;
        border-radius: 3px;
      }
      .msp-conn-meta-aside { color: var(--text-muted); font-size: 0.85rem; }
      /* Action buttons */
      .msp-conn-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
      }
      .msp-conn-btn {
        font-family: inherit;
        font-size: 0.9rem;
        padding: 0.55rem 1.1rem;
        border-radius: 6px;
        cursor: pointer;
        transition: background 0.15s, border-color 0.15s, color 0.15s;
        font-weight: 600;
      }
      .msp-conn-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
      .msp-conn-btn-primary {
        background: var(--accent);
        color: #fff;
        border: 1px solid var(--accent);
      }
      .msp-conn-btn-primary:hover:not(:disabled) {
        background: color-mix(in srgb, var(--accent) 88%, #000);
      }
      .msp-conn-btn-secondary {
        background: transparent;
        color: var(--text-primary);
        border: 1px solid var(--border-subtle);
      }
      .msp-conn-btn-secondary:hover:not(:disabled) {
        background: var(--chip-bg);
        border-color: var(--border-accent);
      }
      .msp-conn-spinner {
        display: inline-block;
        width: 14px; height: 14px;
        border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent);
        border-top-color: var(--accent);
        border-radius: 50%;
        animation: msp-sjx-spin 0.9s linear infinite;
        margin-right: 0.4rem;
        vertical-align: middle;
      }
      /* Tool group rendering */
      .msp-conn-tool-groups {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 0.55rem;
      }
      .msp-conn-tool-group {
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
        padding: 0.6rem 0.85rem;
      }
      .msp-conn-tool-group-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.55rem;
      }
      .msp-conn-tool-group-prefix {
        font-size: 0.95rem;
        background: rgba(0,0,0,0.06);
        padding: 0.15rem 0.45rem;
        border-radius: 4px;
        font-weight: 600;
      }
      .msp-conn-tool-group-count {
        font-family: ui-monospace, monospace;
        font-size: 0.8rem;
        color: var(--text-muted);
      }
      .msp-conn-tool-group-details {
        margin-top: 0.55rem;
      }
      .msp-conn-tool-group-details summary {
        font-size: 0.85rem;
        color: var(--accent);
        cursor: pointer;
        list-style: none;
      }
      .msp-conn-tool-group-details summary::before {
        content: "▸";
        display: inline-block;
        margin-right: 0.35rem;
        transition: transform 0.15s;
      }
      .msp-conn-tool-group-details[open] summary::before {
        transform: rotate(90deg);
      }
      .msp-conn-tool-list {
        margin: 0.4rem 0 0 0;
        padding-left: 0.4rem;
        list-style: none;
        max-height: 280px;
        overflow-y: auto;
      }
      .msp-conn-tool-list li {
        font-size: 0.82rem;
        line-height: 1.5;
        padding: 0.15rem 0;
        color: var(--text-secondary);
      }
      .msp-conn-tool-list li code {
        font-weight: 600;
        color: var(--text-primary);
        background: rgba(0,0,0,0.04);
        padding: 0.1rem 0.3rem;
        border-radius: 3px;
      }
      .msp-conn-tool-desc {
        color: var(--text-muted);
        font-style: italic;
      }
      .msp-conn-tool-list-overflow {
        font-style: italic;
        color: var(--text-muted) !important;
      }
      /* Add-a-PSA grid */
      .msp-conn-cta-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-4);
        margin-top: var(--space-3);
      }
      @media (max-width: 880px) {
        .msp-conn-cta-grid {
          grid-template-columns: 1fr;
        }
      }
      .msp-conn-cta-col-label {
        font-family: ui-monospace, monospace;
        font-size: 0.72rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin: 0 0 var(--space-2) 0;
        font-weight: 600;
      }
      .msp-conn-cta-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 0.45rem;
      }
      .msp-conn-cta-item {
        display: flex;
        align-items: baseline;
        gap: 0.5rem;
        flex-wrap: wrap;
        font-size: 0.9rem;
        padding: 0.45rem 0.6rem;
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
      }
      .msp-conn-cta-item strong {
        color: var(--text-primary);
      }
      .msp-conn-cta-item-roadmap {
        opacity: 0.7;
      }
      .msp-conn-cta-pill {
        font-family: ui-monospace, monospace;
        font-size: 0.66rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 0.08rem 0.35rem;
        background: rgba(177, 90, 42, 0.14);
        color: var(--accent);
        border-radius: 3px;
      }
      .msp-conn-cta-desc {
        flex: 1 1 100%;
        font-size: 0.82rem;
        color: var(--text-muted);
        line-height: 1.45;
      }
      .msp-agent-chat-head {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: 0.85rem 1rem;
        border-bottom: 1px solid var(--border-subtle);
      }
      .msp-agent-back {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        padding: var(--space-2) var(--space-3);
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-secondary);
        background: transparent;
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
        cursor: pointer;
      }
      .msp-agent-back:hover {
        color: var(--text-primary);
        border-color: var(--border-accent);
      }
      .msp-agent-chat-title {
        flex: 1;
        display: flex;
        align-items: center;
        gap: var(--space-3);
        min-width: 0;
      }
      .msp-agent-chat-icon {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px; height: 36px;
      }
      .msp-agent-chat-title-text {
        flex: 1 1 auto;
        min-width: 0;
      }

      /* ─── AgentSwitcher (L-7) ─────────────────────────────────────
         The clickable pill that replaces the static title in the chat
         head. Click → dropdown listing all 7 agents. Active agent
         shown with a check. */
      .msp-agent-switcher {
        position: relative;
        flex: 1 1 auto;
        min-width: 0;
      }
      .msp-agent-switcher-trigger {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.35rem 0.5rem 0.35rem 0.35rem;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 8px;
        cursor: pointer;
        font: inherit;
        text-align: left;
        color: var(--text-primary);
        transition: background 0.12s, border-color 0.12s;
      }
      .msp-agent-switcher-trigger:hover {
        background: color-mix(in srgb, var(--agent-accent, var(--text-primary)) 6%, var(--card));
        border-color: var(--border-subtle);
      }
      .msp-agent-switcher-trigger.is-open {
        background: color-mix(in srgb, var(--agent-accent, var(--text-primary)) 9%, var(--card));
        border-color: color-mix(in srgb, var(--agent-accent, var(--text-primary)) 22%, transparent);
      }
      .msp-agent-switcher-icon {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
      }
      .msp-agent-switcher-text {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
      }
      .msp-agent-switcher-name {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-xl);
        font-weight: 500;
        color: var(--text-primary);
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .msp-agent-switcher-desc {
        font-size: var(--text-xs);
        color: var(--text-muted);
        line-height: 1.35;
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .msp-agent-switcher-chev {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
        margin-left: 0.2rem;
        transition: transform 0.15s, color 0.15s;
      }
      .msp-agent-switcher-trigger:hover .msp-agent-switcher-chev,
      .msp-agent-switcher-trigger.is-open .msp-agent-switcher-chev {
        color: var(--text-primary);
      }
      .msp-agent-switcher-trigger.is-open .msp-agent-switcher-chev {
        transform: rotate(180deg);
      }
      /* Popover — anchored to the trigger, slides down */
      .msp-agent-switcher-menu {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        z-index: 30;
        background: var(--card);
        border: 1px solid var(--border-subtle);
        border-radius: 10px;
        box-shadow: 0 12px 36px -10px rgba(0,0,0,0.22);
        padding: 0.45rem;
        animation: msp-switcher-in 140ms ease-out;
      }
      @keyframes msp-switcher-in {
        from { opacity: 0; transform: translateY(-4px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      .msp-agent-switcher-menu-head {
        padding: 0.4rem 0.55rem 0.55rem;
        border-bottom: 1px solid var(--border-subtle);
        margin-bottom: 0.4rem;
      }
      .msp-agent-switcher-menu-title {
        display: block;
        font-family: ui-monospace, monospace;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--text-muted);
        font-weight: 600;
      }
      .msp-agent-switcher-menu-sub {
        display: block;
        margin-top: 0.25rem;
        font-size: 0.78rem;
        color: var(--text-secondary);
        line-height: 1.4;
      }
      .msp-agent-switcher-menu-list {
        display: flex;
        flex-direction: column;
        gap: 1px;
        max-height: 360px;
        overflow-y: auto;
      }
      .msp-agent-switcher-menu-item {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.5rem 0.6rem;
        background: transparent;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font: inherit;
        text-align: left;
        color: var(--text-secondary);
        transition: background 0.1s, color 0.1s;
      }
      .msp-agent-switcher-menu-item:hover {
        background: color-mix(in srgb, var(--agent-accent, var(--text-primary)) 9%, var(--card));
        color: var(--text-primary);
      }
      .msp-agent-switcher-menu-item.active {
        background: color-mix(in srgb, var(--agent-accent, var(--text-primary)) 12%, var(--card));
        color: var(--text-primary);
      }
      .msp-agent-switcher-menu-item-icon {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        color: var(--agent-accent, var(--text-primary));
      }
      .msp-agent-switcher-menu-item-body {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
      }
      .msp-agent-switcher-menu-item-label {
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--text-primary);
        line-height: 1.2;
      }
      .msp-agent-switcher-menu-item-desc {
        font-size: 0.75rem;
        color: var(--text-muted);
        line-height: 1.4;
      }
      .msp-agent-switcher-menu-item-check {
        flex: 0 0 auto;
        color: var(--agent-accent, var(--text-primary));
      }
      .msp-agent-chat-name {
        font-family: "Fraunces", Georgia, serif;
        font-size: var(--text-xl);
        font-weight: 500;
        color: var(--text-primary);
        line-height: 1.2;
      }
      .msp-agent-chat-desc {
        font-size: var(--text-xs);
        color: var(--text-muted);
        line-height: 1.4;
        margin-top: 2px;
      }
      .msp-agent-chat-actions {
        display: flex;
        align-items: center;
        gap: var(--space-2);
      }
      .msp-agent-clear {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        padding: var(--space-2) var(--space-3);
        background: transparent;
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
        color: var(--text-muted);
        cursor: pointer;
      }
      .msp-agent-clear:hover:not(:disabled) {
        color: var(--accent);
        border-color: var(--border-accent);
      }
      .msp-agent-clear:disabled { opacity: 0.4; cursor: not-allowed; }
      .msp-agent-close {
        position: static;
        width: 32px; height: 32px;
      }
      /* Collapse button — chevrons pointing right (toward the rail) */
      .msp-agent-collapse {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: transparent;
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
        color: var(--text-secondary);
        cursor: pointer;
        transition: background 0.15s, color 0.15s, border-color 0.15s;
      }
      .msp-agent-collapse:hover {
        background: var(--chip-bg);
        color: var(--text-primary);
        border-color: var(--border-accent);
      }

      .msp-agent-chat-body {
        flex: 1;
        overflow-y: auto;
        padding: var(--space-5);
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
      }

      .msp-agent-empty {
        margin: auto;
        max-width: 440px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-6) 0;
      }
      .msp-agent-empty-glyph {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 56px; height: 56px;
        border-radius: 50%;
        background: color-mix(in srgb, currentColor 10%, transparent);
      }
      .msp-agent-empty-headline {
        font-family: "Fraunces", Georgia, serif;
        font-style: italic;
        font-size: var(--text-md);
        color: var(--text-primary);
        line-height: 1.5;
        margin: 0;
      }
      .msp-agent-empty-sub {
        font-size: var(--text-sm);
        color: var(--text-muted);
        line-height: 1.55;
        margin: 0;
      }

      .msp-agent-msg {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
      }
      .msp-agent-msg-role {
        font-family: ui-monospace, monospace;
        font-size: var(--text-xs);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .msp-agent-msg-body {
        padding: var(--space-3) var(--space-4);
        background: var(--bg);
        border-radius: 8px;
        line-height: 1.6;
        color: var(--text-primary);
        font-size: var(--text-base);
      }
      .msp-agent-msg-user .msp-agent-msg-body {
        background: color-mix(in srgb, var(--accent) 8%, var(--bg));
        border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
      }
      .msp-agent-msg-assistant .msp-agent-msg-body {
        border: 1px solid var(--border-subtle);
      }
      /* C-1: Concierge tool-use blocks — compact gray pills under the
         assistant's text showing which tools were called. */
      .msp-agent-tools {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        margin-top: 0.5rem;
      }
      .msp-agent-tool-call {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        align-self: flex-start;
        padding: 0.25rem 0.55rem;
        background: color-mix(in srgb, var(--text-primary) 6%, var(--card));
        border: 1px solid var(--border-subtle);
        border-radius: 5px;
        font-size: 0.78rem;
        color: var(--text-secondary);
        font-family: ui-monospace, monospace;
      }
      .msp-agent-tool-icon {
        display: inline-flex;
        align-items: center;
        color: #3a6d2e;
      }
      .msp-agent-tool-name {
        font-weight: 600;
        color: var(--text-primary);
        background: transparent;
      }
      .msp-agent-tool-args {
        color: var(--text-muted);
      }
      .msp-chat-para { margin: 0 0 var(--space-3); }
      .msp-chat-para:last-child { margin-bottom: 0; }
      .msp-chat-list { margin: 0 0 var(--space-3); padding-left: 1.4rem; }
      .msp-chat-list:last-child { margin-bottom: 0; }
      .msp-chat-list li { margin-bottom: var(--space-1); }
      .msp-chat-heading {
        font-family: "Fraunces", Georgia, serif;
        font-weight: 500;
        margin: var(--space-3) 0 var(--space-2);
        line-height: 1.3;
      }
      .msp-chat-heading:first-child { margin-top: 0; }
      .msp-chat-h1 { font-size: var(--text-xl); }
      .msp-chat-h2 { font-size: var(--text-lg); }
      .msp-chat-h3 { font-size: var(--text-md); color: var(--text-secondary); }
      .msp-chat-h4 { font-size: var(--text-base); color: var(--text-secondary); }
      .msp-chat-code {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 0.85em;
        padding: 2px 5px;
        background: color-mix(in srgb, var(--text-muted) 15%, transparent);
        border-radius: 4px;
      }
      .msp-chat-pre {
        margin: 0 0 var(--space-3);
        padding: var(--space-3);
        background: color-mix(in srgb, var(--text-muted) 10%, transparent);
        border-radius: 6px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: var(--text-sm);
        line-height: 1.5;
        overflow-x: auto;
      }
      .msp-chat-pre code { background: transparent; padding: 0; }

      .msp-agent-typing {
        display: inline-flex;
        gap: 4px;
        padding: 4px 0;
      }
      .msp-agent-typing span {
        display: inline-block;
        width: 7px; height: 7px;
        border-radius: 50%;
        background: var(--text-muted);
        opacity: 0.4;
        animation: msp-typing 1.2s infinite;
      }
      .msp-agent-typing span:nth-child(2) { animation-delay: 0.15s; }
      .msp-agent-typing span:nth-child(3) { animation-delay: 0.3s; }
      @keyframes msp-typing {
        0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
        30% { opacity: 1; transform: translateY(-3px); }
      }

      .msp-agent-error {
        font-size: var(--text-sm);
        padding: var(--space-3);
        background: color-mix(in srgb, #c14638 10%, transparent);
        border: 1px solid color-mix(in srgb, #c14638 35%, transparent);
        border-radius: 6px;
        color: #c14638;
        line-height: 1.5;
      }

      /* ─── Agent composer (L-11 — Claude.ai pattern) ────────────────
         Single rounded card wrapping the textarea on top and a slim
         toolbar (attachments / tools badge / model indicator / send
         button) underneath. Disclaimer microcopy sits below the card.
         Replaces the old inline flex with the send button on the right. */
      .msp-agent-composer-wrap {
        flex: 0 0 auto;
        padding: 0.85rem 1rem 0.95rem;
        background: var(--card);
        border-top: 1px solid var(--border-subtle);
      }
      .msp-agent-composer {
        display: flex;
        flex-direction: column;
        background: var(--input-bg, #fff);
        border: 1px solid var(--border-subtle);
        border-radius: 16px;
        padding: 0.75rem 0.85rem 0.5rem;
        transition: border-color 0.15s, box-shadow 0.15s;
      }
      .msp-agent-composer:focus-within {
        border-color: color-mix(in srgb, var(--accent) 50%, var(--border-subtle));
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
      }
      .msp-agent-composer.is-busy {
        opacity: 0.85;
      }
      .msp-agent-composer-textarea {
        width: 100%;
        flex: 0 0 auto;
        font-family: "Fraunces", Georgia, serif;
        font-size: 0.95rem;
        line-height: 1.5;
        padding: 0;
        background: transparent;
        border: none;
        color: var(--text-primary);
        resize: none;
        min-height: 44px;
        max-height: 200px;
        outline: none;
      }
      .msp-agent-composer-textarea::placeholder {
        color: var(--text-muted);
      }
      .msp-agent-composer-textarea:disabled {
        opacity: 0.65;
        cursor: progress;
      }
      .msp-agent-composer-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        margin-top: 0.5rem;
      }
      .msp-agent-composer-toolbar-left,
      .msp-agent-composer-toolbar-right {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
      }
      /* Affordance button (the "+"). Disabled placeholder for now. */
      .msp-agent-composer-affordance {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        background: transparent;
        border: 1px solid var(--border-subtle);
        color: var(--text-muted);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background 0.12s, color 0.12s, border-color 0.12s;
      }
      .msp-agent-composer-affordance:hover:not(:disabled) {
        background: var(--chip-bg);
        color: var(--text-primary);
        border-color: var(--border-accent);
      }
      .msp-agent-composer-affordance:disabled {
        cursor: not-allowed;
        opacity: 0.5;
      }
      /* Tools badge — small pill noting the agent has tool use */
      .msp-agent-composer-tools-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.25rem 0.55rem;
        background: color-mix(in srgb, var(--accent) 11%, var(--card));
        color: var(--accent);
        border-radius: 999px;
        font-size: 0.72rem;
        font-family: ui-monospace, monospace;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }
      .msp-agent-composer-tools-badge svg {
        flex: 0 0 auto;
      }
      /* Model / agent indicator on the right */
      .msp-agent-composer-model {
        font-family: ui-monospace, monospace;
        font-size: 0.78rem;
        color: var(--text-muted);
        letter-spacing: 0.02em;
        padding: 0.2rem 0.55rem;
        border-radius: 6px;
      }
      /* Send button — circular, accent-colored */
      .msp-agent-composer-send {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: none;
        color: #fff;
        cursor: pointer;
        transition: opacity 0.12s, transform 0.12s;
      }
      .msp-agent-composer-send:hover:not(:disabled) {
        transform: scale(1.06);
      }
      .msp-agent-composer-send:active:not(:disabled) {
        transform: scale(0.96);
      }
      .msp-agent-composer-send:disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }
      /* Disclaimer below — matches Claude.ai's "is AI and can make mistakes" */
      .msp-agent-composer-disclaimer {
        margin: 0.5rem 0 0 0;
        text-align: center;
        font-size: 0.74rem;
        color: var(--text-muted);
        line-height: 1.4;
        font-family: ui-sans-serif, system-ui, sans-serif;
      }

      @media (max-width: 600px) {
        .msp-agents-panel {
          padding: var(--space-5) var(--space-4) var(--space-5);
        }
        .msp-agents-grid {
          grid-template-columns: 1fr;
        }
        .msp-agent-chat {
          width: 100vw;
        }
      }