/* ============================================================================
   drop_console — shell.css
   The frame: top bar, left nav, page, page header, column layouts, save bar.

   Requires tokens.css to have loaded first (every value here is a var(--dc-*)).
   Class prefix `dc-`. No Shopify CSS and no `Polaris-` class name ships here —
   the geometry below was MEASURED off the admin and is re-authored.

   BREAKPOINTS, all four, and the `em` forms are deliberate — a px media query
   ignores the user's own font-size preference and the admin uses em:
     30.625em =  490px   card radius / page gutters flip
     47.9975em / 48em = 768px   the big one: nav becomes permanent, type steps up
     65em     = 1040px   the page-header long-title reflow
     90em     = 1440px   widest step (declared, no rule of ours needs it yet)
   ========================================================================== */

/* ---------------------------------------------------------------------------
   FRAME — the three-part grid. Top bar spans, nav is a column, page scrolls.
   ------------------------------------------------------------------------- */
.dc-frame {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--dc-bg);
}

.dc-frame__body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.dc-frame__main {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---------------------------------------------------------------------------
   TOP BAR — 56px, #1A1A1A, shadow-100.
   ⚠️ The grid is `minmax(15rem,1fr) minmax(auto,30rem) 1fr` with a 24px gap and
   it only exists at >= 768px. Below that it is a flex row, because the middle
   column (search) would otherwise be forced to 480px on a 390px screen.
   ------------------------------------------------------------------------- */
.dc-topbar {
  position: relative;
  z-index: var(--dc-z-index-11);
  display: flex;
  align-items: center;
  height: var(--dc-shell-top-bar-height);   /* 56px */
  gap: var(--dc-space-100);                 /* 4px */
  padding: 0 var(--dc-space-300);
  background-color: var(--dc-bg-inverse);   /* #1A1A1A */
  box-shadow: var(--dc-shadow-100);
  color: var(--dc-text-inverse);
}

@media (min-width: 48em) {
  .dc-topbar {
    display: grid;
    grid-template-columns: minmax(15rem, 1fr) minmax(auto, 30rem) 1fr;
    gap: var(--dc-space-600);               /* 24px */
    padding: 0;
  }
}

.dc-topbar__logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--dc-space-200);
  height: 100%;
  min-width: 0;
  padding: 0 var(--dc-space-200) 0 var(--dc-space-400);
  color: var(--dc-text-inverse);
  font-size: var(--dc-font-size-325);
  font-weight: var(--dc-font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}

@media (min-width: 48em) {
  .dc-topbar__logo {
    flex: 0 0 var(--dc-shell-layout-width-nav-base);
    padding-left: calc(var(--dc-space-400) + env(safe-area-inset-left));
  }
}

/* ⚠️ THE WORDMARK HAS TO GO BELOW 768px. The mobile top bar is a flex row and
   the logo is `white-space: nowrap`, so it refuses to shrink while the search
   field takes `flex: 1 1 auto` — at 390px "Drop Console" ran straight through
   the search input, overlapping it by ~10px. Measured on the first render of
   _preview.html. The 24px mark stays (it is the only thing identifying the app
   in a phone screenshot); only the text label is dropped, which is what the real
   admin does too. */
@media (max-width: 47.9975em) {
  .dc-topbar__logo { padding: 0 var(--dc-space-200) 0 var(--dc-space-300); }
  .dc-topbar__logo > span:not(.dc-topbar__mark) { display: none; }
  .dc-topbar__actions { padding-right: var(--dc-space-300); }
}

.dc-topbar__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--dc-width-600);
  height: var(--dc-height-600);
  border-radius: var(--dc-border-radius-150);
  background: var(--dc-bg-fill-emphasis);
  color: var(--dc-text-emphasis-on-bg-fill);
  font-size: var(--dc-font-size-300);
  font-weight: var(--dc-font-weight-bold);
}

.dc-topbar__search {
  flex: 1 1 auto;
  min-width: 0;
}

