/* ==========================================================================
   EDIC UI Primitives  —  v3
   --------------------------------------------------------------------------
   Six primitives, built only from the tokens in edic-tokens.css.

     .ed-page-header   page title + subtitle + actions
     .ed-section       a titled band of content
     .ed-group         inset grouped list (the workhorse)
     .ed-btn           button
     .ed-card          a surface that holds arbitrary content
     .ed-badge         a count or status

   Rules this file obeys, and which the legacy sheets do not:
     - no !important
     - no gradients
     - no hard-coded colour, size, radius or shadow
     - logical properties throughout, so RTL needs no separate ruleset
   ========================================================================== */

/* --------------------------------------------------------------------------
   Scope. Everything is nested under .ed-scope so that this file cannot
   affect a page that has not been migrated yet.
   -------------------------------------------------------------------------- */
.ed-scope {
    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);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ed-scope :where(h1, h2, h3, h4, p, ul, ol) {
    margin: 0;
}

.ed-scope :where(ul, ol) {
    padding: 0;
    list-style: none;
}

/* A link that is not wearing .ed-link or .ed-btn still has to be a link.
   Absorbed from site.css when that sheet was reduced to a token shim. */
.ed-scope a:not([class]) {
    color: var(--ed-accent);
    text-decoration: none;
}

.ed-scope a:not([class]):hover {
    color: var(--ed-accent-hover);
    text-decoration: underline;
}

/* Monospace is for things that are read character by character: an id, a
   snippet, a code sample. Absorbed from espandar-typography.css when that
   sheet was retired.

   A mono face at an identical px value reads larger than the prose around
   it, so it wants to sit a step down. That correction used to be an em
   ratio, which cannot work against a scale this compact: 0.9 of the body
   step is 13.5px, which is not a step, and the same ratio inside a caption
   fell below anything this system asks anyone to read.

   `min` states it as what it is - a ceiling, not a ratio. In prose the mono
   resolves to the subhead step; in a context already at or below that step
   it simply matches, because there is nothing left to step down to and
   growing would be worse than not shrinking. Every outcome is a step. */
.ed-scope :where(code, kbd, pre, samp) {
    font-family: var(--ed-font-mono);
    font-size: min(1em, var(--ed-text-subhead));
}

/* The UA sheet shrinks `small` by a further 0.83, which compounds against
   whatever step its parent is already on - a `small` inside a caption landed
   at 9px. `small` means "secondary", not "83% of the parent", so it takes
   the same ceiling as the mono above rather than a ratio of its own. */
.ed-scope small {
    font-size: min(1em, var(--ed-text-subhead));
}

/* Numbers align in columns and never wobble as they tick. */
.ed-scope :where(.ed-num, .ed-stat-value, .ed-badge, td, th) {
    font-feature-settings: var(--ed-numeric);
    font-variant-numeric: tabular-nums lining-nums;
}

/* --------------------------------------------------------------------------
   PAGE HEADER
   One display-size title per screen. No icon: the title is the focal point
   and an icon beside it competes with it.
   -------------------------------------------------------------------------- */
.ed-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ed-space-4);
    padding-block: var(--ed-space-2) var(--ed-space-8);
}

.ed-page-title {
    font-size: var(--ed-text-display);
    font-weight: var(--ed-weight-semibold);
    line-height: var(--ed-leading-tight);
    letter-spacing: var(--ed-tracking-display);
    color: var(--ed-text);
}

.ed-page-subtitle {
    margin-block-start: var(--ed-space-2);
    max-width: var(--ed-measure);
    font-size: var(--ed-text-body);
    line-height: var(--ed-leading-snug);
    color: var(--ed-text-secondary);
}

.ed-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ed-space-2);
}

/* --------------------------------------------------------------------------
   SECTION
   -------------------------------------------------------------------------- */
.ed-section {
    margin-block-end: var(--ed-space-10);
}

.ed-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ed-space-3);
    margin-block-end: var(--ed-space-3);
}

/* ---- Collapsible section ----
   The title becomes the disclosure control, so the whole heading is the hit
   area rather than a chevron beside it. */
.ed-section-toggle {
    display: flex;
    align-items: center;
    gap: var(--ed-space-2);
    /* The heading's own line-height left this 23px tall -- under the 24px
       target floor, on a control added to make a touch-heavy form easier to
       use. Height is set here rather than inherited from the type. */
    min-block-size: 32px;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: start;
    background: none;
    border: 0;
    cursor: pointer;
}

.ed-section-toggle:focus-visible {
    outline: 2px solid var(--ed-accent);
    outline-offset: 4px;
    border-radius: var(--ed-radius-sm);
}

.ed-section-chevron {
    flex: 0 0 auto;
    inline-size: 18px;
    block-size: 18px;
    color: var(--ed-text-tertiary);
    transition: transform var(--ed-duration) var(--ed-ease);
}

/* Pointing down when open, along the reading direction when closed. */
.ed-section-toggle[aria-expanded="false"] .ed-section-chevron {
    transform: rotate(-90deg);
}

[dir="rtl"] .ed-section-toggle[aria-expanded="false"] .ed-section-chevron {
    transform: rotate(90deg);
}

/* The toggle sits inside the heading, so the body is not its sibling -- the
   head is. :has() lets the closed state reach the body without a state class
   for the script to keep in step with the attribute. */
.ed-section-head:has(.ed-section-toggle[aria-expanded="false"]) + .ed-section-body {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .ed-section-chevron {
        transition: none;
    }
}

.ed-section-title {
    font-size: var(--ed-text-title);
    font-weight: var(--ed-weight-semibold);
    line-height: var(--ed-leading-snug);
    letter-spacing: var(--ed-tracking-title);
    color: var(--ed-text);
}

