/* HOSTREND GLOBAL HOVER & LOADING SYSTEM v1.3
   Hover effects are opt-in through reusable classes only. Components must not
   create separate hover color/indicator effects for links or labels. */
:root {
  --hover-duration: 180ms;
  --hover-easing: cubic-bezier(.2,.75,.25,1);
  --hover-radius: 10px;
  --hover-padding-block: 5px;
  --hover-padding-inline: 9px;
  --hover-surface: color-mix(in srgb, var(--color-primary, #2119FF) 7%, #FFFFFF);
  --hover-surface-strong: color-mix(in srgb, var(--color-primary, #2119FF) 11%, #FFFFFF);
  --hover-glass-surface: linear-gradient(135deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.085) 100%);
  --hover-glass-blur: 12px;
  --hover-glass-persistent-border: rgba(255,255,255,.38);
  --hover-glass-persistent-shadow: 0 8px 32px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.46), inset 0 -1px 0 rgba(255,255,255,.12), inset 0 0 18px 2px rgba(255,255,255,.08);
  --loading-base: #EEF0F5;
  --loading-highlight: #FAFBFF;
  --loading-duration: 1400ms;
}

/* One shared contract. The selected variant controls only the hover surface;
   normal text and icon colors remain those supplied by the component. */
.host-hoverable {
  border-radius: var(--hover-radius);
  transition: background var(--hover-duration) var(--hover-easing),
              background-color var(--hover-duration) var(--hover-easing),
              -webkit-backdrop-filter var(--hover-duration) var(--hover-easing),
              backdrop-filter var(--hover-duration) var(--hover-easing),
              opacity var(--hover-duration) var(--hover-easing),
              transform var(--hover-duration) var(--hover-easing);
}

.host-hoverable--surface-only:not(.is-active):hover,
.host-hoverable--surface-only:not(.is-active):focus-visible {
  background: var(--hover-surface) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Glassmorphism variant for navigation sitting on saturated/colored surfaces.
   No text-color change, no white opaque pill, no border or shadow. */
.host-hoverable--glass {
  border-radius: var(--hover-radius);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.host-hoverable--glass:hover,
.host-hoverable--glass:focus-visible,
.host-hoverable--glass[aria-expanded="true"] {
  background: var(--hover-glass-surface) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(var(--hover-glass-blur)) saturate(155%) !important;
  backdrop-filter: blur(var(--hover-glass-blur)) saturate(155%) !important;
  text-decoration: none !important;
}
.host-hoverable--glass.hr-navigation__link,
.host-hoverable--glass.hr-navigation__trigger {
  padding-inline: calc(var(--navigation-item-padding-inline, 12px) + 4px) !important;
}
.host-hoverable--surface-only:focus-visible {
  outline: 2px solid var(--color-primary, #2119FF);
  outline-offset: 3px;
}
.hr-navigation .host-hoverable--glass:focus-visible {
  outline: 2px solid rgba(255,255,255,.78);
  outline-offset: 3px;
}

/* Loading/skeleton primitives: opt-in with .host-skeleton or [data-host-loading]. */

.host-skeleton,
[data-host-loading="true"] .host-skeleton {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md, 10px);
  background: var(--loading-base);
  color: transparent !important;
  isolation: isolate;
}
.host-skeleton::after,
[data-host-loading="true"] .host-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-105%);
  background: linear-gradient(100deg, transparent 20%, var(--loading-highlight) 48%, transparent 75%);
  animation: host-global-skeleton-shimmer var(--loading-duration) ease-in-out infinite;
  pointer-events: none;
}
.host-skeleton--text { height: 12px; width: 100%; }
.host-skeleton--title { height: 24px; width: min(68%, 360px); }
.host-skeleton--avatar { width: 44px; height: 44px; border-radius: 50%; }
.host-skeleton--media { width: 100%; aspect-ratio: 16 / 9; }
.host-skeleton--button { width: 128px; height: 42px; border-radius: var(--button-radius, 12px); }
@keyframes host-global-skeleton-shimmer { to { transform: translateX(105%); } }

/* True black theme support for the reusable variants. */
html[data-theme="dark"] {
  --hover-surface: rgba(255,255,255,.09);
  --hover-surface-strong: rgba(255,255,255,.13);
  --hover-glass-surface: linear-gradient(135deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.075) 100%);
  --loading-base: #171717;
  --loading-highlight: #292929;
}
html[data-theme="dark"] .host-hoverable--surface-only:not(.is-active):hover,
html[data-theme="dark"] .host-hoverable--surface-only:not(.is-active):focus-visible {
  background: rgba(255,255,255,.09) !important;
}
html[data-theme="dark"] .host-hoverable--glass:hover,
html[data-theme="dark"] .host-hoverable--glass:focus-visible,
html[data-theme="dark"] .host-hoverable--glass[aria-expanded="true"] {
  background: linear-gradient(135deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.075) 100%) !important;
}

/* Persistent-glass modifier: keep the approved glass hover appearance in the idle state too.
   Intended for compact glass badges; the normal and hover surfaces remain visually consistent. */
.host-hoverable--glass.host-hoverable--glass-persistent,
.host-hoverable--glass.host-hoverable--glass-persistent:hover,
.host-hoverable--glass.host-hoverable--glass-persistent:focus-visible,
.host-hoverable--glass.host-hoverable--glass-persistent[aria-expanded="true"],
.host-hoverable--glass.host-hoverable--glass-persistent:active {
  background: var(--hover-glass-surface) !important;
  border-color: var(--hover-glass-persistent-border, rgba(255,255,255,.38)) !important;
  box-shadow: var(--hover-glass-persistent-shadow, 0 8px 32px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.46)) !important;
  -webkit-backdrop-filter: blur(var(--hover-glass-blur, 12px)) saturate(155%) !important;
  backdrop-filter: blur(var(--hover-glass-blur, 12px)) saturate(155%) !important;
  transform: none !important;
  text-decoration: none !important;
}

/* Optional contrast-text behavior for explicitly opted-in header controls.
   The hover surface still comes from the reusable variants above. */
.host-hoverable[data-hover-text-color="contrast"]:hover,
.host-hoverable[data-hover-text-color="contrast"]:focus-visible,
.host-hoverable[data-hover-text-color="contrast"][aria-expanded="true"] {
  color: #000000 !important;
}
/* Opt-in stable black hover text for components that stay on a white surface in every theme. */
.host-hoverable[data-hover-text-color="dark"]:hover,
.host-hoverable[data-hover-text-color="dark"]:focus-visible,
.host-hoverable[data-hover-text-color="dark"][aria-expanded="true"] {
  color: var(--color-black, #000000) !important;
}
html[data-theme="dark"] .host-hoverable[data-hover-text-color="contrast"]:hover,
html[data-theme="dark"] .host-hoverable[data-hover-text-color="contrast"]:focus-visible,
html[data-theme="dark"] .host-hoverable[data-hover-text-color="contrast"][aria-expanded="true"] {
  color: #FFFFFF !important;
}

@media (prefers-reduced-motion: reduce) {
  .host-hoverable { transition-duration: .01ms !important; }
  .host-skeleton::after { animation: none !important; display: none; }
}