/* ============================================================================
   Data Cleanser — shared design tokens + component primitives (LWC)
   Stratus Cloud Solutions · Lightning-aligned, Stratus-blue brand.

   This is a CSS-only LWC module. Import it from any component's CSS with:
       @import 'c/dcBrand';
   Tokens are declared on :host so they apply to the importing component and
   cascade (CSS custom properties inherit through shadow DOM) into children.

   PACKAGING NOTE: The design system specifies Hanken Grotesk (UI) + JetBrains
   Mono. AppExchange security review forbids loading fonts from a CDN, so we do
   NOT @import Google Fonts here. We fall back to the subscriber's Salesforce
   Sans. To match the prototype exactly, package the two fonts as a static
   resource and add an @font-face block; the token --dc-font-sans is the single
   place to swap them in.
   ============================================================================ */

:root {
  /* ---- Brand (Stratus blue, sampled from the droplet mark) -------------- */
  --dc-brand-50: #eff6fd;
  --dc-brand-100: #d8eafb;
  --dc-brand-200: #a9d2f4;
  --dc-brand-300: #7fbcec;
  --dc-brand-400: #50a0e2;
  --dc-brand-500: #2b81ce; /* PRIMARY */
  --dc-brand-600: #1a6fbe;
  --dc-brand-700: #0f5aa0;
  --dc-brand-800: #0b477f;
  --dc-brand-900: #0a3a66;

  /* ---- Cool neutral ramp ------------------------------------------------ */
  --dc-neutral-0: #ffffff;
  --dc-neutral-25: #fbfcfd;
  --dc-neutral-50: #f4f6f9;
  --dc-neutral-100: #eceff3;
  --dc-neutral-200: #dde2e9;
  --dc-neutral-300: #c5ccd6;
  --dc-neutral-400: #a6afbc;
  --dc-neutral-500: #818a99;
  --dc-neutral-600: #5e6b7e;
  --dc-neutral-700: #455168;
  --dc-neutral-800: #2e3a4d;
  --dc-neutral-900: #1a2533;

  /* ---- Semantic --------------------------------------------------------- */
  --dc-success-50: #ebf7ed;
  --dc-success-100: #cdebd3;
  --dc-success-500: #2e844a;
  --dc-success-700: #1c5e33;
  --dc-warning-50: #fef3e6;
  --dc-warning-100: #fbe2c2;
  --dc-warning-500: #c05e00;
  --dc-warning-700: #8a4400;
  --dc-error-50: #feebec;
  --dc-error-100: #fbd2d5;
  --dc-error-500: #ba0517;
  --dc-error-700: #8a0512;
  --dc-deactivate-50: #f3f0fa;
  --dc-deactivate-500: #a08dce;
  --dc-deactivate-600: #8f7fbd;
  --dc-deactivate-700: #7d6fad;

  /* ---- Aliases ---------------------------------------------------------- */
  --dc-bg-app: var(--dc-neutral-50);
  --dc-bg-surface: var(--dc-neutral-0);
  --dc-bg-sunken: var(--dc-neutral-100);
  --dc-bg-hover: var(--dc-neutral-100);
  --dc-bg-selected: var(--dc-brand-50);
  /* Pastel UI roles — selection, action, and accent use the same hue family
     at different weights (2024–26 soft-UI trend: muted surfaces, not one loud blue). */
  --dc-pastel-selected-bg: #e8f3fc;
  --dc-pastel-selected-border: #b9d7f2;
  --dc-pastel-selected-text: #2f6fa3;
  --dc-pastel-action-bg: #a9d2f4;
  --dc-pastel-action-bg-hover: #8fc3ef;
  --dc-pastel-action-bg-active: #7fbcec;
  --dc-pastel-action-text: #0f4a75;
  /* Object picker — light purple pastel (deactivate ramp); secondary to brand-blue
     merge CTAs so context switching reads as navigation, not primary action. */
  --dc-pastel-picker-bg: #c4b5e8;
  --dc-pastel-picker-bg-hover: #b5a4dc;
  --dc-pastel-picker-bg-active: #a894d4;
  --dc-pastel-picker-text: #4a3568;
  --dc-pastel-picker-border: #b39fd6;
  --dc-pastel-picker-border-hover: var(--dc-deactivate-500);
  --dc-pastel-stop-bg: #fde8d4;
  --dc-pastel-stop-text: #9a4e12;
  --dc-pastel-surface: #f6f9fc;
  --dc-fg-1: var(--dc-neutral-900);
  --dc-fg-2: var(--dc-neutral-600);
  --dc-fg-3: var(--dc-neutral-500);
  --dc-fg-link: var(--dc-brand-600);
  --dc-border-1: var(--dc-neutral-200);
  --dc-border-2: var(--dc-neutral-300);

  /* ---- Type ------------------------------------------------------------- */
  --dc-font-sans:
    "Salesforce Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dc-font-mono:
    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --dc-text-2xs: 11px;
  --dc-text-xs: 12px;
  --dc-text-sm: 13px;
  --dc-text-base: 14px;
  --dc-text-md: 15px;
  --dc-text-lg: 17px;
  --dc-text-xl: 20px;
  --dc-text-2xl: 24px;
  --dc-text-3xl: 30px;
  --dc-tracking-caps: 0.06em;

  /* ---- Radii / elevation / motion / layout ------------------------------ */
  --dc-radius-sm: 4px;
  --dc-radius-md: 6px;
  --dc-radius-lg: 8px;
  --dc-radius-xl: 12px;
  --dc-radius-pill: 999px;
  --dc-shadow-xs: 0 1px 1px rgba(26, 37, 51, 0.05);
  --dc-shadow-sm:
    0 1px 2px rgba(26, 37, 51, 0.08), 0 1px 1px rgba(26, 37, 51, 0.04);
  --dc-shadow-md:
    0 2px 6px rgba(26, 37, 51, 0.1), 0 1px 2px rgba(26, 37, 51, 0.06);
  --dc-shadow-lg:
    0 8px 24px rgba(26, 37, 51, 0.12), 0 2px 6px rgba(26, 37, 51, 0.06);
  --dc-shadow-xl:
    0 16px 48px rgba(26, 37, 51, 0.18), 0 4px 12px rgba(26, 37, 51, 0.08);
  --dc-shadow-focus: 0 0 0 3px rgba(43, 129, 206, 0.3);
  --dc-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dc-dur-fast: 120ms;
  --dc-dur-base: 180ms;
  --dc-container-max: 1320px;

  display: block;
  font-family: var(--dc-font-sans);
  color: var(--dc-fg-1);
}

