/* ==========================================================================
   EDIC Portal Chrome  —  v3
   --------------------------------------------------------------------------
   Shell, sidebar, topbar, and mobile drawer, built only from the tokens in
   edic-tokens.css.

   Replaces, in full:
     static/css/espandar-sidebar.css                  (943 lines, 102 !important)
     static/portal/sidebar/css/sidebar-design-tokens.css (36 lines)
     static/portal/sidebar/css/sidebar-assets.css     (235 lines, all dead:
                                                       it styles .esp-* classes
                                                       no template uses)

   The sidebar accordion is gone -- one row per module now -- so the Bootstrap
   collapse hooks it needed went with it. The 1200px breakpoint is this file's
   own job: one element is the sidebar above it and the drawer below, rather
   than two elements swapped by .d-none / .d-xl-flex.

   No !important. Logical properties throughout, so RTL needs no mirror sheet
   beyond the one drawer transform that is genuinely direction-dependent.
   ========================================================================== */

/* --------------------------------------------------------------------------
   DOCUMENT BASE
   Absorbed from site.css when that sheet was reduced to a token shim.
   -------------------------------------------------------------------------- */
html {
    min-block-size: 100%;
}

/* A single wide descendant must never be able to scroll the whole document
   sideways. `clip` rather than `hidden` so this does not create a scroll
   container and break position: sticky inside the page. */
html,
body {
    max-inline-size: 100%;
    overflow-x: clip;
}

/* Replaced elements never overflow their column. */
img,
svg,
canvas {
    max-inline-size: 100%;
}

/* --------------------------------------------------------------------------
   SHELL
   -------------------------------------------------------------------------- */
.portal-body {
    margin: 0;
    font-family: var(--ed-font);
    font-size: var(--ed-text-body);
    line-height: var(--ed-leading-body);
    letter-spacing: var(--ed-tracking-body);
    color: var(--ed-text);
    background: var(--ed-canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.portal-main {
    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
    background: var(--ed-canvas);
}

/* Phone-width safety net: a single wide descendant must never be able to
   scroll the whole document sideways. Absorbed from
   espandar-mobile-hotfix.css when that sheet was retired. */
@media (max-width: 767.98px) {
    html,
    body {
        inline-size: 100%;
        max-inline-size: 100%;
        overflow-x: hidden;
    }
}

@media (min-width: 1200px) {
    .portal-main {
        padding-inline-start: var(--ed-sidebar-width);
    }

    /* The auth pages render with hide_portal_chrome, so there is no sidebar to
       leave room for. Without this the content box is pushed a full sidebar
       width to the side and overflows the viewport. */
    .portal-shell--bare .portal-main {
        padding-inline-start: 0;
    }
}

.portal-content {
    flex: 1 1 auto;
    inline-size: 100%;
    max-inline-size: 1180px;
    margin-inline: auto;
    padding: var(--ed-space-6) var(--ed-space-6) var(--ed-space-12);
}

@media (max-width: 599px) {
    .portal-content {
        padding: var(--ed-space-4) var(--ed-space-4) var(--ed-space-10);
    }
}

.portal-content:focus {
    outline: none;
}

.portal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ed-space-2);
    padding: var(--ed-space-4) var(--ed-space-6);
    font-size: var(--ed-text-subhead);
    color: var(--ed-text-tertiary);
    border-block-start: 1px solid var(--ed-separator-soft);
}

/* The sidebar footer carries the same two lines as its brand lockup. Below
   1200px the sidebar is an off-canvas drawer, so this footer is the only place
   they appear and it earns its keep; from 1200px up both are on screen at once,
   about 200px apart, saying the same thing twice. Keep the designed lockup. */
@media (min-width: 1200px) {
    .portal-footer {
        display: none;
    }
}

