/**
 * TubeRaker — discover page-group stylesheet (teamkey = "discover")
 * Shared by discover.html. All colors come from variables.css tokens;
 * all sizes are rem (zero px per DEV_GUIDE #1).
 */

/* ===== Page-scoped decorative tokens (documented exception to DEV_GUIDE #3) =====
   These four values have NO theme-invariant equivalent in variables.css:
   white text/glyphs sitting on the always-saturated brand gradient, the dark
   media scrim that must stay dark in BOTH themes, the button sheen, and the
   skeleton shimmer highlight. Rather than scatter raw rgba()/#fff literals
   through the component rules below, they are centralised into named tokens
   here and consumed via var(). Promotion of these to the shared variables.css
   token file is requested via shared_requests. */
:root {
  --tr-on-accent: #ffffff;              /* text/icons on brand-gradient surfaces */
  --tr-scrim: rgba(15, 23, 42, 0.72);   /* dark scrim over colourful thumbnails */
  --tr-shine: rgba(255, 255, 255, 0.2); /* button sheen sweep */
  --tr-shimmer: rgba(148, 163, 184, 0.18); /* skeleton shimmer highlight */
}

/* ===== Brand gradient text ===== */
.gradient-text {
  background: linear-gradient(135deg, var(--color-brand-primary-light), var(--color-brand-secondary), var(--color-brand-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: gradient 4s ease infinite;
}

@keyframes gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ===== Card language (tokenised; keeps .glass-card for back-compat) ===== */
.glass-card,
.tr-card {
  background: var(--bg-elevated);
  border: 0.0625rem solid var(--border-primary);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

@media (hover: hover) {
  .tr-card:hover,
  .glass-card.tr-hover:hover {
    transform: translateY(-0.25rem);
    box-shadow: var(--shadow-lg);
  }
}

/* ===== Button shine ===== */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--tr-shine), transparent);
  transition: left 0.5s ease;
}
.btn-shine:hover::before { left: 100%; }

/* ===== Chips ===== */
.tr-chip {
  min-height: 2.75rem;
  padding: 0 1rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  border: 0.0625rem solid var(--border-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.tr-chip:active { transform: scale(0.97); }

.chip-active {
  background: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-secondary)) !important;
  color: var(--tr-on-accent) !important;
  border-color: transparent !important;
}

/* ===== Focus-visible: distinct from hover, applies to every control ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 0.125rem solid var(--color-brand-primary);
  outline-offset: 0.125rem;
  box-shadow: var(--shadow-focus);
}

/* ===== Icon toggles (theme) ===== */
.dark .icon-sun { display: inline-block; }
.dark .icon-moon { display: none; }
.icon-sun { display: none; }
.icon-moon { display: inline-block; }

/* ===== Auth-aware visibility ===== */
[data-auth-show="authenticated"] { display: none !important; }
body.is-authenticated [data-auth-show="authenticated"] { display: block !important; }
body.is-authenticated [data-auth-show="guest"] { display: none !important; }
body.is-authenticated [data-auth-show="authenticated"][data-auth-display="flex"] { display: flex !important; }
body.is-authenticated [data-auth-show="authenticated"][data-auth-display="grid"] { display: grid !important; }

/* ===== Horizontal scroll row (trending) with edge fade + snap ===== */
.scroll-row {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
}
.scroll-row > * { scroll-snap-align: start; }
.scroll-row::-webkit-scrollbar { height: 0.25rem; }
.scroll-row::-webkit-scrollbar-track { background: transparent; }
.scroll-row::-webkit-scrollbar-thumb { background: var(--border-secondary); border-radius: var(--radius-full); }

/* ===== Contest grid (promoted lead band) ===== */
.contest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--spacing-lg);
}

/* ===== Section show/hide =====
   The browse/search views are toggled via Tailwind's `hidden` (display:none),
   which suppresses CSS transitions, so the previous opacity/transform cross-fade
   here never animated (dead code) and has been removed. Show/hide is driven
   entirely by the `hidden` class in the page JS. */

/* ===== Duration badge — readable in BOTH themes (white on dark scrim) ===== */
.duration-badge {
  background: var(--tr-scrim);
  color: var(--tr-on-accent);
}

/* ===== Sample / preview affordance ===== */
.sample-tag {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  border: 0.0625rem solid var(--border-primary);
  border-radius: var(--radius-full);
  padding: 0.125rem 0.625rem;
}

/* ===== Skeleton shimmer for real (contest) loading state ===== */
.tr-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--bg-secondary);
}
.tr-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--tr-shimmer), transparent);
  animation: tr-shimmer 1.4s ease infinite;
}
@keyframes tr-shimmer { 100% { transform: translateX(100%); } }

/* ===== Category card gradients =====
   DOCUMENTED EXCEPTION to DEV_GUIDE #3: these 8 decorative two-hue tints span
   multiple palette hues (indigo, rose, pink, sky, cyan, etc.) that have no
   equivalent in variables.css, so no var(--...) substitution is possible today.
   They are purely decorative background washes at low alpha. Addition of a
   shared decorative-tint palette is requested via shared_requests; until then
   the literals are kept here and called out (not silently hardcoded). */
.cat-tech    { background: linear-gradient(135deg, rgba(59, 130, 246, 0.10), rgba(99, 102, 241, 0.10)); }
.cat-edu     { background: linear-gradient(135deg, rgba(16, 185, 129, 0.10), rgba(5, 150, 105, 0.10)); }
.cat-ent     { background: linear-gradient(135deg, rgba(244, 63, 94, 0.10), rgba(236, 72, 153, 0.10)); }
.cat-music   { background: linear-gradient(135deg, rgba(168, 85, 247, 0.10), rgba(139, 92, 246, 0.10)); }
.cat-gaming  { background: linear-gradient(135deg, rgba(234, 179, 8, 0.10), rgba(245, 158, 11, 0.10)); }
.cat-biz     { background: linear-gradient(135deg, rgba(14, 165, 233, 0.10), rgba(6, 182, 212, 0.10)); }
.cat-health  { background: linear-gradient(135deg, rgba(34, 197, 94, 0.10), rgba(22, 163, 74, 0.10)); }
.cat-creative{ background: linear-gradient(135deg, rgba(249, 115, 22, 0.10), rgba(251, 146, 60, 0.10)); }
.dark .cat-tech    { background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(99, 102, 241, 0.10)); }
.dark .cat-edu     { background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.10)); }
.dark .cat-ent     { background: linear-gradient(135deg, rgba(244, 63, 94, 0.15), rgba(236, 72, 153, 0.10)); }
.dark .cat-music   { background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(139, 92, 246, 0.10)); }
.dark .cat-gaming  { background: linear-gradient(135deg, rgba(234, 179, 8, 0.15), rgba(245, 158, 11, 0.10)); }
.dark .cat-biz     { background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(6, 182, 212, 0.10)); }
.dark .cat-health  { background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(22, 163, 74, 0.10)); }
.dark .cat-creative{ background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(251, 146, 60, 0.10)); }

/* ===== Sticky search toolbar under the 3.75rem shared header ===== */
.search-toolbar {
  position: sticky;
  top: 3.75rem;
  z-index: var(--z-sticky);
}

/* ===== Reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
  .gradient-text, .btn-shine::before { animation: none; transition: none; }
  .tr-skeleton::after { animation: none; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}