/* ============================================================================
   LEDGER THEME — app-wide override layer
   The shell stamps data-dc-theme="ledger" onto its own host and every child
   custom element; because this module is @imported into every component, this
   selector re-skins whichever shadow root carries the attribute. Same Stratus
   identity, but denser and more instrument-like: a deeper cool canvas so white
   cards read as instruments, tighter corners, crisper hairlines, and mono-
   forward record IDs. Only alias/treatment tokens change — the brand ramp and
   semantic colors are untouched, so status meaning is preserved.
   ============================================================================ */
[data-dc-theme="ledger"] {
  --dc-bg-app: var(--dc-neutral-100);
  --dc-bg-sunken: var(--dc-neutral-50);
  --dc-border-1: var(--dc-neutral-300);
  --dc-radius-md: 4px;
  --dc-radius-lg: 6px;
  --dc-radius-xl: 8px;
}

/* Crisper table chrome: stronger header tint, mono-leaning rules. */
[data-dc-theme="ledger"] .dc-table thead th {
  background: var(--dc-neutral-50);
  letter-spacing: var(--dc-tracking-caps);
  color: var(--dc-fg-2);
}
[data-dc-theme="ledger"] .dc-cell-mono {
  color: var(--dc-brand-700);
}
/* Cards sit flatter against the deeper canvas; the hairline does the work. */
[data-dc-theme="ledger"] .dc-card {
  box-shadow: var(--dc-shadow-xs);
}

/* ============================================================================
   CLASSIC THEME — typeface layer
   Classic is the prototype-faithful look. The shell stamps
   data-dc-theme="classic" onto its host and every child, so this selector
   swaps in the self-hosted Hanken Grotesk (UI) + JetBrains Mono (record IDs)
   that the design system specifies. The @font-face rules live in the
   dcClassicFonts static resource and are injected at the document level via
   loadStyle ONLY when Classic is active (see dataCleanserApp.js). Ledger is
   untouched and keeps the Salesforce Sans fallback declared on :host.
   ============================================================================ */