.skip-link {
    position: absolute;
    inset-block-start: -100%;
    inset-inline-start: var(--ed-space-4);
    z-index: 1100;
    padding: var(--ed-space-2) var(--ed-space-4);
    font-size: var(--ed-text-subhead);
    color: var(--ed-text-on-accent);
    background: var(--ed-accent);
    border-radius: var(--ed-radius-sm);
    text-decoration: none;
}

.skip-link:focus {
    inset-block-start: var(--ed-space-4);
}

/* Messages */
.portal-message-stack {
    margin-block-end: var(--ed-space-4);
}

.portal-alert {
    padding: var(--ed-space-3) var(--ed-space-4);
    margin-block-end: var(--ed-space-2);
    font-size: var(--ed-text-subhead);
    border: 1px solid var(--ed-separator-soft);
    border-inline-start: 3px solid var(--ed-grey-400);
    border-radius: var(--ed-radius-md);
    background: var(--ed-surface);
    color: var(--ed-text);
}

/* Django's message tags, tinted the same way .ed-alert is. `info` and `debug`
   keep the neutral surface: a message that carries no consequence should not
   borrow a status colour. */
.portal-alert--success {
    background: var(--ed-success-tint);
    border-color: var(--ed-success-tint);
    border-inline-start-color: var(--ed-success);
}

.portal-alert--warning {
    background: var(--ed-warning-tint);
    border-color: var(--ed-warning-tint);
    border-inline-start-color: var(--ed-warning);
}

.portal-alert--error {
    background: var(--ed-danger-tint);
    border-color: var(--ed-danger-tint);
    border-inline-start-color: var(--ed-danger);
}

/* --------------------------------------------------------------------------
   SIDEBAR  /  DRAWER
   One element, two behaviours. At >= 1200px it is the fixed sidebar; below
   that it is the off-canvas drawer. The navigation used to be rendered twice
   -- once per breakpoint -- so every label and badge sat in the DOM twice and
   assistive tech read the whole menu out twice. The breakpoint lives here now
   instead, and base.html includes the nav once.

   Depth from a hairline, not a shadow or a gradient.
   -------------------------------------------------------------------------- */
.portal-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 1030;
    /* Declared here rather than inherited from .d-xl-flex: the element is no
       longer breakpoint-scoped in the markup, so it owns its own display. */
    display: flex;
    flex-direction: column;
    inline-size: var(--ed-sidebar-width);
    padding: var(--ed-space-4) var(--ed-space-3);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ed-surface);
    border-inline-end: 1px solid var(--ed-separator-soft);
}

.portal-sidebar::-webkit-scrollbar {
    inline-size: 4px;
}

.portal-sidebar::-webkit-scrollbar-thumb {
    background: var(--ed-grey-300);
    border-radius: var(--ed-radius-pill);
}

/* ---- Below the desktop breakpoint the sidebar is the off-canvas drawer ---- */
@media (max-width: 1199.98px) {
    .portal-sidebar {
        /* Above the backdrop (1040), which is itself above the page chrome. */
        z-index: 1045;
        inline-size: min(320px, 86vw);
        /* Off-canvas toward the inline-start edge. The axis is direction
           dependent, so this is the one place a dir override is unavoidable. */
        transform: translateX(-100%);
        /* visibility, not just transform: it takes the closed drawer out of
           the accessibility tree, which is why no aria-hidden is needed. */
        visibility: hidden;
        transition: transform var(--ed-duration) var(--ed-ease),
                    visibility var(--ed-duration) var(--ed-ease);
    }

    [dir="rtl"] .portal-sidebar {
        transform: translateX(100%);
    }

    .portal-sidebar.is-open {
        transform: translateX(0);
        visibility: visible;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portal-sidebar {
        transition: none;
    }
}

/* Identity and utilities, shown only where there is no topbar to carry them. */
.portal-sidebar-utils {
    margin-block-end: var(--ed-space-4);
}

/* ---- Head row: brand, plus the close control on drawer widths ---- */
.portal-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ed-space-3);
    margin-block-end: var(--ed-space-5);
}