.dc-topbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--dc-space-200);
  min-width: 0;
  padding-right: var(--dc-space-400);
}

/* ---- the top-bar search field. Its own component: the border is 0.66px, which
   is NOT a rounding artefact — Polaris ships `--p-border-width-0165` at
   0.04125rem precisely so the hairline does not thicken on a 2x display. ---- */
.dc-searchfield {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  width: 100%;
  border: var(--dc-border-width-025) solid transparent;
}

.dc-searchfield__input {
  z-index: 2;
  width: 100%;
  height: 2rem;                                  /* 32px */
  padding: 0 calc(1.125rem + var(--dc-space-300)); /* clears the 18px icon */
  border: var(--dc-border-width-0165) solid var(--dc-border-inverse); /* 0.66px #616161 */
  border-radius: var(--dc-border-radius-200);
  background-color: transparent;
  outline: none;
  font-family: var(--dc-font-family-sans);
  font-size: var(--dc-font-size-325);
  font-weight: var(--dc-font-weight-regular);
  line-height: var(--dc-font-line-height-500);
  color: var(--dc-text-inverse-secondary);
  transition: fill var(--dc-motion-duration-200) var(--dc-motion-ease),
              color var(--dc-motion-duration-200) var(--dc-motion-ease);
}

.dc-searchfield__input::placeholder { color: var(--dc-text-inverse-secondary); }
.dc-searchfield__input:hover { border-color: var(--dc-border-inverse-hover); }

.dc-searchfield__input:focus {
  color: var(--dc-text-inverse);
  box-shadow: inset 0 0 0 var(--dc-border-width-025) var(--dc-border-inverse-active);
}

.dc-searchfield__input:focus::placeholder { color: var(--dc-text-inverse-secondary); }

.dc-searchfield__input:focus-visible {
  outline: var(--dc-border-width-050) solid var(--dc-border-focus);
  outline-offset: var(--dc-space-050);
}

.dc-searchfield__icon {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: var(--dc-space-200);       /* 8px */
  display: flex;
  width: 1.125rem;                 /* 18px — NOT the 20px icon size */
  height: 1.125rem;
  pointer-events: none;
  transform: translateY(-50%);
  color: var(--dc-icon-secondary);
}

.dc-searchfield__input:focus ~ .dc-searchfield__icon { color: var(--dc-icon-inverse); }

/* ---------------------------------------------------------------------------
   LEFT NAV — 240px, #EBEBEB. Item 28px tall at >= 768px, 40px below it (a touch
   target). The item lives inside a wrapper padded 0 12px so the 8px-radius hover
   pill floats clear of the nav edge; the item itself is padded 0 4px 0 8px.
   ------------------------------------------------------------------------- */
.dc-nav {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  width: var(--dc-shell-navigation-width);       /* 240px */
  min-width: var(--dc-shell-layout-width-nav-base);
  max-width: 22.5rem;
  background-color: var(--dc-nav-bg);            /* #EBEBEB */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 48em) {
  .dc-nav {
    max-width: calc(var(--dc-shell-layout-width-nav-base) + env(safe-area-inset-left));
    padding-top: var(--dc-space-400);            /* 16px scroll padding */
  }
}

/* Below 768px the nav is off-canvas — the admin's mobile behaviour. */
@media (max-width: 47.9975em) {
  .dc-nav { display: none; }
  .dc-nav--open { display: flex; position: fixed; inset: var(--dc-shell-top-bar-height) auto 0 0; z-index: var(--dc-z-index-10); }
}

.dc-nav__section {
  margin: 0;
  padding: 0 0 var(--dc-space-400);
  list-style: none;
}

.dc-nav__section + .dc-nav__section {
  border-top: var(--dc-border-width-025) solid var(--dc-border-secondary);
  padding-top: var(--dc-space-200);
}