[data-dc-theme="classic"] {
  --dc-font-sans:
    "Hanken Grotesk", "Salesforce Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --dc-font-mono:
    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* ---- Typography helpers -------------------------------------------------- */
.dc-h1 {
  font: 800 var(--dc-text-3xl)/1.15 var(--dc-font-sans);
  letter-spacing: -0.02em;
  color: var(--dc-fg-1);
  margin: 0;
}
.dc-h3 {
  font: 600 var(--dc-text-xl)/1.3 var(--dc-font-sans);
  color: var(--dc-fg-1);
  margin: 0;
}
.dc-body {
  font: 400 var(--dc-text-base)/1.5 var(--dc-font-sans);
  color: var(--dc-fg-1);
}
.dc-h2 {
  font: var(--dc-text-2xl)/1.3 var(--dc-font-sans);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--dc-fg-1);
  margin: 0;
}
.dc-h4 {
  font: var(--dc-text-lg)/1.3 var(--dc-font-sans);
  font-weight: 600;
  color: var(--dc-fg-1);
  margin: 0;
}
.dc-title {
  font: var(--dc-text-md)/1.3 var(--dc-font-sans);
  font-weight: 600;
  color: var(--dc-fg-1);
  margin: 0;
}
.dc-body-sm {
  font: var(--dc-text-sm)/1.5 var(--dc-font-sans);
  color: var(--dc-fg-2);
}
.dc-meta {
  font: var(--dc-text-xs)/1.4 var(--dc-font-sans);
  color: var(--dc-fg-3);
}
.dc-eyebrow {
  font: var(--dc-text-2xs)/1 var(--dc-font-sans);
  font-weight: 600;
  letter-spacing: var(--dc-tracking-caps);
  text-transform: uppercase;
  color: var(--dc-fg-3);
}
.dc-mono {
  font-family: var(--dc-font-mono);
}
.dc-link {
  color: var(--dc-fg-link);
  text-decoration: none;
  cursor: pointer;
}
.dc-link:hover {
  text-decoration: underline;
}

/* ---- Buttons ------------------------------------------------------------- */
.dc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  font: 600 var(--dc-text-sm)/1 var(--dc-font-sans);
  border-radius: var(--dc-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition:
    background var(--dc-dur-fast) var(--dc-ease),
    border-color var(--dc-dur-fast) var(--dc-ease),
    box-shadow var(--dc-dur-fast) var(--dc-ease);
}
.dc-btn:focus-visible {
  outline: none;
  box-shadow: var(--dc-shadow-focus);
}
.dc-btn-brand {
  background: var(--dc-brand-500);
  color: #fff;
}
.dc-btn-brand:hover {
  background: var(--dc-brand-600);
}
.dc-btn-brand:active {
  background: var(--dc-brand-700);
}

