/* Unified front-end interaction states. Keep this stylesheet last. */
:root {
  --ui-state-accent: var(--accent, #72c9d8);
  --ui-state-text: var(--textPrimary, var(--text, #eef5fa));
  --ui-state-muted: var(--textSecondary, var(--text-2, #9babb9));
  --ui-state-line: color-mix(in srgb, var(--ui-state-accent) 42%, transparent);
  --ui-state-fill: color-mix(in srgb, var(--ui-state-accent) 11%, transparent);
  --ui-state-fill-strong: color-mix(in srgb, var(--ui-state-accent) 17%, transparent);
  --ui-state-ring: color-mix(in srgb, var(--ui-state-accent) 30%, transparent);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ui-state-ring) !important;
  outline-offset: 2px !important;
}

:where(input, select, textarea):focus {
  border-color: var(--ui-state-line) !important;
  box-shadow: 0 0 0 3px var(--ui-state-fill) !important;
}

:where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--ui-state-accent);
}

:where(
  .nav-category,
  .nav-action-btn,
  .quick-tag,
  .featured-chip,
  .featured-filter-pill,
  .collections-hero-tags button,
  .collections-filter-options button,
  .home-entry-card,
  .codex-theme-card
) {
  transition:
    color .18s ease,
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease,
    opacity .18s ease !important;
}

:where(
  .nav-category,
  .nav-action-btn,
  .quick-tag,
  .featured-chip,
  .featured-filter-pill,
  .collections-hero-tags button,
  .collections-filter-options button,
  .home-entry-card,
  .codex-theme-card
):hover {
  color: var(--ui-state-text) !important;
  border-color: var(--ui-state-line) !important;
  background: var(--ui-state-fill) !important;
  box-shadow: none !important;
  transform: none !important;
}

:where(
  .nav-category.active,
  .nav-category[aria-current="page"],
  .quick-tag.active,
  .featured-chip.active,
  .featured-filter-pill.active,
  .collections-hero-tags button.is-active,
  .collections-filter-options button.is-active,
  .home-entry-card.is-current,
  .home-entry-card[aria-current="page"],
  .codex-theme-card.is-active
) {
  color: var(--ui-state-text) !important;
  border-color: var(--ui-state-line) !important;
  background: var(--ui-state-fill-strong) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-state-accent) 8%, transparent) !important;
  transform: none !important;
}

.navbar-categories .nav-category {
  position: relative;
}

.navbar-categories .nav-category.active::after,
.navbar-categories .nav-category[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 12px !important;
  bottom: 4px !important;
  left: 12px !important;
  height: 2px !important;
  border-radius: 999px;
  background: var(--ui-state-accent) !important;
  box-shadow: none !important;
  opacity: .82;
  transform: scaleX(1) !important;
}

:where(
  .hero-dot-btn.active,
  .collections-hero-dots button.is-active,
  .featured-hero-dot.active
) {
  background: var(--ui-state-accent) !important;
  box-shadow: none !important;
}

:where(.hero-thumb.active, .hero-thumb:focus-visible) {
  border-color: var(--ui-state-line) !important;
  box-shadow: 0 0 0 2px var(--ui-state-fill) !important;
  transform: none !important;
}

.navbar-search:focus-within {
  border-color: var(--ui-state-line) !important;
  box-shadow: 0 0 0 3px var(--ui-state-fill) !important;
}

:where(
  .section-actions .btn,
  .resource-radar-btn,
  .movie-get-btn
):hover,
:where(
  .section-actions .btn,
  .resource-radar-btn,
  .movie-get-btn
):focus-visible {
  border-color: var(--ui-state-line) !important;
  background: var(--ui-state-fill) !important;
  box-shadow: none !important;
  transform: none !important;
}

.codex-theme-card.is-active {
  position: relative;
}

.codex-theme-card.is-active::after {
  content: "\5F53\524D";
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--ui-state-fill-strong);
  color: var(--ui-state-text);
  font-size: 10px;
  font-weight: 700;
}

/*
 * Specificity shield for legacy page styles. Several historical stylesheets
 * still use body-scoped !important rules, so final states must be explicit.
 */
html body :is(
  .navbar-categories,
  .main-nav,
  .pc-nav,
  .nav-menu
) :is(.nav-category, .nav-item, a).active,
html body :is(
  .navbar-categories,
  .main-nav,
  .pc-nav,
  .nav-menu
) :is(.nav-category, .nav-item, a).is-active,
html body .navbar-categories .nav-category[aria-current="page"] {
  color: var(--ui-state-text) !important;
  border-color: var(--ui-state-line) !important;
  background: var(--ui-state-fill-strong) !important;
  box-shadow: none !important;
  transform: none !important;
}

html body :is(
  .channel-tags,
  .featured-hero-tags,
  .collections-hero-tags,
  .secondary-tags,
  .page-tags,
  .movie-channel-hero-tags
) :is(.active, .is-active),
html body :is(
  .featured-chip,
  .featured-filter-pill,
  .quick-tag,
  .collections-filter-options button,
  .collections-hero-tags button
):is(.active, .is-active, [aria-selected="true"]),
html body :is(
  .home-entry-card,
  .codex-theme-card,
  .collections-discovery-card,
  .search-experience-result
):is(.is-current, .is-active, [aria-current="page"], [aria-selected="true"]) {
  color: var(--ui-state-text) !important;
  border-color: var(--ui-state-line) !important;
  background: var(--ui-state-fill-strong) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-state-accent) 8%, transparent) !important;
  transform: none !important;
}

html body :is(
  .featured-chip,
  .featured-filter-pill,
  .quick-tag,
  .collections-filter-options button,
  .collections-hero-tags button,
  .home-entry-card,
  .collections-discovery-card,
  .codex-theme-card
):hover {
  color: var(--ui-state-text) !important;
  border-color: var(--ui-state-line) !important;
  background: var(--ui-state-fill) !important;
  box-shadow: none !important;
  transform: none !important;
}

html body :is(
  .hero-dot,
  .hero-dot-btn,
  .featured-hero-dot,
  .collections-hero-dots button,
  .explore-column-dots span
):is(.active, .is-active) {
  background: var(--ui-state-accent) !important;
  box-shadow: none !important;
}

html body :is(.hero-thumb, .collections-hero-channel-clone .hero-thumb):is(.active, .is-active) {
  border-color: var(--ui-state-line) !important;
  box-shadow: 0 0 0 2px var(--ui-state-fill) !important;
  transform: none !important;
}

html body .navbar-search:focus-within,
html body :is(input, select, textarea):focus {
  border-color: var(--ui-state-line) !important;
  box-shadow: 0 0 0 3px var(--ui-state-fill) !important;
}

@media (prefers-reduced-motion: reduce) {
  :where(a, button, input, select, textarea, [tabindex]) {
    transition-duration: .01ms !important;
  }
}