/* Entitlements page (mw-et-*) — command-center look over one full-width MwDataGrid:
   a live KPI strip (ticket lifecycle, handout fulfilment, compensation totals) above the
   people grid, avatar person cells, and the amber bulk select bar. Styled on MudBlazor
   palette variables so both themes work; accent colors mirror the mockup
   (docs/mockups/entitlements-command-center.html · variant 1). */

.mw-et-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    box-sizing: border-box;
    /* NOTE: Same dense-appbar height math as the Post Office page (mw-po-layout) — the app
       uses a DENSE MudAppBar, so MudMainContent's padding-top is appbar*0.75; subtract that instead
       of the full appbar to fill exactly to the viewport bottom. */
    height: calc(100vh - var(--mud-appbar-height) + var(--mud-appbar-height) / 4);
}

.mw-et-grid {
    flex: 1;
    min-width: 0;
    min-height: 0;
}

/* ── KPI strip — corner-glow tiles (edge-glow surface primitive from the mockup:
      a corner-anchored radial rail color bleeding into a hairline border) ──────── */

.mw-et-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    flex: none;
}

@media (max-width: 1280px) {
    .mw-et-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .mw-et-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mw-et-kpi {
    --rail: transparent;
    position: relative;
    padding: 13px 16px 12px;
    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(--rail) 80%, transparent) 0%,
            color-mix(in srgb, var(--rail) 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(--rail) 65%, transparent);
    min-width: 0;
}

.mw-et-kpi-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

.mw-et-kpi-value small {
    font-size: 13px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    margin-left: 2px;
}

.mw-et-kpi--live .mw-et-kpi-value {
    color: var(--mud-palette-success);
}

.mw-et-kpi-line {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

/* ── KPI strip collapse/expand — the strip is one click target; collapsed keeps the six
      corner-glow cards but squeezes each to a single slim line. ─────────────────────── */

.mw-et-kpistrip {
    position: relative;
    flex: none;
    cursor: pointer;
    padding-right: 34px;
}

/* Accordion-style chevron pinned in the strip's reserved right rail; points down =
   "there is more", flips up while expanded. */
.mw-et-kpistrip-chevron {
    position: absolute;
    right: 0;
    top: 50%;
    translate: 0 -50%;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    transition: rotate 0.25s ease, color 0.2s ease, border-color 0.2s ease;
}

.mw-et-kpistrip:hover .mw-et-kpistrip-chevron {
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-lines-inputs);
}

.mw-et-kpistrip--expanded .mw-et-kpistrip-chevron {
    rotate: 180deg;
}

.mw-et-kpis--collapsed .mw-et-kpi {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 12px 6px;
    min-height: 34px;
}

.mw-et-kpis--collapsed .mw-et-kpi-value {
    font-size: 15px;
}

.mw-et-kpis--collapsed .mw-et-kpi-value small {
    font-size: 11px;
}

.mw-et-kpis--collapsed .mw-et-kpi-line {
    margin-top: 0;
    flex-wrap: nowrap;
    overflow: hidden;
    min-width: 0;
}

.mw-et-kpis--collapsed .mw-et-kpi-line .mw-et-meta-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status pill — mono uppercase tag tinted by the lifecycle color (--c) */
.mw-et-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: .05em;
    text-transform: uppercase;
    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);
    white-space: nowrap;
}

.mw-et-meta-label {
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-et-livedot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mud-palette-success);
    flex: none;
    animation: mw-et-pulse 2s ease infinite;
}

@keyframes mw-et-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-success) 55%, transparent); }
    55%      { box-shadow: 0 0 0 5px transparent; }
}

/* ── Bulk select bar — dashed amber container holding count + the three bulk actions ── */

.mw-et-selectbar {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 6px 4px 13px;
    border: 1px dashed color-mix(in srgb, var(--mud-palette-warning) 50%, transparent);
    border-radius: 11px;
    border-bottom-left-radius: 3px;
    background: color-mix(in srgb, var(--mud-palette-warning) 5%, transparent);
}

.mw-et-selectbar > b {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    color: color-mix(in srgb, var(--mud-palette-warning) 80%, var(--mud-palette-text-primary));
}