.dc-nav__section-title {
  margin: 0;
  padding: var(--dc-space-200) var(--dc-space-400) var(--dc-space-100);
  font-size: var(--dc-font-size-300);
  font-weight: var(--dc-font-weight-medium);
  line-height: var(--dc-font-line-height-400);
  color: var(--dc-text-secondary);
}

.dc-nav__item-wrapper {
  padding: 0 var(--dc-space-300);     /* 12px each side */
}

.dc-nav__item {
  display: flex;
  align-items: center;
  gap: var(--dc-space-200);
  width: 100%;
  min-height: 2.5rem;                 /* 40px below 768px */
  padding: 0 var(--dc-space-100) 0 var(--dc-space-200);   /* 0 4px 0 8px */
  border: none;
  border-radius: var(--dc-border-radius-200);             /* 8px */
  background: none;
  color: var(--dc-text);
  font-family: inherit;
  font-size: var(--dc-font-size-325);
  font-weight: var(--dc-font-weight-medium);
  line-height: var(--dc-font-line-height-500);
  letter-spacing: -0.005rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

@media (min-width: 48em) {
  .dc-nav__item { min-height: 1.75rem; }                 /* 28px */
}

.dc-nav__item:hover { background-color: var(--dc-nav-bg-surface-hover); }   /* #F1F1F1 */
.dc-nav__item:active { background-color: var(--dc-nav-bg-surface-active); } /* #FAFAFA */

.dc-nav__item:focus-visible {
  outline: var(--dc-border-width-050) solid var(--dc-border-focus);
  outline-offset: 0;
}

.dc-nav__item--selected,
.dc-nav__item--selected:hover {
  background-color: var(--dc-nav-bg-surface-selected);   /* #FAFAFA */
  color: var(--dc-text);
  font-weight: var(--dc-font-weight-semibold);
}

.dc-nav__item-icon {
  display: flex;
  flex: 0 0 auto;
  width: var(--dc-icon-size);        /* 20px */
  height: var(--dc-icon-size);
  color: var(--dc-icon);
}

.dc-nav__item--selected .dc-nav__item-icon { color: var(--dc-icon-brand); }

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

.dc-nav__item-trailing {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding-right: var(--dc-space-100);
}

/* ---------------------------------------------------------------------------
   PAGE — max 998px (662 main + 320 sidebar + 16 gutter). Side padding is 0
   below 490px (the card goes edge to edge) and 24px above it.
   ------------------------------------------------------------------------- */
.dc-page {
  width: 100%;
  max-width: var(--dc-shell-page-max-width);       /* 998px */
  margin: 0 auto;
  padding: var(--dc-space-400) 0;
}

@media (min-width: 30.625em) {
  .dc-page { padding: var(--dc-space-400) var(--dc-space-600); }   /* 0 24px */
}

.dc-page--full-width { max-width: none; }

/* ---- PAGE HEADER ----
   Row 1 is `min-height: 28px` and `space-between` so a header with no actions
   still reserves the height of one and nothing jumps when actions appear.
   ⚠️ The 16px inline padding below 490px is a CHOSEN value, not a measured one
   (Polaris' Page really is `padding: 0` there, and its Header gets a gutter from
   a React-injected Box prop we cannot read). Without it the drop title and its
   badges sit flush against x=0 on a phone while every card is correctly edge to
   edge — measured on the first render of _preview.html. Cards keep the full-bleed
   look; only the header text is inset. */
.dc-page-header {
  padding-bottom: var(--dc-space-400);
}

@media (max-width: 30.6225em) {
  .dc-page-header { padding-inline: var(--dc-space-400); }
}

.dc-page-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 1.75rem;              /* 28px */
  gap: var(--dc-space-200);
}

.dc-page-header__title-wrapper { min-width: 0; }

.dc-page-header__title {
  margin: 0;
  font-size: var(--dc-font-size-500);                       /* 20px */
  line-height: var(--dc-font-line-height-600);              /* 24px */
  font-weight: var(--dc-font-weight-semibold);              /* 650 */
  letter-spacing: var(--dc-font-letter-spacing-dense);      /* -0.2px */
  color: var(--dc-text);
}

