/* Small, deliberately last cascade layer for the active Spectrum chrome. */
@keyframes spectrum-sidebar-flow {
    0% { background-position: 0 0, 0 0, 0 0; }
    50% { background-position: 54px -44px, -42px 58px, 28px 46px; }
    100% { background-position: -38px 64px, 58px -34px, -46px 34px; }
}

/* Keep the application mark optically centered when its name needs two
   lines.  The sidebar is a fixed-width brand rail, so letting a long title
   stay on one line makes it collide with the toggle and get clipped.  A
   narrow text measure lets names such as “Spectrum Studio” wrap naturally
   while shorter names such as “Panel” remain single-line. */
.spectrum-app .brand {
    align-items: center !important;
}
.spectrum-app .brand h1 {
    flex: 0 1 7rem;
    width: 7rem;
    max-width: 7rem !important;
    align-self: center;
    overflow: visible;
    white-space: normal !important;
    overflow-wrap: normal;
    text-wrap: balance;
    line-height: 1.02;
}
body.spectrum-app.sidebar-collapsed .brand h1 {
    width: 0;
    max-width: 0 !important;
}
@keyframes spectrum-sidebar-atmosphere {
    0% { background-position: -36px 18px, 24px 72px, 50% 112%; opacity: .46; }
    50% { background-position: 28px -42px, -38px 18px, 42% 96%; opacity: .68; }
    100% { background-position: 62px 38px, 44px -36px, 58% 104%; opacity: .52; }
}
.spectrum-app .main { position: relative; z-index: auto !important; }
.spectrum-app .sidebar {
    z-index: 10 !important;
    box-shadow: none !important;
    background-image:
        radial-gradient(circle at 84% 82%, rgb(242 169 0 / 10%) 0 2px, transparent 3px),
        linear-gradient(153deg, transparent 0 69%, rgb(154 194 205 / 8%) 69.2% 69.5%, transparent 69.7%),
        radial-gradient(circle at 50% 116%, rgb(51 90 104 / 52%), transparent 48%) !important;
    background-size: 185% 185%, 230% 230%, 165% 165% !important;
    background-color: #13252c !important;
    animation: spectrum-sidebar-flow 18s linear infinite alternate;
}
.spectrum-app .sidebar::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle, rgb(242 169 0 / 28%) 0 2px, transparent 3px),
        linear-gradient(138deg, transparent 0 47%, rgb(154 194 205 / 16%) 47.35% 47.7%, transparent 48.05%),
        radial-gradient(circle at 50% 100%, rgb(42 87 102 / 72%) 0, transparent 58%);
    background-size: 128px 164px, 210px 250px, 100% 72%;
    background-repeat: repeat, repeat, no-repeat;
    animation: spectrum-sidebar-atmosphere 16s ease-in-out infinite alternate;
}
.spectrum-app .sidebar > * {
    position: relative;
    z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
    .spectrum-app .sidebar,
    .spectrum-app .sidebar::before { animation: none; }
}
.spectrum-app .sidebar::after {
    content: "";
    position: fixed;
    top: var(--sp-header-height, 104px);
    bottom: 0;
    left: var(--sp-sidebar-width);
    width: 1px;
    pointer-events: none;
    box-shadow: 6px 0 14px 4px rgb(20 60 74 / 18%);
}

/* The brand is part of the rail, never a second surface.  Older chrome
   layers gave it a bottom rule and the animated rail background could read as
   a rectangular panel while the page entered.  Keep the atmosphere on the
   single full-height rail layer and make this structural row transparent. */
