/* ==========================================================================
   Cross-Kernel Compatibility Layer
   Use capability classes only: no business component selectors
   ========================================================================== */

/* CSS variables fallback tokens */
.compat-text-main {
  color: #222222;
  color: var(--color-text, #222222);
}

.compat-text-sub {
  color: #7c7e82;
  color: var(--color-text-secondary, #7c7e82);
}

.compat-bg-surface {
  background: #ffffff;
  background: var(--color-surface, #ffffff);
}

.compat-bg-muted {
  background: #f9fafb;
  background: var(--color-muted-surface, #f9fafb);
}

/* Sticky fallback */
.compat-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

body.compat-has-sticky {
  padding-top: 80px;
}

body.compat-has-sticky.page-home {
  padding-top: 0;
}

/* @supports ((position: sticky) or (position: -webkit-sticky)) {
  .compat-sticky {
    position: -webkit-sticky;
    position: sticky;
    left: auto;
    right: auto;
  }

  body.compat-has-sticky {
    padding-top: 0;
  }
} */

/* Grid fallback */
.compat-grid {
  display: block;
}

.compat-grid > * {
  margin-bottom: 16px;
}

@supports (display: grid) {
  .compat-grid {
    display: grid;
  }

  .compat-grid > * {
    margin-bottom: 0;
  }
}

/* Flex fallback */
.compat-flex {
  display: block;
}

@supports (display: flex) {
  .compat-flex {
    display: flex;
  }
}

/* Transform hover fallback */
.compat-transform-hover {
  transform: none;
}

@supports (transform: translateY(-1px)) {
  .compat-transform-hover:hover {
    transform: translateY(var(--compat-transform-y, 0));
  }
}

/* clip-path scaffold */
.compat-clip-path {
  overflow: hidden;
}

@supports (clip-path: inset(0)) {
  .compat-clip-path {
    clip-path: inset(0);
  }
}