/* ============================================================================
   drop_console — components.css
   Every control the nine screens need, at the admin's real geometry.

   Requires tokens.css, then shell.css. Class prefix `dc-`.
   No Shopify CSS ships here; the numbers were measured and re-authored.

   READ THIS FIRST — the two tricks that decide whether this reads as a real
   admin or as a bootstrap page:
     1. THE CARD BEVEL. A card is `shadow-100` (a 1px drop, almost nothing) PLUS
        a `::before` overlay carrying `shadow-bevel-100` at
        `mix-blend-mode: luminosity`. The bevel is four 1px inset shadows — dark
        on three sides, light on top — and the luminosity blend is what stops it
        tinting the card. Skip it and every card looks flat and printed-on.
     2. THE BUTTON BEVELS. A primary button is not a flat fill: it is `#303030`,
        plus a top-to-bottom white gradient at 15% over the bottom 36%, plus a
        3-layer INSET shadow. Its :active state swaps that for a single
        `0 3px 0 0 #000 inset` so the button visibly presses in.
   Both are cheap and both are the difference.
   ========================================================================== */

/* ============================================================================
   ICON — 20x20, always. Polaris ships exactly one icon size and one viewBox
   (`0 0 20 20`), and `fill: currentColor` is how an icon inherits its button's
   or badge's tone rather than needing a colour prop.
   ========================================================================== */
.dc-icon {
  display: block;
  flex: 0 0 auto;
  width: var(--dc-icon-size);        /* 20px */
  height: var(--dc-icon-size);
  color: var(--dc-icon);
}

.dc-icon svg { display: block; width: 100%; height: 100%; fill: currentColor; }

.dc-icon--subdued  { color: var(--dc-icon-secondary); }
.dc-icon--emphasis { color: var(--dc-icon-emphasis); }
.dc-icon--success  { color: var(--dc-icon-success); }
.dc-icon--warning  { color: var(--dc-icon-warning); }
.dc-icon--critical { color: var(--dc-icon-critical); }
.dc-icon--inverse  { color: var(--dc-icon-inverse); }

/* ============================================================================
   CARD — #FFFFFF, 16px padding, 12px radius, shadow-100 + the bevel overlay.
   Radius drops to 0 below 490px so a card can run edge to edge on a phone.
   ========================================================================== */
.dc-card {
  position: relative;
  background-color: var(--dc-bg-surface);        /* #FFFFFF */
  padding: var(--dc-space-400);                  /* 16px */
  border-radius: 0;
  box-shadow: var(--dc-shadow-100);
}

@media (min-width: 30.625em) {
  .dc-card { border-radius: var(--dc-border-radius-300); }   /* 12px */
}

/* ⚠️ THE BEVEL. Do not remove. `pointer-events: none` so it never eats a click,
   and it inherits the card's own radius so the corners stay clean. */
.dc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: var(--dc-shadow-bevel-100);
  mix-blend-mode: luminosity;
}

.dc-card > * { position: relative; z-index: 1; }

.dc-card--flush   { padding: 0; }
.dc-card--subdued { background-color: var(--dc-bg-surface-secondary); }

.dc-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dc-space-200);
  margin-bottom: var(--dc-space-400);       /* space-card-gap */
}

.dc-card__title {
  margin: 0;
  font-size: var(--dc-font-size-325);
  line-height: var(--dc-font-line-height-500);
  font-weight: var(--dc-font-weight-semibold);
  color: var(--dc-text);
}

/* A section inside a flush card, divided by the card's own hairline. */
.dc-card__section { padding: var(--dc-space-400); }
.dc-card__section + .dc-card__section { border-top: var(--dc-border-width-025) solid var(--dc-border); }

/* ============================================================================
   BUTTON — `all: unset` then rebuilt. gap 2px, radius 8px.
   SIZES (min-height below 768px / at and above it):
     micro        4px  8px   28 / 24
     slim medium  6px 12px   32 / 28
     large        6px 12px   36 / 32
   The mobile sizes are bigger ON PURPOSE — a 24px tap target fails on a phone.
   ========================================================================== */
.dc-btn {
  all: unset;
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dc-space-050);                     /* 2px */
  padding: var(--dc-btn-pad-block) var(--dc-btn-pad-inline);
  border: none;
  border-radius: var(--dc-border-radius-200);   /* 8px */
  background: var(--dc-btn-bg);
  box-shadow: var(--dc-btn-shadow);
  color: var(--dc-btn-color);
  font-family: var(--dc-font-family-sans);
  font-size: var(--dc-font-size-300);           /* 12px */
  font-weight: var(--dc-font-weight-medium);    /* 550 */
  line-height: var(--dc-font-line-height-400);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;

  /* defaults — every variant below only overrides what it changes */
  --dc-btn-pad-block: var(--dc-space-150);
  --dc-btn-pad-inline: var(--dc-space-300);
  --dc-btn-bg: transparent;
  --dc-btn-bg-hover: var(--dc-btn-bg);
  --dc-btn-bg-active: var(--dc-btn-bg);
  --dc-btn-bg-disabled: var(--dc-bg-fill-disabled);
  --dc-btn-color: inherit;
  --dc-btn-color-hover: var(--dc-btn-color);
  --dc-btn-color-active: var(--dc-btn-color);
  --dc-btn-color-disabled: var(--dc-text-disabled);
  --dc-btn-shadow: none;
  --dc-btn-shadow-hover: var(--dc-btn-shadow);
  --dc-btn-shadow-active: var(--dc-btn-shadow);
}

.dc-btn:hover  { background: var(--dc-btn-bg-hover);  color: var(--dc-btn-color-hover);  box-shadow: var(--dc-btn-shadow-hover); }
.dc-btn:active { background: var(--dc-btn-bg-active); color: var(--dc-btn-color-active); box-shadow: var(--dc-btn-shadow-active); }

/* ⚠️ The 1px nudge on :active is on the CONTENTS, not the button — moving the
   button itself would move its shadow and break the pressed-in illusion. */
.dc-btn:active > * { transform: translate3d(0, 0.0625rem, 0); }
.dc-btn--tertiary:active > *, .dc-btn--plain:active > * { transform: none; }

.dc-btn:focus-visible {
  background: var(--dc-btn-bg-hover);
  color: var(--dc-btn-color-hover);
  outline: var(--dc-border-width-050) solid var(--dc-border-focus);   /* 2px #005BD3 */
  outline-offset: var(--dc-space-025);                                /* 1px */
}

.dc-btn:disabled,
.dc-btn[disabled],
.dc-btn--disabled {
  background: var(--dc-btn-bg-disabled);       /* rgba(0,0,0,0.05) */
  color: var(--dc-btn-color-disabled);         /* #B5B5B5 */
  box-shadow: none;
  pointer-events: none;
  user-select: none;
}

.dc-btn:disabled .dc-icon,
.dc-btn--disabled .dc-icon { color: var(--dc-icon-disabled); }

/* ---- sizes ---- */
.dc-btn--micro { --dc-btn-pad-block: var(--dc-space-100); --dc-btn-pad-inline: var(--dc-space-200); min-height: var(--dc-height-700); min-width: var(--dc-width-700); }
.dc-btn,
.dc-btn--slim,
.dc-btn--medium { min-height: var(--dc-height-800); min-width: var(--dc-width-800); }
.dc-btn--large { font-size: var(--dc-font-size-325); min-height: var(--dc-height-900); min-width: var(--dc-width-900); }

@media (min-width: 48em) {
  .dc-btn--micro { min-height: var(--dc-height-600); min-width: var(--dc-width-600); }   /* 24px */
  .dc-btn,
  .dc-btn--slim,
  .dc-btn--medium { min-height: var(--dc-height-700); min-width: var(--dc-width-700); }  /* 28px */
  .dc-btn--large { min-height: var(--dc-height-800); min-width: var(--dc-width-800); }   /* 32px */
}

