/* STYLE :: owrx-uix-dynamic (26.0.0) */

/* =========================================================
   wrx.list.css — WRX List (more + virtual)
   Global lightweight skin + loader + stagger enter animation
   ========================================================= */

/* Root */
.wrx-list{
  width: 100%;
  position: relative; /* critical for loader overlay */
  --wrx-loading-min-height: 140px;
  --wrx-enter-dur: 240ms;
  --wrx-enter-step: 35ms;
}

/* ---------------------------------------------------------
   Search (with built-in clear button; no icon libs required)
--------------------------------------------------------- */
.wrx-list__search{
  position: relative;
  padding: 0.5rem;
}

.wrx-list__search-input{
  width: 100%;
  padding: 0.5rem 2.25rem 0.5rem 0.75rem; /* space for clear */
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 0.5rem;
  outline: none;
}

/* Clear button injected by JS */
.wrx-list__search-clear{
  position: absolute;
  top: 50%;
  right: 0.9rem;
  transform: translateY(-50%);
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 999px;
  display: none;                 /* JS toggles */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.65;
}
.wrx-list__search-clear:hover{ opacity: 1; }
.wrx-list__search-clear:focus{ outline: 2px solid rgba(0,0,0,.25); outline-offset: 2px; }
.wrx-list__search-clear svg{ width: 16px; height: 16px; display: block; }

/* ---------------------------------------------------------
   Loading overlay (scoped + non-fixed)
--------------------------------------------------------- */
.wrx-list__loading{
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  pointer-events: none;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(1px);
}

/* JS toggles this class */
.wrx-list.is-loading{
  min-height: var(--wrx-loading-min-height);
}

.wrx-list.is-loading .wrx-list__loading{
  display: block;
}

.wrx-list__loading-inner{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem 0.25rem 1rem;
}

/* spinner above skeleton bars */
.wrx-list__spinner{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0.15);
  border-top-color: rgba(0,0,0,0.55);
  animation: wrxSpin 900ms linear infinite;
}

/* skeleton bars */
.wrx-list__skeleton{
  width: min(520px, 92%);
  display: grid;
  gap: 0.5rem;
}

.wrx-list__skeleton-row{
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.06) 0%,
    rgba(0,0,0,0.10) 35%,
    rgba(0,0,0,0.06) 70%
  );
  background-size: 240% 100%;
  animation: wrxShimmer 1200ms ease-in-out infinite;
}

/* While loading: keep chrome tidy */
.wrx-list.is-loading .wrx-list__footer{ display: none !important; }
.wrx-list.is-loading .wrx-list__status{ display: none !important; }

/* ---------------------------------------------------------
   Viewport
--------------------------------------------------------- */
.wrx-list__viewport{
  position: relative;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 0.75rem;
  background: #fff;
  outline: none;
}

/* Default (More mode): normal flow */
.wrx-list__inner{
  position: relative;
  transform: none;
}
.wrx-list__spacer{ display: none; }

/* Virtual mode */
.wrx-list.is-virtual .wrx-list__viewport{
  overflow: auto;
  max-height: 420px;
}
.wrx-list.is-virtual .wrx-list__spacer{
  display: block;
  width: 1px;
  opacity: 0;
  pointer-events: none;
}
.wrx-list.is-virtual .wrx-list__inner{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  will-change: transform;
}

/* ---------------------------------------------------------
   Items + stagger enter animation
--------------------------------------------------------- */
.wrx-list__item{
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
  cursor: pointer;
  user-select: none;
}
.wrx-list__item:last-child{ border-bottom: none; }

/* Selected */
.wrx-list__item.is-selected{
  background: rgba(0, 123, 255, 0.12);
}

/* Focus behavior: only show ring when viewport focused */
.wrx-list__item.is-focused{ outline: none; }
.wrx-list__viewport:focus .wrx-list__item.is-focused,
.wrx-list__viewport:focus-visible .wrx-list__item.is-focused{
  outline: 2px solid rgba(0, 123, 255, 0.6);
  outline-offset: -2px;
}
.wrx-list__item:focus,
.wrx-list__item:focus-visible{ outline: none; }

/* ENTER animation:
   We PAUSE by default so “append” batches don't auto-run before rAF.
*/
.wrx-list__item.is-enter{
  opacity: 0;
  transform: translateY(10px);
  animation: wrxItemEnter var(--wrx-item-dur, var(--wrx-enter-dur)) ease-out forwards;
  animation-play-state: paused;
}

/* JS adds this on next frame to start the animation */
.wrx-list__item.is-enter.is-enter-active{
  animation-play-state: running;
}

/* ---------------------------------------------------------
   Footer / More button
--------------------------------------------------------- */
.wrx-list__footer{
  padding: 0.5rem;
  text-align: center;
}

.wrx-list__more{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

/* Preferred new class */
.wrx-list__more-btn,
.wrx-list__footer .wrx-list__more{
  min-width: 120px;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(0,0,0,.25);
  border-radius: 9999px;
  background: transparent;
  cursor: pointer;
}

.wrx-list__more-btn:hover,
.wrx-list__footer .wrx-list__more:hover{ background: rgba(0,0,0,.04); }

.wrx-list__more-btn:active,
.wrx-list__footer .wrx-list__more:active{ background: rgba(0,0,0,.08); }

.wrx-list__more-btn:disabled,
.wrx-list__footer .wrx-list__more:disabled{
  opacity: 0.6;
  cursor: default;
}

/* ---------------------------------------------------------
   Error state
--------------------------------------------------------- */
.wrx-list.has-error .wrx-list__viewport{
  border-color: rgba(220, 53, 69, .35);
}

.wrx-list.has-error .wrx-list__status{
  color: #842029;
  background: #f8d7da;
  border: 1px solid #f5c2c7;
  border-radius: 8px;
  padding: .65rem .8rem;
  opacity: 1;
}

/* ---------------------------------------------------------
   Status (reserved for empty state / HTML empty)
--------------------------------------------------------- */
.wrx-list__status{
  margin-top: 0.5rem;
  font-size: 0.9rem;
  opacity: 0.8;
}

/* ---------------------------------------------------------
   Optional global hook: feed mode kills chrome
--------------------------------------------------------- */
.wrx-list.is-feed .wrx-list__viewport{
  border: 0;
  background: transparent;
  border-radius: 0;
}
.wrx-list.is-feed .wrx-list__item{
  border: 0;
  padding: 0;
  margin-bottom: 60px;
  cursor: default;
  user-select: text;
  background: transparent;
}

/* Server-virtual placeholders */
.wrx-list__item.is-placeholder{
  cursor: default;
  user-select: none;
  opacity: 0.85;
}

.wrx-list__ph{
  width: 100%;
}

.wrx-list__ph-line{
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.06) 0%,
    rgba(0,0,0,0.10) 35%,
    rgba(0,0,0,0.06) 70%
  );
  background-size: 240% 100%;
  animation: wrxShimmer 1200ms ease-in-out infinite;
}


/* ---------------------------------------------------------
   Keyframes + reduced motion (Razor-safe)
--------------------------------------------------------- */
@keyframes wrxSpin{
  to{ transform: rotate(360deg); }
}

@keyframes wrxShimmer{
  0%{ background-position: 0% 0%; }
  100%{ background-position: 120% 0%; }
}

@keyframes wrxItemEnter{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce){
  .wrx-list__spinner,
  .wrx-list__skeleton-row,
  .wrx-list__item.is-enter{
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}