.ed-section-note {
    font-size: var(--ed-text-subhead);
    color: var(--ed-text-tertiary);
}

/* --------------------------------------------------------------------------
   GROUP  —  inset grouped list
   Replaces the pattern of one bordered, shadowed card per link. Related
   rows share a single surface and are divided by hairlines, so the eye
   reads the group as one object instead of N competing objects.
   -------------------------------------------------------------------------- */
.ed-group {
    background: var(--ed-surface);
    border: 1px solid var(--ed-separator-soft);
    border-radius: var(--ed-radius-lg);
    overflow: hidden;
}

.ed-row {
    display: flex;
    align-items: center;
    gap: var(--ed-space-4);
    width: 100%;
    padding: var(--ed-space-4) var(--ed-space-5);
    color: inherit;
    text-decoration: none;
    background: none;
    border: 0;
    border-block-start: 1px solid var(--ed-separator-soft);
    text-align: start;
    transition: background-color var(--ed-duration) var(--ed-ease);
}

.ed-row:first-child {
    border-block-start: 0;
}

a.ed-row:hover,
button.ed-row:hover {
    background: var(--ed-surface-hover);
    color: inherit;
}

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

.ed-row-body {
    flex: 1 1 auto;
    min-width: 0;
}

.ed-row-title {
    font-size: var(--ed-text-body);
    font-weight: var(--ed-weight-medium);
    line-height: var(--ed-leading-snug);
    color: var(--ed-text);
}

/* Secondary line. Use only when it carries information the title does not
   — a count, a state, a deadline. Never to restate the title. */
.ed-row-meta {
    margin-block-start: 2px;
    font-size: var(--ed-text-subhead);
    line-height: var(--ed-leading-snug);
    color: var(--ed-text-secondary);
}

.ed-row-trail {
    display: flex;
    align-items: center;
    gap: var(--ed-space-3);
    flex: 0 0 auto;
    color: var(--ed-text-tertiary);
}

/* The chevron is functional: it marks the row as navigable. It is the one
   piece of ornament the system keeps. */
.ed-chevron {
    inline-size: 18px;
    block-size: 18px;
    flex: 0 0 auto;
    color: var(--ed-grey-400);
}

[dir="rtl"] .ed-chevron {
    transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   BUTTON
   -------------------------------------------------------------------------- */
.ed-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ed-space-2);
    padding: 0 var(--ed-space-4);
    block-size: 36px;
    font-family: inherit;
    font-size: var(--ed-text-subhead);
    font-weight: var(--ed-weight-medium);
    letter-spacing: var(--ed-tracking-body);
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--ed-radius-pill);
    cursor: pointer;
    text-decoration: none;
    /* Colour transitions, but not opacity. Opacity carries the disabled state,
       and a state has to be true the moment it is true - transitioning it
       means the button can be inert while still looking available. */
    transition: background-color var(--ed-duration) var(--ed-ease),
                border-color var(--ed-duration) var(--ed-ease);
}

.ed-btn:focus-visible {
    outline: 3px solid var(--ed-accent-ring);
    outline-offset: 2px;
}

.ed-btn:active {
    opacity: .82;
}

.ed-btn-primary {
    background: var(--ed-accent);
    color: var(--ed-text-on-accent);
}

.ed-btn-primary:hover {
    background: var(--ed-accent-hover);
    color: var(--ed-text-on-accent);
}

.ed-btn-secondary {
    background: var(--ed-surface);
    border-color: var(--ed-separator);
    color: var(--ed-text);
}

.ed-btn-secondary:hover {
    background: var(--ed-surface-hover);
    color: var(--ed-text);
}

.ed-btn-plain {
    padding-inline: var(--ed-space-2);
    background: none;
    color: var(--ed-accent);
}

.ed-btn-plain:hover {
    background: var(--ed-accent-tint);
    color: var(--ed-accent-hover);
}

.ed-btn-lg {
    block-size: 44px;
    padding-inline: var(--ed-space-6);
    font-size: var(--ed-text-body);
}

/* A commit button that ends a long form and should not read as an
   afterthought beside the fields it submits. Absorbed from
   ep02-modernization.css, which set this as .dispatch-override-submit. */
.ed-btn--wide {
    min-inline-size: 180px;
}

/* --------------------------------------------------------------------------
   CARD
   -------------------------------------------------------------------------- */
.ed-card {
    padding: var(--ed-space-5);
    background: var(--ed-surface);
    border: 1px solid var(--ed-separator-soft);
    border-radius: var(--ed-radius-lg);
}

/* --------------------------------------------------------------------------
   BADGE
   -------------------------------------------------------------------------- */
.ed-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 22px;
    padding-inline: 7px;
    block-size: 22px;
    font-size: var(--ed-text-caption);
    font-weight: var(--ed-weight-semibold);
    line-height: 1;
    border-radius: var(--ed-radius-pill);
    background: var(--ed-fill-subtle);
    color: var(--ed-text-secondary);
}

.ed-badge-accent {
    background: var(--ed-accent);
    color: var(--ed-text-on-accent);
}

.ed-badge-warning {
    background: var(--ed-warning-tint);
    color: var(--ed-warning);
}

/* --------------------------------------------------------------------------
   EMPTY STATE
   -------------------------------------------------------------------------- */
.ed-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ed-space-4);
    padding-block: var(--ed-space-16);
    text-align: center;
}

/* A step below `display` on purpose: an empty state sits inside a page that
   already has a title above it, and must not compete with it. */
.ed-empty-title {
    font-size: var(--ed-text-title);
    font-weight: var(--ed-weight-semibold);
    letter-spacing: var(--ed-tracking-title);
    line-height: var(--ed-leading-tight);
}