.dc-btn--full-width { width: 100%; }
.dc-btn--icon-only  { --dc-btn-pad-inline: var(--dc-btn-pad-block); }

/* ---- PRIMARY — fill + gradient + the 3-layer inset bevel ---- */
.dc-btn--primary {
  --dc-btn-bg: var(--dc-button-gradient-bg-fill), var(--dc-bg-fill-brand);
  --dc-btn-bg-hover: var(--dc-button-gradient-bg-fill), var(--dc-bg-fill-brand-hover);
  --dc-btn-bg-active: var(--dc-button-gradient-bg-fill), var(--dc-bg-fill-brand-active);
  --dc-btn-bg-disabled: var(--dc-bg-fill-brand-disabled);
  --dc-btn-color: var(--dc-text-brand-on-bg-fill);
  --dc-btn-color-disabled: var(--dc-text-brand-on-bg-fill-disabled);
  --dc-btn-shadow: var(--dc-shadow-button-primary);
  --dc-btn-shadow-hover: var(--dc-shadow-button-primary-hover);
  --dc-btn-shadow-active: var(--dc-shadow-button-primary-inset);
}

.dc-btn--primary .dc-icon { color: var(--dc-text-brand-on-bg-fill); }

.dc-btn--primary.dc-btn--critical {
  --dc-btn-bg: var(--dc-bg-fill-critical);
  --dc-btn-bg-hover: var(--dc-bg-fill-critical-hover);
  --dc-btn-bg-active: var(--dc-bg-fill-critical-active);
  --dc-btn-color: var(--dc-text-critical-on-bg-fill);
  --dc-btn-shadow: var(--dc-shadow-button-primary-critical);
  --dc-btn-shadow-hover: var(--dc-shadow-button-primary-critical-hover);
  --dc-btn-shadow-active: var(--dc-shadow-button-primary-critical-inset);
}

.dc-btn--primary.dc-btn--success {
  --dc-btn-bg: var(--dc-bg-fill-success);
  --dc-btn-bg-hover: var(--dc-bg-fill-success-hover);
  --dc-btn-bg-active: var(--dc-bg-fill-success-active);
  --dc-btn-color: var(--dc-text-success-on-bg-fill);
  --dc-btn-shadow: var(--dc-shadow-button-primary-success);
  --dc-btn-shadow-hover: var(--dc-shadow-button-primary-success-hover);
  --dc-btn-shadow-active: var(--dc-shadow-button-primary-success-inset);
}

/* ---- SECONDARY — white + the light bevel; the workhorse ---- */
.dc-btn--secondary {
  --dc-btn-bg: var(--dc-bg-fill);
  --dc-btn-bg-hover: var(--dc-bg-fill-hover);
  --dc-btn-bg-active: var(--dc-bg-fill-active);
  --dc-btn-color: var(--dc-text);
  --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);
}

.dc-btn--secondary .dc-icon { color: var(--dc-icon); }
.dc-btn--secondary.dc-btn--critical { --dc-btn-color: var(--dc-text-critical); --dc-btn-color-hover: var(--dc-text-critical-hover); --dc-btn-color-active: var(--dc-text-critical-active); }
.dc-btn--secondary.dc-btn--success  { --dc-btn-color: var(--dc-text-success);  --dc-btn-color-hover: var(--dc-text-success-hover);  --dc-btn-color-active: var(--dc-text-success-active); }
.dc-btn--secondary.dc-btn--critical .dc-icon,
.dc-btn--secondary.dc-btn--success  .dc-icon { color: currentColor; }

/* ---- TERTIARY — transparent; hover is a 5% black wash ---- */
.dc-btn--tertiary {
  --dc-btn-bg: transparent;
  --dc-btn-bg-hover: var(--dc-bg-fill-transparent-hover);    /* rgba(0,0,0,0.05) */
  --dc-btn-bg-active: var(--dc-bg-fill-transparent-active);
  --dc-btn-bg-disabled: transparent;
  --dc-btn-color: var(--dc-text);
}

.dc-btn--tertiary .dc-icon { color: var(--dc-icon); }
.dc-btn--tertiary.dc-btn--critical { --dc-btn-color: var(--dc-text-critical); }
.dc-btn--tertiary.dc-btn--success  { --dc-btn-color: var(--dc-text-success); }

/* ---- PLAIN — a link that is a button.
   ⚠️ The NEGATIVE margins are what make it line up with surrounding text: the
   padding is still there for the hit area, and the margins cancel it visually.
   Remove them and every inline "Edit" sits 6px low. ---- */
.dc-btn--plain {
  --dc-btn-bg: transparent;
  --dc-btn-bg-disabled: transparent;
  --dc-btn-color: var(--dc-text-link);            /* #005BD3 */
  --dc-btn-color-hover: var(--dc-text-link-hover);
  --dc-btn-color-active: var(--dc-text-link-active);
  font-weight: var(--dc-font-weight-regular);     /* 450, not 550 */
  margin: calc(var(--dc-btn-pad-block) * -1) calc(var(--dc-btn-pad-inline) * -1);
}

.dc-btn--plain:hover,
.dc-btn--plain:active,
.dc-btn--plain:focus-visible { text-decoration: underline; }

.dc-btn--plain:focus-visible {
  border-radius: var(--dc-border-radius-300);
  outline-offset: calc(var(--dc-btn-pad-block) * -1);
}

.dc-btn--plain .dc-icon { color: currentColor; }
.dc-btn--plain.dc-btn--critical { --dc-btn-color: var(--dc-text-critical); --dc-btn-color-hover: var(--dc-text-critical-hover); }
.dc-btn--plain.dc-btn--success  { --dc-btn-color: var(--dc-text-success);  --dc-btn-color-hover: var(--dc-text-success-hover); }
.dc-btn--plain.dc-btn--monochrome { --dc-btn-color: currentColor; --dc-btn-color-hover: currentColor; }

/* ---- LOADING — the label stays (so the button keeps its width) but goes
   transparent, and a spinner sits centred over it. ---- */
.dc-btn--loading { pointer-events: none; }
.dc-btn--loading > .dc-btn__label { visibility: hidden; }

.dc-btn__spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dc-btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dc-space-200);        /* space-button-group-gap */
}

/* ============================================================================
   BADGE — 2px 8px, radius 8px, weight 550, font-size INHERITED (so a badge in a
   12px table cell is 12px and one in a 13px header is 13px — it never fights
   its context).
   ========================================================================== */
.dc-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--dc-space-050) var(--dc-space-200);      /* 2px 8px */
  border-radius: var(--dc-border-radius-200);           /* 8px */
  background-color: var(--dc-bg-fill-transparent-secondary);  /* rgba(0,0,0,0.06) */
  color: var(--dc-text-secondary);                     /* #616161 */
  font-weight: var(--dc-font-weight-medium);           /* 550 */
  white-space: nowrap;
}

.dc-badge--large { padding: var(--dc-space-100) var(--dc-space-200); }   /* 4px 8px */
.dc-badge .dc-icon { color: currentColor; width: var(--dc-icon-size); height: var(--dc-icon-size); }

.dc-badge--info      { background-color: var(--dc-bg-fill-info-secondary);      color: var(--dc-text-info); }
.dc-badge--success   { background-color: var(--dc-bg-fill-success-secondary);   color: var(--dc-text-success); }
.dc-badge--attention { background-color: var(--dc-bg-fill-caution-secondary);   color: var(--dc-text-caution); }
.dc-badge--warning   { background-color: var(--dc-bg-fill-warning-secondary);   color: var(--dc-text-warning); }
.dc-badge--critical  { background-color: var(--dc-bg-fill-critical-secondary);  color: var(--dc-text-critical); }
.dc-badge--magic     { background-color: var(--dc-bg-fill-magic-secondary);     color: var(--dc-text-magic); }
.dc-badge--new       { background-color: var(--dc-bg-fill-transparent-secondary); color: var(--dc-text-secondary); font-weight: var(--dc-font-weight-bold); }
.dc-badge--read-only { background-color: transparent; color: var(--dc-text-secondary); }

