/* The console pages: the audit log, the log explorer and data maintenance.

   One vocabulary (sp-console-*) for the shell those pages share - header status, quick views, filter bar, chips,
   results list with day headings, density, pager, honest states, and the detail drawer - so they read as one
   product and a fix to one is a fix to all. Extracted from the audit log's scoped stylesheet when the log explorer
   became its sibling.

   Global rather than scoped, because the shared pieces are rendered by several components (FilterChipBar,
   ConsoleDrawer and each page) and a scoped class would only match inside the component that declares it.
   Every colour is a --mud-palette-* value or a color-mix() of one, so dark mode needs no rules of its own; radii,
   type sizes, the monospace stack and the focus ring are the shared tokens. */

.sp-console {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}

.sp-console-status-sep,
.sp-console-status-quiet {
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

/* A fixed slot so the bar appearing and going does not move the list under the pointer. */
.sp-console-progress-slot {
    height: 4px;
    margin-top: -0.85rem;
}

.sp-console-progress {
    margin: 0;
}

/* ── Context banner ("History of …") ───────────────────────────────────────────────────────────────── */

.sp-console-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 35%, var(--mud-palette-lines-default));
    border-radius: var(--sp-radius-md);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
    color: var(--mud-palette-text-primary);
    font-size: 0.86rem;
}

.sp-console-context-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.sp-console-link-button {
    padding: 0.15rem 0.2rem;
    border: 0;
    border-radius: var(--sp-radius-sm);
    background: none;
    color: var(--mud-palette-primary);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.sp-console-link-button:hover {
    text-decoration: underline;
}

.sp-console-link-button:focus-visible {
    outline: none;
    box-shadow: var(--sp-focus-ring);
}

/* ── Quick views ───────────────────────────────────────────────────────────────────────────────────── */

/* One row that scrolls sideways on a phone, rather than wrapping into a wall of chips above the list. */
.sp-console-views {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding: 2px 2px 4px;
    scrollbar-width: thin;
}

.sp-console-view {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.35rem;
    min-height: 32px;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sp-console-view:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
}

.sp-console-view:focus-visible {
    outline: none;
    box-shadow: var(--sp-focus-ring);
}

/* Selected: filled tint, primary border and bolder text - not colour alone. */
.sp-console-view.is-active {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));
    color: color-mix(in srgb, var(--mud-palette-primary) 75%, var(--mud-palette-text-primary));
    font-weight: 600;
}

/* ── Filter bar ────────────────────────────────────────────────────────────────────────────────────── */

.sp-console-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.6rem 0.75rem;
}

.sp-console-search {
    flex: 2 1 18rem;
    min-width: 0;
}

.sp-console-range {
    flex: 0 1 12rem;
    min-width: 10rem;
}

.sp-console-dates {
    flex: 1 1 15rem;
    min-width: 13rem;
}

.sp-console-filterbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding-top: 0.35rem;
}

.sp-console-panel {
    display: none;
}

.sp-console-panel.is-open {
    display: block;
    padding: 0.85rem 0.9rem 0.4rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sp-radius-md);
    background: color-mix(in srgb, var(--mud-palette-background-gray) 55%, var(--mud-palette-surface));
}

.sp-console-panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.4rem 0.85rem;
}

.sp-console-mono-field input {
    font-family: var(--sp-font-mono);
    font-size: 0.85rem;
}

/* An option with its count at the end: "API keys · 12". */
.sp-console-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
}

.sp-console-option-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-console-option-count {
    flex: 0 0 auto;
    font-size: var(--sp-text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

/* ── Active-filter chips ───────────────────────────────────────────────────────────────────────────── */

.sp-console-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.sp-console-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    max-width: 100%;
    padding: 0.1rem 0.15rem 0.1rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 30%, var(--mud-palette-lines-default));
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-surface));
    font-size: 0.78rem;
    color: var(--mud-palette-text-primary);
}

.sp-console-chip-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-console-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.sp-console-chip-remove:hover {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
    color: var(--mud-palette-text-primary);
}

.sp-console-chip-remove:focus-visible {
    outline: none;
    box-shadow: var(--sp-focus-ring);
}

/* ── Results ───────────────────────────────────────────────────────────────────────────────────────── */

.sp-console-results {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sp-radius-md);
    background: var(--mud-palette-surface);
    /* clip, not hidden: hidden would make this the sticky headings' scroll container and stop them sticking. */
    overflow: clip;
}

.sp-console-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.6rem 0.55rem 0.95rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.sp-console-results-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.sp-console-density {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sp-radius-sm);
}

.sp-console-density-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: calc(var(--sp-radius-sm) - 2px);
    background: none;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.sp-console-density-btn.is-active {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
}

.sp-console-density-btn:focus-visible {
    outline: none;
    box-shadow: var(--sp-focus-ring);
}

/* Day groups. The heading sticks while its rows scroll past, so a long day never loses its date. */
.sp-console-day-heading {
    position: sticky;
    top: var(--mud-appbar-height, 64px);
    z-index: 2;
    margin: 0;
    padding: 0.4rem 0.95rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: color-mix(in srgb, var(--mud-palette-background-gray) 70%, var(--mud-palette-surface));
    font-size: var(--sp-text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.sp-console-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ── Rows ──────────────────────────────────────────────────────────────────────────────────────────── */

/* The stretched-button pattern: a real button over the sentence whose ::after covers the row, so the whole row
   opens the event, Tab reaches it and Enter/Space pick it; the outcome chip's tooltip is raised above it. */
.sp-console-row {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.6rem 0.6rem 0.95rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    transition: background-color 0.12s ease;
}

.sp-console-rows > .sp-console-row:last-child {
    border-bottom: 0;
}

.sp-console-row:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, transparent);
}

.sp-console-row:has(.sp-console-row-open:focus-visible) {
    box-shadow: inset var(--sp-focus-ring);
}

/* A failure or refusal carries a rule on the left as well as its chip, so it is findable while scrolling. */
.sp-console-row-bad {
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--mud-palette-error) 75%, transparent);
}

.sp-console-row-warn {
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--mud-palette-warning) 80%, transparent);
}

/* Worse than a failure, in the same red: a wider, solid rule (an Error has the thinner, softer one), so the two are told apart by weight as well as
   by the chip's icon and words. After .sp-console-row-bad, which a critical row also carries. */
.sp-console-row-critical {
    box-shadow: inset 6px 0 0 var(--mud-palette-error);
}

.sp-console-row.is-selected {
    background: color-mix(in srgb, var(--mud-palette-primary) 9%, transparent);
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

.sp-console-row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    color: color-mix(in srgb, var(--mud-palette-primary) 80%, var(--mud-palette-text-primary));
}