.portal-sidebar-head .portal-brand {
    min-inline-size: 0;
    margin-block-end: 0;
}

.portal-brand {
    display: flex;
    align-items: center;
    block-size: 44px;
    padding-inline: var(--ed-space-2);
    margin-block-end: var(--ed-space-5);
    text-decoration: none;
}

.portal-brand-logo {
    inline-size: min(180px, 100%);
    block-size: auto;
    object-fit: contain;
}

.portal-sidebar-nav {
    display: grid;
    gap: 2px;
    align-content: start;
}

.portal-sidebar-nav {
    flex: 1 1 auto;
    min-block-size: 0;
}

/* ---- Groups and their labels ---- */
.portal-nav-group + .portal-nav-group {
    margin-block-start: var(--ed-space-5);
}

.portal-nav-label {
    padding-inline: var(--ed-space-3);
    margin-block-end: var(--ed-space-2);
    font-size: var(--ed-text-caption);
    font-weight: var(--ed-weight-medium);
    letter-spacing: var(--ed-tracking-overline);
    text-transform: uppercase;
    color: var(--ed-text-tertiary);
}

/* ---- Links ---- */
.portal-nav-link {
    display: flex;
    align-items: center;
    gap: var(--ed-space-3);
    inline-size: 100%;
    padding: 0 var(--ed-space-3);
    block-size: 38px;
    font-family: inherit;
    font-size: var(--ed-text-subhead);
    font-weight: var(--ed-weight-regular);
    line-height: 1;
    text-align: start;
    text-decoration: none;
    color: var(--ed-text-secondary);
    background: none;
    border: 0;
    border-radius: var(--ed-radius-sm);
    cursor: pointer;
    transition: background-color var(--ed-duration) var(--ed-ease),
                color var(--ed-duration) var(--ed-ease);
}

.portal-nav-link:hover {
    color: var(--ed-text);
    background: var(--ed-surface-hover);
}

.portal-nav-link:focus-visible {
    outline: 2px solid var(--ed-accent);
    outline-offset: -2px;
}

/* Selection is a filled rounded row, the way a native sidebar marks the
   current view. Only one row on screen may carry it. */
.portal-nav-link.is-active,
.portal-nav-link.active {
    font-weight: var(--ed-weight-medium);
    color: var(--ed-accent);
    background: var(--ed-accent-tint);
}

.portal-nav-link-text {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-nav-icon {
    flex: 0 0 auto;
    inline-size: 18px;
    block-size: 18px;
    color: var(--ed-text-tertiary);
}

.portal-nav-link:hover .portal-nav-icon {
    color: var(--ed-text-secondary);
}

.portal-nav-link.is-active .portal-nav-icon,
.portal-nav-link.active .portal-nav-icon {
    color: var(--ed-accent);
}

/* The accordion sections, their chevrons and their submenus are gone: the
   sidebar is one row per module now, and the pages that used to hang beneath
   each row are reached from the module tab strip instead. */

/* ---- Sidebar footer ---- */
.portal-sidebar-footer {
    flex: 0 0 auto;
    margin-block-start: var(--ed-space-6);
    padding-block-start: var(--ed-space-4);
    border-block-start: 1px solid var(--ed-separator-soft);
}

.portal-sidebar-footer-row {
    display: flex;
    align-items: center;
    gap: var(--ed-space-3);
    padding-inline: var(--ed-space-3);
}

.portal-sidebar-footer-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--ed-text-tertiary);
}

.portal-sidebar-footer-icon svg,
.portal-sidebar-footer-icon img {
    inline-size: 18px;
    block-size: 18px;
}

.portal-sidebar-footer-copy {
    min-inline-size: 0;
}

.portal-sidebar-footer-title {
    font-size: var(--ed-text-subhead);
    font-weight: var(--ed-weight-medium);
    color: var(--ed-text-secondary);
}

.portal-sidebar-footer-text {
    font-size: var(--ed-text-caption);
    color: var(--ed-text-tertiary);
}