/* ---- the `--strong` forms: the solid fill + its on-fill text ---- */
.dc-badge--info-strong      { background-color: var(--dc-bg-fill-info);      color: var(--dc-text-info-on-bg-fill); }
.dc-badge--success-strong   { background-color: var(--dc-bg-fill-success);   color: var(--dc-text-success-on-bg-fill); }
.dc-badge--attention-strong { background-color: var(--dc-bg-fill-caution);   color: var(--dc-text-caution-on-bg-fill); }
.dc-badge--warning-strong   { background-color: var(--dc-bg-fill-warning);   color: var(--dc-text-warning-on-bg-fill); }
.dc-badge--critical-strong  { background-color: var(--dc-bg-fill-critical);  color: var(--dc-text-critical-on-bg-fill); }
.dc-badge--magic-strong     { background-color: var(--dc-bg-fill-magic);     color: var(--dc-text-magic-on-bg-fill); }

/* ---- PIP — an 8px rounded square drawn as a BORDER, so "incomplete" (hollow)
   and "complete" (filled) differ without a second colour. ---- */
.dc-badge__pip {
  display: block;
  flex: 0 0 auto;
  width: var(--dc-space-200);            /* 8px */
  height: var(--dc-space-200);
  margin-left: calc(var(--dc-space-050) * -1);
  margin-right: var(--dc-space-100);
  border: 0.078125rem solid currentColor;  /* 1.25px */
  border-radius: 0.1875rem;                /* 3px */
}

.dc-badge__pip--complete   { background-color: currentColor; }
.dc-badge__pip--partial    { background-image: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.dc-badge--info      .dc-badge__pip { border-color: var(--dc-icon-info); }
.dc-badge--success   .dc-badge__pip { border-color: var(--dc-icon-success); }
.dc-badge--attention .dc-badge__pip { border-color: var(--dc-icon-caution); }
.dc-badge--warning   .dc-badge__pip { border-color: var(--dc-icon-warning); }
.dc-badge--critical  .dc-badge__pip { border-color: var(--dc-icon-critical); }
.dc-badge--magic     .dc-badge__pip { border-color: var(--dc-icon-magic); }

/* ============================================================================
   INDEX TABLE — the Drops index and the Variants grid both live on this.
   ⚠️ SELECTED ROWS. `#F1F1F1` has to be applied to the row AND to its sticky
   cells. A sticky cell paints its own background to cover the scrolling content
   underneath it, so a row-level rule alone leaves the checkbox column white and
   the selection looks broken exactly where the eye starts.
   ========================================================================== */
.dc-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: inherit;
}

.dc-table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  font-size: var(--dc-font-size-325);
  line-height: var(--dc-font-line-height-500);
}

.dc-table__head-cell {
  padding: var(--dc-space-200) var(--dc-space-150);   /* 8px 6px */
  border: none;
  background-color: var(--dc-bg-surface-secondary);  /* #F7F7F7 */
  font-size: var(--dc-font-size-300);                /* 12px */
  font-weight: var(--dc-font-weight-medium);         /* 550 */
  line-height: var(--dc-font-line-height-400);
  color: var(--dc-text-secondary);                   /* #616161 */
  text-align: left;
  white-space: nowrap;
}

.dc-table__head-cell:first-child { padding-left: var(--dc-space-300); }
.dc-table__head-cell:last-child  { padding-right: var(--dc-space-300); }
.dc-table__head-cell--numeric    { text-align: right; }

.dc-table__row {
  background-color: var(--dc-bg-surface);
  cursor: pointer;
  border-top: var(--dc-border-width-025) solid var(--dc-border-secondary);   /* #EBEBEB */
}

.dc-table__row:first-child { border-top: var(--dc-border-width-025) solid var(--dc-border); }  /* #E3E3E3 */
.dc-table__row--unclickable { cursor: auto; }
.dc-table__row:hover { background-color: var(--dc-bg-surface-hover); }

.dc-table__cell {
  padding: var(--dc-space-150);                      /* 6px — space-table-cell-padding */
  vertical-align: middle;
  color: var(--dc-text);
}

.dc-table__cell:first-child { padding-left: var(--dc-space-300); }   /* 12px */
.dc-table__cell:last-child  { padding-right: var(--dc-space-300); }
.dc-table__cell--numeric    { text-align: right; font-variant-numeric: tabular-nums; }
.dc-table__cell--subdued    { color: var(--dc-text-secondary); }

/* ---- the sticky checkbox column ---- */
.dc-table__cell--checkbox,
.dc-table__head-cell--checkbox {
  position: sticky;
  left: 0;
  z-index: 29;
  width: var(--dc-width-500);         /* 20px */
  padding: var(--dc-space-150) 0;     /* 6px 0 */
  vertical-align: middle;
  background-color: inherit;
}

.dc-table__head-cell--checkbox { background-color: var(--dc-bg-surface-secondary); }

/* the 1px hairline that separates the frozen column while scrolling */
.dc-table--scrolling .dc-table__cell--checkbox,
.dc-table--scrolling .dc-table__head-cell--checkbox {
  filter: drop-shadow(0.0625rem 0 0 var(--dc-border-secondary));
}

/* ---- selection + row tones. Each one paints the row AND its sticky cells. ---- */
.dc-table__row--selected,
.dc-table__row--selected .dc-table__cell,
.dc-table__row--selected .dc-table__cell--checkbox { background-color: var(--dc-bg-surface-selected); }   /* #F1F1F1 */

.dc-table__row--success,
.dc-table__row--success .dc-table__cell,
.dc-table__row--success .dc-table__cell--checkbox { background-color: var(--dc-bg-surface-success); }

.dc-table__row--warning,
.dc-table__row--warning .dc-table__cell,
.dc-table__row--warning .dc-table__cell--checkbox { background-color: var(--dc-bg-surface-warning); }

.dc-table__row--critical,
.dc-table__row--critical .dc-table__cell,
.dc-table__row--critical .dc-table__cell--checkbox { background-color: var(--dc-bg-surface-critical); }

.dc-table__row--subdued,
.dc-table__row--subdued .dc-table__cell,
.dc-table__row--subdued .dc-table__cell--checkbox { background-color: var(--dc-bg-surface-secondary); color: var(--dc-text-secondary); }

/* a subheader row — used to nest pack components under their pack */
.dc-table__row--subheader,
.dc-table__row--subheader .dc-table__cell {
  background-color: var(--dc-bg-surface-secondary);
  color: var(--dc-text-secondary);
  font-size: var(--dc-font-size-300);
  font-weight: var(--dc-font-weight-medium);
  border-top: var(--dc-border-width-025) solid var(--dc-border);
  border-bottom: var(--dc-border-width-025) solid var(--dc-border);
  cursor: auto;
}

.dc-table__cell--nested { padding-left: var(--dc-space-800); }   /* 32px indent */

/* ============================================================================
   TEXT FIELD — the input carries NO border. The border lives on a sibling
   backdrop behind it, which is the only way an outline and a border can both
   animate without the text reflowing by a pixel.
   ⚠️ 16px font below 768px is DELIBERATE. iOS Safari zooms the whole page on
   focus for anything under 16px, and a zoomed admin is unusable.
   ========================================================================== */
.dc-field { display: block; }

.dc-field__label {
  display: block;
  margin-bottom: var(--dc-space-100);
  font-size: var(--dc-font-size-325);
  line-height: var(--dc-font-line-height-500);
  font-weight: var(--dc-font-weight-regular);
  color: var(--dc-text);
}

.dc-field__label-optional { color: var(--dc-text-secondary); }

.dc-textfield {
  position: relative;
  display: flex;
  align-items: center;
  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);
  cursor: text;
}