.ed-empty-text {
    max-width: 46ch;
    font-size: var(--ed-text-body);
    line-height: var(--ed-leading-snug);
    color: var(--ed-text-secondary);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
/* ==========================================================================
   PAGE PRIMITIVES
   --------------------------------------------------------------------------
   Added for the page migration. Every one of these replaces a legacy pattern
   that appears across the remaining templates, in order of how often it does:
   badges (131 uses), the settings/definition row (41), tables (18), form
   validation (51), metric tiles (23), action bars (9).
   ========================================================================== */

/* --------------------------------------------------------------------------
   STATUS BADGE
   Tinted, never saturated. A status is information, not an alarm - only a
   genuinely bad state gets a warm colour.
   -------------------------------------------------------------------------- */
.ed-badge-neutral {
    background: var(--ed-fill-subtle);
    color: var(--ed-text-secondary);
}

.ed-badge-success,
.ed-badge-approved {
    background: var(--ed-success-tint);
    color: var(--ed-success);
}

.ed-badge-pending,
.ed-badge-submitted {
    background: var(--ed-warning-tint);
    color: var(--ed-warning);
}

.ed-badge-danger,
.ed-badge-rejected {
    background: var(--ed-danger-tint);
    color: var(--ed-danger);
}

.ed-badge-draft {
    background: var(--ed-fill-subtle);
    color: var(--ed-text-tertiary);
}

/* A badge carrying a word rather than a count needs room to breathe. */
.ed-badge-text {
    min-inline-size: 0;
    padding-inline: var(--ed-space-2);
    block-size: 22px;
    font-weight: var(--ed-weight-medium);
    letter-spacing: var(--ed-tracking-caption);
}

/* --------------------------------------------------------------------------
   BUTTON, compact
   -------------------------------------------------------------------------- */
/* 32px, not 30: compact is the densest button in the system and it still has
   to be tappable. Below 32 it fails the 24px floor once the pointer is a
   gloved finger rather than a mouse. */
.ed-btn-compact {
    block-size: 32px;
    padding-inline: var(--ed-space-3);
    font-size: var(--ed-text-subhead);
}

.ed-btn-danger {
    background: var(--ed-danger);
    /* --ed-text-on-accent, which is white under the light theme and dark navy
       under the dark one - which is exactly the pair the two danger values
       need. White was hardcoded here on the assumption that it works on both;
       it does not. On the dark theme's #ff5a50 white measures 3.2:1, under
       the 4.5:1 floor, while the navy measures 6.2:1. On the light theme's
       #c8102e it is the other way round. */
    color: var(--ed-text-on-accent);
}

.ed-btn:disabled,
.ed-btn[aria-disabled="true"] {
    opacity: .4;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   TOOLBAR  (replaces .ep-action-bar)
   -------------------------------------------------------------------------- */
.ed-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ed-space-3);
    margin-block-end: var(--ed-space-4);
}

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

.ed-toolbar-note {
    font-size: var(--ed-text-subhead);
    color: var(--ed-text-tertiary);
}

/* --------------------------------------------------------------------------
   DEFINITION LIST  (replaces .ep-settings-row / -label / -val)
   The detail-page workhorse. Same inset-group treatment as .ed-group, so a
   record reads as one object rather than a stack of labelled boxes.
   -------------------------------------------------------------------------- */
.ed-dl {
    display: grid;
    background: var(--ed-surface);
    border: 1px solid var(--ed-separator-soft);
    border-radius: var(--ed-radius-lg);
    overflow: hidden;
}

.ed-dl-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ed-space-2) var(--ed-space-4);
    padding: var(--ed-space-3) var(--ed-space-5);
    border-block-start: 1px solid var(--ed-separator-soft);
}

.ed-dl-row:first-child {
    border-block-start: 0;
}

.ed-dl-term {
    flex: 0 0 auto;
    font-size: var(--ed-text-subhead);
    color: var(--ed-text-secondary);
}

.ed-dl-value {
    flex: 1 1 auto;
    min-inline-size: 0;
    font-size: var(--ed-text-subhead);
    font-weight: var(--ed-weight-medium);
    text-align: end;
    color: var(--ed-text);
    font-variant-numeric: tabular-nums lining-nums;
}

.ed-dl-value--empty {
    font-weight: var(--ed-weight-regular);
    color: var(--ed-text-tertiary);
}

/* --------------------------------------------------------------------------
   STAT TILE  (replaces .ep-metric-item)
   -------------------------------------------------------------------------- */
.ed-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    overflow: hidden;
    background: var(--ed-separator-soft);
    border: 1px solid var(--ed-separator-soft);
    border-radius: var(--ed-radius-lg);
}

@media (min-width: 480px) {
    .ed-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
    .ed-stats { grid-template-columns: repeat(4, 1fr); }
}

.ed-stat {
    display: flex;
    flex-direction: column;
    gap: var(--ed-space-1);
    padding: var(--ed-space-4) var(--ed-space-5);
    background: var(--ed-surface);
}

/* A stat carrying more than a label and a figure -- a target, a sparkline, a
   delta and a caption, as the BI board's tiles do -- needs more air between
   its parts than a two-line stat does. */
.ed-stat--rich {
    gap: var(--ed-space-2);
}

.ed-stat-label {
    font-size: var(--ed-text-subhead);
    color: var(--ed-text-secondary);
}

.ed-stat-value {
    display: flex;
    align-items: baseline;
    gap: 3px;
    font-size: var(--ed-text-metric);
    font-weight: var(--ed-weight-semibold);
    line-height: var(--ed-leading-tight);
    letter-spacing: var(--ed-tracking-title);
    color: var(--ed-text);
}