.spectrum-app .sidebar .brand-row,
.spectrum-app .sidebar .brand,
.spectrum-app .sidebar .brand-row::before,
.spectrum-app .sidebar .brand-row::after {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.spectrum-app .sidebar .brand-row::before,
.spectrum-app .sidebar .brand-row::after {
    content: none !important;
}

/* Do not animate two independent background stacks.  The pseudo-element
   below still supplies the slow, subtle atmosphere for the whole sidebar. */
.spectrum-app .sidebar {
    background-image: none !important;
    animation: none !important;
}
.spectrum-app .main > .hero {
    position: relative;
    z-index: 20 !important;
    box-shadow: 0 5px 14px rgb(20 60 74 / 18%) !important;
}
.spectrum-app .sidebar-toggle { z-index: 30 !important; }
.spectrum-app dialog.spectrum-confirm-dialog .spectrum-confirm-actions button.cmd.danger {
    background: var(--sp-danger) !important;
    border-color: var(--sp-danger) !important;
    color: #fff !important;
}
.spectrum-app dialog.spectrum-confirm-dialog .spectrum-confirm-actions button.cmd.danger:hover {
    background: #991b1b !important;
    border-color: #991b1b !important;
}
.spectrum-app .spectrum-confirm-actions { justify-content: center; }
.spectrum-app .record-row[data-row-state="disabled"] > td:not(.row-actions) { color: color-mix(in srgb, var(--sp-text-muted) 72%, transparent); }
.spectrum-app .record-row[data-row-state="disabled"] > td[data-role="primary"] { text-decoration: line-through; }
.spectrum-app .record-row[data-row-state="disabled"] > td[data-role="primary"]::after {
    content: attr(data-row-state-label);
    display: inline-flex;
    margin-left: 8px;
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sp-danger) 14%, var(--sp-surface));
    color: var(--sp-danger);
    font-size: .68rem;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
}
.spectrum-app .detail-form { pointer-events: none; }
.spectrum-app .detail-form .cmds { pointer-events: auto; justify-content: center; }
.spectrum-app .form-shell > h2 { overflow-wrap: anywhere; }
@media (max-width: 760px) {
    .spectrum-app .sidebar { z-index: 40 !important; }
    .spectrum-app .sidebar-toggle,
    body.spectrum-app.sidebar-collapsed .sidebar-toggle { z-index: 50 !important; }
    .spectrum-app .sidebar::after { top: 0; }
    .spectrum-app .list-toolbar {
        flex-wrap: wrap;
        min-width: 0;
        padding-inline: 0;
    }
    .spectrum-app .list-observation-meta {
        flex: 1 0 100%;
        width: auto;
        min-width: 0;
        margin-inline: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* The compact rail consumes 56px. Everything inside the header uses the
       remaining width in two rows; identity never competes with the title. */
    .spectrum-app .hero-inner {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }
    .spectrum-app .hero-left,
    .spectrum-app .hero-side,
    .spectrum-app .hero-identity,
    .spectrum-app .hero-title-wrap {
        width: 100% !important;
        min-width: 0 !important;
    }
    .spectrum-app .hero-meta-title {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        line-height: 1.15;
    }
    .spectrum-app .hero-side,
    .spectrum-app .hero-tenant-logo,
    .spectrum-app .hero-user-row {
        justify-content: flex-end !important;
    }
    .spectrum-app .hero-identity { justify-items: stretch !important; }
    .spectrum-app .hero-tenant-logo { max-width: none !important; }
    .spectrum-app .hero-tenant-logo img {
        max-width: min(12rem, 100%) !important;
        max-height: 38px;
    }
    .spectrum-app .hero-user-row { flex-wrap: nowrap !important; }
}

/* Synchronous write feedback: fixed so it never changes the form's layout or
   causes the canvas to jump while the provider applies and verifies a change. */
.spectrum-submit-progress {
    position: fixed;
    inset: auto 1.25rem 1.25rem auto;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    max-width: min(28rem, calc(100vw - 2.5rem));
    padding: .7rem .9rem;
    border: 1px solid color-mix(in srgb, var(--sp-accent) 45%, var(--sp-rule));
    border-radius: var(--sp-radius);
    background: color-mix(in srgb, var(--sp-surface) 96%, var(--sp-accent));
    color: var(--sp-text);
    box-shadow: 0 8px 24px color-mix(in srgb, #000 18%, transparent);
    font-size: .92rem;
    pointer-events: none;
}
.spectrum-submit-spinner {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    border: 2px solid color-mix(in srgb, var(--sp-accent) 24%, transparent);
    border-top-color: var(--sp-accent);
    border-radius: 50%;
    animation: spectrum-submit-spin .8s linear infinite;
}
@keyframes spectrum-submit-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .spectrum-submit-spinner { animation-duration: 1.8s; }
}
body.spectrum-app[data-theme="dark"] .spectrum-submit-progress,
body.spectrum-app.high-contrast .spectrum-submit-progress {
    box-shadow: 0 8px 24px rgb(0 0 0 / 42%);
}
@media (max-width: 760px) {
    .spectrum-submit-progress {
        inset: auto .75rem .75rem .75rem;
        justify-content: center;
        max-width: none;
    }
}

/* Final responsive composition: the identity column leads on a phone, while
   title and breadcrumbs occupy the second half. */
@media (max-width: 760px) {
    .spectrum-app .hero-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 12px !important;
    }
    .spectrum-app .hero-side {
        grid-column: 1;
        grid-row: 1;
        width: 100% !important;
        justify-content: flex-start !important;
    }
    .spectrum-app .hero-left {
        grid-column: 2;
        grid-row: 1;
        width: 100% !important;
        align-content: center;
        text-align: left;
    }
    .spectrum-app .hero-identity {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "logo logo" "controls context";
        align-items: center;
        justify-items: start !important;
        width: 100% !important;
        min-width: 0;
        gap: 7px 10px;
    }
    .spectrum-app .hero-tenant-logo {
        grid-area: logo;
        width: 100% !important;
        justify-content: flex-start !important;
        min-width: 0;
    }
    .spectrum-app .hero-tenant-logo img {
        max-width: 100% !important;
        max-height: 42px !important;
    }
    .spectrum-app .hero-controls {
        grid-area: controls;
        align-self: center;
        justify-content: flex-start;
        gap: 5px;
    }
    .spectrum-app .hero-user-context {
        grid-area: context;
        display: grid !important;
        align-content: center;
        justify-items: start;
        gap: 1px;
        min-width: 0;
        max-width: 100% !important;
    }
    .spectrum-app .hero-user-context .hero-tenant-name { order: -1; }
    .spectrum-app .hero-user-name,
    .spectrum-app .hero-tenant-name {
        max-width: 100% !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .spectrum-app .sidebar-toggle,
    body.spectrum-app.sidebar-collapsed .sidebar-toggle {
        position: fixed !important;
        top: 50dvh !important;
        right: auto !important;
        left: calc(var(--sp-mobile-drawer-width, min(280px, calc(100vw - 48px))) - 18px) !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 500 !important;
    }
    body.spectrum-app.sidebar-collapsed .sidebar-toggle {
        /* The collapsed drawer is transformed left by its rail width. The
           toggle remains anchored to the drawer's own right edge so its
           transformed position lands exactly on the visible rail boundary. */
        left: calc(var(--sp-mobile-drawer-width, min(280px, calc(100vw - 48px))) - 18px) !important;
    }
    .spectrum-app .pagination-summary,
    .spectrum-app .pagination-center,
    .spectrum-app .pagination-tools {
        justify-self: center !important;
        justify-content: center !important;
        width: 100%;
    }
    .spectrum-app .pagination-summary { text-align: center; }
    .spectrum-app .pagination-tools { flex-wrap: wrap; }

    /* A mobile record reads as a small dialog: title, fields, actions. */
    .spectrum-app .table-wrap tr.record-row > td:first-child,
    .spectrum-app .table-wrap tr.record-row td[data-role="primary"] {
        display: block;
        padding: 12px 14px;
        background: color-mix(in srgb, var(--sp-accent) 9%, var(--sp-surface));
        color: var(--sp-text);
        font-weight: 800;
        text-align: left;
        border-bottom: 1px solid var(--sp-rule);
    }
    .spectrum-app .table-wrap tr.record-row > td:first-child::before,
    .spectrum-app .table-wrap tr.record-row td[data-role="primary"]::before { display: none; }
    .spectrum-app .table-wrap tr.record-row > td:first-child a,
    .spectrum-app .table-wrap tr.record-row > td:first-child strong,
    .spectrum-app .table-wrap tr.record-row td[data-role="primary"] a,
    .spectrum-app .table-wrap tr.record-row td[data-role="primary"] strong {
        font-weight: 800;
    }
    .spectrum-app .table-wrap tr.record-row td.row-actions {
        align-items: center;
        justify-content: center;
        min-height: 50px;
        text-align: center;
    }
    .spectrum-app .table-wrap tr.record-row td.row-actions::before { display: none; }
    .spectrum-app .table-wrap tr.record-row td.indicator-cell:empty { display: none; }
}

/* Theme controls keep their icon optically centered at every breakpoint. */
.spectrum-app .hero-controls .tone-button,
.spectrum-app .tone-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    vertical-align: middle;
}
.spectrum-app .tone-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.spectrum-app .tone-icon svg { display: block; }