.sp-console-row-main {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.sp-console-row-open {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.sp-console-row-open:focus-visible {
    outline: none;
}

.sp-console-row-open::after {
    content: "";
    position: absolute;
    inset: 0;
}

.sp-console-row-sentence {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.sp-console-row-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.6rem;
    font-size: var(--sp-text-xs);
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

/* Raised above the stretched button, so the chip's tooltip can be reached by pointer. */
.sp-console-row-meta .sp-tone-chip {
    position: relative;
    z-index: 1;
}

.sp-console-kind {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0 0.4rem 0 0.25rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent);
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}

.sp-console-kind .mud-icon-root {
    font-size: 0.95rem;
}

.sp-console-meta-item + .sp-console-meta-item::before {
    content: "·";
    margin-right: 0.6rem;
    color: var(--mud-palette-text-disabled);
}

.sp-console-row-time {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sp-console-row-time time {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.sp-console-row-ago {
    font-size: var(--sp-text-xs);
    color: var(--mud-palette-text-secondary);
}

.sp-console-row-chevron {
    color: var(--mud-palette-text-disabled);
}

/* Compact: one line per event - the sentence truncates, the meta sits beside it. */
.sp-console-list.is-compact .sp-console-row {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    min-height: 36px;
}

.sp-console-list.is-compact .sp-console-row-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.sp-console-list.is-compact .sp-console-row-main {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

.sp-console-list.is-compact .sp-console-row-open {
    flex: 1 1 auto;
    min-width: 0;
}

.sp-console-list.is-compact .sp-console-row-sentence {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.sp-console-list.is-compact .sp-console-row-meta {
    flex: 0 1 auto;
    flex-wrap: nowrap;
    max-width: 45%;
    overflow: hidden;
    white-space: nowrap;
}

.sp-console-list.is-compact .sp-console-row-time {
    flex-direction: row;
    gap: 0.5rem;
}

/* ── Pager ─────────────────────────────────────────────────────────────────────────────────────────── */

.sp-console-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem 0.5rem;
    padding: 0.45rem 0.6rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.sp-console-pager-range {
    margin-right: auto;
    padding-left: 0.35rem;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

/* ── States ────────────────────────────────────────────────────────────────────────────────────────── */

.sp-console-skeleton {
    display: flex;
    flex-direction: column;
}

.sp-console-skeleton-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.95rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.sp-console-skeleton-lines {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.25rem;
}

.sp-console-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.25rem 1rem;
    text-align: center;
}

.sp-console-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 10%, transparent);
    color: var(--mud-palette-text-secondary);
}

.sp-console-state-bad .sp-console-state-icon {
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    color: color-mix(in srgb, var(--mud-palette-error) 80%, var(--mud-palette-text-primary));
}

.sp-console-state-title {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.sp-console-state-body {
    max-width: 56ch;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.sp-console-state-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.25rem;
}

.sp-console-tech {
    max-width: 56ch;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    text-align: left;
    color: var(--mud-palette-text-secondary);
}

.sp-console-tech summary {
    cursor: pointer;
    font-weight: 600;
}

.sp-console-tech dl {
    margin: 0.4rem 0 0;
}

.sp-console-tech dl > div {
    display: flex;
    gap: 0.5rem;
}

.sp-console-tech dt {
    min-width: 6rem;
    font-weight: 600;
}

.sp-console-tech dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.sp-console-tech code {
    font-family: var(--sp-font-mono);
}

/* ── Mobile ────────────────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .sp-console-range,
    .sp-console-dates,
    .sp-console-search {
        flex: 1 1 100%;
    }

    .sp-console-panel-grid {
        grid-template-columns: 1fr;
    }

    /* Three lines: sentence, then actor and outcome, then the time - no column squeezed to nothing. */
    .sp-console-row {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "icon main"
            "icon time";
        row-gap: 0.25rem;
    }

    .sp-console-row-icon {
        grid-area: icon;
        align-self: start;
    }

    .sp-console-row-main {
        grid-area: main;
    }

    .sp-console-row-time {
        grid-area: time;
        flex-direction: row;
        align-items: baseline;
        gap: 0.5rem;
    }

    .sp-console-row-chevron {
        display: none;
    }

    .sp-console-list.is-compact .sp-console-row-main {
        flex-direction: column;
        align-items: stretch;
    }

    .sp-console-list.is-compact .sp-console-row-meta {
        max-width: none;
    }

    .sp-console-pager-range {
        flex: 1 1 100%;
        text-align: center;
        margin: 0;
    }

    .sp-console-pager {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-console-row,
    .sp-console-view {
        transition: none;
    }
}

/* ══ Detail drawer ═══════════════════════════════════════════════════════════════════════════════════

   A right slide-over below the app bar, full-screen on a phone. Layered above the page and its backdrop
   (1100/1101), below MudBlazor's popovers (1200) so a tooltip inside it still shows. */

.sp-console-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: var(--mud-palette-overlay-dark);
}

.sp-console-drawer {
    position: fixed;
    top: var(--mud-appbar-height, 64px);
    right: 0;
    bottom: 0;
    z-index: 1101;
    display: flex;
    flex-direction: column;
    width: min(var(--sp-console-drawer-width, 560px), 94vw);
    border-left: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 70%, transparent);
    background: var(--mud-palette-surface);
    box-shadow: -12px 0 34px color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent);
    transform: translateX(102%);
    visibility: hidden;
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.26s;
}

.sp-console-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

/* MudFocusTrap's root sits between the aside and its content; it has to pass the column layout through. */
.sp-console-drawer > div {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.sp-console-drawer-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.sp-console-drawer-nav {
    display: inline-flex;
}

.sp-console-drawer-eyebrow {
    flex: 1 1 auto;
    font-size: var(--sp-text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.sp-console-drawer-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.1rem 1.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sp-console-drawer-loading {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sp-console-drawer-note {
    margin: 0;
    font-size: 0.86rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Headline ──────────────────────────────────────────────────────────────────────────────────────── */

.sp-console-drawer-headline {
    display: flex;
    gap: 0.75rem;
}

.sp-console-drawer-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: color-mix(in srgb, var(--mud-palette-primary) 80%, var(--mud-palette-text-primary));
}

.sp-console-drawer-headline-text {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.sp-console-drawer-title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.sp-console-drawer-title:focus {
    outline: none;
}

.sp-console-drawer-title:focus-visible {
    border-radius: var(--sp-radius-sm);
    box-shadow: var(--sp-focus-ring);
}

.sp-console-drawer-when {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.sp-console-drawer-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
/* ── Sections ──────────────────────────────────────────────────────────────────────────────────────── */

.sp-console-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.sp-console-section-title {
    margin: 0;
    font-size: var(--sp-text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.sp-console-facts {
    display: grid;
    grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
    gap: 0.35rem 1rem;
    margin: 0;
    font-size: 0.84rem;
}

/* Each fact's own wrapper is a grid row, so dt and dd line up across facts. */
.sp-console-fact {
    display: contents;
}

.sp-console-fact dt {
    color: var(--mud-palette-text-secondary);
}

.sp-console-fact dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    margin: 0;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.sp-console-mono,
.sp-console-fact code,
.sp-console-wrap {
    font-family: var(--sp-font-mono);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
    /* One click selects the whole identifier, for pasting into a ticket or a search box. */
    user-select: all;
}

.sp-console-unrecorded {
    font-style: italic;
    color: var(--mud-palette-text-disabled);
}

.sp-console-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: var(--sp-radius-sm);
    background: none;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.sp-console-copy:hover {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
    color: var(--mud-palette-text-primary);
}

.sp-console-copy:focus-visible {
    outline: none;
    box-shadow: var(--sp-focus-ring);
}

.sp-console-inline-details summary {
    cursor: pointer;
}

.sp-console-inline-details code {
    display: block;
    margin-top: 0.3rem;
}

.sp-console-pivots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.sp-console-pivot {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 0.35rem;
    min-height: 32px;
    padding: 0.25rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 35%, var(--mud-palette-lines-default));
    border-radius: 999px;
    background: none;
    color: var(--mud-palette-primary);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.sp-console-pivot:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.sp-console-pivot:focus-visible {
    outline: none;
    box-shadow: var(--sp-focus-ring);
}
.sp-console-raw-json {
    margin: 0.35rem 0 0;
    padding: 0.5rem 0.6rem;
    max-height: 22rem;
    overflow: auto;
    border-radius: var(--sp-radius-sm);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent);
    font-family: var(--sp-font-mono);
    font-size: 0.76rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--mud-palette-text-primary);
}

/* A sticky action bar at the foot of the drawer, on a phone only: there the main actions stay in reach of a thumb;
   on a wide screen they are already in the drawer's top bar. */
.sp-console-drawer-foot {
    display: none;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

/* ── Raw event ─────────────────────────────────────────────────────────────────────────────────────── */

.sp-console-raw {
    padding-top: 0.85rem;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 0.84rem;
}

.sp-console-raw summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.sp-console-raw-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.25rem;
}

/* ── Phone: the drawer is the screen ──────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .sp-console-drawer-foot {
        display: flex;
    }

    .sp-console-drawer {
        width: 100vw;
        border-left: 0;
    }

    .sp-console-drawer-body {
        padding: 0.85rem 1rem 1.5rem;
    }

    .sp-console-facts {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.1rem;
    }

    .sp-console-fact dd {
        margin-bottom: 0.4rem;
    }

    .sp-console-copy {
        width: 44px;
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-console-drawer,
    .sp-console-drawer.is-open {
        transition: visibility 0s;
    }
}

/* ══ Data-maintenance dialogs (clean-up and schedule) ════════════════════════════════════════════════

   Global because two dialogs share them, and MudDialog renders outside the page's scope. */

.sp-mcleanup-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
}

.sp-mcleanup-scope {
    padding: 0.05rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    font-size: 0.75rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--mud-palette-primary) 80%, var(--mud-palette-text-primary));
}

.sp-mcleanup-steps {
    display: flex;
    gap: 0.35rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
    counter-reset: sp-step;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

.sp-mcleanup-steps li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    counter-increment: sp-step;
}

.sp-mcleanup-steps li::before {
    content: counter(sp-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
}

.sp-mcleanup-steps li + li::after {
    order: -1;
    content: "";
    width: 1.25rem;
    height: 1px;
    margin-right: 0.15rem;
    background: var(--mud-palette-lines-default);
}

.sp-mcleanup-steps li.is-done::before {
    border-color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent);
    color: var(--mud-palette-text-primary);
}

.sp-mcleanup-steps li.is-current {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.sp-mcleanup-steps li.is-current::before {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.sp-mcleanup-section {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
    padding: 0;
    border: 0;
    min-width: 0;
}

.sp-mcleanup-section legend {
    margin-bottom: 0.25rem;
    font-size: var(--sp-text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.sp-mcleanup-presets,
.sp-mpolicy-days {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.sp-mcleanup-preset {
    min-height: 30px;
    padding: 0.15rem 0.65rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.sp-mcleanup-preset.is-active {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));
    font-weight: 600;
}

.sp-mcleanup-preset:focus-visible {
    outline: none;
    box-shadow: var(--sp-focus-ring);
}

.sp-mcleanup-levels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.85rem;
}

.sp-mcleanup-check {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 30px;
    font-size: 0.84rem;
    cursor: pointer;
}

.sp-mcleanup-check input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--mud-palette-primary);
}

.sp-mcleanup-check input:disabled + span {
    color: var(--mud-palette-text-disabled);
}

.sp-mcleanup-check:has(input:focus-visible) {
    border-radius: var(--sp-radius-sm);
    box-shadow: var(--sp-focus-ring);
}

.sp-mcleanup-hint {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.sp-mcleanup-preview {
    min-height: 3rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sp-radius-md);
    background: color-mix(in srgb, var(--mud-palette-background-gray) 55%, var(--mud-palette-surface));
    font-size: 0.86rem;
}

.sp-mcleanup-preview-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--mud-palette-text-secondary);
}

.sp-mcleanup-count,
.sp-mcleanup-none,
.sp-mcleanup-clamp {
    margin: 0;
    line-height: 1.5;
}

.sp-mcleanup-clamp {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

.sp-mcleanup-confirm {
    margin-top: 0.75rem;
    padding: 0.6rem 0.75rem 0.25rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 45%, var(--mud-palette-lines-default));
    border-radius: var(--sp-radius-md);
    background: color-mix(in srgb, var(--mud-palette-error) 6%, transparent);
    font-size: 0.84rem;
}

.sp-mcleanup-confirm p {
    margin: 0 0 0.35rem;
}

.sp-mpolicy-when {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.6rem 1rem;
}

.sp-mpolicy-when > :first-child {
    flex: 0 1 11rem;
}

@media (max-width: 600px) {
    .sp-mcleanup-steps li + li::after {
        width: 0.6rem;
    }
}

/* ── Facet rail ─────────────────────────────────────────────────────────────────────────────────────
   The rail beside a console's results (the log, broker messages, notifications): each value with how many it
   has in the window, ticked to narrow the list. Global rather than scoped because its sections are separate
   components (ConsoleFacetChecks, ConsoleFacetPicks) rendered inside the rail. Beside the list from 1100px,
   folded behind its "Refine" button below it. */

.sp-facetrail {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sp-radius-md);
    background: var(--mud-palette-surface);
}

.sp-facetrail-toggle {
    display: none;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    min-height: 44px;
    padding: 0.4rem 0.8rem;
    border: 0;
    background: none;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.sp-facetrail-toggle span {
    flex: 1 1 auto;
}

.sp-facetrail-toggle:focus-visible {
    outline: none;
    box-shadow: inset var(--sp-focus-ring);
}

.sp-facetrail-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.55rem 0.6rem 0.75rem;
}

.sp-facetrail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 1.5rem;
    padding: 0 0.3rem;
    font-size: var(--sp-text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.sp-facetrail-spinner {
    width: 14px !important;
    height: 14px !important;
}

.sp-facetrail-note {
    margin: 0 0.3rem;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

.sp-facetrail-section {
    margin: 0;
    padding: 0.35rem 0 0.25rem;
    border: 0;
    border-top: 1px solid var(--mud-palette-lines-default);
    min-width: 0;
}

.sp-facetrail-section:first-of-type {
    border-top: 0;
}

.sp-facetrail-section legend {
    padding: 0 0.3rem 0.15rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.sp-facetrail-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-facetrail-check,
.sp-facetrail-pick {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    min-height: 30px;
    padding: 0.1rem 0.3rem;
    border: 0;
    border-radius: var(--sp-radius-sm);
    background: none;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
}

.sp-facetrail-check:hover,
.sp-facetrail-pick:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}

.sp-facetrail-check:has(input:focus-visible),
.sp-facetrail-pick:focus-visible {
    outline: none;
    box-shadow: var(--sp-focus-ring);
}

.sp-facetrail-check input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--mud-palette-primary);
}

.sp-facetrail-pick.is-active {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    font-weight: 600;
}

.sp-facetrail-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-facetrail-count {
    flex: 0 0 auto;
    font-size: var(--sp-text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.sp-facetrail-dot {
    flex: 0 0 auto;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
}

.sp-facetrail-dot-crit { background: color-mix(in srgb, var(--mud-palette-error) 80%, var(--mud-palette-text-primary)); }
.sp-facetrail-dot-error { background: var(--mud-palette-error); }
.sp-facetrail-dot-warn { background: var(--mud-palette-warning); }
.sp-facetrail-dot-info { background: var(--mud-palette-info); }
.sp-facetrail-dot-debug { background: var(--mud-palette-text-disabled); }
.sp-facetrail-dot-good { background: var(--mud-palette-success); }
.sp-facetrail-dot-muted { background: color-mix(in srgb, var(--mud-palette-text-disabled) 55%, var(--mud-palette-surface)); }

@media (max-width: 1099px) {
    .sp-facetrail-toggle {
        display: flex;
    }

    .sp-facetrail-body {
        display: none;
        border-top: 1px solid var(--mud-palette-lines-default);
    }

    .sp-facetrail.is-open .sp-facetrail-body {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
        align-items: start;
    }

    .sp-facetrail-head {
        grid-column: 1 / -1;
    }

    .sp-facetrail-section {
        border-top: 0;
    }

    .sp-facetrail-check,
    .sp-facetrail-pick {
        min-height: 40px;
    }
}

/* ── Related records ─────────────────────────────────────────────────────────────────────────────────
   The drawers' lazily loaded "what else happened" lists (RelatedAuditEvents, RelatedLogEvents and the broker and
   notification drawers' own): a small heading with its link out, then one line per record. */

.sp-related {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.55rem 0 0.15rem;
}

.sp-related + .sp-related {
    border-top: 1px dashed var(--mud-palette-lines-default);
}

.sp-related-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
}

.sp-related-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.sp-related-note {
    margin: 0;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.sp-related-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-related-item {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.2rem 0.55rem;
    min-height: 32px;
    padding: 0.25rem 0.35rem;
    border-radius: var(--sp-radius-sm);
    color: var(--mud-palette-text-primary);
    font-size: 0.8rem;
    text-decoration: none;
}

.sp-related-item:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}

.sp-related-item:focus-visible {
    outline: none;
    box-shadow: var(--sp-focus-ring);
}

.sp-related-item time {
    flex: 0 0 auto;
    font-family: var(--sp-font-mono);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.sp-related-text {
    flex: 1 1 14rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.sp-related-level {
    flex: 0 0 auto;
    font-size: var(--sp-text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.sp-related-level-crit,
.sp-related-level-error {
    color: color-mix(in srgb, var(--mud-palette-error) 85%, var(--mud-palette-text-primary));
}

.sp-related-level-warn {
    color: color-mix(in srgb, var(--mud-palette-warning) 70%, var(--mud-palette-text-primary));
}

/* ── Live tail, the rail's layout, glyphs ─────────────────────────────────────────────────────────────
   Shared by /log, /broker-messages and /notifications: the Live toggle, the "N new" pill that holds new rows while
   the reader is scrolled away, a just-arrived row's glow, the facet rail beside the results, and the row glyph
   tinted by the row's state. */

.sp-console-live {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 32px;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.sp-console-live:hover:not(:disabled) {
    background: color-mix(in srgb, var(--mud-palette-success) 8%, var(--mud-palette-surface));
}

.sp-console-live:focus-visible {
    outline: none;
    box-shadow: var(--sp-focus-ring);
}

.sp-console-live:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.sp-console-live-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--mud-palette-text-disabled);
}

.sp-console-live.is-on {
    border-color: color-mix(in srgb, var(--mud-palette-success) 60%, var(--mud-palette-lines-default));
    background: color-mix(in srgb, var(--mud-palette-success) 10%, var(--mud-palette-surface));
}

.sp-console-live.is-on .sp-console-live-dot {
    background: var(--mud-palette-success);
    animation: sp-console-pulse 1.6s ease-out infinite;
}

@keyframes sp-console-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-success) 55%, transparent); }
    70% { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.sp-console-live-note {
    font-weight: 500;
    color: color-mix(in srgb, var(--mud-palette-success) 75%, var(--mud-palette-text-primary));
}

/* A second, quieter row of quick views (by service). */
.sp-console-views-secondary {
    align-items: center;
    margin-top: -0.45rem;
}

.sp-console-views-secondary .sp-console-view {
    min-height: 28px;
    padding: 0.15rem 0.6rem;
    font-size: 0.78rem;
}

.sp-console-views-label {
    flex: 0 0 auto;
    padding: 0 0.25rem 0 0.15rem;
    font-size: var(--sp-text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.sp-console-tenant {
    flex: 1 1 13rem;
    min-width: 12rem;
    max-width: 20rem;
}

.sp-console-alert .mud-alert-message {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
}

.sp-console-timeline-toggle {
    display: flex;
    justify-content: flex-end;
    margin-top: -0.6rem;
}

.sp-console-body {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    align-items: start;
    gap: 0.85rem;
}

.sp-console-body > .sp-console-results:only-child {
    grid-column: 1 / -1;
}

.sp-console-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent);
    color: var(--mud-palette-text-secondary);
}

.sp-console-glyph.is-error {
    background: color-mix(in srgb, var(--mud-palette-error) 13%, transparent);
    color: color-mix(in srgb, var(--mud-palette-error) 85%, var(--mud-palette-text-primary));
}

.sp-console-glyph.is-warn {
    background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent);
    color: color-mix(in srgb, var(--mud-palette-warning) 70%, var(--mud-palette-text-primary));
}

.sp-console-glyph.is-info {
    background: color-mix(in srgb, var(--mud-palette-info) 12%, transparent);
    color: color-mix(in srgb, var(--mud-palette-info) 80%, var(--mud-palette-text-primary));
}

.sp-console-glyph.is-good {
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    color: color-mix(in srgb, var(--mud-palette-success) 75%, var(--mud-palette-text-primary));
}

/* A state word beside its icon in a row's meta line: colour, icon and text together, never colour alone. */
.sp-console-state-word {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: var(--sp-text-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.sp-console-state-word .mud-icon-root {
    font-size: 0.95rem;
}

.sp-console-state-word.is-error {
    color: color-mix(in srgb, var(--mud-palette-error) 85%, var(--mud-palette-text-primary));
}

.sp-console-state-word.is-warn {
    color: color-mix(in srgb, var(--mud-palette-warning) 70%, var(--mud-palette-text-primary));
}

.sp-console-state-word.is-good {
    color: color-mix(in srgb, var(--mud-palette-success) 75%, var(--mud-palette-text-primary));
}

.sp-console-state-word.is-info {
    color: color-mix(in srgb, var(--mud-palette-info) 80%, var(--mud-palette-text-primary));
}

.sp-console-mono-sm {
    font-family: var(--sp-font-mono);
    font-size: 0.72rem;
}

/* A just-arrived row glows once, so the eye finds it; reduced motion gets no fade. */
.sp-console-row.is-fresh {
    animation: sp-console-fresh 2.4s ease-out;
}

@keyframes sp-console-fresh {
    from { background: color-mix(in srgb, var(--mud-palette-success) 16%, transparent); }
    to { background: transparent; }
}

.sp-console-newpill {
    position: sticky;
    top: calc(var(--mud-appbar-height, 64px) + 0.5rem);
    z-index: 3;
    display: inline-flex;
    align-self: center;
    align-items: center;
    gap: 0.35rem;
    margin: 0.5rem auto -0.25rem;
    padding: 0.3rem 0.85rem;
    border: 0;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);
    cursor: pointer;
}

.sp-console-newpill:focus-visible {
    outline: none;
    box-shadow: var(--sp-focus-ring);
}

@media (max-width: 1099px) {
    .sp-console-body {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .sp-console-tenant {
        flex: 1 1 100%;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-console-live.is-on .sp-console-live-dot,
    .sp-console-row.is-fresh {
        animation: none;
    }
}

/* ── Steps ───────────────────────────────────────────────────────────────────────────────────────────
   "What happened" in a drawer: a vertical list of steps (received, stored, each delivery attempt), each with a dot
   whose colour, the step's own words and its icon-free label all say the same thing. */

.sp-console-steps {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    padding: 0 0 0 0.2rem;
    list-style: none;
}

.sp-console-step {
    position: relative;
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
    gap: 0.55rem;
    padding: 0.3rem 0 0.45rem;
    font-size: 0.84rem;
}

/* The line between dots. */
.sp-console-step::before {
    content: "";
    position: absolute;
    top: 1.1rem;
    bottom: -0.3rem;
    left: 0.43rem;
    width: 2px;
    background: var(--mud-palette-lines-default);
}

.sp-console-step:last-child::before {
    display: none;
}

.sp-console-step-dot {
    position: relative;
    z-index: 1;
    width: 0.9rem;
    height: 0.9rem;
    margin-top: 0.15rem;
    border: 2px solid var(--mud-palette-surface);
    border-radius: 50%;
    background: var(--mud-palette-text-disabled);
    box-shadow: 0 0 0 1px var(--mud-palette-lines-default);
}

.sp-console-step.is-done .sp-console-step-dot { background: var(--mud-palette-success); }
.sp-console-step.is-bad .sp-console-step-dot { background: var(--mud-palette-error); }
.sp-console-step.is-wait .sp-console-step-dot { background: var(--mud-palette-warning); }
.sp-console-step.is-idle .sp-console-step-dot { background: color-mix(in srgb, var(--mud-palette-text-disabled) 55%, var(--mud-palette-surface)); }

.sp-console-step-title {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.sp-console-step-meta {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.sp-console-step-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    margin-top: 0.15rem;
}

.sp-console-step-actions:empty {
    display: none;
}

.sp-console-substeps {
    margin: 0.2rem 0 0;
    padding-left: 1rem;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

/* A related row that opens in place (another message in the drawer) rather than navigating. */
button.sp-related-item {
    width: 100%;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.8rem;
    text-align: left;
    cursor: pointer;
}

/* ── Drawer actions and item pages ──────────────────────────────────────────────────────────────────
   The broker message and notification drawers' header actions (repeated in the foot on a phone), a foot bar shown on
   every screen when it carries actions of its own, and the full-page view of one item. */

.sp-console-drawer-foot.is-always {
    display: flex;
}

.sp-console-drawer-actions {
    display: inline-flex;
    align-items: center;
}

.sp-console-drawer-foot-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
}

.sp-console-drawer-foot-row .sp-console-drawer-foot-end {
    margin-left: auto;
}

.sp-console-page-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.sp-console-page-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.sp-console-page-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 72rem;
    padding: 1.1rem 1.25rem 1.5rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sp-radius-md);
    background: var(--mud-palette-surface);
}

@media (max-width: 600px) {
    .sp-console-drawer-actions {
        display: none;
    }

    .sp-console-page-card {
        padding: 0.85rem 0.9rem 1.25rem;
    }
}

/* ── Accounts and roles ───────────────────────────────────────────────────────────────────────────────

   /accounts, /accounts/{id}, /accounts/new and /roles: the pieces the shell above does not have - avatars, the
   account panel's sections, radio cards, the one-time secret, the danger zone and the permission matrix. Tokens and
   palette mixes only, so dark mode needs nothing of its own. */

/* A disabled button that still says why: focusable wrapper for the tooltip (GuardedButton). */
.sp-guarded {
    display: inline-flex;
    border-radius: var(--sp-radius-sm);
    cursor: not-allowed;
}

.sp-guarded:focus-visible {
    outline: none;
    box-shadow: var(--sp-focus-ring);
}

/* Initials. Four palette tones, each mixed into the surface for the circle and into the text colour for the letters,
   so the contrast holds in both themes. */
.sp-acct-avatar {
    --sp-acct-tone: var(--mud-palette-primary);
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--sp-acct-tone) 16%, var(--mud-palette-surface));
    color: color-mix(in srgb, var(--sp-acct-tone) 70%, var(--mud-palette-text-primary));
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    user-select: none;
}

.sp-acct-avatar.is-tone-1 { --sp-acct-tone: var(--mud-palette-secondary); }
.sp-acct-avatar.is-tone-2 { --sp-acct-tone: var(--mud-palette-tertiary); }
.sp-acct-avatar.is-tone-3 { --sp-acct-tone: var(--mud-palette-info); }

.sp-acct-avatar.is-large {
    width: 3rem;
    height: 3rem;
    font-size: 1.05rem;
}

.sp-acct-avatar.is-muted {
    --sp-acct-tone: var(--mud-palette-text-disabled);
}

.sp-acct-view-count {
    margin-left: 0.15rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
    font-size: var(--sp-text-xs);
    font-variant-numeric: tabular-nums;
}

.sp-acct-help {
    max-width: 22rem;
    padding: 0.75rem 0.9rem;
    font-size: 0.82rem;
    line-height: 1.45;
}

.sp-acct-help p {
    margin: 0.4rem 0 0;
    color: var(--mud-palette-text-secondary);
}

.sp-acct-row-disabled .sp-console-row-sentence {
    color: var(--mud-palette-text-secondary);
}

.sp-acct-mfa {
    display: inline-flex;
    color: color-mix(in srgb, var(--mud-palette-success) 75%, var(--mud-palette-text-primary));
}

.sp-acct-mfa .mud-icon-root {
    font-size: 1rem;
}

.sp-acct-username,
.sp-acct-email {
    font-family: var(--sp-font-mono);
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.sp-acct-never {
    font-size: 0.8rem;
    color: var(--mud-palette-text-disabled);
}

/* ── Account panel ── */

.sp-acct-headline {
    align-items: flex-start;
}

.sp-acct-identity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.6rem;
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
}

.sp-acct-verified {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    color: color-mix(in srgb, var(--mud-palette-warning) 70%, var(--mud-palette-text-primary));
}

.sp-acct-verified.is-yes {
    color: color-mix(in srgb, var(--mud-palette-success) 75%, var(--mud-palette-text-primary));
}

.sp-acct-verified .mud-icon-root {
    font-size: 1rem;
}

.sp-acct-next {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sp-radius-sm);
    font-size: 0.84rem;
}

.sp-acct-next > span {
    flex: 1 1 14rem;
}

.sp-acct-next.is-warn {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 45%, var(--mud-palette-lines-default));
    background: color-mix(in srgb, var(--mud-palette-warning) 8%, transparent);
}

.sp-acct-next.is-bad {
    border-color: color-mix(in srgb, var(--mud-palette-error) 45%, var(--mud-palette-lines-default));
    background: color-mix(in srgb, var(--mud-palette-error) 8%, transparent);
}

.sp-acct-next.is-muted {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent);
}

.sp-acct-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.sp-acct-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
}