.dc-textfield__input {
  position: relative;
  z-index: 20;
  display: flex;
  flex: 1 1;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: var(--dc-shell-control-height);          /* 32px */
  padding: var(--dc-space-150) var(--dc-space-300);    /* 6px 12px */
  border: none;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--dc-font-family-sans);
  font-size: var(--dc-font-size-400);                 /* 16px below 768 — iOS */
  font-weight: var(--dc-font-weight-regular);
  line-height: var(--dc-font-line-height-600);
  color: var(--dc-text);
  caret-color: var(--dc-text);
}

@media (min-width: 48em) {
  .dc-textfield__input { font-size: var(--dc-font-size-325); line-height: var(--dc-font-line-height-500); }
}

.dc-textfield__input:focus,
.dc-textfield__input:focus-visible { outline: none; }
.dc-textfield__input::placeholder { color: var(--dc-text-secondary); }
.dc-textfield__input:disabled { opacity: 1; background: none; color: var(--dc-text-disabled); -webkit-text-fill-color: var(--dc-text-disabled); }

.dc-textfield__backdrop {
  position: absolute;
  z-index: 10;
  inset: 0;
  border: var(--dc-border-width-0165) solid var(--dc-input-border);  /* 0.66px #8A8A8A */
  border-radius: var(--dc-border-radius-200);                       /* 8px */
  background-color: var(--dc-input-bg-surface);                     /* #FDFDFD */
  pointer-events: none;
}

/* hover — only when the field is genuinely interactive */
.dc-textfield:not(.dc-textfield--disabled):not(.dc-textfield--error):not(.dc-textfield--read-only)
  > .dc-textfield__input:hover:not(:focus-visible) ~ .dc-textfield__backdrop {
  border-color: var(--dc-input-border-hover);          /* #616161 */
  background-color: var(--dc-input-bg-surface-hover);  /* #FAFAFA */
}

.dc-textfield:focus-within > .dc-textfield__input ~ .dc-textfield__backdrop,
.dc-textfield--focus > .dc-textfield__input ~ .dc-textfield__backdrop {
  border-color: var(--dc-input-border-active);         /* #1A1A1A */
  border-width: var(--dc-border-width-025);
  background-color: var(--dc-input-bg-surface-active); /* #F7F7F7 */
  outline: var(--dc-border-width-050) solid var(--dc-border-focus);
  outline-offset: var(--dc-space-025);
}

.dc-textfield--error > .dc-textfield__input ~ .dc-textfield__backdrop {
  background-color: var(--dc-bg-surface-critical);       /* #FEE8EB */
  border-color: var(--dc-border-critical-secondary);     /* #8E0B21 */
}

.dc-textfield--read-only > .dc-textfield__input { color: var(--dc-text-secondary); }
.dc-textfield--read-only > .dc-textfield__backdrop {
  background-color: var(--dc-bg-surface-disabled);       /* rgba(0,0,0,0.05) */
  border-color: transparent;
}

.dc-textfield--disabled { color: var(--dc-text-disabled); cursor: initial; }
.dc-textfield--disabled > .dc-textfield__backdrop { border: none; background-color: var(--dc-bg-surface-disabled); }

.dc-textfield__prefix,
.dc-textfield__suffix {
  position: relative;
  z-index: 20;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  color: var(--dc-text-secondary);
  white-space: nowrap;
}

.dc-textfield__prefix { padding-left: var(--dc-space-300); }
.dc-textfield__suffix { padding-right: var(--dc-space-300); }
.dc-textfield__prefix + .dc-textfield__input { padding-left: var(--dc-space-200); }
.dc-textfield__input + .dc-textfield__suffix { padding-left: 0; }

.dc-textfield--multiline { padding: 0; flex-wrap: wrap; align-items: stretch; }
.dc-textfield--multiline > .dc-textfield__input { overflow: auto; resize: none; align-items: flex-start; }

.dc-field__help {
  margin-top: var(--dc-space-100);
  font-size: var(--dc-font-size-300);
  line-height: var(--dc-font-line-height-400);
  color: var(--dc-text-secondary);
}

.dc-field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--dc-space-100);
  margin-top: var(--dc-space-100);
  font-size: var(--dc-font-size-300);
  line-height: var(--dc-font-line-height-400);
  color: var(--dc-text-critical);
}

.dc-field__error .dc-icon { color: var(--dc-icon-critical); width: 1rem; height: 1rem; }

/* ============================================================================
   SELECT — same backdrop trick. The real `<select>` sits at `inset: 0` with
   `opacity: 0`, so the native menu and keyboard behaviour are intact while what
   you SEE is our own content row and chevron.
   ========================================================================== */
.dc-select { position: relative; }

.dc-select__content {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--dc-space-200);
  width: 100%;
  min-height: var(--dc-shell-control-height);                                    /* 32px */
  padding: var(--dc-space-150) var(--dc-space-200) var(--dc-space-150) var(--dc-space-300);  /* 6px 8px 6px 12px */
  font-size: var(--dc-font-size-400);
  line-height: var(--dc-font-line-height-600);
  font-weight: var(--dc-font-weight-regular);
  color: var(--dc-text);
  pointer-events: none;
}

@media (min-width: 48em) {
  .dc-select__content { font-size: var(--dc-font-size-325); line-height: var(--dc-font-line-height-500); }
}

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

.dc-select__chevron { flex: 0 0 auto; color: var(--dc-icon-secondary); }   /* #8A8A8A */

.dc-select__input {
  position: absolute;
  inset: 0;
  z-index: 30;
  width: 100%;
  height: 100%;
  margin: 0;
  border: none;
  opacity: 0;
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--dc-font-family-sans);
  font-size: var(--dc-font-size-400);
  cursor: pointer;
}

.dc-select__backdrop {
  position: absolute;
  z-index: 10;
  inset: 0;
  border: var(--dc-border-width-0165) solid var(--dc-input-border);
  border-radius: var(--dc-border-radius-200);
  background-color: var(--dc-input-bg-surface);
  pointer-events: none;
}

.dc-select:not(.dc-select--disabled):hover .dc-select__backdrop {
  border-color: var(--dc-input-border-hover);
  background-color: var(--dc-input-bg-surface-hover);
}

.dc-select__input:focus-visible ~ .dc-select__backdrop {
  border-color: var(--dc-input-border-active);
  background-color: var(--dc-input-bg-surface-active);
  outline: var(--dc-border-width-050) solid var(--dc-border-focus);
  outline-offset: var(--dc-space-025);
}

.dc-select__input:active ~ .dc-select__backdrop {
  border: none;
  box-shadow: var(--dc-shadow-inset-200);
  background-color: var(--dc-input-bg-surface-active);
}

.dc-select--disabled .dc-select__content { color: var(--dc-text-disabled); }
.dc-select--disabled .dc-select__chevron { color: var(--dc-icon-disabled); }
.dc-select--disabled .dc-select__backdrop { border-color: var(--dc-border-disabled); background-color: var(--dc-bg-surface-disabled); }
.dc-select--error .dc-select__backdrop { border-color: var(--dc-border-critical-secondary); background-color: var(--dc-bg-surface-critical); }

/* ============================================================================
   CHECKBOX + RADIO
   ⚠️ CHECKED IS A BOX-SHADOW, NOT A BACKGROUND:
        box-shadow: inset 0 0 0 2rem #303030;  border-width: 0;
      A 2rem inset spread floods a 16px box entirely. Why not `background`?
      Because the shadow animates from the border inwards, so checking reads as
      the box FILLING rather than as a colour swap — and the same declaration
      works on the radio, where a background would square off the circle.
   ========================================================================== */
.dc-choice {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--dc-space-200);
  padding: var(--dc-space-100) 0;
  cursor: pointer;
  font-size: var(--dc-font-size-325);
  line-height: var(--dc-font-line-height-500);
  color: var(--dc-text);
}

.dc-choice--disabled { cursor: default; color: var(--dc-text-disabled); }

