/*
  render-greyscale-skeleton.css — the default Render layer
  token map aligned to BU-CORE-UIUX-001 §4.1, 2026-07-03
  ===========================================================================
  Fires when no data-theme is set, when a skin fails to load, or when the
  skeleton skin is explicitly selected (D-TPL-SHIP-03). This is the required
  default state of a freshly scaffolded application, not an error condition.

  Token law (D-TPL-PLUMB-02 / D-TPL-TOK-03): every custom property here uses
  the --theme- prefix exclusively. No --bu- or --vd- prefix appears anywhere
  in this file (those prefixes are retired; see Rules/DeprecatedTerms.md).
  This is the ONLY file in the template permitted to contain color literals
  (hex values) — see D-TPL-TOK-03.

  Complete-assignment-or-refuse (D-TPL-TOK-02): every semantic token category
  is assigned here — surfaces, text roles, interactive states, feedback
  colors, elevation/glass effects, spacing/typography scale. No partial
  assignment.

  LIGHT default (revised, this session): the owner's approved reference
  render (BeltUp Online, legacy-v1 branch, bu-skin-skeleton.css — the
  "ironed-out" skeleton verified live at the owner's own localhost:5087) uses
  a clean white/light-grey palette, not the dark palette this file shipped
  previously. Values below are that reference's token values, translated
  from its --bu-* namespace to --theme-* (names are law; values are the
  data ported in): --bu-bg-app #f4f4f4 -> --theme-bg-canvas; --bu-surface-slab
  #ffffff -> --theme-bg-surface; --bu-border-base #dddddd -> --theme-border-inactive;
  --bu-text-main #222222 -> --theme-text-main; --bu-text-muted #666666
  -> --theme-x-text-secondary/--theme-text-muted; --bu-status-active #222222
  (high-contrast ink, not a hue) -> --theme-accent-primary. The reference's dark
  "stress test" override block (.skin-dojo-dark) and its Fight Night token
  pair are harvested as SKIN DATA for a future dark/brand render, NOT
  shipped as any default here — see BUP-SRS-001-S07 revision log.

  Selector scope note: the data-theme attribute is set on the document root
  element (<html>) in App.razor, so these rules key off :root[data-theme=...]
  directly — matching CSS :root semantics (the html element). Do not move
  data-theme onto a nested element; :root will not match a descendant.
  ===========================================================================
*/

:root[data-theme="greyscale"] {
  /* --- Surfaces ---------------------------------------------------------- */
  --theme-bg-canvas: #f4f4f4;
  --theme-bg-surface: #ffffff;
  --theme-bg-frosted: var(--theme-bg-surface); /* alias — dialect has no distinct frosted-fill token; §4.1 requires this name, value derived from bg-surface */
  --theme-bg-card: #ffffff;
  --theme-x-bg-sunken: #f4f4f4;
  --theme-border-inactive: #dddddd;
  --theme-border-active: #222222;

  /* --- Text roles ---------------------------------------------------------
     --theme-text-muted contrast against --theme-bg-canvas MUST be >= 4.5:1. */
  --theme-text-main: #222222;
  --theme-x-text-secondary: #444444;
  --theme-text-muted: #666666;
  --theme-x-text-inverse: #ffffff;
  --theme-x-text-disabled: #999999;

  /* --- Interactive states -------------------------------------------------
     --theme-accent-primary is for interactive highlights only — never body text.
     High-contrast ink (not a hue) per the reference's --bu-status-active. */
  --theme-accent-primary: #222222;
  --theme-accent-secondary: var(--theme-accent-primary); /* alias — no distinct secondary accent hue exists in sources; §4.1 requires this name */
  --theme-x-accent-hover: #000000;
  --theme-x-accent-active: #444444;
  --theme-x-accent-disabled: #999999;
  --theme-x-accent-text: #ffffff;
  --theme-x-focus-ring: #222222;

  /* --- Feedback colors ----------------------------------------------------
     Greyscale skeleton expresses feedback states as distinct greys only;
     brand skins assign true color here. */
  --theme-state-healthy: #444444;
  --theme-state-warning: #666666;
  --theme-state-error: #222222;
  --theme-x-state-info: #666666;

  /* --- Elevation / glass effects ------------------------------------------ */
  --theme-x-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.08);
  --theme-x-elevation-2: 0 2px 8px rgba(0, 0, 0, 0.1);
  --theme-x-elevation-3: 0 8px 24px rgba(0, 0, 0, 0.14);
  --theme-accent-glow: 0 8px 24px rgba(0, 0, 0, 0.14); /* derived — same glow value as --theme-x-elevation-3 (measured/authored glow shadow); §4.1 requires this name */
  --theme-accent-glow-secondary: 0 8px 24px rgba(0, 0, 0, 0.14); /* derived — no distinct secondary glow exists in sources; aliased to primary glow value */
  --theme-x-glass-tint: rgba(255, 255, 255, 0.85);
  --theme-backdrop-blur: 10px;

  /* --- Spacing / typography scale ----------------------------------------
     Structural sizing already lives in the Primer as structural tokens; this
     scale exists so a Render layer can express type-role sizing without
     ever touching the Primer's structural values. */
  --theme-x-font-family-base: system-ui, sans-serif;
  --theme-x-font-size-sm: 0.875rem;
  --theme-x-font-size-base: 1rem;
  --theme-x-font-size-lg: 1.25rem;
  --theme-x-font-size-xl: 1.75rem;
  --theme-x-line-height-base: 1.5;
  --theme-x-space-unit: 0.5rem;
}