.sp-acct-section-head .sp-console-section-title:focus,
.sp-console-section > .sp-console-section-title:focus {
    outline: none;
}

.sp-acct-section-head .sp-console-section-title:focus-visible,
.sp-console-section > .sp-console-section-title:focus-visible {
    border-radius: var(--sp-radius-sm);
    box-shadow: var(--sp-focus-ring);
}

.sp-acct-subtitle {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.sp-acct-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.sp-acct-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.5rem 0.75rem;
}

.sp-acct-form-wide {
    grid-column: 1 / -1;
}

.sp-acct-form-actions,
.sp-acct-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.sp-acct-memberships,
.sp-acct-session-list,
.sp-acct-permissions,
.sp-role-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-acct-membership,
.sp-acct-session {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.sp-acct-membership:last-child,
.sp-acct-session:last-child {
    border-bottom: 0;
}

.sp-acct-membership-text,
.sp-acct-session-text {
    display: flex;
    flex: 1 1 12rem;
    flex-direction: column;
    min-width: 0;
    font-size: 0.84rem;
}

.sp-acct-membership-name {
    font-weight: 600;
}

.sp-acct-membership-role,
.sp-acct-session-meta {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

.sp-acct-card-tag {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
    font-size: var(--sp-text-xs);
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.sp-acct-card-tag.is-warn {
    background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent);
    color: var(--mud-palette-text-primary);
}

.sp-acct-card-tag.is-good {
    background: color-mix(in srgb, var(--mud-palette-success) 16%, transparent);
    color: var(--mud-palette-text-primary);
}

.sp-acct-direct {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Integrations manager on an account: the role, what it allows, whether they have it, give / take away / history. */
.sp-acct-grant {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
    margin-top: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sp-radius-sm);
}

.sp-acct-grant-text {
    display: flex;
    flex: 1 1 16rem;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.sp-acct-grant-text .sp-acct-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.sp-acct-grant-text p {
    margin: 0;
}

.sp-acct-grant-state {
    font-size: 0.84rem;
}

.sp-acct-grant-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.sp-acct-access-search {
    max-width: 22rem;
}

.sp-acct-areas {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sp-acct-area {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sp-radius-sm);
}

.sp-acct-area summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.5rem;
    padding: 0.45rem 0.65rem;
    cursor: pointer;
    font-size: 0.84rem;
}

.sp-acct-area summary:focus-visible {
    outline: none;
    border-radius: var(--sp-radius-sm);
    box-shadow: var(--sp-focus-ring);
}

.sp-acct-area-name {
    font-weight: 600;
}

.sp-acct-area-count {
    padding: 0 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    font-size: var(--sp-text-xs);
    font-variant-numeric: tabular-nums;
}

.sp-acct-area-desc {
    flex-basis: 100%;
    font-size: 0.76rem;
    color: var(--mud-palette-text-secondary);
}

.sp-acct-permissions li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.4rem 0.65rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.sp-acct-permission-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    font-size: 0.82rem;
}

.sp-acct-permission-desc,
.sp-acct-permission-via {
    font-size: 0.76rem;
    color: var(--mud-palette-text-secondary);
}

.sp-acct-permission-via {
    font-style: italic;
}

/* A permission's weight: an outlined dot for reading, half-filled for changing, filled error for high impact. The
   label is in the text for a screen reader and in the hover for everyone - never colour alone. */
.sp-acct-risk {
    display: inline-block;
    flex: 0 0 auto;
    width: 0.6rem;
    height: 0.6rem;
    margin-top: 0.35rem;
    border: 2px solid var(--mud-palette-text-disabled);
    border-radius: 50%;
}

.sp-acct-risk.is-elevated {
    border-color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 55%, transparent);
}