/* ⚠️ `display: inline-block` IS LOad-BEARING — without it the control vanishes
   outside a flex row. A bare <span> is `display: inline`, and an inline box
   IGNORES width and height, so the 16px box collapses to nothing. Inside
   `.dc-choice` (inline-flex) the flex container blockifies its items and it
   happens to work, which is why this was invisible in the form section and
   showed as a 1px dash in every IndexTable checkbox cell — where the span is a
   direct child of a <td>. Measured on the first render of _preview.html. */
.dc-checkbox,
.dc-radio {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
  width: var(--dc-checkbox-size);     /* 16px */
  height: var(--dc-checkbox-size);
  margin: var(--dc-space-025);
}

.dc-checkbox__input,
.dc-radio__input {
  position: absolute;
  z-index: var(--dc-z-index-1);
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.dc-checkbox__backdrop,
.dc-radio__backdrop {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border: var(--dc-border-width-0165) solid var(--dc-input-border);   /* 0.66px #8A8A8A */
  border-radius: var(--dc-border-radius-100);                        /* 4px */
  background-color: var(--dc-bg-surface);                            /* #FFFFFF */
  transition: border-color var(--dc-motion-duration-100) var(--dc-motion-ease-out),
              border-width var(--dc-motion-duration-100) var(--dc-motion-ease-out),
              box-shadow var(--dc-motion-duration-100) var(--dc-motion-ease-out);
}

.dc-radio__backdrop { border-radius: var(--dc-border-radius-full); }

.dc-choice:hover .dc-checkbox__backdrop,
.dc-choice:hover .dc-radio__backdrop {
  border-color: var(--dc-input-border-hover);
  background-color: var(--dc-input-bg-surface-hover);
}

.dc-checkbox__input:checked + .dc-checkbox__backdrop,
.dc-checkbox__input:indeterminate + .dc-checkbox__backdrop,
.dc-radio__input:checked + .dc-radio__backdrop {
  border-width: 0;
  box-shadow: inset 0 0 0 var(--dc-space-800) var(--dc-bg-fill-brand-selected);  /* inset 0 0 0 2rem #303030 */
}

.dc-checkbox__input:focus-visible + .dc-checkbox__backdrop,
.dc-radio__input:focus-visible + .dc-radio__backdrop {
  outline: var(--dc-border-width-050) solid var(--dc-border-focus);
  outline-offset: var(--dc-space-025);
}

.dc-checkbox__input:disabled + .dc-checkbox__backdrop,
.dc-radio__input:disabled + .dc-radio__backdrop {
  border-color: transparent;
  background-color: var(--dc-checkbox-bg-surface-disabled);   /* rgba(0,0,0,0.08) */
  box-shadow: none;
}

.dc-checkbox--error .dc-checkbox__backdrop,
.dc-radio--error .dc-radio__backdrop {
  border-color: var(--dc-border-critical-secondary);
  background-color: var(--dc-bg-surface-critical);
}

/* ---- the tick / dot. inset -2px so a 20px icon centres in a 16px box. ---- */
.dc-checkbox__icon {
  position: absolute;
  inset: -0.125rem;                 /* -2px */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 50%;
  transform: scale(0.8);
  color: var(--dc-text-brand-on-bg-fill);   /* white */
  transition: opacity var(--dc-motion-duration-100) var(--dc-motion-ease-out),
              transform var(--dc-motion-duration-100) var(--dc-motion-ease-out);
}

.dc-checkbox__input:checked ~ .dc-checkbox__icon,
.dc-checkbox__input:indeterminate ~ .dc-checkbox__icon {
  opacity: 1;
  transform: scale(1);
  transition: opacity var(--dc-motion-duration-150) var(--dc-motion-ease-out),
              transform var(--dc-motion-duration-150) var(--dc-motion-ease-out);
}

.dc-checkbox__input:disabled ~ .dc-checkbox__icon { color: var(--dc-checkbox-icon-disabled); }

.dc-radio__dot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--dc-motion-duration-100) var(--dc-motion-ease-out),
              transform var(--dc-motion-duration-100) var(--dc-motion-ease-out);
}

.dc-radio__dot::after {
  content: '';
  width: var(--dc-space-200);       /* 8px */
  height: var(--dc-space-200);
  border-radius: var(--dc-border-radius-full);
  background: var(--dc-text-brand-on-bg-fill);
}

.dc-radio__input:checked ~ .dc-radio__dot {
  opacity: 1;
  transform: scale(1);
  transition: opacity var(--dc-motion-duration-150) var(--dc-motion-ease-out),
              transform var(--dc-motion-duration-150) var(--dc-motion-ease-out);
}

.dc-radio__input:disabled ~ .dc-radio__dot::after { background: var(--dc-radio-button-icon-disabled); }

/* ============================================================================
   BANNER — TWO CONTEXTS, TWO DIFFERENT TONE MAPS. This is the one thing about
   Polaris banners that is easy to get wrong: the in-page banner is BOLD (a
   saturated fill with near-white text) and the in-card banner is SOFT (a tint
   with dark text). Using the soft map in-page makes a critical failure read as
   a footnote; using the bold map inside a card shouts.
   ========================================================================== */
.dc-banner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--dc-space-200);
  padding: var(--dc-space-300) var(--dc-space-400);
  font-size: var(--dc-font-size-325);
  line-height: var(--dc-font-line-height-500);
}

.dc-banner__icon { flex: 0 0 auto; color: currentColor; }
.dc-banner__content { flex: 1 1 auto; min-width: 0; }

.dc-banner__title {
  margin: 0;
  font-size: var(--dc-font-size-325);
  line-height: var(--dc-font-line-height-500);
  font-weight: var(--dc-font-weight-semibold);
}

.dc-banner__text { margin: var(--dc-space-100) 0 0; }
.dc-banner__actions { display: flex; flex-wrap: wrap; gap: var(--dc-space-200); margin-top: var(--dc-space-300); }
.dc-banner__dismiss { flex: 0 0 auto; margin: calc(var(--dc-space-100) * -1) calc(var(--dc-space-100) * -1) 0 0; }

/* ---- WITHIN PAGE (bold). shadow-200 + the bevel; radius 12px from 490px up. */
.dc-banner--in-page {
  border-radius: 0;
  box-shadow: var(--dc-shadow-200);
}

@media (min-width: 30.625em) {
  .dc-banner--in-page { border-radius: var(--dc-border-radius-300); }   /* 12px */
}

.dc-banner--in-page::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: var(--dc-shadow-bevel-100);
  mix-blend-mode: luminosity;
}

.dc-banner--in-page.dc-banner--success  { background-color: var(--dc-bg-fill-success);  color: var(--dc-text-success-on-bg-fill); }   /* #047B5D / #FAFFFB */
.dc-banner--in-page.dc-banner--warning  { background-color: var(--dc-bg-fill-warning);  color: var(--dc-text-warning-on-bg-fill); }   /* #FFB800 / #251A00 */
.dc-banner--in-page.dc-banner--critical { background-color: var(--dc-bg-fill-critical); color: var(--dc-text-critical-on-bg-fill); }  /* #C70A24 / #FFFAFB */
.dc-banner--in-page.dc-banner--info     { background-color: var(--dc-bg-fill-info);     color: var(--dc-text-info-on-bg-fill); }      /* #91D0FF / #002133 */
.dc-banner--in-page.dc-banner--default  { background-color: var(--dc-bg-surface);       color: var(--dc-text); }

.dc-banner--in-page + .dc-banner--in-page { margin-top: var(--dc-space-400); }   /* 16px */

/* ⚠️ A BOLD BANNER IS A COLOURED SURFACE, SO EVERY CONTROL ON IT MUST INHERIT ITS
   INK. Without this, `.dc-btn--plain` keeps `--dc-btn-color: #005BD3` and a
   "View the log" link renders dark blue on the #C70A24 critical fill — measured
   at 1.4:1, effectively invisible. Same for the dismiss X, whose icon defaults
   to #4A4A4A. The secondary button is fine as-is (white fill), which is exactly
   why this was easy to miss: three of the four controls looked right. */