/* lightning-button variant=brand — Stratus primary blue (preview merge CTA). */
.dc-merge-actions,
.dc-merge-actions lightning-button,
.dc-merge-actions .dc-merge-cta,
.dc-merge-cta {
  --slds-c-button-brand-color-background: var(--dc-brand-500, #2b81ce);
  --slds-c-button-brand-color-background-hover: var(--dc-brand-600, #1a6fbe);
  --slds-c-button-brand-color-background-active: var(--dc-brand-700, #0f5aa0);
  --slds-c-button-brand-color-border: var(--dc-brand-500, #2b81ce);
  --slds-c-button-brand-color-border-hover: var(--dc-brand-600, #1a6fbe);
  --slds-c-button-brand-text-color: #ffffff;
}

.dc-btn-neutral {
  background: var(--dc-neutral-0);
  color: var(--dc-fg-1);
  border-color: var(--dc-border-2);
}
.dc-btn-neutral:hover {
  background: var(--dc-neutral-100);
}
.dc-btn-deactivate {
  background: var(--dc-deactivate-500);
  color: #fff;
  border-color: transparent;
}
.dc-btn-deactivate:hover {
  background: var(--dc-deactivate-600);
}
.dc-btn-deactivate:active {
  background: var(--dc-deactivate-700);
}
.dc-btn-outline {
  background: transparent;
  color: var(--dc-brand-600);
  border-color: var(--dc-brand-300);
}
.dc-btn-outline:hover {
  background: var(--dc-brand-50);
}
.dc-btn-destructive {
  background: var(--dc-error-500);
  color: #fff;
}
.dc-btn-destructive:hover {
  background: var(--dc-error-700);
}
.dc-btn-ghost {
  background: transparent;
  color: var(--dc-fg-2);
}
.dc-btn-ghost:hover {
  background: var(--dc-neutral-100);
  color: var(--dc-fg-1);
}
.dc-btn-text {
  background: transparent;
  color: var(--dc-brand-600);
  padding: 0 4px;
  height: auto;
}
.dc-btn-text:hover {
  text-decoration: underline;
}
.dc-btn[disabled],
.dc-btn.is-disabled {
  background: var(--dc-neutral-100);
  color: var(--dc-neutral-400);
  border-color: transparent;
  cursor: not-allowed;
  box-shadow: none;
}
.dc-btn-sm {
  height: 26px;
  padding: 0 10px;
  font-size: var(--dc-text-xs);
}
.dc-btn-lg {
  height: 40px;
  padding: 0 20px;
  font-size: var(--dc-text-base);
}
.dc-btn-icon {
  width: 32px;
  padding: 0;
}
.dc-btn-icon.dc-btn-sm {
  width: 26px;
}

/* ---- Badges -------------------------------------------------------------- */
.dc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  font: 600 var(--dc-text-xs)/1 var(--dc-font-sans);
  border-radius: var(--dc-radius-pill);
  border: 1px solid transparent;
}
.dc-badge .dc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}
.dc-badge-neutral {
  background: var(--dc-neutral-100);
  color: var(--dc-neutral-700);
}
.dc-badge-neutral .dc-dot {
  background: var(--dc-neutral-500);
}
.dc-badge-brand {
  background: var(--dc-brand-50);
  color: var(--dc-brand-700);
}
.dc-badge-brand .dc-dot {
  background: var(--dc-brand-500);
}
.dc-badge-success {
  background: var(--dc-success-50);
  color: var(--dc-success-700);
}
.dc-badge-success .dc-dot {
  background: var(--dc-success-500);
}
.dc-badge-warning {
  background: var(--dc-warning-50);
  color: var(--dc-warning-700);
}
.dc-badge-warning .dc-dot {
  background: var(--dc-warning-500);
}
.dc-badge-error {
  background: var(--dc-error-50);
  color: var(--dc-error-700);
}
.dc-badge-error .dc-dot {
  background: var(--dc-error-500);
}
.dc-count-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  font: 600 var(--dc-text-xs)/1 var(--dc-font-mono);
  background: var(--dc-brand-500);
  color: #fff;
  border-radius: var(--dc-radius-pill);
}

/* ---- Inputs -------------------------------------------------------------- */
.dc-input,
.dc-select {
  height: 34px;
  padding: 0 11px;
  font: 400 var(--dc-text-base)/1 var(--dc-font-sans);
  color: var(--dc-fg-1);
  background: var(--dc-neutral-0);
  border: 1px solid var(--dc-border-2);
  border-radius: var(--dc-radius-sm);
  transition:
    border-color var(--dc-dur-fast),
    box-shadow var(--dc-dur-fast);
}
.dc-input::placeholder {
  color: var(--dc-neutral-400);
}
.dc-input:focus,
.dc-select:focus {
  outline: none;
  border-color: var(--dc-brand-500);
  box-shadow: var(--dc-shadow-focus);
}

/* ---- Card ---------------------------------------------------------------- */
.dc-card {
  background: var(--dc-bg-surface);
  border: 1px solid var(--dc-border-1);
  border-radius: var(--dc-radius-lg);
  box-shadow: var(--dc-shadow-sm);
}
.dc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--dc-border-1);
}
.dc-card-body {
  padding: 18px;
}

/* ---- Data table ---------------------------------------------------------- */
.dc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--dc-text-sm);
}
.dc-table thead th {
  text-align: left;
  padding: 9px 14px;
  font: 600 var(--dc-text-xs)/1 var(--dc-font-sans);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--dc-fg-3);
  background: var(--dc-neutral-25);
  border-bottom: 1px solid var(--dc-border-1);
  white-space: nowrap;
}
.dc-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--dc-border-1);
  color: var(--dc-fg-1);
  vertical-align: middle;
}
.dc-table tbody tr:hover {
  background: var(--dc-bg-hover);
}
.dc-table tbody tr.is-selected {
  background: var(--dc-bg-selected);
}
.dc-cell-mono {
  font-family: var(--dc-font-mono);
  font-size: var(--dc-text-xs);
  color: var(--dc-fg-2);
}

/* ---- Shared page layout (used by every view) ----------------------------- */
.dc-page {
  padding: 22px;
  max-width: var(--dc-container-max);
  margin: 0 auto;
}
.dc-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
  gap: 16px;
  flex-wrap: wrap;
}
.dc-page-title {
  display: flex;
  gap: 14px;
  align-items: center;
}
/* Transparent icon slots — no background tile (matches scenario object filter pills). */
.dc-icon-slot,
.dc-page-glyph,
.dc-row-icon,
.dc-stat-icon,
.dc-modal-icon,
.dc-slds-card__icon,
.dcq-row-glyph,
.dc-wb-glyph,
.dcwb-l-glyph,
.dcwb-cross-glyph,
.dcwb-cross-tile-icon,
.dc-run-time-icon,
.dc-lead-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: none;
  border: none;
  box-shadow: none;
}