.sp-acct-risk.is-critical {
    border-color: var(--mud-palette-error);
    background: var(--mud-palette-error);
}

.sp-acct-cred {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem;
    margin-right: 0.6rem;
}

.sp-acct-cred-label {
    font-size: 0.76rem;
    color: var(--mud-palette-text-secondary);
}

.sp-acct-required {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sp-radius-sm);
    min-width: 0;
}

.sp-acct-required legend {
    padding: 0 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.sp-acct-sessions {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sp-acct-danger {
    padding: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 45%, var(--mud-palette-lines-default));
    border-radius: var(--sp-radius-md);
    background: color-mix(in srgb, var(--mud-palette-error) 6%, transparent);
}

.sp-acct-danger .sp-console-section-title {
    color: color-mix(in srgb, var(--mud-palette-error) 80%, var(--mud-palette-text-primary));
}

.sp-acct-danger-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.4rem 0;
    font-size: 0.84rem;
}

.sp-acct-danger-row + .sp-acct-danger-row {
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-error) 25%, var(--mud-palette-lines-default));
}

.sp-acct-danger-row p {
    margin: 0.15rem 0 0;
    color: var(--mud-palette-text-secondary);
}

.sp-acct-tabpanel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 0.75rem;
}

.sp-acct-skeleton-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ── Dialogs and radio cards ── */

.sp-acct-dialog-title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
}

.sp-acct-dialog-lead {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
}

.sp-acct-dialog-note,
.sp-acct-dialog-hint {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.sp-acct-dialog-hint {
    margin: 0 auto 0 0.5rem;
}

.sp-acct-dialog-warn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
}

.sp-acct-consequences {
    margin: 0 0 0.75rem;
    padding-left: 1.2rem;
    font-size: 0.84rem;
    line-height: 1.5;
}

.sp-acct-confirm {
    padding: 0.6rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 40%, var(--mud-palette-lines-default));
    border-radius: var(--sp-radius-sm);
    background: color-mix(in srgb, var(--mud-palette-error) 5%, transparent);
}

.sp-acct-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.sp-acct-card {
    display: flex;
    gap: 0.6rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sp-radius-sm);
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}

.sp-acct-card:hover {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-lines-default));
}

.sp-acct-card:has(input:focus-visible) {
    box-shadow: var(--sp-focus-ring);
}

.sp-acct-card.is-chosen {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent);
}

.sp-acct-card.is-disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.sp-acct-card input {
    margin-top: 0.2rem;
    accent-color: var(--mud-palette-primary);
}

.sp-acct-card-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.sp-acct-card-title {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.88rem;
    font-weight: 600;
}

.sp-acct-card-body {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.sp-acct-diff {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.sp-acct-diff-group {
    padding: 0.5rem 0.65rem;
    border-left: 3px solid var(--mud-palette-lines-default);
    font-size: 0.8rem;
}

.sp-acct-diff-group.is-gain {
    border-left-color: var(--mud-palette-success);
}

.sp-acct-diff-group.is-loss {
    border-left-color: var(--mud-palette-error);
}

.sp-acct-diff-group ul {
    margin: 0.25rem 0 0;
    padding-left: 1rem;
}

.sp-acct-diff-heading {
    font-weight: 600;
}

.sp-acct-diff-area {
    color: var(--mud-palette-text-secondary);
}

.sp-acct-diff-area::after {
    content: " ·";
}

/* ── One-time secret ── */

.sp-acct-secret {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 50%, var(--mud-palette-lines-default));
    border-radius: var(--sp-radius-md);
    background: color-mix(in srgb, var(--mud-palette-warning) 7%, var(--mud-palette-surface));
}

.sp-acct-secret-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.84rem;
    font-weight: 600;
}

.sp-acct-secret-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.sp-acct-secret-value {
    flex: 1 1 14rem;
    min-width: 0;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sp-radius-sm);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-family: var(--sp-font-mono);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
}

.sp-acct-secret-value:focus-visible {
    outline: none;
    box-shadow: var(--sp-focus-ring);
}

.sp-acct-secret-note {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
}

.sp-acct-secret-copied {
    font-size: 0.78rem;
    color: color-mix(in srgb, var(--mud-palette-success) 75%, var(--mud-palette-text-primary));
}

/* ── Create stepper ── */

.sp-acctnew-card {
    max-width: 52rem;
}

.sp-acctnew-steps {
    flex-wrap: wrap;
}

.sp-acctnew-step-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--mud-palette-primary);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.sp-acctnew-step-link:focus-visible {
    outline: none;
    border-radius: var(--sp-radius-sm);
    box-shadow: var(--sp-focus-ring);
}

.sp-acctnew-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sp-acctnew-step-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.sp-acctnew-step-title:focus {
    outline: none;
}

.sp-acctnew-step-title:focus-visible {
    border-radius: var(--sp-radius-sm);
    box-shadow: var(--sp-focus-ring);
}

.sp-acctnew-fieldset {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.sp-acctnew-fixed {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.sp-acctnew-error {
    margin: 0;
    font-size: 0.78rem;
    color: var(--mud-palette-error);
}

.sp-acctnew-lifespan {
    max-width: 16rem;
}

.sp-acctnew-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.sp-acctnew-actions-gap {
    flex: 1 1 auto;
}

.sp-acctnew-result {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.88rem;
}

.sp-acctnew-result p {
    margin: 0;
}

.sp-acctnew-result-icon {
    color: color-mix(in srgb, var(--mud-palette-success) 80%, var(--mud-palette-text-primary));
}

@media (max-width: 600px) {
    .sp-acct-danger-row,
    .sp-acct-next {
        align-items: stretch;
        flex-direction: column;
    }

    .sp-acct-secret-row > * {
        flex: 1 1 100%;
    }

    .sp-acct-cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-acct-card {
        transition: none;
    }
}

/* ── Roles & permissions ── */

.sp-roles-tabpanels {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding-top: 0.75rem;
}

.sp-roles-id {
    margin-left: 0.35rem;
    padding: 0 0.3rem;
    border-radius: var(--sp-radius-sm);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
    font-family: var(--sp-font-mono);
    font-size: 0.74rem;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
    user-select: all;
}

.sp-roles-desc {
    flex-basis: 100%;
    color: var(--mud-palette-text-secondary);
}

.sp-roles-text {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
}

.sp-roles-columns {
    flex: 1 1 16rem;
    max-width: 24rem;
}

.sp-roles-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin: 0;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

.sp-roles-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.sp-roles-legend .sp-acct-risk {
    margin-top: 0;
}

.sp-roles-cell {
    font-weight: 700;
}

.sp-roles-cell.is-direct {
    color: color-mix(in srgb, var(--mud-palette-success) 80%, var(--mud-palette-text-primary));
}

.sp-roles-cell.is-inherited {
    color: color-mix(in srgb, var(--mud-palette-info) 75%, var(--mud-palette-text-primary));
}

/* The matrix: a real table, sticky header row and first column, scrolling inside its own box. */
.sp-roles-matrix-wrap {
    max-height: 70vh;
    overflow: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sp-radius-md);
    background: var(--mud-palette-surface);
}

.sp-roles-matrix {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8rem;
}

.sp-roles-matrix th,
.sp-roles-matrix td {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.sp-roles-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    min-width: 6.5rem;
    vertical-align: bottom;
    text-align: center;
    font-weight: 600;
}

.sp-roles-matrix tbody th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 16rem;
    text-align: left;
    font-weight: 500;
}

.sp-roles-matrix thead .sp-roles-matrix-corner {
    left: 0;
    z-index: 3;
    text-align: left;
}

.sp-roles-matrix-area th {
    position: sticky;
    left: 0;
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
    font-size: var(--sp-text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.sp-roles-matrix tbody th[scope="row"] .sp-acct-risk {
    margin: 0 0.35rem 0 0;
    vertical-align: middle;
}

.sp-roles-matrix-perm {
    font-weight: 600;
}

.sp-roles-matrix tbody th[scope="row"] .sp-roles-id {
    display: block;
    margin: 0.1rem 0 0;
    width: fit-content;
}

.sp-roles-colhead {
    padding: 0;
    border: 0;
    background: none;
    color: var(--mud-palette-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.sp-roles-colhead:focus-visible,
.sp-roles-check:focus-visible {
    outline: none;
    border-radius: var(--sp-radius-sm);
    box-shadow: var(--sp-focus-ring);
}

.sp-roles-lock {
    margin-left: 0.2rem;
    font-size: 0.9rem;
    vertical-align: middle;
}

.sp-roles-td {
    text-align: center;
}

.sp-roles-td.is-direct {
    background: color-mix(in srgb, var(--mud-palette-success) 8%, var(--mud-palette-surface));
}

.sp-roles-td.is-inherited {
    background: color-mix(in srgb, var(--mud-palette-info) 6%, var(--mud-palette-surface));
}

.sp-roles-td.is-changed {
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, var(--mud-palette-surface));
}

.sp-roles-check {
    width: 1rem;
    height: 1rem;
    accent-color: var(--mud-palette-primary);
    cursor: pointer;
}

.sp-roles-check:disabled {
    cursor: not-allowed;
}

/* The phone's matrix: one role at a time. */
.sp-roles-matrix-single {
    display: none;
    flex-direction: column;
    gap: 0.6rem;
}

.sp-roles-single-group {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sp-radius-sm);
    min-width: 0;
}

.sp-roles-single-group legend {
    padding: 0 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Pending changes: a tray that stays in reach while the matrix scrolls. */
.sp-roles-tray {
    position: sticky;
    bottom: 0.75rem;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 55%, var(--mud-palette-lines-default));
    border-radius: var(--sp-radius-md);
    background: color-mix(in srgb, var(--mud-palette-warning) 10%, var(--mud-palette-surface));
    box-shadow: 0 4px 16px color-mix(in srgb, var(--mud-palette-text-primary) 14%, transparent);
    font-size: 0.84rem;
}

.sp-roles-tray > span {
    flex: 1 1 14rem;
}

.sp-roles-tray.is-inline {
    position: static;
    box-shadow: none;
}

.sp-roles-composite {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.4rem 0.65rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.sp-role-list .sp-roles-composite:first-child {
    border-top: 0;
}

.sp-roles-composite .sp-acct-permission-text {
    flex: 1 1 auto;
}

.sp-roles-composite.is-removed .sp-acct-permission-text {
    text-decoration: line-through;
    color: var(--mud-palette-text-secondary);
}

.sp-roles-composite.is-added {
    background: color-mix(in srgb, var(--mud-palette-success) 8%, transparent);
}

.sp-roles-staged {
    font-size: var(--sp-text-xs);
    font-style: italic;
    color: color-mix(in srgb, var(--mud-palette-warning) 70%, var(--mud-palette-text-primary));
}

.sp-roles-picker-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.sp-roles-picker-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 55vh;
    overflow-y: auto;
}

.sp-roles-option {
    align-items: flex-start;
    padding: 0.2rem 0;
}

.sp-roles-change {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

@media (max-width: 600px) {
    .sp-roles-matrix-wrap {
        display: none;
    }

    .sp-roles-matrix-single {
        display: flex;
    }

    .sp-roles-columns {
        max-width: none;
    }
}

/* ══ Dashboard (/) ═══════════════════════════════════════════════════════════════════════════════════════
   The overview, attention first, in the consoles' language: the same header, rows, state words and tones. It replaces
   IndexComponent.razor.css, whose light-palette bands and fixed colours did not follow dark mode, whose warning text was
   about 2:1 on white, whose 0.6-0.68rem labels were below a readable size, and which had no focus-visible style and no
   reduced-motion guard. Tokens only; every focusable has a visible focus; motion only when the reader allows it.

   Live polish. The page sits in the consoles' frame (PageWrapper), and these few values set its rhythm - one section
   gap, one gap between cards, one card padding - so every card, tile, list and the chart line up on the same edges.
   The grids switch on the page's own width (a container query), not the window's: with the drawer open a 1280px
   window leaves the page about 1000px, which a media query would have treated as wide. Column counts come from the
   page (DashboardPresentation.TileColumns / CardColumns) as --sp-dash-cols(-mid, -narrow). */

.sp-dash {
    container: sp-dash / inline-size;
    --sp-dash-gap: 1.75rem;
    --sp-dash-card-gap: 0.85rem;
    --sp-dash-pad-y: 0.9rem;
    --sp-dash-pad-x: 1rem;
    gap: var(--sp-dash-gap);
    /* The last cards clear the page's end (and, below md, the bottom toolbar's room in MainLayout). */
    padding-bottom: 1rem;
}

/* The progress slot sits tight under the header, as on the consoles, whatever the section gap. */
.sp-dash > .sp-console-progress-slot {
    margin-top: calc(-1 * var(--sp-dash-gap));
    margin-bottom: calc(0.5rem - var(--sp-dash-gap));
}

.sp-dash-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.sp-dash-section-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.005em;
    color: var(--mud-palette-text-primary);
}

.sp-dash-section-note {
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.sp-dash-lead {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.sp-dash-skeleton {
    display: inline-block;
    width: 4.5rem;
    height: 1.4rem;
    border-radius: var(--sp-radius-sm);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
}

.sp-dash-skeleton.is-wide {
    width: min(22rem, 100%);
}

/* ── Header: the status groups, the scope picker, Live and Refresh ── */

.sp-dash-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    min-width: 0;
}

.sp-dash-zone {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.sp-dash-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* The same height as the Live pill beside it, so the two read as one control group. */
.sp-dash-controls .sp-dash-refresh {
    min-height: 32px;
}

.sp-dash-scope {
    min-width: 14rem;
}

/* The picker's dense margins pushed it below the buttons' centre line; the actions row centres it instead. (Class lands
   on MudAutocomplete's outer element, with the input control inside it.) */
.sp-dash .sp-dash-scope .mud-input-control,
.sp-dash .sp-dash-scope.mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

/* ── Needs attention ── */

.sp-dash-attention {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sp-radius-md);
    background: var(--mud-palette-surface);
    overflow: clip;
}

/* Chip, text, chevron (or Try again) on one line at every width: the consoles' phone layout names areas for an icon
   column these rows do not have, so it is reset. */
.sp-dash-attention > .sp-dash-attention-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: none;
    padding: 0.65rem var(--sp-dash-pad-x);
}

.sp-dash-attention > .sp-dash-attention-row:last-child {
    border-bottom: 0;
}

.sp-dash-attention-text {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
    text-decoration: none;
}

/* Raised above the row's stretched link, so it can be pressed. */
.sp-dash-attention-retry {
    position: relative;
    z-index: 1;
}

/* All clear (or still checking): a quiet card of its own, on the same edges as the list it stands in for. */
.sp-dash-attention-none {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    margin: 0;
    padding: 0.75rem var(--sp-dash-pad-x);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sp-radius-md);
    background: var(--mud-palette-surface);
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Organisations needing attention (platform managers) ── */

.sp-dash-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sp-radius-md);
    background: var(--mud-palette-surface);
}

