/* Event Services production surface (mw-es-*) — the Anschluss integration on /entitlements:
   KPI card, slide-over drawer, Anschluss swap pane (connection card · currency mapping list ·
   ticket wire fields) and the patchbay dialog. Styled on MudBlazor palette variables so both
   themes work; the surface language follows the entitlements command-center (corner-glow cards,
   tail corners, mono meta). The combined symbol+color picker (mw-scp-* / mw-scpd-*) lives in
   mw-symbol-color-picker.css. */

/* ── shared atoms ─────────────────────────────────────────────────────────── */

.mw-es-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1.5px 8px 2.5px;
    border-radius: 6px;
    border-bottom-left-radius: 2px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid color-mix(in srgb, var(--c, var(--mud-palette-text-secondary)) 45%, transparent);
    color: color-mix(in srgb, var(--c, var(--mud-palette-text-secondary)) 70%, var(--mud-palette-text-primary));
    background: color-mix(in srgb, var(--c, var(--mud-palette-text-secondary)) 8%, transparent);
}

.mw-es-pill--ok { --c: var(--mud-palette-success); }

.mw-es-pill--warn { --c: var(--mud-palette-warning); }

.mw-es-pill--off {
    --c: var(--mud-palette-text-secondary);
    border-style: dashed;
}

.mw-es-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px 3px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid color-mix(in srgb, var(--c, var(--mud-palette-text-secondary)) 40%, transparent);
    color: color-mix(in srgb, var(--c, var(--mud-palette-text-secondary)) 70%, var(--mud-palette-text-primary));
    background: color-mix(in srgb, var(--c, var(--mud-palette-text-secondary)) 8%, transparent);
}

.mw-es-meta {
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
}

.mw-es-note {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.mw-es-dormant {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px 5px;
    border-radius: 8px;
    border: 1px dashed var(--mud-palette-lines-inputs);
    color: var(--mud-palette-text-secondary);
    font-size: 11px;
    font-style: italic;
}

.mw-es-kv {
    display: flex;
    gap: 7px;
    align-items: baseline;
    font-size: 11.5px;
    min-width: 0;
}

.mw-es-kv-k {
    color: var(--mud-palette-text-secondary);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mw-es-kv-v {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mw-es-wirebox {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    padding: 8px 12px;
    border-radius: 9px;
    border-bottom-left-radius: 3px;
    border: 1px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11.5px;
}

.mw-es-wirebox--muted { opacity: 0.65; }

.mw-es-wirebox--warn {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 45%, transparent);
    color: var(--mud-palette-warning);
}

.mw-es-arrow { color: var(--mud-palette-text-secondary); }

.mw-es-wirekey { color: var(--mud-palette-tertiary); }

/* ── dialog shared bits ───────────────────────────────────────────────────── */

.mw-es-dlg-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}

.mw-es-dlg-tile {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border-bottom-left-radius: 3px;
    display: grid;
    place-items: center;
    flex: none;
    color: var(--c, var(--mud-palette-text-secondary));
    background: color-mix(in srgb, var(--c, var(--mud-palette-text-secondary)) 12%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--c, var(--mud-palette-text-secondary)) 30%, transparent);
}

.mw-es-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: min(520px, 86vw);
}

.mw-es-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: end;
}

.mw-es-pickrow {
    display: flex;
    align-items: center;
    gap: 11px;
}

.mw-es-field-label {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
}

/* ── connection card ──────────────────────────────────────────────────────── */

.mw-es-conncard {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 13px 18px;
    border-radius: 14px;
    border-top-left-radius: 4px;
    border: 1.5px solid transparent;
    background:
        linear-gradient(var(--mud-palette-surface), var(--mud-palette-surface)) padding-box,
        radial-gradient(135% 125% at 0% 100%,
            color-mix(in srgb, var(--mud-palette-tertiary) 80%, transparent) 0%,
            color-mix(in srgb, var(--mud-palette-tertiary) 45%, transparent) 40%,
            transparent 72%) border-box,
        linear-gradient(var(--mud-palette-lines-default), var(--mud-palette-lines-default)) border-box;
    box-shadow: -3px 2px 9px -8px color-mix(in srgb, var(--mud-palette-tertiary) 65%, transparent);
}