.spectrum-app .mobile-page-title { display: none; }

/* On phones the header has one vertical reading order: identity first,
   then page title and breadcrumb. Desktop keeps the two-part horizontal
   composition above. */
@media (max-width: 760px) {
    .spectrum-app .hero-inner {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: "identity" "page" !important;
        align-items: start !important;
    }
    .spectrum-app .hero-side {
        grid-area: identity !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        order: 1 !important;
        width: 100% !important;
    }
    .spectrum-app .hero-left {
        grid-area: page !important;
        grid-column: 1 !important;
        grid-row: 2 !important;
        order: 2 !important;
        width: 100% !important;
        text-align: left !important;
    }
    .spectrum-app .desktop-page-title { display: none !important; }
    .spectrum-app .mobile-page-title { display: inline !important; }
}

/* Final mobile header/list alignment. These rules are presentation-only;
   the desktop composition remains unchanged. */
@media (max-width: 760px) {
    .spectrum-app .hero-identity {
        grid-template-columns: max-content max-content !important;
        justify-content: end !important;
        justify-items: end !important;
    }
    .spectrum-app .hero-tenant-logo {
        justify-self: end !important;
        justify-content: flex-end !important;
    }
    .spectrum-app .hero-controls {
        justify-content: flex-end !important;
    }
    .spectrum-app .hero-user-context {
        justify-items: end !important;
        text-align: right !important;
    }

    .spectrum-app .list-toolbar {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
        gap: 8px !important;
    }
    .spectrum-app .list-observation-meta {
        display: flex !important;
        flex: 0 1 auto !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 2px !important;
        margin: 0 auto 0 0 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }
    .spectrum-app .list-observation-label {
        display: block !important;
        font-weight: 700;
    }
    .spectrum-app .list-command {
        flex: 0 0 42px !important;
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
    }
    .spectrum-app .list-command > span { display: none !important; }
    .spectrum-app .list-command .ui-icon { margin: 0 auto !important; }

    .spectrum-app .pagination {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: center !important;
        gap: 8px !important;
    }
    .spectrum-app .pagination-summary,
    .spectrum-app .pagination-center,
    .spectrum-app .pagination-tools {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        justify-self: center !important;
        text-align: center !important;
    }
    .spectrum-app .pagination-tools { flex-wrap: wrap !important; }
    .spectrum-app .pagination-tools .page-size-form {
        flex: 0 0 auto !important;
        justify-content: center !important;
    }

    body.spectrum-app.sidebar-collapsed .brand-row,
    body.spectrum-app.sidebar-collapsed .brand {
        display: flex !important;
        width: 56px !important;
        justify-content: center !important;
        align-items: center !important;
    }
    body.spectrum-app.sidebar-collapsed .brand .vis-brand-logo {
        display: block !important;
        margin-inline: auto !important;
    }
}

/* Final mobile header contract: the identity block leads the header in one
   full-width row. Its first half contains controls and the two-line
   tenant/operator context; its second half contains only the proportion-
   preserving logo. The title and breadcrumb remain below it. */