.sp-dash-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.sp-dash-table th,
.sp-dash-table td {
    padding: 0.5rem var(--sp-dash-pad-x);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    text-align: left;
    color: var(--mud-palette-text-primary);
}

.sp-dash-table thead th {
    font-size: var(--sp-text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.sp-dash-table tbody tr:last-child > * {
    border-bottom: 0;
}

.sp-dash-table .is-number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sp-dash-table a:focus-visible {
    outline: none;
    box-shadow: var(--sp-focus-ring);
    border-radius: var(--sp-radius-sm);
}

/* ── Grids ── */

.sp-dash-tiles,
.sp-dash-cards {
    display: grid;
    grid-template-columns: repeat(var(--sp-dash-cols, 3), minmax(0, 1fr));
    gap: var(--sp-dash-card-gap);
    align-items: stretch;
}

/* The chart and the Webhooks card: 2:1 side by side; either alone takes the row (the card at card width). */
.sp-dash-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-dash-card-gap);
    align-items: stretch;
}

.sp-dash-split.is-pair {
    grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
}

.sp-dash-split.is-card-only {
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}

.sp-dash-timeline {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sp-dash-timeline > * {
    flex: 1 1 auto;
}

@container sp-dash (max-width: 59.99rem) {
    .sp-dash-tiles,
    .sp-dash-cards {
        grid-template-columns: repeat(var(--sp-dash-cols-mid, 2), minmax(0, 1fr));
    }

    .sp-dash-split.is-pair {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Three cards two to a row: the third takes the whole row rather than leaving a hole beside it. */
@container sp-dash (min-width: 36rem) and (max-width: 59.99rem) {
    .sp-dash-cards > :last-child:nth-child(odd):not(:only-child) {
        grid-column: 1 / -1;
    }
}

@container sp-dash (max-width: 35.99rem) {
    .sp-dash-tiles,
    .sp-dash-cards {
        grid-template-columns: repeat(var(--sp-dash-cols-narrow, 1), minmax(0, 1fr));
    }

    .sp-dash-split.is-card-only {
        grid-template-columns: minmax(0, 1fr);
    }

    /* A phone: the status groups one to a line, no dangling separators, and the zone (already in "Updated 09:45
       BST") left out; the picker the full width. */
    .sp-dash-meta {
        flex: 1 1 100%;
    }

    .sp-dash-meta-sep,
    .sp-dash-zone {
        display: none;
    }

    .sp-dash-scope {
        min-width: 0;
        width: 100%;
    }
}

/* A phone's tighter rhythm. A media query, not the container: an element cannot query itself, and these are set on
   the page's root. */
@media (max-width: 600px) {
    .sp-dash {
        --sp-dash-gap: 1.4rem;
        --sp-dash-card-gap: 0.65rem;
        --sp-dash-pad-x: 0.85rem;
    }
}

/* ── Data flow: tiles ── */

.sp-dash-tile {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    padding: var(--sp-dash-pad-y) var(--sp-dash-pad-x);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sp-radius-md);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.sp-dash-tile:hover {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 35%, var(--mud-palette-lines-default));
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface));
}

.sp-dash-tile:focus-visible {
    outline: none;
    box-shadow: var(--sp-focus-ring);
}

/* A count no page lists exactly (a platform manager's webhook deliveries for another scope) is not a link. */
.sp-dash-tile.is-static:hover {
    border-color: var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.sp-dash-tile.is-bad {
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--mud-palette-error) 75%, transparent);
}

.sp-dash-tile.is-warn {
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--mud-palette-warning) 80%, transparent);
}

.sp-dash-tile.is-bad:focus-visible,
.sp-dash-tile.is-warn:focus-visible {
    box-shadow: var(--sp-focus-ring);
}

/* Labels wrap rather than truncate, so the window ("· 24h") is never cut off; two lines are always reserved, so the
   values of a row of tiles sit on one line whichever labels wrap. */
.sp-dash-tile-label {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    min-height: 2.6em;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mud-palette-text-secondary);
}

.sp-dash-tile-icon {
    flex-shrink: 0;
    font-size: 1rem;
    color: color-mix(in srgb, var(--mud-palette-primary) 80%, var(--mud-palette-text-secondary));
}

.sp-dash-tile-value {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.sp-dash-tile.is-bad .sp-dash-tile-value {
    color: color-mix(in srgb, var(--mud-palette-error) 80%, var(--mud-palette-text-primary));
}

.sp-dash-tile.is-warn .sp-dash-tile-value {
    color: color-mix(in srgb, var(--mud-palette-warning) 65%, var(--mud-palette-text-primary));
}

.sp-dash-tile-value.is-missing,
.sp-dash-tile.is-bad .sp-dash-tile-value.is-missing,
.sp-dash-tile.is-warn .sp-dash-tile-value.is-missing {
    color: var(--mud-palette-text-secondary);
}

.sp-dash-tile-detail {
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.sp-dash-tile-detail.is-bad {
    color: color-mix(in srgb, var(--mud-palette-error) 85%, var(--mud-palette-text-primary));
}

.sp-dash-tile-detail.is-warn {
    color: color-mix(in srgb, var(--mud-palette-warning) 70%, var(--mud-palette-text-primary));
}

.sp-dash-tile-detail.is-good {
    color: color-mix(in srgb, var(--mud-palette-success) 75%, var(--mud-palette-text-primary));
}

/* ── Cards: integrations & services, webhooks, recent activity ── */

.sp-dash-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
    padding: var(--sp-dash-pad-y) var(--sp-dash-pad-x);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sp-radius-md);
    background: var(--mud-palette-surface);
}

/* Also the /webhooks deliveries card's head (WebhookDeliveryList), which shares these classes. */
.sp-dash-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    min-height: 1.75rem;
}

.sp-dash-card-icon {
    color: var(--mud-palette-primary);
}

/* The overview's cards carry their icon in a tinted square, as the consoles' rows do. */
span.sp-dash-card-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--sp-radius-sm);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    color: color-mix(in srgb, var(--mud-palette-primary) 85%, var(--mud-palette-text-primary));
}

span.sp-dash-card-icon .mud-icon-root {
    font-size: 1.05rem;
}

.sp-dash-card-title {
    margin: 0;
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--mud-palette-text-primary);
}

.sp-dash-spacer {
    flex: 1 1 auto;
}

.sp-dash-card-link,
.sp-dash-goto-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    text-decoration: none;
    border-radius: var(--sp-radius-sm);
}

.sp-dash-card-link {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0 0.1rem 0.2rem;
    white-space: nowrap;
}

.sp-dash-card-link-icon {
    font-size: 1.1rem;
}

.sp-dash-card-link:hover,
.sp-dash-goto-link:hover {
    text-decoration: underline;
}

.sp-dash-card-link:focus-visible,
.sp-dash-goto-link:focus-visible,
.sp-dash-card-sub a:focus-visible {
    outline: none;
    box-shadow: var(--sp-focus-ring);
}

.sp-dash-card-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.sp-dash-card-skeleton .sp-dash-skeleton {
    width: 100%;
    height: 0.95rem;
}

.sp-dash-card-skeleton .sp-dash-skeleton:nth-child(even) {
    width: 70%;
}

.sp-dash-card-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.sp-dash-card-state .mud-icon-root {
    color: color-mix(in srgb, var(--mud-palette-warning) 70%, var(--mud-palette-text-primary));
}

.sp-dash-card-line {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--mud-palette-text-primary);
}

.sp-dash-card-sub {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.sp-dash-card-sub a {
    color: var(--mud-palette-primary);
    border-radius: var(--sp-radius-sm);
}

.sp-dash-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.sp-dash-card-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    font-size: 0.84rem;
}

.sp-dash-card-item-name {
    overflow-wrap: anywhere;
}

/* Label over value, as the tiles: "Patients / 1,204", "Endpoints / 3 of 4 active". */
.sp-dash-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0;
}