.ed-stat-unit {
    font-size: var(--ed-text-subhead);
    font-weight: var(--ed-weight-regular);
    color: var(--ed-text-secondary);
}

/* --------------------------------------------------------------------------
   SUPPORTING BITS
   -------------------------------------------------------------------------- */
.ed-subhead {
    margin-block: var(--ed-space-5) var(--ed-space-3);
    font-size: var(--ed-text-body);
    font-weight: var(--ed-weight-medium);
    color: var(--ed-text-secondary);
}

.ed-subhead:first-child {
    margin-block-start: 0;
}

.ed-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--ed-space-4);
}

/* For cards that carry a chart. The 240px track packed four plots into a
   1180px column, at which width an axis label is wider than the bar it
   belongs to. */
.ed-card-grid--wide {
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
}

/* Shown only where the sidebar is not. Below 1200px the sidebar collapses
   into the menu, so a list of module links earns its place; above it, the
   same four links are already standing in the left rail. */
@media (min-width: 1200px) {
    .ed-when-no-sidebar { display: none; }
}

/* Two equal columns above the breakpoint, stacked below. */
.ed-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ed-space-6);
    align-items: start;
}

@media (min-width: 900px) {
    .ed-cols { grid-template-columns: 1fr 1fr; }
}

/* A block of user-entered prose - notes, a corrective action. */
.ed-prose {
    padding: var(--ed-space-3) var(--ed-space-4);
    font-size: var(--ed-text-subhead);
    line-height: var(--ed-leading-body);
    color: var(--ed-text-secondary);
    background: var(--ed-surface-sunken);
    border-radius: var(--ed-radius-md);
}

.ed-field-head {
    margin-block-end: var(--ed-space-2);
    font-size: var(--ed-text-subhead);
    font-weight: var(--ed-weight-medium);
    color: var(--ed-text-secondary);
}

.ed-link {
    color: var(--ed-accent);
    text-decoration: none;
}

.ed-link:hover {
    color: var(--ed-accent-hover);
    text-decoration: underline;
}

.ed-num {
    font-variant-numeric: tabular-nums lining-nums;
}

.ed-muted {
    color: var(--ed-text-tertiary);
}

.ed-text-warning {
    color: var(--ed-warning);
}

.ed-text-danger {
    color: var(--ed-danger);
}

.ed-text-success {
    color: var(--ed-success);
}

/* Bootstrap supplied these as .small, .fw-semibold, .text-center and
   .text-break. Sized and weighted from the type scale rather than from a
   relative em, so they stay on the ramp wherever they are used. */
.ed-small {
    font-size: var(--ed-text-subhead);
}

.ed-semibold {
    font-weight: var(--ed-weight-semibold);
}

.ed-center {
    text-align: center;
}

.ed-break {
    overflow-wrap: anywhere;
}

.ed-nowrap {
    white-space: nowrap;
}

.ed-truncate {
    max-inline-size: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Three-up stat strip, for pages with three headline numbers rather than the
   default four. */
@media (min-width: 900px) {
    .ed-stats--three { grid-template-columns: repeat(3, 1fr); }
}

.ed-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.ed-chart-title {
    margin-block-end: var(--ed-space-3);
    font-size: var(--ed-text-subhead);
    font-weight: var(--ed-weight-medium);
    color: var(--ed-text-secondary);
}

/* Chart.js needs a positioned box with a fixed height to size its canvas. */
.ed-chart {
    position: relative;
    block-size: 180px;
    inline-size: 100%;
}

.ed-chart--tall {
    block-size: 230px;
}

/* Shown in place of a chart that has no data for the selected period. It
   replaces the canvas rather than sitting beside it, so the card keeps its
   height and the grid does not reflow. */
.ed-chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ed-space-2);
    font-size: var(--ed-text-subhead);
    color: var(--ed-text-tertiary);
    text-align: center;
}

.ed-chart-empty p {
    margin: 0;
}

/* An empty silo still belongs on the board - the plant has one - but at full
   strength a row of 0.0 cards out-shouted the two silos actually holding
   stock, which is the opposite of what the section is for. */
.ed-silo--empty {
    opacity: .5;
}

/* ---- Silo card ---- */
.ed-silo {
    display: flex;
    flex-direction: column;
    gap: var(--ed-space-2);
}

.ed-silo-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ed-space-2);
}

.ed-silo-name {
    font-size: var(--ed-text-body);
    font-weight: var(--ed-weight-medium);
    line-height: var(--ed-leading-snug);
}

.ed-silo-material,
.ed-silo-pct {
    font-size: var(--ed-text-caption);
    color: var(--ed-text-tertiary);
}

.ed-silo-figure {
    font-size: var(--ed-text-title);
    font-weight: var(--ed-weight-semibold);
    letter-spacing: var(--ed-tracking-title);
}

.ed-silo-capacity {
    font-size: var(--ed-text-subhead);
    font-weight: var(--ed-weight-regular);
    color: var(--ed-text-secondary);
}

/* --------------------------------------------------------------------------
   METER
   A level indicator - silo fill, utilisation. Neutral by default; colour only
   when the level is actually a problem.
   -------------------------------------------------------------------------- */
.ed-meter {
    block-size: 6px;
    overflow: hidden;
    background: var(--ed-fill-subtle);
    border-radius: var(--ed-radius-pill);
}

.ed-meter-fill {
    display: block;
    block-size: 100%;
    background: var(--ed-accent);
    border-radius: var(--ed-radius-pill);
}

.ed-meter-fill--warn { background: var(--ed-warning); }
.ed-meter-fill--over { background: var(--ed-danger); }