.dc-page-header__subtitle {
  margin: var(--dc-space-100) 0 0;
  font-size: var(--dc-font-size-300);                       /* 12px */
  line-height: var(--dc-font-line-height-400);              /* 16px */
  font-weight: var(--dc-font-weight-regular);
  color: var(--dc-text-secondary);                          /* #616161 */
}

.dc-page-header__title-row {
  display: flex;
  align-items: center;
  gap: var(--dc-space-200);
  flex-wrap: wrap;
  min-width: 0;
}

.dc-page-header__breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--dc-space-100);
  margin-bottom: var(--dc-space-100);
}

/* ⚠️ `flex: 1 1 auto` + `align-self: flex-start` is what keeps a two-line title
   from dragging the action group down to its vertical centre. `nowrap` keeps
   "Run stage now" from wrapping mid-label at 1041px. */
.dc-page-header__actions {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  align-self: flex-start;
  justify-content: flex-end;
  gap: var(--dc-space-200);
  margin-left: var(--dc-space-400);      /* 16px */
  white-space: nowrap;
}

.dc-page-header__primary-action { margin-left: 0; }

@media (min-width: 48em) {
  .dc-page-header__primary-action { margin-left: var(--dc-space-200); }   /* 8px */
}

/* ⚠️ THE LONG-TITLE REFLOW. Below 1040px a header with a long title stops being
   one row: breadcrumbs and actions share the top line and the title drops to
   its own full-width row underneath. Without this the title truncates to about
   four words on a 1024px laptop, and a drop name is the one string a user is
   scanning for. Add `dc-page-header--long-title` when the title is long. */
@media (max-width: 64.9975em) {
  .dc-page-header--long-title .dc-page-header__row {
    display: grid;
    grid-template-areas:
      'breadcrumbs actions'
      'title       title';
    grid-template-columns: 1fr auto;
    gap: var(--dc-space-200) var(--dc-space-400);   /* 8px 16px */
    align-items: start;
  }
  .dc-page-header--long-title .dc-page-header__breadcrumbs { grid-area: breadcrumbs; margin-bottom: 0; }
  .dc-page-header--long-title .dc-page-header__title-wrapper { grid-area: title; }
  .dc-page-header--long-title .dc-page-header__actions { grid-area: actions; margin-left: 0; }
}

/* ---------------------------------------------------------------------------
   LAYOUT — one and two column. main 2 2 30rem / min-width 51%, sidebar 1 1 15rem.
   ⚠️ `min-width: 51%` is the trick that makes the main column win the wrap race:
   at 51% the sidebar can never fit beside it once the row is narrow, so the two
   columns stack cleanly instead of squeezing to an unreadable 200px each.
   ------------------------------------------------------------------------- */
.dc-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-top: calc(var(--dc-shell-layout-width-inner-spacing-base) * -1);
  margin-left: calc(var(--dc-shell-layout-width-inner-spacing-base) * -1);
}

.dc-layout__section,
.dc-layout__section--secondary {
  margin-top: var(--dc-shell-layout-width-inner-spacing-base);   /* 16px */
  margin-left: var(--dc-shell-layout-width-inner-spacing-base);
  max-width: calc(100% - var(--dc-shell-layout-width-inner-spacing-base));
  min-width: 0;
}

.dc-layout__section {
  flex: 2 2 var(--dc-shell-layout-width-primary-min);   /* 2 2 30rem */
  min-width: 51%;
}

.dc-layout__section--secondary {
  flex: 1 1 var(--dc-shell-layout-width-secondary-min); /* 1 1 15rem */
  max-width: var(--dc-shell-layout-width-secondary-max);
}