/* Utility object icons (e.g. cross-object link) lack the SLDS standard-icon tile. */
.dc-row-icon-tile {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--dc-brand-50);
}
.dc-row-icon-tile lightning-icon {
  --slds-c-icon-color-foreground-default: var(--dc-brand-600);
  /* Match standard object glyph scale inside the 24px tile. */
  --slds-c-icon-sizing-width: 0.875rem;
  --slds-c-icon-sizing-height: 0.875rem;
}
.dc-page-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.dc-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.dc-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.dc-muted {
  color: var(--dc-fg-2);
}
.dc-empty {
  padding: 28px;
  text-align: center;
  color: var(--dc-fg-3);
  font: 400 var(--dc-text-sm)/1.5 var(--dc-font-sans);
}
@media (max-width: 1080px) {
  .dc-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .dc-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* KPI stat cards (home, license). */
.dc-stat {
  padding: 16px;
}
.dc-stat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.dc-stat-value {
  font: 800 30px var(--dc-font-sans);
  letter-spacing: -0.02em;
  color: var(--dc-fg-1);
}
.dc-stat-sub {
  margin-top: 4px;
}

/* ---- Shared visual primitives (toggle / checkbox / radio / tile) ---------
   Additive classes used by the Classic views (groups, merge, prevention).
   They are not referenced by any existing Ledger markup, so adding them here
   leaves the Ledger theme rendering unchanged. -------------------------------*/
.dc-toggle {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: var(--dc-radius-pill);
  background: var(--dc-neutral-300);
  cursor: pointer;
  transition: background var(--dc-dur-base) var(--dc-ease);
  flex: none;
  border: none;
  padding: 0;
}
.dc-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--dc-shadow-sm);
  transition: transform var(--dc-dur-base) var(--dc-ease);
}
.dc-toggle.is-on {
  background: var(--dc-brand-500);
}
.dc-toggle.is-on::after {
  transform: translateX(16px);
}
.dc-toggle:focus-visible {
  outline: none;
  box-shadow: var(--dc-shadow-focus);
}

.dc-checkbox,
.dc-radio {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--dc-border-2);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  cursor: pointer;
  padding: 0;
  position: relative;
}
.dc-checkbox {
  border-radius: var(--dc-radius-xs, 3px);
  --slds-c-icon-color-foreground: #fff;
}
.dc-checkbox.is-on {
  background: var(--dc-brand-500);
  border-color: var(--dc-brand-500);
}
.dc-radio {
  border-radius: 50%;
}
.dc-radio.is-on {
  border-color: var(--dc-brand-500);
}
.dc-radio.is-on::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--dc-brand-500);
}
.dc-checkbox:focus-visible,
.dc-radio:focus-visible {
  outline: none;
  box-shadow: var(--dc-shadow-focus);
}

/* Standalone status dot (outside a badge). */
.dc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  display: inline-block;
}

/* Filter button groups (lightning-button-group + lightning-button) ----------
   Pastel selection on brand variant; neutral for inactive. Applied via
   dc-filter-group on the group and dc-filter-active / dc-filter-btn on buttons. */
.dc-filter-group .dc-filter-active {
  --slds-c-button-brand-color-background: var(--dc-pastel-selected-bg);
  --slds-c-button-brand-color-background-hover: #d4e9f8;
  --slds-c-button-brand-color-background-active: var(--dc-brand-100);
  --slds-c-button-brand-text-color: var(--dc-pastel-selected-text);
  --slds-c-button-brand-color-border: var(--dc-pastel-selected-border);
  --slds-c-button-brand-color-border-hover: var(--dc-brand-300);
  --slds-c-button-icon-color-foreground: var(--dc-pastel-selected-text);
}
.dc-filter-group .dc-filter-btn {
  --slds-c-button-neutral-color-background: var(--dc-neutral-0);
  --slds-c-button-neutral-color-background-hover: var(--dc-neutral-50);
  --slds-c-button-text-color: var(--dc-fg-2);
  --slds-c-button-icon-color-foreground: var(--dc-fg-2);
}
/* Legacy: utility cross-object icons in filter groups (unused since standard:data_transforms). */
.dc-filter-group .dc-filter-cross-icon {
  --sds-c-button-icon-size: 1rem;
  --slds-c-button-icon-size: 1rem;
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}