/* A meter sitting inline in a run of meta text needs a width of its own,
   otherwise flex collapses it to nothing. */
.ed-progress-wrap {
    display: inline-block;
    inline-size: 140px;
    max-inline-size: 40vw;
}

.ed-progress-wrap .ed-meter {
    display: block;
}

/* --------------------------------------------------------------------------
   TABLE
   No zebra striping: hairlines and alignment carry the structure. Numbers use
   tabular figures and align to the end so digits stack in a column.
   -------------------------------------------------------------------------- */
.ed-table-wrap {
    overflow-x: auto;
    background: var(--ed-surface);
    border: 1px solid var(--ed-separator-soft);
    border-radius: var(--ed-radius-lg);
}

.ed-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--ed-text-subhead);
}

.ed-table th,
.ed-table td {
    padding: var(--ed-space-3) var(--ed-space-4);
    text-align: start;
    vertical-align: middle;
    border-block-start: 1px solid var(--ed-separator-soft);
}

.ed-table-open {
    display: inline-flex;
    align-items: center;
    color: var(--ed-text-tertiary);
    text-decoration: none;
}

.ed-table tr:hover .ed-table-open,
.ed-table-open:focus-visible {
    color: var(--ed-accent);
}

.ed-table thead th {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    border-block-start: 0;
    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);
    background: var(--ed-surface);
    white-space: nowrap;
}

.ed-table tbody tr {
    transition: background-color var(--ed-duration) var(--ed-ease);
}

.ed-table tbody tr:hover {
    background: var(--ed-surface-hover);
}

.ed-table-num {
    text-align: end;
    font-variant-numeric: tabular-nums lining-nums;
}

.ed-table-actions {
    inline-size: 1%;
    white-space: nowrap;
    text-align: end;
}

/* Several actions in one cell, some of which are single-button POST forms. */
.ed-table-actions > * {
    vertical-align: middle;
}

.ed-inline-form {
    display: inline;
    margin: 0;
}

.ed-table-empty {
    padding: var(--ed-space-10);
    text-align: center;
    color: var(--ed-text-tertiary);
}

/* Responsive card mode.
   A seven-column operational table cannot shrink to 375px, so below the
   breakpoint each row becomes a card and each cell is labelled from its own
   data-label. Same contract the legacy sheet used, so the markup already
   carrying data-label needs no change. */
@media (max-width: 767px) {
    .ed-table--cards,
    .ed-table--cards tbody,
    .ed-table--cards tr,
    .ed-table--cards td {
        display: block;
        inline-size: 100%;
    }

    .ed-table--cards thead {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .ed-table--cards tr {
        padding: var(--ed-space-2) 0;
        border-block-start: 1px solid var(--ed-separator-soft);
    }

    .ed-table--cards tr:first-child {
        border-block-start: 0;
    }

    .ed-table--cards td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--ed-space-4);
        padding: var(--ed-space-2) var(--ed-space-4);
        border: 0;
        text-align: start;
    }

    .ed-table--cards td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: var(--ed-text-caption);
        color: var(--ed-text-tertiary);
    }

    /* A cell with no label is a full-width row - usually the actions. */
    .ed-table--cards td:not([data-label]) {
        justify-content: flex-end;
    }

    .ed-table--cards .ed-table-num {
        text-align: end;
    }
}

/* --------------------------------------------------------------------------
   FORM
   -------------------------------------------------------------------------- */
.ed-fieldset {
    margin-block-end: var(--ed-space-8);
    padding: 0;
    border: 0;
}

.ed-fieldset-title {
    margin-block-end: var(--ed-space-4);
    padding-block-end: var(--ed-space-2);
    font-size: var(--ed-text-title);
    font-weight: var(--ed-weight-semibold);
    letter-spacing: var(--ed-tracking-title);
    border-block-end: 1px solid var(--ed-separator-soft);
}

/* auto-fill, not auto-fit: auto-fit collapses the empty tracks, so a section
   with three fields stretched them to 367px while a six-field section above it
   sat at 271px. Keeping the empty tracks holds every field on the page to one
   width, which is what makes a stack of sections read as a single form. */
.ed-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--ed-space-4);
}

/* The required marker. Colour alone would not carry it, so the asterisk is a
   real glyph and the label also holds a visually hidden "required". */
.ed-required {
    color: var(--ed-danger);
    font-weight: var(--ed-weight-semibold);
}

/* A field that needs the full width of the grid - a textarea, a long note. */
.ed-field--wide {
    grid-column: 1 / -1;
}

.ed-field {
    display: flex;
    flex-direction: column;
    gap: var(--ed-space-1);
    min-inline-size: 0;
}

/* The project has exactly one checkbox. Bootstrap dressed it with
   .form-check-input; accent-color gets the same result from the native
   control in a couple of lines, and follows the theme. */
.ed-check {
    inline-size: 16px;
    block-size: 16px;
    accent-color: var(--ed-accent);
    cursor: pointer;
}

.ed-label {
    font-size: var(--ed-text-subhead);
    font-weight: var(--ed-weight-medium);
    color: var(--ed-text-secondary);
}

/* Django ModelForms set their widget class in Python, and this project uses
   Bootstrap's names there. Rather than edit every form class - and risk
   missing one - the Bootstrap names are aliased inside the v3 scope only.
   Outside .ed-scope they keep behaving exactly as Bootstrap intends. */
.ed-input,
.ed-select,
.ed-textarea,
.ed-scope .form-control,
.ed-scope .form-select {
    inline-size: 100%;
    min-block-size: 36px;
    padding: var(--ed-space-2) var(--ed-space-3);
    font-family: inherit;
    font-size: var(--ed-text-subhead);
    color: var(--ed-text);
    background: var(--ed-surface);
    border: 1px solid var(--ed-separator);
    border-radius: var(--ed-radius-sm);
    transition: border-color var(--ed-duration) var(--ed-ease),
                box-shadow var(--ed-duration) var(--ed-ease);
}