/* ── Person cell — accent avatar (--c per person) + stacked name/email ──────── */

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

.mw-et-avatar {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border-bottom-left-radius: 3px;
    display: grid;
    place-items: center;
    flex: none;
    font-size: 11px;
    font-weight: 700;
    color: color-mix(in srgb, var(--c, var(--mud-palette-primary)) 55%, var(--mud-palette-text-primary));
    background: color-mix(in srgb, var(--c, var(--mud-palette-primary)) 15%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--c, var(--mud-palette-primary)) 32%, transparent);
}

.mw-et-who-text {
    min-width: 0;
}

.mw-et-nm {
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-et-em {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 10.5px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Passport detail row — one credential card per ticket + the compensation breakdown ── */

.mw-et-passport {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
    padding: 14px 18px 18px 56px;
}

.mw-et-pcard {
    --rail: transparent;
    position: relative;
    padding: 14px 16px;
    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(--rail) 80%, transparent) 0%,
            color-mix(in srgb, var(--rail) 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(--rail) 65%, transparent);
    min-width: 0;
}

.mw-et-pcard--void {
    opacity: .68;
}

.mw-et-pcard--compensations {
    --rail: var(--mud-palette-warning);
}

.mw-et-pcard--handouts {
    --rail: var(--mud-palette-success);
}

/* The compensations card mutes itself into the empty look when the breakdown inside
   reports no compensations (mw-comp-bd-empty) — same treatment as the explicit --empty card. */
.mw-et-pcard--empty,
.mw-et-pcard:has(.mw-comp-bd-empty) {
    --rail: transparent;
    display: grid;
    place-items: center;
    border-style: dashed;
    color: var(--mud-palette-text-secondary);
    font-size: 12.5px;
    min-height: 120px;
}

.mw-et-pcard:has(.mw-comp-bd-empty) > .mw-et-pcard-head {
    display: none;
}

.mw-et-pcard:has(.mw-comp-bd-empty) .mw-comp-bd-empty {
    font-size: 12.5px;
    margin: 0;
}

.mw-et-pcard-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px;
    min-width: 0;
}

.mw-et-pcard-head b {
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-et-pcard-holder {
    margin-left: auto;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-et-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ScanCode — dashed mono strip with the reveal eye */
.mw-et-scancode {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 7px;
    padding: 3px 4px 3px 9px;
    margin-bottom: 9px;
    min-width: 0;
}

.mw-et-scancode b {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* Lifecycle stepper — Draft → Issued → Checked-in */
.mw-et-lifecycle {
    display: flex;
    align-items: flex-start;
    margin: 4px 0 11px;
}

.mw-et-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    position: relative;
}

.mw-et-step::before {
    content: "";
    position: absolute;
    top: 6px;
    left: -50%;
    width: 100%;
    height: 1.5px;
    background: var(--mud-palette-lines-default);
}

.mw-et-step:first-child::before {
    display: none;
}

.mw-et-step-bullet {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    z-index: 1;
    box-sizing: border-box;
}

.mw-et-step.done .mw-et-step-bullet {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary);
    box-shadow: 0 0 8px -2px var(--mud-palette-primary);
}

.mw-et-step.done::before {
    background: var(--mud-palette-primary);
}

.mw-et-step.now .mw-et-step-bullet {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
}

.mw-et-step span:last-child {
    font-size: 8.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
}

.mw-et-step.done span:last-child,
.mw-et-step.now span:last-child {
    color: var(--mud-palette-text-primary);
}

/* Meta rows (push trail, check-in trail, revoke trail) */
.mw-et-pmeta {
    display: flex;
    align-items: baseline;
    gap: 9px;
    font-size: 11.5px;
    padding: 2px 0;
    color: var(--mud-palette-text-primary);
}

.mw-et-pmeta .mw-et-meta-label {
    width: 84px;
    flex: none;
}

.mw-et-pactions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

/* ── Issue dialog rows (DtPushAdmissionTickets) ── */

.mw-et-issue-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 2px;
    border-bottom: 1px dashed var(--mud-palette-lines-default);
    min-width: 0;
}

