/* ===================================================================
   GrooVVee — CSS Reset
   Minimal modern reset for consistent cross-browser rendering
   =================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  /* A safety net, not a fix for any one component: on some phones,
     ANY element anywhere on the page rendering even a few px wider than
     that phone's actual viewport (a rounding difference, a long
     unbreakable string, a flex child that didn't get min-width:0, etc.)
     makes the WHOLE PAGE horizontally scrollable — which is what let the
     Home feed's right-side action rail and the bottom nav render off the
     edge of the screen on one specific phone while looking fine on
     another. This clips any such overflow at the html/body level instead
     of letting it push the entire layout sideways; legitimate horizontal
     scrollers (the feed filter pills, chat pickers, etc.) still work —
     they scroll inside their OWN overflow-x:auto container, unaffected. */
  overflow-x: hidden;
}

body {
  min-height: 100dvh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  overflow-x: hidden;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

ul, ol {
  list-style: none;
}

fieldset {
  border: none;
}

/* Remove default focus ring — we style our own */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--primary-400, #3B82F6);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Large-screen / TV viewing (Roku, Fire TV, Vizio SmartCast, Google TV
   browsers all report large CSS viewports) ─────────────────────────────
   No reliable way to feature-detect "this is a TV" — this keys off
   viewport width instead, which also just benefits big desktop monitors.
   Slightly bigger base type + a thicker, more visible focus ring for
   several-feet viewing distance, and a small inset so content isn't
   flush against the edge (many TVs overscan/crop a few % of the picture). */
@media (min-width: 1600px) {
  html { font-size: 18px; }

  :focus-visible {
    outline-width: 3px;
    outline-offset: 3px;
  }

  .shell {
    padding-inline: 1.5vw;
  }
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.15);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.28);
}

/* Selection styling */
::selection {
  background: rgba(28, 28, 30, 0.3);
  color: #0F172A;
}

/* Hidden utility */
[hidden] {
  display: none !important;
}

/* Screen-reader only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}