.ed-textarea {
    min-block-size: 84px;
    resize: vertical;
}

.ed-input:focus,
.ed-select:focus,
.ed-textarea:focus,
.ed-scope .form-control:focus,
.ed-scope .form-select:focus {
    outline: none;
    border-color: var(--ed-accent);
    box-shadow: 0 0 0 3px var(--ed-accent-ring);
}

.ed-input:disabled,
.ed-select:disabled,
.ed-textarea:disabled,
.ed-scope .form-control:disabled,
.ed-scope .form-select:disabled {
    color: var(--ed-text-tertiary);
    background: var(--ed-surface-sunken);
}

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

/* Radio / checkbox choices presented as selectable rows. */
.ed-choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ed-space-2);
}

.ed-choice {
    display: inline-flex;
    align-items: center;
    gap: var(--ed-space-2);
    padding: var(--ed-space-2) var(--ed-space-4);
    font-size: var(--ed-text-subhead);
    background: var(--ed-surface);
    border: 1px solid var(--ed-separator);
    border-radius: var(--ed-radius-pill);
    cursor: pointer;
    transition: border-color var(--ed-duration) var(--ed-ease),
                background-color var(--ed-duration) var(--ed-ease);
}

.ed-choice:hover {
    background: var(--ed-surface-hover);
}

.ed-choice:has(input:checked) {
    border-color: var(--ed-accent);
    background: var(--ed-accent-tint);
    color: var(--ed-accent);
}

.ed-choice input {
    margin: 0;
    accent-color: var(--ed-accent);
}

.ed-scope legend {
    padding: 0;
}

.ed-scope fieldset {
    min-inline-size: 0;
    padding: 0;
    border: 0;
    margin: 0;
}

/* Validation. The message says what to do, so it does not need an icon. */
.ed-field--invalid .ed-input,
.ed-field--invalid .ed-select,
.ed-field--invalid .ed-textarea,
.ed-input.is-invalid,
.ed-select.is-invalid,
.ed-scope .form-control.is-invalid,
.ed-scope .form-select.is-invalid {
    border-color: var(--ed-danger);
}

.ed-error {
    font-size: var(--ed-text-caption);
    color: var(--ed-danger);
}

/* --------------------------------------------------------------------------
   ALERT
   Tinted, with a coloured edge on the inline-start so it reads as an aside
   rather than a block of colour.
   -------------------------------------------------------------------------- */
.ed-alert {
    padding: var(--ed-space-3) var(--ed-space-4);
    margin-block-end: var(--ed-space-4);
    font-size: var(--ed-text-subhead);
    line-height: var(--ed-leading-snug);
    color: var(--ed-text);
    background: var(--ed-surface-sunken);
    border: 1px solid var(--ed-separator-soft);
    border-inline-start: 3px solid var(--ed-grey-400);
    border-radius: var(--ed-radius-md);
}

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

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

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

.ed-alert-title {
    display: block;
    margin-block-end: var(--ed-space-1);
    font-weight: var(--ed-weight-semibold);
}

.ed-alert ul {
    margin: 0;
    padding-inline-start: var(--ed-space-5);
    list-style: disc;
}

/* --------------------------------------------------------------------------
   FILTER BAR
   A quiet surface, not a coloured panel. Filters are a tool, not content.
   -------------------------------------------------------------------------- */
.ed-filters {
    padding: var(--ed-space-4) var(--ed-space-5);
    margin-block-end: var(--ed-space-4);
    background: var(--ed-surface);
    border: 1px solid var(--ed-separator-soft);
    border-radius: var(--ed-radius-lg);
}

/* Three shared rows - label, control, help text - so every field lines up on
   the same baselines no matter how tall its control is. Bottom-aligning
   instead (align-items: end) scatters the labels the moment one field is
   taller than its neighbours, which is exactly what a date field is. */
/* Top-aligned, not bottom-aligned. Every field opens with a label of the
   same height, so starting them together lines up the labels and the
   controls beneath them; the fields are then free to differ in height below
   that without disturbing the row. Bottom-aligning instead pushed the short
   fields down and scattered the labels across two baselines. */
.ed-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--ed-space-3);
    align-items: start;
}

/* A filter track is far too narrow for the calendar switcher to sit beside
   its input - together they want ~296px against a ~170px track, so the row
   wrapped and the field grew to double height, dragging every label in the
   row off its baseline. Stacking instead puts the input on the control row
   with every other field and lets the switcher hang below it.

   Scoped to the filter bar on purpose: inside a form the field is wide
   enough for the original side-by-side arrangement, which stays untouched. */
.ed-field--date .dual-calendar-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ed-space-2);
}

/* The shell's `flex: 1 1 8rem` sizes the main axis, which stacking has just
   turned from width into height - left alone it inflates the input to 128px
   tall. Height here should come from the input itself. */
.ed-field--date .dual-calendar-field-shell {
    order: 1;
    flex: 0 0 auto;
}

.ed-field--date .dual-calendar-switcher {
    order: 2;
    align-self: start;
}

/* The buttons carry no label, so they need the label's height added back to
   sit level with the controls rather than riding up against the top of the
   row. */
.ed-filters-actions {
    display: flex;
    align-items: start;
    gap: var(--ed-space-2);
    padding-block-start: calc(
        var(--ed-text-subhead) * var(--ed-leading-body) + var(--ed-space-1)
    );
}

