/*
 * খবর base styles.
 *
 * Replaces the inline <style> block that was pasted into every page. Colors
 * come from the CSS custom properties in js/theme.js, so everything here is
 * automatically correct in both light and dark without a single `.dark` rule.
 */

body {
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }
.pt-safe { padding-top: env(safe-area-inset-top, 0px); }

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { scrollbar-width: none; }

/* --------------------------------------------------------------------------
 * Focus visibility
 *
 * The Stitch export shipped no focus styles at all, so the app was unusable by
 * keyboard and by anyone navigating with a D-pad or switch device. `:focus-visible`
 * (not `:focus`) means mouse and touch users never see a ring.
 * ------------------------------------------------------------------------ */
:focus-visible {
  outline: 2px solid rgb(var(--primary));
  outline-offset: 2px;
  border-radius: 6px;
}
/* The brand rust has poor contrast against its own container fills, so focus
   inside primary-tinted surfaces switches to the foreground colour. */
.bg-primary :focus-visible,
[class*="bg-primary/"] :focus-visible {
  outline-color: rgb(var(--on-surface));
}

/* --------------------------------------------------------------------------
 * Radio scrubber
 *
 * Range inputs cannot be styled with utility classes, and the browser default
 * is a grey OS slider that looks foreign in the player.
 * ------------------------------------------------------------------------ */
.khobor-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  background: transparent;
  cursor: pointer;
}
.khobor-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: rgb(var(--outline-variant));
}
.khobor-range::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: rgb(var(--outline-variant));
}
.khobor-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border-radius: 999px;
  background: rgb(var(--primary));
  border: 2px solid rgb(var(--surface-container-high));
  transition: transform 0.15s ease;
}
.khobor-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid rgb(var(--surface-container-high));
  border-radius: 999px;
  background: rgb(var(--primary));
}
.khobor-range:active::-webkit-slider-thumb { transform: scale(1.25); }

/* --------------------------------------------------------------------------
 * Accessibility fallbacks
 * ------------------------------------------------------------------------ */

/* The app leans on backdrop-blur for the header, tab bar and player. Users who
   ask for reduced transparency get opaque surfaces instead. */
@media (prefers-reduced-transparency: reduce) {
  .backdrop-blur-xl,
  .backdrop-blur-md,
  .backdrop-blur-sm {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: rgb(var(--surface)) !important;
  }
}

/* Motion here is modest (sheet slides, pulse dots, spinner), but reduced-motion
   is not a suggestion. Transitions collapse to instant; loops stop. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Bengali numerals have inconsistent advance widths in Hind Siliguri, so timers
   and counters jitter as they tick without this. */
.tabular-nums { font-variant-numeric: tabular-nums; }