.mw-es-conncard--compact {
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
}

.mw-es-conncard--compact .mw-es-connfields {
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.mw-es-conncard--compact .mw-es-connactions { margin-left: 0; }

.mw-es-provlogo {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    border-bottom-left-radius: 4px;
    flex: none;
    display: grid;
    place-items: center;
    font-size: 16px;
    font-weight: 800;
    color: var(--mud-palette-tertiary);
    background: color-mix(in srgb, var(--mud-palette-tertiary) 13%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--mud-palette-tertiary) 32%, transparent);
}

.mw-es-provlogo--small {
    width: 28px;
    height: 28px;
    font-size: 13px;
    border-radius: 9px;
    border-bottom-left-radius: 3px;
}

.mw-es-connmain {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.mw-es-connname {
    display: flex;
    gap: 9px;
    align-items: center;
    font-size: 16px;
    font-weight: 750;
}

.mw-es-connfields {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-left: auto;
    align-items: center;
    min-width: 0;
}

.mw-es-connactions {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── currency mapping list ────────────────────────────────────────────────── */

.mw-es-curlist {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

.mw-es-curhead,
.mw-es-currow {
    display: grid;
    grid-template-columns: 26px 250px 1fr 300px 140px;
    gap: 0 14px;
    align-items: center;
    padding: 0 14px;
}

.mw-es-curlist--compact .mw-es-currow {
    grid-template-columns: 0 minmax(140px, 1fr) 0 minmax(150px, auto) auto;
    gap: 0 8px;
}

.mw-es-curlist--compact .mw-es-props { display: none; }

.mw-es-curhead {
    height: 38px;
    background: var(--mud-palette-background-gray);
    font-size: 10px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mw-es-currow {
    min-height: 56px;
    padding-top: 9px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    transition: background 0.15s ease;
    cursor: pointer;
}

.mw-es-curlist--compact .mw-es-currow { cursor: default; }

.mw-es-currow:hover { background: color-mix(in srgb, var(--mud-palette-text-primary) 2%, transparent); }

.mw-es-currow--expanded { background: color-mix(in srgb, var(--mud-palette-tertiary) 4%, transparent); }

.mw-es-chev {
    color: var(--mud-palette-text-secondary);
    transition: rotate 0.2s ease;
}

.mw-es-currow--expanded .mw-es-chev {
    rotate: 90deg;
    color: var(--mud-palette-tertiary);
}

.mw-es-curcell {
    display: flex;
    gap: 10px;
    align-items: center;
    min-width: 0;
}

.mw-es-curname {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mw-es-curname-main {
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-es-curname-sub {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 10px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.mw-es-props {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
}

.mw-es-mapcell {
    display: flex;
    align-items: center;
    min-width: 0;
}

.mw-es-mapsel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 7px;
    padding: 3px 9px 4px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background-gray);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease;
}

.mw-es-mapsel:hover { border-color: color-mix(in srgb, var(--mud-palette-tertiary) 50%, transparent); }

.mw-es-mapsel--unset {
    border-style: dashed;
    color: var(--mud-palette-text-secondary);
    font-family: inherit;
}

.mw-es-mapsel--unset:hover { color: var(--mud-palette-tertiary); }

.mw-es-mapsel-car {
    color: var(--mud-palette-text-secondary);
    font-size: 9px;
}

.mw-es-statuscell { display: flex; align-items: center; }

.mw-es-curdetail {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-start;
    flex-direction: column;
    padding: 12px 18px 14px 54px;
    background: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mw-es-detail-label {
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
}

.mw-es-curfoot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    background: var(--mud-palette-background-gray);
}

/* ── the MwDataGrid-based currency grid: child row = the editor ───────────── */

.mw-es-curgrid {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    border-top-left-radius: 4px;
    overflow: hidden;
    background: var(--mud-palette-surface);
    /* NOTE: Never let the pane's flex layout shrink the grid — the pane scrolls instead,
       and the grid shows EVERY currency at full height. */
    flex: 0 0 auto;
}

/* NOTE: Content-height grid: the embedded MwDataGrid must NOT stretch to a 100%-height scroll
   container here (its stylesheet default) — with height:auto the virtualizer renders all rows
   and the grid is exactly as tall as its currencies. */
.mw-es-curgrid .mw-dg-comp {
    height: auto;
}

/* NOTE: The pane stacks card + grid + strip at their natural heights and scrolls itself —
   without this, flex shrinking squeezed the grid instead of engaging the pane's scrollbar. */
.mw-es-pane > * {
    flex: 0 0 auto;
}

.mw-es-mapsel--readonly { cursor: default; }

/* compact stat cell (grid column) */
.mw-es-statcell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mw-es-statcell-amt {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mw-es-statcell-amt small {
    font-size: 9.5px;
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
    margin-left: 4px;
}

.mw-es-statline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mw-es-microbar {
    flex: 0 0 90px;
    height: 4px;
    border-radius: 3px;
    background: var(--mud-palette-lines-default);
    overflow: hidden;
}

.mw-es-microbar span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: color-mix(in srgb, var(--c, var(--mud-palette-tertiary)) 75%, transparent);
}

.mw-es-statcov {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 10px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* the child editor */
.mw-es-child {
    display: grid;
    grid-template-columns: minmax(300px, 1.1fr) minmax(280px, 1fr) minmax(250px, 0.9fr);
    gap: 16px 26px;
    padding: 16px 18px 14px 48px;
    background: var(--mud-palette-background-gray);
}

@media (max-width: 1100px) {
    .mw-es-child { grid-template-columns: 1fr; }
}

.mw-es-zone {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.mw-es-zonehead {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mud-palette-text-secondary);
}

.mw-es-keyrow {
    display: flex;
    align-items: end;
    gap: 7px;
}

.mw-es-keyrow .mw-es-keyinput { flex: 1; }

.mw-es-keyinput input {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
}

.mw-es-sugbtn {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    font-size: 10.5px !important;
    text-transform: none !important;
    white-space: nowrap;
}

/* full stat card (compensations-card echo) */
.mw-es-statfull {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 11px 13px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 11px;
    border-top-left-radius: 3px;
    background: var(--mud-palette-surface);
}

.mw-es-statfull-head {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.mw-es-statfull-total {
    margin-left: auto;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mw-es-statfull-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
}

.mw-es-statfull-row b {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-weight: 600;
    font-size: 11.5px;
    color: var(--mud-palette-text-primary);
}

.mw-es-statfull-bar {
    height: 5px;
    border-radius: 3px;
    background: var(--mud-palette-lines-default);
    overflow: hidden;
    margin-top: 3px;
}

.mw-es-statfull-bar span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: color-mix(in srgb, var(--c, var(--mud-palette-tertiary)) 75%, transparent);
}

/* child action bar */
.mw-es-childfoot {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--mud-palette-lines-default);
}

.mw-es-childfoot-spacer { flex: 1; }

.mw-es-autosave {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.mw-es-autosave-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mud-palette-success);
    box-shadow: 0 0 7px -1px var(--mud-palette-success);
}

/* ── ticket wire fields strip ─────────────────────────────────────────────── */

.mw-es-wirestrip {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 13px 18px 15px;
    border-radius: 14px;
    border-top-left-radius: 4px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.mw-es-wiretitle {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
}

.mw-es-budget {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    margin-left: 4px;
}

.mw-es-budget i {
    width: 14px;
    height: 5px;
    border-radius: 3px;
    background: var(--mud-palette-lines-default);
}

.mw-es-budget i.mw-es-budget-used { background: color-mix(in srgb, var(--mud-palette-tertiary) 75%, transparent); }

.mw-es-slotrow {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: stretch;
}

.mw-es-slot {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 128px;
    padding: 7px 11px 8px;
    border-radius: 10px;
    border-bottom-left-radius: 3px;
    border: 1px solid color-mix(in srgb, var(--c, var(--mud-palette-text-secondary)) 38%, transparent);
    background: color-mix(in srgb, var(--c, var(--mud-palette-text-secondary)) 6%, transparent);
}

.mw-es-slot-key {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    color: color-mix(in srgb, var(--c, var(--mud-palette-text-secondary)) 70%, var(--mud-palette-text-primary));
}

.mw-es-slot-src {
    font-size: 10px;
    color: var(--mud-palette-text-secondary);
}

.mw-es-slot--gap {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--mud-palette-warning) 45%, transparent);
    background: transparent;
    justify-content: center;
    align-items: center;
    color: var(--mud-palette-warning);
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease;
}

.mw-es-slot--gap:hover { background: color-mix(in srgb, var(--mud-palette-warning) 7%, transparent); }

.mw-es-slotdivider {
    width: 1px;
    background: var(--mud-palette-lines-default);
    margin: 2px 4px;
}

/* NOTE: The two rings of the wire surface — device DISPLAY vs wire-only — as visibly separate,
   labeled boxes (a thin divider alone did not communicate which is which). */
.mw-es-wiregroup {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 9px 12px 11px;
    border-radius: 11px;
    border-top-left-radius: 3px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
}

.mw-es-wiregroup--wireonly {
    border-style: dashed;
    background: transparent;
}

.mw-es-wiregroup-head {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.mw-es-wiregroup-icon {
    color: var(--mud-palette-text-secondary);
}

/* ── Anschluss pane composition ───────────────────────────────────────────── */

.mw-es-pane {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 2px 12px;
    overflow-y: auto;
    height: 100%;
}

/* ── KPI card (rides the mw-et-kpi base from entitlements.css) ────────────── */

.mw-et-kpi--svc { cursor: pointer; transition: transform 0.16s ease; }

.mw-et-kpi--svc:hover { transform: translateY(-1px); }

.mw-es-kpi-provline {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.mw-es-kpi-provname {
    font-size: 16px;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-es-kpi-gear {
    margin-left: auto;
    color: var(--mud-palette-text-secondary);
    transition: rotate 0.4s ease, color 0.2s ease;
}

.mw-et-kpi--svc:hover .mw-es-kpi-gear {
    rotate: 40deg;
    color: var(--mud-palette-tertiary);
}

/* ── slide-over drawer ────────────────────────────────────────────────────── */

/* NOTE: The drawer must sit BELOW MudBlazor's popover layer (z 1200) — the mapping menus and the
   symbol picker open MudPopovers from inside it — and below the app bar (z 1300), which is why it
   starts underneath the dense app bar instead of at the viewport top. Dialogs (z 1400) opened from
   the drawer stack above it either way. */

.mw-es-drawer-backdrop {
    position: fixed;
    inset: calc(var(--mud-appbar-height) * 0.75) 0 0 0;
    z-index: 1149;
    background: color-mix(in srgb, var(--mud-palette-overlay-dark) 55%, transparent);
    backdrop-filter: blur(1.5px);
}

.mw-es-drawer {
    position: fixed;
    top: calc(var(--mud-appbar-height) * 0.75);
    right: 0;
    bottom: 0;
    z-index: 1150;
    width: min(600px, 94vw);
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    box-shadow: -30px 0 60px -30px rgba(0, 0, 0, 0.6);
    animation: mw-es-drawer-in 0.3s cubic-bezier(0.3, 0.8, 0.3, 1) both;
}

@keyframes mw-es-drawer-in {
    from { translate: 60px 0; opacity: 0; }
    to { translate: 0 0; opacity: 1; }
}

.mw-es-drawer-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
}

.mw-es-drawer-title {
    font-size: 15px;
    font-weight: 750;
}

.mw-es-drawer-close { margin-left: auto; }

.mw-es-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mw-es-drawer-foot {
    display: flex;
    justify-content: flex-end;
    padding: 10px 18px 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* ── patchbay dialog — the tactile wiring board ───────────────────────────── */

.mw-es-patch {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: min(880px, 88vw);
    overflow-x: auto;
}

.mw-es-patch-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.mw-es-patch-hint { flex-basis: 100%; }

.mw-es-patch-collabels {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 200px minmax(280px, 1fr);
    gap: 0 10px;
    align-items: center;
}

/* NOTE: The board — fixed row pitch (72px + 10px gap) shared by BOTH columns and the gutter's
   pin math (RowHeightPx/RowGapPx in DtEventServicesPatchbay). Change them together. */
.mw-es-pb {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 200px minmax(280px, 1fr);
    gap: 0 10px;
    align-items: start;
}

.mw-es-pb-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mw-es-pb-row {
    height: 72px;
    overflow: hidden;
}

.mw-es-pb-gutter {
    position: relative;
    align-self: stretch;
}

.mw-es-pb-svg {
    display: block;
    cursor: grab;
    touch-action: none;
}

.mw-es-pb-svg--dragging { cursor: grabbing; }

.mw-es-pb-pin {
    fill: var(--mud-palette-surface);
    stroke: color-mix(in srgb, var(--c, var(--mud-palette-text-secondary)) 80%, transparent);
    stroke-width: 3;
}

.mw-es-pb-pin--open {
    stroke-dasharray: 3 3;
    animation: mw-es-pin-pulse 1.8s ease infinite;
}

@keyframes mw-es-pin-pulse {
    0%, 100% { stroke-opacity: 0.55; }
    50% { stroke-opacity: 1; }
}

.mw-es-patch-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    border-top-left-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--c, var(--mud-palette-text-secondary)) 32%, var(--mud-palette-lines-default));
    background: var(--mud-palette-surface);
    box-shadow: -3px 2px 9px -8px color-mix(in srgb, var(--c, var(--mud-palette-text-secondary)) 65%, transparent);
    min-width: 0;
}

.mw-es-patch-slot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    border-top-right-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--c, var(--mud-palette-text-secondary)) 32%, var(--mud-palette-lines-default));
    background: var(--mud-palette-surface);
    box-shadow: 3px 2px 9px -8px color-mix(in srgb, var(--c, var(--mud-palette-text-secondary)) 65%, transparent);
    min-width: 0;
}