/* --------------------------------------------------------------------------
   TOPBAR  (>= 1200px)
   -------------------------------------------------------------------------- */
.portal-topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 1020;
    align-items: center;
    /* Controls only, so they sit at the inline end. The topbar no longer
       prints the page name -- the page's own h1 is the title. */
    justify-content: flex-end;
    gap: var(--ed-space-4);
    block-size: var(--ed-topbar-height);
    padding-inline: var(--ed-space-6);
    background: color-mix(in srgb, var(--ed-canvas) 82%, transparent);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-block-end: 1px solid var(--ed-separator-soft);
}

.portal-topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--ed-space-2);
}

.portal-topbar-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ed-space-2);
    min-inline-size: 34px;
    block-size: 34px;
    padding-inline: var(--ed-space-3);
    /* Subhead, not footnote: these are interactive controls, and they were
       reading smaller than the sidebar links they sit alongside. */
    font-size: var(--ed-text-subhead);
    font-weight: var(--ed-weight-medium);
    line-height: 1;
    color: var(--ed-text-secondary);
    text-decoration: none;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--ed-radius-pill);
    cursor: pointer;
    transition: background-color var(--ed-duration) var(--ed-ease),
                color var(--ed-duration) var(--ed-ease);
}

.portal-topbar-control:hover {
    color: var(--ed-text);
    background: var(--ed-fill-subtle);
}

.portal-topbar-control:focus-visible {
    outline: 2px solid var(--ed-accent);
    outline-offset: 1px;
}

.portal-auth-button {
    color: var(--ed-text-on-accent);
    background: var(--ed-accent);
}

.portal-auth-button:hover {
    color: var(--ed-text-on-accent);
    background: var(--ed-accent-hover);
}

/* Identity is a label, not a control: same metrics as a control so the row
   stays on one baseline, but no hover and no border. */
/* ---- Account menu ----
   Theme, language and sign-out live behind one control. They never change on
   their own and are used rarely, so they were spending four permanent slots in
   the chrome of every page to say nothing. */
.portal-topbar-menu {
    position: relative;
}

.portal-topbar-menu-chevron {
    inline-size: 14px;
    block-size: 14px;
    color: var(--ed-text-tertiary);
    transition: transform var(--ed-duration) var(--ed-ease);
}

[data-ed-menu][aria-expanded="true"] .portal-topbar-menu-chevron {
    transform: rotate(180deg);
}

.portal-topbar-menu-panel {
    position: absolute;
    inset-block-start: calc(100% + var(--ed-space-2));
    /* Anchored to the inline end so the panel opens back under the control
       rather than off the edge of the viewport -- and mirrors under RTL. */
    inset-inline-end: 0;
    z-index: 1050;
    display: grid;
    gap: 2px;
    min-inline-size: 200px;
    padding: var(--ed-space-2);
    background: var(--ed-surface);
    border: 1px solid var(--ed-separator-soft);
    border-radius: var(--ed-radius-md);
    box-shadow: var(--ed-shadow-overlay);
}

/* The toggle's aria-expanded is the only state there is, so the panel reads it
   directly and the announced state cannot drift from the visible one. */
[data-ed-menu][aria-expanded="false"] + .portal-topbar-menu-panel {
    display: none;
}

.portal-topbar-menu-panel form {
    margin: 0;
}

.portal-topbar-menu-item {
    display: flex;
    align-items: center;
    gap: var(--ed-space-3);
    inline-size: 100%;
    block-size: 34px;
    padding-inline: var(--ed-space-3);
    font-family: inherit;
    font-size: var(--ed-text-subhead);
    text-align: start;
    color: var(--ed-text-secondary);
    background: none;
    border: 0;
    border-radius: var(--ed-radius-sm);
    cursor: pointer;
}

.portal-topbar-menu-item:hover {
    color: var(--ed-text);
    background: var(--ed-surface-hover);
}

.portal-topbar-menu-item:focus-visible {
    outline: 2px solid var(--ed-accent);
    outline-offset: -2px;
}