.sp-dash-facts > div {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.sp-dash-facts.is-stacked {
    flex-direction: column;
    gap: 0.65rem;
}

.sp-dash-facts dt {
    font-size: var(--sp-text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--mud-palette-text-secondary);
}

.sp-dash-facts dd {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

/* ── Recent activity: list cards ── */

/* The list runs to the card's edges, under a rule, and its last row to the card's rounded corners. */
.sp-dash-card.is-feed {
    overflow: clip;
}

.sp-dash-feed {
    margin: 0 calc(-1 * var(--sp-dash-pad-x, 1rem)) calc(-1 * var(--sp-dash-pad-y, 0.9rem));
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* One shape for every feed: the line and its details on the left, the state on the right. The consoles' phone layout
   (an icon column and named areas) is reset here, because these rows have no icon. */
.sp-dash-feed > .sp-dash-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: none;
    gap: 0.75rem;
    min-height: 3.4rem;
    padding: 0.55rem var(--sp-dash-pad-x, 1rem);
}

.sp-dash-feed > .sp-dash-row:last-child {
    border-bottom: 0;
}

.sp-dash-feed .sp-console-row-main {
    grid-area: auto;
    gap: 0.15rem;
}

/* The consoles' row sentence size (sp-console-row-sentence), so a row reads the same here and on the page it opens. */
.sp-dash-row-title {
    display: block;
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-dash-row-rest {
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

/* One line of details as well: the source gives way (with an ellipsis) before the time does. */
.sp-dash-feed .sp-console-row-meta {
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.sp-dash-feed .sp-console-meta-item {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-dash-feed .sp-console-meta-item:last-child {
    flex-shrink: 0;
}

/* The state, small: a row is read by its line, the chip confirms it. */
.sp-dash-feed .sp-dash-row .sp-tone-chip {
    padding: 0.05rem 0.45rem;
}

.sp-dash-feed-empty {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.sp-dash-goto {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-dash-goto-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.1rem;
    font-size: 0.9rem;
}

/* A phone: attention first (it already is), each feed its latest three ("View all" for the rest). */
@media (max-width: 600px) {
    .sp-dash-feed > .sp-dash-row:nth-child(n + 4) {
        display: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .sp-dash-tile {
        transition: background-color 0.12s ease, border-color 0.12s ease;
    }
}

/* ── Webhooks (/webhooks, /webhooks/deliveries, /webhooks/new, /webhooks/{id}) ──────────────────────────── */

/* Palette tokens only (no literal colours), so the light and dark themes both hold. */

/* The two sibling views, as a segmented pair of links under the header. */
.sp-webhooks-switch {
    display: inline-flex;
    gap: 0;
    margin: 0 0 0.75rem;
    padding: 2px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: var(--mud-palette-surface);
}

.sp-webhooks-switch-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 32px;
    padding: 0.25rem 0.9rem;
    border-radius: 999px;
    color: var(--mud-palette-text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
}

.sp-webhooks-switch-item:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
}

.sp-webhooks-switch-item:focus-visible {
    outline: none;
    box-shadow: var(--sp-focus-ring);
}

/* Current: filled tint and bolder text - not colour alone (aria-current says it too). */
.sp-webhooks-switch-item.is-active {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));
    color: color-mix(in srgb, var(--mud-palette-primary) 75%, var(--mud-palette-text-primary));
    font-weight: 600;
}

.sp-webhooks-notice {
    margin-bottom: 0.75rem;
}

.sp-webhooks-notice .mud-alert-message {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
}

/* A row: icon, name with address and meta, then its actions (Send test / Send again, and the menu). */
.sp-webhooks-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
}

.sp-webhooks-delrow {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.sp-webhooks-delrow.has-check {
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
}

/* Raised above the stretched open button, so a click on them is theirs. */
.sp-webhooks-check,
.sp-webhooks-row-actions,
.sp-webhooks-rowtest a {
    position: relative;
    z-index: 1;
}

.sp-webhooks-check {
    display: inline-flex;
    align-items: center;
    padding-top: 0.45rem;
}

.sp-webhooks-check input,
.sp-webhooks-picker-item input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--mud-palette-primary);
}

.sp-webhooks-row-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.sp-webhooks-address {
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.sp-webhooks-flag {
    color: var(--mud-palette-warning);
    vertical-align: text-bottom;
}

.sp-webhooks-phi {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    color: color-mix(in srgb, var(--mud-palette-info) 70%, var(--mud-palette-text-primary));
    font-size: var(--sp-text-xs);
    font-weight: 600;
}

.sp-webhooks-phi .mud-icon-root {
    font-size: 1rem;
}

/* A test sent from the list, said under its row. */
.sp-webhooks-rowtest {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.6rem;
    margin-top: 0.35rem;
    padding: 0.35rem 0.6rem;
    border-radius: var(--sp-radius-sm);
    font-size: 0.82rem;
}

.sp-webhooks-rowtest.is-good {
    background: color-mix(in srgb, var(--mud-palette-success) 10%, var(--mud-palette-surface));
}

.sp-webhooks-rowtest.is-good .mud-icon-root {
    color: var(--mud-palette-success);
}

.sp-webhooks-rowtest.is-bad {
    background: color-mix(in srgb, var(--mud-palette-error) 8%, var(--mud-palette-surface));
}

.sp-webhooks-rowtest.is-bad .mud-icon-root {
    color: var(--mud-palette-error);
}

.sp-webhooks-bulk {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.sp-webhooks-lead {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.sp-webhooks-lead p {
    margin: 0 0 0.5rem;
}

.sp-webhooks-lead code,
.sp-webhooks-sentence code {
    font-family: var(--sp-font-mono);
    font-size: 0.82rem;
}

.sp-webhooks-sentence {
    margin: 0.25rem 0 0.5rem;
    font-size: 0.92rem;
    line-height: 1.5;
}

.sp-webhooks-choices {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* The drawer's sections. */
.sp-webhooks-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
}

.sp-webhooks-windows {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.25rem 0 0.6rem;
}

.sp-webhooks-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 0.5rem;
    margin: 0 0 0.5rem;
}

.sp-webhooks-stats > div {
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sp-radius-md);
}

.sp-webhooks-stats dt {
    color: var(--mud-palette-text-secondary);
    font-size: var(--sp-text-xs);
}

.sp-webhooks-stats dd {
    margin: 0.15rem 0 0;
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.sp-webhooks-stats dd.is-bad {
    color: var(--mud-palette-error);
}

.sp-webhooks-spark {
    margin: 0 0 0.5rem;
}

.sp-webhooks-spark svg {
    display: block;
    width: 100%;
    height: 2.5rem;
}

.sp-webhooks-spark-ok {
    fill: color-mix(in srgb, var(--mud-palette-success) 70%, var(--mud-palette-surface));
}

.sp-webhooks-spark-bad {
    fill: var(--mud-palette-error);
}

.sp-webhooks-key::before {
    content: "";
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    margin-right: 0.25rem;
    border-radius: 2px;
}

.sp-webhooks-key.is-ok::before {
    background: color-mix(in srgb, var(--mud-palette-success) 70%, var(--mud-palette-surface));
}

.sp-webhooks-key.is-bad::before {
    background: var(--mud-palette-error);
}

.sp-webhooks-group-head {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.75rem 0 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.sp-webhooks-events,
.sp-webhooks-deliveries,
.sp-webhooks-replay-list,
.sp-webhooks-review-events {
    display: grid;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-webhooks-events li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.6rem;
    padding: 0.35rem 0.5rem;
    border-radius: var(--sp-radius-sm);
    font-size: 0.86rem;
}

.sp-webhooks-events li.is-warn {
    background: color-mix(in srgb, var(--mud-palette-warning) 8%, var(--mud-palette-surface));
}

.sp-webhooks-events code,
.sp-webhooks-picker-meta code {
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.sp-webhooks-deliveries > li {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.sp-webhooks-delivery-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.6rem;
}

.sp-webhooks-delivery-name {
    font-weight: 600;
    font-size: 0.86rem;
}

.sp-webhooks-delivery-detail {
    display: block;
    margin-top: 0.15rem;
}

.sp-webhooks-tries {
    margin: 0.4rem 0 0.2rem 0.5rem;
}

.sp-webhooks-step-day {
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
}

.sp-webhooks-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.sp-webhooks-header-name {
    display: block;
}

.sp-webhooks-replay-list li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.3rem 0.5rem;
    border-radius: var(--sp-radius-sm);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, var(--mud-palette-surface));
    font-size: 0.86rem;
}

.sp-webhooks-review-events {
    margin-top: 0.3rem;
    font-size: 0.84rem;
}

/* The events picker: search, the chosen tray, then the catalogue by source. */
.sp-webhooks-picker {
    display: grid;
    gap: 0.6rem;
}

.sp-webhooks-picker-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.sp-webhooks-picker-bar .mud-input-control {
    flex: 1 1 18rem;
}

.sp-webhooks-picker-count {
    color: var(--mud-palette-text-secondary);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.sp-webhooks-tray {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.sp-webhooks-tray-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    padding: 0.15rem 0.2rem 0.15rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 40%, var(--mud-palette-lines-default));
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.sp-webhooks-tray-item.is-warn {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 60%, var(--mud-palette-lines-default));
    background: color-mix(in srgb, var(--mud-palette-warning) 10%, var(--mud-palette-surface));
}

.sp-webhooks-tray-flag {
    color: var(--mud-palette-text-secondary);
    font-size: var(--sp-text-xs);
}

.sp-webhooks-tray-remove {
    display: inline-flex;
    padding: 0.1rem;
    border: 0;
    border-radius: 50%;
    background: none;
    color: inherit;
    cursor: pointer;
}

.sp-webhooks-tray-remove:focus-visible {
    outline: none;
    box-shadow: var(--sp-focus-ring);
}

.sp-webhooks-picker-groups {
    max-height: 26rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.sp-webhooks-picker-group {
    min-width: 0;
    margin: 0 0 0.6rem;
    padding: 0;
    border: 0;
}

.sp-webhooks-picker-legend {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.sp-webhooks-picker-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.5rem;
    padding: 0.35rem 0.4rem;
    border-radius: var(--sp-radius-sm);
}

.sp-webhooks-picker-item:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, transparent);
}

.sp-webhooks-picker-item input {
    margin-top: 0.2rem;
}

.sp-webhooks-picker-item input:focus-visible {
    outline: none;
    box-shadow: var(--sp-focus-ring);
}

.sp-webhooks-picker-item label {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
    cursor: pointer;
}

.sp-webhooks-picker-item.is-disabled label {
    cursor: not-allowed;
}

.sp-webhooks-picker-item.is-disabled .sp-webhooks-picker-name {
    color: var(--mud-palette-text-secondary);
}

.sp-webhooks-picker-name {
    font-size: 0.88rem;
    font-weight: 500;
}

.sp-webhooks-picker-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.6rem;
    font-size: var(--sp-text-xs);
}

.sp-webhooks-picker-reason {
    flex: 1 1 100%;
    color: color-mix(in srgb, var(--mud-palette-warning) 70%, var(--mud-palette-text-primary));
}

/* Headers: name, write-only value, remove. */
.sp-webhooks-legend {
    padding: 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.sp-webhooks-headers {
    display: grid;
    gap: 1rem;
}

.sp-webhooks-header-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
}

.sp-webhooks-header-set {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.sp-webhooks-advanced summary {
    padding: 0.35rem 0;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.sp-webhooks-advanced[open] summary {
    margin-bottom: 0.5rem;
}

/* The secret shown once (the rotate dialog, the create page's result). */
.sp-whreveal-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.sp-whreveal-lead,
.sp-whreveal-usage {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.sp-whreveal-usage {
    margin-top: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.sp-whreveal-leave {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 45%, var(--mud-palette-lines-default));
    border-radius: var(--sp-radius-md);
    background: color-mix(in srgb, var(--mud-palette-error) 6%, var(--mud-palette-surface));
}

.sp-whreveal-leave p {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
}

.sp-whreveal-leave-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.sp-whreveal-hint {
    margin-right: auto;
    padding-left: 0.5rem;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

/* A phone: rows stack (no column squeezed to nothing, nothing wider than the screen), the row's main button folds into
   its menu, a header's fields stack, and the two views share the width. */
@media (max-width: 600px) {
    .sp-webhooks-row,
    .sp-webhooks-delrow,
    .sp-webhooks-delrow.has-check {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: none;
    }

    .sp-webhooks-row > * {
        grid-area: auto;
    }

    .sp-webhooks-delrow.has-check .sp-webhooks-check {
        grid-row: span 2;
    }

    /* With the tick box in the first column the row icon took the second on a line of its own and pushed the text below
       it; on a phone the box stands in for the icon. */
    .sp-webhooks-delrow.has-check .sp-console-row-icon {
        display: none;
    }

    /* "Send N selected again" and "Clear selection" sat beside the heading in a bar that doesn't wrap, squeezing the
       heading into a narrow column at 375px: they wrap under it instead. */
    .sp-console-results-head:has(.sp-webhooks-bulk) {
        flex-wrap: wrap;
    }

    .sp-webhooks-row .sp-console-row-time,
    .sp-webhooks-row-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .sp-webhooks-row-primary,
    .sp-webhooks-row-actions .sp-guarded {
        display: none;
    }

    .sp-webhooks-header-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .sp-webhooks-header-row > :nth-child(2) {
        grid-column: 1 / 2;
    }

    .sp-webhooks-switch {
        display: flex;
    }

    .sp-webhooks-switch-item {
        flex: 1 1 50%;
        justify-content: center;
    }
}

/* ── Events catalogue (/events, /events/{type}) ─────────────────────────────────────────────────────── */

/* Palette tokens only (no literal colours), so the light and dark themes both hold - EventsConventionTests. */

.sp-events-view-count,
.sp-events-group-count {
    margin-left: 0.15rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
    font-size: var(--sp-text-xs);
    font-variant-numeric: tabular-nums;
}

.sp-events-help {
    max-width: 24rem;
    padding: 0.75rem 0.9rem;
    font-size: 0.82rem;
    line-height: 1.45;
}

.sp-events-help p {
    margin: 0.4rem 0 0;
    color: var(--mud-palette-text-secondary);
}

.sp-events-nudge {
    margin-bottom: 0.75rem;
}

.sp-events-maintenance {
    margin-bottom: 0.75rem;
}

.sp-events-maintenance-keys {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
    margin-top: 0.4rem;
    overflow-wrap: anywhere;
}

.sp-events-group + .sp-events-group {
    margin-top: 0.25rem;
}

.sp-events-group-head {
    padding: 0;
}

.sp-events-group-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    min-height: 2.25rem;
    padding: 0.35rem 0.95rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.sp-events-group-toggle:focus-visible {
    outline: none;
    box-shadow: inset var(--sp-focus-ring);
}

/* A row: icon, the name with its description and meta, then its actions (subscribe, and the menu). */
.sp-events-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
}

.sp-events-row-name {
    font-weight: 600;
}

.sp-events-row-desc {
    display: -webkit-box;
    margin: 0.15rem 0 0;
    overflow: hidden;
    color: var(--mud-palette-text-secondary);
    font-size: 0.84rem;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.sp-events-row-archived .sp-events-row-name {
    color: var(--mud-palette-text-secondary);
}

.sp-events-row-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.sp-events-usage {
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.sp-events-muted {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.sp-events-hint {
    margin: 0.35rem 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
}

.sp-events-hint code,
.sp-events-preview code {
    font-family: var(--sp-font-mono);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

/* The drawer and the full page. */
.sp-events-headline {
    align-items: flex-start;
}

.sp-events-headline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--sp-radius-md);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface));
    color: var(--mud-palette-primary);
}

.sp-events-key-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.sp-events-key-row code {
    font-family: var(--sp-font-mono);
    overflow-wrap: anywhere;
    user-select: all;
}

.sp-events-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
}

.sp-events-actions-gap {
    flex: 1 1 auto;
}

.sp-events-tabpanel {
    padding-top: 0.75rem;
}

.sp-events-description {
    margin: 0.35rem 0 0.85rem;
    line-height: 1.5;
    white-space: pre-line;
}

.sp-events-code {
    margin: 0.35rem 0 0.75rem;
    padding: 0.65rem 0.8rem;
    overflow-x: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sp-radius-sm);
    background: color-mix(in srgb, var(--mud-palette-background-gray) 60%, var(--mud-palette-surface));
    color: var(--mud-palette-text-primary);
    font-family: var(--sp-font-mono);
    font-size: 0.78rem;
    line-height: 1.5;
}

.sp-events-code:focus-visible {
    outline: none;
    box-shadow: var(--sp-focus-ring);
}

.sp-events-bytenant {
    width: 100%;
    margin-top: 0.85rem;
    border-collapse: collapse;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.sp-events-bytenant caption {
    padding-bottom: 0.35rem;
    color: var(--mud-palette-text-secondary);
    font-size: var(--sp-text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
}

.sp-events-bytenant th,
.sp-events-bytenant td {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    text-align: left;
}

.sp-events-bytenant td {
    text-align: right;
}

/* Subscribers tab. */
.sp-events-subs-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
}

.sp-events-subs-toolbar .sp-console-search {
    flex: 1 1 14rem;
}

.sp-events-subs-channel {
    flex: 0 1 11rem;
}

.sp-events-subs-add {
    margin-left: auto;
}

.sp-events-bulkbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin: 0.5rem 0;
    padding: 0.5rem 0.75rem;
    border-radius: var(--sp-radius-sm);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
}

.sp-events-subs-rows .sp-console-row {
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
}

.sp-events-subs-head {
    padding: 0.35rem 0.95rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 0.8rem;
}

.sp-events-subs-check {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--mud-palette-primary);
}

.sp-events-subs-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.sp-events-outcomes-alert {
    margin: 0.5rem 0;
}

.sp-events-outcomes {
    display: grid;
    gap: 0.3rem;
    margin: 0.4rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.84rem;
}

.sp-events-outcome {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
}

.sp-events-outcome.is-done .mud-icon-root {
    color: var(--mud-palette-success);
}

.sp-events-outcome.is-refused .mud-icon-root {
    color: var(--mud-palette-error);
}

.sp-events-outcome-name {
    font-weight: 600;
}

.sp-events-outcome-text {
    color: var(--mud-palette-text-secondary);
}

.sp-events-outcome-warn {
    flex: 1 1 100%;
    color: var(--mud-palette-warning-darken);
    font-size: 0.8rem;
}

.sp-events-summary {
    margin: 0 0 0.5rem;
    font-weight: 600;
}

/* Dialogs. */
.sp-events-dialog-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.sp-events-form {
    display: grid;
    gap: 0.75rem;
}

.sp-events-scope-banner,
.sp-events-locked {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--sp-radius-sm);
    background: color-mix(in srgb, var(--mud-palette-info) 10%, var(--mud-palette-surface));
    font-size: 0.86rem;
    line-height: 1.45;
}

.sp-events-locked {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, var(--mud-palette-surface));
}

.sp-events-locked code {
    font-family: var(--sp-font-mono);
    overflow-wrap: anywhere;
}

.sp-events-preview {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: -0.25rem 0 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.82rem;
}

.sp-events-created p {
    margin: 0 0 0.5rem;
    line-height: 1.5;
}

.sp-events-lead {
    margin: 0 0 0.75rem;
}

.sp-events-person-option {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.sp-events-channels {
    margin: 0;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sp-radius-sm);
}

.sp-events-channels legend {
    padding: 0 0.25rem;
    color: var(--mud-palette-text-secondary);
    font-size: var(--sp-text-xs);
}

.sp-events-footnote {
    margin: 0.75rem 0 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
}

/* A phone: one column per row, the subscribe button folds into the row's menu, the toolbar stacks. */
@media (max-width: 600px) {
    .sp-events-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: none;
    }

    .sp-events-row .sp-console-row-icon,
    .sp-events-row .sp-console-row-main {
        grid-area: auto;
    }

    .sp-events-row-primary,
    .sp-events-row-actions .sp-guarded {
        display: none;
    }

    .sp-events-subs-rows .sp-console-row {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: none;
    }

    .sp-events-subs-rows .sp-console-row > * {
        grid-area: auto;
    }

    .sp-events-subs-actions,
    .sp-events-subs-rows .sp-console-row-time {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .sp-events-subs-add {
        margin-left: 0;
    }

    .sp-events-actions-gap {
        display: none;
    }
}

/* The Organisations page: the links out of a row sit side by side and wrap rather than push the row wide. */
.sp-orgs-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.9rem;
    justify-content: flex-end;
}

