/**
 * Console layout contract (PM GENERAL #268) — loaded only on /console/ paths.
 *
 * ONE gutter for every console page. The pages themselves are shells (full
 * width, no side padding of their own — normalized 2026-07-30); this file
 * owns the horizontal rhythm, so changing the platform gutter is a one-line
 * edit here, never a page-by-page Elementor pass.
 */

:root {
    /* The one console gutter. The value is the platform's established
       "nx-console-shell" standard (git-dashboard, the management consoles,
       notifications, …) — every console shell now references this token, so
       changing the platform's horizontal rhythm is THIS line. */
    --nx-console-gutter: clamp(18px, 2.5vw, 42px);
    /* The one console TOP gap — the vertical sibling of the gutter. Every
       console shell's first painted content sits this far below the header,
       so the header-to-content rhythm is identical on every /console/ page.
       Before this token each plugin picked its own value (0/16/18/22/24/28px
       observed), which read as broken on the small ones. Changing the
       platform's vertical rhythm is THIS line. */
    --nx-console-block-gap: clamp(24px, 3.2vh, 40px);
    /* Shared desktop rail clearance. The global navigation occupies the first
       80px of the viewport and the rail rests another 16px below it. The
       computed sticky offset is declared on body.nxt-console so a visible
       WordPress admin bar can participate too. */
    --nx-console-menu-reserve: 80px;
    --nx-console-sticky-rail-gap: 16px;
    --nx-console-sticky-rail-bottom-gap: 16px;
    /* Shared console type floor. Feature plugins keep their hierarchy and may
       size headings independently, but operational copy must compose this
       scale instead of returning to unreadable 8–10px helper text. */
    --nx-console-text-base: var(--nx-type-base, 15px);
    --nx-console-text-control: var(--nx-type-control, 14px);
    --nx-console-text-action: var(--nx-type-action, 13px);
    --nx-console-text-supporting: var(--nx-type-supporting, 12px);
    --nx-console-text-eyebrow: var(--nx-type-eyebrow, 11px);
}

body.nxt-console {
    --nx-console-admin-bar-reserve: 0px;
    --nx-console-sticky-rail-offset: calc(
        var(--nx-console-menu-reserve) +
        var(--nx-console-sticky-rail-gap) +
        var(--nx-console-admin-bar-reserve)
    );
}

body.admin-bar.nxt-console {
    --nx-console-admin-bar-reserve: var(--wp-admin--admin-bar--height, 32px);
}

/* Root-level Elementor flex containers: un-box and share the gutter.
   !important is deliberate — it must beat both the Elementor kit's default
   container padding and any stray per-page padding that reappears. */
body.nxt-console [data-elementor-type="wp-page"] > .e-con {
    --content-width: 100%;
    max-width: 100%;
    padding-left: var(--nx-console-gutter) !important;
    padding-right: var(--nx-console-gutter) !important;
}

/* Legacy section-based pages: same treatment. */
body.nxt-console [data-elementor-type="wp-page"] > .elementor-section {
    padding-left: var(--nx-console-gutter) !important;
    padding-right: var(--nx-console-gutter) !important;
}

/* Elementor v4 atomic flexbox roots (e.g. pm-backlog's second root) — data
   shape differs from .e-con, so the contract is enforced purely here. */
body.nxt-console [data-elementor-type="wp-page"] > .e-flexbox {
    max-width: 100%;
    padding-left: var(--nx-console-gutter) !important;
    padding-right: var(--nx-console-gutter) !important;
}

body.nxt-console [data-elementor-type="wp-page"] > .elementor-section > .elementor-container {
    max-width: 100%;
}

/* A page shell that OWNS the console gutter (the participant dashboards'
   full-width templates) declares data-nx-owns-gutter; the Elementor root
   containers inside it stand down, or an Elementor-built dashboard page
   would stack the container gutter on top of the shell gutter. */
