@import '_content/Osirion.Blazor.Cms.Admin/Osirion.Blazor.Cms.Admin.1xi4j5nemq.bundle.scp.css';
@import '_content/Osirion.Blazor.Cms.Core/Osirion.Blazor.Cms.Core.k9r0kzqlr7.bundle.scp.css';
@import '_content/Osirion.Blazor.Cms.Web/Osirion.Blazor.Cms.Web.yr4dwr39vk.bundle.scp.css';
@import '_content/Osirion.Blazor.Core/Osirion.Blazor.Core.hdeccekzoa.bundle.scp.css';
@import '_content/Osirion.Blazor.Navigation/Osirion.Blazor.Navigation.49ei1ywsyy.bundle.scp.css';
@import '_content/Osirion.Blazor.Theming/Osirion.Blazor.Theming.gpq9xwvn9i.bundle.scp.css';
@import '_content/Osirion.Blazor/Osirion.Blazor.k7r5wqpu9z.bundle.scp.css';

/* /Components/Cards/FeatureCard.razor.rz.scp.css */
/* FeatureCard.razor.css — Enterprise feature card + WCAG 2.2 */

.feature-icon[b-8p19p3ebfm] {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #dcf4e6 0%, #bce9d1 100%);
    border: 1px solid rgba(0, 123, 49, 0.15);
    flex-shrink: 0;
    transition: background 0.22s ease;
}

.feature-icon svg[b-8p19p3ebfm] {
    width: 1.375rem;
    height: 1.375rem;
    color: #006b2b; /* #006b2b on #dcf4e6 ≈ 6.7:1 ✓ WCAG AA */
    flex-shrink: 0;
}

.feature-icon-small[b-8p19p3ebfm] {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.625rem;
}

.card-bg[b-8p19p3ebfm] {
    border-radius: 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: #ffffff;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s ease,
                border-color 0.22s ease;
}

.card-bg:hover[b-8p19p3ebfm],
.card-bg:focus-within[b-8p19p3ebfm] {
    transform: translateY(-6px);
    box-shadow: 0 24px 64px rgba(0, 123, 49, 0.12),
                0 6px 20px rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 123, 49, 0.20);
}

.card-bg:hover .feature-icon[b-8p19p3ebfm],
.card-bg:focus-within .feature-icon[b-8p19p3ebfm] {
    background: linear-gradient(145deg, #bce9d1 0%, #8dd8b1 100%);
}

.feature-card[b-8p19p3ebfm] {
    position: relative;
    height: 100%;
}

.bottom-stick[b-8p19p3ebfm] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem;
}

@media (min-width: 992px) {
    .bottom-stick[b-8p19p3ebfm] {
        padding: 2.5rem;
    }
}

.bottom-stick > :last-child[b-8p19p3ebfm] {
    margin-top: auto;
    margin-bottom: 0;
}
/* /Components/Layout/DemoLayout.razor.rz.scp.css */
#blazor-error-ui[b-p6ydbxihjq] {
    display: none;
}
/* /Components/Layout/Footer.razor.rz.scp.css */
/* Footer.razor.css — Enterprise spacing + WCAG 2.2 */

/* Footer links — WCAG 2.5.8 touch target */
[b-4jqak39kai] .osirion-footer-link,
[b-4jqak39kai] .osirion-footer a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    color: #6b6b6b; /* 4.58:1 on white ✓ WCAG AA */
    text-decoration: none;
    transition: color 0.18s ease;
}

[b-4jqak39kai] .osirion-footer-link:hover,
[b-4jqak39kai] .osirion-footer a:hover {
    color: #007b31;
}

[b-4jqak39kai] .osirion-footer a:focus-visible {
    outline: 3px solid #007b31;
    outline-offset: 3px;
    border-radius: 2px;
}

/* Section heading contrast */
[b-4jqak39kai] .osirion-footer-section-title {
    color: #1a1a1a; /* 19.4:1 ✓ WCAG AAA */
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

/* Bottom bar */
[b-4jqak39kai] .osirion-footer-bottom {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    font-size: 0.875rem;
    color: #6b6b6b;
}
/* /Components/Layout/LanguagePicker.razor.rz.scp.css */
.language-picker[b-t7tgubqp4j] {
    display: flex;
    justify-content: flex-end;
}

.language-picker-dropdown[b-t7tgubqp4j] {
    position: relative;
}

.language-picker-dropdown summary[b-t7tgubqp4j] {
    align-items: center;
    background: transparent;
    border: 1px solid rgba(0, 123, 49, 0.45);
    border-radius: 4px;
    color: #1a1a1a;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.5rem;
    min-height: 40px;
    padding: 0.5rem 0.75rem;
}

.language-picker-dropdown summary[b-t7tgubqp4j]::after {
    border-bottom: 0;
    border-left: 0.25rem solid transparent;
    border-right: 0.25rem solid transparent;
    border-top: 0.3rem solid currentColor;
    content: "";
}

.language-picker-dropdown summary[b-t7tgubqp4j]::-webkit-details-marker {
    display: none;
}

.language-picker-dropdown summary:focus-visible[b-t7tgubqp4j] {
    outline: 3px solid #007b31;
    outline-offset: 3px;
}

.language-picker-options[b-t7tgubqp4j] {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    display: grid;
    min-width: 12rem;
    padding: 0.25rem;
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    z-index: 10;
}

.language-picker-options a[b-t7tgubqp4j] {
    color: #383838;
    min-height: 36px;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
}

.language-picker-options a:hover[b-t7tgubqp4j],
.language-picker-options a:focus-visible[b-t7tgubqp4j],
.language-picker-options a.active[b-t7tgubqp4j] {
    background: #eaf7ef;
    color: #006b2a;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */

.main-container[b-rs65dsilko] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--osirion-container-xxl, 1320px);
    margin: 0 auto;
    padding: 0;
}

#blazor-error-ui[b-rs65dsilko] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-rs65dsilko] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* NavMenu.razor.css — WCAG 2.2 touch targets + focus rings */

/* WCAG 2.5.8: 44px touch targets for all nav links */
[b-79hqbxtyqf] .osirion-nav-link,
[b-79hqbxtyqf] .osirion-menu-link,
[b-79hqbxtyqf] [role="menuitem"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Logo link — accessible, no underline ring */
[b-79hqbxtyqf] .osirion-brand a:focus-visible {
    outline: 3px solid #007b31;
    outline-offset: 4px;
    border-radius: 4px;
}

/* Skip mobile-collapsed menu reveal is handled by Osirion.
   Ensure the mobile toggle button meets target size. */
[b-79hqbxtyqf] .osirion-toggle-btn,
[b-79hqbxtyqf] .navbar-toggler {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* CTA buttons in nav stay above 44px (from global btn rule) */
[b-79hqbxtyqf] .osirion-nav-cta {
    min-height: 44px;
}
/* /Components/Pages/Content/Blog.razor.rz.scp.css */
/* Blog.razor.css — Enterprise blog grid + WCAG 2.2 */

.blog-index[b-qpsi8b8hdp] {
    min-height: 100vh;
}

/* ── Hero ──────────────────────────────────────────── */
.hero-section[b-qpsi8b8hdp] {
    padding: 6rem 0 4rem;
    text-align: center;
    background: linear-gradient(180deg, #f4faf6 0%, #ffffff 100%);
}

.hero-section h1[b-qpsi8b8hdp] {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    color: #1a1a1a; /* 19.4:1 on white ✓ WCAG AAA */
}

.hero-section .lead[b-qpsi8b8hdp] {
    font-size: 1.125rem;
    color: #6b6b6b; /* 4.58:1 ✓ WCAG AA */
    max-width: 600px;
    margin: 0 auto;
}

/* ── Grid ──────────────────────────────────────────── */
.blog-list-section[b-qpsi8b8hdp] {
    padding: 4rem 0 6rem;
}

.blog-grid[b-qpsi8b8hdp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 2rem;
}

/* ── Cards ─────────────────────────────────────────── */
.blog-card[b-qpsi8b8hdp] {
    background: #ffffff;
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s ease,
                border-color 0.22s ease;
}

.blog-card:hover[b-qpsi8b8hdp],
.blog-card:focus-within[b-qpsi8b8hdp] {
    transform: translateY(-7px);
    box-shadow: 0 28px 72px rgba(0, 123, 49, 0.13),
                0 8px 24px rgba(0, 0, 0, 0.07);
    border-color: rgba(0, 123, 49, 0.18);
}

/* Card link — WCAG 2.4.1 / 2.4.3 */
.blog-card-link[b-qpsi8b8hdp] {
    text-decoration: none;
    color: inherit;
    display: block;
}

.blog-card-link:focus-visible[b-qpsi8b8hdp] {
    outline: 3px solid #007b31;
    outline-offset: 3px;
    border-radius: 1.25rem;
}

/* ── Image ─────────────────────────────────────────── */
.blog-card-image[b-qpsi8b8hdp] {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f4faf6;
}

.blog-card-image img[b-qpsi8b8hdp] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.blog-card:hover .blog-card-image img[b-qpsi8b8hdp] {
    transform: scale(1.04);
}

/* ── Content ───────────────────────────────────────── */
.blog-card-content[b-qpsi8b8hdp] {
    padding: 2rem !important;
}

@media (min-width: 992px) {
    .blog-card-content[b-qpsi8b8hdp] {
        padding: 2.25rem !important;
    }
}

.blog-card-category[b-qpsi8b8hdp] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #007b31; /* 5.5:1 on white ✓ WCAG AA */
    margin-bottom: 0.5rem;
    display: block;
}

.blog-card-title[b-qpsi8b8hdp] {
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.75rem;
    color: #1a1a1a; /* WCAG AAA */
}

.blog-card-excerpt[b-qpsi8b8hdp] {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #6b6b6b; /* 4.58:1 ✓ WCAG AA */
    margin-bottom: 1rem;
}

.blog-card-meta[b-qpsi8b8hdp] {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
    color: var(--neutral-foreground-hint);
}

.container[b-qpsi8b8hdp] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (max-width: 768px) {
    .hero-section[b-qpsi8b8hdp] {
        padding: 3rem 0 2rem;
    }

    .hero-section h1[b-qpsi8b8hdp] {
        font-size: 2rem;
    }

    .blog-grid[b-qpsi8b8hdp] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Demo.razor.rz.scp.css */
/* ============================================================
   /demo - fullscreen app-frame demo experience
   Minimal chrome (DemoLayout): slim top bar + shell filling the
   viewport + one-line disclaimer. Brand tokens copied from the
   home-page scoped set (they are page-scoped, not global).
   ============================================================ */

.demo-page[b-uvw0iai1sn] {
    --ink: #101613;
    --body: #4d5a53;
    --soft: #6b6b6b;
    --brand: #007b31;
    --vivid: #31a267;
    --tint-mint-2: #bce9d1;
    --line: #e6e9e6;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
    background:
        radial-gradient(120% 70% at 50% 0%, #e3f6ec 0%, rgba(255, 255, 255, 0) 70%),
        #f2f5f3;
    color: var(--ink);
}

/* ---------- slim top bar ---------- */

.demo-bar[b-uvw0iai1sn] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex: 0 0 auto;
    padding: .55rem 1.1rem;
    background: rgba(255, 255, 255, .88);
    border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.demo-brand[b-uvw0iai1sn] {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    flex: 0 0 auto;
    text-decoration: none;
}

.demo-brand img[b-uvw0iai1sn] {
    display: block;
    width: 216px;
    height: auto;
}

.demo-brand-tag[b-uvw0iai1sn] {
    padding: .18rem .6rem;
    background: var(--brand);
    border-radius: 99rem;
    color: #fff;
    font-size: .625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    white-space: nowrap;
}

/* ---------- product switcher ---------- */

.demo-tabs[b-uvw0iai1sn] {
    display: flex;
    flex-wrap: nowrap;
    gap: .45rem;
    margin-inline: auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.demo-tabs[b-uvw0iai1sn]::-webkit-scrollbar { display: none; }

.demo-tab[b-uvw0iai1sn] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex: 0 0 auto;
    padding: .5rem 1.05rem;
    background: rgba(255, 255, 255, .85);
    border: 1px solid var(--tint-mint-2);
    border-radius: 99rem;
    color: var(--ink);
    font-size: .8125rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .18s ease, color .18s ease;
}

.demo-tab:hover[b-uvw0iai1sn] {
    border-color: var(--brand);
    color: var(--brand);
    text-decoration: none;
}

.demo-tab svg[b-uvw0iai1sn] {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    color: var(--brand);
}

.demo-tab-active[b-uvw0iai1sn] {
    background: var(--brand);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px -6px rgba(0, 123, 49, .45);
}

.demo-tab-active:hover[b-uvw0iai1sn] { color: #fff; border-color: transparent; }

.demo-tab-active svg[b-uvw0iai1sn],
.demo-tab-active:hover svg[b-uvw0iai1sn] { color: #bce9d1; }

/* ---------- back link ---------- */

.demo-back[b-uvw0iai1sn] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex: 0 0 auto;
    padding: .5rem 1.05rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 99rem;
    color: var(--ink);
    font-size: .8125rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .18s ease, color .18s ease;
}

.demo-back:hover[b-uvw0iai1sn] {
    border-color: var(--vivid);
    color: var(--brand);
    text-decoration: none;
}

.demo-back svg[b-uvw0iai1sn] {
    width: .95rem;
    height: .95rem;
    flex: 0 0 auto;
}

/* ---------- shell + disclaimer ---------- */

.demo-shell[b-uvw0iai1sn] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    padding: .8rem 1.1rem 0;
}

.demo-disclaimer[b-uvw0iai1sn] {
    flex: 0 0 auto;
    margin: 0;
    padding: .45rem 1.1rem .55rem;
    color: var(--soft);
    font-size: .71rem;
    line-height: 1.45;
    text-align: center;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
    .demo-bar[b-uvw0iai1sn] { flex-wrap: wrap; gap: .6rem; padding: .5rem .8rem; }

    .demo-brand-tag[b-uvw0iai1sn] { display: none; }

    .demo-tabs[b-uvw0iai1sn] { order: 3; width: 100%; margin-inline: 0; }

    .demo-back[b-uvw0iai1sn] { margin-left: auto; }

    .demo-shell[b-uvw0iai1sn] { padding: .6rem .6rem 0; }

    .demo-disclaimer[b-uvw0iai1sn] { padding: .4rem .8rem .5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .demo-tab[b-uvw0iai1sn],
    .demo-back[b-uvw0iai1sn] { transition: none; }
}

@media (forced-colors: active) {
    .demo-bar[b-uvw0iai1sn],
    .demo-tab[b-uvw0iai1sn],
    .demo-back[b-uvw0iai1sn] {
        background: Canvas;
        color: CanvasText;
        border-color: ButtonText;
        box-shadow: none;
    }

    .demo-tab-active[b-uvw0iai1sn] {
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }

    .demo-brand-tag[b-uvw0iai1sn] {
        background: Highlight;
        color: HighlightText;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ============================================================
   Hexavera homepage - light, centered, brand-green system
   ============================================================ */

.home-page[b-ybt0mqwb2x] {
    --ink: #101613;
    --body: #4d5a53;
    --soft: #6b6b6b;
    --brand: #007b31;
    --brand-strong: #005624;
    --vivid: #31a267;
    --num: #007b31;
    /* all stops keep >=4.5:1 with white text (WCAG 1.4.3) */
    --grad-green: linear-gradient(150deg, #0c8244 0%, #007b31 55%, #00602a 100%);
    --tint-soft: #f0fbf4;
    --tint-mint: #dcf4e6;
    --tint-mint-2: #bce9d1;
    --line: #e6e9e6;
    --radius-lg: 1.75rem;
    --radius-md: 1.25rem;
    --shadow-card: 0 1px 2px rgba(12, 24, 18, .05), 0 16px 40px -12px rgba(12, 24, 18, .12);
    --shadow-float: 0 2px 6px rgba(12, 24, 18, .06), 0 24px 60px -16px rgba(12, 24, 18, .22);
    overflow: hidden;
    background: #fff;
    color: var(--ink);
    font-feature-settings: "ss01" on;
}

.home-page h1[b-ybt0mqwb2x],
.home-page h2[b-ybt0mqwb2x],
.home-page h3[b-ybt0mqwb2x] {
    margin-top: 0;
    color: var(--ink);
    letter-spacing: -.03em;
}

.home-page p[b-ybt0mqwb2x] {
    margin-top: 0;
}

.container-xxl[b-ybt0mqwb2x] {
    max-width: 82rem;
}

/* ---------- typographic accents ---------- */

.home-page .hl[b-ybt0mqwb2x],
.home-page .accent[b-ybt0mqwb2x] {
    color: var(--brand);
}

.home-page .accent[b-ybt0mqwb2x] {
    padding-inline: .08em;
    background: linear-gradient(180deg, transparent 64%, rgba(141, 216, 177, .38) 64%, rgba(141, 216, 177, .38) 94%, transparent 94%);
    border-radius: .12em;
}

.cta-arrow[b-ybt0mqwb2x] {
    display: inline-flex;
    margin-left: .55rem;
    transition: transform .18s ease;
}

.cta-arrow svg[b-ybt0mqwb2x] {
    width: 1.15rem;
    height: 1.15rem;
}

.hero-cta-primary:hover .cta-arrow[b-ybt0mqwb2x] {
    transform: translateX(5px);
}

/* ---------- shared section header ---------- */

.section-head[b-ybt0mqwb2x] {
    max-width: 52rem;
    margin: 0 auto 4rem;
    text-align: center;
}

.section-eyebrow[b-ybt0mqwb2x] {
    margin-bottom: 1.1rem;
    color: var(--brand);
    font-size: .95rem;
    font-weight: 700;
}

.section-head h2[b-ybt0mqwb2x],
.keep-inner h2[b-ybt0mqwb2x],
.vera-copy h2[b-ybt0mqwb2x],
.closing-inner h2[b-ybt0mqwb2x] {
    margin-bottom: 1.25rem;
    font-size: clamp(2.3rem, 4.6vw, 3.9rem);
    font-weight: 650;
    line-height: 1.04;
}

.section-lead[b-ybt0mqwb2x] {
    margin: 0 auto;
    max-width: 42rem;
    color: var(--body);
    font-size: 1.1rem;
    line-height: 1.65;
}

.section-foot[b-ybt0mqwb2x] {
    margin: 2.5rem auto 0;
    max-width: 46rem;
    color: var(--soft);
    font-size: .8rem;
    line-height: 1.6;
    text-align: center;
}

/* ============================================================
   Hero - white to soft mint gradient, centered, giant headline
   ============================================================ */

.home-hero[b-ybt0mqwb2x] {
    position: relative;
    padding: 6.75rem 0 0;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, #fff 94%),
        radial-gradient(115% 62% at 50% 70%, #bce9d1 0%, #e3f6ec 48%, rgba(255, 255, 255, 0) 100%),
        #fff;
}

.home-hero-inner[b-ybt0mqwb2x] {
    position: relative;
    z-index: 1;
    margin-inline: auto;
}

.hero-badge[b-ybt0mqwb2x] {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 2.25rem;
    padding: .5rem 1.1rem;
    background: #fff;
    border: 1px solid var(--tint-mint-2);
    border-radius: 99rem;
    color: var(--ink);
    font-size: .85rem;
    font-weight: 650;
}

.hero-badge-dot[b-ybt0mqwb2x] {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--vivid);
    animation: pulse-dot-b-ybt0mqwb2x 2.4s ease-out infinite;
    will-change: box-shadow;
}

@keyframes pulse-dot-b-ybt0mqwb2x {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 123, 49, .35);
    }
    70% {
        box-shadow: 0 0 0 9px rgba(0, 123, 49, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 123, 49, 0);
    }
}

.home-hero h1[b-ybt0mqwb2x] {
    margin: 0 auto 1.75rem;
    max-width: 58rem;
    padding-inline: 1rem;
    font-size: clamp(3rem, 6.2vw, 6.25rem);
    font-weight: 650;
    line-height: 1.01;
}

.home-hero h1 .hl[b-ybt0mqwb2x] {
    position: relative;
    z-index: 0;
    white-space: nowrap;
}

.home-hero h1 .hl[b-ybt0mqwb2x]::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 1%;
    right: 1%;
    bottom: .01em;
    height: .14em;
    background: linear-gradient(90deg, #56c188, #007b31);
    border-radius: 99rem;
    opacity: .45;
    transform: scaleX(0);
    transform-origin: left center;
    animation: underline-in-b-ybt0mqwb2x .9s cubic-bezier(.22, 1, .36, 1) .65s forwards;
}

@keyframes underline-in-b-ybt0mqwb2x {
    to { transform: scaleX(1); }
}

.hero-lead[b-ybt0mqwb2x] {
    margin: 0 auto 2.5rem;
    max-width: 46rem;
    color: var(--body);
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    line-height: 1.55;
}

.lead-rotator[b-ybt0mqwb2x] {
    display: inline-block;
    height: 1.55em;
    overflow: hidden;
    vertical-align: bottom;
}

.lead-word[b-ybt0mqwb2x] {
    display: block;
    height: 1.55em;
    line-height: 1.55;
    text-align: center;
    color: var(--brand);
    font-weight: 750;
    animation: lead-cycle-b-ybt0mqwb2x 9s cubic-bezier(.77, 0, .18, 1) infinite;
}

@keyframes lead-cycle-b-ybt0mqwb2x {
    0%, 17% { transform: translateY(0); }
    25%, 42% { transform: translateY(-1.55em); }
    50%, 67% { transform: translateY(-3.1em); }
    75%, 92% { transform: translateY(-4.65em); }
    100% { transform: translateY(-6.2em); }
}

.hero-cta[b-ybt0mqwb2x] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .9rem;
    margin-bottom: 2.25rem;
}

.hero-cta-primary[b-ybt0mqwb2x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.5rem;
    padding: .95rem 1.9rem;
    background: var(--grad-green);
    border-radius: 99rem;
    box-shadow: 0 10px 28px -8px rgba(0, 123, 49, .45);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.hero-cta-primary:hover[b-ybt0mqwb2x] {
    color: #fff;
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -10px rgba(0, 123, 49, .55);
}

.hero-cta-secondary[b-ybt0mqwb2x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.5rem;
    padding: .95rem 1.9rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 99rem;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease;
    animation: pulse-dot-b-ybt0mqwb2x 2.4s ease-out infinite;
    will-change: box-shadow;
}

.hero-cta-secondary:hover[b-ybt0mqwb2x] {
    border-color: var(--vivid);
    color: var(--brand);
    transform: translateY(-2px);
}

.hero-trust[b-ybt0mqwb2x] {
    margin: 0 auto;
    color: var(--body);
    font-size: .95rem;
}

.hero-trust strong[b-ybt0mqwb2x] {
    color: var(--brand);
    font-weight: 750;
}

/* ---------- capability pills + product stage ---------- */

.hero-stage[b-ybt0mqwb2x] {
    position: relative;
    z-index: 1;
    padding-top: 4.5rem;
}

.hero-tabs[b-ybt0mqwb2x] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem;
    margin-bottom: 3rem;
}

.hero-tab[b-ybt0mqwb2x] {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1.5rem;
    background: rgba(255, 255, 255, .85);
    border: 1px solid var(--tint-mint-2);
    border-radius: 99rem;
    color: var(--ink);
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: transform .18s ease, border-color .18s ease, color .18s ease;
}

.hero-tab:hover[b-ybt0mqwb2x] {
    transform: translateY(-2px);
    border-color: var(--brand);
    color: var(--brand);
    text-decoration: none;
}

.hero-tab svg[b-ybt0mqwb2x] {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    color: var(--brand);
}

.hero-tab-active[b-ybt0mqwb2x] {
    background: var(--brand);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 24px -8px rgba(0, 123, 49, .45);
}

.hero-tab-active:hover[b-ybt0mqwb2x] {
    color: #fff;
    border-color: transparent;
}

.hero-tab-active svg[b-ybt0mqwb2x],
.hero-tab-active:hover svg[b-ybt0mqwb2x] {
    color: #bce9d1;
}

.hero-shot[b-ybt0mqwb2x] {
    position: relative;
}

.hero-shot-frame[b-ybt0mqwb2x] {
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: #fff;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, .6), 0 30px 80px -20px rgba(12, 35, 28, .35);
    border: 1px solid rgba(255, 255, 255, .8);
    border-bottom: 0;
}

.hero-shot-bar[b-ybt0mqwb2x] {
    display: flex;
    gap: .45rem;
    padding: .9rem 1.25rem;
    background: #f4f6f4;
    border-bottom: 1px solid var(--line);
}

.hero-shot-bar span[b-ybt0mqwb2x] {
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: #dde2dd;
}

.hero-shot-frame img[b-ybt0mqwb2x] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    object-position: top;
}

.hero-float[b-ybt0mqwb2x] {
    position: absolute;
    display: grid;
    gap: .3rem;
    width: 16.5rem;
    padding: 1.15rem 1.3rem;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-float);
    text-align: left;
    animation: floaty-b-ybt0mqwb2x 6s ease-in-out infinite;
}

@keyframes floaty-b-ybt0mqwb2x {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -12px; }
}

.hero-float small[b-ybt0mqwb2x] {
    color: var(--brand);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hero-float strong[b-ybt0mqwb2x] {
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.35;
}

.hero-float span[b-ybt0mqwb2x] {
    color: var(--soft);
    font-size: .8rem;
    line-height: 1.45;
}

.hero-float-left[b-ybt0mqwb2x] {
    top: 18%;
    left: max(1rem, calc((100% - 82rem) / 2 - 2.5rem));
}

.hero-float-right[b-ybt0mqwb2x] {
    top: 42%;
    right: max(1rem, calc((100% - 82rem) / 2 - 2.5rem));
    animation-duration: 7.5s;
    animation-delay: 1.1s;
}

/* ============================================================
   Platform - sources to Hexavera core to leadership output
   ============================================================ */

.home-platform[b-ybt0mqwb2x] {
    padding: 8rem 0 7rem;
    background: #fff;
}

.platform-flow[b-ybt0mqwb2x] {
    display: grid;
    grid-template-columns: 1.05fr auto 1fr auto 1.05fr;
    align-items: center;
    gap: 1.25rem;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.platform-col[b-ybt0mqwb2x] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-self: stretch;
    padding: 1.75rem;
    background: var(--tint-soft);
    border: 1px solid var(--tint-mint);
    border-radius: var(--radius-md);
}

.platform-link[b-ybt0mqwb2x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    background: var(--tint-mint);
    border-radius: 50%;
    color: var(--brand);
}

.platform-link svg[b-ybt0mqwb2x] {
    width: 1.1rem;
    height: 1.1rem;
}

.platform-col-label[b-ybt0mqwb2x] {
    color: var(--body);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.platform-chips[b-ybt0mqwb2x],
.platform-outputs[b-ybt0mqwb2x] {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: .55rem;
}

.platform-chips a[b-ybt0mqwb2x],
.platform-outputs a[b-ybt0mqwb2x] {
    padding: .6rem 1rem;
    background: #fff;
    border: 1px solid var(--tint-mint-2);
    border-radius: .65rem;
    color: var(--ink);
    font-size: .85rem;
    font-weight: 650;
    text-decoration: none;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.platform-chips a:hover[b-ybt0mqwb2x],
.platform-outputs a:hover[b-ybt0mqwb2x] {
    background: var(--tint-soft);
    border-color: var(--brand);
    color: var(--brand-strong);
    text-decoration: none;
}

.platform-outputs a[b-ybt0mqwb2x] {
    font-size: .95rem;
}

.platform-core[b-ybt0mqwb2x] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .4rem;
    align-self: stretch;
    padding: 2.25rem 2rem;
    background: #fff;
    border: 1.5px solid var(--tint-mint-2);
    border-radius: var(--radius-md);
    box-shadow: 0 18px 44px -14px rgba(0, 86, 36, .22);
    text-align: center;
}

.platform-core[b-ybt0mqwb2x]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1.5rem;
    right: 1.5rem;
    height: 4px;
    background: var(--grad-green);
    border-radius: 0 0 99rem 99rem;
}

.platform-core-logo[b-ybt0mqwb2x] {
    width: min(100%, 13rem);
    height: auto;
    margin: 0 auto .9rem;
}

.platform-core em[b-ybt0mqwb2x] {
    color: var(--brand);
    font-size: .95rem;
    font-style: normal;
    font-weight: 700;
}

.platform-core p[b-ybt0mqwb2x] {
    margin: .75rem 0 0;
    color: var(--body);
    font-size: .88rem;
    line-height: 1.55;
}

/* ============================================================
   Keep - "Your systems stay" full-bleed tint band, viewport height
   ============================================================ */

.home-keep[b-ybt0mqwb2x] {
    display: flex;
    align-items: center;
    min-height: min(100vh, 58rem);
    padding: 6rem 0;
    background: linear-gradient(180deg, #fff 0%, var(--tint-soft) 18%, var(--tint-mint) 52%, var(--tint-soft) 86%, #fff 100%);
}

.keep-inner[b-ybt0mqwb2x] {
    text-align: center;
}

.keep-inner .section-eyebrow[b-ybt0mqwb2x],
.keep-inner h2[b-ybt0mqwb2x],
.keep-note[b-ybt0mqwb2x] {
    padding-inline: 1.5rem;
}

.keep-inner .section-lead[b-ybt0mqwb2x] {
    margin-bottom: 2.75rem;
    padding-inline: 1.5rem;
}

.keep-marquee[b-ybt0mqwb2x] {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.keep-marquee-track[b-ybt0mqwb2x] {
    display: flex;
    width: max-content;
    animation: marquee-b-ybt0mqwb2x 30s linear infinite;
}

.keep-marquee:hover .keep-marquee-track[b-ybt0mqwb2x],
.keep-marquee:focus-within .keep-marquee-track[b-ybt0mqwb2x] {
    animation-play-state: paused;
}

@keyframes marquee-b-ybt0mqwb2x {
    to { transform: translateX(-50%); }
}

.keep-marquee-track a[b-ybt0mqwb2x] {
    flex: 0 0 auto;
    margin-right: .8rem;
    padding: .9rem 1.6rem;
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--tint-mint-2);
    border-radius: 99rem;
    color: var(--ink);
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform .18s ease, color .18s ease, border-color .18s ease;
}

.keep-marquee-track a:hover[b-ybt0mqwb2x] {
    transform: translateY(-3px);
    border-color: var(--brand);
    color: var(--brand-strong);
    text-decoration: none;
}

.keep-note[b-ybt0mqwb2x] {
    margin: 2.25rem auto 0;
    color: var(--body);
    font-size: .8rem;
}

/* ============================================================
   Method - five numbered cards
   ============================================================ */

.home-method[b-ybt0mqwb2x] {
    padding: 7rem 0;
    background: #fff;
}

.method-grid[b-ybt0mqwb2x] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

.method-card[b-ybt0mqwb2x] {
    position: relative;
    overflow: hidden;
    padding: 2rem 1.5rem 1.9rem;
    background: #fafbfa;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.method-card:hover[b-ybt0mqwb2x] {
    transform: translateY(-5px);
    border-color: rgba(0, 123, 49, .3);
    box-shadow: var(--shadow-card);
}

.method-num[b-ybt0mqwb2x] {
    position: absolute;
    top: -.9rem;
    right: .35rem;
    color: var(--tint-mint-2);
    font-size: 5.25rem;
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: 1;
    transition: color .25s ease;
    pointer-events: none;
}

/* Watermark digits live in generated content: pure decoration, exempt from text contrast */
.method-num[b-ybt0mqwb2x]::after {
    content: attr(data-num);
}

.method-card:hover .method-num[b-ybt0mqwb2x] {
    color: #8dd8b1;
}

.method-card h3[b-ybt0mqwb2x] {
    margin: 2.9rem 0 .6rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.method-card p[b-ybt0mqwb2x] {
    margin: 0;
    color: var(--body);
    font-size: .88rem;
    line-height: 1.6;
}

/* ============================================================
   Outcomes - four executive cards
   ============================================================ */

.home-outcomes[b-ybt0mqwb2x] {
    padding: 7rem 0;
    background: linear-gradient(180deg, #fff 0%, var(--tint-soft) 22%, var(--tint-soft) 100%);
}

.outcome-grid[b-ybt0mqwb2x] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.1rem;
}

.outcome-card[b-ybt0mqwb2x] {
    display: flex;
    flex-direction: column;
    min-height: 17rem;
    padding: 1.9rem 1.7rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.outcome-card:hover[b-ybt0mqwb2x] {
    transform: translateY(-6px);
    border-color: rgba(0, 123, 49, .3);
    box-shadow: var(--shadow-card);
}

.outcome-role[b-ybt0mqwb2x] {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 1.4rem;
    padding: .4rem .95rem;
    background: var(--tint-mint);
    border-radius: 99rem;
    color: var(--brand-strong);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .05em;
}

.outcome-card h3[b-ybt0mqwb2x] {
    margin-bottom: .75rem;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
}

.outcome-card p[b-ybt0mqwb2x] {
    margin: 0;
    color: var(--body);
    font-size: .9rem;
    line-height: 1.6;
}

/* ============================================================
   Research - full-bleed deeper mint band with giant green numerals
   ============================================================ */

.home-research[b-ybt0mqwb2x] {
    padding: 7rem 0;
    background: linear-gradient(180deg, var(--tint-soft) 0%, var(--tint-mint) 34%, var(--tint-mint-2) 62%, var(--tint-soft) 88%, #fff 100%);
}

.home-research .section-head[b-ybt0mqwb2x] {
    margin-bottom: 3.5rem;
}

.metric-grid[b-ybt0mqwb2x] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    max-width: 72rem;
    margin: 0 auto;
}

.metric-card[b-ybt0mqwb2x] {
    padding: 2rem 1.6rem;
    background: #fff;
    border: 1px solid rgba(0, 123, 49, .16);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(12, 24, 18, .04), 0 12px 32px -14px rgba(12, 60, 40, .14);
    transition: transform .22s ease, box-shadow .22s ease;
}

.metric-card:hover[b-ybt0mqwb2x] {
    transform: translateY(-6px);
    box-shadow: 0 2px 4px rgba(12, 24, 18, .05), 0 24px 48px -16px rgba(12, 96, 64, .22);
}

.metric-card strong[b-ybt0mqwb2x] {
    display: block;
    margin-bottom: .9rem;
    color: var(--num);
    font-size: clamp(3.2rem, 5vw, 4.6rem);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.metric-card strong i[b-ybt0mqwb2x] {
    color: #31a267;
    font-style: normal;
}

.metric-card span[b-ybt0mqwb2x] {
    display: block;
    color: var(--ink);
    font-size: .95rem;
    font-weight: 650;
    line-height: 1.4;
}

.metric-card small[b-ybt0mqwb2x] {
    display: block;
    margin-top: .9rem;
    color: var(--soft);
    font-size: .74rem;
    line-height: 1.5;
}

.research-disclaimer[b-ybt0mqwb2x] {
    max-width: 52rem;
    margin: 2.5rem auto 0;
    color: var(--body);
    font-size: .74rem;
    line-height: 1.6;
    text-align: center;
}

/* ============================================================
   Products - three rounded product cards
   ============================================================ */

.home-products[b-ybt0mqwb2x] {
    padding: 7rem 0;
    background: #fff;
}

.product-grid[b-ybt0mqwb2x] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
}

.product-card[b-ybt0mqwb2x] {
    display: flex;
    flex-direction: column;
    min-height: 19rem;
    padding: 2.1rem 1.9rem;
    background: var(--tint-soft);
    border: 1px solid var(--tint-mint);
    border-radius: var(--radius-lg);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.product-card:hover[b-ybt0mqwb2x] {
    transform: translateY(-6px);
    border-color: rgba(0, 123, 49, .35);
    box-shadow: var(--shadow-card);
}

.product-icon[b-ybt0mqwb2x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    margin-bottom: 1.6rem;
    background: var(--grad-green);
    border-radius: 1.05rem;
    box-shadow: 0 8px 20px -6px rgba(0, 123, 49, .4);
    color: #fff;
    transition: transform .22s ease;
}

.product-icon svg[b-ybt0mqwb2x] {
    width: 1.6rem;
    height: 1.6rem;
}

.product-card:hover .product-icon[b-ybt0mqwb2x] {
    transform: scale(1.06);
}

.product-card h3[b-ybt0mqwb2x] {
    margin-bottom: .7rem;
    font-size: 1.5rem;
    font-weight: 700;
}

.product-card p[b-ybt0mqwb2x] {
    margin-bottom: 1.5rem;
    color: var(--body);
    font-size: .92rem;
    line-height: 1.6;
}

.product-card a[b-ybt0mqwb2x] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: auto;
    color: var(--brand);
    font-size: .95rem;
    font-weight: 750;
    text-decoration: none;
}

.product-card a span[b-ybt0mqwb2x] {
    display: inline-flex;
    transition: transform .18s ease;
}

.product-card a span svg[b-ybt0mqwb2x] {
    width: 1rem;
    height: 1rem;
}

.product-card a:hover[b-ybt0mqwb2x] {
    color: var(--brand-strong);
}

.product-card a:hover span[b-ybt0mqwb2x] {
    transform: translateX(4px);
}

/* ============================================================
   Vera AI - full-bleed mint band, viewport height
   ============================================================ */

.home-vera[b-ybt0mqwb2x] {
    display: flex;
    align-items: center;
    min-height: min(100vh, 56rem);
    padding: 6rem 0;
    background: linear-gradient(180deg, #fff 0%, var(--tint-mint) 20%, var(--tint-mint) 80%, #fff 100%);
}

.vera-layout[b-ybt0mqwb2x] {
    display: grid;
    grid-template-columns: 0.72fr 1.28fr;
    align-items: center;
    gap: clamp(2rem, 4vw, 3.5rem);
}

.vera-brand[b-ybt0mqwb2x] {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1.4rem;
    color: var(--brand);
    font-size: 1rem;
    font-weight: 800;
}

.vera-brand img[b-ybt0mqwb2x] {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
}

.vera-copy h2[b-ybt0mqwb2x] {
    font-size: clamp(2rem, 3.4vw, 2.9rem);
}

.vera-copy .section-lead[b-ybt0mqwb2x] {
    margin: 0 0 1.4rem;
    max-width: none;
}

.vera-note[b-ybt0mqwb2x] {
    margin: 0;
    color: var(--soft);
    font-size: .78rem;
}

.vera-demo[b-ybt0mqwb2x] {
    min-width: 0;
}

/* Interactive Vera workspace embedded in the mint band */
.vera-demo[b-ybt0mqwb2x]  .vcs-shell {
    grid-template-columns: 210px minmax(0, 1fr);
    height: 600px;
    max-width: none;
    box-shadow: 0 30px 74px -26px rgba(0, 86, 36, 0.32), 0 6px 18px -8px rgba(12, 24, 18, 0.12);
}

/* ============================================================
   Industries - editorial ruled list
   ============================================================ */

.home-industries[b-ybt0mqwb2x] {
    padding: 7rem 0;
    background: #fff;
}

.home-industries .section-head[b-ybt0mqwb2x] {
    margin-bottom: 2.75rem;
}

.industry-grid[b-ybt0mqwb2x] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 2.75rem;
    max-width: 64rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.industry-grid li[b-ybt0mqwb2x] {
    border-bottom: 1px solid var(--line);
}

.industry-grid a[b-ybt0mqwb2x] {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1.05rem .25rem;
    color: var(--ink);
    font-size: .98rem;
    font-weight: 650;
    text-decoration: none;
    transition: color .18s ease;
}

.industry-grid a:hover[b-ybt0mqwb2x] {
    color: var(--brand);
    text-decoration: none;
}

.industry-grid svg[b-ybt0mqwb2x] {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    color: var(--brand);
}

/* ============================================================
   Closing - contained rounded CTA panel
   ============================================================ */

.home-closing[b-ybt0mqwb2x] {
    padding: 0 0 7rem;
    background: #fff;
}

.closing-inner[b-ybt0mqwb2x] {
    position: relative;
    overflow: hidden;
    padding: clamp(3.5rem, 7vw, 6.5rem) clamp(1.5rem, 5vw, 4rem);
    background: var(--grad-green);
    border-radius: 2.25rem;
    box-shadow: 0 32px 80px -24px rgba(0, 86, 36, .5);
    text-align: center;
}

.closing-inner[b-ybt0mqwb2x]::before,
.closing-inner[b-ybt0mqwb2x]::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .18);
    pointer-events: none;
}

.closing-inner[b-ybt0mqwb2x]::before {
    width: 34rem;
    height: 34rem;
    left: -12rem;
    top: -16rem;
    animation: floaty-b-ybt0mqwb2x 9s ease-in-out infinite;
}

.closing-inner[b-ybt0mqwb2x]::after {
    width: 26rem;
    height: 26rem;
    right: -10rem;
    bottom: -14rem;
    animation: floaty-b-ybt0mqwb2x 11s ease-in-out 1.5s infinite;
}

.closing-inner h2[b-ybt0mqwb2x] {
    margin-bottom: 1.25rem;
    color: #fff;
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
}

.closing-inner h2 .accent[b-ybt0mqwb2x] {
    color: #dcf4e6;
    background: none;
}

.closing-inner p[b-ybt0mqwb2x] {
    margin: 0 auto 2.5rem;
    max-width: 40rem;
    color: rgba(255, 255, 255, .88);
    font-size: 1.05rem;
    line-height: 1.65;
}

.closing-cta[b-ybt0mqwb2x] {
    position: relative;
    background: #fff;
    color: var(--ink);
}

.closing-cta:hover[b-ybt0mqwb2x] {
    background: var(--tint-mint);
    color: var(--ink);
    transform: translateY(-2px);
}

/* ---------- CMS sections: continue the alternation after the CTA ---------- */

.home-page[b-ybt0mqwb2x]  #section-insights {
    background: #fff;
}

.home-page[b-ybt0mqwb2x]  #section-research {
    background: linear-gradient(180deg, #fff 0%, var(--tint-soft) 24%, var(--tint-soft) 100%);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1199.98px) {
    .hero-float[b-ybt0mqwb2x] { display: none; }
}

@media (max-width: 991.98px) {
    .home-hero[b-ybt0mqwb2x] { padding-top: 5.5rem; }
    .platform-flow[b-ybt0mqwb2x] { grid-template-columns: 1fr; }
    .platform-link[b-ybt0mqwb2x] { justify-self: center; transform: rotate(90deg); }
    .method-grid[b-ybt0mqwb2x] { grid-template-columns: repeat(2, 1fr); }
    .method-card:last-child[b-ybt0mqwb2x] { grid-column: 1 / -1; }
    .outcome-grid[b-ybt0mqwb2x],
    .metric-grid[b-ybt0mqwb2x] { grid-template-columns: repeat(2, 1fr); }
    .industry-grid[b-ybt0mqwb2x] { grid-template-columns: repeat(2, 1fr); }
    .product-grid[b-ybt0mqwb2x] { grid-template-columns: 1fr; }
    .product-card[b-ybt0mqwb2x] { min-height: 0; }
    .vera-layout[b-ybt0mqwb2x] { grid-template-columns: 1fr; }
    .home-keep[b-ybt0mqwb2x],
    .home-vera[b-ybt0mqwb2x] { min-height: 0; }
    .home-platform[b-ybt0mqwb2x] { padding: 6rem 0 5rem; }
    .home-keep[b-ybt0mqwb2x],
    .home-method[b-ybt0mqwb2x],
    .home-outcomes[b-ybt0mqwb2x],
    .home-research[b-ybt0mqwb2x],
    .home-products[b-ybt0mqwb2x],
    .home-vera[b-ybt0mqwb2x],
    .home-industries[b-ybt0mqwb2x] { padding-top: 4.5rem; padding-bottom: 4.5rem; }
    .home-closing[b-ybt0mqwb2x] { padding-bottom: 5rem; }
}

@media (max-width: 640px) {
    .home-hero[b-ybt0mqwb2x] { padding-top: 4.5rem; }
    .home-hero h1[b-ybt0mqwb2x] { font-size: clamp(2.7rem, 11.5vw, 3.4rem); }
    .hero-break[b-ybt0mqwb2x] { display: none; }
    .hero-cta[b-ybt0mqwb2x] { flex-direction: column; align-items: stretch; }
    .hero-cta-primary[b-ybt0mqwb2x],
    .hero-cta-secondary[b-ybt0mqwb2x] { width: 100%; }
    .hero-tabs[b-ybt0mqwb2x] { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: .5rem; }
    .hero-tabs[b-ybt0mqwb2x]::-webkit-scrollbar { display: none; }
    .hero-tab[b-ybt0mqwb2x] { flex: 0 0 auto; }
    .hero-shot-frame img[b-ybt0mqwb2x] { aspect-ratio: 4 / 3; }
    .method-grid[b-ybt0mqwb2x],
    .outcome-grid[b-ybt0mqwb2x],
    .metric-grid[b-ybt0mqwb2x] { grid-template-columns: 1fr; }
    .industry-grid[b-ybt0mqwb2x] { grid-template-columns: 1fr; }
    .outcome-card[b-ybt0mqwb2x] { min-height: 0; }
    .closing-inner[b-ybt0mqwb2x] { border-radius: 1.5rem; }
    .section-head[b-ybt0mqwb2x] { margin-bottom: 2.75rem; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .lead-word[b-ybt0mqwb2x],
    .keep-marquee-track[b-ybt0mqwb2x],
    .hero-float[b-ybt0mqwb2x],
    .hero-badge-dot[b-ybt0mqwb2x],
    .closing-inner[b-ybt0mqwb2x]::before,
    .closing-inner[b-ybt0mqwb2x]::after {
        animation: none !important;
    }

    .home-hero h1 .hl[b-ybt0mqwb2x]::after {
        animation: none !important;
        transform: scaleX(1);
    }

    .keep-marquee-track[b-ybt0mqwb2x] {
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
        row-gap: .8rem;
        padding-inline: 1.5rem;
    }
}
/* /Components/Pages/Modules/Modules.razor.rz.scp.css */
/* Modules.razor.css — Enterprise module cards + WCAG 2.2 */

/* ── Core module cards ────────────────────────────────── */
#section-core-modules .card[b-bjxi03wc4r] {
    border-radius: 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s ease,
                border-color 0.22s ease;
    position: relative;
    overflow: hidden;
}

/* Left accent bar — appears on hover (brand signal beyond colour) */
#section-core-modules .card[b-bjxi03wc4r]::after {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #56c188 0%, #007b31 100%);
    border-radius: 4px 0 0 4px;
    opacity: 0;
    transition: opacity 0.22s ease;
}

#section-core-modules .card:hover[b-bjxi03wc4r],
#section-core-modules .card:focus-within[b-bjxi03wc4r] {
    transform: translateY(-7px);
    box-shadow: 0 28px 72px rgba(0, 123, 49, 0.14),
                0 8px 24px rgba(0, 0, 0, 0.07);
    border-color: rgba(0, 123, 49, 0.20);
}

#section-core-modules .card:hover[b-bjxi03wc4r]::after,
#section-core-modules .card:focus-within[b-bjxi03wc4r]::after {
    opacity: 1;
}

#section-core-modules .card-body[b-bjxi03wc4r] {
    padding: 2.25rem !important;
}

@media (min-width: 992px) {
    #section-core-modules .card-body[b-bjxi03wc4r] {
        padding: 2.75rem !important;
    }
}

/* Icon badge — larger, rounded, gradient bg */
#section-core-modules .card-body .badge[b-bjxi03wc4r] {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    padding: 0;
    background: linear-gradient(145deg, #dcf4e6 0%, #bce9d1 100%) !important;
    border: 1px solid rgba(0, 123, 49, 0.15);
    transition: background 0.22s ease;
}

#section-core-modules .card:hover .badge[b-bjxi03wc4r],
#section-core-modules .card:focus-within .badge[b-bjxi03wc4r] {
    background: linear-gradient(145deg, #bce9d1 0%, #8dd8b1 100%) !important;
}

#section-core-modules .card-body .badge svg[b-bjxi03wc4r] {
    width: 1.375rem;
    height: 1.375rem;
    color: #006b2b;
    flex-shrink: 0;
}

/* ── AI Modules highlight (Vera / ML) ─────────────────── */
#section-ai-modules .card[b-bjxi03wc4r],
#section-intelligence-modules .card[b-bjxi03wc4r] {
    border-radius: 1.25rem;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease;
}

#section-ai-modules .card:hover[b-bjxi03wc4r],
#section-ai-modules .card:focus-within[b-bjxi03wc4r],
#section-intelligence-modules .card:hover[b-bjxi03wc4r],
#section-intelligence-modules .card:focus-within[b-bjxi03wc4r] {
    transform: translateY(-7px);
    box-shadow: 0 28px 72px rgba(0,123,49,0.14), 0 8px 24px rgba(0,0,0,0.07);
}

/* ── Button inside card ─────────────────────────────── */
#section-core-modules .btn[b-bjxi03wc4r] {
    margin-top: auto;
    align-self: flex-start;
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 767.98px) {
    #section-core-modules .card-body[b-bjxi03wc4r] {
        padding: 1.75rem !important;
    }
}
/* /Components/Pages/Modules/ModuleVera.razor.rz.scp.css */
/* ModuleVera.razor.css — Full page styles for the Vera AI module page */

/* ═══════════════════════════════════════════════════════
   SECTION 1 — Hero
═══════════════════════════════════════════════════════ */

.vp-hero[b-3yq2qoutni] {
    background: linear-gradient(160deg, #e8f5ee 0%, #eaf4ee 30%, #f4faf6 65%, #ffffff 100%);
    padding: 7rem 0 6rem;
    position: relative;
    overflow: hidden;
}

.vp-hero[b-3yq2qoutni]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(0, 123, 49, 0.05) 1px, transparent 0);
    background-size: 24px 24px;
    pointer-events: none;
}

/* Icon ring for light hero */
.vp-hero-logo-ring[b-3yq2qoutni] {
    width: 96px;
    height: 96px;
    border-radius: 1.5rem;
    background: linear-gradient(135deg, #007b31, #31a267);
    box-shadow: 0 8px 32px rgba(0, 123, 49, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.vp-hero-kicker[b-3yq2qoutni] {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 123, 49, 0.08);
    border: 1px solid rgba(0, 123, 49, 0.22);
    color: #005624;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.875rem;
    border-radius: 100px;
}

.vp-metric-pills[b-3yq2qoutni] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.vp-metric-pill[b-3yq2qoutni] {
    background: rgba(0, 123, 49, 0.07);
    border: 1px solid rgba(0, 123, 49, 0.20);
    color: #005624;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 100px;
}

/* Hero conversation wrapper — makes VeraConversation fill the column */
.vp-hero-shell[b-3yq2qoutni]  .mod-hero-grid {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    margin-bottom: 3rem;
}

.vp-hero-shell[b-3yq2qoutni]  .mod-hero h1 {
    font-size: clamp(2.75rem, 3.8vw, 3.45rem);
}

.vp-hero-shell[b-3yq2qoutni]  .vcs-shell {
    grid-template-columns: 210px minmax(0, 1fr);
    height: 600px;
    max-width: none;
    box-shadow: 0 34px 80px -28px rgba(0, 45, 20, 0.34), 0 8px 22px -10px rgba(0, 45, 20, 0.16);
}

.vp-hero-shell[b-3yq2qoutni]  .metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 820px;
    margin-inline: auto;
}

/* Full-width interactive workspace on the dark evidence stage */
.vp-context-stage[b-3yq2qoutni] {
    max-width: 1060px;
    margin: 0 auto;
}

.vp-context-stage[b-3yq2qoutni]  .vcs-shell {
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.55), 0 10px 28px -12px rgba(0, 0, 0, 0.35);
}

@media (min-width: 992px) {
    .vp-metric-pills[b-3yq2qoutni] {
        justify-content: flex-start;
    }
}

@media (max-width: 991.98px) {
    .vp-hero-shell[b-3yq2qoutni]  .mod-hero-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .vp-hero-shell[b-3yq2qoutni]  .vcs-shell {
        grid-template-columns: 220px minmax(0, 1fr);
        max-width: 860px;
    }
}

@media (max-width: 640px) {
    .vp-hero-shell[b-3yq2qoutni]  .vcs-shell,
    .vp-context-stage[b-3yq2qoutni]  .vcs-shell {
        grid-template-columns: minmax(0, 1fr);
        height: 540px;
    }

    .vp-hero-shell[b-3yq2qoutni]  .metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .vp-hero-shell[b-3yq2qoutni]  .metric-card {
        padding: 1rem 0.65rem;
    }

    .vp-hero-shell[b-3yq2qoutni]  .metric-card strong {
        margin-bottom: 0.45rem;
        font-size: 1.55rem;
    }

    .vp-hero-shell[b-3yq2qoutni]  .metric-card span {
        font-size: 0.6875rem;
        line-height: 1.3;
    }
}

/* ═══════════════════════════════════════════════════════
   SECTION 2 — Outcome Metrics
═══════════════════════════════════════════════════════ */

.vp-outcomes-section[b-3yq2qoutni] {
    padding: 5rem 0;
    background: #f4faf6;
}

.vp-outcome-card[b-3yq2qoutni] {
    background: #ffffff;
    border-radius: 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 2.5rem 2rem;
    height: 100%;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s ease,
                border-color 0.22s ease;
}

.vp-outcome-card:hover[b-3yq2qoutni] {
    transform: translateY(-6px);
    box-shadow: 0 24px 64px rgba(0, 123, 49, 0.10), 0 6px 20px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 123, 49, 0.18);
}

.vp-outcome-number[b-3yq2qoutni] {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #007b31, #31a267);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.vp-outcome-label[b-3yq2qoutni] {
    font-size: 1rem;
    font-weight: 700;
    color: #1a2e1a;
    margin-bottom: 0.625rem;
}

.vp-outcome-sub[b-3yq2qoutni] {
    font-size: 0.875rem;
    color: #6b6b6b;
    line-height: 1.6;
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════
   SECTION 3 — Agents (dark, inherits vera-feature-section)
═══════════════════════════════════════════════════════ */

.vp-agents-section[b-3yq2qoutni] {
    padding: 6rem 0;
}

.vp-agents-kicker[b-3yq2qoutni] {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 123, 49, 0.18);
    border: 1px solid rgba(0, 123, 49, 0.32);
    color: #56c188;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.875rem;
    border-radius: 100px;
}

/* Agent domain badge — right-aligned */
.vp-agent-badge[b-3yq2qoutni] {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 100px;
}

.vp-agent-ops[b-3yq2qoutni] {
    background: rgba(37, 99, 235, 0.2);
    border: 1px solid rgba(37, 99, 235, 0.4);
    color: #93c5fd;
}

.vp-agent-hr[b-3yq2qoutni] {
    background: rgba(0, 123, 49, 0.2);
    border: 1px solid rgba(0, 123, 49, 0.4);
    color: #86efac;
}

.vp-agent-fin[b-3yq2qoutni] {
    background: rgba(180, 120, 0, 0.2);
    border: 1px solid rgba(180, 120, 0, 0.4);
    color: #fcd34d;
}

.vp-agent-exec[b-3yq2qoutni] {
    background: rgba(99, 44, 235, 0.2);
    border: 1px solid rgba(99, 44, 235, 0.4);
    color: #c4b5fd;
}

.vp-agent-compliance[b-3yq2qoutni] {
    background: rgba(234, 88, 12, 0.2);
    border: 1px solid rgba(234, 88, 12, 0.4);
    color: #fdba74;
}

.vp-agent-employee[b-3yq2qoutni] {
    background: rgba(0, 148, 133, 0.2);
    border: 1px solid rgba(0, 148, 133, 0.4);
    color: #5eead4;
}

/* MCP server subtitle — WCAG AA on the dark agents band (≈8:1) */
.vp-mcp-subtitle[b-3yq2qoutni] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.62);
    font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
}

/* Capability list inside dark glass agent cards */
.vp-capability-list[b-3yq2qoutni] {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-bottom: 0;
    padding: 1rem 0 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vera-card-agent[b-3yq2qoutni] {
    margin: 0;
}

.vp-cap-item[b-3yq2qoutni] {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.75); /* ≈11:1 on dark band */
    padding-left: 1.25rem;
    position: relative;
    line-height: 1.55;
}

.vp-cap-item[b-3yq2qoutni]::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #56c188; /* ≈7:1 on dark band */
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════
   SECTION 4 — Architecture Pipeline
═══════════════════════════════════════════════════════ */

.vp-architecture-section[b-3yq2qoutni] {
    padding: 6rem 0;
    background: #ffffff;
}

.vp-arch-kicker[b-3yq2qoutni] {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 123, 49, 0.08);
    border: 1px solid rgba(0, 123, 49, 0.20);
    color: #006b2b;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.875rem;
    border-radius: 100px;
}

/* ── Flow pipeline (redesigned) ── */
.vp-flow[b-3yq2qoutni] {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.vp-flow-step[b-3yq2qoutni] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
}

.vp-flow-head[b-3yq2qoutni] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.25rem;
    position: relative;
    z-index: 1;
}

.vp-flow-node[b-3yq2qoutni] {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #005624, #007b31);
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 123, 49, 0.35),
                0 0 0 3px rgba(0, 123, 49, 0.12);
    flex-shrink: 0;
    transition: box-shadow 0.22s ease,
                transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vp-flow-step:hover .vp-flow-node[b-3yq2qoutni] {
    transform: scale(1.08);
    box-shadow: 0 8px 24px rgba(0, 123, 49, 0.40),
                0 0 0 4px rgba(0, 123, 49, 0.18);
}

.vp-flow-node-final[b-3yq2qoutni] {
    background: linear-gradient(135deg, #007b31, #31a267);
    box-shadow: 0 4px 20px rgba(0, 123, 49, 0.45),
                0 0 0 3px rgba(0, 123, 49, 0.16);
    width: 3.5rem;
    height: 3.5rem;
}

/* Separator connector between steps */
.vp-flow-sep[b-3yq2qoutni] {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2px;
    margin-top: calc(3.25rem / 2 - 1px);
    background: linear-gradient(90deg, rgba(0, 123, 49, 0.40), rgba(49, 162, 103, 0.40));
    position: relative;
}

.vp-flow-sep[b-3yq2qoutni]::after {
    content: "";
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid rgba(49, 162, 103, 0.55);
}

/* Step card */
.vp-flow-card[b-3yq2qoutni] {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 1.25rem;
    padding: 1.75rem 1.25rem 1.5rem;
    margin-top: 1rem;
    width: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s ease,
                border-color 0.22s ease;
}

.vp-flow-step:hover .vp-flow-card[b-3yq2qoutni] {
    transform: translateY(-5px);
    box-shadow: 0 20px 48px rgba(0, 123, 49, 0.10), 0 4px 16px rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 123, 49, 0.16);
}

.vp-flow-card-final[b-3yq2qoutni] {
    border-color: rgba(0, 123, 49, 0.20);
    background: linear-gradient(160deg, #f0fbf4, #ffffff);
    box-shadow: 0 4px 20px rgba(0, 123, 49, 0.10);
}

.vp-flow-step-final:hover .vp-flow-card-final[b-3yq2qoutni] {
    box-shadow: 0 20px 48px rgba(0, 123, 49, 0.16);
    border-color: rgba(0, 123, 49, 0.30);
}

.vp-flow-icon[b-3yq2qoutni] {
    color: #007b31;
    opacity: 0.75;
    margin-bottom: 0.75rem;
}

.vp-flow-icon-final[b-3yq2qoutni] {
    color: #007b31;
    opacity: 1;
}

.vp-flow-title[b-3yq2qoutni] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #1a2e1a;
    margin-bottom: 0.5rem;
    line-height: 1.35;
}

.vp-flow-desc[b-3yq2qoutni] {
    font-size: 0.8rem;
    color: #6b6b6b;
    line-height: 1.55;
    margin-bottom: 0;
}

.vp-flow-desc code[b-3yq2qoutni] {
    font-size: 0.7rem;
    background: rgba(0, 123, 49, 0.08);
    color: #006b2b;
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
}

.vp-step-title[b-3yq2qoutni] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #1a2e1a;
    margin-bottom: 0.375rem;
    line-height: 1.35;
}

.vp-step-sub[b-3yq2qoutni] {
    font-size: 0.75rem;
    color: #6b6b6b;
    line-height: 1.55;
}

.vp-step-sub code[b-3yq2qoutni] {
    font-size: 0.7rem;
    background: rgba(0, 123, 49, 0.08);
    color: #006b2b;
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
}

/* Domain cards */
.vp-domain-card[b-3yq2qoutni] {
    border-radius: 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 1.75rem;
    height: 100%;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s ease;
}

.vp-domain-card:hover[b-3yq2qoutni] {
    transform: translateY(-5px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.08);
}

.vp-domain-ops[b-3yq2qoutni] {
    background: rgba(239, 246, 255, 1);
    border-color: rgba(37, 99, 235, 0.12);
}

.vp-domain-hr[b-3yq2qoutni] {
    background: rgba(240, 251, 244, 1);
    border-color: rgba(0, 123, 49, 0.14);
}

.vp-domain-fin[b-3yq2qoutni] {
    background: rgba(255, 251, 235, 1);
    border-color: rgba(180, 120, 0, 0.14);
}

.vp-domain-exec[b-3yq2qoutni] {
    background: rgba(245, 243, 255, 1);
    border-color: rgba(99, 44, 235, 0.12);
}

.vp-domain-compliance[b-3yq2qoutni] {
    background: rgba(255, 247, 237, 1);
    border-color: rgba(234, 88, 12, 0.14);
}

.vp-domain-employee[b-3yq2qoutni] {
    background: rgba(240, 253, 250, 1);
    border-color: rgba(0, 148, 133, 0.14);
}

.vp-domain-badge[b-3yq2qoutni] {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    display: inline-block;
}

.vp-domain-ops .vp-domain-badge[b-3yq2qoutni]        { color: #2563eb; }
.vp-domain-hr  .vp-domain-badge[b-3yq2qoutni]        { color: #007b31; }
.vp-domain-fin .vp-domain-badge[b-3yq2qoutni]        { color: #8a5700; }
.vp-domain-exec .vp-domain-badge[b-3yq2qoutni]       { color: #6d28d9; }
.vp-domain-compliance .vp-domain-badge[b-3yq2qoutni] { color: #c2410c; }
.vp-domain-employee .vp-domain-badge[b-3yq2qoutni]   { color: #0d9488; }

/* Flow pipeline responsive */
@media (max-width: 991.98px) {
    .vp-flow[b-3yq2qoutni] {
        flex-direction: column;
        gap: 0;
        align-items: stretch;
    }

    .vp-flow-step[b-3yq2qoutni] {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        gap: 1rem;
        width: 100%;
    }

    .vp-flow-head[b-3yq2qoutni] {
        height: auto;
        flex-shrink: 0;
        width: 3.25rem;       /* Pin width so node is always 3.25rem column */
        padding-top: 0.125rem;
    }

    .vp-flow-card[b-3yq2qoutni] {
        margin-top: 0;
        flex: 1;
        min-width: 0;         /* Prevent overflow in flex context */
        padding: 1.25rem 1rem;
    }

    /* Separator: vertical line between row-based steps.                       */
    /* Node center = 3.25rem / 2 = 1.625rem; separator center = left + 1px   */
    .vp-flow-sep[b-3yq2qoutni] {
        flex-shrink: 0;
        align-self: flex-start;
        width: 2px;
        height: 2rem;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: calc(3.25rem / 2 - 1px); /* Exact center under node */
        background: linear-gradient(180deg, rgba(0, 123, 49, 0.55), rgba(49, 162, 103, 0.30));
    }

    .vp-flow-sep[b-3yq2qoutni]::after {
        right: auto;
        left: 50%;
        top: auto;
        bottom: -6px;
        transform: translateX(-50%);
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 7px solid rgba(49, 162, 103, 0.65);
        border-bottom: none;
    }
}

/* Extra-small screens: reduce node size and card padding */
@media (max-width: 479.98px) {
    .vp-flow-head[b-3yq2qoutni] {
        width: 2.75rem;
    }

    .vp-flow-node[b-3yq2qoutni] {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 0.75rem;
    }

    .vp-flow-node-final[b-3yq2qoutni] {
        width: 3rem;
        height: 3rem;
    }

    .vp-flow-card[b-3yq2qoutni] {
        padding: 1rem 0.875rem;
    }

    .vp-flow-sep[b-3yq2qoutni] {
        margin-left: calc(2.75rem / 2 - 1px);
    }
}

/* ═══════════════════════════════════════════════════════
   SECTION 5 — Screenshots (dark, inherits vera-feature-section)
═══════════════════════════════════════════════════════ */

.vp-screenshots-section[b-3yq2qoutni] {
    padding: 6rem 0;
}

/* Duplicated from Home.razor.css — scoped to this page */
.vp-ss-caption[b-3yq2qoutni] {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.01em;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

.vp-ss-frame[b-3yq2qoutni] {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.40);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s ease;
}

.vp-ss-frame:hover[b-3yq2qoutni] {
    transform: translateY(-4px);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
}

.vp-ss-frame img[b-3yq2qoutni] {
    display: block;
    width: 100%;
    height: auto;
}

@media (prefers-reduced-motion: reduce) {
    .vp-outcome-card[b-3yq2qoutni],
    .vp-flow-node[b-3yq2qoutni],
    .vp-flow-card[b-3yq2qoutni],
    .vp-domain-card[b-3yq2qoutni],
    .vp-ss-frame[b-3yq2qoutni] {
        transition: none;
    }
}
/* /Components/Pages/Pricing.razor.rz.scp.css */
.pricing-tier-grid[b-09600sjtji] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    padding-top: 1rem;
}

.pricing-comparison-scroll[b-09600sjtji] {
    overflow-x: auto;
    contain: layout inline-size;
    border: 1px solid var(--tint-mint-2);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.pricing-comparison-scroll:focus-visible[b-09600sjtji] {
    outline: 3px solid var(--brand);
    outline-offset: 4px;
}

.pricing-comparison[b-09600sjtji] {
    width: 100%;
    min-width: 48rem;
    border-collapse: collapse;
    background: #fff;
    color: var(--ink);
}

.pricing-comparison th[b-09600sjtji],
.pricing-comparison td[b-09600sjtji] {
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--line);
    text-align: center;
    vertical-align: middle;
}

.pricing-comparison thead th[b-09600sjtji] {
    background: var(--tint-soft);
    color: var(--ink);
    font-size: .85rem;
    font-weight: 750;
}

.pricing-comparison thead th:first-child[b-09600sjtji],
.pricing-comparison tbody th[b-09600sjtji] {
    width: 43%;
    text-align: left;
}

.pricing-comparison tbody th[b-09600sjtji] {
    font-weight: 400;
}

.pricing-comparison tbody th strong[b-09600sjtji],
.pricing-comparison tbody th span[b-09600sjtji] {
    display: block;
}

.pricing-comparison tbody th strong[b-09600sjtji] {
    margin-bottom: .18rem;
    color: var(--ink);
    font-size: .9rem;
}

.pricing-comparison tbody th span[b-09600sjtji] {
    color: var(--body);
    font-size: .78rem;
    line-height: 1.45;
}

.pricing-comparison tbody td[b-09600sjtji] {
    color: var(--body);
    font-size: .84rem;
    font-weight: 650;
}

.pricing-comparison .pricing-comparison-featured[b-09600sjtji] {
    background: rgba(220, 244, 230, .55);
}

.pricing-check[b-09600sjtji] {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--brand);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l4.6 4.6L19.5 6.7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l4.6 4.6L19.5 6.7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pricing-comparison tbody tr:last-child th[b-09600sjtji],
.pricing-comparison tbody tr:last-child td[b-09600sjtji] {
    border-bottom: 0;
}

@media (max-width: 991.98px) {
    .pricing-tier-grid[b-09600sjtji] {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

@media (max-width: 640px) {
    .pricing-comparison-scroll[b-09600sjtji] {
        border-radius: 1rem;
    }
}
/* /Components/Pages/ResearchStrategicWorkforcePlanning.razor.rz.scp.css */
/* Research Paper Styling — WCAG AA compliant contrast */

.research-paper[b-minthbu1st] {
    font-family: 'Georgia', 'Times New Roman', serif;
    line-height: 1.8;
    color: #1a1a1a; /* 19.4:1 on white ✓ WCAG AAA */
}

.research-paper h2[b-minthbu1st] {
    font-size: 2rem;
    font-weight: 700;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    color: #002d14; /* #002d14 on white ≈ 18:1 ✓ WCAG AAA */
    border-bottom: 3px solid #007b31;
    padding-bottom: 0.5rem;
}

.research-paper h3[b-minthbu1st] {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #1a1a1a;
}

.research-paper h4[b-minthbu1st] {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: #2c3e50; /* 10.5:1 ✓ WCAG AAA */
}

.research-paper p[b-minthbu1st] {
    margin-bottom: 1rem;
    text-align: justify;
    hyphens: auto;
}

.research-paper blockquote[b-minthbu1st] {
    font-style: italic;
    background-color: #f4faf6;
    border-left: 4px solid #007b31;
    padding: 1.5rem;
    margin: 2rem 0;
    border-radius: 0 0.5rem 0.5rem 0;
}

.research-paper .table[b-minthbu1st] {
    margin: 2rem 0;
    font-size: 0.95rem;
}

.research-paper .card[b-minthbu1st] {
    margin: 1.5rem 0;
    border-radius: 1rem;
    border: 1px solid rgba(0, 123, 49, 0.12);
}

.research-paper .card-title[b-minthbu1st] {
    color: #007b31; /* 5.5:1 on white ✓ WCAG AA */
    font-size: 1.1rem;
    font-weight: 600;
}

.research-paper ul[b-minthbu1st],
.research-paper ol[b-minthbu1st] {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.research-paper li[b-minthbu1st] {
    margin-bottom: 0.5rem;
}

.research-header[b-minthbu1st] {
    text-align: center;
    margin-bottom: 3rem;
}

.references-list p[b-minthbu1st] {
    margin-bottom: 1rem;
    padding-left: 2rem;
    text-indent: -2rem;
}

/* Print styles */
@media print {
    .research-paper[b-minthbu1st] {
        font-size: 12pt;
        line-height: 1.6;
    }

    .research-paper h2[b-minthbu1st] {
        page-break-after: avoid;
    }

    .research-paper .card[b-minthbu1st] {
        page-break-inside: avoid;
    }

    .research-paper table[b-minthbu1st] {
        page-break-inside: avoid;
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .research-paper p[b-minthbu1st] {
        text-align: left;
        hyphens: none;
    }

    .research-paper h2[b-minthbu1st] {
        font-size: 1.5rem;
    }

    .research-paper h3[b-minthbu1st] {
        font-size: 1.25rem;
    }

    .research-paper .table[b-minthbu1st] {
        font-size: 0.85rem;
    }
}
/* /Components/Panels/LeadershipRelevancePanel.razor.rz.scp.css */
:global(.lrp-section)[b-dn8broy6z9] {
    --osirion-context-card-grid-padding: 4.5rem;
    --osirion-context-card-grid-background: var(--osirion-background-secondary, #f6f9f7);
    --osirion-context-card-grid-card-background: var(--osirion-background-primary, #ffffff);
    --osirion-context-card-grid-heading-color: var(--osirion-text-primary, #123b2b);
    --osirion-context-card-grid-description-color: var(--osirion-text-secondary, #666);
    --osirion-context-card-grid-item-color: var(--osirion-text-secondary, #555);
    --osirion-context-card-grid-card-shadow: 0 0.25rem 1rem rgba(26, 58, 42, 0.08);
    border-top: 1px solid var(--osirion-border-color, rgba(26, 58, 42, 0.08));
    border-bottom: 1px solid var(--osirion-border-color, rgba(26, 58, 42, 0.08));
}

:global([data-osirion-theme="dark"] .lrp-section)[b-dn8broy6z9],
:global([data-theme="dark"] .lrp-section)[b-dn8broy6z9],
:global([data-bs-theme="dark"] .lrp-section)[b-dn8broy6z9] {
    --osirion-context-card-grid-background: #020617;
    --osirion-context-card-grid-card-background: #0f172a;
    --osirion-context-card-grid-heading-color: #d8d8df;
    --osirion-context-card-grid-description-color: #b7becb;
    --osirion-context-card-grid-item-color: #c4cad5;
    --osirion-context-card-grid-card-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.28);
}
/* /Components/Sections/CtaSection.razor.rz.scp.css */
/* CtaSection.razor.css — Reusable enterprise CTA section styles */

/* ═══════════════════════════════════════════════════════
   Section wrapper — light green gradient background
═══════════════════════════════════════════════════════ */

.ctas-section[b-hg9o7ezep9] {
    padding: 7rem 0;
    background: linear-gradient(140deg, #f0fbf4 0%, #e2f0e8 40%, #eef7f1 70%, #f8fff9 100%);
    position: relative;
    overflow: hidden;
}

.ctas-section[b-hg9o7ezep9]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(0, 123, 49, 0.04) 1px, transparent 0);
    background-size: 28px 28px;
    pointer-events: none;
}

.ctas-section > .container-xxl[b-hg9o7ezep9] {
    position: relative;
    z-index: 1;
}

.ctas-linework[b-hg9o7ezep9] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ctas-linework svg[b-hg9o7ezep9] {
    display: block;
    width: 100%;
    height: 100%;
}

.ctas-linework path[b-hg9o7ezep9] {
    fill: none;
    stroke: rgba(0, 123, 49, 0.2);
    stroke-width: 1.5;
    stroke-dasharray: 8 12;
}

.ctas-linework circle[b-hg9o7ezep9] {
    fill: #007b31;
    opacity: 0.35;
}

/* ═══════════════════════════════════════════════════════
   Left column — narrative
═══════════════════════════════════════════════════════ */

.ctas-kicker[b-hg9o7ezep9] {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 123, 49, 0.08);
    border: 1px solid rgba(0, 123, 49, 0.22);
    color: #005624;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.875rem;
    border-radius: 100px;
}

.ctas-heading[b-hg9o7ezep9] {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    letter-spacing: -0.02em;
    color: #0d1a0d;
    line-height: 1.2;
}

.ctas-description[b-hg9o7ezep9] {
    font-size: 1rem;
    line-height: 1.65;
    max-width: 500px;
    color: #52635a;
}

/* Benefit checklist */
.ctas-benefit-list[b-hg9o7ezep9] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.ctas-benefit-item[b-hg9o7ezep9] {
    font-size: 0.9375rem;
    color: #1a1a1a;
    padding-left: 1.75rem;
    position: relative;
    line-height: 1.55;
}

.ctas-benefit-item[b-hg9o7ezep9]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #007b31, #31a267);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z'/%3E%3C/svg%3E");
    background-size: cover;
    flex-shrink: 0;
}

/* Trust strip — left column */
.ctas-trust-strip[b-hg9o7ezep9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.ctas-trust-badge[b-hg9o7ezep9] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #005624;
    background: rgba(0, 123, 49, 0.08);
    border: 1px solid rgba(0, 123, 49, 0.20);
    padding: 0.3rem 0.75rem;
    border-radius: 100px;
}

/* ═══════════════════════════════════════════════════════
   Right column — glassmorphism action card
═══════════════════════════════════════════════════════ */

.ctas-glass-card[b-hg9o7ezep9] {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 2rem;
    padding: 3rem 2.5rem;
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.9) inset,
        0 32px 80px rgba(0, 123, 49, 0.12),
        0 8px 32px rgba(0, 0, 0, 0.06);
    position: relative;
}

/* Subtle top-accent line */
.ctas-glass-card[b-hg9o7ezep9]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 2rem;
    right: 2rem;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #007b31 30%, #31a267 70%, transparent 100%);
    border-radius: 100px;
}

/* Icon ring */
.ctas-icon-ring[b-hg9o7ezep9] {
    width: 72px;
    height: 72px;
    border-radius: 1.125rem;
    background: linear-gradient(135deg, #007b31, #31a267);
    box-shadow: 0 8px 24px rgba(0, 123, 49, 0.30);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ctas-card-heading[b-hg9o7ezep9] {
    font-size: 1.3125rem;
    letter-spacing: -0.02em;
    color: #0d1a0d;
    line-height: 1.3;
}

/* Card bullets */
.ctas-card-bullets[b-hg9o7ezep9] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.ctas-card-bullets li[b-hg9o7ezep9] {
    font-size: 0.875rem;
    color: #444;
    padding-left: 1.375rem;
    position: relative;
    line-height: 1.5;
}

.ctas-card-bullets li[b-hg9o7ezep9]::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #007b31;
    font-weight: 700;
}

/* Card trust pills */
.ctas-card-trust[b-hg9o7ezep9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    justify-content: center;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.ctas-card-trust-pill[b-hg9o7ezep9] {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6b6b6b;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0.2rem 0.6rem;
    border-radius: 100px;
}

:global([data-osirion-theme="dark"]) .ctas-section[b-hg9o7ezep9],
:global([data-theme="dark"]) .ctas-section[b-hg9o7ezep9],
:global([data-bs-theme="dark"]) .ctas-section[b-hg9o7ezep9] {
    background: linear-gradient(140deg, #0f172a 0%, #071a14 50%, #020617 100%);
}

:global([data-osirion-theme="dark"]) .ctas-heading[b-hg9o7ezep9],
:global([data-theme="dark"]) .ctas-heading[b-hg9o7ezep9],
:global([data-bs-theme="dark"]) .ctas-heading[b-hg9o7ezep9],
:global([data-osirion-theme="dark"]) .ctas-card-heading[b-hg9o7ezep9],
:global([data-theme="dark"]) .ctas-card-heading[b-hg9o7ezep9],
:global([data-bs-theme="dark"]) .ctas-card-heading[b-hg9o7ezep9] {
    color: #e5e7eb;
}

:global([data-osirion-theme="dark"]) .ctas-description[b-hg9o7ezep9],
:global([data-theme="dark"]) .ctas-description[b-hg9o7ezep9],
:global([data-bs-theme="dark"]) .ctas-description[b-hg9o7ezep9],
:global([data-osirion-theme="dark"]) .ctas-benefit-item[b-hg9o7ezep9],
:global([data-theme="dark"]) .ctas-benefit-item[b-hg9o7ezep9],
:global([data-bs-theme="dark"]) .ctas-benefit-item[b-hg9o7ezep9] {
    color: #c4cad5;
}

:global([data-osirion-theme="dark"]) .ctas-glass-card[b-hg9o7ezep9],
:global([data-theme="dark"]) .ctas-glass-card[b-hg9o7ezep9],
:global([data-bs-theme="dark"]) .ctas-glass-card[b-hg9o7ezep9] {
    background: rgba(15, 23, 42, 0.88);
    border-color: rgba(148, 163, 184, 0.25);
    box-shadow: 0 2px 0 rgba(148, 163, 184, 0.12) inset, 0 32px 80px rgba(0, 0, 0, 0.28);
}

:global([data-osirion-theme="dark"]) .ctas-card-trust[b-hg9o7ezep9],
:global([data-theme="dark"]) .ctas-card-trust[b-hg9o7ezep9],
:global([data-bs-theme="dark"]) .ctas-card-trust[b-hg9o7ezep9] {
    border-color: rgba(148, 163, 184, 0.2);
}

:global([data-osirion-theme="dark"]) .ctas-card-trust-pill[b-hg9o7ezep9],
:global([data-theme="dark"]) .ctas-card-trust-pill[b-hg9o7ezep9],
:global([data-bs-theme="dark"]) .ctas-card-trust-pill[b-hg9o7ezep9] {
    color: #cbd5e1;
    background: rgba(148, 163, 184, 0.1);
    border-color: rgba(148, 163, 184, 0.18);
}

/* ═══════════════════════════════════════════════════════
   Responsive
═══════════════════════════════════════════════════════ */

@media (max-width: 991.98px) {
    .ctas-glass-card[b-hg9o7ezep9] {
        padding: 2.25rem 1.75rem;
    }

    .ctas-description[b-hg9o7ezep9] {
        max-width: 100%;
    }
}

@media (max-width: 575.98px) {
    .ctas-section[b-hg9o7ezep9] {
        padding: 5rem 0;
    }

    .ctas-glass-card[b-hg9o7ezep9] {
        padding: 2rem 1.25rem;
        border-radius: 1.5rem;
    }
}

/* ═══════════════════════════════════════════════════════
   Accessibility
═══════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .ctas-glass-card[b-hg9o7ezep9] {
        transition: none;
    }
}

@media (prefers-contrast: more) {
    .ctas-linework[b-hg9o7ezep9] {
        display: none;
    }

    .ctas-glass-card[b-hg9o7ezep9] {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: #ffffff;
        border: 2px solid #007b31;
    }

    .ctas-glass-card[b-hg9o7ezep9]::before {
        display: none;
    }
}
/* /Components/Sections/DataFlowSection.razor.rz.scp.css */
/* DataFlowSection.razor.css — Architecture diagram styling + WCAG 2.2 */

.diagram-container[b-maenfibx80] {
    padding: 2.5rem;
    background: #ffffff;
    border-radius: 1.25rem;
    border: 1px solid rgba(0, 123, 49, 0.10);
}

.diagram-title[b-maenfibx80] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #005624; /* #005624 on white ≈ 9.9:1 ✓ WCAG AAA */
    margin-bottom: 1.5rem;
    text-align: center;
    border-bottom: 2px solid #bce9d1;
    padding-bottom: 1rem;
    letter-spacing: -0.02em;
}

.mermaid[b-maenfibx80] {
    text-align: center;
    margin: 1rem 0;
}

.flow-card-subtle[b-maenfibx80] {
    background: #f0fbf4;
    border-color: #8dd8b1;
    color: #005624;
}

.flow-card-subtle .card-title[b-maenfibx80] {
    color: #005624;
}

.flow-card-strong[b-maenfibx80] {
    background: #006b2b;
    border-color: #005624;
    color: #ffffff;
}

.flow-card-strong .card-title[b-maenfibx80],
.flow-card-strong .card-text[b-maenfibx80] {
    color: #ffffff;
}

/* ── Metric grid ─── */
.metrics[b-maenfibx80] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    margin: 2.5rem 0;
    padding: 2rem;
    background: #f4faf6;
    border-radius: 1rem;
    border: 1px solid #bce9d1;
}

.metric[b-maenfibx80] {
    text-align: center;
    padding: 1.75rem 1.25rem;
    background: #ffffff;
    border-radius: 0.875rem;
    border: 1px solid rgba(0, 123, 49, 0.10);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease;
}

.metric:hover[b-maenfibx80] {
    transform: translateY(-5px);
    box-shadow: 0 20px 56px rgba(0, 123, 49, 0.12);
}

.metric-value[b-maenfibx80] {
    font-size: 2.125rem;
    font-weight: 800;
    background: linear-gradient(135deg, #006b2b 0%, #31a267 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.metric-label[b-maenfibx80] {
    font-size: 0.8125rem;
    color: #6b6b6b; /* 4.58:1 ✓ WCAG AA */
    margin-top: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* ── Info section ─── */
.info-section[b-maenfibx80] {
    margin-top: 2.5rem;
    padding: 2rem;
    background: #f4faf6;
    border-radius: 1rem;
    border: 1px solid rgba(0, 123, 49, 0.10);
}

.info-section h3[b-maenfibx80] {
    color: #005624; /* ✓ WCAG AAA */
    margin-bottom: 1rem;
    font-weight: 700;
}

.info-grid[b-maenfibx80] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
}

.info-card[b-maenfibx80] {
    background: white;
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid #d1d5db;
}

    .info-card h4[b-maenfibx80] {
        color: var(--blazor-700);
        margin-bottom: 0.5rem;
        font-size: 1rem;
    }

    .info-card ul[b-maenfibx80] {
        margin: 0;
        padding-left: 1.5rem;
        color: #6b7280;
    }

    .info-card li[b-maenfibx80] {
        font-size: 0.875rem;
        margin-bottom: 0.25rem;
    }

@media (max-width: 768px) {
    body[b-maenfibx80] {
        padding: 1rem;
    }

    .header h1[b-maenfibx80] {
        font-size: 2rem;
    }

    .diagram-container[b-maenfibx80] {
        padding: 1rem;
    }

    .metrics[b-maenfibx80] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        padding: 1rem;
    }

    .info-grid[b-maenfibx80] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/GlassCard.razor.rz.scp.css */
/* GlassCard.razor.css — Glassmorphism card system */

/* ── Base glass card ── */
.gc-card[b-oui1xzfrcd] {
    --gc-card-highlight: transparent;
    background: var(--osirion-background-primary, rgba(255, 255, 255, 0.72));
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--osirion-border-color, rgba(255, 255, 255, 0.58));
    border-radius: 1.5rem;
    padding: 2rem;
    position: relative;
    box-shadow:
        0 2px 0 var(--gc-card-highlight, rgba(255, 255, 255, 0.90)) inset,
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04);
    transition:
        transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.gc-card:hover[b-oui1xzfrcd] {
    transform: translateY(-5px);
    box-shadow:
        0 2px 0 var(--gc-card-highlight, rgba(255, 255, 255, 0.90)) inset,
        0 24px 64px rgba(0, 0, 0, 0.11),
        0 6px 20px rgba(0, 0, 0, 0.05);
}

/* ── Elevated variant ── */
.gc-elevated[b-oui1xzfrcd] {
    box-shadow:
        0 2px 0 var(--gc-card-highlight, rgba(255, 255, 255, 0.95)) inset,
        0 16px 48px rgba(0, 0, 0, 0.12),
        0 4px 16px rgba(0, 0, 0, 0.06),
        0 1px 3px rgba(0, 0, 0, 0.04);
}

.gc-elevated:hover[b-oui1xzfrcd] {
    box-shadow:
        0 2px 0 var(--gc-card-highlight, rgba(255, 255, 255, 0.95)) inset,
        0 32px 80px rgba(0, 0, 0, 0.14),
        0 8px 24px rgba(0, 0, 0, 0.07);
}

/* ── Kicker badge ── */
.gc-kicker[b-oui1xzfrcd] {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}

/* ── Accent: green (default) ── */
.gc-accent-green[b-oui1xzfrcd] {
    border-color: rgba(0, 123, 49, 0.14);
}

.gc-accent-green:hover[b-oui1xzfrcd] {
    box-shadow:
        0 2px 0 var(--gc-card-highlight, rgba(255, 255, 255, 0.90)) inset,
        0 24px 64px rgba(0, 123, 49, 0.09),
        0 6px 20px rgba(0, 0, 0, 0.04);
}

.gc-kicker-green[b-oui1xzfrcd] {
    background: rgba(0, 123, 49, 0.08);
    border-color: rgba(0, 123, 49, 0.22);
    color: #005624;
}

/* ── Accent: blue ── */
.gc-accent-blue[b-oui1xzfrcd] {
    border-color: rgba(37, 99, 235, 0.14);
}

.gc-accent-blue:hover[b-oui1xzfrcd] {
    box-shadow:
        0 2px 0 var(--gc-card-highlight, rgba(255, 255, 255, 0.90)) inset,
        0 24px 64px rgba(37, 99, 235, 0.09),
        0 6px 20px rgba(0, 0, 0, 0.04);
}

.gc-kicker-blue[b-oui1xzfrcd] {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.22);
    color: #1d4ed8;
}

/* ── Accent: purple ── */
.gc-accent-purple[b-oui1xzfrcd] {
    border-color: rgba(124, 58, 237, 0.14);
}

.gc-accent-purple:hover[b-oui1xzfrcd] {
    box-shadow:
        0 2px 0 var(--gc-card-highlight, rgba(255, 255, 255, 0.90)) inset,
        0 24px 64px rgba(124, 58, 237, 0.09),
        0 6px 20px rgba(0, 0, 0, 0.04);
}

.gc-kicker-purple[b-oui1xzfrcd] {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.22);
    color: #6d28d9;
}

/* ── Accent: indigo ── */
.gc-accent-indigo[b-oui1xzfrcd] {
    border-color: rgba(79, 70, 229, 0.14);
}

.gc-accent-indigo:hover[b-oui1xzfrcd] {
    box-shadow:
        0 2px 0 var(--gc-card-highlight, rgba(255, 255, 255, 0.90)) inset,
        0 24px 64px rgba(79, 70, 229, 0.09),
        0 6px 20px rgba(0, 0, 0, 0.04);
}

.gc-kicker-indigo[b-oui1xzfrcd] {
    background: rgba(79, 70, 229, 0.08);
    border-color: rgba(79, 70, 229, 0.22);
    color: #4338ca;
}

/* ── Accent: teal ── */
.gc-accent-teal[b-oui1xzfrcd] {
    border-color: rgba(13, 148, 136, 0.14);
}

.gc-accent-teal:hover[b-oui1xzfrcd] {
    box-shadow:
        0 2px 0 var(--gc-card-highlight, rgba(255, 255, 255, 0.90)) inset,
        0 24px 64px rgba(13, 148, 136, 0.09),
        0 6px 20px rgba(0, 0, 0, 0.04);
}

.gc-kicker-teal[b-oui1xzfrcd] {
    background: rgba(13, 148, 136, 0.08);
    border-color: rgba(13, 148, 136, 0.22);
    color: #0f766e;
}

/* ── Accent: amber ── */
.gc-accent-amber[b-oui1xzfrcd] {
    border-color: rgba(180, 120, 0, 0.14);
}

.gc-accent-amber:hover[b-oui1xzfrcd] {
    box-shadow:
        0 2px 0 var(--gc-card-highlight, rgba(255, 255, 255, 0.90)) inset,
        0 24px 64px rgba(180, 120, 0, 0.09),
        0 6px 20px rgba(0, 0, 0, 0.04);
}

.gc-kicker-amber[b-oui1xzfrcd] {
    background: rgba(180, 120, 0, 0.08);
    border-color: rgba(180, 120, 0, 0.22);
    color: #8a5700;
}

:root[data-osirion-theme="dark"] .gc-card[b-oui1xzfrcd],
:root[data-theme="dark"] .gc-card[b-oui1xzfrcd],
:root[data-bs-theme="dark"] .gc-card[b-oui1xzfrcd] {
    --gc-card-highlight: transparent;
}

:root[data-osirion-theme="dark"] .gc-kicker[b-oui1xzfrcd],
:root[data-theme="dark"] .gc-kicker[b-oui1xzfrcd],
:root[data-bs-theme="dark"] .gc-kicker[b-oui1xzfrcd] {
    color: var(--osirion-text-primary);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .gc-card[b-oui1xzfrcd] {
        transition: none;
    }
}

/* ── High contrast: remove blur, add solid border ── */
@media (prefers-contrast: more) {
    .gc-card[b-oui1xzfrcd] {
        background: var(--osirion-background-primary);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border: 2px solid var(--osirion-border-color);
    }
}
/* /Components/Shared/HexaveraAppShowcase.razor.rz.scp.css */
/* Interactive mock of the Hexavera application shell (Fluent UI look & feel). */

/* :where() keeps the reset at zero specificity so class styles win */
.hxa-shell :where(button)[b-2pbr7bjw9a] {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
}

.hxa-shell button:focus-visible[b-2pbr7bjw9a],
.hxa-shell [tabindex]:focus-visible[b-2pbr7bjw9a] {
    outline: 2px solid var(--hxa-accent, #007b31);
    outline-offset: 1px;
}

@keyframes hxa-nudge-b-2pbr7bjw9a {
    0% { transform: scale(1); }
    35% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

.hxa-pulsed[b-2pbr7bjw9a] {
    animation: hxa-nudge-b-2pbr7bjw9a 0.35s ease;
}

.hxa-shell[b-2pbr7bjw9a] {
    position: relative; /* positioning context for the guided-walkthrough overlay */
    max-width: 1150px;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.6), 0 30px 80px -20px rgba(12, 35, 28, 0.35);
    font-family: "Segoe UI", "Segoe UI Variable Text", system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    text-align: left;
}

/* Fullscreen variant for the /demo page: the shell is a flex-fill column inside
   the demo app-frame; the app pane takes all remaining height. Typography
   scales proportionally on large screens via standardized zoom. */

.hxa-shell-full[b-2pbr7bjw9a] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-height: 0;
    border-radius: 12px;
    box-shadow: 0 12px 40px -16px rgba(12, 35, 28, 0.25);
}

.hxa-shell-full .hxa-app[b-2pbr7bjw9a] {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

@media (min-width: 1280px) {
    .hxa-shell-full[b-2pbr7bjw9a] { zoom: 1.08; }
}

@media (min-width: 1720px) {
    .hxa-shell-full[b-2pbr7bjw9a] { zoom: 1.18; }
}

/* ── Browser chrome ─────────────────────────────────────────────────────── */

.hxa-chrome[b-2pbr7bjw9a] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 14px;
    background: #f4f6f4;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* P2d-a (A10/R6): always-visible demo notice - its own row under the chrome bar,
   OUTSIDE the themed .hxa-app root: fixed chrome palette, no transitions, wraps
   at 390px (never nowrap - the mobile no-overflow gate). */
.hxa-demo-note[b-2pbr7bjw9a] {
    margin: 0;
    padding: 4px 14px;
    font-size: 0.68rem;
    line-height: 1.35;
    color: #3f4a44;
    background: #eef2ee;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    flex: 0 0 auto;
}

@media (forced-colors: active) {
    .hxa-demo-note[b-2pbr7bjw9a] {
        background: Canvas;
        color: CanvasText;
        border-bottom: 1px solid ButtonText;
    }
}

.hxa-chrome-dots[b-2pbr7bjw9a] {
    display: flex;
    gap: 6px;
}

.hxa-chrome-dots span[b-2pbr7bjw9a] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #dde2dd;
}

.hxa-chrome-url[b-2pbr7bjw9a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 99px;
    font-size: 0.6875rem;
    color: #4f5b53;
    white-space: nowrap;
    overflow: hidden;
}

.hxa-chrome-url svg[b-2pbr7bjw9a] { color: #007b31; flex-shrink: 0; }

.hxa-chrome-path[b-2pbr7bjw9a] { color: #5f6a63; }

.hxa-preview-label[b-2pbr7bjw9a] {
    margin-left: auto;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #4f5b53;
    white-space: nowrap;
}

/* Reset demo control (SSR-hidden; JS unhides when state persistence is on) */
.hxa-demo-reset[b-2pbr7bjw9a] {
    flex-shrink: 0;
    padding: 4px 12px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 99px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #4f5b53;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.hxa-demo-reset:hover[b-2pbr7bjw9a] { color: #007b31; border-color: #007b31; }

.hxa-demo-reset:focus-visible[b-2pbr7bjw9a] {
    outline: 2px solid #007b31;
    outline-offset: 2px;
}

/* Tour play/pause toggle with countdown ring (JS unhides when the tour can run) */
/* Guided walkthrough entry (SSR-hidden; JS unhides at attach) */
.hxa-guide-open[b-2pbr7bjw9a] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 4px 12px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 99px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #4f5b53;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.hxa-guide-open:hover[b-2pbr7bjw9a] { color: #007b31; border-color: #007b31; }

.hxa-guide-open:focus-visible[b-2pbr7bjw9a] {
    outline: 2px solid #007b31;
    outline-offset: 2px;
}

.hxa-tour-toggle[b-2pbr7bjw9a] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    color: #4f5b53;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

/* A 26px target is easy to miss - extend the effective hit area invisibly */
.hxa-tour-toggle[b-2pbr7bjw9a]::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
}

.hxa-tour-toggle:hover[b-2pbr7bjw9a] { color: #007b31; border-color: #007b31; }

.hxa-tour-toggle:focus-visible[b-2pbr7bjw9a] {
    outline: 2px solid #007b31;
    outline-offset: 2px;
}

.hxa-tour-ring[b-2pbr7bjw9a] {
    position: absolute;
    inset: -1px;
    transform: rotate(-90deg);
}

.hxa-tour-ring circle[b-2pbr7bjw9a] {
    fill: none;
    stroke-width: 2.4;
}

.hxa-tour-track[b-2pbr7bjw9a] { stroke: rgba(0, 0, 0, 0.08); }

.hxa-tour-prog[b-2pbr7bjw9a] {
    stroke: #007b31;
    stroke-linecap: round;
    stroke-dasharray: 62.83;
    stroke-dashoffset: calc(62.83 * (1 - var(--p, 0)));
}

.hxa-tour-toggle .hxa-ic-play[b-2pbr7bjw9a] { display: none; }

.hxa-tour-toggle[aria-pressed="true"] .hxa-ic-play[b-2pbr7bjw9a] { display: block; }

.hxa-tour-toggle[aria-pressed="true"] .hxa-ic-pause[b-2pbr7bjw9a] { display: none; }

.hxa-tour-toggle[aria-pressed="true"] .hxa-tour-prog[b-2pbr7bjw9a] { opacity: 0; }

/* ── App theme tokens ───────────────────────────────────────────────────── */

.hxa-app[b-2pbr7bjw9a] {
    --hxa-bg: #f4f6f5;
    --hxa-card: #ffffff;
    --hxa-rail: #f6f8f7;
    --hxa-line: rgba(0, 0, 0, 0.08);
    --hxa-line-soft: rgba(0, 0, 0, 0.05);
    --hxa-ink: #1c221e;
    --hxa-soft: #4f5b53;
    --hxa-faint: rgba(0, 0, 0, 0.56);
    --hxa-hover: #eaf0ec;
    --hxa-accent: #007b31;
    --hxa-accent-strong: #005624;
    --hxa-accent-soft: #dcf4e6;
    --hxa-accent-tint: #f0fbf4;
    --hxa-ok: #0e700e;
    --hxa-warn: #9a5b00;
    --hxa-err: #c42b1c;
    --hxa-info: #0067b8;
    --hxa-toast-bg: #1c221e;
    display: flex;
    flex-direction: column;
    height: 640px;
    background: var(--hxa-bg);
    color: var(--hxa-ink);
}

.hxa-app[data-hxa-theme="dark"][b-2pbr7bjw9a] {
    --hxa-bg: #1b201d;
    --hxa-card: #242a26;
    --hxa-rail: #202622;
    --hxa-line: rgba(255, 255, 255, 0.1);
    --hxa-line-soft: rgba(255, 255, 255, 0.06);
    --hxa-ink: #e8ece9;
    --hxa-soft: #a8b3ac;
    --hxa-faint: rgba(255, 255, 255, 0.62);
    --hxa-hover: rgba(255, 255, 255, 0.06);
    --hxa-accent: #31a267;
    --hxa-accent-strong: #8dd8b1;
    --hxa-accent-soft: rgba(49, 162, 103, 0.22);
    --hxa-accent-tint: rgba(49, 162, 103, 0.12);
    --hxa-ok: #6ccb5f;
    --hxa-warn: #f0a75e;
    --hxa-err: #ff8b80;
    --hxa-info: #6cb8f6;
    --hxa-toast-bg: #10130f;
}

/* Applied for the instant of a theme swap so no transition catches mixed colors */

.hxa-app.hxa-notrans[b-2pbr7bjw9a],
.hxa-app.hxa-notrans *[b-2pbr7bjw9a] {
    transition: none !important;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.hxa-header[b-2pbr7bjw9a] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    height: 46px;
    padding: 0 12px;
    background: var(--hxa-card);
    border-bottom: 1px solid var(--hxa-line);
}

.hxa-burger[b-2pbr7bjw9a] {
    display: inline-flex;
    color: var(--hxa-soft);
}

.hxa-brand[b-2pbr7bjw9a] {
    font-size: 0.9375rem;
    font-weight: 700;
}

.hxa-product-chip[b-2pbr7bjw9a] {
    padding: 2px 9px;
    border-radius: 99px;
    background: var(--hxa-accent-soft);
    color: var(--hxa-accent-strong);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Vera AI is available in every product - on-prem shells reach it via the cloud bridge */

.hxa-header-right[b-2pbr7bjw9a] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.hxa-icon-btn[b-2pbr7bjw9a] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    color: var(--hxa-soft);
    transition: background 0.15s ease, color 0.15s ease;
}

.hxa-icon-btn:hover[b-2pbr7bjw9a] {
    background: var(--hxa-hover);
    color: var(--hxa-ink);
}

.hxa-ic-moon[b-2pbr7bjw9a] { display: none; }

.hxa-app[data-hxa-theme="dark"] .hxa-ic-sun[b-2pbr7bjw9a] { display: none; }

.hxa-app[data-hxa-theme="dark"] .hxa-ic-moon[b-2pbr7bjw9a] { display: inline; }

.hxa-bell-dot[b-2pbr7bjw9a] {
    position: absolute;
    top: 5px;
    right: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d13438;
    border: 1.5px solid var(--hxa-card);
}

.hxa-avatar[b-2pbr7bjw9a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--hxa-accent);
    color: #ffffff;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.hxa-ask-vera[b-2pbr7bjw9a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border-radius: 99px;
    background: var(--hxa-accent);
    color: #ffffff;
    font-size: 0.71875rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.1s ease;
}

.hxa-ask-vera:hover[b-2pbr7bjw9a] { background: var(--hxa-accent-strong); color: #ffffff; }

.hxa-app[data-hxa-theme="dark"] .hxa-avatar[b-2pbr7bjw9a],
.hxa-app[data-hxa-theme="dark"] .hxa-ask-vera[b-2pbr7bjw9a],
.hxa-app[data-hxa-theme="dark"] .hxa-ask-vera:hover[b-2pbr7bjw9a],
.hxa-app[data-hxa-theme="dark"] .hxa-strip-active[b-2pbr7bjw9a] {
    color: #10130f;
}

.hxa-app[data-hxa-theme="dark"] .hxa-switch[aria-pressed="true"] .hxa-switch-knob[b-2pbr7bjw9a] { background: #10130f; }

.hxa-ask-vera:active[b-2pbr7bjw9a] { transform: scale(0.96); }

/* ── Body layout ────────────────────────────────────────────────────────── */

.hxa-body[b-2pbr7bjw9a] {
    flex: 1;
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr);
    min-height: 0;
}

/* ── Navigation rail ────────────────────────────────────────────────────── */

.hxa-nav[b-2pbr7bjw9a] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 10px 8px;
    background: var(--hxa-rail);
    border-right: 1px solid var(--hxa-line);
}

.hxa-tenant-pick[b-2pbr7bjw9a] {
    display: block;
    margin-bottom: 10px;
}

.hxa-tenant[b-2pbr7bjw9a] {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-height: 32px;
    padding: 0 9px;
    border: 1px solid var(--hxa-line);
    border-radius: 5px;
    background: var(--hxa-card);
    font-size: 0.71875rem;
    font-weight: 600;
    color: var(--hxa-ink);
    transition: border-color 0.15s ease;
}

.hxa-tenant:hover[b-2pbr7bjw9a],
.hxa-tenant[aria-expanded="true"][b-2pbr7bjw9a] { border-color: var(--hxa-accent); }

.hxa-tenant svg[b-2pbr7bjw9a] { color: var(--hxa-soft); flex-shrink: 0; }

.hxa-tenant-label[b-2pbr7bjw9a] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hxa-caret[b-2pbr7bjw9a] { opacity: 0.6; }

/* Static site label replaces the tenant picker on on-prem products */

.hxa-site[b-2pbr7bjw9a] {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 9px;
    border: 1px dashed var(--hxa-line);
    border-radius: 5px;
    background: var(--hxa-bg);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--hxa-soft);
    margin-bottom: 10px;
}

.hxa-site svg[b-2pbr7bjw9a] { flex-shrink: 0; }

.hxa-site-label[b-2pbr7bjw9a] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hxa-nav-scroll[b-2pbr7bjw9a] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--hxa-accent) transparent;
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 8px;
    padding-right: 3px;
}

.hxa-nav-scroll[b-2pbr7bjw9a]::-webkit-scrollbar { width: 6px; }
.hxa-nav-scroll[b-2pbr7bjw9a]::-webkit-scrollbar-track { background: transparent; }
.hxa-nav-scroll[b-2pbr7bjw9a]::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--hxa-accent) 55%, transparent);
    border-radius: 99px;
}

.hxa-nav-group[b-2pbr7bjw9a] {
    flex-shrink: 0;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--hxa-accent-strong);
    padding: 8px 8px 3px;
    border-bottom: 1px solid var(--hxa-accent-strong);
    margin: 15px 0 10px 0;
}

.hxa-nav-item[b-2pbr7bjw9a] {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 27px;
    padding: 0 8px;
    border-radius: 5px;
    font-size: 0.75rem;
    color: var(--hxa-ink);
    white-space: nowrap;
    transition: background 0.15s ease;
}

.hxa-nav-item svg[b-2pbr7bjw9a] { color: var(--hxa-soft); flex-shrink: 0; transition: color 0.15s ease; }

.hxa-nav-item:hover[b-2pbr7bjw9a] { background: var(--hxa-hover); }

.hxa-nav-active[b-2pbr7bjw9a],
.hxa-nav-active:hover[b-2pbr7bjw9a] {
    background: var(--hxa-accent-soft);
    color: var(--hxa-accent-strong);
    font-weight: 600;
}

.hxa-nav-active[b-2pbr7bjw9a]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 3px;
    background: var(--hxa-accent);
}

.hxa-nav-active svg[b-2pbr7bjw9a] { color: var(--hxa-accent); }

.hxa-nav-divider[b-2pbr7bjw9a] {
    flex-shrink: 0;
    height: 1px;
    margin: 7px 6px;
    background: var(--hxa-line);
}

.hxa-nav-vera svg[b-2pbr7bjw9a] { color: var(--hxa-accent); }

/* ── Main column ────────────────────────────────────────────────────────── */

.hxa-main[b-2pbr7bjw9a] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.hxa-pagestrip[b-2pbr7bjw9a] {
    display: none;
    gap: 6px;
    padding: 8px 12px 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.hxa-pagestrip[b-2pbr7bjw9a]::-webkit-scrollbar { display: none; }

.hxa-strip-chip[b-2pbr7bjw9a] {
    flex: 0 0 auto;
    padding: 4px 11px;
    border: 1px solid var(--hxa-line);
    border-radius: 99px;
    background: var(--hxa-card);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--hxa-soft);
    white-space: nowrap;
}

.hxa-strip-active[b-2pbr7bjw9a] {
    background: var(--hxa-accent);
    border-color: var(--hxa-accent);
    color: #ffffff;
}

.hxa-content[b-2pbr7bjw9a] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 18px 18px;
}

/* ── Page scaffolding ───────────────────────────────────────────────────── */

.hxa-crumbs[b-2pbr7bjw9a] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6875rem;
    color: var(--hxa-faint);
    margin-bottom: 6px;
}

.hxa-crumbs svg[b-2pbr7bjw9a] { color: var(--hxa-soft); }

.hxa-crumb-current[b-2pbr7bjw9a] { color: var(--hxa-soft); font-weight: 600; }

.hxa-page-head[b-2pbr7bjw9a] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 9px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--hxa-line);
}

.hxa-page-title[b-2pbr7bjw9a] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--hxa-ink);
}

.hxa-updated[b-2pbr7bjw9a] {
    font-size: 0.65625rem;
    color: var(--hxa-faint);
    white-space: nowrap;
}

/* Staggered entrance for JS-rendered pages */

.hxa-page-anim .hxa-kpi[b-2pbr7bjw9a],
.hxa-page-anim .hxa-panel[b-2pbr7bjw9a],
.hxa-page-anim .hxa-toolbar[b-2pbr7bjw9a],
.hxa-page-anim .hxa-gridwrap[b-2pbr7bjw9a],
.hxa-page-anim .hxa-pager[b-2pbr7bjw9a],
.hxa-page-anim .hxa-card[b-2pbr7bjw9a],
.hxa-page-anim .hxa-vera[b-2pbr7bjw9a],
.hxa-page-anim .hxa-sync-strip[b-2pbr7bjw9a],
.hxa-page-anim .hxa-predict-strip[b-2pbr7bjw9a],
.hxa-page-anim .hxa-conn-sec[b-2pbr7bjw9a],
.hxa-page-anim .hxa-conn-sec-head[b-2pbr7bjw9a],
.hxa-page-anim .hxa-flows[b-2pbr7bjw9a],
.hxa-page-anim .hxa-intel[b-2pbr7bjw9a],
.hxa-page-anim .hxa-rep-layout[b-2pbr7bjw9a],
.hxa-page-anim .hxa-wf-templates[b-2pbr7bjw9a],
.hxa-page-anim .hxa-note[b-2pbr7bjw9a] {
    animation: hxa-rise-b-2pbr7bjw9a 0.4s ease both;
}

.hxa-page-anim .hxa-kpi:nth-child(2)[b-2pbr7bjw9a] { animation-delay: 60ms; }
.hxa-page-anim .hxa-kpi:nth-child(3)[b-2pbr7bjw9a] { animation-delay: 120ms; }
.hxa-page-anim .hxa-kpi:nth-child(4)[b-2pbr7bjw9a] { animation-delay: 180ms; }
.hxa-page-anim .hxa-panel:nth-child(2)[b-2pbr7bjw9a] { animation-delay: 120ms; }
.hxa-page-anim .hxa-card:nth-child(2)[b-2pbr7bjw9a] { animation-delay: 90ms; }
.hxa-page-anim .hxa-card:nth-child(3)[b-2pbr7bjw9a] { animation-delay: 180ms; }
.hxa-page-anim .hxa-gridwrap[b-2pbr7bjw9a] { animation-delay: 60ms; }
.hxa-page-anim .hxa-pager[b-2pbr7bjw9a] { animation-delay: 140ms; }
.hxa-page-anim .hxa-note[b-2pbr7bjw9a] { animation-delay: 200ms; }

.hxa-page-anim .hxa-grid tbody tr[b-2pbr7bjw9a] {
    animation: hxa-rise-b-2pbr7bjw9a 0.35s ease both;
    animation-delay: calc(90ms + var(--i, 0) * 45ms);
}

@keyframes hxa-rise-b-2pbr7bjw9a {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* ── Dashboard AI decision brief ───────────────────────────────────────── */

.hxa-intel[b-2pbr7bjw9a] { margin-bottom: 20px; }

.hxa-intel-grid[b-2pbr7bjw9a] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.hxa-intel-card[b-2pbr7bjw9a] {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--hxa-line);
    border-left-width: 3px;
    border-radius: 6px;
    background: linear-gradient(145deg, var(--hxa-card), var(--hxa-accent-tint));
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hxa-intel-card:hover[b-2pbr7bjw9a] {
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.09);
}

/* Severity accent + tinted wash per AI brief card (card redesign 2026-08-09) */
.hxa-intel-err[b-2pbr7bjw9a] { border-left-color: var(--hxa-err); background: linear-gradient(145deg, var(--hxa-card), rgba(196, 43, 28, 0.07)); }
.hxa-intel-warn[b-2pbr7bjw9a] { border-left-color: var(--hxa-warn); background: linear-gradient(145deg, var(--hxa-card), rgba(255, 140, 0, 0.08)); }
.hxa-intel-info[b-2pbr7bjw9a] { border-left-color: var(--hxa-info); background: linear-gradient(145deg, var(--hxa-card), rgba(0, 120, 212, 0.07)); }
.hxa-intel-ok[b-2pbr7bjw9a] { border-left-color: var(--hxa-ok); background: linear-gradient(145deg, var(--hxa-card), rgba(14, 112, 14, 0.07)); }
.hxa-intel-off[b-2pbr7bjw9a] { border-left-color: var(--hxa-soft); }

.hxa-intel-top[b-2pbr7bjw9a] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
}

.hxa-intel-model[b-2pbr7bjw9a] {
    overflow: hidden;
    color: var(--hxa-ink);
    font-size: 0.6875rem;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.hxa-intel-signal[b-2pbr7bjw9a] {
    min-height: 2.5em;
    margin: 8px 0 6px;
    color: var(--hxa-soft);
    font-size: 0.71875rem;
    line-height: 1.35;
}

.hxa-intel-action[b-2pbr7bjw9a] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--hxa-accent-strong);
    font-size: 0.65625rem;
    font-weight: 700;
}

.hxa-intel-action svg[b-2pbr7bjw9a] { width: 11px; height: 11px; flex-shrink: 0; }

.hxa-intel-foot[b-2pbr7bjw9a] {
    margin: 9px 0 0;
    color: var(--hxa-faint);
    font-size: 0.625rem;
    line-height: 1.4;
}

/* ── Executive command-center entry ────────────────────────────────────── */

.hxa-command[b-2pbr7bjw9a] {
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--hxa-accent) 28%, var(--hxa-line));
    border-radius: 8px;
    background: linear-gradient(135deg, var(--hxa-card) 20%, var(--hxa-accent-tint));
}

.hxa-command-intro[b-2pbr7bjw9a] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--hxa-line);
}

.hxa-command-eyebrow[b-2pbr7bjw9a] {
    display: block;
    margin-bottom: 3px;
    color: var(--hxa-accent-strong);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.hxa-command-title[b-2pbr7bjw9a] {
    display: block;
    color: var(--hxa-ink);
    font-size: 1rem;
    line-height: 1.25;
}

.hxa-command-copy[b-2pbr7bjw9a] {
    max-width: 670px;
    margin: 5px 0 0;
    color: var(--hxa-soft);
    font-size: 0.71875rem;
    line-height: 1.45;
}

.hxa-command-proof[b-2pbr7bjw9a] {
    display: grid;
    grid-template-columns: repeat(4, minmax(56px, auto));
    gap: 7px;
}

.hxa-command-metric[b-2pbr7bjw9a] {
    display: grid;
    justify-items: center;
    padding: 7px 8px;
    border: 1px solid var(--hxa-line);
    border-radius: 6px;
    background: var(--hxa-card);
}

.hxa-command-metric strong[b-2pbr7bjw9a] { color: var(--hxa-accent-strong); font-size: 0.9375rem; }
.hxa-command-metric small[b-2pbr7bjw9a] { color: var(--hxa-faint); font-size: 0.5625rem; white-space: nowrap; }

.hxa-command-paths[b-2pbr7bjw9a] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.hxa-command-role[b-2pbr7bjw9a] {
    position: relative;
    display: grid;
    align-content: start;
    gap: 4px;
    min-width: 0;
    min-height: 92px;
    padding: 10px 12px;
    border-right: 1px solid var(--hxa-line);
    color: var(--hxa-ink);
    text-align: left;
    transition: background 0.15s ease;
}

.hxa-command-role:last-child[b-2pbr7bjw9a] { border-right: 0; }
.hxa-command-role:hover[b-2pbr7bjw9a] { background: var(--hxa-hover); }

.hxa-command-role-name[b-2pbr7bjw9a] {
    color: var(--hxa-accent-strong);
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
}

.hxa-command-role strong[b-2pbr7bjw9a] { padding-right: 15px; font-size: 0.71875rem; line-height: 1.3; }
.hxa-command-role small[b-2pbr7bjw9a] { color: var(--hxa-soft); font-size: 0.625rem; line-height: 1.35; }

.hxa-command-arrow[b-2pbr7bjw9a] {
    position: absolute;
    top: 10px;
    right: 9px;
    color: var(--hxa-accent);
}

/* ── Decision evidence + report packs ──────────────────────────────────── */

.hxa-decision-evidence[b-2pbr7bjw9a],
.hxa-report-pack[b-2pbr7bjw9a] { margin-top: 20px; }

.hxa-decision-evidence .hxa-gridwrap[b-2pbr7bjw9a] { margin: 0; border: 0; border-radius: 0; }

.hxa-report-pack-grid[b-2pbr7bjw9a] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.hxa-report-pack-item[b-2pbr7bjw9a] {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--hxa-line);
    border-radius: 6px;
    background: var(--hxa-card);
}

.hxa-report-pack-item > strong[b-2pbr7bjw9a] {
    color: var(--hxa-ink);
    font-size: 0.71875rem;
    line-height: 1.3;
}

.hxa-report-pack-item > span[b-2pbr7bjw9a] {
    color: var(--hxa-soft);
    font-size: 0.625rem;
}

.hxa-report-pack-item > div[b-2pbr7bjw9a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.hxa-report-pack-item small[b-2pbr7bjw9a] {
    overflow: hidden;
    color: var(--hxa-faint);
    font-size: 0.59375rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── KPI cards ──────────────────────────────────────────────────────────── */

.hxa-kpis[b-2pbr7bjw9a] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.hxa-kpi[b-2pbr7bjw9a] {
    display: grid;
    gap: 3px;
    padding: 15px 16px;
    background: var(--hxa-card);
    border: 1px solid var(--hxa-line-soft);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.hxa-kpi-icon[b-2pbr7bjw9a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    margin-bottom: 3px;
}

.hxa-tint-green[b-2pbr7bjw9a] { background: rgba(0, 123, 49, 0.12); color: #007b31; }
.hxa-tint-blue[b-2pbr7bjw9a] { background: rgba(0, 120, 212, 0.12); color: #0078d4; }
.hxa-tint-amber[b-2pbr7bjw9a] { background: rgba(255, 140, 0, 0.14); color: #b45309; }
.hxa-tint-purple[b-2pbr7bjw9a] { background: rgba(135, 100, 184, 0.16); color: #8764b8; }

.hxa-app[data-hxa-theme="dark"] .hxa-tint-green[b-2pbr7bjw9a] { color: #56c188; }
.hxa-app[data-hxa-theme="dark"] .hxa-tint-blue[b-2pbr7bjw9a] { color: #6cb8f6; }
.hxa-app[data-hxa-theme="dark"] .hxa-tint-amber[b-2pbr7bjw9a] { color: #f0a75e; }
.hxa-app[data-hxa-theme="dark"] .hxa-tint-purple[b-2pbr7bjw9a] { color: #b9a0e0; }

.hxa-kpi-label[b-2pbr7bjw9a] {
    font-size: 0.65625rem;
    color: var(--hxa-soft);
}

.hxa-kpi-value[b-2pbr7bjw9a] {
    font-size: 1.375rem;
    font-weight: 650;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.hxa-kpi-delta[b-2pbr7bjw9a] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.625rem;
    color: var(--hxa-faint);
}

.hxa-delta-up[b-2pbr7bjw9a] { color: var(--hxa-ok); }

.hxa-delta-down[b-2pbr7bjw9a] { color: var(--hxa-err); }

/* ── Panels (dashboard) ─────────────────────────────────────────────────── */

.hxa-duo[b-2pbr7bjw9a] {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.hxa-panel[b-2pbr7bjw9a] {
    padding: 16px 18px;
    background: var(--hxa-card);
    border: 1px solid var(--hxa-line-soft);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    min-width: 0;
}

.hxa-panel-head[b-2pbr7bjw9a] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.hxa-panel-head h4[b-2pbr7bjw9a] {
    margin: 0;
    font-size: 0.78125rem;
    font-weight: 700;
    color: var(--hxa-ink);
}

.hxa-panel-sub[b-2pbr7bjw9a] {
    font-size: 0.625rem;
    color: var(--hxa-faint);
    white-space: nowrap;
}

.hxa-panel-foot[b-2pbr7bjw9a] {
    margin: 8px 0 0;
    font-size: 0.625rem;
    color: var(--hxa-faint);
}

/* CSS bar chart */

.hxa-bars[b-2pbr7bjw9a] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 148px;
}

.hxa-bar[b-2pbr7bjw9a] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.hxa-bar-val[b-2pbr7bjw9a] {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--hxa-soft);
    font-variant-numeric: tabular-nums;
}

.hxa-bar-fill[b-2pbr7bjw9a] {
    width: 100%;
    max-width: 34px;
    height: calc(var(--h, 50) * 1.1px);
    border-radius: 4px 4px 2px 2px;
    background: var(--hxa-accent);
    transition: height 0.7s cubic-bezier(0.22, 0.9, 0.36, 1);
}

.hxa-bar-warn .hxa-bar-fill[b-2pbr7bjw9a] { background: #d97706; }

.hxa-bar-warn .hxa-bar-val[b-2pbr7bjw9a] { color: var(--hxa-warn); }

.hxa-bar-day[b-2pbr7bjw9a] {
    font-size: 0.625rem;
    color: var(--hxa-faint);
}

/* Bars start collapsed only when the page animates in */

.hxa-page-anim .hxa-bars:not(.hxa-bars-grow) .hxa-bar-fill[b-2pbr7bjw9a] { height: 4px; }

/* Coverage list */

.hxa-cover[b-2pbr7bjw9a] { display: grid; }

.hxa-cover-row[b-2pbr7bjw9a] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 8.5px 0;
    border-bottom: 1px solid var(--hxa-line-soft);
}

.hxa-cover-row:last-child[b-2pbr7bjw9a] { border-bottom: 0; }

.hxa-cover-name[b-2pbr7bjw9a] {
    font-size: 0.75rem;
    font-weight: 600;
}

.hxa-cover-meta[b-2pbr7bjw9a] {
    font-size: 0.6875rem;
    color: var(--hxa-soft);
    font-variant-numeric: tabular-nums;
}

/* ── Chips, tags, status ────────────────────────────────────────────────── */

.hxa-chip[b-2pbr7bjw9a] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 99px;
    font-size: 0.625rem;
    font-weight: 700;
    white-space: nowrap;
}

.hxa-chip-ok[b-2pbr7bjw9a] { background: rgba(14, 112, 14, 0.12); color: var(--hxa-ok); }
.hxa-chip-warn[b-2pbr7bjw9a] { background: rgba(255, 140, 0, 0.16); color: var(--hxa-warn); }
.hxa-chip-err[b-2pbr7bjw9a] { background: rgba(196, 43, 28, 0.12); color: var(--hxa-err); }
.hxa-chip-info[b-2pbr7bjw9a] { background: rgba(0, 120, 212, 0.12); color: var(--hxa-info); }
.hxa-chip-off[b-2pbr7bjw9a] { background: var(--hxa-line-soft); color: var(--hxa-soft); }

.hxa-chip-busy[b-2pbr7bjw9a]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    animation: hxa-spin-b-2pbr7bjw9a 0.7s linear infinite;
}

@keyframes hxa-spin-b-2pbr7bjw9a {
    to { transform: rotate(360deg); }
}

.hxa-tags[b-2pbr7bjw9a] { display: inline-flex; gap: 4px; }

.hxa-tag[b-2pbr7bjw9a] {
    padding: 1.5px 7px;
    border: 1px solid var(--hxa-line);
    border-radius: 4px;
    font-size: 0.59375rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--hxa-soft);
    background: var(--hxa-bg);
}

.hxa-status[b-2pbr7bjw9a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.hxa-status-dot[b-2pbr7bjw9a] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.hxa-status-ok[b-2pbr7bjw9a] { color: var(--hxa-ok); }
.hxa-status-off[b-2pbr7bjw9a] { color: var(--hxa-warn); }
.hxa-status-info[b-2pbr7bjw9a] { color: var(--hxa-info); }

.hxa-status-ok .hxa-status-dot[b-2pbr7bjw9a] { box-shadow: 0 0 0 3px rgba(14, 112, 14, 0.15); }

/* ── Grid toolbar ───────────────────────────────────────────────────────── */

.hxa-toolbar[b-2pbr7bjw9a] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.hxa-search[b-2pbr7bjw9a] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    max-width: 340px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--hxa-line);
    border-bottom-color: var(--hxa-soft);
    border-radius: 5px;
    background: var(--hxa-card);
    font-size: 0.71875rem;
    color: var(--hxa-ink);
    overflow: hidden;
    white-space: nowrap;
}

.hxa-search svg[b-2pbr7bjw9a] { color: var(--hxa-soft); flex-shrink: 0; }

.hxa-search-ph[b-2pbr7bjw9a] { color: var(--hxa-faint); }

.hxa-search-caret[b-2pbr7bjw9a] {
    border-right: 1.5px solid var(--hxa-accent);
    padding-right: 1px;
    animation: hxa-caret-b-2pbr7bjw9a 0.8s step-end infinite;
}

@keyframes hxa-caret-b-2pbr7bjw9a {
    50% { border-color: transparent; }
}

.hxa-toolbar-btns[b-2pbr7bjw9a] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
}

.hxa-btn[b-2pbr7bjw9a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 11px;
    border: 1px solid var(--hxa-line);
    border-radius: 5px;
    background: var(--hxa-card);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--hxa-ink);
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.hxa-btn:hover[b-2pbr7bjw9a] { background: var(--hxa-hover); }

.hxa-btn-primary[b-2pbr7bjw9a],
.hxa-btn-primary:hover[b-2pbr7bjw9a] {
    background: var(--hxa-accent);
    border-color: var(--hxa-accent);
    color: #ffffff;
}

.hxa-btn-primary:hover[b-2pbr7bjw9a] { background: var(--hxa-accent-strong); border-color: var(--hxa-accent-strong); }

.hxa-app[data-hxa-theme="dark"] .hxa-btn-primary[b-2pbr7bjw9a] { color: #10130f; }

.hxa-app[data-hxa-theme="dark"] .hxa-btn-primary:hover[b-2pbr7bjw9a] { color: #10130f; }

/* ── Data grid ──────────────────────────────────────────────────────────── */

.hxa-gridwrap[b-2pbr7bjw9a] {
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--hxa-line-soft);
    border-radius: 8px;
    background: var(--hxa-card);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.hxa-grid[b-2pbr7bjw9a] {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 0.71875rem;
    line-height: 1.4;
}

.hxa-grid th[b-2pbr7bjw9a] {
    padding: 8px 12px;
    text-align: left;
    font-size: 0.65625rem;
    font-weight: 700;
    color: var(--hxa-soft);
    border-bottom: 1px solid var(--hxa-line);
    white-space: nowrap;
    background: var(--hxa-card);
}

.hxa-sortable[b-2pbr7bjw9a] { cursor: pointer; -webkit-user-select: none; user-select: none; }

.hxa-sortable:hover[b-2pbr7bjw9a] { color: var(--hxa-ink); }

.hxa-sort-caret[b-2pbr7bjw9a] {
    margin-left: 4px;
    opacity: 0;
    vertical-align: -1px;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.hxa-sortable:hover .hxa-sort-caret[b-2pbr7bjw9a] { opacity: 0.5; }

.hxa-grid th[aria-sort="ascending"] .hxa-sort-caret[b-2pbr7bjw9a] { opacity: 1; transform: rotate(180deg); }

.hxa-grid th[aria-sort="descending"] .hxa-sort-caret[b-2pbr7bjw9a] { opacity: 1; }

.hxa-grid td[b-2pbr7bjw9a] {
    padding: 7px 12px;
    border-bottom: 1px solid var(--hxa-line-soft);
    white-space: nowrap;
    color: var(--hxa-ink);
}

.hxa-grid tbody tr[b-2pbr7bjw9a] { transition: background 0.12s ease; }

.hxa-grid tbody tr:hover[b-2pbr7bjw9a] { background: var(--hxa-accent-tint); }

.hxa-grid tbody tr:last-child td[b-2pbr7bjw9a] { border-bottom: 0; }

.hxa-row-hidden[b-2pbr7bjw9a] { display: none; }

.hxa-cell-title[b-2pbr7bjw9a] { line-height: 1.25; }

.hxa-cell-name[b-2pbr7bjw9a] {
    display: block;
    font-weight: 600;
    color: var(--hxa-accent-strong);
}

.hxa-cell-sub[b-2pbr7bjw9a] {
    display: block;
    font-size: 0.625rem;
    color: var(--hxa-faint);
    margin-top: 1px;
    white-space: normal;
}

.hxa-cell-flash[b-2pbr7bjw9a] {
    color: var(--hxa-ok);
    font-weight: 600;
}

.hxa-col-center[b-2pbr7bjw9a] { text-align: center; }

.hxa-col-menu[b-2pbr7bjw9a] { text-align: right; width: 40px; }

.hxa-row-more[b-2pbr7bjw9a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    color: var(--hxa-soft);
    transition: background 0.15s ease;
}

.hxa-row-more:hover[b-2pbr7bjw9a],
.hxa-row-more[aria-expanded="true"][b-2pbr7bjw9a] { background: var(--hxa-hover); color: var(--hxa-ink); }

.hxa-cell-btn[b-2pbr7bjw9a] {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border: 1px solid var(--hxa-accent);
    border-radius: 5px;
    font-size: 0.65625rem;
    font-weight: 600;
    color: var(--hxa-accent-strong);
    background: transparent;
    transition: background 0.15s ease;
}

.hxa-cell-btn:hover[b-2pbr7bjw9a] { background: var(--hxa-accent-tint); }

/* Rule toggle switch */

.hxa-switch[b-2pbr7bjw9a] {
    position: relative;
    display: inline-flex;
    width: 34px;
    height: 18px;
    border-radius: 99px;
    border: 1px solid var(--hxa-line);
    background: var(--hxa-bg);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.hxa-switch-knob[b-2pbr7bjw9a] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--hxa-soft);
    transition: translate 0.2s ease, background 0.2s ease;
}

.hxa-switch[aria-pressed="true"][b-2pbr7bjw9a] {
    background: var(--hxa-accent);
    border-color: var(--hxa-accent);
}

.hxa-switch[aria-pressed="true"] .hxa-switch-knob[b-2pbr7bjw9a] {
    translate: 16px 0;
    background: #ffffff;
}

/* Pager */

.hxa-pager[b-2pbr7bjw9a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    font-size: 0.65625rem;
    color: var(--hxa-faint);
}

.hxa-pager-btns[b-2pbr7bjw9a] { display: inline-flex; gap: 4px; }

.hxa-pager-btn[b-2pbr7bjw9a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--hxa-line);
    border-radius: 5px;
    background: var(--hxa-card);
    color: var(--hxa-soft);
    font-size: 0.8125rem;
    line-height: 1;
}

.hxa-pager-btn:hover[b-2pbr7bjw9a] { background: var(--hxa-hover); }

/* ── Connector cards ────────────────────────────────────────────────────── */

.hxa-cards[b-2pbr7bjw9a] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.hxa-card[b-2pbr7bjw9a] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
    background: var(--hxa-card);
    border: 1px solid var(--hxa-line-soft);
    border-top: 3px solid var(--hxa-line-soft);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    min-width: 0;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hxa-card:hover[b-2pbr7bjw9a] {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.09);
}

/* Signal-colored accent bar per card (card redesign 2026-08-09) */
.hxa-card-ok[b-2pbr7bjw9a] { border-top-color: var(--hxa-ok); }
.hxa-card-warn[b-2pbr7bjw9a] { border-top-color: var(--hxa-warn); }
.hxa-card-err[b-2pbr7bjw9a] { border-top-color: var(--hxa-err); }
.hxa-card-info[b-2pbr7bjw9a] { border-top-color: var(--hxa-info); }
.hxa-card-off[b-2pbr7bjw9a] { border-top-color: var(--hxa-soft); }

.hxa-card-head[b-2pbr7bjw9a] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

/* Status icon medallion - the eye anchor of every decision card */
.hxa-card-ic[b-2pbr7bjw9a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    flex-shrink: 0;
}

.hxa-cic-ok[b-2pbr7bjw9a] { background: rgba(14, 112, 14, 0.12); color: var(--hxa-ok); }
.hxa-cic-warn[b-2pbr7bjw9a] { background: rgba(255, 140, 0, 0.16); color: var(--hxa-warn); }
.hxa-cic-err[b-2pbr7bjw9a] { background: rgba(196, 43, 28, 0.12); color: var(--hxa-err); }
.hxa-cic-info[b-2pbr7bjw9a] { background: rgba(0, 120, 212, 0.12); color: var(--hxa-info); }
.hxa-cic-off[b-2pbr7bjw9a] { background: var(--hxa-line-soft); color: var(--hxa-soft); }

.hxa-card-chip[b-2pbr7bjw9a] { flex-shrink: 0; }

.hxa-card-titles[b-2pbr7bjw9a] { display: grid; gap: 2px; min-width: 0; flex: 1; }

/* Clickable decision cards - the name button is the keyboard path,
   whole-card click works via delegation */
.hxa-card-click[b-2pbr7bjw9a] { cursor: pointer; }

.hxa-card-name[b-2pbr7bjw9a] {
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.hxa-card-name:focus-visible[b-2pbr7bjw9a] {
    outline: 2px solid var(--hxa-accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* KPI tiles and AI-brief cards rendered as buttons (they navigate) */
button.hxa-kpi[b-2pbr7bjw9a],
button.hxa-intel-card[b-2pbr7bjw9a] {
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
}

button.hxa-kpi[b-2pbr7bjw9a] {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

button.hxa-kpi:hover[b-2pbr7bjw9a] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

button.hxa-kpi:focus-visible[b-2pbr7bjw9a],
button.hxa-intel-card:focus-visible[b-2pbr7bjw9a] {
    outline: 2px solid var(--hxa-accent);
    outline-offset: 2px;
}

/* Card detail drawer */
.hxa-card-detail-head[b-2pbr7bjw9a] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.hxa-card-detail-kind[b-2pbr7bjw9a] {
    margin: 0;
    color: var(--hxa-soft);
    font-size: 0.71875rem;
}

.hxa-card-detail-rows dd[b-2pbr7bjw9a] {
    white-space: normal;
    text-align: right;
}

.hxa-card-detail-sub[b-2pbr7bjw9a] {
    margin: 14px 0 6px;
    font-size: 0.71875rem;
    color: var(--hxa-ink);
}

.hxa-card-titles strong[b-2pbr7bjw9a] { font-size: 0.78125rem; }

.hxa-card-kind[b-2pbr7bjw9a] {
    font-size: 0.625rem;
    color: var(--hxa-faint);
}

.hxa-card-rows[b-2pbr7bjw9a] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 12px;
    margin: 0;
    font-size: 0.6875rem;
}

.hxa-card-rows dt[b-2pbr7bjw9a] { color: var(--hxa-faint); }

.hxa-card-rows dd[b-2pbr7bjw9a] {
    margin: 0;
    color: var(--hxa-ink);
    font-weight: 600;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hxa-card-act[b-2pbr7bjw9a] { align-self: flex-start; margin-top: auto; }

.hxa-progress[b-2pbr7bjw9a] {
    height: 4px;
    border-radius: 99px;
    background: var(--hxa-line-soft);
    overflow: hidden;
}

.hxa-progress-fill[b-2pbr7bjw9a] {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 99px;
    background: var(--hxa-accent);
    transition: width 1.4s ease;
}

/* ── Vera mini page ─────────────────────────────────────────────────────── */

.hxa-vera[b-2pbr7bjw9a] {
    max-width: 540px;
    display: grid;
    gap: 10px;
    padding: 16px;
    background: var(--hxa-card);
    border: 1px solid var(--hxa-line-soft);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.hxa-vera-brand[b-2pbr7bjw9a] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.71875rem;
    font-weight: 700;
    color: var(--hxa-accent-strong);
}

.hxa-vera-brand svg[b-2pbr7bjw9a] { color: var(--hxa-accent); }

.hxa-vera-user[b-2pbr7bjw9a] {
    justify-self: end;
    max-width: 85%;
    padding: 8px 13px;
    border-radius: 14px 14px 4px 14px;
    background: var(--hxa-accent-soft);
    color: var(--hxa-ink);
    font-size: 0.75rem;
}

.hxa-vera-tool[b-2pbr7bjw9a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.625rem;
    color: var(--hxa-faint);
}

.hxa-vera-tool svg[b-2pbr7bjw9a] { color: var(--hxa-ok); }

.hxa-vera-answer[b-2pbr7bjw9a] {
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--hxa-ink);
}

/* ── Apex chart panels ──────────────────────────────────────────────────── */

.hxa-chart[b-2pbr7bjw9a] {
    min-width: 0;
}

.hxa-duo-single[b-2pbr7bjw9a] {
    grid-template-columns: 1fr;
    margin-bottom: 10px;
}

.hxa-duo + .hxa-toolbar[b-2pbr7bjw9a],
.hxa-duo + .hxa-gridwrap[b-2pbr7bjw9a] {
    margin-top: 12px;
}

/* ── Timesheet (karnet) matrix ──────────────────────────────────────────── */

.hxa-ts-legend[b-2pbr7bjw9a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65625rem;
    color: var(--hxa-soft);
    flex-wrap: wrap;
}

.hxa-code[b-2pbr7bjw9a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 1px 4px;
    border-radius: 4px;
    font-size: 0.59375rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.hxa-code-r[b-2pbr7bjw9a] { background: rgba(14, 112, 14, 0.12); color: var(--hxa-ok); }
.hxa-code-ot[b-2pbr7bjw9a] { background: rgba(255, 140, 0, 0.16); color: var(--hxa-warn); }
.hxa-code-al[b-2pbr7bjw9a] { background: rgba(0, 120, 212, 0.12); color: var(--hxa-info); }
.hxa-code-sl[b-2pbr7bjw9a] { background: rgba(196, 43, 28, 0.12); color: var(--hxa-err); }

.hxa-ts-table[b-2pbr7bjw9a] { min-width: 1180px; }

.hxa-ts-table th.hxa-ts-day[b-2pbr7bjw9a] {
    text-align: center;
    padding: 5px 4px;
    line-height: 1.15;
}

.hxa-ts-table th.hxa-ts-day small[b-2pbr7bjw9a] {
    display: block;
    font-weight: 400;
    color: var(--hxa-faint);
}

.hxa-ts-table td.hxa-ts-cell[b-2pbr7bjw9a] {
    text-align: center;
    padding: 4px 3px;
}

.hxa-diff-pos[b-2pbr7bjw9a] {
    color: var(--hxa-ok);
    font-weight: 600;
}

/* Live-appended stream rows */

.hxa-row-live[b-2pbr7bjw9a] {
    animation: hxa-rise-b-2pbr7bjw9a 0.35s ease both;
}

.hxa-row-live .hxa-cell-name[b-2pbr7bjw9a],
.hxa-row-live td:first-child[b-2pbr7bjw9a] {
    position: relative;
}

/* ── Sync provenance pills (after breadcrumbs) ─────────────────────── */

.hxa-sync-strip[b-2pbr7bjw9a] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px;
}

.hxa-sync-label[b-2pbr7bjw9a] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hxa-faint);
}

.hxa-sync-pill[b-2pbr7bjw9a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2.5px 9px;
    border: 1px solid var(--hxa-line);
    border-radius: 99px;
    background: var(--hxa-card);
    font-size: 0.65625rem;
    font-weight: 600;
    color: var(--hxa-ink);
    white-space: nowrap;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.hxa-sync-pill:hover[b-2pbr7bjw9a] {
    border-color: var(--hxa-accent);
    background: var(--hxa-accent-tint);
}

.hxa-sync-pill .hxa-status-dot[b-2pbr7bjw9a] { width: 6px; height: 6px; }

.hxa-sync-connected .hxa-status-dot[b-2pbr7bjw9a] { background: var(--hxa-ok); box-shadow: 0 0 0 2.5px rgba(14, 112, 14, 0.15); }
.hxa-sync-available .hxa-status-dot[b-2pbr7bjw9a] { background: var(--hxa-info); }
.hxa-sync-soon .hxa-status-dot[b-2pbr7bjw9a] { background: var(--hxa-soft); }

.hxa-sync-dir[b-2pbr7bjw9a] {
    display: inline-flex;
    color: var(--hxa-soft);
    flex-shrink: 0;
}

.hxa-sync-when[b-2pbr7bjw9a] {
    font-weight: 400;
    color: var(--hxa-faint);
}

/* Per-row source provenance chip (IConnectorTracked) */

.hxa-src[b-2pbr7bjw9a] {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 0 4px;
    border: 1px solid var(--hxa-line);
    border-radius: 4px;
    background: var(--hxa-bg);
    font-size: 0.53125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--hxa-soft);
    vertical-align: 1px;
    cursor: help;
}

/* ── Governance note ────────────────────────────────────────────────────── */

.hxa-note[b-2pbr7bjw9a] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--hxa-accent-tint);
    border: 1px solid var(--hxa-line-soft);
    border-left: 3px solid var(--hxa-accent);
    border-radius: 8px;
    font-size: 0.6875rem;
    color: var(--hxa-ink);
}

.hxa-note svg[b-2pbr7bjw9a] { color: var(--hxa-accent); flex-shrink: 0; margin-top: 1px; }

/* ── Menus ──────────────────────────────────────────────────────────────── */

.hxa-pick[b-2pbr7bjw9a] {
    position: relative;
    display: inline-flex;
}

.hxa-menu[b-2pbr7bjw9a] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    min-width: 212px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px;
    background: var(--hxa-card);
    border: 1px solid var(--hxa-line);
    border-radius: 10px;
    box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.10);
    text-align: left;
}

.hxa-menu[hidden][b-2pbr7bjw9a] { display: none; }

.hxa-menu-right[b-2pbr7bjw9a] { left: auto; right: 0; }

.hxa-menu-head[b-2pbr7bjw9a] {
    font-size: 0.59375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--hxa-soft);
    padding: 5px 9px 3px;
    white-space: nowrap;
}

.hxa-menu-item[b-2pbr7bjw9a] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 9px;
    border-radius: 7px;
    font-size: 0.71875rem;
    font-weight: 600;
    color: var(--hxa-ink);
    transition: background 0.12s ease;
}

.hxa-menu-item:hover[b-2pbr7bjw9a] { background: var(--hxa-accent-tint); }

.hxa-menu-item[aria-pressed="true"][b-2pbr7bjw9a] { background: var(--hxa-accent-tint); }

.hxa-menu-check[b-2pbr7bjw9a] {
    color: var(--hxa-accent);
    opacity: 0;
    flex-shrink: 0;
}

.hxa-menu-item[aria-pressed="true"] .hxa-menu-check[b-2pbr7bjw9a] { opacity: 1; }

.hxa-menu-text[b-2pbr7bjw9a] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.hxa-menu-text small[b-2pbr7bjw9a] {
    font-size: 0.625rem;
    font-weight: 400;
    color: var(--hxa-faint);
}

.hxa-menu-dot[b-2pbr7bjw9a] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.hxa-dot-ok[b-2pbr7bjw9a] { background: var(--hxa-ok); }
.hxa-dot-warn[b-2pbr7bjw9a] { background: #d97706; }
.hxa-dot-err[b-2pbr7bjw9a] { background: var(--hxa-err); }

/* Tenant tree menu */

.hxa-menu-scroll[b-2pbr7bjw9a] {
    max-height: 330px;
    overflow-y: auto;
}

.hxa-menu-item.hxa-ti-1[b-2pbr7bjw9a] { padding-left: 24px; }
.hxa-menu-item.hxa-ti-2[b-2pbr7bjw9a] { padding-left: 40px; }

/* ── Connectors page v2 ─────────────────────────────────────────────────── */

.hxa-conn-toolbar[b-2pbr7bjw9a] { flex-wrap: wrap; }

.hxa-search-live[b-2pbr7bjw9a] {
    cursor: text;
}

.hxa-search-input[b-2pbr7bjw9a] {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--hxa-ink);
    outline: none;
}

.hxa-search-input[b-2pbr7bjw9a]::placeholder { color: var(--hxa-faint); }

.hxa-search-live:focus-within[b-2pbr7bjw9a] {
    border-color: var(--hxa-accent);
    border-bottom-color: var(--hxa-accent);
}

.hxa-conn-filters[b-2pbr7bjw9a] {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: auto;
}

.hxa-filter-chip[b-2pbr7bjw9a] {
    padding: 4px 11px;
    border: 1px solid var(--hxa-line);
    border-radius: 99px;
    background: var(--hxa-card);
    font-size: 0.65625rem;
    font-weight: 600;
    color: var(--hxa-soft);
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hxa-filter-chip:hover[b-2pbr7bjw9a] { border-color: var(--hxa-accent); color: var(--hxa-ink); }

.hxa-filter-chip[aria-pressed="true"][b-2pbr7bjw9a] {
    background: var(--hxa-accent);
    border-color: var(--hxa-accent);
    color: #ffffff;
}

.hxa-app[data-hxa-theme="dark"] .hxa-filter-chip[aria-pressed="true"][b-2pbr7bjw9a] { color: #10130f; }

.hxa-conn-sec[b-2pbr7bjw9a] { margin-bottom: 14px; }

.hxa-conn-sec-head[b-2pbr7bjw9a] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 7px;
    font-size: 0.65625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--hxa-soft);
}

.hxa-conn-sec-count[b-2pbr7bjw9a] {
    padding: 0 7px;
    border-radius: 99px;
    background: var(--hxa-line-soft);
    font-size: 0.59375rem;
    color: var(--hxa-faint);
}

.hxa-conn-grid[b-2pbr7bjw9a] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 8px;
}

.hxa-conn-card[b-2pbr7bjw9a] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 9px 11px;
    border: 1px solid var(--hxa-line-soft);
    border-radius: 8px;
    background: var(--hxa-card);
    cursor: pointer;
    text-align: left;
    min-width: 0;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.hxa-conn-card:hover[b-2pbr7bjw9a] {
    border-color: var(--hxa-accent);
    background: var(--hxa-accent-tint);
}

.hxa-conn-card:focus-visible[b-2pbr7bjw9a] {
    outline: 2px solid var(--hxa-accent);
    outline-offset: 1px;
}

.hxa-conn-head[b-2pbr7bjw9a] {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.hxa-conn-name[b-2pbr7bjw9a] {
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 0.71875rem;
    font-weight: 700;
    color: var(--hxa-ink);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hxa-conn-name:focus-visible[b-2pbr7bjw9a] {
    outline: 2px solid var(--hxa-accent);
    outline-offset: 2px;
    border-radius: 3px;
}

.hxa-conn-fp[b-2pbr7bjw9a] {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 99px;
    background: var(--hxa-accent-soft);
    color: var(--hxa-accent-strong);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
    flex-shrink: 0;
}

.hxa-conn-meta[b-2pbr7bjw9a] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.625rem;
    color: var(--hxa-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hxa-conn-foot[b-2pbr7bjw9a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 1px;
}

.hxa-conn-when[b-2pbr7bjw9a] {
    font-size: 0.59375rem;
    color: var(--hxa-faint);
}

.hxa-conn-empty[b-2pbr7bjw9a] {
    margin: 8px 0 0;
    font-size: 0.71875rem;
    color: var(--hxa-faint);
}

/* ── Data flows panel (dashboard) ───────────────────────────────────────── */

.hxa-flows[b-2pbr7bjw9a] { margin-top: 10px; }

.hxa-flows-viz[b-2pbr7bjw9a] {
    display: grid;
    grid-template-columns: 1fr auto 1.05fr auto 1fr;
    align-items: center;
    gap: 10px;
}

.hxa-flows-col[b-2pbr7bjw9a] {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.hxa-flow-item[b-2pbr7bjw9a] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4.5px 9px;
    border: 1px solid var(--hxa-line-soft);
    border-radius: 6px;
    background: var(--hxa-bg);
    font-size: 0.65625rem;
    font-weight: 600;
    color: var(--hxa-ink);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color 0.15s ease;
}

.hxa-flow-item .hxa-status-dot[b-2pbr7bjw9a] {
    width: 6px;
    height: 6px;
    background: var(--hxa-ok);
    flex-shrink: 0;
}

button.hxa-flow-item[b-2pbr7bjw9a] { cursor: pointer; }

button.hxa-flow-item:hover[b-2pbr7bjw9a] { border-color: var(--hxa-accent); }

.hxa-flow-dir[b-2pbr7bjw9a] {
    display: inline-flex;
    color: var(--hxa-soft);
    margin-left: auto;
    flex-shrink: 0;
}

.hxa-flow-out .hxa-flow-dir[b-2pbr7bjw9a] { margin-left: 0; }

.hxa-flow-text[b-2pbr7bjw9a] {
    display: grid;
    line-height: 1.25;
    min-width: 0;
}

.hxa-flow-text strong[b-2pbr7bjw9a] { font-size: 0.65625rem; }

.hxa-flow-text small[b-2pbr7bjw9a] {
    font-size: 0.5625rem;
    font-weight: 400;
    color: var(--hxa-faint);
    overflow: hidden;
    text-overflow: ellipsis;
}

.hxa-flows-arrow[b-2pbr7bjw9a] {
    display: inline-flex;
    color: var(--hxa-accent);
    opacity: 0.7;
}

.hxa-flows-hub[b-2pbr7bjw9a] {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 12px 10px;
    border: 1.5px solid var(--hxa-accent);
    border-radius: 10px;
    background: var(--hxa-accent-tint);
    text-align: center;
}

.hxa-flows-hub strong[b-2pbr7bjw9a] {
    font-size: 0.78125rem;
    color: var(--hxa-accent-strong);
}

.hxa-flows-hub span[b-2pbr7bjw9a] {
    font-size: 0.578125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hxa-soft);
}

.hxa-flows-hub em[b-2pbr7bjw9a] {
    font-style: normal;
    font-size: 0.59375rem;
    color: var(--hxa-faint);
}

.hxa-flows-foot[b-2pbr7bjw9a] {
    margin-top: 9px;
    font-size: 0.65625rem;
    font-weight: 700;
    color: var(--hxa-accent-strong);
    cursor: pointer;
    transition: color 0.15s ease;
}

.hxa-flows-foot:hover[b-2pbr7bjw9a] { text-decoration: underline; }

/* ── Drawer (Fluent panel) ──────────────────────────────────────────────── */

.hxa-drawer-scrim[b-2pbr7bjw9a] {
    position: absolute;
    inset: 0;
    z-index: 70;
    background: rgba(0, 0, 0, 0.34);
    opacity: 0;
    transition: opacity 0.18s ease;
    will-change: opacity;
}

.hxa-drawer-scrim-open[b-2pbr7bjw9a] { opacity: 1; }

.hxa-drawer[b-2pbr7bjw9a] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 71;
    width: min(400px, 94%);
    display: flex;
    flex-direction: column;
    background: var(--hxa-card);
    border-left: 1px solid var(--hxa-line);
    box-shadow: -18px 0 44px -12px rgba(0, 0, 0, 0.3);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    will-change: transform;
    contain: layout paint;
}

.hxa-drawer-open[b-2pbr7bjw9a] { transform: translateX(0); }

.hxa-showcase-paused *[b-2pbr7bjw9a],
.hxa-showcase-paused *[b-2pbr7bjw9a]::before,
.hxa-showcase-paused *[b-2pbr7bjw9a]::after {
    animation-play-state: paused !important;
    transition-duration: 0s !important;
}

.hxa-drawer-head[b-2pbr7bjw9a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
    padding: 12px 14px;
    border-bottom: 1px solid var(--hxa-line);
}

.hxa-drawer-title[b-2pbr7bjw9a] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--hxa-ink);
}

.hxa-drawer-body[b-2pbr7bjw9a] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
}

.hxa-conn-detail[b-2pbr7bjw9a] { display: grid; gap: 12px; }

.hxa-conn-detail-status[b-2pbr7bjw9a] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hxa-drawer-rows[b-2pbr7bjw9a] { font-size: 0.71875rem; }

.hxa-drawer-rows dd[b-2pbr7bjw9a] {
    white-space: normal;
    text-align: right;
}

.hxa-drawer-sub[b-2pbr7bjw9a] {
    margin: 2px 0 0;
    font-size: 0.65625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hxa-soft);
}

.hxa-drawer-runs[b-2pbr7bjw9a] { display: grid; gap: 5px; }

.hxa-drawer-run[b-2pbr7bjw9a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid var(--hxa-line-soft);
    border-radius: 6px;
    font-size: 0.6875rem;
    color: var(--hxa-ink);
}

.hxa-drawer-note[b-2pbr7bjw9a] {
    margin: 0;
    font-size: 0.625rem;
    color: var(--hxa-faint);
}

/* ── Analytics & forecasting (Phase 4) ──────────────────────────────────── */

.hxa-risk-chip[b-2pbr7bjw9a] {
    cursor: pointer;
    transition: filter 0.15s ease;
}

.hxa-risk-chip:hover[b-2pbr7bjw9a] { filter: brightness(1.08); text-decoration: underline; }

.hxa-risk-chip:focus-visible[b-2pbr7bjw9a] {
    outline: 2px solid var(--hxa-accent);
    outline-offset: 1px;
}

.hxa-grid tr.hxa-row-warn td[b-2pbr7bjw9a] { background: rgba(196, 43, 28, 0.05); }

.hxa-grid tr.hxa-row-warn td:first-child[b-2pbr7bjw9a] { box-shadow: inset 3px 0 0 var(--hxa-err); }

.hxa-app[data-hxa-theme="dark"] .hxa-grid tr.hxa-row-warn td[b-2pbr7bjw9a] { background: rgba(255, 139, 128, 0.07); }

.hxa-predict-strip[b-2pbr7bjw9a] {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 7px 12px;
    border: 1px solid var(--hxa-line-soft);
    border-left: 3px solid var(--hxa-accent);
    border-radius: 7px;
    background: var(--hxa-accent-tint);
    font-size: 0.6875rem;
}

.hxa-predict-icon[b-2pbr7bjw9a] {
    display: inline-flex;
    color: var(--hxa-accent-strong);
    flex-shrink: 0;
}

.hxa-predict-text[b-2pbr7bjw9a] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.hxa-predict-text strong[b-2pbr7bjw9a] { color: var(--hxa-ink); }

.hxa-predict-sub[b-2pbr7bjw9a] { color: var(--hxa-soft); font-size: 0.640625rem; }

.hxa-model-pill[b-2pbr7bjw9a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 3px 9px;
    border: 1px solid var(--hxa-line);
    border-radius: 99px;
    background: var(--hxa-card);
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--hxa-ink);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease;
}

.hxa-model-pill:hover[b-2pbr7bjw9a] { border-color: var(--hxa-accent); }

.hxa-model-pill:focus-visible[b-2pbr7bjw9a] {
    outline: 2px solid var(--hxa-accent);
    outline-offset: 1px;
}

.hxa-forecast-body[b-2pbr7bjw9a] {
    display: grid;
    grid-template-columns: minmax(200px, 380px) 1fr;
    gap: 18px;
    align-items: end;
}

.hxa-forecast-sum[b-2pbr7bjw9a] {
    display: grid;
    gap: 8px;
    align-content: end;
    min-width: 0;
}

.hxa-forecast-lead[b-2pbr7bjw9a] {
    margin: 0;
    font-size: 0.71875rem;
    color: var(--hxa-soft);
    line-height: 1.45;
}

.hxa-forecast-lead strong[b-2pbr7bjw9a] { color: var(--hxa-ink); }

.hxa-forecast-models[b-2pbr7bjw9a] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.hxa-forecast-models .hxa-model-pill[b-2pbr7bjw9a] { margin-left: 0; }

.hxa-predict-note[b-2pbr7bjw9a] {
    margin: 0;
    font-size: 0.609375rem;
    color: var(--hxa-faint);
}

/* Employee analytics drawer rows */

.hxa-ana-row[b-2pbr7bjw9a] {
    display: grid;
    gap: 6px;
    padding: 10px 0;
    border-bottom: 1px solid var(--hxa-line-soft);
}

.hxa-ana-row:last-of-type[b-2pbr7bjw9a] { border-bottom: 0; }

.hxa-ana-head[b-2pbr7bjw9a] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    font-size: 0.71875rem;
}

.hxa-ana-model[b-2pbr7bjw9a] {
    font-size: 0.609375rem;
    color: var(--hxa-faint);
}

.hxa-ana-body[b-2pbr7bjw9a] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hxa-spark[b-2pbr7bjw9a] {
    width: 150px;
    height: 36px;
    color: var(--hxa-accent-strong);
    flex-shrink: 0;
}

.hxa-meter[b-2pbr7bjw9a] {
    flex: 1;
    max-width: 170px;
    height: 7px;
    border-radius: 99px;
    background: var(--hxa-line-soft);
    overflow: hidden;
}

.hxa-meter-fill[b-2pbr7bjw9a] {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--hxa-accent);
}

.hxa-meter-fill.hxa-meter-warn[b-2pbr7bjw9a] { background: var(--hxa-warn); }

.hxa-meter-label[b-2pbr7bjw9a] {
    font-size: 0.65625rem;
    font-weight: 600;
    color: var(--hxa-soft);
    white-space: nowrap;
}

.hxa-ana-muted[b-2pbr7bjw9a] {
    margin: 0;
    font-size: 0.65625rem;
    color: var(--hxa-faint);
}

/* ── Rules & Workflows (Phase 6) ───────────────────────────────────── */

.hxa-explain-out[b-2pbr7bjw9a] {
    margin: 0;
    padding: 8px 11px;
    border: 1px solid var(--hxa-line-soft);
    border-left: 3px solid var(--hxa-accent);
    border-radius: 6px;
    background: var(--hxa-accent-tint);
    font-size: 0.6875rem;
    color: var(--hxa-ink);
}

.hxa-wf-templates[b-2pbr7bjw9a] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-bottom: 14px;
}

.hxa-wf-templates:focus-visible[b-2pbr7bjw9a] {
    outline: 2px solid var(--hxa-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

.hxa-wf-tpl[b-2pbr7bjw9a] {
    display: grid;
    gap: 4px;
    align-content: start;
    flex: 0 0 205px;
    padding: 10px 12px;
    border: 1px solid var(--hxa-line-soft);
    border-radius: 8px;
    background: var(--hxa-card);
}

.hxa-wf-tpl strong[b-2pbr7bjw9a] { font-size: 0.6875rem; }

.hxa-wf-tpl p[b-2pbr7bjw9a] {
    margin: 0;
    font-size: 0.625rem;
    color: var(--hxa-soft);
    line-height: 1.4;
}

.hxa-wf-tpl small[b-2pbr7bjw9a] {
    font-size: 0.578125rem;
    color: var(--hxa-faint);
}

.hxa-wf-tpl .hxa-cell-btn[b-2pbr7bjw9a] { justify-self: start; margin-top: 2px; }

.hxa-wf-canvas-panel .hxa-panel-head[b-2pbr7bjw9a] { flex-wrap: wrap; }

.hxa-wf-run-btn[b-2pbr7bjw9a] { margin-left: auto; }

.hxa-wf-canvas[b-2pbr7bjw9a] {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow-x: auto;
    padding: 10px 2px;
}

.hxa-wf-canvas:focus-visible[b-2pbr7bjw9a] {
    outline: 2px solid var(--hxa-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

.hxa-wf-node[b-2pbr7bjw9a] {
    display: grid;
    gap: 3px;
    justify-items: start;
    flex: 0 0 150px;
    padding: 8px 10px;
    border: 1px solid var(--hxa-line-soft);
    border-radius: 8px;
    background: var(--hxa-bg);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.hxa-wf-node:hover[b-2pbr7bjw9a] {
    border-color: var(--hxa-accent);
    background: var(--hxa-accent-tint);
}

.hxa-wf-node:focus-visible[b-2pbr7bjw9a] {
    outline: 2px solid var(--hxa-accent);
    outline-offset: 1px;
}

.hxa-wf-node strong[b-2pbr7bjw9a] {
    font-size: 0.65625rem;
    color: var(--hxa-ink);
    line-height: 1.25;
}

.hxa-wf-node small[b-2pbr7bjw9a] {
    font-size: 0.578125rem;
    color: var(--hxa-faint);
    line-height: 1.3;
}

.hxa-wf-arrow[b-2pbr7bjw9a] {
    display: inline-flex;
    color: var(--hxa-accent);
    opacity: 0.7;
    flex-shrink: 0;
}

.hxa-wf-branches[b-2pbr7bjw9a] {
    display: grid;
    gap: 8px;
    flex-shrink: 0;
}

.hxa-wf-branch-row[b-2pbr7bjw9a] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hxa-wf-branch-tag[b-2pbr7bjw9a] {
    padding: 1px 8px;
    border-radius: 99px;
    font-size: 0.578125rem;
    font-weight: 700;
    white-space: nowrap;
}

.hxa-wf-branch-accept[b-2pbr7bjw9a] { background: rgba(14, 112, 14, 0.12); color: var(--hxa-ok); }

.hxa-wf-branch-reject[b-2pbr7bjw9a] { background: rgba(196, 43, 28, 0.12); color: var(--hxa-err); }

/* Live run timeline (drawer) */

.hxa-wfrun[b-2pbr7bjw9a] { display: grid; }

.hxa-wfrun-step[b-2pbr7bjw9a] {
    position: relative;
    display: grid;
    grid-template-columns: 14px 1fr auto;
    gap: 9px;
    align-items: start;
    padding: 7px 0;
}

.hxa-wfrun-step:not(:last-child)[b-2pbr7bjw9a]::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 22px;
    bottom: -8px;
    width: 1.5px;
    background: var(--hxa-line);
}

.hxa-wfrun-dot[b-2pbr7bjw9a] {
    width: 13px;
    height: 13px;
    margin-top: 2px;
    border-radius: 50%;
    border: 2px solid var(--hxa-line);
    background: var(--hxa-card);
}

.hxa-wfrun-done .hxa-wfrun-dot[b-2pbr7bjw9a] {
    border-color: var(--hxa-accent);
    background: var(--hxa-accent);
}

.hxa-wfrun-active .hxa-wfrun-dot[b-2pbr7bjw9a] {
    border-color: var(--hxa-warn);
    background: transparent;
}

.hxa-wfrun-text[b-2pbr7bjw9a] {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.hxa-wfrun-text strong[b-2pbr7bjw9a] { font-size: 0.6875rem; }

.hxa-wfrun-text small[b-2pbr7bjw9a] {
    font-size: 0.609375rem;
    color: var(--hxa-faint);
}

.hxa-wfrun-pending .hxa-wfrun-text strong[b-2pbr7bjw9a] { color: var(--hxa-faint); }

.hxa-wfrun-time[b-2pbr7bjw9a] {
    font-size: 0.578125rem;
    color: var(--hxa-faint);
    white-space: nowrap;
    margin-top: 3px;
}

.hxa-wfrun-act[b-2pbr7bjw9a] { justify-self: start; }

/* ── Record details: tabs + link cells (Phase 7) ────────────────────────── */

button.hxa-cell-name[b-2pbr7bjw9a] {
    text-align: left;
    cursor: pointer;
}

button.hxa-cell-name:hover[b-2pbr7bjw9a] { text-decoration: underline; }

button.hxa-cell-name:focus-visible[b-2pbr7bjw9a] {
    outline: 2px solid var(--hxa-accent);
    outline-offset: 1px;
    border-radius: 3px;
}

.hxa-cell-link[b-2pbr7bjw9a] {
    font: inherit;
    color: var(--hxa-accent-strong);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.hxa-cell-link:hover[b-2pbr7bjw9a] { text-decoration: underline; }

.hxa-cell-link:focus-visible[b-2pbr7bjw9a] {
    outline: 2px solid var(--hxa-accent);
    outline-offset: 1px;
    border-radius: 3px;
}

.hxa-tabs-wrap[b-2pbr7bjw9a] {
    display: grid;
    gap: 12px;
}

.hxa-tabs[b-2pbr7bjw9a] {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--hxa-line);
    overflow-x: auto;
    scrollbar-width: none;
}

.hxa-tabs[b-2pbr7bjw9a]::-webkit-scrollbar { display: none; }

.hxa-tab[b-2pbr7bjw9a] {
    position: relative;
    padding: 7px 11px;
    background: transparent;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--hxa-soft);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.hxa-tab:hover[b-2pbr7bjw9a] { color: var(--hxa-ink); }

.hxa-tab:focus-visible[b-2pbr7bjw9a] {
    outline: 2px solid var(--hxa-accent);
    outline-offset: -2px;
    border-radius: 4px;
}

.hxa-tab-active[b-2pbr7bjw9a] { color: var(--hxa-accent-strong); }

.hxa-tab-active[b-2pbr7bjw9a]::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -1px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--hxa-accent);
}

.hxa-tab-panel[b-2pbr7bjw9a] {
    display: grid;
    gap: 12px;
}

.hxa-evidence[b-2pbr7bjw9a] {
    display: grid;
    place-items: center;
    min-height: 110px;
    padding: 12px;
    border: 1.5px dashed var(--hxa-line);
    border-radius: 8px;
    color: var(--hxa-faint);
    font-size: 0.65625rem;
    text-align: center;
}

.hxa-detail-back[b-2pbr7bjw9a] {
    margin-bottom: 12px;
}

.hxa-detail-panel .hxa-conn-detail[b-2pbr7bjw9a] { max-width: 560px; }

/* ── Vera drawer (hosted Drawer-mode VeraChatShowcase, Phase 8) ───────── */

.hxa-vera-host[hidden][b-2pbr7bjw9a] { display: none; }

.hxa-drawer-vera[b-2pbr7bjw9a] { width: min(440px, 96%); }

.hxa-drawer-vera .hxa-drawer-head[b-2pbr7bjw9a] { display: none; }

.hxa-drawer-vera .hxa-drawer-body[b-2pbr7bjw9a] {
    display: flex;
    padding: 0;
}

.hxa-vera-drawer-body[b-2pbr7bjw9a] {
    display: flex;
    flex: 1;
    min-height: 0;
    min-width: 0;
}

.hxa-vera-open[b-2pbr7bjw9a] {
    align-self: start;
    margin-top: 4px;
}

/* ── Reports page v2 (Phase 5) ──────────────────────────────────────────── */

.hxa-rep-layout[b-2pbr7bjw9a] {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.hxa-rep-rail[b-2pbr7bjw9a] {
    display: grid;
    gap: 2px;
    align-content: start;
}

.hxa-rep-cat[b-2pbr7bjw9a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 5.5px 10px;
    border-left: 2px solid transparent;
    border-radius: 0 6px 6px 0;
    background: transparent;
    font-size: 0.65625rem;
    font-weight: 600;
    color: var(--hxa-soft);
    text-align: left;
    cursor: pointer;
    min-width: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.hxa-rep-cat:hover[b-2pbr7bjw9a] { background: var(--hxa-line-soft); color: var(--hxa-ink); }

.hxa-rep-cat:focus-visible[b-2pbr7bjw9a] {
    outline: 2px solid var(--hxa-accent);
    outline-offset: -2px;
}

.hxa-rep-cat[aria-pressed="true"][b-2pbr7bjw9a] {
    border-left-color: var(--hxa-accent);
    background: var(--hxa-accent-tint);
    color: var(--hxa-accent-strong);
}

.hxa-rep-cat-name[b-2pbr7bjw9a] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hxa-rep-cat-count[b-2pbr7bjw9a] {
    font-size: 0.578125rem;
    color: var(--hxa-faint);
    flex-shrink: 0;
}

.hxa-rep-cat[aria-pressed="true"] .hxa-rep-cat-count[b-2pbr7bjw9a] { color: inherit; }

.hxa-rep-main[b-2pbr7bjw9a] { min-width: 0; }

.hxa-dchip[b-2pbr7bjw9a] {
    padding: 1.5px 8px;
    border-radius: 99px;
    background: var(--hxa-accent-soft);
    color: var(--hxa-accent-strong);
    font-size: 0.578125rem;
    font-weight: 700;
    white-space: nowrap;
}

.hxa-cell-btns[b-2pbr7bjw9a] {
    display: inline-flex;
    gap: 5px;
}

.hxa-rep-more[b-2pbr7bjw9a] {
    margin: 8px 2px 0;
    font-size: 0.640625rem;
    color: var(--hxa-faint);
}

.hxa-rep-wf[b-2pbr7bjw9a] {
    font-weight: 700;
    font-size: 0.671875rem;
}

.hxa-rep-wf-role[b-2pbr7bjw9a] {
    color: var(--hxa-faint);
    font-size: 0.640625rem;
    white-space: nowrap;
}

/* ── Skeleton loading ───────────────────────────────────────────────────── */

.hxa-skel[b-2pbr7bjw9a] {
    display: grid;
    gap: 12px;
    padding-top: 4px;
}

.hxa-skel-item[b-2pbr7bjw9a] {
    border-radius: 8px;
    background: linear-gradient(100deg, var(--hxa-line-soft) 35%, var(--hxa-hover) 50%, var(--hxa-line-soft) 65%);
    background-size: 240% 100%;
    animation: hxa-shimmer-b-2pbr7bjw9a 1.1s linear infinite;
}

.hxa-skel-crumb[b-2pbr7bjw9a] { width: 110px; height: 10px; }
.hxa-skel-title[b-2pbr7bjw9a] { width: 220px; height: 24px; margin-bottom: 6px; }
.hxa-skel-kpis[b-2pbr7bjw9a] { height: 88px; }
.hxa-skel-bar[b-2pbr7bjw9a] { height: 32px; }
.hxa-skel-block[b-2pbr7bjw9a] { height: 250px; }

@keyframes hxa-shimmer-b-2pbr7bjw9a {
    from { background-position: 120% 0; }
    to { background-position: -120% 0; }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.hxa-footer[b-2pbr7bjw9a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    height: 26px;
    padding: 0 14px;
    background: var(--hxa-card);
    border-top: 1px solid var(--hxa-line);
    font-size: 0.625rem;
    color: var(--hxa-faint);
}

/* ── Toasts ─────────────────────────────────────────────────────────────── */

.hxa-app[b-2pbr7bjw9a] { position: relative; }

/* ── Guided walkthrough (coach marks) ──────────────────────────────────── */

.hxa-guide[b-2pbr7bjw9a] {
    position: absolute;
    inset: 0;
    z-index: 90;
}

/* Spotlight - the huge shadow dims everything around the highlighted element */
.hxa-guide-spot[b-2pbr7bjw9a] {
    position: absolute;
    border: 2px solid #31a267;
    border-radius: 9px;
    box-shadow: 0 0 0 9999px rgba(8, 18, 13, 0.52);
    pointer-events: none;
    transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease;
}

.hxa-guide-bubble[b-2pbr7bjw9a] {
    position: absolute;
    display: grid;
    gap: 6px;
    padding: 14px 16px 12px;
    background: #ffffff;
    color: #1c221e;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3);
    font-size: 0.75rem;
    line-height: 1.45;
    transition: left 0.25s ease, top 0.25s ease;
}

.hxa-guide-bubble:focus[b-2pbr7bjw9a] { outline: none; }

/* Speech-bubble arrow, aimed at the spotlight via --ax */
.hxa-guide-bubble[b-2pbr7bjw9a]::before {
    content: "";
    position: absolute;
    left: var(--ax, 24px);
    margin-left: -7px;
    border: 7px solid transparent;
}

.hxa-guide-bubble[data-pos="below"][b-2pbr7bjw9a]::before {
    top: -14px;
    border-bottom-color: #ffffff;
}

.hxa-guide-bubble[data-pos="above"][b-2pbr7bjw9a]::before {
    bottom: -14px;
    border-top-color: #ffffff;
}

.hxa-guide-count[b-2pbr7bjw9a] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #007b31;
}

.hxa-guide-title[b-2pbr7bjw9a] { font-size: 0.8125rem; }

.hxa-guide-body[b-2pbr7bjw9a] {
    margin: 0;
    color: #4f5b53;
}

.hxa-guide-btns[b-2pbr7bjw9a] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}

/* The bubble lives outside .hxa-app, so theme vars do not reach it -
   its buttons get explicit colors (dark variants below). */
.hxa-guide-btns .hxa-btn[b-2pbr7bjw9a] {
    padding: 5px 14px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 5px;
    color: #1c221e;
    font-size: 0.71875rem;
    font-weight: 600;
    cursor: pointer;
}

.hxa-guide-btns .hxa-btn:hover[b-2pbr7bjw9a] { background: #eaf0ec; }

.hxa-guide-btns .hxa-btn-primary[b-2pbr7bjw9a] {
    background: #007b31;
    border-color: #007b31;
    color: #ffffff;
}

.hxa-guide-btns .hxa-btn-primary:hover[b-2pbr7bjw9a] { background: #00612a; }

.hxa-guide[data-hxa-theme="dark"] .hxa-guide-btns .hxa-btn[b-2pbr7bjw9a] {
    background: #2b322d;
    border-color: rgba(255, 255, 255, 0.16);
    color: #e8ece9;
}

.hxa-guide[data-hxa-theme="dark"] .hxa-guide-btns .hxa-btn:hover[b-2pbr7bjw9a] { background: #343c37; }

.hxa-guide[data-hxa-theme="dark"] .hxa-guide-btns .hxa-btn-primary[b-2pbr7bjw9a] {
    background: #31a267;
    border-color: #31a267;
    color: #0d130f;
}

.hxa-guide[data-hxa-theme="dark"] .hxa-guide-btns .hxa-btn-primary:hover[b-2pbr7bjw9a] { background: #3cb374; }

.hxa-guide-x[b-2pbr7bjw9a] {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: transparent;
    border: 0;
    color: #4f5b53;
    cursor: pointer;
}

.hxa-guide-x:hover[b-2pbr7bjw9a] { background: rgba(0, 0, 0, 0.06); }

.hxa-guide-x:focus-visible[b-2pbr7bjw9a],
.hxa-guide-btns .hxa-btn:focus-visible[b-2pbr7bjw9a] {
    outline: 2px solid #007b31;
    outline-offset: 2px;
}

/* Dark theme snapshot (set on the overlay when opened / stepped) */
.hxa-guide[data-hxa-theme="dark"] .hxa-guide-bubble[b-2pbr7bjw9a] {
    background: #242a26;
    color: #e8ece9;
    border-color: rgba(255, 255, 255, 0.14);
}

.hxa-guide[data-hxa-theme="dark"] .hxa-guide-bubble[data-pos="below"][b-2pbr7bjw9a]::before { border-bottom-color: #242a26; }

.hxa-guide[data-hxa-theme="dark"] .hxa-guide-bubble[data-pos="above"][b-2pbr7bjw9a]::before { border-top-color: #242a26; }

.hxa-guide[data-hxa-theme="dark"] .hxa-guide-count[b-2pbr7bjw9a] { color: #8dd8b1; }

.hxa-guide[data-hxa-theme="dark"] .hxa-guide-body[b-2pbr7bjw9a] { color: #a8b3ac; }

.hxa-guide[data-hxa-theme="dark"] .hxa-guide-x[b-2pbr7bjw9a] { color: #a8b3ac; }

.hxa-guide[data-hxa-theme="dark"] .hxa-guide-x:hover[b-2pbr7bjw9a] { background: rgba(255, 255, 255, 0.08); }

.hxa-toasts[b-2pbr7bjw9a] {
    position: absolute;
    right: 14px;
    bottom: 36px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
}

.hxa-toast[b-2pbr7bjw9a] {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 320px;
    padding: 8px 13px;
    border-radius: 8px;
    background: var(--hxa-toast-bg);
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 600;
    box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.4);
    animation: hxa-toast-in-b-2pbr7bjw9a 0.3s ease both;
}

.hxa-toast svg[b-2pbr7bjw9a] { color: #56c188; flex-shrink: 0; }

.hxa-toast-out[b-2pbr7bjw9a] {
    opacity: 0;
    transition: opacity 0.3s ease;
}

@keyframes hxa-toast-in-b-2pbr7bjw9a {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .hxa-body[b-2pbr7bjw9a] { grid-template-columns: 196px minmax(0, 1fr); }

    .hxa-kpis[b-2pbr7bjw9a] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .hxa-duo[b-2pbr7bjw9a] { grid-template-columns: 1fr; }

    .hxa-cards[b-2pbr7bjw9a] { grid-template-columns: 1fr; }

    .hxa-intel-grid[b-2pbr7bjw9a] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .hxa-command-intro[b-2pbr7bjw9a] { grid-template-columns: 1fr; }
    .hxa-command-paths[b-2pbr7bjw9a] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hxa-command-role[b-2pbr7bjw9a] { border-bottom: 1px solid var(--hxa-line); }

    .hxa-report-pack-grid[b-2pbr7bjw9a] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .hxa-app[b-2pbr7bjw9a] { height: 600px; }

    .hxa-shell-full .hxa-app[b-2pbr7bjw9a] { height: auto; }

    .hxa-body[b-2pbr7bjw9a] { grid-template-columns: minmax(0, 1fr); }

    .hxa-nav[b-2pbr7bjw9a] { display: none; }

    .hxa-pagestrip[b-2pbr7bjw9a] { display: flex; }

    .hxa-footer[b-2pbr7bjw9a] { display: none; }

    .hxa-rep-layout[b-2pbr7bjw9a] { grid-template-columns: 1fr; gap: 10px; }

    .hxa-rep-rail[b-2pbr7bjw9a] {
        display: flex;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .hxa-rep-rail[b-2pbr7bjw9a]::-webkit-scrollbar { display: none; }

    .hxa-rep-cat[b-2pbr7bjw9a] {
        flex-shrink: 0;
        border-left: 0;
        border-bottom: 2px solid transparent;
        border-radius: 6px 6px 0 0;
    }

    .hxa-rep-cat[aria-pressed="true"][b-2pbr7bjw9a] { border-bottom-color: var(--hxa-accent); }
}

@media (max-width: 575.98px) {
    .hxa-shell[b-2pbr7bjw9a] { border-radius: 14px; }

    .hxa-app[b-2pbr7bjw9a] { height: 560px; }

    .hxa-shell-full .hxa-app[b-2pbr7bjw9a] { height: auto; }

    .hxa-drawer[b-2pbr7bjw9a] { width: 100%; border-left: 0; }

    .hxa-flows-viz[b-2pbr7bjw9a] { grid-template-columns: 1fr; }

    .hxa-flows-arrow[b-2pbr7bjw9a] { transform: rotate(90deg); justify-self: center; }

    .hxa-forecast-body[b-2pbr7bjw9a] { grid-template-columns: 1fr; }

    .hxa-intel-grid[b-2pbr7bjw9a] { grid-template-columns: 1fr; }

    .hxa-command-proof[b-2pbr7bjw9a] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hxa-command-paths[b-2pbr7bjw9a] { grid-template-columns: 1fr; }
    .hxa-command-role[b-2pbr7bjw9a] { min-height: 76px; border-right: 0; }

    .hxa-report-pack-grid[b-2pbr7bjw9a] { grid-template-columns: 1fr; }

    .hxa-content[b-2pbr7bjw9a] { padding: 12px 12px 14px; }

    .hxa-chrome-url[b-2pbr7bjw9a] { display: none; }

    .hxa-guide-open span[b-2pbr7bjw9a] { display: none; }

    .hxa-guide-open[b-2pbr7bjw9a] { padding: 4px 8px; }

    .hxa-ask-vera span[b-2pbr7bjw9a] { display: none; }

    .hxa-updated[b-2pbr7bjw9a] { display: none; }

    .hxa-toolbar[b-2pbr7bjw9a] { flex-wrap: wrap; }

    .hxa-search[b-2pbr7bjw9a] { max-width: none; flex-basis: 100%; }

    .hxa-toolbar-btns[b-2pbr7bjw9a] { margin-left: 0; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .hxa-pulsed[b-2pbr7bjw9a],
    .hxa-skel-item[b-2pbr7bjw9a],
    .hxa-chip-busy[b-2pbr7bjw9a]::before,
    .hxa-search-caret[b-2pbr7bjw9a],
    .hxa-toast[b-2pbr7bjw9a] {
        animation: none;
    }

    .hxa-page-anim .hxa-kpi[b-2pbr7bjw9a],
    .hxa-page-anim .hxa-panel[b-2pbr7bjw9a],
    .hxa-page-anim .hxa-toolbar[b-2pbr7bjw9a],
    .hxa-page-anim .hxa-gridwrap[b-2pbr7bjw9a],
    .hxa-page-anim .hxa-pager[b-2pbr7bjw9a],
    .hxa-page-anim .hxa-card[b-2pbr7bjw9a],
    .hxa-page-anim .hxa-vera[b-2pbr7bjw9a],
    .hxa-page-anim .hxa-sync-strip[b-2pbr7bjw9a],
    .hxa-page-anim .hxa-predict-strip[b-2pbr7bjw9a],
    .hxa-page-anim .hxa-conn-sec[b-2pbr7bjw9a],
    .hxa-page-anim .hxa-conn-sec-head[b-2pbr7bjw9a],
    .hxa-page-anim .hxa-flows[b-2pbr7bjw9a],
    .hxa-page-anim .hxa-rep-layout[b-2pbr7bjw9a],
    .hxa-page-anim .hxa-wf-templates[b-2pbr7bjw9a],
    .hxa-page-anim .hxa-note[b-2pbr7bjw9a],
    .hxa-page-anim .hxa-grid tbody tr[b-2pbr7bjw9a] {
        animation: none;
    }

    .hxa-drawer[b-2pbr7bjw9a] {
        transition: none;
        transform: none;
    }

    .hxa-page-anim .hxa-bars:not(.hxa-bars-grow) .hxa-bar-fill[b-2pbr7bjw9a] { height: calc(var(--h, 50) * 1.1px); }

    .hxa-bar-fill[b-2pbr7bjw9a],
    .hxa-progress-fill[b-2pbr7bjw9a],
    .hxa-switch[b-2pbr7bjw9a],
    .hxa-switch-knob[b-2pbr7bjw9a],
    .hxa-nav-item[b-2pbr7bjw9a],
    .hxa-btn[b-2pbr7bjw9a],
    .hxa-card[b-2pbr7bjw9a],
    .hxa-intel-card[b-2pbr7bjw9a],
    .hxa-kpi[b-2pbr7bjw9a],
    .hxa-guide-spot[b-2pbr7bjw9a],
    .hxa-guide-bubble[b-2pbr7bjw9a] {
        transition: none;
    }

    .hxa-card:hover[b-2pbr7bjw9a],
    .hxa-intel-card:hover[b-2pbr7bjw9a],
    button.hxa-kpi:hover[b-2pbr7bjw9a] { transform: none; }
}

/* ── Forced colors ──────────────────────────────────────────────────────── */

@media (forced-colors: active) {
    .hxa-shell[b-2pbr7bjw9a],
    .hxa-app[b-2pbr7bjw9a],
    .hxa-header[b-2pbr7bjw9a],
    .hxa-nav[b-2pbr7bjw9a],
    .hxa-kpi[b-2pbr7bjw9a],
    .hxa-panel[b-2pbr7bjw9a],
    .hxa-card[b-2pbr7bjw9a],
    .hxa-conn-card[b-2pbr7bjw9a],
    .hxa-drawer[b-2pbr7bjw9a],
    .hxa-gridwrap[b-2pbr7bjw9a],
    .hxa-menu[b-2pbr7bjw9a],
    .hxa-toast[b-2pbr7bjw9a] {
        background: Canvas;
        color: CanvasText;
        box-shadow: none;
    }

    .hxa-bar-fill[b-2pbr7bjw9a],
    .hxa-status-dot[b-2pbr7bjw9a],
    .hxa-switch[aria-pressed="true"][b-2pbr7bjw9a] {
        background: Highlight;
    }

    .hxa-nav-active[b-2pbr7bjw9a],
    .hxa-strip-active[b-2pbr7bjw9a],
    .hxa-tab[aria-selected="true"][b-2pbr7bjw9a],
    .hxa-filter-chip[aria-pressed="true"][b-2pbr7bjw9a],
    .hxa-rep-cat[aria-pressed="true"][b-2pbr7bjw9a] {
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }

    .hxa-btn[b-2pbr7bjw9a],
    .hxa-icon-btn[b-2pbr7bjw9a],
    .hxa-ask-vera[b-2pbr7bjw9a],
    .hxa-tour-toggle[b-2pbr7bjw9a],
    .hxa-demo-reset[b-2pbr7bjw9a],
    .hxa-guide-open[b-2pbr7bjw9a],
    .hxa-chip[b-2pbr7bjw9a],
    .hxa-dchip[b-2pbr7bjw9a],
    .hxa-tag[b-2pbr7bjw9a] {
        border: 1px solid ButtonText;
        forced-color-adjust: auto;
    }

    .hxa-guide-bubble[b-2pbr7bjw9a] {
        background: Canvas;
        color: CanvasText;
        border: 1px solid CanvasText;
    }

    .hxa-guide-spot[b-2pbr7bjw9a] { border-color: Highlight; }

    .hxa-card-ic[b-2pbr7bjw9a] { border: 1px solid CanvasText; }
}

/* ── Showcase v3 island host (A3-M2) ────────────────────────────────────── */
/* Mirrors .hxa-content so C#-served pages occupy the same surface; the JS
   shell toggles [hidden] between the two. Must never be positioned - island
   drawers/toasts anchor to .hxa-app (position: relative). */

.hxa-cs-host[b-2pbr7bjw9a] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 18px 18px;
}

.hxa-cs-host[hidden][b-2pbr7bjw9a] { display: none; }

/* Text color on accent/danger fills for island buttons - the dark accents are
   light greens/reds, so dark text is required there (same rule the shell
   applies to .hxa-ask-vera and friends). Inherits into the island DOM. */

.hxa-app[b-2pbr7bjw9a] { --hxa-on-accent: #ffffff; }

.hxa-app[data-hxa-theme="dark"][b-2pbr7bjw9a] { --hxa-on-accent: #10130f; }

/* ── P3 Access - additive JS enhancements (Event Monitor filter panel,
   Reports generator; see _renderFilterPanel/_renderReportGenerator) ── */

.hxa-ac-input[b-2pbr7bjw9a] {
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--hxa-line);
    border-radius: 5px;
    background: var(--hxa-card);
    font-size: 0.6875rem;
    color: var(--hxa-ink);
}

.hxa-ac-filterbar[b-2pbr7bjw9a] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.hxa-ac-filter-cats[b-2pbr7bjw9a] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hxa-ac-filter-chip[b-2pbr7bjw9a] {
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--hxa-line);
    border-radius: 999px;
    background: var(--hxa-card);
    font-size: 0.65625rem;
    font-weight: 600;
    color: var(--hxa-ink);
}

.hxa-ac-filter-chip[aria-pressed="true"][b-2pbr7bjw9a] {
    background: var(--hxa-accent);
    border-color: var(--hxa-accent);
    color: var(--hxa-on-accent);
}

.hxa-ac-filter-pills[b-2pbr7bjw9a] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.hxa-ac-pill[b-2pbr7bjw9a] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 4px 0 9px;
    border-radius: 999px;
    background: var(--hxa-hover);
    font-size: 0.625rem;
    color: var(--hxa-ink);
}

.hxa-ac-pill-clear[b-2pbr7bjw9a] {
    border: none;
    background: transparent;
    color: var(--hxa-faint);
    font-size: 0.75rem;
    line-height: 1;
    padding: 2px 4px;
}

.hxa-ac-pill-clear:hover[b-2pbr7bjw9a] { color: var(--hxa-ink); }

.hxa-ac-repgen[b-2pbr7bjw9a] {
    border: 1px solid var(--hxa-line);
    border-radius: 6px;
    background: var(--hxa-card);
    padding: 12px 14px 14px;
    margin-bottom: 14px;
}

.hxa-ac-repgen-title[b-2pbr7bjw9a] {
    margin: 0 0 8px;
    font-size: 0.78125rem;
    font-weight: 700;
    color: var(--hxa-ink);
}

.hxa-ac-repgen-row[b-2pbr7bjw9a] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.hxa-ac-repgen-result[b-2pbr7bjw9a] { margin-top: 12px; }

.hxa-ac-repgen-count[b-2pbr7bjw9a] {
    margin: 0 0 6px;
    font-size: 0.65625rem;
    color: var(--hxa-faint);
}

@media (forced-colors: active) {
    .hxa-ac-filter-chip[b-2pbr7bjw9a],
    .hxa-ac-repgen[b-2pbr7bjw9a] {
        border: 1px solid ButtonText;
    }
}
/* /Components/Shared/ImageGallery.razor.rz.scp.css */
/* ImageGallery.razor.css — scoped styles for the gallery grid + thumbnails */

/* ── figure reset ─────────────────────────────────────────────────────────── */
.ig-item[b-35rmfzykuc] {
    display: block;
    margin: 0;
    cursor: pointer;
    border-radius: 1rem;
    overflow: hidden;
    outline: none;
}

/* ── image wrapper: relative container for zoom overlay ──────────────────── */
.ig-img-wrap[b-35rmfzykuc] {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.38);
    line-height: 0; /* collapse inline-img gap */
    transition: box-shadow 0.22s ease;
}

.ig-item:hover .ig-img-wrap[b-35rmfzykuc],
.ig-item:focus-visible .ig-img-wrap[b-35rmfzykuc] {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(0, 123, 49, 0.55);
}

/* ── thumbnail image ─────────────────────────────────────────────────────── */
.ig-img[b-35rmfzykuc] {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1),
                filter 0.25s ease;
    will-change: transform;
}

.ig-item:hover .ig-img[b-35rmfzykuc],
.ig-item:focus-visible .ig-img[b-35rmfzykuc] {
    transform: scale(1.035);
    filter: brightness(0.72);
}

/* ── zoom icon overlay (shown on hover/focus) ────────────────────────────── */
.ig-zoom-btn[b-35rmfzykuc] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transition: opacity 0.22s ease;
    pointer-events: none;
}

.ig-zoom-btn svg[b-35rmfzykuc] {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.ig-item:hover .ig-zoom-btn[b-35rmfzykuc],
.ig-item:focus-visible .ig-zoom-btn[b-35rmfzykuc] {
    opacity: 1;
}

/* ── focus ring (WCAG 2.4.12) ────────────────────────────────────────────── */
.ig-item:focus-visible[b-35rmfzykuc] {
    box-shadow: 0 0 0 3px #007b31, 0 0 0 5px rgba(0, 123, 49, 0.25);
}

/* ── caption ─────────────────────────────────────────────────────────────── */
.ig-caption[b-35rmfzykuc] {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: 0.625rem;
    color: rgba(255, 255, 255, 0.40);  /* dark section default */
    line-height: 1.4;
}

/* Light section variant */
.ig-grid:not(.ig-dark) .ig-caption[b-35rmfzykuc] {
    color: #6b6b6b;
}

/* ── motion / contrast guards ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ig-img[b-35rmfzykuc],
    .ig-zoom-btn[b-35rmfzykuc] {
        transition: none;
    }
}

@media (prefers-contrast: more) {
    .ig-img-wrap[b-35rmfzykuc] {
        border: 2px solid #fff;
    }

    .ig-item:focus-visible[b-35rmfzykuc] {
        box-shadow: 0 0 0 4px #000;
    }
}
/* /Components/Shared/KioskShowcase.razor.rz.scp.css */
/* P7 Hexavera Presence - kiosk theme tokens (A6/A7: light-first high-contrast
   for plant-floor daylight + dark variant; touch targets >= 48px). Web mode
   reuses the same tokens at standard density inside a phone-ish frame - "the
   same product, right-sized for its device". Brand accent = the site family
   (#007b31 light / #31a267 dark, mirroring the shell's dark button ramp). */

.pk-root[b-3jn3vzwzxj] {
    --pk-bg: #f2f4f3;
    --pk-surface: #ffffff;
    --pk-surface-2: #e9edeb;
    --pk-border: #c3cbc7;
    --pk-chrome: #f4f6f4;
    --pk-text: #17201b;
    --pk-text-sub: #4c5a53;
    --pk-accent: #007b31;
    --pk-on-accent: #ffffff;
    --pk-err: #b3261e;
    --pk-ok: #0e700e;
    --pk-warn-bg: #fdf3e0;
    color: var(--pk-text);
    font-family: "Segoe UI", "Segoe UI Variable Text", system-ui, -apple-system, sans-serif;
    /* Family shell (mirrors .hxa-shell-full): flex-fill column inside the
       /demo shell, rounded, shadowed, internal scroll - Presence fills the
       viewport exactly like every other product tab. */
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    background: var(--pk-bg);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 40px -16px rgba(12, 35, 28, 0.25);
}

/* Standardized zoom parity with .hxa-shell-full on large screens. */
@media (min-width: 1280px) { .pk-root[b-3jn3vzwzxj] { zoom: 1.08; } }
@media (min-width: 1720px) { .pk-root[b-3jn3vzwzxj] { zoom: 1.18; } }

.pk-root.pk-dark[b-3jn3vzwzxj] {
    --pk-bg: #111418;
    --pk-surface: #1a1e24;
    --pk-surface-2: #242a32;
    --pk-border: #3a424e;
    --pk-chrome: #171b20;
    --pk-text: #e8eaed;
    --pk-text-sub: #9aa3ae;
    --pk-accent: #31a267;
    --pk-on-accent: #0c130f;
    --pk-err: #f58a8a;
    --pk-ok: #7bd89f;
    --pk-warn-bg: #3f2e15;
}

/* ── shell chrome bar (mirrors .hxa-chrome: dots + host pill + demo controls) ── */
.pk-chrome[b-3jn3vzwzxj] {
    display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
    padding: 8px 14px; background: var(--pk-chrome);
    border-bottom: 1px solid var(--pk-border); flex: none;
}
.pk-chrome-dots[b-3jn3vzwzxj] { display: flex; gap: 6px; }
.pk-chrome-dots span[b-3jn3vzwzxj] { width: 10px; height: 10px; border-radius: 50%; background: var(--pk-border); }
.pk-chrome-url[b-3jn3vzwzxj] {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px;
    background: var(--pk-surface); border: 1px solid var(--pk-border);
    border-radius: 99px; font-size: 11px; color: var(--pk-text-sub); white-space: nowrap; overflow: hidden;
}
.pk-chrome-url svg[b-3jn3vzwzxj] { color: var(--pk-accent); flex-shrink: 0; }
.pk-chrome-path[b-3jn3vzwzxj] { color: var(--pk-text-sub); opacity: 0.85; }
.pk-chrome-controls[b-3jn3vzwzxj] { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.pk-chrome-modes[b-3jn3vzwzxj], .pk-lang[b-3jn3vzwzxj] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pk-chip[b-3jn3vzwzxj] {
    min-height: 28px; padding: 3px 12px; border-radius: 14px;
    border: 1px solid var(--pk-border); background: var(--pk-surface);
    color: var(--pk-text); font-size: 12px; cursor: pointer;
}
.pk-chip-on[b-3jn3vzwzxj] { background: var(--pk-accent); color: var(--pk-on-accent); border-color: var(--pk-accent); }
.pk-toggle[b-3jn3vzwzxj] { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; color: var(--pk-text); cursor: pointer; }
.pk-toggle input[b-3jn3vzwzxj] { width: 16px; height: 16px; accent-color: var(--pk-accent); }
.pk-honesty[b-3jn3vzwzxj] {
    font-size: 12px; color: var(--pk-text-sub); margin: 0; flex: none;
    padding: 6px 16px; border-bottom: 1px solid var(--pk-border); background: var(--pk-surface);
}

/* ── app surface (fills the shell; internal scroll) ── */
.pk-frame[b-3jn3vzwzxj] {
    flex: 1 1 auto; min-height: 0; width: 100%;
    background: var(--pk-bg);
    padding: 24px; overflow-y: auto;
    display: flex; flex-direction: column; position: relative;
}

/* Content columns center like an app canvas; web mode narrows to a focused,
   mobile-first column - the responsive story on any width. */
.pk-screen[b-3jn3vzwzxj], .pk-attract[b-3jn3vzwzxj] { width: 100%; max-width: 940px; margin: 0 auto; }
.pk-frame-web .pk-screen[b-3jn3vzwzxj] { max-width: 640px; }
.pk-web-signin[b-3jn3vzwzxj] { width: 100%; max-width: 420px; margin: 0 auto; }

.pk-offline[b-3jn3vzwzxj] {
    background: var(--pk-warn-bg); color: var(--pk-text);
    border: 1px solid var(--pk-border); border-radius: 8px;
    padding: 10px 14px; font-size: 13.5px; margin-bottom: 12px;
    display: flex; gap: 10px; align-items: center; justify-content: space-between;
}
.pk-offline-count[b-3jn3vzwzxj] { font-weight: 600; }

/* ── attract ── */
.pk-attract[b-3jn3vzwzxj] {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; background: none; border: none; cursor: pointer; color: var(--pk-text);
    min-height: 480px; border-radius: 12px;
}
.pk-attract-clock[b-3jn3vzwzxj] { font-size: 84px; font-weight: 700; letter-spacing: 2px; line-height: 1; }
.pk-attract-date[b-3jn3vzwzxj] { font-size: 18px; color: var(--pk-text-sub); }
.pk-attract-site[b-3jn3vzwzxj] { font-size: 14px; color: var(--pk-text-sub); text-transform: uppercase; letter-spacing: 1.5px; }
.pk-attract-cta[b-3jn3vzwzxj] {
    margin-top: 18px; font-size: 22px; font-weight: 600; color: var(--pk-on-accent);
    background: var(--pk-accent); padding: 16px 40px; border-radius: 32px;
}
.pk-attract-ticker[b-3jn3vzwzxj] { margin-top: 22px; font-size: 13px; color: var(--pk-text-sub); max-width: 90%; }

/* ── screens ── */
.pk-screen[b-3jn3vzwzxj] { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.pk-center[b-3jn3vzwzxj] { align-items: center; text-align: center; justify-content: center; }
.pk-h[b-3jn3vzwzxj] { margin: 0; font-size: 24px; font-weight: 650; }
.pk-hint[b-3jn3vzwzxj] { font-size: 13px; color: var(--pk-text-sub); margin: 0; max-width: 560px; }
.pk-error[b-3jn3vzwzxj] { font-size: 14px; color: var(--pk-err); font-weight: 600; margin: 0; }
.pk-row[b-3jn3vzwzxj] { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.pk-foot[b-3jn3vzwzxj] { display: flex; gap: 16px; align-items: center; justify-content: center; margin-top: auto; padding-top: 12px; flex-wrap: wrap; }

/* ── tabs ── */
.pk-tabs[b-3jn3vzwzxj] { display: flex; gap: 8px; flex-wrap: wrap; }
.pk-tab[b-3jn3vzwzxj] {
    min-height: 48px; padding: 10px 20px; border-radius: 10px;
    border: 1px solid var(--pk-border); background: var(--pk-surface);
    color: var(--pk-text); font-size: 15px; cursor: pointer;
}
.pk-tab-on[b-3jn3vzwzxj] { background: var(--pk-accent); color: var(--pk-on-accent); border-color: var(--pk-accent); font-weight: 600; }

/* ── tap cards ── */
.pk-taps[b-3jn3vzwzxj] { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pk-tapcard[b-3jn3vzwzxj] {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    min-height: 120px; padding: 16px; border-radius: 12px;
    border: 1.5px solid var(--pk-border); background: var(--pk-surface-2);
    color: var(--pk-text); cursor: pointer; font-size: 14px;
}
.pk-tapcard:hover[b-3jn3vzwzxj] { border-color: var(--pk-accent); }
.pk-tapcard-warn[b-3jn3vzwzxj] { border-style: dashed; }
.pk-tapcard-name[b-3jn3vzwzxj] { font-weight: 650; font-size: 16px; }
.pk-tapcard-sub[b-3jn3vzwzxj] { color: var(--pk-text-sub); font-size: 12.5px; }
.pk-avatar[b-3jn3vzwzxj] {
    width: 48px; height: 48px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; font-weight: 700; font-size: 17px;
    background: var(--pk-accent); color: var(--pk-on-accent); flex: none;
}

/* ── PIN pad ── */
.pk-pinpad[b-3jn3vzwzxj] { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.pk-pin-display[b-3jn3vzwzxj] { min-height: 34px; font-size: 28px; letter-spacing: 8px; color: var(--pk-text); }
.pk-pin-grid[b-3jn3vzwzxj] { display: grid; grid-template-columns: repeat(3, 76px); gap: 10px; }
.pk-pin-key[b-3jn3vzwzxj] {
    height: 64px; border-radius: 12px; font-size: 24px; font-weight: 600;
    border: 1px solid var(--pk-border); background: var(--pk-surface-2);
    color: var(--pk-text); cursor: pointer;
}
.pk-pin-key:hover[b-3jn3vzwzxj] { border-color: var(--pk-accent); }
.pk-pin-clear[b-3jn3vzwzxj] { font-size: 18px; color: var(--pk-err); }

/* ── face-match ── */
.pk-face[b-3jn3vzwzxj] { position: relative; color: var(--pk-accent); padding: 8px; }
.pk-face-bad[b-3jn3vzwzxj] { color: var(--pk-err); }
.pk-face-scan[b-3jn3vzwzxj] {
    position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
    background: linear-gradient(to bottom, transparent 46%, currentColor 50%, transparent 54%);
    opacity: 0.5; animation: pk-scan-b-3jn3vzwzxj 1.1s linear infinite;
}
@keyframes pk-scan-b-3jn3vzwzxj { from { transform: translateY(-38%); } to { transform: translateY(38%); } }
.pk-meter[b-3jn3vzwzxj] { width: 260px; height: 10px; border-radius: 5px; background: var(--pk-surface-2); border: 1px solid var(--pk-border); overflow: hidden; }
.pk-meter-fill[b-3jn3vzwzxj] { display: block; height: 100%; background: var(--pk-ok); transition: width 0.15s ease-out; }
.pk-meter-bad[b-3jn3vzwzxj] { background: var(--pk-err); }
.pk-meter-label[b-3jn3vzwzxj] { font-size: 13.5px; color: var(--pk-text-sub); margin: 0; }

/* ── home tiles ── */
.pk-greet[b-3jn3vzwzxj] { display: flex; gap: 12px; align-items: center; }
.pk-greet span:not(.pk-avatar)[b-3jn3vzwzxj] { display: flex; flex-direction: column; }
.pk-greet strong[b-3jn3vzwzxj] { font-size: 18px; }
.pk-greet small[b-3jn3vzwzxj] { color: var(--pk-text-sub); font-size: 13px; }
.pk-signout[b-3jn3vzwzxj] { margin-left: auto; }
.pk-tiles[b-3jn3vzwzxj] { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.pk-tile[b-3jn3vzwzxj] {
    min-height: 76px; padding: 14px; border-radius: 12px; font-size: 16px; font-weight: 600;
    border: 1.5px solid var(--pk-border); background: var(--pk-surface-2);
    color: var(--pk-text); cursor: pointer;
}
.pk-tile:hover[b-3jn3vzwzxj] { border-color: var(--pk-accent); }
.pk-tile-primary[b-3jn3vzwzxj] { background: var(--pk-accent); color: var(--pk-on-accent); border-color: var(--pk-accent); grid-column: span 2; font-size: 20px; }

/* ── confirmation ── */
.pk-check[b-3jn3vzwzxj] { color: var(--pk-ok); }
.pk-dl[b-3jn3vzwzxj] { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; margin: 0; text-align: left; }
.pk-dl dt[b-3jn3vzwzxj] { color: var(--pk-text-sub); font-size: 13px; }
.pk-dl dd[b-3jn3vzwzxj] { margin: 0; font-size: 14.5px; }
.pk-countdown[b-3jn3vzwzxj] { font-size: 14px; color: var(--pk-text-sub); margin: 0; }
.pk-attest-q[b-3jn3vzwzxj] { font-size: 19px; font-weight: 600; margin: 0; max-width: 480px; }

/* ── forms / buttons ── */
.pk-field[b-3jn3vzwzxj] { display: flex; flex-direction: column; gap: 5px; width: 100%; max-width: 380px; }
.pk-label[b-3jn3vzwzxj] { font-size: 13.5px; font-weight: 600; }
.pk-input[b-3jn3vzwzxj] {
    min-height: 48px; padding: 10px 12px; border-radius: 8px; font-size: 15px;
    border: 1px solid var(--pk-border); background: var(--pk-surface);
    color: var(--pk-text); width: 100%; box-sizing: border-box;
}
.pk-btn[b-3jn3vzwzxj] {
    min-height: 48px; padding: 12px 22px; border-radius: 10px; font-size: 15px; font-weight: 600;
    border: 1px solid var(--pk-border); background: var(--pk-surface-2);
    color: var(--pk-text); cursor: pointer;
}
.pk-btn:hover[b-3jn3vzwzxj] { border-color: var(--pk-accent); }
.pk-btn-primary[b-3jn3vzwzxj] { background: var(--pk-accent); color: var(--pk-on-accent); border-color: var(--pk-accent); }
.pk-btn-wide[b-3jn3vzwzxj] { width: 100%; max-width: 380px; }
.pk-btn-sm[b-3jn3vzwzxj] { min-height: 40px; padding: 8px 14px; font-size: 13.5px; }
.pk-link[b-3jn3vzwzxj] { background: none; border: none; color: var(--pk-accent); font-size: 14px; cursor: pointer; text-decoration: underline; min-height: 44px; }

/* ── web sign-in ── */
.pk-web-signin[b-3jn3vzwzxj] { display: flex; flex-direction: column; gap: 14px; align-items: center; padding: 28px 8px; flex: 1; justify-content: center; }
.pk-web-brand[b-3jn3vzwzxj] { font-size: 26px; font-weight: 400; margin: 0 0 8px; }
.pk-web-brand strong[b-3jn3vzwzxj] { color: var(--pk-accent); }

/* ── tables / messages ── */
.pk-table[b-3jn3vzwzxj] { width: 100%; border-collapse: collapse; font-size: 14px; }
.pk-table th[b-3jn3vzwzxj] { text-align: left; color: var(--pk-text-sub); font-size: 12.5px; padding: 8px 10px; border-bottom: 1px solid var(--pk-border); }
.pk-table td[b-3jn3vzwzxj] { padding: 10px; border-bottom: 1px solid var(--pk-border); }
.pk-mono[b-3jn3vzwzxj] { font-family: Consolas, monospace; }
.pk-msg[b-3jn3vzwzxj] {
    display: flex; gap: 12px; align-items: center; justify-content: space-between;
    padding: 12px 14px; border: 1px solid var(--pk-border); border-radius: 10px; background: var(--pk-surface-2);
}
.pk-msg span[b-3jn3vzwzxj] { display: flex; flex-direction: column; gap: 2px; }
.pk-msg small[b-3jn3vzwzxj] { color: var(--pk-text-sub); }

/* ── focus + reduced motion + responsive ── */
.pk-root :is(button, input, select, a):focus-visible[b-3jn3vzwzxj] { outline: 2px solid var(--pk-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .pk-face-scan[b-3jn3vzwzxj] { animation: none; }
    .pk-meter-fill[b-3jn3vzwzxj] { transition: none; }
}

@media (max-width: 560px) {
    .pk-chrome[b-3jn3vzwzxj] { padding: 6px 10px; }
    .pk-chrome-url[b-3jn3vzwzxj] { display: none; }
    .pk-frame[b-3jn3vzwzxj] { padding: 14px; }
    .pk-attract-clock[b-3jn3vzwzxj] { font-size: 56px; }
    .pk-tiles[b-3jn3vzwzxj] { grid-template-columns: 1fr 1fr; }
    .pk-tile-primary[b-3jn3vzwzxj] { grid-column: span 2; }
    .pk-pin-grid[b-3jn3vzwzxj] { grid-template-columns: repeat(3, 68px); }
}
/* /Components/Shared/Marketing/CapabilityCard.razor.rz.scp.css */
.cap-card[b-367qyypbun] {
    padding: 2rem 1.8rem;
    background: #fff;
    border: 1px solid var(--tint-mint-2);
    border-radius: var(--radius-md);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.cap-card:hover[b-367qyypbun] {
    transform: translateY(-6px);
    border-color: rgba(0, 123, 49, .35);
    box-shadow: var(--shadow-card);
}

.cap-icon[b-367qyypbun] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.1rem;
    height: 3.1rem;
    margin-bottom: 1.3rem;
    background: var(--grad-green);
    border-radius: .95rem;
    box-shadow: 0 8px 20px -6px rgba(0, 123, 49, .4);
    color: #fff;
}

.cap-icon[b-367qyypbun]  svg {
    width: 1.5rem;
    height: 1.5rem;
}

.cap-card h3[b-367qyypbun] {
    margin-bottom: .6rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.cap-card p[b-367qyypbun] {
    margin-bottom: 1.1rem;
    color: var(--body);
    font-size: .9rem;
    line-height: 1.6;
}

.cap-card ul[b-367qyypbun] {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cap-card ul li[b-367qyypbun] {
    position: relative;
    padding-left: 1.5rem;
    color: var(--body);
    font-size: .86rem;
    line-height: 1.5;
}

.cap-card ul li[b-367qyypbun]::before {
    content: "";
    position: absolute;
    left: 0;
    top: .32em;
    width: .85em;
    height: .85em;
    background-color: var(--brand);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l4.6 4.6L19.5 6.7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l4.6 4.6L19.5 6.7'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* /Components/Shared/Marketing/CapabilityGrid.razor.rz.scp.css */
.cap-grid[b-wdga2s4nmv] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
}

@media (max-width: 991.98px) {
    .cap-grid[b-wdga2s4nmv] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .cap-grid[b-wdga2s4nmv] { grid-template-columns: 1fr; }
}
/* /Components/Shared/Marketing/ChecklistCard.razor.rz.scp.css */
.mod-mechanisms[b-slufsvtbi7] {
    padding: 2.25rem 2rem;
    background: var(--tint-soft);
    border: 1px solid var(--tint-mint);
    border-radius: var(--radius-lg);
}

.mod-mechanisms h3[b-slufsvtbi7] {
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
    font-weight: 700;
}

.mod-mechanisms ul[b-slufsvtbi7] {
    display: grid;
    gap: 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* /Components/Shared/Marketing/ChecklistItem.razor.rz.scp.css */
.mechanism-item[b-tmjku8emvl] {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
}

.mechanism-item svg[b-tmjku8emvl] {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    margin-top: .2rem;
    color: var(--brand);
}

.mechanism-item strong[b-tmjku8emvl] {
    display: block;
    margin-bottom: .15rem;
    font-size: .98rem;
}

.mechanism-item span[b-tmjku8emvl] {
    color: var(--body);
    font-size: .88rem;
    line-height: 1.5;
}
/* /Components/Shared/Marketing/ClosingCta.razor.rz.scp.css */
.mod-closing[b-lfkuhm5xo1] {
    padding: 0 0 7rem;
    background: #fff;
}

.closing-inner[b-lfkuhm5xo1] {
    position: relative;
    overflow: hidden;
    padding: clamp(3.5rem, 7vw, 6.5rem) clamp(1.5rem, 5vw, 4rem);
    background: var(--grad-green);
    border-radius: 2.25rem;
    box-shadow: 0 32px 80px -24px rgba(0, 86, 36, .5);
    text-align: center;
}

.closing-inner[b-lfkuhm5xo1]::before,
.closing-inner[b-lfkuhm5xo1]::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .18);
    pointer-events: none;
}

.closing-inner[b-lfkuhm5xo1]::before {
    width: 34rem;
    height: 34rem;
    left: -12rem;
    top: -16rem;
    animation: floaty-b-lfkuhm5xo1 9s ease-in-out infinite;
}

.closing-inner[b-lfkuhm5xo1]::after {
    width: 26rem;
    height: 26rem;
    right: -10rem;
    bottom: -14rem;
    animation: floaty-b-lfkuhm5xo1 11s ease-in-out 1.5s infinite;
}

@keyframes floaty-b-lfkuhm5xo1 {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -12px; }
}

/* .mod-closing ancestor outranks the MarketingPage base heading rule regardless of bundle order */
.mod-closing .closing-inner h2[b-lfkuhm5xo1] {
    margin-bottom: 1.25rem;
    color: #fff;
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
    font-weight: 650;
    line-height: 1.06;
}

/* h2 in selector outranks the ModulePage .accent primitive regardless of bundle order */
.closing-inner h2[b-lfkuhm5xo1]  .accent {
    color: #dcf4e6;
    background: none;
}

.closing-inner p[b-lfkuhm5xo1] {
    margin: 0 auto 2.5rem;
    max-width: 40rem;
    color: rgba(255, 255, 255, .88);
    font-size: 1.05rem;
    line-height: 1.65;
}

.closing-items[b-lfkuhm5xo1] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin: -1rem 0 2.5rem;
    padding: 0;
    list-style: none;
}

.closing-items li[b-lfkuhm5xo1] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem 1rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 99rem;
    color: #fff;
    font-size: .85rem;
    font-weight: 650;
}

.closing-items svg[b-lfkuhm5xo1] {
    width: .95rem;
    height: .95rem;
    flex: 0 0 auto;
    color: #dcf4e6;
}

.closing-actions[b-lfkuhm5xo1] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .9rem;
}

.closing-inner .closing-cta[b-lfkuhm5xo1] {
    background: #fff;
    box-shadow: none;
    color: var(--ink);
}

.closing-inner .closing-cta:hover[b-lfkuhm5xo1] {
    background: var(--tint-mint);
    color: var(--ink);
    filter: none;
}

.closing-secondary[b-lfkuhm5xo1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.5rem;
    padding: .95rem 1.9rem;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .55);
    border-radius: 99rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease;
}

.closing-secondary:hover[b-lfkuhm5xo1] {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .85);
    color: #fff;
    text-decoration: none;
}

@media (max-width: 991.98px) {
    .mod-closing[b-lfkuhm5xo1] { padding-bottom: 5rem; }
}

@media (max-width: 640px) {
    .closing-inner[b-lfkuhm5xo1] { border-radius: 1.5rem; }
    .closing-actions[b-lfkuhm5xo1] { flex-direction: column; align-items: stretch; }
    .closing-actions > *[b-lfkuhm5xo1] { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .closing-inner[b-lfkuhm5xo1]::before,
    .closing-inner[b-lfkuhm5xo1]::after { animation: none !important; }
}
/* /Components/Shared/Marketing/ConnectorCard.razor.rz.scp.css */
.conn-card[b-gf79h55loa] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.6rem 1.5rem;
    background: #fff;
    border: 1px solid var(--tint-mint-2);
    border-radius: var(--radius-md);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.conn-card:hover[b-gf79h55loa] {
    transform: translateY(-4px);
    border-color: rgba(0, 123, 49, .35);
    box-shadow: var(--shadow-card);
}

.conn-card h3[b-gf79h55loa] {
    margin-bottom: .55rem;
    font-size: 1.02rem;
    font-weight: 700;
}

.conn-card h3 a[b-gf79h55loa] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--ink);
    text-decoration: none;
}

.conn-card h3 a:hover[b-gf79h55loa] {
    color: var(--brand);
}

.conn-card h3 svg[b-gf79h55loa] {
    width: .95rem;
    height: .95rem;
    color: var(--brand);
    transition: transform .18s ease;
}

.conn-card h3 a:hover svg[b-gf79h55loa] {
    transform: translateX(3px);
}

.conn-card p[b-gf79h55loa] {
    margin-bottom: 1rem;
    color: var(--body);
    font-size: .86rem;
    line-height: 1.55;
}

.conn-items[b-gf79h55loa] {
    display: grid;
    gap: .45rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.conn-items li[b-gf79h55loa] {
    position: relative;
    padding-left: 1.4rem;
    color: var(--body);
    font-size: .82rem;
    line-height: 1.5;
}

.conn-items li[b-gf79h55loa]::before {
    content: "";
    position: absolute;
    left: 0;
    top: .32em;
    width: .85em;
    height: .85em;
    background-color: var(--brand);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l4.6 4.6L19.5 6.7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l4.6 4.6L19.5 6.7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.conn-tags[b-gf79h55loa] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: auto 0 0;
    padding: 0;
    list-style: none;
}

.conn-tags a[b-gf79h55loa],
.conn-tags span[b-gf79h55loa] {
    display: inline-block;
    padding: .28rem .7rem;
    background: var(--tint-soft);
    border: 1px solid var(--tint-mint-2);
    border-radius: 99rem;
    color: var(--brand-strong);
    font-size: .74rem;
    font-weight: 650;
    text-decoration: none;
}

.conn-tags a:hover[b-gf79h55loa] {
    background: var(--tint-mint);
    color: var(--brand-strong);
}
/* /Components/Shared/Marketing/ImpactGrid.razor.rz.scp.css */
.impact-grid[b-5z9lr0myru] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem 1.5rem;
    margin-bottom: 3.5rem;
}

@media (max-width: 991.98px) {
    .impact-grid[b-5z9lr0myru] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .impact-grid[b-5z9lr0myru] { grid-template-columns: 1fr; }
}
/* /Components/Shared/Marketing/ImpactPillar.razor.rz.scp.css */
.impact-item[b-f80sz213jd] {
    text-align: center;
}

.impact-icon[b-f80sz213jd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    margin-bottom: 1.1rem;
    background: var(--tint-mint);
    border-radius: 1.1rem;
    color: var(--brand-strong);
}

.impact-icon[b-f80sz213jd]  svg {
    width: 1.7rem;
    height: 1.7rem;
}

.impact-item h3[b-f80sz213jd] {
    margin-bottom: .5rem;
    font-size: 1.02rem;
    font-weight: 700;
}

.impact-item p[b-f80sz213jd] {
    margin: 0 auto;
    max-width: 18rem;
    color: var(--body);
    font-size: .86rem;
    line-height: 1.6;
}
/* /Components/Shared/Marketing/IntegrationHero.razor.rz.scp.css */
/* Integration hero: compact copy + connection card motif on a soft top fade.
   Badge and CTA anatomy come from MarketingPage primitives. */

.integration-hero[b-7rwedx4u6p] {
    padding: 6rem 0 4.5rem;
    background: linear-gradient(180deg, var(--tint-soft) 0%, #fff 65%);
}

.integration-hero-grid[b-7rwedx4u6p] {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5rem);
}

.integration-hero h1[b-7rwedx4u6p] {
    margin-bottom: 1.4rem;
    font-size: clamp(2.4rem, 4.4vw, 3.8rem);
    font-weight: 650;
    line-height: 1.05;
}

.integration-lead[b-7rwedx4u6p] {
    margin-bottom: 2.25rem;
    max-width: 34rem;
    color: var(--body);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.6;
}

.hero-cta[b-7rwedx4u6p] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem;
}

/* connection card is the integration family signature */
.connection-card[b-7rwedx4u6p] {
    display: grid;
    justify-items: center;
    gap: 1.1rem;
    padding: 2.5rem 2rem;
    background: #fff;
    border: 1px solid var(--tint-mint-2);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px -22px rgba(0, 60, 30, .25);
}

.connection-node[b-7rwedx4u6p] {
    display: grid;
    justify-items: center;
    gap: .7rem;
}

.connection-node img[b-7rwedx4u6p] {
    max-width: 11rem;
    max-height: 2.6rem;
    object-fit: contain;
}

.connection-node span[b-7rwedx4u6p] {
    color: var(--body);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.connection-initials[b-7rwedx4u6p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    background: var(--tint-mint);
    border-radius: 1rem;
    color: var(--brand-strong);
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: .02em;
}

.connection-link[b-7rwedx4u6p] {
    display: grid;
    justify-items: center;
    gap: .35rem;
    color: var(--brand);
}

.connection-link svg[b-7rwedx4u6p] {
    width: 1.6rem;
    height: 1.6rem;
}

.connection-link em[b-7rwedx4u6p] {
    color: var(--body);
    font-size: .74rem;
    font-style: normal;
    font-weight: 650;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.connector-provider-profile[b-7rwedx4u6p] {
    display: grid;
    grid-template-columns: minmax(13rem, .8fr) minmax(0, 1.7fr) auto;
    align-items: start;
    gap: 1.5rem 2rem;
    margin-top: 2.5rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, .84);
    border: 1px solid var(--tint-mint-2);
    border-radius: var(--radius-lg);
}

.connector-profile-intro[b-7rwedx4u6p] {
    display: grid;
    gap: .75rem;
}

.connector-profile-intro .hero-badge[b-7rwedx4u6p] {
    margin: 0;
}

.connector-profile-description[b-7rwedx4u6p] {
    margin: 0;
    color: var(--body);
    line-height: 1.5;
}

.connector-profile-facts[b-7rwedx4u6p] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    margin: 0;
}

.connector-profile-facts div[b-7rwedx4u6p] {
    min-width: 0;
}

.connector-profile-facts dt[b-7rwedx4u6p] {
    margin-bottom: .25rem;
    color: var(--body);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.connector-profile-facts dd[b-7rwedx4u6p] {
    margin: 0;
    color: var(--heading);
    font-size: .9rem;
    line-height: 1.45;
}

.connector-profile-facts code[b-7rwedx4u6p] {
    overflow-wrap: anywhere;
    color: var(--brand-strong);
    font-size: .78rem;
}

.connector-profile-docs[b-7rwedx4u6p] {
    align-self: end;
    color: var(--brand-strong);
    font-size: .85rem;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .connector-provider-profile[b-7rwedx4u6p] { grid-template-columns: 1fr 1fr; }
    .connector-profile-docs[b-7rwedx4u6p] { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 991.98px) {
    .integration-hero[b-7rwedx4u6p] { padding: 4.5rem 0 3.5rem; }
    .integration-hero-grid[b-7rwedx4u6p] { grid-template-columns: 1fr; }
    .connection-card[b-7rwedx4u6p] { max-width: 26rem; }
}

@media (max-width: 640px) {
    .integration-hero h1[b-7rwedx4u6p] { font-size: clamp(2.1rem, 8.5vw, 2.7rem); }
    .hero-cta[b-7rwedx4u6p] { flex-direction: column; align-items: stretch; }
    .hero-cta > *[b-7rwedx4u6p] { width: 100%; }
    .connection-card[b-7rwedx4u6p] { max-width: none; }
    .connector-provider-profile[b-7rwedx4u6p] { grid-template-columns: 1fr; }
    .connector-profile-facts[b-7rwedx4u6p] { grid-template-columns: 1fr 1fr; }
    .connector-profile-docs[b-7rwedx4u6p] { grid-column: auto; }
}
/* /Components/Shared/Marketing/LandingHero.razor.rz.scp.css */
/* Landing (catalog) hero: centered copy over a mint dot-grid fade - the
   landing family signature. Badge and CTA anatomy come from MarketingPage primitives. */

.landing-hero[b-de8q8nmc5i] {
    padding: 6.5rem 0 4.5rem;
    text-align: center;
    background:
        radial-gradient(rgba(0, 123, 49, .12) 1px, transparent 1.5px) 0 0 / 22px 22px,
        linear-gradient(180deg, var(--tint-soft) 0%, rgba(255, 255, 255, 0) 78%),
        #fff;
}

.landing-copy[b-de8q8nmc5i] {
    max-width: 54rem;
    margin: 0 auto;
}

.landing-hero h1[b-de8q8nmc5i] {
    margin: 0 auto 1.4rem;
    font-size: clamp(2.6rem, 5vw, 4.4rem);
    font-weight: 650;
    line-height: 1.04;
}

.landing-lead[b-de8q8nmc5i] {
    margin: 0 auto 2.25rem;
    max-width: 46rem;
    color: var(--body);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.6;
}

.hero-cta[b-de8q8nmc5i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem;
}

.landing-cta[b-de8q8nmc5i] {
    justify-content: center;
}

.landing-shot[b-de8q8nmc5i] {
    max-width: 62rem;
    margin: 3.5rem auto 0;
}

.landing-shot img[b-de8q8nmc5i] {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--tint-mint-2);
    box-shadow: var(--shadow-card);
}

@media (max-width: 640px) {
    .landing-hero[b-de8q8nmc5i] { padding-top: 5rem; }
    .landing-hero h1[b-de8q8nmc5i] { font-size: clamp(2.2rem, 9vw, 2.8rem); }
    .hero-cta[b-de8q8nmc5i] { flex-direction: column; align-items: stretch; }
    .hero-cta > *[b-de8q8nmc5i] { width: 100%; }
}
/* /Components/Shared/Marketing/LinkCard.razor.rz.scp.css */
.link-card[b-7tm8g9sxmt] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem 1.8rem;
    background: #fff;
    border: 1px solid var(--tint-mint-2);
    border-radius: var(--radius-md);
    color: inherit;
    text-decoration: none;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.link-card:hover[b-7tm8g9sxmt],
.link-card:focus-visible[b-7tm8g9sxmt] {
    transform: translateY(-6px);
    border-color: rgba(0, 123, 49, .35);
    box-shadow: var(--shadow-card);
    color: inherit;
    text-decoration: none;
}

.link-card:focus-visible[b-7tm8g9sxmt] {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

.link-card-top[b-7tm8g9sxmt] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.link-icon[b-7tm8g9sxmt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.1rem;
    height: 3.1rem;
    margin-bottom: 1.3rem;
    background: var(--grad-green);
    border-radius: .95rem;
    box-shadow: 0 8px 20px -6px rgba(0, 123, 49, .4);
    color: #fff;
}

.link-icon[b-7tm8g9sxmt]  svg {
    width: 1.5rem;
    height: 1.5rem;
}

.link-badge[b-7tm8g9sxmt] {
    padding: .3rem .75rem;
    background: var(--tint-mint);
    border-radius: 99rem;
    color: var(--brand-strong);
    font-size: .75rem;
    font-weight: 700;
}

.link-card h3[b-7tm8g9sxmt] {
    margin-bottom: .6rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.link-card p[b-7tm8g9sxmt] {
    margin-bottom: 1.1rem;
    color: var(--body);
    font-size: .9rem;
    line-height: 1.6;
}

.link-card ul[b-7tm8g9sxmt] {
    display: grid;
    gap: .5rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.link-card ul li[b-7tm8g9sxmt] {
    position: relative;
    padding-left: 1.5rem;
    color: var(--body);
    font-size: .86rem;
    line-height: 1.5;
}

.link-card ul li[b-7tm8g9sxmt]::before {
    content: "";
    position: absolute;
    left: 0;
    top: .32em;
    width: .85em;
    height: .85em;
    background-color: var(--brand);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l4.6 4.6L19.5 6.7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l4.6 4.6L19.5 6.7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.link-cta[b-7tm8g9sxmt] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: auto;
    color: var(--brand);
    font-size: .9rem;
    font-weight: 700;
}

.link-cta svg[b-7tm8g9sxmt] {
    width: 1.05rem;
    height: 1.05rem;
    transition: transform .18s ease;
}

.link-card:hover .link-cta svg[b-7tm8g9sxmt] {
    transform: translateX(4px);
}
/* /Components/Shared/Marketing/LinkCardGrid.razor.rz.scp.css */
.link-grid[b-flfvus157x] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.link-grid-2[b-flfvus157x] {
    grid-template-columns: repeat(2, 1fr);
}

.link-grid-4[b-flfvus157x] {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1199.98px) {
    .link-grid-4[b-flfvus157x] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991.98px) {
    .link-grid[b-flfvus157x] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .link-grid[b-flfvus157x],
    .link-grid-2[b-flfvus157x],
    .link-grid-4[b-flfvus157x] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/Marketing/MarketingPage.razor.rz.scp.css */
/* Design tokens + shared primitives for the marketing page kit.
   Single owner of: tokens, base typography, .accent, badge, CTA button anatomy.
   Family heroes and section components add layout only - never re-style these primitives. */

.marketing-page[b-5xs3cpkkzn] {
    --ink: #101613;
    --body: #4d5a53;
    --soft: #6b6b6b;
    --brand: #007b31;
    --brand-strong: #005624;
    --vivid: #31a267;
    --num: #007b31;
    /* all stops keep >=4.5:1 with white text (WCAG 1.4.3) */
    --grad-green: linear-gradient(150deg, #0c8244 0%, #007b31 55%, #00602a 100%);
    --tint-soft: #f0fbf4;
    --tint-mint: #dcf4e6;
    --tint-mint-2: #bce9d1;
    --line: #e6e9e6;
    --radius-lg: 1.75rem;
    --radius-md: 1.25rem;
    --shadow-card: 0 1px 2px rgba(12, 24, 18, .05), 0 16px 40px -12px rgba(12, 24, 18, .12);
    overflow: hidden;
    background: #fff;
    color: var(--ink);
}

.marketing-page[b-5xs3cpkkzn]  h1,
.marketing-page[b-5xs3cpkkzn]  h2,
.marketing-page[b-5xs3cpkkzn]  h3 {
    margin-top: 0;
    color: var(--ink);
    letter-spacing: -.03em;
}

.marketing-page[b-5xs3cpkkzn]  p {
    margin-top: 0;
}

.marketing-page[b-5xs3cpkkzn]  .container-xxl {
    max-width: 82rem;
}

.marketing-page[b-5xs3cpkkzn]  .accent {
    padding-inline: .08em;
    color: var(--brand);
    background: linear-gradient(180deg, transparent 64%, rgba(141, 216, 177, .38) 64%, rgba(141, 216, 177, .38) 94%, transparent 94%);
    border-radius: .12em;
}

/* ---------- badge primitive (used by every family hero) ---------- */

.marketing-page[b-5xs3cpkkzn]  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1.9rem;
    padding: .5rem 1.1rem;
    background: #fff;
    border: 1px solid var(--tint-mint-2);
    border-radius: 99rem;
    color: var(--ink);
    font-size: .85rem;
    font-weight: 650;
}

.marketing-page[b-5xs3cpkkzn]  .hero-badge-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--vivid);
    animation: pulse-dot-b-5xs3cpkkzn 2.4s ease-out infinite;
}

@keyframes pulse-dot-b-5xs3cpkkzn {
    0% { box-shadow: 0 0 0 0 rgba(0, 123, 49, .35); }
    70% { box-shadow: 0 0 0 9px rgba(0, 123, 49, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 123, 49, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .marketing-page[b-5xs3cpkkzn]  .hero-badge-dot { animation: none !important; }
}

/* ---------- CTA button primitives (used by heroes and closing) ---------- */

.marketing-page[b-5xs3cpkkzn]  .cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.5rem;
    padding: .95rem 1.9rem;
    background: var(--grad-green);
    border-radius: 99rem;
    box-shadow: 0 10px 28px -8px rgba(0, 123, 49, .45);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.marketing-page[b-5xs3cpkkzn]  .cta-primary:hover {
    color: #fff;
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -10px rgba(0, 123, 49, .55);
    text-decoration: none;
}

.marketing-page[b-5xs3cpkkzn]  .cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.5rem;
    padding: .95rem 1.9rem;
    background: #fff;
    border: 1px solid var(--tint-mint-2);
    border-radius: 99rem;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, color .18s ease;
}

.marketing-page[b-5xs3cpkkzn]  .cta-secondary:hover {
    border-color: var(--brand);
    color: var(--brand);
    transform: translateY(-2px);
    text-decoration: none;
}

.marketing-page[b-5xs3cpkkzn]  .cta-arrow {
    display: inline-flex;
    margin-left: .55rem;
    transition: transform .18s ease;
}

.marketing-page[b-5xs3cpkkzn]  .cta-arrow svg {
    width: 1.15rem;
    height: 1.15rem;
}

.marketing-page[b-5xs3cpkkzn]  .cta-primary:hover .cta-arrow {
    transform: translateX(5px);
}
/* /Components/Shared/Marketing/MetricCard.razor.rz.scp.css */
.metric-card[b-uwjdflajqo] {
    padding: 1.75rem 1.5rem;
    background: #fff;
    border: 1px solid rgba(0, 123, 49, .16);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(12, 24, 18, .04), 0 12px 32px -14px rgba(12, 60, 40, .14);
    transition: transform .22s ease, box-shadow .22s ease;
}

.metric-card:hover[b-uwjdflajqo] {
    transform: translateY(-6px);
    box-shadow: 0 2px 4px rgba(12, 24, 18, .05), 0 24px 48px -16px rgba(12, 96, 64, .22);
}

.metric-card strong[b-uwjdflajqo] {
    display: block;
    margin-bottom: .7rem;
    color: var(--num);
    font-size: clamp(2.4rem, 3.6vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.metric-card strong i[b-uwjdflajqo] {
    color: var(--vivid);
    font-style: normal;
}

.metric-card span[b-uwjdflajqo] {
    display: block;
    color: var(--ink);
    font-size: .92rem;
    font-weight: 650;
    line-height: 1.4;
}

.metric-card small[b-uwjdflajqo] {
    display: block;
    margin-top: .8rem;
    color: var(--soft);
    font-size: .74rem;
    line-height: 1.5;
}
/* /Components/Shared/Marketing/MetricGrid.razor.rz.scp.css */
.metric-band[b-0nya4x5na1] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 991.98px) {
    .metric-band[b-0nya4x5na1] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .metric-band[b-0nya4x5na1] { grid-template-columns: 1fr; }
}
/* /Components/Shared/Marketing/OutcomeItem.razor.rz.scp.css */
.outcome-item strong[b-22xwymdjc2] {
    display: block;
    margin-bottom: .4rem;
    font-size: .98rem;
}

.outcome-item p[b-22xwymdjc2] {
    margin: 0;
    color: var(--body);
    font-size: .9rem;
    line-height: 1.65;
}
/* /Components/Shared/Marketing/OutcomesPanel.razor.rz.scp.css */
.impact-outcomes[b-linzywgatn] {
    padding: clamp(2rem, 4vw, 3rem);
    background: linear-gradient(180deg, var(--tint-soft) 0%, var(--tint-mint) 100%);
    border: 1px solid rgba(0, 123, 49, .14);
    border-radius: var(--radius-lg);
}

.impact-outcomes h3[b-linzywgatn] {
    margin-bottom: 1.75rem;
    color: var(--brand-strong);
    font-size: 1.2rem;
    font-weight: 700;
}

.impact-outcome-grid[b-linzywgatn] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 2.5rem;
}

@media (max-width: 640px) {
    .impact-outcome-grid[b-linzywgatn] { grid-template-columns: 1fr; }
}
/* /Components/Shared/Marketing/PageOverview.razor.rz.scp.css */
.mod-overview-grid[b-assdtwsmev] {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
}

.mod-overview-copy .section-eyebrow[b-assdtwsmev] {
    margin-bottom: 1.1rem;
    color: var(--brand);
    font-size: .95rem;
    font-weight: 700;
}

.mod-overview-copy h2[b-assdtwsmev] {
    margin-bottom: 1.25rem;
    font-size: clamp(2.1rem, 4vw, 3.3rem);
    font-weight: 650;
    line-height: 1.06;
}

.mod-overview-copy[b-assdtwsmev]  p {
    margin-bottom: 1.25rem;
    color: var(--body);
    font-size: 1.02rem;
    line-height: 1.7;
}

.mod-overview-copy[b-assdtwsmev]  p strong {
    color: var(--brand-strong);
}

@media (max-width: 991.98px) {
    .mod-overview-grid[b-assdtwsmev] { grid-template-columns: 1fr; }
}
/* /Components/Shared/Marketing/PageSection.razor.rz.scp.css */
/* Section bands: transitions always fade through white so adjacent sections never clash. */

.mod-section[b-nf3nyh0kf2] {
    padding: 7rem 0;
}

.mod-section-white[b-nf3nyh0kf2] {
    background: #fff;
}

.mod-section-soft[b-nf3nyh0kf2] {
    background: linear-gradient(180deg, #fff 0%, var(--tint-soft) 20%, var(--tint-soft) 80%, #fff 100%);
}

.mod-section-mint[b-nf3nyh0kf2] {
    background: linear-gradient(180deg, #fff 0%, var(--tint-soft) 18%, var(--tint-mint) 55%, var(--tint-soft) 88%, #fff 100%);
}

.mod-section-dark[b-nf3nyh0kf2] {
    background:
        radial-gradient(circle at 12% -5%, rgba(0, 123, 49, 0.30), transparent 44rem),
        radial-gradient(circle at 88% 105%, rgba(0, 123, 49, 0.16), transparent 40rem),
        linear-gradient(170deg, #071009 0%, #0c1810 48%, #081209 100%);
}

.mod-section-dark[b-nf3nyh0kf2]  .section-eyebrow {
    color: #56c188;
}

.mod-section-dark[b-nf3nyh0kf2]  .section-head h2 {
    color: #ffffff;
}

.mod-section-dark[b-nf3nyh0kf2]  .section-lead {
    color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 991.98px) {
    .mod-section[b-nf3nyh0kf2] { padding: 4.5rem 0; }
}
/* /Components/Shared/Marketing/PageSectionHead.razor.rz.scp.css */
.section-head[b-ukxephzvlq] {
    max-width: 52rem;
    margin: 0 auto 4rem;
    text-align: center;
}

.section-eyebrow[b-ukxephzvlq] {
    margin-bottom: 1.1rem;
    color: var(--brand);
    font-size: .95rem;
    font-weight: 700;
}

.section-head h2[b-ukxephzvlq] {
    margin-bottom: 1.25rem;
    font-size: clamp(2.1rem, 4vw, 3.3rem);
    font-weight: 650;
    line-height: 1.06;
}

.section-lead[b-ukxephzvlq] {
    margin: 0 auto;
    max-width: 42rem;
    color: var(--body);
    font-size: 1.1rem;
    line-height: 1.65;
}

@media (max-width: 640px) {
    .section-head[b-ukxephzvlq] { margin-bottom: 2.75rem; }
}
/* /Components/Shared/Marketing/PlatformHero.razor.rz.scp.css */
/* Platform hero band: mint radial fading to white before the section ends.
   Badge and CTA anatomy come from MarketingPage primitives. */

.mod-hero[b-rjgops3ob5] {
    padding: 6.5rem 0 4.5rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, #fff 96%),
        radial-gradient(110% 70% at 50% 20%, var(--tint-mint) 0%, var(--tint-soft) 55%, rgba(255, 255, 255, 0) 100%),
        #fff;
}

.mod-hero-grid[b-rjgops3ob5] {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
    margin-bottom: 4rem;
}

.mod-hero h1[b-rjgops3ob5] {
    margin-bottom: 1.4rem;
    font-size: clamp(2.5rem, 4.6vw, 4rem);
    font-weight: 650;
    line-height: 1.04;
}

.mod-lead[b-rjgops3ob5] {
    margin-bottom: 2.25rem;
    max-width: 36rem;
    color: var(--body);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.6;
}

.mod-hero-visual[b-rjgops3ob5] {
    min-width: 0;
}

.hero-cta[b-rjgops3ob5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem;
}

.mod-shot-frame[b-rjgops3ob5] {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--tint-mint-2);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 70px -22px rgba(0, 60, 30, .3);
}

.mod-shot-bar[b-rjgops3ob5] {
    display: flex;
    gap: .45rem;
    padding: .85rem 1.2rem;
    background: #f4f6f4;
    border-bottom: 1px solid var(--line);
}

.mod-shot-bar span[b-rjgops3ob5] {
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: #dde2dd;
}

.mod-shot-frame img[b-rjgops3ob5] {
    display: block;
    width: 100%;
    height: auto;
}

.metric-grid[b-rjgops3ob5] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 991.98px) {
    .mod-hero[b-rjgops3ob5] { padding: 5rem 0 3.5rem; }
    .mod-hero-grid[b-rjgops3ob5] { grid-template-columns: 1fr; margin-bottom: 3rem; }
    .metric-grid[b-rjgops3ob5] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .mod-hero h1[b-rjgops3ob5] { font-size: clamp(2.2rem, 9vw, 2.8rem); }
    .hero-cta[b-rjgops3ob5] { flex-direction: column; align-items: stretch; }
    .hero-cta > *[b-rjgops3ob5] { width: 100%; }
    .metric-grid[b-rjgops3ob5] { grid-template-columns: 1fr; }
}
/* /Components/Shared/Marketing/PricingTierCard.razor.rz.scp.css */
.pricing-tier[b-ekq7xa9znc] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem;
    background: #fff;
    border: 1px solid var(--tint-mint-2);
    border-radius: var(--radius-md);
    box-shadow: 0 14px 38px -24px rgba(12, 24, 18, .35);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.pricing-tier:hover[b-ekq7xa9znc],
.pricing-tier:focus-within[b-ekq7xa9znc] {
    border-color: rgba(0, 123, 49, .42);
    box-shadow: var(--shadow-card);
    transform: translateY(-6px);
}

.pricing-tier-recommended[b-ekq7xa9znc] {
    border: 2px solid var(--brand);
    box-shadow: 0 22px 54px -24px rgba(0, 123, 49, .48);
}

.pricing-tier-badge[b-ekq7xa9znc] {
    align-self: center;
    margin: -3rem 0 1.15rem;
    padding: .48rem 1rem;
    background: var(--grad-green);
    border-radius: 99rem;
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
}

.pricing-tier-header[b-ekq7xa9znc] {
    text-align: center;
}

.pricing-tier-header h3[b-ekq7xa9znc] {
    margin-bottom: .35rem;
    font-size: 1.35rem;
    font-weight: 750;
}

.pricing-tier-subtitle[b-ekq7xa9znc],
.pricing-tier-note[b-ekq7xa9znc] {
    color: var(--body);
    font-size: .88rem;
}

.pricing-tier-subtitle[b-ekq7xa9znc] {
    min-height: 2.6rem;
    margin-bottom: 1rem;
}

.pricing-tier-price[b-ekq7xa9znc] {
    margin-bottom: .25rem;
    color: var(--brand);
    font-size: clamp(2.3rem, 4vw, 3.25rem);
    font-weight: 800;
    line-height: 1;
}

.pricing-tier-note[b-ekq7xa9znc] {
    margin-bottom: 1.5rem;
}

.pricing-tier-description[b-ekq7xa9znc] {
    margin-bottom: 1.5rem;
    color: var(--body);
    font-size: .92rem;
    line-height: 1.65;
}

.pricing-tier-features[b-ekq7xa9znc] {
    display: grid;
    gap: .8rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

.pricing-tier-features li[b-ekq7xa9znc] {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    color: var(--body);
    font-size: .9rem;
    line-height: 1.5;
}

.pricing-tier-features svg[b-ekq7xa9znc] {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    margin-top: .12rem;
    color: var(--brand);
}

.pricing-tier-footer[b-ekq7xa9znc] {
    margin-top: auto;
}

.pricing-tier-cta[b-ekq7xa9znc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: 100%;
    min-height: 3.25rem;
    padding: .8rem 1rem;
    border: 1px solid var(--brand);
    border-radius: 99rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.pricing-tier-cta svg[b-ekq7xa9znc] {
    width: 1.05rem;
    height: 1.05rem;
}

.pricing-tier-cta-primary[b-ekq7xa9znc] {
    background: var(--grad-green);
    color: #fff;
}

.pricing-tier-cta-secondary[b-ekq7xa9znc] {
    background: #fff;
    color: var(--brand-strong);
}

.pricing-tier-cta:hover[b-ekq7xa9znc] {
    transform: translateY(-2px);
    text-decoration: none;
}

.pricing-tier-cta-primary:hover[b-ekq7xa9znc] {
    color: #fff;
    filter: brightness(1.05);
}

.pricing-tier-cta-secondary:hover[b-ekq7xa9znc] {
    background: var(--tint-soft);
    color: var(--brand-strong);
}

@media (prefers-reduced-motion: reduce) {
    .pricing-tier[b-ekq7xa9znc],
    .pricing-tier-cta[b-ekq7xa9znc] {
        transition: none;
    }
}
/* /Components/Shared/Marketing/ProductHero.razor.rz.scp.css */
/* Product hero: diagonal tint canvas + offset green backdrop behind the shot.
   Badge and CTA anatomy come from MarketingPage primitives. */

.product-hero[b-hnxz1dq76m] {
    padding: 6.5rem 0 5.5rem;
    background: linear-gradient(160deg, var(--tint-mint) 0%, var(--tint-soft) 42%, #fff 100%);
}

.product-hero-grid[b-hnxz1dq76m] {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5.5rem);
}

.product-hero h1[b-hnxz1dq76m] {
    margin-bottom: 1.4rem;
    font-size: clamp(2.5rem, 4.6vw, 4rem);
    font-weight: 650;
    line-height: 1.04;
}

.product-lead[b-hnxz1dq76m] {
    margin-bottom: 2.25rem;
    max-width: 36rem;
    color: var(--body);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.6;
}

.hero-cta[b-hnxz1dq76m] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem;
}

.product-highlights[b-hnxz1dq76m] {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.product-highlights li[b-hnxz1dq76m] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem 1rem;
    background: #fff;
    border: 1px solid var(--tint-mint-2);
    border-radius: 99rem;
    color: var(--ink);
    font-size: .85rem;
    font-weight: 650;
}

.product-highlights svg[b-hnxz1dq76m] {
    width: .95rem;
    height: .95rem;
    flex: 0 0 auto;
    color: var(--brand);
}

.product-shot[b-hnxz1dq76m] {
    position: relative;
    padding: 1rem 1rem 0 0;
}

/* offset backdrop panel is the product family signature */
.product-shot[b-hnxz1dq76m]::before {
    content: "";
    position: absolute;
    inset: 0 0 1.5rem 1.5rem;
    background: var(--grad-green);
    border-radius: var(--radius-lg);
    transform: translate(1.25rem, -1.25rem);
}

.product-shot img[b-hnxz1dq76m] {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--tint-mint-2);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 70px -22px rgba(0, 60, 30, .35);
    background: #fff;
}

@media (max-width: 991.98px) {
    .product-hero[b-hnxz1dq76m] { padding: 5rem 0 4rem; }
    .product-hero-grid[b-hnxz1dq76m] { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .product-hero h1[b-hnxz1dq76m] { font-size: clamp(2.2rem, 9vw, 2.8rem); }
    .hero-cta[b-hnxz1dq76m] { flex-direction: column; align-items: stretch; }
    .hero-cta > *[b-hnxz1dq76m] { width: 100%; }
}
/* /Components/Shared/Marketing/RoiAssessment.razor.rz.scp.css */
.roi-assessment[b-edgul90zc3] {
    display: grid;
    grid-template-columns: minmax(18rem, .82fr) minmax(0, 1.18fr);
    gap: 1.25rem;
    align-items: stretch;
}

.roi-panel[b-edgul90zc3] {
    padding: clamp(1.4rem, 3vw, 2.25rem);
    background: #fff;
    border: 1px solid var(--tint-mint-2);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.roi-panel-header[b-edgul90zc3] {
    margin-bottom: 1.5rem;
}

.roi-panel-header h3[b-edgul90zc3] {
    margin-bottom: .35rem;
    font-size: 1.25rem;
    font-weight: 750;
}

.roi-panel-header p[b-edgul90zc3] {
    margin-bottom: 0;
    color: var(--body);
    font-size: .9rem;
}

.roi-form[b-edgul90zc3],
.roi-field[b-edgul90zc3] {
    display: grid;
}

.roi-form[b-edgul90zc3] {
    gap: 1.15rem;
}

.roi-field[b-edgul90zc3] {
    gap: .38rem;
}

.roi-field label[b-edgul90zc3] {
    color: var(--ink);
    font-size: .9rem;
    font-weight: 700;
}

.roi-field[b-edgul90zc3]  .roi-input {
    width: 100%;
    min-height: 3rem;
    padding: .68rem .8rem;
    background: #fff;
    border: 1px solid #aab4ae;
    border-radius: .65rem;
    color: var(--ink);
}

.roi-field[b-edgul90zc3]  .roi-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem rgba(0, 123, 49, .16);
    outline: 0;
}

.roi-help[b-edgul90zc3] {
    color: var(--body);
    font-size: .78rem;
}

.roi-field[b-edgul90zc3]  .validation-message,
.roi-validation-summary[b-edgul90zc3] {
    color: #a30d1b;
    font-size: .8rem;
}

.roi-validation-summary:empty[b-edgul90zc3] {
    display: none;
}

.roi-submit[b-edgul90zc3] {
    min-height: 3.25rem;
    padding: .8rem 1.25rem;
    background: var(--grad-green);
    border: 0;
    border-radius: 99rem;
    box-shadow: 0 10px 28px -8px rgba(0, 123, 49, .45);
    color: #fff;
    font-weight: 750;
}

.roi-submit:hover[b-edgul90zc3] {
    filter: brightness(1.06);
}

.roi-submit:focus-visible[b-edgul90zc3] {
    outline: 3px solid var(--brand-strong);
    outline-offset: 3px;
}

.roi-live[b-edgul90zc3] {
    min-height: 31rem;
}

.roi-result-grid[b-edgul90zc3] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.roi-result[b-edgul90zc3] {
    display: grid;
    gap: .3rem;
    padding: 1.15rem;
    background: var(--tint-soft);
    border: 1px solid var(--tint-mint-2);
    border-radius: .9rem;
    text-align: center;
}

.roi-result strong[b-edgul90zc3] {
    color: var(--brand-strong);
    font-size: 1.35rem;
}

.roi-result span[b-edgul90zc3] {
    color: var(--ink);
    font-size: .85rem;
    font-weight: 650;
}

.roi-result small[b-edgul90zc3] {
    color: var(--body);
    font-size: .75rem;
}

.roi-total[b-edgul90zc3] {
    display: grid;
    gap: .35rem;
    margin-top: 1rem;
    padding: 1.65rem;
    background: var(--grad-green);
    border-radius: 1rem;
    color: #fff;
    text-align: center;
}

.roi-total span[b-edgul90zc3],
.roi-total small[b-edgul90zc3] {
    color: rgba(255, 255, 255, .88);
}

.roi-total strong[b-edgul90zc3] {
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.1;
}

.roi-summary[b-edgul90zc3] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
    margin: 1rem 0 0;
}

.roi-summary div[b-edgul90zc3] {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
    text-align: center;
}

.roi-summary dt[b-edgul90zc3] {
    color: var(--body);
    font-size: .78rem;
    font-weight: 600;
}

.roi-summary dd[b-edgul90zc3] {
    margin: .3rem 0 0;
    color: var(--brand-strong);
    font-size: 1.05rem;
    font-weight: 750;
}

.roi-empty[b-edgul90zc3] {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 27rem;
    color: var(--body);
    text-align: center;
}

.roi-empty svg[b-edgul90zc3] {
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 1rem;
    color: var(--brand);
}

.roi-empty p[b-edgul90zc3] {
    max-width: 27rem;
    margin-bottom: 0;
    line-height: 1.6;
}

@media (max-width: 991.98px) {
    .roi-assessment[b-edgul90zc3] {
        grid-template-columns: 1fr;
    }

    .roi-live[b-edgul90zc3] {
        min-height: 0;
    }
}

@media (max-width: 520px) {
    .roi-result-grid[b-edgul90zc3],
    .roi-summary[b-edgul90zc3] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .roi-submit[b-edgul90zc3] {
        transition: none;
    }
}
/* /Components/Shared/Marketing/SolutionHero.razor.rz.scp.css */
/* Solution hero: centered editorial layout on a soft top radial.
   Badge and CTA anatomy come from MarketingPage primitives. */

.solution-hero[b-fm5yk5ephl] {
    padding: 6.5rem 0 5rem;
    text-align: center;
    background:
        radial-gradient(90% 65% at 50% 0%, var(--tint-mint) 0%, var(--tint-soft) 55%, rgba(255, 255, 255, 0) 100%),
        #fff;
}

.solution-hero h1[b-fm5yk5ephl] {
    margin: 0 auto 1.4rem;
    max-width: 56rem;
    font-size: clamp(2.6rem, 5vw, 4.4rem);
    font-weight: 650;
    line-height: 1.04;
}

.solution-lead[b-fm5yk5ephl] {
    margin: 0 auto 2.25rem;
    max-width: 46rem;
    color: var(--body);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.6;
}

.hero-cta[b-fm5yk5ephl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem;
}

.solution-cta[b-fm5yk5ephl] {
    justify-content: center;
}

/* inline ruled stat strip is the solution family signature */
.solution-stats[b-fm5yk5ephl] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 3.25rem;
}

.solution-stats[b-fm5yk5ephl]  .solution-stat + .solution-stat {
    border-left: 1px solid var(--tint-mint-2);
}

@media (max-width: 640px) {
    .solution-hero h1[b-fm5yk5ephl] { font-size: clamp(2.2rem, 9vw, 2.8rem); }
    .hero-cta[b-fm5yk5ephl] { flex-direction: column; align-items: stretch; }
    .hero-cta > *[b-fm5yk5ephl] { width: 100%; }
    .solution-stats[b-fm5yk5ephl] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 0; }
    .solution-stats[b-fm5yk5ephl]  .solution-stat + .solution-stat { border-left: 0; }
}
/* /Components/Shared/Marketing/SolutionStat.razor.rz.scp.css */
.solution-stat[b-k4y8obk7hx] {
    display: grid;
    gap: .3rem;
    padding: 0 clamp(1.5rem, 3vw, 3rem);
    text-align: center;
}

.solution-stat strong[b-k4y8obk7hx] {
    color: var(--num);
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.solution-stat span[b-k4y8obk7hx] {
    color: var(--body);
    font-size: .85rem;
    font-weight: 650;
    line-height: 1.35;
}
/* /Components/Shared/Marketing/UseCaseCard.razor.rz.scp.css */
.usecase-card[b-gfvm6xomr8] {
    display: flex;
    flex-direction: column;
    padding: 2rem 1.9rem;
    background: #fff;
    border: 1px solid var(--tint-mint-2);
    border-radius: var(--radius-md);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.usecase-card:hover[b-gfvm6xomr8] {
    transform: translateY(-5px);
    border-color: rgba(0, 123, 49, .35);
    box-shadow: var(--shadow-card);
}

.usecase-card h3[b-gfvm6xomr8] {
    margin-bottom: .7rem;
    color: var(--brand-strong);
    font-size: 1.2rem;
    font-weight: 700;
}

.usecase-card p[b-gfvm6xomr8] {
    margin-bottom: 1.2rem;
    color: var(--body);
    font-size: .92rem;
    line-height: 1.65;
}

.usecase-mech[b-gfvm6xomr8] {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    color: var(--body);
    font-size: .84rem;
    line-height: 1.55;
}

.usecase-mech strong[b-gfvm6xomr8] {
    color: var(--ink);
}
/* /Components/Shared/Marketing/UseCaseGrid.razor.rz.scp.css */
.usecase-grid[b-11huaei4ag] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.1rem;
}

@media (max-width: 640px) {
    .usecase-grid[b-11huaei4ag] { grid-template-columns: 1fr; }
}
/* /Components/Shared/Showcase/HxsPageHost.razor.rz.scp.css */
/* Showcase v3 island styles (A3-M3): CSS isolation replaces the v2 _stamp()
   trick - everything below rides ::deep under the host's scope attribute, and
   colors come from the --hxa-* tokens inherited from .hxa-app, so light/dark
   theming is automatic. Fluent v5 look: 4px radii, Segoe UI from the shell,
   #007b31 accent family. */

.hxs-root[b-sfyxu9fkij] {
    font-size: 0.75rem;
    color: var(--hxa-ink);
}

/* ── page frame ─────────────────────────────────────────────────────────── */

[b-sfyxu9fkij] .hxs-crumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--hxa-faint);
    font-size: 0.6875rem;
    margin-bottom: 8px;
}

[b-sfyxu9fkij] .hxs-crumb-home { display: inline-flex; }

[b-sfyxu9fkij] .hxs-sync {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

[b-sfyxu9fkij] .hxs-sync-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border: 1px solid var(--hxa-line);
    border-radius: 999px;
    background: var(--hxa-card);
    color: var(--hxa-soft);
    font-size: 0.65625rem;
}

[b-sfyxu9fkij] .hxs-page-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

[b-sfyxu9fkij] .hxs-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

[b-sfyxu9fkij] .hxs-subtitle { color: var(--hxa-soft); font-size: 0.6875rem; }

[b-sfyxu9fkij] .hxs-note {
    margin: 10px 0 0;
    color: var(--hxa-faint);
    font-size: 0.65625rem;
}

[b-sfyxu9fkij] .hxs-readonly {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    margin-bottom: 10px;
    border: 1px solid var(--hxa-line);
    border-left: 3px solid var(--hxa-info);
    border-radius: 4px;
    background: var(--hxa-card);
    color: var(--hxa-soft);
    font-size: 0.6875rem;
}

/* ── toolbar ────────────────────────────────────────────────────────────── */

[b-sfyxu9fkij] .hxs-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

[b-sfyxu9fkij] .hxs-toolbar-right { display: flex; gap: 6px; }

[b-sfyxu9fkij] .hxs-search {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    border: 1px solid var(--hxa-line);
    border-radius: 4px;
    background: var(--hxa-card);
    color: var(--hxa-faint);
}

[b-sfyxu9fkij] .hxs-search input {
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--hxa-ink);
    font: inherit;
    font-size: 0.71875rem;
    padding: 6px 0;
    width: 168px;
}

[b-sfyxu9fkij] .hxs-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid var(--hxa-line);
    border-radius: 4px;
    background: var(--hxa-card);
    color: var(--hxa-ink);
    font: inherit;
    font-size: 0.71875rem;
    cursor: pointer;
}

[b-sfyxu9fkij] .hxs-btn:hover { background: var(--hxa-hover); }

[b-sfyxu9fkij] .hxs-btn-primary {
    background: var(--hxa-accent);
    border-color: var(--hxa-accent);
    color: var(--hxa-on-accent, #fff);
    font-weight: 600;
}

[b-sfyxu9fkij] .hxs-btn-primary:hover { background: var(--hxa-accent-strong); border-color: var(--hxa-accent-strong); }

[b-sfyxu9fkij] .hxs-btn-danger {
    background: var(--hxa-err);
    border-color: var(--hxa-err);
    color: var(--hxa-on-accent, #fff);
    font-weight: 600;
}

/* Without this, the generic ".hxs-btn:hover" rule (2 selectors) outranks
   ".hxs-btn-danger" (1 selector) on hover and repaints it with the neutral
   hover tint - white text over a near-white background (axe color-contrast
   fail; found via a click-then-scan sequence where the pointer rests on the
   button). Mirrors the ".hxs-btn-primary:hover" override just above. */
[b-sfyxu9fkij] .hxs-btn-danger:hover { background: var(--hxa-err); border-color: var(--hxa-err); filter: brightness(0.92); }

[b-sfyxu9fkij] .hxs-btn-danger-subtle { color: var(--hxa-err); }

[b-sfyxu9fkij] .hxs-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--hxa-soft);
    cursor: pointer;
}

[b-sfyxu9fkij] .hxs-icon-btn:hover { background: var(--hxa-hover); color: var(--hxa-ink); }

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

[b-sfyxu9fkij] .hxs-tablewrap {
    border: 1px solid var(--hxa-line);
    border-radius: 6px;
    background: var(--hxa-card);
    overflow-x: auto;
}

[b-sfyxu9fkij] .hxs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.71875rem;
}

[b-sfyxu9fkij] .hxs-table th {
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 0.59375rem;
    font-weight: 600;
    color: var(--hxa-soft);
    padding: 7px 10px;
    border-bottom: 1px solid var(--hxa-line);
    white-space: nowrap;
}

[b-sfyxu9fkij] .hxs-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--hxa-line-soft);
    vertical-align: middle;
    white-space: nowrap;
}

[b-sfyxu9fkij] .hxs-table tbody tr:hover { background: var(--hxa-hover); }

[b-sfyxu9fkij] .hxs-table tbody tr:last-child td { border-bottom: 0; }

[b-sfyxu9fkij] .hxs-th-center, [b-sfyxu9fkij] .hxs-td-center { text-align: center; }

[b-sfyxu9fkij] .hxs-td-mono { font-variant-numeric: tabular-nums; color: var(--hxa-soft); }

[b-sfyxu9fkij] .hxs-td-actions { width: 34px; text-align: right; }

[b-sfyxu9fkij] .hxs-sort {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    padding: 0;
}

[b-sfyxu9fkij] .hxs-sort-caret { opacity: 0.45; transition: transform 0.12s ease; }

[b-sfyxu9fkij] .hxs-caret-asc { transform: rotate(180deg); opacity: 1; }

[b-sfyxu9fkij] .hxs-caret-desc { opacity: 1; }

[b-sfyxu9fkij] .hxs-empty {
    text-align: center;
    color: var(--hxa-faint);
    padding: 22px 10px;
}

[b-sfyxu9fkij] .hxs-pager {
    margin-top: 6px;
    color: var(--hxa-faint);
    font-size: 0.65625rem;
}

[b-sfyxu9fkij] .hxs-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: var(--hxa-ink);
    font: inherit;
    font-size: 0.71875rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

[b-sfyxu9fkij] .hxs-name:hover span:first-child { text-decoration: underline; color: var(--hxa-accent); }

[b-sfyxu9fkij] .hxs-name-sub { display: block; font-weight: 400; color: var(--hxa-faint); font-size: 0.625rem; }

[b-sfyxu9fkij] .hxs-src {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 1px 4px;
    border-radius: 3px;
    background: var(--hxa-accent-soft);
    color: var(--hxa-accent-strong);
}

/* Chip fills mirror the v2 .hxa-chip-* recipe exactly (axe-verified in both themes) */

[b-sfyxu9fkij] .hxs-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 99px;
    font-size: 0.625rem;
    font-weight: 700;
    white-space: nowrap;
}

[b-sfyxu9fkij] .hxs-chip-ok { background: rgba(14, 112, 14, 0.12); color: var(--hxa-ok); }
[b-sfyxu9fkij] .hxs-chip-warn { background: rgba(255, 140, 0, 0.16); color: var(--hxa-warn); }
[b-sfyxu9fkij] .hxs-chip-err { background: rgba(196, 43, 28, 0.12); color: var(--hxa-err); }
[b-sfyxu9fkij] .hxs-chip-info { background: rgba(0, 120, 212, 0.12); color: var(--hxa-info); }
[b-sfyxu9fkij] .hxs-chip-off { background: var(--hxa-line-soft); color: var(--hxa-soft); }

[b-sfyxu9fkij] .hxs-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 6px;
}

[b-sfyxu9fkij] .hxs-dot-ok { background: var(--hxa-ok); }
[b-sfyxu9fkij] .hxs-dot-warn { background: var(--hxa-warn); }
[b-sfyxu9fkij] .hxs-dot-off { background: var(--hxa-soft); }

@keyframes hxs-flash-b-sfyxu9fkij {
    0% { background: var(--hxa-accent-soft); }
    100% { background: transparent; }
}

[b-sfyxu9fkij] .hxs-row-flash td { animation: hxs-flash-b-sfyxu9fkij 1.6s ease-out 1; }

/* ── row menu ───────────────────────────────────────────────────────────── */

[b-sfyxu9fkij] .hxs-rowmenu { position: relative; display: inline-flex; }

[b-sfyxu9fkij] .hxs-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 30;
    min-width: 120px;
    padding: 4px;
    border: 1px solid var(--hxa-line);
    border-radius: 6px;
    background: var(--hxa-card);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
    display: grid;
}

[b-sfyxu9fkij] .hxs-menu button {
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--hxa-ink);
    font: inherit;
    font-size: 0.6875rem;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
}

[b-sfyxu9fkij] .hxs-menu button:hover { background: var(--hxa-hover); }

[b-sfyxu9fkij] .hxs-menu-danger { color: var(--hxa-err) !important; }

[b-sfyxu9fkij] .hxs-menu-away {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: transparent;
}

/* ── drawer + dialog ────────────────────────────────────────────────────── */

[b-sfyxu9fkij] .hxs-scrim {
    position: absolute;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.32);
}

[b-sfyxu9fkij] .hxs-drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 41;
    width: min(400px, 96%);
    display: flex;
    flex-direction: column;
    background: var(--hxa-card);
    border-left: 1px solid var(--hxa-line);
    box-shadow: -10px 0 28px rgba(0, 0, 0, 0.18);
    animation: hxs-slide-in-b-sfyxu9fkij 0.2s ease-out 1;
    will-change: transform;
    contain: layout paint;
}

@keyframes hxs-slide-in-b-sfyxu9fkij {
    from { transform: translateX(24px); opacity: 0.6; }
    to { transform: translateX(0); opacity: 1; }
}

[b-sfyxu9fkij] .hxs-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--hxa-line);
}

[b-sfyxu9fkij] .hxs-drawer-head h4 {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
}

[b-sfyxu9fkij] .hxs-drawer-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 14px;
}

[b-sfyxu9fkij] .hxs-drawer-foot {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    border-top: 1px solid var(--hxa-line);
}

[b-sfyxu9fkij] .hxs-drawer-footnote {
    margin: 10px 0 0;
    color: var(--hxa-faint);
    font-size: 0.625rem;
}

[b-sfyxu9fkij] .hxs-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 41;
    width: min(400px, 92%);
    border: 1px solid var(--hxa-line);
    border-radius: 8px;
    background: var(--hxa-card);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.24);
}

[b-sfyxu9fkij] .hxs-dialog-body {
    padding: 12px 14px;
    font-size: 0.71875rem;
}

[b-sfyxu9fkij] .hxs-dialog-body p { margin: 0 0 8px; }

[b-sfyxu9fkij] .hxs-dialog-note { color: var(--hxa-faint); font-size: 0.65625rem; }

/* ── tabs + description lists + audit ───────────────────────────────────── */

[b-sfyxu9fkij] .hxs-tabs {
    display: flex;
    /* P2d-a: the enriched employee detail carries 9 tabs - wrap in the 420px drawer. */
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 1px solid var(--hxa-line);
    margin-bottom: 10px;
}

/* P2d-a detail-component leaf styles */
[b-sfyxu9fkij] .hxs-drawer-subhead {
    margin: 12px 0 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--hxa-soft);
}

[b-sfyxu9fkij] .hxs-forecast-bars {
    display: block;
    margin: 4px 0 10px;
}

[b-sfyxu9fkij] .hxs-tab {
    border: 0;
    background: transparent;
    color: var(--hxa-soft);
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 6px 10px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

[b-sfyxu9fkij] .hxs-tab-active {
    color: var(--hxa-ink);
    border-bottom-color: var(--hxa-accent);
}

[b-sfyxu9fkij] .hxs-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 14px;
    margin: 0;
    font-size: 0.71875rem;
}

[b-sfyxu9fkij] .hxs-dl dt { color: var(--hxa-faint); }

[b-sfyxu9fkij] .hxs-dl dd { margin: 0; font-weight: 500; }

[b-sfyxu9fkij] .hxs-audit {
    margin: 0;
    padding-left: 16px;
    display: grid;
    gap: 8px;
    font-size: 0.6875rem;
}

[b-sfyxu9fkij] .hxs-audit-head { color: var(--hxa-soft); }

[b-sfyxu9fkij] .hxs-audit-changes {
    margin: 3px 0 0;
    padding-left: 14px;
    color: var(--hxa-ink);
}

[b-sfyxu9fkij] .hxs-audit-changes s { color: var(--hxa-faint); }

[b-sfyxu9fkij] .hxs-empty-note { color: var(--hxa-faint); font-size: 0.6875rem; margin: 0; }

/* ── form ───────────────────────────────────────────────────────────────── */

[b-sfyxu9fkij] .hxs-form { display: grid; gap: 12px; }

[b-sfyxu9fkij] .hxs-field { display: grid; gap: 4px; }

[b-sfyxu9fkij] .hxs-label {
    font-size: 0.65625rem;
    font-weight: 600;
    color: var(--hxa-soft);
}

[b-sfyxu9fkij] .hxs-req { color: darkred; }

[b-sfyxu9fkij] .hxs-input {
    width: 100%;
    max-width: 340px;
    border: 1px solid var(--hxa-line);
    border-bottom-color: var(--hxa-soft);
    border-radius: 4px;
    background: var(--hxa-bg);
    color: var(--hxa-ink);
    font: inherit;
    font-size: 0.71875rem;
    padding: 6px 8px;
    outline: none;
}

[b-sfyxu9fkij] .hxs-input:focus {
    border-bottom: 2px solid var(--hxa-accent);
    padding-bottom: 5px;
}

[b-sfyxu9fkij] .hxs-textarea { resize: vertical; }

[b-sfyxu9fkij] .hxs-input-invalid { border-color: var(--hxa-err); border-bottom-color: var(--hxa-err); }

[b-sfyxu9fkij] .hxs-error {
    color: var(--hxa-err);
    font-size: 0.625rem;
}

[b-sfyxu9fkij] .hxs-help {
    color: var(--hxa-faint);
    font-size: 0.625rem;
}

[b-sfyxu9fkij] .hxs-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: var(--hxa-ink);
    font: inherit;
    font-size: 0.6875rem;
    cursor: pointer;
    padding: 0;
    width: fit-content;
}

[b-sfyxu9fkij] .hxs-switch::before {
    content: "";
    display: inline-block;
    width: 34px;
    height: 18px;
    border-radius: 999px;
    background: var(--hxa-line);
    transition: background 0.12s ease;
}

[b-sfyxu9fkij] .hxs-switch .hxs-switch-knob {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--hxa-card);
    margin-left: 3px;
    transition: transform 0.12s ease;
}

[b-sfyxu9fkij] .hxs-switch { position: relative; }

[b-sfyxu9fkij] .hxs-switch[aria-checked="true"]::before { background: var(--hxa-accent); }

[b-sfyxu9fkij] .hxs-switch[aria-checked="true"] .hxs-switch-knob { transform: translateX(16px); }

/* ── toasts ─────────────────────────────────────────────────────────────── */

[b-sfyxu9fkij] .hxs-toasts {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 60;
    display: grid;
    gap: 6px;
    justify-items: end;
}

[b-sfyxu9fkij] .hxs-toast {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 340px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--hxa-toast-bg);
    color: #fff;
    font-size: 0.6875rem;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    border-left: 3px solid var(--hxa-accent);
}

[b-sfyxu9fkij] .hxs-toast-warn { border-left-color: var(--hxa-warn); }
[b-sfyxu9fkij] .hxs-toast-err { border-left-color: var(--hxa-err); }
[b-sfyxu9fkij] .hxs-toast-info { border-left-color: var(--hxa-info); }

[b-sfyxu9fkij] .hxs-toast-text { display: grid; }

[b-sfyxu9fkij] .hxs-toast-text small { opacity: 0.75; }

[b-sfyxu9fkij] .hxs-toast-action {
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 0.65625rem;
    font-weight: 700;
    padding: 3px 8px;
    cursor: pointer;
}

[b-sfyxu9fkij] .hxs-toast-action:hover { background: rgba(255, 255, 255, 0.12); }

[b-sfyxu9fkij] .hxs-toast-close { color: rgba(255, 255, 255, 0.7); }

[b-sfyxu9fkij] .hxs-toast-close:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }

/* ── KPI tile (library skeleton - HxsKpiTile) ───────────────────────────── */

[b-sfyxu9fkij] .hxs-kpi {
    position: relative;
    display: block;
    border: 1px solid var(--hxa-line);
    border-radius: 6px;
    background: var(--hxa-card);
    padding: 10px 12px 10px 14px;
    overflow: hidden;
}

[b-sfyxu9fkij] .hxs-kpi-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--hxa-accent);
}

[b-sfyxu9fkij] .hxs-kpi-healthy .hxs-kpi-accent { background: var(--hxa-ok); }
[b-sfyxu9fkij] .hxs-kpi-warning .hxs-kpi-accent { background: var(--hxa-warn); }
[b-sfyxu9fkij] .hxs-kpi-critical .hxs-kpi-accent { background: var(--hxa-err); animation: hxs-kpi-pulse-b-sfyxu9fkij 1.5s ease-in-out infinite; }

@keyframes hxs-kpi-pulse-b-sfyxu9fkij {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

[b-sfyxu9fkij] .hxs-kpi-clickable { cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; }

[b-sfyxu9fkij] .hxs-kpi-clickable:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); }

[b-sfyxu9fkij] .hxs-kpi-body { display: flex; align-items: center; gap: 10px; }

[b-sfyxu9fkij] .hxs-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: var(--hxa-accent-tint);
    color: var(--hxa-accent);
}

[b-sfyxu9fkij] .hxs-kpi-text { display: grid; }

[b-sfyxu9fkij] .hxs-kpi-value { font-size: 1.125rem; font-weight: 700; }

[b-sfyxu9fkij] .hxs-kpi-critical .hxs-kpi-value { color: var(--hxa-err); }

[b-sfyxu9fkij] .hxs-kpi-badge {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 999px;
    background: var(--hxa-accent-soft);
    color: var(--hxa-accent-strong);
    vertical-align: middle;
}

[b-sfyxu9fkij] .hxs-kpi-label { font-size: 0.65625rem; font-weight: 600; color: var(--hxa-soft); }

[b-sfyxu9fkij] .hxs-kpi-sub { font-size: 0.59375rem; color: var(--hxa-faint); }

/* ── skeletons ──────────────────────────────────────────────────────────── */

[b-sfyxu9fkij] .hxs-skel {
    display: inline-block;
    width: 70%;
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--hxa-line-soft) 25%, var(--hxa-line) 50%, var(--hxa-line-soft) 75%);
    background-size: 200% 100%;
    animation: hxs-shimmer-b-sfyxu9fkij 1.4s linear infinite;
}

[b-sfyxu9fkij] .hxs-skel-circle { width: 34px; height: 34px; border-radius: 50%; }

@keyframes hxs-shimmer-b-sfyxu9fkij {
    from { background-position: 120% 0; }
    to { background-position: -120% 0; }
}

/* ── utility ────────────────────────────────────────────────────────────── */

[b-sfyxu9fkij] .hxs-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── responsive + media prefs ───────────────────────────────────────────── */

@media (max-width: 720px) {
    [b-sfyxu9fkij] .hxs-drawer { width: 100%; border-left: 0; }
    [b-sfyxu9fkij] .hxs-search input { width: 110px; }
}

@media (prefers-reduced-motion: reduce) {
    [b-sfyxu9fkij] .hxs-drawer,
    [b-sfyxu9fkij] .hxs-row-flash td,
    [b-sfyxu9fkij] .hxs-skel,
    [b-sfyxu9fkij] .hxs-kpi-critical .hxs-kpi-accent {
        animation: none;
    }

    [b-sfyxu9fkij] .hxs-kpi-clickable,
    [b-sfyxu9fkij] .hxs-sort-caret,
    [b-sfyxu9fkij] .hxs-switch::before,
    [b-sfyxu9fkij] .hxs-switch .hxs-switch-knob {
        transition: none;
    }
}

@media (forced-colors: active) {
    [b-sfyxu9fkij] .hxs-btn,
    [b-sfyxu9fkij] .hxs-input,
    [b-sfyxu9fkij] .hxs-chip,
    [b-sfyxu9fkij] .hxs-tab-active,
    [b-sfyxu9fkij] .hxs-switch::before {
        border: 1px solid ButtonText;
    }
}

/* ── P1b/P1c additions: checklist (Multi fields), permission tree, full-page
      form variant, drawer link lists, link-style button ─────────────────── */

[b-sfyxu9fkij] .hxs-checklist {
    display: grid;
    gap: 8px;
    padding: 4px 0;
}

[b-sfyxu9fkij] .hxs-check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    font-size: 0.71875rem;
    color: var(--hxa-ink);
    cursor: pointer;
}

[b-sfyxu9fkij] .hxs-check input {
    /* WCAG 2.2 target-size: 18px box + 24px row height + 8px list gap keeps
       undersized-target spacing >= 24px center-to-center (axe target-size). */
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    accent-color: var(--hxa-accent);
    cursor: pointer;
}

[b-sfyxu9fkij] .hxs-check input:focus-visible {
    outline: 2px solid var(--hxa-accent);
    outline-offset: 2px;
}

[b-sfyxu9fkij] .hxs-permtree {
    display: grid;
    gap: 10px;
}

[b-sfyxu9fkij] .hxs-permgroup {
    border: 1px solid var(--hxa-line);
    border-radius: 4px;
    padding: 8px 10px 10px;
    display: grid;
    gap: 8px;
    margin: 0;
}

[b-sfyxu9fkij] .hxs-permgroup legend {
    font-size: 0.65625rem;
    font-weight: 700;
    color: var(--hxa-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 4px;
}

[b-sfyxu9fkij] .hxs-permcode {
    font-family: Consolas, monospace;
    font-size: 0.625rem;
    color: var(--hxa-faint);
    background: var(--hxa-panel-2, rgba(128, 128, 128, 0.1));
    border-radius: 3px;
    padding: 0 4px;
    margin-left: 4px;
}

[b-sfyxu9fkij] .hxs-fullform {
    border: 1px solid var(--hxa-line);
    border-radius: 6px;
    background: var(--hxa-panel);
    padding: 14px 16px 16px;
    max-width: 560px;
}

[b-sfyxu9fkij] .hxs-fullform-title {
    margin: 0 0 10px;
    font-size: 0.84375rem;
    font-weight: 700;
    color: var(--hxa-ink);
}

[b-sfyxu9fkij] .hxs-fullform .hxs-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
}

[b-sfyxu9fkij] .hxs-fullform-foot {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

[b-sfyxu9fkij] .hxs-linklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

[b-sfyxu9fkij] .hxs-linklist li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 6px;
    border-bottom: 1px solid var(--hxa-line);
    font-size: 0.71875rem;
    color: var(--hxa-ink);
}

[b-sfyxu9fkij] .hxs-linklist li small {
    color: var(--hxa-faint);
    font-size: 0.625rem;
    white-space: nowrap;
}

[b-sfyxu9fkij] .hxs-btn-link {
    border-color: transparent;
    background: transparent;
    color: var(--hxa-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 720px) {
    [b-sfyxu9fkij] .hxs-fullform .hxs-form { grid-template-columns: 1fr; }
}

@media (forced-colors: active) {
    [b-sfyxu9fkij] .hxs-permgroup,
    [b-sfyxu9fkij] .hxs-fullform {
        border: 1px solid ButtonText;
    }
}

/* ── P2a additions: wizard steps, data-flow map, mini tables (mapping/sync/
      diff), certification lifecycle, rule simulator, in-cell switch ──────── */

[b-sfyxu9fkij] .hxs-wiz-steps {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
}

[b-sfyxu9fkij] .hxs-wiz-steps li {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.625rem;
    color: var(--hxa-faint);
}

[b-sfyxu9fkij] .hxs-wiz-steps .hxs-wiz-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--hxa-line);
    display: grid;
    place-items: center;
    font-size: 0.5625rem;
    font-weight: 700;
}

[b-sfyxu9fkij] .hxs-wiz-steps .hxs-wiz-current { color: var(--hxa-ink); font-weight: 600; }

[b-sfyxu9fkij] .hxs-wiz-steps .hxs-wiz-current .hxs-wiz-dot {
    background: var(--hxa-accent);
    border-color: var(--hxa-accent);
    color: var(--hxa-on-accent);
}

[b-sfyxu9fkij] .hxs-wiz-steps .hxs-wiz-done { color: var(--hxa-soft); }

[b-sfyxu9fkij] .hxs-wiz-steps .hxs-wiz-done .hxs-wiz-dot { border-color: var(--hxa-accent); color: var(--hxa-accent); }

[b-sfyxu9fkij] .hxs-wiz-body { display: grid; gap: 10px; }

[b-sfyxu9fkij] .hxs-wiz-test { min-height: 24px; margin: 8px 0 0; }

[b-sfyxu9fkij] .hxs-mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.6875rem;
    margin: 4px 0 8px;
}

[b-sfyxu9fkij] .hxs-mini-table th {
    text-align: left;
    font-size: 0.59375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hxa-soft);
    border-bottom: 1px solid var(--hxa-line);
    padding: 4px 6px;
}

[b-sfyxu9fkij] .hxs-mini-table td {
    padding: 5px 6px;
    border-bottom: 1px solid var(--hxa-line);
    color: var(--hxa-ink);
    vertical-align: top;
}

[b-sfyxu9fkij] .hxs-diff .hxs-diff-a { color: var(--hxa-ok, #0e700e); font-weight: 600; }

[b-sfyxu9fkij] .hxs-diff .hxs-diff-b { color: var(--hxa-warn, #9a6700); font-weight: 600; }

[b-sfyxu9fkij] .hxs-conn-circuit {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 0.6875rem;
    color: var(--hxa-ink);
}

[b-sfyxu9fkij] .hxs-conn-circuit small { color: var(--hxa-faint); }

[b-sfyxu9fkij] .hxs-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 14px;
    align-items: start;
}

[b-sfyxu9fkij] .hxs-flow-col { display: grid; gap: 6px; align-content: start; }

[b-sfyxu9fkij] .hxs-flow-col h4 {
    margin: 0 0 2px;
    font-size: 0.65625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hxa-soft);
}

[b-sfyxu9fkij] .hxs-flow-node {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: baseline;
    gap: 6px;
    text-align: left;
    padding: 8px 10px;
    border: 1px solid var(--hxa-line);
    border-radius: 5px;
    background: var(--hxa-panel);
    color: var(--hxa-ink);
    font: inherit;
    font-size: 0.6875rem;
    cursor: pointer;
}

[b-sfyxu9fkij] .hxs-flow-node:hover { border-color: var(--hxa-accent); }

[b-sfyxu9fkij] .hxs-flow-node:focus-visible { outline: 2px solid var(--hxa-accent); outline-offset: 2px; }

[b-sfyxu9fkij] .hxs-flow-name { font-weight: 700; }

[b-sfyxu9fkij] .hxs-flow-arrow { color: var(--hxa-accent); font-weight: 700; }

[b-sfyxu9fkij] .hxs-flow-entities { color: var(--hxa-faint); }

[b-sfyxu9fkij] .hxs-flow-hub { align-self: center; }

[b-sfyxu9fkij] .hxs-flow-hexavera {
    display: grid;
    gap: 4px;
    place-items: center;
    text-align: center;
    padding: 18px 16px;
    border: 2px solid var(--hxa-accent);
    border-radius: 8px;
    background: var(--hxa-panel);
    color: var(--hxa-ink);
    max-width: 200px;
    font-size: 0.65625rem;
}

[b-sfyxu9fkij] .hxs-flow-hexavera strong { font-size: 0.8125rem; }

[b-sfyxu9fkij] .hxs-lifecycle {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
    font-size: 0.6875rem;
    color: var(--hxa-ink);
}

[b-sfyxu9fkij] .hxs-lifecycle li { display: flex; align-items: center; gap: 8px; }

[b-sfyxu9fkij] .hxs-sdk { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; align-items: start; }

[b-sfyxu9fkij] .hxs-sim { display: grid; gap: 14px; grid-template-columns: minmax(240px, 360px) 1fr; align-items: start; }

[b-sfyxu9fkij] .hxs-sim-form { display: grid; gap: 10px; }

[b-sfyxu9fkij] .hxs-sim-trace {
    border: 1px solid var(--hxa-line);
    border-radius: 6px;
    background: var(--hxa-panel);
    padding: 12px 14px;
}

[b-sfyxu9fkij] .hxs-sim-trace h4 { margin: 0 0 8px; font-size: 0.75rem; color: var(--hxa-ink); }

[b-sfyxu9fkij] .hxs-sim-outcome { margin: 8px 0 0; }

[b-sfyxu9fkij] .hxs-switch-cell { margin: 0 auto; }

@media (max-width: 720px) {
    [b-sfyxu9fkij] .hxs-flow { grid-template-columns: 1fr; }
    [b-sfyxu9fkij] .hxs-flow-hexavera { max-width: none; }
    [b-sfyxu9fkij] .hxs-sdk,
    [b-sfyxu9fkij] .hxs-sim { grid-template-columns: 1fr; }
}

@media (forced-colors: active) {
    [b-sfyxu9fkij] .hxs-flow-node,
    [b-sfyxu9fkij] .hxs-flow-hexavera,
    [b-sfyxu9fkij] .hxs-sim-trace,
    [b-sfyxu9fkij] .hxs-wiz-steps .hxs-wiz-dot {
        border: 1px solid ButtonText;
    }
}

/* ── P2b additions: card catalog (connectors/analytics), reports studio,
      workflows builder + inbox + canvas + run monitor, scenario builder ──── */

[b-sfyxu9fkij] .hxs-pulsed { animation: hxs-pulse-b-sfyxu9fkij 0.9s ease-out 1; }

@keyframes hxs-pulse-b-sfyxu9fkij {
    0% { box-shadow: 0 0 0 0 var(--hxa-accent-soft, rgba(0, 123, 49, 0.4)); }
    100% { box-shadow: 0 0 0 12px rgba(0, 123, 49, 0); }
}

[b-sfyxu9fkij] .hxs-cat { display: grid; gap: 12px; }

[b-sfyxu9fkij] .hxs-cat-toolbar { flex-wrap: wrap; }

[b-sfyxu9fkij] .hxs-cat-filters { display: flex; flex-wrap: wrap; gap: 6px; }

[b-sfyxu9fkij] .hxs-filter-chip {
    border: 1px solid var(--hxa-line);
    border-radius: 999px;
    background: var(--hxa-panel);
    color: var(--hxa-soft);
    font: inherit;
    font-size: 0.65625rem;
    font-weight: 600;
    padding: 4px 10px;
    cursor: pointer;
}

[b-sfyxu9fkij] .hxs-filter-chip:hover { border-color: var(--hxa-accent); color: var(--hxa-ink); }

[b-sfyxu9fkij] .hxs-filter-chip:focus-visible { outline: 2px solid var(--hxa-accent); outline-offset: 2px; }

[b-sfyxu9fkij] .hxs-filter-chip[aria-pressed="true"] {
    background: var(--hxa-accent);
    border-color: var(--hxa-accent);
    color: var(--hxa-on-accent);
}

[b-sfyxu9fkij] .hxs-cat-sec { display: grid; gap: 8px; }

[b-sfyxu9fkij] .hxs-cat-sec-head,
[b-sfyxu9fkij] .hxs-sec-head {
    margin: 0;
    font-size: 0.71875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hxa-soft);
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-sfyxu9fkij] .hxs-cat-count {
    font-size: 0.59375rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--hxa-line-soft);
    color: var(--hxa-soft);
}

[b-sfyxu9fkij] .hxs-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 8px;
}

[b-sfyxu9fkij] .hxs-conn-card2 {
    border: 1px solid var(--hxa-line);
    border-radius: 6px;
    background: var(--hxa-card);
    padding: 9px 11px;
    display: grid;
    gap: 5px;
    align-content: start;
}

[b-sfyxu9fkij] .hxs-conn-card2-head { display: flex; align-items: center; gap: 7px; }

[b-sfyxu9fkij] .hxs-conn-card2-meta { font-size: 0.625rem; color: var(--hxa-faint); }

[b-sfyxu9fkij] .hxs-conn-dir { color: var(--hxa-soft); font-weight: 600; margin-right: 4px; }

[b-sfyxu9fkij] .hxs-conn-card2-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.625rem;
    color: var(--hxa-soft);
    border-top: 1px solid var(--hxa-line);
    padding-top: 6px;
}

[b-sfyxu9fkij] .hxs-dot-info { background: var(--hxa-info); }
[b-sfyxu9fkij] .hxs-dot-err { background: var(--hxa-err); }

[b-sfyxu9fkij] .hxs-progress {
    height: 4px;
    border-radius: 2px;
    background: var(--hxa-line-soft);
    overflow: hidden;
}

[b-sfyxu9fkij] .hxs-progress-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--hxa-accent);
    animation: hxs-progress-b-sfyxu9fkij 1.5s ease-out forwards;
}

@keyframes hxs-progress-b-sfyxu9fkij {
    to { width: 100%; }
}

[b-sfyxu9fkij] .hxs-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }

[b-sfyxu9fkij] .hxs-tag {
    font-size: 0.5625rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--hxa-line-soft);
    color: var(--hxa-soft);
}

[b-sfyxu9fkij] .hxs-dchip { background: var(--hxa-accent-tint, rgba(0, 123, 49, 0.1)); color: var(--hxa-accent-strong, var(--hxa-accent)); }

/* reports studio */

[b-sfyxu9fkij] .hxs-studio-tabs { margin-bottom: 12px; }

[b-sfyxu9fkij] .hxs-studio {
    display: grid;
    grid-template-columns: minmax(190px, 230px) minmax(0, 1fr) minmax(200px, 250px);
    gap: 12px;
    align-items: start;
}

[b-sfyxu9fkij] .hxs-studio-col { display: grid; gap: 12px; align-content: start; min-width: 0; }

[b-sfyxu9fkij] .hxs-studio-panel {
    border: 1px solid var(--hxa-line);
    border-radius: 6px;
    background: var(--hxa-panel);
    padding: 10px 12px 12px;
    display: grid;
    gap: 8px;
    align-content: start;
}

[b-sfyxu9fkij] .hxs-studio-head {
    margin: 0;
    font-size: 0.65625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hxa-soft);
}

[b-sfyxu9fkij] .hxs-studio-sub { font-size: 0.59375rem; font-weight: 700; color: var(--hxa-faint); text-transform: uppercase; }

[b-sfyxu9fkij] .hxs-studio-list { display: grid; gap: 4px; }

[b-sfyxu9fkij] .hxs-studio-item {
    display: grid;
    gap: 1px;
    text-align: left;
    border: 1px solid var(--hxa-line);
    border-radius: 4px;
    background: var(--hxa-card);
    color: var(--hxa-ink);
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 6px 9px;
    cursor: pointer;
}

[b-sfyxu9fkij] .hxs-studio-item small { font-weight: 400; color: var(--hxa-faint); font-size: 0.59375rem; }

[b-sfyxu9fkij] .hxs-studio-item:hover { border-color: var(--hxa-accent); }

[b-sfyxu9fkij] .hxs-studio-item:focus-visible { outline: 2px solid var(--hxa-accent); outline-offset: 2px; }

[b-sfyxu9fkij] .hxs-studio-item[aria-pressed="true"] { border-color: var(--hxa-accent); box-shadow: inset 3px 0 0 var(--hxa-accent); }

[b-sfyxu9fkij] .hxs-studio-note { margin: 0; font-size: 0.59375rem; color: var(--hxa-faint); }

[b-sfyxu9fkij] .hxs-canvas { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }

[b-sfyxu9fkij] .hxs-canvas-row {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--hxa-line);
    border-radius: 4px;
    background: var(--hxa-card);
    padding: 5px 8px;
    font-size: 0.6875rem;
    color: var(--hxa-ink);
}

[b-sfyxu9fkij] .hxs-canvas-grip { color: var(--hxa-faint); letter-spacing: -2px; cursor: grab; }

[b-sfyxu9fkij] .hxs-canvas-name { font-weight: 600; flex: 1; }

[b-sfyxu9fkij] .hxs-canvas-kind { font-size: 0.5625rem; color: var(--hxa-faint); text-transform: uppercase; }

[b-sfyxu9fkij] .hxs-canvas-btns { display: inline-flex; gap: 2px; }

[b-sfyxu9fkij] .hxs-row-moved { animation: hxs-flash-b-sfyxu9fkij 1.6s ease-out 1; }

[b-sfyxu9fkij] .hxs-studio-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 0.6875rem;
    color: var(--hxa-ink);
    border: 1px solid var(--hxa-line);
    border-radius: 4px;
    padding: 4px 8px;
}

[b-sfyxu9fkij] .hxs-studio-addfilter { display: grid; gap: 6px; }

[b-sfyxu9fkij] .hxs-studio-validation {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 5px;
    font-size: 0.65625rem;
}

[b-sfyxu9fkij] .hxs-valid-ok { color: var(--hxa-ok); }
[b-sfyxu9fkij] .hxs-valid-ok::before { content: "\2713\20"; font-weight: 700; }
[b-sfyxu9fkij] .hxs-valid-err { color: var(--hxa-err); }
[b-sfyxu9fkij] .hxs-valid-err::before { content: "\2715\20"; font-weight: 700; }

[b-sfyxu9fkij] .hxs-studio-schedule { margin: 0; font-size: 0.6875rem; color: var(--hxa-ink); }

[b-sfyxu9fkij] .hxs-studio-actions { display: flex; justify-content: flex-end; }

[b-sfyxu9fkij] .hxs-preview-table th { white-space: nowrap; }

[b-sfyxu9fkij] .hxs-rep-layout {
    display: grid;
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

[b-sfyxu9fkij] .hxs-rep-rail { display: grid; gap: 3px; align-content: start; }

[b-sfyxu9fkij] .hxs-rep-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--hxa-soft);
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 5px 9px;
    cursor: pointer;
}

[b-sfyxu9fkij] .hxs-rep-cat:hover { background: var(--hxa-hover); color: var(--hxa-ink); }

[b-sfyxu9fkij] .hxs-rep-cat:focus-visible { outline: 2px solid var(--hxa-accent); outline-offset: 2px; }

[b-sfyxu9fkij] .hxs-rep-cat[aria-pressed="true"] {
    background: var(--hxa-accent-tint, rgba(0, 123, 49, 0.1));
    border-color: var(--hxa-accent);
    color: var(--hxa-ink);
}

[b-sfyxu9fkij] .hxs-rep-cat-count { font-size: 0.59375rem; color: var(--hxa-faint); }

[b-sfyxu9fkij] .hxs-rep-main { display: grid; gap: 8px; min-width: 0; }

[b-sfyxu9fkij] .hxs-rep-more { margin: 0; font-size: 0.625rem; color: var(--hxa-faint); }

[b-sfyxu9fkij] .hxs-cell-btns { display: inline-flex; gap: 5px; }

[b-sfyxu9fkij] .hxs-rulelist {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: grid;
    gap: 4px;
    font-size: 0.6875rem;
}

[b-sfyxu9fkij] .hxs-rulelist li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid var(--hxa-line);
    padding: 4px 2px;
    color: var(--hxa-ink);
}

[b-sfyxu9fkij] .hxs-rulelist small { color: var(--hxa-faint); }

/* workflows builder */

[b-sfyxu9fkij] .hxs-wf-inbox { margin-bottom: 14px; display: grid; gap: 8px; }

[b-sfyxu9fkij] .hxs-inbox-list { display: grid; gap: 6px; }

[b-sfyxu9fkij] .hxs-inbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--hxa-line);
    border-radius: 6px;
    background: var(--hxa-card);
    padding: 8px 12px;
}

[b-sfyxu9fkij] .hxs-inbox-text { display: grid; gap: 1px; flex: 1; font-size: 0.6875rem; color: var(--hxa-ink); }

[b-sfyxu9fkij] .hxs-inbox-text small { color: var(--hxa-faint); font-size: 0.625rem; }

[b-sfyxu9fkij] .hxs-inbox-meta { font-weight: 600; }

[b-sfyxu9fkij] .hxs-steps { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 5px; }

[b-sfyxu9fkij] .hxs-step-row {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--hxa-line);
    border-radius: 4px;
    background: var(--hxa-card);
    padding: 6px 8px;
    font-size: 0.6875rem;
}

[b-sfyxu9fkij] .hxs-step-text { display: grid; gap: 1px; flex: 1; color: var(--hxa-ink); }

[b-sfyxu9fkij] .hxs-step-text small { color: var(--hxa-faint); font-size: 0.59375rem; }

[b-sfyxu9fkij] .hxs-step-add { display: grid; gap: 8px; margin-bottom: 8px; }

[b-sfyxu9fkij] .hxs-step-add-row { display: flex; gap: 6px; }

[b-sfyxu9fkij] .hxs-step-add-row .hxs-input { min-width: 0; }

[b-sfyxu9fkij] .hxs-step-channels { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }

[b-sfyxu9fkij] .hxs-step-kindrow { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }

[b-sfyxu9fkij] .hxs-wf-templates {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

[b-sfyxu9fkij] .hxs-wf-tpl {
    border: 1px solid var(--hxa-line);
    border-radius: 6px;
    background: var(--hxa-card);
    padding: 10px 12px;
    display: grid;
    gap: 5px;
    align-content: start;
    font-size: 0.6875rem;
    color: var(--hxa-ink);
}

[b-sfyxu9fkij] .hxs-wf-tpl p { margin: 0; color: var(--hxa-soft); }

[b-sfyxu9fkij] .hxs-wf-tpl small { color: var(--hxa-faint); font-size: 0.59375rem; }

[b-sfyxu9fkij] .hxs-wf-tpl .hxs-btn { justify-self: start; }

[b-sfyxu9fkij] .hxs-wf-canvas-panel {
    border: 1px solid var(--hxa-line);
    border-radius: 6px;
    background: var(--hxa-panel);
    padding: 12px 14px;
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

[b-sfyxu9fkij] .hxs-wf-canvas-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

[b-sfyxu9fkij] .hxs-wf-canvas { display: grid; gap: 10px; overflow-x: auto; padding: 4px 2px; }

[b-sfyxu9fkij] .hxs-wf-chain { display: flex; align-items: stretch; gap: 6px; }

[b-sfyxu9fkij] .hxs-wf-node {
    display: grid;
    gap: 3px;
    align-content: start;
    text-align: left;
    min-width: 128px;
    border: 1px solid var(--hxa-line);
    border-radius: 6px;
    background: var(--hxa-card);
    color: var(--hxa-ink);
    font: inherit;
    font-size: 0.625rem;
    padding: 7px 9px;
    cursor: pointer;
}

[b-sfyxu9fkij] .hxs-wf-node:hover { border-color: var(--hxa-accent); }

[b-sfyxu9fkij] .hxs-wf-node:focus-visible { outline: 2px solid var(--hxa-accent); outline-offset: 2px; }

[b-sfyxu9fkij] .hxs-wf-node strong { font-size: 0.65625rem; }

[b-sfyxu9fkij] .hxs-wf-node small { color: var(--hxa-faint); }

[b-sfyxu9fkij] .hxs-wf-node .hxs-chip { justify-self: start; }

[b-sfyxu9fkij] .hxs-wf-arrow { align-self: center; color: var(--hxa-accent); font-weight: 700; }

[b-sfyxu9fkij] .hxs-wf-branches { display: grid; gap: 6px; }

[b-sfyxu9fkij] .hxs-wf-branch-row { display: flex; align-items: center; gap: 6px; }

[b-sfyxu9fkij] .hxs-wfrun { display: grid; gap: 0; margin-bottom: 10px; }

[b-sfyxu9fkij] .hxs-wfrun-step {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 6px 2px;
    border-bottom: 1px solid var(--hxa-line);
    font-size: 0.6875rem;
}

[b-sfyxu9fkij] .hxs-wfrun-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 9px;
    align-self: center;
    background: var(--hxa-line);
}

[b-sfyxu9fkij] .hxs-wfrun-done .hxs-wfrun-dot { background: var(--hxa-ok); }

[b-sfyxu9fkij] .hxs-wfrun-active .hxs-wfrun-dot { background: var(--hxa-warn); }

[b-sfyxu9fkij] .hxs-wfrun-text { display: grid; gap: 1px; flex: 1; color: var(--hxa-ink); }

[b-sfyxu9fkij] .hxs-wfrun-text small { color: var(--hxa-faint); font-size: 0.59375rem; }

[b-sfyxu9fkij] .hxs-wfrun-pending .hxs-wfrun-text { color: var(--hxa-faint); }

[b-sfyxu9fkij] .hxs-wfrun-time { font-size: 0.625rem; color: var(--hxa-faint); font-variant-numeric: tabular-nums; }

/* scenario builder */

[b-sfyxu9fkij] .hxs-scn {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(210px, 260px);
    gap: 12px;
    align-items: start;
}

[b-sfyxu9fkij] .hxs-range {
    width: 100%;
    accent-color: var(--hxa-accent);
    cursor: pointer;
    min-height: 24px;
}

[b-sfyxu9fkij] .hxs-range:focus-visible { outline: 2px solid var(--hxa-accent); outline-offset: 2px; }

[b-sfyxu9fkij] .hxs-scn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }

[b-sfyxu9fkij] .hxs-scn-item {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--hxa-line);
    border-radius: 4px;
    background: var(--hxa-card);
    padding: 5px 8px;
    font-size: 0.6875rem;
}

[b-sfyxu9fkij] .hxs-scn-item-text { display: grid; gap: 1px; flex: 1; color: var(--hxa-ink); }

[b-sfyxu9fkij] .hxs-scn-item-text small { color: var(--hxa-faint); font-size: 0.59375rem; }

/* Gap chips must sit on the card background like every .hxs-tablewrap table -
   their rgba fills over the tinted panel background fail WCAG contrast in light. */
[b-sfyxu9fkij] .hxs-scn-chart .hxs-mini-table { background: var(--hxa-card); }

[b-sfyxu9fkij] .hxs-scn-svg { width: 100%; height: auto; }

[b-sfyxu9fkij] .hxs-scn-bar-req { fill: var(--hxa-line); }

[b-sfyxu9fkij] .hxs-scn-bar-ok { fill: var(--hxa-accent); }

[b-sfyxu9fkij] .hxs-scn-bar-gap { fill: var(--hxa-err); }

[b-sfyxu9fkij] .hxs-scn-day { fill: var(--hxa-soft); font-size: 10px; }

[b-sfyxu9fkij] .hxs-scn-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.625rem; color: var(--hxa-soft); }

[b-sfyxu9fkij] .hxs-scn-legend span { display: inline-flex; align-items: center; gap: 5px; }

[b-sfyxu9fkij] .hxs-scn-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

[b-sfyxu9fkij] .hxs-scn-swatch-req { background: var(--hxa-line); }

[b-sfyxu9fkij] .hxs-scn-swatch-ok { background: var(--hxa-accent); }

[b-sfyxu9fkij] .hxs-scn-swatch-gap { background: var(--hxa-err); }

[b-sfyxu9fkij] .hxs-scn-suggest-text { margin: 0; font-size: 0.6875rem; color: var(--hxa-ink); }

@media (max-width: 980px) {
    [b-sfyxu9fkij] .hxs-studio,
    [b-sfyxu9fkij] .hxs-scn { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    [b-sfyxu9fkij] .hxs-rep-layout { grid-template-columns: 1fr; }
    [b-sfyxu9fkij] .hxs-rep-rail { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); display: grid; }
    [b-sfyxu9fkij] .hxs-wf-chain { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    [b-sfyxu9fkij] .hxs-pulsed,
    [b-sfyxu9fkij] .hxs-row-moved,
    [b-sfyxu9fkij] .hxs-progress-fill {
        animation: none;
    }

    [b-sfyxu9fkij] .hxs-progress-fill { width: 100%; }
}

@media (forced-colors: active) {
    [b-sfyxu9fkij] .hxs-conn-card2,
    [b-sfyxu9fkij] .hxs-studio-panel,
    [b-sfyxu9fkij] .hxs-studio-item,
    [b-sfyxu9fkij] .hxs-canvas-row,
    [b-sfyxu9fkij] .hxs-inbox-item,
    [b-sfyxu9fkij] .hxs-step-row,
    [b-sfyxu9fkij] .hxs-wf-tpl,
    [b-sfyxu9fkij] .hxs-wf-node,
    [b-sfyxu9fkij] .hxs-wf-canvas-panel,
    [b-sfyxu9fkij] .hxs-scn-item,
    [b-sfyxu9fkij] .hxs-filter-chip,
    [b-sfyxu9fkij] .hxs-rep-cat[aria-pressed="true"],
    [b-sfyxu9fkij] .hxs-panel,
    [b-sfyxu9fkij] .hxs-override-card {
        border: 1px solid ButtonText;
    }
}

/* ── P3 Access - bespoke pages not built on HxsCrudPage ── */

[b-sfyxu9fkij] .hxs-panel {
    border: 1px solid var(--hxa-line);
    border-radius: 6px;
    /* --hxa-panel resolves empty in this scope (pre-existing gap elsewhere in
       the file too) - --hxa-card is confirmed defined and gives translucent
       severity chips (.hxs-chip-err) enough contrast headroom (axe-verified). */
    background: var(--hxa-card);
    padding: 12px 14px 14px;
    margin-top: 12px;
}

[b-sfyxu9fkij] .hxs-panel-head {
    margin: 0 0 8px;
}

[b-sfyxu9fkij] .hxs-panel-head h4 {
    margin: 0;
    font-size: 0.78125rem;
    font-weight: 700;
    color: var(--hxa-ink);
}

[b-sfyxu9fkij] .hxs-toolbar-extra {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

[b-sfyxu9fkij] .hxs-override-emergency {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--hxa-line);
    border-radius: 6px;
    background: var(--hxa-card);
    margin-bottom: 12px;
}

[b-sfyxu9fkij] .hxs-override-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

[b-sfyxu9fkij] .hxs-override-card {
    border: 1px solid var(--hxa-line);
    border-radius: 6px;
    background: var(--hxa-card);
    padding: 12px;
    display: grid;
    gap: 6px;
}

[b-sfyxu9fkij] .hxs-override-card h3 {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--hxa-ink);
}

[b-sfyxu9fkij] .hxs-override-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

[b-sfyxu9fkij] .hxs-override-result {
    margin: 4px 0 0;
    font-size: 0.65625rem;
    color: var(--hxa-faint);
}

[b-sfyxu9fkij] .hxs-inline-add {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

[b-sfyxu9fkij] .hxs-inline-add .hxs-input {
    max-width: 220px;
}

[b-sfyxu9fkij] .hxs-btn-sm {
    padding: 2px 8px;
    font-size: 0.625rem;
}

/* ── P2c-b hub reflection: D6 domain-data template + scenario-5 journey ── */

[b-sfyxu9fkij] .hxs-domain {
    display: grid;
    gap: 12px;
}

[b-sfyxu9fkij] .hxs-domain-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

[b-sfyxu9fkij] .hxs-journey {
    margin-top: 16px;
    border: 1px solid var(--hxa-line);
    border-radius: 6px;
    background: var(--hxa-card);
    padding: 12px;
}

[b-sfyxu9fkij] .hxs-journey-sub {
    margin: 4px 0 10px;
    font-size: 0.6875rem;
    color: var(--hxa-soft);
}

[b-sfyxu9fkij] .hxs-journey-hops {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

[b-sfyxu9fkij] .hxs-journey-hop {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--hxa-line);
    border-radius: 6px;
    /* --hxa-panel resolves empty in this scope (documented gap above) - card
       keeps ink/soft text at axe-verified contrast in light theme. */
    background: var(--hxa-card);
}

[b-sfyxu9fkij] .hxs-journey-active {
    border-color: var(--hxa-accent);
    box-shadow: inset 3px 0 0 var(--hxa-accent);
}

[b-sfyxu9fkij] .hxs-journey-idx {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--hxa-card);
    border: 1px solid var(--hxa-accent);
    color: var(--hxa-accent-strong, var(--hxa-accent));
    font-size: 0.625rem;
    font-weight: 700;
}

[b-sfyxu9fkij] .hxs-journey-body {
    display: grid;
    gap: 1px;
    flex: 1 1 auto;
    min-width: 0;
}

[b-sfyxu9fkij] .hxs-journey-body strong {
    font-size: 0.6875rem;
    color: var(--hxa-ink);
}

[b-sfyxu9fkij] .hxs-journey-body span {
    font-size: 0.65625rem;
    color: var(--hxa-soft);
}

@media (max-width: 760px) {
    [b-sfyxu9fkij] .hxs-journey-hop {
        flex-wrap: wrap;
    }
}

/* ── P5 Vera Vision management (media frames, filters, matrix, queue) ────── */
/* Media rules: every img/video below renders VisionMedia URLs only - the
   grayscale placeholder treatment keeps stock frames reading as industrial
   mono cameras until real URLs land in VisionMedia.Overrides. */

[b-sfyxu9fkij] .hxs-subtle { color: var(--hxa-soft); font-size: 0.65625rem; }

/* Card-backed container: the status-chip rgba fills are axe-verified against
   --hxa-card, NOT the page background - bare tables must sit on the card fill
   (light-mode chip-warn contrast finding, P5). */
[b-sfyxu9fkij] .hxs-scrollwrap {
    overflow-x: auto;
    background: var(--hxa-card);
    border: 1px solid var(--hxa-line);
    border-radius: 8px;
    padding: 2px 10px;
}
[b-sfyxu9fkij] .hxs-scrollwrap:focus-visible { outline: 2px solid var(--hxa-accent); outline-offset: 2px; }

[b-sfyxu9fkij] .hxs-vismedia {
    margin: 0 0 10px;
    position: relative;
    border: 1px solid var(--hxa-line);
    border-radius: 6px;
    overflow: hidden;
    background: #0a0d12;
}
[b-sfyxu9fkij] .hxs-vismedia img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
[b-sfyxu9fkij] .hxs-vismedia-live img { opacity: 0.92; }

[b-sfyxu9fkij] .hxs-media-note {
    margin: 0;
    padding: 3px 8px;
    font-size: 0.625rem;
    color: var(--hxa-faint);
    background: var(--hxa-card);
    border-top: 1px solid var(--hxa-line);
}
[b-sfyxu9fkij] p.hxs-media-note { border: 1px solid var(--hxa-line); border-radius: 4px; margin-top: 8px; }

[b-sfyxu9fkij] .hxs-visclip {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--hxa-line);
    border-radius: 6px;
    background: #0a0d12;
    margin-bottom: 10px;
}

[b-sfyxu9fkij] .hxs-bbox { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
[b-sfyxu9fkij] .hxs-bbox rect { fill: none; stroke: rgba(74, 222, 128, 0.85); stroke-width: 0.5; }
/* Overlay labels are HTML chips, not SVG <text> - preserveAspectRatio="none"
   distorts glyphs (HMI polish 2026-08-11, competitor convention: thin boxes +
   a small corner tag, minimal on-image text). */
[b-sfyxu9fkij] .hxs-bbox-label {
    position: absolute;
    transform: translateY(-100%);
    padding: 1px 6px;
    border-radius: 3px 3px 0 0;
    background: rgba(10, 13, 18, 0.82);
    color: #4ade80;
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: 10.5px;
    white-space: nowrap;
    pointer-events: none;
}

[b-sfyxu9fkij] .hxs-livegrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}
[b-sfyxu9fkij] .hxs-livecard {
    border: 1px solid var(--hxa-line);
    border-radius: 8px;
    background: var(--hxa-card);
    padding: 10px;
}
[b-sfyxu9fkij] .hxs-livecard-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 2px; }
[b-sfyxu9fkij] .hxs-livecard-head h4 { margin: 0; font-size: 0.75rem; }
[b-sfyxu9fkij] .hxs-livecard .hxs-vismedia { margin-bottom: 0; }

[b-sfyxu9fkij] .hxs-filterbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: flex-end;
    margin-bottom: 10px;
}
[b-sfyxu9fkij] .hxs-filter { display: flex; flex-direction: column; gap: 3px; font-size: 0.625rem; color: var(--hxa-soft); }
[b-sfyxu9fkij] .hxs-filter-grow { flex: 1 1 140px; }
[b-sfyxu9fkij] .hxs-filter select,
[b-sfyxu9fkij] .hxs-filter input {
    min-height: 26px;
    padding: 2px 6px;
    border: 1px solid var(--hxa-line);
    border-radius: 4px;
    background: var(--hxa-card);
    color: var(--hxa-ink);
    font-size: 0.6875rem;
}
[b-sfyxu9fkij] .hxs-filter select:focus-visible,
[b-sfyxu9fkij] .hxs-filter input:focus-visible { outline: 2px solid var(--hxa-accent); outline-offset: 1px; }

[b-sfyxu9fkij] .hxs-chipbtn {
    min-height: 26px;
    padding: 2px 10px;
    border: 1px solid var(--hxa-line);
    border-radius: 999px;
    background: var(--hxa-card);
    color: var(--hxa-ink);
    font-size: 0.65625rem;
    cursor: pointer;
}
[b-sfyxu9fkij] .hxs-chipbtn-on { background: var(--hxa-accent); border-color: var(--hxa-accent); color: var(--hxa-on-accent); }
[b-sfyxu9fkij] .hxs-chipbtn:focus-visible { outline: 2px solid var(--hxa-accent); outline-offset: 2px; }

[b-sfyxu9fkij] .hxs-matrix input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--hxa-accent); }
[b-sfyxu9fkij] .hxs-input-num { max-width: 90px; }

[b-sfyxu9fkij] .hxs-togglerow {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 0.6875rem;
    color: var(--hxa-ink);
    cursor: pointer;
    margin: 4px 0;
}
[b-sfyxu9fkij] .hxs-togglerow input { width: 18px; height: 18px; flex: none; accent-color: var(--hxa-accent); }

[b-sfyxu9fkij] .hxs-preflight { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
[b-sfyxu9fkij] .hxs-preflight li { display: flex; gap: 8px; align-items: center; font-size: 0.6875rem; color: var(--hxa-soft); }
[b-sfyxu9fkij] .hxs-preflight li.hxs-preflight-done { color: var(--hxa-ink); }

[b-sfyxu9fkij] .hxs-review-actions { white-space: nowrap; }
[b-sfyxu9fkij] .hxs-review-actions .hxs-btn { margin-right: 4px; }

[b-sfyxu9fkij] .hxs-minibars { display: flex; align-items: flex-end; gap: 6px; height: 64px; padding: 4px 2px 0; }
[b-sfyxu9fkij] .hxs-minibar {
    flex: 1 1 0;
    min-width: 10px;
    height: max(6%, var(--h, 10%));
    background: var(--hxa-accent);
    opacity: 0.75;
    border-radius: 3px 3px 0 0;
}
[b-sfyxu9fkij] .hxs-minibar:last-child { opacity: 1; }

[b-sfyxu9fkij] .hxs-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
[b-sfyxu9fkij] .hxs-thumbs img {
    width: 84px;
    height: 62px;
    object-fit: cover;
    border: 1px solid var(--hxa-line);
    border-radius: 4px;
    background: #0a0d12;
}
[b-sfyxu9fkij] .hxs-thumbs-lg img { width: 110px; height: 80px; }

[b-sfyxu9fkij] .hxs-batchrow { margin-bottom: 10px; font-size: 0.6875rem; }

[b-sfyxu9fkij] .hxs-healthgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}
[b-sfyxu9fkij] .hxs-panel-kill { margin-bottom: 4px; }

@media (max-width: 576px) {
    [b-sfyxu9fkij] .hxs-livegrid { grid-template-columns: 1fr; }
    [b-sfyxu9fkij] .hxs-filter { flex: 1 1 45%; }
}
/* /Components/Shared/VeraChatShowcase.razor.rz.scp.css */
/* Interactive mock of the full-page Vera chat workspace. */

/* :where() keeps the reset at zero specificity so class styles win */
.vcs-shell :where(button)[b-6s68o04udf] {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
}

.vcs-shell button:focus-visible[b-6s68o04udf] {
    outline: 2px solid #007b31;
    outline-offset: 2px;
}

@keyframes vcs-nudge-b-6s68o04udf {
    0% { transform: scale(1); }
    35% { transform: scale(1.16); }
    100% { transform: scale(1); }
}

.vcs-pulsed[b-6s68o04udf] {
    animation: vcs-nudge-b-6s68o04udf 0.35s ease;
}

.vcs-shell[b-6s68o04udf] {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    height: 620px;
    max-width: 1060px;
    margin: 0 auto;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 18px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% -10%, rgba(0, 123, 49, 0.07), transparent 30rem),
        #ffffff;
    box-shadow: 0 24px 60px -24px rgba(0, 45, 20, 0.18), 0 4px 16px -6px rgba(0, 45, 20, 0.08);
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.78);
    text-align: left;
}

/* History rail */

.vcs-rail[b-6s68o04udf] {
    display: flex;
    flex-direction: column;
    background: #f6f8f7;
    border-right: 1px solid rgba(0, 0, 0, 0.07);
    min-width: 0;
}

.vcs-rail-brand[b-6s68o04udf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    min-height: 52px;
}

.vcs-rail-brand img[b-6s68o04udf] { border-radius: 50%; }

.vcs-rail-brand-text[b-6s68o04udf] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1c221e;
}

.vcs-new-chat[b-6s68o04udf] { padding: 10px 10px 6px; }

.vcs-new-chat-btn[b-6s68o04udf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 34px;
    border: 1px solid rgba(0, 123, 49, 0.30);
    border-radius: 8px;
    background: #ffffff;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #005624;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.vcs-new-chat-btn:hover[b-6s68o04udf] {
    background: #f0fbf4;
    border-color: rgba(0, 123, 49, 0.45);
}

.vcs-history[b-6s68o04udf] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    gap: 2px;
}

.vcs-history-group[b-6s68o04udf] {
    font-size: 0.65625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #4f5b53;
    padding: 10px 8px 4px;
}

.vcs-history-item[b-6s68o04udf] {
    display: block;
    width: 100%;
    font-size: 0.78125rem;
    color: #333b35;
    padding: 7px 8px;
    border-radius: 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    transition: background 0.15s ease;
}

.vcs-history-item:hover[b-6s68o04udf] {
    background: #eaf0ec;
}

.vcs-history-active[b-6s68o04udf],
.vcs-history-active:hover[b-6s68o04udf] {
    background: #dcf4e6;
    color: #00461f;
    font-weight: 600;
}

.vcs-rail-footer[b-6s68o04udf] {
    display: flex;
    justify-content: flex-end;
    padding: 10px 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    color: #4f5b53;
}

/* Main column */

.vcs-main[b-6s68o04udf] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.vcs-topbar[b-6s68o04udf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 52px;
    min-height: 52px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    background: rgba(255, 255, 255, 0.85);
}

.vcs-topbar-session[b-6s68o04udf] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1c221e;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vcs-topbar-session svg[b-6s68o04udf] { color: #007b31; flex-shrink: 0; }

.vcs-mobile-history[b-6s68o04udf] {
    display: none;
    align-items: center;
    justify-content: center;
    color: #4f5b53;
    flex-shrink: 0;
}

.vcs-topbar-right[b-6s68o04udf] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.vcs-topbar-pill[b-6s68o04udf] {
    font-size: 0.71875rem;
    font-weight: 600;
    color: #005624;
    background: #f0fbf4;
    border: 1px solid #bce9d1;
    border-radius: 100px;
    padding: 3px 10px;
    white-space: nowrap;
}

.vcs-preview-label[b-6s68o04udf] {
    padding: 3px 8px;
    border: 1px solid #cbd8cf;
    border-radius: 100px;
    background: #edf4ef;
    color: #3d4940;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.vcs-topbar-icon[b-6s68o04udf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: #4f5b53;
    transition: background 0.15s ease, color 0.15s ease;
}

.vcs-topbar-icon:hover[b-6s68o04udf] {
    background: #eef3ef;
    color: #1c221e;
}

/* Messages */

.vcs-messages[b-6s68o04udf] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 26px clamp(18px, 7%, 64px) 18px;
}

.vcs-messages:focus-visible[b-6s68o04udf] {
    outline: 2px solid #007b31;
    outline-offset: -2px;
}

.vcs-msg-user[b-6s68o04udf] {
    align-self: flex-end;
    max-width: 80%;
    background: #f2f4f3;
    color: #1c221e;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 18px 18px 4px 18px;
    padding: 0.625rem 1rem;
    line-height: 1.55;
}

.vcs-msg-user p[b-6s68o04udf] { margin: 0; }

.vcs-msg-meta[b-6s68o04udf] {
    font-size: 0.6875rem;
    color: rgba(0, 0, 0, 0.62);
    margin-top: 4px;
    padding: 0 2px;
}

.vcs-meta-user[b-6s68o04udf] { align-self: flex-end; }

.vcs-msg-assistant[b-6s68o04udf] {
    display: flex;
    gap: 12px;
    margin-top: 18px;
}

.vcs-avatar[b-6s68o04udf] {
    display: none;
}

.vcs-msg-body[b-6s68o04udf] {
    min-width: 0;
    line-height: 1.6;
}

.vcs-thinking[b-6s68o04udf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.71875rem;
    font-weight: 600;
    color: #3f4a42;
    background: #f2f5f3;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 100px;
    padding: 3px 10px;
    margin-bottom: 10px;
}

.vcs-thinking svg[b-6s68o04udf] { color: #007b31; }

.vcs-thinking-spinner[b-6s68o04udf] {
    display: none;
    width: 11px;
    height: 11px;
    border: 2px solid rgba(0, 123, 49, 0.25);
    border-top-color: #007b31;
    border-radius: 50%;
    animation: vcs-spin-b-6s68o04udf 0.7s linear infinite;
}

.vcs-thinking-busy .vcs-thinking-spinner[b-6s68o04udf] { display: inline-block; }
.vcs-thinking-busy .vcs-thinking-check[b-6s68o04udf] { display: none; }

/* Streaming caret shown while JS types the prompt/answer */
.vcs-typing[b-6s68o04udf]::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: #007b31;
    animation: vcs-caret-b-6s68o04udf 0.85s steps(1) infinite;
}

.vcs-caret-blink[b-6s68o04udf] {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-right: 6px;
    vertical-align: text-bottom;
    background: rgba(0, 123, 49, 0.65);
    animation: vcs-caret-b-6s68o04udf 1.1s steps(1) infinite;
}

@keyframes vcs-spin-b-6s68o04udf {
    to { transform: rotate(360deg); }
}

@keyframes vcs-caret-b-6s68o04udf {
    50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .vcs-thinking-spinner[b-6s68o04udf],
    .vcs-caret-blink[b-6s68o04udf],
    .vcs-typing[b-6s68o04udf]::after,
    .vcs-pulsed[b-6s68o04udf] {
        animation: none;
    }

    .vcs-caret-blink[b-6s68o04udf] { display: none; }

    .vcs-history-item[b-6s68o04udf],
    .vcs-chip[b-6s68o04udf],
    .vcs-send[b-6s68o04udf],
    .vcs-pill[b-6s68o04udf],
    .vcs-new-chat-btn[b-6s68o04udf] {
        transition: none;
    }
}

.vcs-msg-body p[b-6s68o04udf] { margin: 0 0 0.5rem; }

.vcs-msg-body ul[b-6s68o04udf] {
    margin: 0.25rem 0 0.375rem;
    padding-left: 1.375rem;
}

.vcs-msg-body li[b-6s68o04udf] { margin-bottom: 0.2rem; }

/* Markdown-style tables inside responses */

.vcs-table-wrap[b-6s68o04udf] {
    overflow-x: auto;
    margin: 0.45rem 0 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
}

.vcs-table[b-6s68o04udf] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    line-height: 1.45;
}

.vcs-table th[b-6s68o04udf] {
    background: #f0fbf4;
    color: #00461f;
    font-weight: 700;
    text-align: left;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(0, 123, 49, 0.15);
    white-space: nowrap;
}

.vcs-table td[b-6s68o04udf] {
    padding: 6px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    white-space: nowrap;
}

.vcs-table tr:last-child td[b-6s68o04udf] { border-bottom: 0; }

.vcs-table .num[b-6s68o04udf] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ApexCharts inside responses */

.vcs-chart[b-6s68o04udf] {
    margin: 0.45rem 0 0.25rem;
}

/* Governance note */

.vcs-note[b-6s68o04udf] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0.5rem 0 0.25rem;
    padding: 8px 12px;
    background: #f6faf7;
    border: 1px solid rgba(0, 123, 49, 0.14);
    border-left: 3px solid #007b31;
    border-radius: 8px;
    font-size: 0.75rem;
    color: #1c221e;
}

.vcs-note svg[b-6s68o04udf] {
    color: #007b31;
    flex-shrink: 0;
    margin-top: 1px;
}

.vcs-msg-actions[b-6s68o04udf] {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 6px;
}

.vcs-action[b-6s68o04udf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    color: rgba(0, 0, 0, 0.45);
    position: relative;
    transition: background 0.15s ease, color 0.15s ease;
}

.vcs-action:hover[b-6s68o04udf] {
    background: #f0f4f1;
    color: #005624;
}

.vcs-action[data-copied][b-6s68o04udf]::after {
    content: "Copied";
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    translate: -50% 0;
    background: #00461f;
    color: #ffffff;
    font-size: 0.625rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
}

.vcs-thumb[aria-pressed="true"][b-6s68o04udf] {
    color: #007b31;
    background: rgba(0, 123, 49, 0.10);
}

.vcs-duration[b-6s68o04udf] {
    font-size: 0.6875rem;
    color: rgba(0, 0, 0, 0.62);
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}

.vcs-chips[b-6s68o04udf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 16px;
}

.vcs-chip[b-6s68o04udf] {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 123, 49, 0.06);
    border: 1px solid rgba(0, 123, 49, 0.18);
    border-radius: 100px;
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
    color: #005624;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.vcs-chip:hover[b-6s68o04udf] {
    background: rgba(0, 123, 49, 0.12);
    border-color: rgba(0, 123, 49, 0.35);
    transform: translateY(-1px);
}

/* Composer */

.vcs-composer[b-6s68o04udf] {
    flex-shrink: 0;
    width: min(calc(100% - 20px), 750px);
    margin: 8px auto 12px;
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 22px;
    background: linear-gradient(180deg, #f8fbf9 0%, #ffffff 62%);
    box-shadow: 0 18px 48px rgba(0, 45, 20, 0.08), 0 2px 8px rgba(0, 45, 20, 0.05);
}

.vcs-input[b-6s68o04udf] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 58px;
    background: #f6f8f7;
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 11px 12px 9px;
}

.vcs-input-affordance[b-6s68o04udf] {
    display: inline-flex;
    color: #007b31;
    flex-shrink: 0;
    margin-top: 2px;
}

.vcs-input-placeholder[b-6s68o04udf] {
    font-size: 0.8125rem;
    font-style: italic;
    color: rgba(0, 0, 0, 0.60);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vcs-controls[b-6s68o04udf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}

.vcs-controls-left[b-6s68o04udf],
.vcs-controls-right[b-6s68o04udf] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.vcs-icon-btn[b-6s68o04udf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: #4f5b53;
    transition: background 0.15s ease, color 0.15s ease;
}

.vcs-icon-btn:hover[b-6s68o04udf] {
    background: #eef3ef;
    color: #1c221e;
}

.vcs-divider[b-6s68o04udf] {
    width: 1px;
    height: 16px;
    background: rgba(0, 0, 0, 0.10);
    margin: 0 2px;
}

.vcs-pill[b-6s68o04udf] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.71875rem;
    font-weight: 600;
    color: #005624;
    background: rgba(0, 123, 49, 0.06);
    border: 1px solid rgba(0, 123, 49, 0.16);
    border-radius: 100px;
    padding: 3px 10px;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.vcs-pill:hover[b-6s68o04udf],
.vcs-pill[aria-expanded="true"][b-6s68o04udf] {
    background: #dcf4e6;
    border-color: rgba(0, 123, 49, 0.35);
}

.vcs-pill-caret[b-6s68o04udf] { opacity: 0.6; }

.vcs-pill-toggle[b-6s68o04udf] {
    background: #dcf4e6;
    border-color: rgba(0, 123, 49, 0.30);
    color: #00461f;
}

.vcs-pill-toggle[aria-pressed="false"][b-6s68o04udf] {
    background: rgba(0, 123, 49, 0.06);
    border-color: rgba(0, 123, 49, 0.16);
    color: #005624;
    opacity: 0.75;
}

/* Picker dropdowns (open upward from the composer) */

.vcs-pick[b-6s68o04udf] {
    position: relative;
    display: inline-flex;
}

.vcs-menu[b-6s68o04udf] {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 40;
    min-width: 232px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-radius: 12px;
    box-shadow: 0 18px 44px -12px rgba(0, 45, 20, 0.25), 0 4px 12px rgba(0, 45, 20, 0.08);
}

.vcs-menu[hidden][b-6s68o04udf] { display: none; }

.vcs-menu-head[b-6s68o04udf] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #4f5b53;
    padding: 6px 10px 4px;
}

.vcs-menu-item[b-6s68o04udf] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 0.78125rem;
    font-weight: 600;
    color: #1c221e;
    transition: background 0.12s ease;
}

.vcs-menu-item:hover[b-6s68o04udf] { background: #f0fbf4; }

.vcs-menu-item[aria-pressed="true"][b-6s68o04udf] { background: #f0fbf4; }

.vcs-menu-check[b-6s68o04udf] {
    color: #007b31;
    opacity: 0;
    flex-shrink: 0;
}

.vcs-menu-item[aria-pressed="true"] .vcs-menu-check[b-6s68o04udf] { opacity: 1; }

.vcs-menu-text[b-6s68o04udf] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.vcs-menu-text small[b-6s68o04udf] {
    font-size: 0.6875rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.55);
}

.vcs-usage[b-6s68o04udf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.71875rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.62);
    font-variant-numeric: tabular-nums;
}

.vcs-usage-warn[b-6s68o04udf] { color: #8a4b06; }

.vcs-usage-ring[b-6s68o04udf] {
    --vcs-pct: 18;
    --vcs-ring: #007b31;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: conic-gradient(var(--vcs-ring) 0 calc(var(--vcs-pct) * 1%), rgba(0, 0, 0, 0.12) 0 100%);
    -webkit-mask: radial-gradient(circle at center, transparent 4.5px, #000 5px);
    mask: radial-gradient(circle at center, transparent 4.5px, #000 5px);
}

.vcs-usage-warn .vcs-usage-ring[b-6s68o04udf] { --vcs-ring: #b45309; }

.vcs-send[b-6s68o04udf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #007b31;
    color: #ffffff;
    transition: background 0.15s ease, transform 0.1s ease;
}

.vcs-send:hover[b-6s68o04udf] { background: #006b2b; }

.vcs-send:active[b-6s68o04udf] { transform: scale(0.94); }

/* Responsive */

@media (max-width: 760px) {
    .vcs-pick[b-6s68o04udf],
    .vcs-pill[b-6s68o04udf] { display: none; }

    .vcs-composer[b-6s68o04udf] {
        width: calc(100% - 16px);
        margin: 8px auto;
        padding: 10px;
        border-radius: 20px;
    }
}

@media (max-width: 640px) {
    .vcs-shell[b-6s68o04udf] { grid-template-columns: minmax(0, 1fr); height: 560px; }

    .vcs-rail[b-6s68o04udf] { display: none; }

    .vcs-mobile-history[b-6s68o04udf] { display: inline-flex; }

    .vcs-topbar[b-6s68o04udf] { justify-content: flex-start; }

    .vcs-topbar-right[b-6s68o04udf] { margin-left: auto; }
}

@media (max-width: 575.98px) {
    .vcs-shell[b-6s68o04udf] { height: 540px; border-radius: 14px; }

    .vcs-messages[b-6s68o04udf] { padding: 20px 14px 14px; }

    .vcs-msg-user[b-6s68o04udf] { max-width: 90%; }

    .vcs-topbar-pill[b-6s68o04udf] { display: none; }

    .vcs-input[b-6s68o04udf] {
        min-height: 52px;
        border-radius: 15px;
        padding: 9px 10px;
    }

    .vcs-controls-right[b-6s68o04udf] { margin-right: 42px; }
}

/* Forced colors */

@media (forced-colors: active) {
    .vcs-shell[b-6s68o04udf],
    .vcs-rail[b-6s68o04udf],
    .vcs-topbar[b-6s68o04udf],
    .vcs-composer[b-6s68o04udf],
    .vcs-input[b-6s68o04udf] {
        background: Canvas;
        color: CanvasText;
        box-shadow: none;
    }
}

/* ── Drawer mode (hosted in HexaveraAppShowcase's panel) ────────────────── */

.vcs-shell[data-mode="drawer"][b-6s68o04udf] {
    grid-template-columns: minmax(0, 1fr);
    height: 100%;
    max-width: none;
    flex: 1;
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.vcs-shell[data-mode="drawer"] .vcs-rail[b-6s68o04udf] { display: none; }

.vcs-shell[data-mode="drawer"] .vcs-preview-label[b-6s68o04udf],
.vcs-shell[data-mode="drawer"] .vcs-topbar-pill[b-6s68o04udf],
.vcs-shell[data-mode="drawer"] .vcs-topbar-icon:not(.vcs-drawer-close)[b-6s68o04udf],
.vcs-shell[data-mode="drawer"] .vcs-mobile-history[b-6s68o04udf] { display: none; }

.vcs-shell[data-mode="drawer"] .vcs-topbar[b-6s68o04udf] { padding: 0 12px 0 14px; }

.vcs-shell[data-mode="drawer"] .vcs-controls-left .vcs-pick[b-6s68o04udf],
.vcs-shell[data-mode="drawer"] .vcs-divider[b-6s68o04udf],
.vcs-shell[data-mode="drawer"] .vcs-pill-toggle[b-6s68o04udf] { display: none; }

.vcs-shell[data-mode="drawer"] .vcs-composer[b-6s68o04udf] { padding: 10px 12px 12px; }
/* /Components/Shared/VeraConversation.razor.rz.scp.css */
/* VeraConversation.razor.css
   Scoped styles for the reusable Vera chat window demo component.
   Translates VeraChatMessages.razor.css (FluentUI vars) to concrete website brand colors.
   Window chrome (vera-preview-window, vera-preview-header) is styled globally in app.scss.
*/

/* ══ Window flex + height supplement (app.scss has shadow/radius/border) ═══ */

.vc-demo-window[b-8fyshq0o8a] {
    display: flex;
    flex-direction: column;
    max-height: 640px;
    min-height: 640px;
    overflow: hidden;
    max-width: 760px;
    margin: 0 auto;
}

/* ══ macOS window control dots ══════════════════════════════════════ */

.vc-win-controls[b-8fyshq0o8a] {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    margin-right: 0.25rem;
}

.vc-wc[b-8fyshq0o8a] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.vc-wc-close[b-8fyshq0o8a] { background: #ff5f57; }
.vc-wc-min[b-8fyshq0o8a]   { background: #febc2e; }
.vc-wc-max[b-8fyshq0o8a]   { background: #28c840; }

/* ══ Messages scroll area ════════════════════════════════════════════ */

.vera-chat-messages[b-8fyshq0o8a] {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    padding: 1rem 1rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.vera-chat-messages[b-8fyshq0o8a]::-webkit-scrollbar { width: 4px; }
.vera-chat-messages[b-8fyshq0o8a]::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.10); border-radius: 2px; }

.vera-chat-messages:focus-visible[b-8fyshq0o8a] {
    outline: 2px solid #007b31;
    outline-offset: -2px;
}

/* ══ Message rows ════════════════════════════════════════════════════ */

.vera-message[b-8fyshq0o8a] {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 6px;
}

.vera-message-user[b-8fyshq0o8a]      { align-items: flex-end; }
.vera-message-assistant[b-8fyshq0o8a] { align-items: flex-start; }

/* ══ User bubble ════════════════════════════════════════════════════ */

.vera-message-user .vera-message-content[b-8fyshq0o8a] {
    background: #005624;
    color: #ffffff;
    border-radius: 14px 14px 4px 14px;
    padding: 0.625rem 0.875rem;
    max-width: 86%;
    word-wrap: break-word;
    font-size: 0.875rem;
    line-height: 1.55;
}

.vera-message-user .vera-message-content[b-8fyshq0o8a]  p {
    margin: 0 0 0.375rem;
}

.vera-message-user .vera-message-content[b-8fyshq0o8a]  p:last-child { margin-bottom: 0; }
.vera-message-user .vera-message-content[b-8fyshq0o8a]  ul  { margin: 0.375rem 0; padding-left: 1.25rem; }
.vera-message-user .vera-message-content[b-8fyshq0o8a]  li  { margin-bottom: 0.125rem; }

/* ══ Assistant bubble (transparent, full-width) ══════════════════════ */

.vera-message-assistant .vera-message-content[b-8fyshq0o8a] {
    background: transparent;
    border-radius: 0;
    padding: 2px 0;
    width: 100%;
    word-wrap: break-word;
    font-size: 0.875rem;
    line-height: 1.6;
}

/* ══ Footer timestamp ════════════════════════════════════════════════ */

.vera-message-footer[b-8fyshq0o8a] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6875rem;
    color: rgba(0, 0, 0, 0.62);
    margin-top: 3px;
    padding: 0 2px;
}

.vera-footer-user[b-8fyshq0o8a] { justify-content: flex-end; }

/* ══ Thinking row ════════════════════════════════════════════════════ */

.vc-thinking-row[b-8fyshq0o8a] {
    /* JS shows/hides via display:flex */
    display: none;
}

.vera-thinking-header[b-8fyshq0o8a] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(0, 0, 0, 0.62);
    font-size: 0.8125rem;
    font-style: italic;
    line-height: 1.4;
    width: 100%;
    padding: 2px 0;
}

.vera-thinking-label[b-8fyshq0o8a] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vera-thinking-badge[b-8fyshq0o8a] {
    font-size: 0.6875rem;
    color: rgba(0, 0, 0, 0.62);
    font-variant-numeric: tabular-nums;
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.05);
    font-style: normal;
}

/* ══ Vera logo animations ════════════════════════════════════════════ */

.vera-logo-thinking[b-8fyshq0o8a] {
    width: 16px; height: 16px;
    object-fit: contain; border-radius: 50%;
    flex-shrink: 0; opacity: 0.82;
}

.vera-logo-thinking-spin[b-8fyshq0o8a] {
    width: 16px; height: 16px;
    object-fit: contain; border-radius: 50%;
    flex-shrink: 0;
    animation: vera-logo-spin-b-8fyshq0o8a 1s linear infinite;
}

@keyframes vera-logo-spin-b-8fyshq0o8a {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

[b-8fyshq0o8a] .vera-logo-chip {
    width: 13px; height: 13px;
    object-fit: contain; border-radius: 50%;
    flex-shrink: 0; opacity: 0.78;
}

/* ══ Intro typed line + blinking cursor (intro is in .razor itself) ═ */

.vc-intro-wrap[b-8fyshq0o8a] {
    font-size: 0.875rem;
    font-style: italic;
    color: rgba(0, 0, 0, 0.70);
    line-height: 1.6;
    margin-bottom: 0.875rem;
}

.vera-cursor[b-8fyshq0o8a] {
	display: none;
    color: #007b31;
    font-weight: 700;
    animation: vera-blink-b-8fyshq0o8a 0.8s step-end infinite;
    margin-left: 1px;
}

.vc-is-animating .vera-cursor[b-8fyshq0o8a] {
	display: inline-block;
}

@keyframes vera-blink-b-8fyshq0o8a {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ══ Response body markdown ══════════════════════════════════════════ */

.vc-response-body[b-8fyshq0o8a] {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.78);
    line-height: 1.65;
    width: 86%;
}

/* ::deep targets HTML content inside @Answer RenderFragment.
   h3 is the preferred answer-heading level (keeps mock content out of the page h2 outline). */
[b-8fyshq0o8a] .vc-response-body h2,
[b-8fyshq0o8a] .vc-response-body h3 {
    font-size: 0.9375rem; font-weight: 700; color: #0d1a0d;
    margin: 1.125rem 0 0.4rem; padding-bottom: 0.2rem;
    border-bottom: 1px solid rgba(0,0,0,0.07); line-height: 1.3;
}
[b-8fyshq0o8a] .vc-response-body h2:first-child,
[b-8fyshq0o8a] .vc-response-body h3:first-child { margin-top: 0; }
[b-8fyshq0o8a] .vc-response-body p  { margin: 0 0 0.5rem; }
[b-8fyshq0o8a] .vc-response-body p:last-child  { margin-bottom: 0; }
[b-8fyshq0o8a] .vc-response-body strong { color: #0d1a0d; font-weight: 700; }
[b-8fyshq0o8a] .vc-response-body ul,
[b-8fyshq0o8a] .vc-response-body ol { margin: 0.25rem 0 0.625rem; padding-left: 1.375rem; }
[b-8fyshq0o8a] .vc-response-body li { margin-bottom: 0.2rem; }
[b-8fyshq0o8a] .vc-response-body blockquote {
    border-left: 3px solid #007b31; margin: 0.625rem 0;
    padding: 0.375rem 0.875rem; color: rgba(0,0,0,0.55);
    font-style: italic; background: rgba(0,123,49,0.04);
    border-radius: 0 6px 6px 0; font-size: 0.8125rem;
}

/* ── Metrics grid ── */
[b-8fyshq0o8a] .vc-metrics-grid {
    display: grid; grid-template-columns: repeat(3,1fr);
    gap: 0.5rem; margin: 0.625rem 0;
}
[b-8fyshq0o8a] .vc-metric {
    background: rgba(0,123,49,0.05); border: 1px solid rgba(0,123,49,0.12);
    border-radius: 8px; padding: 0.5rem 0.625rem;
    display: flex; flex-direction: column; gap: 0.125rem;
}
[b-8fyshq0o8a] .vc-metric-warn   { background: rgba(180,120,0,0.06); border-color: rgba(180,120,0,0.18); }
[b-8fyshq0o8a] .vc-metric-danger { background: rgba(185,28,28,0.05); border-color: rgba(185,28,28,0.18); }
[b-8fyshq0o8a] .vc-metric-val    { font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; color: #0d1a0d; line-height: 1; }
[b-8fyshq0o8a] .vc-metric-warn .vc-metric-val   { color: #8a5700; }
[b-8fyshq0o8a] .vc-metric-danger .vc-metric-val { color: #b91c1c; }
[b-8fyshq0o8a] .vc-metric-lbl { font-size: 0.6875rem; color: rgba(0,0,0,0.65); line-height: 1.3; }

/* ── Risk list ── */
[b-8fyshq0o8a] .vc-risk-list {
    list-style: none; padding-left: 0; margin: 0.375rem 0 0.625rem;
    display: flex; flex-direction: column; gap: 0.25rem;
}
[b-8fyshq0o8a] .vc-risk-list li {
    padding: 0.3rem 0.625rem 0.3rem 1.875rem; border-radius: 6px;
    font-size: 0.8125rem; position: relative; margin-bottom: 0;
}
[b-8fyshq0o8a] .vc-risk-list li::before {
    content: ""; position: absolute; left: 0.5rem; top: 50%;
    transform: translateY(-50%); width: 0.625rem; height: 0.625rem; border-radius: 50%;
}
[b-8fyshq0o8a] .vc-risk-red    { background: rgba(220,53,69,0.05); color: rgba(0,0,0,0.72); }
[b-8fyshq0o8a] .vc-risk-red::before    { background: #dc3545; }
[b-8fyshq0o8a] .vc-risk-yellow { background: rgba(253,184,48,0.08); color: rgba(0,0,0,0.72); }
[b-8fyshq0o8a] .vc-risk-yellow::before { background: #8a5700; }

/* ── Q&A pairs ── */
[b-8fyshq0o8a] .vc-qa {
    margin-bottom: 0.5rem; border-radius: 8px;
    overflow: hidden; border: 1px solid rgba(0,0,0,0.08);
}
[b-8fyshq0o8a] .vc-q {
    background: rgba(0,0,0,0.025); border-bottom: 1px solid rgba(0,0,0,0.07);
    padding: 0.4rem 0.75rem; font-size: 0.8125rem; font-style: italic;
    color: rgba(0,0,0,0.58); font-weight: 500;
}
[b-8fyshq0o8a] .vc-a {
    padding: 0.4rem 0.75rem; font-size: 0.8125rem;
    color: rgba(0,0,0,0.75); line-height: 1.55; background: rgba(0,123,49,0.03);
}

/* ── Strategic actions grid ── */
[b-8fyshq0o8a] .vc-actions-grid {
    display: grid; grid-template-columns: repeat(3,1fr); gap: 0.5rem; margin-top: 0.5rem;
}
[b-8fyshq0o8a] .vc-action-col {
    background: rgba(0,0,0,0.025); border-radius: 8px; padding: 0.75rem;
    border: 1px solid rgba(0,0,0,0.06);
}
[b-8fyshq0o8a] .vc-action-header {
    font-size: 0.625rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.08em; color: #007b31; margin-bottom: 0.5rem;
}
[b-8fyshq0o8a] .vc-action-col ul { margin: 0; padding-left: 1rem; }
[b-8fyshq0o8a] .vc-action-col li { font-size: 0.75rem; margin-bottom: 0.2rem; color: rgba(0,0,0,0.62); }

/* ── Inline ApexChart container ── */
[b-8fyshq0o8a] .vera-inline-chart {
    margin-top: 0.75rem;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
    min-height: 250px;
}

/* ══ Message action bar (decorative) ════════════════════════════════ */

.vera-message-actions[b-8fyshq0o8a] {
    display: flex; align-items: center; gap: 2px; margin-top: 4px;
}

.vera-action-btn[b-8fyshq0o8a] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border: none; background: transparent;
    color: rgba(0,0,0,0.28); border-radius: 4px; cursor: default; padding: 0;
    transition: color 0.12s, background 0.12s;
}
.vera-action-btn:hover[b-8fyshq0o8a] { color: rgba(0,0,0,0.52); background: rgba(0,0,0,0.04); }

.vera-meta-duration[b-8fyshq0o8a] {
    font-size: 0.6875rem; color: rgba(0,0,0,0.62);
    margin-left: 4px; font-variant-numeric: tabular-nums;
}

/* ══ Suggestion chips ════════════════════════════════════════════════ */

.vera-suggested-actions[b-8fyshq0o8a] {
    border-top: 1px solid rgba(0,0,0,0.07); padding: 0.5rem 0.875rem;
    display: flex; gap: 0.375rem; flex-wrap: wrap; flex-shrink: 0; background: #fafbfa;
}

[b-8fyshq0o8a] .vera-suggestion-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: rgba(0,123,49,0.06); border: 1px solid rgba(0,123,49,0.18);
    border-radius: 100px; padding: 0.25rem 0.65rem;
    font-size: 0.75rem; color: #005624; white-space: nowrap; cursor: default;
}

[b-8fyshq0o8a] .vera-chip-label  { font-size: 0.75rem; color: #005624; }
[b-8fyshq0o8a] .vera-chip-arrow  { opacity: 0.45; flex-shrink: 0; }

/* ══ Chat input (readonly demo) ══════════════════════════════════════ */

.vera-chat-input[b-8fyshq0o8a] {
    flex-shrink: 0; padding: 4px 10px;
    background: #f5f7f6;
    border-top: 1px solid #007b31;
}

.vera-input-container[b-8fyshq0o8a] {
    display: flex; align-items: flex-end; gap: 6px;
    width: 100%; background: #f5f7f6;
}

.vera-text-input[b-8fyshq0o8a],
.vera-text-input:focus[b-8fyshq0o8a],
.vera-text-input:focus-visible[b-8fyshq0o8a],
.vera-text-input:active[b-8fyshq0o8a] {
    display: block; background: transparent; width: 100%;
    border: none !important; outline: none !important; box-shadow: none !important;
    resize: none;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 0.875rem; line-height: 1.5;
    color: rgba(0,0,0,0.68); padding: 4px 2px;
    min-height: 24px; overflow-y: hidden; cursor: default;
}
.vera-text-placeholder[b-8fyshq0o8a] { color: rgba(0,0,0,0.60); font-style: italic; }

/* ══ Status bar ══════════════════════════════════════════════════════ */

.vera-status-bar[b-8fyshq0o8a] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 10px; font-size: 0.6875rem; color: rgba(0,0,0,0.62);
    background: #f5f7f6;
    flex-shrink: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.vera-status-left[b-8fyshq0o8a],
.vera-status-right[b-8fyshq0o8a] { display: flex; align-items: center; gap: 6px; }

.vera-status-agent[b-8fyshq0o8a] { font-weight: 700; color: #007b31; }
.vera-status-sep[b-8fyshq0o8a]   { color: rgba(0,0,0,0.20); }
.vera-status-tokens[b-8fyshq0o8a] { font-variant-numeric: tabular-nums; }

.vera-context-indicator[b-8fyshq0o8a] {
    display: flex; align-items: center; gap: 4px; cursor: default;
}

.vera-context-bar[b-8fyshq0o8a] {
    width: 38px; height: 3.5px;
    background: rgba(0,0,0,0.10); border-radius: 2px; overflow: hidden;
}

.vera-context-fill[b-8fyshq0o8a] {
    height: 100%; background: #007b31; border-radius: 2px;
    transition: width 0.3s ease; min-width: 1px;
}

.vera-context-label[b-8fyshq0o8a] { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ══ Responsive ══════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
    .vc-demo-window[b-8fyshq0o8a] { max-height: 580px; min-height: 580px;}
    .vera-message-user .vera-message-content[b-8fyshq0o8a] { max-width: 95%; }
    .vc-response-body[b-8fyshq0o8a] { max-width: 95%; }
    [b-8fyshq0o8a] .vc-metrics-grid { grid-template-columns: repeat(2,1fr); }
    [b-8fyshq0o8a] .vc-actions-grid { grid-template-columns: 1fr; }
}

/* ══ Reduced motion ══════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .vera-logo-thinking-spin[b-8fyshq0o8a] { animation: none; opacity: 0.55; }
    .vera-cursor[b-8fyshq0o8a] { animation: none; }
}
/* /Components/Shared/VisionHmiShowcase.razor.rz.scp.css */
/* P6 Vera Vision HMI - industrial dark-first theme (VISION-SHOWCASE-PLAN §6.1:
   the Avalonia HMI palette verbatim; §6.2 decision: accent = the site family's
   dark green ramp (#31a267 / hover #8dd8b1) for family consistency - keeping the
   Avalonia teal is a one-line swap of --vh-accent / --vh-accent-hover to
   #00B8A9 / #00D4C3 if the PO makes teal the official Vision sub-brand accent.
   Severity is triple-redundant everywhere (color + icon + text). Touch targets
   >= 48 px. Typography: Inter stack (no webfont load), Consolas for technical
   values, all-caps micro-labels with wide tracking. */

.vh-root[b-p3id9ygq8h] {
    --vh-bg: #111418;
    --vh-surface: #1a1e24;
    --vh-surface-2: #242a32;
    --vh-elevated: #2d3440;
    --vh-border: #3a424e;
    --vh-text: #e8eaed;
    --vh-text-sub: #9aa3ae;
    --vh-accent: #31a267;
    --vh-accent-hover: #8dd8b1;
    --vh-on-accent: #0c130f;
    --vh-critical: #e53935;
    --vh-high: #fb8c00;
    --vh-medium: #fdd835;
    --vh-low: #42a5f5;
    --vh-pass: #2e7d32;
    --vh-pass-ink: #7bd89f;
    --vh-fail: #c62828;
    --vh-fail-ink: #f58a8a;
    --vh-preview: #0a0d12;
    --vh-ok-bg: #1b3a2a;
    --vh-warn-bg: #3f2e15;
    --vh-warn-ink: #f5c078;

    color: var(--vh-text);
    font-family: Inter, "Segoe UI", "Segoe UI Variable Text", system-ui, sans-serif;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    background: var(--vh-bg);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 12px 40px -16px rgba(0, 0, 0, 0.55);
}

@media (min-width: 1280px) { .vh-root[b-p3id9ygq8h] { zoom: 1.08; } }
@media (min-width: 1720px) { .vh-root[b-p3id9ygq8h] { zoom: 1.18; } }

/* Industrial light variant (axe gate runs both) - previews stay dark. */
.vh-root.vh-light[b-p3id9ygq8h] {
    --vh-bg: #eef0f2;
    --vh-surface: #ffffff;
    --vh-surface-2: #e4e8ec;
    --vh-elevated: #d8dde3;
    --vh-border: #b8c0c9;
    --vh-text: #16191d;
    --vh-text-sub: #4c555f;
    --vh-accent: #007b31;
    --vh-accent-hover: #005522;
    --vh-on-accent: #ffffff;
    --vh-pass-ink: #1b5e20;
    --vh-fail-ink: #b71c1c;
    --vh-ok-bg: #d9eede;
    --vh-warn-bg: #fdf3e0;
    --vh-warn-ink: #7a4d00;
    /* Severity inks darkened for >= 4.5:1 on white (small bold severity text). */
    --vh-medium: #8a6d00;
    --vh-low: #1257a5;
    --vh-high: #a34e00;
}

.vh-mono[b-p3id9ygq8h] { font-family: Consolas, "Cascadia Mono", monospace; }
.vh-micro[b-p3id9ygq8h] {
    display: block;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--vh-text-sub);
}
.vh-subtle[b-p3id9ygq8h] { color: var(--vh-text-sub); font-size: 12px; }

/* ── chrome bar (family shell convention) ── */
.vh-chrome[b-p3id9ygq8h] {
    display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
    padding: 8px 14px; background: var(--vh-surface);
    border-bottom: 1px solid var(--vh-border); flex: none;
}
.vh-chrome-dots[b-p3id9ygq8h] { display: flex; gap: 6px; }
.vh-chrome-dots span[b-p3id9ygq8h] { width: 10px; height: 10px; border-radius: 50%; background: var(--vh-border); }
.vh-chrome-url[b-p3id9ygq8h] {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px;
    background: var(--vh-surface-2); border: 1px solid var(--vh-border);
    border-radius: 99px; font-size: 11px; color: var(--vh-text-sub); white-space: nowrap;
}
.vh-chrome-url svg[b-p3id9ygq8h] { color: var(--vh-accent); }
.vh-chrome-controls[b-p3id9ygq8h] { display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.vh-toggle[b-p3id9ygq8h] { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; cursor: pointer; min-height: 32px; }
.vh-toggle input[b-p3id9ygq8h] { width: 18px; height: 18px; accent-color: var(--vh-accent); }
.vh-honesty[b-p3id9ygq8h] {
    margin: 0; padding: 4px 14px; font-size: 11px; color: var(--vh-text-sub);
    background: var(--vh-surface); border-bottom: 1px solid var(--vh-border);
}

/* ── frame: 260px rail + main ── */
.vh-frame[b-p3id9ygq8h] { display: flex; flex: 1 1 auto; min-height: 0; }
.vh-rail[b-p3id9ygq8h] {
    width: 260px; flex: none; display: flex; flex-direction: column;
    background: var(--vh-surface); border-right: 1px solid var(--vh-border);
    padding: 14px 12px;
}
.vh-brand[b-p3id9ygq8h] { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; }
.vh-brand-mark[b-p3id9ygq8h] {
    width: 42px; height: 42px; border-radius: 10px; background: var(--vh-accent);
    color: var(--vh-on-accent); display: grid; place-items: center;
    font-weight: 800; font-size: 15px;
}
.vh-brand-text[b-p3id9ygq8h] { display: flex; flex-direction: column; line-height: 1.25; }
.vh-brand-text strong[b-p3id9ygq8h] { font-size: 14px; }
.vh-brand-text span[b-p3id9ygq8h] { color: var(--vh-text-sub); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; }
.vh-nav[b-p3id9ygq8h] { display: flex; flex-direction: column; gap: 6px; }
.vh-nav .vh-micro[b-p3id9ygq8h] { margin: 4px 2px 6px; }
.vh-nav-item[b-p3id9ygq8h] {
    min-height: 48px; padding: 6px 14px; text-align: left; font-size: 13px;
    border: 1px solid transparent; border-radius: 8px; background: transparent;
    color: var(--vh-text); cursor: pointer;
}
.vh-nav-item:hover[b-p3id9ygq8h] { background: var(--vh-surface-2); }
.vh-nav-item.vh-nav-on[b-p3id9ygq8h] { background: var(--vh-surface-2); border-color: var(--vh-accent); color: var(--vh-accent-hover); font-weight: 600; }
.vh-nav-item:focus-visible[b-p3id9ygq8h] { outline: 2px solid var(--vh-accent); outline-offset: 2px; }
.vh-rail-foot[b-p3id9ygq8h] { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px solid var(--vh-border); }
.vh-health[b-p3id9ygq8h] { display: inline-flex; gap: 7px; align-items: center; font-size: 12px; margin-bottom: 6px; }
.vh-dot[b-p3id9ygq8h] { width: 10px; height: 10px; border-radius: 50%; }
.vh-dot-ok[b-p3id9ygq8h] { background: #43a047; }
.vh-dot-warn[b-p3id9ygq8h] { background: #fb8c00; }
.vh-rail-ws[b-p3id9ygq8h] { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.vh-clock[b-p3id9ygq8h] { font-family: Consolas, monospace; font-size: 15px; color: var(--vh-text-sub); }

.vh-main[b-p3id9ygq8h] { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 14px 16px 18px; }

.vh-offline[b-p3id9ygq8h] {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    background: var(--vh-warn-bg); color: var(--vh-warn-ink);
    border: 1px solid var(--vh-high); border-radius: 8px;
    padding: 8px 12px; font-size: 12px; margin-bottom: 12px;
}
.vh-offline-count[b-p3id9ygq8h] { margin-left: auto; font-weight: 700; }

/* ── workspace head + KPI strip ── */
.vh-ws-head[b-p3id9ygq8h] { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-bottom: 12px; }
.vh-ws-head h2[b-p3id9ygq8h] { margin: 0; font-size: 21px; font-weight: 650; }
.vh-kpis[b-p3id9ygq8h] { display: flex; gap: 20px; margin: 0; }
.vh-kpis div[b-p3id9ygq8h] { display: flex; flex-direction: column; }
.vh-kpis dd[b-p3id9ygq8h] { margin: 0; font-size: 13px; font-weight: 600; }
.vh-ws-actions[b-p3id9ygq8h] { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ── buttons (touch >= 48px) ── */
.vh-btn[b-p3id9ygq8h] {
    min-height: 48px; min-width: 48px; padding: 8px 18px;
    border: 1px solid var(--vh-border); border-radius: 8px;
    background: var(--vh-surface-2); color: var(--vh-text);
    font-size: 13px; font-weight: 600; cursor: pointer;
}
.vh-btn:hover[b-p3id9ygq8h] { background: var(--vh-elevated); }
.vh-btn:focus-visible[b-p3id9ygq8h] { outline: 2px solid var(--vh-accent); outline-offset: 2px; }
.vh-btn-accent[b-p3id9ygq8h] { background: var(--vh-accent); border-color: var(--vh-accent); color: var(--vh-on-accent); }
.vh-btn-accent:hover[b-p3id9ygq8h] { background: var(--vh-accent-hover); color: var(--vh-on-accent); }
.vh-btn-sm[b-p3id9ygq8h] { min-height: 48px; padding: 6px 14px; }
.vh-icon-btn[b-p3id9ygq8h] {
    width: 48px; height: 48px; display: inline-grid; place-items: center;
    border: 1px solid var(--vh-border); border-radius: 8px;
    background: var(--vh-surface-2); color: var(--vh-text); cursor: pointer;
}
.vh-icon-btn:hover[b-p3id9ygq8h] { background: var(--vh-elevated); }
.vh-icon-btn:focus-visible[b-p3id9ygq8h] { outline: 2px solid var(--vh-accent); outline-offset: 2px; }
.vh-chip[b-p3id9ygq8h] {
    min-height: 48px; padding: 6px 18px; border-radius: 24px;
    border: 1px solid var(--vh-border); background: var(--vh-surface-2);
    color: var(--vh-text); font-size: 13px; cursor: pointer;
}
.vh-chip-on[b-p3id9ygq8h] { background: var(--vh-accent); border-color: var(--vh-accent); color: var(--vh-on-accent); font-weight: 700; }
.vh-chip:focus-visible[b-p3id9ygq8h] { outline: 2px solid var(--vh-accent); outline-offset: 2px; }

/* Fixed alarm band (ISA-101: abnormal status in a dedicated band, color +
   icon + text, never floating over the image). */
.vh-alarmband[b-p3id9ygq8h] {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    padding: 9px 12px; margin-bottom: 12px;
    border: 1px solid var(--vh-critical); border-left-width: 5px; border-radius: 8px;
    background: rgba(229, 57, 53, 0.12); color: var(--vh-fail-ink); font-size: 12.5px;
}
.vh-light .vh-alarmband[b-p3id9ygq8h] { background: #fbe2e2; color: #8e1513; }
.vh-alarmband svg[b-p3id9ygq8h] { flex: none; }
.vh-alarmband-hint[b-p3id9ygq8h] { margin-left: auto; color: var(--vh-text-sub); }

/* ── camera cards ── */
.vh-camgrid[b-p3id9ygq8h] { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.vh-cam[b-p3id9ygq8h] {
    background: var(--vh-surface); border: 1px solid var(--vh-border);
    border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 8px;
}
.vh-cam-fail[b-p3id9ygq8h] { border-color: var(--vh-fail); box-shadow: 0 0 0 1px var(--vh-fail); }
.vh-cam-head[b-p3id9ygq8h] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vh-cam-name[b-p3id9ygq8h] { display: flex; flex-direction: column; line-height: 1.2; margin-right: auto; }
.vh-cam-name strong[b-p3id9ygq8h] { font-size: 14px; }
.vh-cam-name .vh-mono[b-p3id9ygq8h] { font-size: 11px; color: var(--vh-text-sub); }
.vh-verdict[b-p3id9ygq8h] {
    display: inline-flex; gap: 5px; align-items: center; min-height: 30px;
    padding: 2px 12px; border-radius: 6px; font-weight: 800; font-size: 13px; letter-spacing: 1px;
}
.vh-verdict-pass[b-p3id9ygq8h] { background: var(--vh-ok-bg); color: var(--vh-pass-ink); }
.vh-verdict-fail[b-p3id9ygq8h] { background: #3f1b1b; color: var(--vh-fail-ink); }
.vh-light .vh-verdict-fail[b-p3id9ygq8h] { background: #fbe2e2; }
.vh-badge[b-p3id9ygq8h] { min-height: 30px; display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 6px; font-size: 12px; }
.vh-badge-ok[b-p3id9ygq8h] { background: var(--vh-ok-bg); color: var(--vh-pass-ink); }
.vh-badge-off[b-p3id9ygq8h] { background: var(--vh-surface-2); color: var(--vh-text-sub); }
.vh-cam-count[b-p3id9ygq8h] { font-size: 12px; color: var(--vh-text-sub); }
.vh-cam-actions[b-p3id9ygq8h] { display: flex; gap: 6px; }

.vh-abnormal[b-p3id9ygq8h] {
    display: flex; gap: 8px; align-items: center; padding: 7px 10px;
    border-radius: 6px; font-size: 12.5px; border: 1px solid;
}
.vh-sev-critical[b-p3id9ygq8h] { background: rgba(229, 57, 53, 0.14); border-color: var(--vh-critical); color: var(--vh-fail-ink); }
.vh-light .vh-sev-critical[b-p3id9ygq8h] { color: #8e1513; }
.vh-sev-high[b-p3id9ygq8h] { background: rgba(251, 140, 0, 0.14); border-color: var(--vh-high); color: var(--vh-warn-ink); }
.vh-sev-medium[b-p3id9ygq8h] { background: rgba(253, 216, 53, 0.12); border-color: var(--vh-medium); color: var(--vh-medium); }
.vh-sev-low[b-p3id9ygq8h] { background: rgba(66, 165, 245, 0.12); border-color: var(--vh-low); color: var(--vh-low); }

.vh-preview[b-p3id9ygq8h] { position: relative; border-radius: 6px; overflow: hidden; background: var(--vh-preview); border: 1px solid var(--vh-border); }
.vh-preview img[b-p3id9ygq8h] { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; opacity: 0.92; }
.vh-bbox[b-p3id9ygq8h] { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vh-bbox rect[b-p3id9ygq8h] { fill: none; stroke: rgba(74, 222, 128, 0.85); stroke-width: 0.5; }
.vh-bbox rect.vh-bbox-fail[b-p3id9ygq8h] { stroke: #f87171; stroke-width: 0.9; }
/* Overlay labels are HTML chips, NOT SVG <text>: MarkupString-injected SVG
   nodes never receive the CSS-isolation scope attribute (huge unstyled black
   text bug), and preserveAspectRatio="none" would distort glyphs anyway.
   Competitor convention: thin boxes + a small corner tag, minimal on-image text. */
.vh-bbox-label[b-p3id9ygq8h] {
    position: absolute;
    transform: translateY(-100%);
    padding: 1px 6px;
    border-radius: 3px 3px 0 0;
    background: rgba(198, 40, 40, 0.92);
    color: #ffffff;
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: 10.5px;
    white-space: nowrap;
    pointer-events: none;
}
.vh-live-tag[b-p3id9ygq8h] {
    position: absolute; top: 6px; left: 6px; padding: 1px 8px; border-radius: 4px;
    background: rgba(10, 13, 18, 0.78); color: #4ade80; font-size: 10px;
    font-weight: 800; letter-spacing: 2px;
}
.vh-live-tag.vh-live-off[b-p3id9ygq8h] { color: var(--vh-text-sub); }

.vh-cycle[b-p3id9ygq8h] { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.vh-cycle > span[b-p3id9ygq8h] { display: flex; flex-direction: column; }
/* .vh-cycle > span (0-1-1) outranks .vh-pips (0-1-0) and was forcing the
   30-pip history into a card-stretching vertical column - the row direction
   must win at higher specificity. */
.vh-pips[b-p3id9ygq8h], .vh-cycle > span.vh-pips[b-p3id9ygq8h] { display: inline-flex; flex-direction: row; gap: 2px; align-items: flex-end; margin-left: auto; }
.vh-pips i[b-p3id9ygq8h] { width: 6px; height: 22px; border-radius: 2px; background: var(--vh-pass); display: inline-block; flex: none; }
.vh-pips i.vh-pip-fail[b-p3id9ygq8h] { background: var(--vh-critical); }

.vh-statusrow[b-p3id9ygq8h], .vh-perfrow[b-p3id9ygq8h] { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; }
.vh-statusrow > span[b-p3id9ygq8h], .vh-perfrow > span[b-p3id9ygq8h] { display: flex; flex-direction: column; gap: 2px; }
.vh-chipline[b-p3id9ygq8h] { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 4px; font-size: 11.5px; font-weight: 700; width: fit-content; }
.vh-ok[b-p3id9ygq8h] { background: var(--vh-ok-bg); color: var(--vh-pass-ink); }
.vh-warn[b-p3id9ygq8h] { background: var(--vh-warn-bg); color: var(--vh-warn-ink); }

.vh-detlist[b-p3id9ygq8h] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.vh-detlist li[b-p3id9ygq8h] {
    display: flex; gap: 10px; align-items: center; padding: 4px 8px 4px 10px;
    background: var(--vh-surface-2); border-radius: 4px; border-left: 3px solid var(--vh-border); font-size: 12.5px;
}
.vh-detlist li span:first-child[b-p3id9ygq8h] { margin-right: auto; }
.vh-sevstripe-critical[b-p3id9ygq8h] { border-left-color: var(--vh-critical) !important; }
.vh-sevstripe-high[b-p3id9ygq8h] { border-left-color: var(--vh-high) !important; }
.vh-sevstripe-medium[b-p3id9ygq8h] { border-left-color: var(--vh-medium) !important; }
.vh-sevstripe-low[b-p3id9ygq8h] { border-left-color: var(--vh-low) !important; }
.vh-sevtext[b-p3id9ygq8h] { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.vh-sevtext-critical[b-p3id9ygq8h] { color: var(--vh-fail-ink); }
.vh-sevtext-high[b-p3id9ygq8h] { color: var(--vh-high); }
.vh-sevtext-medium[b-p3id9ygq8h] { color: var(--vh-medium); }
.vh-sevtext-low[b-p3id9ygq8h] { color: var(--vh-low); }
.vh-light .vh-sevtext-critical[b-p3id9ygq8h] { color: #b71c1c; }
.vh-light .vh-sevtext-medium[b-p3id9ygq8h] { color: #8a6d00; }

.vh-media-note[b-p3id9ygq8h] { margin: 12px 0 0; font-size: 11px; color: var(--vh-text-sub); }

/* ── training capture ── */
.vh-filterrow[b-p3id9ygq8h] { display: flex; gap: 10px 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.vh-filter[b-p3id9ygq8h] { display: flex; flex-direction: column; gap: 4px; }
.vh-filter-grow[b-p3id9ygq8h] { flex: 1 1 200px; }
.vh-filter select[b-p3id9ygq8h], .vh-filter input[b-p3id9ygq8h] {
    min-height: 48px; padding: 6px 12px; border: 1px solid var(--vh-border);
    border-radius: 8px; background: var(--vh-surface-2); color: var(--vh-text); font-size: 13px;
}
.vh-filter select:focus-visible[b-p3id9ygq8h], .vh-filter input:focus-visible[b-p3id9ygq8h] { outline: 2px solid var(--vh-accent); outline-offset: 1px; }
.vh-saveto[b-p3id9ygq8h] { margin: 0; font-size: 12px; color: var(--vh-text-sub); }
.vh-cam-btnrow[b-p3id9ygq8h] { display: flex; gap: 8px; flex-wrap: wrap; }
.vh-thumbband[b-p3id9ygq8h] { display: flex; flex-direction: column; gap: 4px; }
.vh-thumbs[b-p3id9ygq8h] { display: flex; gap: 6px; }
.vh-thumbs img[b-p3id9ygq8h] { width: 84px; height: 62px; object-fit: cover; border: 1px solid var(--vh-border); border-radius: 4px; background: var(--vh-preview); }

/* ── inspection review (image-first: list + detail, disposition bar on top) ── */
.vh-review[b-p3id9ygq8h] { display: grid; grid-template-columns: minmax(300px, 5fr) minmax(340px, 6fr); gap: 14px; align-items: start; }
.vh-evlist[b-p3id9ygq8h] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 640px; overflow-y: auto; }
.vh-evrow[b-p3id9ygq8h] {
    width: 100%; display: flex; gap: 12px; align-items: center; text-align: left;
    min-height: 48px; padding: 7px 12px; border-radius: 6px;
    background: var(--vh-surface); border: 1px solid var(--vh-border);
    border-left-width: 4px; color: var(--vh-text); font-size: 12.5px; cursor: pointer;
}
.vh-evrow-fail[b-p3id9ygq8h] { border-left-color: var(--vh-fail); }
.vh-evrow-pass[b-p3id9ygq8h] { border-left-color: var(--vh-pass); }
.vh-evrow-on[b-p3id9ygq8h] { background: var(--vh-surface-2); border-color: var(--vh-accent); border-left-width: 4px; }
.vh-evrow:focus-visible[b-p3id9ygq8h] { outline: 2px solid var(--vh-accent); outline-offset: 2px; }
.vh-evtime[b-p3id9ygq8h] { flex: none; color: var(--vh-text-sub); }
.vh-evmain[b-p3id9ygq8h] { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-right: auto; }
.vh-evmain strong[b-p3id9ygq8h] { font-weight: 650; }
.vh-evsub[b-p3id9ygq8h] { color: var(--vh-text-sub); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vh-evempty[b-p3id9ygq8h] { padding: 12px; }
.vh-evdetail[b-p3id9ygq8h] { background: var(--vh-surface); border: 1px solid var(--vh-border); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.vh-evdetail-head[b-p3id9ygq8h] { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.vh-evtitle[b-p3id9ygq8h] { font-size: 16px; }
.vh-evtiming[b-p3id9ygq8h] { margin-left: auto; color: var(--vh-text-sub); font-size: 12px; }
.vh-kind[b-p3id9ygq8h] {
    display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px;
    border-radius: 4px; border: 1px solid var(--vh-border); background: var(--vh-surface-2);
    font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
}
.vh-dispo[b-p3id9ygq8h] {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    padding: 8px 10px; border: 1px solid var(--vh-border); border-radius: 8px;
    background: var(--vh-surface-2);
}
.vh-dispo-state[b-p3id9ygq8h] { display: flex; flex-direction: column; gap: 2px; margin-right: 6px; }
.vh-dispo-nav[b-p3id9ygq8h] { margin-left: auto; display: flex; gap: 6px; }
.vh-neutral[b-p3id9ygq8h] { background: var(--vh-elevated); color: var(--vh-text); }
.vh-bbox-label-warn[b-p3id9ygq8h] { background: rgba(122, 77, 0, 0.92); }
.vh-evactions[b-p3id9ygq8h] { display: flex; gap: 8px; }
.vh-clip[b-p3id9ygq8h] { display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--vh-border); border-radius: 6px; background: var(--vh-preview); }
.vh-evmeta[b-p3id9ygq8h] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 0; }
.vh-evmeta div[b-p3id9ygq8h] { display: flex; flex-direction: column; }
.vh-evmeta dd[b-p3id9ygq8h] { margin: 0; font-size: 12.5px; }
.vh-evmeta-wide[b-p3id9ygq8h] { grid-column: 1 / -1; }

/* ── worker + settings ── */
.vh-workergrid[b-p3id9ygq8h] { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.vh-panel[b-p3id9ygq8h] { background: var(--vh-surface); border: 1px solid var(--vh-border); border-radius: 8px; padding: 14px; }
.vh-panel h3[b-p3id9ygq8h] { margin: 0 0 8px; font-size: 15px; }
.vh-checklist[b-p3id9ygq8h] { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vh-checklist li[b-p3id9ygq8h] { display: flex; gap: 8px; align-items: center; font-size: 12.5px; }
.vh-siglog[b-p3id9ygq8h] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.vh-siglog li[b-p3id9ygq8h] { display: flex; gap: 10px; flex-wrap: wrap; }
.vh-siglog li span:last-child[b-p3id9ygq8h] { color: var(--vh-text-sub); }
.vh-credtable[b-p3id9ygq8h] { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.vh-credtable th[b-p3id9ygq8h], .vh-credtable td[b-p3id9ygq8h] { text-align: left; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--vh-border); }

/* ── fullscreen operator view ── */
.vh-full[b-p3id9ygq8h] {
    position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column;
    background: var(--vh-bg); padding: 12px 16px; gap: 10px;
}
.vh-full-top[b-p3id9ygq8h] { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.vh-full-top strong[b-p3id9ygq8h] { font-size: 17px; }
.vh-full-clock[b-p3id9ygq8h] { margin-left: auto; font-size: 16px; }
.vh-full-verdict[b-p3id9ygq8h] {
    display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
    border-radius: 10px; padding: 10px 22px;
}
.vh-full-pass[b-p3id9ygq8h] { background: var(--vh-pass); color: #ffffff; }
.vh-full-fail[b-p3id9ygq8h] { background: var(--vh-fail); color: #ffffff; }
.vh-full-word[b-p3id9ygq8h] { font-size: 48px; font-weight: 900; letter-spacing: 4px; line-height: 1; }
.vh-full-sub[b-p3id9ygq8h] { font-size: 16px; font-weight: 600; }
.vh-full-yield[b-p3id9ygq8h] { margin-left: auto; font-size: 18px; font-weight: 700; }
.vh-full-body[b-p3id9ygq8h] { display: grid; grid-template-columns: minmax(0, 7fr) minmax(260px, 3fr); gap: 14px; flex: 1 1 auto; min-height: 0; }
.vh-full-preview img[b-p3id9ygq8h] { aspect-ratio: 16 / 9; }
.vh-full-side[b-p3id9ygq8h] { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.vh-full-side section h3[b-p3id9ygq8h] { margin: 0 0 4px; }
.vh-full-side section p[b-p3id9ygq8h] { margin: 0; font-size: 12.5px; }
.vh-classdist[b-p3id9ygq8h] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.vh-classdist li[b-p3id9ygq8h] { display: flex; gap: 8px; align-items: center; }
.vh-classdist li span:first-child[b-p3id9ygq8h] { flex: 0 0 100px; }
.vh-classbar[b-p3id9ygq8h] { display: inline-block; height: 8px; width: var(--w, 10px); background: var(--vh-accent); border-radius: 3px; }
.vh-full-foot[b-p3id9ygq8h] {
    display: flex; gap: 18px; flex-wrap: wrap; font-size: 11.5px; color: var(--vh-text-sub);
    border-top: 1px solid var(--vh-border); padding-top: 8px;
}

/* ── toasts (bottom-right, 380px cards per the Avalonia shell) ── */
.vh-toasts[b-p3id9ygq8h] { position: absolute; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 8px; z-index: 40; max-width: 380px; }
.vh-toast[b-p3id9ygq8h] {
    background: var(--vh-elevated); color: var(--vh-text);
    border: 1px solid var(--vh-border); border-left: 4px solid var(--vh-accent);
    border-radius: 8px; padding: 10px 14px; font-size: 12.5px;
    box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.6);
}

/* ── responsive ── */
@media (max-width: 900px) {
    .vh-rail[b-p3id9ygq8h] { width: 200px; }
    .vh-review[b-p3id9ygq8h] { grid-template-columns: 1fr; }
    .vh-full-body[b-p3id9ygq8h] { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .vh-frame[b-p3id9ygq8h] { flex-direction: column; }
    .vh-rail[b-p3id9ygq8h] { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; border-right: 0; border-bottom: 1px solid var(--vh-border); padding: 10px 12px; }
    .vh-brand[b-p3id9ygq8h] { margin-bottom: 0; }
    .vh-nav[b-p3id9ygq8h] { flex-direction: row; flex-wrap: wrap; }
    .vh-nav .vh-micro[b-p3id9ygq8h] { display: none; }
    .vh-rail-foot[b-p3id9ygq8h] { margin-top: 0; margin-left: auto; border-top: 0; padding-top: 0; }
    .vh-camgrid[b-p3id9ygq8h] { grid-template-columns: 1fr; }
    .vh-full-word[b-p3id9ygq8h] { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
    .vh-root *[b-p3id9ygq8h] { transition: none !important; animation: none !important; }
}