/* The Regenerate button of a row sits in its own cell, level with the links. */
.sp-orgs-actions {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
}

/* One code editor's own states (MonacoEditorBoundary): a placeholder while the editor library loads, and the sentence with
   "Try again" when the editor could not start. Palette tokens only, so dark mode needs no rules of its own. */

.sp-monaco-wait {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem;
    font-size: 0.84rem;
    color: var(--mud-palette-text-secondary);
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: var(--sp-radius-sm);
}

.sp-monaco-failed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 55%, var(--mud-palette-lines-default));
    border-radius: var(--sp-radius-sm);
    background: color-mix(in srgb, var(--mud-palette-error) 7%, var(--mud-palette-surface));
}

.sp-monaco-failed-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.sp-monaco-retry {
    min-height: 2.75rem;
    padding: 0 0.9rem;
    font: inherit;
    font-weight: 600;
    color: var(--mud-palette-primary);
    background: transparent;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sp-radius-sm);
    cursor: pointer;
}

.sp-monaco-retry:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.sp-monaco-retry:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* The Sign-in directories page (/sign-in-directories) and its wizard. Palette tokens only, so dark mode needs no rules of its own; nothing
   scrolls sideways (min-width: 0 on flex children, identifiers wrap anywhere). */

.sp-dirs-filter {
    min-width: 11rem;
}

.sp-dirs-intro {
    margin: 0 0 0.5rem;
}

.sp-dirs-guide {
    margin: 0.5rem 0 0;
    text-align: center;
}

.sp-dirs-row-org {
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.sp-dirs-actions {
    margin-bottom: 0.5rem;
}

.sp-dirs-fact-value {
    overflow-wrap: anywhere;
}

/* A preview or an apply: what is done to what, one line each. A line that removes access is marked, not only coloured. */
.sp-dirs-plan,
.sp-dirs-test {
    margin: 0.75rem 0;
    padding: 0.75rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sp-radius-md);
    background: var(--mud-palette-surface);
}

.sp-dirs-plan-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.75rem 0 0.4rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.sp-dirs-plan > .sp-dirs-plan-title:first-child,
.sp-dirs-test > .sp-dirs-plan-title:first-child {
    margin-top: 0;
}

.sp-dirs-plan-list,
.sp-dirs-test-list,
.sp-dirs-groups {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sp-dirs-plan-line,
.sp-dirs-test-check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.sp-dirs-plan-line.is-removal {
    padding-left: 0.5rem;
    border-left: 3px solid var(--mud-palette-warning);
}

.sp-dirs-test-check.is-failed {
    color: var(--mud-palette-error);
}

/* The mapping, as a list: the role first, then the group that gives it. */
.sp-dirs-group {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.6rem;
    min-width: 0;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sp-radius-sm);
}

.sp-dirs-group-role {
    font-weight: 600;
}

.sp-dirs-group-arrow {
    color: var(--mud-palette-text-secondary);
}

.sp-dirs-group-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sp-dirs-group-id {
    overflow-wrap: anywhere;
}

/* The wizard. */
.sp-dirs-label {
    margin: 0 0 0.35rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.sp-dirs-kinds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.sp-dirs-kind {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.75rem;
    font: inherit;
    text-align: left;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sp-radius-md);
    cursor: pointer;
}

.sp-dirs-kind span {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

.sp-dirs-kind:hover:not(:disabled) {
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
}

.sp-dirs-kind.is-selected {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}

.sp-dirs-kind:disabled {
    cursor: default;
    opacity: 0.8;
}

.sp-dirs-kind:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.sp-dirs-field-error {
    margin: 0.25rem 0 0.5rem;
    font-size: 0.8rem;
    color: var(--mud-palette-error);
}

.sp-dirs-secret {
    min-width: 0;
}

.sp-dirs-mapping {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sp-dirs-mapping-row {
    display: grid;
    grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.6rem;
}

.sp-dirs-test-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-top: 0.75rem;
}

.sp-dirs-steps {
    margin: 0;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sp-dirs-claim {
    max-width: 18rem;
    margin-bottom: 0.75rem;
}

@media (max-width: 600px) {
    .sp-dirs-mapping-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .sp-dirs-mapping-row > :first-child {
        grid-column: 1 / -1;
    }

    .sp-dirs-filter {
        min-width: 0;
        width: 100%;
    }
}

/* An organisation's row on the Organisations page: its sign-in directory, a status chip that links to the directory. */
.sp-orgs-dirlink {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2rem;
    color: inherit;
    text-decoration: none;
}

.sp-orgs-dirlink:hover span {
    text-decoration: underline;
}

.sp-orgs-dirlink:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* ══ MAXIMS activity (/maxims-audit, /embed/maxims-audit) ═════════════════════════════════════════════════
   The dashboard of what was changed, viewed and logged in MAXIMS, in the overview's language: the shared page header, the dashboard
   cards (sp-dash-card) and feed rows, ToneChip, the consoles' state block - and nothing else of its own but the grid of cards and the
   header's connection control. Palette tokens only, so dark mode (and an embed's theme=dark) needs no rules here.

   The component's own width, not the window's, drives its layout (container "mxa"): the portal page and an iframe in somebody's
   EPR get the same rules. A card is a grid cell with its span (MaximsAuditGrids.Spans), 12 columns when there is room and one
   column below 52.5rem. */

.mxa {
    container: mxa / inline-size;
    --sp-dash-card-gap: 0.85rem;
    --sp-dash-pad-y: 0.9rem;
    --sp-dash-pad-x: 1rem;
    padding-bottom: 1rem;
}

/* Inside somebody else's page the surface is the host's panel: a little air, no outer frame of its own. */
.mxa--embedded {
    padding: 0.75rem 0.75rem 0.5rem;
}

.mxa-note {
    margin: 0;
}

.mxa-cards {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--sp-dash-card-gap);
}

.mxa-cell {
    grid-column: span var(--mxa-span, 12);
    min-width: 0;
}

.mxa-cell > .sp-dash-card {
    height: 100%;
}

@container mxa (max-width: 52.49rem) {
    .mxa-cell {
        grid-column: 1 / -1;
    }
}

/* ── Counts: the strip, the timelines, the breakdowns, Customise ── */

/* The strip: up to eight to a row when the page is wide, four when it is middling, two on a phone. The counts are balanced
   (MaximsAuditAnalytics.TileColumns), so a second row never holds a lone tile. Tiles are the overview's own (sp-dash-tile). */
.mxa-tiles {
    display: grid;
    grid-template-columns: repeat(var(--mxa-tiles-wide, 4), minmax(0, 1fr));
    gap: var(--sp-dash-card-gap);
    align-items: stretch;
}

@container mxa (max-width: 74.99rem) {
    .mxa-tiles {
        grid-template-columns: repeat(var(--mxa-tiles-mid, 4), minmax(0, 1fr));
    }
}