body.nxt-console [data-nx-owns-gutter] [data-elementor-type="wp-page"] > .e-con,
body.nxt-console [data-nx-owns-gutter] [data-elementor-type="wp-page"] > .e-flexbox,
body.nxt-console [data-nx-owns-gutter] [data-elementor-type="wp-page"] > .elementor-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Recorded opt-out for consoles that are genuinely edge-to-edge (Broadcast
   Studio). Put `nxt-console-fullbleed` in the root container's CSS Classes. */
body.nxt-console [data-elementor-type="wp-page"] > .e-con.nxt-console-fullbleed,
body.nxt-console [data-elementor-type="wp-page"] > .elementor-section.nxt-console-fullbleed,
body.nxt-console [data-elementor-type="wp-page"] > .e-flexbox.nxt-console-fullbleed {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ==========================================================================
   .nx-console-shell — the ONE console shell (design-system.md §4, PM #271).
   Breakout + gutter + transparency in a single shared class; a console adds
   its own prefixed class alongside for internal styling:
       <div class="nx-console-shell nxfoo-shell">
   Replaces the copy-pasted "nx-console-shell" comment-pattern the twelve
   newest consoles each carried locally.
   ========================================================================== */
body.nxt-console .nx-console-shell {
    box-sizing: border-box;
    width: auto;
    max-width: none;
    /* Full-bleed breakout from the theme's content column. Not 100vw — that
       counts the vertical scrollbar and causes a stray horizontal scrollbar. */
    margin-inline: calc(50% - 50vw);
    padding-inline: var(--nx-console-gutter);
    padding-block-start: var(--nx-console-block-gap);
    min-height: 70vh;
    /* The body paints the console background (Technical Grid by default);
       the shell must never hide it. */
    background: transparent;
    color: var(--nx-text, #dbeafe);
}

/* Console-owned link floor. Hello Elementor's reset is queued before this
   stylesheet on /console/ requests and carries a:hover { color: #336; }.
   Keeping the anchor inside :where() makes the resting selector equivalent to
   one class; moving the interaction state outside makes it strong enough to
   beat the reset while a feature's later .component-link:hover rule still
   wins. There is deliberately no :visited rule: application navigation keeps
   its normal color after use. */
.nx-console-shell :where(a) {
    color: var(--nx-link, var(--nx-cyan, #22d3ee));
}

.nx-console-shell :where(a):is(:hover, :focus-visible, :active) {
    color: var(--nx-link-hover, var(--nx-text, #f8fafc));
}

.nx-console-shell :where(a):focus-visible {
    outline: 2px solid var(--nx-cyan, #22d3ee);
    outline-offset: 2px;
}

body.nxt-console .nx-console-shell *,
body.nxt-console .nx-console-shell *::before,
body.nxt-console .nx-console-shell *::after {
    box-sizing: border-box;
}

/* Hello Elementor's theme reset supplies a pink (#CC3366) hover/focus fill
   for otherwise unstyled native buttons. Console feature controls such as tabs and
   disclosure triggers often intentionally use a transparent resting state;
   without a console-owned fallback they inherit that marketing-page hover.

   Keep this selector deliberately low-specificity around the control itself:
   a feature's own scoped hover/focus rule wins, while an unowned control uses
   the shared console surface. Standard and destructive actions already have
   explicit contracts and are therefore excluded. */
body.nxt-console .nx-console-shell :where(
    button:not(.nx-btn):not(.is-danger):not([data-nx-danger]):hover,
    button:not(.nx-btn):not(.is-danger):not([data-nx-danger]):focus,
    button:not(.nx-btn):not(.is-danger):not([data-nx-danger]):focus-visible
) {
    background-color: var(--nx-panel-soft);
    color: var(--nx-text);
}

body.nxt-console .nx-console-shell :where(
    button:not(.nx-btn):not(.is-danger):not([data-nx-danger]):focus-visible
) {
    outline: 2px solid var(--nx-cyan);
    outline-offset: 2px;
}

/* ==========================================================================
   .nx-console-rail-workspace + .nx-console-sticky-rail — shared desktop
   sticky-position contract.

   Feature plugins continue to own rail width, surface, contents and responsive
   presentation. The workspace supplies enough vertical runway for a rail to
   reach its sticky resting point even when the selected panel is short; the
   rail class owns the cross-console offset and sticking behaviour.
   ========================================================================== */
body.nxt-console .nx-console-rail-workspace {
    align-items: start;
    min-height: calc(100vh - var(--nx-console-sticky-rail-offset));
    min-height: calc(100dvh - var(--nx-console-sticky-rail-offset));
    overflow: visible;
}

body.nxt-console .nx-console-sticky-rail {
    position: sticky !important;
    top: var(--nx-console-sticky-rail-offset);
    align-self: start;
    height: max-content;
    max-height: calc(
        100vh -
        var(--nx-console-sticky-rail-offset) -
        var(--nx-console-sticky-rail-bottom-gap)
    );
    max-height: calc(
        100dvh -
        var(--nx-console-sticky-rail-offset) -
        var(--nx-console-sticky-rail-bottom-gap)
    );
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

/* --------------------------------------------------------------------------
   Shared navigation-rail appearance.

   Sticky rails are also used for auxiliary status cards, so appearance cannot
   safely hang from .nx-console-sticky-rail alone. A rail is navigation when it
   is itself a <nav>, carries an accessible navigation label, contains a direct
   <nav>, or explicitly opts in with .nx-console-nav-rail. This keeps legacy
   right-side tool/status rails out of the visual contract while allowing old
   console markup to converge without a page-builder or database migration.
   -------------------------------------------------------------------------- */
body.nxt-console :is(
    nav.nx-console-sticky-rail,
    .nx-console-sticky-rail[aria-label],
    .nx-console-sticky-rail:has(> nav),
    .nx-console-nav-rail
) {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--nx-border, #243a56);
    border-radius: var(--nx-border-radius, 12px);
    background: color-mix(in srgb, var(--nx-panel, #0b1a30) 96%, transparent);
    box-shadow: 0 18px 50px rgb(0 0 0 / 14%);
}

/* All semantic navigation rows share the approved Access Control interaction
   state. Geometry remains feature-owned unless the row has the common numbered
   structure handled below. */
body.nxt-console :is(
    nav.nx-console-sticky-rail,
    .nx-console-sticky-rail[aria-label],
    .nx-console-sticky-rail:has(> nav),
    .nx-console-nav-rail
) > :is(a, button, .is-disabled):not(.nx-btn),
body.nxt-console :is(
    nav.nx-console-sticky-rail,
    .nx-console-sticky-rail[aria-label],
    .nx-console-sticky-rail:has(> nav),
    .nx-console-nav-rail
) > nav > :is(a, button, .is-disabled):not(.nx-btn) {
    border-color: transparent;
    border-radius: 9px;
    color: var(--nx-text-muted, var(--nx-text-soft, #91a2b8));
    background: transparent;
    text-decoration: none;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

body.nxt-console :is(
    nav.nx-console-sticky-rail,
    .nx-console-sticky-rail[aria-label],
    .nx-console-sticky-rail:has(> nav),
    .nx-console-nav-rail
) > :is(a, button):not(.nx-btn, .is-disabled, [aria-disabled="true"]):is(:hover, :focus-visible),
body.nxt-console :is(
    nav.nx-console-sticky-rail,
    .nx-console-sticky-rail[aria-label],
    .nx-console-sticky-rail:has(> nav),
    .nx-console-nav-rail
) > nav > :is(a, button):not(.nx-btn, .is-disabled, [aria-disabled="true"]):is(:hover, :focus-visible) {
    border-color: var(--nx-border, #243a56);
    color: var(--nx-text, #f8fafc);
    background: rgb(255 255 255 / 2.5%);
}

body.nxt-console :is(
    nav.nx-console-sticky-rail,
    .nx-console-sticky-rail[aria-label],
    .nx-console-sticky-rail:has(> nav),
    .nx-console-nav-rail
) > :is(a, button):not(.nx-btn):is(.is-active, [aria-current="page"], [aria-selected="true"], [aria-pressed="true"]),
body.nxt-console :is(
    nav.nx-console-sticky-rail,
    .nx-console-sticky-rail[aria-label],
    .nx-console-sticky-rail:has(> nav),
    .nx-console-nav-rail
) > nav > :is(a, button):not(.nx-btn):is(.is-active, [aria-current="page"], [aria-selected="true"], [aria-pressed="true"]) {
    border-color: var(--nx-cyan, #22d3ee);
    color: var(--nx-text, #f8fafc);
    background: color-mix(
        in srgb,
        var(--nx-cyan, #22d3ee) 9%,
        var(--nx-panel-soft, #0b1625)
    );
}

/* Numbered navigation rows use one collision-safe grid whether their label and
   helper copy are flat siblings or grouped in a wrapper. Non-numbered filter
   rails keep their local geometry. */
body.nxt-console :is(
    nav.nx-console-sticky-rail,
    .nx-console-sticky-rail[aria-label],
    .nx-console-sticky-rail:has(> nav),
    .nx-console-nav-rail
) > :is(a, button, .is-disabled):not(.nx-btn):is(
    .nx-console-rail-item,
    :has(> :first-child + strong),
    :has(> :first-child + span > strong)
),
body.nxt-console :is(
    nav.nx-console-sticky-rail,
    .nx-console-sticky-rail[aria-label],
    .nx-console-sticky-rail:has(> nav),
    .nx-console-nav-rail
) > nav > :is(a, button, .is-disabled):not(.nx-btn):is(
    .nx-console-rail-item,
    :has(> :first-child + strong),
    :has(> :first-child + span > strong)
) {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 10px;
    width: 100%;
    min-height: 56px;
    margin: 4px 0;
    padding: 10px;
    text-align: left;
}

body.nxt-console :is(
    nav.nx-console-sticky-rail,
    .nx-console-sticky-rail[aria-label],
    .nx-console-sticky-rail:has(> nav),
    .nx-console-nav-rail
) :is(a, button, .is-disabled):not(.nx-btn):is(
    .nx-console-rail-item,
    :has(> :first-child + strong),
    :has(> :first-child + span > strong)
) > :first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--nx-border, #243a56);
    border-radius: 8px;
    color: var(--nx-cyan, #22d3ee);
    font-size: var(--nx-console-text-eyebrow, 11px);
    font-weight: 850;
}

body.nxt-console :is(
    nav.nx-console-sticky-rail,
    .nx-console-sticky-rail[aria-label],
    .nx-console-sticky-rail:has(> nav),
    .nx-console-nav-rail
) :is(a, button):not(.nx-btn):is(.is-active, [aria-current="page"], [aria-selected="true"], [aria-pressed="true"]):is(
    .nx-console-rail-item,
    :has(> :first-child + strong),
    :has(> :first-child + span > strong)
) > :first-child {
    border-color: var(--nx-cyan, #22d3ee);
    color: var(--nx-btn-text, #04111f);
    background: var(--nx-cyan, #22d3ee);
}

/* Shared rail-row geometry and default typography. Canonical labels use the
   Console action/supporting scale unless a feature deliberately supplies a
   more specific hierarchy; the grid guarantees that an index, a long label
   and an optional count can never paint over one another. */
body.nxt-console .nx-console-rail-item {
    display: grid;
    grid-template-columns:
        var(--nx-console-rail-index-width, 34px)
        minmax(0, 1fr)
        minmax(var(--nx-console-rail-count-width, 24px), max-content);
    align-items: center;
    column-gap: var(--nx-console-rail-column-gap, 10px);
}

body.nxt-console .nx-console-rail-index {
    grid-column: 1;
}

body.nxt-console .nx-console-rail-label {
    grid-column: 2;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

body.nxt-console .nx-console-rail-count {
    grid-column: 3;
    min-width: var(--nx-console-rail-count-width, 24px);
    justify-self: end;
    white-space: nowrap;
}

/* Optional really means optional: do not reserve a badge/count track when a
   canonical rail row has only its index and label. */
body.nxt-console .nx-console-rail-item:not(:has(> .nx-console-rail-count)) {
    grid-template-columns:
        var(--nx-console-rail-index-width, 34px)
        minmax(0, 1fr);
}

body.nxt-console .nx-console-rail-label > :is(strong, small) {
    display: block;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

body.nxt-console :where(.nx-console-rail-label > strong) {
    font-size: var(--nx-console-text-action, 13px);
    line-height: 1.25;
}

body.nxt-console :where(.nx-console-rail-label > small) {
    font-size: var(--nx-console-text-supporting, 12px);
    line-height: 1.35;
}

/* Legacy numbered rails remain supported while their markup converges on the
   explicit classes above. A wrapped label occupies column two; a trailing
   status/count occupies column three only when it actually exists. */
body.nxt-console :is(
    nav.nx-console-sticky-rail,
    .nx-console-sticky-rail[aria-label],
    .nx-console-sticky-rail:has(> nav),
    .nx-console-nav-rail
) :is(a, button, .is-disabled):not(.nx-btn):has(> :first-child + span > strong):not(:has(> :first-child + span + *)) {
    grid-template-columns: 34px minmax(0, 1fr);
}

body.nxt-console :is(
    nav.nx-console-sticky-rail,
    .nx-console-sticky-rail[aria-label],
    .nx-console-sticky-rail:has(> nav),
    .nx-console-nav-rail
) :is(a, button, .is-disabled):not(.nx-btn):has(> :first-child + span > strong) > :first-child + span {
    grid-column: 2;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

body.nxt-console :is(
    nav.nx-console-sticky-rail,
    .nx-console-sticky-rail[aria-label],
    .nx-console-sticky-rail:has(> nav),
    .nx-console-nav-rail
) :is(a, button, .is-disabled):not(.nx-btn):has(> :first-child + span > strong) > :first-child + span > :is(strong, small) {
    display: block;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

body.nxt-console :is(
    nav.nx-console-sticky-rail,
    .nx-console-sticky-rail[aria-label],
    .nx-console-sticky-rail:has(> nav),
    .nx-console-nav-rail
) :is(a, button, .is-disabled):not(.nx-btn):has(> :first-child + span > strong) > :first-child + span + * {
    grid-column: 3;
    justify-self: end;
    white-space: nowrap;
}

/* Flat legacy rows use direct index/label/description siblings. Their helper
   text belongs beneath the label, never in the optional count column. */
body.nxt-console :is(
    nav.nx-console-sticky-rail,
    .nx-console-sticky-rail[aria-label],
    .nx-console-sticky-rail:has(> nav),
    .nx-console-nav-rail
) :is(a, button, .is-disabled):not(.nx-btn):has(> :first-child + strong) {
    grid-template-columns: 34px minmax(0, 1fr);
}

body.nxt-console :is(
    nav.nx-console-sticky-rail,
    .nx-console-sticky-rail[aria-label],
    .nx-console-sticky-rail:has(> nav),
    .nx-console-nav-rail
) :is(a, button, .is-disabled):not(.nx-btn):has(> :first-child + strong):has(> strong ~ :not(small)) {
    grid-template-columns: 34px minmax(0, 1fr) auto;
}

body.nxt-console :is(
    nav.nx-console-sticky-rail,
    .nx-console-sticky-rail[aria-label],
    .nx-console-sticky-rail:has(> nav),
    .nx-console-nav-rail
) :is(a, button, .is-disabled):not(.nx-btn):has(> :first-child + strong) > strong {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

body.nxt-console :is(
    nav.nx-console-sticky-rail,
    .nx-console-sticky-rail[aria-label],
    .nx-console-sticky-rail:has(> nav),
    .nx-console-nav-rail
) :is(a, button, .is-disabled):not(.nx-btn):has(> :first-child + strong) > small {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

body.nxt-console :is(
    nav.nx-console-sticky-rail,
    .nx-console-sticky-rail[aria-label],
    .nx-console-sticky-rail:has(> nav),
    .nx-console-nav-rail
) :is(a, button, .is-disabled):not(.nx-btn):has(> :first-child + strong) > strong ~ :not(small) {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
    white-space: nowrap;
}

@media (max-width: 900px) {
    body.nxt-console .nx-console-rail-workspace {
        min-height: 0;
    }

    body.nxt-console .nx-console-sticky-rail {
        position: static !important;
        height: auto;
        max-height: none;
        overflow-y: visible;
        overscroll-behavior: auto;
        scrollbar-gutter: auto;
    }
}

/* ==========================================================================
   .nx-btn — the ONE console action control (design-system.md §3/§4).

   This is the baseline for links and native buttons alike. Feature plugins
   may compose layout around it or deliberately override it later in their own
   bundle, but a new console must never fall through to the active theme's
   button colors simply because it has no private copy of this contract.
   ========================================================================== */
body.nxt-console .nx-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 9px 15px;
    border: 1px solid var(--nx-border);
    border-radius: calc(var(--nx-border-radius) - 3px);
    background: var(--nx-panel-soft);
    color: var(--nx-text);
    font-family: var(--nx-font-family);
    font-size: var(--nx-console-text-action);
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .16s ease, filter .16s ease, border-color .16s ease, background-color .16s ease;
}

body.nxt-console .nx-btn:hover:not(:disabled),
body.nxt-console .nx-btn:focus-visible:not(:disabled) {
    border-color: var(--nx-cyan);
    color: var(--nx-text);
    filter: brightness(1.08);
    text-decoration: none;
}

body.nxt-console .nx-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

body.nxt-console .nx-btn:focus-visible {
    outline: 2px solid var(--nx-cyan);
    outline-offset: 2px;
}

body.nxt-console .nx-btn.is-primary {
    border-color: transparent;
    background: linear-gradient(135deg, var(--nx-cyan), var(--nx-sky));
    color: var(--nx-btn-text);
}

body.nxt-console .nx-btn.is-primary:hover:not(:disabled),
body.nxt-console .nx-btn.is-primary:focus-visible:not(:disabled) {
    border-color: transparent;
    color: var(--nx-btn-text);
}

body.nxt-console .nx-btn.is-danger {
    border-color: var(--nx-danger-surface-border);
    background: var(--nx-danger-surface);
    color: var(--nx-rose-soft);
}

body.nxt-console .nx-btn:disabled,
body.nxt-console .nx-btn[aria-disabled="true"] {
    opacity: .48;
    cursor: not-allowed;
    transform: none;
    filter: none;
}

/* ==========================================================================
   .nx-badge — the ONE status badge (design-system.md §3/§4, PM #271).
   Tokens only: a console composes these states instead of defining its own
   badge class, so a wrong color cannot be invented locally again.
   ========================================================================== */
.nx-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.nx-badge.is-active,
.nx-badge.is-approved {
    background: color-mix(in srgb, var(--nx-emerald, #10b981) 12%, transparent);
    border-color: color-mix(in srgb, var(--nx-emerald, #10b981) 40%, transparent);
    color: var(--nx-emerald, #79e8bd);
}

.nx-badge.is-pending,
.nx-badge.is-warning {
    background: color-mix(in srgb, var(--nx-amber, #f59e0b) 12%, transparent);
    border-color: color-mix(in srgb, var(--nx-amber, #f59e0b) 40%, transparent);
    color: var(--nx-amber, #f6ca73);
}

.nx-badge.is-rejected,
.nx-badge.is-inactive {
    background: color-mix(in srgb, var(--nx-rose, #f43f5e) 12%, transparent);
    border-color: color-mix(in srgb, var(--nx-rose, #f43f5e) 40%, transparent);
    color: var(--nx-rose, #fda4b4);
}

.nx-badge.is-neutral {
    background: color-mix(in srgb, var(--nx-text-soft, #94a3b8) 12%, transparent);
    border-color: color-mix(in srgb, var(--nx-text-soft, #94a3b8) 35%, transparent);
    color: var(--nx-text-soft, #cbd5e1);
}