.mw-et-issue-row:last-child {
    border-bottom: none;
}

.mw-et-issue-row b {
    font-size: 13px;
    white-space: nowrap;
}

.mw-et-issue-holder {
    flex: 1;
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Developer mode (grid swap): raw provider ticket view ─────────────────── */

.mw-et-dev-code {
    font-family: var(--mud-typography-default-family, monospace);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-et-dev-json {
    padding: 8px 12px;
    max-height: 420px;
    overflow: auto;
    background: var(--mud-palette-background-gray);
    border-radius: 6px;
}

/* The mode switch (People ↔ Dev) pins to the toolbar's right edge — it must never move when
   the contextual cluster on its left changes with selection/mode. */
.mw-et-mode-switch {
    margin-left: auto;
    display: flex;
    align-items: center;
}

/* Developer toolbar actions — one coherent cluster instead of loose buttons. */
.mw-et-dev-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 9px;
    background: color-mix(in srgb, var(--mud-palette-surface) 60%, transparent);
}

/* QR dialog — white card so the transparent-white QR modules stay scannable on dark themes. */
.mw-et-qr-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
}

.mw-et-qr-img {
    width: 320px;
    height: 320px;
    image-rendering: pixelated;
}

.mw-et-qr-code {
    font-family: monospace;
    font-size: 13px;
    color: #111;
    letter-spacing: 0.04em;
}

.mw-et-qr-holder {
    font-size: 12px;
    color: #555;
}

/* Raw field editor dialog — labeled key/value rows. */
.mw-et-fieldedit {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 420px;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 4px;
}

/* Provider pane detail row — merge panel on top, raw stored state collapsed underneath. */
.mw-et-provider-detail {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px;
}

.mw-et-provider-rawjson > summary {
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    user-select: none;
}

.mw-et-provider-rawjson > summary:hover {
    color: var(--mud-palette-text-primary);
}