/* Applies the token set to the page. Structural rules remain in the Primer;
   this block only assigns appearance via the tokens above. */
:root[data-theme="greyscale"] body {
  background-color: var(--theme-bg-canvas);
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] a {
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] h1,
:root[data-theme="greyscale"] h2,
:root[data-theme="greyscale"] h3,
:root[data-theme="greyscale"] h4,
:root[data-theme="greyscale"] h5,
:root[data-theme="greyscale"] h6 {
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] p,
:root[data-theme="greyscale"] li {
  color: var(--theme-x-text-secondary);
}

:root[data-theme="greyscale"] .bu-panel {
  background-color: var(--theme-bg-surface);
  border: 1px solid var(--theme-border-inactive);
  box-shadow: var(--theme-x-elevation-1);
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-rail {
  background-color: var(--theme-x-glass-tint);
  backdrop-filter: blur(var(--theme-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--theme-backdrop-blur));
  border-bottom: 1px solid var(--theme-border-inactive);
  color: var(--theme-text-main);
}

/* .bu-soffit doubles as the page footer region (harvested pattern: two-column
   footer — primary label left, secondary/utility link right). */
:root[data-theme="greyscale"] .bu-soffit {
  border-top: 1px solid var(--theme-border-inactive);
  color: var(--theme-text-muted);
  font-size: var(--structure-text-sm, 0.875rem);
}

:root[data-theme="greyscale"] .bu-soffit a {
  color: var(--theme-text-muted);
}

:root[data-theme="greyscale"] .bu-soffit a:hover {
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-brick {
  color: var(--theme-x-text-secondary);
}

:root[data-theme="greyscale"] .bu-hero-label,
:root[data-theme="greyscale"] .bu-hero-lede {
  color: var(--theme-text-muted);
}

:root[data-theme="greyscale"] .bu-hero-headline {
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-metric {
  background-color: var(--theme-x-bg-sunken);
  border: 1px solid var(--theme-border-inactive);
}

:root[data-theme="greyscale"] .bu-metric-value {
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-metric-label {
  color: var(--theme-text-muted);
}

:root[data-theme="greyscale"] .bu-transom {
  background-color: var(--theme-border-inactive);
}

:root[data-theme="greyscale"] .bu-mullion {
  background-color: var(--theme-border-inactive);
}

:root[data-theme="greyscale"] .bu-control {
  background-color: var(--theme-bg-surface);
  border-color: var(--theme-border-active);
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-control:hover {
  background-color: var(--theme-x-accent-hover);
  color: var(--theme-x-text-inverse);
}

:root[data-theme="greyscale"] .bu-control:focus-visible {
  outline: 2px solid var(--theme-x-focus-ring);
  outline-offset: 2px;
}

/* --- Nav -------------------------------------------------------------------
   Fixed header, logo left, link row centered, CTA action right — harvested
   pattern (owner's reference, verified live at localhost:5087). */
:root[data-theme="greyscale"] .bu-nav-brand {
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-nav-links a {
  color: var(--theme-x-text-secondary);
}

:root[data-theme="greyscale"] .bu-nav-links a:hover,
:root[data-theme="greyscale"] .bu-nav-links a.active {
  color: var(--theme-text-main);
}

/* --- Buttons ---------------------------------------------------------------
   .bu-btn = primary solid, high-contrast. .bu-btn-secondary = bordered,
   transparent fill (BENTO-CORE button inventory). */
:root[data-theme="greyscale"] .bu-btn {
  background-color: var(--theme-accent-primary);
  border-color: var(--theme-accent-primary);
  color: var(--theme-x-accent-text);
}

:root[data-theme="greyscale"] .bu-btn:hover {
  background-color: var(--theme-x-accent-hover);
  border-color: var(--theme-x-accent-hover);
}

:root[data-theme="greyscale"] .bu-btn:disabled {
  background-color: var(--theme-x-accent-disabled);
  border-color: var(--theme-x-accent-disabled);
  color: var(--theme-x-text-disabled);
}

:root[data-theme="greyscale"] .bu-btn-secondary {
  background-color: transparent;
  border-color: var(--theme-border-active);
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-btn-secondary:hover {
  border-color: var(--theme-x-accent-hover);
  color: var(--theme-x-accent-hover);
}

:root[data-theme="greyscale"] .bu-btn:focus-visible,
:root[data-theme="greyscale"] .bu-btn-secondary:focus-visible {
  outline: 2px solid var(--theme-x-focus-ring);
  outline-offset: 2px;
}

/* --- Forms ------------------------------------------------------------------ */
:root[data-theme="greyscale"] .bu-field label {
  color: var(--theme-x-text-secondary);
}

:root[data-theme="greyscale"] .bu-field input[type="text"],
:root[data-theme="greyscale"] .bu-field input[type="email"],
:root[data-theme="greyscale"] .bu-field input[type="tel"],
:root[data-theme="greyscale"] .bu-field input[type="password"],
:root[data-theme="greyscale"] .bu-field input[type="number"],
:root[data-theme="greyscale"] .bu-field select,
:root[data-theme="greyscale"] .bu-field textarea,
:root[data-theme="greyscale"] input.bu-input,
:root[data-theme="greyscale"] select.bu-input,
:root[data-theme="greyscale"] textarea.bu-input {
  background-color: var(--theme-bg-surface);
  border-color: var(--theme-border-inactive);
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-field input:focus-visible,
:root[data-theme="greyscale"] .bu-field select:focus-visible,
:root[data-theme="greyscale"] .bu-field textarea:focus-visible,
:root[data-theme="greyscale"] .bu-input:focus-visible {
  outline: 2px solid var(--theme-x-focus-ring);
  outline-offset: 1px;
  border-color: var(--theme-accent-primary);
}

:root[data-theme="greyscale"] .bu-field-error {
  color: var(--theme-state-error);
}

:root[data-theme="greyscale"] .bu-gate {
  background-color: var(--theme-x-glass-tint);
  backdrop-filter: blur(var(--theme-backdrop-blur));
}

/* ===========================================================================
   HARVESTED COMPONENT COLORS — appearance for the reference-skeleton shapes
   added to the Primer this session. Tokens only; shapes live in the Primer.
   =========================================================================== */

:root[data-theme="greyscale"] .bu-text-muted {
  color: var(--theme-text-muted);
}

:root[data-theme="greyscale"] .bu-panel-title,
:root[data-theme="greyscale"] .bu-corner-title,
:root[data-theme="greyscale"] .bu-command-title,
:root[data-theme="greyscale"] .bu-section-heading,
:root[data-theme="greyscale"] .bu-panel-headline,
:root[data-theme="greyscale"] .bu-media-title,
:root[data-theme="greyscale"] .bu-pillar-title {
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-panel-sublabel,
:root[data-theme="greyscale"] .bu-command-label,
:root[data-theme="greyscale"] .bu-panel-footnote,
:root[data-theme="greyscale"] .bu-media-label,
:root[data-theme="greyscale"] .bu-pillar-label,
:root[data-theme="greyscale"] .bu-corner-label,
:root[data-theme="greyscale"] .bu-gauge-label {
  color: var(--theme-text-muted);
}

:root[data-theme="greyscale"] .bu-pillar-body,
:root[data-theme="greyscale"] .bu-corner-body,
:root[data-theme="greyscale"] .bu-media-lede {
  color: var(--theme-text-muted);
}

:root[data-theme="greyscale"] .bu-gauge-value {
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-gauge svg .bg {
  stroke: var(--theme-border-inactive);
}

:root[data-theme="greyscale"] .bu-gauge svg .fg {
  stroke: var(--theme-accent-primary);
}

:root[data-theme="greyscale"] .bu-progress-track {
  background-color: var(--theme-border-inactive);
}

:root[data-theme="greyscale"] .bu-track-hard {
  background-color: var(--theme-accent-primary);
}

:root[data-theme="greyscale"] .bu-media-frame {
  background-color: var(--theme-x-bg-sunken);
  border: 1px solid var(--theme-border-inactive);
}

:root[data-theme="greyscale"] .bu-play-circle {
  background-color: var(--theme-bg-surface);
  border: 1px solid var(--theme-accent-primary);
}

:root[data-theme="greyscale"] .bu-play-icon {
  fill: var(--theme-accent-primary);
}

:root[data-theme="greyscale"] .bu-badge-tag {
  background-color: var(--theme-x-bg-sunken);
  border: 1px solid var(--theme-border-inactive);
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-metric-cell-bordered {
  border-left: 1px solid var(--theme-border-inactive);
  border-right: 1px solid var(--theme-border-inactive);
}

@media (max-width: 720px) {
  :root[data-theme="greyscale"] .bu-metric-cell-bordered {
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--theme-border-inactive);
    border-bottom: 1px solid var(--theme-border-inactive);
  }
}

:root[data-theme="greyscale"] .bu-slat {
  background-color: var(--theme-x-bg-sunken);
  border: 1px solid var(--theme-border-inactive);
  border-radius: 4px;
}

:root[data-theme="greyscale"] .bu-slat-level {
  color: var(--theme-accent-primary);
}

:root[data-theme="greyscale"] .bu-slat-info p {
  color: var(--theme-text-muted);
}

:root[data-theme="greyscale"] .bu-status-dot {
  background-color: var(--theme-text-muted);
}

:root[data-theme="greyscale"] .bu-status-dot.is-active {
  background-color: var(--theme-state-healthy);
  box-shadow: 0 0 8px var(--theme-state-healthy);
}

:root[data-theme="greyscale"] .bu-status-dot.is-alert {
  background-color: var(--theme-state-error);
  box-shadow: 0 0 8px var(--theme-state-error);
}

/* -----------------------------------------------------------------------
   Retention panel glow-ring states (GROUP 8 Command Center, E29/E31
   luminosity law: red vibration = churn risk). Reuses the existing
   .bu-status-dot shape with four semantic states mapped from
   RetentionPanelLogic.DecideChipVariant: healthy (LOW), warning (MEDIUM),
   error (HIGH/CRITICAL — same danger token + pulse as .is-alert), and
   neutral (INSUFFICIENT_DATA or any unrecognized state — honest fail-safe,
   never colored as healthy).
   ----------------------------------------------------------------------- */
:root[data-theme="greyscale"] .bu-status-dot.is-healthy {
  background-color: var(--theme-state-healthy);
  box-shadow: 0 0 8px var(--theme-state-healthy);
}

:root[data-theme="greyscale"] .bu-status-dot.is-warning {
  background-color: var(--theme-state-warning);
  box-shadow: 0 0 8px var(--theme-state-warning);
}

:root[data-theme="greyscale"] .bu-status-dot.is-error {
  background-color: var(--theme-state-error);
  box-shadow: 0 0 8px var(--theme-state-error);
}

:root[data-theme="greyscale"] .bu-status-dot.is-neutral {
  background-color: var(--theme-text-muted);
}

:root[data-theme="greyscale"] .bu-heatmap-cell {
  background-color: var(--theme-x-bg-sunken);
  border: 1px solid var(--theme-border-inactive);
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-link-stealth {
  color: var(--theme-text-muted);
}

:root[data-theme="greyscale"] .bu-link-stealth:hover {
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-nav-brand span {
  color: var(--theme-accent-primary);
}

:root[data-theme="greyscale"] .bu-footer {
  border-top: 2px solid var(--theme-border-inactive);
  background-color: var(--theme-bg-surface);
}

:root[data-theme="greyscale"] .bu-footer-heading {
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-footer-copyright {
  border-top: 1px solid var(--theme-border-inactive);
  color: var(--theme-text-muted);
}

:root[data-theme="greyscale"] .bu-footer-lab-link {
  color: var(--theme-text-muted);
}

/* -----------------------------------------------------------------------
   .bu-nag-warning — R-S7-15 paperwork-compliance nag appearance. Warning
   semantics via --theme-state-warning (not --theme-state-error): mildly annoying, not
   an error — nothing this banner shows ever blocks an action.
   ----------------------------------------------------------------------- */
:root[data-theme="greyscale"] .bu-nag-warning {
  background-color: var(--theme-x-bg-sunken);
  border: 1px solid var(--theme-state-warning);
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-nag-warning .bu-nag-icon {
  background-color: var(--theme-state-warning);
  color: var(--theme-x-text-inverse);
}

/* -----------------------------------------------------------------------
   KITCHEN SINK COMPONENT COLORS — restored per owner order 2026-07-03.
   Same semantics as the cobalt-dark render's kitchen-sink block: neutral =
   accent family; danger = error state; mastery = healthy state (reuses
   --theme-state-healthy, the same token .bu-status-dot.is-healthy uses).
   ----------------------------------------------------------------------- */
:root[data-theme="greyscale"] .bu-badge {
  background-color: var(--theme-x-bg-sunken);
  border-color: var(--theme-border-inactive);
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-badge.danger {
  border-color: var(--theme-state-error);
  color: var(--theme-state-error);
}

:root[data-theme="greyscale"] .bu-badge.mastery {
  border-color: var(--theme-state-healthy);
  color: var(--theme-state-healthy);
}

/* .warning uses the §3.7 functional --state-warning token directly (bento-
   grid.css), not a --theme-* render token — this badge state must stay
   orange even when the greyscale skin overrides --theme-state-warning to a
   grey, per the owner's "keep semantic state colors" instruction. */
.bu-badge.warning {
  border-color: var(--state-warning);
  color: var(--state-warning);
}

:root[data-theme="greyscale"] .bu-alert {
  background-color: var(--theme-x-bg-sunken);
  border-color: var(--theme-border-inactive);
  border-left-color: var(--theme-accent-primary);
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-alert.danger {
  border-left-color: var(--theme-state-error);
}

:root[data-theme="greyscale"] .bu-table th,
:root[data-theme="greyscale"] .bu-table td {
  border-bottom-color: var(--theme-border-inactive);
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-node-svg polygon {
  stroke: var(--theme-accent-primary);
}

/* =========================================================================
   COMMAND CONSOLE BENTO PASS — greyscale-skeleton appearance for the
   universal header, bridge chips, tab rails, and slide-out well. Mirrors
   render-cobalt-dark.css's selector list 1:1 (D-S07-SKIN-02: no partial-skin
   fallthrough) — same shapes, this skin's light/grey token values.
   ========================================================================= */

:root[data-theme="greyscale"] .bu-console-header {
  border-bottom: 1px solid var(--theme-border-inactive);
  background-color: var(--theme-x-glass-tint);
  backdrop-filter: blur(var(--theme-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--theme-backdrop-blur));
}

:root[data-theme="greyscale"] .bu-console-header-entity {
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-bridge-chip .bu-metric-label {
  color: var(--theme-text-muted);
}

:root[data-theme="greyscale"] .bu-tab-btn {
  background-color: var(--theme-bg-surface);
  border-color: var(--theme-border-inactive);
  color: var(--theme-x-text-secondary);
}

:root[data-theme="greyscale"] .bu-tab-btn:hover:not(:disabled) {
  border-color: var(--theme-border-active);
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-tab-btn.is-active {
  background-color: var(--theme-accent-primary);
  border-color: var(--theme-accent-primary);
  color: var(--theme-x-accent-text);
}

:root[data-theme="greyscale"] .bu-tab-btn:disabled {
  background-color: var(--theme-x-bg-sunken);
  border-color: var(--theme-border-inactive);
  color: var(--theme-x-text-disabled);
}

:root[data-theme="greyscale"] .bu-slideout-placeholder {
  background-color: var(--theme-bg-surface);
  border: 1px solid var(--theme-border-inactive);
}

:root[data-theme="greyscale"] .bu-slideout-content {
  background-color: var(--theme-bg-surface);
  border: 1px solid var(--theme-border-inactive);
  box-shadow: var(--theme-x-elevation-1);
}

:root[data-theme="greyscale"] .bu-slideout-title {
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .bu-slideout-close {
  background-color: transparent;
  border-color: var(--theme-border-inactive);
  color: var(--theme-text-muted);
}

:root[data-theme="greyscale"] .bu-slideout-close:hover {
  border-color: var(--theme-state-error);
  color: var(--theme-state-error);
}

:root[data-theme="greyscale"] .bu-motion-toggle {
  color: var(--theme-text-muted);
}

/* --- Gate overlay (added 2026-08-21) — mirrors .bu-drawer's own tokens ---- */
:root[data-theme="greyscale"] .cc-gate-notice {
  background-color: rgba(34, 34, 34, 0.4);
}

:root[data-theme="greyscale"] .cc-upgrade-card {
  background-color: var(--theme-bg-surface);
  border: 1px solid var(--theme-border-active);
  box-shadow: var(--theme-x-elevation-2);
  color: var(--theme-text-main);
}

:root[data-theme="greyscale"] .cc-upgrade-card p {
  color: var(--theme-text-muted);
}

:root[data-theme="greyscale"] .cc-upgrade-dismiss {
  color: var(--theme-text-muted);
}

:root[data-theme="greyscale"] .cc-upgrade-dismiss:hover {
  color: var(--theme-text-main);
}

/* =========================================================================
   INTERNAL ADMIN HUB (Internal.razor) — card-grid greyscale appearance.
   Mirrors render-cobalt-dark.css's coverage for the same classes (D-S07-
   SKIN-02: no partial skin fallthrough). Cards reuse .bu-panel's existing
   surface/border/shadow; only hover lift + Gap-card dimmed variant added.
   ========================================================================= */
:root[data-theme="greyscale"] .adm-hub-card:hover {
  border-color: var(--theme-border-active);
  box-shadow: var(--theme-x-elevation-2);
}

:root[data-theme="greyscale"] .adm-hub-card--gap {
  background-color: var(--theme-x-bg-sunken);
  border-color: var(--theme-border-inactive);
}

:root[data-theme="greyscale"] .adm-hub-card--gap:hover {
  border-color: var(--theme-border-inactive);
  box-shadow: none;
}

:root[data-theme="greyscale"] .adm-hub-card-head strong {
  color: var(--theme-text-main);
}