.dc-banner--in-page .dc-btn--plain,
.dc-banner--in-page .dc-btn--tertiary {
  --dc-btn-color: currentColor;
  --dc-btn-color-hover: currentColor;
  --dc-btn-color-active: currentColor;
}

.dc-banner--in-page .dc-btn--tertiary {
  --dc-btn-bg-hover: rgba(255, 255, 255, 0.15);
  --dc-btn-bg-active: rgba(255, 255, 255, 0.25);
}

.dc-banner--in-page .dc-btn .dc-icon,
.dc-banner--in-page .dc-banner__icon { color: currentColor; }

/* A soft banner's ink is already the tone's dark text, so the same rule applies
   there for the icon, and a plain button keeps the link blue (which reads fine
   on a tint). */
.dc-banner--in-card .dc-banner__icon { color: currentColor; }

/* ---- WITHIN A CONTENT CONTAINER (soft). radius 8px, NO shadow, no bevel. */
.dc-banner--in-card {
  border-radius: var(--dc-border-radius-200);   /* 8px */
  box-shadow: none;
}

.dc-banner--in-card.dc-banner--success  { background-color: var(--dc-bg-surface-success);  color: var(--dc-text-success); }   /* #CDFED4 / #014B40 */
.dc-banner--in-card.dc-banner--warning  { background-color: var(--dc-bg-surface-warning);  color: var(--dc-text-warning); }   /* #FFF1E3 / #5E4200 */
.dc-banner--in-card.dc-banner--critical { background-color: var(--dc-bg-surface-critical); color: var(--dc-text-critical); }  /* #FEE8EB / #8E0B21 */
.dc-banner--in-card.dc-banner--info     { background-color: var(--dc-bg-surface-info);     color: var(--dc-text-info); }      /* #EAF4FF / #003A5A */
.dc-banner--in-card.dc-banner--default  { background-color: var(--dc-bg-surface-secondary); color: var(--dc-text); }

.dc-banner--in-card + .dc-banner--in-card { margin-top: var(--dc-space-200); }   /* 8px */

/* ============================================================================
   MODAL — bottom sheet on a phone, centred dialog from 768px up. That single
   `justify-content` flip is the whole responsive story.
   ========================================================================== */
.dc-modal {
  position: fixed;
  inset: 0;
  z-index: var(--dc-z-index-11);          /* 519 */
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  flex-direction: column;
}

@media (min-width: 48em) {
  .dc-modal { justify-content: center; }
}

.dc-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--dc-z-index-10);
  background-color: var(--dc-backdrop-bg);   /* rgba(0,0,0,0.71) */
  animation: dc-fade-in var(--dc-motion-duration-200) var(--dc-motion-ease);
}

.dc-modal__dialog {
  position: relative;
  z-index: var(--dc-z-index-11);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 3.75rem);      /* 100vh - 60px */
  background-color: var(--dc-bg-surface);
  box-shadow: var(--dc-shadow-600);
  border-start-start-radius: var(--dc-border-radius-400);
  border-start-end-radius: var(--dc-border-radius-400);
  animation: dc-appear-below var(--dc-motion-duration-250) var(--dc-motion-ease-out);
}

@media (min-width: 48em) {
  .dc-modal__dialog {
    max-width: 38.75rem;                  /* 620px */
    width: 100%;
    margin: 0 auto;
    border-radius: var(--dc-border-radius-400);   /* 16px */
  }
}

.dc-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dc-space-200);
  flex: 0 0 auto;
  padding: var(--dc-space-400);
  border-bottom: var(--dc-border-width-025) solid var(--dc-border);
}

.dc-modal__title {
  margin: 0;
  font-size: var(--dc-font-size-350);
  line-height: var(--dc-font-line-height-500);
  font-weight: var(--dc-font-weight-semibold);
}

.dc-modal__body { flex: 1 1 auto; overflow-y: auto; padding: var(--dc-space-400); }

.dc-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--dc-space-200);
  flex: 0 0 auto;
  padding: var(--dc-space-400);
  border-top: var(--dc-border-width-025) solid var(--dc-border);
}

/* ============================================================================
   POPOVER — 400x500 max, radius 12px, shadow-300, and a 100ms entry.
   The margin `5px 8px 16px` is not symmetric: 5px above clears the activator,
   16px below leaves room for the tail on a flipped popover.
   ========================================================================== */
.dc-popover {
  position: absolute;
  z-index: var(--dc-z-index-4);
  max-width: var(--dc-popover-max-width);      /* 400px */
  max-height: var(--dc-popover-max-height);    /* 500px */
  margin: 0.3125rem var(--dc-space-200) var(--dc-space-400);   /* 5px 8px 16px */
  border-radius: var(--dc-border-radius-300);  /* 12px */
  background-color: var(--dc-bg-surface);
  box-shadow: var(--dc-shadow-300);
  overflow: hidden;
  animation: dc-popover-in var(--dc-motion-duration-100) var(--dc-motion-ease);
}

@keyframes dc-popover-in {
  from { opacity: 0; transform: translateY(-0.3125rem); }
  to   { opacity: 1; transform: translateY(0); }
}

.dc-popover__pane { max-height: var(--dc-popover-max-height); overflow-y: auto; }
.dc-popover__section { padding: var(--dc-space-200); }
.dc-popover__section + .dc-popover__section { border-top: var(--dc-border-width-025) solid var(--dc-border-secondary); }

.dc-action-list { display: flex; flex-direction: column; gap: var(--dc-space-025); }

.dc-action-list__item {
  all: unset;
  display: flex;
  align-items: center;
  gap: var(--dc-space-200);
  padding: var(--dc-space-150) var(--dc-space-200);
  border-radius: var(--dc-border-radius-200);
  font-family: var(--dc-font-family-sans);
  font-size: var(--dc-font-size-325);
  line-height: var(--dc-font-line-height-500);
  color: var(--dc-text);
  cursor: pointer;
}

.dc-action-list__item:hover { background-color: var(--dc-bg-surface-hover); }
.dc-action-list__item:focus-visible { outline: var(--dc-border-width-050) solid var(--dc-border-focus); outline-offset: calc(var(--dc-space-025) * -1); }
.dc-action-list__item--critical { color: var(--dc-text-critical); }
.dc-action-list__item--critical:hover { background-color: var(--dc-bg-surface-critical); }

/* ============================================================================
   TABS — ⚠️ PILL FILLS, NOT UNDERLINES. Polaris 13 moved tabs to a filled pill;
   an underline-style tab bar is the single loudest tell that a page was built
   from an older Polaris memory rather than from the current admin.
   ========================================================================== */
.dc-tabs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--dc-space-100);        /* 4px */
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48em) {
  .dc-tabs { padding: 0 var(--dc-space-100); flex-wrap: wrap; align-items: stretch; }
}

@media (max-width: 47.9975em) {
  .dc-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: var(--dc-space-200); flex-wrap: nowrap; }
}

.dc-tabs__tab {
  all: unset;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dc-space-100);
  height: var(--dc-height-700);                    /* 28px */
  padding: var(--dc-space-100) var(--dc-space-300);  /* 4px 12px */
  border: 0;
  border-radius: var(--dc-border-radius-200);      /* 8px */
  background-color: transparent;
  color: var(--dc-text-brand);                     /* #4A4A4A */
  font-family: var(--dc-font-family-sans);
  font-size: var(--dc-font-size-325);
  font-weight: var(--dc-font-weight-medium);
  line-height: var(--dc-font-line-height-500);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.dc-tabs__tab:hover { background-color: var(--dc-bg-fill-transparent-hover); }

.dc-tabs__tab--selected,
.dc-tabs__tab[aria-selected='true'] {
  background: var(--dc-bg-fill-transparent-selected);   /* rgba(0,0,0,0.08) */
  color: var(--dc-text);
  font-weight: var(--dc-font-weight-semibold);
}