/* Inline wire-field editors (provider pane) — subtle in rest, obvious once locally edited. */
.mw-et-wire-edit {
    font: inherit;
    font-size: inherit;
    width: 100%;
    color: var(--mud-palette-text-primary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 2px 6px;
    transition: border-color 120ms ease, background 120ms ease;
}

.mw-et-wire-edit:hover {
    border-color: var(--mud-palette-lines-default);
}

.mw-et-wire-edit:focus {
    outline: none;
    border-color: var(--mud-palette-secondary);
    background: var(--mud-palette-background-gray);
}

/* NOTE: A locally edited value — lives only in this session's memory until pushed. */
.mw-et-wire-edit--dirty {
    border-color: var(--mud-palette-secondary);
    background: color-mix(in srgb, var(--mud-palette-secondary) 12%, transparent);
    box-shadow: inset 2px 0 0 var(--mud-palette-secondary);
}

/* NOTE: block + min-height keep EMPTY editable cells a full-size click target, and the
   row-hover border makes the editable cells discoverable before the first click. */
.mw-et-wire-edit {
    display: block;
    min-height: 24px;
}

.mw-dg-row:hover .mw-et-wire-edit {
    border-color: var(--mud-palette-lines-default);
}

/* Numeric wire inputs (currencies/handouts) — hide the spinner chrome, keep it calm. */
.mw-et-wire-edit[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.mw-et-wire-edit[type="number"]::-webkit-outer-spin-button,
.mw-et-wire-edit[type="number"]::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

.mw-et-wire-edit--select {
    appearance: auto;
    cursor: pointer;
}

.mw-et-wire-edit--select option {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

/* Push preview dialog — per-ticket change lists (stored → new). */
.mw-et-pushpreview {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 480px;
    max-height: 60vh;
    overflow-y: auto;
}

.mw-et-pushpreview-ticket {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 8px 10px;
}

.mw-et-pushpreview-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.mw-et-pushpreview-holder {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
}

.mw-et-pushpreview-changes {
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr max-content 1fr;
    gap: 2px 10px;
    align-items: baseline;
    font-size: 0.8rem;
}

.mw-et-pushpreview-key {
    font-family: monospace;
    color: var(--mud-palette-text-secondary);
}

.mw-et-pushpreview-old {
    color: var(--mud-palette-text-secondary);
    text-decoration: line-through;
    overflow-wrap: anywhere;
}

.mw-et-pushpreview-arrow {
    color: var(--mud-palette-secondary);
}

.mw-et-pushpreview-new {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Dev/Provider toolbar composer strip — gap to the toolbar search on the left, and button
   labels must never break into a second line (label + count stay together). */
.mw-et-composer {
    margin-left: 10px;
    margin-right: 8px;
    flex-wrap: nowrap;
}

.mw-et-composer .mud-button-root,
.mw-et-composer .mud-button-label {
    white-space: nowrap;
}

/* Selection count inside the composer strip — sized like a small button. */
.mw-et-composer-count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 100%;
    padding: 0 10px;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--mud-palette-text-primary);
}

/* Purge confirm — the legacy keys as a scannable vertical list. */
.mw-et-purge-keylist {
    margin: 10px 0 10px 4px;
    padding-left: 20px;
    line-height: 1.7;
    columns: 2;
    column-gap: 32px;
}

.mw-et-purge-keylist code {
    font-family: monospace;
    font-size: 0.85em;
    background: var(--mud-palette-background-gray);
    border-radius: 4px;
    padding: 1px 6px;
}

/* Provider-only code detail — no stored copy to merge against. */
.mw-et-nocopy-note {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    padding: 4px 2px;
}

/* NOTE: Policy-run preview dialog (DtPolicyRunPreview) — per-person rows with expandable "why". */
.mw-et-polrun-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 480px;
    overflow-y: auto;
}

.mw-et-polrun-row {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 4px 8px;
}

.mw-et-polrun-row-unchanged {
    opacity: 0.65;
}

.mw-et-polrun-head {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    cursor: pointer;
    min-height: 32px;
}

.mw-et-polrun-name {
    font-weight: 600;
    margin-right: 4px;
}

.mw-et-polrun-nochange {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.mw-et-polrun-detail {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 4px 4px 28px;
    border-top: 1px dashed var(--mud-palette-lines-default);
    margin-top: 4px;
}

.mw-et-polrun-sectiontitle {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 2px;
}

.mw-et-polrun-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    padding: 2px 0;
}

.mw-et-polrun-amount {
    font-weight: 700;
}

.mw-et-polrun-why {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.mw-et-polrun-delta {
    color: var(--mud-palette-warning-darken);
}

.mw-et-polrun-muted {
    color: var(--mud-palette-text-secondary);
}

/* ══════════════════════════════════════════════════════════════════════════
   Policies grid-swap pane (MwPolicyFamilyPane) — one expandable row per
   policy-family member plus the PolicyRun log. Same language as the rest of
   the page: hairline-bordered grid, category color as a rail (--c), corner-
   glow card for the run log, mono for meta.
   ══════════════════════════════════════════════════════════════════════════ */

.mw-et-polpane {
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 2px 16px;
    box-sizing: border-box;
}

.mw-et-pol-grid {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    overflow: hidden;
    background: var(--mud-palette-surface);
    flex: none;
}

.mw-et-pol-header,
.mw-et-pol-row {
    display: grid;
    grid-template-columns: 20px minmax(240px, 300px) 120px minmax(0, 1fr) 170px 36px;
    gap: 0 14px;
    align-items: center;
    padding: 0 14px 0 0;
}

/* The composition pill sits directly in the row grid — keep it hugging its content. */
.mw-et-pol-row > .mw-et-pill {
    justify-self: start;
}

.mw-et-pol-header {
    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-et-pol-row {
    min-height: 62px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    cursor: pointer;
    transition: background 0.15s ease;
}

.mw-et-pol-row:last-child {
    border-bottom: none;
}

.mw-et-pol-row:hover {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 3%, transparent);
}

/* Category rail — the policy's color as a glowing bar on the row's left edge. */
.mw-et-pol-rail {
    width: 4px;
    height: 34px;
    border-radius: 3px;
    background: var(--c, transparent);
    box-shadow: 0 0 8px -1px var(--c, transparent);
    justify-self: center;
}

.mw-et-pol-name {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.mw-et-pol-ic {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border-bottom-left-radius: 3px;
    flex: none;
    display: grid;
    place-items: center;
    color: var(--c, var(--mud-palette-text-secondary));
    background: color-mix(in srgb, var(--c, var(--mud-palette-text-secondary)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--c, var(--mud-palette-text-secondary)) 30%, transparent);
}

.mw-et-pol-name-text {
    min-width: 0;
}

.mw-et-pol-nm {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-et-pol-sub {
    font-size: 10.5px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-et-pol-rulechips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    min-width: 0;
}

/* Per-rule effect summary — a quiet tinted pill; ellipsized so one verbose rule
   cannot blow up the row. */
.mw-et-pol-rulechip {
    display: inline-block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 2px 8px 3px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--c, var(--mud-palette-text-secondary)) 35%, transparent);
    background: color-mix(in srgb, var(--c, var(--mud-palette-text-secondary)) 8%, transparent);
    color: var(--mud-palette-text-primary);
    font-size: 11px;
    font-weight: 600;
}

.mw-et-pol-rulechip--warn {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 55%, transparent);
    background: color-mix(in srgb, var(--mud-palette-warning) 8%, transparent);
    color: var(--mud-palette-warning-darken);
}

.mw-et-pol-norules {
    font-size: 11.5px;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

.mw-et-pol-stat {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}

.mw-et-pol-chevron {
    display: grid;
    place-items: center;
    color: var(--mud-palette-text-secondary);
    transition: transform 0.2s ease, color 0.2s ease;
}

.mw-et-pol-row--open .mw-et-pol-chevron {
    transform: rotate(90deg);
    color: var(--mud-palette-primary);
}

.mw-et-pol-chevron--locked {
    color: var(--mud-palette-text-disabled);
}

/* Expanded editor region — visually "inside" the row above, like the passport detail row. */
.mw-et-pol-detail {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
    padding: 16px 18px 18px 40px;
}

.mw-et-pol-detail:last-child {
    border-bottom: none;
}

/* ── Run log — the PolicyRun history viewer (corner-glow card, primary rail) ── */

.mw-et-pol-runlog {
    --rail: var(--mud-palette-primary);
    position: relative;
    flex: none;
    padding: 15px 17px;
    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(--rail) 80%, transparent) 0%,
            color-mix(in srgb, var(--rail) 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(--rail) 65%, transparent);
}

.mw-et-pol-runlog-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.mw-et-pol-runlog-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--mud-palette-text-primary);
}