.dc-layout__section--one-half  { flex: 1 1 var(--dc-shell-layout-width-one-half-width-base); min-width: 0; }
.dc-layout__section--one-third { flex: 1 1 var(--dc-shell-layout-width-one-third-width-base); min-width: 0; }
.dc-layout__section--full      { flex: 1 1 100%; min-width: 0; }

/* Stack helpers — the app has a lot of vertical rhythm and no utility framework. */
.dc-stack        { display: flex; flex-direction: column; gap: var(--dc-space-400); }
.dc-stack--tight { gap: var(--dc-space-200); }
.dc-stack--loose { gap: var(--dc-space-600); }
.dc-inline       { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dc-space-200); }
.dc-inline--tight{ gap: var(--dc-space-100); }
.dc-inline--between { justify-content: space-between; }
.dc-inline--end  { justify-content: flex-end; }

/* ---------------------------------------------------------------------------
   CONTEXTUAL SAVE BAR — 56px, #1A1A1A, contents capped at 998px and centred.
   ⚠️ It REMAPS `--dc-bg-surface` and `--dc-text` on itself, so a `.dc-btn`
   dropped inside it inverts without a modifier class. That is the whole point:
   the save bar is the one dark surface in the app and every control inside it
   would otherwise have to carry a `--inverse` variant.
   ⚠️ Its shadow is NOT shadow-100 (the top bar's) — it is a deeper
   `0 0.125rem 0.25rem rgba(0,0,0,0.15)`, because the bar overlaps content that
   is still scrolling beneath it.
   ------------------------------------------------------------------------- */
.dc-savebar {
  position: sticky;
  top: 0;
  z-index: var(--dc-z-index-12);
  height: var(--dc-shell-top-bar-height);   /* 56px */
  background-color: var(--dc-bg-inverse);   /* #1A1A1A */
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);

  /* local remap — children invert with no extra classes */
  --dc-bg-surface: var(--dc-bg-surface-inverse);
  --dc-bg-fill: var(--dc-bg-fill-inverse);
  --dc-bg-fill-hover: var(--dc-bg-fill-inverse-hover);
  --dc-bg-fill-active: var(--dc-bg-fill-inverse-active);
  --dc-text: var(--dc-text-inverse);
  --dc-text-secondary: var(--dc-text-inverse-secondary);
  --dc-icon: var(--dc-icon-inverse);
  --dc-border: var(--dc-border-inverse);
  color: var(--dc-text-inverse);
}

.dc-savebar__contents {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dc-space-400);
  height: 100%;
  max-width: var(--dc-shell-page-max-width);   /* 998px */
  margin: 0 auto;
  padding: 0 var(--dc-space-400);
}

.dc-savebar__message {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--dc-font-size-325);
  font-weight: var(--dc-font-weight-medium);
  color: var(--dc-text-inverse);
}

.dc-savebar__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--dc-space-200);
}

/* ⚠️⚠️ THE REMAP BITES BACK — READ BEFORE EDITING EITHER OF THESE TWO RULES.
   The block above rebinds `--dc-bg-surface` to the INVERSE surface (#303030) for
   everything inside the bar. So `background: var(--dc-bg-surface)` on the primary
   button — the obvious way to make it white — resolves to #303030, and pairing it
   with `color: var(--dc-bg-inverse)` (#1A1A1A) produced a #303030 pill carrying
   #1A1A1A text on a #1A1A1A bar: the Save button was there, clickable, and its
   label was invisible. That is exactly what the first render of _preview.html
   showed at both 1440 and 390.
   The fix is to drive the button's OWN `--dc-btn-*` variables (so hover, active
   and focus keep working) using tokens this bar does NOT remap:
   `--dc-text-brand-on-bg-fill` is #FFFFFF, `--dc-bg-inverse` is #1A1A1A, and
   `--dc-bg-surface-hover` is #F7F7F7. Do not reach for `--dc-bg-surface` or
   `--dc-text` in here. */