.dc-tabs__tab:focus-visible { outline: var(--dc-border-width-050) solid var(--dc-border-focus); outline-offset: var(--dc-space-025); }
.dc-tabs__tab[aria-disabled='true'] { cursor: default; color: var(--dc-text-disabled); }

/* ============================================================================
   TOOLTIP — ⚠️ LIGHT, NOT DARK. Every other design system ships a dark tooltip
   and Polaris does not: it is a white surface with #303030 text, shadow-300 and
   the same bevel a card gets. A dark tooltip looks foreign in this admin.
   Polaris leaves its padding and radius as React-injected vars; 8px / 8px is
   what the rendered admin measures.
   ========================================================================== */
.dc-tooltip {
  position: relative;
  z-index: var(--dc-z-index-6);
  max-width: var(--dc-tooltip-max-width);       /* 200px */
  min-width: 4ch;
  margin: var(--dc-space-300) var(--dc-space-100) var(--dc-space-100);   /* 12px 4px 4px */
  padding: var(--dc-tooltip-padding);           /* 8px */
  border-radius: var(--dc-tooltip-border-radius);
  background-color: var(--dc-bg-surface);       /* #FFFFFF */
  box-shadow: var(--dc-shadow-300);
  color: var(--dc-text);                        /* #303030 */
  font-size: var(--dc-font-size-325);
  line-height: var(--dc-font-line-height-500);
  pointer-events: none;
}

.dc-tooltip--wide { max-width: var(--dc-tooltip-max-width-wide); }   /* 275px */

.dc-tooltip::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: var(--dc-shadow-bevel-100);
  mix-blend-mode: luminosity;
}

/* ============================================================================
   SKELETON — body-text lines 8px tall, #E3E3E3, radius 4px, 12px apart, and the
   last line at 80% width so a loading block reads as prose rather than as bars.
   ========================================================================== */
.dc-skeleton-body { width: 100%; }

.dc-skeleton-line {
  height: var(--dc-space-200);                   /* 8px */
  background-color: var(--dc-bg-fill-tertiary);  /* #E3E3E3 */
  border-radius: var(--dc-border-radius-100);    /* 4px */
}

.dc-skeleton-line + .dc-skeleton-line { margin-top: var(--dc-space-300); }   /* 12px */
.dc-skeleton-line:last-child:not(:first-child) { width: 80%; }

.dc-skeleton-display {
  height: var(--dc-font-line-height-700);        /* 28px */
  max-width: 7.5rem;
  background-color: var(--dc-bg-fill-tertiary);
  border-radius: var(--dc-border-radius-100);
}

.dc-skeleton-thumb {
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--dc-bg-fill-tertiary);
  border-radius: var(--dc-border-radius-200);
}

/* ============================================================================
   EMPTY STATE
   ========================================================================== */
.dc-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--dc-space-400);
  padding: var(--dc-space-1000) var(--dc-space-400);
}

.dc-empty-state__image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 9.0625rem;                              /* 145px — Polaris' own skeleton size */
  height: 9.0625rem;
  border-radius: var(--dc-border-radius-full);
  background-color: var(--dc-bg-fill-secondary);
  color: var(--dc-icon-secondary);
}

.dc-empty-state__image .dc-icon { width: 2.5rem; height: 2.5rem; }
.dc-empty-state__details { max-width: 30rem; }

.dc-empty-state__title {
  margin: 0 0 var(--dc-space-200);
  font-size: var(--dc-font-size-350);
  line-height: var(--dc-font-line-height-500);
  font-weight: var(--dc-font-weight-semibold);
}

.dc-empty-state__text { margin: 0; color: var(--dc-text-secondary); }
.dc-empty-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--dc-space-200); }

/* ============================================================================
   AVATAR — ⚠️ SQUIRCLES, NOT CIRCLES. radii 4 / 6 / 6 / 8 / 8 at 20 / 24 / 28 /
   32 / 40. A round avatar is the other loud tell of an older Polaris.
   ========================================================================== */
.dc-avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--dc-avatar-bg-fill);          /* #B5B5B5 */
  color: var(--dc-avatar-text-on-bg-fill);
  font-size: var(--dc-font-size-300);
  font-weight: var(--dc-font-weight-medium);
  line-height: 1;
  user-select: none;
}

.dc-avatar img { width: 100%; height: 100%; object-fit: cover; }

.dc-avatar--xs { width: 1.25rem;  height: 1.25rem;  border-radius: 0.25rem;  font-size: var(--dc-font-size-275); }  /* 20 / 4 */
.dc-avatar--sm { width: 1.5rem;   height: 1.5rem;   border-radius: 0.375rem; font-size: var(--dc-font-size-275); }  /* 24 / 6 */
.dc-avatar--md { width: 1.75rem;  height: 1.75rem;  border-radius: 0.375rem; }                                      /* 28 / 6 */
.dc-avatar--lg { width: 2rem;     height: 2rem;     border-radius: 0.5rem; }                                        /* 32 / 8 */
.dc-avatar--xl { width: 2.5rem;   height: 2.5rem;   border-radius: 0.5rem;  font-size: var(--dc-font-size-325); }   /* 40 / 8 */

.dc-avatar--one   { background: var(--dc-avatar-one-bg-fill);   color: var(--dc-avatar-one-text-on-bg-fill); }
.dc-avatar--two   { background: var(--dc-avatar-two-bg-fill);   color: var(--dc-avatar-two-text-on-bg-fill); }
.dc-avatar--three { background: var(--dc-avatar-three-bg-fill); color: var(--dc-avatar-three-text-on-bg-fill); }
.dc-avatar--four  { background: var(--dc-avatar-four-bg-fill);  color: var(--dc-avatar-four-text-on-bg-fill); }
.dc-avatar--five  { background: var(--dc-avatar-five-bg-fill);  color: var(--dc-avatar-five-text-on-bg-fill); }
.dc-avatar--six   { background: var(--dc-avatar-six-bg-fill);   color: var(--dc-avatar-six-text-on-bg-fill); }
.dc-avatar--seven { background: var(--dc-avatar-seven-bg-fill); color: var(--dc-avatar-seven-text-on-bg-fill); }

/* ============================================================================
   THUMBNAIL — 24 / 40 / 60 / 80, radius 8px, plus an `::after` hairline drawn as
   an INSET ring so a white-on-white product photo still has an edge.
   ========================================================================== */
.dc-thumbnail {
  position: relative;
  display: block;
  overflow: hidden;
  flex: 0 0 auto;
  max-width: 100%;
  background: var(--dc-bg-surface);
  border-radius: var(--dc-border-radius-200);   /* 8px */
}

.dc-thumbnail::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: var(--dc-shadow-border-inset);    /* 0 0 0 1px rgba(0,0,0,0.08) inset */
}

.dc-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }

.dc-thumbnail--xs { width: 1.5rem;  height: 1.5rem; }    /* 24 */
.dc-thumbnail--sm { width: 2.5rem;  height: 2.5rem; }    /* 40 */
.dc-thumbnail--md { width: 3.75rem; height: 3.75rem; }   /* 60 */
.dc-thumbnail--lg { width: 5rem;    height: 5rem; }      /* 80 */

/* a placeholder thumbnail — the Drops index shows one per drop before art exists */
.dc-thumbnail--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dc-bg-fill-secondary);
  color: var(--dc-icon-secondary);
}

/* ============================================================================
   PROGRESS BAR — 8 / 16 / 32 tall, radius 4px, track #E3E3E3.
   ========================================================================== */
.dc-progress {
  overflow: hidden;
  width: 100%;
  height: 1rem;                                   /* 16px — medium */
  background-color: var(--dc-bg-fill-tertiary);   /* #E3E3E3 */
  border-radius: var(--dc-border-radius-100);     /* 4px */
}