.portal-topbar-menu-item svg {
    flex: 0 0 auto;
    inline-size: 16px;
    block-size: 16px;
    color: var(--ed-text-tertiary);
}

.portal-topbar-menu-item--logout:hover {
    color: var(--ed-danger);
    background: var(--ed-danger-tint);
}

.portal-topbar-menu-item--logout:hover svg {
    color: var(--ed-danger);
}

/* The module tab strip needs no rules of its own: .ed-tabs carries the
   overflow behaviour for every tab strip in the portal. */

/* --------------------------------------------------------------------------
   COUNT BADGE
   Rides inside a topbar control or a mobile quick action. Only a count that
   is genuinely waiting on this user gets the urgent tint; an unread
   notification is news, not a demand.
   -------------------------------------------------------------------------- */
.portal-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 18px;
    block-size: 18px;
    padding-inline: var(--ed-space-1);
    font-size: var(--ed-text-caption);
    font-weight: var(--ed-weight-semibold);
    font-variant-numeric: tabular-nums lining-nums;
    line-height: 1;
    color: var(--ed-warning);
    background: var(--ed-warning-tint);
    border-radius: var(--ed-radius-pill);
}

.portal-count--urgent {
    color: var(--ed-danger);
    background: var(--ed-danger-tint);
}

/* A count at the far end of a nav row rather than tucked against a label. */
.portal-count--trailing {
    margin-inline-start: auto;
}

/* Theme toggle glyphs: exactly one is shown per theme. */
.portal-theme-moon,
[data-theme="dark"] .portal-theme-sun {
    display: none;
}

[data-theme="dark"] .portal-theme-moon {
    display: inline-block;
}

/* --------------------------------------------------------------------------
   MOBILE HEADER  (< 1200px)
   -------------------------------------------------------------------------- */
.portal-mobile-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 1035;
    /* The topbar gets display:flex from Bootstrap's .d-xl-flex; this element
       carries only .d-xl-none, so it must declare its own or the children
       stack and overlap the page heading beneath. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ed-space-3);
    block-size: 56px;
    padding-inline: var(--ed-space-4);
    background: color-mix(in srgb, var(--ed-canvas) 82%, transparent);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-block-end: 1px solid var(--ed-separator-soft);
}

.portal-mobile-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--ed-space-2);
    block-size: 34px;
    padding-inline: var(--ed-space-3);
    font-family: inherit;
    font-size: var(--ed-text-subhead);
    font-weight: var(--ed-weight-medium);
    color: var(--ed-text-secondary);
    background: none;
    border: 1px solid var(--ed-separator);
    border-radius: var(--ed-radius-pill);
    cursor: pointer;
}

/* edic_icon strips the master's intrinsic width/height, so a classed icon is
   sized here or not at all. Without this the glyph collapsed to 0x0 and, since
   the "Menu" label beside it is hidden below 576px, the button rendered as an
   empty pill with no way into the navigation on a phone. */
.portal-mobile-toggle-icon {
    inline-size: 20px;
    block-size: 20px;
}

.portal-mobile-toggle:hover {
    color: var(--ed-text);
    background: var(--ed-fill-subtle);
}

.portal-mobile-toggle:focus-visible {
    outline: 2px solid var(--ed-accent);
    outline-offset: 1px;
}

.portal-brand-mobile {
    display: inline-flex;
    align-items: center;
    min-inline-size: 0;
}

.portal-brand-mobile .portal-brand-logo {
    inline-size: min(132px, 100%);
}

.portal-mobile-quick-actions {
    display: flex;
    align-items: center;
    gap: var(--ed-space-2);
}

/* Sized to match .portal-mobile-theme-btn beside it, so the quick-action row
   reads as one set of controls rather than two loose digits. */