.dc-savebar .dc-btn--primary {
  --dc-btn-bg: var(--dc-text-brand-on-bg-fill);   /* #FFFFFF — not remapped */
  --dc-btn-bg-hover: var(--dc-bg-surface-hover);  /* #F7F7F7 — not remapped */
  --dc-btn-bg-active: var(--dc-bg-surface-active);
  --dc-btn-color: var(--dc-bg-inverse);           /* #1A1A1A — not remapped */
  --dc-btn-color-hover: var(--dc-bg-inverse);
  --dc-btn-color-active: var(--dc-bg-inverse);
  --dc-btn-shadow: var(--dc-shadow-button);
  --dc-btn-shadow-hover: var(--dc-shadow-button-hover);
  --dc-btn-shadow-active: var(--dc-shadow-button-inset);
}

/* A secondary button on the dark bar: Polaris' light bevel is invisible there,
   so an inset outline carries the affordance instead. */
.dc-savebar .dc-btn--secondary {
  --dc-btn-bg: transparent;
  --dc-btn-bg-hover: var(--dc-bg-fill-inverse-hover);
  --dc-btn-bg-active: var(--dc-bg-fill-inverse-active);
  --dc-btn-color: var(--dc-text-inverse);
  --dc-btn-color-hover: var(--dc-text-inverse);
  --dc-btn-shadow: 0 0 0 var(--dc-border-width-025) var(--dc-border-inverse) inset;
  --dc-btn-shadow-hover: 0 0 0 var(--dc-border-width-025) var(--dc-border-inverse-hover) inset;
  --dc-btn-shadow-active: var(--dc-btn-shadow-hover);
}

/* ---------------------------------------------------------------------------
   DIVIDERS + a scroll container, because both recur in every screen.
   ------------------------------------------------------------------------- */
.dc-divider { height: var(--dc-border-width-025); background: var(--dc-border); border: 0; margin: 0; }
.dc-divider--strong { background: var(--dc-border-tertiary); }

.dc-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── the clock chip ───────────────────────────────────────────────────────────
   Chris, 2026-09-15: "show the 'time now' in the timezone selected. Because that
   gets confusing during the time changes." It lives in the top bar so it is on every
   screen by construction, and in the contextual save bar too — that bar REPLACES the
   top bar on the stage editor, which is the one screen where times are actually typed.

   ⚠️ It needs its own rule because nothing else reads on the inverse bar: `dc-badge`
   is dark-on-dark there and `dc-btn--tertiary` paints #303030 text on #1A1A1A. */
.dc-topbar__clock,
.dc-savebar__clock {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-150);                        /* 6px */
  height: var(--dc-height-700);                    /* 28px */
  padding: 0 var(--dc-space-250, 10px) 0 var(--dc-space-200);
  border-radius: var(--dc-border-radius-200);      /* 8px */
  background: rgba(255, 255, 255, 0.10);
  white-space: nowrap;
}

.dc-topbar__clock-time,
.dc-savebar__clock-time {
  font-size: var(--dc-font-size-325);              /* 12px */
  font-weight: var(--dc-font-weight-semibold);     /* 650 */
  /* Tabular figures, or the seconds digit changes width every tick and the whole chip
     shivers once a second. It is a clock — it is ALWAYS ticking. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  color: var(--dc-text-brand-on-bg-fill);
}

.dc-topbar__clock-zone,
.dc-savebar__clock-zone {
  font-size: var(--dc-font-size-325);
  font-weight: var(--dc-font-weight-medium);       /* 550 */
  color: var(--dc-text-disabled, #B5B5B5);
}

.dc-topbar__clock .dc-icon,
.dc-savebar__clock .dc-icon {
  width: 16px;
  height: 16px;
  color: var(--dc-text-disabled, #B5B5B5);
}

/* The frame draws the wordmark chip white-on-dark, not blue. */
.dc-topbar__mark {
  background: var(--dc-bg-surface);
  color: var(--dc-bg-inverse);
}