.mw-et-pol-runlog-last {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 10.5px;
    color: var(--mud-palette-text-secondary);
    margin-left: 6px;
}

.mw-et-pol-runrow {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 4px;
    border-bottom: 1px dashed var(--mud-palette-lines-default);
}

.mw-et-pol-runrow:last-of-type {
    border-bottom: none;
}

.mw-et-pol-runrow--nochange {
    opacity: 0.65;
}

.mw-et-pol-runic {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border-bottom-left-radius: 3px;
    flex: none;
    display: grid;
    place-items: center;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-secondary) 25%, transparent);
}

.mw-et-pol-runbody {
    flex: 1;
    min-width: 0;
}

.mw-et-pol-runsum {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.mw-et-pol-runmeta {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 10px;
    color: var(--mud-palette-text-secondary);
    margin-top: 1px;
}

.mw-et-pol-runchips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding-left: 8px;
}

.mw-et-pol-runlog-note {
    display: block;
    margin-top: 8px;
}

/* Narrow layouts — drop the composition and stat columns, keep name + chips. */
@media (max-width: 1100px) {
    .mw-et-pol-header,
    .mw-et-pol-row {
        grid-template-columns: 20px minmax(200px, 260px) minmax(0, 1fr) 36px;
    }

    .mw-et-pol-header > :nth-child(3),
    .mw-et-pol-header > :nth-child(5),
    .mw-et-pol-row > .mw-et-pill,
    .mw-et-pol-row > .mw-et-pol-stat {
        display: none;
    }

    .mw-et-pol-detail {
        padding-left: 18px;
    }
}