@container mxa (max-width: 37.49rem) {
    .mxa-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.mxa-timeline {
    height: 100%;
}

.mxa-sample-note,
.mxa-rank-note {
    margin: 0.5rem 0 0;
    color: var(--mud-palette-text-secondary);
}

/* A breakdown: a ranked list, the count and share as text, the bar by length only in one hue. */
.mxa-rank {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mxa-rank-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 3.25rem;
    grid-template-areas:
        "label count share"
        "bar bar bar";
    column-gap: 0.6rem;
    row-gap: 0.2rem;
    align-items: baseline;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

.mxa-rank-label {
    grid-area: label;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mxa-rank-link {
    color: inherit;
    text-decoration: none;
}

.mxa-rank-link:hover {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

.mxa-rank-link:focus-visible {
    outline: none;
    box-shadow: var(--sp-focus-ring);
    border-radius: var(--sp-radius-sm);
}

.mxa-rank-count {
    grid-area: count;
    text-align: right;
}

.mxa-rank-share {
    grid-area: share;
    text-align: right;
    color: var(--mud-palette-text-secondary);
}

.mxa-rank-bar {
    grid-area: bar;
    display: block;
    height: 0.4rem;
    border-radius: 0.2rem;
    background: color-mix(in srgb, var(--mud-palette-text-disabled) 22%, var(--mud-palette-surface));
    overflow: hidden;
}

.mxa-rank-fill {
    display: block;
    height: 100%;
    border-radius: 0.2rem;
    background: color-mix(in srgb, var(--mud-palette-primary) 70%, var(--mud-palette-surface));
}

.mxa-rank-row.is-other .mxa-rank-fill {
    background: color-mix(in srgb, var(--mud-palette-text-disabled) 55%, var(--mud-palette-surface));
}

.mxa-rank-row.is-other .mxa-rank-label {
    color: var(--mud-palette-text-secondary);
}

/* Customise */
.mxa-customise-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mxa-customise-lead {
    margin: 0 0 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.mxa-customise-preset {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.mxa-customise-preset .mud-input-control {
    flex: 1 1 auto;
}

.mxa-customise-discard {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin-bottom: 0.5rem;
}

.mxa-customise-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 50vh;
    overflow-y: auto;
}

.mxa-customise-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.5rem;
    min-height: 2.75rem;
    padding: 0 0.25rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mxa-customise-row.is-off {
    color: var(--mud-palette-text-secondary);
}

.mxa-customise-moves {
    display: inline-flex;
    gap: 0.25rem;
}

@media (pointer: coarse) {
    .mxa-customise-row {
        min-height: 2.75rem;
    }

    .mxa-customise-moves .mud-button-root {
        min-height: 2.75rem;
    }
}

/* ── Header: the connection and the range ── */

.mxa-picker {
    min-width: 12rem;
}

.mxa-window {
    min-width: 9rem;
}

/* Mud's dense margins push these below the buttons' centre line; the actions row centres them instead. */
.mxa .mxa-picker,
.mxa .mxa-window {
    margin-top: 0;
    margin-bottom: 0;
}

.mxa-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sp-radius-sm);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.mxa-chip .mud-icon-root {
    flex-shrink: 0;
    color: color-mix(in srgb, var(--mud-palette-primary) 85%, var(--mud-palette-text-primary));
}

.mxa-chip-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ── States ── */

.mxa-boot {
    padding: 1rem 0;
}

.mxa-state .sp-console-state-title,
.mxa-state .sp-console-state-body {
    margin: 0;
}

.mxa-picker-large {
    width: min(22rem, 100%);
    margin-top: 0.5rem;
}

.mxa-tech-line {
    margin: 0.3rem 0 0;
    overflow-wrap: anywhere;
    font-family: var(--sp-font-mono);
}

.mxa-failure {
    align-items: flex-start;
}

.mxa-failure-text {
    flex: 1 1 14rem;
    min-width: 0;
}

.mxa-failure-text strong {
    display: block;
    color: var(--mud-palette-text-primary);
}

.mxa-tech {
    flex: 1 1 100%;
    margin-top: 0;
}

.mxa-tech p {
    margin: 0.3rem 0 0;
    overflow-wrap: anywhere;
    font-family: var(--sp-font-mono);
}

/* ── Rows ── */

/* The overview's phone rule shows a feed's latest three and sends the rest to "View all"; these grids have Older instead, so a page is
   a page at every width. */
.mxa .sp-dash-feed > .sp-dash-row:nth-child(n + 4) {
    display: grid;
}

/* A list with something after it (the unreadable note, the pager) stops short of the card's corner: the next thing carries it. */
.mxa-body > .sp-dash-feed:not(:last-child) {
    margin-bottom: 0;
}

.mxa-unreadable {
    margin: 0.5rem 0 0;
}

.mxa-pager {
    display: flex;
    justify-content: flex-end;
    gap: 0.25rem;
    margin: 0.5rem calc(-1 * var(--sp-dash-pad-x)) calc(-1 * var(--sp-dash-pad-y));
    padding: 0.2rem var(--sp-dash-pad-x);
    border-top: 1px solid var(--mud-palette-lines-default);
}

.mxa-body > .sp-dash-feed:not(:last-child) + .mxa-pager {
    margin-top: 0;
}

@container mxa (max-width: 37.5rem) {
    .mxa .sp-dash-feed .sp-console-row-meta {
        flex-wrap: wrap;
        white-space: normal;
    }
}

/* Touch targets: 44 px on a touch screen. */
@media (pointer: coarse) {
    .mxa-refresh,
    .mxa-pager .mud-button-root,
    .mxa-failure .mud-button-root,
    .sp-dash-card-stale .mud-button-root {
        min-height: 44px;
    }
}

/* ── The consoles: changes, record views and system log (/maxims-audit/changes, /views, /log) ──
   The same rows, filter bar, chips, facet rail, pager and drawer as the other consoles (sp-console-*), so what is here is only what these
   three add: the switcher between them, the notes under the filter bar, the drawer's tabs, and the step in front of content. Tokens only. */

.mxa-switcher {
    margin-bottom: 0.4rem;
}

/* The console you are on is a pressed-looking pill that can't be pressed: it keeps its colour rather than going grey like a disabled one. */
.mxa-switcher .sp-console-view:disabled {
    opacity: 1;
    cursor: default;
}

.mxa-views-note,
.mxa-window-note {
    margin: 0.25rem 0 0;
    font-size: var(--sp-text-xs);
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.mxa-account-apply {
    align-self: center;
}

.mxa-problems {
    margin: 0;
    padding-left: 1.2rem;
    text-align: left;
    color: var(--mud-palette-text-secondary);
}

.mxa-stale {
    margin-bottom: 0.5rem;
}

.mxa-console .mxa-unreadable {
    margin: 0.5rem 0.95rem 0;
}

/* "Show all in the console" sits at the left of a grid's footer, Newer and Older at the right. */
.mxa-showall {
    margin-right: auto;
}

/* ── Open in new window (chunk 1d) ──
   A real link, drawn like a text button. "Show all" and "Open in new window" stay together at the left of a grid's footer. */

.mxa-showall-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin-right: auto;
    min-width: 0;
}

.mxa-showall-group .mxa-showall {
    margin-right: 0;
}

.mxa-newwindow {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    padding: 0.25rem 0.5rem;
    border-radius: var(--sp-radius-sm);
    color: var(--mud-palette-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
}

.mxa-newwindow:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.mxa-newwindow:focus-visible {
    outline: none;
    box-shadow: var(--sp-focus-ring);
}

.mxa-newwindow .mud-icon-root {
    font-size: 1.1rem;
}

/* An entry of the "Open console" menu: the console's name, like the menu items above it. */
.mxa-newwindow--menu {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0;
    color: var(--mud-palette-text-primary);
    font-size: 1rem;
    font-weight: 400;
}

.mxa-newwindow--menu:hover {
    background: var(--mud-palette-action-default-hover);
}

.mxa-newwindow--menu:focus-visible {
    box-shadow: inset 0 0 0 2px var(--mud-palette-primary);
}

.mxa-menu-group {
    min-width: 0;
}

.mxa-menu-heading {
    margin: 0;
    padding: 0.4rem 1rem 0.1rem;
    font-size: var(--sp-text-xs);
    color: var(--mud-palette-text-secondary);
}

.mxa-menu-note {
    max-width: 18rem;
    margin: 0;
    padding: 0.25rem 1rem 0.5rem;
    font-size: var(--sp-text-xs);
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

/* ── The drawer ── */

.mxa-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0.75rem 0 0.25rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mxa-tab {
    min-height: 40px;
    padding: 0.4rem 0.9rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.mxa-tab:hover {
    color: var(--mud-palette-text-primary);
}

.mxa-tab.is-active {
    border-bottom-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.mxa-tab:focus-visible {
    outline: none;
    box-shadow: var(--sp-focus-ring);
}

.mxa-tabpanel {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}

.mxa-drawer-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    width: 100%;
}

/* ── "Show content": the step in front of what a change wrote or a log entry said ── */

.mxa-content {
    border-top: 0;
    padding-top: 0.25rem;
}

.mxa-gate {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--sp-radius-sm);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 3%, transparent);
}

.mxa-gate-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--mud-palette-text-secondary);
}

.mxa-gate-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
}

.mxa-gate-note,
.mxa-gate-reason,
.mxa-gate-error {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
}

.mxa-gate-reason {
    color: var(--mud-palette-text-secondary);
}

.mxa-gate-error {
    color: var(--mud-palette-error);
}

.mxa-content-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.mxa-content-recorded {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--sp-text-xs);
    color: var(--mud-palette-text-secondary);
}

.mxa-content-pre {
    max-height: 26rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Touch targets: 44 px on a touch screen. */
@media (pointer: coarse) {
    .mxa-tab,
    .mxa-account-apply,
    .mxa-switcher .sp-console-view,
    .mxa-drawer-foot .mud-button-root,
    .mxa-showall,
    .mxa-newwindow,
    .mxa-stale .mud-button-root {
        min-height: 44px;
    }
}

/* A phone: the tabs share the width, so none is pushed off the edge. */
@media (max-width: 599.98px) {
    .mxa-tabs {
        flex-wrap: nowrap;
    }

    .mxa-tab {
        flex: 1 1 0;
        padding-inline: 0.4rem;
        text-align: center;
    }
}

/* ── MAXIMS activity AI: "Get insights" on a row, and the drawer's Insights tab (AI plan 9.3, 9.4) ───────────────────────────────────────── */

/* The row's control sits above the stretched row button, shown on hover and keyboard focus, and always where there is no hover. */
.mxa-insight-button {
    position: relative;
    z-index: 2;
    display: inline-flex;
    margin-inline-start: 0.25rem;
    opacity: 0;
}

.sp-console-row:hover .mxa-insight-button,
.sp-console-row:focus-within .mxa-insight-button,
.mxa-insight-button:focus-within {
    opacity: 1;
}

@media (hover: none) {
    .mxa-insight-button {
        opacity: 1;
    }
}

.mxa-insight-button .mud-button-root {
    min-height: 44px;
    min-width: 44px;
}

.mxa-insights {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

.mxa-ai-disclaimer {
    margin: 0;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-inline-start: 3px solid color-mix(in srgb, var(--mud-palette-primary) 70%, transparent);
    border-radius: var(--sp-radius-sm);
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.mxa-insight-view {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.mxa-insight-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.mxa-insight-summary {
    margin: 0;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.mxa-chip-ai {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 55%, transparent);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    color: var(--mud-palette-primary);
}

.mxa-insight-timeline,
.mxa-insight-points,
.mxa-insight-limits {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mxa-insight-time {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0.6rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 0.88rem;
}

.mxa-insight-time:last-child {
    border-bottom: 0;
}

.mxa-insight-time.is-focus {
    font-weight: 600;
}

.mxa-insight-time-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.mxa-insight-note {
    display: block;
    margin-top: 0.2rem;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

.mxa-insight-point {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.4rem 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.mxa-insight-point.is-gap {
    color: var(--mud-palette-text-secondary);
}

.mxa-insight-point-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.mxa-insight-threshold {
    color: var(--mud-palette-text-secondary);
}

.mxa-insight-limits li {
    padding: 0.15rem 0;
    font-size: 0.86rem;
    color: var(--mud-palette-text-secondary);
}

/* A row an insight cites: a link in the page, never an address with anything personal in it. */
.mxa-ref {
    display: inline;
    min-height: 0;
    margin: 0 0.15rem;
    padding: 0 0.2rem;
    border: 0;
    border-radius: var(--sp-radius-sm);
    background: transparent;
    font: inherit;
    font-size: 0.86em;
    color: var(--mud-palette-primary);
    text-decoration: underline;
    cursor: pointer;
}

.mxa-ref:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.mxa-ref:focus-visible {
    outline: none;
    box-shadow: var(--sp-focus-ring);
}

.mxa-insight-progress,
.mxa-insight-problem {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.88rem;
    color: var(--mud-palette-text-secondary);
}

.mxa-insight-problem {
    padding: 0.5rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 55%, transparent);
    border-radius: var(--sp-radius-sm);
    background: color-mix(in srgb, var(--mud-palette-warning) 8%, transparent);
    color: var(--mud-palette-text-primary);
}

.mxa-insight-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.mxa-insight-from {
    font-size: 0.84rem;
    color: var(--mud-palette-text-secondary);
}

.mxa-insight-content {
    margin-top: 0.4rem;
}

@media (max-width: 599.98px) {
    .mxa-insight-time {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }
}

/* The note under the MAXIMS activity assistant's content switch (the drawer around it is the shared AiAssistantDrawer's). */
.mxa-ai-content-note {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

/* The rules page: the notification addresses card. */
.sp-rules-addresses {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
}

.sp-rules-addresses-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.sp-rules-addresses-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.sp-rules-addresses-note {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.sp-rules-addresses-list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sp-rules-addresses-list li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    overflow-wrap: anywhere;
}