.mw-es-patch-slot--open {
    border-style: dashed;
    background: transparent;
    box-shadow: none;
    color: var(--mud-palette-text-secondary);
}

.mw-es-slotkey {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    color: color-mix(in srgb, var(--c, var(--mud-palette-text-secondary)) 70%, var(--mud-palette-text-primary));
}

/* ── rights probe protocol ────────────────────────────────────────────────── */

.mw-es-problog {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: min(480px, 80vw);
}

.mw-es-probline {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.mw-es-probline--visible {
    opacity: 1;
    transform: none;
}

.mw-es-probline--done { margin-top: 5px; }

.mw-es-probicon {
    width: 22px;
    display: grid;
    place-items: center;
    flex: none;
}

.mw-es-problabel {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.mw-es-probdetail {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mw-es-insight {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 14px;
    margin-top: 4px;
    border-radius: 12px;
    border-top-left-radius: 4px;
    border: 1px dashed var(--mud-palette-lines-inputs);
    color: var(--mud-palette-text-secondary);
    font-size: 12px;
}

@media (max-width: 1100px) {
    .mw-es-curhead,
    .mw-es-currow {
        grid-template-columns: 26px 190px 1fr 220px;
    }

    .mw-es-curhead > :nth-child(5),
    .mw-es-currow > :nth-child(5) { display: none; }

}