@media (max-width:760px) {
  .spectrum-app .hero-inner {
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-areas:"identity" "page" !important;
    align-items:start !important;
    gap:10px !important;
  }
  .spectrum-app .hero-side {
    grid-area:identity !important;
    display:flex !important;
    width:100% !important;
    justify-content:flex-end !important;
    min-width:0 !important;
  }
  .spectrum-app .hero-left {
    grid-area:page !important;
    width:100% !important;
    min-width:0 !important;
    text-align:left !important;
  }
  .spectrum-app .hero-identity {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    grid-template-areas:"controls logo" "context logo" !important;
    justify-content:stretch !important;
    justify-items:stretch !important;
    align-items:center !important;
    width:100% !important;
    min-width:0 !important;
    column-gap:10px !important;
    row-gap:2px !important;
  }
  .spectrum-app .hero-tenant-logo {
    grid-area:logo !important;
    width:100% !important;
    max-width:100% !important;
    height:52px !important;
    min-height:52px !important;
    justify-self:stretch !important;
    justify-content:center !important;
    align-self:stretch !important;
    overflow:hidden !important;
  }
  .spectrum-app .hero-tenant-logo img {
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:44px !important;
    object-position:center center !important;
  }
  .spectrum-app .hero-controls {
    grid-area:controls !important;
    justify-content:flex-start !important;
    align-self:center !important;
    min-width:0 !important;
  }
  .spectrum-app .hero-user-context {
    grid-area:context !important;
    display:grid !important;
    justify-items:start !important;
    align-content:center !important;
    text-align:left !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
  }
  .spectrum-app .hero-user-name {
    display:block !important;
    order:2 !important;
    grid-row:2 !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  .spectrum-app .hero-tenant-name {
    display:block !important;
    order:1 !important;
    grid-row:1 !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
}


/* Header identity contract: reserve 60% for theme/operator context and up to
   40% for the tenant mark. The mark remains ratio-preserving, right aligned,
   and vertically centered; only the generic chrome owns this composition. */
.spectrum-app .hero-inner {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) !important;
}
.spectrum-app .hero-side {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
}
.spectrum-app .hero-identity {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}
.spectrum-app .hero-controls {
    flex: 0 0 auto !important;
}
.spectrum-app .hero-user-context {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
}
.spectrum-app .hero-tenant-logo {
    flex: 0 1 40% !important;
    width: 40% !important;
    max-width: 40% !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
    align-items: center !important;
}
.spectrum-app .hero-tenant-logo img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: 44px !important;
    max-height: 44px !important;
    margin-left: auto !important;
    object-position: right center !important;
}
@media (max-width: 760px) {
    .spectrum-app .hero-inner {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: "identity" "page" !important;
    }
    .spectrum-app .hero-identity {
        display: grid !important;
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) !important;
        grid-template-areas: "controls logo" "context logo" !important;
        column-gap: 10px !important;
        row-gap: 2px !important;
        align-items: center !important;
    }
    .spectrum-app .hero-tenant-logo {
        width: 100% !important;
        max-width: none !important;
        height: 52px !important;
        min-height: 52px !important;
        justify-content: flex-end !important;
        align-self: stretch !important;
    }
    .spectrum-app .hero-tenant-logo img {
        max-width: 100% !important;
        max-height: 44px !important;
        margin-left: auto !important;
    }
}

/* Desktop identity rail: the mobile composition above remains authoritative
   below 761px. On desktop the title keeps the flexible space and the complete
   identity shrinks to its content and anchors to the right edge. */