.portal-mobile-action-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ed-space-1);
    min-inline-size: 34px;
    block-size: 34px;
    padding-inline: var(--ed-space-2);
    color: var(--ed-text-secondary);
    text-decoration: none;
    border: 1px solid var(--ed-separator);
    border-radius: var(--ed-radius-pill);
}

.portal-mobile-action-badge:hover {
    color: var(--ed-text);
    background: var(--ed-fill-subtle);
}

.portal-mobile-action-badge svg {
    flex: 0 0 auto;
}

.portal-mobile-theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 34px;
    block-size: 34px;
    color: var(--ed-text-secondary);
    background: none;
    border: 1px solid var(--ed-separator);
    border-radius: var(--ed-radius-pill);
    cursor: pointer;
}

.portal-mobile-theme-btn:hover {
    color: var(--ed-text);
    background: var(--ed-fill-subtle);
}

.portal-mobile-login {
    block-size: 34px;
    padding-inline: var(--ed-space-4);
    font-size: var(--ed-text-subhead);
    color: var(--ed-text-on-accent);
    background: var(--ed-accent);
    border: 0;
    border-radius: var(--ed-radius-pill);
}

/* --------------------------------------------------------------------------
   MOBILE DRAWER  (< 1200px)
   -------------------------------------------------------------------------- */
.portal-mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, .32);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ed-duration) var(--ed-ease),
                visibility var(--ed-duration) var(--ed-ease);
}

.mobile-menu-open .portal-mobile-backdrop {
    opacity: 1;
    visibility: visible;
}

/* The drawer itself is now .portal-sidebar under a max-width query, up with
   the sidebar rules. What remains here is what only the drawer widths use. */

/* Stop the page behind the drawer from scrolling with it. */
body.mobile-menu-open {
    overflow: hidden;
}

/* Icons inside chrome controls never shrink. */
.portal-drawer-close svg,
.portal-mobile-toggle svg,
.portal-mobile-theme-btn svg,
.portal-topbar-control svg {
    flex: 0 0 auto;
}

.portal-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Without this the logo beside it consumes the row and flex crushes the
       button - and its icon with it - down to a few pixels. */
    flex: 0 0 auto;
    inline-size: 32px;
    block-size: 32px;
    color: var(--ed-text-secondary);
    background: none;
    border: 0;
    border-radius: var(--ed-radius-pill);
    cursor: pointer;
}

.portal-drawer-close:hover {
    color: var(--ed-text);
    background: var(--ed-fill-subtle);
}

.portal-drawer-close:focus-visible {
    outline: 2px solid var(--ed-accent);
    outline-offset: 1px;
}

.portal-drawer-footer {
    flex: 0 0 auto;
    margin-block-start: var(--ed-space-6);
    padding-block-start: var(--ed-space-4);
    border-block-start: 1px solid var(--ed-separator-soft);
}

.portal-drawer-user {
    padding-inline: var(--ed-space-3);
    margin-block-end: var(--ed-space-3);
    font-size: var(--ed-text-subhead);
    color: var(--ed-text-secondary);
}

.portal-drawer-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ed-space-2);
    padding-inline: var(--ed-space-3);
}

.portal-drawer-lang-form,
.portal-drawer-logout-form {
    display: inline-flex;
    margin: 0;
}

.portal-drawer-util-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ed-space-2);
    block-size: 32px;
    padding-inline: var(--ed-space-3);
    font-family: inherit;
    font-size: var(--ed-text-subhead);
    color: var(--ed-text-secondary);
    background: none;
    border: 1px solid var(--ed-separator);
    border-radius: var(--ed-radius-pill);
    cursor: pointer;
}

.portal-drawer-util-btn:hover {
    color: var(--ed-text);
    background: var(--ed-fill-subtle);
}

.portal-drawer-logout:hover {
    color: var(--ed-danger);
    border-color: var(--ed-danger);
}

.portal-drawer-version {
    padding-inline: var(--ed-space-3);
    margin-block-start: var(--ed-space-3);
    font-size: var(--ed-text-caption);
    color: var(--ed-text-tertiary);
}