/* --------------------------------------------------------------------------
   PAGINATION
   -------------------------------------------------------------------------- */
.ed-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ed-space-3);
    padding: var(--ed-space-3) var(--ed-space-5);
    border-block-start: 1px solid var(--ed-separator-soft);
}

.ed-pagination-status {
    font-size: var(--ed-text-subhead);
    color: var(--ed-text-tertiary);
    font-variant-numeric: tabular-nums lining-nums;
}

.ed-pagination-actions {
    display: flex;
    gap: var(--ed-space-2);
}

/* --------------------------------------------------------------------------
   TABS
   -------------------------------------------------------------------------- */
.ed-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    margin-block-end: var(--ed-space-5);
    background: var(--ed-fill-subtle);
    border-radius: var(--ed-radius-pill);
    /* A strip with more tabs than the viewport is wide scrolls inside itself
       rather than pushing the page sideways. The BI board's switches carried
       this rule separately when they were their own component. */
    max-inline-size: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.ed-tabs::-webkit-scrollbar {
    display: none;
}

.ed-tab {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--ed-space-4);
    block-size: 30px;
    font-size: var(--ed-text-subhead);
    font-weight: var(--ed-weight-medium);
    white-space: nowrap;
    color: var(--ed-text-secondary);
    text-decoration: none;
    border: 0;
    border-radius: var(--ed-radius-pill);
    background: none;
    cursor: pointer;
}

.ed-tab:hover { color: var(--ed-text); }

.ed-tab.is-active {
    color: var(--ed-text);
    background: var(--ed-surface);
}

/* Panels are closed with the hidden attribute so a closed panel is inert to
   assistive tech and to find-in-page. Restated because a panel that also
   carries a display rule would otherwise win over the attribute. */
[role="tabpanel"][hidden] {
    display: none;
}

/* --------------------------------------------------------------------------
   QUEUE
   A list of work items, each carrying enough context to triage without
   opening it. Cards rather than table rows, because the useful unit here is
   "one request" and its fields do not line up into columns.
   -------------------------------------------------------------------------- */
.ed-queue {
    display: flex;
    flex-direction: column;
    gap: var(--ed-space-3);
}

.ed-queue-item {
    padding: var(--ed-space-4) var(--ed-space-5);
    background: var(--ed-surface);
    border: 1px solid var(--ed-separator-soft);
    border-radius: var(--ed-radius-lg);
}

/* Only an item genuinely waiting on this user is marked. If every card were
   marked, the mark would say nothing. */
.ed-queue-item--action {
    border-inline-start: 3px solid var(--ed-accent);
}

.ed-queue-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ed-space-2) var(--ed-space-3);
    margin-block-end: var(--ed-space-3);
}

.ed-queue-body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ed-space-3);
}

.ed-queue-main {
    flex: 1 1 320px;
    min-inline-size: 0;
}

.ed-queue-title {
    font-size: var(--ed-text-body);
    font-weight: var(--ed-weight-medium);
    line-height: var(--ed-leading-snug);
}

.ed-queue-actions {
    flex: 0 0 auto;
}

/* Inline run of small grey facts, separated by their own spacing rather than
   bullet characters. */
.ed-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ed-space-1) var(--ed-space-4);
    font-size: var(--ed-text-subhead);
    color: var(--ed-text-secondary);
}

.ed-meta strong {
    font-weight: var(--ed-weight-medium);
    color: var(--ed-text);
}

/* Record reference. Always LTR - an id is not prose. */
.ed-ref {
    font-family: var(--ed-font-mono);
    font-size: var(--ed-text-subhead);
    color: var(--ed-text-tertiary);
    direction: ltr;
    unicode-bidi: isolate;
}

.ed-quote {
    margin-block: var(--ed-space-2);
    padding: var(--ed-space-2) var(--ed-space-3);
    font-size: var(--ed-text-subhead);
    line-height: var(--ed-leading-snug);
    color: var(--ed-text-secondary);
    background: var(--ed-surface-sunken);
    border-radius: var(--ed-radius-sm);
}

/* A count riding inside a tab. */
.ed-tab .ed-badge {
    margin-inline-start: var(--ed-space-2);
}

/* --------------------------------------------------------------------------
   STEPPER
   A multi-step authorisation route. The rail is drawn by each item rather
   than by a container pseudo-element, so a step can be added or removed
   without the line breaking, and the last step simply omits its own segment.
   -------------------------------------------------------------------------- */
.ed-stepper {
    display: flex;
    flex-direction: column;
}

.ed-step {
    position: relative;
    display: flex;
    gap: var(--ed-space-4);
    padding-block-end: var(--ed-space-5);
}

.ed-step:last-child {
    padding-block-end: 0;
}

/* The connecting rail. */
.ed-step:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-block: 26px 0;
    inset-inline-start: 12px;
    inline-size: 2px;
    background: var(--ed-separator);
}

.ed-step--done:not(:last-child)::before {
    background: var(--ed-success);
}

.ed-step-node {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    inline-size: 26px;
    block-size: 26px;
    font-size: var(--ed-text-caption);
    font-weight: var(--ed-weight-semibold);
    border-radius: var(--ed-radius-pill);
    background: var(--ed-surface);
    border: 2px solid var(--ed-separator);
    color: var(--ed-text-tertiary);
}

.ed-step--done .ed-step-node {
    background: var(--ed-success);
    border-color: var(--ed-success);
    color: var(--ed-grey-0);
}

.ed-step--current .ed-step-node {
    border-color: var(--ed-accent);
    color: var(--ed-accent);
}

.ed-step--rejected .ed-step-node {
    background: var(--ed-danger);
    border-color: var(--ed-danger);
    color: var(--ed-grey-0);
}