@media (min-width: 761px) {
    .spectrum-app .hero-inner {
        display: flex !important;
        grid-template-columns: none !important;
        align-items: center !important;
        gap: 24px !important;
    }
    .spectrum-app .hero-left {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    .spectrum-app .hero-side {
        flex: 0 0 auto !important;
        width: max-content !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: auto !important;
        justify-content: flex-end !important;
    }
    .spectrum-app .hero-identity {
        flex: 0 0 auto !important;
        width: max-content !important;
        max-width: 100% !important;
        min-width: 0 !important;
        justify-content: flex-end !important;
    }
    .spectrum-app .hero-user-context {
        flex: 0 1 19rem !important;
        max-width: 19rem !important;
        min-width: 0 !important;
        justify-items: start !important;
        text-align: left !important;
    }
    .spectrum-app .hero-tenant-logo {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        justify-content: flex-end !important;
    }
    .spectrum-app .hero-tenant-logo img {
        width: auto !important;
        max-width: none !important;
        margin-left: 0 !important;
    }
}

/* Transient operation feedback floats over the lower-right content edge so
   confirmations never reserve vertical space or move the list/form below. */
.spectrum-app .main-content > .notice.toast {
    position: fixed !important;
    z-index: 700 !important;
    inset-inline-end: clamp(14px, 2.4vw, 30px) !important;
    inset-block-end: clamp(14px, 2.4vw, 30px) !important;
    width: min(30rem, calc(100vw - 28px)) !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    background: var(--sp-surface) !important;
    color: var(--sp-text) !important;
    border: 1px solid var(--sp-rule) !important;
    border-inline-start: 3px solid var(--sp-accent) !important;
    border-radius: var(--sp-radius) !important;
    box-shadow: 0 10px 28px rgb(20 60 74 / 18%) !important;
    line-height: 1.35;
    animation: spectrum-toast-in 180ms ease-out both;
}
.spectrum-app .main-content > .notice.toast.is-leaving {
    animation: spectrum-toast-out 180ms ease-in both;
}
@keyframes spectrum-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes spectrum-toast-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(6px); }
}
body.spectrum-app.high-contrast .main-content > .notice.toast {
    background: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
    border-inline-start-color: #fff !important;
    box-shadow: none !important;
}
@media (max-width: 760px) {
    .spectrum-app .main-content > .notice.toast {
        inset-inline: 14px !important;
        inset-block-end: 14px !important;
        width: auto !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .spectrum-app .main-content > .notice.toast,
    .spectrum-app .main-content > .notice.toast.is-leaving {
        animation: none !important;
    }
}

/* Operation feedback is part of the content flow, not a second canvas.  Keep
   it compact and aligned with the panel inset so the light canvas does not
   reveal a large band of empty space below a one-line confirmation. */
.spectrum-app .main-content > .notice {
    margin: 12px 28px 0 !important;
    padding: 10px 14px !important;
    background: var(--sp-surface) !important;
    color: var(--sp-text) !important;
    border: 1px solid var(--sp-rule) !important;
    border-inline-start: 3px solid var(--sp-accent) !important;
    border-radius: var(--sp-radius) !important;
    box-shadow: none !important;
    line-height: 1.35;
}
.spectrum-app .main-content > .notice:empty {
    display: none !important;
}
@media (max-width: 760px) {
    .spectrum-app .main-content > .notice {
        margin: 10px 18px 0 !important;
        padding: 9px 12px !important;
    }
}
body.spectrum-app.high-contrast .main-content > .notice {
    background: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
    border-inline-start-color: #fff !important;
}

/* Semantic application appearance. Kept in the late compatibility sheet so
   declarative tokens also govern legacy background rules without changing
   the Admin layout. */
body.spectrum-app .sidebar {
    background-color: var(--sp-navigation, #13252c) !important;
}
body.spectrum-app,
body.spectrum-app .layout,
body.spectrum-app .main,
body.spectrum-app .main-content {
    background-color: var(--sp-canvas, var(--sp-surface, #fff)) !important;
}
body.spectrum-app .sidebar .nav-link.is-active,
body.spectrum-app .sidebar .nav-link.is-active:hover {
    background-color: var(--sp-navigation-active, var(--sp-accent, #f2a900)) !important;
    color: var(--sp-navigation-text, #fff) !important;
}

/* Generic status presentation: the text remains available to assistive
   technology while the shape and tone make scanning a list faster. */
.spectrum-app .status-badge {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    min-height: 1.8rem;
    padding: .2rem .62rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 750;
    line-height: 1.1;
    white-space: nowrap;
}
.spectrum-app .status-badge::before {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: currentColor;
    content: "";
}
.spectrum-app .status-badge-success { color: var(--sp-success, #16734a); background: color-mix(in srgb, currentColor 11%, var(--sp-surface)); }
.spectrum-app .status-badge-warning { color: var(--sp-warning, #8a5a00); background: color-mix(in srgb, currentColor 12%, var(--sp-surface)); }
.spectrum-app .status-badge-danger { color: var(--sp-danger, #a53636); background: color-mix(in srgb, currentColor 11%, var(--sp-surface)); }
.spectrum-app .status-badge-neutral { color: var(--sp-text-muted, #667085); background: color-mix(in srgb, currentColor 9%, var(--sp-surface)); }
body.spectrum-app.high-contrast .status-badge { border-color: #fff !important; background: #000 !important; color: #fff !important; }

/* Search is one control, so its focus and border communicate one action. */
.spectrum-app .search-control {
    display: flex;
    flex: 1 1 22rem;
    align-items: stretch;
    max-width: 32rem;
    min-width: 16rem;
    border-radius: var(--sp-radius);
}
.spectrum-app .search-control .search-field { flex: 1 1 auto; max-width: none; }
.spectrum-app .search-control .search-field input {
    border-radius: var(--sp-radius) 0 0 var(--sp-radius);
}
.spectrum-app .search-control > .button {
    min-height: 40px;
    border-left: 0;
    border-radius: 0 var(--sp-radius) var(--sp-radius) 0;
}
.spectrum-app .search-control:focus-within {
    outline: 3px solid color-mix(in srgb, var(--sp-accent) 22%, transparent);
    outline-offset: 2px;
}
.spectrum-app .search-control .search-field input:focus { outline: none; }
@media (max-width: 760px) {
    .spectrum-app .search-control {
        width: 100%;
        max-width: none;
        min-width: 0;
    }
}

/* Theme modes are user accessibility choices and must take precedence over
   the application's inline light-palette declaration. Project identity is
   retained through a brighter accent in dark mode; high contrast deliberately
   reduces the palette to black, white, yellow, cyan and semantic alerts. */
body.spectrum-app[data-theme="dark"] {
    --sp-canvas: #0d1416 !important;
    --sp-surface: #172124 !important;
    --sp-surface-subtle: #223033 !important;
    --sp-surface-muted: #223033 !important;
    --sp-text: #f4f7f6 !important;
    --sp-muted: #bac7c5 !important;
    --sp-text-muted: #bac7c5 !important;
    --sp-border: #4b5d60 !important;
    --sp-rule: #4b5d60 !important;
    --sp-link: #8bd0df !important;
    --sp-accent: #ff7a76 !important;
    --sp-accent-strong: #ff9692 !important;
    --sp-vis-orange: #ff7a76 !important;
    --sp-vis-orange-soft: #362225 !important;
    --sp-success: #62d6b6 !important;
    --sp-warning: #ffd166 !important;
    --sp-danger: #ff9b95 !important;
    --sp-focus: #76e4f7 !important;
    --sp-button-bg: #243438 !important;
    --sp-button-hover: #30474c !important;
    --sp-button-text: #f4f7f6 !important;
}
body.spectrum-app[data-theme="dark"] .sidebar {
    background-color: color-mix(in srgb, var(--sp-navigation, #4b2224) 58%, #000) !important;
}
body.spectrum-app[data-theme="dark"] :is(.resource-browser-dialog, .resource-browser-shell, .resource-browser-toolbar) {
    background: var(--sp-surface) !important;
    color: var(--sp-text) !important;
}
body.spectrum-app[data-theme="dark"] .resource-browser-toolbar,
body.spectrum-app[data-theme="dark"] .resource-browser-item:hover {
    background: var(--sp-surface-muted) !important;
}
body.spectrum-app[data-theme="dark"] .record-identity { color: var(--sp-text-muted) !important; }
body.spectrum-app[data-theme="dark"] .cmd.submit {
    color: #1b1112 !important;
}
body.spectrum-app[data-theme="dark"] dialog.spectrum-confirm-dialog .spectrum-confirm-actions button.cmd.danger {
    border-color: var(--sp-danger) !important;
    background: var(--sp-danger) !important;
    color: #1b1112 !important;
}
body.spectrum-app[data-theme="dark"] .field.is-required > input,
body.spectrum-app[data-theme="dark"] .field.is-required > textarea,
body.spectrum-app[data-theme="dark"] .field.is-required > select,
body.spectrum-app[data-theme="dark"] .field.is-required .month-day-part > input,
body.spectrum-app[data-theme="dark"] .field.is-required .month-day-part > select,
body.spectrum-app[data-theme="dark"] .field.is-required > .secret-control input {
    border-color: color-mix(in srgb, var(--sp-danger) 62%, var(--sp-rule)) !important;
    background: color-mix(in srgb, var(--sp-danger) 10%, var(--sp-surface)) !important;
    color: var(--sp-text) !important;
}

body.spectrum-app.high-contrast {
    --sp-canvas: #000 !important;
    --sp-surface: #000 !important;
    --sp-surface-subtle: #000 !important;
    --sp-surface-muted: #000 !important;
    --sp-text: #fff !important;
    --sp-muted: #fff !important;
    --sp-text-muted: #fff !important;
    --sp-border: #fff !important;
    --sp-rule: #fff !important;
    --sp-link: #fff !important;
    --sp-accent: #ff0 !important;
    --sp-accent-strong: #ff0 !important;
    --sp-vis-orange: #ff0 !important;
    --sp-vis-orange-soft: #000 !important;
    --sp-navigation: #000 !important;
    --sp-navigation-text: #fff !important;
    --sp-navigation-active: #ff0 !important;
    --sp-success: #00ff78 !important;
    --sp-warning: #ff0 !important;
    --sp-danger: #ff9b95 !important;
    --sp-focus: #0ff !important;
    --sp-button-bg: #000 !important;
    --sp-button-hover: #000 !important;
    --sp-button-text: #fff !important;
}
body.spectrum-app.high-contrast,
body.spectrum-app.high-contrast :is(.layout, .main, .main-content, .panel, .table-wrap, .resource-browser-dialog, .resource-browser-shell, .resource-browser-toolbar, .resource-browser-item) {
    background: #000 !important;
    color: #fff !important;
    box-shadow: none !important;
}
body.spectrum-app.high-contrast .sidebar .nav-link.is-active,
body.spectrum-app.high-contrast .sidebar .nav-link.is-active:hover {
    border-color: #ff0 !important;
    background: #ff0 !important;
    color: #000 !important;
    box-shadow: inset 4px 0 0 #fff !important;
}
body.spectrum-app.high-contrast .sidebar {
    background-image: none !important;
}
body.spectrum-app.high-contrast .hero.panel {
    border-top-color: #ff0 !important;
}
body.spectrum-app.high-contrast .cmd.submit,
body.spectrum-app.high-contrast .page-button[aria-current="page"] {
    border: 2px solid #fff !important;
    background: #ff0 !important;
    color: #000 !important;
}
body.spectrum-app.high-contrast dialog.spectrum-confirm-dialog .spectrum-confirm-actions button.cmd.danger {
    border: 2px solid var(--sp-danger) !important;
    background: #000 !important;
    color: var(--sp-danger) !important;
}
body.spectrum-app.high-contrast .icon-delete-button {
    color: var(--sp-danger) !important;
}
body.spectrum-app.high-contrast .record-identity { color: #fff !important; }
body.spectrum-app.high-contrast .field.is-required > input,
body.spectrum-app.high-contrast .field.is-required > textarea,
body.spectrum-app.high-contrast .field.is-required > select,
body.spectrum-app.high-contrast .field.is-required .month-day-part > input,
body.spectrum-app.high-contrast .field.is-required .month-day-part > select,
body.spectrum-app.high-contrast .field.is-required > .secret-control input {
    border: 2px solid #fff !important;
    background: #000 !important;
    color: #fff !important;
}

/* Generic background-operation projection.  These states belong to the
   Spectrum job/runtime contract, not to any domain application. */
.spectrum-app .pending-operation-row > td {
    background: color-mix(in srgb, var(--sp-accent) 7%, var(--sp-surface));
}
.spectrum-app .operation-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: .5rem;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}
.spectrum-app .operation-state > .ui-icon {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    stroke-width: 1.8;
}
.spectrum-app .operation-state-pending > .ui-icon,
.spectrum-app .operation-state-processing > .ui-icon,
.spectrum-app .operation-state-creating > .ui-icon,
.spectrum-app .operation-state-updating > .ui-icon,
.spectrum-app .operation-state-deleting > .ui-icon,
.spectrum-app .operation-state-synchronizing > .ui-icon {
    animation: spectrum-operation-spin 1.1s linear infinite;
}
@keyframes spectrum-operation-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .spectrum-app .operation-state > .ui-icon { animation: none; }
}
.spectrum-app .operation-state-pending,
.spectrum-app .operation-state-processing {
    color: var(--sp-text-muted);
    background: color-mix(in srgb, var(--sp-surface-muted) 82%, transparent);
}
.spectrum-app .operation-state-creating,
.spectrum-app .operation-state-updating,
.spectrum-app .operation-state-deleting {
    color: var(--sp-accent-ink, var(--sp-text));
    background: color-mix(in srgb, var(--sp-accent) 18%, var(--sp-surface));
}
.spectrum-app .operation-state-synchronizing {
    color: var(--sp-link);
    background: color-mix(in srgb, var(--sp-link) 14%, var(--sp-surface));
}
.spectrum-app .pending-operation-row .row-actions {
    color: var(--sp-text-muted);
}
.spectrum-app .pending-operation-row .row-actions .operation-state {
    margin-inline-start: 0;
}
.spectrum-app .main-content > .notice {
    /* The notice is a direct child of the scrolling main region, unlike
       panels whose .panel-inner already supplies this inset. */
    margin: 22px 28px;
}
@media (max-width: 760px) {
    .spectrum-app .main-content > .notice {
        margin: 18px;
    }
}
body.spectrum-app[data-theme="dark"] .pending-operation-row > td,
body.spectrum-app.high-contrast .pending-operation-row > td {
    background: color-mix(in srgb, var(--sp-accent) 12%, var(--sp-surface));
}

/* Stable application canvas: the light theme uses the same white surface
   behind the main content instead of revealing the neutral page canvas at
   the edges. Dark and high-contrast continue to resolve through their own
   surface tokens. */
body.spectrum-app,
body.spectrum-app .layout,
body.spectrum-app .main,
body.spectrum-app .main-content {
    --sp-canvas: var(--sp-surface);
    background-color: var(--sp-surface) !important;
}

/* Navigation should not flash on every document load. The earlier
   cross-fade was useful for experimenting with motion, but it made a normal
   page request look like a rendering error. Keep motion for explicit control
   feedback (buttons, spinners); page entry itself is instantaneous. */
@view-transition {
    navigation: none;
}
.spectrum-app,
.spectrum-app .main,
.spectrum-app .main-content,
::view-transition-old(*),
::view-transition-new(*),
::view-transition-group(*) {
    animation: none !important;
}
.spectrum-app .main,
.spectrum-app .main-content {
    opacity: 1 !important;
    transform: none !important;
}


/* Mobile identity row: theme controls, operator context and tenant mark are
   three inline zones. The context may wrap internally, never below the icons. */
@media (max-width: 760px) {
    .spectrum-app .hero-identity {
        display: grid !important;
        grid-template-columns: max-content minmax(0, 1fr) minmax(0, 40%) !important;
        grid-template-areas: "controls context logo" !important;
        align-items: center !important;
        column-gap: 8px !important;
        row-gap: 0 !important;
    }
    .spectrum-app .hero-controls {
        grid-area: controls !important;
        align-self: center !important;
        justify-content: flex-start !important;
        min-width: 0 !important;
    }
    .spectrum-app .hero-user-context {
        grid-area: context !important;
        display: grid !important;
        align-content: center !important;
        justify-items: start !important;
        min-width: 0 !important;
        max-width: none !important;
        overflow: hidden !important;
        text-align: left !important;
    }
    .spectrum-app .hero-tenant-logo {
        grid-area: logo !important;
        width: 100% !important;
        max-width: none !important;
        height: 52px !important;
        min-height: 52px !important;
        justify-content: flex-end !important;
        align-self: stretch !important;
    }
    .spectrum-app .hero-tenant-logo img {
        max-width: 100% !important;
        max-height: 44px !important;
        margin-left: auto !important;
    }
}

/* Desktop stacking: the sidebar owns the collapse control. It must sit above
   the header stacking context, while the sidebar itself has no outer shadow,
   so its surface does not cover the header. */
@media (min-width: 761px) {
    .spectrum-app .sidebar {
        z-index: 30 !important;
        box-shadow: none !important;
    }
    .spectrum-app .sidebar-toggle {
        position: fixed !important;
        top: 50% !important;
        left: calc(var(--sp-sidebar-width) - 18px) !important;
        right: auto !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 50 !important;
        transform: translateY(-50%) !important;
    }
}

/* Final semantic application appearance bridge. */
body.spectrum-app .sidebar { background-color: var(--sp-navigation, #13252c) !important; }
body.spectrum-app,
body.spectrum-app .layout,
body.spectrum-app .main,
body.spectrum-app .main-content { background-color: var(--sp-canvas, var(--sp-surface, #fff)) !important; }
body.spectrum-app .sidebar .nav-link.is-active,
body.spectrum-app .sidebar .nav-link.is-active:hover {
    background-color: var(--sp-navigation-active, var(--sp-accent, #f2a900)) !important;
    color: var(--sp-navigation-text, #fff) !important;
}
/* Related collections are visible table columns; their text action should
   remain recognizable at desktop widths and wrap safely on small screens. */
.spectrum-app .row-relation-cell { white-space: nowrap; }
.spectrum-app .row-relation-button { min-height: 34px; padding: 6px 10px; white-space: nowrap; }
.spectrum-app .row-relation-button .ui-icon { width: 16px; height: 16px; }
@media (max-width: 760px) {
    .spectrum-app .row-relation-cell { white-space: normal; }
    .spectrum-app .row-relation-button { width: auto; max-width: 100%; }
}
/* TinyMCE editorial surface: reserve a calm loading state, then present one
   compact toolbar row with the same tokens used by Spectrum menus. */
.spectrum-app .tinymce-editor-field {
    position: relative;
    overflow: visible !important;
}
.spectrum-app .tinymce-editor-field[data-editor-loading="true"] .html-editor-tinymce {
    position: absolute;
    inset: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.spectrum-app .tinymce-editor-field .html-editor-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    min-height: 26rem;
    box-sizing: border-box;
    padding: 1rem 1.1rem;
    border: 1px solid var(--sp-border, #c8d3e1);
    border-radius: 12px;
    background: linear-gradient(100deg, var(--sp-surface, #fff) 30%, var(--sp-surface-subtle, #f4f1ef) 50%, var(--sp-surface, #fff) 70%);
    background-size: 220% 100%;
    color: var(--sp-muted, #58708e);
    font-size: .9rem;
    font-weight: 650;
    animation: spectrum-editor-loading 1.3s ease-in-out infinite;
}
.spectrum-app .tinymce-editor-field .html-editor-loading[hidden] { display: none; }
.spectrum-app .html-editor-loading-mark {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    border: 2px solid color-mix(in srgb, var(--sp-accent, #995a26) 28%, transparent);
    border-top-color: var(--sp-accent, #995a26);
    border-radius: 50%;
    animation: spectrum-editor-spinner .7s linear infinite;
}
@keyframes spectrum-editor-loading { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes spectrum-editor-spinner { to { transform: rotate(360deg); } }

.spectrum-app .tinymce-editor-field .tox-tinymce {
    min-height: 26rem;
    border: 1px solid var(--sp-border, #c8d3e1) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: var(--sp-surface, #fff) !important;
}
.spectrum-app .tinymce-editor-field .tox .tox-editor-header {
    box-sizing: border-box;
    padding: 8px 10px !important;
    border: 0 !important;
    background: var(--sp-surface-subtle, #f4f1ef) !important;
    background: color-mix(in srgb, var(--sp-accent-strong, #c9363b) 9%, var(--sp-surface, #fff)) !important;
}
.spectrum-app .tinymce-editor-field .tox .tox-toolbar-overlord,
.spectrum-app .tinymce-editor-field .tox .tox-toolbar,
.spectrum-app .tinymce-editor-field .tox .tox-toolbar__primary {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    box-sizing: border-box;
    min-width: 0;
    overflow-x: auto;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    scrollbar-width: thin;
}
.spectrum-app .tinymce-editor-field .tox .tox-toolbar__group {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
    margin: 0 8px 0 0 !important;
    padding: 0 8px 0 0 !important;
    border-right: 1px solid color-mix(in srgb, var(--sp-accent-strong, #c9363b) 28%, var(--sp-border, #c8d3e1));
}
.spectrum-app .tinymce-editor-field .tox .tox-toolbar__group:last-child { margin-right: 0 !important; padding-right: 0 !important; border-right: 0; }
.spectrum-app .tinymce-editor-field .tox .tox-tbtn,
.spectrum-app .tinymce-editor-field .tox .tox-mbtn {
    box-sizing: border-box;
    min-width: 32px !important;
    width: auto !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--sp-text, #172f39) !important;
    font-size: .78rem !important;
    line-height: 1 !important;
}
.spectrum-app .tinymce-editor-field .tox .tox-mbtn { min-width: 84px !important; justify-content: space-between; }
.spectrum-app .tinymce-editor-field .tox .tox-tbtn:hover,
.spectrum-app .tinymce-editor-field .tox .tox-mbtn:hover,
.spectrum-app .tinymce-editor-field .tox .tox-mbtn--active {
    border-color: color-mix(in srgb, var(--sp-navigation-active, var(--sp-accent, #995a26)) 44%, transparent) !important;
    background: color-mix(in srgb, var(--sp-navigation-active, var(--sp-accent, #995a26)) 12%, transparent) !important;
    color: var(--sp-text, #172f39) !important;
}
.spectrum-app .tinymce-editor-field .tox .tox-icon svg,
.spectrum-app .tinymce-editor-field .tox .tox-icon svg *,
.spectrum-app .tinymce-editor-field .tox .tox-tbtn__select-chevron svg,
.spectrum-app .tinymce-editor-field .tox .tox-tbtn__select-chevron svg * {
    color: currentColor !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}
.spectrum-app .tinymce-editor-field .tox .tox-edit-area { border-top: 1px solid var(--sp-border, #c8d3e1) !important; }
.spectrum-app .tinymce-editor-field .tox .tox-edit-area__iframe { background: var(--sp-surface, #fff) !important; }
.spectrum-app .tinymce-editor-field .tox .tox-statusbar {
    min-height: 25px;
    box-sizing: border-box;
    padding: 3px 10px !important;
    border-top: 1px solid var(--sp-border, #c8d3e1) !important;
    background: var(--sp-surface-subtle, #f4f1ef) !important;
    background: color-mix(in srgb, var(--sp-accent-strong, #c9363b) 9%, var(--sp-surface, #fff)) !important;
    color: var(--sp-muted, #58708e) !important;
}

/* TinyMCE menus follow the same active color as the rest of the Admin. */
.spectrum-app .tox .tox-menu,
.spectrum-app .tox .tox-collection__group {
    border-color: var(--sp-border, #c8d3e1) !important;
    background: var(--sp-surface, #fff) !important;
}
.spectrum-app .tox .tox-collection__item,
.spectrum-app .tox .tox-collection__item-label { color: var(--sp-text, #172f39) !important; }
.spectrum-app .tox .tox-collection__item--active,
.spectrum-app .tox .tox-collection__item:focus,
.spectrum-app .tox .tox-collection__item:hover {
    background: var(--sp-navigation-active, var(--sp-accent, #995a26)) !important;
    color: var(--sp-navigation-text, #fff) !important;
}
.spectrum-app .tox .tox-collection__item--active *,
.spectrum-app .tox .tox-collection__item:focus *,
.spectrum-app .tox .tox-collection__item:hover * { color: var(--sp-navigation-text, #fff) !important; }
body.spectrum-app.high-contrast .tox .tox-collection__item--active,
body.spectrum-app.high-contrast .tox .tox-collection__item:focus,
body.spectrum-app.high-contrast .tox .tox-collection__item:hover,
body.spectrum-app.high-contrast .tox .tox-collection__item--active * { background: #ff0 !important; color: #000 !important; }

@media (prefers-reduced-motion: reduce) {
    .spectrum-app .tinymce-editor-field .html-editor-loading,
    .spectrum-app .html-editor-loading-mark { animation: none; }
}