.dc-progress--small { height: 0.5rem; }   /* 8px */
.dc-progress--large { height: 2rem; }     /* 32px */

.dc-progress__indicator {
  height: inherit;
  width: 100%;
  background-color: var(--dc-bg-fill-brand);
  transform-origin: 0 50%;
  transform: scaleX(var(--dc-progress-percent, 0));
  transition: transform var(--dc-motion-duration-500) var(--dc-motion-ease);
}

.dc-progress--highlight .dc-progress__indicator { background-color: var(--dc-bg-fill-info); }
.dc-progress--success   .dc-progress__indicator { background-color: var(--dc-bg-fill-success); }
.dc-progress--critical  .dc-progress__indicator { background-color: var(--dc-bg-fill-critical); }

/* ============================================================================
   SPINNER — 20 / 44, 500ms LINEAR infinite. Not eased: an eased spin visibly
   stutters once per revolution.
   ========================================================================== */
.dc-spinner {
  display: inline-flex;
  width: 1.25rem;                                  /* 20px */
  height: 1.25rem;
  color: var(--dc-bg-fill-brand);
  animation: dc-spin var(--dc-motion-duration-500) linear infinite;
}

.dc-spinner--large { width: 2.75rem; height: 2.75rem; }   /* 44px */
.dc-spinner svg { width: 100%; height: 100%; fill: currentColor; }
.dc-spinner--inverse { color: var(--dc-bg-surface); }

@keyframes dc-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes dc-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dc-appear-below { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .dc-spinner { animation-duration: var(--dc-motion-duration-5000); }
  .dc-popover, .dc-modal__dialog, .dc-modal__backdrop { animation: none; }
  .dc-progress__indicator { transition: none; }
}

/* ============================================================================
   ⭐ STAGE TIMELINE — THE ONE COMPONENT THAT IS OURS, NOT SHOPIFY'S.
   Rebuilt from Figma 235:2 with Chris's three changes: standard emphasis blue
   instead of the amber gradient, no icons, and the page + URL featured directly
   above the bar.

   ⚠️ THE PARTIAL FILL IS LOAD-BEARING, NOT DECORATION. In the Figma reference
   `done` and `current` differed ONLY by a frozen amber shine band — one frame of
   T1's `titan-gradient-sweep`. Drop the gradient, as Chris asked, and the two
   states become pixel-identical: a three-stage timeline would show two solid
   blue bars and you could not tell which stage you are IN. The fix is a fill on
   the current segment proportional to time elapsed in that stage, driven by
   `--dc-elapsed` (0-100%). It restores the distinction AND does real work — it
   is the answer to "absolute clarity as to what's going to happen when".
   ========================================================================== */
.dc-timeline {
  display: flex;
  gap: var(--dc-space-200);       /* 8px */
  width: 100%;
}

.dc-timeline__segment {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 0.8125rem;                 /* 13px — measured off the reference */
  min-width: 0;
}

.dc-timeline__bar {
  width: 100%;
  height: 0.625rem;               /* 10px */
  border-radius: 0.3125rem;       /* 5px — a full pill */
  background-color: var(--dc-bg-fill-tertiary);   /* #E3E3E3 — the upcoming track */
  overflow: hidden;
}

.dc-timeline__label {
  font-family: var(--dc-font-family-sans);
  font-size: var(--dc-font-size-275);             /* 11px */
  font-weight: var(--dc-font-weight-semibold);    /* 650 */
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--dc-icon-secondary);                /* #8A8A8A — upcoming */
}

/* ---- done: solid emphasis blue ---- */
.dc-timeline__segment--done .dc-timeline__bar   { background-color: var(--dc-bg-fill-emphasis); }   /* #005BD3 */
.dc-timeline__segment--done .dc-timeline__label { color: var(--dc-text); }                          /* #303030 */

/* ---- current: an #E3E3E3 track with a blue fill sized by --dc-elapsed ---- */
.dc-timeline__segment--current .dc-timeline__bar   { background-color: var(--dc-bg-fill-tertiary); }
.dc-timeline__segment--current .dc-timeline__label { color: var(--dc-text); }

.dc-timeline__fill {
  display: block;
  height: 100%;
  width: var(--dc-elapsed, 0%);
  border-radius: inherit;
  background-color: var(--dc-bg-fill-emphasis);   /* #005BD3 */
  transition: width var(--dc-motion-duration-500) var(--dc-motion-ease);
}

/* ---- upcoming: bare track, subdued label (the default above) ---- */
.dc-timeline__segment--upcoming .dc-timeline__bar { background-color: var(--dc-bg-fill-tertiary); }

.dc-timeline__meta {
  margin-top: calc(var(--dc-space-100) * -1);
  font-size: var(--dc-font-size-275);
  line-height: var(--dc-font-line-height-300);
  font-weight: var(--dc-font-weight-regular);
  color: var(--dc-text-secondary);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

/* ---- THE PAGE BLOCK, directly above the bar: which page is live right now, at
   what address, served by which template. Chris's instruction. ---- */
.dc-timeline__page {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-100);
  margin-bottom: var(--dc-space-400);
}

.dc-timeline__page-title {
  margin: 0;
  font-size: var(--dc-font-size-325);                    /* headingSm */
  line-height: var(--dc-font-line-height-500);
  font-weight: var(--dc-font-weight-semibold);
  color: var(--dc-text);
}

.dc-timeline__page-url {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-100);
  align-self: flex-start;
  max-width: 100%;
  font-family: var(--dc-font-family-mono);
  font-size: var(--dc-font-size-300);                    /* bodySm */
  line-height: var(--dc-font-line-height-400);
  color: var(--dc-text-link);                            /* #005BD3 */
  text-decoration: none;
  word-break: break-all;
}

.dc-timeline__page-url:hover { color: var(--dc-text-link-hover); text-decoration: underline; }
.dc-timeline__page-url .dc-icon { width: 1rem; height: 1rem; color: currentColor; flex: 0 0 auto; }

.dc-timeline__page-suffix { display: inline-flex; align-items: center; gap: var(--dc-space-100); font-size: var(--dc-font-size-300); }

/* ── the three-state check list (exists · active · scope) ─────────────────────
   Three states, not two: a check can be UNKNOWN (we cannot judge scope until a
   collection is chosen). Rendering unknown as a failure would nag about something the
   operator has not had the chance to answer yet. */
.dc-checklist { list-style: none; margin: var(--dc-space-200) 0 0; padding: 0; }

/* The unfireable/warning list under a banner on the event detail. Real bullets, because
   each line is a separate refusal and they are read one at a time. */
.dc-list { margin: var(--dc-space-200) 0 var(--dc-space-400); padding-left: var(--dc-space-600);
           display: flex; flex-direction: column; gap: var(--dc-space-150); }
.dc-list > li { color: var(--dc-text); }

.dc-checklist__item {
  display: flex; align-items: baseline; gap: var(--dc-space-200);
  padding: var(--dc-space-150) 0;
  border-top: var(--dc-border-width-025) solid var(--dc-border-secondary);
  font-size: var(--dc-font-size-325);
}
.dc-checklist__item:first-child { border-top: 0; }
.dc-checklist__label {
  flex: 0 0 5.5rem; font-weight: var(--dc-font-weight-medium);
  text-transform: capitalize;
}
.dc-checklist__label::before { content: ''; display: inline-block; width: 1.1em; }
.dc-checklist__item--pass    .dc-checklist__label::before { content: '✓ '; color: var(--dc-icon-success); }
.dc-checklist__item--fail    .dc-checklist__label::before { content: '✕ '; color: var(--dc-icon-critical); }
.dc-checklist__item--unknown .dc-checklist__label::before { content: '– '; color: var(--dc-icon-secondary); }
.dc-checklist__item--fail .dc-checklist__label { color: var(--dc-text-critical); }
.dc-checklist__detail { color: var(--dc-text-secondary); word-break: break-word; }