.ed-step-body {
    flex: 1 1 auto;
    min-inline-size: 0;
    padding-block-start: 2px;
}

.ed-step-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ed-space-2) var(--ed-space-3);
    margin-block-end: var(--ed-space-1);
}

.ed-step-title {
    font-size: var(--ed-text-body);
    font-weight: var(--ed-weight-medium);
    line-height: var(--ed-leading-snug);
}

/* An upcoming step is context, not news: it recedes. */
.ed-step--upcoming .ed-step-title,
.ed-step--blocked .ed-step-title {
    color: var(--ed-text-tertiary);
    font-weight: var(--ed-weight-regular);
}

/* A decision comment, quoted from the approver. */
.ed-step-comment {
    margin-block-start: var(--ed-space-2);
    padding: var(--ed-space-2) var(--ed-space-3);
    font-size: var(--ed-text-subhead);
    line-height: var(--ed-leading-snug);
    color: var(--ed-text-secondary);
    background: var(--ed-surface-sunken);
    border-radius: var(--ed-radius-sm);
}

.ed-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ed-space-2);
    margin-block-start: var(--ed-space-2);
}

.ed-pill {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--ed-space-3);
    block-size: 24px;
    font-size: var(--ed-text-caption);
    color: var(--ed-text-secondary);
    background: var(--ed-fill-subtle);
    border-radius: var(--ed-radius-pill);
}

/* --------------------------------------------------------------------------
   EMPTY STATE, icon
   -------------------------------------------------------------------------- */
.ed-empty-icon {
    inline-size: 40px;
    block-size: 40px;
    color: var(--ed-grey-400);
}

/* An empty state standing in for one region of a page, rather than for the
   whole page. It carries less air so the sections below it stay in view. */
.ed-empty--inset {
    padding-block: var(--ed-space-10);
    gap: var(--ed-space-3);
}

/* In a two-up layout `space-between` throws the note the full width of the
   column, far enough from its heading to read as an unrelated label. Paired
   sections stack it under the title instead. */
@media (min-width: 900px) {
    .ed-cols .ed-section-head {
        display: block;
    }

    .ed-cols .ed-section-head .ed-section-note {
        display: block;
        margin-block-start: var(--ed-space-1);
    }
}

@media (max-width: 599px) {
    .ed-page-header {
        align-items: flex-start;
        padding-block-end: var(--ed-space-6);
    }

    .ed-row {
        padding-inline: var(--ed-space-4);
    }

    .ed-dl-row,
    .ed-table th,
    .ed-table td {
        padding-inline: var(--ed-space-4);
    }
}

/* --------------------------------------------------------------------------
   HORIZONTAL SCROLL CONTAINERS
   Two wide form grids that cannot be reflowed into cards: a sales plan line
   formset and the production shutdown table. Below the desktop breakpoint they
   scroll inside themselves rather than pushing the page sideways.
   Absorbed from espandar-mobile-hotfix.css when that sheet was retired.
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .sales-formset-wrap,
    .ms-production-table-wrap {
        display: block;
        inline-size: 100%;
        max-inline-size: 100%;
        min-inline-size: 0;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }
}

/* --------------------------------------------------------------------------
   PERSONAL KPI SCORECARD
   The Account page reports one person's own recorded work. Colour is spent
   only where a number carries a judgement, so the default tone stays neutral
   and a page of healthy figures reads as calm rather than green.
   -------------------------------------------------------------------------- */

/* ---- Period switch ---- */
.ed-segmented {
    display: inline-flex;
    padding: 2px;
    background: var(--ed-fill-subtle);
    border-radius: var(--ed-radius-pill);
}

.ed-segmented-item {
    padding: var(--ed-space-1) var(--ed-space-4);
    font-size: var(--ed-text-subhead);
    color: var(--ed-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--ed-radius-pill);
    transition: background-color var(--ed-duration) var(--ed-ease),
                color var(--ed-duration) var(--ed-ease);
}

.ed-segmented-item:hover {
    color: var(--ed-text);
}

.ed-segmented-item.is-active {
    color: var(--ed-text);
    background: var(--ed-surface);
    box-shadow: var(--ed-shadow-raised);
}

.ed-segmented-item:focus-visible {
    outline: 2px solid var(--ed-accent);
    outline-offset: 1px;
}

/* ---- Tone on a figure ---- */
.ed-stat-value--good { color: var(--ed-success); }
.ed-stat-value--warn { color: var(--ed-warning); }
.ed-stat-value--bad  { color: var(--ed-danger); }

.ed-meter-fill--good { background: var(--ed-success); }
.ed-meter-fill--bad  { background: var(--ed-danger); }

/* ---- KPI as a row ---- */
/* The term column carries a second line of explanation, so the row aligns to
   its top rather than centring against a two-line label. */
.ed-dl-row--kpi {
    align-items: start;
}

.ed-kpi-hint {
    display: block;
    margin-block-start: 2px;
    font-size: var(--ed-text-caption);
    line-height: var(--ed-leading-snug);
    color: var(--ed-text-tertiary);
}

.ed-kpi-figure {
    display: flex;
    align-items: baseline;
    gap: 3px;
    justify-content: flex-end;
    font-size: var(--ed-text-title);
    font-weight: var(--ed-weight-semibold);
    line-height: 1.15;
    letter-spacing: var(--ed-tracking-title);
    font-variant-numeric: tabular-nums;
}

/* A rate reads faster as a bar than as digits. Width is fixed so several
   stacked meters share a baseline to compare against. */
.ed-kpi-meter {
    display: block;
    inline-size: 120px;
    margin-block-start: var(--ed-space-2);
    margin-inline-start: auto;
}